/* =========================================================================
   QUANTUM EDGE AI — design system
   Palette named around a single idea: markets exist in superposition
   until you act. Cyan = measured/settled, violet = still in flux.
   ========================================================================= */

:root {
  /* Color */
  --void: #0a0a0c;              /* page background — neutral near-black */
  --deep-field: #111114;        /* section background */
  --panel: #16161a;             /* card / panel background */
  --panel-raised: #1e1e24;      /* hovered / elevated panel */
  --qubit-cyan: #3fe0c5;        /* primary accent — "measured" state */
  --qubit-violet: #3b82f6;      /* secondary accent — "superposition" state (blue; overridden to brown in .admin-shell) */
  --qubit-violet-rgb: 59, 130, 246;
  --signal-white: #f2f2f5;      /* primary text */
  --muted-drift: #9aa0ac;       /* secondary text */
  --collapse-coral: #ff6b81;    /* negative / alert */
  --border-soft: rgba(var(--qubit-violet-rgb), 0.22);
  --border-faint: rgba(255, 255, 255, 0.08);

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'SFMono-Regular', monospace;

  /* Shape / motion */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-glow: 0 0 60px rgba(var(--qubit-violet-rgb), 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #17171c 0%, var(--void) 60%);
  color: var(--signal-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* safety net: no single element should be able to widen the whole page */
}

img, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; color: var(--muted-drift); }

::selection { background: var(--qubit-violet); color: var(--void); }

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

/* ---- Utility --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qubit-cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qubit-cyan);
  box-shadow: 0 0 8px var(--qubit-cyan);
}

.mono { font-family: var(--font-mono); }

.text-positive { color: var(--qubit-cyan); }
.text-negative { color: var(--collapse-coral); }
.text-muted { color: var(--muted-drift); }

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet));
  color: #05060d;
}

.btn-primary:hover { box-shadow: 0 6px 24px rgba(var(--qubit-violet-rgb), 0.35); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--signal-white);
}

.btn-google {
  background: #fff;
  border-color: #fff;
  color: #3c4043;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted-drift);
  font-size: 12.5px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-faint);
}

.btn-ghost:hover { border-color: var(--qubit-cyan); }

.btn-block { width: 100%; }

.btn-sm { padding: 10px 18px; font-size: 13.5px; }

/* ---- Forms ------------------------------------------------------------- */

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-drift);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--signal-white);
  font-family: var(--font-body);
  font-size: 16px; /* 16px stops iOS Safari from auto-zooming the page on focus */
  transition: border-color 0.15s var(--ease);
}

.field textarea { resize: vertical; min-height: 90px; }

.field input:focus,
.field textarea:focus {
  border-color: var(--qubit-cyan);
  outline: none;
}

.field input.has-error { border-color: var(--collapse-coral); }

.field-error {
  color: var(--collapse-coral);
  font-size: 13px;
  margin-top: 6px;
}

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted-drift);
}

.field-checkbox input { margin-top: 3px; }

.field-checkbox a { color: var(--qubit-cyan); }

/* ---- Ticker jump form (Charts hub "Jump to any ticker") ---------------- */

.ticker-jump-form {
  display: flex;
  gap: 12px;
  max-width: 380px;
}

.ticker-jump-input {
  flex: 1;
  min-width: 0; /* lets the input actually shrink instead of pushing the button out of the row */
  text-transform: uppercase;
  background: var(--void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--signal-white);
  font-family: var(--font-body);
  font-size: 16px;
}

.ticker-jump-input:focus {
  border-color: var(--qubit-cyan);
  outline: none;
}

.ticker-jump-form .btn { flex-shrink: 0; }

@media (max-width: 420px) {
  .ticker-jump-form { flex-direction: column; max-width: none; }
  .ticker-jump-form .btn { width: 100%; }
}

.alert {
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid;
}

.alert-error {
  background: rgba(255, 107, 129, 0.08);
  border-color: rgba(255, 107, 129, 0.35);
  color: #ffb3c0;
}

.alert-success {
  background: rgba(63, 224, 197, 0.08);
  border-color: rgba(63, 224, 197, 0.35);
  color: var(--qubit-cyan);
}

/* True green (vs. the site's teal "success" accent elsewhere) — used
   for the admin email test result banner specifically. */
.alert-success-green {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

/* ---- Cards / panels ------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
}

.glass-card {
  background: rgba(22, 22, 26, 0.72);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}

/* =========================================================================
   Marketing nav + footer (public pages)
   ========================================================================= */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  position: relative;
}

.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--signal-white);
}

.site-nav-toggle svg { width: 20px; height: 20px; }
.site-nav-toggle:hover { border-color: var(--qubit-cyan); }

.site-nav-actions-mobile { display: none; }

/* The mark sits for the wordmark's own leading "Q" (markup drops it —
   "uantum Edge AI" — with the full name restored via aria-label for
   accessibility) so icon + text read as one continuous "Quantum Edge AI"
   rather than an icon-plus-separate-word. Zero gap plus a negative
   margin on .brand-mark below is deliberate: the mark's own SVG
   geometry already has empty margin past the tail's right edge, so
   without pulling the text in past that, "uantum" would sit further
   from the icon than a real letter would. */
.brand {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Animated "Q" brand mark — an orbit ring forms the bowl (cyan->violet),
   one glowing electron circles it, and the tail is a shiny brushed-chrome
   diagonal slash. Baked as an SVG data URI (not inline markup) so every
   `<span class="brand-mark">` across ~40 pages/partials stays untouched;
   swapping the mark everywhere is a CSS-only change. Three color variants
   exist because --qubit-violet is itself re-themed per area (teal in the
   member app, brown in admin, see below) and a data URI can't inherit
   that CSS custom property the way the old pseudo-element gradient did —
   each variant below hardcodes the matching palette instead. */
.brand-mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  margin-right: -5px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233fe0c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233b82f6%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233fe0c5%22%20stop-opacity%3D%220.3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233fe0c5%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234b5563%22%2F%3E%3Cstop%20offset%3D%220.25%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.75%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234b5563%22%2F%3E%3CanimateTransform%20attributeName%3D%22gradientTransform%22%20type%3D%22translate%22%20values%3D%22-0.4%20-0.4%3B0.4%200.4%3B-0.4%20-0.4%22%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22e%22%20x%3D%22-1.5%22%20y%3D%22-1.5%22%20width%3D%224%22%20height%3D%224%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.2%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2266%22%20y1%3D%2266%22%20x2%3D%2282%22%20y2%3D%2282%22%20stroke%3D%22url(%23c)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20style%3D%22transform-origin%3A50px%2050px%3Banimation%3Aqod%2040s%20linear%20infinite%22%3E%3Cpath%20id%3D%22op%22%20d%3D%22M%2010%2C50%20A%2040%2C15%200%201%201%2090%2C50%20A%2040%2C15%200%201%201%2010%2C50%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23f2f2f5%22%20filter%3D%22url(%23e)%22%3E%3CanimateMotion%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%20rotate%3D%22auto%22%3E%3Cmpath%20href%3D%22%23op%22%2F%3E%3C%2FanimateMotion%3E%3C%2Fcircle%3E%3C%2Fg%3E%3Cstyle%3E%40keyframes%20qod%7Bfrom%7Btransform%3Arotate(-18deg)%7Dto%7Btransform%3Arotate(342deg)%7D%7D%3C%2Fstyle%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Member-app variant — swaps the violet leg of the ring for the app
   shell's teal (dashboard-skin.css retires --qubit-violet to teal here;
   a background-image data URI can't inherit that override, so it's
   restated explicitly). Chrome tail stays identical across all variants. */
