/* =====================================================================
   订阅自助站 · UI v3 FINAL design-system seed  (tokens.css)
   Based on Direction C「Editorial Bento」+ grafts from A / B.
   Customer page CSS: trimmed copy of the shared seed (tokens.css) + surface layer §9:
     §1 tokens (light + dark)  §2 base  §3 type primitives
     §4 components  §5 layout shells  §6 liquid progress
     §7 responsive (components)  §8 motion + reduced-motion
   Surface-specific compositions live in the per-surface tail (see mock.css).
   Rules: system fonts only · no external assets · no inline style ·
   inline SVG / data: URIs only · every color through a token.
   ===================================================================== */

/* ---------------------------------------------------------------------
   §1 TOKENS
   --------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px; --fs-44: 44px;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6;
  --track-display: -0.025em; --track-eyebrow: 0.08em;

  /* spacing (4-base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-20: 80px;

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* signature gradient — the only vivid color in the system.
     --grad      decorative (liquid, orb, brand mark, dots, hairline frames)
     --grad-ink  darker stops: ANY surface carrying white text (buttons, hero tile, badges) → white ≥ 4.5:1 at every stop */
  --g1: #6E59FF; --g2: #B056F5; --g3: #FF6A88;
  --gi1: #5B46F0; --gi2: #9A3FE0; --gi3: #D1345A;
  --grad: linear-gradient(120deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  --grad-ink: linear-gradient(120deg, var(--gi1) 0%, var(--gi2) 52%, var(--gi3) 100%);
  --grad-v: linear-gradient(180deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  --grad-soft: linear-gradient(120deg, rgba(110,89,255,.14), rgba(176,86,245,.10) 50%, rgba(255,106,136,.14));

  /* light palette */
  --bg: #F1F0F5;
  --bg-blob-1: rgba(110, 89, 255, .20);
  --bg-blob-2: rgba(255, 106, 136, .16);
  --bg-blob-3: rgba(176, 86, 245, .12);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-edge: rgba(23, 20, 44, .08);
  --surface: #FFFFFF;
  --surface-2: #F6F5FA;
  --ink: #1C1B2A;                 /* dark floating bars (bulk bar) */
  --ink-text: #F4F3FA;
  --fill: rgba(23, 20, 44, .05);
  --fill-2: rgba(23, 20, 44, .09);
  --line: rgba(23, 20, 44, .10);
  --line-2: rgba(23, 20, 44, .16);
  --text: #15131F;                /* 16:1 */
  --text-2: #5B5870;              /* 6.3:1 */
  --text-3: #6E6B82;              /* 5.1:1 on white, 4.5:1 on tinted glass — judge fix */
  --text-on-grad: #FFFFFF;
  --accent: #6E59FF;
  --accent-text: #4A33D9;         /* 6.6:1 */
  --accent-bg: rgba(110, 89, 255, .10);
  --accent-ring: rgba(110, 89, 255, .28);
  --ok: #1D9A6C; --ok-text: #0F7A52; --ok-bg: rgba(29, 154, 108, .12);
  --warn: #E59A12; --warn-text: #8A5A00; --warn-bg: rgba(229, 154, 18, .14);
  --bad: #E5484D; --bad-text: #C2323A; --bad-bg: rgba(229, 72, 77, .11);
  --info-text: var(--accent-text); --info-bg: var(--accent-bg);

  --shadow-tile: 0 1px 2px rgba(20, 18, 40, .04), 0 12px 32px -16px rgba(20, 18, 40, .18);
  --shadow-pop: 0 2px 6px rgba(20, 18, 40, .08), 0 24px 56px -24px rgba(20, 18, 40, .32);
  --shadow-btn: 0 8px 20px -10px rgba(110, 89, 255, .70);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .80);
  --blur: blur(24px) saturate(1.5);

  /* motion */
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; --d-liquid: 2.4s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* dark: tokens only. Component rules never branch on scheme.
   Guarded so a future html[data-theme="light"] can force light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A10;
    --bg-blob-1: rgba(110, 89, 255, .26);
    --bg-blob-2: rgba(255, 106, 136, .14);
    --bg-blob-3: rgba(176, 86, 245, .16);
    --glass: rgba(24, 23, 34, .66);
    --glass-strong: rgba(28, 27, 40, .86);
    --glass-border: rgba(255, 255, 255, .10);
    --glass-edge: rgba(0, 0, 0, .45);
    --surface: #16151F;
    --surface-2: #1D1C28;
    --ink: #26253A;
    --ink-text: #F4F3FA;
    --fill: rgba(255, 255, 255, .06);
    --fill-2: rgba(255, 255, 255, .10);
    --line: rgba(255, 255, 255, .10);
    --line-2: rgba(255, 255, 255, .16);
    --text: #F2F1F7;
    --text-2: #AAA7BD;
    --text-3: #908DA3;
    --accent: #8E7DFF;
    --accent-text: #B3A6FF;
    --accent-bg: rgba(142, 125, 255, .16);
    --accent-ring: rgba(142, 125, 255, .36);
    --ok: #2CC48A; --ok-text: #5FE3B0; --ok-bg: rgba(44, 196, 138, .16);
    --warn: #F0B13A; --warn-text: #FFCF6B; --warn-bg: rgba(240, 177, 58, .16);
    --bad: #F2666B; --bad-text: #FF8E92; --bad-bg: rgba(242, 102, 107, .16);
    --shadow-tile: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .7);
    --shadow-pop: 0 2px 8px rgba(0, 0, 0, .4), 0 28px 64px -24px rgba(0, 0, 0, .8);
    --shadow-btn: 0 10px 24px -10px rgba(142, 125, 255, .65);
    --gloss: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A10; --bg-blob-1: rgba(110, 89, 255, .26); --bg-blob-2: rgba(255, 106, 136, .14); --bg-blob-3: rgba(176, 86, 245, .16);
  --glass: rgba(24, 23, 34, .66); --glass-strong: rgba(28, 27, 40, .86); --glass-border: rgba(255, 255, 255, .10); --glass-edge: rgba(0, 0, 0, .45);
  --surface: #16151F; --surface-2: #1D1C28; --ink: #26253A; --ink-text: #F4F3FA;
  --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .10); --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .16);
  --text: #F2F1F7; --text-2: #AAA7BD; --text-3: #908DA3;
  --accent: #8E7DFF; --accent-text: #B3A6FF; --accent-bg: rgba(142, 125, 255, .16); --accent-ring: rgba(142, 125, 255, .36);
  --ok: #2CC48A; --ok-text: #5FE3B0; --ok-bg: rgba(44, 196, 138, .16);
  --warn: #F0B13A; --warn-text: #FFCF6B; --warn-bg: rgba(240, 177, 58, .16);
  --bad: #F2666B; --bad-text: #FF8E92; --bad-bg: rgba(242, 102, 107, .16);
  --shadow-tile: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .7);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, .4), 0 28px 64px -24px rgba(0, 0, 0, .8);
  --shadow-btn: 0 10px 24px -10px rgba(142, 125, 255, .65);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------
   §2 BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--fs-15); line-height: var(--lh-body);
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; position: relative;
}
/* aurora backdrop: fixed, cheap radial gradients (no filter) */
body::before {
  content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vw 36vh at 8% 0%, var(--bg-blob-1), transparent 70%),
    radial-gradient(36vw 30vh at 95% 12%, var(--bg-blob-2), transparent 70%),
    radial-gradient(44vw 34vh at 70% 100%, var(--bg-blob-3), transparent 72%);
}
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1180px, 100% - var(--s-8)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.muted { color: var(--text-2); font-size: var(--fs-13); }
.tiny { font-size: var(--fs-12); color: var(--text-3); }
:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); border-radius: var(--r-xs); }

