/* ════════════════════════════════════════════════════════════════════
   RISE.CSS — "the rating curve" design system (riseoj-handoff.md)
   RiseOJ = rise = the ascending graph. Graph-paper structure: flat
   surfaces, ruled dividers, tier colors as structural row rails,
   tabular mono numerals, one electric cobalt. Light-first, dual theme.

   Loads LAST (theme.css → design.css → rise.css), so equal-specificity
   declarations here win. Sections:
     0 fonts · 1 tokens · 2 theme.css vocabulary remap · 3 design.css
     vocabulary remap · 4 accent neutralization · 5 flatten · 6 base ·
     7 nav · 8 footer · 9 buttons/forms · 10 tables & tier rails ·
     11 section headers & page bands · 12 filters/tabs/pager ·
     13 mockup components (hero/chart/strips) · 14 problem detail ·
     15 verdicts · 16 compat restyles · 17 a11y & motion
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts (self-hosted; browser CDN loads are unreliable here) ──── */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/static/fonts/pretendard-variable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/static/fonts/schibsted-grotesk-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/static/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/static/fonts/spline-sans-mono-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/static/fonts/spline-sans-mono-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1. Tokens — the only colors allowed ────────────────────────────── */
:root {
  --paper:  #FFFFFF;
  --panel:  #FAFAFA;
  --white:  #FFFFFF;
  --ink:    #171717;
  --dim:    #666666;
  --faint:  #A1A1A1;
  --line:   #EAEAEA;
  --line2:  #F2F2F2;
  --grid:   transparent;
  --cobalt:      #0070F3;
  --cobalt-deep: #0761D1;
  --cobalt-wash: #EBF5FF;
  --ac:   #15803D;
  --wa:   #DC2626;
  --pend: #A16207;
  --t-bronze: #AD5600;
  --t-silver: #4A6785;
  --t-gold:   #DE9100;
  --t-plat:   #149E77;
  --t-dia:    #0092CE;
  --t-ruby:   #D91E63;
  --disp: 'Geist', 'Pretendard Variable', Pretendard, sans-serif;
  --bodyf: 'Geist', 'Pretendard Variable', Pretendard, -apple-system, system-ui, 'RiseEmoji', sans-serif;
  --monof: 'Geist Mono', 'Spline Sans Mono', ui-monospace, 'RiseEmoji', monospace;
}
:root[data-theme="dark"], body[data-theme="dark"] {
  --paper:  #000000;
  --panel:  #111111;
  --white:  #0A0A0A;
  --ink:    #EDEDED;
  --dim:    #A1A1A1;
  --faint:  #666666;
  --line:   #262626;
  --line2:  #1A1A1A;
  --grid:   transparent;
  --cobalt:      #3291FF;
  --cobalt-deep: #52A8FF;
  --cobalt-wash: #06193A;
  --ac:   #4ADE80;
  --wa:   #F87171;
  --pend: #FACC15;
  --t-silver: #8CA6C0;
  --t-plat:   #22D19E;
  --t-dia:    #2FB6F2;
  --t-ruby:   #FF4F8B;
}

/* ── 2. theme.css vocabulary remap ──────────────────────────────────────
   Mirrors theme.css's own selectors at equal specificity, later order.
   Every legacy component retokenizes to the rating-curve palette. */
:root,
:root[data-theme="dark"], body[data-theme="dark"],
:root[data-theme="light"], body[data-theme="light"] {
  color-scheme: light;
  --font-sans: var(--bodyf);
  --font-mono: var(--monof);

  --bg:          var(--paper);
  --bg-surface:  var(--white);
  --bg-subtle:   var(--panel);
  --bg-muted:    var(--panel);
  --bg-sunken:   var(--panel);
  --bg-elevated: var(--white);
  --bg-overlay:  color-mix(in srgb, var(--paper) 96%, transparent);
  --surface:     var(--white);
  --surface-2:   var(--panel);

  --text:       var(--ink);
  --text-2:     color-mix(in srgb, var(--ink) 78%, var(--dim));
  --text-muted: var(--dim);
  --text-faint: var(--faint);

  --border:        var(--line);
  --border-strong: color-mix(in srgb, var(--line) 60%, var(--dim));
  --border-subtle: var(--line2);

  --success:      var(--ac);
  --success-soft: color-mix(in srgb, var(--ac) 9%, transparent);
  --danger:       var(--wa);
  --danger-soft:  color-mix(in srgb, var(--wa) 8%, transparent);
  --warning:      var(--pend);
  --warning-soft: color-mix(in srgb, var(--pend) 9%, transparent);
  --info:         var(--cobalt);
  --info-soft:    color-mix(in srgb, var(--cobalt) 8%, transparent);
  --orange:       var(--pend);
  --orange-soft:  color-mix(in srgb, var(--pend) 9%, transparent);
  --yellow:       var(--pend);

  /* MODERN DEPTH: hairline borders carry structure; soft layered shadows
     add just enough elevation to separate surfaces. */
  --shadow-xs: 0 1px 2px rgba(15, 18, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 18, 26, 0.07), 0 1px 2px rgba(15, 18, 26, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 18, 26, 0.08), 0 1px 3px rgba(15, 18, 26, 0.05);
  --shadow-lg: 0 14px 36px rgba(15, 18, 26, 0.13), 0 3px 10px rgba(15, 18, 26, 0.06);
  --shadow-ring: 0 0 0 2px color-mix(in srgb, var(--cobalt) 40%, transparent);
  --glow-accent:      0 0 0 1px color-mix(in srgb, var(--cobalt) 32%, transparent);
  --glow-accent-soft: 0 0 0 1px color-mix(in srgb, var(--cobalt) 18%, transparent);
  --glow-success:     0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent);
  --glow-arena:       0 0 0 1px var(--line);
  --glow-arena-soft:  0 0 0 1px var(--line);
  --text-glow: none;
  --page-wash: none;

  /* Modern radii: 6-8px controls, 12-16px cards. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  /* Tier palette — data colors, never decoration. */
  --tier-unrated:  var(--faint); --tier-unrated-2:  var(--faint);
  --tier-bronze:   var(--t-bronze); --tier-bronze-2:   var(--t-bronze);
  --tier-silver:   var(--t-silver); --tier-silver-2:   var(--t-silver);
  --tier-gold:     var(--t-gold);   --tier-gold-2:     var(--t-gold);
  --tier-platinum: var(--t-plat);   --tier-platinum-2: var(--t-plat);
  --tier-diamond:  var(--t-dia);    --tier-diamond-2:  var(--t-dia);
  --tier-ruby:     var(--t-ruby);   --tier-ruby-2:     var(--t-ruby);
  --tier-master:   var(--cobalt);   --tier-master-2:   var(--cobalt);
  --tier-admin:    var(--wa);       --tier-admin-2:    var(--wa);
  --tier-bronze-glow: 0; --tier-silver-glow: 0; --tier-gold-glow: 0;
  --tier-platinum-glow: 0; --tier-diamond-glow: 0; --tier-ruby-glow: 0;
  --tier-master-glow: 0; --tier-admin-glow: 0; --tier-unrated-glow: 0;
  --tier-grad: linear-gradient(var(--tg, var(--faint)), var(--tg, var(--faint)));

  /* Verdicts: the big three follow the spec; the long-tail verdict hues
     stay as data colors (they distinguish TLE/RE/CE at a glance). */
  --vd-ac:      var(--ac);
  --vd-wa:      var(--wa);
  --vd-pending: var(--faint);
  --vd-judging: var(--pend);
  --vd-pc:      var(--pend);

  --toggle-thumb: var(--white);

  /* Legacy gradient/logo tokens resolve SOLID cobalt (mask fill). */
  --grad-stop2: var(--cobalt);
  --accent-grad:       linear-gradient(var(--cobalt), var(--cobalt));
  --accent-grad-hover: linear-gradient(var(--cobalt-deep), var(--cobalt-deep));
  --accent-grad-vivid: linear-gradient(var(--cobalt), var(--cobalt));
  --accent-grad-text:  linear-gradient(var(--cobalt), var(--cobalt));
  --accent-grad-line:  var(--cobalt);
  --accent-grad-soft:  linear-gradient(var(--cobalt-wash), var(--cobalt-wash));
  --logo-c1: var(--cobalt); --logo-c2: var(--cobalt); --logo-c3: var(--cobalt);
  --logo-oj1: var(--cobalt); --logo-oj2: var(--cobalt);
  --logo-glow: transparent;
  --surface-arena:   var(--white);
  --surface-arena-2: var(--white);
}
:root[data-theme="dark"], body[data-theme="dark"] { color-scheme: dark; }

