:root{
  /* Colors */
  --brand:#F5821F;
  --brand-dark:#D6501C;
  --brand-light:#FDBA5C;
  --grad: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
  --grad-green: linear-gradient(135deg, #4ECDC4 0%, #51CF66 55%, #2F9E44 100%);
  --ink:#2B2420;
  --ink-soft:#6B5F54;
  --paper:#FBF6EF;
  --surface:#FFFFFF;
  --line:#ECE1D3;
  --green:#3F8C52;
  --green-soft:#E7F3E9;
  --red:#D2483A;
  --red-soft:#FBEAE7;
  --lcd-bg:#1C2620;
  --lcd-fg:#8CF2A0;
  
  /* Shadows (scale) */
  --shadow-sm: 0 1px 3px rgba(43,36,32,0.08);
  --shadow-md: 0 2px 10px rgba(43,36,32,0.06), 0 8px 24px rgba(43,36,32,0.06);
  --shadow-lg: 0 10px 32px rgba(43,36,32,0.12);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.4);
  --shadow: var(--shadow-md);
  
  /* Border Radius (scale) */
  --radius-full: 99px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  
  /* Spacing Scale */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  
  /* Safe Area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  
  /* Z-index System */
  --z-header: 50;
  --z-bar: 59;
  --z-nav: 60;
  --z-sheet: 200;
  --z-lock: 500;
  --z-toast: 999;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,.disp{font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; letter-spacing:-0.01em;}
button{font-family:inherit;}
.mono{font-family:'Space Mono',monospace;}
#app{max-width:100%; margin:0; min-height:100vh; position:relative; background:var(--paper); display:flex; flex-direction:column;}
@media (min-width: 1024px){
  #app{max-width:1200px; margin:0 auto;}
}

/* ---------- SPLASH ---------- */
/* Splash screen dihapus untuk kecepatan aplikasi */
@keyframes pop{0%{transform:scale(.7);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* ---------- HEADER ---------- */
header.topbar{
  position:sticky; top:0; z-index:var(--z-header); padding-top:calc(var(--safe-top) + 12px);
  background:var(--grad); color:#fff; padding-left:16px; padding-right:16px; padding-bottom:14px;
  border-radius:0 0 20px 20px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar-left{display:flex; align-items:center; gap:10px; flex:1; min-width:0;}
.topbar-right{display:flex; align-items:center; gap:8px; flex-shrink:0;}
/* Logo baru sudah bundar penuh (cincin oranye sampai tepi) — lingkaran putih
   + shadow badge tidak diperlukan lagi (dulu jadi border putih mengelilingi
   logo); img mengisi penuh 38px. */
.brand-badge{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-badge img{width:38px; height:38px; border-radius:50%;}
.brand-txt{flex:1; min-width:0;}
.brand-txt .biz{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1;}
.brand-txt .tag{font-size:11px; opacity:0.85; margin-top:1px;}
.trial-chip{background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.35); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px; white-space:nowrap; flex-shrink:0;}
.trial-chip.warn{background:#fff; color:var(--brand-dark);}
.trial-badge{background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; padding:6px 10px; border-radius:10px; text-align:center; flex-shrink:0; min-width:60px;}
.trial-badge.warn{background:#fff; color:var(--brand-dark); border-color:#fff;}
.btn-header-settings{background:rgba(255,255,255,0.2); border:none; color:#fff; font-size:18px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.btn-header-settings:active{transform:scale(0.95);}

/* ========== Platform Carousel ========== */
.plat-carousel{position:relative; overflow:hidden; border-radius:var(--radius-lg); color:#fff;}
.plat-carousel-track{display:flex; transition:transform .35s ease;}
.plat-carousel-slide{min-width:100%; padding:20px 18px;}
.plat-carousel-slide .plat-emoji{font-size:28px; margin-bottom:8px;}
.plat-carousel-slide .plat-title{font-size:15px; font-weight:800; margin-bottom:4px; line-height:1.3;}
.plat-carousel-slide .plat-body{font-size:12.5px; opacity:0.88; line-height:1.55;}
.plat-carousel-dots{display:flex; justify-content:center; gap:6px; padding:0 0 12px 0;}
.plat-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; cursor:pointer; padding:0; transition:all .2s;}
.plat-dot.active{background:#fff; width:18px; border-radius:4px;}
.header-title{font-size:20px; margin:14px 0 2px 0;}
.header-sub{font-size:12.5px; opacity:0.9;}

/* ---------- MAIN / SECTIONS ---------- */
main{flex:1; padding:16px 16px 100px 16px;}
.screen{display:none; animation:fadeIn .25s ease;}
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow); margin-bottom:14px;}
.card h3{font-size:15px; margin:0 0 10px 0;}
.section-label{font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:20px 2px 10px 2px;}
.section-label:first-child{margin-top:0;}

/* Dashboard stat grid — layout horizontal: ikon kiri, angka+label kanan */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (min-width: 768px){
  .stat-grid{grid-template-columns:repeat(4, 1fr); gap:16px;}
  .stat-card.wide{grid-column:span 2;}
}
@media (min-width: 1024px){
  .stat-grid{grid-template-columns:repeat(4, 1fr); gap:20px;}
}
.stat-card{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:2px; padding:14px; border-radius:var(--radius-md); box-shadow:var(--shadow); border:1.5px solid var(--line);}
.stat-card .stat-icon{font-size:15px; line-height:1; flex:none;} /* emoji kecil, tanpa kontainer */
.stat-card .stat-body{display:contents;} /* lbl & val ikut layout kartu langsung */
.stat-card .lbl{font-size:11px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; flex:1 1 auto; min-width:0; line-height:1.3;}
.stat-card .val{flex-basis:100%; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px; line-height:1.2; word-break:break-all; margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.35);}
.stat-card.wide{grid-column:1/3;}

/* KPI — gradasi 135° terang→gelap, palet diambil dari kartu dashboard admin
   (admin/style.css .summary-card.brand/.green/.red/.teal/.purple/.blue). */
.stat-card.stat-kas{background:linear-gradient(135deg,#EA5129 0%,#F39A39 100%);}
.stat-card.stat-kas .lbl, .stat-card.stat-kas .val{color:#fff;}

.stat-card.stat-stok{background:linear-gradient(135deg,#5CB6CC 0%,#0D9488 100%);}
.stat-card.stat-stok .lbl, .stat-card.stat-stok .val{color:#fff;}

.stat-card.stat-beli{background:linear-gradient(135deg,#F17B65 0%,#DC2626 100%);}
.stat-card.stat-beli .lbl, .stat-card.stat-beli .val{color:#fff;}

.stat-card.stat-jual{background:linear-gradient(135deg,#4CC583 0%,#16A34A 100%);}
.stat-card.stat-jual .lbl, .stat-card.stat-jual .val{color:#fff;}

/* Laba = metrik hero → varian brand (sama dgn Kas), teks putih. */
.stat-card.stat-laba{background:linear-gradient(135deg,#EA5129 0%,#F39A39 100%);}
.stat-card.stat-laba .lbl, .stat-card.stat-laba .val{color:#fff;}

/* Utang = red (uang keluar/kewajiban); Pengeluaran = purple (dulu kembar merah). */
.stat-card.stat-utang{background:linear-gradient(135deg,#F17B65 0%,#DC2626 100%);}
.stat-card.stat-utang .lbl, .stat-card.stat-utang .val{color:#fff;}
.stat-card.stat-pengeluaran{background:linear-gradient(135deg,#9B59B6 0%,#8B5CF6 100%);}
.stat-card.stat-pengeluaran .lbl, .stat-card.stat-pengeluaran .val{color:#fff;}

/* Piutang = uang masuk tertunda → blue. */
.stat-card.stat-piutang{background:linear-gradient(135deg,#5CB6CC 0%,#2563EB 100%);}
.stat-card.stat-piutang .lbl, .stat-card.stat-piutang .val{color:#fff;}

/* Kartu berwarna: border garis pucat jadi halo putih di atas gradasi —
   buang (admin .summary-card juga tanpa border). */
.stat-card[class*="stat-"]{border-color:transparent;}

/* Buttons */
.btn{border:none; border-radius:14px; padding:var(--sp-16) var(--sp-16); font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8); width:100%;}
.btn:active{transform:scale(0.98);}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(214,80,28,0.3);}
.btn-outline{background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-secondary{background:#FFF7EE; color:var(--brand-dark); border:1.5px solid var(--brand); box-shadow:0 0 0 1px rgba(245,130,31,0.25);}
.btn-ghost{background:transparent; color:var(--brand-dark); font-weight:700;}
.btn-danger{background:var(--red-soft); color:var(--red);}
.btn-warning{background:#FFF3DC; color:#9A6B00;}
.btn-soft{background:var(--paper); color:var(--brand-dark); border:1.5px solid var(--line);}
.btn-sm{padding:var(--sp-8) var(--sp-12); font-size:13px; border-radius:var(--radius-sm); width:auto;}
.btn-extend{background:var(--grad-green); color:#fff; border:none; padding:var(--sp-16) var(--sp-16); border-radius:14px; font-weight:700; font-size:15px; cursor:pointer; width:100%; box-shadow:0 6px 16px rgba(47,158,68,0.3);}
.btn-extend:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.btn-block-row{display:flex; gap:var(--sp-12);}

.btn-backup-action{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:var(--sp-12); padding:var(--sp-16) var(--sp-12); border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:var(--ink); transition:all 0.2s;}
.btn-backup-action:active{transform:scale(0.95);}
.btn-backup-action:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.backup-icon{width:32px; height:32px; border-radius:var(--radius-xs); background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}

/* ============ LICENSE CARD STYLING ============ */
.license-card-active{box-shadow:none; text-align:center; padding:var(--sp-20);}
.license-card-active .license-icon{font-size:40px; margin-bottom:var(--sp-8);}
.license-card-active .license-key{font-size:13px; color:var(--ink-soft); margin-top:var(--sp-8); margin-bottom:0;}
.license-card-active .license-expiry{font-size:12px; color:var(--ink-soft); margin:var(--sp-4) 0 var(--sp-8);}
.license-card-active .license-desc{font-size:11.5px; color:var(--ink-soft); margin-top:var(--sp-8); line-height:1.4;}

.license-card-trial{box-shadow:none;}
.license-header{text-align:center; margin-bottom:var(--sp-12);}
.license-icon{font-size:32px; margin-bottom:var(--sp-8);}
.license-title{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:var(--sp-8);}
.license-description{font-size:13px; color:var(--ink-soft); margin-bottom:var(--sp-8); line-height:1.4;}

.license-extend-section{margin-top:var(--sp-12);}
.license-extend-section .license-usage{margin-top:var(--sp-8);}

.license-actions{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); margin-top:var(--sp-12);}
.btn-buy-wa{background:#fff; border:1.5px solid var(--brand-dark); color:var(--brand-dark); padding:var(--sp-16); border-radius:var(--radius-sm); font-weight:700; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:var(--sp-8); transition:all 0.2s;}
.btn-buy-wa:active{transform:scale(0.98);}
.btn-buy-wa:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

.license-usage{text-align:center; font-size:12px; color:var(--ink-soft);}

/* Forms */
label.field-label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:0 0 var(--sp-8) var(--sp-4);}
input[type=text], input[type=number], input[type=tel], input[type=email], input[type=password], textarea, select{
  width:100%; padding:var(--sp-12) var(--sp-16); border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:15px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px rgba(245,130,31,0.1);}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:2px solid var(--brand); outline-offset:0;}
input::placeholder, textarea::placeholder{color:var(--ink-soft); opacity:0.6;}
.field{margin-bottom:var(--sp-12);}
.hint{font-size:11.5px; color:var(--ink-soft); margin-top:var(--sp-8);}
.payment-hint{
  font-size:12px;
  color:var(--ink);
  background:#FFF9F3;
  border-left:3px solid var(--brand-light);
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--radius-xs);
  margin-top:var(--sp-12);
  line-height:1.5;
}

/* Utility classes for extracted inline styles */
.card-compact{padding:var(--sp-8) var(--sp-12);}
.text-center{text-align:center;}
.hidden{display:none !important;}
/* Filter periode riwayat */
.riwayat-filter-block{border-bottom:1px solid var(--line); padding-bottom:var(--sp-12); margin-bottom:var(--sp-8);}
.riwayat-periode-tabs .tab-btn{font-size:12px; padding:var(--sp-8) 0;}
.riwayat-range-row{display:flex; align-items:flex-end; gap:var(--sp-8); margin-top:var(--sp-8); flex-wrap:wrap;}
.riwayat-range-row input[type=date]{flex:1 1 100px; min-width:0; padding:var(--sp-8); border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:#fff; color:var(--ink);}
.riwayat-range-row input[type=date]:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(245,130,31,0.1); outline:none;}
.riwayat-range-row .field-label{margin-bottom:4px; white-space:nowrap;}
.mt-2{margin-top:2px !important;}
.mt-4{margin-top:4px !important;}
.mb6{margin-bottom:6px !important;} 
.mb10{margin-bottom:10px !important;} 
.muted-note{font-size:13px; color:var(--ink-soft); margin:0 0 12px 0; line-height:1.5;} 
.two-col-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;} 
.contact-strip{background:#FDEFDC; padding:8px; border-radius:8px;} 
.contact-strip a{color:var(--brand-dark); font-weight:700;} 
.footer-note{text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:6px;} 
.small-label{font-size:13px; color:var(--ink-soft);} 
.big-strong{font-size:15px; font-weight:800;} 
.card-no-shadow{box-shadow:none !important;} 
/* New helpers */
.logo-sm{width:44px;height:44px;border-radius:50%;}
.logo-lg{width:56px;height:56px;border-radius:50%;}
.bordered{border:1px solid var(--line);} 
.compact-row{font-size:14px; padding:6px 2px;} 
.nota-title{margin:8px 0 0 0; font-size:16px;}
.nota-sub{font-size:11.5px; color:var(--ink-soft);}
.nota-line{font-size:13px; padding:4px 0; display:flex; justify-content:space-between;}
.lock-icon{font-size:48px; margin-bottom:8px; text-align:center;}
.lock-title{font-size:18px; margin:0 0 6px 0; text-align:center;}
.lock-desc{text-align:center; font-size:13.5px; color:var(--ink-soft); margin:0 0 16px 0; line-height:1.5;}

/* End helpers */
/* Additional helpers for inline-style cleanup */
.p16{padding:16px;}
.mt6{margin-top:6px !important;}
.mt12{margin-top:12px !important;}
.transfer-badge{margin-left:4px; display:inline-block}
.total-strong{font-weight:800; font-size:16px}
.nota-footer{text-align:center}
.row-divider{padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.row-icon.green-soft{background:var(--green-soft); color:var(--green)}
.badge.compact{font-size:13px; padding:6px 14px}
.uppercase{text-transform:uppercase}
.text-red-strong{color:var(--red); font-weight:700}
/* End helpers */
.legend-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:var(--sp-4);}
.legend-beli{background:var(--brand-light);}
.legend-jual{background:var(--green);}
.plat-carousel-spacing{margin-bottom:var(--sp-16);}
.trial-label-xs{font-size:9px; opacity:0.9;}
.trial-value-sm{font-weight:700; font-size:12px;}

/* Bottom Nav */
nav.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; justify-content:center;
}
.bottomnav-inner{
  width:100%; background:#fff; border-top:1px solid var(--line);
  display:flex; padding:8px 4px calc(8px + var(--safe-bottom)) 4px; box-shadow:0 -4px 16px rgba(0,0,0,0.05);
}
@media (min-width: 768px){
  .bottomnav-inner{padding:12px 16px calc(12px + var(--safe-bottom)) 16px;}
}
.nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:var(--sp-8) var(--sp-4); color:var(--ink-soft); cursor:pointer; border-radius:var(--radius-sm); position:relative; pointer-events:auto; transition:color 0.2s;}
.nav-item *{pointer-events:none;}
.nav-item .ic{font-size:20px; line-height:1;}
.nav-item .lbl{font-size:10.5px; font-weight:600;}
.nav-item.active{color:var(--brand-dark);}
.nav-item:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.nav-item .fab-wrap{width:48px; height:48px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; margin-top:-26px; box-shadow:0 6px 16px rgba(214,80,28,0.4); border:4px solid var(--paper);}
.nav-item .fab-wrap span{color:#fff; font-size:22px;}

/* Kategori grid (POS pick) */
.kat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px;}
@media (min-width: 768px){
  .kat-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px;}
}
@media (min-width: 1024px){
  .kat-grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:20px;}
}
.kat-item{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:var(--sp-12) var(--sp-8); text-align:center; cursor:pointer; position:relative; transition:all 0.2s;}
.kat-item .emoji{font-size:24px;}
.kat-item .nm{font-size:12px; font-weight:700; margin-top:var(--sp-8); line-height:1.2;}
.kat-item .hg{font-size:10.5px; color:var(--ink-soft); margin-top:var(--sp-4);}
.kat-item.disabled{opacity:0.35; pointer-events:none;}
.kat-item:active{transform:scale(0.96); border-color:var(--brand);}
.kat-item:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.kat-item.empty-add{border-style:dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--brand-dark);}
.kat-stock{position:absolute; top:var(--sp-4); right:var(--sp-4); background:var(--green-soft); color:var(--green); border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-8); font-size:11px; font-weight:700; pointer-events:none;}

/* Emoji picker */
.emoji-picker{position:relative;}
.emoji-picker-grid{display:none; position:absolute; z-index:var(--z-nav); top:calc(100% + var(--sp-4)); left:0; right:0; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:var(--sp-8); grid-template-columns:repeat(8,1fr); gap:var(--sp-4); box-shadow:0 8px 24px rgba(0,0,0,0.12); max-height:180px; overflow-y:auto;}
.emoji-picker-grid.show{display:grid;}
.emoji-picker-grid button{aspect-ratio:1; font-size:20px; border:none; background:transparent; border-radius:var(--radius-xs); cursor:pointer; padding:0; line-height:1; transition:background 0.2s;}
.emoji-picker-grid button:active, .emoji-picker-grid button:hover{background:var(--brand-light);}
.emoji-picker-grid button:focus-visible{outline:2px solid var(--brand); outline-offset:1px;}

/* ========== CART: Chip Ringkas (Step 1) ========== */

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root{
    --paper:#081017;
    --surface:#0f1720;
    --ink:#e6eef3;
    --ink-soft:#aebdcc;
    --line:#1f2a35;
    --brand:#F5821F; /* keep brand */
    --brand-dark:#D6501C;
    --brand-light:#FDBA5C;
    --shadow-sm: 0 1px 6px rgba(0,0,0,0.6);
  }
  body{background:var(--paper); color:var(--ink);}
  .card{background:var(--surface); border-color:var(--line);}
  header.topbar{background: linear-gradient(135deg, rgba(245,130,31,0.12) 0%, rgba(245,130,31,0.08) 55%, rgba(214,80,28,0.06) 100%); color:var(--ink);}
  .btn-outline{background:transparent; color:var(--ink); border-color:var(--line);}
  .kat-item{background:transparent; border-color:var(--line);}
  nav.bottomnav{background:rgba(15,23,32,0.9);}
  .badge{background:rgba(255,255,255,0.06); color:var(--ink); border:1px solid var(--line);}
}

/* ========== CART: Chip Ringkas (Step 1) ========== */
.cart-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  margin-top:var(--sp-12);
}
.cart-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-4);
  background:#fff;
  border:1px solid var(--line);
  border-radius:99px;
  padding:6px 8px 6px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  line-height:1.2;
  max-width:100%;
}
.cart-chip .x{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--red-soft);
  color:var(--red);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.2s, color 0.2s;
}
.cart-chip .x:active{
  background:var(--red);
  color:#fff;
}
.cart-chip .x:focus-visible{
  outline:2px solid var(--red);
  outline-offset:1px;
}

/* ========== CART REDESIGN: Detailed Items (Step 2) ========== */
.empty-state-cart{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--sp-32) var(--sp-16);
  text-align:center;
}
.empty-icon{
  font-size:48px;
  margin-bottom:var(--sp-16);
}
.empty-title{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:var(--sp-8);
}
.empty-desc{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.6;
  margin-bottom:var(--sp-16);
}

.cart-items-container{
  display:flex;
  flex-direction:column;
  gap:var(--sp-12);
  margin-bottom:var(--sp-16);
}
.cart-item-detail{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.2s;
}
.cart-item-detail:active{
  box-shadow:var(--shadow-md);
}

.item-header{
  display:grid;
  grid-template-columns:40px 1fr 32px;
  align-items:center;
  gap:var(--sp-12);
  padding:var(--sp-12);
  border-bottom:1px solid var(--line);
}
.item-emoji{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--green-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.item-title{
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}
.item-delete{
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--red);
  font-size:16px;
  cursor:pointer;
  border-radius:var(--radius-xs);
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.item-delete:active{
  background:var(--red-soft);
}
.item-delete:focus-visible{
  outline:2px solid var(--red);
  outline-offset:1px;
}

.item-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--sp-12);
  padding:var(--sp-12);
}
.item-spec{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.spec-label{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.spec-value{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}

.item-subtotal{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  text-align:right;
  border-left:2px solid var(--line);
  padding-left:var(--sp-12);
}
.sub-label{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.sub-value{
  font-size:14px;
  font-weight:800;
  color:var(--brand);
}

/* ========== CART REDESIGN: Summary Footer ========== */
.cart-summary-footer{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  padding:var(--sp-12);
  background:linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
  border-radius:var(--radius-md);
  border:1px solid var(--line);
}
.summary-line{
  display:flex;
  justify-content:center;
  font-size:12px;
  color:var(--ink-soft);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.summary-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--sp-8);
  padding-top:var(--sp-8);
  border-top:1px solid var(--line);
}
.total-label{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}
.total-amount{
  font-size:18px;
  font-weight:800;
  color:var(--brand);
}

/* Digital scale display (signature element) */
.scale-display{
  background:var(--lcd-bg); border-radius:var(--radius-md); padding:var(--sp-16) var(--sp-16); text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--shadow-inset);
}
.scale-display::before{content:"TIMBANGAN DIGITAL"; position:absolute; top:var(--sp-8); left:var(--sp-16); font-size:9px; letter-spacing:.12em; color:#5C7A66; font-family:'Space Mono',monospace;}
.scale-display .kg-val{font-family:'Space Mono',monospace; font-weight:700; font-size:44px; color:var(--lcd-fg); text-shadow:0 0 12px rgba(140,242,160,0.55); margin-top:var(--sp-12); letter-spacing:0.02em;}
.scale-display .kg-unit{font-size:14px; color:#5C7A66; margin-top:var(--sp-4); font-family:'Space Mono',monospace;}
.stepper-row{display:flex; gap:var(--sp-8); margin-top:var(--sp-12);}
.step-btn{flex:1; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-12) 0; font-weight:800; font-size:14px; cursor:pointer; transition:all 0.2s;}
.step-btn:active{background:var(--paper);}
.step-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); margin-top:var(--sp-12);}
.key-btn{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-16) 0; font-weight:700; font-size:17px; cursor:pointer; transition:all 0.2s;}
.key-btn:active{background:var(--paper);}
.key-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.key-btn.wide{grid-column:span 1;}

/* List rows */
.row-item{display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-12) var(--sp-4); border-bottom:1px solid var(--line); cursor:pointer; border-radius:var(--radius-sm); transition:background 0.2s;}
.row-item:last-child{border-bottom:none;}
.row-item:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.row-icon{width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.row-icon.beli{background:var(--green-soft); color:var(--green);}
.row-icon.jual{background:#FDEFDC; color:var(--brand-dark);}
.row-icon.kas-masuk{background:var(--green-soft); color:var(--green);}
.row-icon.kas-keluar{background:var(--red-soft); color:var(--red);}
.row-body{flex:1; min-width:0;}
.row-title{font-weight:700; font-size:14px;}
.row-sub{font-size:12px; color:var(--ink-soft); margin-top:var(--sp-4);}
.row-amt{font-weight:800; font-size:14px; white-space:nowrap;}
.row-amt.green{color:var(--green);}
.row-amt.red{color:var(--red);}

/* Compact list untuk Buku Kas & Riwayat Shift (lebih rapat & proporsional) */
.compact-list .row-item{padding:var(--sp-8) var(--sp-4); gap:var(--sp-12);}
.compact-list .row-icon{width:32px; height:32px; border-radius:var(--radius-xs); font-size:14px;}
.compact-list .row-title{font-size:13px; line-height:1.3;}
.compact-list .row-sub{font-size:11px; margin-top:var(--sp-4); line-height:1.35;}
.compact-list .row-amt{font-size:13px;}
.compact-list .badge{padding:var(--sp-4) var(--sp-8); font-size:10px;}

.tabs{display:flex; gap:var(--sp-8); background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-8); margin-bottom:var(--sp-16);}
.tab-btn{flex:1; text-align:center; padding:var(--sp-12) 0; border-radius:var(--radius-xs); font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; min-width:0; transition:all 0.2s; border:none; background:transparent;}
.tab-btn.active{background:var(--grad); color:#fff;}
.tab-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* Dropdown filter per bulan — ditempatkan paling kanan di baris tab */
/* Filter periode laporan */
.laporan-filter-block{padding:var(--sp-12);}
.laporan-periode-tabs .tab-btn{font-size:12px; padding:var(--sp-8) 0;}
.laporan-range-row{display:flex; align-items:flex-end; gap:var(--sp-8); margin-top:var(--sp-8); flex-wrap:wrap;}
.laporan-range-row input[type=date]{flex:1 1 100px; min-width:0; padding:var(--sp-8); border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:#fff; color:var(--ink);}
.laporan-range-row input[type=date]:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* Tab responsif: muat penuh di layar kecil portrait */
/* Sticky filter tabs in Laporan screen */
#screen-laporan .tabs{
  position:sticky; top:56px; z-index:100;
  background:var(--paper) !important;
  padding-top:8px; padding-bottom:8px;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Sticky transaction tabs in Transaksi screen */
#screen-transaksi > .tabs{
  position:sticky; top:64px; z-index:100;
  background:#fff;
  padding-top:var(--sp-8); padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  margin-bottom:var(--sp-12);
}

@media (max-width: 479px){
  .tabs{gap:var(--sp-8); padding:var(--sp-8);}
  .tab-btn{padding:var(--sp-8) var(--sp-4); font-size:11px;}
}

.empty-state{text-align:center; padding:var(--sp-32) var(--sp-20); color:var(--ink-soft);}
.empty-state .ic{font-size:40px; margin-bottom:var(--sp-12);}
.empty-state .t1{font-weight:700; color:var(--ink); font-size:15px;}
.empty-state .t2{font-size:13px; margin-top:var(--sp-8);}

/* Bar chart */
/* Proporsi grafik mengikuti kaki5 .chart-bars: bar 120px (HP) / 160px
   (≥768px via --chart-h), gap 6px, radius 6px, label 10px/600, nilai 9px/700. */
.barchart{--chart-h:120px; display:flex; align-items:flex-end; gap:6px; height:calc(var(--chart-h) + 36px); margin-top:var(--sp-8); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:var(--sp-4);}
.barchart .bwrap{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px;}
/* Kolom scroll lebih lega (kaki5: min 30px/kolom) agar label & bar kebaca */
.barchart.scrollable .bwrap{flex:1 0 30px;}
.barchart .bar{width:100%; border-radius:6px 6px 0 0; background:var(--brand-light); position:relative;}
.barchart .bar.jual{background:var(--green);}
.barchart .blbl{font-size:10px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
/* Pelengkap grafik ala kaki5 renderHourlyChart: subtitle konteks, label nilai
   'k' di atas kolom, dan keadaan kosong (dulu: 24 stub 3px rata tanpa makna). */
.chart-sub{font-size:11px; color:var(--ink-soft); margin:-2px 0 2px;}
.chart-val{font-size:9px; font-weight:700; color:var(--ink-soft); height:12px; line-height:12px; text-align:center; width:100%;}
.chart-empty{flex:1; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-soft); font-size:12.5px; padding:24px 8px; height:100%;}
@media (min-width:768px){ .barchart{--chart-h:160px} }
.legend-row{display:flex; gap:var(--sp-20); font-size:11.5px; margin-top:var(--sp-8); color:var(--ink-soft);}
.legend-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:var(--sp-4);}

.wa-link{color:var(--green); text-decoration:none; font-weight:700;}
.link-plain{color:var(--brand-dark); font-weight:700; text-decoration:none;}
.divider{height:1px; background:var(--line); margin:var(--sp-16) 0;}
.contact-strip{display:flex; align-items:center; gap:var(--sp-12); background:var(--green-soft); border-radius:var(--radius-md); padding:var(--sp-16) var(--sp-16); margin-top:var(--sp-12);}
.contact-strip a{color:var(--green); font-weight:700; text-decoration:none; font-size:13px; transition:opacity 0.2s;}
.contact-strip a:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* Modal / Sheet */
.overlay{position:fixed; inset:0; background:rgba(20,15,10,0.5); z-index:var(--z-sheet); display:none; align-items:flex-end; justify-content:center;}
.overlay.show{display:flex;}
.sheet{background:var(--paper); width:100%; max-width:520px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; max-height:92vh; overflow-y:auto; padding:var(--sp-16) var(--sp-16) calc(var(--sp-20) + var(--safe-bottom)) var(--sp-16); animation:slideUp .28s ease;}
@keyframes slideUp{from{transform:translateY(30px); opacity:0.4;} to{transform:translateY(0); opacity:1;}}
.sheet-handle{width:40px; height:5px; background:var(--line); border-radius:var(--radius-full); margin:0 auto var(--sp-12) auto;}
.sheet-title{font-size:17px; margin:0 0 var(--sp-12) 0; display:flex; align-items:center; justify-content:space-between;}
.sheet-close{font-size:20px; color:var(--ink-soft); cursor:pointer; padding:var(--sp-8); border-radius:var(--radius-sm); transition:background 0.2s;}
.sheet-close:active{background:var(--line);}
.sheet-close:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* Lock overlay (trial expired) */
.lock-overlay{position:fixed; inset:0; background:var(--grad); z-index:var(--z-lock); display:none; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-24); text-align:center;}
.lock-overlay.show{display:flex;}
.lock-overlay .lock-card{background:#fff; border-radius:var(--radius-lg); padding:var(--sp-24) var(--sp-20); width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,0.3);}
.lock-overlay img{width:64px; height:64px; border-radius:50%; margin-bottom:var(--sp-12);}

/* Fallback ID selector for backwards compatibility */
#lockOverlay{position:fixed; inset:0; background:var(--grad); z-index:var(--z-lock); display:none; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-24); text-align:center;}
#lockOverlay.show{display:flex;}
#lockOverlay .lock-card{background:#fff; border-radius:var(--radius-lg); padding:var(--sp-24) var(--sp-20); width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,0.3);}
#lockOverlay img{width:64px; height:64px; border-radius:50%; margin-bottom:var(--sp-12);}

/* toast */
.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:var(--sp-12) var(--sp-16); border-radius:var(--radius-md); font-size:13.5px; font-weight:600; z-index:var(--z-toast); opacity:0; pointer-events:none; transition:all .25s ease; max-width:88%; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,0.25);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}

/* Fallback ID selector */
#toast{--: var(--ignored);}
#toast.show{--: var(--ignored);}

/* misc */
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.mt8{margin-top:var(--sp-8);} .mt10{margin-top:10px;} .mt12{margin-top:var(--sp-12);} .mt16{margin-top:var(--sp-16);} .mb0{margin-bottom:0;}
.total-bar{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:var(--sp-16) var(--sp-16) calc(var(--sp-16) + var(--safe-bottom)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:0 -6px 16px rgba(0,0,0,0.06);}
.badge{display:inline-block; padding:var(--sp-4) var(--sp-12); border-radius:var(--radius-full); font-size:11px; font-weight:700;}
.badge.green{background:var(--green-soft); color:var(--green);}
.badge.orange{background:#FDEFDC; color:var(--brand-dark);}
.badge.red{background:var(--red-soft); color:var(--red);}
.badge.blue{background:#D6E4FF; color:#1A73E8;}
.print-only{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{position:absolute; top:0; left:0; width:100%;}
}
::-webkit-scrollbar{width:0; height:0;}
@media (min-width: 768px){
  ::-webkit-scrollbar{width:auto; height:auto;}
}

/* ========== PAYMENT PAGE REDESIGN: Compact Layout ========== */
.payment-cart-compact{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:var(--sp-12);
}
.cart-compact-list{
  display:flex;
  flex-direction:column;
  max-height:160px;
  overflow-y:auto;
  padding:var(--sp-8) 0;
}
.cart-compact-item{
  display:grid;
  grid-template-columns:32px 1fr 80px 28px;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-12);
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.cart-compact-item:last-child{border-bottom:none;}
.cart-compact-item .item-emoji{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--green-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.cart-compact-item .item-text{
  min-width:0;
}
.cart-compact-item .item-name{
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cart-compact-item .item-detail{
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cart-compact-item .item-amount{
  font-weight:800;
  font-size:12px;
  text-align:right;
}
.cart-compact-item .item-remove{
  width:28px;
  height:28px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--red);
  font-size:14px;
  cursor:pointer;
  border-radius:var(--radius-xs);
  transition:background 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.cart-compact-item .item-remove:active{
  background:var(--red-soft);
}

/* Contact Info - Compact */
.payment-contact-compact{
  display:block;
  margin-bottom:var(--sp-12);
}
.contact-input{
  padding:var(--sp-12) var(--sp-12);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-family:inherit;
  background:#fff;
  transition:border-color 0.2s;
  margin-bottom:var(--sp-12); /* jarak ke kartu pembayaran di bawahnya */
}
.step2-header-grid .contact-input{
  margin-bottom:0; /* grid sudah punya gap */
}
.contact-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(245,130,31,0.1);
}
.contact-input::placeholder{
  color:var(--ink-soft);
  opacity:0.6;
}

/* Payment Card - Compact & Unified */
.payment-card-compact{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--sp-12);
  margin-bottom:var(--sp-12);
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media(min-width:768px){
  .payment-card-compact{
    padding:var(--sp-16);
    margin-bottom:var(--sp-16);
    gap:var(--sp-12);
  }
}

.payment-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--sp-8);
  padding-bottom:var(--sp-12);
  border-bottom:2px solid var(--line);
  font-weight:800;
  font-size:14px;
}
.payment-total b{
  font-size:18px;
  color:var(--brand);
}

.payment-method-inline{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--sp-12);
  margin-bottom:var(--sp-8);
}
.method-btn{
  padding:var(--sp-12) var(--sp-8);
  border:1.5px solid #D0C5BC;
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all 0.2s;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
.method-btn:hover{
  border-color:var(--brand-light);
  background:#FFF9F3;
}
.method-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.method-btn.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.method-btn:active:not(.active){
  background:var(--paper);
  border-color:#D0C5BC;
}
@media(max-width:360px){
  /* Layar sempit: metode bayar jangan sampai wrap jadi 2 baris */
  .payment-method-inline{gap:var(--sp-8);}
  .method-btn{padding:10px 4px; font-size:12px;}
}

.amount-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-soft);
  margin-left:var(--sp-4);
}
.amount-input{
  width:100%;
  padding:var(--sp-12) var(--sp-16);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  text-align:right;
  background:#fff;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.amount-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(245,130,31,0.1);
}
.amount-input::placeholder{
  color:var(--ink-soft);
  opacity:0.5;
  text-align:right;
}

.amount-presets{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:var(--sp-12);
}
.preset-btn{
  padding:8px 4px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-xs);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all 0.2s;
  text-align:center;
}
.preset-btn:hover{
  border-color:var(--brand-light);
  background:#FFF9F3;
  color:var(--brand-dark);
}
.preset-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px;
}
.preset-btn:active{
  background:var(--brand-light);
  color:var(--brand-dark);
  border-color:var(--brand);
}
@media(min-width:768px){
  .amount-presets{gap:var(--sp-8); margin-bottom:var(--sp-12);}
  .preset-btn{padding:10px 8px; font-size:13px;}
}

.payment-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-12) 0;
  border-top:2px solid var(--line);
  font-weight:700;
  font-size:13px;
}
.payment-footer b{
  font-size:18px;
  line-height:1;
  color:var(--brand);
}
.payment-footer.state-utang b{
  color:var(--red);
}
.payment-footer.state-piutang b{
  color:var(--green);
}

/* Uang Dibayarkan & Kembalian - 2 Kolom Sejajar Horizontal */
.payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}

.payment-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.kembalian-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-12);
  border: 2px solid var(--line);
  border-radius: 8px;
  background: white;
}

.kembalian-box b {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}

/* Wizard keranjang */
.wizard-step{display:none;}
.wizard-step.active{display:block;}
.step2-header-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-12);
  align-items:center;
  margin-bottom:var(--sp-12);
}
@media(max-width:380px){
  .step2-header-grid{
    grid-template-columns:1fr;
  }
  .wizard-back{
    justify-self:start;
  }
}
.wizard-back{
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--brand-dark);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  border-radius:var(--radius-sm);
  padding:8px 12px;
  transition:background 0.2s;
  white-space:nowrap;
  flex-shrink:0;
}
.wizard-back:active{
  background:var(--paper);
}
.wizard-back:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
/* Old cart chip styles — replaced with redesign above */
:root{--navheight:78px;} /* fallback; disinkronkan otomatis oleh nav.js dari tinggi bottomnav aktual */
.wizard-bar{position:fixed; left:0; right:0; bottom:calc(var(--navheight) + var(--safe-bottom)); z-index:var(--z-bar); display:none; justify-content:center; pointer-events:none;}
.wizard-bar.show{display:flex;}
.wizard-bar-inner{width:100%; background:var(--surface); border-top:1px solid var(--line); padding:var(--sp-16) var(--sp-16) calc(var(--sp-16) + 0px); box-shadow:0 -6px 16px rgba(0,0,0,0.08); border-radius:var(--radius-lg) var(--radius-lg) 0 0; pointer-events:auto;}
@media (min-width: 768px){
  .wizard-bar-inner{max-width:720px; margin:0 auto;}
}
body.transaksi-active main{padding-bottom:170px;}

/* Sticky action bar di layar Stok (di atas bottom nav, pola sama seperti wizard-bar) */
.stok-bar{position:fixed; left:0; right:0; bottom:calc(var(--navheight) + var(--safe-bottom)); z-index:var(--z-bar); display:none; justify-content:center; pointer-events:none;}
.stok-bar.show{display:flex;}
.stok-bar-inner{max-width:100%; width:100%; background:var(--surface); border-top:1px solid var(--line); padding:var(--sp-16) var(--sp-16); box-shadow:0 -6px 16px rgba(0,0,0,0.08); border-radius:var(--radius-lg) var(--radius-lg) 0 0; pointer-events:auto;}
@media (min-width: 768px){
  .stok-bar-inner{max-width:720px; margin:0 auto;}
}

/* Sticky action bar di layar Laporan (Catat Kas, pola sama seperti stokBar) */
.kas-bar{position:fixed; left:0; right:0; bottom:calc(var(--navheight) + var(--safe-bottom)); z-index:var(--z-bar); display:none; justify-content:center; pointer-events:none;}
.kas-bar.show{display:flex;}
.kas-bar-inner{max-width:100%; width:100%; background:var(--surface); border-top:1px solid var(--line); padding:var(--sp-16) var(--sp-16); box-shadow:0 -6px 16px rgba(0,0,0,0.08); border-radius:var(--radius-lg) var(--radius-lg) 0 0; pointer-events:auto;}
@media (min-width: 768px){
  .kas-bar-inner{max-width:720px; margin:0 auto;}
}
body.stok-active main{padding-bottom:170px;}
body.laporan-active main{padding-bottom:170px;}

/* ============ TABLET RESPONSIVE STYLES ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Layout adjustments for tablet portrait */
  main{padding:20px 32px 120px 32px;}
  .card{padding:20px; margin-bottom:18px;}
  
  /* Increase touch targets */
  .kat-item{padding:16px 10px;}
  .kat-item .emoji{font-size:32px;}
  .kat-item .nm{font-size:14px;}
  .kat-item .hg{font-size:12px;}
  
  /* Button sizes */
  .btn{padding:16px 20px; font-size:16px;}
  .step-btn{padding:14px 0; font-size:16px;}
  
  /* Stat cards */
  .stat-card .stat-icon{font-size:16px;}
  .stat-card .val{font-size:20px;}
  .stat-card .lbl{font-size:12px;}
  
  /* Bottom nav */
  .nav-item .ic{font-size:24px;}
  .nav-item .lbl{font-size:12px;}
  .nav-item .fab-wrap{width:56px; height:56px; margin-top:-30px;}
  
  /* Sheet/Modal */
  .sheet{max-width:600px; margin:0 auto; border-radius:22px; max-height:80vh;}
  
  /* Typography */
  .header-title{font-size:24px;}
  .section-label{font-size:13px; margin:24px 2px 12px 2px;}
}

@media (min-width: 1024px) {
  /* Layout adjustments for tablet landscape and small desktop */
  #app{max-width:1200px; margin:0 auto;}
  main{padding:24px 48px 140px 48px;}
  .card{padding:24px; margin-bottom:20px;}
  
  /* Grid layouts */
  .kat-grid{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:20px;}
  .stat-grid{grid-template-columns:repeat(4, 1fr); gap:20px;}
  
  /* Increase touch targets */
  .kat-item{padding:20px 12px;}
  .kat-item .emoji{font-size:36px;}
  .kat-item .nm{font-size:15px;}
  .kat-item .hg{font-size:13px;}
  
  /* Button sizes */
  .btn{padding:18px 24px; font-size:17px;}
  
  /* Stat cards */
  .stat-card .stat-icon{font-size:17px;}
  .stat-card .val{font-size:24px;}
  .stat-card .lbl{font-size:13px;}
  
  /* Bottom nav */
  .bottomnav-inner{max-width:1200px; margin:0 auto;}
  
  /* Sheet/Modal */
  .sheet{max-width:700px;}
  
  /* Typography */
  .header-title{font-size:26px;}
  h3{font-size:18px;}
  .section-label{font-size:14px; margin:28px 2px 14px 2px;}
}

/* ============ LOADING INDICATOR ============ */
.loading-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:var(--z-toast); backdrop-filter:blur(2px);}
.loading-overlay.show{display:flex;}
.loading-spinner{background:var(--surface); border-radius:var(--radius-md); padding:var(--sp-24) var(--sp-32); text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.2);}
.loading-spinner .spinner{width:40px; height:40px; border:4px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto var(--sp-12);}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-spinner .text{font-size:14px; font-weight:600; color:var(--ink);}

