:root {
    --bg-color: #0f172a;
    --text-main: #f8fafc;
    --accent: #38bdf8;
    --border: #334155;
}

body { background-color: var(--bg-color); color: var(--text-main); font-family: sans-serif; }
.page-wrapper { max-width: 1000px; margin: 0 auto; padding: 2rem; }
header { margin-bottom: 2rem; }

/* Site title */
header h1 { margin: 0; }
.tagline { margin: 0.4rem 0 0; font-size: 0.85rem; color: #64748b; }

.main-layout { display: flex; gap: 3rem; align-items: flex-start; }

/* Left: tag cloud */
.sidebar { width: 250px; position: sticky; top: 2rem; }
.tags-container {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 0 0.4rem;
    margin-top: 1rem;
    line-height: 1.6;
}
.tag-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    white-space: nowrap;
}
.tag-btn:hover { color: var(--text-main); }
.tag-btn.active { color: var(--accent); font-weight: bold; }

/* Tag cloud size tiers: more frequent tags render larger and brighter */
.tag-size-1 { font-size: 0.75rem; color: #64748b; }
.tag-size-2 { font-size: 0.85rem; color: #94a3b8; }
.tag-size-3 { font-size: 1rem;   color: #cbd5e1; }
.tag-size-4 { font-size: 1.2rem; color: #e2e8f0; }
.tag-size-5 { font-size: 1.4rem; color: var(--text-main); font-weight: 600; }

/* Right: bookmark list */
.content { flex: 1; min-width: 0; }
.bookmark-list { display: flex; flex-direction: column; }
.bookmark-item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.bookmark-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.bookmark-title-row { display: flex; align-items: center; gap: 0.35rem; }

.bookmark-title {
    color: var(--text-main); text-decoration: none; font-size: 1rem;
}
.bookmark-title:hover { color: var(--accent); text-decoration: underline; }

.featured-star { color: #fbbf24; font-size: 0.85rem; }

.bookmark-tags {
    display: flex; flex-flow: row wrap; align-items: baseline;
    gap: 0 0.4rem; font-size: 0.8rem;
}
.bookmark-tag {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; color: #64748b; font-size: 0.8rem;
}
.bookmark-tag:hover { color: var(--accent); text-decoration: underline; }

.url-hint { font-size: 0.85rem; color: #64748b; white-space: nowrap; flex-shrink: 0; }

/* List toolbar: result count + page-size selector */
.list-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem; color: #64748b;
}
.page-size-label { display: flex; align-items: center; gap: 0.4rem; }
.page-size-select {
    background: #1e293b; color: var(--text-main); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.25rem 0.4rem; font-size: 0.85rem; cursor: pointer;
}

/* Pagination nav */
.pagination-nav {
    display: flex; justify-content: center; align-items: center;
    gap: 0.4rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.page-btn {
    background: none; border: 1px solid var(--border); color: #94a3b8;
    border-radius: 4px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.85rem;
}
.page-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn.active { color: var(--bg-color); background: var(--accent); border-color: var(--accent); font-weight: bold; }
.page-ellipsis { color: #475569; padding: 0 0.2rem; }

/* Footer */
.site-footer {
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center; font-size: 0.8rem; color: #475569;
}