/* ── 3. design.css vocabulary remap ─────────────────────────────────── */
:root,
:root[data-theme="dark"], body[data-theme="dark"],
:root[data-theme="light"], body[data-theme="light"] {
  --hair:   var(--line);
  --indigo: var(--cobalt);
  --bronze: var(--t-bronze);
  --silver: var(--t-silver);
  --gold:   var(--t-gold);
  --font-display: var(--disp);
  --font-body:    var(--bodyf);
  --font-mono-ds: var(--monof);
}

/* ── 4. Accent presets — the one accent is user-tunable ─────────────────
   The whole system reads a single accent (aliased --accent/--indigo →
   --cobalt), so an accent preset only needs to re-point the cobalt trio.
   Verdict/tier colors stay fixed (data, not decoration), and the palette
   deliberately avoids the ac-green / wa-red hues so an accent never reads
   as a verdict. Default (indigo/none) keeps the spec cobalt. Selectors
   mirror theme.css's presets (light (0,2,0) / dark (0,3,0)); rise.css
   loads last so equal-specificity later order wins. */
:root, :root[data-accent], body[data-accent],
:root[data-theme="dark"][data-accent], body[data-theme="dark"][data-accent],
:root[data-theme="dark"]:not([data-accent]) {
  --accent:        var(--cobalt);
  --accent-hover:  var(--cobalt-deep);
  --accent-strong: var(--cobalt-deep);
  --accent-text:   var(--cobalt);
  --accent-soft:   var(--cobalt-wash);
  --accent-2:      var(--cobalt);
  --accent-deep:   var(--cobalt-deep);
}
/* Light-theme preset colors (re-point the cobalt trio). */
:root[data-accent="ocean"], body[data-accent="ocean"] {
  --cobalt: #0B79C4; --cobalt-deep: #075A93; --cobalt-wash: #E4F2FB;
}
:root[data-accent="aurora"], body[data-accent="aurora"] {
  --cobalt: #6D3BE0; --cobalt-deep: #5326B4; --cobalt-wash: #EEE9FD;
}
:root[data-accent="plum"], body[data-accent="plum"] {
  --cobalt: #A62BB0; --cobalt-deep: #7F1F87; --cobalt-wash: #F8E9FA;
}
:root[data-accent="slate"], body[data-accent="slate"] {
  --cobalt: #46506A; --cobalt-deep: #2C3347; --cobalt-wash: #ECEEF3;
}
:root[data-accent="mono"], body[data-accent="mono"] {
  --cobalt: #16181D; --cobalt-deep: #000000; --cobalt-wash: #ECEEF1;
}
/* Dark-theme preset colors (brighter, softer wash). */
:root[data-theme="dark"][data-accent="ocean"], body[data-theme="dark"][data-accent="ocean"] {
  --cobalt: #38B6F0; --cobalt-deep: #6ECDF7; --cobalt-wash: #102A3A;
}
:root[data-theme="dark"][data-accent="aurora"], body[data-theme="dark"][data-accent="aurora"] {
  --cobalt: #9D7BFF; --cobalt-deep: #B9A2FF; --cobalt-wash: #241C44;
}
:root[data-theme="dark"][data-accent="plum"], body[data-theme="dark"][data-accent="plum"] {
  --cobalt: #E070EC; --cobalt-deep: #EE9BF5; --cobalt-wash: #331A38;
}
:root[data-theme="dark"][data-accent="slate"], body[data-theme="dark"][data-accent="slate"] {
  --cobalt: #9AA6C4; --cobalt-deep: #BCC5DC; --cobalt-wash: #232838;
}
:root[data-theme="dark"][data-accent="mono"], body[data-theme="dark"][data-accent="mono"] {
  --cobalt: #EDEEF0; --cobalt-deep: #FFFFFF; --cobalt-wash: #262A31;
}
/* The ocean/mono logo garnishes from design.css must not re-gradient. */
:root[data-accent] .nav-logo-mark::after { content: none; }
/* Accent swatch inside the nav button reflects the live accent. */
.tt-swatch { width: 12px; height: 12px; background: var(--cobalt); display: inline-block; }

/* ── 5. Modern depth (former flatten layer) ────────────────────────────
   The global radius/shadow kill-switch is retired: theme.css components
   read the --r-* / --shadow-* tokens above, so restoring those tokens
   restores rounded corners and soft elevation site-wide in one move. */
/* True circles are geometry, not corner rounding. */
img.nav-acct-avatar, .avatar, .profile-avatar, .prow-status,
.inbox-dot, .nb-badge, .streak-dot, .skt-node-dot, .toast-ico {
  border-radius: 9999px !important;
}

