/* NetBill: tema gelap bawaan (konsol NOC: navy gelap, ungu, cyan). Tema terang lewat tombol tema (data-theme="light"). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(vendor/fonts/ibm-plex-sans.woff2) format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:500 700;font-display:swap;src:url(vendor/fonts/sora.woff2) format("woff2")}
/* Tema "frame": bingkai gelap, sidebar gelap, kanvas abu terang, kartu putih membulat, aksen lime + ungu. Tema gelap lewat tombol tema (data-theme="dark"). */
:root{--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Sora","IBM Plex Sans",system-ui,sans-serif;--mono-font:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
--shell:#15161a;--shell-2:#202127;--shell-text:#f1f1f4;--shell-muted:#8e909b;
--bg:#e9e9ec;--side:#15161a;--panel:#fff;--panel-2:#f4f4f6;--text:#121317;--muted:#666975;--faint:#9a9ca6;--line:#e3e3e8;
--brand:#7a6cf4;--brand-2:#35c3b8;--blue:#5b8def;--brand-ink:#fff;--brand-soft:#ecebfe;--brand-text:#5a49e0;
--accent:#d5f25c;--accent-ink:#15161a;--yellow:#f6d83e;
--ok:#18a34a;--ok-soft:#e1f7e7;--warn:#c27a06;--warn-soft:#fdf2d3;--bad:#e5484d;--bad-soft:#fde4e4;--neutral-soft:#eeeef1;
--shadow:none;--radius:18px;color-scheme:light}
:root[data-theme="dark"]{--shell:#0b0c0e;--shell-2:#1a1b20;
--bg:#17181c;--side:#0b0c0e;--panel:#212227;--panel-2:#2a2b31;--text:#ececf0;--muted:#9a9ca8;--faint:#6c6e7a;--line:#303139;
--brand:#8d81ff;--brand-2:#3fd1c5;--blue:#6b9bff;--brand-soft:#2a2650;--brand-text:#b2a9ff;
--ok:#3ccf6e;--ok-soft:#133022;--warn:#f0b43c;--warn-soft:#352a10;--bad:#ff6b6f;--bad-soft:#3a1b1e;--neutral-soft:#2a2b31;
color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--font)}
h1,h2,h3{font-family:var(--display)}
button,input,select,textarea{font:inherit;color:inherit}a{color:var(--brand-text)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.boot{padding:40px;text-align:center;color:var(--muted)}
.eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-text)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px}.crumb b{color:var(--brand-text);font-weight:600}

/* logo */
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.15}
.logo small{display:block;font:500 11px var(--font);color:var(--muted);letter-spacing:0}
.logo i{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-style:normal;color:#fff;font-size:12.5px;box-shadow:0 0 0 3px var(--brand-soft);flex:none}
.logo b span{color:var(--brand-text)}

/* kerangka */
.layout{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--side);border-right:1px solid var(--line);padding:14px 10px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.side>.logo{padding:4px 8px 14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.nav-group{display:flex;flex-direction:column;gap:1px}
.nav-head{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:14px 10px 6px;text-align:left}
.nav-head:hover{color:var(--muted)}
.nav-body{display:flex;flex-direction:column;gap:1px}.nav-group.shut .nav-body{display:none}
.nav-head .nav-chev{margin:0 2px 0 0;transform:rotate(45deg)}.nav-group.shut .nav-head .nav-chev{transform:rotate(-45deg)}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500;font-size:13.5px;border:0;position:relative}
.nav a svg,.nav-parent svg{color:var(--muted)}
.nav a:hover{color:var(--text);background:var(--panel-2)}
.nav a.on{color:var(--text);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.nav a.on svg{color:var(--brand-text)}
.nav a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav a.nav-sub{color:var(--muted)}.nav a.nav-sub.on{background:none;color:var(--text);font-weight:600}.nav a.nav-sub.on::before{left:-11px;top:6px;bottom:6px}
.nav svg{width:17px;height:17px;flex:none}
.nav-tree{display:flex;flex-direction:column;gap:1px}
.nav-parent{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;border:0;background:none;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;text-align:left;width:100%}
.nav-parent:hover{background:var(--panel-2);color:var(--text)}.nav-parent.on{color:var(--text)}.nav-parent.on svg{color:var(--brand-text)}.nav-parent span{flex:1}
.nav-chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.7;margin:0 4px 0 0;transition:transform .15s;flex:none}
.nav-tree.open .nav-chev{transform:rotate(45deg)}
.nav-subs{display:none;flex-direction:column;gap:1px;margin:1px 0 4px 18px;padding-left:10px;border-left:1px solid var(--line)}.nav-tree.open .nav-subs{display:flex}
.nav a.nav-sub{padding:5px 10px;font-size:12.5px;font-weight:500}
.nav-empty{padding:8px 10px;color:var(--faint);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.nav-chev,.side{transition:none}}
.side .me{margin-top:auto;border:1px solid var(--line);border-radius:12px;padding:9px;display:flex;align-items:center;gap:9px;background:var(--panel);font-size:13px}
.side .me>div{flex:1;min-width:0}.side .me b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side .me .sub{font-size:11px}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none;text-transform:uppercase}
.icb{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.icb:hover{color:var(--text);border-color:var(--muted)}.icb svg{width:16px;height:16px}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.topbar .tb-menu{display:none}
.topbar .tb-title{display:none;font-weight:700}
.gsearch{position:relative;flex:1;max-width:440px}
.gsearch label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 8px 0 10px;background:var(--panel)}
.gsearch label:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gsearch svg{width:15px;height:15px;color:var(--muted);flex:none}
.gsearch input{border:0;background:none;padding:7px 0;width:100%;outline:none;font-size:12.5px;border-radius:0}
.gsearch input:focus{outline:none;box-shadow:none}
.kbd{font-family:var(--mono-font);font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted);white-space:nowrap}
.gresults{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;z-index:25;max-height:60vh;overflow:auto}
.gresults a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:600}
.gresults a small{color:var(--faint);font-weight:600}
.gresults a:hover,.gresults a.hl{background:var(--brand-soft)}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.tb-tenant{max-width:200px;font-size:12.5px;padding:6px 8px}
.who-top{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line)}
.who-top b{display:block;font-size:12px;line-height:1.2}.who-top .sub{font-size:10.5px}
.main{padding:22px 28px 48px;min-width:0;width:100%;max-width:1280px;margin:0 auto}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head h1{margin:0 0 2px;font-size:24px;letter-spacing:-.02em;text-wrap:balance}.head p{margin:0;color:var(--muted)}

/* kartu & panel */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-content:start;--c:var(--brand);transition:transform .15s,border-color .15s}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c);opacity:.85}
.stat:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
a.stat{color:inherit;text-decoration:none}a.stat:hover{transform:translateY(-2px)}
.stat .k{grid-column:1/-1;color:var(--muted);font-size:13px;font-weight:500;align-self:center}
.stat .si+.k{grid-column:2}
.stat .v{grid-column:1/-1;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}.stat .s{grid-column:1/-1;color:var(--muted);font-size:12px}
.stat .si{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);display:grid;place-items:center}
.stat .si svg{width:18px;height:18px}
.stat.ok{--c:var(--ok)}.stat.warn{--c:var(--warn)}.stat.bad{--c:var(--bad)}.stat.blue{--c:var(--blue)}.stat.cyan{--c:var(--brand-2)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.panel>h2{font-size:14px;margin:0;padding:14px 16px;border-bottom:1px solid var(--line)}
.tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
.tools .grow{flex:1;min-width:160px}
.tbl{overflow-x:auto}table{width:100%;border-collapse:collapse}
th,td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10.5px;color:var(--faint);font-weight:800;text-transform:uppercase;letter-spacing:.1em;background:var(--panel)}
tbody tr:hover td{background:var(--panel-2)}
tr:last-child td{border-bottom:0}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td .sub{color:var(--muted);font-size:12px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);padding:7px 12px;border-radius:9px;cursor:pointer;font-weight:700;font-size:12.5px;white-space:nowrap;color:var(--text)}
.btn:hover{border-color:var(--muted)}.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 6px 18px -8px var(--brand)}.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:11.5px;border-radius:7px}.acts{display:flex;gap:6px;flex-wrap:wrap}
input,select,textarea{border:1px solid var(--line);background:var(--panel-2);border-radius:9px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brand)}
.tools input,.tools select{width:auto}.tools .grow input{width:100%}
label.f{display:block;margin-bottom:12px}label.f span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-ok{background:var(--ok-soft);color:var(--ok)}.b-warn{background:var(--warn-soft);color:var(--warn)}.b-bad{background:var(--bad-soft);color:var(--bad)}.b-n{background:var(--neutral-soft);color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);margin-right:6px}.dot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.modal-bg{position:fixed;inset:0;background:rgba(5,6,12,.6);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;z-index:40}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.modal h3{margin:0;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15.5px}.modal .body{padding:16px 18px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.err{background:var(--bad-soft);color:var(--bad);padding:8px 12px;border-radius:9px;margin-bottom:12px;font-size:12.5px;font-weight:600}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:50;font-weight:700;max-width:90vw}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lg-art{position:relative;overflow:hidden;margin:14px;border-radius:22px;border:1px solid var(--line);color:#ececf6;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;
  background:radial-gradient(600px 400px at 0% 100%,color-mix(in srgb,var(--brand) 32%,transparent),transparent 70%),radial-gradient(500px 300px at 100% 0%,color-mix(in srgb,var(--brand-2) 18%,transparent),transparent 70%),#0e0f19}
.lg-art canvas{position:absolute;inset:0;width:100%;height:100%}
.lg-art>*:not(canvas){position:relative}
.lg-art h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15;margin:0 0 10px;font-weight:800;letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.lg-art p{margin:0;color:#a7a9c2;max-width:44ch}
.lg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.lg-pills span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 12px;font-size:12px;color:#d6d7ea}
.lg-form{display:grid;place-items:center;padding:36px 24px}
.lg-card{width:100%;max-width:370px}
.login h1{font-size:25px;margin:6px 0 4px;letter-spacing:-.015em}.lg-card>p{margin:0 0 24px;color:var(--muted)}
.lg-card label.f span{font-size:12px}.lg-card label.f[for]{margin-bottom:0}
.pw{position:relative;margin:0 0 16px}.pw input{padding-right:76px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;font-weight:700;padding:4px 8px}
.login .btn.primary{width:100%;justify-content:center;padding:11px;font-size:14px;border:0;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,var(--brand-2)))}
.lg-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--faint);font-size:12px;gap:10px;flex-wrap:wrap}

