/* iKasir design tokens (v2.56.0): biru iKasir #3b5bfd, gradasi biru ke ungu #3b5bfd -> #6d4bf6 -> #9b4dff */
@font-face{font-family:"Jakarta";src:url(../fonts/pjs-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/pjs-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/pjs-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/pjs-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/pjs-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  /* v2.56.0 desain ulang: biru iKasir sebagai warna dasar, gradasi biru ke ungu untuk elemen utama. Mode gelap. */
  --bg:#0b1020; --bg2:#0f1528; --panel:#141b31; --panel2:#1a2340; --line:#252f4f; --line2:#33406a;
  --ink:#eef1fb; --ink2:#bcc5df; --ink3:#93a0c2;
  --pri:#7b8fff; --pri2:#647bff; --pri-ink:#fff; --glow:#b08cff; --pri-soft:rgba(123,143,255,.16);
  --ok:#3fd08f; --ok-soft:rgba(63,208,143,.15); --warn:#f6b84b; --warn-soft:rgba(246,184,75,.15); --bad:#ff6b7a; --bad-soft:rgba(255,107,122,.15);
  --grad:linear-gradient(135deg,#3b5bfd 0%,#6d4bf6 55%,#9b4dff 100%); --grad-sh:0 14px 34px -14px rgba(109,75,246,.75);
  --vi:#a98bff; --vi-soft:rgba(169,139,255,.16);
  --r1:8px; --r2:12px; --r3:18px; --sh:0 12px 32px rgba(0,0,0,.4); --sh1:0 1px 2px rgba(0,0,0,.3);
  --side:252px; --top:64px;
  --font:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#f6f8fd; --line:#e4e8f2; --line2:#d3d9e8;
  --ink:#121a33; --ink2:#414c6b; --ink3:#5f6a8a;
  --pri:#3b5bfd; --pri2:#2c47e0; --glow:#7c4dff; --pri-soft:rgba(59,91,253,.09);
  --ok:#0f9a5c; --ok-soft:rgba(15,154,92,.1); --warn:#b7700a; --warn-soft:rgba(232,150,22,.13); --bad:#d3344a; --bad-soft:rgba(211,52,74,.09);
  --vi:#7c4dff; --vi-soft:rgba(124,77,255,.1);
  --sh:0 12px 32px rgba(28,39,84,.12); --sh1:0 1px 2px rgba(28,39,84,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--pri);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15.5px}
.num,.money{font-variant-numeric:tabular-nums}
.muted{color:var(--ink3)} .small{font-size:12.5px} .ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hidden{display:none!important}

/* ---------- Tombol & form ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font:600 14px var(--font);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--pri)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} .btn.pri:hover{background:var(--pri2)}
.btn.danger{color:var(--bad);border-color:var(--bad-soft);background:var(--bad-soft)}
.btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{background:var(--pri-soft)}
.btn.sm{height:32px;padding:0 11px;font-size:13px;border-radius:var(--r1)} .btn.lg{height:52px;font-size:16px;padding:0 22px}
.btn.icon{width:40px;padding:0} .btn.sm.icon{width:32px}
.btn svg,.ico{width:18px;height:18px;flex:none}
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.inp,select.inp,textarea.inp{width:100%;height:42px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:500 14.5px var(--font)}
textarea.inp{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
.inp:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.inp.sm{height:34px;font-size:13.5px;border-radius:var(--r1)}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0;font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--pri)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.switch input{appearance:none;width:42px;height:24px;border-radius:20px;background:var(--line2);position:relative;cursor:pointer;transition:background .2s;margin:0;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked{background:var(--pri)} .switch input:checked::after{transform:translateX(18px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row.between{justify-content:space-between} .grow{flex:1;min-width:0}
.stack>*+*{margin-top:12px}

/* ---------- Layout aplikasi ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:14px 16px;height:var(--top);border-bottom:1px solid var(--line)}
.brand img{width:35px;height:34px}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.02em} .brand b i{font-style:normal;color:var(--glow)}
.brand .wm{display:inline-block;width:82px;height:24px;background:currentColor;color:var(--ink);-webkit-mask:url(../assets/ikasir-wordmark.svg) no-repeat center/contain;mask:url(../assets/ikasir-wordmark.svg) no-repeat center/contain}
.nav{flex:1;overflow-y:auto;padding:10px 10px 20px}
.nav .grp{font-size:11.5px;color:var(--ink3);font-weight:600;padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r2);color:var(--ink2);font-weight:500;margin-bottom:1px}
.nav a:hover{background:var(--pri-soft);color:var(--ink)}
.nav a.on{background:var(--pri-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--pri)}
.nav a .ico{opacity:.85}
.side-foot{padding:12px;border-top:1px solid var(--line);font-size:12.5px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top h1{font-size:18px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--panel2);border:1px solid var(--line)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.off .dot{background:var(--warn)}
.content{padding:20px;max-width:1500px;width:100%}
.bell{position:relative} .bell .badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.bottomnav{display:none}
.scrim{display:none}
/* Menu samping diciutkan: hanya ikon, isi halaman jadi lebih lebar */
.side-toggle{display:none}
@media (min-width:1025px){
  .side-toggle{display:inline-flex}
  .app.mini{grid-template-columns:68px 1fr}
  .app.mini .brand{justify-content:center;padding:14px 0}
  .app.mini .brand b{display:none}
  .app.mini .nav{padding:10px 8px}
  .app.mini .nav a{justify-content:center;padding:11px 0}
  .app.mini .nav a>span{display:none}
  .app.mini .nav a.on{box-shadow:inset 0 0 0 1px var(--pri)}
  .app.mini .nav .grp{font-size:0;padding:10px 6px 4px}
  .app.mini .nav .grp::after{content:"";display:block;height:1px;background:var(--line)}
  .app.mini .side-foot{padding:10px 8px;text-align:center}
  .app.mini .side-foot .grow,.app.mini .side-foot .muted,.app.mini .side-foot .small{display:none}
  .app.mini #logout-btn{font-size:0;padding:9px 0;gap:0}
  .app.mini .nav a .tag{display:none}
}

@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--sh)}
  .app.open .side{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .burger{display:inline-flex}
  .content{padding:16px}
}
@media (max-width:640px){
  .top{padding:0 10px}
  .content{padding:12px 12px 90px}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--bg2);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;color:var(--ink3);font-size:11px;font-weight:600}
  .bottomnav a.on{color:var(--pri)}
  .hide-m{display:none!important}
}

/* ---------- Kartu, tabel, tab ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:16px}
.card+.card{margin-top:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .inp{width:auto;min-width:160px}
.toolbar .search{flex:1;min-width:180px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 14px;color:var(--ink2);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer}
.tabs a.on{color:var(--ink);border-color:var(--pri)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-weight:600;color:var(--ink2);background:var(--panel2);padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--line);font-size:12.5px}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--pri-soft)}
.tbl .r{text-align:right} .tbl .nowrap{white-space:nowrap}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tag.pri{background:var(--pri-soft);color:var(--pri);border-color:transparent}
.empty{padding:40px 16px;text-align:center;color:var(--ink3)}
.empty b{display:block;color:var(--ink2);font-size:15px;margin-bottom:4px}
/* tabel jadi kartu di HP */
@media (max-width:640px){
  .tbl.cards thead{display:none}
  .tbl.cards,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  .tbl.cards td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .tbl.cards td::before{content:attr(data-l);color:var(--ink3);font-size:12px;text-align:left;font-weight:500}
  .tbl.cards td.r{text-align:right}
  .tbl.cards td>.cv{min-width:0;text-align:right;overflow-wrap:anywhere}
  .tbl.cards td[data-l=""]::before{display:none}
  .tbl.cards td[data-l=""]>.cv{width:100%}
}

