:root {
  --bg: #fff7f3;
  --bg-2: #fff;
  --text: #1d1b2b;
  --muted: #6f6885;
  --line: rgba(73, 50, 117, 0.08);
  --orange: #ff8a00;
  --orange-2: #ffb347;
  --purple: #7b2ff7;
  --purple-2: #b388ff;
  --shadow: 0 14px 32px rgba(58, 34, 100, 0.12);
  --radius: 22px;
  --radius-sm: 16px;
}
body.dark {
  --bg: #12101d;
  --bg-2: #1a1628;
  --text: #f7f4ff;
  --muted: #b9b2ce;
  --line: rgba(255,255,255,0.08);
  --shadow: 0 18px 38px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: linear-gradient(180deg, var(--bg), #f5eeff 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; overflow-x: hidden; width: 100%; }
body.dark { background: linear-gradient(180deg, #100d18, #171325 100%); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.mobile-app { max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative; padding: env(safe-area-inset-top) 16px calc(92px + env(safe-area-inset-bottom)); }
.screen-login { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-wrap {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 32px;
  padding: 28px 22px;
  width: 100%;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
body.dark .login-wrap { background: rgba(26,22,40,0.84); border-color: rgba(255,255,255,0.08); }
.hero-chip { display: inline-flex; padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,138,0,.12), rgba(123,47,247,.12)); color: #7b2ff7; font-weight: 700; letter-spacing: .2px; }
.hero-chip.purple { color: #6d28d9; }
.login-wrap h1 { margin: 16px 0 8px; font-size: 30px; }
.muted { color: var(--muted); line-height: 1.55; }
.floating-orbs span { position: absolute; border-radius: 50%; filter: blur(5px); opacity: .8; }
.floating-orbs span:nth-child(1){ width:140px; height:140px; background: rgba(255,138,0,.18); top:-30px; right:-20px; }
.floating-orbs span:nth-child(2){ width:90px; height:90px; background: rgba(123,47,247,.15); bottom:16px; left:-24px; }
.floating-orbs span:nth-child(3){ width:60px; height:60px; background: rgba(255,179,71,.24); top:46%; right:12%; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 10px 0 6px; position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, rgba(255,247,243,0.97), rgba(255,247,243,0.85), rgba(255,247,243,0)); backdrop-filter: blur(10px); }
body.dark .topbar { background: linear-gradient(180deg, rgba(18,16,29,0.97), rgba(18,16,29,0.85), rgba(18,16,29,0)); }
.topbar.compact { padding-top: 12px; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.topbar h2 { margin: 2px 0 0; font-size: 24px; }
.topbar-actions { display:flex; gap: 10px; }
.icon-btn { border:none; background: var(--bg-2); color: var(--text); border-radius: 16px; min-width: 44px; height: 44px; box-shadow: var(--shadow); cursor:pointer; }
.icon-btn.orange { background: linear-gradient(135deg, var(--orange), var(--purple)); color:#fff; }
.main-content { display:flex; flex-direction:column; gap:16px; padding-top: 10px; }
.promo-banner { background: linear-gradient(135deg, #ff8a00 0%, #7b2ff7 100%); color:#fff; padding: 20px; border-radius: 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; box-shadow: var(--shadow); }
.promo-banner h3 { margin:4px 0; font-size: 22px; }
.promo-banner p { margin: 0; opacity: .95; }
.btn { border:none; border-radius: 18px; padding: 14px 18px; cursor:pointer; font-weight:700; transition: transform .18s ease, opacity .18s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--orange), var(--purple)); color:#fff; box-shadow: var(--shadow); }
.btn.soft { background: rgba(123,47,247,.08); color: var(--purple); }
.btn.white { background: rgba(255,255,255,.18); color:#fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); }
.btn.big { width:100%; margin-top: 12px; padding: 16px; font-size: 16px; }
.btn.full { width:100%; }
.summary-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.summary-grid.four { grid-template-columns: repeat(4, 1fr); }
.mini-card { padding: 14px; border-radius: 22px; color:#fff; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:8px; min-height: 88px; justify-content:center; }
.mini-card span { opacity: .88; font-size: 12px; }
.mini-card strong { font-size: 24px; }
.gradient-orange { background: linear-gradient(135deg, #ff9f1c, #ff6a00); }
.gradient-purple { background: linear-gradient(135deg, #7b2ff7, #b388ff); }
.gradient-mix { background: linear-gradient(135deg, #ff8a00, #8e2de2); }
.gradient-dark { background: linear-gradient(135deg, #3b2a5b, #6d28d9); }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.section-head h3 { margin:0; font-size: 18px; }
.text-btn { border:none; background:none; color:var(--purple); font-weight:700; cursor:pointer; }
.category-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-grid button, .icon-grid button {
  border:none; background: var(--bg-2); border-radius: 22px; padding: 14px 8px; box-shadow: var(--shadow); display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
}
.category-grid button span, .icon-grid button span { font-size: 24px; }
.category-grid button b, .icon-grid button b { font-size: 12px; color: var(--text); }
.search-box-card, .card-panel { background: var(--bg-2); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); border:1px solid var(--line); }
.search-row { display:flex; gap:10px; }
input, select, textarea { width:100%; border:none; outline:none; background: rgba(125,125,125,.07); color: var(--text); border-radius: 16px; padding: 14px 14px; margin-top: 8px; }
label { display:block; font-size: 13px; color: var(--muted); margin-top: 10px; }
.product-list, .order-list, .stack-list { display:flex; flex-direction:column; gap: 14px; }
.product-card, .order-card, .simple-card, .cart-card { background: var(--bg-2); border-radius: 24px; box-shadow: var(--shadow); border:1px solid var(--line); overflow:hidden; }
.product-card { display:grid; grid-template-columns: 120px 1fr; min-height: 138px; }
.product-image { width:100%; height:100%; object-fit:cover; display:block; background:#eee; }
.product-body { padding: 14px; display:flex; flex-direction:column; gap:8px; }
.product-title { font-weight: 800; line-height:1.3; }
.price-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.price-main { font-size: 18px; font-weight:800; color:#6d28d9; }
.price-old { text-decoration: line-through; color:var(--muted); font-size: 12px; }
.badges { display:flex; gap:8px; flex-wrap:wrap; }
.badge { display:inline-flex; padding: 7px 10px; border-radius: 999px; background: rgba(123,47,247,.08); color: var(--purple); font-size: 11px; font-weight:700; }
.badge.orange { background: rgba(255,138,0,.12); color: #ea580c; }
.product-actions { display:flex; gap:8px; margin-top:auto; }
.product-actions .btn { flex:1; padding: 12px 10px; border-radius: 15px; font-size: 13px; }
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 528px; background: rgba(255,255,255,.85); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.5); border-radius: 28px; box-shadow: 0 12px 28px rgba(0,0,0,.12); padding: 10px 8px; display:grid; grid-template-columns: repeat(5, 1fr); gap:6px; z-index: 60; }
body.dark .bottom-nav { background: rgba(26,22,40,.9); border-color: rgba(255,255,255,.08); }
.bottom-nav button { border:none; background:none; padding: 10px 4px; border-radius: 18px; display:flex; flex-direction:column; gap:4px; align-items:center; color: var(--muted); cursor:pointer; }
.bottom-nav button.active, .bottom-nav button:hover { background: rgba(123,47,247,.08); color: var(--purple); }
.bottom-nav span { font-size: 19px; }
.bottom-nav b { font-size: 11px; }
.sheet { position: fixed; inset: 0; background: rgba(22, 11, 43, .38); display:none; align-items:flex-end; justify-content:center; z-index: 90; padding: 0; }
.sheet.show { display:flex; }
.sheet-card { width:100%; max-width: 560px; background: var(--bg-2); border-radius: 28px 28px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; overflow:auto; box-shadow: 0 -10px 35px rgba(0,0,0,.18); }
.sheet-card.large { min-height: 55vh; }
.sheet-header { display:flex; justify-content:space-between; align-items:center; position:sticky; top: -16px; margin: -16px -16px 12px; padding: 16px; background: var(--bg-2); z-index: 3; }
.inline-input { display:flex; gap: 10px; align-items:center; }
.sticky-cta { position: sticky; bottom: 0; margin-top: 14px; }
.order-card, .cart-card, .simple-card { padding: 16px; }
.order-top, .line-flex { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.order-items { margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.order-items small, .simple-card small, .cart-card small { color: var(--muted); }
.status-pill { display:inline-flex; padding: 8px 11px; border-radius: 999px; font-size: 11px; font-weight:700; }
.status-Menunggu\ Pembayaran, .status-Dibayar { background: rgba(255,179,71,.2); color: #b45309; }
.status-Diproses { background: rgba(123,47,247,.15); color: #6d28d9; }
.status-Dikirim { background: rgba(59,130,246,.16); color: #1d4ed8; }
.status-Selesai { background: rgba(16,185,129,.17); color: #047857; }
.tag-cloud { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px; }
.tag-cloud span { background: rgba(123,47,247,.08); color: var(--purple); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: 12px; }
.split-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.checks { margin-top: 10px; }
.checks label { display:flex; align-items:center; gap:8px; margin:0; background: rgba(125,125,125,.06); padding: 12px; border-radius: 14px; }
.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 520px; z-index: 110; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background: rgba(30,26,43,.93); color:#fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); animation: slideDown .35s ease; }
.promo-popup { position: fixed; inset: 0; display:grid; place-items:center; background: rgba(31,18,55,.44); z-index: 120; padding: 20px; }
.promo-popup.hidden { display:none; }
.promo-popup-card { background: linear-gradient(135deg, #fff, #fff7f3); padding: 24px; border-radius: 30px; width: 100%; max-width: 400px; box-shadow: var(--shadow); text-align:center; }
body.dark .promo-popup-card { background: linear-gradient(135deg, #1a1628, #221c35); }
.promo-badge { display:inline-flex; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--orange), var(--purple)); color:#fff; font-weight:700; font-size:12px; }
.tiny-metrics { margin-top: 10px; display:flex; justify-content:space-between; gap:12px; color: var(--muted); font-size: 12px; }
.admin-grid { grid-template-columns: repeat(3, 1fr); display:grid; gap:12px; }
.invoice-page { max-width: 820px; margin: 0 auto; padding: 22px; background: #fff; color: #1d1b2b; }
.invoice-box { background:#fff; border-radius: 26px; border: 1px solid #eee; padding: 24px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.invoice-table { width:100%; border-collapse: collapse; margin-top: 14px; }
.invoice-table th, .invoice-table td { padding: 12px; border-bottom: 1px solid #ece7f8; text-align:left; }
.invoice-actions { display:flex; gap:10px; margin: 20px 0; }
.pulse-card { animation: gentleFloat 3s ease-in-out infinite; }
.empty-state { padding: 18px; text-align:center; color:var(--muted); background: rgba(125,125,125,.05); border-radius: 18px; }
@keyframes gentleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes slideDown { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
@media (max-width: 420px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .product-card { grid-template-columns: 110px 1fr; }
  .summary-grid.four { grid-template-columns: repeat(2, 1fr); }
  .mini-card strong { font-size: 22px; }
  .promo-banner { flex-direction: column; align-items:flex-start; }
}
@media print {
  body { background:#fff !important; }
  .invoice-actions { display:none !important; }
}

canvas { display:block; width:100% !important; max-width:100%; height:auto; }
.card-panel canvas { margin-top: 10px; border-radius: 18px; overflow:hidden; }