/* ════════════════════════════════════════
   TOKENS — light (default) / dark
════════════════════════════════════════ */
:root {
  /* Fully neutral palette (no hue). Up/down is shown with +/− and ink weight:
     "green" = strong ink (up), "red" = gray (down); the names are kept so markup stays semantic. */
  --bg:#FAFAFA; --surf:#FFFFFF; --surf2:#F5F5F5; --surf3:#E8E8E8;
  --border:#E5E5E5; --border2:#D4D4D4;
  --text:#171717; --text2:#404040; --muted:#737373;
  --accent:#404040; --accent-bg:rgba(0,0,0,.05);
  --green:#171717; --green-bg:rgba(0,0,0,.06);
  --red:#8A8A8A; --red-bg:rgba(0,0,0,.04);
  --amber:#595959; --amber-bg:rgba(0,0,0,.05);
  --purple:#737373; --purple-bg:rgba(0,0,0,.05);
  --teal:#A3A3A3;
  /* grayscale series for charts (strongest → lightest) */
  --s1:#262626; --s2:#525252; --s3:#8A8A8A; --s4:#BDBDBD; --s5:#E0E0E0;
  /* Muted chart palette: the only hues in the UI (charts and logos) */
  --c1:#4A78A8; --c2:#4F9A8A; --c3:#C08A3E; --c4:#8B6FB0; --c5:#A3A3A3;
  --up:#3F8F6B; --down:#C0625A;
  --grid:rgba(0,0,0,.06);
  --hdr-bg:rgba(250,250,250,.86);
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 8px 24px rgba(0,0,0,.12);
  --r:10px; --r-sm:7px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  color-scheme:light;
}
[data-theme="dark"] {
  /* Dark: low-contrast surfaces, soft (not pure white) text, hairline borders */
  --bg:#0E0E0E; --surf:#131313; --surf2:#191919; --surf3:#222222;
  --border:#1F1F1F; --border2:#2B2B2B;
  --text:#DADADA; --text2:#B0B0B0; --muted:#7A7A7A;
  --accent:#B0B0B0; --accent-bg:rgba(255,255,255,.05);
  --green:#DADADA; --green-bg:rgba(255,255,255,.06);
  --red:#7E7E7E; --red-bg:rgba(255,255,255,.035);
  --amber:#9E9E9E; --amber-bg:rgba(255,255,255,.04);
  --purple:#7A7A7A; --purple-bg:rgba(255,255,255,.04);
  --teal:#4D4D4D;
  --s1:#CFCFCF; --s2:#9A9A9A; --s3:#6B6B6B; --s4:#454545; --s5:#2F2F2F;
  --c1:#6A94C2; --c2:#6CAF9F; --c3:#CFA25E; --c4:#A18BC4; --c5:#6B6B6B;
  --up:#5FAE8A; --down:#CF7A72;
  --grid:rgba(255,255,255,.04);
  --hdr-bg:rgba(14,14,14,.88);
  --shadow:none;
  --shadow-pop:0 8px 24px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px; -webkit-text-size-adjust:100% }
body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased }
main { flex:1 }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer; background:none; border:0 }
img { display:block; max-width:100% }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }
* { scrollbar-width:thin; scrollbar-color:var(--border2) transparent }
::-webkit-scrollbar { width:8px; height:8px }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:8px; border:2px solid transparent; background-clip:content-box }
::-webkit-scrollbar-track { background:transparent }
[hidden] { display:none !important }
.num { font-variant-numeric:tabular-nums }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.muted { color:var(--muted) }
.pos { color:var(--green) }
.neg { color:var(--red) }
.neu { color:var(--muted) }

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.hdr { position:sticky; top:0; z-index:50; background:var(--hdr-bg); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border) }
.hdr-in { max-width:1440px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; gap:20px }
.brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; white-space:nowrap; letter-spacing:-.01em }
.logo { width:26px; height:26px; border-radius:7px; background:var(--text); color:var(--bg); display:grid; place-items:center; font-size:14px; font-weight:700; flex-shrink:0 }
.nav { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0 }
.nav::-webkit-scrollbar { display:none }
.nav a { padding:6px 10px; border-radius:6px; font-size:13px; color:var(--muted); white-space:nowrap; transition:color .15s,background .15s }
.nav a:hover { color:var(--text); background:var(--surf2) }
.nav a.on { color:var(--text); background:var(--surf2); font-weight:500 }
.hdr-r { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto }
.icon-btn { width:32px; height:32px; display:grid; place-items:center; border-radius:7px; color:var(--muted); border:1px solid var(--border); background:var(--surf); transition:color .15s,border-color .15s; flex-shrink:0 }
.icon-btn:hover { color:var(--text); border-color:var(--border2) }
.icon-btn:disabled { cursor:default; opacity:.6 }
.icon-btn svg { width:16px; height:16px }
.language-select { height:32px; padding:0 6px; border-radius:7px; border:1px solid var(--border); background:var(--surf); color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer }
.language-select:hover { color:var(--text); border-color:var(--border2) }
.brand .logo-img { width:22px; height:22px; object-fit:contain; border-radius:5px }
.icon-btn.sm { width:28px; height:28px }
.icon-btn.sm svg { width:14px; height:14px }
.i-sun { display:none }
[data-theme="dark"] .i-sun { display:block }
[data-theme="dark"] .i-moon { display:none }
@media (max-width:640px) {
  .hdr-in { flex-wrap:wrap; height:auto; padding:10px 16px 0; gap:8px 12px }
  .nav { order:3; flex-basis:100%; margin:0 -16px; padding:0 12px 8px }
}

