:root { --bg: #000000; --bg-card: #0a0a0a; --bg-card-2: #111111; --bg-hover: #181818; --bg-input: #0d0d0d; --text: #ffffff; --text-2: #aaaaaa; --text-3: #666666; --accent: #4f46e5; --accent-h: #6366f1; --green: #22c55e; --yellow: #f59e0b; --red: #ef4444; --red-h: #dc2626; --border: #1a1a1a; --border-2: #282828; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 9999px; --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --overlay-heavy: #000000e6; --overlay-medium: #000000d9; --overlay-light: #00000099; --shadow-red: #ef444466; --shadow-accent: #4f46e526; --shadow-dark: #00000080; --tint-white: #ffffff0d; --tint-yellow: #f59e0b1a; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Kill the white flash between page navigations / SW reloads. Without this, Chromium paints the default white background for ~50-100ms before the body CSS loads, which is very visible on a dark-themed kiosk display. color-scheme: dark tells the browser to use dark defaults for EVERYTHING — initial paint, scrollbars, form controls, the "about:blank" frame between navigations. */ background: var(--bg, #000); color-scheme: dark; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; overscroll-behavior: none; /* Defensive overflow-x: hidden on the body so no single child (the savings table's min-width: 560px, a runaway 
, a long URL)
     can push the page wider than the viewport and trigger Safari /
     Chrome to zoom the entire page out to fit on mobile. Do NOT also
     put this on  — a previous attempt did, and combined with
     `html { height: 100% }` it turned the page into a modal-style
     fixed-height scroll container, breaking VERTICAL scroll entirely.
     body is enough here: the viewport scrolls vertically as normal,
     horizontal overflow from any child gets hidden inside body. */
  overflow-x: hidden;
}

