/* ATELIER v4 - Pengusaha Muda POS. Netral hangat, satu aksen oranye, kartu putih, garis tipis. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/vendor/fonts/pjs.woff2) format('woff2')}

html[data-theme],html:not([data-theme]){
  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --disp:var(--f);--mono:var(--f);
  --acc:#E8650A;--acc-t:rgba(232,101,10,.12);--acc-h:#CF5700;
  --r:12px;--r2:16px;--rail:84px;
  --gold:var(--acc);--gold2:var(--acc);--stamp:var(--acc);
}
html[data-theme=light]{
  --bg:#F4F2EC;--bg2:#F4F2EC;--board:#F4F2EC;--bar:#FFFFFF;--dots:transparent;
  --panel:#FFFFFF;--panel2:#F6F4EE;--card:#FFFFFF;
  --line:rgba(27,23,18,.08);--line2:rgba(27,23,18,.15);
  --txt:#1B1712;--mut:#6B6559;--dim:#8F887A;
  --paper:#FFFFFF;--paper2:#F6F4EE;--ink:#1B1712;
  --ok:#188A4C;--bad:#CC3B24;--info:#2B66B3;
  --sh:0 1px 2px rgba(27,23,18,.04),0 8px 24px rgba(27,23,18,.05);
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:#14120F;--bg2:#14120F;--board:#14120F;--bar:#1A1814;--dots:transparent;
  --panel:#1D1A16;--panel2:#26231E;--card:#1D1A16;
  --line:rgba(255,246,230,.08);--line2:rgba(255,246,230,.16);
  --txt:#F4EFE6;--mut:#B3AC9D;--dim:#847E70;
  --paper:#F4EFE6;--paper2:#26231E;--ink:#14120F;
  --ok:#4FD68A;--bad:#FF7359;--info:#7DB4FF;
  --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
html[data-theme] body{background:var(--bg);color:var(--txt);font-family:var(--f);font-feature-settings:'tnum' 1;background-image:none}
html[data-theme] *{font-family:var(--f)}
html[data-theme] .bi,html[data-theme] [class^=bi-],html[data-theme] [class*=" bi-"]{font-family:'bootstrap-icons'!important}
html[data-theme] .mono,html[data-theme] .money,html[data-theme] .stats b,html[data-theme] .clock b,html[data-theme] .caprice,html[data-theme] .tk-time b{font-family:var(--f);font-variant-numeric:tabular-nums}

/* ---- appbar ---- */
html[data-theme] .appbar{background:var(--bar);border-bottom:1px solid var(--line);box-shadow:none}
html[data-theme] .appbar .mark{background:var(--acc);color:#fff;border-radius:10px;font-weight:800;letter-spacing:-.02em;box-shadow:none}
html[data-theme] .apptitle b{font-weight:700;letter-spacing:-.01em}
html[data-theme] .iconbtn{border:1px solid var(--line);background:transparent;border-radius:10px;color:var(--txt)}

/* ---- tombol ---- */
html[data-theme] .btn{border:1px solid var(--line2);background:var(--panel);color:var(--txt);border-radius:10px;font-weight:650;box-shadow:none;letter-spacing:0}
html[data-theme] .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line2)}
html[data-theme] .btn.gold,html[data-theme] .cartbar .btn.gold{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:none;font-weight:700}
html[data-theme] .btn.gold:active{background:var(--acc-h)}
html[data-theme] .btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
html[data-theme] .card .btn:not(.gold){border:1px solid var(--line2);background:var(--panel)}
html[data-theme] .card .btn.gold{border-color:var(--acc);box-shadow:none}

/* ---- kartu ---- */
html[data-theme] .card{background:var(--card);border:1px solid var(--line)!important;border-radius:var(--r2)!important;box-shadow:var(--sh)!important;padding:18px 16px}
html[data-theme] .card h3{font:700 14px/1.2 var(--f);letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px;color:var(--txt)}
html[data-theme] .card h3 i{color:var(--acc)}
html[data-theme] .card label,html[data-theme] .card .lbl,html[data-theme] .fl{font:600 11.5px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--mut)}
html[data-theme] .item{border-bottom:1px solid var(--line)!important}
html[data-theme] .pill{border:0;border-radius:999px!important;height:22px;padding:0 9px;font:700 11px/22px var(--f);letter-spacing:0;text-transform:none;background:var(--panel2)!important;color:var(--mut)}
html[data-theme] .pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent)!important;color:var(--ok)}
html[data-theme] .pill.bad,html[data-theme] .pill.warn{background:color-mix(in srgb,var(--bad) 14%,transparent)!important;color:var(--bad)}

/* ---- input ---- */
html[data-theme] input,html[data-theme] select,html[data-theme] textarea,
html[data-theme] .card input,html[data-theme] .card select,html[data-theme] .cafilter input,html[data-theme] .cafilter select{
  background-color:var(--panel);color:var(--txt);border:1px solid var(--line2);border-radius:10px;font-weight:500}
