:root{
  --bg:#f3f5f9;--surface:#fff;--ink:#1d232b;--muted:#5d6672;--line:#dfe3e8;--brand:#1550a8;--brand-ink:#fff;--navy:#0a2a66;--gold:#c9a227;--gold-soft:#f3e6b8;
  --ok:#1d7a46;--ok-bg:#e5f4ea;--warn:#8a5a00;--warn-bg:#fdf1d8;--bad:#a8231e;--bad-bg:#fbe6e4;--info-bg:#e8eefa;
  --radius:8px;--shadow:0 1px 2px rgba(16,24,40,.06);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.45}
a{color:var(--brand)}
header.top{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#0a2a66,#12408f);border-bottom:3px solid var(--gold);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(10,42,102,.25)}
header.top .brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.8px;margin-right:8px;color:#fff}header.top .brand img{height:38px;width:38px;border-radius:50%;background:#fff;padding:1px}
header.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header.top nav a{color:#d6e2f7;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:14px}
header.top nav a.active,header.top nav a:hover{background:rgba(255,255,255,.12);color:#fff}header.top nav a.active{box-shadow:inset 0 -2px 0 var(--gold)}
header.top .who{font-size:13px;color:#d8e6f1;display:flex;gap:8px;align-items:center}
header.top .who button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:4px 10px}
main{max-width:1280px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:4px 0 12px;color:var(--navy)}h2{font-size:17px;margin:18px 0 8px}h3{font-size:15px;margin:12px 0 6px}
.card{background:var(--surface);border-top:2px solid var(--gold-soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:14px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;cursor:pointer}
.stat .t{color:var(--muted);font-size:13px}.stat .v{font-size:22px;font-weight:700;margin:2px 0}.stat .n{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.tabs a{padding:8px 12px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent}
.tabs a.active{color:var(--navy);border-color:var(--gold);font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 160px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #c8ced6;border-radius:6px;font:inherit;background:#fff;color:var(--ink)}
textarea{min-height:70px}
input:focus,select:focus,textarea:focus,button:focus{outline:2px solid #7ea6e6;outline-offset:1px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:6px;border:1px solid #c8ced6;background:#fff;color:var(--ink);font:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
button.primary,.btn.primary{background:linear-gradient(180deg,#1a5fc4,#0f4393);border-color:var(--navy);color:var(--brand-ink)}
button.danger{background:#fff;border-color:#e2a29f;color:var(--bad)}
button:disabled{opacity:.55;cursor:not-allowed}
button.big{font-size:18px;padding:16px;width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:7px 9px;border-bottom:1px solid #edf0f3;text-align:left;vertical-align:top}
th{background:#eaf0fb;font-weight:600;color:var(--navy);position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover{background:#f6f9fc}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:#eef1f4;color:#3b4450;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.info{background:var(--info-bg);color:var(--brand)}
.msg{padding:10px 12px;border-radius:6px;margin:10px 0;white-space:pre-line}
.msg.ok{background:var(--ok-bg);color:var(--ok)}.msg.bad{background:var(--bad-bg);color:var(--bad)}
.msg.warn{background:var(--warn-bg);color:var(--warn)}.msg.info{background:var(--info-bg);color:var(--navy)}
.muted{color:var(--muted)}.small{font-size:12.5px}.pre{white-space:pre-line}
.stale{color:var(--bad);font-weight:600}
.login{max-width:380px;margin:8vh auto;border-top:4px solid var(--gold)}.login-brand{text-align:center;margin-bottom:8px}.login-brand img{width:150px;max-width:60%;height:auto}.login-brand h1{margin:4px 0 0;letter-spacing:1px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.mobile{max-width:560px;margin:0 auto}
.task{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fff;margin-bottom:10px}
.task.done{opacity:.75}
.photo-preview{max-width:100%;max-height:260px;border-radius:6px;margin-top:6px;display:block}
.scan-input{font-size:22px;padding:12px;letter-spacing:1px}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:50;max-width:92vw}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
@media (max-width:700px){
  main{padding:12px}
  header.top nav{order:3;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap}
  header.top nav a{flex:0 0 auto}
  .row>*{flex:1 1 100%}
  h1{font-size:18px}
}
@media print{header.top,.noprint{display:none!important}body{background:#fff}main{padding:0}.card{border:0;box-shadow:none}}
.kpi{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.stat.kp{cursor:default;border-top:3px solid var(--gold)}.stat.kp .t{font-weight:600;letter-spacing:.4px;color:var(--navy)}.stat.kp .v{font-size:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px}.chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.notes{display:flex;flex-wrap:wrap;gap:4px 14px}.chk{display:inline-flex;align-items:center;gap:5px;margin:0;color:var(--ink);font-size:14px}.chk input{width:auto}
.overlay{position:fixed;inset:0;background:rgba(10,42,102,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:12px}.dialog{background:#fff;border-radius:10px;padding:16px;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-top:4px solid var(--gold)}.dialog h3{margin-top:0}.dialog label{margin-top:4px}
#balloons{position:fixed;top:64px;right:12px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:min(320px,92vw)}.balloon{background:#fff;border:1px solid var(--line);border-left:6px solid var(--brand);border-radius:14px 14px 14px 4px;box-shadow:0 6px 18px rgba(10,42,102,.28);padding:8px 12px;cursor:pointer;animation:pop .25s ease-out}.balloon b{color:var(--navy)}@keyframes pop{from{transform:translateY(-8px) scale(.95);opacity:0}to{transform:none;opacity:1}}.sndbtn{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:2px 8px}
.loadbar{height:10px;background:#e8ebf0;border-radius:6px;overflow:hidden;margin:3px 0}.loadbar i{display:block;height:100%}
#calc{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:65;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;box-shadow:0 8px 24px rgba(10,42,102,.35);padding:10px 14px;width:min(520px,94vw)}#calc .loadbar{height:12px}
.calc-disp{font-size:22px;text-align:right;margin:8px 0 6px;font-variant-numeric:tabular-nums}.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc-keys button{padding:10px 0;font-size:18px;justify-content:center}.calc-keys .op{background:var(--soft);color:var(--navy);font-weight:700}.calc-keys .clr{color:var(--bad)}.calc-act{display:flex;gap:6px;margin-top:6px}.calc-act button{flex:1}
.calc-disp{font-size:22px;text-align:right;margin:8px 0 6px;font-variant-numeric:tabular-nums}.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc-keys button{padding:10px 0;font-size:18px;justify-content:center}.calc-keys .op{background:var(--soft);color:var(--navy);font-weight:700}.calc-keys .clr{color:var(--bad)}.calc-act{display:flex;gap:6px;margin-top:6px}.calc-act button{flex:1}
.jo-row{display:grid;grid-template-columns:minmax(220px,2fr) minmax(170px,1.5fr) minmax(120px,.8fr) minmax(150px,1.2fr) auto;gap:8px;align-items:start;margin-bottom:8px}@media (max-width:760px){.jo-row{grid-template-columns:1fr}}#calc{top:auto;left:auto;transform:none;right:12px;bottom:12px;width:226px;padding:8px 10px;border-radius:10px}#calc .calc-disp{font-size:16px;padding:5px 8px;margin:4px 0}#calc .calc-keys{gap:4px}#calc .calc-keys button{padding:5px 0;font-size:14px}#calc .calc-act button{font-size:11px;padding:4px 2px}#calc label{font-size:11px;margin:4px 0 2px}#calc input{padding:4px 8px}#calc .loadbar{height:8px}#calc #clr,#calc #clb{font-size:12px}#calc b{font-size:12px}
header.top .brand img{height:30px;width:auto;border-radius:6px;background:#fff;padding:3px 6px}.login-brand{display:flex;align-items:center;justify-content:center;gap:12px}.login-brand img{width:96px;max-width:none;height:auto}.login-brand h1{margin:0;font-size:22px;letter-spacing:1px}

.login-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-bottom:12px}.login-brand img{width:240px;max-width:82%;height:auto}.login-brand h1{margin:0;font-size:26px;font-weight:300;letter-spacing:.38em;text-indent:.38em;color:var(--navy)}header.top .brand{font-weight:300;letter-spacing:.2em}
.jo-sj{grid-template-columns:minmax(260px,3fr) minmax(160px,1.5fr) auto}@media (max-width:760px){.jo-sj{grid-template-columns:1fr}}
select.small{width:auto;max-width:100%}

.bar{height:8px;background:#e6ebf1;border-radius:4px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--gold)}

.thumbs{display:flex;flex-wrap:wrap;gap:8px}.thumbbox{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.thumb{width:120px;height:120px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#fff}

/* Dashboard Stock Opname */
.sod-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:14px 0}
.sod-panel{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.sod-ring{--p:0;flex:0 0 78px;height:78px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),#e8ecf2 0);display:grid;place-items:center;position:relative}
.sod-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.sod-ring b{position:relative;font-size:17px;color:var(--navy)}
.sod-t{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.sod-big{font-size:24px;font-weight:700;color:var(--navy);line-height:1.2;margin:2px 0}.sod-big small{font-size:13px;font-weight:500;color:var(--muted)}
.sod-sub{font-size:12.5px;color:var(--muted)}
.sod-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-bottom:14px}
.sod-two .card{margin:0}
.sod-flags{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sod-flag{cursor:pointer;background:var(--bad-bg);border-radius:10px;padding:10px 12px;border-left:4px solid var(--bad)}.sod-flag:hover{filter:brightness(.97)}
.sod-fv{font-size:22px;font-weight:700;color:var(--bad)}.sod-ft{font-size:12.5px;color:var(--ink)}
.sod-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#e8ecf2;margin:8px 0 10px}.sod-stack i{display:block;height:100%}
.sod-c-none{background:#b9c0cb}.sod-c-req{background:var(--gold)}.sod-c-ok{background:#2f9e61}.sod-c-no{background:#d0463f}
.sod-legend{display:grid;gap:6px}.sod-legend>div{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 6px;border-radius:6px}.sod-legend i{width:10px;height:10px;border-radius:50%;flex:0 0 10px}.sod-legend span{flex:1}
.sod-go{cursor:pointer;background:var(--warn-bg)}.sod-go:hover{filter:brightness(.97)}
.sod-neg{color:var(--bad);font-weight:600}.sod-pos{color:var(--ok);font-weight:600}
.sod-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sod-chips>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sod-chips span{font-size:13px;color:var(--muted);flex:1 0 100%}.sod-chips b{font-size:22px;color:var(--navy)}.sod-chips small{color:var(--muted)}

/* ===================== Tema Gelap (neon-kaca) =====================
   Dipilih lewat tombol tema di header/login (disimpan per perangkat). Hanya warna dan efek: tata letak tidak berubah.
   Efek berat (blur kaca, latar grid tetap) hanya di layar lebar agar layar scan di HP tetap ringan. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050b17;--surface:#0d1730;--ink:#e7eefc;--muted:#93a4c3;--line:#1f3157;--brand:#6fe3ff;--brand-ink:#04101f;--navy:#aeeaff;--gold:#4fd8ff;--gold-soft:#1a4a78;--soft:#12224a;
  --ok:#5fe0a0;--ok-bg:#0f3324;--warn:#ffc266;--warn-bg:#3a2a0f;--bad:#ff8f87;--bad-bg:#3d1816;--info-bg:#12305a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="dark"] html,:root[data-theme="dark"]{background:#050b17}
:root[data-theme="dark"] body{min-height:100vh;background:radial-gradient(ellipse 70% 320px at 15% 0,rgba(0,190,255,.20),transparent 70%),radial-gradient(ellipse 60% 300px at 95% 0,rgba(130,90,255,.20),transparent 65%),#050b17;background-repeat:no-repeat}
@media (min-width:900px){:root[data-theme="dark"] body{background-image:radial-gradient(ellipse 70% 40% at 15% -5%,rgba(0,190,255,.20),transparent 60%),radial-gradient(ellipse 60% 40% at 95% 0%,rgba(130,90,255,.20),transparent 55%),linear-gradient(rgba(111,227,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(111,227,255,.045) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;background-repeat:no-repeat,no-repeat,repeat,repeat;background-attachment:fixed}}
:root[data-theme="dark"] a{color:var(--brand)}
:root[data-theme="dark"] h1{background:linear-gradient(90deg,#aeeaff,#c4b5ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.2px}
:root[data-theme="dark"] h2,:root[data-theme="dark"] h3{color:#dbe7ff}
:root[data-theme="dark"] header.top{background:linear-gradient(90deg,#06122c,#0b1f4a);border-bottom:1px solid rgba(111,227,255,.35);box-shadow:0 6px 28px rgba(0,160,255,.18)}
:root[data-theme="dark"] header.top nav a.active{box-shadow:inset 0 -2px 0 #6fe3ff;background:rgba(111,227,255,.10)}
:root[data-theme="dark"] header.top .who button{border-color:rgba(111,227,255,.45)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .sod-panel,:root[data-theme="dark"] .sod-chips>div,:root[data-theme="dark"] .task,:root[data-theme="dark"] .chip{background:linear-gradient(180deg,rgba(18,32,64,.92),rgba(10,20,44,.92));border:1px solid rgba(111,227,255,.16);box-shadow:var(--shadow),inset 0 1px 0 rgba(111,227,255,.10)}
:root[data-theme="dark"] .stat.kp{border-top:3px solid #4fd8ff}
:root[data-theme="dark"] .tabs{border-bottom-color:var(--line)}
:root[data-theme="dark"] .tabs a.active{color:#fff;border-color:#4fd8ff}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#0a1329;border-color:#2a4373;color:var(--ink)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#6f82a6}
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus,:root[data-theme="dark"] button:focus{outline:2px solid #4fd8ff;outline-offset:1px}
:root[data-theme="dark"] button,:root[data-theme="dark"] .btn{background:#11204a;border-color:#2f4d82;color:var(--ink)}
:root[data-theme="dark"] button:hover,:root[data-theme="dark"] .btn:hover{border-color:#6fe3ff}
:root[data-theme="dark"] button.primary,:root[data-theme="dark"] .btn.primary{background:linear-gradient(135deg,#7ae8ff,#a99bff);border-color:transparent;color:#04101f;font-weight:700;box-shadow:0 0 18px rgba(111,227,255,.35)}
:root[data-theme="dark"] button.danger{background:transparent;border-color:#ff8f87;color:#ff8f87}
:root[data-theme="dark"] .table-wrap{background:#0b1530;border-color:var(--line)}
:root[data-theme="dark"] th{background:#12224a;color:#bfe9ff}
:root[data-theme="dark"] td{border-bottom-color:#17284d}
:root[data-theme="dark"] tr.click:hover{background:#12224a}
:root[data-theme="dark"] .badge{background:#182a52;color:#c8d6f2}
:root[data-theme="dark"] .badge.info{color:#8fdcff}
:root[data-theme="dark"] .msg.info{color:#bfe9ff}
:root[data-theme="dark"] .overlay{background:rgba(2,6,18,.72)}
:root[data-theme="dark"] .dialog,:root[data-theme="dark"] .balloon,:root[data-theme="dark"] #calc{background:#0d1730;border-color:rgba(111,227,255,.25);color:var(--ink);border-top-color:#4fd8ff}
:root[data-theme="dark"] .thumb{background:#0a1329}
:root[data-theme="dark"] .loadbar,:root[data-theme="dark"] .bar,:root[data-theme="dark"] .sod-stack{background:#1b2c52}
:root[data-theme="dark"] .sod-ring{background:conic-gradient(#4fd8ff calc(var(--p)*1%),#1b2c52 0);filter:drop-shadow(0 0 8px rgba(79,216,255,.45))}
:root[data-theme="dark"] .sod-big,:root[data-theme="dark"] .sod-ring b,:root[data-theme="dark"] .sod-chips b,:root[data-theme="dark"] .stat.kp .t{color:#e8f6ff}
:root[data-theme="dark"] .sod-flag{background:var(--bad-bg)}
:root[data-theme="dark"] .sod-go{background:var(--warn-bg)}
:root[data-theme="dark"] .sod-c-none{background:#5a6b8c}
:root[data-theme="dark"] .sod-c-req{background:#4fd8ff}
:root[data-theme="dark"] .login{background:linear-gradient(180deg,rgba(20,36,72,.78),rgba(8,18,40,.82));border:1px solid rgba(111,227,255,.30);border-top:1px solid rgba(111,227,255,.30);box-shadow:0 0 0 1px rgba(111,227,255,.05),0 20px 60px rgba(0,120,255,.25),0 0 80px rgba(130,90,255,.15)}
@media (min-width:900px){:root[data-theme="dark"] .login,:root[data-theme="dark"] header.top{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
:root[data-theme="dark"] .login-brand img{background:#fff;border-radius:14px;padding:10px 16px;box-shadow:0 0 36px rgba(111,227,255,.35)}
:root[data-theme="dark"] .login-brand h1{background:none;-webkit-background-clip:initial;background-clip:initial;color:#aeeaff;text-shadow:0 0 18px rgba(111,227,255,.6)}
/* warna sebaris di app.js yang sengaja gelap/terang untuk tema terang */
:root[data-theme="dark"] [style*="background:#fafbfc"]{background:#0b1530!important}
:root[data-theme="dark"] [style*="background:#e3e8f0"]{background:#1b2c52!important}
:root[data-theme="dark"] [style*="color:#1f7a3f"]{color:#5fe0a0!important}
:root[data-theme="dark"] [style*="#d32f2f"]{color:#ff8f87!important}
:root[data-theme="dark"] [style*="background:#2e7d32"]{background:#4fe0a0!important}
:root[data-theme="dark"] [style*="background:#1550a8"]{background:#4fd8ff!important}
:root[data-theme="dark"] [style*="border:1px solid #ccd"]{border-color:#2a4373!important}
:root[data-theme="dark"] iframe{background:#fff}
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.login-theme{position:absolute;top:10px;right:10px}
.login .theme-btn{color:var(--ink);border-color:var(--line)}
.login{position:relative}
@media (prefers-reduced-motion:no-preference){:root[data-theme="dark"] button,:root[data-theme="dark"] .btn,:root[data-theme="dark"] .card{transition:border-color .15s,box-shadow .15s}}

/* Aksen emas seperti logo WMS (Tema Gelap): garis header, tab aktif, judul, ring progres, kartu KPI */
:root[data-theme="dark"]{--gold:#f0c24b;--gold-soft:#5b4513}
:root[data-theme="dark"] header.top{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#4fd8ff,#f0c24b 70%,#4fd8ff) 1}
:root[data-theme="dark"] header.top nav a.active{box-shadow:inset 0 -2px 0 #f0c24b;background:rgba(240,194,75,.10)}
:root[data-theme="dark"] .tabs a.active{color:#fff;border-color:#f0c24b}
:root[data-theme="dark"] h1{background:linear-gradient(90deg,#aeeaff 0%,#f6d675 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .stat.kp{border-top:3px solid #f0c24b}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .sod-panel{box-shadow:var(--shadow),inset 0 1px 0 rgba(240,194,75,.28)}
:root[data-theme="dark"] .sod-ring{background:conic-gradient(#4fd8ff 0,#f0c24b calc(var(--p)*1%),#1b2c52 0);filter:drop-shadow(0 0 8px rgba(240,194,75,.40))}
:root[data-theme="dark"] .sod-c-req{background:#f0c24b}
:root[data-theme="dark"] .login{box-shadow:0 0 0 1px rgba(240,194,75,.10),0 20px 60px rgba(0,120,255,.22),0 0 90px rgba(240,194,75,.12)}
:root[data-theme="dark"] .login-brand img{box-shadow:0 0 30px rgba(111,227,255,.30),0 0 56px rgba(240,194,75,.28)}
:root[data-theme="dark"] .login-brand h1{text-shadow:0 0 18px rgba(240,194,75,.45)}
:root[data-theme="dark"] button:hover,:root[data-theme="dark"] .btn:hover{border-color:#f0c24b}
:root[data-theme="dark"] .dialog,:root[data-theme="dark"] #calc{border-top-color:#f0c24b}