/* AskHackers v4. Shared tokens and components; page files own their layouts. */
:root {
  color-scheme: dark;
  --bg: #0b1727; --bg-soft: #0e1c30; --panel: #122036; --panel-2: #18294a; --code-bg: #0a1424;
  --code-str: #9fd8a8;
  --code-gutter: #122036; --code-active: #16243a; --code-selection: #1e3149; --code-match: #1e3149; --code-caret: #ffd43b;
  --logo-ink: #ffffff;
  --control-border: var(--border-strong);
  --cyan: var(--blue); --cyan-soft: var(--blue-soft); --cyan-line: var(--blue-line);
  --magenta: var(--orange); --magenta-line: var(--orange-line);
  --code-text: #dfe6ef; --code-kw: #5a9fd4; --code-fn: #ffd43b; --code-num: #ff9f43; --code-cm: #9aa9bd; --code-pn: #b8c4d3;
  --panel-alpha: rgba(18, 32, 54, 0.6);
  --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.16);
  --text-strong: #f3f6fa; --text: #dfe6ef; --muted: #a7b4c6; --soft: #98a6ba;
  --accent: #ffd43b; --accent-strong: #ffe873; --accent-fill: #ffd43b; --accent-fill-strong: #ffe873; --accent-soft: rgba(255, 212, 59, 0.14); --accent-line: rgba(255, 212, 59, 0.38); --on-accent: #0b1727;
  --blue: #76b4e2; --blue-deep: #3776ab; --blue-soft: rgba(90, 159, 212, 0.1); --blue-line: rgba(90, 159, 212, 0.4);
  --on-blue: #ffffff; --pyblue-wash: rgba(55, 118, 171, 0.28);
  --orange: #ff9f43; --orange-soft: rgba(255, 159, 67, 0.16); --orange-line: rgba(255, 159, 67, 0.4);
  --gold: #ffd43b; --gold-deep: #c99a12; --gold-soft: rgba(255, 212, 59, 0.12); --gold-line: rgba(255, 212, 59, 0.4);
  --silver: #d7e1ee; --silver-deep: #8393a8; --silver-soft: rgba(215, 225, 238, 0.1); --silver-line: rgba(215, 225, 238, 0.35); --silver-hi: #ffffff;
  --bronze: #e0955a; --bronze-deep: #9a5a2a; --bronze-soft: rgba(224, 149, 90, 0.12); --bronze-line: rgba(224, 149, 90, 0.4); --bronze-hi: #f6c79a;
  --sheen: rgba(255, 255, 255, 0.55);
  --nav-bg: rgba(11, 23, 39, 0.9); --nav-bg-solid: rgba(11, 23, 39, 0.98);
  --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1320px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --level-1: var(--blue); --level-2: var(--accent); --level-3: var(--orange);
  --heat-0: rgba(255, 255, 255, 0.05); --heat-1: rgba(90, 159, 212, 0.3); --heat-2: rgba(90, 159, 212, 0.55); --heat-3: rgba(90, 159, 212, 0.8); --heat-4: var(--blue);
  --toast-bg: var(--panel-2); --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f7fc; --bg-soft: #e5eff8; --panel: #ffffff; --panel-2: #dcebf7; --code-bg: #0b1727;
  --code-text: #e6edf5; --code-kw: #66b3ff; --code-fn: #ffd43b; --code-num: #ffb86b; --code-cm: #a9b8c9; --code-pn: #c4d0dd;
  --panel-alpha: rgba(255, 255, 255, 0.7); --border: rgba(14, 20, 30, 0.1); --border-soft: rgba(14, 20, 30, 0.06); --border-strong: rgba(14, 20, 30, 0.2);
  --control-border: #6e8097;
  --text-strong: #0e141e; --text: #1f2a3a; --muted: #4b5a70; --soft: #526178;
  --accent: #735300; --accent-strong: #594000; --accent-fill: #ffd43b; --accent-fill-strong: #ffc61a; --accent-soft: rgba(255, 212, 59, 0.28); --accent-line: rgba(230, 185, 20, 0.7); --on-accent: #0b1727;
  --blue: #19558f; --blue-deep: #3776ab; --blue-soft: rgba(31, 95, 159, 0.12); --blue-line: rgba(31, 95, 159, 0.4);
  --orange: #a73509; --orange-soft: rgba(194, 65, 12, 0.1); --orange-line: rgba(194, 65, 12, 0.35);
  --gold: #735300; --gold-deep: #594000; --gold-soft: rgba(218, 174, 0, 0.12); --gold-line: rgba(115, 83, 0, 0.4);
  --silver: #4b5a70; --silver-deep: #354258; --silver-soft: rgba(75, 90, 112, 0.1); --silver-line: rgba(75, 90, 112, 0.4);
  --bronze: #87451f; --bronze-deep: #633015; --bronze-soft: rgba(135, 69, 31, 0.1); --bronze-line: rgba(135, 69, 31, 0.4);
  --heat-0: rgba(31, 95, 159, 0.08); --nav-bg: rgba(242, 247, 252, 0.92); --nav-bg-solid: rgba(242, 247, 252, 0.99); --pyblue-wash: rgba(55, 118, 171, 0.24);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--soft); opacity: 1; }
