:root {
  color-scheme: dark;
  --bg: #241b16;
  --bg-deep: #100c09;
  --surface: rgba(62, 48, 39, .94);
  --surface-2: #4b392e;
  --surface-raised: #594439;
  --text: #f2e3cf;
  --muted: #c1a98c;
  --accent: #e5ceb0;
  --accent-2: #c49c70;
  --accent-3: #8b684b;
  --accent-text: #211710;
  --line: rgba(255, 235, 207, .14);
  --highlight: rgba(255, 245, 226, .18);
  --shadow: 0 13px 0 rgba(12, 8, 5, .44), 0 24px 46px rgba(0, 0, 0, .36), inset 0 2px 2px rgba(255, 242, 220, .13);
  --shadow-soft: 0 8px 18px rgba(0, 0, 0, .28), inset 0 2px 2px rgba(255, 242, 220, .12), inset 0 -3px 6px rgba(0, 0, 0, .16);
  --pressed-text: 0 1px 1px rgba(255,255,255,.12), 0 -2px 2px rgba(0,0,0,.65);
  --glow: rgba(186, 145, 105, .16);
  --shade: rgba(0, 0, 0, .34);
  --nav: rgba(48, 36, 29, .94);
  --overlay: rgba(20, 13, 9, .74);
  --danger: #ef7e73;
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Myanmar", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #d8c5aa;
  --bg-deep: #bda88c;
  --surface: rgba(232, 217, 196, .96);
  --surface-2: #d7c2a5;
  --surface-raised: #f0e2ce;
  --text: #211b17;
  --muted: #6d5b4a;
  --accent: #2b211a;
  --accent-2: #8f6a49;
  --accent-3: #b08a63;
  --accent-text: #fff5e7;
  --line: rgba(82, 58, 38, .17);
  --highlight: rgba(255, 250, 239, .82);
  --shadow: 0 12px 0 rgba(91, 64, 42, .17), 0 23px 42px rgba(80, 56, 37, .2), inset 0 2px 2px rgba(255, 251, 241, .9), inset 0 -4px 8px rgba(101, 72, 47, .14);
  --shadow-soft: 0 8px 18px rgba(83, 59, 40, .16), inset 0 2px 2px rgba(255, 251, 241, .88), inset 0 -3px 6px rgba(98, 69, 45, .14);
  --pressed-text: 0 1px 1px rgba(255,255,255,.95), 0 -2px 2px rgba(87,59,39,.35);
  --glow: rgba(255, 248, 235, .82);
  --shade: rgba(103, 73, 48, .2);
  --nav: rgba(229, 213, 190, .94);
  --overlay: rgba(44, 31, 22, .48);
  --danger: #a7443c;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--text); }
html { background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 78% -5%, var(--glow) 0, transparent 40%),
    radial-gradient(ellipse at 8% 62%, var(--glow) 0, transparent 43%),
    linear-gradient(155deg, var(--bg), var(--bg-deep));
  background-attachment: fixed;
  transition: color .25s ease, background-color .25s ease;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-2) 65%, white); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .52; filter: saturate(.6); }
.hidden { display: none !important; }
.screen { min-height: 100vh; min-height: 100dvh; padding: 24px; }
.center { display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.loader { width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; filter: drop-shadow(0 0 8px var(--accent)); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.app { width: min(100%, 720px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 30px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .15em; text-shadow: var(--pressed-text); }
h1 { margin: 0; font-size: 1.42rem; line-height: 1.35; text-shadow: var(--pressed-text); }
h2 { margin: 0; font-size: 1.2rem; text-shadow: var(--pressed-text); }
h3 { margin: 0 0 5px; font-size: 1rem; text-shadow: var(--pressed-text); }
p { line-height: 1.55; }
.avatar, .theme-toggle, .notification-button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; box-shadow: 0 7px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .16s ease, box-shadow .16s ease; }
.avatar { color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); font-weight: 900; font-size: 1.1rem; text-shadow: 0 -1px 1px rgba(0,0,0,.42); }
.theme-toggle, .notification-button { color: var(--text); background: linear-gradient(145deg, var(--surface-raised), var(--surface-2)); border: 1px solid var(--line); font-size: 1.12rem; }
.notification-button { position: relative; }
.notification-badge { position: absolute; display: grid; place-items: center; min-width: 20px; height: 20px; right: -6px; top: -7px; padding: 0 5px; color: white; background: #f04458; border: 2px solid var(--bg); border-radius: 99px; box-shadow: 0 4px 10px rgba(240,68,88,.38); font-size: .68rem; line-height: 1; }
.avatar:active, .theme-toggle:active, .notification-button:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .3); }

.balance-card { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, var(--surface-raised), var(--surface-2)); box-shadow: var(--shadow); margin-bottom: 34px; }
.balance-card::before { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; right: -38px; top: -80px; border-radius: 50%; background: var(--glow); filter: blur(2px); }
.balance-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, var(--highlight), transparent 38%, var(--shade)); opacity: .5; }
.balance-card span { display: block; color: var(--muted); font-size: .88rem; margin-bottom: 7px; }
.balance-card strong { display: block; color: var(--text); font-size: 1.42rem; text-shadow: var(--pressed-text); }
.soft-button, .primary { min-height: 44px; padding: 10px 15px; border-radius: 14px; font-weight: 780; box-shadow: 0 6px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s ease, box-shadow .15s ease; }
.soft-button { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.balance-card .soft-button { color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); border-color: var(--line); }
.primary { color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); text-shadow: 0 -1px 1px rgba(0,0,0,.38); }
.soft-button:active, .primary:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.28); }
.small { min-height: 40px; padding: 8px 12px; font-size: .88rem; white-space: nowrap; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 15px; }
.muted { color: var(--muted); font-size: .88rem; }
.text-button { background: transparent; color: var(--accent); padding: 7px; font-weight: 750; }
.chips { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 18px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 40px; padding: 8px 15px; border-radius: 999px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.chip, .preset-button, .method-button, .nav-item { text-shadow: var(--pressed-text); }
.chip.active { color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); border-color: transparent; font-weight: 780; box-shadow: 0 7px 18px var(--shade), inset 0 2px 2px var(--highlight); }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.product-group-title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 1px 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: inset 0 1px 0 var(--highlight); }
.product-group-title strong { font-size: .92rem; text-shadow: var(--pressed-text); }
.product-group-title span { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--accent-text); background: var(--accent); font-size: .78rem; font-weight: 800; }
.product-group-title.unavailable { margin-top: 12px; }
.product-group-title.unavailable strong { color: var(--muted); }
.product-group-title.unavailable span { color: #fff; background: var(--danger); }
.product-card { position: relative; min-width: 0; text-align: left; color: var(--text); background: linear-gradient(150deg, var(--surface-raised), var(--surface)); border: 1px solid var(--line); border-radius: 21px; padding: 16px; box-shadow: var(--shadow-soft), 0 8px 0 color-mix(in srgb, var(--bg-deep) 72%, transparent); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.product-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(130deg, var(--highlight), transparent 28%); opacity: .5; }
.product-card:not(:disabled):active { transform: translateY(5px); box-shadow: var(--shadow-soft), 0 3px 0 color-mix(in srgb, var(--bg-deep) 72%, transparent); }
.product-card:disabled { box-shadow: var(--shadow-soft); }
.product-card.out-of-stock { filter: grayscale(.38); }
.product-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, var(--surface-raised), var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-size: 1.3rem; margin-bottom: 17px; }
.product-card h3 { min-height: 2.7em; overflow-wrap: anywhere; }
.price { color: var(--text); font-weight: 850; margin: 8px 0 5px; text-shadow: var(--pressed-text); }
.stock { color: var(--muted); font-size: .875rem; }
.stock.out { color: var(--danger); }

.view { display: none; }
.view.active { display: block; }
.empty { padding: 34px 18px; text-align: center; border: 1px dashed var(--line); border-radius: 20px; color: var(--muted); background: var(--surface); }
.order-list { display: grid; gap: 12px; }
.order { padding: 16px; border-radius: 19px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.order-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.order p { margin: 0; color: var(--muted); font-size: .88rem; }
.delivery-button { margin-top: 12px; width: 100%; }

.action-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 21px; margin-bottom: 14px; }
.action-card p { margin: 0; color: var(--muted); font-size: .875rem; }
.action-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent-3) 23%, var(--surface-2))); border: 1px solid var(--line); box-shadow: 0 7px 14px rgba(0,0,0,.16); font-size: 1.3rem; }
.free-card { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.support-link { display: block; margin-top: 19px; padding: 16px; color: var(--text); text-align: center; text-decoration: none; font-weight: 730; border-radius: 17px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }

.profile-card { padding: 24px 18px 20px; text-align: center; border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(150deg, var(--surface-raised), var(--surface)); box-shadow: var(--shadow); }
.profile-photo-wrap { display: grid; place-items: center; width: 96px; height: 96px; margin: 2px auto 16px; padding: 4px; border-radius: 30px; background: linear-gradient(145deg, var(--surface-raised), var(--surface-2)); box-shadow: var(--shadow); }
.profile-photo, .profile-fallback { width: 100%; height: 100%; border-radius: 26px; }
.profile-photo { display: block; object-fit: cover; background: var(--surface-2); }
.profile-fallback { display: grid; place-items: center; color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); font-size: 2rem; font-weight: 900; }
.profile-card > .muted { margin: 5px 0 18px; }
.profile-balance { display: grid; gap: 5px; margin: 0 0 17px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-2); box-shadow: inset 0 1px 0 var(--highlight); }
.profile-balance span { color: var(--muted); font-size: .875rem; }
.profile-balance strong { color: var(--accent); font-size: 1.3rem; }

.topup-form { display: grid; gap: 11px; }
.topup-form label { margin-top: 3px; color: var(--text); font-size: .9rem; font-weight: 750; }
.form-control, .file-control { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 15px; box-shadow: inset 0 1px 0 var(--highlight); }
.form-control:focus, .file-control:focus { outline: 3px solid color-mix(in srgb, var(--accent-2) 35%, transparent); border-color: var(--accent-2); }
.amount-presets, .payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset-button, .method-button { min-height: 42px; padding: 8px 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-soft); }
.preset-button.active, .method-button.active { color: var(--accent-text); background: linear-gradient(145deg, var(--accent-2), var(--accent)); border-color: transparent; font-weight: 780; }
.payment-details { display: grid; gap: 5px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent-2) 32%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); box-shadow: inset 0 1px 0 var(--highlight); }
.payment-details strong { color: var(--accent-2); }
.payment-details span { color: var(--text); font-size: .9rem; overflow-wrap: anywhere; }
.payment-phone-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.file-control { padding: 9px; }
.file-control::file-selector-button { min-height: 36px; margin-right: 10px; padding: 7px 11px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; }
.form-hint { margin: -5px 0 5px; color: var(--muted); font-size: .8rem; }

.notification-list { display: grid; gap: 10px; margin: 8px 0 16px; }
.notification-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: inset 0 1px 0 var(--highlight); }
.notification-card > div { display: grid; gap: 5px; min-width: 0; }
.notification-card strong { overflow-wrap: anywhere; }
.notification-meta { color: var(--muted); font-size: .82rem; }
.status-pill { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.status-pill.pending { color: #7a4c00; background: #ffd873; }
.status-pill.approved { color: #063e2b; background: #69edb8; }
.status-pill.declined { color: #fff; background: #db4054; }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3,1fr); width: min(calc(100% - 24px), 696px); padding: 8px; border: 1px solid var(--line); border-radius: 23px; background: var(--nav); backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 11px 0 rgba(0,0,0,.16), 0 20px 48px rgba(0,0,0,.26), inset 0 1px 0 var(--highlight); }
.nav-item { display: grid; justify-items: center; gap: 2px; padding: 7px; color: var(--muted); background: transparent; border-radius: 15px; font-size: .82rem; }
.nav-item span { font-size: 1.2rem; }
.nav-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 28%, transparent); }

.overlay { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: var(--overlay); backdrop-filter: blur(5px); }
.sheet-panel { position: relative; width: min(100%,720px); max-height: 88vh; overflow-y: auto; padding: 12px 18px calc(24px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 29px 29px 0 0; background: linear-gradient(155deg, var(--surface-raised), var(--bg)); box-shadow: 0 -20px 60px rgba(0,0,0,.34), inset 0 1px 0 var(--highlight); }
.grabber { width: 44px; height: 5px; border-radius: 99px; background: var(--muted); opacity: .42; margin: 0 auto 18px; }
.close-button { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border-radius: 13px; background: var(--surface-2); box-shadow: var(--shadow-soft); color: var(--text); font-size: 1.35rem; }
.sheet-title { padding-right: 48px; margin: 0 0 7px; font-size: 1.25rem; }
.sheet-copy { margin: 0 0 18px; color: var(--muted); }
.qty-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; margin: 18px 0; }
.qty-row button, .qty-row input { height: 48px; border-radius: 15px; border: 1px solid var(--line); color: var(--text); background: var(--surface-2); box-shadow: var(--shadow-soft); text-align: center; }
.buy-button { width: 100%; }
.secret { margin: 10px 0; padding: 13px; border-radius: 15px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); }
.secret span { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 5px; }
.secret-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.secret code { color: var(--text); overflow-wrap: anywhere; font-size: .9rem; }
.copy-button { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; color: var(--accent); background: var(--surface-2); box-shadow: inset 0 1px 0 var(--highlight); }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-raised); box-shadow: 0 14px 38px rgba(0,0,0,.3), inset 0 1px 0 var(--highlight); }
.error-card { max-width: 420px; padding: 22px; border-radius: 22px; color: var(--text); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.error-card .primary { display: block; text-decoration: none; margin-top: 15px; }

@media (hover: hover) {
  .product-card:not(:disabled):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
  .chip:hover, .support-link:hover { border-color: color-mix(in srgb, var(--accent-2) 38%, var(--line)); }
}
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }