/* ============================================================
   ARB CORTEX — Neural-Cortex-style B/W terminal
   ============================================================ */

:root {
  --bg: #000;
  --bg-1: #050505;
  --bg-2: #0a0a0a;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.18);
  --text: #e8e8e8;
  --text-dim: rgba(232,232,232,0.55);
  --text-faint: rgba(232,232,232,0.30);
  --accent: #ffffff;
  --pos: #ffffff;
  --neg: rgba(255,255,255,0.45);
  --mono: 'Share Tech Mono', 'JetBrains Mono', monospace;
  --mono-fine: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: #fff; color: #000; }

/* subtle scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 3px
    );
  z-index: 9999;
  mix-blend-mode: overlay;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 100%);
  z-index: 9998;
}

.screen { display: none; height: 100vh; width: 100vw; position: relative; }
.screen.active { display: block; }
.onb.active { display: flex; }

/* ============================================================
   AUTH SCREEN — email login, code verify, subscription check
   ============================================================ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auth-screen.exit { animation: onbExit 700ms ease-in forwards; }

.auth-card {
  position: relative;
  z-index: 10;
  width: 480px;
  max-width: 92vw;
  text-align: center;
  padding: 48px 48px 36px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 80px rgba(255,255,255,0.06),
    0 30px 100px rgba(0,0,0,0.85);
  animation: cardIn 800ms cubic-bezier(.2,.8,.25,1);
}
.auth-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: sweep 4s ease-in-out infinite;
  pointer-events: none;
}

.auth-step { animation: fadeIn 400ms ease-out; }
.auth-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.auth-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,0.40);
  animation: cxaGlow 3s ease-in-out infinite;
}
.auth-h1 span { color: rgba(255,255,255,0.40); }

.auth-desc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 auto 24px;
  max-width: 400px;
}
.auth-desc em { font-style: normal; }

.auth-sent-to {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin: -12px 0 14px;
  letter-spacing: 0.4px;
}

.auth-error {
  min-height: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  margin: 10px 0;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.auth-btn { width: 100%; margin-top: 8px; }
.auth-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }

.auth-spinner {
  width: 40px; height: 40px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 28px auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   ONBOARDING — cinematic / liquid glass (iOS 26 style)
   ============================================================ */

.svg-filters { position: absolute; width: 0; height: 0; }

.onb {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80,80,80,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(60,60,60,0.18) 0%, transparent 55%),
    #000;
  overflow: hidden;
  flex-direction: column;
  position: relative;
}
.onb.exit { animation: onbExit 700ms ease-in forwards; }
@keyframes onbExit {
  to { opacity: 0; filter: blur(20px); transform: scale(1.06); }
}

/* ----- background layers ----- */
.onb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  animation: gridPan 28s linear infinite;
  pointer-events: none;
}
@keyframes gridPan {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

.onb-orbs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
  filter: blur(40px);
  mix-blend-mode: screen;
  will-change: transform;
}
.o1 { top:  -10%; left:  -8%; animation: drift1 28s ease-in-out infinite; }
.o2 { top:  20%; left:  60%; width: 700px; height: 700px; animation: drift2 36s ease-in-out infinite; }
.o3 { bottom:-10%; left:  20%; width: 800px; height: 800px; animation: drift3 42s ease-in-out infinite; }
.o4 { top:  10%; left:  35%; width: 360px; height: 360px; animation: drift4 24s ease-in-out infinite; }
.o5 { bottom:  5%; right:  -8%; width: 500px; height: 500px; animation: drift5 32s ease-in-out infinite; }
.o6 { top:  55%; left:  10%; width: 280px; height: 280px; animation: drift6 20s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(120px,80px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-100px,60px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,-120px)} }
@keyframes drift4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,80px)} }
@keyframes drift5 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-90px,-60px)} }
@keyframes drift6 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(120px,-80px)} }

.onb-grain {
  position: absolute; inset: 0; pointer-events: none;
  filter: url(#grain);
  opacity: 0.5;
  z-index: 1;
}
.onb-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  z-index: 2;
}

/* ============================================================
   LIQUID GLASS primitives
   ============================================================ */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(22px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 1px 0 0 rgba(255,255,255,0.10),
    0 24px 60px -24px rgba(0,0,0,0.85),
    0 8px 20px rgba(0,0,0,0.5);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.06), transparent 60%);
  mix-blend-mode: overlay;
}
.glass-strong {
  position: relative;
  background: linear-gradient(140deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.08));
  backdrop-filter: blur(34px) saturate(190%) brightness(1.08);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.06),
    0 32px 80px -16px rgba(0,0,0,0.9),
    0 12px 28px rgba(0,0,0,0.55);
}
.glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(100% 80% at 80% 100%, rgba(255,255,255,0.10), transparent 60%);
  mix-blend-mode: screen;
}
.glass-strong::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none;
}

/* ============================================================
   GLOW TEXT
   ============================================================ */
.glow-text {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.4),
    0 0 18px rgba(255,255,255,0.18);
}
.glow-strong {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.6),
    0 0 22px rgba(255,255,255,0.35),
    0 0 44px rgba(255,255,255,0.18);
  animation: glowBreathe 3.2s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { text-shadow: 0 0 8px rgba(255,255,255,0.55), 0 0 22px rgba(255,255,255,0.30); }
  50%      { text-shadow: 0 0 12px rgba(255,255,255,0.85), 0 0 36px rgba(255,255,255,0.50); }
}

/* glitch (kept) */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
}
.glitch::before {
  left: 1px; text-shadow: -1px 0 rgba(255,255,255,0.55);
  clip-path: inset(40% 0 45% 0);
  animation: glitchA 2.3s infinite linear alternate-reverse;
}
.glitch::after {
  left: -1px; text-shadow: 1px 0 rgba(255,255,255,0.35);
  clip-path: inset(60% 0 10% 0);
  animation: glitchB 1.7s infinite linear alternate-reverse;
}
@keyframes glitchA {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(0,0); }
  25%  { clip-path: inset(50% 0 30% 0); transform: translate(-1px,1px); }
  50%  { clip-path: inset(10% 0 80% 0); transform: translate(1px,0); }
  75%  { clip-path: inset(70% 0 10% 0); transform: translate(0,-1px); }
  100% { clip-path: inset(35% 0 50% 0); transform: translate(-1px,0); }
}
@keyframes glitchB {
  0%   { clip-path: inset(60% 0 10% 0); }
  50%  { clip-path: inset(20% 0 70% 0); transform: translate(1px,-1px); }
  100% { clip-path: inset(80% 0 5% 0); transform: translate(-1px,1px); }
}

/* dots */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-green { background: #fff; box-shadow: 0 0 8px #fff; }
.dot.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #fff; }
  50%      { opacity: 0.3; box-shadow: 0 0 2px #fff; }
}
.blink-soft { animation: blinkSoftA 1.4s steps(2, start) infinite; }
@keyframes blinkSoftA { 50% { opacity: 0.35; } }

/* ============================================================
   TOP BAR
   ============================================================ */
.onb-top {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
  font-size: 12px;
}
.onb-top-l { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 1px; }
.brand-name { color: #fff; font-family: var(--mono); }
.brand-ver { font-size: 10px; color: var(--text-faint); margin-left: 6px; letter-spacing: 1px; }
.onb-top-r { display: flex; align-items: center; gap: 18px; }
.onb-top-r .meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-faint); letter-spacing: 1.4px; }
.onb-top-r .meta em { font-style: normal; color: var(--text-faint); }
.onb-top-r .meta b { font-weight: 400; color: #fff; }

.btn-skip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 16px rgba(0,0,0,0.4);
  transition: all 200ms;
}
.btn-skip:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 22px rgba(255,255,255,0.18);
}

/* ============================================================
   STAGE — main split layout
   ============================================================ */
.onb-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 12px 36px 24px;
  position: relative;
  z-index: 5;
  min-height: 0;
}

/* ----- LEFT RAIL ----- */
.onb-rail {
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.rail-eyebrow {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 2.2px;
  margin-bottom: 14px;
}
.rail-steps { list-style: none; padding: 0; margin: 0; }
.rs {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 11px;
  position: relative;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.rs .n {
  display: inline-block;
  width: 30px;
  height: 22px;
  text-align: center;
  font-size: 10px;
  line-height: 22px;
  color: var(--text-faint);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  transition: all 220ms;
}
.rs b { display: block; color: var(--text-dim); font-weight: 400; font-size: 11px; letter-spacing: 1px; transition: color 220ms; }
.rs i { display: block; font-style: normal; color: var(--text-faint); font-size: 9px; letter-spacing: 0.6px; margin-top: 1px; }
.rs .bar {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.rs .bar i { position: absolute; inset: 0; background: #fff; transform: translateX(-100%); transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.rs.active .n { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 16px rgba(255,255,255,0.6); }
.rs.active b { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.45); }
.rs.active .bar i { transform: translateX(0); }
.rs.done .n { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.4); }
.rs.done b { color: var(--text-dim); }

.rail-stack { list-style: none; padding: 0; margin: 0; font-size: 10px; color: var(--text-dim); line-height: 2; }
.rail-stack .lock { color: var(--text-faint); margin-right: 4px; }

.rail-stat { margin-top: auto; padding-top: 22px; border-top: 1px dashed rgba(255,255,255,0.10); }
.rail-stat-num { font-size: 30px; font-family: var(--mono); color: #fff; line-height: 1; }
.rail-stat-lbl { font-size: 9px; color: var(--text-faint); margin-top: 6px; letter-spacing: 0.8px; line-height: 1.55; }

/* ============================================================
   MAIN CARD
   ============================================================ */
.onb-card {
  border-radius: 22px;
  padding: 56px 64px 44px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* corner brackets */
.corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,0.5);
  pointer-events: none;
}
.corner.tl { top: 14px;    left: 14px;    border-right: none; border-bottom: none; }
.corner.tr { top: 14px;    right: 14px;   border-left: none;  border-bottom: none; }
.corner.bl { bottom: 14px; left: 14px;    border-right: none; border-top: none; }
.corner.br { bottom: 14px; right: 14px;   border-left: none;  border-top: none; }

/* panes */
.pane { display: none; }
.pane.active { display: block; }

.pane-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.pane-tag i {
  display: block; height: 1px; flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), transparent);
}
.pane-tag i:last-child { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35)); }
.pane-tag span { color: #fff; }

.pane-h1 {
  font-family: var(--mono);
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0 0 4px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,0.20);
}
.pane-h2 {
  font-family: var(--mono);
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0 0 28px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}
.pane-desc {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 38px;
}
.pane-desc em {
  font-style: normal;
  color: #fff;
}

/* letter reveal */
.reveal-letters {
  display: inline-block;
}
.reveal-letters .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-60deg) scale(0.92);
  transform-origin: 50% 100%;
  animation: chReveal 700ms cubic-bezier(.2,.8,.25,1) forwards;
  will-change: transform, opacity;
}
.reveal-letters .ch.space { width: 0.3em; }
@keyframes chReveal {
  0%   { opacity: 0; transform: translateY(40px) rotateX(-60deg) scale(0.92); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
.pane-h1.reveal-letters .ch {
  text-shadow: 0 0 32px rgba(255,255,255,0.55), 0 0 8px rgba(255,255,255,0.4);
}
.pane.active .reveal-letters .ch { animation-name: chReveal; }

.reveal-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 700ms 200ms cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.reveal-fade {
  opacity: 0;
  animation: fadeOnly 800ms 100ms ease-out forwards;
}
@keyframes fadeOnly { to { opacity: 1; } }

.reveal-slide-l {
  opacity: 0;
  transform: translateX(-26px);
  animation: slideInL 700ms 100ms cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes slideInL { to { opacity: 1; transform: translateX(0); } }

/* ============================================================
   FLOATING-LABEL FORM FIELDS
   ============================================================ */
.ff-grid {
  display: grid;
  gap: 18px 22px;
  margin-bottom: 32px;
}
.ff-grid.two   { grid-template-columns: 1fr 1fr; }
.ff-grid.three { grid-template-columns: 1fr 1fr 1fr; }

.ff {
  position: relative;
  display: block;
  --ffh: 56px;
  height: var(--ffh);
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  animation: ffIn 600ms cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay: calc(0.7s + var(--i, 0) * 0.07s);
}
@keyframes ffIn { to { opacity: 1; transform: translateY(0); } }

.ff input,
.ff select {
  width: 100%;
  height: 100%;
  padding: 22px 16px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.4px;
  outline: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  transition: all 250ms cubic-bezier(.2,.8,.25,1);
}
.ff span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 1.4px;
  pointer-events: none;
  transition: all 220ms cubic-bezier(.2,.8,.25,1);
}
.ff input:focus,
.ff select:focus,
.ff input:not(:placeholder-shown),
.ff select:focus + span,
.ff input:not(:placeholder-shown) ~ span {
  outline: none;
}
.ff input:focus,
.ff select:focus {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 4px rgba(255,255,255,0.06),
    0 0 24px rgba(255,255,255,0.12);
}
/* float label up when focused or filled */
.ff input:focus ~ span,
.ff input:not(:placeholder-shown) ~ span,
.ff select:focus ~ span {
  top: 12px;
  transform: translateY(0);
  font-size: 9px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
/* underline grow */
.ff i {
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 1px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  border-radius: 1px;
  pointer-events: none;
}
.ff i::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
  transform: translateX(-100%);
  transition: transform 500ms cubic-bezier(.2,.8,.25,1);
}
.ff input:focus ~ i::after,
.ff select:focus ~ i::after { transform: translateX(0); }

/* ============================================================
   PAPER TOGGLE
   ============================================================ */
.paper-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.paper-toggle strong { font-size: 12px; letter-spacing: 1.4px; color: #fff; }
.paper-toggle small { display: block; color: var(--text-faint); font-size: 10px; margin-top: 2px; }
.toggle-pill {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.toggle-pill span { padding: 8px 18px; font-size: 11px; letter-spacing: 1.5px; color: var(--text-faint); }
.toggle-pill .active { background: #fff; color: #000; box-shadow: 0 0 18px rgba(255,255,255,0.45); }

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.pane-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.pane-foot.center { justify-content: center; }

.cta {
  position: relative;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  padding: 16px 32px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.45);
  transition: all 240ms cubic-bezier(.2,.8,.25,1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 12px 32px rgba(255,255,255,0.16),
    0 0 40px rgba(255,255,255,0.20);
}
.cta:disabled { color: var(--text-faint); cursor: not-allowed; opacity: 0.5; }
.cta.ghost { background: transparent; }

.cta.primary {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.85) 100%);
  color: #000;
  border-color: #fff;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 10px 36px rgba(255,255,255,0.30),
    0 0 50px rgba(255,255,255,0.18);
}
.cta.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 14px 44px rgba(255,255,255,0.45),
    0 0 70px rgba(255,255,255,0.35);
}
.cta.primary .arr { display: inline-block; transition: transform 220ms; font-style: normal; }
.cta.primary:hover .arr { transform: translateX(4px); }

.cta.big {
  padding: 22px 64px;
  font-size: 14px;
  letter-spacing: 3px;
  margin-top: 24px;
}

.glow-pulse {
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 36px rgba(255,255,255,0.30), 0 0 50px rgba(255,255,255,0.18);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 60px rgba(255,255,255,0.55), 0 0 100px rgba(255,255,255,0.45);
  }
}

/* ============================================================
   BOOT LOG
   ============================================================ */
.boot-log {
  border-radius: 14px;
  padding: 22px 26px;
  height: 220px;
  overflow: auto;
  margin: 6px 0 22px;
  position: relative;
}
.boot-log::after {
  content: '// boot.log';
  position: absolute; top: 6px; right: 16px;
  font-size: 9px; color: var(--text-faint); letter-spacing: 1px;
}
.boot-log pre {
  margin: 0; font-family: var(--mono); font-size: 11px;
  color: var(--text); line-height: 1.85; white-space: pre-wrap;
}

/* ============================================================
   BOTTOM PROGRESS
   ============================================================ */
.onb-bottom {
  position: relative;
  z-index: 10;
  padding: 18px 36px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prog-dots { display: flex; gap: 10px; }
.pd {
  width: 32px; height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  transition: all 360ms cubic-bezier(.2,.8,.25,1);
}
.pd.active { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,0.55); width: 56px; }
.pd.done   { background: rgba(255,255,255,0.45); }

.onb-bottom-meta { display: flex; gap: 22px; font-size: 9px; color: var(--text-faint); letter-spacing: 1.4px; }
.onb-bottom-meta b { color: #fff; font-weight: 400; }

/* responsive */
@media (max-width: 1280px) {
  .onb-stage { grid-template-columns: 240px 1fr; gap: 22px; padding: 12px 22px; }
  .onb-card { padding: 44px 44px 32px; }
  .pane-h1, .pane-h2 { font-size: 52px; }
  .ff-grid.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .onb-stage { grid-template-columns: 1fr; }
  .onb-rail { display: none; }
}

/* ============================================================
   DASHBOARD — CORTEX layout (mirrors Neural Cortex screenshot)
   ============================================================ */
.screen-dashboard {
  background: #000;
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.screen-dashboard.active { display: flex; }

/* ---------- HEADER ---------- */
.cx-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.85);
  flex-shrink: 0;
}
.cx-h-left { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 1px; }
.cx-h-left .brand-name { font-size: 14px; }
.cx-h-left .brand-version { font-size: 10px; margin-left: 8px; color: var(--text-faint); }
.cx-h-tabs {
  display: flex;
  gap: 38px;
  justify-content: center;
}
.cx-h-tabs a {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid transparent;
}
.cx-h-tabs a.active {
  color: #fff;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.04);
}
.cx-h-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; font-size: 11px; }
.dh-status { font-size: 11px; color: #fff; letter-spacing: 1.5px; }
.dh-time { font-size: 12px; color: #fff; letter-spacing: 1px; min-width: 70px; text-align: right; }
.blink { animation: blinkSoft 1.1s steps(2, start) infinite; }
@keyframes blinkSoft { 50% { opacity: 0.25; } }

/* ---------- SUB-HEADER (parameter strip) ---------- */
.cx-subheader {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
  padding: 6px 22px;
  height: 26px;
  font-size: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.6);
  color: var(--text-faint);
  overflow: hidden;
  flex-shrink: 0;
}
.cx-subheader em { font-style: normal; color: var(--text-faint); margin-right: 4px; letter-spacing: 1.2px; }
.cx-subheader b { font-weight: 400; color: #fff; }

/* ---------- 3-COLUMN GRID ---------- */
.cx-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 1px;
  background: var(--line);
  flex: 1;
  min-height: 0;
}
.cx-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  min-height: 0;
  overflow: hidden;
}

