/* =====================================================================
   Ngerental — tema "Pro Glass": elegan, rapi, ringkas, padat
   Dimuat paling akhir; hanya mengubah tampilan (tidak mengubah fungsi)
   ===================================================================== */
:root{
  --pg-bg:#EEF1F6;
  --pg-ink:#10213F; --pg-text:#3D4F73; --pg-muted:#5A6B8C; --pg-faint:#8A97B0;
  --pg-line:rgba(16,33,63,.08); --pg-line2:rgba(16,33,63,.05);
  --pg-glass:#fff; --pg-glass2:#fff;
  --pg-acc:#0669F7; --pg-acc-s:rgba(6,105,247,.10);
  --pg-red:#C2410C; --pg-red-s:rgba(220,38,38,.07); --pg-red-t:#B91C1C;
  --pg-amb:#B45309; --pg-amb-s:rgba(245,158,11,.10);
  --pg-grn:#047857; --pg-grn-s:rgba(16,185,129,.10);
  --pg-blu-s:rgba(6,105,247,.09);
  --pg-font:'Inter','Rubik',-apple-system,'Segoe UI',system-ui,sans-serif;
  --blue:#0669F7; --ink:#3D4F73; --muted:#5A6B8C; --line:rgba(16,33,63,.08); --bg:#EEF1F6;
}
body.hasShell{
  font-family:var(--pg-font);font-size:13.5px;color:var(--pg-text);letter-spacing:-.005em;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(6,105,247,.16),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(8,201,244,.12),transparent 60%),
    linear-gradient(180deg,#F4F6FA,#ECEFF5) fixed;
}
body.hasShell *{font-family:inherit}
body.hasShell b,body.hasShell strong{font-weight:650}

