/* ════════════════════════════════════════════════════════════════════════
   TIER SELLER PORTAL — v2 design system (dark only)

   The reference-grade reskin: near-black canvas, topbar navigation, glass
   cards, amber brand accent (#f59e0b/#fbbf24), emerald for money-positive,
   deck-matched leadership crest colors. Loaded AFTER styles.css during the
   transition — this file owns the tokens, shell, and every redesigned
   component; the legacy sheet keeps un-rebuilt primitives alive until each
   page is rebuilt, then it gets deleted.

   Layers:
     1 TOKENS · 2 BASE · 3 SHELL (topbar/menu/mobile) · 4 PRIMITIVES
     5 COMPONENTS · 6 PAGES (grows per phase) · 7 RESPONSIVE · 8 MODES
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS — the HalalMM system, sampled from the reference ────────── */
:root,
html[data-theme='dark'] {
  /* canvas + surfaces — flat neutral blacks, no blue tint, no translucency */
  --bg-app: #090909;
  --bg: #090909;
  --surface: #0f0f0f;
  --surface-alt: #141414;
  --surface-raise: #1a1a1a;
  --glass-bg: #0f0f0f;          /* the "glass" card class renders flat now */
  --glass-border: #1a1a1a;

  /* ink — flat grays */
  --text: #f5f5f5;
  --body: #d6d6d6;
  --muted: #8a8a8a;
  --muted-2: #5f5f5f;
  --placeholder: #4a4a4a;
  --border: #161616;
  --border-strong: #262626;
  --row-hover: #121212;

  /* Brand + money now come from _tokens.css (generated; see
     tools/design-tokens.js). These names stay as aliases because ~14k lines
     of styles.css + portal.css read them directly. Brand is amber, the
     logo's own colour; money is emerald. */
  --accent: var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-2: var(--brand-400);
  --accent-deep: var(--brand-600);
  --accent-ink: var(--brand-ink);
  --accent-tint: var(--brand-a10);
  --accent-faint: var(--brand-a06);
  --accent-faint-border: var(--brand-a28);
  --accent-glow: var(--brand-a35);

  /* money + positive — emerald. Brand amber is reserved for ACTION chrome
     (buttons, nav, links) so the two never compete. */
  --money: var(--pos-500);
  --money-strong: var(--pos-400);
  --money-tint: var(--pos-a10);
  --money-border: var(--pos-a28);
  --danger: var(--neg-500);
  --danger-tint: var(--neg-a12);
  --info: var(--info-500);
  --info-tint: var(--info-a12);
  --warn: var(--warn-500);
  --warn-tint: var(--warn-a12);

  /* charts — spend is brand amber, earnings is money emerald. Positive money
     is never red; red is reserved for refunds/negatives (--chart-neg). */
  --chart-1: var(--chart-spend);
  --chart-2: var(--chart-earn);
  --chart-grid: #1f1f1f;
  --chart-track: #1c1c1c;
  --chart-bar: #3a3a3a;

  /* geometry */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 99px;
  --radius-circle: 50%;
  --tb-h: 74px;   /* taller header (owner ask 2026-08-08) */
  --sb-w: 236px;

  --card-shadow: none;
  --glass-shadow: none;
  --pop-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);

  /* legacy token bridges (old components read these) */
  --sidebar-bg: #0f0f0f;
  --accent-soft: var(--brand-a10);
  --surface-hover: #141414;
}

/* ── 2 · BASE ───────────────────────────────────────────────────────────── */
html {
  background: var(--bg-app);
  color-scheme: dark;
}
/* The legacy sheet pins html/body to height:100%, which caps every sticky
   ancestor at one viewport and breaks sticky headers — uncap it.
   overscroll-behavior-y:none kills the macOS rubber-band bounce so the sticky
   topbar never drifts when you aggressively scroll up past the top. */
html, body { height: auto; min-height: 100%; overscroll-behavior-y: none; }
/* Never let the page pan sideways. overflow-x:clip (not hidden) stops the
   left-right drift on phones WITHOUT creating a scroll container that would
   break the sticky topbar. Individual wide elements (tables, the network
   board) keep their own inner overflow-x:auto. (owner 2026-08-10) */
html, body { overflow-x: clip; max-width: 100%; }
body {
  /* document-flow shell: fixed sidebar + margin-offset main column.
     (The legacy sheet sets body{display:flex} for ITS shell — override.) */
  display: block;
  margin: 0;
  min-height: 100dvh;   /* dvh tracks the real viewport under the mobile keyboard */
  background: var(--bg-app);
  color: var(--text);
}
::selection { background: rgba(255, 122, 26, 0.3); color: #fff; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius); font-weight: 700; font-size: 13px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ── 3 · SHELL — sidebar + main column ──────────────────────────────────── */
/* Fixed positioning (not sticky): immune to the legacy sheet's ancestor
   height/overflow rules — the same pattern its own shell used. */
.sb {
  width: var(--sb-w);
  position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 55;
  overflow-y: auto;
}
.sb-logo {
  display: flex; align-items: center; gap: 9px;
  height: var(--tb-h); flex: none;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
/* The wordmark is chrome, not body copy — out-specific the legacy dark-theme
   `html[data-theme] a { color: var(--accent) }` so the logo anchor stays text
   white (glyph middle/base bars ride currentColor off it). */
.sb a.sb-logo, .sb a.sb-logo:hover,
.tb a.tb-logo, .tb a.tb-logo:hover { color: var(--text); }
.sb-word { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.sb-sub { font-size: 9.5px; font-weight: 600; letter-spacing: 2.4px; color: var(--muted-2); text-transform: uppercase; }
.sb-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 18px; }
.sb-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted-2); padding: 0 10px 7px;
}
.sb-link {
  position: relative;
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px 13px; margin-bottom: 4px;
  background: none; border: 0; border-radius: 11px;
  color: var(--muted); font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: color 0.13s ease, background 0.13s ease, transform 0.14s ease;
}
.sb-link:hover { transform: translateX(2px); }
.sb-link .sb-ic { display: inline-flex; opacity: 0.9; }
.sb-link:hover { color: var(--text); background: var(--surface-alt); }
.sb-link.is-active {
  color: var(--text);   /* white label */
  background: none;      /* no green fill — the green icon + side bar carry the active state */
}
.sb-link.is-active .sb-ic { opacity: 1; color: var(--accent); }   /* icon stays green */
.sb-link.is-active::before {
  content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 2.5px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.sb-link.sb-refer { color: var(--muted); }   /* grey like the other nav items (not green) */
/* "HOT" badge on Refer & earn — red rectangle, white flame + text */
.sb-hot {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px;
  background: #ff2d2d; color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: 0.07em; line-height: 1;
}
.sb-hot svg { flex: none; width: 13px; height: 13px; stroke: currentColor; stroke-width: 28; }
/* keep the label on one line beside the badge */
.sb-link.sb-refer > span { white-space: nowrap; }
.sb-link.sb-refer { gap: 10px; }
.sb-link .sb-badge {
  margin-left: auto;
  background: var(--accent-tint); color: var(--accent);
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
}
.sb-foot { flex: none; border-top: 1px solid var(--border); padding: 14px; }
.sb-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-user-name { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; min-width: 0; }
.sb-user-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-email { font-size: 10.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-signout {
  display: block; width: 100%; margin-top: 11px;
  padding: 8px; background: none;
  border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--muted); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: color 0.13s ease, border-color 0.13s ease;
}
.sb-signout:hover { color: var(--danger); border-color: rgba(224, 72, 72, 0.4); }

.shell-main {
  min-width: 0;
  display: flex; flex-direction: column;
  min-height: 100vh;
  margin: 0 0 0 var(--sb-w);   /* room for the fixed sidebar */
  padding: 0;
}

/* slim topbar inside the main column */
.tb {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tb.is-scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); border-bottom-color: var(--border-strong); }
.tb-in {
  height: var(--tb-h);
  padding: 0 24px;
  display: flex; align-items: center; gap: 18px;
}
.tb-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.tb-title h1 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; }
.tb-crumb { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-logo { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: none; }
.tb-word { font-family: var(--font-display); font-size: 16px; font-weight: 800; }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }

/* Balance chip = the wallet: muted icon, white amount, and a solid money
   "+" tile as the add-funds affordance (the topbar's one green). */
.tb-balance {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 4px 4px 4px 13px;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: 10px; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tb-balance:hover { border-color: #3a3a3a; background: var(--surface-raise); }
.tb-balance .tb-balance-ic { color: var(--muted); display: inline-flex; }
.tb-balance-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--money, #34d399); color: #0d0d10;
  transition: filter 0.15s ease;
}
.tb-balance:hover .tb-balance-add { filter: brightness(1.08); }

.tb-refer {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--accent);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  color: var(--accent-ink); font-size: 12.5px; font-weight: 800; font-family: inherit;
  box-shadow: 0 2px 16px var(--accent-glow);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.tb-refer:hover { filter: brightness(1.06); box-shadow: 0 3px 20px var(--accent-glow); transform: translateY(-1px); }
.tb-refer:active { transform: translateY(0); }

.tb-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 6px 0 12px; min-width: 170px;
  background: var(--bg-app); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  color: var(--muted); font-size: 12.5px; font-weight: 500; font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tb-search:hover { border-color: #333; color: var(--text); }
.tb-search kbd {
  margin-left: auto;
  min-width: 18px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: 5px; font: 600 10.5px/1 var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
}
.tb-iconbtn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}
.tb-iconbtn:hover { background: var(--surface-alt); color: var(--text); }
.tb-iconbtn .notif-dot {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
/* notification badge — the legacy sheet styles it for the OLD topbar button;
   restyle for .tb-iconbtn so it sits clean */
.tb-iconbtn .notif-badge,
.notif-badge {
  position: absolute; top: -4px; right: -4px; left: auto; bottom: auto;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  border: 0;
  animation: badgePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-iconbtn.has-unread { color: var(--text); }

/* help tip — "?" chip with a CSS tooltip (hover + keyboard focus) */
.help-tip {
  width: 15px; height: 15px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--muted-2); font-size: 9.5px; font-weight: 800; font-family: inherit;
  cursor: help; position: relative; margin-left: 2px;
  transition: color 0.13s ease, border-color 0.13s ease;
}
.help-tip:hover, .help-tip:focus-visible { color: var(--accent); border-color: var(--accent-faint-border); }
.help-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px);
  width: max-content; max-width: 240px;
  background: var(--surface-raise); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 8px 11px;
  color: var(--body, #d6d6d6); font-size: 11.5px; font-weight: 500; line-height: 1.55;
  text-align: left; white-space: normal;
  box-shadow: var(--pop-shadow);
  /* display:none while hidden — an invisible absolutely-positioned box still
     widens the page (the KPI strip no longer clips). allow-discrete keeps the
     fade animating both ways. */
  display: none; opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity 0.14s ease, transform 0.14s ease, display 0.14s allow-discrete;
}
.help-tip:hover::after, .help-tip:focus-visible::after { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
@starting-style {
  .help-tip:hover::after, .help-tip:focus-visible::after { opacity: 0; transform: translateX(-50%) translateY(3px); }
}
/* first KPI cell: keep the tooltip inside the viewport */
.kpi-cell:first-child .help-tip::after { left: 0; transform: translateX(0) translateY(3px); }
.kpi-cell:first-child .help-tip:hover::after, .kpi-cell:first-child .help-tip:focus-visible::after { transform: translateX(0) translateY(0); }
@starting-style {
  .kpi-cell:first-child .help-tip:hover::after, .kpi-cell:first-child .help-tip:focus-visible::after { transform: translateX(0) translateY(3px); }
}

/* rank chip (sidebar footer, menus, settings) */
.sb-rank-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 20px; padding: 0 9px 0 4px; border-radius: 99px;
  background: var(--accent); border: 0;
  color: #fff; font-size: 10.5px; font-weight: 700;
}
.sb-rank-chip svg { flex: none; filter: brightness(0) invert(1); }

/* existing notifications popover — retinted to the v2 system */
.notif-panel {
  position: fixed; z-index: 95;
  width: 348px; max-height: 440px; overflow-y: auto;
  background: var(--surface-alt) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--pop-shadow) !important;
  padding: 6px;
  animation: tbMenuIn 0.14s ease;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
  background: transparent !important;
}
html[data-theme='dark'] .notif-head-pill {
  margin-left: 8px; padding: 2px 9px; border-radius: 99px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 10.5px; font-weight: 700;
}
html[data-theme='dark'] .notif-head-pill.is-muted { background: var(--surface-raise); color: var(--muted-2); }
.notif-mark-read { background: none; border: 0; color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.notif-mark-read:disabled { color: var(--muted-2); cursor: default; }
.notif-group-head {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted-2); padding: 10px 10px 5px;
}
.notif-row {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: flex-start;
  padding: 10px; border-radius: var(--radius-sm);
  background: none !important; border: 0; font-family: inherit; cursor: pointer;
  transition: background 0.12s ease;
}
.notif-row:hover { background: var(--row-hover) !important; }
.notif-row-ic {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent);
}
/* person events: face avatar + a small kind badge pinned to its corner */
.notif-vis { position: relative; flex: none; width: 30px; height: 30px; }
.notif-vis .avatar { width: 30px; height: 30px; font-size: 10px; }
.notif-vis-badge {
  position: absolute; right: -5px; bottom: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface-alt);
  isolation: isolate;
}
/* the kind tints are translucent — put an opaque disc underneath so the
   badge stays crisp where it overlaps the photo */
.notif-vis-badge::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--surface-alt); z-index: -1;
}
.notif-row-line { display: block; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.notif-row.is-read .notif-row-line { color: var(--muted); }
.notif-row-meta { display: block; font-size: 11px; color: var(--muted-2); margin-top: 2px; }
html[data-theme='dark'] .notif-row-amt { color: var(--accent); background: transparent; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
html[data-theme='dark'] .notif-row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 5px; }

/* notifications popover (anchored under the bell, like the avatar menu) */
.tb-notif {
  position: absolute; top: calc(var(--tb-h) - 8px); right: 22px; z-index: 90;
  width: 330px; max-height: 420px; overflow-y: auto;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-shadow);
  padding: 6px;
  animation: tbMenuIn 0.14s ease;
}
.tb-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
}
.tb-notif-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.tb-notif-mark { background: none; border: 0; color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.tb-notif-row {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 10px; border-radius: var(--radius-sm);
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: background 0.12s ease;
}
.tb-notif-row:hover { background: var(--row-hover); }
.tb-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 5px; }
.tb-notif-row.is-read .tb-notif-dot { background: var(--border-strong); box-shadow: none; }
.tb-notif-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tb-notif-row.is-read .tb-notif-title { color: var(--muted); font-weight: 500; }
.tb-notif-meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.tb-notif-empty { padding: 26px 10px; text-align: center; color: var(--muted-2); font-size: 12.5px; }

/* copy feedback */
.btn.is-copied, .ref-tile.is-copied { color: var(--accent); border-color: var(--accent-faint-border); background: var(--accent-tint); }

/* sticky headers on long tables (inside page flow; offset for the topbar) */
.tbl-sticky thead th { position: sticky; top: var(--tb-h); z-index: 2; }

/* boot/render fade — kills the hydrate repaint flash */
.shell-page { animation: pageIn 0.18s ease; }
/* revisited routes render with no entrance fade — elements just appear */
.shell-page--instant { animation: none; }
@keyframes pageIn { from { opacity: 0.55; } to { opacity: 1; } }
.tb-avatar {
  width: 36px; height: 36px; flex: none; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.tb-avatar .avatar { width: 36px; height: 36px; font-size: 12px; border: 2px solid var(--border-strong); transition: border-color 0.15s ease; }
.tb-avatar:hover .avatar { border-color: var(--accent); }
.tb-avatar[aria-expanded='true'] .avatar { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* avatar menu */
.tb-menu {
  position: absolute; top: calc(var(--tb-h) - 8px); right: 22px; z-index: 90;
  width: 252px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-shadow);
  padding: 6px;
  animation: tbMenuIn 0.14s ease;
}
@keyframes tbMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.tb-menu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tb-menu-name { font-size: 13.5px; font-weight: 700; }
.tb-menu-email { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.tb-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background 0.12s ease;
}
.tb-menu-item:hover { background: var(--glass-bg); }
.tb-menu-item .ic { color: var(--muted); display: inline-flex; }
.tb-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.tb-menu-item.danger { color: var(--danger); }
.tb-menu-item.danger .ic { color: var(--danger); }

/* page column — full width (the legacy sheet caps .shell-page at a
   container width; explicitly un-cap it) */
.shell-page {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: 26px 28px 44px;
  flex: 1 0 auto;   /* grow so the footer below always sits at the page bottom */
}

/* legal footer — reference layout: hairline top, copyright left, links right,
   compliance line in small muted type beneath. Lives OUTSIDE <main> as the
   last child of the .shell-main column: full-bleed hairline, flush with the
   bottom of the page (no trailing page padding under it). Link selectors
   carry two classes so they out-specify the legacy html[data-theme] a rule. */
.dash-foot {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 20px 28px 18px;
}
.dash-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 28px; flex-wrap: wrap;
}
.dash-foot-copy {
  margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
}
.dash-foot-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dash-foot .dash-foot-links a {
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5); text-decoration: none;
  transition: color 0.15s ease;
}
.dash-foot .dash-foot-links a:hover { color: #fff; }
.dash-foot-legal {
  margin: 14px 0 0; max-width: 1020px;
  font-size: 11.5px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.32);
}
@media (max-width: 720px) {
  .dash-foot-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dash-foot-legal { font-size: 11px; }
}

/* ── 3b · SHELL — mobile bottom nav + sheet (restyled) ─────────────────── */
.mb-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none;
  background: rgba(12, 12, 15, 0.88);
  border-top: 1px solid var(--border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mb-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 5px; background: none; border: 0; border-radius: var(--radius);
  color: var(--muted-2); font-size: 10px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mb-tab.is-active { color: var(--accent-2); }
.mb-tab-label { letter-spacing: 0.2px; }
.mb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: var(--surface-alt); border-radius: 20px 20px 0 0;
  border: 1px solid var(--border-strong); border-bottom: 0;
  transform: translateY(105%); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 78vh; overflow: auto;
}
.mb-sheet.is-open { transform: none; }
.mb-sheet-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.mb-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.mb-sheet-handle { width: 40px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 6px auto 12px; }
.mb-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.mb-sheet-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-sheet-user-name { font-size: 14px; font-weight: 700; }
.mb-sheet-user-meta { font-size: 11.5px; color: var(--muted); }
.mb-sheet-close { background: none; border: 0; color: var(--muted); transform: rotate(45deg); cursor: pointer; padding: 8px; }
.mb-sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 8px; background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; text-align: left;
}
.mb-sheet-item:last-of-type { border-bottom: 0; }
.mb-sheet-item .mb-sheet-icon { color: var(--muted); display: inline-flex; }
.mb-sheet-item > svg:last-child { margin-left: auto; color: var(--muted-2); }
.mb-sheet-item.is-active { color: var(--accent-2); }
.mb-sheet-item.mb-sheet-refer { color: var(--accent-2); font-weight: 700; }
.mb-sheet-item.mb-sheet-refer .mb-sheet-icon { color: var(--accent-2); }
.mb-sheet-badge { margin-left: auto; background: var(--accent-tint); color: var(--accent-2); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.mb-sheet-signout { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px 8px; background: none; border: 0; color: var(--danger); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; }

/* ── 4 · PRIMITIVES — cards, buttons, tables, badges ────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 20px;
}
.card-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.card-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--muted);
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.card-header h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.card-sub { color: var(--muted); font-size: 12.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, filter 0.15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-raise); border-color: #333; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--accent);
  border-color: transparent; color: var(--accent-ink); font-weight: 800;
  box-shadow: none;
}
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); border-color: transparent; box-shadow: none; }
.btn-ghost { background: transparent; border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--glass-bg); }
.btn-danger { background: var(--danger-tint); border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
/* reference buttons carry a green-tinted glyph beside white text */
.btn-tinted > svg { color: var(--accent); }
.btn-money { background: var(--money-tint); border-color: var(--money-border); color: var(--money-strong); }

.form-input, select.form-input, textarea.form-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text); font-size: 13.5px; font-family: inherit;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.form-input::placeholder { color: var(--placeholder); }

/* tables — the reference's clean row treatment */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.tbl th:first-child { border-radius: 8px 0 0 8px; }
.tbl th:last-child { border-radius: 0 8px 8px 0; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background 0.12s ease; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.tbl-cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbl-cell-title { font-weight: 600; font-size: 13px; }
.tbl-cell-sub { color: var(--muted); font-size: 11.5px; }
.row-actions {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted-2); cursor: pointer; letter-spacing: 1px; font-weight: 800;
}
.row-actions:hover { background: var(--glass-bg); color: var(--text); border-color: var(--border); }

.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.money-pos { color: var(--money); }
.money-neg { color: var(--danger); }

.delta-pill {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.delta-pill.up { background: var(--money-tint); color: var(--money); border: 1px solid rgba(52, 211, 153, 0.25); }
.delta-pill.down { background: var(--danger-tint); color: var(--danger); border: 1px solid rgba(248, 113, 113, 0.25); }
.delta-pill.flat { background: rgba(255, 255, 255, 0.06); color: var(--muted); border: 1px solid var(--border); }

/* status badges (dark re-tint of the legacy classes) */
.status-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.status-delivered, .status-paid, .status-completed, .status-confirmed, .status-active, .status-listed, .status-credited { background: var(--money-tint); color: var(--money); }
.status-processing, .status-pending, .status-awaiting-first-order, .status-eligible { background: var(--warn-tint); color: var(--warn); }
.status-rejected { background: var(--danger-tint, rgba(255,90,90,.12)); color: var(--danger, #ff5a5a); }

/* ── Earnings — income bucket cards (0021 transfers + withdrawals) ───────── */
.earn-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.earn-bucket { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.earn-bucket-amt { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 8px; }
.earn-bucket-avail { font-size: 12px; font-weight: 500; color: var(--money); }
.earn-bucket-stats { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.earn-bucket-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .earn-buckets { grid-template-columns: 1fr; }
}
.status-refunded, .status-reversed, .status-rejected, .status-failed { background: var(--danger-tint); color: var(--danger); }
.status-unlisted, .status-inactive, .status-held, .status-neutral { background: rgba(255, 255, 255, 0.07); color: var(--muted); }

/* filter pills */
.fpill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 99px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--muted); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all 0.14s ease;
}
.fpill:hover { color: var(--text); border-color: var(--border-strong); }
.fpill.is-active { background: var(--accent-tint); border-color: var(--accent-faint-border); color: var(--accent-2); }

/* range switcher (7d/30d/90d) */
.rangeseg { display: inline-flex; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 99px; padding: 3px; }
.rangeseg button {
  height: 26px; padding: 0 12px; border: 0; border-radius: 99px; background: none;
  color: var(--muted); font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all 0.14s ease;
}
.rangeseg button.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 8px var(--accent-glow); }

/* progress bars */
.pbar { height: 7px; background: rgba(255, 255, 255, 0.07); border-radius: 99px; overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.pbar.pbar-money > i, .dash-realize-bar > i { background: var(--money); }

/* empty state */
.empty {
  padding: 34px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: 13px;
}

/* ── 5 · COMPONENTS ─────────────────────────────────────────────────────── */

/* KPI strip — one bordered row, internal dividers (the reference pattern).
   position+z-index lift it above the header's stacking context so the hero
   skyline rooted beneath its top edge never paints over it. */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; z-index: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  /* no overflow:hidden — the help-tip tooltips pop above the strip's top edge;
     hover washes stay inside the corners via the per-cell radius below */
}
.kpi-cell { padding: 18px 20px; border-left: 1px solid var(--border); min-width: 0; cursor: default; border-radius: calc(var(--radius-lg) - 1px); }
.kpi-cell:first-child { border-left: 0; }
.kpi-cell.clickable { cursor: pointer; transition: background 0.14s ease, transform 0.16s ease; }
.kpi-cell.clickable:hover { background: var(--row-hover); transform: translateY(-1px); }
.kpi-cell-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
/* reference: bare green glyph beside the gray label — no tinted box */
.kpi-cell-head .ic-box {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--accent);
}
.kpi-cell-head .ic-box.money { color: var(--accent); }
.kpi-cell-head .ic-box.info { color: var(--accent); }
.kpi-cell-row { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.kpi-cell-value { font-size: var(--t-metric, 28px); font-weight: 700; letter-spacing: var(--track-h, -0.7px); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.kpi-cell-sub { margin-top: 5px; color: var(--muted-2); font-size: 11.5px; }

/* chart section — header on the page, plot inside its own bordered shell
   (the reference's structure). Controls bottom-align so the legend and
   buttons hug the plot. */
.chart-sec { margin-bottom: 18px; }
.chart-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 9px; flex-wrap: wrap;
}
.chart-sec-sub { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.chart-shell { padding: 10px 16px 6px; }
.chart-card { padding: 20px 20px 12px; position: relative; }
.chart-title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; }
.chart-title-ic {
  width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
}
.chart-title + .card-sub { margin-top: 4px; }
/* entrance: lines draw in, fills fade up behind them */
.cv2-enter .cv2-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cv2draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.cv2-enter .cv2-line-glow { animation-delay: 0.05s; }
.cv2-enter .cv2-area { opacity: 0; animation: cv2fade 0.7s ease-out 0.4s forwards; }
@keyframes cv2draw { to { stroke-dashoffset: 0; } }
@keyframes cv2fade { to { opacity: 1; } }
.cv2-tip { animation: cv2tip 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cv2tip { from { opacity: 0; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: none; } }
.chart-card-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
/* dashboard chart controls: reference-size buttons + the settings popover */
.chart-controls-lg { position: relative; gap: 12px; }
.chart-controls-lg .cv2-legend { margin-right: 4px; }
.chart-controls-lg .cv2-legend-item { font-size: 13px; }
.chart-controls-lg .cv2-legend-dot { width: 9px; height: 9px; }
/* Phones: legend takes its own line; the two control buttons split the next
   one edge to edge instead of wrapping ragged-right. */
@media (max-width: 720px) {
  .chart-controls-lg { width: 100%; justify-content: flex-start; }
  .chart-controls-lg [data-chart-legend] { flex-basis: 100%; }
  .chart-controls-lg .chart-btn { flex: 1; justify-content: center; }
}
/* Compact twin tables on phones: one-line titles/subs (wrapped cells were
   making 140px rows) and the marketplace pill bows out — three columns fit
   with no inner scroll. */
@media (max-width: 600px) {
  /* the cap scales with the viewport so labels ellipsize instead of the
     table growing an inner scroll at ANY phone width */
  .dash-tables .tbl-cell-title, .dash-tables .tbl-cell-sub {
    max-width: min(160px, calc(100vw - 278px));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dash-tables .col-market { display: none; }
  .dash-tables .tbl td { padding: 10px 8px; }
  /* iOS zooms the page on focusing any input under 16px (extra class beats
     the base rule that appears later in this sheet) */
  .refer-banner-share .refer-banner-input { font-size: 16px; height: 40px; }
  .dash-tables .status-badge { padding: 3px 8px; font-size: 10.5px; }
  /* activity rows: the money is the message — visuals bow out for width
     (!important: _earnVisual's ic-box carries an inline display) */
  .tbl-activity .tbl-cell-main > .avatar, .tbl-activity .tbl-cell-main > .ic-box { display: none !important; }
  .tbl-activity td.num .money { font-size: 12.5px; }
}
.chart-btn { height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 650; border-radius: 10px; gap: 9px; }
.chart-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 46;
  width: 292px; max-width: calc(100vw - 40px);
  background: var(--surface-raise); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--pop-shadow); padding: 10px;
  animation: chartPopIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chartPopIn { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: none; } }
.chart-pop-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 4px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.chart-pop-hint { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted-2); }
.chart-pop-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left; transition: background 0.13s ease;
}
.chart-pop-row:hover { background: var(--glass-bg); }
.chart-pop-row.on .chart-pop-label { color: var(--text); }
.chart-pop-row:not(.on) .chart-pop-label { color: var(--muted); }
.chart-pop-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chart-pop-label { flex: 1; }
.chart-pop-unit { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted-2); text-transform: uppercase; }
.chart-pop-check { width: 14px; color: var(--accent); display: inline-flex; }
.chart-pop-foot { padding: 9px 6px 3px; border-top: 1px solid var(--border); margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--muted-2); }
.chart-pop-chips { display: flex; gap: 6px; padding: 2px 2px 10px; }
.chart-pop-chip {
  flex: 1; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 650;
  cursor: pointer; transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
  white-space: nowrap; padding: 0 6px;
}
.chart-pop-chip:hover { color: var(--text); border-color: #333; }
.chart-pop-chip.on { background: var(--accent-tint); border-color: var(--accent-faint-border); color: var(--accent); }
/* compact month calendar */
.cal { padding: 0 2px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; font-size: 13px; }
.cal-nav {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.cal-nav:hover:not(:disabled) { color: var(--text); border-color: #333; }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 10px; font-weight: 800; color: var(--muted-2); padding: 3px 0 5px; }
.cal-pad { height: 30px; }
.cal-day {
  height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: var(--body, #d6d6d6); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-day:hover { background: var(--glass-bg); color: var(--text); }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.in { background: var(--accent-tint); color: var(--accent); border-radius: 0; }
.cal-day.sel { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
span.cal-day { cursor: default; }
.cal-day.dis { color: var(--muted-2); opacity: 0.4; }
.card-header { flex-wrap: wrap; }
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.cv2 { position: relative; }
.cv2 svg { touch-action: pan-y; }
.cv2-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface-raise);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 8px 11px; min-width: 130px;
}
.cv2-tip-l { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.cv2-tip-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.cv2-tip-row b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.cv2-tip-date { color: var(--muted-2); font-size: 11.5px; }
.cv2-legend { display: inline-flex; align-items: center; gap: 16px; }
.cv2-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cv2-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* leadership crests */
.lead-crest { display: inline-block; vertical-align: middle; }
.lead-crest.locked { filter: grayscale(0.9); opacity: 0.38; }

/* spread block (deck pattern) */
/* ledger-style pay / resale rows — label left, value right; robust in a
   narrow card, never wraps or misaligns */
.spread {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-alt); border: 1px solid var(--border);
}
.spread-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spread-lbl { font-size: 11px; font-weight: 600; color: var(--muted); }
.spread-row-resale .spread-lbl { color: var(--money-strong); }
.spread-val { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.spread-row-resale .spread-val { color: var(--money); }
.spread-base { font-size: 11px; color: var(--muted-2); font-weight: 500; margin-left: 4px; }

/* step wizard */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px;
  background: var(--border);
}
.step:last-child::before { display: none; }
.step-num {
  width: 29px; height: 29px; flex: none; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-alt);
  border: 1.5px solid var(--border-strong);
  font-size: 12.5px; font-weight: 800; color: var(--muted);
}
.step.active .step-num, .step.done .step-num {
  background: var(--accent);
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 2px 12px var(--accent-glow);
}
.step-title { font-size: 13.5px; font-weight: 700; padding-top: 4px; }
.step-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* countdown ring */
.cd-ring { position: relative; display: inline-block; }
.cd-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.cd-ring-value { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.cd-ring-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-top: 1px; }

/* qty stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.qty-btn {
  width: 30px; height: 30px; border: 0; background: none; color: var(--muted);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.qty-btn:hover { background: var(--glass-bg); color: var(--text); }
.qty-input {
  width: 36px; height: 30px; border: 0; background: none; color: var(--text);
  font-size: 13px; font-weight: 700; text-align: center; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.qty-input:focus { outline: none; }

/* avatar (dark override of legacy) */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raise); color: var(--muted);
  font-size: 11px; font-weight: 700; flex: none; overflow: hidden;
}
.avatar.sm { width: 26px; height: 26px; font-size: 9.5px; }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }

/* section head (legacy helper, restyled) */
.r-section-head { margin-bottom: 20px; }
.r-section-head .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.r-section-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.6px; font-family: var(--font-display); }
.r-section-head .sub { color: var(--muted); font-size: 13px; margin-top: 6px; max-width: 720px; line-height: 1.6; }

/* welcome header (per-page hero row) — the reference's green bar skyline
   rising behind it: three bottom-anchored pyramid clusters over a soft
   ambient wash, breathing slowly, feathered at the edges */
/* z-index:0 makes .wel a PERMANENT stacking context, so the z:-1 skyline
   always paints inside it (above the body background). Without it the glow
   only shows while the entrance animation's transform exists, then drops
   behind the body's opaque background — visible for a second, then gone. */
.wel { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.wel-glow {
  /* The skyline ROOTS behind the KPI strip: the region extends ~56px past
     the header's bottom (under the card's top edge), bars bottom-anchored
     there rise up out of the container — the KPI strip itself is lifted
     (position:relative + z-index:1) so it always covers the overlap. Tall
     bars dissolve through the top fade instead of hard-clipping. */
  position: absolute; inset: 0 -28px -56px;
  display: flex; align-items: flex-end; justify-content: space-between;
  overflow: hidden; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9% 91%, transparent),
    linear-gradient(180deg, transparent, #000 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9% 91%, transparent),
    linear-gradient(180deg, transparent, #000 34%);
  mask-composite: intersect;
}
.wel-glow::before {
  /* dim back-layer wash for depth */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: radial-gradient(62% 100% at 50% 100%, rgba(136, 255, 106, 0.07), transparent 72%);
  filter: blur(28px);
}
.wel-glow::after {
  /* a soft band of light sweeping across the skyline */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 34%, rgba(136, 255, 106, 0.05) 50%, transparent 66%);
  animation: glowSweep 14s linear infinite;
}
@keyframes glowSweep {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}
.wel-glow-cluster {
  display: flex; align-items: flex-end; flex: none;
  position: relative;
  animation: clusterDrift 30s ease-in-out infinite alternate;
}
/* weighted intensity + parallax drift speeds per cluster */
.wel-glow-cluster:nth-child(1) { opacity: 0.85; animation-duration: 26s; }
.wel-glow-cluster:nth-child(2) { opacity: 1; animation-duration: 34s; animation-direction: alternate-reverse; }
.wel-glow-cluster:nth-child(3) { opacity: 0.7; animation-duration: 29s; }
@keyframes clusterDrift {
  from { transform: translateX(-11px); }
  to { transform: translateX(11px); }
}
.wel-glow-cluster::before {
  /* per-cluster back bloom — a wider, dimmer halo behind the columns */
  content: ''; position: absolute; left: -12%; right: -12%; bottom: 0; height: 82%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(136, 255, 106, 0.10), transparent 74%);
  filter: blur(30px);
}
.dash-hero__bar {
  flex-shrink: 0;
  width: calc(var(--dash-hero-bar-width, 95.55px) * var(--cs, 1));
  height: calc(var(--dash-hero-bar-height, 120px) * var(--cs, 1));
  /* two-tone: deeper green at the base rising into lime, fading out */
  background: linear-gradient(to top,
    rgba(136, 255, 106, 0.20),
    rgba(136, 255, 106, 0.14) 42%,
    rgba(136, 255, 106, 0.012));
  box-shadow: inset 0 1px 0 rgba(136, 255, 106, 0.22);
  /* crisper column + separate bloom: light blur keeps the silhouette,
     the drop-shadow supplies the halo */
  filter: blur(7px) drop-shadow(0 0 26px rgba(136, 255, 106, 0.20));
  transform-origin: bottom;
  animation: barBreathe 11s ease-in-out infinite;
  animation-delay: calc(var(--bar-i, 0) * -1.35s);
}
@keyframes barBreathe {
  0%, 100% { opacity: 0.68; transform: scaleY(0.93); }
  50% { opacity: 1; transform: scaleY(1.06); }
}
.wel > div:not(.wel-glow) { position: relative; z-index: 1; }
.wel-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.wel h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.7px; font-family: var(--font-display); }
.wel-sub { color: var(--muted); font-size: 13px; margin-top: 7px; line-height: 1.6; max-width: 640px; }
.wel-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* toast (dark) */
.shell-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 1000; display: flex; align-items: center; gap: 9px;
  background: var(--surface-raise); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 99px; padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--pop-shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shell-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.shell-toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--money); }

/* ── 6 · PAGES ──────────────────────────────────────────────────────────── */

/* dashboard */
.dash-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.tbl-thumb {
  width: 30px; height: 30px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.tbl-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tbl-thumb-fallback { color: var(--accent-2); font-size: 13px; font-weight: 800; }
.row-clickable { cursor: pointer; }

.refer-banner {
  display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 26px; align-items: center;
  padding: 26px 28px; position: relative; overflow: hidden;
}
.refer-banner-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); }
.refer-banner h3 { margin: 8px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.4px; font-family: var(--font-display); }
.refer-banner p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 520px; }
.refer-banner-action { position: relative; display: flex; flex-direction: column; gap: 9px; }
.refer-banner-code {
  align-self: flex-start;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--accent-2);
  background: var(--accent-tint); border: 1px dashed var(--accent-faint-border);
  border-radius: 9px; padding: 6px 12px;
}
.refer-banner-share { display: flex; gap: 8px; }
.refer-banner-input {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-strong); border-radius: 9px;
  color: var(--muted); font-size: 12px; font-family: var(--font-mono, ui-monospace, monospace);
}
/* flat QR in the banner — no glow/drop shadow (out-specifies .ref-qr-frame) */
.refer-banner .refer-banner-qr {
  padding: 8px; border-radius: 11px; align-self: center; justify-self: center;
  box-shadow: none;
}
.rb-action-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-2); }
.rb-action-note { font-size: 11.5px; color: var(--muted-2); }
/* rank KPI value with the builder hammer glyph beside the text */
.kpi-rank-value { display: inline-flex; align-items: center; gap: 10px; }
.kpi-rank-value svg { flex: 0 0 auto; }

/* catalog */
.cat-discount-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 18px; margin-bottom: 16px; flex-wrap: wrap;
}
.cat-discount-strip-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cat-discount-strip-main strong { display: block; font-size: 13px; }
.cat-discount-strip-main span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.cat-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cat-toolbar-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; min-width: 190px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 99px;
  color: var(--muted);
}
.cat-search-input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: 12.5px; font-family: inherit; }
.cat-search-input:focus { outline: none; }
.cat-toolbar-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 0 auto; justify-content: flex-end; }
/* select.cat-select out-specifies the select.form-input width:100% base */
select.cat-select { width: auto; height: 34px; padding: 0 30px 0 12px; font-size: 12.5px; border-radius: 99px; background-color: var(--glass-bg); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.cat-card { display: flex; flex-direction: column; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--glass-shadow), 0 14px 40px rgba(0, 0, 0, 0.45); }
.cat-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(118% 76% at 50% 118%, rgba(255, 255, 255, 0.055), transparent 62%),
    var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.cat-art-img { max-height: 84%; max-width: 66%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); animation: floaty 5s ease-in-out infinite; }
.cat-card:nth-child(2n) .cat-art-img { animation-delay: 0.9s; }
.cat-card:nth-child(3n) .cat-art-img { animation-delay: 1.7s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cat-art-gen { position: absolute; inset: 0; opacity: 0.65; }
.cat-card-body { padding: 15px 15px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cat-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cat-card-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.25; }
.cat-card-sku { font-size: 10.5px; color: var(--muted-2); font-family: var(--font-mono, ui-monospace, monospace); margin-top: 3px; }
.cat-rar {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 22px; padding: 0 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--rar) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar) 32%, transparent);
  color: var(--rar); font-size: 10.5px; font-weight: 700;
}
.cat-rar i { width: 6px; height: 6px; border-radius: 50%; background: var(--rar); box-shadow: 0 0 7px var(--rar); }
.cat-card-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-game {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.cat-game img { width: 13px; height: 13px; border-radius: 3px; object-fit: cover; }
.cat-stock { font-size: 11px; color: var(--muted-2); font-weight: 600; }
.cat-stock.low { color: var(--warn); display: inline-flex; align-items: center; gap: 3px; }
.cat-stock.out { color: var(--danger); }
.cat-card-buy { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cat-buy-btn { flex: 1; }

/* checkout modal */
.ck-item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.ck-item .cat-art { border: 1px solid var(--border); border-radius: 12px; }
.ck-item-name { font-size: 15.5px; font-weight: 800; }
.ck-item-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ck-item-spread { font-size: 11.5px; font-weight: 700; color: var(--money-strong); margin-top: 5px; }
.ck-total { border-top: 1px solid var(--border-strong) !important; font-size: 15px; }
.ck-total strong { font-size: 17px; }
.ck-warn {
  display: flex; gap: 11px; margin-top: 14px; padding: 12px 14px;
  background: var(--warn-tint); border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius); color: var(--warn); font-size: 12.5px; line-height: 1.55;
}
.ck-warn div { color: var(--text); }
.ck-warn strong { color: var(--warn); }
.ck-spin { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 0 16px; color: var(--muted); font-size: 13px; }
.ck-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border-strong); border-top-color: var(--accent);
  animation: ckspin 0.8s linear infinite;
}
@keyframes ckspin { to { transform: rotate(360deg); } }
.ck-success {
  width: 52px; height: 52px; margin: 16px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--money-tint); color: var(--money);
  border: 1.5px solid var(--money-border);
  box-shadow: 0 0 26px rgba(52, 211, 153, 0.3);
}

/* boot splash — shown while an authed session hydrates live data */
.boot-splash {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg-app);
}
.boot-splash-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text);
}
.boot-splash .ck-spinner { width: 22px; height: 22px; }

/* packages — budget-first builder, the full-width page opener.
   Surface styling comes from .card so it matches the dashboard modules. */
.pkx-value-build {
  display: flex; flex-direction: column; gap: 8px; position: relative;
  margin-bottom: 18px;
}
/* catalog page runs flat — no accent glow halos on its controls */
.shell-page--catalog .btn-primary,
.shell-page--catalog .btn-primary:hover,
.shell-page--catalog .rangeseg button.is-active { box-shadow: none; }
.pkx-budget-lead { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--accent-2); }
.pkx-budget-row { display: flex; gap: 9px; }
.pkx-budget-row .form-input { flex: 1; min-width: 0; height: 42px; font-size: 15px; font-weight: 600; }
.pkx-budget-row .btn { height: 42px; padding: 0 18px; }
.pkx-budget-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* packages — curated blueprint grid, 4 per row */
.pkx-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.pkx-bp {
  display: flex; flex-direction: column; gap: 5px; padding: 0 20px 20px;
  position: relative; overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.pkx-bp:hover { transform: translateY(-3px); border-color: var(--border-strong); }
/* full-bleed product-art band across the top of the card */
.pkx-bp-art {
  display: flex; align-items: center; justify-content: center;
  height: 152px; margin: 0 -20px 16px;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.pkx-bp-art img {
  width: 108px; height: 108px; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}
.pkx-bp-art img + img { margin-left: -24px; }
.pkx-bp-name {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted);
}
.pkx-bp-amt { font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; font-family: var(--font-display); }
.pkx-bp-off { margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--money-strong); }
.pkx-bp-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 16px; }
.pkx-bp-cta { margin-top: auto; }
/* Load CTA now rides the blue accent so it matches "Add to package" and the
   rest of the light theme (was a loud lime). id-scoped to beat legacy rules. */
#root .pkx-bp-cta { background: var(--accent); color: #fff; box-shadow: none; }
#root .pkx-bp-cta:hover { background: var(--accent-strong, #1d84e8); box-shadow: none; filter: none; }

/* packages — catalog extras */
.pkx-cattabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pkx-disc-chip {
  display: inline-flex; align-items: center; margin-left: 6px;
  height: 18px; padding: 0 7px; border-radius: 99px;
  background: var(--money-tint); border: 1px solid var(--money-border);
  color: var(--money-strong); font-size: 10px; font-weight: 800;
}

/* packages — the fixed package tray (bottom dock) */
.pkx-tray {
  position: fixed; left: var(--sb-w); right: 0; bottom: 0; z-index: 65;
  background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
}
.pkx-tray-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 22px; background: none; border: 0; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 13px; text-align: left;
}
.pkx-tray-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent-tint); color: var(--accent-2);
  border: 1px solid var(--accent-faint-border);
}
.pkx-tray-sum { color: var(--body); }
.pkx-tray-sum strong { color: var(--text); }
.pkx-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 99px; font-size: 10.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--muted);
}
.pkx-chip-on { background: var(--money-tint); border-color: var(--money-border); color: var(--money-strong); }
.pkx-tray-amt { margin-left: auto; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.pkx-tray-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-2); font-size: 12px; font-weight: 700; }
.pkx-tray-panel {
  display: grid; grid-template-columns: 1fr 330px; gap: 20px;
  padding: 4px 22px 18px; border-top: 1px solid var(--border);
}
.pkx-tray-lines { overflow-y: auto; max-height: min(38vh, 340px); padding: 8px 4px 0 0; }
.pkx-line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto;
  gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.pkx-line:last-child { border-bottom: 0; }
.pkx-line-art .cat-art { border: 1px solid var(--border); border-radius: 9px; width: 44px; }
.pkx-line-art .cat-art-img { animation: none; max-width: 78%; }
.pkx-line-name .n { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkx-line-name .s { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
.pkx-line-total { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }
.pkx-line-rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: none; border: 1px solid var(--border); color: var(--muted-2); cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.pkx-line-rm:hover { color: var(--danger); border-color: var(--danger); }
.pkx-totals { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; }
.pkx-meter-bar { height: 5px; border-radius: 99px; background: var(--border-strong); overflow: hidden; }
.pkx-meter-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.25s ease; }
.pkx-meter-lbl { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.pkx-meter-lbl strong { color: var(--text); }
.pkx-over {
  display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--warn);
  background: var(--warn-tint); border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.5;
}
.pkx-tot-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.pkx-tot-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.pkx-tot-row em { font-style: normal; font-size: 11px; color: var(--muted-2); font-weight: 400; }
.pkx-tot-disc strong { color: var(--money-strong); }
.pkx-tot-grand { padding-top: 8px; border-top: 1px solid var(--border-strong); font-size: 13.5px; color: var(--body); }
.pkx-tot-grand strong { font-size: 16px; }
.pkx-blend-star {
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--money-tint); border: 1px solid var(--money-border);
}
.pkx-blend-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--body); }
.pkx-blend-row em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; }
.pkx-blend-row strong { font-size: 15px; color: var(--money-strong); font-variant-numeric: tabular-nums; }
.pkx-blend-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.pkx-blend-sub strong { color: var(--money-strong); }
.pkx-scale { display: flex; gap: 8px; }
.pkx-scale .form-input { height: 32px; font-size: 12px; flex: 1; min-width: 0; }
.pkx-tray-actions { display: flex; gap: 8px; margin-top: 2px; }
.pkx-checkout-btn { flex: 1; height: 40px; font-size: 13.5px; }

/* checkout modal — package line list */
.ck-lines-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; }
.ck-lines-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted);
}
.ck-lines-hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.ck-lines-wrap::after {
  content: ''; position: absolute; left: 1px; right: 10px; bottom: 1px; height: 26px;
  pointer-events: none; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.ck-lines { max-height: 264px; overflow-y: auto; padding: 4px 12px 18px; }
.ck-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ck-line:last-child { border-bottom: 0; }
.ck-line-art .cat-art { border: 1px solid var(--border); border-radius: 8px; width: 40px; }
.ck-line-art .cat-art-img { animation: none; }
.ck-line-name .n { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-line-name .s { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ck-line-total { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-disc { color: var(--money-strong); }
.ck-receive {
  background: var(--money-tint); border-radius: var(--radius-sm);
  margin: 2px -8px; padding: 9px 8px !important;
}
.ck-receive em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; }
.ck-receive strong { color: var(--money-strong); font-size: 15px; }
.ck-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }
.ck-note strong { color: var(--money-strong); }

/* Inventory CTA hovers: the legacy rules were authored for a light theme
   (primary → #000 bg hid the dark label; ghost → #d4d4d4 border flashed white
   on the dark card). Retheme both for the pinned-dark portal. portal.css loads
   after styles.css, so these win. */
.inv-cta-primary:hover { background: color-mix(in srgb, var(--text) 90%, #000); color: var(--surface); }
.inv-cta-ghost:hover { background: var(--surface-alt); border-color: var(--border-strong); }

/* sell-through — inventory + dashboard */
.inv-sold-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--money-strong); }
.status-badge.status-sold { background: var(--money-tint); color: var(--money-strong); border: 1px solid var(--money-border); }

.dash-realize {
  padding: 16px 20px; margin: 0 0 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.dash-realize-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; color: var(--body); }
.dash-realize-head strong { color: var(--text); }
.dash-realize-grid { display: grid; grid-template-columns: auto auto auto minmax(220px, 1.4fr) auto; gap: 26px; align-items: center; }
.dash-realize-cell .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted-2); }
.dash-realize-cell .val { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dash-realize-cell .sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.dash-realize-arrow { color: var(--money); }
.dash-realize-pct { font-size: 12px; font-weight: 800; color: var(--money-strong); margin-left: 4px; }
.dash-realize-bar { display: block; max-width: 260px; margin-top: 7px; }
.dash-realize-empty p { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px; max-width: 560px; line-height: 1.6; }

@media (max-width: 1000px) {
  .pkx-tray { left: 0; bottom: 62px; }   /* sit above the mobile bottom nav */
  .pkx-tray-panel { grid-template-columns: 1fr; gap: 8px; }
  .pkx-tray-lines { max-height: 30vh; }
  .pkx-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-realize-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-realize-arrow { display: none; }
}
@media (max-width: 560px) {
  .pkx-tray-sum { display: none; }
  .pkx-rail { grid-template-columns: 1fr; }
  .pkx-budget-row { flex-direction: column; }
  .dash-realize-grid { grid-template-columns: 1fr; }
}

/* network — the rank ladder inside its section card; the held rank wears the
   green border. auto-fit keeps them 5-up on desktop, wrapping on mobile. */
.rank-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-top: 16px;
}
.rank-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 22px 14px 15px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rank-card:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.05); }
.rank-card .lead-crest { margin-bottom: 10px; }
.rank-card-name { font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.2px; }
/* pool state — the per-rank differentiator; the section header carries the
   shared 2%-pool figure once */
.rank-card-pool { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.rank-card-pool.is-open { color: var(--muted-2); }
.rank-card-pool.is-mine { color: var(--money, #34d399); font-weight: 700; }
.rank-card-reqs { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); align-self: stretch; }
.rank-card-req { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.6; }
.rank-card-maint {
  font-size: 10.5px; color: var(--muted-2); line-height: 1.5;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); align-self: stretch;
}
.rank-card.is-current { border-color: var(--accent); }

/* referral tree — pure-CSS org chart. ::before/::after borders draw the
   connectors (canonical technique): ::after carries the right-half horizontal
   + the center vertical; edge children drop the outer halves. Wide teams
   scroll horizontally inside the card. */
.tree-card { padding: 22px 24px 14px; margin-bottom: 30px; }
/* Full screen — native fullscreen and the iOS fixed-overlay fallback share
   one layout: the card becomes a column and the tree well takes the slack,
   so a deep downline gets the whole viewport to pan around in. */
.tree-card:fullscreen,
.tree-card.is-maxed {
  display: flex; flex-direction: column; margin: 0; border-radius: 0;
  background: var(--bg-app); overflow: hidden;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
.tree-card.is-maxed { position: fixed; inset: 0; z-index: 200; }
.tree-card:fullscreen .net-tree-wrap,
.tree-card.is-maxed .net-tree-wrap {
  flex: 1; min-height: 0; overflow: auto; margin-bottom: 0;
}
body.tree-maxed { overflow: hidden; }
.tree-fs-btn { flex: none; }
.tree-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.tree-title { margin: 0 0 5px; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.tree-sub { margin: 0; max-width: 52ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
/* the ranks section has no side table — let the description run full width */
.rank-sec .tree-sub { max-width: none; }
.tree-sub strong { color: var(--text); font-weight: 650; }
/* per-level summary — a quiet aligned table, not chips */
/* The chart well: an inset panel with a faint dot grid behind the chart.
   The root ul is width:max-content + margin:auto — centered while it fits,
   fully reachable via scroll once wider than the well (justify-content:center
   inside an overflow container would clip the left edge). */
.net-tree-wrap {
  overflow-x: auto; margin-top: 14px; padding: 18px 14px 16px;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.net-tree { width: max-content; margin: 0 auto; }
.net-tree, .net-tree ul {
  display: flex; justify-content: center; align-items: flex-start;
  list-style: none; margin: 0 auto; padding: 0; position: relative;
}
.net-tree ul { padding-top: 18px; }
.net-tree ul::before {
  content: ''; position: absolute; top: 0; left: 50%; height: 18px; width: 0;
  border-left: 1px solid var(--border-strong);
}
.net-tree li {
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding: 18px 6px 0;
}
.net-tree li::before, .net-tree li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  border-top: 1px solid var(--border-strong); width: 50%; height: 18px;
}
.net-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--border-strong); }
.net-tree li:first-child::before, .net-tree li:last-child::after { border: 0 none; }
.net-tree li:last-child::before { border-right: 1px solid var(--border-strong); }
/* the root row has no incoming connector */
.net-tree > li { padding-top: 0; }
.net-tree > li::before, .net-tree > li::after { display: none; }

.tree-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 10px 9px; border-radius: 12px;
  width: 158px; box-sizing: border-box;   /* identical card geometry = symmetric rows */
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tree-node.is-root { width: auto; min-width: 200px; padding: 11px 18px 10px; }
.tree-node-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tree-node:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.05); }
.tree-node.is-root { border-color: var(--accent); }
.tree-node.is-idle { opacity: 0.55; }
/* avatar + activity dot pinned to its corner */
.tree-ava { position: relative; display: inline-flex; margin-bottom: 5px; }
.tree-ava .avatar { width: 34px; height: 34px; font-size: 11px; border: 2px solid var(--border-strong); }
.tree-node.is-root .tree-ava .avatar { width: 44px; height: 44px; border-color: var(--accent); }
.tree-ava::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--muted-2); border: 2px solid #101013;
}
.tree-ava.on::after { background: var(--money, #34d399); }
.tree-node-top { display: inline-flex; align-items: center; gap: 6px; }
.tree-node-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tree-node-num { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* attribution stays quiet on branch nodes; only the root total wears money */
.tree-node-earn {
  font-size: 10.5px; color: var(--muted-2);
  white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 1px;
}
.tree-node-earn.is-total { color: var(--money, #34d399); font-weight: 700; }
.tree-node-sub { font-size: 10px; color: var(--muted-2); }
.tree-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--money, #34d399); margin-right: 2px; vertical-align: baseline;
}
@media (max-width: 860px) {
  .tree-head { flex-direction: column; gap: 14px; }
}
.net-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); margin-right: 7px; }
.net-dot.on { background: var(--money); }

/* direct-referrals table cells */
.net-rank-cell { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.net-rank-cell.is-none { color: var(--muted-2); font-weight: 500; }
.net-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.net-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.net-status.on { color: var(--text); }
.net-status.on i { background: var(--money); }

/* monthly maintenance — quiet spec rows */
.maint-list { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.maint-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; font-size: 12.5px; color: var(--muted);
}
.maint-row + .maint-row { border-top: 1px solid var(--border); }
.maint-row strong { color: var(--text); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.maint-warn { color: var(--warn); }

/* rank history — timeline rows */
.net-hist { display: flex; flex-direction: column; }
.net-hist-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.net-hist-row:last-child { border-bottom: 0; }
.net-hist-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted-2); }
.net-hist-dot.ok { background: var(--money); }
.net-hist-dot.warn { background: var(--warn); }
.net-hist-dot.bad { background: var(--danger); }
.net-hist-main { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-hist-main strong { color: var(--text); font-weight: 650; }
.net-hist-period { color: var(--muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; }

/* refer & earn */
/* referral share — one subtle bar: label + link, copy, icon tools */
.ref-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 30px;
}
.ref-bar-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.ref-bar-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-bar-link {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-bar-tiles { display: flex; gap: 7px; }
.ref-ic {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.ref-ic:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-raise); }
.ref-ic.is-copied { color: var(--money); border-color: var(--money-border); }
/* live QR thumbnail — the whole tile saves the PNG */
.ref-bar-qr {
  flex: none; display: inline-flex; padding: 4px; border: 0; border-radius: 8px;
  background: #fff; cursor: pointer; transition: transform 0.12s ease;
}
.ref-bar-qr:hover { transform: scale(1.05); }
.ref-bar-qr svg { display: block; width: 48px; height: 48px; }
.ref-qr-frame {
  background: #fff; padding: 10px; border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--glass-border);
}
.ref-qr-frame svg { display: block; }
.ref-mid { margin: 18px 0; }
.ref-math { display: flex; flex-direction: column; }
.ref-illustrative {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px; border-radius: 99px;
  background: var(--accent-tint); border: 1px solid var(--accent-faint-border);
  color: var(--accent-2); font-size: 10.5px; font-weight: 700;
}
.ref-deck { padding: 22px 24px; margin-bottom: 18px; }
.ref-deck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.ref-deck-head h3 { margin: 7px 0 7px; font-size: 19px; font-weight: 800; letter-spacing: -0.4px; font-family: var(--font-display); }
.ref-deck-head p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 520px; }
.ref-deck-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-deck-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong);
  background: #07070a;
}
.ref-deck-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ref-faq { border-bottom: 1px solid var(--border); }
.ref-faq:last-of-type { border-bottom: 0; }
.ref-faq summary {
  cursor: pointer; list-style: none; padding: 13px 2px;
  font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between;
}
.ref-faq summary::-webkit-details-marker { display: none; }
.ref-faq summary::after { content: '+'; color: var(--muted-2); font-size: 17px; font-weight: 500; transition: transform 0.15s ease; }
.ref-faq[open] summary::after { transform: rotate(45deg); }
.ref-faq p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.65; max-width: 640px; }
.ref-faq a, .r-footnote a, .wel-sub a, .step-desc a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }

/* earnings */
.earn-hero { display: flex; align-items: center; gap: 26px; padding: 22px 26px; flex-wrap: wrap; }
.earn-hero-amt { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 4px; font-family: var(--font-display); }
.earn-hero-sub { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; }

/* ── 7 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .tb-search { min-width: 0; padding: 0 9px; }
  .tb-search .tb-search-lbl, .tb-search kbd { display: none; }
  .tb-refer .tb-refer-lbl { display: none; }
  .tb-refer { width: 34px; padding: 0; justify-content: center; }
  .tb-crumb { display: none; }
}
@media (max-width: 1000px) {
  /* sidebar folds away; brand moves into the topbar; bottom nav takes over */
  .sb { display: none; }
  .shell-main { margin-left: 0; }
  .tb-logo { display: inline-flex; }
  .tb-title { display: none; }
  .mb-nav { display: flex; }
  /* fixed bottom nav: clearance moves BELOW the footer, not above it */
  .shell-page { padding-bottom: 28px; }
  .dash-foot { padding-bottom: 110px; }
}
@media (max-width: 860px) {
  /* the chip keeps its amount on phones (2026-07-26 owner ask) — only the
     inner paddings tighten a step */
  .tb-balance { padding: 4px 4px 4px 10px; gap: 7px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell { border-left: 0; border-top: 1px solid var(--border); }
  .kpi-cell:nth-child(-n + 2) { border-top: 0; }
  .kpi-cell:nth-child(even) { border-left: 1px solid var(--border); }
}
@media (max-width: 720px) {
  /* bell stays on phones (2026-08-06 owner ask) — the unread badge is the
     only glanceable "something happened" signal on mobile */
  .shell-page { padding: 18px 14px 24px; }
  .dash-foot { padding-left: 14px; padding-right: 14px; }
  .wel h2 { font-size: 22px; }
  .tb-in { padding: 0 14px; gap: 10px; }
  .tb-menu { right: 14px; }
  #tier-demo-banner { bottom: 78px !important; }
  /* hero skyline: match the tighter page padding, keep only the center cluster */
  .wel-glow { inset: 0 -14px -50px; justify-content: center; }
  .wel-glow-cluster:first-child, .wel-glow-cluster:last-child { display: none; }
  .dash-hero__bar { --cs: 0.6; }
}
@media (max-width: 560px) {
  /* phones keep the 2x2 grid (2026-08-06 owner ask — reference layout); cells
     just tighten. The 860px block already set the 2-col borders. */
  .kpi-cell { padding: 13px 14px; }
}
@media (max-width: 900px) {
  .dash-tables { grid-template-columns: 1fr !important; }
  .refer-banner { grid-template-columns: 1fr; gap: 18px; }
  .ref-share-grid { grid-template-columns: 1fr; }
}
@media (min-width: 2200px) {
  .shell-page { padding: 30px 36px 100px; }
}

/* ── 8 · MODES ──────────────────────────────────────────────────────────── */
@media print {
  :root, html[data-theme='dark'] {
    --bg-app: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-alt: #f6f6f6;
    --surface-raise: #ffffff;
    --glass-bg: #ffffff; --glass-border: #dddddd;
    --text: #111111; --muted: #555555; --muted-2: #777777;
    --border: #dddddd; --border-strong: #bbbbbb;
    --card-shadow: none; --glass-shadow: none; --pop-shadow: none;
    --chart-grid: #e5e5e5; --chart-track: #eeeeee; --chart-bar: #999999;
    --row-hover: transparent;
  }
  body { background: #ffffff !important; color: #111111; display: block; }
  .tb, .sb, .mb-nav, .mb-sheet, .mb-sheet-backdrop, .tb-menu, .shell-toast, .wel-actions, .wel-glow { display: none !important; }
  .shell-page { max-width: none; padding: 0; }
  .card, .card-glass, .kpi-strip { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 9 · LEGACY BRIDGE ──────────────────────────────────────────────────────
   Small overrides that keep the not-yet-rebuilt pages coherent on the new
   canvas. Deleted (with styles.css) once every page is rebuilt. */
.shell-topbar, .shell-sidebar { display: none; }
/* light-mode literals the legacy dark block misses */
.inv-status-listed { background: var(--money-tint) !important; color: var(--money) !important; }
.inv-status-unlisted { background: var(--surface-raise) !important; color: var(--muted) !important; }
.r-ladder-track-line { background: var(--border-strong) !important; }
.dash-hero, .rewards-hero, .ref-hero, .payout-hero { border-radius: var(--radius-lg); }
.r-footnote {
  color: var(--muted-2); font-size: 12px; margin-top: 16px; line-height: 1.7;
  background: transparent; border: 0; padding: 0;
}
.r-footnote strong { color: var(--muted); }
.mono { font-family: var(--font-mono, ui-monospace, monospace); }

/* ═══ 12 · MOBILE ERGONOMICS + THE WIDE-SCREEN LADDER ═════════════════════
   Interaction fixes from the 2026-07-10 mobile audit. Kept in one block at
   the end of the sheet so the overrides win by source order. */

/* iOS paints a gray flash on every tap without this; a press state replaces it. */
html { -webkit-tap-highlight-color: transparent; }
.btn:active, .row-actions:active, .qty-btn:active, .tb-iconbtn:active, .mb-tab:active { transform: scale(0.97); }

/* styles.css scaled --sidebar-w up to 300px on wide screens, but the live
   shell reads --sb-w, which never changed -- the ladder was dead. Scale the
   token the shell actually consumes. */
@media (min-width: 1600px) { :root { --sb-w: 260px; } }
@media (min-width: 2400px) { :root { --sb-w: 280px; } }
@media (min-width: 3000px) { :root { --sb-w: 300px; } }

/* The date-range calendar popover can outgrow a short viewport. */
.chart-pop { max-height: min(70vh, 520px); overflow-y: auto; }

/* Bottom-anchored surfaces respect the iOS home indicator. 100dvh (not
   100vh) so the drawer tracks the real visual viewport under Safari's
   collapsing chrome. */
.drawer { height: 100dvh; }

/* The tooltip chip: hover is dead on touch, so taps toggle .is-open
   (wired in pages.js). Same visible state as hover/focus. */
.help-tip.is-open { color: var(--accent); border-color: var(--accent-faint-border); }
.help-tip.is-open::after { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.kpi-cell:first-child .help-tip.is-open::after { transform: translateX(0) translateY(0); }

@media (max-width: 720px) {
  /* iOS auto-zooms any focused input under 16px -- the single biggest
     mobile-form annoyance. */
  .form-input, select.form-input, textarea.form-input, .cat-search-input, .cmdk-input { font-size: 16px; }

  /* Touch targets: everything that was 26-30px moves into the 34-38px band. */
  .row-actions { width: 38px; height: 38px; }
  .qty-btn { width: 38px; height: 34px; }
  .qty-input { height: 34px; }
  .pkx-line-rm { width: 34px; height: 34px; }
  .modal-close { width: 38px; height: 38px; }
  .drawer-close { width: 38px; height: 38px; }
  .help-tip { width: 22px; height: 22px; font-size: 11px; }

  /* Refer page: three stat tiles were jammed side by side at 390px. */
  .ref-mini-stats { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  /* The toast used to render at bottom:26px -- underneath the bottom nav.
     Lift it above the nav + package tray stack. */
  .shell-toast { bottom: calc(128px + env(safe-area-inset-bottom)); }
  /* Tray (56px, bottom:62) + nav (59px) = 121px of chrome; clearance lives
     below the footer (last element) so nothing hides behind the stack. */
  .dash-foot { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
  #tier-demo-banner { bottom: calc(128px + env(safe-area-inset-bottom)) !important; }
  /* Modal/drawer CTAs clear the home indicator. */
  .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .drawer-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ═══ 13 · DEPOSITS — the amount-first funding flow ═══════════════════════
   The old page showed four QR codes at once and asked "how much did you
   send (USD)?" -- a question the seller cannot answer precisely. The flow is
   now: amount -> coin -> ONE send screen -> status. Funding language only
   (add funds / balance) -- never investment framing. */
.dep-rail { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.dep-rail-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.dep-rail-step .n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dep-rail-step.is-on { color: var(--text); }
.dep-rail-step.is-on .n { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.dep-rail-step.is-done { color: var(--muted); }
.dep-rail-step.is-done .n { border-color: var(--money-border); color: var(--money); background: var(--money-tint); }
.dep-rail-sep { flex: none; width: 22px; height: 1px; background: var(--border-strong); }

.dep-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.dep-chip {
  padding: 18px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: none; color: var(--text); cursor: pointer; text-align: center; font-family: inherit;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.dep-chip:hover { border-color: var(--accent-faint-border); background: var(--accent-faint); transform: translateY(-1px); }
.dep-chip b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dep-chip span { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.dep-custom { display: flex; gap: 10px; margin-top: 12px; }
.dep-custom .form-input { flex: 1; min-width: 0; height: 46px; font-size: 16px; font-weight: 600; }

.dep-coins { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.dep-coin {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: none; color: var(--text); cursor: pointer; font-family: inherit;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.dep-coin:hover { border-color: var(--accent-faint-border); background: var(--accent-faint); }
.dep-coin b { font-size: 14px; font-weight: 700; }
.dep-coin-icon { display: block; flex: none; border-radius: 50%; }
.dep-coin .net { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-2); border: 1px solid var(--border-strong); border-radius: 99px; padding: 3px 9px; }

.dep-send { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; margin-top: 16px; }
.dep-qr { background: #fff; border-radius: 12px; padding: 10px; line-height: 0; width: max-content; }
.dep-send-fields { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dep-field-label { font-size: 11px; font-weight: 700; letter-spacing: var(--track-caps, 0.08em); text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.dep-copyrow { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.dep-copyrow code { flex: 1; min-width: 0; font-family: var(--font-mono, monospace); font-size: 12px; word-break: break-all; color: var(--body); }
.dep-next { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.dep-next b { color: var(--text); }

.dep-timeline { display: flex; align-items: center; gap: 0; margin: 6px 0 2px; }
.dep-tl-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.dep-tl-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); }
.dep-tl-node.done .dep-tl-dot { border-color: var(--money); background: var(--money); }
.dep-tl-node.now .dep-tl-dot { border-color: var(--accent); background: var(--accent-tint); animation: depPulse 1.8s ease-out infinite; }
.dep-tl-node span { font-size: 11px; font-weight: 600; color: var(--muted-2); }
.dep-tl-node.done span, .dep-tl-node.now span { color: var(--text); }
.dep-tl-bar { flex: 1; height: 2px; background: var(--border-strong); margin: 0 4px 18px; }
.dep-tl-bar.done { background: var(--money); }
@keyframes depPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

@media (max-width: 720px) {
  .dep-send { grid-template-columns: 1fr; }
  .dep-qr { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dep-tl-node.now .dep-tl-dot { animation: none; }
}

/* First-run checklist — replaces the empty chart + tables for a zero-order
   account. Step state is live; step numbers become checks as they complete. */
.dash-first { margin-bottom: 18px; }
.dash-first-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-first-step {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; background: var(--surface-alt);
}
.dash-first-step.now { border-color: var(--accent-faint-border); background: var(--accent-faint); }
.dash-first-step.done { opacity: 0.72; }
.dash-first-n {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--muted-2); border: 1px solid var(--border-strong);
}
.dash-first-step.now .dash-first-n { color: var(--accent); border-color: var(--accent-faint-border); background: var(--accent-tint); }
.dash-first-step.done .dash-first-n { color: var(--money); border-color: var(--money-border); background: var(--money-tint); }
.dash-first-body { flex: 1; min-width: 0; }
.dash-first-body b { display: block; font-size: 14px; font-weight: 700; }
.dash-first-body p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 720px) {
  .dash-first-step { flex-wrap: wrap; }
  .dash-first-step .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   PORTAL v2 — HalalMM green design system

   TOKENS live on body.route-v2 (always on, set by render()) so every route —
   and every body-mounted overlay (modals, toasts, cmdk, notifications) —
   resolves the lime-green system: CSS variables resolve from the NEAREST
   ancestor, so body-level values shadow the legacy amber html[data-theme]
   ones everywhere. Shared-chrome element rules ride #root.route-v2.
   Dashboard-ONLY layout (hero bars, KPI geometry, twin tables) stays scoped
   to #root.route-dash below.
   ════════════════════════════════════════════════════════════════════════ */
body.route-v2 {
  /* action + brand accent -> the reference lime green (exact site tokens:
     --color-accent #88ff6a, alphas 15/25/40, text-inverse #090909) */
  --accent: #88ff6a;
  --accent-hover: #9dff85;
  --accent-2: #a6ff90;
  --accent-deep: #5fe04a;
  --accent-ink: #090909;
  --accent-tint: rgba(136, 255, 106, 0.12);
  --accent-faint: rgba(136, 255, 106, 0.05);
  --accent-faint-border: rgba(136, 255, 106, 0.2);
  /* glow retired (owner-directed 2026-08-06): decorative accent shadows read
     cheap on the darker canvas. Kept as a token so consumers resolve to none. */
  --accent-glow: rgba(136, 255, 106, 0);
  --accent-soft: rgba(136, 255, 106, 0.08);
  /* the reference runs a single green — money-positive rides the same lime */
  --money: #88ff6a;
  --money-strong: #b6ffa2;
  --money-tint: rgba(136, 255, 106, 0.13);
  --money-border: rgba(136, 255, 106, 0.28);
  /* twin chart lines: first green, second red (--color-error #ef4444), over
     faint dashed gridlines */
  --chart-1: #88ff6a;
  --chart-2: #ef4444;
  --chart-grid: rgba(255, 255, 255, 0.06);
  /* surfaces + borders — pitch cut (owner-directed 2026-08-06): true-black
     canvas, panels barely off black so borders — not grey fills — do the
     separating */
  --bg-app: #000000;
  --bg: #000000;
  --surface: #070707;
  --surface-alt: #101010;
  --surface-raise: #101010;
  --row-hover: #0a0a0a;
  --glass-bg: #070707;
  --border: #141414;
  --glass-border: #141414;
  --border-strong: #ffffff12;
  /* ink — the reference's white-alpha ramp (#fff / #fffc / #ffffff80 / 40%) */
  --text: #fff;
  --body: #fffc;
  --muted: #ffffff80;
  --muted-2: rgba(255, 255, 255, 0.4);
  /* geometry + type — radius-14 cards, Inter Tight display, -0.02em tracking */
  --radius-lg: 14px;
  --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --track-h: -0.02em;
}
/* scrollbar: neutral grey thumb — the lime one shouted from browser chrome */
html:has(body.route-v2) { scrollbar-color: #2a2a2a #0a0a0a; }
html:has(body.route-v2) *::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
html:has(body.route-v2) *::-webkit-scrollbar-track { background: #0a0a0a; }
/* reference buttons are dark panels with subtle borders; the green primary
   keeps its fill (excluded so the id-scoped rule can't outrank .btn-primary) */
#root.route-v2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-money) {
  background: #101010;
  border-color: #ffffff12;
}
#root.route-v2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-money):hover {
  background: #181818;
  border-color: rgba(255, 255, 255, 0.14);
}
/* KPI cell: value left, delta pill right (the reference row layout) */
#root.route-dash .kpi-cell-row { justify-content: space-between; }
/* hero skyline — the exact landing-hero__bars-row: flat 13-bar run, each bar
   95.55px wide carrying the site's own vertical gradient (50%-alpha auth
   variant), still (no breathe/drift), softened by blur + the .wel-glow masks */
/* Exact copy of HalalMM's hero: a relative wrapper holds a bar LAYER plus the
   (header + KPI grid) content. The bars are an absolute inset-0 flex row,
   bottom-anchored (items-end), sitting BEHIND the z-10 content. The opaque KPI
   cards cover the bars' base, so only their crisp green tops form the skyline
   above the strip. Crisp — no blur, no mask. */
#root.route-dash .dash-hero-wrap { position: relative; margin-top: 16px; margin-bottom: 30px; }
#root.route-dash .dash-hero-bars {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: flex-end; overflow: hidden;
  pointer-events: none;
}
#root.route-dash .dash-hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 32px;
}
#root.route-dash .dash-hero-content .wel { margin-bottom: 0; }
#root.route-dash .dash-hero__bar {
  /* equal-width bars stretching to fill the container edge-to-edge */
  flex: 1 1 0; min-width: 0;
  width: var(--dash-hero-bar-width, 95.55px);
  height: var(--dash-hero-bar-height, 120px);
  background: linear-gradient(180deg, #05130180, #195f0780 25.48%, #88ff6a80 51.44%, #195f0780 74.04%, #05130180);
  /* override the base .dash-hero__bar glow/blur/breathe — crisp, static */
  box-shadow: none;
  filter: none;
  animation: none;
  transform: none;
  opacity: 1;
}

/* ── Header (reference dash-header): title + subtitle only ─────────────────── */
#root.route-dash .dash-header__title {
  margin: 0; font-family: var(--font-sans);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #fff;
}
#root.route-dash .dash-header__subtitle {
  margin: 12px 0 0; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 20px; color: #ffffff99;
}

/* v2 topbar (all routes): drop the Refer & earn button, center the balance chip */
#root.route-v2 .tb-refer { display: none; }
#root.route-v2 .tb-in { position: relative; }
#root.route-v2 .tb-balance {
  /* nudged right of the true window center so it doesn't read left-heavy against
     the sidebar's visual weight — sits midway between the window center and the
     content-area center */
  position: absolute; left: calc(50% - var(--sb-w) / 4); top: 50%; transform: translate(-50%, -50%); margin: 0;
  border-radius: 8px;    /* more rectangular than the pill */
  background: #060606;   /* deeper dark */
}
#root.route-v2 .tb-balance:hover { background: #101010; }
#root.route-v2 .tb-balance-ic { color: rgba(255, 255, 255, 0.55); }
#root.route-dash .dash-header__subtitle strong { color: #fff; font-weight: 600; }

/* ── KPI cells: icon+title pinned top, value pinned bottom. The grid row gets a
   DEFINITE height so it isn't overly tall AND so the promo panel's height:100%
   resolves (against an auto row it silently collapses, leaving a dark gap). ─── */
/* 94px is a compacted cut of the reference geometry (owner-directed
   2026-08-03), but a MINIMUM: cells that carry a .kpi-cell-sub (network) or
   wrapped promo copy at narrow-desktop widths would overflow a fixed track —
   rows grow together instead. */
#root.route-dash .kpi-strip { grid-auto-rows: minmax(94px, auto); }
/* border-radius 0 so the border-left dividers are straight top-to-bottom (the
   base cell's rounding bent them at the ends); the promo cell re-rounds its
   right corners below. */
#root.route-dash .kpi-cell { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; border-radius: 0; }
#root.route-dash .kpi-cell-head .ic-box { color: var(--accent); }

/* Delta indicator: the green increase glyph + the % (no pill box) */
#root.route-dash .dash-delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
#root.route-dash .dash-delta svg { flex: none; display: block; }
#root.route-dash .dash-delta.down { color: var(--danger); }
#root.route-dash .dash-delta.down svg { transform: scaleY(-1); }

/* ── 4th cell: the reference's green promo panel. The green IS the section
   background (flex:1 fills the whole cell); text content sits at the TOP,
   aligned with the metric-cell titles, green filling below. ────────────────── */
/* The green sits on the CELL itself (a grid item that fills the 118px row), so
   it always fills the whole section; the content flows at the top. */
#root.route-dash .kpi-cell--promo {
  padding: 14px 18px;   /* matches the metric-cell padding so the title lines up */
  justify-content: flex-start;
  background: #88ff6a;   /* solid brand green, black content */
  border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0;
  overflow: hidden;
}
#root.route-dash .dash-promo-gradient-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%;
}
#root.route-dash .dash-promo-gradient-panel__title {
  margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em; color: #090909;
}
#root.route-dash .dash-promo-gradient-panel__desc { margin: 1px 0 0; font-size: 11.5px; font-weight: 500; color: rgba(9, 9, 9, 0.7); }
#root.route-dash .dash-promo-gradient-panel__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 8px; text-decoration: none;
  background: #090909; color: #fff; font-size: 12.5px; font-weight: 700;   /* black button, white text */
  transition: filter 0.15s ease;
}
#root.route-dash .dash-promo-gradient-panel__cta:hover { filter: brightness(1.6); }
#root.route-dash .dash-promo-gradient-panel__cta > svg { color: #fff; }

/* ── Chart title glyph: the supplied green check, no tinted circle ─────────── */
#root.route-dash .chart-title-ic {
  width: 17px; height: 17px; border-radius: 0; background: transparent; color: var(--accent);
}
/* no glow behind the Spend / Affiliate earnings legend dots (kills the inline
   box-shadow; scoped to the legend so hover-tooltip dots are untouched) */

/* hairline separating the KPI container from the graph section */
#root.route-dash .dash-hairline-divider { height: 1px; background: rgba(255, 255, 255, 0.09); margin: 0 0 30px; }
/* more breathing room between the major dashboard sections */
#root.route-dash .chart-sec { margin-bottom: 30px; }
#root.route-dash .dash-tables { margin-bottom: 30px; }
/* more gap between the chart header (title/legend/Customize/range) and the plot */
#root.route-dash .chart-sec-head { margin-bottom: 20px; }
/* reference table foot — "Create another deal? Click here" pattern, with a
   hairline separating it from the last row */
.dash-tbl-foot {
  text-align: center; padding: 12px 0 8px; margin-top: 2px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
/* separator-only foot (no link) — matches the text foot's height so both
   cards' hairlines land at the same level */
.dash-tbl-foot--bare { min-height: 36px; }
/* marketplace pill in the Recent-sales table */
.market-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); background: var(--surface-alt);
  border: 1px solid var(--border); white-space: nowrap;
}
.dash-tbl-foot a { color: var(--accent); font-weight: 650; text-decoration: none; }
.dash-tbl-foot a:hover { text-decoration: underline; }
/* the up-delta pill's ring was pinned emerald — bring it onto the green */
#root.route-v2 .delta-pill.up { border-color: rgba(136, 255, 106, 0.30); }
/* selection wash to match the green on this route */
body.route-v2 ::selection { background: rgba(136, 255, 106, 0.2); color: #eaffe4; }

/* KPI value scales up to the reference's headline size */
#root.route-dash .kpi-cell-value { font-size: 30px; }
#root.route-dash .kpi-cell { padding: 20px 22px; }
/* phones: 2x2 stays (reference layout) — cells compact, values step down, and
   the promo cell re-rounds only its true outer corner per layout */
@media (max-width: 860px) {
  #root.route-dash .kpi-cell--promo,
  .kpi-cell--promo { border-radius: 0 0 calc(var(--radius-lg) - 1px) 0; }
}
@media (max-width: 560px) {
  #root.route-dash .kpi-cell { padding: 13px 14px; }
  #root.route-dash .kpi-cell-value { font-size: 21px; }
  #root.route-dash .kpi-strip { grid-auto-rows: minmax(84px, auto); }
  #root.route-dash .dash-promo-gradient-panel__desc { display: none; }
  #root.route-dash .dash-promo-gradient-panel__cta { height: 28px; padding: 0 11px; font-size: 12px; margin-top: 2px; }
}

/* Chart panel — a touch more breathing room, reference-tall */
#root.route-dash .chart-shell { padding: 14px 18px 8px; }
#root.route-dash .chart-title { font-size: 17px; }
#root.route-dash .chart-title-ic { width: 20px; height: 20px; }

/* Header search — mirrors the topbar pill, sized for the hero row (the
   reference's header search box). Opens the same command palette. */
.wel-search {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 8px 0 14px; min-width: 236px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 500; font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wel-search:hover { border-color: #333; color: var(--text); }
.wel-search > svg { color: var(--muted); flex: none; }
.wel-search .wel-search-txt { margin-right: auto; }
.wel-search kbd {
  min-width: 20px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: 6px; font: 600 11px/1 var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
}
@media (max-width: 720px) {
  .wel-search { min-width: 0; flex: 1; }
  .wel-search .wel-search-txt, .wel-search kbd { display: none; }
}

/* Twin tables — surface the row count beside the title (the reference's
   "Open Deals (3)" treatment); the column-header row rides existing .tbl th. */
.dash-tbl-count { color: var(--muted-2); font-weight: 600; }
.dash-tables .tbl th { background: var(--surface-alt); }
/* equal card heights (override the base align-items:start) */
#root.route-dash .dash-tables { align-items: stretch; }
/* stack each card as a column and float the foot to the bottom, so both cards'
   separator hairlines land on the same line even though the right table is
   shorter */
#root.route-dash .dash-tables .card { display: flex; flex-direction: column; }
/* both feet share one fixed height and sit at the card bottom, so their
   border-top hairlines land on the exact same axis regardless of foot text */
#root.route-dash .dash-tables .dash-tbl-foot {
  margin-top: auto; height: 46px; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.32em;
}
/* pull ONLY the card title left to the card's content edge, in line with the
   table's left edge and the row + foot separators (the .card-header carries a
   20px indent the rows don't) — the ITEM/rows stay exactly where they were */
#root.route-dash .dash-tables .card-header { padding-left: 0; }

/* ═══ 14 · PHONE TABLE PASS (2026-07-26) — every remaining data table earns
   its own <=600px composition instead of wrapping UUIDs and clipping the
   money column off-screen. Same philosophy as the dashboard twin-table
   treatment above: the item + the amount are the message; reference ids,
   channels and kind columns bow out (the full record stays one tap away in
   the drawer / title attrs / CSV export). Kept at the end of the sheet so
   the overrides win by source order. ═══ */

/* Orders — desktop keeps 7 columns but the id chip is now 8 chars and the
   long buyer reference ellipsizes instead of dictating the column width. */
.ord-tbl .col-ref { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-tbl .col-date { white-space: nowrap; }
.ord-item-sub { display: none; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ord-item-sub .mono { font-size: 10.5px; }

@media (max-width: 600px) {
  /* Orders: Item (+date · id sub) | Status | Value */
  .table-scroll table.data.ord-tbl { min-width: 0; }
  .ord-tbl .col-order, .ord-tbl .col-date, .ord-tbl .col-ref, .ord-tbl .col-channel { display: none; }
  .ord-tbl .ord-item {
    max-width: calc(100vw - 248px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; font-size: 13px;
  }
  .ord-item-sub { display: block; }
  .ord-tbl tbody td, .ord-tbl thead th { padding: 10px 8px; }
  .ord-tbl .status-badge { padding: 3px 8px; font-size: 10.5px; }

  /* Earnings ledger: Earning (+short id · date sub) | Amount | Status */
  .earn-tbl .col-kind, .earn-tbl .col-period { display: none; }
  .earn-tbl .tbl-cell-title, .earn-tbl .tbl-cell-sub {
    max-width: calc(100vw - 262px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* the 11.5px sub fits "8charid · Jul 25, 2026" in the title's headroom */
  .earn-tbl .tbl-cell-sub { max-width: calc(100vw - 255px); }
  /* icon tiles bow out for width (!important beats _earnVisual's inline display) */
  .earn-tbl .tbl-cell-main > .avatar, .earn-tbl .tbl-cell-main > .ic-box { display: none !important; }
  .earn-tbl td, .payout-tbl td, .dep-tbl td { padding: 10px 8px; }
  .earn-tbl td.num .money, .payout-tbl td.num .money { font-size: 12.5px; }
  .earn-tbl .status-badge, .payout-tbl .status-badge { padding: 3px 8px; font-size: 10.5px; }
  .dep-tbl td:last-child span { font-size: 10.5px !important; padding: 2px 7px !important; }

  /* Payout history: Period (+id · tx sub) | Amount | Status. Settled and
     method bow out — the period title carries the when, the drawer-less
     details stay in the sub's title attr and the CSV. */
  .payout-tbl .col-method, .payout-tbl .col-settled { display: none; }
  .payout-tbl .tbl-cell-title, .payout-tbl .tbl-cell-sub {
    max-width: calc(100vw - 278px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Dashboard activity table: no qty column, so the ellipsis cap can run
     wider than the twin-table default set in the chart block above. */
  .tbl-activity .tbl-cell-title, .tbl-activity .tbl-cell-sub {
    max-width: min(220px, calc(100vw - 258px));
  }
}

/* ═══ 15 · PHONE CATALOG — 2-up shop grid (2026-07-26). 48 single-column
   jumbo cards made a 24,000px scroll at 390px; two-up with compact card
   internals halves it and reads like a store. ═══ */
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-grid .cat-art { height: 112px !important; }
  .cat-grid .cat-card-body { padding: 11px 11px 12px; gap: 8px; }
  .cat-grid .cat-card-name { font-size: 13.5px; line-height: 1.2; }
  .cat-grid .cat-card-sku { display: none; }
  .cat-grid .cat-card-chips { gap: 6px; row-gap: 4px; }
  .cat-grid .cat-stock, .cat-grid .cat-game { font-size: 10px; }
  .cat-grid .spread { padding: 8px 10px; gap: 5px; border-radius: 10px; }
  /* the label wraps to two lines in a 156px card — center the value on it */
  .cat-grid .spread-row { align-items: center; }
  .cat-grid .spread-val { font-size: 13px; }
  .cat-grid .spread-lbl { font-size: 10px; }
  /* stepper centers on its own line; the add button goes full width below */
  .cat-grid .cat-card-buy { flex-direction: column; align-items: stretch; gap: 8px; }
  .cat-grid .cat-card-buy .qty { align-self: center; }
  .cat-grid .cat-buy-btn { width: 100%; }
}

/* ═══ 16 · PHONE WALLET CHIP (2026-07-26 owner ask) — centered, with the
   number. The base v2 rule (section above, later in source than the shell's
   720/1000 blocks) nudges the chip left of window center to balance the
   desktop sidebar; below 1000px there is no sidebar, so the chip centers on
   the true midpoint. The amount stays visible at every width — the chip
   tightens in steps instead of dropping the number. ═══ */
@media (max-width: 1000px) {
  #root.route-v2 .tb-balance { left: 50%; }
}
@media (max-width: 480px) {
  /* squeeze a step so a five-figure balance clears the search button */
  .tb-balance { font-size: 12.5px; gap: 6px; padding: 4px 4px 4px 9px; }
  .tb-balance .tb-balance-ic svg { width: 14px; height: 14px; }
  .tb-balance-add { width: 24px; height: 24px; }
}
@media (max-width: 400px) {
  /* keep chip + search + bell + avatar clear of each other on small phones */
  .tb-in { gap: 6px; }
  .tb-right { gap: 6px; }
  .tb-iconbtn { width: 32px; }
  .tb-search { width: 32px; padding: 0; justify-content: center; }
}
@media (max-width: 360px) {
  /* SE-class widths: the green add tile bows out — the whole chip IS the
     wallet button, the tile is only its affordance */
  .tb-balance-add { display: none; }
  .tb-balance { padding-right: 10px; }
}

/* ═══ 17 · SETTINGS PASS (2026-07-27) — truth + polish round. The page's
   base styles still live in styles.css; these overrides win by source
   order like the other end-of-sheet sections. ═══ */

/* Hero identity card: the meta line used to nowrap-ellipsize itself
   ("demo.seller@tier.partners · J…") — let it wrap instead. */
.set-hero-profile-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }

/* Profile-photo row — replaces the old duplicated identity header. */
.set-photo-row { align-items: center; }
.set-photo-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.set-photo-id .avatar { flex: none; }
.set-photo-actions { display: flex; gap: 8px; flex: none; }

/* Payout method picker — flat surfaces, the selected card carries an accent
   border + check, never a tinted fill. */
.pay-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pay-pick {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px 16px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: var(--surface-alt); border: 1px solid var(--border-strong); color: var(--text);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.pay-pick:hover { border-color: #3a3a3a; background: var(--surface-raise); }
.pay-pick.is-on { border-color: var(--accent); }
.pay-pick.is-on .pay-pick-top svg { color: var(--accent); }
.pay-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-pick-name { font-size: 13px; font-weight: 700; }
.pay-pick-note { font-size: 11.5px; color: var(--muted); }

@media (max-width: 720px) {
  .pay-pick-grid { grid-template-columns: 1fr; gap: 8px; }
  .pay-pick { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 14px; }
  .pay-pick-note { text-align: right; }
  /* photo row stacks: identity above, buttons below full-width */
  .set-photo-row { grid-template-columns: 1fr; gap: 12px; }
  .set-photo-actions .btn { flex: 1; }
}

/* (mobile settings-nav pills moved into section 18 — the design pass owns
   the whole rail now) */

/* ═══ 18 · SETTINGS DESIGN PASS (2026-07-27) — the page joins the v2 family
   for real: FULL-WIDTH like every other page. No secondary left rail (no
   other page has one); the tabs are a horizontal pill rail under the .wel
   header — the same pattern the pills already used on phones — and the
   section cards span the full content width. Legacy styles.css still
   declares the old shapes; everything here wins by source order. ═══ */

/* Identity chip in the header — compact, flat, wraps under on phones. */
.set-id-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px;
  background: var(--bg-app); border: 1px solid var(--border); border-radius: 12px;
  min-width: 0;
}
.set-id-chip .avatar { flex: none; }
.set-id-chip-text { min-width: 0; }
.set-id-chip-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.set-id-chip-meta { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }

/* Shell: single full-width column — the tabs row, then the sections. */
.settings-shell { display: block; }

/* Legacy sheet paints the content column as a raised panel and caps cards at
   760px — flat canvas, full-width cards. (The nav keeps its own bg below —
   it doubles as the sticky bar's backdrop.) */
[data-set-content] { background: none !important; box-shadow: none !important; border: 0 !important; }
[data-set-content] .card { max-width: none; }
/* ...and the rows/fields inside them (the legacy 760px "read-width" cap made
   every row stop mid-card). Descriptions keep their own 480px cap for line
   length; the row itself — and its right-edge control — spans the card. */
[data-set-content] .setting-row, [data-set-content] .form-row { max-width: none; }

/* Tab rail — horizontal pills at every width (the phone pattern promoted).
   Sticky under the topbar so long sections keep their navigation. */
.set-rail-label { display: none; }
.settings-shell .settings-nav {
  /* top overlaps the 1px topbar border so no content slit shows while stuck */
  position: sticky; top: calc(var(--tb-h, 64px) - 1px); z-index: 30;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 10px 0;
  background: var(--bg-app) !important;   /* beats the legacy surface-panel paint */
  border: 0 !important; box-shadow: none !important;
  overflow-x: auto; scrollbar-width: none;
}
.settings-shell .settings-nav::-webkit-scrollbar { display: none; }
.settings-shell .settings-nav button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; width: auto;
  padding: 8px 15px 8px 12px; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 600; text-align: left;
  transition: color 0.13s ease, background 0.13s ease, border-color 0.13s ease;
}
.settings-shell .settings-nav button:hover { color: var(--text); background: var(--surface-alt); }
.settings-shell .settings-nav button .set-nav-icon {
  width: auto; height: auto; border: 0; background: none; border-radius: 0;
  display: inline-flex; color: inherit; opacity: 0.9;
}
.settings-shell .settings-nav button .set-nav-icon svg { width: 14px; height: 14px; }
.settings-shell .settings-nav button.active {
  color: var(--text); background: var(--surface); border: 1px solid var(--accent);
}
.settings-shell .settings-nav button.active .set-nav-icon { color: var(--accent); opacity: 1; background: none; border: 0; }

/* Section header — visible at every width (styles.css hid it below 2400px);
   the icon rides the title in accent. */
[data-set-content] .set-section-head { display: block; margin-bottom: 14px; }
.set-section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.4px; margin: 0;
}
.set-section-ic { display: inline-flex; color: var(--accent); }
.set-section-desc { font-size: 13px; color: var(--muted); margin: 5px 0 0; }

/* Notification groups — small-caps dividers inside the card. */
.set-notif-group { margin: 20px 0 2px; }
.set-notif-group.is-first { margin-top: 4px; }
.set-notif-group + .setting-row { border-top: 0; }

/* Ultrawide: sections stack (styles.css reveals them all at ≥2400) with the
   account side rail on the right; the header chip yields to the rail's
   snapshot card. */
@media (min-width: 2400px) {
  .settings-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; }
  .settings-shell .settings-nav { grid-column: 1 / -1; position: sticky; }
  [data-set-content] { grid-column: 1; }
  .settings-side-rail { grid-column: 2; grid-row: 2; }
  .wel .set-id-chip { display: none; }
}

/* Phones: same pills, tighter type. */
@media (max-width: 900px) {
  .set-section-title { font-size: 17px; }
  .wel .set-id-chip { width: 100%; }
}

/* ═══ 18 · INVENTORY PHONE PASS (2026-08-06) — the page never got the
   2026-07-26 mobile treatment. Same philosophy as the catalog 2-up pass in
   §15: compact card internals, no decorative filler, margin numbers never
   clip. Kept at the end of the sheet so the overrides win by source order. ═══ */

/* The 3-col P&L row used to clip its nowrap Margin cell behind the card's
   overflow:hidden at phone card widths — let the row wrap instead and give
   the margin cell the full remaining track. */
.inv-pl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, auto); }
.inv-pl-val { white-space: normal; overflow-wrap: anywhere; }

/* Mark sold — same ghost chrome as Unlist, money-tinted label; sits between
   the list toggle and the external-link icon button. */
.inv-cta-sold { flex: 0 0 auto; color: var(--money); }
.inv-cta-sold:hover { border-color: var(--money-border); }

@media (max-width: 600px) {
  /* two-up, compact — mirrors .cat-grid's phone treatment */
  .inv-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inv-thumb { aspect-ratio: 16 / 9; }
  .inv-thumb-img { padding: 8px; }
  .inv-thumb-fallback { font-size: 30px; }
  .inv-body { padding: 10px 11px 11px; }
  .inv-desc { display: none; }
  .inv-platform-lbl { display: none; }
  .inv-platform { margin-bottom: 6px; }
  .inv-platform-mark { width: 22px; height: 22px; font-size: 11px; }
  .inv-platform-name { font-size: 12px; }
  .inv-name { font-size: 13.5px; }
  .inv-meta { font-size: 11.5px; }
  /* stack the P&L cells — three side-by-side money figures can't share a
     ~150px card; stacked rows keep every digit visible */
  .inv-pl { grid-template-columns: 1fr; gap: 5px; }
  .inv-pl-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .inv-pl-val { font-size: 12.5px; }
  .inv-foot { flex-wrap: wrap; }
  .inv-cta { font-size: 12px; padding: 8px 8px; min-height: 34px; }
  .inv-icon-btn { width: 34px; height: 34px; }
  .inv-empty { padding: 40px 20px; }
}
@media (max-width: 360px) {
  /* SE-class: one column, but still compact */
  .inv-grid { grid-template-columns: 1fr; }
}

/* ═══ 19 · NETWORK PAGE SIMPLIFICATION (2026-08-06) — income-first strip,
   one compact rank card with the full ladder behind a disclosure, tighter
   tree, real classes instead of inline styles. ═══ */

.net-header { margin: 16px 0 24px; }

/* current rank + progress to the next rung */
.net-rank-now {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.net-rank-now-id { display: flex; align-items: center; gap: 13px; }
.net-rank-now-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: var(--track-h); }
.net-rank-now-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.net-rank-next { flex: 1 1 260px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.net-rank-next-lbl { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.net-rank-next-lbl strong { color: var(--text); }
.net-rank-bar span { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.net-rank-track { height: 5px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.net-rank-track i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* the five-rank ladder folds away */
.net-ladder { margin-top: 14px; border-top: 1px solid var(--border); }
.net-ladder summary {
  cursor: pointer; list-style: none; padding: 12px 2px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.net-ladder summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2); transform: rotate(-45deg); transition: transform 0.15s ease; flex: none; }
.net-ladder[open] summary::before { transform: rotate(45deg); }
.net-ladder summary::-webkit-details-marker { display: none; }
.net-ladder summary:hover { color: var(--text); }
.net-ladder .rank-cards { padding-top: 4px; }

/* tables row — was inline grid-template/flex styles */
.net-tables { grid-template-columns: 1.4fr 1fr; }
.net-tables-main { padding: 16px 16px 8px; }
.net-tables-side { display: flex; flex-direction: column; gap: 18px; }
.net-unranked-note { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }
.net-unranked-note strong { color: var(--text); }

/* rank history folds when long */
.net-hist-details summary {
  cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700;
  padding-bottom: 6px; display: flex; align-items: center; gap: 7px;
}
.net-hist-details summary::-webkit-details-marker { display: none; }
.net-hist-details summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2); transform: rotate(-45deg); margin-left: auto; transition: transform 0.15s ease; }
.net-hist-details[open] summary::after { transform: rotate(45deg); }

@media (max-width: 720px) {
  .net-header { margin: 10px 0 18px; }
  .net-rank-now { gap: 14px; }
  .net-rank-next { max-width: none; flex-basis: 100%; }
  /* rank ladder cards: single tight column inside the disclosure */
  .rank-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rank-card { padding: 14px 10px 11px; }
  /* tree: smaller nodes so more of a branch fits each swipe */
  .tree-node { width: 138px; padding: 8px 8px 7px; }
  .tree-node.is-root { min-width: 170px; }
  .tree-node-name { max-width: 118px; font-size: 12px; }
  .net-tree-wrap { padding: 12px 10px; margin-left: -2px; margin-right: -2px; }
}
@media (max-width: 400px) {
  .rank-cards { grid-template-columns: 1fr; }
}

/* ═══ 20 · WALLET CHOOSER (2026-08-06) — the balance chip's two-tile popup ═══ */
.wallet-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallet-choice-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 15px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
  color: var(--text); font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wallet-choice-tile:hover { border-color: var(--accent-faint-border); background: var(--row-hover); }
.wallet-choice-ic { color: var(--accent); display: inline-flex; }
.wallet-choice-name { font-size: 15px; font-weight: 700; }
.wallet-choice-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 480px) {
  .wallet-choice { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NETWORK v3 — accent palette + the transactions / pool-summary split.
   Palette supplied by the owner (2026-08-08); used for categorical marks
   (transaction type tiles, pool ring segments) only — never as surface
   fills, which stay on the portal's flat dark tokens.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --acc-blue:   #62b2ff;
  --acc-cyan:   #25e5ff;
  --acc-yellow: #ffd128;
  --acc-red:    #ec2827;
  --acc-teal:   #32e1ae;
  --acc-blue-2: #2697fe;
}

/* two equal halves; stacks on narrow viewports */
.net-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
@media (max-width: 1000px) { .net-split { grid-template-columns: 1fr; } }

/* ── recent transactions ─────────────────────────────────────────────── */
.net-tx-card, .net-pool-card { padding: 20px 22px 14px; }
.net-tx-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.net-tx-title, .net-pool-title {
  margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
}
.net-tx-cols {
  display: grid; grid-template-columns: 1fr auto 110px; gap: 12px;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2);
}
.net-tx-cols .num, .net-tx-row .num { text-align: right; }
.net-tx-row {
  display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: 11px;
}
/* zebra banding, as in the reference — a flat surface tint, no tinted colour */
.net-tx-row:nth-child(even) { background: var(--surface-2, rgba(255,255,255,0.028)); }
.net-tx-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.net-tx-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #08131c;
}
.net-tx-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-tx-date { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
.net-tx-amt { font-size: 13.5px; font-weight: 700; }

/* ── pool summary ────────────────────────────────────────────────────── */
.net-pool-body { display: flex; align-items: center; gap: 26px; padding: 16px 2px 8px; flex-wrap: wrap; }
.net-pool-ring { position: relative; flex: none; width: 168px; height: 168px; }
.net-pool-ring svg { display: block; transform: rotate(-90deg); }
.net-pool-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.net-pool-total { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.net-pool-cap { font-size: 11.5px; color: var(--muted-2); line-height: 1.35; }
.net-pool-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.net-pool-row {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 2px; font-size: 13px;
}
.net-pool-dot { width: 9px; height: 9px; border-radius: 50%; }
.net-pool-bps { font-size: 12px; color: var(--muted-2); }
.net-pool-amt { font-weight: 650; min-width: 74px; text-align: right; }
.net-pool-sum {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center;
  padding: 11px 2px 2px; margin-top: 4px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   9 · LIGHT THEME — full portal restyle to the reference light system
   (owner redesign 2026-08-08). Scoped on body.route-v2.theme-light so it
   out-cascades the pitch-black route-v2 tokens; #root-scoped chrome rules
   get body.theme-light-prefixed twins. Interactive accent is the reference
   blue; money stays green (readable on white); the owner palette
   (--acc-*) drives categorical marks only.
   ═══════════════════════════════════════════════════════════════════ */
html.theme-light { background: #e6eaf1; color-scheme: light; }
html.theme-light:has(body.route-v2) { scrollbar-color: #c3cddd #e6eaf1; }
html.theme-light:has(body.route-v2) *::-webkit-scrollbar-thumb { background: #c3cddd; }
html.theme-light:has(body.route-v2) *::-webkit-scrollbar-track { background: transparent; }
html.theme-light ::selection { background: rgba(38, 151, 254, 0.22); color: #14213c; }

body.route-v2.theme-light {
  /* interactive accent — reference blue */
  --accent: #2697fe;
  --accent-hover: #1f8af0;
  --accent-2: #62b2ff;
  --accent-deep: #1877d2;
  --accent-ink: #fff;
  --accent-tint: rgba(38, 151, 254, 0.12);
  --accent-faint: rgba(38, 151, 254, 0.06);
  --accent-faint-border: rgba(38, 151, 254, 0.26);
  --accent-glow: rgba(38, 151, 254, 0.3);
  --accent-soft: rgba(38, 151, 254, 0.09);
  /* money — green with contrast on white */
  --money: #0ea568;
  --money-strong: #0a8f57;
  --money-tint: rgba(14, 165, 104, 0.1);
  --money-border: rgba(14, 165, 104, 0.26);
  --danger: #ec2827;
  --danger-tint: rgba(236, 40, 39, 0.08);
  /* charts — sales blue, earnings red, spend yellow (network pool palette) */
  --chart-1: #2697fe;
  --chart-2: #ec2827;
  --chart-3: #ffd128;
  /* lighter tints for luminous gradient strokes (lit at the peaks) */
  --chart-1-lt: #7cc0ff;
  --chart-2-lt: #ff6f6d;
  --chart-3-lt: #ffe486;
  --chart-grid: rgba(28, 41, 66, 0.07);
  --chart-track: #e8edf5;
  --chart-bar: #c9d5ea;
  /* canvas + surfaces — cool light gray page, floating white cards */
  --bg-app: #e6eaf1;
  --bg: #e6eaf1;
  --surface: #fff;
  --surface-alt: #f4f6fb;
  --surface-raise: #fff;
  --surface-2: #f6f8fc;
  --row-hover: #f6f8fc;
  --glass-bg: #fff;
  --glass-border: #ecf0f6;
  --border: #ecf0f6;
  --border-strong: #dfe6f0;
  /* ink — dark navy ramp */
  --text: #1c2942;
  --body: #33415e;
  --muted: #7d8aa5;
  --muted-2: #9aa6bd;
  --placeholder: #a9b4c9;
  --radius-lg: 16px;
  --card-shadow: none;   /* flat cards (owner 2026-08-08): borders separate, no shading */
  --glass-shadow: var(--card-shadow);
  --pop-shadow: 0 24px 60px rgba(29, 51, 104, 0.16), 0 4px 12px rgba(29, 51, 104, 0.08);
  --sidebar-bg: #fff;
  --surface-hover: #f6f8fc;
}

/* ── shell: white sidebar, blue active pill (reference "Documents") ─────── */
body.route-v2.theme-light .sb { background: #fff; border-right: 0; }
body.route-v2.theme-light .sb-logo { border-bottom: 0; height: auto; align-items: center; padding: 32px 18px 0; }
body.route-v2.theme-light .sb-link { color: #5c6a88; }
body.route-v2.theme-light .sb-link:hover { color: var(--text); background: #f2f5fa; }
body.route-v2.theme-light .sb-link.is-active {
  color: #fff;
  background: linear-gradient(90deg, #62b2ff, #2697fe);
  box-shadow: none;
}
body.route-v2.theme-light .sb-link.is-active .sb-ic { color: #fff; opacity: 1; }
body.route-v2.theme-light .sb-link.is-active::before { display: none; }
/* Hovering the SELECTED item kept the generic grey hover bg (equal specificity,
   later in the sheet), turning the active pill grey with a near-invisible white
   icon. Keep it blue on hover — just a touch brighter for feedback. */
body.route-v2.theme-light .sb-link.is-active:hover {
  background: linear-gradient(90deg, #6fb8ff, #2f9dfe);
  color: #fff;
}
body.route-v2.theme-light .sb-link.is-active:hover .sb-ic { color: #fff; }
body.route-v2.theme-light .sb-signout:hover { background: #fbf3f3; }

/* ── topbar: white bar, gray search pill, white balance chip, blue + ────── */
/* White header (owner 2026-08-09). The wallet chip is white too, so give it a
   hairline border to stay defined against the now-white bar. */
body.route-v2.theme-light .tb { background: #fff; border-bottom: 1px solid var(--border); }
body.route-v2.theme-light .tb.is-scrolled {
  background: #fff; box-shadow: 0 6px 20px rgba(20, 30, 50, 0.06); border-bottom: 1px solid #d7e0ec;
}
body.theme-light #root.route-v2 .tb-balance { background: #fff; border: 1px solid #e6ebf3; }
body.theme-light #root.route-v2 .tb-balance:hover { background: #f6f8fc; border: 1px solid #dbe3ee; }
body.theme-light #root.route-v2 .tb-balance-ic { color: var(--muted); }
body.route-v2.theme-light .tb-balance-add {
  background: linear-gradient(135deg, #62b2ff, #2697fe); color: #fff;
}
body.route-v2.theme-light .tb-search { background: #f1f4f9; border-color: transparent; }
body.route-v2.theme-light .tb-search:hover { border-color: #cfd9e8; color: var(--text); }
body.route-v2.theme-light .tb-search kbd { background: #fff; border-color: #dfe6f0; }

/* ── buttons: white panels; primary = blue gradient with soft shadow ────── */
body.theme-light #root.route-v2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-money) {
  background: #fff; border-color: #dfe6f0;
}
body.theme-light #root.route-v2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-money):hover {
  background: #f6f8fc; border-color: #c9d5e6;
}
body.route-v2.theme-light .btn-primary {
  background: linear-gradient(135deg, #62b2ff, #2697fe);
  box-shadow: none;
}
body.route-v2.theme-light .btn-primary:hover {
  background: linear-gradient(135deg, #62b2ff, #2697fe); filter: brightness(1.04);
}
body.route-v2.theme-light .form-input,
body.route-v2.theme-light select.form-input,
body.route-v2.theme-light textarea.form-input { background: #f4f6fb; color: var(--text); }

/* ── KPI strip → four floating white cards (reference "My Files" row) ───── */
body.route-v2.theme-light .kpi-strip { background: transparent; border: 0; box-shadow: none; gap: 18px; }
body.route-v2.theme-light .kpi-cell {
  background: #fff; border: 1px solid var(--border); border-left: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 20px 22px;
}
body.route-v2.theme-light .kpi-cell-head .ic-box {
  width: 27px; height: 27px; border-radius: 8px;
  background: var(--accent-tint); color: var(--accent);
}

/* ── network v3 pieces on white ─────────────────────────────────────────── */
body.route-v2.theme-light .net-tx-amt { color: var(--text); }
body.route-v2.theme-light .net-tx-row:nth-child(even) { background: #f6f8fc; }

/* ── referral tree on paper ─────────────────────────────────────────────── */

/* ── dashboard chrome: hero skyline + header ink flip ───────────────────── */
body.theme-light #root.route-dash .dash-hero__bar {
  background: linear-gradient(180deg, rgba(234, 243, 255, 0), rgba(38, 151, 254, 0.32) 51.44%, rgba(234, 243, 255, 0));
}
body.theme-light #root.route-dash .dash-header__title { color: var(--text); }
body.theme-light #root.route-dash .dash-header__subtitle { color: var(--muted); }

/* light theme: the dashboard promo cell trades lime-on-black for the blue
   gradient with white ink; button becomes a white chip with dark text */
body.theme-light #root.route-dash .kpi-cell--promo {
  background: linear-gradient(135deg, #62b2ff, #2697fe);
  border-color: transparent;
  border-radius: var(--radius-lg);
}
body.theme-light #root.route-dash .dash-promo-gradient-panel__title { color: #fff; }
body.theme-light #root.route-dash .dash-promo-gradient-panel__desc { color: rgba(255, 255, 255, 0.85); }
body.theme-light #root.route-dash .dash-promo-gradient-panel__cta { background: #fff; color: #17335c; }
body.theme-light #root.route-dash .dash-promo-gradient-panel__cta:hover { filter: brightness(0.96); }
body.theme-light #root.route-dash .dash-promo-gradient-panel__cta > svg { color: #17335c; }

/* light theme: footer ink (the dark sheet hardcodes white-alpha links) */
body.route-v2.theme-light .dash-foot .dash-foot-links a { color: #7d8aa5; }
body.route-v2.theme-light .dash-foot .dash-foot-links a:hover { color: #1c2942; }
body.route-v2.theme-light .dash-foot-copy,
body.route-v2.theme-light .dash-foot-legal { color: #9aa6bd; }
body.route-v2.theme-light .dash-foot { border-top-color: #e2e8f2; }

/* ── light theme round 3 (owner 2026-08-08): rounded KPI cards, borderless
   panels, wider side menu, clean header ─────────────────────────────────── */
/* KPI cards: full card radius — out-ranks the dark strip's #root radius-0 */
body.theme-light #root.route-dash .kpi-cell { border-radius: var(--radius-lg); }
body.theme-light #root.route-dash .kpi-cell--promo { border-radius: var(--radius-lg); }
/* borderless floating panels — white on the gray canvas does the separating */
body.route-v2.theme-light .card,
body.route-v2.theme-light .kpi-cell { border-color: transparent; }
/* side menu: a bit bigger */
body.route-v2.theme-light { --sb-w: 262px; }
body.route-v2.theme-light .sb-link { font-size: 15px; padding: 13px 14px; }
/* header: crumb gone, bigger title, flush with the containers' left edge
   (page side padding is 28px) */
body.route-v2.theme-light .tb-crumb { display: none; }
body.route-v2.theme-light .tb-in { padding: 22px 28px; height: auto; min-height: var(--tb-h); align-items: center; }
body.route-v2.theme-light .tb-title h1 { font-size: 20px; font-weight: 750; letter-spacing: -0.3px; }

/* borderless, width zero — containers at every level (owner 2026-08-08).
   Highlight states keep their tinted fills; the rings go. Dividers inside
   cards (column headers, totals) are separators, not borders — they stay. */
body.theme-light #root.route-v2 .card,
body.theme-light #root.route-v2 .card-glass,
body.theme-light #root.route-v2 .kpi-cell,
body.route-v2.theme-light .card,
body.route-v2.theme-light .card-glass,
body.route-v2.theme-light .kpi-cell {
  border: 0;
  /* the legacy dark sheet hardcodes a 50%-black 1px drop shadow on .card
     (html[data-theme] specificity beats a bare class) — on the light canvas
     it reads as a border rim. Nothing behind containers, ever. */
  box-shadow: none;
}
body.route-v2.theme-light .net-tree-wrap { border: 0; }
body.route-v2.theme-light .tree-node,
body.route-v2.theme-light .tree-node.is-root { border: 0; }
body.route-v2.theme-light .rank-card,
body.route-v2.theme-light .rank-card.is-current { border: 0; }

/* ── network right column: pool summary stacked over the referral-link card
   (the pool card's empty bottom half becomes a second container) ────────── */
.net-split-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.net-split-col .net-pool-card { flex: none; }
.net-refer-card { flex: 1; display: flex; align-items: flex-start; gap: 20px; padding: 20px; }
.net-refer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.net-refer-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--accent);
}
.net-refer-row { display: flex; align-items: center; gap: 10px; }
.net-refer-url {
  /* fills the row so pill + Copy align flush with the share-kit bar below */
  flex: 1; min-width: 0; display: flex; align-items: center;
  height: 46px; padding: 0 12px 0 15px;
  background: var(--surface-alt); border-radius: 11px;
  font-family: var(--font-mono); font-size: 13.5px;
}
.net-refer-prefix { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-refer-code {
  flex: none; padding: 0 2px 0 6px;
  background: none; border: 0; outline: 0;
  color: var(--text); font: inherit; font-weight: 700; letter-spacing: 0.2px;
}
.net-refer-save { flex: none; }
.net-refer-note { font-size: 11.5px; line-height: 1.6; color: var(--muted-2); max-width: 62ch; }
/* the two rows share one height and one width — exact symmetry */
.net-refer-row .btn { height: 46px; padding: 0 18px; border-radius: 11px; }
.net-refer-kit { width: 100%; height: 46px; justify-content: center; border-radius: 11px; }
/* the QR's top aligns with the kicker's top */
.net-refer-qr { flex: none; align-self: flex-start; display: flex; }
.net-refer-qr svg { height: 150px; width: 150px; display: block; border-radius: 10px; }
/* .btn's display:inline-flex would defeat the [hidden] attribute */
.net-refer-save[hidden] { display: none; }

/* the transaction list flexes: rows share whatever height the column gives
   the card, so the list always meets the card's bottom edge exactly */
.net-tx-card { display: flex; flex-direction: column; }
.net-tx-head, .net-tx-cols { flex: none; }
.net-tx-row { flex: 1; }

/* brand wordmark image (replaces the drawn glyph + text, owner 2026-08-08) */
.sb-logo-img { height: 32px; width: auto; display: block; }
.sb-logo-img--sm { height: 24px; }

/* ── bigger topbar controls (reference: tall search pill, large avatar) ──── */
body.route-v2.theme-light .tb-balance { height: 44px; padding: 4px 4px 4px 15px; gap: 10px; font-size: 14px; border-radius: 12px; }
body.route-v2.theme-light .tb-balance-add { width: 34px; height: 34px; border-radius: 9px; }
body.route-v2.theme-light .tb-balance-add svg { width: 16px; height: 16px; }
body.route-v2.theme-light .tb-balance .tb-balance-ic svg { width: 19px; height: 19px; }
body.route-v2.theme-light .tb-search {
  height: 44px; min-width: 240px; padding: 0 8px 0 15px;
  background: #fff; border-radius: 12px; font-size: 13.5px;
}
body.route-v2.theme-light .tb-search svg { width: 18px; height: 18px; }
body.route-v2.theme-light .tb-search kbd { height: 24px; min-width: 22px; font-size: 12px; }
body.route-v2.theme-light .tb-iconbtn { width: 44px; height: 44px; border-radius: 12px; }
body.route-v2.theme-light .tb-iconbtn svg { width: 21px; height: 21px; }
body.route-v2.theme-light .tb-avatar .avatar { width: 42px; height: 42px; font-size: 15px; }

/* header round 4: bigger title, icon-only search, name chip (reference) */
body.route-v2.theme-light .tb-title h1 { font-size: 22px; }
body.route-v2.theme-light .tb-search {
  min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center;
  background: transparent; border: 0; border-radius: 12px; color: var(--muted);
}
body.route-v2.theme-light .tb-search:hover { background: var(--surface-alt); color: var(--text); }
body.route-v2.theme-light .tb-search .tb-search-lbl,
body.route-v2.theme-light .tb-search kbd { display: none; }
body.route-v2.theme-light .tb-avatar {
  display: inline-flex; align-items: center; gap: 10px;
  width: auto; height: 52px; padding: 5px 14px 5px 5px;   /* auto width so the name fits */
  background: #fff; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
body.route-v2.theme-light .tb-avatar-name {
  font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap;
}
body.route-v2.theme-light .tb-avatar-caret { color: var(--muted); flex: none; }


/* header round 5: wallet chip rides the padded content row; whole side menu
   drops with the header; profile block -> a plain Log Out row (owner ref) */
body.theme-light #root.route-v2 .tb-balance { top: 50%; }
/* (sidebar foot + logout styling consolidated in the clean sidebar block below) */



/* ── sidebar: one clean 24px gutter (owner 2026-08-08) ───────────────────
   Logo, every nav icon, and Log Out all start on the SAME vertical line;
   the rounded pills inset 12px from both sidebar edges. Flat list, medium
   labels, thin outline icons — the reference layout, made consistent. */
body.route-v2.theme-light .sb-logo-img { height: 31px; }
body.route-v2.theme-light .sb-logo { padding: 31px 24px 0; }        /* logo icon @ 24 */
body.route-v2.theme-light .sb-nav { padding: 44px 12px 14px 12px; gap: 4px; }
body.route-v2.theme-light .sb-group-label {
  display: block; padding: 0 12px 6px; margin-top: 12px;             /* text @ 24, aligned */
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #9aa6bd;
}
body.route-v2.theme-light .sb-group:first-child .sb-group-label { margin-top: 0; }
body.route-v2.theme-light .sb-link {
  padding: 9px 12px; margin-bottom: 1px; gap: 14px; border-radius: 11px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: #6b7896;
}                                                                    /* icon @ 12+12 = 24 */
body.route-v2.theme-light .sb-link:hover { transform: none; background: #f2f5fa; }
body.route-v2.theme-light .sb-link.is-active { font-weight: 600; }
body.route-v2.theme-light .sb-ic { opacity: 1; width: 20px; display: inline-flex; justify-content: center; }
body.route-v2.theme-light .sb-ic svg { stroke-width: 1.6; }
body.route-v2.theme-light .sb-foot { border-top: 0; padding: 12px 12px 40px; }
body.route-v2.theme-light .sb-logout {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 12px; background: none; border: 0; border-radius: 12px;
  color: #7d8aa5; font-family: inherit; font-size: 15px; font-weight: 600;   /* text = icon color */
  cursor: pointer; text-align: left; transition: color .13s;
}                                                                    /* logout icon @ 24 */
body.route-v2.theme-light .sb-logout svg { color: #7d8aa5; flex: none; width: 20px; }
/* hover: text + icon turn red, no background change */
body.route-v2.theme-light .sb-logout:hover { background: none; color: var(--danger); }
body.route-v2.theme-light .sb-logout:hover svg { color: var(--danger); }

/* ── header round 6 (owner 2026-08-08): refined wallet, search=bell,
   profile=wallet size, even spacing, log out nudged down ────────────────── */
/* wallet — a bit smaller + cleaner */
body.route-v2.theme-light .tb-balance { height: 40px; padding: 4px 4px 4px 15px; gap: 9px; font-size: 13.5px; border-radius: 11px; border: 0; }
body.route-v2.theme-light .tb-balance-add { width: 30px; height: 30px; border-radius: 8px; }
body.route-v2.theme-light .tb-balance-add svg { width: 15px; height: 15px; }
body.route-v2.theme-light .tb-balance .tb-balance-ic svg { width: 17px; height: 17px; }
/* search icon == notification bell icon: same slate color + 21px, always
   (the bell otherwise darkens on unread — pin both so they never diverge;
   the red badge stays the unread signal) */
body.route-v2.theme-light .tb-search,
body.route-v2.theme-light .tb-bell,
body.route-v2.theme-light .tb-bell.has-unread { color: #6b7896; }
body.route-v2.theme-light .tb-search:hover,
body.route-v2.theme-light .tb-bell:hover { background: var(--surface-alt); color: var(--text); }
body.route-v2.theme-light .tb-search svg, body.route-v2.theme-light .tb-bell svg { width: 21px; height: 21px; }
/* profile chip = wallet size (40px tall) */
body.route-v2.theme-light .tb-avatar { height: 40px; padding: 4px 14px 4px 9px; gap: 9px; border-radius: 11px; }
body.route-v2.theme-light .tb-avatar .avatar { width: 32px; height: 32px; font-size: 13px; }
body.route-v2.theme-light .tb-avatar-name { font-size: 14px; }
/* even spacing among search / bell / profile */
body.route-v2.theme-light .tb-right { gap: 12px; }
/* log out a bit lower */
body.route-v2.theme-light .sb-foot { padding: 12px 12px 26px; }
/* recent-transaction tiles: glyph is always white on the vibrant fill */
body.route-v2.theme-light .net-tx-ic { color: #fff; }
body.route-v2.theme-light .net-tx-ic svg { color: #fff; stroke: #fff; }

/* search icon buttons pad their glyph, so the search reads farther from the
   bell than the bell does from the profile pill — pull it in to equalize the
   VISUAL gaps (glyph→glyph == bell→pill) */
body.route-v2.theme-light .tb-search { margin-right: -11px; }

/* profile avatar: orange fallback when no photo is set, no ring */
/* default (no-photo) profile picture stays neutral grey, not a colour */
body.route-v2.theme-light .tb-avatar .avatar { background: #9aa3b2; color: #fff; border: 0; }
body.route-v2.theme-light .tb-avatar:hover .avatar,
body.route-v2.theme-light .tb-avatar[aria-expanded='true'] .avatar { border: 0; box-shadow: none; }



/* ══ referral tree: dark whiteboard (owner 2026-08-08) ══════════════════════ */
body.route-v2.theme-light .tree-head { padding-bottom: 0; border-bottom: 0; margin-bottom: 12px; }
/* the well is a fixed-height dark board you pan + zoom inside */
body.route-v2.theme-light .net-tree-wrap {
  height: 560px; overflow: auto; border: 0; border-radius: 16px;
  cursor: grab; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(rgba(29, 51, 104, 0.06) 1px, transparent 1.6px) 0 0 / 26px 26px,
    #e7eaf0;
}
body.route-v2.theme-light .net-tree-wrap.is-panning { cursor: grabbing; }
body.route-v2.theme-light .net-tree-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
body.route-v2.theme-light .net-tree-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 8px; }
body.route-v2.theme-light .net-tree { padding: 24px 40px; }
/* nodes: clean dark cards, light text, everything fits */
body.route-v2.theme-light .tree-node {
  width: 158px; box-sizing: border-box; padding: 11px 12px 10px;
  background: #fff; border: 0; border-radius: 13px; gap: 5px;
  box-shadow: 0 4px 12px rgba(29, 51, 104, 0.10);
}
body.route-v2.theme-light .tree-node.is-root {
  width: auto; min-width: 210px; background: linear-gradient(135deg, #2f7be6, #2697fe);
  box-shadow: 0 10px 26px rgba(38, 151, 254, 0.4);
}
body.route-v2.theme-light .tree-node:hover { box-shadow: 0 8px 20px rgba(29, 51, 104, 0.16); }
body.route-v2.theme-light .tree-node.is-idle { opacity: 0.62; }
body.route-v2.theme-light .tree-node-name { color: #1c2942; }
body.route-v2.theme-light .tree-node.is-root .tree-node-name { color: #fff; }
/* two-row personal / team stats — label left, value right, always fits */
body.route-v2.theme-light .tree-node-stats { width: 100%; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
body.route-v2.theme-light .tree-node-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; line-height: 1.3;
}
body.route-v2.theme-light .tree-node-stat span { color: #8a95ab; }
body.route-v2.theme-light .tree-node-stat b { color: #1c2942; font-weight: 700; font-variant-numeric: tabular-nums; }
body.route-v2.theme-light .tree-node.is-root .tree-node-stat span,
body.route-v2.theme-light .tree-node.is-root .tree-node-num { color: rgba(255,255,255,0.85); }
body.route-v2.theme-light .tree-node.is-root .tree-node-stat b { color: #fff; }
body.route-v2.theme-light .tree-node-earn { color: #0ea568; margin-top: 3px; }
body.route-v2.theme-light .tree-node.is-root .tree-node-earn.is-total { color: #eafff6; }
body.route-v2.theme-light .tree-node-num { color: #5c6a88; }
/* avatar: no border/ring; small crisp active dot (no big outline) */
body.route-v2.theme-light .tree-ava .avatar { border: 0; box-shadow: none; }
body.route-v2.theme-light .tree-node.is-root .tree-ava .avatar { box-shadow: none; }
body.route-v2.theme-light .tree-ava::after {
  width: 8px; height: 8px; border: 2px solid #fff; box-shadow: none;
}
body.route-v2.theme-light .tree-node.is-root .tree-ava::after { border-color: #2697fe; }
/* connectors on the dark board */
body.route-v2.theme-light .net-tree li::before,
body.route-v2.theme-light .net-tree li::after,
body.route-v2.theme-light .net-tree ul::before { border-color: #c3ccdd; }
/* more horizontal breathing room between branches */
body.route-v2.theme-light .net-tree li { padding-left: 14px; padding-right: 14px; }
body.route-v2.theme-light .net-tree ul { padding-top: 26px; }
/* "+N more" summary chip */
body.route-v2.theme-light .tree-node.tree-more {
  width: auto; min-width: 0; padding: 8px 15px; align-self: center;
  background: #dbe2ee; color: #46557a; font-family: inherit; font-weight: 700; font-size: 12px;
  border: 0; box-shadow: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .13s ease, color .13s ease;
}
body.route-v2.theme-light .tree-node.tree-more::before { content: '+'; display: none; }
body.route-v2.theme-light .tree-node.tree-more:hover { background: #2697fe; color: #fff; }
/* zoom toolbar */
body.route-v2.theme-light .tree-tools { display: inline-flex; align-items: center; gap: 8px; }
body.route-v2.theme-light .tree-tool {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f2; border-radius: 9px; cursor: pointer;
  color: #33415e; font-size: 16px; font-weight: 600; line-height: 1;
}
body.route-v2.theme-light .tree-tool-pct { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; }
body.route-v2.theme-light .tree-tool:hover { background: #f2f5fa; border-color: #cfd9e8; }
/* fullscreen keeps the dark board filling the viewport */
body.route-v2.theme-light .tree-card:fullscreen .net-tree-wrap,
body.route-v2.theme-light .tree-card.is-maxed .net-tree-wrap { height: auto; flex: 1; }

/* ══ NETWORK PAGE — mobile pass (owner 2026-08-09) ═════════════════════════ */
@media (max-width: 720px) {
  /* header: the wallet chip was absolute-centered (overlapping the bell) — put
     it back in the flow, drop the search + profile name so logo / wallet /
     bell / avatar sit in one clean row */
  body.route-v2.theme-light .tb-in { padding: 12px 14px; gap: 10px; min-height: 0; }
  body.theme-light #root.route-v2 .tb-balance {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
    height: 38px; font-size: 13px; border-radius: 10px;
  }
  body.route-v2.theme-light .tb-balance-add { width: 28px; height: 28px; }
  body.route-v2.theme-light .tb-search { display: none; }
  body.route-v2.theme-light .tb-avatar-name,
  body.route-v2.theme-light .tb-avatar-caret { display: none; }
  body.route-v2.theme-light .tb-avatar { padding: 0; height: auto; background: none; }
  body.route-v2.theme-light .tb-right { gap: 8px; }
  body.route-v2.theme-light .tb-iconbtn { width: 40px; height: 40px; }
  body.route-v2.theme-light .sb-logo-img--sm { height: 25px; }

  /* white header on phones (owner ask) */
  body.route-v2.theme-light .tb { background: #fff; border-bottom: 1px solid transparent; }
  body.route-v2.theme-light .tb.is-scrolled { background: #fff; border-bottom: 1px solid #d7e0ec; }

  /* KPI 2x2 (reference scale): bigger cards, tighter gap, big number,
     smaller icon / label / sub */
  body.theme-light #root.route-v2 .kpi-strip { gap: 10px; }
  body.theme-light #root.route-v2 .kpi-cell { padding: 20px 18px 18px; border-radius: 17px; justify-content: flex-start; }
  body.theme-light #root.route-v2 .kpi-cell-head { font-size: 11.5px; gap: 7px; white-space: nowrap; }
  body.theme-light #root.route-v2 .kpi-cell-head .help-tip { display: none; }
  body.theme-light #root.route-v2 .kpi-cell-head .ic-box { width: 23px; height: 23px; border-radius: 7px; }
  body.theme-light #root.route-v2 .kpi-cell-head .ic-box svg { width: 13px; height: 13px; }
  body.theme-light #root.route-v2 .kpi-cell-row { margin-top: 11px; }
  body.theme-light #root.route-v2 .kpi-cell-value { font-size: 33px; letter-spacing: -1px; }
  body.theme-light #root.route-v2 .kpi-cell-sub { font-size: 11px; margin-top: 9px; }

  /* wallet chip: slight outline on phones (id-scoped to beat the border:0 rule) */
  body.theme-light #root.route-v2 .tb-balance { border: 1px solid #e4e9f1; }

  /* containers use more page width; one consistent gap between every section */
  body.route-v2.theme-light .shell-page { padding: 12px 10px 28px !important; }
  body.route-v2.theme-light .dash-hairline-divider { display: none; }
  body.route-v2.theme-light .kpi-strip { margin-bottom: 12px; }
  body.route-v2.theme-light .net-split { margin: 0 0 12px; gap: 12px; }
  body.route-v2.theme-light .net-split-col { gap: 12px; }
  body.route-v2.theme-light .tree-card { margin-bottom: 12px; }
  body.route-v2.theme-light .rank-sec { margin-bottom: 12px; }

  /* Recent transactions: 2-col with the date tucked under the name so the
     name gets the full width instead of truncating to "Refer…" */
  body.route-v2.theme-light .net-tx-cols { grid-template-columns: 1fr auto; }
  body.route-v2.theme-light .net-tx-cols > span:nth-child(2) { display: none; }
  body.route-v2.theme-light .net-tx-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "main amount" "date amount";
    column-gap: 10px; row-gap: 1px; padding: 12px 14px;
  }
  body.route-v2.theme-light .net-tx-cols { padding-left: 14px; padding-right: 14px; }
  body.route-v2.theme-light .net-tx-main { grid-area: main; }
  body.route-v2.theme-light .net-tx-name { white-space: normal; line-height: 1.3; }
  body.route-v2.theme-light .net-tx-date { grid-area: date; text-align: left; padding-left: 46px; }
  body.route-v2.theme-light .net-tx-amt { grid-area: amount; align-self: center; font-size: 14px; }

  /* Pool summary: donut over a full-width legend */
  body.route-v2.theme-light .net-pool-body { flex-direction: column; align-items: stretch; gap: 16px; }
  body.route-v2.theme-light .net-pool-ring { align-self: center; }
  body.route-v2.theme-light .net-pool-legend { min-width: 0; }

  /* Referral link card: stack link row + share-kit bar; drop the QR on phones */
  body.route-v2.theme-light .net-refer-card { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  body.route-v2.theme-light .net-refer-qr { display: none; }
  body.route-v2.theme-light .net-refer-note { max-width: none; }

  /* Referral tree board: shorter, header wraps neatly */
  body.route-v2.theme-light .net-tree-wrap { height: 420px; }
  body.route-v2.theme-light .tree-head { flex-wrap: wrap; row-gap: 10px; }
  body.route-v2.theme-light .tree-tools { flex-wrap: wrap; }

  /* section rhythm */
}


/* mobile bottom nav — bigger + light-themed (owner 2026-08-09) */
body.route-v2.theme-light .mb-nav {
  background: #fff; border-top: 1px solid #e7ecf4;
  padding: 9px 10px calc(11px + env(safe-area-inset-bottom, 0px));
}
body.route-v2.theme-light .mb-tab { padding: 8px 0 6px; font-size: 11px; gap: 5px; color: #7d8aa5; }
body.route-v2.theme-light .mb-tab svg { width: 24px; height: 24px; }
body.route-v2.theme-light .mb-tab.is-active { color: var(--accent); }


/* Income KPI number — slight blue gradient so it stands out (owner 2026-08-09) */
body.route-v2.theme-light .kpi-value-income {
  background: linear-gradient(120deg, #0a8f57 0%, #12b06e 48%, #1fd089 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ══ mobile referral tree — vertical collapsible list (owner 2026-08-09) ════ */
@media (max-width: 720px) {
  /* the wrap stops being a pannable whiteboard; it's a plain vertical scroller */
  body.route-v2.theme-light .net-tree-wrap {
    height: auto; max-height: 74vh; overflow-y: auto; overflow-x: hidden;
    background: none; border: 0; border-radius: 0; padding: 0; cursor: default;
  }
  body.route-v2.theme-light .tree-tools { display: none; }        /* no zoom/fullscreen for the list */
  body.route-v2.theme-light .tree-card { padding: 16px 16px 12px; }
  body.route-v2.theme-light .tree-head { margin-bottom: 10px; }

  body.route-v2.theme-light .net-tree-list { display: flex; flex-direction: column; }
  body.route-v2.theme-light .ntl-me {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 8px;
    background: linear-gradient(135deg, #62b2ff, #2697fe); border-radius: 13px;
  }
  body.route-v2.theme-light .ntl-me .ntl-name { color: #fff; }
  body.route-v2.theme-light .ntl-me .ntl-meta { color: rgba(255, 255, 255, 0.88); }
  body.route-v2.theme-light .ntl-row {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: none; border: 0; font-family: inherit; cursor: default;
    padding: 10px 10px; padding-left: calc(10px + var(--d, 0) * 15px); border-radius: 10px;
  }
  body.route-v2.theme-light .ntl-row.has-kids { cursor: pointer; }
  body.route-v2.theme-light .ntl-row.has-kids:active,
  body.route-v2.theme-light .ntl-row.is-open { background: #f2f6fc; }
  body.route-v2.theme-light .ntl-ava { position: relative; flex: none; display: inline-flex; }
  body.route-v2.theme-light .ntl-ava .avatar { border: 0; }
  body.route-v2.theme-light .ntl-dot {
    position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
    border-radius: 50%; background: #c3ccdd; border: 2px solid #fff;
  }
  body.route-v2.theme-light .ntl-dot.on { background: #16c47f; }
  body.route-v2.theme-light .ntl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  body.route-v2.theme-light .ntl-name {
    display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 650;
    color: #1c2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.route-v2.theme-light .ntl-meta { font-size: 11.5px; color: #7d8aa5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.route-v2.theme-light .ntl-count {
    flex: none; font-size: 11px; font-weight: 700; color: #2697fe;
    background: #eaf2ff; border-radius: 99px; padding: 2px 8px;
  }
  body.route-v2.theme-light .ntl-chev { flex: none; color: #9aa6bd; display: inline-flex; transition: transform .15s ease; }
  body.route-v2.theme-light .ntl-row.is-open .ntl-chev { transform: rotate(180deg); }
  body.route-v2.theme-light .ntl-children { display: flex; flex-direction: column; }
  body.route-v2.theme-light .ntl-more {
    display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    background: none; border: 0; color: #2697fe; font-weight: 700; font-size: 13px;
    padding: 12px 10px; cursor: pointer; font-family: inherit;
  }
}

/* rank card — cleaner "next rank" progress (met = green check, else a bar) */
body.route-v2.theme-light .net-rank-next-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
body.route-v2.theme-light .net-rank-req { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
body.route-v2.theme-light .net-rank-req-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.route-v2.theme-light .net-rank-req-lbl { font-size: 12.5px; font-weight: 600; color: #7d8aa5; }
body.route-v2.theme-light .net-rank-req-val { font-size: 13px; font-weight: 800; color: #1c2942; font-variant-numeric: tabular-nums; }
body.route-v2.theme-light .net-rank-req-val em { font-style: normal; font-weight: 600; color: #9aa6bd; }
body.route-v2.theme-light .net-rank-met {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: #0ea568;
}
body.route-v2.theme-light .net-rank-met::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%; background: #0ea568;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
body.route-v2.theme-light .net-rank-req.is-met .net-rank-req-lbl { color: #1c2942; }

/* mobile: tidy the rank card */
@media (max-width: 720px) {
  body.route-v2.theme-light .rank-sec .net-rank-now-id > svg,
  body.route-v2.theme-light .rank-sec .net-rank-now-id .lead-crest { width: 34px !important; height: 34px !important; flex: none; }
  body.route-v2.theme-light .net-rank-now { gap: 14px; }
  body.route-v2.theme-light .net-ladder summary { font-size: 12.5px; }
}

/* ══ network page: uniform gap between every stacked section (after the
   2-column split was dissolved into a vertical stack) ═══════════════════════ */
body.route-v2.theme-light .shell-page--network > .kpi-strip,
body.route-v2.theme-light .shell-page--network > .net-pool-card,
body.route-v2.theme-light .shell-page--network > .tree-card,
body.route-v2.theme-light .shell-page--network > .net-tx-card,
body.route-v2.theme-light .shell-page--network > .net-refer-card,
body.route-v2.theme-light .shell-page--network > .rank-sec {
  margin-top: 0; margin-bottom: 20px;
}
body.route-v2.theme-light .shell-page--network > .dash-hairline-divider { display: none; }
@media (max-width: 720px) {
  body.route-v2.theme-light .shell-page--network > .kpi-strip,
  body.route-v2.theme-light .shell-page--network > .net-pool-card,
  body.route-v2.theme-light .shell-page--network > .tree-card,
  body.route-v2.theme-light .shell-page--network > .net-tx-card,
  body.route-v2.theme-light .shell-page--network > .net-refer-card,
  body.route-v2.theme-light .shell-page--network > .rank-sec { margin-bottom: 14px; }
}

/* ══ wallet popup — cleaner, modern-SaaS (drop the eyebrow highlight, soften
   the close button + option tiles) ═════════════════════════════════════════ */
body.route-v2.theme-light .modal-head .eyebrow {
  background: none; color: var(--muted); font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
}
body.route-v2.theme-light .modal-head { border-bottom: 0; padding-bottom: 6px; }
body.route-v2.theme-light .modal-close {
  border: 0; background: #f2f5fa; border-radius: 10px; width: 34px; height: 34px; color: var(--muted);
}
body.route-v2.theme-light .modal-close:hover { background: #e7ecf4; color: var(--text); }
body.route-v2.theme-light .wallet-choice-tile {
  background: #f6f8fc; border: 0; border-radius: 14px; padding: 18px;
}
body.route-v2.theme-light .wallet-choice-tile:hover { background: #eef3fb; }
body.route-v2.theme-light .modal-foot { border-top: 0; }
body.route-v2.theme-light .modal-foot .btn { border-radius: 12px; }

/* ══ dashboard mobile — the network's route-v2 KPI rules already apply here
   (33px value, nowrap head), so money KPIs now match the network once the
   figures read compact ($8.5M+). Only the dashboard-specific extras need a
   nudge: the Rank cell is text (not a compact number) and there's a delta
   chip + skyline the network doesn't have ═══════════════════════════════════ */
@media (max-width: 720px) {
  /* Rank value is a word ("Executive"), not a compact figure — 33px overflows */
  body.theme-light .shell-page--dashboard .kpi-cell-value.kpi-rank-value { font-size: 19px !important; letter-spacing: -0.4px; gap: 6px; line-height: 1.05; }
  body.theme-light .shell-page--dashboard .kpi-rank-value svg { width: 22px !important; height: 22px !important; }
  /* value + delta share the row; let the delta drop under the big number */
  body.theme-light .shell-page--dashboard .kpi-cell-row { margin-top: 9px; row-gap: 6px; column-gap: 8px; flex-wrap: wrap; align-items: baseline; }
  body.theme-light .shell-page--dashboard .dash-delta { font-size: 11.5px; }
  /* welcome hero: tighter, drop the tall skyline on phones for a clean start */
  body.theme-light .shell-page--dashboard .dash-hero-bars { display: none; }
  body.theme-light .shell-page--dashboard .dash-hero-content { gap: 14px; }
}

/* ══ Inventory — light-theme, network-style restyle (owner 2026-08-09) ═══════
   Title/subheading removed in markup; only the bulk action rides the top bar.
   Product thumbs were near-black (#0a0a0a) — clashed with the light canvas —
   now a soft cool panel. Cards go borderless + rounded like the network cards.
   P&L stacks at every width, killing the desktop mid-number wrap that came
   from `.inv-pl-val { overflow-wrap: anywhere }`. ══════════════════════════ */
.inv-topbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 16px; }
.inv-topbar-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

body.theme-light .inv-card { border: 0; border-radius: 18px; box-shadow: none; background: var(--surface); }
body.theme-light .inv-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(20, 30, 50, 0.24); border: 0; }

/* soft product panel — the PNGs are transparent, so they now sit on light */
body.theme-light .inv-thumb { background: linear-gradient(165deg, #f5f8fc 0%, #e8edf4 100%); }
body.theme-light .inv-card[data-status="unlisted"] .inv-thumb { background: linear-gradient(165deg, #eef1f6 0%, #e0e6ee 100%); }
body.theme-light .inv-thumb-img { filter: drop-shadow(0 10px 16px rgba(30, 41, 59, 0.16)); }
body.theme-light .inv-thumb-glow { background: radial-gradient(60% 80% at 50% 45%, rgba(38, 151, 254, 0.10) 0%, transparent 70%); }
body.theme-light .inv-thumb-fallback { color: rgba(30, 41, 59, 0.22); }

/* stacked P&L (label left · value right) at every width — never wraps a number */
body.theme-light .inv-pl { grid-template-columns: 1fr; gap: 6px; }
body.theme-light .inv-pl-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; min-width: 0; }
body.theme-light .inv-pl-cell-margin { text-align: left; }
body.theme-light .inv-pl-lbl { white-space: nowrap; }
body.theme-light .inv-pl-val { white-space: nowrap; overflow-wrap: normal; font-size: 13.5px; }

@media (max-width: 720px) {
  .inv-topbar { margin-bottom: 12px; }
  .inv-topbar .btn { width: 100%; justify-content: center; }
}

/* ══ Catalog — section headers (owner restyle 2026-08-09) ════════════════════
   Three labelled sections — Build / Prebuilt / Browse — so the page reads as a
   clear flow. Titles use the network's display-font section-title treatment. */
.cat-sec-head { margin: 0 0 14px; }
.cat-sec-head + .pkx-value-build, .cat-sec-head + .pkx-rail, .cat-sec-head + .cat-toolbar { margin-top: 0; }
.shell-page--catalog .cat-sec-head:not(:first-of-type) { margin-top: 32px; }
.cat-sec-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.cat-sec-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 62ch; }
@media (max-width: 720px) {
  .shell-page--catalog .cat-sec-head:not(:first-of-type) { margin-top: 24px; }
  .cat-sec-head { margin-bottom: 11px; }
  .cat-sec-title { font-size: 17px; }
  .cat-sec-sub { font-size: 12.5px; }
}

/* ══ network page — DESKTOP two-column layout restored (owner 2026-08-09) ═════
   The section reorder was meant for MOBILE only. The single-stack markup gives
   the correct mobile order (kpis → pool → tree → tx → refer → rank); on desktop
   (≥1001px, matching the old .net-split breakpoint) we re-compose it via grid
   into the original arrangement: Recent transactions tall on the left, Pool +
   Referral link stacked on the right, the tree full-width below, then rank.
   ≤1000px falls back to the natural stack — mobile is unchanged. ════════════ */
@media (min-width: 1001px) {
  body.route-v2.theme-light .shell-page--network {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kpis kpis"
      "tx   pool"
      "tx   refer"
      "tree tree"
      "rank rank"
      "foot foot";
    column-gap: 18px;
    row-gap: 20px;
    align-items: start;
  }
  body.route-v2.theme-light .shell-page--network > .kpi-strip  { grid-area: kpis; }
  body.route-v2.theme-light .shell-page--network > .net-tx-card { grid-area: tx; align-self: stretch; }
  body.route-v2.theme-light .shell-page--network > .net-pool-card { grid-area: pool; }
  body.route-v2.theme-light .shell-page--network > .net-refer-card { grid-area: refer; align-self: stretch; }
  body.route-v2.theme-light .shell-page--network > .tree-card:not(.rank-sec) { grid-area: tree; }
  body.route-v2.theme-light .shell-page--network > .rank-sec   { grid-area: rank; }
  body.route-v2.theme-light .shell-page--network > .r-footnote { grid-area: foot; }
  /* grid gap owns the spacing now — drop the stacked margins so it doesn't double */
  body.route-v2.theme-light .shell-page--network > .kpi-strip,
  body.route-v2.theme-light .shell-page--network > .net-pool-card,
  body.route-v2.theme-light .shell-page--network > .tree-card,
  body.route-v2.theme-light .shell-page--network > .net-tx-card,
  body.route-v2.theme-light .shell-page--network > .net-refer-card,
  body.route-v2.theme-light .shell-page--network > .rank-sec { margin-bottom: 0; }
}

/* ══ Catalog mode chooser (owner rework 2026-08-09) — Auto-build / Select /
   Make. Three cards up top; the active one leads the accent, and only its
   panel renders below. Replaces the old crammed three-section stack. ════════ */
.cat-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.cat-mode {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 17px; border-radius: 16px; background: #e3e8f1;
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-mode:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -18px rgba(20, 30, 50, 0.28); }
.cat-mode.is-active { border-color: var(--accent); background: #f4f9ff; }
.cat-mode-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; background: #fff; color: #6b7896; flex: none; }
.cat-mode-ic svg { width: 21px; height: 21px; }
.cat-mode.is-active .cat-mode-ic { background: var(--accent); color: #fff; }
.cat-mode-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cat-mode-title { font-weight: 700; font-size: 15px; color: var(--text); font-family: var(--font-display); letter-spacing: -0.2px; }
.cat-mode-desc { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

.cat-panel { margin-bottom: 8px; }
.cat-panel--auto { max-width: 640px; }   /* the budget builder reads better narrow */

@media (max-width: 720px) {
  .cat-modes { gap: 8px; margin-bottom: 16px; }
  .cat-mode { flex-direction: column; text-align: center; gap: 7px; padding: 13px 6px; border-radius: 13px; }
  .cat-mode-ic { width: 36px; height: 36px; border-radius: 10px; }
  .cat-mode-ic svg { width: 19px; height: 19px; }
  .cat-mode-title { font-size: 12.5px; }
  .cat-mode-desc { display: none; }
  .cat-panel--auto { max-width: none; }
}

/* Auto-build fills the width now (was capped narrow, leaving a big empty gap):
   the budget card + a 3-step "how it works" row. */
.cat-panel--auto { max-width: none; }
.cat-auto { display: flex; flex-direction: column; gap: 16px; }
.cat-auto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cat-auto-step { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border-radius: 16px; padding: 18px; }
.cat-auto-step-ic { display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: #eef2f8; color: var(--accent); flex: none; }
.cat-auto-step-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-auto-step-txt b { font-size: 14px; font-weight: 700; color: var(--text); }
.cat-auto-step-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 720px) {
  .cat-auto { gap: 12px; }
  .cat-auto-steps { grid-template-columns: 1fr; gap: 10px; }
  .cat-auto-step { padding: 14px 15px; border-radius: 13px; }
}

/* Let the active catalog panel own the leftover vertical space so short modes
   (Auto-build) center their content instead of leaving a big bottom gap. Tall
   modes (Select/Make) just fill it naturally. */
body.theme-light .shell-page--catalog { display: flex; flex-direction: column; }
body.theme-light .shell-page--catalog > .cat-panel { flex: 1 0 auto; }
body.theme-light .shell-page--catalog > .cat-panel--auto { display: flex; flex-direction: column; justify-content: center; padding-bottom: 3vh; }
body.theme-light .shell-page--catalog > .r-footnote { flex: none; }

/* ══ Auto-build builder (owner 2026-08-09) — a grounded, centred card: badge,
   heading, a filled amount field, the CTA, and presets. Centred vertically by
   .cat-panel--auto so it reads as a finished full-screen builder. ══════════ */
.cat-build { width: 100%; display: flex; justify-content: center; }
.cat-build-card {
  width: 100%; max-width: 480px; background: var(--surface); border-radius: 24px;
  padding: 38px 40px 34px; text-align: center;
  box-shadow: 0 24px 60px -34px rgba(20, 30, 50, 0.30);
  display: flex; flex-direction: column; align-items: center;
}
.cat-build-badge {
  width: 52px; height: 52px; border-radius: 15px; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 18px;
  background: #eaf4ff; color: var(--accent);
}
.cat-build-badge svg { width: 24px; height: 24px; }
.cat-build-title { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.cat-build-sub { margin: 9px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 350px; }
.cat-build-field {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 28px auto 4px;
  background: transparent; border: 0; border-bottom: 2px solid var(--border); border-radius: 0; padding: 6px 4px 10px;
  transition: border-color .15s ease; cursor: text;
}
.cat-build-field:focus-within { border-bottom-color: var(--accent); background: transparent; box-shadow: none; }
.cat-build-field-dollar { font-size: 34px; font-weight: 700; color: var(--muted-2); font-family: var(--font-display); line-height: 1; }
.cat-build-input {
  field-sizing: content; width: auto; min-width: 1ch; max-width: 260px; border: 0; background: transparent; outline: none; padding: 0;
  font-size: 46px; line-height: 1.05; font-weight: 800; font-family: var(--font-display); color: var(--text);
  letter-spacing: -1px; text-align: left; -webkit-appearance: none; appearance: none;
}
.cat-build-input::placeholder { color: #c3cede; }
.cat-build-input:focus, .cat-build-input:focus-visible { outline: none; box-shadow: none; background: transparent; }
.cat-build-cta { margin-top: 16px; width: 100%; height: 52px; font-size: 15px; border-radius: 14px; }
.cat-build-presets { margin-top: 26px; width: 100%; padding-top: 22px; border-top: 1px solid var(--border); }
.cat-build-presets-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted-2); margin-bottom: 13px; }
.cat-build-preset-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cat-build-preset { padding: 9px 14px; border-radius: 10px; background: #f6f8fc; border: 1px solid transparent; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
.cat-build-preset:hover { border-color: var(--accent); color: var(--accent); background: #f1f8ff; transform: translateY(-1px); }
@media (max-width: 720px) {
  .cat-build-card { max-width: none; padding: 30px 22px 26px; border-radius: 20px; }
  .cat-build-title { font-size: 23px; }
  .cat-build-field { padding: 14px 18px; }
  .cat-build-input { font-size: 30px; }
  .cat-build-cta { height: 50px; }
}

/* ══ Package tray — light-theme + declutter (owner 2026-08-09). It was a dark
   dock (rgba(10,10,10)) clashing with the light portal; make it a clean white
   dock. Children already use theme tokens, so mainly the surface changes. ══ */
body.theme-light .pkx-tray {
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -16px 44px -22px rgba(20, 30, 50, 0.22);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-light .pkx-tray-ic { background: #eaf4ff; color: var(--accent); border-color: transparent; }
body.theme-light .pkx-tray-cta { color: var(--accent); }
body.theme-light .pkx-tray-bar:hover { background: #f7f9fc; }
body.theme-light .qty { background: #fff; border-color: var(--border); }
body.theme-light .pkx-line-rm { background: #fff; }

/* ══ Package checkout — minimal popup (owner 2026-08-09). Thumbnail strip, one
   big "you pay" number, two clean rows, one confirm. Replaces the busy list +
   money-block modal. ═══════════════════════════════════════════════════════ */
.ckx { text-align: center; padding: 2px 2px 0; }
.ckx-center { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 34px 0; }
.ckx-status { font-size: 14px; color: var(--muted); margin: 0; }

.ckx-thumbs { display: flex; justify-content: center; align-items: center; margin: 2px 0 22px; }
.ckx-thumb {
  width: 46px; height: 46px; border-radius: 13px; overflow: hidden; flex: none;
  background: #f2f5fa; border: 2.5px solid #fff; margin-left: -10px;
  box-shadow: 0 3px 8px -2px rgba(20, 30, 50, 0.16);
  display: inline-flex; align-items: center; justify-content: center;
}
.ckx-thumb:first-child { margin-left: 0; }
.ckx-thumb .cat-art, .ckx-thumb .cat-art-img { border: 0 !important; border-radius: 0 !important; width: 100%; height: 100%; max-width: 86%; animation: none; }
.ckx-thumb-more { background: #e7edf5; color: var(--muted); font-size: 13px; font-weight: 800; font-family: var(--font-display); }

.ckx-hero { margin-bottom: 22px; }
.ckx-hero-lbl { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted-2); }
.ckx-hero-lbl.ckx-ok { color: var(--money-strong); }
.ckx-hero-amt { display: block; font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -1.5px; color: var(--text); margin-top: 5px; line-height: 1.05; }
.ckx-hero-amt--sm { font-size: 26px; letter-spacing: -0.6px; }
.ckx-hero-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

.ckx-rows { border-top: 1px solid var(--border); text-align: left; }
.ckx-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); }
.ckx-row:last-child { border-bottom: 0; }
.ckx-row strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ckx-row .ckx-pos { color: var(--money-strong); }
.ckx-row em { font-style: normal; color: var(--muted-2); font-size: 12px; font-weight: 600; }

.ckx-check { width: 62px; height: 62px; border-radius: 50%; margin: 4px auto 18px; display: flex; align-items: center; justify-content: center; background: var(--money-tint); color: var(--money-strong); }
.ckx-warn { display: flex; align-items: flex-start; gap: 9px; text-align: left; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fff5f4; color: #b42318; font-size: 13px; line-height: 1.45; }
.ckx-warn svg { flex: none; margin-top: 1px; }
.ckx-warn strong { font-weight: 800; }

/* tighter popup shell for the minimal checkout */
body.theme-light .modal:has(.ckx) { max-width: 400px; }
body.theme-light .modal:has(.ckx) .modal-head { padding-bottom: 0; border-bottom: 0; min-height: 0; }
body.theme-light .modal:has(.ckx) .modal-head h3 { display: none; }
body.theme-light .modal:has(.ckx) .modal-body { padding-top: 4px; }
body.theme-light .modal:has(.ckx) .modal-foot { border-top: 0; gap: 10px; padding-top: 8px; }
body.theme-light .modal:has(.ckx) .modal-foot .btn { flex: 1; height: 46px; border-radius: 12px; font-size: 14px; }

/* Package tray is now a slim summary bar — no expandable panel; review +
   confirm is the popup only. */
body.theme-light .pkx-tray-bar { cursor: default; padding: 13px 20px; }
.pkx-tray-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted-2); cursor: pointer; flex: none;
}
.pkx-tray-clear:hover { color: var(--danger); border-color: var(--danger); }
.pkx-tray-checkout { flex: none; height: 40px; padding: 0 20px; font-size: 13.5px; }
@media (max-width: 720px) {
  body.theme-light .pkx-tray-bar { padding: 10px 12px; gap: 8px; }
  body.theme-light .pkx-tray-bar .pkx-chip { display: none; }
  body.theme-light .pkx-tray-sum { font-size: 12px; }
  .pkx-tray-checkout { padding: 0 14px; }
}

.cat-build-maxbtn { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: 8px; }
.cat-build-maxbtn:hover { background: #f1f8ff; }
@media (min-width: 721px) { body.theme-light .pkx-tray-bar { padding-right: 150px; } }

/* ── Inventory notification badge + package "fly into nav" (owner 2026-08-09) ── */
.sb-link { position: relative; }
.sb-badge-notif {
  margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 6px !important;
  background: #fb4b52 !important; color: #fff !important; border: 0 !important;
  font-size: 11.5px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
body.route-v2.theme-light .sb-link.is-active .sb-badge-notif { background: #fff !important; color: var(--accent) !important; }

.mb-tab-ic { position: relative; display: inline-flex; }
.mb-tab-badge {
  position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #fb4b52; color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

.fly-item {
  position: fixed; z-index: 10050; width: 42px; height: 42px; border-radius: 11px; overflow: hidden;
  background: #fff; box-shadow: 0 8px 22px -6px rgba(20, 30, 50, 0.35); pointer-events: none;
  margin: -21px 0 0 -21px; transform: translate(0, 0) scale(1); opacity: 1;
  transition: transform 0.85s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.85s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.fly-item .cat-art, .fly-item .cat-art-img { border: 0 !important; border-radius: 0 !important; width: 100%; height: 100%; max-width: 88%; animation: none; }
.nav-arrive { animation: navArrive 0.7s ease; }
@keyframes navArrive { 0%, 100% { transform: none; } 35% { transform: scale(1.14); } }
body.route-v2.theme-light .sb-link.nav-arrive { background: #eaf4ff; }

/* ══ Inventory — simpler card + pulsing "List all" (owner redesign 2026-08-09) ══ */
.inv-thumb { position: relative; }
.inv-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800;
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px -2px rgba(20, 30, 50, 0.22);
}
.inv-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.inv-badge-unlisted { color: #c1770b; }
.inv-badge-unlisted .inv-badge-dot { background: #f59e0b; }
.inv-badge-listed { color: var(--money-strong); }
.inv-badge-listed .inv-badge-dot { background: var(--money-strong); }
.inv-badge-sold { color: var(--muted); }
.inv-badge-sold .inv-badge-dot { background: var(--muted-2); }

body.theme-light .inv-body { padding: 15px 16px 16px; gap: 0; }
body.theme-light .inv-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-light .inv-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.inv-value { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.inv-value-amt { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.inv-value-margin { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--money-strong); background: var(--money-tint); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.inv-value-tag { font-size: 11px; color: var(--muted-2); margin: 3px 0 14px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
body.theme-light .inv-foot { display: flex; gap: 8px; margin-top: auto; }
.inv-list-btn { flex: 1; }
body.theme-light .inv-foot .btn { height: 38px; }

.inv-listall-btn { animation: listallPulse 1.9s ease-in-out infinite; }
.inv-listall-btn:hover { animation: none; }
@keyframes listallPulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 151, 254, 0.5); }
  70% { box-shadow: 0 0 0 11px rgba(38, 151, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 151, 254, 0); }
}
@media (prefers-reduced-motion: reduce) { .inv-listall-btn { animation: none; } }

/* ══ Orders table — cleaner (owner 2026-08-09): Order+date · Item · Status ·
   Value. Dropped the raw-UUID Reference + always-"Portal" Channel columns. ══ */
.ord-date-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }
body.theme-light .ord-tbl td, body.theme-light .ord-tbl th { padding: 15px 18px; }
body.theme-light .ord-tbl .col-order { width: 140px; }
body.theme-light .ord-row { cursor: pointer; transition: background .12s ease; }
body.theme-light .ord-row:hover { background: #f5f8fc; }
.ord-chevron { display: inline-flex; margin-left: 10px; color: var(--muted-2); opacity: 0; transform: translateX(-3px); transition: opacity .12s ease, transform .12s ease; vertical-align: middle; }
body.theme-light .ord-row:hover .ord-chevron { opacity: 1; transform: translateX(0); }
.ord-tbl .num { white-space: nowrap; }

/* Borderless, shadowless containers (owner 2026-08-09) — floating white cards
   on the grey canvas, matching the dashboard/network look. */
body.theme-light .stat-strip { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 16px; margin-bottom: 20px; }
body.theme-light .stat-strip > div { background: var(--surface); border: 0 !important; border-radius: 16px; }
body.theme-light .stat-strip > div:hover { background: var(--surface); }
body.theme-light .table-wrap { border: 0; box-shadow: none; border-radius: 18px; }
@media (max-width: 720px) { body.theme-light .stat-strip { gap: 10px; } }

/* Settings is full-width like every other page (was capped at 1100px centered). */
body.theme-light .settings-shell { max-width: none; margin-left: 0; margin-right: 0; }

/* ══ Dashboard hero — reference first-section, light theme (owner 2026-08-10) ══
   NO outer card. The welcome + a blue skyline sit STRAIGHT on the canvas; the
   KPIs get their OWN big white container below, whose opaque top covers the bar
   bases so only the crisp tops show behind the welcome. White (not black), bars
   blue (not green). ═════════════════════════════════════════════════════════ */
body.theme-light #root.route-dash .dash-hero-wrap {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  margin: 0 0 16px; position: relative; overflow: visible;
}
/* the (invisible in light theme) hairline was still reserving ~31px — drop it so
   the chart sits right under the KPI row */
body.theme-light #root.route-dash .dash-hairline-divider { display: none !important; }
body.theme-light #root.route-dash .dash-hero-content { gap: 40px; }
/* blue skyline straight on the canvas, behind the welcome */
body.theme-light #root.route-dash .dash-hero-bars { display: flex !important; inset: 0; }
body.theme-light #root.route-dash .dash-hero__bar {
  background: linear-gradient(180deg, rgba(38, 151, 254, 0.07) 0%, rgba(38, 151, 254, 0.30) 52%, rgba(38, 151, 254, 0.46) 100%);
  border-radius: 7px 7px 0 0; margin: 0 3px;
}
body.theme-light #root.route-dash .dash-header__title { color: #141b2b; letter-spacing: -0.5px; }
body.theme-light #root.route-dash .dash-header__subtitle { color: #5c6675; }
/* the KPI strip is the ONLY container here — bigger, white, one divided unit */
body.theme-light #root.route-dash .kpi-strip {
  background: #ffffff; border: 1px solid #e9edf4; border-radius: 18px;
  box-shadow: 0 22px 48px -30px rgba(23, 43, 84, 0.28);
  grid-auto-rows: minmax(120px, auto);
}
body.theme-light #root.route-dash .kpi-cell { padding: 26px 28px; }
body.theme-light #root.route-dash .kpi-strip .kpi-cell:not(.kpi-cell--promo) {
  background: transparent; border: 0 !important;
  border-left: 1px solid #eef1f6 !important; border-radius: 0; box-shadow: none;
}
body.theme-light #root.route-dash .kpi-strip .kpi-cell:first-child { border-left: 0 !important; }
body.theme-light #root.route-dash .kpi-cell-head { color: #7b8698; }
body.theme-light #root.route-dash .kpi-cell-head .ic-box { background: #e8f1fe; color: #2697fe; border-color: transparent; }
body.theme-light #root.route-dash .kpi-cell-value:not(.kpi-value-income) { color: #141b2b; }
body.theme-light #root.route-dash .kpi-cell-sub { color: #97a0b0; }
body.theme-light #root.route-dash .dash-delta.up { color: #16a34a; }
body.theme-light #root.route-dash .dash-delta.down { color: #e5484d; }
body.theme-light #root.route-dash .kpi-rank-value svg { filter: none; opacity: 1; }
@media (max-width: 720px) {
  body.theme-light #root.route-dash .dash-hero-content { gap: 22px; }
  /* the behind-header skyline gets cramped by the 2x2 grid on phones — drop it */
  body.theme-light #root.route-dash .dash-hero-bars { display: none !important; }
  body.theme-light #root.route-dash .kpi-cell { padding: 14px 16px; }
  body.theme-light #root.route-dash .kpi-strip .kpi-cell { border-left: 0 !important; border-top: 1px solid #eef1f6 !important; }
  body.theme-light #root.route-dash .kpi-strip .kpi-cell:first-child, body.theme-light #root.route-dash .kpi-strip .kpi-cell:nth-child(2) { border-top: 0 !important; }
}

/* ══ Dashboard v3 polish — chart card, tables, dark referral bookend ═════════
   (owner 2026-08-09) Push the light dashboard to a premium finish. ═════════ */

/* Chart header: title clean (icon removed), legend as tidy pills */
body.theme-light #root.route-dash .chart-title { font-size: 18px; font-weight: 750; letter-spacing: -0.4px; color: #141b2b; }
body.theme-light #root.route-dash .chart-sec-sub { color: #7a8496; font-size: 13px; margin-top: 3px; }
body.theme-light #root.route-dash .chart-controls-lg .cv2-legend { gap: 8px; margin-right: 6px; }
body.theme-light #root.route-dash .chart-controls-lg .cv2-legend-item {
  padding: 6px 12px; border-radius: 99px; background: #f2f5fa; border: 1px solid #e7ebf2;
  color: #3a4356; font-weight: 650; font-size: 12.5px;
}
body.theme-light #root.route-dash .chart-controls-lg .cv2-legend-dot { width: 9px; height: 9px; }

/* Chart: header + plot live in ONE flat white container (owner 2026-08-10) —
   the section IS the card; the plot shell is just the body inside it. */
body.theme-light #root.route-dash .chart-sec {
  background: #fff; border-radius: 18px; padding: 20px 22px 14px; margin-bottom: 16px;
}
body.theme-light #root.route-dash .chart-sec-head { padding: 0 2px; }
body.theme-light #root.route-dash .chart-shell { background: transparent !important; border-radius: 0; padding: 0; }
body.theme-light #root.route-dash .cv2-end { filter: none; }

/* Twin tables — bigger rounded thumbs, tabular figures, gentle row hover */
body.theme-light #root.route-dash .dash-tables .card { border-radius: 20px; }
body.theme-light #root.route-dash .dash-tables .tbl-thumb {
  width: 36px; height: 36px; border-radius: 10px; background: #f2f5fa; border-color: #eaeef4;
}
body.theme-light #root.route-dash .dash-tables .tbl-cell-title { font-weight: 650; color: #1a2233; }
body.theme-light #root.route-dash .dash-tables .tbl-cell-sub { color: #97a0b0; }
body.theme-light #root.route-dash .dash-tables .tbl .num { font-variant-numeric: tabular-nums; }
body.theme-light #root.route-dash .dash-tables .tbl tbody tr { transition: background .12s ease; }
body.theme-light #root.route-dash .dash-tables .tbl tbody tr:hover { background: #f6f8fc; }
body.theme-light #root.route-dash .dash-tables .tbl thead th {
  font-size: 10.5px; letter-spacing: 0.6px; color: #9aa3b2; border-bottom: 1px solid #eef1f6;
}

/* Referral banner — clean white card at the foot of the page */
body.theme-light #root.route-dash .refer-banner {
  background: #ffffff; border: 1px solid #e9edf4; color: #141b2b; border-radius: 24px;
  box-shadow: 0 18px 40px -28px rgba(23, 43, 84, 0.18);
}
body.theme-light #root.route-dash .refer-banner h3 { color: #141b2b; }
body.theme-light #root.route-dash .refer-banner .refer-banner-text p,
body.theme-light #root.route-dash .refer-banner .rb-action-note { color: #6b7688; }
body.theme-light #root.route-dash .refer-banner .rb-action-lbl { color: #55606f; }
body.theme-light #root.route-dash .refer-banner .refer-banner-eyebrow { color: #2697fe; }
body.theme-light #root.route-dash .refer-banner .refer-banner-input {
  background: #f5f7fb; border: 1px solid #e6eaf1; color: #2b3446;
}
body.theme-light #root.route-dash .refer-banner .btn-ghost {
  /* beats the route-v2 .btn:not()... rule (specificity 1,6,1) that forces white */
  background: #f5f7fb !important; border: 1px solid #e6eaf1 !important;
}
body.theme-light #root.route-dash .refer-banner .btn-ghost:hover { background: #eef2f8 !important; }
body.theme-light #root.route-dash .refer-banner .ref-qr-frame { background: #fff; border-color: #e9edf4; }

/* ══ Flat containers — NO shadows / glows / borders (owner 2026-08-10) ═══════
   The user wants nothing behind any container on the page: null the shadow
   tokens, then strip box-shadow + outer border off every content container.
   Fills alone separate a card from the canvas. Internal dividers (KPI segments,
   table rows) stay — they're structure, not container chrome. ══════════════ */
body.theme-light { --card-shadow: none; --glass-shadow: none; }
body.theme-light #root .card,
body.theme-light #root [class*="card"],
body.theme-light #root .kpi-strip,
body.theme-light #root .dash-hero-wrap,
body.theme-light #root .chart-shell,
body.theme-light #root .chart-sec,
body.theme-light #root .refer-banner,
body.theme-light #root .table-wrap,
body.theme-light #root .tbl-wrap,
body.theme-light #root .stat-strip,
body.theme-light #root .settings-shell,
body.theme-light #root .net-board,
body.theme-light #root .whiteboard,
body.theme-light #root .pool-card {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Affiliate-earnings KPI number — black like the rest, not green (owner 2026-08-10) */
body.theme-light #root .kpi-value-income {
  background: none !important;
  -webkit-text-fill-color: #141b2b !important;
  color: #141b2b !important;
}

/* ══ Dashboard income donut — the reference Total-Pool ring, dashboard-sized ══
   (owner 2026-08-10) Bigger, centered ring inside the one flat chart card. ═══ */
body.theme-light #root.route-dash .dash-donut-body { justify-content: center; gap: 46px; padding: 22px 2px 14px; }
body.theme-light #root.route-dash .dash-donut-ring { width: 216px; height: 216px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-total { font-size: 31px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-cap { font-size: 12.5px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-legend { flex: 0 1 360px; min-width: 258px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-row { padding: 9px 2px; font-size: 14px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-dot { width: 11px; height: 11px; }
body.theme-light #root.route-dash .dash-donut-body .net-pool-amt { min-width: 84px; }

/* ══ Sidebar + header polish (owner 2026-08-10) — buyer.gg-style nav ═════════ */
/* remove the page-title text ("Dashboard", etc.) from the header on every page */
body.route-v2.theme-light .tb-title { display: none; }

/* sidebar: hairline right border (separates menu from content) + header divider */
body.route-v2.theme-light .sb { border-right: 1px solid var(--border); }
body.route-v2.theme-light .sb-logo {
  border-bottom: 1px solid var(--border); padding: 24px 22px 20px; margin-bottom: 4px;
}
body.route-v2.theme-light .sb-nav { padding: 16px 12px 14px; gap: 3px; }

/* subtle dividers between nav sections */
body.route-v2.theme-light .sb-group:not(:first-child) {
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px;
}

/* active item: light pill + blue left bar + blue icon/text (not a solid blue pill) */
body.route-v2.theme-light .sb-link.is-active {
  color: var(--accent); background: #eef3fb; box-shadow: none; position: relative;
}
body.route-v2.theme-light .sb-link.is-active .sb-ic { color: var(--accent); opacity: 1; }
body.route-v2.theme-light .sb-link.is-active::before {
  display: block; content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 24px; border-radius: 0 4px 4px 0; background: var(--accent);
}
body.route-v2.theme-light .sb-link.is-active:hover { background: #e7eef8; color: var(--accent); }
body.route-v2.theme-light .sb-link.is-active:hover .sb-ic { color: var(--accent); }

/* help tooltip must float ABOVE sibling KPI cells + the header, never under */
body.theme-light .kpi-strip, body.theme-light .kpi-cell, body.theme-light .kpi-cell-head { overflow: visible; }
.help-tip:hover, .help-tip:focus-visible, .help-tip.is-open { z-index: 60; }
.help-tip::after { z-index: 210; }

/* ══ Recent sales + Networker activity → network "Recent transactions" feel ══
   (owner 2026-08-10) Rounded zebra rows, chunky icon tiles, uppercase column
   headers — the .net-tx-card look, on the dashboard's two tables. ══════════ */
body.theme-light #root.route-dash .dash-tables .tbl { border-collapse: separate; border-spacing: 0 3px; }
body.theme-light #root.route-dash .dash-tables .tbl thead th {
  padding: 8px 14px 12px; border-bottom: 1px solid var(--border); background: transparent;
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); font-weight: 700;
}
body.theme-light #root.route-dash .dash-tables .tbl tbody td { padding: 13px 14px; border: 0; }
body.theme-light #root.route-dash .dash-tables .tbl tbody tr:nth-child(even) td { background: #f5f8fc; }
body.theme-light #root.route-dash .dash-tables .tbl tbody tr:hover td { background: #eaf1fb; }
body.theme-light #root.route-dash .dash-tables .tbl tbody td:first-child { border-radius: 11px 0 0 11px; }
body.theme-light #root.route-dash .dash-tables .tbl tbody td:last-child { border-radius: 0 11px 11px 0; }
body.theme-light #root.route-dash .dash-tables .tbl-thumb { width: 34px; height: 34px; border-radius: 10px; }
body.theme-light #root.route-dash .dash-tables .tbl .num { font-weight: 700; }
body.theme-light #root.route-dash .dash-tables .tbl-cell-title { font-weight: 600; }

/* KPI help tooltips sit right under the topbar — flip them to drop DOWN (over
   the value) so they never render behind the header. z-index bumped above. */
body.theme-light .kpi-cell-head .help-tip::after { top: calc(100% + 9px); bottom: auto; }

/* ══ Header shorter + aligned with the logo divider; fuller content (owner 2026-08-10) */
body.route-v2.theme-light { --tb-h: 66px; }
body.route-v2.theme-light .sb-logo { height: var(--tb-h); padding: 0 22px; margin-bottom: 0; }
body.route-v2.theme-light .tb-in { height: var(--tb-h); min-height: 0; padding: 0 28px; align-items: center; }
@media (min-width: 1001px) {
  body.route-v2.theme-light .shell-page { padding: 20px 26px 90px; }
}

/* ══ Site footer — buyer.gg-style multi-column + crypto badges (owner 2026-08-10) */
body.theme-light .dash-foot {
  margin-top: 10px; padding: 40px 2px 0; border-top: 1px solid var(--border); color: var(--muted); display: block;
}
body.theme-light .dash-foot-top {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 34px;
}
body.theme-light .dash-foot-brand { max-width: 360px; }
body.theme-light .dash-foot-logo { height: 26px; width: auto; display: block; margin-bottom: 15px; }
body.theme-light .dash-foot-tag { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
body.theme-light .dash-foot-socials { display: flex; gap: 10px; }
body.theme-light .dash-foot-soc {
  width: 36px; height: 36px; border-radius: 10px; background: #eef2f8;
  color: #566180; display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
body.theme-light .dash-foot-soc:hover { background: var(--accent); color: #fff; }
body.theme-light .dash-foot-col-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 12px;
}
body.theme-light .dash-foot-col a {
  display: block; font-size: 13.5px; color: #46536e; text-decoration: none; padding: 6px 0;
  transition: color .13s ease;
}
body.theme-light .dash-foot-col a:hover { color: var(--accent); }
body.theme-light .dash-foot-legal {
  font-size: 12px; line-height: 1.65; color: var(--muted-2);
  border-top: 1px solid var(--border); padding-top: 22px; margin: 0;
}
body.theme-light .dash-foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 22px; padding: 20px 0 30px;
}
body.theme-light .dash-foot-copy { font-size: 12.5px; color: var(--muted-2); margin: 0; }
body.theme-light .dash-foot-pay { display: flex; gap: 8px; }
body.theme-light .dash-foot-coin {
  min-width: 34px; height: 24px; padding: 0 9px; border-radius: 6px; color: #fff;
  font-weight: 800; font-size: 11px; letter-spacing: 0.2px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  body.theme-light .dash-foot-top { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  body.theme-light .dash-foot-brand { grid-column: 1 / -1; max-width: none; }
}

/* ══ Footer → full-bleed BLACK, buyer.gg-exact (owner 2026-08-10) ═══════════ */
body.theme-light .dash-foot {
  background: #0a0a0c; color: #8b93a5; border-top: 0;
  margin-top: 26px; padding: 48px 40px 4px;
}
body.theme-light .dash-foot-top { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 42px; }
body.theme-light .dash-foot-brandrow { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
body.theme-light .dash-foot-logo { height: 30px; width: auto; margin: 0; display: block; }
body.theme-light .dash-foot-brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
body.theme-light .dash-foot-tag { color: #7b8496; }
body.theme-light .dash-foot-soc { background: #1a1b1f; color: #8b93a5; }
body.theme-light .dash-foot-soc:hover { background: #26272c; color: #fff; }
body.theme-light .dash-foot-col-h { color: #6b7488; }
body.theme-light .dash-foot-col a { color: #aeb6c4; }
body.theme-light .dash-foot-col a:hover { color: #fff; }
body.theme-light .dash-foot-legal { color: #5b6478; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 24px; }
body.theme-light .dash-foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.09); padding: 22px 0 30px; }
body.theme-light .dash-foot-copy { color: #8b93a5; }
body.theme-light .dash-foot-links { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
body.theme-light .dash-foot-links a { color: #8b93a5; text-decoration: none; font-size: 13px; transition: color .13s ease; }
body.theme-light .dash-foot-links a:hover { color: #fff; }
body.theme-light .dash-foot-dot { color: #3a3d47; }

/* remove the vertical line between sidebar/logo and header; keep the horizontal
   logo divider aligned with the topbar border (box-sizing so both land at --tb-h) */
body.route-v2.theme-light .sb { border-right: 0; }
/* content-box so the logo's bottom border lands at the same y as the topbar's
   (66px content + 1px border = 67, matching .tb) — kills the 1px offset */
body.route-v2.theme-light .sb-logo { box-sizing: content-box; }
/* footer supplies the bottom now — drop the big page bottom-padding */
@media (min-width: 1001px) { body.route-v2.theme-light .shell-page { padding-bottom: 22px; } }

/* ══ Mobile KPI grid — perfectly symmetric 2×2, full + divider, flush promo ══
   (owner 2026-08-10) Kill the gap, equal rows, one vertical + one horizontal
   divider, promo fills its quadrant (clipped to the container corner). ═════ */
@media (max-width: 720px) {
  body.theme-light #root.route-dash .kpi-strip {
    gap: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: minmax(142px, auto) !important;
    border-radius: 20px; overflow: hidden;
  }
  body.theme-light #root.route-dash .kpi-strip .kpi-cell {
    border: 0 !important; border-radius: 0 !important; margin: 0 !important;
    padding: 16px 16px !important; min-height: 0 !important;
  }
  /* vertical centre divider = right edge of the left column (cells 1 & 3) */
  body.theme-light #root.route-dash .kpi-strip .kpi-cell:nth-child(odd) { border-right: 1px solid #eef1f6 !important; }
  /* horizontal centre divider = top edge of the bottom row (cells 3 & 4) */
  body.theme-light #root.route-dash .kpi-strip .kpi-cell:nth-child(n+3) { border-top: 1px solid #eef1f6 !important; }
  body.theme-light #root.route-dash .kpi-cell--promo { border-radius: 0 !important; }
}

/* ══ Mobile footer — smaller, clean & simple (owner 2026-08-10) ═════════════ */
@media (max-width: 720px) {
  body.theme-light .dash-foot { padding: 26px 20px 4px; margin-top: 16px; }
  body.theme-light .dash-foot-top { display: block; padding-bottom: 20px; }
  body.theme-light .dash-foot-col { display: none; }   /* nav lives in the sidebar / bottom bar */
  body.theme-light .dash-foot-brand { max-width: none; }
  body.theme-light .dash-foot-brand-name { font-size: 19px; }
  body.theme-light .dash-foot-brandrow { margin-bottom: 12px; }
  body.theme-light .dash-foot-tag { font-size: 12.5px; margin-bottom: 15px; }
  body.theme-light .dash-foot-socials { gap: 9px; }
  body.theme-light .dash-foot-soc { width: 34px; height: 34px; }
  body.theme-light .dash-foot-legal { font-size: 11px; line-height: 1.6; padding-top: 18px; }
  body.theme-light .dash-foot-bottom { flex-direction: column; align-items: flex-start; gap: 13px; padding: 16px 0 22px; }
  body.theme-light .dash-foot-links { gap: 10px; font-size: 12.5px; }
}

/* ══ Mobile: polish the Get-Started promo + drop the first section down ══════
   (owner 2026-08-10) ═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* promo quadrant: center the content, show the sub line, size the button */
  body.theme-light #root.route-dash .kpi-cell--promo { justify-content: center !important; }
  body.theme-light #root.route-dash .kpi-cell--promo .dash-promo-gradient-panel { gap: 3px; }
  body.theme-light #root.route-dash .kpi-cell--promo .dash-promo-gradient-panel__title { font-size: 15px; line-height: 1.2; }
  body.theme-light #root.route-dash .kpi-cell--promo .dash-promo-gradient-panel__desc { display: block; font-size: 11.5px; }
  body.theme-light #root.route-dash .kpi-cell--promo .dash-promo-gradient-panel__cta { margin-top: 12px; height: 34px; font-size: 13px; padding: 0 15px; }
  /* first section sits balanced between the header and the chart */
  body.theme-light #root.route-dash .dash-hero-wrap { margin: 16px 0 18px; }
}

/* Footer logo → the real funnel mark (transparent, no tile) */
body.theme-light .dash-foot-logo {
  height: 28px; width: auto; object-fit: contain; display: block; margin: 0;
}

/* Networker activity: show the (now colourful) icons on mobile too */
@media (max-width: 720px) {
  body.theme-light .tbl-activity .tbl-cell-main > .avatar,
  body.theme-light .tbl-activity .tbl-cell-main > .ic-box { display: inline-flex !important; }
}

/* ══ Mobile: simplify the referral container — clean & minimal (owner 2026-08-10) */
@media (max-width: 720px) {
  body.theme-light #root.route-dash .refer-banner { gap: 14px; padding: 20px; }
  body.theme-light #root.route-dash .refer-banner .refer-banner-text p { display: none; }
  body.theme-light #root.route-dash .refer-banner .refer-banner-qr { display: none; }
  body.theme-light #root.route-dash .refer-banner .rb-action-note { display: none; }
  body.theme-light #root.route-dash .refer-banner .rb-action-lbl { display: none; }
  body.theme-light #root.route-dash .refer-banner h3 { font-size: 18px; margin: 7px 0 2px; line-height: 1.25; }
  body.theme-light #root.route-dash .refer-banner-action { gap: 10px; }
}

/* Networker activity on mobile: icons are back, so drop the cramped Status column */
@media (max-width: 720px) {
  body.theme-light .tbl-activity thead th:last-child,
  body.theme-light .tbl-activity tbody td:last-child { display: none; }
}

/* ══ Mobile: bigger rank + promo text, tighter first-section spacing (owner 2026-08-10) */
@media (max-width: 720px) {
  body.theme-light #root.route-dash .kpi-rank-value { font-size: 24px !important; }
  body.theme-light #root.route-dash .kpi-cell--promo .dash-promo-gradient-panel__title { font-size: 18px; }
  body.theme-light #root.route-dash .dash-hero-wrap { margin: 6px 0 10px; }
}

/* ══ Avatar dropdown — drop below the header, clean light-theme card (owner 2026-08-10) */
body.route-v2.theme-light .tb-menu {
  top: calc(var(--tb-h) + 7px); right: 16px; width: 262px;
  background: #fff; border: 1px solid #e9edf4; border-radius: 14px;
  box-shadow: 0 22px 48px -20px rgba(23, 43, 84, 0.30); padding: 7px;
}
body.route-v2.theme-light .tb-menu-head { padding: 8px 8px 12px; border-bottom: 1px solid #eef1f6; }
body.route-v2.theme-light .tb-menu-item { border-radius: 9px; height: 40px; }
body.route-v2.theme-light .tb-menu-item:hover { background: #f2f5fa; }
body.route-v2.theme-light .tb-menu-item .ic { color: #7b8698; }
body.route-v2.theme-light .tb-menu-sep { background: #eef1f6; }
body.route-v2.theme-light .tb-menu-head .avatar { background: #9aa3b2; color: #fff; }