/* ═══════════════════════════════════════════════════════════
   TERMINAL MODE
   Design reference: design/dashboard-shell-concepts/concept-d4.html
   Applied when: html[data-ui-mode="terminal"]
   Studio mode = current default (no overrides needed)
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   LAYER 1: TOKEN OVERRIDES
   Deeper backgrounds, harder borders, sharper radius,
   monospace-forward typography
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] {
  /* Backgrounds — deeper, cooler */
  --bg: #090a0f;
  --bg-elev: #0b0c12;
  --bg-surface: #0f1015;
  --bg-primary: #090a0f;
  --bg-secondary: #0b0c12;
  --bg-muted: #0f1015;
  --bg-hover: #141620;
  --color-bg-primary: #090a0f;
  --color-bg-secondary: #0b0c12;
  --color-bg-card: #0f1015;

  /* Panels — flatter */
  --panel: #0e1018;
  --panel-hover: #141620;
  --panel-active: #181c28;

  /* Borders — crisper, slightly more visible */
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.08);

  /* Radius — sharp workstation edges */
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-3xl: 4px;

  /* Typography — monospace-forward for display, Inter for body */
  --font-display: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  /* --font-sans stays as-is (Inter) */

  /* Nav rail — own token, not bound to gradient-surface */
  --nav-rail-bg: #090a0f;

  /* Absolute surface tokens — visible depth even on OLED black */
  --terminal-content-bg: #0c0e14;
  --terminal-surface-hero: #151821;
  --terminal-surface-panel: #12151d;
  --terminal-surface-support: #10131a;
  --terminal-separator: rgba(255, 255, 255, 0.06);

  /* Gradients — flatter, no mesh */
  --gradient-surface: #0d1117;

  /* Shadows — subtler, no glow */
  --shadow-glow: none;
  --shadow-premium: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}


/* ─────────────────────────────────────────────────────────
   LAYER 2: SHELL GRID
   Narrower rail, tighter collapsed width
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .AppShell {
  grid-template-columns: 220px minmax(0, 1fr);
}

html[data-ui-mode="terminal"] .AppShell.nav-collapsed {
  grid-template-columns: 56px minmax(0, 1fr);
}


/* ─────────────────────────────────────────────────────────
   NAV RAIL — EXPANDED
   Workstation feel: tight spacing, border-left active,
   monospace brand, no rounded cards
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .NavRail {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
  width: 220px;
}

/* Brand zone — monospace, tighter */
html[data-ui-mode="terminal"] .nav-header {
  padding: 14px 18px 12px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-ui-mode="terminal"] .nav-logo-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}

html[data-ui-mode="terminal"] .nav-tier {
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.12);
}

/* Nav links — border-left active, no rounded bg */
html[data-ui-mode="terminal"] .nav-list {
  gap: 0;
  padding-right: 0;
}

html[data-ui-mode="terminal"] .nav-link {
  padding: 8px 18px;
  border-radius: 0;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
  border-left: 2px solid transparent;
  color: #6b7280;
  letter-spacing: 0.01em;
  transition: all 0.1s ease;
}

/* Remove the left accent bar pseudo-element */
html[data-ui-mode="terminal"] .nav-link::before {
  display: none;
}

html[data-ui-mode="terminal"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.025);
  color: #d1d5db;
  border-left-color: rgba(255, 255, 255, 0.08);
}

html[data-ui-mode="terminal"] .nav-link.active {
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.08);
  border: none;
  border-left: 2px solid var(--brand, #5eadb8);
  border-radius: 0;
  color: #f1f5f9;
  font-weight: 600;
}

/* Remove the active dot indicator */
html[data-ui-mode="terminal"] .nav-link.active::after {
  content: none;
}

/* Nav icon — slightly smaller */
html[data-ui-mode="terminal"] .nav-icon {
  font-size: 14px;
  opacity: 0.5;
}

html[data-ui-mode="terminal"] .nav-icon svg {
  width: 14px;
  height: 14px;
}

html[data-ui-mode="terminal"] .nav-link.active .nav-icon {
  opacity: 1;
  color: var(--brand, #5eadb8);
  filter: none;
  transform: none;
}

html[data-ui-mode="terminal"] .nav-link:hover .nav-icon {
  filter: none;
  transform: none;
}

/* Nav divider — tighter */
html[data-ui-mode="terminal"] .nav-divider {
  margin: 4px 18px;
  background: rgba(255, 255, 255, 0.04);
}

/* Nav label */
html[data-ui-mode="terminal"] .nav-label {
  font-size: 12px;
}

/* ── FOOTER / BOTTOM ZONE — deliberate, compact workstation layout ──
   Order: user block → mode toggle → collapse button
   Hidden: sample toggle, validator special styling, social row, version */

html[data-ui-mode="terminal"] .nav-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
  gap: 4px;
  background: rgba(255, 255, 255, 0.01);
}

/* User block — monogram + name + status, first in visual order */
html[data-ui-mode="terminal"] .nav-user {
  border-radius: 3px;
  background: transparent;
  padding: 8px 6px;
  order: 1;
  gap: 10px;
}

html[data-ui-mode="terminal"] .nav-user-avatar {
  border-radius: 3px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--brand-rgb, 94, 173, 184), 0.18);
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand, #5eadb8);
}

html[data-ui-mode="terminal"] .nav-user-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #e8ecf0;
}

html[data-ui-mode="terminal"] .nav-user-status {
  font-size: 10px;
  font-weight: 500;
}

/* Mode toggle — below user, compact */
html[data-ui-mode="terminal"] .nav-mode-toggle {
  order: 2;
  margin: 4px 2px 2px;
  border-radius: 3px;
}

html[data-ui-mode="terminal"] .nav-mode-toggle .nav-mode-btn {
  border-radius: 0;
}
html[data-ui-mode="terminal"] .nav-mode-toggle .nav-mode-btn:first-child { border-radius: 3px 0 0 3px; }
html[data-ui-mode="terminal"] .nav-mode-toggle .nav-mode-btn:last-child { border-radius: 0 3px 3px 0; }

/* Collapse button — very subtle, last */
html[data-ui-mode="terminal"] .nav-collapse-btn {
  border-radius: 3px;
  order: 3;
  opacity: 0.3;
  border: none;
  padding: 4px;
  margin: 0;
  width: auto;
  align-self: center;
}

html[data-ui-mode="terminal"] .nav-collapse-btn:hover {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.03);
}

/* Hide non-essential items in Terminal bottom zone */
html[data-ui-mode="terminal"] .nav-demo-toggle,
html[data-ui-mode="terminal"] .nav-footer .nav-divider {
  display: none;
}

/* Validator link — demoted to plain nav item, no special styling */
html[data-ui-mode="terminal"] .nav-link-validator {
  background: none;
  border: none;
  border-radius: 0;
  border-left: 2px solid transparent;
  margin: 0;
  padding: 8px 18px;
  order: 0;
  font-size: 12.5px;
}

html[data-ui-mode="terminal"] .nav-link-validator:hover {
  background: rgba(255, 255, 255, 0.025);
  border-left-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown menu — sharp */
html[data-ui-mode="terminal"] .user-dropdown-menu {
  border-radius: 3px !important;
}


/* ─────────────────────────────────────────────────────────
   NAV RAIL — COLLAPSED (desktop)
   56px width, sharp icon cells, no rounded pills
   ───────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  html[data-ui-mode="terminal"] .NavRail {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html[data-ui-mode="terminal"] .nav-collapsed .NavRail {
    width: 56px;
    padding: 8px 0;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-link {
    width: 38px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-left: none;
    border-radius: 3px;
    margin: 1px auto;
    border: 1px solid transparent;
    color: #4b5563;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #9ca3af;
    border-left: none;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-link.active {
    background: rgba(var(--brand-rgb, 94, 173, 184), 0.1);
    border: 1px solid rgba(var(--brand-rgb, 94, 173, 184), 0.15);
    border-left: 1px solid rgba(var(--brand-rgb, 94, 173, 184), 0.15);
    color: var(--brand, #5eadb8);
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-link.active::after {
    content: attr(data-tooltip);
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-icon {
    font-size: 15px;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-icon svg {
    width: 15px;
    height: 15px;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-divider {
    width: 24px;
    margin: 4px auto;
  }

  html[data-ui-mode="terminal"] .nav-collapsed .nav-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  /* Collapse button — squared */
  html[data-ui-mode="terminal"] .nav-collapsed .nav-collapse-btn {
    border-radius: 3px;
    width: 36px;
    height: 36px;
  }

  /* Tooltip — sharp edges */
  html[data-ui-mode="terminal"] .nav-collapsed .nav-link::after {
    border-radius: 3px;
  }

  /* Validator in collapsed — flat */
  html[data-ui-mode="terminal"] .nav-collapsed .nav-link-validator {
    background: none !important;
    border: none !important;
    border-radius: 3px;
    margin-top: 0;
  }
}


/* ─────────────────────────────────────────────────────────
   MARKET PULSE BAR — denser, quieter
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .market-pulse-bar {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  height: 32px;
  opacity: 0.8;
}

html[data-ui-mode="terminal"] .pulse-item {
  height: 32px;
  line-height: 32px;
  font-size: 10px;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

html[data-ui-mode="terminal"] .pulse-sym {
  font-size: 10px;
  letter-spacing: 0.05em;
}

html[data-ui-mode="terminal"] .pulse-tag {
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────
   CONTENT AREA — darker bg, tighter padding
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .Content {
  background: var(--terminal-content-bg, #0c0e14) !important;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

/* Content top border — simple line, no gradient accent */
html[data-ui-mode="terminal"] .Content::before {
  background: rgba(255, 255, 255, 0.04);
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────
   PAGE HEADERS — tighter, no decorative flourishes
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .page-header {
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Remove teal accent line under header */
html[data-ui-mode="terminal"] .page-header::after {
  display: none;
}

html[data-ui-mode="terminal"] .page-header .page-title,
html[data-ui-mode="terminal"] h1.page-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

html[data-ui-mode="terminal"] .page-subtitle {
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}


/* ─────────────────────────────────────────────────────────
   SECTION HEADERS — flatter
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .section-header {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

html[data-ui-mode="terminal"] .section-title,
html[data-ui-mode="terminal"] .section-header h2,
html[data-ui-mode="terminal"] .section-header h3,
html[data-ui-mode="terminal"] .section-header h4 {
  letter-spacing: 0;
}


/* ─────────────────────────────────────────────────────────
   PAGE TABS — sharp underline, no rounded pills
   ───────────────────────────────────────────────────────── */

/* Unified tab treatment — all pages */
html[data-ui-mode="terminal"] .page-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.005);
  gap: 0;
}

html[data-ui-mode="terminal"] .page-tab {
  font-size: 11px;
  font-weight: 500;
  padding: 8px 20px;
  letter-spacing: 0.02em;
  color: #4b5563;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

html[data-ui-mode="terminal"] .page-tab:hover {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.015) !important;
}

html[data-ui-mode="terminal"] .page-tab.active {
  color: var(--brand, #5eadb8);
  border-bottom-color: var(--brand, #5eadb8);
  font-weight: 600;
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.03) !important;
}

/* Kill pill tab styling in Terminal — use flat underline everywhere */
html[data-ui-mode="terminal"] .page-tabs--pill {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 0;
  gap: 0;
}

html[data-ui-mode="terminal"] .page-tabs--pill .page-tab {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}

html[data-ui-mode="terminal"] .page-tabs--pill .page-tab.active {
  border-bottom-color: var(--brand, #5eadb8) !important;
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.03) !important;
  color: var(--brand, #5eadb8) !important;
}

/* Filter chips — terminal flat style */
html[data-ui-mode="terminal"] .filter-chip {
  border-radius: 2px;
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #6b7280;
}

html[data-ui-mode="terminal"] .filter-chip:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #9ca3af;
}

html[data-ui-mode="terminal"] .filter-chip.active {
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.08);
  border-color: rgba(var(--brand-rgb, 94, 173, 184), 0.2);
  color: var(--brand, #5eadb8);
}


/* ─────────────────────────────────────────────────────────
   CARDS / PANELS — sharp, flat
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .card {
  border-radius: 3px;
}


/* ─────────────────────────────────────────────────────────
   WORKSPACE CONTEXT BAR — sharp capsules
   (Inline styles need !important overrides)
   ───────────────────────────────────────────────────────── */

/* Workspace context bar styling now handled inside the component (mode-aware render).
   Stale CSS overrides removed. */


/* ═════════════════════════════════════════════════════════
   DASHBOARD — TERMINAL MODE (Phase 3)
   Transforms the dashboard hero into a D4 instrument strip.
   Same HTML, same data, same logic — different framing.
   Reference: design/dashboard-shell-concepts/concept-d4.html
   ═════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   HERO INSTRUMENT STRIP
   Studio: rounded card with stacked hero + stats
   Terminal: full-width grid strip — hero left, 4 stats right
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .dashboard-hero-card {
  display: grid;
  grid-template-columns: 3fr repeat(4, 1fr);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--terminal-separator, rgba(255, 255, 255, 0.06));
  background: var(--terminal-surface-hero, #151821);
  box-shadow: none;
  margin-bottom: 0;
  margin: 0;
  padding: 0;
}

/* Hero P&L — primary instrument cell */
html[data-ui-mode="terminal"] .hero-pnl-section {
  padding: 32px 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html[data-ui-mode="terminal"] .hero-label {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--brand, #5eadb8);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

html[data-ui-mode="terminal"] .hero-value {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}

html[data-ui-mode="terminal"] .hero-secondary {
  font-size: 12px;
}

html[data-ui-mode="terminal"] .hero-today-label {
  color: #6b7280;
}

html[data-ui-mode="terminal"] .hero-today-value {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-weight: 600;
}

html[data-ui-mode="terminal"] .hero-today-trades {
  color: #4b5563;
}

/* Stats row — dissolve into parent grid */
html[data-ui-mode="terminal"] .hero-stats-row {
  display: contents;
}

/* Hide dividers (they're between stats in the markup) */
html[data-ui-mode="terminal"] .hero-stat-divider {
  display: none;
}

/* Each stat — compartment cell */
html[data-ui-mode="terminal"] .hero-stat {
  padding: 20px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

html[data-ui-mode="terminal"] .hero-stat:last-child {
  border-right: none;
}

html[data-ui-mode="terminal"] .hero-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html[data-ui-mode="terminal"] .hero-stat-value {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

html[data-ui-mode="terminal"] .hero-stat-meta {
  font-size: 10px;
  color: #6b7280;
}


/* ─────────────────────────────────────────────────────────
   DASHBOARD PAGE HEADER — visually hidden in Terminal
   The instrument strip IS the visual hero, but the semantic
   heading stays accessible for screen readers and DOM queries.
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .dashboard-container .page-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ─────────────────────────────────────────────────────────
   TERMINAL TOP CHROME — greeting bar + workspace context
   This is the D4 concept's "top chrome" that replaces the
   floating workspace context capsules.
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .terminal-top-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.012);
}

html[data-ui-mode="terminal"] .terminal-greeting {
  font-size: 12px;
  color: #9ca3af;
}

html[data-ui-mode="terminal"] .terminal-greeting b {
  color: #e8ecf0;
  font-weight: 600;
}

html[data-ui-mode="terminal"] .terminal-ws-bar {
  display: flex;
  gap: 0;
}

html[data-ui-mode="terminal"] .terminal-ws-bar {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-ui-mode="terminal"] .terminal-ws-item {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-ui-mode="terminal"] .terminal-ws-item:last-child {
  border-right: none;
}

html[data-ui-mode="terminal"] .terminal-ws-item:hover {
  background: rgba(255, 255, 255, 0.045);
}

html[data-ui-mode="terminal"] .terminal-ws-key {
  color: var(--brand, #5eadb8);
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html[data-ui-mode="terminal"] .terminal-ws-val {
  color: #f0f2f5;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-sans);
}

/* Workspace bar visibility handled at component level (workspace-context-bar.js).
   No CSS hide needed — component checks Terminal dashboard route directly. */


/* ─────────────────────────────────────────────────────────
   DASHBOARD TABS — terminal treatment
   Sits flush below the instrument strip
   ───────────────────────────────────────────────────────── */

/* Terminal dashboard: zero-pad content, sections own their padding */
html[data-ui-mode="terminal"] .terminal-dashboard {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Content area has no padding when terminal dashboard is active */
html[data-ui-mode="terminal"] .Content:has(.terminal-dashboard) {
  padding: 0;
  overflow-x: hidden;
}

html[data-ui-mode="terminal"] .dashboard-container .page-tabs {
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.005);
  margin: 0;
}

html[data-ui-mode="terminal"] .dashboard-container .page-tab {
  font-size: 11px;
  font-weight: 500;
  padding: 8px 20px;
  letter-spacing: 0.02em;
  color: #4b5563;
  font-family: var(--font-sans);
  border-bottom-width: 2px;
}

html[data-ui-mode="terminal"] .dashboard-container .page-tab:hover {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.015);
}

html[data-ui-mode="terminal"] .dashboard-container .page-tab.active {
  color: var(--brand, #5eadb8);
  border-bottom-color: var(--brand, #5eadb8);
  font-weight: 600;
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.03);
}


/* ─────────────────────────────────────────────────────────
   PNL WIDGETS ROW — joined terminal panels (L2 surface)
   Not separate cards — a single joined work area
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .pnl-widgets-row {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.012);
}

html[data-ui-mode="terminal"] .pnl-widgets-row > div {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--terminal-separator, rgba(255, 255, 255, 0.06)) !important;
  background: var(--terminal-surface-panel, #12151d) !important;
  box-shadow: none !important;
  padding: 18px 24px !important;
}

/* Panel headers inside PnL widgets — terminal label style, no bg clash */
html[data-ui-mode="terminal"] .pnl-widgets-row .widget-header,
html[data-ui-mode="terminal"] .pnl-widgets-row [class*="header"] {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* PnL widgets inner elements — clean surface, no card artifacts */
html[data-ui-mode="terminal"] .pnl-widgets-row .card,
html[data-ui-mode="terminal"] .pnl-widgets-row [class*="widget"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html[data-ui-mode="terminal"] .pnl-widgets-row .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 0 0 10px !important;
  margin-bottom: 12px !important;
}

html[data-ui-mode="terminal"] .pnl-widgets-row .card-body {
  background: transparent !important;
  padding: 0 !important;
}

html[data-ui-mode="terminal"] .pnl-widgets-row > div:last-child {
  border-right: none !important;
}


/* ─────────────────────────────────────────────────────────
   ECONOMIC CALENDAR BAR — flatter
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .economic-calendar-bar {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.008);
  margin-left: 0;
  margin-right: 0;
  padding: 10px 24px;
  margin-bottom: 0;
}

html[data-ui-mode="terminal"] .event-pill {
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────
   HEATMAP + TRADES ROW — support strip (L3 surface)
   Full-width joined modules, border-separated
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .heatmap-trades-row {
  gap: 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.006);
}

html[data-ui-mode="terminal"] .heatmap-trades-row > div {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--terminal-separator, rgba(255, 255, 255, 0.06)) !important;
  padding: 18px 24px !important;
  background: var(--terminal-surface-support, #10131a) !important;
  box-shadow: none !important;
}

/* Inner cards in support row — no card artifacts, inherit surface */
html[data-ui-mode="terminal"] .heatmap-trades-row .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html[data-ui-mode="terminal"] .heatmap-trades-row .card:hover {
  transform: none !important;
}

html[data-ui-mode="terminal"] .heatmap-trades-row .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 10px !important;
}

html[data-ui-mode="terminal"] .heatmap-trades-row .card-body {
  background: transparent !important;
  padding: 0 !important;
}

html[data-ui-mode="terminal"] .heatmap-trades-row > div:last-child {
  border-right: none !important;
}

/* Support section titles — terminal label treatment */
html[data-ui-mode="terminal"] .heatmap-trades-row .card-title,
html[data-ui-mode="terminal"] .heatmap-trades-row h3 {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af !important;
}

/* Recent Trades Terminal layout is defined in dashboard.js injected styles
   (same layer that owns the grid templates, so specificity is correct). */


/* ─────────────────────────────────────────────────────────
   UNJOURNALED CARD — flatter
   ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   TERMINAL SUPPORT STRIP — 3-column unified bottom row
   Replaces vertical widget stack with D4 concept layout:
   UNJOURNALED | DISCIPLINE | STELLA
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .terminal-support-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--terminal-separator, rgba(255, 255, 255, 0.06));
  background: var(--terminal-surface-support, #10131a);
}

html[data-ui-mode="terminal"] .terminal-support-cell {
  padding: 16px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-ui-mode="terminal"] .terminal-support-cell:last-child {
  border-right: none;
}

html[data-ui-mode="terminal"] .terminal-support-title {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

html[data-ui-mode="terminal"] .terminal-support-body {
  display: flex;
  align-items: center;
}

@media (max-width: 1024px) {
  html[data-ui-mode="terminal"] .terminal-support-strip {
    grid-template-columns: 1fr;
  }
  html[data-ui-mode="terminal"] .terminal-support-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
}


/* All bottom dashboard modules — flat strips with subtle surface */
html[data-ui-mode="terminal"] .unjournaled-trades-card {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  margin: 0;
  padding: 14px 24px;
  background: var(--terminal-surface-support, #10131a) !important;
  box-shadow: none !important;
}

/* Discipline score card */
html[data-ui-mode="terminal"] .discipline-score-card,
html[data-ui-mode="terminal"] [class*="discipline"] {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 24px !important;
  margin: 0 !important;
}

/* AI Briefing card */
html[data-ui-mode="terminal"] .ai-briefing-card,
html[data-ui-mode="terminal"] [class*="briefing"],
html[data-ui-mode="terminal"] [class*="daily-ai"] {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 24px !important;
  margin: 0 !important;
}

/* Generic: any remaining cards inside terminal-dashboard below the main work area */
html[data-ui-mode="terminal"] .terminal-dashboard > .card,
html[data-ui-mode="terminal"] .terminal-dashboard .page-tab-content > .card {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 14px 24px !important;
}

/* Kill card hover effects in terminal dashboard */
html[data-ui-mode="terminal"] .terminal-dashboard .card:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────────
   DASHBOARD RESPONSIVE — Terminal
   ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  html[data-ui-mode="terminal"] .dashboard-hero-card {
    grid-template-columns: 1fr;
    margin: 0;
  }

  html[data-ui-mode="terminal"] .hero-pnl-section {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 24px;
  }

  html[data-ui-mode="terminal"] .hero-stat {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 14px 24px;
  }

  html[data-ui-mode="terminal"] .pnl-widgets-row {
    margin: 0;
  }

  html[data-ui-mode="terminal"] .dashboard-container .page-tabs {
    margin: 0;
    padding: 0 16px;
  }
}

@media (max-width: 768px) {
  html[data-ui-mode="terminal"] .hero-value {
    font-size: 2rem;
  }

  html[data-ui-mode="terminal"] .hero-stat-value {
    font-size: 1.1rem;
  }

  html[data-ui-mode="terminal"] .dashboard-hero-card {
    margin: 0;
  }
}


/* ─────────────────────────────────────────────────────────
   MOBILE — keep terminal adjustments responsive
   ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  html[data-ui-mode="terminal"] .AppShell,
  html[data-ui-mode="terminal"] .AppShell.nav-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-mode="terminal"] .Content {
    padding: 16px;
  }

  html[data-ui-mode="terminal"] .market-pulse-bar {
    height: 30px;
  }

  html[data-ui-mode="terminal"] .pulse-item {
    height: 30px;
    line-height: 30px;
    font-size: 10px;
    padding: 0 10px;
  }
}


/* ═════════════════════════════════════════════════════════
   PHASE 4 — SHARED PANEL / TYPOGRAPHY SYSTEM
   Global Terminal overrides for cards, tables, section
   headers, buttons, inputs. Applies to ALL pages.
   ═════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   CARDS — L2 panel treatment
   Sharp, flat, no hover lift, tighter padding
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .card {
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.018);
}

html[data-ui-mode="terminal"] .card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.07);
}

html[data-ui-mode="terminal"] .card-premium {
  border-radius: 3px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(var(--brand-rgb, 94, 173, 184), 0.12);
}

html[data-ui-mode="terminal"] .card-premium:hover {
  box-shadow: none;
}

html[data-ui-mode="terminal"] .card-glass {
  border-radius: 3px;
  box-shadow: none;
}

html[data-ui-mode="terminal"] .card-gradient {
  border-radius: 3px;
}

/* Card header — tighter */
html[data-ui-mode="terminal"] .card .hd,
html[data-ui-mode="terminal"] .card-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Card title — smaller, no letter-spacing */
html[data-ui-mode="terminal"] .card-title,
html[data-ui-mode="terminal"] h3.card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html[data-ui-mode="terminal"] .card-subtitle {
  font-size: 11px;
}

/* Card body — tighter */
html[data-ui-mode="terminal"] .card .bd,
html[data-ui-mode="terminal"] .card-body {
  padding: 16px;
}

/* Card footer */
html[data-ui-mode="terminal"] .card .ft,
html[data-ui-mode="terminal"] .card-footer {
  border-radius: 0;
}


/* ─────────────────────────────────────────────────────────
   SECTION HEADERS — tighter, terminal feel
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .section-title,
html[data-ui-mode="terminal"] .section-header h2,
html[data-ui-mode="terminal"] .section-header h3,
html[data-ui-mode="terminal"] .section-header h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ─────────────────────────────────────────────────────────
   BUTTONS — sharper, tighter
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .btn {
  border-radius: 3px;
  font-size: 12px;
  padding: 6px 14px;
  min-height: 32px;
}

html[data-ui-mode="terminal"] .btn:hover {
  transform: none;
}

html[data-ui-mode="terminal"] .btn-sm {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 28px;
}


/* ─────────────────────────────────────────────────────────
   INPUTS / SELECTS — sharper
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .setting-input,
html[data-ui-mode="terminal"] select,
html[data-ui-mode="terminal"] input[type="text"],
html[data-ui-mode="terminal"] input[type="search"],
html[data-ui-mode="terminal"] input[type="number"],
html[data-ui-mode="terminal"] textarea {
  border-radius: 3px;
}

html[data-ui-mode="terminal"] .premium-select {
  border-radius: 3px;
}


/* ─────────────────────────────────────────────────────────
   GENERIC TABLE TREATMENT
   Denser, monospace headers, tighter rows
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] table th {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  color: #9ca3af;
}

html[data-ui-mode="terminal"] table td {
  font-size: 12px;
  padding: 5px 10px;
}

html[data-ui-mode="terminal"] table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}


/* ─────────────────────────────────────────────────────────
   MODAL / DRAWER — sharper
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .modal-content {
  border-radius: 4px;
}

html[data-ui-mode="terminal"] .drawer,
html[data-ui-mode="terminal"] .trade-detail-drawer {
  border-radius: 0;
}


/* ─────────────────────────────────────────────────────────
   BADGES — sharper
   ───────────────────────────────────────────────────────── */

html[data-ui-mode="terminal"] .badge {
  border-radius: 2px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.1 — TRADES PAGE
   Terminal density for trade table, filters, cards
   ═════════════════════════════════════════════════════════ */

/* Trades table container — sharp */
html[data-ui-mode="terminal"] .trades-table-container {
  border-radius: 3px;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Trades table — denser rows */
html[data-ui-mode="terminal"] .trades-table {
  font-size: 12px;
}

html[data-ui-mode="terminal"] .trades-table th {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
}

html[data-ui-mode="terminal"] .trades-table td {
  padding: 5px 10px;
  font-size: 12px;
  border-bottom-color: rgba(255, 255, 255, 0.03);
}

html[data-ui-mode="terminal"] .trades-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* Trade side borders — thinner */
html[data-ui-mode="terminal"] .trade-long {
  border-left-width: 2px;
}

html[data-ui-mode="terminal"] .trade-short {
  border-left-width: 2px;
}

/* Trades filter bar — tighter pills */
html[data-ui-mode="terminal"] .trades-filter-bar {
  gap: 6px;
}

html[data-ui-mode="terminal"] .trades-filter-bar .btn,
html[data-ui-mode="terminal"] .trades-filter-bar select,
html[data-ui-mode="terminal"] .trades-filter-bar input {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.2 — ANALYTICS PAGE
   Terminal density for card grids, chart panels, breakdown
   ═════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════
   ANALYTICS — Terminal unified pass
   Flatter panels, joined surfaces, tighter everything
   ═════════════════════════════════════════════════════════ */

/* Analytics grids — tighter but preserve child sizing */
html[data-ui-mode="terminal"] .analytics-grid {
  gap: 8px !important;
}

html[data-ui-mode="terminal"] .analytics-grid > .card {
  background: var(--terminal-surface-panel, #12151d) !important;
  overflow: visible !important;
}

html[data-ui-mode="terminal"] .analytics-charts-row {
  gap: 8px !important;
}

html[data-ui-mode="terminal"] .analytics-charts-row > .card {
  background: var(--terminal-surface-panel, #12151d) !important;
  overflow: visible !important;
}

/* Analytics filter bar — tighter */
html[data-ui-mode="terminal"] .analytics-filters {
  gap: 12px !important;
}

html[data-ui-mode="terminal"] .analytics-filters select,
html[data-ui-mode="terminal"] .analytics-filters .input {
  border-radius: 3px;
  font-size: 12px;
  padding: 4px 10px;
}

html[data-ui-mode="terminal"] .analytics-filters label {
  font-size: 11px;
  font-family: 'JetBrains Mono', var(--font-mono);
  letter-spacing: 0.03em;
}

/* Analytics tab content — tighter card stacking */
html[data-ui-mode="terminal"] #performance-content .card,
html[data-ui-mode="terminal"] #strategy-content .card,
html[data-ui-mode="terminal"] #risk-content .card,
html[data-ui-mode="terminal"] #ai-content .card,
html[data-ui-mode="terminal"] #edge-content .card,
html[data-ui-mode="terminal"] #mfemae-content .card,
html[data-ui-mode="terminal"] #context-content .card,
html[data-ui-mode="terminal"] #compare-content .card {
  margin-top: 1px !important;
  background: var(--terminal-surface-panel, #12151d) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

html[data-ui-mode="terminal"] #performance-content .card:first-child,
html[data-ui-mode="terminal"] #strategy-content .card:first-child,
html[data-ui-mode="terminal"] #risk-content .card:first-child,
html[data-ui-mode="terminal"] #ai-content .card:first-child,
html[data-ui-mode="terminal"] #edge-content .card:first-child,
html[data-ui-mode="terminal"] #mfemae-content .card:first-child,
html[data-ui-mode="terminal"] #context-content .card:first-child,
html[data-ui-mode="terminal"] #compare-content .card:first-child {
  border-top: none !important;
}

/* Intro banners inside analytics subtabs — flatten */
html[data-ui-mode="terminal"] .page-tab-content > div[style*="border-radius: 12px"],
html[data-ui-mode="terminal"] .page-tab-content > div[style*="border-radius:12px"] {
  border-radius: 3px !important;
  background: var(--terminal-surface-panel, #12151d) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Context pills / metric pills — flat terminal style */
html[data-ui-mode="terminal"] .context-pill {
  border-radius: 2px !important;
  font-size: 10px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #6b7280;
}

html[data-ui-mode="terminal"] .context-pill:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #9ca3af;
}

html[data-ui-mode="terminal"] .context-pill.active {
  background: rgba(var(--brand-rgb, 94, 173, 184), 0.08);
  border-color: rgba(var(--brand-rgb, 94, 173, 184), 0.2);
  color: var(--brand, #5eadb8);
}

/* Analytics badge — sharp */
html[data-ui-mode="terminal"] .badge-brand {
  border-radius: 2px;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* Performance metrics grid inside cards */
html[data-ui-mode="terminal"] .performance-summary-grid {
  gap: 1px !important;
}

html[data-ui-mode="terminal"] .performance-summary-grid > div {
  background: var(--terminal-surface-panel, #12151d) !important;
  border-radius: 0 !important;
}

/* Strategy comparison chart area */
html[data-ui-mode="terminal"] #strategyComparisonCard,
html[data-ui-mode="terminal"] #strategyEquityCurvesCard {
  background: var(--terminal-surface-panel, #12151d) !important;
}

/* Locked tab content — flatten */
html[data-ui-mode="terminal"] .locked-tab-content {
  border-radius: 3px !important;
}

/* ── AGGRESSIVE ANALYTICS TERMINAL PASS ──
   Many analytics elements use inline styles with borders/radius.
   These blanket overrides ensure terminal feel on ALL subtabs. */

/* Kill ALL card borders and radius inside analytics page-tab-content */
html[data-ui-mode="terminal"] .page-tab-content .card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Preserve chart container sizing — don't collapse card-body padding on chart cards */
html[data-ui-mode="terminal"] .page-tab-content .card-body [style*="height"],
html[data-ui-mode="terminal"] .page-tab-content .card-body [id*="Chart"],
html[data-ui-mode="terminal"] .page-tab-content .card-body [id*="chart"],
html[data-ui-mode="terminal"] .page-tab-content .card-body [id*="equity"],
html[data-ui-mode="terminal"] .page-tab-content .card-body [id*="Container"] {
  width: 100% !important;
  min-width: 0 !important;
}

html[data-ui-mode="terminal"] .page-tab-content .card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Kill any inline border-radius on divs inside analytics */
html[data-ui-mode="terminal"] .page-tab-content div[style*="border-radius"] {
  border-radius: 3px !important;
}

/* Kill colored gradient backgrounds on info banners */
html[data-ui-mode="terminal"] .page-tab-content div[style*="linear-gradient"] {
  background: var(--terminal-surface-panel, #12151d) !important;
}

/* Kill colored left-border alert/insight boxes */
html[data-ui-mode="terminal"] .page-tab-content div[style*="border-left: 3px"],
html[data-ui-mode="terminal"] .page-tab-content div[style*="border-left:3px"],
html[data-ui-mode="terminal"] .page-tab-content div[style*="border-left: 4px"],
html[data-ui-mode="terminal"] .page-tab-content div[style*="border-left:4px"] {
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* KPI metric boxes — flatten borders */
html[data-ui-mode="terminal"] .page-tab-content div[style*="border: 1px solid"] {
  border-radius: 3px !important;
}

/* All selects/inputs inside analytics — sharp */
html[data-ui-mode="terminal"] .page-tab-content select,
html[data-ui-mode="terminal"] .page-tab-content input,
html[data-ui-mode="terminal"] .page-tab-content .input {
  border-radius: 3px !important;
}

/* All buttons inside analytics — sharp */
html[data-ui-mode="terminal"] .page-tab-content .btn {
  border-radius: 3px !important;
}

/* Risk dashboard metric cards — flatten */
html[data-ui-mode="terminal"] .page-tab-content [class*="risk"] .card,
html[data-ui-mode="terminal"] .page-tab-content [class*="metric"] {
  border-radius: 3px !important;
}

/* Optimization/insight alert boxes */
html[data-ui-mode="terminal"] .page-tab-content [class*="alert"],
html[data-ui-mode="terminal"] .page-tab-content [class*="insight"],
html[data-ui-mode="terminal"] .page-tab-content [class*="recommendation"] {
  border-radius: 3px !important;
}

/* Analytics grid rows — tighter */
html[data-ui-mode="terminal"] .page-tab-content .analytics-grid {
  gap: 8px !important;
  border-radius: 0 !important;
}

/* Strategy metric pills */
html[data-ui-mode="terminal"] .strategy-metric-pills button,
html[data-ui-mode="terminal"] .context-pill {
  border-radius: 2px !important;
  font-size: 10px !important;
}

/* Heatmap activity section */
html[data-ui-mode="terminal"] .page-tab-content [class*="heatmap"] {
  border-radius: 0 !important;
}

/* Position sizer slider */
html[data-ui-mode="terminal"] .page-tab-content input[type="range"] {
  border-radius: 0 !important;
}

/* Calculate button — full width terminal style */
html[data-ui-mode="terminal"] .page-tab-content button[style*="width: 100%"] {
  border-radius: 3px !important;
}

/* Breakdown table — denser */
html[data-ui-mode="terminal"] .breakdown-table th {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
}

html[data-ui-mode="terminal"] .breakdown-table td {
  padding: 5px 10px;
  font-size: 12px;
}

html[data-ui-mode="terminal"] .breakdown-table tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* Breakdown bar charts — sharper */
html[data-ui-mode="terminal"] .breakdown-bar-track {
  border-radius: 2px;
}

html[data-ui-mode="terminal"] .breakdown-bar-fill {
  border-radius: 2px;
}

/* Performance summary grid — tighter */
html[data-ui-mode="terminal"] .performance-summary-grid {
  gap: 8px;
}

html[data-ui-mode="terminal"] .performance-summary-grid .card {
  padding: 12px;
}

/* KPI cards in analytics — tighter */
html[data-ui-mode="terminal"] .kpi-value {
  font-family: 'JetBrains Mono', var(--font-mono);
}

/* Strategy table / comparison — denser */
html[data-ui-mode="terminal"] .strategy-table th,
html[data-ui-mode="terminal"] .strategy-comparison-table th {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

html[data-ui-mode="terminal"] .strategy-table td,
html[data-ui-mode="terminal"] .strategy-comparison-table td {
  font-size: 12px;
  padding: 5px 10px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.3 — JOURNAL PAGE
   Terminal treatment for entry cards, filters, digest.
   CRITICAL: Do NOT affect user-authored rich text inside
   entries. Only target structural/chrome elements.
   ═════════════════════════════════════════════════════════ */

/* Entry cards — sharper, tighter */
html[data-ui-mode="terminal"] .journal-entry {
  border-radius: 3px;
  padding: 16px 20px;
}

/* Sentiment accent bar — thinner */
html[data-ui-mode="terminal"] .journal-entry::before {
  width: 2px;
  border-radius: 0;
  top: 8px;
  bottom: 8px;
}

/* Entry metadata row — denser */
html[data-ui-mode="terminal"] .entry-meta-row {
  font-size: 11px;
  gap: 8px;
}

/* Entry header / title — tighter */
html[data-ui-mode="terminal"] .entry-title {
  font-size: 14px;
}

/* Tags in entries */
html[data-ui-mode="terminal"] .entry-tags .tag,
html[data-ui-mode="terminal"] .journal-entry .tag {
  border-radius: 2px;
  font-size: 10px;
}

/* Filter chips — sharper */
html[data-ui-mode="terminal"] .journal-filters .filter-chip {
  border-radius: 3px;
  font-size: 11px;
  padding: 4px 10px;
}

/* Digest banner — flatter */
html[data-ui-mode="terminal"] .journal-digest-banner {
  border-radius: 3px;
}

/* Journal composer / editor — sharper frame, but do NOT change inner content */
html[data-ui-mode="terminal"] .journal-composer {
  border-radius: 3px;
}

html[data-ui-mode="terminal"] .journal-composer textarea {
  border-radius: 3px;
}

/* Timeline gap — slightly tighter */
html[data-ui-mode="terminal"] .journal-timeline {
  gap: 1px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.4 — SETTINGS PAGE
   Terminal treatment for settings cards, form groups.
   The .settings-page scoping means we need to match that
   specificity for Terminal overrides.
   ═════════════════════════════════════════════════════════ */

/* Settings cards — sharper */
html[data-ui-mode="terminal"] .settings-page .card {
  border-radius: 3px;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Settings card header — tighter */
html[data-ui-mode="terminal"] .settings-page .card-header,
html[data-ui-mode="terminal"] .settings-page .card > .hd {
  padding: 14px 20px 10px;
}

html[data-ui-mode="terminal"] .settings-page .card-title {
  font-size: 13px;
  font-weight: 600;
}

/* Settings card body — tighter */
html[data-ui-mode="terminal"] .settings-page .card-body,
html[data-ui-mode="terminal"] .settings-page .card > .bd {
  padding: 6px 20px 16px;
}

/* Setting group heading — terminal accent */
html[data-ui-mode="terminal"] .settings-page .setting-group__heading {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* Setting label — slightly denser */
html[data-ui-mode="terminal"] .settings-page .setting-label {
  font-size: 12px;
}

/* Setting hint */
html[data-ui-mode="terminal"] .settings-page .setting-hint {
  font-size: 10px;
}

/* Inputs — sharper */
html[data-ui-mode="terminal"] .settings-page .setting-input,
html[data-ui-mode="terminal"] .settings-page .form-input,
html[data-ui-mode="terminal"] .settings-page .form-select,
html[data-ui-mode="terminal"] .settings-page select,
html[data-ui-mode="terminal"] .settings-page textarea,
html[data-ui-mode="terminal"] .settings-page input[type="text"],
html[data-ui-mode="terminal"] .settings-page input[type="email"] {
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 12px;
}

/* Switch slider — sharper */
html[data-ui-mode="terminal"] .settings-page .switch-slider {
  border-radius: 12px;
}

/* Theme picker swatches — sharper */
html[data-ui-mode="terminal"] .theme-swatch {
  border-radius: 3px;
}

/* BG theme picker swatches */
html[data-ui-mode="terminal"] .bg-theme-swatch {
  border-radius: 3px;
}

/* UI mode picker buttons — already sharp via inline styles, but ensure consistency */
html[data-ui-mode="terminal"] .ui-mode-btn {
  border-radius: 3px;
}

/* Page tabs in settings */
html[data-ui-mode="terminal"] .settings-page .page-tab {
  font-size: 12px;
  padding: 9px 16px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.5 — MARKET INTEL PAGE
   Terminal treatment for intel cards, data panels, status
   indicators. Heavy use of CSS variables means Phase 4
   global card overrides already cover most surfaces.
   ═════════════════════════════════════════════════════════ */

/* Intel cards — sharper, flatter */
html[data-ui-mode="terminal"] .intel-card {
  border-radius: 3px;
  box-shadow: none;
}

html[data-ui-mode="terminal"] .intel-card:hover {
  box-shadow: none;
  transform: none;
}

html[data-ui-mode="terminal"] .core-market-section .intel-card {
  border-radius: 3px;
  box-shadow: none;
}

html[data-ui-mode="terminal"] .core-market-section .intel-card:hover {
  box-shadow: none;
  transform: none;
}

/* Intel card headers — denser */
html[data-ui-mode="terminal"] .intel-card .card-header,
html[data-ui-mode="terminal"] .core-market-section .intel-card .card-header {
  padding: 10px 16px;
}

html[data-ui-mode="terminal"] .core-market-section .intel-card .card-header h4 {
  font-size: 13px !important;
  text-shadow: none;
  letter-spacing: 0;
}

/* Intel card bodies — tighter */
html[data-ui-mode="terminal"] .intel-card .card-body,
html[data-ui-mode="terminal"] .intel-card .card-content,
html[data-ui-mode="terminal"] .core-market-section .intel-card .card-body {
  padding: 14px 16px;
}

/* Feature status badges — sharper */
html[data-ui-mode="terminal"] .feature-status {
  border-radius: 2px !important;
  font-size: 9px !important;
  font-family: 'JetBrains Mono', var(--font-mono);
  letter-spacing: 0.03em;
}

/* Core market grid — tighter gaps */
html[data-ui-mode="terminal"] .core-market-section {
  gap: 12px;
}

/* Dynamics grid and metric items */
html[data-ui-mode="terminal"] .dynamics-grid {
  gap: 8px;
}

html[data-ui-mode="terminal"] .dynamics-item {
  border-radius: 3px;
}

/* Market intel sparklines / chart containers */
html[data-ui-mode="terminal"] .sparkline-container {
  border-radius: 2px;
}

/* Asset selector / options list */
html[data-ui-mode="terminal"] .asset-options-list {
  border-radius: 3px;
}

/* Full-width intel cards */
html[data-ui-mode="terminal"] .intel-card.full-width {
  border-radius: 3px;
}


/* ═════════════════════════════════════════════════════════
   PHASE 5.6 — DEX ALPHA PAGE
   Terminal treatment for watchlist cards, token rows,
   profile drawer, page-level overrides.
   ═════════════════════════════════════════════════════════ */

/* Dex Alpha page tabs — override the custom rounded style */
html[data-ui-mode="terminal"] .dex-alpha-page .page-tabs {
  border-radius: 3px;
  border-color: rgba(255, 255, 255, 0.05);
}

html[data-ui-mode="terminal"] .dex-alpha-page .page-tab {
  border-radius: 2px;
  font-size: 12px;
  padding: 8px 14px;
}

/* Page badge — sharper */
html[data-ui-mode="terminal"] .page-badge {
  border-radius: 2px;
  font-size: 10px;
}

/* Watchlist cards — sharper */
html[data-ui-mode="terminal"] .watchlist-card {
  border-radius: 3px;
  padding: 12px 16px;
}

html[data-ui-mode="terminal"] .watchlist-card-positions {
  margin-top: 12px;
  padding-top: 12px;
}

/* Mover cards — sharper, tighter */
html[data-ui-mode="terminal"] .mover-card {
  border-radius: 3px;
  padding: 10px 12px;
}

html[data-ui-mode="terminal"] .mover-card:hover {
  transform: none;
}

/* Profile drawer panel */
html[data-ui-mode="terminal"] .profile-drawer-panel {
  border-radius: 0;
}

/* Token list / grid items */
html[data-ui-mode="terminal"] .token-item {
  border-radius: 3px;
}

/* Alert rule cards */
html[data-ui-mode="terminal"] .alert-rule-card {
  border-radius: 3px;
}

/* Dex Alpha cards that use generic .card — already handled by Phase 4 */