@import url("./shadowflow-dark-tokens.css");

:root {
  --shell-min-desktop: 0px;
  --nav-w: 72px;
  --watchlist-w: 264px;
  --rail-w: 324px;
  --topbar-h: 56px;
  --account-h: 36px;
  --blotter-h: 240px;

  /* SPY decision workspace layout */
  --right-rail-w: 360px;
  --decision-h: 172px;
  --setup-h: 100px;
  --flow-h: 430px;
  --structure-h: 76px;
  --regime-h: 236px;
  --copilot-h: 260px;
  --shadow-h: 178px;
  --lifecycle-h: 100px;
  --flow-visible-rows: 10;
  --flow-row-h: 28px;
  --flow-head-h: 30px;
  --feed-visible-cards: 2.5;
  --feed-card-h: 154px;

  --font-sans: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --bg-app: #f4f6f8;
  --bg-shell: #eef2f5;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafb;
  --bg-surface-muted: #f1f4f7;
  --bg-overlay: rgba(10, 15, 20, 0.56);

  --text-strong: #10161c;
  --text-body: #28323d;
  --text-muted: #657282;
  --text-faint: #8b97a5;

  --line-subtle: #d9e0e7;
  --line-strong: #c6d0da;
  --line-focus: #5d8cff;

  --accent: #2f6fed;
  --accent-soft: #e8f0ff;
  --good: #17875f;
  --bad: #d1453b;
  --warn: #b7791f;

  --shadow-overlay: 0 16px 40px rgba(16, 22, 28, 0.18);

  --radius-panel: 10px;
  --radius-control: 7px;
  --radius-pill: 999px;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;

  --text-label: 11px;
  --text-body-sm: 13px;
  --text-body-md: 14px;
  --text-section: 16px;

  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--line-focus);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--font-sans);
  color: var(--text-strong);
  background:
    radial-gradient(circle at top left, rgba(47, 111, 237, 0.08), transparent 24%),
    linear-gradient(180deg, var(--bg-app) 0%, #e9edf1 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

input,
button {
  border: 0;
}

.app-root {
  width: 100%;
  min-height: 100%;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: var(--topbar-h) auto;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  height: auto;
  overflow: visible;
  gap: 1px;
  padding: 1px;
  background: var(--line-subtle);
}

.shell-region {
  min-width: 0;
  min-height: 0;
  background: var(--bg-surface);
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-12);
  min-width: 0;
  overflow: hidden;
}

/* Workspace body: left column + right intelligence rail */
.workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--right-rail-w);
  min-height: auto;
  overflow: visible;
  gap: 1px;
  align-items: start;
}

/* Left column: Decision Center → Chart → Setup Reason → Unusual Flow */
.workspace-left {
  display: grid;
  grid-template-rows:
    minmax(var(--decision-h), auto)
    minmax(420px, auto)
    minmax(var(--setup-h), auto)
    minmax(var(--flow-h), auto);
  min-height: auto;
  overflow: visible;
  gap: 1px;
  align-content: start;
}

/* Right intelligence rail: Regime Filter → Breaking Feed → Desk Copilot → Shadow Account → Alert Lifecycle */
.workspace-right {
  display: grid;
  grid-template-rows:
    minmax(var(--regime-h), auto)
    minmax(260px, auto)
    minmax(var(--copilot-h), auto)
    minmax(var(--shadow-h), auto)
    minmax(var(--lifecycle-h), auto);
  min-height: auto;
  overflow-y: visible;
  overflow-x: hidden;
  gap: 1px;
  align-content: start;
}

.decision-center-pane,
.setup-reason-pane,
.unusual-flow-pane,
.market-structure-pane,
.regime-filter-pane,
.breaking-feed-pane,
.desk-copilot-pane,
.shadow-account-pane,
.alert-lifecycle-pane {
  min-height: auto;
  min-width: 0;
  overflow: visible;
}

.chart-stage {
  min-height: 420px;
  min-width: 0;
  overflow: visible;
}

.region-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.region-frame--bar {
  justify-content: center;
  padding: 0 var(--space-16);
}

.region-frame--pane {
  padding: var(--space-16);
}

.region-frame--nav {
  padding: var(--space-16) var(--space-12);
}

.region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}

.region-head--stack {
  align-items: flex-start;
}

.region-label {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.region-title {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.region-copy {
  display: block;
  max-width: 38ch;
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  line-height: 1.4;
}

.region-copy--tight {
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.placeholder-card {
  display: grid;
  gap: var(--space-12);
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.placeholder-card--fill {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.placeholder-card--compact {
  padding: 0;
}

.placeholder-grid {
  display: grid;
  gap: var(--space-12);
  min-height: 0;
}

.placeholder-grid--nav {
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.placeholder-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.placeholder-grid--blotter {
  grid-template-rows: auto minmax(0, 1fr);
}

.placeholder-list {
  display: grid;
  gap: var(--space-8);
  min-height: 0;
  align-content: start;
}

.chart-stage-layout {
  display: grid;
  grid-template-rows: minmax(32px, auto) minmax(30px, auto) minmax(0, 1fr) minmax(30px, auto);
  gap: var(--space-8);
  width: 100%;
  height: auto;
  min-height: 420px;
  overflow: visible;
}

.chart-header-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--space-12);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  white-space: nowrap;
  overflow: hidden;
}

.chart-header-title {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chart-header-symbol {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.chart-header-meta {
  justify-self: end;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.posture-lane {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-frame {
  display: grid;
  place-items: center;
  gap: var(--space-8);
  min-height: 300px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  overflow: hidden;
  position: relative;
}

.chart-frame-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart-frame-symbol {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.context-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-8);
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
}

.context-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  max-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-chip:hover {
  border-color: var(--line-strong);
  background: var(--bg-surface-muted);
}

.context-ribbon-placeholder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 34px;
  border-top: 1px solid var(--line-subtle);
}

.placeholder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 36px;
  padding: 0 var(--space-12);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-body);
  font-size: var(--text-body-sm);
}

.placeholder-row--dense {
  min-height: 32px;
}

.placeholder-meta {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.placeholder-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 36px;
  width: 100%;
  padding: 0 var(--space-12);
  border-radius: var(--radius-control);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  text-decoration: none;
  background: transparent;
  text-align: left;
}

.placeholder-nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.placeholder-nav-link.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.placeholder-pill,
.shell-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
}

.placeholder-pill[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.shell-button {
  background: var(--bg-surface-alt);
}

.shell-button:hover {
  border-color: var(--line-strong);
  background: var(--bg-surface-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.top-bar-content {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-width: 0;
}

.top-bar-brand,
.top-bar-utilities {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.top-bar-workspace {
  color: var(--text-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  white-space: nowrap;
}

.top-bar-logo {
  height: 24px;
  width: auto;
  display: block;
}

.top-bar-search-form {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
}

.top-bar-search-shortcut {
  flex: 0 0 auto;
  padding-left: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.top-bar-search-field {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 10px;
  background: transparent;
  color: var(--text-body);
}

.top-bar-search-field::placeholder {
  color: var(--text-faint);
}

.top-bar-search-form:focus-within,
.utility-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-alt);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-pill--info {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-subtle));
  color: var(--accent);
  background: var(--accent-soft);
}

.status-pill--good {
  border-color: color-mix(in srgb, var(--good) 25%, var(--line-subtle));
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--bg-surface-alt));
}

.status-pill--warn {
  border-color: color-mix(in srgb, var(--warn) 25%, var(--line-subtle));
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--bg-surface-alt));
}

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
}

.utility-button:hover {
  border-color: var(--line-strong);
  background: var(--bg-surface-muted);
}

.utility-count,
.utility-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.utility-button--alerts .utility-count {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
  color: var(--accent);
}

.utility-button--user .utility-avatar {
  background: color-mix(in srgb, var(--text-strong) 6%, var(--bg-surface));
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-weight: 700;
}

.account-strip-content {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.account-strip-metric {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
  white-space: nowrap;
}

.account-strip-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.account-strip-value {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
}

.account-strip-value--good {
  color: var(--good);
}

.account-strip-value--bad {
  color: var(--bad);
}

.account-strip-value--warn {
  color: var(--warn);
}

.watchlist-layout {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-12);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.watchlist-header {
  height: 40px;
  min-height: 40px;
  min-width: 0;
}

.watchlist-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  height: 32px;
  min-height: 32px;
}

.watchlist-tab {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
}

.watchlist-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line-subtle));
  background: var(--accent-soft);
  color: var(--accent);
}

.watchlist-tab:focus-visible,
.watchlist-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.watchlist-list {
  display: grid;
  gap: var(--space-4);
  min-height: 0;
  overflow: auto;
  align-content: start;
}

.watchlist-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 56px 44px;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-body);
  text-align: left;
}

.watchlist-row:hover {
  background: var(--bg-surface-alt);
}

.watchlist-row.is-selected {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-subtle));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-surface));
  box-shadow: inset 2px 0 0 var(--accent);
}

.watchlist-row.is-stale .watchlist-price,
.watchlist-row.is-stale .watchlist-change {
  color: var(--text-faint);
}

.watchlist-row.is-halted {
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-surface));
  color: var(--text-muted);
}

.watchlist-row.is-recent-reject {
  border-color: color-mix(in srgb, var(--bad) 20%, var(--line-subtle));
  background: color-mix(in srgb, var(--bad) 6%, var(--bg-surface));
}

.watchlist-symbol-cell,
.watchlist-symbol,
.watchlist-price,
.watchlist-change,
.watchlist-state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-symbol {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-body-md);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.watchlist-price,
.watchlist-change {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

.watchlist-price {
  color: var(--text-body);
}

.watchlist-change {
  color: var(--text-muted);
}

.watchlist-change--up {
  color: var(--good);
}

.watchlist-change--down {
  color: var(--bad);
}

.watchlist-state {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.watchlist-state-placeholder {
  width: 10px;
  height: 10px;
}

.watchlist-marker-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.watchlist-marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.watchlist-marker--position {
  background: var(--accent);
}

.watchlist-marker--order {
  background: var(--info, var(--accent));
}

.watchlist-marker--alert {
  background: var(--warn);
}

.watchlist-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.watchlist-state-pill--stale {
  background: color-mix(in srgb, var(--line-strong) 45%, var(--bg-surface));
  color: var(--text-muted);
}

.watchlist-state-pill--halted {
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-surface));
  color: var(--warn);
}

.watchlist-state-pill--reject {
  background: color-mix(in srgb, var(--bad) 14%, var(--bg-surface));
  color: var(--bad);
}

.execution-rail-layout {
  display: grid;
  grid-template-rows: 36px 32px minmax(0, 1fr) 36px 36px 32px 36px;
  gap: var(--space-8);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.execution-rail-header-row,
.execution-position-summary,
.inline-blocker-row,
.risk-preview-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  white-space: nowrap;
  overflow: hidden;
}

.execution-rail-header-row {
  min-height: 36px;
}

.execution-rail-kicker {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.execution-rail-symbol {
  justify-self: center;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.execution-rail-meta {
  justify-self: end;
  color: var(--text-faint);
  font-size: 12px;
}

.order-ticket {
  display: grid;
  grid-auto-rows: 32px;
  gap: var(--space-4);
  min-height: 0;
  overflow: hidden;
  padding: var(--space-8);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
}

.order-ticket-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 32px;
  color: var(--text-body);
  font-size: 12px;
  white-space: nowrap;
}

.order-ticket-row strong {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-ticket-control-group {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.order-ticket-control,
.order-ticket-input {
  height: 28px;
  min-height: 28px;
  border: 1px solid var(--line-subtle);
  border-radius: 6px;
  background: var(--bg-surface-alt);
  color: var(--text-body);
  font-size: 12px;
}

.order-ticket-control[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-subtle));
  color: var(--accent);
  background: var(--accent-soft);
}

.order-ticket-control:hover,
.order-ticket-input:hover,
.blotter-tab:hover,
.placeholder-pill:hover {
  border-color: var(--line-strong);
  background: var(--bg-surface-muted);
}

.order-ticket-control:focus-visible,
.order-ticket-input:focus-visible,
.blotter-tab:focus-visible,
.placeholder-pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.order-ticket-input {
  width: 100%;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.safety-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 32px;
  padding: 0 4px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  overflow-x: auto;
  overflow-y: hidden;
}

.safety-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
}

.safety-pill.is-active {
  border-color: color-mix(in srgb, var(--bad) 26%, var(--line-subtle));
  background: color-mix(in srgb, var(--bad) 9%, var(--bg-surface));
  color: var(--bad);
}

.submit-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  min-height: 36px;
  padding-top: var(--space-4);
  background: var(--bg-surface);
}

.blotter-layout {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.blotter-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface);
}

.blotter-tab {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.blotter-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line-subtle));
  color: var(--accent);
  background: var(--accent-soft);
}

.blotter-filter-symbol {
  justify-self: end;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.blotter-filter-symbol strong {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.blotter-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
}

.blotter-header,
.blotter-row {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.6fr 0.9fr 0.8fr 1fr;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.blotter-header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 36px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blotter-row {
  border-bottom: 1px solid color-mix(in srgb, var(--line-subtle) 80%, transparent);
}

.blotter-row:last-child {
  border-bottom: 0;
}

.blotter-row span,
.blotter-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-chip-placeholder {
  min-width: 0;
  min-height: 34px;
  border-top: 0;
  border-right: 1px solid var(--line-subtle);
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  justify-content: flex-start;
}

.context-chip-placeholder:last-child {
  border-right: 0;
}

.shell-button:focus-visible,
.placeholder-nav-link:focus-visible,
.overlay-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.bar-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.bar-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}

.bar-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-body);
}

.account-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  overflow: hidden;
}

.metric-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
  color: var(--text-body);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

.metric-chip strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.overlay-panel {
  position: absolute;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  box-shadow: var(--shadow-overlay);
}

.overlay-panel.is-open {
  display: flex;
}

.bell-tray {
  top: calc(var(--topbar-h) + 8px);
  right: 16px;
  width: 320px;
  max-height: calc(100vh - 32px);
  border-radius: var(--radius-panel);
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border-bottom: 1px solid var(--line-subtle);
}

.overlay-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-height: 0;
  padding: var(--space-16);
  overflow: auto;
}

#bellTray .overlay-body {
  padding: 0;
  gap: 0;
}

.overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
  color: var(--text-body);
}

.toast-layer {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: grid;
  gap: var(--space-8);
  width: 280px;
  pointer-events: none;
}

.toast-card {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: rgba(16, 22, 28, 0.94);
  color: #f4f7fb;
  font-size: var(--text-body-sm);
  box-shadow: var(--shadow-overlay);
}

.modal-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--bg-overlay);
}

.modal-layer.is-open {
  display: flex;
}

.shell-size-guard {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: rgba(10, 15, 20, 0.72);
}

.modal-card {
  width: min(420px, calc(100vw - 48px));
  padding: var(--space-20);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: var(--bg-surface);
  box-shadow: var(--shadow-overlay);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 1419px) {
  :root {
    --right-rail-w: 328px;
  }

  .top-bar-content {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: var(--space-8);
  }

  .top-bar-workspace {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-meta-pill {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-header-full,
  .flow-row-full {
    grid-template-columns:
      56px
      40px
      56px
      32px
      82px
      34px
      50px
      50px
      62px
      48px
      52px
      62px
      54px
      72px;
    min-width: 730px;
  }
}

@media (max-width: 1240px) {
  :root {
    --flow-h: 430px;
  }

  .app-shell {
    height: 100%;
    min-height: 100vh;
  }

  .workspace-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .workspace-left { min-height: auto; }

  .workspace-right {
    grid-template-rows:
      minmax(220px, auto)
      minmax(240px, auto)
      minmax(240px, auto)
      minmax(170px, auto)
      minmax(120px, auto);
    overflow: visible;
  }

  .chart-canvas-target {
    min-height: clamp(300px, 46vh, 520px);
  }

  .chart-header-title {
    display: none;
  }

  .flow-header-full,
  .flow-row-full {
    grid-template-columns:
      54px
      40px
      54px
      32px
      80px
      34px
      50px
      60px
      48px
      52px
      62px
      56px;
    min-width: 640px;
  }

  .flow-col-bs,
  .flow-col-conds {
    display: none;
  }
}

@media (max-width: 980px) {
  :root {
    --flow-h: 430px;
  }

  .top-bar-content {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .top-bar-utilities .status-pill {
    display: none;
  }

  .flow-sentiment-bar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .chart-header-row {
    grid-template-columns: auto 1fr auto;
    min-height: 32px;
    padding: 0 8px;
  }

  .chart-header-symbol {
    font-size: 14px;
  }

  .chart-ohlcv-row {
    display: none;
  }

  .posture-lane {
    font-size: 11px;
    padding: 0 8px;
  }

  .range-chip {
    min-width: 34px;
    min-height: 26px;
    padding: 0 8px;
    font-size: 12px;
  }

  .flow-header-full,
  .flow-row-full {
    grid-template-columns:
      52px
      40px
      52px
      32px
      34px
      52px
      56px
      46px
      50px
      62px;
    min-width: 560px;
  }

  .flow-col-contract,
  .flow-col-type {
    display: none;
  }

  .flow-meta-pill {
    max-width: 200px;
    font-size: 9px;
  }
}

.stage13-observation-panel {
  padding: 16px;
  background: transparent;
}

.stage13-observation-card {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-surface);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.stage13-header {
  display: grid;
  gap: 4px;
}

.stage13-kicker {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stage13-title {
  margin: 0;
  font-size: var(--text-heading-sm);
  color: var(--text-body);
}

.stage13-copy {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage13-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage13-block {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-surface-alt);
  padding: 10px 12px;
}

.stage13-block h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-body-sm);
  color: var(--text-body);
}

.stage13-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage13-list strong {
  color: var(--text-body);
  font-weight: 600;
}

@media (max-width: 980px) {
  .stage13-grid {
    grid-template-columns: 1fr;
  }
}

.stage14-governance-panel {
  padding: 16px;
  background: transparent;
}

.stage14-governance-card {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-surface);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.stage14-header {
  display: grid;
  gap: 4px;
}

.stage14-kicker {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stage14-title {
  margin: 0;
  font-size: var(--text-heading-sm);
  color: var(--text-body);
}

.stage14-copy {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage14-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage14-block {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-surface-alt);
  padding: 10px 12px;
}

.stage14-block h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-body-sm);
  color: var(--text-body);
}

.stage14-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage14-list strong {
  color: var(--text-body);
  font-weight: 600;
}

@media (max-width: 980px) {
  .stage14-grid {
    grid-template-columns: 1fr;
  }
}

.stage12-observation-panel {
  padding: 16px;
  background: transparent;
}

.stage12-observation-card {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-surface);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.stage12-header {
  display: grid;
  gap: 4px;
}

.stage12-kicker {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stage12-title {
  margin: 0;
  font-size: var(--text-heading-sm);
  color: var(--text-body);
}

.stage12-copy {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage12-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stage12-block {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card);
  background: var(--bg-surface-alt);
  padding: 10px 12px;
}

.stage12-block h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-body-sm);
  color: var(--text-body);
}

.stage12-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.stage12-list strong {
  color: var(--text-body);
  font-weight: 600;
}

@media (max-width: 980px) {
  .stage12-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SPY DECISION WORKSPACE — MODULE STYLES
   ============================================================ */

/* Shared module frame (used by all 8 signal modules) */
.module-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 30px;
  max-height: 30px;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface-alt);
  flex-shrink: 0;
}

.module-head-actions,
.module-head-tags {
  display: flex;
  align-items: center;
  gap: var(--space-6, 6px);
  min-width: 0;
}

.module-kicker {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-meta {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}

.module-meta-value {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 11px;
}

.module-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.module-badge--good {
  background: color-mix(in srgb, var(--good) 12%, var(--bg-surface));
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line-subtle));
}

.module-badge--warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-surface));
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line-subtle));
}

.module-badge--bad {
  background: color-mix(in srgb, var(--bad) 10%, var(--bg-surface));
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 25%, var(--line-subtle));
}

.module-tag {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 6px;
  border: 1px solid var(--line-subtle);
  border-radius: 4px;
  background: var(--bg-surface-muted);
  color: var(--text-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.module-tag--muted {
  color: var(--text-muted);
}

.module-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  flex-shrink: 0;
}

/* ── Decision Center ─────────────────────────────────────── */

.decision-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-8) var(--space-12);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.decision-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  min-height: 0;
}

.decision-signal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.decision-ctx {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.decision-ctx-line {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.decision-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.decision-cell--wide {
  grid-column: span 1;
}

.decision-label {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.decision-value {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decision-value--accent {
  color: var(--accent);
}

.decision-value--large {
  font-size: 13px;
}

.decision-value--good { color: var(--good); }
.decision-value--warn { color: var(--warn); }
.decision-value--bad  { color: var(--bad); }

.signal-bar-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface-muted);
  border: 1px solid var(--line-subtle);
  overflow: hidden;
}

.signal-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.signal-bar-fill--good { background: var(--good); }
.signal-bar-fill--warn { background: var(--warn); }
.signal-bar-fill--bad  { background: var(--bad); }

.signal-bar-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

.signal-bar-value--good { color: var(--good); }
.signal-bar-value--warn { color: var(--warn); }
.signal-bar-value--bad  { color: var(--bad); }

/* ── Regime Filter ───────────────────────────────────────── */

.regime-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.regime-pillar {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 38px;
  align-items: center;
  gap: var(--space-6, 6px);
  min-height: 22px;
}

.regime-pillar-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regime-pillar-track {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: var(--bg-surface-muted);
  border: 1px solid var(--line-subtle);
  overflow: hidden;
}

.regime-pillar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.regime-pillar-fill--good { background: var(--good); }
.regime-pillar-fill--warn { background: color-mix(in srgb, var(--warn) 80%, transparent); }
.regime-pillar-fill--bad  { background: color-mix(in srgb, var(--bad) 70%, transparent); }

.regime-pillar-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.regime-pillar-value--good { color: var(--good); }
.regime-pillar-value--warn { color: var(--warn); }
.regime-pillar-value--bad  { color: var(--bad); }

.regime-overnight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-subtle);
}

.regime-overnight-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  min-width: 74px;
}

.regime-overnight-values {
  display: flex;
  gap: 6px;
  flex: 1;
}

.regime-overnight-bias {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

.regime-overnight-bias--good { color: var(--good); }
.regime-overnight-bias--warn { color: var(--warn); }
.regime-overnight-bias--bad  { color: var(--bad); }

.regime-overnight-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.regime-overnight-tag--good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.regime-overnight-tag--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.regime-overnight-tag--bad  { color: var(--bad);  background: color-mix(in srgb, var(--bad) 12%, transparent); }

.regime-warn-icon {
  font-size: 9px;
  opacity: 0.8;
}

.regime-composite {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subtle);
}

.regime-composite-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.regime-composite-score {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── Breaking Market Feed ────────────────────────────────── */

.feed-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  min-height: calc(var(--feed-visible-cards) * var(--feed-card-h));
  max-height: calc(var(--feed-visible-cards) * var(--feed-card-h));
  overflow-y: auto;
  overflow-x: hidden;
}

.feed-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-8);
  min-height: 30px;
  padding: 5px var(--space-12);
  border-bottom: 1px solid color-mix(in srgb, var(--line-subtle) 60%, transparent);
}

.feed-item:last-child {
  border-bottom: 0;
}

.feed-time {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}

.feed-headline {
  color: var(--text-body);
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feed-tag {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  white-space: nowrap;
  align-self: start;
  margin-top: 2px;
}

.feed-tag--bad,
.feed-tag--risk-off {
  background: color-mix(in srgb, var(--bad) 10%, var(--bg-surface));
  color: var(--bad);
}

.feed-tag--warn,
.feed-tag--caution,
.feed-tag--watch {
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-surface));
  color: var(--warn);
}

.feed-tag--good {
  background: color-mix(in srgb, var(--good) 10%, var(--bg-surface));
  color: var(--good);
}

.feed-tag--neutral,
.feed-tag--info {
  background: var(--bg-surface-muted);
  color: var(--text-muted);
}

.feed-empty {
  padding: var(--space-12);
  color: var(--text-faint);
  font-size: 12px;
}

/* ── Desk Copilot ────────────────────────────────────────── */

.copilot-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px var(--space-12) var(--space-8);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Status chip */
.copilot-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  flex-shrink: 0;
}
.copilot-status-chip--good     { background: rgba(23,135,95,0.1);  border: 1px solid rgba(23,135,95,0.25); }
.copilot-status-chip--eligible { background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.25); }
.copilot-status-chip--warn     { background: rgba(183,121,31,0.1); border: 1px solid rgba(183,121,31,0.25); }
.copilot-status-chip--bad      { background: rgba(209,69,59,0.08); border: 1px solid rgba(209,69,59,0.2); }

.copilot-chip-verdict {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.copilot-status-chip--good     .copilot-chip-verdict { color: var(--good); }
.copilot-status-chip--eligible .copilot-chip-verdict { color: #d97706; }
.copilot-status-chip--warn     .copilot-chip-verdict { color: var(--warn); }
.copilot-status-chip--bad      .copilot-chip-verdict { color: var(--bad); }

.copilot-score-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}

/* Structured rows */
.copilot-struct-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
  flex-shrink: 0;
}

.copilot-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--line-subtle);
  min-width: 0;
}
.copilot-row:last-child { border-bottom: none; }

.copilot-row-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.copilot-row-value {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-body);
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

/* WHY NOT / WHAT WOULD CHANGE blocks */
.copilot-blocks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.copilot-block {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.copilot-block-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 3px 8px;
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--line-subtle);
}

.copilot-block-item {
  font-size: 11px;
  color: var(--text-body);
  padding: 3px 8px;
  border-bottom: 1px solid var(--line-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copilot-block-item:last-child { border-bottom: none; }
.copilot-block-item--good { color: var(--good); }
.copilot-block-item--warn { color: var(--warn, #f5a623); }
.copilot-empty-item { color: var(--text-faint); }

.copilot-gov-list {
  display: flex;
  flex-direction: column;
}

.copilot-gov-item {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-subtle);
}

.copilot-gov-item:last-child {
  border-bottom: none;
}

.copilot-gov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copilot-gov-title {
  color: var(--text-body);
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-gov-state {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.copilot-gov-state--good { color: var(--good); }
.copilot-gov-state--warn { color: var(--warn); }

.copilot-gov-meta {
  margin-top: 2px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copilot-gov-reason {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.copilot-gov-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}

/* Action row */
.copilot-action-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  min-height: 26px;
  padding: 5px var(--space-8);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-subtle));
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  flex-shrink: 0;
}

.copilot-action-label {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 1px;
}

.copilot-action-text {
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  flex: 1;
}

.copilot-action-cond {
  font-size: 10px;
  color: var(--text-muted);
  white-space: normal;
  word-break: break-word;
  width: 100%;
}

.copilot-empty {
  color: var(--text-faint);
  font-size: 12px;
  padding: var(--space-4) 0;
}

/* Legacy bullet classes (keep for compatibility) */
.copilot-bullets { display: none; }
.copilot-bullet  { display: none; }
.copilot-dot     { display: none; }
.copilot-text    { display: none; }

/* ── SPY Unusual Flow ────────────────────────────────────── */

.flow-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.flow-header {
  display: grid;
  grid-template-columns: 44px 48px 44px 40px minmax(0, 1fr) 32px;
  gap: var(--space-6, 6px);
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface-alt);
  position: sticky;
  top: 0;
  z-index: 1;
}

.flow-header span {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-row {
  display: grid;
  grid-template-columns: 44px 48px 44px 40px minmax(0, 1fr) 32px;
  gap: var(--space-6, 6px);
  align-items: center;
  min-height: 26px;
  padding: 0 var(--space-12);
  border-bottom: 1px solid color-mix(in srgb, var(--line-subtle) 50%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.flow-row:last-child {
  border-bottom: 0;
}

.flow-time   { color: var(--text-faint); white-space: nowrap; }
.flow-strike { color: var(--text-strong); font-weight: 600; white-space: nowrap; }
.flow-exp    { color: var(--text-muted); white-space: nowrap; }
.flow-prem   { color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-flag   { color: var(--warn); white-space: nowrap; }

.flow-side { font-weight: 600; white-space: nowrap; }
.flow-side--good { color: var(--good); }
.flow-side--bad  { color: var(--bad); }

.flow-empty {
  padding: var(--space-12);
  color: var(--text-faint);
  font-size: 12px;
}

/* ── Setup Reason ────────────────────────────────────────── */

.setup-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 6px);
  padding: var(--space-8) var(--space-12);
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.setup-text {
  margin: 0;
  color: var(--text-body);
  font-size: 11px;
  line-height: 1.45;
  overflow: visible;
  display: block;
  flex: 0 0 auto;
}

.setup-levels {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
  border-top: 1px solid var(--line-subtle);
  padding-top: var(--space-6, 6px);
}

.setup-level {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.setup-level-label {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.setup-level-value {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
}

.setup-level-value--good { color: var(--good); }
.setup-level-value--bad  { color: var(--bad); }

.setup-peak {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Market Structure ────────────────────────────────────── */

.structure-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-6, 6px) var(--space-12);
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.structure-level {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-8);
  min-height: 20px;
  padding: 1px 0;
}

.structure-level--key {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.structure-level-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.structure-level-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

.structure-level-value--good { color: var(--good); }
.structure-level-value--bad  { color: var(--bad); }

.structure-level-rel {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
}

.structure-empty {
  color: var(--text-faint);
  font-size: 12px;
  padding: var(--space-8) 0;
}

.market-structure-pane .module-frame {
  height: auto;
}

/* ── Shadow Account ──────────────────────────────────────── */

.shadow-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.shadow-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  min-height: 20px;
}

.shadow-metric-label {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shadow-metric-value {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}

.shadow-metric-value--good { color: var(--good); }
.shadow-metric-value--warn { color: var(--warn); }
.shadow-metric-value--bad  { color: var(--bad); }

.shadow-adherence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subtle);
}

.shadow-adherence-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.shadow-adherence-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface-muted);
  border: 1px solid var(--line-subtle);
  overflow: hidden;
}

.shadow-adherence-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.shadow-adherence-fill--good { background: var(--good); }
.shadow-adherence-fill--warn { background: var(--warn); }
.shadow-adherence-fill--bad  { background: var(--bad); }

.shadow-adherence-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

.shadow-adherence-value--good { color: var(--good); }
.shadow-adherence-value--warn { color: var(--warn); }
.shadow-adherence-value--bad  { color: var(--bad); }

/* ── Breaking Market Feed — news cards ───────────────────── */

.feed-card {
  display: grid;
  gap: 4px;
  min-height: var(--feed-card-h);
  padding: var(--space-12);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.feed-card:last-child {
  border-bottom: 0;
}

.feed-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.feed-card-source {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-card-age {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.feed-card-age--fresh  { color: var(--good); }
.feed-card-age--warn   { color: var(--warn); }
.feed-card-age--stale  { color: var(--text-faint); }

.feed-card-headline {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-desc {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 6px);
  margin-top: 2px;
}

.feed-card-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.feed-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.feed-card-tag--bad    { background: color-mix(in srgb, var(--bad) 10%, var(--bg-surface)); color: var(--bad); }
.feed-card-tag--warn   { background: color-mix(in srgb, var(--warn) 12%, var(--bg-surface)); color: var(--warn); }
.feed-card-tag--good   { background: color-mix(in srgb, var(--good) 10%, var(--bg-surface)); color: var(--good); }
.feed-card-tag--accent { background: var(--accent-soft); color: var(--accent); }
.feed-card-tag--neutral { background: var(--bg-surface-muted); color: var(--text-muted); }

.feed-card-ticker {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Chart range ribbon (replaces context chips) ─────────── */

.range-ribbon {
  display: flex;
  align-items: center;
  gap: var(--space-6, 6px);
  min-height: 34px;
  max-height: 34px;
  padding: 0 var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.range-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
}

.range-chip.is-active,
.range-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-subtle));
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.range-chip:hover:not(.is-active) {
  border-color: var(--line-strong);
  background: var(--bg-surface-muted);
}

/* ── Bell tray improvements ──────────────────────────────── */

.bell-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-8);
  min-height: 36px;
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid color-mix(in srgb, var(--line-subtle) 60%, transparent);
}

.bell-item:last-child {
  border-bottom: 0;
}

.bell-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}

.bell-item-dot--stale   { background: var(--text-faint); }
.bell-item-dot--halted  { background: var(--warn); }
.bell-item-dot--news    { background: var(--accent); }
.bell-item-dot--review  { background: var(--good); }
.bell-item-dot--bad     { background: var(--bad); }

.bell-item-text {
  color: var(--text-body);
  font-size: 12px;
  line-height: 1.45;
}

.bell-item-tone {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}

/* ── Chart canvas (Lightweight Charts) ──────────────────────── */

.chart-frame--dark {
  background: #0b0f14;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.chart-canvas-target {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 42vh, 520px);
}

.chart-canvas-target .chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-faint);
  font-size: 12px;
}

.chart-canvas-target {
  min-height: clamp(260px, 40vh, 520px);
  cursor: grab;
}

.chart-canvas-target * {
  cursor: inherit !important;
}

.chart-canvas-target.is-dragging {
  cursor: grabbing;
}

.chart-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--line-subtle);
}

.chart-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chart-range-btn {
  border: 1px solid var(--line-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  border-radius: 8px;
  min-height: 24px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}

.chart-range-btn:hover {
  border-color: var(--line-strong);
  color: var(--text-body);
}

.chart-range-btn.is-active {
  border-color: var(--line-strong);
  background: var(--bg-surface-alt);
  color: var(--text-strong);
}

.chart-feed {
  border: 1px solid var(--line-subtle);
  border-radius: 999px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.chart-feed[data-tone="ok"] {
  color: var(--col-good);
}

.chart-feed[data-tone="warn"] {
  color: #9a7f2f;
}

.chart-feed[data-tone="bad"] {
  color: var(--col-bad);
}

/* OHLCV crosshair row in chart header */
.chart-ohlcv-row {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ohlcv-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ohlcv-item b {
  color: var(--text-strong);
  font-weight: 600;
}

.chart-header-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Flow module — dark chedda style ────────────────────────── */

.module-frame--dark {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.07);
}

.module-head--dark {
  background: #0d1117;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.module-kicker--dark {
  color: #8a9bb0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Flow full table */
.flow-body--full {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.flow-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-alt);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.flow-sentiment-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(120px, 1fr));
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-surface-alt);
}

.flow-stat-cell {
  min-width: 0;
}

