/* Kabar Baik, kontrol dapur.
   Tampilan mengikuti Olsera supaya staf yang sudah terbiasa dengan kasirnya tidak perlu belajar ulang:
   bar atas biru, sidebar putih, kartu putih bersudut bulat dengan bayangan lembut, font Nunito,
   tombol aksi hijau. Warna diambil langsung dari screenshot Olsera (5 Okt 2026).

   Dua penyesuaian demi keterbacaan di dapur yang terang:
   - hijau tombol digelapkan sedikit (#6EBE46 jadi #358618) supaya teks putihnya kontras 4,5:1
   - abu teks kecil memakai #5F6673 (5,8:1), bukan abu muda
   Tampilan ini sengaja satu tema terang saja, seperti Olsera. */

:root{
  --blue:#0482DC;--blue-d:#0078CE;--blue-bg:#E6F3FC;--sky:#6FCFEE;
  --green:#358618;--green-h:#2B6F13;--green-l:#6EBE46;--green-bg:#EAF6E4;
  --ink:#272727;--ink2:#414141;--ink3:#5F6673;
  --line:#DCDFE6;--line2:#EBEEF2;--soft:#F5F7FA;--sunk:#EEF2F6;
  --ok:#2E7D32;--ok-bg:#E8F5E9;--warn:#8A5A00;--warn-bg:#FFF3D6;--crit:#C62828;--crit-bg:#FDE7E7;
  --red:#F44336;--dim:#C5D3E0;
  --shadow:0 2px 12px rgba(20,40,70,.09);--shadow-l:0 6px 24px rgba(20,40,70,.16);
  /* nama lama dipertahankan karena dipakai di grafik dan gaya inline */
  --accent:var(--blue-d);--accent-soft:var(--blue-bg);--on-accent:#fff;--surface:#fff;--ground:#fff;
  --f-ui:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --side:264px;--bar:64px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
html{color-scheme:light;scroll-padding-top:80px}
body{background:#fff;color:var(--ink);font:15px/1.55 var(--f-ui);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
h2{font:800 23px/1.25 var(--f-ui);text-wrap:balance}
h3{font:700 16px/1.35 var(--f-ui)}
img{max-width:100%}
.num,.mono{font-variant-numeric:tabular-nums}
.num{font-weight:800;letter-spacing:-.01em}
.eyebrow{font:700 12.5px/1.3 var(--f-ui);letter-spacing:.02em;color:var(--ink3)}
.muted{color:var(--ink3)}.small{font-size:13px}
:focus-visible{outline:3px solid rgba(4,130,220,.45);outline-offset:2px}

/* ---------- rangka: sidebar, bar atas, isi ---------- */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);background:#fff;border-right:1px solid var(--line2);
  display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.userbox{position:relative;margin:0 0 6px;padding:14px 14px 14px 16px;color:#fff;
  background:linear-gradient(90deg,#0482DC,#0078CE);border-radius:0 0 22px 0;min-height:var(--bar);
  display:flex;align-items:center;gap:12px;cursor:pointer;border:0;width:100%;text-align:left}
.avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.28);display:grid;place-items:center;
  font:800 17px/1 var(--f-ui);flex:none}