/* Aksesibilitas: hormati preferensi pengurangan gerakan pengguna */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ========== KUOTA TRANSAKSI & BANNER LISENSI (model kaki5) ========== */
.khide{display:none}
#quotaBanner{position:fixed; top:calc(var(--safe-top) + 8px); left:12px; right:12px; z-index:var(--z-lock); display:flex; justify-content:center; pointer-events:none;}
#quotaBanner.khide{display:none;}
#quotaBanner .quota-banner-card{pointer-events:auto; background:#fff7ed; border:1px solid #fdba74; border-radius:14px; padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); max-width:520px; width:100%; font-size:13px; line-height:1.45; color:var(--ink);}
#quotaBanner .quota-banner-close{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid #fdba74; color:var(--ink-soft); font-size:14px; cursor:pointer;}
.license-progress{height:6px; border-radius:99px; background:#FFE0B2; overflow:hidden; margin:14px 0 4px;}
.license-progress span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #DFF5E1, #22A45D);}

/* ========== LAPORAN ALA KAKI5: tab segmen periode + date-nav + top rank ========== */
.report-tabs{display:flex; background:var(--line); border-radius:12px; padding:4px; margin-bottom:12px;}
.report-tab{flex:1; padding:9px 4px; border-radius:10px; text-align:center; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink-soft); transition:background-color .15s, color .15s, box-shadow .15s;}
.report-tab.active{background:var(--surface); color:var(--brand-dark); box-shadow:0 1px 4px rgba(0,0,0,.1);}
.date-nav{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.date-nav .date-label{flex:1; text-align:center; font-size:13px; font-weight:700; padding:8px 10px; background:var(--surface); border-radius:10px; border:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.date-nav .date-btn{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--surface); border:1px solid var(--line); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink);}
.date-nav .date-btn:active{background:var(--line);}
.top-menu-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.top-menu-item:last-child{border-bottom:none;}
.top-rank{width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.top-menu-info{flex:1; min-width:0;}
.top-menu-name{font-weight:700; font-size:14px; color:var(--ink);}
.top-menu-stat{font-size:12px; color:var(--ink-soft);}
.top-menu-total{font-weight:800; color:var(--green); font-size:14px; white-space:nowrap;}

/* ========== DATE PICKER ALA KAKI5 (kalender/minggu/bulan/custom) ========== */
.date-nav .date-label.toggle-picker-btn{cursor:pointer; user-select:none;}
.date-nav .date-label.active{border-color:var(--brand); background:#FFF6EC;}
.custom-picker{width:100%; box-sizing:border-box; background:#FFF3E3; border:2px solid rgba(245,130,31,.35); border-radius:12px; padding:8px; box-shadow:0 8px 20px rgba(43,36,32,.14); margin-bottom:12px;}
.cal-title{text-align:center; font-weight:700; font-size:12px; color:var(--ink); margin-bottom:5px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-head{text-align:center; font-size:9px; font-weight:800; color:var(--ink-soft); padding-bottom:2px;}
.cal-cell{height:clamp(26px,6vw,32px); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink); background:var(--surface); border-radius:8px; cursor:pointer; user-select:none;}
.cal-cell.empty{visibility:hidden;}
.cal-cell.today{border:2px solid var(--brand);}
.cal-cell.sel{background:var(--brand); color:#fff;}
.cal-cell.inrange{background:rgba(245,130,31,.16); box-shadow:inset 0 0 0 1px rgba(245,130,31,.35);}
.cal-cell:active{opacity:.6;}
.week-opt{display:flex; align-items:center; justify-content:space-between; width:100%; padding:7px 10px; margin-bottom:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:12px; cursor:pointer; color:var(--ink);}
.week-opt b{font-weight:800;}
.week-opt span{font-size:11px; color:var(--ink-soft); font-weight:600;}
.week-opt.sel{border-color:var(--brand); background:var(--brand); color:#fff;}
.week-opt.sel span{color:rgba(255,255,255,.85);}
.week-opt:active{opacity:.7;}
.month-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.month-opt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 4px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:12px; cursor:pointer; color:var(--ink);}
.month-opt b{font-weight:800;}
.month-opt span{font-size:10px; color:var(--ink-soft); font-weight:600;}
.month-opt.sel{border-color:var(--brand); background:var(--brand); color:#fff;}
.month-opt.sel span{color:rgba(255,255,255,.85);}
.custom-two{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:480px){ .custom-two{grid-template-columns:1fr 1fr;} }
.cal-half{background:var(--surface); border-radius:10px; padding:8px;}
.cal-half-title{text-align:center; font-size:11px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}
.cal-nav{display:flex; align-items:center; gap:4px; margin-bottom:4px;}
.cal-nav .cal-title{flex:1; margin-bottom:0;}
.cal-nav-btn{width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}

/* ========== AKORDEON DATE-NAV: buka/tutup via tab filter ========== */
@keyframes accSlide{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
#reportDateNav .date-nav{animation:accSlide .18s ease;}
#reportDateNav .custom-picker{animation:accSlide .18s ease;}
@media (prefers-reduced-motion: reduce){ #reportDateNav .date-nav, #reportDateNav .custom-picker{animation:none;} }

/* ========== FILTER LAPORAN STICKY (tepi atas sampai tepi atas header, menyelip di bawahnya) ==========
   Kartu ditarik ke y=0 lewat margin-top negatif (tinggi topbar 66 + padding main 16),
   padding-top mengembalikan ruang isi: tab mulai 12px di bawah tepi bawah topbar.
   Selisih padding main antar-breakpoint (20/24px) ikut tersembunyi di balik topbar.
   Layer tetap di bawah header (z 49 < 50) — kartu meluncur di bawahnya, tanpa celah bocor. */
#screenLaporanFilter{
  position:sticky;
  top:0;
  z-index:calc(var(--z-header) - 1);
  margin-left:-16px; margin-right:-16px; /* full-bleed menyatu dgn tepi layar */
  margin-top:calc(-1 * (var(--safe-top) + 82px));
  padding-top:calc(var(--safe-top) + 78px);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  border-top:none;
  box-shadow:0 4px 14px rgba(43,36,32,.08);
}

/* ========== PICKER WILAYAH (Provinsi→Kabupaten→Kecamatan→Desa) ========== */
.region-select{
  width:100%; padding:11px 12px; margin-bottom:8px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B5F54'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.region-select:disabled{opacity:.5; background-color:var(--line);}
.region-select:focus{border-color:var(--brand); outline:none;}

/* ========== BLOK PENGATURAN (judul kartu ala kaki5, visual rosok) ========== */
.card-title{display:flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; color:var(--brand-dark); margin-bottom:12px;}

/* ========== KOTAK ALAMAT LENGKAP (klik → modal pilih wilayah) ========== */
.alamat-box{cursor:pointer; background:var(--surface);}
.alamat-box:focus{border-color:var(--brand); outline:none;}

/* ========== SETTING-ROW & TOGGLE (mekanisme kaki5, visual rosok) ========== */
.setting-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.setting-row:last-child{border-bottom:none;}
/* Kartu ringkasan Diagnosa Sinkronisasi (sheet Cek Data Online, port sync.health.js kaki5) */
.diag-card{text-align:center;padding:16px;border-radius:var(--radius-lg);margin-bottom:12px;display:flex;flex-direction:column;gap:4px;}
.diag-card b{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;}
.diag-card.ok{background:#EAF7EC;}
.diag-card.warn{background:#FFF3E3;}
.diag-card.fail{background:#FBE0DC;}
.setting-ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.setting-ic.ic-green{background:#DFF5E1;}
.setting-ic.ic-blue{background:#D9ECFB;}
.setting-ic.ic-orange{background:#FFEFD9;}
.setting-ic.ic-red{background:#FBE0DC;}
.setting-txt{flex:1; min-width:0;}
.setting-txt .s-title{font-weight:700; font-size:14px; color:var(--ink);}
.setting-txt .s-desc{font-size:12px; color:var(--ink-soft);}
.setting-arrow{color:var(--ink-soft); font-size:18px;}
.toggle-switch{position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{position:absolute; cursor:pointer; inset:0; background:var(--line); border-radius:24px; transition:.2s;}
.toggle-slider::before{content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--green);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);}

/* ========== DATA & CADANGAN (baris setting ala kaki5) ========== */
#screen-pengaturan .setting-row input[type="file"]{position:absolute; width:1px; height:1px; opacity:0;}

/* ========== TOMBOL DUA-STATE BELI LISensi (hijau → oranye) ========== */
.btn-success{background:#22A45D; color:#fff;}
.btn-success:active{opacity:.85;}

/* ========== BARIS TOMBOL TIMBANG: Batal susut ke label, Keranjang isi sisa ========== */
.btn-row-timbang .btn{width:auto;}
.btn-row-timbang .btn-outline{flex:0 0 auto;}
.btn-row-timbang .btn-primary{flex:1 1 auto;}

/* ========== PANEL TRANSFER (non-tunai, pola kaki5) ========== */
.transfer-panel{margin-top:var(--sp-8);}
.transfer-nominal{display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.transfer-nominal span{font-size:13px; color:var(--ink-soft);}
.transfer-nominal b{font-size:18px; font-weight:800; color:var(--brand-dark);}
#payProofBtn{width:100%;}
.pay-proof-wrap{position:relative; margin-bottom:10px;}
.pay-proof-preview{width:100%; max-height:220px; object-fit:contain; border-radius:12px; border:1px solid var(--line); background:#fff;}
.pay-proof-remove{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
#payNoteInput{margin-top:2px;}

/* ========== MODAL WAJIB Lengkapi Profil (pola kaki5, tengah) ========== */
.overlay.center-overlay{align-items:center; padding:var(--sp-16);}
.prof-card{background:var(--paper); border-radius:var(--radius-lg); padding:var(--sp-24) var(--sp-20); width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.3); text-align:center; animation:slideUp .28s ease;}
.prof-emoji{font-size:44px; line-height:1; margin-bottom:var(--sp-12);}
.prof-title{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; color:var(--ink); margin-bottom:var(--sp-8);}
.prof-sub{font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:var(--sp-16);}
.prof-points{text-align:left; display:flex; flex-direction:column; gap:10px; margin-bottom:var(--sp-20);}
.prof-points > div{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px;}
.prof-points > div span:first-child{font-size:18px; flex-shrink:0;}
.prof-card .btn{width:100%;}

/* ========== TENTANG APLIKASI (pola kaki5) ========== */
.app-about{text-align:center; padding:var(--sp-20) var(--sp-12) var(--sp-24); margin-top:var(--sp-8);}
.about-logo{width:64px; height:64px; border-radius:50%; object-fit:cover; box-shadow:0 4px 14px rgba(245,130,31,.25);}
.about-name{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px; color:var(--ink); margin-top:10px;}
.about-company{font-weight:600; font-size:12px; color:var(--ink-soft); margin-top:12px;}
.about-links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px;}
.about-links a{font-size:12px; font-weight:600; text-decoration:none;}
.about-links a:first-child{color:var(--green);}
.about-links a:last-child{color:var(--brand-dark);}
.about-version{font-size:13px; color:var(--ink-soft); margin-top:12px;}
.about-device{font-size:11px; color:var(--ink-soft); margin-top:2px;}