/* ---------------------------------------------------------------------
   §3 TYPE PRIMITIVES (editorial)
   --------------------------------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-eyebrow); color: var(--text-3); }
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--grad); }
.eyebrow.plain::before { display: none; }
.display { font-weight: 800; letter-spacing: var(--track-display); line-height: var(--lh-tight); }
h1.display { font-size: clamp(var(--fs-32), 4.2vw, var(--fs-44)); }
h2.display { font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32)); }
.lede { font-size: var(--fs-17); color: var(--text-2); max-width: 56ch; }
.grad-text { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------------
   §4 COMPONENTS
   --------------------------------------------------------------------- */
/* 4.1 tile (bento cell) — soft glass */
.tile {
  position: relative; background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-tile), var(--gloss);
  border-radius: var(--r-lg); padding: var(--s-6); align-content: start;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.tile.lift:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-pop), var(--gloss); }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.tile-head h2, .tile-head h3 { font-size: var(--fs-17); font-weight: 700; letter-spacing: -0.01em; }
.tile-head .sub { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); font-weight: 400; }
.tile .notice.compact { font-size: var(--fs-13); padding: 10px 12px; }

/* 4.2 bento grid */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
.bento > * { min-width: 0; }

/* 4.3 buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5); border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-15); white-space: nowrap; text-decoration: none; color: var(--text);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease), filter var(--d-base) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { color: var(--text-on-grad); background: var(--grad-ink); background-size: 160% 100%; background-position: 0 0; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(110,89,255,.75); }
.btn-primary:disabled { filter: saturate(.3) opacity(.55); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--glass-strong); border-color: var(--line-2); color: var(--text); box-shadow: var(--gloss), 0 1px 2px rgba(20,18,40,.05); }
.btn-secondary:hover { background: var(--surface); border-color: var(--text-3); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--fill); color: var(--text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { height: 34px; padding: 0 var(--s-3); font-size: var(--fs-13); border-radius: var(--r-xs); gap: 6px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { height: 52px; font-size: var(--fs-17); border-radius: var(--r-md); padding: 0 var(--s-6); }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); font-weight: 600; font-size: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 4.4 fields */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: var(--s-2); }
.label-opt { font-weight: 500; color: var(--text-3); font-size: var(--fs-12); padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill); }
.input, textarea.input {
  width: 100%; min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
textarea.input { min-height: 120px; padding: var(--s-3) var(--s-4); resize: vertical; font-family: var(--mono); font-size: var(--fs-13); line-height: 1.5; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 76px; }
.input-wrap .input-lead { position: absolute; left: 14px; color: var(--text-3); width: 18px; height: 18px; pointer-events: none; }
.input-wrap.has-lead .input { padding-left: 42px; }
.input-affix { position: absolute; right: 8px; height: 32px; padding: 0 10px; border-radius: var(--r-xs); border: 0; background: var(--fill); color: var(--text-2); font-size: var(--fs-13); font-weight: 600; }
.input-affix:hover { background: var(--fill-2); color: var(--text); }
.field-help { font-size: var(--fs-13); color: var(--text-3); line-height: 1.5; }
.field-help code, .field-note code { font-family: var(--mono); font-size: .9em; background: var(--fill); padding: 1px 5px; border-radius: 4px; }
.field-note { font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* optional block (一行粘贴) — inset so optional reads weaker than required (graft A) */
.inset-block { padding: var(--s-4); border-radius: var(--r-md); background: var(--fill); border: 1px dashed var(--line-2); display: grid; gap: 6px; }
.inset-block .input { background: var(--surface); }
.divider { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--fs-12); font-weight: 600; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--text-2); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface); display: inline-grid; place-items: center; transition: all var(--d-fast) var(--ease); cursor: pointer; flex: none; }
.check input:checked { border-color: transparent; background: var(--grad-ink); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }

/* 4.5 segmented control */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-md); background: var(--fill); gap: 2px; }
.seg > button {
  position: relative; z-index: 1; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2);
  font-weight: 600; font-size: var(--fs-14); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: color var(--d-base) var(--ease), background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.seg > button svg { width: 17px; height: 17px; }
.seg > button[aria-selected="true"], .seg > button.active { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(20,18,40,.10), 0 6px 16px -8px rgba(20,18,40,.25), var(--gloss); }
.seg > button[aria-selected="true"] svg, .seg > button.active svg { color: var(--accent); }
.seg.sm > button { height: 32px; font-size: var(--fs-13); border-radius: 9px; }
.seg.sm { border-radius: 12px; }

/* 4.6 badges / tags / counts */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; background: var(--fill); color: var(--text-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex: none; }
.badge.ok { background: var(--ok-bg); color: var(--ok-text); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.bad { background: var(--bad-bg); color: var(--bad-text); }
.badge.info { background: var(--accent-bg); color: var(--accent-text); }
.badge.busy::before { animation: pulse 1.6s ease-in-out infinite; }
.badge.plain::before { display: none; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; font-size: var(--fs-12); font-weight: 600; background: var(--fill); color: var(--text-2); white-space: nowrap; }
.tag.mono { font-family: var(--mono); font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); display: inline-block; animation: pulse 1.8s ease-in-out infinite; }

/* 4.7 notices */
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-14); line-height: 1.5; background: var(--fill); color: var(--text-2); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice strong { color: var(--text); font-weight: 700; margin-right: 6px; }
.notice.info { background: var(--accent-bg); color: var(--accent-text); }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.notice.warn strong { color: var(--warn-text); }
.notice.bad { background: var(--bad-bg); color: var(--bad-text); }
.notice.bad strong { color: var(--bad-text); }

/* 4.9 key-value list */
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.timeline { display: grid; gap: 0; }
.timeline > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-14); padding: 8px 0; position: relative; }
.timeline > li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fill-2); margin: 6px 4px; }
.timeline > li.done::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.timeline > li.now::before { background: var(--grad-ink); box-shadow: 0 0 0 3px var(--accent-bg); animation: pulse 1.8s ease-in-out infinite; }
.timeline > li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: -8px; width: 2px; background: var(--line); }
.timeline .d { color: var(--text-2); }
.timeline b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------------
   §5 LAYOUT SHELLS
   --------------------------------------------------------------------- */
/* 5.1 brand + customer / agent top bar (glass) */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--glass); border-bottom: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-btn); flex: none; }
.brand-mark svg { width: 19px; height: 19px; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-xs); color: var(--text-2); font-weight: 600; font-size: var(--fs-14); border: 0; background: transparent; white-space: nowrap; }
.nav a:hover, .nav button:hover { background: var(--fill); color: var(--text); text-decoration: none; }
.nav svg { width: 16px; height: 16px; }
.nav .btn { margin-left: var(--s-2); }

.footer { padding: var(--s-6) var(--s-8); display: flex; justify-content: space-between; gap: var(--s-4); color: var(--text-3); font-size: var(--fs-12); border-top: 1px solid var(--line); margin-top: auto; flex-wrap: wrap; }
.footer.wrap { padding-inline: 0; }

/* ---------------------------------------------------------------------
   §6 LIQUID PROGRESS (signature; customer order stage + admin direct batch)
   --------------------------------------------------------------------- */