html[data-theme] input:focus,html[data-theme] select:focus,html[data-theme] textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-t)}
html[data-theme] input::placeholder{color:var(--dim)}

/* ---- shift & statistik ---- */
html[data-theme] .shiftbar{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0;gap:0;overflow:hidden}
html[data-theme] .shiftbar .pick{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0}
html[data-theme] .shiftbar .pick small{font:600 10.5px/1 var(--f);letter-spacing:0;text-transform:none;color:var(--dim)}
html[data-theme] .shiftchip,html[data-theme] .shiftchip.open{background:transparent;border:0;color:var(--txt);border-radius:0}
html[data-theme] .shiftchip b{color:var(--txt)}
html[data-theme] .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:transparent;border:0;margin-top:12px}
html[data-theme] .stats>div{background:var(--panel);border:1px solid var(--line)!important;border-radius:14px;padding:11px 12px;min-width:0}
html[data-theme] .stats small{font:600 11px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--dim)}
html[data-theme] .stats b{font:700 clamp(12px,3.4vw,16px)/1.2 var(--f);letter-spacing:-.01em;margin-top:4px;word-spacing:0;color:var(--txt)}
html[data-theme] .stats>div:last-child b{color:var(--acc)}

/* ---- segmen & judul ---- */
html[data-theme] .seg{display:inline-flex;width:100%;background:var(--panel2);border:0;border-radius:12px;padding:4px;margin:16px 0 6px;gap:4px;max-width:none}
html[data-theme] .seg button{flex:1;height:40px;border-radius:9px!important;border:0;background:transparent;color:var(--mut);font:650 13.5px/1 var(--f);box-shadow:none;letter-spacing:0}
html[data-theme] .seg button i{display:inline-block;margin-right:6px}
html[data-theme] .seg button.on{background:var(--panel);color:var(--txt);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line);font-weight:700}
html[data-theme] .seg button.on::after{display:none}
html[data-theme] .panehead{margin:16px 2px 10px}
html[data-theme] .panehead h2{font:750 20px/1.1 var(--f);letter-spacing:-.02em;text-transform:none;color:var(--txt)}
html[data-theme] .panehead .count{font:500 12.5px/1 var(--f);color:var(--dim)}

/* ---- cafe: pencarian, kategori, ubin ---- */
html[data-theme] .searchbox input{height:44px;border-radius:12px;background:var(--panel);padding-left:36px}
html[data-theme] .catchips{gap:8px;padding:2px 0 4px}
html[data-theme] .catchips button{height:34px;padding:0 14px;margin:0;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--mut);font:600 13px/1 var(--f);border-bottom:1px solid var(--line)}
html[data-theme] .catchips button.on{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-theme] .cagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0}
html[data-theme] .catile{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:10px;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:none}
html[data-theme] .catile.has{background:var(--panel);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);padding:10px}
html[data-theme] .cahit{display:flex;flex-direction:column;gap:8px;text-align:left;background:transparent;border:0;padding:0;color:inherit;width:100%}
html[data-theme] .camono{display:grid;place-items:center;width:100%;aspect-ratio:16/10;border-radius:12px;font:800 24px/1 var(--f);letter-spacing:.02em;
  background:hsl(var(--h) 55% 92%);color:hsl(var(--h) 45% 32%)}
html[data-theme=dark] .camono{background:hsl(var(--h) 25% 20%);color:hsl(var(--h) 60% 78%)}
html[data-theme] .catile .caname{font:650 14px/1.3 var(--f);-webkit-line-clamp:2;color:var(--txt)}
html[data-theme] .catile .caprice{font:700 13.5px/1 var(--f);color:var(--acc);word-spacing:0}
html[data-theme] .caqty{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
html[data-theme] .catile .add,html[data-theme] .catile .caqty .add{height:36px;min-width:36px;padding:0 14px;border-radius:10px;background:var(--acc-t)!important;color:var(--acc)!important;border:0!important;font:700 13px/1 var(--f);margin-left:auto}
html[data-theme] .catile.has .add{background:var(--acc)!important;color:#fff!important}
html[data-theme] .caqty .step{display:flex;align-items:center;gap:4px;background:var(--panel2);border:0;border-radius:10px;height:36px;padding:0 2px}
html[data-theme] .caqty .step button{width:32px;height:32px;border:0;background:transparent;color:var(--txt)}
html[data-theme] .caqty .step b{min-width:20px;text-align:center;font-weight:750}
html[data-theme] .caempty{color:var(--dim)}

/* ---- bar total (HP) ---- */
html[data-theme] .cartbar{background:var(--txt);color:var(--bg);border:0;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.28);-webkit-mask:none;mask:none;padding:8px 8px 8px 16px}
html[data-theme] .cartsum small{font:600 11px/1 var(--f);color:color-mix(in srgb,var(--bg) 60%,transparent);text-transform:none;letter-spacing:0}
html[data-theme] .cartsum b{color:var(--bg);font:750 18px/1.2 var(--f);word-spacing:0}
html[data-theme] .cartbar .btn.ghost{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 35%,transparent)}
html[data-theme] .cartbar .btn.gold{height:44px;border-radius:12px;padding:0 20px}

