/* MathNet Explorer v2 — minimalist, matches the v1 site's slate palette. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Palette mirrors mathnet_website/styles.css:1-84 */
    --color-primary-50:  #f8fafc;
    --color-primary-100: #f1f5f9;
    --color-primary-200: #e2e8f0;
    --color-primary-500: #475569;
    --color-primary-600: #334155;
    --color-primary-700: #1e293b;

    --color-accent-50:  #f8fafc;
    --color-accent-100: #f1f5f9;
    --color-accent-500: #475569;
    --color-accent-600: #334155;
    --color-accent-700: #1e293b;

    --color-secondary-100: #f1f5f9;
    --color-secondary-700: #334155;

    --color-success-50:  #f0fdf4;
    --color-success-500: #059669;
    --color-success-700: #047857;

    --color-error-50:  #fef2f2;
    --color-error-500: #dc2626;

    /* Brand blues (shared with index.html). Used where we want the action to
       read as "primary / MathNet-native", not green-for-success. */
    --brand-blue: #5451f4;
    --brand-navy: #0d056f;
    --brand-blue-50:  #eef2ff;
    --brand-blue-700: #3730a3;

    --color-gray-50:  #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    --bg-primary:   #f8fafc;
    --bg-secondary: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;

    /* Domain accents — only used as a very faint card-bg tint via color-mix */
    --d-algebra:        #6366f1;
    --d-number-theory:  #0891b2;
    --d-geometry:       #ea580c;
    --d-combinatorics:  #16a34a;
    --d-analysis:       #db2777;
    --d-other:          #64748b;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', monospace;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    --transition-fast: 100ms ease-out;
    --transition-base: 150ms ease-out;
    --transition-slow: 200ms ease-out;
}

/* ── Announcement banner — mirrors the strip on index.html so the two pages
   share one voice. Sits above the site header on every view. */
.announcement-banner {
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue));
    color: #fff;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
}
.announcement-banner-inner {
    max-width: 1000px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 0.55rem; text-align: center;
}
.announcement-banner a { color: #fff; text-decoration: underline; }

body.dark {
    --color-gray-50:  #1e1e1e;
    --color-gray-100: #252526;
    --color-gray-200: #333333;
    --color-gray-300: #3c3c3c;
    --color-gray-400: #6e6e6e;
    --color-gray-500: #999999;
    --color-gray-600: #cccccc;
    --color-gray-700: #d4d4d4;
    --color-gray-800: #e0e0e0;
    --color-gray-900: #f0f0f0;

    --bg-primary:   #1e1e1e;
    --bg-secondary: #252526;
    --text-primary: #d4d4d4;
    --text-secondary: #858585;
    --border-color: #333333;

    --color-primary-50:  #2a2d2e;
    --color-primary-100: #2a2d2e;
    --color-primary-500: #6e6e6e;
    --color-primary-600: #999999;
    --color-primary-700: #d4d4d4;
    --color-accent-50:   #2a2d2e;
    --color-accent-500:  #6e6e6e;
    --color-accent-600:  #999999;
    --color-accent-700:  #d4d4d4;
    --color-success-50:  #163028;
    --color-success-500: #10b981;
    --color-success-700: #34d399;
    --color-error-50:    #3b1f21;
    --color-error-500:   #f87171;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--transition-base), color var(--transition-base);
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 40;
}
.site-header-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
}
/* Wordmark — matches v0 typographically (Computer Modern small-caps), so
   the brand reads as one family across v0/v3 pages. */
.site-brand {
    display: flex; align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: 'Computer Modern', 'Latin Modern', Georgia, serif;
    font-variant: small-caps;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}
/* Let the globe keep its aspect ratio — fixing height and letting width
   flow prevents the squished-square look of v3's old 28×28 box. */
.site-brand img { height: 22px; width: auto; }
.site-nav-links { display: flex; gap: var(--space-md); align-items: center; }
.site-nav-links a, .nav-btn {
    color: var(--text-secondary); font-size: 0.875rem; text-decoration: none;
    padding: 6px 12px; border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}
.nav-btn { border-color: var(--border-color); }
.nav-btn:hover, .site-nav-links a:hover { color: var(--text-primary); background: var(--color-gray-100); }
body.dark .nav-btn:hover, body.dark .site-nav-links a:hover { background: var(--color-gray-200); }

/* ── Views ───────────────────────────────────────────────────────────── */
.view { padding: var(--space-lg) 0 var(--space-2xl); }
/* Page gutters — restored in v3 so content breathes from the window edges.
   Tighter on mobile so small screens keep their horizontal real estate. */
.view-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
@media (max-width: 640px) {
    .view-inner { padding: 0 var(--space-md); }
}

/* ── Landing tabs ────────────────────────────────────────────────────── */
.tabs {
    display: flex; gap: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-lg); overflow-x: auto;
}
.tab {
    padding: 10px 16px; font-size: 0.9375rem; color: var(--text-secondary);
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--color-primary-500); font-weight: 600; }