.liquid { display: grid; gap: var(--s-3); }
.liquid-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.liquid-track > li { display: grid; gap: 10px; }
.tube { position: relative; height: 14px; border-radius: 999px; overflow: hidden; background: var(--fill-2); box-shadow: inset 0 1px 2px rgba(20,18,40,.14), inset 0 -1px 0 rgba(255,255,255,.5); }
.tube::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.fluid { position: absolute; inset: 0; z-index: 1; border-radius: inherit; display: none; }
/* one continuous gradient across 4 tubes: each shows its quarter */
.liquid-track > li.done .fluid, .liquid-track > li.active .fluid, .liquid-track > li.error .fluid, .liquid-track > li.warn .fluid { display: block; background: var(--grad); background-size: 400% 100%; }
.liquid-track > li:nth-child(1) .fluid { background-position: 0% 0; }
.liquid-track > li:nth-child(2) .fluid { background-position: 33.33% 0; }
.liquid-track > li:nth-child(3) .fluid { background-position: 66.66% 0; }
.liquid-track > li:nth-child(4) .fluid { background-position: 100% 0; }
.liquid-track > li.active .fluid { transform-origin: left; animation: fill-in 1.2s var(--ease) both; }
.liquid-track > li.active .fluid::before, .liquid-track > li.active .fluid::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: -80px; right: -80px; z-index: 2; opacity: .75; background-size: 48px 26px; background-repeat: repeat-x; }
.liquid-track > li.active .fluid::before { background-image: radial-gradient(14px 10px at 24px 6px, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); animation: wave-a var(--d-liquid) linear infinite; }
.liquid-track > li.active .fluid::after { background-image: radial-gradient(10px 8px at 12px 18px, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); background-size: 64px 26px; animation: wave-b calc(var(--d-liquid) * 1.6) linear infinite reverse; }
.liquid-track > li.active .tube::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65) 50%, transparent); transform: translateX(-120%); animation: shine 2.8s var(--ease) infinite; }
/* active tube: soft glow only — NO spread ring (judge fix: ring made the tube look taller/misaligned) */
.liquid-track > li.active .tube { box-shadow: inset 0 1px 2px rgba(20,18,40,.14), 0 8px 18px -6px rgba(110,89,255,.55); }
.liquid-track > li.error .fluid { background: linear-gradient(120deg, var(--bad), #FF8A8E); }
.liquid-track > li.warn .fluid { background: linear-gradient(120deg, var(--warn), #FFB347); }
.liquid-label { font-size: var(--fs-13); color: var(--text-3); font-weight: 600; text-align: center; }
.liquid-track > li.done .liquid-label { color: var(--text-2); }
.liquid-track > li.active .liquid-label { color: var(--accent-text); }
.liquid-track > li.error .liquid-label { color: var(--bad-text); }
.liquid-status { display: flex; align-items: center; justify-content: space-between; gap: 2px var(--s-3); font-size: var(--fs-14); color: var(--text-2); flex-wrap: wrap; }
.liquid-status .st { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.liquid-status .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-ink); box-shadow: 0 0 0 4px var(--accent-bg); animation: pulse 1.8s ease-in-out infinite; flex: none; }
.liquid-status .poll { font-size: var(--fs-12); color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.liquid-status .poll svg { width: 13px; height: 13px; animation: spin 6s linear infinite; }
.liquid-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-13); color: var(--text-2); }   /* reassurance line under status (graft) */
.liquid-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok-text); }
/* tone variants via data-tone on .liquid (mirrors #order-progress[data-tone]) */
.liquid[data-tone="done"] .liquid-status .st::before { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); animation: none; }
.liquid[data-tone="error"] .liquid-status .st::before { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); animation: none; }
.liquid[data-tone="warn"] .liquid-status .st::before { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.liquid[data-tone="error"] .liquid-track > li.active .fluid::before, .liquid[data-tone="error"] .liquid-track > li.active .fluid::after, .liquid[data-tone="error"] .liquid-track > li.active .tube::after { animation: none; display: none; }
/* orb */
.orb { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-btn), inset 0 2px 6px rgba(255,255,255,.45); flex: none; }
.orb::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid transparent; background: var(--grad) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .35; animation: orbit 3s linear infinite; }
.orb svg { width: 32px; height: 32px; animation: spin 9s linear infinite; }
.orb.ok { background: linear-gradient(135deg, var(--ok), #5FE3B0); }
.orb.ok::before, .orb.bad::before, .orb.warn::before { animation: none; opacity: .25; }
.orb.ok svg, .orb.bad svg, .orb.warn svg { animation: none; }
.orb.bad { background: linear-gradient(135deg, var(--bad), #FF8A8E); }
.orb.warn { background: linear-gradient(135deg, var(--warn), #FFB347); }

/* ---------------------------------------------------------------------
   §7 RESPONSIVE (components & shells)
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --fs-44: 36px; --fs-32: 28px; }
  .wrap { width: min(1180px, 100% - 32px); }
  .tile { padding: var(--s-5); border-radius: 18px; }
  .topbar-in { height: 56px; }
  .nav .hide-sm, .hide-sm { display: none !important; }
  .nav { gap: 2px; }
  .nav a, .nav button { padding: 0 10px; font-size: var(--fs-13); }
  .field-row { grid-template-columns: 1fr; }
  .orb { width: 56px; height: 56px; }
  .orb svg { width: 26px; height: 26px; }
  .footer { flex-direction: column; gap: 4px; }
}

/* ---------------------------------------------------------------------
   §8 MOTION
   --------------------------------------------------------------------- */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes wave-a { to { transform: translateX(48px); } }
@keyframes wave-b { to { transform: translateX(64px); } }
@keyframes shine { 0% { transform: translateX(-120%); } 70%, 100% { transform: translateX(280%); } }
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--d-slow) var(--ease) both; }
.rise-2 { animation-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .liquid-track > li.active .fluid::before, .liquid-track > li.active .fluid::after, .liquid-track > li.active .tube::after { display: none; }
  .rise { animation: none; opacity: 1; }
}
/* low-end phones: drop blur, keep hairline + solid-ish glass */
@media (max-width: 640px) {
  .tile, .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tile { background: var(--glass-strong); }
}

/* =====================================================================
   §9 CUSTOMER PAGE (surface layer) — DESIGN.md §4
   ===================================================================== */
:root { --topbar-solid: #F8F7FB; --tube-edge: rgba(255,255,255,.5); --tube-sheen: .55; --ok-solid: linear-gradient(135deg, #0F7A52, #1D9A6C); --bad-solid: linear-gradient(135deg, #B42A33, #E5484D); --warn-solid: linear-gradient(135deg, #F0B13A, #FFC766); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --topbar-solid: #111019; --tube-edge: rgba(255,255,255,.06); --tube-sheen: .28; } }
:root[data-theme="dark"] { --topbar-solid: #111019; --tube-edge: rgba(255,255,255,.06); --tube-sheen: .28; }

html { scroll-padding-top: 80px; overflow-x: clip; }
body { overflow-x: clip; }   /* sticky topbar needs a non-scrolling body; older browsers keep `hidden` above */
.span-4 { grid-column: span 4; }
.tile-head h3 { margin: 0; }
.stack { display: grid; gap: var(--s-5); }
/* text-3 is only AA on the tile itself; on nested fills step up to text-2 */
.label-opt, .field-help code, .inset-block .field-help { color: var(--text-2); }
.at-narrow { display: none; }

/* focus: the seed's ring is a box-shadow that .btn-* / .seg overrides; a real outline is visible everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); box-shadow: none; }

/* top bar */
.buy-cta span { font-size: 12px; }

/* hero */
.hero-ed { padding: var(--s-10) 0 var(--s-6); display: grid; gap: var(--s-3); justify-items: start; }
.hero-ed .eyebrow.plain { gap: 10px; }
.hero-ed .live-dot { margin: 0 2px; }
.hero-ed .lede { max-width: 44ch; }
.hero-ed h1 { text-wrap: balance; }
.hero-ed h1 .grad-text { display: inline-block; }
/* hero copy per stage, HTML + CSS only: app.js never writes #hero-title. Without :has() the code-stage copy stays. */
.hero-account, .hero-order { display: none; }
body:has(#account-stage:not([hidden])) .hero-code, body:has(#order-stage:not([hidden])) .hero-code { display: none; }
body:has(#account-stage:not([hidden])) .hero-account, body:has(#order-stage:not([hidden])) .hero-order { display: inline; }
.notices { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.notices:not(:has(> :not([hidden]))) { display: none; }
.notice-body strong { display: block; margin: 0 0 2px; }
.notice code, .notice-body code { font-family: var(--mono); font-size: .9em; background: var(--fill); padding: 1px 5px; border-radius: 4px; }

/* -- stage shell --------------------------------------------------------
   #stepper / #stage-title / #message exist once but belong visually to the left tile of whichever stage is showing.
   So each .stage is display:contents and its parts land on the shell's grid; the left tile is the shell's own ::before
   spanning rows 1–2 behind .stage-head + .stage-main. showStage()'s [hidden] toggling stays untouched. */
.stage-shell { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--s-4); }
.stage-shell::before {
  content: ""; grid-column: 1 / span 7; grid-row: 1 / span 2; z-index: 0;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-tile), var(--gloss);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: rise var(--d-slow) var(--ease) both;
}
.stage { display: contents; }
.stage-head { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 1; min-width: 0; padding: var(--s-8) var(--s-8) 0; display: grid; justify-items: start; }
.stage-head .notice { margin-top: var(--s-4); width: 100%; }
.stage-sub { margin-top: 6px; font-size: var(--fs-15); color: var(--text-2); }
.stage-main { grid-column: 1 / span 7; grid-row: 2; position: relative; z-index: 1; min-width: 0; padding: var(--s-6) var(--s-8) var(--s-8); display: grid; gap: var(--s-5); align-content: start; }
.stage-side { grid-column: 8 / span 5; grid-row: 1 / span 2; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.stage-side > .tile { padding: var(--s-6); }
.stage-foot { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-4); min-width: 0; }
/* right column follows the (usually taller) left tile on desktop */
@media (min-width: 961px) { #account-stage .stage-side, #order-stage .stage-side { position: sticky; top: 80px; align-self: start; } }

/* steps pill */
.steps-pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--fill); margin-bottom: var(--s-6); max-width: 100%; }
.steps-pill > li { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.steps-pill .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-12); font-weight: 700; background: var(--fill-2); color: var(--text-2); }
.steps-pill .n i { font-style: normal; }
.steps-pill .n svg { width: 12px; height: 12px; display: none; }
.steps-pill > li.done .n { background: var(--ok-bg); color: var(--ok-text); }
.steps-pill > li.done .n i { display: none; }
.steps-pill > li.done .n svg { display: block; }
.steps-pill > li.done { color: var(--text-2); }
.steps-pill > li.current { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20,18,40,.10), 0 6px 16px -8px rgba(20,18,40,.25); }
.steps-pill > li.current .n { background: var(--grad-ink); color: #fff; }
/* the done check is an aria-hidden svg, so the done state is spoken from this text */
.step-done { display: none; }
.steps-pill > li.done .step-done { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* stage 1: code */
.code-input { min-height: 52px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.input-wrap.has-lead .code-input { padding-right: var(--s-4); }
.code-input::placeholder { text-transform: none; letter-spacing: .02em; }
.catalog { display: grid; gap: var(--s-4); flex: 1; }
.catalog .tile-head { margin-bottom: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); align-content: start; }
.plan-tile { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fill); }
.plan-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* wide tiles: tag sits beside the name; phones (≈150px tiles) stack name, description, tag */
@media (min-width: 641px) {
  .plan-tile { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: center; }
  .plan-tile span { grid-column: 1 / -1; grid-row: 2; }
  .plan-tile small { grid-column: 2; grid-row: 1; margin-top: 0; }
}
.plan-tile.plus { background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.plan-tile strong { font-size: var(--fs-15); font-weight: 700; line-height: 1.3; }
.plan-tile span { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }
.plan-tile small { display: inline-flex; align-items: center; height: 20px; margin-top: 2px; padding: 0 7px; border-radius: 6px; font-size: var(--fs-12); font-weight: 600; background: var(--fill); color: var(--text-2); white-space: nowrap; }
.plan-tile.unavailable strong { color: var(--text-2); }
.plan-tile.unavailable small { color: var(--warn-text); background: var(--warn-bg); }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.trust-tile { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6); }
.trust-tile .ic { width: 40px; height: 40px; border-radius: 13px; background: var(--grad-soft); color: var(--accent-text); display: grid; place-items: center; }
.trust-tile .ic svg { width: 20px; height: 20px; }
.trust-tile b { font-size: var(--fs-15); font-weight: 700; display: block; }
.trust-tile span:not(.ic) { font-size: var(--fs-13); color: var(--text-2); }
.stage-side .trust-stack { display: grid; gap: var(--s-3); }
.stage-side .trust-tile { grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: var(--s-4) var(--s-5); }
.stage-side .trust-stack .trust-tile { padding: var(--s-4) var(--s-5); }
.trust-strip { display: none; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--text-2); }
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.trust-strip svg { width: 15px; height: 15px; color: var(--accent-text); }

/* stage 2: account */
.plan-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--grad-soft); border: 1px solid var(--line); }
.plan-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-btn); }
.plan-ic svg { width: 22px; height: 22px; }
.plan-body { flex: 1; min-width: 0; }
.plan-label { font-size: var(--fs-12); color: var(--text-2); font-weight: 600; letter-spacing: .04em; }
.plan-card h3 { font-size: var(--fs-20); font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.plan-sub { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.mode-pick { display: grid; gap: var(--s-3); }
.method-note { order: -1; font-size: var(--fs-14); color: var(--text-2); }
#login-modes[hidden] + .method-note { display: none; }
.mode-pick:has(> #login-modes[hidden]) { display: none; }
.field-note:empty { display: none; }
.field-note[data-tone="warn"] { color: var(--warn-text); }
.field-note[data-tone="secret"] { color: var(--ok-text); }
.field-note[data-tone="code"] { color: var(--text-2); }
.privacy-line { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fill); }
.privacy-line svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok-text); }
.session-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.session-hint a { font-weight: 600; }
#session-input { min-height: 160px; }
.confirmation .account-summary { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--grad-soft); border: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; }
.avatar svg { width: 22px; height: 22px; }
.account-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.account-label { font-size: var(--fs-12); color: var(--text-2); font-weight: 600; }
#account-email { font-size: var(--fs-17); font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.account-method { font-size: var(--fs-13); color: var(--text-2); }
.account-method:empty { display: none; }
.consent { align-items: flex-start; gap: 10px; font-size: var(--fs-14); line-height: 1.6; color: var(--text-2); }
.consent input { margin-top: 2px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); flex-wrap: wrap; font-size: var(--fs-13); color: var(--text-3); }
.form-foot a { font-weight: 600; }