/* ---------- Dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);padding:14px 16px}
.kpi .l{font-size:12.5px;color:var(--ink3);font-weight:600}
.kpi .v{font-size:22px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi.hero{background:linear-gradient(135deg,var(--pri2),#0a3d8f);border-color:transparent;color:#fff;position:relative;overflow:hidden}
.kpi.hero .l{color:rgba(255,255,255,.75)}
.kpi.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;background:url(../assets/icon-192.png) center/contain no-repeat;opacity:.18;mix-blend-mode:screen}
.dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.dgrid>.card{margin:0}
.c8{grid-column:span 8}.c4{grid-column:span 4}.c6{grid-column:span 6}.c12{grid-column:span 12}
/* v2.6.1: lebar kolom lain yang dipakai (c3 analisa, c5/c7 ID card) sebelumnya tidak terdefinisi sehingga meluber di HP */
.c3{grid-column:span 3}.c5{grid-column:span 5}.c7{grid-column:span 7}.c9{grid-column:span 9}
@media(max-width:1100px){.c8,.c4,.c6,.c5,.c7,.c9{grid-column:span 12}.c3{grid-column:span 6}}
@media(max-width:560px){.c3{grid-column:span 12}}
.chart-box{position:relative;height:280px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r2);background:var(--panel2);border:1px solid var(--line);margin-bottom:8px;font-size:13.5px}
.alert.warn{background:var(--warn-soft);border-color:transparent} .alert.bad{background:var(--bad-soft);border-color:transparent} .alert.pri{background:var(--pri-soft);border-color:transparent}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.list-row:last-child{border-bottom:0}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 400px;gap:14px;height:calc(100vh - var(--top) - 40px);min-height:520px}
.pos-left{display:flex;flex-direction:column;min-height:0}
.pos-search{display:flex;gap:8px;margin-bottom:10px}
.pos-search .inp{height:48px;font-size:15.5px}
/* v2.22.0: di HP kolom cari menyusut, tombol scan/muat ulang/mikrofon tidak lagi mendorong halaman melebar */
.pos-left{min-width:0}.pos-search .inp{min-width:0}.pos-search .btn{flex:none}
.pos-cats{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;scrollbar-width:none;flex:none}
.pos-cats button{flex:none;height:32px;padding:0 14px;border-radius:20px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font:600 13px var(--font);cursor:pointer}
.pos-cats button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pgrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;padding-bottom:10px}
.pitem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:12px;cursor:pointer;text-align:left;color:var(--ink);font:inherit;display:flex;flex-direction:column;gap:6px;min-height:104px;transition:border-color .12s}
.pitem:hover{border-color:var(--pri)} .pitem:active{transform:scale(.98)}
.pitem .n{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pitem .p{margin-top:auto;font-weight:800;color:var(--glow);font-variant-numeric:tabular-nums}
.pitem .s{font-size:11.5px;color:var(--ink3)} .pitem.out{opacity:.5}
.cart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cart-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
.cart-items{flex:1;overflow-y:auto;padding:4px 0}
.ci{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 10px}
.ci .n{font-weight:600;font-size:13.5px}
.ci .meta{font-size:12px;color:var(--ink3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ci .meta select{height:26px;border-radius:6px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:500 12px var(--font);padding:0 4px}
.ci .t{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:700 16px var(--font);cursor:pointer}
.qty input{width:52px;height:30px;text-align:center;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:600 13.5px var(--font)}
.cart-f{border-top:1px solid var(--line);padding:12px 14px;background:var(--panel2)}
.sum-row{display:flex;justify-content:space-between;font-size:13.5px;padding:2px 0;color:var(--ink2)}
/* elemen khas: panel total bergaya node dari logo */
.total-node{position:relative;margin:10px 0;padding:14px 16px;border-radius:var(--r2);background:radial-gradient(120% 140% at 100% 0%,rgba(69,214,245,.22),transparent 55%),#061327;border:1px solid rgba(69,214,245,.35);color:#eaf6ff;overflow:hidden}
.total-node::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%2345d6f5' stroke-opacity='.18'%3E%3Cpath d='M0 30h30l10-10h30l10 10h40M70 20v-20M40 20l-10 -20'/%3E%3C/g%3E%3Cg fill='%2345d6f5' fill-opacity='.35'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='70' cy='20' r='2'/%3E%3Ccircle cx='80' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E") right center/240px auto no-repeat;pointer-events:none}
.total-node .l{font-size:12px;color:#8fdcf5;font-weight:600}
.total-node .v{font-size:32px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(69,214,245,.35)}
.cart-bar{display:none}
@media (max-width:1024px){ .pos{grid-template-columns:1fr 340px} }
@media (max-width:820px){
  .pos{grid-template-columns:1fr;height:auto;min-height:0}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));overflow:visible;padding-bottom:80px}
  .cart{position:fixed;inset:0;z-index:60;border-radius:0;transform:translateY(100%);transition:transform .25s}
  .cart.open{transform:none}
  .cart-bar{display:flex;position:fixed;left:12px;right:12px;bottom:76px;z-index:31;height:56px;border-radius:14px;background:var(--pri);color:#fff;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700;box-shadow:var(--sh);border:0;font-family:var(--font);font-size:15px;cursor:pointer}
}
@media (min-width:641px) and (max-width:820px){ .cart-bar{bottom:16px} }

/* ---------- Modal, toast ---------- */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(2,8,18,.6);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3);width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:var(--sh)}
.modal.lg{max-width:860px} .modal.xl{max-width:1100px} .modal.sm{max-width:420px}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-b{padding:16px 18px;overflow-y:auto}
.modal-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:640px){
  .modal-bg{padding:0;align-items:flex-end}
  .modal,.modal.lg,.modal.xl{max-width:none;max-height:94vh;border-radius:var(--r3) var(--r3) 0 0;animation:up .2s}
}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(30px);opacity:.5}}
.toasts{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 28px))}
.toast{padding:12px 14px;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line2);box-shadow:var(--sh);font-weight:500;font-size:13.5px;animation:fade .2s;border-left:4px solid var(--pri)}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.loading{display:grid;place-items:center;padding:50px;color:var(--ink3)}
.spin{width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--pri);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Halaman autentikasi ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
.auth.solo{grid-template-columns:1fr}
.auth-art{position:relative;background:#0A1430 url(../assets/logo-full.jpg) center/cover no-repeat;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;color:#cfe6ff}
.auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,20,48,.95),rgba(10,20,48,0) 55%)}
.auth-art>*{position:relative;z-index:1}
.auth-art p{max-width:440px;font-size:15px;line-height:1.6;color:#9fb6d4;margin:8px 0 0}
.auth-art h2{font-size:26px;color:#fff;max-width:460px;line-height:1.25}
.auth-box{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth-card{width:100%;max-width:420px}
.auth-card .logo-m{display:none;width:64px;height:64px;border-radius:14px;margin-bottom:14px}
.auth-card h1{font-size:26px;margin-bottom:4px}
.auth-card .sub{color:var(--ink3);margin:0 0 22px}
.pw{position:relative} .pw button{position:absolute;right:6px;top:5px;height:32px;border:0;background:transparent;color:var(--ink3);cursor:pointer;font:600 12px var(--font)}
.auth-links{display:flex;justify-content:space-between;margin:4px 0 18px;font-size:13.5px}
.notice{padding:12px 14px;border-radius:var(--r2);font-size:13.5px;margin-bottom:14px;background:var(--pri-soft);border:1px solid transparent}
.notice.bad{background:var(--bad-soft);color:var(--bad)} .notice.ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:900px){ .auth{grid-template-columns:1fr} .auth-art{display:none} .auth-card .logo-m{display:block} }

/* Hitung uang laci: satu kotak per pecahan */
.dengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.den{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:8px 10px}
.den span{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.den input{width:70px;text-align:right;padding:6px 8px;height:34px}
@media (max-width:640px){.dengrid{grid-template-columns:1fr 1fr}.den span{font-size:11.5px}.den input{width:56px}}

/* ---------- Lain-lain ---------- */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 14px}
.cam{position:relative;background:#000;border-radius:var(--r2);overflow:hidden;aspect-ratio:4/3;max-width:420px;margin:0 auto}
.cam video,.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam .oval{position:absolute;inset:12% 25%;border:3px dashed rgba(69,214,245,.7);border-radius:50%}
#scanner-region{width:100%;max-width:480px;margin:0 auto;border-radius:var(--r2);overflow:hidden}
.receipt-prev{background:#fff;color:#000;margin:0 auto;padding:10px;box-shadow:var(--sh);border-radius:4px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs .th{position:relative;width:96px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2)}
.thumbs .th img,.thumbs .th video{width:100%;height:100%;object-fit:cover}
.thumbs .th button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;cursor:pointer}
.faq details{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;margin-bottom:8px;background:var(--panel)}
.faq summary{font-weight:600;cursor:pointer}
.faq details p,.faq details ol,.faq details ul{color:var(--ink2);margin:10px 0 0}
.help-body h3{margin:18px 0 6px} .help-body code{overflow-wrap:anywhere;background:var(--panel2);padding:1px 5px;border-radius:4px} .help-body p,.help-body li{color:var(--ink2);line-height:1.65}
.shift-cal{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:6px;overflow-x:auto}
.shift-cal .day{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:8px;min-height:90px;font-size:12px}
.shift-cal .day b{display:block;margin-bottom:4px;font-size:12.5px}
.shift-cal .sh{background:var(--pri-soft);border-radius:6px;padding:3px 6px;margin-bottom:3px;display:flex;justify-content:space-between;gap:4px}
.offline-banner{background:var(--warn-soft);color:var(--warn);padding:8px 14px;font-size:13px;font-weight:600;text-align:center}
@media print{ body *{visibility:hidden} .print-area,.print-area *{visibility:visible} .print-area{position:absolute;left:0;top:0} }

/* Baris multi satuan & grosir: kartu berlabel, responsif di HP */
.urow{display:grid;grid-template-columns:1.1fr .8fr 1fr 1fr 1fr 1fr auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg2);margin-bottom:8px}
.urow.ws{grid-template-columns:1fr 1fr 1fr auto}
.urow.vrow{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr 1fr 1fr .8fr auto}
@media (max-width:1200px){.urow.vrow{grid-template-columns:repeat(4,1fr) auto}}
.urow label span{display:block;font-size:11.5px;font-weight:600;color:var(--ink3);margin-bottom:3px}
.urow .inp{height:40px;font-size:15px}
@media (max-width:820px){.urow,.urow.ws,.urow.vrow{grid-template-columns:1fr 1fr}.urow .wide{grid-column:1/-1}.urow>button{grid-column:1/-1}}
.lockbox{border:1px dashed var(--line2);border-radius:var(--r2);padding:14px;background:var(--pri-soft)}
.bankrow{display:grid;grid-template-columns:1fr 1.3fr 1.2fr auto;gap:8px;margin-bottom:8px}
@media (max-width:640px){.bankrow{grid-template-columns:1fr}}

/* Editor daftar landing page: berjajar di desktop, bertumpuk di HP */
.lrow{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg2)}
.lrow>.inp,.lrow>textarea{flex:1;min-width:0}
.lrow textarea.inp{min-height:42px}
@media (max-width:760px){
  .lrow{display:grid;grid-template-columns:1fr;gap:6px}
  .lrow>*{width:100%!important}
  .lrow>.thumbs{width:auto!important}
  .lrow textarea.inp{min-height:84px}
  .lrow [data-delrow]{justify-self:end;width:40px!important}
  .lsave{position:sticky;bottom:70px;z-index:5;background:var(--bg);padding:8px 0;margin:0}
  .lsave .btn{flex:1}
}

/* ===== Live chat ===== */
.chat-fab{position:fixed;right:18px;bottom:22px;z-index:45;width:56px;height:56px;border-radius:50%;border:0;background:var(--pri);color:#fff;box-shadow:var(--sh);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-fab svg{width:26px;height:26px}.chat-fab .badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--bad);color:#fff;font:700 11px var(--font);display:grid;place-items:center;padding:0 5px}
@media (max-width:640px){.chat-fab{bottom:84px;right:14px;width:50px;height:50px}}
body[data-page=pos] .chat-fab{display:none}
.chat-box{position:fixed;right:18px;bottom:90px;z-index:70;width:380px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 120px);background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3);box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden}
@media (max-width:640px){.chat-box{inset:0;width:auto;max-width:none;height:auto;max-height:none;border-radius:0}}
.chat-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.chat-h img{width:34px;height:34px;border-radius:9px}
.chat-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg2)}
.bub{max-width:82%;padding:8px 11px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.bub.me{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:4px}
.bub.them{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub .meta{display:block;font-size:11px;opacity:.75;margin-top:3px}
.bub img{max-width:220px;max-height:220px;border-radius:8px;display:block;margin-bottom:4px;cursor:pointer}
/* v2.19.0 lampiran chat semua jenis */
.bub video{width:240px;max-width:100%;max-height:320px;border-radius:8px;display:block;margin-bottom:4px;background:#000}
.bub audio{width:240px;max-width:100%;display:block;margin-bottom:4px}
.bub.has-att{min-width:200px}
.att-file{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:4px;border-radius:10px;background:rgba(127,127,127,.12);color:inherit;text-decoration:none;max-width:260px}
.att-file .att-n{display:flex;flex-direction:column;min-width:0}
.att-file .att-n b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-file .att-n small{font-size:11px;opacity:.8}
.att-ext{flex:none;min-width:40px;height:40px;padding:0 4px;border-radius:8px;background:var(--pri);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.3px}
.bub.me .att-ext{background:rgba(255,255,255,.25)}
.att-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line);background:var(--panel)}
.att-chip.hidden{display:none}
.mb-atts{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.mb-att{border:1px solid var(--line);border-radius:10px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.chat-day{align-self:center;font-size:11.5px;color:var(--ink3);background:var(--panel);padding:2px 10px;border-radius:10px;border:1px solid var(--line)}
.chat-in{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:var(--panel);align-items:flex-end}
.chat-in textarea{flex:1;resize:none;height:42px;max-height:120px;border-radius:20px;padding:10px 14px}
.chat-in .btn{border-radius:50%;width:42px;height:42px;padding:0;flex:none}
.sup-wrap{display:grid;grid-template-columns:320px 1fr;gap:0;height:calc(100vh - var(--top) - 40px);min-height:480px;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--panel)}
.sup-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.sup-items{flex:1;overflow-y:auto}
.sup-item{display:block;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink)}
.sup-item:hover,.sup-item.on{background:var(--pri-soft)}
.sup-item .t{display:flex;justify-content:space-between;gap:8px;font-weight:600}.sup-item .p{color:var(--ink3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-main{display:flex;flex-direction:column;min-height:0}
@media (max-width:820px){.sup-wrap{grid-template-columns:1fr;height:calc(100vh - var(--top) - 110px)}.sup-wrap.open .sup-side{display:none}.sup-wrap:not(.open) .sup-main{display:none}}

/* ---------- v1.7.1: promo, voucher, timbangan, struk WA, label rak ---------- */
.promo-hints{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.promo-hints .hint{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r2);background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:600}
.promo-hints .hint span{flex:1;min-width:0}
.ci .meta .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sum-row.small{font-size:12.5px}
.wa-send{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.wa-send label.f>span{display:flex;align-items:center;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);border-radius:20px;background:var(--panel2);font-size:13px}
.chip.on{border-color:var(--pri);background:var(--pri-soft)}
.chip a{display:inline-flex;color:var(--ink3)} .chip a svg{width:14px;height:14px}
label.check.chip{padding:4px 10px}
.f>.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.btn.promo-type{width:100%;height:auto;padding:12px 14px;justify-content:flex-start;text-align:left;white-space:normal}
.btn.promo-type span{display:flex;flex-direction:column;gap:2px} .btn.promo-type small{font-weight:500}
.a11y-box{border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column;gap:8px}

/* ---------- Kontras tinggi (per perangkat) ---------- */
:root[data-contrast="high"]{--bg:#000;--bg2:#000;--panel:#0b0b0b;--panel2:#161616;--line:#8d97a5;--line2:#c9d1db;--ink:#fff;--ink2:#f3f5f8;--ink3:#d9dfe7;
  --pri:#62adff;--pri2:#3f99ff;--pri-ink:#000;--glow:#86e6ff;--pri-soft:rgba(98,173,255,.25);--ok:#55f2a6;--ok-soft:rgba(85,242,166,.18);--warn:#ffd36b;--warn-soft:rgba(255,211,107,.18);--bad:#ff8592;--bad-soft:rgba(255,133,146,.2)}
:root[data-theme="light"][data-contrast="high"]{--bg:#fff;--bg2:#fff;--panel:#fff;--panel2:#f1f1f1;--line:#444;--line2:#1d1d1d;--ink:#000;--ink2:#111;--ink3:#2e2e2e;
  --pri:#0046b0;--pri2:#00388f;--pri-ink:#fff;--glow:#005c78;--pri-soft:rgba(0,70,176,.12);--ok:#00652e;--ok-soft:rgba(0,101,46,.1);--warn:#744b00;--warn-soft:rgba(116,75,0,.1);--bad:#b0001e;--bad-soft:rgba(176,0,30,.08)}
[data-contrast="high"] a{text-decoration:underline}
[data-contrast="high"] .btn,[data-contrast="high"] .inp,[data-contrast="high"] .card{border-width:2px}
[data-contrast="high"] .btn.pri{font-weight:700}
[data-contrast="high"] :focus-visible{outline:3px solid var(--glow);outline-offset:2px}
[data-contrast="high"] .tag{border:1px solid currentColor}

/* ---------- v1.9.0: marketplace ---------- */
.mp-badge{display:inline-block;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;vertical-align:1px}
.mp-acc .row.small{gap:12px;flex-wrap:wrap}
.mp-chat{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:12px;min-height:360px}
.mp-chat-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.mp-chat-item{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;color:var(--ink);cursor:pointer;font:inherit}
.mp-chat-item:hover{border-color:var(--pri)}
.mp-chat-conv{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mp-msgs{flex:1;display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.mp-msg{align-self:flex-start;max-width:80%;background:var(--panel2);border-radius:12px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.mp-msg.me{align-self:flex-end;background:var(--pri-soft)}
.mp-msg small{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
@media (max-width:820px){.mp-chat{grid-template-columns:minmax(0,1fr)}}
/* v1.9.3 operasional marketplace: tombol aksi pesanan, lacak, pilihan kirim, ulasan */
.linkbtn{background:none;border:0;padding:0;color:var(--pri);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mp-act{gap:6px;margin-top:6px;flex-wrap:wrap}
.mp-act:empty{display:none}
.mp-tl{list-style:none;margin:6px 0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.mp-tl li{position:relative;padding:0 0 12px 4px}
.mp-tl li::before{content:"";position:absolute;left:-25px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid var(--panel)}
.mp-tl li.now::before{background:var(--pri)}
.mp-tl li b{display:block;font-weight:600;overflow-wrap:anywhere}
.mp-tl li small{color:var(--ink3);font-size:12px}
.mp-ship-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);cursor:pointer}
.mp-ship-opt span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mp-ship-opt small{font-size:12px}
.mp-ship-opt:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.stars{color:#f59e0b;letter-spacing:1px;font-size:14px;white-space:nowrap}
.stars .off{color:var(--line)}
.mp-rv{padding:12px 14px}
.mp-rv-text{margin:6px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.mp-rv-reply{background:var(--panel2);border-radius:var(--r2);padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.mp-rv-reply small{display:block;margin-bottom:2px;font-size:12px}
/* v2.0.0 keuangan: laporan bertingkat, jurnal, form jurnal manual */
.f.inline{display:flex;align-items:center;gap:6px;margin:0}
.f.inline span{white-space:nowrap;font-size:13px;color:var(--ink2)}
.fin-st{padding:6px 14px 10px;margin-bottom:12px}
.fin-sec h4{margin:12px 0 4px;font-size:14px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2)}
.fin-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fin-row>:first-child{min-width:0;overflow-wrap:anywhere;text-align:left}
.fin-row b{white-space:nowrap}
.fin-tot{font-weight:700}
.fin-grand{font-weight:800;font-size:16px;border-bottom:0;border-top:2px solid var(--ink3);margin-top:6px}
.fin-grand.neg b{color:var(--bad)} .fin-grand.pos b{color:var(--ok)}
.fin-acc{font-weight:500;text-decoration:none;color:var(--ink)}
.fin-acc:hover{color:var(--pri);text-decoration:underline}
.fin-bs{align-items:start}
.fin-je{padding:12px 14px}
.fin-jl td,.fin-jl th{padding:6px 8px}
.fin-jl .fin-tot td{border-top:2px solid var(--line)}
.fin-line{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px auto;gap:6px;margin-bottom:6px}
.fin-bal{margin-top:10px;font-size:14px}
.fin-tpl{gap:6px;margin-bottom:10px;align-items:center}
@media (max-width:600px){.fin-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.fin-line select{grid-column:1 / -1}}
.fin-pmrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}.fin-pmrow:first-of-type{border-top:0}
@media (max-width:600px){.fin-pmrow{grid-template-columns:1fr}}
.pay-bank{cursor:pointer}.pay-bank input{vertical-align:middle;margin-right:4px}
/* v2.52.0 satuan resep & keterangan konversi */
.bom-line .bom-conv{grid-column:1 / -1;margin-top:-2px}.bom-line .bom-conv:empty{display:none}
@media (max-width:600px){.fin-line select.bom-unit{grid-column:auto}}
.fin-jl td.num{white-space:nowrap}
/* v2.0.1 kasir suara */
.pos-mic.rec{background:var(--bad);border-color:var(--bad);color:#fff;animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
@media (prefers-reduced-motion:reduce){.pos-mic.rec{animation:none}}
.voice-bar{margin:0 0 8px;padding:8px 12px;border-radius:var(--r2);background:var(--panel2);border:1px solid var(--line);font-size:14px;overflow-wrap:anywhere}
.voice-bar.on{border-color:var(--pri)} .voice-bar.bad{border-color:var(--bad)}
.pos-mic[hidden]{display:none}
/* v2.0.3 pratinjau laporan harian WA */
.wa-prev{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 var(--font, inherit);background:var(--panel2);border-radius:var(--r2);padding:12px;margin:0;max-height:520px;overflow:auto}
/* v2.0.5 restart aplikasi di panel superadmin */
.restart-box{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 12px;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel2)}
.restart-box>div{min-width:0;overflow-wrap:anywhere}
/* v2.0.6 Asisten AI */
.ai-wrap{display:flex;flex-direction:column;gap:12px;max-width:860px}
.ai-head{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:12px 14px}
.ai-chat{display:flex;flex-direction:column;gap:8px;min-height:180px}
.ai-msg{max-width:88%;padding:10px 12px;border-radius:14px;overflow-wrap:anywhere;line-height:1.5}
.ai-msg.me{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:4px}
.aiw-dash .card-h h3{display:flex;align-items:center;gap:8px}.aiw-dash .card-h h3 svg{width:18px;height:18px;color:var(--vi)}.aiw-card{margin-top:12px}.aiw-list{margin:.4em 0 0;padding-left:1.3em}.aiw-list li{margin:.6em 0;line-height:1.5}
.ai-msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.ai-msg.bot ul{margin:4px 0;padding-left:18px}
.ai-msg.err{border-color:var(--bad);color:var(--bad)}
.ai-msg.wait{padding:12px 18px}
.ai-tips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-tips p{width:100%;margin:0}
.ai-input{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:0;background:var(--bg);padding:8px 0}
.ai-input textarea{flex:1;resize:vertical;min-height:44px}
.ai-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 4px}
.ai-bar span{display:block;height:100%;background:var(--ok)}
.ai-bar span.warn{background:var(--warn)} .ai-bar span.bad{background:var(--bad)}
.ai-quota{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
/* v2.1.0 pemeliharaan & pengumuman */
.maint{position:fixed;inset:0;z-index:300;background:rgba(5,10,20,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.maint-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;max-width:440px;width:100%;padding:24px;text-align:center}
.maint-card h2{margin:8px 0}
.maint-ic svg{width:40px;height:40px;color:var(--warn)}
.maint-bar{position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--warn);color:#111;text-align:center;font-size:13px;padding:6px 10px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
#ann:empty{display:none}
#ann{padding:10px 16px 0}
.ann{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r2);border:1px solid var(--line);background:var(--panel2);margin-bottom:8px}
.ann-t{flex:1;min-width:0;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.ann-t span{font-size:13px;color:var(--ink2)}
.ann-info{border-left:4px solid var(--pri)} .ann-warn{border-left:4px solid var(--warn)} .ann-success{border-left:4px solid var(--ok)}
.saas-bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding:8px 0;overflow-x:auto}
.saas-bars>div{flex:1;min-width:26px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink3)}
.saas-bars i{display:block;width:100%;background:var(--pri);border-radius:4px 4px 0 0;min-height:2px}
.hl-sehat{color:var(--ok)} .hl-perhatian{color:var(--warn)} .hl-berisiko{color:var(--bad)}
/* v2.1.1 sesi bantuan */
.imp-bar{position:sticky;top:0;z-index:999;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 12px;background:#b54708;color:#fff;font-size:14px;text-align:center}
.imp-bar.full{background:#b42318}
.imp-bar .btn{background:#fff;color:#111;border-color:#fff}
/* v2.1.1 pusat bantuan & survei */
.help-list{display:flex;flex-direction:column;gap:6px}
.help-item{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.help-item:hover{border-color:var(--pri)}
.help-art{line-height:1.6;overflow-wrap:anywhere}
.help-art h3,.help-art h4,.help-art h5{margin:14px 0 6px}
.help-art ul,.help-art ol{padding-left:20px}
.help-fb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.nps-scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.nps-scale .btn{padding:0;min-width:0}
.nps-ends{display:flex;justify-content:space-between;margin-top:4px}
/* v2.1.2 Pusat diagnosa */
.dg-wrap{display:flex;flex-direction:column;gap:12px}
.dg-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-left:5px solid var(--ok)}
.dg-head.warn{border-left-color:var(--warn)} .dg-head.error{border-left-color:var(--bad)}
.dg-big{font-size:18px;font-weight:800;display:flex;gap:8px;align-items:center}
.dg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px;align-items:start}
.dg-group{padding:12px 14px}
.dg-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.dg-row:last-child{border-bottom:0}
.dg-ic{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--ink3)}
.dg-ic svg{width:15px;height:15px}
.dg-row.ok .dg-ic{background:rgba(22,163,74,.15);color:var(--ok)} .dg-row.warn .dg-ic{background:rgba(245,158,11,.18);color:var(--warn)} .dg-row.error .dg-ic{background:rgba(239,68,68,.18);color:var(--bad)}
.dg-main{min-width:0;flex:1}
.dg-t{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between}
.dg-v{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:14px;overflow-wrap:anywhere}
.dg-d{margin-top:2px;overflow-wrap:anywhere}
.dg-fix{margin:6px 0}
.dg-fix summary{cursor:pointer;color:var(--pri);font-size:13px;font-weight:600}
.dg-fix ol{margin:6px 0;padding-left:20px;font-size:13px;line-height:1.5}
.dg-row .btn{margin-top:4px}
/* v2.3.0 pemberitahuan data ditahan */
.hold-bar{position:sticky;top:0;z-index:998;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 12px;background:#fef3c7;color:#78350f;font-size:14px;text-align:center}
.hold-bar .btn{background:#fff;color:#111;border-color:#e5c07b}
/* v2.3.0 contoh huruf struk */
.font-sample{background:#fff;color:#000;border-radius:10px;padding:10px 12px;margin-bottom:12px;overflow-wrap:anywhere}
.font-sample .muted{color:#555}
/* v2.3.1 banner halaman langganan */
.sub-banner{margin-bottom:14px;border-radius:14px;overflow:hidden;line-height:0}
.sub-banner img{width:100%;height:auto;max-height:260px;object-fit:cover;display:block}
/* v2.3.2 kasir suara mendengarkan kata panggil "Hai iKasir" */
.pos-mic.wake:not(.rec){box-shadow:0 0 0 3px rgba(34,197,94,.35);border-color:#22c55e;color:#16a34a}
/* v2.4.0 live chat pembeli (kotak masuk pemilik) */
.lc-wrap{display:grid;grid-template-columns:320px 1fr;gap:12px;height:calc(100vh - 190px);min-height:420px}
.lc-list{overflow:auto;padding:6px}.lc-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 8px;cursor:pointer;color:inherit;font:inherit}
.lc-item.on{background:var(--panel2)}.lc-item .badge{background:var(--pri);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px}.lc-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-chat{display:flex;flex-direction:column;padding:0;overflow:hidden}.lc-head{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.lc-msgs{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.lc-m{max-width:78%}.lc-m .lc-b{padding:8px 12px;border-radius:12px;background:var(--panel2);overflow-wrap:anywhere}
.lc-m.owner,.lc-m.ai{align-self:flex-end;text-align:right}.lc-m.owner .lc-b,.lc-m.ai .lc-b{background:var(--pri);color:#fff;text-align:left}.lc-m.system{align-self:center;text-align:center}.lc-m.system .lc-b{background:none;font-style:italic;color:var(--ink3)}
.lc-send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.lc-send textarea{flex:1;resize:none}.lc-back{display:none}
@media (max-width:760px){.lc-wrap{grid-template-columns:1fr;height:auto}.lc-chat{display:none;height:calc(100vh - 150px)}.lc-open .lc-list{display:none}.lc-open .lc-chat{display:flex}.lc-back{display:inline-flex}}
/* v2.6.0 kode verifikasi */
.otp-in{font-size:28px;letter-spacing:.5em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
/* v2.6.0 analisa & saran belanja */
.an-tips{border-left:4px solid var(--pri)}.an-tips p{margin:0 0 6px}.an-tips p:last-child{margin:0}
.an-stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums}.an-stat span{color:var(--ink3);font-size:13px}
.an-heat-wrap{overflow-x:auto}.an-heat{border-collapse:separate;border-spacing:3px;font-size:12px}.an-heat th{font-weight:600;color:var(--ink3);padding:2px 4px;text-align:center}
.an-heat td{width:30px;height:28px;text-align:center;border-radius:6px;background:rgba(31,111,229,var(--a));color:var(--ink);font-variant-numeric:tabular-nums;font-size:11px}
/* v2.6.1 ID card karyawan */
.idc-prev{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.idc-prev .idc{box-shadow:0 6px 18px rgba(0,0,0,.18)}
.idc-thumb{width:56px;height:70px;border-radius:8px;background:var(--panel2);overflow:hidden}.idc-thumb img{width:100%;height:100%;object-fit:cover}
/* v2.6.2 keuangan platform */
.pf-stat span{display:block;color:var(--ink3);font-size:13px}.pf-stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums;margin:2px 0}.pf-stat small{color:var(--ink3);font-size:12px}
.pf-stat.pf-pos b{color:var(--ok,#129a52)}.pf-stat.pf-neg b{color:var(--bad,#dc2626)}
.pf-wrap>*{margin-bottom:14px}.pf-wrap>.dgrid{margin-bottom:14px}
/* v2.6.3 deteksi fraud */
.fr-sum{margin-bottom:12px}.fr-stat b{display:block;font-size:26px;font-variant-numeric:tabular-nums}.fr-stat span{color:var(--ink3);font-size:13px}
.fr-stat.bad b{color:var(--bad,#dc2626)}.fr-stat.warn b{color:#d97706}.fr-item{margin-bottom:10px}.fr-title{display:block;margin:6px 0 2px;overflow-wrap:anywhere}
/* v2.7.0 hak akses paket */
.pa-row{margin-bottom:10px}.pa-tree{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 18px}.pa-g h4{margin:10px 0 4px}
.pa-n{display:flex;gap:8px;align-items:flex-start;padding:3px 0 3px calc(var(--d) * 18px);font-size:14px}.pa-n input:disabled+*{opacity:.5}
.pa-promo{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:6px;margin-bottom:6px}@media (max-width:640px){.pa-promo{grid-template-columns:1fr 1fr}.pa-promo select{grid-column:1/-1}}
/* v2.8.0 Google Analytics */
.ga-help{margin:6px 0 12px;font-size:13px}.ga-help summary{cursor:pointer;color:var(--pri)}.ga-help ol{margin:6px 0 0;padding-left:18px}.ga-sum{margin:10px 0}.ga-name{overflow-wrap:anywhere;min-width:0}
/* v2.8.0 kotak masuk email */
.mb-wrap{display:grid;grid-template-columns:200px 340px 1fr;gap:12px;height:calc(100vh - 170px);min-height:460px}.mb-folders,.mb-list,.mb-read{overflow:auto;padding:6px}
.mb-fold{display:flex;justify-content:space-between;width:100%;padding:9px 10px;border:0;background:none;color:inherit;font:inherit;border-radius:8px;cursor:pointer;text-align:left}.mb-fold.on{background:var(--panel2);font-weight:700}
.mb-fold .badge,.mb-item .badge{background:var(--pri);color:#fff;border-radius:99px;padding:0 8px;font-size:12px}
.mb-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;padding:9px 8px;cursor:pointer}.mb-item.on{background:var(--panel2)}
.mb-item.unread .mb-from,.mb-item.unread .mb-subj{font-weight:800}.mb-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mb-subj{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-read{padding:12px 14px}.mb-frame{width:100%;min-height:300px;border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:8px}.mb-text{white-space:pre-wrap;font-family:inherit;overflow-wrap:anywhere;margin-top:10px}
.mb-att{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.mb-back{display:none}
@media (max-width:900px){.mb-wrap{grid-template-columns:1fr;height:auto}.mb-list,.mb-read{display:none}.mb-wrap.list .mb-folders,.mb-wrap.read .mb-folders,.mb-wrap.read .mb-list{display:none}.mb-wrap.list .mb-list,.mb-wrap.read .mb-read{display:block}.mb-back{display:inline-flex;margin-bottom:6px}}
/* v2.8.0 kelompok menu panel admin yang bisa dilipat */
.nav .grp.fold{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;color:var(--ink3);font-weight:700;letter-spacing:.02em;padding:14px 10px 6px;text-align:left}
.nav .grp.fold:hover{color:var(--ink)}.nav .grp.fold .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .15s}
.nav .grp.fold.closed .caret{transform:rotate(-45deg);margin-bottom:0}.nav a.hid{display:none}
.app.mini .nav .grp.fold{font-size:0;padding:10px 6px 4px}.app.mini .nav .grp.fold .caret{display:none}.app.mini .nav a.hid{display:flex}
/* v2.16.1 halaman Domain pemilik toko */
.dm-res{display:grid;gap:8px}
.dm-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel2)}
.dm-item .l{min-width:0;flex:1 1 160px}.dm-item .nm{font-weight:700;font-size:15px;word-break:break-all}
.dm-item .pr{text-align:right;white-space:nowrap;margin-left:auto}.dm-item .pr b{font-size:15px}
.dm-item.off{opacity:.7}.dm-item s,.dm-price s{color:var(--ink3);font-size:11.5px;font-weight:400}
.dm-ok{color:var(--ok)}
.dm-price{width:100%;border-collapse:collapse;font-size:13px}
.dm-price th{font-size:11.5px;color:var(--ink3);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.dm-price th,.dm-price td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:top}
.dm-price th:first-child,.dm-price td:first-child{text-align:left}
.dm-price td s{display:block}
.dm-doc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line)}
.dm-doc:last-child{border-bottom:0}
@media(max-width:420px){.dm-item .act{width:100%}.dm-item .act .btn{width:100%}.dm-price{font-size:12px}.dm-price th,.dm-price td{padding:8px 3px}}
/* v2.19.0 sumber daya server (Ringkasan superadmin) */
.srv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:820px){.srv-grid{grid-template-columns:repeat(2,1fr)}}
.srv-g{text-align:center;min-width:0}
.srv-r{position:relative;width:100%;max-width:150px;margin:0 auto;aspect-ratio:1}
.srv-r svg{width:100%;height:100%;transform:rotate(-90deg)}
.srv-bg{fill:none;stroke:var(--line);stroke-width:7;opacity:.6}
.srv-fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .6s ease}
.srv-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.srv-v b{font-size:26px;font-weight:700;line-height:1}
.srv-v b small{font-size:13px;font-weight:600}
.srv-v span{font-size:12px;color:var(--ink3);margin-top:4px}
.srv-s{font-size:12px;color:var(--ink3);margin-top:4px;word-break:break-word}
.srv-net{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
@media (max-width:820px){.srv-net{grid-template-columns:repeat(2,1fr)}}
.srv-net span{font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--pri) 7%,transparent);text-align:center}
/* v2.21.0: pemberitahuan pesan masuk di panel admin */
#pulse-box{position:fixed;top:calc(var(--top) + 8px);right:16px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.pulse-card{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r2,12px);background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer;animation:pulseIn .25s ease-out}
.pulse-card b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pulse-card .small{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink2,var(--ink))}
.pulse-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--pri)}.pulse-ic.chat{background:#25d366}.pulse-ic svg{width:18px;height:18px}
.pulse-panel{display:flex;flex-direction:column;gap:8px;padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r2,12px);background:var(--panel2,var(--panel))}
.pulse-row{display:flex;align-items:center;gap:10px;min-width:0}.pulse-row .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pulse-row .pulse-ic{width:28px;height:28px}.pulse-row .pulse-ic svg{width:15px;height:15px}
@keyframes pulseIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:820px){#pulse-box{right:8px;left:8px;width:auto}}
/* v2.22.0: gambar di artikel bantuan */
.md-fig{margin:14px 0}.md-fig img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px}.md-fig figcaption{font-size:12.5px;color:var(--ink3);margin-top:6px}
/* v2.23.0: QRIS dinamis di jendela bayar kasir */
.qris-dyn{display:flex;flex-direction:column;align-items:center;gap:6px}
.qris-img{width:min(260px,100%);aspect-ratio:1;background:#fff;border-radius:12px;padding:8px;display:grid;place-items:center;border:1px solid var(--line)}
.qris-img svg,.qris-img img{width:100%;height:100%;display:block}
.qris-dyn.dead .qris-img{opacity:.25}
.qris-ok{width:96px;height:96px;border-radius:50%;background:#ecfdf3;color:#067647;display:grid;place-items:center}.qris-ok svg{width:56px;height:56px}
.qris-amt{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* v2.25.0: ringkasan stok & pilih massal di daftar produk */
.prod-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.prod-kpis button.kpi{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.prod-kpis button.kpi:hover{border-color:var(--pri)}.prod-kpis button.kpi.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)}
.prod-kpis .kpi .muted{margin-top:2px}
.prod-kpis .kpi.k-ok .v{color:var(--ok)}.prod-kpis .kpi.k-warn .v{color:var(--warn)}.prod-kpis .kpi.k-bad .v{color:var(--bad)}
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;border:1px dashed var(--line);border-radius:var(--r2,10px);background:var(--panel)}
.bulkbar .check{margin:0;font-weight:600}
input.pick{width:18px;height:18px;cursor:pointer;accent-color:var(--pri)}
td[data-l="Pilih"]{width:44px;cursor:pointer}
@media (max-width:760px){.prod-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.prod-kpis .kpi .v{font-size:19px}
  /* kartu HP: kotak centang di kiri baris nama produk, tanpa baris "Pilih" sendiri */
  .tbl.cards tr:has(td[data-l="Pilih"]){position:relative}
  .tbl.cards td[data-l="Pilih"]{position:absolute;left:12px;top:12px;width:auto;padding:0;z-index:1}.tbl.cards td[data-l="Pilih"]::before{display:none}
  .tbl.cards tr:has(td[data-l="Pilih"]) td[data-l="Produk"]{padding-left:30px}.tbl.cards tr:has(td[data-l="Pilih"]) td[data-l="Produk"]::before{display:none}.tbl.cards tr:has(td[data-l="Pilih"]) td[data-l="Produk"]>.cv{text-align:left;width:100%}}
.bulk-price{align-items:end}
/* v2.26.0: menu Ekspor & impor */
.io-page{display:flex;flex-direction:column;gap:14px}
.io-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.io-card{display:flex;flex-direction:column;gap:12px}
.io-h{display:flex;gap:14px;align-items:flex-start}.io-h h3{margin:0}.io-h p{margin:4px 0 0}
.io-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.io-ic.pri{background:var(--pri-soft);color:var(--pri);border-color:transparent}.io-ic .ico{width:22px;height:22px}
.io-btns{flex-wrap:wrap;gap:8px}.io-mig{border-color:var(--pri);background:linear-gradient(180deg,var(--pri-soft),transparent 70%),var(--panel)}
.io-mig .io-btns{margin-top:12px}
.io-g{margin:12px 0 4px;font-size:13px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.io-more{margin:10px 0;border:1px solid var(--line);border-radius:var(--r2);padding:8px 12px}.io-more summary{cursor:pointer;font-weight:700}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px;margin-top:8px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid4{grid-template-columns:1fr}.io-btns .btn{flex:1 1 auto}}
/* v2.26.0: varian di kasir */
.pitem.var .vtag{display:inline-block;padding:1px 6px;border-radius:999px;background:var(--pri-soft);color:var(--pri);font-weight:700;font-size:10.5px;margin-right:2px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.vbtn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:inherit;cursor:pointer;min-height:64px}
.vbtn:hover{border-color:var(--pri)}.vbtn b{font-size:14px}.vbtn span{font-weight:800;font-variant-numeric:tabular-nums;color:var(--glow)}.vbtn small{color:var(--ink3);font-size:11.5px}
.vbtn.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)}.vbtn.hit{border-color:var(--glow)}.vbtn.out{opacity:.55}
.vchip{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--pri);background:var(--pri-soft);color:var(--pri);font:700 11.5px var(--font);cursor:pointer;vertical-align:1px}

/* v2.27.0: libur di jadwal, lembur, slip gaji */
.shift-cal .day.hol{border-color:var(--bad);background:linear-gradient(180deg,var(--bad-soft),transparent 60%),var(--panel2)}
.shift-cal .day.hol>b{color:var(--bad)}
.hol-tag{font-size:11px;font-weight:700;color:var(--bad);margin:-2px 0 5px;line-height:1.3}
.shift-cal .sh.ot{background:var(--warn-soft)}
.slip-frame{width:100%;height:min(70vh,760px);border:1px solid var(--line);border-radius:var(--r2);background:#eef1f5}
.sum-box{margin:12px 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg2)}.sum-box .big{font-size:16px;border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.hol-list{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--r2);padding:4px 10px}
.hol-list .list-row{font-size:12.5px}
/* v2.27.0: perintah suara produk */
.vc-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.vc-mic{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:var(--pri);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(31,111,229,.35)}
.vc-mic .ico{width:28px;height:28px}.vc-mic.on{background:var(--bad);animation:vcpulse 1.2s infinite}
@keyframes vcpulse{0%{box-shadow:0 0 0 0 rgba(255,93,108,.5)}70%{box-shadow:0 0 0 16px rgba(255,93,108,0)}100%{box-shadow:0 0 0 0 rgba(255,93,108,0)}}
@media (prefers-reduced-motion:reduce){.vc-mic.on{animation:none}}
.vc-item{border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;margin-top:10px}.vc-item.off{opacity:.8}
.vc-ch{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px}.vc-ch td{padding:3px 6px;border-top:1px solid var(--line)}.vc-ch td:first-child{color:var(--ink2)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.spg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spg-o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.spg-o b{font-size:14px}.spg-o small{font-size:12px}.spg-o small.ok{color:var(--ok)}
.spg-o:hover{border-color:var(--pri)}.spg-o.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft);background:var(--pri-soft)}
.spg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'a b' 'c b';grid-template-rows:auto 1fr;gap:14px 20px;margin-top:14px;align-items:start}.spg-a{grid-area:a}.spg-b{grid-area:b}.spg-c{grid-area:c}
.spg-form{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px 14px;background:var(--bg2)}.spg-h{font-weight:700;margin-bottom:8px}
@media (max-width:900px){.spg-cols{grid-template-columns:minmax(0,1fr);grid-template-areas:'a' 'b' 'c';grid-template-rows:auto}}
@media (max-width:520px){.spg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oh-cour{display:flex;flex-wrap:wrap;gap:6px}
/* v2.28.0 halaman Langganan: paket saat ini, pilih paket + add on + trial, tabel banding */
.seg{display:inline-flex;gap:4px;flex-wrap:nowrap}
.sub-cur{margin-bottom:14px;background:linear-gradient(135deg,var(--pri-soft),transparent 60%),var(--panel)}
.sub-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:14px}
.meter i{display:block;height:6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);margin-top:4px;overflow:hidden}
.meter i b{display:block;height:100%;background:var(--pri);border-radius:6px}.meter i b.warn{background:var(--warn)}.meter i b.bad{background:var(--bad)}
.sub-pick{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.sub-main{min-width:0}
.sub-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.sub-plan{margin:0;cursor:pointer;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}.sub-plan:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.sub-plan.sel{border:2px solid var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}.sub-plan.nofit{opacity:.7;cursor:not-allowed}
.sub-price{font-size:1.4em;font-weight:800;margin:4px 0 2px}.sub-price small{font-size:.55em;font-weight:600;color:var(--ink3)}
.sub-adds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.sub-add{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);cursor:pointer}
.sub-add input{margin-top:3px;accent-color:var(--pri)}.sub-add:has(input:checked){border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)}.sub-add.off{opacity:.62;cursor:not-allowed}
.sub-sum{position:sticky;top:calc(var(--top) + 12px);margin:0}
.sub-acts{display:flex;flex-direction:column;gap:6px;margin-top:12px}.sub-acts>.btn{width:100%;justify-content:center}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r3);background:var(--panel)}
.ptable{border-collapse:separate;border-spacing:0;width:100%;min-width:600px;font-size:13.5px}
.ptable th,.ptable td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.ptable th[scope=row]{text-align:left;font-weight:500;color:var(--ink2);position:sticky;left:0;background:var(--panel);z-index:1;min-width:150px}
.ptable thead th{background:var(--panel2);font-size:14px}.ptable thead th:first-child{text-align:left;position:sticky;left:0;z-index:2}
.ptable thead small{display:block;font-weight:500;color:var(--ink3);font-size:12px}
.ptable .cur{background:var(--pri-soft)}.ptable td svg{width:16px;height:16px;vertical-align:middle}
.ptable .csec th{background:var(--panel2);text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);position:static}
.ptable .cgh button{all:unset;cursor:pointer;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:center}
.ptable .cgh button::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.ptable .cg.open .cgh button::before{transform:rotate(45deg)}.ptable .cgh button:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}
.ptable .cgi{display:none}.ptable .cg.open .cgi{display:table-row}.ptable .cgi th{font-size:13px}
@media (max-width:900px){.sub-pick{grid-template-columns:minmax(0,1fr)}.sub-sum{position:static}}
@media (max-width:560px){.ptable{min-width:520px}.ptable th[scope=row]{min-width:112px}.ptable th,.ptable td{padding:8px 6px}}
/* v2.29.0 editor desain website & katalog WA */
.sfe-card{background:linear-gradient(135deg,var(--pri-soft),transparent 55%),var(--panel)}.sfe-sw{width:28px;height:28px;border-radius:50%;display:inline-block;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line2)}
.sfe{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column}
.sfe-top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.sfe-top .grow{flex:1;min-width:120px}
.sfe-body{flex:1;min-height:0;display:grid;grid-template-columns:400px 1fr}
.sfe-set{overflow:auto;border-right:1px solid var(--line);padding:10px 12px 40px;background:var(--panel)}
.sfe-pre{position:relative;overflow:hidden;background:var(--bg2);display:flex;justify-content:center;align-items:stretch;padding:14px}
.sfe-frame{height:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh);transition:width .2s}.sfe-frame.m{width:390px;max-width:100%}.sfe-frame.d{width:100%}
.sfe-frame iframe{width:100%;height:100%;border:0;display:block}
.sfe-sec{border:1px solid var(--line);border-radius:var(--r2);margin-bottom:8px;background:var(--panel)}.sfe-sec>summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.sfe-sec>summary::after{content:"+";color:var(--ink3);font-weight:700}.sfe-sec[open]>summary::after{content:"\2212"}.sfe-sec>summary::-webkit-details-marker{display:none}
.sfe-in{padding:0 14px 14px}.sfe-l{font-size:12.5px;font-weight:700;color:var(--ink2);margin:12px 0 6px}
.sfe-tpls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sfe-tpl{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel2);color:var(--ink);cursor:pointer}
.sfe-tpl small{color:var(--ink3);font-size:11.5px;line-height:1.35}.sfe-tpl.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)}
.sfe-mini{display:grid;gap:4px;height:64px;padding:6px;border-radius:8px;background:var(--bg2);grid-template-columns:1fr 1fr;align-content:start}.sfe-mini i,.sfe-mini b{display:block;border-radius:4px;background:var(--line2)}
.sfe-mini b{grid-column:1/-1;height:18px;background:var(--pri)}.sfe-mini.t-modern i{height:16px}
.sfe-mini.t-grosir{grid-template-columns:1fr}.sfe-mini.t-grosir i{height:10px}
.sfe-mini.t-butik i{height:52px}.sfe-mini.t-menu{grid-template-columns:1fr}.sfe-mini.t-menu i{height:14px;background:linear-gradient(90deg,var(--line2) 70%,var(--pri) 70%)}
.sfe-sws{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sfe-sws .sfe-sw{cursor:pointer;width:32px;height:32px;padding:0}.sfe-sws .sfe-sw.on{box-shadow:0 0 0 2px var(--ink)}
.sfe-cust input{width:36px;height:36px;border:0;padding:0;background:none;cursor:pointer}
.sfe-bn{border:1px solid var(--line);border-radius:var(--r2);padding:10px;margin-bottom:10px;background:var(--panel2)}.sfe-bn-im{aspect-ratio:8/3;border-radius:8px;overflow:hidden;background:var(--bg2);display:flex;align-items:center;justify-content:center}.sfe-bn-im img{width:100%;height:100%;object-fit:cover}
.sfe-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--line)}.sfe-row .switch{margin:0}
.sfe-tabs{display:none}
@media (max-width:900px){.sfe-body{grid-template-columns:1fr}.sfe-pre{display:none}.sfe.show-pre .sfe-pre{display:flex}.sfe.show-pre .sfe-set{display:none}.sfe-tabs{display:inline-flex}.sfe-dev{display:none}.sfe-frame.m{width:100%}}
/* v2.31.0 mode restoran & kafe */
.rseg{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--bg2);flex-wrap:nowrap;max-width:100%}
.rseg button{border:0;background:none;color:var(--ink2);font:600 13px var(--font);padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.rseg button.on{background:var(--pri);color:var(--pri-ink)}.rseg button:disabled{opacity:.45;cursor:not-allowed}
.ro-bar{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ro-types{width:100%}.ro-types button{flex:1}
.ro-row{display:flex;gap:8px}.ro-tbl{justify-content:flex-start;min-width:0}.ro-tbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-tbl.set{border-color:var(--pri);color:var(--pri)}.ro-tbl em{font-style:normal;margin-left:auto}
.ro-mods{grid-column:1/-1;font-size:12px;color:var(--warn);margin:-2px 0 2px}
.ro-opts{display:flex;flex-direction:column;gap:12px}.ro-gh{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:6px}
.ro-ch{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.ro-c{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line2);border-radius:var(--r2);cursor:pointer;min-width:0}
.ro-c span{flex:1;min-width:0}.ro-c small{color:var(--ink3);white-space:nowrap}.ro-c:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.ro-area{margin:12px 0 6px;font-size:13px;color:var(--ink2)}
.ro-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ro-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:76px}
.ro-t b{font-size:15px}.ro-t small{font-size:11.5px;color:var(--ink3)}.ro-t:hover{border-color:var(--pri)}
.ro-t.busy{border-color:var(--warn);background:var(--warn-soft)}.ro-t.busy span{font-weight:700}
.ro-list{display:flex;flex-direction:column;gap:6px}
.ro-b{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ro-b small{grid-column:1/-1;color:var(--ink3);font-size:12px}.ro-b:hover{border-color:var(--pri)}
.ro-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:14px}
@media (max-width:760px){.ro-set{grid-template-columns:minmax(0,1fr)}}
.ro-ed{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ro-er{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 70px auto auto;gap:6px;align-items:center}
.ro-og{border:1px solid var(--line);border-radius:var(--r2);padding:10px;margin-bottom:8px}
.ro-ogh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.ro-ogh [data-on]{flex:1;min-width:160px}
.ro-oc{display:grid;grid-template-columns:minmax(0,1fr) 120px auto auto;gap:6px;margin-bottom:6px;align-items:center}.ro-oc input[type=hidden]{display:none}
.ro-queue{font-size:15px;margin:0 0 6px}.ro-queue b{display:block;font-size:44px;line-height:1.1;color:var(--pri)}
/* v2.32.0 add on restoran: tanda pesanan QR & siap diantar di kasir, kotak add on di pengaturan, daftar pesanan, kartu QR meja */
.ro-feed{display:flex;gap:8px;flex-wrap:wrap}
.ro-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ro-chip .ico{width:16px;height:16px}.ro-chip b{min-width:20px;padding:0 6px;border-radius:999px;text-align:center;color:#fff}
.ro-chip.qr{border-color:var(--pri);color:var(--pri)}.ro-chip.qr b{background:var(--pri);animation:ro-pulse 1.6s ease-in-out infinite}
.ro-chip.rd{border-color:var(--ok);color:var(--ok)}.ro-chip.rd b{background:var(--ok)}
/* v2.34.0: lunas QRIS dari meja, reservasi */
.ro-chip.pd{border-color:var(--ok);color:var(--ok)}.ro-chip.pd b{background:var(--ok);animation:ro-pulse 1.6s ease-in-out infinite}
.ro-chip.rv{border-color:var(--warn);color:var(--warn)}.ro-chip.rv b{background:var(--warn)}
.ro-t.paid{border-color:var(--ok);background:var(--ok-soft)}.ro-t.paid small{color:var(--ok);font-weight:700}
.ro-t.resv{border-color:var(--pri);border-style:dashed;background:var(--pri-soft)}.ro-t.resv span{font-weight:700;color:var(--pri)}
.ro-b.paid{border-color:var(--ok)}.ro-b.paid small{color:var(--ok)}
.ro-rvh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ro-rvh .inp{width:auto;max-width:170px}.ro-rvh b{flex:1;min-width:140px}
.ro-chev{font-size:22px;line-height:1;font-weight:700}
.ro-rvl{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ro-rv{display:flex;gap:12px;border:1px solid var(--line2);border-radius:var(--r2);padding:10px 12px}.ro-rv.pending{border-color:var(--warn)}.ro-rv.cancelled,.ro-rv.rejected,.ro-rv.noshow{opacity:.65}
.ro-rvt{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;min-width:52px}
.ro-rvb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.ro-rvn{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ro-rvn b{font-size:15px}
.ro-rvb .ico{width:13px;height:13px;vertical-align:-2px}
.ro-rva{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
@keyframes ro-pulse{50%{box-shadow:0 0 0 5px rgba(47,140,255,.25)}}
.ro-ads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}
@media (max-width:760px){.ro-ads{grid-template-columns:minmax(0,1fr)}}
.ro-ad{border:1px solid var(--line2);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column}
.ro-adh{display:flex;gap:10px;align-items:flex-start}.ro-adh>div{flex:1;min-width:0}.ro-adh b{display:block}.ro-adh small{display:block;color:var(--ink3);font-size:12.5px;line-height:1.35}
.ro-adi{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}.ro-adi .ico{width:18px;height:18px}
.ro-adh .tag{flex:none;white-space:nowrap}
.ro-adr{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto}
/* v2.34.0: tiga kotak add on (Layar dapur + antrean, QR Order + bayar dari meja, Reservasi) */
@media (min-width:1280px){.ro-ads{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1279px){.ro-ad[data-ad="resv"]{grid-column:1/-1}}
.ro-sub{border-top:1px dashed var(--line2);margin-top:12px;padding-top:10px}
/* v2.35.0: atribut hidden harus menang atas display:flex dari .check / .switch / .f */
.ro-ads [hidden],.modal [hidden]{display:none!important}
.ro-inl{margin:6px 0 8px}
.ro-subh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.ro-subh b{font-size:13.5px}.ro-subh .tag{flex:none}
.ro-lnk{display:flex;gap:8px}.ro-lnk .inp{flex:1;min-width:0;font-size:13px}
.ro-lqr{width:180px;height:180px;margin:14px auto;background:#fff;border-radius:12px;padding:8px}.ro-lqr svg{width:100%;height:100%;display:block}
.ro-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px}
.ro-qrl{display:flex;flex-direction:column;gap:10px}
.ro-qo{border:1px solid var(--line2);border-radius:var(--r2);padding:10px 12px}
.ro-qoh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.ro-qoh b{font-size:15px}.ro-qoh .muted{flex:1;min-width:0}.ro-qoh .num{font-weight:700}
.ro-ol div{padding:2px 0}.ro-ol small{display:block;color:var(--warn);font-size:12px;padding-left:24px}
.ro-qrt{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ro-qrc{border:1px solid var(--line2);border-radius:var(--r2);padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ro-qrc .check{align-self:stretch;justify-content:center}.ro-qri{width:110px;height:110px;background:#fff;border-radius:8px;padding:4px}.ro-qri svg{width:100%;height:100%;display:block}
/* v2.33.0 pelayan, menu habis, harga ojol */
.ro-sold{color:var(--bad);font-weight:700}
.ro-wn{margin:8px 0 0;text-align:center}
.ro-onl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 2px 30px}.ro-onl .inp{width:auto;min-width:0;padding-top:7px;padding-bottom:7px}.ro-onl [data-opp]{width:72px}
.ro-onl[hidden],.ro-onl [hidden]{display:none}
.ro-sl{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.ro-si{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r2);cursor:pointer}
.ro-si small{display:block;color:var(--ink3);font-size:12px}.ro-si.on{border-color:var(--bad);background:var(--bad-soft)}.ro-si .switch{margin:0;flex:none}
button.ro-si{width:100%;background:transparent;color:var(--ink);font:inherit;text-align:left}button.ro-si:hover{border-color:var(--pri)}button.ro-si.on{border-color:var(--pri);background:var(--pri-soft)}
/* v2.36.0 profil mode: bagian khas toko di form menu (mode restoran) dilipat */
details.ro-more{margin:0 0 12px;border:1px dashed var(--line);border-radius:12px;padding:8px 12px}
details.ro-more>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--ink2);padding:2px 0}
details.ro-more[open]>summary{margin-bottom:10px}
.ro-tp{margin-bottom:8px}.ro-tp .list-row{border:0;padding-bottom:2px}
.ro-pbar{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden}.ro-pbar i{display:block;height:100%;background:var(--pri);border-radius:6px}
/* v2.36.0 pilihan jenis usaha saat daftar */
.reg-f{margin-bottom:12px}.reg-f>small{display:block;margin-top:5px}
.reg-mode{display:flex;width:100%}.reg-mode label{flex:1;display:flex;cursor:pointer}.reg-mode input{position:absolute;opacity:0;pointer-events:none}
.reg-mode span{flex:1;text-align:center;font:600 13px var(--font);color:var(--ink2);padding:8px 10px;border-radius:7px}
.reg-mode input:checked+span{background:var(--pri);color:var(--pri-ink)}.reg-mode.three span{padding:8px 4px;font-size:12.5px;line-height:1.25}.reg-mode input:focus-visible+span{outline:2px solid var(--pri);outline-offset:1px}
.ro-chip.ck{border-color:var(--warn);color:var(--warn)}.ro-chip.ck b{background:var(--warn);animation:ro-pulse 1.6s ease-in-out infinite}
/* v2.36.0 QRIS pelanggan (bayar dari meja & DP): payment gateway atau QRIS toko statis */
.ro-pay{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.ro-pay .ro-subh{display:flex;justify-content:flex-start;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.ro-payr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ro-payr>select{max-width:320px;flex:1 1 220px}
.ro-qimg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ro-qimg img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line)}
.ro-pay [hidden]{display:none!important}
/* v2.36.0 superadmin: Fitur per mode (paket x fitur) */
.pam-wrap{margin-top:12px;max-height:70vh;overflow:auto}
.pam-t th.c,.pam-t td.c{text-align:center;min-width:96px}.pam-t td:first-child,.pam-t th:first-child{position:sticky;left:0;background:var(--panel);z-index:1;min-width:220px}
.pam-t thead th{position:sticky;top:0;background:var(--panel);z-index:2}.pam-t thead th:first-child{z-index:3}
.pam-t input.num{width:78px;text-align:center}.pam-t tr.csec th{background:var(--panel2);text-align:left}.pam-t tr.csec th:first-child{position:sticky;left:0;white-space:nowrap}
@media(max-width:640px){.pam-t td:first-child,.pam-t th:first-child{min-width:132px;max-width:150px;font-size:12.5px;padding-left:8px;padding-right:6px}.pam-t th.c,.pam-t td.c{min-width:78px}.pam-t input.num{width:64px}}
/* v2.37.0 tahap 6: stasiun printer, pilihan alasan, kirim yang ditahan, panggilan */
.ro-stn{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}.ro-stn .ro-cats{margin:4px 0 8px}
.ro-chips{display:flex;flex-wrap:wrap;gap:6px}
.ro-send{width:100%;margin-top:8px;justify-content:center;border-color:var(--warn);color:var(--warn)}
.ro-chip.cl{border-color:var(--pri);color:var(--pri)}.ro-chip.cl b{background:var(--pri);animation:ro-pulse 1.6s ease-in-out infinite}
.ro-pay [hidden],.ro-set [hidden]{display:none!important}
.ro-pl{max-width:130px;overflow:hidden}.ro-pl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ro-pl.on{border-color:var(--pri);color:var(--pri)}
@media (max-width:520px){.ro-oc{grid-template-columns:minmax(0,1fr) 96px;}.ro-oc .ro-pl{max-width:none;grid-column:1}}
.ro-c.off{opacity:.5;cursor:not-allowed}
/* v2.40.0: petunjuk record CNAME domain toko (Cloudflare for SaaS) */
.cname-box{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);align-items:center}
.cname-box span{color:var(--ink2)} .cname-box b{word-break:break-all;user-select:all}
/* v2.41.0: Pengaturan > Cabang usaha */
.biz-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.biz-top>div:first-child{flex:1 1 320px;min-width:0}
.biz-add{display:flex;align-items:center;gap:10px;flex:none}
.biz-unused{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.biz-unused>span{flex:1 1 240px;min-width:0}
.biz-unused .btn{margin-left:auto}
.biz-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin-top:14px}
.biz-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel2);min-width:0}
.biz-card.on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri-soft)}
.biz-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.biz-head b{font-size:15px;margin-right:2px;overflow-wrap:anywhere}
.biz-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.biz-meta span{display:inline-flex;align-items:center;gap:5px}
.biz-meta svg{width:15px;height:15px;opacity:.7}
.biz-act{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.tag.biz-resto{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tag.biz-retail{background:rgba(69,214,245,.14);background:color-mix(in srgb,var(--glow) 15%,transparent);color:var(--glow);border-color:transparent}
.biz-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}.biz-note svg{width:15px;height:15px;opacity:.7;flex:none}
/* v2.43.0 Bahan & biaya: kartu ringkasan 2 kolom di HP */
.fc-sum{margin-bottom:14px}
.fc-sum .an-stat .btn{padding:2px 8px;min-height:0}
@media(max-width:560px){.fc-sum>.c3,.fc-sum>.c4{grid-column:span 6}.fc-sum>.c4:last-child:nth-child(odd){grid-column:span 12}.fc-sum .an-stat b{font-size:20px}}

/* v2.45.0 jadwal menu / happy hour & kanal ojol */
.ro-hh{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--ok-soft,#e6f6ec);color:var(--ok,#157a3d);font-size:11px;font-weight:700;vertical-align:middle}
.ro-chs{width:100%;flex-wrap:wrap}.ro-chs button{flex:1;min-width:0}
.ro-sch{border:1px solid var(--line2);border-radius:var(--r2);padding:10px 12px;margin-bottom:10px}
.ro-sch .grid2{align-items:end}.ro-days{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.ro-days label{cursor:pointer}.ro-days input{position:absolute;opacity:0;pointer-events:none}
.ro-days span{display:inline-block;min-width:38px;text-align:center;padding:6px 8px;border:1px solid var(--line2);border-radius:var(--r2);font-size:13px}
.ro-days input:checked+span{background:var(--pri);border-color:var(--pri);color:#fff}
.ro-days input:focus-visible+span{outline:2px solid var(--pri);outline-offset:2px}
.ro-sch-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.ro-chr{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line2);border-radius:var(--r2);padding:10px 12px;margin-bottom:10px}
.ro-chr .full{grid-column:1/-1}
.ro-cpr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:8px;align-items:center;margin:6px 0}
@media (max-width:520px){.ro-cpr{grid-template-columns:1fr 1fr}.ro-cpr .check{grid-column:1/-1}}

/* v2.46.0 daftar tunggu meja */
.ro-wdone{margin-top:10px}
.ro-wdone summary{cursor:pointer}
.ro-row .btn span{white-space:nowrap}

/* v2.47.0 ulasan setelah makan & kartu stamp */
.ro-lo-search{margin-bottom:10px}
.ro-lo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel);padding:10px 12px;margin-bottom:8px;cursor:pointer;font:inherit;color:inherit}
.ro-lo-row:hover,.ro-lo-row:focus-visible{border-color:var(--pri)}.ro-lo-row span:first-child{min-width:0}.ro-lo-row b,.ro-lo-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ro-lo-row small{color:var(--ink3);font-size:12px}
.ro-lo-card{border:1px solid var(--line2);border-radius:var(--r3);padding:14px;margin-top:10px;background:var(--panel)}
.ro-lo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.ro-lo-head small{display:block;color:var(--ink3)}
.ro-lo-n{text-align:right;flex:none}.ro-lo-n b{font-size:28px;font-variant-numeric:tabular-nums}.ro-lo-n small{display:inline}
.ro-lo-dots{display:grid;grid-template-columns:repeat(auto-fit,minmax(26px,1fr));gap:8px;margin:12px 0 8px;max-width:420px}
.ro-lo-dots i{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line2);display:block}.ro-lo-dots i.on{border:2px solid var(--pri);background:var(--pri)}
.ro-lo-rwd{padding:8px 10px;border-radius:var(--r2);background:var(--pri-soft);font-weight:700}.ro-lo-rwd.ready{background:var(--ok-soft,var(--pri-soft));color:var(--ok)}
.ro-lo-log{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px}.ro-lo-log:first-of-type{border-top:0}
.ro-lo-sum{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ro-lo-avg b{display:block;font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}.ro-lo-avg small{display:block;color:var(--ink3);font-size:12px}
.ro-lo-st{color:#f59e0b;letter-spacing:1px;white-space:nowrap}
.ro-lo-dist>div{display:grid;grid-template-columns:14px 1fr 28px;gap:8px;align-items:center;font-size:12.5px;margin:2px 0}.ro-lo-dist i{height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:block}.ro-lo-dist u{display:block;height:100%;background:#f59e0b;text-decoration:none}.ro-lo-dist em{font-style:normal;color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.ro-lo-rev{border:1px solid var(--line2);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px;background:var(--panel)}.ro-lo-rev.hid{opacity:.62}
.ro-lo-revh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ro-lo-revh small{margin-left:auto}
.ro-lo-revc{margin:6px 0;white-space:pre-wrap;word-break:break-word}
.ro-lo-revr{margin:6px 0;padding:8px 10px;border-radius:var(--r2);background:var(--pri-soft);font-size:13.5px;word-break:break-word}
@media (max-width:520px){.ro-lo-sum{grid-template-columns:1fr}}
/* v2.48.0 pesanan katering: info acara di detail, pilihan diambil / diantar, alamat panjang tidak melebar */
.po-info{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:13.5px}.po-info span{display:inline-flex;align-items:center;gap:5px}.po-info svg{width:15px;height:15px}
.po-del{margin:0 0 12px}.po-adr{max-width:260px;white-space:normal;word-break:break-word}
/* v2.49.0 mode kiosk: tanda pesanan kiosk di kasir & nomor antrean di daftar */
.ro-chip.ki{border-color:var(--ok);color:var(--ok)}.ro-chip.ki b{background:var(--ok);animation:ro-pulse 1.6s ease-in-out infinite}
.ro-qoh b.ro-kno{min-width:46px;height:36px;padding:0 10px;border-radius:10px;background:var(--pri);color:#fff;display:inline-grid;place-items:center;font-size:19px;font-weight:800}

/* =====================================================================
   v2.56.0 DESAIN ULANG: menu utama dalam kelompok, submenu sebagai tab,
   header baru (cabang usaha, pencarian Ctrl K, akun), menu bawah HP dengan Kasir di tengah,
   gradasi biru ke ungu untuk elemen utama. Semua warna dari token di :root.
   ===================================================================== */
body{background:var(--bg)}
.btn{border-radius:var(--r2);transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--grad-sh)}
.btn.pri:hover{background:var(--grad);filter:brightness(1.06)}
.btn.sm{border-radius:var(--r1)}
.inp,select.inp,textarea.inp{background:var(--panel)}
:root[data-theme="light"] .inp,:root[data-theme="light"] select.inp,:root[data-theme="light"] textarea.inp{background:#fff}
.card{border-radius:var(--r3);box-shadow:var(--sh1)}
.kpi{border-radius:var(--r3);box-shadow:var(--sh1)}
.kpi.hero{background:var(--grad);box-shadow:var(--grad-sh)}
.kpi.hero::after{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);opacity:.5;mix-blend-mode:normal;right:-40px;top:-50px;width:170px;height:170px}
.tabs{gap:2px}
.tabs a{border-radius:8px 8px 0 0}
.tabs a:hover{color:var(--ink)}
.tag.pri{color:var(--pri)}

/* ---------- Menu samping ---------- */
.side{background:var(--bg2)}
:root[data-theme="light"] .side{box-shadow:1px 0 0 var(--line)}
.brand{border-bottom:0;height:var(--top);padding:14px 20px}
.nav{padding:4px 12px 20px}
.nav .grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:16px 12px 6px}
.nav a{gap:12px;padding:10px 12px;border-radius:var(--r2);color:var(--ink2);font-weight:600;font-size:14px;margin-bottom:2px;transition:background .15s,color .15s}
.nav a .ico{width:19px;height:19px;opacity:.9}
.nav a:hover{background:var(--pri-soft);color:var(--ink)}
.nav a.mn.on{background:var(--grad);color:#fff;box-shadow:var(--grad-sh)}
.nav a.mn.on .ico{opacity:1}
.nav a.on{box-shadow:none}
.nav a.mn>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a.mn .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.6;flex:none;margin-right:2px;transition:transform .2s}
.nav a.mn.on .caret{transform:rotate(45deg);opacity:.9;margin-top:-3px}
.nav a .tag{margin-left:auto}
.nav a.mn.on .tag.bad{background:#fff;color:var(--bad)}
.nav .subs{display:none;margin:2px 0 8px 22px;padding-left:12px;border-left:1.5px solid var(--line)}
.nav .subs.open{display:block;animation:subIn .18s ease-out}
@keyframes subIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav a.sub{padding:7px 10px;font-size:13.5px;font-weight:500;color:var(--ink2);margin-bottom:1px}
.nav a.sub.on{background:var(--pri-soft);color:var(--pri);font-weight:700}
.nav .subs a.hid{display:none}
.side-foot{margin:8px 12px 12px;border:0;border-radius:var(--r3);background:var(--pri-soft);padding:12px 14px}
@media (min-width:1025px){
  .app.mini .nav{padding:6px 10px}
  .app.mini .nav .subs{display:none!important}
  .app.mini .nav a.mn .caret{display:none}
  .app.mini .nav a.mn.on{box-shadow:var(--grad-sh)}
  .app.mini .side-foot{margin:8px;padding:10px 6px;background:transparent}
}

/* ---------- Header ---------- */
.top{height:var(--top);gap:10px;padding:0 24px;border-bottom:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.branch-sel:empty{display:none}
.brpick{display:flex;align-items:center;gap:10px;height:46px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--sh1);min-width:0;max-width:300px;cursor:pointer}
.brpick.static{cursor:default}
.br-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri);flex:none}
.br-ic.resto{background:var(--warn-soft);color:var(--warn)}
.br-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.br-tx small{font-size:11px;color:var(--ink3);font-weight:600}
.br-tx b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brpick select.inp{height:auto;border:0;background:transparent!important;padding:0 2px 0 0;font:700 14px var(--font);color:var(--ink);box-shadow:none;cursor:pointer;width:auto;max-width:210px;text-overflow:ellipsis}
.brpick select.inp:focus{box-shadow:none}
.brpick:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.search-btn{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 14px;min-width:300px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink3);font:500 14px var(--font);cursor:pointer;box-shadow:var(--sh1);transition:border-color .15s}
.search-btn:hover{border-color:var(--pri)}
.search-btn>span{flex:1;text-align:left}
.search-btn kbd{font:600 11px var(--font);padding:3px 7px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink3)}
.user-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:3px 4px 3px 3px;border-radius:999px;font:inherit}
.user-btn:hover{background:var(--pri-soft)}
.user-btn .av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 13px var(--font);flex:none}
.user-btn .who{display:flex;flex-direction:column;text-align:left;line-height:1.2;max-width:150px}
.user-btn .who b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-btn .who small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .bell{border-radius:12px}

/* ---------- Judul halaman & tab submenu ---------- */
.phead{padding:8px 24px 0;max-width:1500px;width:100%}
.phead h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.subnav{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.subnav a:hover{border-color:var(--pri);color:var(--ink)}
.subnav a.on{background:var(--ink);border-color:var(--ink);color:var(--bg2)}
.content{padding:18px 24px 28px}
#ann{padding:12px 24px 0}
#ann:empty{display:none}

/* ---------- Pencarian (Ctrl K) ---------- */
.srch-in{display:flex;align-items:center;gap:8px;position:relative}
.srch-in .ico{position:absolute;left:12px;color:var(--ink3)}
.srch-in .inp{padding-left:40px;height:46px;font-size:15px}
.srch-list{margin-top:10px;max-height:min(60vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.srch-row{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:var(--r2);color:var(--ink)}
.srch-row b{font-weight:600;font-size:14px}
.srch-row span{font-size:12px;color:var(--ink3)}
.srch-row:hover,.srch-row.on{background:var(--pri-soft)}
.srch-row.on b{color:var(--pri)}
.srch-tip{margin:10px 0 0}

/* ---------- Tablet & HP ---------- */
@media (max-width:1024px){
  .top{padding:0 14px}
  .phead{padding:6px 16px 0}
  .content{padding:14px 16px 24px}
  #ann{padding:12px 16px 0}
  .search-btn{min-width:0}
}
@media (max-width:640px){
  .top{gap:6px;padding:0 10px;height:60px}
  .burger{display:none}
  .search-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:12px;flex:none}
  .brpick{height:44px;max-width:none;flex:0 1 auto;border:0;box-shadow:none;background:transparent;padding-left:0}
  .branch-sel{min-width:0;flex:0 1 auto}
  .brpick select.inp{max-width:calc(100vw - 230px)}
  .br-tx b{max-width:calc(100vw - 230px)}
  #net-pill{padding:0 8px}
  #net-pill>span:last-child{display:none}
  .user-btn .av{width:36px;height:36px}
  .phead{padding:4px 12px 0}
  .phead h1{font-size:20px}
  .subnav{margin:10px -12px 0;padding:0 12px 2px}
  .content{padding:12px 12px 100px}
  #ann{padding:10px 12px 0}
  .bottomnav{background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(28,39,84,.08);align-items:flex-end;height:calc(66px + env(safe-area-inset-bottom))}
  .bottomnav a{gap:3px;padding:9px 0 9px;font-size:11px;font-weight:600;color:var(--ink3);min-width:0}
  .bottomnav a .bn-ic{display:grid;place-items:center;height:24px}
  .bottomnav a .bn-l{max-width:100%;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bottomnav a.on{color:var(--pri)}
  .bottomnav a.fab .bn-ic{width:56px;height:56px;margin-top:-26px;border-radius:50%;background:var(--grad);color:#fff;box-shadow:var(--grad-sh);border:4px solid var(--bg)}
  .bottomnav a.fab .bn-ic .ico{width:24px;height:24px}
  .bottomnav a.fab.on{color:var(--pri)}
  .bottomnav a:active .bn-ic{transform:scale(.94)}
  .chat-fab{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media (max-width:1024px) and (min-width:641px){ .burger{display:inline-flex} }
body[data-page="pos"] .phead{display:none}
/* ---------- v2.56.0 Beranda ---------- */
body[data-page="dashboard"] .phead h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dh-greet{margin:2px 0 14px}
.dh-greet h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.dh-greet span{display:block;margin-top:2px}
.dh-quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.dq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:var(--r3);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh1);color:var(--ink);font-weight:600;font-size:13px;text-align:center;transition:transform .12s,border-color .15s}
.dq:hover{border-color:var(--pri)} .dq:active{transform:scale(.97)}
.dq .ico{width:42px;height:42px;padding:10px;border-radius:12px;background:var(--pri-soft);color:var(--pri)}
.dq1 .ico{background:var(--ok-soft);color:var(--ok)} .dq2 .ico{background:var(--warn-soft);color:var(--warn)} .dq3 .ico{background:var(--vi-soft);color:var(--vi)} .dq4 .ico{background:var(--bad-soft);color:var(--bad)} .dq5 .ico{background:var(--vi-soft);color:var(--vi)}
.dh-tools{margin-bottom:14px}
.dh-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.dh-hero{padding:22px 22px 18px;display:flex;flex-direction:column}
.dh-hero .l{display:flex;align-items:center;gap:8px;font-size:14px}
.dh-hero .v{font-size:36px;line-height:1.15;margin-top:8px}
.dh-sub{display:inline-flex;align-self:flex-start;margin-top:8px;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);font-size:12.5px;font-weight:600}
.dh-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:auto;padding-top:18px}
.dh-mini>div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 12px;min-width:0}
.dh-mini span{display:block;font-size:12px;opacity:.85}
.dh-mini b{display:block;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-mini small{display:block;font-size:11.5px;opacity:.8}
.dh-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kpi.st{padding:16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi.st .v{font-size:21px}
.kpi.st .st-n{color:var(--ink2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kpi.st .tag{align-self:flex-start;margin-top:6px}
.st-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:8px;background:var(--pri-soft);color:var(--pri)}
.st-ic.ok{background:var(--ok-soft);color:var(--ok)} .st-ic.warn{background:var(--warn-soft);color:var(--warn)} .st-ic.bad{background:var(--bad-soft);color:var(--bad)} .st-ic.vi{background:var(--vi-soft);color:var(--vi)}
.kpi.st.warn{background:linear-gradient(180deg,var(--warn-soft),var(--panel) 75%);border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.kpi.st.bad{background:linear-gradient(180deg,var(--bad-soft),var(--panel) 75%);border-color:color-mix(in srgb,var(--bad) 25%,var(--line))}
@media (max-width:1100px){.dh-top{grid-template-columns:1fr}.dh-quick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .dh-greet h2{font-size:21px}
  .dh-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .dq{padding:12px 6px;font-size:12px}
  .dh-hero .v{font-size:30px}
  .dh-stats{gap:10px}
  .kpi.st{padding:14px 12px}
  .kpi.st .v{font-size:18px}
}
.dh-spark{display:block;width:100%;height:64px;margin-top:14px;overflow:visible}
.side-foot .sf-tx{display:flex;flex-direction:column;line-height:1.3}
.side-foot .sf-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.mini .side-foot .row{flex-direction:column}
.app.mini .sf-out{display:none}
@media (max-width:640px){
  .dh-quick{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -12px 14px;padding:2px 12px 4px;gap:8px}
  .dh-quick::-webkit-scrollbar{display:none}
  .dq{flex:none;flex-direction:row;padding:8px 14px 8px 8px;border-radius:14px;gap:8px}
  .dq .ico{width:34px;height:34px;padding:8px;border-radius:10px}
}
.side-foot .row{flex-wrap:wrap!important}
.side-foot .sf-tx{flex:1 1 100%;margin-bottom:8px}
.side-foot #logout-btn{flex:1}
.app.mini .side-foot .sf-tx{display:none}
/* v2.56.0 kasir di HP: bilah keranjang di atas tombol Kasir yang menonjol, ikut gradasi */
@media (max-width:640px){ .cart-bar{bottom:calc(92px + env(safe-area-inset-bottom));background:var(--grad);box-shadow:var(--grad-sh)} }
body:has(.app.open) .chat-fab{display:none}
/* ---------- v2.57.0 Jualan: Meja & tamu, Dapur & layar, Kasir, Transaksi ---------- */
.fl-feed:empty{display:none}
.fl-feed{margin:0 0 12px}
.fl-sec{padding:14px 16px;margin-bottom:14px}
.fl-sec>.loading{min-height:80px}
.fl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.fl-h b{display:block;font-size:15px}.fl-h small{display:block;color:var(--ink3);font-size:12.5px;margin-top:1px}
.ro-inb>.empty{padding:22px 10px}
.ro-inf{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.fl-page .ro-tables{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.fl-page .ro-t{min-height:92px;padding:12px;border-radius:14px;transition:transform .12s,border-color .15s}
.fl-page .ro-t:active{transform:scale(.97)}
.fl-page .ro-t b{font-size:16px}
.fl-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2)}
.fl-legend span{display:inline-flex;align-items:center;gap:6px}
.ro-dot{width:12px;height:12px;border-radius:4px;border:1px solid var(--line2);background:var(--panel);display:inline-block}
.ro-dot.busy{border-color:var(--warn);background:var(--warn-soft)}.ro-dot.paid{border-color:var(--ok);background:var(--ok-soft)}.ro-dot.resv{border:1px dashed var(--pri);background:var(--pri-soft)}
.fl-off,.fl-stat{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:14px}
.fl-off p,.fl-stat p{margin:4px 0 10px}.fl-stat p{margin-bottom:0}
.fl-oi,.fl-si{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}
.fl-si.ok{background:var(--ok-soft);color:var(--ok)}
.fl-off .fl-oi{background:var(--vi-soft);color:var(--vi)}
.fl-kiosk .ro-ad{background:var(--panel);border-color:var(--line);border-radius:var(--r3);padding:16px;margin-bottom:14px}
@media (max-width:640px){
  .fl-sec{padding:12px}
  .fl-feed .ro-feed{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px}
  .fl-feed .ro-feed::-webkit-scrollbar{display:none}
  .fl-feed .ro-chip{flex:none}
  .fl-tools .fl-legend{flex:1 1 100%}
  .fl-tools .grow{display:none}
  .fl-page .ro-tables{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .fl-page .ro-t{min-height:84px;padding:10px}
  .fl-stat{flex-wrap:wrap}
}
/* Kasir: kartu total bergradasi (satu kartu utama di layar kasir), tanda jumlah di kartu produk, bilah keranjang HP */
.total-node{background:var(--grad);border:0;color:#fff;box-shadow:var(--grad-sh)}
.total-node::before{background:radial-gradient(90% 120% at 100% 0%,rgba(255,255,255,.22),transparent 60%)}
.total-node .l{color:rgba(255,255,255,.85)}
.total-node .v{text-shadow:none}
.pitem{position:relative}
.pitem[data-q]{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri) inset}
.pitem[data-q]::after{content:attr(data-q);position:absolute;top:8px;right:8px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--grad);color:#fff;font:700 12px/24px var(--font);text-align:center}
.pitem[data-q] .n{padding-right:26px}
.pos-cats button.on{background:var(--ink);border-color:var(--ink);color:var(--bg2)}
.cart-bar .cb-l{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.cart-bar .cb-l small{font-size:12px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.cart-bar .cb-l b{font-size:18px;font-variant-numeric:tabular-nums}
.cart-bar .cb-go{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:14px}
.cart-bar .cb-go .ico{width:16px;height:16px}
@media (max-width:820px){ .cart-bar{height:64px} }
/* Transaksi: ringkasan di atas daftar */
.tx-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.tx-sum .kpi{padding:14px 16px;min-width:0}
.tx-sum .kpi .v{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sum .kpi small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.tx-sum .kpi.warn{background:linear-gradient(180deg,var(--warn-soft),var(--panel) 75%)}
.tx-days{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.tx-days button{border:0;background:transparent;color:var(--ink2);font:600 13px var(--font);padding:6px 12px;border-radius:999px;cursor:pointer}
.tx-days button.on{background:var(--ink);color:var(--bg2)}
@media (max-width:760px){ .tx-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .tx-sum .kpi .v{font-size:17px} }
/* ---------- v2.58.0 Barang / Menu & bahan: tab tambahan di halaman Menu / Produk ---------- */
.mt-head{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:14px}
.mt-head p{margin:4px 0 0}
.mt-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:14px}
.mt-item{padding:14px 16px;margin:0}
.mt-item.off{opacity:.65}
.mt-item.click{cursor:pointer;transition:transform .12s,border-color .15s}
.mt-item.click:hover{border-color:var(--pri)}.mt-item.click:active{transform:scale(.98)}
.mt-item p{margin:4px 0 0}
.mt-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mt-top b{font-size:15px}
.mt-kind{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--pri-soft);color:var(--pri)}
.mt-kind.pct{background:var(--warn-soft);color:var(--warn)}
.mt-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mt-two>div{background:var(--bg2,var(--pri-soft));border-radius:10px;padding:8px 10px}
.mt-two span{display:block}.mt-two b{font-size:17px}
.mt-groups{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mt-g{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--vi-soft);color:var(--ink2)}
.mt-g b{color:var(--ink)}
.mt-sold{padding:14px 16px}
.mt-note{margin:2px 2px 14px}
@media (max-width:640px){
  .mt-head{padding:12px;gap:10px}
  .mt-head .btn{align-self:flex-start}
  .mt-grid{grid-template-columns:1fr}
}
/* v2.59.0 Pelanggan & online: tab Tautan & QR (Pesanan online), tab Pelanggan memakai kelas mt-* di atas */
.ct-link{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin-bottom:14px}
.ct-links,.ct-qr{margin:0;padding:14px 16px}
.ct-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);margin-top:10px}
.ct-row .grow{min-width:0;flex:1 1 200px}
.ct-url{display:block;font-weight:600;color:var(--pri);word-break:break-all;margin-top:2px}
.ct-qr{text-align:center}
.ct-qrimg{width:172px;height:172px;margin:0 auto;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px}
.ct-qrimg svg{display:block;width:100%;height:100%}
@media (max-width:640px){
  .ct-link{grid-template-columns:1fr}
}

/* v2.60.0 Laporan: pilihan kelompok laporan (pil) di atas tab laporan */
.rp-groups{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding:2px 1px}
.rp-groups::-webkit-scrollbar{display:none}
.rp-groups a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-weight:700;font-size:14px;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
.rp-groups a:hover{color:var(--ink);border-color:var(--pri)}
.rp-groups a:active{transform:scale(.96)}
.rp-groups a.on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.rp-groups a small{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--line);color:var(--ink2);font-size:11px;font-weight:700;text-align:center}
.rp-groups a.on small{background:var(--pri);color:#fff}

/* v2.61.0 Desain ulang tahap 6: Pengaturan (kotak cari, kelompok), tombol pintas Impor / Ekspor, menu favorit */
.set-search{position:relative;margin-bottom:12px;max-width:560px}
.set-in{display:flex;align-items:center;position:relative}
.set-in .ico{position:absolute;left:12px;color:var(--ink3);pointer-events:none}
.set-in .inp{padding-left:40px;height:44px;font-size:15px;width:100%}
.set-hits{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:min(60vh,380px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 12px 32px rgba(10,16,40,.22);padding:6px}
.set-hits.hidden{display:none}
.set-hit{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:var(--r2);color:var(--ink)}
.set-hit b{font-weight:600;font-size:14px}.set-hit span{font-size:12px;color:var(--ink3)}
.set-hit:hover,.set-hit.on{background:var(--pri-soft)}
.set-none{padding:12px}
.set-groups{margin-bottom:6px}
.set-flash{animation:setflash 2.2s ease-out}
@keyframes setflash{0%,60%{box-shadow:0 0 0 3px var(--pri),0 0 22px var(--glow)}100%{box-shadow:0 0 0 0 transparent}}
.io-short{display:flex;justify-content:flex-end;margin-bottom:10px}
.io-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.io-focus{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft),0 0 18px var(--pri-soft)}
.phead h1{display:inline-block;vertical-align:middle}
.fav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink3);cursor:pointer;vertical-align:middle;transition:background .15s,color .15s,border-color .15s,transform .1s}
.fav-btn:hover{color:var(--warn);border-color:var(--warn)}.fav-btn:active{transform:scale(.9)}
.fav-btn.on{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}.fav-btn.on svg{fill:currentColor}
.fav-btn.hidden{display:none}
.fav-btn svg{width:17px;height:17px}
.nav .fav svg{color:var(--warn)}
.nav .grp.fav-grp{padding-top:10px}
@media (prefers-reduced-motion:reduce){.set-flash{animation:none;box-shadow:0 0 0 3px var(--pri)}}
body[data-page="dashboard"] .fav-btn,body[data-page="pos"] .fav-btn{display:none}

/* v2.62.0 Panel superadmin: Kotak tugas, panel gelap Server & uptime, Detail toko 360 */
.tg{margin-bottom:14px}
.tg-list{display:flex;flex-direction:column;gap:6px}
.tg-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2,12px);color:inherit;text-decoration:none;background:var(--card,transparent);min-height:48px}
.tg-row:hover{border-color:var(--pri)}
.tg-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--pri-soft);color:var(--pri)}
.tg-ic svg{width:18px;height:18px}
.tg-row.bad .tg-ic{background:var(--bad-soft);color:var(--bad)}
.tg-row.warn .tg-ic{background:var(--warn-soft);color:var(--warn)}
.tg-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.tg-tx b{font-size:14px}
.tg-tx small{color:var(--ink3);font-size:12px;overflow-wrap:anywhere}
.tg-n{font-weight:800;font-size:18px;min-width:28px;text-align:right}
.tg-row.bad .tg-n{color:var(--bad)}.tg-row.warn .tg-n{color:var(--warn)}
.tg-empty{display:flex;align-items:center;gap:12px;padding:6px 2px;color:var(--ok)}
.tg-empty svg{width:26px;height:26px;flex:none}
.tg-empty span{display:flex;flex-direction:column;color:var(--ink)}
.tg-empty small{color:var(--ink3);font-size:12.5px}
.sa-dark{margin-bottom:14px;border-radius:var(--r3,16px);padding:16px;color:#e8eaff;background:linear-gradient(135deg,#0e1024 0%,#1a1745 60%,#2b1d63 100%);box-shadow:0 10px 30px rgba(43,29,99,.28)}
.sa-dark .card{background:transparent;border:0;box-shadow:none;color:inherit;padding:0;margin:0 0 12px}
.sa-dark h3{color:#fff}
.sa-dark .muted,.sa-dark .srv-v span,.sa-dark .srv-s,.sa-dark .srv-net{color:#a9afd6}
.sa-dark .srv-net b,.sa-dark .srv-v b{color:#fff}
.sa-dark .srv-bg{stroke:rgba(255,255,255,.14);opacity:1}
.sa-dark .srv-fg{filter:drop-shadow(0 0 5px rgba(140,110,255,.75))}
.sa-dark a{color:#b9c2ff}
.sa-up{border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.sa-up-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sa-mon{margin-bottom:12px}
.sa-mon-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sa-mon-h .dot{width:9px;height:9px;border-radius:50%;background:#8a90b8;flex:none}
.sa-mon-h .dot.ok{background:#3fd08f;box-shadow:0 0 8px #3fd08f}.sa-mon-h .dot.bad{background:#ff6b7a;box-shadow:0 0 8px #ff6b7a}.sa-mon-h .dot.warn{background:#f6b84b}
.sa-pct{margin-left:auto;font-weight:800;font-size:18px;color:#fff}
.sa-pct small{font-weight:500;font-size:11px;color:#a9afd6}
.sa-bars{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:26px;margin:8px 0 6px}
.sa-bars i{display:block;border-radius:2px;background:rgba(255,255,255,.18)}
.sa-bars i.ok{background:#3fd08f}.sa-bars i.warn{background:#f6b84b}.sa-bars i.bad{background:#ff6b7a}
.sa-bk{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.08);font-size:13px}
.sa-bk svg{width:18px;height:18px;flex:none;color:#3fd08f}
.sa-bk.bad{background:rgba(255,107,122,.18)}.sa-bk.bad svg{color:#ff6b7a}
.sa-bk a{margin-left:auto;font-weight:700}
@media (max-width:560px){
  .sa-dark{padding:12px}
  .sa-dark .srv-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .sa-dark .srv-v b{font-size:14px}.sa-dark .srv-v b small{display:none}.sa-dark .srv-v span{font-size:10px;margin-top:2px}
  .sa-dark .srv-s{font-size:10px}
  .sa-dark .srv-net{grid-template-columns:repeat(2,1fr)}
  .sa-bars{height:22px}
}
.t360-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.t360-tabs{margin-bottom:12px}

/* v2.64.0 Penyederhanaan navigasi tahap 2: garis pemisah menu, tombol ＋ global, ikon live chat & Tanya AI, menu profil */
.nav .nav-sep{height:1px;background:var(--line);margin:8px 12px}
.app.mini .nav .nav-sep{margin:8px 6px}
.hdr-pop{position:relative;display:inline-flex;flex:none}
.plus-btn{width:42px;height:42px;border:0;border-radius:14px;background:var(--grad);color:#fff;box-shadow:var(--grad-sh)}
.plus-btn:hover{filter:brightness(1.06)}.plus-btn.hidden{display:none}
.plus-btn svg{width:20px;height:20px}
.hnav{display:inline-flex;align-items:center;gap:2px;flex:none}
.hnav:empty{display:none}
.hdr-ic{position:relative;border-radius:12px;color:var(--ink2)}
.hdr-ic.on{color:var(--pri);background:var(--pri-soft)}
.hdr-ic .badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font:700 10px var(--font);display:grid;place-items:center;padding:0 4px}
.hdr-ic .badge.hidden{display:none}
.pop{position:absolute;z-index:60;top:calc(100% + 8px);min-width:236px;max-width:min(300px,calc(100vw - 20px));max-height:calc(100vh - 90px);overflow:auto;padding:6px;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh);color:var(--ink)}
.pop.hidden{display:none}
.hdr-pop .pop{left:0}
.pmenu{right:10px;top:calc(var(--top) - 6px)}
.pop-h{font-size:12px;font-weight:700;color:var(--ink3);padding:8px 10px 4px}
.pop-i{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 14px var(--font);text-align:left;cursor:pointer;text-decoration:none}
.pop-i:hover,.pop-i:focus-visible,.pop-i.on{background:var(--pri-soft);outline:0}
.pop-i.on{color:var(--pri)}
.pop-i .ico{width:18px;height:18px;flex:none;color:var(--pri)}
.pop-i span{flex:1;min-width:0}
.pop-i.sm{min-height:38px;padding-left:38px;font-weight:500;font-size:13.5px}
.pop-i.bad,.pop-i.bad .ico{color:var(--bad)}
.pop-i .caret{display:inline-block;flex:none;width:7px;height:7px;border-right:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .15s}
.pop-i[aria-expanded="true"] .caret{transform:rotate(-135deg);margin:3px 4px 0 0}
.pop-sub.hidden{display:none}
.pop-sep{height:1px;background:var(--line);margin:6px 4px}
.pm-who{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;width:100%;background:none;border:0;border-radius:12px;color:inherit;text-align:left;cursor:pointer;font:inherit}
.pm-who:hover,.pm-who:focus-visible{background:var(--pri-soft)}
.pm-who .av{position:relative}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fff}
.av-cam{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--panel);color:var(--pri);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.av-cam .ico{width:11px;height:11px}
.av-edit{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.av-big{width:84px;height:84px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 26px var(--font);flex:none}
.av-opts{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}
.av-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;text-align:left;cursor:pointer;font:inherit}
.av-opt small{color:var(--ink3);font-size:12px}
.av-opt.on{border-color:var(--pri);background:var(--pri-soft)}
.av-opt:disabled{opacity:.55;cursor:not-allowed}
.t-av{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:inline-grid;place-items:center;font:700 12px var(--font);flex:none;vertical-align:middle;overflow:hidden}
.t-av img{width:100%;height:100%;object-fit:cover}
.t360-av{width:52px;height:52px;font-size:17px}
.pm-who .av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 13px var(--font);flex:none}
.pm-who>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pm-who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-who small{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-i.show-m{display:none}
@media (max-width:640px){
  .pop-i.show-m{display:flex}
  .plus-btn{width:40px;height:40px;border-radius:12px}
  .hdr-pop{position:static}
  .hdr-pop .pop{left:10px;right:10px;top:calc(60px - 4px);max-width:none}
  .pmenu{left:auto;right:10px;top:56px;width:min(300px,calc(100vw - 20px))}
  /* header HP 390 px: ikon dirapatkan supaya nama cabang tetap terbaca */
  .top{gap:4px}
  .search-btn,.plus-btn,.hdr-ic,.top .bell{width:36px;height:36px}
  .br-ic{width:30px;height:30px;border-radius:9px}.br-ic svg{width:17px;height:17px}
  .brpick{gap:6px}
  .br-tx small{white-space:nowrap}
  .brpick select.inp,.br-tx b{max-width:calc(100vw - 262px)}
}

/* v2.65.0 navigasi tahap 2 bagian Barang: tombol aksi ▾, filter tampilan, kepala tampilan aksi */
.drop{position:relative;display:inline-flex;flex:none}
.drop .pop{top:calc(100% + 6px);left:auto;right:0}
.drop-b .caret{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin:0 2px 3px 6px}
.drop-b[aria-expanded="true"] .caret{transform:rotate(-135deg);margin:3px 2px 0 6px}
.view-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.view-bar .vsel{display:inline-flex;align-items:center;gap:8px;min-width:0}
.view-bar .vsel>span{font-size:12.5px;font-weight:700;color:var(--ink3);white-space:nowrap}
.view-bar .vsel .inp{width:auto;min-width:170px;max-width:100%}
.view-bar .grow{flex:1}
.act-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r3);background:var(--pri-soft)}
.act-head b{font-size:15px}.act-head .grow{flex:1;min-width:0}
.act-head .muted{margin:0}
.sec-list{display:flex;flex-direction:column;gap:10px}
.sec{scroll-margin-top:76px;border:1px solid var(--line);border-radius:var(--r3);background:var(--panel);overflow:hidden}
.sec-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.sec-h:hover{background:var(--pri-soft)}.sec-h:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}
.sec-ic{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}.sec-ic svg{width:18px;height:18px}
.sec-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.sec-t b{font-size:14.5px}.sec-t small{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-h .caret{flex:0 0 auto;width:8px;height:8px;border-right:1.8px solid var(--ink3);border-bottom:1.8px solid var(--ink3);transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .15s}
.sec.open>.sec-h .caret{transform:rotate(-135deg);margin:4px 4px 0 0}
.sec-b{display:none;padding:2px 14px 14px;border-top:1px solid var(--line)}.sec.open>.sec-b{display:block;padding-top:14px}
.sec-b>.dgrid:last-child,.sec-b>.card:last-child{margin-bottom:0}
.sec-b .card{box-shadow:none}.ws-block+.ws-block{margin-top:14px}.ws-dom{scroll-margin-top:76px;border-top:1px dashed var(--line);padding-top:14px;margin-top:14px}
@media (max-width:640px){.sec-h{padding:11px 12px;gap:10px}.sec-b{padding-left:10px;padding-right:10px}.sec-t small{white-space:normal}}
.tool-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tool-row .grow{flex:1}
@media (max-width:760px){
  .view-bar .vsel{flex:1 1 100%}.view-bar .vsel .inp{flex:1;min-width:0}
  .view-bar>.drop,.view-bar>.btn{flex:1 1 auto}.view-bar .drop-b{width:100%;justify-content:center}.view-bar>.drop{flex:1 1 100%}
  .drop .pop{right:0;left:auto;min-width:min(260px,calc(100vw - 28px))}
}
/* v2.68.0 panel AI: koneksi & kunci, pengaturan per fitur (satu kotak), daftar model */
.aig-box{border:1px solid var(--line);border-radius:var(--r2);padding:12px;background:var(--panel2)}
.aig-keys{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.aig-key .f{margin-bottom:2px}.aig-key .muted{margin-bottom:8px}
.aig-clear{display:inline-flex;padding:0 0 0 6px;gap:6px;font-weight:500}.aig-clear input{width:16px;height:16px}
.aig-route{border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px;background:var(--panel2)}
.aig-route .switch span{min-width:0}
.aig-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin-top:8px}
.aig-chain .f{margin-bottom:0}.aig-chain select{min-width:0;width:100%}
.aig-models{margin-top:6px}.aig-models summary{cursor:pointer;font-weight:600;padding:6px 0}
.aig-mrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto 90px 90px auto;gap:6px;align-items:center;margin-bottom:6px}
.aig-mrow .check{padding:0;gap:6px;white-space:nowrap}
.aig-sw{display:flex;flex-wrap:wrap;gap:10px 22px;margin:4px 0 6px}
@media(max-width:900px){.aig-chain{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.aig-keys{grid-template-columns:1fr}.aig-chain{grid-template-columns:1fr}
  .aig-mrow{grid-template-columns:1fr 1fr auto;grid-template-areas:"m m m" "p v v" "i o d";padding:8px;border:1px solid var(--line);border-radius:var(--r1)}
  .aig-mrow [data-mm]{grid-area:m}.aig-mrow [data-mp]{grid-area:p}.aig-mrow .check{grid-area:v}.aig-mrow [data-mi]{grid-area:i}.aig-mrow [data-mo]{grid-area:o}.aig-mrow [data-mdel]{grid-area:d}
  .aig-chain{gap:0}.aig-chain .f span{margin-bottom:2px}}

/* ===== v2.71.0 mode bengkel (komponen pesanan kerja, public/js/jobs-ui.js). Hanya token yang sudah ada, tanpa warna baru. ===== */
.jb-plate{display:inline-block;padding:3px 9px;border-radius:7px;border:2px solid var(--ink);background:var(--panel);color:var(--ink);font:800 13px/1.2 var(--font);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;text-transform:uppercase}
.jb-plate.big{font-size:22px;padding:5px 14px;border-radius:9px}
.jb-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;background:var(--panel2);border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.jb-chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.jb-chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.jb-chip.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.jb-chip.pri{background:var(--pri-soft);color:var(--pri);border-color:transparent}
.jb-chip.vi{background:var(--pri-soft);background:color-mix(in srgb,var(--glow) 16%,transparent);color:var(--glow);border-color:transparent}
.jb-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.jb-col{min-width:0}
.jb-col h4{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:13px;color:var(--ink2)}
.jb-col h4 b{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:12px;color:var(--ink)}
.jb-tabs{display:none;margin-bottom:12px;overflow-x:auto;max-width:100%}
.jb-card{display:block;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px;color:var(--ink);text-decoration:none;cursor:pointer}
.jb-card:hover{border-color:var(--pri)}
.jb-card.late{border-left-color:var(--bad)}
.jb-card.wait{border-left-color:var(--warn)}
.jb-card.appr{border-left-color:var(--glow)}
.jb-card.done{border-left-color:var(--ok)}
.jb-card .r1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;margin-bottom:6px}
.jb-card .r2{font-size:13px;font-weight:600}
.jb-card .r3{font-size:12.5px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.jb-card .r4{display:flex;justify-content:space-between;gap:8px;margin-top:8px;align-items:center;font-size:12.5px}
.jb-steps{display:flex;align-items:flex-start;gap:0;margin:4px 0 14px;overflow-x:auto;scrollbar-width:none}
.jb-steps li{list-style:none;flex:1 0 74px;text-align:center;position:relative;font-size:11.5px;color:var(--ink3);font-weight:600}
.jb-steps li::before{content:attr(data-n);display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 auto 4px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);font-size:12px;font-weight:800;color:var(--ink2);position:relative;z-index:1}
.jb-steps li::after{content:"";position:absolute;top:12px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--line2)}
.jb-steps li:last-child::after{display:none}
.jb-steps li.ok::before{background:var(--ok);border-color:var(--ok);color:#fff;content:"\2713"}
.jb-steps li.ok::after{background:var(--ok)}
.jb-steps li.on{color:var(--ink)}
.jb-steps li.on::before{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.jb-steps li.hold::before{background:var(--warn);border-color:var(--warn);color:#fff}
.jb-steps ul,ul.jb-steps{padding:0}
.jb-it{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.jb-it:last-child{border-bottom:0}
.jb-it .nm{font-weight:600;min-width:0;overflow-wrap:anywhere}
.jb-it .sub{grid-column:2;font-size:12px;color:var(--ink3)}
.jb-it .am{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.jb-it .ac{grid-column:2 / 4;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.jb-kind{display:inline-block;min-width:44px;text-align:center;padding:2px 6px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.05em;background:var(--pri-soft);color:var(--pri)}
.jb-kind.s{background:color-mix(in srgb,var(--glow) 16%,transparent);color:var(--glow)}
.jb-tot{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 2px;font-size:15px}
.jb-tot b{font-size:20px;font-variant-numeric:tabular-nums}
.jb-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.jb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.jb-head .grow{flex:1}
.jb-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--ink2)}
.jb-ev{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.jb-ev:last-child{border-bottom:0}
.jb-act{display:flex;gap:8px;flex-wrap:wrap}
.jb-act .btn{flex:0 0 auto}
.jb-bar{display:none}
.jb-found{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.jb-found button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:var(--ink);cursor:pointer;font:600 13px var(--font)}
.jb-found button:hover{border-color:var(--pri)}
.jb-pl{font:800 22px var(--font);letter-spacing:.08em;text-transform:uppercase;text-align:center}
@media(max-width:899px){
  .jb-board{display:block}
  .jb-col{display:none}.jb-col.on{display:block}
  .jb-tabs{display:block}
  .jb-grid{grid-template-columns:minmax(0,1fr)}
  .jb-bar{display:flex;position:sticky;bottom:0;z-index:5;gap:10px;align-items:center;justify-content:space-between;background:var(--panel);border-top:1px solid var(--line);padding:10px 12px;margin:14px -12px -12px}
  .jb-bar .t{font-size:12px;color:var(--ink3)}.jb-bar .t b{display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
  .jb-act .btn{flex:1 1 auto}
}
.ci.jobln .qty{display:none}

/* ===== v2.72.0 estimasi, mekanik, foto servis (jb-*, hanya token yang sudah ada) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jb-ini{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--pri-soft);color:var(--pri);font-size:10.5px;font-weight:800;flex:none}
.jb-ev.rev{background:var(--warn-soft);border-radius:var(--r2);padding:6px 8px;border-bottom:0;margin:2px 0}
.jb-signimg{display:block;max-width:180px;max-height:80px;margin-top:4px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.jb-sign{position:relative;border:2px dashed var(--line2);border-radius:var(--r2);background:#fff;touch-action:none;margin-bottom:8px}
.jb-sign canvas{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.jb-sign .ph{position:absolute;inset:0;display:grid;place-items:center;color:#7a879a;pointer-events:none;font-weight:700;font-size:13px}
.jb-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.jb-ph{margin:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--panel2)}
.jb-ph a{display:block;aspect-ratio:4/3;background:var(--panel2)}
.jb-ph img{width:100%;height:100%;object-fit:cover;display:block}
.jb-ph figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px}
.jb-ph figcaption label{display:flex;gap:6px;align-items:center}
.jb-task{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:var(--r2);padding:12px;margin-bottom:12px}
.jb-task.on{border-left-color:var(--pri)}.jb-task.wait{border-left-color:var(--warn)}.jb-task.done{border-left-color:var(--ok)}
.jb-task .r1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;margin-bottom:6px}
.jb-task .r2{font-weight:600}
.jb-task .r3{font-size:13px;color:var(--ink2);margin-top:2px}
.jb-task ul{margin:8px 0 0;padding-left:18px;font-size:13px}
.jb-task .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jb-task .acts .btn{min-height:44px}
.jb-task .acts .btn.pri{flex:1 1 150px}
@media(max-width:899px){.jb-task .acts .btn{flex:1 1 auto}}
/* v2.75.0 online bengkel: booking & permintaan jadwal, kartu saran paket */
.jb-up{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--glow) 12%,var(--panel));border-color:color-mix(in srgb,var(--glow) 30%,var(--line))}
.jb-bk{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.jb-bk .r1{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.jb-bk .r2{font-weight:600;overflow-wrap:anywhere}
.jb-bk .r3{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px}.jb-bk .jb-act{margin-top:2px}
.bko-links .list-row input{min-width:0}
/* ===== v2.77.0 inspeksi digital, paket servis, pekerjaan ditunda (jb-*, hanya token yang sudah ada) ===== */
.jb-kind.p{background:var(--ok-soft);color:var(--ok)}
.jb-kind.v{background:var(--warn-soft);color:var(--warn)}   /* v2.81.0 sublet */
.jb-pobox{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}   /* v2.81.0 kotak Pesan ke supplier */
.jb-fbsum{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--pri-soft)}   /* v2.81.0 ringkasan tagihan armada */
.jb-fbrow>span:not(.r){flex:1 1 auto;overflow-wrap:anywhere}.jb-fbrow .r{flex:0 0 auto;text-align:right;white-space:nowrap}
.jb-pkg{border:1px solid var(--line);border-radius:var(--r2);padding:2px 10px 4px;margin:8px 0;background:var(--panel2)}
.jb-pkg.rej{opacity:.7}
.jb-pkg-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.jb-pkg-h .nm{min-width:0;overflow-wrap:anywhere}.jb-pkg-h .am{font-variant-numeric:tabular-nums;text-align:right}
.jb-pkg-h .sub{grid-column:2 / 4;font-size:12px;color:var(--ink3)}
.jb-pkg-h .ac{grid-column:2 / 4;display:flex;gap:6px;flex-wrap:wrap}
.jb-pkg .jb-it{padding-left:4px}
.jb-pt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.jb-pt:last-of-type{border-bottom:0}
.jb-pt .dot,.jb-ptf .dot{width:12px;height:12px;border-radius:50%;background:var(--line2);flex:none}
.jb-pt.ok .dot,.jb-ptf.ok .dot{background:var(--ok)}.jb-pt.warn .dot,.jb-ptf.warn .dot{background:var(--warn)}.jb-pt.bad .dot,.jb-ptf.bad .dot{background:var(--bad)}
.jb-pt .nm{font-weight:600;min-width:0;overflow-wrap:anywhere}
.jb-pt .ac{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.jb-pt .sub{grid-column:2 / 4;font-size:12.5px;color:var(--ink2)}
.jb-pt .ph{grid-column:2 / 4;display:block;width:88px;height:66px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line)}
.jb-pt .ph img{width:100%;height:100%;object-fit:cover;display:block}
.jb-ic{display:inline-flex;gap:4px}
.jb-ic span{min-width:26px;text-align:center;border-radius:20px;padding:1px 7px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.jb-ic .bad{background:var(--bad-soft);color:var(--bad)}.jb-ic .warn{background:var(--warn-soft);color:var(--warn)}.jb-ic .ok{background:var(--ok-soft);color:var(--ok)}
.jb-ptf{border-bottom:1px dashed var(--line);padding:8px 0}
.jb-ptf .r1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jb-ptf .r1 .nm{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.jb-ptf .r2{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.jb-ptf .r2 .inp{flex:1 1 200px;min-width:0}
.jb-ptimg{width:56px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.jb-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;flex:none}
.jb-seg button{border:0;border-left:1px solid var(--line);background:var(--panel);color:var(--ink2);font:600 12.5px var(--font);padding:8px 10px;min-height:38px;cursor:pointer}
.jb-seg button:first-child{border-left:0}
.jb-seg button.ok[aria-pressed="true"]{background:var(--ok);color:#fff}.jb-seg button.warn[aria-pressed="true"]{background:var(--warn);color:#fff}.jb-seg button.bad[aria-pressed="true"]{background:var(--bad);color:#fff}
.jb-dfbox{border-left:4px solid var(--warn);margin-bottom:12px}
.jb-dfr{align-items:center;gap:10px}
.jb-dfr>span:first-of-type{flex:1;min-width:0}
.jb-dfr input[type=checkbox]{width:18px;height:18px;flex:none}
.jb-pkc.on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.jb-pkopt{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.jb-pkopt:hover:not(:disabled){border-color:var(--pri)}.jb-pkopt:disabled{opacity:.55;cursor:not-allowed}
.jb-pkopt>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.jb-pkopt .r,.jb-pkcard .r2 b{text-align:right;font-variant-numeric:tabular-nums}.jb-pkopt .r{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.jb-pkl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.jb-pkcard{display:flex;flex-direction:column;gap:8px;margin:0}
.jb-pkcard.off{opacity:.7}
.jb-pkcard .r1{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jb-pkcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.jb-pkcard .r2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px dashed var(--line);padding-top:8px}
.jb-pkcard .r2 b{font-size:17px}
@media(max-width:899px){.jb-seg{width:100%}.jb-seg button{flex:1}.jb-pkl{grid-template-columns:minmax(0,1fr)}}
.jb-pt .nm,.jb-ptf .nm{color:var(--ink)}
.jb-pkl>.card{margin:0}.jb-pkcard .r2>span{flex:1;min-width:0}.jb-pkcard .r2 b,.jb-pkopt .r b{white-space:nowrap}
/* v2.78.0 Scanner diagnosa: laporan per tahap, perbandingan sebelum & sesudah perbaikan (hanya token yang sudah ada) */
.jb-scan{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.jb-scan:first-of-type{border-top:0;margin-top:0;padding-top:0}
.jb-scan-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.jb-scan-h .t{font-weight:700}
.jb-scan-h .grow{flex:1}
.jb-scan .ok-line{color:var(--ok);font-weight:600;font-size:13px;padding:6px 0}
.jb-cmp{margin-top:12px;border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;background:var(--panel2)}
.jb-cmp-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.jb-cmp-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.jb-cmp-r:last-of-type{border-bottom:0}
.jb-cmp-r .d{font-size:13px;color:var(--ink2);min-width:0;overflow-wrap:anywhere}
.jb-cmp-ok{margin-top:6px;color:var(--ok);font-weight:600;font-size:13px}
.jb-scanpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.jb-scanpick .btn{justify-content:center;text-align:center;white-space:normal;min-height:44px}
@media (max-width:520px){.jb-scanpick{grid-template-columns:1fr}}
.jb-scan-a{margin-top:8px;gap:6px}
.jb-act.jb-scan-a .btn{flex:0 0 auto}
@media (max-width:600px){.jb-scan .jb-pt{grid-template-columns:auto minmax(0,1fr)}.jb-scan .jb-pt .ac{grid-column:2;justify-content:flex-start;margin-top:4px}}

/* v2.83.0 ELM327 langsung & email laporan scanner */
.jb-scanpick .jb-elmb{grid-column:1/-1}
.jb-elm-steps{display:grid;gap:6px;margin:10px 0;padding:0;list-style:none}
.jb-elm-steps li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink3)}
.jb-elm-steps li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line2);flex:0 0 10px}
.jb-elm-steps li.on{color:var(--ink);font-weight:600}.jb-elm-steps li.on::before{background:var(--pri)}
.jb-elm-steps li.done{color:var(--ok)}.jb-elm-steps li.done::before{background:var(--ok)}
.jb-elm-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:13px;margin:4px 0 10px}
.jb-elm-meta dt{color:var(--ink2)}.jb-elm-meta dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.jb-elm-how{margin:6px 0 10px;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.6}
.jb-mail{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 6px}
.jb-mail .addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r1);padding:6px 10px;overflow-wrap:anywhere;min-width:0;max-width:100%}
.jb-inb{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:6px}
.jb-inb:first-child{border-top:0;padding-top:0}
.jb-inb .h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.jb-inb .h b{overflow-wrap:anywhere;min-width:0}
.jb-inb .grid2{margin:0}
.jb-inb .f{margin:0}

/* v2.79.0 layanan cepat, servis panggilan, jatuh tempo STNK */
.jb-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.jb-home{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:8px 10px;overflow-wrap:anywhere}
.jb-homebox{margin:0 0 10px;padding:10px 12px;display:grid;gap:6px}
.jb-homebox[hidden]{display:none}   /* v2.86.1 kotak servis panggilan tersembunyi saat Di bengkel (display:grid sempat menimpa atribut hidden) */
.jb-homebox .f{margin:0}
.jb-tot{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0;border-top:1px dashed var(--line);margin-top:6px;font-size:15px}
[data-visit] .jb-act{display:flex;flex-wrap:wrap;gap:6px}
[data-visit]>div:nth-child(2){overflow-wrap:anywhere}
@media(max-width:560px){.jb-homebox .grid2{grid-template-columns:1fr}}
/* v2.80.0 nomor seri ban & aki, paket servis prabayar */
.jb-vtabs{overflow-x:auto;scrollbar-width:none}.jb-vtabs::-webkit-scrollbar{display:none}
.jb-serrow .f{margin:0 0 6px}
.jb-pass>span:first-child{flex:1 1 0;min-width:0;overflow-wrap:anywhere}.jb-pass .r{flex:none;text-align:right}
.jb-pass{flex-wrap:wrap}.jb-pass-act{flex:1 0 100%;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px}
@media(max-width:560px){.jb-serrow .grid2{grid-template-columns:1fr}}
/* v2.82.0 bengkel kelompok D: AI bengkel, ulasan setelah servis, sparepart cocok tipe (hanya token yang sudah ada) */
.jb-stars{color:var(--warn);letter-spacing:1px;font-size:14px;white-space:nowrap}
.jb-stars i{font-style:normal;color:var(--line)}
.jb-rev-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jb-rev-c{margin-top:4px;overflow-wrap:anywhere}
.jb-rev-r{margin-top:4px;padding:6px 10px;border-radius:10px;background:var(--panel2);overflow-wrap:anywhere}
.jb-rev.off{opacity:.65}
.jb-revsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.jb-revsum .v{font-size:28px;font-weight:800}
.jb-ai{border-left:4px solid var(--glow)}
.jb-ai-t{white-space:pre-line;overflow-wrap:anywhere;line-height:1.55}
.jb-fit{margin-left:6px}
.jb-fitrow{display:grid;grid-template-columns:110px 1fr 1fr 84px 84px 36px;gap:6px;align-items:end;margin-bottom:6px}
.jb-fitrow .inp{min-width:0}
@media (max-width:640px){.jb-fitrow{grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--line);border-radius:12px}.jb-fitrow [data-fx]{grid-column:2;justify-self:end}}
/* v2.85.0 mode apotek (MODE-APOTEK.md 10.1): lencana golongan (warna + teks), pita apoteker jaga, kartu resep, pemilih obat, bahan racikan */
.ap-gol{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 5px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);white-space:nowrap;vertical-align:middle}
.ap-gol i{width:9px;height:9px;border-radius:50%;background:var(--ink3);flex:none}
.ap-gol.ok i{background:var(--ok)} .ap-gol.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.ap-gol.pri i{background:var(--pri)} .ap-gol.pri{color:var(--pri);background:var(--pri-soft);border-color:transparent}
.ap-gol.bad i{background:var(--bad)} .ap-gol.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.ap-gol.warn i{background:var(--warn)} .ap-gol.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.ap-gol.vi i{background:var(--vi)} .ap-gol.vi{color:var(--vi);background:var(--vi-soft);border-color:transparent}
.ap-gol.dark i{background:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)} .ap-gol.dark{color:var(--bad);background:var(--bad-soft);border-color:var(--bad)}
.ap-duty{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:var(--r2);margin-bottom:10px;font-size:13px}
.ap-duty .ico{width:18px;height:18px;flex:none} .ap-duty span{flex:1;min-width:0}
.ap-duty.ok{background:var(--ok-soft);color:var(--ok)} .ap-duty.warn{background:var(--warn-soft);color:var(--warn)} .ap-duty .btn{margin-left:auto}
.ap-paraf{display:block;font-weight:500;font-size:10.5px;color:var(--ink3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ap-pick{display:flex;flex-direction:column;gap:6px}
.ap-pick button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:var(--ink);cursor:pointer;font:13px var(--font)}
.ap-pick button:hover{border-color:var(--pri)} .ap-pick button>span{min-width:0} .ap-pick small{display:block} .ap-pick .r{text-align:right;flex:none}
.ap-ing{display:grid;grid-template-columns:minmax(0,1fr) 120px auto auto;gap:8px;align-items:end;padding:6px 0;border-bottom:1px dashed var(--line)}
.ap-ing .nm{align-self:center;overflow-wrap:anywhere} .ap-ing .f{margin:0}
.ap-new{margin-top:8px} .ap-new summary{cursor:pointer;font-weight:700;color:var(--pri);padding:6px 0}
.ap-warn{border-left:4px solid var(--warn)} .ap-warn h4{display:flex;align-items:center;gap:6px} .ap-warn h4 .ico{width:18px;height:18px;color:var(--warn)}
.ap-tabs b{font-weight:800;margin-left:2px}
.ap-sum{position:sticky;top:12px}
.ci .ap-gol{margin-left:4px}
@media(max-width:899px){.ap-ing{grid-template-columns:minmax(0,1fr) 96px;}.ap-ing>.muted,.ap-ing>.btn{justify-self:start}.ap-sum{position:static}}
.pam .rseg,.rseg.ap-seg{flex-wrap:wrap}   /* v2.85.0 empat tab mode / tampilan resep tidak terpotong di HP */
.ap-chips{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.ap-card .r4 b,.ap-card .r4 .muted{white-space:nowrap}
/* v2.86.0 apotek kepatuhan + pembelian: isian batch / ED / faktur PBF di form Pembelian, laporan wajib, pemusnahan, margin per golongan */
.ap-pbf{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;max-width:420px}
.ap-pbf .inp{width:auto;flex:1 1 92px;min-width:0}
.ap-pbf input[type=date]{flex:1 1 130px}
.ap-pbf input[type=number]{flex:1 1 70px}
.ap-comply-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
.ap-margins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px}
.ap-margins .f{margin:0 0 6px}
.ap-dline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--line)}
.ap-dline .grow{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.ap-dline select.inp{width:auto;max-width:100%}
.ap-wit{gap:6px;margin-bottom:6px}
@media(max-width:640px){.ap-wit{grid-template-columns:1fr}.ap-pbf{max-width:none}}
/* v2.86.1 daftar merek & tipe kendaraan (Pengaturan bengkel) */
.vc-list{max-height:min(60vh,520px);overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:12px}
.vc-brand{padding:8px 10px;border-bottom:1px solid var(--line)}
.vc-brand:last-child{border-bottom:0}
.vc-bh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vc-bh b{overflow-wrap:anywhere}
.vc-models{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vc-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--card);max-width:100%}
.vc-chip button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;min-height:32px}
.vc-cn{padding:4px 4px 4px 10px;font-size:13px;overflow-wrap:anywhere;text-align:left}
.vc-cx{padding:4px 8px;display:inline-flex;align-items:center;color:var(--muted)}
.vc-cx svg{width:14px;height:14px}

/* ===== v2.93.0 toko demo: spanduk, Lihat sebagai, tur panduan, pratinjau WhatsApp, form simpan ===== */
.demo-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px 10px;padding:6px 12px;min-height:44px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 15%,var(--bg2)),color-mix(in srgb,var(--glow) 15%,var(--bg2)))}
.demo-tag{flex:none;padding:3px 9px;border-radius:999px;background:var(--grad);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.demo-left{flex:none;color:var(--ink2);white-space:nowrap}.demo-left b{color:var(--ink);font-variant-numeric:tabular-nums}
.demo-bar .grow{flex:1 1 0;min-width:0}.demo-bar .btn.sm{min-height:34px;white-space:nowrap}
.demo-bar #demo-as b{font-weight:700}.demo-bar #demo-as .ico{width:16px;height:16px;margin-right:6px;flex:none}
.demo-caret{display:inline-block;width:7px;height:7px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.demo-pop-w{position:relative;display:inline-flex}
.demo-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:230px;max-width:min(300px,calc(100vw - 20px));padding:6px;border-radius:16px;border:1px solid var(--line2);background:var(--panel);box-shadow:var(--sh)}
.demo-pop.hidden{display:none}
.demo-pop-h{padding:8px 10px 4px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.demo-pop button{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:center;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.demo-pop button small{grid-column:1;color:var(--ink3);font-size:12px}.demo-pop button .ico{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;color:var(--pri)}
.demo-pop button:hover,.demo-pop button:focus-visible{background:var(--pri-soft)}.demo-pop button.on{background:var(--pri-soft);font-weight:700}
.demo-pop-sep{height:1px;margin:6px 4px;background:var(--line)}
@media (max-width:520px){.demo-bar{padding:6px 8px;gap:6px}.demo-pop-w{min-width:0;flex:0 1 auto}.demo-bar #demo-as{max-width:100%}.demo-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px}.demo-bar .hide-s{display:none}.demo-tag{padding:3px 8px}}
body.demo-on .top{top:var(--demo-h,0px)}
body.demo-on .side{top:var(--demo-h,0px);height:calc(100vh - var(--demo-h,0px))}
body.demo-on .app{min-height:calc(100vh - var(--demo-h,0px))}
body.demo-on .toasts{top:calc(var(--demo-h,0px) + 12px)}
body.demo-on .pos{height:calc(100vh - var(--top) - 40px - var(--demo-h,0px))}
body.demo-on .lc-wrap{height:calc(100vh - 190px - var(--demo-h,0px))}
.demo-wa{padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--ok-soft);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.demo-qris{margin-top:12px;text-align:center}.demo-qris .btn{width:100%}
.demo-keep{display:grid;gap:8px}.demo-keep label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--panel2)}
.demo-keep label:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}.demo-keep input{margin-top:3px}.demo-keep b{display:block;font-size:14px}.demo-keep small{display:block;color:var(--ink3);font-size:12.5px;line-height:1.4}
/* tur panduan */
.dmt{position:fixed;inset:0;z-index:150;pointer-events:none}
.dmt-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--pri),0 0 0 100vmax rgba(8,12,34,.58);transition:left .25s,top .25s,width .25s,height .25s,opacity .2s;opacity:0;pointer-events:none}
.dmt-card{position:fixed;pointer-events:auto;right:20px;bottom:20px;width:340px;max-width:calc(100vw - 20px);padding:14px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--line2);box-shadow:var(--sh);color:var(--ink)}
.dmt-n{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pri)}.dmt-t{display:block;margin:4px 0 4px;font-size:16px}
.dmt-d{margin:0 0 10px;color:var(--ink2);font-size:14px;line-height:1.5}.dmt-act{display:flex;align-items:center;gap:8px}.dmt-act .grow{flex:1}
@media (max-width:820px){.dmt-card{left:10px;right:10px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom))}.dmt-card.up{bottom:auto;top:calc(var(--demo-h,0px) + var(--top) + 8px)}}
@media (prefers-reduced-motion:reduce){.dmt-spot{transition:none}}