/* ═══════════════════════════════════════════════════
   QuantSentinel — Institutional-Grade Trading UI
   Premium dark theme · Glassmorphism · Decision-optimized
   v2.0 — 2026 Redesign
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Semantic signal colors — high-contrast for split-second decisions ── */
  --color-profit:       #00D26A;
  --color-loss:         #FF4757;
  --color-warning:      #FFAA2C;
  --color-neutral:      #8E8E93;
  --color-regime-crash: #FF3B3B;

  /* ── Signal glow system — for emphasis under trading pressure ── */
  --glow-profit:        0 0 20px rgba(0,210,106,0.25);
  --glow-loss:          0 0 20px rgba(255,71,87,0.25);
  --glow-warning:       0 0 20px rgba(255,170,44,0.20);
  --glow-accent:        0 0 20px rgba(245,158,11,0.20);

  /* ── Layered surface system — 5-tier depth hierarchy ── */
  --surface-primary:    #060508;
  --surface-secondary:  #0E0C10;
  --surface-tertiary:   #161318;
  --surface-hover:      #1D1A20;
  --surface-border:     #252228;
  --surface-glass:      rgba(255,255,255,0.035);
  --surface-glass-hover: rgba(255,255,255,0.07);

  /* ── Text tokens — WCAG AA compliant on dark surfaces ── */
  --text-primary:       #FAFAFA;
  --text-secondary:     #A1A1AA;
  --text-tertiary:      #52525B;
  --text-disabled:      #3F3F46;

  /* ── Mode indicator tokens ── */
  --mode-paper-bg:      #27272A;
  --mode-paper-text:    #A1A1AA;
  --mode-paper-dot:     #A1A1AA;
  --mode-live-bg:       #111113;
  --mode-live-text:     #FAFAFA;
  --mode-live-dot:      #00D26A;

  /* ── Interactive tokens ── */
  --interactive-default:  #FAFAFA;
  --interactive-hover:    #E4E4E7;
  --interactive-active:   #D4D4D8;
  --interactive-disabled: #3F3F46;

  /* ── Legacy aliases (backward compatibility) ── */
  --bg: var(--surface-primary);
  --bg-card: var(--surface-secondary);
  --bg-input: var(--surface-tertiary);
  --border: var(--surface-border);
  --border-light: #3F3F46;
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --accent: #F59E0B;
  --accent-dim: rgba(245,158,11,0.10);
  --accent-glow: rgba(245,158,11,0.08);
  --accent-vivid: #FCD34D;
  --accent-deep: #D97706;
  --green: var(--color-profit);
  --green-dim: rgba(0,210,106,0.10);
  --red: var(--color-loss);
  --red-dim: rgba(255,71,87,0.10);
  --yellow: var(--color-warning);
  --yellow-dim: rgba(255,170,44,0.10);
  --purple: #A78BFA;
  --purple-dim: rgba(167,139,250,0.12);

  /* ── Border radius tokens — tighter, more premium ── */
  --radius: 10px;
  --radius-card: 12px;
  --radius-badge: 6px;
  --radius-btn: 8px;
  --radius-modal: 16px;
  --radius-pill: 999px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ── Elevation system — multi-layer depth ── */
  --shadow-level0: none;
  --shadow-level1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-level2: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-level3: 0 4px 12px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.35);
  --shadow: var(--shadow-level1);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── Type scale ── */
  --text-hero:    64px;
  --text-title:   32px;
  --text-heading: 24px;
  --text-large:   20px;
  --text-body:    16px;
  --text-label:   13px;
  --text-caption: 12px;
  --text-micro:   11px;

  /* ── Layout ── */
  --sidebar-width: 64px;
  --sidebar-expanded: 220px;
  --topbar-height: 52px;
  --tab-height: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --transition: 160ms ease-out;
  --transition-smooth: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(245,158,11,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0,210,106,0.06) 0%, transparent 50%);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'tnum' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* ═══════════ APP LAYOUT ═════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100vh;
}
@supports (min-height: 100dvh) {
  .app-layout { min-height: 100dvh; }
}

/* ═══════════ SIDEBAR — 64px slim, expand on hover ═══ */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: rgba(7,7,9,0.97);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  z-index: 150;
  transition: width var(--transition-smooth);
  overflow: hidden;
}
.sidebar:hover { width: var(--sidebar-expanded); }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 53px;
}
.sidebar-brand .brand-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.sidebar-brand .brand-name {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-smooth);
  background: linear-gradient(135deg, #FAFAFA 40%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar:hover .sidebar-brand .brand-name { opacity: 1; }
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  overflow-y: auto;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  white-space: nowrap;
}
.sidebar-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sidebar-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.15), 0 0 10px rgba(245,158,11,0.12);
}
.sidebar-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}
.sidebar:hover .sidebar-label { opacity: 1; }
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.sidebar:hover .sidebar-footer { align-items: flex-start; padding: 16px; }
.sidebar-footer .market-badge span:not(.market-dot) {
  display: none;
}
.sidebar:hover .sidebar-footer .market-badge span:not(.market-dot) {
  display: inline;
}
.sidebar-clock {
  font-size: 0.75em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  display: none;
}
.sidebar:hover .sidebar-clock { display: block; }

/* ═══════════ MAIN CONTENT ═══════════════════════════ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

/* ═══════════ GLOBAL API DISCONNECTED BANNER ═════════ */
.api-disconnected-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,193,7,0.15);
  border-bottom: 1px solid rgba(255,193,7,0.3);
  color: var(--yellow);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 99;
}

/* V10 FIX: Kill Switch Banner — prominent red full-width warning */
.kill-switch-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,80,0,0.2);
  border-bottom: 2px solid var(--red);
  color: var(--red);
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 100;
  animation: killSwitchPulse 2s infinite;
}
@keyframes killSwitchPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ═══════════ GLOBAL MODE BADGE — calm, always visible, never alarming ══════════════════════ */
.global-mode-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: opacity 0.2s;
  user-select: none;
}
.global-mode-badge:hover { opacity: 0.85; }
.global-mode-badge.paper {
  background: rgba(136, 135, 128, 0.15);
  color: #888780;
  border: 1px solid rgba(136, 135, 128, 0.3);
}
.global-mode-badge.live {
  background: rgba(0, 200, 5, 0.1);
  color: #00C805;
  font-weight: 600;
  border: 1px solid rgba(0, 200, 5, 0.25);
}
.global-mode-badge.switching {
  background: #2A2A2A;
  color: #888780;
  border: 1px solid #3A3A3A;
}
.global-mode-badge.switch-error {
  background: #2A2A2A;
  color: #FF5000;
  border: 1px solid #3A3A3A;
}
.global-mode-badge .mode-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.global-mode-badge.paper .mode-dot { background: #888780; }
.global-mode-badge.live .mode-dot { background: #00C805; }
.global-mode-badge.switching .mode-dot {
  background: transparent;
  border: 1.5px solid #888780;
  border-top-color: transparent;
  animation: spin-mode-dot 1s linear infinite;
}
.global-mode-badge.switch-error .mode-dot { background: #FF5000; }
@keyframes spin-mode-dot { to { transform: rotate(360deg); } }

/* ═══════════ TOP BAR ════════════════════════════════ */
/* ── Market Indices Ticker Strip ── */
.indices-strip {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 10px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.index-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px;
  min-width: 78px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,0.025);
  transition: background 0.18s, border-left-color 0.3s;
  gap: 1px;
}
.index-item:hover { background: rgba(255,255,255,0.055); }
.index-item:has(.index-change.up)   { border-left-color: var(--green); }
.index-item:has(.index-change.down) { border-left-color: var(--red); }
.index-label {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1;
}
.index-price {
  font-size: 0.83em;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.index-change {
  font-size: 0.65em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.index-change.up   { color: var(--green); background: rgba(0,210,106,0.10); }
.index-change.down { color: var(--red);   background: rgba(255,71,87,0.10); }
.index-change.flat { color: var(--text-muted); background: rgba(255,255,255,0.04); }

.top-bar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 0 24px;
  background: rgba(9,9,11,0.94);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(245,158,11,0.1), 0 4px 24px rgba(0,0,0,0.35);
  z-index: 100;
}
.top-bar-left { display: flex; align-items: center; gap: 10px; }
.top-bar-right { display: flex; align-items: center; gap: 10px; }
.mobile-menu-btn {
  display: none;
  background: none; border: none; color: var(--text);
  cursor: pointer; padding: 4px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-brand { display: none; }
/* P2-2: Top bar breadcrumb */
.top-bar-breadcrumb {
  display: none;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.1px;
}
@media (min-width: 1024px) {
  .top-bar-breadcrumb { display: block; }
}
.top-clock {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.04);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ═══════════ GLOBAL PORTFOLIO STRIP ════════════════ */
.global-portfolio-strip {
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--surface-border);
  padding: 6px 24px;
}
.global-portfolio-inner {
  text-align: center;
}
.global-portfolio-source {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.global-portfolio-value {
  font-size: var(--text-large);
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.global-portfolio-change {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Market Badge */
.market-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 7px;
  font-size: 0.7em; font-weight: 700; letter-spacing: 0.3px;
  transition: all var(--transition-smooth);
  border: 1px solid transparent;
}
.market-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
  transition: all var(--transition-smooth);
  flex-shrink: 0;
}
.market-badge.open { background: rgba(0,210,106,0.12); color: var(--green); border: 1px solid rgba(0,210,106,0.2); }
.market-badge.open .market-dot { background: var(--green); animation: pulse-dot 2s infinite; box-shadow: 0 0 6px rgba(0,210,106,0.5); }
.market-badge.pre { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(255,170,44,0.2); }
.market-badge.pre .market-dot { background: var(--yellow); animation: pulse-dot 2s infinite; box-shadow: 0 0 6px rgba(255,170,44,0.4); }
.market-badge.post { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(167,139,250,0.2); }
.market-badge.post .market-dot { background: var(--purple); animation: pulse-dot 2s infinite; box-shadow: 0 0 6px rgba(167,139,250,0.4); }
.market-badge.closed { background: rgba(82,82,91,0.12); color: var(--text-muted); border: 1px solid rgba(82,82,91,0.15); }
.market-badge.closed .market-dot { background: var(--text-tertiary); }

/* ═══════════ BOTTOM TAB BAR (mobile only) ═══════════ */
.tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tab-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  align-items: stretch;
  background: rgba(9,9,11,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 100;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 0.7em;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-smooth);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tab:active { transform: scale(0.92); }
.tab.active { color: var(--accent); }
.tab.active::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 8px rgba(245,158,11,0.3);
}
.tab-icon {
  width: 22px; height: 22px;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab-label { letter-spacing: 0.2px; }

/* ═══════════ SCREENS ════════════════════════════════ */
.screens-container {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.screen {
  display: none;
  padding: 28px 36px 36px;
  animation: fadeIn 0.25s ease-out;
}
.screen.active { display: block; }
.screen-content { animation: fadeIn 0.3s ease-out; }

/* Ensure scroll-into-view stops below sticky top bar + banners */
#homeSignalsSection {
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}
.screen-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.screen-header-row .screen-title { margin-bottom: 0; }
.screen-subtitle {
  font-size: 0.88em;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Focus-visible ring for keyboard nav (WCAG 2.4.7) ── */
.sidebar-item:focus-visible,
.tab:focus-visible,
.filter-chip:focus-visible,
.audit-filter-chip:focus-visible,
.tf-btn:focus-visible,
.btn-scan-markets:focus-visible,
.logs-filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════ SKELETON LOADERS ═══════════════════════ */
.skeleton-group { padding: 32px 40px; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--surface-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-value { height: 42px; width: 65%; margin-bottom: 10px; }
.skeleton-sub { height: 18px; width: 40%; margin-bottom: 24px; }
.skeleton-strip { height: 56px; width: 100%; margin-bottom: 16px; border-radius: var(--radius); }
.skeleton-chart { height: 200px; width: 100%; margin-bottom: 20px; }
.skeleton-badge-row { display: flex; gap: 10px; margin-bottom: 20px; }
.skeleton-badge { height: 32px; width: 120px; border-radius: 20px; }
.skeleton-cards-row { display: flex; gap: 12px; margin-bottom: 20px; overflow: hidden; }
.skeleton-card-sm { height: 80px; min-width: 140px; flex-shrink: 0; border-radius: var(--radius-sm); }
.skeleton-card { height: 88px; width: 100%; margin-bottom: 12px; }
.skeleton-toggle-row { height: 36px; width: 50%; margin-bottom: 16px; }
.signals-grid-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

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

/* ═══════════ PORTFOLIO HEADER ═══════════════════════ */
.portfolio-header { margin-bottom: 4px; padding: 28px 0 20px; }
.portfolio-label {
  font-size: 0.72em;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.portfolio-value {
  color: var(--text-primary); /* fallback if background-clip:text unsupported */
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  transition: text-shadow var(--transition-smooth);
  background: linear-gradient(135deg, #FAFAFA 50%, #C4C4CC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.portfolio-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.portfolio-change.up { color: var(--green); }
.portfolio-change.up .change-dollar::before { content: "▲ "; font-size: 0.7em; }
.portfolio-change.down { color: var(--red); }
.portfolio-change.down .change-dollar::before { content: "▼ "; font-size: 0.7em; }
.portfolio-change.flat { color: var(--text-secondary); }
.change-dollar, .change-pct {
  display: inline;
  font-size: 1rem;
  font-weight: 600;
}
.change-period {
  color: var(--text-tertiary) !important;
  font-weight: 400;
  font-size: 0.85em;
}

/* ═══════════ STATUS STRIP ═══════════════════════════ */
.status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  margin: 16px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: var(--shadow-card);
}
.status-strip::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .status-strip { flex-wrap: nowrap; gap: 8px; }
  .strip-item { flex-shrink: 0; }
}
.strip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.strip-risk {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.strip-risk-row {
  display: flex;
  gap: 12px;
  flex: 1;
}
.risk-pill-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.risk-pill-label {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.risk-pill-track {
  height: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.03);
}
.risk-pill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), rgba(0,210,106,0.8));
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.risk-pill-fill.warn { background: linear-gradient(90deg, var(--yellow), rgba(255,170,44,0.8)); }
.risk-pill-fill.danger { background: linear-gradient(90deg, var(--red), rgba(255,71,87,0.8)); box-shadow: 0 0 8px rgba(255,71,87,0.3); }
.strip-risk-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 700;
  background: var(--green-dim);
  color: var(--green);
  white-space: nowrap;
  border: 1px solid rgba(0,210,106,0.15);
}
.strip-risk-badge.warn { background: var(--yellow-dim); color: var(--yellow); border-color: rgba(255,170,44,0.15); }
.strip-risk-badge.danger { background: var(--red-dim); color: var(--red); border-color: rgba(255,71,87,0.15); animation: pulse-glow-red 2s ease-in-out infinite; }
@keyframes pulse-glow-red {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(255,71,87,0.25); }
}
.strip-cash, .strip-pdt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 12px;
  border-left: 1px solid var(--border);
}
.strip-cash-label, .strip-pdt-label {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.strip-cash-value, .strip-pdt-value {
  font-size: 0.88em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}
.strip-pdt-value.warning { color: var(--yellow); }
.strip-pdt-value.danger { color: var(--red); }

/* ═══════════ VIX STRIP INDICATOR ═══════════════════ */
.strip-vix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 12px;
  border-left: 1px solid var(--border);
  cursor: help;
}
.strip-vix-label {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.strip-vix-value {
  font-size: 0.88em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}
.strip-vix-status {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 3px;
}
.strip-vix.vix-low .strip-vix-value { color: var(--green); }
.strip-vix.vix-low .strip-vix-status { background: var(--green-dim, rgba(0,200,5,0.12)); color: var(--green); }
.strip-vix.vix-normal .strip-vix-value { color: var(--text-secondary); }
.strip-vix.vix-normal .strip-vix-status { background: var(--surface-tertiary); color: var(--text-muted); }
.strip-vix.vix-elevated .strip-vix-value { color: var(--yellow); }
.strip-vix.vix-elevated .strip-vix-status { background: var(--yellow-dim); color: var(--yellow); }
.strip-vix.vix-high .strip-vix-value { color: var(--red); }
.strip-vix.vix-high .strip-vix-status { background: var(--red-dim); color: var(--red); }
.strip-vix.vix-extreme .strip-vix-value { color: #ff2020; }
.strip-vix.vix-extreme .strip-vix-status { background: rgba(255,32,32,0.18); color: #ff2020; }

/* ═══════════ REGIME BADGE (large) ═══════════════════ */
.regime-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.regime-badge-lg.bull { background: rgba(0,200,5,0.15); color: var(--color-profit); border: 1px solid rgba(0,200,5,0.3); }
.regime-badge-lg.bear { background: rgba(255,159,10,0.15); color: var(--color-warning); border: 1px solid rgba(255,159,10,0.3); }
.regime-badge-lg.neutral { background: rgba(90,100,128,0.1); color: var(--text-secondary); border: 1px solid var(--border); }
.regime-badge-lg.crash { background: rgba(255,69,58,0.15); color: var(--color-regime-crash); border: 2px solid var(--color-regime-crash); animation: pulse-crash 2s infinite; }
.regime-icon { font-size: 1.2em; }
@keyframes pulse-crash {
  0%, 100% { box-shadow: none; border-color: #FF0000; }
  50% { box-shadow: 0 0 20px rgba(255,0,0,0.4); border-color: #ff4444; }
}

/* ═══════════ CRYPTO REGIME BADGE (BTC) ═════════════ */
.crypto-regime { font-size: 13px; padding: 6px 14px; }
.crypto-regime .regime-icon { font-family: system-ui, sans-serif; }

/* Crypto asset class pill badge */
.asset-class-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.asset-class-pill.equity { background: rgba(0,122,255,0.12); color: #007AFF; }
.asset-class-pill.crypto { background: rgba(255,159,10,0.15); color: #FF9F0A; }

/* Crypto market status indicator */
.crypto-market-status {
  color: var(--color-profit);
  font-size: 11px;
  font-weight: 600;
}

/* ═══════════ READINESS BANNER (P1-1) ════════════════ */
.readiness-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin: 8px 0 12px;
  background: linear-gradient(135deg, rgba(255,170,44,0.07) 0%, rgba(255,170,44,0.04) 100%);
  border: 1px solid rgba(255,170,44,0.18);
  border-radius: var(--radius-card);
  flex-wrap: wrap;
}
.rb-progress-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}
.rb-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.rb-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.rb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--accent));
  border-radius: 3px;
  transition: width 0.6s ease;
}
.rb-count {
  font-size: var(--text-label);
  color: var(--yellow);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.rb-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.rb-strategies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.rb-strategy-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: default;
}
.rb-strategy-pill.calibrated {
  background: rgba(0,210,106,0.1);
  color: var(--color-profit);
  border-color: rgba(0,210,106,0.2);
}
.rb-strategy-pill.in-progress {
  background: rgba(255,170,44,0.1);
  color: var(--yellow);
  border-color: rgba(255,170,44,0.2);
}
.rb-strategy-pill.uncalibrated {
  background: rgba(255,71,87,0.1);
  color: var(--color-loss);
  border-color: rgba(255,71,87,0.2);
}
.rb-gates-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  color: var(--text-primary);
  font-family: inherit;
}
.rb-gates-badge:hover { background: rgba(255,255,255,0.08); }
#rbGatesCount {
  font-size: var(--text-body);
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}
.rb-gates-label {
  font-size: var(--text-micro);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Sparkline Chart */
.sparkline-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  margin: 8px 0 0;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.sparkline-wrap canvas { width: 100%; height: 100%; display: block; }
.spark-crosshair {
  display: none;
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}
.spark-tooltip {
  display: none;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  font-size: 0.7em;
  color: var(--text-secondary);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}

/* Timeframe Bar */
.timeframe-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
}
.tf-btn {
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.78em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}
.tf-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.tf-btn.active { color: var(--green); background: var(--green-dim); border: 1px solid rgba(0,210,106,0.15); }
.tf-btn.active.down-period { color: var(--red); background: var(--red-dim); border-color: rgba(255,71,87,0.15); }

/* ═══════════ SCAN MARKETS BUTTON ════════════════════ */
.btn-scan-markets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-card);
  color: #0C0B09;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition-smooth);
  margin: 8px 0 0;
  box-shadow: 0 2px 12px rgba(245,158,11,0.2), var(--shadow-card);
  letter-spacing: 0.01em;
}
.btn-scan-markets:hover { opacity: 0.92; box-shadow: 0 6px 20px rgba(245,158,11,0.3), var(--shadow-card-hover); transform: translateY(-2px); }
.btn-scan-markets:active { transform: scale(0.98) translateY(0); box-shadow: 0 1px 4px rgba(245,158,11,0.15); }
.btn-scan-markets:disabled { background: var(--surface-secondary); color: var(--text-tertiary); border-color: var(--border); box-shadow: none; cursor: not-allowed; transform: none; opacity: 1; }

/* Home Section Header */
.home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 14px;
}
.home-section-header h2 { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.link-btn {
  background: none; border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════ POSITIONS VERTICAL LIST ════════════════ */
.positions-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pos-mini-card-v {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-card);
}
.pos-mini-card-v:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.pos-mini-card-v:active { transform: scale(0.99) translateY(0); }
.pos-mini-left { display: flex; align-items: center; gap: 12px; }
.pos-mini-ticker { font-weight: 700; font-size: 0.95em; }
.pos-mini-shares { font-size: 0.75em; color: var(--text-muted); }
.pos-mini-right { text-align: right; }
.pos-mini-pnl { font-weight: 600; font-size: 0.88em; font-variant-numeric: tabular-nums; }
.pos-mini-pnl.up { color: var(--green); }
.pos-mini-pnl.down { color: var(--red); }
.pos-mini-pnl.up::before { content: "▲ "; font-size: 0.75em; }
.pos-mini-pnl.down::before { content: "▼ "; font-size: 0.75em; }

/* ═══════════ SIGNAL FEED ════════════════════════════ */
.signal-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.signal-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: all var(--transition-smooth);
}
.filter-chip:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.filter-chip.active { background: var(--accent-dim); border-color: rgba(245,158,11,0.3); color: var(--accent); box-shadow: 0 0 0 1px rgba(245,158,11,0.1); }
/* P1-5: Signal sort bar */
.signal-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.signal-sort-label {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sort-chip {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-border);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.sort-chip:hover { background: var(--surface-hover); color: var(--text-primary); }
.sort-chip.active { background: var(--accent-dim); color: var(--accent); border-color: rgba(245,158,11,0.3); }
.last-scan-time {
  font-size: 0.75em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.next-scan-countdown {
  font-size: 0.75em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.next-scan-countdown::before {
  content: '·';
  margin-right: 4px;
}
.btn-scan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.88em;
}

/* Signal Feed Grid */
.signal-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Signal Cards (used in both feed and home) */
.signals-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.signal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.signal-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
}
.signal-card:hover { border-color: rgba(255,255,255,0.13); transform: translateY(-2px); box-shadow: var(--shadow-card-hover), 0 8px 24px rgba(0,0,0,0.2); }
.signal-card:active { background: rgba(255,255,255,0.04); transform: translateY(0); }
/* Bloomberg-style directional coding — left border encodes trade direction */
.signal-card.buy-card {
  border-left: 3px solid var(--color-profit);
  padding-left: calc(16px - 2px);
}
.signal-card.buy-card:hover { border-left-color: var(--color-profit); box-shadow: var(--shadow-card-hover), -2px 0 12px rgba(0,210,106,0.12), 0 8px 24px rgba(0,0,0,0.2); }
.signal-card.sell-card {
  border-left: 3px solid var(--color-loss);
  padding-left: calc(16px - 2px);
}
.signal-card.sell-card:hover { border-left-color: var(--color-loss); box-shadow: var(--shadow-card-hover), -2px 0 12px rgba(255,71,87,0.12), 0 8px 24px rgba(0,0,0,0.2); }
.signal-card-left { display: flex; flex-direction: column; gap: 2px; }
.signal-card-ticker { font-weight: 700; font-size: 1em; display: block; }
.signal-card-strategy { font-size: 0.75em; color: var(--text-tertiary); display: block; margin-top: 2px; }
.signal-card-right { display: flex; align-items: center; gap: 10px; }
.signal-card-price { font-variant-numeric: tabular-nums; font-size: 0.9em; color: var(--text-secondary); }
.signal-pill {
  padding: 5px 14px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: all var(--transition-smooth);
}
.signal-pill.buy {
  background: linear-gradient(135deg, rgba(0,210,106,0.18) 0%, rgba(0,210,106,0.08) 100%);
  color: var(--color-profit);
  border: 1px solid rgba(0,210,106,0.35);
  text-shadow: 0 0 12px rgba(0,210,106,0.3);
}
.signal-pill.buy:hover { box-shadow: var(--glow-profit); }
.signal-pill.sell {
  background: linear-gradient(135deg, rgba(255,71,87,0.18) 0%, rgba(255,71,87,0.08) 100%);
  color: var(--color-loss);
  border: 1px solid rgba(255,71,87,0.35);
  text-shadow: 0 0 12px rgba(255,71,87,0.3);
}
.signal-pill.sell:hover { box-shadow: var(--glow-loss); }

/* ── Signal Card Enhancements ── */
.signal-card { position: relative; border-left: 3px solid transparent; }
.signal-card[data-signal="BUY"] { border-left-color: var(--green); }
.signal-card[data-signal="PUT"] { border-left-color: var(--red); }
.signal-ticker { font-size: 1.3em; font-weight: 800; letter-spacing: -0.3px; }
/* Company name shown below ticker symbol — clean Robinhood-style */
.signal-card-company, .signal-detail-company, .pos-card-company, .pos-mini-company {
  display: block;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 1px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.signal-detail-company {
  font-size: 0.8em;
  max-width: 280px;
  color: var(--text-muted);
}
.pos-mini-company {
  font-size: 0.7em;
  max-width: 140px;
  color: var(--text-muted);
  margin-top: 0;
}
.signal-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-border); }
.signal-metric-item { display: flex; flex-direction: column; gap: 2px; }
.signal-metric-label { font-size: 0.62em; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; }
.signal-metric-value { font-size: 0.85em; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.conf-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 0.78em; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-left: 6px; }
.conf-badge.conf-high { background: rgba(0,210,106,0.15); color: var(--green); border: 1px solid rgba(0,210,106,0.25); }
.conf-badge.conf-medium { background: rgba(255,170,44,0.15); color: var(--yellow); border: 1px solid rgba(255,170,44,0.25); }
.conf-badge.conf-low { background: rgba(255,71,87,0.15); color: var(--red); border: 1px solid rgba(255,71,87,0.2); }