/* session how-to */
.howto-tile { display: grid; gap: var(--s-4); flex: none; }
.howto-tile .tile-head { margin-bottom: 0; }
.howto { display: grid; gap: var(--s-4); }
.howto > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); }
.howto .n { width: 28px; height: 28px; border-radius: 9px; background: var(--grad-ink); color: #fff; font-size: var(--fs-13); font-weight: 700; display: grid; place-items: center; }
.howto-body { display: grid; gap: var(--s-2); font-size: var(--fs-14); color: var(--text-2); line-height: 1.6; padding-top: 2px; }
.howto-body b { color: var(--text); font-weight: 600; }
.howto-body code { font-family: var(--mono); font-size: .9em; background: var(--fill); padding: 1px 5px; border-radius: 4px; }
.url-card { gap: var(--s-2); padding: var(--s-3); }
.howto-url { font-family: var(--mono); font-size: var(--fs-13); color: var(--text); overflow-wrap: anywhere; }
.howto-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.howto-sub { font-size: var(--fs-13); color: var(--text-3); line-height: 1.5; }
.howto-keys { display: grid; gap: 4px; }
.howto-keys em { font-style: normal; font-weight: 600; color: var(--text-2); margin-right: 6px; }
kbd { font-family: var(--mono); font-size: var(--fs-12); padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); }
.howto-note code { color: inherit; }
.choose-tile .tile-head { margin-bottom: var(--s-2); }
.choose-tile .muted { line-height: 1.7; }
/* session mode: the how-to fills the right column, trust collapses to the strip inside the left tile */
#session-howto:not([hidden]) ~ .trust-stack, #session-howto:not([hidden]) ~ .choose-tile { display: none; }
#account-stage:has(#session-howto:not([hidden])) .trust-strip { display: flex; }
#account-stage:has(#confirmation:not([hidden])) .choose-tile { display: none; }