/* ── App layout (flex column so footer naturally pins to bottom of content) ──
   This is the sticky-footer pattern: #app is the flex container, nav takes
   auto height, main is flex:1 and expands to fill, footer takes auto height
   at the bottom. No position:fixed shenanigans — the footer just sits at
   the bottom of the content like the landing page footer does. When content
   is taller than the viewport, you scroll down and the footer is at the end
   of the document. When content is shorter, main expands to fill and the
   footer is pinned to the bottom of the viewport. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
#app > main,
#app > .main { flex: 1 0 auto; }
#app > footer,
#app > .footer { flex: 0 0 auto; }
#app > #land-body { flex: 1 0 auto; display: flex; flex-direction: column; }
#app > #land-body > .footer { margin-top: auto; }

/* ── LOGIN ── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: var(--text);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--bg);
}

.login-title { font-size: 24px; font-weight: 700; }
.login-subtitle { color: var(--text-3); font-size: 14px; margin: 4px 0 32px; }

.login-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.login-input:focus { border-color: var(--accent); }
.login-input::placeholder { color: var(--text-3); }

.login-btn {
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: var(--accent);
  color: var(--text);
  border: none;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.login-btn:hover { background: var(--accent-h); }
.login-btn:active { transform: scale(0.98); }
.login-btn:disabled { opacity: 0.4; }
.login-error { color: var(--red); font-size: 14px; margin-top: 16px; min-height: 22px; }

/* Strength meter */
.strength-bar-wrap { margin: 8px 0; }
.strength-bar {
  height: 4px;
  background: var(--border-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.3s, background 0.3s;
}
.strength-label {
  font-size: 12px;
  margin-top: 6px;
  font-family: var(--mono);
}

/* ── NAV ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-t));
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: var(--overlay-medium);
}

.nav-left { display: flex; align-items: center; gap: 12px; }

.nav-brand {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-brand-icon {
  width: 28px;
  height: 28px;
  background: var(--text);
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--bg);
}

.nav-links { display: none; }
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 12px;
  gap: 2px;
  z-index: 99;
}

.nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.nav-link:hover, .nav-link:active { background: var(--bg-hover); color: var(--text); }
.nav-link.active { color: var(--text); background: var(--bg-card-2); }

/* On desktop (≥768px), show nav links as a horizontal bar and hide the
   hamburger. On mobile, the hamburger toggles the dropdown (.open). */
@media (min-width: 768px) {
  .nav-links {
    display: flex !important;
    flex-direction: row;
    gap: 2px;
    position: static;
    background: none;
    border: none;
    padding: 0;
  }
  .nav-hamburger { display: none !important; }
  .nav-link { width: auto; font-size: 13px; padding: 8px 10px; }
}

.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-hamburger {
  display: flex;
  background: none;
  border: none;
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.nav-user-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.nav-logout {
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── MAIN ── */
.main {
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 20px 0 10px;
}

.last-updated {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
  margin-bottom: 8px;
}

/* ── STATUS CARDS ── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.status-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
}

.status-card .label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.status-card .value {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--mono);
  margin-top: 4px;
}

/* ── APP CARDS ── */
.apps-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.app-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}

.app-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.app-name-link {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
}

.app-name-link:active { color: var(--accent); }
.app-name-link.disabled { color: var(--text-3); pointer-events: none; }

.status-badge {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-badge.running { background: var(--green); color: var(--bg); }
.status-badge.stopped { background: var(--text-3); color: var(--bg); }
.status-badge.error { background: var(--red); color: var(--text); }
.status-badge.starting { background: var(--yellow); color: var(--bg); }
.status-badge.not_built { background: var(--text-3); color: var(--bg); opacity: 0.7; }

/* Dev/prod pill toggle in the Apps page card. Matches the muted look of
   .status-badge but uses a two-button pair — the active side gets the
   accent colour. All colours come from design tokens. */
.app-env-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  background: var(--bg-2, var(--bg));
  border: 1px solid var(--text-3);
  border-radius: var(--r-full);
  width: fit-content;
}
.env-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-full);
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.env-pill:hover { color: var(--text); }
.env-pill.active {
  background: var(--accent, var(--green));
  color: var(--bg);
}

.env-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.env-badge.env-dev { background: var(--text-3); color: var(--bg); }
.env-badge.env-prod { background: var(--accent, var(--green)); color: var(--bg); }

/* Error panel for when the Apps API call fails. Replaces the old silent
   "Loading..." state that would stay forever. */
.error-panel {
  padding: 24px;
  border: 1px solid var(--red);
  border-radius: var(--r-md, 8px);
  background: var(--bg-2, var(--bg));
  text-align: center;
}
.error-panel .error-text { margin-bottom: 12px; }

/* Devices page toolbar — holds the Pair-new-Pi button above the grid.
   Mirrors .users-toolbar so the two management pages feel consistent. */
.devices-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* Device kind badge shown in the card header before the name. Default
   (kind=browser) is not rendered at all — only hardware kinds get the
   pill. Uses existing tokens plus a `kind-*` modifier per category. */
.device-kind-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: var(--r-full, 9999px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 1px;
  background: var(--accent, #4f46e5);
  color: var(--bg, #000);
}
.device-kind-badge.kind-pi      { background: var(--green, #22c55e); color: var(--bg, #000); }
.device-kind-badge.kind-phone   { background: var(--accent, #4f46e5); color: var(--bg, #000); }
.device-kind-badge.kind-tablet  { background: var(--yellow, #facc15); color: var(--bg, #000); }

/* Pair-new-Pi modal. Backdrop uses the existing .modal-backdrop.hidden
   pattern from the users page; the inner .pair-modal is a centered card
   with the code shown in huge monospace digits + a countdown. */
.pair-modal {
  background: var(--bg-card, var(--bg));
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-md, 10px);
  padding: 24px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pair-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pair-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.pair-modal-close:hover { color: var(--text); }

.pair-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  padding: 18px 0;
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-md, 10px);
  color: var(--text, #fff);
  margin-bottom: 8px;
}
.pair-countdown {
  text-align: center;
  font-size: 11px;
  color: var(--text-3, #666);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.pair-countdown.expired { color: var(--red, #ef4444); }

.pair-instructions {
  font-size: 13px;
  color: var(--text-2, #aaa);
  border-top: 1px solid var(--bg-hover, #181818);
  padding-top: 14px;
}
.pair-instructions p { margin: 0 0 8px; }
.pair-instructions ul { margin: 0 0 8px; padding-left: 20px; }
.pair-instructions li { margin-bottom: 6px; }
.pair-instructions code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-sm, 6px);
  padding: 1px 6px;
  color: var(--text, #fff);
}

/* Fingerprint badge shown next to each device on the Devices page.
   Default style = real SHA-256 fingerprint (muted neutral). The
   .fallback variant marks devices that came in without a real
   fingerprint (Pi / stripped webview / headless probe) — those were
   auto-named server-side, so the user can still tell them apart. */
.fingerprint-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--text-3);
  color: var(--bg);
}
.fingerprint-badge.fallback {
  background: var(--yellow);
  color: var(--bg);
}

/* ════════════════════════════════════════════════════════════════════════
   Hub Cell setup wizard — v28
   Multi-step first-run flow rendered by renderCellSetupWizard(). Mounts
   in place of the Cell page tabs when hub-cell isn't fully configured.
   Reuses .step-pill / .step-pill-active / .step-pill-done from the hub
   owner setup wizard, and .pair-code / .pair-countdown / .pair-modal from
   the v27 pair modal. These additions are wizard-specific styling only.
   ════════════════════════════════════════════════════════════════════════ */
.cell-wizard {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 12px;
}
.cell-wizard-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.cell-wizard-panel {
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-md, 10px);
  background: var(--bg-card, var(--bg));
  padding: 24px 28px;
}
.cell-wizard-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}
.cell-wizard-requirements {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cell-wizard-requirements li {
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-hover, #181818);
  color: var(--text-2, #aaa);
  font-size: 14px;
  line-height: 1.5;
}
.cell-wizard-requirements li:last-child { border-bottom: 0; }
.cell-wizard-requirements .cell-wizard-bullet {
  color: var(--accent, var(--green));
  margin-right: 8px;
  font-size: 10px;
  vertical-align: middle;
}
.cell-wizard-requirements code,
.cell-wizard-panel code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  padding: 1px 6px;
  border-radius: var(--r-sm, 4px);
  color: var(--text);
}
.cell-wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
/* First button in the actions row is always the Back — push it to the
   left so Next/Primary stays on the right where the eye expects it. */
.cell-wizard-actions .btn-secondary:first-child { margin-right: auto; }

.cell-wizard-hw {
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-md, 10px);
  padding: 6px 18px;
}
.cell-wizard-hw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-hover, #181818);
  font-size: 13px;
  color: var(--text);
  gap: 12px;
}
.cell-wizard-hw-row:last-child { border-bottom: 0; }
.cell-wizard-hw-label {
  color: var(--text-3, #666);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Signal bars — 5 vertical bars that fill based on the 0-31 RSL bucket.
   Colour is keyed off the data-bucket attribute so the whole bar group
   turns green/yellow/red as one visual unit. */
.cell-wizard-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.cell-wizard-signal-bar {
  display: inline-block;
  width: 4px;
  background: var(--bg-hover, #181818);
  border-radius: 1px;
}
.cell-wizard-signal-bar:nth-child(1) { height: 4px; }
.cell-wizard-signal-bar:nth-child(2) { height: 7px; }
.cell-wizard-signal-bar:nth-child(3) { height: 10px; }
.cell-wizard-signal-bar:nth-child(4) { height: 13px; }
.cell-wizard-signal-bar:nth-child(5) { height: 16px; }
.cell-wizard-signal[data-bucket="strong"] .cell-wizard-signal-bar.on { background: var(--green, #22c55e); }
.cell-wizard-signal[data-bucket="ok"]     .cell-wizard-signal-bar.on { background: var(--accent, var(--green, #22c55e)); }
.cell-wizard-signal[data-bucket="weak"]   .cell-wizard-signal-bar.on { background: var(--yellow, #facc15); }
.cell-wizard-signal[data-bucket="none"]   .cell-wizard-signal-bar.on { background: var(--red, #ef4444); }
.cell-wizard-signal-label {
  font-size: 11px;
  color: var(--text-3, #666);
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Warning banners — yellow for warnings, red for errors. Both are
   informational; Next is always enabled so the owner can proceed. */
.cell-wizard-warning {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid var(--yellow, #facc15);
  border-radius: var(--r-sm, 6px);
  font-size: 12px;
  color: var(--yellow, #facc15);
  line-height: 1.5;
}
.cell-wizard-warning-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--red, #ef4444);
  color: var(--red, #ef4444);
}

.cell-wizard-test-status {
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-sm, 6px);
  padding: 14px 18px;
  font-size: 13px;
  min-height: 48px;
}
.cell-wizard-test-status p { margin: 4px 0; }
.cell-wizard-test-status .success-text {
  color: var(--green, #22c55e);
  font-weight: 600;
}

/* Read-only display of the owner phone on the Apps page SMS routing
   card. Wizard is the write path now — this is just a mirror. */
.sms-settings-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg, #000);
  border: 1px solid var(--bg-hover, #181818);
  border-radius: var(--r-sm, 6px);
  padding: 6px 12px;
  color: var(--text);
  font-size: 13px;
}

/* Mobile: stack the progress pills and action buttons so the wizard
   doesn't overflow on narrow screens. */
@media (max-width: 640px) {
  .cell-wizard-panel { padding: 18px 20px; }
  .cell-wizard-steps { font-size: 9px; gap: 4px; }
  .cell-wizard-steps .step-pill { padding: 6px 4px; flex: 1 0 auto; min-width: 0; }
  .cell-wizard-hw-row { flex-wrap: wrap; gap: 6px; }
  .cell-wizard-actions { flex-direction: column-reverse; }
  .cell-wizard-actions .btn { width: 100%; }
  .cell-wizard-actions .btn-secondary:first-child { margin-right: 0; }
}

/* SMS routing settings card on the Apps page. Shows the owner phone
   input + save button. Sits above the "App Management" grid. */
.sms-settings-card {
  padding: 16px 20px;
  border: 1px solid var(--text-3);
  border-radius: var(--r-md, 8px);
  background: var(--bg-2, var(--bg));
  margin-bottom: 24px;
}
.sms-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sms-settings-label {
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
}
.sms-settings-row input[type="tel"] {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--text-3);
  border-radius: var(--r-sm, 6px);
  color: var(--text);
  font-size: 14px;
}
.sms-settings-row input[type="tel"]:focus {
  outline: none;
  border-color: var(--accent, var(--green));
}
.sms-settings-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.sms-settings-status {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.sms-settings-status.status-active { background: var(--green); color: var(--bg); }
.sms-settings-status.status-inactive { background: var(--yellow); color: var(--bg); }
.sms-settings-status.status-cell-down { background: var(--red); color: var(--text); }
.sms-settings-status.status-unknown { background: var(--text-3); color: var(--bg); }

/* Dedicated single-app page (Open button target). Fills the dashboard
   content area with a slim breadcrumb bar + iframe. The bar is
   deliberately tight and visually continuous with any in-iframe sub-nav
   (hub-cell's tabs, for example) so the whole thing reads as one
   integrated UI — not "a page with an iframe bolted on". */
.app-page {
  display: flex;
  flex-direction: column;
  /* Fill everything between the dashboard nav and footer. Values tuned
     to avoid nested scroll bars on the typical dashboard layout. */
  height: calc(100vh - 128px);
  min-height: 420px;
  margin: 0 -24px -24px;  /* bleed into the main container gutters */
  background: var(--bg);
}
.app-page-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: var(--bg);
  border-bottom: 1px solid #1a1a1a;
  min-height: 40px;
}
.app-page-bar #app-page-back {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-sm, 6px);
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.app-page-bar #app-page-back:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--text-2);
}
.app-page-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.app-page-crumb .crumb-sep { color: var(--text-3); opacity: 0.5; }
.app-page-crumb .crumb-app {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-page-bar .app-page-new-tab {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  border-radius: var(--r-sm, 6px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-page-bar .app-page-new-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.app-page-frame-wrap {
  flex: 1;
  min-height: 0;
  background: #000000;
}
.app-page-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Cell page — native replacement for the hub-cell iframe.
   Uses dashboard tokens, dashboard scroll containers, dashboard
   chrome. Two scrollable children: .cell-threads (thread list)
   and .cell-conversation-scroll (message bubbles) — this is
   the whole point of the refactor. No iframe, no stuck scroll.
   ─────────────────────────────────────────────────────────── */
.cell-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Reach to the bottom of the main content area so the two-column
     Messages layout can size itself sensibly. */
  height: calc(100vh - 160px);
}
.cell-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--bg-hover);
  margin-bottom: 16px;
}
.cell-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  color: var(--text-3);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.cell-tab:hover { color: var(--text); background: var(--bg-hover); }
.cell-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.cell-tab-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Messages tab */
.cell-messages-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
/* On mobile, stack threads above conversation. The threads panel gets
   a max-height so the compose form stays visible without scrolling. */
@media (max-width: 640px) {
  .cell-messages-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .cell-threads { max-height: 200px; }
  .cell-compose input[type="text"] { width: 100px; min-width: 80px; }
}
.cell-threads {
  overflow-y: auto;
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 8px);
  background: var(--bg-card, var(--bg));
}
.cell-thread {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bg-hover);
  cursor: pointer;
  transition: background 120ms;
}
.cell-thread:last-child { border-bottom: 0; }
.cell-thread:hover { background: var(--bg-hover); }
.cell-thread-active {
  background: var(--bg-hover);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
.cell-thread-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.cell-thread-preview {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-thread-meta {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cell-conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 8px);
  background: var(--bg-card, var(--bg));
  overflow: hidden;
}
.cell-conversation-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cell-msg {
  max-width: 65%;
  padding: 8px 12px;
  border-radius: var(--r-md, 10px);
  font-size: 13px;
  line-height: 1.4;
}
.cell-msg-in {
  align-self: flex-start;
  background: var(--bg-hover);
  color: var(--text);
}
.cell-msg-out {
  align-self: flex-end;
  background: var(--accent, #4f46e5);
  color: var(--bg);
}
.cell-msg-pending { opacity: 0.55; }
.cell-msg-error { border: 1px solid var(--red); }
.cell-msg-body { white-space: pre-wrap; word-break: break-word; }
.cell-msg-meta {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 3px;
  text-align: right;
}
.cell-msg-in .cell-msg-meta { color: var(--text-3); }
.cell-msg-out .cell-msg-meta { color: var(--bg); opacity: 0.85; }

.cell-compose {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--bg-hover);
  background: var(--bg);
  align-items: center;
}
.cell-compose input[type="text"],
.cell-compose input[type="tel"] {
  width: 160px;
  flex-shrink: 0;
}
.cell-compose textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 12px;
  background: var(--bg-input, var(--bg));
  color: var(--text);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  font-family: inherit;
  font-size: 13px;
}
.cell-compose input {
  padding: 8px 12px;
  background: var(--bg-input, var(--bg));
  color: var(--text);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  font-size: 13px;
}
.cell-compose textarea:focus,
.cell-compose input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ─── Hub Cell MMS support (v37) ─────────────────────────────────────
   Paperclip button in the compose form, staged attachment chips above
   the compose row, inline image/audio/video bubbles in the conversation,
   paperclip icon in the thread rail. Share the existing cell-msg/
   cell-thread layout; additive only. */

.cell-compose-paperclip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  background: var(--bg-input, var(--bg));
  color: var(--text-2, #aaa);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cell-compose-paperclip:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--bg-hover);
}

.cell-compose-attachments {
  padding: 0 12px;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Collapses to zero height when empty so the compose row sits flush
     against the conversation scroll. */
}
.cell-compose-attachments:empty {
  padding: 0;
}
.cell-compose-attachments:not(:empty) {
  padding: 10px 12px 4px;
  border-top: 1px solid var(--bg-hover);
}

.cell-compose-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  background: var(--bg-card, var(--bg-hover));
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  max-width: 220px;
}
.cell-compose-chip-thumb {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.cell-compose-chip-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 4px;
  font-size: 16px;
}
.cell-compose-chip-info {
  flex: 1;
  min-width: 0;
}
.cell-compose-chip-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-compose-chip-size {
  font-size: 10px;
  color: var(--text-3, #666);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cell-compose-chip-remove {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.cell-compose-chip-remove:hover { color: var(--red, #ef4444); }

/* Inline media in conversation bubbles. Images/video/audio sit ABOVE
   the body text (which is often empty for pure-media MMS). */
.cell-msg-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.cell-mms-image {
  max-width: 320px;
  max-height: 320px;
  border-radius: var(--r-sm, 6px);
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.cell-mms-video {
  max-width: 360px;
  max-height: 360px;
  border-radius: var(--r-sm, 6px);
  display: block;
}
.cell-mms-audio {
  width: 260px;
  max-width: 100%;
  display: block;
}
.cell-mms-file {
  display: inline-block;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}
.cell-mms-file:hover {
  border-color: var(--accent);
}

/* Paperclip icon in the thread rail — small inline mark next to the
   last-message preview. */
.cell-thread-paperclip {
  font-size: 11px;
  margin-right: 2px;
  opacity: 0.8;
}

/* Contacts tab */
.cell-contacts-table {
  width: 100%;
  border-collapse: collapse;
}
.cell-contacts-table th,
.cell-contacts-table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--bg-hover);
}
.cell-contacts-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 700;
}
.cell-contact-row:hover { background: var(--bg-hover); }
.cell-contact-row.editing { background: var(--bg-hover); }
.cell-contact-add-row {
  background: var(--bg-card-2, var(--bg-hover));
}
.cell-contact-add-row input,
.cell-contact-row.editing input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input, var(--bg));
  color: var(--text);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  font-size: 13px;
}
.cell-contact-add-row input:focus,
.cell-contact-row.editing input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Status tab */
.cell-status-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.cell-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cell-status-pill--connected { background: var(--green); color: var(--bg); }
.cell-status-pill--disconnected { background: var(--red); color: var(--text); }
.cell-status-pill--idle { background: var(--text-3); color: var(--bg); }

.app-meta {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 12px;
  font-family: var(--mono);
  line-height: 1.5;
}

.app-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── BUTTONS ── */
.btn {
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 40px;
}

.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.3; pointer-events: none; }

.btn-stop {
  background: var(--red);
  color: var(--text);
  border-color: var(--red);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-grow: 1;
  min-width: 100px;
}

.btn-stop:active { background: var(--red-h); }

.btn-start {
  border-color: var(--green);
  color: var(--green);
  flex-grow: 1;
}

.btn-start:active { background: var(--green); color: var(--bg); }

.btn-restart { border-color: var(--yellow); color: var(--yellow); }
.btn-restart:active { background: var(--yellow); color: var(--bg); }

.btn-logs { border-color: var(--text-3); color: var(--text-3); }

/* ── DASHBOARD SUMMARY ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-mini-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
}

.dash-mini-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.dash-mini-item:last-child { border-bottom: none; }

.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.dot-green { background: var(--green); }
.dot-red { background: var(--red); }
.dot-yellow { background: var(--yellow); }
.dot-grey { background: var(--text-3); }

.dash-mini-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--mono);
}

.dash-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dash-actions .btn { flex: 1; min-width: 80px; text-align: center; }

@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; gap: 14px; }
  .dash-actions { gap: 10px; }
  .dash-actions .btn { min-width: calc(50% - 6px); flex: 0 1 calc(50% - 6px); }
  .main { padding: 14px; }
  .status-grid { gap: 10px; }
  .status-card { padding: 14px 10px; }
  .status-card .label { font-size: 11px; }
  .status-card .value { font-size: 22px; }
  .app-card { padding: 16px 14px; }
  .app-name-link { font-size: 16px; }
  .section-title { font-size: 12px; margin: 20px 0 12px; }
  .settings-section { padding: 16px 14px; }
  .settings-section h3 { font-size: 16px; }
  .setting-row { font-size: 14px; padding: 12px 0; }
  .setting-value { font-size: 12px; }
  .dash-mini-item { font-size: 14px; padding: 10px 0; }
  .dash-mini-status { font-size: 12px; }
  .footer { padding: 10px 14px; font-size: 11px; }
  .nav-brand { font-size: 17px; }
  .nav-brand-icon { width: 32px; height: 32px; font-size: 15px; }
}

/* ── LOGS ── */
.logs-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-top: 10px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
  -webkit-overflow-scrolling: touch;
}

/* ── KILL FAB ── */
.kill-fab {
  position: fixed;
  bottom: calc(52px + var(--safe-b));
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: var(--red);
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--shadow-red);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.kill-fab:active { transform: scale(0.9); background: var(--red-h); }

/* ── CONFIRM DIALOG ── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.confirm-dialog {
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}

.confirm-dialog h3 { font-size: 18px; margin-bottom: 8px; }
.confirm-dialog p { color: var(--text-2); font-size: 14px; margin-bottom: 24px; line-height: 1.5; }

.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; padding: 12px; font-size: 15px; }

/* ── USER PANEL ── */
.user-panel-overlay { position: fixed; inset: 0; z-index: 500; }

.user-panel {
  position: fixed;
  top: calc(50px + var(--safe-t));
  right: 12px;
  left: 12px;
  max-width: 340px;
  margin-left: auto;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 30px var(--overlay-light);
  z-index: 501;
  padding: 20px;
}

.user-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.user-role-badge {
  background: var(--accent);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-full);
  text-transform: uppercase;
}

.user-token-info { font-family: var(--mono); font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.user-panel-actions { display: flex; flex-direction: column; gap: 8px; }
.user-panel-actions .btn { width: 100%; text-align: center; padding: 10px; }

/* ── SETTINGS ── */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.settings-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  gap: 8px;
}

.setting-row:last-child { border-bottom: none; }
.setting-label { color: var(--text-2); }
.setting-value { font-family: var(--mono); font-size: 13px; text-align: right; word-break: break-all; }

.danger-zone { border-color: var(--red); }
.danger-zone h3 { color: var(--red); }

.confirm-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  margin: 8px 0;
  outline: none;
  -webkit-appearance: none;
}

/* ── DOWNLOAD ── */
.download-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
  margin-bottom: 24px;
}

.download-section h3 { font-size: 17px; margin-bottom: 8px; }
.download-section p { color: var(--text-3); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }

.download-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.download-btns .btn { padding: 10px 20px; }
.btn-pwa { background: var(--accent); color: var(--text); border-color: var(--accent); }
.btn-coming-soon { opacity: 0.25; pointer-events: none; }

/* ── FOOTER ── (in-flow, pinned via flex-column #app layout) */
.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  padding-bottom: calc(10px + var(--safe-b));
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--bg);
  z-index: 50;
}

/* ── DESKTOP ── */
@media (min-width: 768px) {
  .nav { padding: 10px 24px; }
  .nav-hamburger { display: none !important; }
  .nav-links {
    display: flex !important;
    gap: 4px;
    position: static;
    background: none;
    border: none;
    padding: 0;
    flex-direction: row;
  }
  .nav-link { padding: 6px 14px; font-size: 14px; width: auto; }
  .main { padding: 24px; }
  .apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .user-panel { left: auto; right: 20px; }
  .kill-fab { bottom: 60px; right: 24px; width: 56px; height: 56px; font-size: 24px; }
  .footer { padding: 10px 24px; font-size: 12px; }
}

/* ══════════════════════════════════════ */
/* ─��� PUBLIC LANDING PAGE ──             */
/* ══════════════════════════════════════ */

.land-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--overlay-heavy);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.land-nav-brand {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.land-nav-links { display: flex; gap: 8px; }

.land-nav-link {
  padding: 8px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}

.land-nav-link:active { background: var(--bg-hover); }

/* Hero — top padding clears sticky nav (~60px) + breathing room */
.hero {
  text-align: center;
  padding: 80px 20px 56px;
}

.hero-inner { max-width: 640px; margin: 0 auto; }

.hero-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 32px;
  background: var(--text);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--bg);
}

.hero-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero-sub {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.hero-sub2 {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 36px;
}

.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.cta-btn {
  padding: 14px 28px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.1s;
  display: inline-block;
}

.cta-btn:active { transform: scale(0.97); }

.cta-primary {
  background: var(--green);
  color: var(--bg);
  border: none;
}

.cta-outline {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--text);
}

/* Sections */
.land-section {
  max-width: 900px;
  /* Also clamp to viewport width so a child with a baked-in min-width
     (e.g. the savings table's 560px) can't grow the section past the
     viewport on mobile. body has overflow-x:hidden as a safety net,
     but `min-width: 0` stops the section from REPORTING itself wider
     than its parent in the first place. */
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 48px 20px;
  border-top: 1px solid var(--border);
}

.land-h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* Bumped from var(--text-3) (#666) to var(--text-2) (#aaa) so
     section headings pass WCAG AA on black. The uppercase letter-
     spacing makes them feel like small-caps section labels while
     still being readable. */
  color: var(--text-2);
  margin-bottom: 28px;
  text-align: center;
}

/* App showcase grid */
.app-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
}

.showcase-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.showcase-tag { font-size: 14px; color: var(--accent-h); margin-bottom: 8px; font-weight: 600; }
.showcase-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  position: relative;
}

.price-featured {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--shadow-accent);
}

.price-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.price-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.price-amount { font-size: 42px; font-weight: 800; margin-bottom: 20px; }
.price-amount span { font-size: 15px; font-weight: 400; color: var(--text-3); }

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 2;
  text-align: left;
}

.price-features li::before { content: '+ '; color: var(--green); font-weight: 700; }

.price-btn {
  display: block;
  padding: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}

.price-btn:active { background: var(--bg-hover); }

.price-btn-featured {
  background: var(--accent);
  border-color: var(--accent);
}

.price-btn-featured:active { background: var(--accent-h); }

.pricing-note { text-align: center; color: var(--text-3); font-size: 12px; }

/* Savings table */
.savings-table { max-width: 560px; margin: 0 auto; }

.savings-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  align-items: center;
}

.savings-what { color: var(--text); font-weight: 500; }
.savings-old { color: var(--red); text-decoration: line-through; text-align: right; font-family: var(--mono); font-size: 14px; }
.savings-new { color: var(--green); font-weight: 700; text-align: right; font-family: var(--mono); font-size: 14px; }
.savings-total { border-bottom: none; font-weight: 800; font-size: 17px; padding-top: 18px; margin-top: 8px; border-top: 2px solid var(--border-2); }
.savings-total .savings-old { font-size: 15px; }

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.step-card {
  text-align: center;
  padding: 20px 12px;
}

.step-num {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--mono);
}

.step-text { font-size: 15px; color: var(--text-2); line-height: 1.5; }

.land-final { text-align: center; padding: 56px 20px 48px; }
.land-final .cta-btn { margin: 0 8px 12px; }
.land-open-source { color: var(--text-3); font-size: 13px; margin-top: 32px; line-height: 1.6; }

/* Landing page footer: NOT fixed (unlike authenticated pages) */
.land-footer {
  position: static !important;
  margin-top: 0;
  border-top: 1px solid var(--border);
  padding: 20px;
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── LANDING MOBILE ── */
@media (max-width: 640px) {
  .land-nav { padding: 14px 16px; }
  .land-nav-brand { font-size: 18px; }
  .land-nav-link { padding: 10px 14px; font-size: 14px; }

  .hero { padding: 72px 20px 44px; }
  .hero-title { font-size: 26px; line-height: 1.2; }
  .hero-sub { font-size: 16px; margin-bottom: 8px; }
  .hero-sub2 { font-size: 14px; margin-bottom: 28px; }
  .hero-logo { width: 72px; height: 72px; font-size: 32px; margin-bottom: 24px; }
  .hero-cta { flex-direction: column; gap: 12px; }
  .cta-btn { width: 100%; text-align: center; padding: 16px 24px; font-size: 16px; }

  .land-section { padding: 40px 20px; }
  .land-h2 { font-size: 13px; margin-bottom: 24px; }

  .app-showcase { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .showcase-card { padding: 18px 12px; }
  .showcase-name { font-size: 16px; }
  .showcase-tag { font-size: 13px; }
  .showcase-desc { font-size: 12px; line-height: 1.5; }

  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .price-card { padding: 24px 20px; }
  .price-amount { font-size: 38px; }
  .price-features { font-size: 15px; }

  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .step-card { padding: 16px 8px; }
  .step-text { font-size: 14px; }

  .savings-row { font-size: 14px; gap: 10px; padding: 12px 0; }
  .savings-old { font-size: 13px; }
  .savings-new { font-size: 13px; }
  .savings-total { font-size: 16px; }

  .land-final { padding: 40px 20px 32px; }
  .land-final .cta-btn { margin: 0 0 12px; }
  .land-open-source { font-size: 12px; }

  .land-footer { flex-direction: column; gap: 6px; font-size: 11px; padding: 20px 16px; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 22px; }
  .app-showcase { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════ */
/* ── SETUP / LANDING PAGE ──             */
.setup-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100dvh;
  padding: 48px 24px;
}

.setup-card {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.landing-btn {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--r-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.1s;
  margin-bottom: 12px;
}

.landing-btn:active { transform: scale(0.97); }

.landing-btn-new {
  background: var(--green);
  color: var(--bg);
  border: none;
}

.landing-btn-existing {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--text);
}

.landing-btn-existing:active { background: var(--tint-white); }

.landing-tagline {
  color: var(--text-3);
  font-size: 13px;
  margin-top: 20px;
  line-height: 1.5;
}

.setup-hint {
  color: var(--text-3);
  font-size: 14px;
  margin-top: 14px;
  line-height: 1.5;
}

/* ── MESH STATUS CARD ── */
.mesh-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.mesh-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.mesh-nodes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mesh-node {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
}

.mesh-node.healthy { background: var(--green); color: var(--bg); }
.mesh-node.unhealthy { background: var(--red); color: var(--text); }
.mesh-node.unknown { background: var(--text-3); color: var(--bg); }

.mesh-summary {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 10px;
  font-family: var(--mono);
}

.setup-pin-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.seed-warning {
  background: var(--tint-yellow);
  border: 1px solid var(--yellow);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--yellow);
  font-size: 14px;
  line-height: 1.5;
}

/* ── SEED DISPLAY (generated words) ── */
.seed-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.seed-word-display {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── SEED GRID (input) ── */
.seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.seed-word-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}

.seed-word-cell:focus-within {
  border-color: var(--accent);
}

.seed-word-num {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.seed-word-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  padding: 10px 0;
  outline: none;
  min-width: 0;
  -webkit-appearance: none;
}

.seed-word-input::placeholder {
  color: var(--text-3);
}

/* ── AUTOCOMPLETE ── */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  z-index: 50;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 4px 16px var(--shadow-dark);
}

.autocomplete-item {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  color: var(--text-2);
}

.autocomplete-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ── LOGIN ACTIONS ── */
.login-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}

.show-words-toggle {
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.show-words-toggle input {
  accent-color: var(--accent);
}

/* ── PIN MODAL ── */
.pin-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.pin-dialog {
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.pin-dialog h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.pin-dialog p {
  color: var(--text-2);
  font-size: 14px;
  margin-bottom: 24px;
}

.pin-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.pin-digit {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-family: var(--mono);
  font-weight: 700;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}

.pin-digit:focus {
  border-color: var(--accent);
}

.pin-fallback-link {
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  border: none;
  background: none;
  text-decoration: underline;
  padding: 6px 4px;
}

/* ── MOBILE: SETUP + LOGIN + SEED ── */
@media (max-width: 500px) {
  .setup-page, .login-page {
    padding: 16px 12px;
    align-items: flex-start;
    padding-top: calc(40px + var(--safe-t));
  }
  .setup-card, .login-card { max-width: 100%; }
  .login-title { font-size: 22px; }
  .login-subtitle { font-size: 14px; margin-bottom: 22px; line-height: 1.5; }
  .login-logo { width: 60px; height: 60px; font-size: 26px; margin-bottom: 18px; }
  .seed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 14px 0;
  }
  .seed-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .seed-word-cell {
    padding: 4px 8px;
  }
  .seed-word-input {
    font-size: 16px;
    padding: 12px 0;
  }
  .seed-word-num {
    font-size: 11px;
    min-width: 18px;
  }
  .seed-word-display {
    padding: 10px 12px;
    font-size: 15px;
  }
  .seed-warning {
    font-size: 14px;
    padding: 14px;
    line-height: 1.5;
  }
  .login-btn {
    padding: 16px;
    font-size: 17px;
  }
  .login-input {
    padding: 14px;
    font-size: 16px;
  }
  .setup-hint { font-size: 13px; }
  .autocomplete-dropdown {
    max-height: 140px;
  }
  .autocomplete-item {
    padding: 12px 14px;
    font-size: 15px;
  }
  .pin-inputs { gap: 8px; }
  .pin-digit {
    width: 42px;
    height: 50px;
    font-size: 20px;
  }
  .confirm-dialog {
    padding: 24px 18px;
  }
}

@media (max-width: 360px) {
  .seed-grid, .seed-display {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .seed-word-input { font-size: 14px; }
}

.hidden { display: none !important; }

/* ══════════════════════════════════════ */
/* ── NEW: CMS / ADMIN / NOTIFICATIONS ── */
/* ══════════════════════════════════════ */

/* Platform claim banner (shown on dashboard when claim token unclaimed) */
.claim-banner {
  background: var(--bg-card-2);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px var(--shadow-accent);
}
.claim-banner-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.claim-banner-body {
  color: var(--text-2);
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.claim-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.claim-banner-actions .login-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
}

/* Landing announcement strip */
.land-announcement {
  background: var(--yellow);
  color: var(--bg);
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* Dev mode toggle button in nav */
.nav-dev-toggle {
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-dev-toggle:hover, .nav-dev-toggle:active { color: var(--text); }
.nav-dev-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}

/* Notification bell button */
.nav-notif-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-notif-btn:hover, .nav-notif-btn:active { color: var(--text); }
.notif-icon { font-size: 16px; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--r-full);
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  border: 2px solid var(--bg);
}

/* Notification panel (reuses user-panel base) */
.notif-panel-wrap {
  max-height: 70vh;
  overflow-y: auto;
}
.notif-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
.notif-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread .notif-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.notif-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.notif-item-body {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 4px;
  line-height: 1.4;
}
.notif-item-time {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--mono);
}

/* Pricing grid: 4 columns for 4 tiers */
.pricing-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.pricing-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-grid-4, .pricing-grid-3 { grid-template-columns: 1fr; }
  .claim-banner { padding: 16px; }
  .claim-banner-title { font-size: 16px; }
  .claim-banner-body { font-size: 13px; }
  .nav-dev-toggle { padding: 6px 8px; font-size: 12px; }
  .nav-notif-btn { width: 34px; height: 34px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Agent + Users + Settings additions (migration 006 / overhaul build).
   All colors use existing tokens — no hardcoded values per HUB-AI-RULES.
   44px minimum touch targets on mobile. Mobile responsive at 640px.
   ──────────────────────────────────────────────────────────────────────── */

/* Generic helpers used by the new pages */
.muted-text { color: var(--text-3); font-size: 13px; }
.error-text { color: var(--red); font-size: 13px; }
.hidden { display: none !important; }

/* Reusable buttons (extend existing .btn / .btn-stop / .btn-start) */
.btn-primary {
  background: var(--accent); color: var(--text); border: none;
  padding: 10px 18px; border-radius: var(--r-md); font-weight: 600;
  cursor: pointer; min-height: 44px; font-size: 14px;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-h); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: var(--bg-card-2); color: var(--text); border: 1px solid var(--border-2);
  padding: 10px 18px; border-radius: var(--r-md); font-weight: 500;
  cursor: pointer; min-height: 44px; font-size: 14px;
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }

.btn-ghost {
  background: transparent; color: var(--text-2); border: none;
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

/* ── AGENT PAGE ── */
.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.agent-card h3 {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2); margin-bottom: 6px; font-weight: 600;
}

.agent-quick { display: flex; gap: 8px; margin-top: 12px; }
.agent-quick .agent-input { flex: 1; }

/* ─── Automations UI (v38) ────────────────────────────────────── */
.automations-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.auto-disabled { opacity: 0.55; }
.auto-badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--text-3); color: var(--bg);
  margin-right: 6px; vertical-align: middle;
}
.auto-badge-cron { background: var(--accent, var(--green)); }
.auto-badge-sms { background: var(--yellow); color: var(--bg); }
.auto-form {
  margin-top: 14px; padding: 16px; border: 1px solid var(--bg-hover);
  border-radius: var(--r-md); background: var(--bg);
}
.auto-form h4 { margin: 0 0 12px; font-size: 14px; color: var(--text); }
.auto-form-row { margin-bottom: 10px; }
.auto-form-row label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 4px;
}
.auto-form-row .setup-input { width: 100%; margin-bottom: 6px; }
.auto-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ─── Remote Desktop page (noVNC embed) ──────────────────────── */
.remote-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 128px);
  min-height: 400px;
}
.remote-frame-wrap {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}
.remote-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: block;
}

.agent-input {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 10px 14px; font-size: 14px; min-height: 44px; width: 100%;
  font-family: var(--sans);
}
.agent-input:focus { outline: none; border-color: var(--accent); }
.agent-input::placeholder { color: var(--text-3); }

.agent-textarea {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 13px; min-height: 250px; width: 100%;
  font-family: var(--mono); line-height: 1.5; resize: vertical;
}
.agent-textarea:focus { outline: none; border-color: var(--accent); }

.agent-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.agent-form-actions { display: flex; gap: 8px; }

.agent-cmd-resp {
  margin-top: 12px; padding: 12px; background: var(--bg-card-2);
  border-radius: var(--r-md); font-family: var(--mono); font-size: 13px;
  color: var(--text-2); border-left: 3px solid var(--accent);
  white-space: pre-wrap; word-break: break-word;
}

/* Tasks list */
.agent-task-row {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 8px; padding: 12px 16px;
  cursor: pointer; transition: background 0.1s;
}
.agent-task-row:hover { background: var(--bg-hover); }
.agent-task-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.agent-glyph {
  font-size: 16px; width: 20px; text-align: center;
}
.status-queued { color: var(--text-3); }
.status-running { color: var(--yellow); animation: pulse 1.4s ease-in-out infinite; }
.status-done { color: var(--green); }
.status-failed { color: var(--red); }
.status-cancelled { color: var(--text-3); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.agent-task-title { flex: 1; font-weight: 500; color: var(--text); }
.agent-task-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--r-full); background: var(--bg);
  border: 1px solid var(--border-2); color: var(--text-2);
}
.agent-task-time { font-size: 12px; }
.agent-task-actions { display: flex; gap: 4px; }

.agent-task-detail {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px;
}
.agent-task-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
  margin-bottom: 12px; color: var(--text-2);
}
.agent-task-detail details {
  margin-top: 8px; background: var(--bg); padding: 8px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}
.agent-task-detail summary {
  cursor: pointer; color: var(--text-2); font-weight: 500; user-select: none;
}
.agent-pre {
  background: var(--bg); color: var(--text-2); padding: 12px;
  border-radius: var(--r-sm); font-family: var(--mono); font-size: 12px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  margin-top: 8px; max-height: 320px; overflow-y: auto;
}

/* ── USERS PAGE ── */
.users-toolbar {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.users-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.user-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px;
}
.user-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.user-card-name { font-weight: 600; font-size: 16px; color: var(--text); }
.user-meta {
  font-size: 12px; color: var(--text-3); margin-bottom: 4px;
}
.user-meta a { color: var(--accent); text-decoration: none; }
.user-meta a:hover { text-decoration: underline; }
.user-meta code { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.user-status-badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: var(--r-full); font-weight: 600;
}
.badge-active { background: var(--bg); color: var(--green); border: 1px solid var(--green); }
.badge-suspended { background: var(--tint-yellow); color: var(--yellow); border: 1px solid var(--yellow); }
.badge-revoked { background: var(--bg); color: var(--red); border: 1px solid var(--red); }
.badge-owner { background: var(--accent); color: var(--text); }
.badge-current {
  display: inline-block; font-size: 10px; padding: 2px 6px;
  background: var(--accent); color: var(--text); border-radius: var(--r-full);
  margin-left: 6px; vertical-align: middle;
}
.user-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px;
}
.user-card-actions .btn,
.user-card-actions .btn-ghost {
  font-size: 12px; padding: 8px 12px; min-height: 36px;
}

/* ── MODAL ── */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay-heavy);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px;
}
.modal {
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 24px; max-width: 500px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px var(--shadow-dark);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h3 { font-size: 18px; color: var(--text); font-weight: 600; }
.modal-close {
  background: none; border: none; color: var(--text-3); font-size: 24px;
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }
.modal-body { margin-bottom: 16px; }
.modal-body p { color: var(--text-2); font-size: 13px; margin-bottom: 10px; }
.modal-label {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
  font-size: 12px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 500;
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.seed-display {
  background: var(--bg); border: 2px solid var(--accent);
  font-size: 16px; line-height: 1.8; word-spacing: 6px;
  text-align: center; padding: 16px;
}
.qr-canvas {
  display: flex; justify-content: center; align-items: center;
  padding: 20px; background: var(--text); border-radius: var(--r-md);
  min-height: 240px;
}

/* ── TOAST ── */
.hub-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card-2); color: var(--text);
  padding: 12px 24px; border-radius: var(--r-full);
  border: 1px solid var(--border-2); box-shadow: 0 8px 24px var(--shadow-dark);
  font-size: 14px; opacity: 0; transition: all 0.25s ease;
  z-index: 2000; pointer-events: none;
}
.hub-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .agent-task-line { font-size: 13px; }
  .agent-task-detail-grid { grid-template-columns: 1fr; }
  .users-grid { grid-template-columns: 1fr; }
  .users-toolbar { flex-wrap: wrap; }
  .modal { padding: 16px; }
  .agent-textarea { min-height: 200px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v16 — Setup overhaul, brand sweep, header fix
   New components: setup-card-wide, step pills, auth-mode-grid,
   strength meter, paste textarea, error banner, brand link.
   All colours via existing tokens. No hardcoded values.
   ════════════════════════════════════════════════════════════════════════ */

/* Header behaviour fix — was sticky and overlapping content. Now flows with
   the document so scrolling pushes the nav off-screen normally. The nav
   still has a backdrop blur so when it's at the top it looks clean. */
.nav { position: relative; }
.land-nav { position: relative; }

/* ─── Footer: in-flow, compact, at the bottom of the content ─────
   No more position:fixed. The flex-column #app layout above pins it
   to the bottom naturally. Same pattern the landing page uses. */
.footer {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px 24px calc(10px + var(--safe-b));
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .footer {
    font-size: 11px;
    padding: 8px 14px calc(8px + var(--safe-b));
    gap: 6px;
    justify-content: center;
    text-align: center;
  }
}
/* Landing footer uses the same flow — it's inside #land-body and gets
   margin-top: auto via the #app > #land-body > .footer rule above. */

/* ─── Hide scrollbars site-wide (per user request) ─────────────────
   Scrolling still works (mouse wheel, touch, keyboard, all native).
   Just the visual track + thumb are hidden for a cleaner look. */
html, body, .main, .agent-task-detail .agent-pre, .modal,
.users-grid, .apps-grid, .seed-grid, .seed-display {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / old Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main::-webkit-scrollbar,
.agent-pre::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.users-grid::-webkit-scrollbar,
.apps-grid::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari / WebKit */
  width: 0;
  height: 0;
}

/* ─── Welcome banner on the dashboard home ────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.welcome-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.welcome-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}
.welcome-text { display: flex; flex-direction: column; gap: 4px; }
.welcome-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.welcome-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.welcome-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 10px;
}
.tag-platform {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}
.tag-owner { color: var(--green); border-color: var(--green); }
.tag-admin { color: var(--accent); border-color: var(--accent); }
.tag-member { color: var(--text-2); }
.welcome-meta {
  color: var(--text-3);
  font-family: var(--mono);
}
.welcome-meta a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--text-3);
}
.welcome-meta a:hover { color: var(--text); border-bottom-color: var(--text); }
.welcome-summary {
  font-size: 13px;
  color: var(--text-2);
  text-align: right;
}
.welcome-summary strong { color: var(--green); font-weight: 700; }
@media (max-width: 640px) {
  .welcome-banner { flex-direction: column; align-items: flex-start; padding: 16px; }
  .welcome-summary { text-align: left; }
}

/* ─── Owned-by badge on app cards ─────────────────────────────────── */
.owned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}
.owned-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* Landing nav brand link (turns the brand into a clickable home button) */
.land-nav-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.land-nav-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.land-nav-brand-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .land-nav-brand-text { font-size: 15px; }
  .land-nav-brand-icon { width: 28px; height: 28px; font-size: 14px; }
}

/* Wider setup card for the new multi-step flow */
.setup-card-wide {
  max-width: 760px;
}

/* Back link at the top of setup / login / waitlist cards */
.setup-back-link {
  display: inline-block;
  color: var(--text-3);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 20px;
  -webkit-tap-highlight-color: transparent;
}
.setup-back-link:hover { color: var(--text); }

/* Setup form sections */
.setup-section {
  text-align: left;
  margin-bottom: 20px;
}
.setup-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.setup-label .setup-hint {
  display: block;
  text-transform: none;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  letter-spacing: 0;
}
.required-mark {
  color: var(--red);
  font-weight: 800;
  margin-left: 2px;
}
.optional-mark {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.setup-input {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 15px;
  width: 100%;
  font-family: var(--sans);
  min-height: 44px;
}
.setup-input:focus {
  outline: none;
  border-color: var(--accent);
}
.setup-input::placeholder { color: var(--text-3); }

.setup-input-mono {
  font-family: var(--mono);
  letter-spacing: 0.05em;
}

.setup-textarea-mono {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 64px;
  resize: vertical;
}

.setup-field-error {
  font-size: 13px;
  color: var(--red);
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.4;
}

.setup-error-banner {
  background: var(--bg);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--red);
  font-size: 13px;
  margin-top: 14px;
  text-align: left;
  line-height: 1.5;
}

.setup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.setup-btn-primary {
  background: var(--accent);
  color: var(--text);
  border: none;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.15s;
}
.setup-btn-primary:hover:not(:disabled) { background: var(--accent-h); }
.setup-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.setup-btn-primary:disabled {
  background: var(--bg-card-2);
  color: var(--text-3);
  cursor: not-allowed;
}

.setup-btn-block {
  display: block;
  width: 100%;
  margin-top: 16px;
}

.setup-btn-ghost {
  background: transparent;
  color: var(--text-3);
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 16px;
  text-align: center;
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.setup-btn-ghost:hover { color: var(--text); }

/* Step indicator pills */
.step-header {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.step-pill {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-3);
  text-align: center;
  font-weight: 600;
  transition: all 0.2s;
}
.step-pill-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.step-pill-done {
  background: var(--bg);
  border-color: var(--green);
  color: var(--green);
}

/* Auth mode picker cards */
.auth-mode-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-mode-card {
  display: block;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.auth-mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-mode-card:hover { border-color: var(--text-3); }
.auth-mode-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--shadow-accent);
}
.auth-mode-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.auth-mode-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* Phrase strength meter */
.strength-meter {
  margin-top: 8px;
  height: 6px;
  background: var(--bg-card-2);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.2s, background 0.2s;
  border-radius: var(--r-full);
}
.strength-1 { background: var(--red); }
.strength-2 { background: var(--yellow); }
.strength-3 { background: var(--accent); }
.strength-4 { background: var(--green); }
.strength-label {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* Login secondary links */
.login-secondary-links {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
}
.login-secondary-links a {
  color: var(--accent);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.login-secondary-links a:hover { text-decoration: underline; }

/* Mobile tweaks for the new setup elements */
@media (max-width: 640px) {
  .setup-card-wide { max-width: 100%; }
  .auth-mode-card { padding: 12px 14px; }
  .auth-mode-name { font-size: 14px; }
  .step-pill { padding: 6px 8px; font-size: 10px; }
  .setup-btn-primary { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v19 — Register Interest / EOI page (was the waitlist)
   Two-column layout: context on the left, form on the right. Stacks
   vertically on mobile. Honest "still building, no sales" framing.
   ════════════════════════════════════════════════════════════════════════ */
.eoi-page {
  padding: 48px 24px 32px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.eoi-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}
.eoi-left {
  text-align: left;
}
.eoi-badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--tint-yellow);
  color: var(--yellow);
  border: 1px solid var(--yellow);
  margin-bottom: 20px;
}
.eoi-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--text);
}
.eoi-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 28px;
}
.eoi-lead em {
  color: var(--text);
  font-style: italic;
}
.eoi-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eoi-bullets li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}
.eoi-bullets strong {
  color: var(--text);
  font-weight: 700;
}
.eoi-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
}
.eoi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: eoi-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--green);
}
@keyframes eoi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.eoi-right {
  position: sticky;
  top: 24px;
}
.eoi-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: 0 16px 48px var(--shadow-dark);
}
.eoi-form-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
  text-align: left;
}
.eoi-form-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 24px;
  text-align: left;
}
.eoi-privacy {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
.eoi-success {
  text-align: center;
  padding: 20px 0;
}
.eoi-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg);
  font-size: 36px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.eoi-success h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .eoi-wrap { grid-template-columns: 1fr; gap: 32px; }
  .eoi-right { position: static; }
  .eoi-title { font-size: 32px; }
}
@media (max-width: 640px) {
  .eoi-page { padding: 32px 18px 24px; }
  .eoi-title { font-size: 26px; }
  .eoi-lead { font-size: 15px; }
  .eoi-form-card { padding: 24px 20px; }
}

/* ── Dashboard home waitlist summary card ──
   Count lives at the top of the card, above the recent entries.
   Reuses .dash-mini-list + .dash-mini-item for row styling. */
.dash-mini-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

/* ── Waitlist form sub-labels + (optional) hint ──
   Each email / phone field now has a small label above it that says
   "Email (optional)" so users see individually they don't have to
   fill both. The section-level hint above still explains "one is
   required". */
.setup-sublabel {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin: 12px 0 4px;
  font-weight: 600;
}
.setup-sublabel:first-of-type { margin-top: 0; }
.setup-optional {
  color: var(--text-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  margin-left: 4px;
}

/* ── Two-factor authentication section in Settings ──
   Everything here is disabled / informational until TOTP is wired. */
.twofa-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.twofa-coming-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-full, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--yellow, #facc15);
  color: var(--bg, #000);
}
.twofa-section button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE v2 — story page, not a tech product page
   Added for the REWRITE-LANDING-PAGE.md rebuild. Every class below
   lives side-by-side with the legacy .land-* / .hero / .price-* /
   .savings-* classes from v1; the v1 classes still exist because
   renderPlatform / renderDemo still reference some of them, so
   DO NOT delete the old blocks. New landing uses the *-v2 variants
   where the old ones clashed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared inline hub logo ── */
.hub-logo {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
/* Nav logo — the legacy .land-nav-brand-icon class has a white circle
   background from v1 when the content was a big letter H. The new v2
   landing uses an SVG inside that span; we null the background + size
   so the SVG renders cleanly without a white disc behind it. */
.land-nav-brand-icon {
  background: transparent !important;
  color: var(--accent);
  width: auto;
  height: auto;
  padding: 0;
}
.land-nav-brand-icon .hub-logo {
  color: var(--accent);
}
/* Same story for the hero logo — v1 gave it a solid white bg circle
   which clashed with the new spoked symbol. Null it so only the SVG
   paints. */
.hero-logo-v2 {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-logo-v2 .hub-logo {
  color: var(--accent);
  filter: drop-shadow(0 6px 24px var(--shadow-accent, rgba(79, 70, 229, 0.35)));
}

/* ── Hero v2 ── */
.hero-v2 {
  padding: 64px 20px 72px;
  text-align: center;
  background: radial-gradient(ellipse at top, var(--bg-card, #0a0a0a), var(--bg, #000) 75%);
}
.hero-v2 .hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.hero-logo-v2 {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.hero-title-v2 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 8px;
}
.hero-sub-v2 {
  font-size: 20px;
  color: var(--text-2);
  margin-bottom: 20px;
  font-weight: 500;
}
.hero-free-strip {
  display: inline-block;
  padding: 14px 20px;
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 10px);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 520px;
}
.hero-free-strip strong {
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Customer stories ── */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.story-card {
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 10px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms, transform 180ms;
}
.story-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.story-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.story-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  flex: 1;
  margin-bottom: 18px;
}
.story-btn {
  display: inline-block;
  padding: 10px 18px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text-3);
  border-radius: var(--r-sm, 6px);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 44px;
  line-height: 22px;
  transition: background 180ms, border-color 180ms;
}
.story-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ── Free forever strip (between stories and pricing) ── */
.land-free-strip {
  text-align: center;
}
.free-strip-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--bg-card, #0a0a0a);
  border: 2px solid var(--green);
  border-radius: var(--r-md, 10px);
  padding: 32px 28px;
}
.free-strip-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}
.free-strip-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.free-strip-list li::before {
  content: "✓ ";
  color: var(--green);
  font-weight: 700;
  margin-right: 6px;
}
.free-strip-promise {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin: 16px 0 20px;
}

/* ── Pricing v2 ── */
.pricing-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto 24px;
}
.pricing-grid-v2 .price-card {
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 10px);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-grid-v2 .price-card.price-free {
  border-color: var(--green);
}
.pricing-grid-v2 .price-card.price-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-card, #0a0a0a), var(--bg-hover));
}
.pricing-grid-v2 .price-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--r-full, 9999px);
}
.pricing-grid-v2 .price-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.pricing-grid-v2 .price-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.pricing-grid-v2 .price-amount span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 2px;
}
.pricing-grid-v2 .price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}
.pricing-grid-v2 .price-features li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  padding: 6px 0;
}
.pricing-grid-v2 .price-btn {
  display: block;
  padding: 12px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text-3);
  border-radius: var(--r-sm, 6px);
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  line-height: 20px;
  transition: background 180ms, border-color 180ms;
}
.pricing-grid-v2 .price-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.pricing-grid-v2 .price-btn-featured {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Free-for-life highlighted strip below the pricing grid */
.free-for-life {
  max-width: 900px;
  margin: 32px auto 0;
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--green);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md, 10px);
  padding: 24px 28px;
}
.free-for-life-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.free-for-life p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ── Savings table v2 ──
   Wrapper is overflow-x: auto so the 560-px-wide table can scroll
   independently on narrow viewports. The wrapper itself must never
   grow past its parent — the classic mistake is leaving `max-width`
   alone, which lets min-content sizing of the child table push the
   wrapper to 560px and leak 65+px past the viewport on mobile.
   Forcing `width: 100%` + explicit `min-width: 0` means the wrapper
   is exactly its parent's width, and the TABLE inside scrolls
   horizontally within that fixed wrapper box. */
.savings-table-wrap {
  width: 100%;
  max-width: 900px;
  min-width: 0;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.savings-table-v2 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text-2);
  /* No min-width on mobile — on desktop the table is comfortably
     wider than the wrapper so it fills naturally. On mobile we let
     it shrink to fit and the wrapper's `overflow-x: auto` still
     kicks in if the browser truly can't fit the 4 columns. */
}
/* Desktop-only min-width: gives the table a comfortable fixed width
   from mid-tablet up, where the wrapper has plenty of horizontal
   room. Below 768 the table collapses naturally. */
@media (min-width: 768px) {
  .savings-table-v2 { min-width: 560px; }
}
.savings-table-v2 thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: left;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-hover);
}
.savings-table-v2 tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-hover);
}
.savings-table-v2 tbody td:first-child {
  color: var(--text);
  font-weight: 600;
}
.savings-total-row td {
  border-top: 2px solid var(--text-3);
  background: var(--bg-card, #0a0a0a);
  font-size: 15px;
}

/* ── Values / where the money goes ── */
.land-values {
  background: var(--bg-card, #0a0a0a);
  border-top: 1px solid var(--bg-hover);
  border-bottom: 1px solid var(--bg-hover);
}
.values-card {
  max-width: 720px;
  margin: 0 auto;
}
.values-card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 16px;
}
.values-punch {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding-top: 12px;
  border-top: 1px solid var(--bg-hover);
}

/* ── Roadmap ── */
.roadmap-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 24px auto 12px;
  max-width: 1100px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.roadmap-card {
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-sm, 6px);
  padding: 14px 16px;
}
.roadmap-live {
  border-color: var(--accent);
}
.roadmap-live .roadmap-name {
  color: var(--accent);
}
.roadmap-soon {
  opacity: 0.65;
}
.roadmap-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.roadmap-tag {
  font-size: 11px;
  color: var(--text-3);
}
.roadmap-horizon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1100px;
  margin: 12px auto 0;
  opacity: 0.4;
}
.roadmap-horizon-pill {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-full, 9999px);
}
.roadmap-tagline {
  text-align: center;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 32px;
  font-weight: 500;
}

/* ── How it works v2 ── */
.how-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.how-v2-step {
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-radius: var(--r-md, 10px);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.how-v2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  flex-shrink: 0;
}
.how-v2-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ── Landing footer v2 (flat, single block) ──
   Previously this was three stacked sub-blocks separated by internal
   borders, which visually read as "two footers stacking". Now it's a
   single centered column with the brand on top, the tagline + the
   disclaimer + the links as plain sibling lines. No internal borders,
   no sub-containers, no max-width wrappers — just a vertical rhythm
   of four short lines with 6-8px gaps. */
.land-footer {
  padding: 28px 20px 24px;
  background: var(--bg-card, #0a0a0a);
  border-top: 1px solid var(--bg-hover);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.land-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.land-footer-brand .hub-logo { color: var(--accent); }
.land-footer-brand-name { letter-spacing: 0.01em; }

.land-footer-tagline {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0;
}

.land-footer-disclaimer {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 560px;
  margin: 0;
}

.land-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.land-footer-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 11px;
  padding: 2px 4px;
}
.land-footer-links a:hover { color: var(--accent); }
.land-footer-muted {
  color: var(--text-3);
  font-size: 11px;
}
.land-footer-sep {
  color: var(--text-3);
  opacity: 0.5;
  font-size: 11px;
}

/* ── EOI form additions (plan dropdown + terms note) ── */
.eoi-terms-note {
  background: var(--bg-card, #0a0a0a);
  border: 1px solid var(--bg-hover);
  border-left: 3px solid var(--yellow);
  border-radius: var(--r-sm, 6px);
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ── Terms page ── */
.terms-page {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px 60px;
  color: var(--text-2);
  line-height: 1.7;
  font-size: 15px;
}
.terms-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.terms-page h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 32px;
  margin-bottom: 10px;
}
.terms-page p { margin: 0 0 16px; }
.terms-page p strong { color: var(--text); }
.terms-back {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--bg-hover);
}
.terms-back a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.terms-back a:hover { text-decoration: underline; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .hero-v2 { padding: 48px 16px 56px; }
  .hero-title-v2 { font-size: 32px; }
  .hero-sub-v2 { font-size: 16px; }
  .hero-free-strip { font-size: 13px; padding: 12px 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .cta-btn { min-height: 48px; }

  .story-grid { grid-template-columns: 1fr; }
  .pricing-grid-v2 { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
  .how-v2 { grid-template-columns: 1fr; }

  .free-strip-card { padding: 24px 20px; }
  .free-for-life { padding: 20px 22px; }

  /* On mobile the savings table drops its min-width and fits the
     wrapper naturally. The desktop-only `@media (min-width: 768px)`
     rule further up sets min-width: 560px for desktop. */

  .land-footer { padding: 32px 16px 24px; }
}

@media (max-width: 480px) {
  .hero-title-v2 { font-size: 26px; }
  .hero-sub-v2 { font-size: 15px; }
  .roadmap-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING v2 readability bump — apply AFTER all the initial v2
   classes so these overrides win the cascade without needing
   !important. The goal is simple: cards become visibly separate
   from the page background, body text is one notch brighter, and
   secondary labels (roadmap tags, thread metadata etc.) have
   enough contrast to read without squinting.
   ═══════════════════════════════════════════════════════════════ */

/* Bump every landing-v2 card's background from #0a0a0a (barely
   visible against #000 body) to the existing --bg-hover token
   (#181818) which is a clear step lighter. Hero free strip stays
   darker because it's meant to feel like an inset callout. */
.story-card,
.pricing-grid-v2 .price-card,
.roadmap-card,
.how-v2-step {
  background: var(--bg-hover, #181818);
  border-color: var(--bg-active, #222);
}

/* Values section already has its own dark bg via .land-values,
   but the values-card inside should pop. */
.land-values { background: var(--bg-hover, #181818); }

/* Free strip card: keep the green border but make it pop more. */
.free-strip-card { background: var(--bg-hover, #181818); }

/* Section headings: up from tiny 14px muted to a more readable size. */
.land-h2 { font-size: 12px; }

/* Roadmap "coming soon" was at opacity 0.65 which killed readability
   on narrow viewports. Drop the opacity and rely on the dimmer text
   colour alone. */
.roadmap-soon { opacity: 1; }
.roadmap-soon .roadmap-name { color: var(--text-2); }
.roadmap-soon .roadmap-tag { color: var(--text-3); }

/* Horizon pills: brighter text so the ten-year-vision names are
   actually readable, not ghosts. */
.roadmap-horizon { opacity: 0.7; }
.roadmap-horizon-pill {
  color: var(--text-2);
  background: var(--bg-hover, #181818);
  border-color: var(--bg-active, #222);
}

/* Savings table: the tbody td was reading flat. Bump the first-col
   label weight and the row contrast so the "you pay now" vs
   "hub cost" columns read as a comparison not a wall. */
.savings-table-v2 tbody td {
  color: var(--text-2);
}
.savings-table-v2 tbody td:first-child {
  color: var(--text);
  font-weight: 600;
}
.savings-total-row td {
  background: var(--bg-hover, #181818);
}

/* Eoi terms note: up the contrast a touch. */
.eoi-terms-note {
  background: var(--bg-hover, #181818);
  color: var(--text-2);
}

/* ---- LIVE CALL FLOW VISUALIZER ---- */
.live-page { padding: 2rem 1.5rem; max-width: 900px; margin: 0 auto; }
.live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.live-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0; }
.live-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--text-2); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.live-dot.idle { background: var(--text-3); }
.live-dot.active { background: var(--green); animation: pulse-dot 1.2s infinite; }
.live-dot.ended { background: var(--red); }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.4); } }

.live-number { font-size: 2.5rem; font-weight: 800; color: var(--text); text-align: center; min-height: 3.5rem; letter-spacing: 0.02em; }
.live-timer { font-size: 1.8rem; font-weight: 600; color: var(--accent); text-align: center; min-height: 2.5rem; font-variant-numeric: tabular-nums; }

.live-pipeline { display: flex; gap: 0.25rem; margin: 2rem 0; justify-content: center; flex-wrap: wrap; }
.live-stage { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.75rem 0.6rem; border-radius: 12px; min-width: 70px; transition: all 0.3s ease; position: relative; }
.live-stage::after { content: ''; position: absolute; right: -6px; top: 50%; width: 8px; height: 2px; background: var(--text-3); }
.live-stage:last-child::after { display: none; }

.live-stage.pending { opacity: 0.3; }
.live-stage.pending .live-stage-icon { color: var(--text-3); }
.live-stage.active { opacity: 1; background: rgba(79,70,229,0.15); box-shadow: 0 0 20px rgba(79,70,229,0.3); transform: scale(1.08); }
.live-stage.active .live-stage-icon { color: var(--accent); animation: pulse-icon 1.5s infinite; }
.live-stage.done { opacity: 0.8; }
.live-stage.done .live-stage-icon { color: var(--green); }
.live-stage.done::after { background: var(--green); }

@keyframes pulse-icon { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }

.live-stage-icon { font-size: 1.6rem; line-height: 1; }
.live-stage-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }

.live-events { margin-top: 2rem; }
.live-events h3 { font-size: 1rem; color: var(--text-2); margin-bottom: 0.75rem; }
.live-event-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 300px; overflow-y: auto; }
.live-event { display: flex; gap: 0.75rem; padding: 0.4rem 0.6rem; border-radius: 6px; background: var(--bg-card); font-size: 0.82rem; animation: fade-in-event 0.3s ease; }
@keyframes fade-in-event { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.live-event-time { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 70px; }
.live-event-type { color: var(--accent); font-weight: 700; min-width: 60px; text-transform: uppercase; font-size: 0.75rem; }
.live-event-text { color: var(--text-2); flex: 1; }

/* Mobile: vertical pipeline */
@media (max-width: 600px) {
  .live-pipeline { flex-direction: column; align-items: stretch; }
  .live-stage { flex-direction: row; min-width: unset; padding: 0.6rem 1rem; }
  .live-stage::after { display: none; }
  .live-stage-icon { font-size: 1.3rem; min-width: 2rem; text-align: center; }
  .live-stage-label { font-size: 0.8rem; }
  .live-number { font-size: 1.8rem; }
  .live-timer { font-size: 1.4rem; }
}