.userbox b{display:block;font-weight:800;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox small{display:block;font-size:12.5px;opacity:.92}
.userbox .who{min-width:0;flex:1}
.userbox .ico{width:20px;height:20px;flex:none}
.usermenu{margin:0 14px 6px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff;overflow:hidden}
.usermenu button{display:flex;gap:10px;align-items:center;width:100%;padding:12px 14px;border:0;background:#fff;cursor:pointer;
  font-weight:700;color:var(--crit);min-height:44px}
.usermenu button:hover{background:var(--crit-bg)}
.menu{display:flex;flex-direction:column;gap:2px;padding:6px 12px 12px}
.menu button{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:10px 12px;border:0;border-radius:12px;
  background:transparent;color:var(--ink);font-weight:600;font-size:15.5px;cursor:pointer;text-align:left}
.menu button .ico{width:23px;height:23px;flex:none;color:var(--ink2)}
.menu button:hover{background:var(--soft)}
.menu button[aria-selected="true"]{background:var(--blue-bg);color:var(--blue-d);font-weight:800}
.menu button[aria-selected="true"] .ico{color:var(--blue-d)}
.menu .lencana{margin-left:auto}
.side-foot{margin-top:auto;padding:12px 14px 16px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}

.topbar{position:fixed;top:0;right:0;left:var(--side);height:var(--bar);z-index:40;color:#fff;
  background:linear-gradient(90deg,#0482DC,#027ED7);display:flex;align-items:center;gap:12px;padding:0 20px 0 18px}
.topbar h1{font:800 22px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar .grow{flex:1}
.iconbtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#fff;
  border-radius:50%;cursor:pointer;flex:none}
.iconbtn:hover{background:rgba(255,255,255,.16)}
.iconbtn .ico{width:24px;height:24px}
.badge{position:absolute;top:2px;right:0;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;
  font:800 11.5px/20px var(--f-ui);text-align:center;border:2px solid #0482DC;box-sizing:content-box}
.toppil{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:0;
  background:rgba(255,255,255,.18);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
.toppil:hover{background:rgba(255,255,255,.28)}
.toppil .ico{width:20px;height:20px}
.storepill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);
  font-weight:800;white-space:nowrap}
.storepill .ico{width:20px;height:20px;color:var(--blue-d)}
.dot{width:9px;height:9px;border-radius:50%;background:#FFC857;flex:none}
.dot.live{background:#7BE06A}
.only-m{display:none}

.main{margin-left:var(--side);padding-top:var(--bar);min-height:100vh}
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:26px 28px 96px}
/* pita biru muda di belakang judul halaman, kartu pertama menimpa tepinya seperti di Olsera */
.wrap::before{content:"";position:absolute;left:28px;right:28px;top:24px;height:176px;background:var(--sky);
  border-radius:20px;z-index:0}
.wrap > *{position:relative;z-index:1}
.stack{display:flex;flex-direction:column;gap:22px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.grow{flex:1}
.wrap > .stack > div:first-child:not(.panel):not(.hd):not(.hero){padding:10px 24px 34px}
.wrap > .stack > div:first-child:not(.panel) h2{color:#0B2E45}
.wrap > .stack > div:first-child:not(.panel) .eyebrow{color:#0B3B57}
.wrap > .stack > div:first-child:not(.panel) .muted{color:#12405C}
.scrim{display:none}

/* ---------- komponen ---------- */
.panel{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.panel.flat{background:transparent;box-shadow:none;border:0}
.hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.src{font:400 12.5px/1.5 var(--f-ui);color:var(--ink3);margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 18px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-weight:700;cursor:pointer;text-decoration:none;color:var(--blue-d)}
.btn:hover{border-color:var(--blue);background:var(--blue-bg)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-h);border-color:var(--green-h)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.quiet:hover{background:var(--soft);border-color:var(--line)}
.btn.small{padding:6px 14px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.big{min-height:60px;font-size:16px;width:100%;padding:12px 16px;justify-content:center;text-align:center;color:var(--ink);
  border-radius:14px;box-shadow:var(--shadow);border-color:var(--line2)}
.btn.big > span{display:block;width:100%}
.btn.big small,.btn.big .small{color:var(--ink3);font-weight:500}
.btn.big:hover{background:var(--blue-bg)}
.btn.ask{width:100%;color:var(--blue-d);border-color:var(--blue);font-weight:800}
.seg{display:inline-flex;border:1px solid var(--blue);border-radius:999px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:8px 18px;min-height:44px;font-weight:700;cursor:pointer;color:var(--blue-d)}
.seg button+button{border-left:1px solid var(--blue)}
.seg button[aria-pressed="true"]{background:var(--blue-d);color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;min-height:44px;font-size:14px;font-weight:600;
  cursor:pointer;text-align:left;color:var(--ink)}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.tag{display:inline-block;padding:2px 11px;border-radius:999px;font:700 12.5px/1.6 var(--f-ui);background:var(--sunk);color:var(--ink2);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.crit{background:var(--crit-bg);color:var(--crit)}.tag.acc{background:var(--blue-bg);color:var(--blue-d)}
.tbl-w{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font:700 13px/1.3 var(--f-ui);color:var(--ink2);text-align:left;padding:10px 12px;background:var(--soft);white-space:nowrap}
th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
td.r,th.r{text-align:right}
tbody tr:hover{background:#F7FBFE}
tr.sel{background:var(--blue-bg)}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lab{font:700 13.5px/1.3 var(--f-ui);color:var(--ink2)}
input,select,textarea{min-height:46px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%}
input[type=file]{padding:9px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:3px solid rgba(4,130,220,.2);outline-offset:0}
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.big-n{font-size:68px;line-height:.95}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:18px;color:var(--ink3);background:var(--soft);text-align:center}
.flag{background:var(--crit-bg);color:var(--crit);padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700}
.okbox{background:var(--ok-bg);color:var(--ok);padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700}
.infobox{background:var(--warn-bg);color:var(--warn);padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2);align-items:flex-start}
.list li:last-child{border-bottom:0}
.bar-l{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:14px;padding:5px 0}
.bar-t{height:10px;background:var(--sunk);border-radius:999px;overflow:hidden}
.bar-t i{display:block;height:100%;background:var(--blue);border-radius:999px}
svg text{font-family:var(--f-ui);fill:var(--ink3);font-size:11px}
#tip{position:fixed;z-index:80;pointer-events:none;background:#1F2A37;color:#fff;padding:7px 11px;border-radius:8px;font-size:12.5px;max-width:260px;display:none}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}
.thumb{width:100%;max-height:190px;object-fit:cover;border-radius:12px;margin-top:6px;display:block}
.saldo{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;font-size:13px}
.saldo div{background:var(--soft);border-radius:10px;padding:8px 10px}
.saldo div b{display:block;font:800 19px/1.2 var(--f-ui);font-variant-numeric:tabular-nums}
.jamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(24px,1fr));gap:4px;align-items:end;height:96px}
.jamgrid i{display:block;background:var(--dim);border-radius:5px 5px 0 0;min-height:3px}
.jamgrid i.pk{background:var(--blue)}
.jamlab{display:grid;grid-template-columns:repeat(auto-fit,minmax(24px,1fr));gap:4px;font:600 10.5px/1.4 var(--f-ui);color:var(--ink3);text-align:center;margin-top:3px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:90;background:#1F2A37;color:#fff;
  padding:12px 18px;border-radius:12px;font-size:14.5px;font-weight:600;max-width:min(440px,calc(100% - 28px));box-shadow:var(--shadow-l);text-align:center}
.toast.bad{background:var(--crit)}
.skel{height:14px;border-radius:7px;background:var(--sunk);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}*{scroll-behavior:auto !important}}

/* foto: kamera dan galeri */
.fotobtn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fotobtn .btn{padding-inline:10px;font-size:14.5px}
.fotoprev{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;text-align:center}
.fotoprev .thumb{margin:0;max-width:100%}

/* layar masuk */
body.anon .side,body.anon .topbar .iconbtn,body.anon .bottomnav,body.anon #top-search,body.anon .storepill{display:none}
body.anon .topbar{left:0}
body.anon .main{margin-left:0}
body.anon .wrap::before{left:0;right:0;top:0;height:240px;border-radius:0}
.login{max-width:410px;margin:40px auto 0;gap:16px;text-align:center;background:#fff;border-radius:20px;padding:28px 24px;
  box-shadow:var(--shadow-l);border:1px solid var(--line2)}
.login .stack{text-align:center}
.pin{text-align:center;font:800 30px/1 var(--f-ui);letter-spacing:.5em;padding-left:.5em;min-height:60px}
.pin::placeholder{letter-spacing:.3em;color:var(--ink3)}

/* cari menu */
.carbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,230px);gap:14px;align-items:end}
.hasil{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:12px}
.hasil button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;text-align:left;width:100%;min-height:60px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.hasil button:hover{border-color:var(--blue);background:#F7FBFE}
.hasil button[aria-pressed="true"]{background:var(--blue-bg);border-color:var(--blue)}
.hasil b{font-weight:800}
.hasil .sub{grid-column:1;font-size:13px;color:var(--ink3)}
.hasil .ang{grid-row:1 / span 2;grid-column:2;align-self:center;text-align:right;font:800 20px/1.1 var(--f-ui);font-variant-numeric:tabular-nums}
.hasil .ang small{display:block;font:600 11.5px/1.3 var(--f-ui);color:var(--ink3)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px}
.kpi > div{border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--soft)}
.kpi .num{font-size:27px;line-height:1.1;display:block;margin-top:4px}
.kpi small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3)}
.ins li{align-items:flex-start}
.ins .tag{margin-top:1px;flex:none}

/* ---------- chat ---------- */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:45;
  width:56px;height:56px;padding:0;border-radius:50%;box-shadow:var(--shadow-l)}
.fab span{display:none}.fab svg{width:24px;height:24px}
#chat{position:fixed;z-index:70;right:0;top:0;bottom:0;width:min(410px,100%);background:#fff;border-left:1px solid var(--line2);display:none;
  flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:-6px 0 28px rgba(20,40,70,.18)}
#chat.open{display:flex}
.ch-h{padding:14px 16px;background:linear-gradient(90deg,#0482DC,#0078CE);color:#fff;display:flex;gap:10px;align-items:center;justify-content:space-between}
.ch-h .small{color:#E6F3FC}
.ch-h .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.ch-h .btn:hover{background:rgba(255,255,255,.28)}
.ch-b{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--soft)}
.msg{max-width:92%;padding:11px 14px;border-radius:14px;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:var(--blue-d);color:#fff;border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:#fff;box-shadow:var(--shadow);border-bottom-left-radius:4px}
.ch-f{padding:12px 16px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px;background:#fff}
.ch-f form{display:flex;gap:8px}
#ch-in{flex:1;min-width:0}
.ch-att{flex:none;padding-inline:11px;min-width:46px}
.ch-imgprev{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.ch-imgprev img{width:38px;height:38px;object-fit:cover;border-radius:8px;flex:none}
.ch-imgprev span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg img{max-width:100%;border-radius:10px;display:block;margin-bottom:6px}
dialog{border:0;border-radius:18px;background:#fff;color:var(--ink);padding:24px;width:min(540px,calc(100% - 28px));box-shadow:var(--shadow-l)}
dialog::backdrop{background:rgba(15,30,50,.5)}

/* ---------- layar Team: kolom sempit di tengah ---------- */
.phone{max-width:480px;margin-inline:auto}
.phone > div:first-child{text-align:center}
.phone .empty{text-align:center}
.phone .flag,.phone .okbox,.phone .infobox{text-align:center}
.phone .src{text-align:center}
.phone .panel > h3,.phone .panel > .hd{text-align:center;justify-content:center}

/* ---------- bar bawah (HP) ---------- */
.bottomnav{display:none}

/* tablet */
@media (max-width:1100px){
  .hero,.split{grid-template-columns:minmax(0,1fr)}
  .big-n{font-size:56px}
}

/* HP dan tablet kecil: sidebar jadi laci, menu utama pindah ke bar bawah */
@media (max-width:900px){
  .only-m{display:grid}
  .side{transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-l)}
  body.laci .side{transform:none}
  body.laci .scrim{display:block;position:fixed;inset:0;background:rgba(15,30,50,.45);z-index:45}
  .topbar{left:0;padding:0 10px 0 6px;gap:6px}
  .topbar h1{font-size:19px}
  .main{margin-left:0}
  .toppil .teks,.storepill .teks{display:none}
  .toppil,.storepill{padding:0 12px}
  .wrap{padding:18px 16px 110px}
  .wrap::before{left:16px;right:16px;top:16px;height:150px}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:42;background:#fff;border-top:1px solid var(--line2);
    box-shadow:0 -4px 16px rgba(20,40,70,.08);padding-bottom:env(safe-area-inset-bottom,0px)}
  .bottomnav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:6px 2px;
    border:0;background:transparent;color:var(--ink3);font:700 11.5px/1.2 var(--f-ui);cursor:pointer}
  .bottomnav button .ico{width:24px;height:24px}
  .bottomnav button[aria-selected="true"]{color:var(--blue-d)}
  .bottomnav button[aria-selected="true"]::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;background:var(--blue-d)}
  #chat{width:100%}
}

@media (min-width:901px){
  .fab{display:none}
}

@media (max-width:640px){
  .storepill{display:none}
  body{font-size:15px}
  h2{font-size:21px}
  .panel{padding:16px;border-radius:14px}
  .stack{gap:16px}
  .wrap > .stack > div:first-child:not(.panel):not(.hd):not(.hero){padding:8px 10px 28px;text-align:center}
  .wrap .hd,.wrap .panel > h2,.wrap .panel > h3{text-align:center}
  .hd{justify-content:center;flex-direction:column;align-items:center;gap:8px}
  .hd .seg{width:100%}.hd .seg button{flex:1}
  .hd .chips{justify-content:center}
  .src{text-align:center}
  .carbar{grid-template-columns:minmax(0,1fr)}
  .hasil{grid-template-columns:minmax(0,1fr)}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row > .field{flex:1 1 100% !important}
  .phone .row > .field{flex:1 1 calc(50% - 8px) !important}
  .list li{flex-wrap:wrap}
  .list li > div[style*="flex:1"]{flex:1 1 calc(100% - 80px) !important;min-width:0}
  .list li > .btn,.list li > .chips{width:100%;margin-left:0}
  .list li > .chips .btn{flex:1}
  .bar-l{grid-template-columns:84px 1fr auto}
  .login{margin-top:20px;padding:24px 18px}

  /* tabel jadi kartu: tiap baris satu kartu, nama kolom jadi label */
  .tbl-w{overflow:visible}
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{border:1px solid var(--line2);border-radius:14px;margin-bottom:10px;padding:4px 14px;background:#fff;box-shadow:var(--shadow)}
  table.rt tbody tr:hover{background:#fff}
  table.rt td{position:relative;padding:7px 0 7px 46%;min-height:32px;border:0;text-align:left}
  table.rt td.r{text-align:left}
  table.rt td[data-l]::before{content:attr(data-l);position:absolute;left:0;top:8px;width:42%;font:700 12.5px/1.3 var(--f-ui);color:var(--ink3)}
  table.rt td[data-kosong]{display:none}
  table.rt td:first-child{padding-left:0;font-weight:800;border-bottom:1px solid var(--line2);margin-bottom:2px}
  table.rt td:first-child::before{display:none}
  table.rt td:not([data-l]){padding-left:0}
  table.rt td[data-l=""]{padding-left:0}
}

@media (max-width:380px){
  .big-n{font-size:46px}
  .kpi{grid-template-columns:minmax(0,1fr)}
  .fotobtn{grid-template-columns:minmax(0,1fr)}
  .bottomnav button{font-size:10.5px}
}

/* tabel konfirmasi nota */
.nrow{border:1px solid var(--line2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.nrow.kurang{border-color:#E8B4B4;background:#FFFAFA}
.nrow .nhead{display:flex;justify-content:space-between;align-items:center}
.row3{display:grid;grid-template-columns:.85fr 1fr 1.3fr;gap:10px}
.cek{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-weight:700;line-height:1.4}
.cek input{width:24px;height:24px;min-height:0;flex:none;margin-top:1px;accent-color:var(--green)}
.cek:has(input:checked){border-color:var(--green);background:var(--green-bg)}
dialog.lebar{width:min(920px,calc(100% - 28px))}
@media (max-width:380px){.row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.row3 > .field:last-child{grid-column:1 / -1}}