/* Trader dashboard — operator-only read-only surface.
 * Layout mirrors the chart / copy-trades dashboards: 1040px content column,
 * cards stacked vertically. Dark theme follows the project two-tier contract
 * (see /web/shared/styles.css header) — variables override [data-theme="dark"]
 * inline at the bottom of this file.
 */

:root {
  --tr-card-bg:       #ffffff;
  --tr-card-bg-2:     #f8fafc;
  --tr-border:        rgba(0, 0, 0, .10);
  --tr-text-1:        #0f172a;
  --tr-text-2:        #475569;
  --tr-text-3:        #94a3b8;
  --tr-accent:        #4f46e5;
  --tr-win:           #16a34a;
  --tr-loss:          #dc2626;
  --tr-reject:        #d97706;  /* amber — accepted-into-audit but executor said no */
  --tr-neutral:       #6b7280;
  --tr-warn-bg:       #fef3c7;
  --tr-warn-text:     #92400e;
  --tr-ok-bg:         #dcfce7;
  --tr-ok-text:       #15803d;
  --tr-row-hover:     rgba(0,0,0,.03);
}

#page-content { max-width: 1040px; margin-inline: auto; }

/* Top bar (logo, brand, theme toggle, wallet button) lives in
   /shared/dashboard-header.css. Nothing dashboard-specific here. */

/* ── auth wall ───────────────────────────────────────────────────────── */
#auth-wall { background: var(--tr-card-bg); border: 1px solid var(--tr-border); border-radius: 14px; padding: 2rem 1.5rem; text-align: center; }
.auth-wall-msg { color: var(--tr-text-2); font-size: 1rem; }

/* ── card shell ──────────────────────────────────────────────────────── */
.status-card, .equity-card, .position-card, .stats-card, .decisions-card {
  background: var(--tr-card-bg);
  border: 1px solid var(--tr-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* Equity card — current equity is the headline (big, color-coded vs
   starting balance), with a 3-cell breakdown underneath. */
.equity-header { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.equity-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); }
.equity-value { font-size: 1.6rem; font-weight: 700; color: var(--tr-text-1); font-variant-numeric: tabular-nums; }
.equity-pct { font-size: .85rem; font-weight: 600; color: var(--tr-text-3); font-variant-numeric: tabular-nums; }
.equity-pct.pos { color: var(--tr-ok-text); }
.equity-pct.neg { color: var(--tr-loss); }
[data-theme="dark"] .equity-pct.pos { color: #bbf7d0; }
.equity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .65rem; }
.equity-cell { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .75rem; background: var(--tr-card-bg-2); border-radius: 8px; }
.equity-cell-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); }
.equity-cell span:last-child { font-size: .95rem; color: var(--tr-text-1); font-variant-numeric: tabular-nums; font-weight: 600; }
.equity-cell span:last-child.pos { color: var(--tr-ok-text); }
.equity-cell span:last-child.neg { color: var(--tr-loss); }
[data-theme="dark"] .equity-cell span:last-child.pos { color: #bbf7d0; }

.card-title { font-size: .95rem; font-weight: 700; color: var(--tr-text-1); margin-bottom: .9rem; letter-spacing: -.01em; }

/* Recent-decisions header: card title on the left, running cycle-P&L
   tally chip on the right. Two children laid out via flex so the
   title's existing margin-bottom (.9rem) still controls the gap to
   the table below. */
.decisions-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.decisions-header .card-title { margin-bottom: .9rem; }
.decisions-tally {
  font-size: .82rem;
  color: var(--tr-text-3);
  font-variant-numeric: tabular-nums;
}
.decisions-tally strong { font-weight: 700; }
.decisions-tally.pnl-pos { color: var(--tr-win); }
.decisions-tally.pnl-neg { color: var(--tr-loss); }

/* ── status pills ────────────────────────────────────────────────────── */
.status-row { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; flex-wrap: wrap; }
.status-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); }
.status-pill { font-size: .82rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: var(--tr-card-bg-2); color: var(--tr-text-2); border: 1px solid var(--tr-border); }
.status-pill.enabled { background: var(--tr-ok-bg); color: var(--tr-ok-text); border-color: transparent; }
.status-pill.disabled { background: var(--tr-card-bg-2); color: var(--tr-text-2); }
.status-pill.dryrun { background: var(--tr-warn-bg); color: var(--tr-warn-text); border-color: transparent; }
.status-pill.live { background: var(--tr-ok-bg); color: var(--tr-ok-text); border-color: transparent; }
.status-pill.warn { background: var(--tr-warn-bg); color: var(--tr-warn-text); border-color: transparent; }
.status-pill.err  { background: #fee2e2; color: #b91c1c; border-color: transparent; }
[data-theme="dark"] .status-pill.err { background: #5b1d1d; color: #fca5a5; }

/* ── LLM providers card (PR #58) ─────────────────────────────────────
   Mirrors the .status-card / .position-card shell — same border, padding,
   background variables. Inside: stacked rows, one per provider, with
   order controls + health badge + add/remove. */
.providers-card {
  background: var(--tr-card-bg);
  border: 1px solid var(--tr-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.providers-help {
  font-size: .82rem;
  color: var(--tr-text-2);
  margin-bottom: .75rem;
  line-height: 1.4;
}
.providers-list { display: flex; flex-direction: column; gap: .4rem; }
.providers-available { margin-top: .75rem; }
.providers-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tr-text-3);
  margin: .35rem 0 .15rem;
}
.provider-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  background: var(--tr-card-bg-2);
  border-radius: 8px;
}
.provider-row.available { opacity: .85; }
.provider-order-controls { display: flex; flex-direction: column; gap: .15rem; }
.provider-meta { flex: 1; min-width: 0; }
.provider-name { font-size: .92rem; font-weight: 600; color: var(--tr-text-1); }
.provider-model { font-size: .74rem; color: var(--tr-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.provider-no-key { color: var(--tr-loss); font-size: .7rem; font-style: italic; font-weight: 400; }
.provider-btn {
  font-size: .8rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--tr-border);
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.provider-btn:hover:not(:disabled) { background: var(--tr-row-hover); }
.provider-btn:disabled { opacity: .35; cursor: not-allowed; }
.provider-btn.provider-add { width: auto; padding: .2rem .55rem; font-weight: 600; }
.provider-btn.provider-remove { width: auto; padding: .2rem .5rem; color: var(--tr-loss); }

/* Pause/Resume button — operator soft kill. Sits in the status row next
   to the env-driven status pills so the operator can flip without
   scrolling. Disabled state covers the in-flight POST window. */
.pause-btn {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--tr-border);
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pause-btn:hover:not(:disabled) { background: var(--tr-warn-bg); color: var(--tr-warn-text); border-color: transparent; }
.pause-btn.paused { background: var(--tr-ok-bg); color: var(--tr-ok-text); border-color: transparent; }
.pause-btn.paused:hover:not(:disabled) { background: var(--tr-ok-bg); filter: brightness(0.95); }
.pause-btn:disabled { opacity: .55; cursor: progress; }
#status-paused { background: var(--tr-warn-bg); color: var(--tr-warn-text); border-color: transparent; }
[data-theme="dark"] #status-paused { background: #78350f; color: #fde68a; }
[data-theme="dark"] .pause-btn { background: #1f2937; color: #f1f5f9; border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .pause-btn:hover:not(:disabled) { background: #78350f; color: #fde68a; }
[data-theme="dark"] .pause-btn.paused { background: #14532d; color: #bbf7d0; }

/* Settings gear button — opens the settings modal hosting the
   profile editor + LLM agents picker. Sits to the right of Pause. */
.settings-btn {
  margin-left: .5rem;
  font-size: 1rem;
  line-height: 1;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 999px;
  border: 1px solid var(--tr-border);
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.settings-btn:hover { background: var(--tr-accent, #4f46e5); color: #fff; border-color: transparent; }
[data-theme="dark"] .settings-btn { background: #1f2937; color: #f1f5f9; border-color: rgba(255,255,255,.10); }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.status-cell { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .75rem; background: var(--tr-card-bg-2); border-radius: 8px; }
.status-cell-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); }
.status-cell span:last-child { font-size: .92rem; color: var(--tr-text-1); font-variant-numeric: tabular-nums; }

/* Cadence cell becomes editable (PR-E-1). Same visual footprint as
   the other status cells; the input is constrained narrow + the Save
   button only appears once the operator has edited the value, so the
   default state reads like a value display. */
.cadence-edit { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.cadence-input {
  width: 4.5rem;
  padding: .15rem .35rem;
  font-size: .92rem;
  border: 1px solid var(--tr-border);
  border-radius: 4px;
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
  font-variant-numeric: tabular-nums;
}
.cadence-input:focus { outline: none; border-color: var(--tr-accent); box-shadow: 0 0 0 2px rgba(79, 70, 229, .15); }
.cadence-input.invalid { border-color: var(--tr-loss); }
.cadence-unit { font-size: .8rem; color: var(--tr-text-3); }
.cadence-save-btn {
  padding: .15rem .55rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--tr-accent);
  color: #ffffff;
  cursor: pointer;
}
.cadence-save-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cadence-save-btn:disabled { opacity: .6; cursor: progress; }
.cadence-source {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tr-text-3);
  margin-left: .15rem;
}
.cadence-source.runtime { color: var(--tr-ok-text); }

/* ── position card ───────────────────────────────────────────────────── */
.position-flat { color: var(--tr-text-2); font-size: .95rem; padding: .5rem 0; }
.position-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.position-cell { padding: .6rem .8rem; background: var(--tr-card-bg-2); border-radius: 8px; }
.position-cell-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); margin-bottom: .2rem; }
.position-cell-value { font-size: 1rem; color: var(--tr-text-1); font-variant-numeric: tabular-nums; }

/* ── stats card ──────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .65rem; }
.stats-cell { padding: .55rem .75rem; background: var(--tr-card-bg-2); border-radius: 8px; }
.stats-cell-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tr-text-3); }
.stats-cell-value { font-size: 1.05rem; color: var(--tr-text-1); font-variant-numeric: tabular-nums; font-weight: 600; }
.stats-cell-value.win { color: var(--tr-win); }
.stats-cell-value.loss { color: var(--tr-loss); }

.action-breakdown { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.action-chip { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; background: var(--tr-card-bg-2); color: var(--tr-text-2); }
.action-chip strong { color: var(--tr-text-1); margin-left: .3rem; }

/* Collapsible card header. Button looks like a regular card title row
   but is clickable; indicator rotates when `aria-expanded="true"`. */
.card-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 .9rem 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.card-toggle .card-title { margin: 0; }
.card-toggle:hover .card-title { color: var(--tr-accent); }
.card-toggle:focus-visible { outline: 2px solid var(--tr-accent); outline-offset: 2px; border-radius: 4px; }
.card-toggle-indicator {
  font-size: .9rem;
  color: var(--tr-text-3);
  transition: transform .15s ease;
}
.card-toggle[aria-expanded="true"] .card-toggle-indicator { transform: rotate(180deg); }
/* When the body is hidden, drop the title's bottom margin so the
   collapsed card hugs tight rather than carrying ghost spacing. */
.card-toggle:has(+ [hidden]) { margin-bottom: 0; }

/* ── tables ──────────────────────────────────────────────────────────── */
.tr-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tr-table th, .tr-table td { padding: .55rem .65rem; text-align: left; border-bottom: 1px solid var(--tr-border); }
.tr-table th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-text-3); white-space: nowrap; }
.tr-table td { color: var(--tr-text-2); font-variant-numeric: tabular-nums; }
.tr-table tr:hover td { background: var(--tr-row-hover); cursor: pointer; }
.tr-table tr.no-hover:hover td { background: inherit; cursor: default; }

/* Compact intent sub-row under state-changing decisions
   (OPEN_LONG / CLOSE / MOVE_STOP / SCALE_OUT). Shows what the bot
   intended without a click → JSON modal round-trip. The parent <tr>
   has no top border so visually it reads as a continuation of the
   action row above. */
.decision-detail-row td {
  font-size: .78rem;
  color: var(--tr-text-2);
  padding-top: .15rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--tr-border);
  background: var(--tr-card-bg-2);
}
.tr-table tr.decision-detail-row:hover td { background: var(--tr-card-bg-2); }
.dd-size { font-weight: 600; color: var(--tr-text-1); }
.dd-key { color: var(--tr-text-3); font-size: .7rem; margin-right: .2rem; text-transform: uppercase; letter-spacing: .04em; }
.dd-sep { color: var(--tr-text-3); margin: 0 .15rem; }
.dd-reasoning { color: var(--tr-text-2); font-style: italic; }
/* Realized P&L on the SELL leg of a closed cycle. Bolder than the
   default text so the operator's eye lands on the cycle outcome
   first. Color set via .pnl-pos / .pnl-neg (already defined). */
.dd-pnl { font-weight: 700; }

/* ── shadow mode (PR #61) ────────────────────────────────────────────── */

/* Primary/shadow pills next to the agent name in the ensemble card. */
.agent-primary-pill,
.agent-shadow-pill {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .12rem .4rem;
  border-radius: 4px;
  margin-left: .35rem;
  vertical-align: middle;
}
.agent-primary-pill { background: var(--tr-ok-bg); color: var(--tr-ok-text); }
.agent-shadow-pill  { background: #e5e7eb; color: #4b5563; }
[data-theme="dark"] .agent-shadow-pill { background: #374151; color: #d1d5db; }

/* Add-agent picker row inside the agents card. */
.agents-add {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--tr-border);
}
.agents-add-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.agent-add-select {
  flex: 0 0 auto;
  padding: .35rem .5rem;
  font-size: .82rem;
  border: 1px solid var(--tr-border);
  border-radius: 6px;
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
}
.agents-add-empty {
  font-size: .82rem;
  color: var(--tr-text-3);
  font-style: italic;
}

/* Tick chevron — appears on the primary row of any tick with shadows
   to expand/collapse the agent comparison. Small + low-contrast so
   it doesn't compete with the action badge. */
.tick-chevron {
  margin-left: .5rem;
  padding: .05rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  border: 1px solid var(--tr-border);
  border-radius: 4px;
  background: var(--tr-card-bg-2);
  color: var(--tr-text-2);
  cursor: pointer;
  vertical-align: middle;
}
.tick-chevron:hover { background: var(--tr-card-bg); }

/* Inline agent label next to the action badge: "Opus 4.7" / "GPT-5 mini" */
.agent-label {
  font-size: .7rem;
  color: var(--tr-text-3);
  margin-left: .35rem;
  font-variant-numeric: tabular-nums;
}
.agent-label.shadow-label { color: var(--tr-text-2); }

/* Shadow rows render below the primary, indented + dimmed so the
   primary stays visually dominant. */
.tr-table tr.shadow-row td {
  background: var(--tr-card-bg-2);
  color: var(--tr-text-2);
  font-size: .85rem;
}
.tr-table tr.shadow-row td:first-child { color: var(--tr-text-3); padding-left: 1.5rem; }
.shadow-indent {
  color: var(--tr-text-3);
  font-weight: 600;
  margin-right: .25rem;
}
/* Shadow action badge is dimmed; we still want the action color hint
   but at lower saturation so the primary's badge "wins". */
.tr-action-badge.shadow-badge { opacity: .75; }

/* Shadow detail sub-row (reasoning or error) sits below its shadow
   row; same indentation. */
.tr-table tr.shadow-detail td { background: var(--tr-card-bg-2); padding-left: 1.5rem; }
[data-theme="dark"] .tr-table tr.shadow-row td { background: rgba(255,255,255,.02); }
[data-theme="dark"] .tr-table tr.shadow-detail td { background: rgba(255,255,255,.02); }
.dd-rejected { color: #92400e; background: #fef3c7; padding: .1rem .4rem; border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.dd-reject-reason { color: #92400e; font-style: italic; }
.decision-detail-row.rejected td { background: rgba(217, 119, 6, .07); }
.tr-table tr.decision-detail-row.rejected:hover td { background: rgba(217, 119, 6, .12); }
[data-theme="dark"] .dd-rejected { background: #78350f; color: #fde68a; }
[data-theme="dark"] .dd-reject-reason { color: #fde68a; }
[data-theme="dark"] .decision-detail-row.rejected td { background: rgba(245, 158, 11, .08); }
[data-theme="dark"] .tr-table tr.decision-detail-row.rejected:hover td { background: rgba(245, 158, 11, .14); }
.dd-error { color: #b91c1c; background: #fee2e2; padding: .1rem .4rem; border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.dd-error-msg { color: #b91c1c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; word-break: break-word; }
.decision-detail-row.errored td { background: rgba(220, 38, 38, .06); }
.tr-table tr.decision-detail-row.errored:hover td { background: rgba(220, 38, 38, .10); }
[data-theme="dark"] .dd-error { background: #5b1d1d; color: #fca5a5; }
[data-theme="dark"] .dd-error-msg { color: #fca5a5; }
[data-theme="dark"] .decision-detail-row.errored td { background: rgba(248, 113, 113, .08); }
[data-theme="dark"] .tr-table tr.decision-detail-row.errored:hover td { background: rgba(248, 113, 113, .14); }
/* Realized-P&L wash on CLOSE / SCALE_OUT detail rows — green when the
   cycle closed in profit, red when it closed at a loss. Matches the
   rejected/errored intensity so the rows still scan as one block. */
.decision-detail-row.win td { background: rgba(22, 163, 74, .07); }
.tr-table tr.decision-detail-row.win:hover td { background: rgba(22, 163, 74, .12); }
[data-theme="dark"] .decision-detail-row.win td { background: rgba(74, 222, 128, .08); }
[data-theme="dark"] .tr-table tr.decision-detail-row.win:hover td { background: rgba(74, 222, 128, .14); }
.decision-detail-row.loss td { background: rgba(220, 38, 38, .07); }
.tr-table tr.decision-detail-row.loss:hover td { background: rgba(220, 38, 38, .12); }
[data-theme="dark"] .decision-detail-row.loss td { background: rgba(248, 113, 113, .08); }
[data-theme="dark"] .tr-table tr.decision-detail-row.loss:hover td { background: rgba(248, 113, 113, .14); }
/* Remove the bottom border on the action row when its detail row follows,
   so the two rows visually merge into a single block. */
.tr-table tbody tr:has(+ .decision-detail-row) td { border-bottom: none; }

.tr-action-badge { font-size: .72rem; font-weight: 700; padding: .15rem .45rem; border-radius: 4px; letter-spacing: .03em; }
.tr-action-badge.OPEN_LONG { background: var(--tr-ok-bg); color: var(--tr-ok-text); }
.tr-action-badge.OPEN_SHORT { background: #fde68a; color: #92400e; }
.tr-action-badge.CLOSE { background: #fee2e2; color: #b91c1c; }
.tr-action-badge.HOLD,
.tr-action-badge.HOLD_POSITION { background: #e0e7ff; color: #3730a3; }
.tr-action-badge.MOVE_STOP,
.tr-action-badge.SCALE_OUT { background: #fef3c7; color: #92400e; }
.tr-action-badge.PASS { background: #f3f4f6; color: #6b7280; }

.tr-err-dot,
.tr-fill-dot,
.tr-reject-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.tr-err-dot    { background: var(--tr-loss); }
.tr-fill-dot   { background: var(--tr-win); }
.tr-reject-dot { background: var(--tr-reject); }

.pnl-pos { color: var(--tr-win); }
.pnl-neg { color: var(--tr-loss); }

/* ── countdown chip (PR-F-1) ─────────────────────────────────────────────
   Tiny status chip showing time until the worker's next scheduled tick.
   Derived client-side from the most-recent decision's created_at +
   live cadence_sec; reads "Polling…" when elapsed > cadence (worker is
   mid-tick or paused) and "—" before any decision has landed. */
.countdown-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--tr-card-bg-2);
  color: var(--tr-text-2);
  border: 1px solid var(--tr-border);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.countdown-chip.imminent { background: var(--tr-warn-bg); color: var(--tr-warn-text); border-color: transparent; }
.countdown-chip.polling { background: var(--tr-ok-bg); color: var(--tr-ok-text); border-color: transparent; }
[data-theme="dark"] .countdown-chip.polling { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .countdown-chip.imminent { background: #78350f; color: #fde68a; }

/* Latency-warning chip: only visible when the newest tick took
 * more than 80% of the active cadence. Lifted styling from the
 * `imminent` countdown variant so a slow tick lands in the same
 * visual register the operator already reads as "watch this." */
.latency-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--tr-warn-bg);
  color: var(--tr-warn-text);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
[data-theme="dark"] .latency-chip { background: #78350f; color: #fde68a; }

/* Apply button — sits in the profile-picker row when the picker's
   current selection differs from the worker's active id. Click writes
   trader_runtime.active_profile_id so the next tick uses the picked
   profile. No body changes required — pure pointer flip. */
.profile-apply-btn {
  padding: .3rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--tr-accent);
  color: #ffffff;
  cursor: pointer;
}
.profile-apply-btn:hover:not(:disabled) { filter: brightness(1.08); }
.profile-apply-btn:disabled { opacity: .6; cursor: progress; }

/* ── pair card (PR-E-2) ──────────────────────────────────────────────────
   Sits between Status and Profile. Read-only current pair + chain +
   venue + pool address on top; paste-GeckoTerminal-URL textarea +
   Save below. 409 / 400 errors render inline in the status surface. */
.pair-card {
  background: var(--tr-card-bg);
  border: 1px solid var(--tr-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pair-current { margin-bottom: .9rem; }
.pair-current-row { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .35rem; }
.pair-current-name { font-size: 1.05rem; font-weight: 700; color: var(--tr-text-1); }
.pair-current-source {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 4px;
  color: var(--tr-text-3);
}
.pair-current-source.runtime { background: var(--tr-ok-bg); color: var(--tr-ok-text); }
.pair-current-source.env { background: var(--tr-card-bg-2); color: var(--tr-text-3); }
[data-theme="dark"] .pair-current-source.runtime { background: #14532d; color: #bbf7d0; }
.pair-meta-row { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; color: var(--tr-text-2); }
.pair-meta-cell { font-variant-numeric: tabular-nums; }
.pair-meta-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tr-text-3);
  margin-right: .25rem;
}
.pair-pool-link {
  color: var(--tr-accent);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
}
.pair-pool-link:hover { text-decoration: underline; }
.pair-input-label-text {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tr-text-3);
}
.pair-input-label-text code {
  background: var(--tr-card-bg-2);
  padding: 0 .25rem;
  border-radius: 3px;
  font-size: .72rem;
  text-transform: none;
}
.pair-input {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--tr-border);
  border-radius: 6px;
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  resize: vertical;
  min-height: 50px;
  margin-top: .25rem;
}
.pair-input:focus { outline: none; border-color: var(--tr-accent); box-shadow: 0 0 0 2px rgba(79, 70, 229, .15); }
.pair-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; margin-top: .55rem; }
.pair-save-status { margin-right: auto; font-size: .82rem; color: var(--tr-text-3); }
.pair-save-status.ok { color: var(--tr-win); }
.pair-save-status.err { color: var(--tr-loss); }
.pair-save-btn {
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--tr-accent);
  color: #ffffff;
  cursor: pointer;
}
.pair-save-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pair-save-btn:disabled { opacity: .6; cursor: progress; }

/* ── trigger-now button (PR-D-3) ─────────────────────────────────────────
   Sits next to the Pause button in the status row. Calls
   POST /api/trader/trigger so the worker's sleep loop wakes within ~10s. */
.trigger-btn {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--tr-border);
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.trigger-btn:hover:not(:disabled) {
  background: var(--tr-accent);
  color: #ffffff;
  border-color: transparent;
}
.trigger-btn:disabled { opacity: .55; cursor: progress; }
/* When trigger sits next to pause, both share the row's flex layout. The
   first auto-margin button claims the right side; the second sits to its
   left with a small gap. */
.trigger-btn + .pause-btn { margin-left: .5rem; }
[data-theme="dark"] .trigger-btn { background: #1f2937; color: #f1f5f9; border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .trigger-btn:hover:not(:disabled) { background: var(--tr-accent); color: #fff; }

/* ── profile editor card (PR-D-3) ────────────────────────────────────────
   Collapsed by default; header shows the active profile name + version
   tag with a chevron toggle. Expanded body shows the metadata grid +
   editable form + version history. */
.profile-card {
  background: var(--tr-card-bg);
  border: 1px solid var(--tr-border);
  border-radius: 14px;
  padding: 0;  /* header carries its own padding; body adds its own */
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.profile-header {
  display: flex;
  align-items: center;
  padding: .8rem 1.1rem;
  gap: .5rem;
}
.profile-toggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tr-text-1);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.profile-toggle:hover .profile-title { color: var(--tr-accent); }
.profile-chevron {
  display: inline-block;
  width: 1rem;
  color: var(--tr-text-3);
  font-size: .85rem;
  transition: transform .12s ease;
}
.profile-toggle[aria-expanded="true"] .profile-chevron { transform: rotate(90deg); }
.profile-title { letter-spacing: -.01em; }
.profile-summary {
  font-weight: 400;
  color: var(--tr-text-2);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-profile-btn {
  flex: 0 0 auto;
  padding: .35rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--tr-border);
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
  cursor: pointer;
}
.add-profile-btn:hover { background: var(--tr-row-hover); }

.profile-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--tr-border);
}

/* Profile picker row — selects which profile id the editor below targets.
   The worker's currently-active id (TRADER_DEFAULT_PROFILE) is marked
   so the operator sees which save would affect the next tick vs. which
   are just being iterated on. */
.profile-picker-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.profile-picker-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tr-text-3);
}
.profile-picker {
  padding: .35rem .55rem;
  font-size: .9rem;
  border: 1px solid var(--tr-border);
  border-radius: 6px;
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
  min-width: 240px;
}
.profile-active-pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: var(--tr-ok-bg);
  color: var(--tr-ok-text);
}
[data-theme="dark"] .profile-active-pill { background: #14532d; color: #bbf7d0; }

.profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .55rem;
  margin: .75rem 0 1rem;
}
.profile-meta-cell {
  padding: .45rem .65rem;
  background: var(--tr-card-bg-2);
  border-radius: 6px;
}
.profile-meta-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tr-text-3);
}
.profile-meta-value {
  font-size: .85rem;
  color: var(--tr-text-1);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.profile-form { display: flex; flex-direction: column; gap: .65rem; }
.profile-field { display: flex; flex-direction: column; gap: .25rem; }
.profile-field-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tr-text-3);
}
.profile-field-label code {
  background: var(--tr-card-bg-2);
  padding: 0 .25rem;
  border-radius: 3px;
  font-size: .72rem;
}
.profile-textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--tr-border);
  border-radius: 6px;
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 360px;
}
.profile-textarea:focus {
  outline: none;
  border-color: var(--tr-accent);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .15);
}

.profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  margin-top: .5rem;
}
.profile-save-status {
  margin-right: auto;
  font-size: .82rem;
  color: var(--tr-text-3);
}
.profile-save-status.err { color: var(--tr-loss); }
.profile-save-status.ok { color: var(--tr-win); }
.profile-btn-primary,
.profile-btn-secondary,
.profile-btn-danger {
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--tr-border);
}
.profile-btn-primary {
  background: var(--tr-accent);
  color: #ffffff;
  border-color: transparent;
}
.profile-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.profile-btn-primary:disabled { opacity: .6; cursor: progress; }
.profile-btn-secondary {
  background: var(--tr-card-bg-2);
  color: var(--tr-text-1);
}
.profile-btn-secondary:hover:not(:disabled) { background: var(--tr-row-hover); }
.profile-btn-danger {
  background: transparent;
  color: var(--tr-loss);
  border-color: var(--tr-loss);
  margin-right: auto; /* shoves Delete to the left of Cancel/Save */
}
.profile-btn-danger:hover:not(:disabled) {
  background: var(--tr-loss);
  color: #ffffff;
}
.profile-btn-danger:disabled { opacity: .35; cursor: not-allowed; }

.profile-history { margin-top: 1.1rem; }
.profile-history-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tr-text-3);
  margin: 0 0 .45rem;
}
.profile-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.profile-history-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .65rem;
  background: var(--tr-card-bg-2);
  border-radius: 6px;
  font-size: .82rem;
  color: var(--tr-text-2);
  font-variant-numeric: tabular-nums;
}
.profile-history-version { font-weight: 700; color: var(--tr-text-1); }
.profile-history-active { color: var(--tr-ok-text); background: var(--tr-ok-bg); padding: .05rem .35rem; border-radius: 4px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; }
[data-theme="dark"] .profile-history-active { background: #14532d; color: #bbf7d0; }
.profile-history-meta { color: var(--tr-text-3); font-size: .76rem; }
.profile-history-view {
  margin-left: auto;
  padding: .15rem .55rem;
  font-size: .78rem;
  background: transparent;
  color: var(--tr-accent);
  border: 1px solid var(--tr-border);
  border-radius: 4px;
  cursor: pointer;
}
.profile-history-view:hover { background: var(--tr-row-hover); }

.add-profile-box { max-width: 720px; }

/* Settings modal — wider since it hosts both the profile editor +
   the LLM agents picker. Cap below decision-modal so the body still
   wraps comfortably on common laptop widths. */
.settings-box { max-width: 880px; }

/* When the profile-card / providers-card render INSIDE the settings
   modal, drop the outer card chrome (the modal-box already provides
   it) and tighten the spacing so they read as sub-sections rather
   than two stacked cards inside a card. */
.profile-card-in-modal,
.providers-card-in-modal {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.profile-card-in-modal + .providers-card-in-modal {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tr-border);
}
.add-profile-help {
  font-size: .82rem;
  color: var(--tr-text-2);
  margin: 0 0 .9rem;
  line-height: 1.45;
}
.add-profile-help code {
  background: var(--tr-card-bg-2);
  padding: .05rem .35rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
}

/* Manage profiles modal (PR-G-1a) — bulk-delete surface. */
.manage-profiles-box { max-width: 680px; }
.manage-profiles-help {
  font-size: .82rem;
  color: var(--tr-text-2);
  margin: 0 0 .9rem;
  line-height: 1.45;
}
.manage-profiles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 60vh;
  overflow-y: auto;
}
.manage-profiles-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .85rem;
  background: var(--tr-card-bg-2);
  border-radius: 8px;
}
.manage-profiles-meta { flex: 1; min-width: 0; }
.manage-profiles-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--tr-text-1);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.manage-profiles-sub {
  font-size: .75rem;
  color: var(--tr-text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: .15rem;
}
.manage-profiles-active-pill {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--tr-ok-bg);
  color: var(--tr-ok-text);
  padding: .15rem .45rem;
  border-radius: 4px;
}
.manage-profiles-delete {
  padding: .3rem .7rem;
  font-size: .78rem;
}

/* ── toast (PR-D-3) ──────────────────────────────────────────────────────
   Bottom-right transient surface for "Triggered next tick within 10s",
   "Saved as v3", etc. Auto-dismissed by JS — fades via opacity. */
.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  max-width: 360px;
  padding: .75rem 1rem;
  border-radius: 8px;
  background: var(--tr-text-1);
  color: var(--tr-card-bg);
  font-size: .85rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--tr-loss); color: #ffffff; }
.toast.ok { background: var(--tr-win); color: #ffffff; }

/* ── modals (decision detail + profile editor add/view, PR-D-3) ───────── */
#decision-modal,
#add-profile-modal,
#manage-profiles-modal,
#profile-version-modal,
#mark-executed-modal,
#settings-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,22,36,.55);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
#decision-modal.open,
#add-profile-modal.open,
#manage-profiles-modal.open,
#profile-version-modal.open,
#mark-executed-modal.open,
#settings-modal.open { display: flex; }
#decision-modal .modal-box,
#profile-version-modal .modal-box { max-width: 880px; }
/* Dark-theme modal box: inherit the card's dark surface so the modal
   doesn't read as a bright white square against a dark page. The
   shared .modal-box base is light-themed. */
[data-theme="dark"] .modal-box {
  background: var(--tr-card-bg);
  color: var(--tr-text-1);
}
[data-theme="dark"] .modal-header { border-bottom-color: var(--tr-border); }
[data-theme="dark"] .modal-question { color: var(--tr-text-1); }
[data-theme="dark"] .modal-close { color: var(--tr-text-3); }
[data-theme="dark"] .modal-close:hover { color: var(--tr-text-1); }
.decision-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
  background: var(--tr-card-bg-2);
  padding: .9rem 1rem;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tr-text-1);
  overflow-x: auto;
}

/* Per-decision modal's side-by-side decider+panel view. Only
 * rendered when the clicked decision is a decider row; legacy /
 * shadow-only rows keep the raw-JSON pre. */
.decision-tickview { display: flex; flex-direction: column; gap: .9rem; }
.tickview-header {
  display: flex; align-items: center; gap: .7rem;
  font-size: .75rem; color: var(--tr-text-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.tickview-tickid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tickview-mode {
  background: var(--tr-card-bg-2);
  padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--tr-border);
}
.tickview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width: 720px) { .tickview-cols { grid-template-columns: 1fr; } }
.tickview-col {
  background: var(--tr-card-bg-2);
  padding: .8rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--tr-border);
}
.tickview-col-title {
  margin: 0 0 .55rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tr-text-2);
}
.tickview-member {
  padding: .55rem .65rem;
  border-radius: 6px;
  background: var(--tr-card-bg);
  margin-bottom: .55rem;
  border: 1px solid var(--tr-border);
}
.tickview-member:last-child { margin-bottom: 0; }
.tickview-member-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem;
  margin-bottom: .35rem;
}
.tickview-letter {
  font-weight: 700;
  color: var(--tr-text-1);
}
.tickview-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: var(--tr-text-3);
}
.tickview-action {
  font-weight: 700;
  color: var(--tr-text-1);
  padding: .1rem .45rem;
  border-radius: 4px;
  background: var(--tr-card-bg-2);
  border: 1px solid var(--tr-border);
}
.tickview-conf {
  font-size: .72rem;
  color: var(--tr-text-3);
  font-variant-numeric: tabular-nums;
}
.tickview-reasoning {
  font-size: .82rem;
  color: var(--tr-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.tickview-error {
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--tr-loss);
}
.tickview-empty {
  font-size: .8rem;
  color: var(--tr-text-3);
  font-style: italic;
}
.tickview-member-decider { background: var(--tr-card-bg); }

/* ── dark theme overrides ────────────────────────────────────────────── */
[data-theme="dark"] {
  --tr-card-bg:    #1e293b;
  --tr-card-bg-2:  #0f172a;
  --tr-border:     rgba(255,255,255,.10);
  --tr-text-1:     #f1f5f9;
  --tr-text-2:     #cbd5e1;
  --tr-text-3:     #64748b;
  --tr-row-hover:  rgba(255,255,255,.03);
  --tr-reject:     #f59e0b;  /* brighter amber on the dark bg */
}
[data-theme="dark"] .tr-action-badge.CLOSE { background: #5b1d1d; color: #fca5a5; }
[data-theme="dark"] .tr-action-badge.OPEN_SHORT { background: #78350f; color: #fde68a; }
[data-theme="dark"] .tr-action-badge.HOLD,
[data-theme="dark"] .tr-action-badge.HOLD_POSITION { background: #1e3a8a; color: #c7d2fe; }
[data-theme="dark"] .tr-action-badge.MOVE_STOP,
[data-theme="dark"] .tr-action-badge.SCALE_OUT { background: #78350f; color: #fde68a; }
[data-theme="dark"] .tr-action-badge.PASS { background: #1f2937; color: #94a3b8; }
[data-theme="dark"] .status-pill.disabled { background: #1f2937; color: #94a3b8; border-color: rgba(255,255,255,.10); }

/* ── Workstream P-7 — perps + scanner-events dashboard surface ───────── */

/* Worker-mode pill in the status row. `cadence` is the calmer state
   (default); `event` highlights that the bot is on the perps loop. */
.status-pill.mode-pill.cadence { background: #e0e7ff; color: #3730a3; border-color: transparent; }
.status-pill.mode-pill.event   { background: #fde68a; color: #92400e; border-color: transparent; }
[data-theme="dark"] .status-pill.mode-pill.cadence { background: #1e3a8a; color: #c7d2fe; }
[data-theme="dark"] .status-pill.mode-pill.event   { background: #78350f; color: #fde68a; }

/* Position-card perps chips — leverage / liquidation / funding. Render
   inline next to the existing position-cell grid when leverage > 1.
   The SHORT badge inverts the LONG color to distinguish at a glance. */
.position-side-badge { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.position-side-badge.long  { background: var(--tr-ok-bg); color: var(--tr-ok-text); }
.position-side-badge.short { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .position-side-badge.short { background: #5b1d1d; color: #fca5a5; }

/* P-7b: WS liveness freshness chip — small muted suffix after the
   Mark price in the event-mode status grid. `.stale` flips amber when
   the heartbeat is > ~90s old to surface a stalled worker. */
#status-ws-freshness { font-size: .72rem; color: var(--tr-text-3); margin-left: .35rem; font-variant-numeric: tabular-nums; }
#status-ws-freshness.stale { color: var(--tr-warn-text); font-weight: 600; }
[data-theme="dark"] #status-ws-freshness.stale { color: #fde68a; }

.perps-chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.perps-chip { font-size: .78rem; padding: .25rem .55rem; border-radius: 999px; background: var(--tr-card-bg-2); color: var(--tr-text-2); border: 1px solid var(--tr-border); display: inline-flex; gap: .35rem; align-items: baseline; }
.perps-chip strong { color: var(--tr-text-1); }
.perps-chip.liq    { color: var(--tr-loss); border-color: var(--tr-loss); }
.perps-chip.funding-pos strong { color: var(--tr-win); }
.perps-chip.funding-neg strong { color: var(--tr-loss); }

/* Trades table — manual-execution sub-row + Mark executed button. */
.manual-label { color: var(--tr-text-3); }
.manual-divergence-pos { color: var(--tr-win); font-weight: 700; }
.manual-divergence-neg { color: var(--tr-loss); font-weight: 700; }
.mark-executed-btn { font-size: .75rem; padding: .2rem .55rem; border-radius: 6px; background: var(--tr-card-bg-2); color: var(--tr-text-2); border: 1px solid var(--tr-border); cursor: pointer; }
.mark-executed-btn:hover { background: var(--tr-row-hover); color: var(--tr-text-1); }
.mark-executed-btn.has-manual { background: var(--tr-ok-bg); color: var(--tr-ok-text); border-color: transparent; }

/* Scanner events panel — visible only in event-mode. List of recent
   triggers; gated rows muted, consulted rows hover-clickable through
   to the decision modal. */
.scanner-card { background: var(--tr-card-bg); border: 1px solid var(--tr-border); border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1rem; }
.scanner-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.scanner-item { font-size: .85rem; display: grid; grid-template-columns: 6.5rem 6.5rem 4.5rem 1fr auto; gap: .6rem; padding: .4rem .6rem; border-radius: 6px; background: var(--tr-card-bg-2); border: 1px solid var(--tr-border); align-items: center; }
.scanner-item.gated { opacity: .7; }
.scanner-item.consulted { cursor: pointer; }
.scanner-item.consulted:hover { background: var(--tr-row-hover); }
.scanner-item-ts { color: var(--tr-text-3); font-variant-numeric: tabular-nums; font-size: .78rem; }
.scanner-item-detector { font-weight: 700; color: var(--tr-text-1); }
.scanner-item-side-long  { color: var(--tr-win); font-weight: 700; }
.scanner-item-side-short { color: var(--tr-loss); font-weight: 700; }
.scanner-item-score { font-variant-numeric: tabular-nums; color: var(--tr-text-2); }
.scanner-item-tag { font-size: .72rem; padding: .1rem .4rem; border-radius: 999px; }
.scanner-item-tag.gate-below_threshold { background: var(--tr-card-bg); color: var(--tr-text-3); border: 1px dashed var(--tr-border); }
.scanner-item-tag.gate-position_locked { background: #fef3c7; color: #92400e; }
.scanner-item-tag.consulted { background: var(--tr-ok-bg); color: var(--tr-ok-text); }
[data-theme="dark"] .scanner-item-tag.gate-position_locked { background: #78350f; color: #fde68a; }

/* Mark-executed modal */
.mark-executed-box { max-width: 28rem; }
.mark-executed-help { font-size: .82rem; color: var(--tr-text-2); margin: 0 0 .8rem 0; }
.mark-executed-form { display: flex; flex-direction: column; gap: .8rem; }
.mark-executed-field { display: flex; flex-direction: column; gap: .25rem; }
.mark-executed-field-label { font-size: .78rem; color: var(--tr-text-2); font-weight: 600; }
.mark-executed-input { font-family: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid var(--tr-border); border-radius: 6px; background: var(--tr-card-bg-2); color: var(--tr-text-1); }
.mark-executed-note { font-size: .75rem; color: var(--tr-text-3); margin: 0; font-style: italic; }
.mark-executed-actions { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .4rem; }
.mark-executed-status { flex: 1 1 auto; font-size: .8rem; color: var(--tr-text-3); }
.mark-executed-status.error { color: var(--tr-loss); }
.mark-executed-status.success { color: var(--tr-win); }