/* Sources: split into Competitions & Olympiads / Countries */
.source-section { margin-bottom: var(--space-xl); }
.source-section-title {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}
.grid-sources {
    display: grid; gap: var(--space-sm);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.source-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    display: flex; flex-direction: row; align-items: center; gap: var(--space-sm);
    text-align: left; min-width: 0;
}
.source-card:hover { border-color: var(--color-gray-400); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.source-flag {
    font-size: 1.75rem; line-height: 1; flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
}
.source-flag-logo {
    width: 100%; height: 100%; object-fit: contain;
    border-radius: 4px;
}
/* When buildCompLogo renders inside a source card, fill the 2.25rem box. */
.source-flag .comp-card-logo { width: 100%; height: 100%; background: transparent; }
.source-flag .comp-logo-emoji { font-size: 1.6rem; }
.source-flag .comp-logo-monogram { font-size: 0.72rem; }
.source-flag .comp-logo-tri i { font-size: 0.7rem; }
.source-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.source-name {
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Long names wrap; extra-long ones shrink further so they still fit one card. */
.source-name--long  { font-size: 0.8125rem; white-space: normal; line-height: 1.2; }
.source-name--xlong { font-size: 0.72rem;   white-space: normal; line-height: 1.2; }
.source-count { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.source-historical {
    font-size: 0.7rem; font-style: italic;
    color: var(--text-secondary);
    margin-top: 1px;
    opacity: 0.85;
}

/* Competition grid (By Competition tab) */
.grid-competitions {
    display: grid; gap: var(--space-sm);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.comp-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md);
    display: flex; gap: var(--space-sm); align-items: center; text-align: left;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.comp-card:hover { border-color: var(--color-gray-400); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.comp-card-logo { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: contain; background: var(--color-gray-100); flex-shrink: 0; }
/* Fallback icons (when no image logo file exists). */
.comp-logo-emoji {
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1;
}
.comp-logo-monogram {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; letter-spacing: 0.02em;
    font-size: 0.8rem; font-family: var(--font-mono);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.comp-logo-bespoke {
    background: var(--bg-primary); padding: 4px;
    display: flex; align-items: center; justify-content: center;
}
/* Three-flag-emoji triangle — Czech-Polish-Slovak. CZ top, PL bottom-left,
   SK bottom-right. Emojis are ~14px at 0.85rem; the 36×36 comp-card-logo
   gives enough room for a clear triangle with visible gaps. */
.comp-logo-tri {
    position: relative;
    display: block;
    width: 100%; height: 100%;
}
.comp-logo-tri i {
    position: absolute;
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1;
}
/* Nudge inward a bit so the flag glyphs don't hug the edges and look cropped. */
.comp-logo-tri i:nth-child(1) { top: 1px;    left: 50%; transform: translateX(-50%); }  /* CZ top */
.comp-logo-tri i:nth-child(2) { bottom: 1px; left: 2px;  }                               /* PL bottom-left */
.comp-logo-tri i:nth-child(3) { bottom: 1px; right: 2px; }                               /* SK bottom-right */
.comp-card-code {
    font-weight: 700; font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 0.7rem; letter-spacing: 0.02em;
}
/* Clamp the name to at most 2 lines so cards keep a predictable height
   regardless of competition name length. */
.comp-card-name {
    font-weight: 600; font-size: 0.82rem; line-height: 1.25;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.comp-card-count { color: var(--text-secondary); font-size: 0.72rem; margin-top: 2px; }

/* Topics (By Topic tab) — expandable tree, v1-style */
/* 2×2 grid for the four subject cards. The old `auto-fill` breakpoint
   collapsed to a ragged 3+1 or 3+2 depending on window width; a fixed
   2-column layout keeps the grid balanced at desktop sizes, and the
   single-column rule at <640px below handles mobile. */
.grid-topics {
    display: grid; gap: var(--space-lg);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topic-subject-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.topic-subject-card:hover {
    border-color: color-mix(in srgb, var(--subject-color, var(--color-primary-500)) 40%, var(--border-color));
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
body.dark .topic-subject-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
/* Two-stop jewel-tone bar at the top of each subject card. */
.topic-subject-card::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg,
        var(--subject-color, var(--color-primary-500)),
        var(--subject-color-b, var(--subject-color, var(--color-primary-700))));
}
.topic-subject-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; cursor: pointer; user-select: none;
    gap: var(--space-sm);
}
.topic-subject-header:hover .topic-subject-name { color: var(--subject-color, var(--color-primary-600)); }
.topic-subject-left  { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.topic-subject-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.topic-subject-name  { font-size: 1rem; font-weight: 700; color: var(--text-primary); transition: color var(--transition-base); }
.topic-subject-count {
    font-size: 0.75rem; font-weight: 600;
    color: var(--subject-color, var(--color-primary-600));
    background: color-mix(in srgb, var(--subject-color, var(--color-primary-500)) 10%, transparent);
    padding: 2px 9px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.topic-chevron, .tree-node-chevron {
    font-size: 1rem; font-weight: 600; color: var(--text-secondary);
    transition: transform 0.2s ease; display: inline-block; line-height: 1;
}
.topic-chevron.rotated, .tree-node-chevron.rotated { transform: rotate(90deg); }

.topic-subject-body { display: none; border-top: 1px solid var(--border-color); }
.topic-subject-body.expanded { display: block; }

/* Preview strip shown under the header when the subject is collapsed (v3) —
   a compact one-liner of top child branches that advertises what's inside. */
.topic-subject-preview {
    padding: 0 1rem 0.75rem;
    margin-top: -0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.topic-subject-card:hover .topic-subject-preview { color: var(--text-primary); }

/* ── Directory-style tree ────────────────────────────────────────────────
   Each row renders a connector glyph (├─ or └─) in a fixed-width monospaced
   span so counts align in a neat right column. Depth controls the left
   indent via a CSS var. */
.topic-tree-lines {
    padding: 0.35rem 0.5rem 0.55rem;
    font-size: 0.85rem;
}
.tree-row {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.5rem 0.18rem 0.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
/* Depth-based left indent. attr() inside calc() has poor cross-browser
   support, so we use explicit per-depth rules (6 levels covers all data). */
.tree-row[data-depth="0"] { padding-left: 0.25rem; }
.tree-row[data-depth="1"] { padding-left: 1.35rem; }
.tree-row[data-depth="2"] { padding-left: 2.45rem; }
.tree-row[data-depth="3"] { padding-left: 3.55rem; }
.tree-row[data-depth="4"] { padding-left: 4.65rem; }
.tree-row[data-depth="5"] { padding-left: 5.75rem; }
.tree-row:hover { background: color-mix(in srgb, var(--subject-color, var(--color-primary-500)) 7%, transparent); }
.tree-row-parent { font-weight: 600; color: var(--text-primary); }
.tree-row-leaf   { color: var(--text-secondary); }
.tree-row-leaf:hover { color: var(--subject-color, var(--color-primary-600)); }

/* Connector glyph — monospaced, light color so it reads as structural
   scaffolding rather than content. ├─ for middle rows, └─ for last. */
.tree-connector {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
    width: 1.25rem;
    display: inline-block;
    line-height: 1;
    user-select: none;
}
.tree-connector::before { content: "├─"; }
.tree-row.is-last > .tree-connector::before { content: "└─"; }
/* Depth-0 children of a subject card shouldn't show a connector — they are
   the first level and look cleaner without one. Counter: keep, for consistency. */

.tree-node-children {
    display: none;
}
.tree-node-children.expanded { display: block; }

.tree-node-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-view-all { font-style: italic; font-size: 0.8rem; opacity: 0.8; }
.tree-node-count {
    font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; min-width: 3.25rem; text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .grid-topics { grid-template-columns: 1fr; }
    .tree-node-label { white-space: normal; }
}

.random-placeholder { text-align: center; padding: var(--space-2xl); }

/* ── Problem of the Day (v3) ──────────────────────────────────────────── */
.potd-card {
    max-width: 780px;
    margin: var(--space-lg) auto;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--dom-a, var(--color-primary-500));
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.potd-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}
.potd-label-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.potd-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8rem; font-weight: 600;
    color: var(--color-primary-700, #3730a3);
    background: var(--color-primary-100, rgba(79, 70, 229, 0.08));
    border-radius: 999px;
}
.potd-date {
    font-size: 0.85rem; color: var(--text-secondary);
}
.potd-curated-tag {
    font-size: 0.72rem; font-weight: 600;
    padding: 2px 7px;
    color: #a16207;
    background: rgba(234, 179, 8, 0.14);
    border-radius: 999px;
}
.potd-shuffle {
    padding: 4px 10px;
    font-size: 0.82rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.potd-shuffle:hover { background: var(--bg-primary); color: var(--text-primary); }
.potd-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}
.potd-meta-country { font-weight: 600; color: var(--text-primary); }
.potd-title {
    font-size: 1.2rem; font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
    color: var(--text-primary);
}
.potd-body {
    font-size: 1rem;
    line-height: 1.55;
    padding: var(--space-md) 0;
    color: var(--text-primary);
    max-height: 360px; overflow: hidden;
    position: relative;
    border-top: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: var(--space-md);
}
.potd-body::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
    background: linear-gradient(to bottom, transparent, var(--bg-secondary));
    pointer-events: none;
}
.potd-actions {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
.potd-actions .potd-domain-pill { margin-left: auto; }
.potd-action-btn {
    flex: 1 1 0; min-width: 170px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit; font-weight: 500; font-size: 0.9rem;
    text-align: center; cursor: pointer;
    transition: all var(--transition-fast);
}
.potd-action-btn:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}
.potd-action-btn--primary {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: white;
}
.potd-action-btn--primary:hover {
    filter: brightness(1.05);
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: white;
}
.potd-domain-pill {
    padding: 4px 10px;
    font-size: 0.78rem; font-weight: 500;
    border-radius: 999px;
    color: #fff;
    background: var(--dom-a, var(--color-primary-500));
}
/* Make the domain color vars available on the POTD card via its domain-X class. */
.potd-card.domain-Algebra        { --dom-a: #4f46e5; --dom-b: #7c3aed; }
.potd-card.domain-Number-Theory  { --dom-a: #0e7490; --dom-b: #0d9488; }
.potd-card.domain-Geometry       { --dom-a: #c2410c; --dom-b: #d97706; }
.potd-card.domain-Combinatorics  { --dom-a: #047857; --dom-b: #0d9488; }
.potd-card.domain-Analysis       { --dom-a: #9f1239; --dom-b: #7c3aed; }
.potd-card.domain-Other          { --dom-a: #475569; --dom-b: #64748b; }

/* ── List (problems) ─────────────────────────────────────────────────── */
.list-header {
    display: flex; align-items: center; gap: var(--space-md);
    margin-bottom: var(--space-md); flex-wrap: wrap;
}
.list-title {
    font-size: 1.125rem; font-weight: 600; flex: 1; min-width: 0;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.list-title-flag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.list-title-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.list-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-stats { display: flex; gap: var(--space-xs); }
.stat-pill {
    padding: 4px 10px; border-radius: var(--radius-md); background: var(--color-gray-100);
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 500;
}
body.dark .stat-pill { background: var(--color-gray-200); }

.btn-back {
    padding: 6px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    font-size: 0.875rem; color: var(--text-primary);
    transition: all var(--transition-fast);
}
.btn-back:hover { background: var(--color-gray-100); }
body.dark .btn-back:hover { background: var(--color-gray-200); }

/* ── Filter bar (always visible, plain controls) ─────────────────────── */
.filters-bar {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Active filter pills (v3) ─────────────────────────────────────────── */
.active-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: -4px 0 var(--space-md);
    padding: 0;
    align-items: center;
}
.active-filter-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 10px;
    background: var(--color-primary-100, rgba(79, 70, 229, 0.08));
    color: var(--color-primary-700, #3730a3);
    border: 1px solid var(--color-primary-200, rgba(79, 70, 229, 0.18));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.active-filter-pill-label { padding-top: 1px; }
.active-filter-pill-remove {
    width: 18px; height: 18px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit; opacity: 0.55;
    font-size: 0.95rem; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
.active-filter-pill-remove:hover {
    background: var(--color-primary-200, rgba(79, 70, 229, 0.22));
    opacity: 1;
}
.active-filter-pill--clear {
    padding: 3px 10px;
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
    cursor: pointer;
}
.active-filter-pill--clear:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
body.dark .active-filter-pill {
    background: rgba(124, 58, 237, 0.14);
    color: #d5d0ff;
    border-color: rgba(124, 58, 237, 0.32);
}
body.dark .active-filter-pill-remove:hover {
    background: rgba(124, 58, 237, 0.3);
}

.filter-select-inline {
    height: 32px;
    padding: 0 26px 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all var(--transition-base);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.filter-select-inline:hover { border-color: var(--color-primary-500); }
.filter-select-inline:focus {
    outline: none; border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}
.filter-text-inline {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    min-width: 200px;
    transition: all var(--transition-base);
    outline: none;
}
.filter-text-inline:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* Year range/single slider (touch-friendly, thumbs centered on rail) */
/* Compact year filter (v3): a single horizontal row with no internal wrap.
   Shrinks the YEAR label, collapses mode tabs, shortens the slider, and
   pulls "All years / Reset" inline so the whole thing reads as one control. */
.filter-year {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    flex: 0 1 320px;
    flex-wrap: nowrap;
}
.filter-year-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.filter-year-mode {
    display: inline-flex;
    background: var(--color-gray-100);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.year-mode-btn {
    border: none; background: transparent;
    padding: 2px 8px;
    font-size: 0.7rem; font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 999px;
    line-height: 1.2;
    transition: background var(--transition-base), color var(--transition-base);
}
.year-mode-btn.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.year-mode-btn:hover:not(.active) { color: var(--text-primary); }
body.dark .filter-year-mode { background: var(--color-gray-200); }
body.dark .year-mode-btn.active { background: var(--color-gray-50); }

.filter-year-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    min-width: 0;
    text-align: right;
    flex-shrink: 0;
}
.filter-year-reset {
    border: none; background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 999px;
    transition: background var(--transition-base), color var(--transition-base);
    flex-shrink: 0;
}
.filter-year-reset:hover { color: var(--text-primary); background: var(--color-primary-100); }

/* The wrap is 32px tall so taps comfortably hit the thumb; the track sits
   at vertical center and the two native inputs stack on top of it with
   pointer-events on only the thumbs. */
/* Slider geometry (kept in sync via CSS vars so the track, runnable-track, and
   thumb all share the same centre line). Thumb centres vertically on the
   runnable-track via a negative margin-top = (track_h - thumb_h) / 2. */
.filter-year-slider {
    --slider-h: 24px;
    --track-h: 3px;
    --thumb-h: 14px;
    position: relative;
    flex: 1 1 120px;
    height: var(--slider-h);
    min-width: 100px;
    padding: 0 calc(var(--thumb-h) / 2);
    box-sizing: border-box;
    touch-action: pan-y;
    display: flex;
    align-items: center;
}
.year-slider-track {
    position: absolute;
    left: calc(var(--thumb-h) / 2);
    right: calc(var(--thumb-h) / 2);
    top: 50%;
    transform: translateY(-50%);
    height: var(--track-h);
    background: var(--border-color);
    border-radius: 999px;
    pointer-events: none;
}
.year-slider-range {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: var(--track-h); background: var(--color-primary-600); border-radius: 999px;
    left: calc(var(--thumb-h) / 2); right: calc(var(--thumb-h) / 2);
    pointer-events: none;
}
/* Single mode hides the filled range (visual band) and the max handle. */
.filter-year-slider.is-single .year-slider-range { display: none; }
.filter-year-slider.is-single .year-slider-input--max { display: none; }

.year-slider-input {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0;
    background: transparent;
    box-sizing: border-box;
    pointer-events: none;  /* rail ignores, thumb re-enables below */
    -webkit-appearance: none; appearance: none;
}
/* Give the runnable-track the full height so the thumb's natural vertical
   centre aligns with the visible rail (which sits at 50%). */
.year-slider-input::-webkit-slider-runnable-track { background: transparent; height: var(--track-h); border: none; }
.year-slider-input::-moz-range-track              { background: transparent; height: var(--track-h); border: none; }

/* Thumbs: circle, vertically centered on the rail. Webkit requires an explicit
   margin-top of -(thumb-h - track-h)/2; Firefox already centres the thumb on
   the track, so no margin-top there. */
.year-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: var(--thumb-h); height: var(--thumb-h);
    border-radius: 50%;
    background: var(--color-primary-600);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 0 0 1px var(--color-primary-600);
    cursor: grab; pointer-events: auto;
    margin-top: calc((var(--track-h) - var(--thumb-h)) / 2);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.year-slider-input::-moz-range-thumb {
    width: var(--thumb-h); height: var(--thumb-h);
    border-radius: 50%;
    background: var(--color-primary-600);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 0 0 1px var(--color-primary-600);
    cursor: grab; pointer-events: auto;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.year-slider-input:active::-webkit-slider-thumb { cursor: grabbing; }
.year-slider-input:active::-moz-range-thumb     { cursor: grabbing; }
.year-slider-input:focus { outline: none; }
.year-slider-input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-primary-50); }
.year-slider-input:focus::-moz-range-thumb     { box-shadow: 0 0 0 4px var(--color-primary-50); }
.year-slider-input--min { z-index: 2; }
.year-slider-input--max { z-index: 3; }

/* Thumb hover lift — desktop only, hidden on touch where it feels jumpy. */
@media (hover: hover) {
    .year-slider-input::-webkit-slider-thumb:hover,
    .year-slider-input::-moz-range-thumb:hover { transform: scale(1.08); }
}

/* On narrow screens, stack the slider below the label row so the rail has
   the full width to play with. */
@media (max-width: 640px) {
    .filter-year { padding: 0; }
    .filter-year-slider { flex-basis: 100%; order: 10; }
}

/* Competition chip strip */
.filter-competition-strip[hidden] { display: none; }
.filter-competition-strip {
    display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px;
    margin-bottom: var(--space-md); padding: 0 12px;
}
.filter-competition-strip-label { padding-top: 8px; }
.filter-competition-strip-label {
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0;
}
.filter-competition-clear {
    border: none; background: transparent;
    color: var(--color-primary-600); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; padding: 3px 10px; border-radius: 999px;
    transition: background var(--transition-base);
}
.filter-competition-clear:hover { background: var(--color-primary-100); }
.filter-competition-clear[hidden] { display: none; }
.filter-competition-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1 1 auto; min-width: 0;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height var(--transition-base);
}
.filter-competition-chips.is-collapsed {
    /* One full chip-row: chips are ~32px tall (0.8125rem font + 5px padding
       + 1px border top/bottom + line-height). 36px gives comfortable margin. */
    max-height: 36px;
}
.filter-competition-expand {
    border: none; background: transparent;
    color: var(--color-primary-600); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; padding: 3px 10px; border-radius: 999px;
    transition: background var(--transition-base);
    flex-shrink: 0;
}
.filter-competition-expand:hover { background: var(--color-primary-100); }
.filter-competition-expand[hidden] { display: none; }
.competition-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid var(--border-color);
    border-radius: 999px; background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.8125rem; cursor: pointer;
    max-width: 100%; transition: all var(--transition-base);
}
.competition-chip:hover { border-color: var(--color-primary-500); background: var(--color-primary-100); }
.competition-chip.is-active {
    background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff;
}
.competition-chip.is-active:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.competition-chip-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}

/* ── Problem list cards ──────────────────────────────────────────────── */
.list-grid { display: flex; flex-direction: column; gap: var(--space-md); }

.problem-item {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    padding-left: calc(var(--space-md) + 4px);   /* room for the gradient bar */
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Gradient bar on the left edge — 4px, two-stop jewel-tone gradient. */
.problem-item::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
    background: linear-gradient(180deg, var(--dom-a, #cbd5e1), var(--dom-b, #94a3b8));
}
.problem-item:hover { border-color: var(--color-primary-500); }

/* Jewel-tone palette (two stops per domain). --dom-a is top of the bar and
   the dot's fill; --dom-b is bottom of the bar / secondary gradient stop. */
.problem-item.domain-Algebra        { --dom-a: #4f46e5; --dom-b: #7c3aed; }
.problem-item.domain-Number-Theory  { --dom-a: #0e7490; --dom-b: #0d9488; }
.problem-item.domain-Geometry       { --dom-a: #c2410c; --dom-b: #d97706; }
.problem-item.domain-Combinatorics  { --dom-a: #047857; --dom-b: #0d9488; }
.problem-item.domain-Analysis       { --dom-a: #9f1239; --dom-b: #7c3aed; }
.problem-item.domain-Other          { --dom-a: #475569; --dom-b: #64748b; }

/* Tiny gradient dot — visual color-code for a domain. Used inside filter
   chips to reinforce palette at a glance. */
.domain-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 999px;
    background: linear-gradient(135deg, var(--dom-a, #cbd5e1), var(--dom-b, #94a3b8));
    flex-shrink: 0;
}
/* Against the gradient-filled active chip, the dot vanishes — swap to an
   inner white disc so it still reads as a marker. */
.topic-chip-filter.is-active .domain-dot {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Source / meta row */
.problem-item-source {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.2rem 0.3rem;
    font-size: 0.78rem; color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.35;
}
.source-flag-name { font-weight: 500; color: var(--text-primary); }
.card-flag { font-size: 0.95rem; line-height: 1; margin-right: 2px; flex-shrink: 0; }
.card-flag-logo {
    width: 18px; height: 18px; object-fit: contain; border-radius: 3px;
    vertical-align: -3px;
}
.icon-btn--right { margin-left: auto; }
.source-sep { color: var(--color-gray-400); user-select: none; }
.source-competition, .source-year { color: var(--text-secondary); }

/* Vote count badge (v3) — shown on the right of the source row. Appears
   only when the problem has at least one vote, so unrated cards stay quiet. */
.card-vote-count {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1;
}
.card-vote-count svg { opacity: 0.7; }
.card-vote-count svg:first-of-type { color: var(--color-success-500, #16a34a); opacity: 0.85; }
.card-vote-count svg:last-of-type  { color: var(--color-danger-500,  #dc2626); opacity: 0.85; }

/* Short title (optional) */
.problem-item-title {
    font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
    margin-bottom: 4px; cursor: pointer; opacity: 0.78;
    transition: opacity var(--transition-fast);
}
.problem-item-title:hover { opacity: 1; }

/* Problem body — full markdown. No clipping; very long problems extend the
   card naturally. If a problem is enormous, the card gets an inner scroll
   cap (max-height: 70vh) so the page stays usable. */
.problem-item-body {
    position: relative;
    font-size: 0.92rem; line-height: 1.6; color: var(--text-primary);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    padding: 0;
    transition: none;
    max-height: 70vh;
    overflow-y: auto;
}
.problem-item-body p { margin-bottom: 0.5em; }
.problem-item-body p:last-child { margin-bottom: 0; }
.problem-item-body img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }

/* Actions row */
.problem-item-actions {
    display: flex; gap: var(--space-xs); margin-top: var(--space-sm);
    padding-top: var(--space-sm); border-top: 1px solid var(--border-color);
    flex-wrap: wrap; align-items: center;
}
.btn-view-problem,
.btn-view-solution {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 500; font-size: 0.82rem;
    transition: all var(--transition-base);
}
.btn-view-problem:hover {
    background: var(--color-primary-50); border-color: var(--color-primary-500); color: var(--color-primary-700);
}
.btn-view-solution {
    background: var(--brand-blue-50); border-color: var(--brand-blue); color: var(--brand-blue-700);
}
.btn-view-solution:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }

/* Show Source — neutral slate so it reads as secondary to the green
   "Show Solution" and the primary "View Full Problem" actions. */
.btn-view-source {
    padding: 5px 12px; border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md); cursor: pointer;
    background: var(--bg-secondary); color: var(--text-secondary);
    font-weight: 500; font-size: 0.82rem;
    transition: all var(--transition-fast);
}
.btn-view-source:hover { border-color: var(--text-primary); color: var(--text-primary); }
.source-inline {
    display: none;
    margin-top: var(--space-sm);
}
.source-inline.visible { display: block; animation: fadeIn var(--transition-base); }
.source-inline-empty {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary); font-size: 0.875rem; font-style: italic;
    background: var(--bg-primary); border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.btn-copy-latex {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--color-primary-600);
    cursor: pointer; font-weight: 600; font-size: 0.875rem;
    transition: all var(--transition-base);
    display: inline-flex; align-items: center; gap: var(--space-xs);
}
.btn-copy-latex.compact { padding: 4px 10px; font-size: 0.8125rem; border-width: 1px; }
.btn-copy-latex:hover { background: var(--color-primary-50); }

/* Inline solution (revealed from list card) */
.solution-inline {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    font-size: 1.03rem; line-height: 1.8;
    display: none;
}
.solution-inline.visible { display: block; animation: fadeIn var(--transition-base); }
.solution-inline-header {
    font-weight: 600; color: var(--text-primary);
    margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
.solution-inline img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }
.answer-box {
    margin-top: var(--space-md); padding: var(--space-md);
    background: var(--color-primary-50); border-left: 3px solid var(--color-primary-500);
    border-radius: var(--radius-md);
}

/* Solution tabs (used inline and in detail) */
.solution-tabs {
    display: flex; gap: var(--space-sm); margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-xs);
    flex-wrap: wrap;
}
.solution-tab {
    padding: var(--space-xs) var(--space-md); background: transparent; border: none;
    cursor: pointer; font-weight: 600; color: var(--text-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all var(--transition-base); position: relative;
    font-size: 0.875rem;
}
.solution-tab:hover { background: var(--bg-primary); color: var(--text-primary); }
.solution-tab.active { color: var(--color-primary-600); background: var(--color-primary-50); }
.solution-tab.active::after {
    content: ''; position: absolute;
    bottom: calc(-1 * var(--space-xs) - 1px); left: 0; right: 0; height: 2px;
    background: var(--color-primary-600);
}
.solution-content { display: none; }
.solution-content.show { display: block; animation: fadeIn var(--transition-base); }

/* Pagination */
.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: var(--space-sm); margin-top: var(--space-xl);
}
.pagination button {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-secondary); color: var(--text-primary);
    font-weight: 500; min-width: 40px;
    transition: all var(--transition-base);
}
.pagination button:hover:not(:disabled) { background: var(--bg-primary); border-color: var(--color-primary-500); }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination button.active {
    background: var(--color-primary-500); color: white; border-color: var(--color-primary-500);
}
.pagination span { color: var(--text-secondary); padding: 0 4px; }

/* ── Detail view ─────────────────────────────────────────────────────── */
.detail-inner { max-width: 880px; }
/* List view column mirrors the detail view — same narrow reading width,
   same side gutters, so switching between list and detail feels continuous. */
.list-inner { max-width: 880px; }
.problem-card-detail {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.problem-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-sm); flex-wrap: wrap;
}
.nav-buttons { display: flex; gap: var(--space-xs); align-items: center; }
.btn-nav {
    padding: 5px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-secondary); color: var(--text-primary);
    cursor: pointer; font-weight: 500;
    transition: all var(--transition-base); font-size: 0.82rem;
}
.btn-nav:hover:not(:disabled) { background: var(--bg-primary); border-color: var(--color-primary-500); }
.btn-nav:disabled { opacity: 0.5; cursor: not-allowed; }
.problem-counter { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }

.problem-header {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: flex-start; gap: var(--space-md);
}
.problem-header-left { flex: 1; min-width: 0; }
/* Up/down vote pill tucked to the right of the header */
.vote-pill {
    display: inline-flex; align-items: stretch; flex-shrink: 0;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-secondary); overflow: hidden;
    align-self: center;
}
.vote-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px;
    border: 0; background: transparent;
    color: var(--text-secondary); cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.vote-icon + .vote-icon { border-left: 1px solid var(--border-color); }
.vote-icon:hover { background: var(--color-gray-100); color: var(--text-primary); }
.vote-icon.active:first-child { color: #fff; background: var(--color-success-500); }
.vote-icon.active:last-child  { color: #fff; background: var(--color-danger-500, #dc2626); }
.problem-title {
    font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 4px; line-height: 1.3;
}
.problem-subtitle { color: var(--color-gray-600); font-size: 0.95rem; margin-top: 0; margin-bottom: var(--space-sm); }
.problem-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-badge {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: 2px 8px;
    background: var(--color-gray-100); border-radius: var(--radius-md);
    font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
}

/* Problem body / content in detail view */
.problem-body {
    padding: var(--space-md);
}
.problem-content {
    font-size: 0.98rem; line-height: 1.65; color: var(--text-primary);
}
.problem-content p { margin-bottom: var(--space-sm); }
.problem-content p:last-child { margin-bottom: 0; }
.problem-content img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }
.problem-content-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-sm);
}
.problem-content-header h3 { margin: 0; font-size: 0.78rem; font-family: var(--font-sans);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.problem-content-actions { display: inline-flex; align-items: center; gap: 6px; }

/* Problem-box toolbar: two icon-sized actions (Report issue / Propose solution)
   tucked flush to the bottom-right of the problem statement. Doesn't reserve
   a new row; no hover glow until the user actually points at them. */
.problem-toolbar {
    display: flex; justify-content: flex-end; gap: 4px;
    margin-top: var(--space-sm);
}
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 26px; padding: 0 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-gray-400);
    cursor: pointer; transition: all var(--transition-fast);
    font: inherit;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-color); background: var(--bg-secondary); }
.icon-btn-label { font-size: 0.8rem; line-height: 1; }

/* Related topics */
.topics-section {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.topics-header {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.topics-grid { display: flex; flex-direction: column; gap: 4px; }
.topic-item {
    display: flex; align-items: center;
    padding: 5px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    width: 100%;
}
.topic-item:hover {
    border-color: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 60%, var(--border-color));
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 6%, var(--bg-secondary));
}
.topic-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.82rem; }
.topic-level { padding: 1px 7px; border-radius: var(--radius-sm); font-weight: 500; }
/* Level-0 = subject: solid gradient pill from the jewel-tone palette.
   Levels 1+ = progressively lighter tints of the same subject color,
   so a topic path reads as a shaded breadcrumb instead of rainbow noise. */
.topic-level-0 {
    background: linear-gradient(135deg, var(--dom-a, var(--color-primary-600)), var(--dom-b, var(--color-primary-700)));
    color: #fff;
}
.topic-level-1 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 22%, transparent);
    color: color-mix(in srgb, var(--dom-a, var(--color-primary-700)) 85%, var(--text-primary));
}
.topic-level-2 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 12%, transparent);
    color: color-mix(in srgb, var(--dom-a, var(--color-primary-700)) 65%, var(--text-primary));
}
.topic-level-3 {
    background: color-mix(in srgb, var(--dom-a, var(--color-primary-500)) 6%, transparent);
    color: var(--text-secondary);
}
.topic-separator { color: var(--text-secondary); font-weight: 400; opacity: 0.5; }

/* Map subject → jewel-tone palette, same as problem-card and topic-chip rules. */
.topic-item.topic-subject-Algebra              { --dom-a: #4f46e5; --dom-b: #7c3aed; }
.topic-item.topic-subject-Number-Theory        { --dom-a: #0e7490; --dom-b: #0d9488; }
.topic-item.topic-subject-Geometry             { --dom-a: #c2410c; --dom-b: #d97706; }
.topic-item.topic-subject-Combinatorics        { --dom-a: #047857; --dom-b: #0d9488; }
.topic-item.topic-subject-Discrete-Mathematics { --dom-a: #047857; --dom-b: #0d9488; }
.topic-item.topic-subject-Analysis             { --dom-a: #9f1239; --dom-b: #7c3aed; }
.topic-item.topic-subject-Calculus             { --dom-a: #9f1239; --dom-b: #7c3aed; }
.topic-item.topic-subject-Other                { --dom-a: #475569; --dom-b: #64748b; }

/* Solutions section in detail view — the Show Solutions button is the
   primary next action on this page, so it's styled as a full CTA: solid
   gradient, generous padding, rounded, lifted off the card with margin and
   a soft shadow. Collapsed state uses the green palette; hover darkens. */
.detail-disclosure-section {
    border-top: 1px solid var(--border-color);
    padding: var(--space-md);
    background: var(--bg-primary);
}
.solutions-toggle {
    width: 100%; padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    border: none; border-radius: var(--radius-lg);
    cursor: pointer; font-size: 1rem; font-weight: 700;
    color: #fff; letter-spacing: 0.01em;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-blue) 30%, transparent),
                0 1px 2px rgba(0, 0, 0, 0.04);
}
.solutions-toggle:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-blue) 40%, transparent),
                0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.solutions-toggle:active { transform: translateY(0); filter: brightness(0.96); }
/* Expanded state: subtler — the solution content is now showing, so the
   button should recede. Switch to an outlined style. */
.solutions-toggle.is-open {
    background: var(--bg-secondary);
    color: var(--brand-blue-700);
    border: 1.5px solid var(--brand-blue);
    box-shadow: none;
}
.solutions-toggle.is-open:hover {
    background: var(--brand-blue-50);
    filter: none;
    box-shadow: none;
    transform: none;
}
.solutions-content { display: none; padding: var(--space-md) 0 0; }
.solutions-content.visible { display: block; animation: fadeIn var(--transition-base); }
.solution-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-sm); gap: var(--space-sm);
}
.solution-detail-title {
    margin: 0; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.solution-content-wrap {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: 0.98rem; line-height: 1.65;
}
.solution-content-wrap img { max-width: 100%; height: auto; margin: 0.5rem 0; border-radius: var(--radius-md); }
.solution-content-wrap p { margin-bottom: var(--space-sm); }

/* .vote-btn and .feedback-section moved into the problem header and
   problem-toolbar — see .vote-pill, .vote-icon, .icon-btn above. */

/* ── Markdown tables ─────────────────────────────────────────────────── */
.markdown-table {
    border-collapse: collapse; width: 100%; margin: 1rem 0;
    font-size: 0.95rem;
}
.markdown-table th, .markdown-table td {
    border: 1px solid var(--border-color); padding: 6px 12px; text-align: left;
}
.markdown-table th { background: var(--color-gray-100); font-weight: 600; }
body.dark .markdown-table th { background: var(--color-gray-200); }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
    z-index: 100; display: flex; flex-direction: column; gap: var(--space-xs); pointer-events: none;
}
.toast {
    background: var(--color-gray-800); color: white;
    padding: 10px 16px; border-radius: var(--radius-md); font-size: 0.88rem;
    box-shadow: var(--shadow-lg); pointer-events: auto;
    animation: toast-in 180ms ease-out;
}
body.dark .toast { background: var(--color-gray-300); color: var(--color-gray-900); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Misc */
.btn-primary {
    padding: 10px 18px; background: var(--color-primary-500); color: white;
    border-radius: var(--radius-md); font-weight: 600; font-size: 0.92rem;
    border: none; transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--color-primary-600); }
.link-btn {
    color: var(--text-secondary); text-decoration: underline; font-size: 0.82rem;
    padding: 0; background: transparent; border: 0;
}
.link-btn:hover { color: var(--text-primary); }
.empty-state {
    padding: var(--space-2xl); text-align: center; color: var(--text-secondary);
    font-size: 0.9375rem;
}
.site-footer {
    padding: var(--space-md); text-align: center; color: var(--text-secondary);
    font-size: 0.82rem; border-top: 1px solid var(--border-color);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .filters-bar { gap: 8px; }
    .filter-year { min-width: 0; flex-basis: 100%; padding: 0; }
    .list-title { font-size: 1rem; }
    .problem-title { font-size: 1.25rem; }
    .problem-content, .solution-content-wrap, .solution-inline { font-size: 1rem; }
    .problem-item-body { font-size: 0.95rem; }
}

/* MathJax: on the list preview, show equations inline without a scrollbar —
   the preview is clipped anyway, and the scroll chrome is visual noise.
   In the detail view (where the full problem lives) keep scrolling so long
   displays don't bleed outside the card on narrow screens. */
.problem-item-body mjx-container { overflow: visible; max-width: 100%; }
.problem-item-body mjx-container[display="true"] { white-space: normal; }
/* Detail view + inline solutions: let wide displays flow naturally. No
   scrollbar, no clipping, no shrinking — if an equation exceeds the card
   width it just overhangs. The card container itself handles overflow. */
.problem-content mjx-container,
.solution-inline mjx-container,
.solutions-content mjx-container { overflow: visible; max-width: none; }

/* ── Topic/domain chip strip (filter, replaces Domain <select>) ──────── */
.filter-topic-strip[hidden] { display: none; }
.filter-topic-strip {
    display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px;
    margin-bottom: var(--space-sm); padding: 0 12px;
}
.filter-topic-strip-label { padding-top: 8px; }  /* align with chip baseline when chips wrap */
.filter-topic-strip-label {
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0;
}
.filter-topic-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1 1 auto; min-width: 0;
}
.topic-chip-filter {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid var(--border-color);
    border-radius: 999px; background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.8125rem; cursor: pointer;
    max-width: 100%; transition: all var(--transition-base);
}
.topic-chip-filter:hover { border-color: var(--color-primary-500); background: var(--color-primary-100); }
.topic-chip-filter.is-active {
    background: linear-gradient(135deg, var(--dom-a, var(--color-primary-600)), var(--dom-b, var(--color-primary-700)));
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.topic-chip-filter.is-active:hover {
    background: linear-gradient(135deg, var(--dom-a, var(--color-primary-700)), var(--dom-b, var(--color-primary-800)));
    filter: brightness(1.05);
}
/* Jewel-tone palette propagated to chip via class set in list.js. */
.topic-chip-filter.domain-Algebra        { --dom-a: #4f46e5; --dom-b: #7c3aed; }
.topic-chip-filter.domain-Number-Theory  { --dom-a: #0e7490; --dom-b: #0d9488; }
.topic-chip-filter.domain-Geometry       { --dom-a: #c2410c; --dom-b: #d97706; }
.topic-chip-filter.domain-Combinatorics  { --dom-a: #047857; --dom-b: #0d9488; }
.topic-chip-filter.domain-Analysis       { --dom-a: #9f1239; --dom-b: #7c3aed; }
.topic-chip-filter.domain-Other          { --dom-a: #475569; --dom-b: #64748b; }
.topic-chip-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.topic-chip-filter.is-active .topic-chip-count { color: rgba(255, 255, 255, 0.85); }
.topic-chip-expand {
    border: none; background: transparent;
    color: var(--color-primary-600); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; padding: 3px 10px; border-radius: 999px;
    transition: background var(--transition-base);
}
.topic-chip-expand:hover { background: var(--color-primary-100); }
.filter-subtopic-strip {
    display: none; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: var(--space-sm) 12px var(--space-sm) calc(12px + 82px);
    margin-top: calc(-1 * var(--space-md));
    margin-bottom: var(--space-md);
    font-size: 0.8125rem;
}
.filter-subtopic-strip.expanded { display: flex; }
.subtopic-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    border: 1px dashed var(--border-color);
    background: transparent; color: var(--text-secondary);
    font-size: 0.75rem; cursor: pointer;
    transition: all var(--transition-fast);
}
.subtopic-chip:hover { color: var(--text-primary); border-style: solid; border-color: var(--color-primary-500); background: var(--color-primary-100); }
.subtopic-chip-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 0.7rem; }

/* ── Share button (list card + detail), icon via SVG ─────────────────── */
.btn-share {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer; font-weight: 500; font-size: 0.82rem;
    transition: all var(--transition-base);
}
.btn-share:hover { background: var(--color-primary-50); border-color: var(--color-primary-500); color: var(--color-primary-700); }
.btn-share svg { flex-shrink: 0; }

/* ── Citation / Source block (detail view, always visible) ───────────── */
.citation-block {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.citation-header {
    display: flex; align-items: baseline; gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.citation-header-label {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.citation-source-badge {
    font-weight: 600; color: var(--text-primary); font-size: 0.85rem;
}
.citation-body {
    display: grid; grid-template-columns: auto 1fr;
    gap: 3px 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}
.citation-row { display: contents; }
.citation-field-label {
    color: var(--text-secondary); font-weight: 600;
    text-align: right; padding-right: 4px;
    white-space: nowrap;
}
.citation-field-value { color: var(--text-primary); }