/* ==================================================================
   ANDON — sales setup flow (Faz 4 skeleton)
   Design line: Apple spirit on VERA/Andon dark premium.
   Tokens match frontend/styles.css (panel) so the two surfaces feel
   like one product. Screens: onboarding → configurator → review.
   ================================================================== */

/* ------------------------------------------------------------------
   Tokens — dark (default, VERA soul)
------------------------------------------------------------------ */
:root {
  --bg: #0b0b0e;
  --bg-2: #101014;
  --surface: #15151a;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: #15151a;
  --panel-hi: rgba(255, 255, 255, 0.07);
  --ink: #f5f5f7;
  --ink-2: #e4e4ea;
  --muted: #a1a1a6;
  --faint: #7d7d84;
  --accent: #0a84ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --accent-strong: #3a9bff;
  --brand: #1863DC;
  --brand-glow: rgba(24, 99, 220, 0.5);
  --font-brand: "Press Start 2P", monospace;
  --ok: #30d158;
  --ok-soft: rgba(48, 209, 88, 0.12);
  --warn: #ffd60a;
  --border: rgba(255, 255, 255, 0.09);
  --border-soft: rgba(255, 255, 255, 0.055);
  --hover: rgba(255, 255, 255, 0.07);
  --nav-bg: rgba(11, 11, 14, 0.82);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --glow-1: rgba(10, 132, 255, 0.11);
  --glow-2: rgba(48, 209, 88, 0.05);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------
   Tokens — light (Apple surface)
------------------------------------------------------------------ */
html.theme-light {
  --bg: #f5f5f7;
  --bg-2: #eef0f2;
  --surface: #ffffff;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: #ffffff;
  --panel-hi: rgba(20, 20, 24, 0.045);
  --ink: #1d1d1f;
  --ink-2: #333338;
  --muted: #6e6e73;
  --faint: #8e8e93;
  --accent: #0071e3;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --accent-strong: #0077ed;
  --ok: #1f9d4f;
  --ok-soft: rgba(31, 157, 79, 0.11);
  --border: rgba(20, 20, 24, 0.1);
  --border-soft: rgba(20, 20, 24, 0.055);
  --hover: rgba(20, 20, 24, 0.055);
  --nav-bg: rgba(250, 250, 252, 0.84);
  --shadow: 0 18px 44px rgba(29, 29, 31, 0.1);
  --glow-1: rgba(0, 113, 227, 0.08);
  --glow-2: rgba(31, 157, 79, 0.045);
  color-scheme: light;
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.62 var(--font);
  /* Phone screens stay 1:1 — a zoomed body makes the card overflow and
     the whole layout feel loose. The desktop scale lives below. */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  position: relative;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  zoom: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  body { zoom: 1.3; }
}

button { font-family: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Background wash — same calm glow as the panel */
.bg-glow,
.bg-cloud {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-glow {
  background: radial-gradient(1100px 480px at 50% -8%, var(--glow-1), transparent 62%);
}

.bg-cloud {
  background:
    radial-gradient(820px 440px at 90% 112%, var(--glow-2), transparent 60%),
    radial-gradient(520px 300px at 8% 96%, var(--glow-2), transparent 55%);
}

.topbar,
.page,
.foot { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   Top bar — Andon_ brand + lang + theme (same bones as the panel)
------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border-soft);
}

.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-name {
  font-family: var(--font-brand);
  font-size: 20px;
  letter-spacing: 0.08em;
  font-weight: 400;
  line-height: 1.4;
  color: var(--brand);
  user-select: none;
}

.brand-name .a,
.brand-name .d,
.brand-name .n,
.brand-name .cursor { color: var(--brand); }
.brand-name .cursor { animation: blink 1.05s steps(1) infinite; }

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 51%, 100% { opacity: 0; }
}

html:not(.theme-light) .brand-name { text-shadow: 0 0 18px var(--brand-glow); }

.brand-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-left: 4px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  flex-shrink: 0;
}

.lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.lang-btn:hover { color: var(--ink); }

.lang-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.theme-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px 9px;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.theme-switch:hover { color: var(--ink); border-color: var(--accent); }

.theme-switch svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Back-to-home — secondary escape from anywhere in the setup flow */
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 11px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}