/* Signal Detail Card */
.signal-detail-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-card);
}
.signal-detail-card:hover { border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-card-hover); }
/* Bloomberg-style directional border on expanded signal cards */
.signal-detail-card.buy-card { border-left: 3px solid var(--color-profit); padding-left: 17px; }
.signal-detail-card.buy-card:hover { box-shadow: var(--shadow-card-hover), -2px 0 12px rgba(0,210,106,0.12); }
.signal-detail-card.sell-card { border-left: 3px solid var(--color-loss); padding-left: 17px; }
.signal-detail-card.sell-card:hover { box-shadow: var(--shadow-card-hover), -2px 0 12px rgba(255,71,87,0.12); }
.signal-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.signal-detail-ticker { font-weight: 700; font-size: 1.15em; display: block; letter-spacing: -0.02em; }
.signal-detail-price {
  font-size: 0.9em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.signal-detail-strategy {
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 2px;
}
.sentiment-badge {
  font-size: 0.7em;
  font-weight: 600;
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.1);
  letter-spacing: 0.3px;
}
.signal-confidence-bar {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.03);
}
.signal-confidence-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.signal-confidence-fill.high { background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-vivid)); box-shadow: 0 0 10px rgba(245,158,11,0.3); }
.signal-confidence-fill.medium { background: linear-gradient(90deg, rgba(0,210,106,0.6), var(--green)); box-shadow: 0 0 8px rgba(0,210,106,0.15); }
.signal-confidence-fill.low { background: linear-gradient(90deg, rgba(255,71,87,0.7), var(--red)); }
.signal-detail-reasons {
  font-size: 0.82em;
  color: var(--text-secondary);
  line-height: 1.6;
}
.signal-detail-reasons ul { list-style: none; padding: 0; }
.signal-detail-reasons li::before { content: "→ "; color: var(--accent); }
.signal-detail-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.signal-level {
  text-align: center;
  padding: 10px 8px;
  background: var(--bg);
  border-radius: var(--radius-xs);
}
.signal-level small {
  display: block;
  font-size: 0.68em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.signal-level strong {
  font-size: 0.95em;
  font-family: 'JetBrains Mono', monospace;
}
.signal-detail-action { display: flex; gap: 10px; margin-top: auto; }
.signal-detail-action .btn { flex: 1; text-align: center; }
/* P1-3: EV row on signal cards */
.signal-ev-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-xs);
  padding: 4px 0;
  margin-top: 4px;
}

/* Trade Guidance Card */
.trade-guidance-card {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.trade-guidance-header {
  font-size: 0.88em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trade-guidance-desc {
  font-size: 0.78em;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--accent);
}
.trade-guidance-timeline {
  font-size: 0.74em;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.1);
  border-radius: var(--radius-xs);
}

.section-meta { font-size: 0.75em; color: var(--text-muted); }

/* ═══════════ SIGNAL FEED SEARCH BAR ════════════════ */
.signal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.signal-search-wrap {
  width: 240px;
  margin-bottom: 0 !important;
}
.signal-search-wrap .trade-search {
  padding: 10px 12px 10px 36px;
  font-size: 0.9em;
}
@media (max-width: 600px) {
  .signal-header-actions { flex-wrap: wrap; }
  .signal-search-wrap { width: 100%; order: 2; }
}

/* ═══════════ STOCK DETAIL SCREEN (Robinhood-style) ═ */
.stock-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.stock-top-ticker {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-secondary);
}
.stock-top-name {
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
.btn-back {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
}
.btn-back:hover { background: var(--bg-input); }

.stock-rh-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .stock-rh-layout {
    grid-template-columns: 1fr;
  }
}

.stock-rh-left { min-width: 0; }

/* ── Price block (Robinhood-style stacked) ── */
.stock-price-block { margin-bottom: 8px; }
.stock-price-big {
  font-size: 2.2em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stock-price-change {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.95em;
  font-family: 'JetBrains Mono', monospace;
}
.stock-price-change.up { color: var(--green); }
.stock-price-change.down { color: var(--red); }
.stock-change-period {
  color: var(--text-muted);
  font-size: 0.85em;
  font-family: 'Inter', sans-serif;
}

/* ── Extended Hours (After Hours / Pre-Market) price display ── */
.stock-extended-hours {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.82em;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.extended-hours-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 400;
}
.extended-hours-price {
  font-weight: 600;
  color: var(--text-secondary);
}
.extended-hours-change {
  font-size: 0.95em;
}
.extended-hours-change.up { color: var(--green); }
.extended-hours-change.down { color: var(--red); }

.stock-header-signal { display: flex; align-items: center; margin-left: auto; }

/* ── Chart ── */
.stock-chart-container {
  position: relative;
  margin: 12px 0 0;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
}
.stock-chart-plotly {
  width: 100%;
  min-height: 340px;
}
.stock-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9em;
  background: transparent;
}

#screen-stock #tradeAnalysisPanel {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Right panel: Robinhood-style order card ── */
.stock-rh-right {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
}
.rh-order-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.rh-order-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.rh-tab {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  font-size: 0.95em;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.rh-tab.active {
  color: var(--green);
}
.rh-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--green);
  border-radius: 3px 3px 0 0;
}
.rh-tab.sell-active {
  color: var(--red);
}
.rh-tab.sell-active::after {
  background: var(--red);
}
.rh-order-body {
  padding: 20px;
}
.rh-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.rh-order-label {
  font-size: 0.9em;
  color: var(--text-secondary);
}
.rh-order-value {
  font-size: 0.9em;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
.rh-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rh-qty-input {
  width: 52px;
  text-align: center;
  padding: 6px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  outline: none;
}
.rh-qty-input:focus { border-color: var(--accent); }
.rh-order-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.rh-order-total .rh-order-label { font-weight: 600; color: var(--text); }
.rh-order-total .rh-order-value { font-weight: 700; font-size: 1em; }
.rh-order-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.rh-buy-btn {
  background: var(--green);
  color: #000;
}
.rh-buy-btn:hover:not(:disabled) { background: #00e006; }
.rh-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rh-buy-btn.sell-mode {
  background: var(--red);
  color: #fff;
}
.rh-buy-btn.sell-mode:hover:not(:disabled) { background: #ff6a20; }

/* ═══════════ TRADE SCREEN (legacy styles) ══════════ */
.trade-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.trade-main { min-width: 0; }
.trade-analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
}

.trade-search-wrap {
  position: relative;
  margin-bottom: 20px;
}
.trade-search-svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  color: var(--text-muted);
}
.trade-search {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1em;
  font-family: inherit;
  outline: none;
  transition: all var(--transition);
}
.trade-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.trade-search::placeholder { color: var(--text-muted); }

.trade-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
}
.trade-search-dropdown.open { display: block; }
.search-result {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.active { background: var(--accent-dim); }
.search-result-symbol { font-weight: 700; font-size: 0.95em; min-width: 60px; }
.search-result-name {
  flex: 1;
  font-size: 0.82em;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 10px;
}
.search-loading, .search-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85em;
}

.trade-ticker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.trade-ticker-symbol {
  display: block;
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.trade-ticker-price {
  display: block;
  font-size: 1.3em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  margin-top: 2px;
}
.trade-confidence {
  text-align: right;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.confidence-label {
  display: block;
  font-size: 0.7em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.confidence-value { font-size: 1em; font-weight: 700; }

.explainer-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.explainer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: 12px;
  color: var(--accent);
}
.explainer-body {
  font-size: 0.82em;
  color: var(--text-secondary);
  line-height: 1.7;
}
.explainer-body ul { list-style: none; padding: 0; margin: 0; }
.explainer-body li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.explainer-body li:last-child { border-bottom: none; }
.explainer-body li::before { content: "• "; color: var(--accent); font-weight: 700; }

.risk-viz-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.risk-viz-card h4 {
  font-size: 0.88em;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rr-risk { background: var(--red); transition: flex 0.3s; }
.rr-entry { width: 3px; background: var(--text); flex-shrink: 0; }
.rr-reward { background: var(--green); transition: flex 0.3s; }
.rr-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
}
.rr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rr-stat { text-align: center; }
.rr-stat-label {
  display: block;
  font-size: 0.68em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.rr-stat-value {
  font-size: 1em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.buy-sell-toggle {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
}
.toggle-btn {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
#toggleBuy.active { background: var(--green); color: #000; }
#toggleSell.active { background: var(--red); color: #fff; }

.qty-section { margin-bottom: 24px; }
.qty-mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.qty-mode {
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.qty-mode.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.qty-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty-step {
  width: 56px;
  height: 56px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.4em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.qty-step:active { background: var(--accent-dim); }
.qty-input {
  flex: 1;
  height: 56px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text);
  font-size: 1.6em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.estimated-cost {
  text-align: center;
  margin-top: 10px;
  font-size: 0.85em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.strategy-suggestion {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.suggestion-header {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.9em;
  margin-bottom: 10px;
}
.suggestion-body { font-size: 0.85em; color: var(--text-secondary); line-height: 1.6; }
.suggestion-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.suggestion-level {
  text-align: center;
  padding: 10px 8px;
  background: var(--bg);
  border-radius: var(--radius-xs);
}
.suggestion-level small {
  display: block;
  font-size: 0.7em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.suggestion-level strong {
  font-size: 1.05em;
  font-family: 'JetBrains Mono', monospace;
}

.btn-review-order {
  width: 100%;
  padding: 18px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn-review-order:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn-review-order:not(:disabled):active { transform: scale(0.98); }
.btn-review-order.sell-mode { background: var(--red); color: #fff; }

/* ═══════════ POSITIONS SCREEN ═══════════════════════ */
.pos-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pos-tab-bar::-webkit-scrollbar { display: none; }
.pos-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
}
.pos-tab:hover { color: var(--text-primary); }
.pos-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.pos-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(90,100,128,0.15);
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1;
}
.pos-tab-count:empty { display: none; }
.pos-tab.active .pos-tab-count {
  background: var(--accent);
  color: #fff;
}
.pos-tab-divider {
  width: 1px;
  background: var(--border);
  margin: 6px 8px;
  align-self: stretch;
}

/* Position Cards — vertical full-width list */
.position-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.position-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-card);
}
.position-card:hover { border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-card-hover); }
/* P&L directional border — instant at-a-glance read */
.position-card.profit-card {
  border-left: 3px solid var(--color-profit);
  padding-left: calc(16px - 2px);
}
.position-card.profit-card:hover { border-left-color: var(--color-profit); box-shadow: var(--shadow-card-hover), -2px 0 14px rgba(0,210,106,0.10); }
.position-card.loss-card {
  border-left: 3px solid var(--color-loss);
  padding-left: calc(16px - 2px);
}
.position-card.loss-card:hover { border-left-color: var(--color-loss); box-shadow: var(--shadow-card-hover), -2px 0 14px rgba(255,71,87,0.10); }

/* ── Position Card Enhancements ── */
.position-card.profit { box-shadow: 0 0 0 1px rgba(0,210,106,0.15), var(--shadow-card); }
.position-card.loss { box-shadow: 0 0 0 1px rgba(255,71,87,0.15), var(--shadow-card); }
.pos-pnl-bar { height: 3px; background: var(--surface-border); border-radius: 0 0 var(--radius-card) var(--radius-card); margin: 0 -1px -1px; overflow: hidden; }
.pos-pnl-fill { height: 100%; border-radius: inherit; transition: width 0.5s ease; }
.dist-stop { font-size: 0.7em; color: var(--red); background: var(--red-dim); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: 600; }
.dist-target { font-size: 0.7em; color: var(--green); background: var(--green-dim); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: 600; }
@keyframes price-flash-up { 0%,100% { color: var(--text); } 50% { color: var(--green); } }
@keyframes price-flash-down { 0%,100% { color: var(--text); } 50% { color: var(--red); } }
.price-flash-up { animation: price-flash-up 0.6s ease; }
.price-flash-down { animation: price-flash-down 0.6s ease; }

/* ── Broker-synced cards (Order History, Activity) ── */
.broker-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: all var(--transition);
}
.broker-card:hover { border-color: var(--border-light); }
.broker-card + .broker-card { margin-top: 6px; }
.broker-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.broker-card-symbol {
  font-weight: 700;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.broker-card-side {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(90,100,128,0.12);
}
.broker-card-side[style*="--green"] { background: rgba(var(--green-rgb, 16,185,129),0.12); }
.broker-card-side[style*="--red"] { background: rgba(var(--red-rgb, 239,68,68),0.12); }
.broker-card-qty {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.broker-card-status {
  font-weight: 600;
  font-size: 11px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(90,100,128,0.1);
}
.broker-card-details {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.broker-card-details span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.position-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.position-card-main:active { background: rgba(255,255,255,0.02); }
.pos-card-left { display: flex; flex-direction: column; gap: 2px; }
.pos-card-symbol { font-weight: 700; font-size: 20px; }
.pos-card-strategy-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 600;
  background: var(--accent-dim);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pos-card-meta { font-size: 0.75em; color: var(--text-secondary); margin-top: 2px; }
.pos-card-right { text-align: right; }
.pos-card-value { font-weight: 600; font-size: 1em; font-variant-numeric: tabular-nums; }
.pos-card-pnl { font-weight: 600; font-size: 0.88em; font-variant-numeric: tabular-nums; transition: text-shadow var(--transition-smooth); }
.pos-card-pnl.up { color: var(--green); text-shadow: 0 0 12px rgba(0,210,106,0.2); }
.pos-card-pnl.down { color: var(--red); text-shadow: 0 0 12px rgba(255,71,87,0.2); }
.pos-card-pnl.up::before { content: "▲ "; font-size: 0.7em; }
.pos-card-pnl.down::before { content: "▼ "; font-size: 0.7em; }

/* Expanded Details */
.pos-card-details {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}
.pos-card-details.open { display: block; animation: slideDown 0.2s ease; }
@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 800px; }
}
.pos-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 14px;
}
/* P1-4: Worst exit row in position card */
.pos-worst-exit-row { opacity: 0.85; }
.pos-detail-hint { font-size: var(--text-micro); color: var(--text-tertiary); font-weight: 400; margin-left: 3px; }
.pos-detail-item { }
.pos-detail-label {
  display: block;
  font-size: 0.68em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.pos-detail-value {
  font-weight: 600;
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}
.pos-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pos-detail-actions .btn { flex: 1; }
.position-card.closed-trade .pos-card-meta { color: var(--text-muted); }

/* ── Order / Position Mini Chart ── */
.order-mini-chart-section {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.order-mini-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.order-mini-chart-title {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.order-mini-chart-timeframes {
  display: flex;
  gap: 4px;
}
.order-tf-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.68em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}
.order-tf-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.order-tf-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.order-mini-chart {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}

/* ── Stop-Loss Order Styling ── */
.position-card.stop-order {
  border-left: 3px solid var(--text-muted);
  opacity: 0.75;
}
.position-card.stop-order:hover { opacity: 1; }
.order-stop-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.order-stop-info {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px 0 4px;
  font-size: 0.8em;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ═══════════ ANALYTICS SCREEN ═══════════════════════ */

/* --- System Health Score Card --- */
.health-score-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.health-score-left { flex-shrink: 0; }
.health-score-arc-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}
.health-arc-svg { display: block; }
.health-arc-bg { stroke: rgba(255,255,255,0.06); }
.health-arc-fill { transition: stroke-dashoffset 1s ease, stroke 1s ease; }
.health-score-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.health-score-number {
  display: block;
  font-size: 2em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.health-score-label {
  display: block;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 3px;
}
.health-score-right { flex: 1; }
.health-score-subtitle {
  font-size: 0.8em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.health-contributors { display: flex; flex-direction: column; gap: 10px; }
.health-contributor-row { display: flex; align-items: center; gap: 10px; }
.hc-label {
  font-size: 0.76em;
  color: var(--text-secondary);
  width: 96px;
  flex-shrink: 0;
}
.hc-bar-wrap {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.hc-bar {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.9s ease;
  background: linear-gradient(90deg, var(--yellow), var(--green));
}
.hc-pts {
  font-size: 0.72em;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}
/* Score verdict color helpers */
.score-excellent { color: var(--green); }
.score-good { color: #a3e635; }
.score-needs-work { color: var(--yellow); }
.score-danger { color: var(--red); }

/* --- Three Breakdown Panels --- */
.analytics-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.analytics-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), border-top-color var(--transition-smooth);
}
.analytics-panel:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(255,255,255,0.11); }
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.panel-title {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.panel-subscore {
  font-size: 0.78em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.panel-metrics { display: flex; flex-direction: column; gap: 9px; }
.panel-metric-row { display: flex; justify-content: space-between; align-items: center; }
.pm-label { font-size: 0.76em; color: var(--text-muted); }
.pm-value {
  font-size: 0.83em;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.pm-value.pm-large { font-size: 1.1em; font-weight: 800; }
/* Panel top-border colors keyed to health */
.panel-score-excellent { border-top-color: var(--green) !important; }
.panel-score-good { border-top-color: #a3e635 !important; }
.panel-score-needs-work { border-top-color: var(--yellow) !important; }
.panel-score-danger { border-top-color: var(--red) !important; }

/* --- Evidence Charts Row --- */
.analytics-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* --- Advanced Toggle --- */
.analytics-advanced { margin-bottom: 16px; }
.analytics-advanced-toggle {
  width: 100%;
  padding: 12px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.84em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition);
}
.analytics-advanced-toggle:hover { background: rgba(255,255,255,0.05); color: var(--text); }

/* --- Existing grid / section / chart-wrap (preserved) --- */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.analytics-section { margin-bottom: 28px; }
.analytics-section h2 { font-size: 1.1em; font-weight: 700; margin-bottom: 4px; }
.section-explain { font-size: 0.78em; color: var(--text-muted); margin-bottom: 14px; }
.chart-wrap {
  height: 340px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px;
}

/* Stress Test Grades — vertical full-width rows */
.stress-grades-vertical { display: flex; flex-direction: column; gap: 8px; }
.stress-grade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
}
.stress-grade-row:hover { border-color: rgba(255,255,255,0.1); }
.grade-scenario-label { font-size: 0.9em; font-weight: 600; color: var(--text); }
.grade-value {
  font-size: 1.5em;
  font-weight: 800;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.grade-pending { color: var(--text-muted); background: rgba(255,255,255,0.04); }
.grade-a { color: var(--green); background: var(--green-dim); }
.grade-b { color: #4ade80; background: rgba(74,222,128,0.1); }
.grade-c { color: var(--yellow); background: rgba(255,193,7,0.1); }
.grade-d { color: #fb923c; background: rgba(251,146,60,0.1); }
.grade-f { color: var(--red); background: var(--red-dim); }

/* ═══════════ SETTINGS SCREEN ════════════════════════ */
.settings-single-col {
  max-width: 100%;
}
.system-health-card {
  margin-bottom: 14px;
}
.health-grid {
  display: flex;
  flex-direction: column;
}
.pdt-status-card {
  margin-bottom: 14px;
}
.pdt-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pdt-count-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pdt-count-num {
  font-size: 2em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}
.pdt-count-of {
  font-size: 0.85em;
  color: var(--text-secondary);
}
.pdt-dots {
  display: flex;
  gap: 6px;
}
.pdt-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition);
}
.pdt-dot.used { background: var(--yellow); }
.pdt-dot.danger { background: var(--red); }

.setting-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.setting-card:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(255,255,255,0.1); }
.setting-card h3 {
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 6px;
}
.setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-explain {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.setting-explain a { color: var(--accent); text-decoration: none; }

/* Mode Toggle */
.mode-card { border: 2px solid var(--border); }

/* ═══════════ DUAL ACCOUNT GRID ══════════════════════ */
.dual-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  .dual-account-grid { grid-template-columns: 1fr; }
  .pos-tab { padding: 8px 12px; font-size: 0.82em; }
  .pos-tab-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.72em; }
  .broker-card { padding: 12px 14px; }
  .broker-card-symbol { max-width: 120px; font-size: 13px; }
  .broker-card-details { gap: 8px; font-size: 11px; }
}
.account-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.account-panel.active-mode { border-color: var(--accent); }
.account-panel-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.account-panel-title {
  font-size: 0.9em;
  font-weight: 700;
}
.account-panel-url {
  font-size: 0.72em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.account-equity {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.account-details {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
}
.account-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.78em;
}
.account-detail-row + .account-detail-row {
  border-top: 1px solid var(--border);
}
.account-detail-row .detail-label {
  color: var(--text-muted);
  font-weight: 500;
}
.account-detail-row .detail-value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}
.account-detail-row .detail-value.mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
  font-size: 0.95em;
}
.account-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  margin-bottom: 10px;
  color: var(--text-muted);
}
.account-status.connected { color: var(--green); }
.btn-disconnect {
  font-size: 0.78em;
  padding: 6px 12px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: transparent;
}
.btn-disconnect:hover { border-color: var(--red); color: var(--red); }

/* Active Mode Indicator */
.active-mode-indicator {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.active-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.active-mode-label {
  font-size: 0.82em;
  color: var(--text-muted);
  font-weight: 500;
}
.active-mode-value {
  font-size: 0.9em;
  font-weight: 700;
}
.active-mode-hint {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Mode Switch Control */
.mode-switch-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mode-switch-current {
  font-size: 0.82em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mode-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}
.mode-radio input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
}
.mode-radio label { cursor: default; font-weight: 500; }

/* Switch Progress */
.switch-progress {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.switch-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78em;
  color: var(--text-muted);
  padding: 4px 0;
}
.switch-step.active { color: var(--accent); font-weight: 600; }
.switch-step.done { color: var(--green); }
.step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.switch-step.active .step-dot { background: var(--accent); }
.switch-step.done .step-dot { background: var(--green); }

.mode-toggle {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-xs);
  padding: 3px;
}
.mode-btn {
  padding: 6px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.mode-btn.active { background: var(--accent); color: #fff; }

/* API Status */
.api-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
  font-weight: 600;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.status-dot.connected { background: var(--green); }
.status-dot.disconnected { background: var(--text-muted); }
.status-dot.error { background: var(--red); }

/* Risk Sliders */
.risk-slider-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.risk-slider-row.full-width {
  grid-column: 1 / -1;
}
.risk-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.risk-slider-row { }
.risk-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.risk-slider-label { font-size: 0.85em; font-weight: 600; }
.risk-slider-value {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}
.risk-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) 100%
  );
}
.risk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-primary);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
.risk-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.risk-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-primary);
  cursor: pointer;
}
/* P2-1: Confidence slider color zones */
.conf-slider {
  background: linear-gradient(
    to right,
    var(--color-loss) 0%,
    var(--color-loss) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) 100%
  );
}
.conf-slider.safe-zone {
  background: linear-gradient(
    to right,
    var(--color-profit) 0%,
    var(--color-profit) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) var(--slider-fill, 0%),
    rgba(255,255,255,0.1) 100%
  );
}

/* ── Slider Tick Marks ── */
.slider-tick-wrapper {
  position: relative;
  padding-bottom: 20px;
}
.slider-tick-wrapper .risk-slider {
  position: relative;
  z-index: 2;
}
/* Color-coded track background: red (left of thumb) → green (right of thumb) */
.slider-track-zones {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 7px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--red) 0%, var(--red) 33%, var(--green) 34%, var(--green) 100%);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}
/* Make the confidence slider track transparent so gradient shows through */
.conf-slider {
  background: transparent !important;
}
.slider-ticks {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 22px;
  height: 24px;
  z-index: 3;
}
.slider-tick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}
.tick-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 3px;
}
/* Risky zone dots — red */
.slider-tick.risky .tick-dot {
  background: var(--red);
  border-color: var(--red);
  opacity: 0.7;
}
/* Safe zone dots — green */
.slider-tick.safe .tick-dot {
  background: var(--green);
  border-color: var(--green);
  opacity: 0.7;
}
/* Default (60%) dot — highlighted green with glow */
.slider-tick.default .tick-dot {
  background: var(--green);
  border-color: var(--green);
  opacity: 1;
  box-shadow: 0 0 6px var(--green);
  width: 6px;
  height: 6px;
}
.tick-label {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.slider-tick.risky .tick-label {
  color: var(--red);
}
.slider-tick.safe .tick-label {
  color: var(--green);
}
.slider-tick.default .tick-label {
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
}
/* Neutral tick style for generic sliders */
.slider-tick.neutral .tick-dot {
  background: var(--text-muted);
  border-color: var(--text-muted);
  opacity: 0.5;
}
.slider-tick.neutral .tick-label {
  color: var(--text-muted);
}
.slider-tick.neutral.default .tick-dot {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 6px var(--accent);
  width: 6px;
  height: 6px;
}
.slider-tick.neutral.default .tick-label {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
}
/* Clickable ticks */
.slider-tick[data-value] {
  cursor: pointer;
}
.slider-tick[data-value]:hover .tick-dot {
  opacity: 1;
  transform: scale(1.4);
  transition: transform 0.15s, opacity 0.15s;
}
.slider-tick[data-value]:hover .tick-label {
  color: var(--text);
}
/* Risk badge next to the value */
.conf-risk-badge {
  font-size: 0.72em;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.conf-risk-badge.safe {
  color: var(--green);
  background: rgba(0, 210, 106, 0.12);
}
.conf-risk-badge.risky {
  color: var(--red);
  background: rgba(255, 71, 87, 0.12);
}

/* Toggle Rows */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { display: block; font-weight: 600; font-size: 0.92em; }
.toggle-explain { display: block; font-size: 0.72em; color: var(--text-muted); margin-top: 2px; }

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 50px; height: 30px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 15px;
  cursor: pointer;
  transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.toggle-switch.active { background: var(--green); box-shadow: 0 0 14px rgba(0,210,106,0.3); border-color: rgba(0,210,106,0.2); }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-smooth);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch.active .toggle-knob { transform: translateX(20px); }

/* Health Rows */
.health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88em;
}
.health-row:last-child { border-bottom: none; }
.health-status { display: flex; align-items: center; gap: 6px; font-weight: 600; }

/* Danger Accordion */
.danger-accordion {
  margin-top: 14px;
}
.danger-accordion-summary {
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.92em;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: all var(--transition);
}
.danger-accordion-summary::-webkit-details-marker { display: none; }
.danger-accordion-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.danger-accordion-summary::before {
  content: '';
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.danger-accordion[open] .danger-accordion-summary::before {
  transform: rotate(90deg);
}
.danger-accordion[open] .danger-accordion-summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}
.danger-accordion .danger-zone {
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 0;
}
.danger-card {
  border-color: rgba(248, 81, 73, 0.3);
  background: rgba(248, 81, 73, 0.04);
}
.danger-card h3 {
  color: var(--red);
}
.danger-confirm-group {
  margin-bottom: 12px;
}

/* PDT Warning */
.pdt-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--yellow-dim);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: var(--radius);
  margin-top: 14px;
}
.pdt-warning strong { color: var(--yellow); font-size: 0.92em; }
.pdt-warning p { font-size: 0.78em; color: var(--text-secondary); margin-top: 4px; }
.pdt-icon { font-size: 1.4em; flex-shrink: 0; }
.danger-zone { border-color: rgba(255,80,0,0.3); }
.danger-zone h3 { color: var(--red); }

/* Form Elements */
.form-label {
  display: block;
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 4px;
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  transition: border-color var(--transition);
  min-height: 48px;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }
.form-input:focus-visible { outline: none; }
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  font-size: 0.85em;
  cursor: pointer;
}
.form-check input { width: 18px; height: 18px; }
.form-error {
  padding: 10px 14px;
  background: var(--red-dim);
  border: 1px solid rgba(255,80,0,0.3);
  border-radius: var(--radius-xs);
  color: var(--red);
  font-size: 0.85em;
  margin-bottom: 12px;
}
.form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* ═══════════ BUTTONS ════════════════════════════════ */
.btn {
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary-action {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #000;
  box-shadow: 0 1px 3px rgba(245,158,11,0.25);
}
.btn-primary-action:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.btn-secondary-action { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid rgba(255,255,255,0.1); }
.btn-secondary-action:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.btn-danger-action {
  background: linear-gradient(135deg, var(--red) 0%, #DC2626 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(255,71,87,0.3);
}
.btn-danger-action:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,71,87,0.3); }
.btn-setting {
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 18px;
  border-radius: var(--radius-xs);
}

/* ═══════════ EMPTY STATES ═══════════════════════════ */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}
.empty-icon { margin-bottom: 12px; }
.empty-state h3 {
  font-size: 1.1em; font-weight: 700;
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 0.85em;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.empty-state-inline {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-secondary);
  font-size: 0.85em;
}
.empty-state-inline p { font-weight: 600; margin-bottom: 4px; }
.empty-state-inline span { font-size: 0.85em; color: var(--text-muted); }

/* ═══════════ CONFIRMATION OVERLAY ═══════════════════ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
}
.confirm-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(135deg, rgba(17,17,19,0.98) 0%, rgba(24,24,27,0.98) 100%);
  border-radius: var(--radius-modal);
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 1;
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 16px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
}
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.confirm-card h2 { font-size: 1.2em; font-weight: 700; margin-bottom: 16px; }
.confirm-body {
  font-size: 0.9em;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}
.confirm-body .confirm-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.confirm-body .confirm-detail-row:last-child { border-bottom: none; }
.confirm-body .confirm-detail-label { color: var(--text-muted); }
.confirm-body .confirm-detail-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-actions .btn { flex: 1; padding: 14px; font-size: 1em; }

/* ═══════════ TOAST NOTIFICATIONS ════════════════════ */
.toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + 12px);
  right: 28px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
  width: auto;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(17,17,19,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--yellow); }
.toast.info { border-left-color: var(--accent); }
.toast-icon { font-size: 1.2em; flex-shrink: 0; }

/* ═══════════ ONBOARDING TOOLTIP ═════════════════════ */
.onboarding-tooltip {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 320px;
  background: var(--accent);
  color: #fff;
  padding: 16px 20px;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(245,158,11,0.25);
  z-index: 250;
  text-align: center;
  font-size: 0.85em;
  line-height: 1.5;
  animation: fadeIn 0.3s ease;
}
.onboarding-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--accent);
  border-bottom: none;
}
.onboarding-dismiss {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}

/* ═══════════ ANIMATIONS ═════════════════════════════ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 16px rgba(255,80,0,0.3); }
}
/* Financial data flash — green for up-tick, red for down-tick */
@keyframes valueFlashUp {
  0%   { color: var(--text-primary); background: transparent; }
  15%  { color: #fff; background: rgba(0,210,106,0.20); border-radius: 3px; }
  100% { color: var(--text-primary); background: transparent; }
}
@keyframes valueFlashDown {
  0%   { color: var(--text-primary); background: transparent; }
  15%  { color: #fff; background: rgba(255,71,87,0.20); border-radius: 3px; }
  100% { color: var(--text-primary); background: transparent; }
}
.value-flash-up   { animation: valueFlashUp   600ms ease forwards; }
.value-flash-down { animation: valueFlashDown 600ms ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .value-flash-up, .value-flash-down { animation: none; }
}

/* ═══════════ AUTO-CLOSE BANNERS (paper/live/regime) ═══════════ */
.acb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: 99;
  user-select: none;
  animation: acb-in 0.3s ease;
  transition: opacity 0.4s, transform 0.4s;
}
.acb.dismissing { opacity: 0; transform: translateY(-100%); }
@keyframes acb-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.acb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.acb-dot.paper { background: #888780; }
.acb-dot.live  { background: #00C805; }
.acb-icon { font-size: 1em; flex-shrink: 0; }
.acb-text { flex: 1; }
.acb-close {
  background: none; border: none; color: inherit; opacity: 0.4;
  cursor: pointer; font-size: 0.85em; padding: 2px 4px; line-height: 1;
}
.acb-close:hover { opacity: 1; }
.paper-acb { background: #222; color: #888780; border-bottom: 1px solid #333; }
.live-acb  { background: #1A1A1A; color: #bbb; border-bottom: 1px solid #2A2A2A; }
.regime-acb { background: rgba(255,80,0,0.06); color: var(--text-secondary); border-bottom: 1px solid rgba(255,80,0,0.12); }
.regime-acb.crash { background: rgba(204,0,0,0.08); color: var(--red); border-bottom-color: rgba(204,0,0,0.15); }

/* ═══════════ EMERGENCY CLOSE BUTTON ═════════════════ */
.btn-emergency-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  height: 30px;
  background: rgba(255,71,87,0.1);
  color: var(--color-loss);
  border: 1.5px solid rgba(255,71,87,0.5);
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all var(--transition-smooth);
  animation: emergency-pulse 3s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
  50% { box-shadow: 0 0 16px 4px rgba(255,71,87,0.15); }
}
.btn-emergency-close:hover { background: var(--color-loss); color: #fff; box-shadow: var(--glow-loss); animation: none; }
.btn-emergency-close:active { transform: scale(0.97); }

/* ═══════════ BUTTON LOADING STATE ═══════════════════ */
.btn-loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}
.btn-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════ FOCUS VISIBLE ══════════════════════════ */
.btn:focus-visible,
.tab:focus-visible,
.sidebar-item:focus-visible,
.toggle-switch:focus-visible,
.trade-search:focus-visible,
.position-card-main:focus-visible,
.filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--accent);
}
.risk-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.logs-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.qty-step:focus-visible,
.qty-mode:focus-visible,
.toggle-btn:focus-visible,
.mode-btn:focus-visible,
.order-tf-btn:focus-visible,
.danger-accordion-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════ PLOTLY OVERRIDES ════════════════════════ */
.chart-wrap .js-plotly-plot .plotly .modebar { display: none !important; }

/* ═══════════ MOBILE SIDEBAR BACKDROP ════════════════ */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 140;
}
.sidebar-backdrop.active { display: block; }

/* ── Trade Page: Full Analysis Panel ── */
.analysis-full-panel { margin-top: 12px; }
.analysis-section {
  background: var(--bg-card); border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 10px; border: 1px solid var(--border);
}
.analysis-section h4 {
  font-size: 0.88em; font-weight: 600; margin: 0 0 10px; color: var(--text);
}
.analysis-section h4 .analysis-hint {
  font-weight: 400; font-size: 0.85em; color: var(--text-muted);
}
.analysis-empty {
  font-size: 0.82em; color: var(--text-muted); text-align: center; padding: 12px 0;
}
.analysis-signals-list { display: flex; flex-direction: column; gap: 8px; }
.analysis-signal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-xs); background: var(--bg); font-size: 0.82em;
}
.analysis-signal-row .sig-strategy { font-weight: 500; flex: 1; }
.analysis-signal-row .sig-pill {
  padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.8em; margin: 0 8px;
}
.analysis-signal-row .sig-pill.buy { background: rgba(0,200,5,0.15); color: var(--green); }
.analysis-signal-row .sig-pill.sell { background: rgba(255,80,0,0.15); color: var(--red); }
.analysis-signal-row .sig-pill.hold { background: rgba(128,128,128,0.15); color: var(--text-muted); }
.analysis-signal-row .sig-conf { min-width: 42px; text-align: right; font-weight: 600; }
.analysis-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.analysis-table {
  width: 100%; font-size: 0.78em; border-collapse: collapse;
}
.analysis-table th {
  text-align: left; font-weight: 500; color: var(--text-muted);
  padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.analysis-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.analysis-table tr:last-child td { border-bottom: none; }
.val-good { color: var(--green); font-weight: 600; }
.val-bad { color: var(--red); font-weight: 600; }
.val-warn { color: var(--yellow); font-weight: 600; }
.val-neutral { color: var(--text-muted); }
.overfit-badge {
  display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 0.75em; font-weight: 600;
}
.overfit-badge.ok { background: rgba(0,200,5,0.15); color: var(--green); }
.overfit-badge.warn { background: rgba(255,193,7,0.15); color: var(--yellow); }
.analysis-ai-list { display: flex; flex-direction: column; gap: 8px; }
.ai-insight-card {
  padding: 8px 10px; border-radius: var(--radius-xs); background: var(--bg); font-size: 0.82em;
}
.ai-insight-card .ai-desc { font-weight: 500; margin-bottom: 4px; }
.ai-insight-card .ai-meta { font-size: 0.78em; color: var(--text-muted); }
.ai-insight-card .ai-conditions { margin-top: 4px; font-size: 0.75em; color: var(--text-muted); }

/* (live-banner moved to .acb styles) */

/* (regime-banner moved to .acb styles) */

/* ═══════════ ENGINE STATUS INDICATOR ════════════════ */
.engine-status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all var(--transition-smooth);
}
.engine-status-badge.running {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(0,210,106,0.2);
}
.engine-status-badge.idle {
  background: rgba(82,82,91,0.12);
  color: var(--text-muted);
  border: 1px solid rgba(82,82,91,0.15);
}
.engine-status-badge.halted {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255,71,87,0.2);
  animation: pulse-glow-red 2s ease-in-out infinite;
}
.engine-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.engine-status-badge.running .engine-status-dot {
  animation: pulse-dot 2s infinite;
}
/* P2-3: scanning and trading states get a faster pulsing dot */
.engine-status-badge.scanning .engine-status-dot,
.engine-status-badge.trading .engine-status-dot {
  animation: pulse-dot-scale 1.2s infinite;
}
.engine-status-badge.scanning .engine-status-dot {
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(255,170,44,0.5);
}
.engine-status-badge.trading .engine-status-dot {
  background: var(--color-profit);
  box-shadow: 0 0 6px rgba(0,210,106,0.5);
}