/* ── 6. Base ────────────────────────────────────────────────────────── */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--bodyf);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--disp); letter-spacing: -0.02em; }
.mono, code, kbd, pre, samp { font-family: var(--monof); }
code, kbd { font-variant-numeric: tabular-nums; }
:not(pre) > code {
  background: var(--panel);
  border: 1px solid var(--line2);
  padding: 1px 6px;
  font-size: 13px;
}
::selection { background: var(--cobalt); color: #fff; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); }

/* The page container (theme.css .page-wrap) at mockup width. */
.page-wrap { max-width: 1160px; }
/* Page shells that under-pad for the fixed nav (56px) + attribution strip:
   without this their first row (e.g. the contest tabs) hides behind the
   fixed header. page-wrap uses 5.5rem for the same reason. */
.cd-wrap, .cl-wrap, .lb-wrap, .rd-wrap, .lh-shell {
  padding-top: 4.5rem !important;
}

/* ── 7. Nav — flat, ruled ───────────────────────────────────────────── */
.nav, .sh-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Active link: 2px cobalt underline touching the nav's bottom border. */
@media (min-width: 1300px) {
  .sh-nav .nav-r > li > .nb,
  .sh-nav .nav-grp > .nav-grp-h {
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent; /* keeps the text optically centred */
    color: var(--dim);
    font-weight: 600;
    font-size: 13.5px;
    background: none;
  }
  .sh-nav .nav-r > li > .nb:hover,
  .sh-nav .nav-grp > .nav-grp-h:hover { color: var(--ink); background: none; }
  .sh-nav .nav-r > li > .nb.is-active {
    color: var(--ink);
    border-bottom-color: var(--cobalt);
    background: none;
  }
}
.nav-brand-word { font-weight: 800; letter-spacing: -0.02em; }
.nav-search-input {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--bodyf);
}
.nav-search-input:focus { border-color: var(--cobalt); outline: none; }
.nav-grp-items, .inbox-pop {
  background: var(--paper);
  border: 1px solid var(--line);
}
@media (min-width: 1300px) {
  .sh-nav .nav-grp-items { border-top: 2px solid var(--ink); }
}
.nb { font-family: var(--bodyf); }
.nb-badge {
  font-family: var(--monof);
  font-variant-numeric: tabular-nums;
}
/* Theme toggle + utility buttons: bordered rectangles. */
.tt {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.tt:hover { border-color: var(--cobalt); color: var(--cobalt); }
/* Tools stays out of the bar (hub link lives in Practice) — keep the bar
   to seven top-level items so it never collides with the right controls. */
@media (min-width: 1300px) {
  .sh-nav .nav-r { column-gap: 2px; }
  .sh-nav .nav-search-input { width: 150px; }
  .sh-nav .nav-search-input:focus { width: 190px; }
  .sh-nav .nav-subject-li select, .sh-nav .nav-lang-li select {
    font-size: 12px; padding: 4px 6px; width: auto;
  }
}
/* solved.ac attribution strip — quiet mono rule line. */
.global-tier-notice {
  background: var(--paper);
  border-bottom: 1px solid var(--line2);
  color: var(--faint);
  font-family: var(--monof);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* ── 8. Footer — 2px ink top rule ───────────────────────────────────── */
.site-footer {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  margin-top: 44px;
}
.site-footer-col h3 {
  font-family: var(--monof);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.site-footer-col a { color: var(--dim); font-size: 13.5px; }
.site-footer-col a:hover { color: var(--cobalt); }
.site-footer-bottom {
  border-top: 1px solid var(--line2);
  color: var(--faint);
  font-size: 12.5px;
}
.site-footer-tag { color: var(--dim); }

/* ── 9. Buttons & forms — rectangles ────────────────────────────────── */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 700;
  font-family: var(--bodyf);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--panel); color: var(--ink); }
.btn-primary, .btn-solid, .btn-submit,
.btn.btn-primary, a.btn.btn-primary, button.btn-primary {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #fff;
}
.btn-primary:hover, .btn-solid:hover, .btn-submit:hover {
  background: var(--cobalt-deep);
  border-color: var(--cobalt-deep);
  color: #fff;
}
.btn-sm, .btn.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-lg, .btn.btn-lg { padding: 12px 24px; font-size: 14.5px; }
.btn[disabled], .btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.input, input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="url"],
select, textarea, .form-control {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--bodyf);
  font-size: 13.5px;
}
.input:focus, input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--cobalt);
  outline: none;
}
label, .field-label { font-weight: 600; }
.helptext { color: var(--faint); font-size: 12.5px; }

/* ── 10. Tables — flat, tier-railed rows ────────────────────────────── */
table { border-collapse: collapse; }
th {
  font-family: var(--monof);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  background: none;
}
td { border-bottom: 1px solid var(--line2); }
tbody tr { border-left: 3px solid transparent; }
tbody tr:hover { background: var(--white); }
/* Mockup rail classes. */
tr.t-b, .rail-b { border-left: 3px solid var(--t-bronze) !important; }
tr.t-s, .rail-s { border-left: 3px solid var(--t-silver) !important; }
tr.t-g, .rail-g { border-left: 3px solid var(--t-gold) !important; }
tr.t-p, .rail-p { border-left: 3px solid var(--t-plat) !important; }
tr.t-d, .rail-d { border-left: 3px solid var(--t-dia) !important; }
tr.t-r, .rail-r { border-left: 3px solid var(--t-ruby) !important; }
tr.v-ok { border-left: 3px solid var(--ac) !important; }
tr.v-no { border-left: 3px solid var(--wa) !important; }
tr.v-pd { border-left: 3px solid var(--pend) !important; }
/* Existing dp_class output rails rows (tables and .prow link-rows alike). */
tr.dp-bronze, .prow.dp-bronze { border-left: 3px solid var(--t-bronze); }
tr.dp-silver, .prow.dp-silver { border-left: 3px solid var(--t-silver); }
tr.dp-gold, .prow.dp-gold { border-left: 3px solid var(--t-gold); }
tr.dp-platinum, .prow.dp-platinum { border-left: 3px solid var(--t-plat); }
tr.dp-diamond, .prow.dp-diamond { border-left: 3px solid var(--t-dia); }
tr.dp-ruby, .prow.dp-ruby { border-left: 3px solid var(--t-ruby); }
tr.dp-unrated, .prow.dp-unrated { border-left: 3px solid var(--line); }
tr.dp-master, .prow.dp-master { border-left: 3px solid var(--cobalt); }
/* Cell voices. */
.pid { font-family: var(--monof); color: var(--faint); font-size: 12.5px; }
.ptitle { font-weight: 600; }
.num {
  font-family: var(--monof);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tlab { font-family: var(--monof); font-size: 11.5px; font-weight: 600; }
.c-b { color: var(--t-bronze); } .c-s { color: var(--t-silver); }
.c-g { color: var(--t-gold); }   .c-p { color: var(--t-plat); }
.c-d { color: var(--t-dia); }    .c-r { color: var(--t-ruby); }
.uname { font-weight: 700; }
.rank-n { font-family: var(--monof); font-weight: 600; color: var(--faint); }
.delta-up { color: var(--ac); } .delta-down { color: var(--wa); }
.delta-zero { color: var(--faint); }
/* Tier labels are mono colored text — no chips, no swatches. */
.dp, .rank-label, .tier-chip {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--monof);
  font-size: 11.5px;
  font-weight: 600;
}
.dp.dp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 11. Section headers & page bands — rules encode hierarchy ──────── */
.sec-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.sec-head .idx { font-family: var(--monof); font-size: 12px; color: var(--cobalt); font-weight: 600; }
.sec-head h2 { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.sec-head .sec-more, .sec-head > a {
  margin-left: auto;
  font-family: var(--monof);
  font-size: 12px; font-weight: 600;
  color: var(--cobalt);
  text-decoration: none;
}
.eyebrow {
  font-family: var(--monof);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cobalt);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cobalt); }
