/* PAKJEK LOUNGE - rental PS & cafe.
   Netral hangat grafit. Tombol utama monokrom (putih tulang / hitam). Amber LED hanya untuk yang sedang berjalan
   (timer, status aktif, tab terpilih); merah hanya untuk lewat waktu. Sudut kecil, garis rambut, tanpa bayangan dan gradien.
   Angka (timer, uang) selalu JetBrains Mono tabular. Judul dan kode unit Bricolage Grotesque. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/vendor/fonts/BricolageGrotesque-500-800.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/vendor/fonts/JetBrainsMono-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/vendor/fonts/JetBrainsMono-700.woff2) format('woff2')}

html[data-theme],html:not([data-theme]){
  --disp:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:6px;--r2:8px;
}
html[data-theme=dark]{
  --bg:#0D0C0B;--bg2:#0D0C0B;--board:#0D0C0B;--bar:#11100E;
  --panel:#161513;--panel2:#1E1C19;--card:#161513;
  --line:rgba(241,236,226,.08);--line2:rgba(241,236,226,.15);
  --txt:#F1ECE2;--mut:#B2AB9F;--dim:#8C857A;
  --acc:#F1ECE2;--acc-h:#FFFFFF;--on-acc:#121110;
  --led:#FFB01F;--led-t:rgba(255,176,31,.12);--acc-t:rgba(255,176,31,.12);--acc-txt:#FFB01F;
  --ok:#7ED69A;--bad:#FF5A45;--warn:#FFB01F;--info:#8DB8F2;
  --paper:#161513;--paper2:#1E1C19;--ink:#F1ECE2;
  --sh:none;
}
html[data-theme=light]{
  --bg:#F1EFEA;--bg2:#F1EFEA;--board:#F1EFEA;--bar:#FFFFFF;
  --panel:#FFFFFF;--panel2:#F6F4EF;--card:#FFFFFF;
  --line:rgba(22,20,15,.09);--line2:rgba(22,20,15,.18);
  --txt:#16140F;--mut:#5E584E;--dim:#7E776B;
  --acc:#16140F;--acc-h:#000000;--on-acc:#F6F3EC;
  --led:#E08F00;--led-t:rgba(224,143,0,.12);--acc-t:rgba(224,143,0,.12);--acc-txt:#9A5F00;
  --ok:#1F7A3E;--bad:#D23A22;--warn:#A86400;--info:#2A62C9;
  --paper:#FFFFFF;--paper2:#F6F4EF;--ink:#16140F;
  --sh:none;
}
html[data-theme] body{background:var(--bg);color:var(--txt)}
html[data-theme] .mono,html[data-theme] .money,html[data-theme] .stats b,html[data-theme] .caprice,html[data-theme] .tk-time b,html[data-theme] .cartsum b,html[data-theme] .rkpi b{font-family:var(--mono)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- appbar + brand ---------- */
html[data-theme] .appbar{background:var(--bar);border-bottom:1px solid var(--line);box-shadow:none}
html[data-theme] .appbar .mark,html[data-theme] .lockup .mark{background:var(--led);color:#121110;border-radius:4px;font:800 15px/1 var(--disp);letter-spacing:-.04em;box-shadow:none;border:0}
html[data-theme] .apptitle b{font:800 17px/1 var(--disp)!important;letter-spacing:.02em!important;text-transform:uppercase!important}
html[data-theme] .apptitle small{font:500 11px/1.3 var(--f)!important;color:var(--mut)!important;letter-spacing:0!important;text-transform:capitalize}
html[data-theme] .clock b{font:700 15px/1 var(--mono)!important;color:var(--txt)}
html[data-theme] .clock small{font:500 9.5px/1 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
html[data-theme] .iconbtn{border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--mut)}

/* ---------- login ---------- */
html[data-theme] #scr-login,html[data-theme] #scr-setup{background:var(--bg)}
html[data-theme] #scr-login .lockup b{font:800 26px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
html[data-theme] #scr-login .lockup small{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
html[data-theme] #scr-login h1{font:800 34px/1.02 var(--disp);letter-spacing:-.03em}
html[data-theme] #scr-login .loginfoot{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
html[data-theme] #scr-login .card,html[data-theme] #scr-setup .card{border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);box-shadow:none}

/* ---------- tombol ---------- */
html[data-theme] .btn{border-radius:var(--r);box-shadow:none!important;font-weight:700;letter-spacing:0}
html[data-theme] .btn.gold,html[data-theme] .cartbar .btn.gold,html[data-theme] .card .btn.gold,html[data-theme] #scr-app .tabs .card>div>.btn.gold,html[data-theme] #us-add,html[data-theme] #us-reset-go,html[data-theme] .addbox .btn:not(.ghost):not(.danger){background:var(--acc)!important;color:var(--on-acc)!important;border:1px solid var(--acc)!important}
html[data-theme] .btn.gold:active{background:var(--acc-h)!important}
html[data-theme] .btn.ghost,html[data-theme] .card .btn:not(.gold){background:transparent;border:1px solid var(--line2);color:var(--txt)}
html[data-theme] .btn.danger{background:transparent;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}

/* ---------- kartu + form ---------- */
html[data-theme] #scr-app .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:none}
html[data-theme] #scr-app .card h3{font:700 15px/1.2 var(--disp);letter-spacing:-.01em;color:var(--txt)}
html[data-theme] #scr-app .card h3 i{color:var(--acc-txt)}
html[data-theme] #scr-app .card label,html[data-theme] #scr-app .fl{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea,html[data-theme] #scr-app .card input,html[data-theme] #scr-app .card select{border-radius:var(--r);background:var(--panel2);border:1px solid var(--line);color:var(--txt);box-shadow:none}
html[data-theme] input:focus,html[data-theme] select:focus,html[data-theme] textarea:focus{border-color:var(--led);outline:2px solid var(--led-t);outline-offset:0}
html[data-theme] .pill{border-radius:3px;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
html[data-theme] .pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:transparent}
html[data-theme] .pill.bad,html[data-theme] .pill.warn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:transparent}
html[data-theme] .item{border-color:var(--line)}

