/* FAVI Audio Lab — DAW-Grade Consciousness Interface
   Inspired by: Ableton (density), Logic Pro (polish), Bitwig (semantic color) */
:root {
  /* ═══ SURFACE HIERARCHY (8-12 point steps, Ableton-style) ═══ */
  --bg-deepest:     #0d0d14;    /* Body — near-black with purple tint */
  --bg-primary:     #14141e;    /* Main workspace panels */
  --bg-secondary:   #1c1c28;    /* Elevated panels, sidebars */
  --bg-tertiary:    #252532;    /* Cards, device surfaces */
  --bg-elevated:    #2e2e3c;    /* Popups, tooltips, modals */
  --bg-hover:       #36364a;    /* Hover states */

  /* Legacy aliases (backward compat with existing code) */
  --void: #0d0d14;
  --nebula: #14141e;
  --astral: #1c1c28;
  --portal: #252532;
  --surface: #14141e;
  --surface2: #1c1c28;

  /* ═══ BORDERS (transparency-based, not solid colors) ═══ */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border: rgba(255, 255, 255, 0.10);

  /* ═══ TEXT HIERARCHY ═══ */
  --text-primary:   #e8e8ec;
  --text-secondary: #a0a0a8;
  --text-tertiary:  #6b6b74;
  --text-disabled:  #45454d;
  --text: #e8e8ec;
  --muted: #a0a0a8;

  /* ═══ NEUPHORIA BRAND ═══ */
  --accent: #EB0D8A;
  --accent2: #24A5EB;
  --accent3: #FFD700;
  --brand-purple: #8635A0;
  --brand-magenta: #EB0D8A;
  --brand-blue: #24A5EB;
  --brand-navy: #0d0d14;

  /* ═══ SEMANTIC COLORS — No Crossover Palette ═══ */
  /* Each domain has its own unique hue. No color is shared across domains. */
  --sem-audio:      #f97316;    /* Audio signals, waveforms — ORANGE */
  --sem-audio-line: #fb923c;    /* Audio overlay line — LIGHT ORANGE */
  --sem-brain:      #06b6d4;    /* Brain/EEG data — CYAN */
  --sem-brain-line: #22d3ee;    /* Brain data overlay line — LIGHT CYAN */
  --sem-binaural:   #34d399;    /* Binaural beat indicators — EMERALD */
  --sem-spatial:    #e87d2a;    /* Spatial/HRTF paths — BURNT ORANGE */
  --sem-neural:     #c084fc;    /* EEG / neural processing — LAVENDER */
  --sem-energy:     #fb923c;    /* Energy metrics — TANGERINE */
  --sem-session:    #8b5cf6;    /* Session number/ID — VIOLET */
  --sem-danger:     #ef4444;    /* Record, warnings, clip — RED */
  --sem-success:    #10b981;    /* Active, running, connected — EMERALD GREEN */
  --sem-caution:    #eab308;    /* Solo, attention — YELLOW */

  /* ═══ CONSCIOUSNESS STATE COLORS ═══ */
  --c0: #6b7280;  /* Scattered Mind — neutral grey */
  --c1: #3b82f6;  /* Present Wakefulness — blue */
  --c2: #8b5cf6;  /* Calm Awareness — violet */
  --c3: #a855f7;  /* Creative Flow — purple */
  --c4: #d946ef;  /* Deep Stillness — magenta */
  --c5: #ec4899;  /* The Activator — pink */
  --c6: #fbbf24;  /* Transcendent Coherence — GOLD (distinct from audio orange) */

  /* ═══ PHASE COLORS (Ableton clip-color inspired) ═══ */
  --phase-settle:   #5b8def;
  --phase-build:    #7c5cbf;
  --phase-peak:     #d946ef;
  --phase-rest:     #10b981;    /* was #22c55e — now emerald green (sem-success) */
  --phase-surface:  #eab308;
  --phase-hold:     #0ea5e9;    /* was #4a9ede — now sky blue (matches depth) */
  --phase-spatial:  #e87d2a;

  /* ═══ UCI METRIC COLORS — each unique, no overlap ═══ */
  --uci-score: var(--brand-magenta);   /* #EB0D8A — magenta */
  --uci-depth: #0ea5e9;                /* SKY BLUE — was #4a9ede */
  --uci-stability: #14b8a6;            /* TEAL — was #22c55e green */
  --uci-bursts: #fbbf24;               /* GOLD — matches C6 (intentional) */
  --uci-coherence: #06b6d4;            /* CYAN — was #00c896 green */
  --uci-combined: #c084fc;             /* LAVENDER — unchanged */

  /* ═══ VU METER GRADIENT ═══ */
  --meter-low:      #22c55e;
  --meter-mid:      #eab308;
  --meter-high:     #ef4444;
  --meter-peak:     #ff6b6b;

  /* ═══ FONTS ═══ */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ═══ SPACING (8px grid) ═══ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;

  /* ═══ TRACK DIMENSIONS ═══ */
  --track-height: 48px;
  --track-header-width: 200px;
  --meter-width: 3px;
  --knob-sm: 20px;
  --knob-md: 28px;
  --knob-lg: 40px;

  /* ═══ GLOW EFFECTS (active elements only) ═══ */
  --glow-magenta: 0 0 12px rgba(235, 13, 138, 0.25);
  --glow-blue: 0 0 12px rgba(74, 158, 222, 0.25);
  --glow-gold: 0 0 12px rgba(245, 158, 11, 0.25);
  --glow-purple: 0 0 12px rgba(192, 132, 252, 0.25);
  --glow-green: 0 0 12px rgba(34, 197, 94, 0.25);

  /* ═══ GLASS (special panels only) ═══ */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-blur: 16px;
}

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

/* ── Mode Switcher ── */
.mode-switcher {
  display: flex; gap: 0; background: var(--surface2);
  border-radius: 8px; border: 1px solid var(--border);
  padding: 2px; margin-left: 16px;
}
.mode-btn {
  padding: 5px 14px; background: transparent; border: none;
  color: var(--muted); font-size: 11px; font-weight: 600;
  cursor: pointer; border-radius: 6px; transition: all 0.2s;
  letter-spacing: 0.3px; white-space: nowrap;
}
.mode-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.mode-btn.active { background: var(--accent); color: #fff; }
.mode-btn[data-mode="engineer"].active { background: var(--uci-combined); color: #fff; }
.mode-btn[data-mode="guided"].active { background: var(--accent2); color: #fff; }

/* ── Upgraded Button Classes ── */
.favi-btn { padding: 8px 18px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.favi-btn-primary { background: var(--accent); color: #fff; }
.favi-btn-primary:hover { background: #d4097a; }
.favi-btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.favi-btn-secondary:hover { background: #2D1B4E; }
.favi-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.favi-btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.favi-btn-danger { background: #f87171; color: #fff; }
.favi-btn-play { background: #34d399; color: #fff; min-width: 120px; font-size: 16px; border-radius: 12px; padding: 14px 28px; }
.favi-btn-stop { background: #f87171; color: #fff; font-size: 16px; border-radius: 12px; padding: 14px 24px; }

/* ── Upgraded Card Classes ── */
.favi-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--sp-4); margin-bottom: var(--sp-3); transition: transform 0.15s, box-shadow 0.15s; }
.favi-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.favi-card-accent { border-top: 3px solid var(--accent); }
.favi-card-gold { border-top: 3px solid var(--accent3); }
.favi-card-purple { border-top: 3px solid var(--uci-combined); }
.favi-card-green { border-top: 3px solid var(--accent2); }

/* ── Section Headers ── */
.favi-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.favi-section-icon { font-size: 18px; }
.favi-section-title { font-size: 16px; font-weight: 700; color: var(--text); }
.favi-section-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Preset Cards (Explorer Mode) ── */
.preset-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; cursor: pointer;
  transition: all 0.2s; position: relative; overflow: hidden;
}
.preset-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.preset-card.active { border-color: var(--accent); background: linear-gradient(135deg, var(--surface) 0%, rgba(34,211,238,0.05) 100%); }
.preset-card-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.preset-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.preset-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.preset-card-badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }

/* ── Guided Mode Cards ── */
.guided-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: all 0.2s;
}
.guided-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: var(--accent); }
.guided-card-icon { font-size: 36px; margin-bottom: 10px; }
.guided-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.guided-card-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Focus visible for accessibility ── */
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Range Slider Styling ── */
/* Slider — Ableton thin-track style */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  border: none;
}
/* v240: Professional slider styling — round dot, centered on track, consistent everywhere */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 20px; /* touch-friendly but not oversized */
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50% !important; /* force round everywhere */
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  border: 2px solid var(--bg-deepest);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  transition: transform 0.12s, box-shadow 0.12s;
  margin-top: -6px; /* center on 4px track: -(16-4)/2 = -6 */
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 1px 6px rgba(0,0,0,0.5), 0 0 8px rgba(235,13,138,0.3);
}
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.1);
  background: linear-gradient(135deg, #EB0D8A 0%, #f59e0b 100%);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  border: 2px solid var(--bg-deepest);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  border: none;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 2px rgba(235,13,138,0.4);
}

html, body {
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--bg-deepest);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
  word-break: break-word;
  font-variant-numeric: tabular-nums; /* Numbers don't jump — DAW standard */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Glassmorphism Card ── */
.glass-card {
  background: rgba(18, 11, 30, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(235, 13, 138, 0.1);
  border-radius: 12px;
  transition: all 0.2s;
}
.glass-card:hover {
  border-color: rgba(235, 13, 138, 0.25);
  box-shadow: var(--glow-magenta);
}

/* ── UCI Score Display ── */
.uci-score-hero {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-magenta), var(--brand-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.uci-label {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 600;
}

/* ── Consciousness State Badges ── */
.c-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-display);
}
.c-state-badge.c0 { background: rgba(100,116,139,0.15); color: var(--c0); }
.c-state-badge.c1 { background: rgba(148,163,184,0.15); color: var(--c1); }
.c-state-badge.c2 { background: rgba(59,130,246,0.15); color: var(--c2); }
.c-state-badge.c3 { background: rgba(6,182,212,0.15); color: var(--c3); }
.c-state-badge.c4 { background: rgba(16,185,129,0.15); color: var(--c4); }
.c-state-badge.c5 { background: rgba(168,85,247,0.15); color: var(--c5); }
.c-state-badge.c6 { background: rgba(251,191,36,0.15); color: var(--c6); }

/* ── Focus Level Cards ── */
.focus-card {
  background: var(--nebula);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.focus-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,0,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.focus-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--glow-magenta);
}
.focus-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(235, 13, 138, 0.2);
}