/* Page title band. */
.pt {
  border-bottom: 2px solid var(--ink);
  padding: 10px 0 14px;
  margin-bottom: 20px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.pt .idx { font-family: var(--monof); font-size: 12px; color: var(--cobalt); font-weight: 600; }
.pt h1 { font-family: var(--disp); font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin: 0; }
.pt .count { margin-left: auto; font-family: var(--monof); font-size: 12px; color: var(--faint); }
.pt .pt-actions { margin-left: auto; display: flex; gap: 10px; }
.pt .pt-actions + .count { margin-left: 0; }
/* Legacy .page-head adopts the band. */
.page-head {
  border-bottom: 2px solid var(--ink);
  padding: 10px 0 14px;
  margin-bottom: 20px;
  background: none;
}
.page-head h1 { font-family: var(--disp); font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }

/* ── 12. Filters, tabs, pager ───────────────────────────────────────── */
.filters {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.f-tab {
  font-size: 13px; font-weight: 700; color: var(--dim);
  font-family: var(--bodyf);
  padding: 8px 0; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  text-decoration: none;
}
.f-tab:hover { color: var(--ink); }
.f-tab.on, .f-tab.active {
  color: var(--ink);
  border-bottom-color: var(--cobalt);
}
.f-tab.tier-b.on { border-bottom-color: var(--t-bronze); color: var(--t-bronze); }
.f-tab.tier-s.on { border-bottom-color: var(--t-silver); color: var(--t-silver); }
.f-tab.tier-g.on { border-bottom-color: var(--t-gold); color: var(--t-gold); }
.f-tab.tier-p.on { border-bottom-color: var(--t-plat); color: var(--t-plat); }
.f-right { margin-left: auto; display: flex; gap: 10px; padding-bottom: 8px; flex-wrap: wrap; }
.f-check {
  font-family: var(--monof);
  font-size: 11.5px; font-weight: 600;
  color: var(--dim);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 4px 10px;
  cursor: pointer;
}
.f-check:hover { border-color: var(--dim); }
.f-check.on, .f-check.active {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: var(--cobalt-wash);
}
/* Dotted-underline tags. */
.tag-link, .prow-tags .tag, .ptag {
  font-family: var(--monof);
  font-size: 10.5px;
  color: var(--dim);
  background: none !important;
  border: 0 !important;
  border-bottom: 1px dotted var(--faint) !important;
  padding: 0 !important;
}
/* Boxed pager. */
.pager, .plr-pager-ctrl {
  display: flex; gap: 0;
  border: 1px solid var(--line);
  width: fit-content;
}
.pager a, .pager span, .plr-pager-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-right: 1px solid var(--line);
  font-family: var(--monof); font-size: 12.5px;
  color: var(--dim);
  background: var(--white);
  text-decoration: none;
}
.pager a:last-child, .plr-pager-btn:last-child { border-right: 0; }
.pager a.on, .pager .on, .plr-pager-btn.is-current {
  background: var(--cobalt);
  color: #fff;
}
/* Contest-family tabs (.kb-tabs shared include) become underline tabs. */
.kb-tabs { border-bottom: 1px solid var(--line); background: none; gap: 22px; }
.kb-tab {
  font-weight: 700; font-size: 13px; color: var(--dim);
  border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: none;
}
.kb-tab:hover { color: var(--ink); background: none; }
.kb-tab.is-active { color: var(--ink); border-bottom-color: var(--cobalt); background: none; }
.kb-tab-n {
  font-family: var(--monof); font-size: 10.5px; font-weight: 700;
  color: var(--cobalt) !important;
  background: var(--cobalt-wash) !important;
  border: 0 !important;
  padding: 0 5px !important;
}
/* Active tab is flat (underline only), so the count stays cobalt-on-wash —
   never the white-on-white it inherited from the old filled-tab style. */
.kb-tab.is-active .kb-tab-n { color: var(--cobalt) !important; background: var(--cobalt-wash) !important; }
/* Problem-page tabs. */
.tabs { border-bottom: 1px solid var(--line); background: none; gap: 22px; }
.tabs .tab {
  font-weight: 700; font-size: 13px; color: var(--dim);
  border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: none;
}
.tabs .tab:hover { color: var(--ink); background: none; }
.tabs .tab.active { color: var(--ink); border-bottom-color: var(--cobalt); background: none; }

/* ── 13. Mockup components — hero, chart, strips ────────────────────── */
.hero-band { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 75%, transparent);
  pointer-events: none;
}
.hero-in {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px;
  padding: 64px 0 58px;
  align-items: center;
}
.hero-in h1 {
  font-family: var(--disp);
  font-size: 44px; line-height: 1.12;
  letter-spacing: -0.035em; font-weight: 900;
  margin: 0 0 16px;
}
.hero-in h1 .up { color: var(--cobalt); white-space: nowrap; }
.hero-lede { color: var(--dim); font-size: 15.5px; max-width: 440px; margin: 0 0 26px; }
.hero-cta { display: flex; gap: 12px; margin-bottom: 34px; flex-wrap: wrap; }
.hero-stats { display: flex; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hstat { padding: 16px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--line2); }
.hstat:last-child { border-right: 0; margin-right: 0; }
.hstat b {
  display: block;
  font-family: var(--monof);
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hstat b i { font-style: normal; color: var(--cobalt); font-size: 15px; }
.hstat span { font-size: 12px; color: var(--faint); }
/* Rating chart card. */
.chart-card { position: relative; background: var(--white); border: 1px solid var(--line); }
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line2);
}
.chart-head .who { font-weight: 700; font-size: 14px; }
.chart-head .who em { font-style: normal; font-family: var(--monof); font-size: 12px; margin-left: 8px; }
.chart-head .r { font-family: var(--monof); font-size: 22px; font-weight: 700; }
.chart-body { padding: 10px 8px 0; }
.chart-body svg { display: block; width: 100%; }
.chart-foot {
  display: flex; justify-content: space-between;
  padding: 10px 20px 14px;
  font-family: var(--monof); font-size: 11px; color: var(--faint);
}
.chart-note {
  position: absolute; top: -13px; right: 18px;
  background: var(--cobalt); color: #fff;
  font-family: var(--monof); font-size: 11px; font-weight: 600;
  padding: 4px 10px;
}
/* Contest strip — cobalt edge + mono countdown. */
.contest-strip {
  display: flex; align-items: center; gap: 22px;
  border: 1px solid var(--ink);
  background: var(--white);
  padding: 20px 24px;
  position: relative;
}
.contest-strip::before {
  content: "";
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px;
  background: var(--cobalt);
}
.contest-strip .tagline {
  font-family: var(--monof);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cobalt);
}
.contest-strip h3 { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.contest-strip p { font-size: 13px; color: var(--dim); margin: 0; }
.contest-strip .cd {
  margin-left: auto;
  font-family: var(--monof);
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.contest-strip .cd small {
  display: block;
  font-size: 10.5px; color: var(--faint);
  letter-spacing: 0.08em; font-weight: 500;
}
/* Daily problem strip — vertical date label on panel. */
.daily-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 24px;
}
.daily-strip .d-label {
  font-family: var(--monof);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1px solid var(--line);
  padding-left: 10px;
}
.daily-strip h3 { font-family: var(--disp); font-size: 18px; font-weight: 800; margin: 2px 0; }
.daily-strip .meta {
  font-family: var(--monof);
  font-size: 12px; color: var(--faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

/* ── 14. Problem detail — title band, meta rail, io boxes, sidebar ──── */
.pd-head { border-bottom: 2px solid var(--ink); padding: 22px 0 16px; position: relative; }
.pd-head .crumb { font-family: var(--monof); font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.pd-head h1 { font-family: var(--disp); font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin: 2px 0 10px; }
.pd-head h1 .tno { color: var(--faint); font-family: var(--monof); font-weight: 600; font-size: 18px; margin-right: 10px; }
.pd-meta { display: flex; font-family: var(--monof); font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.pd-meta span { padding: 0 16px; border-right: 1px solid var(--line); }
.pd-meta span:first-child { padding-left: 0; }
.pd-meta span:last-child { border-right: 0; }
.pd-meta b { color: var(--ink); font-weight: 600; }
.pd-grid { display: grid; grid-template-columns: 1fr 290px; gap: 36px; padding: 28px 0; }
/* Tick-prefixed statement headers (theme's .sec > .sh adopts this). */
.pd-body h2, .sec > .sh, .prob-article .sh {
  font-family: var(--disp);
  font-size: 16px; font-weight: 800;
  margin: 28px 0 10px;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0;
  color: var(--ink);
  text-transform: none; letter-spacing: -0.01em;
}
.pd-body h2::before, .sec > .sh::before, .prob-article .sh::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--cobalt);
  flex: 0 0 auto;
}
.sec { background: none; border: 0; padding: 0; margin: 0 0 6px; }
/* IO boxes with mono COPY. */
.io-box { border: 1px solid var(--line); background: var(--white); }
.io-box > header, .io-box .io-head {
  font-family: var(--monof);
  font-size: 10.5px; font-weight: 600;
  color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line2);
  display: flex; justify-content: space-between; align-items: center;
}
.io-box pre {
  padding: 12px; margin: 0;
  font-family: var(--monof);
  font-size: 13px; line-height: 1.5;
  overflow-x: auto;
  background: none; border: 0;
}
/* COPY floats top-right of the io-box (the markup has no header bar). */
.io-box { position: relative; }
.io-box > pre { padding-top: 14px; }
.io-copy {
  position: absolute !important;
  top: 8px !important; right: 8px !important; z-index: 2;
  border: 1px solid var(--line) !important;
  background: var(--white) !important;
  color: var(--cobalt) !important;
  font-family: var(--monof) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1 !important;
  padding: 3px 9px !important;
  line-height: 1.2;
  transition: border-color .15s, color .15s;
}
.io-copy:hover { border-color: var(--cobalt) !important; }
.io-copy.is-success { color: var(--ac) !important; border-color: var(--ac) !important; }
/* Whitespace made visible in example IO: real space chars stay in the DOM
   (copy is unaffected); a faint centre dot is painted over each one. */
.io-box .ws-sp { position: relative; }
.io-box .ws-sp::before {
  content: "·";
  position: absolute; left: 50%; transform: translateX(-50%);
  color: color-mix(in srgb, var(--faint) 65%, transparent);
  pointer-events: none;
}
/* Sidebar. */
.prob-sidebar .prob-side-card, .side > div {
  border: 1px solid var(--line);
  background: var(--white);
  margin-bottom: 16px;
  padding: 16px 18px;
}
.prob-side-h, .side h4 {
  font-family: var(--monof);
  font-size: 10.5px; font-weight: 600;
  color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.prob-side-dl { font-size: 13px; }
.prob-side-dl > div {
  display: flex; justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--line2);
}
.prob-side-dl > div:last-child { border-bottom: 0; }
.prob-side-dl dd { font-family: var(--monof); font-weight: 600; margin: 0; }
.limit-row { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.limit-row:last-child { border-bottom: 0; }
.limit-row b { font-family: var(--monof); font-weight: 600; }
.mini-bar { height: 8px; background: var(--line2); margin: 8px 0 4px; position: relative; }
.mini-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ac); }
.mini-lbl { font-family: var(--monof); font-size: 11px; color: var(--faint); display: flex; justify-content: space-between; }
/* Score meters (gsbar family): mid-gray track so the white mono label
   stays readable over the unfilled part; solid cobalt/green fill. */
.gsbar { background: color-mix(in srgb, var(--dim) 62%, var(--faint)) !important; border: 0 !important; }
.gsbar .gsbar-fill { background: var(--cobalt) !important; }
.gsbar.is-full .gsbar-fill { background: var(--ac) !important; }
.gsbar .gsbar-label { font-family: var(--monof); color: #fff !important; text-shadow: none; }

/* ── 15. Verdicts — bare colored mono text, no pills ────────────────── */
.verdict, [class*="result-"], .sub-verdict, .v-lab {
  font-family: var(--monof);
  font-weight: 700;
  background: none;
  border: 0;
}
.v-ac { color: var(--ac); } .v-wa { color: var(--wa); } .v-pd { color: var(--pend); }
.result-accepted { color: var(--ac) !important; background: none !important; }
.result-wrong-answer { color: var(--wa) !important; background: none !important; }
.result-pending, .result-judging { color: var(--pend) !important; background: none !important; }

/* ── 16. Compat restyles — high-traffic legacy classes ──────────────── */
/* Problem rows (.prow) read as tier-railed table rows. */
.plist-wrap { border: 0; background: none; box-shadow: none; }
.plist-head {
  font-family: var(--monof);
  font-size: 10.5px; font-weight: 600;
  color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: none;
  border-bottom: 1px solid var(--line);
}
.prow {
  background: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line2);
}
.prow:hover { background: var(--white); box-shadow: none; }
.prow-id { font-family: var(--monof); color: var(--faint); font-size: 12.5px; }
.prow-title-main { font-weight: 600; font-size: 14px; color: var(--ink); }
.prow.ok .prow-title-main { color: var(--ac); }
.prow-rate, .prow-tries { font-family: var(--monof); font-variant-numeric: tabular-nums; }
/* Submission tables: verdict rails. */
.subs-tbl tr.row-ac, tr.sub-ok { border-left: 3px solid var(--ac); }
.subs-tbl tr.row-wa, tr.sub-wa { border-left: 3px solid var(--wa); }
.subs-card { border: 1px solid var(--line); background: var(--white);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
/* Generic cards: bordered, rounded, softly elevated. */
.card, .info-card, .panel, .hv3-panel, .settings-card, .lb-card,
.action-card, .cl-live-row, .cl-up-row, .rel-pill {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.card:hover, .info-card:hover, .action-card:hover,
.cl-live-row:hover, .cl-up-row:hover {
  box-shadow: var(--shadow-md);
}
/* Toasts — fully self-contained (no theme.css interplay): flat white box,
   ink border, verdict/level color as a 3px left rail. Explicitly visible:
   the old entrance animation is replaced wholesale. */
.toast-stack {
  position: fixed; top: 72px; right: 16px; z-index: 2147483000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--white) !important;
  border: 1px solid var(--ink) !important;
  border-left-width: 3px !important;
  color: var(--ink);
  font-size: 13.5px; line-height: 1.4;
  opacity: 1 !important;
  transform: none;
  animation: none !important;
  transition: opacity .15s, transform .15s;
  overflow: hidden;
}
/* Rail + icon colors — order matters: generic verdict first, then the
   specific outcomes so Accepted/WA always win over the amber catch-all. */
.toast--info { border-left-color: var(--cobalt) !important; }
.toast--warning, .toast[class*="toast--v-"] { border-left-color: var(--pend) !important; }
.toast--error, .toast[class*="toast--v-wrong"] { border-left-color: var(--wa) !important; }
.toast--success, .toast[class*="toast--v-accepted"] { border-left-color: var(--ac) !important; }
/* Icon disc: flat fill in the outcome color, white glyph (text glyph for
   plain toasts; the verdict SVG mask from theme.css for verdict toasts). */
.toast-ico {
  width: 22px; height: 22px;
  font-size: 12px; font-weight: 800; color: #fff;
  background: var(--cobalt) !important;
}
.toast--warning .toast-ico, .toast[class*="toast--v-"] .toast-ico { background: var(--pend) !important; }
.toast--error .toast-ico, .toast[class*="toast--v-wrong"] .toast-ico { background: var(--wa) !important; }
.toast--success .toast-ico, .toast[class*="toast--v-accepted"] .toast-ico { background: var(--ac) !important; }
.toast.is-leaving { opacity: 0 !important; transform: translateX(20px); }
.toast-ti { font-weight: 700; font-family: var(--monof); font-size: 12px; }
.toast-tx { color: var(--dim); }
.toast--success .toast-tx, .toast[class*="toast--v-accepted"] .toast-tx { color: var(--ac); font-family: var(--monof); font-weight: 700; }
.toast[class*="toast--v-wrong"] .toast-tx { color: var(--wa); font-family: var(--monof); font-weight: 700; }
.toast-x {
  border: 0; background: none; color: var(--faint);
  font-size: 13px; line-height: 1; cursor: pointer; margin-left: auto;
}
.toast-x:hover { color: var(--ink); }
.toast::after { display: none; }
/* Reveal animation stays but shortens. */
.reveal { transition-duration: .15s; }

/* ── 16a. Submit editor chrome — the plain textarea, reformed ───────────
   Colors/borders/typography only; layout stays theme.css's so Monaco's
   mount and the run console keep working. */
.code-editor {
  border: 1px solid var(--line);
  background: var(--white);
}
.code-editor-tb {
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
}
.code-lang-pill {
  font-family: var(--monof);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cobalt);
  background: none; border: 0; padding: 0;
}
.code-editor-tb-hint { font-family: var(--monof); font-size: 10.5px; color: var(--faint); }
.code-editor-tb-sep { color: var(--line); }
.code-editor-tb-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--dim);
  font-family: var(--monof);
  font-size: 11px;
}
.code-editor-tb-btn:hover { border-color: var(--cobalt); color: var(--cobalt); }
.code-run-btn {
  border: 1px solid var(--cobalt);
  background: var(--cobalt-wash);
  color: var(--cobalt);
  font-family: var(--monof);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.code-run-btn:hover { background: var(--cobalt); color: #fff; }
.code-run-kbd { font-family: var(--monof); font-size: 9.5px; opacity: .7; }
/* The OG textarea (Monaco-less fallback and the pre-boot state). */
.code-textarea, textarea.code-textarea, #id_source_code {
  font-family: var(--monof) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  tab-size: 4;
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 0 !important;
  padding: 14px 16px !important;
  caret-color: var(--cobalt);
}
.code-textarea::placeholder { color: var(--faint); }
.code-editor-ft {
  background: var(--panel);
  border-top: 1px solid var(--line2);
  font-family: var(--monof);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
}
.code-status-k { color: var(--faint); }
.code-status-v { color: var(--dim); font-variant-numeric: tabular-nums; }
.code-runner { border-top: 1px solid var(--line); background: var(--white); }
.code-runner-hd { background: var(--panel); border-bottom: 1px solid var(--line2); font-family: var(--monof); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.code-run-stdin, .code-run-out, .code-run-stderr { font-family: var(--monof); font-size: 12.5px; background: var(--white); color: var(--ink); border-color: var(--line2); }
.code-run-verdict { font-family: var(--monof); font-weight: 700; }

/* ── 16a2. Learn home — the curriculum as an ascending track ────────── */
.lh-shell { max-width: 1160px; margin: 0 auto; padding: 2rem 24px 4rem; }
.lc-eyebrow, .lc-panel-label {
  font-family: var(--monof);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cobalt);
  display: inline-flex; align-items: center; gap: 8px;
}
.lc-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cobalt); }
.lh-head {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px;
  border-bottom: 2px solid var(--ink);
  padding: 10px 0 22px; margin-bottom: 24px;
  background: none;
}
.lh-head h1 { font-family: var(--disp); font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin: 6px 0 8px; }
.lh-head p { color: var(--dim); margin: 0; }
.lh-current-level {
  background: var(--white); border: 1px solid var(--line);
  padding: 16px 18px;
}
.lh-current-level > span { font-family: var(--monof); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lh-current-level strong { display: block; font-family: var(--disp); font-size: 17px; font-weight: 800; margin: 4px 0; }
.lh-current-level p { font-size: 13px; color: var(--dim); }
.lh-level-progress { margin: 10px 0 0; font-size: 13px; }
.lh-level-progress > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.lh-level-progress > div:last-child { border-bottom: 0; }
.lh-level-progress dd { margin: 0; font-weight: 600; }
.lh-continue {
  display: flex; align-items: center; gap: 20px;
  background: var(--white); border: 1px solid var(--ink);
  padding: 16px 22px; margin-bottom: 14px;
  position: relative;
}
.lh-continue::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--cobalt); }
.lh-continue.lh-review::before { background: var(--pend); }
.lh-continue h2 { font-family: var(--disp); font-size: 17px; font-weight: 800; margin: 3px 0; }
.lh-continue p { font-size: 13px; color: var(--dim); margin: 0; }
.lh-continue > a { margin-left: auto; }
.lh-section-head {
  display: flex; align-items: baseline; gap: 14px; justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px; margin: 34px 0 16px;
  flex-wrap: wrap;
}
.lh-section-head h2 { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; }
.lh-section-head p { font-size: 13px; color: var(--dim); max-width: 46ch; margin: 0; }
.lh-section-head > a { font-family: var(--monof); font-size: 12px; font-weight: 600; color: var(--cobalt); text-decoration: none; }
/* The ten levels as an ascending bar chart — the curve, literally. */
.lh-level-track {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px;
  list-style: none; margin: 0; padding: 0;
  align-items: end;
}
.lh-level {
  background: var(--white); border: 1px solid var(--line);
  padding: 10px 10px 0; display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.lh-level > .mono { font-size: 11px; color: var(--faint); font-weight: 600; }
.lh-level strong { font-size: 12px; font-weight: 700; line-height: 1.3; min-height: 32px; }
.lh-level small { font-size: 10.5px; color: var(--faint); }
.lh-level::after { content: ""; display: block; margin: 8px -10px 0 -10px; background: var(--line2); }
.lh-level:nth-child(1)::after { height: 4px; } .lh-level:nth-child(2)::after { height: 7px; }
.lh-level:nth-child(3)::after { height: 10px; } .lh-level:nth-child(4)::after { height: 13px; }
.lh-level:nth-child(5)::after { height: 16px; } .lh-level:nth-child(6)::after { height: 19px; }
.lh-level:nth-child(7)::after { height: 22px; } .lh-level:nth-child(8)::after { height: 25px; }
.lh-level:nth-child(9)::after { height: 28px; } .lh-level:nth-child(10)::after { height: 31px; }
.lh-level.is-past::after { background: var(--ac); }
.lh-level.is-current { border-color: var(--cobalt); border-width: 2px; }
.lh-level.is-current::after { background: var(--cobalt); }
/* Course rows: railed list rows. */
.lh-course-list { display: flex; flex-direction: column; }
.lh-course-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line2);
  text-decoration: none;
  background: none;
}
.lh-course-row:hover { background: var(--white); border-left-color: var(--cobalt); }
.lh-course-index { font-family: var(--monof); font-size: 12px; color: var(--faint); font-weight: 600; }
.lh-course-main { min-width: 0; flex: 1; }
.lh-course-main strong { display: block; font-weight: 700; font-size: 14px; }
.lh-course-main small { display: block; color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-course-level { font-family: var(--monof); font-size: 11.5px; font-weight: 600; color: var(--cobalt); white-space: nowrap; }
.lh-course-counts { display: flex; gap: 14px; font-size: 12px; color: var(--faint); white-space: nowrap; }
.lh-course-counts b { font-weight: 600; color: var(--dim); }
.lh-course-next { color: var(--cobalt); font-family: var(--monof); }
.lh-legacy {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  padding: 16px 22px; margin-top: 34px;
}
.lh-legacy h2 { font-family: var(--disp); font-size: 16px; font-weight: 800; margin: 3px 0; }
.lh-legacy p { font-size: 13px; color: var(--dim); margin: 0; }
.lh-legacy > div:last-child { margin-left: auto; display: flex; gap: 10px; }
@media (max-width: 880px) {
  .lh-head { grid-template-columns: 1fr; }
  .lh-level-track { grid-template-columns: repeat(5, 1fr); }
  .lh-course-counts { display: none; }
}

/* ── 16a3. Duels — the 1v1 ladder ───────────────────────────────────── */
.duel-band {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--ink);
  border-left: 5px solid var(--cobalt);
  padding: 16px 22px; margin-bottom: 20px;
}
.duel-band-lbl { display: block; font-family: var(--monof); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--faint); }
.duel-band-elo > b { font-family: var(--monof); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--cobalt); line-height: 1.1; }
.duel-band-rec { display: flex; gap: 16px; font-family: var(--monof); font-size: 13px; color: var(--faint); }
.duel-band-rec b { font-size: 18px; font-weight: 700; margin-right: 2px; }
.duel-w { color: var(--ac); } .duel-l { color: var(--wa); } .duel-d { color: var(--faint); }
.duel-band-meter { flex: 1; min-width: 120px; height: 4px; background: var(--line2); }
.duel-band-meter i { display: block; height: 100%; background: var(--ac); }
.duel-band-note { font-size: 12px; color: var(--faint); }
.duel-card .sec-h, .action-card h2 {
  font-family: var(--disp); font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px;
}
.duel-card .sec-h::before, .action-card h2::before {
  content: ""; width: 14px; height: 2px; background: var(--cobalt); flex: 0 0 auto;
}
.d-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px 10px 10px;
  border-left: 3px solid var(--cobalt);
  border-bottom: 1px solid var(--line2);
}
.d-row:last-child { border-bottom: 0; }
.res-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--line2);
  border-left: 3px solid transparent; padding-left: 10px;
  text-decoration: none;
}
.res-row:hover { background: var(--paper); }
.res-row .badge {
  font-family: var(--monof); font-weight: 800; font-size: 13px;
  background: none !important; border: 0 !important; padding: 0 !important;
  width: 18px; text-align: center;
}
.res-row .badge-ok { color: var(--ac); } .res-row .badge-err { color: var(--wa); }
.res-row .badge-muted { color: var(--faint); }
.res-row:has(.badge-ok) { border-left-color: var(--ac); }
.res-row:has(.badge-err) { border-left-color: var(--wa); }
.res-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.res-prob { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-delta { font-family: var(--monof); font-weight: 700; font-size: 13px; }
.res-delta.up { color: var(--ac); } .res-delta.down { color: var(--wa); }
.lead-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--line2);
}
.lead-row:last-child { border-bottom: 0; }
.lead-rank { font-family: var(--monof); font-size: 12px; color: var(--faint); font-weight: 600; display: inline-block; width: 22px; }
.lead-elo { font-family: var(--monof); font-weight: 700; }
.lead-wl { font-family: var(--monof); font-size: 11.5px; color: var(--faint); }
.wager-chip {
  font-family: var(--monof); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--pend);
  border: 1px solid var(--pend); padding: 1px 6px;
  background: none;
}
.dq-search { text-align: center; padding: 14px 0; }
.dq-radar {
  width: 34px; height: 34px; margin: 0 auto 10px;
  border: 2px solid var(--cobalt); border-radius: 9999px !important;
  position: relative;
}
.dq-radar::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 9999px !important; background: var(--cobalt-wash);
  animation: rd-pulse 1.4s ease-in-out infinite;
}
@keyframes rd-pulse { 0%,100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.spectate-strip { border: 1px solid var(--line); background: var(--panel); padding: 14px 18px; margin-bottom: 18px; }
.spectate-eyebrow { font-family: var(--monof); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); margin: 0; }
.spectate-strip h2 { font-family: var(--disp); font-size: 16px; font-weight: 800; margin: 2px 0 8px; }
.spectate-count { font-family: var(--monof); font-size: 11.5px; color: var(--ac); font-weight: 700; }
.spectate-link { font-family: var(--monof); font-size: 12px; font-weight: 600; color: var(--cobalt); text-decoration: none; white-space: nowrap; }
.ac-list {
  border: 1px solid var(--line); background: var(--white);
  position: absolute; z-index: 30; left: 0; right: 0; display: none;
}
.ac-wrap { position: relative; }
.ac-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line2); }
.ac-item:last-child { border-bottom: 0; }
.ac-item.on, .ac-item:hover { background: var(--cobalt-wash); }
.ac-elo { font-family: var(--monof); font-size: 11px; color: var(--faint); }