/* ---------- konteks shift + statistik ---------- */
html[data-theme] .shiftbar .pick,html[data-theme] .shiftchip,html[data-theme] .shiftchip.open{border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);box-shadow:none}
html[data-theme] .shiftbar .pick small,html[data-theme] .stats small,html[data-theme] .cartsum small{font:600 10px/1 var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--dim)!important}
html[data-theme] .shiftchip b{font:700 14px/1.2 var(--disp)}
html[data-theme] .stats{background:transparent;border:0;gap:1px;border-radius:var(--r2);overflow:hidden}
html[data-theme] .stats>div{background:var(--panel);border:1px solid var(--line);border-radius:0}
html[data-theme] .stats>div:first-child{border-radius:var(--r2) 0 0 var(--r2)}
html[data-theme] .stats>div:last-child{border-radius:0 var(--r2) var(--r2) 0}
html[data-theme] .stats>div:last-child b{color:var(--txt)}

/* ---------- segmen PS / cafe ---------- */
html[data-theme] .seg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:3px}
html[data-theme] .seg button{border-radius:var(--r);font:700 13px/1 var(--disp);color:var(--mut)}
html[data-theme] .seg button.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--led)}
html[data-theme] .seg button.on::after{display:none}
html[data-theme] .seg button.on i{color:var(--acc-txt)}
html[data-theme] .panehead h2{font:800 20px/1 var(--disp)!important;letter-spacing:-.02em}
html[data-theme] .panehead .count{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

/* ---------- unit PS: papan skor ---------- */
html[data-theme] #scr-app .pstile{border-radius:var(--r2);box-shadow:none;background-image:none}
html[data-theme] #scr-app .pstile::before,html[data-theme] #scr-app .pstile::after,html[data-theme] #scr-app .tk-foot::before,html[data-theme] #scr-app .tk-foot::after{display:none}
html[data-theme] #scr-app .pstile.busy{background:var(--panel);border:1px solid var(--line2);color:var(--txt);position:relative;overflow:hidden}
html[data-theme] #scr-app .pstile.busy::before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--led)}
html[data-theme] #scr-app .pstile.busy:has(.tk-state.over)::before{background:var(--bad)}
html[data-theme] #scr-app .pstile.busy:has(.tk-state.over){border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
html[data-theme] #scr-app .pstile.busy .tk-head{border:0;background:transparent}
html[data-theme] #scr-app .pstile.busy .tk-code{font:800 34px/.9 var(--disp)!important;letter-spacing:-.04em!important;color:var(--txt)!important}
html[data-theme] #scr-app .pstile.busy .tk-code small{display:block;margin:6px 0 0;font:700 10px/1 var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)!important}
html[data-theme] #scr-app .tk-state{border-radius:3px;background:var(--led-t);color:var(--acc-txt);border:1px solid color-mix(in srgb,var(--led) 45%,transparent);font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}
html[data-theme] #scr-app .tk-state i{background:var(--led);box-shadow:none;animation:pj-led 1.6s steps(2,start) infinite}
html[data-theme] #scr-app .tk-state.over{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
html[data-theme] #scr-app .tk-state.over i{background:var(--bad)}
@keyframes pj-led{50%{opacity:.25}}
html[data-theme] #scr-app .pstile.busy .tk-time b{font:700 48px/1 var(--mono)!important;letter-spacing:-.04em!important;color:var(--txt)!important}
html[data-theme] #scr-app .pstile.busy:has(.tk-state.over) .tk-time b{color:var(--bad)!important}
html[data-theme] #scr-app .pstile.busy .tk-time span{font:500 11.5px/1.3 var(--mono);color:var(--mut)!important;letter-spacing:0}
html[data-theme] #scr-app .tk-bar,html[data-theme] #scr-app .pstile.busy .tk-bar{height:3px;border-radius:0;background:var(--line2)}
html[data-theme] #scr-app .tk-bar i{background:var(--led);border-radius:0}
html[data-theme] #scr-app .tk-bar.over i{background:var(--bad)}
html[data-theme] #scr-app .pstile.busy .tk-meta{color:var(--mut)!important;font-size:12.5px}
html[data-theme] #scr-app .pstile.busy .tk-meta b{color:var(--txt)!important}
html[data-theme] #scr-app .tk-foot{border-top:1px solid var(--line)!important;background:transparent}
html[data-theme] #scr-app .pstile.busy .tk-foot .btn:not(.gold),html[data-theme] #scr-app .tk-foot .btn.ghost{background:transparent!important;border:1px solid var(--line2)!important;color:var(--txt)!important}
html[data-theme] #scr-app .tk-foot .btn.gold b{font-family:var(--mono)}

html[data-theme] #scr-app .pstile.free,html[data-theme] #scr-app .psfree .pstile.free{background:transparent;border:1px dashed var(--line2);color:var(--txt)}
html[data-theme] #scr-app .pstile.free .code{font:800 26px/1 var(--disp);letter-spacing:-.03em;color:var(--txt)}
html[data-theme] #scr-app .pstile.free .meta{font:600 10px/1.2 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)!important}
html[data-theme] #scr-app .pstile.free .rate{font:600 12px/1 var(--mono);color:var(--mut)}
html[data-theme] #scr-app .psfree .pstile.free .go,html[data-theme] #scr-app .psfree .pstile.free .btn,html[data-theme] #scr-app .pstile.free .go{background:transparent!important;color:var(--txt)!important;border:1px solid var(--line2)!important;border-radius:var(--r);font:700 13px/1 var(--disp);box-shadow:none}
html[data-theme] #scr-app .psfree .pstile.free .go:active{background:var(--acc)!important;color:var(--on-acc)!important}
html[data-theme] #scr-app .psbusy:not(:empty)+.psfree::before{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:none}

/* ---------- menu cafe ---------- */
html[data-theme] #scr-app .catchips button{border-radius:3px;font:600 12px/1 var(--f);border:1px solid var(--line);background:transparent;color:var(--mut)}
html[data-theme] #scr-app .catchips button.on{background:var(--txt);color:var(--bg);border-color:var(--txt)}
html[data-theme] #scr-app .catile{border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);box-shadow:none}
html[data-theme] #scr-app .catile.has{border-color:var(--led);box-shadow:inset 0 0 0 1px var(--led)}
html[data-theme] #scr-app .camono,html[data-theme=dark] #scr-app .camono{background:var(--panel2)!important;color:var(--dim)!important;border-radius:var(--r);font:800 22px/1 var(--disp)!important;letter-spacing:-.04em;border:0}
html[data-theme] #scr-app .catile .caname{font:600 13.5px/1.25 var(--f);color:var(--txt)}
html[data-theme] #scr-app .catile .caprice{font:700 13px/1 var(--mono)!important;color:var(--acc-txt)}
html[data-theme] #scr-app .catile .add,html[data-theme] #scr-app .catile .caqty .add,html[data-theme] #scr-app .caqty .add{border-radius:var(--r);background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}
html[data-theme] #scr-app .catile.has .add,html[data-theme] #scr-app .catile.has .caqty .add{background:var(--led);color:#121110;border-color:var(--led)}
html[data-theme] #scr-app .caimg{border-radius:var(--r)}
html[data-theme] #scr-app .cartbar{background:var(--bar);border-top:1px solid var(--line2);box-shadow:none;border-radius:0}
html[data-theme] #scr-app .cartsum b{font:700 20px/1 var(--mono)!important}
html[data-theme] #scr-app .billchip{border-radius:3px}
html[data-theme] #scr-app .billchip.on{background:var(--led);color:#121110;border-color:var(--led)}

/* ---------- tabbar ---------- */
html[data-theme] .tabbar{background:var(--bar)!important;border-color:var(--line)!important;box-shadow:none!important;backdrop-filter:none!important}
html[data-theme] .tabbar button{color:var(--dim)!important;font:600 10.5px/1 var(--f)!important;letter-spacing:.01em!important;background:transparent!important;border-radius:0!important}
html[data-theme] .tabbar button i{color:inherit!important}
html[data-theme] .tabbar button.on{color:var(--txt)!important}
html[data-theme] .tabbar button.on i{color:var(--acc-txt)!important}
html[data-theme] .tabbar button.on::before{background:var(--led)!important;border-radius:0!important;height:2px!important}

/* ---------- laporan ---------- */
html[data-theme] .rkpi .k{border-radius:var(--r2);background:var(--panel);border:1px solid var(--line)}
html[data-theme] .rkpi .k.main{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--on-acc)!important}
html[data-theme] .rkpi .k.main small,html[data-theme] .rkpi .k.main span,html[data-theme] .rkpi .k.main b{color:var(--on-acc)!important}
html[data-theme] .rkpi small{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
html[data-theme=dark] .rcol i,html[data-theme=dark] .rleg .lg.cf{background:var(--led)}
html[data-theme=dark] .rcol u,html[data-theme=dark] .rleg .lg.ps{background:#5A544B}
html[data-theme=light] .rcol i,html[data-theme=light] .rleg .lg.cf{background:#E08F00}
html[data-theme=light] .rcol u,html[data-theme=light] .rleg .lg.ps{background:#3A352C}

/* ---------- sheet ---------- */
html[data-theme] .sheet{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2) var(--r2) 0 0;box-shadow:none}
html[data-theme] .sheethead h3{font:800 19px/1.1 var(--disp);letter-spacing:-.02em}
@media(min-width:900px){html[data-theme] .sheet{border-radius:var(--r2)}}
html[data-theme] .emptyst{border:1px dashed var(--line2);border-radius:var(--r2);background:transparent}
html[data-theme] .emptyst i{color:var(--dim)}

/* ---------- absensi ---------- */
.abnudge{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border-radius:var(--r2);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent);color:var(--txt);text-align:left;cursor:pointer;font:inherit}
.abnudge[hidden]{display:none}
.abnudge>i:first-child{font-size:20px;color:var(--warn)}
.abnudge span{flex:1;display:flex;flex-direction:column;gap:2px}
.abnudge b{font:700 14px/1.2 var(--disp)}
.abnudge small{font-size:12px;color:var(--mut)}
.abnudge>i:last-child{color:var(--mut)}
#tab-absen .card{margin-bottom:12px}
.ab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ab-head small{display:block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.ab-head b{font:800 20px/1.1 var(--disp);letter-spacing:-.02em}
.ab-st{display:inline-block;white-space:nowrap;border-radius:3px;padding:5px 8px;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);color:var(--mut)}
.ab-st.hadir{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.ab-st.telat{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.ab-st.alpa{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.ab-st.izin,.ab-st.sakit{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent)}
.ab-times{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.ab-times>div{background:var(--panel2);padding:12px}
.ab-times small{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.ab-times b{font:700 20px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ab-times>div:last-child b{font-size:13px;line-height:20px;color:var(--mut)}
.ab-shift{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.ab-shift[hidden]{display:none}
.ab-shift button{padding:11px;border-radius:var(--r);border:1px solid var(--line2);background:transparent;color:var(--mut);font:600 13px/1 var(--f);cursor:pointer}
.ab-shift button.on{border-color:var(--line2);background:var(--panel2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--led)}
#ab-go{width:100%;justify-content:center;min-height:52px;font-size:15px}
#ab-go[hidden]{display:none}
#ab-hint{display:block;margin-top:8px}
.ab-person{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ab-person:first-child{border-top:0}
.ab-person img,.ab-av{width:40px;height:40px;border-radius:var(--r);object-fit:cover;flex:none;background:var(--panel2);display:grid;place-items:center;font:800 13px/1 var(--disp);color:var(--dim)}
.ab-person .g{flex:1;min-width:0}
.ab-person .g b{display:block;font-size:14px}
.ab-person .g small,.ab-tt small{display:block;color:var(--mut);font-size:11.5px;margin-top:3px}
.ab-tt{text-align:right}
.ab-tt small{font-family:var(--mono)}
.ab-rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ab-rhead h3{margin:0!important}
.ab-rhead select{width:auto;min-width:0;max-width:60%}
.ab-recap{display:grid;gap:8px;margin:12px 0}
@media(min-width:720px){.ab-recap{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.ab-rc{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--panel2)}
.ab-rc>b{font:700 14px/1.2 var(--disp)}
.ab-rc>small{display:block;color:var(--mut);font:500 11.5px/1.3 var(--mono);margin-top:8px}
.ab-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.ab-nums span{display:flex;flex-direction:column;gap:4px;font:600 9.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.ab-nums em{font:700 20px/1 var(--mono);font-style:normal;color:var(--txt);letter-spacing:-.03em}
.ab-nums span.bad em{color:var(--bad)}
.ab-log{border-top:1px solid var(--line);margin-top:4px}
.ab-li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ab-li .d{width:46px;flex:none;font:700 11.5px/1.2 var(--mono);color:var(--mut)}
.ab-li .g{flex:1;min-width:0}
.ab-li .g b{display:block;font-size:13.5px}
.ab-li .g small{display:block;color:var(--mut);font-size:11.5px;margin-top:2px}
.ab-li .g a{color:var(--acc-txt)}
.ab-ph{width:34px;height:34px;flex:none;border-radius:var(--r);border:1px solid var(--line2);background:transparent;color:var(--mut);cursor:pointer}
.ab-ph.none{border-color:transparent}

/* stats: satu bidang, bukan kotak di dalam kotak */
html[data-theme] .stats{background:var(--panel);border:1px solid var(--line);gap:0}
html[data-theme] .stats>div,html[data-theme] .stats>div:first-child,html[data-theme] .stats>div:last-child{background:transparent;border:0;border-radius:0;padding:12px 14px}
html[data-theme] .stats>div+div{border-left:1px solid var(--line)}
@media(max-width:560px){html[data-theme] .stats>div:nth-child(3){border-left:0}html[data-theme] .stats>div:nth-child(n+3){border-top:1px solid var(--line)}}
html[data-theme] #scr-app .pstile.busy .tk-time{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
html[data-theme] #scr-app .catile .add,html[data-theme] #scr-app .catile .caqty .add{background:var(--panel2)!important;color:var(--txt)!important;border:1px solid var(--line2)!important;border-radius:var(--r)!important;font:600 13px/1 var(--f)}
html[data-theme] #scr-app .catile.has .caqty .add{background:var(--led)!important;color:#121110!important;border-color:var(--led)!important}
html[data-theme] #scr-app .camono,html[data-theme=dark] #scr-app .camono{font-size:18px!important;color:color-mix(in srgb,var(--dim) 70%,transparent)!important}
html[data-theme] .seg button.on{border-color:transparent!important;outline:0!important}

.abview{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px}
.abview-in{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;width:100%}
.abview figure{margin:0}.abview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--panel2)}
.abview figcaption{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.abview .btn{grid-column:1/-1;justify-content:center}
/* teks bantu & kosong: kontras cukup */
html[data-theme] .muted,html[data-theme] .hint,html[data-theme] small.hint{color:var(--mut)}
html[data-theme=dark] .tabbar button{color:#9A9387!important}
/* ruang bawah supaya isi terakhir tidak tertutup tabbar */
@media(max-width:899px){html[data-theme] #scr-app .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}