.live-page { min-height: 100vh; }
.live-intro { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
.live-intro h1 { max-width: 15ch; }
.mode-line { align-items: center; border-block: var(--rule-thin) solid var(--color-rule); display: flex; gap: var(--space-md); justify-content: space-between; padding-block: var(--space-sm); }
.mode-line strong, .mode-line span { font-family: var(--font-mono); font-size: var(--text-sm); }
.mode-line strong { color: var(--color-accent); }
.account-balances { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: min(100%, 27rem); }
.account-balances div { border-inline-start: var(--rule-thin) solid var(--color-rule); padding-inline-start: var(--space-sm); }
.account-balances dt { color: var(--color-muted); font-size: var(--text-xs); }
.account-balances dd { color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-stage { --sma-5m: #56bfff; --sma-15m: #e8ad45; --sma-1h: #cf8cff; background: var(--color-graphite); color: var(--color-on-dark); }
.live-chart-heading { align-items: end; flex-direction: row; }
.live-toolbar { align-items: end; display: flex; gap: var(--space-lg); }
.live-toolbar > p { color: var(--color-on-dark); font-size: var(--text-xl); }
.live-toolbar label { color: var(--color-on-dark-muted); display: grid; font-family: var(--font-mono); font-size: var(--text-xs); gap: var(--space-2xs); }
.live-toolbar select { background: var(--color-graphite-2); border-color: var(--color-chart-grid); color: var(--color-on-dark); height: 2.25rem; }
#live-chart { cursor: crosshair; display: block; height: 30rem; touch-action: pan-y; width: 100%; }
.chart-inspector { border-block: 1px solid var(--color-chart-grid); color: var(--color-on-dark-muted); display: flex; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); gap: var(--space-xs) var(--space-md); min-height: 2.25rem; padding-block: var(--space-sm); }
.chart-inspector strong { color: var(--color-on-dark); }
.chart-inspector .sma-5m-text { color: var(--sma-5m); }
.chart-inspector .sma-15m-text { color: var(--sma-15m); }
.chart-inspector .sma-1h-text { color: var(--sma-1h); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-sm); }
.chart-legend span { align-items: center; color: var(--color-on-dark-muted); display: flex; font-family: var(--font-mono); font-size: var(--text-xs); gap: var(--space-2xs); }
.chart-legend i { background: var(--color-on-dark-muted); display: block; height: 0.55rem; width: 0.55rem; }
.chart-legend .sma { background: transparent; height: 0; width: 1.25rem; }
.chart-legend .sma-5m { border-top: 2px solid var(--sma-5m); }
.chart-legend .sma-15m { border-top: 2px solid var(--sma-15m); }
.chart-legend .sma-1h { border-top: 2px solid var(--sma-1h); }
.chart-legend .entry { background: var(--color-chart-line); border-radius: 50%; }
.chart-legend .dca { background: var(--color-warning); transform: rotate(45deg); }
.chart-legend .tp { background: var(--color-on-dark); }
.chart-legend .sim { background: transparent; border: 1px dashed var(--color-on-dark-muted); }
.live-tables { gap: var(--space-2xl); }
.live-table { min-width: 72rem; }
.status-open { color: var(--color-success); font-weight: 600; }
.status-problem { color: var(--color-error); font-weight: 600; }
.empty-row { color: var(--color-muted); text-align: start; }
#feed-status.stale i { background: var(--color-warning); }
#feed-status.offline i { background: var(--color-error); }

@media (min-width: 40rem) {
  .live-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .live-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .account-balances { min-width: 0; width: 100%; }
  .live-chart-heading, .live-toolbar { align-items: start; flex-direction: column; }
  #live-chart { height: 24rem; }
}