.home-link:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--panel-hi);
  text-decoration: none;
}

.home-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------
   Step strip — 6-step VISION flow
------------------------------------------------------------------ */
.stepbar {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(11, 11, 14, 0.5);
}

html.theme-light .stepbar { background: rgba(250, 250, 252, 0.6); }

.stepbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Back — a quiet, secondary text link at step-strip height. It never
   competes with the primary CTA; low contrast, full only on hover. */
.step-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: -7px;
  padding: 5px 7px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.step-back svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-back:hover { color: var(--ink); background: var(--panel-hi); }
.step-back:focus-visible { color: var(--ink); }

.sp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  /* Six labelled steps + Back cannot share one narrow line (EN 785px of
     content; DE is wider still). Wrap to a second row instead of letting
     the strip run past the right edge. Measured 2026-10-02. */
  flex-wrap: wrap;
}

.sp-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
  cursor: default;
}

.sp-step .sp-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  background: var(--panel);
}

.sp-step .sp-label { font-weight: 550; }

.sp-step.done { color: var(--muted); cursor: pointer; }
.sp-step.done:hover { color: var(--accent); }
.sp-step.done .sp-num {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sp-step.current { color: var(--ink); }
.sp-step.current .sp-num {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}

.step-status {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Page shell
------------------------------------------------------------------ */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 22px 60px;
  flex: 1;
  width: 100%;
}

.page-head { max-width: 720px; margin-bottom: 30px; }

.page-head .kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.page-head h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-weight: 700;
}

.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
}

.section {
  margin: 44px 0 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-head .hint {
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------------------------------------------
   Welcome (screen 1) — one sentence of value
------------------------------------------------------------------ */
.welcome {
  max-width: 760px;
  margin: 10px auto 0;
  text-align: center;
}

.welcome h1 {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.welcome .value {
  font-size: 18px;
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 620px;
}

.welcome-points {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.wp {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ------------------------------------------------------------------
   Package cards (screen 1)
------------------------------------------------------------------ */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pkg-card {
  appearance: none;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.12s var(--ease), box-shadow 0.2s var(--ease);
}

.pkg-card:hover {
  border-color: var(--border);
  background: var(--panel-hi);
  transform: translateY(-1px);
}

.pkg-card:active { transform: translateY(0) scale(0.99); }

.pkg-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 30px rgba(10, 132, 255, 0.1);
}

.pkg-card .pkg-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--panel);
}

.pkg-card.selected .pkg-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.pkg-card .pkg-check svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pkg-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
  align-self: flex-start;
  margin-bottom: 6px;
}

.pkg-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pkg-price {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.pkg-price .per {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.pkg-usd {
  font-size: 12px;
  color: var(--faint);
}

/* Founding offer — the live rate plus the struck regular rate it replaces.
   The struck amount is the server's regular price, never a hardcoded one. */
.price-was {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--faint);
  margin-left: 5px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.found-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.found-badge-top {
  align-self: flex-start;
  margin-bottom: 6px;
}

.pkg-blurb {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 6px;
}

.pkg-cap {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pkg-cap svg {
  width: 13px;
  height: 13px;
  stroke: var(--ok);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Bigger-teams promise — one thin line under the cards (26.09: Crew and
   Fleet are priced cards now, so this is only the human conversation for
   a team nobody has a number for yet). */
.pkg-big-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}

.pkg-big-note { color: inherit; }

.pkg-big-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.pkg-big-link:hover { color: var(--accent); }

/* The ceiling answer — one line, spoken once, never a shake. */
.pkg-cap-note {
  margin: 10px 0 0;
  color: var(--ink-2);
}

.pkg-cap-note[hidden] { display: none; }

/* The quota line — "Free covers up to N, this team needs a paid plan",
   said while the count is still being chosen. Same rhythm as the ceiling
   note, one step louder so it is read before the last screen. */
.pkg-quota-note {
  margin: 10px 0 0;
  color: var(--accent-strong);
}

.pkg-quota-note[hidden] { display: none; }

/* ------------------------------------------------------------------
   Agent count selector (screen 1)
------------------------------------------------------------------ */
.count-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  max-width: 720px;
  margin-top: 40px;
}

.count-copy { flex: 1; min-width: 220px; }

.count-copy .q {
  font-size: 16px;
  font-weight: 650;
  margin: 0 0 2px;
}

.count-copy .hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.count-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}

.count-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: var(--panel-hi);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.count-btn:hover { background: var(--accent); color: var(--accent-ink); }
.count-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--panel);
  color: var(--muted);
}
/* At a plan's ceiling the "+" stays pressable on purpose — the press is
   how a visitor asks "why not more?", and it answers with one line. So it
   reads as "at the end" (dimmed, no hover fill), not as a live control. */