.app-shell .brand-mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233fe0c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231f8f7e%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233fe0c5%22%20stop-opacity%3D%220.3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233fe0c5%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234b5563%22%2F%3E%3Cstop%20offset%3D%220.25%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.75%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234b5563%22%2F%3E%3CanimateTransform%20attributeName%3D%22gradientTransform%22%20type%3D%22translate%22%20values%3D%22-0.4%20-0.4%3B0.4%200.4%3B-0.4%20-0.4%22%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22e%22%20x%3D%22-1.5%22%20y%3D%22-1.5%22%20width%3D%224%22%20height%3D%224%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.2%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2266%22%20y1%3D%2266%22%20x2%3D%2282%22%20y2%3D%2282%22%20stroke%3D%22url(%23c)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20style%3D%22transform-origin%3A50px%2050px%3Banimation%3Aqod%2040s%20linear%20infinite%22%3E%3Cpath%20id%3D%22op%22%20d%3D%22M%2010%2C50%20A%2040%2C15%200%201%201%2090%2C50%20A%2040%2C15%200%201%201%2010%2C50%22%20fill%3D%22none%22%20stroke%3D%22%231f8f7e%22%20stroke-width%3D%221%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23f2f2f5%22%20filter%3D%22url(%23e)%22%3E%3CanimateMotion%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%20rotate%3D%22auto%22%3E%3Cmpath%20href%3D%22%23op%22%2F%3E%3C%2FanimateMotion%3E%3C%2Fcircle%3E%3C%2Fg%3E%3Cstyle%3E%40keyframes%20qod%7Bfrom%7Btransform%3Arotate(-18deg)%7Dto%7Btransform%3Arotate(342deg)%7D%7D%3C%2Fstyle%3E%3C%2Fsvg%3E");
}

/* Admin variant — brown/coral ring (admin's own palette, no cyan, kept
   deliberately distinct so the mark itself signals "you're in admin").
   Scoped to .admin-shell/.admin-login-screen (not the narrower
   .admin-sidebar/.admin-login-card) so it also catches the mobile
   topbar's brand-mark in admin/partials/sidebar.php. */
.admin-shell .brand-mark,
.admin-login-screen .brand-mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23b8763f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff6b81%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23b8763f%22%20stop-opacity%3D%220.3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b8763f%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234b5563%22%2F%3E%3Cstop%20offset%3D%220.25%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.75%22%20stop-color%3D%22%23d1d5db%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234b5563%22%2F%3E%3CanimateTransform%20attributeName%3D%22gradientTransform%22%20type%3D%22translate%22%20values%3D%22-0.4%20-0.4%3B0.4%200.4%3B-0.4%20-0.4%22%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22e%22%20x%3D%22-1.5%22%20y%3D%22-1.5%22%20width%3D%224%22%20height%3D%224%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.2%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2234%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2266%22%20y1%3D%2266%22%20x2%3D%2282%22%20y2%3D%2282%22%20stroke%3D%22url(%23c)%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20style%3D%22transform-origin%3A50px%2050px%3Banimation%3Aqod%2040s%20linear%20infinite%22%3E%3Cpath%20id%3D%22op%22%20d%3D%22M%2010%2C50%20A%2040%2C15%200%201%201%2090%2C50%20A%2040%2C15%200%201%201%2010%2C50%22%20fill%3D%22none%22%20stroke%3D%22%23ff6b81%22%20stroke-width%3D%221%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23f2f2f5%22%20filter%3D%22url(%23e)%22%3E%3CanimateMotion%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%20rotate%3D%22auto%22%3E%3Cmpath%20href%3D%22%23op%22%2F%3E%3C%2FanimateMotion%3E%3C%2Fcircle%3E%3C%2Fg%3E%3Cstyle%3E%40keyframes%20qod%7Bfrom%7Btransform%3Arotate(-18deg)%7Dto%7Btransform%3Arotate(342deg)%7D%7D%3C%2Fstyle%3E%3C%2Fsvg%3E");
}

/* Sidebar contexts stay at the original 1x size, deliberately — the
   dashboard/admin sidebar is a fixed 240px column (~200px interior),
   and measuring real Segoe UI Semibold metrics for "Quantum Edge AI"
   shows the wordmark alone already uses ~198px of that at 1x. Any
   larger and it overflows; there's no safe room to grow it without
   widening the sidebar itself, which wasn't asked for here. Scoped to
   .app-shell/.admin-shell (the sidebar layouts), NOT .admin-login-screen
   (that's a centered, unconstrained login card — it gets the same 2x
   size as every other marketing/login page via the base .brand rule). */
.app-shell .brand,
.admin-shell .brand {
  font-size: 18px;
  gap: 0;
}

.app-shell .brand-mark,
.admin-shell .brand-mark {
  width: 28px;
  height: 28px;
  margin-right: -3px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  color: var(--muted-drift);
}

.site-nav-actions { display: flex; align-items: center; gap: 14px; }

.site-footer {
  border-top: 1px solid var(--border-faint);
  padding-block: 28px 32px;
  margin-top: 80px;
  color: var(--muted-drift);
  font-size: 13.5px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-faint);
}

.site-footer-links .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-drift);
  margin-right: 2px;
}

.site-footer-links a { color: var(--muted-drift); transition: color 0.15s var(--ease); }
.site-footer-links a:hover { color: var(--qubit-cyan); }

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- Hero -------------------------------------------------------------- */

.hero-actions { display: flex; gap: 14px; align-items: center; }

.hero-photo {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
  padding-block: 100px 80px;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(ellipse 120% 100% at 30% 15%, #17171c 0%, var(--void) 70%);
  border: 1px solid var(--border-faint);
}

/* Full-bleed variant — index.php's hero and any features-*.php detail
   page hero that has a real background photo (.hero-photo alone, no
   photo yet, stays boxed inside .container). */
.hero.hero-photo {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 24px;
  border-radius: 0;
  border-inline: none;
}

/* features.php's top header — full-bleed background photo, but the
   content here is simple centered text (not the 2-column hero-copy /
   atom-wrap split), so this doesn't reuse .hero-inner's grid layout. */
.features-header-photo {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 24px;
  border-block: 1px solid var(--border-faint);
  background:
    radial-gradient(ellipse 60% 85% at 50% 50%, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.55) 45%, rgba(8, 8, 10, 0.1) 75%, rgba(8, 8, 10, 0) 100%),
    url('/assets/img/cards/features-header.jpg') center / cover no-repeat;
}

/* A tight, concentrated vignette right behind the text block (not a
   uniform full-box gradient like the first attempt) — strong contrast
   exactly where the words sit, fading out fast so the flanking chart
   panels stay vibrant. Text-shadow layered on top as a second line of
   defense for the edges of that fade. */