/* ── Section Headers (Display font) ── */
.section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* ── C6 Breakdown Cards ── */
.c6-card {
  background: var(--nebula);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.c6-card.bursts { border-top: 3px solid var(--uci-bursts); }
.c6-card.coherence { border-top: 3px solid var(--uci-coherence); }
.c6-card.combined { border-top: 3px solid var(--uci-combined); }
.c6-hero-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

/* ── Psychedelic Gradient Borders ── */
.gradient-border {
  position: relative;
  border: none !important;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #FF00FF, #00FFAB, #FFD700);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.2s;
}
.gradient-border:hover::before { opacity: 0.6; }

/* ═══ DAW-GRADE COMPONENTS ═══ */

/* Transport Bar — Ableton-clean */
.daw-transport {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 44px;
  padding: 0 var(--sp-4);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.daw-transport-btn {
  width: 28px; height: 28px; border-radius: 4px;
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer;
  font-size: 14px; transition: all 120ms ease;
  display: flex; align-items: center; justify-content: center;
}
.daw-transport-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.daw-transport-btn.playing { color: var(--sem-success); }
.daw-transport-btn.recording { color: var(--sem-danger); }
.daw-timer {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  min-width: 100px;
}

/* Track Header — 4px color bar on left (Pro Tools) */
.daw-track {
  display: flex; align-items: center;
  height: var(--track-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--sp-2);
}
.daw-track-color {
  width: 4px; height: 100%; flex-shrink: 0;
  border-radius: 0 2px 2px 0;
}
.daw-track-name {
  font-size: 12px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.daw-track-btn {
  width: 18px; height: 18px; font-size: 9px; font-weight: 700;
  border-radius: 3px; border: none;
  background: rgba(255,255,255,0.06); color: var(--text-tertiary);
  text-align: center; line-height: 18px; cursor: pointer;
}
.daw-track-btn.solo.active { background: var(--sem-caution); color: #fff; }
.daw-track-btn.mute.active { background: var(--sem-danger); color: #fff; }

/* VU Meter — Pro Tools LED gradient */
.daw-meter {
  width: var(--meter-width); height: 100%;
  background: var(--bg-deepest); border-radius: 1px;
  overflow: hidden; position: relative;
}
.daw-meter-fill {
  position: absolute; bottom: 0; width: 100%;
  background: linear-gradient(to top,
    var(--meter-low) 0%, var(--meter-low) 60%,
    var(--meter-mid) 80%, var(--meter-high) 95%,
    var(--meter-peak) 100%);
  transition: height 50ms linear; border-radius: 1px;
}
.daw-meter-peak {
  position: absolute; width: 100%; height: 1px;
  background: var(--meter-peak);
  transition: bottom 50ms linear;
}

/* Parameter Value — JetBrains Mono */
.daw-value {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.daw-label {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.daw-section-header {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

/* Phase Chips — colored left border (Ableton clip style) */
.phase-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-tertiary);
  border-radius: 4px;
  border-left: 3px solid var(--phase-settle);
  font-size: 11px; font-weight: 500;
  color: var(--text-primary);
}
.phase-chip.settle  { border-left-color: var(--phase-settle); }
.phase-chip.build   { border-left-color: var(--phase-build); }
.phase-chip.peak    { border-left-color: var(--phase-peak); }
.phase-chip.rest    { border-left-color: var(--phase-rest); }
.phase-chip.surface { border-left-color: var(--phase-surface); }
.phase-chip.hold    { border-left-color: var(--phase-hold); }
.phase-chip.spatial { border-left-color: var(--phase-spatial); }

.phase-chip .phase-dur {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text-tertiary);
}

/* Glass Panel — for spatial viz and EEG overlays ONLY */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
  overflow: hidden;
}

/* Knob — modern arc style */
.daw-knob {
  width: var(--knob-md); height: var(--knob-md);
  position: relative; cursor: grab;
}
.daw-knob-track {
  fill: none; stroke: rgba(255,255,255,0.08);
  stroke-width: 3; stroke-linecap: round;
}
.daw-knob-value {
  fill: none; stroke: var(--accent);
  stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(235, 13, 138, 0.3));
}

/* Waveform / Timeline */
.daw-timeline {
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  position: relative; overflow: hidden;
}
.daw-grid-line {
  position: absolute; width: 1px;
  background: rgba(255,255,255,0.06);
  top: 0; bottom: 0;
}
.daw-playhead {
  position: absolute; width: 1px;
  background: var(--accent);
  top: 0; bottom: 0;
  box-shadow: 0 0 6px rgba(235, 13, 138, 0.4);
  z-index: 10;
}

/* Semantic Signal Indicators */
.signal-audio    { color: var(--sem-audio); }
.signal-binaural { color: var(--sem-binaural); }
.signal-spatial  { color: var(--sem-spatial); }
.signal-neural   { color: var(--sem-neural); }

/* Active element glow (playing/recording only) */
.glow-active {
  box-shadow: var(--glow-magenta);
  border-color: var(--brand-magenta) !important;
}

/* EEG Plasma Colormap for brain data */
.eeg-min     { color: #0d0887; }
.eeg-low     { color: #5302a3; }
.eeg-mid-low { color: #8b0aa5; }
.eeg-mid     { color: #cc4778; }
.eeg-mid-hi  { color: #ed7953; }
.eeg-high    { color: #fdb42f; }
.eeg-max     { color: #f0f921; }

/* Auth Gate */
#auth-gate {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--void);
}

.auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.auth-box h1 {
  font-size: 24px;
  margin-bottom: 8px;
  /* v382: was var(--accent) (magenta) — looked cheap. White matches the
     tier-1 brand treatment used on Home + Session hero titles. */
  color: var(--text-primary, #fff);
}

.auth-box p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

#auth-form input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

#auth-form input:focus {
  border-color: var(--accent);
}

#auth-submit {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#auth-submit:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════ */
.sidebar {
  position: fixed;
  left: 0; top: var(--favi-chrome-h, 0px); bottom: 0;
  width: 220px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.sidebar.collapsed {
  width: 52px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 52px;
  position: relative;
}
.sidebar-logo {
  height: 28px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.sidebar.collapsed .sidebar-logo { display: none; }
.sidebar.collapsed .sidebar-header { padding: 12px 6px; justify-content: center; }
.sidebar-brand {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-magenta);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-brand { display: none; }
.sidebar-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.2s;
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--text-primary); }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); margin-left: 0; }

.sidebar-section {
  padding: 8px 8px 4px;
}
.sidebar-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  padding: 4px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-section-label {
  font-size: 0;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 6px 4px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}

/* v445-pilot6: single source of truth for admin/tester visibility.
   Previously each element relied on inline style="display:none" + a JS
   reveal. If the reveal didn't run (e.g. ADMIN_EMAILS undefined at the
   moment, or claims event firing before AppState loaded), elements
   stayed hidden forever. Now: hide-by-default in CSS, body class drives
   reveal — so the worst case is "no class set" which is the same as today,
   but the moment we set body.is-admin everything flips on, no per-element
   inline style mutation required. The legacy JS reveal still runs as a
   belt-and-braces no-op (clears any leftover inline display:none). */
.favi-admin-only { display: none !important; }
body.is-admin .favi-admin-only { display: flex !important; }
body.is-admin .sidebar-section.favi-admin-only { display: block !important; }
body.is-admin .mode-switcher.favi-admin-only { display: flex !important; }
.favi-tester-only { display: none !important; }
body.is-tester .favi-tester-only { display: flex !important; }
/* v445-pilot520 — scoped Brain Training allowlist. Reveals BT-only
   surfaces (sidebar entry, Explore-page rail tile) for admins AND
   collaborators listed in favi-auth.js BRAIN_TRAIN_EMAILS. Admins
   already pass via .favi-admin-only — this class is for the scoped
   non-admin case. */
.favi-bt-only { display: none !important; }
body.is-bt-allowed .favi-bt-only { display: flex !important; }
body.is-admin .favi-bt-only { display: flex !important; }
.sidebar-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.sidebar-item.active {
  background: rgba(235, 13, 138, 0.1);
  color: var(--brand-magenta);
}
.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.collapsed .sidebar-label { display: none; }

.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.sidebar.collapsed .sidebar-badge { display: none; }

.sidebar-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar.collapsed .sidebar-footer { padding: 8px 6px; text-align: center; }

/* ═══ MAIN CONTENT (shifted by sidebar) ═══ */
.app-main {
  margin-left: 220px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: calc(100vw - 220px);
  transition: margin-left 0.2s ease, max-width 0.2s ease;
  overflow-x: hidden;
}
.app-main.sidebar-collapsed {
  margin-left: 52px;
  max-width: calc(100vw - 52px);
}
.sidebar-open-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}
.sidebar-open-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
/* v193: unified header logo, always visible, left-justified */
.header-logo { display: block; height: 36px; }
.header-logo-mobile { display: none; } /* legacy class kept for backwards compat */

/* App Content */
#app-content {
  flex-direction: row;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-right: 0;
}

header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.header-sub {
  font-size: 12px;
  color: var(--muted);
}

.sign-out-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.sign-out-btn:hover {
  color: var(--text);
  border-color: var(--text);
}

main {
  flex: 1;
  padding: 12px 16px;
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* All panels — constrained to viewport */
#panel-sessions, #panel-research, #panel-admin, #panel-study, .tab-panel {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Sessions/Study panels need more breathing room */
#panel-sessions, #panel-study, #panel-research {
  padding: 8px 12px;
}

/* Guided panel — full width, centered content */
#panel-guided {
  padding: 8px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure canvases and tables don't overflow */
canvas {
  max-width: 100%;
}

table {
  table-layout: auto;
  max-width: 100%;
  word-break: break-word;
}

/* Grid containers must respect parent width */
[style*="display:grid"], [style*="display: grid"] {
  max-width: 100%;
}

.page {
  width: 100%;
}

/* Card styles used by FAVI Lab */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  max-width: 100%;
  overflow: hidden;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.sec-header {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Tab Navigation (legacy compat) */
.tab-nav { display: none; }
.tab-btn { display: none; }
.tab-panel { width: 100%; }

.sign-out-btn {
  margin-left: 0 !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ═══════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
   ═══════════════════════════════════════════ */
#favi-toast-container {
  position: fixed;
  top: calc(16px + var(--favi-chrome-h, 0px));
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
}

.favi-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: auto;
  animation: toast-in 0.3s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}

.favi-toast.toast-out {
  opacity: 0;
  transform: translateX(40px);
}

.favi-toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.favi-toast.toast-success { border-left: 3px solid #34d399; }
.favi-toast.toast-success .favi-toast-icon { color: #34d399; }

.favi-toast.toast-error { border-left: 3px solid #f87171; }
.favi-toast.toast-error .favi-toast-icon { color: #f87171; }

.favi-toast.toast-warning { border-left: 3px solid #fbbf24; }
.favi-toast.toast-warning .favi-toast-icon { color: #fbbf24; }

.favi-toast.toast-info { border-left: 3px solid var(--accent); }
.favi-toast.toast-info .favi-toast-icon { color: var(--accent); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   MODAL DIALOG SYSTEM
   ═══════════════════════════════════════════ */
.favi-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-top: calc(20px + var(--favi-chrome-h, 0px));
  animation: modal-fade-in 0.2s ease-out;
}

.favi-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 90%;
  margin: 20px 0 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modal-scale-in 0.2s ease-out;
}

.favi-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.favi-modal-body {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.favi-modal-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  margin-bottom: 16px;
}

.favi-modal-input:focus {
  border-color: var(--accent);
}

.favi-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.favi-modal-btn {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.favi-modal-btn:hover { opacity: 0.85; }

.favi-modal-btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.favi-modal-btn-confirm {
  background: var(--accent);
  color: #fff;
}

.favi-modal-btn-danger {
  background: #f87171;
  color: #fff;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════
   LOADING & SKELETON STATES
   ═══════════════════════════════════════════ */
.favi-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: favi-spin 0.6s linear infinite;
}

.favi-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

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

.favi-loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 32px;
  color: var(--muted);
  font-size: 13px;
}

.favi-skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, #1F1235 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
}

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

/* ═══════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════ */
.favi-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.favi-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.favi-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.favi-empty-desc {
  font-size: 12px;
  color: var(--muted);
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   COMMON UI CLASSES (extracted from inline)
   ═══════════════════════════════════════════ */
.favi-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.favi-btn:hover { opacity: 0.85; }
.favi-btn-primary { background: var(--accent); color: #fff; }
.favi-btn-danger { background: #f87171; color: #fff; }
.favi-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.favi-btn-ghost:hover { color: var(--text); border-color: var(--text); }

.favi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
}

.favi-stat-card {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px;
}

.favi-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.favi-stat-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE — screens < 768px
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar — off-canvas on mobile */
  .sidebar {
    transform: translateX(-100%);
    width: 260px;
    z-index: 2000;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.collapsed { transform: translateX(-100%); width: 260px; }
  /* mobile-open MUST win over collapsed — declared AFTER .collapsed so cascade order matches */
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .app-main { margin-left: 0 !important; max-width: 100vw !important; }
  .app-main.sidebar-collapsed { margin-left: 0; max-width: 100vw; }
  .sidebar-open-btn { display: flex; }
  .header-logo-mobile { display: block; }
  /* Overlay when sidebar open */
  .sidebar-overlay {
    position: fixed; inset: 0; z-index: 1999;
    background: rgba(0,0,0,0.5);
    display: none;
  }
  .sidebar-overlay.active { display: block; }

  /* Header */
  header {
    padding: 10px 12px;
    gap: 8px;
  }
  .header-title { font-size: 15px; }
  .header-sub { display: none; }
  .header-logo-mobile { display: none !important; }

  /* Mode switcher — compact on mobile so all 3 buttons fit */
  .mode-switcher { margin-left: 4px !important; }
  .mode-btn { padding: 5px 10px !important; font-size: 10px !important; }

  /* Main content */
  main {
    padding: 8px 8px;
  }

  .card {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
  }

  /* Force all inline grids to stack on mobile */
  /* 3-column grids (carrier controls, pulse layers, spatial diagrams) → 1 column */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-column grids (pulse type selectors) → 2 columns */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 5-column grids → 2 columns */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Session detail — 2-col metric grids stack on mobile */
  [style*="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* Session list grid — horizontal scroll on mobile */
  [style*="grid-template-columns:32px 1fr 80px"],
  [style*="grid-template-columns: 32px 1fr 80px"] {
    grid-template-columns: 32px 1fr 60px 50px 50px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Profile gauge row — stack on mobile */
  [style*="grid-template-columns:120px 1fr 120px"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column grids (noise, spatial controls) → 1 column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Program builder phase bar — horizontal scroll */
  [style*="display:flex;overflow-x:auto"],
  [style*="display: flex; overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Program builder phase rows */
  [style*="display:flex;align-items:center;gap:"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Spatial path diagrams — stack vertically */
  #favi-spatial-diagram [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* SVG brain diagrams — full width */
  svg[viewBox] {
    max-width: 100%;
    height: auto;
  }

  /* Sliders — wider touch targets (v240: keep round!) */
  input[type="range"] {
    min-height: 36px;
    -webkit-appearance: none;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50% !important;
    -webkit-appearance: none;
    margin-top: -9px; /* center on 4px track */
  }

  /* Buttons — bigger touch targets (except tiny info buttons) */
  button:not([style*="width:16px"]):not([style*="width:18px"]):not([style*="border-radius:50%"]), select {
    min-height: 36px;
  }
  /* Info (i) buttons — keep small */
  button[style*="border-radius:50%"] {
    min-height: auto !important;
    min-width: auto !important;
  }

  /* Nudge +/- buttons */
  [style*="width:28px;height:28px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* Number inputs in waypoint list — bigger */
  input[type="number"] {
    min-width: 40px;
    min-height: 32px;
    font-size: 13px !important;
  }

  /* Preset buttons — wrap and fill */
  [style*="display:flex;flex-wrap:wrap;gap:"] {
    gap: 6px !important;
  }

  [style*="display:flex;flex-wrap:wrap;gap:"] button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  /* Status bar — smaller text */
  #favi-status-bar {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  /* Waypoint list — compact */
  [style*="font-size:11px;display:flex;align-items:center;gap:"] {
    font-size: 10px !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
  }

  /* 3D canvas container */
  canvas {
    max-width: 100%;
    height: auto !important;
    touch-action: pan-y;
  }

  /* v445-daw-fix: DAW canvases live inside an overflow-x:auto scroll wrapper
     and must keep their explicit width/height + allow horizontal pan. */
  [id$="-scroll"] canvas {
    max-width: none;
    height: revert !important;
    touch-action: pan-x pan-y;
  }

  /* Region buttons at bottom */
  [style*="display:flex;flex-wrap:wrap;gap:6px"] button,
  [style*="display:flex;flex-wrap:wrap;gap:4px"] button {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* Output device dropdown */
  select[id="favi-output-device"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 4px;
  }
  /* v228: The rules below were orphaned outside @media in v217.
     Now properly inside @media (max-width: 768px). */

  /* UCI Dial hero — stack vertically on mobile */
  [style*="display:flex;align-items:center;justify-content:center;gap:24px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* UCI dial sub-score columns — horizontal on mobile */
  [style*="display:flex;flex-direction:column;gap:8px;min-width:100px"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Session progression pills — smaller */
  [style*="display:flex;justify-content:center;gap:6px;margin-top:16px"] {
    gap: 4px !important;
  }

  /* 7-column grids (stage cards) → 4 columns on mobile */
  [style*="grid-template-columns:repeat(7,1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* C6 breakdown 3-column → 1 column on mobile */
  [style*="grid-template-columns:1fr 1fr 1fr;gap:1px"] {
    grid-template-columns: 1fr !important;
  }

  /* Science page 4-column mapping → 2 columns on mobile */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Lab subtabs — scroll horizontally */
  .lab-subtabs {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .lab-subtab {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  /* Updates table — horizontal scroll */
  [style*="min-width:700px"] {
    min-width: 600px !important;
  }

  /* ── v228: Research platform mobile fixes (audit 3.5) ── */

  /* Session cards — constrain to viewport */
  #panel-sessions .card,
  #panel-research .card {
    max-width: calc(100vw - 16px) !important;
    overflow-x: hidden;
  }

  /* Charts — horizontally scrollable in their own container */
  #panel-sessions canvas,
  #panel-research canvas {
    max-width: 100%;
  }

  /* Chart wrapper divs — add horizontal scroll */
  [style*="position:relative;height:"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Insights hero score — smaller on mobile */
  [style*="font-size:48px"],
  [style*="font-size: 48px"] {
    font-size: 36px !important;
  }
  [style*="font-size:32px"],
  [style*="font-size: 32px"] {
    font-size: 24px !important;
  }

  /* A/B compare buttons — compact */
  #favi-ab-a, #favi-ab-b {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  /* Sidebar footer buttons — wrap */
  .sidebar-footer div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ═══════════════════════════════════════════
   SMALL MOBILE — screens < 400px
   ═══════════════════════════════════════════ */
@media (max-width: 400px) {
  main { padding: 4px; }
  .card { padding: 8px; }
  .sec-header { font-size: 14px; }

  /* Even the 2-column grids go 1-column */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  button, select {
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════
   PHONE — Engineer/Explorer mobile fixes
   ═══════════════════════════════════════════ */
@media (max-width: 430px) {
  /* Hero bar: wrap play/stop/timer/preset */
  #favi-hero-bar { padding: 10px 8px !important; }
  #favi-hero-bar > div:first-child { gap: 6px !important; flex-wrap: wrap !important; }
  #favi-play { min-width: 70px !important; padding: 8px 14px !important; font-size: 12px !important; }
  #favi-stop { padding: 8px 12px !important; font-size: 12px !important; }

  /* Sub-tabs: tighter */
  .lab-subtab { padding: 5px 10px !important; font-size: 10px !important; }

  /* Preset buttons: 2 columns */
  #favi-preset-grid button { min-width: 100px !important; padding: 6px 10px !important; font-size: 11px !important; }

  /* Section header smaller */
  .sec-header { font-size: 16px !important; }

  /* Slider labels tighter */
  .slider-row label { font-size: 10px !important; }

  /* Card sections */
  .favi-card { padding: 10px !important; margin-bottom: 8px !important; }
}

/* ═══════════════════════════════════════════
   TABLET — screens 768-1024px
   ═══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 3-column grids → 2 columns on tablet */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 5-column grids → 3 columns on tablet */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  main {
    padding: 12px 16px;
  }

  /* v445-pilot443 — iPad portrait: extend mobile off-canvas sidebar + bottom
     nav to iPad (768-1024px viewport). 768px breakpoint missed iPad portrait
     so users saw side-by-side sidebar pushing content off-screen + no bottom
     nav. 4+ iPad users reported broken layout in webinar (Scott, Teresa,
     Cynthia, Sasha, David). */
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 2000;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.collapsed { transform: translateX(-100%); width: 280px; }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .app-main { margin-left: 0 !important; max-width: 100vw !important; }
  .app-main.sidebar-collapsed { margin-left: 0 !important; max-width: 100vw !important; }
  .sidebar-open-btn { display: flex; }
  .header-logo-mobile { display: block; }
  .sidebar-overlay {
    position: fixed; inset: 0; z-index: 1999;
    background: rgba(0,0,0,0.5);
    display: none;
  }
  .sidebar-overlay.active { display: block; }

  /* Bottom nav visible on iPad too */
  .mobile-bottom-nav { display: flex; }
  main { padding-bottom: 64px !important; }

  /* Back-pill positions clear of mobile sidebar trigger */
  .home-back-pill {
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    left: 12px;
  }
}

/* ═══════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Bigger touch targets for touch screens */
  button {
    min-height: 40px;
    padding: 8px 12px;
  }

  input[type="range"] {
    min-height: 44px;
  }

  input[type="number"],
  input[type="text"],
  select {
    min-height: 36px;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Disable hover effects on touch */
  button:hover {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* v111 (Henry: "make sure there is enough padding for the insights and
     brain button to be clear of the white horizontal home button"). Pad
     bottom by env(safe-area-inset-bottom) so the iPhone home indicator
     doesn't overlap the icons + labels. Total height stays 56 + safe-area. */
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  z-index: 1500;
  justify-content: space-around;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* v14i: hide the mobile bottom-nav on the auth gate. It was leaking
   through and making the unauth screen look like a signed-in app. */
body:has(#auth-gate:not([style*="display: none"])) .mobile-bottom-nav {
  display: none !important;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 12px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  /* v445-pilot433: smooth color + transform transition so active swap feels
     intentional, not a jump. */
  transition: color 0.25s ease, transform 0.15s ease;
  min-height: 48px;
  font-family: var(--font-body);
}
.bottom-nav-item svg {
  transition: stroke 0.25s ease, stroke-width 0.2s ease, transform 0.2s ease;
}
.bottom-nav-item:hover { color: var(--text-secondary); }
.bottom-nav-item:active { transform: scale(0.94); }
.bottom-nav-item.active {
  color: var(--brand-magenta);
  font-weight: 700;
}
.bottom-nav-item.active svg {
  stroke: var(--brand-magenta);
  stroke-width: 2.2;
  transform: scale(1.06);
}

/* Show on mobile */
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }

  /* Add bottom padding to main content so it doesn't hide behind nav */
  main { padding-bottom: 64px !important; }

  /* Hide desktop-only header elements */
  .header-user-desktop { display: none !important; }

  /* Make sure hamburger is visible */
  .sidebar-open-btn { display: flex !important; }

  /* ── OVERVIEW METERS — Mobile Rewrite ── */
  /* Main grid: stack — dial first, then gauges in a row below */
  [style*="grid-template-columns:auto 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Reorder: dial first (center column), then left gauges, then right gauges */
  [style*="grid-template-columns:auto 1fr auto"] > *:nth-child(1) { order: 2; } /* left gauges → second */
  [style*="grid-template-columns:auto 1fr auto"] > *:nth-child(2) { order: 1; } /* dial → first */
  [style*="grid-template-columns:auto 1fr auto"] > *:nth-child(3) { order: 3; } /* right gauges → third */

  /* UCI dial — centre, scale to fit */
  [style*="width:260px;height:180px"] {
    width: 200px !important;
    height: 140px !important;
    margin: 0 auto 8px !important;
  }
  [style*="width:260px;height:180px"] svg {
    width: 200px !important;
    height: 140px !important;
  }
  /* Sub-gauges columns → horizontal rows */
  [style*="display:flex;flex-direction:column;gap:8px"] {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  [style*="width:110px"] {
    width: auto !important;
    flex: 1 !important;
    max-width: 48% !important;
    padding: 6px !important;
  }
  [style*="width:110px"] svg {
    width: 60px !important;
    height: 42px !important;
  }
  [style*="width:110px"] [style*="font-size:20px"] {
    font-size: 14px !important;
  }
  [style*="width:110px"] [style*="font-size:10px"] {
    font-size: 9px !important;
  }

  /* ── DAW PLAYER — Mobile Fixes ── */
  /* Track label column — narrow on mobile */
  [style*="width:56px;min-width:56px"],
  [style*="width:40px;min-width:40px"] {
    width: 32px !important;
    min-width: 32px !important;
  }
  /* Track labels text */
  [style*="width:56px;min-width:56px"] span,
  [style*="width:40px;min-width:40px"] span {
    font-size: 9px !important;
  }
  /* DAW scroll container */
  [style*="overflow-x:auto;overflow-y:hidden"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ── SESSION DAW — mobile optimisation ── */
  /* Track label column — narrower on mobile */
  [style*="width:56px;min-width:56px"] {
    width: 40px !important;
    min-width: 40px !important;
    font-size: 9px !important;
  }
  /* DAW container — ensure horizontal scroll works */
  [style*="overflow-x:auto;position:relative"] {
    -webkit-overflow-scrolling: touch;
  }
  /* DAW track heights — more compact on mobile */
  [style*="height:120px;border-top:2px solid"] {
    height: 100px !important;
  }
  [style*="height:90px;border-top:2px solid"] {
    height: 70px !important;
  }
  /* Session detail buttons — wrap */
  [style*="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px"] {
    gap: 4px !important;
  }
  [style*="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px"] button {
    font-size: 8px !important;
    padding: 2px 6px !important;
    min-height: 28px !important;
  }
}

/* ═══════════════════════════════════════════
   POST-SESSION SUMMARY OVERLAY
   ═══════════════════════════════════════════ */
.post-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.post-session-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  margin: 20px 0 40px;
}

/* ═══════════════════════════════════════════
   MODE-BASED VISIBILITY (body class system)
   Replaces all inline .style.display hacks
   ═══════════════════════════════════════════ */

/* Guided mode: hide engineer-only elements */
body.mode-guided .favi-not-guided,
body.mode-guided .favi-engineer-only,
body.mode-guided .favi-mode-engineer { display: none !important; }

/* Engineer mode: show everything */
body.mode-engineer .favi-mode-guided { display: none !important; }

/* v357: Admin Raw Research view — reveal engineer-only tools inside
   the Insights panel without forcing the user to switch body mode.
   Triggered by _ciLoadRawResearch() when an admin clicks "Open research
   view". Scoped to #panel-sessions so it doesn't leak into Lab /
   engineer-only cards on other pages. */
body.favi-admin-raw-view #panel-sessions .favi-engineer-only { display: revert !important; }

/* ═══════════════════════════════════════════
   v360: Pane 2 (Live Brain) rebuild
   UCI meter at top, C-stage ring + C6 callout, UCI-over-time + stage-bars
   ═══════════════════════════════════════════ */

/* The hero UCI meter sits at the top. Tighter top margin than the old
   layout because we no longer have the big C-letter above it. */
.gw-coh-block.gw-coh-block-hero { margin-top: 2px; margin-bottom: 4px; }

/* Row 2: C0-C5 pill ring on the left, C6 callout on the right */
.gw-stages-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}
.gw-stages-main {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.gw-stage-pill {
  flex: 1;
  min-width: 0;
  padding: 8px 2px;
  text-align: center;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.gw-stage-pill.past { color: rgba(168, 85, 247, 0.72); }
.gw-stage-pill.active {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(217, 70, 239, 0.35));
  color: #fff;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
  transform: translateY(-1px);
}
.gw-stage-c6-callout {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.gw-stage-c6-callout.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.55), rgba(249, 115, 22, 0.45));
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.55);
  transform: translateY(-1px) scale(1.03);
}
.gw-stage-c6-callout .gw-c6-lbl {
  font-family: var(--font-display, sans-serif);
  font-size: 20px;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}
.gw-stage-c6-callout.active .gw-c6-lbl { color: #fff; }
.gw-stage-c6-callout .gw-c6-sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.72);
}
.gw-stage-c6-callout.active .gw-c6-sub { color: rgba(255,255,255,0.85); }

/* v362: UCI-over-time chart + single NOW thermometer bar.
   v362.1 tuning (user feedback): chart much wider, thermometer narrower,
   both wrappers flex-columns so they align in height with the NOW bar
   setting the shared row height. */
.gw-pane2-charts {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 10px;
  margin-bottom: 6px; /* v681 — was 18px; trim so the charts clear the C6 button */
  align-items: stretch;
}
.gw-uci-chart-wrap, .gw-cstage-bars-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.gw-uci-chart-wrap .gw-section-eyebrow,
.gw-cstage-bars-wrap .gw-section-eyebrow { margin-bottom: 6px; }
#gw-uci-chart {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 128px; /* v681 — was 180px; shorter so the full C6-C0 axis + the Now thermo fit above the C6 button */
}
/* v682 (Henry: remove the dead space at the TOP of the over-time + Now charts so
   C0 stops clipping). Drop the wrap top padding and shrink the eyebrow rows to a
   thin label, in BOTH chart boxes — that lifts each plot up so the C6-C0 axis +
   the Now thermo end above the C6 button. */
.gw-pane2-charts .gw-uci-chart-wrap,
.gw-pane2-charts .gw-cstage-bars-wrap,
.gw-pane2-charts .gw-cstage-thermo-wrap { padding-top: 0 !important; }
.gw-pane2-charts .gw-section-eyebrow { font-size: 9px !important; line-height: 1.05 !important; margin-bottom: 1px !important; }
.gw-cstage-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  padding-top: 4px;
}
.gw-cstage-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.gw-cstage-col-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.gw-cstage-col-fill {
  width: 100%;
  height: 3%;
  background: #6b7280;
  border-radius: 3px 3px 0 0;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gw-cstage-col-lbl {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
}

/* v370: Charts always share the same row. The thermometer narrows with
   the pane instead of collapsing under the UCI chart. */

/* ═══════════════════════════════════════════
   v362: Pane 2 — thermometer + step chart
   Replaces the 7-col time-per-stage grid with a single vertical bar
   that fills to the current stage. UCI arc labels + step chart Y-axis
   now read C0..C6 (handled in the canvas drawing code).
   ═══════════════════════════════════════════ */

.gw-cstage-thermo-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.gw-cstage-thermo-wrap .gw-section-eyebrow { margin-bottom: 6px; }
.gw-cstage-thermo-box {
  flex: 1;
  display: flex;
  gap: 6px;
  min-height: 180px;
}
.gw-cstage-thermo-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
  padding: 2px 0;
}
.gw-cstage-thermo-labels > div:last-child {
  /* C0 at bottom */
  color: rgba(255, 255, 255, 0.4);
}
.gw-cstage-thermo-labels > div:first-child {
  /* C6 at top — highlight */
  color: rgba(251, 191, 36, 0.85);
}
.gw-cstage-thermo-bar {
  flex: 1;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  /* 6 tick marks aligned with the 7 labels */
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(100% / 7 - 1px),
    rgba(255, 255, 255, 0.08) calc(100% / 7 - 1px),
    rgba(255, 255, 255, 0.08) calc(100% / 7)
  );
}
.gw-cstage-thermo-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14.28%; /* C0 default = 1/7 */
  background: linear-gradient(
    to top,
    #6b7280 0%,      /* C0 */
    #3b82f6 16.67%,  /* C1 */
    #8b5cf6 33.33%,  /* C2 */
    #a855f7 50%,     /* C3 */
    #d946ef 66.67%,  /* C4 */
    #ec4899 83.33%,  /* C5 */
    #fbbf24 100%     /* C6 */
  );
  border-radius: 5px 5px 0 0;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 12px rgba(235, 13, 138, 0.2);
}
/* When the current stage is C6, glow gold */
.gw-cstage-thermo-fill[data-stage="C6"] {
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.5);
}

/* The hero UCI meter readout is now a C-state label, not a 0/100 number */
.gw-coh-block.gw-coh-block-hero .gw-coh-label {
  font-family: var(--font-display, sans-serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gw-coh-block.gw-coh-block-hero .gw-coh-unit { display: none; }

/* ═══ ANIMATIONS ═══ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(0.8); opacity: 0.15; }
  50% { transform: scale(1.15); opacity: 0.4; }
}

/* ═══ INSIGHTS OVERVIEW — Protected from mobile grid overrides ═══ */
.io-wrap { max-width: 100%; }
.io-hero { text-align: center; padding: 24px 16px 16px; }
.io-hero-score { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 1; }
.io-hero-verdict { font-size: 14px; font-weight: 700; margin-top: 6px; }
.io-hero-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.io-hero-meta { font-size: 11px; color: var(--text-tertiary); margin-bottom: 12px; }
.io-hero-label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--brand-magenta); font-weight: 600; margin-bottom: 4px; }

/* Sub-scores — ALWAYS 3 columns */
.io-scores { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 8px; margin-bottom: 14px; }
.io-score-card { text-align: center; background: var(--bg-tertiary); border-radius: 12px; padding: 14px 6px 10px; }
.io-score-card svg { display: block; margin: 0 auto; }
.io-score-label { font-size: 10px; font-weight: 700; margin-top: 2px; }

/* Profile + Next — ALWAYS 2 columns */
.io-duo { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; margin-bottom: 14px; }
.io-card { background: var(--bg-tertiary); border-radius: 12px; padding: 14px; }
.io-card-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.io-card-desc { font-size: 10px; color: var(--text-tertiary); line-height: 1.5; }

/* Section cards */
.io-section { background: var(--bg-secondary); border-radius: 12px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--border-subtle); }
.io-section-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; }

/* Path milestones */
.io-milestones { display: flex !important; gap: 4px; }
.io-milestone { flex: 1; text-align: center; padding: 6px 2px; border-radius: 6px; }
.io-milestone-num { font-family: var(--font-mono); font-size: 13px; font-weight: 800; }
.io-milestone-sub { font-size: 10px; margin-top: 1px; }

/* Schedule row */
.io-sched-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px; margin-bottom: 6px; }
.io-sched-cell { background: var(--bg-tertiary); border-radius: 8px; padding: 8px; text-align: center; }
.io-sched-val { font-family: var(--font-mono); font-size: 18px; font-weight: 800; }

/* Audio-only upsell card */
.ao-upsell { border-radius: 12px; }
.ao-upsell button:hover { opacity: 0.9; }

/* C6 expandable */
.io-expand { margin-bottom: 14px; }
.io-expand summary { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px; cursor: pointer; list-style: none; }
.io-expand summary::-webkit-details-marker { display: none; }
.io-expand-body { padding: 10px 14px; font-size: 11px; color: var(--text-secondary); line-height: 1.7; background: var(--bg-secondary); border-radius: 0 0 12px 12px; }

/* Session fullscreen mode — hide chrome */
body.session-fullscreen .app-header,
body.session-fullscreen #app-header,
body.session-fullscreen .favi-mode-pills,
body.session-fullscreen #favi-mode-pills,
body.session-fullscreen .favi-bottom-nav,
body.session-fullscreen #favi-bottom-nav { display: none !important; }
body.session-fullscreen #app-main { padding-bottom: 0 !important; }

/* Info button */
.io-info-btn { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; vertical-align: middle; margin-left: 4px; min-height: 20px !important; }
.io-info-btn:active { background: var(--bg-elevated); }

/* Sub-score cards clickable */
.io-score-card { cursor: pointer; transition: background 0.15s; }
.io-score-card:active { background: var(--bg-elevated); }


/* ═══════════════════════════════════════════════════════════════
   SESSION PICKER — Horizontal Rail Cards (v175+)
   Prefix: sp- (session picker) to avoid collision with .io-* insights
   ═══════════════════════════════════════════════════════════════ */

/* Rail section wrapper */
.sp-rail {
  position: relative;
  margin: 0 -16px 20px;
}
.sp-rail-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 16px 10px;
}
.sp-rail-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.sp-rail-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sp-rail-chevron {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Horizontally scrolling track */
.sp-rail-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 16px 8px;
  -webkit-overflow-scrolling: touch;
}
.sp-rail-track::-webkit-scrollbar { display: none; }
.sp-rail-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Edge fade masks (subtle hint of scrollable content) */
.sp-rail::before,
.sp-rail::after {
  content: '';
  position: absolute;
  top: 38px;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}
.sp-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary), transparent);
}
.sp-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary), transparent);
}

/* ── Base Card ────────────────────────────────────────────────── */
.sp-card {
  width: 158px;
  height: 198px;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  isolation: isolate;
}
.sp-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.sp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sp-gradient, linear-gradient(180deg, #1a1a28 0%, #0d0d14 100%));
  z-index: -1;
}
.sp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.sp-card > * { position: relative; }

/* ─────────────────────────────────────────────────────────────
   v197+: Custom duration slider for showDurationPopup
   Uses a CSS variable --fav-fill (set by JS on input) to paint
   the filled portion of the track. Works cross-browser via
   webkit / moz pseudo-elements.
   ───────────────────────────────────────────────────────────── */
.favi-dur-slider-wrap {
  padding: 6px 8px 0 8px;
}
.favi-dur-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 8px;
  outline: none;
  margin: 0;
  cursor: pointer;
  /* Filled portion uses a magenta→purple gradient; rest is dark */
  background: linear-gradient(
    to right,
    #EB0D8A 0%,
    #8635A0 var(--fav-fill, 50%),
    rgba(255,255,255,0.12) var(--fav-fill, 50%),
    rgba(255,255,255,0.12) 100%
  );
}
.favi-dur-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: transparent;
}
.favi-dur-slider::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: transparent;
}
.favi-dur-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #EB0D8A;
  box-shadow: 0 2px 12px rgba(235,13,138,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  cursor: pointer;
  margin-top: -9px; /* centers the thumb on the 8px track */
  transition: transform 0.15s ease;
}
.favi-dur-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.favi-dur-slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.favi-dur-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #EB0D8A;
  box-shadow: 0 2px 12px rgba(235,13,138,0.6);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.favi-dur-slider::-moz-range-thumb:hover { transform: scale(1.1); }

/* Favourites star indicator — only visible in edit mode (v194+) */
/* Moved to top-RIGHT so it doesn't collide with the badge (usually top-left) */
/* Large enough to be clearly tappable, high contrast badge ring */
.sp-card-star {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.65);
  border: 1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  z-index: 5;
  pointer-events: none; /* whole card handles click in edit mode */
  transition: all 0.15s ease;
}
.sp-card-star--on {
  color: #fbbf24;
  background: rgba(251,191,36,0.22);
  border-color: #fbbf24;
  text-shadow: 0 0 12px rgba(251,191,36,0.8);
}
/* Edit-mode card: yellow outline + subtle shimmer so user knows it's selectable */
.sp-card--editable {
  outline: 2px solid rgba(251,191,36,0.4);
  outline-offset: -2px;
  animation: sp-edit-pulse 2s ease-in-out infinite;
}
@keyframes sp-edit-pulse {
  0%, 100% { outline-color: rgba(251,191,36,0.4); }
  50% { outline-color: rgba(251,191,36,0.75); }
}

.sp-card-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-display);
}
.sp-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sp-card-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}
.sp-card-level {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.85);
  padding: 3px 7px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sp-card-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Per-session gradients ────────────────────────────────────── */
.sp-card.sp-bg-quiet    { --sp-gradient: linear-gradient(155deg, #0a2828 0%, #0a2020 40%, #14141e 100%); }
.sp-card.sp-bg-f10      { --sp-gradient: linear-gradient(155deg, #1a1040 0%, #0f2847 50%, #0d0d14 100%); }
.sp-card.sp-bg-f12      { --sp-gradient: linear-gradient(155deg, #2d1654 0%, #1a0f3d 50%, #0d0d14 100%); }
.sp-card.sp-bg-f15      { --sp-gradient: linear-gradient(155deg, #0d1f3a 0%, #0a1628 50%, #0d0d14 100%); }
.sp-card.sp-bg-f21      { --sp-gradient: linear-gradient(155deg, #3d0a2a 0%, #2a0a3a 50%, #14141e 100%); }
.sp-card.sp-bg-c6       { --sp-gradient: linear-gradient(155deg, #4a1a0a 0%, #3a2a0a 45%, #2a0a1a 100%); }
.sp-card.sp-bg-mss-delta{ --sp-gradient: linear-gradient(155deg, #0ea5e9 -20%, #1a1040 45%, #0d0d14 100%); }
.sp-card.sp-bg-mss-gamma{ --sp-gradient: linear-gradient(155deg, #fbbf24 -20%, #3a2a0a 40%, #14141e 100%); }
.sp-card.sp-bg-sweep1   { --sp-gradient: linear-gradient(155deg, #8b5cf6 -20%, #2d1654 45%, #0d0d14 100%); }
.sp-card.sp-bg-sweep2   { --sp-gradient: linear-gradient(155deg, #EB0D8A -30%, #3d0a2a 45%, #14141e 100%); }
.sp-card.sp-bg-c6profile{ --sp-gradient: linear-gradient(155deg, #8635A0 -15%, #4a1a0a 55%, #14141e 100%); }

/* ── Hero variant (Recommended) ───────────────────────────────── */
.sp-card.sp-card--hero {
  width: 280px;
  height: 198px;
}
.sp-card--hero .sp-card-title { font-size: 20px; }
.sp-card--hero .sp-card-desc  { font-size: 11px; -webkit-line-clamp: 3; }

/* ── Program variant (multi-week) ─────────────────────────────── */
.sp-card.sp-card--program {
  width: 220px;
  height: 220px;
}
.sp-card--program .sp-card-title { font-size: 17px; }
.sp-card--program .sp-program-stat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.sp-card--program .sp-program-bar {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.sp-card--program .sp-program-bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Program gradient variants (by program color) */
.sp-card.sp-bg-prog-alumni      { --sp-gradient: linear-gradient(155deg, #8635A0 -10%, #2d1654 50%, #0d0d14 100%); }
.sp-card.sp-bg-prog-dev         { --sp-gradient: linear-gradient(155deg, #5B2D8E -10%, #1a0f3d 50%, #0d0d14 100%); }
.sp-card.sp-bg-prog-explorer    { --sp-gradient: linear-gradient(155deg, #D4A017 -10%, #3a2a0a 50%, #14141e 100%); }
.sp-card.sp-bg-prog-profile     { --sp-gradient: linear-gradient(155deg, #EB0D8A -10%, #3d0a2a 50%, #14141e 100%); }
.sp-card.sp-bg-prog-profile-std { --sp-gradient: linear-gradient(155deg, #c21479 -10%, #2d0a2a 45%, #0d0d14 100%); }

/* ── Progress ring (SVG circle stroke) ────────────────────────── */
.sp-progress-ring {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
}
.sp-progress-ring circle {
  fill: none;
  stroke-width: 3;
}
.sp-progress-ring .sp-pr-track { stroke: rgba(255,255,255,0.2); }
.sp-progress-ring .sp-pr-fill  { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.sp-pr-label {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

/* ── Mobile adjustments (<430px) ──────────────────────────────── */
@media (max-width: 430px) {
  .sp-rail { margin: 0 -12px 18px; }
  .sp-rail-header { padding: 0 12px 8px; }
  .sp-rail-track { padding: 4px 12px 8px; gap: 8px; }
  .sp-card { width: 144px; height: 182px; padding: 12px; }
  .sp-card-title { font-size: 14px; }
  .sp-card.sp-card--hero { width: 248px; height: 182px; }
  .sp-card--hero .sp-card-title { font-size: 18px; }
  .sp-card.sp-card--program { width: 196px; height: 200px; }
}


/* ═══════════════════════════════════════════════════════════════
   PROGRAM DETAIL VIEW (pd-*) — Calendar + Weekly Scores
   SESSION DETAIL VIEW (sd-*) — Score + C-state timeline
   INTENSIVE SCHEDULE (ip-*) — 3-day retreat planner
   v180+ — opens when user taps a program card in the picker
   ═══════════════════════════════════════════════════════════════ */

/* Shared wrappers */
.pd-wrap, .sd-wrap, .ip-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 40px;
}

/* Top bar (back button + title) */
.pd-topbar, .sd-topbar, .ip-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 16px;
  gap: 8px;
}
.pd-back, .sd-back, .ip-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px 10px;
  color: var(--brand-magenta);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-back:active, .sd-back:active, .ip-back:active { background: rgba(235,13,138,0.12); }
.pd-title, .sd-title, .ip-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  flex: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Big donut (overall / session score) */
.pd-donut-wrap, .sd-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 24px;
}
.pd-donut, .sd-donut {
  position: relative;
  width: 168px;
  height: 168px;
}
.pd-donut svg, .sd-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pd-donut-track, .sd-donut-track { stroke: rgba(255,255,255,0.08); fill: none; }
.pd-donut-fill, .sd-donut-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.pd-donut-text, .sd-donut-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pd-donut-pct, .sd-donut-pct {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pd-donut-label, .sd-donut-label {
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-tertiary);
  margin-top: 6px;
  font-weight: 700;
}
.pd-donut-count, .sd-donut-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Big CTA start button */
.pd-cta {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 28px;
  padding: 16px 20px;
  border-radius: 14px;
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  letter-spacing: -0.01em;
  transition: transform 0.12s ease;
}
.pd-cta:active { transform: scale(0.98); }
.pd-cta-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.78;
  margin-top: 4px;
  font-family: var(--font-body);
  letter-spacing: 0.2px;
}

/* Section header */
.pd-section-title, .sd-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  padding: 0 16px;
  margin: 20px 0 12px;
  letter-spacing: -0.01em;
}

/* ── Calendar grid (Apple Mindful Minutes style) ── */
.pd-calendar {
  padding: 0 16px;
  margin-bottom: 24px;
}
.pd-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.pd-cal-header div {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}
.pd-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px 4px;
}
.pd-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  min-height: 40px;
}
.pd-cal-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  transition: transform 0.15s;
}
.pd-cal-circle.done {
  background: var(--pd-program-color, var(--brand-magenta));
  color: #fff;
  box-shadow: 0 3px 10px rgba(235,13,138,0.25);
}
.pd-cal-circle.empty {
  border: 1.5px solid rgba(255,255,255,0.12);
  color: var(--text-tertiary);
  background: transparent;
}
.pd-cal-circle.today {
  box-shadow: 0 0 0 2px var(--pd-program-color, var(--brand-magenta)), 0 3px 10px rgba(235,13,138,0.35);
}
.pd-cal-month {
  font-size: 8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.8px;
  font-weight: 800;
  font-family: var(--font-display);
  margin-bottom: 3px;
}

/* ── Weekly scores (matching Neuphoria Reports ref) ── */
.pd-week {
  background: var(--bg-tertiary);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 16px 10px;
  display: flex;
  gap: 14px;
  align-items: center;
  border-left: 4px solid var(--pd-program-color, var(--brand-magenta));
  transition: background 0.15s;
}
.pd-week.locked { opacity: 0.4; }
.pd-week-ring-big {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  position: relative;
}
.pd-week-ring-big svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pd-wrb-track { stroke: rgba(255,255,255,0.1); fill: none; stroke-width: 4; }
.pd-wrb-fill  { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.pd-week-ring-big-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}
.pd-week-info { flex: 1; min-width: 0; }
.pd-week-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pd-program-color, var(--brand-magenta));
  margin-bottom: 2px;
}
.pd-week-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin-bottom: 6px;
}
.pd-week-sessions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pd-week-sessions::-webkit-scrollbar { display: none; }
.pd-week-ring-small {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.pd-week-ring-small svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pd-wrs-track { stroke: rgba(255,255,255,0.1); fill: none; stroke-width: 3; }
.pd-wrs-fill  { fill: none; stroke-width: 3; stroke-linecap: round; }
.pd-week-ring-small-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ── Session Detail View ── */
.sd-chart-wrap {
  margin: 0 16px 24px;
  background: var(--bg-tertiary);
  border-radius: 14px;
  padding: 16px 12px 12px;
  height: 240px;
  position: relative;
  box-sizing: border-box;
}
.sd-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
  line-height: 1.6;
}
.sd-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px 8px;
}
.sd-metric {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 14px 6px;
  text-align: center;
}
.sd-metric-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.sd-metric-label {
  font-family: var(--font-display);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-top: 6px;
}

/* Top responding frequencies */
.sd-freqs { padding: 0 16px 20px; }
.sd-freq-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sd-freq-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  width: 54px;
  text-align: right;
  font-weight: 700;
}
.sd-freq-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.sd-freq-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.sd-freq-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  width: 36px;
  font-weight: 700;
}

/* Action buttons */
.sd-actions {
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-btn {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.sd-btn:active { transform: scale(0.98); }
.sd-btn-primary { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.sd-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ── Intensive Schedule View ── */
.ip-header {
  text-align: center;
  padding: 4px 16px 20px;
}
.ip-header-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.ip-header-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.55;
}
/* Collapsible day card (v181+) */
.ip-day {
  background: var(--bg-tertiary);
  border-radius: 14px;
  margin: 0 16px 12px;
  border-left: 4px solid var(--pd-program-color, var(--brand-magenta));
  overflow: hidden;
}
.ip-day summary {
  cursor: pointer;
  padding: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ip-day summary::-webkit-details-marker { display: none; }
.ip-day summary::marker { display: none; }
.ip-day-summary-content { flex: 1; min-width: 0; }
.ip-day-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.ip-day-phase {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.ip-day-dur {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}
.ip-day-progress {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.ip-day-progress.complete {
  background: var(--pd-program-color, var(--brand-magenta));
  color: #fff;
}
.ip-day-toggle {
  color: var(--text-tertiary);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ip-day[open] .ip-day-toggle { transform: rotate(180deg); }
.ip-day-body {
  padding: 0 16px 16px;
}
.ip-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ip-slot-status {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  font-weight: 800;
}
.ip-slot-status.done {
  background: var(--pd-program-color, var(--brand-magenta));
  color: #fff;
  box-shadow: 0 2px 6px rgba(235,13,138,0.3);
}
.ip-slot-status.pending {
  border: 1.5px solid rgba(255,255,255,0.15);
  color: transparent;
}
.ip-slot.done .ip-slot-label,
.ip-slot.done .ip-slot-time,
.ip-slot.done .ip-slot-dur { opacity: 0.6; }
.ip-slot-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  width: 48px;
  font-weight: 700;
}
.ip-slot-label { flex: 1; color: var(--text-primary); min-width: 0; }
.ip-slot-label strong { color: var(--pd-program-color, var(--brand-magenta)); }
.ip-slot-dur {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 700;
}

/* Actions moved to top — compact variant */
.ip-actions-top {
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ip-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 24px;
}
.ip-btn {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ip-btn-primary { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.ip-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Mobile adjustments for pd/sd/ip */
@media (max-width: 430px) {
  .pd-donut, .sd-donut { width: 148px; height: 148px; }
  .pd-donut-pct, .sd-donut-pct { font-size: 32px; }
  .pd-cta { margin: 0 12px 24px; width: calc(100% - 24px); }
  .pd-calendar { padding: 0 12px; }
  .pd-cal-circle { width: 30px; height: 30px; font-size: 9px; }
  .pd-week { margin: 0 12px 10px; padding: 12px 14px; gap: 12px; }
  .pd-week-ring-big { width: 56px; height: 56px; }
  .sd-chart-wrap { margin: 0 12px 20px; padding: 14px 10px 10px; height: 220px; }
  .sd-metrics { padding: 0 12px 8px; }
  .sd-metric-value { font-size: 16px; }
  .sd-actions { padding: 12px 12px 24px; }
  .ip-day { margin: 0 12px 12px; padding: 14px; }
  .ip-actions { padding: 8px 12px 24px; }
}

/* ═══ v306: FAVI SDK MODE (embedded in iOS WKWebView) ═══ */
body.favi-sdk-mode #auth-gate { display: none !important; }
body.favi-sdk-mode #app-content { display: block !important; }
/* v415 — Width override only when the sidebar isn't really there.
   Three valid cases (in order of confidence the sidebar is hidden):
   1. iOS SDK mode — sidebar literally not displayed (favi-sdk-bridge.js)
   2. Mobile viewport (<= 768px) — sidebar position:fixed translateX(-100%)
   3. Combinations of the above
   v413/v414 also overrode on desktop body.mode-guided which DID still
   show the sidebar — that broke Henry's Lab page (cards overlapped the
   sidebar). Fixed by gating mode-guided + study-detail-active behind the
   mobile media query. */
body.favi-sdk-mode .app-main,
body.favi-sdk-mode .app-main.sidebar-collapsed {
  margin-left: 0 !important;
  max-width: 100vw !important;
}
body.favi-sdk-mode main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 768px) {
  body.mode-guided .app-main,
  body.mode-guided .app-main.sidebar-collapsed,
  body.favi-study-detail-active .app-main,
  body.favi-study-detail-active .app-main.sidebar-collapsed {
    margin-left: 0 !important;
    max-width: 100vw !important;
  }
  body.mode-guided main,
  body.favi-study-detail-active main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Hide browser-specific chrome that conflicts with iOS */
body.favi-sdk-mode .sidebar-footer details { display: none; }  /* Delete Account + Export hidden — parent app owns account */
body.favi-sdk-mode .sidebar-footer button[onclick*="signOut"] { display: none; }  /* Sign Out hidden — parent owns auth */
/* v297 — generic hide-in-SDK class for items duplicated by iOS native UI
   (FAVI PILOT section uses this so its 4 buttons don't push the version
   pill + footer below the iOS slide-menu viewport). */
body.favi-sdk-mode .favi-sdk-hide { display: none !important; }
/* v299 follow-up (Henry "v299 is missing favi pilot but is showing the
   studies in the slide menu"). Studies has classes
   `favi-not-guided favi-admin-only`. CSS specificity makes
   `body.is-admin .sidebar-section.favi-admin-only` (2-class selector)
   beat `body.mode-guided .favi-not-guided` (1-class selector), so an
   admin in guided mode still sees Studies. Same applies to Research /
   Admin / Updates buttons. Resolution: in iOS SDK mode, hide ALL
   admin-only items unconditionally — admin surfaces belong in the web
   app, the iOS slide menu should be minimal. Web-admin view is
   unaffected (body.favi-sdk-mode only fires inside iOS WebView). */
body.favi-sdk-mode .favi-admin-only { display: none !important; }
/* Safe-area insets for notch/home-indicator */
body.favi-sdk-mode { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
body.favi-sdk-mode .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }

/* v445-pilot876 → REMOVED v445-pilot885. The Android nav-bar clearance stopgap
   (fixed 48px/44px bottom padding on .favi-bottom-actions / .bt-action-bar /
   .mobile-bottom-nav) is gone now that Android build 22 ships the native A5 fix:
   the host app lays the WebView ABOVE the system navigation bar, so the web
   content bottom is already clear — exactly like iOS/WKWebView auto-insets. The
   fixed padding is now pure excess (it pushed the report Insights/Done + bottom
   nav up too far). Android now matches iOS: no web-side clearance needed. The
   body.favi-android class is still set by favi-sdk-bridge.js but no longer drives
   any padding. */

/* v445-pilot857 — force the MOBILE / native shell at EVERY width in SDK mode.
   The v479 block below only fired @media (min-width:1025px); the base mobile
   rules only fire @media (max-width:768px) — leaving a 769-1024px DEAD ZONE
   with NO bottom nav and the desktop sidebar taking over. Android SDK WebViews
   commonly lay out in that range (~980px), so pilots saw NO bottom bar, a
   broken slide menu (no Menu button + a desktop sidebar off-screen on a narrow
   device), and a stray desktop-shell button. These UNGATED rules cover all
   widths (redundant/harmless below 768 + above 1024 where mobile is already on),
   matching the comment below that the native WebView must ALWAYS be mobile. */
body.favi-sdk-mode .mobile-bottom-nav { display: flex !important; }
/* v445-pilot870 — kill the pink web back-to-home pill in the native app (the
   chrome bar owns top-left nav). !important beats the inline display the JS
   toggle sets, and this also covers the race where favi-sdk-mode lands after a
   sidebarNav toggle already showed it. */
body.favi-sdk-mode #home-back-pill { display: none !important; }
body.favi-sdk-mode main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
body.favi-sdk-mode .sidebar { transform: translateX(-100%) !important; }
body.favi-sdk-mode .sidebar.mobile-open { transform: translateX(0) !important; }
body.favi-sdk-mode .app-main, body.favi-sdk-mode .app-main.sidebar-collapsed { margin-left: 0 !important; max-width: 100vw !important; }

/* v479 — iPad LANDSCAPE / large iPad (viewport > 1024px) in the NATIVE app
   fell into the DESKTOP layout: the mobile bottom-nav is hidden above 1024px
   and the app relied on the desktop sidebar — which has no affordance inside
   the iOS WebView. Result: pilots on iPad (Scott McClure, Teresa Riley) saw
   NO navigation at all ("no band on the bottom, menu is gone"). In SDK mode
   the WebView must always use the MOBILE layout, at every width: show the
   bottom nav, pad content so it clears the nav, and keep the fixed desktop
   sidebar slid off-screen so it can't overlap the full-width content.
   Gated to >1024px + body.favi-sdk-mode → web desktop and iPad-portrait
   (≤1024px, already correct) are completely unaffected. */
@media (min-width: 1025px) {
  body.favi-sdk-mode .mobile-bottom-nav { display: flex !important; }
  body.favi-sdk-mode main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  body.favi-sdk-mode .sidebar { transform: translateX(-100%) !important; }
}

/* v445-pilot523 — Extend the v479 bottom-nav-at-1025+ rule to ALL touch
   devices in WEB mode too (not just SDK/native). Gary on iPad Safari at
   landscape (>1024px) was falling into the desktop layout — sidebar visible,
   no bottom nav — because v479 gated on body.favi-sdk-mode which only fires
   inside the native iOS WebView. Now: iPad landscape in Safari (and any
   other touch device at >1024px) shows the bottom nav and slides the
   sidebar off-screen, matching native-app UX. Real desktops with mice keep
   the sidebar-only layout because (hover: none) and (pointer: coarse) only
   match touch screens — desktop browsers report (hover: hover, pointer:
   fine). iPad-portrait + phones unaffected (already correct via the 768px
   and 769-1024px rules above). */
@media (min-width: 1025px) and (hover: none) and (pointer: coarse) {
  .mobile-bottom-nav { display: flex !important; }
  main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .sidebar { transform: translateX(-100%) !important; }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .app-main, .app-main.sidebar-collapsed {
    margin-left: 0 !important; max-width: 100vw !important;
  }
  .sidebar-open-btn { display: flex; }
}

/* Live EEG indicator (visible when SDK is streaming) */
.favi-live-eeg-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 12px);
  right: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(13, 13, 20, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.favi-live-eeg-badge.connected { border-color: #34d39966; color: #34d399; }
.favi-live-eeg-badge.poor     { border-color: #f9731666; color: #f97316; }
.favi-live-eeg-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: faviLivePulse 1.5s ease-in-out infinite;
}
@keyframes faviLivePulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ═══ v307: Live EEG display panel (SDK mode, during active session) ═══ */
.favi-live-eeg-panel {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  left: 12px;
  z-index: 9993;
  padding: 10px 12px 8px;
  min-width: 172px;
  background: rgba(13, 13, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, border-color 0.4s, box-shadow 0.4s;
}
.favi-live-eeg-panel.active { opacity: 1; transform: translateY(0); }
.favi-live-eeg-panel.c6-flash {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.45);
}
.favi-live-eeg-panel .fle-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.favi-live-eeg-panel .fle-stage,
.favi-live-eeg-panel .fle-focus {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.favi-live-eeg-panel .fle-label {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  text-transform: uppercase;
}
.favi-live-eeg-panel .fle-stage-val {
  font-family: var(--font-display, inherit);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.5px;
  transition: color 0.3s;
}
.favi-live-eeg-panel.c6 .fle-stage-val { color: var(--c6, #fbbf24); }
.favi-live-eeg-panel .fle-focus-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.favi-live-eeg-panel .fle-focus-val .pct { font-size: 9px; color: rgba(255,255,255,0.45); margin-left: 1px; }
.favi-live-eeg-panel .fle-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-top: 2px;
}
.favi-live-eeg-panel .fle-bar {
  flex: 1;
  min-width: 0;
  height: 10%;
  background: linear-gradient(to top, rgba(235, 13, 138, 0.85), rgba(235, 13, 138, 0.35));
  border-radius: 1.5px 1.5px 0 0;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.favi-live-eeg-panel.c6 .fle-bar {
  background: linear-gradient(to top, rgba(251, 191, 36, 0.9), rgba(251, 191, 36, 0.3));
}
.favi-live-eeg-panel .fle-band-labels {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}
.favi-live-eeg-panel .fle-band-labels span {
  flex: 1;
  text-align: center;
  min-width: 0;
}
/* v371: bandsFine diagnostic row — admin-only live stat so we can see
   whether the 44-bin fine FFT is flowing from the device. */
.favi-live-eeg-panel .fle-fine-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.2px;
}
.favi-live-eeg-panel .fle-fine-row .fle-label {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-weight: 700;
}
.favi-live-eeg-panel .fle-fine-val {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-align: right;
}
/* On narrow screens, tighten */
@media (max-width: 420px) {
  .favi-live-eeg-panel {
    min-width: 148px;
    padding: 8px 10px 6px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
    left: 8px;
  }
  .favi-live-eeg-panel .fle-stage-val { font-size: 16px; }
  .favi-live-eeg-panel .fle-bars { height: 18px; }
}
@keyframes faviC6Burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.favi-live-eeg-panel.c6-burst { animation: faviC6Burst 0.6s ease-out; }

/* ═══ v308: HOME REACTIVE HERO (guided picker) ═══ */
.gr-greeting { padding: 4px 2px 16px; }
.gr-greeting h2 {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--text-primary);
  margin-bottom: 6px;
}
.gr-greeting p {
  font-size: 14px; color: var(--text-secondary); line-height: 1.45;
}
.gr-greeting p strong { color: var(--text-primary); font-weight: 600; }
@media (max-width: 420px) { .gr-greeting h2 { font-size: 26px; } }

/* Evidence card */
.gr-evidence {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  position: relative;
}
.gr-evidence-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 12px;
}
.gr-evidence-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-tertiary); text-transform: uppercase;
  flex-shrink: 0;
}
.gr-evidence-title {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
  text-align: right; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.gr-sparkline {
  display: flex; align-items: center; gap: 4px; height: 32px;
  padding: 0 2px; margin-bottom: 12px;
}
.gr-spark-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: transform 0.3s, box-shadow 0.3s; }
.gr-spark-dot.c6 {
  width: 14px; height: 14px;
  box-shadow: 0 0 10px var(--c6), 0 0 22px rgba(251,191,36,0.4);
  animation: grC6Pulse 2.4s ease-in-out infinite;
}
@keyframes grC6Pulse { 0%,100% { box-shadow: 0 0 10px var(--c6), 0 0 22px rgba(251,191,36,0.4); } 50% { box-shadow: 0 0 14px var(--c6), 0 0 28px rgba(251,191,36,0.6); } }
.gr-spark-line { flex: 1; height: 1px; background: rgba(255,255,255,0.14); }
.gr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gr-chip {
  padding: 4px 9px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; color: var(--text-secondary); line-height: 1.4;
}
.gr-chip strong { color: var(--text-primary); font-weight: 700; }
.gr-chip.gold { border-color: rgba(251,191,36,0.35); }
.gr-chip.gold strong { color: var(--c6); }

/* Hero CTA card (v308 upgrade over existing recommendation hero) */
.gr-hero {
  position: relative; margin-bottom: 18px;
  background: linear-gradient(135deg, #8635A0 0%, #EB0D8A 100%);
  border-radius: 18px; padding: 20px 22px 22px; overflow: hidden;
  min-height: 170px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(235,13,138,0.22), 0 0 60px rgba(134,53,160,0.12);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.gr-hero:hover, .gr-hero:focus-visible { transform: translateY(-2px); }
.gr-hero::before {
  content: ''; position: absolute; top: -40%; right: -30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.gr-hero-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; color: rgba(255,255,255,0.75);
  text-transform: uppercase; margin-bottom: 10px; position: relative;
}
.gr-hero-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em; color: #fff; line-height: 1.1;
  margin-bottom: 6px; position: relative;
}
.gr-hero-sub {
  font-size: 13px; color: rgba(255,255,255,0.82);
  line-height: 1.45; margin-bottom: 8px; position: relative;
}
.gr-hero-evidence {
  font-size: 11px; font-style: italic; color: rgba(255,255,255,0.6);
  line-height: 1.4; position: relative; max-width: 72%;
}
.gr-hero-play {
  position: absolute; right: 18px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.gr-hero:hover .gr-hero-play { transform: scale(1.06); }
.gr-hero-play svg { fill: var(--brand-magenta); margin-left: 3px; }
@media (max-width: 420px) {
  .gr-hero { padding: 18px 18px 20px; min-height: 160px; }
  .gr-hero-title { font-size: 22px; }
  .gr-hero-play { width: 48px; height: 48px; right: 14px; bottom: 14px; }
}

/* v342: Consumer EEG Source — pairing-journey landing page shown to
   non-admins so the sidebar entry isn't a dead-end. Admins still see
   the simulator toggle form at the top of the same panel. */
.eegs-consumer-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 22px 48px;
  text-align: center;
}
.eegs-consumer-demo-banner {
  padding: 10px 14px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(235,13,138,0.08));
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  text-align: left;
}
.eegs-consumer-art {
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
}
.eegs-consumer-title {
  font-family: var(--font-display, sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.eegs-consumer-copy {
  font-size: 14px;
  color: var(--text-secondary, rgba(255,255,255,0.68));
  line-height: 1.55;
  margin: 0 0 24px;
}
.eegs-consumer-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  text-align: left;
  max-width: 380px;
}
.eegs-consumer-steps li {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  align-items: flex-start;
}
.eegs-consumer-steps li span {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8635A0, #EB0D8A);
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eegs-consumer-steps li div {
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  line-height: 1.5;
}
.eegs-consumer-steps li strong {
  color: var(--text-primary, #fff);
  font-weight: 700;
}
.eegs-consumer-cta {
  padding: 14px 28px;
  background: linear-gradient(135deg, #8635A0, #EB0D8A);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(235,13,138,0.25);
  opacity: 0.6;
  cursor: not-allowed;
}
.eegs-consumer-footnote {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
}
.eegs-consumer-footnote a {
  color: var(--brand-magenta, #EB0D8A);
  text-decoration: none;
}

/* v341 Phase C: Consumer Insights page. Replaces the engineer rpSessions
   panel for non-admin / demo users. Clean cards, no dense tables. Reads
   from localStorage so it works in demo mode offline. */
/* v445-pilot18 (Henry bug 4): widen from 640px → 880px so the Sessions
   list and Insights cards use available desktop width. Was reading
   "skinny" because alumni testers run on 13–15" laptops where 640px is
   ~half the viewport. Mobile drops back to 100% via panel-sessions
   padding (8px 12px) — no responsive change needed. */
.ci-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 14px 32px;
}
/* All-sessions takeover view also gets the wider container so the list
   matches the rest of Insights. */
.ci-allsessions-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.ci-header { margin-bottom: 20px; }
.ci-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--brand-magenta, #EB0D8A);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ci-title {
  font-family: var(--font-display, sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
  margin: 0;
}
.ci-subtitle {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  line-height: 1.4;
  font-weight: 500;
}

/* ── v445-insights1: Milestone stripe ────────────────────────────────── */
.ci-milestones {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 0 8px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.ci-milestones::-webkit-scrollbar { display: none; }
.ci-milestone {
  flex: 0 0 auto;
  min-width: 200px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #EB0D8A;
  border-radius: 8px;
  padding: 8px 12px;
}
.ci-milestone-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ci-milestone-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  line-height: 1.4;
}

/* ── v445-insights3: UCI Hero — two-tier layout with donut ─────────── */
.ci-uci-hero {
  background: linear-gradient(180deg, rgba(235,13,138,0.06), rgba(235,13,138,0.01));
  border: 1px solid rgba(235,13,138,0.18);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.ci-uci-hero-empty {
  cursor: default;
  text-align: center;
  padding: 24px 16px;
}
.ci-uci-empty-msg {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-weight: 500;
}
.ci-uci-tier { padding: 16px 16px; }
.ci-uci-tier-last {
  cursor: pointer;
  transition: background 0.15s;
}
.ci-uci-tier-last:hover { background: rgba(235,13,138,0.04); }
.ci-uci-tier-last:active { transform: scale(0.997); }
.ci-uci-tier-trend {
  border-top: 1px solid rgba(235,13,138,0.18);
  background: rgba(0,0,0,0.12);
  /* v445-pilot24: explicit horizontal padding so the chart and the
     LAST 7 DAYS STREAK card share the same frame width. */
  padding: 12px 16px;
}
.ci-uci-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ci-uci-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ci-uci-eyebrow-row .ci-uci-eyebrow { margin-bottom: 0; }
.ci-uci-info-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.ci-uci-info-btn:hover {
  background: rgba(235,13,138,0.10);
  color: #EB0D8A;
  border-color: rgba(235,13,138,0.25);
}

/* UCI explainer overlay */
.ci-uci-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  animation: faviDecodedFadeIn 0.28s ease-out both;
}
.ci-uci-info-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ci-uci-info-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  background: var(--bg-secondary, #15151a);
  border: 1px solid rgba(235,13,138,0.25);
  border-radius: 14px;
  padding: 22px 22px 18px;
  color: var(--text-primary, #fff);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ci-uci-info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.ci-uci-info-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(235,13,138,0.85);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ci-uci-info-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.ci-uci-info-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, rgba(255,255,255,0.78));
  margin: 0 0 12px;
}
.ci-uci-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.ci-uci-info-list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255,255,255,0.78));
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ci-uci-info-list li:last-child { border-bottom: 0; }
.ci-uci-info-cta {
  width: 100%;
  margin-top: 8px;
  padding: 12px 18px;
  background: var(--brand-magenta, #EB0D8A);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
}
/* v151: donut centered + larger so the UCI is the visual anchor of the
   hero. Was: horizontal flex (donut left, meta right) — Henry: "UCI Meter
   is left justified, should it be in the center, it looks too small".
   Mobile keeps the column stack; ≥640px brings back the side-by-side. */
.ci-uci-last-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ci-uci-donut-wrap {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ci-uci-last-meta { flex: 1; min-width: 0; text-align: center; }
.ci-uci-last-preset {
  margin-top: 8px;
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
}
.ci-uci-last-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
}
.ci-uci-last-story {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  line-height: 1.45;
  font-weight: 500;
}
.ci-uci-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ci-uci-trend-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ci-uci-trend-val {
  font-family: var(--font-display, sans-serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ci-uci-trend-delta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Donut shared component */
.ci-donut { display: block; }
.ci-donut-fg { transition: stroke-dashoffset 0.05s linear; }

.ci-uci-verdict-pill {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ci-uci-explain {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ci-uci-explain-l1 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.ci-uci-explain-l2 {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  line-height: 1.5;
}
.ci-uci-spark-wrap {
  margin-bottom: 12px;
}
.ci-uci-spark {
  width: 100%;
  /* v151: shrunk 70 → 50 so the trend chart doesn't dominate the page now
     that the UCI donut is the centered hero. Henry: "the line chart and
     the 7 day streak take over your vision of this page." */
  height: 50px;
  display: block;
}
.ci-uci-spark-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  letter-spacing: 0.2px;
}
.ci-uci-spark-pct {
  color: var(--text-secondary, rgba(255,255,255,0.55));
  font-weight: 600;
}
.ci-uci-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 16px 0;
  margin-bottom: 12px;
}
.ci-uci-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 2px solid #EB0D8A;
  border-radius: 6px;
  padding: 7px 6px 6px;
  text-align: center;
}
.ci-uci-chip-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ci-uci-chip-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
}
.ci-uci-chip-val {
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #fff);
}
.ci-uci-chip-arrow {
  font-size: 10px;
  font-weight: 700;
}
/* v324 — "Computing…" placeholder shimmer for sub-score chips while the
   save promise resolves. Subtle opacity pulse so the user reads the
   value as in-flight, not missing. */
.ci-uci-chip-computing {
  animation: faviChipComputing 1.4s ease-in-out infinite;
}
@keyframes faviChipComputing {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.ci-uci-overview-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 10px 14px;
  background: rgba(235,13,138,0.10);
  border: 1px solid rgba(235,13,138,0.25);
  border-radius: 8px;
  color: #EB0D8A;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s;
}
.ci-uci-overview-btn:hover { background: rgba(235,13,138,0.16); }

/* v445-insights10: 7-day consistency strip under trend chart */
.ci-week-strip {
  /* v445-pilot24: align with the spark chart above by zeroing horizontal
     margin (parent .ci-uci-tier-trend already has its own padding to set
     the frame). v151: tighter padding + margin so the streak strip reads
     as compact secondary info, not a hero element. */
  margin: 8px 0 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ci-week-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ci-week-strip-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  text-transform: uppercase;
}
.ci-week-strip-count {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
}
.ci-week-strip-count strong { color: #fbbf24; font-weight: 700; }
.ci-week-strip-dots {
  display: flex;
  gap: 6px;
}
.ci-week-strip-dot {
  flex: 1;
  aspect-ratio: 1 / 1;
  /* v151: 32 → 22 so the streak takes less vertical real estate. */
  max-width: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: rgba(0,0,0,0.55);
}

/* ── v445-insights1: Recent sessions card ─────────────────────────── */
.ci-recent-sessions { padding: 14px 14px 10px; margin-bottom: 14px; }
.ci-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.1s;
}
.ci-recent-row:hover { background: rgba(255,255,255,0.02); }
.ci-recent-row:last-of-type { border-bottom: 0; }
.ci-recent-row-main { flex: 1; min-width: 0; }
.ci-recent-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-recent-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
}
.ci-recent-row-uci {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 800;
  min-width: 32px;
  text-align: right;
}
.ci-recent-row-donut {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.ci-recent-all-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.ci-recent-all-btn:hover { background: rgba(255,255,255,0.06); }

/* ── Wave 2: Decoded beat overlay ──────────────────────────────────── */
.favi-decoded-beat {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: faviDecodedFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.favi-decoded-beat.fading { animation: faviDecodedFadeOut 0.28s ease-out both; }
@keyframes faviDecodedFadeIn {
  0% { opacity: 0; backdrop-filter: blur(0); }
  100% { opacity: 1; backdrop-filter: blur(8px); }
}
@keyframes faviDecodedFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.favi-decoded-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(235,13,138,0.18), rgba(0,0,0,0.92) 60%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.favi-decoded-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  text-align: center;
  color: var(--text-primary, #fff);
}
.favi-decoded-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(235,13,138,0.85);
  margin-bottom: 16px;
}
.favi-decoded-headline {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  line-height: 1.1;
}
.favi-decoded-line {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.9);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transform: translateY(4px);
  letter-spacing: 0;
}
.favi-decoded-l2 { font-size: 15px; color: rgba(255,255,255,0.78); }
.favi-decoded-l3 {
  margin-top: 22px;
  padding: 12px 16px;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fbbf24;
  transition: opacity 0.7s ease, transform 0.7s ease;
  transform: translateY(4px);
  display: inline-block;
}
.favi-decoded-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  padding: 12px 28px;
  background: rgba(235,13,138,1);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.15s;
  box-shadow: 0 6px 24px rgba(235,13,138,0.35);
  transform: translateY(8px);
}
.favi-decoded-cta:hover { box-shadow: 0 8px 32px rgba(235,13,138,0.55); }
.favi-decoded-cta:active { transform: translateY(8px) scale(0.98); }

/* ── Wave 2: Tomorrow's recommendation card ───────────────────────── */
.favi-tomorrow-card {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(235,13,138,0.08), rgba(235,13,138,0.02));
  border: 1px solid rgba(235,13,138,0.22);
  border-radius: 12px;
}
.favi-tomorrow-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: #EB0D8A;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.favi-tomorrow-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.favi-tomorrow-main { flex: 1; min-width: 0; }
.favi-tomorrow-preset {
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}
.favi-tomorrow-reason {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  margin-bottom: 6px;
}
.favi-tomorrow-meta {
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
  letter-spacing: 0.2px;
}
.favi-tomorrow-cta {
  width: 100%;
  padding: 10px 14px;
  background: rgba(235,13,138,1);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.favi-tomorrow-cta:hover { background: rgba(235,13,138,0.9); }

/* ── v445-insights1: Advanced view single-CTA ──────────────────────── */
.ci-advanced-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 24px;
  padding: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text-primary, #fff);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.ci-advanced-cta:hover {
  background: rgba(235,13,138,0.06);
  border-color: rgba(235,13,138,0.25);
}
.ci-advanced-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(235,13,138,0.10);
  border-radius: 10px;
  color: #EB0D8A;
}
.ci-advanced-body { flex: 1; min-width: 0; }
.ci-advanced-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  text-transform: uppercase;
}
.ci-advanced-title {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
}
.ci-advanced-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.ci-advanced-arrow {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
}

.ci-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

/* v149 Move 1: persistent-peek collapsible — chevron rotation when open. */
.ci-more-details summary { transition: background .15s; }
.ci-more-details summary:hover { background: var(--surface-hover, rgba(255,255,255,0.04)); }
.ci-more-details summary::-webkit-details-marker { display: none; }
.ci-more-details[open] .ci-more-chev { transform: rotate(90deg); }
@media (min-width: 480px) {
  .ci-stats { grid-template-columns: repeat(4, 1fr); }
}
.ci-stat {
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.ci-stat-val {
  font-family: var(--font-display, sans-serif);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}
.ci-stat-label {
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
  font-weight: 600;
}
.ci-card {
  background: var(--bg-tertiary, #252532);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ci-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ci-card-eyebrow {
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
}
.ci-card-title {
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary, #fff);
}
.ci-card-sub {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
}
.ci-week-card .ci-week-dots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ci-week-dot {
  flex: 1;
  aspect-ratio: 1/1;
  max-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
}
.ci-trend-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
  letter-spacing: 0.8px;
  font-weight: 600;
}
.ci-best-card {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(235,13,138,0.08));
  border: 1px solid rgba(251,191,36,0.28);
  transition: transform 0.15s, border-color 0.2s;
  padding: 14px;
}
.ci-best-card:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.5); }
.ci-best-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ci-best-donut {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}
.ci-best-meta-col {
  flex: 1;
  min-width: 0;
}
.ci-best-title {
  margin-top: 6px;
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
}
.ci-best-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
}
.ci-arch-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
}
.ci-arch-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.14); }
.ci-raw-disclosure {
  margin-top: 24px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  padding-top: 14px;
}
.ci-raw-disclosure summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  text-transform: uppercase;
  letter-spacing: 1.2px;
  list-style: none;
  padding: 8px 0;
}
.ci-raw-disclosure summary::-webkit-details-marker { display: none; }
.ci-raw-disclosure[open] summary { color: var(--text-primary, #fff); }
.ci-raw-disclosure summary::before {
  content: '\u25B8';
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.15s ease;
}
.ci-raw-disclosure[open] summary::before {
  transform: rotate(90deg);
}

/* v341: Unified session carousel (For You / Favourites / All).
   Replaces five consecutive rails with a single tab container so
   the user never has to scroll through 5 section headers to find a
   session. Horizontal tracks preserved inside each tab so the
   paging feel remains iOS-native. */
.gw-sessions-card {
  background: var(--bg-secondary, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
  border-radius: 14px;
  padding: 12px 12px 14px;
  margin-bottom: 18px;
}
.gw-sessions-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.gw-fav-choose-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 10px;
  color: #fbbf24;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.gw-fav-choose-btn--done {
  background: var(--brand-magenta, #EB0D8A);
  border-color: transparent;
  color: #fff;
}
.gw-fav-choose-btn-label {
  display: inline;
}
@media (max-width: 380px) {
  .gw-fav-choose-btn-label { display: none; }
  .gw-fav-choose-btn { padding: 10px; }
}
.gw-tabs-edit-banner {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(251,191,36,0.08);
  border: 1px dashed rgba(251,191,36,0.35);
  border-radius: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  line-height: 1.5;
}
.gw-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  margin-bottom: 12px;
}
.gw-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.gw-tab:hover { color: var(--text-primary, #fff); }
.gw-tab.active {
  background: var(--bg-tertiary, #252532);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.gw-tab-panel {
  display: none;
}
.gw-tab-panel.active {
  display: block;
  animation: gw-tab-fadein 0.18s ease;
}
@keyframes gw-tab-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gw-tabs-subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  margin: 14px 4px 8px;
}
.gw-tab-panel > .sp-rail-track:first-child,
.gw-tab-panel > .gw-tabs-subhead:first-child + .sp-rail-track {
  margin-top: 0;
}
.gw-tabs-empty {
  padding: 24px 18px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 12px;
}

/* v341: Larger hero variant — applied on the home picker so the user's
   eye lands on ONE thing first. Calm does this with their "Play
   something today" card at ~260px tall; we match that height and bulk
   up the typography + play button so the page has an obvious first
   action instead of 8 competing blocks. */
.gr-hero-large {
  min-height: 220px;
  padding: 28px 26px 32px;
  margin-bottom: 22px;
}
.gr-hero-large .gr-hero-label { font-size: 10px; letter-spacing: 2px; margin-bottom: 14px; }
.gr-hero-large .gr-hero-title { font-size: 32px; margin-bottom: 10px; }
.gr-hero-large .gr-hero-sub { font-size: 15px; margin-bottom: 10px; }
.gr-hero-large .gr-hero-evidence { font-size: 12px; max-width: 64%; }
.gr-hero-large .gr-hero-play {
  width: 68px; height: 68px;
  right: 22px; bottom: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.gr-hero-large .gr-hero-play svg { width: 28px; height: 28px; }
@media (max-width: 420px) {
  .gr-hero-large { min-height: 210px; padding: 24px 22px 28px; }
  .gr-hero-large .gr-hero-title { font-size: 26px; }
  .gr-hero-large .gr-hero-play { width: 58px; height: 58px; right: 18px; bottom: 18px; }
}

/* Archetype strip (home) — v308 */
.gr-archetype {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 14px; margin-bottom: 20px;
  cursor: pointer; transition: transform 0.15s, border-color 0.2s;
}
.gr-archetype:hover { transform: translateY(-1px); border-color: var(--border-default); }
.gr-archetype-radar { flex-shrink: 0; }
.gr-archetype-text { flex: 1; min-width: 0; }
.gr-archetype-text .label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-tertiary); text-transform: uppercase;
}
.gr-archetype-text .name {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em; margin: 3px 0 5px; line-height: 1.1;
}
.gr-archetype-text .desc {
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* v315: Community card */
.gr-community {
  position: relative;
  padding: 16px 18px 18px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(36,165,235,0.06), rgba(235,13,138,0.04));
  border: 1px solid rgba(36,165,235,0.18);
  border-radius: 16px;
  overflow: hidden;
}
.gr-community::before {
  content: ''; position: absolute; top: -60%; right: -30%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(36,165,235,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.gr-community-dismiss {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); cursor: pointer;
  font-size: 12px; line-height: 1;
}
.gr-community-dismiss:hover { color: var(--text-primary); border-color: var(--border-default); }
.gr-community-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gr-community-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.gr-community-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: faviPresencePulseLive 1.4s ease-in-out infinite;
}
@keyframes faviPresencePulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
@keyframes faviPresencePulse {
  0%   { transform: scale(1); color: #10b981; }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); color: inherit; }
}
.favi-presence-pulse {
  display: inline-block;
  animation: faviPresencePulse 0.65s ease-out;
}

/* v445-insights11 (Wave 3): Pattern card */
.ci-pattern-card {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02));
  border: 1px solid rgba(167,139,250,0.28);
  border-radius: 12px;
}
.ci-pattern-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: #a78bfa;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ci-pattern-sentence {
  font-family: var(--font-display, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.ci-pattern-meta {
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  margin-bottom: 12px;
}
.ci-pattern-cta {
  width: 100%;
  padding: 10px 14px;
  background: rgba(167,139,250,0.16);
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 8px;
  color: #a78bfa;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s;
}
.ci-pattern-cta:hover { background: rgba(167,139,250,0.24); }
.gr-community-hero {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.gr-community-total {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1;
}
.gr-community-sub {
  font-size: 12px; color: var(--text-secondary); line-height: 1.3;
}
.gr-community-split {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle);
}
.gr-split-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--text-secondary);
}
.gr-split-item .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.gr-week-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.gr-week-title {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--text-tertiary); text-transform: uppercase;
}
.gr-week-stat {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}
.gr-week-stat + .gr-week-stat { color: var(--c6); }
.gr-week-bars {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.gr-week-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 0;
}
.gr-week-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s;
}
.gr-week-day.active .gr-week-dot {
  background: var(--brand-magenta);
  border-color: var(--brand-magenta);
  box-shadow: 0 0 10px rgba(235,13,138,0.5);
}
.gr-week-day.today .gr-week-dot {
  transform: scale(1.2);
}
.gr-week-day.today:not(.active) .gr-week-dot {
  border-color: var(--brand-magenta);
  background: transparent;
}
.gr-week-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text-tertiary);
}
.gr-week-day.today .gr-week-label { color: var(--brand-magenta); }

/* ═══ v317: DAW Insights shared layer (KPIs + actions + notes) ═══ */
.dawi-kpis {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin: 0 0 12px 0;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.dawi-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; background: var(--bg-deepest);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  min-width: 62px;
}
.dawi-kpi-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--text-tertiary); text-transform: uppercase;
}
.dawi-kpi-value {
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.1;
}

.dawi-actions {
  margin: 14px 0;
  background: linear-gradient(135deg, rgba(36,165,235,0.06), rgba(235,13,138,0.04));
  border: 1px solid rgba(36,165,235,0.18);
  border-radius: 12px;
  padding: 14px 16px;
}
.dawi-actions-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dawi-actions-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--text-tertiary); text-transform: uppercase;
}
.dawi-actions-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  background: var(--bg-deepest); padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.dawi-actions-list { display: flex; flex-direction: column; gap: 8px; }
.dawi-action {
  padding: 10px 12px 12px; background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-magenta);
  border-radius: 8px;
}
.dawi-action-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.dawi-action-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.dawi-action-body {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.dawi-action-cta {
  margin-top: 8px;
  padding: 6px 12px; background: var(--brand-magenta); border: none;
  border-radius: 6px; color: #fff; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer;
  transition: background 0.15s;
}
.dawi-action-cta:hover { background: #d4097a; }
.dawi-action-hint {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
}

.dawi-notes { margin: 14px 0; }
.dawi-notes-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 6px;
}
.dawi-notes-ta {
  width: 100%; min-height: 80px; padding: 10px 12px;
  background: var(--bg-deepest); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  resize: vertical;
}
.dawi-notes-ta:focus { outline: none; border-color: var(--brand-magenta); }

/* v318: Export button + KPI diff pills */
.dawi-kpi { position: relative; cursor: help; }
.dawi-kpi-diff {
  position: absolute; top: 4px; right: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
}
.dawi-export-btn {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: 6px; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.dawi-export-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* v319: Compare dropdown */
.dawi-compare {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.dawi-compare-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--text-tertiary); text-transform: uppercase;
}
.dawi-compare-select {
  background: var(--bg-deepest); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 4px 8px; font-size: 11px;
  color: var(--text-primary); font-family: var(--font-mono);
  cursor: pointer;
}
.dawi-compare-select:focus { outline: none; border-color: var(--brand-magenta); }

/* v318: Print styles — hide chrome, full-width DAW */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .app-sidebar, .mobile-bottom-nav, .favi-live-eeg-badge, .favi-live-eeg-panel,
  .sidebar, .mobile-nav, nav, .favi-bottom-nav, #gw-immersive, .auth-gate,
  button.dawi-export-btn, .srv-actions, .srv-topbar .srv-actions, #favi-toast-container,
  .gr-community-dismiss { display: none !important; }
  .dawi-kpis, .dawi-actions, .srv-lane {
    break-inside: avoid;
    background: #fafafa !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
  }
  .dawi-actions { background: #fff !important; border: 1px solid #333 !important; }
  .srv-stage-seg, .srv-clip, .srv-hm-cell { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* v320: Timeline annotations */
.srv-anno-lane {
  position: relative; margin-top: 14px; padding: 12px 14px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.srv-anno-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.srv-anno-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--text-tertiary); text-transform: uppercase;
}
.srv-anno-add-btn {
  padding: 4px 10px; background: var(--bg-tertiary); border: 1px dashed var(--border-default);
  border-radius: 6px; color: var(--text-secondary);
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.srv-anno-add-btn:hover { color: var(--brand-magenta); border-color: var(--brand-magenta); }
.srv-anno-track {
  position: relative; height: 44px;
  background: var(--bg-deepest); border-radius: 6px;
  border: 1px solid var(--border-subtle);
  cursor: crosshair;
}
.srv-anno-track::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(255,255,255,0.1);
}
.srv-anno-pin {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg-deepest);
  cursor: pointer; transition: transform 0.15s;
  z-index: 2;
}
.srv-anno-pin:hover { transform: translate(-50%, -50%) scale(1.35); z-index: 5; }
.srv-anno-pin[data-kind="subj"]  { background: var(--brand-magenta); }
.srv-anno-pin[data-kind="obs"]   { background: var(--brand-blue); }
.srv-anno-pin[data-kind="issue"] { background: #f87171; }
.srv-anno-pin[data-kind="peak"]  { background: var(--c6); box-shadow: 0 0 10px rgba(251,191,36,0.6); }
.srv-anno-popover {
  position: absolute; top: 100%; margin-top: 8px; left: 50%;
  transform: translateX(-50%);
  min-width: 220px; max-width: 280px;
  padding: 10px 12px; background: var(--bg-elevated);
  border: 1px solid var(--border-default); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-size: 12px; color: var(--text-primary);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.srv-anno-pin:hover + .srv-anno-popover,
.srv-anno-popover:hover { opacity: 1; pointer-events: auto; }
.srv-anno-popover .srv-anno-time {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
  margin-bottom: 4px;
}
.srv-anno-popover .srv-anno-text {
  font-size: 12px; line-height: 1.4;
}
.srv-anno-popover .srv-anno-del {
  display: block; margin-top: 6px;
  background: none; border: none; color: var(--text-tertiary);
  font-size: 10px; text-decoration: underline; cursor: pointer; padding: 0;
}
.srv-anno-legend {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
  font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary);
}
.srv-anno-legend span { display: inline-flex; align-items: center; gap: 4px; }
.srv-anno-legend .dot { width: 6px; height: 6px; border-radius: 50%; }

/* v319: Overlay stage tape for A/B compare */
.srv-stage-tape.compare {
  opacity: 0.5; margin-top: 2px; height: 18px;
}
.srv-stage-tape.compare-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary);
  margin-top: 2px; letter-spacing: 1.2px; text-transform: uppercase;
}

/* v322: Scrub playhead */
.srv-lane-body.scrubbable { cursor: ew-resize; }
.srv-scrub-playhead {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--brand-magenta);
  z-index: 10; pointer-events: none;
  box-shadow: 0 0 8px rgba(235,13,138,0.6);
}
.srv-scrub-playhead::before {
  content: ''; position: absolute; top: -3px; left: -5px;
  width: 12px; height: 12px; background: var(--brand-magenta);
  border-radius: 50%; box-shadow: 0 0 10px rgba(235,13,138,0.8);
}
.srv-scrub-readout {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 14px; padding: 8px 14px;
  background: rgba(13,13,20,0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.srv-scrub-readout strong { color: var(--text-primary); }
.srv-scrub-readout .stage-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px;
}

/* ═══ v319: PRESET DESIGNER (macro-knob surface) ═══ */
.pd-shell { padding: 20px 24px 60px; max-width: 1000px; margin: 0 auto; }
.pd-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 16px; flex-wrap: wrap;
}
.pd-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1;
}
.pd-subtitle {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}
.pd-header-actions { display: flex; gap: 8px; }
.pd-btn {
  padding: 8px 14px; font-family: var(--font-display); font-size: 12px;
  font-weight: 700; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.pd-btn-ghost {
  background: transparent; border-color: var(--border-default); color: var(--text-secondary);
}
.pd-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pd-btn-primary {
  background: var(--brand-magenta); color: #fff; border-color: var(--brand-magenta);
}
.pd-btn-primary:hover { background: #d4097a; }

.pd-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  align-items: center;
  padding: 20px 22px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(134,53,160,0.12), rgba(235,13,138,0.06));
  border: 1px solid rgba(235,13,138,0.22);
  border-radius: 14px;
}
.pd-hero-uci {
  grid-row: span 2; align-self: center;
  font-family: var(--font-display); font-size: 56px; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
}
.pd-hero-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-tertiary); text-transform: uppercase;
}
.pd-hero-sub { font-size: 13px; color: var(--text-secondary); }

.pd-preview {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.pd-preview-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 8px;
}
.pd-freq-svg { width: 100%; height: 120px; display: block; }
.pd-phase-bar {
  display: flex; height: 60px; gap: 2px;
}
.pd-phase {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  overflow: hidden; min-width: 24px;
}
.pd-phase-name {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; color: rgba(255,255,255,0.95); text-transform: uppercase;
}
.pd-phase-dur {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.65); align-self: flex-end;
}

.pd-knob-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .pd-knob-grid { grid-template-columns: repeat(2, 1fr); }
}
.pd-knob {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: help;
}
.pd-knob-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--text-tertiary); text-transform: uppercase;
  text-align: center;
}
.pd-knob-ring { position: relative; }
.pd-knob-value {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.pd-knob-value {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.01em; line-height: 1;
}
.pd-knob-unit {
  display: block; font-size: 9px; font-weight: 600;
  color: var(--text-tertiary); margin-top: 2px; letter-spacing: 0.5px;
}
.pd-knob-input {
  width: 100%; accent-color: var(--brand-magenta);
  height: 3px;
}

.pd-saved-section {
  padding: 16px; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.pd-saved-header {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 10px;
}
.pd-saved-empty {
  font-size: 12px; color: var(--text-tertiary);
  font-style: italic; text-align: center; padding: 16px;
}
.pd-saved-list { display: flex; flex-direction: column; gap: 8px; }
.pd-saved-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--bg-deepest);
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.pd-saved-name {
  flex: 1; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.pd-saved-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.pd-saved-load, .pd-saved-del, .pd-saved-launch {
  padding: 4px 10px; font-size: 10px; font-weight: 600;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.pd-saved-load {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.pd-saved-load:hover { border-color: var(--brand-magenta); color: var(--brand-magenta); }
.pd-saved-launch {
  background: var(--brand-magenta); color: #fff; border: 1px solid var(--brand-magenta);
}
.pd-saved-launch:hover { background: #d4097a; }
.pd-saved-del {
  background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-default);
}
.pd-saved-del:hover { color: #f87171; border-color: #f87171; }

/* v321: Progress step indicator */
.pd-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.pd-step {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-tertiary);
}
.pd-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-deepest); border: 1.5px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.pd-step-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.pd-step-line {
  width: 28px; height: 1px; margin: 0 8px;
  background: var(--border-subtle);
}
.pd-step-line-done { background: var(--brand-magenta); }
.pd-step-active .pd-step-dot { border-color: var(--brand-magenta); color: var(--brand-magenta); }
.pd-step-active .pd-step-label { color: var(--brand-magenta); }
.pd-step-done .pd-step-dot {
  background: var(--brand-magenta); border-color: var(--brand-magenta); color: #fff;
}
.pd-step-done .pd-step-label { color: var(--text-secondary); }
@media (max-width: 640px) {
  .pd-steps { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .pd-step-line { display: none; }
}

/* v321: Context explainer card */
.pd-context {
  padding: 12px 14px; margin-bottom: 20px;
  background: rgba(36,165,235,0.05);
  border: 1px solid rgba(36,165,235,0.15);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.pd-context-item {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.pd-context-item strong { color: var(--text-primary); font-weight: 600; }
.pd-context-item em { color: var(--brand-magenta); font-style: normal; font-weight: 600; }

/* ═══ v311: SESSION REVIEW DAW (practitioner view) ═══ */
.srv-shell { padding: 16px 20px 40px; max-width: 1400px; margin: 0 auto; }
.srv-topbar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle);
}
.srv-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-primary);
}
.srv-select {
  flex: 1; max-width: 480px; padding: 8px 14px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  border-radius: 8px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-primary); cursor: pointer;
}
.srv-actions { display: flex; gap: 8px; }
.srv-btn {
  padding: 8px 14px; background: transparent; border: 1px solid var(--border-default);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.srv-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

.srv-empty {
  padding: 60px 20px; text-align: center;
  background: var(--bg-secondary); border: 1px dashed var(--border-default);
  border-radius: 14px;
}
/* v321: Explainer panel shown when there are no sessions yet */
.srv-explainer {
  padding: 28px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-top: 12px;
}
.srv-explainer-head {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-primary);
  margin-bottom: 18px;
}
.srv-explainer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.srv-explainer-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-magenta); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  margin-bottom: 8px;
}
.srv-explainer-step-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 4px;
}
.srv-explainer-step-body {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.srv-explainer-step-body em { color: var(--brand-magenta); font-style: normal; font-weight: 600; }
.srv-empty-cta {
  padding-top: 20px; border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.srv-empty-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 8px;
}
.srv-empty-sub { font-size: 13px; color: var(--text-secondary); max-width: 440px; margin: 0 auto; line-height: 1.5; }
.srv-empty-lane { padding: 20px; text-align: center; color: var(--text-tertiary); font-size: 12px; }

/* Meta bar */
.srv-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; margin-bottom: 16px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 12px; gap: 16px; flex-wrap: wrap;
}
.srv-meta-main { min-width: 0; flex: 1; }
.srv-meta-preset { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.srv-meta-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.srv-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.srv-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; background: var(--bg-deepest);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  min-width: 70px;
}
.srv-kpi-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-tertiary); }
.srv-kpi-value { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }

/* Lanes */
.srv-lane {
  display: grid; grid-template-columns: 120px 1fr;
  margin-bottom: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: 12px; overflow: hidden;
}
.srv-lane-header {
  padding: 14px 14px; background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.srv-lane-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-primary);
  word-break: normal; overflow-wrap: normal;
}
.srv-lane-sub {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
  word-break: normal; overflow-wrap: normal;
}
.srv-lane-body { padding: 10px 12px; position: relative; }
.srv-sub-title {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 6px; margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal;
}
.srv-sub-title:first-child { margin-top: 0; }

.srv-ruler {
  position: relative; height: 18px; border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.srv-tick {
  position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.08);
}
.srv-tick span {
  position: absolute; top: 2px; left: 4px;
  font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary);
  white-space: nowrap;
}

.srv-clips { display: flex; height: 80px; gap: 2px; }

/* v314: frequency automation sub-lane */
.srv-freq-lane {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  position: relative;
}
.srv-freq-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 4px;
}
.srv-freq-flat { color: var(--brand-magenta); font-weight: 700; }
.srv-freq-svg {
  display: block; width: 100%; height: 60px;
}
.srv-clip {
  position: relative; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 8px;
  min-width: 0;
}
/* v436: narrow flex clips (a short phase can be <20px wide on mobile) inherit
   body's `word-break: break-word` and stack text letter-per-line. Force the
   label + duration to stay on one line and clip overflow — no more stacking. */