/* ---- bill & lampiran ---- */
html[data-theme] .billchip{background:var(--panel);border:1px solid var(--line2);border-radius:12px;color:var(--txt)}
html[data-theme] .billchip.on{border-color:var(--acc);background:var(--acc-t)}
html[data-theme] .attachbar,html[data-theme] .curbill{background:var(--acc-t);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:12px;color:var(--txt)}

/* ---- unit PS ---- */
html[data-theme] .pstile{background:var(--panel);border:1px solid var(--line)!important;border-radius:var(--r2);box-shadow:none!important;color:var(--txt);-webkit-mask:none;mask:none}
html[data-theme] .pstile::before,html[data-theme] .pstile::after,html[data-theme] .tk-foot::before,html[data-theme] .tk-foot::after{display:none!important}
html[data-theme] .pstile.busy{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent),var(--sh)!important}
html[data-theme] .tk-code,html[data-theme] .pstile .code{font:800 22px/1 var(--f);letter-spacing:-.02em;color:var(--txt)}
html[data-theme] .tk-code small,html[data-theme] .pstile.busy .tk-code small,html[data-theme] .pstile .meta{font:600 11.5px/1 var(--f);color:var(--dim);letter-spacing:0;text-transform:none}
html[data-theme] .tk-state{font:700 11.5px/1 var(--f);letter-spacing:0;text-transform:none;border:0;border-radius:999px;padding:6px 10px;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
html[data-theme] .tk-state.over{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
html[data-theme] .tk-time b{font:800 40px/1 var(--f);letter-spacing:-.03em;word-spacing:0;color:var(--txt)}
html[data-theme] .tk-time span,html[data-theme] .tk-meta{color:var(--mut);font-size:12.5px}
html[data-theme] .tk-meta b{color:var(--txt)}
html[data-theme] .tk-bar,html[data-theme] .pstile.busy .tk-bar{background:var(--panel2);height:6px;border-radius:99px;overflow:hidden}
html[data-theme] .tk-bar i{background:var(--acc);border-radius:99px}
html[data-theme] .tk-bar.over i{background:var(--bad)}
html[data-theme] .tk-foot{border-top:1px solid var(--line);background:transparent}
html[data-theme] .pstile.busy .tk-foot .btn:not(.gold),html[data-theme] .tk-foot .btn.ghost{background:var(--panel2)!important;color:var(--txt)!important;border:0!important}
html[data-theme] .pstile.free{background:var(--panel)}
html[data-theme] .pstile.free .rate{color:var(--acc);font-weight:700}
html[data-theme] .pstile.free .go,html[data-theme] .pstile.free .btn{background:var(--acc-t);color:var(--acc);border:0;border-radius:10px;font:700 13px/1 var(--f)}

/* ---- sheet ---- */
html[data-theme] .sheet{background:var(--panel);border:0;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
@media(min-width:600px){html[data-theme] .sheet{border-radius:20px}}

/* ---- panel pesanan (tersembunyi di HP) ---- */
.capanel{display:none}

/* ---- tab bawah HP ---- */
html[data-theme] .tabbar{background:var(--bar);border-top:1px solid var(--line);box-shadow:none}
html[data-theme] .tabbar button{font:650 11px/1 var(--f);color:var(--dim)}
html[data-theme] .tabbar button.on{color:var(--acc)}
html[data-theme] .tabbar button.on i{color:var(--acc)}
html[data-theme] .tabbar button.on::before{background:var(--acc);height:3px;width:28px}

/* ---- tablet & desktop: rail kiri ---- */
@media(min-width:768px){
  html[data-theme] .tabbar{position:fixed;left:0;top:0;bottom:0;right:auto;width:var(--rail);height:auto;flex-direction:column;justify-content:flex-start;gap:6px;padding:78px 8px 12px;border-top:0;border-right:1px solid var(--line);z-index:30}
  html[data-theme] .tabbar button{flex:none;width:100%;height:68px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
  html[data-theme] .tabbar button i{font-size:21px}
  html[data-theme] .tabbar button.on{background:var(--acc-t)}
  html[data-theme] .tabbar button.on::before{display:none}
  html[data-theme] .appbar{padding-left:calc(var(--rail) + 16px)}
  html[data-theme] .appbar .mark{position:fixed;left:18px;top:14px;width:48px;height:48px;font-size:17px;border-radius:14px;z-index:40}
  html[data-theme] .wrap{margin:0 0 0 var(--rail);max-width:none;padding:0 24px 40px}
  html[data-theme] .cartbar{left:calc(50% + var(--rail)/2)}
  html[data-theme] .cagrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* desktop: menu | pesanan */
@media(min-width:1100px){
  html[data-theme] #pane-cafe.on{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:24px;align-items:start}
  html[data-theme] #pane-cafe>*{grid-column:1}
  html[data-theme] #pane-cafe>.capanel{grid-column:2;grid-row:1/span 12;position:sticky;top:76px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);max-height:calc(100vh - 100px);margin-top:16px}
  html[data-theme] .cagrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-theme] .cartbar{display:none!important}
  html[data-theme] .wrap{padding-bottom:40px!important}
  .cph{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 12px;border-bottom:1px solid var(--line)}
  .cph b{font:750 17px/1 var(--f);letter-spacing:-.01em}.cph span{font-size:12.5px;color:var(--dim)}
  .cpl{flex:1;overflow:auto;padding:6px 18px;min-height:120px}
  .cpr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
  .cpn b{display:block;font:650 14px/1.3 var(--f)}.cpn small{color:var(--dim);font-size:12px}
  .cps{display:flex;align-items:center;gap:2px;background:var(--panel2);border-radius:10px;height:34px;grid-row:1;grid-column:2}
  .cps button{width:32px;height:34px;border:0;background:transparent;color:var(--txt);font-size:15px}
  .cps b{min-width:22px;text-align:center;font-weight:750;font-size:14px}
  .cpx{grid-column:1/-1;text-align:right;font:700 13px/1 var(--f);color:var(--mut)}
  .cpe{text-align:center;color:var(--dim);font-size:13px;line-height:1.6;padding:40px 10px}
  .cpe i{display:block;font-size:30px;margin-bottom:8px;opacity:.6}
  .cpt{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-top:1px dashed var(--line2)}
  .cpt span{color:var(--mut);font-weight:600;font-size:13.5px}.cpt b{font:800 24px/1 var(--f);letter-spacing:-.02em}
  .cpb{display:flex;gap:8px;padding:0 18px 18px}
  .cpb .btn{height:50px;border-radius:14px;font-size:15px}.cpb .btn.gold{flex:1}
}
@media(min-width:1500px){html[data-theme] .cagrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* fix tombol Tambah + segmen + tinggi */
html[data-theme] .caqty .add,html[data-theme] .catile .caqty .add{flex:1 1 auto;width:auto;height:38px;min-height:38px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 14px;font-size:13px;white-space:nowrap;overflow:visible}
html[data-theme] .catile.has .caqty .add{flex:none;width:38px;padding:0;font-size:18px}
html[data-theme] .caqty{min-height:38px}
html[data-theme] .seg{background:var(--panel2);border:1px solid var(--line)}
html[data-theme] .seg button:not(.on){background:transparent;color:var(--mut);border:0!important}
html[data-theme] .seg button.on{background:var(--acc);color:#fff;box-shadow:none}
html[data-theme] .wrap{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
html[data-theme] .cagrid{padding-bottom:24px}
html[data-theme] .dimtxt,html[data-theme] .shiftchip small{color:var(--mut)}
@media(min-width:1100px){html[data-theme] .wrap{padding-bottom:40px}}

/* ===== v4b: Laporan, Master, Pengguna, header ===== */
html[data-theme] *{word-spacing:normal}
html[data-theme] .clock b,html[data-theme] .tk-time b{word-spacing:normal;letter-spacing:-.01em}
html[data-theme] .clock b{font:700 15px/1 var(--f)}
html[data-theme] .clock small{font:600 11px/1 var(--f);letter-spacing:0;color:var(--mut);margin-top:4px}
html[data-theme] .apptitle small,html[data-theme] .appbar small{font-size:12px;color:var(--mut)}
html[data-theme] .iconbtn{width:44px;height:44px}
html[data-theme] .tabs{padding-top:4px}
html[data-theme] .tabs>.card{margin:0 0 14px}
html[data-theme] .card h3{display:flex;align-items:center;gap:10px;font-size:15px}
html[data-theme] .card h3 i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--acc-t);color:var(--acc);font-size:15px}
html[data-theme] .card label{display:block;margin:12px 0 6px}
html[data-theme] .card .hint{display:block;margin-top:6px;font-size:12px;color:var(--dim)}
html[data-theme] .card .muted,html[data-theme] .muted{color:var(--mut)}

/* select dengan panah */
html[data-theme] select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238F887A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
html[data-theme] input,html[data-theme] select{min-height:44px;padding-left:12px}
html[data-theme] .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
html[data-theme] .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html[data-theme] .row2 label{margin-top:0}
@media(max-width:420px){html[data-theme] .row2{grid-template-columns:1fr}}

/* tombol aksi kartu */
html[data-theme] .card .btn{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
html[data-theme] .btn.sm{min-height:36px;padding:0 12px}
html[data-theme] #lb-export{background:transparent;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent)}

/* tambah item = tombol outline penuh */
html[data-theme] .addbox{margin-top:14px;border-top:0;padding-top:0}
html[data-theme] .addbox summary{min-height:44px;justify-content:center;border:1px dashed var(--line2);border-radius:12px;color:var(--acc);font:700 13.5px/1 var(--f);letter-spacing:0;text-transform:none;background:transparent}
html[data-theme] .addbox summary:hover{background:var(--acc-t);border-color:var(--acc)}
html[data-theme] .addbox[open] summary{margin-bottom:12px;background:var(--acc-t);border-style:solid;border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
html[data-theme] .addbox .btn:not(.ghost):not(.danger){background:var(--acc);border-color:var(--acc);color:#fff}

/* daftar baris */
html[data-theme] .item{padding:13px 0;border-bottom:1px solid var(--line)!important}
html[data-theme] .item:last-child{border-bottom:0!important}
html[data-theme] .item .g>div:first-child{font-size:14px;font-weight:650}
html[data-theme] .item .g .muted{font-size:12.5px}
html[data-theme] .item .money,html[data-theme] .item .mono{font-weight:700;color:var(--txt)}

/* empty state */
html[data-theme] .card .muted[style*="font-size:12.5px"],html[data-theme] #lb-out .muted,html[data-theme] .card>.muted{display:block;text-align:center;padding:22px 12px;border-radius:12px;background:var(--panel2);color:var(--mut);font-size:13px!important}

/* desktop: kartu berkolom, form tidak melebar */
@media(min-width:900px){
  html[data-theme] .tabs{max-width:1180px}
  html[data-theme] #tab-master.on,html[data-theme] #tab-master[style*="block"]{columns:2;column-gap:16px}
  html[data-theme] #tab-master>.card{break-inside:avoid}
  html[data-theme] #tab-users.on,html[data-theme] #tab-users[style*="block"]{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
  html[data-theme] #tab-users>.card:first-child{grid-row:1/span 2}
  html[data-theme] #tab-users>.card{margin:0}
  html[data-theme] #tab-laporan .row{max-width:560px}
}

/* v4c */
html[data-theme] #us-add,html[data-theme] #us-reset-go,html[data-theme] .tabs .card>div>.btn.gold{width:100%}
html[data-theme] .apptitle{min-width:0}
html[data-theme] .apptitle b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:480px){html[data-theme] .appbar .iconbtn{width:40px;height:40px}}

/* v4d: laporan */
html[data-theme] .rkpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
@media(min-width:900px){html[data-theme] .rkpi{grid-template-columns:1.4fr 1fr 1fr 1fr}}
html[data-theme] .rkpi .k{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;box-shadow:var(--sh);min-width:0}
html[data-theme] .rkpi .k.main{background:var(--acc);border-color:var(--acc);color:#fff;grid-column:1/-1}
@media(min-width:900px){html[data-theme] .rkpi .k.main{grid-column:auto}}
html[data-theme] .rkpi small{display:block;font:600 12px/1 var(--f);color:var(--mut);letter-spacing:0;text-transform:none}
html[data-theme] .rkpi .k.main small,html[data-theme] .rkpi .k.main span{color:rgba(255,255,255,.85)}
html[data-theme] .rkpi b{display:block;margin:8px 0 6px;font:750 22px/1.1 var(--f);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html[data-theme] .rkpi .k.main b{font-size:28px}
html[data-theme] .rkpi span{font-size:12px;color:var(--dim)}
html[data-theme] .rchart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:170px;align-items:end;margin-top:6px}
html[data-theme] .rbar{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
html[data-theme] .rcol{width:100%;max-width:44px;flex:1;display:flex;align-items:flex-end;background:var(--panel2);border-radius:8px;overflow:hidden}
html[data-theme] .rcol i{display:block;width:100%;background:color-mix(in srgb,var(--acc) 30%,var(--panel2));position:relative;min-height:2px;border-radius:6px 6px 0 0}
html[data-theme] .rcol u{position:absolute;left:0;right:0;bottom:0;background:var(--acc);text-decoration:none;border-radius:0}
html[data-theme] .rbar.cur .rd{color:var(--acc);font-weight:700}
html[data-theme] .rv{font:600 10.5px/1 var(--f);color:var(--mut);height:12px}
html[data-theme] .rd{font:600 11.5px/1 var(--f);color:var(--mut)}
html[data-theme] .rleg{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--mut)}
html[data-theme] .rleg .lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
html[data-theme] .rleg .lg.ps{background:var(--acc)}html[data-theme] .rleg .lg.cf{background:color-mix(in srgb,var(--acc) 30%,var(--panel2))}
html[data-theme] .rsplit{height:8px;border-radius:99px;background:color-mix(in srgb,var(--acc) 30%,var(--panel2));margin:10px 0 4px;overflow:hidden}
html[data-theme] .rsplit i{display:block;height:100%;background:var(--acc)}
html[data-theme] .rpay{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;padding:7px 0;font-size:13.5px}
html[data-theme] .rpay div{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden}
html[data-theme] .rpay div i{display:block;height:100%;background:var(--acc)}
html[data-theme] .rk{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:7px;background:var(--acc-t);color:var(--acc);font:700 11.5px/1 var(--f);font-style:normal}
html[data-theme] .rkpi span,html[data-theme] .rkpi .k:not(.main) span{color:var(--mut)}html[data-theme] .rpay div,html[data-theme] .rsplit{box-shadow:inset 0 0 0 1px var(--line2)}
html[data-theme] .rkpi .k:last-child:nth-child(even){grid-column:1/-1}
@media(min-width:900px){html[data-theme] .rkpi .k:last-child:nth-child(even){grid-column:auto}}
html[data-theme=dark] .rcol i,html[data-theme=dark] .rleg .lg.cf{background:color-mix(in srgb,var(--acc) 45%,var(--panel2))}
html[data-theme=dark] .rcol u,html[data-theme=dark] .rleg .lg.ps{background:var(--acc)}

/* v4e: foto menu */
html[data-theme] .caimg{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--panel2)}
html[data-theme] .mthumb{flex:none;width:52px;height:40px;border-radius:9px;object-fit:cover;display:grid;place-items:center;background:var(--panel2)}
html[data-theme] .mthumb.mono0{font:800 14px/1 var(--f);background:hsl(var(--h) 55% 90%);color:hsl(var(--h) 55% 28%)}
html[data-theme=dark] .mthumb.mono0{background:hsl(var(--h) 25% 20%);color:hsl(var(--h) 60% 78%)}
html[data-theme] .item{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html[data-theme] .item .g{flex:1;min-width:0}
html[data-theme] .photorow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
html[data-theme] .photorow .hint{margin:0}
html[data-theme] .item .edit{flex:1 1 100%}
html[data-theme=light] .catile .caqty .add{color:#9A5F00}html[data-theme=light] .rk{color:#9A5F00}

/* v4f: responsive PS + lebar konten */
html[data-theme] .psgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;align-items:stretch}
html[data-theme] .psgrid>.muted{grid-column:1/-1}
html[data-theme] .emptyst{grid-column:1/-1;max-width:640px;width:100%;margin:8px auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:48px 20px;background:var(--panel);border:1px dashed var(--line2);border-radius:var(--r2)}
html[data-theme] .emptyst i{font-size:34px;color:var(--acc)}
html[data-theme] .emptyst b{font:700 16px/1.3 var(--f)}
html[data-theme] .emptyst span{color:var(--mut);font-size:13.5px;max-width:34ch}
html[data-theme] .emptyst .btn{margin-top:8px}
html[data-theme] .seg{display:flex;width:100%;max-width:420px}
html[data-theme] .seg button{flex:1}
@media(min-width:900px){
  html[data-theme] .tabs,html[data-theme] #tab-kasir{max-width:1680px}
  html[data-theme] .shiftbar{max-width:none}
}
@media(min-width:1100px){
  html[data-theme] #tab-kasir.on{display:block}
  html[data-theme] .psgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(min-width:1700px){html[data-theme] #tab-laporan,html[data-theme] #tab-master,html[data-theme] #tab-users{max-width:1480px}}

/* v4g: grid unit PS + panel pesanan penuh tinggi */
html[data-theme] #ps-list{display:flex!important;flex-direction:column;gap:18px}
html[data-theme] .psbusy{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important;gap:12px;transform:none}
html[data-theme] .psbusy .pstile.busy{transform:none!important}
html[data-theme] .psfree{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))!important;gap:10px}
html[data-theme] .psbusy:not(:empty)+.psfree::before{content:"Tersedia";grid-column:1/-1;font:700 12px/1 var(--f);color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
html[data-theme] .psfree .pstile.free{min-height:0}
html[data-theme] .psfree .pstile.free .go,html[data-theme] .psfree .pstile.free .btn{color:#9A5F00;min-height:42px}
html[data-theme=dark] .psfree .pstile.free .go,html[data-theme=dark] .psfree .pstile.free .btn{color:#FFB27A}
html[data-theme] .tk-code small,html[data-theme] .pstile .meta{color:var(--mut)}
html[data-theme] .panehead h2{display:none}
html[data-theme] .panehead{justify-content:flex-end;min-height:0;margin:0 0 6px}
@media(min-width:1100px){
  html[data-theme] #pane-cafe>.capanel{max-height:none;height:calc(100vh - 100px);top:76px}
  html[data-theme] .cpl{min-height:0}
  html[data-theme] .cpl:empty::before{content:"Belum ada pesanan. Pilih menu di kiri.";display:block;padding:40px 8px;text-align:center;color:var(--dim);font-size:13.5px}
}
@media(min-width:1100px){html[data-theme] #pane-cafe>.capanel{height:max(460px,calc(100vh - 272px))}}

/* ===== v5: perbaikan kontras kartu aktif + polesan ===== */
html[data-theme] .pstile.busy{background:var(--panel);color:var(--txt);padding:0}
html[data-theme] .pstile.busy .tk-code{font:800 26px/1 var(--f);color:var(--txt);letter-spacing:-.02em}
html[data-theme] .pstile.busy .tk-code small{display:inline;margin:0 0 0 8px;font:600 12px/1 var(--f);letter-spacing:0;text-transform:none;color:var(--mut)}
html[data-theme] .pstile.busy .tk-time b{font:800 44px/1 var(--f);letter-spacing:-.03em;color:var(--txt)}
html[data-theme] .pstile.busy .tk-time span{color:var(--mut)}
html[data-theme] .pstile.busy .tk-meta{color:var(--mut);font-size:13px;margin-top:0}
html[data-theme] .pstile.busy .tk-meta b{color:var(--txt);font-size:14px;font-weight:700}
html[data-theme] .pstile.busy .tk-head{padding:14px 16px 0}
html[data-theme] .pstile.busy .tk-time{padding:10px 16px 0}
html[data-theme] .pstile.busy .tk-bar{margin:12px 16px 0}
html[data-theme] .pstile.busy .tk-meta{padding:10px 16px 0}
html[data-theme] .pstile.busy .tk-foot{margin-top:14px;padding:12px 16px 16px;gap:8px;border-top:1px solid var(--line)}
html[data-theme] .pstile.busy .tk-foot .btn.gold{background:var(--acc);color:#fff;border:0;box-shadow:none;min-height:46px;border-radius:12px;font-weight:750}
html[data-theme] .pstile.busy .tk-foot .btn.gold b{font-weight:800}
html[data-theme] .pstile.busy .tk-foot .btn.ghost{min-height:46px;min-width:46px;border-radius:12px}
html[data-theme] .tk-state i{background:currentColor}
html[data-theme] .tk-state{min-height:0}
html[data-theme] .pstile.free .code{font:800 20px/1 var(--f);color:var(--txt)}
html[data-theme] .pstile.free .go,html[data-theme] .pstile.free .btn{min-height:44px}
/* gelap: tombol aksen putih di atas oranye tetap terbaca */
html[data-theme] .btn.gold,html[data-theme] .cartbar .btn.gold{background:var(--acc-h);border-color:var(--acc-h)}
html[data-theme=dark] .btn.gold,html[data-theme=dark] .cartbar .btn.gold{background:var(--acc);border-color:var(--acc);color:#1B0E02}
html[data-theme=dark] .pstile.busy .tk-foot .btn.gold{color:#1B0E02}
html[data-theme=dark] .seg button.on,html[data-theme=dark] .catchips button.on{color:#1B0E02}
html[data-theme=dark] .catile.has .add{color:#1B0E02!important}

/* v5b: status, progress, tombol, bar total */
html[data-theme] .pstile.busy .tk-state{transform:none;border:0!important;border-radius:999px!important;padding:6px 10px;font:700 12px/1 var(--f);letter-spacing:0;text-transform:none;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
html[data-theme] .pstile.busy .tk-state i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;animation:blink 1.4s infinite}
html[data-theme] .pstile.busy .tk-state.over{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
html[data-theme] .pstile.busy .tk-bar{height:8px;border-radius:99px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden}
html[data-theme] .pstile.busy .tk-bar i{background:var(--acc);border-radius:99px}
html[data-theme] .pstile.busy .tk-bar.over i{background:var(--bad)}
html[data-theme] .pstile.busy .tk-foot .btn.ghost{background:var(--panel2)!important;color:var(--txt)!important;box-shadow:inset 0 0 0 1px var(--line2)}
html[data-theme] .pstile.busy .tk-foot .btn.ghost i{font-size:18px;opacity:1}
html[data-theme] .psfree .pstile.free .go,html[data-theme] .psfree .pstile.free .btn{background:var(--acc-t);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent);font-size:14px}
html[data-theme] .pstile.free .rate{font-size:15px}
html[data-theme] .pstile.free .meta{font-size:12.5px;color:var(--mut)}
html[data-theme=dark] .cartbar{background:var(--panel2);color:var(--txt);border:1px solid var(--line2);box-shadow:0 14px 34px rgba(0,0,0,.5)}
html[data-theme=dark] .cartsum small{color:var(--mut)}
html[data-theme=dark] .cartsum b{color:var(--txt)}
html[data-theme=dark] .cartbar .btn.ghost{color:var(--txt);border-color:var(--line2)}
html[data-theme] .stats b{font-size:clamp(13px,3.6vw,16px)}
html[data-theme] .stats>div{padding:12px 12px}
html[data-theme] .stats small,html[data-theme] .shiftbar .pick small,html[data-theme] .tabbar button{color:var(--mut)}
html[data-theme] .tabbar button.on{color:var(--acc)}
html[data-theme] .tabbar button{font-size:11.5px}
html[data-theme] .btn.sm,html[data-theme] .catile .caqty .step button{min-height:40px}
html[data-theme] .caqty .step button{width:38px;height:38px}
/* v5c: ruang scroll di bawah supaya baris terakhir tidak tertutup bar */
@media (max-width:900px){html[data-theme] main,html[data-theme] #app .content,html[data-theme] .tab{padding-bottom:calc(150px + env(safe-area-inset-bottom))}}

/* v6: ringkasan kas satu strip + grid unit PS menyatu di desktop */
html[data-theme] .stats{gap:0!important;background:var(--panel)!important;border:1px solid var(--line2)!important;border-radius:14px!important;overflow:hidden;margin-top:10px}
html[data-theme] .stats>div{background:transparent!important;border:0!important;border-radius:0!important;padding:9px 12px!important;min-width:0;box-shadow:none!important}
html[data-theme] .stats>div+div{border-left:1px solid var(--line)!important}
html[data-theme] .stats small{display:block;font-size:11px;letter-spacing:0;text-transform:none;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme] .stats b{font-size:clamp(12px,3.4vw,15px);white-space:nowrap}
@media(min-width:768px){
  html[data-theme] #ps-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:stretch}
  html[data-theme] #ps-list .psbusy,html[data-theme] #ps-list .psfree{display:contents!important}
  html[data-theme] .psbusy:not(:empty)+.psfree::before{display:none}
  html[data-theme] #ps-list .pstile.free{min-height:0}
  html[data-theme] .stats{max-width:none!important}
}
html[data-theme] #ps-list .pstile.free{display:flex;flex-direction:column;justify-content:center;gap:10px}
/* v6b: kas 2x2 di HP supaya angka jutaan tidak terpotong */
@media(max-width:600px){
  html[data-theme] .stats{display:grid!important;grid-template-columns:1fr 1fr}
  html[data-theme] .stats>div:nth-child(odd){border-left:0!important}
  html[data-theme] .stats>div:nth-child(n+3){border-top:1px solid var(--line)!important}
  html[data-theme] .stats b{font-size:15px}
}

/* v7: login + form pengaturan */
html[data-theme] #li-go{width:100%;min-height:50px;font-size:16px;justify-content:center}
html[data-theme] #li-form label{color:var(--txt);font-weight:600;font-size:13px;margin-top:4px;display:block}
html[data-theme] #li-form input{min-height:48px}
html[data-theme] .loginfoot{color:var(--mut)!important;font-size:12px;letter-spacing:.04em;text-align:center;margin-top:18px}
html[data-theme] .loginwrap h1{font-size:clamp(26px,6vw,34px);letter-spacing:-.02em}
@media(min-width:768px){html[data-theme] .loginwrap{width:min(440px,92vw)}
  html[data-theme] #li-form{padding:26px;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}}
html[data-theme] #set-card .row{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:12px}
html[data-theme] #set-card label{color:var(--txt);font-weight:600;font-size:13px}
html[data-theme] #set-card input,html[data-theme] #set-card textarea{width:100%;min-height:46px}
html[data-theme] #st-save{width:100%;justify-content:center;min-height:48px}
@media(min-width:768px){html[data-theme] #set-card{max-width:560px}html[data-theme] #st-save{width:auto}}
html[data-theme] .msg:empty{display:none}
html[data-theme] .loginfoot,html[data-theme] .lockup small{color:var(--sub,#a9a39a)!important}
html[data-theme] #set-card textarea{resize:none}
/* v8: form edit inline */
html[data-theme] .item .edit .danger-sm{color:#ff7b72;border-color:rgba(255,123,114,.35);order:9;flex:1 1 100%}
html[data-theme] .item .edit label.fl{min-width:0}
html[data-theme] .item.editing>.btn[data-uedit],html[data-theme] .item.editing>.btn[data-redit],html[data-theme] .item.editing>.btn[data-pedit]{background:var(--acc-soft,rgba(255,122,26,.16));color:var(--acc,#ff7a1a)}
/* v8b: kontras terang + tombol edit */
html[data-theme=light] .item .edit input{border:1px solid #b9b2a6;background:#fff;color:#1b1b1b}
html[data-theme=light] .item .edit label.fl{color:#4a463f;font-weight:600;font-size:12px}
html[data-theme=light] .item .muted{color:#5c574f}
html[data-theme] .item .edit .btn[data-cancel]{flex:1 1 40%}
html[data-theme] .item .edit .btn.gold{flex:1 1 55%}
@media(min-width:768px){html[data-theme] .item .edit .btn{flex:0 1 auto;min-width:130px}html[data-theme] .item .edit .danger-sm{flex:0 1 auto;margin-left:auto}}
html[data-theme] #set-card input[type=number]{max-width:220px}
@media(min-width:768px){html[data-theme] .item .edit .btn.gold,html[data-theme] .item .edit .btn[data-cancel]{flex:0 0 auto;min-width:110px}}
/* v9: admin */
html[data-theme] .item .edit select{width:100%;min-height:46px}
html[data-theme] #cu-q{width:100%;min-height:46px}
html[data-theme] .tabbar button{min-width:0;padding-inline:2px}
html[data-theme] .tabbar button i{font-size:19px}