/* =========================================================
   GateWallet — application shell & components.
   Section map:
     1  App shell (topbar / view / tabbar)
     2  Splash screen
     3  Notification stack
     4  Modal (css/sheets.css)
     5  Legacy toast (sheets moved to css/sheets.css)
     6  Controls & atoms
     7  Live surfaces (ticker strip, tracker, order book)
     8  Promo banners (moved to css/promo.css)
     9  Rewards centre
    10  Markets
    11  Trade
    12  Orders & positions
    13  Assets
    14  Profile
   ========================================================= */

/* =========================================================
   1. App shell
   ========================================================= */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  flex: 0 0 auto;
  min-height: var(--topbar-h);
  padding: calc(var(--safe-t) + 6px) 12px 6px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  position: relative; z-index: 5;
  transition:
    min-height var(--dur) var(--ease-out),
    padding var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.topbar h1 {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.2px;
  animation: slideInRight var(--dur) var(--ease-out) both;
}
.topbar .spacer { flex: 1; }

/* Title-less bar (Profile / Assets / Orders): shrink, keep icons tappable. */
.topbar.empty {
  min-height: var(--topbar-min);
  padding-top: calc(var(--safe-t) + 3px);
  padding-bottom: 3px;
  border-bottom-color: transparent;
}
/* No content at all — collapse to the safe-area inset only. */
.topbar:empty {
  min-height: var(--safe-t);
  padding: var(--safe-t) 0 0;
  border-bottom-color: transparent;
}

.view {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.view.no-scroll { overflow: hidden; }

/* ---------- Bottom navigation: floating dock ---------- */
.tabbar {
  flex: 0 0 auto;
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 8px 12px calc(10px + var(--safe-b));
  padding: 6px;
  background: rgba(24, 25, 32, .94);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  z-index: 10;
}
/* The gold pill glides under the active tab — JS sets --ti to the tab index. */
.tabbar::before {
  content: ""; position: absolute; top: 6px; bottom: 6px;
  left: calc(6px + var(--ti, 0) * ((100% - 12px) / 5));
  width: calc((100% - 12px) / 5);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(247, 166, 0, .22), rgba(247, 166, 0, .1));
  border: 1px solid rgba(247, 166, 0, .28);
  transition: left .38s var(--ease-spring);
  pointer-events: none;
}
.tabbar button {
  position: relative; z-index: 1;
  height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-mute);
  border-radius: 18px;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabbar button.active { color: var(--accent); }
.tabbar button.active .tb-ic { color: var(--accent); }
.tabbar .tb-ic {
  width: 22px; height: 22px;
  transition: transform var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease-out);
}
.tabbar button.active .tb-ic { transform: translateY(-1px) scale(1.1); }
.tabbar button:active .tb-ic { transform: scale(.88); }
.tabbar .tb-lb {
  font-size: 9.5px; font-weight: 620; letter-spacing: .1px;
  opacity: .85; transition: opacity var(--dur-fast) var(--ease-out);
}
.tabbar button.active .tb-lb { opacity: 1; }

/* =========================================================
   2. Splash screen (Duolingo / Phantom flavour)
   ========================================================= */
#splash {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  /* Near-monochrome graphite ground — the light belongs to the mark, not the walls. */
  background: radial-gradient(130% 100% at 50% -12%, #14161E 0%, #0B0C11 52%, #07080C 100%);
  overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.splash-mesh { position: absolute; inset: 0; pointer-events: none; }
/* One faint, slow cold light high above — depth without colour noise. */
.splash-mesh::before {
  content: ""; position: absolute; top: -34%; left: 50%; width: 90vmax; height: 60vmax;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 144, 196, .09), transparent 70%);
  animation: drift 14s var(--ease-out) infinite;
}
/* A whisper of warmth behind the mark, nothing more. */
.splash-mesh::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46vmax; height: 46vmax;
  transform: translate(-50%, -58%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 166, 0, .055), transparent 68%);
}

.splash-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 24px;
}

.splash-mark {
  position: relative;
  width: 110px; height: 110px;
  display: grid; place-items: center;
  /* The mark is a bare glyph now — the wrapper carries only motion and the
     soft gold light behind it. No plate, no border, no box-shadow. */
  animation: popIn .62s var(--ease-spring) both, floatY 3.4s var(--ease-out) .7s infinite;
}
.splash-mark svg { position: relative; width: 100%; height: 100%; display: block; }
/* Soft gold glow BEHIND the glyph: a blurred radial, breathing slowly. */
.splash-mark::before {
  content: ""; position: absolute; inset: -44px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 166, 0, .22), transparent 70%);
  animation: splashGlow 3s var(--ease-out) infinite;
}
@keyframes splashGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Wordmark: one <span> per letter, JS sets --i for the stagger. */
.splash-word { display: flex; gap: 1px; margin-top: 4px; }
.splash-word span {
  font-size: 27px; font-weight: 800; letter-spacing: -.8px; color: #fff;
  animation: rowIn .46s var(--ease-spring) both;
  animation-delay: calc(240ms + var(--i, 0) * 42ms);
}
.splash-tag {
  font-size: 12.5px; color: rgba(255, 255, 255, .58); letter-spacing: .3px;
  animation: fadeIn .5s var(--ease-out) .68s both;
}

.splash-status {
  position: absolute; left: 0; right: 0; bottom: calc(58px + var(--safe-b));
  text-align: center; font-size: 12px; color: rgba(255, 255, 255, .45);
  transition: opacity var(--dur) var(--ease-out);
}
.splash-status.swap { opacity: 0; }

.splash-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(40px + var(--safe-b));
  width: 120px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.splash-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #C97C00, #F7A600);
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* While the overlay is up nothing behind it may scroll. */
html.splashing, html.splashing body { overflow: hidden; }

/* Exit: the splash lifts and dissolves to reveal the app. */
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* =========================================================
   3. Notification stack (rich cards, not plain toasts)
   ========================================================= */
.notify-stack {
  position: fixed; z-index: 200;
  top: calc(var(--safe-t) + 8px); left: 8px; right: 8px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.notify-stack > .notify-card:nth-child(n + 4) { display: none; }

.notify-card {
  --nc: var(--brand-1);
  --nc-soft: var(--brand-1-soft);
  position: relative; pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 34px 13px 14px;
  border-radius: var(--radius);
  background: var(--notify-bg);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  touch-action: pan-y;
  will-change: transform, opacity;
  animation: notifyIn .42s var(--ease-spring) both;
}
.notify-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--nc);
}
.notify-card.success { --nc: var(--up);      --nc-soft: var(--up-soft); }
.notify-card.error   { --nc: var(--down);    --nc-soft: var(--down-soft); }
.notify-card.info    { --nc: var(--brand-2); --nc-soft: var(--brand-2-soft); }
.notify-card.trade   { --nc: var(--brand-1); --nc-soft: var(--brand-1-soft); }
.notify-card.warn    { --nc: #E8A33D;        --nc-soft: rgba(232, 163, 61, .16); }
.notify-card.reward  { --nc: var(--brand-1); --nc-soft: var(--brand-1-soft); }

.notify-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--nc-soft); color: var(--nc);
  animation: popIn .5s var(--ease-spring) 60ms both;
}
.notify-ic svg { width: 16px; height: 16px; }

.notify-body { flex: 1; min-width: 0; }
.notify-title { font-size: 13.5px; font-weight: 650; letter-spacing: -.1px; }
.notify-msg {
  font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.42;
  overflow-wrap: anywhere;
}
.notify-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; color: var(--text-mute);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.notify-close:active { background: var(--bg-hover); color: var(--text); }
.notify-close svg { width: 13px; height: 13px; }

.notify-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-soft); }
.notify-progress > i {
  display: block; height: 100%; background: var(--nc);
  transform-origin: left;
  /* barGrow reversed = countdown from full to empty. */
  animation: barGrow var(--pdur, 3200ms) linear reverse forwards;
}

/* Drag-to-dismiss: JS translates the card, so kill the transition mid-drag. */
.notify-card .notify-emoji { font-size: 16px; line-height: 1; }
/* Cards behind the front one recede; ui.js owns their transform, so only fade here. */
.notify-card.is-back { opacity: .84; }
.notify-card.dragging { transition: none; animation: none; }
.notify-card.settling { transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.notify-card.out { animation: notifyOut .26s var(--ease-in) forwards; }

/* =========================================================
   4. Modal + 5. Bottom sheet — moved to css/sheets.css
   ========================================================= */

/* Legacy toast root — notify() renders into .notify-stack, toast() still works. */
.toast-root {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 86%; background: var(--glass-bg); color: var(--text);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 550;
  box-shadow: var(--shadow-2);
  animation: slideUp .24s var(--ease-out) both;
  display: flex; align-items: center; gap: 8px;
}
.toast.ok  { border-color: var(--up-line); }
.toast.err { border-color: var(--down-line); }
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* =========================================================
   6. Controls & atoms
   ========================================================= */
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--text-dim);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.icon-btn:active { background: var(--bg-hover); transform: scale(.92); }
.icon-btn.on { color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; }

.badge {
  font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent); letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.badge.live { background: var(--up-soft); color: var(--up); }
.badge.demo { background: var(--bg-hover); color: var(--text-dim); }
.badge.violet { background: var(--brand-2-soft); color: var(--brand-2); }
.badge .pulse-dot { width: 5px; height: 5px; background: currentColor; }

.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; }
.chip {
  flex: 0 0 auto; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--text-dim);
  font-size: 12.5px; font-weight: 550; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(.95); }
.chip.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(247, 166, 0, .3); }

.seg { display: flex; background: var(--bg-elev); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button {
  flex: 1; padding: 7px 0; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.seg button:active { transform: scale(.96); }
.seg button.active { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-1); }

.tabs {
  display: flex; gap: 18px; padding: 0 12px;
  border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none;
}
.tabs button {
  position: relative; padding: 11px 0; font-size: 14px; font-weight: 600;
  color: var(--text-dim); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabs button.active { color: var(--text); }
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease-spring);
}
.tabs button.active::after { transform: scaleX(1); }

.card {
  background: var(--bg-card); border-radius: var(--radius);
  margin: 10px 12px; padding: 14px;
  box-shadow: var(--shadow-card);
}

/* Empty state — scoped so it never collides with .topbar.empty. */
:where(.view, .sheet, .sheet-content, .modal-card) .empty {
  padding: 48px 24px; text-align: center; color: var(--text-mute);
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}
:where(.view, .sheet, .sheet-content, .modal-card) .empty svg {
  width: 46px; height: 46px; margin: 0 auto 12px; opacity: .5;
}
:where(.view, .sheet, .sheet-content, .modal-card) .empty p { margin: 0; font-size: 13px; }

.btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: var(--radius-sm); font-weight: 650; font-size: 15px;
  user-select: none; -webkit-user-select: none;
  background: var(--bg-hover); color: var(--text); width: 100%;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.btn:active { filter: brightness(.92); transform: scale(.975); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.grad { background: var(--brand-grad-r); color: #17110A; }
.btn.buy   { background: var(--up); color: #fff; }
.btn.sell  { background: var(--down); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-dim); }
.btn.sm { height: 32px; font-size: 13px; border-radius: 8px; }
.btn.auto { width: auto; padding: 0 16px; }
.btn:disabled { opacity: .45; transform: none; filter: none; }

.switch {
  width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--bg-hover); position: relative; flex: 0 0 auto;
  transition: background var(--dur) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-spring);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(16px); }

.section-title {
  padding: 14px 12px 6px; font-size: 12px; color: var(--text-mute);
  font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: center; gap: 8px;
}
.section-title .spacer { flex: 1; }

.coin {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--bg-hover); letter-spacing: -.3px;
  transition: transform var(--dur) var(--ease-spring);
}
.coin.long { font-size: 9px; }

/* Real coin logos (core/coins.js). The image fills the circle; the ring keeps
   light logos legible on dark surfaces. */
.coin.has-img { background: var(--bg-hover); overflow: hidden; }
.coin.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.coin.sm { width: 24px; height: 24px; font-size: 9px; }

/* =========================================================
   7. Live surfaces
   ========================================================= */

/* ---------- Running ticker strip: floating glass pills ---------- */
.ticker-marquee {
  padding: 10px 0 4px;
  background: transparent;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 4px; padding: 6px 11px 6px 7px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  transition: border-color .35s, box-shadow .35s;
}
.ticker-item b { font-weight: 650; color: var(--text); }
.ticker-item .tk-p { color: var(--text-dim); }
.ticker-item .tk-c {
  font-weight: 650; font-size: 10.5px;
  padding: 2px 7px; border-radius: 999px;
}
.ticker-item .tk-c.up { color: var(--up); background: var(--up-soft); }
.ticker-item .tk-c.down { color: var(--down); background: var(--down-soft); }
/* A price tick lights the pill's rim in the direction of the move. */
.ticker-item.tick-up { border-color: rgba(32, 178, 108, .5); box-shadow: 0 4px 16px rgba(32, 178, 108, .2); }
.ticker-item.tick-down { border-color: rgba(239, 69, 74, .5); box-shadow: 0 4px 16px rgba(239, 69, 74, .18); }

/* ---------- Live P&L tracker ---------- */
.tracker-card {
  position: relative; overflow: hidden;
  margin: 10px 12px; padding: 14px 15px;
  border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
}
.tracker-card::before {
  content: ""; position: absolute; top: -60%; right: -30%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-1-soft) 0%, transparent 70%);
  pointer-events: none;
}
.tracker-hd {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-dim); font-weight: 550;
}
.tracker-hd .spacer { flex: 1; }
.tracker-val {
  position: relative;
  font-size: 27px; font-weight: 700; letter-spacing: -1px; margin-top: 5px;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease-out);
}
.tracker-delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 650;
  background: var(--bg-hover); color: var(--text-dim);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tracker-delta.up   { background: var(--up-soft); color: var(--up); }
.tracker-delta.down { background: var(--down-soft); color: var(--down); }
.tracker-spark { width: 100%; height: 40px; display: block; margin-top: 10px; }
.tracker-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}
.tracker-cell { font-size: 11px; color: var(--text-mute); }
.tracker-cell b {
  display: block; margin-top: 2px; font-size: 14px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Order book (rows are persistent, updated in place) ---------- */
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; }
.book-hd { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-mute); margin-bottom: 4px; }
.book-rows { display: flex; flex-direction: column; gap: 1px; }
.book-row {
  position: relative; display: flex; justify-content: space-between;
  font-size: 11.5px; padding: 2.5px 4px; border-radius: 3px; overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out);
}
.book-row .bar {
  position: absolute; top: 0; bottom: 0; opacity: .18; width: 0;
  transition: width var(--dur) var(--ease-out);
}
.book-row.bid .bar { left: 0; background: var(--up); }
.book-row.ask .bar { right: 0; background: var(--down); }
.book-row span { position: relative; }
.book-row .px { transition: color var(--dur-fast) var(--ease-out); }
.book-row.bid .px, .book-row .px.bid { color: var(--up); }
.book-row.ask .px, .book-row .px.ask { color: var(--down); }
.book-row .sz { color: var(--text-dim); }
.book-row:active { background: var(--bg-hover); }
/* Row changed on the last update — flash it in its own direction. */
.book-row.hit { animation: flashUp .45s var(--ease-out); }
.book-row.ask.hit { animation: flashDown .45s var(--ease-out); }

.book-mid {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; justify-content: center;
  padding: 6px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.book-mid b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out); }
.book-mid span { font-size: 11px; color: var(--text-mute); }

/* Spread row + grouping control for the standalone book layouts. */
.book-spread {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px; font-size: 11px; color: var(--text-mute);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.book-group {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 8px; background: var(--bg-elev);
  font-size: 11.5px; font-weight: 600; color: var(--text-dim);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.book-group:active { transform: scale(.95); background: var(--bg-hover); }
.book-group svg { width: 11px; height: 11px; }

/* Compact book embedded in cards elsewhere in the app. */
.book-card {
  margin: 10px 12px; padding: 10px 12px 12px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.book-card .book-grid { padding: 6px 0 0; }

/* ---------- Mini order book (core/minibook.js — any symbol, any screen) ---------- */
.minibook { position: relative; }
.minibook .book-grid { padding: 8px 0 0; gap: 10px; }
.minibook .book-hd { margin-bottom: 3px; }
.minibook .book-row { font-size: 11px; padding: 2px 4px; }
.minibook .book-row .px,
.minibook .book-row .sz { flex: 1 1 0; }
.minibook .book-row.bid .sz,
.minibook .book-row.ask .px { text-align: right; }
/* Best bid/ask carries the eye to the spread. */
.minibook .book-row.best .px { font-weight: 700; }
.minibook .book-row.best .bar { opacity: .28; }

.minibook-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.minibook-pair { font-size: 12.5px; font-weight: 650; letter-spacing: .2px; }
.minibook-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--text-mute);
}
.minibook-col { min-width: 0; }

.minibook-spread {
  margin: 8px -12px 0; padding: 6px 12px 0;
  border-bottom: 0;
}
.minibook-spread b { color: var(--text-dim); font-weight: 600; }
.minibook-spread .mb-mid { color: var(--text); font-variant-numeric: tabular-nums; }

/* Dense contexts: no card chrome, no header, tighter rows. */
.minibook.compact { margin: 0; padding: 8px 10px 10px; border-radius: var(--radius-sm); }
.minibook.compact .minibook-top { display: none; }
.minibook.compact .book-grid { padding: 0; gap: 8px; }
.minibook.compact .book-row { font-size: 10.5px; padding: 1.5px 3px; }
.minibook.compact .minibook-spread { margin: 6px -10px 0; padding: 5px 10px 0; }

.minibook.tappable .book-row { cursor: pointer; }

/* Loading / empty states — the card stays a card either way. */
.minibook-skel { display: none; grid-template-columns: 1fr 1fr; gap: 5px 10px; padding: 10px 0 2px; }
.minibook-skel i { display: block; height: 9px; }
.minibook-note {
  display: none; padding: 16px 0 12px;
  text-align: center; font-size: 11.5px; color: var(--text-mute);
}
.minibook.loading .book-grid,
.minibook.loading .minibook-spread { display: none; }
.minibook.loading .minibook-skel { display: grid; }
.minibook.empty .book-grid,
.minibook.empty .minibook-spread,
.minibook.empty .minibook-skel { display: none; }
.minibook.empty .minibook-note { display: block; }
.minibook.empty .minibook-tag { opacity: .5; }

/* One-line buy/sell pressure bar for list rows. */
.depth-meter { display: flex; align-items: center; gap: 6px; width: 100%; }
.depth-meter .dm-track {
  display: flex; flex: 1 1 auto; height: 4px; min-width: 0;
  border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-elev);
}
.depth-meter .dm-fill {
  display: block; height: 100%; width: 50%;
  transition: width var(--dur-slow) var(--ease-out);
}
.depth-meter .dm-fill.bid { background: var(--up); }
.depth-meter .dm-fill.ask { background: var(--down); }
.depth-meter .dm-val {
  flex: 0 0 auto; min-width: 26px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.depth-meter .dm-val.bid { color: var(--up); }
.depth-meter .dm-val.ask { color: var(--down); text-align: right; }
.depth-meter.loading .dm-fill,
.depth-meter.empty .dm-fill { opacity: .3; }

/* =========================================================
   8. Promo banners — moved to css/promo.css (pr-* namespace).
   The promo system is now a per-surface ad platform owned by
   js/core/banners.js: hero deck (markets), voucher (assets),
   membership strip (profile).
   ========================================================= */

/* =========================================================
   9. Rewards centre — one quiet hairline surface
   No cards, no hero: an earned figure, a check-in row, a task
   list. Separation is hairlines and spacing; gold appears only
   on live numbers and the single actionable control.
   ========================================================= */
.rw-view, .rw-sheet { --rw-line: var(--line-soft); }
/* Inside a bottom sheet the hairlines borrow the overlay tokens. */
.sheet .rw-sheet { --rw-line: var(--ov-hairline, var(--line-soft)); }
.rw-view { padding-bottom: 28px; }

/* ---------- header: eyebrow, the number, one dim line ---------- */
.rw-head {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 16px 18px;
  border-bottom: 1px solid var(--rw-line);
}
.rw-head-main { flex: 1; min-width: 0; }
.rw-eyebrow {
  font-size: 10.5px; font-weight: 650; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-dim);
}
.rw-earned {
  margin-top: 7px;
  font-size: 34px; font-weight: 740; letter-spacing: -1.3px; line-height: 1.05;
}
.rw-avail { margin-top: 5px; font-size: 12px; color: var(--text-dim); }

/* Claimed-of-total ring; the arc eases in because sync() starts it at zero. */
.rw-ring { flex: 0 0 auto; }
.rw-ring .track { stroke: var(--line); }
.rw-ring .arc { stroke: var(--brand-1); transition: stroke-dashoffset .9s var(--ease-out); }
.rw-ring text {
  fill: var(--text-dim); font-size: 10px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---------- section labels: same grammar as the eyebrow ---------- */
.rw-sec {
  padding: 20px 16px 10px;
  font-size: 10.5px; font-weight: 650; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-dim);
}

/* ---------- bonus wager meter ----------
   Same hairline grammar as the check-in row: no card, no wash. The bar is the
   only wide gold element on the screen, because it is the one number standing
   between the user and their money. */
.rw-wager {
  padding: 2px 16px 15px;
  border-bottom: 1px solid var(--rw-line);
}
.rw-wg-head {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 22px;
}
.rw-wg-t {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.rw-wg-v {
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 650; color: var(--brand-1);
  font-variant-numeric: tabular-nums;
}
.rw-wager.met .rw-wg-v { color: var(--up); }
.rw-wager.idle .rw-wg-v { color: var(--text-mute); }
.rw-bar.rw-wg-bar { margin-top: 9px; height: 4px; border-radius: 2px; }
.rw-bar.rw-wg-bar > i { border-radius: 2px; }
.rw-wager.met .rw-wg-bar > i { background: var(--up); }
.rw-wg-note {
  margin: 9px 0 0;
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
}

/* ---------- daily check-in: one compact row ---------- */
.rw-checkin {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 2px 16px 14px;
  border-bottom: 1px solid var(--rw-line);
}
.rw-days { flex: 1; display: flex; align-items: center; gap: 8px; }
.rw-day {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.rw-day.done { background: var(--brand-1); }
.rw-day.today {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-1);
  animation: rwPulse 2.1s var(--ease-out) infinite;
}
@keyframes rwPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--brand-1), 0 0 0 0 rgba(247, 166, 0, .30); }
  50%      { box-shadow: inset 0 0 0 1.5px var(--brand-1), 0 0 0 5px rgba(247, 166, 0, 0); }
}
.rw-ci-amt {
  font-size: 13px; font-weight: 700; color: var(--brand-1); white-space: nowrap;
}

/* Gold action — the only filled control on the surface. */
.rw-claim {
  height: 28px; padding: 0 13px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.rw-claim { position: relative; }
.rw-claim::after { content: ""; position: absolute; inset: -10px; }   /* 44px+ effective hit area */
.rw-claim:active { filter: brightness(.92); }
.rw-claim:disabled { opacity: .55; }

/* Quiet resolved state ("Back tomorrow" / "All 7 collected"). */
.rw-wait {
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-mute); white-space: nowrap;
}
.rw-wait svg { width: 13px; height: 13px; }

/* ---------- tasks: hairline rows, no boxes ---------- */
.rw-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
}
.rw-row + .rw-row::before {
  content: ""; position: absolute; top: 0; left: 48px; right: 0;
  height: 1px; background: var(--rw-line);
}
.rw-row-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-dim); }
.rw-row-ic svg { width: 20px; height: 20px; }
.rw-row-main { flex: 1; min-width: 0; }
/* Dim the content, not the row: the stagger keyframe holds the row's own
   opacity at 1 (fill: both), so a claimed state set there would never paint. */
.rw-row-ic, .rw-row-main { transition: opacity var(--dur-slow) var(--ease-out); }
.rw-row.claimed .rw-row-ic, .rw-row.claimed .rw-row-main { opacity: .45; }
.rw-row-title {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rw-bar {
  height: 2px; margin-top: 8px; border-radius: 1px;
  background: var(--bg-hover); overflow: hidden;
}
.rw-bar > i {
  display: block; height: 100%; width: 0; border-radius: 1px;
  background: var(--brand-1);
  transition: width .8s var(--ease-out);
}
.rw-side { flex: 0 0 auto; min-width: 76px; display: flex; align-items: center; justify-content: flex-end; }
.rw-amt { font-size: 13px; font-weight: 650; color: var(--brand-1); white-space: nowrap; }
.rw-tick { display: block; color: var(--text-mute); }
.rw-tick svg { width: 16px; height: 16px; }
.rw-empty { padding: 14px 16px 18px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- compact sheet variant ---------- */
.rw-s-head {
  display: flex; align-items: baseline; gap: 7px;
  padding: 4px 16px 14px;
  border-bottom: 1px solid var(--rw-line);
}
.rw-s-head b { font-size: 21px; font-weight: 740; letter-spacing: -.6px; }
.rw-s-head span { font-size: 12px; color: var(--text-dim); }
.rw-sheet .rw-sec { padding-top: 16px; }
.rw-s-open {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; margin-top: 10px;
  border-top: 1px solid var(--rw-line);
  color: var(--accent); font-size: 14.5px; font-weight: 600;
}

/* ---------- legacy reward atoms ----------
   The rewards view no longer uses these, but the profile entry card
   (views/profile.js) and the thin meters in trade.js / orders.js still do. */
.reward-card {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px; padding: 13px 14px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out);
}
.reward-card:active { transform: scale(.985); }
.reward-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-1-soft); color: var(--brand-1);
}
.reward-ic svg { width: 20px; height: 20px; }
.reward-main { flex: 1; min-width: 0; }
.reward-title {
  font-size: 14px; font-weight: 650; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reward-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; line-height: 1.4; }
.reward-amount {
  font-size: 12.5px; font-weight: 700; color: var(--brand-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.reward-progress {
  height: 5px; border-radius: 3px; background: var(--bg-hover);
  overflow: hidden; margin-top: 8px;
}
.reward-progress > i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #C97C00, #FFC24A);
  transition: width var(--dur-slow) var(--ease-out);
}

/* =========================================================
   10. Markets
   ========================================================= */
.search-row { padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border-radius: var(--radius-sm); padding: 0 10px; height: 36px;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.search:focus-within { border-color: rgba(247, 166, 0, .35); background: var(--bg-card); }
.search svg { width: 16px; height: 16px; color: var(--text-mute); flex: 0 0 auto; }
.search input { flex: 1; font-size: 14px; min-width: 0; }
.search input::placeholder { color: var(--text-mute); }

.mk-head {
  display: grid; grid-template-columns: 1.35fr 1fr .85fr;
  padding: 6px 12px; font-size: 11px; color: var(--text-mute);
}
.mk-head button {
  color: inherit; font-size: 11px; display: inline-flex; align-items: center; gap: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.mk-head .r { text-align: right; justify-content: flex-end; }
.mk-head button.on { color: var(--accent); }
.mk-head svg { width: 10px; height: 10px; transition: transform var(--dur) var(--ease-out); }
.mk-head button.desc svg { transform: rotate(180deg); }

.mk-row {
  display: grid; grid-template-columns: 1.35fr 1fr .85fr; align-items: center;
  padding: 11px 12px; gap: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.mk-row:active { background: var(--bg-hover); }
.mk-sym { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mk-star { color: var(--text-mute); flex: 0 0 auto; transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring); }
.mk-star.on { color: var(--accent); transform: scale(1.12); }
.mk-star:active { transform: scale(.8); }
.mk-star svg { width: 15px; height: 15px; }
.mk-name { min-width: 0; }
.mk-name b { font-size: 14.5px; font-weight: 650; display: block; letter-spacing: -.2px; }
.mk-name b i { font-style: normal; color: var(--text-mute); font-weight: 500; font-size: 12px; }
.mk-name span { font-size: 11px; color: var(--text-mute); }
.mk-price { text-align: right; }
.mk-price b { font-size: 14.5px; font-weight: 600; display: block; transition: color var(--dur-fast) var(--ease-out); }
.mk-price span { font-size: 11px; color: var(--text-mute); }
.mk-chg {
  justify-self: end; min-width: 74px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; font-size: 13px; font-weight: 650; color: #fff;
  transition: background var(--dur) var(--ease-out);
}
.mk-chg.p { background: var(--up); }
.mk-chg.n { background: var(--down); }

.hero { padding: 4px 12px 12px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hero-card {
  flex: 0 0 46%; background: var(--bg-card); border-radius: var(--radius); padding: 11px 12px;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hero-card:active { transform: scale(.96); border-color: rgba(247, 166, 0, .3); }
.hero-card .hc-t { font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; }
.hero-card .hc-p { font-size: 17px; font-weight: 700; margin-top: 5px; transition: color var(--dur-fast) var(--ease-out); }
.hero-card .hc-c { font-size: 12px; font-weight: 600; margin-top: 2px; }
.hero-card canvas { width: 100%; height: 30px; margin-top: 6px; display: block; }

/* =========================================================
   11. Trade
   ========================================================= */
.tr-head { padding: 10px 12px 6px; display: flex; align-items: flex-start; gap: 12px; }
.tr-pair {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 700; letter-spacing: -.3px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tr-pair:active { transform: scale(.96); }
.tr-pair svg { width: 15px; height: 15px; color: var(--text-dim); }
.tr-last {
  font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15;
  transition: color var(--dur-fast) var(--ease-out);
}
.tr-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tr-stats { margin-left: auto; text-align: right; font-size: 11px; color: var(--text-mute); line-height: 1.55; }
.tr-stats b { color: var(--text-dim); font-weight: 500; }

.tf-row { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.tf-row button {
  padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tf-row button:active { transform: scale(.92); }
.tf-row button.active { background: var(--bg-hover); color: var(--accent); }
.tf-row .spacer { flex: 1; }

.chart-wrap { position: relative; height: 240px; touch-action: pan-y; }
.chart-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-hud {
  position: absolute; top: 6px; left: 10px; right: 10px;
  display: flex; gap: 10px; font-size: 10.5px; color: var(--text-mute); pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Trade tape ---------- */
.tape { padding: 0 12px 10px; }
.tape-row {
  display: grid; grid-template-columns: 1.1fr 1fr 62px; gap: 10px;
  font-size: 11.5px; padding: 3px 0; font-variant-numeric: tabular-nums;
}
.tape-row .t { color: var(--text-mute); text-align: right; }
.tape-row .a { text-align: right; color: var(--text-dim); }
/* Freshly printed trade slides in from the top of the tape. */
.tape-row.new { animation: rowIn .3s var(--ease-out) both; }

/* ---------- Order form ---------- */
.order-pane { padding: 10px 12px calc(20px + var(--safe-b)); border-top: 8px solid var(--bg-elev); }
.side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.side-toggle button {
  height: 38px; border-radius: var(--radius-sm); font-weight: 650; font-size: 14px;
  background: var(--bg-elev); color: var(--text-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.side-toggle button:active { transform: scale(.96); }
.side-toggle button.on.buy  { background: var(--up); color: #fff; }
.side-toggle button.on.sell { background: var(--down); color: #fff; }

.field {
  background: var(--bg-elev); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field:focus-within { border-color: rgba(247, 166, 0, .35); }
.field label { font-size: 11px; color: var(--text-mute); flex: 0 0 auto; }
.field input {
  flex: 1; text-align: right; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.field .unit { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }
.field .step {
  width: 26px; height: 26px; border-radius: 7px; background: var(--bg-hover);
  display: grid; place-items: center; color: var(--text-dim); font-size: 16px; flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.field .step:active { transform: scale(.86); background: var(--bg-raise); }

.pct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.pct-row button {
  height: 28px; border-radius: 7px; background: var(--bg-elev); color: var(--text-dim);
  font-size: 12px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pct-row button:active { transform: scale(.93); }
.pct-row button.on { background: var(--accent-soft); color: var(--accent); }

.kv { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.kv .k { color: var(--text-mute); }
.kv .v { font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out); }

.lev-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lev-row .lev {
  padding: 6px 10px; background: var(--bg-elev); border-radius: 8px; font-size: 12.5px; font-weight: 650;
  display: flex; align-items: center; gap: 6px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.lev-row .lev:active { transform: scale(.95); }
.lev-row .lev b { color: var(--accent); }

/* =========================================================
   12. Orders & positions
   ========================================================= */
.list-item {
  padding: 12px; border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.list-item:active { background: var(--bg-hover); }
.li-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.li-side { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.li-side.buy  { background: var(--up-soft); color: var(--up); }
.li-side.sell { background: var(--down-soft); color: var(--down); }
.li-sym { font-weight: 650; font-size: 14.5px; }
.li-tag { font-size: 11px; color: var(--text-mute); }
.li-time { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.li-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px; }
.li-grid > div { font-size: 11px; color: var(--text-mute); }
.li-grid > div b {
  display: block; font-size: 13px; color: var(--text); font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.li-actions { display: flex; gap: 8px; margin-top: 10px; }

.pos-pnl { margin-left: auto; text-align: right; }
.pos-pnl b {
  display: block; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out);
}
.pos-pnl span { font-size: 11px; }

/* =========================================================
   13. Assets
   ========================================================= */
.balance-card {
  position: relative; overflow: hidden;
  margin: 12px; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #2A2418 0%, var(--bg-card) 55%);
  border: 1px solid rgba(247, 166, 0, .12);
}
.balance-card::after {
  content: ""; position: absolute; top: -60%; right: -25%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-2-soft) 0%, transparent 70%);
  pointer-events: none;
}
.balance-card > * { position: relative; }
.balance-card .bc-l { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.balance-card .bc-l svg { width: 14px; height: 14px; opacity: .8; }
.balance-card .bc-v {
  font-size: 30px; font-weight: 700; letter-spacing: -1px; margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.balance-card .bc-s { font-size: 12px; color: var(--text-dim); }
.balance-card .bc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

.asset-row {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  transition: background var(--dur-fast) var(--ease-out);
}
.asset-row:active { background: var(--bg-hover); }
.asset-row .ar-n { flex: 1; min-width: 0; }
.asset-row .ar-n b { display: block; font-size: 14px; font-weight: 650; }
.asset-row .ar-n span { font-size: 11px; color: var(--text-mute); }
.asset-row .ar-v { text-align: right; }
.asset-row .ar-v b {
  display: block; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out);
}
.asset-row .ar-v span { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* =========================================================
   14. Profile
   ========================================================= */
.prof-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px; }
.prof-ava {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-grad-r); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 20px; font-weight: 700; overflow: hidden;
  box-shadow: 0 6px 18px rgba(123, 91, 255, .28);
}
.prof-ava img { width: 100%; height: 100%; object-fit: cover; }
.prof-head .ph-n { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.prof-head .ph-s { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

.menu {
  margin: 8px 12px; background: var(--bg-card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.menu-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:active { background: var(--bg-hover); }
.menu-item svg { width: 18px; height: 18px; color: var(--text-dim); flex: 0 0 auto; }
.menu-item .mi-t { flex: 1; font-size: 14px; }
.menu-item .mi-v { font-size: 12.5px; color: var(--text-mute); }

/* ---------- FAQ sheet ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); overflow: hidden;
}
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 16px; height: 16px; color: var(--text-mute); transition: transform var(--dur) var(--ease-out); flex: 0 0 auto; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p {
  margin: 0; padding: 0 14px 13px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  animation: fadeIn var(--dur) var(--ease-out);
}

.rw-row.claimed .rw-bar > i { background: var(--line); }