.srv-clip-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; color: rgba(255,255,255,0.9); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal;
}
.srv-clip-dur {
  font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.6); align-self: flex-end;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; max-width: 100%;
}

.srv-stage-tape { display: flex; height: 28px; gap: 0; }
.srv-stage-seg { flex: 1; min-width: 1px; }

.srv-heatmap { display: grid; grid-template-rows: repeat(9, 1fr); gap: 1px; margin-top: 2px; }
.srv-hm-row { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; height: 16px; }
.srv-hm-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-align: right; }
/* v348: 44-row fine-FFT variant. Rows are shorter and the label rail
   is wider to fit "44Hz" comfortably. */
.srv-heatmap-fine { grid-template-rows: repeat(44, 1fr); }
.srv-hm-row-fine { grid-template-columns: 34px 1fr; height: 6px; }
.srv-hm-row-fine .srv-hm-label { font-size: 9px; letter-spacing: 0; }
.srv-hm-cells { display: flex; gap: 1px; height: 100%; }
.srv-hm-cell { flex: 1; min-width: 1px; background: rgba(6,182,212,0.05); border-radius: 1px; }

.srv-notes {
  width: 100%; min-height: 120px; padding: 12px;
  background: var(--bg-deepest); border: 1px solid var(--border-default);
  border-radius: 8px; color: var(--text-primary);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  resize: vertical;
}
.srv-notes:focus { outline: none; border-color: var(--brand-magenta); }

@media (max-width: 640px) {
  .srv-shell { padding: 12px 14px 40px; }
  .srv-topbar { flex-wrap: wrap; }
  .srv-select { max-width: 100%; }
  .srv-lane { grid-template-columns: 72px 1fr; }
  .srv-lane-header { padding: 10px 8px; }
  .srv-meta { flex-direction: column; align-items: flex-start; }
  .srv-kpis { width: 100%; }
}

/* ═══ v297: ACCESSIBILITY ═══ */

/* Skip link — visible on keyboard focus only */
.skip-link:focus {
  position: fixed !important;
  left: 0 !important; top: 0 !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  z-index: 99999 !important;
}

/* Reduced motion — respect user's OS preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Minimum font size enforcement — override sub-10px inline styles */
@media screen {
  .favi-min-font, [data-min-font] { font-size: max(11px, inherit) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Session Simulator (v327) — dev/QA tool for replaying CSV data into the live
   pipeline. Visible only with ?sim=1 or for admin users.
   ══════════════════════════════════════════════════════════════════════════ */
.session-sim-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 99990;
  padding: 8px 14px;
  background: #18182a;
  border: 1px solid rgba(235, 13, 138, 0.45);
  color: #fff;
  font-family: var(--font-display, system-ui);
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(235, 13, 138, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.session-sim-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(235, 13, 138, 0.35);
}

.session-sim-panel {
  position: fixed; right: 16px; bottom: 68px; z-index: 99991;
  width: 320px; max-width: calc(100vw - 32px);
  background: rgba(12, 12, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  display: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.session-sim-panel.open { display: block; }

.session-sim-panel .ssim-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.session-sim-panel .ssim-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
}
.session-sim-panel .ssim-hd-actions {
  display: flex; gap: 4px; align-items: center;
}
.session-sim-panel .ssim-close,
.session-sim-panel .ssim-mini {
  background: transparent; border: none; color: rgba(255, 255, 255, 0.5);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.session-sim-panel .ssim-mini { font-size: 14px; padding-bottom: 6px; }
.session-sim-panel .ssim-close:hover,
.session-sim-panel .ssim-mini:hover { color: #fff; }

/* Minimized state — shrink to a compact strip in the bottom-right so the
   session view behind is fully visible. The header stays clickable. */
.session-sim-panel.minimized .ssim-body { display: none; }
.session-sim-panel.minimized {
  width: auto;
  min-width: 200px;
}

.session-sim-panel .ssim-body { padding: 12px 14px 14px; }
.session-sim-panel .ssim-field {
  display: block; margin-bottom: 10px;
}
.session-sim-panel .ssim-field > span {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px; font-weight: 600;
}
.session-sim-panel input[type="file"],
.session-sim-panel select {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
}
.session-sim-panel input[type="file"] {
  padding: 4px;
}
.session-sim-panel input[type="file"]::file-selector-button {
  background: rgba(235, 13, 138, 0.25);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-right: 8px;
}
.session-sim-panel .ssim-hint {
  margin-top: 4px; font-size: 10px; color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}
.session-sim-panel .ssim-check {
  display: flex; align-items: center; gap: 6px;
}
.session-sim-panel .ssim-check > span {
  display: inline; margin: 0; text-transform: none;
  letter-spacing: 0; font-weight: 500; font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.session-sim-panel .ssim-controls {
  display: flex; gap: 8px; margin-top: 12px;
}
.session-sim-panel .ssim-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.session-sim-panel .ssim-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.session-sim-panel .ssim-btn.ssim-primary {
  background: linear-gradient(135deg, #EB0D8A, #8B3FF0);
  border-color: transparent;
}

.session-sim-panel .ssim-status {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 10px 12px;
}
.session-sim-panel .ssim-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0;
  font-size: 11px;
}
.session-sim-panel .ssim-row > span { color: rgba(255, 255, 255, 0.55); }
.session-sim-panel .ssim-row > strong {
  color: #fff; font-variant-numeric: tabular-nums; font-weight: 600;
}

.session-sim-panel .ssim-bar-wrap {
  margin-top: 10px; height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px; overflow: hidden;
}
.session-sim-panel .ssim-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #EB0D8A, #8B3FF0);
  transition: width 0.2s ease;
}

.session-sim-panel .ssim-log {
  margin-top: 12px;
  max-height: 96px; overflow-y: auto;
  font-size: 10px; color: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  padding-right: 4px;
}

.session-sim-panel .ssim-quicklook {
  margin-top: 12px;
  display: block;
}
.session-sim-panel .ssim-quicklook:empty { display: none; }
.session-sim-panel .ssim-quicklook .srv-ql-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5); margin: 0 0 4px;
}
/* Compact overrides for the embedded SessionReview renderer */
.session-sim-panel .ssim-quicklook .srv-stage-tape {
  display: flex; height: 18px;
  border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.session-sim-panel .ssim-quicklook .srv-stage-seg { flex: 1; }
.session-sim-panel .ssim-quicklook .srv-heatmap {
  display: flex; flex-direction: column; gap: 1px;
}
.session-sim-panel .ssim-quicklook .srv-hm-row {
  display: flex; align-items: center; gap: 6px;
  height: 10px;
}
.session-sim-panel .ssim-quicklook .srv-hm-label {
  width: 14px; font-size: 8px; color: rgba(255,255,255,0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.session-sim-panel .ssim-quicklook .srv-hm-cells {
  display: flex; flex: 1; height: 100%; gap: 1px;
}
.session-sim-panel .ssim-quicklook .srv-hm-cell { flex: 1; height: 100%; }

.session-sim-panel .ssim-fallback-tape {
  display: flex; height: 16px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.session-sim-panel .ssim-fallback-tape .ssim-tape-cell { flex: 1; }
.ssim-tape-cell.s-C0 { background: #6b7280; }
.ssim-tape-cell.s-C1 { background: #3b82f6; }
.ssim-tape-cell.s-C2 { background: #8b5cf6; }
.ssim-tape-cell.s-C3 { background: #a855f7; }
.ssim-tape-cell.s-C4 { background: #d946ef; }
.ssim-tape-cell.s-C5 { background: #ec4899; }
.ssim-tape-cell.s-C6 { background: #fbbf24; }

/* v330: Settings → EEG Source page (admin-only) */
#panel-developer-eeg {
  padding: 24px 24px 80px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-primary);
}
.eegs-hd {
  margin-bottom: 24px;
}
.eegs-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.eegs-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.eegs-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-tertiary, #252532);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
}
.eegs-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

/* Mode picker */
.eegs-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.eegs-mode-card {
  position: relative;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.eegs-mode-card:hover { background: rgba(255, 255, 255, 0.05); }
.eegs-mode-card.active {
  background: rgba(235, 13, 138, 0.1);
  border-color: rgba(235, 13, 138, 0.55);
}
.eegs-mode-card input[type="radio"] {
  position: absolute; top: 10px; right: 10px;
  accent-color: #EB0D8A;
}
.eegs-mode-icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.eegs-mode-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.eegs-mode-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Radio CSVs */
.eegs-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.eegs-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
}
.eegs-radio:hover { background: rgba(255, 255, 255, 0.05); }
.eegs-radio input[type="radio"] { accent-color: #EB0D8A; margin: 0; }
.eegs-radio-body { flex: 1; }
.eegs-radio-title { display: block; font-size: 13px; font-weight: 600; }
.eegs-radio-sub { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.eegs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}
.eegs-row-label { font-size: 13px; color: var(--text-secondary); }
.eegs-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  min-width: 160px;
}
.eegs-hint {
  margin-top: 14px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.06);
  border-left: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Status */
.eegs-status-row {
  display: flex; align-items: center; gap: 10px;
}
.eegs-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.eegs-status-dot.on {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.eegs-status-tag {
  margin-left: auto;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-tertiary);
}

/* Save actions */
.eegs-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
}
.eegs-btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, #8635A0, #EB0D8A);
  color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.eegs-saved-msg {
  font-size: 11px;
  color: #10b981;
  opacity: 0;
  transition: opacity 0.3s;
}
.eegs-saved-msg.on { opacity: 1; }

.eegs-advanced {
  margin-top: 18px; text-align: center;
  font-size: 11px;
}
.eegs-advanced a {
  color: var(--text-tertiary);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* v330/v332: Sim status chip (top-right of session view while sim active).
   Two variants: admin gets green SIM, non-admin demo user gets amber DEMO. */
.favi-sim-chip {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 99992;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #10b981;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.favi-sim-chip .dot {
  width: 6px; height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: favi-sim-pulse 2s ease-in-out infinite;
}
.favi-sim-chip.demo {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fbbf24;
}
.favi-sim-chip.demo .dot {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}
@keyframes favi-sim-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* v332: Three-pane session experience ────────────────────────────────────
   Host (#gw-immersive) becomes a horizontal scroller with scroll-snap.
   Each .gw-pane is a full-viewport snapped panel. */
#gw-immersive.gw-panes-ready,
#gw-immersive[data-panes-wired="1"] { padding: 0 !important; }
#gw-immersive[data-panes-wired="1"]::-webkit-scrollbar { display: none; }

.gw-pane {
  flex: 0 0 100%;
  width: 100vw;
  height: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  /* v333→v334 motion: each pane is driven by --pane-focus (0 = off-screen,
     1 = centred). Set every frame by session-panes.js scroll handler. */
  --pane-focus: 1;
  transition: transform 0.2s linear;
}
/* Subtle content scale + fade tied to pane focus — like iOS page control.
   Inner content moves slightly on swipe but overall pane position is fixed
   by flex layout. Scale+opacity makes adjacent panes feel closer to focus. */
.gw-pane > *:not(.gw-aurora-canvas):not(#gw-aurora-canvas) {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gw-pane:not(.gw-pane-active) > *:not(#gw-aurora-canvas):not(.gw-aurora-canvas) {
  opacity: calc(0.35 + 0.65 * var(--pane-focus));
  transform: scale(calc(0.96 + 0.04 * var(--pane-focus)));
}
/* v602 (Henry, 3rd report — "move down the gauge, C3 chopped"): the Live-Brain
   pane (#gw-pane-2) uses justify-content:center, so its content (gauge first)
   was vertically centred into the zone covered by the floating transport
   overlay (title + timer + SETTLE/DEEP/BRIDGE bar). On iOS that overlay sits
   ~230px down (20px + the ~91px native chrome bar + the card), so the gauge's
   top label C3 rendered UNDER it. Top-align this pane and pad its top to clear
   the overlay so the whole gauge (C0–C6) sits below it. Scrolls if tall. */
#gw-pane-2 {
  justify-content: flex-start !important;
  /* v680 (Henry): the big live C-state readout + its explainer ate the middle,
     and the v679 +64 clipped the gauge top (C3). Hide that middle block (the
     needle + the Now thermometer already show the live state) and restore enough
     top clearance to bring C3 back — which frees room for the FULL over-time +
     Now charts (C6 all the way down to C0). */
  padding-top: calc(var(--favi-chrome-h, 0px) + 100px) !important;
  padding-bottom: 50px !important;
}
/* v680 — reclaim the middle: drop the big live C-state label + explainer in Pane 2. */
#gw-pane-2 .gw-coh-block-hero .gw-coh-label,
#gw-pane-2 .gw-coh-explainer { display: none !important; }

/* Pane 1 — the existing breathing/aurora content. We just need to recentre
   it now that the host is a flex-row instead of flex-column. */
#gw-pane-1 {
  justify-content: center;
  align-items: center;
}

/* Plain-English stage card (Pane 1) — positioned mid-bottom of the zen
   view, under the breathing circles. */
#gw-stage-card {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  max-width: 320px;
}
/* v333: Audio-reactive coherence ring. Soft radial pulse behind the
   stage copy — scale + opacity driven by live coherence value. */
#gw-stage-card .gw-coh-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0.2;
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
  transition: transform 1.2s cubic-bezier(0.4,0.0,0.2,1), opacity 1.2s ease;
  animation: gw-coh-breathe 8s ease-in-out infinite;
}
#gw-stage-card .gw-coh-ring.gold circle { fill: url(#gw-ring-grad); }
#gw-stage-card .gw-coh-ring.gold { filter: hue-rotate(30deg) saturate(1.4); }
@keyframes gw-coh-breathe {
  0%, 100% { filter: blur(0.5px); }
  50% { filter: blur(2px); }
}
/* v334: micro fade-pulse when stage actually changes (Warm-up → Arriving → …) */
#gw-stage-card .gw-stage-name,
#gw-stage-card .gw-stage-sub {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#gw-stage-card.gw-stage-change .gw-stage-name {
  animation: gw-stage-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#gw-stage-card.gw-stage-change .gw-stage-sub {
  animation: gw-stage-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 80ms;
}
@keyframes gw-stage-in {
  0%   { opacity: 0.3; transform: translateY(6px); letter-spacing: 0.2em; }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; letter-spacing: normal; }
}
#gw-stage-card .gw-stage-name {
  font-family: var(--font-display, sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  transition: opacity 0.6s ease, color 0.6s ease;
}
#gw-stage-card .gw-stage-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.4px;
  margin-top: 4px;
  transition: opacity 0.6s ease;
}

/* v348: Tester Dashboard (panel-testers) — aggregate view across all
   testers. Visual language matches the Consumer Insights tab so the
   tester viewer feels like a natural extension, not a separate app. */
#panel-testers { padding: 20px 16px 60px; }
.td-wrap { max-width: 1040px; margin: 0 auto; }
.td-header { margin-bottom: 20px; }
.td-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--brand-magenta, #EB0D8A);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.td-title {
  font-family: var(--font-display, sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.td-sub {
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  line-height: 1.55;
  max-width: 680px;
}
.td-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  font-size: 13px;
}
.td-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.td-kpi {
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}
.td-kpi-val {
  font-family: var(--font-display, sans-serif);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.td-kpi-label {
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 6px;
  font-weight: 600;
}
.td-card {
  background: var(--bg-tertiary, #252532);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.td-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.td-card-title {
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary, #fff);
}
.td-card-sub {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
}
.td-card-sub a { color: var(--brand-magenta, #EB0D8A); text-decoration: none; }
.td-table-wrap { overflow-x: auto; }
.td-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.td-table thead th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.td-row td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary, #fff);
}
.td-row { cursor: pointer; transition: background 0.15s ease; }
.td-row:hover { background: rgba(255,255,255,0.03); }
.td-row.active { background: rgba(235,13,138,0.1); }
.td-tester-email { font-weight: 600; }
.td-tester-kind { font-size: 10px; color: var(--text-tertiary, rgba(255,255,255,0.5)); margin-top: 2px; }
.td-empty { text-align: center; color: var(--text-tertiary, rgba(255,255,255,0.5)); padding: 24px 10px; font-style: italic; }
.td-sessions { display: flex; flex-direction: column; gap: 6px; }
.td-session {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.td-session-left { flex: 1; min-width: 0; }
.td-session-kind {
  font-size: 9px;
  letter-spacing: 1.1px;
  font-weight: 700;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
}
.td-session-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-top: 2px;
}
.td-session-meta {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  margin-top: 2px;
}
.td-session-right { text-align: right; flex-shrink: 0; margin-left: 10px; }
.td-session-uci {
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-magenta, #EB0D8A);
}
.td-session-chips { margin-top: 2px; display: flex; gap: 6px; justify-content: flex-end; }
.td-session-chips span {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, rgba(255,255,255,0.65));
}
.td-session-chips span.c6 { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* v348: Pane 4 — 44-bar fine-FFT spectrogram (Personal Profile only).
   Mirrors Pane 2's radial-gradient background so the pager swipe lands
   on a consistent "live data" visual language. 44 vertical bars with
   band-tinted colours; height is driven by the rolling max so the
   floor stays stable during quiet stretches. */
#gw-pane-4 {
  background: radial-gradient(ellipse at center top, #1a1040 0%, #0d0d14 70%);
  justify-content: flex-start;
  padding-top: 12vh;
  padding-bottom: 180px;
}
.gw-pane4-inner {
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.gw-pane4-title {
  font-family: var(--font-display, sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.gw-pane4-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin-top: 8px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* v367: Chart wrapper — Y-axis labels column + 44-bar spectrogram side-by-side. */
.gw-fine-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 20px;
}
.gw-fine-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  min-width: 28px;
  user-select: none;
}
.gw-fine-yaxis span:last-child {
  color: rgba(255, 255, 255, 0.65);
}
.gw-fine-spectrogram {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: 240px;
  flex: 1;
  min-width: 0;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  /* v367: horizontal gridlines at 25/50/75/100 μV to read the bar heights */
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(255, 255, 255, 0.07) calc(25% - 1px),
    rgba(255, 255, 255, 0.07) 25%
  );
}
.gw-fine-bar-wrap {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}
.gw-fine-bar {
  width: 100%;
  min-width: 3px;
  height: 4%;
  border-radius: 2px;
  transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* v368: 9-band tint palette — matches the Neuphoria band schema */
.gw-fine-t-delta      { background: #3b82f6; }  /* blue */
.gw-fine-t-theta      { background: #8b5cf6; }  /* purple */
.gw-fine-t-lowAlpha   { background: #06b6d4; }  /* cyan */
.gw-fine-t-highAlpha  { background: #22d3ee; }  /* light cyan */
.gw-fine-t-smr        { background: #2dd4bf; }  /* teal */
.gw-fine-t-lowBeta    { background: #a78bfa; }  /* light purple */
.gw-fine-t-highBeta   { background: #c4b5fd; }  /* lilac */
.gw-fine-t-lowGamma   { background: #fbbf24; }  /* gold */
.gw-fine-t-highGamma  { background: #f97316; }  /* orange */

/* v369: 9-band axis, uniformly rotated -45°. Each column is just a
   flex-weighted spacer with a coloured top-border tick; the label itself
   is absolutely positioned inside the column, anchored top:0 right:50%,
   and rotated around its top-right corner so it reads diagonally
   down-left from the band's centre line. */
.gw-fine-axis-bands {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 8px 4px 0 36px;  /* left margin matches .gw-fine-yaxis gutter */
  min-height: 84px;        /* room for the rotated labels */
  position: relative;
  font-family: var(--font-display, sans-serif);
  color: rgba(255, 255, 255, 0.75);
}
.gw-fine-band-lbl {
  position: relative;
  min-width: 0;
  height: 4px;            /* just enough to carry the top border tick */
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  overflow: visible;      /* let the rotated label extend below */
}
.gw-fine-band-text {
  position: absolute;
  top: 6px;               /* small gap between tick and label */
  right: 50%;             /* anchor the label's end to band centre */
  transform-origin: top right;
  transform: rotate(-45deg);
  white-space: nowrap;
  padding-right: 4px;     /* tiny breathing room between anchor and text */
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.gw-fine-band-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.gw-fine-band-range {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0;
}
/* Coloured top border under each band so the axis reads like a legend */
.gw-fine-band-lbl.gw-fine-tx-delta      { border-top-color: #3b82f6; color: #93c5fd; }
.gw-fine-band-lbl.gw-fine-tx-theta      { border-top-color: #8b5cf6; color: #c4b5fd; }
.gw-fine-band-lbl.gw-fine-tx-lowAlpha   { border-top-color: #06b6d4; color: #67e8f9; }
.gw-fine-band-lbl.gw-fine-tx-highAlpha  { border-top-color: #22d3ee; color: #a5f3fc; }
.gw-fine-band-lbl.gw-fine-tx-smr        { border-top-color: #2dd4bf; color: #5eead4; }
.gw-fine-band-lbl.gw-fine-tx-lowBeta    { border-top-color: #a78bfa; color: #c4b5fd; }
.gw-fine-band-lbl.gw-fine-tx-highBeta   { border-top-color: #c4b5fd; color: #ddd6fe; }
.gw-fine-band-lbl.gw-fine-tx-lowGamma   { border-top-color: #fbbf24; color: #fde68a; }
.gw-fine-band-lbl.gw-fine-tx-highGamma  { border-top-color: #f97316; color: #fdba74; }

/* v368: Y-axis +/- scale control pinned above the chart */
/* v445-pilot448 — 44/9 band view toggle inside Pane 4 head. */
.gw-fine-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-top: 10px;
}
.gw-fine-mode-btn {
  padding: 6px 14px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: none;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gw-fine-mode-btn:hover { color: rgba(255,255,255,0.85); }
.gw-fine-mode-btn.active {
  background: rgba(235, 13, 138, 0.22);
  color: #fff;
}

/* 9-band spectrogram (alternate view inside Pane 4) */
/* v678 — 9-band view is now HORIZONTAL labelled bars (one row per band),
   restoring the simple readable view that v518 replaced. Overrides the flex-row
   (vertical-bars) layout of .gw-fine-spectrogram for the 9-band container only;
   the 44-band view is untouched. */
.gw-fine-spectrogram--9band {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  padding: 6px 6px;
  height: 100%;
}
.gw-fine-9row { display: flex; align-items: center; gap: 8px; width: 100%; }
.gw-fine-9label { flex: 0 0 66px; font-size: 11px; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
.gw-fine-9track { flex: 1 1 auto; height: 14px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.gw-fine-9fill { height: 100%; width: 1%; border-radius: 4px; transition: width 0.25s ease; }
.gw-fine-9val { flex: 0 0 42px; font-size: 11px; color: rgba(255,255,255,0.92); text-align: left; font-variant-numeric: tabular-nums; }
.gw-fine-bar-wrap--9 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gw-fine-bar-wrap--9 .gw-fine-bar {
  width: 100%;
  border-radius: 4px;
}

.gw-fine-scale-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.gw-fine-scale-lbl {
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 9px;
}
.gw-fine-scale-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(235, 13, 138, 0.12);
  border: 1px solid rgba(235, 13, 138, 0.35);
  border-radius: 50%;
  color: #EB0D8A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.gw-fine-scale-btn:hover:not(:disabled) { background: rgba(235, 13, 138, 0.25); }
.gw-fine-scale-btn:active:not(:disabled) { transform: scale(0.92); }
.gw-fine-scale-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.gw-fine-scale-value {
  min-width: 68px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.gw-fine-explainer {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin-top: 14px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}

/* Pane 2 — Live Brain */
#gw-pane-2 {
  background: radial-gradient(ellipse at center top, #1a1040 0%, #0d0d14 70%);
  justify-content: flex-start;
  padding-top: 12vh;
  /* v338: Reserve scroll room for the fixed bottom chrome (C6 button +
     pager dots sit ~150px up from the bottom). Without this, expanding
     "Show band detail" pushes the explainer text behind the gold C6
     button — user reported content overlap in the v337 bug list. */
  padding-bottom: 180px;
}
.gw-pane2-inner {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.gw-pane-head { margin-bottom: 20px; }
.gw-pane-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(235, 13, 138, 0.75);
  margin-bottom: 10px;
}
.gw-stage-big {
  font-family: var(--font-display, sans-serif);
  font-size: 96px;
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
  transition: color 0.5s ease;
}
.gw-stage-big-name {
  font-family: var(--font-display, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.2px;
}

/* v335: C0-C6 ruler under the big stage letter — 7 dots with labels,
   the active one grows + highlights, past ones are dimmed. */
.gw-stage-ruler {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 20px auto 8px;
  max-width: 320px;
}
.gw-stage-ruler-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gw-stage-ruler-dot.past { opacity: 0.65; }
.gw-stage-ruler-dot.active {
  opacity: 1;
  transform: translateY(-2px);
}
.gw-stage-ruler-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.gw-stage-ruler-dot.past .gw-stage-ruler-bar { background: rgba(168, 85, 247, 0.55); }
.gw-stage-ruler-dot.active .gw-stage-ruler-bar {
  background: linear-gradient(90deg, #ec4899, #fbbf24);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
  height: 6px;
}
.gw-stage-ruler-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: inherit;
  color: rgba(255, 255, 255, 0.7);
}
.gw-stage-ruler-dot.active .gw-stage-ruler-label { color: #fff; }

.gw-stage-next {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.gw-stage-next strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

/* Section eyebrow (used by Coherence + Your Journey headers) */
.gw-section-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 26px;
  margin-bottom: 8px;
}

/* Coherence block container */
.gw-coh-block { text-align: center; }
.gw-coh-explainer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* Needle transition */
#gw-coh-needle {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 100px 110px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

/* Journey hypnogram block */
.gw-pane2-hypno-head {
  text-align: center;
  margin-bottom: 4px;
}
.gw-pane2-hypno-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -2px;
  line-height: 1.5;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.gw-hypno-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.gw-hypno-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.5px;
}
.gw-hypno-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Band-detail explainer card */
.gw-band-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.gw-band-title { font-size: 10px; color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.gw-band-meaning { font-size: 9px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.2px; }

.gw-bands-explainer {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.06);
  border-left: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 4px;
  text-align: left;
}
.gw-bands-explainer-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(59, 130, 246, 0.95);
  margin-bottom: 6px;
}
.gw-bands-explainer-body {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}
.gw-bands-explainer-body strong {
  color: #fff;
  font-weight: 700;
}

/* Coherence arc */
.gw-coh-wrap {
  position: relative;
  margin: 16px auto 16px;
  max-width: 280px;
}
/* v338: Value label now lives BELOW the arc (not inside it). Inside the
   arc the needle sweep crosses through the centre and would overlap the
   digits whenever coherence is near 50. */
.gw-coh-label {
  position: static;
  margin: -8px auto 0;
  text-align: center;
  line-height: 1;
}
.gw-coh-label > span:first-child {
  font-family: var(--font-display, sans-serif);
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.gw-coh-unit {
  display: inline-block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  margin-left: 2px;
}

/* Incremental hypnogram strip */
.gw-pane2-hypno-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
  margin-top: 8px;
}
/* v338: wrapper that holds the hypnogram + an overlaid "now" playhead so the
   user can read time direction. Cells fill left→right over time, so the
   playhead sits pinned at the right edge. */
.gw-pane2-hypno-track {
  position: relative;
  width: 100%;
}
.gw-hypno-playhead {
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: 2px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), #fff 25%, #fff 75%, rgba(255,255,255,0.1));
  box-shadow: 0 0 8px rgba(255,255,255,0.45);
  border-radius: 2px;
  pointer-events: none;
  animation: gw-hypno-playhead-pulse 1.6s ease-in-out infinite;
}
@keyframes gw-hypno-playhead-pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
.gw-hypno-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}
.gw-pane2-hypno {
  display: flex;
  height: 32px;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  padding: 2px;
  gap: 1px;
}
.gw-pane2-hypno-empty {
  width: 100%;
  align-self: center;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.gw-hypno-cell {
  flex: 1;
  min-width: 2px;
  border-radius: 1px;
  opacity: 0.9;
  transform: scaleY(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s ease;
}
/* v334: new-cell entry — pops in from zero height + dim. requestAnimationFrame
   in session-panes.js removes this class on the next frame, triggering the
   transition above for a "drop in" feel. */
.gw-hypno-cell.gw-hypno-cell-enter {
  transform: scaleY(0.2);
  opacity: 0.3;
}

/* Disclosure + bands detail */
.gw-bands-disclose {
  margin-top: 18px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.gw-bands-detail {
  margin-top: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}
.gw-bands-grid { display: flex; flex-direction: column; gap: 6px; }
.gw-band-row {
  display: grid;
  grid-template-columns: 70px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.gw-band-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}
.gw-band-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.gw-band-fill {
  height: 100%;
  background: rgba(6, 182, 212, 0.8);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.gw-band-fill.gamma { background: rgba(251, 191, 36, 0.9); }
.gw-band-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* Pane 3 — Journey */
.gw-journey-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* v334: the scroll handler writes a translateX value on this element
     to create a parallax feel — the art drifts slower than the scroll.
     Short transition smooths scroll-event jitter without adding latency. */
  will-change: transform;
  transition: transform 0.05s linear;
}
.gw-journey-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gw-journey-inner {
  position: relative;
  z-index: 1;
  max-width: 360px;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.gw-journey-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
}
.gw-journey-title {
  font-family: var(--font-display, sans-serif);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.1;
}
.gw-journey-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  font-style: italic;
}

/* v335: Persistent session chrome — top (preset/timer/pause/phase bar)
   and bottom (C6 marker + pager dots). These sit above the scrolling
   pane host so they never disappear when the user swipes. */
.gw-chrome-top {
  position: fixed !important;
  top: var(--favi-chrome-h, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  z-index: 99993 !important;
  padding: 20px 16px 0 !important;
  pointer-events: auto;
}
.gw-chrome-top > * { pointer-events: auto; }

/* v336: Hide the session chrome + C6 marker + sim/demo chip + immersive
   view while the mobile sidebar is open. Without this, the chrome's
   z-index (99993) floats on top of the sidebar (z-index 2000) and the
   underlying picker content bleeds through, producing the layered mess
   from the v335 bug report. Session audio keeps running; only the UI
   affordances hide. Visibility restores the moment the sidebar closes. */
body.sidebar-mobile-open .gw-chrome-top,
body.sidebar-mobile-open .gw-chrome-bottom,
body.sidebar-mobile-open #gw-c6-marker-zone,
body.sidebar-mobile-open .favi-sim-chip,
body.sidebar-mobile-open #gw-immersive {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* The SIM/DEMO chip, once moved into the top chrome, docks top-right
   above the transport card so it stops colliding with Pause. */
.favi-sim-chip.in-chrome {
  position: absolute !important;
  top: -6px !important;
  right: 0 !important;
  transform: translateY(-100%);
  z-index: 99994 !important;
  margin: 0 !important;
}

.gw-chrome-bottom {
  /* v433: solid dark track that pins to the viewport bottom. The C6 button
     + count + pager chip live in here. Previously this container was
     transparent + floated 16px off the bottom, which let the spectrogram
     bars behind pane 4 bleed through the buttons. Now it acts as a proper
     bottom bar: fills to the bottom edge, opaque, subtle top border. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99992;
  /* v445-pilot852 — compact single ROW (was a tall vertical stack). The C6
     square button now sits LEVEL with the pager dots and the whole bar is
     ~55% shorter, reclaiming player space (Henry). */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 7px 0 calc(env(safe-area-inset-bottom, 0) + 7px);
  background: #0A0A0E;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: auto;
}
.gw-chrome-bottom > * { pointer-events: auto; }

/* Strip the original absolute positioning from the C6 marker zone now
   that it lives in the bottom chrome flexbox. */
.gw-chrome-bottom #gw-c6-marker-zone {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  /* v445-pilot852 — small SQUARE button, level with the pager dots (Henry). */
  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
/* star is child 1 (kept, sized to fill the square); the "Tap anywhere when you
   feel C6" caption is child 2 — hidden in the compact square. */
.gw-chrome-bottom #gw-c6-marker-zone > div { margin: 0 !important; }
.gw-chrome-bottom #gw-c6-marker-zone > div:first-child { font-size: 22px !important; line-height: 1 !important; margin: 0 !important; }
.gw-chrome-bottom #gw-c6-marker-zone > div:nth-child(2) { display: none !important; }
.gw-chrome-bottom #gw-c6-count {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Pager — dots, sits inside the bottom chrome LEVEL with the C6 square button. */
#gw-pager {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
/* v445-pilot852 — caption hidden in the compact row bar (Henry: reclaim space). */
.gw-pager-caption { display: none !important; }
.gw-pager-caption--legacy-unused {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease;
}
.gw-pager-dots {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.gw-dot:hover { background: rgba(255, 255, 255, 0.45); }
.gw-dot.active {
  background: #EB0D8A;
  transform: scale(1.35);
  box-shadow: 0 0 12px rgba(235, 13, 138, 0.8);
  animation: gw-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes gw-dot-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(235, 13, 138, 0.8); }
  50%      { box-shadow: 0 0 20px rgba(235, 13, 138, 0.55), 0 0 32px rgba(235, 13, 138, 0.15); }
}

/* v333: Connect-your-headband onboarding overlay ───────────────────────── */
.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: onb-fadein 0.5s ease forwards;
}
.onb-overlay.onb-dismissing { animation: onb-fadeout 0.35s ease forwards; }
@keyframes onb-fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes onb-fadeout { from { opacity: 1; } to { opacity: 0; transform: scale(0.98); } }

.onb-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(235, 13, 138, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #1a0f3d 35%, #2a0a3a 70%, #0a0818 100%);
  background-size: 200% 200%;
  animation: onb-bg-shift 25s ease infinite;
}
@keyframes onb-bg-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

.onb-card {
  position: relative;
  z-index: 1;
  max-width: 440px;
  width: 100%;
  padding: 32px 28px 28px;
  background: rgba(10, 8, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
  color: #fff;
}
.onb-art {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 18px;
  display: block;
}
.onb-art svg { width: 100%; height: auto; display: block; }
.onb-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(235, 13, 138, 0.85);
  margin-bottom: 8px;
}
.onb-title {
  font-family: var(--font-display, sans-serif);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: #fff;
}
.onb-copy {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 20px;
  max-width: 360px;
}
.onb-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  text-align: left;
}
.onb-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.onb-step-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-step-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.onb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.onb-btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.onb-btn-primary {
  background: linear-gradient(135deg, #8635A0, #EB0D8A);
  color: #fff;
  box-shadow: 0 8px 28px rgba(235, 13, 138, 0.3);
}
.onb-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(235, 13, 138, 0.45);
}
.onb-btn-secondary {
  background: transparent;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.onb-btn-secondary:hover {
  background: rgba(251, 191, 36, 0.08);
}
.onb-footnote {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.2px;
}
.onb-footnote a {
  color: rgba(235, 13, 138, 0.9);
  text-decoration: none;
}
.onb-footnote a:hover {
  text-decoration: underline;
}

/* v332: "Try a demo session" CTA on the auth gate */
.auth-try-demo {
  margin-top: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(235, 13, 138, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-try-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.18);
}
.auth-try-demo .sparkle {
  color: #fbbf24;
  margin-right: 6px;
}
.auth-try-demo .arrow {
  float: right;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v390 — COMPANION LAYER DESIGN TOKENS & UTILITIES
   Additive only. Existing tokens (--sp-*, --bg-*, --text-*, --brand-magenta)
   stay intact; this layer adds a small disciplined set of primitives that the
   companion-first Profile hero, drawer, and future hero surfaces consume.

   Principles:
   • One accent — magenta. C-state colours only inside data visualisations.
   • Everything else greyscale.
   • Radius scale (3 steps) replaces the 8/10/12/14/18 proliferation.
   • Type scale (5 steps) replaces 9/10/11/12/13/14/18/20/22 ad-hoc.
   • Utility classes (n-*) keep JSX-style inline styles out of new code.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Radius scale */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;

  /* Type scale — 5 steps. Use these, not ad-hoc pixel values. */
  --fs-label:   11px;  /* SMALL UPPERCASE */
  --fs-body:    13px;  /* default body */
  --fs-title:   15px;  /* section title */
  --fs-heading: 22px;  /* h2-equivalent */
  --fs-display: 32px;  /* hero number */
}

/* ── Card primitive ──────────────────────────────────────────────────── */
.n-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

/* ── Hero surface — companion warmth without illustration investment ──
   Radial magenta glow over a subtle navy-purple gradient. Motion is the
   archetype portrait breathing (keyframes below). */
.n-hero {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  background:
    radial-gradient(circle at 28% 18%, rgba(235, 13, 138, 0.22), transparent 55%),
    radial-gradient(circle at 82% 86%, rgba(134, 53, 160, 0.18), transparent 55%),
    linear-gradient(155deg, #1a0f3d 0%, #0f1a35 55%, #120824 100%);
  overflow: hidden;
  isolation: isolate;
}
.n-hero::before {
  /* Soft top sheen for depth */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  pointer-events: none;
  z-index: 0;
}
.n-hero > * { position: relative; z-index: 1; }

.n-hero-portrait {
  animation: n-breathe 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes n-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.96; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* ── Typography primitives ───────────────────────────────────────────── */
.n-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.n-label-accent { color: var(--brand-magenta); }
.n-label-gold   { color: #fbbf24; }

.n-sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.55;
}

.n-title {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.n-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.n-num {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

/* ── Vertical stacks — replace margin-bottom sprawl ──────────────────── */
.n-stack-4  > * + * { margin-top: var(--sp-1); }
.n-stack-8  > * + * { margin-top: var(--sp-2); }
.n-stack-12 > * + * { margin-top: var(--sp-3); }
.n-stack-16 > * + * { margin-top: var(--sp-4); }
.n-stack-24 > * + * { margin-top: var(--sp-5); }

/* ── Drawer — progressive disclosure of the "instrument" view ──────────
   Wraps the existing dense data cards. Default open for admins testing,
   users can collapse. Chevron rotates on toggle. Slide-in for content is
   handled by the native details element; we just polish chrome. */
.n-drawer {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-secondary);
  margin-top: var(--sp-5);
  overflow: hidden;
}
.n-drawer > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--text-primary);
  transition: background 0.15s;
  user-select: none;
}
.n-drawer > summary::-webkit-details-marker { display: none; }
.n-drawer > summary:hover { background: rgba(255,255,255,0.025); }
.n-drawer > summary .n-drawer-chevron {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
  line-height: 1;
}
.n-drawer[open] > summary .n-drawer-chevron { transform: rotate(180deg); }
.n-drawer-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
/* Inside the drawer, existing cards can keep their styling — we just tighten
   vertical rhythm so the dense view doesn't double-pad against the drawer. */
.n-drawer-body > *:first-child { margin-top: 0; }

/* v445-pilot87 (Henry session #21 walkthrough): on narrow viewports
   (phones in portrait) — reduce the horizontal padding on n-card and
   n-drawer-body so DAW canvases + 3D brain meshes don't lose 40-60px
   of width to nested chrome. Vertical padding kept so the visual
   rhythm doesn't collapse. Henry: "20% of the screen is padding,
   box inside another box inside another box". */
@media (max-width: 720px) {
  .n-card {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
  .n-drawer-body {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
  .n-drawer > summary {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
}

/* ── Hero stat tiles — 3 across on desktop, 3 across on mobile (compact) ─ */
.n-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.n-hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.n-hero-stats .n-label { font-size: 10px; letter-spacing: 0.05em; }

/* ── Companion hero action row (one primary CTA + secondary link) ─────── */
.n-hero-cta {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.n-btn-primary {
  padding: 12px 22px;
  background: var(--brand-magenta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.n-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(235, 13, 138, 0.3); }
.n-btn-ghost {
  padding: 12px 18px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.n-btn-ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-strong); }

/* ── Prefers-reduced-motion: stop the breathing portrait ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .n-hero-portrait { animation: none; }
}

/* ── v400 Phase 7: session-end motion ───────────────────────────────────
   Applied to the Report Card hero when it mounts after a completed
   session. The hero softly blooms in, portrait scales up with a
   magenta glow that settles, and the archetype display fades in
   staggered so the eye lands on portrait → name → sub → stats. */
.n-hero-session-bloom {
  animation: n-hero-bloom 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes n-hero-bloom {
  0%   { opacity: 0; transform: scale(0.96); }
  60%  { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}
.n-hero-session-bloom .n-hero-portrait {
  animation: n-portrait-bloom 1.3s cubic-bezier(0.2, 0.8, 0.2, 1),
             n-breathe 6s ease-in-out infinite 1.3s;
}
@keyframes n-portrait-bloom {
  0%   { opacity: 0; transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(235,13,138,0)); }
  55%  { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 80px rgba(235,13,138,0.5)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 40px rgba(235,13,138,0.35)); }
}
.n-hero-session-bloom .n-display {
  animation: n-display-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}
@keyframes n-display-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.n-hero-session-bloom .n-sub {
  animation: n-display-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
.n-hero-session-bloom .n-hero-stats {
  animation: n-display-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
}
.n-hero-session-bloom .n-hero-cta {
  animation: n-display-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both;
}
@media (prefers-reduced-motion: reduce) {
  .n-hero-session-bloom,
  .n-hero-session-bloom .n-hero-portrait,
  .n-hero-session-bloom .n-display,
  .n-hero-session-bloom .n-sub,
  .n-hero-session-bloom .n-hero-stats,
  .n-hero-session-bloom .n-hero-cta {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v445-pilot440 — Brain page (Overview + Report tabs, sticky sub-tab bar)
   ══════════════════════════════════════════════════════════════════════════════ */
.brain-page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* v445-pilot440: sticky sub-tab bar — stays frozen at top of panel while
   the tab content scrolls beneath. Sits below the chrome bar. */
.brain-subtabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(10, 6, 18, 0.92);
  border-radius: 12px;
  width: calc(100% - 24px);
  max-width: 360px;
  margin: 12px auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brain-subtabs-sticky {
  position: sticky;
  /* v445-pilot868 — stick below the REAL chrome bar, not a hardcoded iOS guess.
     Was env(safe-area-inset-top)+44px+8px, which assumed the iOS chrome bar at
     every width: on Android (pre-build-21, chrome bar missing) and in plain web
     the tabs stuck 52px down with the intro paragraph visible above/behind them
     — Henry's "Overview/Report/Consciousness Map buttons overlapping the top
     paragraph". --favi-chrome-h is set by neuphoria-chrome.js to the actual bar
     height in SDK mode (iOS AND Android) and is 0 in web, so this self-adapts. */
  top: calc(var(--favi-chrome-h, 0px) + 8px);
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.brain-subtab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  color: var(--text-secondary, #aaa);
  border: none;
  border-radius: 8px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.brain-subtab:hover { color: var(--text-primary, #fff); }
.brain-subtab.active {
  background: var(--brand-magenta, #EB0D8A);
  color: #fff;
  box-shadow: 0 2px 12px rgba(235, 13, 138, 0.28);
}
.brain-tab-body { animation: brain-tab-in 0.35s ease both; }
@keyframes brain-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brain Overview tab — at-a-glance snapshot card */
.brain-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 8px 24px;
  text-align: center;
}
.brain-overview-hero {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 24px 16px;
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.brain-overview-3d {
  width: 160px;
  height: 160px;
  position: relative;
}
.brain-overview-3d::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle,
    rgba(235, 13, 138, 0.4) 0%,
    transparent 55%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
  animation: home-aurora-pulse 6s ease-in-out infinite;
}
.brain-overview-3d canvas {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto !important;
}
.brain-overview-id {
  text-align: center;
}
.brain-overview-tier-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-tertiary, #888);
  margin-bottom: 4px;
}
.brain-overview-tier {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.brain-overview-uci {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}
.brain-overview-uci strong {
  color: var(--text-primary, #fff);
  font-weight: 700;
}
.brain-overview-snapshot {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #aaa);
  max-width: 320px;
  margin-bottom: 20px;
}
.brain-overview-snapshot p { margin: 0 0 8px; }
.brain-overview-snapshot p:last-child { margin-bottom: 0; }
.brain-overview-view-report-cta {
  padding: 14px 20px;
  background: var(--brand-magenta, #EB0D8A);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(235, 13, 138, 0.25);
  transition: background 0.18s ease, transform 0.1s ease;
}
.brain-overview-view-report-cta:hover { background: #ff1a9c; }
.brain-overview-view-report-cta:active { transform: scale(0.98); }

.brain-signed-out, .brain-report-error, .brain-report-loading,
.brain-tab-loading, .brain-tab-error {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary, #aaa);
  font-size: 14px;
}

/* v445-pilot440 — Inline-render of the Brain Intelligence Report (the
   FaviPilotGraduation modal) inside the Brain page Report tab. Override
   the modal's position:fixed wrapper styling so it lives in the document
   flow under the sticky sub-tab bar. */
.brain-tab-body .pilot-graduation-inline {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Hide the X close button — sub-tab nav is how users return to Overview */
.brain-tab-body .pilot-graduation-inline [aria-label="Close"],
.brain-tab-body .pilot-graduation-inline button[aria-label="Share report"] {
  display: none !important;
}

/* v445-pilot442 — Fix the squished/stretched neurofeedback cards. The
   inline content has many divs with inline-styled max-widths that don't
   adapt to the narrower Brain page container. Constrain all to 100% of
   the panel and prevent any character-wrap on flex items. */
.brain-tab-body .pilot-graduation-inline > div,
.brain-tab-body .pilot-graduation-inline div[style*="max-width"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.brain-tab-body .pilot-graduation-inline div[style*="display:flex"][style*="flex-direction:column"] {
  flex-direction: column !important;
}
.brain-tab-body .pilot-graduation-inline div[style*="display:flex"] > div,
.brain-tab-body .pilot-graduation-inline div[style*="display:flex"] > p {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* v445-pilot442 — Hide the legacy "Brain Intelligence Report" CTA button
   from the Overview tab (it lives at top of _faviRenderProfilePage and
   becomes redundant now that the Report sub-tab does the same thing). */
.brain-tab-body button[onclick*="FaviPilotGraduation.show"] {
  display: none !important;
}

/* v445-pilot444 (B11 — Henry / David webinar feedback): "Continue your
   journey" button at end of session is for non-study users picking
   another track. For FAVI Pilot users who just completed a study session
   it's confusing — they're done. Hide for pilot users. Share button
   stays (per Henry: "maybe share button, but the continue your journey
   is meant to click you to another track"). */
body.is-pilot-user #favi-rc-next[data-mode="program"],
body.is-pilot-user #favi-adv-next {
  display: none !important;
}

/* v445-pilot442 — Title for the inline Brain Intelligence Report. */
.brain-report-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  text-align: center;
  margin: 14px 16px 18px;
}
.brain-report-content {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v445-pilot437 — Floating ← Home back pill (Explore / Insights / Brain / Settings)
   ══════════════════════════════════════════════════════════════════════════════ */
/* v445-pilot438 — When the back pill is visible, reserve space at the top of
   the active panel so content (page headers, sub-tabs, etc.) doesn't sit
   underneath it. Only affects user-facing destinations. */
/* v445-pilot440 — Pill now sits inside the chrome bar slot (where Exit
   normally lives), so panel content no longer needs extra top padding.
   The chrome bar itself is what reserves the space. */

/* v445-pilot441 — Bare ← Home pill, no box. Positioned in the chrome bar
   left slot (same spot Exit occupies on Home). On non-Home pages Exit is
   hidden (via NeuphoriaChrome.setExitVisible(false)), leaving the slot
   empty — the pill superimposes cleanly.
   z-index 100001 to sit ABOVE the chrome bar (z-index 99999) — without
   this the pill was hidden behind chrome on every sub-page. */
.home-back-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 7px);
  left: 12px;
  z-index: 100001;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 4px;
  background: transparent;
  color: var(--brand-magenta, #EB0D8A);
  border: none;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.home-back-pill:hover { opacity: 0.82; }
.home-back-pill:active { transform: scale(0.94); }
.home-back-pill svg { stroke: currentColor; }

/* Desktop: keep pill clear of the sidebar */
@media (min-width: 769px) {
  .home-back-pill {
    top: 16px;
    left: 246px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v445-pilot433 — Home page (Whoop-style UCI hero) + Settings page (mode-aware)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Home page ─────────────────────────────────────────────────────────────── */
.home-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  text-align: center;
  min-height: 60vh;
}

/* v445-pilot439 — UCI label + (i) info button + "/ 100" scale hint.
   Mirrors the Whoop pattern: small label above the ring, scale unit below
   the number inside the ring. (i) opens the explainer modal. */
.home-uci-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: -8px;
  z-index: 2;
}
.home-uci-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  /* v445-pilot475 — tightened for the longer "UNIVERSAL CONSCIOUSNESS
     INDEX" string. Pre-fix used 11px / 0.22em letter-spacing for the
     short "UCI" acronym; with the full name that overflowed on narrow
     iPhones. Slightly smaller + tighter spacing keeps the eyebrow
     readable without dominating the ring underneath. */
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  white-space: nowrap;
}
.home-uci-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.home-uci-info-btn:hover {
  background: rgba(235, 13, 138, 0.12);
  color: var(--brand-magenta, #EB0D8A);
}
.home-uci-info-btn:active { transform: scale(0.92); }
.home-uci-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.home-uci-scale {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  letter-spacing: 0.04em;
  margin-top: 4px;
  opacity: 0.75;
}

/* v445-pilot436 — Whoop-style ring gauge wrapping the UCI hero number.
   The --uci-tier-color CSS variable is set inline from the tier verdict. */
.home-uci-ring-wrap {
  position: relative;
  width: clamp(220px, 56vw, 320px);
  height: clamp(220px, 56vw, 320px);
  margin: 16px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.home-uci-ring-wrap::before {
  /* Aurora glow behind the whole gauge */
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle,
    var(--uci-tier-color, #EB0D8A) 0%,
    transparent 55%);
  opacity: 0.32;
  filter: blur(32px);
  z-index: -1;
  pointer-events: none;
  animation: home-aurora-pulse 6s ease-in-out infinite;
}
.home-uci-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.home-uci-ring-fill {
  /* Animated fill — stroke-dasharray transitions from "0 565.49" to
     "<filled> 565.49" once home-page.js sets the data-target-dash value. */
  transition: stroke-dasharray 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  filter: drop-shadow(0 0 8px var(--uci-tier-color, #EB0D8A));
}
.home-uci-hero {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-weight: 900;
  font-size: clamp(82px, 19vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--brand-magenta, #EB0D8A);
  transition: transform 0.12s ease;
  user-select: none;
}
.home-uci-ring-wrap:active .home-uci-hero { transform: scale(0.98); }
@keyframes home-aurora-pulse {
  0%, 100% { opacity: 0.26; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .home-uci-ring-wrap::before { animation: none; }
  .home-uci-ring-fill { transition: none; }
}
.home-uci-hero:active { transform: scale(0.98); }
.home-uci-hero:focus { outline: 2px solid var(--brand-magenta); outline-offset: 4px; border-radius: 8px; }

.home-tier-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary, #fff);
  margin-bottom: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.home-tier-label:hover { background: rgba(255,255,255,0.04); }
.home-tier-label:focus { outline: 2px solid var(--brand-magenta); outline-offset: 2px; }

.home-tier-sub {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  margin: 0 0 16px;
  max-width: 320px;
}

.home-trend-row {
  margin-bottom: 28px;
  min-height: 24px;
}
.home-trend {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
}
.home-trend-up   { color: #10b981; background: rgba(16, 185, 129, 0.10); }
.home-trend-down { color: #ef4444; background: rgba(239, 68, 68, 0.10); }
.home-trend-flat { color: var(--text-tertiary, #888); }

.home-substats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 28px;
}
.home-stat {
  flex: 1;
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 14px;
  padding: 14px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.home-stat:hover { background: rgba(255,255,255,0.06); border-color: rgba(235,13,138,0.25); }
.home-stat:active { transform: scale(0.98); }
.home-stat:focus { outline: 2px solid var(--brand-magenta); outline-offset: 2px; }
.home-stat-num {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}
.home-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, #888);
}

/* v445-pilot433 — Tier-color dot on the Last sub-stat. Inline-flex so the
   dot and text stay aligned regardless of stat-num font size. */
.home-stat-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.home-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
}

/* v445-pilot433 — Milestone hint. Small line above the CTA. */
.home-milestone {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  margin: -10px 0 22px;
  letter-spacing: 0.02em;
}
.home-has-data .home-milestone {
  animation: home-fade-in 0.5s ease 0.55s both;
}

.home-cta {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 16px 24px;
  background: var(--brand-magenta, #EB0D8A);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(235, 13, 138, 0.25);
}
.home-cta:hover  { background: #ff1a9c; box-shadow: 0 6px 24px rgba(235, 13, 138, 0.35); }
.home-cta:active { transform: scale(0.98); }

/* v445-pilot433 — Subtle breath animation. 4s cycle, only the shadow oscillates
   so it draws the eye without becoming a distraction. */
.home-cta-breathe {
  animation: home-cta-breath 4s ease-in-out infinite;
}
@keyframes home-cta-breath {
  0%, 100% { box-shadow: 0 4px 20px rgba(235, 13, 138, 0.25); }
  50%      { box-shadow: 0 6px 28px rgba(235, 13, 138, 0.45); }
}
.home-cta-breathe:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .home-cta-breathe { animation: none; }
}

/* v445-pilot445 (B14) — Session flow chart in Knowledge Base. Vertical
   timeline showing the 7 stages of a session start-to-finish. */
.favi-session-flow {
  position: relative;
  padding-left: 0;
}
.favi-flow-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.favi-flow-step:last-child { border-bottom: none; padding-bottom: 0; }
.favi-flow-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(235, 13, 138, 0.12);
  border: 1px solid rgba(235, 13, 138, 0.35);
  color: var(--brand-magenta, #EB0D8A);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}
.favi-flow-body { flex: 1; min-width: 0; }
.favi-flow-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.favi-flow-icon { font-size: 15px; line-height: 1; }
.favi-flow-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary, #aaa);
}

/* v445-pilot453 — What's new banner on Home (replaces v445 popup). Sits
   at the very top of the Home wrap. One-liner + Read more + dismiss. */
.home-whatsnew-banner {
  width: 100%;
  max-width: 380px;
  margin: 8px 0 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(235, 13, 138, 0.18), rgba(134, 53, 160, 0.12));
  border: 1px solid rgba(235, 13, 138, 0.32);
  border-radius: 12px;
  text-align: left;
  position: relative;
  transition: opacity 0.2s ease;
}
.home-whatsnew-eyebrow {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand-magenta, #EB0D8A);
  margin-bottom: 4px;
}
.home-whatsnew-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  line-height: 1.4;
  padding-right: 18px; /* clear room for dismiss × */
}
.home-whatsnew-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}
.home-whatsnew-cta {
  background: transparent;
  color: var(--brand-magenta, #EB0D8A);
  border: none;
  padding: 0;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.home-whatsnew-cta:hover { color: #ff1a9c; }
.home-whatsnew-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary, #888);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.home-whatsnew-dismiss:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* v445-pilot453 — Updates page (panel-updates). Wide layout, expandable
   entries. */
.updates-page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 80px;
}
.updates-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  margin: 14px 0 6px;
}
.updates-sub {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 540px;
}
.updates-entry {
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: background 0.15s;
}
.updates-entry[open] {
  background: rgba(235, 13, 138, 0.06);
  border-color: rgba(235, 13, 138, 0.22);
}
.updates-entry summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding-right: 22px;
  position: relative;
}
.updates-entry summary::-webkit-details-marker { display: none; }
.updates-entry summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-tertiary, #888);
  font-weight: 400;
  transition: transform 0.18s ease;
}
.updates-entry[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(180deg);
}
.updates-entry-version {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary, #888);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.updates-entry-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  line-height: 1.4;
  flex: 1;
}
.updates-entry-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
  white-space: pre-line;   /* v496 — preserve \n in body (bullet lists) */
}

/* v445-pilot496 — Pilot-tester feedback row under each What's New entry */
.updates-feedback {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle, rgba(255,255,255,0.08));
}
.updates-feedback-q {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.updates-feedback-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.updates-feedback-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.updates-feedback-btn:hover { background: rgba(255,255,255,0.07); }
.updates-feedback-btn:active { transform: scale(0.98); }
.updates-feedback-btn-yes { color: #34d399; border-color: rgba(52,211,153,0.32); }
.updates-feedback-btn-yes:hover { background: rgba(52,211,153,0.08); }
.updates-feedback-btn-no { color: #f59e0b; border-color: rgba(245,158,11,0.32); }
.updates-feedback-btn-no:hover { background: rgba(245,158,11,0.08); }
.updates-feedback-confirmed {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
}
.updates-feedback-confirmed-yes {
  color: #34d399;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.32);
}
.updates-feedback-confirmed-no {
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.32);
}
.updates-feedback-change {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  border: none;
  color: var(--text-tertiary, #888);
  font-size: 11px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.updates-feedback-change:hover { color: var(--text-secondary, #aaa); }

/* v445-pilot445 (B17) — FAVI Pilot roadmap pill row on Home. 5 phases of
   the journey: BIP → NF → LED → Closed-loop → Personal Audio Suite. */
.home-roadmap {
  width: 100%;
  max-width: 380px;
  margin: 22px 0 6px;
}
/* v445-pilot475 — Journey ↔ What's New carousel. Two slides in a
   horizontal scroll-snap container, dots below. */
.home-journey-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}
.home-journey-carousel::-webkit-scrollbar { display: none; }
.home-journey-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 100%;
  box-sizing: border-box;
}
.home-journey-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.home-journey-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-journey-dot.active {
  background: var(--brand-magenta, #EB0D8A);
  transform: scale(1.4);
}
/* What's New teaser card (slide 2) */
.home-update-card {
  background: linear-gradient(135deg, rgba(180, 90, 255, 0.10), rgba(80, 150, 255, 0.06));
  border: 1px solid rgba(180, 90, 255, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.home-update-card:active {
  background: linear-gradient(135deg, rgba(180, 90, 255, 0.16), rgba(80, 150, 255, 0.10));
}
.home-update-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  line-height: 1.4;
  margin-bottom: 6px;
}
.home-update-read {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-magenta, #EB0D8A);
  letter-spacing: 0.02em;
}
.home-roadmap-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-roadmap-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.home-roadmap-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 48px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.home-roadmap-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
}
.home-roadmap-short {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-tertiary, #888);
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 48px;
}
.home-roadmap-pill.is-done {
  opacity: 1;
}
.home-roadmap-pill.is-done .home-roadmap-num {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.home-roadmap-pill.is-current {
  opacity: 1;
}
.home-roadmap-pill.is-current .home-roadmap-num {
  background: var(--brand-magenta, #EB0D8A);
  border-color: var(--brand-magenta, #EB0D8A);
  color: #fff;
  box-shadow: 0 0 12px rgba(235, 13, 138, 0.45);
  animation: home-roadmap-pulse 2.2s ease-in-out infinite;
}
.home-roadmap-pill.is-current .home-roadmap-short {
  color: var(--brand-magenta, #EB0D8A);
}
.home-roadmap-pill.is-locked {
  opacity: 0.35;
}
.home-roadmap-connector {
  flex: 1;
  height: 1.5px;
  background: rgba(255,255,255,0.10);
  margin: 0 4px;
  margin-bottom: 18px; /* align with the num circle */
}
@keyframes home-roadmap-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(235, 13, 138, 0.35); }
  50%      { box-shadow: 0 0 16px rgba(235, 13, 138, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .home-roadmap-pill.is-current .home-roadmap-num { animation: none; }
}

/* v445-pilot437 — Hub tile grid below CTA on Home. 2x2 destinations + wide Settings. */
.home-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin-top: 28px;
}
.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 14px;
  color: var(--text-primary, #fff);
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
  min-height: 96px;
}
.home-tile:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(235, 13, 138, 0.32);
}
.home-tile:active { transform: scale(0.98); }
.home-tile-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(235, 13, 138, 0.14);
  color: var(--brand-magenta, #EB0D8A);
  border-radius: 10px;
  margin-bottom: 6px;
}
.home-tile-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary, #fff);
}
.home-tile-desc {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #888);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.home-tile-wide {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin-top: 10px;
  padding: 14px 16px;
  min-height: 56px;
  background: rgba(255,255,255,0.03);
}
.home-tile-wide .home-tile-icon-inline {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #aaa);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-tile-wide .home-tile-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.home-tile-arrow {
  color: var(--text-tertiary, #888);
  font-size: 16px;
}

.home-footer-link {
  margin-top: 20px;
  font-size: 12px;
}
.home-footer-link a {
  color: var(--text-tertiary, #888);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.home-footer-link a:hover { color: var(--brand-magenta, #EB0D8A); }

.home-skeleton .home-uci-hero { opacity: 0.4; }
.home-skeleton .home-tier-label { opacity: 0.6; }

/* v445-pilot433 — Staggered mount animation for the returning-user hero state.
   Triggers when .home-has-data is present (set by _render after data resolves). */
.home-has-data .home-tier-label   { animation: home-fade-in 0.5s ease 0.25s both; }
.home-has-data .home-trend-row    { animation: home-fade-in 0.5s ease 0.40s both; }
.home-has-data .home-substats     { animation: home-slide-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.50s both; }
.home-has-data .home-cta          { animation: home-fade-in 0.5s ease 0.65s both; }
.home-has-data .home-footer-link  { animation: home-fade-in 0.5s ease 0.80s both; }

@keyframes home-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes home-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-has-data .home-tier-label,
  .home-has-data .home-trend-row,
  .home-has-data .home-substats,
  .home-has-data .home-cta,
  .home-has-data .home-footer-link {
    animation: none;
  }
}

/* ── Home welcome state (first-time / zero sessions) ─────────────────────── */
.home-welcome {
  /* v445-pilot433 — Vertically center on viewport so welcome content doesn't
     anchor to top with huge empty space below. Reserves space for top chrome
     (~56px) and bottom-nav (~64px). */
  min-height: calc(100vh - 120px);
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 40px;
  animation: home-welcome-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes home-welcome-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-welcome-illustration {
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.home-welcome-chip-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.home-welcome-chip-icon svg {
  width: 14px;
  height: 14px;
}

/* v445-pilot433 — Aurora glow behind the interactive 3D brain. Pulses softly. */
.home-welcome-brain-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-welcome-brain-wrap::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle,
    rgba(235, 13, 138, 0.45) 0%,
    rgba(235, 13, 138, 0.08) 50%,
    transparent 70%);
  filter: blur(18px);
  z-index: 0;
  animation: home-welcome-brain-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

/* The 3D canvas mount — FaviProfileBrain3D fills this container. */
.home-welcome-brain-3d {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  display: block;
}
.home-welcome-brain-3d canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
}

@keyframes home-welcome-brain-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .home-welcome-brain-wrap::before { animation: none; }
}

.home-welcome-headline {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  margin: 0 0 8px;
}

.home-welcome-subhead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, #aaa);
  margin: 0 0 22px;
  max-width: 320px;
}

.home-welcome-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.home-welcome-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.home-welcome-chip-icon {
  font-size: 14px;
  line-height: 1;
}

.home-cta-welcome {
  margin-top: 4px;
}

.home-welcome-secondary {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-magenta, #EB0D8A);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.home-welcome-secondary:hover {
  background: rgba(235, 13, 138, 0.08);
}

.home-welcome-faq {
  margin-top: 28px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}
.home-welcome-detail {
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.home-welcome-detail summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 22px;
}
.home-welcome-detail summary::-webkit-details-marker { display: none; }
.home-welcome-detail summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-tertiary, #888);
  transition: transform 0.2s ease;
}
.home-welcome-detail[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(180deg);
}
.home-welcome-detail p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #aaa);
  margin: 10px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-welcome {
    animation: none;
  }
  .home-welcome-brain circle[fill="url(#wbGlow)"] animate,
  .home-welcome-brain circle[fill="#EB0D8A"] animate {
    /* SMIL animate elements can't be paused with CSS; SVG falls back to static */
  }
}

/* ── Welcome Overlay (first-launch 3-card onboarding) ────────────────────── */
.fwo-body-locked { overflow: hidden; }
.fwo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center,
    rgba(20, 8, 32, 0.95) 0%,
    rgba(10, 5, 18, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  animation: fwo-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fwo-overlay.fwo-out {
  animation: fwo-out 0.25s ease forwards;
}
@keyframes fwo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fwo-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.fwo-card {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  width: 100%;
  animation: fwo-card-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fwo-card.fwo-card-active {
  display: flex;
}
@keyframes fwo-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fwo-illustration {
  width: 160px;
  height: 160px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* v445-pilot434 — 3D brain mount in card 1 + aurora glow behind it. */
.fwo-brain-3d-mount {
  position: relative;
  width: 160px;
  height: 160px;
}
.fwo-brain-3d-mount::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle,
    rgba(235, 13, 138, 0.45) 0%,
    rgba(235, 13, 138, 0.08) 50%,
    transparent 70%);
  filter: blur(18px);
  z-index: 0;
  animation: home-welcome-brain-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
.fwo-brain-3d-mount canvas {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  height: auto !important;
}
.fwo-card-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  margin: 0 0 16px;
}
.fwo-card-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin: 0 0 28px;
  max-width: 340px;
}
.fwo-card-body p { margin: 0 0 10px; }
.fwo-card-body p:last-child { margin-bottom: 0; }
.fwo-card-body strong { color: var(--text-primary, #fff); }
.fwo-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 28px;
}
.fwo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.25s ease, transform 0.25s ease;
}
.fwo-dot-active {
  background: var(--brand-magenta, #EB0D8A);
  transform: scale(1.2);
}
.fwo-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}
.fwo-skip, .fwo-next {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display, 'Inter', sans-serif);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.fwo-skip {
  background: transparent;
  color: var(--text-tertiary, #888);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.fwo-skip:hover { color: var(--text-secondary, #aaa); background: rgba(255,255,255,0.03); }
.fwo-next {
  background: var(--brand-magenta, #EB0D8A);
  color: #fff;
  box-shadow: 0 4px 20px rgba(235, 13, 138, 0.3);
}
.fwo-next:hover  { background: #ff1a9c; }
.fwo-next:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .fwo-overlay, .fwo-card { animation: none; }
}

/* ── Settings page ─────────────────────────────────────────────────────────── */
.settings-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 18px 80px;
}
.settings-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  margin: 8px 0 4px;
}
.settings-sub {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  margin: 0 0 20px;
}
.settings-section {
  background: var(--bg-secondary, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.settings-section h2 {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary, #888);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.settings-section-admin h2 {
  color: #fbbf24;
  border-bottom-color: rgba(251, 191, 36, 0.18);
}
.settings-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  font-size: 14px;
}
.settings-dl dt {
  font-weight: 600;
  color: var(--text-tertiary, #888);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.settings-dl dd {
  margin: 0;
  color: var(--text-primary, #fff);
}
.settings-dl dd a { color: var(--brand-magenta, #EB0D8A); text-decoration: none; }
.settings-dl dd a:hover { text-decoration: underline; }
.settings-dl dd code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  padding: 2px 6px;
  border-radius: 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.settings-row:last-child { border-bottom: none; }
.settings-row label {
  font-weight: 500;
  color: var(--text-primary, #fff);
  flex-shrink: 0;
}
.settings-row input[type="range"] {
  flex: 1;
  margin: 0 12px;
  max-width: 200px;
}
.settings-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--brand-magenta, #EB0D8A);
}
.settings-row select {
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  color: var(--text-primary, #fff);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.settings-row-value {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
}
.settings-row-desc {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin: 0 0 10px;
}

.settings-btn {
  display: inline-block;
  padding: 9px 14px;
  background: var(--brand-magenta, #EB0D8A);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body, 'Inter', sans-serif);
  transition: background 0.15s, transform 0.1s;
}
.settings-btn:hover  { background: #ff1a9c; }
.settings-btn:active { transform: scale(0.98); }
.settings-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-btn-secondary {
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.settings-btn-secondary:hover { background: rgba(255,255,255,0.08); }
.settings-link-btn {
  font-size: 12px;
  color: var(--brand-magenta, #EB0D8A);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(235,13,138,0.25);
}
.settings-link-btn:hover {
  background: rgba(235, 13, 138, 0.06);
}

/* v445-pilot451 — Neurofeedback mode selector + Custom sliders (B13 §6) */
.settings-nf-modes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 6px;
}
.settings-nf-mode-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-nf-mode-row:hover { background: rgba(255,255,255,0.03); }
.settings-nf-mode-row input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--brand-magenta, #EB0D8A);
  flex-shrink: 0;
}
.settings-nf-mode-text { flex: 1; min-width: 0; }
.settings-nf-mode-label {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.settings-nf-mode-sub {
  font-size: 11px;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
  line-height: 1.4;
}

.settings-nf-custom {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  padding-top: 8px;
  margin-top: 8px;
}
.settings-nf-slider-row {
  margin-bottom: 14px;
}
.settings-nf-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.settings-nf-slider-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}
.settings-nf-slider-value {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-magenta, #EB0D8A);
}
.settings-nf-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--brand-magenta, #EB0D8A);
}
.settings-nf-slider-desc {
  font-size: 10px;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
  line-height: 1.4;
}

/* iOS read-only mode: no inputs, no buttons (except Sign out which doesn't appear in iOS). */
.settings-ios .settings-dl dd { font-weight: 500; }

/* Two-column layout on wider screens for the editable web layout */
@media (min-width: 768px) {
  .settings-web {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 920px;
  }
  .settings-web .settings-title,
  .settings-web .settings-sub { grid-column: 1 / -1; }
  .settings-web .settings-section { margin-bottom: 0; }
}

/* Tighter spacing on iPhone SE width — keep 5-item bottom bar legible */
@media (max-width: 380px) {
  .bottom-nav-item { padding: 4px 6px; }
  .bottom-nav-item span { font-size: 8.5px; }
}