/* ==========================================================================
   Digital Human Brain — UI
   OLED black · glass morphism · electric cyan + magenta cognition.
   Redesigned from the ground up to feel like a real research console,
   not a hackathon dashboard.
   ========================================================================== */

:root {
  /* Backgrounds — true OLED. bg-0 is essentially pure black so any
     panel/glass surface reads as elevated by contrast alone. */
  --bg-0: #030308;              /* true OLED */
  --bg-void: #000000;            /* absolute void, used for vignette bases */
  --bg-1: #070917;              /* base panel */
  --bg-2: #0A0E1F;              /* elevated panel */
  --bg-glass: rgba(12, 16, 34, 0.62);
  --bg-glass-strong: rgba(16, 22, 44, 0.78);
  --bg-elev: rgba(8, 12, 26, 0.94);

  /* Borders — hairline system. All borders are 1px but paired with
     an inner 1px inset highlight for a "double line" premium feel. */
  --border: rgba(255, 255, 255, 0.055);
  --border-strong: rgba(255, 255, 255, 0.115);
  --border-inner: rgba(255, 255, 255, 0.035);
  --border-glow: rgba(110, 231, 255, 0.35);

  /* Text */
  --text-primary: #F5F7FF;
  --text-secondary: #A9B3CE;
  --text-muted: #6A7492;
  --text-faint: rgba(200, 210, 235, 0.35);

  /* Accents */
  --accent: #6EE7FF;            /* electric cyan (primary) */
  --accent-strong: #22D3EE;
  --cognition: #F0ABFC;         /* magenta cognition */
  --learning: #FDE68A;          /* amber learning */
  --good: #34D399;
  --bad: #F87171;
  --warn: #FBBF24;
  --danger: #FB7185;
  --profit: #F97316;            /* Trader orange (money surfaces) */

  /* Premium accent — champagne / signal gold. Used sparingly on
     high-value surfaces (paper equity badge, brand mark accent,
     hero underlines). Signals prestige without shouting. */
  --gold: #E8D9A6;
  --gold-strong: #FDE68A;
  --gold-dim: rgba(232, 217, 166, 0.16);

  --accent-dim: rgba(110, 231, 255, 0.14);
  --cognition-dim: rgba(240, 171, 252, 0.14);
  --learning-dim: rgba(253, 230, 138, 0.14);

  /* Per-region colours (must mirror backend meta.color) */
  --c-visual: #8B5CF6;
  --c-thalamus: #E879F9;
  --c-hippocampus: #FBBF24;
  --c-amygdala: #F87171;
  --c-nucleus: #22D3EE;
  --c-pfc: #6EE7FF;
  --c-motor: #A78BFA;
  --c-dmn: #C084FC;

  /* Typography */
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Shadows — deep, warm, and layered. Real premium surfaces cast
     shadows into the room they sit in, not just straight down. */
  --shadow-panel:
    0 30px 80px -40px rgba(0, 0, 0, 0.95),
    0 12px 32px -18px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.045) inset;
  --shadow-elev-hi:
    0 40px 100px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  --shadow-glow-cyan: 0 0 40px -12px var(--accent),
                      0 0 0 1px var(--accent) inset;
  --shadow-glow-magenta: 0 0 40px -12px var(--cognition),
                         0 0 0 1px var(--cognition) inset;
  --shadow-glow-gold: 0 0 40px -14px var(--gold),
                      0 0 0 1px rgba(232, 217, 166, 0.35) inset;
}

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

html {
  height: 100vh;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  letter-spacing: -0.005em;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
  letter-spacing: -0.005em;
  /* Deliberately no `background` — we want the ambient canvas and the
     ::before aurora sheet (which live at negative z-indexes below body)
     to remain visible. All backdrop paint is layered separately below. */
  position: relative;
  isolation: isolate;
}
/* --- Aurora sheet (deepest painted layer) ---
   A slowly drifting spectral curtain of aurora radials + conic
   gradient at z-index -3, so it sits behind the ambient canvas
   (fireflies + dust motes at -2) yet in front of the html bg. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% -20% -20%;
  pointer-events: none;
  z-index: -3;
  background:
    /* Base aurora fields */
    radial-gradient(circle 1300px at 12% -8%,  rgba(110, 231, 255, 0.22), transparent 55%),
    radial-gradient(circle 1200px at 96% -6%,  rgba(240, 171, 252, 0.20), transparent 55%),
    radial-gradient(circle 1400px at 50% 42%,  rgba(139, 92, 246, 0.12),  transparent 68%),
    radial-gradient(circle 1200px at 100% 108%, rgba(232, 217, 166, 0.09), transparent 60%),
    radial-gradient(circle 1400px at 8% 108%,   rgba(168, 85, 247, 0.14),  transparent 65%),
    radial-gradient(circle 1800px at 50% 118%,  rgba(56, 189, 248, 0.07),  transparent 60%),
    /* Drifting spectral curtain — soft, blurred */
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(110, 231, 255, 0.16), transparent 65%),
    radial-gradient(ellipse 55% 42% at 78% 30%, rgba(240, 171, 252, 0.13), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(168, 85, 247, 0.12),  transparent 65%),
    conic-gradient(from 210deg at 50% 50%,
      rgba(110, 231, 255, 0.04) 0deg,
      rgba(240, 171, 252, 0.06) 90deg,
      rgba(168, 85, 247, 0.05) 180deg,
      rgba(232, 217, 166, 0.04) 270deg,
      rgba(110, 231, 255, 0.04) 360deg);
  filter: blur(40px) saturate(125%);
  opacity: 0.95;
  will-change: transform;
  animation: auroraDrift 42s ease-in-out infinite alternate;
}
/* Deep vignette + god-ray hint on ::after. Sits in front of the
   ambient canvas so it darkens the edges of the whole viewport. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 100% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.62) 100%),
    /* God-ray hint — two slanted stripes of near-invisible light
       diagonally across the page. Very subtle. */
    linear-gradient(112deg,
      transparent 30%,
      rgba(240, 171, 252, 0.035) 45%,
      transparent 55%,
      rgba(110, 231, 255, 0.03) 70%,
      transparent 82%);
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
  50%  { transform: translate3d( 2%,  2%, 0) rotate( 1.5deg); }
  100% { transform: translate3d(-1%,  1%, 0) rotate(-0.5deg); }
}

/* Ambient canvas — the neural-mesh backdrop + fireflies + dust motes.
   Sits ABOVE the aurora sheet but BEHIND all UI panels, so its glowing
   points visibly drift over the aurora and through the transparent
   gaps between panels. */
#ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.9;
}
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Global utilities */
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-strong); }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.mono.num { color: var(--text-primary); }
.sep { color: var(--text-faint); }

