:root {
  --bg:#f4f1ec;--bg2:#ebe7df;--bg3:#e0dbd0;
  --card:#fff;--white:#fff;
  --bdr:#ddd8cf;--bdr2:#c8c2b5;
  --ink:#1a1714;--body:#4a453f;--muted:#9c948a;--faint:#ccc6ba;
  --a1:#c94f0a;--a2:#1d5fbf;--a3:#0f7a54;--a4:#b8921e;--a5:#7c3aed;
  --r:#dc2626;
  --a1l:#fdf0ea;--a2l:#eaf0fc;--a3l:#e8f7f1;--a4l:#fdf6e3;--a5l:#f3eeff;--rl:#fef2f2;
  --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
  --sh2:0 6px 24px rgba(0,0,0,.12);
  --rad:10px;
  --kpi-bg:#ffffff;--kpi-fc:#1a1714;--chart-bg:#ffffff;
  --topbar-bg:#ffffff;--sidebar-bg:#ffffff;--footer-bg:#ffffff;
}
[data-theme="dark"] {
  --bg:#0f1117;--bg2:#161b22;--bg3:#1c2330;
  --card:#1c2330;--white:#1c2330;
  --bdr:#30363d;--bdr2:#484f58;
  --ink:#e6edf3;--body:#b1bac4;--muted:#7d8590;--faint:#444c56;
  --a1:#e8773d;--a2:#4a8ee8;--a3:#3fb87a;--a4:#d4aa3e;--a5:#a78bfa;
  --r:#f87171;
  --a1l:#2d1a0f;--a2l:#0d1f3c;--a3l:#0a2318;--a4l:#2a2009;--a5l:#1e1530;--rl:#2d1515;
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  --sh2:0 6px 24px rgba(0,0,0,.5);
  --kpi-bg:#1c2330;--kpi-fc:#e6edf3;--chart-bg:#1c2330;
  --topbar-bg:#161b22;--sidebar-bg:#161b22;--footer-bg:#161b22;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;display:flex;flex-direction:column;transition:background .3s,color .3s}
/* TOPBAR */
.topbar{height:52px;background:var(--topbar-bg);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 12px;position:fixed;top:0;left:0;right:0;z-index:500;flex-shrink:0;transition:background .3s}
/* BRAND — one line, never wraps */
.brand{display:flex;align-items:center;gap:5px;margin-right:12px;flex-shrink:0}
.bw{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.4px;white-space:nowrap;text-decoration:none;line-height:1;display:block}
.bt{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--a1);border:1.5px solid var(--a1);padding:1px 5px;border-radius:3px}
/* NAV — flex:1 so it fills space; items shrink text but never wrap */
.tnav{display:flex;align-items:center;gap:1px;flex:1;min-width:0}
/* Base style — works for both <button> and <a> */
.tn{padding:5px 8px;font-size:11.5px;font-weight:500;border-radius:7px;cursor:pointer;border:none;background:none;transition:.15s;color:var(--body);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;text-decoration:none;line-height:1;flex-shrink:0}
.tn:hover{color:var(--ink);background:var(--bg)}
/* Active: original outline style — coloured text + light bg + 1.5px ring */
.tn.active{color:var(--a1);background:var(--a1l);font-weight:700;box-shadow:0 0 0 1.5px var(--a1)}
/* Reset anchor browser defaults */
a.tn{color:var(--body)}
a.tn:visited{color:var(--body)}
a.tn:hover{color:var(--ink)}
a.tn.active{color:var(--a1)}
/* RIGHT SIDE */
.top-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.theme-btn{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s;color:var(--body)}
.theme-btn:hover{background:var(--bg2);border-color:var(--bdr2)}
.live-pill{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--a3);background:var(--a3l);border:1px solid var(--a3);padding:3px 9px;border-radius:20px;opacity:.9;flex-shrink:0}
.ldot{width:6px;height:6px;background:var(--a3);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Pre-reserved fixed width prevents ANY layout shift while clock loads */
.clk{font-size:11px;color:var(--muted);background:var(--bg);padding:3px 9px;border-radius:7px;border:1px solid var(--bdr);font-variant-numeric:tabular-nums;width:72px;text-align:center;display:inline-block;flex-shrink:0}
/* SHELL — sits below fixed 52px topbar */
.shell{display:flex;position:fixed;top:52px;left:0;right:0;bottom:0;overflow:hidden}
/* SIDEBAR */
.sidebar{width:210px;background:var(--sidebar-bg);border-right:1px solid var(--bdr);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow-y:auto;transition:background .3s}
.sb-head{padding:12px 12px 8px;border-bottom:1px solid var(--bdr)}
.sb-mod{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.sb-title{font-size:15px;font-weight:700;color:var(--ink)}
.sb-sec{padding:6px 6px 4px}
.sb-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);padding:0 6px;margin:6px 0 3px}
.rb{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:8px;border:none;background:none;cursor:pointer;text-align:left;transition:.12s;color:var(--body)}
.rb:hover{background:var(--bg);color:var(--ink)}.rb.active{background:var(--a1l);color:var(--a1)}
.rb.active .ri{background:var(--a1);color:#fff}
.ri{width:24px;height:24px;border-radius:6px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:.12s}
.rn{font-size:11.5px;font-weight:500;line-height:1.1}.rd{font-size:10px;color:var(--muted);margin-top:1px}
.rb.active .rd{color:var(--a1);opacity:.7}
.sb-foot{margin-top:auto;padding:8px 10px;border-top:1px solid var(--bdr);font-size:10px;color:var(--muted)}
.sb-sync{font-size:10px;color:var(--a3);font-weight:500}
/* CONTENT */
.content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;height:100%}
/* REPORT HEADER */
.rhdr{background:var(--white);border-bottom:1px solid var(--bdr);padding:8px 16px 6px;flex-shrink:0;transition:background .3s}
.rht{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.rh-eye{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.rh-ttl{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.3px}
.rh-acts{display:flex;gap:6px}
.act{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--bdr);background:var(--white);color:var(--body);transition:.12s}
.act:hover{border-color:var(--bdr2);background:var(--bg)}.act.primary{background:var(--a1);border-color:var(--a1);color:#fff}
/* FILTER ROW */
.filter-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 0 2px}
.fsep{width:1px;height:22px;background:var(--bdr);flex-shrink:0}
/* MULTI-SELECT */
.msd{position:relative;display:inline-block}
.msd-btn{display:flex;align-items:center;gap:5px;padding:4px 9px;background:var(--white);border:1.5px solid var(--bdr);border-radius:7px;font-size:11px;font-weight:500;color:var(--body);cursor:pointer;min-width:90px;transition:.12s;user-select:none;white-space:nowrap}
.msd-btn:hover,.msd-btn.open{border-color:var(--a1)}.msd-btn .arrow{margin-left:auto;font-size:9px;color:var(--muted);transition:transform .15s}
.msd-btn.open .arrow{transform:rotate(180deg)}
.msd-count{background:var(--a1);color:#fff;border-radius:10px;padding:1px 5px;font-size:9px;font-weight:700}
.msd-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;box-shadow:var(--sh2);z-index:600;overflow:hidden;display:none}
.msd-panel.open{display:block;animation:ddFade .12s ease}
@keyframes ddFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.msd-search{padding:7px 9px;border-bottom:1px solid var(--bdr)}
.msd-search input{width:100%;border:1px solid var(--bdr);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--ink);background:var(--bg);outline:none}
.msd-search input:focus{border-color:var(--a1)}
.msd-list{max-height:180px;overflow-y:auto;padding:4px 0}
.msd-item{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;transition:.1s;font-size:11.5px;color:var(--body)}
.msd-item:hover{background:var(--bg)}.msd-item input[type=checkbox]{width:13px;height:13px;accent-color:var(--a1);cursor:pointer;flex-shrink:0}
.msd-item.checked{color:var(--ink);font-weight:500}
.msd-footer{padding:5px 8px;border-top:1px solid var(--bdr);display:flex;gap:6px}
.msd-act{flex:1;padding:4px 8px;font-size:11px;font-weight:600;border-radius:6px;cursor:pointer;border:1.5px solid var(--bdr);background:var(--white);color:var(--body);transition:.1s}
.msd-act.apply{background:var(--a1);border-color:var(--a1);color:#fff}
/* PERIOD */
.period-wrap{position:relative;display:inline-block}
.period-btn{display:flex;align-items:center;gap:5px;padding:4px 9px;background:var(--white);border:1.5px solid var(--bdr);border-radius:7px;font-size:11px;font-weight:500;color:var(--body);cursor:pointer;transition:.12s;user-select:none;white-space:nowrap}
.period-btn:hover,.period-btn.open{border-color:var(--a1)}
.period-btn .arrow{font-size:9px;color:var(--muted);transition:transform .15s;margin-left:4px}
.period-btn.open .arrow{transform:rotate(180deg)}
.period-panel{position:absolute;top:calc(100% + 4px);left:0;width:230px;background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;box-shadow:var(--sh2);z-index:600;display:none;overflow:visible}
.period-panel.open{display:block;animation:ddFade .12s ease}
.period-opts{padding:4px 0;border-radius:9px 9px 0 0;overflow:hidden}
.period-opt{display:flex;align-items:center;padding:7px 12px;cursor:pointer;font-size:12px;color:var(--body);transition:.1s}
.period-opt:hover{background:var(--bg)}.period-opt.sel{color:var(--a1);font-weight:600;background:var(--a1l)}
.period-radio{width:12px;height:12px;border:1.5px solid var(--bdr2);border-radius:50%;margin-right:8px;flex-shrink:0;display:inline-block;transition:.12s;vertical-align:middle}
.period-opt.sel .period-radio{border-color:var(--a1);background:var(--a1);box-shadow:inset 0 0 0 3px var(--white)}
.period-sep{height:1px;background:var(--bdr);margin:4px 0}
.date-range-block{padding:10px 12px 12px;border-top:1px solid var(--bdr);display:none;border-radius:0 0 9px 9px;background:var(--white)}
.date-range-block.show{display:block}
.dr-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.dr-inputs{display:flex;flex-direction:column;gap:5px}
.dr-row{display:flex;align-items:center;gap:7px}
.dr-row-lbl{font-size:10px;font-weight:600;color:var(--muted);width:26px;flex-shrink:0}
.dr-inputs input[type=date]{flex:1;padding:4px 7px;border:1.5px solid var(--bdr);border-radius:6px;font-size:11px;color:var(--ink);background:var(--bg);outline:none;min-width:0}
.dr-inputs input[type=date]:focus{border-color:var(--a1)}
.dr-sep{display:none}
.dr-apply{width:100%;margin-top:8px;padding:6px;background:var(--a1);border:none;border-radius:6px;font-size:11px;font-weight:600;color:#fff;cursor:pointer;transition:opacity .12s}
.dr-apply:hover{opacity:.85}
/* IND PILLS */
.ind-grp{display:flex;gap:5px}
.ipill{padding:3px 11px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--bdr);background:var(--white);color:var(--muted);transition:.12s}
.ipill.active{background:var(--a1);border-color:var(--a1);color:#fff}
.ipill:hover:not(.active){border-color:var(--a1);color:var(--a1)}
/* AXIS FILTER */
.axis-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 2px;border-top:1px solid var(--bdr);margin-top:4px}
.axis-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.axis-sel:focus{border-color:var(--a1)}
/* REPORT BODY */
.rbody{flex:1;overflow-y:auto;padding:14px 16px 24px}
/* KPI GRID */
.kgrid{display:grid;gap:8px;margin-bottom:12px}
.kgrid.c4{grid-template-columns:repeat(4,1fr)}.kgrid.c5{grid-template-columns:repeat(5,1fr)}
.kgrid.c6{grid-template-columns:repeat(6,1fr)}.kgrid.c7{grid-template-columns:repeat(7,1fr)}
.kgrid.c8{grid-template-columns:repeat(8,1fr)}.kgrid.c3{grid-template-columns:repeat(3,1fr)}.kgrid.c9{grid-template-columns:repeat(9,1fr)}.kgrid.c10{grid-template-columns:repeat(10,1fr)}
.kcard{background:var(--kpi-bg);border:1px solid var(--bdr);border-radius:var(--rad);padding:11px 13px 9px;box-shadow:var(--sh);transition:.2s;cursor:pointer;position:relative;overflow:hidden;min-height:90px;display:flex;flex-direction:column;justify-content:flex-start}
.kcard:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.kcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--rad) var(--rad)}
.kcard.c1::after{background:var(--a2)}.kcard.c2::after{background:var(--a1)}.kcard.c3::after{background:var(--a4)}
.kcard.c4::after{background:var(--a3)}.kcard.c5::after{background:var(--r)}.kcard.c6::after{background:var(--a5)}
.kcard.c7::after{background:#0891b2}.kcard.c8::after{background:var(--r)}
.kc-drill{position:absolute;top:6px;right:8px;font-size:9px;font-weight:700;color:var(--faint);opacity:0;transition:.12s;display:flex;align-items:center;gap:3px}
.kcard:hover .kc-drill{opacity:1;color:var(--a1)}
.kc-eye{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color: #53493d;margin-bottom:5px}
.kc-val{font-size:20px;line-height:1.1;letter-spacing:-0.3px;color:var(--kpi-fc);margin-bottom:3px;font-weight:700;transition:all .4s;word-break:break-word}
.kcard.c5 .kc-val{color:var(--r)}.kcard.c4 .kc-val{color:var(--a3)}
.kc-sub{font-size:10.5px;color:var(--muted)}
.kc-delta{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;margin-top:4px;padding:2px 6px;border-radius:10px}
.kc-delta.up{background:var(--a3l);color:var(--a3)}.kc-delta.dn{background:var(--rl);color:var(--r)}.kc-delta.nt{background:var(--bg2);color:var(--muted)}
@keyframes numFlash{0%{opacity:.3;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
.kc-val.upd{animation:numFlash .4s ease}
/* CARDS */
.card{background:var(--chart-bg);border:1px solid var(--bdr);border-radius:var(--rad);box-shadow:var(--sh);overflow:hidden;position:relative;margin-bottom:10px;transition:background .3s}
.ch{padding:10px 14px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-wrap:wrap;gap:5px}
.ct{font-size:13px;font-weight:600;color:var(--ink)}.cs{font-size:10px;color:var(--muted);margin-top:2px}
.cb{padding:12px 14px;position:relative}.cb canvas{max-height:220px}
/* PER-CHART TOOLBAR */
.chart-fmt-bar{display:flex;flex-direction:column;gap:4px;padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--bdr)}
.cfmt-row1,.cfmt-row2{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.cfmt-grp{display:flex;border:1.5px solid var(--bdr);border-radius:7px;overflow:hidden;flex-shrink:0}
.cfmt-btn{padding:3px 8px;font-size:10.5px;font-weight:500;background:var(--white);border:none;border-right:1px solid var(--bdr);color:var(--muted);cursor:pointer;transition:.12s;white-space:nowrap}
.cfmt-btn:last-child{border-right:none}
.cfmt-btn.active{background:var(--a1);color:#fff;font-weight:600}
.cfmt-btn:hover:not(.active){background:var(--bg2)}
.cfmt-color{width:24px;height:22px;border:1px solid var(--bdr);border-radius:5px;cursor:pointer;padding:1px;flex-shrink:0}
.cfmt-sep{width:1px;height:18px;background:var(--bdr);flex-shrink:0;margin:0 2px}
.cfmt-lbl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0}
.axis-sel{appearance:none;background:var(--white);border:1.5px solid var(--bdr);border-radius:6px;padding:3px 20px 3px 8px;font-size:11px;color:var(--body);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239c948a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;outline:none;flex-shrink:0;min-width:110px;max-width:160px}
.axis-sel:focus{border-color:var(--a1)}
/* GRID HELPERS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:0}
.g13{display:grid;grid-template-columns:1fr 280px;gap:10px;margin-bottom:0}
/* TABLE */
.tbl{overflow-x:auto;width:100%}
.m-detail-table{overflow-x:auto;width:100%}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:var(--bg);border-bottom:2px solid var(--bdr)}
th{padding:7px 9px;text-align:left;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none;vertical-align:middle;transition:color .12s,background .12s}
th:hover{color:var(--ink);background:var(--bg2)}
th::after{content:' ⇅';font-size:8px;opacity:.25}
th[data-sort=asc]::after{content:' ▲';opacity:1;color:var(--a1)}
th[data-sort=desc]::after{content:' ▼';opacity:1;color:var(--a1)}
td{padding:6px 9px;border-bottom:1px solid var(--bg2);color:var(--body);white-space:nowrap;vertical-align:middle;text-align:left}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}
td.tn{font-size:11px;text-align:right}
.bdg{display:inline-flex;align-items:center;padding:2px 6px;border-radius:10px;font-size:9px;font-weight:700;letter-spacing:.3px;vertical-align:middle}
.bdg.ok{background:var(--a3l);color:var(--a3)}.bdg.warn{background:var(--a4l);color:var(--a4)}
.bdg.fail{background:var(--rl);color:var(--r)}.bdg.info{background:var(--a2l);color:var(--a2)}
.bdg.exp{background:var(--rl);color:var(--r)}.bdg.near{background:var(--a4l);color:var(--a4)}.bdg.safe{background:var(--a3l);color:var(--a3)}
tr.expired td{background:rgba(220,38,38,.05)}tr.expiring td{background:rgba(184,146,30,.05)}
/* PROGRESS */
.ptrack{height:6px;background:var(--bg2);border-radius:6px;overflow:hidden;margin:3px 0}
.pfill{height:100%;border-radius:6px;transition:width .6s ease}
/* SHIFT BARS */
.sh-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.sh-lbl{font-size:11px;font-weight:600;color:var(--body);min-width:60px}
.sh-track{flex:1;height:20px;background:var(--bg2);border-radius:5px;overflow:hidden;display:flex;gap:1px}
.sh-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:500;color:#fff;border-radius:3px}
.sh-nums{font-size:10px;color:var(--muted);min-width:70px;text-align:right}
/* WIDGETS */
.widget-gauge{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px}
.gauge-svg{width:140px;height:80px}
.gauge-val{font-size:22px;font-weight:700;color:var(--ink);text-align:center;margin-top:-8px}
.gauge-lbl{font-size:10px;color:var(--muted);text-align:center}
.sparkline-wrap{padding:6px 14px 10px}
.spark-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.spark-lbl{font-size:11px;font-weight:600;color:var(--body)}
.spark-val{font-size:13px;font-weight:700;color:var(--ink)}
.heatmap-grid{display:grid;gap:3px;padding:10px 14px}
.hm-cell{border-radius:4px;height:28px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:rgba(255,255,255,.9);cursor:pointer;transition:.15s}
.hm-cell:hover{transform:scale(1.05);box-shadow:var(--sh)}
.bullet-bar{padding:8px 14px}
.bb-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bb-lbl{font-size:11px;color:var(--body);min-width:80px}
.bb-track{flex:1;height:16px;background:var(--bg2);border-radius:4px;position:relative;overflow:hidden}
.bb-target{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);z-index:2}
.bb-actual{height:100%;border-radius:4px;transition:width .6s}
.bb-val{font-size:11px;font-weight:600;color:var(--ink);min-width:40px;text-align:right}
/* DRILLDOWN MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:900;display:flex;align-items:center;justify-content:center;animation:bgFade .2s ease}
@keyframes bgFade{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(920px,96vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modalUp .22s ease}
@keyframes modalUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.m-hdr{padding:14px 18px 10px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.m-eye{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.m-ttl{font-size:17px;font-weight:700;color:var(--ink)}
.m-close{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--bdr);background:var(--white);cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.12s}
.m-close:hover{background:var(--bg);color:var(--ink)}
.m-body{overflow-y:auto;padding:14px 18px 18px;flex:1}
.m-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:2px solid var(--bdr);padding-bottom:0}
.m-tab{padding:6px 13px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.12s}
.m-tab.active{color:var(--a1);border-bottom-color:var(--a1);font-weight:600}
.m-tab-pane{display:none}.m-tab-pane.active{display:block}
.m-kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.m-kcard{background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:9px 11px}
.m-kc-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.m-kc-val{font-size:20px;font-weight:700;color:var(--ink)}
.m-kc-sub{font-size:10px;color:var(--muted);margin-top:2px}
.m-chart{margin-bottom:12px}.m-chart canvas{max-height:180px}
.m-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
/* FOOTER */
.afooter{background:var(--footer-bg);border-top:1px solid var(--bdr);padding:8px 16px;display:flex;align-items:center;gap:7px;flex-shrink:0;transition:background .3s}
.af-r{margin-left:auto;font-size:10px;color:var(--muted)}
/* ANIM */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kcard{animation:fadeUp .3s ease both}
.kcard:nth-child(1){animation-delay:.03s}.kcard:nth-child(2){animation-delay:.06s}
.kcard:nth-child(3){animation-delay:.09s}.kcard:nth-child(4){animation-delay:.12s}
.kcard:nth-child(5){animation-delay:.15s}.kcard:nth-child(6){animation-delay:.18s}
.kcard:nth-child(7){animation-delay:.21s}.kcard:nth-child(8){animation-delay:.24s}
@keyframes rFade{from{opacity:0}to{opacity:1}}
.rbody{animation:rFade .22s ease}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px}