/* user menu */
.menu { position:relative }
.menu > summary { list-style:none; height:32px; padding:0 10px; display:flex; align-items:center; gap:6px; border-radius:7px; border:1px solid var(--border); background:var(--surf); font-size:13px; color:var(--text2); cursor:pointer; user-select:none; white-space:nowrap }
.menu > summary::-webkit-details-marker { display:none }
.menu > summary:hover { border-color:var(--border2) }
.menu > summary .av { width:20px; height:20px; border-radius:50%; background:var(--surf3); display:grid; place-items:center; font-size:11px; font-weight:600; text-transform:uppercase }
.menu-pop { position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:var(--surf); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-pop); padding:4px; z-index:60 }
.menu-pop a, .menu-pop button { display:flex; width:100%; text-align:left; padding:7px 10px; border-radius:5px; font-size:13px; color:var(--text2) }
.menu-pop a:hover, .menu-pop button:hover { background:var(--surf2); color:var(--text) }
.menu-pop .sep { height:1px; background:var(--border); margin:4px 0 }
.menu-pop .who { padding:6px 10px 8px; font-size:12px; color:var(--muted) }
@media (max-width:520px) { .menu > summary .name { display:none } }

/* ════════════════════════════════════════
   BUTTONS / FORMS
════════════════════════════════════════ */
.btn { height:34px; padding:0 14px; border-radius:7px; font-size:13px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); background:var(--surf); color:var(--text); white-space:nowrap; transition:background .15s,border-color .15s,opacity .15s }
.btn:hover { border-color:var(--border2); background:var(--surf2) }
.btn.primary { background:var(--text); border-color:var(--text); color:var(--bg) }
.btn.primary:hover { opacity:.88 }
.btn.danger { color:var(--text) }
.btn.danger:hover { background:var(--surf3); border-color:var(--text) }
.btn.sm { height:28px; padding:0 10px; font-size:12px }
.btn.lg { height:42px; padding:0 20px; font-size:14px }
.btn:disabled { opacity:.55; cursor:default }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.field label, .field .label { font-size:12.5px; font-weight:500; color:var(--text2) }
.field .hint { font-size:12px; color:var(--muted) }
.input, .textarea, select.input { width:100%; height:36px; padding:0 11px; border-radius:7px; border:1px solid var(--border); background:var(--surf); font-size:13.5px; color:var(--text); outline:none; transition:border-color .15s }
.textarea { height:auto; min-height:120px; padding:10px 11px; line-height:1.55; resize:vertical; font-family:var(--mono); font-size:13px }
.input::placeholder, .textarea::placeholder { color:var(--muted) }
.input:focus, .textarea:focus { border-color:var(--accent) }
.input.sm { height:28px; font-size:12.5px; padding:0 10px }
.check { display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; padding:4px 0 }
.check input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer }
.alert { padding:10px 12px; border-radius:var(--r-sm); font-size:13px; margin-bottom:14px; border:1px solid }
.alert.err { background:var(--surf2); border-color:var(--border2); color:var(--text) }
.alert.ok { background:var(--surf2); border-color:var(--border); color:var(--text2) }

