/* База: змінні теми (світла/темна), скидання, шапка, навігація, перемикачі, контейнер вкладок */
  :root{
    --bg:#eef1f4; --surface:#ffffff; --surface-2:#f7f9fb; --line:#e0e5ea;
    --ink:#111820; --muted:#5f6b78; --faint:#8a95a2;
    --rev:#0d6e6a; --rev-soft:#0d6e6a22;
    --pro:#1f9d6b; --pro-soft:#1f9d6b22;
    --mar:#b7791f; --neg:#c6435a; --pos:#1f9d6b; --wd:#6a5acd;
    --shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.06);
    --radius:14px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0d1218; --surface:#141b23; --surface-2:#1a222c; --line:#25303b;
      --ink:#e9eef3; --muted:#93a0ad; --faint:#6c7885;
      --rev:#2bb6ab; --rev-soft:#2bb6ab24;
      --pro:#3fc98a; --pro-soft:#3fc98a24;
      --mar:#d9a441; --neg:#e06a7d; --pos:#3fc98a; --wd:#9d8df1;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0d1218; --surface:#141b23; --surface-2:#1a222c; --line:#25303b;
    --ink:#e9eef3; --muted:#93a0ad; --faint:#6c7885;
    --rev:#2bb6ab; --rev-soft:#2bb6ab24;
    --pro:#3fc98a; --pro-soft:#3fc98a24;
    --mar:#d9a441; --neg:#e06a7d; --pos:#3fc98a; --wd:#9d8df1;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.5;
    font-variant-numeric:tabular-nums;
  }
  .wrap{max-width:none; margin:0; padding:14px 20px 48px}
  .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
  .eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600}
  .faintlbl{font-size:.8em; color:var(--faint); font-weight:500; letter-spacing:.02em}

  .dot{width:7px;height:7px;border-radius:50%;background:var(--pro);box-shadow:0 0 0 3px var(--pro-soft)}


  .controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .selwrap{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
  select#period{appearance:none; font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:9px; padding:6px 30px 6px 11px; cursor:pointer; box-shadow:var(--shadow);
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
  select#period:focus-visible{outline:2px solid var(--rev); outline-offset:2px}
  .cur{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px}
  .cur button{appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--muted); padding:5px 12px; border-radius:7px}
  .cur button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
  .cur button:focus-visible{outline:2px solid var(--rev); outline-offset:2px}


  .tab{display:none}
  .tab.active{display:block; animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.tab.active{animation:none}}