/* Titan v2 — Hedge-Fund Manager Console
   Aesthetic: Trading desk — clinical, dense, authoritative.
   Typography: IBM Plex Mono (all numeric data) + DM Sans (UI labels).
   Palette: near-black ground, cold slate text, surgical accent.
   Hierarchy: Risk & capital state dominate; system health signals clearly;
              calm under normal conditions, visually escalated under stress. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  /* Ground layers */
  --bg-0:       #05080c;
  --bg-1:       #090d12;
  --bg-2:       #0d1219;
  --bg-3:       #121820;
  --bg-4:       #161d28;
  --bg-hover:   rgba(255,255,255,0.025);

  /* Borders */
  --bd-0:   rgba(255,255,255,0.04);
  --bd-1:   rgba(255,255,255,0.08);
  --bd-2:   rgba(255,255,255,0.14);

  /* Text */
  --t-0:    #dde3ec;     /* headings / primary numerics */
  --t-1:    #8b96a6;     /* secondary labels */
  --t-2:    #4c5669;     /* muted / timestamps */
  --t-3:    #2e3848;     /* ultra-muted separators */

  /* State — health */
  --ok:       #22c55e;
  --ok-dim:   rgba(34, 197, 94, 0.10);
  --ok-glow:  rgba(34, 197, 94, 0.22);

  --warn:     #f59e0b;
  --warn-dim: rgba(245, 158, 11, 0.10);
  --warn-glow:rgba(245, 158, 11, 0.22);

  --err:      #f43f5e;
  --err-dim:  rgba(244, 63, 94, 0.10);
  --err-glow: rgba(244, 63, 94, 0.28);

  /* PnL */
  --profit:   #10b981;
  --profit-d: rgba(16, 185, 129, 0.10);
  --loss:     #f43f5e;
  --loss-d:   rgba(244, 63, 94, 0.10);

  /* Accent (cold blue) */
  --accent:   #3b82f6;
  --accent-d: rgba(59, 130, 246, 0.10);

  /* Emergency kill — unmistakable red */
  --kill:     #dc2626;
  --kill-h:   #b91c1c;
  --kill-g:   rgba(220, 38, 38, 0.30);

  /* Typography */
  --f-data: 'IBM Plex Mono', 'Courier New', monospace;
  --f-ui:   'DM Sans', system-ui, sans-serif;

  /* Radii */
  --r:   3px;
  --r2:  6px;
  --r3:  10px;

  /* Transition */
  --tx: 140ms ease;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 13px; scroll-behavior: smooth; }

body {
  font-family: var(--f-ui);
  background: var(--bg-0);
  color: var(--t-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; outline: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bd-1); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   STALE BANNER — appears ABOVE everything when feed is dead.
   Manager must NEVER mistake frozen data for "all calm".
══════════════════════════════════════════════════════════════════════ */
.stale-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  background: var(--kill);
  color: #fff;
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
  animation: stale-flash 1.2s ease-in-out infinite alternate;
}
.stale-banner.visible { display: block; }

@keyframes stale-flash {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* ══════════════════════════════════════════════════════════════════════
   MODE STRIP — sticky top bar. Mode state + kill switch live here.
   The most important control on the page: impossible to miss.
══════════════════════════════════════════════════════════════════════ */
.mode-strip {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-1);
  border-bottom: 1px solid var(--bd-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 46px;
  gap: 16px;
}

/* left cluster */
.mode-strip__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.wordmark {
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-1);
  flex-shrink: 0;
}
.wordmark em { color: var(--accent); font-style: normal; }

/* Instrument */
.instrument-tag {
  font-family: var(--f-data);
  font-size: 12px;
  font-weight: 600;
  color: var(--t-0);
  letter-spacing: 0.04em;
}

/* Feed heartbeat dot + timestamp */
.heartbeat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
}

.heartbeat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--ok-glow);
  animation: beat-ok 2.4s infinite;
}
.heartbeat__dot.stale {
  background: var(--err);
  animation: beat-err 0.9s infinite;
}
.heartbeat__dot.warn {
  background: var(--warn);
  animation: beat-warn 1.6s infinite;
}

@keyframes beat-ok {
  0%,100% { box-shadow: 0 0 0 0 var(--ok-glow); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
@keyframes beat-err {
  0%,100% { box-shadow: 0 0 0 0 var(--err-glow); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
}
@keyframes beat-warn {
  0%,100% { box-shadow: 0 0 0 0 var(--warn-glow); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* mode-strip right cluster */
.mode-strip__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* mode badge */
.mode-badge {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r);
  border: 1px solid currentColor;
}
.mode-badge.dry-run {
  color: var(--warn);
  background: var(--warn-dim);
}
.mode-badge.live {
  color: var(--ok);
  background: var(--ok-dim);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--ok-glow); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

/* KILL SWITCH — the emergency stop */
.kill-btn {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--kill);
  background: transparent;
  color: var(--kill);
  transition: background var(--tx), box-shadow var(--tx), color var(--tx);
  white-space: nowrap;
}
.kill-btn:hover {
  background: var(--kill);
  color: #fff;
  box-shadow: 0 0 18px var(--kill-g);
}
/* when mode IS live — button is armed appearance */
.kill-btn.armed {
  background: var(--kill);
  color: #fff;
  border-color: var(--kill);
  animation: armed 1s ease-in-out infinite alternate;
}
@keyframes armed {
  from { box-shadow: 0 0 8px var(--kill-g); }
  to   { box-shadow: 0 0 22px var(--kill-g); }
}

/* ══════════════════════════════════════════════════════════════════════
   RISK RAIL — the above-the-fold capital overview.
   Money and risk dominate the visual hierarchy.
══════════════════════════════════════════════════════════════════════ */
.risk-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--bg-2);
  border-bottom: 1px solid var(--bd-1);
}

.risk-cell {
  padding: 14px 18px 12px;
  border-right: 1px solid var(--bd-0);
  position: relative;
  transition: background var(--tx);
}
.risk-cell:last-child { border-right: none; }
.risk-cell:hover { background: var(--bg-hover); }

.risk-cell__lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--t-2);
  margin-bottom: 5px;
  white-space: nowrap;
}

.risk-cell__val {
  font-family: var(--f-data);
  font-size: 24px;
  font-weight: 600;
  color: var(--t-0);
  line-height: 1;
  white-space: nowrap;
}
.risk-cell__val.profit  { color: var(--profit); }
.risk-cell__val.loss    { color: var(--loss); }
.risk-cell__val.neutral { color: var(--t-1); }
.risk-cell__val.warn    { color: var(--warn); }

.risk-cell__sub {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
  margin-top: 4px;
}

/* exposure direction pills */
.dir-pills {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
.dir-pill {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 2px;
}
.dir-pill.long  { background: rgba(16,185,129,0.13); color: var(--profit); }
.dir-pill.short { background: rgba(244,63,94,0.13);  color: var(--loss); }
.dir-pill.flat  { background: var(--bg-4);            color: var(--t-2); }

/* drawdown cell — amber/red escalation */
.risk-cell--dd.warn-level { background: rgba(245,158,11,0.04); }
.risk-cell--dd.warn-level .risk-cell__val { color: var(--warn); }
.risk-cell--dd.breach-level { background: rgba(244,63,94,0.06); }
.risk-cell--dd.breach-level .risk-cell__val { color: var(--err); }
.risk-cell--dd.breach-level::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--err);
}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT — two-column below the fold
══════════════════════════════════════════════════════════════════════ */
.page-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 46px - 68px); /* strip + rail */
}

.sidebar {
  border-right: 1px solid var(--bd-0);
  display: flex;
  flex-direction: column;
}

.main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   PANEL — generic section container
══════════════════════════════════════════════════════════════════════ */
.panel {
  border-bottom: 1px solid var(--bd-0);
}

.panel__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bd-0);
  background: var(--bg-2);
}

.panel__ttl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-2);
}

.panel__meta {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
}

.panel__body { padding: 10px 14px; }

/* ══════════════════════════════════════════════════════════════════════
   HEALTH PROBES — sidebar top
══════════════════════════════════════════════════════════════════════ */
.probe-list { display: flex; flex-direction: column; }

.probe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-bottom: 1px solid var(--bd-0);
}
.probe-row:last-child { border-bottom: none; }

.probe-lbl {
  font-size: 11px;
  color: var(--t-1);
}

.probe-val {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 500;
}
.probe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.probe-val.ok   { color: var(--ok); }
.probe-val.ok .probe-dot    { background: var(--ok); }
.probe-val.warn { color: var(--warn); }
.probe-val.warn .probe-dot  { background: var(--warn); }
.probe-val.fail { color: var(--err); }
.probe-val.fail .probe-dot  { background: var(--err); }
.probe-val.na   { color: var(--t-2); }
.probe-val.na .probe-dot    { background: var(--t-2); }

/* Sub-row: last-tick timestamp beneath the feed probe */
.probe-row--sub {
  padding: 3px 14px 5px;
  border-bottom: 1px solid var(--bd-0);
  min-height: 0;
}
.probe-sub {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
}

/* Bars-seen mini-table */
.bars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd-0);
  border: 1px solid var(--bd-0);
  border-radius: var(--r);
  overflow: hidden;
  margin: 10px 14px;
}
.bars-cell {
  background: var(--bg-2);
  padding: 7px 10px;
}
.bars-cell__tf {
  font-family: var(--f-data);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--t-2);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.bars-cell__n {
  font-family: var(--f-data);
  font-size: 15px;
  font-weight: 600;
  color: var(--t-0);
}

/* ══════════════════════════════════════════════════════════════════════
   STRATEGY ATTRIBUTION — per-strategy risk/P&L panel
   This is the "which strategy is contributing or bleeding" view.
══════════════════════════════════════════════════════════════════════ */
.strat-table {
  width: 100%;
  border-collapse: collapse;
}

.strat-table thead th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--t-2);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd-1);
  white-space: nowrap;
  background: var(--bg-2);
}

.strat-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--bd-0);
  vertical-align: middle;
}

.strat-table tbody tr:last-child td { border-bottom: none; }
.strat-table tbody tr:hover td { background: var(--bg-hover); }
.strat-table tbody tr.disabled-row td { opacity: 0.38; }

.strat-id {
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 600;
  color: var(--t-0);
  white-space: nowrap;
}
.strat-tf {
  font-size: 10px;
  color: var(--t-2);
  margin-top: 2px;
  font-family: var(--f-data);
}

.strat-pnl {
  font-family: var(--f-data);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.strat-pnl.profit { color: var(--profit); }
.strat-pnl.loss   { color: var(--loss); }
.strat-pnl.zero   { color: var(--t-2); }

.strat-n {
  font-family: var(--f-data);
  font-size: 11px;
  color: var(--t-1);
  text-align: center;
}

/* Enable toggle — this is a risk control */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle {
  position: relative;
  width: 30px;
  height: 16px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--bg-4);
  border: 1px solid var(--bd-1);
  cursor: pointer;
  transition: background var(--tx), border-color var(--tx);
}
.toggle__track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--t-2);
  transition: transform var(--tx), background var(--tx);
}
.toggle input:checked + .toggle__track { background: var(--ok-dim); border-color: var(--ok); }
.toggle input:checked + .toggle__track::after { transform: translateX(14px); background: var(--ok); }

/* Reload banner — shown after any strategy change */
.reload-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: rgba(245,158,11,0.07);
  border-top: 1px solid rgba(245,158,11,0.22);
  border-bottom: 1px solid rgba(245,158,11,0.22);
  gap: 8px;
}
.reload-banner.visible { display: flex; }
.reload-banner__text {
  font-size: 11px;
  color: var(--warn);
}
.reload-banner__btn {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: var(--r);
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tx);
}
.reload-banner__btn:hover { background: var(--warn); color: var(--bg-0); }

/* ══════════════════════════════════════════════════════════════════════
   PNL SECTION
══════════════════════════════════════════════════════════════════════ */
.pnl-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bd-0);
}

.pnl-cell {
  background: var(--bg-2);
  padding: 12px 14px;
}
.pnl-cell__lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-2);
  margin-bottom: 4px;
}
.pnl-cell__val {
  font-family: var(--f-data);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.pnl-cell__val.profit  { color: var(--profit); }
.pnl-cell__val.loss    { color: var(--loss); }
.pnl-cell__val.neutral { color: var(--t-1); }
.pnl-cell__sub {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
  margin-top: 3px;
}

/* Equity sparkline */
.spark-wrap {
  padding: 10px 14px;
  border-top: 1px solid var(--bd-0);
}
.spark-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-2);
  margin-bottom: 6px;
}
#equity-spark {
  width: 100%;
  height: 60px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   POSITIONS / TRADES
══════════════════════════════════════════════════════════════════════ */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--bd-1);
  background: var(--bg-2);
}
.tab-btn {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  cursor: pointer;
  transition: color var(--tx), border-color var(--tx);
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--t-0);
  border-bottom-color: var(--accent);
}
.tab-btn:hover { color: var(--t-1); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Generic data table */
.dt {
  width: 100%;
  border-collapse: collapse;
}
.dt th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--t-2);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd-1);
  background: var(--bg-2);
  white-space: nowrap;
}
.dt td {
  font-family: var(--f-data);
  font-size: 11px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bd-0);
  color: var(--t-1);
  white-space: nowrap;
}
.dt tr:last-child td { border-bottom: none; }
.dt tr:hover td { background: var(--bg-hover); }

.dir-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
  display: inline-block;
}
.dir-badge.long  { background: rgba(16,185,129,0.12); color: var(--profit); }
.dir-badge.short { background: rgba(244,63,94,0.12);  color: var(--loss); }

.pnl-num { font-weight: 600; }
.pnl-num.profit { color: var(--profit); }
.pnl-num.loss   { color: var(--loss); }
.pnl-num.zero   { color: var(--t-2); }

.empty-row td {
  text-align: center;
  color: var(--t-2);
  padding: 20px;
  font-family: var(--f-ui);
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════
   DECISIONS TABLE
══════════════════════════════════════════════════════════════════════ */
.dec-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bd-0);
  background: var(--bg-2);
  flex-wrap: wrap;
}

select.f-sel, input.f-inp {
  font-family: var(--f-data);
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--bd-1);
  color: var(--t-1);
  padding: 4px 8px;
  border-radius: var(--r);
  outline: none;
  appearance: none;
  cursor: pointer;
}
select.f-sel:focus, input.f-inp:focus { border-color: var(--accent); }

.dec-row { cursor: pointer; }
.dec-expand-row { display: none; background: var(--bg-3); }
.dec-expand-row.open { display: table-row; }
.dec-expand-body {
  padding: 10px 14px;
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-1);
  line-height: 1.7;
  border-left: 2px solid var(--accent);
  margin: 4px 14px;
}

.act-yes { color: var(--ok); font-weight: 600; }
.act-no  { color: var(--err); font-weight: 600; }

.veto-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(244,63,94,0.10);
  color: var(--err);
  border: 1px solid rgba(244,63,94,0.20);
  display: inline-block;
}

.sig-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
}
.sig-chip.TR  { background: rgba(59,130,246,0.14); color: #60a5fa; }
.sig-chip.TC  { background: rgba(168,85,247,0.14); color: #c084fc; }
.sig-chip.TRA { background: rgba(245,158,11,0.14); color: var(--warn); }

/* ══════════════════════════════════════════════════════════════════════
   LOGS
══════════════════════════════════════════════════════════════════════ */
.log-stream {
  font-family: var(--f-data);
  font-size: 11px;
  line-height: 1.7;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 14px;
}
.log-line {
  display: grid;
  grid-template-columns: 72px 44px 100px 1fr;
  gap: 8px;
  border-bottom: 1px solid var(--bd-0);
  padding: 2px 0;
}
.log-line:last-child { border-bottom: none; }
.l-ts  { color: var(--t-2); }
.l-lvl { font-weight: 600; }
.l-lvl.DEBUG    { color: var(--t-2); }
.l-lvl.INFO     { color: var(--t-1); }
.l-lvl.WARNING  { color: var(--warn); }
.l-lvl.ERROR    { color: var(--err); }
.l-lvl.CRITICAL { color: var(--err); font-size: 12px; }
.l-name { color: var(--t-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-msg  { color: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   CONFIRM DIALOG — guards destructive actions
══════════════════════════════════════════════════════════════════════ */
.dialog-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5,8,12,0.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
.dialog-bg.open { display: flex; }

.dialog {
  background: var(--bg-2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r2);
  width: 380px;
  padding: 28px;
  box-shadow: 0 0 80px rgba(0,0,0,0.9);
}
.dialog__icon { font-size: 26px; margin-bottom: 12px; display: block; }
.dialog__ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-0);
  margin-bottom: 8px;
}
.dialog__body {
  font-size: 12px;
  color: var(--t-1);
  line-height: 1.6;
  margin-bottom: 20px;
}
.dialog__body strong { color: var(--err); }

.dialog__acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-cancel {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r);
  border: 1px solid var(--bd-1);
  background: transparent;
  color: var(--t-1);
  cursor: pointer;
  transition: all var(--tx);
}
.btn-cancel:hover { border-color: var(--bd-2); color: var(--t-0); }

.btn-kill-confirm {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r);
  border: 1px solid var(--kill);
  background: var(--kill);
  color: #fff;
  cursor: pointer;
  transition: all var(--tx);
}
.btn-kill-confirm:hover {
  background: var(--kill-h);
  box-shadow: 0 0 16px var(--kill-g);
}

.btn-safe-confirm {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r);
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  cursor: pointer;
  transition: all var(--tx);
}
.btn-safe-confirm:hover { background: var(--warn-dim); }

/* ══════════════════════════════════════════════════════════════════════
   AUTH PROMPT
══════════════════════════════════════════════════════════════════════ */
.auth-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(5,8,12,0.92);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}
.auth-bg.open { display: flex; }

.auth-box {
  background: var(--bg-2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r2);
  width: 340px;
  padding: 28px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.auth-ttl {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-0);
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 11px;
  color: var(--t-1);
  margin-bottom: 18px;
  line-height: 1.5;
}
.auth-field { margin-bottom: 12px; }
.auth-field label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--t-2);
  margin-bottom: 5px;
}
.auth-field input {
  width: 100%;
  font-family: var(--f-data);
  font-size: 12px;
  background: var(--bg-0);
  color: var(--t-0);
  border: 1px solid var(--bd-1);
  border-radius: var(--r);
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--tx);
}
.auth-field input:focus { border-color: var(--accent); }
.auth-err {
  font-size: 11px;
  color: var(--err);
  margin-bottom: 12px;
  display: none;
}
.auth-err.visible { display: block; }
.auth-submit {
  width: 100%;
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px;
  border-radius: var(--r);
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--tx);
}
.auth-submit:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════════════════════════════════ */
.hidden  { display: none !important; }
.nowrap  { white-space: nowrap; }
.tr      { text-align: right; }
.mono    { font-family: var(--f-data); }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-data);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 2px;
}
.badge-ok   { background: var(--ok-dim);    color: var(--ok);   border: 1px solid rgba(34,197,94,0.22); }
.badge-warn { background: var(--warn-dim);  color: var(--warn); border: 1px solid rgba(245,158,11,0.22); }
.badge-err  { background: var(--err-dim);   color: var(--err);  border: 1px solid rgba(244,63,94,0.22); }
.badge-dim  { background: var(--bg-4);      color: var(--t-2);  border: 1px solid var(--bd-1); }

.spinner {
  width: 10px; height: 10px;
  border: 1.5px solid var(--bd-1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS GEAR BUTTON — secondary to kill switch, no armed state
══════════════════════════════════════════════════════════════════════ */
.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r);
  border: 1px solid var(--bd-1);
  background: transparent;
  color: var(--t-2);
  cursor: pointer;
  transition: color var(--tx), border-color var(--tx), background var(--tx);
  flex-shrink: 0;
}
.settings-btn:hover {
  color: var(--t-0);
  border-color: var(--bd-2);
  background: var(--bg-hover);
}

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY — full-screen, slides up, secondary visual weight
══════════════════════════════════════════════════════════════════════ */
.settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5,8,12,0.80);
  backdrop-filter: blur(6px);
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px 20px;
  overflow-y: auto;
}
.settings-overlay.open { display: flex; }

.settings-panel {
  background: var(--bg-1);
  border: 1px solid var(--bd-1);
  border-radius: var(--r3);
  width: 100%;
  max-width: 860px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  animation: settings-in 200ms ease both;
}

@keyframes settings-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel header ──────────────────────────────────────────────────── */
.settings-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd-1);
  gap: 16px;
}
.settings-hd__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.settings-hd__icon {
  color: var(--t-2);
  flex-shrink: 0;
  display: flex;
}
.settings-hd__ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-0);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.settings-hd__sub {
  font-size: 10px;
  color: var(--t-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--bd-1);
  border-radius: var(--r);
  color: var(--t-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--tx), border-color var(--tx);
}
.settings-close:hover { color: var(--t-0); border-color: var(--bd-2); }

/* ── Panel body — two columns ──────────────────────────────────────── */
.settings-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 420px;
}

/* ── Left: connection list ─────────────────────────────────────────── */
.conn-list-col {
  border-right: 1px solid var(--bd-0);
  display: flex;
  flex-direction: column;
}
.conn-list-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd-0);
}
.conn-list-hd__ttl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-2);
}
.conn-add-btn {
  font-family: var(--f-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--r);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--tx), color var(--tx);
}
.conn-add-btn:hover { background: var(--accent-d); }

.conn-list { flex: 1; overflow-y: auto; }

.conn-list__empty {
  padding: 24px 14px;
  font-size: 11px;
  color: var(--t-2);
  text-align: center;
  line-height: 1.5;
}

/* Group heading inside the connection list (Broker / Signal channels) */
.conn-group-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-3);
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--bd-0);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Individual connection card in list */
.conn-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd-0);
  cursor: pointer;
  transition: background var(--tx);
  position: relative;
}
.conn-card:hover  { background: var(--bg-hover); }
.conn-card.active { background: rgba(59,130,246,0.06); }
.conn-card.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
}

.conn-card__uid {
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 600;
  color: var(--t-0);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conn-card__broker {
  font-size: 10px;
  color: var(--t-2);
  margin-bottom: 4px;
}
.conn-card__status {
  display: flex;
  align-items: center;
  gap: 5px;
}
.conn-card__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conn-card__status-dot.ok   { background: var(--ok); }
.conn-card__status-dot.warn { background: var(--warn); }
.conn-card__status-dot.na   { background: var(--t-3); }
.conn-card__status-lbl {
  font-family: var(--f-data);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-2);
}
.conn-card__status-lbl.live-flag { color: var(--err); font-weight: 700; }

/* ── Right: detail / form ──────────────────────────────────────────── */
.conn-detail-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.conn-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--t-2);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

/* ── Connection form ───────────────────────────────────────────────── */
.conn-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

.conn-form__hd {
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--bd-0);
  padding-bottom: 14px;
}
.conn-form__hd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Status line — configured / LIVE / DEMO indicator */
.conn-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--bd-0);
  background: var(--bg-2);
}
.conn-status-line__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conn-status-line__dot.ok   { background: var(--ok); }
.conn-status-line__dot.warn { background: var(--warn); }
.conn-status-line__dot.na   { background: var(--t-3); }
.conn-status-line__text {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-1);
}
.conn-status-line__text .live-flag { color: var(--err); font-weight: 700; }

/* Credential field groups */
.conn-form__fields {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow-y: auto;
}

.cf-section-hd {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-2);
  margin-bottom: 2px;
  margin-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd-0);
}

/* Helper note shown for signal-channel connection types */
.cf-channel-note {
  font-size: 11px;
  color: var(--t-2);
  background: var(--bg-3);
  border: 1px solid var(--bd-0);
  border-radius: var(--r);
  padding: 8px 10px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Field row */
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cf-field--half { /* used in header row, handled by grid */ }

.cf-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--t-2);
}
.cf-label .req-star {
  color: var(--err);
  margin-left: 2px;
}

.cf-input,
.cf-select,
.cf-textarea {
  font-family: var(--f-data);
  font-size: 12px;
  background: var(--bg-0);
  color: var(--t-0);
  border: 1px solid var(--bd-1);
  border-radius: var(--r);
  padding: 7px 10px;
  outline: none;
  width: 100%;
  transition: border-color var(--tx);
}
.cf-input:focus,
.cf-select:focus { border-color: var(--accent); }

.cf-input::placeholder { color: var(--t-2); }

/* Secret field hint — shown below masked input */
.cf-secret-hint {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--t-2);
  margin-top: 2px;
}

/* Select wrapper (arrow) */
.cf-select-wrap { position: relative; }
.cf-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-2);
  pointer-events: none;
  font-size: 10px;
}
.cf-select {
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
}

/* Boolean toggle field */
.cf-bool-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-bool-label {
  font-size: 11px;
  color: var(--t-1);
  cursor: pointer;
  user-select: none;
}

/* Feedback area */
.conn-form__feedback {
  margin: 0 20px 0;
  padding: 8px 12px;
  border-radius: var(--r);
  font-size: 11px;
  line-height: 1.5;
}
.conn-form__feedback.error {
  background: var(--err-dim);
  color: var(--err);
  border: 1px solid rgba(244,63,94,0.22);
}
.conn-form__feedback.success {
  background: var(--ok-dim);
  color: var(--ok);
  border: 1px solid rgba(34,197,94,0.22);
}

/* Actions bar */
.conn-form__acts {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--bd-0);
  background: var(--bg-2);
  border-radius: 0 0 var(--r3) 0;
  gap: 8px;
}
.cf-btn-cancel {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid var(--bd-1);
  background: transparent;
  color: var(--t-1);
  cursor: pointer;
  transition: all var(--tx);
}
.cf-btn-cancel:hover { border-color: var(--bd-2); color: var(--t-0); }

.cf-btn-save {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--r);
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--tx), box-shadow var(--tx);
}
.cf-btn-save:hover   { opacity: 0.85; }
.cf-btn-save:disabled { opacity: 0.4; cursor: not-allowed; }

.cf-btn-danger {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(244,63,94,0.35);
  background: transparent;
  color: var(--err);
  cursor: pointer;
  transition: background var(--tx), border-color var(--tx);
}
.cf-btn-danger:hover { background: var(--err-dim); border-color: var(--err); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .risk-rail   { grid-template-columns: repeat(3, 1fr); }
  .page-body   { grid-template-columns: 1fr; }
  .sidebar     { border-right: none; border-bottom: 1px solid var(--bd-1); }
  .settings-body { grid-template-columns: 1fr; }
  .conn-list-col { border-right: none; border-bottom: 1px solid var(--bd-0); max-height: 180px; }
  .conn-form__hd-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .risk-rail { grid-template-columns: repeat(2, 1fr); }
  .pnl-row   { grid-template-columns: 1fr 1fr; }
  .mode-strip { padding: 0 12px; }
  .wordmark   { display: none; }
  .settings-overlay { padding: 0; }
  .settings-panel { border-radius: 0; min-height: 100vh; }
  .settings-hd__sub { display: none; }
}