/* ── 16b. Submission detail — verdict as the headline ───────────────── */
.sub-head {
  border-bottom: 2px solid var(--ink);
  padding: 10px 0 14px; margin-bottom: 20px;
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: none;
}
.sub-head-id { font-family: var(--monof); font-size: 13px; color: var(--faint); font-weight: 600; }
.sub-head-title { font-family: var(--disp); font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin: 0; }
.sub-head-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.sub-verdict-panel {
  background: var(--white);
  border: 1px solid var(--ink);
  border-left: 5px solid var(--faint);
  padding: 20px 24px;
  margin-bottom: 22px;
}
.sub-verdict-panel[class*="result-accepted"] { border-left-color: var(--ac); }
.sub-verdict-panel[class*="result-wrong"] { border-left-color: var(--wa); }
.sub-verdict-panel[class*="result-pending"], .sub-verdict-panel[class*="result-judging"] { border-left-color: var(--pend); }
.sub-verdict-name {
  font-family: var(--monof) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: none !important;
}
.sub-verdict-panel[class*="result-accepted"] .sub-verdict-name { color: var(--ac); }
.sub-verdict-panel[class*="result-wrong"] .sub-verdict-name { color: var(--wa); }
.sub-verdict-panel[class*="result-pending"] .sub-verdict-name,
.sub-verdict-panel[class*="result-judging"] .sub-verdict-name { color: var(--pend); }
.sub-verdict-note { color: var(--dim); font-size: 13px; }
.sub-progress-track { height: 8px; background: var(--line2); border: 0; }
.sub-progress-fill { background: var(--cobalt); height: 100%; transition: width .3s; }
.sub-progress.is-done .sub-progress-fill { background: var(--ac); }
.sub-progress.is-fail .sub-progress-fill { background: var(--wa); }
.sub-progress.is-partial .sub-progress-fill { background: var(--pend); }
.sub-progress-pct, .sub-progress-eta { font-family: var(--monof); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.sub-section { background: none; border: 0; padding: 0; margin: 0 0 30px; }
.sub-section-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px; margin-bottom: 14px;
}
.sub-section-title {
  font-family: var(--disp); font-size: 17px; font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.sub-section-dot { display: none; }
.sub-section-meta { margin-left: auto; font-family: var(--monof); font-size: 11.5px; color: var(--faint); }
.sub-nextup {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--ink); background: var(--white);
  padding: 14px 18px; margin: 0 0 22px;
  position: relative; text-decoration: none;
}
.sub-nextup::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--cobalt); }
.sub-nextup-l { font-family: var(--monof); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.sub-nextup-title { font-weight: 700; }
.sub-nextup-tag { font-family: var(--monof); font-size: 11px; color: var(--faint); }
.sub-nextup-go { margin-left: auto; font-family: var(--monof); font-size: 12px; font-weight: 600; color: var(--cobalt); }
.sub-errlog, .subd-log {
  background: var(--panel); border: 1px solid var(--line);
  font-family: var(--monof); font-size: 12.5px;
  padding: 12px 14px;
}
.subd-case-result, .subd-case-score { font-family: var(--monof); font-variant-numeric: tabular-nums; }

/* Staff simulation chip on contest CTAs — compact, explains on hover. */
.cd-sim-chip {
  display: inline-flex; align-items: center;
  font-family: var(--monof);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--pend);
  border: 1px solid var(--pend);
  padding: 2px 7px;
  cursor: help;
  align-self: center;
}