/* chips */
.chips { display:flex; gap:6px; flex-wrap:wrap }
.chip { height:28px; padding:0 11px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s,border-color .15s,background .15s }
.chip:hover { color:var(--text); border-color:var(--border2) }
.chip.on { background:var(--text); border-color:var(--text); color:var(--bg) }
/* In dark mode, solid white blocks are the loudest thing on screen: use quiet raised surfaces instead */
[data-theme="dark"] .chip.on { background:var(--surf3); border-color:var(--border2); color:var(--text) }
[data-theme="dark"] .btn.primary { background:var(--surf3); border-color:var(--border2); color:var(--text) }
[data-theme="dark"] .btn.primary:hover { background:#2A2A2A; opacity:1 }
[data-theme="dark"] .logo { background:var(--surf3); color:var(--text) }
[data-theme="dark"] .menu > summary, [data-theme="dark"] .icon-btn { background:transparent }
.chip .n { font-variant-numeric:tabular-nums; opacity:.65 }

/* ════════════════════════════════════════
   LAYOUT / CARDS
════════════════════════════════════════ */
.wrap { max-width:1440px; width:100%; margin:0 auto; padding:20px 20px 40px }
.narrow { max-width:760px }
.mid { max-width:1080px }
@media (max-width:600px) { .wrap { padding:16px 16px 32px } }
.card { background:var(--surf); border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); min-width:0 }
.card-h { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; min-height:28px }
.card-h h3 { font-size:13px; font-weight:600 }
.card-h .meta { font-size:12px; color:var(--muted) }
.card-h .act { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.lbl { font-size:12px; color:var(--muted) }
.empty { padding:24px 12px; text-align:center; color:var(--muted); font-size:12.5px }
.skel { height:12px; border-radius:4px; margin:10px 0; background:linear-gradient(90deg,var(--surf2),var(--surf3),var(--surf2)); background-size:200% 100%; animation:sh 1.4s linear infinite }
.skel.w60 { width:60% } .skel.w80 { width:80% }
@keyframes sh { to { background-position:-200% 0 } }
.page-h { margin:12px 0 24px }
.page-h h1 { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2 }
.page-h p { color:var(--muted); margin-top:6px; font-size:14.5px }

/* ════════════════════════════════════════
   PROSE (articles, about)
════════════════════════════════════════ */
.prose { font-size:15.5px; line-height:1.75; color:var(--text2) }
.prose > * + * { margin-top:1em }
.prose h1, .prose h2, .prose h3, .prose h4 { color:var(--text); line-height:1.3; letter-spacing:-.01em; margin-top:1.6em }
.prose h1 { font-size:24px } .prose h2 { font-size:20px } .prose h3 { font-size:17px } .prose h4 { font-size:15.5px }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.prose ul, .prose ol { padding-left:1.4em }
.prose li + li { margin-top:.35em }
.prose blockquote { border-left:3px solid var(--border2); padding-left:14px; color:var(--muted) }
.prose code { font-family:var(--mono); font-size:.88em; background:var(--surf2); padding:1px 5px; border-radius:4px }
.prose pre { background:var(--surf2); padding:14px; border-radius:var(--r-sm); overflow:auto }
.prose pre code { background:none; padding:0 }
.prose img { border-radius:var(--r-sm); border:1px solid var(--border) }
.prose table { border-collapse:collapse; width:100%; font-size:14px }
.prose th, .prose td { border:1px solid var(--border); padding:6px 10px; text-align:left }
.prose hr { border:0; height:1px; background:var(--border) }

/* ════════════════════════════════════════
   FOOTER / TOAST
════════════════════════════════════════ */
.site-foot { border-top:1px solid var(--border); margin-top:24px }
.site-foot .in { max-width:1440px; margin:0 auto; padding:20px; font-size:12px; color:var(--muted); display:flex; gap:12px 24px; flex-wrap:wrap; justify-content:space-between }
.site-foot nav { display:flex; gap:16px }
.site-foot a:hover { color:var(--text) }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--bg); padding:9px 16px; border-radius:8px; font-size:13px; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; box-shadow:var(--shadow-pop); max-width:calc(100% - 32px) }
.toast.show { opacity:1; transform:translateX(-50%) }
.toast.err { background:var(--text); color:var(--bg); box-shadow:0 0 0 2px var(--muted), var(--shadow-pop) }

/* section sidebar (dashboard, macro, academy): a column on wide screens, a scrolling row below 1024 px */
.side-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 10px 8px }
.side-nav { display:flex; flex-direction:column; gap:1px }
.side-nav a { position:relative; padding:6px 10px; border-radius:6px; font-size:13px; color:var(--muted); white-space:nowrap; transition:color .15s,background .15s }
.side-nav a:hover { color:var(--text); background:var(--surf2) }
.side-nav a.on { color:var(--text); background:var(--surf2); font-weight:500 }
.side-nav a.on::before { content:''; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:2px; background:var(--text) }
@media (max-width:1024px) {
  .side-title { display:none }
  .side-nav { flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:2px }
  .side-nav::-webkit-scrollbar { display:none }
  .side-nav a.on::before { left:10px; right:10px; top:auto; bottom:2px; width:auto; height:2px }
}

/* ════════════════════════════════════════
   MOTION (reveal() / countUp() in common.js)
════════════════════════════════════════ */
.rv { opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms) }
.rv.in { opacity:1; transform:none }
/* screenshots and print always show every block in its final state */
.shooting .rv, .shooting.rv { opacity:1 !important; transform:none !important; transition:none !important }
@media print { .rv { opacity:1 !important; transform:none !important } }
main { animation:page-in .35s ease-out }
@keyframes page-in { from { opacity:0 } }
/* "live" dots breathe with a soft ring */
.live, .eyebrow i { position:relative }
.live::after, .eyebrow i::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--text2); opacity:0; animation:ping 2.4s ease-out infinite }
.live.warn::after { display:none }
@keyframes ping { 0% { transform:scale(.6); opacity:.55 } 80%,100% { transform:scale(1.9); opacity:0 } }
/* quiet lift on interactive cards */
.lift { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease }
.lift:hover { transform:translateY(-2px); border-color:var(--border2); box-shadow:var(--shadow-pop) }
.btn, .chip { transition:background .15s,border-color .15s,color .15s,opacity .15s,transform .1s }
.btn:active, .chip:active { transform:scale(.97) }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}