.flow-stat-label {
  display: block;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-stat-val,
.flow-sentiment-val {
  display: block;
  margin-top: 3px;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.flow-stat-pct {
  margin-left: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.flow-stat-val--good,
.flow-sentiment-val--good {
  color: var(--good);
}

.flow-stat-val--bad,
.flow-sentiment-val--bad {
  color: var(--bad);
}

.flow-sentiment-val--neutral {
  color: var(--warn);
}

.flow-sentiment-track {
  margin-top: 6px;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 60%, var(--bg-surface));
  overflow: hidden;
}

.flow-sentiment-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.2s ease;
}

.flow-sentiment-fill--good { background: var(--good); }
.flow-sentiment-fill--bad { background: var(--bad); }
.flow-sentiment-fill--neutral { background: var(--warn); }

.flow-table-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(var(--flow-head-h) + (var(--flow-visible-rows) * var(--flow-row-h)));
}

.flow-header-full,
.flow-row-full {
  display: grid;
  grid-template-columns:
    60px   /* time     */
    44px   /* tick     */
    60px   /* strike   */
    36px   /* c/p      */
    90px   /* contract */
    36px   /* dte      */
    54px   /* side     */
    54px   /* b/s      */
    66px   /* spot     */
    50px   /* size     */
    56px   /* price    */
    66px   /* prem     */
    56px   /* type     */
    80px;  /* conds    */
  align-items: center;
  padding: 0 8px;
  min-width: 810px;
}

.flow-header-full {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--line-subtle);
  min-height: var(--flow-head-h);
  padding-top: 0;
  padding-bottom: 0;
}

.flow-header-full .flow-col {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.flow-row-full {
  border-bottom: 1px solid var(--line-subtle);
  min-height: var(--flow-row-h);
  padding-top: 0;
  padding-bottom: 0;
  transition: background 0.1s;
}
.flow-row-full:hover { background: var(--bg-surface-muted); }

.flow-col {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.flow-cp--good  { color: var(--good); font-weight: 600; }
.flow-cp--bad   { color: var(--bad);  font-weight: 600; }
.flow-col-dte   { color: var(--warn); font-weight: 700; }
.flow-side--good { color: var(--good); }
.flow-side--bad  { color: var(--bad);  }
.flow-prem--good { color: var(--good); }
.flow-prem--bad  { color: var(--bad);  }

.flow-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-right: 2px;
}
.flow-tag--sweep   { background: rgba(37,99,235,0.1);  color: #2563eb; }
.flow-tag--block   { background: rgba(124,58,237,0.1); color: #7c3aed; }
.flow-tag--auto    { background: var(--bg-surface-muted); color: var(--text-muted); }
.flow-tag--unusual { background: rgba(245,158,11,0.12); color: #d97706; }
.flow-tag--proxy   { background: rgba(245,158,11,0.2); color: #b45309; }
.flow-tag--trade   { background: rgba(22,163,74,0.18); color: #15803d; }

.flow-source-note {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 4px 8px 6px 8px;
}

.flow-empty-full {
  padding: 20px 8px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* ── Desk Copilot — expandable ───────────────────────────────── */

.copilot-expand-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.15s;
}
.copilot-expand-btn:hover { color: var(--text-body); }

[data-testid="desk-copilot"].is-expanded .copilot-expand-btn {
  transform: rotate(180deg);
}

.copilot-expanded {
  display: none;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
  overflow-y: visible;
  margin-top: var(--space-4);
}

[data-testid="desk-copilot"].is-expanded .copilot-expanded {
  display: flex;
}

.copilot-section {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}

.copilot-section-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.copilot-expand-item {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
  padding: 2px 0;
}

.copilot-expand-sev {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
  min-width: 40px;
}
.copilot-expand-sev--good { color: var(--good); }
.copilot-expand-sev--bad  { color: var(--bad);  }
.copilot-expand-item--high   .copilot-expand-sev { color: var(--bad); }
.copilot-expand-item--medium .copilot-expand-sev { color: var(--warn); }
.copilot-expand-item--low    .copilot-expand-sev { color: var(--good); }

.copilot-expand-dot {
  color: var(--text-faint);
  flex-shrink: 0;
}

.copilot-prohibit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.copilot-prohibit {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-surface-muted);
  color: var(--bad);
  border: 1px solid rgba(247,107,107,0.2);
}

/* ── Copilot proposals ───────────────────────────────────────── */

.copilot-proposals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copilot-proposal {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
}

.copilot-proposal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.copilot-proposal-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-card);
}
.copilot-proposal-status--good { color: var(--good); border: 1px solid rgba(78,205,139,0.3); }
.copilot-proposal-status--warn { color: var(--warn); border: 1px solid rgba(255,184,0,0.3); }
.copilot-proposal-status--dim  { color: var(--text-muted); border: 1px solid var(--border); }

.copilot-proposal-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
}

.copilot-proposal-desc {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 5px;
  line-height: 1.4;
}

.copilot-proposal-diff {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.copilot-proposal-diff code {
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-body);
  font-size: 10px;
}
.copilot-proposal-diff-label { color: var(--text-muted); }
.copilot-proposal-diff-arrow { color: var(--warn); font-weight: 600; }

.copilot-proposal-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.copilot-proposal-btn {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.copilot-proposal-btn:hover { color: var(--text-body); border-color: var(--text-muted); }
.copilot-proposal-btn--promote { color: var(--good); border-color: rgba(78,205,139,0.4); }
.copilot-proposal-btn--promote:hover { background: rgba(78,205,139,0.08); }
.copilot-proposal-btn--watch   { color: var(--warn); border-color: rgba(255,184,0,0.4); }
.copilot-proposal-btn--watch:hover   { background: rgba(255,184,0,0.08); }
.copilot-proposal-btn--ignore:hover  { color: var(--bad); border-color: rgba(247,107,107,0.4); }

.copilot-critique-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.copilot-critique-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  border: 1px solid var(--line-subtle);
  border-radius: 4px;
  background: var(--bg-surface-alt);
  min-width: 0;
}

.copilot-critique-k {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.copilot-critique-v {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* When expanded: body scrolls freely */
[data-testid="desk-copilot"].is-expanded .copilot-body {
  overflow-y: auto;
}

/* ── Alert Lifecycle ─────────────────────────────────────────── */

.alert-lifecycle-pane:has([data-testid="alert-lifecycle"].is-expanded) {
  overflow-y: auto;
}

.alc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px var(--space-12) var(--space-8);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.alc-empty {
  padding: 16px var(--space-12);
  font-size: 11px;
  color: var(--text-faint);
}

.alc-banner {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  flex-shrink: 0;
}
.alc-banner--armed {
  background: rgba(78,205,139,0.1);
  border: 1px solid rgba(78,205,139,0.3);
  color: var(--good);
}

.alc-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.alc-chip--good { background: rgba(78,205,139,0.12); color: var(--good); border: 1px solid rgba(78,205,139,0.3); }
.alc-chip--warn { background: rgba(255,184,0,0.12);  color: var(--warn); border: 1px solid rgba(255,184,0,0.3); }
.alc-chip--bad  { background: rgba(247,107,107,0.12);color: var(--bad);  border: 1px solid rgba(247,107,107,0.3); }
.alc-chip--dim  { background: var(--bg-surface-muted); color: var(--text-muted); border: 1px solid var(--border); }

.alc-record {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.alc-record--armed      { border-color: rgba(78,205,139,0.3); }
.alc-record--invalidated{ border-color: rgba(247,107,107,0.3); }
.alc-record--disarmed   { border-color: rgba(255,184,0,0.3); }

.alc-record-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
}

.alc-record-contract {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alc-record-dir {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}
.alc-record-dir--call { color: var(--good); background: rgba(78,205,139,0.1); }
.alc-record-dir--put  { color: var(--bad);  background: rgba(247,107,107,0.1); }

.alc-record-time {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
}

.alc-snapshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.alc-snapshot-col {
  padding: 6px 8px;
  background: var(--bg-surface);
}

.alc-snapshot-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.alc-snapshot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 5px;
}
.alc-snapshot-meta span {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.alc-gate-matrix {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.alc-gate-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 0;
}
.alc-gate-row--flipped {
  background: rgba(247,107,107,0.06);
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 -3px;
}

.alc-gate-dot {
  font-size: 9px;
  flex-shrink: 0;
  width: 12px;
}
.alc-gate-dot--pass { color: var(--good); }
.alc-gate-dot--fail { color: var(--bad); }

.alc-gate-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 74px;
}

.alc-gate-reason {
  font-size: 9px;
  color: var(--bad);
  line-height: 1.3;
  word-break: break-word;
}

.alc-invalidation-banner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(247,107,107,0.06);
  border-top: 1px solid rgba(247,107,107,0.2);
}

.alc-inv-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bad);
  flex-shrink: 0;
}

.alc-inv-gate {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--bad);
  flex-shrink: 0;
}

.alc-inv-reason {
  font-size: 10px;
  color: var(--text-muted);
  flex: 1;
  word-break: break-word;
}

.alc-inv-time {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── Breaking feed — linked cards ────────────────────────────── */

.feed-card--linked {
  display: block;
  text-decoration: none;
  color: inherit;
}
.feed-card--linked:hover {
  background: var(--bg-surface-alt);
  border-color: var(--border-default);
}
.feed-card--linked:hover .feed-card-headline {
  color: var(--accent);
}

.feed-card-link-icon {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: auto;
  flex-shrink: 0;
}

.feed-card-desk-note {
  font-size: 10px;
  color: var(--accent);
  font-style: italic;
  padding: 2px 0;
  line-height: 1.4;
}

/* ── v3 · Breaking News panel (Phase 2.1, behind ?v=next) ─── */

.bn-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.bn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(8, 11, 22, 0.6);
}

.bn-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sf-amber-20);
  border: 1px solid var(--sf-amber-40);
  color: var(--sf-amber);
  display: grid;
  place-items: center;
}

.bn-icon svg {
  width: 16px;
  height: 16px;
}

.bn-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bn-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-fog);
}

.bn-title-cursor {
  color: var(--sf-amber);
}

.bn-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.bn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
  white-space: nowrap;
}

.bn-chip--live {
  background: var(--sf-lime-10);
  color: var(--sf-lime);
  border-color: var(--sf-lime-40);
}

.bn-chip--amber {
  background: var(--sf-amber-20);
  color: var(--sf-amber);
  border-color: var(--sf-amber-40);
}

.bn-chip--lime {
  background: var(--sf-lime-20);
  color: var(--sf-lime);
  border-color: var(--sf-lime-40);
}

.bn-chip--magenta {
  background: var(--sf-magenta-20);
  color: var(--sf-magenta);
  border-color: var(--sf-magenta-40);
}

/* ─── v3 breaking_news filter tabs + hour badge ─────────────────── */
.bn-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.bn-tab {
  padding: 4px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sf-dust);
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.bn-tab:hover { color: var(--sf-fog); }
.bn-tab.is-active {
  background: var(--sf-cyan-10);
  color: var(--sf-cyan);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.4);
}
.bn-hourbadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border-2);
  color: var(--sf-mist);
  font-family: var(--sf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Filter rows via data attribute on root. */
.bn-panel[data-bn-active="MACRO"]    .bn-row:not([data-bn-cat="MACRO"])    { display: none; }
.bn-panel[data-bn-active="FLOW"]     .bn-row:not([data-bn-cat="FLOW"])     { display: none; }
.bn-panel[data-bn-active="EARNINGS"] .bn-row:not([data-bn-cat="EARNINGS"]) { display: none; }
.bn-panel[data-bn-active="GEOPOL"]   .bn-row:not([data-bn-cat="GEOPOL"])   { display: none; }

.bn-chip--neutral {
  background: var(--sf-surface);
  color: var(--sf-mist);
  border-color: var(--sf-border-2);
}

.bn-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-lime);
  box-shadow: 0 0 6px var(--sf-lime);
  animation: bn-blink 1.4s ease-in-out infinite;
}

@keyframes bn-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-led { animation: none; }
}

.bn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bn-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-border) 60%, transparent);
}

.bn-row:last-child { border-bottom: none; }

.bn-time {
  flex-shrink: 0;
  width: 56px;
  font-family: var(--font-mono);
}

.bn-time-clock {
  font-size: 11px;
  color: var(--sf-cyan);
}

.bn-time-rel {
  font-size: 9px;
  color: var(--sf-dust);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.bn-content {
  flex: 1;
  min-width: 0;
}

.bn-headline {
  font-size: 14px;
  color: var(--sf-fog);
  font-weight: 500;
  line-height: 1.35;
}

.bn-body {
  font-size: 12.5px;
  color: var(--sf-mist);
  line-height: 1.5;
  margin-top: 4px;
}

.bn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--sf-dust);
  letter-spacing: 0.08em;
}

.bn-impact--magenta { color: var(--sf-magenta); }
.bn-impact--amber   { color: var(--sf-amber); }
.bn-impact--lime    { color: var(--sf-lime); }
.bn-impact--neutral { color: var(--sf-mist); }

.bn-pct--up   { color: var(--sf-up); }
.bn-pct--down { color: var(--sf-down); }

.bn-source { color: var(--sf-mist); }

.bn-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--sf-dust);
  font-size: 12px;
}

/* ── v3 · Econ Calendar panel (Phase 2.2, behind ?v=next) ─── */

.ec-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--sf-fog);
  font-family: var(--font-sans);
  margin-top: 12px;
}

.ec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(8, 11, 22, 0.6);
}

.ec-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.40);
  color: #a78bfa;
  display: grid;
  place-items: center;
}

.ec-icon svg { width: 16px; height: 16px; }

.ec-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ec-title { font-size: 13px; font-weight: 600; color: var(--sf-fog); }
.ec-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.ec-list { list-style: none; margin: 0; padding: 0; }

.ec-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-border) 60%, transparent);
}

.ec-row:last-child { border-bottom: none; }

.ec-when {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}

.ec-day {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
}

.ec-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sf-fog);
  margin-top: 2px;
}

.ec-time--magenta { color: var(--sf-magenta); }
.ec-time--amber   { color: var(--sf-amber); }
.ec-time--lime    { color: var(--sf-fog); }

.ec-content { flex: 1; min-width: 0; }

.ec-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.ec-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
}

.ec-chip--magenta { background: var(--sf-magenta-20); color: var(--sf-magenta); border-color: var(--sf-magenta-40); }
.ec-chip--amber   { background: var(--sf-amber-20);   color: var(--sf-amber);   border-color: var(--sf-amber-40); }
.ec-chip--lime    { background: var(--sf-lime-20);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }

.ec-name { font-size: 13px; font-weight: 600; color: var(--sf-fog); line-height: 1.3; }

.ec-fc {
  font-size: 11px;
  color: var(--sf-mist);
  margin-top: 2px;
}

.ec-strong { color: var(--sf-fog); font-family: var(--font-mono); }

.ec-until {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.08em;
  margin-top: 6px;
}

.ec-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--sf-dust);
  font-size: 12px;
}

/* ── v3 · Regime Filter panel (Phase 2.3, behind ?v=next) ─── */

.rf-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}

.rf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rf-head-left { display: flex; align-items: center; gap: 8px; }

.rf-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sf-lime-20);
  border: 1px solid var(--sf-lime-40);
  color: var(--sf-lime);
  display: grid; place-items: center;
}

.rf-icon svg { width: 16px; height: 16px; }

.rf-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }

.rf-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.rf-kicker--amber { color: var(--sf-amber); }

.rf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
}

.rf-chip--lime    { background: var(--sf-lime-20);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }
.rf-chip--amber   { background: var(--sf-amber-20);   color: var(--sf-amber);   border-color: var(--sf-amber-40); }
.rf-chip--magenta { background: var(--sf-magenta-20); color: var(--sf-magenta); border-color: var(--sf-magenta-40); }

.rf-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rf-led--lime    { background: var(--sf-lime);    box-shadow: 0 0 6px var(--sf-lime); }
.rf-led--amber   { background: var(--sf-amber);   box-shadow: 0 0 6px var(--sf-amber); }
.rf-led--magenta { background: var(--sf-magenta); box-shadow: 0 0 6px var(--sf-magenta); }

.rf-hero {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sf-border);
}

.rf-divider { width: 1px; background: var(--sf-border); align-self: center; height: 40px; }

.rf-score, .rf-recommend { flex: 1; }

.rf-score-row { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }

.rf-score-val {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.rf-score-val--lime    { color: var(--sf-lime);    text-shadow: 0 0 12px rgba(110, 255, 158, 0.4); }
.rf-score-val--amber   { color: var(--sf-amber);   text-shadow: 0 0 12px rgba(255, 176, 32, 0.4); }
.rf-score-val--magenta { color: var(--sf-magenta); text-shadow: 0 0 12px rgba(255, 62, 158, 0.4); }

.rf-score-max { font-size: 11px; color: var(--sf-dust); font-family: var(--font-mono); }

.rf-recommend-row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.rf-recommend-row--lime    { color: var(--sf-lime); }
.rf-recommend-row--amber   { color: var(--sf-amber); }
.rf-recommend-row--magenta { color: var(--sf-magenta); }

.rf-recommend-desc {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.rf-recommend-desc--lime    { color: color-mix(in srgb, var(--sf-lime) 80%, transparent); }
.rf-recommend-desc--amber   { color: color-mix(in srgb, var(--sf-amber) 80%, transparent); }
.rf-recommend-desc--magenta { color: color-mix(in srgb, var(--sf-magenta) 80%, transparent); }

.rf-tristate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.rf-tristate-cell {
  padding: 8px 12px;
  text-align: center;
  border-radius: 4px;
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  color: var(--sf-dust);
}

.rf-tristate-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.rf-tristate-range {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-top: 2px;
  color: var(--sf-dust);
}

.rf-tristate-cell--active { font-weight: 700; }

.rf-tristate-cell--lime    { background: var(--sf-lime-10);    border-color: var(--sf-lime-40);    color: var(--sf-lime); }
.rf-tristate-cell--lime .rf-tristate-range { color: color-mix(in srgb, var(--sf-lime) 70%, transparent); }
.rf-tristate-cell--amber   { background: var(--sf-amber-10);   border-color: var(--sf-amber-40);   color: var(--sf-amber); }
.rf-tristate-cell--amber .rf-tristate-range { color: color-mix(in srgb, var(--sf-amber) 70%, transparent); }
.rf-tristate-cell--magenta { background: var(--sf-magenta-10); border-color: var(--sf-magenta-40); color: var(--sf-magenta); }
.rf-tristate-cell--magenta .rf-tristate-range { color: color-mix(in srgb, var(--sf-magenta) 70%, transparent); }

.rf-overnight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sf-border);
}

.rf-overnight-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-overnight-bias { font-size: 11px; font-family: var(--font-mono); color: var(--sf-mist); letter-spacing: 0.08em; }

.rf-factors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rf-factor {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  align-items: center;
  gap: 12px;
}

.rf-factor-label { font-size: 13px; color: var(--sf-mist); }

.rf-factor-track {
  position: relative;
  height: 6px;
  background: var(--sf-border);
  border-radius: 999px;
  overflow: hidden;
}

.rf-factor-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 999px;
}

.rf-factor-fill--lime    { background: var(--sf-lime); }
.rf-factor-fill--amber   { background: var(--sf-amber); }
.rf-factor-fill--magenta { background: var(--sf-magenta); }

.rf-factor-val {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.rf-factor-val--lime    { color: var(--sf-lime); }
.rf-factor-val--amber   { color: var(--sf-amber); }
.rf-factor-val--magenta { color: var(--sf-magenta); }

.rf-flip {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border);
}

.rf-flip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rf-flip-icon { width: 12px; height: 12px; color: var(--sf-amber); }

.rf-flip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rf-flip-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
}

.rf-flip-arrow { color: var(--sf-dust); flex-shrink: 0; }
.rf-flip-val { color: var(--sf-amber); }
.rf-flip-reason {
  color: var(--sf-mist);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.45;
}
.rf-flip-list { gap: 8px; }
.rf-flip-line {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: baseline;
}
.rf-flip-pillar {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.rf-flip-pillar--lime    { color: var(--sf-lime); }
.rf-flip-pillar--amber   { color: var(--sf-amber); }
.rf-flip-pillar--magenta { color: var(--sf-magenta); }

/* ── v3 · Shadow Account panel (Phase 2.4, behind ?v=next) ─── */

.sa-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.sa-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

.sa-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(139, 125, 255, 0.15);
  border: 1px solid rgba(139, 125, 255, 0.40);
  color: #8b7dff;
  display: grid; place-items: center;
}

.sa-icon svg { width: 16px; height: 16px; }

.sa-titles { display: flex; flex-direction: column; line-height: 1.2; }
.sa-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }
.sa-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sa-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 4px;
}

.sa-pnl {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.sa-pnl--lime    { color: var(--sf-lime);    text-shadow: 0 0 12px rgba(110, 255, 158, 0.4); }
.sa-pnl--magenta { color: var(--sf-magenta); text-shadow: 0 0 12px rgba(255, 62, 158, 0.4); }
.sa-pnl--fog     { color: var(--sf-fog); }

.sa-wl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
  margin-top: 4px;
}

.sa-goal { margin-top: 12px; }

.sa-goal-track {
  position: relative;
  height: 6px;
  background: var(--sf-border);
  border-radius: 999px;
  overflow: hidden;
}

.sa-goal-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 999px;
}

.sa-goal-fill--lime    { background: var(--sf-lime); }
.sa-goal-fill--magenta { background: var(--sf-magenta); }
.sa-goal-fill--fog     { background: var(--sf-mist); }

.sa-goal-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.08em;
}

.sa-twenty {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border);
}

.sa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sa-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
}

.sa-key { color: var(--sf-dust); }

.sa-val { color: var(--sf-fog); }
.sa-val--lime    { color: var(--sf-up); }
.sa-val--magenta { color: var(--sf-down); }
.sa-val--amber   { color: var(--sf-amber); }
.sa-val--fog     { color: var(--sf-fog); }

.sa-trades {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border);
}

.sa-trades-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.sa-trade {
  display: grid;
  grid-template-columns: 44px 40px 12px 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 0;
}

.sa-trade[data-status="open"] {
  background: rgba(110, 255, 158, 0.04);
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 3px;
}

.sa-trade-date           { font-size: 10px; letter-spacing: 0.04em; }
.sa-trade-date--dust     { color: var(--sf-dust); opacity: 0.65; }
.sa-trade-date--fog      { color: var(--sf-fog); }
.sa-trade-time     { color: var(--sf-dust); }
.sa-trade-dir      { text-align: center; }
.sa-trade-dir--call { color: var(--sf-up); }
.sa-trade-dir--put  { color: var(--sf-down); }
.sa-trade-contract {
  color: var(--sf-fog);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa-trade-reason   { color: var(--sf-dust); font-size: 10px; text-transform: lowercase; }
.sa-trade-pnl--lime    { color: var(--sf-up); }
.sa-trade-pnl--magenta { color: var(--sf-down); }
.sa-trade-pnl--fog     { color: var(--sf-fog); }

.sa-trade-empty {
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-dust);
  text-align: center;
}

/* ── v3 · Desk Copilot panel (Phase 2.5, behind ?v=next) ─── */

.dc-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dc-head-left { display: flex; align-items: center; gap: 8px; }

.dc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sf-cyan-20);
  border: 1px solid var(--sf-cyan-40);
  color: var(--sf-cyan);
  display: grid; place-items: center;
}
.dc-icon svg { width: 16px; height: 16px; }

.dc-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }

.dc-updated {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.08em;
}

.dc-watch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
}

.dc-watch--lime    { background: var(--sf-lime-10);    border: 1px solid var(--sf-lime-40);    color: var(--sf-lime); }
.dc-watch--amber   { background: var(--sf-amber-10);   border: 1px solid var(--sf-amber-40);   color: var(--sf-amber); }
.dc-watch--magenta { background: var(--sf-magenta-10); border: 1px solid var(--sf-magenta-40); color: var(--sf-magenta); }

.dc-watch-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.dc-watch-score { font-size: 22px; font-weight: 600; }

.dc-rows {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--sf-border) 60%, transparent);
}
.dc-row:last-child { border-bottom: none; }

.dc-row-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
}

.dc-row-v {
  font-size: 12px;
  color: var(--sf-fog);
  text-align: right;
  max-width: 70%;
}

.dc-action {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sf-border);
}

.dc-action-chip {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sf-cyan-20);
  color: var(--sf-cyan);
  border: 1px solid var(--sf-cyan-40);
  height: fit-content;
}

.dc-action-body { flex: 1; min-width: 0; }
.dc-action-text { font-size: 13px; font-weight: 600; color: var(--sf-fog); line-height: 1.4; }
.dc-action-cond { font-size: 11px; color: var(--sf-mist); margin-top: 2px; }

/* ── v3 · Playbook panel (Phase 2.5, behind ?v=next) ─── */

.pb-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
  margin-top: 12px;
}

.pb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pb-head-left { display: flex; align-items: center; gap: 8px; }

.pb-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sf-amber-20);
  border: 1px solid var(--sf-amber-40);
  color: var(--sf-amber);
  display: grid; place-items: center;
}
.pb-icon svg { width: 16px; height: 16px; }

.pb-titles { display: flex; flex-direction: column; line-height: 1.2; }
.pb-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }
.pb-title-cursor { color: var(--sf-amber); }
.pb-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.pb-chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
}

.pb-chip--amber { background: var(--sf-amber-20); color: var(--sf-amber); border-color: var(--sf-amber-40); }

.pb-section { margin-top: 14px; }
.pb-section:first-of-type { margin-top: 0; }

.pb-section-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  margin-bottom: 6px;
}

.pb-bullets, .pb-approvals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pb-bullet {
  font-size: 12px;
  color: var(--sf-mist);
  line-height: 1.4;
}

.pb-bullet--block { color: var(--sf-mist); }
.pb-bullet--good { color: var(--sf-lime); }
.pb-bullet--empty { color: var(--sf-dust); font-style: italic; }

.pb-approval {
  padding: 8px 10px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pb-approval-line1 { display: flex; align-items: center; gap: 8px; }
.pb-approval-icon { color: var(--sf-amber); font-size: 12px; }
.pb-approval-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--sf-fog); }
.pb-approval-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
}
.pb-approval-status--lime    { color: var(--sf-lime);    border-color: var(--sf-lime-40);    background: var(--sf-lime-10); }
.pb-approval-status--amber   { color: var(--sf-amber);   border-color: var(--sf-amber-40);   background: var(--sf-amber-10); }
.pb-approval-status--magenta { color: var(--sf-magenta); border-color: var(--sf-magenta-40); background: var(--sf-magenta-10); }

.pb-approval-line2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
}
.pb-approval-scope {
  min-width: 0;
  flex: 1 1 140px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pb-approval-actions {
  flex: 0 0 auto;
  white-space: nowrap;
}
.pb-approval-actions a {
  color: var(--sf-cyan);
  text-decoration: none;
  cursor: pointer;
}
.pb-approval-actions a:hover { text-decoration: underline; }
.pb-approval-actions a[aria-busy="true"] { opacity: 0.5; pointer-events: none; }

/* ── v3 · Decision Center panel (Phase 2.6, behind ?v=next) ─── */

.dx-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 20px 22px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}

/* Subtle accent glow */
.dx-panel::before {
  content: "";
  position: absolute;
  top: -48px; right: -48px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.dx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}

.dx-head-left { display: flex; align-items: center; gap: 8px; }

.dx-title { font-weight: 600; font-size: 14px; color: var(--sf-fog); letter-spacing: -0.01em; }

.dx-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dx-led--cyan    { background: var(--sf-cyan);    box-shadow: 0 0 8px var(--sf-cyan); }
.dx-led--lime    { background: var(--sf-lime);    box-shadow: 0 0 6px var(--sf-lime); }
.dx-led--amber   { background: var(--sf-amber);   box-shadow: 0 0 6px var(--sf-amber); }
.dx-led--magenta { background: var(--sf-magenta); box-shadow: 0 0 6px var(--sf-magenta); }
.dx-led--neutral { background: var(--sf-mist); }

/* Primary row — big SPY price + KPI grid */
.dx-primary {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}

.dx-primary-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  margin-bottom: 6px;
}

.dx-primary-row { display: flex; align-items: baseline; gap: 14px; }

.dx-primary-price {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--sf-fog);
  letter-spacing: -0.02em;
}

.dx-primary-price--lime    { text-shadow: 0 0 24px rgba(110, 255, 158, 0.25); }
.dx-primary-price--magenta { text-shadow: 0 0 24px rgba(255, 62, 158, 0.25); }
.dx-primary-price--neutral { text-shadow: 0 0 24px rgba(0, 229, 255, 0.18); }

.dx-primary-meta { padding-bottom: 6px; display: flex; flex-direction: column; gap: 8px; }

.dx-primary-deltas {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sf-dust);
}

.dx-primary-narrative {
  margin-top: 18px;
  font-size: 13px;
  color: var(--sf-mist);
  line-height: 1.5;
  max-width: 560px;
}

.dx-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  vertical-align: text-bottom;
  background: var(--sf-cyan);
  margin-left: 4px;
  animation: sf-cursor-blink-soft 1s steps(2) infinite;
}

@media (prefers-reduced-motion: reduce) { .dx-cursor { animation: none; } }

.dx-primary-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dx-kpi {
  background: rgba(13, 17, 32, 0.6);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 10px 12px;
}

.dx-kpi-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  text-transform: uppercase;
}

.dx-kpi-v {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--sf-fog);
  margin-top: 4px;
}

.dx-kpi-v--lime    { color: var(--sf-lime); }
.dx-kpi-v--amber   { color: var(--sf-amber); }
.dx-kpi-v--magenta { color: var(--sf-magenta); }
.dx-kpi-v--neutral { color: var(--sf-fog); }

.dx-kpi-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
  margin-top: 4px;
  text-transform: uppercase;
}

.dx-kpi-sub--lime    { color: var(--sf-lime); }
.dx-kpi-sub--magenta { color: var(--sf-magenta); }

.dx-size {
  display: inline-flex;
  gap: 2px;
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 2px;
}

.dx-size-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--sf-dust);
  cursor: pointer;
}

.dx-size-btn:hover { color: var(--sf-mist); }

.dx-size-btn--active {
  background: var(--sf-surface);
  color: var(--sf-fog);
  border-color: var(--sf-border-2);
}

.dx-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dx-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
}

.dx-chip--lime    { background: var(--sf-lime-10);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }
.dx-chip--amber   { background: var(--sf-amber-10);   color: var(--sf-amber);   border-color: var(--sf-amber-40); }
.dx-chip--magenta { background: var(--sf-magenta-10); color: var(--sf-magenta); border-color: var(--sf-magenta-40); }
.dx-chip--cyan    { background: var(--sf-cyan-10);    color: var(--sf-cyan);    border-color: var(--sf-cyan-40); }
.dx-chip--sm { padding: 1px 6px; font-size: 9px; }

.dx-chip-k { color: var(--sf-dust); font-weight: 600; }
.dx-chip-v { font-weight: 700; }

.dx-fields {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(180px, 2fr) minmax(110px, auto) minmax(280px, 3fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border);
}

.dx-field { display: flex; flex-direction: column; min-width: 0; }
.dx-field--wide { grid-column: span 1; }
.dx-field-v {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-fog);
  line-height: 1.25;
  /* allow wrapping — mockup shows "Wait 1m > 541.20" inline without ellipsis */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* ACTION cell uses mono — matches mockup ("Wait 1m > 541.20") */
.dx-fields .dx-field:nth-child(2) .dx-field-v { font-family: var(--font-mono); font-size: 13px; }
.dx-field-v--inline { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }

.dx-field-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dx-field-v--lime    { color: var(--sf-lime); }
.dx-field-v--amber   { color: var(--sf-amber); }
.dx-field-v--magenta { color: var(--sf-magenta); }
.dx-field-v--neutral { color: var(--sf-fog); }

.dx-direction { margin-bottom: 12px; }

.dx-direction-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.dx-direction-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dx-direction-val--lime    { color: var(--sf-lime); }
.dx-direction-val--magenta { color: var(--sf-magenta); }
.dx-direction-val--neutral { color: var(--sf-mist); }

.dx-direction-bar {
  position: relative;
  height: 8px;
  background: var(--sf-border);
  border-radius: 999px;
  overflow: hidden;
}

.dx-direction-tick {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--sf-mist);
  transform: translateX(-50%);
  z-index: 1;
}

.dx-direction-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0;
}

.dx-direction-fill--call { background: linear-gradient(90deg, var(--sf-lime-40) 0%, var(--sf-lime) 100%); }
.dx-direction-fill--put  { background: linear-gradient(270deg, var(--sf-magenta-40) 0%, var(--sf-magenta) 100%); }

.dx-direction-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
}

.dx-ctx {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dx-ctx-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12.5px;
}

.dx-ctx-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  width: 64px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.dx-ctx-v { color: var(--sf-mist); }

.dx-ctx-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
  line-height: 1.4;
}

.dx-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sf-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-dust);
  letter-spacing: 0.04em;
}

.dx-footer-rec-text { color: var(--sf-cyan); }

.dx-footer-stream { display: inline-flex; align-items: center; gap: 8px; }

/* ── v3 · Setup panel (Phase 2.7, behind ?v=next) ─── */

.su-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.su-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.su-head-left { display: flex; align-items: center; gap: 8px; }

.su-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sf-magenta-20);
  border: 1px solid var(--sf-magenta-40);
  color: var(--sf-magenta);
  display: grid; place-items: center;
}
.su-icon svg { width: 16px; height: 16px; }

.su-titles { display: flex; flex-direction: column; line-height: 1.2; }
.su-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }
.su-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.su-text {
  font-size: 12.5px;
  color: var(--sf-mist);
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.su-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.su-cell {
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 10px 12px;
}

.su-cell--stop   { border-color: color-mix(in srgb, var(--sf-magenta) 30%, var(--sf-border)); }
.su-cell--target { border-color: color-mix(in srgb, var(--sf-lime)    30%, var(--sf-border)); }

.su-cell-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
}

.su-cell-v {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--sf-fog);
  margin-top: 4px;
}

.su-cell-v--lime    { color: var(--sf-lime); }
.su-cell-v--magenta { color: var(--sf-magenta); }

.su-cell-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sf-dust);
  margin-top: 4px;
}

.su-cell-meta--lime    { color: var(--sf-lime); }
.su-cell-meta--magenta { color: var(--sf-magenta); }
.su-cell-meta--neutral { color: var(--sf-mist); }

.su-footer {
  border-top: 1px solid var(--sf-border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.su-footer-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
}

.su-footer-k { color: var(--sf-dust); letter-spacing: 0.06em; }
.su-footer-v { color: var(--sf-fog); }
.su-footer-v--lime  { color: var(--sf-lime); }
.su-footer-v--amber { color: var(--sf-amber); }

/* ── v3 · SPY Unusual Flow panel (Phase 2.8, behind ?v=next) ─── */

.uf-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.uf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(8, 11, 22, 0.6);
}

.uf-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.uf-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sf-magenta-20);
  border: 1px solid var(--sf-magenta-40);
  color: var(--sf-magenta);
  display: grid; place-items: center;
}
.uf-icon svg { width: 16px; height: 16px; }

.uf-titles { display: flex; flex-direction: column; line-height: 1.2; }
.uf-title { font-weight: 600; font-size: 13px; color: var(--sf-fog); }
.uf-title-cursor { color: var(--sf-magenta); }
.uf-subtitle {
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.uf-divider { display: inline-block; width: 1px; height: 24px; background: var(--sf-border); }

.uf-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.uf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
  white-space: nowrap;
}

.uf-chip--cyan    { background: var(--sf-cyan-10);    color: var(--sf-cyan);    border-color: var(--sf-cyan-40); }
.uf-chip--lime    { background: var(--sf-lime-20);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }
.uf-chip--magenta { background: var(--sf-magenta-20); color: var(--sf-magenta); border-color: var(--sf-magenta-40); }
.uf-chip--neutral { background: var(--sf-surface);    color: var(--sf-mist);    border-color: var(--sf-border-2); }
.uf-chip--live    { background: var(--sf-lime-10);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }

.uf-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sf-lime);
  box-shadow: 0 0 6px var(--sf-lime);
  animation: bn-blink 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .uf-led { animation: none; } }

.uf-kpi-row {
  display: grid;
  grid-template-columns: 4fr 2fr 3fr 3fr;
  border-bottom: 1px solid var(--sf-border);
}

.uf-kpi-cell {
  padding: 16px 20px;
  border-right: 1px solid var(--sf-border);
}
.uf-kpi-cell:last-child { border-right: none; }

.uf-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.uf-kpi-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
}

.uf-kpi-v {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--sf-fog);
  margin-top: 4px;
}

.uf-kpi-v--lime    { color: var(--sf-lime);    text-shadow: 0 0 12px rgba(110, 255, 158, 0.4); }
.uf-kpi-v--magenta { color: var(--sf-magenta); text-shadow: 0 0 12px rgba(255, 62, 158, 0.4); }
.uf-kpi-v--neutral { color: var(--sf-fog); }

.uf-kpi-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.uf-kpi-sub--lime    { color: var(--sf-lime); }
.uf-kpi-sub--amber   { color: var(--sf-amber); }
.uf-kpi-sub--magenta { color: var(--sf-magenta); }

.uf-sent-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sf-border);
  margin-top: 12px;
}
.uf-sent-bar-call { background: var(--sf-lime); }
.uf-sent-bar-put  { background: var(--sf-magenta); }

.uf-sent-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.uf-axis-call { color: var(--sf-lime); }
.uf-axis-put  { color: var(--sf-magenta); }

.uf-pbar {
  height: 4px;
  background: var(--sf-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.uf-pbar-call { display: block; height: 100%; background: var(--sf-lime); }
.uf-pbar-put  { display: block; height: 100%; background: var(--sf-magenta); }

.uf-empty-stat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sf-dust);
  margin-top: 12px;
}

/* ─── Sentiment block (bullish/bearish split — replaces call/put split) ─── */
.uf-sentiment-block {
  border-bottom: 1px solid var(--sf-border);
}
.uf-sentiment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
}
.uf-bullbear-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sf-border);
  margin: 0 20px;
}
.uf-bullbear-bull {
  background: linear-gradient(90deg, var(--sf-lime) 0%, rgba(110, 255, 158, 0.7) 100%);
}
.uf-bullbear-bear {
  background: linear-gradient(90deg, rgba(255, 62, 158, 0.7) 0%, var(--sf-magenta) 100%);
}
.uf-bullbear-axis {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.uf-axis-bull { color: var(--sf-lime); }
.uf-axis-bear { color: var(--sf-magenta); }

/* 7-tier sentiment label tones — extends the existing chip palette */
.uf-chip--lime-dim    { background: rgba(110, 255, 158, 0.10); color: rgba(110, 255, 158, 0.75); border: 1px solid rgba(110, 255, 158, 0.35); }
.uf-chip--magenta-dim { background: rgba(255,  62, 158, 0.10); color: rgba(255,  62, 158, 0.75); border: 1px solid rgba(255,  62, 158, 0.35); }
.uf-kpi-v--lime-dim    { color: rgba(110, 255, 158, 0.75); }
.uf-kpi-v--magenta-dim { color: rgba(255,  62, 158, 0.75); }

/* Drivers section — what kind of bullishness/bearishness */
.uf-drivers {
  padding: 12px 20px 16px;
  border-top: 1px dashed var(--sf-border);
}
.uf-drivers-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sf-dust);
  margin-bottom: 10px;
}
.uf-driver {
  display: grid;
  grid-template-columns: 16px 1fr 70px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}
.uf-driver-arrow { font-size: 12px; line-height: 1; }
.uf-driver-label { color: var(--sf-fog); }
.uf-driver-amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--sf-fog); font-weight: 500; }
.uf-driver-bar {
  display: block;
  height: 5px;
  background: var(--sf-border);
  border-radius: 999px;
  overflow: hidden;
}
.uf-driver-bar-fill { display: block; height: 100%; }
.uf-driver-bar-fill--lime    { background: var(--sf-lime); }
.uf-driver-bar-fill--magenta { background: var(--sf-magenta); }
.uf-driver-pct {
  text-align: right;
  font-size: 10px;
  color: var(--sf-dust);
  letter-spacing: 0.04em;
}
.uf-tone--lime { color: var(--sf-lime); }
.uf-tone--magenta { color: var(--sf-magenta); }

/* Mobile flow summary additions (mobile-app.js render path) */
.m-flow-bullbear { padding: 8px 0 4px; }
.m-flow-bullbear-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sf-border, rgba(255,255,255,0.08));
}
.m-flow-bullbear-bull { background: var(--sf-lime, #6effa0); }
.m-flow-bullbear-bear { background: var(--sf-magenta, #ff3e9e); }
.m-flow-bullbear-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--sf-font-mono, monospace);
  font-size: 10px;
  color: var(--sf-dust, #8b8e9a);
  letter-spacing: 0.05em;
}
.m-flow-drivers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding-top: 6px;
  font-family: var(--sf-font-mono, monospace);
  font-size: 10.5px;
  color: var(--sf-fog, #d6d8e0);
}
.m-flow-driver { display: flex; align-items: center; gap: 4px; }
.m-flow-driver-arrow { font-size: 11px; }
.m-flow-driver-arrow.up { color: var(--sf-lime, #6effa0); }
.m-flow-driver-arrow.down { color: var(--sf-magenta, #ff3e9e); }
.m-flow-sentiment--strong-bull { color: var(--sf-lime, #6effa0); font-weight: 700; }
.m-flow-sentiment--bull        { color: var(--sf-lime, #6effa0); }
.m-flow-sentiment--lean-bull   { color: rgba(110, 255, 158, 0.75); }
.m-flow-sentiment--mixed       { color: var(--sf-amber, #ffb84d); }
.m-flow-sentiment--lean-bear   { color: rgba(255,  62, 158, 0.75); }
.m-flow-sentiment--bear        { color: var(--sf-magenta, #ff3e9e); }
.m-flow-sentiment--strong-bear { color: var(--sf-magenta, #ff3e9e); font-weight: 700; }

.uf-method {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(8, 11, 22, 0.3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sf-dust);
  letter-spacing: 0.04em;
}
.uf-method-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--sf-dust); }

.uf-pill {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid;
  white-space: nowrap;
  margin-right: 2px;
}

.uf-pill--sweep   { color: var(--sf-amber);   border-color: var(--sf-amber-40);   background: var(--sf-amber-10); }
.uf-pill--block   { color: var(--sf-cyan);    border-color: var(--sf-cyan-40);    background: var(--sf-cyan-10); }
.uf-pill--proxy   { color: var(--sf-mist);    border-color: var(--sf-border-2);   background: var(--sf-surface); }
.uf-pill--trade   { color: var(--sf-cyan);    border-color: var(--sf-cyan-40);    background: var(--sf-cyan-10); }
.uf-pill--auto    { color: var(--sf-amber);   border-color: var(--sf-amber-40);   background: var(--sf-amber-10); }
.uf-pill--unusual { color: var(--sf-magenta); border-color: var(--sf-magenta-40); background: var(--sf-magenta-10); }

.uf-table-wrap {
  /* Keep scrollable per Edda — no pagination. Vertical + horizontal scroll. */
  max-height: 480px;
  overflow: auto;
}

.uf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}

.uf-table thead th {
  position: sticky;
  top: 0;
  background: var(--sf-abyss);
  color: var(--sf-dust);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sf-border-2);
  text-align: left;
  white-space: nowrap;
}

.uf-th-num { text-align: right; }

.uf-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-border) 50%, transparent);
  color: var(--sf-mist);
  white-space: nowrap;
}

.uf-row:hover td { background: color-mix(in srgb, var(--sf-surface) 40%, transparent); }

/* Column-specific + tone colors. Prefixed with `.uf-table tbody td` so they
   outrank the default `.uf-table tbody td { color: var(--sf-mist) }` rule. */
.uf-table tbody td.uf-c-time     { color: var(--sf-dust); }
.uf-table tbody td.uf-c-tick     { color: var(--sf-fog); }
.uf-table tbody td.uf-c-contract { color: var(--sf-cyan); }
.uf-table tbody td.uf-c-num      { text-align: right; color: var(--sf-fog); }
.uf-c-cp, .uf-c-side, .uf-c-dte, .uf-c-bs { font-weight: 600; }
.uf-c-conds    { display: flex; gap: 2px; flex-wrap: wrap; }

.uf-table tbody td.uf-tone--lime    { color: var(--sf-lime); }
.uf-table tbody td.uf-tone--magenta { color: var(--sf-magenta); }
.uf-table tbody td.uf-tone--amber   { color: var(--sf-amber); }
.uf-table tbody td.uf-tone--fog     { color: var(--sf-fog); }
.uf-table tbody td.uf-tone--cyan    { color: var(--sf-cyan); }
.uf-table tbody td.uf-tone--mist    { color: var(--sf-mist); }

.uf-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--sf-dust);
  font-family: var(--font-sans);
  font-size: 12px;
}

/* ── v3 · Chart Stage panel (Phase 2.9, behind ?v=next) ─── */

.cs-region {
  background: linear-gradient(180deg, var(--sf-panel) 0%, var(--sf-night) 100%);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--sf-fog);
  font-family: var(--font-sans);
}

.cs-layout { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.cs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(8, 11, 22, 0.6);
  flex-wrap: wrap;
}

.cs-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cs-titles { display: flex; flex-direction: column; line-height: 1.2; }

.cs-title { display: flex; align-items: baseline; gap: 4px; }

.cs-title-symbol {
  font-size: 16px;
  font-weight: 600;
  color: var(--sf-fog);
}

.cs-title-dot { color: var(--sf-dust); }

.cs-title-tf {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--sf-cyan);
}

.cs-ohlcv {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.cs-divider { display: inline-block; width: 1px; height: 20px; background: var(--sf-border); }

.cs-clock {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
}

.cs-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 2px;
}

.cs-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--sf-dust);
  cursor: pointer;
}

.cs-tab--active {
  background: var(--sf-surface);
  color: var(--sf-fog);
  border: 1px solid var(--sf-border-2);
  padding: 3px 9px;
}

.cs-posture-lane {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
  border-bottom: 1px solid var(--sf-border);
  letter-spacing: 0.04em;
}

.cs-chart-frame {
  position: relative;
  flex: 1;
  min-height: 280px;
  background: var(--sf-night);
}

.cs-chart-canvas { width: 100%; height: 100%; }

.cs-ribbon {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--sf-border);
}

.cs-ribbon-cell {
  padding: 10px 14px;
  border-right: 1px solid var(--sf-border);
}
.cs-ribbon-cell:last-child { border-right: none; }

.cs-ribbon-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--sf-dust);
  margin-bottom: 4px;
}

.cs-ribbon-v {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-fog);
}

.cs-ribbon-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sf-mist);
}

.cs-led--lime    { background: var(--sf-lime);    box-shadow: 0 0 6px var(--sf-lime); }
.cs-led--amber   { background: var(--sf-amber);   box-shadow: 0 0 6px var(--sf-amber); }
.cs-led--magenta { background: var(--sf-magenta); box-shadow: 0 0 6px var(--sf-magenta); }
.cs-led--neutral { background: var(--sf-mist); }

/* ── Phase 3.5 · v3 chrome (status bar, header, footer) ─── */

/* Make .shell-region transparent under v3 so the v3 panels' own
   rounded corners + gradient show through cleanly (legacy white
   bg-surface was peeking out as white triangles at the corners). */
.v3-shell .shell-region {
  background: transparent !important;
}

/* The .v3-shell container forces dark bg on the page when v3 is mounted */
body:has(.v3-shell) {
  background: var(--sf-night) !important;
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
    radial-gradient(800px 600px at 95% 5%,  rgba(255, 62, 158, 0.04) 0%, transparent 55%),
    radial-gradient(700px 500px at 80% 110%, rgba(110, 255, 158, 0.04) 0%, transparent 60%) !important;
  color: var(--sf-fog) !important;
}

/* Dark scrollbars throughout v3 — Firefox + WebKit */
body:has(.v3-shell), .v3-shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border-3) var(--sf-night);
}

body:has(.v3-shell) ::-webkit-scrollbar,
.v3-shell ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body:has(.v3-shell) ::-webkit-scrollbar-track,
.v3-shell ::-webkit-scrollbar-track {
  background: var(--sf-night);
}

body:has(.v3-shell) ::-webkit-scrollbar-thumb,
.v3-shell ::-webkit-scrollbar-thumb {
  background: var(--sf-border-3);
  border-radius: 6px;
  border: 2px solid var(--sf-night);
}

body:has(.v3-shell) ::-webkit-scrollbar-thumb:hover,
.v3-shell ::-webkit-scrollbar-thumb:hover {
  background: var(--sf-mist);
}

body:has(.v3-shell) ::-webkit-scrollbar-corner,
.v3-shell ::-webkit-scrollbar-corner {
  background: var(--sf-night);
}

/* Status bar — slim row above the header */
.v3-statusbar {
  width: 100%;
  background: rgba(8, 11, 22, 0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--sf-border) 80%, transparent);
  margin: -16px -24px 0 -24px;
  padding: 0 24px;
}

.v3-statusbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-mist);
  letter-spacing: 0.06em;
}

.v3-statusbar-left, .v3-statusbar-right { display: flex; align-items: center; gap: 20px; }

.v3-sb-item { display: inline-flex; align-items: center; gap: 6px; }
.v3-sb-clock { color: var(--sf-fog); }
.v3-sb-dim   { color: var(--sf-dust); }
.v3-sb-amber { color: var(--sf-amber); }

.v3-sb-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sf-mist);
}
.v3-sb-led--lime    { background: var(--sf-lime);    box-shadow: 0 0 6px var(--sf-lime);    animation: bn-blink 1.4s ease-in-out infinite; }
.v3-sb-led--amber   { background: var(--sf-amber);   box-shadow: 0 0 6px var(--sf-amber); }
.v3-sb-led--magenta { background: var(--sf-magenta); box-shadow: 0 0 6px var(--sf-magenta); }
.v3-sb-led--neutral { background: var(--sf-mist); }

@media (prefers-reduced-motion: reduce) {
  .v3-sb-led--lime { animation: none; }
}

/* v3 Header — main app header below status bar */
.v3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 0 0;
}

.v3-header-left { display: flex; align-items: center; gap: 16px; }

.v3-header-logo { height: 24px; width: auto; }

.v3-header-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--sf-dust);
  padding-left: 16px;
  border-left: 1px solid var(--sf-border);
}

.v3-header-right { display: flex; align-items: center; gap: 8px; }

.v3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--sf-surface);
  color: var(--sf-mist);
  border: 1px solid var(--sf-border-2);
}

.v3-chip--lime    { background: var(--sf-lime-10);    color: var(--sf-lime);    border-color: var(--sf-lime-40); }
.v3-chip--amber   { background: var(--sf-amber-10);   color: var(--sf-amber);   border-color: var(--sf-amber-40); }
.v3-chip--magenta { background: var(--sf-magenta-10); color: var(--sf-magenta); border-color: var(--sf-magenta-40); }

.v3-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v3-led--lime    { background: var(--sf-lime);    box-shadow: 0 0 6px var(--sf-lime);    animation: bn-blink 1.4s ease-in-out infinite; }
.v3-led--amber   { background: var(--sf-amber);   box-shadow: 0 0 6px var(--sf-amber); }
.v3-led--magenta { background: var(--sf-magenta); box-shadow: 0 0 6px var(--sf-magenta); }

@media (prefers-reduced-motion: reduce) {
  .v3-led--lime { animation: none; }
}

.v3-header-bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  display: grid;
  place-items: center;
  color: var(--sf-mist);
  cursor: pointer;
}

.v3-header-bell:hover { background: var(--sf-surface); color: var(--sf-fog); }
.v3-header-bell svg { width: 16px; height: 16px; }

.v3-header-bell-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sf-magenta);
  color: var(--sf-night);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.v3-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--sf-panel);
  border: 1px solid var(--sf-border);
  border-radius: 12px;
}

.v3-user-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sf-cyan) 0%, #8b7dff 100%);
  color: var(--sf-night);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.v3-user-label { font-size: 13px; color: var(--sf-fog); }

/* Footer */
.v3-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sf-dust);
  letter-spacing: 0.06em;
  margin-top: auto;
}

.v3-footer-left { display: flex; align-items: center; gap: 12px; }
.v3-footer-logo { height: 14px; width: auto; opacity: 0.7; }
.v3-footer-disclaimer { color: color-mix(in srgb, var(--sf-dust) 80%, transparent); }

.v3-footer-right { display: flex; align-items: center; gap: 16px; }

.v3-footer-link {
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.v3-footer-link:hover { color: var(--sf-fog); }

/* ── Phase 4 · animations, focus, a11y polish (behind ?v=next) ─── */

/* Cursor blink on the underscore in panel titles */
@keyframes sf-cursor-blink-soft { 50% { opacity: 0.25; } }

.bn-title-cursor,
.pb-title-cursor,
.uf-title-cursor {
  display: inline-block;
  animation: sf-cursor-blink-soft 1s steps(2) infinite;
}

/* Pulse ring around active LIVE indicators (chart-stage ribbon LEDs) */
@keyframes sf-pulse-cyan {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

.bn-chip--live .bn-led {
  animation: bn-blink 1.4s ease-in-out infinite, sf-pulse-cyan 2.4s ease-out infinite;
}

/* Focus styles — anywhere a button or link doesn't already have one */
.v3-shell button:focus-visible,
.v3-shell a:focus-visible,
.v3-shell [tabindex]:focus-visible {
  outline: 2px solid var(--sf-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* prefers-reduced-motion — kill all our custom keyframes too */
@media (prefers-reduced-motion: reduce) {
  .bn-title-cursor,
  .pb-title-cursor,
  .uf-title-cursor,
  .bn-led,
  .uf-led { animation: none !important; }
}

/* Visually-hidden helper for screen-reader live announcers */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ── Phase 3 · v3 layout shell (behind ?v=next) ─── */

.v3-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 24px 24px;
  min-height: 100vh;
  background: var(--sf-night);
  color: var(--sf-fog);
  max-width: 1680px;
  margin: 0 auto;
}

.v3-shell .top-bar {
  margin-bottom: 0;
}

/* Hero row — 12-col dense grid: DC (7) + Regime (5) on row 1,
   Intel 2-col (7) + Setup/Shadow 2-col (5) on row 2 */
.v3-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  gap: 16px;
  align-items: stretch;
}

.v3-hero-dc          { grid-column: span 7; display: flex; }
.v3-hero-rf          { grid-column: span 5; display: flex; }
/* Row 2 (intel + setupshadow): don't stretch — let each pane be its
 * natural content height. Otherwise shadow_account's tall trades list
 * forces setup + desk_copilot to grow ~220px of empty space below their
 * action text. align-self on the row-2 items leaves row-1 stretch alone.
 * shadow_account is capped to match desk_copilot's natural height; its
 * trades list scrolls internally to absorb the overflow. */
.v3-hero-intel       { grid-column: span 7; display: grid; grid-template-columns: 1fr; gap: 16px; align-self: start; max-height: 520px; min-height: 0; }
.v3-hero-setupshadow { grid-column: span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-self: start; align-items: start; }

.v3-hero-intel > .shadow-account-pane,
.v3-hero-intel > .shadow-account-pane > .sa-panel {
  max-height: 520px;
  min-height: 0;
}
.v3-hero-intel > .shadow-account-pane > .sa-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v3-hero-intel .sa-trades {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.v3-hero-intel .sa-trades-list {
  flex: 1;
  max-height: none;
  min-height: 60px;
}

.v3-hero-dc > .decision-center-pane,
.v3-hero-rf > .regime-filter-pane,
.v3-hero-intel > section,
.v3-hero-setupshadow > section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.v3-hero-dc > .decision-center-pane > .dx-panel,
.v3-hero-rf > .regime-filter-pane > .rf-panel,
.v3-hero-intel > .shadow-account-pane > .sa-panel,
.v3-hero-setupshadow > .setup-reason-pane > .su-panel,
.v3-hero-setupshadow > .desk-copilot-pane > .dc-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Neutralize the margin-top I added when these were stacked in the rail */
.v3-hero .pb-panel, .v3-hero .ec-panel { margin-top: 0; }
.v3-news-row .ec-panel { margin-top: 0; }

.v3-chart-row { width: 100%; }
.v3-chart-row .chart-stage { width: 100%; }
.v3-chart-row .cs-region { min-height: 520px; display: flex; flex-direction: column; }
.v3-chart-row .cs-chart-frame { min-height: 380px; }

.v3-flow-row { width: 100%; }

.v3-news-row {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 16px;
  align-items: stretch;
  max-height: 720px;
}

.v3-news-row .v3-news-feed,
.v3-news-row .v3-news-calendar { display: flex; min-height: 0; max-height: 720px; }

.v3-news-row .v3-news-feed > section,
.v3-news-row .v3-news-calendar > section { width: 100%; min-height: 0; }

.v3-news-row .bn-panel,
.v3-news-row .ec-panel { display: flex; flex-direction: column; min-height: 0; max-height: 720px; }

.v3-news-row .bn-list,
.v3-news-row .ec-list { overflow-y: auto; flex: 1; min-height: 0; }

.v3-lifecycle-row { width: 100%; }

/* Tablet — collapse hero to single column, flatten bottom grids */
@media (max-width: 1279px) {
  .v3-hero,
  .v3-hero-intel,
  .v3-hero-setupshadow,
  .v3-news-row {
    grid-template-columns: 1fr;
  }
  .v3-hero-dc, .v3-hero-rf, .v3-hero-intel, .v3-hero-setupshadow {
    grid-column: 1 / -1;
  }
}

/* Mobile — tighter padding */
@media (max-width: 767px) {
  .v3-shell { padding: 12px; gap: 12px; }
}