:root {
  color-scheme: light;
  --bg: #f6f3ef;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #ffffff;
  --surface-2: #f0ece7;
  --text: #1b1b1d;
  --muted: #6d6a67;
  --line: rgba(27,27,29,.11);
  --accent: #176b4f;
  --accent-strong: #0e543d;
  --accent-soft: #def3e9;
  --warm: #d97d45;
  --warm-soft: #fff0e6;
  --gold: #b67a12;
  --gold-soft: #fff6d8;
  --danger: #b13b43;
  --danger-soft: #fdecee;
  --info: #4364a8;
  --info-soft: #eef3ff;
  --shadow: 0 18px 50px rgba(34, 30, 25, .10);
  --shadow-small: 0 8px 25px rgba(34, 30, 25, .08);
  --radius: 24px;
  --radius-sm: 16px;
  --max: 1180px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111311;
  --surface: rgba(25,28,25,.88);
  --surface-solid: #191c19;
  --surface-2: #222622;
  --text: #f5f6f3;
  --muted: #a9aea8;
  --line: rgba(255,255,255,.10);
  --accent: #80d7ae;
  --accent-strong: #a5e7c8;
  --accent-soft: #153c2d;
  --warm: #efaa7b;
  --warm-soft: #422a1e;
  --gold: #e3b95e;
  --gold-soft: #3d331a;
  --danger: #ff9ca3;
  --danger-soft: #441f24;
  --info: #a9c0ff;
  --info-soft: #202c4b;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --shadow-small: 0 8px 25px rgba(0,0,0,.20);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bg: #111311;
    --surface: rgba(25,28,25,.88);
    --surface-solid: #191c19;
    --surface-2: #222622;
    --text: #f5f6f3;
    --muted: #a9aea8;
    --line: rgba(255,255,255,.10);
    --accent: #80d7ae;
    --accent-strong: #a5e7c8;
    --accent-soft: #153c2d;
    --warm: #efaa7b;
    --warm-soft: #422a1e;
    --gold: #e3b95e;
    --gold-soft: #3d331a;
    --danger: #ff9ca3;
    --danger-soft: #441f24;
    --info: #a9c0ff;
    --info-soft: #202c4b;
    --shadow: 0 18px 50px rgba(0,0,0,.28);
    --shadow-small: 0 8px 25px rgba(0,0,0,.20);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 202, 164, .12), transparent 30rem),
    radial-gradient(circle at 100% 20%, rgba(217, 125, 69, .10), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  width: min(calc(100% - 28px), var(--max));
  margin: 12px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-small);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, var(--gold-soft), var(--warm-soft)); font-size: 20px; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.desktop-nav { display: flex; justify-content: center; align-items: center; gap: 4px; }
