/* ============================================================================
   MOTHERSHIP v3 — Dark + Gold vibe
   Amber primary, cold-grey stale, red dead. Brighter contrast.
   ============================================================================ */

:root {
  /* ---------- Background — pure black (Bloomberg) ---------- */
  --bg-primary:       #000000;
  --bg-secondary:     #000000;
  --bg-tertiary:      #0A0804;
  --bg-elevated:      #050402;

  /* ---------- Foreground — warm amber/gold ---------- */
  --fg-primary:       #F0D088;   /* bright cream-gold — main text */
  --fg-secondary:     #B89050;   /* mid gold — secondary data */
  --fg-muted:         #705A28;   /* dim gold — labels, version, meta */
  --fg-dim:           #4A3A18;   /* very dim — disabled */
  --fg-disabled:      #2A2010;

  /* ---------- State accents ---------- */
  --state-live:       #FFCA4C;   /* bright amber — normal / operational */
  --state-warn:       #FFE080;   /* lighter yellow — lag */
  --state-stale:      #5A6878;   /* cold grey-blue — faded out */
  --state-dead:       #F04040;   /* red — critical (unchanged) */
  --state-offline:    #3A3020;   /* very dim amber */
  --state-cap:        #7FE08A;   /* celebratory green */

  /* ---------- Semantic (PnL) ---------- */
  --pnl-positive:     #7FE08A;   /* green — universal profit signal */
  --pnl-negative:     #F04040;   /* red */
  --pnl-neutral:      #B89050;   /* mid gold for zero */

  /* ---------- Brand ---------- */
  --brand:            #FFCA4C;   /* matches live — unified amber theme */

  /* ---------- Borders ---------- */
  --border-primary:   #2A2008;
  --border-divider:   #3A2E10;
  --border-live:      #4E3A10;
  --border-warn:      #4A3A10;
  --border-stale:     #2A2F3A;   /* grey tinted */
  --border-dead:      #4A1010;
  --border-offline:   #2A2008;

  /* ---------- State tints (backgrounds) ---------- */
  --bg-warn-tint:     #0A0800;
  --bg-stale-tint:    #04060A;   /* cold tint */
  --bg-dead-tint-1:   #0A0000;
  --bg-dead-tint-2:   #180000;

  /* ---------- Typography (default = comfortable, small fleet) ---------- */
  --font-mono:        'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  --fs-hero:          44px;
  --fs-card-hero:     34px;
  --fs-name:          17px;
  --fs-body:          15px;
  --fs-detail:        13px;
  --fs-label:         12px;
  --fs-min:           11px;

  /* ---------- Layout ---------- */
  --page-pad:         14px;
  --card-pad-x:       14px;
  --card-pad-y:       12px;
  --card-min-width:   440px;
  --grid-gap:         12px;
  --section-gap:      12px;
  --topbar-height:    72px;
  --alert-height:     120px;
  --footer-height:    30px;
}

/* ---------- Auto-dense mode (kicks in when fleet > 12 ships) ---------- */
body.fleet-dense {
  --fs-hero:          34px;
  --fs-card-hero:     26px;
  --fs-name:          14px;
  --fs-body:          13px;
  --fs-detail:        12px;
  --fs-label:         11px;

  --page-pad:         12px;
  --card-pad-x:       10px;
  --card-pad-y:       8px;
  --card-min-width:   340px;
  --grid-gap:         8px;
  --section-gap:      8px;
  --topbar-height:    56px;
  --alert-height:     100px;
  --footer-height:    26px;
}

/* ---------- Tall mode (fleet ≤ 10) ---------- */
/* Cards stretch to fill available vertical space whether 1 row or 2+ rows. */
/* Trades log becomes visible inside each card. */
body.fleet-tall .fleet-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  grid-auto-rows: 1fr;
  align-content: stretch;
  align-items: stretch;
  overflow: hidden;
}

body.fleet-tall .ship {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body.fleet-tall .ship-trades-log {
  display: flex;
}

/* ============================================================================
   RESET + BASE
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.35;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

body {
  padding: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================================================
   SCANLINE OVERLAY
   ============================================================================ */
.scanline-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  background: repeating-linear-gradient(180deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.22) 3px, transparent 4px);
}
body.scan-on .scanline-overlay { opacity: 1; }

/* ============================================================================
   TOPBAR
   ============================================================================ */
.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: var(--topbar-height);
  padding: 0 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  flex-shrink: 0;
}

/* -- Brand -- */
.tb-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.tb-mark {
  color: var(--brand);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  align-self: center;
  text-shadow: 0 0 12px rgba(255, 202, 76, 0.25);
}

.tb-name {
  color: var(--fg-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.5px;
}

.tb-ver {
  color: var(--fg-muted);
  font-size: var(--fs-min);
  font-weight: 300;
}

.demo-tag {
  color: var(--state-warn);
  border: 1px solid var(--state-warn);
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-left: 6px;
}

/* -- Fleet PnL hero -- */
.tb-fleet-pnl {
  font-size: var(--fs-hero);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--pnl-neutral);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.tb-fleet-pnl.positive { color: var(--pnl-positive); }
.tb-fleet-pnl.negative { color: var(--pnl-negative); }

/* -- Inline stats -- */
.tb-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  justify-content: center;
}

.ti {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.ti-k {
  color: var(--fg-muted);
  font-size: var(--fs-label);
  font-weight: 300;
}

.ti-v {
  color: var(--fg-primary);
  font-weight: 400;
}

.ti-v.ti-ok  { color: var(--state-live); }
.ti-v.ti-bad { color: var(--state-dead); }

.ti-sep {
  color: var(--fg-dim);
  font-weight: 300;
}

.ti-v.alert-pulse {
  animation: alert-count-pulse 1.5s ease-in-out infinite;
}

/* -- Right side: clock + controls stacked -- */
.tb-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.tb-clock {
  color: var(--fg-primary);
  font-size: var(--fs-body);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tb-clock-sep {
  color: var(--fg-muted);
}

#clock-utc {
  color: var(--fg-secondary);
  font-weight: 300;
  font-size: var(--fs-detail);
}

.tb-controls {
  display: flex;
  gap: 4px;
}

.tb-btn {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid var(--border-primary);
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.tb-btn:hover {
  border-color: var(--fg-secondary);
  color: var(--fg-primary);
}

.tb-btn.active {
  border-color: var(--state-live);
  color: var(--state-live);
  background: rgba(255, 202, 76, 0.08);
}

.tb-btn-danger {
  color: var(--state-dead);
  border-color: var(--border-dead);
  margin-left: 4px;
}
.tb-btn-danger:hover {
  background: rgba(240, 64, 64, 0.08);
  border-color: var(--state-dead);
}
.tb-btn-danger.confirming {
  background: rgba(240, 64, 64, 0.14);
  border-color: var(--state-dead);
  color: var(--state-dead);
  animation: danger-blink 0.8s ease-in-out infinite;
}

.tb-btn-ghost {
  border-color: transparent;
  color: var(--fg-muted);
}
.tb-btn-ghost:hover {
  color: var(--fg-secondary);
  border-color: transparent;
}

/* ============================================================================
   FLEET GRID
   ============================================================================ */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: var(--grid-gap);
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow: auto;
}

.fleet-grid::-webkit-scrollbar { width: 6px; }
.fleet-grid::-webkit-scrollbar-track { background: transparent; }
.fleet-grid::-webkit-scrollbar-thumb { background: var(--border-primary); }

/* ============================================================================
   SHIP CARD — amber primary, 2-line header
   ============================================================================ */
.ship {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: var(--card-pad-y) var(--card-pad-x);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color 0.15s;
}

.ship:hover {
  border-color: var(--fg-muted);
}

/* ---- 2-line header ---- */
.ship-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.ship-head-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-name);
}

.ship-head-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.ship-glyph {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
}

.ship-name {
  color: var(--fg-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ship-age {
  color: var(--fg-secondary);
  font-size: var(--fs-label);
  font-weight: 300;
  flex-shrink: 0;
}

.ship-head-line2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-label);
  color: var(--fg-secondary);
  padding-left: 20px;  /* align with name (past the glyph) */
}

.ship-head-line2 .meta-item {
  color: var(--fg-secondary);
}

.ship-head-line2 .meta-plat {
  color: var(--fg-primary);
  font-weight: 400;
}

.ship-head-line2 .meta-machine {
  color: var(--fg-secondary);
  font-weight: 400;
}

.ship-head-line2 .meta-ver {
  color: var(--fg-muted);
}

.ship-head-line2 .meta-sep {
  color: var(--fg-dim);
}

/* ---- PnL row: big number + inline meta ---- */
.ship-pnl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.ship-pnl {
  font-size: var(--fs-card-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--pnl-neutral);
}

.ship-pnl.positive { color: var(--pnl-positive); }
.ship-pnl.negative { color: var(--pnl-negative); }

.ship-pnl-meta {
  color: var(--fg-secondary);
  font-size: var(--fs-detail);
  font-weight: 400;
  text-align: right;
  line-height: 1.35;
  white-space: nowrap;
}

.ship-pnl-meta .week-val {
  color: var(--fg-primary);
}
.ship-pnl-meta .week-val.positive { color: var(--pnl-positive); }
.ship-pnl-meta .week-val.negative { color: var(--pnl-negative); }

.ship-pnl-meta .cap-pct {
  color: var(--fg-primary);
}
.ship-pnl-meta .cap-pct.at-cap { color: var(--state-cap); }

.ship-pnl-meta .target-hit {
  color: var(--state-cap);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ---- Session + stats row ---- */
.ship-stats {
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.ship-session {
  color: var(--fg-primary);
}

.ship-session .sess-status {
  color: var(--fg-muted);
  font-size: var(--fs-label);
  margin-left: 4px;
}
.ship-session .sess-status.running  { color: var(--state-live); }
.ship-session .sess-status.stopped  { color: var(--state-dead); }
.ship-session .sess-status.disabled { color: var(--fg-muted); }

.ship-counts {
  color: var(--fg-primary);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.ship-counts .c-wr { color: var(--fg-secondary); }

.ship-counts .streak-warn   { color: var(--state-warn); }
.ship-counts .streak-danger { color: var(--state-dead); }

/* ---- FVG or Position (single line) ---- */
.ship-fvg {
  font-size: var(--fs-detail);
  color: var(--fg-secondary);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.ship-fvg .fvg-arrow {
  font-weight: 500;
}
.ship-fvg .fvg-arrow.bull { color: var(--state-live); }
.ship-fvg .fvg-arrow.bear { color: var(--state-dead); }

.ship-fvg .fvg-type {
  color: var(--fg-primary);
  font-weight: 500;
}

.ship-fvg .fvg-range { color: var(--fg-secondary); }
.ship-fvg .fvg-age   { color: var(--fg-muted); }
.ship-fvg .fvg-note  { color: var(--fg-muted); font-style: italic; margin-left: auto; }

.ship-pos {
  font-size: var(--fs-detail);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.ship-pos .pos-dir {
  font-weight: 500;
  letter-spacing: 1px;
}
.ship-pos .pos-dir.long  { color: var(--state-live); }
.ship-pos .pos-dir.short { color: var(--state-dead); }

.ship-pos .pos-entry { color: var(--fg-primary); }
.ship-pos .pos-sl    { color: var(--fg-muted); }

.ship-pos .pos-unreal {
  margin-left: auto;
  font-weight: 500;
}
.ship-pos .pos-unreal.positive { color: var(--pnl-positive); }
.ship-pos .pos-unreal.negative { color: var(--pnl-negative); }

/* ---- Last trade line (one-liner) ---- */
.ship-last {
  font-size: var(--fs-detail);
  color: var(--fg-secondary);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.ship-last .l-label {
  color: var(--fg-muted);
  font-size: var(--fs-label);
  font-weight: 300;
}

.ship-last .l-dir {
  font-weight: 500;
  letter-spacing: 0.5px;
}
.ship-last .l-dir.long  { color: var(--state-live); }
.ship-last .l-dir.short { color: var(--state-dead); }

.ship-last .l-exit {
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

.ship-last .l-pts.positive { color: var(--pnl-positive); }
.ship-last .l-pts.negative { color: var(--pnl-negative); }

.ship-last .l-pnl {
  margin-left: auto;
  font-weight: 500;
}
.ship-last .l-pnl.positive { color: var(--pnl-positive); }
.ship-last .l-pnl.negative { color: var(--pnl-negative); }

/* ---- Session trades log (tall mode only) ---- */
.ship-trades-log {
  display: none;  /* hidden unless body.fleet-tall */
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-primary);
  overflow: hidden;
}

.ship-trades-log-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-detail);
  color: var(--fg-primary);
  margin-bottom: 6px;
  flex-shrink: 0;
}

.ship-trades-log-header .tl-count {
  color: var(--fg-primary);
  font-weight: 500;
}

.ship-trades-log-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: var(--fs-detail);
  font-variant-numeric: tabular-nums;
}

.ship-trades-log-body::-webkit-scrollbar { width: 4px; }
.ship-trades-log-body::-webkit-scrollbar-track { background: transparent; }
.ship-trades-log-body::-webkit-scrollbar-thumb { background: var(--border-primary); }

.trade-row {
  display: grid;
  grid-template-columns: 44px 12px 48px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  color: var(--fg-primary);
  font-size: var(--fs-detail);
  border-bottom: 1px dotted transparent;
}

.trade-row:hover {
  background: rgba(255, 202, 76, 0.06);
}

.trade-row .tr-time {
  color: var(--fg-secondary);
  font-size: var(--fs-detail);
  font-weight: 400;
}

.trade-row .tr-dir {
  font-weight: 500;
  text-align: center;
}
.trade-row .tr-dir.long  { color: var(--state-live); }
.trade-row .tr-dir.short { color: var(--state-dead); }

.trade-row .tr-exit {
  color: var(--fg-secondary);
  font-size: var(--fs-detail);
  letter-spacing: 0.5px;
}

.trade-row .tr-pts {
  text-align: right;
  color: var(--fg-primary);
  font-size: var(--fs-detail);
}
.trade-row .tr-pts.positive { color: var(--pnl-positive); }
.trade-row .tr-pts.negative { color: var(--pnl-negative); }

.trade-row .tr-pnl {
  text-align: right;
  font-weight: 500;
  font-size: var(--fs-detail);
}
.trade-row .tr-pnl.positive { color: var(--pnl-positive); }
.trade-row .tr-pnl.negative { color: var(--pnl-negative); }

/* ============================================================================
   SHIP STATE VARIANTS
   ============================================================================ */

/* LIVE — amber (primary / normal state) */
.ship.state-live {
  border-left: 2px solid var(--state-live);
}
.ship.state-live .ship-glyph {
  color: var(--state-live);
  animation: live-dot-pulse 2.4s ease-in-out infinite;
}

/* WARN — brighter amber */
.ship.state-warn {
  border-left: 2px solid var(--state-warn);
  background: var(--bg-warn-tint);
}
.ship.state-warn .ship-glyph { color: var(--state-warn); }
.ship.state-warn .ship-age   { color: var(--state-warn); font-weight: 500; }

/* STALE — cold grey-blue, FADED (not alarming) */
.ship.state-stale {
  border-left: 2px solid var(--state-stale);
  background: var(--bg-stale-tint);
  color: var(--state-stale);
}
.ship.state-stale .ship-glyph {
  color: var(--state-stale);
  animation: stale-dim-pulse 4s ease-in-out infinite;
}
.ship.state-stale .ship-name,
.ship.state-stale .ship-pnl,
.ship.state-stale .ship-session,
.ship.state-stale .ship-counts,
.ship.state-stale .ship-fvg .fvg-type,
.ship.state-stale .ship-pnl-meta .week-val,
.ship.state-stale .ship-pnl-meta .cap-pct {
  color: var(--state-stale);
}
.ship.state-stale .ship-age {
  color: var(--state-stale);
  font-weight: 500;
}

.stale-banner {
  background: rgba(90, 104, 120, 0.1);
  color: var(--state-stale);
  padding: 3px 6px;
  font-size: var(--fs-label);
  text-align: center;
  font-weight: 500;
  margin: 0 -10px 4px;
  letter-spacing: 0.5px;
}

/* DEAD — red, critical, unmissable */
.ship.state-dead {
  border: 2px solid var(--state-dead);
  background: var(--bg-dead-tint-1);
  animation: dead-bg-pulse 1.2s ease-in-out infinite,
             dead-border-blink 0.6s step-end infinite;
}
.ship.state-dead .ship-glyph { color: var(--state-dead); }
.ship.state-dead .ship-name  { color: var(--fg-primary); }
.ship.state-dead .ship-age   { color: var(--state-dead); font-weight: 500; }

.dead-banner {
  padding: 12px 6px 8px;
  text-align: center;
}

.dead-banner-icon {
  font-size: 22px;
  color: var(--state-dead);
  margin-bottom: 6px;
  font-weight: 500;
}

.dead-banner-title {
  color: var(--state-dead);
  font-size: var(--fs-name);
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.dead-banner-sub {
  color: var(--fg-secondary);
  font-size: var(--fs-detail);
  font-weight: 300;
  line-height: 1.5;
}

.dead-banner-sub strong {
  color: var(--state-dead);
  font-weight: 500;
}

.ship.state-dead .stale-info {
  opacity: 0.5;
  font-size: var(--fs-detail);
  padding: 6px 0 0;
  border-top: 1px dashed var(--border-dead);
  margin-top: 6px;
  color: var(--fg-secondary);
}

.stale-info-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* OFFLINE — very dim */
.ship.state-offline {
  border-left: 2px solid var(--state-offline);
  opacity: 0.45;
}
.ship.state-offline .ship-glyph { color: var(--state-offline); }

/* CAP HIT — celebratory green accent on amber base */
.ship.state-cap {
  border-left: 2px solid var(--state-cap);
}
.ship.state-cap .ship-glyph { color: var(--state-cap); }
.ship.state-cap .ship-pnl {
  color: var(--state-cap);
  text-shadow: 0 0 12px rgba(127, 224, 138, 0.18);
}

/* ============================================================================
   ALERT LOG
   ============================================================================ */
.alert-log {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  height: var(--alert-height);
  flex-shrink: 0;
}

.alert-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-primary);
}

.alert-log-title {
  color: var(--brand);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 1px;
}

.alert-log-title.has-dead {
  color: var(--state-dead);
  animation: alert-title-blink 1s ease-in-out infinite;
}

.alert-log-actions {
  display: flex;
  gap: 2px;
}

.alert-log-body {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: var(--fs-detail);
}

.alert-log-body::-webkit-scrollbar { width: 6px; }
.alert-log-body::-webkit-scrollbar-track { background: transparent; }
.alert-log-body::-webkit-scrollbar-thumb { background: var(--border-primary); }

.alert-empty {
  color: var(--fg-muted);
  text-align: center;
  padding: 14px;
  font-size: var(--fs-label);
}

.cursor-blink {
  display: inline-block;
  color: var(--brand);
  animation: cursor-blink 1s step-end infinite;
  margin-left: 3px;
}

.alert-entry {
  display: grid;
  grid-template-columns: 80px 220px 70px 1fr;
  align-items: center;
  gap: 10px;
  padding: 3px 10px;
  font-size: var(--fs-detail);
  border-bottom: 1px solid var(--border-primary);
}

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

.alert-entry.sev-dead  { background: rgba(240, 64, 64, 0.05); }
.alert-entry.sev-stale { background: rgba(90, 104, 120, 0.04); }
.alert-entry.sev-live  { background: rgba(255, 202, 76, 0.04); }
.alert-entry.sev-cap   { background: rgba(127, 224, 138, 0.05); }

.alert-time {
  color: var(--fg-muted);
  font-size: var(--fs-label);
  font-weight: 300;
}

.alert-ship {
  color: var(--fg-primary);
}

.alert-state {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.alert-state.sev-live  { color: var(--state-live); }
.alert-state.sev-warn  { color: var(--state-warn); }
.alert-state.sev-stale { color: var(--state-stale); }
.alert-state.sev-dead  { color: var(--state-dead); }
.alert-state.sev-cap   { color: var(--state-cap); }
.alert-state.sev-stop  { color: var(--state-warn); }

.alert-msg {
  color: var(--fg-secondary);
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: var(--footer-height);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--fg-muted);
  font-size: var(--fs-label);
  font-weight: 300;
  flex-shrink: 0;
}

.footer-dim { color: var(--fg-dim); }
.footer-path { color: var(--fg-secondary); }

.footer-poll {
  margin-left: auto;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.poll-bar {
  display: inline-block;
  width: 40px;
  height: 3px;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}
.poll-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--brand);
  width: 0;
  animation: poll-countdown 3s linear infinite;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes stale-dim-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.45; }
}

@keyframes dead-bg-pulse {
  0%, 100% { background-color: var(--bg-dead-tint-1); }
  50%      { background-color: var(--bg-dead-tint-2); }
}

@keyframes dead-border-blink {
  0%, 49%   { border-color: var(--state-dead); }
  50%, 100% { border-color: rgba(240, 64, 64, 0.4); }
}

@keyframes alert-count-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes alert-title-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes danger-blink {
  0%, 100% { background: rgba(240, 64, 64, 0.18); }
  50%      { background: rgba(240, 64, 64, 0.06); }
}

@keyframes poll-countdown {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1600px) {
  :root {
    --card-min-width: 320px;
    --fs-hero: 30px;
    --fs-card-hero: 24px;
  }
}

@media (max-width: 1280px) {
  :root {
    --card-min-width: 300px;
    --fs-hero: 26px;
    --fs-card-hero: 22px;
  }
  #clock-utc, .tb-clock-sep { display: none; }
}

@media (max-width: 1024px) {
  .tb-inline { display: none; }
  .fleet-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   LIVE TRADES STREAM (v1.9 — driven by api/trades.php + js/trades-stream.js)
   ============================================================================ */

.trades-stream {
  margin: 0 var(--page-pad) var(--section-gap);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  font-family: var(--font-mono);
}

.trades-stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-divider);
  font-size: var(--fs-label);
  letter-spacing: 0.5px;
}
.trades-stream-title { color: var(--fg-muted); text-transform: uppercase; }
.trades-stream-title span { color: var(--state-live); }
.trades-stream-status {
  color: var(--state-live);
  font-size: var(--fs-min);
  text-transform: uppercase;
}

.trades-stream-cols,
.trade-row {
  display: grid;
  grid-template-columns: 56px 80px 28px 60px 1fr 1fr 44px 2fr;
  gap: 8px;
  padding: 4px 12px;
  font-size: var(--fs-detail);
  align-items: center;
}

.trades-stream-cols {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--fs-min);
  border-bottom: 1px solid var(--border-divider);
  background: var(--bg-elevated);
}

.trades-stream-body {
  max-height: 360px;
  overflow-y: auto;
}

.trade-row {
  border-bottom: 1px solid rgba(40,30,8,0.4);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.trade-row .t-id    { color: var(--fg-muted); }
.trade-row .t-time  { color: var(--fg-secondary); }
.trade-row .t-dir-L { color: var(--state-cap); font-weight: 500; }
.trade-row .t-dir-S { color: #FF8A4A; font-weight: 500; }
.trade-row .t-reason{ color: var(--fg-muted); }
.trade-row .t-ship  { color: var(--fg-muted); font-size: var(--fs-min); overflow: hidden; text-overflow: ellipsis; }
.trade-row.pnl-pos .t-pts,
.trade-row.pnl-pos .t-pnl { color: var(--pnl-positive); }
.trade-row.pnl-neg .t-pts,
.trade-row.pnl-neg .t-pnl { color: var(--pnl-negative); }
.trade-row.pnl-zero .t-pts,
.trade-row.pnl-zero .t-pnl { color: var(--pnl-neutral); }

@media (max-width: 1024px) {
  .trades-stream-cols, .trade-row {
    grid-template-columns: 44px 64px 24px 50px 1fr 1fr;
  }
  .trade-row .t-ct, .trade-row .t-ship,
  .trades-stream-cols span:nth-child(7),
  .trades-stream-cols span:nth-child(8) { display: none; }
}

/* 8-bit pixel rocket in trades-stream header (matches Moonship vibe) */
.rocket-pixel {
  width: 14px;
  height: 19px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  image-rendering: pixelated;
  animation: rocket-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 138, 74, 0.45));
}
@keyframes rocket-bob {
  0
/* 8-bit pixel rocket in trades-stream header (matches Moonship vibe) */
.rocket-pixel {
  width: 14px;
  height: 19px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  image-rendering: pixelated;
  animation: rocket-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 138, 74, 0.45));
}
@keyframes rocket-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes rocket-flame {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.rocket-pixel rect[fill="#FF8A4A"],
.rocket-pixel rect[fill="#F04040"] {
  animation: rocket-flame 0.42s ease-in-out infinite;
}

/* ============================================================================
   AI COMMENTARY STREAM (driven by api/commentary.php + js/commentary-stream.js)
   ============================================================================ */

.commentary-stream {
  margin: 0 var(--page-pad) var(--section-gap);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  font-family: var(--font-mono);
}

.commentary-stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-divider);
  font-size: var(--fs-label);
  letter-spacing: 0.5px;
}
.commentary-stream-title { color: var(--state-live); text-transform: uppercase; }
.commentary-stream-status {
  color: var(--state-live);
  font-size: var(--fs-min);
  text-transform: uppercase;
}

.commentary-body {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.commentary-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 4px 12px;
  font-size: var(--fs-detail);
  border-bottom: 1px solid rgba(40,30,8,0.4);
  align-items: baseline;
}
.commentary-row:last-child { border-bottom: none; }
.commentary-row .c-id   { color: var(--fg-muted); }
.commentary-row .c-text {
  color: var(--state-live);
  font-style: italic;
  white-space: normal;
  word-break: break-word;
}