/* Storefront design system. Standalone: no legacy styles or override sheets. */
:root {
  color-scheme:dark;
  --bg:#08090b; --panel:#15171b; --panel-2:#202329; --input:#1d2025;
  --text:#f7f8fc; --muted:#a5aab5; --dim:#8e96a5;
  --brand:#148bff; --brand-soft:#65b7ff; --tint:#148bff1a;
  --border:#ffffff0d; --border-strong:#ffffff1c; --success:#65d5b1; --danger:#ff8195; --gold:#eebd60;
  --shadow:0 12px 32px #00000014; --radius:26px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --font-text:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display:var(--font-text);
  --grad-brand:linear-gradient(140deg,#379eff,#1173e3);
  --surface:var(--panel-2); --surface-strong:var(--panel-2); --hair:var(--border);
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f4f7fc; --panel:#fff; --panel-2:#edf2fa; --input:#f7f9fd;
  --text:#172438; --muted:#596b82; --dim:#64758b;
  --brand:#076de0; --brand-soft:#096bd1; --tint:#137ff00a;
  --border:#1b3e6810; --border-strong:#1b3e6825; --success:#14765c; --danger:#c12c48; --gold:#94600a;
  --shadow:0 12px 32px #19376906;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { margin:0; scroll-padding-top:24px; scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)); }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 var(--font-text); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin-top:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
button,a { -webkit-user-select:none; }
:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
::selection { background:#2585ff44; }
.app { display:grid; grid-template-columns:176px minmax(0,1fr); column-gap:40px; max-width:1320px; margin:auto; padding:0 36px 64px; }
.topbar { grid-column:1/-1; display:flex; align-items:center; gap:10px; min-height:94px; border-bottom:1px solid var(--border); margin-bottom:32px; }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:750; letter-spacing:-.7px; }
.brand-mark { width:36px; height:36px; border-radius:10px; }
.topbar-spacer { flex:1; }
.language-switch,.theme-control select,.balance-chip { height:40px; min-width:44px; padding:0 12px; border:1px solid var(--border-strong); border-radius:12px; background:var(--panel); color:var(--muted); font-size:12px; font-weight:600; }
.theme-control select { width:100px; }
.language-switch:hover,.theme-control select:hover { border-color:var(--brand); }
.balance-chip { display:flex; align-items:center; color:var(--text); font-variant-numeric:tabular-nums; max-width:160px; overflow:hidden; }
.balance-chip-value { overflow:hidden; text-overflow:ellipsis; }
.balance-chip-icon { display:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tabbar { display:flex; flex-direction:column; gap:6px; position:sticky; top:24px; align-self:start; }
.tabbar::before { content:'ZENLY SPACE'; color:var(--dim); font-size:9px; letter-spacing:2px; padding:12px 16px 16px; }
.tab { position:relative; display:flex; align-items:center; gap:12px; min-height:48px; padding:12px 16px; font-weight:550; font-size:13px; border-radius:12px; color:var(--muted); }
.tab:hover { background:var(--panel); color:var(--text); }
.tab.active { color:var(--brand-soft); background:var(--tint); }
.tab.active::after { content:''; width:4px; height:18px; background:var(--brand); position:absolute; right:0; border-radius:5px; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); position:absolute; top:12px; left:31px; }
#view { min-width:0; width:100%; padding-bottom:24px; }
#view:not([data-route="home"]):not([data-route="catalog"]):not([data-route="profile"]) { max-width:740px; margin:0 auto; }
.hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; position:relative; overflow:hidden; min-height:350px; padding:36px; border:1px solid var(--border); border-radius:26px; background:linear-gradient(125deg,var(--panel) 25%,var(--tint)); }
.hero-copy { position:relative; z-index:2; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:600; color:var(--brand-soft); letter-spacing:1.5px; text-transform:uppercase; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
.hero-title { font-size:clamp(30px,3.3vw,46px); line-height:1.12; letter-spacing:-1.8px; font-weight:720; margin:22px 0 16px; }
.hero-title em { font-style:normal; color:var(--brand-soft); }
.hero-sub { max-width:340px; color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:22px; }
.hero-chips { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; color:var(--dim); font-size:10px; }
.hero-chips span { display:flex; gap:6px; align-items:center; }
.hero-chips svg { width:14px; height:14px; }
.hero-art { position:relative; height:280px; min-width:0; }
.art-halo { position:absolute; width:270px; height:270px; border-radius:50%; top:0; left:50%; transform:translateX(-50%); background:radial-gradient(circle,#2189ff23,transparent 68%); border:1px solid #2189ff12; }
.service-tile { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ffffff25; box-shadow:0 24px 50px #0003; }
.tile-front { width:165px; height:195px; background:linear-gradient(150deg,#2b92fc,#0758c4); border-radius:25px; color:#fff; top:46px; left:50%; transform:translateX(-50%) rotate(-9deg); z-index:2; }
.tile-front img { width:58px; height:58px; margin-bottom:18px; border:1px solid #ffffff45; border-radius:16px; }
.tile-front span { font-weight:650; font-size:19px; letter-spacing:-.5px; }
.tile-front small { font-size:7px; letter-spacing:2px; margin-top:10px; opacity:.6; }
.tile-back { width:115px; height:138px; background:var(--panel-2); border-color:var(--border-strong); border-radius:20px; right:0; top:16px; transform:rotate(14deg); gap:14px; color:var(--brand-soft); }
.tile-back svg { width:35px; height:35px; }
.tile-back span { font-size:8px; letter-spacing:2px; }
.tile-small { width:66px; height:66px; left:0; top:150px; border-radius:18px; background:var(--panel-2); color:var(--brand-soft); transform:rotate(-15deg); z-index:3; }
.tile-small svg { width:30px; height:30px; }
.art-reward { position:absolute; z-index:4; right:0; bottom:3px; padding:12px 18px; border:1px solid var(--border-strong); border-radius:14px; background:var(--panel); display:flex; align-items:center; gap:12px; color:var(--brand-soft); box-shadow:var(--shadow); }
.art-reward span { font-size:20px; font-weight:700; line-height:1.2; }
.art-reward small { display:block; font-size:7px; letter-spacing:1.5px; color:var(--dim); margin-top:5px; }
.section { margin:32px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section-title { font-size:21px; line-height:1.3; font-weight:680; letter-spacing:-.6px; margin:0; }
.section-note { font-size:11px; color:var(--dim); background:var(--panel-2); border-radius:8px; padding:3px 8px; }
.trust-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--border); padding:4px 0 20px; }
.trust { text-align:center; padding:4px 12px; }
.trust + .trust { border-left:1px solid var(--border); }
.trust-value { font-size:23px; font-weight:650; letter-spacing:-.7px; white-space:nowrap; }
.trust-label { color:var(--dim); font-size:10px; margin-top:3px; }
.cat-bar { display:flex; gap:8px; overflow:auto; scrollbar-width:thin; padding-bottom:8px; margin-bottom:16px; }
.cat { display:inline-flex; align-items:center; gap:7px; flex:none; min-height:40px; padding:8px 13px; background:var(--panel); border:1px solid var(--border); color:var(--muted); border-radius:10px; font-size:12px; }
.cat svg { width:15px; height:15px; }
.cat.active { color:var(--brand-soft); border-color:var(--brand); background:var(--tint); }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.product-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); background:var(--panel); border-radius:22px; transition:border-color .18s,box-shadow .18s; min-width:0; }
.product-card:hover { border-color:var(--brand); box-shadow:0 8px 28px #087cf00c; }
.product-media { position:relative; width:100%; aspect-ratio:16/9; background:var(--panel-2); overflow:hidden; }
.product-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-placeholder { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px; background:radial-gradient(ellipse at 65% 20%,#2791ff28,transparent 70%),var(--input); }
.media-placeholder::after { content:''; position:absolute; width:200px; height:200px; border:1px solid #2189ff12; border-radius:50%; transform:translateX(70%); }
.media-symbol { display:grid; place-items:center; width:56px; height:56px; background:var(--grad-brand); color:white; border-radius:17px; box-shadow:0 12px 36px #2089f824; }
.media-symbol svg { width:28px; height:28px; }
.media-wordmark { max-width:90%; text-align:center; font-size:14px; font-weight:550; color:var(--muted); }
.badge { display:inline-flex; font-size:10px; font-weight:600; padding:5px 10px; border-radius:7px; color:var(--brand-soft); border:1px solid var(--border-strong); background:var(--panel); }
.product-media .badge { position:absolute; top:14px; left:14px; z-index:2; }
.badge.soon { color:var(--muted); }
.product-body { display:flex; flex-direction:column; gap:12px; padding:24px; flex:1; min-width:0; }
.product-title { font-size:19px; font-weight:660; line-height:1.35; letter-spacing:-.4px; overflow-wrap:anywhere; }
.product-sub { color:var(--muted); font-size:12px; line-height:1.6; margin:0; }
.meta-row { display:flex; flex-wrap:wrap; gap:10px; }
.meta { display:inline-flex; align-items:center; gap:5px; color:var(--dim); font-size:10px; max-width:100%; }
.meta svg { width:13px; height:13px; }
.meta.ok { color:var(--success); }
.product-purchase { border-top:1px solid var(--border); padding-top:16px; margin-top:auto; }
.price-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.price { font-size:28px; font-weight:730; line-height:1.3; letter-spacing:-1px; white-space:nowrap; }
.price-old { color:var(--dim); text-decoration:line-through; font-size:12px; white-space:nowrap; }
.price-save { padding:3px 7px; background:var(--tint); border-radius:6px; color:var(--brand-soft); font-size:10px; font-weight:650; }
.reward-hint { display:flex; align-items:center; gap:6px; color:var(--brand-soft); font-size:11px; margin-top:9px; }
.reward-hint svg { width:14px; height:14px; }
.reward-caption { color:var(--dim); }
.product-footer { display:flex; justify-content:space-between; align-items:center; min-height:42px; color:var(--brand-soft); background:var(--tint); border-radius:10px; padding:10px 14px; font-size:12px; font-weight:600; margin-top:4px; }
.product-footer svg,.hero-action svg { transform:rotate(180deg); width:16px; height:16px; }
.product-card:only-child { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.product-card:only-child .product-media { height:100%; aspect-ratio:auto; min-height:300px; }
.product-card:only-child .media-symbol { width:72px; height:72px; border-radius:22px; }
.product-card:only-child .media-wordmark { font-size:17px; }
.product-shot { aspect-ratio:16/9; border-radius:22px; overflow:hidden; margin-bottom:24px; background:var(--panel); border:1px solid var(--border); }
.product-shot img { width:100%; height:100%; object-fit:cover; }
.product-icon { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:13px; background:var(--grad-brand); color:#fff; }
.product-icon svg { width:22px; height:22px; }
.banners { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0; }
.banner { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:22px; gap:12px; border-radius:18px; border:1px solid var(--border); background:var(--panel); }
.banner-eyebrow { color:var(--brand-soft); font-size:8px; text-transform:uppercase; letter-spacing:1.4px; }
.banner-title { font-size:17px; font-weight:650; letter-spacing:-.4px; line-height:1.3; margin:0; overflow-wrap:anywhere; }
.banner-sub { color:var(--muted); font-size:11px; margin:0; }
.banner-cta { margin-top:auto; padding-top:4px; color:var(--brand-soft); font-size:11px; font-weight:600; }
.dots { display:none; }
.product-hero { padding:0; border:0; background:none; margin-bottom:24px; }
.product-hero .banner-title { font-size:30px; }
.product-hero .banner-sub { font-size:14px; }
.card,.pay-card,.wallet-card,.vault { border:1px solid var(--border); border-radius:20px; background:var(--panel); padding:24px; }
.card > :last-child { margin-bottom:0; }
/* Controls share one sizing model, including secondary and loading states. */
.btn,.copy-btn,.mini-btn,.preset { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 18px; border-radius:999px; border:1px solid transparent; background:var(--grad-brand); color:#fff; font-size:13px; line-height:1.5; font-weight:600; text-align:center; overflow-wrap:anywhere; transition:background .15s,border-color .15s; }
.btn { width:100%; }
.btn:hover:not(:disabled) { filter:brightness(1.08); }
.btn.ghost,.btn.subtle,.copy-btn,.mini-btn,.preset { color:var(--text); background:var(--panel-2); border-color:var(--border-strong); }
.btn.success { background:#16785e; color:#fff; }
.btn.danger { background:#b83551; color:#fff; }
.btn.small { min-height:40px; width:auto; padding:9px 14px; font-size:12px; }
.hero-action.btn { width:auto; gap:20px; font-size:12px; }
.btn svg,.copy-btn svg { width:17px; height:17px; }
.btn-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.copy-btn { flex-shrink:0; min-height:40px; padding:9px 12px; margin-left:auto; }
.sticky-buy { position:sticky; bottom:20px; padding:12px; border:1px solid var(--border-strong); border-radius:16px; background:var(--panel); z-index:5; box-shadow:var(--shadow); margin:24px 0 0; }
.input,.textarea,select.input { display:block; width:100%; min-width:0; min-height:48px; padding:12px 14px; background:var(--input); border:1px solid var(--border-strong); border-radius:12px; color:var(--text); font-size:16px; line-height:1.4; }
.input::placeholder,.textarea::placeholder { color:var(--dim); opacity:1; }
.input:focus,.textarea:focus { outline:2px solid var(--brand); outline-offset:1px; }
.textarea { min-height:116px; resize:vertical; }
.field { margin-bottom:20px; }
.field label { display:block; font-size:12px; font-weight:550; color:var(--muted); margin-bottom:8px; }
.qty-stepper { display:inline-flex; align-items:center; flex-shrink:0; gap:2px; padding:3px; border:1px solid var(--border-strong); border-radius:12px; background:var(--input); }
.qty-btn { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:8px; background:var(--panel-2); color:var(--text); font-size:22px; }
.qty-value { min-width:36px; text-align:center; font-weight:650; font-variant-numeric:tabular-nums; }
.file-drop { display:grid; place-items:center; gap:8px; padding:28px 20px; min-height:140px; border:1px dashed var(--border-strong); border-radius:14px; background:var(--input); cursor:pointer; text-align:center; color:var(--muted); font-size:13px; }
.file-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.file-drop:focus-within { outline:2px solid var(--brand); }
.file-drop svg { width:30px; height:30px; color:var(--brand-soft); }
.file-drop.filled { border-color:var(--success); color:var(--success); }
.file-preview { margin-top:12px; border-radius:12px; overflow:hidden; }
.rating-picker { display:flex; gap:8px; }
.rating-picker button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.rating-picker svg { width:25px; height:25px; }
.wallet-card-glow { display:none; }
.wallet-label,.reward-heading { font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.wallet-amount,.rewards-balance { font-size:44px; font-weight:700; letter-spacing:-1.5px; margin:10px 0; line-height:1.3; overflow-wrap:anywhere; }
.wallet-description { margin-bottom:24px; }
.topup-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.preset { padding:8px; min-height:42px; font-size:12px; white-space:nowrap; }
.preset.active { color:var(--brand-soft); border-color:var(--brand); background:var(--tint); }
.topup-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:12px; }
.rewards-card { padding:28px; margin-bottom:24px; background:linear-gradient(120deg,#0869d9,#218ffa); border-radius:22px; color:#fff; position:relative; overflow:hidden; }
.rewards-card::after { content:''; position:absolute; right:-50px; top:-30px; width:220px; height:220px; border:1px solid #ffffff20; border-radius:50%; box-shadow:0 0 0 30px #ffffff04,0 0 0 60px #ffffff03; pointer-events:none; }
.reward-heading { display:flex; justify-content:space-between; color:#d8ebff; }
.rewards-balance small { font-size:16px; font-weight:400; letter-spacing:0; }
.rewards-card p { font-size:12px; color:#e7f2ff; max-width:440px; }
.reward-example { display:inline-flex; gap:24px; align-items:center; padding:10px 14px; border:1px solid #ffffff33; border-radius:10px; font-size:13px; margin:4px 0 12px; }
.reward-history,.tx-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.reward-history:last-child,.tx-row:last-child { border:0; }
.reward-history > div { min-width:0; flex:1; }
.reward-history b { color:var(--brand-soft); font-size:13px; white-space:nowrap; }
.tx-icon { width:36px; height:36px; border-radius:10px; background:var(--panel-2); color:var(--danger); display:grid; place-items:center; flex:none; }
.tx-icon.plus,.tx-amount.plus { color:var(--success); }
.tx-label { font-size:13px; font-weight:600; }
.tx-date { font-size:11px; color:var(--dim); }
.tx-amount { font-size:14px; color:var(--danger); font-weight:650; white-space:nowrap; }
.order-item { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--border); border-radius:16px; background:var(--panel); margin-bottom:12px; }
.order-item:hover { border-color:var(--brand); }
.order-title { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.order-code { font-size:11px; color:var(--dim); margin-top:4px; }
.order-right { text-align:right; margin-left:auto; flex-shrink:0; }
.order-amount { font-size:15px; font-weight:650; }
.chip,.status-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border-strong); background:var(--panel-2); border-radius:8px; font-size:11px; max-width:100%; overflow-wrap:anywhere; }
.chip svg,.status-pill svg { width:14px; height:14px; }
.status-pill { color:var(--brand-soft); }
.status-pill[data-status="delivered"] { color:var(--success); }
.status-pill[data-status="rejected"],.status-pill[data-status="cancelled"],.status-pill[data-status="expired"] { color:var(--danger); }
.notice { padding:16px; border:1px solid var(--border-strong); border-radius:12px; font-size:12px; line-height:1.65; overflow-wrap:anywhere; background:var(--tint); color:var(--muted); }
.notice svg { width:16px; height:16px; }
.notice.ok { color:var(--success); }.notice.danger { color:var(--danger); }.notice.warn { color:var(--gold); }
.pay-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.pay-row:last-child { border:0; }
.pay-row > div { min-width:0; }
.pay-label { font-size:11px; color:var(--dim); margin-bottom:4px; }
.pay-value { font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.timeline { display:grid; gap:0; }
.tl-step { display:flex; gap:14px; }.tl-rail { display:flex; flex-direction:column; align-items:center; }
.tl-node { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--border-strong); border-radius:50%; background:var(--panel-2); }
.tl-node svg { width:12px; height:12px; opacity:0; }.tl-step.done .tl-node svg { opacity:1; }
.tl-step.done .tl-node { color:var(--success); border-color:var(--success); }.tl-step.active .tl-node { border-color:var(--brand); background:var(--tint); }
.tl-line { width:1px; flex:1; background:var(--border-strong); min-height:24px; }
.tl-body { padding-bottom:22px; }.tl-title { font-size:13px; font-weight:600; }.tl-text { font-size:12px; color:var(--dim); }
.vault { border-color:var(--success); }.vault-key { background:var(--input); padding:16px; border:1px solid var(--border-strong); border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; font:13px/1.7 monospace; margin-top:16px; }
.feature-list { display:grid; gap:14px; list-style:none; margin:0; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--panel); }
.feature-list li { display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--muted); }
.tick { color:var(--brand-soft); }.tick svg { width:17px; height:17px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; counter-reset:steps; }
.step { padding:22px; border:1px solid var(--border); background:var(--panel); border-radius:16px; }
.step-num { display:block; color:var(--brand-soft); font-size:12px; margin-bottom:20px; counter-increment:steps; }.step-num::before { content:'0' counter(steps); }
.step-title { font-size:13px; font-weight:600; margin-bottom:8px; }.step-text { color:var(--muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.rating-summary { display:flex; align-items:center; gap:16px; padding:18px 0; margin-bottom:8px; }
.rating-score { font-size:40px; line-height:1; font-weight:700; letter-spacing:-1px; }
.stars { display:flex; gap:3px; }.stars svg { width:14px; height:14px; }.star-off { opacity:.25; }
.reviews { display:grid; grid-auto-columns:calc((100% - 28px)/3); grid-auto-flow:column; gap:14px; overflow:auto; scrollbar-width:thin; padding-bottom:14px; scroll-snap-type:x mandatory; }
.review { scroll-snap-align:start; min-width:0; padding:20px; border-radius:16px; background:var(--panel); border:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.review-head { display:flex; align-items:center; gap:10px; }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; font-size:12px; font-weight:600; flex:none; }
.review-name { font-size:12px; font-weight:600; }.review-city { color:var(--dim); font-size:10px; }.review-text { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.faq-item { padding:20px 0; border-bottom:1px solid var(--border-strong); cursor:pointer; }.faq-q { display:flex; align-items:center; gap:16px; font-size:13px; font-weight:550; }.caret { margin-left:auto; color:var(--dim); }.caret svg { width:17px; height:17px; }.faq-item.open .caret { transform:rotate(180deg); }.faq-a { display:none; font-size:12px; line-height:1.8; color:var(--muted); margin-top:14px; max-width:650px; }.faq-item.open .faq-a { display:block; }
.empty { padding:48px 24px; border:1px dashed var(--border-strong); border-radius:18px; color:var(--dim); text-align:center; background:var(--panel); font-size:13px; }
.empty > svg { width:36px; height:36px; margin-bottom:16px; color:var(--brand-soft); }.empty .btn { margin-top:20px; }
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; width:min(420px,calc(100% - 32px)); display:grid; gap:8px; pointer-events:none; }.toast { padding:14px 18px; border:1px solid var(--border-strong); border-radius:14px; background:var(--panel); box-shadow:var(--shadow); font-size:13px; }.toast.error { border-color:var(--danger); }.toast.ok { border-color:var(--success); }
.skeleton { background:var(--panel-2); border-radius:18px; animation:breathe 1.5s infinite alternate; }@keyframes breathe { to { opacity:.45; } }
.muted { color:var(--muted); }.dim { color:var(--dim); }.small { font-size:12px; }.center { text-align:center; }.row { display:flex; align-items:center; gap:12px; }.row > * { min-width:0; }.grow { flex:1; min-width:0; }.mt-10 { margin-top:10px; }.mt-14 { margin-top:16px; }.mt-20 { margin-top:24px; }.mb-10 { margin-bottom:12px; }.mb-14 { margin-bottom:20px; }
@media(min-width:1100px) { #view[data-route="profile"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; } #view[data-route="profile"] > .section { grid-column:1/-1; margin:0; } #view[data-route="profile"] > .wallet-card { grid-column:2; grid-row:1; } #view[data-route="profile"] > .wallet-card,#view[data-route="profile"] > .rewards-card { margin:0; min-height:340px; } .topup-form { grid-template-columns:1fr; } }
@media(max-width:1100px) and (min-width:801px) { .app { grid-template-columns:148px minmax(0,1fr); gap:24px; padding-inline:24px; }.hero { padding:28px; grid-template-columns:1fr; }.hero-art { display:none; }.hero-title { font-size:38px; }.banners { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; }.step { display:flex; gap:18px; }.reviews { grid-auto-columns:calc((100% - 14px)/2); } }
@media(max-width:800px) {
 .app { display:block; padding:0 20px calc(104px + var(--safe-bottom)); }
 .topbar { min-height:82px; margin-bottom:24px; padding-top:var(--safe-top); gap:8px; }.brand { font-size:18px; gap:8px; }.brand-mark { width:32px; height:32px; }
 .theme-control select { width:85px; }.language-switch,.theme-control select,.balance-chip { height:38px; min-width:38px; padding:0 9px; font-size:11px; }.balance-chip { max-width:110px; }
 .tabbar { position:fixed; z-index:30; bottom:0; top:auto; left:0; right:0; flex-direction:row; justify-content:center; gap:0; border-top:1px solid var(--border-strong); padding:8px 10px calc(8px + var(--safe-bottom)); background:var(--panel); }
 .tabbar::before,.tab.active::after { display:none; }.tab { flex:1; max-width:100px; flex-direction:column; justify-content:center; gap:5px; padding:7px 2px; min-height:54px; font-size:9px; border-radius:10px; }.tab svg { width:20px; height:20px; }.badge-dot { top:5px; left:calc(50% + 6px); }
 .hero { padding:28px; grid-template-columns:1.3fr 1fr; min-height:320px; }.hero-title { font-size:34px; letter-spacing:-1.2px; }.hero-art { transform:scale(.82); transform-origin:center; }.hero-sub { font-size:12px; }
 .section { margin:28px 0; }.section-title { font-size:20px; }.banners { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.banner { padding:18px; }.banner-title { font-size:15px; }
 .reviews { grid-auto-columns:calc((100% - 14px)/2); }.steps { gap:10px; }.step { padding:18px; }
 .sticky-buy { bottom:calc(82px + var(--safe-bottom)); }.toast-wrap { bottom:calc(88px + var(--safe-bottom)); }
}
@media(max-width:560px) {
 .hero { grid-template-columns:1fr; padding:28px 24px 0; min-height:0; }.hero-title { font-size:36px; }.hero-sub { max-width:300px; }.hero-eyebrow { font-size:9px; }.hero-art { height:175px; width:240px; margin:-6px auto 0; transform:scale(.68); transform-origin:top center; }.hero-chips { margin-top:18px; }.hero-action.btn { width:100%; justify-content:space-between; }
 .hero-art .art-reward { bottom:-50px; }.hero-art .tile-small { top:110px; }.hero-art .tile-front { top:20px; }.hero-art .tile-back { top:0; }
 .product-grid { grid-template-columns:1fr; gap:16px; }.product-card:only-child { display:flex; }.product-card:only-child .product-media { height:auto; min-height:0; aspect-ratio:16/9; }.product-body { padding:22px; gap:12px; }.product-title { font-size:19px; }.product-card:only-child .media-symbol { width:56px; height:56px; border-radius:17px; }.product-card:only-child .media-wordmark { font-size:14px; }
 .banners { display:flex; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:10px; gap:12px; scrollbar-width:thin; }.banner { flex:0 0 86%; scroll-snap-align:start; padding:22px; }.banner-title { font-size:18px; }.banner-sub { font-size:12px; }.banner-cta { font-size:12px; }
 .steps { grid-template-columns:1fr; }.step { display:flex; gap:18px; padding:20px; }.step-num { margin:0; }.step-title { font-size:13px; }.step-text { font-size:12px; }
 .reviews { grid-auto-columns:86%; }.review { padding:22px; }.review-text { font-size:13px; }
 .trust { padding-inline:6px; }.trust-value { font-size:21px; }.trust-label { font-size:9px; }
 .card,.wallet-card,.pay-card,.vault { padding:20px; }.rewards-card { padding:24px; }.topup-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }.topup-form { grid-template-columns:1fr; }
 .product-hero .banner-title { font-size:26px; }.btn-row { grid-template-columns:1fr; }.pay-value { font-size:15px; }.copy-btn { padding:9px; }.order-item { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; padding:18px; }.order-right { grid-column:2; text-align:left; margin:0; }.order-right .small { display:inline-block; margin-left:8px; }.reward-history { align-items:flex-start; }
 .checkout-summary .row { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; } .checkout-summary .price { grid-column:2; margin:0; }
}
@media(max-width:370px) {
 .app { padding-inline:14px; }.topbar { flex-wrap:wrap; column-gap:6px; row-gap:8px; padding-block:16px; }.brand { font-size:16px; gap:6px; }.brand-mark { width:28px; height:28px; }.theme-control select { width:74px; }.language-switch,.theme-control select,.balance-chip { padding-inline:7px; min-width:32px; height:36px; font-size:10px; }.balance-chip { max-width:70px; }
 .hero { padding:24px 20px 0; }.hero-title { font-size:32px; }.hero-chips { gap:10px; font-size:9px; }.section-title { font-size:19px; }.product-body { padding:18px; }.price { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.reward-ledger > .section-title { margin-bottom:18px; }

/* Mobile controls: readable native fields, safe tap targets and keyboard space. */
#balance-chip-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#checkout-reward { margin:16px 0; }
@media(max-width:560px) {
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"brand brand balance" "theme theme language"; gap:10px; padding:calc(14px + var(--safe-top)) 0 16px; }
  .topbar-spacer { display:none; }
  .brand { grid-area:brand; min-width:0; }
  #brand-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .balance-chip { grid-area:balance; height:44px; max-width:130px; font-size:12px; }
  .theme-control { grid-area:theme; }
  .theme-control select { width:100%; min-height:44px; font-size:16px; padding-inline:12px; }
  .language-switch { grid-area:language; min-width:48px; height:44px; font-size:13px; }
  .copy-btn,.preset { min-height:44px; }
  .copy-btn { min-width:44px; }
  .hero-chips { font-size:11px; gap:12px; }
  .meta { font-size:11px; }
  .chip,.status-pill { line-height:1.5; }
  .pay-row { align-items:flex-start; }
  .pay-row .copy-btn { align-self:center; }
  .row { flex-wrap:wrap; }
  .row .grow { flex-basis:120px; }
  .qty-stepper { margin-left:auto; }
  .tab { font-size:10px; }
  .sticky-buy { bottom:calc(88px + var(--safe-bottom)); }
  .input,.textarea { scroll-margin-block:24px 120px; }
  html[data-keyboard="open"] .tabbar { display:none; }
  html[data-keyboard="open"] .sticky-buy { position:static; }
}

.zen-exchange { position:relative; z-index:1; display:grid; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid #ffffff30; }
.zen-exchange label { font-size:12px; color:#e7f2ff; }
.zen-exchange .input { background:#ffffff; color:#172438; border-color:#ffffff50; }
.zen-exchange .btn { background:#fff; color:#0758b3; }
.zen-exchange .small { color:#e7f2ff; }

/* Blue club: luminous campaign surfaces on soft charcoal, shared across themes. */
.topbar { border-bottom:0; }
.language-switch,.theme-control select,.balance-chip { border-radius:999px; border-color:var(--border); }
.balance-chip { background:var(--grad-brand); color:white; border-color:#58bbff55; }
.balance-chip-icon { display:inline; margin-right:7px; }
.tab.active { background:var(--grad-brand); color:white; box-shadow:0 6px 22px #087ff025; }
.tab.active::after { display:none; }
.hero { border-radius:30px; min-height:330px; background:radial-gradient(ellipse at 90% 65%,#47baff90,transparent 48%),linear-gradient(115deg,#0946b4,#087bf2 65%,#27b0ff); border-color:#93d4ff55; color:white; box-shadow:inset 0 1px #ffffff35,0 20px 65px #007fff16; }
.hero-title { font-weight:750; }
.hero-title em { color:#b5e6ff; }
.hero-sub,.hero-chips { color:#e0efff; }
.hero-eyebrow { background:#fff; color:#0864c7; padding:6px 10px; border-radius:8px; letter-spacing:.7px; }
.hero-action.btn { color:#0765cf; background:white; box-shadow:0 5px 20px #003a8c30; }
.hero-art { height:280px; isolation:isolate; }
.zen-coin { position:absolute; width:204px; height:204px; left:50%; top:32px; transform:translateX(-50%) rotate(-18deg); border-radius:50%; padding:13px; background:linear-gradient(145deg,#eefcff,#64caff 22%,#137cdb 60%,#c9f5ff); box-shadow:inset -5px -7px 7px #00479990,inset 3px 3px 5px #fff,14px 21px 0 #0053b6,20px 30px 45px #003c8b80,0 0 65px #9ae3ff70; }
.zen-coin-face { height:100%; border-radius:50%; border:2px solid #b0eaff; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 25% 15%,#a2e7ff,#2597ff 40%,#0750ce); box-shadow:inset 0 5px 15px #00469c88; }
.zen-coin-face svg { width:78px; height:78px; filter:drop-shadow(0 5px 0 #0576d4); color:#e4faff; }
.zen-coin-face span { font-size:23px; font-weight:800; letter-spacing:6px; margin-left:6px; text-shadow:0 2px #096cc3; }
.zen-orbit { position:absolute; border:1px solid #d4f3ff50; border-radius:50%; width:310px; height:185px; top:74px; left:50%; transform:translateX(-50%) rotate(-35deg); z-index:-1; }
.orbit-two { transform:translateX(-50%) rotate(35deg); width:335px; height:240px; top:30px; border-color:#a9dfff2a; }
.orbit-spark { position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:linear-gradient(145deg,#d1f3ff,#2da8ff); border:1px solid #e7faff90; box-shadow:0 10px 25px #0044a744; color:#0758c9; }
.spark-one { right:0; top:12px; transform:rotate(14deg); }.spark-two { left:0; bottom:27px; transform:rotate(-16deg); }
.art-reward { bottom:0; right:0; color:white; background:#064badba; border-color:#a0dfff55; border-radius:18px; backdrop-filter:blur(14px); }.art-reward small { color:#bbdfff; }
.banners { gap:12px; }
.banner { position:relative; isolation:isolate; overflow:hidden; min-height:170px; border-radius:26px; border:1px solid #ffffff25; padding:22px; padding-right:26%; background:linear-gradient(120deg,#0d64de,#40baff); color:white; }
.banner:nth-child(3n+2) { background:linear-gradient(115deg,#303cc0,#809cff); }.banner:nth-child(3n+3) { background:linear-gradient(115deg,#075aa9,#17bce9); }
.banner::after { content:''; position:absolute; z-index:-1; inset:0; background:repeating-linear-gradient(115deg,transparent 0 55px,#ffffff08 55px 90px); }
.banner-eyebrow { color:#0758b4; background:#fff; border-radius:7px; padding:4px 8px; font-size:9px; letter-spacing:.5px; }
.banner-title { color:#fff; font-size:21px; font-weight:720; position:relative; z-index:1; }.banner-sub { color:#edf6ff; position:relative; z-index:1; }.banner-cta { color:white; }
.banner-art { position:absolute; right:-22px; bottom:5px; width:125px; height:125px; border-radius:34px; display:grid; place-items:center; background:linear-gradient(140deg,#ffffffa0,#ffffff12); border:1px solid #ffffff60; transform:rotate(-20deg); box-shadow:inset 0 2px 3px #fff8,7px 12px 0 #003c8725,0 15px 30px #00296525; z-index:-1; }
.banner-art svg { width:65px; height:65px; color:white; filter:drop-shadow(0 6px 1px #005bac40); }
.product-card,.card,.wallet-card,.pay-card,.vault { border-radius:26px; }
.product-card { background:linear-gradient(150deg,var(--panel-2),var(--panel) 55%); }
.product-media { border-radius:22px; width:calc(100% - 16px); margin:8px 8px 0; }
.product-media .badge { background:#fff; color:#1467ba; border:0; border-radius:7px; font-weight:750; }
.product-card:only-child .product-media { width:calc(100% - 16px); height:calc(100% - 16px); margin:8px; }
.product-footer { color:white; background:var(--grad-brand); border-radius:999px; min-height:46px; }
.cat { border-radius:999px; }.cat.active { background:var(--brand); color:white; }
.card,.pay-card,.wallet-card { box-shadow:inset 0 1px var(--border); }
.input,.textarea,select.input { border-radius:16px; border-color:var(--border); }
.rewards-card { background:radial-gradient(ellipse at 100% 0,#84daff70,transparent 55%),linear-gradient(120deg,#064ec4,#128ffd); border-radius:28px; border:1px solid #a1dfff55; }
.review,.step,.order-item,.feature-list { border-radius:22px; }
.faq-item { background:var(--panel); border:1px solid var(--border); padding:20px; margin-bottom:8px; border-radius:20px; }
:root[data-theme="light"] .product-card { background:var(--panel); }
@media(min-width:801px) { .banner { padding-right:25%; }.banner-art { width:100px; height:100px; right:-35px; }.banner-title { font-size:18px; } }
@media(max-width:800px) {
 .tabbar { left:12px; right:12px; bottom:calc(8px + var(--safe-bottom)); border:1px solid var(--border-strong); border-radius:26px; padding:6px; background:var(--panel); box-shadow:0 10px 40px #0004; }
 .tab { border-radius:20px; }.tab.active { box-shadow:none; }
}
@media(max-width:560px) {
 .app { padding-inline:14px; }.topbar { margin-bottom:16px; }
 .hero { padding:24px 22px 18px; border-radius:28px; display:block; }
 .hero-copy { padding-bottom:0; }.hero-title { font-size:32px; max-width:280px; margin:18px 0 12px; }.hero-sub { max-width:260px; font-size:12px; }
 .hero-art { width:100%; height:230px; margin:8px 0 10px; transform:none; }
 .zen-coin { width:164px; height:164px; top:20px; padding:11px; }.zen-coin-face svg { width:60px; height:60px; }.zen-coin-face span { font-size:18px; }
 .zen-orbit { width:250px; height:155px; top:35px; }.orbit-two { width:270px; height:185px; top:20px; }
 .hero-art .art-reward { bottom:0; right:12px; padding:10px 14px; }.spark-one { right:9px; top:5px; }.spark-two { left:9px; bottom:30px; }
 .hero-action.btn { width:100%; }.hero-chips { gap:15px; margin-top:14px; }
 .banners { display:grid; grid-template-columns:1fr; overflow:visible; padding-bottom:0; }
 .banner { min-height:150px; padding:20px 120px 20px 20px; gap:9px; border-radius:25px; }.banner-title { font-size:20px; }.banner-sub { font-size:11px; }.banner-art { right:-7px; bottom:15px; }
 .product-card:only-child .product-media { width:calc(100% - 16px); height:auto; margin:8px 8px 0; }
 .product-body { padding:20px; }.section { margin:24px 0; }
}

/* Frosted surfaces: opaque base remains legible without backdrop-filter support. */
:root { --glass:linear-gradient(135deg,#ffffff0d,#ffffff03),#111a29e8; --glass-edge:#b2d6ff24; --glass-highlight:inset 0 1px 0 #e3f1ff1c; }
:root[data-theme="light"] { --glass:linear-gradient(135deg,#ffffffc9,#ffffff70),#e9f0fae8; --glass-edge:#ffffffdd; --glass-highlight:inset 0 1px 0 #fff; }
body { background:radial-gradient(ellipse at 95% 5%,#1474ce16,transparent 45%),radial-gradient(ellipse at 0 45%,#3265df0c,transparent 45%),var(--bg); }
.hero { background:radial-gradient(ellipse at 90% 35%,#3d9fff25,transparent 65%),var(--glass); color:var(--text); border:1px solid var(--glass-edge); box-shadow:var(--glass-highlight),0 18px 50px #00000018; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.hero::after { content:''; pointer-events:none; position:absolute; top:0; left:10%; width:65%; height:1px; background:linear-gradient(90deg,transparent,#c5e7ff88,transparent); }
.hero-title em { color:var(--brand-soft); }.hero-title { font-weight:680; letter-spacing:-1.3px; }
.hero-sub,.hero-chips { color:var(--muted); }
.hero-eyebrow { color:var(--brand-soft); background:#599dff12; border:1px solid var(--glass-edge); border-radius:999px; font-size:9px; }
.hero-action.btn { background:linear-gradient(140deg,#429ef1,#166dda); color:white; border:1px solid #a3d8ff55; box-shadow:inset 0 1px #ffffff33,0 5px 20px #0760b52a; border-radius:16px; }
.zen-coin { background:linear-gradient(135deg,#e0f3ff88,#5ca8e833 40%,#87cbff77); border:1px solid #c5e8ff90; box-shadow:inset 1px 2px 5px #e4f7ff88,inset -4px -5px 12px #00478166,8px 12px 0 #2d6eaa35,0 12px 50px #2689ee33; backdrop-filter:blur(8px); }
.zen-coin-face { background:linear-gradient(145deg,#9ad4ff33,#1c5daa30); border:1px solid #aad8ff66; box-shadow:inset 0 2px 15px #a4d9ff18; color:var(--brand-soft); }
.zen-coin-face svg { color:var(--brand-soft); filter:drop-shadow(0 2px 6px #51aaff70); }.zen-coin-face span { text-shadow:none; }
.orbit-spark { background:linear-gradient(145deg,#b6dbff40,#337abb20); color:var(--brand-soft); border-color:var(--glass-edge); box-shadow:var(--glass-highlight),0 8px 20px #0002; }
.art-reward { background:var(--glass); border-color:var(--glass-edge); color:var(--brand-soft); box-shadow:var(--glass-highlight); }.art-reward small { color:var(--muted); }
.product-card,.card,.wallet-card,.pay-card,.review,.step,.order-item,.feature-list,.faq-item { background:var(--glass); border-color:var(--glass-edge); box-shadow:var(--glass-highlight); }
:root[data-theme="light"] .product-card { background:var(--glass); }
.banner,.banner:nth-child(3n+2),.banner:nth-child(3n+3) { background:radial-gradient(ellipse at 100% 100%,#258dff2b,transparent 70%),var(--glass); border-color:var(--glass-edge); box-shadow:var(--glass-highlight); }
.banner-title { color:var(--text); }.banner-sub { color:var(--muted); }.banner-cta { color:var(--brand-soft); }.banner-eyebrow { background:#599dff12; color:var(--brand-soft); border:1px solid var(--glass-edge); }.banner::after { opacity:.25; }
.banner-art { background:linear-gradient(145deg,#bee0ff33,#4085bb0d); border-color:var(--glass-edge); box-shadow:var(--glass-highlight),5px 8px 0 #1774a915; }.banner-art svg { color:var(--brand-soft); filter:drop-shadow(0 3px 6px #309aff44); }
.language-switch,.theme-control select { background:var(--glass); border-color:var(--glass-edge); }
.product-footer { background:linear-gradient(135deg,#469dec28,#1976d414); color:var(--brand-soft); border:1px solid var(--glass-edge); border-radius:15px; }
.input,.textarea,select.input { background:var(--input); }
@media(max-width:800px) {
 .tabbar { background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-color:var(--glass-edge); box-shadow:var(--glass-highlight),0 8px 30px #0003; }
 .tab.active { background:linear-gradient(140deg,#3698ef33,#137dec18); color:var(--brand-soft); box-shadow:inset 0 1px #ffffff1c; }
}
@media(max-width:560px) {
 .hero { padding:22px 20px 16px; border-radius:26px; min-height:0; }
 .hero-title { font-size:clamp(26px,7.2vw,33px); line-height:1.14; max-width:none; margin:16px 0 12px; letter-spacing:-1px; }
 .hero-sub { max-width:none; font-size:13px; line-height:1.6; margin-bottom:18px; }
 .hero-eyebrow { font-size:8px; letter-spacing:.8px; }
 .hero-action.btn { min-height:46px; font-size:13px; }
 .hero-chips { font-size:10px; gap:14px; margin-top:14px; }
 .hero-art { height:102px; margin:18px 0 0; border-top:1px solid var(--glass-edge); }
 .zen-coin { width:77px; height:77px; padding:6px; top:16px; left:auto; right:12px; transform:rotate(-15deg); }
 .zen-coin-face svg { width:29px; height:29px; }.zen-coin-face span { font-size:10px; letter-spacing:3px; margin-left:3px; }
 .zen-orbit,.orbit-spark { display:none; }
 .hero-art .art-reward { left:0; right:auto; bottom:17px; background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0; gap:16px; }
 .art-reward span { font-size:27px; }.art-reward small { font-size:9px; letter-spacing:2px; margin-top:7px; }
 .art-reward > svg { width:18px; height:18px; }
 .banner { min-height:140px; padding-right:108px; }.banner-title { font-size:18px; }.banner-art { width:98px; height:98px; right:-10px; }.banner-art svg { width:48px; height:48px; }
 .product-body { padding:18px; }.product-title { font-size:18px; }
}

/* Distinct restrained hues keep each card recognizable within the glass system. */
.product-card:nth-child(3n+1),.banner:nth-child(3n+1) { background:radial-gradient(ellipse at 100% 0,#208ef52b,transparent 70%),var(--glass); }
.product-card:nth-child(3n+2),.banner:nth-child(3n+2) { background:radial-gradient(ellipse at 100% 0,#a279f538,transparent 70%),var(--glass); }
.product-card:nth-child(3n+3),.banner:nth-child(3n+3) { background:radial-gradient(ellipse at 100% 0,#21c5bb2b,transparent 70%),var(--glass); }
.banner:nth-child(3n+2) .banner-art svg { color:#ae9aff; }.banner:nth-child(3n+3) .banner-art svg { color:#66d9d3; }
:root[data-theme="light"] .banner:nth-child(3n+2) .banner-art svg { color:#7853cc; }
:root[data-theme="light"] .banner:nth-child(3n+3) .banner-art svg { color:#16877f; }
:root[data-theme="aurora"] { color-scheme:dark; --bg:#100f23; --panel:#1a1930; --panel-2:#27243f; --input:#211f38; --brand:#8879f5; --brand-soft:#b3a6ff; --tint:#a48cff1c; --glass:linear-gradient(135deg,#b99aff10,#45d6db08),#19172de8; --glass-edge:#c9b7ff29; --grad-brand:linear-gradient(130deg,#7f79ec,#497bdc); }
:root[data-theme="aurora"] body { background:radial-gradient(ellipse at 100% 0,#9c5ade22,transparent 50%),radial-gradient(ellipse at 0 35%,#2aa9ba14,transparent 50%),var(--bg); }
:root[data-theme="aurora"] .hero-action.btn { background:var(--grad-brand); }
.profile-identity { display:flex; align-items:center; gap:18px; padding:24px 4px 28px; }
.profile-avatar { position:relative; display:grid; place-items:center; flex:none; width:78px; height:78px; border-radius:26px; background:var(--grad-brand); border:1px solid #d2e7ff60; color:#fff; font-size:30px; font-weight:650; overflow:hidden; box-shadow:0 8px 30px #257eff22; }
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-person { min-width:0; }.profile-person h1 { font-size:24px; line-height:1.25; letter-spacing:-.6px; margin:5px 0; overflow-wrap:anywhere; }
.profile-kicker { font-size:9px; letter-spacing:1.6px; color:var(--dim); }.profile-handle { color:var(--brand-soft); font-size:13px; overflow-wrap:anywhere; }.profile-id { color:var(--dim); font-size:10px; margin-top:5px; font-variant-numeric:tabular-nums; }
.appearance .section-title { font-size:18px; }.theme-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.theme-option { min-width:0; text-align:left; padding:8px; border:1px solid var(--glass-edge); border-radius:18px; background:var(--input); color:var(--text); }
.theme-option[aria-pressed="true"] { border-color:var(--brand-soft); box-shadow:0 0 0 1px var(--brand-soft); }
.theme-option strong { display:block; font-size:13px; margin:9px 2px 2px; }.theme-option small { display:block; font-size:10px; line-height:1.4; color:var(--muted); margin:0 2px 4px; }
.theme-swatch { display:grid; grid-template-columns:1fr 1fr; gap:5px; height:76px; padding:10px; border-radius:12px; border:1px solid #ffffff18; background:radial-gradient(ellipse at 100% 0,#2e94d877,transparent),#101c2d; }
.theme-swatch i { border-radius:5px; background:#ffffff17; border:1px solid #ffffff22; }.theme-swatch i:first-child { grid-column:1/-1; background:linear-gradient(110deg,#2994e855,#46aaee22); }
.swatch-light { background:linear-gradient(130deg,#eef6ff,#d1e1f7); }.swatch-light i { background:#ffffffa0; border-color:#fff; }
.swatch-aurora { background:linear-gradient(135deg,#523570,#193f55); }
.swatch-aurora i:first-child { background:linear-gradient(110deg,#b18aff66,#50d4cf44); }
.theme-auto { display:flex; align-items:center; gap:9px; margin-top:14px; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--glass-edge); border-radius:13px; background:transparent; color:var(--muted); text-align:left; font-size:12px; }
.theme-auto svg { width:16px; height:16px; }.theme-auto svg:last-child { margin-left:auto; opacity:0; }.theme-auto[aria-pressed="true"] { color:var(--brand-soft); background:var(--tint); }.theme-auto[aria-pressed="true"] svg:last-child { opacity:1; }
@media(max-width:370px) { .appearance { padding:16px; }.theme-gallery { gap:7px; }.theme-option { padding:6px; }.theme-swatch { padding:6px; height:66px; }.profile-avatar { width:64px; height:64px; border-radius:21px; }.profile-person h1 { font-size:21px; } }