.cx-panel {
  background: #000;
  padding: 14px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cx-h {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cx-h-tag {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 1px;
}

/* ---------- LEFT COLUMN ---------- */
.cx-big-num {
  font-family: var(--mono);
  font-size: 44px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 16px rgba(255,255,255,0.18);
  margin: 2px 0 4px;
  letter-spacing: 1px;
}
.cx-big-num.pos { color: #fff; }
.cx-sub {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.cx-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.cx-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), #fff);
  transition: width 240ms;
}
.cx-bar-label {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 4px;
  letter-spacing: 1px;
}
.cx-bar-label span { color: #fff; margin-left: 8px; }

.cx-pnl-sub {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.cx-pnl-sub b { color: #fff; font-weight: 400; margin-left: 4px; }
.cx-kv {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.cx-kv span:last-child { color: #fff; }

.cx-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.cx-2x2 > div {
  background: #000;
  padding: 10px 14px;
}
.cx-2x2 em {
  font-style: normal;
  display: block;
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.cx-2x2 b {
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  font-family: var(--mono);
  text-shadow: 0 0 10px rgba(255,255,255,0.15);
}
.cx-2x2-tight b { font-size: 14px; }

.cx-arch, .cx-act {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}
.cx-arch > div, .cx-act > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 10px;
  color: var(--text-dim);
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.cx-arch b, .cx-act b { color: #fff; font-weight: 400; }
.cx-act b.on { color: #fff; }

/* ---------- CENTER COLUMN ---------- */
.cx-col-center { gap: 1px; }
.cx-topo-panel {
  flex: 1.6;
  min-height: 0;
  position: relative;
  padding-bottom: 8px;
}
#topology {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.18));
}
.cx-topo-axis {
  display: flex;
  justify-content: space-around;
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 1.2px;
  padding: 6px 8px 0;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.cx-metrics-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cx-metrics-stats {
  font-size: 10px;
  color: var(--text-faint);
  display: flex;
  gap: 24px;
  margin-bottom: 6px;
}
.cx-metrics-stats b { color: #fff; font-weight: 400; margin-left: 4px; }
.cx-metrics-cv { flex: 1; width: 100%; height: 100%; min-height: 0; display: block; }

/* ---------- RIGHT COLUMN ---------- */
.cx-weight-cv { width: 100%; height: 110px; display: block; }
.cx-grad-cv { width: 100%; height: 60px; display: block; }
.cx-log-panel { flex: 1; min-height: 0; }
.cx-log {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.55;
  height: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.cx-log .line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 1px 0;
  animation: lineIn 360ms ease-out;
}
.cx-log .line:first-child { color: #fff; }
.cx-log .tag { color: #fff; }
.cx-log .ts { color: var(--text-faint); margin-right: 6px; }
.cx-log .num { color: #fff; }
@keyframes lineIn {
  from { opacity: 0; background: rgba(255,255,255,0.18); transform: translateX(-6px); }
  to   { opacity: 1; background: transparent; transform: translateX(0); }
}

.cx-cortex-panel { padding-bottom: 16px; }
.cortex {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-auto-rows: 4px;
  gap: 1px;
}
.cortex i { display: block; background: rgba(255,255,255,0.1); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1500px) {
  .cx-grid { grid-template-columns: 250px 1fr 280px; }
  .cx-big-num { font-size: 36px; }
}
@media (max-width: 1280px) {
  .cx-grid { grid-template-columns: 220px 1fr 250px; }
  .cx-big-num { font-size: 32px; }
}

/* ============================================================
   ONBOARDING — DASHBOARD-SYNC OVERRIDES
   make the entry screen feel like the same terminal as the dashboard
   ============================================================ */

/* pure black, no soft gradients */
.onb {
  background: #000;
}

/* kill the white orbs entirely — too bright for the terminal vibe */
.onb-orbs { display: none; }

/* fainter grid */
.onb-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.onb-grain { opacity: 0.18; }
.onb-vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.95) 100%);
}

/* ----- TOP BAR (match dashboard cx-header) ----- */
.onb-top {
  height: 44px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.85);
  font-size: 12px;
}
.onb-top-l { font-size: 14px; }
.brand-name { font-size: 14px; }
.brand-ver { font-size: 10px; }

.btn-skip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 6px 14px;
  color: #fff;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  cursor: pointer;
  transition: all 160ms;
}
.btn-skip:hover {
  background: #fff;
  color: #000;
  transform: none;
  box-shadow: none;
}

/* ----- STAGE ----- */
.onb-stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1px;
  background: var(--line);
  padding: 0;
}

/* ----- LEFT RAIL (panel-style) ----- */
.onb-rail {
  background: #000;
  border-radius: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 22px 22px;
}
.onb-rail::before, .onb-rail::after { display: none; }

.rail-eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #fff;
  margin-bottom: 14px;
}
.rail-eyebrow::before { content: '◆\00a0\00a0'; }

.rs {
  grid-template-columns: 32px 1fr;
  padding: 9px 0;
  font-size: 11px;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.rs .n {
  width: 26px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  border-radius: 0;
  border-color: var(--line-2);
  box-shadow: none;
}
.rs.active .n {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: none;
}
.rs.active b {
  text-shadow: none;
}
.rs b { font-size: 11px; letter-spacing: 0.8px; }
.rs i { font-size: 9px; }

.rail-stack { font-size: 10px; line-height: 1.95; }

.rail-stat {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.rail-stat-num {
  font-size: 26px;
  text-shadow: none;
  animation: none;
  color: #fff;
}
.rail-stat-num.glow-strong::before,
.rail-stat-num.glow-strong::after { display: none; }
.rail-stat-lbl { font-size: 9px; }

/* ----- MAIN CARD (panel-style, no glass) ----- */
.onb-card {
  background: #000;
  border-radius: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 38px 48px 32px;
}
.onb-card::before, .onb-card::after { display: none; }

/* corner brackets — keep as small ticks like dashboard */
.corner {
  width: 14px;
  height: 14px;
  border-color: rgba(255,255,255,0.40);
}
.corner.tl { top: 8px;    left: 8px; }
.corner.tr { top: 8px;    right: 8px; }
.corner.bl { bottom: 8px; left: 8px; }
.corner.br { bottom: 8px; right: 8px; }

.pane-tag {
  font-size: 9px;
  letter-spacing: 1.6px;
  margin-bottom: 18px;
  color: var(--text-faint);
}
.pane-tag span { color: #fff; }

/* smaller, sharper headlines that match the terminal aesthetic */
.pane-h1 {
  font-size: 38px;
  letter-spacing: 1px;
  margin: 0 0 2px;
  text-shadow: 0 0 12px rgba(255,255,255,0.18);
}
.pane-h2 {
  font-size: 38px;
  letter-spacing: 1px;
  margin: 0 0 18px;
  color: rgba(255,255,255,0.40);
}

.pane-desc {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 580px;
}

/* gentler letter-reveal: less rotation, less Y-distance, no big shadow */
.reveal-letters .ch {
  transform: translateY(18px) rotateX(-30deg) scale(0.96);
  animation: chRevealSoft 540ms cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes chRevealSoft {
  0%   { opacity: 0; transform: translateY(18px) rotateX(-30deg) scale(0.96); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
.pane-h1.reveal-letters .ch {
  text-shadow: 0 0 16px rgba(255,255,255,0.30);
}

/* ----- FORM FIELDS (rectangular, sharp like dashboard) ----- */
.ff-grid {
  display: grid;
  gap: 22px 18px;
  margin-bottom: 26px;
}
.ff {
  --ffh: 50px;
  height: auto;
  position: relative;
}
.ff > input,
.ff > select { height: var(--ffh); }
.ff-help {
  display: block;
  margin-top: 6px;
  padding-left: 14px;
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.4px;
  font-family: var(--mono);
  line-height: 1.4;
  border-left: 1px solid rgba(255,255,255,0.10);
  transition: color 200ms, border-color 200ms;
}
.ff:focus-within .ff-help {
  color: #fff;
  border-left-color: #fff;
}
.ff input,
.ff select {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 20px 14px 6px;
  font-size: 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.ff input:focus,
.ff select:focus {
  border-color: #fff;
  background: rgba(255,255,255,0.04);
  box-shadow: none;
}
.ff span {
  left: 14px;
  font-size: 11px;
  letter-spacing: 1.2px;
}
.ff input:focus ~ span,
.ff input:not(:placeholder-shown) ~ span,
.ff select:focus ~ span {
  top: 8px;
  font-size: 8px;
  text-shadow: none;
}
.ff i {
  left: 0;
  right: 0;
  bottom: 0;
}

/* ----- PAPER TOGGLE ----- */
.paper-toggle {
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--line-2);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 22px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.toggle-pill { border-radius: 0; }
.toggle-pill span { padding: 6px 14px; }
.toggle-pill .active {
  box-shadow: none;
}

/* ----- CTA buttons (rectangular, dashboard-style) ----- */
.cta {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 12px 22px;
  border-radius: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: all 160ms;
}
.cta:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: #fff;
  transform: none;
  box-shadow: none;
}
.cta.primary {
  background: #fff;
  color: #000;
  border-color: #fff;
  text-shadow: none;
  box-shadow: none;
  font-weight: 700;
}
.cta.primary:hover {
  background: #ddd;
  border-color: #ddd;
  transform: none;
  box-shadow: none;
}
.cta.big {
  padding: 18px 56px;
  font-size: 13px;
  letter-spacing: 3px;
  margin-top: 16px;
}
.glow-pulse {
  animation: ctaPulseSoft 1.8s ease-in-out infinite;
}
@keyframes ctaPulseSoft {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 28px rgba(255,255,255,0.30), inset 0 0 12px rgba(255,255,255,0.18); }
}

/* ----- BOOT LOG (panel-style) ----- */
.boot-log {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 20px;
  height: 200px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.boot-log::after {
  font-size: 9px;
}

/* ----- BOTTOM PROGRESS DOTS ----- */
.onb-bottom {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.85);
}
.pd {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 0;
}
.pd.active {
  background: #fff;
  width: 48px;
  box-shadow: 0 0 8px rgba(255,255,255,0.45);
}

/* glow-text in onboarding: keep but tone down */
.glow-text {
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,0.35);
}
.glow-strong {
  text-shadow: 0 0 8px rgba(255,255,255,0.40), 0 0 18px rgba(255,255,255,0.18);
  animation: none;
}

/* meta line in top bar */
.onb-top-r .meta {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.onb-top-r .meta:first-child { border-left: none; padding-left: 0; }

/* ============================================================
   NEURAL NETWORK BACKGROUND CANVAS
   full-screen, behind everything, animated dots + edges + pulses
   ============================================================ */
.neural-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* ============================================================
   FLOATING FORMULAS BACKGROUND
   ============================================================ */
.formulas-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.formula-floater {
  position: absolute;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  color: rgba(255,255,255,0.18);
  white-space: nowrap;
  letter-spacing: 0.4px;
  animation: floatUp linear forwards;
  will-change: transform, opacity;
  text-shadow: 0 0 6px rgba(255,255,255,0.18);
}
@keyframes floatUp {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-130vh); opacity: 0; }
}

/* layer ordering */
.onb-grid     { z-index: 2; opacity: 0.4; }
.onb-grain    { z-index: 3; }
.onb-vignette { z-index: 4; }
.onb-top      { z-index: 10; position: relative; }
.onb-center   { z-index: 5; position: relative; }
.onb-bottom   { z-index: 10; position: relative; }

/* ============================================================
   CENTERED STAGE
   ============================================================ */
.onb-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 48px;
  gap: 36px;
  min-height: 0;
}

/* ============================================================
   HORIZONTAL STEPPER
   ============================================================ */
.step-nav {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 620px;
  padding: 0 20px;
}
.step-line {
  position: absolute;
  top: 18px;
  left: 56px;
  right: 56px;
  height: 1px;
  background: rgba(255,255,255,0.10);
  z-index: 0;
}
.step-line i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), #fff);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: width 700ms cubic-bezier(.2,.8,.25,1);
}
.step-dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.step-dot .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  background: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.4px;
  transition: all 360ms cubic-bezier(.2,.8,.25,1);
}
.step-dot.active .num {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.10),
    0 0 24px rgba(255,255,255,0.55),
    0 0 60px rgba(255,255,255,0.20);
  transform: scale(1.1);
}
.step-dot.done .num {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.step-dot .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-faint);
  transition: color 360ms;
}
.step-dot.active .lbl,
.step-dot.done .lbl { color: #fff; }
.step-dot.active .lbl { text-shadow: 0 0 8px rgba(255,255,255,0.45); }

/* ============================================================
   CENTERED CARD
   ============================================================ */
.onb-card-center {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 44px 56px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 0 80px rgba(255,255,255,0.06),
    0 30px 100px rgba(0,0,0,0.85);
  animation: cardIn 800ms cubic-bezier(.2,.8,.25,1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* glowing top edge sweep */
.onb-card-center::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  pointer-events: none;
  animation: sweep 4s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { opacity: 0.4; transform: translateX(-20%); }
  50%      { opacity: 1;   transform: translateX(20%); }
}

/* corner ticks (only on the centered card) */
.onb-card-center::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  background:
    /* top-left */
    linear-gradient(to right, rgba(255,255,255,0.5) 14px, transparent 14px) top left no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,0.5) 14px, transparent 14px) top left no-repeat,
    /* top-right */
    linear-gradient(to left, rgba(255,255,255,0.5) 14px, transparent 14px) top right no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,0.5) 14px, transparent 14px) top right no-repeat,
    /* bottom-left */
    linear-gradient(to right, rgba(255,255,255,0.5) 14px, transparent 14px) bottom left no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.5) 14px, transparent 14px) bottom left no-repeat,
    /* bottom-right */
    linear-gradient(to left, rgba(255,255,255,0.5) 14px, transparent 14px) bottom right no-repeat,
    linear-gradient(to top, rgba(255,255,255,0.5) 14px, transparent 14px) bottom right no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  pointer-events: none;
}

