:root{
    --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
    --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,.10);
    --s1:#2a78d6; --s2:#eb6834; --accent:#2a78d6; --track:#efeeea; --dim:#c3c2b7;
    --cellink:#0b0b0b; --cellink-strong:#ffffff;
  }
  @media (prefers-color-scheme: dark){
    :root:where(:not([data-theme="light"])){
      --page:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
      --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,.10);
      --s1:#3987e5; --s2:#d95926; --accent:#3987e5; --track:#242423; --dim:#52514e;
    }
  }
  :root[data-theme="dark"]{
    --page:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926; --accent:#3987e5; --track:#242423; --dim:#52514e;
  }
  :root[data-theme="light"]{
    --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
    --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,.10);
    --s1:#2a78d6; --s2:#eb6834; --accent:#2a78d6; --track:#efeeea; --dim:#c3c2b7;
  }
  *{box-sizing:border-box}
  @media (prefers-reduced-motion: reduce){ *{transition:none!important} }
  body{
    margin:0; background:var(--page); color:var(--ink);
    font-family:"Vazirmatn","IRANSans","Segoe UI",Tahoma,system-ui,sans-serif;
    direction:rtl; line-height:1.7; font-size:14.5px;
  }
  .wrap{max-width:1180px; margin:0 auto; padding:28px 20px 60px}
  header.hero{padding:26px 0 8px}
  .eyebrow{font-size:12px; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:6px}
  h1{font-size:clamp(24px,4vw,34px); margin:0 0 8px; line-height:1.35; text-wrap:balance}
  .sub{color:var(--ink2); max-width:62ch; margin:0}
  .heroNum{font-size:clamp(40px,6vw,56px); font-weight:700; line-height:1.2; margin-top:18px}
  .heroCap{color:var(--muted); font-size:13px}

  .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:26px 0 10px}
  .kpi{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px}
  .kpi .lab{font-size:12.5px; color:var(--ink2)}
  .kpi .val{font-size:22px; font-weight:700; margin-top:2px}
  .kpi .note{font-size:11.5px; color:var(--muted); margin-top:2px}

  section{margin-top:44px}
  .secHead{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--grid); padding-bottom:8px; margin-bottom:16px}
  .secHead h2{font-size:19px; margin:0}
  .secHead .desc{color:var(--muted); font-size:12.5px}

  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 18px 14px; min-width:0}
  .card.wide{grid-column:1/-1}
  .cHead{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:4px}
  .cTitle{font-weight:700; font-size:15px}
  .cSub{color:var(--muted); font-size:12px; margin-top:1px}
  .tbtn{border:1px solid var(--border); background:none; color:var(--ink2); font:inherit; font-size:12px;
        border-radius:7px; padding:3px 12px; cursor:pointer; flex-shrink:0}
  .tbtn:hover{background:var(--track)}
  .tbtn:focus-visible,.row:focus-visible,.hcell:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .legend{display:flex; gap:16px; flex-wrap:wrap; margin:8px 0 10px; font-size:12px; color:var(--ink2)}
  .legend .it{display:flex; align-items:center; gap:6px}
  .sw{width:11px; height:11px; border-radius:3px; flex-shrink:0}

  .hchart{margin-top:8px}
  .row{display:grid; grid-template-columns:var(--labw,110px) 1fr var(--valw,74px); align-items:center; gap:8px; padding:2.5px 0; border-radius:6px}
  .row:hover{background:var(--track)}
  .rlab{font-size:12px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rtracks{display:flex; flex-direction:column; gap:3px; min-width:0}
  .rtrack{display:flex; gap:2px; height:var(--barh,14px); align-items:stretch}
  .seg{min-width:0}
  .seg.end{border-start-start-radius:4px; border-end-start-radius:4px}
  .rval{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

  .hmapwrap{overflow-x:auto; margin-top:10px}
  .hmap{display:grid; gap:2px; font-size:11px; min-width:640px}
  .hlab{position:sticky; right:0; background:var(--surface); color:var(--ink2); font-size:12px;
        display:flex; align-items:center; padding-inline-end:8px; white-space:nowrap}
  .hcol{color:var(--muted); font-size:10.5px; writing-mode:vertical-rl; transform:rotate(180deg);
        display:flex; align-items:center; justify-content:flex-end; padding:2px 0; min-height:64px}
  .hcell{border-radius:3px; min-height:26px}
  .hcell:hover{outline:2px solid var(--accent); outline-offset:-1px}

  .tblwrap{display:none; margin-top:12px; overflow-x:auto; max-height:340px; overflow-y:auto}
  .tblwrap.open{display:block}
  table{border-collapse:collapse; width:100%; font-size:12.5px}
  th,td{padding:5px 10px; text-align:right; border-bottom:1px solid var(--grid); white-space:nowrap}
  th{color:var(--ink2); font-weight:600; position:sticky; top:0; background:var(--surface)}
  td.num{font-variant-numeric:tabular-nums; color:var(--ink2)}

  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
  .fact{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px}
  .fact .big{font-size:27px; font-weight:700; color:var(--accent)}
  .fact h3{font-size:14.5px; margin:6px 0 6px}
  .fact p{margin:0; font-size:13px; color:var(--ink2)}
  .fact .hook{margin-top:10px; padding-top:9px; border-top:1px solid var(--grid); font-size:12px; color:var(--muted)}
  .hook b{color:var(--ink2); font-weight:600}

  #tip{position:fixed; z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:9px;
       padding:9px 12px; font-size:12.5px; box-shadow:0 4px 18px rgba(0,0,0,.13); pointer-events:none; display:none; max-width:250px}
  #tip .t{font-weight:700; margin-bottom:3px}
  #tip .r{display:flex; align-items:center; gap:7px; color:var(--ink2)}
  #tip .k{width:12px; height:3px; border-radius:2px; flex-shrink:0}
  #tip .v{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}

  footer{margin-top:52px; padding-top:16px; border-top:1px solid var(--grid); color:var(--muted); font-size:12px}
  @media (max-width:640px){ .row{--labw:92px; --valw:64px} }
/* --- app nav --- */
nav.top{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:10px 0;border-bottom:1px solid var(--grid);margin-bottom:6px}
nav.top a{color:var(--ink2);text-decoration:none;font-size:13px;padding:6px 12px;border-radius:8px}
nav.top a:hover{background:var(--track)}
nav.top a.on{color:var(--accent);font-weight:700;background:var(--track)}
nav.top .brand{font-weight:800;font-size:14px;color:var(--ink);margin-inline-end:10px}
.filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.filterbar label{font-weight:700;font-size:14px}
.filterbar select,.filterbar input{font:inherit;font-size:14px;padding:8px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink)}
.loading{color:var(--muted);padding:40px 0;text-align:center}