:root{color-scheme:only light}
:root{--bg:#f5f6f8;--card:#fff;--tx:#1b2430;--mu:#6b7686;--bd:#dde1e8;--ac:#0b5fa5;--ac2:#e6f0fa;--dn:#c0392b;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media not all{:root:not([data-theme="light"]){--bg:#12161c;--card:#1b222b;--tx:#e8ecf1;--mu:#93a0b0;--bd:#2c3642;--ac:#5aa9ea;--ac2:#1d2f42;--dn:#ef7b6e}}
:root[data-theme="dark"]{--bg:#12161c;--card:#1b222b;--tx:#e8ecf1;--mu:#93a0b0;--bd:#2c3642;--ac:#5aa9ea;--ac2:#1d2f42;--dn:#ef7b6e}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{background:var(--card);border-bottom:1px solid var(--bd);padding:12px 16px}
h1{font-size:17px;margin:0 0 10px}
.stats{display:flex;gap:8px;flex-wrap:wrap}.stat{background:var(--ac2);color:var(--ac);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600}
nav{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--bd)}
nav button{border:0;background:none;color:var(--mu);padding:8px 14px;border-radius:8px;font:600 13px inherit;font-family:inherit;white-space:nowrap;cursor:pointer}
nav button.on{background:var(--ac);color:var(--onac,#fff)}
main{padding:14px;max-width:1100px;margin:auto}
.bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.bar input{flex:1;min-width:140px}
button.b,.b{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit}
.p{background:var(--ac);color:var(--onac,#fff);border-color:var(--ac)}.d{color:var(--dn)}
.w{overflow-x:auto;background:var(--card);border:1px solid var(--bd);border-radius:10px}
table{border-collapse:collapse;width:100%}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
th{font-size:12px;color:var(--mu);text-transform:uppercase}td.a{display:flex;gap:4px}td.a button{padding:3px 8px;font-size:12px}
.empty{padding:30px;text-align:center;color:var(--mu)}
input,select,textarea{width:100%;padding:8px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}
.m{position:fixed;inset:0;background:#0008;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:16px;z-index:9}
.mc{background:var(--card);border-radius:12px;padding:16px;width:100%;max-width:760px}
.g{display:grid;grid-template-columns:1fr 1fr;gap:10px}.f{grid-column:1/-1}
label{font-size:12px;color:var(--mu);display:block;margin-bottom:3px}.ck{display:flex;flex-wrap:wrap;gap:4px 14px}.ck label{display:flex;gap:5px;align-items:center;color:var(--tx);font-size:13px;margin:0}.ck input{width:auto}
.ir{display:grid;grid-template-columns:3fr 1fr 1fr 1.5fr auto;gap:6px;margin-bottom:6px}
.badge{padding:2px 8px;border-radius:99px;background:var(--ac2);color:var(--ac);font-size:12px}
@media(max-width:600px){.g{grid-template-columns:1fr}.ir{grid-template-columns:1fr 1fr}}
#pv{display:none}
@media print{body>*:not(#pv){display:none!important}#pv{display:block!important;color:#000;background:#fff;padding:20px}}
.doc table td,.doc table th{border:1px solid #999;white-space:normal;color:#000}.doc h2{margin:0}
header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}header h1{margin:0}.sub{color:var(--mu);font-size:12px}#who{margin-left:auto;font-size:13px}.stats{width:100%}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kp{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px}.kl{font-size:12px;color:var(--mu)}.kv{font-size:24px;font-weight:700;color:var(--ac)}.ks{font-size:11px;color:var(--mu)}
.dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px}.bx{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px;min-width:0}.bx.f{grid-column:1/-1}.bx h3{margin:0 0 8px;font-size:14px}
.br{display:grid;grid-template-columns:130px 1fr 32px;gap:8px;align-items:center;margin:4px 0;font-size:12px}.br div{background:var(--ac2);border-radius:99px;height:10px}.br i{display:block;height:100%;background:var(--ac);border-radius:99px}.br b{text-align:right}.br span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh{margin:0 0 12px;font-size:18px}.dh small{font-weight:400;color:var(--mu);font-size:12px}
.badge.win{background:#2e9e5b33;color:#2e9e5b}.badge.loss{background:#c0392b33;color:var(--dn)}.badge.pend{background:#e0a80033;color:#c98a00}
select.ss{width:auto;padding:3px 6px;font-size:12px;font-weight:600}.ss.win{color:#2e9e5b}.ss.loss{color:var(--dn)}.ss.pend{color:#c98a00}

/* ===== Sidebar layout ===== */
.m{z-index:40}
#sb{position:fixed;left:0;top:0;bottom:0;width:250px;background:var(--card);border-right:1px solid var(--bd);overflow-y:auto;display:flex;flex-direction:column;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.brand{padding:16px;border-bottom:1px solid var(--bd)}.brand b{display:block;font-size:15px}.brand span{font-size:11px;color:var(--mu)}
#sb nav{display:block;overflow:visible;padding:6px 8px;border:0;background:none;flex:1}
#sb nav button{display:block;width:100%;text-align:left;padding:8px 12px;margin:1px 0;white-space:normal;font-weight:500}
#sb nav button.on{font-weight:700}
.nt{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.04em;padding:12px 12px 4px}
#who{margin:0;padding:12px 14px;border-top:1px solid var(--bd);font-size:13px}#who button{margin-top:6px;width:100%}
.ct{margin-left:250px}
.ct header{border-bottom:1px solid var(--bd)}.ct header h2{margin:0;font-size:16px}
#mb{display:none}
@media(max-width:800px){#sb{transform:translateX(-100%);transition:transform .2s;box-shadow:2px 0 12px #0004}body.open #sb{transform:none}.ct{margin-left:0}#mb{display:inline-block}}

/* ===== Latar pastel transparan per bagian ===== */
:root{--sec-sales:rgba(96,165,250,.17);--sec-proc:rgba(74,222,128,.17);--sec-ops:rgba(251,146,60,.17);--sec-users:rgba(167,139,250,.20);--sec-dash:rgba(148,163,184,.10)}
.ct{min-height:100vh;transition:background .25s}
body[data-sec=sales] .ct{background:var(--sec-sales)}
body[data-sec=proc] .ct{background:var(--sec-proc)}
body[data-sec=ops] .ct{background:var(--sec-ops)}
body[data-sec=users] .ct{background:var(--sec-users)}
body[data-sec=dash] .ct{background:var(--sec-dash)}
.ng{margin:6px 0;padding:2px 4px 4px;border-radius:10px}
.ng[data-s=sales]{background:var(--sec-sales)}
.ng[data-s=proc]{background:var(--sec-proc)}
.ng[data-s=ops]{background:var(--sec-ops)}
.ng[data-s=users]{background:var(--sec-users)}
.ct header{background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(4px)}

/* ===== Editor dokumen di dalam aplikasi ===== */
main.wide{max-width:none;margin:0;padding:0}
.docbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--bd);font-size:13px}
.docbar .mu{color:var(--mu);font-size:12px;flex:1}
.docf{display:block;width:100%;height:calc(100vh - 104px);min-height:560px;border:0;background:#fff}
body.docmode .ct header .stats{display:none}

/* Layar penuh untuk editor dokumen */
body.docwide #sb{display:none}
body.docwide .ct{margin-left:0}
body.docwide .ct header{display:none}
body.docwide .docf{height:calc(100vh - 50px)}

/* ===== Ikon menu & badge ===== */
.brand{display:flex;align-items:center;gap:10px}.brand div{display:flex;flex-direction:column}.brand .logo{width:34px;height:34px;flex:none;color:var(--ac)}
#sb nav button{display:flex;align-items:center;gap:10px}
#sb nav button .ic{width:18px;height:18px;flex:none;opacity:.9}
#sb nav button .nl{flex:1}
.ng[data-s=dash] .ic{color:#64748b}.ng[data-s=sales] .ic{color:#2563eb}.ng[data-s=proc] .ic{color:#16a34a}.ng[data-s=ops] .ic{color:#ea580c}.ng[data-s=chat] .ic{color:#0d9488}.ng[data-s=users] .ic{color:#7c3aed}
#sb nav button.on .ic{color:var(--onac,#fff);opacity:1}
.bdg{background:#ef4444;color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px;min-width:18px;text-align:center;line-height:1.5}
:root{--sec-chat:rgba(45,212,191,.17)}
body[data-sec=chat] .ct{background:var(--sec-chat)}
.ng[data-s=chat]{background:var(--sec-chat)}

/* ===== Pesan Internal ===== */
body.chatmode .ct header .stats{display:none}
.chat{display:grid;grid-template-columns:272px 1fr;height:calc(100vh - 50px);min-height:420px}
.chl{overflow-y:auto;background:color-mix(in srgb,var(--card) 88%,transparent);border-right:1px solid var(--bd);padding:8px}
.chs{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);padding:12px 8px 4px}
.chi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--tx);padding:7px 8px;border-radius:9px;cursor:pointer;font:inherit}
.chi:hover{background:var(--ac2)}.chi.on{background:var(--ac);color:var(--onac,#fff)}
.chi .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px}
.chi .cn small{display:block;font-weight:400;font-size:11px;opacity:.75}
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:none;background:#64748b}
.av.ch{background:#0d9488;font-size:15px}
.rb-admin{background:#7c3aed}.rb-sales{background:#2563eb}.rb-procurement{background:#16a34a}.rb-operation{background:#ea580c}.rb-accounting{background:#db2777}.rb-system{background:#64748b}
.chr{display:flex;flex-direction:column;min-width:0;min-height:0}
.chh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:color-mix(in srgb,var(--card) 88%,transparent);border-bottom:1px solid var(--bd)}
.chh small{display:block;color:var(--mu);font-size:12px}.chh .warn{margin-left:auto;font-size:12px;color:#b45309;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:3px 10px}
.msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.dsep{text-align:center;margin:8px 0 2px}.dsep span{font-size:11px;color:var(--mu);background:var(--card);border:1px solid var(--bd);border-radius:99px;padding:2px 12px}
.msg{max-width:min(680px,86%);background:var(--card);border:1px solid var(--bd);border-radius:12px 12px 12px 3px;padding:7px 12px;align-self:flex-start;box-shadow:0 1px 2px #0001}
.msg.mine{align-self:flex-end;background:var(--ac2);border-color:transparent;border-radius:12px 12px 3px 12px}
.msg.sys{align-self:center;max-width:94%;background:color-mix(in srgb,var(--card) 70%,transparent);border-style:dashed;font-size:13px}
.mh{display:flex;align-items:center;gap:8px;font-size:12px}.mh time{color:var(--mu);margin-left:auto}
.rb{color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:0 7px;line-height:16px}
.mx{border:0;background:none;color:var(--mu);cursor:pointer;font-size:11px;padding:0 2px}.mx:hover{color:var(--dn)}
.mt{margin-top:3px;word-break:break-word;line-height:1.45}
.chip{margin-top:6px;border:1px solid var(--ac);background:var(--card);color:var(--ac);border-radius:99px;padding:2px 10px;font-size:12px;cursor:pointer;font-weight:600}
.cmp{padding:10px 14px;background:color-mix(in srgb,var(--card) 88%,transparent);border-top:1px solid var(--bd)}
.cmp textarea{resize:none;font:inherit}.cmpr{display:flex;gap:8px;margin-top:8px}.cmpr select{flex:1;min-width:0}
.ro-note{color:var(--mu);font-size:13px;padding:6px}
@media(max-width:800px){.chat{grid-template-columns:1fr;grid-template-rows:150px 1fr}.chl{border-right:0;border-bottom:1px solid var(--bd)}}

/* ===== Dashboard: kotak besar klik -> frame melayang ===== */
.bx{cursor:pointer;position:relative;transition:box-shadow .15s,outline-color .15s}
.bx:hover{box-shadow:0 4px 16px #0002}.bx.open{outline:2px solid var(--ac)}
.bx .xp{float:right;font-size:12px;color:var(--mu);font-weight:400}
.bx .lim tr:nth-child(n+10){display:none}
.bx .more{font-size:12px;color:var(--ac);padding:6px 4px;text-align:center}
.fx{position:fixed;display:flex;flex-direction:column;background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:12px;box-shadow:0 22px 60px rgba(0,0,0,.38);resize:both;overflow:hidden;min-width:300px;min-height:180px}
.fx.max{resize:none;border-radius:0}
.fxh{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--ac2);cursor:move;user-select:none;font-size:13px}
.fxh .sp{flex:1}.fxh button{border:0;background:var(--card);color:var(--tx);border-radius:6px;width:28px;height:26px;cursor:pointer}.fxh button:hover{background:var(--bd)}
.fxb{flex:1;overflow:auto;padding:12px}
.fxb .lim tr{display:table-row !important}.fxb .more{display:none}
.fxb .w{overflow-x:auto}
.badge.dit{background:#3b82f633;color:#2563eb}.ss.dit{color:#2563eb}

/* ===== Checkpoint shipment, KPI, tagihan vendor ===== */
main.jobv{max-width:none;margin:0;padding:0}
.jobb{padding:14px;display:flex;flex-direction:column;gap:12px}
.pn{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px;min-width:0}
.pn h3{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}.pn h3 .pr{margin-left:auto}
.pn .w{overflow-x:auto}
.jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.jgrid>div{display:flex;flex-direction:column;font-size:13px}.jgrid .mu{font-size:11px;color:var(--mu)}
.prog{display:inline-block;vertical-align:middle;width:70px;height:8px;background:var(--ac2);border-radius:99px;overflow:hidden}.prog i{display:block;height:100%;background:var(--ac)}
.ckl{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px;color:var(--tx)}.ckl input{width:auto}
.jobv .docbar{position:sticky;top:0;z-index:5}

#vbj td,#vbj th{vertical-align:top}.jr td{border-top:2px solid var(--bd)}.je td{background:color-mix(in srgb,var(--ac2) 40%,transparent);padding:8px 14px}
.badge.gray{background:#64748b33;color:#64748b}

/* ===== Filter periode (header) ===== */
.perbar{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;flex-wrap:wrap;color:var(--mu)}
.perbar select{width:auto;padding:4px 8px;font-size:12px}.perbar .b{padding:4px 10px;font-size:12px}
body.docmode .perbar,body.chatmode .perbar{display:none}
/* ===== Efek menu samping: latar timbul + tulisan sedikit membesar saat disorot / dipilih ===== */
#sb nav button{min-height:38px;transition:background .18s ease,box-shadow .18s ease,font-size .18s ease,transform .18s ease,color .18s ease;transform-origin:left center}
#sb nav button:hover{background:var(--card);color:var(--tx);box-shadow:0 4px 12px rgba(15,23,42,.18);font-size:14.5px;transform:translateX(3px)}
#sb nav button.on{background:var(--ac);color:var(--onac,#fff);box-shadow:0 5px 14px var(--acs,rgba(11,95,165,.42));font-size:14.5px;transform:translateX(3px)}
#sb nav button.on:hover{background:var(--ac);color:var(--onac,#fff)}
#sb nav button .ic{transition:transform .18s ease}#sb nav button:hover .ic,#sb nav button.on .ic{transform:scale(1.12)}
.m{z-index:200}
#who .ver{margin-top:6px;font-size:10px;color:var(--mu);text-align:center}

/* ===== Sidebar: lebar dapat diatur, bisa disembunyikan, mode ikon ===== */
.sbbtn{margin-left:auto;border:1px solid var(--bd);background:var(--card);color:var(--mu);border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:14px;line-height:1;flex:none}
.sbbtn:hover{background:var(--ac2);color:var(--ac)}
.sbr,.sbtab{display:none}
@media(min-width:801px){
 :root{--sbi:250px;--sbw:250px}
 #sb{width:var(--sbi);transition:transform .22s ease,width .22s ease}
 .ct{margin-left:var(--sbw);transition:margin-left .22s ease}
 body.sbhide #sb{transform:translateX(-100%);box-shadow:none}
 body.sbdrag #sb,body.sbdrag .ct{transition:none}
 body.sbdrag{user-select:none;cursor:col-resize}body.sbdrag iframe{pointer-events:none}
 .sbr{display:block;position:fixed;top:0;bottom:0;left:calc(var(--sbw) - 4px);width:8px;cursor:col-resize;z-index:25;touch-action:none;transition:left .22s ease}
 body.sbdrag .sbr{transition:none}
 .sbr::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:transparent;transition:background .15s}
 .sbr:hover::after,body.sbdrag .sbr::after{background:var(--ac)}
 body.sbhide .sbr,body.docwide .sbr{display:none}
 .sbtab{position:fixed;left:0;top:96px;z-index:25;width:22px;height:44px;border:1px solid var(--bd);border-left:0;border-radius:0 10px 10px 0;background:var(--card);color:var(--ac);cursor:pointer;font-size:15px;box-shadow:2px 2px 8px rgba(15,23,42,.2)}
 body.sbhide .sbtab{display:flex;align-items:center;justify-content:center}
 body.docwide .sbtab{display:none!important}
 #mb{display:none}body.sbhide #mb{display:inline-block}
 /* mode ikon saja (lebar < 150px) */
 body.sbmini .brand{justify-content:center;flex-wrap:wrap;padding:10px 4px;gap:6px}
 body.sbmini .brand div,body.sbmini .nt,body.sbmini #sb .nl,body.sbmini #who .ver{display:none}
 body.sbmini .brand .sbbtn{margin-left:0}
 body.sbmini #sb nav{padding:6px 4px}
 body.sbmini #sb nav button{justify-content:center;padding:9px 0;position:relative}
 body.sbmini #sb nav button:hover,body.sbmini #sb nav button.on{transform:none}
 body.sbmini #sb nav .bdg{position:absolute;top:1px;right:3px;font-size:9px;padding:0 5px;min-width:15px}
 body.sbmini .ng{padding:2px 2px;margin:4px 0}
 body.sbmini #who{font-size:0;padding:8px 4px}body.sbmini #who button{font-size:10px;padding:6px 0;width:100%}
}
@media(max-width:800px){.sbbtn{display:none}}

/* ===== Input tabel melayang ===== */
.gridfx .fxb.gb{display:flex;flex-direction:column;overflow:hidden;padding:8px;gap:6px}
.gbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.gbar .b{padding:5px 10px;font-size:12px}
.gkl{display:inline-flex}.gkl button{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:5px 10px;cursor:pointer;font-size:12px}
.gkl button:first-child{border-radius:8px 0 0 8px}.gkl button:last-child{border-radius:0 8px 8px 0;border-left:0}
.gkl button.on{background:var(--ac);color:var(--onac,#fff);border-color:var(--ac)}
.gauto{font-size:12px;display:flex;align-items:center;gap:4px;color:var(--tx)}.gauto input{width:auto}
.gsum{font-size:12px;color:var(--mu)}
.ginfo{font-size:12px;background:var(--ac2);border-radius:8px;padding:6px 10px;display:none}
.gwrap{flex:1;overflow:auto;border:1px solid var(--bd);border-radius:8px;background:var(--card)}
.gtab{border-collapse:separate;border-spacing:0;font-size:12px}
.gtab th{position:sticky;top:0;z-index:2;background:var(--ac2);padding:6px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--bd);font-size:11px}
.gtab td{padding:2px 3px;border-bottom:1px solid var(--bd);vertical-align:middle}
.gtab input,.gtab select{width:100%;padding:5px 6px;font-size:12px;border-radius:5px}
.gtab .rn{width:30px;text-align:center;color:var(--mu);position:sticky;left:0;background:var(--card);z-index:1}
.gtab tr.err td{background:rgba(220,38,38,.07)}.gtab tr.okr .rn{color:#16a34a;font-weight:700}
.gst{min-width:220px;font-size:11px}.ge{color:var(--dn)}.go{color:#16a34a;font-weight:700}
.gx{border:0;background:none;color:var(--mu);cursor:pointer;padding:2px 6px}.gx:hover{color:var(--dn)}
.rq{color:var(--dn)}.gtip{font-size:11px;color:var(--mu)}

/* ===== Jendela floating (Rates list, Tagihan Vendor), tombol pop-out menu, daftar ringkas ===== */
.m{z-index:100000}
.fltfx .fxb.fb{display:flex;flex-direction:column;overflow:hidden;padding:8px;gap:6px}
.fbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.fbar .b{padding:5px 10px;font-size:12px}.fbar input,.fbar select{padding:5px 8px;font-size:12px}
.fbody{flex:1;overflow:auto}
.ftab{font-size:12.5px}.ftab th{position:sticky;top:0;background:var(--ac2);z-index:1}.ftab td,.ftab th{padding:6px 9px}
.ftab tr.rrow{cursor:pointer}.ftab tr.rrow:hover td{background:var(--ac2)}.ftab tr.rrow.op td{background:var(--ac2)}
.ftab .rd{display:flex;gap:6px 22px;flex-wrap:wrap;white-space:normal;font-size:12px;color:var(--tx)}.ftab tr.rdet td{background:var(--bg)}
.fsum{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;font-size:13px;padding:2px 2px 4px}
.fltfx table{font-size:12.5px}.fltfx td.a{display:flex;gap:3px}
.pop{margin-left:auto;opacity:.4;font-size:13px;padding:0 5px;border-radius:6px;line-height:1.5}.pop:hover{opacity:1;background:var(--ac2);color:var(--ac)}
body.sbmini .pop{display:none}
.vbc td,.vbc th{padding:6px 10px}.vbc tr.jr{cursor:pointer}.vbc tr.jr:hover td{background:var(--ac2)}
.vbc td.a{display:flex;gap:3px;flex-wrap:nowrap}.vbc td.a button{padding:2px 8px;min-width:30px}
a.jl{color:var(--ac);text-decoration:none}a.jl:hover{text-decoration:underline}

/* ===== Tema warna (pilih lewat tombol 🎨 Tema) ===== */
:root{--onac:#fff;--acs:rgba(11,95,165,.42)}
@media not all{:root:not([data-theme]){--onac:#0b1620;--acs:rgba(90,169,234,.35)}}
:root[data-theme="light"]{--bg:#f5f6f8;--card:#fff;--tx:#1b2430;--mu:#6b7686;--bd:#dde1e8;--ac:#0b5fa5;--ac2:#e6f0fa;--dn:#c0392b;--onac:#fff;--acs:rgba(11,95,165,.42)}
:root[data-theme="dark"]{--onac:#0b1620;--acs:rgba(90,169,234,.35)}
:root[data-theme="zamrud"]{--bg:#f1f8f4;--card:#fff;--tx:#17251f;--mu:#62766c;--bd:#d3e5db;--ac:#0f7a5c;--ac2:#dff3ea;--dn:#c0392b;--onac:#fff;--acs:rgba(15,122,92,.42);--sec-dash:rgba(15,122,92,.07)}
:root[data-theme="ungu"]{--bg:#f6f4fb;--card:#fff;--tx:#241a36;--mu:#7a6f91;--bd:#e0d9ee;--ac:#6a3fb5;--ac2:#eee7fa;--dn:#c0392b;--onac:#fff;--acs:rgba(106,63,181,.42);--sec-dash:rgba(106,63,181,.07)}
:root[data-theme="senja"]{--bg:#fbf6f0;--card:#fff;--tx:#2f2113;--mu:#85705a;--bd:#ecdcc9;--ac:#c2570c;--ac2:#fdeedd;--dn:#b3261e;--onac:#fff;--acs:rgba(194,87,12,.42);--sec-dash:rgba(194,87,12,.07)}
:root[data-theme="marun"]{--bg:#faf4f5;--card:#fff;--tx:#2d171b;--mu:#80646a;--bd:#ecd6da;--ac:#a3203a;--ac2:#fbe6ea;--dn:#7f1d1d;--onac:#fff;--acs:rgba(163,32,58,.42);--sec-dash:rgba(163,32,58,.06)}
:root[data-theme="teal"]{--bg:#f0f8fa;--card:#fff;--tx:#12262c;--mu:#5d7880;--bd:#d0e6ec;--ac:#0e7490;--ac2:#dcf2f7;--dn:#c0392b;--onac:#fff;--acs:rgba(14,116,144,.42);--sec-dash:rgba(14,116,144,.07)}
:root[data-theme="batu"]{--bg:#f3f4f6;--card:#fff;--tx:#1f2937;--mu:#6b7280;--bd:#e0e3e8;--ac:#374151;--ac2:#eceff3;--dn:#b91c1c;--onac:#fff;--acs:rgba(55,65,81,.4);--sec-sales:rgba(100,116,139,.09);--sec-proc:rgba(100,116,139,.09);--sec-ops:rgba(100,116,139,.09);--sec-users:rgba(100,116,139,.09);--sec-chat:rgba(100,116,139,.09);--sec-dash:rgba(100,116,139,.06)}
:root[data-theme="gelap-zamrud"]{--bg:#0f1714;--card:#17211d;--tx:#e4efe9;--mu:#8fa69a;--bd:#27362f;--ac:#3fd1a1;--ac2:#163a2e;--dn:#ef7b6e;--onac:#06231a;--acs:rgba(63,209,161,.35)}
:root[data-theme="gelap-ungu"]{--bg:#14111b;--card:#1d1927;--tx:#ece8f5;--mu:#a49cb8;--bd:#2f2940;--ac:#a98bf0;--ac2:#2a2142;--dn:#ef7b6e;--onac:#150e2a;--acs:rgba(169,139,240,.35)}
/* menu pilihan tema */
.thm{position:fixed;z-index:100001;background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:8px;width:250px;max-height:70vh;overflow:auto}
.thm h4{margin:2px 6px 6px;font-size:12px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.thi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--tx);padding:7px 8px;border-radius:8px;cursor:pointer;font:inherit;text-align:left}
.thi:hover{background:var(--ac2)}.thi.on{background:var(--ac2);font-weight:700}
.thi .sw{display:inline-flex;border-radius:7px;overflow:hidden;border:1px solid var(--bd);flex:none}.thi .sw i{display:block;width:16px;height:22px}
.thi .tl{flex:1}.thi .ck{color:var(--ac);font-weight:700}
.thb{float:right;padding:4px 9px}

/* ===== Daftar Perusahaan & pemilih customer ===== */
.kg{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--ac2);color:var(--ac);margin:1px 2px 1px 0;white-space:nowrap}
.cutab td,.cutab th{padding:7px 10px}.cutab td.a{display:flex;gap:4px;flex-wrap:wrap}
.cpl{position:absolute;left:0;right:0;z-index:20;background:var(--card);border:1px solid var(--bd);border-radius:10px;max-height:280px;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.28);margin-top:2px}
.cpit{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--bd)}.cpit:last-child{border-bottom:0}.cpit:hover{background:var(--ac2)}
.cpit.lk{opacity:.72}.cpnew{color:var(--ac);font-weight:600}
.cpinfo{margin-top:6px;font-size:12.5px}.cpsel{padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--ac2)}

/* Menu samping: kelompok bisa diciutkan, kelompok KPI */
.nt[role=button]{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}.nt[role=button]:hover{color:var(--tx)}
.nt .chev{margin-left:auto;font-size:10px;font-weight:600;opacity:.7;letter-spacing:0}
.ng.col{padding-bottom:2px}.ng.col button{display:none!important}body.sbmini .ng.col button{display:flex!important}
.ng[data-s=fin] .ic{color:#0d9488}
:root{--sec-kpi:rgba(244,114,182,.14)}body[data-sec=kpi] .ct{background:var(--sec-kpi)}.ng[data-s=kpi]{background:var(--sec-kpi)}.ng[data-s=kpi] .ic{color:#db2777}
:root[data-theme="batu"]{--sec-kpi:rgba(100,116,139,.09)}

/* ===== Tampilan cermin 3D (chrome) + warna logo Tirta Indoraya ===== */
:root:not([data-theme]){--ac:#e8650a;--ac2:#fff0e3;--acs:rgba(242,92,0,.38);--onac:#fff}
:root{
 --chr:linear-gradient(180deg,#ffffff 0%,#eef1f5 30%,#b4bec9 50%,#d9dfe6 68%,#f6f8fa 100%);
 --chr-h:linear-gradient(180deg,#ffffff 0%,#f6f8fa 30%,#c6ced7 50%,#e6eaef 68%,#ffffff 100%);
 --chr-bd:#8f9aa8;
 --chr-sh:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(70,85,105,.3),0 1px 0 rgba(70,85,105,.45),0 3px 8px rgba(40,55,75,.25);
 --org:linear-gradient(180deg,#ffc095 0%,#ff8a33 46%,#f25c00 52%,#ff7d22 82%,#ffa463 100%);
 --gloss:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));
}
/* halaman utama: abu mutiara, serasi dengan menu cermin */
body{background:linear-gradient(135deg,#e7ebf0 0%,#f5f7f9 40%,#eceff3 70%,#e2e7ed 100%) fixed}
:root{--sec-sales:rgba(255,255,255,0);--sec-proc:rgba(255,255,255,0);--sec-ops:rgba(255,255,255,0);--sec-users:rgba(255,255,255,0);--sec-dash:rgba(255,255,255,0);--sec-chat:rgba(255,255,255,0);--sec-kpi:rgba(255,255,255,0);--sec-fin:rgba(255,255,255,0)}
.ct header{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,248,250,.85));border-bottom:1px solid #cfd6de;box-shadow:0 1px 0 #fff inset,0 2px 8px rgba(40,55,75,.06)}
.w,.pn,.bx,.kp{box-shadow:0 1px 2px rgba(40,55,75,.06),0 4px 14px rgba(40,55,75,.05)}
@media not all{:root:not([data-theme]) body{background:linear-gradient(135deg,#151a21,#1d242d 50%,#161b22) fixed}:root:not([data-theme]) .ct header{background:rgba(27,34,43,.9);border-bottom-color:#2c3642}}
:root[data-theme="dark"] body,:root[data-theme^="gelap"] body{background:linear-gradient(135deg,#151a21,#1d242d 50%,#161b22) fixed}
:root[data-theme="dark"] .ct header,:root[data-theme^="gelap"] .ct header{background:rgba(27,34,43,.9);border-bottom-color:#2c3642}

/* tombol umum: cermin chrome 3D */
button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button{position:relative;overflow:hidden;background:var(--chr);border:1px solid var(--chr-bd);color:#1b2430;text-shadow:0 1px 0 rgba(255,255,255,.85);box-shadow:var(--chr-sh);border-radius:12px;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,font-size .18s ease}
button.b::before,.b::before,.sbbtn::before,.sbtab::before,.fxh button::before,.chip::before,.gkl button::before,#sb nav button::before{content:"";position:absolute;left:6%;right:6%;top:1px;height:44%;border-radius:11px 11px 50% 50%/11px 11px 70% 70%;background:var(--gloss);opacity:.9;pointer-events:none}
button.b:hover,.b:hover,.sbbtn:hover,.sbtab:hover,.fxh button:hover,.chip:hover,.gkl button:hover{background:var(--chr-h);color:#000;transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(70,85,105,.45),0 7px 14px rgba(40,55,75,.25)}
button.b:active,.b:active,.sbbtn:active,.fxh button:active,.chip:active,.gkl button:active,#sb nav button:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 6px rgba(40,55,75,.35)}
.b.d,button.b.d{color:#b3261e}
/* tombol utama & menu aktif: oranye glossy (warna logo; ikut warna tema bila tema lain dipilih) */
.p,button.b.p,.gkl button.on,#sb nav button.on,#sb nav button.on:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 45%,#fff) 0%,color-mix(in srgb,var(--ac) 88%,#fff) 46%,var(--ac) 52%,color-mix(in srgb,var(--ac) 90%,#fff) 82%,color-mix(in srgb,var(--ac) 60%,#fff) 100%);border-color:color-mix(in srgb,var(--ac) 75%,#000);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.15),0 1px 0 color-mix(in srgb,var(--ac) 60%,#000),0 6px 14px var(--acs,rgba(242,92,0,.38))}
:root:not([data-theme]) .p,:root:not([data-theme]) #sb nav button.on{background:var(--org)}
.p:hover,button.b.p:hover{filter:brightness(1.07);color:#fff}
.p::before,button.b.p::before,.gkl button.on::before,#sb nav button.on::before{opacity:.6}
.bdg{background:linear-gradient(180deg,#ff9a9a,#ef2b3a 55%,#c4121f);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 3px rgba(150,0,0,.4)}

/* menu samping: panel cermin chrome */
#sb{background:linear-gradient(172deg,#fbfcfd 0%,#e3e8ee 14%,#c3ccd6 30%,#eef2f5 42%,#a9b4c1 55%,#d3dae2 68%,#f4f6f8 84%,#c9d1da 100%);border-right:1px solid #8f9aa8;box-shadow:inset -1px 0 0 #fff,inset -6px 0 10px -6px rgba(40,55,75,.25),6px 0 22px rgba(40,55,75,.18)}
#sb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 52%,rgba(255,255,255,.45) 60%,rgba(255,255,255,0) 68%)}
.brand,#sb nav,#who{position:relative;z-index:1}
.brand{border-bottom:1px solid rgba(110,125,145,.45);box-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand .logo{width:46px;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.brand b{color:#1b2430;text-shadow:0 1px 0 #fff}.brand span{color:#4b5766}
#who{border-top:1px solid rgba(110,125,145,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);color:#1b2430}#who .ver{color:#4b5766}
#sb .ng,#sb .ng[data-s]{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 4px rgba(40,55,75,.12);border-radius:14px;margin:8px 0}
#sb nav button{margin:5px 0;min-height:38px}
#sb nav button:hover{background:var(--chr-h);color:#000;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(70,85,105,.45),0 8px 16px rgba(40,55,75,.28);transform:translateX(3px) translateY(-1px)}
#sb nav button.on{transform:translateX(3px)}
#sb nav button.on .ic{color:#fff}
#sb nav button .ic,#sb nav button .nl{position:relative}
.pop:hover{background:rgba(255,255,255,.7);color:var(--ac)}
.sbr:hover::after,body.sbdrag .sbr::after{background:var(--ac)}

/* kelompok menu: selalu tertutup; arahkan kursor ke judul kelompok, submenu muncul melayang di sampingnya */
#sb .nt[role=button]{padding:10px 10px;margin:0;border-radius:10px;font-size:11.5px;color:#334155;text-shadow:0 1px 0 rgba(255,255,255,.8);transition:background .15s,color .15s}
#sb .nt .chev{font-size:0}#sb .nt .chev::after{content:"▸";font-size:11px;display:inline-block;transition:transform .2s ease}
#sb .ng:hover .nt,#sb .ng:focus-within .nt{color:#000;background:rgba(255,255,255,.75)}
#sb .ng:hover .nt .chev::after{transform:translateX(3px)}
#sb .ng:has(button.on) .nt{color:var(--ac)}
#sb .ng:has(button.on) .nt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 6px var(--ac);flex:none}
#sb .ng:has(.ngi){padding:2px 4px}
#sb .ngi{position:fixed;left:calc(var(--sbw,250px) - 10px);margin-top:-40px;width:250px;max-height:calc(100vh - 16px);overflow:auto;z-index:30;padding:8px 10px;border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.95) 0%,rgba(226,232,239,.92) 45%,rgba(205,213,223,.92) 55%,rgba(244,246,249,.95) 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(110,125,145,.4),0 18px 40px rgba(30,45,65,.28);opacity:0;visibility:hidden;transform:translateX(-8px) scale(.98);transform-origin:left top;transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .28s}
#sb .ng:hover>.ngi,#sb .ng:focus-within>.ngi{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
#sb .ng.col .ngi button{display:flex!important}
#sb .ngi button{margin:4px 0}
body.sbmini #sb .ngi{position:static;margin:0;width:auto;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none}
body.sbmini .brand .logo{width:38px}
body.sbmini #sb nav button:hover{transform:translateY(-1px)}
body.sbmini #sb nav button.on{transform:none}
@media(max-width:800px){#sb .ngi{position:static;margin:0;width:auto;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;display:none;opacity:1;visibility:visible;transform:none}#sb .ng:hover>.ngi,#sb .ng:focus-within>.ngi{display:block}}

/* tema gelap: cermin baja (bukan hitam) */
@media not all{:root:not([data-theme]) #sb{background:linear-gradient(172deg,#8b96a3 0%,#5f6b78 20%,#7d8896 40%,#4f5a66 60%,#6c7784 80%,#56616d 100%)}}
:root[data-theme="dark"] #sb,:root[data-theme^="gelap"] #sb{background:linear-gradient(172deg,#8b96a3 0%,#5f6b78 20%,#7d8896 40%,#4f5a66 60%,#6c7784 80%,#56616d 100%)}
/* jendela melayang */
.fxh{background:var(--chr);border-bottom:1px solid var(--chr-bd);color:#1b2430;text-shadow:0 1px 0 #fff}
.fxh button{width:28px;height:26px;border-radius:8px}
.login-logo{display:block;height:64px;margin:0 auto 10px}

/* ===== Menu samping: cermin charcoal 3D dengan pantulan perak ===== */
#sb{background:linear-gradient(172deg,#5b616a 0%,#363a40 16%,#24272c 32%,#43484f 44%,#1f2226 58%,#33373d 72%,#4d535b 86%,#2a2d32 100%);border-right:1px solid #15171a;box-shadow:inset -1px 0 0 rgba(255,255,255,.18),inset -8px 0 12px -8px rgba(255,255,255,.12),6px 0 22px rgba(20,25,32,.35)}
#sb::after{background:linear-gradient(118deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 50%,rgba(220,228,236,.16) 58%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 88%,rgba(255,255,255,.08) 100%)}
.brand{border-bottom:1px solid #121417;box-shadow:0 1px 0 rgba(255,255,255,.12)}
.brand b{color:#eef1f4;text-shadow:0 1px 2px #000}.brand span{color:#aab3bd}
.brand .logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#who{border-top:1px solid #121417;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#e3e7eb}#who .ver{color:#9aa3ad}
#sb .ng,#sb .ng[data-s]{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.35)}
#sb .nt[role=button]{color:#c9d0d8;text-shadow:0 1px 1px #000}
#sb .ng:hover .nt,#sb .ng:focus-within .nt{color:#fff;background:rgba(255,255,255,.1)}
#sb .ng:has(button.on) .nt{color:#ff9a4d}
#sb .ng:has(button.on) .nt::before{background:#ff7a1a;box-shadow:0 0 8px #ff7a1a}
#sb nav button:hover{box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(0,0,0,.6),0 8px 16px rgba(0,0,0,.5)}
#sb .ngi{background:linear-gradient(170deg,rgba(78,84,92,.96) 0%,rgba(44,48,54,.96) 40%,rgba(32,35,40,.96) 60%,rgba(62,67,74,.96) 100%);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px #15171a,0 18px 40px rgba(10,15,22,.45)}
.sbtab{color:#1b2430}
/* halaman utama: abu baja muda, serasi dengan menu charcoal */
body{background:linear-gradient(135deg,#d9dee4 0%,#e9ecf0 38%,#e1e5ea 70%,#d4d9e0 100%) fixed}
.ct header{background:linear-gradient(180deg,rgba(250,251,252,.95),rgba(236,239,243,.9));border-bottom:1px solid #c3cad3}

/* ===== Menu samping: marmer putih dove 3D; tombol menu cermin charcoal ===== */
:root{--marble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='900'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .011' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.4 -1.1 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .05 .45 .05 0 0 .02 .25 .02 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .52  0 0 0 0 .53  0 0 0 0 .56  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23m)'/%3E%3C/svg%3E") 0 0/500px 900px repeat}
#sb{background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 55%,rgba(255,255,255,.35) 63%,rgba(255,255,255,0) 72%),var(--marble),linear-gradient(180deg,#fbfaf8,#f1efeb);border-right:1px solid #cfccc6;box-shadow:inset -1px 0 0 #fff,inset -10px 0 14px -10px rgba(90,85,78,.25),6px 0 22px rgba(60,55,50,.16)}
#sb::after{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,rgba(120,115,108,.08))}
.brand{border-bottom:1px solid rgba(150,145,138,.35);box-shadow:0 1px 0 rgba(255,255,255,.95)}
.brand b{color:#24272c;text-shadow:0 1px 0 #fff}.brand span{color:#6b6f76}
.brand .logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
#who{border-top:1px solid rgba(150,145,138,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);color:#24272c}#who .ver{color:#6b6f76}
#sb .ng,#sb .ng[data-s]{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(150,145,138,.35),0 3px 8px rgba(60,55,50,.1)}
#sb .nt[role=button]{color:#33363b;text-shadow:0 1px 0 rgba(255,255,255,.9)}
#sb .ng:hover .nt,#sb .ng:focus-within .nt{color:#000;background:rgba(255,255,255,.75)}
#sb .ng:has(button.on) .nt{color:var(--ac)}
#sb .ng:has(button.on) .nt::before{background:var(--ac);box-shadow:0 0 6px var(--ac)}
/* tombol menu: cermin charcoal dengan pantulan cahaya */
#sb nav button,#sb .b,#sb .sbbtn{background:linear-gradient(180deg,#6d737c 0%,#3d4249 44%,#1f2226 52%,#2b2f35 78%,#474d55 100%);border:1px solid #15171a;color:#f1f3f5;text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 2px rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.5),0 4px 10px rgba(30,32,36,.35)}
#sb nav button::before,#sb .b::before,#sb .sbbtn::before{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));opacity:1}
#sb nav button:hover,#sb .b:hover,#sb .sbbtn:hover{background:linear-gradient(180deg,#80868f 0%,#4a5058 44%,#2a2d32 52%,#363a40 78%,#555b64 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 rgba(0,0,0,.45),0 8px 16px rgba(30,32,36,.4)}
#sb nav button .ic{color:#d9dee4}
#sb nav button.on,#sb nav button.on:hover{border-color:color-mix(in srgb,var(--ac) 70%,#000)}
#sb nav button.on .ic{color:#fff}
#sb .pop{color:#d9dee4}#sb .pop:hover{background:rgba(255,255,255,.15);color:#fff}
#sb .ngi{background:linear-gradient(118deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 30%),var(--marble),#f7f6f3;border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,145,138,.45),0 18px 40px rgba(50,45,40,.25)}
.sbtab{background:linear-gradient(180deg,#6d737c,#1f2226 52%,#474d55);color:#fff;border-color:#15171a}
/* halaman utama: abu dove hangat, serasi dengan marmer */
body{background:linear-gradient(135deg,#e7e5e1 0%,#f3f2ef 40%,#eae8e4 70%,#dfdcd7 100%) fixed}
.ct header{background:linear-gradient(180deg,rgba(252,251,250,.95),rgba(240,238,235,.92));border-bottom:1px solid #d3cfc9}
@media not all{:root:not([data-theme]) #sb{background:linear-gradient(118deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),var(--marble),#3a3c40}}
:root[data-theme="dark"] #sb,:root[data-theme^="gelap"] #sb{background:linear-gradient(118deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),var(--marble),#3a3c40}

/* ===== Tombol menu: cermin mengkilap (silver) dengan teks & ikon charcoal ===== */
#sb nav button,#sb .b,#sb .sbbtn{background:linear-gradient(180deg,#ffffff 0%,#f4f6f8 20%,#e3e7ec 58%,#b3bcc6 74%,#9ea8b4 77%,#d3d9df 86%,#f3f5f7 100%);border:1px solid #8c96a2;color:#2b2f35;text-shadow:0 1px 0 rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.7),inset 0 -3px 5px rgba(60,70,85,.18),0 1px 0 rgba(70,80,95,.5),0 4px 10px rgba(50,55,65,.22)}
#sb nav button::before,#sb .b::before,#sb .sbbtn::before{background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.15));opacity:.95;height:42%}
#sb nav button:hover,#sb .b:hover,#sb .sbbtn:hover{background:linear-gradient(180deg,#ffffff 0%,#f9fafb 20%,#eaedf1 58%,#c1c9d2 74%,#aeb7c2 77%,#dfe4e9 86%,#fafbfc 100%);color:#16181c;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(70,80,95,.5),0 8px 16px rgba(50,55,65,.28)}
#sb nav button .ic{color:#2b2f35}
#sb .pop{color:#2b2f35}#sb .pop:hover{background:rgba(0,0,0,.08);color:#000}
#sb nav button.on,#sb nav button.on:hover{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3)}
#sb nav button.on .ic,#sb nav button.on .pop{color:#fff}
.sbtab{background:linear-gradient(180deg,#fff,#c9d0d8 46%,#9aa4b0 50%,#f4f6f8);color:#2b2f35;border-color:#8c96a2}

/* ===== Dashboard kaca (glassmorphism) + transisi morph ===== */
body[data-sec=dash] .ct{background:
  radial-gradient(38% 46% at 12% 18%,rgba(232,101,10,.30),transparent 70%),
  radial-gradient(34% 42% at 88% 12%,rgba(14,165,233,.24),transparent 70%),
  radial-gradient(40% 48% at 70% 88%,rgba(20,184,166,.22),transparent 70%),
  radial-gradient(30% 36% at 28% 82%,rgba(168,85,247,.16),transparent 70%),
  linear-gradient(135deg,#eef2f6,#e3e8ee);background-size:140% 140%;animation:glassDrift 26s ease-in-out infinite alternate}
@keyframes glassDrift{0%{background-position:0% 0%}50%{background-position:60% 40%}100%{background-position:100% 100%}}
body[data-sec=dash] .kp,body[data-sec=dash] .bx{position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 30px rgba(30,41,59,.12);
  transition:transform .35s cubic-bezier(.2,.85,.25,1),box-shadow .35s,border-radius .35s}
body[data-sec=dash] .kp::before,body[data-sec=dash] .bx::before{content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));border-radius:18px 18px 60% 60%/18px 18px 22px 22px;opacity:.7}
body[data-sec=dash] .kp:hover,body[data-sec=dash] .bx:hover{transform:translateY(-4px) scale(1.012);border-radius:22px;box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(30,41,59,.18),0 0 0 1px rgba(232,101,10,.18)}
body[data-sec=dash] .bx.open{outline:none;box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(232,101,10,.55),0 14px 36px rgba(232,101,10,.18)}
body[data-sec=dash] .bx .w,body[data-sec=dash] .bx table,body[data-sec=dash] .bx th,body[data-sec=dash] .bx td{background:transparent}
body[data-sec=dash] .bx th{border-bottom:1px solid rgba(30,41,59,.12)}body[data-sec=dash] .bx td{border-bottom:1px solid rgba(30,41,59,.06)}
body[data-sec=dash] .br>div{background:rgba(255,255,255,.45);border-radius:999px}body[data-sec=dash] .br i{border-radius:999px;background:linear-gradient(90deg,#f59e0b,#e8650a)}
body[data-sec=dash] .dh{font-size:20px;letter-spacing:.2px}
/* masuk ke dashboard: kartu "mengembun" dari blur ke tajam, berurutan */
@keyframes morphIn{0%{opacity:0;transform:translateY(18px) scale(.94);filter:blur(10px);border-radius:44px}60%{opacity:1;filter:blur(0);border-radius:24px}100%{opacity:1;transform:none;filter:none;border-radius:18px}}
body.pgin[data-sec=dash] .kp,body.pgin[data-sec=dash] .bx{animation:morphIn .62s cubic-bezier(.2,.85,.25,1) both}
body.pgin[data-sec=dash] .dh{animation:morphIn .5s cubic-bezier(.2,.85,.25,1) both}
body.pgin[data-sec=dash] .kp:nth-child(2){animation-delay:.04s}body.pgin[data-sec=dash] .kp:nth-child(3){animation-delay:.08s}body.pgin[data-sec=dash] .kp:nth-child(4){animation-delay:.12s}body.pgin[data-sec=dash] .kp:nth-child(5){animation-delay:.16s}body.pgin[data-sec=dash] .kp:nth-child(6){animation-delay:.2s}body.pgin[data-sec=dash] .kp:nth-child(n+7){animation-delay:.24s}
body.pgin[data-sec=dash] .bx:nth-child(1){animation-delay:.18s}body.pgin[data-sec=dash] .bx:nth-child(2){animation-delay:.24s}body.pgin[data-sec=dash] .bx:nth-child(3){animation-delay:.3s}body.pgin[data-sec=dash] .bx:nth-child(4){animation-delay:.36s}body.pgin[data-sec=dash] .bx:nth-child(n+5){animation-delay:.42s}
/* jendela besar dari kotak dashboard: kaca juga */
body[data-sec=dash] .fx{border-radius:20px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 30px 80px rgba(15,23,42,.35)}
body[data-sec=dash] .fx .fxh{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border-bottom:1px solid rgba(30,41,59,.08)}
body[data-sec=dash] .fx.max{border-radius:0}
/* tema gelap */
:root[data-theme="dark"] body[data-sec=dash] .ct,:root[data-theme^="gelap"] body[data-sec=dash] .ct{background:radial-gradient(38% 46% at 12% 18%,rgba(232,101,10,.28),transparent 70%),radial-gradient(34% 42% at 88% 12%,rgba(14,165,233,.22),transparent 70%),radial-gradient(40% 48% at 70% 88%,rgba(20,184,166,.18),transparent 70%),linear-gradient(135deg,#10151c,#18202a);background-size:140% 140%}
:root[data-theme="dark"] body[data-sec=dash] :is(.kp,.bx),:root[data-theme^="gelap"] body[data-sec=dash] :is(.kp,.bx){background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.35)}
:root[data-theme="dark"] body[data-sec=dash] :is(.kp,.bx)::before,:root[data-theme^="gelap"] body[data-sec=dash] :is(.kp,.bx)::before{opacity:.12}
:root[data-theme="dark"] body[data-sec=dash] .fx,:root[data-theme^="gelap"] body[data-sec=dash] .fx{background:rgba(27,34,43,.78);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] body[data-sec=dash] .fx .fxh,:root[data-theme^="gelap"] body[data-sec=dash] .fx .fxh{background:rgba(255,255,255,.04)}
@media not all{:root:not([data-theme]) body[data-sec=dash] :is(.kp,.bx){background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14)}:root:not([data-theme]) body[data-sec=dash] .ct{background:linear-gradient(135deg,#10151c,#18202a)}}
@media(prefers-reduced-motion:reduce){body[data-sec=dash] .ct{animation:none}body.pgin[data-sec=dash] :is(.kp,.bx,.dh){animation:none}body[data-sec=dash] :is(.kp,.bx):hover{transform:none}}

/* ===== Sidebar: sub-menu = "folder" seperti layar ponsel: panel besar membulat, ikon aplikasi berwarna (grid 3 kolom),
   latar halaman diredupkan; panel tumbuh dari judul grup (morph) dan ikon muncul berurutan atas → bawah ===== */
@media(min-width:801px){
body:not(.sbmini) #sb .ngi{position:fixed;left:calc(var(--sbw,250px) - 10px);margin:0;width:auto;max-height:calc(100vh - 16px);overflow:auto;z-index:40;
  display:grid;grid-template-columns:repeat(3,78px);gap:10px 4px;padding:14px 10px 12px;border-radius:26px;
  background:rgba(243,243,245,.97);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 20px 46px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform-origin:0 var(--oy,30px);transform:translateX(-46px) scale(.16);filter:blur(10px);
  transition:opacity .22s ease .08s,transform .3s cubic-bezier(.4,0,.7,1) .08s,filter .3s ease .08s,visibility 0s linear .4s}
body:not(.sbmini) #sb .ng:hover>.ngi,body:not(.sbmini) #sb .ng:focus-within>.ngi{opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .2s ease,transform .5s cubic-bezier(.2,.95,.25,1.06),filter .35s ease,visibility 0s}
body:not(.sbmini) #sb .ngi button,body:not(.sbmini) #sb .ngi button:hover,body:not(.sbmini) #sb .ngi button.on{all:unset;box-sizing:border-box;position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;
  width:78px;padding:2px 1px 2px;cursor:pointer;color:#1f2328;font:500 11px/1.2 system-ui,"Segoe UI",sans-serif;text-align:center;white-space:normal;
  opacity:0;transform:translateY(-14px) scale(.6);filter:blur(4px);transition:opacity .12s ease,transform .12s ease,filter .12s ease}
body:not(.sbmini) #sb .ngi button::before{display:none}
body:not(.sbmini) #sb .ngi button .ic{width:46px;height:46px;box-sizing:border-box;padding:12px;border-radius:15px;color:#fff;stroke-width:2.1;flex:none;
  box-shadow:inset 0 3px 5px rgba(255,255,255,.55),inset 0 -5px 9px rgba(0,0,0,.2),0 7px 14px rgba(20,25,35,.22),0 1px 2px rgba(20,25,35,.25);transition:transform .25s cubic-bezier(.2,.9,.25,1.3),box-shadow .25s}
body:not(.sbmini) #sb .ngi button:nth-child(1) .ic{background:linear-gradient(160deg,#ff5a5a,#d61f1f)}body:not(.sbmini) #sb .ngi button:nth-child(2) .ic{background:linear-gradient(160deg,#4ade80,#15a34a)}body:not(.sbmini) #sb .ngi button:nth-child(3) .ic{background:linear-gradient(160deg,#ffffff,#e9edf2)}body:not(.sbmini) #sb .ngi button:nth-child(4) .ic{background:linear-gradient(160deg,#cfd5dc,#8e98a4)}body:not(.sbmini) #sb .ngi button:nth-child(5) .ic{background:linear-gradient(160deg,#ffad4d,#f06a0c)}body:not(.sbmini) #sb .ngi button:nth-child(6) .ic{background:linear-gradient(160deg,#a78bfa,#ec4899)}body:not(.sbmini) #sb .ngi button:nth-child(7) .ic{background:linear-gradient(160deg,#38bdf8,#1d64d8)}body:not(.sbmini) #sb .ngi button:nth-child(8) .ic{background:linear-gradient(160deg,#2dd4bf,#0f8f80)}body:not(.sbmini) #sb .ngi button:nth-child(9) .ic{background:linear-gradient(160deg,#facc15,#ea9a08)}
body:not(.sbmini) #sb .ngi button:nth-child(3) .ic{color:#1d64d8}body:not(.sbmini) #sb .ngi button:nth-child(4) .ic{color:#2b2f35}
body:not(.sbmini) #sb .ngi button .nl{display:block;margin-top:5px;max-width:76px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body:not(.sbmini) #sb .ngi button:hover .ic{transform:translateY(-3px) scale(1.08);box-shadow:inset 0 3px 5px rgba(255,255,255,.55),inset 0 -5px 9px rgba(0,0,0,.2),0 12px 20px rgba(20,25,35,.28)}
body:not(.sbmini) #sb .ngi button.on .ic{box-shadow:0 0 0 2px #fff,0 0 0 4px #e8650a,0 8px 16px rgba(232,101,10,.35)}
body:not(.sbmini) #sb .ngi button.on .nl{color:#c2540a;font-weight:700}
body:not(.sbmini) #sb .ngi button .pop{position:absolute;top:-4px;left:4px;font-size:9px;width:16px;height:16px;line-height:16px;border-radius:50%;background:#fff;color:#2b2f35;box-shadow:0 1px 4px rgba(0,0,0,.25);text-align:center}
body:not(.sbmini) #sb .ngi button .bdg{position:absolute;top:-6px;right:6px}
body:not(.sbmini) #sb .ng:hover>.ngi button,body:not(.sbmini) #sb .ng:focus-within>.ngi button{opacity:1;transform:none;filter:none;transition:opacity .28s ease,transform .45s cubic-bezier(.2,.95,.25,1.25),filter .28s ease}
body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(1),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(1){transition-delay:0.10s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(2),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(2){transition-delay:0.16s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(3),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(3){transition-delay:0.22s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(4),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(4){transition-delay:0.28s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(5),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(5){transition-delay:0.34s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(6),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(6){transition-delay:0.40s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(7),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(7){transition-delay:0.46s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(8),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(8){transition-delay:0.52s}body:not(.sbmini) #sb .ng:hover>.ngi button:nth-child(9),body:not(.sbmini) #sb .ng:focus-within>.ngi button:nth-child(9){transition-delay:0.58s}
/* latar halaman diredupkan & diburamkan saat folder terbuka */
.ct{transition:filter .35s ease}
body:not(.sbmini):has(#sb .ng:hover>.ngi) .ct{filter:brightness(.5) blur(4px)}
#sb .ng>.nt{transition:transform .35s cubic-bezier(.2,.9,.25,1.15),letter-spacing .35s ease}
#sb .ng:hover>.nt{transform:translateX(4px);letter-spacing:.6px}
:root[data-theme="dark"] body:not(.sbmini) #sb .ngi,:root[data-theme^="gelap"] body:not(.sbmini) #sb .ngi{background:rgba(40,44,52,.96);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] body:not(.sbmini) #sb .ngi button,:root[data-theme^="gelap"] body:not(.sbmini) #sb .ngi button{color:#e8ecf1}
}
@media(prefers-reduced-motion:reduce){#sb .ngi,#sb .ngi button,#sb .ng>.nt,.ct{transition:none!important;filter:none!important}}

/* tombol "Menu lainnya" di sidebar */
#sb .navmore{all:unset;box-sizing:border-box;display:block;width:calc(100% - 16px);margin:8px 8px 4px;padding:8px 10px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--mu);cursor:pointer;text-align:center;border:1px dashed var(--bd)}#sb .navmore:hover{color:var(--ac);border-color:var(--ac)}body.sbmini #sb .navmore{font-size:0;padding:6px}body.sbmini #sb .navmore::before{content:"⋯";font-size:16px}
/* morph: kelompok menu lainnya muncul / hilang */
@keyframes ngIn{0%{opacity:0;transform:translateY(-18px) scale(.55);filter:blur(8px);border-radius:40px}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes ngOut{0%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateY(-14px) scale(.55);filter:blur(8px);border-radius:40px}}
@keyframes nmIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
#sb .ng.ng-in{animation:ngIn .5s cubic-bezier(.2,.95,.25,1.15) both;transform-origin:50% 0}
#sb .ng.ng-out{animation:ngOut .3s cubic-bezier(.4,0,.7,1) both;transform-origin:50% 0;pointer-events:none}
#sb .navmore.nm-in{animation:nmIn .35s ease both .1s}

/* ===== Sidebar glassmorphism: panel kaca buram transparan di atas latar berwarna lembut (warna aksen tema + biru + ungu) ===== */
html body{background:radial-gradient(260px 340px at 40px 120px,color-mix(in srgb,var(--ac) 55%,transparent),transparent 70%),radial-gradient(240px 300px at 220px 480px,rgba(56,189,248,.45),transparent 70%),radial-gradient(260px 320px at 60px 820px,rgba(168,85,247,.38),transparent 70%),linear-gradient(160deg,#f4f6f9,#e9edf2) fixed}
html body #sb{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 26%),linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.22) 40%,rgba(255,255,255,0) 48%),rgba(255,255,255,.34);
 border-right:1px solid rgba(255,255,255,.65);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset -1px 0 0 rgba(255,255,255,.55),inset -14px 0 22px -16px rgba(255,255,255,.9),8px 0 30px rgba(30,40,60,.14)}
:root[data-theme="dark"] body,:root[data-theme^="gelap"] body{background:radial-gradient(260px 340px at 40px 120px,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%),radial-gradient(240px 300px at 220px 480px,rgba(56,189,248,.28),transparent 70%),radial-gradient(260px 320px at 60px 820px,rgba(168,85,247,.28),transparent 70%),linear-gradient(160deg,#141920,#1b222b) fixed}
:root[data-theme="dark"] body #sb,:root[data-theme^="gelap"] body #sb{background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 22%),rgba(20,26,34,.45);border-right-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),8px 0 30px rgba(0,0,0,.35)}
@media not all{:root:not([data-theme]) body{background:radial-gradient(260px 340px at 40px 120px,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%),radial-gradient(240px 300px at 220px 480px,rgba(56,189,248,.28),transparent 70%),linear-gradient(160deg,#141920,#1b222b) fixed}:root:not([data-theme]) body #sb{background:rgba(20,26,34,.45);border-right-color:rgba(255,255,255,.14)}}
/* blur kaca di lapisan terpisah: backdrop-filter langsung pada #sb membuat panel folder sub-menu (position:fixed) ikut terpotong */
html body #sb::before{content:"";position:fixed;top:0;bottom:0;left:0;width:inherit;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}

/* Laporan keuangan: tampilan bersih tanpa garis */
.fsr{background:var(--card);border-radius:18px;padding:22px 26px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 28px rgba(15,23,42,.06);max-width:1100px;margin-bottom:12px}
.fsh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fst{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--tx)}.fst small{font-size:13px;font-weight:500;color:var(--mu);margin-left:6px}
.fsz{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mu);cursor:pointer}.fsz input{width:auto;margin:0}
table.fs{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
table.fs th,table.fs td{border:0!important;background:none;box-shadow:none}
table.fs th{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mu);text-transform:uppercase;text-align:right;padding:4px 12px 10px;white-space:nowrap}
table.fs th:first-child{text-align:left}
table.fs td{padding:7px 12px;font-size:13.5px;color:var(--tx);white-space:nowrap}
table.fs td.n{text-align:right;width:16%}
table.fs tr.r-h td{padding:22px 12px 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
table.fs tr.r-s td{padding:10px 12px 2px 18px;font-size:12px;color:var(--mu);font-weight:600}
table.fs tr.r-g td{font-weight:650;padding-top:12px}
table.fs tr.r-a td:first-child{padding-left:30px}
table.fs tr.r-a:hover td{background:color-mix(in srgb,var(--ac2) 55%,transparent)}
table.fs tr.r-a:hover td:first-child{border-radius:8px 0 0 8px}table.fs tr.r-a:hover td:last-child{border-radius:0 8px 8px 0}
table.fs .c{display:inline-block;min-width:74px;margin-right:10px;font-size:11.5px;color:var(--mu);text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
table.fs a.c:hover{color:var(--ac)}
table.fs tr.r-k td{font-weight:700;background:var(--ac2);color:var(--tx);padding-top:10px;padding-bottom:10px}
table.fs tr.r-k td:first-child{border-radius:10px 0 0 10px}table.fs tr.r-k td:last-child{border-radius:0 10px 10px 0}
table.fs .z{color:var(--mu);opacity:.55}table.fs .neg{color:inherit}
@media (max-width:700px){.fsr{padding:16px 12px;border-radius:14px;overflow-x:auto}table.fs:not(.kcx) th:nth-child(2),table.fs:not(.kcx) td:nth-child(2){display:none}table.fs td.n{width:auto}table.fs td:first-child{white-space:normal}table.fs td,table.fs th{padding-left:6px;padding-right:6px}table.fs td{font-size:12.5px;padding:6px 8px}table.fs tr.r-a td:first-child{padding-left:14px}table.fs .c{display:none}}
/* Manajemen Cabang (Kepala Cabang) */
.fsr.kcs{max-width:none;margin-bottom:14px}
.kcg{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kcg .fsr{margin-bottom:0}.kcg+.fsr{margin-top:14px}
@media (max-width:900px){.kcg{grid-template-columns:1fr}}
table.fs.kcx td.n{width:auto}table.fs.wide td,table.fs.wide th{padding-left:8px;padding-right:8px}
table.fs.kcbud input{width:84px;text-align:right;padding:4px 6px;font-size:12.5px;border:1px solid transparent;background:color-mix(in srgb,var(--ac2) 45%,transparent);border-radius:6px}
table.fs.kcbud input:focus{border-color:var(--ac);background:var(--card);outline:none}
.kcar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ac2) 55%,transparent);margin:6px 0}
.kcar .b{flex:none}
table.fs.kcx td{white-space:normal}table.fs.kcx td.n{white-space:nowrap}

/* cetak: latar putih polos (tanpa gradasi tema) */
@media print{html,html body,:root body{background:#fff!important}}

/* ===== 3D: logo Tirta timbul + kartu & grafik dashboard 3D ===== */
.l3d{perspective:600px;position:relative;flex:none}.l3d .spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:l3dSw 7s ease-in-out infinite}
.l3d .ly{position:absolute;inset:0;width:100%;height:100%}.l3d .fr{transform:translateZ(0)}
.l3d .shd{position:absolute;left:12%;right:12%;bottom:-14%;height:14%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(2px);animation:l3dSh 7s ease-in-out infinite}
.l3d.sm{width:46px;height:35px}.l3d.lg{width:120px;height:91px;margin:0 auto 18px}body.sbmini .l3d.sm{width:38px;height:29px}
@keyframes l3dSw{0%,100%{transform:rotateY(-24deg) rotateX(10deg)}50%{transform:rotateY(24deg) rotateX(6deg)}}
@keyframes l3dSh{0%,100%{transform:translateX(-6%) scaleX(.9)}50%{transform:translateX(6%) scaleX(.9)}}
@media (prefers-reduced-motion:reduce){.l3d .spin,.l3d .shd{animation:none}.l3d .spin{transform:rotateY(-18deg) rotateX(8deg)}}
/* kartu angka timbul (bertepi tebal) dan miring mengikuti mouse, di semua halaman */
body:not(#_) .kp{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease,box-shadow .25s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(90,105,125,.16),0 2px 0 rgba(90,105,125,.18),0 3px 0 rgba(90,105,125,.2),0 4px 0 rgba(90,105,125,.22),0 5px 0 rgba(90,105,125,.24),0 6px 0 rgba(90,105,125,.26),0 16px 26px -6px rgba(15,23,42,.25)}
body:not(#_) .kp:hover{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)!important;border-radius:18px;
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.16),0 2px 0 rgba(90,105,125,.18),0 3px 0 rgba(90,105,125,.2),0 4px 0 rgba(90,105,125,.22),0 5px 0 rgba(90,105,125,.24),0 6px 0 rgba(90,105,125,.26),0 7px 0 rgba(90,105,125,.28),0 8px 0 rgba(90,105,125,.3),0 26px 34px -8px rgba(15,23,42,.3)!important}
body:not(#_) .kv{text-shadow:0 1px 0 color-mix(in srgb,var(--ac) 35%,#fff),0 2px 0 color-mix(in srgb,var(--ac) 55%,#fff),0 4px 6px color-mix(in srgb,var(--ac) 22%,transparent)}
/* panel, tabel dan jendela ikut timbul tipis (semua halaman) */
body:not(#_) :is(.bx,.fsr,.pn,.w,.mc){box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(90,105,125,.14),0 3px 0 rgba(90,105,125,.16),0 6px 0 rgba(90,105,125,.14),0 24px 40px -12px rgba(15,23,42,.25)}
/* batang horizontal timbul */
body:not(#_) .br>div{height:13px;background:rgba(120,135,155,.16);border-radius:5px;box-shadow:inset 0 2px 3px rgba(15,23,42,.12)}
body:not(#_) .br i{border-radius:5px;background:linear-gradient(180deg,#ffb06b,#f27a1a 55%,#d85a05);box-shadow:0 1px 0 #b44600,0 2px 0 #9c3d00,0 3px 0 #873400,0 7px 10px -3px rgba(234,106,18,.55);animation:b3Grow 1s cubic-bezier(.2,.85,.25,1) both}
@keyframes b3Grow{from{width:0}}
/* grafik tren 12 bulan: batang 3D (kc.js kcChart) */
.c3d .b3{transform-box:fill-box;transform-origin:bottom;animation:b3Up 1s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes b3Up{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.c3d .b3,body:not(#_) .br i{animation:none}}
.brand div.l3d,.brand .l3d div,body.sbmini .brand div.l3d,body.sbmini .brand .l3d div{display:block}
@media print{.l3d{display:none!important}}
body:not(#_) :is(.bx,.fsr,.pn,.mc) .w,body:not(#_) .w .w{box-shadow:none}
/* ===== 3D: menu samping dan submenu ===== */
/* kotak kelompok menu (Sales, Operation, …) timbul; judulnya miring sedikit saat disorot. Jangan beri transform pada .ng: submenu (position:fixed) jadi hilang */
body:not(#_) #sb .ng>.nt{transition:transform .22s ease}body:not(#_) #sb .ng:has(.ngi):hover>.nt{transform:perspective(500px) rotateY(-10deg) translateX(3px)}
body:not(#_) #sb .ng{transition:box-shadow .22s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(90,105,125,.18),0 2px 0 rgba(90,105,125,.2),0 3px 0 rgba(90,105,125,.22),0 4px 0 rgba(90,105,125,.24),0 10px 16px -6px rgba(15,23,42,.28)}
body:not(#_) #sb .ng:has(.ngi):hover{
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.18),0 2px 0 rgba(90,105,125,.2),0 3px 0 rgba(90,105,125,.22),0 4px 0 rgba(90,105,125,.24),0 5px 0 rgba(90,105,125,.26),0 6px 0 rgba(90,105,125,.28),0 16px 22px -6px rgba(15,23,42,.32)}
body:not(#_) #sb .ng:has(button.on){box-shadow:inset 0 1px 0 #fff,inset 3px 0 0 var(--ac),0 1px 0 rgba(90,105,125,.18),0 2px 0 rgba(90,105,125,.2),0 3px 0 rgba(90,105,125,.22),0 4px 0 rgba(90,105,125,.24),0 10px 16px -6px rgba(15,23,42,.28)}
/* tombol menu (Beranda, Dashboard, … dan isi submenu bentuk daftar): bertepi tebal, tertekan saat diklik */
body:not(#_) #sb nav button{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(90,105,125,.3),0 2px 0 rgba(90,105,125,.3),0 3px 0 rgba(90,105,125,.32),0 7px 10px -4px rgba(15,23,42,.3)!important;transition:transform .12s ease,box-shadow .12s ease}
body:not(#_) #sb nav button:hover{transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.3),0 2px 0 rgba(90,105,125,.3),0 3px 0 rgba(90,105,125,.32),0 4px 0 rgba(90,105,125,.34),0 5px 0 rgba(90,105,125,.36),0 11px 14px -4px rgba(15,23,42,.32)!important}
body:not(#_) #sb nav button:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 4px rgba(15,23,42,.25),0 1px 0 rgba(90,105,125,.3),0 3px 5px -2px rgba(15,23,42,.25)!important}
/* panel submenu muncul seperti pintu terbuka (berputar dari sisi kiri), dengan tepi tebal */
body:not(#_) #sb .ngi{transform-origin:left center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(90,105,125,.22),0 2px 0 rgba(90,105,125,.24),0 3px 0 rgba(90,105,125,.26),0 4px 0 rgba(90,105,125,.28),0 5px 0 rgba(90,105,125,.3),0 26px 46px -10px rgba(15,23,42,.42)!important}
body:not(#_) #sb .ng:hover>.ngi,body:not(#_) #sb .ng:focus-within>.ngi{animation:ngi3d .32s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes ngi3d{from{opacity:0;transform:perspective(900px) rotateY(-28deg) translateX(-8px)}to{opacity:1;transform:perspective(900px) rotateY(0) translateX(0)}}
/* ikon submenu (panel melayang; bukan saat menu diperkecil): ubin 3D yang timbul, terangkat saat disorot, tertekan saat diklik */
body:not(#_):not(.sbmini) #sb .ngi button{box-shadow:none!important;background:none;border-color:transparent}
body:not(#_):not(.sbmini) #sb .ngi button .ic{transition:transform .14s ease,box-shadow .14s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.22),0 2px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.18),0 4px 0 rgba(0,0,0,.16),0 10px 12px -4px rgba(15,23,42,.38)!important}
body:not(#_):not(.sbmini) #sb .ngi button:hover{transform:none!important;box-shadow:none!important}
body:not(#_):not(.sbmini) #sb .ngi button:hover .ic{transform:perspective(300px) rotateX(14deg) translateY(-4px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.22),0 2px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.18),0 4px 0 rgba(0,0,0,.16),0 5px 0 rgba(0,0,0,.14),0 6px 0 rgba(0,0,0,.12),0 16px 16px -4px rgba(15,23,42,.4)!important}
body:not(#_):not(.sbmini) #sb .ngi button:active{transform:none!important;box-shadow:none!important}
body:not(#_):not(.sbmini) #sb .ngi button:active .ic{transform:translateY(3px)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.22),0 3px 5px -2px rgba(15,23,42,.3)!important}
@media (prefers-reduced-motion:reduce){body:not(#_) #sb .ng:hover>.ngi,body:not(#_) #sb .ng:focus-within>.ngi{animation:none}body:not(#_) #sb .ng:has(.ngi):hover>.nt{transform:none}}
/* submenu dikendalikan greet.js (kelas .open): tidak hilang saat mouse menyerong atau keluar sebentar */
@media (min-width:801px){
body.ngjs:not(.sbmini) #sb .ng>.ngi{opacity:0!important;visibility:hidden!important;pointer-events:none;animation:none!important;transition:opacity .18s ease,visibility 0s linear .18s!important}
body.ngjs:not(.sbmini) #sb .ng.open>.ngi{opacity:1!important;visibility:visible!important;pointer-events:auto;z-index:31;transform:none;transition:opacity .16s ease,visibility 0s!important;animation:ngi3d .32s cubic-bezier(.2,.9,.3,1.1) both!important}
body.ngjs:not(.sbmini) #sb .ng.open>.nt{color:var(--ac)}
}
@media (prefers-reduced-motion:reduce){body.ngjs:not(.sbmini) #sb .ng.open>.ngi{animation:none!important}}
#sb .navmore{position:relative;overflow:hidden} /* all:unset membuat posisi static: kilau tombol (::before) melebar menutupi menu Beranda/Dashboard/Pesan Internal */
/* Vendor Management: hasil pencarian dikelompokkan per tipe / negara / kota */
.vcats{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ac2) 45%,var(--card))}
.vcat-h{font-size:12.5px;color:var(--mu)}.vcat{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.vcat>b{width:56px;font-size:12px;color:var(--mu)}
.vchip{border:1px solid var(--bd);background:var(--card);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--tx);box-shadow:0 1px 0 rgba(90,105,125,.25),0 2px 0 rgba(90,105,125,.18)}
.vchip i{font-style:normal;color:var(--mu);margin-left:3px}.vchip.on{background:var(--ac);border-color:var(--ac);color:#fff}.vchip.on i{color:#fff}.vchip:disabled{opacity:.55;cursor:default}

/* Pengingat KPI 24 jam (Beranda) */
.gr-c.kr{grid-column:1/-1;border-left:4px solid #f59e0b}
.kr-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kr-i{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.kr-i.hot{border-color:#ef4444;background:color-mix(in srgb,#ef4444 8%,var(--card))}
.kr-t,.kr-d{display:flex;flex-direction:column;min-width:0}.kr-t{flex:1}.kr-d{text-align:right;white-space:nowrap}
.kr-t .mu,.kr-d .mu{font-size:12px}.kr-i.hot .kr-d b{color:var(--dn)}
.kr-od{margin-top:8px;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,#ef4444 10%,var(--card));color:var(--dn);font-weight:600;cursor:pointer;font-size:13px}
@media(max-width:600px){.kr-i{flex-wrap:wrap}.kr-d{text-align:left}}

/* ===== Beranda 3D: kartu timbul miring mengikuti mouse, logo berputar, angka & ubin timbul ===== */
.l3d.hm{display:inline-block;width:54px;height:41px;vertical-align:middle;margin:-6px 12px 0 0}
body:not(#_) .gr3d .gr-h h2{text-shadow:0 1px 0 #fff,0 2px 0 rgba(90,105,125,.22),0 3px 0 rgba(90,105,125,.18),0 6px 10px rgba(15,23,42,.18)}
body:not(#_) .gr3d .gr-c{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease,box-shadow .3s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(90,105,125,.14),0 2px 0 rgba(90,105,125,.16),0 3px 0 rgba(90,105,125,.18),0 4px 0 rgba(90,105,125,.2),0 5px 0 rgba(90,105,125,.22),0 18px 30px -10px rgba(15,23,42,.28)}
body:not(#_) .gr3d .gr-c:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.14),0 2px 0 rgba(90,105,125,.16),0 3px 0 rgba(90,105,125,.18),0 4px 0 rgba(90,105,125,.2),0 5px 0 rgba(90,105,125,.22),0 6px 0 rgba(90,105,125,.24),0 7px 0 rgba(90,105,125,.26),0 28px 38px -12px rgba(15,23,42,.32)}
body.pgin .gr3d .gr-c{animation-name:gr3In}
@keyframes gr3In{0%{opacity:0;transform:perspective(900px) rotateX(22deg) translateY(28px) scale(.96)}70%{opacity:1}100%{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}
.gr3d .gr-c h3{text-shadow:0 1px 0 #fff,0 2px 3px rgba(15,23,42,.12)}
body:not(#_) .gr3d .gr-s div{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(232,236,241,.9));border:1px solid rgba(140,150,165,.35);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.18),0 2px 0 rgba(90,105,125,.2),0 3px 0 rgba(90,105,125,.22),0 8px 12px -6px rgba(15,23,42,.25);transition:transform .2s}
body:not(#_) .gr3d .gr-s div:hover{transform:translateY(-2px)}
body:not(#_) .gr3d .gr-s b{text-shadow:0 1px 0 color-mix(in srgb,var(--ac) 35%,#fff),0 2px 0 color-mix(in srgb,var(--ac) 50%,#fff),0 3px 5px color-mix(in srgb,var(--ac) 25%,transparent)}
body:not(#_) .gr3d .gr-l .gn{background:radial-gradient(circle at 35% 30%,#ffd2ad,#ff8a33 55%,#d85a05);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 2px 0 #b44600,0 4px 6px -2px rgba(234,106,18,.55)}
body:not(#_) .gr3d .gr-l .gn.hi{background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 55%,#b91c1c);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 2px 0 #991b1b,0 4px 6px -2px rgba(239,68,68,.5)}
body:not(#_) .gr3d .gr-l li.gg{transition:transform .18s}body:not(#_) .gr3d .gr-l li.gg:hover{transform:translateX(4px)}
body:not(#_) .gr3d .kr-i{box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(90,105,125,.16),0 2px 0 rgba(90,105,125,.18),0 3px 0 rgba(90,105,125,.2),0 8px 12px -6px rgba(15,23,42,.22);transition:transform .2s}
body:not(#_) .gr3d .kr-i:hover{transform:translateY(-2px)}
body:not(#_) .gr3d .kr-i.hot{animation:krHot 1.8s ease-in-out infinite}
@keyframes krHot{0%,100%{box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(185,28,28,.35),0 8px 12px -6px rgba(239,68,68,.35)}50%{box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(185,28,28,.45),0 0 0 4px rgba(239,68,68,.18),0 10px 16px -6px rgba(239,68,68,.45)}}
:root[data-theme="dark"] .gr3d .gr-c h3,:root[data-theme^="gelap"] .gr3d .gr-c h3,:root[data-theme="dark"] body:not(#_) .gr3d .gr-h h2,:root[data-theme^="gelap"] body:not(#_) .gr3d .gr-h h2{text-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.4)}
:root[data-theme="dark"] body:not(#_) .gr3d .gr-s div,:root[data-theme^="gelap"] body:not(#_) .gr3d .gr-s div{background:linear-gradient(180deg,rgba(60,66,76,.9),rgba(36,40,47,.9));border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.4),0 3px 0 rgba(0,0,0,.35),0 8px 12px -6px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){body.pgin .gr3d .gr-c,body:not(#_) .gr3d .kr-i.hot{animation:none}}
@media print{.l3d.hm{display:none}}

/* Beranda: kalender polos + catatan per tanggal */
#hcCal{display:none;position:fixed;z-index:8999;width:250px;padding:8px 10px 6px;border-radius:14px;background:var(--card);border:1px solid var(--bd);box-shadow:0 14px 34px -8px rgba(15,23,42,.35);animation:hcIn .14s ease-out}
.hcal{background:none;border:0;box-shadow:none;padding:0;font-size:13px;min-width:0}
.hc-ic{position:relative;border:0;background:none;padding:0 2px;margin:0 2px 0 -2px;cursor:pointer;font-size:15px;line-height:1;border-radius:6px;transition:transform .15s}.hc-ic:hover{transform:scale(1.18)}
.hc-ic em{position:absolute;right:-1px;bottom:-1px;width:5px;height:5px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 1.5px var(--card)}
.hc-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.hc-t b{cursor:pointer;font-size:14px}
.hc-t button,.hc-r button{border:0;background:none;cursor:pointer;color:var(--mu);font-size:16px;padding:0 6px;line-height:1}.hc-t button:hover,.hc-r button:hover{color:var(--ac)}
.hc-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:1px;text-align:center}
.hc-g span{font-size:10.5px;color:var(--mu);font-weight:600;padding-bottom:2px}.hc-g span.we{color:var(--dn);opacity:.7}
.hc-g button{position:relative;border:0;background:none;height:28px;border-radius:50%;cursor:pointer;color:inherit;font:inherit;font-size:12.5px;padding:0}
.hc-g button:hover{color:var(--ac)}.hc-g button.we{color:var(--dn)}.hc-g button.td{font-weight:800;color:var(--ac)}
.hc-g button.sel{color:#fff!important;background:var(--ac);width:28px;justify-self:center}
.hc-g u{position:absolute;left:0;right:0;bottom:1px;display:flex;justify-content:center;gap:2px;text-decoration:none}
.hc-g em,.hc-r em{width:4px;height:4px;border-radius:50%;display:inline-block;flex:none}.hc-g button.sel em{box-shadow:0 0 0 1px #fff}
em.n{background:#f59e0b}em.f{background:#3b82f6}em.s{background:#14b8a6}em.k{background:#ef4444}
#hcPop{display:none;position:fixed;z-index:9000;width:270px;max-height:60vh;overflow:auto;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--bd);box-shadow:0 14px 34px -8px rgba(15,23,42,.35);font-size:13px;animation:hcIn .14s ease-out}
@keyframes hcIn{from{opacity:0;transform:translateY(-4px)}}
.hc-dl{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:12.5px;margin-bottom:3px}.hc-dl button{border:0;background:none;cursor:pointer;color:var(--mu);font-size:12px}
#hnTx{width:100%;box-sizing:border-box;border:0;border-bottom:1px dashed var(--bd);border-radius:0;background:none;padding:4px 0;font-size:13px;box-shadow:none;outline:none}#hnTx:focus{border-bottom-color:var(--ac)}
.hc-r{display:flex;align-items:center;gap:6px;padding:3px 0;line-height:1.3}.hc-r span{flex:1;min-width:0;word-break:break-word}
.hc-r input{width:auto;margin:0}.hc-r.dn span{text-decoration:line-through;color:var(--mu)}.hc-r button{font-size:12px;opacity:0;transition:opacity .15s}.hc-r:hover button{opacity:1}
.hc-r.a{cursor:pointer;color:var(--mu);font-size:12.5px}.hc-r.a:hover{color:var(--ac)}.hc-r.a em{width:6px;height:6px;margin:0 3px}
@media(hover:none){.hc-r button{opacity:.6}}
.hc-r.a{align-items:flex-start}.hc-r.a em{margin-top:6px}
#hcPop textarea#hnTx{width:100%;box-sizing:border-box;min-height:84px;resize:none;border:0;border-radius:8px;background:color-mix(in srgb,#fde68a 32%,transparent);padding:7px 8px;font:inherit;font-size:13px;line-height:1.45;outline:none;box-shadow:none}#hcPop textarea#hnTx:focus{background:color-mix(in srgb,#fde68a 45%,transparent)}.hc-ag{margin-top:6px;border-top:1px dashed var(--bd);padding-top:4px}
/* Kalender layar penuh */
#hcFS{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(50vw,900px);min-width:min(560px,96vw);height:min(60vh,640px);min-height:min(420px,90vh);z-index:8998;background:var(--bg,#f5f7fa);border:1px solid var(--bd);border-radius:16px;box-shadow:0 24px 60px -12px rgba(15,23,42,.45);padding:12px 14px;box-sizing:border-box;animation:hcFsIn .16s ease-out}
@keyframes hcFsIn{from{opacity:0;transform:translate(-50%,-48%)}}

#hcFS{display:none}#hcFS[style*="block"]{display:flex!important;flex-direction:column}
.fs-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fs-h h2{margin:0 4px;font-size:17px;min-width:150px;text-align:center}
.fs-h button{border:1px solid var(--bd);background:var(--card);border-radius:8px;padding:4px 11px;cursor:pointer;color:inherit;font-size:15px}
.fs-h .fs-td{font-size:13px}.fs-h .fs-x{margin-left:auto;border:0;background:none;font-size:20px;color:var(--mu)}.fs-h .fs-x:hover{color:var(--dn)}
.fs-lg{display:flex;gap:9px;margin-left:8px;font-size:11px;color:var(--mu);flex-wrap:wrap}.fs-lg em{margin-right:4px}
.fs-w{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;font-weight:600;color:var(--mu);padding:0 2px 4px}.fs-w .we{color:var(--dn)}
.fs-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.fs-d,.fs-o{background:var(--card);padding:5px 7px;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}.fs-o{background:color-mix(in srgb,var(--card) 60%,transparent)}
.fs-d{cursor:pointer}.fs-d:hover{background:color-mix(in srgb,var(--ac) 6%,var(--card))}.fs-d b{font-size:13px}.fs-d.we b{color:var(--dn)}
.fs-d.td b{background:var(--ac);color:#fff;border-radius:999px;padding:0 7px;align-self:flex-start}.fs-d.sel{box-shadow:inset 0 0 0 2px var(--ac)}
.fs-n{font-size:11px;line-height:1.3;white-space:pre-wrap;word-break:break-word;background:color-mix(in srgb,#fde68a 35%,transparent);border-radius:5px;padding:2px 5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fs-a{font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-a em{width:6px;height:6px;margin-right:4px;vertical-align:1px}
:root[data-theme="dark"] #hcFS,:root[data-theme^="gelap"] #hcFS{background:#15181d}
@media(max-width:700px){.fs-lg{display:none}.fs-h h2{min-width:0;font-size:17px}.fs-w span{overflow:hidden;text-overflow:ellipsis}.fs-a{display:none}}
.fs-lg em,.fs-a em{display:inline-block;width:7px;height:7px;border-radius:50%}
#ctl{position:fixed;right:12px;bottom:12px;z-index:9500;display:flex;gap:6px}
#ctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--bd);background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--tx);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 4px 14px -4px rgba(15,23,42,.35);opacity:.85;transition:opacity .15s,transform .15s,color .15s;padding:0;text-shadow:none}
#ctl button:hover{opacity:1;transform:scale(1.1);color:var(--ac)}#ctl #fsb.on{color:var(--ac);opacity:.95}#ctl .lo:hover{color:var(--dn)}
@media print{#ctl{display:none!important}}
/* ---------- Tema tambahan: Neumorphism Soft White (putih lembut, panel cekung) ---------- */
:root[data-theme="neu"]{--bg:#f2f4f7;--card:#f2f4f7;--tx:#252c37;--mu:#717d8d;--bd:#e2e7ee;--ac:#e8650a;--ac2:#fbeee4;--dn:#c0392b;--onac:#fff;--acs:rgba(232,101,10,.3);--nl:#ffffff;--nd:#d6dde7;--nup2:4px 4px 10px var(--nd),-4px -4px 10px var(--nl);--nin:inset 3px 3px 7px var(--nd),inset -3px -3px 7px var(--nl);--nin2:inset 6px 6px 14px var(--nd),inset -6px -6px 14px var(--nl);--ncv:linear-gradient(145deg,#e8ecf1,#fbfcfd);--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent}
:root[data-theme="neu"] body:not(#_),:root[data-theme="neu"] body:not(#_) .ct,:root[data-theme="neu"] body:not(#_)[data-sec] .ct{background:var(--bg)!important}
:root[data-theme="neu"] body:not(#_) .ct header{background:var(--bg)!important;border:0!important;box-shadow:0 6px 12px -10px var(--nd)!important}
:root[data-theme="neu"] body:not(#_) #sb{background:var(--bg)!important;border-right:0!important;box-shadow:6px 0 16px var(--nd),inset -1px 0 0 var(--nl)!important}
:root[data-theme="neu"] body:not(#_) #sb .ngi{background:var(--bg)!important;border:0!important}
:root[data-theme="neu"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c){background:var(--card)!important;border:0!important;border-radius:18px;box-shadow:var(--nin2)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="neu"] body:not(#_) :is(.mc,.thm){background:var(--card)!important;border:0!important;border-radius:18px;box-shadow:10px 10px 26px rgba(150,162,180,.45),-6px -6px 18px var(--nl)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="neu"] body:not(#_) :is(.pn .w,.bx .w,.mc .w){box-shadow:var(--nin)!important;border-radius:14px}
:root[data-theme="neu"] body:not(#_) :is(.gr-s div,.obs){background:var(--card)!important;border:0!important;border-radius:14px;box-shadow:var(--nin)!important}
:root[data-theme="neu"] body:not(#_) :is(.kp,.bx)::before{opacity:0!important}
:root[data-theme="neu"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button,.thi){background:var(--ncv)!important;color:var(--tx)!important;border:0!important;border-radius:13px;box-shadow:var(--nup2)!important;text-shadow:none!important}
:root[data-theme="neu"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="neu"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button,#sb nav button):hover{color:var(--ac)!important}
:root[data-theme="neu"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button,#sb nav button):active{background:var(--bg)!important;box-shadow:var(--nin)!important;transform:none!important}
:root[data-theme="neu"] body:not(#_) :is(.gkl button.on,#sb nav button.on,#sb nav button.on:hover,.thi.on){background:var(--bg)!important;box-shadow:var(--nin)!important;color:var(--ac)!important;font-weight:600}
:root[data-theme="neu"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:#ec7a2e!important;color:#fff!important;box-shadow:4px 4px 10px var(--nd),-4px -4px 10px var(--nl)!important}
:root[data-theme="neu"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_):active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 6px rgba(255,255,255,.25)!important}
:root[data-theme="neu"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="neu"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important}
:root[data-theme="neu"] body:not(#_) :is(input,select,textarea){background:var(--bg)!important;border:0!important;border-radius:12px;box-shadow:var(--nin)!important;color:var(--tx)}
:root[data-theme="neu"] body:not(#_) :is(input,select,textarea):focus{outline:0;box-shadow:var(--nin),0 0 0 2px var(--acs)!important}
:root[data-theme="neu"] body:not(#_) :is(input[type=checkbox],input[type=radio]){box-shadow:none!important;accent-color:var(--ac)}
:root[data-theme="neu"] body:not(#_) table{background:transparent!important}
:root[data-theme="neu"] body:not(#_) th{background:transparent!important;border-bottom:1px solid var(--bd)!important;color:var(--mu)}
:root[data-theme="neu"] body:not(#_) td{border-color:var(--bd)!important}
:root[data-theme="neu"] body:not(#_) .badge{border:0!important;box-shadow:var(--nup2)!important}
:root[data-theme="neu"] body:not(#_) #mo,:root[data-theme="neu"] body:not(#_) .ov{background:rgba(205,213,225,.5)!important}

/* Manajemen Cabang: jarak tepi seragam di setiap halaman */
.kcw{padding:14px 16px 24px;box-sizing:border-box;max-width:100%;overflow-x:hidden}.kcw>.bar{margin:0 0 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.kcw .kpis{margin-bottom:14px}.kcw .fsr{box-sizing:border-box;max-width:100%}.kcw .fsr>div[style*="overflow-x"]{max-width:100%}
.kcw .kcg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kcw .fsr{overflow-x:auto}.kcw td:first-child{min-width:150px}
@media (max-width:900px){.kcw .kcg{grid-template-columns:minmax(0,1fr)}}
.kcw .kcg+.kcg{margin-top:14px}
.kcclk{cursor:pointer;display:block}.kcclk>.fsr{transition:box-shadow .15s,transform .15s}.kcclk:hover>.fsr{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}.kcg>.kcclk>.fsr{height:100%;margin-bottom:0}.kcg+.kcclk{margin-top:14px}.kcdpb{margin-bottom:10px}
/* ===== Tema Supabase Putih: datar, latar putih, aksen hijau, garis tipis ===== */
:root[data-theme="supa"]{color-scheme:light;--bg:#ffffff;--card:#ffffff;--tx:#1c1c1c;--mu:#6b6b6b;--bd:#e5e5e5;--ac:#1f9d63;--ac2:rgba(62,207,142,.12);--dn:#dc2626;--onac:#fff;--acs:rgba(62,207,142,.35);--sb2:#fafafa;--hv:#f0f0f0;--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent;--sec-fin:transparent}
:root[data-theme="supa"] body:not(#_),:root[data-theme="supa"] body:not(#_) .ct,:root[data-theme="supa"] body:not(#_)[data-sec] .ct{background:var(--bg)!important;color:var(--tx)}
:root[data-theme="supa"] body:not(#_) .ct header{background:var(--bg)!important;border:0!important;border-bottom:1px solid var(--bd)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="supa"] body:not(#_) #sb{background:var(--sb2)!important;border-right:1px solid var(--bd)!important;box-shadow:none!important;color:var(--tx)}
:root[data-theme="supa"] body:not(#_) #sb *{text-shadow:none!important}
:root[data-theme="supa"] body:not(#_) #sb .ngi{background:#ffffff!important;border:1px solid var(--bd)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="supa"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr){background:var(--card)!important;border:1px solid var(--bd)!important;border-radius:8px;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="supa"] body:not(#_) :is(.mc,.thm){background:var(--card)!important;border:1px solid var(--bd)!important;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.10)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--tx)}
:root[data-theme="supa"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w){border-radius:6px;box-shadow:none!important}
:root[data-theme="supa"] body:not(#_) :is(.gr-s div,.obs){background:var(--card)!important;border:1px solid var(--bd)!important;border-radius:6px;box-shadow:none!important}
:root[data-theme="supa"] body:not(#_) :is(.kp,.bx,.fsr)::before,:root[data-theme="supa"] body:not(#_) :is(.kp,.bx,.fsr)::after{display:none!important}
:root[data-theme="supa"] body:not(#_) :is(.kp,.kp *){text-shadow:none!important}
:root[data-theme="supa"] body:not(#_) .kp :is(b,strong,.v,.kv,h2,h3){color:var(--tx)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
:root[data-theme="supa"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:#ffffff!important;color:var(--tx)!important;border:1px solid #dcdcdc!important;border-radius:6px;box-shadow:none!important;text-shadow:none!important;transform:none!important}
:root[data-theme="supa"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="supa"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button):hover{background:#f5f5f5!important;border-color:#c8c8c8!important}
:root[data-theme="supa"] body:not(#_) :is(.gkl button.on,.thi.on){background:var(--ac2)!important;border-color:var(--ac)!important;color:var(--ac)!important}
:root[data-theme="supa"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:#1f7a52!important;border:1px solid #2fa36d!important;color:#fff!important;box-shadow:none!important}
:root[data-theme="supa"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_):hover{background:#249461!important}
:root[data-theme="supa"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="supa"] body:not(#_) #sb nav button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:#3a3a3a!important;border-radius:6px}
:root[data-theme="supa"] body:not(#_) #sb nav button:hover{background:var(--hv)!important;color:#111!important}
:root[data-theme="supa"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:var(--hv)!important;border-color:var(--bd)!important;color:var(--ac)!important}
:root[data-theme="supa"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important;color:inherit!important}
:root[data-theme="supa"] body:not(#_) :is(input,select,textarea){background:#ffffff!important;border:1px solid #dcdcdc!important;border-radius:6px;box-shadow:none!important;color:var(--tx)!important}
:root[data-theme="supa"] body:not(#_) :is(input,select,textarea):focus{outline:0;border-color:var(--ac)!important;box-shadow:0 0 0 2px var(--acs)!important}
:root[data-theme="supa"] body:not(#_) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac)}
:root[data-theme="supa"] body:not(#_) table{background:transparent!important}
:root[data-theme="supa"] body:not(#_) th{background:transparent!important;border-bottom:1px solid var(--bd)!important;color:var(--mu)!important}
:root[data-theme="supa"] body:not(#_) td{border-color:var(--bd)!important;color:var(--tx)}
:root[data-theme="supa"] body:not(#_) tr:hover>td{background:#fafafa!important}
:root[data-theme="supa"] body:not(#_) .stat{background:var(--ac2)!important;color:var(--ac)!important;border:1px solid rgba(62,207,142,.25)}
:root[data-theme="supa"] body:not(#_) .badge{border:1px solid var(--bd)!important;box-shadow:none!important}
:root[data-theme="supa"] body:not(#_) #mo,:root[data-theme="supa"] body:not(#_) .ov,:root[data-theme="supa"] body:not(#_) .m:not(.mpg){background:rgba(0,0,0,.35)!important}
:root[data-theme="supa"] body:not(#_) a{color:var(--ac)}
:root[data-theme="supa"] ::-webkit-scrollbar{width:10px;height:10px}:root[data-theme="supa"] ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:6px}:root[data-theme="supa"] ::-webkit-scrollbar-track{background:transparent}
:root[data-theme="supa"] body:not(#_) #sb::before,:root[data-theme="supa"] body:not(#_) #sb::after,:root[data-theme="supa"] body:not(#_) #sb .ng::before,:root[data-theme="supa"] body:not(#_) #sb .ng::after{display:none!important}
:root[data-theme="supa"] body:not(#_) #sb .brand{border-bottom:1px solid var(--bd)!important;background:transparent!important;box-shadow:none!important}
:root[data-theme="supa"] body:not(#_) #sb .brand b,:root[data-theme="supa"] body:not(#_) #who{color:var(--tx)!important}
:root[data-theme="supa"] body:not(#_) #sb .brand span,:root[data-theme="supa"] body:not(#_) #who .ver{color:var(--mu)!important}
:root[data-theme="supa"] body:not(#_) #who{border-top:1px solid var(--bd)!important;background:transparent!important}
:root[data-theme="supa"] body:not(#_) #sb .ng{background:#ffffff!important;border:1px solid var(--bd)!important;box-shadow:none!important;border-radius:8px}
:root[data-theme="supa"] body:not(#_) #sb .ng .nt{color:#525252!important}
:root[data-theme="supa"] body:not(#_) #sb .ng.on .nt,:root[data-theme="supa"] body:not(#_) #sb .ng .nt:hover{color:var(--ac)!important}
:root[data-theme="supa"] body:not(#_) #sb .navmore{background:transparent!important;border:1px dashed var(--bd)!important;box-shadow:none!important;color:var(--mu)!important}
:root[data-theme="supa"] body:not(#_) #sb .sbbtn{background:#ffffff!important}
:root[data-theme="supa"] body:not(#_) #sb .ng .nt,:root[data-theme="supa"] body:not(#_) #sb .ng.open .nt{background:transparent!important;box-shadow:none!important;border:0!important}
:root[data-theme="supa"] body:not(#_) #sb .ng.open{border-color:var(--ac)!important}
:root[data-theme="supa"] body:not(#_) #sb .ngi button,:root[data-theme="supa"] body:not(#_) #sb .ngi button *{color:#3a3a3a!important}
:root[data-theme="supa"] body:not(#_) #sb .ngi button.on,:root[data-theme="supa"] body:not(#_) #sb .ngi button.on *{color:var(--ac)!important}

:root[data-theme="supa"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:#3ecf8e!important;border:1px solid #2fb57a!important;color:#0b1f15!important}
:root[data-theme="supa"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_):hover{background:#36bd81!important}
:root[data-theme="supa"] body:not(#_) .stat{background:#f3fbf7!important;color:#1f7a52!important;border:1px solid #cdeedd!important}
:root[data-theme="supa"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:#ecf8f2!important;border-color:#cdeedd!important;color:#1f7a52!important}
:root[data-theme="supa"] body:not(#_) #sb nav button .ic,:root[data-theme="supa"] body:not(#_) #sb .ngi .ic{color:inherit!important;filter:none!important}

/* ===== Tema Glassy Krem: panel kaca buram di atas latar ruang kantor krem ===== */
:root[data-theme="kaca"]{--bg:#efe3d0;--card:rgba(255,250,243,.55);--tx:#2e2219;--mu:#6f5b48;--bd:rgba(120,90,60,.18);--ac:#9a5b26;--ac2:rgba(154,91,38,.12);--dn:#b3261e;--onac:#fff;--acs:rgba(154,91,38,.35);--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent;--sec-fin:transparent}
:root[data-theme="kaca"] body:not(#_){background:linear-gradient(rgba(250,246,240,.06),rgba(245,238,228,.10)),url("bg-kaca.jpg") center 42%/cover no-repeat fixed,#e9dccb!important;color:var(--tx)}
:root[data-theme="kaca"] body:not(#_) .ct,:root[data-theme="kaca"] body:not(#_)[data-sec] .ct{background:transparent!important}
:root[data-theme="kaca"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 0 1px 0!important;border-radius:0}
:root[data-theme="kaca"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 1px 0 0!important;border-radius:0}
:root[data-theme="kaca"] body:not(#_) #sb::before,:root[data-theme="kaca"] body:not(#_) #sb::after,:root[data-theme="kaca"] body:not(#_) #sb .ng::before,:root[data-theme="kaca"] body:not(#_) #sb .ng::after,:root[data-theme="kaca"] body:not(#_) :is(.kp,.bx,.fsr)::before,:root[data-theme="kaca"] body:not(#_) :is(.kp,.bx,.fsr)::after{display:none!important}
:root[data-theme="kaca"] body:not(#_) #sb *{text-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) #sb .brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) #sb .brand b,:root[data-theme="kaca"] body:not(#_) #who{color:var(--tx)!important}
:root[data-theme="kaca"] body:not(#_) #sb .brand span,:root[data-theme="kaca"] body:not(#_) #who .ver{color:var(--mu)!important}
:root[data-theme="kaca"] body:not(#_) #who{background:transparent!important;border-top:1px solid rgba(255,255,255,.5)!important}
:root[data-theme="kaca"] body:not(#_) #sb .ng{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 4px 14px rgba(92,62,32,.08)!important;border-radius:14px}
:root[data-theme="kaca"] body:not(#_) #sb .ng .nt,:root[data-theme="kaca"] body:not(#_) #sb .ng.open .nt{background:transparent!important;box-shadow:none!important;border:0!important;color:#4a3a2c!important}
:root[data-theme="kaca"] body:not(#_) #sb .ng.open{border-color:rgba(154,91,38,.45)!important}
:root[data-theme="kaca"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kaca"] body:not(#_) #sb nav button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:#3d2f23!important;border-radius:10px}
:root[data-theme="kaca"] body:not(#_) #sb nav button:hover{background:rgba(255,255,255,.45)!important}
:root[data-theme="kaca"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.9)!important;color:var(--ac)!important;box-shadow:0 2px 10px rgba(92,62,32,.12)!important}
:root[data-theme="kaca"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important;color:inherit!important}
:root[data-theme="kaca"] body:not(#_) #sb .navmore{background:rgba(255,255,255,.25)!important;border:1px dashed rgba(120,90,60,.3)!important;box-shadow:none!important;color:var(--mu)!important}
:root[data-theme="kaca"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr){background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kaca"] body:not(#_) :is(.mc,.thm){background:rgba(255,250,243,.82)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important;backdrop-filter:blur(22px) saturate(150%)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:20px;box-shadow:0 20px 60px rgba(60,40,20,.25)!important;color:var(--tx)}
:root[data-theme="kaca"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:12px}
:root[data-theme="kaca"] body:not(#_) :is(.gr-s div,.obs){background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:12px;box-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) :is(.kp,.kp *){text-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) .kp :is(b,strong,.v,.kv,h2,h3){color:var(--tx)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
:root[data-theme="kaca"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:rgba(255,255,255,.5)!important;color:var(--tx)!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:10px;box-shadow:0 2px 8px rgba(92,62,32,.10)!important;text-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kaca"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="kaca"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button):hover{background:rgba(255,255,255,.75)!important}
:root[data-theme="kaca"] body:not(#_) :is(.gkl button.on,.thi.on){background:rgba(255,255,255,.85)!important;color:var(--ac)!important;border-color:rgba(154,91,38,.4)!important}
:root[data-theme="kaca"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:linear-gradient(180deg,#b27140,#94562a)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:0 4px 14px rgba(148,86,42,.35)!important}
:root[data-theme="kaca"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="kaca"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:10px;box-shadow:inset 0 1px 2px rgba(92,62,32,.08)!important;color:var(--tx)!important}
:root[data-theme="kaca"] body:not(#_) :is(input,select,textarea):focus{outline:0;border-color:rgba(154,91,38,.6)!important;box-shadow:0 0 0 3px var(--acs)!important}
:root[data-theme="kaca"] body:not(#_) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac)}
:root[data-theme="kaca"] body:not(#_) table{background:transparent!important}
:root[data-theme="kaca"] body:not(#_) th{background:transparent!important;border-bottom:1px solid rgba(120,90,60,.2)!important;color:var(--mu)!important}
:root[data-theme="kaca"] body:not(#_) td{border-color:rgba(120,90,60,.12)!important;color:var(--tx)}
:root[data-theme="kaca"] body:not(#_) tr:hover>td{background:rgba(255,255,255,.3)!important}
:root[data-theme="kaca"] body:not(#_) .stat{background:rgba(255,255,255,.5)!important;color:#7a4519!important;border:1px solid rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kaca"] body:not(#_) .badge{border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) #mo,:root[data-theme="kaca"] body:not(#_) .ov,:root[data-theme="kaca"] body:not(#_) .m{background:rgba(70,50,30,.25)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:root[data-theme="kaca"] body:not(#_) #sb .ngi button,:root[data-theme="kaca"] body:not(#_) #sb .ngi button *{color:#3d2f23!important}
:root[data-theme="kaca"] body:not(#_) #sb .ngi button.on,:root[data-theme="kaca"] body:not(#_) #sb .ngi button.on *{color:var(--ac)!important}

:root[data-theme="kaca"] body:not(#_) #sb{border:0!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.45),1px 0 0 rgba(120,86,50,.06)!important}
:root[data-theme="kaca"] body:not(#_) .ct header{border:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)!important}
:root[data-theme="kaca"] body:not(#_) .sbr::after{background:transparent!important;box-shadow:none!important}
:root[data-theme="kaca"] body:not(#_) .sbr:hover::after,:root[data-theme="kaca"] body.sbdrag .sbr::after{background:rgba(154,91,38,.35)!important}
:root[data-theme="kaca"] body:not(#_) #sb .ng{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kaca"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi,.stat){background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(120,86,50,.08)!important}
:root[data-theme="kaca"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.32)!important}
:root[data-theme="kaca"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.14)!important}
:root[data-theme="kaca"] body:not(#_) :is(.mc,.thm){background:rgba(255,252,247,.72)!important}
/* 03y: kaca - blur sidebar dipindah ke lapisan belakang agar sub menu (flyout) tidak terpotong; garis pembatas sidebar jadi garis tipis tunggal */
:root[data-theme="kaca"] body:not(#_) #sb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
:root[data-theme="kaca"] body:not(#_) #sb::before{display:block!important;content:""!important;position:fixed;left:0;top:0;bottom:0;width:var(--sbw,250px);z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);border-right:1px solid rgba(110,80,50,.16);background:none!important}
:root[data-theme="kaca"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,252,247,.72),rgba(255,248,240,.55))!important}
:root[data-theme="kaca"] body:not(#_){background-size:auto,115% auto!important;background-position:0 0,100% 42%!important}
/* 03y: garis geser (resize) sidebar tidak boleh menutupi/menutup panel sub menu */
body:has(#sb .ng:hover) .sbr,body:has(#sb .ng.open) .sbr{pointer-events:none!important}
body:has(#sb .ng:hover) .sbr::after,body:has(#sb .ng.open) .sbr::after{background:transparent!important}
/* 03y: tema beige tanpa garis pembatas sidebar (hanya scroll) */
:root[data-theme="kaca"] body:not(#_) #sb::before{border-right:0!important}
:root[data-theme="kaca"] body:not(#_) .sbr::after,:root[data-theme="kaca"] body:not(#_) .sbr:hover::after,:root[data-theme="kaca"] body.sbdrag .sbr::after{background:transparent!important;box-shadow:none!important}
/* 03z: tema beige - latar kantor biru, panel kaca lebih bening (tembus pandang) */
:root[data-theme="kaca"] body:not(#_){background-size:auto,cover!important;background-position:0 0,center 50%!important}
:root[data-theme="kaca"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr),:root[data-theme="kaca"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.30))!important;-webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 8px 28px rgba(30,50,80,.12),inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kaca"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.14))!important}
:root[data-theme="kaca"] body:not(#_) #sb::before{-webkit-backdrop-filter:blur(14px) saturate(160%)!important;backdrop-filter:blur(14px) saturate(160%)!important}
:root[data-theme="kaca"] body:not(#_) #sb .ng{background:rgba(255,255,255,.14)!important}
:root[data-theme="kaca"] body:not(#_){--mu:#5a4a3c}
:root[data-theme="kaca"] body:not(#_) main>*:not(.w):not(.pn):not(.bx):not(.kp):not(.fsr) :is(h1,h2,h3,b,span,div):not(.w *):not(.pn *):not(.bx *):not(.kp *):not(.fsr *){text-shadow:0 0 6px rgba(255,250,243,.95),0 0 14px rgba(255,250,243,.8)!important}

/* 03za: tema Glassy Biru - salinan Glassy Krem dengan latar ruang kantor biru */


/* ===== Tema Glassy Krem: panel kaca buram di atas latar ruang kantor krem ===== */
:root[data-theme="kbiru"]{--bg:#e6ecf4;--card:rgba(250,252,255,.55);--tx:#18212f;--mu:#4a5568;--bd:rgba(40,60,100,.18);--ac:#2152b8;--ac2:rgba(33,82,184,.12);--dn:#b3261e;--onac:#fff;--acs:rgba(33,82,184,.35);--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent;--sec-fin:transparent}
:root[data-theme="kbiru"] body:not(#_){background:linear-gradient(rgba(245,248,252,.06),rgba(238,243,250,.10)),url("bg-kbiru.jpg") center 42%/cover no-repeat fixed,#dfe6f0!important;color:var(--tx)}
:root[data-theme="kbiru"] body:not(#_) .ct,:root[data-theme="kbiru"] body:not(#_)[data-sec] .ct{background:transparent!important}
:root[data-theme="kbiru"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(30,50,90,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 0 1px 0!important;border-radius:0}
:root[data-theme="kbiru"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(30,50,90,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 1px 0 0!important;border-radius:0}
:root[data-theme="kbiru"] body:not(#_) #sb::before,:root[data-theme="kbiru"] body:not(#_) #sb::after,:root[data-theme="kbiru"] body:not(#_) #sb .ng::before,:root[data-theme="kbiru"] body:not(#_) #sb .ng::after,:root[data-theme="kbiru"] body:not(#_) :is(.kp,.bx,.fsr)::before,:root[data-theme="kbiru"] body:not(#_) :is(.kp,.bx,.fsr)::after{display:none!important}
:root[data-theme="kbiru"] body:not(#_) #sb *{text-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) #sb .brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) #sb .brand b,:root[data-theme="kbiru"] body:not(#_) #who{color:var(--tx)!important}
:root[data-theme="kbiru"] body:not(#_) #sb .brand span,:root[data-theme="kbiru"] body:not(#_) #who .ver{color:var(--mu)!important}
:root[data-theme="kbiru"] body:not(#_) #who{background:transparent!important;border-top:1px solid rgba(255,255,255,.5)!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ng{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 4px 14px rgba(25,45,85,.08)!important;border-radius:14px}
:root[data-theme="kbiru"] body:not(#_) #sb .ng .nt,:root[data-theme="kbiru"] body:not(#_) #sb .ng.open .nt{background:transparent!important;box-shadow:none!important;border:0!important;color:#1f2a3a!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ng.open{border-color:rgba(33,82,184,.45)!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(30,50,90,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kbiru"] body:not(#_) #sb nav button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:#1f2a3a!important;border-radius:10px}
:root[data-theme="kbiru"] body:not(#_) #sb nav button:hover{background:rgba(255,255,255,.45)!important}
:root[data-theme="kbiru"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.9)!important;color:var(--ac)!important;box-shadow:0 2px 10px rgba(25,45,85,.12)!important}
:root[data-theme="kbiru"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important;color:inherit!important}
:root[data-theme="kbiru"] body:not(#_) #sb .navmore{background:rgba(255,255,255,.25)!important;border:1px dashed rgba(40,60,100,.3)!important;box-shadow:none!important;color:var(--mu)!important}
:root[data-theme="kbiru"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr){background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(30,50,90,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kbiru"] body:not(#_) :is(.mc,.thm){background:rgba(250,252,255,.82)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important;backdrop-filter:blur(22px) saturate(150%)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:20px;box-shadow:0 20px 60px rgba(15,30,60,.25)!important;color:var(--tx)}
:root[data-theme="kbiru"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:12px}
:root[data-theme="kbiru"] body:not(#_) :is(.gr-s div,.obs){background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:12px;box-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) :is(.kp,.kp *){text-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) .kp :is(b,strong,.v,.kv,h2,h3){color:var(--tx)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
:root[data-theme="kbiru"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:rgba(255,255,255,.5)!important;color:var(--tx)!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:10px;box-shadow:0 2px 8px rgba(25,45,85,.10)!important;text-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kbiru"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="kbiru"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button):hover{background:rgba(255,255,255,.75)!important}
:root[data-theme="kbiru"] body:not(#_) :is(.gkl button.on,.thi.on){background:rgba(255,255,255,.85)!important;color:var(--ac)!important;border-color:rgba(33,82,184,.4)!important}
:root[data-theme="kbiru"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:linear-gradient(180deg,#4a78d0,#1d47a0)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:0 4px 14px rgba(148,86,42,.35)!important}
:root[data-theme="kbiru"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="kbiru"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:10px;box-shadow:inset 0 1px 2px rgba(25,45,85,.08)!important;color:var(--tx)!important}
:root[data-theme="kbiru"] body:not(#_) :is(input,select,textarea):focus{outline:0;border-color:rgba(33,82,184,.6)!important;box-shadow:0 0 0 3px var(--acs)!important}
:root[data-theme="kbiru"] body:not(#_) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac)}
:root[data-theme="kbiru"] body:not(#_) table{background:transparent!important}
:root[data-theme="kbiru"] body:not(#_) th{background:transparent!important;border-bottom:1px solid rgba(40,60,100,.2)!important;color:var(--mu)!important}
:root[data-theme="kbiru"] body:not(#_) td{border-color:rgba(40,60,100,.12)!important;color:var(--tx)}
:root[data-theme="kbiru"] body:not(#_) tr:hover>td{background:rgba(255,255,255,.3)!important}
:root[data-theme="kbiru"] body:not(#_) .stat{background:rgba(255,255,255,.5)!important;color:#17408f!important;border:1px solid rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kbiru"] body:not(#_) .badge{border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) #mo,:root[data-theme="kbiru"] body:not(#_) .ov,:root[data-theme="kbiru"] body:not(#_) .m{background:rgba(20,35,70,.25)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:root[data-theme="kbiru"] body:not(#_) #sb .ngi button,:root[data-theme="kbiru"] body:not(#_) #sb .ngi button *{color:#1f2a3a!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ngi button.on,:root[data-theme="kbiru"] body:not(#_) #sb .ngi button.on *{color:var(--ac)!important}

:root[data-theme="kbiru"] body:not(#_) #sb{border:0!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.45),1px 0 0 rgba(30,50,90,.06)!important}
:root[data-theme="kbiru"] body:not(#_) .ct header{border:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)!important}
:root[data-theme="kbiru"] body:not(#_) .sbr::after{background:transparent!important;box-shadow:none!important}
:root[data-theme="kbiru"] body:not(#_) .sbr:hover::after,:root[data-theme="kbiru"] body.sbdrag .sbr::after{background:rgba(33,82,184,.35)!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ng{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kbiru"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi,.stat){background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(30,50,90,.08)!important}
:root[data-theme="kbiru"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.32)!important}
:root[data-theme="kbiru"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.14)!important}
:root[data-theme="kbiru"] body:not(#_) :is(.mc,.thm){background:rgba(250,252,255,.72)!important}
/* 03y: kaca - blur sidebar dipindah ke lapisan belakang agar sub menu (flyout) tidak terpotong; garis pembatas sidebar jadi garis tipis tunggal */
:root[data-theme="kbiru"] body:not(#_) #sb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
:root[data-theme="kbiru"] body:not(#_) #sb::before{display:block!important;content:""!important;position:fixed;left:0;top:0;bottom:0;width:var(--sbw,250px);z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);border-right:1px solid rgba(30,50,90,.16);background:none!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(250,252,255,.72),rgba(246,249,253,.55))!important}
:root[data-theme="kbiru"] body:not(#_){background-size:auto,115% auto!important;background-position:0 0,100% 42%!important}
/* 03y: tema beige tanpa garis pembatas sidebar (hanya scroll) */
:root[data-theme="kbiru"] body:not(#_) #sb::before{border-right:0!important}
:root[data-theme="kbiru"] body:not(#_) .sbr::after,:root[data-theme="kbiru"] body:not(#_) .sbr:hover::after,:root[data-theme="kbiru"] body.sbdrag .sbr::after{background:transparent!important;box-shadow:none!important}
/* 03z: tema beige - latar kantor biru, panel kaca lebih bening (tembus pandang) */
:root[data-theme="kbiru"] body:not(#_){background-size:auto,cover!important;background-position:0 0,center 50%!important}
:root[data-theme="kbiru"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr),:root[data-theme="kbiru"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.30))!important;-webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 8px 28px rgba(30,50,80,.12),inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kbiru"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.14))!important}
:root[data-theme="kbiru"] body:not(#_) #sb::before{-webkit-backdrop-filter:blur(14px) saturate(160%)!important;backdrop-filter:blur(14px) saturate(160%)!important}
:root[data-theme="kbiru"] body:not(#_) #sb .ng{background:rgba(255,255,255,.14)!important}
:root[data-theme="kbiru"] body:not(#_){--mu:#5a4a3c}
:root[data-theme="kbiru"] body:not(#_) main>*:not(.w):not(.pn):not(.bx):not(.kp):not(.fsr) :is(h1,h2,h3,b,span,div):not(.w *):not(.pn *):not(.bx *):not(.kp *):not(.fsr *){text-shadow:0 0 6px rgba(250,252,255,.95),0 0 14px rgba(250,252,255,.8)!important}

/* 04b: tema Glassy Toska - salinan Glassy Krem dengan latar kamar toska-kuning */


/* ===== Tema Glassy Krem: panel kaca buram di atas latar ruang kantor krem ===== */
:root[data-theme="ktoska"]{--bg:#dff0f2;--card:rgba(250,254,254,.55);--tx:#13292d;--mu:#40585c;--bd:rgba(20,70,80,.18);--ac:#0b7285;--ac2:rgba(11,114,133,.12);--dn:#b3261e;--onac:#fff;--acs:rgba(11,114,133,.35);--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent;--sec-fin:transparent}
:root[data-theme="ktoska"] body:not(#_){background:linear-gradient(rgba(245,252,252,.06),rgba(236,248,249,.10)),url("bg-ktoska.jpg") center 42%/cover no-repeat fixed,#d6ecef!important;color:var(--tx)}
:root[data-theme="ktoska"] body:not(#_) .ct,:root[data-theme="ktoska"] body:not(#_)[data-sec] .ct{background:transparent!important}
:root[data-theme="ktoska"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(10,60,70,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 0 1px 0!important;border-radius:0}
:root[data-theme="ktoska"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(10,60,70,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 1px 0 0!important;border-radius:0}
:root[data-theme="ktoska"] body:not(#_) #sb::before,:root[data-theme="ktoska"] body:not(#_) #sb::after,:root[data-theme="ktoska"] body:not(#_) #sb .ng::before,:root[data-theme="ktoska"] body:not(#_) #sb .ng::after,:root[data-theme="ktoska"] body:not(#_) :is(.kp,.bx,.fsr)::before,:root[data-theme="ktoska"] body:not(#_) :is(.kp,.bx,.fsr)::after{display:none!important}
:root[data-theme="ktoska"] body:not(#_) #sb *{text-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) #sb .brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) #sb .brand b,:root[data-theme="ktoska"] body:not(#_) #who{color:var(--tx)!important}
:root[data-theme="ktoska"] body:not(#_) #sb .brand span,:root[data-theme="ktoska"] body:not(#_) #who .ver{color:var(--mu)!important}
:root[data-theme="ktoska"] body:not(#_) #who{background:transparent!important;border-top:1px solid rgba(255,255,255,.5)!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ng{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 4px 14px rgba(8,50,60,.08)!important;border-radius:14px}
:root[data-theme="ktoska"] body:not(#_) #sb .ng .nt,:root[data-theme="ktoska"] body:not(#_) #sb .ng.open .nt{background:transparent!important;box-shadow:none!important;border:0!important;color:#173236!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ng.open{border-color:rgba(11,114,133,.45)!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(10,60,70,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="ktoska"] body:not(#_) #sb nav button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:#173236!important;border-radius:10px}
:root[data-theme="ktoska"] body:not(#_) #sb nav button:hover{background:rgba(255,255,255,.45)!important}
:root[data-theme="ktoska"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.9)!important;color:var(--ac)!important;box-shadow:0 2px 10px rgba(8,50,60,.12)!important}
:root[data-theme="ktoska"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important;color:inherit!important}
:root[data-theme="ktoska"] body:not(#_) #sb .navmore{background:rgba(255,255,255,.25)!important;border:1px dashed rgba(20,70,80,.3)!important;box-shadow:none!important;color:var(--mu)!important}
:root[data-theme="ktoska"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr){background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(10,60,70,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="ktoska"] body:not(#_) :is(.mc,.thm){background:rgba(250,254,254,.82)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important;backdrop-filter:blur(22px) saturate(150%)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:20px;box-shadow:0 20px 60px rgba(5,35,40,.25)!important;color:var(--tx)}
:root[data-theme="ktoska"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:12px}
:root[data-theme="ktoska"] body:not(#_) :is(.gr-s div,.obs){background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:12px;box-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) :is(.kp,.kp *){text-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) .kp :is(b,strong,.v,.kv,h2,h3){color:var(--tx)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
:root[data-theme="ktoska"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:rgba(255,255,255,.5)!important;color:var(--tx)!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:10px;box-shadow:0 2px 8px rgba(8,50,60,.10)!important;text-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="ktoska"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="ktoska"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button):hover{background:rgba(255,255,255,.75)!important}
:root[data-theme="ktoska"] body:not(#_) :is(.gkl button.on,.thi.on){background:rgba(255,255,255,.85)!important;color:var(--ac)!important;border-color:rgba(11,114,133,.4)!important}
:root[data-theme="ktoska"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:linear-gradient(180deg,#1a93a6,#08606f)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:0 4px 14px rgba(148,86,42,.35)!important}
:root[data-theme="ktoska"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="ktoska"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:10px;box-shadow:inset 0 1px 2px rgba(8,50,60,.08)!important;color:var(--tx)!important}
:root[data-theme="ktoska"] body:not(#_) :is(input,select,textarea):focus{outline:0;border-color:rgba(11,114,133,.6)!important;box-shadow:0 0 0 3px var(--acs)!important}
:root[data-theme="ktoska"] body:not(#_) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac)}
:root[data-theme="ktoska"] body:not(#_) table{background:transparent!important}
:root[data-theme="ktoska"] body:not(#_) th{background:transparent!important;border-bottom:1px solid rgba(20,70,80,.2)!important;color:var(--mu)!important}
:root[data-theme="ktoska"] body:not(#_) td{border-color:rgba(20,70,80,.12)!important;color:var(--tx)}
:root[data-theme="ktoska"] body:not(#_) tr:hover>td{background:rgba(255,255,255,.3)!important}
:root[data-theme="ktoska"] body:not(#_) .stat{background:rgba(255,255,255,.5)!important;color:#075563!important;border:1px solid rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="ktoska"] body:not(#_) .badge{border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) #mo,:root[data-theme="ktoska"] body:not(#_) .ov,:root[data-theme="ktoska"] body:not(#_) .m{background:rgba(8,40,48,.25)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:root[data-theme="ktoska"] body:not(#_) #sb .ngi button,:root[data-theme="ktoska"] body:not(#_) #sb .ngi button *{color:#173236!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ngi button.on,:root[data-theme="ktoska"] body:not(#_) #sb .ngi button.on *{color:var(--ac)!important}

:root[data-theme="ktoska"] body:not(#_) #sb{border:0!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.45),1px 0 0 rgba(10,60,70,.06)!important}
:root[data-theme="ktoska"] body:not(#_) .ct header{border:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)!important}
:root[data-theme="ktoska"] body:not(#_) .sbr::after{background:transparent!important;box-shadow:none!important}
:root[data-theme="ktoska"] body:not(#_) .sbr:hover::after,:root[data-theme="ktoska"] body.sbdrag .sbr::after{background:rgba(11,114,133,.35)!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ng{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="ktoska"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi,.stat){background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(10,60,70,.08)!important}
:root[data-theme="ktoska"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.32)!important}
:root[data-theme="ktoska"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.14)!important}
:root[data-theme="ktoska"] body:not(#_) :is(.mc,.thm){background:rgba(250,254,254,.72)!important}
/* 03y: kaca - blur sidebar dipindah ke lapisan belakang agar sub menu (flyout) tidak terpotong; garis pembatas sidebar jadi garis tipis tunggal */
:root[data-theme="ktoska"] body:not(#_) #sb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
:root[data-theme="ktoska"] body:not(#_) #sb::before{display:block!important;content:""!important;position:fixed;left:0;top:0;bottom:0;width:var(--sbw,250px);z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);border-right:1px solid rgba(10,60,70,.16);background:none!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(250,254,254,.72),rgba(245,252,252,.55))!important}
:root[data-theme="ktoska"] body:not(#_){background-size:auto,115% auto!important;background-position:0 0,100% 42%!important}
/* 03y: tema beige tanpa garis pembatas sidebar (hanya scroll) */
:root[data-theme="ktoska"] body:not(#_) #sb::before{border-right:0!important}
:root[data-theme="ktoska"] body:not(#_) .sbr::after,:root[data-theme="ktoska"] body:not(#_) .sbr:hover::after,:root[data-theme="ktoska"] body.sbdrag .sbr::after{background:transparent!important;box-shadow:none!important}
/* 03z: tema beige - latar kantor biru, panel kaca lebih bening (tembus pandang) */
:root[data-theme="ktoska"] body:not(#_){background-size:auto,cover!important;background-position:0 0,center 50%!important}
:root[data-theme="ktoska"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr),:root[data-theme="ktoska"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.30))!important;-webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 8px 28px rgba(30,50,80,.12),inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="ktoska"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.14))!important}
:root[data-theme="ktoska"] body:not(#_) #sb::before{-webkit-backdrop-filter:blur(14px) saturate(160%)!important;backdrop-filter:blur(14px) saturate(160%)!important}
:root[data-theme="ktoska"] body:not(#_) #sb .ng{background:rgba(255,255,255,.14)!important}
:root[data-theme="ktoska"] body:not(#_){--mu:#5a4a3c}
:root[data-theme="ktoska"] body:not(#_) main>*:not(.w):not(.pn):not(.bx):not(.kp):not(.fsr) :is(h1,h2,h3,b,span,div):not(.w *):not(.pn *):not(.bx *):not(.kp *):not(.fsr *){text-shadow:0 0 6px rgba(250,254,254,.95),0 0 14px rgba(250,254,254,.8)!important}

/* 04c: tema Glassy Gelap - latar kantor abu gelap, panel kaca gelap, tulisan terang */


/* ===== Tema Glassy Krem: panel kaca buram di atas latar ruang kantor krem ===== */
:root[data-theme="kgelap"]{--bg:#efe3d0;--card:rgba(255,250,243,.55);--tx:#2e2219;--mu:#6f5b48;--bd:rgba(120,90,60,.18);--ac:#9a5b26;--ac2:rgba(154,91,38,.12);--dn:#b3261e;--onac:#fff;--acs:rgba(154,91,38,.35);--sec-sales:transparent;--sec-proc:transparent;--sec-ops:transparent;--sec-users:transparent;--sec-chat:transparent;--sec-dash:transparent;--sec-kpi:transparent;--sec-fin:transparent}
:root[data-theme="kgelap"] body:not(#_){background:linear-gradient(rgba(20,20,22,.10),rgba(20,20,22,.18)),url("bg-kgelap.jpg") center 42%/cover no-repeat fixed,#e9dccb!important;color:var(--tx)}
:root[data-theme="kgelap"] body:not(#_) .ct,:root[data-theme="kgelap"] body:not(#_)[data-sec] .ct{background:transparent!important}
:root[data-theme="kgelap"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 0 1px 0!important;border-radius:0}
:root[data-theme="kgelap"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-width:0 1px 0 0!important;border-radius:0}
:root[data-theme="kgelap"] body:not(#_) #sb::before,:root[data-theme="kgelap"] body:not(#_) #sb::after,:root[data-theme="kgelap"] body:not(#_) #sb .ng::before,:root[data-theme="kgelap"] body:not(#_) #sb .ng::after,:root[data-theme="kgelap"] body:not(#_) :is(.kp,.bx,.fsr)::before,:root[data-theme="kgelap"] body:not(#_) :is(.kp,.bx,.fsr)::after{display:none!important}
:root[data-theme="kgelap"] body:not(#_) #sb *{text-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) #sb .brand{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) #sb .brand b,:root[data-theme="kgelap"] body:not(#_) #who{color:var(--tx)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .brand span,:root[data-theme="kgelap"] body:not(#_) #who .ver{color:var(--mu)!important}
:root[data-theme="kgelap"] body:not(#_) #who{background:transparent!important;border-top:1px solid rgba(255,255,255,.5)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 4px 14px rgba(92,62,32,.08)!important;border-radius:14px}
:root[data-theme="kgelap"] body:not(#_) #sb .ng .nt,:root[data-theme="kgelap"] body:not(#_) #sb .ng.open .nt{background:transparent!important;box-shadow:none!important;border:0!important;color:#4a3a2c!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng.open{border-color:rgba(154,91,38,.45)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kgelap"] body:not(#_) #sb nav button{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;color:#3d2f23!important;border-radius:10px}
:root[data-theme="kgelap"] body:not(#_) #sb nav button:hover{background:rgba(255,255,255,.45)!important}
:root[data-theme="kgelap"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover){background:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.9)!important;color:var(--ac)!important;box-shadow:0 2px 10px rgba(92,62,32,.12)!important}
:root[data-theme="kgelap"] body:not(#_) #sb nav button .ic{background:transparent!important;box-shadow:none!important;color:inherit!important}
:root[data-theme="kgelap"] body:not(#_) #sb .navmore{background:rgba(255,255,255,.25)!important;border:1px dashed rgba(120,90,60,.3)!important;box-shadow:none!important;color:var(--mu)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr){background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10))!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(120,86,50,.10),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18)!important;border-radius:18px}
:root[data-theme="kgelap"] body:not(#_) :is(.mc,.thm){background:rgba(255,250,243,.82)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important;backdrop-filter:blur(22px) saturate(150%)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:20px;box-shadow:0 20px 60px rgba(60,40,20,.25)!important;color:var(--tx)}
:root[data-theme="kgelap"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:12px}
:root[data-theme="kgelap"] body:not(#_) :is(.gr-s div,.obs){background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:12px;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) :is(.kp,.kp *){text-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) .kp :is(b,strong,.v,.kv,h2,h3){color:var(--tx)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
:root[data-theme="kgelap"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:rgba(255,255,255,.5)!important;color:var(--tx)!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:10px;box-shadow:0 2px 8px rgba(92,62,32,.10)!important;text-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kgelap"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,#sb nav button)::before{display:none!important}
:root[data-theme="kgelap"] body:not(#_) :is(button.b,.b,.sbbtn,.fxh button,.chip,.gkl button):hover{background:rgba(255,255,255,.75)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.gkl button.on,.thi.on){background:rgba(255,255,255,.85)!important;color:var(--ac)!important;border-color:rgba(154,91,38,.4)!important}
:root[data-theme="kgelap"] body:not(#_) :is(button.b.p,.b.p,.p):not(#_){background:linear-gradient(180deg,#b27140,#94562a)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:0 4px 14px rgba(148,86,42,.35)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.b.d,button.b.d){color:var(--dn)!important}
:root[data-theme="kgelap"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:10px;box-shadow:inset 0 1px 2px rgba(92,62,32,.08)!important;color:var(--tx)!important}
:root[data-theme="kgelap"] body:not(#_) :is(input,select,textarea):focus{outline:0;border-color:rgba(154,91,38,.6)!important;box-shadow:0 0 0 3px var(--acs)!important}
:root[data-theme="kgelap"] body:not(#_) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac)}
:root[data-theme="kgelap"] body:not(#_) table{background:transparent!important}
:root[data-theme="kgelap"] body:not(#_) th{background:transparent!important;border-bottom:1px solid rgba(120,90,60,.2)!important;color:var(--mu)!important}
:root[data-theme="kgelap"] body:not(#_) td{border-color:rgba(120,90,60,.12)!important;color:var(--tx)}
:root[data-theme="kgelap"] body:not(#_) tr:hover>td{background:rgba(255,255,255,.3)!important}
:root[data-theme="kgelap"] body:not(#_) .stat{background:rgba(255,255,255,.5)!important;color:#7a4519!important;border:1px solid rgba(255,255,255,.75)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="kgelap"] body:not(#_) .badge{border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) #mo,:root[data-theme="kgelap"] body:not(#_) .ov,:root[data-theme="kgelap"] body:not(#_) .m{background:rgba(70,50,30,.25)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:root[data-theme="kgelap"] body:not(#_) #sb .ngi button,:root[data-theme="kgelap"] body:not(#_) #sb .ngi button *{color:#3d2f23!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ngi button.on,:root[data-theme="kgelap"] body:not(#_) #sb .ngi button.on *{color:var(--ac)!important}

:root[data-theme="kgelap"] body:not(#_) #sb{border:0!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.45),1px 0 0 rgba(120,86,50,.06)!important}
:root[data-theme="kgelap"] body:not(#_) .ct header{border:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)!important}
:root[data-theme="kgelap"] body:not(#_) .sbr::after{background:transparent!important;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) .sbr:hover::after,:root[data-theme="kgelap"] body.sbdrag .sbr::after{background:rgba(154,91,38,.35)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kgelap"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi,.stat){background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(120,86,50,.08)!important}
:root[data-theme="kgelap"] body:not(#_) :is(input,select,textarea){background:rgba(255,255,255,.32)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.14)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.mc,.thm){background:rgba(255,252,247,.72)!important}
/* 03y: kaca - blur sidebar dipindah ke lapisan belakang agar sub menu (flyout) tidak terpotong; garis pembatas sidebar jadi garis tipis tunggal */
:root[data-theme="kgelap"] body:not(#_) #sb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
:root[data-theme="kgelap"] body:not(#_) #sb::before{display:block!important;content:""!important;position:fixed;left:0;top:0;bottom:0;width:var(--sbw,250px);z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);border-right:1px solid rgba(110,80,50,.16);background:none!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(255,252,247,.72),rgba(255,248,240,.55))!important}
:root[data-theme="kgelap"] body:not(#_){background-size:auto,115% auto!important;background-position:0 0,100% 42%!important}
/* 03y: tema beige tanpa garis pembatas sidebar (hanya scroll) */
:root[data-theme="kgelap"] body:not(#_) #sb::before{border-right:0!important}
:root[data-theme="kgelap"] body:not(#_) .sbr::after,:root[data-theme="kgelap"] body:not(#_) .sbr:hover::after,:root[data-theme="kgelap"] body.sbdrag .sbr::after{background:transparent!important;box-shadow:none!important}
/* 03z: tema beige - latar kantor biru, panel kaca lebih bening (tembus pandang) */
:root[data-theme="kgelap"] body:not(#_){background-size:auto,cover!important;background-position:0 0,center 50%!important}
:root[data-theme="kgelap"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr),:root[data-theme="kgelap"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.30))!important;-webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 8px 28px rgba(30,50,80,.12),inset 0 1px 0 rgba(255,255,255,.7)!important}
:root[data-theme="kgelap"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.14))!important}
:root[data-theme="kgelap"] body:not(#_) #sb::before{-webkit-backdrop-filter:blur(14px) saturate(160%)!important;backdrop-filter:blur(14px) saturate(160%)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng{background:rgba(255,255,255,.14)!important}
:root[data-theme="kgelap"]{--bg:#1c1c1f;--card:rgba(28,28,32,.5);--tx:#f2eee9;--mu:#c3bab0;--bd:rgba(255,255,255,.14);--ac:#e09a5a;--ac2:rgba(224,154,90,.18);--acs:rgba(224,154,90,.4);color-scheme:dark}
:root[data-theme="kgelap"] body:not(#_){color:var(--tx)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.w,.pn,.bx,.kp,.fx,.gr-c,.fsr),:root[data-theme="kgelap"] body:not(#_) .ct header{background:linear-gradient(135deg,rgba(40,40,46,.55),rgba(20,20,24,.38))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.pn .w,.bx .w,.mc .w,.fsr .w,.fsr .fsr){background:rgba(255,255,255,.05)!important}
:root[data-theme="kgelap"] body:not(#_) #sb{background:linear-gradient(135deg,rgba(36,36,42,.55),rgba(18,18,22,.40))!important}
:root[data-theme="kgelap"] body:not(#_) #sb .brand{border-bottom:1px solid rgba(255,255,255,.12)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ng .nt,:root[data-theme="kgelap"] body:not(#_) #sb .ng.open .nt,:root[data-theme="kgelap"] body:not(#_) #sb nav button,:root[data-theme="kgelap"] body:not(#_) #sb .ngi button,:root[data-theme="kgelap"] body:not(#_) #sb .ngi button *{color:#ece6df!important}
:root[data-theme="kgelap"] body:not(#_) #sb nav button:hover{background:rgba(255,255,255,.08)!important}
:root[data-theme="kgelap"] body:not(#_) :is(#sb nav button.on,#sb nav button.on:hover),:root[data-theme="kgelap"] body:not(#_) #sb .ngi button.on,:root[data-theme="kgelap"] body:not(#_) #sb .ngi button.on *{background:rgba(224,154,90,.16)!important;border-color:rgba(224,154,90,.35)!important;color:#f0b37a!important}
:root[data-theme="kgelap"] body:not(#_) #sb .ngi{background:linear-gradient(135deg,rgba(34,34,40,.88),rgba(22,22,26,.82))!important;border:1px solid rgba(255,255,255,.14)!important}
:root[data-theme="kgelap"] body:not(#_) #sb .navmore{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.2)!important;color:var(--mu)!important}
:root[data-theme="kgelap"] body:not(#_) :is(button.b,.b,.sbbtn,.sbtab,.fxh button,.chip,.gkl button,.thi){background:rgba(255,255,255,.08)!important;color:var(--tx)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important}
:root[data-theme="kgelap"] body:not(#_) .stat{background:rgba(255,255,255,.08)!important;color:#f0b37a!important;border:1px solid rgba(255,255,255,.18)!important}
:root[data-theme="kgelap"] body:not(#_) :is(input,select,textarea){background:rgba(0,0,0,.25)!important;color:var(--tx)!important;border-color:rgba(255,255,255,.2)!important}
:root[data-theme="kgelap"] body:not(#_) :is(.mc,.thm){background:rgba(30,30,34,.9)!important;border-color:rgba(255,255,255,.14)!important}
:root[data-theme="kgelap"] body:not(#_) :is(table,th,td){color:var(--tx);border-color:rgba(255,255,255,.1)!important}
:root[data-theme="kgelap"] body:not(#_) th{color:var(--mu)!important}
:root[data-theme="kgelap"] body:not(#_) main :is(h1,h2,h3,.hg,.ghead) {text-shadow:0 1px 8px rgba(0,0,0,.55)}


/* 04k: logo tirta di layar login selalu di atas latar putih agar terbaca di tema gelap */
body:not(#_) .login-logo{height:72px;background:#fff;border-radius:14px;padding:6px 12px;box-sizing:content-box}
body:not(#_) .gr-logo{width:56px;height:56px;vertical-align:middle;margin-right:12px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}