@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
 * LOGIN PAGE REDESIGN — "The Grid Terminal"
 *
 * A dark Hyperliquid trading-desk treatment for the login page only.
 *
 * ── Scope ──────────────────────────────────────────────────────────────────
 * Every rule below is gated behind `body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell))`, so this file only
 * ever styles the login page. Signup, forgot, reset and the dashboard are
 * untouched even though the <link> lives in the shared auth-layout.
 *
 * ── Rollback ───────────────────────────────────────────────────────────────
 * Delete the one <link rel="stylesheet" href="/css/login-redesign.css" />
 * from src/api/views/auth-layout.ejs and the old look is back. No other file
 * is touched and no JS or markup was modified.
 *
 * ── Design language ────────────────────────────────────────────────────────
 * The product is a grid, the brand mark is a dark screen with green/red
 * lines. The page becomes that screen: a full-viewport chart-grid backdrop,
 * terminal-window panels with corner brackets, a glowing wave wordmark and
 * a blinking block-cursor prompt. Palette is scoped CSS variables so every
 * var-driven component (leaderboard, FAQ drawer, alerts, canvas animation)
 * inverts automatically.
 *
 * Fonts: JetBrains Mono is the project's declared stack but was never
 * actually loaded; this file loads it (CSP already whitelists
 * fonts.googleapis.com / fonts.gstatic.com) with a mono fallback.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Scoped palette ──────────────────────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) {
  --background: oklch(0.157 0.016 164);
  --foreground: oklch(0.915 0.018 164);
  --card: oklch(0.19 0.015 164);
  --card-foreground: oklch(0.915 0.018 164);
  --primary: oklch(0.755 0.185 162); /* brand green, #0ecb81 family */
  --primary-foreground: oklch(0.185 0.045 160); /* near-black ink for text on green */
  --muted: oklch(0.24 0.015 164);
  --muted-foreground: oklch(0.655 0.028 164);
  --destructive: oklch(0.655 0.205 25); /* brand red, #ef4444 family */
  --destructive-foreground: oklch(0.95 0.02 25);
  --border: oklch(0.3 0.02 164 / 0.55);
  --input: oklch(0.135 0.013 164);
  --ring: oklch(0.755 0.185 162);
  color-scheme: dark;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Backdrop: chart-grid terminal screen ──────────────────────────────────
   Fixed layer under everything (auth-shell already z-index:1). Minor grid
   every 32px, major every 128px, a soft green bloom behind the cards, and a
   vignette so the edges fall into the ink. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell))::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% 36%, oklch(0.55 0.15 162 / 0.13), transparent 65%),
    radial-gradient(900px 520px at 84% 10%, oklch(0.45 0.12 162 / 0.05), transparent 60%),
    linear-gradient(oklch(0.92 0.04 165 / 0.014) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.92 0.04 165 / 0.014) 1px, transparent 1px),
    linear-gradient(oklch(0.92 0.04 165 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.92 0.04 165 / 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, transparent 42%, oklch(0.13 0.012 164 / 0.55) 100%), var(--background);
  background-size:
    auto,
    auto,
    32px 32px,
    32px 32px,
    128px 128px,
    128px 128px,
    auto,
    auto;
}

/* ── Global touches ──────────────────────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) ::selection {
  background: oklch(0.755 0.185 162 / 0.35);
  color: oklch(0.95 0.02 165);
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) a {
  color: oklch(0.83 0.15 163);
}

/* Thin dark scrollbars inside the leaderboard and FAQ drawer. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-list::-webkit-scrollbar,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body::-webkit-scrollbar {
  width: 6px;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-list::-webkit-scrollbar-track,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body::-webkit-scrollbar-track {
  background: transparent;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-list::-webkit-scrollbar-thumb,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body::-webkit-scrollbar-thumb {
  background: oklch(0.34 0.03 164);
  border-radius: 3px;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-list::-webkit-scrollbar-thumb:hover,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body::-webkit-scrollbar-thumb:hover {
  background: oklch(0.44 0.04 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-list,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.34 0.03 164) transparent;
}

/* ── Header: wordmark on the dark screen ─────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-header {
  margin-bottom: 2rem;
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .brand-mark {
  filter: drop-shadow(0 0 10px oklch(0.755 0.185 162 / 0.35));
  transition: filter 0.25s ease;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-header a:hover .brand-mark {
  filter: drop-shadow(0 0 18px oklch(0.8 0.19 162 / 0.55));
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .matrix-title {
  font-size: 2.75rem;
  letter-spacing: 0.08em;
}
/* The about page's wordmark is an inline heading at its own size — keep it. */
body:has(.about-shell) .matrix-title {
  font-size: 1.6rem;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .matrix-title span {
  color: oklch(0.8 0.17 162); /* static fallback while reduced-motion is on */
  animation: gs-hue-wave 3.5s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.12s);
}
@keyframes gs-hue-wave {
  0%,
  100% {
    color: oklch(0.72 0.17 160);
    text-shadow: 0 0 14px oklch(0.72 0.19 162 / 0.25);
  }
  25% {
    color: oklch(0.87 0.14 168);
    text-shadow: 0 0 24px oklch(0.8 0.19 162 / 0.45);
  }
  50% {
    color: oklch(0.8 0.18 176);
    text-shadow: 0 0 18px oklch(0.76 0.18 168 / 0.35);
  }
  75% {
    color: oklch(0.84 0.16 158);
    text-shadow: 0 0 20px oklch(0.78 0.19 160 / 0.4);
  }
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-tagline {
  color: oklch(0.66 0.03 164);
  opacity: 1;
}

/* ── Corner pill ("how does this work?") + dev credit ────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .top-action-btn,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-trigger {
  background: oklch(0.2 0.015 164 / 0.85);
  border: 1px solid oklch(0.4 0.05 164 / 0.45);
  color: oklch(0.84 0.16 164);
  box-shadow: 0 4px 14px oklch(0.04 0.01 164 / 0.45);
  backdrop-filter: blur(6px);
  transition:
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .top-action-btn:hover,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-trigger:hover {
  border-color: oklch(0.8 0.19 162);
  color: oklch(0.9 0.15 165);
  box-shadow:
    0 0 18px oklch(0.755 0.185 162 / 0.2),
    0 4px 14px oklch(0.04 0.01 164 / 0.45);
  transform: translateY(-1px);
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-credit {
  color: oklch(0.5 0.025 164 / 0.8);
  opacity: 1;
}

/* ── FAQ drawer ──────────────────────────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-backdrop {
  background: oklch(0.1 0.01 164 / 0.62);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-panel {
  background: linear-gradient(180deg, oklch(0.195 0.015 164), oklch(0.17 0.013 164));
  border-right: 1px solid oklch(0.32 0.03 164 / 0.6);
  box-shadow:
    0 0 60px oklch(0.04 0.01 164 / 0.6),
    8px 0 32px oklch(0.03 0.01 164 / 0.55);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-head {
  color: oklch(0.83 0.15 163);
  border-bottom-color: oklch(0.3 0.03 164 / 0.6);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-lang.active {
  box-shadow: 0 0 10px oklch(0.755 0.185 162 / 0.35);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body details {
  border-bottom-color: oklch(0.28 0.02 164 / 0.55);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-body code {
  background: oklch(0.24 0.015 164);
  color: oklch(0.84 0.16 164);
}

/* ── The two panels: terminal windows ────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-card,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card {
  position: relative;
  background: linear-gradient(180deg, oklch(0.215 0.016 164), oklch(0.185 0.014 164));
  border: 1px solid oklch(0.34 0.03 164 / 0.6);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.03),
    0 0 0 1px oklch(0.755 0.185 162 / 0.07),
    0 0 50px oklch(0.755 0.185 162 / 0.09),
    0 24px 48px oklch(0.03 0.01 164 / 0.5);
}

/* Corner brackets: viewfinder on the sign-in window. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::before,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::before {
  top: 9px;
  left: 9px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
  border-top-left-radius: 4px;
  filter: drop-shadow(0 0 4px oklch(0.755 0.185 162 / 0.6));
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::after {
  bottom: 9px;
  right: 9px;
  border-bottom: 2px solid oklch(0.45 0.05 164 / 0.8);
  border-right: 2px solid oklch(0.45 0.05 164 / 0.8);
  border-bottom-right-radius: 4px;
}

/* ── Grid-motion card: live indicator + dark chart well ──────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-head {
  color: oklch(0.6 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-head .ga-pair::before {
  content: '\25CF\00A0'; /* ● + nbsp — live dot */
  color: var(--primary);
  font-size: 0.55rem;
  vertical-align: 1px;
  text-shadow: 0 0 8px oklch(0.755 0.185 162 / 0.8);
  animation: gs-live-blink 2.4s ease-in-out infinite;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-canvas-wrap {
  background: var(--background);
  border-color: oklch(0.28 0.02 164 / 0.7);
  border-radius: 8px;
  box-shadow: inset 0 2px 12px oklch(0.02 0.01 164 / 0.5);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-caption,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-legend {
  color: oklch(0.6 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-caption .ga-step,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-caption .ga-profit {
  color: oklch(0.84 0.16 164);
  text-shadow: 0 0 12px oklch(0.755 0.185 162 / 0.3);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-legend .lg-dot {
  box-shadow: 0 0 6px currentColor;
}

/* ── Leaderboard (flip-card back face) ───────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-toggle {
  color: oklch(0.84 0.16 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-tabs {
  background: oklch(0.24 0.015 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-tabs button {
  color: oklch(0.6 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-tabs button.active {
  background: oklch(0.29 0.02 164);
  color: oklch(0.88 0.15 165);
  box-shadow: 0 0 12px oklch(0.755 0.185 162 / 0.18);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-row {
  border-bottom: 1px solid oklch(0.28 0.02 164 / 0.5);
  transition: background 0.12s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-row:hover {
  background: oklch(0.26 0.02 164 / 0.55);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-rank {
  color: oklch(0.55 0.025 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-pair {
  color: oklch(0.84 0.16 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-profit {
  color: oklch(0.88 0.15 165);
  text-shadow: 0 0 10px oklch(0.755 0.185 162 / 0.35);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-msg {
  color: oklch(0.55 0.025 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .lb-foot {
  color: oklch(0.5 0.025 164);
}

/* ── Sign-in card content ────────────────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card {
  padding: 1.6rem 1.85rem 1.5rem;
}

/* Terminal prompt heading:  > LOG IN ▍  */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card h2 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--foreground);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card h2::before {
  content: '> ';
  color: var(--primary);
  text-shadow: 0 0 10px oklch(0.755 0.185 162 / 0.6);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card h2::after {
  content: '\258D'; /* ▍ block cursor */
  margin-left: 2px;
  color: var(--primary);
  animation: gs-cursor-blink 1.1s steps(1) infinite;
}
@keyframes gs-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-label {
  color: oklch(0.62 0.03 164);
  font-size: 0.72rem;
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-control {
  background: var(--input);
  border-color: oklch(0.32 0.02 164 / 0.75);
  border-radius: 7px;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  caret-color: var(--primary);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-control:hover {
  border-color: oklch(0.42 0.04 164 / 0.8);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-control:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px oklch(0.755 0.185 162 / 0.18),
    0 0 24px oklch(0.755 0.185 162 / 0.12);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-control::placeholder {
  color: oklch(0.5 0.02 164 / 0.7);
}
/* Dark autofill: keep the fill ink-dark instead of browser-pale. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px oklch(0.155 0.014 164) inset;
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
  border-color: oklch(0.45 0.06 164 / 0.7);
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .remember-row {
  color: oklch(0.62 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .remember-row input[type='checkbox'] {
  border-color: oklch(0.38 0.03 164 / 0.8);
  background: var(--input);
  border-radius: 5px;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .remember-row input[type='checkbox']:hover {
  border-color: oklch(0.55 0.1 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .remember-row input[type='checkbox']:checked {
  background: linear-gradient(135deg, oklch(0.8 0.19 162), oklch(0.7 0.18 161));
  border-color: transparent;
  box-shadow: 0 0 10px oklch(0.755 0.185 162 / 0.4);
}

/* Primary action: green bar with ink text, terminal glow. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-primary {
  background: linear-gradient(180deg, oklch(0.8 0.19 162), oklch(0.69 0.18 161));
  border-color: oklch(0.85 0.16 164 / 0.6);
  border-radius: 8px;
  color: var(--primary-foreground);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.72rem 1rem;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    0 0 0 1px oklch(0.85 0.16 164 / 0.25),
    0 6px 20px oklch(0.755 0.185 162 / 0.28);
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    filter 0.16s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    0 0 0 1px oklch(0.85 0.16 164 / 0.3),
    0 8px 28px oklch(0.755 0.185 162 / 0.38);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Wallet sign-in: ghost button, green outline. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-outline-primary {
  color: oklch(0.84 0.16 164);
  background: oklch(0.16 0.014 164 / 0.5);
  border: 1px solid oklch(0.45 0.06 164 / 0.65);
  border-radius: 8px;
  font-weight: 600;
  padding: 0.66rem 1rem;
  transition:
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s,
    transform 0.16s;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-outline-primary:hover {
  background: oklch(0.755 0.185 162 / 0.1);
  border-color: oklch(0.8 0.19 162);
  box-shadow: 0 0 18px oklch(0.755 0.185 162 / 0.18);
  transform: translateY(-1px);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .btn-outline-primary:active {
  transform: translateY(0);
}

body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .siwe-divider {
  color: oklch(0.6 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .siwe-divider::before,
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .siwe-divider::after {
  background: oklch(0.38 0.04 164 / 0.35);
}

/* Alerts: keep the var-driven tint, add a hard left accent. */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .alert {
  border-radius: 8px;
  border-left-width: 3px;
}

/* ── Status lines under the panels ───────────────────────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status {
  color: oklch(0.8 0.17 162);
  opacity: 1;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status.quiet {
  color: oklch(0.58 0.03 164);
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status .status-dot {
  background: oklch(0.82 0.17 163);
  box-shadow: 0 0 10px oklch(0.755 0.185 162 / 0.8);
}

/* ── Entry choreography: staggered rise-in on load ───────────────────────── */
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .top-action-corner {
  animation: gs-fade-in 0.45s ease 0.05s both;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-trigger {
  animation: gs-fade-in 0.45s ease 0.05s both;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-header {
  animation: gs-rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-split {
  animation: gs-rise-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status {
  animation: gs-fade-in 0.5s ease 0.32s both;
}
body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-credit {
  animation: gs-fade-in 0.45s ease 0.55s both;
}
@keyframes gs-rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gs-live-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ── Small screens: tighten padding, keep brackets clear of the form ─────── */
@media (max-width: 600px) {
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card {
    padding: 1.35rem 1.4rem 1.25rem;
  }
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::before,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card::after {
    width: 10px;
    height: 10px;
  }
}

/* ── Reduced motion: static glow instead of animation ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .top-action-corner,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .faq-trigger,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-header,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-split,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-credit,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .matrix-title span,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .grid-anim-head .ga-pair::before,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-card h2::after,
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status .status-dot {
    animation: none;
  }
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .matrix-title span {
    color: oklch(0.84 0.16 164);
    text-shadow: 0 0 16px oklch(0.755 0.185 162 / 0.35);
  }
  body:has(:is(#login-form, #signup-form, #forgot-form, .about-shell)) .auth-status .status-dot {
    opacity: 1;
  }
}

/* ── About page (standalone marketing layout, same terminal language) ───────
   /about is a separate page with its own shell and inline styles, all
   var-driven — the scoped palette above already flips it dark. These rules
   polish the big pieces to match the auth pages. */
body:has(.about-shell) .about-card {
  background: linear-gradient(180deg, oklch(0.215 0.016 164), oklch(0.185 0.014 164));
  border: 1px solid oklch(0.34 0.03 164 / 0.6);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.03),
    0 0 0 1px oklch(0.755 0.185 162 / 0.07),
    0 0 50px oklch(0.755 0.185 162 / 0.09),
    0 24px 48px oklch(0.03 0.01 164 / 0.5);
}
body:has(.about-shell) .title-tagline {
  color: oklch(0.72 0.06 164);
}
body:has(.about-shell) .lang-pill {
  background: oklch(0.2 0.015 164 / 0.6);
  border-color: oklch(0.4 0.05 164 / 0.4);
}
body:has(.about-shell) .lang-pill:hover {
  border-color: oklch(0.8 0.19 162 / 0.7);
}
body:has(.about-shell) .lang-pill.active {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 12px oklch(0.755 0.185 162 / 0.4);
}
body:has(.about-shell) .about-section {
  border-bottom-color: oklch(0.3 0.03 164 / 0.5);
}
body:has(.about-shell) .about-grid-motion {
  border-bottom-color: oklch(0.3 0.03 164 / 0.5);
}

/* ── Simulator chart (welcome-chart.js) resolves colors from the <html>
   element, not <body> — so the dark palette must also exist at :root on the
   about page, or the TradingView chart renders with the page's light tokens
   (white background). Paired with data-bs-theme="dark" on about's <html>. */
:root:has(.about-shell) {
  --background: oklch(0.157 0.016 164);
  --foreground: oklch(0.915 0.018 164);
  --card: oklch(0.19 0.015 164);
  --card-foreground: oklch(0.915 0.018 164);
  --primary: oklch(0.755 0.185 162);
  --primary-foreground: oklch(0.185 0.045 160);
  --muted: oklch(0.24 0.015 164);
  --muted-foreground: oklch(0.655 0.028 164);
  --destructive: oklch(0.655 0.205 25);
  --destructive-foreground: oklch(0.95 0.02 25);
  --border: oklch(0.3 0.02 164 / 0.55);
  --input: oklch(0.135 0.013 164);
  --ring: oklch(0.755 0.185 162);
  color-scheme: dark;
}