:root{
  --bg:#EFF1EC; --surface:#FFFFFF; --surface-2:#E6E8E1;
  --ink:#14161A; --ink-2:#54574F; --ink-3:#8A8D82;
  --line:rgba(20,22,26,0.10); --line-strong:rgba(20,22,26,0.18);
  --accent:#96701F; --accent-ink:#FFFFFF;
  --gain:#1F8F63; --gain-fill:rgba(31,143,99,0.16); --gain-ink:#0F7A3D;
  --loss:#C2453A; --loss-fill:rgba(194,69,58,0.16); --loss-ink:#B91C1C;
  --sma:#3B6EA8; --sma2:#8B5FBF;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  --date-invert: 0;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0E12; --surface:#12161C; --surface-2:#181D24;
    --ink:#E9E7DD; --ink-2:#A9A99C; --ink-3:#75766C;
    --line:rgba(233,231,221,0.10); --line-strong:rgba(233,231,221,0.18);
    --accent:#D6A84A; --accent-ink:#0B0E12;
    --gain:#3FC793; --gain-fill:rgba(63,199,147,0.14); --gain-ink:#8FE9C4;
    --loss:#E5766A; --loss-fill:rgba(229,118,106,0.14); --loss-ink:#F3AFA6;
    --sma:#6FA8E0; --sma2:#B78FE0;
    --date-invert: 1;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0E12; --surface:#12161C; --surface-2:#181D24;
  --ink:#E9E7DD; --ink-2:#A9A99C; --ink-3:#75766C;
  --line:rgba(233,231,221,0.10); --line-strong:rgba(233,231,221,0.18);
  --accent:#D6A84A; --accent-ink:#0B0E12;
  --gain:#3FC793; --gain-fill:rgba(63,199,147,0.14); --gain-ink:#8FE9C4;
  --loss:#E5766A; --loss-fill:rgba(229,118,106,0.14); --loss-ink:#F3AFA6;
  --sma:#6FA8E0; --sma2:#B78FE0;
  --date-invert: 1;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#EFF1EC; --surface:#FFFFFF; --surface-2:#E6E8E1;
  --ink:#14161A; --ink-2:#54574F; --ink-3:#8A8D82;
  --line:rgba(20,22,26,0.10); --line-strong:rgba(20,22,26,0.18);
  --accent:#96701F; --accent-ink:#FFFFFF;
  --gain:#1F8F63; --gain-fill:rgba(31,143,99,0.16); --gain-ink:#0F7A3D;
  --loss:#C2453A; --loss-fill:rgba(194,69,58,0.16); --loss-ink:#B91C1C;
  --sma:#3B6EA8; --sma2:#8B5FBF;
  --date-invert: 0;
  color-scheme: light;
}
*{box-sizing:border-box;}
html{background:var(--bg); color-scheme:light dark; scroll-behavior:smooth;}
body,.page{font-family:var(--sans); color:var(--ink); background:transparent;}
.page{max-width:1080px; margin:0 auto; padding:1.5rem 0 3rem;}
.top-banner{background:var(--accent); color:var(--accent-ink); text-align:center; font-weight:800; font-size:16px; letter-spacing:0.02em; padding:16px 20px; line-height:1.4;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);}
h1{font-size:26px; font-weight:500; margin:0.35rem 0 0.25rem; text-wrap:balance;}
.subtitle{font-size:15px; color:var(--ink-2); margin:0 0 0.6rem; font-weight:400;}
.sub{font-size:14px; color:var(--ink-2); margin:0 0 1.5rem; max-width:64ch; line-height:1.6;}
.controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:1.5rem; padding:0.75rem 1rem; background:var(--surface); border:0.5px solid var(--line); border-radius:12px;}
.controls .range-fields{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.controls label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-3); font-family:var(--mono);}
.controls input[type="date"]{background:var(--surface-2); border:0.5px solid var(--line); border-radius:8px; padding:6px 8px; color:var(--ink); font-family:var(--mono); font-size:13px;}
.controls input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(var(--date-invert));}
.controls input[type="number"]{background:var(--surface-2); border:0.5px solid var(--line); border-radius:8px; padding:6px 8px; color:var(--ink); font-family:var(--mono); font-size:13px; width:64px;}
.controls select{background:var(--surface-2); border:0.5px solid var(--line); border-radius:8px; padding:6px 8px; color:var(--ink); font-family:var(--mono); font-size:13px; cursor:pointer;}
.proj-note,.avg-note{font-size:12px; color:var(--ink-3); margin:0 0 1rem;}
.preset-btns{display:flex; gap:6px; flex-wrap:wrap;}
.preset-btn{background:var(--surface-2); border:0.5px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12px; font-family:var(--mono); color:var(--ink-2); cursor:pointer;}
.preset-btn:hover{border-color:var(--line-strong); color:var(--ink);}
.preset-btn.active{border-color:var(--accent); color:var(--ink); background:var(--surface-2);}
.preset-btns a.preset-btn{text-decoration:none; display:inline-block;}
.quick-nav{position:sticky; top:0; z-index:5; background:var(--bg); padding:0.6rem 0; margin:0 0 0.75rem; border-bottom:0.5px solid var(--line);}
.section-label,.group,.pl-group,.year-card{scroll-margin-top:var(--nav-h, 56px);}
.live-status{font-size:11px; font-family:var(--mono); color:var(--ink-3); margin:6px 2px 1.5rem;}
.live-status.ok{color:var(--gain-ink);}
.live-status.warn{color:var(--loss-ink);}
.live-strip{display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; margin:0.9rem 0 1.1rem;}
.live-price{display:flex; align-items:center; gap:0.55rem; font-family:var(--mono); padding:0.65rem 1rem; background:var(--surface); border:0.5px solid var(--line); border-radius:12px; width:fit-content;}
.live-price .lp-dot{width:8px; height:8px; border-radius:50%; background:var(--gain-ink); flex:none; animation:lp-pulse 2s ease-in-out infinite;}
.live-price.stale .lp-dot{background:var(--ink-3); animation:none;}
.live-price .lp-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3);}
.live-price .lp-value{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums;}
.live-price .lp-value.g,.live-price .lp-arrow.g{color:var(--gain-ink);}
.live-price .lp-value.l2,.live-price .lp-arrow.l2{color:var(--loss-ink);}
.live-price .lp-arrow{font-size:12px;}
.live-price .lp-updated{font-size:11px; color:var(--ink-3);}
@keyframes lp-pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}
.live-change{display:flex; align-items:center; gap:0.4rem; font-family:var(--mono); padding:0.65rem 0.85rem; background:var(--surface); border:0.5px solid var(--line); border-radius:12px; width:fit-content;}
.live-change .lc-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3);}
.live-change .lc-value{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums;}
.live-change .lc-value.g{color:var(--gain-ink);}
.live-change .lc-value.l2{color:var(--loss-ink);}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:1.25rem;}
.stat{background:var(--surface); border:0.5px solid var(--line); border-radius:12px; padding:0.85rem 1rem;}
.stat .l{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); font-family:var(--mono);}
.stat .l .no-case{text-transform:none;}
.stat .v{font-family:var(--mono); font-size:19px; font-variant-numeric:tabular-nums; margin-top:4px; overflow-wrap:anywhere;}
.stat .v.g{color:var(--gain-ink);} .stat .v.l2{color:var(--loss-ink);}
.section-label{font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-2); margin:0 0 0.6rem;}
.legend{display:flex; align-items:center; gap:18px; margin-bottom:1.25rem; font-size:12px; color:var(--ink-2); font-family:var(--mono);}
.legend .sw{display:inline-flex; align-items:center; gap:6px;}
.legend .sw i{width:10px; height:10px; border-radius:2px; display:inline-block;}
.legend .sw.g i{background:var(--gain);} .legend .sw.l2 i{background:var(--loss);}
.group{margin-bottom:2rem;}
.group h3{font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-2); margin:0 0 0.6rem;}
.card{background:var(--surface); border:0.5px solid var(--line); border-radius:12px; padding:1rem;}
.chart-wrap{position:relative; width:100%;}
.year-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;}
.year-card{background:var(--surface); border:0.5px solid var(--line); border-radius:12px; padding:0.65rem 0.65rem 0.4rem;}
.year-card .yh{display:flex; align-items:center; justify-content:space-between; padding:0 0.2rem; margin-bottom:2px;}
.year-card .yy{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink);}
.year-card .yr{font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;}
.year-card .yr.g{color:var(--gain-ink);} .year-card .yr.l2{color:var(--loss-ink);}
.empty{font-size:13px; color:var(--ink-3); padding:1rem 0;}
.foot{margin-top:2rem; font-size:12px; color:var(--ink-3); line-height:1.6; border-top:1px solid var(--line); padding-top:1rem;}
.scroll-top-btn{position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--accent-ink); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.25); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index:20;}
.scroll-top-btn.visible{opacity:1; visibility:visible; transform:translateY(0);}
.scroll-top-btn:hover{filter:brightness(1.08);}
.img-fluid{max-width:100%; height:auto;}
#sitelock{border-top:none; margin-top:0.75rem; padding-top:0;}
.foot a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;}
.foot a:hover{color:var(--ink);}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.top-row-switches{display:flex; gap:12px; flex:none;}
.lang-switch,.theme-switch{display:flex; gap:4px; flex:none;}
.lang-btn,.theme-btn{display:inline-flex; align-items:center; background:var(--surface-2); border:0.5px solid var(--line); border-radius:8px; padding:4px 10px; font-size:11px; font-family:var(--mono); color:var(--ink-3); cursor:pointer; letter-spacing:0.04em;}
.lang-btn:hover,.theme-btn:hover{border-color:var(--line-strong); color:var(--ink);}
.lang-btn.active,.theme-btn.active{border-color:var(--accent); color:var(--ink); background:var(--surface-2);}
.icon-link{display:inline-flex; align-items:center; background:var(--surface-2); border:0.5px solid var(--line); border-radius:8px; padding:4px 10px; font-size:13px; color:var(--ink-3); text-decoration:none; cursor:pointer; flex:none;}
.icon-link:hover{border-color:var(--line-strong); color:var(--ink);}
.kid-explainer{background:var(--surface); border:0.5px solid var(--line); border-radius:12px; margin-bottom:1.25rem;}
.kid-explainer summary{display:flex; align-items:center; gap:8px; padding:0.75rem 1.1rem; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink); list-style:none;}
.kid-explainer summary::-webkit-details-marker{display:none;}
.kid-explainer[open] summary{border-bottom:0.5px solid var(--line);}
.kid-explainer .info-icon{flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans);}
.kid-explainer .kx, .kid-explainer .ks{font-size:14px; color:var(--ink-2); line-height:1.65; margin:0; padding:0.9rem 1.1rem;}
.kid-explainer .kx{padding-bottom:0.4rem;}
.kid-explainer .ks{padding-top:0; font-size:13px;}