/* Zekon Panel — HUD theme on top of Basecoat.
   Dark by decision. Dot-grid ground, chamfered panels with corner ticks, mono
   "//" labels, condensed display numerals, one gold accent for money + the
   primary action. Status colours are semantic and never the accent. */
:root{--radius:0;--mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;--disp:"Barlow Condensed","Arial Narrow",sans-serif;--sans:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
 --gold:#f0b429;--on-gold:#1e1500;--ok:#43d38a;--bad:#ff6a5c;--warn:#f0b429;--info:#6fc3ff;
 --s1:#101216;--s2:#151820;--s3:#1c2029;--line2:#2f343d;--ink2:#b5b9c2}
.dark,:root{--background:#0a0b0d;--foreground:#e9e7e1;--card:#101216;--card-foreground:#e9e7e1;--popover:#151820;--popover-foreground:#e9e7e1;--border:#22262c;--input:#22262c;--muted:#151820;--muted-foreground:#7b818c;--accent:#1c2029;--accent-foreground:#e9e7e1;--primary:#f0b429;--primary-foreground:#1e1500;--secondary:#1c2029;--secondary-foreground:#e9e7e1;--destructive:#ff6a5c;--ring:#f0b429}
html{color-scheme:dark}
html{overflow-x:hidden}
.dropdown-menu [data-popover][aria-hidden=true]{display:none}.dropdown-menu [data-popover]{right:0;left:auto;max-width:calc(100vw - 16px)}
body{font-family:var(--sans);font-size:13.5px;background-color:var(--background);color:var(--foreground);background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.025) 10px 11px)}
/* latar: default "garis"; lainnya dipilih dari menu avatar, disimpan di localStorage (html[data-bg]) */
html[data-bg=titik] body{background-image:radial-gradient(#22262c 1px,transparent 1px);background-size:18px 18px}
html[data-bg=polos] body{background-image:none}
html[data-bg=kotak] body{background-image:linear-gradient(#171a1f 1px,transparent 1px),linear-gradient(90deg,#171a1f 1px,transparent 1px);background-size:56px 56px}
html[data-bg=lembut] body{background-image:radial-gradient(1200px 600px at 20% -10%,rgba(240,180,41,.07),transparent 60%),radial-gradient(900px 500px at 100% 100%,rgba(111,195,255,.05),transparent 60%);background-attachment:fixed}
html[data-bg=mesh] body{background-image:radial-gradient(at 0% 0%,#15171c 0,transparent 50%),radial-gradient(at 100% 0%,#0f1218 0,transparent 50%),radial-gradient(at 100% 100%,#171512 0,transparent 50%),radial-gradient(at 0% 100%,#101317 0,transparent 50%);background-attachment:fixed}
html[data-bg=emas] body{background-image:radial-gradient(900px 400px at 0% 0%,rgba(240,180,41,.10),transparent 55%);background-attachment:fixed}
html[data-bg=aurora] body{background-image:radial-gradient(800px 500px at 10% 0%,rgba(240,180,41,.09),transparent 60%),radial-gradient(700px 500px at 90% 20%,rgba(67,211,138,.06),transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(111,195,255,.07),transparent 60%);background-attachment:fixed}
html[data-bg=vignette] body{background-image:radial-gradient(ellipse at 50% 30%,#111318 0%,#0a0b0d 60%,#050607 100%);background-attachment:fixed}
html[data-bg=noise] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
html[data-bg=bintik] body{background-image:radial-gradient(#2a2e36 1.2px,transparent 1.2px),radial-gradient(#1c1f25 1px,transparent 1px);background-size:36px 36px,12px 12px;background-position:0 0,6px 6px}
html[data-bg=scan] body{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px)}
html[data-bg=blueprint] body{background-image:linear-gradient(#141720 1px,transparent 1px),linear-gradient(90deg,#141720 1px,transparent 1px),linear-gradient(#1c2030 1px,transparent 1px),linear-gradient(90deg,#1c2030 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
html[data-bg=hex] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23191c22' stroke-width='1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23191c22' stroke-width='1'/%3E%3C/svg%3E");background-size:56px 100px}
html[data-bg=topo] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231a1d23' stroke-width='1'%3E%3Cpath d='M0 90c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 150c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 210c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 270c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 330c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 390c60-40 120 40 180 0s120-40 240 0'/%3E%3Cpath d='M0 30c60-40 120 40 180 0s120-40 240 0'/%3E%3C/g%3E%3C/svg%3E");background-size:420px 420px}
html[data-bg=diagonal] body{background-image:linear-gradient(115deg,var(--background) 0 55%,#111318 55% 100%);background-attachment:fixed}
html[data-bg=garisemas] body{background-image:linear-gradient(90deg,var(--gold) 0 3px,transparent 3px);background-repeat:no-repeat;background-attachment:fixed}
.bgpick{padding:6px 10px 4px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}.bgpick+div{display:flex;gap:4px;padding:2px 8px 8px;flex-wrap:wrap;max-width:320px}.bgpick+div button{font:11px var(--mono);padding:4px 8px;border:1px solid var(--border);background:var(--s2);color:var(--ink2);cursor:pointer}.bgpick+div button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.mono,.num,.id,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}.num{text-align:right}.r{text-align:right}.dim{color:var(--muted-foreground)}.bad{color:var(--bad)!important}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}.inline{display:inline}.mt{margin-top:16px}.mb{margin-bottom:16px}.w-full{width:100%}
h1,h2,h3{font-family:var(--disp);letter-spacing:.02em}
/* chamfer + corner ticks */
.cut,.tile,.card,.btn,.badge,.st,.input,.textarea,.select,.keybox,.empty,.alert,.command,.dropdown-menu [data-popover]{border-radius:0!important}
.tile,.card{background:var(--card);border:1px solid var(--border);position:relative;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tile::before,.card::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;border-top:1px solid var(--line2);border-left:1px solid var(--line2);pointer-events:none}
.tile::after,.card::after{content:"";position:absolute;bottom:0;right:0;width:10px;height:10px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);pointer-events:none}
/* mono "//" labels */
.tile small,.card>header p,.stats small,.kv dt,.field label,.label,.table th,.sidebar nav h3,.hint{font-family:var(--mono)}
.tile>small,.stats small,.sidebar nav h3{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.tile>small::before,.card>header h2::before,.sidebar nav h3::before{content:"//";color:var(--gold);margin-right:.5em}
.card>header h2{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted-foreground)}
.card>header h2 .st{margin-left:6px;letter-spacing:0;text-transform:none}
/* brand + sidebar */
.brand{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;padding:4px 0}.brand .mark{display:none;font:800 20px var(--wm);color:var(--gold)}.collapse{display:none}.wordmark{font-family:"Plus Jakarta Sans",Barlow,system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1;letter-spacing:-.035em;color:var(--gold);white-space:nowrap}.brand small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-foreground);text-transform:uppercase}
.sidebar{background:#0d0f12}
/* desktop: floating sidebar card, inset from the edges, height follows content */
@media(min-width:901px){
.sidebar{background:transparent}
.sidebar nav{top:14px;left:14px;bottom:auto;max-height:calc(100dvh - 28px);width:222px;background:var(--s1);border:1px solid var(--line2)!important;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);padding:14px 10px 10px;overflow:auto;scrollbar-width:none}
.sidebar nav::-webkit-scrollbar{display:none}
.sidebar[data-side=left]+main,.sidebar[data-side=left]+*{margin-left:250px!important}
.sidebar nav>header{padding:2px 6px 10px}
.sidebar nav h3{margin:10px 0 3px;padding:0 8px}
.sidebar nav a{padding:7px 8px;font-size:13px}
.sidebar nav>section{padding:0}
.sidebar nav>footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.sidebar nav>header{flex-direction:row!important;align-items:center;justify-content:space-between}
.collapse{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);cursor:pointer;transition:transform .2s}.collapse:hover{color:var(--foreground);border-color:var(--line2)}
/* mini rail: only icons + monogram */
html[data-nav=mini] .sidebar nav{width:64px;padding:12px 8px 10px}
html[data-nav=mini] .sidebar[data-side=left]+main,html[data-nav=mini] .sidebar[data-side=left]+*{margin-left:92px!important}
html[data-nav=mini] .sidebar nav>header{flex-direction:column!important;gap:8px;padding:2px 0 10px}
html[data-nav=mini] .brand .wordmark{display:none}html[data-nav=mini] .brand .mark{display:block}
html[data-nav=mini] .collapse{transform:rotate(180deg)}
html[data-nav=mini] .sidebar nav h3{font-size:0;margin:8px 0 2px;padding:0;height:1px;background:var(--border)}html[data-nav=mini] .sidebar nav h3::before{content:none}
html[data-nav=mini] .sidebar nav a{justify-content:center;padding:9px 0;border-left:0;gap:0;position:relative}
html[data-nav=mini] .sidebar nav a span{display:none}
html[data-nav=mini] .sidebar nav a[data-active=true]{background:linear-gradient(135deg,rgba(240,180,41,.18),transparent);box-shadow:inset 2px 0 0 var(--gold)}
html[data-nav=mini] .sidebar nav .nav-count{display:block;position:absolute;top:4px;right:6px;min-width:8px;height:8px;padding:0;font-size:0;border-radius:50%}html[data-nav=mini] .sidebar nav .nav-count:empty{display:none}
.sidebar nav,.sidebar+main{transition:width .2s,margin-left .2s}
.topbar{margin:14px 14px 0 0;border:1px solid var(--border);background:rgba(16,18,22,.9);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);top:14px}
.content{padding:18px 22px 56px 8px}
}
.sidebar nav h3{font-weight:500;padding:0 10px;margin:12px 0 4px}.sidebar nav ul{list-style:none;margin:0;padding:0}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--ink2);text-decoration:none;font-size:13px;border-left:2px solid transparent}
.sidebar nav a:hover{background:var(--s2)}.sidebar nav a[data-active=true]{color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,rgba(240,180,41,.12),transparent)}
.nav-count{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--on-gold);background:var(--gold);padding:0 6px}.nav-count:empty{display:none}
/* shell + topbar */
.shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{height:56px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(13,15,18,.85);backdrop-filter:blur(6px);z-index:20}
.topbar h1{font-size:22px;font-weight:600;margin:0;text-transform:uppercase}
.topbar .crumb{font-family:var(--mono);font-size:11px;color:var(--muted-foreground)}.topbar .crumb::before{content:"//";color:var(--gold);margin-right:.5em}
.topbar .btn.cmd-btn{margin-left:auto;min-width:260px;justify-content:flex-start;gap:8px;background:var(--s2);border-color:var(--border);color:var(--muted-foreground);font-family:var(--sans);font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0;padding:6px 10px}.topbar .btn.cmd-btn:hover{border-color:var(--line2);color:var(--ink2);background:var(--s2)}.cmd-btn svg{opacity:.7}
.cmd-btn .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground);border:1px solid var(--line2);padding:1px 5px;background:transparent}
.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(67,211,138,.15)}.live.off i{background:var(--bad);box-shadow:0 0 0 3px rgba(255,106,92,.15)}
.topbar .btn.actor{gap:8px;padding:4px 10px 4px 4px;border-color:transparent;color:var(--ink2);font-family:var(--sans);font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0}.topbar .btn.actor:hover{background:var(--s2);border-color:var(--border)}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:inline-grid;place-items:center;font:600 11px var(--mono);text-transform:uppercase;font-style:normal}
.content{padding:20px 24px 56px;width:100%}
/* buttons */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line2);background:transparent;color:var(--foreground)}
.btn:not([data-variant]),.btn[data-variant=primary]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.btn[data-variant=outline]{border-color:var(--gold);color:var(--gold);background:transparent}
.btn[data-variant=ghost]{border-color:transparent;color:var(--ink2)}
.btn[data-variant=destructive]{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn[data-size=xs]{padding:3px 9px;font-size:10.5px}.btn.copy{color:var(--gold);border-color:transparent;padding:2px 6px}.btn.copy:hover{border-color:var(--gold)}.btn[data-size=sm]{padding:5px 11px;font-size:11px}
/* bento (overview) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.bento-kpis{display:contents}.bento-kpis.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.bento-kpis.k3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.tile{padding:14px 16px;min-height:112px}
.tile>b{display:block;font:600 40px/1 var(--disp);letter-spacing:.01em;margin:10px 0 4px}
.tile .sub{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted-foreground)}.tile .sub a{color:var(--gold)}
.tile.hero{grid-column:span 3;grid-row:span 2;background:linear-gradient(135deg,rgba(240,180,41,.18),rgba(240,180,41,.03));border-color:rgba(240,180,41,.55)}
.tile.hero::before,.tile.hero::after{border-color:var(--gold)}
.tile.hero>b{font-size:88px;font-weight:700;color:var(--gold)}.tile.hero .sub{color:var(--ink2);font-size:12.5px}
.tile.hero .cta{position:absolute;right:18px;bottom:18px}
.tile.wide{grid-column:span 4;grid-row:span 2}.tile.wide2{grid-column:span 6}.tile.tall{grid-column:span 2;grid-row:span 2}
.tile h3{margin:0 0 8px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);display:flex;gap:8px;align-items:baseline}
.tile h3::before{content:"//";color:var(--gold);margin-right:.5em}.tile h3 .dim{font-weight:400;letter-spacing:0;text-transform:none}.tile h3 .more{margin-left:auto;color:var(--gold);text-decoration:none;letter-spacing:.04em}
.meter{height:10px;background:var(--s3);border:1px solid var(--line2);margin-top:10px;overflow:hidden;position:relative}.meter i{display:block;height:100%;background:var(--gold)}.meter.low i{background:var(--bad)}.meter.mid i{background:var(--warn)}.meter.full i{background:var(--ok)}
.meter::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(10,11,13,.6) 24px 25px)}
.rows{display:flex;flex-direction:column}.row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--foreground)}.row:last-child{border-bottom:0}.row.r4{grid-template-columns:1fr auto auto auto}.row a{color:inherit;text-decoration:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}.badge{font-family:var(--mono);font-size:11px;letter-spacing:.02em;border:1px solid var(--line2);background:var(--s2);color:var(--ink2)}.badge[data-variant=destructive]{border-color:rgba(255,106,92,.5);color:var(--bad);background:transparent}
.dot{display:inline-block;width:6px;height:6px;margin-right:6px}.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}
.feed{display:flex;flex-direction:column}.ev{display:grid;grid-template-columns:44px 56px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px;color:var(--foreground);text-decoration:none}.ev:last-child{border-bottom:0}
.ev .t{font-size:11px;color:var(--muted-foreground)}.ev .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}.ev .k.admin,.ev .k.req{color:var(--muted-foreground)}.ev .k.paid{color:var(--ok)}.ev .k.low{color:var(--bad)}
/* chart svg */
svg .grid path{stroke:var(--border);stroke-width:1}svg .area{fill:var(--gold);fill-opacity:.1}svg .tok{fill:none;stroke:var(--gold);stroke-width:2}svg .rev{fill:none;stroke:var(--info);stroke-width:1.5;stroke-dasharray:3 4}
.legend{display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--muted-foreground);margin-top:6px;flex-wrap:wrap}.legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:6px}.l-tok{background:var(--gold)}.l-rev{background:var(--info)}
.bars{display:flex;gap:3px;align-items:flex-end;height:160px}.bar{flex:1;position:relative;height:100%;display:flex;align-items:flex-end;gap:1px}.bar i{flex:1;display:block;background:var(--gold)}.bar i.rev{background:var(--info)}
/* packages */
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pkg{position:relative;background:var(--s2);border:1px solid var(--border);padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.pkg.hot{border-color:var(--gold);background:linear-gradient(135deg,rgba(240,180,41,.12),var(--s2) 60%)}.pkg.off{opacity:.55}
.pkg-top{display:flex;align-items:center;gap:8px;font-size:12.5px}.pkg-sort{font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground)}.pkg-label{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkg-num{display:flex;align-items:baseline;gap:6px;margin-top:4px}.pkg-num b{font:600 34px/1 var(--disp);letter-spacing:.01em}.pkg-num small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.pkg-price{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--gold)}
.pkg-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--mono);font-size:11px;color:var(--muted-foreground)}
.pkg-act{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.pkg-form .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}.pkg-form .k::before{content:"//";color:var(--gold);margin-right:.5em}.pkg-form section>.k:first-child{margin-top:0}
.readout{display:flex;align-items:center;height:36px;padding:0 10px;background:var(--s1);border:1px dashed var(--line2);font-family:var(--mono);font-size:12.5px;color:var(--gold)}
.adv{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}.adv.top{margin-top:0;border-top:0;padding-top:0}.adv summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);list-style:none;display:flex;align-items:center;gap:8px}.adv summary::before{content:"+";color:var(--gold);font-weight:600}.adv[open] summary::before{content:"−"}.adv summary::-webkit-details-marker{display:none}.adv>:not(summary){margin-top:10px}
@media(max-width:700px){.pkgs{grid-template-columns:1fr 1fr}.pkg-num b{font-size:28px}}
@media(max-width:480px){.pkgs{grid-template-columns:1fr}}
.cell-2{display:flex;flex-direction:column;gap:3px;line-height:1.25}.cell-2 b{font-weight:500}.cell-2 .dim{font-size:11.5px}
.table.keys th,.table.keys td{padding:6px 8px}.table.keys .kcopy{font-size:12.5px;white-space:nowrap}.table.keys td[data-l=status]{width:1%}.table.keys .sw{white-space:nowrap}.table.keys .sw.on{color:var(--ok)}.table.keys .sw.on i{border-color:var(--ok)}.table.keys .sw.on i::after{background:var(--ok)}.table.keys td.act .cb-del{min-width:34px;padding:4px 8px;font-size:13px;line-height:1}.table.keys .kcopy:hover{color:var(--gold)}.table.keys .kcopy[data-plain]{font-size:11px;white-space:normal;overflow-wrap:anywhere;max-width:260px}.table.keys td{vertical-align:middle;height:46px}.table.keys td.tok{min-width:118px}.table.keys .copy{font-size:13px;padding:0 5px;line-height:1}.meter.sm{height:4px;margin-top:5px;border:0;background:var(--s3)}.meter.sm::after{display:none}
.lims{display:inline-flex;gap:6px;white-space:nowrap}.lim{display:inline-flex;align-items:baseline;gap:3px;padding:1px 6px;border:1px solid var(--border);background:var(--s2);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted-foreground)}.lim b{font-size:12.5px;font-weight:600;color:var(--foreground)}
.row-act{display:inline-flex;gap:4px;justify-content:flex-end;white-space:nowrap}td.act{width:1%;white-space:nowrap}
.cat-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.cat-head h2{flex:1 0 100%}.cat-filter{display:flex;gap:6px;flex:1 1 260px}.cat-filter .input{flex:1;min-width:0}.cat-head .tabs>nav[role=tablist]{margin:0}.cat-bulk{display:flex;gap:6px;margin-left:auto}.cat-bulk .input{min-width:180px}
@media(max-width:700px){.cat-bulk{margin-left:0;width:100%}.cat-bulk .input{flex:1;min-width:0}.cat-head .tabs{width:100%}.cat-stats{grid-template-columns:1fr 1fr}.cat-stats .tile{min-height:0;padding:10px 12px}.cat-stats .tile>b{font-size:26px;margin:4px 0 2px}.cat-stats .tile .sub{font-size:10.5px}}
/* cards, tables, forms */
.card{margin:0;padding:16px 18px}.card>header{padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:10px}.card>header p{color:var(--muted-foreground);font-size:11.5px;margin:0}.card>header .card-action{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.card-action form.inline{display:flex;gap:6px;align-items:center}
.card>section{padding:0}.card>footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding:0}
.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:12.5px}
.table th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;background:transparent}
.table td{font-size:12.5px;height:38px;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}.table td.trunc{max-width:220px}
/* log: combo takes the room; status, the two token columns and the provider sit compact at the right with air between them */
.table.log th,.table.log td{white-space:nowrap}
.table.log th:first-child,.table.log td:first-child{width:1%;padding-right:28px}
.table.log th:nth-child(3),.table.log td:nth-child(3){width:1%;padding-left:28px}
.table.log th.r,.table.log td.num{width:1%;padding-left:36px}
.table.log th:last-child,.table.log td:last-child{width:1%;padding-left:44px;padding-right:18px;min-width:110px}.table td.id a{color:inherit;text-decoration:none}.table tbody tr:hover td{background:var(--s2)}.table tr.dim td{opacity:.6}
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;background:currentColor}
.st.paid,.st.ok{color:var(--ok);border-color:rgba(67,211,138,.5)}.st.pending{color:var(--gold);border-color:rgba(240,180,41,.5)}.st.failed,.st.expired{color:var(--bad);border-color:rgba(255,106,92,.5)}.st.refunded{color:var(--muted-foreground)}
.tabs>nav[role=tablist]{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-bottom:14px;height:auto;padding:0;width:fit-content;max-width:100%}.tabs nav a[role=tab]{flex:none;text-decoration:none;color:var(--ink2);padding:7px 14px;border:1px solid var(--border);background:var(--card);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:6px;align-items:center;justify-content:center;min-width:104px;box-shadow:none;transition:none}.tabs nav a[aria-selected=true]{border-color:var(--gold);color:var(--gold);background:var(--card)}.tabs nav a .cnt{color:var(--muted-foreground)}.tabs nav a[aria-selected=true] .cnt{color:var(--gold)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-21{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stack{display:grid;gap:16px;align-content:start}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.field label,.label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.hint{font-size:11.5px;color:var(--muted-foreground);margin:4px 0 0}.chk{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--foreground);margin-bottom:10px}
.input,.textarea,.select{background:var(--s2);border:1px solid var(--border);color:var(--foreground);font-family:var(--mono);font-size:12.5px}.picker{border:1px solid var(--border);background:var(--s2)}.picker-bar{display:flex;gap:6px;align-items:center;padding:6px;border-bottom:1px solid var(--border)}.picker-bar .input{flex:1;min-width:0}.picker-list{max-height:220px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.picker-list label{display:flex;gap:8px;align-items:center;padding:8px 10px;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--foreground);cursor:pointer;min-height:40px;border-bottom:1px solid var(--border)}.picker-list label:hover{background:var(--s3)}.picker-list input{width:16px;height:16px;accent-color:var(--gold);margin:0}.picker-list label:has(input:checked){background:linear-gradient(90deg,rgba(240,180,41,.12),transparent);color:var(--gold)}
select[multiple].input{height:auto;min-height:180px;padding:6px 8px;line-height:1.7}select[multiple].input option{padding:2px 6px}select[multiple].input option:checked{background:var(--gold);color:var(--on-gold)}
.input:focus,.textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 1px var(--gold)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;margin:0;font-size:13px}.kv dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);padding-top:2px}.kv dd{margin:0}
.keybox{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--border);padding:8px 10px;font-family:var(--mono);font-size:12px}.keybox code{flex:1;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px}.stats b{font-family:var(--disp);font-weight:600;font-size:22px;display:block;margin-top:4px}
.qr{background:#fff;padding:8px;display:block;margin:8px 0}
.alert{margin-bottom:16px;border-left:2px solid var(--gold);background:var(--s1);font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.alert h2{flex:1;word-break:break-all}.alert-act{display:inline-flex;gap:6px;margin-left:auto}.alert[data-variant=destructive]{border-left-color:var(--bad)}.alert h2{font:inherit;margin:0}
.empty{padding:28px 16px;text-align:center}.empty h2{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--foreground)}.empty p{color:var(--muted-foreground);font-size:12.5px}
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}.login .card{width:100%;max-width:380px}
.command{font-family:var(--sans)}.command [role=heading]{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.toaster .toast{border-radius:0;border-left:2px solid var(--gold)}
/* responsive: sidebar handled by Basecoat (<900px → mobile sheet via the menu button) */
@media(max-width:1100px){.bento{grid-template-columns:repeat(4,1fr)}.tile.hero{grid-column:span 4}.tile.wide,.tile.wide2{grid-column:span 4}.tile.tall{grid-column:span 2}.bento-kpis.k4,.bento-kpis.k3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:1400px){.grid-21{grid-template-columns:1fr}}
@media(max-width:700px){.content{padding:14px 14px 48px}.tile>small,.tile h3{font-size:10px;letter-spacing:.06em}.topbar{padding:0 14px;gap:8px}.topbar h1{font-size:18px}.cmd-btn{min-width:0;flex:1}.cmd-btn span,.cmd-btn .kbd,.topbar .crumb{display:none}.bento{grid-template-columns:1fr 1fr}.tile.hero,.tile.wide,.tile.wide2,.tile.tall{grid-column:span 2;grid-row:auto}.tile.hero>b{font-size:56px}.tile>b{font-size:30px}.grid-3{grid-template-columns:1fr}.stats,.bento-kpis.k3{grid-template-columns:1fr 1fr}.trunc{max-width:160px}.kv{grid-template-columns:1fr}}
@media(min-width:901px){#menu-btn{display:none}}
/* page transitions: cross-document View Transitions (Chrome/Edge/Safari 18+),
   sidebar + top bar are pinned so only the content pane crossfades. Older
   browsers just get the short content fade-in below. Nothing runs when the
   user asks for reduced motion. */
@media(prefers-reduced-motion:no-preference){
.sidebar nav a,.btn,.tabs nav a[role=tab]{transition:background-color .15s,color .15s,border-color .15s}
.tabs nav a[role=tab]:hover{color:var(--foreground);border-color:var(--line2)}
@view-transition{navigation:auto}
/* the active-tab highlight glides to the tab you clicked; the sidebar's
   active item does the same across pages */
.tabs nav a[aria-selected=true]{view-transition-name:tab-active}
.sidebar nav a[data-active=true]{view-transition-name:nav-active}
::view-transition-group(tab-active),::view-transition-group(nav-active){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(tab-active),::view-transition-old(nav-active){animation:none;opacity:0}
::view-transition-new(tab-active),::view-transition-new(nav-active){animation:none}
.sidebar nav{view-transition-name:sidebar}.topbar{view-transition-name:topbar}
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
::view-transition-old(root){animation-name:vt-out}::view-transition-new(root){animation-name:vt-in}
::view-transition-group(sidebar),::view-transition-group(topbar){animation:none}
::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(topbar),::view-transition-new(topbar){animation:none;mix-blend-mode:normal}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
/* the view transition (vt-in) already moves the new pane; a second CSS entry animation on .content made every swap jump twice */
}

/* ---- phone ---- */
.dock{display:none}
@media(max-width:700px){
html{font-size:15px}
.input,.textarea,.select,select.input{font-size:16px}
/* topbar: title truncates, search collapses to a 40px icon button (dialog stays reachable), breadcrumb hidden */
.topbar{gap:8px;padding:0 12px;height:52px}.topbar h1{font-size:17px;letter-spacing:.03em;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu-btn,.topbar .btn.cmd-btn,.topbar .btn.actor{flex:0 0 auto;width:40px;height:40px;min-width:40px;padding:0;justify-content:center;gap:0}
.topbar .btn.cmd-btn{margin-left:auto}.topbar .btn.cmd-btn span,.topbar .btn.cmd-btn .kbd{display:none}
.live span{display:none}.live{gap:0}.topbar .btn.actor span{display:none}
.dropdown-menu [role=menuitem],.command [role=menuitem]{min-height:40px}.bgpick+div button{min-height:40px}
.content{padding:12px 12px 84px}
/* tap targets: nothing under 40px */
.btn[data-size=xs]{min-height:40px;padding:4px 10px;font-size:11px}.btn[data-size=sm],.btn:not([data-size]){min-height:40px}
.tabs>nav[role=tablist]{display:flex;overflow-x:auto;width:100%;scrollbar-width:none;gap:4px}.tabs>nav[role=tablist]::-webkit-scrollbar{display:none}.tabs nav a[role=tab]{flex:0 0 auto;min-width:0;min-height:40px;padding:8px 12px}
.topo-card .win a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px}
.sw{min-height:40px}
/* cards: one-line title, note clamped to two lines, actions under the header */
.card,.tile{padding:14px}.card>header{margin-bottom:8px;gap:4px 10px}
.card>header h2{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card>header p{flex:1 1 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.card>header .card-action{margin-left:0;width:100%;gap:8px}
/* inline forms wrap: inputs take a full row, buttons fill the rest; button-only forms share a row */
.card-action form.inline{flex:1 1 auto;flex-wrap:wrap;gap:6px}
.card-action form.inline:has(.input){flex:1 1 100%}
.card>header .card-action .input{flex:1 1 100%;width:100%!important;min-width:0}
.card-action form.inline .btn,.card-action>.btn{flex:1 1 auto;min-height:40px}
.card-action form.inline:has(.input) .btn{flex:1 1 100%}
/* KPI tiles: two per row, smaller numerals, hero CTA in flow */
.tile{min-height:0}.tile>b{font-size:26px;margin:8px 0 4px;overflow-wrap:anywhere}.tile.hero>b{font-size:44px}.tile .sub{font-size:11px}
.tile.hero .cta{position:static;display:inline-flex;margin-top:10px}
/* long values wrap instead of widening the page */
.kv dd,.hint,.prov-warn,.empty p,.alert h2{overflow-wrap:anywhere}
.keybox{flex-wrap:wrap}.card>footer>.keybox{flex:1 1 100%}.keybox code{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere}
.card section hr,.card>section>hr{margin:12px 0}
.recovery pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* stacked tables (.table.stack-m): every row is a compact card.
   Title line: the primary cell (.grow or .id) in bold with the status badge on the right.
   Secondary cells follow on one dim line separated by dots, labels kept only for numbers
   and dates; .long and colspan cells take a full row; td.act is the last row and wraps. */
.table.stack-m,.table.stack-m tbody{display:block;width:100%}.table.stack-m thead{display:none}
.table.stack-m tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;width:100%;border:1px solid var(--border);background:var(--s2);padding:10px 12px;margin-bottom:8px}
.table.stack-m tr::after{content:"";order:-1;flex:1 1 100%;height:0}
.table.stack-m td{display:block;width:auto;height:auto;min-width:0;border:0;padding:0;white-space:normal;font-size:12px;color:var(--ink2);text-align:left}
.table.stack-m td:empty{display:none}
.table.stack-m td.grow,.table.stack-m td.id{order:-3;flex:1 1 0;color:var(--foreground);font-size:14px;font-weight:600;overflow-wrap:anywhere}
.table.stack-m td[data-l=status]{order:-2;flex:0 0 auto;margin-left:auto}
.table.stack-m td.long,.table.stack-m td[colspan]{flex:1 1 100%}
.table.stack-m td.trunc{max-width:none;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.table.stack-m td .trunc{display:block;max-width:100%}
.table.stack-m td::before{content:attr(data-l) " ";font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.table.stack-m td:not(.num):not(.dim):not([data-l=dipakai]):not([data-l=expiry]):not([data-l=referral]):not([data-l="masa aktif"]):not([data-l=terakhir]):not([data-l=dibuat]):not([data-l=token]):not([data-l=sampai])::before,.table.stack-m td[data-l=key]::before,.table.stack-m td[data-l=nama]::before,.table.stack-m td[data-l=waktu]::before,.table.stack-m td[colspan]::before,.table.stack-m td.grow::before,.table.stack-m td.id::before,.table.stack-m td.act::before,.table.stack-m td[data-l=status]::before{content:none}
.table.stack-m td::after{content:"·";margin-left:.45em;color:var(--muted-foreground)}
.table.stack-m td.id .badge{margin-left:5px}
.table.stack-m td.grow::after,.table.stack-m td.id::after,.table.stack-m td.act::after,.table.stack-m td[data-l=status]::after,.table.stack-m td.long::after,.table.stack-m td[colspan]::after,.table.stack-m td:last-child::after,.table.stack-m td:has(+ td.act)::after,.table.stack-m td:has(+ td[data-l=status])::after,.table.stack-m td:has(+ td.long)::after,.table.stack-m td:has(+ td[colspan])::after,.table.stack-m td:has(+ td:empty)::after,.table.stack-m td:has(+ td.grow)::after,.table.stack-m td:has(+ td.id)::after{content:none}
.table.stack-m td.act{order:9;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px;padding-top:8px;border-top:1px dashed var(--border)}
.table.stack-m td.act .row-act{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:6px;justify-content:flex-start;white-space:normal}
.table.stack-m td.act form.inline{display:inline-flex}
.table.stack-m tbody tr:hover td{background:transparent}
/* keys: name + status, key line with salin/lihat, jenis · expiry · limit · dipakai, token meter, actions */
.table.stack-m.keys td.id{order:0;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;font-weight:400;color:var(--ink2)}
.table.stack-m.keys td[data-l=jenis]{order:1}.table.stack-m.keys td[data-l=expiry]{order:2}.table.stack-m.keys td[data-l=limit]{order:3}.table.stack-m.keys td[data-l=dipakai]{order:4}
.table.stack-m.keys td.tok{order:5;flex:1 1 100%;margin-top:2px}.table.stack-m.keys td.tok::after{content:none}.table.stack-m.keys td[data-l=jenis]::after{content:"·"}
.table.stack-m.keys td[data-l=nama] b{font-size:15px}
/* models: switch sits left of the id on the title line; konteks · uji below; Uji / jual / hapus last */
.table.stack-m.models td.act:first-child{order:-4;flex:0 0 auto;display:block;width:auto;margin:0;padding:0;border:0}
/* katalog: jual button right of the model, supply chips on their own row */
.table.stack-m.cat td.act:first-child{order:-2;flex:0 0 auto;display:block;width:auto;margin:0 0 0 auto;padding:0;border:0}
.table.stack-m.cat td[data-l=supply]{flex:1 1 100%}.table.stack-m.cat td[data-l=supply]::after,.table.stack-m.cat td[data-l=multiple]::after{content:none}.table.stack-m.cat td.id-cell{display:none}
/* bottom dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:rgba(13,15,18,.94);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.dock a,.dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--muted-foreground);text-decoration:none;background:none;border:0;font:500 9px var(--mono);letter-spacing:.03em;text-transform:uppercase;min-width:0}.dock span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dock svg{width:20px;height:20px}
.dock [data-active=true]{color:var(--gold)}.dock [data-active=true]::after{content:"";position:absolute;top:-7px;left:30%;right:30%;height:2px;background:var(--gold)}
.dock-n{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;background:var(--gold);color:var(--on-gold);font:600 10px/16px var(--mono);text-align:center;font-style:normal}
.pkg-form .grid-3,.key-new .grid-3{grid-template-columns:1fr 1fr}
/* phone page transitions: content slides like a native stack, dock + top bar stay put */

.dock{view-transition-name:dock}.dock [data-active=true]{view-transition-name:dock-active}
::view-transition-group(dock),::view-transition-old(dock),::view-transition-new(dock){animation:none}
::view-transition-group(dock-active){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation:vt-out-m .2s ease both}
html[data-dir=fwd]::view-transition-new(root){animation:vt-in-r .26s cubic-bezier(.2,.8,.2,1) both}
html[data-dir=back]::view-transition-new(root){animation:vt-in-l .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out-m{to{opacity:0;transform:translateX(-6%)}}
@keyframes vt-in-r{from{opacity:0;transform:translateX(10%)}}
@keyframes vt-in-l{from{opacity:0;transform:translateX(-10%)}}
}

/* ---- phone/tablet: floating drawer card from the left (inset, not full-bleed) ---- */
@media(max-width:900px){
/* grid children default to min-width:auto, so a wide table would widen the column instead of scrolling inside .table-wrap */
.stack>*,.grid-2>*,.grid-21>*,.grid-3>*,.bento>*{min-width:0}.table-wrap{max-width:100%}
.sidebar[aria-hidden=false]{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.sidebar nav{top:12px!important;bottom:12px!important;left:12px!important;right:auto!important;width:min(84vw,320px)!important;border:1px solid var(--line2)!important;background:var(--s1);padding:14px 12px calc(12px + env(safe-area-inset-bottom));overflow:auto;scrollbar-width:none;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:translate .26s cubic-bezier(.2,.8,.2,1)!important}
.sidebar[aria-hidden=true] nav{translate:calc(-100% - 12px) 0!important}
.sidebar nav::-webkit-scrollbar{display:none}
.sidebar nav>header{flex-direction:row!important;align-items:center;justify-content:space-between;padding:2px 6px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.sidebar nav>header .wordmark{font-size:19px}
.sidebar nav>header::after{content:"×";font:400 22px/1 var(--sans);color:var(--muted-foreground);width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border)}
.sidebar nav>section{display:block;overflow:visible;flex:none;min-height:auto}
.sidebar nav h3{margin:12px 0 4px;padding:0 8px}
.sidebar nav ul{display:block}
.sidebar nav ul li>a{padding:11px 10px;font-size:14.5px;gap:12px;border-left:0;min-height:44px}
.sidebar nav ul li>a svg{width:18px;height:18px;color:var(--muted-foreground)}
.sidebar nav ul li>a[data-active=true]{background:linear-gradient(90deg,rgba(240,180,41,.16),transparent);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}.sidebar nav ul li>a[data-active=true] svg{color:var(--gold)}
.sidebar nav>footer{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
}

.reply{margin-top:8px;padding:8px 10px;border-left:2px solid var(--gold);background:rgba(240,180,41,.06)}.replybox{display:inline-block;margin-right:6px;text-align:left}.replybox summary{list-style:none;cursor:pointer}.replybox summary::-webkit-details-marker{display:none}.replybox form{margin-top:8px;min-width:280px}.replybox .textarea{width:100%;background:var(--s2);border:1px solid var(--border);color:inherit;padding:8px;font:13px var(--sans)}.replybox .row{margin-top:6px}
.reply.buyer{border-left-color:var(--line2);background:rgba(255,255,255,.03)}

/* ---- monitor: topology (varian 1: kartu bermeter) ---- */
.topo-card .card-action{display:flex;align-items:center;gap:14px}
.topo-card .win{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;font:11px var(--mono)}.topo-card .win a{padding:4px 9px;color:var(--muted-foreground);text-decoration:none}.topo-card .win a.on{background:var(--s3);color:var(--foreground)}
.topo-card .live{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--ok)}.topo-card .live::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 3px rgba(62,207,142,.15)}
.topo-wrap{overflow:auto hidden;padding:0 0 6px;position:relative}
.stage{position:relative;width:100%;min-width:900px;margin:0;font-family:var(--sans)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 18px);-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 80% at 50% 50%,#000 30%,transparent 100%)}
.stage .edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.edges path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.edges .u{stroke:var(--background);opacity:.9}.edges .l{stroke:rgba(255,255,255,.13)}.edges .l.on{stroke:var(--gold)}.edges .ue .l.on{stroke:#6fc3ff}.edges .pe .l.on{stroke:var(--ok)}.edges .l.on.flow{stroke-dasharray:7 11;animation:tflow 1.1s linear infinite}.edges .l.bad{stroke:var(--bad);opacity:.6}.edges .l.idle{stroke-dasharray:3 6}
@keyframes tflow{to{stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce){.edges .l.on.flow{animation:none}}
.stage .col{position:absolute;display:flex;align-items:center;gap:10px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
.stage .col b{font-weight:500;color:var(--foreground);letter-spacing:.02em;text-transform:none;font-size:11px;background:var(--s3);border:1px solid var(--line2);border-radius:999px;padding:2px 8px}.stage .col::after{content:"";flex:1;height:1px;background:var(--border);min-width:40px}
.tcard{position:absolute;width:29.2%;height:64px;background:linear-gradient(180deg,#191d24,#151920);border:1px solid var(--line2);border-radius:10px;padding:0 12px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:1fr 1fr;gap:0 12px;align-items:center;align-content:center;box-shadow:0 8px 20px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.tcard:hover{border-color:var(--gold);box-shadow:0 14px 30px -14px rgba(0,0,0,.95),0 0 0 3px rgba(212,169,66,.12)}
.tcard.on{border-color:rgba(62,207,142,.55)}.tcard.bad{border-color:rgba(240,106,106,.6)}.tcard.idle{border-style:dashed;opacity:.75;background:transparent}.tcard.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,169,66,.14)}
.tcard .av{grid-column:1;grid-row:1/3;width:36px;height:36px;border-radius:9px;background:var(--s3);display:grid;place-items:center;font:600 12px var(--mono);color:var(--ink2);position:relative}
.tcard .av::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:999px;background:var(--muted-foreground);border:2px solid #151920}
.tcard.on .av::after{background:var(--ok)}.tcard.bad .av::after{background:var(--bad)}.tcard.idle .av::after{background:transparent;border-color:var(--line2)}
.tcard .name{grid-column:2;grid-row:1;align-self:end;font:600 13.5px var(--mono);color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tcard .num{grid-column:3;grid-row:1/3;text-align:right}.tcard .num b{display:block;font:700 24px/1 var(--disp);letter-spacing:.01em;color:var(--foreground)}.tcard .num small{display:block;font:9.5px var(--mono);color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.tcard .meters{grid-column:2;grid-row:2;align-self:start;display:flex;gap:8px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;margin-top:3px}
.tcard .m{display:flex;align-items:center;gap:6px;font:10.5px var(--mono);color:var(--muted-foreground);white-space:nowrap}.tcard .m em{font-style:normal;color:var(--ink2)}
.tcard .bar{width:40px;height:4px;border-radius:3px;background:var(--border);position:relative;overflow:hidden}.tcard .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold),#f3cf6e);border-radius:3px}
.tcard .m.full .bar i{background:var(--bad)}.tcard .m.full em{color:var(--bad)}
.tcard .slots{display:inline-flex;gap:3px}.tcard .slots i{width:9px;height:9px;border-radius:2px;border:1px solid var(--line2);background:var(--background)}.tcard .slots i.on{background:var(--gold);border-color:var(--gold)}.tcard .m.full .slots i.on{background:var(--bad);border-color:var(--bad)}
.tcard .note{font:10.5px var(--mono);color:var(--muted-foreground);white-space:nowrap}.tcard .note.bad{color:var(--bad)}
.tcard .chips{display:flex;gap:5px;flex-wrap:nowrap;min-width:0;overflow:hidden}.tcard .chip{font:10.5px var(--mono);color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:1px 7px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.tcard .chip::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--ok)}
.stage .hub{position:absolute;width:18.25%;border-radius:14px;background:linear-gradient(180deg,#1b1f27,#141820);border:1px solid var(--gold);padding:16px 16px 14px;text-align:center}
.stage .hub::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(closest-side,rgba(212,169,66,.16),transparent);z-index:-1}
.stage .hub .lbl{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.stage .hub .big{font:800 54px/1 var(--disp);margin:6px 0 0;letter-spacing:.01em;background:linear-gradient(180deg,#fff,#cfd3da);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage .hub .sub{font:11px var(--mono);color:var(--muted-foreground);margin-top:2px}
.stage .hub .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.stage .hub .row b{display:block;font:700 20px/1 var(--disp);color:var(--foreground)}.stage .hub .row small{display:block;font:9.5px var(--mono);color:var(--muted-foreground);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}.stage .hub .row .g b{color:var(--gold)}
.stage .hub .spark{display:flex;align-items:flex-end;gap:3px;height:28px;margin-top:12px}.stage .hub .spark i{flex:1;background:var(--line2);border-radius:2px 2px 0 0}.stage .hub .spark i.on{background:linear-gradient(180deg,#f3cf6e,var(--gold))}
.stage .hub .pill{position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;background:var(--gold);color:#1a1300;font:600 11px var(--mono);padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(212,169,66,.7)}
.tdetail{margin:0 16px 6px;background:var(--s2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px}
.tdetail header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.tdetail header b{font:600 13.5px var(--mono);color:var(--foreground)}.tdetail header .btn:last-child{margin-left:auto}
.tdetail dl{margin:0;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 14px;font:11.5px var(--mono)}.tdetail dt{color:var(--muted-foreground)}.tdetail dd{margin:0;color:var(--foreground)}
.topo-card .legend{display:flex;gap:22px;padding:11px 16px;border-top:1px solid var(--border);font:11px var(--mono);color:var(--muted-foreground);flex-wrap:wrap;align-items:center;margin:0}
.topo-card .legend i{display:inline-block;width:16px;height:3px;background:var(--line2);vertical-align:middle;margin-right:6px;border-radius:2px}.topo-card .legend i.g{background:linear-gradient(90deg,rgba(212,169,66,.4),var(--gold))}.topo-card .legend i.b{background:var(--bad)}.topo-card .legend .r{margin-left:auto}
@media(max-width:700px){.tdetail dl{grid-template-columns:auto 1fr}}
/* partial swap: only the named element crossfades, the page stays still */
html.vt-partial::view-transition-old(root),html.vt-partial::view-transition-new(root){animation:none}
::view-transition-old(partial){animation:vt-out .14s ease-out both}::view-transition-new(partial){animation:vt-in .22s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(4px)}}
.table th.r{text-align:right}
/* topology on phones: three stacked lists, no diagram */
@media(max-width:700px){
.topo-wrap{padding:0 12px 8px}
.stage{width:auto!important;height:auto!important;transform:none!important;margin:0!important;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.stage::before,.stage .edges{display:none}
.stage .col{position:static;width:auto!important;margin:10px 0 2px}
.stage .col.c-user{order:1}.stage .tcard.u{order:2}.stage .col.c-router{order:3}.stage .hub{order:4}.stage .col.c-prov{order:5}.stage .tcard.p{order:6}
.tcard{position:static;width:100%;height:auto;min-height:60px;padding:8px 12px}
.tcard .meters{white-space:normal;overflow:visible;flex-wrap:wrap;gap:6px 10px}
.stage .hub{position:relative;left:0!important;top:0!important;width:100%;margin:6px 0 24px;padding:14px}.stage .hub::before{display:none}.stage .hub .big{font-size:44px}
.tcard .chips{flex-wrap:wrap;overflow:visible}
.tdetail{margin:8px 12px}
.topo-card .legend{gap:10px 16px;padding:10px 12px}.topo-card .legend .r{margin-left:0;flex-basis:100%}
.topo-card .card-action{flex-wrap:wrap;gap:8px}
}

/* provider: model switch (a submit button styled as a track), key list, kind badge */
.sw{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.sw i{display:inline-block;width:28px;height:16px;border:1px solid var(--line2);background:var(--s2);position:relative;transition:border-color .15s,background-color .15s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--muted-foreground);transition:transform .15s,background-color .15s}
.sw.on{color:var(--gold)}.sw.on i{border-color:var(--gold)}.sw.on i::after{transform:translateX(12px);background:var(--gold)}
.sw:hover i{border-color:var(--gold)}.sw:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.tres{white-space:nowrap;font-size:12px}.tres .ok{color:var(--ok)}.tres .bad{color:var(--bad)}.mname{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-align:left}.mname:hover{color:var(--gold)}.mname:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.card>header .card-action .input{width:180px}.prov-warn{margin:0 0 10px;padding:8px 10px;border:1px solid rgba(255,106,92,.5);font-family:var(--mono);font-size:12px;color:var(--bad)}.prov-warn span{display:block}

/* combo: target builder. Chosen list left (ordered rows with naik / turun / hapus), model picker right (filter + provider groups of chips, scrolls inside itself) */
.tb{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tb>.field{margin-bottom:0;min-width:0}
.tb-rows{list-style:none;margin:0;padding:0;border:1px solid var(--border);background:var(--s2)}
.tb-rows:empty{display:none}
.tb-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:2px 8px;border-bottom:1px solid var(--border)}.tb-row:last-child{border-bottom:0}
.tb-row .n{width:18px;flex:none;text-align:right;font-size:11px;color:var(--muted-foreground)}
.tb-row .t{flex:1;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
.tb-row .row-act{display:inline-flex;gap:4px;flex:none}
.tb-row .btn{min-width:40px;min-height:40px;padding:0 8px;font-size:14px;line-height:1}
.tb-row .btn:disabled{opacity:.3;cursor:default}
.tb-empty{margin:0;padding:12px 10px;border:1px dashed var(--line2);color:var(--muted-foreground)}
.tb-pick{border:1px solid var(--border);background:var(--s2);min-width:0}
.tb-filter{padding:6px;border-bottom:1px solid var(--border)}.tb-filter .input{width:100%;min-height:40px}
.tb-groups{max-height:360px;overflow:auto}
.tb-g summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;font-family:var(--mono);font-size:12px;color:var(--foreground);border-bottom:1px solid var(--border)}
.tb-g summary::-webkit-details-marker{display:none}
.tb-g summary::before{content:"+";color:var(--gold);font-weight:600;width:10px}.tb-g[open] summary::before{content:"\2212"}
.tb-g summary:hover{background:var(--s3)}.tb-g summary .tb-n{margin-left:auto;font-size:11px}
.tb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)}
.tb-chips form.tb-post{display:contents}
.tb-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;font:11.5px var(--mono);border:1px solid var(--line2);background:var(--s1);color:var(--ink2);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.tb-chip:hover,.tb-chip:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.tb-chip.on,.tb-chip:disabled{border-color:var(--gold);color:var(--gold);background:linear-gradient(90deg,rgba(240,180,41,.12),transparent);cursor:default}
.tb-chip.on::after{content:"dipakai";margin-left:8px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.tb-none,.tb-nomatch{margin:0;padding:10px}
.tb [hidden],.tb-pick [hidden]{display:none!important}
@media(max-width:1100px){.tb{grid-template-columns:1fr}}
@media(max-width:700px){.tb-groups{max-height:300px}.tb-chip{min-height:40px}}

/* combo: inline editor on /combos. Row controls (strategy select, multiplier input, status toggle) and the panel row (tr.combo-edit) slotted under a combo or, for "+ Combo baru", at the top of the table */
.table.combos td.cb-name{width:1%;white-space:nowrap}.table.combos td.cb-name b{font-size:12.5px}.table.combos .cb-warn{display:block;margin-left:12px;line-height:1.4}
.table.combos td.cb-chain{max-width:none;min-width:180px;font-size:12px;white-space:normal;overflow-wrap:anywhere;line-height:1.8}.table.combos td.cb-chain .cb-sep{margin:0 6px;color:var(--gold)}
.cb-ctl{min-height:40px}
.table.combos select.cb-ctl{min-width:112px;max-width:100%;padding:0 8px}
.table.combos .cb-rate{width:64px;padding:0 8px;text-align:right}
.cb-x{margin-right:4px;font-size:11px}
.cb-hint{margin-left:6px;font:11px var(--mono);white-space:nowrap}
.cb-warn{margin-left:6px;font:11px var(--mono)}
.table.combos td[data-l=status]{width:1%}.table.combos .sw{white-space:nowrap}.table.combos .sw.on{color:var(--ok)}.table.combos .sw.on i{border-color:var(--ok)}.table.combos .sw.on i::after{background:var(--ok)}
.table.combos td.act .row-act{align-items:center;gap:6px}.table.combos td.act .cb-del{min-width:34px;padding:4px 8px;font-size:13px;line-height:1}
.table.combos tr.combo-edit td,.table.combos tbody tr.combo-edit:hover td{background:var(--s2);padding:12px 14px 14px;white-space:normal;height:auto;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.cp-new{display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr;gap:12px 16px;align-items:start;margin-bottom:12px}.cp-new .field{margin-bottom:0;min-width:0}.cp-new .chk{margin:0;min-height:40px}
.cp-rename{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--border)}.cp-rename .input{width:280px;max-width:100%;min-height:40px}.cp-rename .btn{min-height:40px}.cp-rename-hint{margin:0;flex:1 1 100%}
.cp-uji{font-size:11px;text-decoration:none;border-bottom:1px dotted currentColor}.cp-uji:hover{color:var(--gold)}
.cp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cp-title{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.cp-add{margin-left:auto;min-height:40px;min-width:220px;max-width:100%;padding:0 8px}
.cp-rows{list-style:none;margin:0;padding:0;border:1px solid var(--border);background:var(--s1)}.cp-rows:empty{display:none}
.cp-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:2px 8px;border-bottom:1px solid var(--border)}.cp-row:last-child{border-bottom:0}
.cp-row .n{width:24px;flex:none;text-align:right;font-size:11px;color:var(--muted-foreground)}
.cp-row .dot{flex:none;margin:0;background:var(--line2)}.cp-row .dot.ok{background:var(--ok)}.cp-row .dot.bad{background:var(--bad)}
.cp-row .t{flex:1;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
.cp-row .row-act{flex:none;gap:4px}
.cp-row .btn{min-width:40px;min-height:40px;padding:0 8px;font-size:14px;line-height:1}.cp-row .btn:disabled{opacity:.3;cursor:default}
.cp-empty{margin:0;padding:12px 10px;border:1px dashed var(--line2);color:var(--muted-foreground)}
.cp-foot{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px}.cp-foot .row-act{margin-left:auto;gap:6px}.cp-foot .btn{min-height:40px}
.cp-count{font-size:11px}.cp-msg{font:11.5px var(--mono);overflow-wrap:anywhere}
.table.combos [hidden]{display:none!important}
@media(max-width:1100px){.cp-new{grid-template-columns:1fr 1fr}.table.combos td{padding:6px 7px}.table.combos td.cb-name{white-space:normal;max-width:190px}.table.combos select.cb-ctl{min-width:100px}.table.combos .cb-rate{width:56px}.table.combos td.act .row-act{gap:4px}}
@media(max-width:700px){
.table.stack-m.combos td.cb-chain{flex:1 1 100%;max-width:none;font-size:11.5px}.table.stack-m.combos td.cb-chain::after{content:none}
.table.stack-m.combos td[data-l=strategi]{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0}.table.stack-m.combos td[data-l=strategi] form{display:flex;flex:1;min-width:0}.table.stack-m.combos select.cb-ctl{flex:1;min-width:0;width:100%}
.table.stack-m.combos td[data-l=pengali]{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.table.stack-m.combos td[data-l=strategi]::after,.table.stack-m.combos td[data-l=pengali]::after{content:none}
.table.stack-m.combos td[data-l=status],.table.stack-m.keys td[data-l=status]{width:auto}.table.stack-m.combos td[data-l=status] form{display:flex;align-items:center;gap:6px}
.table.stack-m.combos tr.combo-edit{padding:0}.table.stack-m.combos tr.combo-edit td{padding:12px;border-top:0}
.cp-new{grid-template-columns:1fr}
.cp-top{flex-direction:column;align-items:stretch}.cp-add{margin-left:0;width:100%;min-width:0}
.cp-foot .row-act{margin-left:0;flex:1 1 100%}.cp-foot .row-act .btn{flex:1 1 auto}
.cb-hint{white-space:normal}
}

/* monitor live feed: only newly-morphed rows animate in (rows carry a stable
   id, so idiomorph keeps existing rows and inserts/removes just the diff) */
@keyframes lr-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#mon-rows tr.lr,#log-rows tr.lr{animation:lr-in .18s ease-out}
@media (prefers-reduced-motion:reduce){#mon-rows tr.lr,#log-rows tr.lr{animation:none}}

/* ---- Kuota (/quota): tab bar, per-account cards ---- */
.qbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px}
.qbar .tabs{width:auto}
.qbar .tabs>nav[role=tablist]{margin-bottom:0}
.qbar form{margin-left:auto}
.tile>b.qwarn{color:var(--warn)}
.qg{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);margin:12px 0 2px}
.qrow{display:flex;align-items:baseline;gap:8px;font-size:12.5px;margin-top:8px}
.qrow .num{margin-left:auto}
.qrow .ok{color:var(--ok)}
.qrow .warn{color:var(--warn)}
.qcard>footer>.hint{flex:1 1 100%}

/* monitor topology: a single soft pulse travels along a live route; duration and
   dash pattern come from the route's own request rate (monitor.go routePulse) */
.edges .pulse{fill:none;stroke:#fff;stroke-width:2;stroke-opacity:.9;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:7 93;stroke-dashoffset:100;animation:route-pulse 2.2s linear infinite}
@keyframes route-pulse{to{stroke-dashoffset:0}}
.edges .port{fill:var(--card);stroke:var(--gold);stroke-width:1.25;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.edges .pulse{animation:none;stroke-dasharray:none;stroke-opacity:.5}}

/* topology colour: users cyan, providers green, router gold */
.stage .col.c-user b{color:#8fd0ff;border-color:rgba(111,195,255,.35);background:rgba(111,195,255,.08)}
.stage .col.c-prov b{color:#7fe0b0;border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.08)}
.stage .col.c-router{color:var(--gold)}.stage .col.c-router::after{background:rgba(212,169,66,.35)}
.tcard{background:linear-gradient(180deg,#1a1f28,#141820)}
.tcard.u .av{background:linear-gradient(135deg,#1e3a5c,#162c48);color:#8fd0ff}
.tcard.p .av{background:linear-gradient(135deg,#1c3b31,#142a24);color:#7fe0b0}
.tcard.idle .av{background:var(--s3);color:var(--muted-foreground)}
.tcard.u.on{border-color:rgba(111,195,255,.6);box-shadow:0 8px 20px -14px rgba(0,0,0,.9),0 0 0 3px rgba(111,195,255,.1)}
.tcard.p.on{border-color:rgba(62,207,142,.6);box-shadow:0 8px 20px -14px rgba(0,0,0,.9),0 0 0 3px rgba(62,207,142,.1)}
.tcard.u.on .av::after{background:#6fc3ff}
.tcard.u .bar i{background:linear-gradient(90deg,#4aa8ea,#8fd0ff)}.tcard.u .slots i.on{background:#6fc3ff;border-color:#6fc3ff}
.tcard.p .num b{color:#a9f0cc}.tcard.p.idle .num b{color:var(--muted-foreground)}
.tcard.u .num b{color:#bfe3ff}
.stage .hub{box-shadow:0 0 0 1px rgba(212,169,66,.22),0 18px 40px -20px rgba(212,169,66,.5)}
.stage .hub::before{background:radial-gradient(closest-side,rgba(212,169,66,.22),transparent)}
.topo-card .legend i.g{background:linear-gradient(90deg,#6fc3ff,var(--ok))}