/* =====================================================================
   SISTEM LOGISTIK & TRUCKING · TAMPILAN v2 (Okt 2026)
   Lapisan gaya di atas app lama. Tidak mengubah logika, data, kunci
   penyimpanan, atau gating paket. Hanya tampilan.
   Palet grafit dengan aksen oranye bata, IBM Plex Sans + IBM Plex Mono,
   tanpa gradien, tanpa emoji.
===================================================================== */
:root{
  --ink:#111827;--gra:#374151;--orange:#C2410C;--e700:#9A3412;--e500:#C2410C;--a400:#C2410C;
  --gold:#B45309;--sand:#F3F4F6;--bone:#F5F6F8;--line:#E5E7EB;--slate:#6B7280;--green:#166534;
  --red:#B42318;--amber:#92400E;--white:#fff;
  --grad:linear-gradient(0deg,#C2410C,#C2410C);
  --sidebar-w:248px;--shadow:0 1px 2px rgba(17,24,39,.05);
  --v2-navy:#1C1F24;--v2-navy2:#2A2E35;--v2-navy3:#C2410C;--v2-sel:#FFF1E8;--v2-line2:#F0F1F3;--v2-faint:#9CA3AF;--v2-top-bg:#17191E;--v2-acc:#C2410C;--v2-acc-ink:#9A3412;
  --v2-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--v2-serif:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--v2-mono:'IBM Plex Mono',ui-monospace,monospace;
  --v2-top:60px;
}
body{font-family:var(--v2-sans);font-size:14px;color:var(--gra);background:var(--bone)}
h1,h2,h3,h4{font-family:var(--v2-sans);color:var(--ink);font-weight:600;letter-spacing:0}
a{color:var(--v2-navy2)}
.mono,.kode,.code{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ---------- bar atas ---------- */
.v2top{position:fixed;left:0;right:0;top:0;height:var(--v2-top);background:var(--v2-top-bg);border-bottom:1px solid #000;color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px;z-index:60}
.v2top .v2mb{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;height:34px;padding:0 10px;font:500 12.5px var(--v2-sans);cursor:pointer}
.v2top .v2inst{display:flex;align-items:center;gap:11px;min-width:0}
.v2top .v2logo{width:36px;height:36px;border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.v2top .v2logo img{width:100%;height:100%;object-fit:contain}
.v2top .v2logo span{font:700 13px var(--v2-sans);color:#fff}
.v2top .v2logo.ini{background:var(--v2-acc)}
.v2top .v2inst b{display:block;font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.v2top .v2inst small{display:block;font-size:11.5px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.v2top .v2srch{flex:1;max-width:420px;margin-left:18px;position:relative}
.v2top .v2srch input{width:100%;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;padding:0 12px 0 34px;outline:none;font:13px var(--v2-sans)}
.v2top .v2srch input::placeholder{color:#8B9099}
.v2top .v2srch input:focus{background:#fff;color:var(--ink);border-color:#fff}
.v2top .v2srch:before{content:"";position:absolute;left:12px;top:11px;width:10px;height:10px;border:1.6px solid #8B9099;border-radius:50%}
.v2top .v2srch:after{content:"";position:absolute;left:22px;top:21px;width:5px;height:1.6px;background:#8B9099;transform:rotate(45deg)}
.v2top .v2sp{flex:1}
.v2top .v2ta{font-size:12px;color:#D1D5DB;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:6px 10px;white-space:nowrap}
.v2top .v2user{display:flex;align-items:center;gap:10px;white-space:nowrap}
.v2top .v2av{width:34px;height:34px;border-radius:50%;background:#2A2E35;color:#fff;border:1px solid #3A3F47;display:grid;place-items:center;font-weight:700;font-size:12.5px}
.v2top .v2user b{display:block;font-size:12.5px;font-weight:600;line-height:1.2;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.v2top .v2user small{font-size:11px;color:#9CA3AF}
.topbar{display:none!important}

/* ---------- sidebar ---------- */
.sidebar{top:var(--v2-top);height:calc(100vh - var(--v2-top));background:#fff;color:var(--gra);border-right:1px solid var(--line);padding:12px 10px 24px;gap:0}
.sidebar .brand{display:none}
.navlink{padding:7px 12px;border-radius:6px;color:var(--gra);font-weight:500;font-size:13.5px;position:relative;gap:8px;border:0;margin:1px 0}
.navlink .ic{display:none}
.navlink:hover{background:var(--v2-line2);color:var(--ink)}
.navlink.active{background:var(--v2-sel);color:var(--v2-acc-ink);font-weight:600;box-shadow:none}
.navlink.active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--v2-acc)}
.nav-sec{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--v2-faint);padding:16px 12px 5px}
.v2grp:first-of-type{padding-top:6px}
.nav-sec{text-transform:uppercase}
.navlink .lockb{margin-left:auto;font:600 10.5px var(--v2-sans);background:#F1F5F9;color:#475569;border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.navlink .v2badge{margin-left:auto;font:600 10.5px var(--v2-sans);color:var(--slate)}
.navlink.nav-upgrade{background:var(--v2-navy);color:#fff;margin:4px 0 8px;border-radius:6px;box-shadow:none;font-weight:600}
.navlink.nav-upgrade:hover{background:var(--v2-navy2);color:#fff}
.navlink.nav-upgrade .lockb{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.25)}
.side-cta{padding-top:16px;margin-top:auto}
.side-cta a{background:#fff;border:1px solid var(--line);color:var(--gra);font-weight:500;font-size:12.5px;border-radius:6px;padding:9px}
.side-cta .note{color:var(--v2-faint);font-size:11px}
.side-user{border-top:1px solid var(--line);margin-top:12px;padding:12px 12px 4px}
.side-user .uname{color:var(--ink);font-weight:600}
.side-user .uemail{color:var(--slate)}
.side-user .ubtn{background:#fff;border:1px solid var(--line);color:var(--gra);border-radius:6px;font-weight:500}
.side-user .ubtn:hover{background:var(--sand);color:var(--ink)}
.v2side-foot{margin:16px 12px 0;font-size:11px;color:var(--v2-faint);line-height:1.5}

/* ---------- area utama ---------- */
.main{margin-left:var(--sidebar-w);padding-top:var(--v2-top)}
.content{padding:22px 28px 60px;max-width:1180px}
.page{animation:none}
.gradbar{display:none}
.eyebrow{font-family:var(--v2-sans)!important;font-size:12px!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--slate)!important;font-weight:500!important;margin-bottom:4px!important}
.pagehead{margin-bottom:18px}
.pagehead h1,.op-h1,#page-upgrade .u-hero h1{font-family:var(--v2-serif);font-weight:600;font-size:26px;letter-spacing:-.005em;color:var(--ink)}
.lead,.op-lead{font-size:14px;color:var(--slate);max-width:76ch}
.sec-t{font-size:11.5px;letter-spacing:.1em;color:var(--slate);font-weight:600;margin:24px 0 10px}
.callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--v2-acc);border-radius:8px;color:var(--gra)}
.disc{font-size:12px}

/* tombol */
.btn{background:var(--v2-navy);color:#fff;border:1px solid var(--v2-navy);border-radius:6px;padding:0 14px;height:34px;font-weight:500;font-size:13px;box-shadow:none;justify-content:center}
.btn:hover{transform:none;box-shadow:none;background:var(--v2-navy2);border-color:var(--v2-navy2)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F8FAFC;border-color:#CBD5E1}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn.big{height:44px;font-size:14px}
.mini-act{border-radius:6px;font-weight:500;color:var(--v2-acc-ink)}
.lock-open{border-radius:6px;font-weight:500;color:var(--v2-acc-ink);font-size:12.5px}
.chip{background:#F1F5F9;color:#334155;border-color:var(--line);font-weight:500;border-radius:4px}
.fchip{border-radius:6px;font-weight:500}
.fchip.active{background:var(--v2-sel);color:var(--v2-acc-ink);border-color:#D1D5DB;font-weight:600}
.tab{border-radius:6px;font-weight:500}
.tab.active{background:var(--v2-navy);border-color:var(--v2-navy)}
.optabs button{border-radius:6px;font-weight:500}
.optabs button.on{background:var(--v2-navy);border-color:var(--v2-navy)}
.mft button{border-radius:6px}
.mft button.on{background:var(--v2-navy)}

/* kartu & panel */
.card,.opcard,.kcard,.fc,.rm2-body,.rm-phase,.modcard,.toolcard,.lockcard,.utc,.stat,.kpi{border-radius:8px;box-shadow:var(--shadow);border-color:var(--line)}
.card{padding:18px}
.modcard:hover,.toolcard:hover{transform:none;border-color:#D1D5DB;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.modcard .code{color:var(--v2-acc-ink);font-family:var(--v2-mono)}
.toolcard .ico{display:none}
.stat:before{display:none}
.stat .sic{display:none}
.stat .n,.kpi .val,.kcard .kv,.op-hc-n{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);font-family:var(--v2-sans);font-weight:600;font-variant-numeric:tabular-nums}
.stat .n{font-size:24px}
.kcard::before{background:var(--v2-navy3);width:3px}

/* beranda: hero menjadi kepala halaman yang tenang */
.hero{background:#fff;color:var(--gra);border:1px solid var(--line);border-radius:8px;padding:22px 24px;box-shadow:var(--shadow)}
.hero:before{display:none}
.hero .tag{color:var(--slate);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.hero .pill-live{background:#DCFCE7;color:#166534}
.hero .pill-live i{background:#16A34A;box-shadow:none}
.hero h1{color:var(--ink);font-family:var(--v2-serif);font-weight:600;font-size:26px;max-width:none}
.hero .sub{color:var(--slate);font-size:14px;max-width:80ch}
.hero-company{background:#F9FAFB;border-color:var(--line)}
.hero-company .hc-name{color:var(--ink)}
.hero-company .hc-sub{color:var(--green)}
.op-home{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.op-home-t{color:var(--ink);font-weight:600}
.op-home-badge{background:#F1F5F9;color:#475569;border-color:var(--line);font-family:var(--v2-sans);letter-spacing:.04em}
.op-hc{background:#fff;border:1px solid var(--line);border-radius:8px}
.op-hc:hover{background:#F8FAFC}
.op-hc-ic{display:none}
.op-hc-n{font-size:22px}
.op-hc-l{color:var(--slate)}
.op-home .op-due,.op-home [class*="due"]{background:#F8FAFC}

/* tabel */
.tbl,.op-tbl,.cmp,.ftable{border-radius:8px;border-color:var(--line)}
.tbl th,.op-tbl th,.cmp thead th,.ftable th{background:#F8FAFC;color:var(--slate);font-weight:600;font-size:11.5px;letter-spacing:.04em}
.tbl td,.op-tbl td{border-color:var(--v2-line2)}
.tbl tr:hover td,.op-tbl tbody tr:hover{background:#FAFBFD}
.tbl .kode{color:var(--ink);font-weight:500;font-family:var(--v2-mono)}
.tbl .open{color:var(--v2-acc-ink);font-weight:600}
.tbl-wrap-op{border-radius:8px}
.badge{font-family:var(--v2-sans);font-weight:600;font-size:11px;border-radius:4px;letter-spacing:.02em}
.bd-PED,.bd-SOP,.bd-IK,.bd-FRM,.bd-CHK,.bd-TPL,.bd-TRK,.bd-DSH{background:#F1F5F9;color:#334155;border:1px solid var(--line)}
.pill{font-family:var(--v2-sans);font-weight:600;border-radius:4px}
.pill.g{background:#DCFCE7;color:#166534}.pill.y,.pill.a{background:#FEF3C7;color:#8A5A00}.pill.r{background:#FEE2E2;color:#9F1D1D}
.pill.o,.pill.b{background:#DBEAFE;color:#1E40AF}.pill.n{background:#F1F5F9;color:#475569}
.pill-prem{background:var(--v2-navy);border-radius:4px}
.tin{border-radius:4px;font-weight:600}
.tin.keluar{background:#F1F5F9;color:#334155}
.tin.disetujui{background:#DBEAFE;color:#1E40AF}

/* formulir */
.field .inwrap,.inp,.op-search,.op-toolbar select,.opf input,.opf select,.op-cost input,.sv-form input,.mf input,.mf select,.sel,.watext{border-radius:6px;border-color:#CBD5E1;background:#fff}
.field .inwrap:focus-within,.inp:focus,.mf input:focus,.mf select:focus,.watext:focus{border-color:var(--v2-navy3);box-shadow:0 0 0 3px rgba(194,65,12,.14)}
.op-search:focus,.opf input:focus,.opf select:focus{outline:none;border-color:var(--v2-navy3);box-shadow:0 0 0 3px rgba(194,65,12,.14)}
.field .pre{background:#F8FAFC}
.field input{font-family:var(--v2-sans)}
.searchbar .sw{border-radius:6px;border-color:#CBD5E1}

/* hasil kalkulator */
.result{background:var(--v2-navy);border-radius:8px}
.res-main{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:6px}
.res-main .val,.res-row .rv{font-family:var(--v2-sans);font-variant-numeric:tabular-nums}

/* batang progres */
.bar{background:var(--v2-line2);border-radius:4px}
.bar>i,.bar i{background:var(--v2-navy3);border-radius:4px}
.bar.hot i{background:#B42318}
.opbar{background:#F8FAFC;border-color:var(--line);border-radius:8px}
.opbar.full{background:#FEF3C7;border-color:#EBD9A6}
.opbar.prem{background:#F0FDF4;border-color:#BBF7D0}
.opbar-bar{background:var(--v2-line2)}
.opbar-bar i{background:var(--v2-navy3)}
.opbar-cta{background:var(--v2-navy);border-radius:6px;box-shadow:none;font-weight:500}
.util-bar{background:var(--v2-line2)}.util-bar i{background:var(--v2-navy3)}
.rm2-num{background:var(--v2-navy);border-radius:6px;box-shadow:none;font-size:14px;font-weight:600}
.rm2-prog i{background:var(--v2-navy3)}
.rm-cel{background:#F0FDF4;color:#14532D;border:1px solid #BBF7D0}
.rm-cel b{color:#14532D}
.chart-bars .cb .bfill{background:var(--v2-navy3);border-radius:3px 3px 0 0}

/* banner/gerbang paket: dari cokelat gelap menjadi panel informasi */
.upg-banner,.feat-gate{background:#fff;color:var(--gra);border:1px solid var(--line);border-left:3px solid var(--v2-acc);border-radius:8px}
.upg-banner b,.feat-gate b,.feat-gate .fg-l b{color:var(--v2-navy)}
.upg-banner .ub-ic{display:none}
.upg-banner .prog .bar,.feat-gate .fg-prog{background:var(--v2-line2)}
.upg-banner .prog .bar i,.feat-gate .fg-prog i{background:var(--v2-navy3)}
.feat-gate .fg-sm{color:var(--slate)}
#page-upgrade .u-hero{background:#fff;color:var(--gra);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
#page-upgrade .u-hero::after{display:none}
#page-upgrade .u-hero .eyebrow{color:var(--v2-acc-ink)!important}
#page-upgrade .u-hero h1{max-width:none}
#page-upgrade .u-hero p{color:var(--slate)}
#page-upgrade .u-hero .prog .bar{background:var(--v2-line2)}
#page-upgrade .u-hero .prog .bar i{background:var(--v2-navy3)}
#page-upgrade .u-hero .prog .pl{color:var(--slate)}
.lockcard .li,.lockcard .lk{display:none}
.cmp thead th:nth-child(3){color:var(--v2-acc-ink)}
.pricebox{background:var(--v2-navy);border-radius:8px}
.pricebox .pb-eye{color:#D1D5DB;font-family:var(--v2-sans)}
.pricebox .pb-price{font-family:var(--v2-sans);font-weight:600}
.pricebox .pb-list div span{color:#86EFAC}
.pricebox .btn{background:#fff;color:var(--v2-navy);border-color:#fff}
.demo-toggle{border-radius:8px}
.demo-toggle button.on{background:var(--v2-navy)}

/* modal */
.modal{background:#fff;border-radius:10px;border-color:var(--line)}
.modal .mhead{background:var(--v2-navy)}
.modal .mhead:before{display:none}
.modal .mhead h2{font-family:var(--v2-serif);font-weight:600}
.keu-mbox{border-radius:10px}
.keu-tab{font-weight:500}
.keu-tab:hover,.keu-tab.on{color:var(--v2-acc-ink)}
.lap-card{border-radius:8px;background:#F8FAFC}
.lap-card .li{display:none}
.gate-toast,#keu-toast,#de-toast{background:var(--ink);border-radius:8px}
#auth-loading .spinner{border-top-color:var(--v2-acc)}

/* teks penutup beranda */
#page-beranda>p:last-child{color:var(--v2-faint)}

/* ---------- HP ---------- */
@media(max-width:900px){
  .v2top{padding:0 12px;gap:10px}
  .v2top .v2mb{display:inline-flex;align-items:center}
  .v2top .v2srch,.v2top .v2ta,.v2top .v2user div{display:none}
  .v2top .v2inst b,.v2top .v2inst small{max-width:52vw}
  .sidebar{transform:translateX(-100%);top:var(--v2-top);height:calc(100vh - var(--v2-top));box-shadow:0 0 40px rgba(15,23,42,.2)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .content{padding:18px 16px 50px}
  .scrim.show{top:var(--v2-top);background:rgba(17,24,39,.4)}
  .hero{padding:18px}
  .hero h1,.pagehead h1,.op-h1{font-size:22px}
}
@media(max-width:420px){.v2top .v2logo{display:none}}
@media print{.v2top{display:none!important}.main{padding-top:0}}
/* panel yang dulu gelap: teks putih bawaan diganti tinta */
.op-home [style*="color:#fff"],.op-home [style*="color: #fff"]{color:var(--ink)!important}
.op-home .rm2-prog[style]{background:var(--v2-line2)!important}
.op-home .op-hc[style]{background:#fff}

/* HP: cegah geser samping (kartu grid & katalog dokumen) */
.grid>*{min-width:0}
@media(max-width:640px){
  #page-dokumen table.tbl{table-layout:fixed;width:100%}
  #page-dokumen table.tbl td,#page-dokumen table.tbl th{word-break:break-word;overflow-wrap:anywhere}
  #page-dokumen table.tbl th:first-child{width:34%}
  #page-dokumen table.tbl th:last-child{width:30%}
  #docrows td:last-child{white-space:normal}
  #docrows .kode{white-space:normal!important;word-break:break-all;font-size:11px}
  #docrows .de-lockbtn{display:block;margin:6px 0 0}
  #docrows .de-new{display:block;width:max-content;margin:4px 0 0}
}
/* bar di bawah target: merah datar */
.bar i[style*="c0392b" i],.bar.hot i{background:#B42318!important}
/* Beranda cockpit: teks bawaan tema gelap lama dibuat terbaca di kartu putih */
.op-home [style*="color:#EAE1D4"]{color:var(--ink)!important}
.op-home [style*="color:#9A9084"]{color:#64748B!important}
.op-home .sv-row{border-color:var(--line)!important}
.op-home [style*="background:rgba(255,255,255,.05)"]{background:#F8FAFC!important;border-color:var(--line)!important}

/* ===================== khusus Logistik ===================== */
.navlink .ic,.stat .sic,.op-hc-ic,.lap-card .li,.ub-ic{display:none!important}
.navlink{min-height:32px}
.hero #hero-greet:empty{display:none}
.hero .hbtns{gap:8px}
.qlaunch{gap:8px}
.qlaunch .btn{font-weight:500}
.sec-t{text-transform:uppercase}
.stat{padding:16px 18px}
.stat .n{color:var(--ink)!important;font-size:26px;letter-spacing:-.01em}
.stat .l{color:var(--slate);font-size:12.5px}
.op-hc-n,.stat .n,.kpi .val{font-family:var(--v2-sans)!important}
.op-h1{font-family:var(--v2-sans)!important;font-weight:600!important}
#op-order .eyebrow,#op-armada .eyebrow,#op-invoice .eyebrow,#op-kontak .eyebrow,#op-laporan .eyebrow,.op-head .eyebrow{font-family:var(--v2-mono)!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--v2-acc-ink)!important}
.eyebrow{font-family:var(--v2-mono)!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--v2-acc-ink)!important}
.pagehead h1,.op-h1,.hero h1{font-weight:600!important;letter-spacing:-.01em!important}
.badge,.pill,.lockb{font-family:var(--v2-sans)!important}
.v2kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.v2kpi>div{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:#F9FAFB}
.v2kpi b{display:block;font:600 18px var(--v2-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.v2kpi span{font-size:11.5px;color:var(--slate)}
.v2dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--v2-acc);margin-right:8px;vertical-align:middle}
.op-home-t{font-size:15px}
.op-tbl td .op-edit,.op-tbl td .op-del{border-radius:6px}
.btn.ghost.sm,.btn.sm{border-radius:6px}
.btn:not(.ghost){background:var(--v2-navy);border-color:var(--v2-navy)}
.btn:not(.ghost):hover{background:var(--v2-navy2);border-color:var(--v2-navy2)}
.btn.acc{background:var(--v2-acc);border-color:var(--v2-acc)}
.btn.acc:hover{background:var(--v2-acc-ink);border-color:var(--v2-acc-ink)}
.navlink.nav-upgrade{background:var(--v2-acc)}
.navlink.nav-upgrade:hover{background:var(--v2-acc-ink)}
@media(max-width:900px){.v2kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 24 Okt 2026: ikon aksi tabel (garis, bukan emoji) ---------- */
.op-edit,.op-del{font-size:0!important;line-height:0!important;width:30px;height:30px;padding:0!important;display:inline-grid!important;place-items:center;border:1px solid var(--line)!important;border-radius:6px!important;background:#fff!important;color:var(--gra)!important;margin:0 2px;vertical-align:middle;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.op-edit::before,.op-del::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--ic,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%20013%203L7%2019l-4%201%201-4z%22/%3E%3C/svg%3E")) center/contain no-repeat;mask:var(--ic,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%20013%203L7%2019l-4%201%201-4z%22/%3E%3C/svg%3E")) center/contain no-repeat}
.op-edit:hover{border-color:#C9CDD4!important;color:var(--ink)!important;background:#F9FAFB!important}
.op-del{color:#9F1D1D!important}.op-del:hover{background:#FEF2F2!important;border-color:#F5B5B5!important}
.op-del[data-pdel]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206L6%2018M6%206l12%2012%22/%3E%3C/svg%3E")}
[data-act="o-edit"],[data-act="i-edit"],[data-act="f-edit"],[data-act="d-edit"],[data-act="c-edit"],[data-act="b-edit"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%20013%203L7%2019l-4%201%201-4z%22/%3E%3C/svg%3E")}
[data-act="o-del"],[data-act="i-del"],[data-act="f-del"],[data-act="d-del"],[data-act="c-del"],[data-act="b-del"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%22/%3E%3Cpath%20d%3D%22M8%206V4h8v2%22/%3E%3Cpath%20d%3D%22M19%206l-1%2014H6L5%206%22/%3E%3Cpath%20d%3D%22M10%2011v6M14%2011v6%22/%3E%3C/svg%3E")}
[data-act="i-print"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V2h12v7%22/%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%2001-2-2v-5a2%202%200%20012-2h16a2%202%200%20012%202v5a2%202%200%2001-2%202h-2%22/%3E%3Cpath%20d%3D%22M6%2014h12v8H6z%22/%3E%3C/svg%3E")}
[data-act="i-xls"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%209h18M3%2015h18M9%203v18%22/%3E%3C/svg%3E")}
[data-act="i-wa"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%2001-12.3%207.4L3%2021l2-5.5A8.5%208.5%200%201121%2011.5z%22/%3E%3C/svg%3E")}
[data-act="i-pay"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22/%3E%3C/svg%3E")}
[data-act="o-sj"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%2000-2%202v16a2%202%200%20002%202h12a2%202%200%20002-2V8z%22/%3E%3Cpath%20d%3D%22M14%202v6h6M8%2013h8M8%2017h6%22/%3E%3C/svg%3E")}
[data-act="o-uj"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E")}
[data-act="o-dup"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%2001-2-2V4a2%202%200%20012-2h9a2%202%200%20012%202v1%22/%3E%3C/svg%3E")}
[data-act="i-rmline"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206L6%2018M6%206l12%2012%22/%3E%3C/svg%3E")}

/* =====================================================================
   MODE MALAM (24 Okt 2026)
   Aktif bila <html data-theme="dark">. Hanya di layar: cetak/PDF selalu
   terang. Halaman dokumen (kertas) & pratinjau cetak tetap putih seperti
   kertas sungguhan, di atas kanvas gelap.
===================================================================== */
@media screen{
html[data-theme="dark"]{
  color-scheme:dark;
  --dk-bg:#0E1013;--dk-s1:#15181D;--dk-s2:#1B1F25;--dk-s3:#232830;--dk-line:#2A3038;--dk-line2:#343B45;
  --dk-ink:#E8EAED;--dk-text:#C5CAD2;--dk-mute:#8C939D;--dk-faint:#6B727C;
  --ink:var(--dk-ink);--gra:var(--dk-text);--slate:var(--dk-mute);--line:var(--dk-line);
  --bone:var(--dk-bg);--sand:var(--dk-s2);--white:var(--dk-s1);
  --v2-line2:var(--dk-s3);--v2-faint:var(--dk-faint);--v2-sel:rgba(240,123,63,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --green:#4ADE80;--red:#F87171;--amber:#FBBF24;
  --orange:#F07B3F;--e700:#F59E6B;--e500:#F07B3F;--a400:#F07B3F;--v2-acc:#F07B3F;--v2-acc-ink:#FDBA8C;--v2-navy:#C2410C;--v2-navy2:#D4541C;--v2-navy3:#F07B3F;--grad:linear-gradient(0deg,#F07B3F,#F07B3F);
}
html[data-theme="dark"] body{background:var(--dk-bg);color:var(--dk-text)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] b,html[data-theme="dark"] strong{color:var(--dk-ink)}
html[data-theme="dark"] a{color:#F59E6B}

/* bar atas & menu */
html[data-theme="dark"] .v2top{background:#0A0C0F;border-bottom:1px solid var(--dk-line)}
html[data-theme="dark"] .sidebar{background:var(--dk-s1);border-right-color:var(--dk-line);color:var(--dk-text)}
html[data-theme="dark"] .navlink{color:var(--dk-text)}
html[data-theme="dark"] .navlink:hover{background:var(--dk-s3);color:var(--dk-ink)}
html[data-theme="dark"] .navlink.active{background:rgba(240,123,63,.14);color:#FDBA8C}
html[data-theme="dark"] .navlink.active:before{background:#F07B3F}
html[data-theme="dark"] .navlink .lockb{background:var(--dk-s3);color:var(--dk-mute);border-color:var(--dk-line2)}
html[data-theme="dark"] .nav-sec{color:var(--dk-faint)}
html[data-theme="dark"] .side-cta a,html[data-theme="dark"] .side-user .ubtn{background:var(--dk-s2);border-color:var(--dk-line);color:var(--dk-text)}
html[data-theme="dark"] .side-user{border-top-color:var(--dk-line)}
html[data-theme="dark"] .side-user .uname{color:var(--dk-ink)}
html[data-theme="dark"] .scrim.show{background:rgba(0,0,0,.6)}

/* permukaan */
html[data-theme="dark"] .card,html[data-theme="dark"] .opcard,html[data-theme="dark"] .stat,html[data-theme="dark"] .kpi,html[data-theme="dark"] .kcard,html[data-theme="dark"] .modcard,html[data-theme="dark"] .toolcard,html[data-theme="dark"] .fc,html[data-theme="dark"] .rm-phase,html[data-theme="dark"] .rm2-body,html[data-theme="dark"] .lockcard,html[data-theme="dark"] .utc,html[data-theme="dark"] .hero,html[data-theme="dark"] .op-home,html[data-theme="dark"] .op-hc,html[data-theme="dark"] .lap-card,html[data-theme="dark"] .demo-toggle,html[data-theme="dark"] .opbar,html[data-theme="dark"] .op-empty2,html[data-theme="dark"] #page-upgrade .u-hero,html[data-theme="dark"] .hero-company,html[data-theme="dark"] .v2kpi>div{
  background:var(--dk-s1)!important;border-color:var(--dk-line)!important;color:var(--dk-text)}
html[data-theme="dark"] .op-hc:hover,html[data-theme="dark"] .modcard:hover,html[data-theme="dark"] .toolcard:hover{background:var(--dk-s2)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] .stat .n,html[data-theme="dark"] .kpi .val:not(.g):not(.r),html[data-theme="dark"] .kcard .kv,html[data-theme="dark"] .op-hc-n,html[data-theme="dark"] .hero h1,html[data-theme="dark"] .pagehead h1,html[data-theme="dark"] .op-h1,html[data-theme="dark"] .op-home-t,html[data-theme="dark"] .opcard-t,html[data-theme="dark"] .hero-company .hc-name{color:var(--dk-ink)!important}
html[data-theme="dark"] .kpi .val.g{color:#4ADE80!important}html[data-theme="dark"] .kpi .val.r{color:#F87171!important}
html[data-theme="dark"] .callout,html[data-theme="dark"] .op-due,html[data-theme="dark"] .upg-banner,html[data-theme="dark"] .feat-gate,html[data-theme="dark"] .mnote,html[data-theme="dark"] .disc{background:var(--dk-s2)!important;border-color:var(--dk-line)!important;color:var(--dk-text)!important}
html[data-theme="dark"] .callout,html[data-theme="dark"] .op-due,html[data-theme="dark"] .upg-banner,html[data-theme="dark"] .feat-gate{border-left-color:#F07B3F!important}
html[data-theme="dark"] .gradbar{display:none}

/* tombol & chip */
html[data-theme="dark"] .btn:not(.ghost){background:#C2410C;border-color:#C2410C;color:#fff}
html[data-theme="dark"] .btn:not(.ghost):hover{background:#D4541C;border-color:#D4541C}
html[data-theme="dark"] .btn.ghost{background:var(--dk-s2);color:var(--dk-ink);border-color:var(--dk-line2)}
html[data-theme="dark"] .btn.ghost:hover{background:var(--dk-s3);border-color:#46505C}
html[data-theme="dark"] .chip,html[data-theme="dark"] .fchip,html[data-theme="dark"] .tab,html[data-theme="dark"] .optabs button,html[data-theme="dark"] .mft button,html[data-theme="dark"] .demo-toggle button,html[data-theme="dark"] .keu-tab{background:var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line)}
html[data-theme="dark"] .fchip.active,html[data-theme="dark"] .keu-tab.on{background:rgba(240,123,63,.14);color:#FDBA8C;border-color:rgba(240,123,63,.4)}
html[data-theme="dark"] .tab.active,html[data-theme="dark"] .optabs button.on,html[data-theme="dark"] .mft button.on,html[data-theme="dark"] .demo-toggle button.on{background:#C2410C;color:#fff;border-color:#C2410C}
html[data-theme="dark"] .mini-act,html[data-theme="dark"] .lock-open{background:var(--dk-s2);border-color:var(--dk-line2);color:var(--dk-text)}
html[data-theme="dark"] .op-edit,html[data-theme="dark"] .op-del,html[data-theme="dark"] .op-ebtn,html[data-theme="dark"] .op-dbtn{background:var(--dk-s2)!important;border-color:var(--dk-line2)!important;color:var(--dk-text)!important}
html[data-theme="dark"] .op-del,html[data-theme="dark"] .op-dbtn{color:#F87171!important}
html[data-theme="dark"] .op-edit:hover,html[data-theme="dark"] .op-ebtn:hover{background:var(--dk-s3)!important;color:var(--dk-ink)!important}
html[data-theme="dark"] .op-del:hover,html[data-theme="dark"] .op-dbtn:hover{background:rgba(248,113,113,.12)!important}

/* formulir */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .inp,html[data-theme="dark"] .field .inwrap,html[data-theme="dark"] .searchbar .sw,html[data-theme="dark"] .op-search,html[data-theme="dark"] .op-find,html[data-theme="dark"] .sel,html[data-theme="dark"] .watext{background:var(--dk-bg)!important;color:var(--dk-ink)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] .field .inwrap input{background:transparent!important;border:0!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#5F6670!important}
html[data-theme="dark"] .field .pre{background:var(--dk-s2)!important;color:var(--dk-mute)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] label{color:var(--dk-text)}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(.85)}
html[data-theme="dark"] .acu-tm-code{background:var(--dk-bg)!important}

/* tabel */
html[data-theme="dark"] .tbl,html[data-theme="dark"] .op-tbl,html[data-theme="dark"] .cmp,html[data-theme="dark"] .ftable,html[data-theme="dark"] .tbl-wrap-op,html[data-theme="dark"] .tbl-wrap{background:var(--dk-s1)!important;border-color:var(--dk-line)!important;color:var(--dk-text)}
html[data-theme="dark"] .tbl th,html[data-theme="dark"] .op-tbl th,html[data-theme="dark"] .cmp thead th,html[data-theme="dark"] .ftable th{background:var(--dk-s2)!important;color:var(--dk-mute)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] .tbl td,html[data-theme="dark"] .op-tbl td,html[data-theme="dark"] .cmp td,html[data-theme="dark"] .ftable td{border-color:var(--dk-line)!important;color:var(--dk-text)}
html[data-theme="dark"] .tbl tr:hover td,html[data-theme="dark"] .op-tbl tbody tr:hover,html[data-theme="dark"] .op-tbl tbody tr:hover td{background:var(--dk-s2)!important}
html[data-theme="dark"] .tbl .kode{color:var(--dk-ink)}
html[data-theme="dark"] .op-editing td{background:rgba(240,123,63,.14)!important}

/* lencana status */
html[data-theme="dark"] .pill.g,html[data-theme="dark"] .tin.disetujui,html[data-theme="dark"] .tin.dicairkan,html[data-theme="dark"] .tin.masuk{background:rgba(74,222,128,.14)!important;color:#86EFAC!important}
html[data-theme="dark"] .pill.y,html[data-theme="dark"] .pill.a,html[data-theme="dark"] .tin.diajukan{background:rgba(251,191,36,.14)!important;color:#FCD34D!important}
html[data-theme="dark"] .pill.r,html[data-theme="dark"] .tin.ditolak{background:rgba(248,113,113,.14)!important;color:#FCA5A5!important}
html[data-theme="dark"] .pill.o,html[data-theme="dark"] .pill.b{background:rgba(96,165,250,.14)!important;color:#93C5FD!important}
html[data-theme="dark"] .pill.n,html[data-theme="dark"] .pill:not([class*=" "]),html[data-theme="dark"] .badge,html[data-theme="dark"] .tin.keluar,html[data-theme="dark"] .op-home-badge,html[data-theme="dark"] .rm2-badge,html[data-theme="dark"] [class^="bd-"],html[data-theme="dark"] [class*=" bd-"]{background:var(--dk-s3)!important;color:var(--dk-text)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] .hero .pill-live{background:rgba(74,222,128,.14);color:#86EFAC}
html[data-theme="dark"] .de-new{background:rgba(240,123,63,.14)!important;color:#FDBA8C!important;border-color:rgba(240,123,63,.4)!important}

/* batang & grafik */
html[data-theme="dark"] .bar,html[data-theme="dark"] .util-bar,html[data-theme="dark"] .rm2-prog,html[data-theme="dark"] .opbar-bar,html[data-theme="dark"] .bwrap{background:var(--dk-s3)!important}
html[data-theme="dark"] .bar>i,html[data-theme="dark"] .bar i,html[data-theme="dark"] .util-bar i,html[data-theme="dark"] .rm2-prog i,html[data-theme="dark"] .bc-bar,html[data-theme="dark"] .bfill,html[data-theme="dark"] .chart-bars .cb .bfill{background:#F07B3F!important}
html[data-theme="dark"] .result{background:#0A0C0F!important;border:1px solid var(--dk-line)}

/* modal & panel melayang */
html[data-theme="dark"] .modal,html[data-theme="dark"] .op-mbox,html[data-theme="dark"] .keu-mbox,html[data-theme="dark"] #de-gmodal > div{background:var(--dk-s1)!important;color:var(--dk-text);border-color:var(--dk-line)!important}
html[data-theme="dark"] .op-mhead,html[data-theme="dark"] .keu-mhd,html[data-theme="dark"] .op-mfoot{border-color:var(--dk-line)!important;background:transparent}
html[data-theme="dark"] .gate-toast,html[data-theme="dark"] #keu-toast,html[data-theme="dark"] #de-toast{background:#E8EAED!important;color:#111!important}
html[data-theme="dark"] #acu-syncpill{background:var(--dk-s2)!important;border-color:var(--dk-line2)!important;color:var(--dk-text)}

/* gaya inline lama (latar putih/krem ditanam di HTML) */
html[data-theme="dark"] .content [style*="background:#fff"]:not(.printdoc):not(.d-sheet),html[data-theme="dark"] .content [style*="background: #fff"]:not(.printdoc),html[data-theme="dark"] .content [style*="background:#FFF"]:not(.printdoc),html[data-theme="dark"] .content [style*="background:var(--sand)"],html[data-theme="dark"] .content [style*="background:#FAF3E9"],html[data-theme="dark"] .content [style*="background:#F8FAFC"],html[data-theme="dark"] .content [style*="background:#fff2d6"],html[data-theme="dark"] .content [style*="background:#FDFBF7"]{background:var(--dk-s2)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] .content [style*="color:#1A1712"],html[data-theme="dark"] .content [style*="color:var(--ink)"]{color:var(--dk-ink)!important}

/* kertas: dokumen, pratinjau cetak, kop tetap putih */
html[data-theme="dark"] .printdoc,html[data-theme="dark"] #printArea .printdoc,html[data-theme="dark"] .d-sheet,html[data-theme="dark"] #c_preview > div{background:#fff!important;color:#111!important}
html[data-theme="dark"] .printdoc *,html[data-theme="dark"] #c_preview > div *{color:inherit;border-color:#D4D4D4}
html[data-theme="dark"] .printdoc b,html[data-theme="dark"] .printdoc strong,html[data-theme="dark"] .printdoc h1,html[data-theme="dark"] .printdoc h2,html[data-theme="dark"] .printdoc h3,html[data-theme="dark"] .printdoc h4{color:#111!important}
html[data-theme="dark"] #de-ov .vcanvas{background:#0A0C0F!important}
html[data-theme="dark"] #de-ov .vtop,html[data-theme="dark"] #de-ov .vside{background:var(--dk-s1)!important;border-color:var(--dk-line)!important;color:var(--dk-text)}
html[data-theme="dark"] #de-ov .vb{background:var(--dk-s2)!important;color:var(--dk-ink)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] #de-ov .vb.pri{background:#C2410C!important;border-color:#C2410C!important;color:#fff!important}
html[data-theme="dark"] #de-ov .vside select,html[data-theme="dark"] #de-ov .vside input{background:var(--dk-bg)!important;color:var(--dk-ink)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] #de-ov .vside h5,html[data-theme="dark"] #de-ov .vside .vh{color:var(--dk-mute)!important}

/* tombol mode malam di bar atas */
html[data-theme="dark"] .v2theme{border-color:#3A4049;color:#E8EAED}
}
/* tombol mode (dua tema) */
.v2theme{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#E5E7EB;font:500 12px var(--v2-sans);cursor:pointer;white-space:nowrap}
.v2theme:hover{background:rgba(255,255,255,.08)}
.v2theme svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.v2theme span{display:none}.v2theme{padding:0 9px}}
@media print{.v2theme{display:none!important}}
@media screen{
html[data-theme="dark"] td.op-acts,html[data-theme="dark"] .op-tbl td.op-acts{background:var(--dk-s1)!important}
html[data-theme="dark"] .op-tbl tbody tr:hover td.op-acts{background:var(--dk-s2)!important}
html[data-theme="dark"] .op-pick-i,html[data-theme="dark"] .op-pick{background:var(--dk-s2)!important;border-color:var(--dk-line2)!important;color:var(--dk-text)!important}
html[data-theme="dark"] .de-openbtn,html[data-theme="dark"] a.open.de-openbtn,html[data-theme="dark"] .de-lockbtn{background:var(--dk-s2)!important;color:var(--dk-ink)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] #c_preview{background:#0A0C0F!important;border-radius:8px;padding:10px}
html[data-theme="dark"] #c_preview > div,html[data-theme="dark"] #c_preview > div *{color:#111!important}
html[data-theme="dark"] #c_preview > div{background:#fff!important}
}
@media screen{
html[data-theme="dark"] .op-home [style*="background:rgba(255,255,255,.05)"]{background:var(--dk-s2)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] .op-home .sv-row{border-color:var(--dk-line)!important;color:var(--dk-text)!important}
html[data-theme="dark"] #printArea{background:#fff!important;color:#111!important;border-radius:8px;padding:14px}
html[data-theme="dark"] #printArea *{border-color:#D4D4D4}
}
@media screen{
html[data-theme="dark"] #de-ov{background:#0A0C0F!important}
html[data-theme="dark"] #de-ov .vbar,html[data-theme="dark"] #de-ov .vside{background:var(--dk-s1)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] #de-ov .vtt b,html[data-theme="dark"] #de-ov .vkv dd,html[data-theme="dark"] #de-ov .vlb,html[data-theme="dark"] .ghd b,html[data-theme="dark"] .de-ups-m h3{color:var(--dk-ink)!important}
html[data-theme="dark"] #de-ov .vtt>span,html[data-theme="dark"] #de-ov .vkv dt,html[data-theme="dark"] #de-ov .vside h4,html[data-theme="dark"] #de-ov .vtiny,html[data-theme="dark"] #de-ov .vzoom,html[data-theme="dark"] #de-ov .vload{color:var(--dk-mute)!important}
html[data-theme="dark"] #de-ov .vcode{color:var(--dk-text)!important}
html[data-theme="dark"] #de-ov .vside li{color:var(--dk-text)}
html[data-theme="dark"] #de-ov .vin{background:var(--dk-bg)!important;color:var(--dk-ink)!important;border-color:var(--dk-line2)!important}
html[data-theme="dark"] #de-ov .vb:hover{background:var(--dk-s3)!important}
html[data-theme="dark"] #de-ov .veditbar{background:#2A2210!important;border-color:#5A4A1A!important;color:#FCD34D!important}
html[data-theme="dark"] .gbx,html[data-theme="dark"] .de-ups-m,html[data-theme="dark"] .de-loaderr{background:var(--dk-s1)!important;color:var(--dk-text)!important;border-color:var(--dk-line)!important}
html[data-theme="dark"] .ftable tr:hover td,html[data-theme="dark"] .ftable tbody tr:hover{background:var(--dk-s2)!important}
html[data-theme="dark"] .keu-tab.on{border-bottom-color:var(--dk-s1)!important}
}
@media screen{
html[data-theme="dark"] .d-sheet,html[data-theme="dark"] .d-sheet b,html[data-theme="dark"] .d-sheet strong,html[data-theme="dark"] .d-sheet u,html[data-theme="dark"] .d-sheet h1,html[data-theme="dark"] .d-sheet h2,html[data-theme="dark"] .d-sheet h3,html[data-theme="dark"] .d-sheet h4,html[data-theme="dark"] .d-sheet a,html[data-theme="dark"] .d-sheet label{color:#000!important}
html[data-theme="dark"] #printArea b,html[data-theme="dark"] #printArea strong,html[data-theme="dark"] #printArea h1,html[data-theme="dark"] #printArea h2,html[data-theme="dark"] #printArea h3,html[data-theme="dark"] #printArea h4,html[data-theme="dark"] #c_preview b{color:#111!important}
}