/* ORB Trading Dashboard V4 — Post-Impeccable Audit */

/* Fonts loaded via <link> in HTML — no render-blocking @import */

:root {
  /* Deep tinted palette — blue-black, explicit hex (no rgba smell) */
  --bg-abyss: #080b14;
  --bg-deep: #0c0f1a;
  --bg-surface: #111625;
  --bg-elevated: #171c2e;
  --bg-hover: #1c2238;
  --bg-row-alt: #0e1220;

  /* Borders — explicit tinted colors, not rgba */
  --border: #161b2c;
  --border-strong: #1e2440;
  --border-accent: #1f2a50;

  /* Text — warm off-white hierarchy (WCAG AA fixed) */
  --text-primary: #e8eaf0;
  --text-secondary: #9ba3be;
  --text-muted: #7a82a0;
  --text-faint: #5a6180;

  /* Semantic — refined, not neon */
  --profit: #3dd68c;
  --profit-soft: #2a9e66;
  --profit-dim: #0d1f17;
  --profit-bg: #0b1a14;
  --loss: #ef6b6b;
  --loss-soft: #c45454;
  --loss-dim: #1f0f0f;
  --loss-bg: #1a0d0d;
  --accent: #638cff;
  --accent-soft: #4d6fd4;
  --accent-dim: #101828;
  --accent-bg: #0d1420;
  --warning: #f0b740;
  --warning-dim: #1c1708;

  /* Spacing — strict 4pt grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Type scale — minimum 0.75rem (11.25px) */
  --text-xs: 0.75rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-lg: 1.12rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-hero: clamp(2rem, 1.5rem + 1.5vw, 2.8rem);

  /* Fonts — Outfit replaces Inter (audit H1) */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
  --font-sans: 'Outfit', -apple-system, system-ui, sans-serif;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;

  /* Easing — expo out only, no spring/bounce (audit M2) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ═══ LIGHT MODE ═══ */
[data-theme="light"] {
  --bg-abyss: #f5f6fa;
  --bg-deep: #ebedf5;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f1f6;
  --bg-hover: #e4e6ef;
  --bg-row-alt: #f8f9fc;

  --border: #d8dbe6;
  --border-strong: #c4c8d8;
  --border-accent: #b0b6cc;

  --text-primary: #1a1d2e;
  --text-secondary: #4a5068;
  --text-muted: #6b7190;
  --text-faint: #9096ad;

  --profit: #18a058;
  --profit-soft: #15884a;
  --profit-dim: #e8f5ee;
  --profit-bg: #d4eddd;
  --loss: #d03050;
  --loss-soft: #b82845;
  --loss-dim: #fce8ec;
  --loss-bg: #f5d0d8;
  --accent: #3366cc;
  --accent-soft: #2952a3;
  --accent-dim: #e8eef8;
  --accent-bg: #d4dff0;
  --warning: #c08a10;
  --warning-dim: #fdf4e0;
}

[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg-abyss);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Tabular nums for data only */
.market-price, .market-change, .or-value,
.position-pnl, .trade-time, .trade-entry, .trade-result, .pnl-pill,
.header-stat-value, .stat-item-value, .breakout-dist-value,
.history-date-pnl, .history-date-wl {
  font-variant-numeric: tabular-nums;
}

/* ═══ FOCUS ═══ */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ═══ SKIP LINK ═══ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 999;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══ HEADER — solid bg, no glassmorphism (audit H2) ═══ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  padding-left: max(var(--sp-6), env(safe-area-inset-left));
  padding-right: max(var(--sp-6), env(safe-area-inset-right));
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.logo {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.12em;
  color: var(--text-primary);
}

.logo-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--profit);
  animation: pulse 2.5s ease-in-out infinite;
  margin-left: var(--sp-1);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pulse-dot.offline {
  background: var(--text-muted);
  animation: none;
}

.header-time {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.time-display {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.date-display {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.header-stat { text-align: right; }

.header-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border-strong);
}

.header-stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 600;
}