/* dashboard */
.dgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.dgrid>.panel{margin-bottom:0}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}.side{position:fixed;inset:0 auto 0 0;width:250px;z-index:30;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .topbar{padding:10px 16px}.topbar .tb-menu{display:grid}.who-top{display:none}
  .main{padding:16px}.grid2{grid-template-columns:1fr}th,td{padding:9px 12px}
  .login{grid-template-columns:1fr}.lg-art{min-height:260px;padding:24px}
  .dgrid{grid-template-columns:1fr}
}
@media (max-width:520px){.gsearch .kbd{display:none}}
.btn.primary.danger{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:none}
.btn svg{width:16px;height:16px}
.pad{padding:16px}.pad>.sub,.pad>p{margin-top:0}
label.f.chk{display:flex;align-items:center;gap:8px}label.f.chk input{width:auto}label.f.chk span{margin:0;font-size:14px;color:var(--text);font-weight:500}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.sub-h{font-size:13px;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.04em}
pre.code{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px;font-size:12px;white-space:pre-wrap;word-break:break-all}
.tpl{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.tpl form{display:grid;gap:8px}.tpl label.f{margin:0}
.msg{white-space:normal;min-width:260px;max-width:460px;font-size:13px}
.sub{color:var(--muted);font-size:12px}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}
.bar{width:120px;height:8px;background:var(--neutral-soft);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}
.map{height:300px;border-radius:9px;border:1px solid var(--line);margin-bottom:10px;z-index:0}
.map.big{height:calc(100vh - 250px);min-height:380px;border:0;border-radius:0;margin:0}
.map.picking{cursor:crosshair}.map.picking .leaflet-grab{cursor:crosshair}
.pickbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;background:var(--brand-soft);color:var(--text);border-bottom:1px solid var(--line)}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}
.pop{display:grid;gap:4px;min-width:200px;font:13px/1.45 system-ui,sans-serif}.pop .acts{margin-top:6px;flex-wrap:wrap}.pop a.btn{color:var(--text);text-decoration:none}
.pin i{display:block;width:24px;height:24px;background:var(--brand);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pickbar[hidden]{display:none}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--text)}
.leaflet-container{font:inherit;background:var(--bg)}
@media (max-width:860px){.map.big{height:calc(100vh - 230px)}}
.leaflet-interactive:focus{outline:none}
.tpl details{margin-top:2px}.tpl summary{cursor:pointer;padding:2px 0}.tpl details .grid3{margin-top:8px}
.odp i{display:block;width:18px;height:18px;border-radius:4px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);background:#0891b2}
.odp-warn i{background:#d97706}.odp-full i{background:#b91c1c}.odp-odc i{background:#7c3aed;transform:rotate(45deg) scale(.9)}
.legend i.sq{border-radius:3px;background:#0891b2}.legend i.sq.warn{background:#d97706}.legend i.sq.full{background:#b91c1c}.legend i.sq.odc{background:#7c3aed;transform:rotate(45deg)}
.ports{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.port{border:1px solid var(--line);border-radius:9px;padding:6px 8px;display:grid;gap:1px;font-size:13px;min-width:0}
.port b{font-size:11px;color:var(--muted)}.port span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.port small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.port.on{border-color:var(--ok);background:var(--ok-soft)}.port.off{background:var(--neutral-soft)}.port.bad{border-color:var(--bad);background:var(--bad-soft)}.port.free{border-style:dashed}
.linkbtn{background:none;border:0;padding:0;color:var(--brand);font-weight:600;cursor:pointer}
.use{display:flex;align-items:center;gap:8px}.use .bar{width:80px}
.pickbar .acts{flex-wrap:wrap}
.leaflet-control-layers{background:var(--panel);color:var(--text)}
/* Panel pilihan peta: tombol bulat/centang sebaris dengan namanya (input global width:100% dilepas) */
.leaflet-control-layers-expanded{padding:8px 10px;border-radius:10px;border:1px solid var(--line)!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important;min-width:170px}
.leaflet-control-layers label{display:block;margin:0;font-size:13px;font-weight:500;cursor:pointer}
.leaflet-control-layers label>span{display:flex;align-items:center;gap:8px;padding:4px 2px}
.leaflet-control-layers input.leaflet-control-layers-selector{width:16px;height:16px;margin:0;padding:0;border:0;box-shadow:none;flex:none;top:0}
.leaflet-control-layers-separator{margin:6px 0;border-top:1px solid var(--line)}
.leaflet-control-layers-base::before{content:"Peta";display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px}
.leaflet-control-layers-overlays::before{content:"Tampilkan";display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 2px}
.leaflet-bar a.locate{display:flex;align-items:center;justify-content:center;color:#2563eb}.leaflet-bar a.locate.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* tiket */
.chk-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600;font-size:13px}.chk-inline input{width:auto}
.sub.warnt{color:var(--warn);font-weight:600}
.modal.wide{max-width:920px}
.tk-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--line)}
.tk-head h3{margin:0;padding:0;border:0;font-size:17px}
.tk-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;padding:16px 18px}
.tk-grid>div:last-child{display:flex;flex-direction:column;gap:12px}
.tk-cust{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.tk-cust .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tk-msgs{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding-right:4px}
.msg{border-radius:10px;padding:8px 12px;max-width:88%;background:var(--neutral-soft)}
.msg.customer{align-self:flex-start}.msg.admin{align-self:flex-end;background:var(--brand-soft)}
.msg.internal{background:var(--warn-soft);border:1px dashed var(--warn)}
.msg.system{align-self:center;background:none;color:var(--muted);font-size:12px;padding:2px 8px;text-align:center}
.msg .meta{font-size:11px;color:var(--muted);font-weight:600}.msg .txt{white-space:pre-wrap;word-break:break-word}
.tk-reply{margin-top:12px;display:flex;flex-direction:column;gap:8px}.tk-reply .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
@media (max-width:760px){.tk-grid{grid-template-columns:1fr}.tk-grid>div:last-child{order:-1}}
/* status router */
.rgrid{display:grid;gap:16px}
.rcard{display:flex;flex-direction:column;gap:14px}
.rhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.rhead h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rinfo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rinfo>div{display:flex;flex-direction:column;min-width:0}.rinfo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbars{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mbar .row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.mbar .track{height:8px;border-radius:99px;background:var(--neutral-soft);overflow:hidden}
.mbar .track i{display:block;height:100%;border-radius:99px;background:var(--muted)}
.mbar .track i.ok{background:var(--ok)}.mbar .track i.warn{background:var(--warn)}.mbar .track i.bad{background:var(--bad)}
.rcharts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spark{width:100%;height:56px;display:block;background:var(--bg);border-radius:8px;margin-top:4px}
.spark-line{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark-line.c1{stroke:var(--brand)}.spark-line.c2{stroke:#16a34a}.spark-line.c3{stroke:#d97706}
.spark-empty{fill:var(--muted);font-size:11px}
.lg{font-weight:700}.lg.c1{color:var(--brand)}.lg.c2{color:#16a34a}
.okbox{background:var(--ok-soft);color:var(--ok);padding:8px 12px;border-radius:9px;font-size:13px;margin-top:10px}
.modal .acts{display:flex;gap:8px;margin-top:4px}
@media (max-width:900px){.rinfo{grid-template-columns:repeat(3,minmax(0,1fr))}.rcharts,.rbars{grid-template-columns:1fr}}
/* log router */
.warnbox{background:var(--warn-soft);color:var(--warn);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:13px}
details.panel>summary{cursor:pointer}details.panel[open]>summary{margin-bottom:8px}
.logtbl td{vertical-align:top;font-size:13px;padding:7px 12px}.logtbl td.msg{white-space:pre-wrap;word-break:break-word;min-width:320px}
.logtbl tr.lv-bad td{background:color-mix(in srgb,var(--bad-soft) 55%,transparent)}.logtbl tr.lv-warn td{background:color-mix(in srgb,var(--warn-soft) 55%,transparent)}
.ubtn{font-size:12px;margin-left:6px}
.btn[aria-pressed="true"]{animation:none}
/* login hotspot */
.hsgrid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}
.hsgrid .phone{background:var(--bg);display:flex;justify-content:center}
.hsprev{width:360px;height:720px;border:8px solid #1b2333;border-radius:28px;background:#fff}
.hslogo{max-height:48px;max-width:140px;border-radius:6px;background:var(--bg)}
.hsgrid .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hsgrid .row input[type=file]{width:auto}
input[type=color]{height:40px;padding:4px}
.steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.seg button{border:0;background:var(--panel);padding:6px 10px;font-weight:600;cursor:pointer}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
@media (max-width:1100px){.hsgrid{grid-template-columns:1fr}}
/* impor pelanggan */
.imp-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.maprow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.maprow select{width:100%}
@media (max-width:640px){.maprow{grid-template-columns:1fr}}
.note{background:var(--warn-soft,rgba(234,179,8,.12));border-radius:9px;padding:10px 12px;margin:12px 0;font-size:13px;line-height:1.5}
.note pre{white-space:pre-wrap;word-break:break-all;margin:8px 0;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:7px}
.bad-t{color:var(--bad);font-size:13px}
.head .acts{flex-wrap:wrap;max-width:100%}
/* keuangan */
.fin-tabs{margin-bottom:14px}
.fin-cats{display:flex;flex-direction:column;gap:6px;grid-column:span 2}
.fin-cats .k{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fin-cat{display:grid;grid-template-columns:minmax(90px,1fr) minmax(60px,2fr) auto;gap:10px;align-items:center;font-size:13px}
.fin-cat .bar{width:100%}
.fin-bars{display:flex;flex-direction:column;gap:3px}
.bar.out i{background:var(--warn)}
.bar.in i{background:var(--ok)}
.receipt{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:8px}
.fin-catlist{display:flex;flex-direction:column;max-height:300px;overflow:auto;margin-bottom:8px}
.fin-catrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.fin-catrow>span{flex:1}
@media (max-width:640px){.fin-cats{grid-column:auto}}
/* pemakaian */
.uchart-wrap{display:flex;flex-direction:column;gap:6px}
.uchart{width:100%;height:auto;display:block}
.uchart .down{fill:var(--brand)}
.uchart .up{fill:var(--ok);opacity:.75}
.uchart .grid{stroke:var(--line);stroke-width:1}
.uchart text{fill:var(--muted);font-size:10px}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;flex-wrap:wrap}
.legend .k::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legend .k.down::before{background:var(--brand)}
.legend .k.up::before{background:var(--ok);opacity:.75}
.ustats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.ustats>div{background:var(--neutral-soft);border-radius:9px;padding:10px 12px}
.ustats .k{color:var(--muted);font-size:12px;font-weight:600}
.ustats b{font-size:20px}
.utotal{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.utotal .bar{width:80px}
/* WA massal */
.bc-form{display:flex;flex-direction:column;gap:4px}
.bc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:6px 0 12px}
@media (max-width:900px){.bc-grid{grid-template-columns:1fr}}
.bc-h{font-weight:700;font-size:13px;margin:6px 0}
.bc-opts{display:flex;flex-wrap:wrap;gap:6px 14px}
.bc-list .bc-opts{flex-direction:column;flex-wrap:nowrap;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:8px 10px;gap:6px}
.bc-list input[type=search]{margin-bottom:6px;width:100%}
.bc-opt{white-space:normal}
.bc-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.bc-row select{flex:1;min-width:140px}
.bc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}
.bc-chips .btn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.bc-meta{margin:6px 0 10px}.bc-meta summary{cursor:pointer;font-weight:600}
.bc-preview{background:var(--neutral-soft);border-radius:10px;padding:12px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.bc-samples{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bc-bubble{background:var(--ok-soft);border-radius:10px 10px 10px 2px;padding:8px 10px;max-width:520px;margin:8px 0}
.bc-text{white-space:pre-wrap;word-break:break-word;font-size:14px}
.bc-prog{display:flex;flex-direction:column;gap:4px;min-width:140px}.bc-prog .bar{width:140px}
.bc-snip{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-recips{max-height:320px;overflow:auto}

/* VPN router */
.vpn-server{padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.vpn-kv{display:flex;flex-direction:column;gap:4px;min-width:0}
.vpn-kv>span:first-child{font-size:12px;color:var(--muted)}
.vpn-kv b{word-break:break-all}
.vpn-kv .badge{align-self:flex-start}
.vpn-acts{flex-wrap:wrap;justify-content:flex-end;max-width:280px;margin-left:auto}
.vpn-tabs{display:flex;gap:6px;margin:10px 0 8px}
.vpn-steps{margin:0 0 6px;padding-left:20px;line-height:1.6}
.vpn-off ol{padding-left:20px;line-height:1.7}
.vpn-off .mono{word-break:break-all}

.sub.late{color:var(--bad);font-weight:600}

/* Bot Telegram */
.tg-code{margin-top:14px;padding:14px;border:1px dashed var(--brand);border-radius:12px;background:var(--brand-soft);display:grid;gap:8px;justify-items:start}
.tg-big{font-size:26px;font-weight:700;letter-spacing:4px;color:var(--brand)}
.tg-notif{display:flex;flex-wrap:wrap;gap:6px 14px}
.tg-notif .chk-inline{font-weight:500}

/* Atribut hidden selalu menang atas display dari class */
[hidden]{display:none !important}
.copy{display:flex;gap:6px}.copy input{font-family:var(--mono-font);font-size:12px}
.mono{font-family:var(--mono-font);font-size:.95em}
.seg{background:var(--panel-2);padding:3px;gap:2px}.seg button{background:none;border-radius:6px;color:var(--muted);font-weight:700}
.seg button.on{background:var(--brand-soft);color:var(--brand-text)}
.bar i,.mbar .track i{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
/* tahap 1 prototipe: grid kartu, grafik batang, aksi cepat, ringkasan jaringan, aksi massal */
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cards:empty{display:none}
button.stat{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--panel)}button.stat:hover{transform:translateY(-2px)}
.stat.picked{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.cards.c5 .stat .v{margin-top:0;grid-column:2;font-size:22px}.cards.c5 .stat .k{grid-row:2;grid-column:2}.cards.c5 .stat .si{grid-row:1/3}
.panel>h2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--display)}.panel>h2 .sub{font:400 12px var(--font)}
.panel.pad>h2{padding:0 0 12px;border:0}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;align-items:end;height:220px;padding:18px 16px 14px}
.bars>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.bars i{display:block;width:100%;max-width:56px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 30%,transparent))}
.bars small{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}.bars span{font-size:12px;color:var(--muted)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.quick a{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);text-decoration:none;font-weight:600}
.quick a:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.quick svg{width:20px;height:20px;color:var(--brand-text)}
.dgrid>.panel{margin-bottom:0}.dgrid{margin-bottom:14px}
.net .panel{margin-bottom:0}.net{margin-bottom:14px}
.big{font-family:var(--display);font-size:26px;font-weight:600;margin-bottom:8px;font-variant-numeric:tabular-nums}
.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12.5px;color:var(--muted);margin-top:8px}.mrow b{color:var(--text);font-variant-numeric:tabular-nums}
.mrow .track{grid-column:1/-1;height:6px;border-radius:99px;background:var(--neutral-soft);overflow:hidden}
.mrow .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.mrow .track i.ok{background:var(--ok)}.mrow .track i.bad{background:var(--bad)}
.rlist{display:flex;flex-direction:column}.rlist>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.rlist>div:last-child{border:0}.rlist span{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}.rlist svg{width:16px;height:16px;color:var(--muted);flex:none}
.bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--brand) 10%,var(--panel));border-bottom:1px solid var(--line)}
.bulk b{margin-right:6px}
td input[type=checkbox],th input[type=checkbox]{width:16px;height:16px}
@media (max-width:1100px){.cards.c4,.cards.c5{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.c3{grid-template-columns:1fr}}
@media (max-width:520px){.cards.c5{grid-template-columns:1fr 1fr}.quick{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.stat .v{font-size:19px}}
/* Hotspot: reseller */
.dgrid.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.dgrid.even{grid-template-columns:1fr}}
.rform{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin-top:10px}
.rform .acts{grid-column:1/-1;justify-content:flex-end}
@media (max-width:520px){.rform{grid-template-columns:1fr}}
.cards.c5 .stat .v{overflow-wrap:anywhere}
a.btn{text-decoration:none}
.tools.flat{border-bottom:0}
/* Billing */
.who{display:flex;gap:10px;align-items:center}.who b{display:block;font-weight:600}
.bars.b12{gap:8px;padding-left:4px;padding-right:4px}
.bars .now i{background:linear-gradient(180deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 30%,transparent))}
.bars .now span{color:var(--text);font-weight:700}
@media (max-width:520px){.bars.b12{gap:3px}.bars.b12 small{font-size:9px}.bars.b12 span{font-size:10px}}
.rform .full{grid-column:1/-1}
/* Akun, TR-069, Layanan */
.logo-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.logo-row .acts{flex:1;min-width:200px;flex-wrap:wrap;justify-content:flex-start}
.logo-box{width:175px;height:50px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:var(--panel-2);overflow:hidden}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.rform .sub-form{margin-top:0;padding:0}.rform .sub-form[hidden]{display:none}
.kvs{display:flex;flex-direction:column;gap:2px}.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}.kvs .acts{margin-top:12px;flex-wrap:wrap}
.panel>.sub.pad{padding:12px 16px}
/* Alur koneksi ACS/OLT */
.rform .sub-title{font-weight:700;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.step{padding:14px 0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step>b{display:block;margin-bottom:4px}
.step .f{max-width:360px;margin:8px 0}.step .dgrid{margin:8px 0 0}.step .scr{min-width:0}
.connect .steps{margin-bottom:12px}.connect .scr{margin-top:10px}.connect h3{margin:16px 0 4px;font-size:14px}.connect .acts{margin-top:10px}
.checks{margin-top:8px}.modal pre.code{max-height:240px;overflow:auto}

/* ===== Tema frame: kerangka ===== */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"top top" "side canvas";gap:12px;padding:12px;min-height:100vh;background:var(--shell)}
.topbar{grid-area:top;position:sticky;top:12px;z-index:20;border:0;border-radius:999px;background:var(--panel);backdrop-filter:none;padding:7px 8px;gap:10px;box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.tb-logo{display:flex;align-items:center;gap:9px;background:var(--shell);color:var(--shell-text);border-radius:999px;padding:6px 16px 6px 7px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;flex:none}
.tb-logo i{width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:700}
.tb-logo span{color:var(--accent)}
.gsearch{max-width:400px;margin-left:6px}
.gsearch label{border-radius:999px;background:var(--panel-2);border-color:transparent;padding:0 10px 0 14px}
.gsearch input{padding:9px 0}
.icb{width:38px;height:38px;border-radius:50%;background:var(--panel-2);border-color:transparent;color:var(--text)}
.icb:hover{border-color:var(--line);background:var(--panel)}
.tb-tenant{border-radius:999px;background:var(--panel-2);border-color:transparent;padding:8px 12px}
.who-top{border-left:0;padding-left:2px;gap:10px}
.who-top .av{width:38px;height:38px;font-size:12.5px}
.av{background:var(--accent);color:var(--accent-ink)}
.tb-add{border-radius:999px}

/* sidebar: selalu gelap, menyatu dengan bingkai */
.side{grid-area:side;--text:var(--shell-text);--muted:var(--shell-muted);--faint:#62646e;--panel:var(--shell-2);--panel-2:#24252b;--line:#2a2b31;--brand-text:var(--accent);
  background:transparent;border:0;padding:10px 0 0;position:sticky;top:76px;height:calc(100vh - 88px);color:var(--text)}
.side>.logo{display:none}
.nav{margin:0;padding:0 2px}
.nav-head{padding:16px 14px 6px;font-size:10.5px;letter-spacing:.12em}
.nav a{border-radius:999px;padding:9px 14px;font-weight:500;color:#d5d6dc}
.nav a:hover{background:var(--panel-2);color:#fff}
.nav a.on{background:#fff;color:#121317;font-weight:600}
.nav a.on svg{color:#121317}.nav a.on::before{display:none}
.nav-parent{border-radius:999px;padding:8px 14px;color:#d5d6dc;font-weight:500}
.nav-parent.on{color:#fff}.nav-parent.on svg{color:var(--accent)}
.nav-subs{margin-left:22px;border-left-color:#30313a}
.nav a.nav-sub{color:var(--muted);padding:6px 12px}
.nav a.nav-sub:hover{color:#fff}
.nav a.nav-sub.on{background:none;color:var(--accent);font-weight:600}
.side .me{border:0;border-radius:18px;background:var(--accent);color:var(--accent-ink);padding:12px;margin-top:10px}
.side .me .sub{color:color-mix(in srgb,var(--accent-ink) 65%,transparent)}
.side .me .av{background:var(--accent-ink);color:var(--accent)}
.side .me .icb{background:rgba(0,0,0,.08);color:var(--accent-ink);width:32px;height:32px}
.side .me .icb:hover{background:rgba(0,0,0,.16)}

/* kanvas isi */
.canvas{grid-area:canvas;min-width:0;background:var(--bg);border-radius:26px;display:flex;flex-direction:column}
.main{padding:26px 26px 48px;max-width:1360px}
.head{align-items:center}
.head h1{font-size:30px;font-weight:500;letter-spacing:-.025em}
.head p{font-size:13px}
.crumb b,.eyebrow{color:var(--brand-text)}

/* kartu & panel */
.card,.panel{border:0;box-shadow:var(--shadow);border-radius:var(--radius)}
.cards{gap:12px}
.stat{padding:16px 18px;column-gap:12px;row-gap:2px}
.stat::before{display:none}
.stat:hover{border-color:transparent;box-shadow:0 0 0 1.5px var(--c)}
.stat .si{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--text)}
.stat .si{position:relative}.stat .si::after{content:"";position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--panel)}
.stat .k{color:var(--text);font-size:14px}
.stat .v{font-family:var(--font);font-size:28px;font-weight:500;letter-spacing:-.02em;margin-top:14px}
.stat .s{color:var(--muted);font-size:12px;margin-top:2px}
.stat.picked{box-shadow:0 0 0 2px var(--c)}
.panel>h2{font-size:17px;font-weight:500;border-bottom:0;padding:16px 18px 8px;letter-spacing:-.01em}
.panel.pad>h2{padding:0 0 10px}
.tools{border-bottom:1px solid var(--line);padding:12px 18px}
th{font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);background:var(--panel)}
th,td{border-bottom:1px dashed var(--line);padding:11px 18px}
tbody tr:hover td{background:var(--panel-2)}
.badge{padding:3px 11px;font-weight:600}.badge::before{display:none}
.pager{border-top:1px solid var(--line)}

/* tombol & isian */
.btn{border-radius:999px;padding:8px 15px;font-weight:600;border-color:var(--line)}
.btn.sm{border-radius:999px;padding:4px 11px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none}
.btn.primary:hover{filter:brightness(.96)}
.btn.primary.danger{background:var(--bad);border-color:var(--bad);color:#fff}
input,select,textarea{border-radius:12px;background:var(--panel-2);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.seg{border:0;border-radius:999px;background:var(--panel);padding:4px}
.seg button{border-radius:999px;padding:7px 14px;color:var(--muted)}
.seg button.on{background:var(--shell);color:#fff}
.modal{border:0;border-radius:22px}
.modal h3{border-bottom:0;font-weight:600}.modal .foot{border-top:0}
.toast{border-radius:999px;background:var(--shell);color:#fff}

/* grafik & aksi cepat */
.bars i{border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 55%,transparent),color-mix(in srgb,var(--brand) 18%,transparent))}
.bars>div:last-child i,.bars .now i{background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 55%,transparent))}
.bars>div:last-child small{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 8px;font-weight:600}
.bar i,.mbar .track i,.mrow .track i{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,var(--brand-2)))}
.mrow .track i.ok{background:var(--brand-2)}.mrow .track i.bad{background:var(--bad)}
.panel:has(>.quick){background:var(--shell);color:var(--shell-text);--text:var(--shell-text);--muted:var(--shell-muted);--line:#2c2d34}
.quick a{border:0;background:var(--shell-2);border-radius:14px;color:var(--shell-text)}
.quick a:hover{background:#2a2b32}
.quick svg{width:36px;height:36px;padding:8px;border-radius:50%;background:#2e2f37;color:var(--accent)}
.quick a:nth-child(2) svg{color:var(--brand)}.quick a:nth-child(3) svg{color:var(--yellow)}.quick a:nth-child(4) svg{color:var(--brand-2)}

/* login */
.login .btn.primary{background:var(--accent);color:var(--accent-ink);border-radius:999px}
.lg-art{border:0;border-radius:26px;background:radial-gradient(600px 400px at 0% 100%,color-mix(in srgb,var(--brand) 38%,transparent),transparent 70%),radial-gradient(500px 300px at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--shell)}
.logo i{background:var(--accent);color:var(--accent-ink);box-shadow:none}

@media (max-width:860px){
  .layout{grid-template-columns:1fr;grid-template-areas:"top" "canvas";padding:8px;gap:8px}
  .topbar{top:8px;padding:6px}
  .tb-logo{padding:5px 12px 5px 6px;font-size:15px}
  .gsearch{margin-left:0}
  .side{position:fixed;inset:0 auto 0 0;width:260px;height:100vh;top:0;background:var(--shell);padding:16px 12px;z-index:30}
  .side>.logo{display:flex;padding:4px 8px 14px;border-color:#2a2b31}
  .canvas{border-radius:20px}
  .main{padding:18px 14px 36px}
  .head h1{font-size:24px}
}
@media (max-width:520px){.tb-logo b{display:none}.tb-logo{padding:5px}}
@media (max-width:860px){.tb-add{display:none}}
@media (max-width:520px){.stat{padding:14px}.stat .v{font-size:20px;overflow-wrap:anywhere}.stat .k{font-size:13px}}