/* ---------- Top bar ------------------------------------------------------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(5, 6, 18, 0.95), rgba(5, 6, 18, 0.75));
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  position: relative;
}
.topbar::after {
  /* Scanning light bar under the topbar — subtle life signal. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--cognition) 50%,
    var(--accent) 80%,
    transparent 100%);
  opacity: 0.28;
  filter: blur(0.5px);
  animation: scanBar 8s ease-in-out infinite;
}
@keyframes scanBar {
  0%, 100% { transform: translateX(-20%); opacity: 0.15; }
  50%      { transform: translateX(20%);  opacity: 0.45; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: var(--sp-4);
  border-right: 1px solid var(--border);
}

.brand-mark {
  width: 42px; height: 42px;
  position: relative;
  display: grid;
  place-items: center;
}
.brand-mark-icon {
  width: 42px; height: 42px;
  filter: drop-shadow(0 0 12px rgba(240, 171, 252, 0.45))
          drop-shadow(0 0 24px rgba(110, 231, 255, 0.35));
  animation: brandBreathe 4.5s ease-in-out infinite;
}
.brand-mark-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(110, 231, 255, 0.25);
  animation: brandRing 3.5s linear infinite;
}
@keyframes brandBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(240, 171, 252, 0.4)) drop-shadow(0 0 18px rgba(110, 231, 255, 0.3)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(240, 171, 252, 0.55)) drop-shadow(0 0 30px rgba(110, 231, 255, 0.5)); }
}
@keyframes brandRing {
  0%   { transform: rotate(0deg);   opacity: 0.35; }
  50%  { opacity: 0.55; }
  100% { transform: rotate(360deg); opacity: 0.35; }
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.brand-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--accent);
  margin-left: 4px;
  animation: blink 1.1s steps(2) infinite;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--accent);
}
@keyframes blink {
  0%, 55%  { opacity: 1; }
  60%, 100% { opacity: 0; }
}
.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  display: flex; gap: 6px; align-items: center;
  margin-top: 2px;
}
.brand-sub .sep { color: var(--text-faint); }
.brand-sub .mono {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(110, 231, 255, 0.08);
  border: 1px solid rgba(110, 231, 255, 0.2);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Taxonomic plate: scientific-classification chrome that appears
   under the brand text. Reads like a museum specimen tag. */
.brand-plate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(232, 217, 166, 0.55);
  margin-top: 4px;
  padding: 2px 0;
  text-transform: uppercase;
}
.brand-plate-hex {
  color: rgba(232, 217, 166, 0.85);
  text-shadow: 0 0 6px rgba(232, 217, 166, 0.4);
  font-weight: 600;
}
.brand-plate-ca {
  color: #6EE7FF;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border: 1px solid rgba(110, 231, 255, 0.45);
  border-radius: 4px;
  background: rgba(110, 231, 255, 0.06);
  text-shadow: 0 0 8px rgba(110, 231, 255, 0.35);
  transition: background 0.15s, border-color 0.15s;
}
.brand-plate-ca:hover {
  background: rgba(110, 231, 255, 0.14);
  border-color: rgba(110, 231, 255, 0.85);
}
.brand-plate-copy {
  font-family: inherit;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.65);
  background: transparent;
  border: 1px solid rgba(200, 220, 255, 0.25);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.brand-plate-copy:hover {
  color: #6EE7FF;
  border-color: rgba(110, 231, 255, 0.55);
}
.brand-plate-copy.copied {
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.7);
  background: rgba(110, 231, 183, 0.10);
}
.brand-plate-sep {
  color: rgba(232, 217, 166, 0.35);
}
.brand-plate-class,
.brand-plate-order {
  color: rgba(200, 220, 255, 0.55);
  font-style: italic;
}

.topbar-status {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-item {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}
.status-item.conn {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}

.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
  transition: all 0.2s;
}
.status-dot.online { background: var(--good); box-shadow: 0 0 10px var(--good); }
.status-dot.offline { background: var(--bad); box-shadow: 0 0 10px var(--bad); }

/* --- Rectangular badges (replace the pill look) --- */
.badge {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.badge::before {
  /* left indicator bar for a research-console vibe */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: currentColor;
  opacity: 0.6;
}
.badge .badge-icon {
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  color: inherit;
  flex-shrink: 0;
}
.badge .badge-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
}

.badge-paper { color: var(--profit); background: rgba(249, 115, 22, 0.06); border-color: rgba(249, 115, 22, 0.28); }
.badge-paper .up   { color: var(--good); }
.badge-paper .down { color: var(--bad); }

.badge-mode {
  color: var(--warn);
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.28);
}
.badge-mode .mode-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
  animation: modePulse 2.4s ease-in-out infinite;
}
.badge-mode.mode-default {
  color: var(--accent);
  background: rgba(110, 231, 255, 0.06);
  border-color: rgba(110, 231, 255, 0.28);
}
.badge-mode.mode-default .mode-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes modePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

.badge-learning {
  color: var(--good);
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.28);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge-learning .always-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
  animation: alwaysLearningPulse 1.6s ease-in-out infinite;
}
@keyframes alwaysLearningPulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.45; transform: scale(1.55); }
}

.badge-uptime {
  color: #A5B4FC;
  background: rgba(129, 140, 248, 0.06);
  border-color: rgba(129, 140, 248, 0.28);
}
.badge-uptime.stale {
  color: var(--warn);
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
}

.badge-browser {
  color: #60A5FA;
  background: rgba(96, 165, 250, 0.06);
  border-color: rgba(96, 165, 250, 0.28);
  max-width: 260px;
  overflow: hidden;
}
.badge-browser #browser-strip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Topbar action button --- */
.topbar-actions {
  display: flex; gap: 8px;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
}
.btn {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}
.btn .btn-icon {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(110, 231, 255, 0.08);
  box-shadow: 0 0 20px -8px var(--accent);
}
.btn-ghost { background: transparent; }
.btn-danger:hover { border-color: var(--bad); color: var(--bad); box-shadow: 0 0 20px -8px var(--bad); }
.btn-mini {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 5px;
}
.btn:active { transform: translateY(1px); }

/* ---------- Layout -------------------------------------------------------- */

/* Brain-first layout: the 3D specimen is the dominant hero on the
   page.  It occupies the entire center column across BOTH rows so
   the vessels + pulsing regions read as the primary object of study.
   Everything else — hero intent, embodiment sandbox, region tabs, and
   thought stream — becomes secondary side-rail chrome flanking the
   living specimen. */
.layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(560px, 2.2fr) minmax(300px, 0.9fr);
  grid-template-rows: minmax(320px, 1.2fr) minmax(260px, 1fr);
  grid-template-areas:
    "hero    brain     thoughts"
    "env     brain     region";
  gap: var(--sp-4);
  padding: var(--sp-4);
  min-height: 0;
}

.panel-brain {
  grid-area: brain;
  /* The brain panel is the hero — give it stronger presence:
     a spectral border glow, a taller inner viewport, and an animated
     champagne halo so the eye is pulled into it before anything else. */
  border: 1px solid rgba(240, 171, 252, 0.18);
  box-shadow:
    var(--shadow-panel),
    0 0 60px -20px rgba(240, 171, 252, 0.35),
    0 0 90px -30px rgba(110, 231, 255, 0.28),
    0 0 0 1px rgba(240, 171, 252, 0.06) inset;
}
.panel-env       { grid-area: env; }
.panel-hero      { grid-area: hero; }
.panel-region    { grid-area: region; }
.panel-thoughts  { grid-area: thoughts; }

/* Glass panel — the core of the premium look. Every panel gets:
     * a 1px outer hairline
     * a 1px inner-highlight edge (via inset box-shadow)
     * a soft top-edge shine
     * technical-drawing corner accents (top-left / bottom-right)
     * a warm, layered shadow that sits into the OLED */