.count-btn[aria-disabled="true"] {
  opacity: 0.55;
  background: var(--panel);
  color: var(--muted);
}
.count-btn[aria-disabled="true"]:hover {
  background: var(--panel-hi);
  color: var(--ink);
  cursor: help;
}

.count-val {
  min-width: 60px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.count-val sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s var(--ease), transform 0.12s var(--ease),
    box-shadow 0.18s var(--ease);
}

.cta:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10, 132, 255, 0.28); }
.cta:active { transform: translateY(1px) scale(0.99); }

.cta:disabled {
  background: var(--border);
  color: var(--faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cta:disabled:hover,
.cta:disabled:active {
  background: var(--border);
  color: var(--faint);
  transform: none;
  box-shadow: none;
}

.cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.ghost:hover { color: var(--ink); border-color: var(--accent); background: var(--panel-hi); }

.cta-note {
  font-size: 12.5px;
  color: var(--faint);
  max-width: 380px;
}

/* ------------------------------------------------------------------
   Preset grid + cards (screen 2)
------------------------------------------------------------------ */
.cfg-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 22px;
  align-items: start;
}

@media (min-width: 1180px) {
  .cfg-layout.wide { grid-template-columns: minmax(0, 1fr) 396px; }
}

.cfg-main { min-width: 0; }

.grid-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 26px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.grid-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.grid-label:first-child { margin-top: 0; }

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.preset-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    box-shadow 0.2s var(--ease), transform 0.12s var(--ease);
}

.preset-card:hover { background: var(--panel-hi); }
.preset-card:active { transform: scale(0.995); }

.preset-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 30px rgba(10, 132, 255, 0.08);
}

.preset-card.in-team { border-color: rgba(48, 209, 88, 0.4); }

.pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.pc-name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.pc-tags { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }

.pc-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px 9px;
}

.pc-tag.edited { color: var(--warn); border-color: rgba(255, 214, 10, 0.35); }
.pc-tag.in { color: var(--ok); border-color: rgba(48, 209, 88, 0.35); }

.pc-focus {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.pc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pc-add {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-hi);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 13px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.pc-add:hover { border-color: var(--accent); color: var(--accent); }

.pc-add.in {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(48, 209, 88, 0.35);
}

.pc-reset {
  appearance: none;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pc-reset:hover { color: var(--ink); }
.pc-reset[hidden] { display: none; }

/* ------------------------------------------------------------------
   Strength bars (1–5 · +/− · keyboard +/− at focus)
------------------------------------------------------------------ */
.bars-head {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 2px 0 6px;
}

/* Focus budget — the "X of 20 focus points" counter above a teammate's bars */
.bars-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 6px;
}

.bars-head-row .bars-head,
.bars-head-row .pb-title {
  margin: 0;
}

.focus-counter {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.focus-counter.full {
  color: var(--warn);
}

.focus-note {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--warn);
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.22);
  border-radius: 8px;
  padding: 5px 9px;
  margin-top: 2px;
}

.focus-note[hidden] { display: none; }

.rr-total {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rr-total.full {
  color: var(--warn);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-radius: 8px;
}

.bar-row:focus-visible,
.bar-row.focused { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar-label {
  flex: 0 0 104px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 60px;
}

.bar-cell {
  flex: 1;
  height: 7px;
  border-radius: 3px;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  transition: background 0.18s var(--ease);
}

.bar-cell.on { background: var(--accent); border-color: var(--accent); }
.bar-cell.off.same { background: var(--panel-hi); }

.bar-val {
  flex: 0 0 18px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bar-btns {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

.bar-btn {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.bar-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.bar-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ------------------------------------------------------------------
   Preview panel (screen 2) — right on wide, below on small
------------------------------------------------------------------ */
.preview-panel {
  position: sticky;
  /* Pinned like a rock: the panel never rides the page — it sticks at the
     top offset and, if it ever grows past the viewport, scrolls INSIDE
     itself instead of pushing the layout around. */
  top: 90px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The selected teammate's face, large — the preview leads with WHO you
   are tuning, the same SVG set the roster chips use. */
.preview-face {
  width: 84px;
  height: 84px;
  margin: 2px auto 0;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  flex: 0 0 auto;
}
.preview-face svg { display: block; width: 100%; height: 100%; }

.preview-empty {
  color: var(--faint);
  font-size: 14px;
  margin: auto;
  text-align: center;
  padding: 30px 8px;
}

.preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.preview-head h3 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }

.preview-focus {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.preview-block {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  margin-top: 4px;
}

.preview-block .pb-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 6px;
}

.preview-block .pb-copy {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

.shines {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.shines span {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 11px;
}

.preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

/* ------------------------------------------------------------------
   Roster (screen 2 + review list)
------------------------------------------------------------------ */
.roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  color: var(--faint);
  font-size: 13.5px;
  text-align: center;
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  /* One line (avatar + name + bars + total + edit) needs ~570px; below
     that it wraps instead of stretching the review column sideways. */
  flex-wrap: wrap;
}

.rr-name {
  flex: 0 0 170px;
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-bars {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.rr-mini {
  position: relative;
  flex: 0 0 46px;
  height: 6px;
  border-radius: 3px;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.rr-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.2s var(--ease);
}

.rr-del {
  appearance: none;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--faint);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}

/* --- Configurator roster: two-line stacked rows (identity + avatars) --- */
.roster-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.rr-top,
.rr-base {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rr-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
}

.rr-name-input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.rr-name-input::placeholder { color: var(--faint); font-weight: 500; }
.rr-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.rr-avatars {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Avatar picker — the active face sits at the row's right end; clicking it
   opens the face menu anchored to its right edge (it unfolds to the LEFT),
   and options grow on hover so the pick is easy to see. One menu open at
   a time; a click anywhere else closes it. */
.rr-avatar-wrap {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

.rr-avatar-current {
  appearance: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.rr-avatar-current:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.rr-avatar-current > svg { display: block; width: 100%; height: 100%; }

.rr-avatar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: none;
  grid-template-columns: repeat(4, 34px);
  gap: 6px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(0, 0, 0, 0.25));
}
.rr-avatar-wrap.open .rr-avatar-menu { display: grid; }
.rr-avatar-menu .rr-avatar-opt {
  width: 34px;
  height: 34px;
  transition: transform 0.14s var(--ease), border-color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}
.rr-avatar-menu .rr-avatar-opt:hover {
  transform: scale(1.24);
  border-color: var(--accent);
  z-index: 1;
  position: relative;
}

/* Persona — the row-level entry and the modal it opens. */
.rr-persona-btn {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.rr-persona-btn:hover { color: var(--ink); border-color: var(--accent); }
.rr-persona-btn.set { color: var(--accent); border-color: var(--accent); }

.persona-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.persona-backdrop:not([hidden]) { display: flex; }

.persona-modal {
  width: min(520px, 100%);
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.persona-modal h3 { margin: 0 0 4px; font-size: 17px; }
.persona-modal .persona-who { color: var(--accent); font-weight: 700; font-size: 13px; margin: 0; }
.persona-modal textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  appearance: none;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 12px;
  margin: 12px 0 8px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.persona-modal textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.persona-modal .persona-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.rr-avatar-opt {
  appearance: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
.rr-avatar-opt:hover {
  border-color: var(--border);
  transform: translateY(-1px);
}
.rr-avatar-opt.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  background: var(--accent-soft);
}

/* Roster chip and the six picker buttons hold the robot set (inline SVG at
   64px) — fit it to the box, the picker is only 32px wide. */
.rr-avatar > svg,
.rr-avatar-opt > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .rr-top { flex-wrap: wrap; }
  .rr-bars { flex: 1 1 100%; order: 2; }
  .rr-base { flex-wrap: wrap; }
}

.rr-del:hover {
  color: var(--err, #ff453a);
  border-color: rgba(255, 69, 58, 0.4);
  background: rgba(255, 69, 58, 0.08);
}

.rr-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
  background: rgba(255, 214, 10, 0.1);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ------------------------------------------------------------------
   Brain choice (screen 2)
------------------------------------------------------------------ */
.brain-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 640px;
}

.brain-card {
  appearance: none;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.12s var(--ease);
}

.brain-card:hover { background: var(--panel-hi); transform: translateY(-1px); }

.brain-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.brain-card b {
  display: block;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.brain-card span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* ------------------------------------------------------------------
   Review (screen 3)
------------------------------------------------------------------ */
.rev-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  align-items: start;
}

@media (min-width: 980px) { .rev-grid { grid-template-columns: minmax(0, 1fr) 396px; } }

.rev-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
}

.rs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid var(--border-soft);
}

.rs-row:first-child { border-top: none; }

.rs-key {
  flex: 0 0 150px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.rs-val { flex: 1; font-size: 15.5px; font-weight: 600; }

/* The plan row can hold the founding badge next to the live price. */
.rs-price { display: inline-flex; align-items: center; flex-wrap: wrap; }

.rs-edit {
  appearance: none;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}

.rs-edit:hover { text-decoration: underline; }

.rev-cta-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rev-cta-card p { margin: 0; }

.rev-cta-card .rev-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.rev-email input,
.done-email input {
  font-family: var(--font, inherit);
  font-size: 14px;
  color: var(--ink);
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s var(--ease, ease);
}

.rev-email input:focus,
.done-email input:focus {
  border-color: var(--accent);
}

.done-email {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.done-email[hidden] { display: none; }

.done-email input { flex: 1; min-width: 0; }

.road-hint {
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  line-height: 1.5;
}

.rev-team-list { margin-top: 34px; }

.rev-team-list h2 { font-size: 20px; margin: 0 0 12px; }

/* Start success — real workspace created (id shown, checkout offered) */
.done-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  text-align: center;
  max-width: 560px;
  margin: 30px auto;
}

.done-panel .done-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 1px solid rgba(48, 209, 88, 0.35);
  display: grid;
  place-items: center;
  color: var(--ok);
}

.done-panel .done-ico svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done-panel h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.01em; }

.done-panel p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }

.done-panel .done-id {
  font-family: var(--font, inherit);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
  background: var(--panel-strong);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  display: inline-block;
  padding: 6px 12px;
  margin: 0 0 16px;
  user-select: all;
}

.done-panel .cta { display: inline-flex; margin: 4px 0 6px; }

.done-panel .cta-note { font-size: 12.5px; }

.done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.done-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 2px 0 6px; }

.done-cta-row .cta { margin: 0; }

.cta-buy {
  background: var(--panel);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.cta-buy:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: 0 8px 22px rgba(10, 132, 255, 0.16);
}

.cta-note.err { color: var(--err); }

.done-error {
  font-size: 13px;
  color: var(--err);
  margin: 14px 0 0;
}

/* ------------------------------------------------------------------
   First task panel — the real live moment on the done screen. The band
   below renders actual task stream frames (not animation), so live-line
   variants mirror task states: run / waiting / needs-fix / done / failed.
------------------------------------------------------------------ */
.ft-panel {
  max-width: 560px;
  margin: 34px auto 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 30px 30px;
}

.ft-panel h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }

.ft-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.ft-panel label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}

.ft-panel input[type="text"],
.ft-panel textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14.5px;
  padding: 10px 13px;
  margin: 0 0 14px;
  font-family: var(--font, inherit);
}

.ft-panel textarea { resize: vertical; min-height: 76px; }

.ft-panel input[type="text"]:focus,
.ft-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ft-status { min-height: 1.4em; font-size: 13px; color: var(--muted); margin: 14px 0 0; }

.ft-status.err { color: var(--err); }

.ft-panel .live-band { max-width: none; margin: 16px 0 0; border: none; border-top: 1px solid var(--border-soft); border-radius: 0; }

.live-line.live-ok { color: var(--ok); border-color: rgba(48, 209, 88, 0.35); background: var(--ok-soft); }

.live-line.live-err { color: var(--err); border-color: rgba(255, 69, 58, 0.35); background: var(--err-soft); }

.live-line.live-warn { color: var(--warn); border-color: rgba(255, 214, 10, 0.3); }

.live-line.live-run { color: var(--accent); }

/* ------------------------------------------------------------------
   Checkout success / cancel pages — same cards as the done screen,
   full-page variants so the return links land in the corner.
------------------------------------------------------------------ */
.ok-page {
  display: grid;
  place-items: center;
  padding: 56px 20px 90px;
  min-height: calc(100vh - 200px);
}

.ok-card {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 38px;
  text-align: center;
}

.ok-kicker {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}

.ok-card h1 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.01em; }

.ok-card .ok-sub { margin: 0 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.ok-done-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 1px solid rgba(48, 209, 88, 0.35);
  display: grid;
  place-items: center;
  color: var(--ok);
}

.ok-done-ico svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ok-wait { display: grid; place-items: center; gap: 16px; margin: 8px 0 18px; }

.ck-spin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: ck-spin 0.9s linear infinite;
}

@keyframes ck-spin {
  to { transform: rotate(360deg); }
}

.ok-wait .ok-wait-title { font-size: 15px; font-weight: 650; }

.ok-summary {
  text-align: left;
  border-top: 1px solid var(--border-soft);
  margin: 6px 0 22px;
  padding: 6px 0 0;
}

.ok-summary .ok-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14px;
}

.ok-summary .ok-row + .ok-row { border-top: 1px solid var(--border-soft); }

.ok-summary .ok-row b { width: 40%; color: var(--muted); font-weight: 600; }

.ok-summary .ok-row span { flex: 1; color: var(--ink); font-weight: 650; }

.ok-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

.ok-cta-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

.ok-hint { font-size: 12.5px; color: var(--faint); margin: 16px 0 0; }

/* ------------------------------------------------------------------
   Live activity band — done screen (real stream frames: new task and
   status transitions arrive via the workspace task stream and render
   as feed lines; the band is just the container).
------------------------------------------------------------------ */
.live-band {
  width: 100%;
  max-width: 560px;
  margin: 34px auto 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.live-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
  animation: live-pulse 2.2s var(--ease) infinite;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 var(--ok-soft); }
  70% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

.live-feed {
  height: 218px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-line {
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
}

.live-running .live-line {
  animation: live-in 0.45s var(--ease) both;
}

@keyframes live-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .live-running .live-line { animation: none; }
  .live-feed { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--border-soft);
  padding: 16px 22px 26px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
}

/* ------------------------------------------------------------------
   Mobile — grid narrows, step labels hide, preview unsticks
------------------------------------------------------------------ */
@media (max-width: 1020px) {
  .cfg-layout,
  .rev-grid {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    position: static;
    order: -1;
  }
}

@media (max-width: 820px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .brain-row { grid-template-columns: 1fr; }
  .home-link { padding: 6px 8px; font-size: 12px; }
}

@media (max-width: 640px) {
  .topbar-in { padding: 8px 14px; gap: 10px; }
  .brand-sub { display: none; }
  .home-link { padding: 6px 7px; }
  .home-link .home-label { display: none; }
  .stepbar-in { padding: 6px 14px; gap: 8px; }
  .sp-step .sp-label { display: none; }
  .sp-step { padding: 3px 5px; }
  .step-status { display: none; }
  .step-back span { display: none; }
  .step-back { margin-left: -4px; padding: 4px 6px; }
  .page { padding: 24px 14px 44px; }
  .rs-row { flex-wrap: wrap; gap: 8px; }
  .rs-key { flex: 0 0 100%; }
  .rs-edit { margin-left: auto; }
  .bar-label { flex-basis: 86px; }
  .rr-name { flex-basis: 120px; }
}
/* BYO-LLM key field (Crew & Fleet, "Your own LLM") — stub: nothing stored. */
.brain-own { margin-top: 12px; display: grid; gap: 6px; }
.brain-own[hidden] { display: none; }
.brain-own label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.brain-own input {
  width: 100%; padding: 10px 12px; font: 13px/1.4 var(--font);
  color: var(--ink); background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
}
.brain-own input:focus { outline: none; border-color: var(--accent); }
.brain-own .hint { font-size: 12px; color: var(--muted); }