:root{--navy:#0F172A;--emerald:#10B981;--emerald-dark:#059669;--bg:#F8FAFC;--border:#E2E8F0;--muted:#64748B;--red:#EF4444;--amber:#F59E0B}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--navy)}
a{color:var(--emerald-dark)}
header{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 14px}
.logo{font-size:26px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.logo i{color:var(--emerald);font-style:normal}
.tagline{font-size:11px;letter-spacing:.14em;opacity:.75;text-transform:uppercase}
.spacer{flex:1}
.badge{font-size:11px;background:#ffffff1f;border:1px solid #ffffff33;padding:4px 8px;border-radius:999px}
.iconbtn{background:#ffffff1f;color:#fff;border:1px solid #ffffff33;border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:18px;line-height:1}
.iconbtn:hover{background:#ffffff33}
select,input,textarea{font:inherit;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;width:100%}
button{font:inherit;cursor:pointer}
.btn{background:var(--navy);color:#fff;border:0;padding:10px 14px;border-radius:10px;font-weight:700}
.btn.emerald{background:var(--emerald)}
.btn.emerald:hover{background:var(--emerald-dark)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--border)}
.btn.danger{background:var(--red);color:#fff}
.btn.small{padding:7px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:56px;z-index:10}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700;cursor:pointer}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
main{max-width:1080px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid.cols2,.grid.cols3{grid-template-columns:1fr}.tagline{display:none}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.muted{color:var(--muted);font-size:13px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#EEF2FF}
.pill.on{background:#D1FAE5;color:#065F46}
.pill.off{background:#FEE2E2;color:#991B1B}
.pill.warn{background:#FEF3C7;color:#92400E}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi{font-size:28px;font-weight:900}
.menu-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
.menu-card h3{margin:0 0 4px}
.price{font-weight:900;font-size:18px}
.login-wrap{max-width:420px;margin:40px auto}
.login-box{background:var(--navy);color:#fff;border-radius:18px;padding:22px;text-align:center}
.login-box .logo{font-size:44px}
.login-box input{background:#ffffff14;border-color:#ffffff33;color:#fff}
.login-box input::placeholder{color:#ffffff99}
.quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.quick button{background:#ffffff1f;color:#fff;border:1px solid #ffffff33;border-radius:10px;padding:9px}
.receipt{background:#fff;color:#111;border:1px dashed #999;padding:16px;max-width:360px;font-family:ui-monospace,monospace;font-size:13px}
.receipt h3{font-family:system-ui;text-align:center;margin:0}
.center{text-align:center}
.hidden{display:none!important}
.switch{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.switch input{width:44px;height:24px;accent-color:var(--emerald)}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;z-index:99;box-shadow:0 8px 24px #0003}
.qrbox{text-align:center}
.qrbox img{width:220px;height:220px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:12px}

/* ===== QR customer (halaman order publik /order) — mobile-first, 360px ===== */
html,body{overflow-x:hidden}
.qr-wrap{max-width:720px;margin:0 auto;padding:12px 12px 96px;overflow-x:hidden}
.qr-wrap .card{overflow:hidden}
.qr-header{flex-wrap:nowrap;overflow:hidden}
.qr-header .logo{font-size:24px}
.qr-header .badge{white-space:nowrap;flex-shrink:0;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.qr-search{width:100%;min-height:44px}
.qr-catbar{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.qr-catbar .tab{flex:0 0 auto;white-space:nowrap;min-height:36px}
.qr-product{overflow:hidden}
.qr-prod-name{font-size:16px;font-weight:800;line-height:1.3;word-break:break-word}
.qr-prod-desc{font-size:13px;line-height:1.4;word-break:break-word}
.qr-var-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.qr-var-field{min-width:0}
.qr-var-field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-var-field select{width:100%;min-height:44px;padding:8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.qr-top-item{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff;min-width:0;cursor:pointer}
.qr-top-item input[type=checkbox]{width:20px;height:20px;min-width:20px;flex-shrink:0;margin:2px 0 0;accent-color:var(--emerald)}
.qr-top-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.qr-top-name{font-size:13px;line-height:1.3;word-break:break-word}
.qr-top-price{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.qr-qty-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.qr-qty-row input{width:72px;min-width:72px;min-height:44px;text-align:center;padding:8px}
.qr-qty-row .btn{min-height:44px;flex:1}
.qr-cart-sticky{position:sticky;bottom:0;z-index:25;background:var(--bg);padding:10px 0 0;margin-top:12px}
#cartBox .row{align-items:flex-start}
#cartBox .row span{min-width:0;word-break:break-word}
.qr-cart-sticky .card{margin-bottom:10px}
.qr-submit{width:100%;padding:14px;font-size:17px;min-height:52px}
@media(max-width:400px){
  .qr-wrap{padding-left:10px;padding-right:10px}
  .qr-var-grid{grid-template-columns:1fr 1fr;gap:6px}
  .qr-top-grid{grid-template-columns:1fr 1fr;gap:6px}
  .qr-top-item{padding:7px}
  .qr-top-name{font-size:12.5px}
  .qr-top-price{font-size:11.5px}
}

/* ===== QR SIMPLE v1.3 — list simple + bottom sheet detail/keranjang ===== */
.qr-bell{background:#10B981;color:#fff;border:0;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;white-space:nowrap;cursor:pointer;min-height:36px}
.qr-bell:disabled{opacity:.5}
.qr-outlet .btn{margin-top:10px}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.qr-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.qr-card-body{padding:10px;display:flex;flex-direction:column;gap:4px;flex:1}
.qr-card-name{font-size:14px;font-weight:800;line-height:1.3;word-break:break-word}
.qr-card-desc{font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.qr-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px}
.qr-card-foot .price{font-size:15px}
.qr-add{width:40px;height:40px;min-width:40px;border-radius:50%;border:0;background:var(--emerald);color:#fff;font-size:24px;line-height:1;cursor:pointer;flex-shrink:0}
.qr-add:hover{background:var(--emerald-dark)}
.qr-sheet-backdrop{position:fixed;inset:0;background:#0008;z-index:40}
.qr-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-radius:20px 20px 0 0;max-height:88vh;overflow-y:auto;box-shadow:0 -8px 32px #0004;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.qr-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 8px;position:sticky;top:0;background:#fff;z-index:2}
.qr-sheet-body{padding:0 14px 14px}
.qr-detail-label{font-size:12px;font-weight:800;color:var(--muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.qr-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.qr-chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-weight:700;font-size:13px;cursor:pointer;min-height:40px}
.qr-chip.sel{background:var(--emerald);border-color:var(--emerald);color:#fff}
.qr-top-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.qr-stepper{display:inline-flex;align-items:center;gap:8px}
.qr-stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:18px;cursor:pointer;line-height:1}
.qr-stepper span{min-width:20px;text-align:center;font-weight:800}
.qr-sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.qr-cart-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.qr-cart-info{min-width:0;word-break:break-word}
.qr-cart-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.qr-success{text-align:center}
.qr-success-icon{width:56px;height:56px;border-radius:50%;background:#D1FAE5;color:#065F46;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;margin:0 auto 8px}
.kasir-banner{border-color:var(--amber);background:#FFFBEB}
@media(max-width:400px){
  .qr-grid{gap:8px}
  .qr-card-name{font-size:13px}
  .qr-card-foot .price{font-size:14px}
  .qr-chip{padding:8px 12px;font-size:12px}
}