.panel {
  background: var(--bg-glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  position: relative;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  pointer-events: none;
}
.panel::after {
  /* Subtle vignette inside each panel, so its centre is brighter than
     its corners and the surface reads as slightly domed. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%,
              transparent 55%,
              rgba(0, 0, 0, 0.25) 100%);
  border-radius: inherit;
}


.panel-title {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.panel-title h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-transform: uppercase;
}
.panel-title-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  font-weight: 500;
  position: relative;
  padding: 1px 5px;
  border: 1px solid rgba(232, 217, 166, 0.28);
  border-radius: 2px;
  color: rgba(232, 217, 166, 0.8);
  background: rgba(232, 217, 166, 0.03);
  text-shadow: 0 0 6px rgba(232, 217, 166, 0.35);
}
/* Animated hairline sweep across every panel top edge — feels like a
   scanner passing over each specimen plate. Subtle enough not to
   distract, magical enough to feel alive. */
.panel::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(240, 171, 252, 0.35) 50%,
    rgba(110, 231, 255, 0.35) 65%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent 100%);
  animation: panelScan 9s ease-in-out infinite alternate;
  background-size: 200% 100%;
}
@keyframes panelScan {
  0%   { background-position:   0% 0%; }
  100% { background-position: 100% 0%; }
}

.panel-title .hint {
  font-size: 11px;
  color: var(--text-muted);
  display: flex; gap: 6px; align-items: center;
}
.hint-icon {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
}

/* ---------- Panel: 3D brain ----------------------------------------------- */

.panel-brain { position: relative; }

#brain3d {
  flex: 1;
  min-height: 0;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 30% 25%, rgba(240, 171, 252, 0.18), transparent 55%),
    radial-gradient(circle at 72% 78%, rgba(110, 231, 255, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 145, 197, 0.12), transparent 65%),
    radial-gradient(ellipse at 50% 45%, rgba(168, 85, 247, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(4, 5, 12, 0.96) 0%, rgba(11, 6, 26, 0.94) 100%);
  position: relative;
  overflow: hidden;
  cursor: grab;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 110px -20px rgba(200, 150, 240, 0.16),
    inset 0 0 26px -6px rgba(110, 231, 255, 0.10);
}
#brain3d:active { cursor: grabbing; }
/* Corner registration marks — like an anatomical plate. Painted with
   pseudo-elements on the panel-brain so they anchor around the viz
   rather than over it. Subtle, gold-toned. */
.panel-brain > #brain3d::before,
.panel-brain > #brain3d::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(232, 217, 166, 0.55);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(232, 217, 166, 0.35));
  z-index: 2;
}
.panel-brain > #brain3d::before {
  top: 8px; left: 8px;
  border-right: none;
  border-bottom: none;
}
.panel-brain > #brain3d::after {
  bottom: 8px; right: 8px;
  border-left: none;
  border-top: none;
}

/* Fomofly-style specimen header + figcaption around the brain viz.
   Small caps, monospaced numerics, hairline dividers. Reads like a
   scientific plate rather than a control panel. */
.specimen-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.specimen-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  flex-wrap: wrap;
  align-items: baseline;
}
.specimen-meta-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.specimen-meta-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(240, 171, 252, 0.9);
  box-shadow: 0 0 6px rgba(240, 171, 252, 0.75);
  animation: specimenPulse 1.7s ease-in-out infinite;
}
@keyframes specimenPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}
.specimen-meta-stat {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  white-space: nowrap;
}
.specimen-meta-decision {
  color: rgba(240, 171, 252, 0.9);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.specimen-meta-emotion {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.6s ease;
}
.brain-figcaption {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  padding: 9px 10px 4px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.figcaption-idx {
  color: var(--gold-strong, #FDE68A);
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  padding-top: 2px;
}
.figcaption-text {
  font-family: "Inter", sans-serif;
  color: rgba(200, 205, 220, 0.72);
}
.figcaption-text em {
  color: rgba(240, 171, 252, 0.9);
  font-style: normal;
}
.env-figcaption {
  padding-top: 6px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.brain-tooltip {
  position: absolute;
  background: var(--bg-elev);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  pointer-events: none;
  font-size: 12px;
  color: var(--text-primary);
  min-width: 160px;
  z-index: 5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.brain-tooltip .tt-title { font-weight: 600; margin-bottom: 4px; }
.brain-tooltip .tt-role { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
.brain-tooltip .tt-act { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }

/* ---------- Panel: HERO (Now thinking + About to do) ----------------------- */

.panel-hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(180deg,
    rgba(20, 26, 48, 0.62) 0%,
    rgba(15, 20, 40, 0.5) 100%);
  overflow: auto;
}

.hero-block {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-glass-strong);
  --hero-color: var(--accent);
  transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.hero-block::after {
  /* subtle top-right accent glow */
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 100%;
  background: radial-gradient(circle, var(--hero-color) 0%, transparent 65%);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.4s;
}
.hero-block .hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.hero-block .hero-icon {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--hero-color);
  color: var(--hero-color);
  filter: drop-shadow(0 0 6px var(--hero-color));
}
.hero-block .hero-src {
  margin-left: auto;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 10px;
}

/* --- Now thinking: HERO CINEMATIC --- */
.hero-thinking {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.hero-thinking[data-empty="true"] {
  opacity: 0.7;
}
.hero-thinking.lit {
  border-color: var(--hero-color);
  box-shadow: 0 0 60px -20px var(--hero-color),
              0 0 0 1px var(--hero-color) inset;
  animation: heroPulse 1.6s ease-out;
}
.hero-thinking.lit::after { opacity: 0.16; }
.hero-thinking .hero-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--hero-color);
  text-shadow: 0 0 24px color-mix(in oklab, var(--hero-color) 45%, transparent),
               0 0 6px color-mix(in oklab, var(--hero-color) 60%, transparent);
  margin-bottom: var(--sp-3);
  word-wrap: break-word;
  transition: color 0.3s, text-shadow 0.3s;
}
.hero-thinking .hero-detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.hero-underline {
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  overflow: hidden;
  margin-top: auto;
}
.hero-underline span {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--hero-color), transparent);
  animation: underlineSweep 3.5s ease-in-out infinite;
}
@keyframes underlineSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0px -20px var(--hero-color), 0 0 32px 0 var(--hero-color); }
  100% { box-shadow: 0 0 60px -20px var(--hero-color), 0 0 0 1px var(--hero-color) inset; }
}
.ellipsis-dots::after {
  content: "";
  display: inline-block;
  width: 1ch;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* --- About to do --- */
.hero-intent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intent-row {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(5, 7, 18, 0.55);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.intent-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.5;
}
#intent-row-trader::before { background: var(--profit); }
#intent-row-world::before { background: var(--c-motor); }
.intent-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.intent-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.intent-tag.world {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.4);
  color: var(--c-motor);
}
.intent-tag.trader {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.4);
  color: var(--profit);
}
.intent-action {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  letter-spacing: -0.01em;
}
.intent-conf {
  font-size: 11px;
  color: var(--text-muted);
}
.intent-conf.strong { color: var(--good); }
.intent-conf.weak   { color: var(--warn); }
.intent-symbol {
  font-size: 11px;
  color: var(--text-muted);
}
.intent-probs {
  display: grid;
  gap: 4px;
}
.prob-bar {
  display: grid;
  grid-template-columns: 66px 1fr 42px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}
