/* ===== style block 0 ===== */
/* ═════════════════════════════════════════════════════════════════
   Kumo Fox · 月见狐 — Design Tokens
   Re-narrates the ATC Masterclass token system for a moonlit-night
   subscription portal. Same palette, two named themes:
   Moonlit Night (dark, primary) + Misty Morning (light).
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  /* ── BASE BRAND (carried from ATC) ───────────────────────────── */
  --ink:        #0B1736;
  --navy:       #143A86;
  --royal:      #3478F6;
  --skysoft:    #EEF6FF;
  --gold:       #F5C85E;
  --golddeep:   #A96F0C;
  --cream:      #FFF8EA;

  /* ── KUMO FOX MOOD EXTENSIONS ────────────────────────────────── */
  /* Night-side surfaces — slightly deeper than --ink for layering */
  --night-0:    #060B1F;   /* deepest sky (full-bleed bg)         */
  --night-1:    #0B1736;   /* surface 1 — page bg in dark         */
  --night-2:    #142149;   /* surface 2 — cards in dark           */
  --night-3:    #1D2C5E;   /* surface 3 — raised hover            */
  --mist:       rgba(238,246,255,.08);   /* hairline on dark      */
  --mist-strong:rgba(238,246,255,.18);
  --moonglow:   rgba(245,200,94,.22);    /* subtle gold halo      */
  --foglight:   #F4F7FB;   /* even paler than --bg, fog wash      */

  /* Foreground text on night */
  --fg-night-1: #F4F7FB;
  --fg-night-2: #C9D4EA;
  --fg-night-3: #8A9AC2;
  --fg-night-4: #5E6E94;

  /* ── PAGE SURFACES ──────────────────────────────────────────── */
  --bg:         #F8FBFF;
  --bg-white:   #FFFFFF;
  --bg-navy:    var(--navy);

  --fg1:        var(--ink);
  --fg2:        #45526F;
  --fg3:        #64748B;
  --fg4:        #94A3B8;
  --fg-muted:   #374151;
  --fg-invert:  #FFFFFF;
  --fg-on-navy: #DBEAFE;

  --border:        #E2E8F0;
  --border-soft:   #F1F5F9;
  --border-dashed: rgba(169,111,12,.40);

  --success:    #059669;
  --success-bg: #ECFDF5;
  --warning:    var(--golddeep);
  --info:       var(--royal);
  --locked:     #94A3B8;
  --locked-bg:  #F1F5F9;

  /* ── SHADOWS — navy-tinted, never gray ──────────────────────── */
  --shadow-soft: 0 14px 42px rgba(20,58,134,.10);
  --shadow-glow: 0 22px 70px rgba(52,120,246,.18);
  --shadow-gold: 0 12px 32px rgba(245,200,94,.28);
  --shadow-sm:   0 4px 12px rgba(20,58,134,.06);
  /* Night-mode shadows — deeper, with moonglow halos */
  --shadow-night:  0 20px 60px rgba(0,0,0,.45);
  --shadow-moon:   0 0 80px rgba(245,200,94,.18);

  /* ── RADII ──────────────────────────────────────────────────── */
  --r-sm:   .5rem;
  --r-md:   .85rem;
  --r-lg:   1rem;
  --r-xl:   1.25rem;
  --r-2xl:  1.5rem;
  --r-3xl:  1.75rem;
  --r-4xl:  2rem;
  --r-pill: 999px;

  /* ── SPACING ────────────────────────────────────────────────── */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem;--space-6: 1.5rem;
  --space-8: 2rem;   --space-10: 2.5rem;--space-12: 3rem;
  --space-16: 4rem;  --space-20: 5rem;

  /* ── TYPE ───────────────────────────────────────────────────── */
  --font-sans:  Inter, "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-cjk:   "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Inter, sans-serif;

  --w-regular:  400;  --w-medium:   500;  --w-semibold: 600;
  --w-bold:     700;  --w-extra:    800;  --w-black:    900;

  --t-display:  clamp(2.4rem, 5vw, 5rem);
  --t-section:  clamp(1.85rem, 3.6vw, 3rem);
  --t-h2: 2rem; --t-h3: 1.5rem; --t-h4: 1.25rem; --t-h5: 1.125rem;
  --t-lg: 1.125rem; --t-base: 1rem; --t-sm: .875rem; --t-xs: .78rem; --t-2xs: .72rem;

  --tracking-display: -.045em;
  --tracking-tight:   -.025em;
  --tracking-normal:  0;
  --tracking-wider:   .14em;     /* a touch airier than ATC for calm feel */

  --lh-display: 1.02;
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.85;

  /* ── SIGNATURE GRADIENTS ────────────────────────────────────── */
  --night-grid:
    radial-gradient(circle at 78% 14%, rgba(245,200,94,.22), transparent 32%),
    radial-gradient(circle at 14% 86%, rgba(52,120,246,.28), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(20,33,73,.6), transparent 70%),
    linear-gradient(180deg,#060B1F 0%, #0B1736 50%, #142149 100%);

  --mist-grid:
    radial-gradient(circle at 20% 18%, rgba(245,200,94,.10), transparent 28%),
    radial-gradient(circle at 82% 30%, rgba(132,190,255,.30), transparent 38%),
    linear-gradient(180deg,#F8FBFF 0%, #EEF6FF 60%, #FFF8EA 100%);

  --soft-grid:
    linear-gradient(rgba(52,120,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,120,246,.05) 1px, transparent 1px);
  --soft-grid-size: 32px 32px;

  --night-grid-lines:
    linear-gradient(rgba(238,246,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,246,255,.04) 1px, transparent 1px);

  --grad-progress:  linear-gradient(90deg, #3478F6, #F5C85E);
  --grad-moon:      radial-gradient(circle at 30% 30%, #FFF8EA 0%, #F5C85E 55%, #A96F0C 100%);
  --grad-icon-bubble: linear-gradient(135deg,#F6FAFF,#FFF8EA);
  --grad-icon-night:  linear-gradient(135deg, rgba(245,200,94,.16), rgba(52,120,246,.16));

  /* ── MOTION ─────────────────────────────────────────────────── */
  --ease-card: cubic-bezier(.22,1,.36,1);
  --ease-snap: ease;
  --dur-fast: .18s; --dur-base: .22s; --dur-slow: .55s;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--font-sans);
  background: var(--night-0);
  color: var(--fg-night-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(zh), .cjk { font-family: var(--font-cjk); }

/* Common rhythm */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 6rem 0; }

/* Universal kicker */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.kicker .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: .8;
}
/* Light portal mode: every gold kicker deepens to the readable --golddeep.
   Centralized here (overrides the inline color: var(--gold) the kickers carry)
   so all portal pages stay consistent without per-page patches. Scoped to
   .webframe.is-light so marketing sections (.theme-mist) keep their accent. */
.webframe.is-light .kicker { color: var(--golddeep) !important; }
/* Same principle for shared gold TEXT on pale surfaces: deepen to --golddeep so
   it stays legible. Gold FILLS (buttons, ribbons, active dots) keep bright --gold. */
.webframe.is-light .nav--portal .nav__link.is-active,
.webframe.is-light .node__load--mid b,
.webframe.is-light .plancard--featured .plancard__price .amt,
.webframe.is-light .plancard li::before { color: var(--golddeep); }

/* Display type */
.display {
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.section-title {
  font-size: var(--t-section);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.eyebrow {
  font-size: var(--t-2xs);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-night-3);
}

/* ═══════════════════════════════════════════════════════════════
   THEME WRAPPERS
   `.theme-night` = Moonlit Night (dark)
   `.theme-mist`  = Misty Morning (light)
   Sections opt in by class so we can present both side-by-side.
   ═══════════════════════════════════════════════════════════════ */
.theme-night {
  --surface-0: var(--night-0);
  --surface-1: var(--night-1);
  --surface-2: var(--night-2);
  --surface-3: var(--night-3);
  --text-1: var(--fg-night-1);
  --text-2: var(--fg-night-2);
  --text-3: var(--fg-night-3);
  --text-4: var(--fg-night-4);
  --hairline: var(--mist);
  --hairline-strong: var(--mist-strong);
  --accent: var(--gold);
  --accent-deep: #E2B244;
  --link: #9EC0FF;
  color: var(--text-1);
}
.theme-mist {
  --surface-0: var(--foglight);
  --surface-1: var(--bg);
  --surface-2: #FFFFFF;
  --surface-3: var(--skysoft);
  --text-1: var(--ink);
  --text-2: var(--fg2);
  --text-3: var(--fg3);
  --text-4: var(--fg4);
  --hairline: var(--border-soft);
  --hairline-strong: var(--border);
  --accent: var(--royal);
  --accent-deep: var(--navy);
  --link: var(--royal);
  color: var(--text-1);
  background: var(--surface-1);
}

/* ── CARD (theme-aware) — glassmorphism ──────────────────────── */
.card {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-radius: var(--r-3xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.45);
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: transform var(--dur-base) var(--ease-card),
              box-shadow var(--dur-base) var(--ease-card);
}
.theme-night .card {
  box-shadow: var(--shadow-night), inset 0 1px 0 rgba(238,246,255,.08);
  background:
    linear-gradient(180deg,
      rgba(20, 33, 73, .55) 0%,
      rgba(11, 23, 54, .42) 100%);
  outline-color: rgba(238,246,255,.10);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft), 0 18px 40px -20px rgba(11,23,54,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.theme-night .card:hover {
  box-shadow: var(--shadow-night), 0 22px 50px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(238,246,255,.12);
}
/* Gold accent surface — the Setup-tile / balance-box treatment.
   Works standalone or as a .card modifier; supplies its own gold wash + halo. */
.card--gold {
  background: linear-gradient(135deg, rgba(245,200,94,.16), rgba(245,200,94,.03));
  outline: 1px solid rgba(245,200,94,.26);
  outline-offset: -1px;
  border-radius: var(--r-2xl);
}
.theme-mist .card--gold {
  background: linear-gradient(135deg, var(--cream), rgba(245,200,94,.06));
  outline-color: rgba(169,111,12,.22);
}

/* ── CHIP — glass pill ───────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  color: var(--text-1);
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.theme-night .chip {
  background: rgba(238,246,255,.07);
  color: var(--text-1);
  outline-color: rgba(238,246,255,.14);
  box-shadow: inset 0 1px 0 rgba(238,246,255,.06);
}
.chip--moon { background: rgba(245,200,94,.14); color: var(--gold); outline-color: rgba(245,200,94,.28); }
.chip--mist { background: rgba(52,120,246,.12); color: var(--link); outline-color: rgba(52,120,246,.28); }
.chip--success { background: rgba(5,150,105,.12); color: #34D399; outline-color: rgba(5,150,105,.28); }
.chip--danger  { background: rgba(248,113,113,.13); color: #FF8A8C; outline-color: rgba(248,113,113,.30); }
.theme-mist .chip--moon { background: var(--cream); color: var(--golddeep); outline-color: rgba(169,111,12,.20); }
.theme-mist .chip--mist { background: var(--skysoft); color: var(--royal); outline-color: rgba(169,111,12,.18); }
.theme-mist .chip--success { background: var(--success-bg); color: var(--success); outline-color: rgba(5,150,105,.22); }
.theme-mist .chip--danger  { background: #FEF2F2; color: #DC2626; outline-color: rgba(220,38,38,.22); }

/* ── BUTTON ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.3rem;
  border-radius: var(--r-pill);
  font-weight: var(--w-bold);
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: transform var(--dur-fast) var(--ease-card),
              box-shadow var(--dur-base) var(--ease-card),
              background var(--dur-fast) var(--ease-card);
  cursor: pointer;
  border: 0;
}
.btn--primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { background: #FAD479; transform: translateY(-1px); }
.btn--ghost {
  background: color-mix(in srgb, var(--surface-3) 35%, transparent);
  color: var(--text-1);
  outline: 1px solid var(--hairline-strong);
  outline-offset: -1px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.theme-night .btn--ghost {
  background: rgba(238,246,255,.06);
  box-shadow: inset 0 1px 0 rgba(238,246,255,.08);
}
.theme-night .btn--ghost:hover { background: rgba(238,246,255,.10); }
.btn--solid {
  background: var(--accent-deep);
  color: var(--fg-invert);
}
.theme-night .btn--solid { background: var(--royal); color: #fff; }
.btn--sm { padding: .55rem .95rem; font-size: .82rem; }
/* Destructive ghost — ported from Orders.html (ORD-3). Modifier on .btn--ghost:
   keeps the ghost padding/outline base, recolours to the design danger red.
   Themed off the body-level classes (theme.ts sets theme-night/theme-mist on
   <body>) the same way .btn--ghost and .modal--destructive .modal__title are —
   default is the light (mist) red #DC2626, .theme-night uses the mockup's
   #FF8A8C. Body-level keying is required so the portalled CancelOrderModal (a
   child of <body>, outside .webframe) gets the right colour in both themes. */
.btn--danger-ghost { color: #DC2626; outline-color: rgba(220,38,38,.22); }
.btn--danger-ghost:hover { background: rgba(220,38,38,.08); }
.theme-night .btn--danger-ghost { color: #FF8A8C; outline-color: rgba(255,138,140,.3); }
.theme-night .btn--danger-ghost:hover { background: rgba(255,138,140,.12); }
/* Disabled buttons — canonical design-system treatment (Design System.html:
   opacity:.4; cursor:not-allowed). Neutralise hover lift/background so a
   disabled action (e.g. Pay with no payment method selected) reads as inert. */
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }
.btn--primary:disabled:hover { background: var(--gold); }

/* ── ICON BUBBLE (emoji or SVG slot) ─────────────────────────── */
.icon-bubble {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-icon-bubble);
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(11,23,54,.06),
    0 6px 18px -10px rgba(11,23,54,.35);
}
.theme-night .icon-bubble {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(245,200,94,.18), transparent 60%),
    rgba(20,33,73,.45);
  outline-color: rgba(238,246,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(238,246,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 6px 22px -10px rgba(0,0,0,.55);
}

/* ── Swatch row ──────────────────────────────────────────────── */
.swatch {
  border-radius: var(--r-2xl);
  padding: 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 7.5rem;
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
}
.swatch__hex {
  font: 500 .78rem/1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  letter-spacing: .04em;
}
.swatch__label { font-weight: var(--w-bold); font-size: .92rem; }
.swatch__token { font: 400 .7rem/1 ui-monospace, monospace; opacity: .65; margin-top: .3rem; }

/* ── Hairline divider ────────────────────────────────────────── */
.hr-mist { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ── Subtle motion ───────────────────────────────────────────── */
@keyframes moonRise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.rise { animation: moonRise .8s var(--ease-card) both; }

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,200,94,.0), 0 0 60px rgba(245,200,94,.18); }
  50%      { box-shadow: 0 0 0 14px rgba(245,200,94,.05), 0 0 90px rgba(245,200,94,.30); }
}
.moon-glow { animation: glow 5s ease-in-out infinite; }

/* ── Bilingual label pattern ─────────────────────────────────── */
.bilingual { display: inline-flex; align-items: baseline; gap: .55rem; }
.bilingual .zh { font-family: var(--font-cjk); font-weight: var(--w-bold); }
.bilingual .en { font-weight: var(--w-medium); color: var(--text-3); font-size: .85em; letter-spacing: .02em; }
.bilingual .sep { color: var(--text-4); font-weight: 300; }

/* ── Soft-grid backgrounds ───────────────────────────────────── */
.bg-soft-grid {
  background-image: var(--soft-grid);
  background-size: var(--soft-grid-size);
}
.bg-night-grid {
  background: var(--night-grid);
}
.bg-night-lines {
  background-image: var(--night-grid-lines);
  background-size: 40px 40px;
}
.bg-mist-grid { background: var(--mist-grid); }

/* ===== style block 1 ===== */
/* Page-only chrome */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: linear-gradient(180deg, rgba(6,11,31,.55) 0%, rgba(6,11,31,.38) 100%);
    border-bottom: 1px solid rgba(238,246,255,.08);
    box-shadow: 0 1px 0 rgba(238,246,255,.04) inset, 0 8px 32px -16px rgba(0,0,0,.6);
  }
  .nav__row { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
  .nav__links { display: flex; gap: 1.5rem; }
  .nav__links a {
    font-size: .85rem; color: var(--fg-night-2);
    font-weight: 500; letter-spacing: .01em;
    text-decoration: none; transition: color .2s;
  }
  .nav__links a:hover { color: var(--gold); }
  .nav__lang {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(238,246,255,.08);
    border-radius: 999px;
    outline: 1px solid rgba(238,246,255,.14);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(238,246,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.25);
  }
  .nav__lang button {
    background: none; border: 0; color: var(--fg-night-3);
    font: 600 .72rem/1 var(--font-sans);
    letter-spacing: .08em;
    padding: .35rem .75rem; border-radius: 999px; cursor: pointer;
  }
  .nav__lang button.is-active { background: var(--gold); color: var(--ink); }
  /* Language-changer button — global token, works in .nav and .webframe .nav */
  .nav__lang-btn {
    display: inline-flex; align-items: center; gap: .28rem;
    font: 600 .7rem/1 var(--font-sans); letter-spacing: .06em;
    color: var(--fg-night-2);
    background: rgba(238,246,255,.06);
    outline: 1px solid rgba(238,246,255,.10); outline-offset: -1px;
    border: none; cursor: pointer;
    padding: .38rem .58rem;
    border-radius: var(--r-md);
    transition: color .15s, background .15s;
    white-space: nowrap;
  }
  .nav__lang-btn:hover { color: var(--fg-night-1); background: rgba(238,246,255,.11); }
  .nav__lang-btn--active { color: var(--gold); background: rgba(245,200,94,.10); outline-color: rgba(245,200,94,.22); }
  .theme-mist .nav__lang-btn { color: var(--fg2); background: rgba(169,111,12,.06); outline-color: rgba(169,111,12,.14); }
  .theme-mist .nav__lang-btn:hover { color: var(--ink); background: rgba(169,111,12,.10); }
  .theme-mist .nav__lang-btn--active { color: var(--royal); background: var(--skysoft); outline-color: rgba(169,111,12,.22); }
  /* Language picker shares the neutral pill of the dark/light toggle — it is NEVER highlighted
     gold or blue. The toggle keeps the base .nav__lang-btn styling; the picker is forced to match
     it (same colour, background & outline) in every theme. Global across every page. */
  .nav__lang-btn--active:not(.nav__theme-btn) {
    color: var(--fg-night-2); background: rgba(238,246,255,.06); outline-color: rgba(238,246,255,.10);
  }
  .nav__lang-btn--active:not(.nav__theme-btn):hover {
    color: var(--fg-night-1); background: rgba(238,246,255,.11);
  }
  .theme-mist .nav__lang-btn--active:not(.nav__theme-btn) {
    color: var(--fg2); background: rgba(169,111,12,.06); outline-color: rgba(169,111,12,.14);
  }
  .theme-mist .nav__lang-btn--active:not(.nav__theme-btn):hover {
    color: var(--ink); background: rgba(169,111,12,.10);
  }
  .webframe.is-light .nav__lang-btn--active:not(.nav__theme-btn) {
    color: var(--fg2); background: rgba(169,111,12,.06); outline-color: rgba(169,111,12,.16);
  }
  .webframe.is-light .nav__lang-btn--active:not(.nav__theme-btn):hover {
    color: var(--ink); background: rgba(169,111,12,.10);
  }

  /* ════════ Language PICKER dropdown — global, every page ════════
     The trigger keeps the neutral .nav__lang-btn pill; clicking it
     opens a glass popover (appended to <body>, positioned in JS by
     kumo-fox-lang.js). Light variant is auto-applied under a light
     webframe / mist section. */
  .nav__lang-btn > svg:last-child { transition: transform var(--dur-base, .22s) var(--ease-card); }
  .nav__lang-btn.is-open { color: var(--fg-night-1); background: rgba(238,246,255,.13); }
  .nav__lang-btn.is-open > svg:last-child { transform: rotate(180deg); }
  .theme-mist .nav__lang-btn.is-open,
  .webframe.is-light .nav__lang-btn.is-open { color: var(--ink); background: rgba(169,111,12,.12); }

  .lang-menu {
    position: fixed; z-index: 2147483000;
    min-width: 196px; padding: .4rem;
    border-radius: 15px;
    background: linear-gradient(158deg, rgba(30,45,92,.93), rgba(14,24,56,.95));
    outline: 1px solid rgba(238,246,255,.14); outline-offset: -1px;
    box-shadow: 0 26px 64px -22px rgba(0,0,0,.72), 0 4px 14px -8px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(238,246,255,.09);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    font-family: var(--font-sans);
    opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right;
    transition: opacity .16s var(--ease-card), transform .18s var(--ease-card);
    pointer-events: none;
  }
  .lang-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .lang-menu__item {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .5rem .55rem; margin: 0; border: 0; background: none; cursor: pointer;
    border-radius: 10px; text-align: left; color: var(--fg-night-2);
    transition: background .14s, color .14s;
  }
  .lang-menu__item + .lang-menu__item { margin-top: 1px; }
  .lang-menu__item:hover { background: rgba(238,246,255,.08); color: var(--fg-night-1); }
  .lang-menu__txt { flex: 1; min-width: 0; }
  .lang-menu__native { display: block; font: 600 .86rem/1.2 var(--font-sans); letter-spacing: .005em; }
  .lang-menu__en {
    display: block; margin-top: 2px;
    font: 500 .67rem/1.2 var(--font-sans); letter-spacing: .05em;
    text-transform: uppercase; color: var(--fg-night-4);
  }
  .lang-menu__check { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); opacity: 0; transition: opacity .14s; }
  .lang-menu__item[aria-selected="true"] .lang-menu__check { opacity: 1; }
  .lang-menu__item[aria-selected="true"] .lang-menu__native { color: var(--fg-night-1); }
  .lang-menu__item[aria-selected="true"] { background: rgba(245,200,94,.07); }

  /* Light context (light webframe / mist marketing section) */
  .lang-menu--light {
    background: linear-gradient(158deg, rgba(255,255,255,.98), rgba(243,248,255,.97));
    outline-color: rgba(11,23,54,.10);
    box-shadow: 0 26px 64px -22px rgba(20,40,90,.30), 0 4px 14px -8px rgba(20,40,90,.18),
                inset 0 1px 0 rgba(255,255,255,.7);
  }
  .lang-menu--light .lang-menu__item { color: var(--fg2, #41506E); }
  .lang-menu--light .lang-menu__item:hover { background: rgba(169,111,12,.08); color: var(--ink); }
  .lang-menu--light .lang-menu__native { color: inherit; }
  .lang-menu--light .lang-menu__en { color: #8C99B2; }
  .lang-menu--light .lang-menu__check { color: var(--royal); }
  .lang-menu--light .lang-menu__item[aria-selected="true"] { background: rgba(52,120,246,.08); }
  .lang-menu--light .lang-menu__item[aria-selected="true"] .lang-menu__native { color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    .lang-menu { transition: opacity .12s linear; transform: none; }
    .nav__lang-btn > svg:last-child { transition: none; }
  }

  /* Hero */
  .hero {
    position: relative; overflow: hidden;
    padding: 8rem 0 7rem;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background: var(--night-grid);
    z-index: -2;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: var(--night-grid-lines);
    background-size: 56px 56px;
    z-index: -1; opacity: .8;
    mask-image: radial-gradient(circle at 50% 60%, black 0%, transparent 80%);
  }
  .hero__moon {
    position: absolute; top: 6%; right: 4%;
    width: 420px; height: 420px;
    background: url('fox-leaping-moon.png') center/contain no-repeat;
    opacity: .96;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 48%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 50%, black 48%, transparent 78%);
    filter: drop-shadow(0 0 60px rgba(245,200,94,.18));
    pointer-events: none;
  }
  .hero__stars span {
    position: absolute; width: 2px; height: 2px;
    background: #F4F7FB; border-radius: 999px; opacity: .8;
  }
  .hero__stars span:nth-child(1) { top: 22%; left: 12%; width: 3px; height: 3px; }
  .hero__stars span:nth-child(2) { top: 18%; left: 28%; opacity: .5; }
  .hero__stars span:nth-child(3) { top: 38%; left: 8%;  opacity: .65; }
  .hero__stars span:nth-child(4) { top: 60%; left: 22%; opacity: .35; }
  .hero__stars span:nth-child(5) { top: 30%; left: 55%; opacity: .45; }
  .hero__stars span:nth-child(6) { top: 12%; left: 65%; opacity: .35; }
  .hero__stars span:nth-child(7) { top: 70%; left: 80%; opacity: .55; }
  .hero__stars span:nth-child(8) { top: 50%; left: 92%; width: 3px; height: 3px; opacity: .7; }
  .hero h1 { color: var(--fg-night-1); max-width: 18ch; }
  .hero .ko { color: var(--gold); font-style: italic; font-weight: 600; letter-spacing: -.02em; }
  .hero .sub { max-width: 52ch; color: var(--fg-night-2); font-size: 1.1rem; line-height: 1.7; margin-top: 1.5rem; }
  .hero__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }

  /* Section header */
  .sec-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; max-width: 64ch; }
  .sec-head .kicker { color: var(--accent); }
  .theme-night .sec-head .kicker { color: var(--gold); }

  /* Section bands */
  .band-night { background: var(--night-1); position: relative; }
  .band-night-deeper { background: var(--night-0); position: relative; }
  .band-mist { background: var(--bg); color: var(--ink); }
  .band-cream { background: var(--cream); color: var(--ink); }
  .band-night-lines::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--night-grid-lines);
    background-size: 48px 48px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
  }

  /* Brand: logo lockups */
  .logo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .logo-tile {
    border-radius: var(--r-3xl);
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    min-height: 16rem;
    justify-content: space-between;
    position: relative; overflow: hidden;
  }
  .logo-tile__cap {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 600;
  }

  /* Palette stacks */
  .palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
  .palette.compact { grid-template-columns: repeat(8, 1fr); }

  /* Pair (Night + Mist side-by-side) */
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
  .pair > div { border-radius: var(--r-3xl); padding: 2rem; min-height: 100%; }

  /* Type specimen */
  .specimen {
    display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; padding: 1.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .specimen:last-child { border-bottom: 0; }
  .specimen__meta { font-size: .78rem; color: var(--text-3); font-family: ui-monospace, monospace; line-height: 1.6; }
  .specimen__meta b { color: var(--text-1); font-family: var(--font-sans); font-weight: 600; display: block; margin-bottom: .25rem; font-size: .8rem; }

  /* Moon phase row */
  .moonrow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; }
  .moonphase {
    aspect-ratio: 1; border-radius: 999px;
    background: #0A1024;
    outline: 1px solid var(--mist);
    outline-offset: -1px;
    position: relative; overflow: hidden;
  }
  .moonphase__disc {
    position: absolute; inset: 8%;
    border-radius: 999px;
    background: var(--grad-moon);
    box-shadow: inset 0 0 18px rgba(0,0,0,.25);
  }
  .moonphase__mask {
    position: absolute; inset: 8%;
    border-radius: 999px;
    background: #0A1024;
  }
  /* phase masks */
  .mp-new      .moonphase__disc { opacity: 0; }
  .mp-new      .moonphase__mask { display: none; }
  .mp-wax-c    .moonphase__mask { transform: translateX(-40%); width: 92%; }
  .mp-first    .moonphase__mask { transform: translateX(-50%); width: 92%; }
  .mp-wax-g    .moonphase__mask { transform: translateX(-70%); width: 100%; border-radius: 60%/100%; }
  .mp-full     .moonphase__mask { display: none; }
  .mp-wan-g    .moonphase__mask { transform: translateX(70%); width: 100%; border-radius: 60%/100%; right: 0; left: auto; }
  .mp-last     .moonphase__mask { transform: translateX(50%); width: 92%; right: 0; left: auto; }
  .mp-wan-c    .moonphase__mask { transform: translateX(40%); width: 92%; right: 0; left: auto; }
  .moonphase__label {
    position: absolute; bottom: -1.5rem; left: 0; right: 0; text-align: center;
    font-size: .7rem; color: var(--fg-night-3); letter-spacing: .08em;
  }
  .moonrow .col { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
  .moonrow .col .moonphase { width: 100%; }
  .moonrow .col .name {
    font-size: .68rem; color: var(--fg-night-3);
    letter-spacing: .12em; text-transform: uppercase;
    text-align: center; line-height: 1.4;
  }
  .moonrow .col .name b { display: block; color: var(--fg-night-1); font-weight: 600; font-family: var(--font-cjk); margin-bottom: 2px; letter-spacing: 0; text-transform: none; font-size: .8rem; }

  /* Fox motif tile */
  .fox-tile {
    border-radius: var(--r-2xl);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
    min-height: 12rem; justify-content: space-between;
    outline: 1px solid var(--hairline-strong);
    outline-offset: -1px;
  }

  /* Emoji grid */
  .emojigrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; }
  .emojicell {
    aspect-ratio: 1;
    border-radius: var(--r-md);
    background: rgba(238,246,255,.04);
    outline: 1px solid var(--mist);
    outline-offset: -1px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
  }
  .theme-mist .emojicell { background: var(--bg-white); outline-color: var(--border-soft); }

  /* Component grid */
  .compgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* PORTAL component styles */
  .plancard {
    border-radius: var(--r-3xl);
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 1rem;
    position: relative;
  }
  .plancard__price {
    display: flex; align-items: baseline; gap: .35rem;
  }
  .plancard__price .amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
  .plancard__price .per { font-size: .85rem; color: var(--text-3); }
  .plancard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
  .plancard li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; color: var(--text-2); line-height: 1.55; }
  .plancard li::before { content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0; }
  .plancard--featured {
    background: linear-gradient(180deg, #1A2655 0%, #0F1B43 100%) !important;
    outline-color: rgba(245,200,94,.30) !important;
  }
  .plancard--featured .plancard__price .amt { color: var(--gold); }

  /* Traffic gauge */
  .gauge {
    --val: 0.42;
    width: 100%;
    height: 8px;
    background: rgba(238,246,255,.08);
    border-radius: 999px;
    position: relative; overflow: hidden;
  }
  .theme-mist .gauge { background: var(--skysoft); }
  .gauge__fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: calc(var(--val) * 100%);
    background: var(--grad-progress);
    border-radius: 999px;
  }
  .gauge--lg { height: 14px; }
  /* Traffic-load states — fill recolors as the allowance is consumed */
  .gauge__fill--warn   { background: linear-gradient(90deg, var(--gold), var(--golddeep)); }
  .gauge__fill--danger { background: linear-gradient(90deg, #F5C85E 0%, #FB7185 70%, #F43F5E 100%); }
  .gauge--exhausted .gauge__fill { background: linear-gradient(90deg, #FB7185, #F43F5E); }

  /* Node row */
  .node {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem;
    align-items: center; padding: .85rem 1rem;
    border-radius: var(--r-xl);
    border: 1px solid var(--hairline);
    background: var(--surface-2);
  }
  .theme-night .node { background: rgba(238,246,255,.03); }
  .node__ping { display: flex; align-items: center; gap: .35rem; font-family: ui-monospace, monospace; font-size: .8rem; color: var(--text-2); }
  .pulse {
    width: 8px; height: 8px; border-radius: 999px;
    background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6);
    animation: pulse 2.2s ease-in-out infinite;
  }
  .pulse--warn { background: var(--gold); box-shadow: 0 0 0 0 rgba(245,200,94,.6); }
  .pulse--down { background: #F87171; box-shadow: 0 0 0 0 rgba(248,113,113,.6); animation: none; }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
    50%     { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  }
  .node__flag {
    width: 26px; height: 18px; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700; color: white;
    letter-spacing: .04em;
  }
  /* Node LOAD — the 2-char geo tag is tinted by the node's live load, not by
     country: low→green, mid→amber, high→red, offline→slate. Pair the matching
     .pulse-* dot + .node__load read-out so colour, dot, and number agree. */
  .node__flag--low  { background: #1F8A5B; color: #fff; }
  .node__flag--mid  { background: #F5C85E; color: #0B1736; }
  .node__flag--high { background: #FF4B5C; color: #fff; }
  .node__flag--off  { background: #5E6E94; color: #fff; }
  .node__load {
    display: flex; align-items: center; gap: .4rem;
    font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .8rem;
    color: var(--text-2); font-variant-numeric: tabular-nums;
  }
  .node__load b { font-weight: 700; }
  .node__load--low  b { color: #34D399; }
  .node__load--mid  b { color: var(--gold); }
  .node__load--high b { color: #FF8A8C; }
  .node__load--off  b { color: var(--text-4); }
  .pulse--high {
    background: #FF4B5C; box-shadow: 0 0 0 0 rgba(255,75,92,.6);
    animation: pulseHigh 2.2s ease-in-out infinite;
  }
  @keyframes pulseHigh {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,75,92,.55); }
    50%     { box-shadow: 0 0 0 6px rgba(255,75,92,0); }
  }

  /* Sub link copy block */
  .sublink {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .85rem; padding-right: .5rem;
    border-radius: var(--r-xl);
    background: rgba(238,246,255,.06);
    outline: 1px dashed rgba(238,246,255,.18);
    outline-offset: -1px;
    font: 500 .82rem/1.4 ui-monospace, monospace;
    color: var(--text-2);
    word-break: break-all;
  }
  .theme-mist .sublink { background: var(--skysoft); outline-color: rgba(169,111,12,.3); color: var(--ink); }

  /* ── ONE-CLICK IMPORT (platform-aware) ───────────────────────── */
  .import-block { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); }
  .theme-night .import-block { border-top-color: var(--mist); }
  .import-block__label {
    display: flex; align-items: center; gap: .5rem;
    font: 600 .68rem/1 var(--font-sans);
    color: var(--text-3);
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .7rem;
  }
  .platform-tabs {
    display: flex; gap: .2rem; padding: .25rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface-3) 45%, transparent);
    outline: 1px solid var(--hairline); outline-offset: -1px;
    margin-bottom: .75rem;
  }
  .theme-night .platform-tabs { background: rgba(238,246,255,.05); outline-color: var(--mist); }
  .platform-tab {
    flex: 1; border: 0; cursor: pointer;
    padding: .5rem .35rem;
    border-radius: calc(var(--r-lg) - .25rem);
    background: transparent; color: var(--text-3);
    font: 600 .76rem/1 var(--font-sans); letter-spacing: .005em;
    transition: background .15s var(--ease-card), color .15s, box-shadow .15s;
  }
  .platform-tab:hover { color: var(--text-1); }
  .platform-tab.is-active {
    background: rgba(245,200,94,.14); color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(245,200,94,.28);
  }
  .theme-mist .platform-tab.is-active {
    background: var(--skysoft); color: var(--royal);
    box-shadow: inset 0 0 0 1px rgba(169,111,12,.22);
  }
  .import-list { display: flex; flex-direction: column; gap: .5rem; }
  .import-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .8rem; width: 100%;
    border: 0; cursor: pointer; text-align: left;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface-3) 40%, transparent);
    outline: 1px solid var(--hairline); outline-offset: -1px;
    color: var(--text-1);
    transition: background .15s var(--ease-card), transform .15s var(--ease-card), outline-color .15s;
  }
  .theme-night .import-row { background: rgba(238,246,255,.04); outline-color: var(--mist); }
  .import-row:hover { transform: translateX(2px); outline-color: rgba(245,200,94,.35); }
  .theme-night .import-row:hover { background: rgba(238,246,255,.08); }
  .theme-mist .import-row:hover { background: var(--skysoft); outline-color: rgba(169,111,12,.30); }
  .import-row__glyph {
    width: 2.1rem; height: 2.1rem; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
    background: var(--grad-icon-night);
    outline: 1px solid var(--hairline); outline-offset: -1px;
  }
  .theme-mist .import-row__glyph { background: var(--grad-icon-bubble); }
  .import-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .import-row__name { font: 600 .9rem/1.15 var(--font-sans); color: var(--text-1); letter-spacing: -.01em; }
  .import-row__hint { font: 500 .72rem/1.2 var(--font-sans); color: var(--text-3); margin-top: .12rem; }
  .import-row__cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem;
    font: 600 .72rem/1 var(--font-sans); color: var(--text-3);
    transition: color .15s, transform .15s var(--ease-card);
  }
  .import-row:hover .import-row__cta { color: var(--gold); transform: translateX(2px); }
  .theme-mist .import-row:hover .import-row__cta { color: var(--royal); }

  /* ── CLIENT DOWNLOAD CTA · soft gold (primary action) ────────── */
  .dl-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; cursor: pointer;
    padding: 1rem 1.2rem; border: 0; border-radius: var(--r-pill);
    background: linear-gradient(135deg, rgba(245,200,94,.22), rgba(245,200,94,.12));
    color: var(--gold);
    outline: 1px solid rgba(245,200,94,.34); outline-offset: -1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    transition: transform .2s var(--ease-card), box-shadow .2s var(--ease-card), background .2s, outline-color .2s;
  }
  .dl-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-card); pointer-events: none;
  }
  .dl-cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(245,200,94,.30), rgba(245,200,94,.16));
    outline-color: rgba(245,200,94,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -18px rgba(245,200,94,.5);
  }
  .dl-cta:hover::after { left: 130%; }
  .dl-cta:active { transform: translateY(0); }
  .dl-cta svg { width: 1.2rem; height: 1.2rem; }
  .dl-cta .arr { animation: dlBob 2.4s var(--ease-card) infinite; }
  @keyframes dlBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
  .dl-cta:hover .arr { animation-duration: 1.1s; }
  .dl-cta__name { font: 700 .98rem/1 var(--font-sans); letter-spacing: .01em; }
  .theme-mist .dl-cta { color: var(--golddeep); outline-color: rgba(169,111,12,.32); background: linear-gradient(135deg, rgba(245,200,94,.22), rgba(245,200,94,.08)); }
  .theme-mist .dl-cta:hover { background: linear-gradient(135deg, rgba(245,200,94,.3), rgba(245,200,94,.14)); outline-color: rgba(169,111,12,.5); }

  /* Order row */
  .order {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1rem;
    padding: 1rem; border-radius: var(--r-xl);
    border: 1px solid var(--hairline);
  }
  .order__date { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--text-3); }

  /* Footer */
  .footer { padding: 3.5rem 0; background: var(--night-0); color: var(--fg-night-3); border-top: 1px solid var(--mist); }
  .footer__row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }

  /* ═══════════════════════════════════════════════════════════════
     07 · APPLICATION PATTERNS
     ═══════════════════════════════════════════════════════════════ */

  /* ── FORM FIELDS ─────────────────────────────────────────────── */
  .field { display: flex; flex-direction: column; gap: .4rem; }
  .field__label {
    font: 600 .78rem/1.2 var(--font-sans);
    color: var(--text-2);
    letter-spacing: .02em;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .field__label .opt { font-weight: 500; color: var(--text-4); font-size: .72rem; letter-spacing: 0; }
  .field__group { position: relative; }
  .field__input {
    appearance: none; width: 100%; box-sizing: border-box;
    padding: .85rem 1rem;
    font: 500 .95rem/1.3 var(--font-sans);
    color: var(--text-1);
    background: color-mix(in srgb, var(--surface-3) 55%, transparent);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-lg);
    outline: none;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .field__input::placeholder { color: var(--text-4); }
  /* Night first, Mist second — Mist preview cards are nested inside the .theme-night
     section, so .theme-mist needs to come later in source order to win the cascade
     at equal specificity. Without this swap, the unfocused email field inherits
     the dark transparent background + near-white text and disappears on a white card. */
  .theme-night .field__input {
    background: rgba(238,246,255,.05);
    color: var(--fg-night-1);
    border-color: rgba(238,246,255,.14);
    box-shadow: inset 0 1px 0 rgba(238,246,255,.06);
  }
  .theme-night .field__input::placeholder { color: var(--fg-night-4); }
  .theme-mist .field__input {
    background: #FFFFFF;
    color: var(--ink);
    border-color: #94A3B8;       /* slate-400 — reads clearly against a white card without competing with focus */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  }
  .theme-mist .field__input::placeholder { color: var(--fg3); opacity: 1; }
  .field--focused .field__input,
  .field__input:focus {
    outline: 2px solid var(--royal);
    outline-offset: -2px;
    border-color: transparent;
    background: color-mix(in srgb, var(--surface-3) 75%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(52,120,246,.10);
  }
  .theme-night .field--focused .field__input,
  .theme-night .field__input:focus {
    outline-color: var(--gold);
    border-color: transparent;
    background: rgba(238,246,255,.09);
    box-shadow: inset 0 1px 0 rgba(238,246,255,.10), 0 0 0 4px rgba(245,200,94,.12);
  }
  .field--error .field__input { border: 1.5px solid #E5484D; }
  /* Misty: keep focused/error bg fully white AND lock value text to the same ink color as the
     un-focused email field, so the typed value reads the same across all three states. */
  .theme-mist .field--focused .field__input,
  .theme-mist .field__input:focus { background: #FFFFFF; color: var(--ink); }
  .theme-mist .field--error .field__input { background: #FFFFFF; color: var(--ink); }
  .theme-mist .field--error .field__input:focus { color: var(--ink); }
  .field--error .field__input:focus { outline: 2px solid #E5484D; outline-offset: -2px; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(229,72,77,.14); }
  .field__error-msg {
    font: 500 .76rem/1.3 var(--font-sans);
    color: #E5484D;
    display: flex; align-items: center; gap: .35rem;
  }
  .theme-night .field__error-msg { color: #FF8A8C; }
  .field__hint { font: 500 .76rem/1.3 var(--font-sans); color: var(--text-3); }
  .field--disabled .field__input,
  .field__input:disabled {
    opacity: .5; cursor: not-allowed;
    background: color-mix(in srgb, var(--surface-3) 30%, transparent);
  }
  .field__addon {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem;
    border: 0; background: transparent;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); cursor: pointer; font-size: 1rem;
    transition: color .15s, background .15s;
  }
  .field__addon:hover { color: var(--text-1); background: var(--hairline); }
  .theme-night .field__addon:hover { background: rgba(238,246,255,.08); color: var(--fg-night-1); }
  .field__input--withaddon { padding-right: 2.75rem; }

  /* ── APP SHELL ───────────────────────────────────────────────── */
  .app-shell {
    display: grid; grid-template-columns: 220px 1fr;
    min-height: 460px;
    border-radius: var(--r-3xl);
    overflow: hidden;
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    box-shadow: var(--shadow-soft);
  }
  .theme-night .app-shell { box-shadow: var(--shadow-night); outline-color: rgba(238,246,255,.10); }

  /* App-shell layout primitives — were inline; now named tokens */
  .app-main { display: flex; flex-direction: column; min-width: 0; }       /* main column beside the sidebar */
  .app-body {                                                              /* padded content / scroll region */
    padding: 1.25rem 1.75rem;
    display: flex; flex-direction: column; gap: .8rem;
    min-width: 0;
  }
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }   /* shortcut / stat row */
  .grid-2up  { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }          /* gauge + countdown pair */
  @media (max-width: 720px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2up  { grid-template-columns: 1fr; }
  }

  .sidebar {
    padding: 1.25rem .85rem;
    background: color-mix(in srgb, var(--surface-2) 75%, transparent);
    border-right: 1px solid var(--hairline);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    display: flex; flex-direction: column; gap: .15rem;
  }
  .theme-night .sidebar {
    background: rgba(11,23,54,.65);
    border-right-color: rgba(238,246,255,.08);
  }
  .sidebar__brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 0 .5rem .85rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: .85rem;
  }
  .sidebar__brand-name { font: 700 .9rem/1.1 var(--font-sans); color: var(--text-1); letter-spacing: -.01em; }
  .sidebar__brand-sub  { font: 500 .62rem/1 var(--font-sans); color: var(--text-3); letter-spacing: .14em; margin-top: .15rem; }
  .sidebar__group {
    font: 600 .65rem/1.2 var(--font-sans);
    color: var(--text-4);
    letter-spacing: .14em; text-transform: uppercase;
    padding: .85rem .85rem .35rem;
  }
  .sidebar__item {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .85rem;
    border-radius: var(--r-md);
    color: var(--text-2);
    text-decoration: none;
    font: 500 .88rem/1 var(--font-sans);
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .sidebar__item:hover { background: var(--hairline); color: var(--text-1); }
  .theme-night .sidebar__item:hover { background: rgba(238,246,255,.06); color: var(--fg-night-1); }
  .sidebar__item.is-active {
    background: linear-gradient(180deg, rgba(245,200,94,.20), rgba(245,200,94,.06));
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(245,200,94,.28);
    font-weight: 600;
  }
  .theme-mist .sidebar__item.is-active {
    background: var(--skysoft);
    color: var(--royal);
    box-shadow: inset 0 0 0 1px rgba(169,111,12,.22);
  }
  .sidebar__icon { width: 1.1rem; flex-shrink: 0; font-size: 1rem; opacity: .9; }
  .sidebar__badge {
    margin-left: auto;
    font: 700 .65rem/1 var(--font-sans);
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(245,200,94,.22); color: var(--gold);
  }
  .theme-mist .sidebar__badge { background: rgba(169,111,12,.14); color: var(--royal); }

  .page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
  }
  .page-header__title { font: 800 1.45rem/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--text-1); }
  .page-header__sub { color: var(--text-3); font-size: .85rem; margin-top: .2rem; }
  .page-header__actions { display: flex; gap: .5rem; }

  .bottom-tab-bar {
    display: flex; padding: .35rem; gap: .15rem;
    border-radius: var(--r-2xl);
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.3);
  }
  .theme-night .bottom-tab-bar {
    background: rgba(11,23,54,.55);
    outline-color: rgba(238,246,255,.10);
    box-shadow: 0 -10px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(238,246,255,.08);
  }
  .bottom-tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .55rem .35rem;
    border-radius: var(--r-lg);
    color: var(--text-3);
    font: 600 .66rem/1 var(--font-sans);
    letter-spacing: .04em; text-transform: uppercase;
    cursor: pointer; border: 0; background: transparent;
  }
  .bottom-tab.is-active { color: var(--gold); background: rgba(245,200,94,.14); }
  .theme-mist .bottom-tab.is-active { color: var(--royal); background: var(--skysoft); }
  .bottom-tab__glyph { font-size: 1.2rem; line-height: 1; }
  /* Mobile production behaviour — dock the bar to the viewport edge.
     Pair with .has-bottom-tab on the scroll region so content clears it. */
  .bottom-tab-bar--fixed {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    margin: 0; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding-bottom: max(.35rem, env(safe-area-inset-bottom));
  }
  .has-bottom-tab { padding-bottom: 5.25rem; }

  /* ── TOGGLE SWITCH ───────────────────────────────────────────── */
  .switch {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center;
    width: 46px; height: 27px; cursor: pointer;
  }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch__track {
    position: absolute; inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-3) 50%, transparent);
    outline: 1px solid var(--hairline-strong);
    outline-offset: -1px;
    transition: background .2s var(--ease-card), outline-color .2s;
  }
  .theme-night .switch__track { background: rgba(238,246,255,.10); outline-color: rgba(238,246,255,.16); }
  .switch__thumb {
    position: absolute; top: 3px; left: 3px;
    width: 21px; height: 21px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(11,23,54,.35), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .22s var(--ease-card);
  }
  .switch input:checked ~ .switch__track { background: var(--gold); outline-color: rgba(245,200,94,.45); }
  .theme-mist .switch input:checked ~ .switch__track { background: var(--royal); outline-color: rgba(169,111,12,.45); }
  .switch input:checked ~ .switch__thumb { transform: translateX(19px); }
  .switch input:focus-visible ~ .switch__track { box-shadow: 0 0 0 4px rgba(245,200,94,.18); }

  /* ── SETTING ROW (label + hint + control) ────────────────────── */
  .setting-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .setting-row:first-of-type { padding-top: 0; }
  .setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .setting-row__body { flex: 1; min-width: 0; }
  .setting-row__name {
    font: 600 .92rem/1.25 var(--font-sans);
    color: var(--text-1);
    display: flex; align-items: center; gap: .5rem;
  }
  .setting-row__hint { font-size: .78rem; color: var(--text-3); margin-top: .25rem; line-height: 1.5; }

  /* ── MODAL ───────────────────────────────────────────────────── */
  .modal-overlay {
    position: relative;
    min-height: 380px;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    border-radius: var(--r-3xl);
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(245,200,94,.18), transparent 60%),
      linear-gradient(135deg, rgba(11,23,54,.85), rgba(20,33,73,.65));
    backdrop-filter: blur(2px);
    overflow: hidden;
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
  }
  .modal-overlay::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--night-grid-lines);
    background-size: 32px 32px;
    opacity: .35; pointer-events: none;
  }
  .modal-overlay__caption {
    position: absolute; bottom: 1rem; left: 1.25rem;
    font: 500 .7rem/1 ui-monospace, monospace;
    color: rgba(238,246,255,.4);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .modal {
    position: relative;
    max-width: 420px; width: 100%;
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    border-radius: var(--r-2xl);
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.45);
    overflow: hidden;
  }
  .theme-night .modal {
    background: rgba(20,33,73,.80);
    outline-color: rgba(238,246,255,.14);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(238,246,255,.12);
  }
  .modal__header { padding: 1.4rem 1.5rem .25rem; }
  .modal__title {
    font: 700 1.15rem/1.25 var(--font-sans);
    letter-spacing: -.01em;
    color: var(--text-1);
    display: flex; align-items: center; gap: .5rem;
  }
  .modal__body {
    padding: .5rem 1.5rem 1.25rem;
    color: var(--text-2);
    font-size: .9rem; line-height: 1.6;
  }
  .modal__footer {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--surface-3) 30%, transparent);
  }
  .modal--destructive .modal__title { color: #E5484D; }
  .theme-night .modal--destructive .modal__title { color: #FF8A8C; }
  .modal__warn-glyph {
    width: 1.75rem; height: 1.75rem; border-radius: 999px;
    background: rgba(229,72,77,.15);
    display: inline-flex; align-items: center; justify-content: center;
    color: #E5484D; font-size: 1rem;
  }

  /* ── DASHBOARD BANNERS ───────────────────────────────────────── */
  .banner {
    display: flex; gap: 1rem; align-items: center;
    padding: 1rem 1.15rem;
    border-radius: var(--r-2xl);
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  }
  .banner__icon {
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
  }
  .banner__body { flex: 1; min-width: 0; }
  .banner__title { font: 700 .95rem/1.2 var(--font-sans); letter-spacing: -.01em; }
  .banner__msg { font-size: .82rem; line-height: 1.5; margin-top: .2rem; color: var(--text-2); }
  .banner__cta { flex-shrink: 0; }

  .banner--warning {
    background: linear-gradient(135deg, rgba(245,200,94,.22), rgba(245,200,94,.06));
    outline-color: rgba(245,200,94,.38);
  }
  .banner--warning .banner__icon { background: rgba(245,200,94,.25); color: var(--golddeep); }
  .banner--warning .banner__title { color: var(--golddeep); }
  .theme-night .banner--warning .banner__icon,
  .theme-night .banner--warning .banner__title { color: var(--gold); }

  .banner--danger {
    background: linear-gradient(135deg, rgba(229,72,77,.22), rgba(229,72,77,.06));
    outline-color: rgba(229,72,77,.38);
  }
  .banner--danger .banner__icon { background: rgba(229,72,77,.20); color: #B91C1C; }
  .banner--danger .banner__title { color: #B91C1C; }
  .theme-night .banner--danger .banner__icon { color: #FF8A8C; }
  .theme-night .banner--danger .banner__title { color: #FF8A8C; }

  .banner--info {
    background: linear-gradient(135deg, rgba(52,120,246,.22), rgba(52,120,246,.06));
    outline-color: rgba(52,120,246,.38);
  }
  .banner--info .banner__icon { background: rgba(52,120,246,.20); color: var(--royal); }
  .banner--info .banner__title { color: var(--royal); }
  .theme-night .banner--info .banner__title,
  .theme-night .banner--info .banner__icon { color: #A6C7FF; }

  /* ── SKELETON / LOADING ──────────────────────────────────────── */
  @keyframes shimmer {
    0%   { background-position: -250% 0; }
    100% { background-position: 250% 0; }
  }
  .skeleton {
    border-radius: var(--r-md);
    background-image: linear-gradient(
      90deg,
      var(--hairline) 0%,
      var(--hairline-strong) 45%,
      var(--hairline) 90%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.6s ease-in-out infinite;
  }
  .theme-night .skeleton {
    background-image: linear-gradient(
      90deg,
      rgba(238,246,255,.05) 0%,
      rgba(238,246,255,.16) 45%,
      rgba(238,246,255,.05) 90%
    );
  }
  .skeleton--text { height: .85rem; border-radius: .35rem; }
  .skeleton--text-lg { height: 1.5rem; border-radius: .45rem; }
  .skeleton--text-sm { height: .65rem; border-radius: .25rem; }
  .skeleton--card { height: 6rem; border-radius: var(--r-2xl); }
  .skeleton--gauge { height: 14px; border-radius: 999px; width: 100%; }
  .skeleton--avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; }
  .skeleton-stack { display: flex; flex-direction: column; gap: .55rem; }

  .btn--loading { position: relative; color: transparent !important; pointer-events: none; }
  .btn--loading::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 999px;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--ink);
    animation: spin .8s linear infinite;
  }
  .btn--primary.btn--loading::after { color: var(--ink); opacity: .85; }
  .btn--ghost.btn--loading::after   { color: var(--text-1); }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── CHECKOUT PANELS ─────────────────────────────────────────── */
  .checkout-summary { display: flex; flex-direction: column; gap: .65rem; }
  .checkout-summary__row {
    display: flex; justify-content: space-between; align-items: baseline;
    font: 500 .9rem/1.3 var(--font-sans);
    color: var(--text-2);
  }
  .checkout-summary__row b { color: var(--text-1); font-weight: 700; }
  .checkout-summary__row--total {
    padding-top: .85rem; margin-top: .35rem;
    border-top: 1px dashed var(--hairline);
    font-size: 1rem;
  }
  .checkout-summary__row--total b { font-size: 1.65rem; letter-spacing: -.02em; line-height: 1; }

  .payment-method-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--r-xl);
    background: color-mix(in srgb, var(--surface-2) 65%, transparent);
    outline: 1.5px solid var(--hairline-strong);
    outline-offset: -1.5px;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: outline-color .18s, background .18s, transform .18s;
  }
  .theme-night .payment-method-card { background: rgba(238,246,255,.04); outline-color: rgba(238,246,255,.14); }
  .payment-method-card:hover { transform: translateY(-1px); }
  /* Light-theme hover — subtle skysoft wash, keep text dark */
  .theme-mist .payment-method-card:hover {
    background: color-mix(in srgb, var(--skysoft) 65%, white);
    outline-color: rgba(169,111,12,.28);
  }
  .theme-mist .payment-method-card:hover .payment-method-card__hint { color: var(--fg2); }
  /* Dark-theme hover — scoped to the nested DARK demo block only (inside mist wrapper),
     so it doesn't leak onto the misty Payment method list above. */
  .theme-mist .theme-night .payment-method-card:hover {
    background: var(--night-3);
    outline-color: var(--mist-strong);
  }
  .payment-method-card.is-selected {
    outline: 2px solid var(--royal); outline-offset: -2px;
    background: color-mix(in srgb, var(--royal) 8%, var(--surface-2) 80%);
  }
  /* Explicit mist selected — must come AFTER theme-night rule because
     section#app carries .theme-night on its root, so an unqualified
     .theme-night descendant selector would otherwise win inside nested .theme-mist */
  /* Dark theme selected — doubled .is-selected to outrank ambient .theme-mist cascade
     when the dark demo block is nested inside a mist wrapper. */
  .theme-night .payment-method-card.is-selected.is-selected {
    outline: 2px solid var(--gold); outline-offset: -2px;
    background: var(--surface-2);
    box-shadow:
      0 0 0 4px rgba(245,200,94,.14),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  .theme-night .payment-method-card.is-selected.is-selected .payment-method-card__name { color: var(--fg-night-1); }
  .theme-night .payment-method-card.is-selected.is-selected .payment-method-card__hint { color: var(--gold); }
  /* Misty selected — doubled .is-selected to outrank the doubled night rule
     when this misty demo is nested inside a .theme-night section (#app). */
  .theme-mist .payment-method-card.is-selected.is-selected {
    outline: 2px solid var(--royal); outline-offset: -2px;
    background:
      linear-gradient(180deg, rgba(169,111,12,.10), rgba(169,111,12,.04)),
      white;
    box-shadow: 0 0 0 4px rgba(169,111,12,.08);
  }
  .theme-mist .payment-method-card.is-selected.is-selected .payment-method-card__name { color: var(--ink); }
  .theme-mist .payment-method-card.is-selected.is-selected .payment-method-card__hint { color: var(--royal); }
  .payment-method-card__logo {
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--skysoft);
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .payment-method-card__logo svg { width: 1.35rem; height: 1.35rem; display: block; }
  /* per-method tinting */
  .payment-method-card__logo--alipay  { background: #E6F2FF; color: #1677FF; }
  .payment-method-card__logo--wechat  { background: #E6F8EC; color: #09BB07; }
  /* Card · Stripe — deeper navy-tinted chip so it doesn't fade into a white card surface */
  .payment-method-card__logo--card    { background: #D6DEF2; color: var(--navy); outline-color: rgba(20,58,134,.18); }
  .payment-method-card__logo--crypto  { background: #FFF4D6; color: var(--golddeep); }
  .theme-night .payment-method-card__logo {
    outline-color: rgba(238,246,255,.14);
    box-shadow: inset 0 1px 0 rgba(238,246,255,.10);
  }
  .theme-night .payment-method-card__logo--alipay  { background: rgba(22,119,255,.20);  color: #7FB6FF; }
  .theme-night .payment-method-card__logo--wechat  { background: rgba(9,187,7,.20);    color: #6BE36A; }
  /* Card · Stripe (night) — slightly heavier mist so it reads against the dark card */
  .theme-night .payment-method-card__logo--card    { background: rgba(158,192,255,.18); color: #C7D6F2; outline-color: rgba(158,192,255,.26); }
  .theme-night .payment-method-card__logo--crypto  { background: rgba(245,200,94,.16);  color: var(--gold); }
  .payment-method-card__body { flex: 1; min-width: 0; }
  .payment-method-card__name { font: 700 .92rem/1.2 var(--font-sans); color: var(--text-1); }
  .payment-method-card__hint { font-size: .76rem; color: var(--text-3); margin-top: .2rem; }
  .payment-method-card__radio {
    width: 1.2rem; height: 1.2rem; border-radius: 999px;
    outline: 1.5px solid var(--hairline-strong);
    outline-offset: -1.5px;
    position: relative; flex-shrink: 0;
  }
  .payment-method-card.is-selected .payment-method-card__radio { outline-color: var(--royal); }
  .payment-method-card.is-selected .payment-method-card__radio::after {
    content: ""; position: absolute; inset: 3px;
    border-radius: 999px; background: var(--royal);
  }
  .theme-night .payment-method-card.is-selected.is-selected .payment-method-card__radio { outline-color: var(--gold); }
  .theme-night .payment-method-card.is-selected.is-selected .payment-method-card__radio::after { background: var(--gold); }
  /* Misty radio — placed AFTER the night radio rules so the misty demo nested inside
     #app (theme-night) wins on equal specificity via source order. */
  .theme-mist .payment-method-card.is-selected.is-selected .payment-method-card__radio { outline-color: var(--royal); }
  .theme-mist .payment-method-card.is-selected.is-selected .payment-method-card__radio::after { background: var(--royal); }

  .checkout-panel {
    border-radius: var(--r-2xl);
    padding: 1.5rem;
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    background: color-mix(in srgb, var(--surface-2) 75%, transparent);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
    display: flex; flex-direction: column; gap: .85rem;
    align-items: center; text-align: center;
  }
  .theme-night .checkout-panel { background: rgba(238,246,255,.04); outline-color: rgba(238,246,255,.10); }
  /* Misty checkout panels need a visible border — the default --hairline (border-soft, #F1F5F9)
     disappears against the white card container. Use the stronger --border + a soft shadow for depth. */
  .theme-mist .checkout-panel {
    outline-color: var(--border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .checkout-panel__title { font: 700 1rem/1.2 var(--font-sans); letter-spacing: -.01em; }
  .checkout-panel__hint  { font-size: .82rem; color: var(--text-3); }
  .checkout-panel__qr {
    width: 180px; height: 180px; padding: .6rem;
    background: white; border-radius: var(--r-lg);
    display: grid; grid-template-columns: repeat(15, 1fr);
    gap: 1px;
    box-shadow: 0 8px 24px -10px rgba(11,23,54,.4);
  }
  .checkout-panel__qr i { background: var(--ink); border-radius: 1px; }
  .checkout-panel__qr i.empty { background: transparent; }
  .checkout-panel--redirect .checkout-panel__icon {
    width: 4rem; height: 4rem; border-radius: 999px;
    background: rgba(52,120,246,.18); color: var(--royal);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
  }
  .theme-night .checkout-panel--redirect .checkout-panel__icon { color: #A6C7FF; }
  .checkout-panel--success .checkout-panel__icon {
    width: 4rem; height: 4rem; border-radius: 999px;
    background: rgba(5,150,105,.15); color: var(--success);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem;
    box-shadow: inset 0 0 0 2px rgba(5,150,105,.3), 0 0 0 8px rgba(5,150,105,.08);
  }

  /* ── TAB GROUP ───────────────────────────────────────────────── */
  .tabs {
    display: inline-flex;
    padding: .3rem; gap: .15rem;
    background: color-mix(in srgb, var(--surface-3) 60%, transparent);
    border-radius: 999px;
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  }
  .theme-night .tabs { background: rgba(238,246,255,.06); outline-color: rgba(238,246,255,.12); }
  .tab {
    border: 0; background: transparent;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font: 600 .85rem/1 var(--font-sans);
    color: var(--text-3);
    cursor: pointer;
    letter-spacing: -.005em;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: background .15s, color .15s;
  }
  .tab:hover { color: var(--text-1); }
  .tab.tab--active {
    background: var(--gold); color: var(--ink);
    box-shadow: 0 4px 14px rgba(245,200,94,.4), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .tab__save {
    font: 700 .62rem/1 var(--font-sans);
    padding: .15rem .4rem;
    border-radius: 999px;
    background: rgba(11,23,54,.18);
    letter-spacing: .04em;
  }

  .tabs--underline {
    display: flex; gap: 0; padding: 0;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; outline: none;
    box-shadow: none;
    border-bottom: 1px solid var(--hairline);
  }
  .tabs--underline .tab {
    border-radius: 0;
    padding: .85rem 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    box-shadow: none;
  }
  .tabs--underline .tab.tab--active {
    background: transparent;
    color: var(--royal);
    border-bottom-color: var(--royal);
    box-shadow: none;
  }
  .tabs--underline .tab.tab--active .tab__save { background: rgba(52,120,246,.14); color: var(--royal); }

  /* ── EMPTY STATE ─────────────────────────────────────────────── */
  .empty-state {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: .9rem;
    padding: 3rem 2rem;
  }
  .empty-state__art {
    width: 140px; height: 140px;
    color: var(--gold);
    filter: drop-shadow(0 8px 24px rgba(245,200,94,.25));
  }
  .theme-mist .empty-state__art { color: var(--royal); filter: drop-shadow(0 8px 24px rgba(169,111,12,.18)); }
  .empty-state__title { font: 700 1.25rem/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--text-1); margin-top: .25rem; }
  .empty-state__body  { color: var(--text-3); max-width: 36ch; font-size: .92rem; line-height: 1.55; }
  .empty-state__cta   { margin-top: .5rem; }

  /* Responsive */
  @media (max-width: 880px) {
    .pair, .compgrid, .logo-row { grid-template-columns: 1fr; }
    .palette { grid-template-columns: repeat(2, 1fr); }
    .palette.compact { grid-template-columns: repeat(4, 1fr); }
    .specimen { grid-template-columns: 1fr; gap: .5rem; }
    .moonrow { grid-template-columns: repeat(4, 1fr); }
    .emojigrid { grid-template-columns: repeat(5, 1fr); }
    .hero__moon { width: 260px; height: 260px; top: 2%; right: -3%; opacity: .85; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
  }

  /* Visually hidden anchor offset */
  [id] { scroll-margin-top: 5rem; }

/* ===== style block 2 ===== */
/* Browser chrome (webpage frame) */
      .webframe {
        border-radius: var(--r-2xl);
        overflow: hidden;
        outline: 1px solid rgba(238,246,255,.10);
        outline-offset: -1px;
        box-shadow: var(--shadow-night);
        background: var(--night-1);
      }
      .webframe__chrome {
        display: grid; grid-template-columns: auto 1fr auto;
        gap: .85rem; align-items: center;
        padding: .65rem .9rem;
        background: rgba(11,23,54,.85);
        border-bottom: 1px solid rgba(238,246,255,.08);
        backdrop-filter: blur(16px) saturate(160%);
      }
      .webframe__lights { display: flex; gap: .35rem; }
      .webframe__lights i { width: 11px; height: 11px; border-radius: 999px; display: block; }
      .webframe__lights i:nth-child(1) { background: #FF5F57; }
      .webframe__lights i:nth-child(2) { background: #FEBC2E; }
      .webframe__lights i:nth-child(3) { background: #28C840; }
      .webframe__url {
        font: 500 .76rem/1 ui-monospace, "JetBrains Mono", monospace;
        color: var(--fg-night-3);
        padding: .45rem .85rem;
        background: rgba(238,246,255,.06);
        border-radius: 999px;
        outline: 1px solid rgba(238,246,255,.10); outline-offset: -1px;
        display: inline-flex; align-items: center; gap: .45rem;
        max-width: 26rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .webframe__url b { color: var(--fg-night-1); font-weight: 600; }
      .webframe__url .lock { color: var(--success); opacity: .9; }
      .webframe__chrome-actions { display: flex; gap: .35rem; color: var(--fg-night-3); font-size: .85rem; }
      .webframe__chrome-actions span {
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 6px;
      }
      .webframe__chrome-actions span:hover { background: rgba(238,246,255,.06); }
      /* ─── Portal nav modifier (.nav--portal) — global, used by app + showcase ─── */
      .nav--portal {
        background: rgba(11,23,54,.55);
        backdrop-filter: blur(18px) saturate(170%);
        -webkit-backdrop-filter: blur(18px) saturate(170%);
      }
      .nav--portal.nav {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1.5rem;
        border-bottom: 1px solid rgba(238,246,255,.08);
      }
      .nav--portal .nav__brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
      .nav--portal .nav__links {
        display: flex; gap: .1rem; flex-wrap: nowrap;
        min-width: 0; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
      }
      .nav--portal .nav__links::-webkit-scrollbar { display: none; }
      .nav--portal .nav__link {
        font: 600 .78rem/1 var(--font-sans);
        color: var(--fg-night-2);
        padding: .5rem .58rem;
        border-radius: var(--r-md);
        text-decoration: none;
        letter-spacing: -.01em;
        white-space: nowrap;
      }
      .nav--portal .nav__link:hover { color: var(--fg-night-1); background: rgba(238,246,255,.05); }
      .nav--portal .nav__link.is-active {
        color: var(--gold);
        background: rgba(245,200,94,.10);
        box-shadow: inset 0 0 0 1px rgba(245,200,94,.22);
      }
      .nav--portal .nav__link--accent {
        color: var(--royal-soft, #9CC4FF);
        background: rgba(120,160,255,.10);
        box-shadow: inset 0 0 0 1px rgba(120,160,255,.26);
      }
      .nav--portal .nav__link--accent::before {
        content: "🎁";
        font-size: .72rem;
        margin-right: .3rem;
      }
      .nav--portal .nav__link--accent:hover {
        color: #BFD8FF;
        background: rgba(120,160,255,.16);
      }
      .nav--portal .nav__right { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
      .nav--portal .nav__avatar {
        width: 32px; height: 32px; border-radius: 999px;
        background: linear-gradient(135deg, var(--gold), var(--golddeep));
        color: var(--ink);
        display: inline-flex; align-items: center; justify-content: center;
        font: 800 .78rem/1 var(--font-sans); letter-spacing: -.01em;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
      }
      /* .nav__lang-btn is a global token — defined in main CSS, no webframe override needed */

      /* ─── Portal theme toggle (sun / moon) — pill matches .nav__lang-btn ─── */
      .nav__theme-btn { padding: .38rem .5rem; }
      .nav__theme-btn .ico { display: inline-flex; align-items: center; justify-content: center; }
      .nav__theme-btn .ico-sun { display: none; }
      .webframe.is-light .nav__theme-btn .ico-moon { display: none; }
      .webframe.is-light .nav__theme-btn .ico-sun { display: inline-flex; }
      /* Page-level toggle (no .webframe ancestor) tracks its own state class */
      .nav__theme-btn.is-light .ico-moon { display: none; }
      .nav__theme-btn.is-light .ico-sun { display: inline-flex; }

      /* ─── Portal LIGHT MODE — re-maps night tokens to daylight, scoped to a toggled webframe ─── */
      .webframe.is-light {
        --night-0: #E9F1FB;
        --night-1: #F4F8FF;   /* page / frame surface */
        --night-2: #FFFFFF;   /* card surface         */
        --night-3: #EAF2FE;   /* raised / hover       */
        --fg-night-1: #0B1736;
        --fg-night-2: #45526F;
        --fg-night-3: #64748B;
        --fg-night-4: #94A3B8;
        --mist: rgba(11,23,54,.10);
        --mist-strong: rgba(11,23,54,.18);
        outline-color: rgba(11,23,54,.10);
        box-shadow: var(--shadow-soft);
      }
      .webframe.is-light .webframe__chrome {
        background: rgba(248,251,255,.9);
        border-bottom-color: rgba(11,23,54,.08);
      }
      .webframe.is-light .webframe__url {
        background: rgba(11,23,54,.04);
        outline-color: rgba(11,23,54,.12);
      }
      .webframe.is-light .webframe__chrome-actions { color: #64748B; }
      .webframe.is-light .webframe__chrome-actions span:hover { background: rgba(11,23,54,.06); }
      .webframe.is-light .nav--portal {
        background: rgba(255,255,255,.74);
        border-bottom-color: rgba(11,23,54,.08);
      }
      .webframe.is-light .nav--portal .nav__link:hover { color: var(--ink); background: rgba(11,23,54,.05); }
      .webframe.is-light .nav--portal .nav__link.is-active {
        color: var(--golddeep);
        background: rgba(245,200,94,.20);
        box-shadow: inset 0 0 0 1px rgba(169,111,12,.30);
      }
      .webframe.is-light .nav--portal .nav__link--accent {
        color: var(--royal);
        background: rgba(169,111,12,.10);
        box-shadow: inset 0 0 0 1px rgba(169,111,12,.28);
      }
      .webframe.is-light .nav--portal .nav__link--accent:hover {
        color: var(--navy);
        background: rgba(169,111,12,.16);
      }
      .webframe.is-light .nav__lang-btn { color: var(--fg2); background: rgba(169,111,12,.06); outline-color: rgba(169,111,12,.16); }
      .webframe.is-light .nav__lang-btn:hover { color: var(--ink); background: rgba(169,111,12,.10); }
      .webframe.is-light .nav__lang-btn--active { color: var(--royal); background: var(--skysoft); outline-color: rgba(169,111,12,.22); }
      /* Cards / surfaces that rely on .theme-night class rules */
      .webframe.is-light .card {
        background: #FFFFFF;
        outline-color: rgba(11,23,54,.08);
        box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.6);
      }
      .webframe.is-light .card:hover {
        box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,.7);
      }
      .webframe.is-light .chip { background: var(--skysoft); color: var(--ink); outline: 1px solid rgba(169,111,12,.14); }
      .webframe.is-light .stat,
      .webframe.is-light .node,
      .webframe.is-light .sublink,
      .webframe.is-light .platform-tabs,
      .webframe.is-light .import-row,
      .webframe.is-light .payment-method-card { background: var(--skysoft); outline-color: rgba(169,111,12,.14); }
      .webframe.is-light .field__input {
        background: #FFFFFF; color: var(--ink);
        border-color: #94A3B8; box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
      }
      .webframe.is-light .field__input::placeholder { color: var(--fg4); }
      .webframe.is-light .icon-bubble {
        background: var(--grad-icon-bubble);
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
      }
      /* Decorative night grid lines disappear gracefully on light */
      .webframe.is-light .bg-night-lines,
      .webframe.is-light .bg-night-grid { opacity: .35; filter: invert(1) brightness(.6); }

      /* ─── Portal light mode · component parity ───────────────────────────
         These components ship light overrides scoped to .theme-mist (the DS's
         canonical light wrapper). Portal pages toggle .webframe.is-light instead,
         so without these mirrors the components keep their dark / pale-on-pale
         defaults. Each rule re-applies the .theme-mist value under the webframe. */

      /* Colored chips — keep their semantic hue (base .webframe.is-light .chip
         would otherwise flatten them all to neutral sky) */
      .webframe.is-light .chip--moon    { background: var(--cream);      color: var(--golddeep); outline-color: rgba(169,111,12,.20); }
      .webframe.is-light .chip--mist    { background: var(--skysoft);    color: var(--royal);    outline-color: rgba(169,111,12,.18); }
      .webframe.is-light .chip--success { background: var(--success-bg); color: var(--success);  outline-color: rgba(5,150,105,.22); }
      .webframe.is-light .chip--danger  { background: #FEF2F2;           color: #DC2626;         outline-color: rgba(220,38,38,.22); }

      /* Gold setup / balance tile */
      .webframe.is-light .card--gold {
        background: linear-gradient(135deg, var(--cream), rgba(245,200,94,.06));
        outline-color: rgba(169,111,12,.22);
      }

      /* Traffic gauge track — pale sky instead of near-invisible white-on-white */
      .webframe.is-light .gauge { background: var(--skysoft); }

      /* Client-download CTA — deep gold ink on the gold wash (was pale gold-on-gold) */
      .webframe.is-light .dl-cta {
        color: var(--golddeep); outline-color: rgba(169,111,12,.34);
        background: linear-gradient(135deg, rgba(245,200,94,.24), rgba(245,200,94,.10));
      }
      .webframe.is-light .dl-cta:hover {
        background: linear-gradient(135deg, rgba(245,200,94,.32), rgba(245,200,94,.16));
        outline-color: rgba(169,111,12,.5);
      }

      /* One-click import — readable platform tabs + light glyph tile + royal hover */
      .webframe.is-light .platform-tab { color: var(--fg2); }
      .webframe.is-light .platform-tab:hover { color: var(--ink); }
      .webframe.is-light .platform-tab.is-active {
        background: #FFFFFF; color: var(--royal);
        box-shadow: inset 0 0 0 1px rgba(169,111,12,.26), var(--shadow-sm);
      }
      .webframe.is-light .import-row__glyph { background: var(--grad-icon-bubble); outline-color: rgba(169,111,12,.12); }
      .webframe.is-light .import-row:hover { background: color-mix(in srgb, var(--skysoft) 70%, #fff); outline-color: rgba(169,111,12,.30); }
      .webframe.is-light .import-row:hover .import-row__cta { color: var(--royal); }

      /* App-shell sidebar + bottom-tab + toggle — royal active state, not gold-on-gold */
      .webframe.is-light .sidebar__item.is-active {
        background: var(--skysoft); color: var(--royal);
        box-shadow: inset 0 0 0 1px rgba(169,111,12,.22);
      }
      .webframe.is-light .sidebar__badge { background: rgba(169,111,12,.14); color: var(--royal); }
      .webframe.is-light .bottom-tab.is-active { color: var(--royal); background: var(--skysoft); }
      .webframe.is-light .switch input:checked ~ .switch__track { background: var(--royal); outline-color: rgba(169,111,12,.45); }

      /* Featured plan card — light featured surface (DS locks it dark via !important) */
      .webframe.is-light .plancard--featured {
        background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%) !important;
        outline-color: rgba(169,111,12,.30) !important;
      }
      .webframe.is-light .plancard--featured .plancard__price .amt { color: var(--golddeep); }

      /* Checkout / payment surfaces */
      .webframe.is-light .checkout-panel { outline-color: var(--border); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4); }
      .webframe.is-light .payment-method-card:hover {
        background: color-mix(in srgb, var(--skysoft) 65%, white); outline-color: rgba(169,111,12,.28);
      }
      .webframe.is-light .payment-method-card.is-selected.is-selected {
        outline: 2px solid var(--royal); outline-offset: -2px;
        background: linear-gradient(135deg, var(--skysoft), #fff);
        box-shadow: 0 0 0 4px rgba(169,111,12,.08);
      }
      .webframe.is-light .payment-method-card.is-selected.is-selected .payment-method-card__name { color: var(--ink); }
      .webframe.is-light .payment-method-card.is-selected.is-selected .payment-method-card__hint { color: var(--royal); }
      .webframe.is-light .payment-method-card.is-selected.is-selected .payment-method-card__radio { outline-color: var(--royal); }
      .webframe.is-light .payment-method-card.is-selected.is-selected .payment-method-card__radio::after { background: var(--royal); }

      /* Empty-state illustration accent */
      .webframe.is-light .empty-state__art { color: var(--royal); filter: drop-shadow(0 8px 24px rgba(169,111,12,.18)); }
      /* Stat tile */
      .stat {
        padding: 1.1rem 1.15rem;
        border-radius: var(--r-2xl);
        background: rgba(238,246,255,.04);
        outline: 1px solid rgba(238,246,255,.10);
        outline-offset: -1px;
        backdrop-filter: blur(14px) saturate(160%);
        display: flex; flex-direction: column; gap: .55rem;
      }
      .stat__label {
        font: 600 .68rem/1 var(--font-sans);
        color: var(--fg-night-3);
        letter-spacing: .12em; text-transform: uppercase;
        display: flex; align-items: center; gap: .4rem;
      }
      .stat__value { font: 800 1.65rem/1 var(--font-sans); color: var(--fg-night-1); letter-spacing: -.03em; }
      .stat__value sub { font: 600 .72rem/1 var(--font-sans); color: var(--fg-night-3); margin-left: .25rem; }
      .stat__delta { font: 600 .72rem/1 ui-monospace, monospace; letter-spacing: .02em; }
      .stat__delta--up { color: #34D399; }
      .stat__delta--down { color: #FF8A8C; }
      /* Mini sparkline / bars */
      .sparkbars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; align-items: end; height: 36px; }
      .sparkbars i { display: block; background: linear-gradient(180deg, var(--gold), var(--golddeep)); border-radius: 2px; opacity: .85; }
      .sparkbars i.muted { background: rgba(238,246,255,.18); }
      /* ── Dashboard hero: announcement carousel + key stats ────────── */
      .dash-hero { display:grid; grid-template-columns: 1fr 296px; gap:1rem; align-items:stretch; }
      .dash-hero__stats { display:flex; flex-direction:column; gap:.85rem; }
      .dash-hero__stats .stat { justify-content:center; }
      .dash-hero__stats .stat--fill { flex:1; }
      /* Days-left cycle tile */
      .cycle-row { display:flex; align-items:center; gap:.85rem; }
      .cycle-row .moonphase { flex-shrink:0; }
      .cycle-row__num { font:800 1.5rem/1 var(--font-sans); letter-spacing:-.03em; color:var(--fg-night-1); }
      .cycle-row__num sub { font:600 .82rem/1 var(--font-sans); color:var(--fg-night-3); margin-left:.25rem; }
      .cycle-row--sub .cycle-row__num { font-size:1.18rem; }
      .cycle-row--sub .cycle-row__num sub { font-size:.72rem; }
      .cycle-row__cap { font:600 .72rem/1.3 var(--font-sans); color:var(--fg-night-3); margin-bottom:.18rem; }
      @media (max-width: 720px) { .dash-hero { grid-template-columns:1fr; } }

      /* Banner carousel */
      .bcar {
        position:relative; border-radius:var(--r-2xl); overflow:hidden;
        outline:1px solid rgba(238,246,255,.10); outline-offset:-1px;
        min-height:244px; box-shadow:var(--shadow-night); isolation:isolate;
      }
      .bcar__viewport { position:absolute; inset:0; overflow:hidden; }
      .bcar__track { display:flex; height:100%; transition:transform .65s cubic-bezier(.7,0,.2,1); }
      .bcar__slide {
        position:relative; flex:0 0 100%; height:100%; overflow:hidden;
        display:flex; align-items:center;
      }
      .bcar__slide::before { content:""; position:absolute; inset:0; background:var(--slide-grad); z-index:0; }
      .bcar__slide--aurora { --slide-grad:
        radial-gradient(125% 150% at 100% 0%, rgba(245,200,94,.40), transparent 55%),
        linear-gradient(115deg, #0A1430, #142149 58%, #1D2C5E); }
      .bcar__slide--ember { --slide-grad:
        radial-gradient(125% 150% at 100% 100%, rgba(255,138,108,.34), transparent 56%),
        linear-gradient(115deg, #0A1430, #221038 92%); }
      .bcar__slide--beacon { --slide-grad:
        radial-gradient(130% 150% at 100% 0%, rgba(52,120,246,.46), transparent 55%),
        linear-gradient(115deg, #0A1430, #0E1E40 55%, #103063); }
      .bcar__art { position:absolute; right:0; top:0; bottom:0; width:50%; z-index:1; }
      .bcar__art img {
        width:100%; height:100%; object-fit:cover; object-position:center; opacity:.92;
        -webkit-mask-image:linear-gradient(90deg, transparent, #000 46%);
        mask-image:linear-gradient(90deg, transparent, #000 46%);
      }
      .bcar__content { position:relative; z-index:2; padding:1.7rem 1.85rem; max-width:64%; }
      .bcar__kicker {
        display:inline-flex; align-items:center; gap:.5rem;
        font:700 .64rem/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
      }
      .bcar__kicker .dot { width:6px; height:6px; border-radius:999px; background:var(--gold); box-shadow:0 0 0 4px rgba(245,200,94,.2); }
      .bcar__title { font:800 1.5rem/1.12 var(--font-sans); letter-spacing:-.03em; color:var(--fg-night-1); margin:.7rem 0 0; text-wrap:balance; }
      .bcar__sub { font:500 .85rem/1.55 var(--font-sans); color:var(--fg-night-2); margin:.55rem 0 0; max-width:36ch; }
      .bcar__cta {
        display:inline-block; margin-top:1.05rem; font:700 .8rem/1 var(--font-sans); color:var(--fg-night-1);
        padding:.62rem .95rem; border-radius:999px; background:rgba(238,246,255,.08);
        outline:1px solid rgba(238,246,255,.16); outline-offset:-1px; backdrop-filter:blur(8px);
        transition:background .2s, transform .2s;
      }
      .bcar__slide:hover .bcar__cta { background:rgba(245,200,94,.16); transform:translateY(-1px); }
      /* nav arrows */
      .bcar__nav {
        position:absolute; top:50%; transform:translateY(-50%); z-index:5;
        width:34px; height:34px; border-radius:999px; border:none; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        font:400 1.25rem/1 var(--font-sans); color:var(--fg-night-1);
        background:rgba(11,23,54,.5); outline:1px solid rgba(238,246,255,.16); outline-offset:-1px;
        backdrop-filter:blur(10px); transition:background .2s;
      }
      .bcar__nav:hover { background:rgba(11,23,54,.9); }
      .bcar__nav--prev { left:.7rem; }
      .bcar__nav--next { right:.7rem; }
      /* dots */
      .bcar__dots { position:absolute; left:50%; transform:translateX(-50%); bottom:1.05rem; z-index:5; display:flex; gap:.4rem; }
      .bcar__dots button { width:7px; height:7px; padding:0; border:none; border-radius:999px; cursor:pointer; background:rgba(238,246,255,.32); transition:width .3s, background .3s; }
      .bcar__dots button.is-active { width:22px; background:var(--gold); }

/* ════════════════════════════════════════════════════════════════
   LIGHT-MODE GOLD ACCENT  (added)
   In light themes the former royal-blue accent (#3478F6 / --royal)
   becomes deep gold (#A96F0C, the existing --golddeep). The dark
   "Moonlit Night" theme keeps its blue beacon. Scoped to the three
   light wrappers (.webframe.is-light · .theme-mist · .is-light) so
   dark mode is left completely untouched.
   ════════════════════════════════════════════════════════════════ */
.webframe.is-light, .theme-mist, .is-light {
  --royal:   #A96F0C;
  --info:    #A96F0C;
  --link:    #A96F0C;
  --accent:  #A96F0C;
  --skysoft: #FBF1DA;
  --shadow-glow: 0 22px 70px rgba(169,111,12,.20);
  --grad-progress: linear-gradient(90deg, #A96F0C, #F5C85E);
  --soft-grid:
    linear-gradient(rgba(169,111,12,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,111,12,.05) 1px, transparent 1px);
}
.webframe.is-light .field--focused .field__input,
.webframe.is-light .field__input:focus,
.theme-mist .field--focused .field__input,
.theme-mist .field__input:focus {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 4px rgba(169,111,12,.12);
}
.webframe.is-light .banner--info,
.theme-mist .banner--info {
  background: linear-gradient(135deg, rgba(169,111,12,.18), rgba(169,111,12,.05));
  outline-color: rgba(169,111,12,.34);
}
.webframe.is-light .banner--info .banner__icon,
.theme-mist .banner--info .banner__icon { background: rgba(169,111,12,.18); color: var(--golddeep); }
.webframe.is-light .banner--info .banner__title,
.theme-mist .banner--info .banner__title { color: var(--golddeep); }
.webframe.is-light .checkout-panel--redirect .checkout-panel__icon,
.theme-mist .checkout-panel--redirect .checkout-panel__icon {
  background: rgba(169,111,12,.16); color: var(--golddeep);
}
.webframe.is-light .tabs--underline .tab.tab--active .tab__save,
.theme-mist .tabs--underline .tab.tab--active .tab__save {
  background: rgba(169,111,12,.16); color: var(--golddeep);
}