.header-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.header-stat.compact .header-stat-value {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.header-stat-value.profit { color: var(--profit); }
.header-stat-value.loss { color: var(--loss); }
.header-stat-value.neutral { color: var(--text-secondary); }

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-size: 16px;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-hover);
}

/* Status Icons (accessibility: not color-only) */
.status-icon { font-weight: 700; font-size: 0.85em; margin-right: 2px; }
.status-icon.ok { color: var(--profit); }
.status-icon.ok::before { content: "✓"; }
.status-icon.error { color: var(--loss); }
.status-icon.error::before { content: "✕"; }
.status-icon.warn { color: var(--warning); }
.status-icon.warn::before { content: "⚠"; }

/* Stale warning badge */
.stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: 600;
}
.stale-badge.ok { background: var(--profit-dim); color: var(--profit); }
.stale-badge.warn { background: var(--warning-dim); color: var(--warning); border: 1px solid var(--warning); }
.stale-badge.critical { background: var(--loss-dim); color: var(--loss); border: 1px solid var(--loss); }

.sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.sound-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.sound-toggle.active {
  border-color: var(--profit-soft);
  color: var(--profit);
  background: var(--profit-dim);
}

/* ═══ ERROR BANNER ═══ */
.error-banner {
  padding: var(--sp-2) var(--sp-6);
  background: var(--loss-dim);
  color: var(--loss);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.error-banner[hidden] { display: none; }
.error-retry {
  background: none;
  border: 1px solid var(--loss-soft);
  color: var(--loss);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
}
.error-retry:hover { background: var(--loss-bg); }

/* ═══ TABS ═══ */
.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 0 var(--sp-6);
}

.tabs-inner { display: flex; gap: 0; }

.tabs-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tab-icon {
  font-size: 0.7em;
  opacity: 0.6;
}

.tab:hover { color: var(--text-secondary); }
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.tab.active .tab-icon { opacity: 1; color: var(--accent); }

/* Tab transitions — opacity only (audit M5) */
.tab-content {
  display: none;
  opacity: 0;
}
.tab-content.active {
  display: block;
  opacity: 1;
  animation: tabFadeIn 0.15s var(--ease-out-quart);
}
@keyframes tabFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ MARKET GRID ═══ */
.markets {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.market-lane {
  background: var(--bg-deep);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}

.market-lane:hover { background: var(--bg-surface); }

.market-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.market-name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.market-flag { font-size: 1.2rem; }

.market-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.market-contract {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

/* Price + change */
.market-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.market-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.market-change {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.market-change.up { color: var(--profit); background: var(--profit-dim); }
.market-change.down { color: var(--loss); background: var(--loss-dim); }

/* Phase badges — sans-serif for labels (audit monospace overuse) */
.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  width: fit-content;
}

.phase-badge.pre_market { background: var(--bg-elevated); color: var(--text-muted); }
.phase-badge.building_or { background: var(--warning-dim); color: var(--warning); }
.phase-badge.waiting { background: var(--accent-dim); color: var(--accent); }
.phase-badge.position_open { background: var(--profit-dim); color: var(--profit); }
.phase-badge.position_open.short { background: var(--loss-dim); color: var(--loss); }
.phase-badge.max_trades { background: var(--bg-elevated); color: var(--text-secondary); }
.phase-badge.closed { background: var(--bg-elevated); color: var(--text-faint); }

/* OR Section */
.or-section {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.or-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

.or-levels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
}

.or-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.or-value-label {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Range Bar */
.range-bar-container { margin: var(--sp-3) 0; }

.range-bar {
  height: 4px;
  background: var(--bg-hover);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

.range-bar-marker {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 16px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: left 0.5s var(--ease-out);
}

.range-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-1);
}

.range-bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Position */
.position-section { flex: 1; display: flex; flex-direction: column; }

.position-dir {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.position-dir.long { color: var(--profit); }
.position-dir.short { color: var(--loss); }

.position-detail {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.position-detail-label { color: var(--text-muted); font-family: var(--font-sans); }

.position-pnl {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}

.position-pnl.profit { color: var(--profit); background: var(--profit-dim); }
.position-pnl.loss { color: var(--loss); background: var(--loss-dim); }

/* Waiting / Building */
.waiting-info { flex: 1; }

.breakout-dist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.breakout-dist:last-child { border-bottom: none; }

.breakout-dir {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.breakout-dist-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.or-progress { margin-top: var(--sp-3); }

.or-progress-bar {
  height: 3px;
  background: var(--bg-hover);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--sp-2);
}

/* Progress fill uses scaleX instead of width (audit M6) */
.or-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--warning);
  border-radius: 2px;
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.or-progress-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--warning);
}

/* Empty states */
.empty-state {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--sp-2) 0;
  line-height: 1.6;
}