.desktop-nav a { text-decoration: none; color: var(--muted); font-weight: 700; font-size: 13px; padding: 10px 13px; border-radius: 12px; }
.desktop-nav a:hover, .desktop-nav a.active { background: var(--surface-2); color: var(--text); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn, .cart-btn, .secondary, .primary, .ghost, .danger-btn, .file-button {
  border: 0;
  border-radius: 14px;
  min-height: 44px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.icon-btn { width: 44px; background: var(--surface-2); color: var(--text); }
.cart-btn { display: inline-flex; gap: 8px; align-items: center; padding: 0 13px; background: var(--text); color: var(--bg); }
.cart-btn b { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; }
.primary { padding: 12px 16px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.secondary, .file-button { padding: 11px 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.ghost { padding: 10px 13px; color: var(--text); background: transparent; border: 1px solid var(--line); }
.danger-btn { padding: 11px 14px; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent); }
button:disabled { opacity: .45; cursor: not-allowed; }
@media (hover:hover) and (pointer:fine) { .primary:hover, .secondary:hover, .ghost:hover, .icon-btn:hover, .cart-btn:hover, .danger-btn:hover, .file-button:hover { transform: translateY(-1px); } }
.full { width: 100%; }

#view { width: min(calc(100% - 28px), var(--max)); margin: 34px auto 48px; min-height: 64vh; }
.page { animation: pageIn .28s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 22px; }
.page-head h1, .hero h1 { margin: 0; letter-spacing: -.05em; line-height: .98; }
.page-head h1 { font-size: clamp(30px, 5vw, 52px); }
.page-head p { margin: 8px 0 0; color: var(--muted); max-width: 700px; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; line-height: 1.4; }
.lead { font-size: clamp(17px, 2vw, 21px); color: var(--muted); line-height: 1.5; }

.hero {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(145deg, var(--surface-solid), color-mix(in srgb, var(--accent-soft) 55%, var(--surface-solid)));
  box-shadow: var(--shadow);
}
.hero:after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -100px; border-radius: 999px; background: color-mix(in srgb, var(--warm) 18%, transparent); filter: blur(1px); }
.hero h1 { font-size: clamp(46px, 8vw, 88px); max-width: 780px; }
.hero-copy { position: relative; z-index: 2; }
.hero-actions, .row-actions, .stack-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-actions { margin-top: 24px; }
.hero-art { position: relative; z-index: 2; display: grid; place-items: center; min-height: 230px; }
.duck-bear-orbit { position: relative; width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 36%, transparent); display: grid; place-items: center; }
.orbit-main { font-size: 72px; animation: floaty 3s ease-in-out infinite; }
.orbit-badge { position: absolute; padding: 9px 12px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow-small); font-weight: 900; font-size: 12px; }
.orbit-badge.one { top: 18px; left: -10px; transform: rotate(-8deg); }
.orbit-badge.two { bottom: 24px; right: -14px; transform: rotate(8deg); }
@keyframes floaty { 50% { transform: translateY(-7px) rotate(2deg); } }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat-card, .card, .panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-small);
}
.stat-card { padding: 18px; min-width: 0; }
.stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-card strong { display: block; margin-top: 7px; font-size: clamp(24px, 4vw, 36px); letter-spacing: -.04em; }
.stat-card small { color: var(--muted); }

.section { margin-top: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; }
.section-head h2, .card h2, .panel h2 { margin: 0; letter-spacing: -.03em; }
.section-head a { color: var(--accent); font-weight: 800; font-size: 13px; text-decoration: none; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card, .panel { padding: 19px; }
.action-card { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }
.action-card .big-icon { font-size: 34px; }
.action-card p { color: var(--muted); margin: 7px 0 0; }
.quick-arrow { font-weight: 900; color: var(--accent); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.search-box { position: relative; flex: 1 1 260px; }
.search-box input, .toolbar select, input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--text);
  background: var(--surface-solid);
}
textarea { resize: vertical; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; color: var(--text); }
label span.hint { color: var(--muted); font-weight: 500; font-size: 11px; }
.toolbar select { width: auto; min-width: 160px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); min-height: 38px; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.chip.active { background: var(--text); color: var(--bg); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.product-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 355px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-solid); box-shadow: var(--shadow-small); }
.product-image { min-height: 160px; display: grid; place-items: center; background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--accent-soft) 48%, var(--surface-2))); font-size: 68px; }
.product-body { padding: 16px; display: flex; flex: 1; flex-direction: column; }
.product-body h3 { margin: 5px 0 6px; letter-spacing: -.025em; }
.product-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.price { font-size: 22px; font-weight: 950; letter-spacing: -.04em; }
.stock { color: var(--accent); font-size: 11px; font-weight: 850; }
.favourite-btn { position: absolute; right: 10px; top: 10px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface-solid) 86%, transparent); color: var(--muted); font-size: 19px; box-shadow: var(--shadow-small); }
.favourite-btn.active { color: #d84f6c; }
.card-click { cursor: pointer; }

.loyalty-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.points-card { overflow: hidden; position: relative; padding: 28px; border-radius: 28px; background: linear-gradient(145deg, #153f31, #0b2e24); color: #f8fff9; box-shadow: var(--shadow); }
.points-card:after { content:"⭐"; position:absolute; right:-12px; top:-24px; font-size:150px; opacity:.10; transform: rotate(14deg); }
.points-card .eyebrow { color: #bfe8d3; }
.points-number { font-size: clamp(54px, 8vw, 86px); line-height: 1; font-weight: 950; letter-spacing: -.06em; }
.points-label { opacity: .72; }
.tier-line { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; font-weight:800; }
.progress { height: 11px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.16); }
.progress > span { display:block; height:100%; border-radius:inherit; background:#fff; }
.loyalty-side { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.loyalty-side .stat-card { box-shadow:none; }
.badges { display:flex; flex-wrap:wrap; gap:10px; }
.badge { min-width: 135px; flex: 1 1 150px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); }
.badge.locked { filter: grayscale(1); opacity:.48; }
.badge .badge-icon { font-size: 26px; }
.badge strong { display:block; margin-top:6px; }
.badge small { display:block; color:var(--muted); margin-top:3px; }

.activity-list, .transaction-list, .order-list, .redemption-list, .timeline { display: grid; gap: 10px; }
.activity-item, .transaction-item, .order-card, .redemption-item, .timeline-item { border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); }
.activity-item { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:14px; }
.activity-copy strong { display:block; }
.activity-copy small { display:block; margin-top:3px; color:var(--muted); }
.points-pill { display:inline-flex; align-items:center; justify-content:center; min-width:60px; padding:7px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:12px; font-weight:900; }
.points-pill.minus { background:var(--warm-soft); color:var(--warm); }
.transaction-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 14px; }
.tx-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:var(--surface-2); }
.tx-copy strong, .tx-copy small { display:block; }
.tx-copy small { color:var(--muted); margin-top:3px; }
.tx-amount { text-align:right; font-weight:950; }
.tx-amount.positive { color:var(--accent); }
.tx-amount.negative { color:var(--warm); }

.order-card { padding:17px; }
.order-top { display:flex; justify-content:space-between; align-items:start; gap:14px; }
.order-top h3 { margin:3px 0 5px; }
.order-items { color:var(--muted); font-size:13px; line-height:1.5; margin:10px 0; }
.status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 10px; background:var(--info-soft); color:var(--info); font-size:11px; font-weight:900; }
.status.delivered { background:var(--accent-soft); color:var(--accent-strong); }
.status.cancelled { background:var(--danger-soft); color:var(--danger); }
.order-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.timeline-item { position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px; }
.timeline-dot { width:12px; height:12px; margin-top:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.timeline-item strong, .timeline-item small { display:block; }
.timeline-item small { color:var(--muted); margin-top:3px; }

.reward-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.reward-card { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); }
.reward-card .reward-icon { font-size:34px; }
.reward-card h3 { margin:8px 0 5px; }
.reward-card p { color:var(--muted); font-size:13px; min-height:38px; }
.reward-cost { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }

.tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; margin:18px 0; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { white-space:nowrap; min-height:42px; border-radius:999px; padding:9px 13px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-weight:850; }
.tab-btn.active { color:var(--bg); background:var(--text); }
.fun-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.fun-card { padding:20px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-small); }
.fun-card h2 { margin:0 0 6px; }
.fun-card p { color:var(--muted); }
.roulette-result { min-height:130px; display:grid; place-items:center; text-align:center; margin:14px 0; padding:20px; border-radius:18px; background:linear-gradient(145deg,var(--surface-2),var(--accent-soft)); }
.roulette-result .emoji { font-size:44px; }
.roulette-result strong { display:block; font-size:20px; margin-top:7px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.form-grid .span-2 { grid-column:1/-1; }
.range-row { display:grid; grid-template-columns:160px 1fr 32px; gap:10px; align-items:center; margin:11px 0; }
.range-row input { padding:0; min-height:auto; }
.review-history { display:grid; gap:9px; margin-top:14px; }
.review-entry { padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); }
.complaint-ticket { border-left:4px solid var(--warm); }

.empty { padding:38px 18px; text-align:center; border:1px dashed var(--line); border-radius:18px; color:var(--muted); background:color-mix(in srgb,var(--surface) 55%,transparent); }
.empty .emoji { font-size:38px; display:block; margin-bottom:8px; }

.cart-drawer { position:fixed; z-index:80; top:0; right:0; width:min(430px,100%); height:100%; display:grid; grid-template-rows:auto 1fr auto; background:var(--surface-solid); box-shadow:-18px 0 60px rgba(0,0,0,.22); transform:translateX(105%); transition:transform .24s ease; }
.cart-drawer.open { transform:translateX(0); }
.drawer-backdrop { position:fixed; z-index:70; inset:0; background:rgba(0,0,0,.38); backdrop-filter:blur(3px); }
.drawer-head, .drawer-foot { padding:18px; }
.drawer-head { display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
.drawer-head h2 { margin:0; }
.drawer-foot { border-top:1px solid var(--line); background:var(--surface); }
.cart-items { overflow:auto; padding:10px 18px; }
.cart-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.cart-item-emoji { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--surface-2); font-size:26px; }
.cart-item h4 { margin:0 0 4px; }
.qty { display:flex; align-items:center; gap:7px; }
.qty button { width:32px; height:32px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); }
.totals { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.totals strong { font-size:24px; }

.modal { width:min(720px,calc(100% - 22px)); max-height:min(88vh,900px); padding:0; border:1px solid var(--line); border-radius:24px; background:var(--surface-solid); color:var(--text); box-shadow:0 28px 90px rgba(0,0,0,.35); }
.modal::backdrop { background:rgba(0,0,0,.44); backdrop-filter:blur(4px); }
.checkout-form, .modal-body { padding:20px; }
.modal-head { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:16px; }
.modal-head h2 { margin:0; }
.checkout-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.span-2 { grid-column:1/-1; }
.checkout-summary { margin:15px 0; padding:13px; border-radius:16px; background:var(--surface-2); }
.checkbox { grid-template-columns:auto 1fr; align-items:start; gap:10px; margin:14px 0; font-weight:600; }
.checkbox input { width:20px; min-height:20px; margin-top:1px; }
.product-detail { display:grid; grid-template-columns:.8fr 1.2fr; }
.product-detail-art { display:grid; place-items:center; min-height:360px; font-size:100px; background:linear-gradient(145deg,var(--surface-2),var(--accent-soft)); }
.product-detail-copy { padding:24px; }
.product-detail-copy h2 { margin:4px 0 8px; font-size:34px; letter-spacing:-.04em; }
.feature-list { margin:14px 0; padding:0; list-style:none; display:grid; gap:8px; }
.feature-list li:before { content:"✓"; color:var(--accent); font-weight:900; margin-right:8px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }

.site-footer { width:min(calc(100% - 28px),var(--max)); margin:0 auto 90px; padding:20px 2px; display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--muted); font-size:12px; }
.site-footer strong, .site-footer span { display:block; }
.footer-egg { border:0; background:transparent; font-size:18px; opacity:.55; }
.mobile-nav { display:none; }

.toast { position:fixed; z-index:120; left:50%; bottom:24px; transform:translate(-50%,20px); max-width:min(92%,520px); padding:11px 15px; border-radius:14px; background:var(--text); color:var(--bg); font-size:13px; font-weight:800; opacity:0; pointer-events:none; transition:.22s ease; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.easter-egg { position:fixed; z-index:150; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.67); backdrop-filter:blur(8px); }
.easter-egg[hidden] { display:none; }
.egg-card { width:min(520px,100%); padding:30px; text-align:center; border-radius:30px; background:var(--surface-solid); box-shadow:0 30px 100px rgba(0,0,0,.42); }
.egg-emoji { font-size:74px; }
.egg-card h2 { margin:8px 0; font-size:34px; letter-spacing:-.045em; }
.confetti-layer { pointer-events:none; position:fixed; z-index:140; inset:0; overflow:hidden; }
.confetti-piece { position:absolute; top:-20px; width:10px; height:16px; border-radius:3px; background:var(--accent); animation:confetti 1.7s ease-in forwards; }
@keyframes confetti { to { transform:translateY(105vh) rotate(720deg); opacity:.8; } }
.noscript { margin:20px; padding:16px; background:var(--danger-soft); color:var(--danger); border-radius:14px; }
.file-button { display:inline-flex; align-items:center; cursor:pointer; }
.file-button input { display:none; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .topbar { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; }
  .hero-art { min-height:180px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .reward-grid { grid-template-columns:repeat(2,1fr); }
  .loyalty-hero { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  body { padding-bottom:74px; }
  .topbar { width:calc(100% - 18px); margin-top:8px; padding:9px 10px; border-radius:17px; }
  .brand-mark { width:39px; height:39px; }
  .brand small { display:none; }
  .cart-label { display:none; }
  #view { width:calc(100% - 20px); margin-top:22px; }
  .page-head { align-items:start; flex-direction:column; }
  .hero { padding:25px 20px; border-radius:24px; }
  .hero h1 { font-size:clamp(42px,15vw,66px); }
  .hero-art { display:none; }
  .stats-grid { gap:9px; }
  .stat-card { padding:14px; }
  .cards-3, .cards-2, .fun-grid, .product-grid, .reward-grid { grid-template-columns:1fr; }
  .product-card { min-height:0; display:grid; grid-template-columns:112px 1fr; }
  .product-image { min-height:100%; font-size:48px; }
  .product-body { padding:14px; }
  .product-meta { align-items:center; }
  .loyalty-side { grid-template-columns:1fr 1fr; }
  .points-card { padding:22px; }
  .activity-item { grid-template-columns:1fr; }
  .transaction-item { grid-template-columns:auto 1fr; }
  .tx-amount { grid-column:2; text-align:left; }
  .form-grid, .checkout-grid { grid-template-columns:1fr; }
  .form-grid .span-2, .checkout-grid .span-2 { grid-column:auto; }
  .range-row { grid-template-columns:1fr 46px; }
  .range-row label { grid-column:1/-1; }
  .product-detail { grid-template-columns:1fr; }
  .product-detail-art { min-height:180px; font-size:76px; }
  .product-detail-copy { padding:19px; }
  .site-footer { margin-bottom:18px; flex-direction:column; align-items:flex-start; }
  .mobile-nav { position:fixed; z-index:60; left:8px; right:8px; bottom:8px; display:grid; grid-template-columns:repeat(5,1fr); padding:7px; border:1px solid var(--line); border-radius:19px; background:color-mix(in srgb,var(--surface-solid) 88%,transparent); backdrop-filter:blur(18px); box-shadow:var(--shadow); }
  .mobile-nav a { display:grid; place-items:center; gap:2px; min-width:0; padding:5px 2px; color:var(--muted); text-decoration:none; font-size:10px; font-weight:800; border-radius:12px; }
  .mobile-nav a span { font-size:18px; }
  .mobile-nav a.active { color:var(--text); background:var(--surface-2); }
  .modal { max-height:84vh; overflow:auto; }
  .toast { bottom:92px; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns:1fr; }
  .loyalty-side { grid-template-columns:1fr; }
  .top-actions { gap:5px; }
  .icon-btn { width:40px; min-height:40px; }
  .cart-btn { min-height:40px; padding:0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Cloudflare/shared-app additions */
.auth-page { min-height: 68vh; display:grid; place-items:center; }
.auth-shell { width:min(100%, 980px); display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.login-shell { max-width:900px; }
.auth-art, .auth-card { border:1px solid var(--line); border-radius:30px; box-shadow:var(--shadow); }
.auth-art { padding:clamp(28px,5vw,54px); background:linear-gradient(145deg,var(--surface-solid),color-mix(in srgb,var(--accent-soft) 62%,var(--surface-solid))); display:flex; flex-direction:column; justify-content:center; }
.auth-art h1 { margin:12px 0 10px; font-size:clamp(38px,6vw,68px); line-height:.95; letter-spacing:-.055em; }
.auth-art p { color:var(--muted); line-height:1.55; }
.auth-emoji { font-size:70px; margin-bottom:12px; }
.auth-card { padding:26px; background:var(--surface-solid); display:grid; gap:14px; align-content:center; }
.auth-card h2 { margin:0 0 4px; font-size:32px; letter-spacing:-.04em; }
.auth-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-split fieldset { margin:0; padding:14px; border:1px solid var(--line); border-radius:16px; display:grid; gap:10px; min-width:0; }
.auth-split legend { padding:0 6px; font-weight:900; }
.login-perks { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.login-perks span, .badge { width:max-content; max-width:100%; padding:7px 10px; border-radius:999px; background:var(--surface-solid); border:1px solid var(--line); font-size:11px; font-weight:900; }
.warning-box, .info-box { padding:13px 14px; border-radius:15px; line-height:1.45; }
.warning-box { background:var(--danger-soft); color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 25%,transparent); }
.info-box { background:var(--info-soft); color:var(--text); border:1px solid color-mix(in srgb,var(--info) 20%,transparent); margin:12px 0; }
.loading-card { min-height:420px; display:grid; place-items:center; align-content:center; text-align:center; gap:8px; }
.loading-orbit { font-size:50px; letter-spacing:8px; animation:floaty 2s ease-in-out infinite; }
.loading-orbit span { color:var(--accent); font-size:24px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.account-summary { margin:10px 0 18px; }
.account-card { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.account-avatar { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:var(--surface-solid); font-size:30px; }
.account-card strong, .account-card small { display:block; }
.account-card small { color:var(--muted); margin-top:4px; }
.feature-stack { display:grid; gap:10px; }
.feature-stack span { padding:11px 12px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); }
.room-menu { display:grid; gap:8px; margin:12px 0; }
.menu-check { grid-template-columns:auto 1fr 68px; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); }
.menu-check > input[type="checkbox"] { width:20px; min-height:20px; }
.menu-check .menu-qty { width:68px; min-height:38px; padding:6px 8px; }
.fun-tabs, .admin-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:thin; }
.memory-panel { min-width:0; }
.memory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.memory-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); }
.memory-card img, .memory-card video { width:100%; max-height:260px; object-fit:cover; display:block; background:var(--surface-2); }
.memory-copy { padding:14px; }
.memory-copy h3 { margin:5px 0 6px; }
.memory-copy p { margin:0 0 8px; color:var(--muted); line-height:1.45; white-space:pre-wrap; }
.big-icon.small { font-size:22px; }
.tiny-btn { min-height:34px; padding:5px 9px; font-size:11px; margin-top:8px; }
.badge-card { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); opacity:.62; }
.badge-card.earned { opacity:1; background:linear-gradient(135deg,var(--surface-solid),var(--gold-soft)); }
.badge-card > span { font-size:28px; }
.badge-card strong, .badge-card small { display:block; }
.badge-card small { color:var(--muted); margin-top:3px; }
.points-number.mini { font-size:42px; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-list { display:grid; gap:9px; }
.admin-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.admin-row-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--surface-2); font-size:24px; }
.admin-row strong, .admin-row small { display:block; }
.admin-row small { color:var(--muted); margin-top:3px; }
.admin-row p { margin:6px 0 0; color:var(--muted); }
.admin-row-actions { display:flex; gap:8px; }
.complaint-admin { align-items:start; }
.audit-list { display:grid; gap:8px; }
.detail-summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; }
.timeline { display:grid; gap:0; margin:14px 0; }
.timeline-item { display:grid; grid-template-columns:20px 1fr; gap:10px; min-height:58px; position:relative; }
.timeline-item:before { content:""; position:absolute; left:6px; top:16px; bottom:-4px; width:2px; background:var(--line); }
.timeline-item:last-child:before { display:none; }
.timeline-dot { width:14px; height:14px; border:3px solid var(--accent); border-radius:50%; background:var(--surface-solid); z-index:1; margin-top:2px; }
.timeline-item strong, .timeline-item small { display:block; }
.timeline-item small { color:var(--muted); margin-top:3px; }
.toast.error { background:var(--danger); color:#fff; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }

@media (max-width: 760px) {
  .auth-shell, .auth-split, .admin-grid { grid-template-columns:1fr; }
  .auth-art { padding:28px 22px; border-radius:24px; }
  .auth-art h1 { font-size:46px; }
  .auth-emoji { font-size:54px; }
  .auth-card { padding:20px; border-radius:24px; }
  .memory-grid { grid-template-columns:1fr; }
  .menu-check { grid-template-columns:auto 1fr 58px; }
  .menu-check .menu-qty { width:58px; }
  .page-actions { width:100%; }
  .page-actions select, .page-actions .secondary { flex:1 1 150px; }
  .admin-row { grid-template-columns:auto 1fr; }
  .admin-row > button, .admin-row-actions { grid-column:2; justify-self:start; }
}

/* Programmatic route focus should not draw a browser-default box around the whole app. */
#view:focus { outline: none; }
.tx-amount { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.tx-amount strong, .tx-amount small { display:block; }
@media (max-width:700px){ .tx-amount { align-items:flex-start; } }