/* ─────────────────────────────────────────────────────────────────────
   CardKRP v2 — Design System
   Editorial-luxury aesthetic aligned with landing.css.
   Dark hero accents, cream highlights, generous negative space.

   Layers ordering (lowest precedence first):
     reset → base → components → pages → utilities
   ───────────────────────────────────────────────────────────────────── */

/* layers removed — body.v2 selectors carry weight on their own */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TOKENS                                                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  :root {
    --v2-cream:        #f7f2e7;
    --v2-cream-soft:   #fdfaf2;
    --v2-cream-warm:   #f0e7d2;
    --v2-saffron:      #c2691a;
    --v2-saffron-soft: #e9a35a;
    --v2-amber:        #7c2d12;
    --v2-amber-light:  #c2410c;

    --v2-ink:          #11100e;
    --v2-ink-soft:     #2b2620;
    --v2-mute:         #5a5246;
    --v2-mute-soft:    #7d7563;
    --v2-line:         rgba(17,16,14,0.12);
    --v2-line-soft:    rgba(17,16,14,0.06);
    --v2-surface:      #1c1a16;
    --v2-surface-warm: #221f1a;
    --v2-bg:           #0a0a0a;

    --v2-dark:         #0d0c09;
    --v2-dark-2:       #16140f;
    --v2-dark-3:       #1c1a16;
    --v2-on-dark:      #f0ece4;
    --v2-on-dark-mute: rgba(240,236,228,0.60);
    --v2-on-dark-line: rgba(240,236,228,0.10);

    --v2-rose:    #9a3412;
    --v2-rose-bg: rgba(154,52,18,0.08);
    --v2-jade:    #2a6b4a;
    --v2-jade-bg: rgba(42,107,74,0.10);

    --v2-r-xs: 6px;
    --v2-r-sm: 10px;
    --v2-r-md: 14px;
    --v2-r-lg: 20px;
    --v2-r-xl: 28px;
    --v2-r-full: 999px;

    --v2-sh-1: 0 1px 2px rgba(17,16,14,0.06);
    --v2-sh-2: 0 6px 18px -8px rgba(17,16,14,0.18), 0 2px 6px -2px rgba(17,16,14,0.08);
    --v2-sh-3: 0 22px 50px -20px rgba(17,16,14,0.22), 0 8px 18px -8px rgba(17,16,14,0.10);
    --v2-sh-4: 0 40px 80px -30px rgba(17,16,14,0.35);
    --v2-sh-dark: 0 40px 80px rgba(0,0,0,0.4);

    --v2-t-fast:  120ms;
    --v2-t-med:   180ms;
    --v2-t-slow:  280ms;
    --v2-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);

    --v2-display: ui-serif, "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
    --v2-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", system-ui, "Segoe UI", sans-serif;
    --v2-mono:    "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    --v2-tracking-tight:   -0.012em;
    --v2-tracking-tighter: -0.025em;
  }

  /* DARK theme override for merchant dashboard pages.
     Same tokens, dark palette — aligned with landing.css (vitrine).
     Customer pages and landing keep the default cream palette. */
  body.v2:is(.v2-merchant, .v2-customer) {
    --v2-bg:           #0a0a0a;
    --v2-ink:          #f0ece4;
    --v2-ink-soft:     rgba(240,236,228,0.87);
    --v2-mute:         rgba(240,236,228,0.56);
    --v2-mute-soft:    rgba(240,236,228,0.36);
    --v2-line:         rgba(240,236,228,0.09);
    --v2-line-soft:    rgba(240,236,228,0.05);
    --v2-surface:      #1c1a16;
    --v2-surface-warm: #221f1a;
    --v2-cream:        rgba(245,158,11,0.07);
    --v2-cream-soft:   rgba(255,255,255,0.03);
    --v2-cream-warm:   rgba(255,220,170,0.10);
    --v2-jade-bg:      rgba(110,231,163,0.10);
    --v2-rose-bg:      rgba(255,154,166,0.10);
  }

  /* ── Dark-theme contrast fixes (merchant dashboard only) ───────────────
     The base .badge / billing-badge / placeholder colors were tuned for the
     cream (vitrine/customer) palette. On the near-black merchant theme they
     became tone-on-tone (dark jewel text on a dark translucent tint, or an
     over-dimmed placeholder). These overrides raise legibility to >=4.5:1
     without touching the brand accent hues. Cream/customer pages keep the
     original values (this block is scoped to .v2-merchant only). */
  body.v2.v2-merchant .badge.success {
    color: #6ee7a3; /* was #2a6b4a (2.55:1) -> 10.5:1 */
  }
  body.v2.v2-merchant .badge.warn {
    color: #7c2d12; /* was #6b4a08 (1.65:1) -> 8.4:1 */
  }
  body.v2.v2-merchant .billing-plan-card__badge--trial {
    color: #7c2d12; /* was #6b4a08 (1.65:1) -> 8.4:1 */
  }
  body.v2.v2-merchant .billing-plan-card__badge--active {
    color: #6ee7a3; /* was --v2-jade #2a6b4a (2.55:1) -> 10.5:1 */
  }
  body.v2.v2-merchant .billing-plan-card__badge--past_due {
    color: #fda4af; /* was --v2-rose #9a3412 (3.11:1) -> 8.9:1 */
  }
  /* Input placeholders: lift from ~3.2:1 to ~5.3:1 so hint text is readable
     on the dark glass inputs without competing with real input text. */
  body.v2.v2-merchant .tpl-field input::placeholder,
  body.v2.v2-merchant .form input::placeholder,
  body.v2.v2-merchant .tier-row__txt::placeholder,
  body.v2.v2-merchant .promo-input::placeholder,
  body.v2.v2-merchant input::placeholder,
  body.v2.v2-merchant textarea::placeholder {
    color: rgba(255, 255, 255, 0.5); /* was 0.35/0.40 -> 5.3:1 */
  }

  /* Page bg gradient — warm amber glows, no blue/purple */
  body.v2:is(.v2-merchant, .v2-customer) {
    background:
      radial-gradient(55% 45% at 12% 0%,   rgba(200,138,38,0.13) 0%, transparent 58%),
      radial-gradient(30% 40% at 90% 18%,  rgba(175,95,20,0.07)  0%, transparent 55%),
      radial-gradient(45% 55% at 48% 108%, rgba(148,84,14,0.09)  0%, transparent 65%),
      var(--v2-bg);
    background-attachment: fixed;
  }
  /* Primary CTA: champagne gold — deep gradient, rich warmth */
  body.v2:is(.v2-merchant, .v2-customer) .btn-primary {
    --btn-bg: linear-gradient(155deg, #fce9a2 0%, #c48b08 100%);
    --btn-fg: #1a0e00;
    --btn-bd: transparent;
    box-shadow: 0 6px 22px rgba(196,139,8,0.34), inset 0 1px 0 rgba(255,255,255,0.42);
  }
  body.v2:is(.v2-merchant, .v2-customer) .btn-primary:hover {
    --btn-bg: linear-gradient(155deg, #fdf0b0 0%, #d09610 100%);
    box-shadow: 0 10px 32px rgba(196,139,8,0.46), inset 0 1px 0 rgba(255,255,255,0.52);
  }
  body.v2:is(.v2-merchant, .v2-customer) .btn-ghost {
    --btn-bg: rgba(255,255,255,0.04);
    --btn-fg: var(--v2-ink);
    --btn-bd: rgba(255,255,255,0.12);
  }
  body.v2:is(.v2-merchant, .v2-customer) .btn-ghost:hover { --btn-bg: rgba(255,255,255,0.08); }
  body.v2:is(.v2-merchant, .v2-customer) .btn {
    --btn-bg: rgba(255,255,255,0.06);
    --btn-fg: var(--v2-ink);
    --btn-bd: rgba(255,255,255,0.12);
  }
  /* Form inputs on dark */
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field select,
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field textarea,
  body.v2:is(.v2-merchant, .v2-customer) .form input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  body.v2:is(.v2-merchant, .v2-customer) .form select,
  body.v2:is(.v2-merchant, .v2-customer) .form textarea {
    background: rgba(240,236,228,0.05);
    border: 1px solid rgba(240,236,228,0.11);
    color: var(--v2-ink);
    color-scheme: dark;
  }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field select option,
  body.v2:is(.v2-merchant, .v2-customer) .form select option,
  body.v2 select option { background: #1c1812; color: #f0ece4; }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field input::placeholder,
  body.v2:is(.v2-merchant, .v2-customer) .form input::placeholder { color: rgba(240,236,228,0.36); }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field input:focus,
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field select:focus,
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field textarea:focus,
  body.v2:is(.v2-merchant, .v2-customer) .form input:focus,
  body.v2:is(.v2-merchant, .v2-customer) .form select:focus,
  body.v2:is(.v2-merchant, .v2-customer) .form textarea:focus {
    border-color: rgba(252,233,162,0.55);
    background: rgba(240,236,228,0.07);
    box-shadow: 0 0 0 4px rgba(196,139,8,0.16);
  }
  /* Activity / table header bands — readable on dark */
  body.v2:is(.v2-merchant, .v2-customer) .activity-table th { background: rgba(240,236,228,0.04); color: rgba(240,236,228,0.65); }
  body.v2:is(.v2-merchant, .v2-customer) .activity-table tbody tr:hover { background: rgba(240,236,228,0.04); }
  body.v2:is(.v2-merchant, .v2-customer) .activity-table .delta--pos { color: #6ee7a3; }
  body.v2:is(.v2-merchant, .v2-customer) .activity-table .delta--neg { color: #ff9aa6; }
  body.v2:is(.v2-merchant, .v2-customer) .activity-stat__num { color: var(--v2-ink); }
  body.v2:is(.v2-merchant, .v2-customer) .activity-stat--positive .activity-stat__num { color: #6ee7a3; }
  body.v2:is(.v2-merchant, .v2-customer) .activity-stat--negative .activity-stat__num { color: #ff9aa6; }
  /* Stepper on dark */
  body.v2:is(.v2-merchant, .v2-customer) .stepper {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
  body.v2:is(.v2-merchant, .v2-customer) .stepper__btn { color: var(--v2-ink); }
  body.v2:is(.v2-merchant, .v2-customer) .stepper__btn:hover { background: rgba(255,255,255,0.08); }
  body.v2:is(.v2-merchant, .v2-customer) .stepper input { color: var(--v2-ink); }
  /* Color picker pair: dark checker + dark chrome */
  body.v2:is(.v2-merchant, .v2-customer) .color-pair {
    background:
      conic-gradient(rgba(255,255,255,0.06) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.06) 75%, transparent 75%) 0 0/14px 14px,
      rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
  }
  body.v2:is(.v2-merchant, .v2-customer) .color-pair input[type="color"] { border-color: rgba(255,255,255,0.15); }
  body.v2:is(.v2-merchant, .v2-customer) .color-pair__value {
    background: rgba(255,255,255,0.06);
    color: var(--v2-ink);
    border: 1px solid rgba(255,255,255,0.10);
  }
  /* Color packs */
  body.v2:is(.v2-merchant, .v2-customer) .color-pack {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
  }
  body.v2:is(.v2-merchant, .v2-customer) .color-pack:hover { border-color: var(--v2-amber-light); background: rgba(245,158,11,0.06); }
  body.v2:is(.v2-merchant, .v2-customer) .color-pack__name { color: var(--v2-ink); }
  /* tpl-toggle (small switches on dashed bg) */
  body.v2:is(.v2-merchant, .v2-customer) .tpl-toggle {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
  }
  /* Field group / sections (cards holding the form) */
  body.v2:is(.v2-merchant, .v2-customer) .tpl-section {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
  }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-section--hero {
    background: linear-gradient(180deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.02) 100%);
    border-color: rgba(245,158,11,0.18);
  }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field small { color: rgba(255,255,255,0.5); }
  body.v2:is(.v2-merchant, .v2-customer) .tpl-field > span:first-child { color: var(--v2-ink); }
  /* Segmented controls */
  body.v2:is(.v2-merchant, .v2-customer) .seg { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
  body.v2:is(.v2-merchant, .v2-customer) .seg label { color: rgba(255,255,255,0.6); }
  body.v2:is(.v2-merchant, .v2-customer) .seg label:hover { color: var(--v2-ink); background: rgba(255,255,255,0.04); }
  body.v2:is(.v2-merchant, .v2-customer) .seg input:checked + label { background: var(--v2-amber-light); color: #ffffff; }
  /* ctype-toggle (stamps vs points hero) */
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
  }
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__card:hover { border-color: rgba(245,158,11,0.35); }
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__opt input:checked + .ctype-toggle__card {
    border-color: var(--v2-amber-light); background: rgba(245,158,11,0.10);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.25) inset;
  }
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__icon { color: var(--v2-amber-light); }
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__title { color: var(--v2-ink); }
  body.v2:is(.v2-merchant, .v2-customer) .ctype-toggle__sub { color: rgba(255,255,255,0.65); }
  /* lang-mode-card same pattern */
  body.v2:is(.v2-merchant, .v2-customer) .lang-mode-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
  }
  body.v2:is(.v2-merchant, .v2-customer) .lang-mode-card:hover { border-color: rgba(245,158,11,0.35); }
  body.v2:is(.v2-merchant, .v2-customer) .lang-mode-opt input:checked + .lang-mode-card {
    border-color: var(--v2-amber-light); background: rgba(245,158,11,0.10);
  }
  body.v2:is(.v2-merchant, .v2-customer) .lang-mode-card__title { color: var(--v2-ink); }
  body.v2:is(.v2-merchant, .v2-customer) .lang-mode-card__sub { color: rgba(255,255,255,0.62); }
  /* stamp-grid options */
  body.v2:is(.v2-merchant, .v2-customer) .stamp-grid__opt {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
    color: var(--v2-ink);
  }
  body.v2:is(.v2-merchant, .v2-customer) .stamp-grid__opt:hover { border-color: rgba(245,158,11,0.35); }
  body.v2:is(.v2-merchant, .v2-customer) .stamp-grid input:checked + .stamp-grid__opt {
    background: var(--v2-amber-light); color: #ffffff; border-color: var(--v2-amber-light);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.4) inset;
  }
  /* qtpl cards: dark border + saffron focus */
  body.v2:is(.v2-merchant, .v2-customer) .qtpl { border: 1px solid rgba(255,255,255,0.06); border-radius: var(--v2-r-md); }
  body.v2:is(.v2-merchant, .v2-customer) .qtpl:hover { border-color: rgba(245,158,11,0.30); }

  /* ── Selected-state styles for the card designer pickers ───────────────
     These lived only in auth.css (not loaded on the dashboard), so clicking a
     preset / colour-pack / quick-pick added .is-active but nothing showed.
     Ported here (scoped to body.v2) so the selection is actually visible. */
  body.v2 .qtpl.is-active {
    border-color: rgba(245,158,11,0.65) !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.5), var(--v2-sh-3);
  }
  body.v2 .color-pack { position: relative; }
  body.v2 .color-pack.is-active {
    border-color: rgba(245,158,11,0.7) !important;
    background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.05)) !important;
    box-shadow: 0 0 0 1px rgba(245,158,11,0.45), 0 8px 20px -8px rgba(245,158,11,0.4);
  }
  body.v2 .color-pack.is-active::after {
    content: "✓";
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; font-size: 11px; font-weight: 800;
    background: linear-gradient(135deg, #c2410c, #7c2d12); color: #ffffff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  }
  body.v2 .quick-pick__btn.is-active {
    background: linear-gradient(180deg, rgba(245,158,11,0.25) 0%, rgba(240,200,120,0.12) 100%);
    color: #c2410c;
    border-color: rgba(245,158,11,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px rgba(245,158,11,0.25);
  }
  /* Preview sticky card surround */
  body.v2:is(.v2-merchant, .v2-customer) .tpl-preview-sticky {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255,255,255,0.10);
  }
  /* Form container */
  body.v2:is(.v2-merchant, .v2-customer) .form {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.08);
  }
  /* Active states on dark: deep gold instead of cream (cream #c2410c disappears on black) */
  body.v2.v2-merchant .cw-close,
  body.v2.v2-merchant .range-tab.is-active,
  body.v2.v2-merchant .billing-plan__ribbon,
  body.v2.v2-merchant .v2-lang a.is-active,
  body.v2.v2-merchant .seg input:checked + label,
  body.v2.v2-merchant .tpl-preview-tab.is-active,
  body.v2.v2-merchant .lang-btn.is-active {
    background: #c48b08;
    color: #fff8e6;
    border-color: #c48b08;
  }
  body.v2:is(.v2-merchant, .v2-customer) .range-tab:hover:not(.is-active) { background: rgba(255,255,255,0.05); color: var(--v2-ink); }
  body.v2:is(.v2-merchant, .v2-customer) .billing-plan.is-current { background: rgba(245,158,11,0.05); border-color: rgba(110,231,163,0.35); }
  /* Toast/push status */
  body.v2:is(.v2-merchant, .v2-customer) .toast { background: #1c1a16; border: 1px solid rgba(240,236,228,0.10); }
  body.v2:is(.v2-merchant, .v2-customer) .push-status { background: rgba(240,236,228,0.04); border: 1px solid rgba(240,236,228,0.09); color: var(--v2-ink); }
  /* hr divider */
  body.v2:is(.v2-merchant, .v2-customer) hr.v2-divider { border-top-color: rgba(240,236,228,0.09); }
  /* Code blocks */
  body.v2:is(.v2-merchant, .v2-customer) code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; }
  /* Native text selection on dark — amber tint */
  body.v2:is(.v2-merchant, .v2-customer) ::selection { background: rgba(245,158,11,0.35); color: #fff; }

  /* MILESTONE BLOCK — two big swatches with explanation */
  body.v2 .milestone-block {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: var(--v2-r-md);
    margin-bottom: 12px;
  }
  body.v2 .milestone-block__head { display: flex; flex-direction: column; gap: 4px; }
  body.v2 .milestone-block__title { font-weight: 700; font-size: 0.96rem; color: var(--v2-ink); }
  body.v2 .milestone-block__sub { font-size: 0.82rem; color: var(--v2-mute); line-height: 1.45; }
  body.v2 .milestone-block__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 36rem) { body.v2 .milestone-block__row { grid-template-columns: 1fr; } }
  body.v2 .milestone-swatch {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--v2-r-sm);
    cursor: pointer;
    transition: border-color var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .milestone-swatch:hover { border-color: rgba(245,158,11,0.35); background: rgba(255,255,255,0.05); }
  body.v2 .milestone-swatch__dot {
    width: 38px; height: 38px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 6px 14px -4px rgba(0,0,0,0.5);
    flex-shrink: 0;
  }
  body.v2 .milestone-swatch__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  body.v2 .milestone-swatch__label { font-weight: 600; font-size: 0.88rem; color: var(--v2-ink); }
  body.v2 .milestone-swatch__hint { font-size: 0.74rem; color: var(--v2-mute); line-height: 1.35; }
  body.v2 .milestone-swatch input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    border: 0; padding: 0;
  }

  /* TIER ROW — "at N stamps → reward" milestones list */
  body.v2 #tiers-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  body.v2 .tier-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--v2-r-sm);
    padding: 10px 12px;
  }
  body.v2 .tier-row--bilingual { grid-template-columns: auto 1fr 1fr auto; }
  @media (max-width: 36rem) {
    body.v2 .tier-row, body.v2 .tier-row--bilingual { grid-template-columns: 1fr; }
  }
  body.v2 .tier-row__at {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.20);
    border-radius: var(--v2-r-sm);
    padding: 6px 10px;
  }
  body.v2 .tier-row__label {
    font-size: 0.72rem; font-weight: 700;
    color: var(--v2-amber-light);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  body.v2 .tier-row__at input[type="number"] {
    width: 7ch !important; min-width: 5ch !important; min-height: 32px !important;
    padding: 4px 8px !important;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-ink) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.96rem;
    /* Hide the up/down spinners so the digits have room to breathe */
    -moz-appearance: textfield;
  }
  body.v2 .tier-row__at input[type="number"]::-webkit-outer-spin-button,
  body.v2 .tier-row__at input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

  /* ─── Banner / strip image uploader ─── */
  body.v2 .banner-uploader {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 14px;
  }
  body.v2 .banner-uploader__preview {
    width: 100%; aspect-ratio: 1125 / 369;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  body.v2 .banner-uploader__preview img {
    width: 100%; height: 100%; object-fit: cover;
  }
  body.v2 .banner-uploader__placeholder {
    color: var(--v2-mute); font-size: 0.84rem; letter-spacing: 0.04em;
  }
  body.v2 .banner-uploader__body {
    display: flex; flex-direction: column; gap: 8px;
  }
  body.v2 .banner-uploader__hint {
    font-size: 0.78rem; color: var(--v2-mute); line-height: 1.5;
  }
  body.v2 .banner-uploader__actions { display: flex; gap: 8px; flex-wrap: wrap; }
  body.v2 .banner-uploader__name { word-break: break-all; }
  body.v2 .tier-row__txt {
    min-height: 40px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink);
    font-size: 0.92rem;
    width: 100%;
  }
  body.v2 .tier-row__txt:focus {
    border-color: rgba(245,158,11,0.5);
    background: rgba(255,255,255,0.07);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
  }
  body.v2 .tier-row__txt::placeholder { color: rgba(255,255,255,0.35); }
  body.v2 .tier-row__del {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .tier-row__del:hover {
    border-color: var(--v2-rose); color: var(--v2-rose);
    background: rgba(154,52,18,0.10);
  }
  /* Customer cream theme: same shapes, lighter palette */
  body.v2:not(.v2-merchant) .tier-row {
    background: var(--v2-surface);
    border-color: var(--v2-line);
  }
  body.v2:not(.v2-merchant) .tier-row__at {
    background: rgba(194,105,26,0.08);
    border-color: rgba(194,105,26,0.25);
  }
  body.v2:not(.v2-merchant) .tier-row__label { color: var(--v2-saffron); }
  body.v2:not(.v2-merchant) .tier-row__at input[type="number"] { color: var(--v2-ink) !important; }
  body.v2:not(.v2-merchant) .tier-row__txt {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    color: var(--v2-ink);
  }
  body.v2:not(.v2-merchant) .tier-row__txt::placeholder { color: var(--v2-mute-soft); }
  body.v2:not(.v2-merchant) .tier-row__del {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    color: var(--v2-mute);
  }

  /* QR test cards — sample QR codes the merchant can scan to preview customer flow */
  body.v2 .qr-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 16px;
  }
  body.v2 .qr-test {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--v2-r-md);
    text-decoration: none;
    color: var(--v2-ink);
    transition: border-color var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .qr-test:hover { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.05); }
  body.v2 .qr-test__img {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  body.v2 .qr-test__img img { width: 100%; height: 100%; }
  body.v2 .qr-test__body { display: flex; flex-direction: column; gap: 4px; text-align: center; min-width: 0; }
  body.v2 .qr-test__label { font-weight: 700; font-size: 1.1rem; }
  body.v2 .qr-test__hint  { font-size: 0.85rem; color: var(--v2-mute); }
  body.v2:not(.v2-merchant) .qr-test {
    background: var(--v2-surface);
    border-color: var(--v2-line);
  }

  /* TEST CARD — magic link generator */
  body.v2 .test-card__empty { display: flex; justify-content: center; padding: 18px 0; }
  body.v2 .test-card__live {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(165deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.02) 100%);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: var(--v2-r-lg);
    padding: 20px;
  }
  @media (max-width: 36rem) {
    body.v2 .test-card__live { grid-template-columns: 1fr; }
  }
  body.v2 .test-card__qr {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
  }
  body.v2 .test-card__qr img { width: 100%; height: 100%; }
  body.v2 .test-card__meta { display: flex; flex-direction: column; gap: 8px; }
  body.v2 .test-card__countdown {
    font-family: var(--v2-mono);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--v2-amber-light);
    font-variant-numeric: tabular-nums;
  }
  body.v2 .test-card__expires { color: var(--v2-mute); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
  body.v2 .test-card__link {
    font-family: var(--v2-mono);
    font-size: 0.78rem;
    color: var(--v2-mute);
    word-break: break-all;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--v2-r-sm);
    text-decoration: none;
    transition: border-color var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .test-card__link:hover { border-color: rgba(245,158,11,0.3); color: var(--v2-amber-light); }
  body.v2 .test-card__actions { display: flex; gap: 8px; margin-top: 4px; }

  /* ╔══════════════════════════════════════════════════════════════════╗
     ║  POSTER PREVIEW (ported from auth.css)                            ║
     ╚══════════════════════════════════════════════════════════════════╝ */
  body.v2 .poster-preview {
    width: 100%; max-width: 22rem;
    aspect-ratio: 105 / 148;
    background: #ffffff;
    color: #0a0a0a;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.5);
    margin: 0 auto;
    position: relative;
  }
  body.v2 .pp-strip {
    background: var(--pp-primary, #0a0a0a);
    color: var(--pp-label, #ffffff);
    padding: 0.85rem 1rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  body.v2 .pp-logo {
    width: 2.4rem; height: 2.4rem;
    background: rgba(255,255,255,0.95);
    border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #0a0a0a; font-weight: 800; overflow: hidden;
  }
  body.v2 .pp-logo img { width: 100%; height: 100%; object-fit: cover; }
  body.v2 .pp-shop__name { font-size: 0.95rem; font-weight: 700; line-height: 1.1; }
  body.v2 .pp-shop__sub  { font-size: 0.65rem; opacity: 0.65; margin-top: 1px; font-weight: 500; }
  body.v2 .pp-body {
    flex: 1;
    padding: 1rem 1rem 0.5rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.4rem;
  }
  body.v2 .pp-headline {
    font-size: 1.35rem; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.1;
    color: #0a0a0a;
  }
  body.v2 .pp-headline2 { font-size: 0.8rem; color: #6a6a6a; font-weight: 500; margin-bottom: 0.4rem; }
  body.v2 .pp-qr {
    width: 60%; aspect-ratio: 1/1;
    background: #fff; padding: 0.4rem;
    border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.12);
    position: relative;
  }
  body.v2 .pp-qr::before, body.v2 .pp-qr::after,
  body.v2 .pp-qr > div::after, body.v2 .pp-qr > div::before {
    content: ""; position: absolute;
    width: 1rem; height: 1rem;
    border: 2px solid var(--pp-primary, #0a0a0a);
  }
  body.v2 .pp-qr::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
  body.v2 .pp-qr::after  { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
  body.v2 .pp-qr > div::before { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
  body.v2 .pp-qr > div::after  { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
  body.v2 .pp-qr .qr-pattern {
    width: 100%; height: 100%; border-radius: 2px; position: relative;
    background:
      linear-gradient(45deg, #0a0a0a 25%, transparent 25%) 0 0/6px 6px,
      linear-gradient(-45deg, #0a0a0a 25%, transparent 25%) 0 0/6px 6px,
      linear-gradient(45deg, transparent 75%, #0a0a0a 75%) 0 3px/6px 6px,
      linear-gradient(-45deg, transparent 75%, #0a0a0a 75%) 3px 0/6px 6px;
  }
  body.v2 .pp-cta { font-size: 0.85rem; font-weight: 700; margin-top: 0.4rem; color: #0a0a0a; }
  body.v2 .pp-sub { font-size: 0.7rem; color: #6a6a6a; font-weight: 500; }
  body.v2 .pp-footer-note { font-size: 0.7rem; color: #6a6a6a; font-weight: 600; margin-top: 0.3rem; }
  body.v2 .pp-foot {
    padding: 0.5rem 1rem;
    background: #f5f5f3;
    font-size: 0.6rem; letter-spacing: 0.06em;
    text-align: center;
    color: rgba(0,0,0,0.45);
    font-family: var(--v2-mono);
    border-top: 1px solid rgba(0,0,0,0.05);
  }
  /* Lang switcher on dark header */
  body.v2:is(.v2-merchant, .v2-customer) .site-header .lang { background: rgba(255,255,255,0.06); }
  body.v2:is(.v2-merchant, .v2-customer) .site-header .lang a { color: rgba(255,255,255,0.55); }
  body.v2:is(.v2-merchant, .v2-customer) .site-header .lang a.active { background: var(--v2-amber-light); color: #ffffff; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  RESET — scoped under .v2 root                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 { margin: 0; padding: 0; background-color: var(--v2-bg); background-image: radial-gradient(120% 80% at 85% -10%, rgba(245,158,11,0.16), transparent 55%), radial-gradient(90% 70% at 0% 110%, rgba(124,45,18,0.22), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; color: var(--v2-ink); font-family: var(--v2-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; }
  /* Critical: DO NOT set overflow:hidden on body — would break position:sticky */
  body.v2 *, body.v2 *::before, body.v2 *::after { box-sizing: border-box; }
  body.v2 img, body.v2 svg, body.v2 video { display: block; max-width: 100%; }
  body.v2 script { display: none !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TYPOGRAPHY                                                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 {
    font-family: var(--v2-display);
    font-weight: 500;
    color: var(--v2-ink);
    letter-spacing: var(--v2-tracking-tighter);
    line-height: 1.05;
    margin: 0;
  }
  body.v2 h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
  body.v2 h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  body.v2 h3 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); font-weight: 600; letter-spacing: var(--v2-tracking-tight); }
  body.v2 h4 { font-size: 1rem; font-weight: 600; letter-spacing: var(--v2-tracking-tight); }
  body.v2 p  { margin: 0; color: var(--v2-ink-soft); line-height: 1.55; }
  body.v2 em { font-style: italic; color: var(--v2-saffron); font-weight: 500; }
  body.v2 a { color: var(--v2-saffron); text-decoration: none; transition: color var(--v2-t-fast) var(--v2-ease); }
  body.v2 a:hover { color: var(--v2-ink); }
  body.v2 code, body.v2 .mono { font-family: var(--v2-mono); font-size: 0.86em; }
  body.v2 .muted     { color: var(--v2-mute); }
  body.v2 .tiny      { font-size: 0.82rem; line-height: 1.45; }
  body.v2 .center    { text-align: center; }
  body.v2 hr.v2-divider { border: 0; border-top: 1px solid var(--v2-line); margin: 1.6rem 0; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  LAYOUT PRIMITIVES                                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  /* Unified dashboard width: every page is as wide as the card editor
     (the 120rem reference — left edge to the right edge of the wallet
     preview). Narrow/medium modifiers stay for centred customer forms. */
  body.v2 .container {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
  }
  body.v2 .container.narrow { max-width: 34rem; }
  body.v2 .container.medium { max-width: 56rem; }
  body.v2 main.container:has(.tpl-grid) { max-width: 120rem; }
  body.v2 main { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
  /* auth-main, the account wrapper, and bare <main> (analytics) all match
     the same 120rem so no dashboard page is narrower than another. */
  body.v2 main.auth-main,
  body.v2 main.acct-wrap,
  body.v2 main:not([class]) {
    padding-top: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
  }

  body.v2 .row { display: flex; gap: 14px; flex-wrap: wrap; }
  body.v2 .row > * { flex: 1 1 14rem; }
  body.v2 .spread { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  body.v2 .v2-stack { display: flex; flex-direction: column; gap: 14px; }

  body.v2 .bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 14px;
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER                                                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .site-header {
    background: var(--v2-dark);
    border-bottom: 1px solid var(--v2-on-dark-line);
    color: var(--v2-on-dark);
    padding: 14px clamp(1rem, 3vw, 2rem);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body.v2 .site-header .brand {
    font-family: var(--v2-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--v2-on-dark);
    letter-spacing: var(--v2-tracking-tight);
    display: inline-flex; align-items: center; gap: 2px;
  }
  body.v2 .site-header .brand .dot { color: var(--v2-amber); }
  body.v2 .site-header .brand.v2-back { display: inline-flex; align-items: center; gap: 8px; }
  body.v2 .site-header .header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  body.v2 .site-header .btn-link { color: var(--v2-on-dark-mute); font-size: 0.92rem; padding: 6px 10px; font-weight: 500; }
  body.v2 .site-header .btn-link:hover { color: var(--v2-amber); }
  body.v2 .site-header .lang {
    display: inline-flex; align-items: center; gap: 0;
    background: rgba(255,255,255,0.06);
    border-radius: var(--v2-r-full);
    padding: 3px;
  }
  body.v2 .site-header .lang a {
    font-size: 0.78rem; font-weight: 600;
    padding: 5px 12px; border-radius: var(--v2-r-full);
    color: var(--v2-on-dark-mute);
  }
  body.v2 .site-header .lang a.active, body.v2 .site-header .lang a.is-active {
    background: var(--v2-amber-light); color: var(--v2-ink);
  }
  body.v2 .site-header .btn.btn-sm.btn-primary {
    background: var(--v2-amber-light); color: var(--v2-ink); border-color: var(--v2-amber-light);
    padding: 7px 14px; font-size: 0.86rem; min-height: 0;
  }

  body.v2 .site-header--auth { padding-top: 12px; padding-bottom: 12px; }
  body.v2 .nav-auth {
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.v2 .nav-auth::-webkit-scrollbar { display: none; }
  body.v2 .nav-auth a {
    color: var(--v2-on-dark-mute);
    font-size: 0.88rem; font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--v2-r-sm);
    white-space: nowrap;
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .nav-auth a:hover { color: var(--v2-on-dark); background: rgba(255,255,255,0.04); }
  body.v2 .nav-auth a.is-active {
    color: #fde8a8;
    background: rgba(196,139,8,0.18);
  }
  body.v2 .nav-trail { display: flex; align-items: center; gap: 12px; }
  body.v2 .user-chip { display: inline-flex; }
  body.v2 .user-chip .avatar {
    width: 32px; height: 32px;
    border-radius: var(--v2-r-full);
    background: linear-gradient(135deg, #fce9a2 0%, #c48b08 100%); color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.92rem;
  }
  body.v2 .nav-trail .link-btn {
    background: transparent; border: 0; cursor: pointer;
    color: var(--v2-on-dark-mute); font-size: 0.86rem; font-weight: 500;
    padding: 6px 10px; border-radius: var(--v2-r-sm);
  }
  body.v2 .nav-trail .link-btn:hover { color: var(--v2-on-dark); background: rgba(255,255,255,0.04); }

  /* Dashboard nav "Support" button — sits in the nav-trail alongside the
     language toggle. On wide screens shows icon + label; on mobile becomes
     icon-only. Clicking it pops the contact-fab panel open. */
  body.v2 .nav-support-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.22);
    color: var(--v2-amber-light);
    font-size: 0.84rem; font-weight: 600;
    padding: 6px 12px; border-radius: var(--v2-r-full);
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
  }
  body.v2 .nav-support-btn:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.45);
    transform: translateY(-1px);
  }
  body.v2 .nav-support-btn svg { flex-shrink: 0; }
  body.v2 .nav-support-btn__icon { position: relative; display: inline-flex; }
  /* Unread-support state: warm highlight + pulsing red dot to draw the eye. */
  body.v2 .nav-support-btn.has-alert {
    background: rgba(194,90,40,0.16);
    border-color: rgba(225,110,60,0.55);
    color: #c2410c;
    animation: navSupportGlow 2.4s ease-in-out infinite;
  }
  body.v2 .nav-support-dot {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #c2410c;
    box-shadow: 0 0 0 2px var(--v2-ink, #11100e);
  }
  body.v2 .nav-support-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #c2410c; animation: navSupportPing 1.8s cubic-bezier(0,0,0.2,1) infinite;
  }
  @keyframes navSupportPing {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  @keyframes navSupportGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.16); }
  }
  @media (prefers-reduced-motion: reduce) {
    body.v2 .nav-support-btn.has-alert { animation: none; }
    body.v2 .nav-support-dot::after { animation: none; }
  }
  @media (max-width: 720px) {
    body.v2 .nav-support-btn { padding: 6px 8px; }
    body.v2 .nav-support-btn__label { display: none; }
  }

  body.v2 .nav-burger {
    display: none; cursor: pointer;
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: var(--v2-r-sm);
    -webkit-tap-highlight-color: transparent;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast);
  }
  body.v2 .nav-burger:hover {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.4);
  }
  body.v2 .nav-burger:active { background: rgba(255,255,255,0.16); }
  body.v2 .nav-burger[aria-expanded="true"] {
    background: rgba(245,158,11,0.18);
    border-color: var(--v2-amber-light);
  }
  body.v2 .nav-burger span {
    display: block; width: 22px; height: 2px;
    background: var(--v2-on-dark); border-radius: 2px;
  }
  /* Burger menu kicks in below 1280px because the merchant nav has 9 items
     + brand + lang + user chip + support + logout. Even on a 1280px laptop
     they overflow into horizontal scroll which is invisible/unusable. */
  @media (max-width: 1280px) {
    body.v2 .nav-burger { display: flex; order: 99; }
    body.v2 .nav-auth {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch;
      background: var(--v2-dark, #0a0a0a);
      border-top: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
      padding: 8px;
      overflow-y: auto; max-height: 80vh;
      gap: 2px;
      z-index: 50;
    }
    body.v2 .nav-auth.is-open { display: flex; }
    body.v2 .nav-auth a {
      padding: 14px 16px;          /* big tap target */
      font-size: 1rem;
      min-height: 48px;
      display: flex; align-items: center;
      border-radius: var(--v2-r-sm);
    }
    body.v2 .site-header--auth { position: relative; }
  }

  body.v2 .imp-banner {
    background: linear-gradient(180deg, #1a0e00 0%, #2a1d10 100%);
    color: var(--v2-amber-light);
    padding: 10px clamp(1rem, 3vw, 2rem);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid rgba(245,158,11,0.2);
    font-size: 0.88rem;
  }
  body.v2 .imp-banner__text { display: flex; align-items: center; gap: 10px; }
  body.v2 .imp-banner__sub { font-size: 0.78rem; color: rgba(245,158,11,0.6); }
  body.v2 .imp-banner__exit {
    background: var(--v2-amber-light); color: var(--v2-ink);
    border: 0; padding: 6px 12px; border-radius: var(--v2-r-sm);
    font-weight: 600; font-size: 0.82rem; cursor: pointer;
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FOOTER                                                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .site-footer {
    margin-top: 4rem;
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    text-align: center;
    color: var(--v2-mute);
    font-size: 0.82rem;
    border-top: 1px solid var(--v2-line-soft);
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  EYEBROW + PAGE HEAD + HERO                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .v2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--v2-sans);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-saffron);
    background: rgba(194,105,26,0.08);
    border: 1px solid rgba(194,105,26,0.2);
    padding: 5px 12px;
    border-radius: var(--v2-r-full);
  }

  body.v2 .v2-pagehead {
    margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
    display: flex; flex-direction: column; gap: 10px;
  }
  body.v2 .v2-pagehead h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
  body.v2 .v2-pagehead p  { color: var(--v2-mute); max-width: 56ch; }

  body.v2 .v2-hero-warm {
    text-align: center;
    padding: clamp(2.2rem, 6vw, 3.6rem) 0 clamp(1.6rem, 4vw, 2.4rem);
    max-width: 32rem; margin: 0 auto;
  }
  body.v2 .v2-hero-warm .v2-eyebrow { margin-bottom: 1.1rem; }
  body.v2 .v2-hero-warm h1 {
    font-size: clamp(2.1rem, 5.6vw, 3.2rem);
    letter-spacing: var(--v2-tracking-tighter);
    line-height: 1.02;
    margin: 0 0 1rem;
  }
  body.v2 .v2-lede {
    font-size: clamp(1rem, 1.6vw, 1.08rem);
    color: var(--v2-mute);
    line-height: 1.55;
    max-width: 32rem; margin: 0 auto;
  }

  body.v2 .back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.88rem; font-weight: 500;
    color: var(--v2-mute);
    margin: 0 0 1rem;
    padding: 6px 0;
    transition: color var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .back-link:hover { color: var(--v2-ink); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BUTTONS                                                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .btn {
    --btn-bg: var(--v2-surface);
    --btn-fg: var(--v2-ink);
    --btn-bd: var(--v2-line);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    min-height: 44px;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--v2-r-md);
    font-family: var(--v2-sans);
    font-size: 0.94rem; font-weight: 600;
    letter-spacing: var(--v2-tracking-tight);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--v2-t-fast) var(--v2-ease),
                background var(--v2-t-fast) var(--v2-ease),
                box-shadow var(--v2-t-fast) var(--v2-ease),
                border-color var(--v2-t-fast) var(--v2-ease);
    box-shadow: var(--v2-sh-1);
  }
  body.v2 .btn:hover { transform: translateY(-1px); box-shadow: var(--v2-sh-2); }
  body.v2 .btn:active { transform: translateY(0); box-shadow: var(--v2-sh-1); }
  body.v2 .btn:disabled, body.v2 .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: var(--v2-sh-1); }

  body.v2 .btn-primary {
    --btn-bg: linear-gradient(180deg, var(--v2-ink) 0%, #000 100%);
    --btn-fg: var(--v2-amber-light);
    --btn-bd: var(--v2-ink);
    box-shadow: var(--v2-sh-2), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  body.v2 .btn-primary:hover { --btn-bg: #000; box-shadow: var(--v2-sh-3); }

  body.v2 .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--v2-ink);
    --btn-bd: var(--v2-line);
    box-shadow: none;
  }
  body.v2 .btn-ghost:hover { --btn-bg: var(--v2-surface-warm); }

  body.v2 .btn-block { width: 100%; }
  body.v2 .btn-lg { padding: 13px 22px; min-height: 52px; font-size: 1rem; border-radius: var(--v2-r-md); }
  body.v2 .btn-sm { padding: 6px 12px; min-height: 0; font-size: 0.82rem; border-radius: var(--v2-r-sm); }

  body.v2 .v2-branded-cta {
    box-shadow: var(--v2-sh-3) !important;
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FORMS                                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .form {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: clamp(18px, 3vw, 26px);
    margin: 1.5rem 0;
    box-shadow: var(--v2-sh-2);
  }
  body.v2 .form label { display: flex; flex-direction: column; gap: 6px; }
  body.v2 .form label > span {
    font-size: 0.82rem; font-weight: 600;
    color: var(--v2-ink);
    letter-spacing: var(--v2-tracking-tight);
  }
  body.v2 .form label small,
  body.v2 .form .muted.tiny,
  body.v2 .form small {
    font-size: 0.78rem; color: var(--v2-mute); font-weight: 400;
  }
  body.v2 .form input, body.v2 .form select, body.v2 .form textarea,
  body.v2 .tpl-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  body.v2 .tpl-field select, body.v2 .tpl-field textarea {
    appearance: none;
    background: var(--v2-cream-soft);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    border-radius: var(--v2-r-sm);
    padding: 11px 14px;
    min-height: 44px;
    font-family: var(--v2-sans);
    font-size: 0.96rem;
    transition: border-color var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast) var(--v2-ease), box-shadow var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .form input::placeholder,
  body.v2 .tpl-field input::placeholder { color: var(--v2-mute-soft); }
  body.v2 .form input:focus, body.v2 .form select:focus, body.v2 .form textarea:focus,
  body.v2 .tpl-field input:focus, body.v2 .tpl-field select:focus, body.v2 .tpl-field textarea:focus {
    outline: none;
    border-color: var(--v2-saffron);
    background: var(--v2-cream-soft);
    box-shadow: 0 0 0 3px rgba(194,105,26,0.15);
  }
  body.v2 .form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a5246' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }

  body.v2 details.me-login-toggle {
    border: 1px dashed var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: 10px 14px;
    background: var(--v2-cream-soft);
  }
  body.v2 details.me-login-toggle summary {
    font-size: 0.86rem; color: var(--v2-mute);
    cursor: pointer; list-style: none;
    padding: 4px 0;
  }
  body.v2 details.me-login-toggle summary::-webkit-details-marker { display: none; }
  body.v2 details.me-login-toggle summary::before {
    content: "+"; display: inline-block; width: 16px;
    color: var(--v2-saffron); font-weight: 700;
  }
  body.v2 details.me-login-toggle[open] summary::before { content: "−"; }

  body.v2 .alert {
    padding: 12px 16px;
    border-radius: var(--v2-r-md);
    font-size: 0.92rem;
    border: 1px solid;
    display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.45;
  }
  body.v2 .alert p { margin: 2px 0; color: inherit; }
  body.v2 .alert-error   { background: var(--v2-rose-bg); color: var(--v2-rose); border-color: rgba(154,52,18,0.25); }
  body.v2 .alert-ok      { background: var(--v2-jade-bg); color: var(--v2-jade); border-color: rgba(42,107,74,0.25); }
  body.v2 .alert-success { background: var(--v2-jade-bg); color: var(--v2-jade); border-color: rgba(42,107,74,0.25); }
  body.v2 .alert-warn    { background: rgba(240,200,120,0.16); color: #6b4a08; border-color: rgba(240,200,120,0.4); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CARDS                                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .v2-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: clamp(16px, 2.4vw, 22px);
    box-shadow: var(--v2-sh-1);
    transition: transform var(--v2-t-med) var(--v2-ease), box-shadow var(--v2-t-med) var(--v2-ease), border-color var(--v2-t-med) var(--v2-ease);
  }
  body.v2 .v2-card.link, body.v2 .v2-card.is-clickable { cursor: pointer; }
  body.v2 .v2-card.link:hover, body.v2 .v2-card.is-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--v2-sh-2);
  }
  body.v2 .v2-card.highlight {
    background: linear-gradient(165deg, var(--v2-cream-soft) 0%, var(--v2-cream-warm) 100%);
    border-color: rgba(194,105,26,0.2);
  }
  body.v2 .v2-card .card-icon {
    width: 38px; height: 38px;
    border-radius: var(--v2-r-md);
    background: var(--v2-amber-light);
    color: var(--v2-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-bottom: 12px;
  }
  body.v2 .v2-card h3 { margin: 0 0 6px; }
  body.v2 .stat-num { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; font-family: var(--v2-display); letter-spacing: var(--v2-tracking-tighter); color: var(--v2-ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
  body.v2 .stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-mute); }

  body.v2 .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: var(--v2-r-full);
    background: var(--v2-surface-warm);
    color: var(--v2-mute);
    font-size: 0.74rem; font-weight: 600;
    border: 1px solid var(--v2-line);
    line-height: 1.3;
  }
  body.v2 .badge.success { background: var(--v2-jade-bg); color: var(--v2-jade); border-color: rgba(42,107,74,0.25); }
  body.v2 .badge.warn    { background: rgba(240,200,120,0.18); color: #6b4a08; border-color: rgba(240,200,120,0.4); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TOAST + PUSH STATUS                                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .toast {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--v2-dark);
    color: var(--v2-on-dark);
    border-radius: var(--v2-r-md);
    padding: 12px 18px;
    box-shadow: var(--v2-sh-dark);
    margin: 0 0 14px;
    animation: v2-toast-in 240ms var(--v2-ease) both;
    border: 1px solid var(--v2-on-dark-line);
  }
  body.v2 .toast .tiny.muted { color: rgba(255,255,255,0.7); }
  body.v2 .toast--ok strong  { color: var(--v2-amber-light); }
  body.v2 .toast--err strong { color: #ff9aa6; }
  body.v2 .toast--out { animation: v2-toast-out 400ms var(--v2-ease) both; }
  @keyframes v2-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes v2-toast-out { to   { opacity: 0; transform: translateY(-8px); } }

  body.v2 #toast-host {
    position: fixed; right: 1rem; bottom: 1rem;
    z-index: 200;
    display: flex; flex-direction: column-reverse; gap: 8px;
    pointer-events: none;
  }
  body.v2 #toast-host .toast { pointer-events: auto; min-width: 18rem; }

  body.v2 .push-status {
    display: flex; align-items: center; gap: 12px;
    background: var(--v2-dark);
    color: var(--v2-on-dark);
    padding: 10px 14px;
    border-radius: var(--v2-r-md);
    box-shadow: var(--v2-sh-2);
    margin-bottom: 14px;
    border: 1px solid var(--v2-on-dark-line);
  }
  body.v2 .push-status[hidden] { display: none; }
  body.v2 .push-status__spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: var(--v2-amber-light);
    border-radius: 50%;
    animation: v2-spin 0.8s linear infinite;
  }
  @keyframes v2-spin { to { transform: rotate(360deg); } }
  body.v2 .push-status__body strong { color: var(--v2-amber-light); display: block; }
  body.v2 .push-status__body .muted.tiny { color: rgba(255,255,255,0.7); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TPL HEADER + GRID (card.ejs, poster.ejs)                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .tpl-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin: 0 0 1.4rem;
  }
  body.v2 .tpl-header h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 6px; }
  body.v2 .tpl-header p  { color: var(--v2-mute); margin: 0; }

  /* 2-col layout — form left, preview right (sticky-centered) */
  body.v2 .tpl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  @media (min-width: 64rem) {
    body.v2 .tpl-grid {
      /* Fluid: form takes remaining space, preview scales 22rem→36rem with viewport */
      grid-template-columns: minmax(0, 1fr) clamp(22rem, 28vw, 36rem);
    }
    body.v2 .tpl-grid > form,
    body.v2 .tpl-grid > #tpl-form,
    body.v2 .tpl-grid > #poster-form {
      grid-column: 1 / 2;
      min-width: 0;
    }
    body.v2 .tpl-grid > .tpl-preview-wrap {
      grid-column: 2 / 3;
      grid-row: 1 / span 20;
      min-width: 0;
    }
    body.v2 .tpl-grid > #toast-host,
    body.v2 .tpl-grid > script,
    body.v2 .tpl-grid > .alert,
    body.v2 .tpl-grid > .toast,
    body.v2 .tpl-grid > #push-status {
      grid-column: 1 / 2;
    }
  }
  body.v2 .tpl-grid > script { display: none !important; }

  body.v2 .tpl-preview-wrap {
    width: 100%;
    position: relative;
  }
  body.v2 .tpl-preview-sticky {
    display: flex; flex-direction: column; gap: 10px;
    background: linear-gradient(180deg, var(--v2-cream-soft) 0%, var(--v2-cream-warm) 100%);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xl);
    padding: clamp(18px, 3vw, 26px);
    box-shadow: var(--v2-sh-3);
  }
  @media (min-width: 64rem) {
    body.v2 .tpl-preview-wrap {
      position: sticky;
      /* Vertically centered in the viewport, follows the scroll. Works now that
         no ancestor clips/scrolls between this and the body scroll container. */
      top: 50vh;
      transform: translateY(-50%);
      max-height: calc(100vh - 3rem);
      overflow: auto;
      align-self: start;
    }
  }
  body.v2 .tpl-preview-label {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--v2-saffron);
    margin: 0 0 4px;
  }
  body.v2 .tpl-preview-note {
    font-size: 0.78rem; color: var(--v2-mute); margin: 8px 0 0;
    line-height: 1.4;
  }
  body.v2 .tpl-preview-pane { display: flex; flex-direction: column; gap: 10px; }
  body.v2 .tpl-preview-pane[hidden] { display: none; }

  /* Tabs above preview to switch iOS / Android */
  body.v2 .tpl-preview-tabs {
    display: flex; gap: 4px;
    background: rgba(255,255,255,0.04);
    padding: 4px;
    border-radius: var(--v2-r-md);
    margin-bottom: 12px;
  }
  body.v2 .tpl-preview-tab {
    flex: 1;
    padding: 8px 12px;
    border: 0; background: transparent;
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem; font-weight: 600;
    border-radius: var(--v2-r-sm);
    cursor: pointer;
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .tpl-preview-tab:hover { color: var(--v2-ink); background: rgba(255,255,255,0.05); }
  body.v2 .tpl-preview-tab.is-active { background: var(--v2-amber-light); color: #ffffff; }

  /* Wallet preview language picker */
  body.v2 .lang-picker {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 10px;
  }
  body.v2 .lang-btn {
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--v2-t-fast) var(--v2-ease);
    line-height: 1.4;
  }
  body.v2 .lang-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
  }
  body.v2 .lang-btn.is-active {
    background: var(--v2-amber-light);
    border-color: var(--v2-amber-light);
    color: #ffffff;
  }

  /* Google Wallet (Android) card preview */
  body.v2 .gw-card {
    width: 100%;
    max-width: min(100%, calc(70vh * 5 / 8));
    min-height: calc(min(100%, calc(70vh * 5 / 8)) * 1.0);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    color: var(--gw-fg, #fff);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.4);
    margin: 0 auto;
    /* Real gradient applied DIRECTLY on the card — no overlay layer that could break */
    background:
      radial-gradient(140% 90% at 15% -5%,  var(--gw-bg2, #475569) 0%, transparent 55%),
      radial-gradient(110% 100% at 95% 100%, var(--gw-bg2, #475569) 0%, transparent 55%),
      radial-gradient(75% 60% at 50% 50%,   var(--gw-bg2, #475569) 0%, transparent 65%),
      linear-gradient(135deg, var(--gw-bg, #0a0a0a) 0%, var(--gw-bg2, #475569) 55%, var(--gw-bg, #0a0a0a) 100%);
  }
  body.v2 .gw-card > * { position: relative; z-index: 1; padding-inline: 18px; }
  body.v2 .gw-card__head { padding-top: 18px; padding-bottom: 0; }
  body.v2 .gw-card__hero { display: none; }
  body.v2 .gw-card > * { position: relative; z-index: 1; }
  body.v2 .gw-card__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
  }
  body.v2 .gw-card__logo {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-weight: 800;
    flex-shrink: 0;
  }
  body.v2 .gw-card__logo img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .gw-card__head-text { font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
  body.v2 .gw-card__org { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; }
  body.v2 .gw-card__divider { height: 1px; background: rgba(255,255,255,0.16); margin: 0 18px 12px; }
  body.v2 .gw-card__merchant {
    font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  body.v2 .gw-card__row {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px; margin-bottom: 14px;
  }
  body.v2 .gw-card__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  body.v2 .gw-card__col--right { text-align: right; align-items: flex-end; }
  body.v2 .gw-card__next { font-size: 0.78rem; font-weight: 600; opacity: 0.9; }
  body.v2 .gw-card__hero-stamps[style*="background-image"] {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3.5 / 1 !important;
    /* Stick to the bottom edge of the card — no margins, no padding */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  /* Cancel the card's bottom padding when a banner hero is present so it bleeds to the edge */
  body.v2 .gw-card:has(> .gw-card__hero-stamps[style*="background-image"]) {
    padding-bottom: 0 !important;
  }
  body.v2 .gw-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  body.v2 .gw-card__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; opacity: 0.6; text-transform: uppercase; }
  body.v2 .gw-card__balance { font-size: 2rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1; font-variant-numeric: tabular-nums; }
  body.v2 .gw-card__balance.gw-card__balance--stamps { font-size: inherit; letter-spacing: 0; line-height: 1; }
  body.v2 .gw-stamps-grid {
    display: grid;
    grid-template-columns: repeat(var(--per-row, 5), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 3px 4px;
    margin-top: 2px;
    /* leave room for QR (positioned absolute right, ~80px wide) */
    width: calc(100% - 86px);
    /* cap vertical space so stamps don't push reward/tiers out of card */
    max-height: 60%;
    overflow: hidden;
  }
  body.v2 .gw-stamp {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    min-width: 0;
    /* hard cap so each cell stays small enough that many fit */
    max-width: 16px;
    max-height: 16px;
    box-sizing: border-box;
  }
  body.v2 .gw-stamp.gw-stamp--icon {
    background: transparent !important;
    border: 0 !important;
    display: flex; align-items: center; justify-content: center;
  }
  body.v2 .gw-stamp--icon > svg { width: 100%; height: 100%; display: block; }
  body.v2 .gw-stamp--circle  { border-radius: 50%; }
  body.v2 .gw-stamp--square  { border-radius: 2px; }
  body.v2 .gw-stamp--heart   { clip-path: polygon(50% 90%, 5% 45%, 5% 25%, 22% 10%, 50% 28%, 78% 10%, 95% 25%, 95% 45%); }
  body.v2 .gw-stamp--star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  body.v2 .gw-stamp--diamond { transform: rotate(45deg); border-radius: 2px; }
  body.v2 .gw-stamp--flower  { clip-path: polygon(50% 0%, 65% 25%, 95% 25%, 75% 50%, 95% 75%, 65% 75%, 50% 100%, 35% 75%, 5% 75%, 25% 50%, 5% 25%, 35% 25%); }
  body.v2 .gw-stamp--hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
  body.v2 .gw-stamp--octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
  body.v2 .gw-stamp--drop    { border-radius: 50% 50% 50% 0; transform: rotate(45deg); }
  body.v2 .gw-stamp--bubble  { border-radius: 60% 40% 50% 50%; }
  body.v2 .gw-card__tiers { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-width: calc(100% - 86px); }
  body.v2 .gw-tier { display: flex; gap: 8px; font-size: 0.74rem; line-height: 1.15; }
  body.v2 .gw-tier__at { font-weight: 700; opacity: 0.6; min-width: 60px; }
  body.v2 .gw-tier__lbl { font-weight: 500; opacity: 0.95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.v2 .gw-card__reward { font-size: 0.84rem; opacity: 0.85; margin-top: 6px; }
  body.v2 .gw-card__qr {
    position: absolute; right: 18px; bottom: 18px;
    width: 64px; height: 64px;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
  }
  body.v2 .gw-card__qr .qr-pattern {
    width: 100%; height: 100%;
    background:
      linear-gradient(45deg, #0a0a0a 25%, transparent 25%) 0 0/5px 5px,
      linear-gradient(-45deg, #0a0a0a 25%, transparent 25%) 0 0/5px 5px,
      linear-gradient(45deg, transparent 75%, #0a0a0a 75%) 0 2px/5px 5px,
      linear-gradient(-45deg, transparent 75%, #0a0a0a 75%) 2px 0/5px 5px;
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TPL FORM SECTIONS                                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .tpl-section {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: clamp(18px, 2.6vw, 24px);
    margin: 0 0 1rem;
    box-shadow: var(--v2-sh-1);
  }
  body.v2 .tpl-section h3 {
    margin: 0 0 12px;
    font-family: var(--v2-display);
    font-size: clamp(1.1rem, 1.7vw, 1.32rem);
    font-weight: 600;
    color: var(--v2-ink);
  }
  body.v2 .tpl-section--hero {
    background: linear-gradient(165deg, var(--v2-cream-warm) 0%, var(--v2-cream-soft) 100%);
    border-color: rgba(194,105,26,0.18);
  }
  body.v2 .tpl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  body.v2 .tpl-field[hidden] { display: none; }
  body.v2 .tpl-field > span:first-child {
    font-size: 0.84rem; font-weight: 600;
    color: var(--v2-ink);
    letter-spacing: var(--v2-tracking-tight);
  }
  body.v2 .tpl-field small { font-size: 0.78rem; color: var(--v2-mute); }
  body.v2 .tpl-fieldgroup {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-bottom: 12px;
  }
  body.v2 .tpl-fieldgroup--two { grid-template-columns: 1fr 1fr; }
  @media (max-width: 36rem) {
    body.v2 .tpl-fieldgroup--two { grid-template-columns: 1fr; }
  }

  body.v2 details.tpl-advanced {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--v2-cream-soft);
    border: 1px dashed var(--v2-line);
    border-radius: var(--v2-r-sm);
  }
  body.v2 details.tpl-advanced summary {
    cursor: pointer; list-style: none;
    font-size: 0.86rem; font-weight: 600;
    color: var(--v2-ink);
  }
  body.v2 details.tpl-advanced summary::-webkit-details-marker { display: none; }
  body.v2 details.tpl-advanced summary::before { content: "▸ "; color: var(--v2-saffron); }
  body.v2 details.tpl-advanced[open] summary::before { content: "▾ "; }
  body.v2 details.tpl-advanced[open] { padding-bottom: 18px; }

  body.v2 .seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    background: var(--v2-cream-soft);
    border: 1px solid var(--v2-line);
    padding: 4px;
    border-radius: var(--v2-r-md);
  }
  body.v2 .seg input { position: absolute; opacity: 0; pointer-events: none; }
  body.v2 .seg label {
    padding: 8px 14px;
    border-radius: var(--v2-r-sm);
    font-size: 0.86rem; font-weight: 600;
    color: var(--v2-mute);
    cursor: pointer;
    transition: all var(--v2-t-fast) var(--v2-ease);
    line-height: 1.2;
    user-select: none;
  }
  body.v2 .seg label:hover { color: var(--v2-ink); background: rgba(17,16,14,0.04); }
  body.v2 .seg input:checked + label {
    background: var(--v2-ink); color: var(--v2-amber-light);
    box-shadow: var(--v2-sh-1);
  }

  body.v2 .ctype-toggle {
    display: grid; gap: 12px;
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 36rem) { body.v2 .ctype-toggle { grid-template-columns: 1fr; } }
  body.v2 .ctype-toggle__opt { cursor: pointer; }
  body.v2 .ctype-toggle__opt input { position: absolute; opacity: 0; pointer-events: none; }
  body.v2 .ctype-toggle__card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px;
    background: var(--v2-surface);
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    transition: border-color var(--v2-t-fast) var(--v2-ease), box-shadow var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .ctype-toggle__opt input:checked + .ctype-toggle__card {
    border-color: var(--v2-saffron);
    background: var(--v2-cream-soft);
    box-shadow: 0 0 0 3px rgba(194,105,26,0.12);
  }
  body.v2 .ctype-toggle__icon { color: var(--v2-saffron); font-size: 1.2rem; }
  body.v2 .ctype-toggle__title { font-family: var(--v2-display); font-size: 1.1rem; font-weight: 600; }
  body.v2 .ctype-toggle__sub { font-size: 0.82rem; color: var(--v2-mute); line-height: 1.4; }

  body.v2 .lang-mode-picker {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  body.v2 .lang-mode-opt { cursor: pointer; }
  body.v2 .lang-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
  body.v2 .lang-mode-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 12px;
    background: var(--v2-surface);
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    text-align: center;
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .lang-mode-opt input:checked + .lang-mode-card {
    border-color: var(--v2-saffron);
    background: var(--v2-cream-soft);
  }
  body.v2 .lang-mode-card__flag { font-size: 1.4rem; }
  body.v2 .lang-mode-card__title { font-weight: 600; font-size: 0.94rem; }
  body.v2 .lang-mode-card__sub { font-size: 0.74rem; color: var(--v2-mute); }

  body.v2 .stepper {
    display: inline-flex; align-items: center; gap: 0;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    background: var(--v2-cream-soft);
    overflow: hidden;
  }
  body.v2 .stepper__btn {
    width: 36px; height: 40px;
    border: 0; background: transparent;
    font-size: 1.1rem; font-weight: 700;
    color: var(--v2-ink);
    cursor: pointer;
  }
  body.v2 .stepper__btn:hover { background: rgba(17,16,14,0.06); }
  body.v2 .stepper input {
    width: 56px !important; text-align: center;
    border: 0 !important; background: transparent !important;
    min-height: 40px !important; padding: 0 !important;
    font-variant-numeric: tabular-nums; font-weight: 600;
  }

  body.v2 .tpl-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--v2-cream-soft);
    border: 1px dashed var(--v2-line);
    border-radius: var(--v2-r-sm);
    cursor: pointer;
  }
  body.v2 .tpl-toggle input[type="checkbox"] { width: auto; min-height: 0; height: 18px; margin: 0; }
  body.v2 .tpl-toggle__title { font-weight: 600; font-size: 0.9rem; }
  body.v2 .tpl-toggle__hint { font-size: 0.78rem; color: var(--v2-mute); display: block; margin-top: 2px; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  COLOR PICKER — color-pair + WHEEL                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .color-pair {
    display: flex; align-items: center; gap: 10px;
    padding: 6px;
    background:
      conic-gradient(rgba(17,16,14,0.06) 25%, transparent 25%, transparent 50%, rgba(17,16,14,0.06) 50%, rgba(17,16,14,0.06) 75%, transparent 75%) 0 0/14px 14px,
      var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    min-height: 56px;
    position: relative;
  }
  body.v2 .color-pair input[type="color"] {
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xs);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
  }
  body.v2 .color-pair input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
  body.v2 .color-pair input[type="color"]::-moz-color-swatch    { border: 0; border-radius: 4px; }
  /* Hide native input when wheel is enabled */
  body.v2 .color-pair.has-wheel input[type="color"] { display: none; }
  body.v2 .color-pair__value {
    font-family: var(--v2-mono);
    font-size: 0.82rem;
    color: var(--v2-ink);
    font-weight: 600;
    letter-spacing: 0.06em;
    background: var(--v2-surface);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--v2-line);
  }
  body.v2 .cw-trigger {
    width: 44px; height: 44px;
    border: 1px solid var(--v2-line);
    border-radius: 50%;
    background:
      radial-gradient(circle at center, #fff 0%, transparent 35%),
      conic-gradient(from 0deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--v2-sh-1);
    transition: transform var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .cw-trigger:hover { transform: scale(1.05); }
  body.v2 .cw-trigger::after {
    content: "";
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: var(--cw-current, #000);
    box-shadow: inset 0 0 0 2px var(--v2-surface);
  }

  body.v2 .cw-popover {
    position: absolute; z-index: 300;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    box-shadow: var(--v2-sh-4);
    padding: 14px;
    width: 16rem;
    display: flex; flex-direction: column; gap: 10px;
  }
  body.v2 .cw-popover[hidden] { display: none; }
  body.v2 .cw-canvas-wrap {
    position: relative;
    width: 14rem; height: 14rem;
    align-self: center;
  }
  body.v2 .cw-canvas {
    width: 100%; height: 100%;
    cursor: crosshair;
    border-radius: 50%;
    display: block;
  }
  body.v2 .cw-dot {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  body.v2 .cw-light {
    width: 100%;
    accent-color: var(--v2-saffron);
  }
  body.v2 .cw-row {
    display: flex; align-items: center; gap: 10px;
  }
  body.v2 .cw-preview {
    width: 36px; height: 36px;
    border-radius: var(--v2-r-xs);
    border: 1px solid var(--v2-line);
    background-image:
      conic-gradient(rgba(17,16,14,0.06) 25%, transparent 25%, transparent 50%, rgba(17,16,14,0.06) 50%, rgba(17,16,14,0.06) 75%, transparent 75%);
    background-size: 12px 12px;
    background-color: var(--v2-surface);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  body.v2 .cw-preview::after {
    content: ""; position: absolute; inset: 0;
    background: var(--cw-preview, #000);
  }
  body.v2 .cw-hex {
    font-family: var(--v2-mono);
    font-size: 0.86rem;
    color: var(--v2-ink);
    background: var(--v2-cream-soft);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xs);
    padding: 6px 10px;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-height: 0;
  }
  body.v2 .cw-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
  }
  body.v2 .cw-swatch {
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    padding: 0;
  }
  body.v2 .cw-swatch:hover { transform: scale(1.1); border-color: var(--v2-ink); }
  body.v2 .cw-close {
    background: var(--v2-ink); color: var(--v2-amber-light);
    border: 0; border-radius: var(--v2-r-sm);
    padding: 7px 12px; font-size: 0.84rem; font-weight: 600;
    cursor: pointer; align-self: flex-end;
  }
  body.v2 .cw-label { font-size: 0.74rem; font-weight: 600; color: var(--v2-mute); letter-spacing: 0.06em; text-transform: uppercase; }
  body.v2 .cw-backdrop {
    position: fixed; inset: 0;
    background: rgba(10,10,12,0.6);
    z-index: 299;
    backdrop-filter: blur(4px);
  }
  body.v2 .cw-backdrop[hidden] { display: none; }
  @media (max-width: 40rem) {
    body.v2 .cw-popover[data-modal] {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 22rem);
      max-height: 90vh;
      overflow: auto;
    }
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  COLOR-PACK swatches                                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .color-packs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 10px;
  }
  body.v2 .color-pack {
    background: transparent; border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: 8px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 8px;
    text-align: center;
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .color-pack:hover { transform: translateY(-2px); box-shadow: var(--v2-sh-2); border-color: var(--v2-saffron); }
  body.v2 .color-pack__swatch {
    aspect-ratio: 16 / 10;
    border-radius: var(--v2-r-xs);
    position: relative;
    display: flex; align-items: flex-end; justify-content: center; gap: 4px;
    padding: 8px;
  }
  body.v2 .color-pack__dot { width: 7px; height: 7px; border-radius: 50%; }
  body.v2 .color-pack__name { font-size: 0.78rem; font-weight: 600; color: var(--v2-ink); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  STAMP GRID + LOGO UPLOADER                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .stamp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
    gap: 8px;
    background: var(--v2-cream-soft);
    padding: 10px;
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-line);
  }
  body.v2 .stamp-grid input { position: absolute; opacity: 0; pointer-events: none; }
  body.v2 .stamp-grid__opt {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xs);
    cursor: pointer;
    color: var(--v2-ink);
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .stamp-grid__opt:hover { border-color: var(--v2-saffron); }
  body.v2 .stamp-grid input:checked + .stamp-grid__opt {
    background: var(--v2-ink); color: var(--v2-amber-light);
    border-color: var(--v2-ink);
  }
  body.v2 .shape-preview {
    width: 22px; height: 22px;
    background: currentColor;
    display: inline-block;
  }
  body.v2 .shape-preview.shape-circle  { border-radius: 50%; }
  body.v2 .shape-preview.shape-square  { border-radius: 3px; }
  body.v2 .shape-preview.shape-heart   { clip-path: polygon(50% 90%, 5% 45%, 5% 25%, 22% 10%, 50% 28%, 78% 10%, 95% 25%, 95% 45%); }
  body.v2 .shape-preview.shape-star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  body.v2 .shape-preview.shape-diamond { transform: rotate(45deg); border-radius: 2px; }
  body.v2 .shape-preview.shape-flower  { clip-path: polygon(50% 0%, 65% 25%, 95% 25%, 75% 50%, 95% 75%, 65% 75%, 50% 100%, 35% 75%, 5% 75%, 25% 50%, 5% 25%, 35% 25%); }
  body.v2 .shape-preview.shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
  body.v2 .shape-preview.shape-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
  body.v2 .shape-preview.shape-drop    { border-radius: 50% 50% 50% 0; transform: rotate(45deg); }
  body.v2 .shape-preview.shape-bubble  { border-radius: 60% 40% 50% 50%; }

  body.v2 .logo-uploader {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
  }
  body.v2 .logo-uploader__preview {
    width: 96px; height: 96px;
    border-radius: var(--v2-r-md);
    background: var(--v2-cream-soft);
    border: 1px dashed var(--v2-line);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  body.v2 .logo-uploader__preview img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .logo-uploader__placeholder { font-family: var(--v2-display); font-size: 2rem; font-weight: 600; color: var(--v2-mute); }
  body.v2 .logo-uploader__body { display: flex; flex-direction: column; gap: 8px; }
  body.v2 .logo-uploader__title { font-weight: 600; font-size: 0.94rem; }
  body.v2 .logo-uploader__hint  { font-size: 0.8rem; color: var(--v2-mute); }
  body.v2 .logo-uploader__actions { display: flex; gap: 6px; flex-wrap: wrap; }
  body.v2 .logo-uploader__chip { font-size: 0.72rem; color: var(--v2-mute); display: none; }
  body.v2 .logo-uploader__name { font-size: 0.78rem; }
  body.v2 .logo-uploader__tolerance { display: flex; flex-direction: column; gap: 4px; }
  @media (max-width: 30rem) { body.v2 .logo-uploader { grid-template-columns: 1fr; } body.v2 .logo-uploader__preview { width: 100%; aspect-ratio: 1; height: auto; } }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  QTPL grid                                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .qtpl-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
  body.v2 .qtpl {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    border-radius: var(--v2-r-md);
    transition: transform var(--v2-t-fast) var(--v2-ease), box-shadow var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .qtpl:hover { transform: translateY(-3px); box-shadow: var(--v2-sh-3); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  AW-MINI (preview card)                                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .aw-mini {
    aspect-ratio: 5 / 8;
    border-radius: 14px;
    color: #fff;
    overflow: hidden;
    position: relative;
    padding: 14px 14px 10px;
    display: flex; flex-direction: column; gap: 8px;
    font-family: var(--v2-sans);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  body.v2 .aw-mini--preview {
    /* Width-driven, height derives from aspect-ratio 5/8.
       Capped so a 70vh check ensures it never crops in the sticky pane. */
    width: 100%;
    max-width: min(100%, calc(70vh * 5 / 8));
    margin: 0 auto;
  }
  /* Live preview barcode/QR — slightly bigger than gallery thumbs but bounded */
  body.v2 .aw-mini--preview .aw-mini__barcode { padding: 6px; border-radius: 8px; flex-shrink: 0; }
  body.v2 .aw-mini--preview .aw-mini__qr { width: clamp(180px, 70%, 320px); height: auto; aspect-ratio: 1; }
  /* Stamps area: stays square cells, but the WHOLE area scales down via JS-set var */
  body.v2 .aw-mini--preview .aw-mini__auxiliary { min-height: 0; overflow: hidden; }
  body.v2 .aw-mini--preview .aw-mini__stamps { min-height: 0; }
  body.v2 .aw-mini__shine {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,0.14), transparent 55%);
  }
  body.v2 .aw-mini__header {
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
    position: relative; z-index: 1;
  }
  body.v2 .aw-mini__logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  body.v2 .aw-mini__logo:empty { display: none; }
  body.v2 .aw-mini__logo img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .aw-mini__org { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.92; line-height: 1.15; }
  body.v2 .aw-mini__member { text-align: right; }
  body.v2 .aw-mini__label { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; opacity: 0.55; text-transform: uppercase; }
  body.v2 .aw-mini__value { font-size: 0.7rem; font-weight: 600; }
  body.v2 .aw-mini__strip { flex: 0 0 auto; height: 1px; background: rgba(255,255,255,0.14); margin: 2px 0; }
  body.v2 .aw-mini__strip[style*="background-image"] {
    flex: 0 0 auto;
    /* Match Apple Wallet's real strip aspect (1125 × 432 ≈ 2.6:1) so the
       contained PNG fills the box edge-to-edge with no letterbox gaps. */
    height: auto; aspect-ratio: 1125 / 432;
    background-color: transparent;
    /* Edge-to-edge — cancel the parent .aw-mini padding (14px) so the banner
       extends to the card sides, matching real Apple Wallet strip rendering. */
    margin: 0 -14px;
    width: calc(100% + 28px);
    border-radius: 0;
    display: flex; align-items: flex-start; justify-content: flex-start;
    position: relative;
    padding: 0.35rem 0.6rem;
  }
  /* Points number overlaid on banner strip — Apple Wallet primary field style (top-left).
     Forced WHITE to match Apple's actual renderer (which ignores foregroundColor
     when a strip image is present and uses white-with-shadow for legibility). */
  body.v2 .aw-mini__big--overlay {
    position: relative; z-index: 2;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 6px rgba(0,0,0,0.45);
    font-size: 1.25rem; font-weight: 800;
    line-height: 1;
  }
  /* Non-banner strip stays 1px line, hide the overlay big number container there */
  body.v2 .aw-mini__strip:not([style*="background-image"]) .aw-mini__big--overlay { display: none !important; }
  /* Rewards menu — horizontal row, one column per reward (max 4) */
  body.v2 .aw-mini__auxiliary--menu {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: space-between;
  }
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward {
    flex: 1 1 0; min-width: 0;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 0.1rem;
  }
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward .aw-mini__value {
    text-align: left !important; flex: 0 0 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
  }
  /* 3rd of 3 → right-aligned; middle stays default; first stays left.
     Works for 2 (left + right) and 4 (all left, evenly spaced). */
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(2):nth-last-child(1) .aw-mini__label,
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(2):nth-last-child(1) .aw-mini__value,
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(3):nth-last-child(1) .aw-mini__label,
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(3):nth-last-child(1) .aw-mini__value {
    text-align: right !important;
  }
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(2):nth-last-child(2) .aw-mini__label,
  body.v2 .aw-mini__auxiliary--menu .aw-mini__field--reward:nth-child(2):nth-last-child(2) .aw-mini__value {
    text-align: center !important;
  }
  body.v2 .aw-mini__secondary { position: relative; z-index: 1; }
  body.v2 .aw-mini__auxiliary { position: relative; z-index: 1; }
  body.v2 .aw-mini__field--full { width: 100%; }
  body.v2 .aw-mini__stamps {
    display: grid; gap: 3px 4px;
    grid-template-columns: repeat(var(--per-row, 10), minmax(0, 1fr));
  }
  body.v2 .aw-mini__stamp {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.2);
    min-width: 0;
    box-sizing: border-box;
  }
  /* Icon stamps: the SVG IS the stamp — no disc, no border. */
  body.v2 .aw-mini__stamp.aw-mini__stamp--icon {
    background: transparent !important;
    border: 0 !important;
    display: flex; align-items: center; justify-content: center;
  }
  body.v2 .aw-mini__stamp--icon > svg { width: 100%; height: 100%; display: block; }
  body.v2 .aw-mini__stamp--circle  { border-radius: 50%; }
  body.v2 .aw-mini__stamp--square  { border-radius: 2px; }
  body.v2 .aw-mini__stamp--heart   { clip-path: polygon(50% 90%, 5% 45%, 5% 25%, 22% 10%, 50% 28%, 78% 10%, 95% 25%, 95% 45%); }
  body.v2 .aw-mini__stamp--star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  body.v2 .aw-mini__stamp--diamond { transform: rotate(45deg); border-radius: 2px; }
  body.v2 .aw-mini__stamp--flower  { clip-path: polygon(50% 0%, 65% 25%, 95% 25%, 75% 50%, 95% 75%, 65% 75%, 50% 100%, 35% 75%, 5% 75%, 25% 50%, 5% 25%, 35% 25%); }
  body.v2 .aw-mini__stamp--hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
  body.v2 .aw-mini__stamp--octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
  body.v2 .aw-mini__stamp--drop    { border-radius: 50% 50% 50% 0; transform: rotate(45deg); }
  body.v2 .aw-mini__stamp--bubble  { border-radius: 60% 40% 50% 50%; }
  body.v2 .aw-mini__big {
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: var(--v2-tracking-tighter);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  body.v2 .aw-mini__unit { font-size: 0.8rem; font-weight: 500; opacity: 0.6; }
  body.v2 .aw-mini__barcode {
    margin-top: auto;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
  }
  body.v2 .aw-mini__qr {
    width: 60px; height: 60px;
    background: #fff url('/img/fake-qr.png') center/contain no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
  body.v2 .aw-mini--font-system     { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.v2 .aw-mini--font-inter      { font-family: Inter, sans-serif; }
  body.v2 .aw-mini--font-poppins    { font-family: Poppins, sans-serif; }
  body.v2 .aw-mini--font-montserrat { font-family: Montserrat, sans-serif; }
  body.v2 .aw-mini--font-playfair   { font-family: "Playfair Display", serif; }
  body.v2 .aw-mini--font-dm-serif   { font-family: "DM Serif Display", serif; }
  body.v2 .aw-mini--font-space-mono { font-family: "Space Mono", monospace; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  POSTER PREVIEW                                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .poster-preview {
    width: 100%; max-width: 18rem;
    margin: 0 auto;
    aspect-ratio: 105 / 148;
    background: #fff;
    color: var(--v2-ink);
    border-radius: var(--v2-r-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--v2-sh-3);
  }
  body.v2 .pp-strip {
    background: var(--pp-primary, var(--v2-ink));
    color: var(--pp-label, #fff);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
  }
  body.v2 .pp-logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 700;
  }
  body.v2 .pp-logo img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .pp-shop__name { font-size: 0.78rem; font-weight: 700; }
  body.v2 .pp-shop__sub  { font-size: 0.62rem; opacity: 0.7; }
  body.v2 .pp-body {
    flex: 1;
    padding: 14px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px;
  }
  body.v2 .pp-headline {
    font-family: var(--v2-display);
    font-size: 1rem; font-weight: 600;
    line-height: 1.1;
    color: var(--v2-ink);
  }
  body.v2 .pp-headline2 { font-size: 0.72rem; color: var(--v2-mute); }
  body.v2 .pp-qr {
    width: 56%; aspect-ratio: 1;
    background: #fff;
    padding: 4px;
    border: 1px solid var(--v2-line);
    border-radius: 6px;
    margin: 4px 0;
  }
  body.v2 .pp-qr .qr-pattern { width: 100%; height: 100%; background:
      radial-gradient(circle at 14% 14%, #000 0 18%, transparent 19%),
      radial-gradient(circle at 86% 14%, #000 0 18%, transparent 19%),
      radial-gradient(circle at 14% 86%, #000 0 18%, transparent 19%),
      repeating-conic-gradient(from 0deg at 50% 50%, #000 0 12deg, transparent 12deg 24deg);
    background-color: #fff;
    background-size: 100% 100%, 100% 100%, 100% 100%, 25% 25%;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat; }
  body.v2 .pp-cta { font-size: 0.74rem; font-weight: 700; color: var(--v2-saffron); }
  body.v2 .pp-sub { font-size: 0.66rem; color: var(--v2-mute); }
  body.v2 .pp-footer-note { font-size: 0.62rem; color: var(--v2-mute); }
  body.v2 .pp-foot {
    background: var(--v2-cream-soft);
    font-family: var(--v2-mono);
    font-size: 0.6rem;
    color: var(--v2-mute);
    padding: 6px 12px;
    text-align: center;
    border-top: 1px solid var(--v2-line);
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FORM ACTIONS — sticky bottom save bar                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .form-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 1rem 0;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 10px;
    box-shadow: var(--v2-sh-2);
  }
  body.v2 .form-actions__primary { flex: 1 1 12rem; }
  body.v2 .form-actions__push    { flex: 0 0 auto; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CUSTOMER /me pages                                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2.v2-customer .v2-hero-warm { padding-top: clamp(1.2rem, 4vw, 2.4rem); }

  body.v2 .me-header-right { display: flex; align-items: center; gap: 12px; }
  body.v2 .me-user-menu { position: relative; }
  body.v2 .me-user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--v2-on-dark);
    padding: 4px 12px 4px 4px;
    border-radius: var(--v2-r-full);
    cursor: pointer;
    font-size: 0.86rem; font-weight: 500;
    transition: background var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .me-user-chip:hover { background: rgba(255,255,255,0.10); }
  body.v2 .me-user-chip__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--v2-amber-light); color: var(--v2-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem;
  }
  body.v2 .me-user-chip__email { font-weight: 500; }
  body.v2 .me-user-chip__caret { opacity: 0.6; transition: transform var(--v2-t-fast) var(--v2-ease); }
  body.v2 .me-user-chip[aria-expanded="true"] .me-user-chip__caret { transform: rotate(180deg); }
  body.v2 .me-user-menu__popup {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--v2-dark);
    border: 1px solid var(--v2-on-dark-line);
    border-radius: var(--v2-r-md);
    padding: 6px;
    min-width: 12rem;
    box-shadow: var(--v2-sh-dark);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--v2-t-fast) var(--v2-ease);
  }
  body.v2 .me-user-menu.is-open .me-user-menu__popup {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  body.v2 .me-user-menu__item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 9px 12px;
    border: 0; background: transparent;
    color: var(--v2-on-dark);
    font-size: 0.88rem;
    border-radius: var(--v2-r-sm);
    cursor: pointer;
    text-decoration: none;
  }
  body.v2 .me-user-menu__item:hover { background: rgba(255,255,255,0.06); color: var(--v2-amber-light); }
  body.v2 .me-user-menu__item--danger { color: #ff9aa6; }
  body.v2 .me-user-menu__icon { width: 18px; display: inline-flex; align-items: center; justify-content: center; }
  @media (max-width: 30rem) { body.v2 .v2-hide-sm { display: none; } }

  body.v2 .me-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }
  /* Each cell is a card + its wallet buttons stacked vertically. */
  @media (min-width: 36rem) { body.v2 .me-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 56rem) { body.v2 .me-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* On true phones make the card slightly less tall so the buttons stay in
     view without scrolling. */
  @media (max-width: 480px) {
    body.v2 .me-card { aspect-ratio: 320 / 420; padding: 16px 16px 12px; }
    body.v2 .me-card__qr { width: 50%; }
    body.v2 .me-card__big { font-size: 2.4rem; }
  }
  body.v2 .me-card-link { text-decoration: none; color: inherit; }
  body.v2 .me-card {
    position: relative;
    aspect-ratio: 320 / 460;
    border-radius: var(--v2-r-lg);
    padding: 18px 18px 14px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 22px 50px -20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    transition: transform var(--v2-t-med) var(--v2-ease), box-shadow var(--v2-t-med) var(--v2-ease);
  }
  body.v2 .me-card:hover { transform: translateY(-4px); box-shadow: 0 32px 70px -20px rgba(0,0,0,0.55); }
  body.v2 .me-card__shine {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,0.16), transparent 55%),
                radial-gradient(80% 80% at 100% 100%, rgba(255,255,255,0.06), transparent 60%);
  }
  body.v2 .me-card__head {
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
  }
  body.v2 .me-card__logo {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.95);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  body.v2 .me-card__logo img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .me-card__name { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.005em; }
  body.v2 .me-card__sub {
    font-size: 0.66rem; opacity: 0.7;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 2px;
  }
  body.v2 .me-card__body {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    position: relative; z-index: 1;
    padding: 16px 0;
  }
  body.v2 .me-card__qr {
    width: 56%; aspect-ratio: 1;
    background: #fff; padding: 8px;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  body.v2 .me-card__qr img { width: 100%; height: 100%; }
  body.v2 .me-card__big {
    font-family: var(--v2-display);
    font-size: 1.8rem; font-weight: 600;
    letter-spacing: var(--v2-tracking-tighter);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  body.v2 .me-card__unit { font-size: 0.8rem; opacity: 0.6; font-weight: 500; }
  body.v2 .me-card__serial {
    font-size: 0.66rem; opacity: 0.55;
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.18);
    position: relative; z-index: 1;
  }
  body.v2 .me-card__serial code { font-family: var(--v2-mono); }
  body.v2 .me-card__foot { margin-top: 8px; position: relative; z-index: 1; }
  body.v2 .me-card__status {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--v2-r-full);
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  body.v2 .me-card__big--flash { animation: v2-flash 700ms var(--v2-ease); }
  @keyframes v2-flash { 0% { transform: scale(1); } 30% { transform: scale(1.1); } 100% { transform: scale(1); } }

  /* Each card-cell holds the visual card AND its wallet buttons as a single
     grid item, so the cards-grid never separates them across columns. */
  body.v2 .me-card-cell {
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
  }
  body.v2 .me-dash-wallet {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0;
  }
  /* When the card supports both languages, 4 wallet buttons show — keep them
     in a 2-col layout (Apple zh + Apple en / Google zh + Google en). */
  body.v2 .me-dash-wallet > * { min-width: 0; }
  /* On phones the dual wallet buttons stack to avoid tiny illegible chips. */
  @media (max-width: 480px) {
    body.v2 .me-dash-wallet { grid-template-columns: 1fr; gap: 8px; }
  }

  /* Apple/Google Wallet buttons.
     - Apple variant: BLACK background, WHITE icon + text (Apple guideline).
     - Google variant: WHITE background, COLORFUL G logo, DARK text (Google guideline).
     Hardcoded so neither cream nor dark theme can flip them. Icons are sized
     so both buttons match visually and the brand mark is dominant. */
  body.v2 .wallet-btn {
    display: inline-flex; align-items: center; gap: 12px;
    background: #000; color: #fff;
    border: 1px solid #000;
    border-radius: 12px;
    padding: 11px 16px;
    text-decoration: none;
    min-height: 52px;
    transition: transform var(--v2-t-fast) var(--v2-ease), box-shadow var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast);
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.55);
  }
  body.v2 .wallet-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.6); background:#0a0a0a; color: #fff; }
  body.v2 .wallet-btn__icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; flex-shrink: 0; width: 28px; height: 28px;
  }
  body.v2 .wallet-btn__icon svg { fill: currentColor; width: 24px; height: 24px; }
  body.v2 .wallet-btn--google .wallet-btn__icon svg { width: 22px; height: 22px; fill: none; }
  body.v2 .wallet-btn__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
  body.v2 .wallet-btn__sub { font-size: 0.66rem; opacity: 0.78; letter-spacing: 0.04em; text-transform: uppercase; }
  body.v2 .wallet-btn__main { font-size: 0.92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Google Wallet — official white pill with crisp grey border */
  /* Google Wallet — dark variant (official Google brand allows both light and
     dark). Matches the Apple Wallet button for visual consistency. */
  body.v2 .wallet-btn--google {
    background: #000; color: #fff; border-color: #000;
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.55);
  }
  body.v2 .wallet-btn--google:hover { background: #1a1a1a; color: #fff; }
  body.v2 .wallet-btn--google .wallet-btn__sub { opacity: 0.78; color: rgba(255,255,255,0.78); }
  /* On dark customer/merchant pages, both wallet buttons get a faint white
     outline so they stand out from the surrounding dark surface. */
  body.v2:is(.v2-merchant, .v2-customer) .wallet-btn {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 8px 22px -10px rgba(0,0,0,0.7);
  }

  /* ─── Danger zone (delete account) ─── */
  body.v2 .danger-zone {
    margin-top: 2rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(229, 60, 90, 0.35);
    border-radius: 14px;
    background: rgba(229, 60, 90, 0.05);
  }
  body.v2 .danger-zone__title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ff9aa6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  body.v2 .danger-zone__hint {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--v2-mute);
    line-height: 1.45;
  }
  body.v2 .btn-danger {
    background: transparent;
    color: #ff9aa6;
    border: 1px solid rgba(229, 60, 90, 0.55);
    padding: 9px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }
  body.v2 .btn-danger:hover {
    background: rgba(229, 60, 90, 0.12);
    border-color: rgba(229, 60, 90, 0.8);
  }
  body.v2 .btn-danger:active { transform: translateY(1px); }
  /* The sm modifier still exists for legacy callers, but kept readable */
  body.v2 .me-wallet__btn--sm { padding: 10px 12px; min-height: 46px; }
  body.v2 .me-wallet__btn--sm .wallet-btn__main { font-size: 0.84rem; }
  body.v2 .me-wallet__btn--sm .wallet-btn__sub  { font-size: 0.62rem; }
  body.v2 .me-wallet__btn--sm .wallet-btn__icon { width: 24px; height: 24px; }
  body.v2 .me-wallet__btn--sm .wallet-btn__icon svg { width: 20px; height: 20px; }

  body.v2 .v2-wallet-stack {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 1.2rem 0;
  }

  body.v2 .me-card-detail {
    position: relative;
    border-radius: var(--v2-r-xl);
    padding: 28px 24px 22px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    margin-top: 1.5rem;
  }
  body.v2 .me-card-detail__head { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
  body.v2 .me-card-detail__head .me-card__logo { width: 44px; height: 44px; }
  body.v2 .me-card-detail__head .me-card__name { font-size: 1.1rem; }
  body.v2 .me-card-detail__body {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 30px 0 10px;
    position: relative; z-index: 1;
  }
  body.v2 .me-card-detail__body .me-card__qr {
    width: 200px; height: 200px; padding: 12px;
    border-radius: 14px;
  }
  body.v2 .me-card-detail__body .me-card__big { font-size: 2.4rem; }

  body.v2 .me-tx-list {
    list-style: none; padding: 0; margin: 1rem 0 0;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
  }
  body.v2 .me-tx-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--v2-line-soft);
    font-size: 0.9rem;
  }
  body.v2 .me-tx-row:first-child { border-top: 0; }
  body.v2 .me-tx-row__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
  }
  body.v2 .me-tx-row--pos .me-tx-row__icon { background: var(--v2-jade-bg); color: var(--v2-jade); }
  body.v2 .me-tx-row--neg .me-tx-row__icon { background: var(--v2-rose-bg); color: var(--v2-rose); }
  body.v2 .me-tx-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  body.v2 .me-tx-row__label { font-weight: 600; color: var(--v2-ink); }
  body.v2 .me-tx-row__meta  { font-size: 0.78rem; color: var(--v2-mute); }
  body.v2 .me-tx-row__delta {
    font-family: var(--v2-mono); font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
  }
  body.v2 .me-tx-row--pos .me-tx-row__delta { color: var(--v2-jade); }
  body.v2 .me-tx-row--neg .me-tx-row__delta { color: var(--v2-rose); }
  body.v2 .me-tx-row__balance { font-size: 0.78rem; color: var(--v2-mute); font-family: var(--v2-mono); }
  body.v2 .me-tx-empty {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--v2-surface);
    border: 1px dashed var(--v2-line);
    border-radius: var(--v2-r-lg);
    color: var(--v2-mute);
  }

  body.v2 .v2-branded-hero {
    padding: clamp(2rem, 5vw, 3.4rem) clamp(1rem, 3vw, 2rem) clamp(1.4rem, 4vw, 2rem);
    position: relative;
    color: #fff;
    text-align: center;
  }
  body.v2 .v2-branded-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 12px 0 6px;
  }
  body.v2 .v2-branded-hero .v2-lead { font-size: 1rem; opacity: 0.85; color: #fff; margin: 0; }
  body.v2 .v2-logo {
    width: 64px; height: 64px;
    background: rgba(255,255,255,0.95);
    border-radius: var(--v2-r-md);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto;
    overflow: hidden;
  }
  body.v2 .v2-logo img { width: 100%; height: 100%; object-fit: contain; }
  body.v2 .v2-lang {
    display: inline-flex; gap: 0;
    background: rgba(255,255,255,0.1);
    border-radius: var(--v2-r-full);
    padding: 3px;
    margin: 0 auto 18px;
  }
  body.v2 .v2-lang a {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem; font-weight: 600;
    padding: 5px 12px; border-radius: var(--v2-r-full);
  }
  body.v2 .v2-lang a.is-active { background: #c2410c; color: #fff; }

  body.v2 .v2-enroll-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xl);
    padding: clamp(20px, 4vw, 32px);
    margin: -2rem auto 2rem;
    max-width: 32rem;
    box-shadow: var(--v2-sh-3);
    position: relative;
    z-index: 2;
  }
  body.v2 .v2-success-card { text-align: center; }
  body.v2 .v2-success-glyph {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-jade) 0%, #1c4831 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 0 1rem;
    box-shadow: 0 14px 32px -8px rgba(42,107,74,0.45);
  }
  body.v2 .v2-feature-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 2rem auto;
    max-width: 32rem;
  }
  body.v2 .v2-feature {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 16px;
  }
  body.v2 .v2-feature h3 { font-size: 0.96rem; margin: 8px 0 4px; }
  body.v2 .v2-feature-icon {
    width: 32px; height: 32px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-amber-light);
    color: var(--v2-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
  }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DASHBOARD pages                                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  body.v2 .activity-totals {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-bottom: 1.4rem;
  }
  body.v2 .activity-stat {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 14px 18px;
  }
  body.v2 .activity-stat__num {
    font-family: var(--v2-display);
    font-size: 1.6rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--v2-ink);
  }
  body.v2 .activity-stat__lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-mute); margin-top: 6px; }
  body.v2 .activity-stat--positive .activity-stat__num { color: var(--v2-jade); }
  body.v2 .activity-stat--negative .activity-stat__num { color: var(--v2-rose); }

  body.v2 .activity-table-wrap { overflow-x: auto; border-radius: var(--v2-r-lg); border: 1px solid var(--v2-line); background: var(--v2-surface); }
  body.v2 .activity-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
  body.v2 .activity-table th {
    background: var(--v2-cream-soft);
    text-align: left;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--v2-mute);
    padding: 12px 14px;
    border-bottom: 1px solid var(--v2-line);
  }
  body.v2 .activity-table th.num, body.v2 .activity-table td.num { text-align: right; }
  body.v2 .activity-table td {
    padding: 12px 14px;
    border-top: 1px solid var(--v2-line-soft);
    color: var(--v2-ink);
  }
  body.v2 .activity-table tbody tr:hover { background: var(--v2-cream-soft); }
  body.v2 .activity-table .ts { font-family: var(--v2-mono); font-size: 0.82rem; color: var(--v2-mute); }
  body.v2 .activity-table .delta--pos { color: var(--v2-jade); font-weight: 700; }
  body.v2 .activity-table .delta--neg { color: var(--v2-rose); font-weight: 700; }
  body.v2 .activity-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--v2-surface);
    border: 1px dashed var(--v2-line);
    border-radius: var(--v2-r-lg);
  }
  body.v2 .staff-name { font-weight: 600; }
  body.v2 .staff-role { background: var(--v2-cream-soft); padding: 2px 7px; border-radius: var(--v2-r-full); font-size: 0.7rem; font-weight: 600; }

  body.v2 .data-table, body.v2 .table {
    width: 100%; border-collapse: collapse; font-size: 0.9rem;
  }
  body.v2 .data-table th, body.v2 .table th {
    background: var(--v2-cream-soft);
    text-align: left;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--v2-mute);
    padding: 12px 14px;
    border-bottom: 1px solid var(--v2-line);
  }
  body.v2 .data-table td, body.v2 .table td {
    padding: 12px 14px;
    border-top: 1px solid var(--v2-line-soft);
    color: var(--v2-ink);
  }
  body.v2 .data-table th.num, body.v2 .data-table td.num,
  body.v2 .table th.num, body.v2 .table td.num { text-align: right; font-variant-numeric: tabular-nums; }

  body.v2 .range-tabs {
    display: inline-flex; gap: 4px;
    background: var(--v2-cream-soft);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 4px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  body.v2 .range-tab {
    padding: 7px 12px;
    border-radius: var(--v2-r-sm);
    font-size: 0.82rem; font-weight: 600;
    color: var(--v2-mute);
  }
  body.v2 .range-tab.is-active { background: var(--v2-ink); color: var(--v2-amber-light); }
  body.v2 .range-tab:hover:not(.is-active) { background: rgba(17,16,14,0.04); color: var(--v2-ink); }

  body.v2 .stats-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-bottom: 1.4rem;
  }
  body.v2 .stat-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 14px;
  }
  body.v2 .stat-card__lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-mute); margin-bottom: 8px; }
  body.v2 .stat-card__val { font-family: var(--v2-display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--v2-ink); line-height: 1.05; }

  body.v2 .chart-wrap { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); padding: 14px; height: 18rem; }

  body.v2 .heatmap { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
  body.v2 .heatmap__hdr, body.v2 .heatmap__row {
    display: grid;
    grid-template-columns: 3rem repeat(24, minmax(0.9rem, 1fr));
    gap: 2px;
    align-items: center;
  }
  body.v2 .heatmap__day, body.v2 .heatmap__hour {
    font-size: 0.66rem;
    color: var(--v2-mute);
    text-align: center;
    font-weight: 600;
  }
  body.v2 .heatmap__day { text-align: right; padding-right: 6px; }
  body.v2 .heatmap__cell {
    aspect-ratio: 1; border-radius: 2px;
    background: rgba(194,105,26,0.08);
  }

  body.v2 .billing-plan-card {
    background: linear-gradient(165deg, var(--v2-cream-soft) 0%, var(--v2-cream-warm) 100%);
    border: 1px solid rgba(194,105,26,0.2);
    border-radius: var(--v2-r-xl);
    padding: clamp(20px, 3vw, 28px);
    box-shadow: var(--v2-sh-2);
  }
  body.v2 .billing-plan-card__head { margin-bottom: 1rem; }
  body.v2 .billing-plan-card__title { font-size: 1.6rem; margin: 8px 0 4px; }
  body.v2 .billing-plan-card__badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--v2-r-full);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--v2-jade-bg); color: var(--v2-jade);
    border: 1px solid rgba(42,107,74,0.25);
  }
  body.v2 .billing-plan-card__badge--trial    { background: rgba(240,200,120,0.18); color: #6b4a08; border-color: rgba(240,200,120,0.4); }
  body.v2 .billing-plan-card__badge--past_due { background: var(--v2-rose-bg); color: var(--v2-rose); border-color: rgba(154,52,18,0.25); }
  body.v2 .billing-plan-card__lead { font-size: 1.1rem; color: var(--v2-ink-soft); }
  body.v2 .billing-stats {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    margin: 1.2rem 0;
  }
  body.v2 .billing-stat__num {
    font-family: var(--v2-display);
    font-size: 1.6rem; font-weight: 600;
    color: var(--v2-ink); line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  body.v2 .billing-stat__lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-mute); margin-top: 4px; }
  body.v2 .billing-progress {
    background: rgba(17,16,14,0.08);
    height: 8px; border-radius: var(--v2-r-full);
    overflow: hidden;
  }
  body.v2 .billing-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--v2-saffron) 0%, var(--v2-amber) 100%);
    border-radius: var(--v2-r-full);
    transition: width var(--v2-t-slow) var(--v2-ease);
  }

  /* Clear separation between the active-plan hero and the "choose a plan"
     section — without this the featured ribbon (top:-10px) overlapped the
     subscription box above. */
  body.v2 .billing-hero { margin-bottom: 2.75rem; }
  body.v2 .billing-plans { margin-top: 2.75rem; padding-top: 0.5rem; }
  body.v2 .billing-plans > .h-md { margin-bottom: 2px; }
  body.v2 .billing-plans-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 1.75rem 0 0;
    padding-top: 12px; /* room for the featured plan's ribbon */
  }
  body.v2 .billing-plan {
    min-width: 0;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: 24px 22px;
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .25s var(--v2-ease, ease), box-shadow .25s var(--v2-ease, ease), border-color .25s var(--v2-ease, ease);
  }
  body.v2 .billing-plan:hover { transform: translateY(-3px); box-shadow: var(--v2-sh-3); border-color: rgba(194,105,26,0.32); }
  body.v2 .billing-plan.is-featured {
    border-color: var(--v2-saffron);
    box-shadow: var(--v2-sh-2);
    background: linear-gradient(180deg, var(--v2-surface) 0%, var(--v2-cream-soft) 100%);
  }
  body.v2 .billing-plan.is-current { background: var(--v2-cream-soft); border-color: rgba(42,107,74,0.4); }
  body.v2 .billing-plan__ribbon {
    position: absolute; top: -11px; left: 22px;
    background: var(--v2-saffron); color: #fff;
    padding: 4px 13px;
    border-radius: var(--v2-r-full);
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: var(--v2-sh-1);
  }
  body.v2 .billing-plan__current {
    position: absolute; top: 14px; right: 16px;
    color: var(--v2-jade); font-size: 0.66rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  }
  body.v2 .billing-plan__head { display: flex; flex-direction: column; gap: 2px; }
  body.v2 .billing-plan__name { font-family: var(--v2-display); font-size: 1.3rem; font-weight: 600; color: var(--v2-ink); }
  body.v2 .billing-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; margin-top: 8px; min-width: 0; max-width: 100%; }
  body.v2 .billing-plan__amount { font-family: var(--v2-display); font-size: clamp(1.55rem, 3.2vw, 2.1rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--v2-ink); line-height: 1.05; overflow-wrap: anywhere; }
  body.v2 .billing-plan__freq { font-size: 0.8rem; color: var(--v2-mute); margin-left: 2px; white-space: nowrap; }
  body.v2 .billing-plan__features { list-style: none; padding: 0; margin: 2px 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; color: var(--v2-ink-soft); flex: 1 1 auto; }
  body.v2 .billing-plan__features li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
  body.v2 .billing-plan__features svg { color: var(--v2-jade); flex-shrink: 0; margin-top: 3px; }
  body.v2 .billing-plan .btn-block { margin-top: 4px; }

  /* Invoices — aligned table on desktop, stacked cards on mobile (no h-scroll). */
  body.v2 .billing-invoices__list { padding: 0; overflow: hidden; }
  body.v2 .inv-row {
    display: grid;
    grid-template-columns: 120px 1fr 130px 92px 72px;
    gap: 14px; align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--v2-line-soft);
    font-size: 0.9rem;
  }
  body.v2 .inv-row:first-child { border-top: 0; }
  body.v2 .inv-row__num { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--v2-mute); }
  body.v2 .inv-row__amount { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  body.v2 .inv-row__action { text-align: right; }
  body.v2 .inv-row__action a { color: var(--v2-saffron); font-size: .82rem; text-decoration: none; font-weight: 600; white-space: nowrap; }
  body.v2 .inv-row__action a:hover { text-decoration: underline; }
  body.v2 .inv-badge {
    display: inline-block;
    font-size: .68rem; padding: 3px 9px; border-radius: var(--v2-r-full);
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  }
  body.v2 .inv-badge--paid  { background: var(--v2-jade-bg); color: var(--v2-jade); }
  body.v2 .inv-badge--open  { background: rgba(194,105,26,0.12); color: var(--v2-saffron); }
  body.v2 .inv-badge--other { background: rgba(245,158,11,0.16); color: #9a6a08; }
  @media (max-width: 640px) {
    body.v2 .inv-row {
      grid-template-columns: 1fr auto;
      grid-template-areas: "date amount" "num status" "action action";
      row-gap: 6px; column-gap: 12px; padding: 14px 16px;
    }
    body.v2 .inv-row__date   { grid-area: date; font-weight: 600; }
    body.v2 .inv-row__amount { grid-area: amount; }
    body.v2 .inv-row__num    { grid-area: num; }
    body.v2 .inv-row__status { grid-area: status; justify-self: start; }
    body.v2 .inv-row__action { grid-area: action; text-align: left; padding-top: 2px; }
  }
  /* Mobile polish for the rest of the billing page. */
  @media (max-width: 560px) {
    body.v2 .billing-hero { margin-bottom: 2rem; }
    body.v2 .billing-plans { margin-top: 2rem; }
    body.v2 .billing-plan-card__title { font-size: 1.35rem; }
    body.v2 .billing-subscription .card { padding: 16px !important; }
  }

  /* ===================== Billing — redesigned hero (bx-) ===================== */
  body.v2 .bx-hero {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 286px);
    gap: clamp(16px, 3vw, 32px);
    background: linear-gradient(150deg, var(--v2-cream-soft) 0%, var(--v2-cream-warm) 100%);
    border: 1px solid rgba(194,105,26,0.18);
    border-radius: var(--v2-r-xl, 28px);
    padding: clamp(22px, 3.5vw, 38px);
    box-shadow: var(--v2-sh-2);
    margin-bottom: 1.25rem;
  }
  body.v2 .bx-hero__plan { display: flex; flex-direction: column; }
  body.v2 .bx-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  body.v2 .bx-badge {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--v2-r-full); border: 1px solid transparent;
  }
  body.v2 .bx-badge--active    { background: var(--v2-jade-bg); color: var(--v2-jade); border-color: rgba(42,107,74,0.25); }
  body.v2 .bx-badge--trial     { background: rgba(240,200,120,0.22); color: #6b4a08; border-color: rgba(240,200,120,0.5); }
  body.v2 .bx-badge--past_due  { background: var(--v2-rose-bg, rgba(154,52,18,0.12)); color: var(--v2-rose, #9a3412); border-color: rgba(154,52,18,0.25); }
  body.v2 .bx-badge--cancelled,
  body.v2 .bx-badge--suspended { background: rgba(17,16,14,0.07); color: var(--v2-mute); }
  body.v2 .bx-trial-pill { font-size: .78rem; color: var(--v2-ink-soft); background: rgba(255,255,255,0.55); border: 1px solid var(--v2-line); padding: 4px 11px; border-radius: var(--v2-r-full); }
  body.v2 .bx-trial-pill strong { color: var(--v2-saffron); }
  body.v2 .bx-hero__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v2-mute); margin: 0 0 4px; }
  body.v2 .bx-hero__name { font-family: var(--v2-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.04; color: var(--v2-ink); margin: 0; }
  body.v2 .bx-hero__sub { margin: 10px 0 0; font-size: .9rem; max-width: 44ch; }
  body.v2 .bx-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 20px; }
  body.v2 .bx-btn-danger { color: var(--v2-rose, #9a3412) !important; }

  body.v2 .bx-usage {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: var(--v2-surface); border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg); padding: 22px;
  }
  body.v2 .bx-ring {
    --pct: 0;
    width: 150px; height: 150px; border-radius: 50%;
    background: conic-gradient(var(--v2-saffron) calc(var(--pct) * 1%), rgba(17,16,14,0.07) 0);
    display: grid; place-items: center;
    transition: background .7s var(--v2-ease, ease);
  }
  body.v2 .bx-ring__inner {
    width: 116px; height: 116px; border-radius: 50%;
    background: var(--v2-surface);
    display: grid; place-items: center; align-content: center; text-align: center;
    box-shadow: inset 0 1px 3px rgba(17,16,14,0.08);
  }
  body.v2 .bx-ring__num { font-family: var(--v2-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
  body.v2 .bx-ring__lbl { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-mute); margin-top: 5px; }
  body.v2 .bx-usage__legend { display: flex; gap: 28px; }
  body.v2 .bx-usage__cell { text-align: center; }
  body.v2 .bx-usage__k { display: block; font-family: var(--v2-display); font-size: 1.2rem; font-weight: 600; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
  body.v2 .bx-usage__k--jade { color: var(--v2-jade); }
  body.v2 .bx-usage__l { display: block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-mute); margin-top: 2px; }

  body.v2 .bx-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 2.75rem; }
  body.v2 .bx-notes:empty { display: none; margin: 0; }
  body.v2 .bx-flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--v2-r-md, 14px); font-size: .9rem; line-height: 1.45; border: 1px solid transparent; }
  body.v2 .bx-flash svg { flex-shrink: 0; margin-top: 2px; }
  body.v2 .bx-flash--ok   { background: var(--v2-jade-bg); color: var(--v2-jade); border-color: rgba(42,107,74,0.25); }
  body.v2 .bx-flash--info { background: rgba(99,102,241,0.10); color: #4f46e5; border-color: rgba(99,102,241,0.22); }
  body.v2 .bx-flash--warn { background: rgba(240,160,40,0.14); color: #9a6a08; border-color: rgba(240,160,40,0.32); }
  body.v2 .bx-flash--soft { background: rgba(17,16,14,0.04); color: var(--v2-ink-soft); }
  body.v2 .bx-resume { margin-left: 6px; color: var(--v2-saffron); text-decoration: underline; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }

  @media (max-width: 720px) {
    body.v2 .bx-hero { grid-template-columns: 1fr; }
    body.v2 .bx-usage { flex-direction: row; justify-content: space-around; }
    body.v2 .bx-usage__legend { flex-direction: column; gap: 12px; }
  }
  @media (max-width: 430px) {
    body.v2 .bx-usage { flex-direction: column; gap: 16px; }
    body.v2 .bx-usage__legend { flex-direction: row; gap: 24px; }
  }

  /* Billing-interval toggle (Monthly / 6 months -15%). */
  body.v2 .bx-interval { display: inline-flex; gap: 4px; background: rgba(17,16,14,0.05); border: 1px solid var(--v2-line); border-radius: var(--v2-r-full); padding: 4px; margin: 6px 0 20px; }
  body.v2 .bx-interval__opt { border: 0; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--v2-mute); padding: 7px 16px; border-radius: var(--v2-r-full); transition: background .2s var(--v2-ease, ease), color .2s; }
  body.v2 .bx-interval__opt.is-active { background: var(--v2-surface); color: var(--v2-ink); box-shadow: var(--v2-sh-1); }

  /* Cohesive section headings across the whole billing page. */
  body.v2 .billing-plans > .h-md,
  body.v2 .billing-subscription > .h-md,
  body.v2 .billing-invoices .h-md {
    font-family: var(--v2-display); font-size: 1.35rem; font-weight: 600; color: var(--v2-ink);
  }
  body.v2 .billing-subscription { margin-top: 2.75rem; }

  body.v2 .billing-admin-log, body.v2 .billing-help, body.v2 .billing-invoices { margin-top: 2rem; padding: 1.4rem; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); }
  body.v2 .admin-log-row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--v2-line-soft); flex-wrap: wrap; font-size: 0.88rem; }
  body.v2 .admin-log-row:first-child { border-top: 0; }
  body.v2 .admin-log-row__time { color: var(--v2-mute); font-family: var(--v2-mono); font-size: 0.78rem; }
  body.v2 .admin-log-row__action { font-weight: 600; }

  body.v2 .shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1rem; }
  body.v2 .shop-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
  }
  body.v2 .shop-card--default { border-color: var(--v2-saffron); background: var(--v2-cream-soft); }
  body.v2 .shop-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  body.v2 .shop-card__head h4 { font-family: var(--v2-display); font-size: 1.05rem; }
  body.v2 .shop-card__addr   { font-size: 0.88rem; color: var(--v2-ink-soft); }
  body.v2 .shop-card__meta   { font-size: 0.82rem; color: var(--v2-mute); }
  body.v2 .shop-card__map    { width: 100%; height: 140px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); }
  body.v2 .shop-card__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

  body.v2 .creds-box { background: var(--v2-cream-soft); border-radius: var(--v2-r-sm); padding: 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
  body.v2 .creds-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 0.88rem; }
  body.v2 .creds-row span { font-weight: 600; }
  body.v2 .creds-row code { background: var(--v2-surface); padding: 4px 8px; border-radius: 4px; font-family: var(--v2-mono); font-size: 0.84rem; border: 1px solid var(--v2-line); }
  body.v2 details.row-actions { position: relative; }
  body.v2 details.row-actions summary { list-style: none; cursor: pointer; padding: 4px 8px; border-radius: var(--v2-r-sm); background: var(--v2-cream-soft); font-size: 0.84rem; }
  body.v2 details.row-actions summary::-webkit-details-marker { display: none; }
  body.v2 .row-actions__menu { position: absolute; right: 0; top: 100%; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); box-shadow: var(--v2-sh-3); padding: 6px; min-width: 14rem; z-index: 10; display: flex; flex-direction: column; gap: 2px; }
  body.v2 .row-actions__item { display: block; padding: 8px 10px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 0.86rem; border-radius: var(--v2-r-sm); width: 100%; }
  body.v2 .row-actions__item:hover { background: var(--v2-cream-soft); }
  body.v2 .row-actions__item--danger { color: var(--v2-rose); }
  body.v2 .row-actions__pwd-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; }

  /* ─── Staff invite (collapsible single-line form) ─── */
  body.v2 .staff-invite-header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap;
  }
  body.v2 .staff-invite-form {
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px;
    background: var(--v2-cream-soft);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    max-width: 560px;
  }
  body.v2 .staff-invite-form[hidden] { display: none; }
  body.v2 .staff-invite-form > button[type="submit"] { align-self: flex-start; }
  body.v2 .staff-invite-row {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%;
  }
  body.v2 .staff-invite-field {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
  }
  body.v2 .staff-invite-field > span {
    display: block;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--v2-mute);
    padding: 0 2px;
  }
  body.v2 .staff-invite-field > input {
    width: 100%;
    padding: 9px 12px;
    background: var(--v2-surface); color: var(--v2-ink);
    border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm);
    font-family: inherit; font-size: 0.92rem;
    line-height: 1.3;
  }
  body.v2 .staff-invite-field > small {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
    color: var(--v2-mute);
    margin-top: 3px !important;
  }
  body.v2 .staff-invite-field > input:focus {
    outline: 2px solid var(--v2-amber); outline-offset: 1px; border-color: var(--v2-amber);
  }

  /* ─── Staff list: one tight row per member ─── */
  body.v2 .staff-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    overflow: hidden;
  }
  body.v2 .staff-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--v2-surface);
    border-bottom: 1px solid var(--v2-line);
    min-height: 44px;
    font-size: 0.86rem;
  }
  body.v2 .staff-row:last-child { border-bottom: 0; }
  body.v2 .staff-row.is-disabled { opacity: 0.55; }
  body.v2 .staff-row__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-saffron) 0%, var(--v2-amber) 100%);
    color: #ffffff; font-weight: 700; font-size: 0.82rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  body.v2 .staff-row__id {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1; min-width: 0; line-height: 1.25;
  }
  body.v2 .staff-row__name {
    font-weight: 600; color: var(--v2-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.v2 .staff-row__email {
    font-size: 0.74rem; color: var(--v2-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.v2 .staff-row .badge { flex-shrink: 0; }
  body.v2 .staff-row__status { font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
  body.v2 .staff-row__status.is-active { color: #6ee7a3; }
  body.v2 .staff-row__status.is-off    { color: var(--v2-mute); }
  body.v2 .staff-row__last {
    font-size: 0.74rem; color: var(--v2-mute);
    white-space: nowrap; flex-shrink: 0;
    min-width: 5.5rem; text-align: right;
  }
  body.v2 .staff-row__actions {
    display: flex; gap: 4px; flex-shrink: 0;
  }
  body.v2 .staff-row__actions form { margin: 0; }
  body.v2 .staff-row__actions .btn {
    min-height: 30px; padding: 4px 9px; font-size: 0.9rem; line-height: 1;
  }
  body.v2 .btn.staff-btn-danger { color: #ff9aa6; border-color: rgba(255,154,166,0.35); }
  body.v2 .btn.staff-btn-danger:hover { background: rgba(154,52,18,0.12); border-color: rgba(255,154,166,0.5); }

  @media (max-width: 720px) {
    body.v2 .staff-row { flex-wrap: wrap; row-gap: 4px; }
    body.v2 .staff-row__last { min-width: 0; }
  }

  body.v2 .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 10rem; padding-top: 1rem; }
  body.v2 .bar-wrap  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
  body.v2 .bar       { width: 100%; background: linear-gradient(180deg, var(--v2-saffron) 0%, var(--v2-amber) 100%); border-radius: 3px 3px 0 0; min-height: 4px; }
  body.v2 .bar-wrap small { font-size: 0.68rem; color: var(--v2-mute); }

  body.v2 .customer-cards-grid {
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-top: 1rem;
  }
  body.v2 .customer-card {
    display: block; padding: 18px; border-radius: var(--v2-r-md);
    color: #fff; text-decoration: none;
    box-shadow: var(--v2-sh-2);
  }
  body.v2 .customer-card__name { font-weight: 700; }
  body.v2 .customer-card__balance { font-family: var(--v2-display); font-size: 2rem; font-weight: 600; margin: 8px 0; }
  body.v2 .customer-card__status { font-size: 0.72rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.1em; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  UTILITIES                                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  /* Kill any horizontal scrollbar across all v2 pages (merchant dashboard) */
  html:has(body.v2), body.v2 { overflow-x: hidden !important; max-width: 100vw; }
  body.v2 .reveal { animation: v2-reveal 600ms var(--v2-ease) both; }
  @keyframes v2-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* ─────── Android promos editor (dashboard/card.ejs) ─────── */
  body.v2 .promo-row {
    background: rgba(245,158,11,0.04) !important;
    border: 1px solid rgba(245,158,11,0.18) !important;
  }
  body.v2 .promo-input {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #f5f5f4 !important;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    width: 100%;
    color-scheme: dark;
  }
  body.v2 .promo-input:focus {
    outline: none;
    border-color: rgba(245,158,11,0.6);
    background: rgba(255,255,255,0.10);
  }
  body.v2 .promo-input::placeholder { color: rgba(255,255,255,0.4); }
  body.v2 textarea.promo-input { min-height: 70px; line-height: 1.45; font-family: inherit; }

  /* Locked premium section overlay — visible-but-disabled with CTA */
  body.v2 .tpl-section--locked {
    position: relative;
    overflow: hidden;
  }
  body.v2 .tpl-section--locked > *:not(.tpl-lock-overlay) {
    filter: blur(2px) saturate(0.7);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
  }
  body.v2 .tpl-lock-overlay {
    position: absolute; inset: 0; z-index: 5;
    background:
      radial-gradient(60% 50% at 50% 40%, rgba(245,158,11,0.15), transparent 70%),
      rgba(10,10,10,0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  body.v2 .tpl-lock-overlay__inner {
    max-width: 460px; text-align: center;
    background: linear-gradient(135deg, rgba(40,28,20,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.5);
  }
  body.v2 .tpl-lock-overlay__icon { font-size: 2.5rem; margin-bottom: 8px; }
  body.v2 .tpl-lock-overlay__title {
    font-size: 1.1rem; font-weight: 700; margin: 0 0 8px;
    color: #c2410c;
  }
  body.v2 .tpl-lock-overlay__body {
    font-size: 0.88rem; opacity: 0.8; line-height: 1.5;
    margin: 0 0 16px;
  }

  /* Live preview — horizontal layout: text left, square photo right */
  body.v2 .promo-preview {
    width: 340px;
    min-height: 110px;
    background: #1c1916;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 100px;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,0.4);
  }
  body.v2 .promo-preview__body {
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
    justify-content: center;
  }
  body.v2 .promo-preview__img {
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    align-self: center;
    margin: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05) center/cover no-repeat;
  }
  body.v2 .promo-preview__img:not([style*="background-image"])::after {
    content: "📷";
    display: flex; align-items: center; justify-content: center;
    height: 100%; opacity: 0.45; font-size: 1.4rem;
  }
  body.v2 .promo-preview__header {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f5f5f4;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  body.v2 .promo-preview__text {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
  }
  body.v2 .promo-preview__link {
    font-size: 0.72rem;
    color: #93c5fd;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 980px) {
    body.v2 .promo-row { grid-template-columns: 1fr !important; }
    body.v2 .promo-preview { width: 100% !important; max-width: 360px; }
  }
  body.v2 .promo-btn {
    padding: 5px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5f5f4;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-width: 36px;
  }
  body.v2 .promo-btn:hover {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.30);
  }
  body.v2 .promo-btn--danger {
    color: #fca5a5;
    border-color: rgba(245,158,11,0.30);
  }
  body.v2 .promo-btn--danger:hover {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.50);
  }

  /* ─────── Dashboard home (dashboard/home.ejs) ─────── */
  body.v2 .dh-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 30px;
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(245,158,11,0.10) 0%, transparent 55%),
      linear-gradient(135deg, rgba(194,105,26,0.12) 0%, rgba(106,42,142,0.08) 60%, rgba(0,0,0,0) 100%);
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 22px;
    margin: 18px 0 22px;
  }
  body.v2 .dh-hero__eyebrow {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(245,158,11,0.7);
    margin-bottom: 6px;
  }
  body.v2 .dh-hero__title {
    margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    letter-spacing: -0.02em; line-height: 1.1;
  }
  body.v2 .dh-hero__brand {
    font-style: italic; font-weight: 400;
    color: #c2410c;
  }
  body.v2 .dh-hero__sub {
    margin: 8px 0 14px; opacity: 0.78;
    font-size: 0.95rem;
  }
  body.v2 .dh-hero__pills {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  body.v2 .dh-pill {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 999px;
    border: 1px solid transparent;
  }
  body.v2 .dh-pill--plan {
    background: rgba(245,158,11,0.12);
    color: #c2410c;
    border-color: rgba(245,158,11,0.30);
  }
  body.v2 .dh-pill--trial {
    background: rgba(96,165,250,0.15);
    color: #93c5fd;
    border-color: rgba(96,165,250,0.35);
  }
  body.v2 .dh-pill--active {
    background: rgba(34,197,94,0.15);
    color: #86efac;
    border-color: rgba(34,197,94,0.35);
  }
  body.v2 .dh-hero__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: rgba(245,158,11,0.16);
    border: 1px solid rgba(245,158,11,0.40);
    border-radius: 999px;
    color: #c2410c;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
  }
  body.v2 .dh-hero__cta:hover {
    background: rgba(245,158,11,0.26);
    transform: translateY(-1px);
  }

  body.v2 .dh-setup {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 20px;
    padding: 22px 24px;
    background:
      linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(194,105,26,0.10) 60%, rgba(106,42,142,0.08) 100%);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 20px;
    margin-bottom: 22px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
  }
  body.v2 .dh-setup:hover {
    transform: translateY(-1px);
    border-color: rgba(245,158,11,0.50);
  }
  body.v2 .dh-setup__icon { font-size: 2.4rem; line-height: 1; }
  body.v2 .dh-setup__eyebrow {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #c2410c; margin-bottom: 4px;
  }
  body.v2 .dh-setup__title { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.2; }
  body.v2 .dh-setup__sub { margin: 0; font-size: 0.9rem; opacity: 0.8; line-height: 1.5; }
  body.v2 .dh-setup__cta {
    padding: 10px 20px;
    background: rgba(245,158,11,0.20);
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 999px;
    color: #c2410c; font-weight: 700; white-space: nowrap;
  }

  body.v2 .dh-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
  }
  body.v2 .dh-kpi {
    padding: 18px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    transition: border-color 0.15s, background 0.15s;
  }
  body.v2 .dh-kpi:hover {
    border-color: rgba(245,158,11,0.30);
    background: rgba(255,255,255,0.06);
  }
  body.v2 .dh-kpi__head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  body.v2 .dh-kpi__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: rgba(245,158,11,0.12);
    border-radius: 6px;
    font-size: 0.9rem; color: #c2410c;
  }
  body.v2 .dh-kpi__lbl {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
  }
  body.v2 .dh-kpi__val {
    font-size: 1.9rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
  }
  body.v2 .dh-kpi__sub {
    font-size: 0.78rem; opacity: 0.55;
  }
  body.v2 .dh-kpi__bar {
    height: 5px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden; margin-top: 8px;
  }
  body.v2 .dh-kpi__bar-fill { height: 100%; transition: width 0.3s; }

  body.v2 .dh-live {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
  }
  body.v2 .dh-live__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
  }
  body.v2 .dh-live__queue {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-variant-numeric: tabular-nums;
  }
  body.v2 .dh-live__queue-lbl {
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-right: 4px;
  }
  body.v2 .dh-live__queue-pending {
    font-size: 1.2rem; font-weight: 800; color: #fcd34d;
    padding: 2px 10px; border-radius: 999px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.25);
  }
  body.v2 .dh-live__queue-pending.is-active {
    animation: dh-pulse 1.4s ease-in-out infinite;
    color: #fbbf24;
    background: rgba(245,158,11,0.18);
  }
  @keyframes dh-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(245,158,11,0); }
  }
  body.v2 .dh-live__queue-sep { opacity: 0.3; }
  body.v2 .dh-live__queue-done {
    font-size: 1rem; font-weight: 700; color: #86efac;
  }
  body.v2 .dh-live__queue-lbl-sub {
    font-size: 0.7rem; color: rgba(255,255,255,0.5);
  }
  body.v2 .dh-live__feed { display: flex; flex-direction: column; gap: 6px; }
  body.v2 .dh-live__empty { padding: 14px 6px; opacity: 0.55; }
  body.v2 .dh-tx {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: background 0.15s;
    animation: dh-fadein 0.3s ease-out;
  }
  body.v2 .dh-tx:hover { background: rgba(255,255,255,0.06); }
  @keyframes dh-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.v2 .dh-tx__who { font-size: 0.88rem; font-weight: 600; }
  body.v2 .dh-tx__reason { font-size: 0.72rem; opacity: 0.55; margin-top: 2px; }
  body.v2 .dh-tx__right {
    display: flex; align-items: center; gap: 12px;
    font-variant-numeric: tabular-nums;
  }
  body.v2 .dh-tx__delta { font-size: 1rem; font-weight: 700; }
  body.v2 .dh-tx__after { font-size: 0.78rem; opacity: 0.55; }
  body.v2 .dh-tx__when { font-size: 0.7rem; opacity: 0.45; min-width: 56px; text-align: right; }

  /* Queue chip in nav header — visible across all dashboard pages */
  body.v2 .queue-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 5px 11px;
    min-width: 64px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s, border-color 0.15s;
  }
  /* Reserve the chip's box from first paint so it doesn't reflow the nav grid
     when the SSE feed reveals it ~1s after every page load. */
  body.v2 .queue-chip--hidden { visibility: hidden; }
  body.v2 .queue-chip:hover {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.30);
  }
  body.v2 .queue-chip__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6b7280; flex-shrink: 0;
  }
  body.v2 .queue-chip__pending { font-weight: 700; }
  body.v2 .queue-chip__sep { opacity: 0.35; }
  body.v2 .queue-chip__done { color: #86efac; font-weight: 600; }
  body.v2 .queue-chip--active .queue-chip__dot {
    background: #fbbf24;
    animation: queue-pulse 1.2s ease-in-out infinite;
  }
  body.v2 .queue-chip--active .queue-chip__pending { color: #fbbf24; }
  @keyframes queue-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(251,191,36,0); }
  }

  /* Per-shop stats (dashboard/stats.ejs) */
  body.v2 .shop-stats { display: flex; flex-direction: column; gap: 14px; }
  body.v2 .shop-stat {
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
  }
  body.v2 .shop-stat__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  body.v2 .shop-stat__head strong { font-size: 0.95rem; letter-spacing: -0.01em; }
  body.v2 .shop-stat__bar {
    height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden; margin-bottom: 10px;
  }
  body.v2 .shop-stat__bar-fill {
    height: 100%; background: linear-gradient(90deg, #7c2d12, #c2691a);
    transition: width 0.3s;
  }
  body.v2 .shop-stat__row { display: flex; flex-wrap: wrap; gap: 16px; }
  body.v2 .shop-stat__metric { display: flex; flex-direction: column; gap: 2px; }
  body.v2 .shop-stat__metric--right { margin-left: auto; }
  body.v2 .shop-stat__lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  body.v2 .shop-stat__val { font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Scanner app download tiles on dashboard home */
  /* 3-column scanner-app layout: Android | iOS | Web */
  body.v2 .dh-scanner-apps__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
  }
  @media (max-width: 920px) {
    body.v2 .dh-scanner-apps__cols { grid-template-columns: 1fr; gap: 14px; }
  }
  body.v2 .dh-scanner-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r);
    transition: border-color 200ms, transform 200ms;
  }
  body.v2 .dh-scanner-card:hover { border-color: rgba(245,158,11,0.3); }
  body.v2 .dh-scanner-card__head {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap;
  }
  body.v2 .dh-scanner-card__head h3 {
    margin: 0; flex: 1; min-width: 0;
    font-size: 1rem; font-weight: 600;
    color: var(--v2-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.v2 .dh-scanner-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    color: #c2410c;
  }
  body.v2 .dh-scanner-card__icon svg { width: 22px; height: 22px; }
  body.v2 .dh-scanner-card__pill { flex-shrink: 0; }
  body.v2 .dh-scanner-card__pill {
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
  }
  body.v2 .dh-scanner-card__pill--ok   { background: rgba(34,197,94,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
  body.v2 .dh-scanner-card__pill--soon { background: rgba(251,191,36,0.15); color: #fcd34d; border: 1px solid rgba(251,191,36,0.3); }
  body.v2 .dh-scanner-card__qr {
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    display: flex; justify-content: center; align-items: center;
    aspect-ratio: 1; max-width: 200px; margin: 0 auto;
  }
  body.v2 .dh-scanner-card__qr svg { width: 100%; height: 100%; }
  body.v2 .dh-scanner-card__copy {
    display: flex; gap: 6px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    padding: 4px;
  }
  body.v2 .dh-scanner-card__copy .copy-link-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; color: var(--v2-ink);
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    padding: 6px 8px;
    overflow: hidden; text-overflow: ellipsis;
  }
  body.v2 .dh-scanner-card__copy .copy-link-btn {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    color: #c2410c;
    padding: 6px 10px;
    border-radius: 6px; cursor: pointer; font-size: 0.78rem;
  }
  body.v2 .dh-scanner-card__copy .copy-link-btn:hover { background: rgba(245,158,11,0.18); }
  body.v2 .dh-scanner-card__copy .copy-link-btn--ok { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.4); color: #86efac; }
  body.v2 .dh-scanner-card__placeholder { text-align: center; padding: 12px 4px; }

  body.v2 .dh-scanner-apps {
    margin: 22px 0;
    padding: 18px 20px;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 16px;
  }
  body.v2 .dh-scanner-apps__head { margin-bottom: 14px; }
  body.v2 .dh-scanner-apps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
  body.v2 .dh-scanner-app {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    color: inherit; text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  body.v2 .dh-scanner-app:hover {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.40);
    transform: translateY(-1px);
  }
  body.v2 .dh-scanner-app__icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    font-size: 1.6rem;
    color: #c2410c;
    flex-shrink: 0;
  }
  body.v2 .dh-scanner-app__icon svg { display: block; }
  body.v2 .dh-scanner-app__title { font-weight: 700; font-size: 0.95rem; }
  body.v2 .dh-scanner-app__meta { font-size: 0.78rem; opacity: 0.65; margin-top: 2px; }
  body.v2 .dh-scanner-app__notes { margin-top: 4px; }
  body.v2 .dh-scanner-app--big {
    grid-template-columns: 1fr 220px;
    align-items: stretch;
    padding: 20px;
    cursor: default;
  }
  body.v2 .dh-scanner-app--big:hover { transform: none; }
  body.v2 .dh-scanner-app__main {
    display: flex; gap: 16px; align-items: flex-start;
  }
  body.v2 .dh-scanner-app__qr {
    background: #fff; padding: 12px;
    border-radius: 12px; align-self: center;
    width: 200px;
  }
  body.v2 .dh-scanner-app__qr svg { width: 100%; height: auto; display: block; }
  body.v2 .copy-link-row {
    display: flex; gap: 6px; align-items: stretch;
    max-width: 100%;
  }
  body.v2 .copy-link-input {
    flex: 1; min-width: 0;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5f5f4;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem; font-family: monospace;
  }
  body.v2 .copy-link-btn {
    padding: 6px 12px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    color: #c2410c;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem; font-weight: 700;
    white-space: nowrap;
  }
  body.v2 .copy-link-btn:hover { background: rgba(245,158,11,0.22); }
  body.v2 .copy-link-btn--ok {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.40);
    color: #86efac;
  }
  @media (max-width: 720px) {
    body.v2 .dh-scanner-app--big { grid-template-columns: 1fr; }
    body.v2 .dh-scanner-app__qr { width: 100%; max-width: 220px; margin: 0 auto; }
  }

  body.v2 .dh-scanner-app__cta {
    padding: 6px 12px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 999px;
    color: #c2410c;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  body.v2 .dh-section-title {
    margin: 26px 0 14px;
    font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.65);
  }

  body.v2 .dh-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
  }
  body.v2 .dh-tile {
    position: relative;
    padding: 22px 22px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
  }
  body.v2 .dh-tile:hover {
    transform: translateY(-2px);
    background: rgba(245,158,11,0.07);
    border-color: rgba(245,158,11,0.35);
  }
  body.v2 .dh-tile__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 12px;
    color: #c2410c;
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  body.v2 .dh-tile__title { margin: 0 0 4px; font-size: 1rem; letter-spacing: -0.01em; }
  body.v2 .dh-tile__sub { margin: 0; font-size: 0.82rem; opacity: 0.65; line-height: 1.4; }
  body.v2 .dh-tile__arrow {
    position: absolute; top: 22px; right: 22px;
    color: rgba(245,158,11,0.4); font-size: 1.1rem;
    transition: transform 0.15s, color 0.15s;
  }
  body.v2 .dh-tile:hover .dh-tile__arrow {
    transform: translateX(3px);
    color: #c2410c;
  }

  @media (max-width: 720px) {
    body.v2 .dh-hero { grid-template-columns: 1fr; }
    body.v2 .dh-hero__cta { justify-self: stretch; text-align: center; justify-content: center; }
    body.v2 .dh-setup { grid-template-columns: 1fr; text-align: center; }
    body.v2 .dh-setup__icon { font-size: 3rem; }
  }

  /* ─────── Customers list (dashboard/customers.ejs) ─────── */
  body.v2 .cust-toast {
    padding: 10px 14px;
    background: rgba(34,197,94,0.12);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
    border-radius: 10px;
    margin: 10px 0;
    font-weight: 600;
  }
  body.v2 .cust-purge {
    padding: 18px 20px;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 14px;
    margin: 16px 0;
  }
  body.v2 .cust-purge__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  }
  body.v2 .cust-purge__pill {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    background: rgba(34,197,94,0.15);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  }
  body.v2 .cust-purge__pill--off {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.14);
  }
  body.v2 .cust-purge__form {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  body.v2 .cust-purge__radio {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.85rem;
  }
  body.v2 .cust-purge__radio:hover { background: rgba(255,255,255,0.07); }
  body.v2 .cust-purge__radio:has(input:checked) {
    background: rgba(245,158,11,0.14);
    border-color: rgba(245,158,11,0.5);
    color: #c2410c;
  }
  body.v2 .cust-purge__radio input { accent-color: #c2410c; }
  body.v2 .cust-purge__preview {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: rgba(245,158,11,0.10);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 10px;
    font-size: 0.85rem;
  }

  body.v2 .cust-toolbar { margin: 18px 0; }
  body.v2 .cust-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  body.v2 .cust-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--v2-ink);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    min-width: 200px;
    color-scheme: dark;
  }
  body.v2 select.cust-input option {
    background: #1a1410;
    color: #f5f5f4;
  }
  body.v2 .cust-input:focus {
    outline: none;
    border-color: rgba(245,158,11,0.6);
    background: rgba(255,255,255,0.10);
  }
  body.v2 .cust-empty {
    padding: 60px 24px;
    text-align: center;
    color: rgba(255,255,255,0.55);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
  }

  body.v2 .cust-list { display: flex; flex-direction: column; gap: 10px; }
  body.v2 .cust-row {
    display: grid;
    grid-template-columns: 48px 1.6fr 2fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  }
  body.v2 .cust-row:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
    border-color: rgba(245,158,11,0.30);
  }
  body.v2 .cust-row__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }
  body.v2 .cust-row__name { min-width: 0; }
  body.v2 .cust-row__name strong {
    display: block;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.v2 .cust-row__email {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.v2 .cust-row__meta {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0;
  }
  body.v2 .cust-row__chip {
    display: inline-flex; flex-direction: column;
    padding: 5px 10px;
    background: rgba(194,105,26,0.06);
    border: 1px solid rgba(194,105,26,0.16);
    border-radius: 8px;
    min-width: 0;
  }
  body.v2 .cust-row__chip-lbl {
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }
  body.v2 .cust-row__chip-val {
    font-size: 0.82rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.v2 .cust-row__balance {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  body.v2 .cust-row__balance-val { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; }
  body.v2 .cust-row__balance-lbl { font-size: 0.7rem; opacity: 0.65; margin-left: 4px; }

  @media (max-width: 720px) {
    body.v2 .cust-row {
      grid-template-columns: 40px 1fr auto;
      grid-template-areas: "av name bal" "av meta meta";
      gap: 8px 12px;
    }
    body.v2 .cust-row__avatar { grid-area: av; width: 40px; height: 40px; }
    body.v2 .cust-row__name { grid-area: name; }
    body.v2 .cust-row__meta { grid-area: meta; }
    body.v2 .cust-row__balance { grid-area: bal; }
  }

/* Triple-safe: kill horizontal scroll on every v2 page regardless of inner overflow */
html:has(body.v2) { overflow-x: clip !important; }
/* overflow-y must stay visible — `auto` here turns <body> into a scroll
   container, which steals position:sticky from .tpl-preview-wrap (and any
   other sticky element) since the real scroll happens on the viewport. */
body.v2 { overflow-x: clip !important; overflow-y: visible; }
body.v2 main, body.v2 .container { overflow-x: clip; }
/* …but pages with the card/template editor need a non-clipping ancestor so the
   sticky wallet preview can pin to the viewport while the form scrolls. */
body.v2 main:has(.tpl-grid),
body.v2 .container:has(.tpl-grid) { overflow: visible !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MERCHANT DASHBOARD GLASS DESIGN SYSTEM (additive pass)            ║
   ║  Unifies .glass-panel + legacy panel aliases on body.v2.v2-merchant ║
   ║  Adds mobile-first responsive utilities                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

  /* Shared glassmorphism panel — applies to the new utility class AND
     existing dashboard panel classes so we keep the look consistent
     without rewriting markup. */
  body.v2.v2-merchant .glass-panel,
  body.v2.v2-merchant .adm-panel,
  body.v2.v2-merchant .dh-card,
  body.v2.v2-merchant .v2-card,
  body.v2.v2-merchant .dh-live,
  body.v2.v2-merchant .dh-kpi,
  body.v2.v2-merchant .dh-tile,
  body.v2.v2-merchant .dh-scanner-card,
  body.v2.v2-merchant .dh-scanner-app,
  body.v2.v2-merchant .cust-purge,
  body.v2.v2-merchant .billing-plan-card,
  body.v2.v2-merchant .billing-stat,
  body.v2.v2-merchant .an-kpi,
  body.v2.v2-merchant .an-bench,
  body.v2.v2-merchant .activity-stat,
  body.v2.v2-merchant .shop-stat,
  body.v2.v2-merchant .acct-card,
  body.v2.v2-merchant .creds-box,
  body.v2.v2-merchant .staff-invite-section,
  body.v2.v2-merchant .tpl-section {
    background: linear-gradient(170deg, rgba(245,158,11,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(245,158,11,0.12);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: clamp(16px, 2.4vw, 24px);
    box-shadow: 0 6px 28px -20px rgba(0,0,0,0.6);
  }
  /* Preserve existing per-component padding overrides where the design
     intentionally departs (kpi tighter, tile keeps its arrow slot). */
  body.v2.v2-merchant .dh-kpi { padding: 18px 20px; }
  body.v2.v2-merchant .dh-tile { padding: 22px 22px 18px; }
  body.v2.v2-merchant .dh-scanner-app { padding: 16px 18px; }
  /* Compact metric tiles keep a tighter box so dense grids don't blow up. */
  body.v2.v2-merchant .billing-stat,
  body.v2.v2-merchant .an-kpi,
  body.v2.v2-merchant .activity-stat,
  body.v2.v2-merchant .shop-stat { padding: 14px 16px; border-radius: 12px; }
  body.v2.v2-merchant .glass-panel--flush { padding: 0; overflow: hidden; }

  /* Heading modifiers for the few places that need a non-default size.
     Replaces inline style="font-size:..." on h1/h2/h3. */
  body.v2.v2-merchant .h-lg { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; color: #c2410c; }
  body.v2.v2-merchant .h-md { font-size: clamp(1.2rem, 2.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; color: #c2410c; }
  body.v2.v2-merchant .h-sm { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; letter-spacing: -0.01em; color: #c2410c; }

  /* Generic table-wrap (prevents horizontal page scroll on narrow screens). */
  body.v2.v2-merchant .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(245,158,11,0.10);
    background: rgba(255,255,255,0.02);
  }
  body.v2.v2-merchant .table-wrap > table { margin: 0; min-width: 100%; }

  /* Touch targets: ensure all dashboard buttons/links meet the 40px floor. */
  body.v2.v2-merchant .btn,
  body.v2.v2-merchant .btn-primary,
  body.v2.v2-merchant .btn-ghost,
  body.v2.v2-merchant .btn-sm {
    min-height: 40px;
  }
  body.v2.v2-merchant .btn-sm { min-height: 36px; }

  /* iOS form-zoom fix + min touch target — inputs must be >=16px on
     mobile, otherwise Safari zooms in on focus. */
  @media (max-width: 760px) {
    body.v2.v2-merchant .form input,
    body.v2.v2-merchant .form select,
    body.v2.v2-merchant .form textarea,
    body.v2.v2-merchant .tpl-field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    body.v2.v2-merchant .tpl-field select,
    body.v2.v2-merchant .tpl-field textarea,
    body.v2.v2-merchant input[type="text"],
    body.v2.v2-merchant input[type="email"],
    body.v2.v2-merchant input[type="password"],
    body.v2.v2-merchant input[type="search"],
    body.v2.v2-merchant input[type="tel"],
    body.v2.v2-merchant input[type="number"],
    body.v2.v2-merchant input[type="url"],
    body.v2.v2-merchant select,
    body.v2.v2-merchant textarea {
      font-size: 16px;
    }
    body.v2.v2-merchant .btn,
    body.v2.v2-merchant button:not(.btn-icon):not(.copy-link-btn) {
      min-height: 44px;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    body.v2.v2-merchant .btn-block,
    body.v2.v2-merchant form .btn-primary,
    body.v2.v2-merchant form button[type="submit"] {
      width: 100%;
    }
  }

  /* Mobile: stack rigid 2-col layouts (≤640px). */
  @media (max-width: 640px) {
    body.v2.v2-merchant [style*="grid-template-columns: 1fr 1fr"],
    body.v2.v2-merchant [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    /* Billing invoice rows: stack to a list-card layout on phones. */
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] {
      grid-template-columns: 1fr auto !important;
      grid-template-areas:
        "id      status"
        "date    date"
        "amount  link" !important;
      gap: 6px 12px !important;
    }
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] > *:nth-child(1) { grid-area: id; }
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] > *:nth-child(2) { grid-area: date; }
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] > *:nth-child(3) { grid-area: amount; text-align: left !important; }
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] > *:nth-child(4) { grid-area: status; }
    body.v2.v2-merchant .billing-invoices [style*="grid-template-columns: 100px 1fr"] > *:nth-child(5) { grid-area: link; text-align: right !important; }
  }

  /* Mobile chrome trim — hide decorative eyebrows / oversized hero icons
     that just add visual noise on narrow screens. */
  @media (max-width: 480px) {
    body.v2.v2-merchant .dh-hero__eyebrow,
    body.v2.v2-merchant .v2-eyebrow { display: none; }
    body.v2.v2-merchant .dh-setup__icon svg { width: 28px; height: 28px; }
  }

  /* Login page (auth) lightweight mobile guard — applied broadly, since
     it shares the v2 surface and the user lands here from the dashboard. */
  @media (max-width: 760px) {
    body.v2 .auth-form input,
    body.v2 .auth-form select,
    body.v2 .auth-form textarea { font-size: 16px; }
  }

/* ── Dashboard Onboarding Guide ─────────────────────────────────────── */
body.v2.v2-merchant .dh-onboard {
  background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(245,158,11,0.04) 100%);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin-bottom: 24px;
}
body.v2.v2-merchant .dh-onboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
body.v2.v2-merchant .dh-onboard__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.v2.v2-merchant .dh-onboard__title-row strong {
  font-size: 0.92rem;
  color: #c2410c;
  font-weight: 700;
}
body.v2.v2-merchant .dh-onboard__progress {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.1);
  border-radius: 999px;
  padding: 2px 8px;
}
body.v2.v2-merchant .dh-onboard__pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245,158,11,0.7);
  animation: kw-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes kw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.7); }
  60%  { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
body.v2.v2-merchant .dh-onboard__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  transition: color .15s;
}
body.v2.v2-merchant .dh-onboard__dismiss:hover { color: rgba(255,255,255,0.7); }
body.v2.v2-merchant .dh-onboard__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v2.v2-merchant .dh-onboard__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: border-color .2s;
}
body.v2.v2-merchant .dh-onboard__step.is-done {
  opacity: 0.5;
  background: rgba(74,222,128,0.04);
  border-color: rgba(74,222,128,0.15);
}
body.v2.v2-merchant .dh-onboard__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  margin-top: 1px;
  transition: all .2s;
}
body.v2.v2-merchant .dh-onboard__step.is-done .dh-onboard__check {
  background: rgba(74,222,128,0.15);
  border-color: #4ade80;
  color: #4ade80;
}
body.v2.v2-merchant .dh-onboard__step-body {
  flex: 1;
  min-width: 0;
}
body.v2.v2-merchant .dh-onboard__step-body strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c2410c;
  margin-bottom: 2px;
}
body.v2.v2-merchant .dh-onboard__step.is-done .dh-onboard__step-body strong {
  color: rgba(255,255,255,0.5);
}
body.v2.v2-merchant .dh-onboard__step-body p { margin: 0; }
body.v2.v2-merchant .dh-onboard__cta {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 10px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
body.v2.v2-merchant .dh-onboard__cta:hover { background: rgba(245,158,11,0.2); color: #fbbf24; }
body.v2.v2-merchant .dh-onboard__cta--secondary {
  color: rgba(245,158,11,0.55);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
body.v2.v2-merchant .dh-onboard__cta--secondary:hover { background: rgba(255,255,255,0.08); color: #c2410c; }
body.v2.v2-merchant .dh-onboard__done {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 600px) {
  body.v2.v2-merchant .dh-onboard__step { flex-wrap: wrap; }
  body.v2.v2-merchant .dh-onboard__cta { margin-top: 4px; }
}

/* ── Card page — push notification panel ────────────────────────────────── */
body.v2.v2-merchant .card-notif-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 24px 20px;
  margin: 28px 0 8px;
}
body.v2.v2-merchant .card-notif-panel__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
body.v2.v2-merchant .card-notif-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg,rgba(251,191,36,.18),rgba(194,105,26,.18));
  border-radius: 10px;
  color: #fbbf24;
}
body.v2.v2-merchant .card-notif-panel__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--v2-fg, #c2410c);
}
body.v2.v2-merchant .card-notif-panel__sub {
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.5;
}
body.v2.v2-merchant .card-notif-panel__kpi {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
body.v2.v2-merchant .card-notif-kpi {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(245,158,11,0.7);
  background: rgba(255,255,255,0.06);
  padding: 3px 9px;
  border-radius: 20px;
}
body.v2.v2-merchant .card-notif-panel__locked {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v2.v2-merchant .card-notif-panel__locked strong { font-size: 0.85rem; }
body.v2.v2-merchant .card-notif-panel__locked .btn { align-self: flex-start; margin-top: 4px; }
body.v2.v2-merchant .card-notif-panel__ratelimit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(251,191,36,0.85);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
body.v2.v2-merchant .card-notif-panel__form { display: flex; flex-direction: column; gap: 10px; }
body.v2.v2-merchant .card-notif-panel__textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--v2-fg, #c2410c);
  font-size: 0.85rem;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
body.v2.v2-merchant .card-notif-panel__textarea::placeholder { color: var(--v2-mute, rgba(240,236,228,.4)); }
body.v2.v2-merchant .card-notif-panel__textarea:focus { outline: none; border-color: rgba(251,191,36,0.5); }
body.v2.v2-merchant .card-notif-panel__textarea:disabled { opacity: 0.4; cursor: not-allowed; }
body.v2.v2-merchant .card-notif-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.v2.v2-merchant .btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* ── Sidebar card-quota usage meter (header_auth.ejs) ──────────────────────
   Lives as a nav item at the bottom of the dashboard nav. Fluid width →
   works in the desktop sidebar and the collapsed mobile burger menu alike. */
.nav-auth .nav-usage {
  display: block;
  box-sizing: border-box;
  width: auto;
  margin: 10px 10px 4px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 127, 127, 0.18);
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.06);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-auth .nav-usage:hover {
  background: rgba(127, 127, 127, 0.11);
  border-color: rgba(127, 127, 127, 0.28);
}
.nav-usage__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.nav-usage__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted, #8a8a86);
}
.nav-usage__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg, #1a1a1a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-usage__sep { color: var(--muted, #8a8a86); font-weight: 600; }
.nav-usage__track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  overflow: hidden;
}
.nav-usage__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  /* healthy = emerald; transitions to amber (≥80%) then red (100%) via state */
  background: linear-gradient(90deg, #059669, #34d399);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.nav-usage.is-warn .nav-usage__fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.nav-usage.is-full .nav-usage__fill { background: linear-gradient(90deg, #b91c1c, #c2410c); }
.nav-usage__hint {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #b91c1c;
}
.nav-usage.is-warn .nav-usage__hint { color: #b45309; }