.features-header-photo .eyebrow,
.features-header-photo h1,
.features-header-photo .lead,
.features-header-photo .stats-bar {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* .lead normally uses the muted secondary-text gray (--muted-drift),
   which has less inherent contrast than the white heading — brightened
   specifically here since a photo background needs more contrast than
   the plain dark backgrounds .lead is normally used against. */
.features-header-photo .lead {
  color: #d5d7dd;
}

/* Same problem as .lead, worse: .stats-bar's pill background is only
   55% opaque and its text is 12.5px/11.5px muted-gray — barely holds up
   against a busy photo even with the vignette. Darker pill, bigger
   text, brighter gray specifically here. */
.features-header-photo .stats-bar {
  background: rgba(10, 10, 12, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
  padding: 18px 32px;
}

.features-header-photo .stats-bar .stat {
  font-size: 15px;
  color: #d5d7dd;
}

.features-header-photo .live-badge {
  font-size: 14px;
  color: #d5d7dd;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
  max-width: 1180px;
  margin-inline: auto;
}

.quantum-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.quantum-glow-a,
.quantum-glow-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: quantum-glow-pulse 9s ease-in-out infinite;
}

.quantum-glow-a {
  width: 380px;
  height: 380px;
  top: -80px;
  left: 8%;
  background: radial-gradient(circle, var(--qubit-cyan), transparent 70%);
}

.quantum-glow-b {
  width: 320px;
  height: 320px;
  bottom: -100px;
  right: 12%;
  background: radial-gradient(circle, var(--qubit-violet), transparent 70%);
  animation-delay: 3s;
}

@keyframes quantum-glow-pulse {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.15); }
}

.q-particle {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(63, 224, 197, 0.55);
  opacity: var(--base-opacity, 0.6);
  animation:
    q-twinkle var(--twinkle-dur, 3s) ease-in-out var(--twinkle-delay, 0s) infinite,
    q-drift var(--drift-dur, 12s) ease-in-out var(--drift-delay, 0s) infinite;
}

@keyframes q-twinkle {
  0%, 100% { opacity: var(--base-opacity, 0.6); }
  50% { opacity: 1; }
}

@keyframes q-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--dx, 20px), var(--dy, 20px)); }
}

.hero-copy, .hero-photo .atom-wrap {
  position: relative;
  z-index: 1;
}

.hero-copy {
  padding: 10px;
}

.hero-photo h1 {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  margin-block: 18px 20px;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.hero-photo p.lead {
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: 32px;
  color: #d6d6db;
}

.atom-wrap {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atom-wrap svg { width: 100%; height: 100%; max-width: 400px; }

.atom-wrap .nucleus-core { animation: nucleus-pulse 2.4s ease-in-out infinite; }

@keyframes nucleus-pulse {
  0%, 100% { r: 10; opacity: 1; }
  50% { r: 14; opacity: 0.75; }
}

/* ---- Section headers shared by benefits + features --------------------- */

.section-label { text-align: center; margin-bottom: 12px; }

.section-title {
  text-align: center;
  font-size: 30px;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 50px;
}

/* ---- Benefits ------------------------------------------------------------ */

.benefits { padding-block: 80px; }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.benefit-card { padding: 0 0 26px; position: relative; overflow: hidden; text-align: center; }

.benefit-card > *:not(.card-image) { position: relative; z-index: 1; }

.benefit-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  margin: 18px auto 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qubit-cyan);
  border: 1px solid rgba(63, 224, 197, 0.35);
  background: rgba(63, 224, 197, 0.08);
  border-radius: 8px;
}

.benefit-card h3 { font-size: 17px; margin: 0 22px 8px; }
.benefit-card p { font-size: 14px; margin: 0 22px; }

/* ---- Feature grid -------------------------------------------------- */

.feature-grid { padding-block: 20px 90px; }

.feature-grid-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  padding: 0 0 26px;
  position: relative;
  overflow: hidden;
}

.feature-card > *:not(.card-image) { position: relative; z-index: 1; }

.feature-card h3 { font-size: 16px; margin: 18px 22px 8px; }
.feature-card p { font-size: 14px; margin: 0 22px; }

/* ---- Card header image (benefit-card / feature-card) --------------------
   Bleeds edge-to-edge inside the card (both now use padding:0 on top so no
   negative-margin trick is needed) and clips to the panel's own top radius. */
.card-image {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--deep-field);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 18px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-card {
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--qubit-cyan);
}

/* =========================================================================
   /features.php — category "vertical" banners + stats bar
   ========================================================================= */

.stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 16px 28px;
  margin: 32px auto 0;
  max-width: fit-content;
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  background: rgba(22, 22, 26, 0.55);
}

.stats-bar .stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted-drift);
  white-space: nowrap;
}

.stats-bar .stat strong {
  color: var(--signal-white);
  font-weight: 600;
}

.feature-vertical {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 32px;
  padding: 56px 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(ellipse 120% 100% at 20% 20%, #17171c 0%, var(--void) 70%);
  border: 1px solid var(--border-faint);
  margin-bottom: 28px;
}

.feature-vertical-copy { position: relative; z-index: 1; }
.feature-vertical-copy .eyebrow { margin-bottom: 12px; }
.feature-vertical-copy h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
.feature-vertical-copy p { max-width: 56ch; margin-bottom: 20px; }

.feature-vertical-copy .explore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--qubit-cyan);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: gap 0.15s var(--ease);
}

.feature-vertical-copy .explore-link:hover { gap: 12px; }

.feature-vertical-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-vertical-icon svg {
  width: 100%;
  max-width: 170px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 34px rgba(63, 224, 197, 0.25));
}

/* Per-category recoloring — reuses .quantum-field's existing glow-orb
   structure (see .hero-photo above), just different colors, so no new
   animation/JS is needed per category. */
.feature-vertical-signals .quantum-glow-a { background: radial-gradient(circle, var(--qubit-violet), transparent 70%); }
.feature-vertical-signals .quantum-glow-b { background: radial-gradient(circle, var(--collapse-coral), transparent 70%); }
.feature-vertical-signals .feature-vertical-icon svg { filter: drop-shadow(0 0 34px rgba(var(--qubit-violet-rgb), 0.3)); }

.feature-vertical-ai .quantum-glow-a { background: radial-gradient(circle, var(--qubit-cyan), transparent 70%); }
.feature-vertical-ai .quantum-glow-b { background: radial-gradient(circle, var(--qubit-violet), transparent 70%); width: 380px; height: 380px; }

.feature-vertical-news .quantum-glow-a { background: radial-gradient(circle, var(--collapse-coral), transparent 70%); }
.feature-vertical-news .quantum-glow-b { background: radial-gradient(circle, var(--qubit-cyan), transparent 70%); }
.feature-vertical-news .feature-vertical-icon svg { filter: drop-shadow(0 0 34px rgba(255, 107, 129, 0.25)); }

.feature-vertical-qsuite .quantum-glow-a { background: radial-gradient(circle, var(--qubit-violet), transparent 70%); }
.feature-vertical-qsuite .quantum-glow-b { background: radial-gradient(circle, var(--qubit-cyan), transparent 70%); }
.feature-vertical-qsuite .feature-vertical-icon svg { filter: drop-shadow(0 0 34px rgba(var(--qubit-violet-rgb), 0.3)); }