/* P2-4: VIX Tooltip */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  padding: 0;
  transition: background var(--transition);
}
.tooltip-trigger:hover { background: rgba(255,255,255,0.2); color: var(--text-primary); }
.tooltip-card {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-tertiary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 240px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
  box-shadow: var(--shadow-level2);
  z-index: 200;
  line-height: 1.5;
}
.tooltip-card strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.tooltip-card p { margin: 0 0 4px; }
.tooltip-card p:last-child { margin-bottom: 0; }
.strip-vix { position: relative; }

/* P2-6: Stock detail Trade/News tab panel */
.rh-order-tabs {
  display: flex;
  border-bottom: 1px solid var(--surface-border);
  margin: -16px -16px 16px;
  padding: 0 16px;
}
.rh-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition);
  margin-bottom: -1px;
}
.rh-tab:hover { color: var(--text-primary); }
.rh-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rh-tab-panel { animation: fadeIn 0.2s ease-out; }
.stock-earnings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--text-label);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 10px;
}
.earnings-proximity-badge {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 700;
}
.earnings-proximity-badge.safe    { background: rgba(0,210,106,0.1); color: var(--color-profit); }
.earnings-proximity-badge.caution { background: rgba(255,170,44,0.1); color: var(--yellow); }
.earnings-proximity-badge.blocked { background: rgba(255,71,87,0.1); color: var(--color-loss); }
.autonomous-mode-details {
  margin-top: 12px;
  font-size: 0.82em;
  color: var(--text-secondary);
}
.autonomous-mode-details summary {
  color: var(--text-tertiary);
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-bottom: 6px;
}
.stock-news-list { display: flex; flex-direction: column; gap: 10px; }
.stock-news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-border);
}
.stock-news-item:last-child { border-bottom: none; }
.stock-news-headline {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.stock-news-meta {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

@keyframes pulse-dot-scale {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ═══════════ ACTIVITY FEED ══════════════════════════ */
.activity-feed-section { margin-top: 24px; }
.activity-feed-section h2 { font-size: 1.1em; font-weight: 700; margin-bottom: 14px; }
.activity-feed {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-xs);
  font-size: 0.82em;
  line-height: 1.5;
  transition: background var(--transition);
}
.activity-item:hover { background: rgba(255,255,255,0.04); }
.activity-icon {
  flex-shrink: 0;
  font-size: 1.1em;
  margin-top: 1px;
}
.activity-body { flex: 1; }
.activity-desc { color: var(--text); }
.activity-time {
  font-size: 0.78em;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.activity-feed-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* ═══════════ OVERNIGHT SUMMARY ══════════════════════ */
.overnight-summary {
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.03) 100%);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(245,158,11,0.06);
}
.overnight-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.overnight-summary-header h3 {
  font-size: 1em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.overnight-summary-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2em;
  padding: 4px;
}
.overnight-summary-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88em;
}
.overnight-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245,158,11,0.12);
}
.overnight-stat:last-child { border-bottom: none; }
.overnight-stat-label { color: var(--text-secondary); }
.overnight-stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ═══════════ CRASH INTERSTITIAL ════════════════════ */
.crash-interstitial {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  animation: fadeIn 0.3s ease-out;
}
.crash-interstitial-card {
  max-width: 480px;
  width: 90%;
  background: linear-gradient(135deg, rgba(17,17,19,0.98) 0%, rgba(24,24,27,0.98) 100%);
  border: 2px solid #CC0000;
  border-radius: var(--radius-modal);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 16px 64px rgba(204,0,0,0.2), 0 4px 16px rgba(0,0,0,0.4);
}
.crash-interstitial-icon {
  font-size: 3em;
  margin-bottom: 12px;
}
.crash-interstitial-card h2 {
  color: #CC0000;
  font-size: 1.4em;
  margin-bottom: 12px;
}
.crash-interstitial-card p {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 20px;
  line-height: 1.6;
}
.crash-interstitial-actions {
  display: flex;
  gap: 12px;
}
.crash-interstitial-actions .btn { flex: 1; }

/* ═══════════ STALE DATA WARNING ════════════════════ */
.stale-data-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--yellow-dim);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: var(--radius-xs);
  color: var(--yellow);
  font-size: 0.82em;
  font-weight: 600;
  margin-top: 8px;
}
.stale-data-warning button {
  background: var(--yellow);
  color: #000;
  border: none;
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: 0.85em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* ═══════════ MARKET VALUE SUB-LABEL ON CARD ════════════ */
.pos-card-price-sub {
  font-size: 0.72em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  text-align: right;
}

/* P2-5: Positions P&L summary header */
.pos-summary-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}
.pos-summary-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pos-summary-label {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pos-summary-value {
  font-size: var(--text-large);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.pos-summary-value.up { color: var(--color-profit); }
.pos-summary-value.down { color: var(--color-loss); }
.pos-summary-divider { width: 1px; height: 32px; background: var(--surface-border); }

/* ═══════════ PORTFOLIO DIVERSITY SUMMARY ════════════ */
.pos-portfolio-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pdiv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pdiv-title {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pdiv-total {
  font-size: 0.82em;
  color: var(--text-secondary);
}
.pdiv-total strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}
.pdiv-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 10px;
}
.pdiv-seg {
  height: 100%;
  border-radius: 999px;
  transition: opacity 150ms ease;
  cursor: default;
  min-width: 4px;
}
.pdiv-seg:hover { opacity: 0.75; }
.pdiv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.pdiv-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78em;
}
.pdiv-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdiv-legend-ticker {
  font-weight: 600;
  color: var(--text-primary);
}
.pdiv-legend-pct {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ═══════════ PER-POSITION TRAIL STOP TOGGLE ════════════ */
.pos-trail-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pos-trail-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pos-trail-toggle-btn.active {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.pos-trail-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--accent);
}
.pos-detail-auto-note {
  font-size: 0.78em;
  color: var(--text-muted);
  align-self: center;
  flex: 1;
  text-align: right;
}
@media (max-width: 480px) {
  .pos-detail-auto-note { display: none; }
  .pos-trail-toggle-btn { width: 100%; justify-content: center; }
}

/* ═══════════ TRAILING STOP DISPLAY ══════════════════ */
.pos-trailing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  background: rgba(245,158,11,0.1);
  color: var(--accent);
  margin-left: 8px;
}
.pos-trailing-badge.active {
  background: var(--green-dim);
  color: var(--green);
}
.pos-trailing-value {
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════ CONFIDENCE QUALITATIVE METER ═══════════ */
.confidence-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  font-weight: 600;
}
.confidence-meter-label.high { color: var(--green); }
.confidence-meter-label.medium { color: var(--yellow); }
.confidence-meter-label.low { color: var(--red); }
.confidence-meter-dots {
  display: flex;
  gap: 3px;
}
.confidence-meter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.confidence-meter-dot.filled.high { background: var(--green); }
.confidence-meter-dot.filled.medium { background: var(--yellow); }
.confidence-meter-dot.filled.low { background: var(--red); }

/* ═══════════ RISK VALUE LABELS ══════════════════════ */
.risk-pill-value {
  font-size: 0.7em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
}

/* ═══════════ SIGNAL AGE INDICATOR ═══════════════════ */
.signal-age {
  font-size: 0.72em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.signal-age.stale {
  color: var(--yellow);
  font-weight: 600;
}
.signal-age.stale-red {
  color: var(--red);
  font-weight: 700;
}

/* ═══════════ SCAN METADATA HEADER ══════════════════ */
.scan-meta-header {
  font-size: 0.78em;
  color: var(--text-muted);
  padding: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════ PUT OPTION WARNING ═════════════════════ */
.put-risk-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: var(--red-dim);
  border: 1px solid rgba(255,80,0,0.3);
  border-radius: var(--radius-xs);
  margin-top: 12px;
  font-size: 0.82em;
  color: var(--text-secondary);
  line-height: 1.5;
}
.put-risk-warning strong { color: var(--red); }

/* ═══════════ LIVE MODE CONFIRM ══════════════════════ */
.live-confirm-input-wrap {
  margin: 16px 0;
}
.live-confirm-input-wrap label {
  display: block;
  font-size: 0.82em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.live-confirm-input-wrap input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--red);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 1.1em;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  outline: none;
}
.live-confirm-countdown {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--red);
  margin: 12px 0;
}
.live-confirm-equity {
  text-align: center;
  padding: 12px;
  background: var(--red-dim);
  border-radius: var(--radius-xs);
  margin-bottom: 12px;
}
.live-confirm-equity .equity-label {
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.live-confirm-equity .equity-value {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

/* ═══════════ RESPONSIVE — TABLET ════════════════════ */
@media (max-width: 1023px) {
  .sidebar { width: var(--sidebar-width); }
  .sidebar:hover { width: var(--sidebar-width); }
  .sidebar-brand .brand-name, .sidebar-label { display: none !important; }
  .sidebar:hover .sidebar-brand .brand-name,
  .sidebar:hover .sidebar-label { display: none !important; }
  .sidebar-brand { padding: 16px; justify-content: center; }
  .sidebar-item { justify-content: center; padding: 12px; gap: 0; }
  .sidebar-footer { padding: 12px; align-items: center; }
  .sidebar:hover .sidebar-footer { align-items: center; padding: 12px; }
  .sidebar-footer .market-badge span:not(.market-dot) { display: none !important; }
  .sidebar:hover .sidebar-footer .market-badge span:not(.market-dot) { display: none !important; }
  .sidebar:hover .sidebar-clock { display: none; }
  .main-content { margin-left: var(--sidebar-width); }
  .screens-container { max-width: 100%; }
  .screen { padding: 24px 28px 32px; }
  .trade-layout { grid-template-columns: 1fr; }
  .trade-analysis { position: static; }
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-panels { grid-template-columns: 1fr; }
  .analytics-charts-row { grid-template-columns: 1fr; }
  .health-score-card { flex-direction: column; gap: 20px; }
  .hc-label { width: 80px; }
  .indices-strip { display: none; }
  .status-strip { flex-wrap: nowrap; overflow-x: auto; }
}

/* ═══════════ RESPONSIVE — MOBILE ════════════════════ */
@media (max-width: 767px) {
  .sidebar { transform: translateX(-100%); width: 220px; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  .sidebar:hover { width: 220px; }
  .sidebar-brand .brand-name, .sidebar-label { display: block !important; opacity: 1 !important; }
  .sidebar-item { justify-content: flex-start; gap: 14px; }
  .main-content { margin-left: 0; }
  .top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    justify-content: space-between;
    padding: 0 16px;
  }
  .indices-strip { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-brand { display: inline; }
  body {
    padding-top: var(--topbar-height);
    padding-bottom: calc(var(--tab-height) + var(--safe-bottom));
  }
  .tab-bar { display: flex; }
  .screens-container { max-width: 100%; }
  .screen { padding: 20px 16px 28px; }
  .screen-title { font-size: 1.4em; }
  .portfolio-value { font-size: 36px; }
  #globalPortfolioValue { font-size: 32px; }
  #globalPortfolioStrip { padding: 4px 12px; }
  .sparkline-wrap { height: 140px; }
  .trade-layout { grid-template-columns: 1fr; gap: 16px; }
  .trade-analysis { position: static; }
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-panels { grid-template-columns: 1fr; }
  .analytics-charts-row { grid-template-columns: 1fr; }
  .health-score-card { flex-direction: column; gap: 20px; }
  .hc-label { width: 80px; }
  .signals-list { grid-template-columns: 1fr; }
  .signal-feed-grid { grid-template-columns: 1fr; }
  .pos-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-wrap { height: 260px; }
  .key-metrics { gap: 10px; }
  .km-value { font-size: 1.6em; }
  .status-strip { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
  .strip-cash, .strip-pdt, .strip-vix { border-left: none; border-top: 1px solid var(--border); padding: 8px 0 0; flex-direction: row; justify-content: space-between; }
  .confirm-overlay { align-items: flex-end; }
  .confirm-card {
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(28px + var(--safe-bottom));
    animation: slideUp 0.25s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .toast-container {
    top: auto;
    bottom: calc(var(--tab-height) + var(--safe-bottom) + 12px);
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
  .toast { transform: translateY(12px); }
  .toast.show { transform: translateY(0); }
  .screen-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .screen-header-row .btn-scan { width: 100%; justify-content: center; }
}

/* ═══════════ TABLET PORTRAIT (769–1023px) — 2-col signal grid ══ */
@media (min-width: 769px) and (max-width: 1023px) {
  .signal-feed-grid { grid-template-columns: repeat(2, 1fr); }
  .signals-list { grid-template-columns: repeat(2, 1fr); }
  .analytics-panels { grid-template-columns: repeat(2, 1fr); }
  .pos-detail-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════ LARGE DESKTOP ══════════════════════════ */
@media (min-width: 1440px) {
  .screens-container { max-width: 1400px; }
  .screen { padding: 36px 52px 48px; }
  .portfolio-value { font-size: 56px; }
  .sparkline-wrap { height: 260px; }
  .chart-wrap { height: 400px; }
  .signals-list { grid-template-columns: repeat(3, 1fr); }
  .signal-feed-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════ SCROLLBAR ══════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-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: rgba(255,255,255,0.15); }

/* ═══════════ REDUCED MOTION ═════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Legal Disclaimer ── */
.legal-disclaimer {
  background: rgba(9,9,11,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 8px 16px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 99;
}
.legal-disclaimer p { margin: 0; }
.legal-disclaimer strong { color: var(--text-muted); }
@media (min-width: 769px) {
  .legal-disclaimer { bottom: 0; }
}

/* ═══════════ V7 FIX: AUDIT TRAIL STYLES ═══════════ */
.audit-entries { display: flex; flex-direction: column; gap: 10px; }
.audit-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border-left: 3px solid var(--text-muted);
}
.audit-entry.severity-critical { border-left-color: var(--red); background: var(--red-dim); }
.audit-entry.severity-error { border-left-color: var(--red); }
.audit-entry.severity-warn { border-left-color: var(--yellow); }
.audit-entry.severity-info { border-left-color: var(--accent); }
.audit-entry-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.audit-severity-badge {
  font-size: 0.7em; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px;
}
.audit-severity-badge.severity-critical { background: var(--red); color: white; }
.audit-severity-badge.severity-error { background: var(--red-dim); color: var(--red); }
.audit-severity-badge.severity-warn { background: var(--yellow-dim); color: var(--yellow); }
.audit-severity-badge.severity-info { background: var(--accent-dim); color: var(--accent); }
.audit-type-badge {
  font-size: 0.7em; font-weight: 600; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 0.3px;
  background: var(--surface-tertiary); color: var(--text-muted);
}
.audit-time { font-size: 0.8em; color: var(--text-muted); }
.audit-description { margin: 0; font-size: 0.9em; line-height: 1.5; color: var(--text-secondary); }
.text-error { color: var(--red); }

/* ═══════════════════════════════════════════════════
   V8 FIXES — Comprehensive evaluation remediation
   ═══════════════════════════════════════════════════ */

/* ── Global Portfolio Strip (visible on all screens) ── */
#globalPortfolioStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 16px;
  background: rgba(17,17,19,0.8);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: var(--topbar-height);
  z-index: 90;
}
#globalPortfolioValue {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--text);
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
}
#globalPortfolioChange {
  font-size: 14px;
  font-weight: 600;
}
#globalPortfolioSource {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── CRASH Banner Persistence ── */
.regime-acb.crash {
  display: flex !important;
  animation: crash-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--red-dim), rgba(255,0,0,0.15));
  border: 1px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 999;
}
.regime-acb.crash .acb-close-btn {
  display: none; /* Cannot dismiss CRASH banner */
}
@keyframes crash-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ── Jargon Tooltips ── */
.jargon-tip {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
  position: relative;
}
.jargon-tip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.75em;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── Ghost Trade 10s Visibility ── */
.ghost-trade-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: var(--bg-card);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  z-index: 500;
  min-width: 260px;
  max-width: 360px;
  box-shadow: var(--shadow);
  animation: ghost-trade-in 0.3s ease;
}
.ghost-trade-toast.fading {
  animation: ghost-trade-out 0.5s ease forwards;
}
@keyframes ghost-trade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ghost-trade-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-10px); }
}

/* ── High-Friction Live Switch Modal ── */
.live-switch-modal {
  text-align: center;
}
.live-switch-equity-at-risk {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--red);
  margin: 12px 0;
  padding: 10px;
  background: var(--red-dim);
  border-radius: var(--radius-xs);
  border: 1px solid var(--red);
}
.live-switch-confirm-input {
  width: 200px;
  margin: 12px auto;
  display: block;
  text-align: center;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  color: var(--text);
  padding: 10px;
  border-radius: var(--radius-xs);
}
.live-switch-confirm-input:focus {
  outline: none;
  border-color: var(--red);
}
.live-switch-countdown {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--red);
  margin: 12px 0;
}

/* ── Signal Conflict Badge ── */
.signal-conflict-badge {
  display: inline-block;
  background: var(--yellow-dim);
  color: var(--yellow);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Signal Staleness Highlight ── */
.signal-age.stale {
  color: var(--yellow) !important;
  font-weight: 600;
}

/* ── Scan Progress Bar ── */
.scan-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0;
}
.scan-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.scan-progress-label {
  font-size: 0.78em;
  color: var(--text-muted);
}

/* ═══════════ AUDIT TRAIL FILTER BAR ════════════════ */
.audit-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.audit-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.audit-filter-chip {
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.audit-filter-chip:hover { border-color: var(--border-light); }
.audit-filter-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-export-csv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-export-csv:hover { border-color: var(--accent); color: var(--accent); }
.audit-date-range {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.audit-date-chip {
  padding: 6px 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.audit-date-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════ TRAILING STOP PROGRESS BAR ════════════ */
.trailing-stop-bar {
  display: flex;
  align-items: center;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0 4px;
  background: var(--surface-tertiary);
}
.trailing-stop-zone {
  height: 100%;
  transition: flex 0.3s ease-out;
}
.trailing-stop-zone.loss { background: var(--color-loss); }
.trailing-stop-zone.profit { background: var(--color-profit); }
.trailing-stop-zone.remaining { background: var(--surface-border); }
.trailing-stop-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7em;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.trailing-stop-pct {
  text-align: center;
  font-size: 0.72em;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ═══════════ SIGNAL AGE STALENESS DOTS ════════════ */
.staleness-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.staleness-dot.fresh { background: var(--color-profit); }
.staleness-dot.aging { background: var(--color-warning); }
.staleness-dot.stale { background: var(--color-neutral); }
.staleness-dot.expired { background: var(--color-loss); }
.signal-age.expired {
  color: var(--color-loss);
  font-weight: 600;
  text-decoration: line-through;
}

/* ═══════════ PAPER MODE VISUAL DISTINCTION ═════════ */
.paper-mode-active .portfolio-value::before {
  content: "Paper: ";
  font-size: 0.4em;
  color: var(--mode-paper-text);
  -webkit-text-fill-color: var(--mode-paper-text);
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: top;
}
.paper-mode-active .portfolio-value {
  opacity: 0.85;
}
.paper-mode-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--mode-paper-bg);
  color: var(--mode-paper-text);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--surface-border);
}

/* ═══════════ SCREEN TITLE TYPOGRAPHY ═══════════════ */
.screen-title {
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--text-primary);
}

/* ═══════════ DISCLAIMER TEXT ════════════════════════ */
.disclaimer-text {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-bottom: 12px;
}
.disclaimer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-top: 14px;
}
.disclaimer-card p {
  font-size: var(--text-micro);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════ SKIP NAVIGATION (A11Y) ════════════════ */
.skip-nav {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-profit);
  color: #000;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  text-decoration: none;
}
.skip-nav:focus {
  top: 8px;
}

/* ═══════════ CONFIDENCE 3-SEGMENT BAR ══════════════ */
.confidence-segments {
  display: flex;
  gap: 2px;
  align-items: center;
}
.confidence-segment {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: var(--surface-tertiary);
}
.confidence-segment.filled.high { background: var(--color-profit); }
.confidence-segment.filled.medium { background: var(--color-warning); }
.confidence-segment.filled.low { background: var(--color-neutral); }

/* ═══════════ SIDEBAR KILL SWITCH ═══════════════════ */
.sidebar-kill-switch {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.sidebar-kill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  min-width: 40px;
  padding: 8px;
  background: rgba(255,71,87,0.08);
  border: 1px solid rgba(255,71,87,0.2);
  border-radius: var(--radius-btn);
  color: var(--red);
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition-smooth), background var(--transition-smooth);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.45;
}
.sidebar-kill-btn.has-positions {
  opacity: 1;
  animation: kill-pulse 2.5s ease-in-out infinite;
}
@keyframes kill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
  50%       { box-shadow: 0 0 0 6px rgba(255,71,87,0.25); }
}
.sidebar-kill-btn:hover { background: rgba(255,71,87,0.18); }
.sidebar-kill-label {
  display: none;
}
.sidebar:hover .sidebar-kill-label { display: inline; }

/* ═══════════ SIDEBAR DIVIDER ═══════════════════════ */
.sidebar-divider { height: 1px; background: var(--surface-border); margin: 6px 12px; opacity: 0.5; }

/* ═══════════════════════════════════════════════════
   WORLD-CLASS ALIGNMENT & RESPONSIVE FIXES
   Cross-browser · Mobile-first · WCAG 2.5.5 compliant
   ═══════════════════════════════════════════════════ */

/* ── Touch targets: WCAG 2.5.5 minimum 44×44px ── */
.btn-back {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.mobile-menu-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.pos-tab { min-height: 44px; }

/* ── Key metrics: 2-column grid on narrow viewports ── */
@media (max-width: 580px) {
  .key-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .km-value { font-size: 1.55em; }
}

/* ── 390px micro-breakpoint for small phones (iPhone SE/mini) ── */
@media (max-width: 390px) {
  .screen { padding-left: 12px; padding-right: 12px; }
  .portfolio-value { font-size: 28px !important; letter-spacing: -1.5px; }
  #globalPortfolioValue { font-size: 26px !important; letter-spacing: -1px; }
  .pos-card-symbol { font-size: 17px; }
  .key-metrics { grid-template-columns: repeat(2, 1fr); }
  .pos-detail-grid { grid-template-columns: 1fr; }
  .signal-detail-levels,
  .suggestion-levels,
  .rr-stats { grid-template-columns: repeat(2, 1fr); }
  .broker-card-symbol { max-width: 100px; }
}

/* ── Safe-area corrected fixed/absolute elements on mobile ── */
@media (max-width: 767px) {
  /* Legal disclaimer: exactly above the tab bar, safe-area included */
  .legal-disclaimer {
    bottom: calc(var(--tab-height) + var(--safe-bottom));
  }

  /* Ghost trade toast: clear tab bar and legal disclaimer */
  .ghost-trade-toast {
    bottom: calc(var(--tab-height) + var(--safe-bottom) + 16px);
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }

  /* Onboarding tooltip: clear tab bar */
  .onboarding-tooltip {
    bottom: calc(var(--tab-height) + var(--safe-bottom) + 16px);
    width: calc(100vw - 40px);
    max-width: 340px;
  }

  /* Screen content: clears tab bar + legal disclaimer (~36px tall) */
  .screen {
    padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + 52px);
  }

  /* Confirm modal: full width sheet on mobile */
  .confirm-card {
    width: 100%;
    max-width: 100%;
  }

  /* Touch targets on mobile */
  .order-tf-btn { min-height: 40px; padding: 8px 12px; }
  .analytics-mode-btn { min-height: 40px; }
  .mode-btn { min-height: 40px; }
  .qty-mode { min-height: 40px; padding: 9px 16px; }
  .btn-scan-markets { min-height: 52px; }
  .tab { min-height: calc(var(--tab-height) - 4px); }

  /* Input font-size 16px minimum prevents iOS auto-zoom on focus */
  .trade-search,
  .rh-qty-input,
  .form-input { font-size: 16px; }
}

/* ── Signal grid: single column on very narrow screens ── */
@media (max-width: 480px) {
  .signal-feed-grid { grid-template-columns: 1fr; }
  .signals-list { grid-template-columns: 1fr; }
  .suggestion-levels { grid-template-columns: repeat(2, 1fr); }
  .signal-detail-levels { grid-template-columns: repeat(2, 1fr); }
  .dual-account-grid { grid-template-columns: 1fr; }
  .screen-header-row .btn-scan { width: 100%; justify-content: center; }
  .status-strip { padding: 10px 12px; gap: 8px; }
  .strip-risk { min-width: 0; width: 100%; }
}

/* ── Global portfolio strip: horizontal scroll on mobile ── */
@media (max-width: 767px) {
  #globalPortfolioStrip {
    gap: 8px;
    padding: 4px 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  #globalPortfolioStrip::-webkit-scrollbar { display: none; }
}

/* ── Indices strip: scrollable on mid-range screens ── */
@media (max-width: 1200px) and (min-width: 1024px) {
  .indices-strip {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .indices-strip::-webkit-scrollbar { display: none; }
}

/* ── Stock detail right panel: remove sticky below small tablet ── */
@media (max-width: 960px) {
  .stock-rh-right { position: static; }
}

/* ── Trade analysis sticky: correct top offset ── */
@media (min-width: 1024px) {
  .trade-analysis { top: calc(var(--topbar-height) + 16px); }
  .stock-rh-right { top: calc(var(--topbar-height) + 16px); }
}

/* ── Jargon tooltip: prevent overflow on mobile ── */
@media (max-width: 767px) {
  .jargon-tip:hover::after {
    left: 0;
    right: 0;
    transform: none;
    max-width: calc(100vw - 32px);
  }
}

/* ── Disable hover transforms on touch devices ── */
@media (hover: none) {
  .signal-card:hover,
  .pos-mini-card-v:hover,
  .position-card:hover,
  .key-metric:hover { transform: none; box-shadow: var(--shadow-card); }
  .btn-scan-markets:hover { transform: none; }
  .pos-mini-card-v:hover { transform: none; }
}

/* ── Smooth scroll: only when user prefers no reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════
   APP LOGS SCREEN
   ══════════════════════════════════════════════ */

.screen-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.screen-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 2px 0 0;
}

.logs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}

.logs-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.logs-filter-chip {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.logs-filter-chip:hover {
  background: var(--bg-hover, #21262d);
  color: var(--text-primary);
}

.logs-filter-chip.active {
  background: var(--accent, #58a6ff);
  color: #fff;
  border-color: transparent;
}

.logs-filter-chip.errors-chip.has-errors {
  background: var(--red, #f85149);
  color: #fff;
  border-color: transparent;
}

.logs-search-wrap {
  position: relative;
}

.logs-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.logs-search {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px 6px 30px;
  border-radius: 8px;
  font-size: 12px;
  width: 220px;
  outline: none;
  font-family: inherit;
}

.logs-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
  outline: none;
}

/* ── Log list ── */
.logs-list {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-subtle, #21262d);
  transition: background 0.1s;
}

.log-entry:last-child { border-bottom: none; }

.log-entry:hover { background: var(--bg-hover, rgba(255,255,255,0.03)); }

.log-entry.log-entry--error { background: rgba(248, 81, 73, 0.04); }

/* ── Level badges ── */
.log-level {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  margin-top: 1px;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.log-level--info    { color: var(--green, #3fb950); background: rgba(63,185,80,0.10); }
.log-level--warn    { color: var(--yellow, #d29922); background: rgba(210,153,34,0.12); }
.log-level--error   { color: var(--red, #f85149); background: rgba(248,81,73,0.12); }
.log-level--critical { color: #fff; background: var(--red, #f85149); }

/* ── Timestamp ── */
.log-time {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 2px;
}

/* ── Category badges ── */
.log-category {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-card, #21262d);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.log-category--scan   { color: var(--accent, #58a6ff); }
.log-category--order  { color: var(--green, #3fb950); }
.log-category--risk   { color: var(--yellow, #d29922); }
.log-category--system { color: var(--text-secondary); }
.log-category--audit  { color: var(--text-muted); }

/* ── Ticker ── */
.log-ticker {
  color: var(--red, #ff7b72);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
}

.log-ticker--empty { color: var(--text-muted); }

/* ── Message ── */
.log-message {
  color: var(--text-primary);
  flex: 1;
  word-break: break-word;
  line-height: 1.5;
}

/* ── Diagnostic log entries ── */
.log-entry--diagnostic {
  background: rgba(88, 166, 255, 0.03);
  border-left: 3px solid rgba(88, 166, 255, 0.3);
  padding-left: 13px;
}
.log-entry--diagnostic:hover {
  background: rgba(88, 166, 255, 0.06);
}
.log-message--diagnostic {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.diag-ticker {
  color: var(--accent, #58a6ff);
  font-weight: 700;
}
.diag-conf {
  color: var(--yellow, #d29922);
  font-weight: 600;
  font-size: 11px;
  background: rgba(210, 153, 34, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}
.diag-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diag-sep {
  color: var(--text-muted);
  opacity: 0.5;
}
.diag-arrow {
  color: var(--accent, #58a6ff);
  font-weight: 600;
}

/* ── Live indicator ── */
.logs-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.logs-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #3fb950);
  display: inline-block;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(63,185,80,0); }
}

/* ═══════════════════════════════════════════════════
   SCAN DIAGNOSTICS PANEL — Signal Feed empty state
   ═══════════════════════════════════════════════════ */
.scan-diag-panel {
  text-align: left;
  max-width: 650px;
  margin: 1.2rem auto;
  font-size: 0.85em;
}
.diag-section {
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--card-bg, #161b22);
  border: 1px solid var(--border-subtle, #21262d);
  border-radius: 8px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.diag-header {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text-primary);
  background: rgba(88, 166, 255, 0.06);
  border-color: rgba(88, 166, 255, 0.15);
}
.diag-warning {
  background: rgba(210, 153, 34, 0.06);
  border-color: rgba(210, 153, 34, 0.15);
  color: var(--yellow, #d29922);
}
.diag-section-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 0.95em;
}

/* Near-miss signals */
.diag-nearmiss { border-color: rgba(210, 153, 34, 0.15); }
.diag-nearmiss .diag-section-title { color: var(--yellow, #d29922); }
.diag-nearmiss-list { display: flex; flex-direction: column; gap: 4px; }
.diag-nm-row {
  display: grid;
  grid-template-columns: 55px 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.diag-nm-ticker {
  font-weight: 700;
  color: var(--accent, #58a6ff);
  font-size: 0.95em;
}
.diag-nm-conf {
  font-weight: 600;
  color: var(--yellow, #d29922);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.diag-nm-bar-bg {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.diag-nm-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow, #d29922), rgba(210,153,34,0.4));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.diag-nm-strat {
  font-size: 0.8em;
  color: var(--text-muted);
  white-space: nowrap;
}
.diag-nm-more { color: var(--text-muted); font-style: italic; grid-column: 1 / -1; }

/* Top blockers */
.diag-blockers { border-color: rgba(248, 81, 73, 0.15); }
.diag-blockers .diag-section-title { color: var(--red, #f85149); }
.diag-blocker-list { display: flex; flex-direction: column; gap: 4px; }
.diag-blocker-row {
  display: grid;
  grid-template-columns: 1fr 120px 40px;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.diag-blocker-name {
  font-size: 0.9em;
  color: var(--text-secondary);
}
.diag-blocker-bar-bg {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.diag-blocker-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--red, #f85149), rgba(248,81,73,0.3));
  border-radius: 4px;
}
.diag-blocker-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
  font-size: 0.85em;
}

/* Per-strategy breakdown */
.diag-strategies { border-color: rgba(88, 166, 255, 0.12); }
.diag-strategies .diag-section-title { color: var(--accent, #58a6ff); }
.diag-strat-list { display: flex; flex-direction: column; gap: 3px; }
.diag-strat-row {
  display: grid;
  grid-template-columns: 1fr 45px 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.88em;
}
.diag-strat-buy { background: rgba(63, 185, 80, 0.04); border-left: 2px solid rgba(63,185,80,0.3); }
.diag-strat-sell { background: rgba(248, 81, 73, 0.04); border-left: 2px solid rgba(248,81,73,0.3); }
.diag-strat-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.92em;
}
.diag-strat-count {
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.diag-strat-reason {
  color: var(--text-muted);
  font-size: 0.88em;
}
.logs-live-label { color: var(--green, #3fb950); }
.logs-live-interval { color: var(--text-muted); }

/* ── Footer ── */
.logs-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 0 0 8px 8px;
}

.logs-footer-errors { color: var(--red, #f85149); }
.logs-footer-warns  { color: var(--yellow, #d29922); }

/* ── Error dot on nav items ── */
.logs-error-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #f85149);
  position: absolute;
  top: 6px;
  right: 6px;
}

/* ── Responsive: search full-width on narrow screens ── */
@media (max-width: 600px) {
  .logs-toolbar { flex-direction: column; align-items: flex-start; }
  .logs-search  { width: 100%; }
  .logs-search-wrap { width: 100%; }
  .risk-slider-group { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   UI OVERHAUL — Analytics Stats Row, Empty States,
   Typography, FAB, Data Values
   ═══════════════════════════════════════════════════ */

/* ── Analytics Stats Row ── */
.analytics-stats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 24px; }
.analytics-stat-card { background: var(--surface-secondary); border: 1px solid var(--surface-border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.asc-label { font-size: 0.62em; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; }
.asc-value { font-size: 1.25em; font-weight: 800; color: var(--text); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.asc-green { color: var(--green); }
.asc-red { color: var(--red); }
@media (max-width: 768px) { .analytics-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .analytics-stats-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Empty State Inline (improved) ── */
.empty-state-inline { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--text-tertiary); text-align: center; }
.empty-state-inline svg { opacity: 0.4; margin-bottom: 4px; }
.empty-state-inline p { font-size: 0.95em; font-weight: 600; color: var(--text-secondary); margin: 0; }
.empty-state-inline span { font-size: 0.8em; color: var(--text-tertiary); max-width: 260px; line-height: 1.5; }

/* ── Typography Hierarchy ── */
.screen-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.3px; }
.home-section-header h2 { font-size: 1rem; font-weight: 700; color: var(--text); }
.screen-subtitle { font-size: 0.85em; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.data-value { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.data-label { font-size: 0.68em; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; }

/* ═══════════ READINESS GATES (P1-2) ═════════════════ */
.readiness-gates-section { margin-top: 24px; }
.readiness-gates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.readiness-gate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-secondary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}
.readiness-gate-row.gate-pass { border-left: 3px solid var(--color-profit); }
.readiness-gate-row.gate-fail { border-left: 3px solid var(--color-loss); }
.readiness-gate-row.gate-warn { border-left: 3px solid var(--yellow); }
.gate-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.gate-icon.pass { background: rgba(0,210,106,0.15); color: var(--color-profit); }
.gate-icon.fail { background: rgba(255,71,87,0.15); color: var(--color-loss); }
.gate-icon.warn { background: rgba(255,170,44,0.15); color: var(--yellow); }
.gate-name {
  flex: 1;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-primary);
}
.gate-detail {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}
.gate-reason {
  font-size: var(--text-caption);
  color: var(--color-loss);
  margin-left: auto;
  max-width: 200px;
  text-align: right;
}

/* ── Mobile FAB (Floating Action Button) for Scan ── */
.fab-scan { position: fixed; bottom: calc(var(--tab-height, 60px) + 16px + var(--safe-bottom, 0px)); right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #0C0B09; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(245,158,11,0.4); display: none; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; z-index: 90; }
.fab-scan:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(245,158,11,0.5); }
.fab-scan:active { transform: scale(0.95); }
@media (max-width: 768px) { .fab-scan { display: flex; } }


/* ── Risk Rows (added 2026-04-20 with closed-positions feature) ── */
.risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-border);
}
.risk-row:last-child { border-bottom: none; }
.risk-label { font-weight: 600; }
.risk-value {
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.risk-value.green { color: var(--green); }
.risk-value.red { color: var(--red); }

/* ── Closed Positions table (Positions screen → Closed tab, added 2026-04-20) ── */
.closed-positions-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.cp-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 12px 16px;
  background: var(--surface-secondary, var(--bg-card));
  border: 1px solid var(--border, var(--surface-border));
  border-radius: 10px;
}
.cp-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
}
.cp-summary-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.cp-summary-value {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text-primary, var(--text));
  font-variant-numeric: tabular-nums;
}
.cp-summary-total .cp-summary-value { font-size: 1.25em; }
.closed-positions-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border, var(--surface-border));
  border-radius: 10px;
  background: var(--surface-secondary, var(--bg-card));
}
.closed-positions-table {
  width: 100%;
  border-collapse: collapse;
}
.closed-positions-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-secondary, var(--bg-card));
  text-align: left;
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, var(--surface-border));
  white-space: nowrap;
}
.closed-positions-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, var(--surface-border));
  color: var(--text-primary, var(--text));
  white-space: nowrap;
}
.closed-positions-table tbody tr:last-child td { border-bottom: none; }
.closed-positions-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.closed-positions-table .cp-num { text-align: right; font-variant-numeric: tabular-nums; }
.closed-positions-table .cp-date { color: var(--text-secondary, var(--text-muted)); }
.closed-positions-table .cp-time {
  font-size: 0.78em;
  color: var(--text-muted);
}
.closed-positions-table .cp-sym { font-weight: 700; }
.closed-positions-table .cp-tag {
  display: inline-block;
  font-size: 0.7em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-left: 4px;
}
.closed-positions-table .cp-strat,
.closed-positions-table .cp-reason { color: var(--text-secondary, var(--text-muted)); font-size: 0.92em; }
.closed-positions-table .cp-side-buy { color: var(--green); font-weight: 600; }
.closed-positions-table .cp-side-sell { color: var(--red); font-weight: 600; }
.closed-positions-table .cp-pos { color: var(--green); font-weight: 600; }
.closed-positions-table .cp-neg { color: var(--red); font-weight: 600; }
.closed-positions-table .cp-flat { color: var(--text-muted); }
.closed-positions-table tfoot td {
  padding: 12px;
  background: var(--surface-primary, var(--bg));
  border-top: 2px solid var(--border, var(--surface-border));
  font-weight: 700;
}
.closed-positions-table .cp-foot-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78em;
  color: var(--text-secondary, var(--text-muted));
}
.closed-positions-table .cp-foot-total { font-size: 1.05em; }
@media (max-width: 720px) {
  .closed-positions-table { font-size: 0.8em; }
  .closed-positions-table thead th,
  .closed-positions-table tbody td { padding: 8px 9px; }
  .cp-summary-bar { gap: 10px 16px; padding: 10px 12px; }
  .cp-summary-value { font-size: 1em; }
}