.empty-state-title {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.empty-state-detail {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ═══ TRADE LOG ═══ */
.trade-log {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.trade-log-header-bar {
  padding: var(--sp-3) var(--sp-6) 0;
}

.trade-log-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.trade-log-columns {
  display: grid;
  grid-template-columns: 54px 28px 58px 52px 100px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-6) var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}

.trade-log-list {
  list-style: none;
  padding: 0 var(--sp-6);
}

.trade-log-item {
  display: grid;
  grid-template-columns: 54px 28px 58px 52px 100px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.trade-log-item:hover { background: var(--bg-elevated); margin: 0 calc(-1 * var(--sp-6)); padding: var(--sp-2) var(--sp-6); }
.trade-log-item:last-child { border-bottom: none; }

.trade-time { color: var(--text-muted); }
.trade-flag { font-size: 0.85rem; }
.trade-index { color: var(--text-secondary); }
.trade-dir { font-weight: 700; }
.trade-dir.long { color: var(--profit); }
.trade-dir.short { color: var(--loss); }
.trade-entry { color: var(--text-secondary); }
.trade-result { font-weight: 600; }
.trade-result.profit { color: var(--profit); }
.trade-result.loss { color: var(--loss); }
.trade-result.open { color: var(--accent); }

/* ═══ CHARTS TAB ═══ */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.chart-panel { background: var(--bg-deep); }

.chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.chart-panel-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.chart-flag { font-size: 1rem; }

.chart-interval {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

.chart-container { height: 300px; width: 100%; }

.chart-days-group { display: flex; gap: 2px; }

/* Chart day buttons — 44px min touch target (audit H6) */
.chart-day-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-3);
  min-height: 32px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  position: relative;
}

/* Expand tap target to 44px via pseudo-element */
.chart-day-btn::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.chart-day-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.chart-day-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent-soft);
  color: var(--accent);
}

/* ═══ EQUITY TAB ═══ */
.equity-header { padding: var(--sp-6) var(--sp-6) 0; }

.equity-stats {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.stat-item-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.stat-item-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* Stat color classes instead of inline styles (audit M11) */
.stat-profit { color: var(--profit); }
.stat-loss { color: var(--loss); }
.stat-neutral { color: var(--text-primary); }

.stat-item.hero .stat-item-value {
  font-size: var(--text-hero);
  line-height: 1.1;
}

.equity-chart-section {
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.equity-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.equity-bottom-row .chart-panel { background: var(--bg-deep); }

/* ═══ HISTORY TAB ═══ */
.history-container {
  padding: var(--sp-6);
  max-width: 1200px;
}

.history-summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.history-date-group { margin-bottom: var(--sp-4); }

/* History date header — background tint instead of left border (audit H8) */
.history-date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  margin-bottom: 1px;
  cursor: pointer;
  transition: background 0.1s;
}

.history-date-header:hover { background: var(--bg-elevated); }
.history-date-header.profit-day { background: var(--profit-dim); }
.history-date-header.profit-day:hover { background: var(--profit-bg); }
.history-date-header.loss-day { background: var(--loss-dim); }
.history-date-header.loss-day:hover { background: var(--loss-bg); }

.history-date-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.history-date-weekday {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: var(--sp-2);
  font-weight: 400;
}

.history-date-stats {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}

.history-date-pnl {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
}

.history-date-wl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* P&L pill */
.pnl-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}

.pnl-pill.win { background: var(--profit-dim); color: var(--profit); }
.pnl-pill.loss { background: var(--loss-dim); color: var(--loss); }
.pnl-pill.eod { background: var(--bg-elevated); color: var(--text-secondary); }

/* History trade rows */
.trade-exit { color: var(--text-secondary); }
.history-trade-row {
  display: grid;
  grid-template-columns: 50px 28px 56px 52px 90px 90px 1fr;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  align-items: center;
  border-bottom: 1px solid var(--border);
  line-height: 1.8;
  transition: background 0.1s;
}

.history-trade-row:hover { background: var(--bg-elevated); }
.history-trade-row:last-child { border-bottom: none; }
.history-trade-row .trade-dir { min-width: 48px; }

.history-col-header {
  display: grid;
  grid-template-columns: 50px 28px 56px 52px 90px 90px 1fr;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}

/* ═══ FOOTER ═══ */
.footer {
  padding: var(--sp-3) var(--sp-6);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  background: var(--bg-deep);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: 1fr; }
  .equity-bottom-row { grid-template-columns: 1fr; }
  .analytics-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .markets { grid-template-columns: 1fr; }
  .market-lane { min-height: auto; padding: var(--sp-4); }

  .header {
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-2) var(--sp-4);
  }
  .header-right { gap: var(--sp-3); width: 100%; }
  .header-stat-divider { height: 20px; }

  .tabs { padding: 0 var(--sp-3); }
  .tabs-hint { display: none; }
  .tab { padding: var(--sp-3) var(--sp-3); font-size: var(--text-xs); }
  .tab-icon { display: none; }

  .equity-stats { gap: var(--sp-4); }
  .stat-item.hero .stat-item-value { font-size: var(--text-xl); }

  .trade-log-columns,
  .trade-log-item { grid-template-columns: 44px 24px 50px 44px 1fr; }
  .trade-log-columns .th-entry { display: none; }
  .trade-entry { display: none; }

  .history-trade-row,
  .history-col-header { grid-template-columns: 44px 24px 50px 44px 1fr; }
  .history-col-header .th-entry { display: none; }
  .history-trade-row .trade-entry { display: none; }

  .footer { flex-direction: column; gap: var(--sp-1); }
  .history-container { padding: var(--sp-3); }
  .analytics-container { padding: var(--sp-3); }
  .system-container { padding: var(--sp-3); }
  .health-grid { grid-template-columns: 1fr; }
  .control-grid { flex-direction: column; }
  .timeline-section { padding: var(--sp-2) var(--sp-3); }
  .analytics-metrics { gap: var(--sp-4); }
  .risk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .header-time { flex-direction: column; gap: 0; }
  .date-display { font-size: var(--text-xs); }
  .market-price { font-size: var(--text-lg); }
  .header-stat-value { font-size: var(--text-base); }
  .header-stat.compact { display: none; }
}

/* ═══ ANIMATIONS ═══ */
/* Flash uses pseudo-element with opacity (audit M5) */
.market-lane { position: relative; }
.market-lane::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.flash-green::after { background: var(--profit-dim); animation: flashFade 0.6s var(--ease-out) forwards; }
.flash-red::after { background: var(--loss-dim); animation: flashFade 0.6s var(--ease-out) forwards; }
@keyframes flashFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Toast — no left-border accent (audit H8) */
.toast {
  position: fixed;
  top: 70px;
  right: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  z-index: 200;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}

.toast.show { transform: translateX(0); opacity: 1; }
.toast.hiding { transform: translateX(120%); opacity: 0; }
.toast.profit-toast { background: var(--profit-dim); border-color: var(--profit-soft); }
.toast.loss-toast { background: var(--loss-dim); border-color: var(--loss-soft); }

/* ═══ SECTION TITLE (reusable) ═══ */
.section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

/* ═══ SESSION TIMELINE (Live tab) ═══ */
.timeline-section {
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.timeline-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.timeline-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.timeline-tracks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.timeline-track {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.timeline-track-label {
  min-width: 52px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
}
.timeline-bar {
  flex: 1;
  height: 20px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.timeline-segment {
  position: absolute;
  top: 0;
  height: 100%;
}
.timeline-segment.pre_market { background: var(--bg-hover); }
.timeline-segment.building_or { background: var(--warning-dim); }
.timeline-segment.waiting { background: var(--accent-dim); }
.timeline-segment.position_long { background: var(--profit-dim); }
.timeline-segment.position_short { background: var(--loss-dim); }
.timeline-segment.closed { background: var(--bg-deep); }
.timeline-segment.max_trades { background: var(--bg-hover); }

.timeline-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: default;
}
.timeline-marker.entry { background: var(--accent); }
.timeline-marker.exit-profit { background: var(--profit); }
.timeline-marker.exit-loss { background: var(--loss); }
.timeline-marker.or-complete { background: var(--warning); }

.timeline-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* Time markers along the bottom */
.timeline-time-axis {
  display: flex;
  justify-content: space-between;
  padding-left: calc(52px + var(--sp-3));
  margin-top: var(--sp-1);
}
.timeline-time-mark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ═══ SYSTEM TAB ═══ */
.system-container {
  padding: var(--sp-6);
  max-width: 1000px;
}
.system-section {
  margin-bottom: var(--sp-8);
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.health-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.health-item-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.health-item-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ok { background: var(--profit); }
.status-dot.warn { background: var(--warning); }
.status-dot.error { background: var(--loss); }

.age-ok { color: var(--profit); }
.age-warn { color: var(--warning); }
.age-critical { color: var(--loss); }

.log-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-4);
  overflow: hidden;
}
.log-box-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.log-box-content {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: var(--sp-3);
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.7;
  margin: 0;
}

/* Kill Switch Controls */
.control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-start;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.control-group-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.kill-btn {
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kill-btn.global {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--text-base);
}
.kill-btn.active {
  background: var(--profit-dim);
  color: var(--profit);
  border-color: var(--profit-soft);
}
.kill-btn.active:hover {
  background: var(--profit-bg);
}
.kill-btn.paused {
  background: var(--loss-dim);
  color: var(--loss);
  border-color: var(--loss-soft);
}
.kill-btn.paused:hover {
  background: var(--loss-bg);
}
.market-toggles {
  display: flex;
  gap: var(--sp-2);
}
.limit-control {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.limit-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-xs);
  width: 100px;
  min-height: 44px;
}
.limit-input:focus {
  border-color: var(--accent-soft);
  outline: none;
}
.limit-set-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s;
}
.limit-set-btn:hover { background: var(--accent-bg); }

/* ═══ ANALYTICS TAB ═══ */
.analytics-container {
  padding: var(--sp-6);
  max-width: 1200px;
}
.analytics-metrics {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}
.analytics-section {
  margin-bottom: var(--sp-6);
}
.analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.analytics-half {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: var(--sp-4);
}
.analytics-half-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.analytics-half .stat-item-value {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-2);
}
.analytics-half .stat-item-label {
  margin-bottom: var(--sp-1);
}

/* Analytics Table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.analytics-table th {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.analytics-table th.right, .analytics-table td.right { text-align: right; }
.analytics-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.analytics-table tr:last-child td { border-bottom: none; }
.analytics-table tr:hover td { background: var(--bg-elevated); }

/* Bar Chart Rows (CSS bars for time analysis) */
.bar-chart-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
  height: 24px;
}
.bar-chart-label {
  min-width: 28px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}
.bar-chart-track {
  flex: 1;
  height: 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.bar-chart-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  min-width: 2px;
  transition: width 0.3s var(--ease-out-quart);
}
.bar-chart-fill.positive { background: var(--profit-soft); }
.bar-chart-fill.negative { background: var(--loss-soft); }
.bar-chart-value {
  min-width: 64px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Drawdown Gauge */
.drawdown-gauge {
  margin: var(--sp-3) 0 var(--sp-1);
}
.drawdown-gauge-bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.drawdown-gauge-fill {
  height: 100%;
  background: var(--loss-soft);
  border-radius: var(--radius-xs);
  transition: width 0.3s var(--ease-out-quart);
}
.drawdown-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Risk Grid */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.risk-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}

/* Streak Badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.streak-badge.win { background: var(--profit-dim); color: var(--profit); }
.streak-badge.loss { background: var(--loss-dim); color: var(--loss); }

/* Anomaly Flag */
.anomaly-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.anomaly-item:last-child { border-bottom: none; }
.anomaly-flag {
  background: var(--warning-dim);
  color: var(--warning);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.anomaly-normal {
  color: var(--text-faint);
  font-size: var(--text-xs);
}

/* ═══ REDUCED MOTION (audit C1) ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pulse-dot { animation: none; opacity: 1; }
  .or-progress-fill { transition: none; }
  .range-bar-marker { transition: none; }
  .bar-chart-fill, .drawdown-gauge-fill { transition: none; }
}

/* ═══ CALENDAR HEATMAP ═══ */
.cal-grid { margin-top: var(--sp-3); }
.cal-labels {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); text-align: center;
}
.cal-weeks { display: flex; flex-direction: column; gap: 2px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1.6;
  min-height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: default;
  position: relative;
  transition: transform 0.1s;
}
.cal-day:hover { transform: scale(1.15); z-index: 2; }
.cal-day-num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; color: var(--text-secondary);
}
.cal-empty { background: var(--bg-surface); }
.cal-empty .cal-day-num { color: var(--text-muted); opacity: 0.4; }

@media (max-width: 900px) {
  .cal-weeks { overflow-x: auto; flex-direction: row; gap: 2px; }
  .cal-week { grid-template-columns: repeat(7, 36px); }
}

/* ═══ BACKTEST REFERENCE ═══ */
.backtest-ref { padding: var(--sp-3) 0; }
.backtest-comparison {
  display: flex; align-items: center; gap: var(--sp-4);
  justify-content: center; flex-wrap: wrap;
}
.backtest-col {
  background: var(--bg-surface); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5); text-align: center;
  min-width: 200px; border: 1px solid var(--border);
}
.backtest-col.old { opacity: 0.6; }
.backtest-col.new { border-color: var(--profit); }
.backtest-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); margin-bottom: var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.backtest-stat {
  font-family: var(--font-mono); font-size: var(--text-xl);
  font-weight: 700; color: var(--profit);
}
.backtest-col.old .backtest-stat { color: var(--text-secondary); }
.backtest-detail {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-muted); margin-top: var(--sp-2);
}
.backtest-arrow {
  font-size: var(--text-xl); color: var(--accent);
  font-weight: 700;
}
.backtest-delta {
  text-align: center; margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--text-sm);
  display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap;
}
@media (max-width: 600px) {
  .backtest-comparison { flex-direction: column; }
  .backtest-arrow { transform: rotate(90deg); }
}

/* ═══ STRATEGY CONFIG CARDS ═══ */
.strategy-config-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.config-card {
  background: var(--bg-surface); border-radius: var(--radius-md);
  padding: var(--sp-4); border: 1px solid var(--border);
}
.config-card-title {
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--text-sm); margin-bottom: var(--sp-3);
  color: var(--text-primary);
}
.config-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid oklch(0.2 0.01 250 / 0.5);
  font-size: var(--text-xs);
}
.config-row:last-child { border-bottom: none; }
.config-row span:first-child { color: var(--text-muted); }
.config-val {
  font-family: var(--font-mono); font-weight: 600;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════
   IB Gateway Status Bar
   ═══════════════════════════════════════ */
.ib-status-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  overflow-x: auto;
  white-space: nowrap;
}
.ib-status-bar.disconnected {
  opacity: 0.5;
}
.ib-indicator {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.ib-indicator.connected { color: var(--profit); }
.ib-indicator.disconnected { color: var(--loss); }
.ib-stat {
  color: var(--text-muted);
}

/* IB badge in market lane */
.ib-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.ib-badge.connected {
  background: oklch(0.68 0.15 152 / 0.12);
  border-color: var(--profit-soft);
  color: var(--profit);
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }