/* ===== Splash / Auth ===== */
.splash {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, var(--volet-600), var(--volet-900) 70%);
}
.splash img { width: 96px; animation: scaleIn 800ms var(--ease-out); }
.splash .tag { color: var(--volet-100); margin-top: 18px; font-size: 13px; letter-spacing: 1px; animation: fadeIn 1.2s; }

.auth-hero {
  flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, var(--volet-500), var(--volet-900) 75%);
  color: #fff; padding: 0 24px;
}
.auth-hero .float-card {
  position: absolute; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 10px 14px;
  font-size: 12px; font-weight: 600; animation: float 6s ease-in-out infinite;
}
.auth-content { margin-top: auto; padding-bottom: 40px; z-index: 2; }
.auth-logo { width: 150px; margin: 0 0 6px; }
.auth-hero h1 { font-size: 30px; margin-bottom: 8px; }
.auth-hero .sub { color: var(--volet-100); margin-bottom: 28px; font-size: 15px; }
.auth-actions .btn { margin-bottom: 10px; }
.auth-form-screen { flex:1; padding: 8px 24px 24px; display:flex; flex-direction:column; }

/* Onboarding */
.onb { flex:1; display:flex; flex-direction:column; padding: 8px 24px 28px; }
.onb-slide { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; animation: slideUp var(--motion-base); }
.onb-illu { width: 180px; height: 180px; border-radius: 40px; display:flex; align-items:center; justify-content:center; margin-bottom: 32px; background: linear-gradient(135deg, var(--volet-100), var(--volet-50)); }
.onb-dots { display:flex; gap: 8px; justify-content:center; margin: 24px 0; }
.onb-dots .d { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: all var(--motion-base); }
.onb-dots .d.active { width: 24px; background: var(--volet-500); }

/* OTP */
.otp-row { display:flex; gap: 10px; justify-content:center; margin: 24px 0; }
.otp-box { width: 46px; height: 56px; border: 1.5px solid var(--color-border); border-radius: var(--r-md); text-align:center; font-size: 24px; font-weight:700; background: var(--color-surface); color: var(--color-text-primary); }
.otp-box.filled { border-color: var(--volet-500); background: var(--volet-50); }
.demo-btn { margin-top: 16px; border: 1.5px dashed var(--volet-300); background: var(--volet-50); }
body.dark .demo-btn { background: rgba(124,58,237,.12); }

/* Interest picker */
.interest-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.interest-cell { aspect-ratio: 1; border-radius: var(--r-lg); border: 1.5px solid var(--color-border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:600; transition: all var(--motion-fast); background: var(--color-surface); }
.interest-cell .emoji { font-size: 28px; }
.interest-cell.active { border-color: var(--volet-500); background: var(--volet-50); color: var(--volet-600); transform: scale(1.02); }
body.dark .interest-cell.active { background: rgba(124,58,237,.14); }

/* Social login */
.social-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding: 13px; border-radius: var(--r-md); font-weight:600; font-size:14px; margin-bottom:10px; border:1.5px solid var(--color-border); }
.social-btn.google { background:#fff; color:#1F1F1F; }
.social-btn.apple { background:#000; color:#fff; border-color:#000; }
.social-btn.zalo { background:#0068FF; color:#fff; border-color:#0068FF; }

/* ===== Brand canopy (P0-1) ===== */
/* Purple flows from status bar down through large-title + hero (~340px), fading to bg.
   Status-bar background is tied to the canopy top via #phone-frame.has-canopy in render(). */
.brand-canopy {
  background:
    radial-gradient(120% 80% at 15% 0%, var(--volet-500) 0%, var(--volet-700) 42%, transparent 72%),
    linear-gradient(180deg, var(--volet-900) 0%, var(--color-bg) 340px);
}
.brand-canopy.biz {
  background:
    radial-gradient(120% 80% at 15% 0%, var(--biz-400) 0%, var(--biz-500) 42%, transparent 72%),
    linear-gradient(180deg, #1E3A8A 0%, var(--color-bg) 340px);
}
/* Header inside a canopy is transparent so the gradient shows through */
.brand-canopy .app-header,
.brand-canopy .large-title-head { background: transparent; border-bottom: none; }
.brand-canopy .text-large-title,
.brand-canopy .large-title-head .lt-title { color: #fff; }
/* Status-bar tint behind the transparent system status bar */
#phone-frame.has-canopy #status-bar { background: var(--volet-900); }
#phone-frame.has-canopy.canopy-biz #status-bar { background: #1E3A8A; }
body.dark #phone-frame.has-canopy #status-bar { background: #1A0B33; }

/* ===== Home ===== */
.streak-card {
  background: linear-gradient(120deg, var(--volet-600), var(--volet-400));
  border-radius: var(--r-xl); padding: 18px; color:#fff; position:relative; overflow:hidden;
}
.streak-card .flame { font-size: 32px; }
/* Key-outline watermark (P1-2) replaces the meaningless white circle */
.streak-card::after, .wallet-head::after {
  content:''; position:absolute; right:-16px; top:-14px; width:130px; height:130px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='M11.5 11.5 20 20M17 17l2-2M14.5 14.5l2-2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .06; pointer-events: none; transform: rotate(12deg);
}
/* Glass streak card variant — sits on the canopy so .glass blur finally has something to blur */
.streak-card.on-canopy {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.streak-week { display:flex; gap:6px; margin-top:14px; }
.streak-day { flex:1; aspect-ratio:1; border-radius: 8px; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.streak-day.done { background: rgba(255,255,255,.9); color: var(--volet-600); }
.streak-day.today { box-shadow: 0 0 0 2px #fff; }

.flash-card {
  width: 230px; border-radius: var(--r-lg); overflow:hidden; background: var(--color-surface);
  box-shadow: var(--shadow-card); position:relative;
}
.flash-card .img { height: 110px; position:relative; }
.flash-card .img img { width:100%; height:100%; object-fit:cover; }
.flash-timer { position:absolute; top:8px; left:8px; background: var(--color-error); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius: var(--r-full); }
.flash-card .body { padding: 12px; }

.collection-banner {
  border-radius: var(--r-xl); padding: 22px 18px; color:#fff; position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--volet-700), var(--volet-400));
}
.collection-banner h3 { font-size: 20px; }
.collection-banner .deco { position:absolute; right:10px; bottom:-10px; font-size:64px; opacity:.25; }

.biz-circle { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; }
.biz-circle .logo-box { width: 60px; height: 60px; border-radius: 50%; border:2px solid var(--color-surface); box-shadow: var(--shadow-card); }
.biz-circle span { font-size: 11px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 64px; }

/* Editorial hero-feature card (P1-1) — one large 16:9 full-bleed, reuses .v-hero scrim */
.hero-feature {
  position: relative; height: 200px; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-card); margin-bottom: var(--sp-4);
}
.hero-feature > .bg { width: 100%; height: 100%; object-fit: cover; }
.hero-feature > .bg.fallback { display:flex; align-items:center; justify-content:center; font-size:72px; color:#fff; }
.hero-feature .grad { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%); }
.hero-feature .hf-body { position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.hero-feature .hf-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height:1.2; }
.hero-feature .hf-biz { font-size: 12px; opacity: .92; margin-top: 4px; }

/* Signature punch-ticket motif (P1-2) — 2 notches + dashed tear, reusable */
.ticket-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--r-md); font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--volet-500), var(--volet-700)); color: #fff;
}
.punch-notch { position: relative; }
.punch-notch::before, .punch-notch::after {
  content:''; position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background: var(--color-bg); transform: translateY(-50%);
}
.punch-notch::before { left:-8px; }
.punch-notch::after { right:-8px; }

/* Voucher grid cards (discover) */
.v-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v-card { border-radius: var(--r-lg); overflow:hidden; background: var(--color-surface); box-shadow: var(--shadow-card); position:relative; }
.v-card .v-img { height: 96px; position:relative; background: var(--volet-100); }
.v-card .v-img img { width:100%; height:100%; object-fit:cover; }
.v-card .v-heart { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background: rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; }
.v-card .v-heart.saved { color: var(--color-error); }
.v-card .v-body { padding: 10px 12px 12px; }
.v-card .v-title { font-size: 13px; font-weight:700; line-height:1.25; margin-bottom:4px; }
.v-card .v-biz { font-size: 11px; color: var(--color-text-secondary); display:flex; align-items:center; gap:4px; }
.v-tags { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }

/* Map */
.map-wrap { position:relative; flex:1; background: #E8EEF4; overflow:hidden; }
body.dark .map-wrap { background:#10141C; }
.map-pin { position:absolute; transform: translate(-50%,-100%); cursor:pointer; }
.map-pin svg { filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.radius-slider { position:absolute; bottom: 16px; left:16px; right:16px; }

/* Voucher detail */
.v-hero { height: 220px; position:relative; }
.v-hero img { width:100%; height:100%; object-fit:cover; }
.v-hero .grad { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); }
.v-hero .biz-badge { position:absolute; bottom:14px; left:16px; display:flex; align-items:center; gap:8px; color:#fff; }

/* Wallet */
.wallet-head { background: linear-gradient(135deg, var(--volet-700), var(--volet-500)); border-radius: var(--r-2xl); padding: 20px; color:#fff; position:relative; overflow:hidden; }
/* Wallet-head sits on the canopy: glass instead of its own gradient */
.wallet-head.on-canopy {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.wallet-head .label { font-size:12px; opacity:.85; }
.wallet-head .amount { font-size: 30px; font-weight:700; margin: 2px 0 16px; }
.wallet-sub { display:flex; gap:12px; }
.wallet-sub .ws { flex:1; background: rgba(255,255,255,.14); border-radius: var(--r-md); padding: 10px 12px; }
.wallet-sub .ws .n { font-size:18px; font-weight:700; }
.wallet-sub .ws .l { font-size:11px; opacity:.85; }

.voucher-card {
  border-radius: 16px; padding: 18px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-card); margin-bottom: 14px;
}
.voucher-card::after { content:''; position:absolute; left:14px; right:14px; bottom: 46px; border-top: 2px dashed rgba(255,255,255,0.35); }
.voucher-card::before { content:''; position:absolute; left:-9px; bottom: 38px; width:18px; height:18px; border-radius:50%; background: var(--color-bg); }
.voucher-card .punch-r { content:''; position:absolute; right:-9px; bottom: 38px; width:18px; height:18px; border-radius:50%; background: var(--color-bg); }
.voucher-card .vc-top { display:flex; justify-content:space-between; align-items:flex-start; }
.voucher-card .vc-logo { width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.2); overflow:hidden; }
.voucher-card .vc-logo img { width:100%; height:100%; object-fit:cover; }
.voucher-card .vc-value { font-size: 26px; font-weight:700; margin: 10px 0 2px; }
.voucher-card .vc-title { font-size: 14px; opacity:.95; }
.voucher-card .vc-foot { display:flex; justify-content:space-between; align-items:center; margin-top: 22px; font-size:12px; }
.voucher-card.used { filter: grayscale(.7) brightness(.85); }
.voucher-card .used-stamp { position:absolute; top:16px; right:16px; border:2px solid rgba(255,255,255,.7); color:#fff; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700; transform: rotate(-8deg); }

/* QR / barcode */
.qr-box { width: 180px; height: 180px; margin: 0 auto; padding: 12px; background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.qr-grid { width:100%; height:100%; display:grid; grid-template-columns: repeat(11,1fr); grid-template-rows: repeat(11,1fr); gap:2px; }
.qr-grid i { background:#0F0A23; border-radius:1px; }
.qr-grid i.off { background: transparent; }
.barcode { display:flex; gap:2px; justify-content:center; height: 54px; align-items:stretch; margin: 14px 0; }
.barcode i { background:#0F0A23; }

/* Stamp card */
.stamp-grid { display:grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.stamp-cell { aspect-ratio:1; border-radius:50%; border: 2px dashed var(--color-border); display:flex; align-items:center; justify-content:center; font-size:20px; color: var(--color-text-tertiary); }
.stamp-cell.done { border-style:solid; border-color: var(--volet-500); background: var(--volet-500); color:#fff; }

/* Tier card */
.tier-card { border-radius: var(--r-2xl); padding: 24px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.tier-card .crown { font-size: 40px; }
.tier-card.bronze { background: var(--tier-bronze); }
.tier-card.silver { background: var(--tier-silver); color:#333; }
.tier-card.gold { background: var(--tier-gold); color:#5a4500; }
.tier-card.diamond { background: var(--tier-diamond); color:#2E1065; }

/* Gift */
.gift-card-preview {
  border-radius: var(--r-xl); padding: 24px 20px; color:#fff; text-align:center;
  background: linear-gradient(135deg, var(--volet-500), var(--volet-700)); position:relative; overflow:hidden;
}
.gift-card-preview .ribbon { font-size: 44px; margin-bottom: 8px; }
.confetti-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti { position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; animation: confetti-fall 2.4s linear infinite; }

/* C2C exchange */
.exchange-card { display:flex; gap:12px; padding: 14px; }
.exchange-card .x-type { font-size:11px; font-weight:700; padding:2px 8px; border-radius: var(--r-full); }

/* Profile */
.profile-head { display:flex; align-items:center; gap:14px; }
.profile-head .avatar { width:64px; height:64px; font-size:24px; }
.profile-stats { display:flex; }
.profile-stats .ps { flex:1; text-align:center; }
.profile-stats .ps .n { font-size:20px; font-weight:700; }
.profile-stats .ps .l { font-size:11px; color: var(--color-text-secondary); }
.profile-stats .ps + .ps { border-left:1px solid var(--color-border); }
.biz-hub-btn { background: linear-gradient(135deg,#0EA5E9,#2563EB); color:#fff; }

/* Referral */
.ref-code { font-size: 26px; font-weight:700; letter-spacing: 3px; color: var(--volet-600); text-align:center; padding: 16px; background: var(--volet-50); border-radius: var(--r-lg); border: 1.5px dashed var(--volet-300); }
body.dark .ref-code { background: rgba(124,58,237,.12); }
.share-row { display:flex; gap:10px; }
.share-btn { flex:1; aspect-ratio:1; max-height:64px; border-radius: var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:600; color:#fff; }

/* Notifications */
.notif-item { display:flex; gap:12px; padding: 14px 0; border-bottom:1px solid var(--color-border); }
.notif-item:last-child { border-bottom:none; }
.grouped-list > .notif-item { padding-left: var(--sp-4); padding-right: var(--sp-4); position: relative; border-bottom: none; }
.grouped-list > .notif-item:not(:last-child)::after {
  content:''; position:absolute; left:56px; right:0; bottom:0; height:.5px; background: var(--separator);
}
.notif-item .ni-icon { width:42px; height:42px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-item .ni-dot { width:8px; height:8px; border-radius:50%; background: var(--volet-500); flex-shrink:0; margin-top:6px; }
.group-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-secondary); margin: 4px 4px 8px; }

/* ===== Business ===== */
body.business-mode #phone-frame { }
.biz-header { background: linear-gradient(120deg,#0EA5E9,#2563EB); color:#fff; padding: 8px 18px 16px; }
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi-card { background: var(--color-surface); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-card); }
.kpi-card .k-label { font-size:12px; color: var(--color-text-secondary); }
.kpi-card .k-val { font-size:24px; font-weight:700; margin: 4px 0; }
.kpi-card .k-delta { font-size:12px; font-weight:600; }
.kpi-card .k-delta.up { color: var(--color-success); }
.kpi-card .k-delta.down { color: var(--color-error); }

.funnel { display:flex; align-items:flex-end; gap:8px; height: 90px; }
.funnel .f-bar { flex:1; background: linear-gradient(180deg,#0EA5E9,#2563EB); border-radius: 8px 8px 0 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; color:#fff; font-size:11px; font-weight:700; padding-bottom:4px; }

.chart-svg { width:100%; height: auto; }
.heatmap { display:grid; grid-template-columns: auto repeat(24,1fr); gap:2px; font-size:8px; }
.heatmap .hm-cell { aspect-ratio:1; border-radius:2px; }
.heatmap .hm-label { font-size:9px; color: var(--color-text-secondary); display:flex; align-items:center; }

.seg-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.seg-bar .sb-track { flex:1; height: 10px; border-radius: var(--r-full); background: var(--color-surface-2); overflow:hidden; }
.seg-bar .sb-fill { height:100%; border-radius: var(--r-full); }

.stepper { display:flex; gap:6px; margin-bottom: 20px; }
.stepper .st { flex:1; height:4px; border-radius:2px; background: var(--color-border); }
.stepper .st.done { background: var(--volet-500); }

.tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.big-tile { aspect-ratio: 1.1; border-radius: var(--r-xl); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:15px; box-shadow: var(--shadow-card); }
.big-tile .t-icon { font-size: 40px; }

/* Scanner */
.scanner { flex:1; background:#0A0A0F; position:relative; display:flex; align-items:center; justify-content:center; }
.scan-frame { width: 230px; height: 230px; border-radius: 24px; position:relative; }
.scan-frame .corner { position:absolute; width:32px; height:32px; border:3px solid #fff; }
.scan-frame .corner.tl { top:0; left:0; border-right:0; border-bottom:0; border-radius: 12px 0 0 0; }
.scan-frame .corner.tr { top:0; right:0; border-left:0; border-bottom:0; border-radius: 0 12px 0 0; }
.scan-frame .corner.bl { bottom:0; left:0; border-right:0; border-top:0; border-radius: 0 0 0 12px; }
.scan-frame .corner.br { bottom:0; right:0; border-left:0; border-top:0; border-radius: 0 0 12px 0; }
.scan-line { position:absolute; left:8%; right:8%; height:2px; background: linear-gradient(90deg, transparent, #7C3AED, transparent); box-shadow: 0 0 12px #7C3AED; animation: scanline 2s ease-in-out infinite alternate; }

.donut-wrap { display:flex; align-items:center; gap:18px; }

/* ===== Dark mode as a real second theme (P1-3) ===== */
/* Lower luminance on brand gradients + a 1px inner top-highlight so gradient cards
   "sit" on the dark background instead of glowing. */
body.dark .brand-canopy {
  background:
    radial-gradient(120% 80% at 15% 0%, var(--volet-700) 0%, var(--volet-900) 42%, transparent 72%),
    linear-gradient(180deg, #1A0B33 0%, var(--color-bg) 340px);
}
body.dark .brand-canopy.biz {
  background:
    radial-gradient(120% 80% at 15% 0%, var(--biz-500) 0%, #1E3A8A 42%, transparent 72%),
    linear-gradient(180deg, #0F224D 0%, var(--color-bg) 340px);
}
body.dark .streak-card {
  background: linear-gradient(120deg, var(--volet-800), var(--volet-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark .wallet-head {
  background: linear-gradient(135deg, var(--volet-900), var(--volet-700));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark .collection-banner {
  background: linear-gradient(120deg, var(--volet-900), var(--volet-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark .gift-card-preview {
  background: linear-gradient(135deg, var(--volet-700), var(--volet-900));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark .streak-card.on-canopy, body.dark .wallet-head.on-canopy {
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
/* Denser glass nav + faint light border in dark */
body.dark .bottom-nav.glass, body.dark .app-header.glass, body.dark .large-title-head.glass {
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-color: rgba(255,255,255,.08);
}

/* misc */
.ring { transform: rotate(-90deg); }
.scroll-reveal { animation: slideUp 400ms var(--ease-out) both; }
.spinner { width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation: spinRing .7s linear infinite; }
.rating-stars { color: #F59E0B; letter-spacing:1px; }