/* Only 3 accent colors exist in this palette (cyan/violet/coral) and
   every pairing is already in use elsewhere above — Predictions
   deliberately reuses Signals' exact violet/coral pairing rather than
   inventing a new color, since it's the closest existing category
   thematically (structural analysis, real data, nothing fabricated). */
.feature-vertical-predictions .quantum-glow-a { background: radial-gradient(circle, var(--qubit-violet), transparent 70%); }
.feature-vertical-predictions .quantum-glow-b { background: radial-gradient(circle, var(--collapse-coral), transparent 70%); }
.feature-vertical-predictions .feature-vertical-icon svg { filter: drop-shadow(0 0 34px rgba(var(--qubit-violet-rgb), 0.3)); }

/* Hero-only background photo — scoped to .hero-photo specifically so it
   doesn't also apply to the smaller features.php summary banner, which
   shares .feature-vertical-predictions but not .hero-photo. Was a broad
   flat gradient (120%/100% ellipse at strong 0.78-0.92 opacity) that
   made the photo look badly washed out — replaced with the same tight,
   left-positioned vignette + text-shadow approach used for the other 5
   detail-page heroes. */
.feature-vertical-predictions.hero-photo {
  background:
    radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%),
    url('/assets/img/cards/predictions-hero.jpg') center / cover no-repeat;
}

.feature-vertical-predictions.hero-photo .eyebrow,
.feature-vertical-predictions.hero-photo h1,
.feature-vertical-predictions.hero-photo .lead {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.feature-vertical-predictions.hero-photo .lead {
  color: #d5d7dd;
}

/* Hero background photos for the other 5 detail pages, added later —
   using the refined vignette approach worked out on features.php's
   header instead of the flatter gradient above (which happened to work
   fine for predictions-hero.jpg's composition, but isn't guaranteed to
   for whatever these 5 photos turn out to look like). Vignette is
   positioned left-of-center (32% not 50%) since these pages keep the
   2-column hero-copy/empty-right-side layout, not centered text —
   right side stays vibrant since nothing sits on top of it anymore
   (the atom graphic that used to be there is gone). Same text-shadow
   safety net as the header for the fade zone at the vignette's edge. */
.feature-vertical-portfolio.hero-photo { background: radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%), url('/assets/img/cards/portfolio-hero.jpg') center / cover no-repeat; }
.feature-vertical-signals.hero-photo { background: radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%), url('/assets/img/cards/signals-hero.jpg') center / cover no-repeat; }
.feature-vertical-ai.hero-photo { background: radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%), url('/assets/img/cards/ai-hero.jpg') center / cover no-repeat; }
.feature-vertical-news.hero-photo { background: radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%), url('/assets/img/cards/news-hero.jpg') center / cover no-repeat; }
.feature-vertical-qsuite.hero-photo { background: radial-gradient(ellipse 70% 90% at 32% 50%, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.12) 75%, rgba(8, 8, 10, 0) 100%), url('/assets/img/cards/qsuite-hero.jpg') center / cover no-repeat; }

.feature-vertical-portfolio.hero-photo .eyebrow,
.feature-vertical-portfolio.hero-photo h1,
.feature-vertical-portfolio.hero-photo .lead,
.feature-vertical-signals.hero-photo .eyebrow,
.feature-vertical-signals.hero-photo h1,
.feature-vertical-signals.hero-photo .lead,
.feature-vertical-ai.hero-photo .eyebrow,
.feature-vertical-ai.hero-photo h1,
.feature-vertical-ai.hero-photo .lead,
.feature-vertical-news.hero-photo .eyebrow,
.feature-vertical-news.hero-photo h1,
.feature-vertical-news.hero-photo .lead,
.feature-vertical-qsuite.hero-photo .eyebrow,
.feature-vertical-qsuite.hero-photo h1,
.feature-vertical-qsuite.hero-photo .lead {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.feature-vertical-portfolio.hero-photo .lead,
.feature-vertical-signals.hero-photo .lead,
.feature-vertical-ai.hero-photo .lead,
.feature-vertical-news.hero-photo .lead,
.feature-vertical-qsuite.hero-photo .lead {
  color: #d5d7dd;
}

.feature-vertical-group { margin-bottom: 60px; }
.feature-vertical-group .feature-grid-inner { margin-top: 0; }

@media (max-width: 900px) {
  .feature-vertical { grid-template-columns: 1fr; padding: 40px 28px; text-align: center; }
  .feature-vertical-copy p { margin-inline: auto; }
  .feature-vertical-icon svg { max-width: 130px; }
  .stats-bar { gap: 18px 22px; padding: 14px 20px; }
}

/* ---- Real-data channel grid (Signal Intelligence — 34 wired channels) -- */

.channel-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.channel-card {
  padding: 16px 16px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: default;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
              background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.channel-card:hover {
  transform: translateY(-5px) scale(1.03);
  border-color: var(--qubit-cyan);
  background: var(--panel-raised);
  box-shadow: 0 14px 34px rgba(63, 224, 197, 0.22);
  z-index: 1;
}

.channel-card h4 {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--signal-white);
  transition: color 0.18s var(--ease);
}

.channel-card:hover h4 { color: var(--qubit-cyan); }

.channel-card p {
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0;
  color: var(--muted-drift);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .channel-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- News feed (news.php) ------------------------------------------------
   Cards compose .card-image (header art) with .channel-card's hover
   treatment and .badge/.signal-badge for category/sentiment — no new
   visual language invented, just assembled from existing pieces. */

.news-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.news-card {
  display: block;
  color: inherit;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--qubit-cyan);
  box-shadow: 0 14px 34px rgba(63, 224, 197, 0.16);
}

.news-card-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(63, 224, 197, 0.12), rgba(var(--qubit-violet-rgb), 0.12));
  color: var(--muted-drift);
}

.news-card-image-fallback svg { width: 30%; height: 30%; }

.news-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-play svg {
  width: 46px;
  height: 46px;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.news-card .card-image { position: relative; }

.news-card-body { padding: 0 22px 22px; }

.news-card-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

.news-card-body h3 { font-size: 16px; margin-bottom: 6px; }
.news-card-featured .news-card-body h3 { font-size: 18px; }

.news-card-body p {
  font-size: 13.5px;
  color: var(--muted-drift);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-drift);
  display: flex;
  gap: 4px;
}

.news-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .news-featured-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
}

/* ---- "Your tickers" digest — compact card variant ------------------------ */

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

.ticker-digest-card {
  padding: 14px 16px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--panel-raised);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticker-digest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.ticker-digest-link {
  font-size: 12.5px;
  color: var(--signal-white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ticker-digest-link:hover { color: var(--qubit-cyan); }

/* ---- Video click-to-load modal -------------------------------------------- */

.news-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 6, 10, 0.85);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.news-video-modal.is-open { display: flex; }

.news-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 900px;
}

.news-video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.news-video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--signal-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ---- Footer CTA ---------------------------------------------------------- */

.footer-cta {
  text-align: center;
  padding-block: 60px 90px;
}

.footer-cta h2 { font-size: 28px; margin-bottom: 14px; }
.footer-cta p { margin-bottom: 28px; }

@media (max-width: 900px) {
  .hero-photo { grid-template-columns: 1fr; padding-block: 60px; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .atom-wrap { max-width: 240px; margin-inline: auto; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid-inner { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .feature-grid-inner { grid-template-columns: 1fr; }
}

/* =========================================================================
   Auth screens (split layout)
   ========================================================================= */

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.auth-visual {
  position: relative;
  background: var(--deep-field);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  overflow: hidden;
}

.auth-visual canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-visual-copy {
  position: relative;
  z-index: 1;
}

.auth-visual-copy .eyebrow { margin-bottom: 14px; }

.auth-visual-copy h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  max-width: 18ch;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.auth-card { width: 100%; max-width: 400px; }

.auth-card .brand { margin-bottom: 36px; }

.auth-card h1 { font-size: 24px; margin-bottom: 6px; }

.auth-card .subhead {
  color: var(--muted-drift);
  font-size: 14.5px;
  margin-bottom: 30px;
}

.auth-switch {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted-drift);
}

.auth-switch a { color: var(--qubit-cyan); font-weight: 600; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* =========================================================================
   Dashboard shell
   ========================================================================= */

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.app-sidebar {
  border-right: 1px solid var(--border-faint);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--qubit-violet-rgb), 0.07), transparent 45%), var(--deep-field);
  position: relative;
}

.app-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--qubit-violet-rgb), 0.5), transparent);
}

.app-sidebar .brand { margin-bottom: 40px; }

.nav-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }

.nav-group-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 242, 245, 0.55);
  padding: 0 12px;
  margin-bottom: 10px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--muted-drift);
  border-left: 2px solid transparent;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  opacity: 0.8;
}

.nav-icon svg { width: 100%; height: 100%; }

.nav-link:hover { color: var(--signal-white); background: var(--panel); }
.nav-link:hover .nav-icon { opacity: 1; }

.nav-link.active {
  color: var(--signal-white);
  background: var(--panel);
  border-left-color: var(--qubit-cyan);
  box-shadow: inset 0 0 16px rgba(63, 224, 197, 0.1);
}

.nav-link.active .nav-icon { opacity: 1; color: var(--qubit-cyan); }

.app-sidebar-footer { margin-top: auto; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
  font-size: 13.5px;
}

.user-chip .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--void);
  font-weight: 700;
}

.app-main { padding: 32px 40px 60px; min-width: 0; }

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.app-topbar h1 { font-size: 22px; margin: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.stat-card { padding: 22px; }

.stat-card .label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-drift);
  margin-bottom: 10px;
}

.stat-card .value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
}

.empty-state {
  padding: 48px 32px;
  text-align: center;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
}

.empty-state .glyph {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(63, 224, 197, 0.16), rgba(var(--qubit-violet-rgb), 0.16));
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.empty-state h3 { font-size: 17px; margin-bottom: 8px; }
.empty-state p { max-width: 40ch; margin-inline: auto; margin-bottom: 22px; font-size: 14px; }

/* ---- Data table ------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-drift);
  font-weight: 500;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-faint);
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: middle;
}

.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.data-table .ticker-cell {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.data-table .num { font-family: var(--font-mono); text-align: right; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.badge-position {
  color: var(--qubit-cyan);
  border-color: rgba(63, 224, 197, 0.35);
  background: rgba(63, 224, 197, 0.08);
}

.badge-watch {
  color: var(--muted-drift);
  border-color: var(--border-faint);
  background: rgba(255, 255, 255, 0.02);
}

.row-actions { display: flex; gap: 14px; align-items: center; }

.link-danger {
  color: var(--collapse-coral);
  font-size: 13px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.link-muted { color: var(--muted-drift); font-size: 13px; }
.link-muted:hover { color: var(--signal-white); }

.form-inline-card { padding: 24px; margin-bottom: 24px; }

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: start;
}

@media (max-width: 700px) {
  .form-row-3 { grid-template-columns: 1fr; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- News --------------------------------------------------------------- */

.news-list { display: flex; flex-direction: column; }

.news-item {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-faint);
}
.news-item:last-child { border-bottom: none; }

.news-item .headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--signal-white);
  margin-bottom: 4px;
  display: block;
}
.news-item .headline:hover { color: var(--qubit-cyan); }

.news-item .meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-drift);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-item .summary {
  font-size: 13.5px;
  color: var(--muted-drift);
  margin-top: 6px;
  margin-bottom: 0;
}

.ticker-news-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
  flex-wrap: wrap;
}
.ticker-news-row:last-child { border-bottom: none; }

.ticker-news-row .ticker-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--qubit-cyan);
  min-width: 56px;
}

.ticker-news-row .links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.ticker-news-row .links a { color: var(--muted-drift); }
.ticker-news-row .links a:hover { color: var(--signal-white); }

/* ---- Chart page ----------------------------------------------------------- */

.chart-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.chart-header .ticker-symbol {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
}

.chart-header .price { font-family: var(--font-mono); font-size: 22px; }

.chart-container { padding: 24px; margin-bottom: 24px; }

.chart-canvas-wrap { position: relative; height: 340px; }

.timeframe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.timeframe-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: #c9c5b8;
  background: transparent;
  border: 1px solid var(--border-faint);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.timeframe-tab:hover { color: var(--signal-white); border-color: var(--border-soft); }

.timeframe-tab.active {
  color: #000;
  background: var(--qubit-cyan);
  border-color: var(--qubit-cyan);
  font-weight: 700;
}

.ticker-card {
  display: block;
  padding: 20px;
  position: relative;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.card-refresh-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: 50%;
  color: var(--muted-drift);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
  z-index: 2;
}

.card-refresh-btn:hover { color: var(--signal-white); border-color: var(--qubit-cyan); }

.card-refresh-btn svg { width: 13px; height: 13px; }

.card-refresh-btn.is-refreshing svg { animation: spin 0.7s linear infinite; }

.ticker-card:hover {
  border-color: var(--qubit-cyan);
  transform: translateY(-2px);
}

.ticker-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-timeframes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
}

.timeframe-tab-mini {
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-drift);
  border: 1px solid var(--border-faint);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.timeframe-tab-mini:hover {
  color: var(--void);
  background: var(--qubit-cyan);
  border-color: var(--qubit-cyan);
}

.sparkline-wrap {
  margin-top: 12px;
  line-height: 0;
}

.sentiment-card-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
  text-align: center;
}

.sentiment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-drift);
  margin-bottom: 2px;
}

.sentiment-meter {
  display: block;
  margin: 0 auto;
}

.sentiment-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.sentiment-leds {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.sentiment-caption {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted-drift);
}

.led-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.3s ease;
}

.sentiment-unavailable {
  padding: 18px 0 6px;
  color: var(--muted-drift);
  font-size: 12px;
}

/* ---- Contact page ------------------------------------------------------- */

.contact-section { padding: 60px 0 90px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: start;
}

.contact-info h1 { font-size: 32px; margin-bottom: 14px; }
.contact-info .lead { margin-bottom: 0; }

.contact-trust {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 34px;
}

.contact-trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--muted-drift);
}

.contact-trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--qubit-cyan);
  margin-top: 2px;
}

/* Honeypot — off-screen rather than display:none, since some bots skip
   fields with display:none but still fill in anything visually hidden
   by being positioned off-canvas. Real visitors never see or reach it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.g-recaptcha { margin-bottom: 20px; }

.plan-card {
  padding: 26px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Same quantum-field/glow treatment as .feature-vertical, scaled down to
   fit a compact card instead of a full banner. */
.plan-card .quantum-glow-a,
.plan-card .quantum-glow-b {
  width: 160px;
  height: 160px;
  filter: blur(36px);
}
.plan-card .quantum-glow-a { top: -40px; left: -30px; }
.plan-card .quantum-glow-b { bottom: -50px; right: -30px; }

.plan-card-content { position: relative; z-index: 1; }

.plan-price {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--signal-white);
}

.plan-glyph {
  width: 128px;
  height: 128px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(63, 224, 197, 0.16), rgba(var(--qubit-violet-rgb), 0.16));
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.plan-glyph svg { width: 64px; height: 64px; }

/* ---- Signals / predictions ------------------------------------------ */

.signal-disclaimer {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--muted-drift);
  margin-bottom: 24px;
  max-width: 70ch;
}

.consensus-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--void);
}

.consensus-bar span { display: block; height: 100%; }

.consensus-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted-drift);
}

.consensus-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 13.5px;
}

.signal-row:last-child { border-bottom: none; }

.signal-row .label { color: var(--muted-drift); }

.signal-row .value { font-family: var(--font-mono); font-weight: 600; }

.signal-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.signal-badge-bullish { color: var(--qubit-cyan); border-color: rgba(63, 224, 197, 0.35); background: rgba(63, 224, 197, 0.08); }
.signal-badge-bearish { color: var(--collapse-coral); border-color: rgba(255, 107, 129, 0.35); background: rgba(255, 107, 129, 0.08); }
.signal-badge-neutral { color: var(--muted-drift); border-color: var(--border-faint); background: rgba(255, 255, 255, 0.02); }

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--border-faint);
  color: var(--muted-drift);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
  flex-shrink: 0;
}

.btn-refresh:hover { color: var(--signal-white); border-color: var(--qubit-cyan); }

.btn-refresh svg { width: 13px; height: 13px; }

.btn-refresh.is-refreshing svg { animation: spin 0.7s linear infinite; }

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

/* ---- Live badge ----------------------------------------------------------- */

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-drift);
}

.live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qubit-cyan);
  box-shadow: 0 0 6px var(--qubit-cyan);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Muted, static dot for cards/rows whose live connection hasn't
   confirmed yet (or has dropped) — visually distinct from the cyan
   pulsing dot once streaming is actually confirmed. */
.live-badge.is-pending .dot {
  background: var(--muted-drift);
  box-shadow: none;
  animation: none;
}

/* =========================================================================
   App footer (dashboard, portfolio, charts, etc. — the logged-in shell)
   ========================================================================= */

.app-footer {
  position: relative;
  margin-top: 56px;
  padding-top: 36px;
  overflow: hidden;
}

.app-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qubit-cyan) 20%, var(--qubit-violet) 50%, var(--qubit-cyan) 80%, transparent);
  background-size: 200% 100%;
  animation: footer-shimmer 6s linear infinite;
  opacity: 0.55;
}

@keyframes footer-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.app-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}

.app-footer-brand .brand { margin-bottom: 14px; }

.app-footer-brand p {
  color: var(--muted-drift);
  font-size: 13px;
  max-width: 36ch;
  margin-bottom: 18px;
}

.app-footer-heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-drift);
  margin-bottom: 14px;
}

.app-footer-col { display: flex; flex-direction: column; }

.app-footer-col a {
  color: var(--muted-drift);
  font-size: 13.5px;
  margin-bottom: 11px;
  transition: color 0.15s var(--ease);
  width: fit-content;
}

.app-footer-col a:hover { color: var(--qubit-cyan); }

.app-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 0 28px;
  border-top: 1px solid var(--border-faint);
  color: var(--muted-drift);
  font-size: 12.5px;
}

.app-footer-clock {
  color: var(--muted-drift);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--muted-drift);
  font-size: 12px;
  font-family: var(--font-body);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.back-to-top:hover {
  color: var(--signal-white);
  border-color: var(--qubit-cyan);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .app-footer-top { grid-template-columns: 1fr 1fr; }
  .app-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .app-footer-top { grid-template-columns: 1fr; }
  .app-footer-bottom { justify-content: center; text-align: center; }
}

/* =========================================================================
   Admin panel
   Deliberately brown-forward (vs. the marketing pages' blue and the
   member app's teal) so it's visually unmistakable which area you're in.
   ========================================================================= */

.admin-shell,
.admin-login-screen {
  --qubit-violet: #b8763f;
  --qubit-violet-rgb: 184, 118, 63;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qubit-violet);
  border: 1px solid rgba(var(--qubit-violet-rgb), 0.4);
  background: rgba(var(--qubit-violet-rgb), 0.08);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ---- Admin login ---------------------------------------------------- */

.admin-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--qubit-violet-rgb), 0.16) 0%, transparent 60%),
    var(--void);
}

.admin-login-card { width: 100%; max-width: 400px; }

.admin-login-card .brand { margin-bottom: 22px; }

.admin-login-card h1 { font-size: 22px; margin-bottom: 6px; }

.admin-login-card .subhead {
  color: var(--muted-drift);
  font-size: 14px;
  margin-bottom: 28px;
}

/* ---- Admin shell (sidebar + main) ------------------------------------ */

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  border-right: 1px solid var(--border-faint);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--qubit-violet-rgb), 0.1), transparent 45%), var(--deep-field);
  position: relative;
}

.admin-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--qubit-violet-rgb), 0.6), transparent);
}

.admin-sidebar .brand { margin-bottom: 6px; }

.admin-sidebar-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qubit-violet);
  margin-bottom: 34px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--muted-drift);
  border-left: 2px solid transparent;
  margin-bottom: 4px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.admin-nav-link:hover { color: var(--signal-white); background: var(--panel); }

.admin-nav-link.active {
  color: var(--signal-white);
  background: var(--panel);
  border-left-color: var(--qubit-violet);
  box-shadow: inset 0 0 16px rgba(var(--qubit-violet-rgb), 0.12);
}

.admin-nav-link .nav-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; opacity: 0.8; }
.admin-nav-link .nav-icon svg { width: 100%; height: 100%; }
.admin-nav-link.active .nav-icon { opacity: 1; color: var(--qubit-violet); }

.admin-sidebar-footer { margin-top: auto; }

.admin-main { padding: 32px 40px 60px; min-width: 0; }

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.admin-topbar h1 { font-size: 22px; margin: 0; }

.admin-mobile-topbar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--deep-field);
  position: sticky;
  top: 0;
  z-index: 999;
}

.admin-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--signal-white);
}

.admin-menu-toggle svg { width: 20px; height: 20px; }
.admin-menu-toggle:hover { border-color: var(--qubit-violet); }

.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 7, 15, 0.65);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

/* ---- Admin dashboard widgets ------------------------------------------ */

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.admin-stat-card { padding: 20px; }

.admin-stat-card .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-drift);
  margin-bottom: 8px;
}

.admin-stat-card .value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
}

.admin-section {
  margin-bottom: 32px;
}

.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-section-head h2 { font-size: 17px; margin: 0; }

.activity-row {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 13.5px;
}
.activity-row:last-child { border-bottom: none; }
.activity-row .who { color: var(--signal-white); font-weight: 600; flex-shrink: 0; }
.activity-row .action { color: var(--muted-drift); flex: 1; }
.activity-row .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-drift); flex-shrink: 0; white-space: nowrap; }

/* ---- Admin forms / settings groups ------------------------------------- */

.settings-group { padding: 22px 24px; margin-bottom: 20px; }

.settings-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.settings-group-head h3 { font-size: 15.5px; margin: 0; }
.settings-group-head p { font-size: 12.5px; margin: 4px 0 0; }

.env-field { margin-bottom: 18px; }
.env-field:last-child { margin-bottom: 0; }

.env-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-drift);
  margin-bottom: 4px;
}

.env-field .env-help {
  font-size: 12px;
  color: var(--muted-drift);
  margin-bottom: 8px;
}

.env-input-row { display: flex; gap: 8px; }

.env-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--signal-white);
  font-family: var(--font-mono);
  font-size: 14px;
}

.env-input-row input:focus { border-color: var(--qubit-violet); outline: none; }

.env-toggle-visibility {
  flex-shrink: 0;
  width: 42px;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--muted-drift);
}

.env-toggle-visibility:hover { color: var(--signal-white); border-color: var(--qubit-violet); }

.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted-drift);
}

/* ---- Plan cards (admin management view) -------------------------------- */

.admin-plan-card { padding: 20px; position: relative; }
.admin-plan-card.is-inactive { opacity: 0.55; }

.admin-plan-card .featured-tag {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* =========================================================================
   Admin panel responsive
   ========================================================================= */

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-main { padding: 24px 20px 40px; }
  .admin-mobile-topbar { display: flex; }

  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    overflow-y: auto;
  }

  .admin-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
  }

  .admin-sidebar-overlay { display: block; }
  .admin-sidebar-overlay.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 560px) {
  .env-input-row { flex-wrap: wrap; }
}

/* =========================================================================
   Mobile nav base styles (hidden by default; media queries below turn them
   on). These MUST come before the @media blocks — equal-specificity CSS
   rules are resolved by source order, not by which one is inside a media
   query, so a later unconditional rule would silently beat an earlier
   conditional one.
   ========================================================================= */

.app-mobile-topbar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--deep-field);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Backdrop behind the mobile sidebar drawer. display:none by default (and
   position:fixed once shown) so it never becomes a stray grid item inside
   .app-shell on desktop. */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 7, 15, 0.65);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--signal-white);
}

.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle:hover { border-color: var(--qubit-cyan); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .app-main { padding: 24px 20px 40px; }

  /* Sidebar becomes an off-canvas drawer, opened via the mobile topbar */
  .app-mobile-topbar { display: flex; }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    overflow-y: auto;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
  }

  .sidebar-overlay { display: block; }
  .sidebar-overlay.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }

  /* Marketing nav collapses into a hamburger-triggered dropdown */
  .site-nav-actions { display: none; }
  .site-nav-toggle { display: inline-flex; }

  /* The 2x brand mark (56px icon / 36px text) never got a mobile pass —
     at this width it crowds the 40px hamburger button and can overflow
     a narrow phone screen. Scaled down proportionally, not just capped,
     so the icon:text ratio (and the pulled-in "one wordmark" spacing)
     still reads the same as the desktop version. Doesn't need its own
     selector scope beyond plain .brand — .app-shell/.admin-shell's
     sidebar-context rules already win on specificity regardless of
     viewport, so this only ever applies to the marketing site-nav. */
  .brand { font-size: 16px; gap: 0; }
  .brand-mark { width: 24px; height: 24px; margin-right: -2px; }

  .site-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index: 50;
  }

  .site-nav-links.is-open { display: flex; }

  .site-nav-links a { padding: 11px 12px; border-radius: var(--radius-sm); }
  .site-nav-links a:hover { background: var(--panel-raised); }

  .site-nav-actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-faint);
  }
}

/* Prevent background scroll while the mobile sidebar drawer is open */
body.no-scroll { overflow: hidden; }

/* =========================================================================
   AI assistant — floating widget (member pages) + full assistant page
   ========================================================================= */

.ai-widget-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet));
  border: none;
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(63, 224, 197, 0.35);
  transition: transform 0.15s var(--ease);
}

.ai-widget-toggle:hover { transform: scale(1.06); }
.ai-widget-toggle svg { width: 26px; height: 26px; }

.ai-widget-toggle .ai-unread-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--collapse-coral);
  border: 2px solid var(--void);
  display: none;
}

.ai-widget-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 1200;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: var(--deep-field);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.ai-widget-window.is-open { display: flex; }

.ai-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-faint);
  background: linear-gradient(180deg, rgba(63, 224, 197, 0.07), transparent);
}

.ai-widget-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
}

.ai-widget-header-title .ai-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet));
  flex-shrink: 0;
}

.ai-widget-header-actions { display: flex; align-items: center; gap: 6px; }

.ai-widget-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted-drift);
  border-radius: var(--radius-sm);
}

.ai-widget-icon-btn:hover { color: var(--signal-white); background: var(--panel); }
.ai-widget-icon-btn svg { width: 16px; height: 16px; }

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-message { display: flex; gap: 9px; max-width: 100%; }
.ai-message-user { flex-direction: row-reverse; }

.ai-message-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.ai-message-assistant .ai-message-avatar { background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet)); color: var(--void); }
.ai-message-user .ai-message-avatar { background: var(--panel-raised); color: var(--signal-white); }

.ai-message-bubble {
  padding: 10px 13px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 80%;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-message-assistant .ai-message-bubble { background: var(--panel); border: 1px solid var(--border-faint); border-top-left-radius: 4px; }
.ai-message-user .ai-message-bubble { background: rgba(63, 224, 197, 0.12); border: 1px solid rgba(63, 224, 197, 0.25); border-top-right-radius: 4px; }

.ai-message-bubble.is-error { border-color: rgba(255, 107, 129, 0.35); color: var(--collapse-coral); }

.ai-typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-drift);
  animation: ai-typing-bounce 1.2s ease-in-out infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ai-empty-state {
  margin: auto;
  text-align: center;
  color: var(--muted-drift);
  font-size: 13px;
  padding: 20px;
}

.ai-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-faint);
}

.ai-input-row textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  background: var(--void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--signal-white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}

.ai-input-row textarea:focus { border-color: var(--qubit-cyan); outline: none; }

.ai-send-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--qubit-cyan), var(--qubit-violet));
  border: none;
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-send-btn:disabled { opacity: 0.5; }
.ai-send-btn svg { width: 17px; height: 17px; }

.ai-not-configured {
  margin: auto;
  text-align: center;
  color: var(--muted-drift);
  font-size: 13px;
  padding: 24px;
}

/* ---- AI Assistant hero banner --------------------------------------------
   Decorative electric-brain visual is intentionally cyan/blue duotone via
   hardcoded hex rather than var(--qubit-violet), since dashboard-skin.css
   retires violet to a deep teal inside .app-shell — too close to cyan to
   keep the two-tone network readable here. */

.ai-hero {
  position: relative;
  overflow: visible;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-faint);
  background: var(--deep-field);
  padding: 23px 36px;
  margin-bottom: 24px;
}

.ai-hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ai-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: ai-hero-pulse 6s ease-in-out infinite;
}

.ai-hero-glow-a {
  width: 420px; height: 420px;
  /* Nudged toward the brain's new position (top/right, not transform —
     .ai-hero-glow's animation already animates transform: scale(), and a
     static transform here would just get overridden by that every
     frame). Only a partial shift, not the brain's full -200px/+10px —
     these blobs had their own offset from the brain by design, and
     matching the brain's shift exactly put this one too far left,
     off past the brain into the text column. */
  top: -160px; right: 40px;
  background: radial-gradient(circle, #3fe0c5, transparent 70%);
}

.ai-hero-glow-b {
  width: 300px; height: 300px;
  /* right:227px centers this horizontally on the brain's current
     translate(-200px, ...) position, worked out from the brain column's
     fixed 280px width/placement — not just another incremental nudge. */
  bottom: -170px; right: 227px;
  /* Site's actual cyan/green brand accent, not a generic green — same
     token .ai-hero-glow-a uses. Own keyframes (not the shared
     ai-hero-pulse) so its fade speed/opacity can differ from glow-a's
     without touching that one. */
  background: radial-gradient(circle, var(--qubit-cyan), transparent 70%);
  animation: ai-hero-pulse-slow 30s linear infinite;
  animation-delay: 2s;
  /* Without this, the 2s delay above renders at the element's default
     opacity (1 — fully opaque, nothing else sets a base opacity here)
     before the animation starts, then snaps down to the 0% keyframe's
     0.07 the instant it kicks in — a 2s flash at full brightness
     followed by an abrupt drop, not an actual fast fade. */
  animation-fill-mode: backwards;
}

@keyframes ai-hero-pulse-slow {
  0%, 100% { opacity: 0.07; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.15); }
}

@keyframes ai-hero-pulse {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50% { opacity: 0.32; transform: scale(1.15); }
}

.ai-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Fixed width for the brain column (just past its own 260px cap) instead
     of a fraction, so the text column gets whatever's left over — that's
     what actually gives the paragraph real width to wrap into, rather than
     being capped to roughly half the card regardless of how much empty
     space sits to its right. */
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 20px;
}

.ai-hero-copy {
  max-width: 915px;
}

.ai-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qubit-cyan);
  margin-bottom: 10px;
}

.ai-hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--qubit-cyan);
  box-shadow: 0 0 8px var(--qubit-cyan);
  animation: ai-dot-pulse 2s ease-in-out infinite;
}

@keyframes ai-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ai-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 29px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--signal-white);
}

.ai-hero h1 .accent { color: var(--qubit-cyan); }

.ai-hero p.lead {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-drift);
  max-width: none;
  margin: 0 0 10px;
}

.ai-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.ai-hero-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--signal-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-faint);
  border-radius: 100px;
  padding: 4px 11px;
}

.ai-hero-disclaimer {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-drift);
  max-width: 58ch;
}

.ai-hero-disclaimer svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 2px;
  color: var(--collapse-coral);
  opacity: 0.85;
}

.ai-brain-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin-inline: auto;
  transform: translate(-200px, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was unconstrained-width before, so aspect-ratio made the wrapper (and
     therefore the whole card, via align-items: center) match the grid
     column's full width — 500+px tall on a wide screen. Capping max-width
     here (not just on the svg) is the real fix; margin-block bleed is now
     modest since there's much less height to bleed off in the first place. */
  margin-block: -55px;
}

.ai-brain-wrap svg { width: 100%; height: 100%; max-width: 260px; }

.brain-outline {
  animation: brain-outline-flicker 4s ease-in-out infinite;
}

@keyframes brain-outline-flicker {
  0%, 100% { opacity: 0.7; }
  45% { opacity: 0.9; }
  50% { opacity: 0.55; }
  55% { opacity: 0.9; }
}

.brain-node {
  animation: brain-node-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.brain-node:nth-child(2n) { animation-delay: 0.15s; }
.brain-node:nth-child(3n) { animation-delay: 0.3s; }
.brain-node:nth-child(4n) { animation-delay: 0.5s; }
.brain-node:nth-child(5n) { animation-delay: 0.7s; }
.brain-node:nth-child(7n) { animation-delay: 0.9s; }

@keyframes brain-node-pulse {
  0%, 100% { opacity: 0.5; r: 2.6; }
  50% { opacity: 1; r: 4.4; }
}

.brain-core { animation: brain-core-pulse 1.4s ease-in-out infinite; }

@keyframes brain-core-pulse {
  0%, 100% { r: 6; opacity: 0.85; }
  50% { r: 9; opacity: 1; }
}

.brain-line {
  stroke-dasharray: 3 4;
  animation: brain-line-flow 1.4s linear infinite, brain-line-flicker 2.6s ease-in-out infinite;
}
.brain-line:nth-child(3n) { animation-duration: 1.1s, 3.1s; }
.brain-line:nth-child(3n+1) { animation-duration: 1.7s, 2.2s; animation-delay: 0.3s, 0.6s; }
.brain-line:nth-child(5n) { animation-duration: 0.9s, 1.9s; animation-delay: 0.1s, 0.4s; }

@keyframes brain-line-flow {
  to { stroke-dashoffset: -14; }
}

@keyframes brain-line-flicker {
  0%, 100% { opacity: 0.75; }
  40% { opacity: 0.25; }
  50% { opacity: 0.9; }
  60% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero-glow, .ai-hero-eyebrow .dot, .brain-node, .brain-core, .brain-line, .brain-outline {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .ai-hero-inner { grid-template-columns: 1fr; }
  .ai-hero h1 { white-space: normal; }
  .ai-brain-wrap { max-width: 260px; margin: 0 auto; transform: none; }
}

/* ---- Full assistant page ------------------------------------------------ */

.ai-page-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  height: calc(100vh - 220px);
  min-height: 500px;
}

.ai-history-panel {
  background: var(--deep-field);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow-y: auto;
}

.ai-history-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }

.ai-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted-drift);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.ai-history-item:hover { background: var(--panel); color: var(--signal-white); }
.ai-history-item.active { background: var(--panel); color: var(--signal-white); border-left: 2px solid var(--qubit-cyan); }
.ai-history-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.ai-history-item-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--muted-drift);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}

.ai-history-item:hover .ai-history-item-delete { opacity: 1; }
.ai-history-item-delete:hover { color: var(--collapse-coral); background: rgba(255, 107, 129, 0.14); transform: scale(1.08); }
.ai-history-item-delete svg { width: 18px; height: 18px; }

.ai-chat-panel {
  background: var(--deep-field);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-panel .ai-messages { padding: 24px; }
.ai-chat-panel .ai-message-bubble { font-size: 14.5px; max-width: 72%; }
.ai-chat-panel .ai-input-row { padding: 16px 20px; }

@media (max-width: 900px) {
  .ai-page-shell { grid-template-columns: 1fr; height: auto; }
  .ai-history-panel { max-height: 220px; }
  .ai-chat-panel { height: 560px; }

  .ai-widget-window {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    bottom: 84px;
  }

  .ai-widget-toggle { right: 16px; bottom: 16px; }
}

/* ---- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}