/* ---------- sidebar ---------- */
body.hasShell .sideNav{background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-right:1px solid rgba(255,255,255,.7);box-shadow:1px 0 0 var(--pg-line);width:232px}
body.hasShell .snTop img{height:22px}
body.hasShell .snCo{background:rgba(16,33,63,.04);border-radius:10px;padding:3px}
body.hasShell .snCo button{font-size:11.5px;font-weight:600;border-radius:8px;padding:6px 8px;color:var(--pg-muted)}
body.hasShell .snCo button[aria-pressed=true]{background:#fff;color:var(--pg-ink);box-shadow:0 1px 2px rgba(16,33,63,.08)}
body.hasShell .snSync button{background:var(--pg-ink);color:#fff;border-radius:10px;font-size:13px;font-weight:600;min-height:38px;box-shadow:0 6px 16px rgba(16,33,63,.18)}
body.hasShell .snSync small{font-size:11px;color:var(--pg-faint)}
body.hasShell .snSearch{background:rgba(16,33,63,.04);border-radius:10px;min-height:36px}
body.hasShell .snSearch input{font-size:13px}
body.hasShell .snItem,body.hasShell .snGroup{font-size:13.5px;font-weight:500;color:var(--pg-text);border-radius:9px;padding:7px 10px;min-height:36px;gap:10px}
body.hasShell .snItem svg,body.hasShell .snGroup svg{width:17px;height:17px;color:var(--pg-muted)}
body.hasShell .snItem:hover,body.hasShell .snGroup:hover{background:rgba(16,33,63,.04)}
body.hasShell .snItem.on{background:#fff;color:var(--pg-ink);font-weight:600;box-shadow:0 1px 2px rgba(16,33,63,.06),inset 2px 0 0 var(--pg-acc)}
body.hasShell .snItem.on svg{color:var(--pg-acc)}
body.hasShell .snSub .snItem{font-size:13px;padding-left:14px}
body.hasShell .snUser{border-top:1px solid var(--pg-line)}
body.hasShell .snAv{background:linear-gradient(135deg,#3D4F73,#10213F);color:#fff;font-weight:600;border-radius:10px}
body.hasShell .snUser b{font-size:13px;color:var(--pg-ink)}
body.hasShell .snUser small{font-size:11px}
@media(min-width:1000px){body.hasShell{padding-left:232px}}

/* ---------- header halaman ---------- */
body.hasShell main{max-width:1320px}
body.hasShell .pgHead{margin:0 0 6px;align-items:center}
body.hasShell .crumb{font-size:12px;color:var(--pg-faint)}
body.hasShell .crumb b{color:var(--pg-muted);font-weight:600}
body.hasShell .pgTitle{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--pg-ink)}
body.hasShell .pgAct{gap:6px}
body.hasShell .pgAct .btn,body.hasShell .btn{min-height:34px;border-radius:9px;padding:0 13px;font-size:13px;font-weight:600}
body.hasShell .btn.ghost,body.hasShell .pgAct .btn.ghost{background:var(--pg-glass2);border:1px solid var(--pg-line);color:var(--pg-ink);backdrop-filter:blur(10px)}
body.hasShell .btn.pri{background:var(--pg-ink);color:#fff;box-shadow:0 6px 16px rgba(16,33,63,.18)}
body.hasShell .btn.pri:hover{background:#10213F}
.hdBtn{min-height:38px!important;border:1px solid var(--pg-line)!important;background:var(--pg-glass2)!important;backdrop-filter:blur(12px);border-radius:12px!important;padding:3px 10px 3px 3px!important}
.hdBtn .snAv{width:30px;height:30px;border-radius:9px;font-size:13px}
.hdTx b{font-size:12.5px!important;font-weight:600}.hdTx small{font-size:10.5px!important}
.hdPop{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8)!important;border-radius:14px!important;box-shadow:0 20px 50px rgba(16,33,63,.16)!important}
.hdOut{min-height:34px!important;border-radius:9px!important;font-size:13px!important;font-weight:600!important;background:var(--pg-red-s)!important;border-color:transparent!important}
.coChip{font-size:12px;border-radius:8px}

/* ---------- panel kaca ---------- */
body.hasShell .panel{background:var(--pg-glass);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.75);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(16,33,63,.06);padding:14px}
body.hasShell .grid2,body.hasShell .lp{gap:12px}
body.hasShell h2{font-size:15px;font-weight:650;color:var(--pg-ink);letter-spacing:-.01em}
body.hasShell .tiny{font-size:11.5px;color:var(--pg-muted)}

/* input & segmen */
body.hasShell input[type=date],body.hasShell input[type=text],body.hasShell input[type=number],body.hasShell input[type=search],body.hasShell select,body.hasShell textarea{font-size:13px;border:1px solid var(--pg-line);background:rgba(255,255,255,.75);border-radius:9px;min-height:34px;color:var(--pg-ink)}
body.hasShell input:focus,body.hasShell select:focus,body.hasShell textarea:focus{outline:none;border-color:rgba(6,105,247,.5);box-shadow:0 0 0 3px var(--pg-acc-s)}
body.hasShell .srch input{min-height:36px;padding-left:34px}
body.hasShell .seg{background:rgba(16,33,63,.05);border:0;border-radius:9px;padding:2px;gap:2px}
body.hasShell .seg button{border:0!important;background:transparent;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--pg-muted);min-height:30px;padding:0 12px}
body.hasShell .seg button[aria-pressed=true]{background:#fff;color:var(--pg-ink);box-shadow:0 1px 2px rgba(16,33,63,.1)}
body.hasShell .lnk{font-size:12.5px;font-weight:600;color:var(--pg-acc)}
body.hasShell .meta{gap:8px}

/* shift aktif banner */
body.hasShell .shiftNow,body.hasShell #shiftNow,body.hasShell .snow{background:var(--pg-acc-s);border:0;border-radius:10px;font-size:12.5px;padding:8px 12px;color:var(--pg-text)}

/* ---------- rekonsiliasi (ringkasan atas) ---------- */
#helmCtl .rcBox{background:rgba(255,255,255,.55);border:1px solid var(--pg-line);border-radius:12px;padding:10px 12px;box-shadow:none}
#helmCtl .rcHead b{font-size:13px!important;font-weight:650;color:var(--pg-ink)}
#helmCtl .rcHead .tiny{font-size:11px}
#helmCtl .rcChips{gap:6px;margin:8px 0}
#helmCtl .rcChip{background:#fff;border:1px solid var(--pg-line);border-radius:10px;padding:6px 6px;box-shadow:none}
#helmCtl .rcChip b{font-size:16px!important;font-weight:650;color:var(--pg-ink)!important}
#helmCtl .rcChip span{font-size:10.5px;color:var(--pg-muted);font-weight:500}
#helmCtl .rcChip.zero{opacity:.5}
#helmCtl .rcChip.c-kurang:not(.zero),#helmCtl .rcChip.c-hilang:not(.zero){background:var(--pg-red-s);border-color:rgba(220,38,38,.18)}
#helmCtl .rcChip.c-kurang:not(.zero) b,#helmCtl .rcChip.c-hilang:not(.zero) b{color:var(--pg-red-t)!important}
#helmCtl .rcChip.c-lebih:not(.zero),#helmCtl .rcChip.c-noodoo:not(.zero){background:var(--pg-amb-s);border-color:rgba(245,158,11,.25)}
#helmCtl .rcChip.c-lebih:not(.zero) b,#helmCtl .rcChip.c-noodoo:not(.zero) b{color:var(--pg-amb)!important}
#helmCtl .rcChip.c-maint:not(.zero){background:var(--pg-blu-s);border-color:rgba(6,105,247,.2)}
#helmCtl .rcChip[aria-pressed=true]{box-shadow:0 0 0 2px var(--pg-ink)}
#helmCtl .hcSeg{gap:4px;margin:0}
#helmCtl .hcSeg button{border:1px solid var(--pg-line);background:#fff;color:var(--pg-muted);border-radius:8px;font-size:12px;font-weight:600;min-height:28px;padding:0 10px}
#helmCtl .hcSeg button[aria-pressed=true]{background:var(--pg-ink);border-color:var(--pg-ink);color:#fff}
#helmCtl .cekBtn{border:1px solid rgba(245,158,11,.35)!important;background:var(--pg-amb-s)!important;color:var(--pg-amb)!important;border-radius:8px!important;min-height:28px!important;font-size:12px!important}
#helmCtl .cekBtn[aria-pressed=true]{background:var(--pg-amb)!important;color:#fff!important}

/* ---------- daftar plat (padat) ---------- */
body.hasShell .allrow{font-size:12.5px;padding:6px 2px;border-bottom:1px solid var(--pg-line)}
body.hasShell .allrow small{font-size:11.5px;color:var(--pg-muted)}
body.hasShell .prHead{font-size:10.5px!important;font-weight:600!important;letter-spacing:.06em!important;color:var(--pg-faint)!important;border-bottom:1px solid var(--pg-line)!important;padding:6px 10px!important}
body.hasShell .ugh{padding:10px 10px 4px;font-size:11px;letter-spacing:.06em;color:var(--pg-ink);font-weight:650;text-transform:uppercase}
body.hasShell .ugh span{color:var(--pg-ink)}
body.hasShell .ugh small{font-weight:500;color:var(--pg-faint);text-transform:none;letter-spacing:0}
body.hasShell .prw{padding:6px 10px;border-radius:8px;row-gap:0;min-height:40px}
body.hasShell .prw+.prw{border-top:1px solid var(--pg-line2)}
body.hasShell .prw:hover{background:rgba(255,255,255,.6)}
body.hasShell .prw .pt b{font-size:13.5px;font-weight:650;color:var(--pg-ink);letter-spacing:.01em}
body.hasShell .prw .pt>small{font-size:11.5px;color:var(--pg-faint)}
body.hasShell .pOdoo{font-size:12px!important;color:var(--pg-muted)}
body.hasShell .pOdoo.bad{color:var(--pg-amb)}
body.hasShell .pOk{font-size:11.5px;font-weight:600;color:var(--pg-grn)}
body.hasShell .prw.rc-kurang,body.hasShell .prw.rc-hilang{background:var(--pg-red-s);box-shadow:inset 2px 0 0 #DC2626}
body.hasShell .prw.rc-lebih,body.hasShell .prw.rc-noodoo{background:var(--pg-amb-s);box-shadow:inset 2px 0 0 #F59E0B}
body.hasShell .prw.rc-maint{background:var(--pg-blu-s);box-shadow:inset 2px 0 0 #2A80F9}
body.hasShell .prw.rc-kurang .pOdoo,body.hasShell .prw.rc-hilang .pOdoo{color:var(--pg-red-t)}
body.hasShell .prw.sel{box-shadow:inset 2px 0 0 var(--pg-ink);background:rgba(16,33,63,.04)}
body.hasShell .prw input[type=checkbox],body.hasShell .allrow input{width:15px;height:15px;accent-color:var(--pg-ink)}

/* status pill: ringan, rata, satu bahasa warna */
body.hasShell .pill{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:6px;border:1px solid transparent;letter-spacing:0}
body.hasShell .s-ready{background:var(--pg-grn-s);color:var(--pg-grn);border-color:rgba(16,185,129,.2)}
body.hasShell .s-maint{background:rgba(6,105,247,.10);color:#0669F7;border-color:rgba(6,105,247,.22)}
body.hasShell .s-hilang{background:var(--pg-red-s);color:var(--pg-red-t);border-color:rgba(220,38,38,.2)}
body.hasShell .s-sewa{background:transparent;color:var(--pg-faint);border-color:var(--pg-line)}
body.hasShell .rcBtn{font-size:11.5px!important;font-weight:600!important}
body.hasShell .rcBtn.c-kurang,body.hasShell .rcBtn.c-hilang{color:var(--pg-red-t)}
body.hasShell .rcBtn.c-lebih,body.hasShell .rcBtn.c-noodoo{color:var(--pg-amb)}
body.hasShell .rcBtn.c-maint{color:#0669F7}
body.hasShell .rcPinT{font-size:10.5px!important;color:var(--pg-muted)!important}
body.hasShell .rcPop{background:rgba(16,33,63,.92)!important;backdrop-filter:blur(8px);border-radius:9px!important;font-size:12px!important}
body.hasShell .prDet{background:rgba(255,255,255,.7)!important;border:1px solid var(--pg-line);border-radius:9px;margin:2px 0 6px 34px;padding:7px 9px}
body.hasShell .rcA{color:var(--pg-acc)!important;font-size:11.5px!important}

/* bilah aksi massal */
body.hasShell .bulk{background:rgba(16,33,63,.88);backdrop-filter:blur(16px);border-radius:14px;box-shadow:0 20px 50px rgba(16,33,63,.3);padding:10px 12px}
body.hasShell .bulk .bb button{border-radius:8px;min-height:34px;font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.12)}
body.hasShell .bulk .bb .s-ready{background:rgba(16,185,129,.18);color:#A7F3D0}
body.hasShell .bulk .bb .s-maint{background:rgba(6,105,247,.2);color:#DAEAFF}
body.hasShell .bulk .bb .s-hilang{background:rgba(239,68,68,.2);color:#FECACA}
body.hasShell .bulk .bb .s-sewa{background:rgba(255,255,255,.08);color:#C9D6EA}

/* ---------- kolom kanan: ringkasan ---------- */
body.hasShell .odooBtn{background:rgba(255,255,255,.6);border:1px solid var(--pg-line);border-radius:12px;padding:10px 12px}
body.hasShell .odooBtn b{font-size:13px;font-weight:650;color:var(--pg-ink)}
body.hasShell .odooBtn .ob{width:30px;height:30px;font-size:13px;border-radius:9px;background:var(--pg-ink)}
body.hasShell .olink{font-size:12.5px;color:var(--pg-acc)}
body.hasShell .sum3{gap:8px}
body.hasShell .sum3>*{background:rgba(255,255,255,.65);border:1px solid var(--pg-line);border-radius:11px;padding:8px}
body.hasShell .sum3 b,body.hasShell .sum3 input{font-size:22px;font-weight:650;color:var(--pg-ink);letter-spacing:-.02em}
body.hasShell .sum3 span{font-size:11px;color:var(--pg-muted);font-weight:500}
body.hasShell .occbar{background:linear-gradient(135deg,#10213F,#10213F);border-radius:12px;padding:10px 12px;box-shadow:0 8px 20px rgba(16,33,63,.15)}
body.hasShell .occbar span{color:#8A97B0;font-weight:500}
body.hasShell .occbar b{font-size:20px;font-weight:650;color:#fff}
body.hasShell .occbar small{color:#C9D6EA}
body.hasShell .occbar i{background:rgba(255,255,255,.12)}
body.hasShell .occbar em{background:#FFE41D}
body.hasShell .ctab{font-size:12.5px}
body.hasShell .ctab th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-faint);font-weight:600;background:transparent;border-bottom:1px solid var(--pg-line)}
body.hasShell .ctab td{padding:6px 8px;border-bottom:1px solid var(--pg-line2)}
body.hasShell .more>summary{font-size:13px;font-weight:650;color:var(--pg-ink)}
body.hasShell .kpi{background:rgba(255,255,255,.65);border:1px solid var(--pg-line);border-radius:11px}
body.hasShell .kpi b{font-weight:650;color:var(--pg-ink)}

/* tabel umum */
body.hasShell .dt thead th,body.hasShell .dt th,body.hasShell table.sheet th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
body.hasShell .toast{background:rgba(16,33,63,.92);backdrop-filter:blur(10px);border-radius:10px;font-size:13px}

/* HP */
@media(max-width:999px){
  body.hasShell .panel{padding:12px;border-radius:12px}
  body.hasShell .pgTitle{font-size:19px}
  body.hasShell header.top{background:linear-gradient(135deg,#0669F7,#2A80F9);backdrop-filter:blur(14px);box-shadow:0 4px 16px rgba(6,105,247,.2)}
  body.hasShell .bnav{background:rgba(255,255,255,.8);backdrop-filter:blur(16px);border-top:1px solid var(--pg-line)}
}
@supports not (backdrop-filter:blur(1px)){body.hasShell .panel{background:rgba(255,255,255,.92)}}
body.hasShell .sum3 input{background:transparent;border:0;box-shadow:none;text-align:center;min-height:0;padding:0}
body.hasShell .xtra,body.hasShell .late,body.hasShell [id^=late]{border-radius:12px}
body.hasShell .shiftNow{background:rgba(6,105,247,.08);color:var(--pg-text)}
body.hasShell .lateAlert{background:var(--pg-red-s);border:1px solid rgba(220,38,38,.18);border-radius:11px;padding:9px 12px;box-shadow:inset 3px 0 0 #DC2626}
body.hasShell .lateAlert b{font-size:13px;font-weight:650;color:var(--pg-red-t)}
body.hasShell .lateAlert span{font-size:12px;color:var(--pg-text)}

/* =====================================================================
   3 GAYA ALTERNATIF — pilih di menu profil (pojok kanan atas)
   ===================================================================== */

/* ---------- 1. MONO: putih bersih, garis tipis, tanpa kaca (gaya Linear) ---------- */
body.hasShell[data-theme=mono]{background:#FAFAFA;--pg-acc:#10213F;--pg-line:#E5E7EB;--pg-line2:#F3F4F6}
body[data-theme=mono] .sideNav{background:#FAFAFA;backdrop-filter:none;border-right:1px solid #E5E7EB;box-shadow:none}
body[data-theme=mono] .panel{background:#fff;backdrop-filter:none;border:1px solid #E5E7EB;box-shadow:0 1px 2px rgba(0,0,0,.03);border-radius:10px}
body[data-theme=mono] .snItem.on{background:#fff;box-shadow:0 0 0 1px #E5E7EB;color:#10213F}
body[data-theme=mono] .snItem.on svg{color:#10213F}
body[data-theme=mono] .snSync button,body[data-theme=mono] .btn.pri{background:#10213F;box-shadow:none;border-radius:7px}
body[data-theme=mono] .btn.ghost{background:#fff;border:1px solid #E5E7EB;backdrop-filter:none;border-radius:7px}
body[data-theme=mono] .seg{background:#F3F4F6;border-radius:7px}
body[data-theme=mono] .seg button{border-radius:5px}
body[data-theme=mono] #helmCtl .rcBox{background:#fff;border-radius:10px}
body[data-theme=mono] #helmCtl .rcChip{border-radius:7px;background:#FAFAFA}
body[data-theme=mono] #helmCtl .rcChip.c-kurang:not(.zero),body[data-theme=mono] #helmCtl .rcChip.c-hilang:not(.zero),body[data-theme=mono] #helmCtl .rcChip.c-lebih:not(.zero),body[data-theme=mono] #helmCtl .rcChip.c-noodoo:not(.zero),body[data-theme=mono] #helmCtl .rcChip.c-maint:not(.zero){background:#fff;border-color:#E5E7EB}
body[data-theme=mono] #helmCtl .hcSeg button{border-radius:6px}
body[data-theme=mono] .prw.rc-kurang,body[data-theme=mono] .prw.rc-hilang,body[data-theme=mono] .prw.rc-lebih,body[data-theme=mono] .prw.rc-noodoo,body[data-theme=mono] .prw.rc-maint{background:#fff}
body[data-theme=mono] .prw.rc-kurang,body[data-theme=mono] .prw.rc-hilang{box-shadow:inset 3px 0 0 #EF4444}
body[data-theme=mono] .prw.rc-lebih,body[data-theme=mono] .prw.rc-noodoo{box-shadow:inset 3px 0 0 #F59E0B}
body[data-theme=mono] .prw.rc-maint{box-shadow:inset 3px 0 0 #2A80F9}
body[data-theme=mono] .pill{border-radius:4px;background:#fff!important;border-color:#E5E7EB!important}
body[data-theme=mono] .s-ready{color:#047857}body[data-theme=mono] .s-maint{color:#0669F7}body[data-theme=mono] .s-hilang{color:#B91C1C}
body[data-theme=mono] .sum3>*,body[data-theme=mono] .odooBtn,body[data-theme=mono] .kpi{background:#fff;border-radius:8px}
body[data-theme=mono] .occbar{background:#10213F;box-shadow:none;border-radius:8px}
body[data-theme=mono] .occbar em{background:#fff}
body[data-theme=mono] .lateAlert{background:#fff;border-color:#FECACA;border-radius:8px}
body[data-theme=mono] .snAv,body[data-theme=mono] .hdBtn .snAv{background:#10213F;border-radius:50%}
body[data-theme=mono] .hdBtn{background:#fff!important;border-radius:8px!important}

/* ---------- 2. MIDNIGHT: gelap, kaca gelap, aksen biru-ungu ---------- */
body.hasShell[data-theme=midnight]{
  --pg-ink:#F4F8FF;--pg-text:#C9D6EA;--pg-muted:#8A97B0;--pg-faint:#5A6B8C;
  --pg-line:rgba(255,255,255,.08);--pg-line2:rgba(255,255,255,.05);
  --pg-acc:#08C9F4;--pg-acc-s:rgba(8,201,244,.14);
  --pg-red-s:rgba(248,113,113,.12);--pg-red-t:#FCA5A5;--pg-amb-s:rgba(251,191,36,.12);--pg-amb:#FCD34D;
  --pg-grn-s:rgba(52,211,153,.12);--pg-grn:#6EE7B7;--pg-blu-s:rgba(8,201,244,.12);
  color:#C9D6EA;color-scheme:dark;
  background:radial-gradient(1000px 600px at 80% -10%,rgba(6,105,247,.28),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(8,201,244,.18),transparent 60%),#0A1733 fixed}
body[data-theme=midnight] .sideNav{background:rgba(16,33,63,.6);border-right:1px solid rgba(255,255,255,.06);box-shadow:none}
body[data-theme=midnight] .snTop img{filter:brightness(0) invert(1)}
body[data-theme=midnight] .snItem,body[data-theme=midnight] .snGroup{color:#C9D6EA}
body[data-theme=midnight] .snItem:hover,body[data-theme=midnight] .snGroup:hover{background:rgba(255,255,255,.05)}
body[data-theme=midnight] .snItem.on{background:rgba(8,201,244,.14);color:#fff;box-shadow:inset 2px 0 0 #08C9F4}
body[data-theme=midnight] .snCo,body[data-theme=midnight] .snSearch{background:rgba(255,255,255,.05)}
body[data-theme=midnight] .snCo button[aria-pressed=true]{background:rgba(255,255,255,.1);color:#fff}
body[data-theme=midnight] .snSync button,body[data-theme=midnight] .btn.pri{background:linear-gradient(135deg,#0669F7,#2A80F9);color:#fff;box-shadow:0 8px 20px rgba(6,105,247,.35)}
body[data-theme=midnight] .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#DAEAFF}
body[data-theme=midnight] .panel{background:rgba(16,33,63,.55);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.25)}
body[data-theme=midnight] input,body[data-theme=midnight] select,body[data-theme=midnight] textarea{background:rgba(255,255,255,.05)!important;color:#F4F8FF!important;border-color:rgba(255,255,255,.1)!important}
body[data-theme=midnight] .seg{background:rgba(255,255,255,.06)}
body[data-theme=midnight] .seg button[aria-pressed=true]{background:rgba(255,255,255,.12);color:#fff}
body[data-theme=midnight] #helmCtl .rcBox{background:rgba(255,255,255,.03)}
body[data-theme=midnight] #helmCtl .rcChip,body[data-theme=midnight] #helmCtl .hcSeg button{background:rgba(255,255,255,.04)}
body[data-theme=midnight] #helmCtl .hcSeg button[aria-pressed=true]{background:#08C9F4;border-color:#08C9F4;color:#0A1733}
body[data-theme=midnight] .prw:hover{background:rgba(255,255,255,.04)}
body[data-theme=midnight] .prw .pt b,body[data-theme=midnight] .ugh,body[data-theme=midnight] .ugh span{color:#F4F8FF}
body[data-theme=midnight] .s-maint{background:rgba(8,201,244,.14);color:#8FD9F7;border-color:rgba(8,201,244,.25)}
body[data-theme=midnight] .shiftNow{background:rgba(8,201,244,.12);color:#DAEAFF}
body[data-theme=midnight] .sum3>*,body[data-theme=midnight] .odooBtn,body[data-theme=midnight] .kpi{background:rgba(255,255,255,.04)}
body[data-theme=midnight] .odooBtn .ob{background:#0669F7}
body[data-theme=midnight] .occbar{background:linear-gradient(135deg,#10213F,#0669F7)}
body[data-theme=midnight] .ctab td{color:#C9D6EA}
body[data-theme=midnight] .hdBtn{background:rgba(255,255,255,.06)!important;color:#DAEAFF}
body[data-theme=midnight] .hdTx b{color:#F4F8FF!important}
body[data-theme=midnight] .hdPop{background:rgba(16,33,63,.92)!important;border-color:rgba(255,255,255,.1)!important}
body[data-theme=midnight] .demoBar,body[data-theme=midnight] .demo{opacity:.85}

/* ---------- 3. LEDGER: padat seperti spreadsheet, garis grid, zebra ---------- */
body.hasShell[data-theme=ledger]{background:#F5F6F8;font-size:12.5px;--pg-acc:#0669F7;--pg-acc-s:rgba(6,105,247,.08);--pg-line:#E2E5EA;--pg-line2:#ECEEF1}
body[data-theme=ledger] .sideNav{background:#10213F;border-right:0;box-shadow:none;backdrop-filter:none}
body[data-theme=ledger] .snTop img{filter:brightness(0) invert(1)}
body[data-theme=ledger] .snItem,body[data-theme=ledger] .snGroup{color:#D1D5DB;font-size:13px;min-height:32px;padding:5px 10px}
body[data-theme=ledger] .snItem svg,body[data-theme=ledger] .snGroup svg{color:#9CA3AF}
body[data-theme=ledger] .snItem:hover,body[data-theme=ledger] .snGroup:hover{background:rgba(255,255,255,.06)}
body[data-theme=ledger] .snItem.on{background:#0669F7;color:#fff;box-shadow:none}
body[data-theme=ledger] .snItem.on svg{color:#fff}
body[data-theme=ledger] .snCo,body[data-theme=ledger] .snSearch{background:rgba(255,255,255,.06)}
body[data-theme=ledger] .snCo button{color:#9CA3AF}
body[data-theme=ledger] .snCo button[aria-pressed=true]{background:#22396A;color:#fff;box-shadow:none}
body[data-theme=ledger] .snSearch input{color:#fff}
body[data-theme=ledger] .snSync button{background:#0669F7;box-shadow:none;border-radius:6px}
body[data-theme=ledger] .snUser{border-color:rgba(255,255,255,.08)}
body[data-theme=ledger] .snUser b{color:#F9FAFB}
body[data-theme=ledger] .snAv{background:#0669F7}
body[data-theme=ledger] .pgTitle{font-size:19px}
body[data-theme=ledger] .btn.pri{background:#0669F7;box-shadow:none;border-radius:6px}
body[data-theme=ledger] .btn.ghost{background:#fff;border-color:#D1D5DB;border-radius:6px;backdrop-filter:none}
body[data-theme=ledger] .panel{background:#fff;backdrop-filter:none;border:1px solid #E2E5EA;border-radius:6px;box-shadow:none;padding:10px}
body[data-theme=ledger] .seg,body[data-theme=ledger] .seg button{border-radius:4px}
body[data-theme=ledger] input,body[data-theme=ledger] select{border-radius:4px!important;min-height:30px!important}
body[data-theme=ledger] #helmCtl .rcBox{border-radius:6px;background:#F9FAFB;padding:8px 10px}
body[data-theme=ledger] #helmCtl .rcChip,body[data-theme=ledger] #helmCtl .hcSeg button,body[data-theme=ledger] #helmCtl .cekBtn{border-radius:4px!important}
body[data-theme=ledger] #helmCtl .hcSeg button[aria-pressed=true]{background:#0669F7;border-color:#0669F7}
body[data-theme=ledger] .prHead{background:#F3F4F6;border:1px solid #E2E5EA!important;color:#6B7280!important}
body[data-theme=ledger] .prw{border-radius:0;padding:4px 10px;min-height:34px;border-left:1px solid #E2E5EA;border-right:1px solid #E2E5EA}
body[data-theme=ledger] .prw+.prw{border-top:1px solid #ECEEF1}
body[data-theme=ledger] .prw:nth-of-type(even){background:#FAFAFB}
body[data-theme=ledger] .prw .pt b{font-size:12.5px;font-variant-numeric:tabular-nums}
body[data-theme=ledger] .prw .pt>small{display:inline;margin-left:6px}
body[data-theme=ledger] .ugh{background:#F3F4F6;border:1px solid #E2E5EA;border-bottom:0;padding:5px 10px;margin-top:8px;color:#22396A}
body[data-theme=ledger] .pill{border-radius:3px;padding:2px 8px;font-size:11px}
body[data-theme=ledger] .prw.rc-kurang,body[data-theme=ledger] .prw.rc-hilang{background:#FEF2F2;box-shadow:inset 3px 0 0 #DC2626}
body[data-theme=ledger] .prw.rc-lebih,body[data-theme=ledger] .prw.rc-noodoo{background:#FFFBEB;box-shadow:inset 3px 0 0 #D97706}
body[data-theme=ledger] .prw.rc-maint{background:#EFF6FF;box-shadow:inset 3px 0 0 #2563EB}
body[data-theme=ledger] .pOk{color:#0669F7}
body[data-theme=ledger] .sum3>*,body[data-theme=ledger] .odooBtn,body[data-theme=ledger] .kpi{border-radius:6px;background:#fff}
body[data-theme=ledger] .occbar{background:#0669F7;border-radius:6px;box-shadow:none}
body[data-theme=ledger] .occbar em{background:#FFE41D}
body[data-theme=ledger] .ctab tr:nth-child(even) td{background:#FAFAFB}
body[data-theme=ledger] .lateAlert{border-radius:6px}
body[data-theme=ledger] .hdBtn{background:#fff!important;border-radius:6px!important}
body[data-theme=ledger] .hdBtn .snAv{background:#0669F7;border-radius:6px}

/* pemilih tema di menu profil */
.thPick{margin-top:10px}
.thPick p{margin:0 0 6px;font-size:12px;font-weight:700;color:#7A88A6}
.thPick div{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.thPick button{border:1px solid rgba(16,33,63,.1);background:#fff;border-radius:9px;padding:7px 8px;font:600 12px var(--pg-font);color:#3D4F73;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:36px}
.thPick button i{width:16px;height:16px;border-radius:5px;flex:none}
.thPick button[aria-pressed=true]{border-color:#10213F;box-shadow:0 0 0 1px #10213F}
/* perbaikan tema */
body.hasShell .snGroup[aria-expanded=true]{background:transparent;color:var(--pg-ink)}
body.hasShell .ugh{background:transparent}
body[data-theme=midnight] .snGroup[aria-expanded=true]{color:#fff}
body[data-theme=midnight] .ugh{background:rgba(11,17,32,.85)!important}
body[data-theme=midnight] .ctab th,body[data-theme=midnight] .dt th{background:transparent!important;color:#8A97B0}
body[data-theme=midnight] .btn.ghost,body[data-theme=midnight] .pgAct .btn.ghost{background:rgba(255,255,255,.07)!important;color:#DAEAFF!important;border:1px solid rgba(255,255,255,.12)!important}
body[data-theme=midnight] .prHead{color:#5A6B8C!important}
body[data-theme=midnight] .allrow{color:#C9D6EA}
body[data-theme=midnight] .pgTitle,body[data-theme=midnight] h2{color:#F8FAFC}
body[data-theme=ledger] .snGroup[aria-expanded=true]{color:#fff}
body[data-theme=ledger] .ugh{background:#F3F4F6!important}
body[data-theme=ledger] .prw .pt>small{display:block;margin-left:0}

/* ---- warna brand Ngerental (Blue #0669F7 · Yellow #FFE41D · Cyan #08C9F4 · Light #DAEAFF · Ink #3D4F73 · Navy #10213F) ---- */
body.hasShell .snItem.on{box-shadow:inset 3px 0 0 #0669F7}
body.hasShell .btn.pri,body.hasShell .snSync button{background:#0669F7;box-shadow:0 6px 16px rgba(6,105,247,.25)}
body.hasShell .btn.pri:hover{background:#0558D0}
body.hasShell .snAv{background:#0669F7}
body.hasShell #helmCtl .hcSeg button[aria-pressed=true]{background:#10213F;border-color:#10213F;color:#fff}
body.hasShell #helmCtl .cekBtn{background:rgba(255,228,29,.25)!important;border-color:rgba(230,200,0,.5)!important;color:#10213F!important}
body.hasShell #helmCtl .cekBtn[aria-pressed=true]{background:#FFE41D!important;border-color:#FFE41D!important;color:#10213F!important}
body.hasShell .occbar{background:linear-gradient(135deg,#0669F7,#2A80F9)}
body.hasShell .occbar span,body.hasShell .occbar small{color:#DAEAFF}
body.hasShell .occbar em{background:#FFE41D}
body.hasShell .shiftNow{background:#DAEAFF;color:#3D4F73}
body.hasShell .s-maint{background:#FFE41D;color:#10213F;border-color:#F0D400}
body.hasShell .prw.rc-maint{background:rgba(218,234,255,.6);box-shadow:inset 3px 0 0 #0669F7}
body.hasShell .pOk{color:#0669F7}
body[data-theme=mono] .btn.pri,body[data-theme=mono] .snSync button{background:#0669F7}
body[data-theme=mono] .snAv,body[data-theme=mono] .hdBtn .snAv{background:#0669F7}
body[data-theme=mono] .occbar{background:#10213F}body[data-theme=mono] .occbar em{background:#FFE41D}
body[data-theme=mono] .s-maint{background:#FFE41D!important;color:#10213F;border-color:#F0D400!important}
body[data-theme=midnight]{background:radial-gradient(1000px 600px at 80% -10%,rgba(6,105,247,.35),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(8,201,244,.18),transparent 60%),#0A1733 fixed}
body[data-theme=midnight] .btn.pri,body[data-theme=midnight] .snSync button{background:linear-gradient(135deg,#0669F7,#2A80F9)}
body[data-theme=midnight] #helmCtl .hcSeg button[aria-pressed=true]{background:#08C9F4;border-color:#08C9F4;color:#10213F}
body[data-theme=midnight] .occbar{background:linear-gradient(135deg,#0669F7,#10213F)}
body[data-theme=ledger] .snItem.on{background:#0669F7;color:#fff}
body[data-theme=ledger] .btn.pri,body[data-theme=ledger] .snSync button{background:#0669F7}
body[data-theme=ledger] .occbar{background:#0669F7}
body[data-theme=ledger] #helmCtl .hcSeg button[aria-pressed=true]{background:#0669F7;border-color:#0669F7}
body[data-theme=ledger] .prHead,body[data-theme=ledger] .ugh{background:#DAEAFF!important;color:#10213F!important}
body[data-theme=ledger] .prw:nth-of-type(even){background:#F7FAFF}
body[data-theme=ledger] .pOk{color:#0669F7}
body[data-theme=midnight] .shiftNow{background:rgba(6,105,247,.2);color:#DAEAFF}
body[data-theme=midnight] .ctab th{color:#8FD9F7!important;opacity:1}
body[data-theme=midnight] #helmCtl .cekBtn{background:rgba(255,228,29,.15)!important;color:#FFE41D!important}
body[data-theme=midnight] #helmCtl .cekBtn[aria-pressed=true]{background:#FFE41D!important;color:#10213F!important}

/* =====================================================================
   STUDIO — modern SaaS (bersih, tegas, titik status, tab garis bawah)
   ===================================================================== */
body.hasShell[data-theme=studio]{
  --pg-ink:#10213F;--pg-text:#3D4F73;--pg-muted:#6B7A99;--pg-faint:#9AA6BF;--pg-line:#E6EBF3;--pg-line2:#F0F3F8;
  background:#F6F8FC;font-size:13.5px}
body[data-theme=studio] .sideNav{background:#fff;backdrop-filter:none;border-right:1px solid #E6EBF3;box-shadow:none}
body[data-theme=studio] .snItem,body[data-theme=studio] .snGroup{border-radius:8px;color:#3D4F73}
body[data-theme=studio] .snItem.on{background:linear-gradient(90deg,rgba(6,105,247,.10),rgba(8,201,244,.04));color:#0669F7;box-shadow:inset 3px 0 0 #0669F7}
body[data-theme=studio] .snItem.on svg{color:#0669F7}
body[data-theme=studio] .snSync button{background:#10213F;box-shadow:none;border-radius:8px}
body[data-theme=studio] .snCo{background:#F3F6FB}
/* header halaman dengan strip gradasi brand */
body[data-theme=studio] .pgHead{padding:14px 18px;margin:0 0 14px;background:#fff;border:1px solid #E6EBF3;border-radius:14px;box-shadow:0 1px 2px rgba(16,33,63,.04);position:relative;overflow:visible}
body[data-theme=studio] .pgHead::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#0669F7,#08C9F4 60%,#FFE41D)}
body[data-theme=studio] .pgTitle{font-size:20px;font-weight:700}
body[data-theme=studio] .btn{border-radius:8px}
body[data-theme=studio] .btn.pri{background:#0669F7;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 12px rgba(6,105,247,.3)}
body[data-theme=studio] .btn.ghost{background:#fff;border:1px solid #E6EBF3;backdrop-filter:none;box-shadow:0 1px 2px rgba(16,33,63,.04)}
body[data-theme=studio] .hdBtn{background:#F6F8FC!important;border-color:#E6EBF3!important;border-radius:10px!important}
body[data-theme=studio] .hdBtn .snAv,body[data-theme=studio] .snAv{background:linear-gradient(135deg,#0669F7,#08C9F4);border-radius:50%}
body[data-theme=studio] .panel{background:#fff;backdrop-filter:none;border:1px solid #E6EBF3;border-radius:14px;box-shadow:0 1px 2px rgba(16,33,63,.04),0 8px 24px rgba(16,33,63,.04);padding:16px}
body[data-theme=studio] .shiftNow{background:#F3F7FF;border:1px solid #DAEAFF;color:#3D4F73;border-radius:10px}
body[data-theme=studio] input,body[data-theme=studio] select{background:#fff!important;border-color:#E6EBF3!important;border-radius:8px!important}
/* segmen jadi tab garis bawah */
body[data-theme=studio] .seg{background:transparent;border-bottom:1px solid #E6EBF3;border-radius:0;padding:0;gap:16px}
body[data-theme=studio] .seg button{background:transparent!important;box-shadow:none!important;border-radius:0;padding:0 2px;min-height:32px;color:#6B7A99;border-bottom:2px solid transparent!important;margin-bottom:-1px}
body[data-theme=studio] .seg button[aria-pressed=true]{color:#10213F;border-bottom-color:#0669F7!important}
body[data-theme=studio] #cSeg{border-bottom:0;background:#F3F6FB;border-radius:8px;padding:2px;gap:2px}
body[data-theme=studio] #cSeg button{border-bottom:0!important;border-radius:6px;padding:0 12px;margin:0}
body[data-theme=studio] #cSeg button[aria-pressed=true]{background:#fff!important;box-shadow:0 1px 2px rgba(16,33,63,.1)!important}
/* ringkasan rekonsiliasi: kartu statistik */
body[data-theme=studio] #helmCtl .rcBox{background:#fff;border:1px solid #E6EBF3;border-radius:12px;padding:12px 14px}
body[data-theme=studio] #helmCtl .rcChip{background:#fff;border:1px solid #E6EBF3;border-radius:10px;align-items:flex-start;text-align:left;padding:8px 10px;position:relative}
body[data-theme=studio] #helmCtl .rcChip b{font-size:20px!important;font-weight:700}
body[data-theme=studio] #helmCtl .rcChip::after{content:"";position:absolute;right:10px;top:12px;width:7px;height:7px;border-radius:50%;background:#C9D6EA}
body[data-theme=studio] #helmCtl .rcChip.c-kurang:not(.zero)::after,body[data-theme=studio] #helmCtl .rcChip.c-hilang:not(.zero)::after{background:#E5484D}
body[data-theme=studio] #helmCtl .rcChip.c-lebih:not(.zero)::after,body[data-theme=studio] #helmCtl .rcChip.c-noodoo:not(.zero)::after{background:#F5A524}
body[data-theme=studio] #helmCtl .rcChip.c-maint:not(.zero)::after{background:#FFE41D;box-shadow:0 0 0 1px #E6C800}
body[data-theme=studio] #helmCtl .rcChip:not(.zero){background:#fff!important;border-color:#E6EBF3!important}
body[data-theme=studio] #helmCtl .rcChip:not(.zero) b{color:#10213F!important}
body[data-theme=studio] #helmCtl .hcSeg button{border-radius:999px;background:#F3F6FB;border-color:transparent}
body[data-theme=studio] #helmCtl .hcSeg button[aria-pressed=true]{background:#10213F;color:#fff}
body[data-theme=studio] #helmCtl .cekBtn{border-radius:999px!important}
/* daftar plat: baris bersih + titik status */
body[data-theme=studio] .prHead{background:#F8FAFD;border:1px solid #E6EBF3!important;border-radius:10px 10px 0 0;color:#9AA6BF!important}
body[data-theme=studio] .ugh{padding:12px 10px 6px;color:#0669F7}
body[data-theme=studio] .prw{border-radius:10px;padding:7px 10px;margin:1px 0}
body[data-theme=studio] .prw+.prw{border-top:0}
body[data-theme=studio] .prw:hover{background:#F6F8FC}
body[data-theme=studio] .prw .pt b{font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;letter-spacing:.02em}
body[data-theme=studio] .pill{background:transparent!important;border:0!important;padding:3px 0!important;display:inline-flex;align-items:center;gap:6px;color:#3D4F73!important;font-weight:600}
body[data-theme=studio] .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#C9D6EA;flex:none}
body[data-theme=studio] .pill.s-ready::before{background:#30A46C;box-shadow:0 0 0 3px rgba(48,164,108,.15)}
body[data-theme=studio] .pill.s-maint::before{background:#FFE41D;box-shadow:0 0 0 3px rgba(255,228,29,.3)}
body[data-theme=studio] .pill.s-hilang::before{background:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
body[data-theme=studio] .pill.s-sewa{color:#9AA6BF!important}
body[data-theme=studio] .prw.rc-kurang,body[data-theme=studio] .prw.rc-hilang{background:#FFF7F7;box-shadow:inset 3px 0 0 #E5484D}
body[data-theme=studio] .prw.rc-lebih,body[data-theme=studio] .prw.rc-noodoo{background:#FFFBF2;box-shadow:inset 3px 0 0 #F5A524}
body[data-theme=studio] .prw.rc-maint{background:#FFFDE8;box-shadow:inset 3px 0 0 #FFE41D}
body[data-theme=studio] .rcBtn{display:inline-flex;align-items:center;border-radius:999px!important;padding:2px 9px!important;min-height:22px!important}
body[data-theme=studio] .rcBtn.c-kurang,body[data-theme=studio] .rcBtn.c-hilang{background:#FDECEC;color:#C62A2F}
body[data-theme=studio] .rcBtn.c-lebih,body[data-theme=studio] .rcBtn.c-noodoo{background:#FEF3E1;color:#A35B00}
body[data-theme=studio] .rcBtn.c-maint{background:#FFF6B8;color:#10213F}
body[data-theme=studio] .pOk{color:#30A46C;font-weight:600}
body[data-theme=studio] .bulk .bb .s-maint{background:#FFE41D;color:#10213F}
/* kolom kanan */
body[data-theme=studio] .odooBtn,body[data-theme=studio] .sum3>*,body[data-theme=studio] .kpi{background:#fff;border:1px solid #E6EBF3;border-radius:12px}
body[data-theme=studio] .sum3 b,body[data-theme=studio] .sum3 input{font-size:24px;font-weight:700}
body[data-theme=studio] .odooBtn .ob{background:linear-gradient(135deg,#0669F7,#08C9F4)}
body[data-theme=studio] .occbar{background:#10213F;border-radius:12px;box-shadow:0 8px 24px rgba(16,33,63,.18)}
body[data-theme=studio] .occbar i{background:rgba(255,255,255,.12);height:6px}
body[data-theme=studio] .occbar em{background:linear-gradient(90deg,#08C9F4,#0669F7 50%,#FFE41D)}
body[data-theme=studio] .lateAlert{background:#fff;border:1px solid #F6CDCD;box-shadow:inset 3px 0 0 #E5484D;border-radius:12px}
body[data-theme=studio] .ctab th{background:#F8FAFD!important}
body[data-theme=studio] .ctab tr:hover td{background:#F6F8FC}
body[data-theme=studio] .seg:not(#cSeg) button{border:0!important;border-bottom:2px solid transparent!important;outline:0}
body[data-theme=studio] .seg:not(#cSeg) button[aria-pressed=true]{border-bottom-color:#0669F7!important}

/* ---- Studio: lebih ringkas & familiar (font sistem, ukuran standar dashboard) ---- */
body.hasShell[data-theme=studio]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:13px;line-height:1.4}
body[data-theme=studio] .snTop img{height:17px}
body[data-theme=studio] header.top img,body[data-theme=studio] .top .logo,body[data-theme=studio] header.top .brand img{height:16px!important;width:auto}
body[data-theme=studio] header.top{min-height:48px;padding-top:6px;padding-bottom:6px}
body[data-theme=studio] .snHam{width:32px;height:32px}
body[data-theme=studio] .sideNav{width:220px;padding:14px 10px}
@media(min-width:1000px){body.hasShell[data-theme=studio]{padding-left:220px}}
body[data-theme=studio] .snItem,body[data-theme=studio] .snGroup{font-size:13px;min-height:32px;padding:6px 10px}
body[data-theme=studio] .snItem svg,body[data-theme=studio] .snGroup svg{width:16px;height:16px}
body[data-theme=studio] .snSub .snItem{font-size:12.5px}
body[data-theme=studio] .snSync button{min-height:34px;font-size:12.5px}
body[data-theme=studio] .snCo button{font-size:11px;padding:5px 6px}
body[data-theme=studio] .snSearch{min-height:32px}
body[data-theme=studio] .snUser b{font-size:12.5px}
body[data-theme=studio] main{padding-top:12px}
body[data-theme=studio] .pgHead{padding:10px 14px;margin-bottom:10px;border-radius:10px}
body[data-theme=studio] .pgHead::before{height:2px;border-radius:10px 10px 0 0}
body[data-theme=studio] .crumb{font-size:11px}
body[data-theme=studio] .pgTitle{font-size:17px;font-weight:600;letter-spacing:-.01em}
body[data-theme=studio] .btn,body[data-theme=studio] .pgAct .btn{min-height:30px;font-size:12.5px;padding:0 12px;border-radius:6px;font-weight:600}
body[data-theme=studio] .hdBtn{min-height:32px!important;padding:2px 8px 2px 2px!important}
body[data-theme=studio] .hdBtn .snAv{width:26px;height:26px;font-size:12px}
body[data-theme=studio] .hdTx b{font-size:12px!important}.body[data-theme=studio] .hdTx small{font-size:10px!important}
body[data-theme=studio] .coChip{font-size:11.5px;padding:3px 8px;min-height:26px}
body[data-theme=studio] .panel{padding:12px;border-radius:10px}
body[data-theme=studio] .grid2,body[data-theme=studio] .lp{gap:10px}
body[data-theme=studio] h2{font-size:14px}
body[data-theme=studio] .shiftNow{font-size:12px;padding:6px 10px;border-radius:8px}
body[data-theme=studio] input,body[data-theme=studio] select{min-height:30px!important;font-size:12.5px!important;border-radius:6px!important}
body[data-theme=studio] .srch input{min-height:32px!important}
body[data-theme=studio] .seg button{font-size:12px;min-height:28px}
body[data-theme=studio] #helmCtl .rcBox{padding:8px 10px;border-radius:8px}
body[data-theme=studio] #helmCtl .rcHead b{font-size:12.5px!important}
body[data-theme=studio] #helmCtl .rcChips{gap:5px;margin:6px 0}
body[data-theme=studio] #helmCtl .rcChip{padding:5px 8px;border-radius:7px}
body[data-theme=studio] #helmCtl .rcChip b{font-size:15px!important;font-weight:600}
body[data-theme=studio] #helmCtl .rcChip span{font-size:10.5px}
body[data-theme=studio] #helmCtl .rcChip::after{top:8px;right:8px;width:6px;height:6px}
body[data-theme=studio] #helmCtl .hcSeg button,body[data-theme=studio] #helmCtl .cekBtn{min-height:24px!important;font-size:11.5px!important;padding:0 9px!important}
body[data-theme=studio] .allrow{font-size:12px;padding:5px 2px}
body[data-theme=studio] .prHead{font-size:10px!important;padding:5px 10px!important;border-radius:6px 6px 0 0}
body[data-theme=studio] .ugh{font-size:10.5px;padding:8px 10px 3px}
body[data-theme=studio] .prw{padding:4px 10px;min-height:32px;border-radius:6px}
body[data-theme=studio] .prw .pt b{font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-theme=studio] .prw .pt>small{font-size:11px}
body[data-theme=studio] .pOdoo{font-size:12px!important}
body[data-theme=studio] .pill{font-size:12px!important}
body[data-theme=studio] .pill::before{width:7px;height:7px}
body[data-theme=studio] .rcBtn{font-size:11px!important;min-height:20px!important;padding:1px 8px!important}
body[data-theme=studio] .pOk{font-size:11.5px}
body[data-theme=studio] .odooBtn{padding:8px 10px;border-radius:8px}
body[data-theme=studio] .odooBtn b{font-size:12.5px}
body[data-theme=studio] .odooBtn .tiny,body[data-theme=studio] .odooBtn small{font-size:11px}
body[data-theme=studio] .odooBtn .ob{width:26px;height:26px;font-size:12px}
body[data-theme=studio] .lateAlert{padding:7px 10px;border-radius:8px}
body[data-theme=studio] .lateAlert b{font-size:12.5px}
body[data-theme=studio] .lateAlert span{font-size:11.5px}
body[data-theme=studio] .sum3{gap:6px}
body[data-theme=studio] .sum3>*{padding:6px;border-radius:8px}
body[data-theme=studio] .sum3 b,body[data-theme=studio] .sum3 input{font-size:18px!important;font-weight:600}
body[data-theme=studio] .sum3 span{font-size:10.5px}
body[data-theme=studio] .occbar{padding:8px 10px;border-radius:8px}
body[data-theme=studio] .occbar b{font-size:16px;font-weight:600}
body[data-theme=studio] .occbar span,body[data-theme=studio] .occbar small{font-size:11px}
body[data-theme=studio] .occbar i{height:4px}
body[data-theme=studio] .ctab{font-size:12px}
body[data-theme=studio] .ctab td{padding:4px 6px}
body[data-theme=studio] .ctab th{font-size:10px;padding:5px 6px}
body[data-theme=studio] .more>summary{font-size:12.5px}
body[data-theme=studio] .tiny{font-size:11px}
body[data-theme=studio] .kpi b{font-size:16px}
@media(max-width:999px){body[data-theme=studio] .pgTitle{font-size:16px}body[data-theme=studio] .panel{padding:10px}}
body[data-theme=studio] .seg:not(#cSeg) button{box-shadow:none!important}
@media(max-width:999px){body[data-theme=studio] header.top img{height:13px!important}body[data-theme=studio] header.top{min-height:44px}}

/* ---- Glass (default): logo kecil & konten padat ---- */
body.hasShell[data-theme=glass]{font-size:12.5px;line-height:1.38}
body[data-theme=glass] .snTop img{height:17px}
body[data-theme=glass] .sideNav{width:212px;padding:12px 10px}
@media(min-width:1000px){body.hasShell[data-theme=glass]{padding-left:212px}}
body[data-theme=glass] .snCo button{font-size:10.5px;padding:4px 6px}
body[data-theme=glass] .snSync button{min-height:32px;font-size:12.5px;border-radius:8px}
body[data-theme=glass] .snSync small{font-size:10.5px}
body[data-theme=glass] .snSearch{min-height:30px}
body[data-theme=glass] .snSearch input{font-size:12.5px}
body[data-theme=glass] .snItem,body[data-theme=glass] .snGroup{font-size:12.5px;min-height:30px;padding:5px 9px;gap:9px}
body[data-theme=glass] .snItem svg,body[data-theme=glass] .snGroup svg{width:15px;height:15px}
body[data-theme=glass] .snSub .snItem{font-size:12.5px}
body[data-theme=glass] .snUser b{font-size:12px}body[data-theme=glass] .snUser small{font-size:10.5px}
body[data-theme=glass] .snUser .snAv{width:30px;height:30px;font-size:13px}
body[data-theme=glass] main{padding-top:10px}
body[data-theme=glass] .pgHead{margin:0 0 8px}
body[data-theme=glass] .crumb{font-size:11px}
body[data-theme=glass] .pgTitle{font-size:18px;font-weight:650}
body[data-theme=glass] .btn,body[data-theme=glass] .pgAct .btn{min-height:30px;font-size:12.5px;padding:0 12px;border-radius:8px}
body[data-theme=glass] .hdBtn{min-height:32px!important;padding:2px 8px 2px 2px!important}
body[data-theme=glass] .hdBtn .snAv{width:26px;height:26px;font-size:12px}
body[data-theme=glass] .hdTx b{font-size:12px!important}body[data-theme=glass] .hdTx small{font-size:10px!important}
body[data-theme=glass] .coChip{font-size:11.5px;padding:3px 8px;min-height:26px}
body[data-theme=glass] .panel{padding:11px;border-radius:12px}
body[data-theme=glass] .grid2,body[data-theme=glass] .lp{gap:10px}
body[data-theme=glass] h2{font-size:13.5px}
body[data-theme=glass] .tiny{font-size:11px}
body[data-theme=glass] .shiftNow{font-size:12px;padding:6px 10px;border-radius:8px}
body[data-theme=glass] input,body[data-theme=glass] select{min-height:30px!important;font-size:12.5px!important;border-radius:7px!important}
body[data-theme=glass] .srch input{min-height:32px!important}
body[data-theme=glass] .seg button{font-size:12px;min-height:26px;padding:0 10px}
body[data-theme=glass] #helmCtl .rcBox{padding:8px 10px;border-radius:10px}
body[data-theme=glass] #helmCtl .rcHead b{font-size:12.5px!important}
body[data-theme=glass] #helmCtl .rcHead .tiny{font-size:10.5px}
body[data-theme=glass] #helmCtl .rcChips{gap:5px;margin:6px 0}
body[data-theme=glass] #helmCtl .rcChip{padding:4px 6px;border-radius:8px}
body[data-theme=glass] #helmCtl .rcChip b{font-size:14px!important}
body[data-theme=glass] #helmCtl .rcChip span{font-size:10px}
body[data-theme=glass] #helmCtl .hcSeg{gap:4px}
body[data-theme=glass] #helmCtl .hcSeg button,body[data-theme=glass] #helmCtl .cekBtn{min-height:24px!important;font-size:11.5px!important;padding:0 9px!important;border-radius:7px!important}
body[data-theme=glass] .allrow{font-size:12px;padding:4px 2px}
body[data-theme=glass] .allrow small{font-size:11px}
body[data-theme=glass] .prHead{font-size:10px!important;padding:4px 10px!important}
body[data-theme=glass] .ugh{font-size:10.5px;padding:7px 10px 2px}
body[data-theme=glass] .ugh small{font-size:10px}
body[data-theme=glass] .prw{padding:3px 10px;min-height:30px;border-radius:7px}
body[data-theme=glass] .prw .pt b{font-size:12.5px}
body[data-theme=glass] .prw .pt>small{font-size:10.5px}
body[data-theme=glass] .pOdoo{font-size:11.5px!important}
body[data-theme=glass] .pill{font-size:11px;padding:2px 8px}
body[data-theme=glass] .rcBtn{font-size:11px!important}
body[data-theme=glass] .rcPinT{font-size:10px!important}
body[data-theme=glass] .pOk{font-size:11px}
body[data-theme=glass] .prw input[type=checkbox]{width:14px;height:14px}
body[data-theme=glass] .odooBtn{padding:8px 10px;border-radius:10px}
body[data-theme=glass] .odooBtn b{font-size:12.5px}
body[data-theme=glass] .odooBtn .tiny,body[data-theme=glass] .odooBtn small{font-size:11px;line-height:1.35}
body[data-theme=glass] .odooBtn .ob{width:26px;height:26px;font-size:12px}
body[data-theme=glass] .olink{font-size:12px}
body[data-theme=glass] .lateAlert{padding:7px 10px;border-radius:9px}
body[data-theme=glass] .lateAlert b{font-size:12.5px}body[data-theme=glass] .lateAlert span{font-size:11.5px}
body[data-theme=glass] .sum3{gap:6px}
body[data-theme=glass] .sum3>*{padding:6px;border-radius:9px}
body[data-theme=glass] .sum3 b,body[data-theme=glass] .sum3 input{font-size:18px!important}
body[data-theme=glass] .sum3 span{font-size:10.5px}
body[data-theme=glass] .occbar{padding:8px 10px;border-radius:10px}
body[data-theme=glass] .occbar b{font-size:16px}
body[data-theme=glass] .occbar span,body[data-theme=glass] .occbar small{font-size:11px}
body[data-theme=glass] .occbar i{height:4px;margin-top:5px}
body[data-theme=glass] .ctab{font-size:12px}
body[data-theme=glass] .ctab td{padding:4px 6px}
body[data-theme=glass] .ctab th{font-size:10px;padding:5px 6px}
body[data-theme=glass] .more>summary{font-size:12.5px}
body[data-theme=glass] .kpi b{font-size:16px}
@media(max-width:999px){body[data-theme=glass] header.top img{height:13px!important}body[data-theme=glass] header.top{min-height:44px}body[data-theme=glass] .pgTitle{font-size:16px}body[data-theme=glass] .panel{padding:10px}}

/* ===== Bulk bar: brand glass (light) ===== */
body.hasShell .bulk{background:rgba(255,255,255,.92)!important;color:#10213F!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(6,105,247,.18);border-top:3px solid #0669F7;border-radius:14px;box-shadow:0 14px 40px rgba(6,105,247,.18),0 2px 6px rgba(16,33,63,.08);padding:9px 11px}
body.hasShell .bulk .bh{color:#10213F}
body.hasShell .bulk .bh b{color:#0669F7;font-weight:700}
body.hasShell .bulk .bh .lnk{color:#0669F7!important;font-weight:600}
body.hasShell .bulk .bb button{border-radius:8px;min-height:34px;font-size:12.5px;font-weight:700;border:1px solid transparent;box-shadow:none}
body.hasShell .bulk .bb .s-ready{background:#10B981!important;color:#fff!important}
body.hasShell .bulk .bb .s-maint{background:#FFE41D!important;color:#10213F!important}
body.hasShell .bulk .bb .s-hilang{background:#EF4444!important;color:#fff!important}
body.hasShell .bulk .bb .s-sewa{background:#fff!important;color:#0669F7!important;border-color:#0669F7!important}
body.hasShell .bulk .bb button:hover{filter:brightness(.96)}

/* ===== Stok Studio di dalam kerangka admin ===== */
body.hasShell[data-page=stok] main.wrap>.pgHead{grid-column:1/-1;margin-bottom:-4px}
body.hasShell[data-page=stok] #who{display:none!important}
body.hasShell[data-page=stok] header.top a.btn{display:none}
body.authMode.hasShell{padding-left:0!important}
body.authMode .sideNav,body.authMode .snScrim,body.authMode .snHam,body.authMode .hdUser{display:none!important}
.step.lock{border-color:rgba(6,105,247,.22);background:#F2F7FF;cursor:default}
.step.lock input{width:58px;height:38px;background:transparent;color:#0669F7;font-size:17px;pointer-events:none}
.step.lock:not(.on) input{color:#8A97AD}
.repSync.lockNote{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;background:linear-gradient(135deg,rgba(6,105,247,.07),rgba(8,201,244,.07));border:1px solid rgba(6,105,247,.2);border-left:3px solid #0669F7;border-radius:12px;padding:10px 12px;margin:8px 0 10px}
.lockNote .lnTx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.lockNote .lnTx b{color:#10213F;font-size:13px}
.lockNote .lnTx span{color:#0669F7;font-size:12.5px;font-weight:600}
.lockNote .lnTx small{color:#5B6B86;font-size:11.5px;line-height:1.4}
.lockNote .btn{white-space:nowrap;text-decoration:none}
.rkAuto{margin:6px 0 0;font-size:12px;color:#3D4F73}
.rkAuto small{color:#0669F7;font-weight:600}
body.hasShell[data-page=stok] #odooStock{display:none}
body.hasShell[data-page=stok] .odooSync{margin-top:0}
@media (max-width:640px){.lockNote .lnTx{flex-basis:100%}.lockNote .btn{width:100%;justify-content:center}}

/* ===== Muat data: kerangka abu-abu berkilau (tidak kosong / loncat) ===== */
@keyframes ngrShim{0%{background-position:-400px 0}100%{background-position:400px 0}}
body.isLoading #pList:empty{min-height:360px;border-radius:12px;background:repeating-linear-gradient(180deg,transparent 0 10px,#fff 10px 12px),linear-gradient(90deg,#EEF3FB 0,#F7FAFF 40%,#EEF3FB 80%);background-size:100% 46px,800px 100%;animation:ngrShim 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){body.isLoading #pList:empty{animation:none}}

/* ===== Performa scroll: tampilan kaca tetap, tanpa blur berat saat scroll =====
   Blur (backdrop-filter) di panel besar & latar "fixed" membuat browser menggambar ulang tiap scroll.
   Latar dipindah ke lapisan tetap sendiri, panel pakai putih transparan tanpa blur. */
body.hasShell{background:#F1F4F9!important}
body.hasShell::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 600px at 85% -10%,rgba(6,105,247,.16),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(8,201,244,.12),transparent 60%),linear-gradient(180deg,#F4F6FA,#ECEFF5);
  transform:translateZ(0)}
body.hasShell .panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.86)!important}
body.hasShell .sideNav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.78)!important}
body.hasShell .btn.ghost,body.hasShell .pgAct .btn.ghost,.hdBtn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.hasShell .btn.ghost,body.hasShell .pgAct .btn.ghost{background:rgba(255,255,255,.9)!important}
.hdBtn{background:rgba(255,255,255,.9)!important}
@media (max-width:900px){
  body.hasShell header.top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.hasShell .bnav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.96)!important}
}

/* ===== Indikator "Terhubung" live (berkedip) ===== */
.olink.ok{display:inline-flex;align-items:center;gap:7px}
.liveDot{position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:#10B981;flex-shrink:0;animation:liveBlink 1.6s ease-in-out infinite}
.liveDot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#10B981;animation:livePing 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes livePing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.liveDot,.liveDot::after{animation:none}}

/* ===== Gaya solid (tanpa kaca) — paling ringan ===== */
body.hasShell{background:#F3F5F9!important}
body.hasShell::before{display:none!important}
body.hasShell *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.hasShell .panel{background:#fff!important;border:1px solid #E6EBF2!important;box-shadow:0 1px 2px rgba(16,33,63,.04)!important}
body.hasShell .sideNav{background:#fff!important;border-right:1px solid #E6EBF2!important;box-shadow:none!important}
body.hasShell .btn.ghost,body.hasShell .pgAct .btn.ghost,.hdBtn{background:#fff!important;border:1px solid #E1E6EE!important}
.hdPop{background:#fff!important;border:1px solid #E6EBF2!important;box-shadow:0 12px 32px rgba(16,33,63,.14)!important}
body.hasShell .bulk{background:#fff!important;box-shadow:0 10px 30px rgba(16,33,63,.16)!important}
body.hasShell .toast{background:#10213F!important}
body.hasShell .rcPop{background:#10213F!important}
@media (max-width:900px){
  body.hasShell header.top{background:#0669F7!important;box-shadow:0 2px 8px rgba(6,105,247,.18)!important}
  body.hasShell .bnav{background:#fff!important;border-top:1px solid #E6EBF2!important}
}

/* ===== Pindah menu halus (tanpa kedip) ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out}
body.hasShell .sideNav{view-transition-name:ngr-side}
body.hasShell .pgHead{view-transition-name:ngr-head}
@media (max-width:900px){body.hasShell header.top{view-transition-name:ngr-top}body.hasShell .sideNav{view-transition-name:none}}
::view-transition-group(*){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ===== Animasi sinkron Odoo ===== */
.syncIc{display:inline-flex;vertical-align:-2px;line-height:0}
.syncIc svg{transform-origin:50% 50%}
body.ngrSyncing .syncIc svg{animation:ngrSpin .8s linear infinite}
@keyframes ngrSpin{to{transform:rotate(360deg)}}
#oPull .syncIc{color:#0669F7;margin-right:2px}
body.ngrSyncing #oPull,body.ngrSyncing #snSync{cursor:progress}
body.ngrSyncing #oPull{border-color:rgba(6,105,247,.45)!important;box-shadow:0 0 0 3px rgba(6,105,247,.1)}
body.ngrSyncing #oPullTxt::after{content:" · menyinkron…";color:#0669F7;font-weight:600}
.ngrBar{position:fixed;left:0;right:0;top:0;height:3px;z-index:999;pointer-events:none;opacity:0;transition:opacity .2s;overflow:hidden}
.ngrBar::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,#0669F7,#08C9F4,transparent)}
body.ngrSyncing .ngrBar{opacity:1}
body.ngrSyncing .ngrBar::before{animation:ngrBarMove 1.1s ease-in-out infinite}
@keyframes ngrBarMove{to{left:100%}}
@media (prefers-reduced-motion:reduce){body.ngrSyncing .syncIc svg,body.ngrSyncing .ngrBar::before{animation-duration:2.4s}}

/* ===== Pilih perusahaan: saklar geser (swipe) ===== */
body.hasShell .snCo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;background:#EEF2F8!important;border-radius:999px!important;padding:3px!important;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
body.hasShell .snCo .snThumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#0669F7;box-shadow:0 2px 8px rgba(6,105,247,.3);transition:transform .22s cubic-bezier(.3,.7,.2,1);z-index:0}
body.hasShell .snCo[data-on=gadget] .snThumb{transform:translateX(100%)}
body.hasShell .snCo button{position:relative;z-index:1;background:none!important;box-shadow:none!important;border-radius:999px!important;padding:6px 4px!important;font-size:12px!important;font-weight:600;text-align:center!important;color:#5A6B8C!important;transition:color .2s}
body.hasShell .snCo button[aria-pressed=true]{color:#fff!important}

/* ===== Panel operasional (Serah terima) ===== */
.ops{background:#fff;border:1px solid #E6EBF2;border-radius:14px;padding:12px 14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,33,63,.04)}
.ops:empty{display:none}
.opsHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.opsHead b{font-size:14.5px;color:#10213F}.opsHead .sp{flex:1}
.opsN{background:#DAEAFF;color:#0669F7;font-weight:700;font-size:11.5px;border-radius:999px;padding:2px 9px}
.opsG{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5A6B8C;margin:10px 0 6px}
.opsG.g-a{color:#DC2626}.opsG.g-b{color:#0669F7}
.opsC{display:flex;gap:12px;border:1px solid #E6EBF2;border-left:3px solid #0669F7;border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#fff}
.opsT{min-width:52px;text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
.opsT b{font-size:17px;color:#10213F;font-variant-numeric:tabular-nums}.opsT small{font-size:11px;color:#5A6B8C}
.opsB{flex:1;min-width:0}
.opsL1{font-size:13.5px;color:#10213F}.opsL1 b{font-weight:700}
.opsU{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.opsU span{background:#F2F6FE;border:1px solid #DAEAFF;color:#0669F7;font-weight:600;font-size:11.5px;border-radius:7px;padding:2px 7px}
.opsA{font-size:12.5px;color:#3D4F73;line-height:1.4}.opsA a{color:#0669F7}.opsA.muted,.muted{color:#8A97AD}
.opsBtn{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opsBtn .btn{min-height:32px!important;padding:5px 12px!important;font-size:12.5px!important;border-radius:9px!important;text-decoration:none;display:inline-flex;align-items:center}
.opsBtn .btn.wa{background:#16A34A!important;color:#fff!important;border:0!important}
.opsMore{display:block;margin:4px auto 0}
/* telat / lewat jadwal: berkedip merah */
.opsC.late{border-color:#E6EBF2;border-left-color:#E6EBF2;background:#FEF2F2;animation:opsLate 1.2s ease-in-out infinite}
.opsC.late .opsT b{color:#DC2626}
.opsC.late .opsT::after{content:"TELAT";display:block;margin-top:4px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:#DC2626;border-radius:5px;padding:1px 4px}
@keyframes opsLate{0%,100%{background:#FFF5F5}50%{background:#FECACA}}
@media (prefers-reduced-motion:reduce){.opsC.late{animation:none}}
@media (max-width:600px){.opsC{gap:9px;padding:9px 10px}.opsT{min-width:44px}.opsT b{font-size:15px}}
.opsPay{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:12px}
.opsPay span{color:#3D4F73;background:#F4F6FA;border-radius:7px;padding:2px 8px}
.opsPay .due{background:#FEF2F2;color:#DC2626;font-weight:700;border:1px solid #FECACA}
.opsPay .paid{background:#ECFDF5;color:#059669;font-weight:700}
.oMis{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:10px 12px;border-radius:12px;background:#FEF2F2;border:1px solid #FECACA;border-left:3px solid #DC2626;color:#7F1D1D;font-size:13px}
.oMis b{color:#B91C1C}.oMis small{font-size:12px;color:#7F1D1D}
.oMis .btn.wa,.oRes .btn.wa{align-self:flex-start;background:#16A34A!important;color:#fff!important;border:0!important;min-height:32px!important;padding:5px 12px!important;border-radius:9px!important;font-size:12.5px!important;text-decoration:none;margin-top:4px;display:inline-flex;align-items:center}

.fromOps{display:flex!important;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:flex-start!important;text-align:left!important;background:#F2F7FF;border:1px solid #DAEAFF;border-radius:12px;padding:9px 12px;font-size:13px;color:#10213F}
.fromOps .lnk{font-weight:700;color:#0669F7;text-decoration:none;margin:0!important;white-space:nowrap}
.fromOps[hidden]{display:none!important}

/* ===== Tab Daftar order: bersih, tanpa ikon ===== */
body.hasShell[data-page=tugas] .kindSeg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#EEF2F8;border-radius:14px;padding:4px}
body.hasShell[data-page=tugas] .kindSeg button{border:0!important;background:transparent!important;border-radius:11px!important;padding:10px 14px!important;box-shadow:none!important;color:#3D4F73!important;font:600 14px Inter,Rubik,sans-serif!important;text-align:left}
body.hasShell[data-page=tugas] .kindSeg button small{color:#5A6B8C!important;font-size:12px;font-weight:400;margin-top:2px;display:block}
body.hasShell[data-page=tugas] .kindSeg button[aria-pressed=true]{background:#fff!important;color:#10213F!important;box-shadow:0 1px 3px rgba(16,33,63,.1)!important}
body.hasShell[data-page=tugas] .kindSeg button[aria-pressed=true] .kT{color:#0669F7}
body.hasShell[data-page=tugas] .kindSeg button:focus:not(:focus-visible){outline:none}
.kT{display:flex;align-items:center;gap:8px}
.kN{font-style:normal;font-size:11.5px;font-weight:700;min-width:20px;text-align:center;border-radius:999px;padding:1px 7px;background:#DAEAFF;color:#0669F7}
.kN:empty{display:none}.kN.hasLate{background:#DC2626;color:#fff}
.opsA .pin{vertical-align:-2px;color:#5A6B8C;margin-right:2px}
/* tab di halaman inspeksi tanpa emoji */
body.hasShell[data-page=serah] .kindSeg button:focus:not(:focus-visible){outline:none}

/* ===== Daftar order: ditangani oleh (tim operasional / admin) ===== */
.teamSeg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.teamSeg button{border:1px solid #E1E6EE;background:#fff;border-radius:999px;padding:5px 12px;font:600 12.5px Inter,Rubik,sans-serif;color:#3D4F73;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.teamSeg button em{font-style:normal;font-size:11px;background:#EEF2F8;color:#5A6B8C;border-radius:999px;padding:0 7px;min-width:18px;text-align:center}
.teamSeg button[aria-pressed=true]{background:#0669F7;border-color:#0669F7;color:#fff}
.teamSeg button[aria-pressed=true] em{background:rgba(255,255,255,.25);color:#fff}
.opsTm{margin-top:5px}
.tmTag{display:inline-block;font-size:11.5px;font-weight:600;border-radius:7px;padding:2px 8px}
.tmTag.tOps{background:#FFF8D6;color:#10213F;border:1px solid #FFE41D}
.tmTag.tAdm{background:#F1F3F7;color:#3D4F73;border:1px solid #E1E6EE}
.opsNote{font-size:12.5px;color:#10213F;margin-top:5px}.opsNote b{color:#5A6B8C;font-weight:600}
/* pengingat siapkan antar/jemput (≤ 2 jam) */
.prepBar{display:flex;flex-direction:column;gap:2px;background:#FFF8D6;border:1px solid #FFE41D;border-radius:10px;padding:8px 12px;margin:2px 0 8px;font-size:12.5px;color:#10213F}
.prepBar b{font-size:13px}
.prepTag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:7px;padding:2px 8px;margin-right:6px;background:#10213F;color:#FFE41D}
.opsC.prep{border-left-color:#FFE41D;background:#FFFDF0;animation:opsPrep 1.6s ease-in-out infinite}
@keyframes opsPrep{0%,100%{background:#FFFDF0}50%{background:#FFF3B0}}
@media (prefers-reduced-motion:reduce){.opsC.prep{animation:none}}

/* ===== Driver & status perjalanan ===== */
.opsTools{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:2px 0 6px}
.opsTools .lnk{font-size:12.5px;font-weight:600;color:#0669F7;margin:0}
.drvPanel{background:#F7F9FC;border:1px solid #E6EBF2;border-radius:10px;padding:10px 12px;margin:0 0 8px}
.drvPanel textarea{width:100%;box-sizing:border-box;border:1px solid #E1E6EE;border-radius:8px;padding:8px;font:500 13px Inter,Rubik,sans-serif;margin:6px 0}
.noDrv{display:inline-block;background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:8px;font-size:12px;font-weight:700;padding:3px 9px;margin:0 0 6px}
.trip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #E6EBF2}
.trip .drv{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#5A6B8C}
.trip select{border:1px solid #E1E6EE;border-radius:8px;padding:5px 8px;font:600 12.5px Inter,Rubik,sans-serif;color:#10213F;background:#fff;min-width:140px}
.tSt{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:#F1F3F7;color:#5A6B8C}
.tSt.s-berangkat{background:#DAEAFF;color:#0669F7}
.tSt.s-sampai{background:#FFF8D6;color:#10213F}
.tSt.s-selesai{background:#ECFDF5;color:#059669}
.trip .btn.trip.go{background:#10213F!important;color:#fff!important;border:0!important;min-height:30px!important;padding:4px 12px!important;border-radius:8px!important;font-size:12.5px!important}
.opsC.done{opacity:.6;border-left-color:#10B981;animation:none;background:#fff}
.opsC.late.onway{animation:none;background:#FFF5F5}

/* ===== Ganti oli (GPS.id) ===== */
.oil{font-size:12.5px;border-radius:9px;padding:6px 10px;margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.oil .lnk{margin:0 0 0 auto;font-weight:700;font-size:12px}
.oil.due{background:#FEF2F2;border:1px solid #FECACA;color:#7F1D1D}.oil.due b{color:#B91C1C}
.oil.warn{background:#FFF8D6;border:1px solid #FFE41D;color:#10213F}
.oil.nolog{background:#F4F6FA;border:1px solid #E6EBF2;color:#5A6B8C}
.opsTools .oilAlert{color:#DC2626!important}
.oilRules{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;margin-bottom:6px}
.oilRules input{width:70px;border:1px solid #E1E6EE;border-radius:7px;padding:4px 6px;font:600 12.5px Inter,Rubik,sans-serif}
.oilRow{display:flex;gap:10px;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px solid #EEF2F8}
.oilRow b{min-width:96px}.oilRow span{flex:1;color:#3D4F73}.oilRow .lnk{margin:0;font-weight:700}
.oilRow.s-due b{color:#B91C1C}.oilRow.s-warn b{color:#A16207}

/* ===== Maintenance GPS.id ===== */
.gQ{width:100%;box-sizing:border-box;margin:2px 0 10px}
.remC{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:0;border:1px solid #E6EBF2;border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}
.remL{padding:14px 16px;border-right:1px solid #EEF2F7}.remR{padding:14px 16px}
@media (max-width:760px){.remC{grid-template-columns:1fr}.remL{border-right:0;border-bottom:1px solid #EEF2F7}}
.remSt{display:block;font-size:12px;font-weight:600;border-radius:4px;padding:4px 10px;background:#DAEAFF;color:#0669F7}
.remC.s-due .remSt{background:#FBE0DE;color:#C2410C}.remC.s-soon .remSt{background:#FFF6C2;color:#8A5A00}.remC.s-nolog .remSt{background:#EEF1F6;color:#3D4F73}
.remN{display:block;font-size:16px;color:#10213F;margin:10px 0}
.remP{background:#F7F9FC;border-radius:10px;padding:10px 12px;margin-bottom:10px}.remP b{display:block;font-size:16px;color:#10213F;margin:2px 0}.remP small{display:block;color:#3D4F73;font-size:12.5px}.remP .rIm{color:#5A6B8C;font-size:11.5px;letter-spacing:.02em}
.rCur{font-size:13px;color:#3D4F73}.rCur b{color:#10213F}
.rFq{font-size:13px;color:#5A6B8C;padding-bottom:10px;border-bottom:1px solid #EEF2F7;margin-bottom:10px}.rFq b{color:#10213F}
.rTl{position:relative;padding-left:18px}
.rTl:before{content:"";position:absolute;left:4px;top:8px;bottom:30px;border-left:2px dashed #C7D0DD}
.rSt{position:relative;margin:2px 0 8px}.rSt small{display:block;font-size:12.5px;color:#3D4F73;font-weight:600}.rSt b{font-size:15px;color:#10213F}
.dot{position:absolute;left:-18px;top:3px;width:10px;height:10px;border-radius:50%;background:#10213F}.dot.d2{background:#F6A04D}
.rRm{margin-left:auto}.rRm b{color:#0669F7}
.rRow{display:flex;gap:16px;flex-wrap:wrap}
.rsl{margin:0 6px;color:#5A6B8C;font-weight:400}
.remS{font-size:13px;background:#F4F6FA;border-radius:8px;padding:8px 12px;color:#3D4F73;margin:0 0 10px}.remS b{color:#10213F}
.remC.s-due .remS{background:#FEF2F2;color:#7F1D1D}.remC.s-due .remS b{color:#7F1D1D}
.roNote{font-size:12.5px;color:#3D4F73;background:#F2F7FF;border:1px solid #DAEAFF;border-radius:10px;padding:8px 12px;margin:0 0 10px}
.roNote a{color:#0669F7;font-weight:600}
.oil .lnk{text-decoration:none}
/* Maintenance: tab halaman + hubungkan kendaraan */
.pgTabs{display:flex;gap:4px;background:#EEF2F8;border-radius:12px;padding:4px;margin:0 0 2px}
.pgTabs button{flex:1;border:0;background:none;border-radius:9px;padding:9px 10px;font:600 14px Rubik,sans-serif;color:#3D4F73;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.pgTabs button[aria-selected=true]{background:#fff;color:#0669F7;box-shadow:0 1px 3px rgba(16,33,63,.12)}
.pgTabs em{font-style:normal;font-size:11.5px;background:#FBE0DE;color:#B91C1C;border-radius:999px;padding:1px 7px}
.lnkList{display:flex;flex-direction:column;gap:6px}
.lnkR{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:center;border:1px solid #E6EBF2;border-radius:12px;padding:10px 12px;background:#fff}
.lnkR.l-free{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.lnkR small{display:block;font-size:11px;color:#8A97B0;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.lnkR b{display:block;font-size:14px;color:#10213F;overflow-wrap:anywhere}.lnkR span{display:block;font-size:12.5px;color:#5A6B8C;overflow-wrap:anywhere}
.lnkR .lnkSt{display:inline-block;margin-top:3px;font-size:11.5px;font-weight:600;border-radius:4px;padding:1px 7px;background:#E6F6EC;color:#006B32}
.lnkR.l-manual .lnkSt{background:#DAEAFF;color:#0669F7}.lnkR.l-off .lnkSt{background:#FBE0DE;color:#B91C1C}.lnkR.l-none .lnkSt{background:#EEF1F6;color:#3D4F73}
.lnkR.l-off{border-color:#F3C3BF;background:#FFFBFA}
.lnkNo{color:#B91C1C!important}.l-none .lnkNo{color:#5A6B8C!important}
.lnkSel{width:100%;min-width:0;box-sizing:border-box;border:1.5px solid #D5DEEA;border-radius:10px;padding:8px 10px;font:500 13px Rubik,sans-serif;color:#10213F;background:#fff}
.lnkH2{margin-top:16px}
@media (max-width:700px){.lnkR,.lnkR.l-free{grid-template-columns:1fr 1fr}.lnkR .lnkSel{grid-column:1/-1}}
.lnkSum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 8px}
.lnkSum>div{background:#F7F9FC;border:1px solid #E6EBF2;border-radius:12px;padding:10px 12px}
.lnkSum small{display:block;font-size:12px;color:#5A6B8C;font-weight:600}.lnkSum b{display:block;font-size:22px;color:#10213F;margin:2px 0}
.lnkSum span{font-size:12.5px;color:#5A6B8C}.lnkSum i{font-style:normal;font-weight:600}.lnkSum i.ok{color:#006B32}.lnkSum i.no{color:#B91C1C}
/* reminder ganti oli di rekonsiliasi */
.oilTag{display:block;width:max-content;max-width:100%;margin-top:3px;font-size:11.5px;font-weight:600;border-radius:4px;padding:1px 7px;background:#FFF6C2;color:#8A5A00;white-space:normal}
.oilTag.due{background:#FBE0DE;color:#B91C1C}
.oilNote{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 2px;padding:8px 12px;border-radius:10px;background:#FFF8D6;color:#6B4A00;font-size:12.5px}
.oilNote.due{background:#FEF2F2;color:#7F1D1D}.oilNote b{font-weight:700}.oilNote .lnk{font-size:12.5px}
/* status perjalanan driver (3 langkah) */
.tsBox{margin:8px 0 2px;border:1px solid #E1E6EE;border-radius:12px;padding:8px;background:#F8FAFD}
.tsSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tsB{border:1.5px solid #D5DEEA;background:#fff;border-radius:9px;padding:8px 6px;font:600 12.5px Rubik,sans-serif;color:#3D4F73;cursor:pointer;line-height:1.2}
.tsB small{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:2px}
.tsB.done{background:#E7F1FB;border-color:#B9D3F6;color:#0669F7}
.tsB[aria-pressed=true]{background:#0669F7;border-color:#0669F7;color:#fff}
.tsLine{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
.tsS{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;font:600 11.5px Rubik,sans-serif;color:#8A97B0;line-height:1.2;position:relative}
.tsS:not(:last-child)::after{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:#D5DEEA}
.tsS.done:not(:last-child)::after{background:#0669F7}
.tsS i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid #D5DEEA;font-size:11px;color:#8A97B0}
.tsS.done{color:#0669F7}.tsS.done i{background:#0669F7;border-color:#0669F7;color:#fff}
.tsS.nx{color:#10213F}.tsS.nx i{border-color:#0669F7;color:#0669F7}
.tsS small{display:block;font-size:10.5px;font-weight:500;opacity:.85}
.swp{--p:0;position:relative;height:50px;margin-top:8px;border-radius:13px;background:#0669F7;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;overscroll-behavior-x:none}
.swp::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);transform-origin:left;transform:scaleX(var(--p))}
.swp.fin{background:#16A34A}
.swp .swT{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 12px 0 56px;color:#fff;font:700 14px Rubik,sans-serif;opacity:calc(1 - var(--p))}
.swp .swT i{font-style:normal;opacity:.7;margin-left:6px;letter-spacing:-2px}
.swp .swK{position:absolute;left:4px;top:4px;width:42px;height:42px;border-radius:10px;border:0;background:#fff;color:#0669F7;font-size:19px;font-weight:700;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .25s ease;display:grid;place-items:center}
.swp.fin .swK{color:#16A34A}
.jmPanel{margin:8px 0;border:1.5px solid #F1C46B;background:#FFFBEF;border-radius:14px;padding:10px 12px;font-size:13px;color:#10213F}
.jmRow{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #F3E1B5}.jmRow small{color:#3D4F73}.jmRow.late small{color:#B3261E}
.jmRow .swp{margin-top:2px}.jmMe{font-weight:600;color:#8A5300!important}
.jmLine{margin:8px 0 2px;background:#F3F8FF;border-radius:10px;padding:8px 10px;font-size:12.5px;color:#10213F;line-height:1.45}.jmLine.w{background:#FFF7E0;color:#8A5300}.jmLine small{display:block;color:#8A5300;margin-top:4px}
.stgSeg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0;background:#EEF3FA;border-radius:12px;padding:4px}
.stgSeg button{border:0;background:none;border-radius:9px;padding:8px 4px;font:600 12.5px Rubik,sans-serif;color:#3D4F73;cursor:pointer;line-height:1.25}
.stgSeg button[aria-pressed=true]{background:#fff;color:#0669F7;box-shadow:0 1px 3px rgba(16,33,63,.12)}.stgSeg i{font-style:normal;display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#DCE6F5;font-size:11.5px;margin-left:2px}
.stgSeg button[aria-pressed=true] i{background:#0669F7;color:#fff}
.hRow{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #E8EEF7;font-size:13.5px;color:#10213F;line-height:1.45}.hRow small{color:#3D4F73}.hRow .hS{color:#0669F7}
.hT{flex:none;width:44px;font:700 14px Rubik,sans-serif;color:#10213F}.hQ{width:100%;box-sizing:border-box;margin:4px 0 6px;padding:10px 12px;border:1.5px solid #D5DEEB;border-radius:11px;font:500 14px Rubik,sans-serif}
.tsUndo{display:block;margin-top:6px;font-size:12px!important;color:#8A97B0!important}
.tsInfo{font-size:12.5px;color:#3D4F73;margin-top:7px;line-height:1.5}.tsInfo b{color:#10213F}.tsInfo a{color:#0669F7;font-weight:600}.tsInfo .lnk{font-size:12.5px}
/* auto-upload Instagram Story (Stok Studio) */
.igAuto{margin-top:12px;border:1px solid #DAEAFF;background:#F5F9FF;border-radius:12px;padding:10px 12px;font-size:13px;color:#3D4F73}
.igAuto p{margin:6px 0 0;line-height:1.45}.igAuto b{color:#10213F}
.igTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.igSt{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;background:#EEF1F6;color:#3D4F73}.igSt.on{background:#0669F7;color:#fff}
.igErr{display:block;margin-top:6px;color:#B91C1C;font-weight:600}.igMsg{color:#0669F7;font-weight:600}
.igBtn{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
/* closing: penyebab selisih Di kantor vs Di sistem */
.selWhy{margin:8px 0 4px;border:1px solid #F3C3BF;background:#FFF8F7;border-radius:12px;padding:10px 12px;font-size:13px;color:#3D4F73}
.selWhy>b{color:#B91C1C}.selWhy p{margin:6px 0 0}
.selWhy ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.selWhy li{line-height:1.4}.selWhy li small{color:#5A6B8C}
.selWhy .lnk{font-size:14px;padding:0}.selWhy .lnk b{color:#10213F}
.selWhy .pl,.selWhy .mn{display:inline-block;font-weight:800;font-size:11.5px;border-radius:4px;padding:0 6px;margin-right:2px}
.selWhy .pl{background:#FFF6C2;color:#8A5A00}.selWhy .mn{background:#FBE0DE;color:#B91C1C}
/* rekonsiliasi: unit yang sudah dipesan (belum diambil) */
.ugh .bkHead{display:inline-block;margin-top:2px;font-weight:700;color:#8A5300;background:#FFF6C2;border-radius:4px;padding:1px 7px}
.prw.booked{box-shadow:inset 3px 0 0 #FFE41D}
.bkTag{display:block;width:max-content;max-width:100%;margin-top:3px;font-size:11.5px;font-weight:700;color:#8A5300!important;background:#FFF6C2;border-radius:4px;padding:1px 7px;white-space:normal}
.remX{display:block;width:max-content;max-width:100%;margin-top:5px;font-size:11.5px;font-weight:700;border-radius:4px;padding:1px 7px;background:#FBE0DE;color:#B91C1C;white-space:normal}.remX.d{background:#FFF6C2;color:#8A5300}
/* tugas ganti oli (kunci supaya tidak dobel) */
.ojS{border:1px solid #FFE41D;background:#FFFDF2}
.ojC{grid-template-columns:1fr}.ojC.ofc.none{border-left:4px solid #FFE41D}.ojC.proses{border-left:4px solid #08C9F4}.ojC.selesai,.ojC.reset{border-left:4px solid #2BB673;opacity:.85}
.ojTag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:#EEF2F8;color:#3D4F73}
.ojTag.of{background:#FFE41D;color:#10213F}.ojTag.p{background:#DFF7FD;color:#0B6B83}.ojTag.me{background:#0669F7;color:#fff}.ojTag.d{background:#E3F7EC;color:#17784A}.ojTag.r{background:#FFEBD6;color:#9A4B00}
.ojKm{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#3D4F73}.ojKm input{width:96px;padding:6px 8px;border:1px solid #C9D6EA;border-radius:8px;font:inherit}
.ojAdm{border:1px solid #FFE41D;background:#FFFDF2;border-radius:12px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#10213F}
.ojR{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-left:4px solid #2BB673;padding-left:8px}.ojR.proses{border-color:#08C9F4}.ojR.reset{border-color:#FF9F43}
.ojR .ojP{font-weight:700;min-width:92px}.ojR span:nth-child(2){flex:1}.ojR .rr{color:#9A4B00}
/* form selesai ganti oli */
.ojDlg{border:0;border-radius:16px;padding:0;width:min(560px,94vw);max-height:92vh;box-shadow:0 20px 60px rgba(16,33,63,.35)}.ojDlg::backdrop{background:rgba(16,33,63,.55)}
.ojF{display:flex;flex-direction:column;gap:10px;padding:16px;font-family:Inter,system-ui,sans-serif;color:#10213F}
.ojFH{display:flex;flex-direction:column}.ojFH b{font:700 17px Rubik,sans-serif}.ojFH span{font-size:13px;color:#3D4F73}
.ojFG{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ojFG label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:#3D4F73}.ojFG label.w{grid-column:1/-1}
.ojFG input{font:500 15px Inter,sans-serif;padding:9px 10px;border:1px solid #C9D6EA;border-radius:10px;color:#10213F}
.ojFT{margin:2px 0 0;font-size:12.5px;color:#3D4F73}.ojFT b{color:#E5394B}
.ojPh{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ojP{position:relative;aspect-ratio:1;border:2px dashed #9DB4D8;border-radius:12px;background:#F4F8FF;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;overflow:hidden}
.ojP.ok{border-style:solid;border-color:#2BB673}.ojPi{display:flex;flex-direction:column;gap:2px;padding:6px}.ojPi b{font-size:12.5px}.ojPi small{font-size:10.5px;color:#3D4F73;line-height:1.25}
.ojP img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ojP.ok::after{content:"Ganti";position:absolute;right:6px;bottom:6px;background:rgba(16,33,63,.75);color:#fff;font-size:10.5px;padding:2px 7px;border-radius:999px}
.ojFE{min-height:1em;margin:0;color:#E5394B;font-size:12.5px;font-weight:600}
.ojFB{display:flex;gap:8px;justify-content:flex-end}.ojFB .btn{min-height:44px}
.ojF *{box-sizing:border-box}.ojFG label{min-width:0}.ojFG input,.ojFG textarea{width:100%;min-width:0;font:500 15px Inter,sans-serif;padding:9px 10px;border:1px solid #C9D6EA;border-radius:10px;color:#10213F;background:#fff}.ojFG input[readonly]{background:#F1F4F9;color:#3D4F73}.ojDlg{overflow:auto}
.ojFE ul,.ojW ul{margin:4px 0 0;padding-left:18px}.ojFE li{font-weight:500}
.ojRev{display:flex;flex-direction:column;gap:10px}.ojRT{margin:0;font-size:13px;color:#3D4F73}
.ojW{background:#FFF6E0;border:1px solid #FFC94D;border-radius:10px;padding:8px 12px;font-size:12.5px;color:#7A4B00}
.ojRG{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;background:#F4F8FF;border-radius:12px;padding:10px 12px}.ojRG>div{display:flex;flex-direction:column;min-width:0}.ojRG span{font-size:11px;color:#3D4F73}.ojRG b{font-size:13.5px;overflow-wrap:anywhere}
.ojRP{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ojRP figure{margin:0}.ojRP img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.ojRP figcaption{font-size:11px;color:#3D4F73;text-align:center;margin-top:2px}
button.ojP{font:inherit;color:inherit;padding:0}.ojPi em{font-style:normal;margin-top:4px;font-size:11px;font-weight:700;color:#0669F7;background:#DAEAFF;border-radius:999px;padding:2px 8px;align-self:center}
.ojCam{position:fixed;inset:0;z-index:50;background:#0B1830;display:flex;flex-direction:column}
.ojCam video{flex:1;min-height:0;width:100%;object-fit:contain;background:#000}
.ojCamT{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#fff;font:600 15px Rubik,sans-serif}.ojCamT span{color:#FFE41D}
.ojCamE{margin:0;padding:10px 16px;background:#FFE41D;color:#10213F;font-size:13px;font-weight:600}
.ojCamB{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}.ojCamB .btn{background:rgba(255,255,255,.12);color:#fff;border:0}
.ojShot{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:#FFE41D;box-shadow:0 0 0 3px rgba(255,255,255,.25);cursor:pointer}.ojShot:active{transform:scale(.94)}
@media(max-width:640px){body.hasShell[data-page=tugas] .kindSeg{grid-template-columns:1fr 1fr}}
.exTag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-right:6px}
.exTag.ex1{background:#FFF1CC;color:#7A4B00}.exTag.ex2{background:#FFE0C2;color:#9A4B00}.exTag.ex3{background:#E5394B;color:#fff}
.kN.hasLate{background:#E5394B!important;color:#fff!important}
/* tab Eksekusi */
.exC{border-left:4px solid #E5394B}.exC.st-selesai{border-left-color:#2BB673;opacity:.8}.exC.st-ditarik{border-left-color:#0669F7}
.exTags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.exTag.st{background:#10213F;color:#fff}
.exInfo{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F4F8FF;border-radius:10px;padding:8px 10px;margin:6px 0}.exInfo>div{display:flex;flex-direction:column}.exInfo span{font-size:11px;color:#3D4F73}.exInfo b{font-size:14px}.exInfo small{font-size:11.5px;color:#3D4F73}.exInfo .r,.exInfo b.r{color:#E5394B}
.exUnits{display:flex;flex-direction:column;gap:6px;margin:6px 0}.exU{border:1px solid #DAEAFF;border-radius:10px;padding:6px 10px}.exU>b{margin-right:6px}.exU>span{font-size:12px;color:#3D4F73}.exG{font-size:12.5px;margin-top:2px}.exMv{color:#E5394B}
.exRow{margin:8px 0 4px}.exRow label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#3D4F73}.exRow select{padding:6px 8px;border:1px solid #C9D6EA;border-radius:8px;font:inherit}
.exSteps{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.exSteps button{border:1px solid #C9D6EA;background:#fff;border-radius:999px;padding:6px 12px;font:600 12.5px Inter,sans-serif;color:#3D4F73;cursor:pointer}.exSteps button.on{background:#0669F7;border-color:#0669F7;color:#fff}
.exNote{display:flex;gap:6px;margin:6px 0}.exNote input{flex:1;min-width:0;padding:8px 10px;border:1px solid #C9D6EA;border-radius:8px;font:inherit}
.exLog{font-size:12.5px;color:#3D4F73}.exLog summary{cursor:pointer;font-weight:600}.exLog ul{margin:4px 0 0;padding-left:18px}
.exTags .exTag{flex:none!important;width:auto!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:2px 10px!important;border-radius:999px!important;font-size:11.5px!important;line-height:1.5!important;margin:0!important;display:inline-flex!important;align-items:center}
/* GPS bermasalah (> 24 jam tidak terhubung) */
.oil.gps{background:#FFF1E6;border:1px solid #FFC49A;color:#7A3A00}.oil.gps b{color:#B45309}
.oilTag.gps{background:#FFE8D6;color:#9A4B00}.oilNote.gps{background:#FFF1E6;border-color:#FFC49A}
/* tab Maintenance */
.mtC.old{border-left:4px solid #E5394B}.mtTags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.mtD{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:#FFE41D;color:#10213F}.mtD.r{background:#E5394B;color:#fff}
.ojTag.r{background:#FFE0E3;color:#B91C1C}.opsN.late{background:#FFE0E3!important;color:#B91C1C!important}
.mtDmg{font-size:13px;color:#10213F;margin:2px 0}.mtGps{font-size:12.5px;margin:4px 0}.mtG.ok{color:#17784A}.mtG.bad{color:#B45309;font-weight:700}.mtG{color:#3D4F73}
.mtF{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;background:#F4F8FF;border-radius:12px;padding:10px}.mtF label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:#3D4F73;min-width:0}.mtF .w{grid-column:1/-1}
.mtF input,.mtF select{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #C9D6EA;border-radius:9px;font:500 14px Inter,sans-serif;color:#10213F;background:#fff}
.selWhy .eq{display:inline-block;font-weight:800;font-size:11.5px;border-radius:4px;padding:0 6px;margin-right:2px;background:#DAEAFF;color:#0669F7}
.selWhy .swBtn{border:0;background:#0669F7;color:#fff;border-radius:999px;padding:7px 14px;font:600 13px Rubik,sans-serif;cursor:pointer}
.selWhy .swBtn.sm{padding:3px 10px;font-size:12px;margin-left:4px;vertical-align:middle}.selWhy .swBtn:disabled{opacity:.6;cursor:default}