/* override old card styles */
.onb-card-center .pane-h1,
.onb-card-center .pane-h2 {
  font-size: 52px;
  line-height: 1.0;
  letter-spacing: -1.8px;
  display: block;             /* override .reveal-letters inline-block so text-align works */
  width: 100%;
  text-align: center;
}

.onb-card-center .pane-tag {
  text-align: center;
  justify-content: center;
}
.onb-card-center .pane-desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.onb-card-center .pane-h1 { margin-bottom: 0; }
.onb-card-center .pane-h2 { margin-top: 0; margin-bottom: 22px; }

.onb-card-center .pane-foot {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.onb-card-center .pane-foot.center { justify-content: center; }

/* hide bottom dots since we use the top stepper now */
.prog-dots { display: none; }

.onb-bottom-meta { display: flex; gap: 12px; font-size: 9px; color: var(--text-faint); letter-spacing: 1.4px; align-items: center; }
.onb-bottom-meta b { color: #fff; font-weight: 400; }
.onb-bottom-meta .div { color: rgba(255,255,255,0.18); }
.onb-bottom { justify-content: center; }

/* responsive shrink */
@media (max-width: 760px) {
  .onb-card-center { padding: 30px 24px; max-width: 92%; }
  .step-nav { max-width: 92%; padding: 0 10px; }
  .onb-card-center .pane-h1, .onb-card-center .pane-h2 { font-size: 38px; letter-spacing: -1px; }
}

/* ============================================================
   VAULT RESTORE PROMPT (shown on revisit if a vault exists)
   ============================================================ */
.vault-restore {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  animation: vrFadeIn 600ms ease-out;
}
@keyframes vrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vault-restore.exit { animation: vrFadeOut 500ms ease-in forwards; }
@keyframes vrFadeOut { to { opacity: 0; transform: scale(0.96); } }

.vault-restore::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.vr-card {
  position: relative;
  width: 580px;
  max-width: 92vw;
  padding: 44px 52px 32px;
  background: rgba(0,0,0,0.86);
  border: 1px solid rgba(255,255,255,0.20);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 80px rgba(255,255,255,0.06),
    0 30px 100px rgba(0,0,0,0.85);
  animation: cardIn 700ms cubic-bezier(.2,.8,.25,1);
}
.vr-card::before {
  content: '';
  position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: sweep 4s ease-in-out infinite;
  pointer-events: none;
}
.vr-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--text-faint);
  margin-bottom: 16px;
  animation: cxaPulse 1.6s ease-in-out infinite;
}
.vr-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,0.40);
  animation: cxaGlow 3s ease-in-out infinite;
}
.vr-title span { color: rgba(255,255,255,0.40); }
.vr-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 460px;
  margin-left: auto; margin-right: auto;
}
.vr-desc em { font-style: normal; color: #fff; }
.vr-error {
  min-height: 14px;
  font-size: 11px;
  color: #fff;
  margin: 8px 0 14px;
  letter-spacing: 0.4px;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.vr-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* vault inspector table */
.vi-card { max-width: 640px; text-align: left; }
.vi-card .vr-title { text-align: center; }
.vi-card .vr-desc,
.vi-card .vr-actions { text-align: center; }
.vi-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  margin: 18px 0 22px;
  max-height: 48vh;
  overflow-y: auto;
}
.vi-row {
  display: grid;
  grid-template-columns: 160px 1fr 50px;
  align-items: center;
  background: #000;
  padding: 10px 14px;
  gap: 12px;
}
.vi-row .vi-label {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.vi-row .vi-value {
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  word-break: break-all;
  line-height: 1.5;
  user-select: all;
}
.vi-row .vi-value.secret { color: var(--text-dim); }
.vi-row .vi-copy {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-faint);
  background: none;
  border: 1px solid var(--line);
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 160ms;
}
.vi-row .vi-copy:hover { color: #fff; border-color: #fff; }
.vi-row .vi-copy.copied { color: #000; background: #fff; border-color: #fff; }

/* ============================================================
   ANALYZING OVERLAY (5s "bot is calibrating" phase)
   ============================================================ */
.cx-analyzing {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  pointer-events: all;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.4,0,.2,1);
}
.cx-analyzing.done {
  opacity: 0;
  pointer-events: none;
}
.cx-analyzing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
}
.cx-analyzing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.cxa-frame {
  position: relative;
  z-index: 2;
  width: 620px;
  max-width: 92vw;
  text-align: center;
  padding: 36px 8px;
}

.cxa-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--text-faint);
  margin-bottom: 18px;
  animation: cxaPulse 1.6s ease-in-out infinite;
}
@keyframes cxaPulse {
  0%, 100% { color: var(--text-faint); text-shadow: none; }
  50%      { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.55); }
}

