:root{
  color-scheme:light;
  --page:#f1f0ec; --surface:#fcfcfb; --surface-2:#f4f3ef; --surface-3:#eceae4;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#7a7873; --grid:#e1e0d9; --axis:#c3c2b7;
  --border:rgba(11,11,11,.10); --border-strong:rgba(11,11,11,.18);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --prod:#4a3aa7; --total:#6b6a66;
  --div-pos:#2a78d6; --div-neg:#e34948;
  --good:#0ca30c; --good-text:#006300; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b; --crit-text:#b42323;
  --accent:#c8102e; --accent-soft:rgba(200,16,46,.08); --brand:#1f3fc4;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0d0d0d; --surface:#1a1a19; --surface-2:#222220; --surface-3:#2a2a28;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#9a9890; --grid:#2c2c2a; --axis:#383835;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --prod:#9085e9; --total:#a9a89f;
    --div-pos:#3987e5; --div-neg:#e66767; --good-text:#0ca30c; --crit-text:#e66767;
    --accent:#ff4d5e; --accent-soft:rgba(255,77,94,.12); --brand:#7d93ff; --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#222220; --surface-3:#2a2a28;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#9a9890; --grid:#2c2c2a; --axis:#383835;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --prod:#9085e9; --total:#a9a89f;
  --div-pos:#3987e5; --div-neg:#e66767; --good-text:#0ca30c; --crit-text:#e66767;
  --accent:#ff4d5e; --accent-soft:rgba(255,77,94,.12); --brand:#7d93ff; --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
.tabnum{font-variant-numeric:tabular-nums}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto}
.logo{background:#fff;border-radius:12px;padding:8px 10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.logo img{width:100%;max-width:190px;height:auto;display:block}
.brandtxt{font-size:11.5px;color:var(--muted);text-align:center;margin:6px 0 12px;letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{white-space:nowrap;display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--ink-2);text-align:left;font-size:13.5px;position:relative}
.nav button svg{width:18px;height:18px;flex:none;opacity:.85}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button.on{background:var(--accent-soft);color:var(--ink);font-weight:600}
.nav button.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav kbd{margin-left:auto;font:11px system-ui;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 5px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;font-size:13px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.primary:hover{opacity:.88;background:var(--ink)}
.btn.sheet{background:#188038;border-color:#188038;color:#fff}
.btn.sheet:hover{background:#137333}
.btn.ai{background:linear-gradient(135deg,#4a3aa7,#2a78d6);border:0;color:#fff}
.btn.icon{padding:8px}
.main{min-width:0;padding:16px 26px 60px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.top h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.2px}
.top .sub{color:var(--muted);font-size:12.5px}
.grow{flex:1}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);padding:6px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}
.dot.off{background:var(--warn);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(12,163,12,.55)}70%{box-shadow:0 0 0 8px rgba(12,163,12,0)}100%{box-shadow:0 0 0 0 rgba(12,163,12,0)}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.filters label{font-size:12.5px;color:var(--ink-2);font-weight:600}
.sel,.inp{padding:7px 10px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font-size:13px}
.inp{min-width:200px}
.note-s{font-size:12.5px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-3);gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.grid{display:grid;gap:14px}
.g-kpi{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-21{grid-template-columns:2fr 1fr}
.g-12{grid-template-columns:1fr 2fr}
.mt{margin-top:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);min-width:0}
.card h3{margin:0;font-size:14px;font-weight:620}
.ch{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ch .desc{font-size:12px;color:var(--muted);margin-top:2px}
.chart{position:relative;height:280px}
.chart.tall{height:320px}
.chart.short{height:220px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend i.line{height:3px;border-radius:2px;width:14px;vertical-align:3px}
.legend i.dash{height:0;border-top:2px dashed;width:14px;vertical-align:3px;border-radius:0}
.kpi{display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.kpi .lab{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.kpi .lab i{width:8px;height:8px;border-radius:2px}
.kpi .val{white-space:nowrap;font-size:clamp(19px,1.65vw,25px);font-weight:680;letter-spacing:-.4px;line-height:1.15;margin-top:2px}
.kpi .val small{font-size:13px;font-weight:550;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.kpi .meta{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi .ytd{font-size:12px;color:var(--ink-2);padding-top:6px;margin-top:4px;border-top:1px dashed var(--border-strong)}
.kpi .ytd b{font-weight:650;color:var(--ink)}
.kpi .spark{height:34px;margin-top:6px}
.meter{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.meter span{display:block;height:100%;border-radius:4px}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--surface-2)}
.delta.up{color:var(--good-text)} .delta.down{color:var(--crit-text)} .delta.flat{color:var(--ink-2)}
.pcard{border-top:3px solid var(--c)}
.pcard .pname{display:flex;align-items:center;justify-content:space-between}
.pcard .pname b{font-size:15px}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:12px}
.pstats div span{display:block;font-size:11.5px;color:var(--muted)}
.pstats div b{font-size:15px;font-weight:620}
.bar100{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.bar100 span{display:block;height:100%}
.mixrow{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;margin:12px 0}
.mixrow .t{font-size:12px;color:var(--ink-2)}
.ins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ins li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.ins .ic{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2)}
.ins .ic svg{width:14px;height:14px}
.ins b{font-weight:620}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;padding:2px 8px;border-radius:999px;border:1px solid var(--border-strong);white-space:nowrap}
.tag .sw{width:8px;height:8px;border-radius:50%}
.sw-sq{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.tbl-wrap{overflow:auto;border-radius:10px;border:1px solid var(--border);max-height:68vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
th,td{padding:8px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--grid)}
th:first-child,td:first-child{text-align:left}
.tl{text-align:left}
thead th{position:sticky;top:0;background:var(--surface-2);font-weight:600;color:var(--ink-2);z-index:2;cursor:pointer;user-select:none}
tbody tr{background:var(--surface)}
tbody tr:hover{background:var(--surface-2)}
tbody tr.click{cursor:pointer}
tbody tr.zero td{color:var(--muted)}
tfoot td{position:sticky;bottom:0;background:var(--surface-3);font-weight:650}
td.rem{text-align:left;white-space:normal;min-width:200px;color:var(--ink-2)}
td .db{display:inline-block;height:6px;border-radius:3px;background:var(--total);opacity:.45;margin-right:8px;vertical-align:middle}
.simple thead th{cursor:default;position:static}
.compact th,.compact td{padding:7px 6px}
.drawer .kpi .val{font-size:20px}
.top>div:first-child{min-width:0}
.filters .pill{white-space:normal}
.daynav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dayhero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dayhero .d{font-size:24px;font-weight:680;letter-spacing:-.3px}
.dayhero .w{color:var(--muted)}
.cmp{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-size:13px}
.note svg{flex:none;width:16px;height:16px;margin-top:2px}
.gauge{display:flex;gap:18px;align-items:center}
.tank{width:84px;height:150px;border:2px solid var(--axis);border-radius:12px 12px 16px 16px;position:relative;overflow:hidden;background:var(--surface-2);flex:none}
.tank .fill{position:absolute;left:0;right:0;bottom:0;background:var(--total);opacity:.75;transition:height .8s}
.tank .lvl{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ink)}
.page{display:none}
.page.on{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--page);z-index:50}
.loading .box{text-align:center;color:var(--ink-2)}
.loading .ring{width:42px;height:42px;border-radius:50%;border:3px solid var(--grid);border-top-color:var(--accent);margin:0 auto 14px;animation:spin 1s linear infinite}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:9px 16px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.toast.show{opacity:1}
.tvbar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:70;width:0}
body.tv .side,body.tv .filters,body.tv .top .tools,body.tv .fab{display:none}
body.tv .app{grid-template-columns:1fr}
.tvexit{display:none} body.tv .tvexit{display:inline-flex}
.mobnav{display:none}
/* drawer (customer detail + AI) */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(760px,100vw);background:var(--page);border-left:1px solid var(--border);z-index:85;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.drawer .dh h2{margin:0;font-size:17px}
.drawer .db2{padding:16px 18px;overflow-y:auto;flex:1}
.ai .db2{display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.msg.u{align-self:flex-end;background:var(--ink);color:var(--surface);border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.a table{margin:6px 0}
.aiform{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--border);background:var(--surface)}
.aiform input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.chips button:hover{background:var(--surface-2)}
.fab{position:fixed;right:22px;bottom:22px;z-index:60;box-shadow:0 6px 20px rgba(42,120,214,.35);border-radius:999px;padding:12px 18px;font-weight:600}
@media (max-width:1280px){.g-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.g-21,.g-12{grid-template-columns:1fr}.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}.side{display:none}
  .mobnav{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);scrollbar-width:none}
  .mobnav button{flex:none;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer;color:var(--ink-2)}
  .mobnav button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .main{padding:14px 16px 70px}
  .g-3,.g-2{grid-template-columns:1fr}
  .g-kpi,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart{height:240px}.chart.tall{height:260px}
  .inp{min-width:0;flex:1}
}
@media (max-width:520px){.g-4{grid-template-columns:1fr 1fr}.top h1{font-size:18px}}
@media print{.side,.filters,.top .tools,.mobnav,.fab{display:none!important}.app{grid-template-columns:1fr}.card{break-inside:avoid}}


/* ── v3 additions ── */
.clickable{cursor:pointer;transition:border-color .15s, transform .15s, box-shadow .15s}
.clickable:hover{border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,120,214,.10)}
.k2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.k2 > div{border-radius:10px;padding:8px 10px;background:var(--surface-2);min-width:0;cursor:pointer;border:1px solid transparent}
.k2 > div:hover{border-color:var(--brand)}
.k2 .cap{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.k2 .cap .go{opacity:0;color:var(--brand);font-size:11px}
.k2 > div:hover .go{opacity:1}
.k2 .v{font-size:clamp(17px,1.45vw,22px);font-weight:700;letter-spacing:-.3px;white-space:nowrap;line-height:1.2;margin-top:2px}
.k2 .v small{font-size:12px;font-weight:550;color:var(--ink-2);margin-left:2px}
.k2 .s{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kpi2 .lab{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.kpi2 .lab i{width:8px;height:8px;border-radius:2px}
.hero{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;margin-bottom:14px;color:#fff;
  background:linear-gradient(120deg,#1f3fc4 0%,#3a2a8f 55%,#c8102e 130%);box-shadow:var(--shadow);flex-wrap:wrap}
.hero .h1{font-size:15px;opacity:.85}
.hero .h2{font-size:clamp(15px,1.5vw,19px);font-weight:650;line-height:1.35}
.hero .h2 b{font-weight:800}
.hero .grow{flex:1;min-width:240px}
.hero .chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:6px 11px;border-radius:999px;font-size:12.5px;white-space:nowrap}
.top10{display:flex;flex-direction:column}
.top10 .row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--grid);cursor:pointer;border-radius:6px}
.top10 .row:hover{background:var(--surface-2)}
.top10 .rk{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center}
.top10 .nm{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top10 .bar{height:4px;border-radius:2px;margin-top:3px;opacity:.85}
.top10 .vv{text-align:right;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.top10 .vv b{display:block;font-size:12.5px}
.top10 .vv span{color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .hd{font-size:10.5px;color:var(--muted);text-align:center;font-weight:600}
.cal .c{aspect-ratio:1.25;border-radius:7px;padding:4px 5px;font-size:10.5px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:1px solid var(--border);min-width:0}
.cal .c.e{visibility:hidden}
.cal .c.nod{background:var(--surface-2);color:var(--muted);cursor:default}
.cal .c b{font-size:11.5px}
.cal .c:hover:not(.nod){outline:2px solid var(--brand)}
.calleg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:8px}
.calleg span{width:18px;height:8px;border-radius:2px;display:inline-block}
.seg2{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-3);gap:2px}
.seg2 button{border:0;background:none;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.seg2 button.on{background:var(--ink);color:var(--surface)}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs .cr{display:inline-flex;gap:6px;align-items:center;padding:4px 6px 4px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-strong);font-size:12px}
.crumbs .cr button{border:0;background:var(--surface-3);border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;line-height:18px;padding:0}
.seg-sm{display:inline-flex;flex-wrap:wrap;gap:4px}
.seg-sm button{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.seg-sm button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.abc{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:800;color:#fff}
.abc.A{background:#1c5cab}.abc.B{background:#5598e7}.abc.C{background:#9ec5f4;color:#0d366b}
.drawer.wide{width:min(980px,100vw)}
.thinking::after{content:'';display:inline-block;width:1em;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.msg.a h4{margin:6px 0 4px;font-size:13.5px}
.msg.a ol,.msg.a ul{margin:4px 0;padding-left:20px}
.hint{font-size:11px;color:var(--muted)}
td.num{font-variant-numeric:tabular-nums}
.pcard{cursor:pointer}

.compact{font-size:11.5px}
.compact th,.compact td{padding:6px 4px}

/* score cards inside the blue banner (same gradient) */
.hero{display:block}
.hero .sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.hero .sc{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 13px;min-width:0;cursor:pointer;transition:background .15s}
.hero .sc:hover{background:rgba(255,255,255,.2)}
.hero .sc > span{display:block;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .sc b{display:block;font-size:clamp(18px,1.55vw,25px);font-weight:800;letter-spacing:-.4px;line-height:1.25;white-space:nowrap}
.hero .sc b small{font-size:12.5px;font-weight:600;opacity:.85;margin-left:4px;letter-spacing:0}
.hero .sc b .up{color:#b8f5c9}.hero .sc b .dn{color:#ffc4c4}
.hero .sc em{display:block;font-style:normal;font-size:11.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .sc b small.pre{margin:0 4px 0 0}

/* score cards – a little more attractive (same blue → purple → red as the banner) */
.kpi2{position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.kpi2::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#1f3fc4 0%,#3a2a8f 60%,#c8102e 120%)}
.kpi2:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,63,196,.18)}
.kpi2 .lab{gap:9px}
.kpi2 .kic{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(135deg,#1f3fc4,#3a2a8f);box-shadow:0 2px 8px rgba(31,63,196,.35)}
.kpi2 .kic svg{width:15px;height:15px}
.k2 > div:first-child{background:linear-gradient(135deg,color-mix(in srgb,#1f3fc4 20%,transparent),color-mix(in srgb,#3a2a8f 12%,transparent));
  border-color:color-mix(in srgb,#7d93ff 28%,transparent)}
.k2 > div:first-child .cap{color:var(--brand)}
.k2 > div:first-child:hover,.k2 > div:hover{border-color:var(--brand)}

/* drill-down Back button – easy to see */
.btn.back{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);border:0;color:#fff;font-weight:650;font-size:13.5px;padding:9px 16px 9px 12px;border-radius:10px;gap:6px;box-shadow:0 4px 14px rgba(31,63,196,.35);align-self:center}
.btn.back:hover{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);filter:brightness(1.15)}
.btn.back svg{width:17px;height:17px}

/* global search */
.gsearch{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:440px;margin-left:auto;padding:0 10px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.gsearch:focus-within{border-color:#3a5be0;box-shadow:0 0 0 3px rgba(31,63,196,.22)}
.gsearch > svg{width:16px;height:16px;color:var(--muted);flex:none}
.gsearch input{flex:1;min-width:0;border:0;outline:0;background:none;padding:9px 0;font-size:13.5px;color:var(--ink)}
.gsearch kbd{font:11px system-ui;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 6px}
.gsearch:focus-within kbd{display:none}
.gs-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;width:max(100%,480px);max-height:min(70vh,560px);overflow-y:auto;z-index:75;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:6px}
.gs-pop.on{display:block}
.gs-h{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.gs-h span{font-weight:600;text-transform:none;letter-spacing:0}
.gs-i{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--ink)}
.gs-i:hover,.gs-i.act{background:linear-gradient(135deg,rgba(31,63,196,.16),rgba(58,42,143,.10))}
.gs-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:13px;color:#fff;background:linear-gradient(135deg,#1f3fc4,#3a2a8f)}
.gs-ic.dist{background:linear-gradient(135deg,#1baf7a,#127a55)}.gs-ic.sp{background:linear-gradient(135deg,#eb6834,#b8441a)}
.gs-t{min-width:0}.gs-t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-t small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-v{text-align:right;font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.gs-v em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
.gs-none{padding:14px;color:var(--muted);font-size:13px}
@media (max-width:1500px){#filters > .hint{display:none}}
@media (max-width:900px){.gsearch{flex-basis:100%;max-width:none;margin-left:0}.gs-pop{width:100%}}

/* ── multi-select: selection bar, tick boxes, compare ── */
.selbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 16px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(120deg,rgba(31,63,196,.20),rgba(58,42,143,.16) 60%,rgba(200,16,46,.12));border:1px solid rgba(125,147,255,.35)}
.selbar .sb-l{display:flex;flex-direction:column;gap:1px;min-width:150px}
.selbar .sb-l b{font-size:13px}
.selbar .sb-l span{font-size:12px;color:var(--ink-2)}
.selbar .sb-l .sb-n{color:var(--muted);font-size:11.5px}
.selbar .sb-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.selbar .sb-r{display:flex;gap:6px}
.selbar .sb-r .btn{padding:6px 11px;font-size:12.5px}
.schip{display:inline-flex;align-items:center;gap:7px;max-width:320px;padding:4px 5px 4px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);font-size:12.5px;font-weight:550}
.schip i{width:9px;height:9px;border-radius:50%;flex:none;background:linear-gradient(135deg,#1f3fc4,#3a2a8f)}
.schip.dist i{background:linear-gradient(135deg,#1baf7a,#127a55)}.schip.sp i{background:linear-gradient(135deg,#eb6834,#b8441a)}
.schip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schip button{border:0;background:var(--surface-3);color:var(--ink-2);border-radius:50%;width:18px;height:18px;line-height:18px;padding:0;font-size:10px;cursor:pointer;flex:none}
.schip button:hover{background:var(--crit);color:#fff}
.selnote{display:none;align-items:center;gap:8px;margin-bottom:14px;padding:9px 13px;border-radius:10px;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px dashed var(--border-strong)}
body.selon .selnote{display:flex}
body.selon .prodleg{display:none}
/* search: tick boxes */
.gs-h button{border:0;background:none;color:#5b7cf0;font-size:11.5px;font-weight:650;cursor:pointer;text-transform:none;letter-spacing:0;padding:0}
.gs-h button:hover{text-decoration:underline}
.gs-i{grid-template-columns:22px minmax(0,1fr) auto 26px}
.gs-ck{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;border:2px solid #3a5be0;background:transparent}
.gs-ck.dist{border-color:#1baf7a}.gs-ck.sp{border-color:#eb6834}
.gs-i.on .gs-ck{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);border-color:transparent}
.gs-i.on .gs-ck.dist{background:linear-gradient(135deg,#1baf7a,#127a55)}.gs-i.on .gs-ck.sp{background:linear-gradient(135deg,#eb6834,#b8441a)}
.gs-i.on{background:rgba(31,63,196,.10)}
.gs-go{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:13px;padding:0}
.gs-go:hover{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);color:#fff;border-color:transparent}
.gs-f{position:sticky;bottom:-6px;display:flex;align-items:center;gap:8px;margin:6px -6px -6px;padding:9px 12px;border-top:1px solid var(--border);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.gs-f span{flex:1}
.gs-f.hint{font-size:11.5px;color:var(--muted)}
.gs-f .btn{padding:5px 12px;font-size:12.5px}
.btn.g{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);border:0;color:#fff;font-weight:600}
.btn.g:hover{background:linear-gradient(135deg,#1f3fc4,#3a2a8f);filter:brightness(1.15)}
/* tick boxes in tables */
th.ck,td.ck{width:34px;text-align:center !important;padding-left:6px !important;padding-right:4px !important}
td.ck{cursor:pointer}
th.ck input,td.ck input{width:16px;height:16px;accent-color:#3a5be0;cursor:pointer;vertical-align:middle}
tbody tr.picked{background:rgba(31,63,196,.12) !important}
tbody tr.picked:hover{background:rgba(31,63,196,.18) !important}
.selact{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.selact b{font-size:12.5px;margin-right:2px}
.selact .btn{padding:6px 11px;font-size:12.5px}
/* drill-down tools */
.dr-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dr-q{display:flex;align-items:center;gap:7px;flex:1 1 240px;max-width:380px;padding:0 10px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface)}
.dr-q:focus-within{border-color:#3a5be0;box-shadow:0 0 0 3px rgba(31,63,196,.2)}
.dr-q svg{width:15px;height:15px;color:var(--muted);flex:none}
.dr-q input{flex:1;min-width:0;border:0;outline:0;background:none;padding:8px 0;font-size:13px;color:var(--ink)}
.dr-tools .selact{margin-left:auto}
.crumbs .cr.sel{background:rgba(31,63,196,.16);border-color:rgba(125,147,255,.4)}
.crumbs .cr.note{color:var(--muted);border-style:dashed}
.cmp-sw{display:inline-block;width:10px;height:10px;border-radius:3px}
tr.tot td{background:var(--surface-2);border-top:1px solid var(--border-strong)}
.selbar .sb-warn{flex-basis:100%;font-size:12.5px;color:#ffb4a8;background:rgba(208,59,59,.14);border:1px solid rgba(208,59,59,.35);border-radius:8px;padding:7px 10px}
:root[data-theme="light"] .selbar .sb-warn{color:#9b2a1e}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .selbar .sb-warn{color:#9b2a1e}}
.dr-x{border:0;background:var(--surface-3);color:var(--ink-2);border-radius:50%;width:20px;height:20px;line-height:20px;padding:0;font-size:11px;cursor:pointer;flex:none}
.dr-x:hover{background:var(--crit);color:#fff}
#drQn a{color:#5b7cf0;font-weight:600}
.crumbs .cr.sel button:hover{background:var(--crit);color:#fff}

/* ═════ Sri Lanka district map ═════ one blue ramp (light→dark = less→more; flipped in dark mode), red↔blue for growth */
:root{--m0:#efede8;--mh:#cdcac1;--m1:#cde2fb;--m2:#9ec5f4;--m3:#6da7ec;--m4:#3987e5;--m5:#256abf;--m6:#184f95;
  --dv0:#d03b3b;--dv1:#f2aba8;--dv2:#f0efec;--dv3:#9ec5f4;--dv4:#2a78d6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--m0:#1e1e1d;--mh:#3b3b38;--m1:#0d366b;--m2:#184f95;--m3:#256abf;--m4:#3987e5;--m5:#6da7ec;--m6:#9ec5f4;
  --dv0:#e66767;--dv1:#7d3534;--dv2:#383835;--dv3:#184f95;--dv4:#5598e7}}
:root[data-theme="dark"]{--m0:#1e1e1d;--mh:#3b3b38;--m1:#0d366b;--m2:#184f95;--m3:#256abf;--m4:#3987e5;--m5:#6da7ec;--m6:#9ec5f4;
  --dv0:#e66767;--dv1:#7d3534;--dv2:#383835;--dv3:#184f95;--dv4:#5598e7}
.slm{display:grid;grid-template-columns:minmax(250px,370px) minmax(0,1fr);gap:22px;align-items:start}
.slm-map{position:relative;min-width:0}
.slm-map svg{display:block;width:100%;height:auto;max-height:640px;margin:0 auto;overflow:visible}
.slm-map g.ds path{stroke:var(--surface);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:filter .12s}
.slm-map g.ds path.has{cursor:pointer}
.slm-map g.ds path.has:hover{filter:brightness(1.06) saturate(1.08)}
.slm-map g.ds path:focus{outline:none}
.slm-map .hl{fill:none;stroke:var(--ink);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.slm-map .selo{fill:none;stroke:var(--ink);stroke-width:2.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:6 3;pointer-events:none}
.slm-map g.lb text{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;fill:var(--ink);pointer-events:none}
.slm-map g.lb .n{font-size:13.5px;font-weight:600;fill:var(--ink-2)}
.slm-map g.lb .v{font-size:14.5px;font-weight:750}
.slm-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:11.5px;color:var(--ink-2);margin-top:10px}
.slm-leg .ttl{flex-basis:100%;text-align:center;font-weight:600;color:var(--ink);font-size:12px}
.slm-leg i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.slm-leg i.nos{background:repeating-linear-gradient(45deg,var(--m0) 0 3px,var(--mh) 3px 5px);outline:1px solid var(--border)}
.slm-side{min-width:0;display:flex;flex-direction:column;gap:10px}
.slm-tools{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.slm-head{display:flex;flex-wrap:wrap;gap:6px}
.slm-head span{font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.slm-head b{color:var(--ink)}
.slm-list{max-height:520px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.slm-t{width:100%;border-collapse:collapse;font-size:12.5px}
.slm-t td{padding:7px 8px;border-bottom:1px solid var(--grid);text-align:right;white-space:nowrap;vertical-align:middle}
.slm-t tr:last-child td{border-bottom:0}
.slm-t tr.click{cursor:pointer}
.slm-t tr.click:hover td{background:var(--surface-2)}
.slm-t tr.picked td{background:rgba(58,91,224,.08)}
.slm-t td.rk{color:var(--muted);width:22px;font-size:11.5px}
.slm-t td.nm{text-align:left;width:100%;white-space:normal}
.slm-t td.nm b{font-weight:600}
.slm-t td.nm small{margin-left:6px;color:var(--muted);font-size:11px}
.slm-t .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px;background:repeating-linear-gradient(45deg,var(--m0) 0 3px,var(--mh) 3px 5px)}
.slm-t .bar{height:5px;border-radius:3px;background:var(--surface-3);margin-top:5px;overflow:hidden}
.slm-t .bar i{display:block;height:100%;border-radius:3px;background:var(--s1)}
.slm-t td.v b{display:block;font-weight:650;color:var(--ink)}
.slm-t td.v span{display:block;font-size:11px;color:var(--muted)}
.slm-t td.sh{color:var(--ink-2);font-size:12px}
.slm-t td.sh .delta{display:flex;justify-content:flex-end;margin-top:3px;background:none;padding:0}
.slm-t tr.unk td,.slm-t tr.zero td{color:var(--muted)}
.slm-t tr.zero td.nm b,.slm-t tr.zero td.v b{color:var(--muted);font-weight:500}
.slm-t tr.unk td.nm b{font-weight:500;font-style:italic}
.slm-t td.ck{width:30px}
.slm-t td.ck input{width:15px;height:15px;accent-color:#3a5be0;cursor:pointer}
.slm-foot{font-size:11.5px;color:var(--muted);line-height:1.5}
.slm-attr{font-size:10.5px;color:var(--muted);opacity:.8}
.slm.compact{grid-template-columns:minmax(220px,330px) minmax(0,1fr)}
.slm.compact .slm-map svg{max-height:540px}
.sltip{position:fixed;z-index:300;pointer-events:none;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;padding:11px 13px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:12.5px;color:var(--ink-2);width:290px;opacity:0;transition:opacity .1s;left:-999px;top:-999px}
.sltip.on{opacity:1}
.sltip .tt-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.sltip .tt-h b{font-size:14px;color:var(--ink)}
.sltip .tt-h span{font-size:11px;color:var(--muted)}
.sltip .tt-g{display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.sltip .tt-g b{text-align:right;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.sltip .tt-g em{font-style:normal;font-weight:400;color:var(--muted)}
.sltip .tt-s{margin-top:8px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.sltip ul{list-style:none;margin:3px 0 0;padding:0}
.sltip li{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.sltip li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sltip li b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sltip .tt-a{margin-top:7px;font-size:11px;color:var(--muted)}
.sltip .tt-f{margin-top:7px;padding-top:6px;border-top:1px solid var(--grid);font-size:11px;color:var(--muted)}
@media (max-width:900px){.slm,.slm.compact{grid-template-columns:1fr}.slm-map svg{max-height:540px}.slm-list{max-height:none}}
@media (max-width:560px){.slm-t td{padding:7px 5px}.slm-t td.rk,.slm-t td.nm small{display:none}.slm-t td.ck{width:24px}.slm-t td.sh{font-size:11px}.slm-tools .seg-sm button{padding:4px 9px}}
@media (hover:none){.sltip .tt-f{display:none}}
/* map – product switch, price bars, tooltip product table */
.slm-prod button{display:inline-flex;align-items:center;gap:6px}
.slm-prod i.pd{display:inline-block;width:9px;height:9px;border-radius:2px}
.slm-prod button.on i.pd{box-shadow:0 0 0 1.5px var(--surface)}
.slm-note{font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.slm-t .bar.dvb{position:relative;background:var(--surface-3)}
.slm-t .bar.dvb::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--ink-2);opacity:.5}
.slm-t .bar.dvb i{position:absolute;top:0;bottom:0;border-radius:0}
.slm-t td.sh .delta.flat{color:var(--ink-2)}
.sltip{width:330px}
.sltip table.tt-p{width:100%;border-collapse:collapse;margin-top:3px;font-size:12px}
.sltip table.tt-p td{padding:2px 0;border:0;text-align:right;white-space:nowrap}
.sltip table.tt-p td:first-child{text-align:left}
.sltip table.tt-p td:nth-child(2){color:var(--muted);padding:2px 10px}
.sltip table.tt-p i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.sltip table.tt-p b{color:var(--ink);font-weight:650}
/* map – customers with no district in the ERP (not on the map) */
.slm-off{border:1px dashed var(--border-strong);border-radius:10px;padding:8px 10px 4px;background:var(--surface-2)}
.slm-off .t{font-size:11px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.slm-off .slm-t td{background:transparent}
.slm-off .who{font-size:11px;color:var(--muted);margin-top:2px;white-space:normal;line-height:1.35}
.slm-foot .warn{color:var(--crit-text);font-weight:600}