/* stage 3: order */
.order-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.orb-row { display: flex; align-items: center; gap: var(--s-5); padding-inline: 8px 0; }
.orb-text { min-width: 0; }
.orb-row h3 { font-size: var(--fs-24); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.orb-row p { font-size: var(--fs-14); color: var(--text-2); margin-top: 6px; line-height: 1.55; }
.orb svg { display: none; }
.orb[data-phase="queued"] .ic-clock, .orb[data-phase="processing"] .ic-clock, .orb[data-phase="confirming"] .ic-find,
.orb[data-phase="verification"] .ic-shield, .orb[data-phase="support"] .ic-help, .orb[data-phase="success"] .ic-check { display: block; }
.orb-glyph { display: none; }
.orb.ok { background: var(--ok-solid); box-shadow: 0 8px 20px -10px rgba(15,122,82,.7), inset 0 2px 6px rgba(255,255,255,.25); }
.orb.bad { background: var(--bad-solid); box-shadow: 0 8px 20px -10px rgba(194,50,58,.7), inset 0 2px 6px rgba(255,255,255,.25); }
.orb.warn { background: var(--warn-solid); color: #3A2600; box-shadow: 0 8px 20px -10px rgba(229,154,18,.7), inset 0 2px 6px rgba(255,255,255,.35); }
.orb.ok::before { background: linear-gradient(var(--ok), var(--ok)) border-box; }
.orb.bad::before { background: linear-gradient(var(--bad), var(--bad)) border-box; }
.orb.warn::before { background: linear-gradient(var(--warn), var(--warn)) border-box; }

.tube { box-shadow: inset 0 1px 2px rgba(20,18,40,.14), inset 0 -1px 0 var(--tube-edge); }
.tube::before { opacity: var(--tube-sheen); }
.liquid-track { margin-top: 2px; }
.liquid-track > li.warn .liquid-label { color: var(--warn-text); }
.liquid-track > li.warn .tube { box-shadow: inset 0 1px 2px rgba(20,18,40,.14), 0 8px 18px -6px rgba(229,154,18,.5); }
.liquid-track > li.error .tube { box-shadow: inset 0 1px 2px rgba(20,18,40,.14), 0 8px 18px -6px rgba(229,72,77,.5); }
.liquid-status .st { flex: 1 1 auto; min-width: 0; align-items: baseline; }
.liquid-status .st::before { align-self: center; }
.liquid-note b { color: var(--text); font-weight: 600; }
.liquid[data-tone="error"] .liquid-note { display: none; }
.liquid[data-tone="warn"] .st { color: var(--warn-text); }
.liquid[data-tone="error"] .st { color: var(--bad-text); }
.liquid[data-tone="done"] .liquid-note svg { color: var(--ok-text); }

.verify-area { display: grid; gap: var(--s-3); }
.verify-area:not(:has(> :not([hidden]))) { display: none; }
#verification-help { text-align: center; }
.otp-box { display: grid; gap: 4px; justify-items: center; text-align: center; padding: var(--s-4); border-radius: var(--r-md); background: var(--fill); }
.otp-box span { font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
#otp-code { font-size: var(--fs-17); font-weight: 600; color: var(--text-2); line-height: 1.5; }   /* waiting text */
#otp-code.has-code { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: .2em; line-height: 1.3; font-variant-numeric: tabular-nums; }
#otp-note { font-size: var(--fs-12); color: var(--text-2); }

.kv dd { overflow-wrap: anywhere; min-width: 0; }
.kv > div { border-bottom-color: var(--line); }
.kv > div:first-child { border-top: 1px solid var(--line); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.order-hint { text-align: center; }
.auto-inline { display: none; }
.stage-main:has(.liquid[data-tone="error"]) .auto-inline { display: inline; }
.exit-order { justify-self: center; font-size: var(--fs-14); }

.timeline > li.warn::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.timeline > li.bad::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.timeline .d { line-height: 1.6; }
.timeline > li:not(.done, .now, .warn, .bad) .d { color: var(--text-3); }

/* guide */
.guide, .faq-ed { scroll-margin-top: 72px; }
#message, #confirmation, #stage-title { scroll-margin-top: 88px; }
.guide { padding-top: var(--s-14); display: grid; gap: var(--s-5); }
.section-head { display: grid; gap: var(--s-2); justify-items: start; }
.guide-list { list-style: none; }
.guide-list > li { display: grid; gap: var(--s-2); align-content: start; justify-items: start; }
.guide-icon { width: 40px; height: 40px; border-radius: 13px; background: var(--grad-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: var(--s-1); }
.guide-icon svg { width: 20px; height: 20px; }
.guide-step { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-eyebrow); color: var(--text-3); }
.guide-list h3 { font-size: var(--fs-17); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.guide-list p { font-size: var(--fs-14); color: var(--text-2); }

/* FAQ */
.faq-ed { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); padding: var(--s-14) 0 var(--s-10); }
.faq-ed > div:first-child { display: grid; gap: var(--s-2); align-content: start; justify-items: start; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 16px 4px; font-weight: 600; font-size: var(--fs-15); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--text-3); transition: transform var(--d-base) var(--ease); line-height: 1; flex: none; }
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--accent-text); }
.faq-list details p { padding: 0 4px 16px; color: var(--text-2); font-size: var(--fs-14); max-width: 62ch; overflow-wrap: anywhere; }

/* footer */
.footer p { max-width: 70ch; }
.footer a { font-weight: 600; white-space: nowrap; }

@media (max-width: 960px) {
  .stage-shell { grid-template-rows: auto auto auto auto; }
  .stage-shell::before, .stage-head, .stage-main, .stage-side { grid-column: 1 / -1; }
  .stage-side { grid-row: 3; margin-top: var(--s-4); }
  .stage-foot { grid-row: 4; }
  .at-wide { display: none; }
  .at-narrow { display: inline; }
  .span-4 { grid-column: span 12; }
  .faq-ed { grid-template-columns: 1fr; gap: var(--s-5); }
  .stage-side .trust-stack { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .brand-name { font-size: var(--fs-15); }
  .topbar { background: var(--topbar-solid); }
  .nav a, .nav button { height: 44px; }
  .brand { min-height: 44px; }
  .nav .btn { margin-left: 2px; height: 44px; padding: 0 10px; border-radius: var(--r-sm); }
  .hero-ed { padding: var(--s-6) 0 var(--s-4); }
  .hero-ed .lede { font-size: var(--fs-15); }
  .stage-shell::before { border-radius: 18px; background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stage-head { padding: var(--s-5) var(--s-5) 0; }
  .stage-main { padding: var(--s-5); gap: var(--s-4); }
  .stage-side > .tile { padding: var(--s-5); }
  .steps-pill { display: flex; width: 100%; margin-bottom: var(--s-4); }
  .steps-pill > li { flex: 1; padding: 0 8px 0 5px; justify-content: center; }
  /* dots only on sight; the names stay in the accessibility tree */
  .steps-pill > li:not(.current) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-sub { font-size: var(--fs-14); }
  .stage-foot.trust-row, .stage-side .trust-stack { display: none; }
  .trust-strip { display: flex; }
  .plan-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: var(--s-4); gap: var(--s-3); }
  .plan-card .badge { grid-column: 2; justify-self: start; }
  .plan-card h3 { font-size: var(--fs-17); }
  /* iOS zooms any focused field under 16px */
  .input, textarea.input { font-size: 16px; }
  .code-input { letter-spacing: .02em; }
  .input-affix { top: 2px; bottom: 2px; right: 2px; height: auto; min-width: 56px; }
  .btn-sm { height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); }
  .seg.sm { display: flex; flex-wrap: wrap; }
  .seg.sm > button { flex: 1 1 30%; height: 44px; padding: 0 2px; }
  .seg > button { height: 44px; padding: 0 4px; gap: 6px; }
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .form-foot a, .session-hint a, .footer a { display: inline-flex; align-items: center; min-height: 44px; gap: 4px; }
  .session-hint { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
  .confirmation .account-summary { position: relative; }
  .account-label { padding-right: 56px; min-height: 30px; }
  #account-email { font-size: var(--fs-15); }
  #change-account { position: absolute; top: 2px; right: var(--s-2); padding: 0 var(--s-2); }
  .consent { min-height: 44px; }
  .consent input { width: 22px; height: 22px; }
  .orb-row { gap: var(--s-4); padding-inline: 6px 0; }
  .orb-row h3 { font-size: var(--fs-20); }
  #otp-code.has-code { font-size: 24px; }
  .howto-actions .btn { flex: 1 1 auto; }
  .actions .btn { padding: 0 var(--s-2); }
  .guide-list > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  .guide-icon { grid-row: 1 / span 3; margin: 0; }
  .guide-list > li > :not(.guide-icon) { grid-column: 2; }
  .faq-ed { padding: var(--s-10) 0 var(--s-8); }
  .guide { padding-top: var(--s-10); }
  .footer { padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .brand-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-shell::before { animation: none; }
  .liquid-track > li.active .fluid { animation: none; transform: none; background: linear-gradient(180deg, var(--g2) 0%, var(--g1) 100%); }   /* static two-tone, no waves or sweep */
  .liquid-track > li.active .fluid::before, .liquid-track > li.active .fluid::after, .liquid-track > li.active .tube::after { animation: none; display: none; }
  .orb::before, .orb svg, .liquid-status .st::before, .liquid-status .poll svg, .timeline > li.now::before, .badge.busy::before, .live-dot { animation: none !important; }
}

/* ===== 代理站 Logo ===== */
.brand-mark.has-logo { background: none; box-shadow: none; overflow: hidden; }
.brand-mark.has-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 公告 */
.ann-bar { display: grid; gap: var(--s-2); }
.ann-bar[hidden] { display: none; }
.ann-card { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 14px; border: 1px solid var(--line); background: var(--accent-bg); min-width: 0; }
.ann-card.is-important { background: var(--warn-bg); border-color: var(--warn); }
.ann-main { flex: 1; min-width: 0; }
.ann-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ann-tag { padding: 0 7px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; }
.ann-text { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ann-close { flex: none; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.ann-close:hover { color: var(--text); }
.ann-page { margin-top: var(--s-4); }