.prob-bar .prob-label { text-transform: uppercase; letter-spacing: 0.08em; }
.prob-bar .prob-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.prob-bar .prob-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px currentColor;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--accent);
}
.prob-bar .prob-value {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.prob-bar.top .prob-fill { background: currentColor; }
.prob-bar.top .prob-label { color: var(--accent); font-weight: 700; }
.prob-bar.top .prob-value { color: var(--text-primary); }
.hero-intent[data-flavour="world"]  .prob-bar.top { color: var(--c-motor); }
.hero-intent[data-flavour="world"]  .prob-bar.top .prob-label { color: var(--c-motor); }
.hero-intent[data-flavour="trader"] .prob-bar.top { color: var(--profit); }
.hero-intent[data-flavour="trader"] .prob-bar.top .prob-label { color: var(--profit); }

/* ---------- Brain legend → live cortex activity tiles -------------------- */
.brain-legend {
  flex: 0 0 auto;
  padding-top: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-2);
}

.cortex-tile {
  --tile-color: #9aa6c8;
  --tile-glow: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px 5px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, calc(0.03 + var(--tile-glow) * 0.02)) 0%,
      rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, calc(0.04 + var(--tile-glow) * 0.12));
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 10.5px;
  color: var(--text-secondary);
  box-shadow: 0 0 calc(var(--tile-glow) * 14px) -6px var(--tile-color);
}
.cortex-tile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.cortex-tile.selected {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--tile-color);
  color: var(--text-primary);
}
.cortex-tile.cortex-tile-hot {
  animation: cortexHotPulse 1.4s ease-in-out infinite;
}
@keyframes cortexHotPulse {
  0%, 100% { box-shadow: 0 0 8px -6px var(--tile-color); }
  50%      { box-shadow: 0 0 22px -4px var(--tile-color); }
}

.cortex-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.15;
}
.cortex-tile-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}
.cortex-tile-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--text-primary);
}
.cortex-tile-pct {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--tile-color);
  text-shadow: 0 0 6px color-mix(in oklab, var(--tile-color) 40%, transparent);
  font-variant-numeric: tabular-nums;
}

.cortex-tile-spark {
  display: block;
  width: 100%;
  height: 26px;
  border-radius: 3px;
  background:
    radial-gradient(120% 100% at 50% 100%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.0) 65%);
}

.cortex-tile-metric {
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.1;
  min-height: 11px;
}

@media (max-width: 1400px) {
  .brain-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .brain-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .brain-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Panel: environment -------------------------------------------- */

.env-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 10px 0;
}

#env-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  background: #050612;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

.env-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 0;
}

.env-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.env-stat {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
}
.env-stat-label { color: var(--text-muted); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.env-stat-value {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text-primary); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.env-stat-value.good { color: var(--good); }
.env-stat-value.bad { color: var(--bad); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.tag-agent { background: rgba(110, 231, 255, 0.12); border-color: rgba(110, 231, 255, 0.3); color: var(--accent); }

/* ---------- Panel: region detail ------------------------------------------ */

.region-detail-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: var(--sp-4);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.region-detail {
  flex: 1;
  overflow: auto;
  padding-right: 4px;
}

.region-detail-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}

.region-detail-header .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.region-detail-header .name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
.region-detail-header .zh { color: var(--text-muted); font-size: 12px; }

.region-detail-role {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid currentColor;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 12px;
  line-height: 1.55;
}

.region-detail-live {
  --rd-color: #9aa6c8;
  margin: 0 0 14px;
  padding: 8px 10px 6px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--rd-color);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: 0 0 22px -14px var(--rd-color);
}
.region-detail-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.region-detail-live-pct {
  color: var(--rd-color);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px color-mix(in oklab, var(--rd-color) 45%, transparent);
}
.region-detail-spark {
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 4px;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.02) 100%);
}

.region-detail-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.meter {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.meter-label {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.meter-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.region-detail-neuron-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  padding: 10px;
  background: rgba(5, 7, 18, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.neuron-dot {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.1s;
}
.neuron-dot.active {
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.region-events {
  margin-top: 12px;
}
.region-events h4 {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-bottom: 6px;
  font-family: var(--font-mono);
}
.region-events ul { list-style: none; }
.region-events li {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 2px solid currentColor;
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-family: var(--font-mono);
}

/* ---------- Central complex: ring bump + spike raster ------------------- */
.cc-visuals {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  margin: 12px 0 6px 0;
  align-items: start;
}
.cc-ring-wrap, .cc-raster-wrap {
  background: rgba(5, 7, 18, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-mini-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
#cc-ring, #cc-raster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
#cc-ring { max-width: 200px; }
@media (max-width: 900px) {
  .cc-visuals { grid-template-columns: 1fr; }
  .cc-ring-wrap { max-width: 100%; align-items: center; }
  #cc-ring { max-width: 180px; }
}

/* ---------- Tabs ---------------------------------------------------------- */

.tabs { display: flex; gap: 2px; }
.tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}
.tab.active {
  background: var(--accent-dim);
  border-color: rgba(110, 231, 255, 0.3);
  color: var(--accent);
}

/* ---------- Panel: thought stream ----------------------------------------- */

.thought-stream {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thought {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12px;
  animation: slideIn 0.3s;
  transition: background 0.2s;
}
.thought:hover { background: rgba(255, 255, 255, 0.04); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.thought-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.thought-meta .step { font-family: var(--font-mono); }
.thought-meta .region { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.thought-text {
  color: var(--text-primary);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.thought-kind-plan       { border-left-color: var(--c-pfc); }
.thought-kind-recall     { border-left-color: var(--c-hippocampus); }
.thought-kind-emotion    { border-left-color: var(--c-amygdala); }
.thought-kind-reward     { border-left-color: var(--c-nucleus); }
.thought-kind-action     { border-left-color: var(--c-motor); }
.thought-kind-info       { border-left-color: var(--c-dmn); }
.thought-kind-associate {
  border-left-color: var(--learning);
  background: linear-gradient(90deg, var(--learning-dim), transparent 60%);
}
.thought-kind-learn {
  border-left-color: var(--cognition);
  background: linear-gradient(90deg, var(--cognition-dim), transparent 60%);
}
.thought-kind-explore {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-dim), transparent 60%);
}
.thought-kind-trade,
.thought-kind-close,
.thought-kind-imitate,
.thought-kind-wallet_add,
.thought-kind-wallet_remove,
.thought-kind-independent_agree,
.thought-kind-conviction {
  border-left-color: var(--profit);
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), transparent 60%);
}

/* ---------- Panel: knowledge library -------------------------------------- */

.panel-title-tabs .tabs .tab { padding: 4px 10px; }

.knowledge-panel {
  flex: 1;
  overflow: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.knowledge-intro {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--learning);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.knowledge-intro strong { color: var(--learning); }

.knowledge-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.knowledge-cat-title {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cat-color, var(--text-muted));
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}
.knowledge-cat-title .swatch {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.knowledge-cat-title .count {
  color: var(--text-muted);
  font-weight: 400;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
}

.knowledge-chip {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: default;
  transition: all 0.25s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid var(--chip-color, var(--border-strong));
}
.knowledge-chip:hover {
  border-color: var(--chip-color, var(--accent));
  color: var(--text-primary);
}
.knowledge-chip.lit {
  background: color-mix(in oklab, var(--chip-color) 22%, transparent);
  border-color: var(--chip-color);
  color: #fff;
  box-shadow: 0 0 20px -4px var(--chip-color),
              0 0 0 1px var(--chip-color) inset;
  transform: scale(1.02);
}
.knowledge-chip .chip-en {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.knowledge-chip.lit .chip-en { color: rgba(255,255,255,0.85); }

.knowledge-chip.learned {
  border-style: dashed;
}

/* ---------- Trading desk ------------------------------------------------- */

.tab-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--profit);
  letter-spacing: 0.06em;
  vertical-align: middle;
  font-family: var(--font-mono);
}

.trading-panel {
  flex: 1;
  overflow: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trading-intro {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--profit);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.trading-intro strong { color: var(--profit); }
.trading-intro .warn {
  display: block;
  margin-top: 4px;
  color: var(--warn);
  font-size: 10.5px;
}

.trading-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.trading-summary .meter { padding: 8px 10px; }
.trading-summary .meter-value { font-size: 14px; }

.trading-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trading-block-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}
.trading-block-title .count { font-weight: 400; }
.trading-block-subtitle {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.trading-block-title .trading-block-note {
  margin-left: auto;
  font-weight: 400;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.src-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border: 1px solid transparent;
}
.src-tag.src-auto {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--good);
}
.src-tag.src-user {
  background: rgba(110, 231, 255, 0.14);
  border-color: rgba(110, 231, 255, 0.4);
  color: var(--accent);
}
.src-tag.src-env {
  background: rgba(250, 204, 21, 0.14);
  border-color: rgba(250, 204, 21, 0.4);
  color: var(--warn);
}

.fresh-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
  background: rgba(249, 115, 22, 0.16);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #FB923C;
  vertical-align: middle;
}
.fresh-badge.koth {
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.4);
  color: var(--warn);
}
.pad-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: lowercase;
  font-family: var(--font-mono);
  vertical-align: middle;
}
.pad-tag.pad-ok {
  background: rgba(110, 231, 183, 0.16);
  border: 1px solid rgba(110, 231, 183, 0.45);
  color: #6EE7B7;
}
.pad-tag.pad-skip {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #94A3B8;
  text-transform: none;
}
.fresh-badge.grad {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--good);
}

.chain-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  vertical-align: middle;
  white-space: nowrap;
}
.chain-badge.chain-sol {
  background: rgba(153, 69, 255, 0.18);
  border-color: rgba(153, 69, 255, 0.45);
  color: #C4B5FD;
}
.chain-badge.chain-hood {
  background: rgba(0, 200, 60, 0.16);
  border-color: rgba(0, 200, 60, 0.45);
  color: #6EE7B7;
}
.chain-badge.chain-eth {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
  color: #93C5FD;
}
.chain-badge.chain-base {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.45);
  color: #60A5FA;
}
.chain-badge.chain-bsc {
  background: rgba(240, 185, 11, 0.16);
  border-color: rgba(240, 185, 11, 0.45);
  color: #FCD34D;
}
.chain-badge.chain-other {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.45);
  color: #CBD5E1;
}

.trading-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.trading-table th,
.trading-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.trading-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 600;
}
.trading-table tr:last-child td { border-bottom: none; }
.trading-table tr:hover td { background: rgba(110, 231, 255, 0.03); }
.trading-table .pos { color: var(--good); }
.trading-table .neg { color: var(--bad); }
.trading-table .sym { color: var(--text-primary); font-weight: 600; }
.trading-table .mono-sm { font-size: 10.5px; color: var(--text-secondary); }

.trading-empty {
  color: var(--text-muted);
  font-size: 11px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-style: italic;
}

.trading-add-wallet {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.trading-add-wallet input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
}
.trading-add-wallet input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 12px -4px var(--accent);
}
.trading-add-wallet input.label { max-width: 120px; }

.equity-curve-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  min-height: 100px;
}
.equity-curve-wrap svg {
  width: 100%;
  height: 90px;
  display: block;
}
.equity-curve-line {
  fill: none;
  stroke: var(--profit);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px var(--profit));
}
.equity-curve-area {
  fill: url(#eqGradient);
  opacity: 0.35;
}
.equity-curve-baseline {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
  opacity: 0.6;
}

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

.footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(5, 6, 18, 0.4), rgba(5, 6, 18, 0.85));
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.footer .mono { font-size: 11px; }
.footer .sep  { color: var(--text-faint); }

.footer-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-r { display: flex; align-items: center; gap: 8px; }

/* ---------- Scrollbars ---------------------------------------------------- */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: minmax(360px, 0.9fr) minmax(240px, auto) minmax(240px, auto);
    grid-template-areas:
      "brain    thoughts"
      "hero     hero"
      "env      region";
  }
  .panel-hero { grid-area: hero; }
}

@media (max-width: 800px) {
  html, body { height: auto; overflow: auto; }
  body { min-height: 100vh; }
  .layout {
    grid-template-columns: 1fr;
    /* Give the brain panel a big chunk of the screen so all 14 region
       cores are actually visible above the fold on a phone. */
    grid-template-rows: minmax(560px, 78vh) auto auto auto auto;
    grid-template-areas:
      "brain"
      "hero"
      "env"
      "region"
      "thoughts";
  }
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .topbar-status { order: 3; width: 100%; gap: 6px; }
  .topbar-actions { padding-left: 0; border-left: none; }
  /* Compress topbar chips so they don't push the brain below the fold. */
  .topbar .status-item { padding: 3px 8px; font-size: 10px; }
  .topbar .badge { padding: 3px 8px; font-size: 10px; }
  /* On tight phones, hide secondary status chips; the essentials
     (connected · tick · reward · wallet · mode) still show. */
  .topbar .badge-learning,
  .topbar .badge-uptime,
  .topbar .badge-browser { display: none; }
  .hero-thinking .hero-headline { font-size: clamp(24px, 6vw, 34px); }
  /* Reclaim room inside the brain panel for the 3D canvas — the
     figcaption + specimen meta together eat half the panel on phones.
     On phones the anatomy is the message; hide all decorative text. */
  .panel-brain .brain-figcaption { display: none; }
  .panel-brain .specimen-meta { display: none; }
  .panel-brain .brain-panel-head { padding-bottom: 4px; }
  #brain3d { min-height: 460px; flex: 1 1 auto; }
  .brand-plate { flex-wrap: wrap; row-gap: 4px; }
  /* Show fewer of the "always learning / uptime / live" chips at once
     on tight phones so the brand plate stays a single visual unit. */
  .brand-sub { font-size: 11px; line-height: 1.35; }
}

/* ---------- Web view: the brain's second body ---------------------------- */
.web-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding-top: 6px;
}
.web-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.web-top-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.web-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}
.web-badge.on {
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #60A5FA;
}
.web-badge.off {
  background: rgba(200, 200, 200, 0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.web-site {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.web-url {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
  text-decoration: none;
  font-family: var(--font-mono);
}
.web-url:hover { color: var(--accent); text-decoration: underline; }
.web-next {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.web-body {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.web-shot-col { min-width: 0; overflow: hidden; }
.web-shot-wrap {
  position: relative;
  background: rgba(5, 7, 18, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-shot {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.web-shot-empty {
  color: var(--text-muted);
  font-size: 11px;
  padding: 40px 20px;
  text-align: center;
}
.web-shot-at {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 9px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.6);
  padding: 3px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.web-side-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.web-side-head {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.web-tokens {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
}
.web-tok {
  display: grid;
  grid-template-columns: 60px 60px 1fr 80px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  min-width: 0;
}
.web-tok-sym {
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.web-tok-change { font-size: 10px; font-family: var(--font-mono); }
.web-tok-change.up   { color: var(--good); }
.web-tok-change.down { color: var(--bad); }
.web-tok-text {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.web-tok-addr {
  color: var(--text-muted);
  font-size: 9px;
  text-align: right;
  font-family: var(--font-mono);
}
.web-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  padding: 8px 4px;
}
.web-visits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 140px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
.web-visit {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-secondary);
  align-items: center;
  font-family: var(--font-mono);
}
.web-visit.ok  { background: rgba(52, 211, 153, 0.07); }
.web-visit.err { background: rgba(248, 113, 113, 0.09); }
.web-visit-status {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 700;
}
.web-visit.ok  .web-visit-status { color: var(--good); }
.web-visit.err .web-visit-status { color: var(--bad); }
.web-visit-site {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-visit-meta { color: var(--text-muted); }
.web-visit-at { color: var(--text-muted); font-size: 9px; }
.web-footer {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.web-stats { font-size: 10px; font-family: var(--font-mono); }
.web-errors { display: flex; flex-direction: column; gap: 2px; }
.web-errors-title {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--bad);
  letter-spacing: 0.1em;
}
.web-err {
  font-size: 10px;
  color: var(--text-secondary);
  padding: 4px 6px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
}
.web-err-site { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-err-msg  {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 900px) {
  .web-body { grid-template-columns: 1fr; }
  .web-shot-wrap { min-height: 160px; }
}

/* ==========================================================================
   PREMIUM FINISH — the "very high-end" pass.
   Every rule below is additive polish on top of the base UI: refined
   typography, warmer shadows, a champagne gold accent for money and
   prestige surfaces, sharper hairline borders, and micro-details that
   register as "expensive" from the corner of the eye without ever
   competing for the user's attention.
   ========================================================================== */

/* --- Global typographic refinement --- */
html, body {
  font-feature-settings: "ss01" on, "ss02" on, "cv02" on, "cv03" on, "cv04" on;
  text-rendering: geometricPrecision;
}
.mono {
  font-feature-settings: "ss01" on, "zero" on, "tnum" on;
}

/* Selection uses the cognition palette — small detail but iconic. */
::selection {
  background: rgba(240, 171, 252, 0.28);
  color: #FFFFFF;
  text-shadow: 0 0 12px rgba(240, 171, 252, 0.6);
}

/* Slim, dark scrollbar. Chromium-family only. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 231, 255, 0.22) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(110, 231, 255, 0.28), rgba(240, 171, 252, 0.22));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(110, 231, 255, 0.45), rgba(240, 171, 252, 0.35));
  background-clip: padding-box;
}

/* Custom link focus for the tab / keyboard-accessible users. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Topbar refinements --- */
.topbar {
  padding: 16px 28px;
  gap: 28px;
  background:
    linear-gradient(180deg,
      rgba(3, 3, 8, 0.92) 0%,
      rgba(3, 3, 8, 0.72) 100%),
    radial-gradient(ellipse at top left, rgba(110, 231, 255, 0.06), transparent 60%);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 24px 60px -40px rgba(0, 0, 0, 0.9),
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
}

/* Brand title — refined display treatment with a soft champagne tint
   for the second half of the wordmark, evoking premium wordmarks
   (Bloomberg terminal, luxury horology dials, Rewind, Rabbit). */
.brand-title {
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 30%, rgba(232, 217, 166, 0.85) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(240, 171, 252, 0.14);
}
.brand-sub {
  color: #8894B4;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.brand-sub .mono {
  background: rgba(232, 217, 166, 0.06);
  border-color: rgba(232, 217, 166, 0.2);
  color: var(--gold);
}

/* Enhanced brand mark ring — dual counter-rotation for depth. */
.brand-mark-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 171, 252, 0.28);
  animation: brandRing 12s linear infinite reverse;
}

/* --- Badges: tighter, more understated, gold when it matters --- */
.badge {
  padding: 6px 11px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.03),
              rgba(255, 255, 255, 0.005));
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  transition: border-color 0.25s, background 0.25s;
}
.badge:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.badge .badge-icon {
  width: 12px; height: 12px;
  opacity: 0.85;
}

/* Live-wallet equity badge — the "money" surface. Champagne gold treatment.
   Kept as .badge-wallet so nothing on the page says "paper". */
.badge.badge-wallet,
.badge.badge-paper {
  border-color: rgba(232, 217, 166, 0.3);
  background:
    linear-gradient(180deg, rgba(232, 217, 166, 0.08), rgba(232, 217, 166, 0.015));
  color: var(--gold);
  box-shadow:
    0 1px 0 0 rgba(232, 217, 166, 0.14) inset,
    0 0 22px -10px rgba(232, 217, 166, 0.35);
}
.badge.badge-wallet .badge-label,
.badge.badge-paper .badge-label {
  color: var(--gold-strong);
  text-shadow: 0 0 10px rgba(232, 217, 166, 0.4);
}
.badge.badge-wallet .badge-icon,
.badge.badge-paper .badge-icon { color: var(--gold); }

/* Learning + always-learning badge — a whisper of magenta. */
.badge.badge-learning {
  border-color: rgba(240, 171, 252, 0.25);
  color: var(--cognition);
}
.badge.badge-uptime,
.badge.badge-browser,
.badge.badge-mode {
  color: #C4CDE4;
}

/* Sharper conn dot with real halo. */
.status-item.conn {
  padding: 6px 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.08);
}
.status-dot {
  width: 6px; height: 6px;
  box-shadow: 0 0 8px currentColor, 0 0 14px currentColor;
}

/* --- Layout gap: slightly tighter and more architectural --- */
.layout {
  gap: 14px;
  padding: 16px;
}

/* --- Hero block: bigger, quieter --- */
.panel-hero {
  padding: 22px 26px;
}
.hero-block {
  padding: 22px 26px;
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(18, 24, 46, 0.82), rgba(10, 14, 30, 0.7));
  box-shadow:
    0 20px 60px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.hero-block .hero-label {
  color: var(--text-muted);
  letter-spacing: 0.16em;
  font-size: 10px;
  font-weight: 500;
}
.hero-block .hero-headline {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}
.hero-block.hero-thinking .hero-headline {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(110, 231, 255, 0.85) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-underline > span {
  background: linear-gradient(90deg,
              transparent 0%,
              var(--accent) 20%,
              var(--cognition) 50%,
              var(--gold) 80%,
              transparent 100%);
  opacity: 0.55;
}

/* --- Buttons: refined pressable surfaces --- */
.btn {
  padding: 9px 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 20px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s, border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover {
  border-color: rgba(110, 231, 255, 0.55);
  color: #DFF8FF;
  background:
    linear-gradient(180deg, rgba(110, 231, 255, 0.14), rgba(110, 231, 255, 0.04));
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 24px -14px rgba(110, 231, 255, 0.4),
    0 0 28px -14px rgba(110, 231, 255, 0.55);
}

.btn-mini {
  padding: 6px 11px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* --- Footer: sink lower into the OLED, warmer type --- */
.footer {
  background:
    linear-gradient(180deg, rgba(3, 3, 8, 0.6), rgba(3, 3, 8, 0.95));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.03) inset;
  padding: 10px 24px;
}
/* Live tick-rate readout — replaces the old speed slider. The dot is
   driven inline from JS so its color shifts with engagement. */
.footer-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.045);
  border: 1px solid rgba(110, 231, 255, 0.18);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.footer-tick-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(190, 70%, 55%);
  box-shadow: 0 0 6px hsla(190, 90%, 60%, 0.6);
  animation: tickDotPulse 1.8s ease-in-out infinite;
}
@keyframes tickDotPulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.3); opacity: 1;   }
}
.footer-tick-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}
.footer-tick-value {
  color: var(--accent);
  font-weight: 600;
}

/* --- Thought stream: gentler card treatment --- */
.thought-stream .thought {
  border-color: rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.005));
}
.thought-stream .thought:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- Trading tables --- */
.trading-table {
  font-size: 11.5px;
}
.trading-table thead th {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  font-size: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
}
.trading-table tbody tr {
  transition: background 0.15s;
}
.trading-table tbody tr:hover {
  background: linear-gradient(90deg,
              rgba(110, 231, 255, 0.05),
              transparent 90%);
}
.trading-table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.008);
}