.cxa-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 0 0 36px;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,0.40);
  animation: cxaGlow 3s ease-in-out infinite;
}
.cxa-title span { color: rgba(255,255,255,0.40); }
@keyframes cxaGlow {
  0%, 100% { text-shadow: 0 0 24px rgba(255,255,255,0.40); }
  50%      { text-shadow: 0 0 36px rgba(255,255,255,0.75), 0 0 70px rgba(255,255,255,0.30); }
}

/* progress row */
.cxa-progress-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.cxa-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}
.cxa-bar i {
  display: block;
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.55), #fff);
  box-shadow: 0 0 16px rgba(255,255,255,0.65), 0 0 32px rgba(255,255,255,0.30);
  transition: right 240ms cubic-bezier(.2,.8,.25,1);
}
.cxa-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(255,255,255,0.10) 4px,
    rgba(255,255,255,0.10) 8px
  );
  background-size: 12px 12px;
  animation: cxaShimmer 0.8s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes cxaShimmer {
  from { background-position: 0 0; }
  to   { background-position: 12px 0; }
}

.cxa-percent {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-align: right;
  text-shadow: 0 0 10px rgba(255,255,255,0.45);
  letter-spacing: -0.5px;
}

.cxa-status {
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.4px;
  margin-bottom: 22px;
  min-height: 16px;
  text-shadow: 0 0 10px rgba(255,255,255,0.30);
}

.cxa-log {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: left;
  height: 110px;
  overflow: hidden;
  border-top: 1px dashed rgba(255,255,255,0.10);
  padding-top: 12px;
  line-height: 1.7;
}
.cxa-log .line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  animation: cxaLineIn 280ms ease-out;
}
.cxa-log .line .ts  { color: var(--text-faint); margin-right: 6px; }
.cxa-log .line .tag { color: #fff; margin-right: 6px; }
.cxa-log .line:first-child { color: #fff; }
@keyframes cxaLineIn {
  from { opacity: 0; transform: translateX(-6px); background: rgba(255,255,255,0.18); }
  to   { opacity: 1; transform: translateX(0); background: transparent; }
}

/* ============================================================
   ENGAGE → DASHBOARD CINEMATIC TRANSITION
   ============================================================ */

/* card collapse/glow on ENGAGE click */
.onb-card-center.engaging {
  animation: cardEngage 900ms cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
@keyframes cardEngage {
  0%   {
    transform: scale(1);
    filter: brightness(1) blur(0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      0 0 80px rgba(255,255,255,0.06),
      0 30px 100px rgba(0,0,0,0.85);
  }
  40%  {
    transform: scale(1.04);
    filter: brightness(1.4) blur(0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      0 0 200px rgba(255,255,255,0.55),
      0 0 80px rgba(255,255,255,0.4);
  }
  100% {
    transform: scale(0.94);
    filter: brightness(2) blur(8px);
    opacity: 0;
  }
}
.onb-card-center.engaging .pane-h1,
.onb-card-center.engaging .pane-h2 {
  text-shadow: 0 0 60px rgba(255,255,255,0.95), 0 0 120px rgba(255,255,255,0.6);
}

/* full-screen white flash overlay */
.cx-flash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,1.0) 0%,
    rgba(255,255,255,0.92) 35%,
    rgba(255,255,255,0.55) 70%,
    rgba(255,255,255,0.0) 100%);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(.4,0,.2,1);
  mix-blend-mode: screen;
}
.cx-flash.on { opacity: 1; }

/* ===== DASHBOARD MOUNT animation ===== */
.screen-dashboard.mounting .cx-header,
.screen-dashboard.mounting .cx-subheader {
  animation: hdrIn 600ms cubic-bezier(.2,.8,.25,1) both;
}
.screen-dashboard.mounting .cx-subheader { animation-delay: 80ms; }
@keyframes hdrIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen-dashboard.mounting .cx-panel {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  animation: panelIn 700ms cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes panelIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* stagger panels by column for a "wave" mount */
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(1) { animation-delay: 120ms; }
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(2) { animation-delay: 180ms; }
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(3) { animation-delay: 240ms; }
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(4) { animation-delay: 280ms; }
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(5) { animation-delay: 320ms; }
.screen-dashboard.mounting .cx-col-left   .cx-panel:nth-child(6) { animation-delay: 360ms; }
.screen-dashboard.mounting .cx-col-center .cx-panel:nth-child(1) { animation-delay: 200ms; }
.screen-dashboard.mounting .cx-col-center .cx-panel:nth-child(2) { animation-delay: 340ms; }
.screen-dashboard.mounting .cx-col-right  .cx-panel:nth-child(1) { animation-delay: 240ms; }
.screen-dashboard.mounting .cx-col-right  .cx-panel:nth-child(2) { animation-delay: 280ms; }
.screen-dashboard.mounting .cx-col-right  .cx-panel:nth-child(3) { animation-delay: 320ms; }
.screen-dashboard.mounting .cx-col-right  .cx-panel:nth-child(4) { animation-delay: 380ms; }

/* ============================================================
   BOLD DISPLAY HEADLINES — Space Grotesk
   ============================================================ */
.pane-h1 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 0.92;
  letter-spacing: -2px;
  margin: 0 0 2px;
  color: #fff;
  text-shadow:
    0 0 16px rgba(255,255,255,0.35),
    0 0 36px rgba(255,255,255,0.18);
}
.pane-h2 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 0.92;
  letter-spacing: -2px;
  margin: 0 0 24px;
  color: rgba(255,255,255,0.32);
}

.pane-h1.reveal-letters .ch {
  text-shadow: 0 0 24px rgba(255,255,255,0.45), 0 0 8px rgba(255,255,255,0.5);
}

/* big headline glow breathe */
.pane-h1 {
  animation: h1Breathe 4s ease-in-out infinite;
}
@keyframes h1Breathe {
  0%, 100% { text-shadow: 0 0 16px rgba(255,255,255,0.30), 0 0 36px rgba(255,255,255,0.15); }
  50%      { text-shadow: 0 0 24px rgba(255,255,255,0.50), 0 0 56px rgba(255,255,255,0.25); }
}

/* rail stat — also bold sans */
.rail-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -1px;
  text-shadow: 0 0 12px rgba(255,255,255,0.35);
}

/* responsive shrink */
@media (max-width: 1280px) {
  .pane-h1, .pane-h2 { font-size: 52px; letter-spacing: -1.5px; }
}
@media (max-width: 980px) {
  .pane-h1, .pane-h2 { font-size: 42px; letter-spacing: -1px; }
}

/* ============================================================
   3D EFFECTS — perspective grid, rotating border, scan line
   ============================================================ */

/* @property for animated conic-gradient angle */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ----- 3D PERSPECTIVE GRID (Tron-style) ----- */
.perspective-grid {
  position: absolute;
  width: 240%;
  height: 200%;
  left: -70%;
  bottom: -30%;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(400px) rotateX(65deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, black 10%, transparent 70%);
  mask-image: linear-gradient(to top, black 10%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: gridScroll 12s linear infinite;
}
@keyframes gridScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 50px; }
}

/* ----- ROTATING GRADIENT BORDER on cards ----- */
.glow-border {
  position: relative;
  isolation: isolate;
}
.glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    rgba(255,255,255,0.9) 8%,
    transparent 16%,
    transparent 50%,
    rgba(255,255,255,0.5) 56%,
    transparent 64%
  );
  animation: borderSpin 4s linear infinite;
  filter: blur(3px);
}
@keyframes borderSpin {
  to { --border-angle: 360deg; }
}
/* black fill to clip the gradient into a border-only effect */
.glow-border::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
}

/* ----- SCAN LINE (sweeps down periodically) ----- */
.scan-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.scan-line::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.45), transparent 95%);
  box-shadow: 0 0 24px 8px rgba(255,255,255,0.12);
  animation: scanDown 6s ease-in-out infinite;
}
@keyframes scanDown {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ----- 3D CARD TILT (JS sets --rx, --ry) ----- */
.tilt-3d {
  transform: perspective(1200px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform 120ms ease-out;
  will-change: transform;
  transform-style: preserve-3d;
}

/* apply effects to auth card */
.auth-card {
  position: relative;
  z-index: 10;
  isolation: isolate;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    rgba(255,255,255,0.85) 8%,
    transparent 16%,
    transparent 50%,
    rgba(255,255,255,0.45) 56%,
    transparent 64%
  );
  animation: borderSpin 4s linear infinite;
  filter: blur(4px);
}
.auth-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: -1;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* apply to onboarding card too */
.onb-card-center {
  isolation: isolate;
}
.onb-card-center::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    rgba(255,255,255,0.70) 8%,
    transparent 16%,
    transparent 50%,
    rgba(255,255,255,0.35) 56%,
    transparent 64%
  );
  animation: borderSpin 5s linear infinite;
  filter: blur(3px);
}

/* enhanced glow on auth title */
.auth-h1 {
  text-shadow:
    0 0 30px rgba(255,255,255,0.50),
    0 0 60px rgba(255,255,255,0.25),
    0 0 100px rgba(255,255,255,0.12);
}

/* input field glow on focus */
.ff input:focus,
.ff select:focus {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3),
    0 0 20px rgba(255,255,255,0.15),
    inset 0 0 12px rgba(255,255,255,0.06);
}

/* button hover 3D lift */
.cta.primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 12px 40px rgba(255,255,255,0.35),
    0 0 60px rgba(255,255,255,0.25),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* stagger auth steps for smoother transitions */
.auth-step {
  animation: authStepIn 600ms cubic-bezier(.2,.8,.25,1);
}
@keyframes authStepIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* enhanced spinner */
.auth-spinner {
  width: 48px; height: 48px;
  border: 2px solid rgba(255,255,255,0.10);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 32px auto;
  animation: spin 0.7s linear infinite;
  box-shadow: 0 0 20px rgba(255,255,255,0.25);
}