/* Messaging: sent bubbles and unread badges sit ON the accent — their
   text must be white. (--accent-text resolves to cobalt in this system,
   which made cobalt-on-cobalt: invisible sent messages.) */
.dm-bubble-row.mine .dm-bubble {
  background: var(--cobalt) !important;
  color: #fff !important;
}
.dm-conv-badge {
  background: var(--cobalt) !important;
  color: #fff !important;
  font-family: var(--monof);
  font-variant-numeric: tabular-nums;
}
.dm-bubble { background: var(--panel); color: var(--ink); }
.dm-conv.is-unread { background: var(--cobalt-wash); }

/* Banned/closed accounts: full-width rectangle notice under the header. */
.account-closed-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white);
  border: 1px solid var(--wa);
  border-left: 5px solid var(--wa);
  padding: 14px 18px;
  margin: 14px 0 20px;
}
.account-closed-banner .account-closed-x { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.account-closed-banner strong {
  display: block;
  font-family: var(--monof);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wa);
  margin-bottom: 2px;
}
.account-closed-banner p { margin: 0; font-size: 13px; color: var(--dim); }

/* Banned/closed accounts: flat mono badge next to the username. */
.account-closed-badge {
  display: inline-flex; align-items: center;
  font-family: var(--monof);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wa);
  border: 1px solid var(--wa);
  background: color-mix(in srgb, var(--wa) 8%, transparent);
  padding: 2px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── 17. Accessibility & motion ─────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 880px) {
  .hero-in, .grid-2, .pd-grid { grid-template-columns: 1fr; }
  .hero-in h1 { font-size: 32px; }
  .contest-strip { flex-wrap: wrap; }
  .contest-strip .cd { margin-left: 0; }
}

/* ── contest detail: breathing room (was cramped) ──────────────────── */
.cd-meta { gap: .55rem .95rem !important; row-gap: .5rem !important; margin-top: .85rem !important;
  line-height: 1.9 !important; }
.cd-tzline { margin-top: .55rem !important; color: var(--dim) !important; }
.cd-chips, .cd-titlerow { margin-bottom: .55rem !important; }
.cd-cta { gap: .9rem !important; }
.cd-cta-row { gap: .6rem .7rem !important; flex-wrap: wrap !important; align-items: center !important; }
.cd-cta-row form { gap: .55rem !important; }
.cd-cta-row .input, .cd-cta-row select.input { height: auto !important; padding: 8px 12px !important;
  min-width: 170px !important; }
.cd-count { padding: .65rem .9rem !important; margin-bottom: .55rem !important; }
.cd-sim-chip { margin: 0 .35rem !important; }
.cd-note { padding: .45rem .2rem !important; display: inline-block !important; }
.cd-window-note { color: var(--cobalt) !important; font-weight: 600 !important; }
/* markdown-rendered contest description */
.cd-desc-md { line-height: 1.75 !important; }
.cd-desc-md h2 { font-size: 1.05rem !important; margin: 1.3rem 0 .55rem !important;
  padding-top: .8rem !important; border-top: 1px solid var(--line) !important; }
.cd-desc-md ul { margin: .5rem 0 .9rem 1.2rem !important; }
.cd-desc-md li { margin: .3rem 0 !important; }
.cd-desc-md p { margin: .6rem 0 !important; }
.cd-desc-md strong { color: var(--ink) !important; }

/* ── 18. Modern pass (2026-08-30) ──────────────────────────────────────
   Site-wide glow-up over the flat system: soft elevation, rounded
   geometry, calmer hovers. Tokens above carry the radii/shadows; this
   section refines the highest-traffic chrome. */

/* Dark canvas needs deeper shadows to register. */
:root[data-theme="dark"], body[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Nav: floating glass bar. */
.navbar, .nav, nav.nav {
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  background: color-mix(in srgb, var(--paper) 82%, transparent) !important;
  border-bottom: 1px solid var(--line);
}

/* Buttons: rounded, tactile press. */
.btn, button.btn, .btn-primary, .btn-block {
  border-radius: var(--r-md) !important;
  transition: background-color 130ms ease, border-color 130ms ease,
              color 130ms ease, transform 80ms ease, box-shadow 130ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn.btn-primary {
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { box-shadow: var(--shadow-sm); }

/* Inputs/selects: rounded with a soft focus ring. */
.input, input.input, select.input, textarea.input, select, input[type="text"],
input[type="search"], input[type="email"], input[type="password"], textarea {
  border-radius: var(--r-md) !important;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 18%, transparent) !important;
}

/* Tables: rounded shells, gentle row hover. */
.subs-tbl, table.subs-tbl, .plist, .lb-tbl {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.subs-tbl tbody tr, .prow, .lb-tbl tbody tr {
  transition: background-color 100ms ease;
}

/* Overlays get the big shadow. */
.dd-menu, .dropdown-menu, .modal, .dialog, .popover, .nav-drawer, .toast {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Tags/pills/badges read better fully rounded. */
.tag, .pill, .chip, .ct-pill, .cd-chip, .rank-label, .cd-sim-chip,
.account-closed-badge, .nb-badge {
  border-radius: 999px !important;
}

/* Code/IO boxes: mid radius. */
.io-box, pre, .code-editor, .code-editor-tb, .monaco-shell {
  border-radius: var(--r-md);
}
.io-box pre, .code-editor .monaco-editor { border-radius: 0; }

/* Sections breathe a little more. */
.sec-head { letter-spacing: 0.04em; }


/* ── 19. Vercel skin ───────────────────────────────────────────────────
   Full re-polish: pure-white / true-black canvases, Geist type, black
   primary actions, hairline structure, quiet chrome. Overrides earlier
   sections by order. */

/* Primary actions: solid ink (black on light, white on dark) — the
   signature move. Blue stays for links and focus. */
.btn-primary, .btn.btn-primary, button.btn-primary,
.btn-block, .cd-cta .btn, .hero-cta .btn:first-child {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-block:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--ink) 82%, var(--paper)) !important;
}
/* Secondary: white well, hairline, border darkens on hover. */
.btn:not(.btn-primary):not(.btn-danger) {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}
.btn:not(.btn-primary):not(.btn-danger):hover {
  border-color: var(--faint);
  background: var(--white);
}

/* Navbar: solid, quiet, hairline bottom — no glass gimmick. */
.navbar, .nav, nav.nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--paper) 96%, transparent) !important;
  border-bottom: 1px solid var(--line);
}

/* Section headers: drop the editorial tick — plain, confident Geist
   headings with a muted counter. */
.sec-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; letter-spacing: 0; }
.sec-head::before { content: none !important; }
.sec-head .idx { color: var(--faint); font-weight: 500; }
.sec-head h2 { font-weight: 650; font-size: 20px; letter-spacing: -0.02em; }

/* Kill remaining graph-paper / wash artifacts. */
.hero, .lh-shell, [class*="graph-paper"] { background-image: none !important; }

/* Tables: hairline rows, quiet hover, sentence-case headers. */
.subs-tbl th, .plist-h, .lb-tbl th {
  font-family: var(--bodyf);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
}
.subs-tbl tbody tr:hover, .prow:hover, .lb-tbl tbody tr:hover {
  background: var(--panel);
}

/* Cards: flat wells with hairlines; shadow only on hover. */
.card, .info-card, .panel, .hv3-panel, .settings-card, .lb-card,
.action-card, .subs-card {
  box-shadow: none;
  border-radius: var(--r-lg);
}
.card:hover, .info-card:hover, .action-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--faint) 45%, var(--line));
}

/* Inputs: calm hairline, ink focus ring like vercel.com forms. */
.input, input.input, select.input, textarea.input, select, input[type="text"],
input[type="search"], input[type="email"], input[type="password"], textarea {
  background: var(--white);
  border-color: var(--line);
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--ink) !important;
}

/* Badges/pills: neutral gray unless the color means something. */
.ct-pill, .cd-chip, .rel-pill {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--dim);
}

/* Toasts: card-styled, small shadow, no heavy ink border. */
.toast {
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--r-md) !important;
}

/* Footer: hairline, muted. */
.site-footer, footer.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Selection + focus ring in brand blue. */
::selection { background: color-mix(in srgb, var(--cobalt) 25%, transparent); }
:focus-visible { outline-color: var(--cobalt); }