:root[data-theme="light"] :is(input, select, textarea) { border-color: var(--control-border); }
.ed-mount textarea::selection, .wb-code textarea::selection, pre code::selection, pre code *::selection { color: var(--code-text); background: var(--code-selection); }
[hidden] { display: none !important; }
::selection { background: var(--accent-line); color: var(--text-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--s5); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--s5); }
h1 { font-size: 2.75rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); overflow-wrap: anywhere; }
h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
h3, h4 { font-size: 1rem; font-weight: 600; color: var(--text-strong); }
.eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--s3); }
.eyebrow.muted { color: var(--soft); }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 56ch; }
.mono, .num { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.h-mono { font-family: var(--font-mono); font-weight: 700; color: var(--text-strong); }
.c-accent { color: var(--accent); }
.c-blue { color: var(--blue); }
.c-orange { color: var(--orange); }
.soft { color: var(--soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius); font: 600 .9rem var(--font-sans); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-strong); }
.btn-soft { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.btn-soft:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--text-strong); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm { height: 32px; padding: 0 12px; font-size: .82rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.link-arrow { font-size: .9rem; font-weight: 500; color: var(--blue); transition: color .15s; }
.link-arrow:hover { color: var(--text-strong); }
.nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: var(--s6); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.05rem var(--font-mono); color: var(--text-strong); letter-spacing: -.02em; flex-shrink: 0; }
.logo-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--blue-deep); display: grid; place-items: center; color: var(--logo-ink); font: 700 .75rem var(--font-mono); font-style: normal; }
.nav-links { display: flex; gap: var(--s5); font-size: .92rem; font-weight: 500; color: var(--muted); }
.nav-links a { transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-strong); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 21px; margin-bottom: -21px; }
.nav-actions { margin-left: auto; display: flex; gap: var(--s3); align-items: center; font-size: .9rem; font-weight: 500; color: var(--muted); min-width: 0; }
.theme-toggle { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
.theme-toggle:hover { color: var(--text-strong); border-color: var(--text); }
.xp-bar { display: inline-flex; align-items: center; gap: 6px; font: .72rem var(--font-mono); }
.xp-bar .bar { width: 96px; }
.streak { font: .75rem var(--font-mono); color: var(--accent); white-space: nowrap; }
.streak-cal { display: grid; grid-template-columns: repeat(12, 12px); gap: 3px; }
.streak-day { width: 12px; height: 12px; background: var(--heat-0); border-radius: 2px; }
.streak-day[data-xp="0"] { background: var(--heat-0); }
.streak-day[data-xp]:not([data-xp="0"]) { background: var(--heat-2); }
.badge-hex { display: grid; place-items: center; min-height: 56px; padding: 6px; text-align: center; font-size: .72rem; color: var(--gold); background: var(--gold-soft); clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.badge-hex.locked { color: var(--soft); background: var(--panel-2); outline: 1px solid var(--border); }
.badges { display: grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: 12px; }
.toast-xp { position: fixed; right: 24px; bottom: 24px; z-index: 200; padding: 12px 16px; border-radius: var(--radius); background: var(--toast-bg); box-shadow: var(--shadow-pop); color: var(--accent); font: .82rem var(--font-mono); animation: toast-in .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nav-login:hover, .nav-user:hover { color: var(--text-strong); }
.nav-user { white-space: nowrap; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.nav-links .nav-logout { display: none; }
.nav.open .nav-links .nav-logout { display: block; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius); width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.beta { background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); font-size: .8rem; color: var(--muted); }
.beta-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: 8px 44px 8px 24px; flex-wrap: wrap; }
.beta a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.beta-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--soft); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.beta-close:hover { color: var(--text-strong); }
/* Legacy class aliases remain for renderer compatibility during this release. */
.chip, .lvl, .pill, .state, .q-tag, .tk, .tag-python, .tag-js, .tag-c, .tag-css, .tag-career { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--radius-sm); font: 500 .75rem/1.4 var(--font-sans); background: var(--panel-2); color: var(--muted); border: 1px solid transparent; letter-spacing: normal; }
.chip-blue, .lvl-1, .tag-python, .s-done, .s-open, .t-python, .kind-hint { background: var(--blue-soft); color: var(--blue); }
.chip-accent, .lvl-2, .tag-js, .s-cur, .t-javascript, .kind-solution { background: var(--accent-soft); color: var(--accent); }
.chip-orange, .lvl-3, .tag-css, .t-css { background: var(--orange-soft); color: var(--orange); }
.chip-neutral, .tag-c, .tag-career, .s-lock, .t-c, .t-module, .t-step { background: var(--panel-2); color: var(--muted); }
.chip[aria-pressed="true"], .q-tag[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
button.chip, button.q-tag { cursor: pointer; }
.pill-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--blue); }
.diff { font-size: .85rem; font-weight: 600; }
.d1 { color: var(--blue); } .d2 { color: var(--accent); } .d3 { color: var(--orange); }
.panel, .table { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
.row { display: grid; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border-soft); transition: background .15s; }
.row:last-child { border-bottom: 0; }
.row:not(.head):hover { background: var(--panel-2); }
.row > div { padding: 10px var(--s4); min-width: 0; }
.row.head { min-height: 40px; background: var(--bg-soft); font: 600 .72rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.row.head > div { padding: 8px var(--s4); }
.row.cur { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.row.lock { opacity: .5; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding: var(--s6) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat small { display: block; font-size: .75rem; font-weight: 500; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.stat b { display: block; font: 700 1.6rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); margin-top: 2px; }
.stat > span { font-size: .8rem; color: var(--blue); }
.bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); }
.bar-meta { display: flex; justify-content: space-between; gap: var(--s2); font-size: .75rem; color: var(--soft); margin: 8px 0; }
.ring { width: 120px; height: 120px; flex: 0 0 120px; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .t { stroke: var(--border); }
.ring .c1 { stroke: var(--blue); } .ring .c2 { stroke: var(--accent-fill); } .ring .c3 { stroke: var(--orange); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.5rem var(--font-mono); color: var(--text-strong); }
.ring b small { display: block; font-size: .65rem; font-weight: 500; color: var(--soft); text-align: center; }
.section { padding: var(--s8) 0; }
.section.tight { padding-top: var(--s6); }
.section-head { margin-bottom: var(--s5); max-width: 720px; }
.section-head h2 { margin-bottom: var(--s4); }
.rule { border: 0; border-top: 1px solid var(--border-soft); }
.page-head { position: relative; padding: var(--s7) 0 var(--s6); background: radial-gradient(70% 120% at 100% 0%, var(--pyblue-wash), transparent 60%); }
.page-head > .container { position: relative; }
.page-head h1 { margin-bottom: var(--s4); }
.tk-kw { color: var(--code-kw); } .tk-fn { color: var(--code-fn); } .tk-str { color: var(--code-str); } .tk-num { color: var(--code-num); } .tk-cm { color: var(--code-cm); } .tk-pn { color: var(--code-pn); }
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: var(--s6) 0; font-size: .85rem; color: var(--soft); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: .85rem; }
.footer nav a:hover { color: var(--blue); }
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.reveal.in { opacity: 1; transform: none; }
.cursor { display: inline-block; width: 7px; height: .9em; background: var(--text); vertical-align: -1px; margin-left: 2px; }
@media (max-width: 1000px) {
 .nav-links, .nav-login { display: none; }
 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
 .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; padding: 18px 24px 22px; background: var(--nav-bg-solid); border-bottom: 1px solid var(--border); gap: 16px; }
 .nav.open .nav-links a[aria-current="page"] { padding: 0 0 4px; margin: 0; align-self: flex-start; }
 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 h1, .page-head h1 { font-size: 2rem; }
 .nav-inner { gap: var(--s3); }
 .nav-actions { gap: var(--s2); }
 .nav-user { max-width: 116px; font-size: .75rem; }
 .row.head { display: none; }
}
@media (max-width: 420px) { .nav-actions > .btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
 .reveal { opacity: 1; transform: none; }
 .toast-xp { animation: none; }
}
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }