:root {
  color-scheme: dark;

  --bg: #0a0a0b;
  --bg-2: #111114;
  --card: #131316;
  --card-2: #17171b;
  --card-alpha: rgba(19,19,22,0.85);
  --card-alpha-2: rgba(19,19,22,0.75);
  --hint-bg: rgba(19,19,22,0.5);
  --border: #26262c;
  --border-strong: #33333a;
  --text: #f5f5f7;
  --muted: #8a8a92;
  --muted-2: #5d5d66;
  --placeholder: #4b4b54;

  --accent: #7cd0e8;
  --accent-hover: #9adfef;
  --accent-glow: rgba(124,208,232,0.22);
  --accent-glow-strong: rgba(124,208,232,0.5);
  --accent-soft: rgba(124,208,232,0.07);
  --on-accent: #07161c;

  --success: #34d399;
  --success-soft: rgba(52,211,153,0.15);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,0.15);
  --danger-text: #ff8080;
  --warning: #f2c530;
  --warning-soft: rgba(242,197,48,0.15);

  --overlay-scrim: rgba(6,7,9,0.72);
  --shadow-sm: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-md: 0 20px 50px -20px rgba(0,0,0,0.55);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,0.6);
  --shadow-modal: 0 40px 100px rgba(0,0,0,0.6);
  --grid-line: rgba(255,255,255,0.04);
  --hairline-hover: rgba(255,255,255,0.04);
  --ambient-glow: rgba(255,255,255,0.05);

  /* Terminal / mascot chip surface — intentionally dark in both themes */
  --terminal-bg: #1a1a1f;
  --terminal-border: var(--border-strong);

  /* Sheriff palette (decorative, fixed art) */
  --sh-hat: #2c3a7a;
  --sh-hat-dark: #1e285a;
  --sh-hat-band: #8a1e1e;
  --sh-skin: #ffcf8c;
  --sh-skin-dark: #d99a55;
  --sh-hair: #1a1a1e;
  --sh-shirt: var(--accent);
  --sh-vest: #2f3f8a;
  --sh-vest-dark: #212d63;
  --sh-belt: #3a2515;
  --sh-belt-line: #1f130a;
  --sh-star: #f2c530;
  --sh-mouth: #4a72c7;
  --sh-outline: #0d0f18;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --bg-2: #eef0f3;
  --card: #ffffff;
  --card-2: #f5f6f8;
  --card-alpha: rgba(255,255,255,0.92);
  --card-alpha-2: rgba(255,255,255,0.88);
  --hint-bg: rgba(255,255,255,0.65);
  --border: #e2e4ea;
  --border-strong: #ccd0d9;
  --text: #14161c;
  --muted: #5a5f6b;
  --muted-2: #868c99;
  --placeholder: #9aa0ac;

  --accent: #0f7ea3;
  --accent-hover: #0c6885;
  --accent-glow: rgba(15,126,163,0.16);
  --accent-glow-strong: rgba(15,126,163,0.32);
  --accent-soft: rgba(15,126,163,0.07);
  --on-accent: #ffffff;

  --success: #0c8f63;
  --success-soft: rgba(12,143,99,0.1);
  --danger: #d5342a;
  --danger-soft: rgba(213,52,42,0.1);
  --danger-text: #b8291f;
  --warning: #a9720f;
  --warning-soft: rgba(169,114,15,0.12);

  --overlay-scrim: rgba(20,22,28,0.45);
  --shadow-sm: 0 8px 20px rgba(20,24,34,0.08);
  --shadow-md: 0 20px 44px -22px rgba(20,24,34,0.16);
  --shadow-lg: 0 30px 60px -30px rgba(20,24,34,0.16);
  --shadow-modal: 0 30px 80px rgba(20,24,34,0.2);
  --grid-line: rgba(20,24,34,0.045);
  --hairline-hover: rgba(20,24,34,0.035);
  --ambient-glow: rgba(15,126,163,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11' 1, 'ss01' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Background layers */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 75%);
}
.bg-glow {
  position: fixed;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  border-radius: 9999px;
  background: var(--ambient-glow);
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}

/* Theme toggle — sliding pill switch */
.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 30px;
}
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.theme-toggle .tt-icon {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  color: var(--muted-2);
  transition: color 0.2s;
}
.theme-toggle .tt-moon { color: var(--text); }
[data-theme="light"] .theme-toggle .tt-moon { color: var(--muted-2); }
[data-theme="light"] .theme-toggle .tt-sun { color: var(--text); }
.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 6px var(--accent-glow);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
[data-theme="light"] .theme-toggle-thumb { transform: translateX(24px); }
.theme-toggle-standalone {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}

/* Header block */
.page-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 8px;
}

.sheriff-sprite-onb {
  width: 72px !important;
  height: 72px !important;
  image-rendering: pixelated;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
}

/* --- MASCOT (Sheriff Pixel Agent) --- */
.mascot-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.mascot-bubble {
  position: relative;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  color: #f5f5f7;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  white-space: nowrap;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 1.6s ease-in-out infinite;
}
.mascot-text.typing::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--success);
  animation: caret-blink 0.7s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.mascot-tail {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px; height: 10px;
  background: var(--terminal-bg);
  border-right: 1px solid var(--terminal-border);
  border-bottom: 1px solid var(--terminal-border);
  transform: translateX(-50%) rotate(45deg);
}

/* Sheriff Pixel Art - 16x16 grid built via JS */
.sheriff {
  position: relative;
  padding-bottom: 10px;
}
.sheriff-grid {
  display: grid;
  grid-template-columns: repeat(16, 6px);
  grid-template-rows: repeat(16, 6px);
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
}
.sheriff-grid > i {
  display: block;
  width: 6px;
  height: 6px;
}
.sheriff-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  filter: blur(6px);
  z-index: -1;
}

.page-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
  text-align: center;
}
.page-subtitle {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  max-width: 440px;
  margin: 0;
}
.page-login-hint {
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
  margin: 10px 0 0;
}
.page-login-hint a { color: var(--accent); font-weight: 600; text-decoration: none; }
.page-login-hint a:hover { text-decoration: underline; }

/* Main / Card */
.main-wrap {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  padding: 14px 20px 32px;
}
.card {
  width: 100%;
  max-width: 680px;
  background: var(--card-alpha);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px 30px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 640px) {
  .card { padding: 22px 18px; border-radius: 16px; }
}
.login-card { max-width: 420px; margin: 0 auto; }
.login-footer-hint {
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  margin: 20px 0 0;
}
.login-footer-hint a { color: var(--accent); font-weight: 600; text-decoration: none; }
.login-footer-hint a:hover { text-decoration: underline; }

/* Progress Rail */
.progress-rail {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.progress-rail li {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.progress-rail li:last-child { flex: 0 0 auto; }
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex-shrink: 0;
  cursor: default;
}
.progress-rail li.clickable .rail-item { cursor: pointer; }
.dot {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.25s ease;
}
.dot svg { width: 14px; height: 14px; }
.dot-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 6px;
  align-self: center;
  margin-bottom: 22px;
  transition: background 0.35s ease;
}
/* rail states */
.progress-rail li.active .dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
  background: var(--accent-soft);
}
.progress-rail li.active .dot-label { color: var(--accent); }
.progress-rail li.done .dot {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.progress-rail li.done .dot-label { color: var(--accent); }
.progress-rail li.done + li .connector,
.progress-rail li.done .connector { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

@media (max-width: 560px) {
  .dot-label { display: none; }
  .connector { margin-bottom: 0; }
}

/* Steps */
.step[hidden] { display: none; }
.step { animation: fadeIn 0.28s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-header { margin-bottom: 18px; }
.step-header.center { text-align: center; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.step-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.subtitle {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.subtitle kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: #f5f5f7;
}

/* Fields */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.mt { margin-top: 12px; }
.mt-lg { margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.field input,
.field select,
.select-wrap select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: var(--placeholder); }
.field input:focus,
.field select:focus,
.select-wrap select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field-hint {
  font-size: 11px;
  color: var(--muted-2);
  margin: 4px 0 0 4px;
}
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon svg {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.input-icon input { padding-left: 42px; }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
}
.select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--muted);
  pointer-events: none;
}

/* Chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 2px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px 6px 14px;
  font-size: 12px;
  font-weight: 500;
}
.chip button {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  display: inline-flex;
  cursor: pointer;
  transition: color 0.15s;
}
.chip button:hover { color: var(--text); }
.chip button svg { width: 12px; height: 12px; }

/* Issue cards */
.issue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .issue-grid { grid-template-columns: 1fr 1fr; } }
.issue-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border 0.2s, background 0.2s, transform 0.15s;
}
.issue-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.issue-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-glow), 0 0 18px var(--accent-soft);
}
.issue-icon {
  width: 34px; height: 34px;
  background: var(--card-2);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text);
}
.issue-icon svg { width: 16px; height: 16px; }
.issue-card.selected .issue-icon { background: var(--accent); color: var(--on-accent); }
.issue-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.issue-title { font-size: 13px; font-weight: 600; }
.issue-body { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Link add row */
.btn-add {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.btn-add:hover { background: var(--accent-hover); }
.btn-add svg { width: 18px; height: 18px; }
.hint-box {
  border: 1px dashed var(--border-strong);
  background: var(--hint-bg);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.hint-box strong { color: var(--text); font-weight: 600; }
/* Plans */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.plan-grid[hidden] { display: none; }
@media (min-width: 640px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
.plan-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border 0.25s;
}
.plan-card:hover { border-color: var(--border-strong); }
.plan-card--highlight {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  box-shadow: 0 0 30px var(--accent-glow);
}
.plan-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0 18px 0 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 8px;
}
.plan-label--primary { color: var(--text); }
.plan-price {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plan-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}
.plan-setup-fee {
  margin: -14px 0 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.plan-setup-fee span {
  font-weight: 400;
  color: var(--muted-2);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.plan-features li {
  display: flex; align-items: center; gap: 10px;
}
.plan-features li svg {
  width: 14px; height: 14px;
  color: var(--text);
  flex-shrink: 0;
}
.plan-features--primary { color: var(--text); }
.plan-features--primary li svg { color: var(--success); }

/* Final step — confirmation checklist */
.final-checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto 22px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.final-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.final-checklist .check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Buttons */
button { cursor: pointer; font-family: inherit; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 20px var(--accent-glow);
}
/* This button had ONLY :hover. It is the primary action on the wizard, the
   login page and the closed-account screen, so it also needs a visible focus
   ring (keyboard + a11y), a pressed state, and a disabled state — several
   handlers already set `.disabled = true` while a request is in flight and
   nothing rendered it. */
.btn-primary { cursor: pointer; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 0 26px var(--accent-glow-strong); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow-strong);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: 0 0 20px var(--accent-glow); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary svg { width: 16px; height: 16px; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  transition: border 0.15s, background 0.2s, color 0.15s;
}
.btn-outline:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  transition: color 0.15s;
}
.btn-ghost { cursor: pointer; }
.btn-ghost:hover:not(:disabled) { color: var(--text); }
.btn-ghost:focus-visible {
  outline: none;
  color: var(--text);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.btn-ghost:active:not(:disabled) { color: var(--text); transform: scale(0.98); }
.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ghost svg { width: 16px; height: 16px; }
.btn-full { width: 100%; }
/* `hidden` on a button that carries `display: inline-flex` does nothing: the
   author rule above beats the browser stylesheet's `[hidden] { display: none }`.
   So every `.hidden = true` on one of these was silently ignored --
   `accountContinueBtn` ("Continue to Payment") stayed visible to an account
   with an unconfirmed address, and the dashboard's locked-document upsell kept
   offering Save and Regenerate. */
.btn-primary[hidden], .btn-outline[hidden], .btn-ghost[hidden] { display: none; }

/* Required-field marker + step validation banner */
.required-mark { color: var(--danger); font-weight: 700; }
.step-error {
  margin: 0 0 14px;
  background: var(--danger-soft);
  color: var(--danger-text);
  border: 1px solid var(--danger);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  text-align: center;
}

/* Step 1 — Auth0 auth choices */
.auth-error {
  max-width: 420px;
  margin: 0 auto 14px;
  background: var(--danger-soft);
  color: var(--danger-text);
  border: 1px solid var(--danger);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  text-align: center;
}
/* Same callout, positive outcome. Used by the verification page, where the
   common case ("confirmed", "link sent") is good news and rendering it in the
   danger palette reads as a failure. */
.auth-error--ok {
  /* Same admin-token mistake as the padlock had: `--ok-*` are names from
     admin/src/index.css. `--ok-text` and `--success-text` are both undefined
     here, so the colour resolved to the hardcoded `#15803d` — a dark green,
     rendered on a translucent green panel in a dark theme, i.e. unreadable.
     `--success` is the role this text actually wants and it already exists, so
     nothing new is introduced. */
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success);
}
.auth-choices { display: flex; flex-direction: column; gap: 14px; max-width: 360px; margin: 8px auto 0; }
.auth-choices[hidden], .auth-form[hidden] { display: none; }
.btn-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: border 0.15s, background 0.2s, transform 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  cursor: pointer;
}
.btn-auth:hover { border-color: var(--accent); background: var(--card-2); transform: translateY(-1px); }
.btn-auth svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-auth--email svg { color: var(--muted); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-choices .field-hint { text-align: center; max-width: 320px; align-self: center; }

.auth-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 8px auto 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}
.auth-profile[hidden] { display: none; }
.auth-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--card-2); flex-shrink: 0; }
.auth-profile-info { flex: 1; min-width: 0; }
.auth-profile-status { font-size: 10px; color: var(--success); font-weight: 700; margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.auth-profile-name { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.auth-profile-email { font-size: 12px; color: var(--muted); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sign-in form — email/password on top, Google below, links at the bottom */
.auth-form { max-width: 360px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 4px; }
.auth-form .auth-divider { margin: 16px 0; }
.auth-form .btn-auth { margin-top: 2px; }
.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
}
.auth-links-sep { color: var(--muted-2); }
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  padding: 2px;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.step-nav[hidden] { display: none; }

/* SFX toggle button */
.sfx-toggle {
  position: fixed;
  left: 28px;
  bottom: 28px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, border 0.15s, color 0.15s;
}
.sfx-toggle:hover { transform: scale(1.06); border-color: var(--accent); }
.sfx-toggle.muted { color: var(--muted-2); }
.sfx-toggle svg { width: 18px; height: 18px; }



/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING DESIGN SYSTEM — single source, 2026-08-31
   Replaces every earlier "fit" block. Those were three iterations stacked:
   each added padding overrides and a media query on top of the last, which is
   why the card looked assembled rather than designed. There is one scale here
   and everything below uses it. No raw px outside these tokens.

   The mascot is NOT shrunk to nothing and no helper text is deleted to buy
   space — the room comes from card padding, stepper margin and the removal of
   blocks that restated each other.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --or-space-1: 8px;
  --or-space-2: 16px;
  --or-space-3: 24px;
  --or-space-4: 32px;
  --or-radius: 14px;
  --or-input-h: 48px;
  --or-btn-h: 48px;
  --or-gap-header: 12px;

  /* ── Type scale ──────────────────────────────────────────────────────────────
     ONE named ladder for the whole app. dashboard.css alone had NINETEEN
     distinct font-size values, none of them tokens, two of them !important, and
     it bottomed out at 7.5px. Every one of them now maps onto a step here.

     The four names below the ladder are the original tokens, kept as aliases
     rather than deleted so their existing consumers render identically. */
  --or-text-2xs: 11px;
  --or-text-xs: 12px;
  --or-text-sm: 13px;
  --or-text-md: 14px;
  --or-text-lg: 16px;
  --or-text-xl: 18px;
  --or-text-2xl: 22px;
  /* Display sizes. Only three, and they are not interchangeable with the
     ladder above: `-xl` is the reputation score, the single primary number on
     the dashboard; `-lg` is the once-per-sign-in welcome cutscene, which owns
     the whole viewport while it plays; `-sm` is the rank, which has to dominate
     its own card without competing with the score. */
  --or-display-sm: 32px;
  --or-display-lg: 44px;
  --or-display-xl: 56px;

  --or-label: var(--or-text-sm);
  --or-title: var(--or-text-2xl);
  --or-body: var(--or-text-md);
  --or-muted: var(--or-text-sm);
}

/* ── Header cluster: ONE element, page-level, top right ─────────────────────
   Login and the theme toggle were separately position:absolute into the same
   corner and overlapped. One flex row makes non-overlap structural. */
.or-chrome-actions {
  position: absolute;
  top: var(--or-space-2);
  right: var(--or-space-3);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--or-gap-header);
}
/* Neutralises the absolute positioning the old rules put on the children. */
.or-chrome-actions > *,
.or-chrome-actions .theme-toggle-wrap {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}
.page-head { position: relative; }

.or-ghost-btn,
.chrome-login {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--or-space-2);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: transparent;
  color: var(--text, inherit);
  font-size: var(--or-muted);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.or-ghost-btn:hover,
.chrome-login:hover {
  /* `--surface-3` is another admin-side name with no definition here. The
     hairline-hover role already exists for exactly this. */
  background: var(--hairline-hover);
  border-color: var(--accent);
}
.chrome-login[hidden] { display: none; }

/* ── The card ──────────────────────────────────────────────────────────────── */
.card {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--or-space-3);
  border-radius: var(--or-radius);
}
.step-header { margin-bottom: var(--or-space-2); }
.step-header h2 { font-size: var(--or-title); margin: 0 0 var(--or-space-1); }
.step-header .subtitle { font-size: var(--or-body); margin: 0; }

/* One field rhythm, one input height, one button height. */
.or-field, .field { margin-bottom: var(--or-space-2); }
.or-field label, .field label {
  display: block;
  margin-bottom: var(--or-space-1);
  font-size: var(--or-label);
  font-weight: 600;
}
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card select {
  width: 100%;
  height: var(--or-input-h);
  border-radius: var(--or-radius);
  font-size: var(--or-body);
}
.card .btn-primary {
  min-height: var(--or-btn-h);
  border-radius: var(--or-radius);
  font-size: var(--or-body);
}
.or-hint, .field-hint {
  margin: var(--or-space-1) 0 0;
  font-size: var(--or-muted);
  opacity: 0.72;
}

/* ── The padlock commit control ────────────────────────────────────────────────
   Used by BOTH the step 1 keyword field and the step 3 link field. One control,
   one meaning: "lock this value in". Step 1 renders the committed value as a
   chip, step 3 keeps it in the locked field — but the affordance is identical.

   Previously this block referenced `var(--ok, ...)` and `var(--surface-3, ...)`.
   Neither token exists in this stylesheet — they are names from
   admin/src/index.css, a separate palette — so both always fell through to a
   hardcoded literal and `#37b87c` shipped as a second green alongside
   `--success: #34d399`. Role tokens only now, so the palette actually controls
   this control. */
.or-input-lock { position: relative; }
.or-input-lock input[type="text"] { padding-right: 48px; }
.or-lock-btn {
  position: absolute;
  top: 50%;
  right: var(--or-space-1);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px is on the 8/16/24/32 spacing scale (was 34px); the pill radius matches
     the sibling inputs, which are all `border-radius: 999px`, rather than
     inventing a third corner (was 10px). */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.or-lock-btn svg { width: 16px; height: 16px; }
.or-lock-btn .or-lock-closed { display: none; }

/* Every state, not just hover — this is a keyboard-reachable button and only
   :hover was styled before. */
.or-lock-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.or-lock-btn:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.or-lock-btn:active:not(:disabled) {
  background: var(--accent-soft);
  transform: translateY(-50%) scale(0.92);
}
.or-lock-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

/* Committed: the closed padlock swaps in and the field reads as settled. */
.or-field.is-locked .or-lock-btn { color: var(--success); }
.or-field.is-locked .or-lock-btn .or-lock-open { display: none; }
.or-field.is-locked .or-lock-btn .or-lock-closed { display: inline; }
.or-field.is-locked input[type="text"] {
  border-color: var(--success);
  opacity: 0.9;
}

/* Rejected: the field says so itself, next to the field. */
.or-field.is-invalid input[type="text"] { border-color: var(--danger); }
.or-field-error {
  margin: var(--or-space-1) 0 0;
  font-size: var(--or-label);
  line-height: 1.45;
  color: var(--danger-text);
}
.or-field-error[hidden] { display: none; }

/* 400ms, on the ICON only. Animating the field made the page feel like it
   jumped; the padlock is the thing that changed, so the padlock is what moves.
   Scoped to `.or-input-lock` rather than `.or-field` so the step 1 field, which
   is not an `.or-field`, gets the same confirmation. */
@keyframes or-lock-turn {
  0%   { transform: translateY(-50%) rotate(-16deg) scale(0.8); }
  60%  { transform: translateY(-50%) rotate(6deg)  scale(1.14); }
  100% { transform: translateY(-50%) rotate(0)     scale(1); }
}
.or-input-lock.is-locking .or-lock-btn { animation: or-lock-turn 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* The committed keyword chip carries the same closed padlock, so "locked in"
   looks the same on step 1 as it does on step 3. */
.chip--locked { padding-left: var(--or-space-1); }
.chip-lock {
  display: inline-flex;
  align-items: center;
  color: var(--success);
}
.chip-lock svg { width: 12px; height: 12px; }

/* Tiles: descriptions restored, one compact row of 3 + 3. */
.issue-legend { margin: var(--or-space-2) 0 var(--or-space-1); font-size: var(--or-label); font-weight: 600; opacity: 0.72; }
.issue-grid, .issue-grid--secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--or-space-1);
}
.issue-grid .issue-card, .issue-grid--secondary .issue-card {
  padding: var(--or-space-1) 10px;
  border-radius: var(--or-radius);
  min-height: 0;
}
.issue-grid--secondary .issue-title { font-size: var(--or-muted); }
/* Descriptions are BACK — they were deleted to buy pixels, which is the one
   thing this pass may not do. Two lines, clamped so a long one cannot grow the
   row. */
.issue-grid--secondary .issue-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  opacity: 0.68;
  line-height: 1.35;
}

/* ── Step 4: the code panel, centred ───────────────────────────────────────── */
.or-code-panel { text-align: center; padding: var(--or-space-2) 0 0; }
.or-code-title { font-size: var(--or-title); margin: 0 0 var(--or-space-1); }
.or-code-sub { font-size: var(--or-body); opacity: 0.75; margin: 0 0 var(--or-space-2); }
.or-code-input {
  width: 100%;
  max-width: 260px;
  height: 56px;
  margin: 0 auto var(--or-space-2);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 10px;
  text-indent: 10px;          /* optical: letter-spacing pads the right only */
  border-radius: var(--or-radius);
}
.or-code-error { margin: 0 0 var(--or-space-2); font-size: var(--or-muted); color: var(--danger, #ff6b6b); }
.or-code-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--or-space-2);
}
.or-code-actions .btn-primary { min-width: 160px; }

/* ── Fit 1440×900 and 1280×800 without scrolling ────────────────────────────
   Padding and stepper margin give the room, per the spec. The mascot STAYS
   visible on desktop; only its bubble text shrinks. */
@media (max-height: 920px) {
  .page-head { padding-top: var(--or-space-2); padding-bottom: var(--or-space-1); }
  .page-title { font-size: 26px; margin: 0 0 var(--or-space-1); }
  .page-subtitle { font-size: var(--or-body); margin: 0 0 var(--or-space-1); }
  .mascot-bubble { font-size: 12px; line-height: 1.35; }
  .stepper, .rail { margin: var(--or-space-1) 0 var(--or-space-2); }
  .card { padding: var(--or-space-2) var(--or-space-3); }
  .step-header { margin-bottom: var(--or-space-1); }
  .or-field, .field { margin-bottom: 12px; }
  .step-nav { margin-top: var(--or-space-2); }
}

/* "Start over" on step 1. Sits in the header, reads as a quiet escape hatch
   rather than an action competing with the primary control — it destroys work,
   so it must not look like the way forward. */
.step-restart {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #8b949e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-restart:hover {
  color: var(--danger, #f85149);
}

.step-restart[hidden] {
  display: none;
}

/* ── Closed-account screen (account-closed.html) ──────────────────────────────
   Terminal state, so it is deliberately one card, one heading and one action.
   All sizes come from the existing type and spacing scales. */
/* `.main-wrap` is a flex column with the default `align-items: stretch`, so a
   short card grows to the full remaining height — which left this one as a
   tall panel with its content in the top fifth. It hugs its content instead. */
.closed-card {
  max-width: 460px;
  text-align: center;
  align-self: center;
  margin-block: var(--or-space-4);
}
.closed-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--or-space-4);
  height: var(--or-space-4);
  margin: 0 auto var(--or-space-2);
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger-text);
}
.closed-mark svg { width: var(--or-space-2); height: var(--or-space-2); }
.closed-title {
  margin: 0 0 var(--or-space-2);
  font-size: var(--or-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.closed-body {
  margin: 0 0 var(--or-space-2);
  font-size: var(--or-body);
  line-height: 1.55;
  color: var(--muted);
}
.closed-body--muted { color: var(--muted-2); font-size: var(--or-muted); }
.closed-body a { color: var(--accent); font-weight: 600; text-decoration: none; }
.closed-body a:hover, .closed-body a:focus-visible { text-decoration: underline; }
.closed-action { margin-top: var(--or-space-2); }