/* Chain-badge premium refresh — match the money-badge treatment. */
.chain-badge {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- Tabs: understated with a light bar underneath the active --- */
.tab {
  position: relative;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.tab.active {
  color: var(--text-primary);
}
.tab.active::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cognition), transparent);
  opacity: 0.9;
  filter: drop-shadow(0 0 8px var(--accent));
}

/* --- Region detail / knowledge / trading paragraphs --- */
.region-detail-empty p {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
  max-width: 42em;
}

/* Scanlines: rendered as a hairline repeating pattern applied to the
   grain overlay via ::before so we don't fight for the body::after slot
   (used by the aurora vignette / god-ray layer above). */
.grain-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.008) 0px,
      rgba(255, 255, 255, 0.008) 1px,
      transparent 1px,
      transparent 3px);
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* --- Media queries: keep the premium finish coherent on small viewports --- */
@media (max-width: 960px) {
  .topbar { padding: 12px 16px; gap: 12px; }
  .brand-title { font-size: 15.5px; }
  .layout { padding: 10px; gap: 10px; }
}

/* --- Tab badges: money-gold for `paper`, cyan for `live` --- */
#trading-badge.tab-badge {
  background: rgba(232, 217, 166, 0.10);
  border-color: rgba(232, 217, 166, 0.35);
  color: var(--gold-strong);
  text-shadow: 0 0 8px rgba(232, 217, 166, 0.35);
}
#web-badge.tab-badge {
  background: rgba(110, 231, 255, 0.10);
  border-color: rgba(110, 231, 255, 0.35);
  color: var(--accent);
  animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* --- Env-panel canvas + surrounding shell: match the premium
   framing used on other data surfaces. --- */
.env-wrap {
  padding: 6px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.035) inset,
    0 12px 40px -24px rgba(0, 0, 0, 0.9);
}
#env-canvas {
  border-radius: var(--r-sm);
  display: block;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.env-stats {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Trader-terminal tone on the sandbox stat grid: subtle mint for GAIN,
   subtle rose for LOSS, gold for EQUITY. All numerics only — labels stay
   uniform-muted so nothing shouts. */
.env-stat-gain .env-stat-value {
  color: #6EE7B7;
  text-shadow: 0 0 12px rgba(110, 231, 183, 0.25);
}
.env-stat-loss .env-stat-value {
  color: #FCA5A5;
  text-shadow: 0 0 12px rgba(252, 165, 165, 0.25);
}
.env-stat-equity .env-stat-value {
  color: var(--gold-strong);
  text-shadow: 0 0 14px rgba(253, 230, 138, 0.3);
  font-weight: 700;
}

/* (Speed slider removed — tick rate is now driven by the brain's own
   engagement signal and rendered as a live tempo readout above.) */

/* --- Live on-chain wallet block ---------------------------------------- */
.trading-block-live {
  border: 1px solid rgba(232, 217, 166, 0.22);
  background:
    linear-gradient(180deg, rgba(232, 217, 166, 0.03), rgba(0, 0, 0, 0.15));
}
.trading-block-live .trading-block-title { color: var(--gold-strong); }
.trading-block-live .count.pos { color: #6EE7B7; }
.trading-block-live .count.neg { color: #FCA5A5; }
.trading-block-live .count.warn { color: var(--gold-strong); }

/* Robinhood live wallet: mirror the gold treatment but tint it toward
   Robinhood's mint-green so the two live surfaces are visually
   distinct at a glance. */
.trading-block-hood {
  border: 1px solid rgba(110, 231, 183, 0.24);
  background:
    linear-gradient(180deg, rgba(110, 231, 183, 0.03), rgba(0, 0, 0, 0.15));
}
.trading-block-hood .trading-block-title { color: #A7F3D0; }
.trading-block-hood .count.pos  { color: #6EE7B7; }
.trading-block-hood .count.neg  { color: #FCA5A5; }
.trading-block-hood .count.warn { color: #FCD34D; }
.live-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 22px;
  padding: 10px 4px 14px;
}
.live-header-cell { display: flex; flex-direction: column; gap: 4px; }
.live-header-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.live-header-value {
  color: var(--text-primary);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.live-header-value a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(110, 231, 255, 0.4);
}
.live-header-value a:hover { color: var(--accent-strong, #A5F3FC); }
.live-tx-table { width: 100%; }
.live-tx-table td, .live-tx-table th { padding: 5px 8px; font-size: 11px; }
.live-tx-table .pos { color: #6EE7B7; }
.live-tx-table .neg { color: #FCA5A5; }
.live-tx-table a { color: var(--accent); }
.trading-block-live .empty {
  padding: 12px 4px 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

/* Playbook panel */
.pb-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 6px 2px 2px;
}
@media (max-width: 820px) {
  .pb-columns { grid-template-columns: 1fr; }
}
.pb-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 4px 6px;
  border-bottom: 1px solid rgba(148,163,184,0.15);
  margin-bottom: 4px;
}
.pb-col-title.pos { color: #6EE7B7; }
.pb-col-title.neg { color: #FCA5A5; }
.pb-name {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.3;
}
.pb-desc {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 2px;
}
#playbook-body .trading-table td { padding: 5px 8px; vertical-align: top; }
#playbook-body .trading-table th {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
#playbook-body .pos { color: #6EE7B7; }
#playbook-body .neg { color: #FCA5A5; }

/* ------------------------------------------------------------------ */
/* Voice panel — Broca's area · autonomous X/Twitter feed             */
/* ------------------------------------------------------------------ */
.voice-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding-top: 6px;
}
.voice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.voice-head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voice-title {
  font-weight: 700;
  color: #FDBA74;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.voice-sub { color: var(--text-muted); font-size: 11px; }
.voice-head-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voice-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.voice-pill.live {
  color: #FDBA74;
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.12);
}
.voice-pill.draft { color: var(--text-muted); }

.voice-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.voice-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 18px 4px;
  text-align: center;
}
.voice-item {
  border: 1px solid var(--border);
  border-left: 2px solid rgba(251, 146, 60, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-glass);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.voice-item.is-draft { border-left-color: rgba(255, 255, 255, 0.18); }
.voice-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.voice-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(251, 146, 60, 0.14);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #FDBA74;
}
.voice-kind-daily {
  background: rgba(110, 231, 255, 0.12);
  border-color: rgba(110, 231, 255, 0.35);
  color: var(--accent);
}
.voice-kind-weekly {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.4);
  color: #C4B5FD;
}
.voice-kind-spontaneous {
  background: rgba(255, 74, 94, 0.14);
  border-color: rgba(255, 74, 94, 0.4);
  color: #FF8DA0;
}
.voice-when { color: var(--text-muted); font-size: 10px; }
.voice-chars { color: var(--text-muted); font-size: 10px; margin-left: auto; }
.voice-text {
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.voice-item-foot { display: flex; align-items: center; gap: 8px; }
.voice-link { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); }
.voice-flag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.voice-flag.err { color: var(--bad); }

/* ======================================================================
   LEARNING PANEL — "what is the brain reading / learning right now"
   The primary, plain-language view in learning mode. Built for clarity
   first: one big headline, four numbers, a recent-reads list.
   ====================================================================== */
.learning-panel {
  display: none;              /* toggled to flex by main.js */
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding-top: 6px;
}

.learn-hero {
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-left: 3px solid rgba(125, 211, 252, 0.8);
  border-radius: 12px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.08), rgba(10, 14, 30, 0.35));
  transition: border-color 0.4s, background 0.4s;
}
.learn-hero.lit { animation: learnPulse 1.1s ease-out; }
@keyframes learnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.45); }
  100% { box-shadow: 0 0 0 22px rgba(125, 211, 252, 0); }
}
.learn-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7DD3FC;
  margin-bottom: 8px;
}
.learn-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7DD3FC;
  box-shadow: 0 0 8px #7DD3FC, 0 0 14px #7DD3FC;
  animation: learnBlink 1.8s ease-in-out infinite;
}
@keyframes learnBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.learn-hero-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #F4F8FF;
  text-decoration: none;
  text-wrap: balance;
}
a.learn-hero-title:hover { color: #BAE6FD; text-decoration: underline; }

.learn-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.learn-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  background: var(--bg-glass);
  text-align: center;
}
.learn-stat-v {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-stat-k {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.learn-recent { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.learn-recent-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.learn-recent-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.learn-recent-empty { color: var(--text-muted); font-size: 12px; padding: 4px 2px; }
.learn-recent-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 2px solid rgba(125, 211, 252, 0.5);
  border-radius: 8px;
  background: var(--bg-glass);
}
.learn-recent-item.learn-kind-voice { border-left-color: rgba(196, 181, 253, 0.6); }
.learn-recent-src {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7DD3FC;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-kind-voice .learn-recent-src { color: #C4B5FD; }
.learn-recent-title { color: var(--text-primary); font-size: 13px; line-height: 1.4; }
.learn-recent-title a { color: inherit; text-decoration: none; }
.learn-recent-title a:hover { color: var(--accent); text-decoration: underline; }
.learn-sources {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ======================================================================
   MOBILE CLARITY PASS — the dashboard was hard to parse on phones.
   Goals: horizontally-scrollable tabs, bigger legible readouts, panels
   that get real height, and the Learning panel front-and-centre.
   These rules live at the end of the file so they win the cascade.
   ====================================================================== */
@media (max-width: 800px) {
  /* Tabs: never wrap into an unreadable pile — scroll them sideways with
     comfortable touch targets. */
  .panel-title-tabs { flex-direction: column; align-items: stretch; gap: 6px; }
  .panel-title-tabs .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
  }
  .panel-title-tabs .tabs::-webkit-scrollbar { display: none; }
  .panel-title-tabs .tabs .tab {
    flex: 0 0 auto;
    padding: 8px 14px !important;
    font-size: 13px;
    border-radius: 8px;
  }
  #region-title { display: none; }

  /* The tabbed panel needs real height on phones or every list is a
     2-line sliver. Give it a tall, self-scrolling body. */
  .panel-region { min-height: 70vh; }
  .learning-panel,
  .knowledge-panel,
  .trading-panel,
  .web-panel,
  .voice-panel { max-height: none; }

  /* Learning stats: 2×2 grid reads far better than 4-across on a phone. */
  .learn-stats { grid-template-columns: 1fr 1fr; }
  .learn-hero-title { font-size: clamp(19px, 5.4vw, 26px); }
  .learn-recent-item { flex-direction: column; gap: 3px; }
  .learn-recent-src { max-width: 100%; }

  /* Key topbar readouts: make the numbers that matter actually legible. */
  .topbar .status-item .num { font-size: 12px; }
  .topbar .badge-browser { display: inline-flex; max-width: 60vw; }
  .topbar .badge-browser .num {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Thought stream + env don't need to dominate; let the brain + the
     learning panel lead. Reorder so region/learning sits right under the
     brain and hero. */
  .layout {
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "brain"
      "hero"
      "region"
      "env"
      "thoughts";
  }

  /* CRITICAL mobile fix: OrbitControls sets `touch-action: none` on the
     canvas, which hijacks one-finger scroll — so you could never scroll
     PAST the 3D brain to reach the region panel below it, and the panel
     "didn't show". Allow vertical page scrolling over the canvas (drag
     still rotates horizontally). !important beats the inline style
     OrbitControls writes. */
  #brain3d canvas { touch-action: pan-y !important; }

  /* Let the brain panel be a normal, finite block so its region legend
     flows below the canvas and the whole thing scrolls naturally. */
  .panel-brain { overflow: visible; min-height: auto; }
  #brain3d { flex: 0 0 auto; height: 44vh; min-height: 300px; }
  .brain-legend { display: grid !important; }

  /* The tabbed detail panel (Region / Learning / …) sits at natural
     height and scrolls with the page rather than trapping content in a
     zero-height inner scroller. */
  .panel-region { min-height: auto; overflow: visible; }
  .panel-region #region-detail,
  .panel-region .learning-panel,
  .panel-region .knowledge-panel,
  .panel-region .trading-panel,
  .panel-region .web-panel,
  .panel-region .voice-panel { overflow: visible; max-height: none; }
}

@media (max-width: 460px) {
  .learn-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .brand-plate-class, .brand-plate-order { display: none; }
}

/* ======================================================================
   THOUGHT STREAM — the brain's voice ("wants to say") folded in as speech.
   ====================================================================== */
.thought.thought-voice {
  border-left: 2px solid rgba(251, 146, 60, 0.75);
  background:
    linear-gradient(180deg, rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.015));
  border-radius: 8px;
  padding: 9px 12px;
}
.thought-voice .voice-speaker {
  color: #FDBA74;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.thought-voice-text {
  margin-top: 3px;
  color: #FFEFDD;
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
}
.thought-voice-text::before { content: "\201C"; opacity: 0.6; }
.thought-voice-text::after  { content: "\201D"; opacity: 0.6; }
.thought-voice .voice-flag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.thought-voice .voice-flag.ok { color: #6EE7B7; }