/* ======================================================================== */
/* Apex Morning — pixel-perfect TraderSync-inspired dashboard                 */
/* ======================================================================== */

:root {
  /* Color palette (matches Streamlit version) */
  --bg-dark:        #182130;
  --bg-panel:       #1F2A3D;
  --bg-row:         #252F44;
  --bg-row-hover:   #2A3650;
  --border:         #2A3550;
  --border-strong:  #3A4560;

  --text-primary:   #FFFFFF;
  --text-secondary: #B8C0CC;
  --text-muted:     #8A95A8;
  --text-dim:       #6B7585;

  --teal:           #22D3EE;
  --teal-glow:      rgba(34, 211, 238, 0.18);
  --green:          #10b981;
  --green-glow:     rgba(16, 185, 129, 0.18);
  --pink:           #F87171;
  --pink-glow:      rgba(248, 113, 113, 0.18);
  --amber:          #FBBF24;
  --amber-glow:     rgba(251, 191, 36, 0.15);
  --purple:         #6C5CE7;
  --purple-glow:    rgba(108, 92, 231, 0.15);
  --purple-light:   #a89bff;
}

/* ------------------------------------------------------------------------- */
/* Base                                                                      */
/* ------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a { color: var(--purple-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Mono for numbers */
.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }

/* ------------------------------------------------------------------------- */
/* Layout                                                                    */
/* ------------------------------------------------------------------------- */

.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* ------------------------------------------------------------------------- */
/* Header banner                                                             */
/* ------------------------------------------------------------------------- */

.header {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-greet {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.header-sub {
  color: var(--text-muted);
  font-size: 11px;
}
.header-sub .regime-pill {
  color: var(--teal);
  font-weight: 500;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bot-status-pill {
  background: var(--teal-glow);
  color: var(--teal);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bot-status-pill.stale { background: var(--amber-glow); color: var(--amber); }
.bot-status-pill.error { background: var(--pink-glow); color: var(--pink); }
.bot-status-pill::before {
  content: '●';
  font-size: 9px;
}

/* ------------------------------------------------------------------------- */
/* Buttons                                                                   */
/* ------------------------------------------------------------------------- */

button, .btn {
  background: var(--purple);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
  font-family: inherit;
}
button:hover, .btn:hover { background: #5B4ED4; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--bg-row);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-row-hover); }
.btn-small {
  padding: 4px 10px;
  font-size: 11px;
}
.btn-icon {
  padding: 4px 8px;
  font-size: 12px;
}

/* ------------------------------------------------------------------------- */
/* Filter dropdowns row                                                      */
/* ------------------------------------------------------------------------- */

.filter-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
select.filter {
  width: 100%;
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 12px;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%239CA3AF' d='M8 11L3 6h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
}
select.filter:hover { border-color: var(--border-strong); }
select.filter:focus { outline: none; border-color: var(--purple); }

/* ------------------------------------------------------------------------- */
/* Metric cards (top row of 4)                                               */
/* ------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.metric {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px 12px;
}
.metric-label {
  color: #A8B3C7;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.metric-value {
  font-size: 24px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: -0.01em;
  color: #E5E9F2;
}
.metric-value.pos { color: var(--green); }
.metric-value.neg { color: var(--pink); }
.metric-sub {
  color: #A8B3C7;
  font-size: 11px;
  margin-top: 2px;
}
.metric-sub .pos { color: var(--green); font-weight: 500; }
.metric-sub .neg { color: var(--pink); font-weight: 500; }

/* ------------------------------------------------------------------------- */
/* Section card (banner + body in single bordered unit)                      */
/* ------------------------------------------------------------------------- */

.section-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}
.section-card-header {
  background: var(--purple-glow);
  border-bottom: 1px solid var(--border);
  color: var(--purple-light);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 9px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-card-header-meta {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.section-card-body {
  padding: 16px;
}

/* ------------------------------------------------------------------------- */
/* Position cards (Open Schwab Positions)                                    */
/* ------------------------------------------------------------------------- */

.pos-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.pos-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
}
.pos-card.empty { opacity: 0.35; }
.pos-symbol {
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.pos-detail {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.4;
}
.pos-pnl {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  margin-top: 8px;
  color: var(--text-muted);
}
.pos-pnl.pos { color: var(--green); }
.pos-pnl.neg { color: var(--pink); }

.section-card-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  background: rgba(0,0,0,0.10);
  text-align: right;
}

/* ------------------------------------------------------------------------- */
/* Two-column body layout                                                    */
/* ------------------------------------------------------------------------- */

.body-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------------------------------- */
/* Today's Actions panel                                                     */
/* ------------------------------------------------------------------------- */

.actions-card {
  background: var(--bg-panel);
  border: 2px solid var(--purple);
  border-radius: 6px;
  overflow: hidden;
}
.actions-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.actions-title {
  font-size: 13px;
  font-weight: 600;
}
.actions-title .accent { color: var(--purple-light); font-weight: 400; font-size: 11px; }
.actions-sub {
  color: var(--text-muted);
  font-size: 10px;
}
.actions-body { padding: 12px 16px; }

.action-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 6px;
}
.action-group-label:first-child { margin-top: 0; }
.action-group-label.cut { color: var(--pink); }
.action-group-label.trim { color: var(--amber); }
.action-group-label.buy { color: var(--teal); }

.action-row {
  display: grid;
  grid-template-columns: 50px 70px 1fr 90px 60px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 11px;
}
.action-row.cut { background: rgba(249, 110, 143, 0.08); border-left: 2px solid var(--pink); }
.action-row.trim { background: rgba(251, 191, 36, 0.08); border-left: 2px solid var(--amber); }
.action-row.buy { background: rgba(8, 149, 145, 0.08); border-left: 2px solid var(--teal); }

.action-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  text-transform: uppercase;
}
.action-pill.cut { background: var(--pink); color: white; }
.action-pill.trim { background: var(--amber); color: #4A2E00; }
.action-pill.buy { background: var(--teal); color: white; }

.action-symbol {
  font-weight: 600;
  color: var(--teal);
  font-size: 12px;
}
.action-detail {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.3;
}
.action-status {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  text-align: right;
}
.action-status.executed { color: var(--teal); }
.action-status.failed { color: var(--pink); }
.action-status.pending { color: var(--text-muted); }

.action-score-pill {
  background: rgba(108, 92, 231, 0.20);
  color: var(--purple-light);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  text-align: center;
  font-family: 'SF Mono', Menlo, monospace;
}

/* ------------------------------------------------------------------------- */
/* Apex bot paper panel                                                      */
/* ------------------------------------------------------------------------- */

.bot-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.bot-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bot-panel-title { font-size: 13px; font-weight: 600; }
.bot-panel-pill {
  background: var(--teal-glow);
  color: var(--teal);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.bot-equity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.bot-equity-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bot-equity-value {
  font-size: 16px;
  font-weight: 500;
  font-family: 'SF Mono', Menlo, monospace;
  margin-top: 3px;
}
.bot-positions {
  margin-top: 10px;
}
.bot-position-row {
  display: grid;
  grid-template-columns: 70px 1fr 100px;
  padding: 5px 0;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.bot-position-row:last-child { border-bottom: none; }
.bot-position-row .symbol { color: var(--teal); font-weight: 500; }
.bot-position-row .qty { color: var(--text-secondary); }
.bot-position-row .pnl { font-family: 'SF Mono', Menlo, monospace; text-align: right; font-size: 11px; }
.bot-position-row .pnl.pos { color: var(--green); }
.bot-position-row .pnl.neg { color: var(--pink); }

/* ------------------------------------------------------------------------- */
/* Bot activity log                                                          */
/* ------------------------------------------------------------------------- */

.bot-activity {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
}
.bot-activity-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.bot-event {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 10px;
  color: var(--text-secondary);
  align-items: baseline;
}
.bot-event-time {
  color: var(--text-muted);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 9px;
  min-width: 32px;
}
.bot-event-dot { font-size: 8px; line-height: 1; }
.bot-event-dot.teal { color: var(--teal); }
.bot-event-dot.amber { color: var(--amber); }
.bot-event-dot.pink { color: var(--pink); }
.bot-event-dot.muted { color: var(--text-muted); }

/* ------------------------------------------------------------------------- */
/* Pattern reminder                                                          */
/* ------------------------------------------------------------------------- */

.pattern-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
}
.pattern-label {
  color: var(--amber);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.pattern-text {
  font-size: 11px;
  margin-bottom: 2px;
}
.pattern-text strong { color: var(--amber); font-weight: 500; }
.pattern-detail {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ------------------------------------------------------------------------- */
/* Mini calendar                                                             */
/* ------------------------------------------------------------------------- */

.mini-cal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.mini-cal-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px 80px;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.mini-cal-month-name {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.mini-cal-nav {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.cal-nav-select {
  background: var(--bg-dark, #131722);
  color: var(--text, #e6e9ef);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.cal-nav-select:hover {
  border-color: var(--teal, #2dd4bf);
}
.cal-nav-select:focus {
  border-color: var(--teal, #2dd4bf);
  box-shadow: 0 0 0 1px var(--teal, #2dd4bf);
}
.mini-cal-pnl {
  text-align: right;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
}
.mini-cal-pnl.pos { color: var(--green); }
.mini-cal-pnl.neg { color: var(--pink); }
.mini-cal-stats {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mini-cal-scope {
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-style: italic;
}

/* Year-over-year summary strip */
.yoy-strip {
  margin: 8px 0 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 4px;
}
.yoy-strip-title {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  font-weight: 600;
}
.yoy-strip-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yoy-row {
  display: grid;
  grid-template-columns: 56px 60px 70px 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 4px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 11px;
}
.yoy-row:hover {
  background: rgba(45, 212, 191, 0.08);
}
.yoy-year {
  font-weight: 600;
  color: var(--text, #e6e9ef);
}
.yoy-trades, .yoy-wl {
  color: var(--text-muted, #9CA3AF);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
}
.yoy-pnl {
  text-align: right;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
}
.yoy-pnl.pos { color: var(--green, #10b981); }
.yoy-pnl.neg { color: var(--pink, #ec4899); }
.mini-cal-scope strong {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 500;
}
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mini-cal-dow {
  text-align: center;
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 0;
}
.mini-cal-day {
  aspect-ratio: 1.1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mini-cal-day.empty { background: transparent; border: none; }
.mini-cal-day.today { border: 1px solid var(--purple); }
.mini-cal-day.pos { background: rgba(16, 185, 129, 0.45); }
.mini-cal-day.neg { background: rgba(183, 75, 102, 0.65); }
.mini-cal-daynum { font-size: 9px; color: var(--text-muted); }
.mini-cal-day-pnl {
  font-size: 8px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 600;
  margin-top: 1px;
}
.mini-cal-day-pnl.pos { color: var(--green); }
.mini-cal-day-pnl.neg { color: var(--pink); }
.mini-cal-day-trades { font-size: 7px; color: var(--text-muted); }

/* ------------------------------------------------------------------------- */
/* Activity table (grid-based for expandable rows)                           */
/* ------------------------------------------------------------------------- */

.activity-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.activity-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.activity-title { font-size: 13px; font-weight: 600; }
.activity-meta { color: var(--text-muted); font-size: 10px; }

.activity-table-wrap {
  max-height: 600px;
  overflow-y: auto;
}
.activity-table-wrap::-webkit-scrollbar { width: 8px; }
.activity-table-wrap::-webkit-scrollbar-track { background: var(--bg-dark); }
.activity-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.activity-row {
  display: grid;
  grid-template-columns: 24px 70px 90px 70px 1fr 70px 70px 60px 90px 70px;
  gap: 10px;
  align-items: center;
  padding: 9px 16px;
  font-size: 11px;
}
.activity-header-row {
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  font-weight: 500;
  z-index: 1;
}

.cycle-group {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}
.cycle-group:hover { background: var(--bg-row); }
.cycle-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cycle-group summary::-webkit-details-marker { display: none; }
.cycle-group .expand-tri {
  color: var(--text-muted);
  font-size: 9px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.cycle-group[open] .expand-tri {
  transform: rotate(90deg);
  color: var(--teal);
}
.cycle-group[open] > summary { background: var(--bg-row); }

.activity-row .num {
  font-family: 'SF Mono', Menlo, monospace;
  text-align: right;
}
.activity-row .pnl-pos { color: var(--green); }
.activity-row .pnl-neg { color: var(--pink); }
.activity-row .pnl-zero { color: var(--text-muted); }
.activity-row .dim { color: var(--text-muted); }
.activity-row .symbol-cell {
  color: var(--teal);
  font-weight: 500;
}

/* Expandable fills detail panel */
.fills-detail {
  background: var(--bg-dark);
  padding: 10px 16px 14px 50px;
  border-top: 1px solid var(--border);
}
.fills-row {
  display: grid;
  grid-template-columns: 100px 70px 60px 110px 60px 70px 80px 100px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 10px;
  border-bottom: 1px dotted rgba(43, 53, 80, 0.5);
}
.fills-row:last-child { border-bottom: none; }
.fills-header {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.fills-row .fill-action {
  font-weight: 500;
}
.fills-row .fill-action.buy { color: var(--teal); }
.fills-row .fill-action.sell { color: var(--pink); }
.fills-row .fill-action.other { color: var(--text-muted); }
.fills-row .num {
  font-family: 'SF Mono', Menlo, monospace;
  text-align: right;
}
.fills-row .pnl-pos { color: var(--green); }
.fills-row .pnl-neg { color: var(--pink); }
.fills-row .dim { color: var(--text-muted); }

/* Status pills + side badges (kept from before) */
.status-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}
.status-pill.win { background: var(--green); color: white; }
.status-pill.loss { background: var(--pink); color: white; }
.status-pill.open { background: var(--amber); color: #4A2E00; }
.status-pill.be { background: var(--bg-row); color: var(--text-secondary); }

.side-badge {
  border: 1px solid var(--text-muted);
  color: var(--text-secondary);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}
.side-badge.long { color: var(--green); border-color: var(--green); }
.side-badge.short { color: var(--pink); border-color: var(--pink); }

.contract-cell .ctype {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.contract-cell .ctype.call { color: var(--teal); }
.contract-cell .ctype.put { color: var(--pink); }
.contract-cell .ctype.share { color: var(--text-muted); }
.contract-cell .cstrike { color: var(--text-secondary); margin: 0 4px; font-family: 'SF Mono', monospace; }
.contract-cell .cexp { color: var(--text-muted); font-family: 'SF Mono', monospace; font-size: 10px; }

/* ------------------------------------------------------------------------- */
/* Footer                                                                    */
/* ------------------------------------------------------------------------- */

.footer {
  margin-top: 24px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------------------- */
/* Edit positions form                                                       */
/* ------------------------------------------------------------------------- */

.edit-form {
  padding: 16px;
}
.edit-form-help {
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.edit-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.6fr 1.4fr 0.6fr 0.8fr 50px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.edit-form-grid input,
.edit-form-grid select {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 7px 9px;
  font-size: 11px;
  font-family: inherit;
}
.edit-form-grid input:focus,
.edit-form-grid select:focus {
  outline: none;
  border-color: var(--purple);
}
.edit-form-grid input:disabled { opacity: 0.4; }
.edit-form-grid .col-header {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding-bottom: 4px;
}
.edit-form-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.btn-remove {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
}
.btn-remove:hover { color: var(--pink); border-color: var(--pink); }

/* ------------------------------------------------------------------------- */
/* Toast notification                                                        */
/* ------------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(0);
}
.toast.error { border-left-color: var(--pink); }

/* ------------------------------------------------------------------------- */
/* Responsive                                                                */
/* ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .body-grid { grid-template-columns: 1fr; }
  .pos-strip { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .filter-row { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------------- */
/* Statement bar — broker-truth freshness indicator                          */
/* ------------------------------------------------------------------------- */
.statement-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 13px;
}
.statement-bar.warn { border-left-color: var(--pink); }
.statement-bar-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--text-muted);
}
.statement-as-of {
  color: #FFFFFF;
  font-weight: 500;
}
.fresh-pill {
  background: var(--teal-glow);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stale-pill {
  background: var(--pink-glow);
  color: var(--pink);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-refresh {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.btn-refresh:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ------------------------------------------------------------------------- */
/* Per-account row — 5 small cards                                           */
/* ------------------------------------------------------------------------- */
.account-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.account-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
}
.account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.account-suffix {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.account-type {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.account-netliq {
  font-size: 18px;
  font-weight: 600;
  color: #E5E9F2;
  margin-bottom: 6px;
}
.account-pnls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.account-pnl-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.account-pnl-label {
  color: var(--text-muted);
}
.account-pnl-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.account-pnl-val.pos { color: var(--green); }
.account-pnl-val.neg { color: var(--pink); }
.account-positions-summary {
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* ------------------------------------------------------------------------- */
/* Secondary metrics — small cards for cycle-derived stats                   */
/* ------------------------------------------------------------------------- */
.secondary-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  max-width: 50%;
}
.metric-sm .metric-value {
  font-size: 22px;
}
.metric-sm .metric-label {
  font-size: 10px;
}

/* ------------------------------------------------------------------------- */
/* Responsive overrides for new components                                    */
/* ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .account-row { grid-template-columns: repeat(2, 1fr); }
  .secondary-metrics { max-width: 100%; }
}

/* ------------------------------------------------------------------------- */
/* Delta pills (vs prior snapshot)                                           */
/* ------------------------------------------------------------------------- */
.delta-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.delta-pill.pos { background: var(--green-glow); color: var(--green); }
.delta-pill.neg { background: var(--pink-glow); color: var(--pink); }

/* ------------------------------------------------------------------------- */
/* Account-card hover (clickable)                                            */
/* ------------------------------------------------------------------------- */
.account-card {
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.account-card:hover {
  border-color: var(--teal);
}
.account-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------------- */
/* Modal                                                                     */
/* ------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  width: 100%;
  max-width: 1100px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: #E5E9F2;
  letter-spacing: 0.3px;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: #E5E9F2; }
.modal-body {
  padding: 18px 20px 24px;
  overflow-y: auto;
  font-size: 12px;
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.modal-stat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.modal-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.modal-stat-value {
  font-size: 18px;
  font-weight: 500;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
}
.modal-stat-value.pos { color: var(--green); }
.modal-stat-value.neg { color: var(--pink); }

.modal-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.modal-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.modal-table th.r, .modal-table td.r { text-align: right; }
.modal-table td {
  padding: 6px 8px;
  font-size: 12px;
  color: #FFFFFF;
  border-bottom: 1px solid var(--border);
}
.modal-table td.muted { color: var(--text-muted); }
.modal-table td.pos { color: var(--green); }
.modal-table td.neg { color: var(--pink); }
.modal-table tr:last-child td { border-bottom: none; }

@media (max-width: 1100px) {
  .modal-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------------- */
/* Account card — brighter labels + selected state                            */
/* ------------------------------------------------------------------------- */
.account-card.selected {
  border-color: var(--teal);
  background: linear-gradient(180deg, rgba(8, 149, 145, 0.08), var(--bg-panel) 50%);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.account-card.selected .account-suffix {
  color: var(--teal);
}
.account-pnl-label {
  color: #A8B3C7;
}
.account-positions-summary {
  color: #A8B3C7;
}
.account-type {
  color: #A8B3C7;
}
.account-suffix {
  color: #E5E9F2;
}
.account-netliq {
  color: #F0F2F8;
}

/* Sub-text helpers used for inline pnl in metric-sub */
.metric-sub .pos { color: var(--green); }
.metric-sub .neg { color: var(--pink); }

/* Mobile responsive — 5-card row collapses */
@media (max-width: 1300px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
}

/* Futures option badge in activity table */
.fop-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(180, 140, 0, 0.18);
  color: #D4A933;
  border-radius: 2px;
  font-weight: 500;
}

/* ------------------------------------------------------------------------- */
/* Symbol stats panel (visible when symbol filter active)                    */
/* ------------------------------------------------------------------------- */
.symbol-stats-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  padding: 16px 20px 20px;
  margin-bottom: 16px;
}

.ss-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ss-title { display: flex; flex-direction: column; gap: 2px; }
.ss-symbol {
  font-size: 22px;
  font-weight: 600;
  color: #E5E9F2;
  letter-spacing: -0.01em;
}
.ss-subtitle {
  font-size: 11px;
  color: #A8B3C7;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ss-headline { display: flex; align-items: baseline; gap: 10px; }
.ss-headline-label {
  font-size: 10px;
  color: #A8B3C7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ss-headline-val {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ss-headline-val.pos { color: var(--green); }
.ss-headline-val.neg { color: var(--pink); }
.ss-headline-meta {
  font-size: 11px;
  color: #A8B3C7;
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ss-stat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.ss-stat-label {
  font-size: 9px;
  color: #A8B3C7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.ss-stat-val {
  font-size: 18px;
  font-weight: 500;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ss-stat-val.pos { color: var(--green); }
.ss-stat-val.neg { color: var(--pink); }
.ss-stat-sub {
  font-size: 10px;
  color: #A8B3C7;
  margin-top: 3px;
}

.ss-spark-wrap {
  margin-top: 4px;
}
.ss-spark-label {
  font-size: 10px;
  color: #A8B3C7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ss-sparkline {
  width: 100%;
  height: 60px;
  display: block;
}
.ss-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #A8B3C7;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

@media (max-width: 1300px) {
  .ss-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .ss-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-headline-val { font-size: 22px; }
  .ss-symbol { font-size: 18px; }
}

/* ------------------------------------------------------------------------- */
/* Upload modal                                                              */
/* ------------------------------------------------------------------------- */
.upload-help { margin-bottom: 16px; }

.upload-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, background 0.15s;
}
.upload-dropzone.drag-over {
  border-color: var(--teal);
  background: var(--teal-glow);
}
.upload-icon {
  font-size: 28px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.upload-text {
  font-size: 13px;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.upload-or {
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0;
}
.upload-pick-btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--teal-glow);
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.upload-pick-btn:hover {
  background: rgba(8, 149, 145, 0.28);
}

.upload-status { margin-top: 16px; }
.upload-progress {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  font-size: 12px;
  color: #FFFFFF;
}
.upload-success {
  padding: 10px 12px;
  background: var(--teal-glow);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 8px;
}
.upload-error {
  padding: 10px 12px;
  background: var(--pink-glow);
  border-left: 3px solid var(--pink);
  border-radius: 3px;
  font-size: 12px;
  color: var(--pink);
}
.upload-detail-line {
  font-size: 11px;
  color: #FFFFFF;
  margin-top: 6px;
  padding-left: 4px;
}
.upload-detail-line strong { color: #E5E9F2; font-weight: 500; }
.upload-warn { color: var(--pink); }
.upload-reload-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}

/* ------------------------------------------------------------------------- */
/* Tab navigation                                                            */
/* ------------------------------------------------------------------------- */
.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  padding-bottom: 0;
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: #A8B3C7;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, background 0.15s;
  position: relative;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.02);
}
.tab-btn.active {
  color: #E5E9F2;
  background: var(--bg-panel);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg-panel);
}
.tab-icon { font-size: 14px; }
.tab-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  margin-left: 4px;
  animation: pulse-dot 2s infinite;
}
.tab-status-dot.off { background: var(--text-muted); box-shadow: none; animation: none; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.tab-badge {
  background: rgba(255, 165, 0, 0.18);
  color: #FFA533;
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 4px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* ------------------------------------------------------------------------- */
/* BOT TAB                                                                    */
/* ------------------------------------------------------------------------- */
.bot-hero {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bot-hero-title {
  font-size: 18px;
  font-weight: 600;
  color: #E5E9F2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bot-hero-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  animation: pulse-dot 2s infinite;
}
.bot-hero-pulse.off { background: var(--text-muted); box-shadow: none; animation: none; }
.bot-hero-sub {
  font-size: 12px;
  color: #A8B3C7;
  margin-top: 4px;
}
.bot-hero-actions {
  display: flex;
  gap: 8px;
}
.btn-primary {
  background: var(--teal-glow);
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.btn-primary:hover { background: rgba(8, 149, 145, 0.28); }
.btn-danger {
  background: var(--pink-glow);
  color: var(--pink);
  border: 1px solid var(--pink);
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.btn-danger:hover { background: rgba(249, 110, 143, 0.28); }

.bot-metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.bot-metric {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px 12px;
}
.bot-metric-label {
  color: #A8B3C7;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 4px;
}
.bot-metric-value {
  font-size: 22px;
  font-weight: 500;
  color: #E5E9F2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bot-metric-sub {
  color: #A8B3C7;
  font-size: 11px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.bot-metric-sub.pos { color: var(--green); }
.bot-metric-sub.neg { color: var(--pink); }

.bot-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 16px;
}
.bot-signal-col {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.bot-signal-col-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bot-signal-col-header.buy { background: var(--teal-glow); color: var(--teal); }
.bot-signal-col-header.cut { background: rgba(255, 165, 0, 0.15); color: #FFA533; }
.bot-signal-col-header.short { background: var(--pink-glow); color: var(--pink); }
.bot-signal-count {
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
}
.bot-signal-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.bot-signal-sym { color: #E5E9F2; font-weight: 500; }
.bot-signal-score { color: #A8B3C7; font-size: 11px; font-variant-numeric: tabular-nums; }
.bot-signal-px { color: #A8B3C7; font-size: 11px; font-variant-numeric: tabular-nums; }
.bot-signal-empty {
  padding: 14px 12px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.bot-pipeline-scope-note {
  padding: 4px 16px 0;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-style: italic;
}
.bot-signal-breakdown {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.bot-signal-pills {
  padding: 8px 10px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.bot-signal-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.05);
  color: #C8D0E0;
  border: 1px solid var(--border);
}
.bot-signal-pill.pill-executed   { background: var(--green-glow); color: var(--green); border-color: rgba(16, 185, 129, 0.4); }
.bot-signal-pill.pill-pending    { background: var(--teal-glow);  color: var(--teal);  border-color: rgba(34, 211, 238, 0.4); }
.bot-signal-pill.pill-skipped-schwab { background: var(--amber-glow); color: var(--amber); border-color: rgba(251, 191, 36, 0.4); }
.bot-signal-pill.pill-skipped-test   { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }
.bot-signal-pill.pill-failed     { background: var(--pink-glow); color: var(--pink); border-color: rgba(248, 113, 113, 0.4); }
.bot-signal-pill.pill-error      { background: var(--pink-glow); color: var(--pink); border-color: rgba(248, 113, 113, 0.4); }
.bot-signal-pill-more {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.bot-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.bot-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.bot-table th.r, .bot-table td.r { text-align: right; }
.bot-table td {
  padding: 8px 12px;
  font-size: 12px;
  color: #FFFFFF;
  border-bottom: 1px solid var(--border);
}
.bot-table td.pos { color: var(--green); }
.bot-table td.neg { color: var(--pink); }
.bot-table tr:last-child td { border-bottom: none; }

/* ---- Apex tab — Bot Recommendations panel ---- */
.apex-recs-subtitle {
  padding: 4px 16px 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.apex-recs-generated {
  margin-left: 8px;
  font-style: normal;
  color: #8390A8;
}
.apex-recs-toggle {
  font-size: 10px;
  color: var(--text-muted);
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}
.apex-recs-toggle input { vertical-align: middle; margin-right: 3px; }
.apex-recs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.apex-recs-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #FFFFFF;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.apex-recs-table td {
  padding: 7px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.apex-recs-table tr:last-child td { border-bottom: none; }
.apex-recs-table .col-r { text-align: right; }
.apex-recs-table .ticker { color: #E5E9F2; font-weight: 500; }
.apex-recs-table .acct { color: #A8B3C7; font-size: 11px; }
.apex-recs-table .composite { font-weight: 500; }
.apex-recs-action {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.apex-recs-action.STRONG_CLOSE { background: var(--pink-glow); color: var(--pink); border: 1px solid rgba(248, 113, 113, 0.45); }
.apex-recs-action.CLOSE        { background: rgba(255, 165, 0, 0.18); color: #FFA533; border: 1px solid rgba(255, 165, 0, 0.45); }
.apex-recs-action.CUT          { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(251, 191, 36, 0.4); }
.apex-recs-action.HOLD         { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border: 1px solid var(--border); }
.apex-recs-row-STRONG_CLOSE { background: rgba(248, 113, 113, 0.06); }
.apex-recs-row-CLOSE        { background: rgba(255, 165, 0, 0.05); }
.apex-recs-row-CUT          { background: rgba(251, 191, 36, 0.04); }
.apex-recs-row-HOLD         { /* default */ }
.apex-recs-why {
  color: #A8B3C7;
  font-size: 11px;
  max-width: 360px;
}
.apex-recs-why-bear { color: var(--pink); }
.apex-recs-why-bull { color: var(--green); }
#apex-recs-footer {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.bot-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

.bot-info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.bot-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
}
.bot-info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  margin-bottom: 6px;
  font-weight: 500;
}
.bot-info-text {
  font-size: 11px;
  color: #FFFFFF;
  line-height: 1.5;
}
.bot-info-text code {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  color: var(--teal);
}

/* ------------------------------------------------------------------------- */
/* RECOMMENDATIONS TAB (skeleton)                                            */
/* ------------------------------------------------------------------------- */
.recs-hero {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 32px;
  margin-bottom: 16px;
  text-align: center;
}
.recs-hero-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.recs-hero-title {
  font-size: 22px;
  font-weight: 500;
  color: #E5E9F2;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.recs-hero-sub {
  font-size: 13px;
  color: #A8B3C7;
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.recs-mockup {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  opacity: 0.85;
}
.recs-mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  font-weight: 500;
}
.recs-soon-pill {
  background: rgba(255, 165, 0, 0.18);
  color: #FFA533;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.recs-mockup-body { padding: 8px 0; }
.recs-mockup-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.recs-mockup-row:last-child { border-bottom: none; }
.recs-mockup-pos {
  font-size: 13px;
  color: #FFFFFF;
}
.recs-mockup-pos strong { color: #E5E9F2; }
.recs-mockup-meta {
  font-size: 11px;
  color: #A8B3C7;
  margin-top: 2px;
}
.recs-mockup-action { display: flex; align-items: center; gap: 10px; }
.rec-pill {
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.rec-buy { background: var(--teal-glow); color: var(--teal); }
.rec-hold { background: rgba(255, 255, 255, 0.05); color: #FFFFFF; }
.rec-trim { background: rgba(255, 165, 0, 0.18); color: #FFA533; }
.rec-cut { background: var(--pink-glow); color: var(--pink); }

/* ── Actionable recommendations table (trader view) ──────────────────── */
.recs-headline {
  padding: 11px 14px; font-size: 13px; line-height: 1.6;
  border-bottom: 1px solid var(--border); color: #C9D2E3;
}
.recs-headline .recs-head-buy  { color: var(--teal); font-weight: 700; }
.recs-headline .recs-head-sell { color: var(--pink); font-weight: 700; }
.recs-headline .recs-head-hold { color: #A8B3C7; }

.recs-table-wrap { overflow-x: auto; }
.recs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.recs-table thead th {
  text-align: left; padding: 7px 10px; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8A93A6; font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.recs-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.recs-trow:hover td { background: rgba(255, 255, 255, 0.02); }
.recs-td-sym strong { color: #E5E9F2; font-size: 14px; }
.recs-td-acct, .recs-td-qty { color: #A8B3C7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recs-td-score { font-variant-numeric: tabular-nums; font-weight: 700; color: #E5E9F2; }
.recs-td-reason {
  color: #BCC4D6; max-width: 380px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recs-ai.ai-bullish { color: var(--teal); white-space: nowrap; font-weight: 600; }
.recs-ai.ai-bearish { color: var(--pink); white-space: nowrap; font-weight: 600; }
.recs-ai.ai-neutral { color: #A8B3C7; white-space: nowrap; }
.recs-ai-none { color: #6B7689; }

/* group header rows + empty state */
.recs-grp td {
  padding: 6px 10px !important; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.recs-grp-buy  td { color: var(--teal); background: var(--teal-glow); }
.recs-grp-sell td { color: var(--pink); background: var(--pink-glow); }
.recs-grp-hold td { color: #A8B3C7; background: rgba(255, 255, 255, 0.03); }
.recs-empty-row td { padding: 16px 10px !important; color: #A8B3C7; text-align: center; }

.recs-hold-toggle {
  display: inline-block; margin: 10px 14px; padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  border-radius: 6px; color: #A8B3C7; font-size: 12px; cursor: pointer;
}
.recs-hold-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #E5E9F2; }

.recs-updated {
  font-size: 11px; color: #6B7689; margin-right: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Signal ledger (paper / hypothetical) ────────────────────────────── */
.ledger-paper-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: #FFA533; background: rgba(255, 165, 0, 0.14);
  border: 1px solid rgba(255, 165, 0, 0.4); border-radius: 4px; padding: 2px 7px;
}
.ledger-disclaimer {
  padding: 9px 14px; font-size: 11.5px; line-height: 1.5; color: #A8B3C7;
  background: rgba(255, 165, 0, 0.05); border-bottom: 1px solid var(--border);
}
.ledger-disclaimer strong { color: #E5E9F2; }
.ledger-grp {
  padding: 9px 14px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; color: #8A93A6;
}
.recs-td-score.pos, .ledger-total .pos { color: #4ade80; }
.recs-td-score.neg, .ledger-total .neg { color: #f87171; }
.ledger-orphan {
  font-size: 10px; color: #FFA533; background: rgba(255, 165, 0, 0.12);
  border-radius: 3px; padding: 1px 5px; margin-left: 4px;
}
.ledger-total {
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: #C9D2E3;
  border-top: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.ledger-total-note { font-size: 11px; font-weight: 400; color: #6B7689; }
.recs-mockup-reason {
  font-size: 11px;
  color: #A8B3C7;
}

.recs-todo {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 22px;
}
.recs-todo h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  margin: 0 0 10px;
  font-weight: 500;
}
.recs-todo ol {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.7;
}
.recs-todo li { margin-bottom: 4px; }
.recs-todo strong { color: #E5E9F2; }
.recs-todo code {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 11px;
  color: var(--teal);
}

@media (max-width: 1100px) {
  .bot-metric-row { grid-template-columns: repeat(2, 1fr); }
  .bot-signals-grid { grid-template-columns: 1fr; }
  .bot-info-strip { grid-template-columns: 1fr; }
  .recs-mockup-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------- */
/* RECOMMENDATIONS — live data styling                                       */
/* ------------------------------------------------------------------------- */
.recs-loading {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.recs-error {
  padding: 16px;
  color: var(--pink);
  font-size: 12px;
  background: var(--pink-glow);
  border-radius: 4px;
}
.recs-warning {
  padding: 8px 14px;
  color: #FFA533;
  font-size: 11px;
  border-top: 1px solid var(--border);
  background: rgba(255, 165, 0, 0.05);
}
.recs-list { padding: 0; }
.recs-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.recs-row:last-child { border-bottom: none; }
.recs-pos-line {
  font-size: 13px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.recs-pos-line strong { color: #E5E9F2; font-size: 14px; }
.recs-pos-meta { color: #A8B3C7; font-size: 11px; }
.recs-pos-meta-line { font-size: 11px; color: #A8B3C7; margin-top: 3px; }
.recs-pos-meta-line .pos { color: var(--green); }
.recs-pos-meta-line .neg { color: var(--pink); }
.opt-badge {
  background: rgba(155, 95, 230, 0.18);
  color: #B68FFF;
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.recs-action {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
}
.recs-score {
  font-size: 11px;
  color: #A8B3C7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.recs-reason {
  font-size: 11px;
  color: #A8B3C7;
  line-height: 1.4;
}

.btn-mini {
  background: transparent;
  border: 1px solid var(--border);
  color: #FFFFFF;
  padding: 3px 10px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
}
.btn-mini:hover { background: rgba(255, 255, 255, 0.04); }
.filter-mini {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: #FFFFFF;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 3px;
}

/* Backtest panels */
.bt-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 16px;
}
.bt-stat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
}
.bt-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  margin-bottom: 6px;
}
.bt-stat-value {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #E5E9F2;
}
.bt-stat-value.pos { color: var(--green); }
.bt-stat-value.neg { color: var(--pink); }
.bt-stat-sub {
  font-size: 11px;
  color: #A8B3C7;
  margin-top: 3px;
}
.bt-verdict-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 16px 16px;
}
.bt-verdict {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 4px;
  color: #FFFFFF;
}
.bt-verdict strong { color: #E5E9F2; font-size: 14px; margin-right: 4px; }
.bt-v-good { background: rgba(8, 149, 145, 0.10); border-left: 3px solid var(--teal); }
.bt-v-bad { background: rgba(249, 110, 143, 0.10); border-left: 3px solid var(--pink); }
.bt-v-mixed { background: rgba(255, 165, 0, 0.10); border-left: 3px solid #FFA533; }
.bt-symbol-section { padding: 8px 16px 16px; }
.bt-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  margin: 12px 0 8px;
  font-weight: 500;
}
.bt-cycles-details {
  padding: 0 16px 16px;
}
.bt-cycles-details summary {
  cursor: pointer;
  color: #A8B3C7;
  font-size: 11px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  user-select: none;
}
.bt-cycles-details summary:hover { color: #FFFFFF; }
.bt-cycles-details[open] summary { color: #E5E9F2; }

/* ------------------------------------------------------------------------- */
/* MOBILE RESPONSIVE — < 700px                                                */
/* ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .page {
    padding: 8px !important;
    max-width: 100% !important;
  }

  /* Header — stack vertically on mobile */
  .header {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 12px !important;
  }
  .header-greet { font-size: 16px !important; }
  .header-sub { font-size: 12px !important; }
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .header-actions button {
    flex: 1 1 auto;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .bot-status-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Tabs — smaller on mobile */
  .tab-bar {
    overflow-x: auto;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .tab-icon { font-size: 13px; }

  /* Filter row — wrap on mobile */
  .filter-row {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px !important;
  }
  .filter, .filter-row select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* Statement bar */
  .statement-bar {
    flex-direction: column;
    gap: 8px;
    padding: 10px !important;
    align-items: flex-start !important;
  }

  /* Headlines — stack 2 per row */
  .headlines, .headline-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .headline-card, .metric-card {
    padding: 10px 12px !important;
  }
  .headline-value, .metric-value {
    font-size: 16px !important;
  }
  .headline-label, .metric-label {
    font-size: 9px !important;
  }

  /* Account cards — stack 1 per row */
  .accounts-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .account-card { padding: 12px !important; }

  /* Open positions strip — 1 per row */
  .positions-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .pos-card { padding: 10px 12px !important; }

  /* Bot tab metrics — 2 per row */
  .bot-metric-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .bot-metric { padding: 10px 12px !important; }
  .bot-metric-value { font-size: 18px !important; }

  /* Bot signals — stack vertically */
  .bot-signals-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  /* Bot info strip — stack */
  .bot-info-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Bot hero — stack */
  .bot-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
  }
  .bot-hero-title { font-size: 15px !important; }
  .bot-hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .bot-hero-actions button {
    flex: 1 1 auto;
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  /* Tables — make horizontally scrollable */
  .section-card-body { overflow-x: auto; }
  .bot-table, table {
    font-size: 11px !important;
  }
  .bot-table th, .bot-table td {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .bot-table th { font-size: 9px !important; }

  /* Recs row — stack pos and action */
  .recs-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .recs-action {
    grid-template-columns: auto auto;
    gap: 8px;
    flex-wrap: wrap;
  }
  .recs-reason {
    grid-column: 1 / -1;
    font-size: 10px !important;
  }
  .recs-pos-line {
    font-size: 12px !important;
    flex-wrap: wrap;
  }
  .recs-pos-line strong { font-size: 13px !important; }

  /* Backtest stats — stack */
  .bt-stat-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .bt-stat { padding: 10px 12px !important; }
  .bt-stat-value { font-size: 18px !important; }
  .bt-verdict-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .bt-verdict { font-size: 11px !important; padding: 6px 10px !important; }

  /* Recs hero — smaller on mobile */
  .recs-hero {
    padding: 16px 14px !important;
  }
  .recs-hero-icon { font-size: 26px !important; }
  .recs-hero-title { font-size: 17px !important; }
  .recs-hero-sub { font-size: 12px !important; }

  /* Section card headers */
  .section-card-header {
    padding: 8px 10px !important;
    font-size: 11px !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  .section-card-header-meta {
    font-size: 10px !important;
  }

  /* Modals — full screen on mobile */
  .modal-content {
    max-width: 95vw !important;
    margin: 16px !important;
  }

  /* Footer — single line, smaller */
  .footer {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px !important;
    font-size: 10px !important;
    text-align: center;
  }

  /* Pattern reminder — reduce padding */
  .pattern-reminder { padding: 10px 12px !important; }

  /* Recent activity — make table compact */
  .activity-row { font-size: 11px !important; }
  details summary { font-size: 12px !important; padding: 6px 0 !important; }

  /* Calendar — smaller cells */
  .calendar-day { padding: 4px !important; min-height: 40px !important; }
  .calendar-day-num { font-size: 10px !important; }
  .calendar-day-pnl { font-size: 9px !important; }
}

/* Tablet — 700-1100px */
@media (min-width: 701px) and (max-width: 1100px) {
  .page { padding: 12px; max-width: 100%; }
  .headlines, .headline-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .accounts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .positions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bot-metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .bot-info-strip {
    grid-template-columns: 1fr;
  }
}

/* Recs filter row */
.recs-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
  flex-wrap: wrap;
}
.recs-filter-row .filter-mini {
  flex: 0 1 auto;
  min-width: 120px;
}
.recs-filter-count {
  margin-left: auto;
  font-size: 11px;
  color: #A8B3C7;
  font-style: italic;
}
@media (max-width: 700px) {
  .recs-filter-row {
    padding: 8px 10px;
  }
  .recs-filter-row .filter-mini {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .recs-filter-count {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }
}

/* ============================================================ */
/* PWA + iOS safe area + standalone mode                         */
/* ============================================================ */

/* Safe area insets for iPhone notch / Dynamic Island */
@supports (padding: env(safe-area-inset-top)) {
  body {
    /* Use margin instead of padding so the bg color doesn't end at the safe-area
       boundary. The body background fills behind the status bar. */
    margin: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Push the actual page content down by the status-bar height */
  .page {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }
}

/* When app is launched standalone (PWA), respect the cutout */
@media all and (display-mode: standalone) {
  html, body {
    background: var(--bg-dark);
  }
  .page {
    /* Already handled by the @supports block — but be explicit for clarity */
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }
  /* If anything is sticky/fixed at the top, pad it */
  .header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

/* ============================================================ */
/* Mobile polish — < 700px                                       */
/* (extends/overrides earlier mobile rules at the cascade level)  */
/* ============================================================ */
@media (max-width: 700px) {
  /* Hide Upload statements button on mobile — uploads are desktop work */
  .header-actions [onclick*="showUploadModal"],
  .header-actions .header-upload-btn {
    display: none !important;
  }

  /* Make remaining buttons more compact + touch-friendly */
  .header-actions {
    gap: 6px !important;
    width: 100%;
  }
  .header-actions button {
    flex: 1 1 auto;
    min-height: 36px;
    font-size: 11px !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bot status pill: shrink text in cramped header */
  .bot-status-pill {
    font-size: 10px !important;
    padding: 6px 10px !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Touch targets — make sure buttons/selects are at least 36px tall */
  .filter, .filter-row select, .filter-mini, select {
    min-height: 36px !important;
    font-size: 12px !important;
  }

  /* Tab bar — make taps comfortable */
  .tab-btn {
    min-height: 40px;
    padding: 10px 14px;
  }

  /* Reduce horizontal padding on cards to claw back width */
  .section-card-body { padding-left: 0; padding-right: 0; }
  .recs-row, .bt-stat-row, .bt-verdict-row,
  .bot-signals-grid, .bt-symbol-section,
  .bt-cycles-details {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Bot tab portfolio table needs to scroll horizontally without clipping */
  .section-card-body table,
  .bot-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .bot-table thead, .bot-table tbody, .bot-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  /* Tighten cycles details summary */
  .bt-cycles-details summary {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Recs filter row — make dropdowns full-width on mobile */
  .recs-filter-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .recs-filter-row .filter-mini {
    width: 100%;
    flex: none;
  }

  /* Tab bar — fade scroll edges so user knows it scrolls */
  .tab-bar {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, black 92%, transparent 100%);
  }

  /* Statement bar pills should wrap */
  .statement-bar > * {
    flex: 0 1 auto;
  }

  /* Better empty/loading states on mobile */
  .recs-loading {
    padding: 20px 12px !important;
    font-size: 13px !important;
  }

  /* Bot info strip — code blocks shouldn't overflow */
  .bot-info-text code {
    word-break: break-all;
    white-space: normal;
    display: inline-block;
    max-width: 100%;
  }

  /* Account cards — slightly bigger numbers for readability */
  .account-card-value {
    font-size: 18px !important;
  }
}

/* Very small phones (iPhone SE, ~360px wide) */
@media (max-width: 380px) {
  .page { padding: 6px !important; }
  .header { padding: 10px !important; }
  .header-greet { font-size: 14px !important; }
  .bot-metric-row { grid-template-columns: 1fr !important; }
  .headlines, .headline-grid { grid-template-columns: 1fr !important; }
  .tab-btn { padding: 8px 10px; font-size: 11px; }
}

/* Threshold tuner row */
.bt-threshold-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
  flex-wrap: wrap;
}
.bt-threshold-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #A8B3C7;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.bt-threshold-label input[type="range"] {
  width: 110px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}
.bt-threshold-label input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  box-shadow: 0 0 6px var(--teal-glow);
}
.bt-threshold-label input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  border: none;
}
.bt-threshold-value {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 12px;
}

@media (max-width: 700px) {
  .bt-threshold-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .bt-threshold-label {
    justify-content: space-between;
  }
  .bt-threshold-label input[type="range"] {
    flex: 1;
    margin: 0 8px;
    width: auto;
  }
}

/* Smart Calibration panel */
.calib-intro {
  padding: 14px 16px;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.calib-weights-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.calib-weights {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calib-weight-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.calib-weight-name {
  color: #FFFFFF;
  text-transform: capitalize;
  font-size: 11px;
}
.calib-weight-bar-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}
.calib-weight-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--purple-light));
  border-radius: 2px;
  transition: width 0.3s ease;
}
.calib-weight-pct {
  text-align: right;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}
.calib-history-section {
  padding: 12px 16px;
}
@media (max-width: 700px) {
  .calib-weight-row {
    grid-template-columns: 90px 1fr 40px;
    font-size: 11px;
    gap: 6px;
  }
}

/* AI sentiment chip in rec rows */
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  cursor: help;
  border: 1px solid transparent;
}
.ai-chip.ai-bullish {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.25);
}
.ai-chip.ai-bearish {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
.ai-chip.ai-neutral {
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.20);
}
.ai-summary {
  color: #FFFFFF;
  font-style: italic;
  font-size: 11px;
}
@media (max-width: 700px) {
  .ai-chip { font-size: 10px; padding: 2px 6px; margin-left: 4px; }
}

/* Composite score display: large composite + small tech detail */
.recs-score-composite {
  font-size: 14px;
  font-weight: 600;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
}
.recs-score-detail {
  font-size: 11px;
  color: #A8B3C7;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.recs-score-detail .pos { color: #4ade80; }
.recs-score-detail .neg { color: #f87171; }

/* ML prediction chip — distinct from AI (purple-ish vs green/red) */
.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
  cursor: help;
  border: 1px solid transparent;
}
.ml-chip.ml-bullish {
  background: rgba(34, 197, 94, 0.10);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.20);
}
.ml-chip.ml-bearish {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.20);
}
.ml-chip.ml-neutral {
  background: rgba(168, 85, 247, 0.10);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.20);
}
@media (max-width: 700px) {
  .ml-chip { font-size: 10px; padding: 2px 6px; margin-left: 4px; }
}

/* Costs tab — daily spend bars */
.cost-bars { display: flex; flex-direction: column; gap: 5px; }
.cost-bar-row {
  display: grid;
  grid-template-columns: 50px 1fr 80px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.cost-bar-day { color: #A8B3C7; font-variant-numeric: tabular-nums; }
.cost-bar-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}
.cost-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--purple-light));
  border-radius: 2px;
}
.cost-bar-val {
  text-align: right;
  color: #E5E9F2;
  font-variant-numeric: tabular-nums;
}

/* Reload button — visible on mobile too */
.header-refresh-btn {
  flex: 0 0 auto !important;
}
@media (max-width: 700px) {
  /* Make sure reload button is visible on mobile (don't hide it like upload) */
  .header-actions .header-refresh-btn {
    display: inline-block !important;
  }
}

/* Bot performance section */
.bot-perf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.bot-perf-curve {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.bot-perf-curve svg {
  width: 100%;
  height: 100px;
  display: block;
}
.bot-perf-trades {
  padding: 14px 16px;
}
.bot-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A8B3C7;
  margin-bottom: 10px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .bot-perf-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .bot-perf-trades, .bot-perf-curve {
    padding: 10px;
  }
}

/* Drawdown banner */
.drawdown-banner {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid;
}
.drawdown-banner.severity-watch {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.drawdown-banner.severity-alert {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}
.drawdown-banner-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.drawdown-banner-icon {
  font-size: 22px;
  flex: 0 0 auto;
}
.drawdown-banner-body {
  flex: 1 1 auto;
}
.drawdown-banner-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.drawdown-banner-detail {
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.4;
}
.drawdown-banner-caveat {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: #A8B3C7;
  line-height: 1.4;
  font-style: italic;
}

/* Backtest vs Live comparison panel */
.btvl-verdict {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.btvl-verdict.verdict-good { background: rgba(34, 197, 94, 0.06); }
.btvl-verdict.verdict-warn { background: rgba(251, 191, 36, 0.06); }
.btvl-verdict.verdict-bad { background: rgba(239, 68, 68, 0.06); }
.btvl-verdict.verdict-info { background: rgba(8, 149, 145, 0.05); }
.btvl-verdict-label {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.verdict-good .btvl-verdict-label { color: #22c55e; }
.verdict-warn .btvl-verdict-label { color: #fbbf24; }
.verdict-bad .btvl-verdict-label { color: #f87171; }
.verdict-info .btvl-verdict-label { color: var(--teal); }
.btvl-verdict-msg {
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.4;
  flex: 1 1 auto;
}

.btvl-grid {
  padding: 14px 16px;
}
.btvl-header, .btvl-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}
.btvl-header {
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  color: #A8B3C7;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 4px 0 8px;
}
.btvl-header-pred, .btvl-header-live, .btvl-header-var,
.btvl-row-pred, .btvl-row-live, .btvl-row-var {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.btvl-row-label { color: #FFFFFF; font-size: 13px; }
.btvl-row-pred, .btvl-row-live { color: #E5E9F2; font-size: 13px; }
.btvl-row-var { font-weight: 600; font-size: 13px; }
.btvl-totals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: #A8B3C7;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .btvl-header, .btvl-row {
    grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
    gap: 6px;
    font-size: 12px;
  }
  .btvl-row-label { font-size: 11px; }
  .btvl-verdict { flex-wrap: wrap; }
}


/* ============================================================
   Calendar drilldown panel (Schwab inline + Bot side panel)
   ============================================================ */
.cal-drilldown {
  margin-top: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.cal-drilldown-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cal-drilldown-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.cal-drilldown-pnl {
  font-size: 16px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
  margin-top: 2px;
}
.cal-drilldown-pnl.pos { color: var(--green); }
.cal-drilldown-pnl.neg { color: var(--pink); }
.cal-drilldown-meta {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 2px;
}
.cal-drilldown-close {
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  padding: 2px 8px;
  border-radius: 3px;
}
.cal-drilldown-close:hover {
  background: var(--bg-row-hover);
  color: var(--text-primary);
}
.cal-drilldown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.cal-drilldown-table thead tr {
  color: var(--text-muted);
  text-align: left;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
}
.cal-drilldown-table th {
  padding: 4px 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cal-drilldown-table tbody tr {
  color: var(--text-primary);
  border-bottom: 1px solid rgba(58, 69, 96, 0.4);
}
.cal-drilldown-table td {
  padding: 6px 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
}
.cal-drilldown-table .acct,
.cal-drilldown-table .side,
.cal-drilldown-table .prices {
  color: var(--text-muted);
}
.cal-drilldown-table .pnl-pos { color: var(--teal); text-align: right; }
.cal-drilldown-table .pnl-neg { color: var(--pink); text-align: right; }
.cal-drilldown-table .ralign { text-align: right; }
.cal-drilldown-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 28px 16px;
  font-style: italic;
}
.cal-drilldown-loading {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 28px 16px;
}

/* Schwab calendar cells: clickable cursor when has data-date */
.mini-cal-day[data-date] {
  cursor: pointer;
}
.mini-cal-day[data-date]:hover:not(.empty) {
  outline: 1px solid var(--purple-light);
  outline-offset: -1px;
}
.mini-cal-day.selected {
  outline: 2px solid var(--purple-light);
  outline-offset: -2px;
}

/* ============================================================
   Bot calendar 40/60 layout
   ============================================================ */
.bot-cal-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 14px;
  padding: 14px 16px;
}
.bot-cal-left .mini-cal {
  margin: 0;
}
.bot-drilldown-panel {
  margin-top: 0;
  min-height: 200px;
}

/* Mobile: stack vertically below 700px */
@media (max-width: 700px) {
  .bot-cal-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
}


/* When cell has saturated BG, text needs to pop — override inherited dim colors */
.mini-cal-day.pos .mini-cal-day-pnl,
.mini-cal-day.pos .mini-cal-daynum,
.mini-cal-day.pos .mini-cal-day-trades {
  color: #FFFFFF;
}
.mini-cal-day.neg .mini-cal-day-pnl,
.mini-cal-day.neg .mini-cal-daynum,
.mini-cal-day.neg .mini-cal-day-trades {
  color: #FFFFFF;
}

/* ======================================================================== */
/* Bot Doctor — scorecard tile + proposal card                                */
/* ======================================================================== */

.bd-scorecard {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0 18px;
}
.bd-scorecard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.bd-scorecard-meta {
  font-weight: 400;
  color: var(--text-muted);
}
.bd-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.bd-tile {
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.bd-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.bd-tile-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.bd-tile-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .bd-scorecard-grid { grid-template-columns: repeat(2, 1fr); }
}

.bd-proposal-card {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.06), rgba(34, 211, 238, 0.0)), var(--bg-panel);
  border: 1px solid var(--teal);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  box-shadow: 0 0 0 1px var(--teal-glow);
}
.bd-proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bd-badge {
  display: inline-block;
  background: var(--teal);
  color: #102030;
  padding: 3px 10px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.bd-proposal-id {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.bd-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 12px 0 6px;
}
.bd-rationale-list {
  margin: 0 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.bd-rationale-list li { margin-bottom: 3px; }
.bd-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bd-diff-table th,
.bd-diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.bd-diff-table th {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.bd-diff-table td.r,
.bd-diff-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.bd-diff-table .bd-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 10px;
}
.bd-proposal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: flex-end;
}
.bd-approve-btn,
.bd-reject-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.bd-approve-btn {
  background: var(--green);
  color: #FFFFFF;
}
.bd-approve-btn:hover { filter: brightness(1.1); }
.bd-reject-btn {
  background: var(--pink);
  color: #FFFFFF;
}
.bd-reject-btn:hover { filter: brightness(1.1); }

/* ======================================================================== */
/* Ops Doctor — health panel + proposal cards                                 */
/* ======================================================================== */

.ops-status-overview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ops-status-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.ops-status-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ops-status-pill.ops-status-ok       { background: var(--green);  color: #0E2316; }
.ops-status-pill.ops-status-warn     { background: var(--amber);  color: #2A1E03; }
.ops-status-pill.ops-status-critical { background: var(--pink);   color: #FFFFFF; }
.ops-status-pill.ops-status-unknown  { background: var(--text-muted); color: #FFFFFF; }

.ops-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}
@media (max-width: 760px) {
  .ops-status-grid { grid-template-columns: 1fr; }
}
.ops-status-row {
  display: grid;
  grid-template-columns: 18px 200px 1fr;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  align-items: baseline;
  border-radius: 4px;
}
.ops-status-row .ops-status-icon {
  font-weight: 700;
  text-align: center;
}
.ops-status-row .ops-status-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
.ops-status-row .ops-status-msg {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-status-row.ops-status-ok       .ops-status-icon { color: var(--green); }
.ops-status-row.ops-status-warn     { background: rgba(251, 191, 36, 0.06); }
.ops-status-row.ops-status-warn     .ops-status-icon { color: var(--amber); }
.ops-status-row.ops-status-critical { background: rgba(248, 113, 113, 0.10); }
.ops-status-row.ops-status-critical .ops-status-icon { color: var(--pink); }
.ops-status-row.ops-status-unknown  .ops-status-icon { color: var(--text-muted); }

/* Spec OPS_DOCTOR_AUTO_RESOLVE — dimmed read-only style for the
   "Recently resolved" history rows. Re-uses the OK base; modifier
   class adds the dim + the right-aligned auto-resolved badge. */
.ops-status-row.ops-status-resolved {
  opacity: 0.62;
  font-style: italic;
}
.ops-status-row.ops-status-resolved .ops-resolved-original {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 4px;
}
.ops-resolved-badge {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--text-muted);
  border-radius: 8px;
  font-size: 10px;
  font-style: normal;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ops-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px;
}

.ops-proposal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0;
}
.ops-proposal-card.ops-status-critical {
  border-left-color: var(--pink);
}
.ops-proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ops-proposal-id {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.ops-proposal-body {
  font-size: 12px;
}
.ops-proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* YoY total row — bolded, separated from per-year rows */
.yoy-row.yoy-total {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 8px;
  font-weight: 600;
  cursor: default;
}
.yoy-row.yoy-total:hover {
  background: transparent;
}

/* ============================================================ */
/* Consistency Doctor — expandable detail rows                  */
/* ============================================================ */
.cd-detail-block {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--text-muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cd-detail-block code {
  background: rgba(0,0,0,0.25);
  padding: 1px 4px;
  border-radius: 3px;
}
.cd-fix-hint {
  margin-top: 6px;
  color: var(--text-muted);
  font-style: italic;
}
.cd-row-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.cd-finding-row { /* reserved for findings list */ }
.cd-severity-ok       { color: var(--green); }
.cd-severity-warn     { color: var(--amber); }
.cd-severity-critical { color: var(--pink); }
.cd-severity-unknown  { color: var(--text-muted); }

/* ========================================================================== */
/* Spec C — Circuit Breakers strip                                             */
/* ========================================================================== */
.cb-strip {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 14px;
}
.cb-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.cb-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
@media (max-width: 760px) {
  .cb-strip-grid { grid-template-columns: 1fr; }
}
.cb-row {
  display: grid;
  grid-template-columns: 18px 180px 1fr 130px;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12px;
  align-items: baseline;
  border-radius: 4px;
}
.cb-row .cb-icon       { text-align: center; font-weight: 700; }
.cb-row .cb-name       { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--text-secondary); }
.cb-row .cb-value      { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cb-row .cb-thresh     { color: var(--text-muted); font-size: 11px; text-align: right; }
.cb-row.cb-state-ok       .cb-icon { color: var(--green); }
.cb-row.cb-state-warn     { background: rgba(251, 191, 36, 0.06); }
.cb-row.cb-state-warn     .cb-icon { color: var(--amber); }
.cb-row.cb-state-tripped  { background: rgba(248, 113, 113, 0.10); }
.cb-row.cb-state-tripped  .cb-icon { color: var(--pink); }
.cb-row.cb-state-unknown  .cb-icon { color: var(--text-muted); }

.cb-tripped-card {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid var(--pink);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 0;
}
.cb-tripped-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cb-tripped-badge {
  background: var(--pink);
  color: #FFFFFF;
  padding: 3px 10px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.cb-tripped-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-primary);
}
.cb-tripped-body {
  font-size: 12px;
  color: var(--text-primary);
}
.cb-tripped-reason {
  color: var(--text-secondary);
  margin: 4px 0;
}
.cb-tripped-action  { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.cb-tripped-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.cb-resume-btn      { /* uses .bd-approve-btn base */ }

/* Spec S6 — preview modal + structured upload error styling (Phase 2) */
.apex-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}
.apex-preview-card {
  background: var(--bg-elevated, #1F2937);
  color: var(--text-primary, #F3F4F6);
  border-radius: 8px;
  padding: 18px 22px;
  max-width: 720px;
  width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border, #374151);
}
.apex-preview-header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #374151);
}
.apex-preview-body { font-size: 14px; line-height: 1.5; }
.apex-preview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.apex-preview-stat {
  background: var(--bg-card, #111827);
  padding: 10px;
  border-radius: 6px;
  text-align: center;
}
.apex-preview-stat .lbl {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.apex-preview-stat .val {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}
.apex-preview-totals {
  background: var(--bg-card, #111827);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.apex-preview-totals .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.apex-preview-totals .row.delta {
  border-top: 1px solid var(--border, #374151);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  font-size: 15px;
}
.apex-preview-totals .pnl-pos { color: var(--green, #10B981); }
.apex-preview-totals .pnl-neg { color: var(--red, #EF4444); }
.apex-preview-totals .pnl-neutral { color: var(--text-muted, #9CA3AF); }
.apex-preview-samples { margin-bottom: 8px; }
.apex-preview-samples .lbl {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 6px;
}
.apex-preview-samples table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.apex-preview-samples th,
.apex-preview-samples td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border, #374151);
}
.apex-preview-samples th {
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.apex-preview-samples .pnl-pos { color: var(--green, #10B981); }
.apex-preview-samples .pnl-neg { color: var(--red, #EF4444); }
.apex-preview-samples .pnl-neutral { color: var(--text-muted, #9CA3AF); }
.apex-preview-light {
  background: var(--bg-card, #111827);
  padding: 12px;
  border-radius: 6px;
  color: var(--text-secondary, #D1D5DB);
  font-size: 13px;
  margin-bottom: 8px;
}
.apex-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #374151);
}
.apex-preview-cancel,
.apex-preview-confirm {
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border, #374151);
}
.apex-preview-cancel {
  background: transparent;
  color: var(--text-secondary, #D1D5DB);
}
.apex-preview-confirm {
  background: var(--accent, #2563EB);
  color: white;
  border-color: var(--accent, #2563EB);
  font-weight: 600;
}
.apex-preview-cancel:hover  { background: var(--bg-card, #111827); }
.apex-preview-confirm:hover { background: var(--accent-dim, #1D4ED8); }

/* structured upload error card (used by _renderUploadError) */
.apex-err-card {
  border-left: 3px solid var(--red, #EF4444);
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(239, 68, 68, 0.06);
}
.apex-err-title    { font-weight: 600; }
.apex-err-hint     { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.apex-err-detail   { font-size: 12px; margin-top: 6px; color: var(--text-muted, #9CA3AF); }
.apex-err-mono     {
  font-size: 11px; margin-top: 4px;
  color: var(--text-muted, #9CA3AF);
  font-family: monospace;
  word-break: break-all;
}

/* Spec T5 — window selector + T+1 calendar note */
.ss-window-select {
  margin-left: 12px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--bg-card, #111827);
  color: var(--text-primary, #F3F4F6);
  border: 1px solid var(--border, #374151);
  border-radius: 4px;
  cursor: pointer;
}
.ss-window-select:hover {
  border-color: var(--accent, #2563EB);
}
.mini-cal-tplus1 {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
  text-align: right;
  cursor: help;
}

/* Spec U5 — value-chart */
.value-chart-card {
  background: var(--bg-card, #111827);
  border: 1px solid var(--border, #374151);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0 16px;
}
.value-chart-card.loading { opacity: 0.6; }
.vcc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vcc-toggle {
  display: inline-flex;
  background: var(--bg-elevated, #1F2937);
  border-radius: 6px;
  padding: 3px;
}
.vcc-toggle button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  border-radius: 4px;
  transition: all 120ms;
}
.vcc-toggle button.active {
  background: var(--accent, #2563EB);
  color: white;
  font-weight: 600;
}
.vcc-toggle button:hover:not(.active) { color: var(--text-primary, #F3F4F6); }
.vcc-upload-btn {
  background: transparent;
  border: 1px solid var(--border, #374151);
  color: var(--text-muted, #9CA3AF);
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
}
.vcc-upload-btn:hover { color: var(--text-primary, #F3F4F6); border-color: var(--accent, #2563EB); }

.vcc-summary { margin-bottom: 12px; }
.vcc-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
}
.vcc-current-label, .vcc-day-label, .vcc-max-label {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vcc-current-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vcc-day-value, .vcc-max-value {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vcc-current-value.pos, .vcc-day-value.pos, .vcc-max-value.pos { color: var(--green, #10B981); }
.vcc-current-value.neg, .vcc-day-value.neg, .vcc-max-value.neg { color: var(--red, #EF4444); }
.vcc-current-value.neutral, .vcc-day-value.neutral, .vcc-max-value.neutral { color: var(--text-primary, #F3F4F6); }

.vcc-hover-info {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  font-variant-numeric: tabular-nums;
  min-height: 16px;
  margin-top: 2px;
}

.vcc-chart-wrap {
  position: relative;
  height: 280px;
  margin: 10px 0;
}
.vcc-no-data {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.6);
  border: 1px dashed var(--border, #374151);
  border-radius: 6px;
  padding: 16px;
}
.vcc-no-data-msg {
  color: var(--text-muted, #9CA3AF);
  text-align: center;
  font-size: 13px;
  max-width: 70%;
}

.vcc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border, #374151);
  flex-wrap: wrap;
  gap: 10px;
}
.vcc-max-change { display: flex; flex-direction: column; gap: 2px; }
.vcc-window-buttons { display: inline-flex; gap: 4px; }
.vcc-window-buttons button {
  background: transparent;
  border: 1px solid var(--border, #374151);
  color: var(--text-muted, #9CA3AF);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.vcc-window-buttons button:hover:not(.active) {
  color: var(--text-primary, #F3F4F6);
  border-color: var(--accent, #2563EB);
}
.vcc-window-buttons button.active {
  background: var(--accent, #2563EB);
  color: white;
  border-color: var(--accent, #2563EB);
  font-weight: 600;
}

/* Schwab balances upload modal */
.sb-upload-modal { max-width: 500px; }
.sb-upload-help {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-elevated, #1F2937);
  border-radius: 5px;
}
.sb-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sb-upload-row span { min-width: 80px; font-size: 13px; color: var(--text-muted, #9CA3AF); }
.sb-upload-row select, .sb-upload-row input {
  flex: 1;
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--border, #374151);
  color: var(--text-primary, #F3F4F6);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.sb-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.sb-upload-status { margin-top: 10px; min-height: 24px; }

/* Spec U6 — value-chart polish */
.value-chart-card {
  animation: vcc-fade-in 240ms ease-out;
  transition: opacity 180ms ease-out;
}
@keyframes vcc-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.vcc-current-value, .vcc-day-value, .vcc-max-value,
.vcc-toggle button, .vcc-window-buttons button {
  transition: color 180ms ease-out, background-color 180ms ease-out,
              border-color 180ms ease-out;
}

/* Compact summary spacing — prevents the chart card from feeling chunky
   next to the per-account cards which sit just below it. */
.value-chart-card .vcc-summary-row { padding: 2px 0; }

/* Disabled state during in-flight fetches (set by JS). */
.vcc-window-buttons button:disabled,
.vcc-toggle button:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Mobile: <=600px. Schwabs mobile app stacks the controls and
   shrinks the chart; we mirror that. */
@media (max-width: 600px) {
  .value-chart-card {
    padding: 12px;
    margin: 8px 0 12px;
  }
  .vcc-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vcc-toggle { width: 100%; justify-content: stretch; }
  .vcc-toggle button {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
  }
  .vcc-upload-btn {
    width: 100%;
    text-align: center;
    font-size: 11px;
  }
  .vcc-current-value { font-size: 22px; }
  .vcc-day-value, .vcc-max-value { font-size: 12px; }
  .vcc-current-label, .vcc-day-label, .vcc-max-label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .vcc-chart-wrap { height: 200px; margin: 8px 0; }
  .vcc-no-data-msg { font-size: 12px; max-width: 90%; }
  .vcc-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vcc-window-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .vcc-window-buttons button {
    flex: 1;
    padding: 5px 4px;
    font-size: 11px;
  }
  .sb-upload-modal { max-width: 92vw; }
}

/* Very narrow (<=380px) — phones in landscape lock or small models. */
@media (max-width: 380px) {
  .vcc-current-value { font-size: 18px; }
  .vcc-chart-wrap { height: 170px; }
  .vcc-window-buttons button { padding: 4px 2px; font-size: 10px; }
}

/* Spec U8 — sb-confirm */
.sb-confirm-modal { max-width: 480px; }
.sb-confirm-row {
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  color: var(--text-primary, #F3F4F6);
}
.sb-confirm-row.sb-confirm-account {
  border-bottom: 1px solid var(--border, #374151);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.sb-confirm-replaces {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--orange, #F59E0B);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #D1D5DB);
}
.sb-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Spec V4 — truth card */
.truth-card {
  background: var(--bg-card, #111827);
  border: 1px solid var(--border, #374151);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0 12px;
  animation: vcc-fade-in 240ms ease-out;
}
.tc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border, #374151);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.tc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #F3F4F6);
  letter-spacing: 0.3px;
}
.tc-window {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  font-variant-numeric: tabular-nums;
}
.tc-body { font-size: 14px; }
.tc-loading {
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
  padding: 8px 0;
}

.tc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.tc-row-label { color: var(--text-secondary, #D1D5DB); }
.tc-row-value { font-weight: 500; }
.tc-row-starting .tc-row-label,
.tc-row-starting .tc-row-value { color: var(--text-muted, #9CA3AF); }
.tc-row-net {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 600;
}
.tc-row-tgl {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  padding: 6px 0;
}
.tc-divider {
  border-top: 1px solid var(--border, #374151);
  margin: 8px 0;
}
.tc-pos { color: var(--green, #10B981); }
.tc-neg { color: var(--red, #EF4444); }
.tc-neutral { color: var(--text-primary, #F3F4F6); }
.tc-muted { color: var(--text-muted, #9CA3AF); font-weight: normal; }

.tc-empty {
  text-align: center;
  padding: 18px 12px;
  color: var(--text-muted, #9CA3AF);
}
.tc-empty-msg {
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.tc-upload-cta {
  background: var(--accent, #2563EB);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tc-upload-cta:hover { background: var(--accent-dim, #1D4ED8); }

.tc-per-account-section {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #374151);
}
.tc-expand-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #9CA3AF);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.tc-expand-btn:hover { color: var(--text-primary, #F3F4F6); }
.tc-expand-chevron {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
}
.tc-per-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.tc-acct-card {
  background: var(--bg-elevated, #1F2937);
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 12px;
}
.tc-acct-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border, #374151);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.tc-acct-name {
  font-weight: 600;
  color: var(--text-primary, #F3F4F6);
}
.tc-acct-tgl {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tc-acct-card .tc-row {
  font-size: 12px;
  padding: 2px 0;
}

@media (max-width: 600px) {
  .truth-card { padding: 12px; margin: 8px 0; }
  .tc-row-tgl { font-size: 15px; }
  .tc-per-account-grid { grid-template-columns: 1fr; }
}

/* Spec V6 — stx upload */
.stx-upload-modal { max-width: 500px; }
.stx-confirm-modal { max-width: 560px; }

.stx-upload-help {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-elevated, #1F2937);
  border-radius: 5px;
}
.stx-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.stx-upload-row span { min-width: 80px; font-size: 13px; color: var(--text-muted, #9CA3AF); }
.stx-upload-row select, .stx-upload-row input {
  flex: 1;
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--border, #374151);
  color: var(--text-primary, #F3F4F6);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.stx-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.stx-upload-status { margin-top: 10px; min-height: 24px; }

.stx-confirm-cb-wrap {
  margin: 12px 0;
  border: 1px solid var(--border, #374151);
  border-radius: 5px;
  overflow: hidden;
}
.stx-confirm-cb {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.stx-confirm-cb th {
  background: var(--bg-elevated, #1F2937);
  color: var(--text-muted, #9CA3AF);
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #374151);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.stx-confirm-cb td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stx-confirm-cb tr:last-child td { border-bottom: none; }
.stx-confirm-cb .stx-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stx-confirm-cb .tc-pos { color: var(--green, #10B981); }
.stx-confirm-cb .tc-neg { color: var(--red, #EF4444); }

.stx-confirm-unknown {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--orange, #F59E0B);
  padding: 10px 12px;
  margin: 10px 0 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary, #D1D5DB);
  line-height: 1.6;
}
.stx-confirm-unknown code {
  background: var(--bg-elevated, #1F2937);
  padding: 1px 6px;
  border-radius: 3px;
  margin: 2px;
  display: inline-block;
}

@media (max-width: 600px) {
  .stx-upload-modal, .stx-confirm-modal { max-width: 92vw; }
  .stx-confirm-cb { font-size: 11px; }
}

/* Spec W6 — truth card pivot styling */
.tc-override-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: var(--orange, #F59E0B);
  color: #1F2937;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}
.tc-row-account-head {
  border-bottom: 1px solid var(--border, #374151);
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.tc-acct-name-line {
  font-weight: 600;
  font-size: 14px;
}

/* Spec W7 — single-card + narrowed strip */
.account-card.account-card-solo {
  flex: 1 1 auto;
  max-width: none;
  border: 1px solid var(--accent, #2563EB);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.metrics.metrics-narrowed::before {
  content: '⚲ filtered';
  display: block;
  width: 100%;
  font-size: 10px;
  color: var(--accent, #2563EB);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.metrics.metrics-narrowed .metric {
  border: 1px solid rgba(37, 99, 235, 0.25);
}

/* Spec W8 — empty overlay */
.w8-empty {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.92);
  color: var(--text-muted, #9CA3AF);
  font-size: 14px;
  border-radius: 8px;
  z-index: 1;
  padding: 24px;
}

/* Spec W9 — bot panel relocation */
.w9-bot-section-header {
  margin-top: 14px;
  margin-bottom: 8px;
}
.w9-bot-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.bot-paper-cal-host { margin-bottom: 12px; }
.bot-paper-cal {
  background: var(--bg-card, #111827);
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  padding: 12px 14px;
}
.bot-paper-cal-title {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.bot-paper-cal-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}
.bot-paper-day {
  width: 18px;
  height: 28px;
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.bot-paper-day.pos  { background: var(--green, #10B981); opacity: 0.7; }
.bot-paper-day.neg  { background: var(--red, #EF4444); opacity: 0.7; }
.bot-paper-day.flat { background: var(--border, #374151); opacity: 0.5; }
.bot-paper-day-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--text-muted, #9CA3AF);
  white-space: nowrap;
  display: none;  /* labels off by default; tooltip on hover via title attr */
}
.bot-paper-cal-empty {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
}

/* Spec W10 — upload menu + scope pill */
.upload-menu { position: relative; display: inline-block; }
.upload-menu-trigger { display: inline-flex; align-items: center; gap: 4px; }
.upload-menu-chev { font-size: 9px; opacity: 0.7; }
.upload-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-card, #111827);
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  padding: 4px;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 6000;
  display: flex;
  flex-direction: column;
}
.upload-menu-dropdown[hidden] { display: none; }
.upload-menu-dropdown button {
  background: transparent;
  border: none;
  color: var(--text-primary, #F3F4F6);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.upload-menu-dropdown button:hover {
  background: var(--bg-elevated, #1F2937);
}
.upload-menu-dropdown button.upload-menu-danger {
  color: var(--red, #EF4444);
}
.upload-menu-divider {
  border-top: 1px solid var(--border, #374151);
  margin: 4px 0;
}
/* Spec A3 — section labels inside the upload menu */
.upload-menu-section-label {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6B7280);
  pointer-events: none;
  user-select: none;
}
.upload-menu-section-label:first-child {
  padding-top: 4px;
}
.upload-menu-dropdown button .upload-menu-item-hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #6B7280);
  line-height: 1.3;
}
.upload-modal-empty-hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 6px;
  color: #BCC4D6;
  font-size: 12px;
  line-height: 1.45;
}

/* Scope pill */
.schwab-scope-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 4px 0 8px;
  background: var(--bg-card, #111827);
  border: 1px solid var(--border, #374151);
  border-radius: 4px;
  font-size: 12px;
}
.schwab-scope-label {
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  font-weight: 600;
}
.schwab-scope-value {
  color: var(--text-primary, #F3F4F6);
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.schwab-scope-clear {
  background: transparent;
  border: 1px solid var(--border, #374151);
  color: var(--text-muted, #9CA3AF);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
.schwab-scope-clear:hover {
  color: var(--text-primary, #F3F4F6);
  border-color: var(--accent, #2563EB);
}

/* Spec W11 — override + wipe */
.w11-override-modal { max-width: 500px; }
.w11-wipe-modal { max-width: 500px; }

.w11-help {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-elevated, #1F2937);
  border-radius: 5px;
}

.w11-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.w11-row span { min-width: 130px; font-size: 13px; color: var(--text-muted, #9CA3AF); }
.w11-row select, .w11-row input {
  flex: 1;
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--border, #374151);
  color: var(--text-primary, #F3F4F6);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.w11-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.w11-status { margin-top: 10px; min-height: 24px; }
.w11-existing {
  margin-top: 14px;
  border-top: 1px solid var(--border, #374151);
  padding-top: 12px;
}
.w11-existing-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 6px;
}
.w11-existing-row {
  display: grid;
  grid-template-columns: 90px 110px 1fr;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.w11-existing-acct { font-weight: 600; }
.w11-existing-amount { font-variant-numeric: tabular-nums; }
.w11-existing-reason { color: var(--text-muted, #9CA3AF); }
.w11-muted { color: var(--text-muted, #9CA3AF); font-size: 12px; }

.w11-wipe-warn {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--red, #EF4444);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary, #D1D5DB);
  line-height: 1.6;
}
.w11-wipe-warn ul { margin: 8px 0; padding-left: 20px; }
.w11-wipe-warn code {
  background: var(--bg-elevated, #1F2937);
  padding: 1px 6px;
  border-radius: 3px;
}
#w11-wipe-token {
  width: 100%;
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--red, #EF4444);
  color: var(--red, #EF4444);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
}

.upload-menu-danger.w11-delete-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--red, #EF4444);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.upload-menu-danger.w11-delete-btn:hover {
  background: rgba(239, 68, 68, 0.24);
}

/* Spec W12 — per-symbol breakdown */
.cal-drilldown-section-label {
  margin: 8px 0 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  font-weight: 600;
}
.cal-drilldown-symlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.cal-drilldown-symrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cal-drilldown-symrow:hover {
  background: var(--bg-elevated, #1F2937);
  border-radius: 3px;
}
.cal-drilldown-symrow-sym {
  font-weight: 600;
  color: var(--text-primary, #F3F4F6);
}
.cal-drilldown-symrow-pnl.pos { color: var(--green, #10B981); }
.cal-drilldown-symrow-pnl.neg { color: var(--red,   #EF4444); }
.cal-drilldown-symrow-lots {
  color: var(--text-muted, #9CA3AF);
  font-size: 12px;
  min-width: 6em;
  text-align: right;
}

/* Spec W16b — bot tab restructure */
.w16-deprecated { display: none !important; }

.w16-bot-zone-status,
.w16-bot-zone-perf,
.w16-bot-zone-diag {
  margin-bottom: 16px;
}
.w16-bot-zone-label {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Zone 1 — status strip */
.w16-bot-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  background: var(--bg-card, #111827);
  font-size: 13px;
}
.w16-bot-status-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.w16-bot-status-label {
  color: var(--text-muted, #9CA3AF);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.w16-bot-status-value {
  color: var(--text-primary, #F3F4F6);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.w16-bot-status-value.pos { color: var(--green, #10B981); }
.w16-bot-status-value.neg { color: var(--red,   #EF4444); }
.w16-bot-status-actions {
  grid-column: span 4;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Zone 2 — performance scaffold */
.w16-bot-zone-perf .w16-bot-perf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.w16-bot-zone-perf .w16-bot-perf-card {
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-card, #111827);
  min-height: 64px;
}
.w16-bot-perf-card-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Zone 3 — diagnostics-accordion */
.w16-accordion {
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  background: var(--bg-card, #111827);
  overflow: hidden;
}
.w16-accordion-item + .w16-accordion-item {
  border-top: 1px solid var(--border, #374151);
}
.w16-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary, #F3F4F6);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.w16-accordion-trigger:hover {
  background: var(--bg-elevated, #1F2937);
}
.w16-accordion-chev {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  transition: transform 0.15s ease;
}
.w16-accordion-item.open .w16-accordion-chev {
  transform: rotate(90deg);
}
.w16-accordion-body {
  display: none;
  padding: 8px 14px 14px;
}
.w16-accordion-item.open .w16-accordion-body { display: block; }
.w16-accordion-trigger-meta {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  font-weight: 400;
  margin-left: 8px;
}

/* Spec W16b-fix2 — populated zones */
.w16-bot-status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 10px;
}
.w16-bot-status-cell { gap: 4px; }
.w16-bot-status-sub {
  color: var(--text-muted, #9CA3AF);
  font-size: 11px;
  margin-top: 2px;
}
.w16-bot-status-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #10B981);
  margin-right: 6px;
  vertical-align: middle;
}
.w16-bot-status-actions {
  grid-column: span 4;
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #374151);
}

/* Equity curve card */
.w16-bot-perf-equity { padding: 12px 14px; }
.w16-bot-equity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.w16-bot-equity-headline-value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #F3F4F6);
}
.w16-bot-equity-subtitle {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
}
.w16-bot-equity-tabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 8px;
}
.w16-bot-equity-tab {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--border, #374151);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
}
.w16-bot-equity-tab.active {
  background: var(--bg-elevated, #1F2937);
  color: var(--text-primary, #F3F4F6);
  border-color: var(--accent, #2563EB);
}
.w16-bot-equity-foot {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
}

/* KPI strip — 5 cards horizontal */
.w16-bot-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.w16-bot-kpi-card {
  background: var(--bg-elevated, #1F2937);
  border-radius: 4px;
  padding: 8px 10px;
  min-height: 64px;
}
.w16-bot-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 3px;
}
.w16-bot-kpi-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #F3F4F6);
}
.w16-bot-kpi-value.pos { color: var(--green, #10B981); }
.w16-bot-kpi-value.neg { color: var(--red, #EF4444); }
.w16-bot-kpi-sub {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
}

/* Portfolio + Signals row */
.w16-bot-perf-card .bot-table { font-size: 12px; }
.w16-bot-perf-card .bot-table th,
.w16-bot-perf-card .bot-table td { padding: 4px 6px; }
.w16-bot-perf-card .bot-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.w16-bot-perf-card-foot {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 8px;
  border-top: 1px solid var(--border, #374151);
  padding-top: 6px;
}

/* Accordion polish */
.w16-accordion-trigger { user-select: none; }
.w16-accordion-chev {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-weight: 700;
}
.w16-accordion-trigger:focus-visible {
  outline: 2px solid var(--accent, #2563EB);
  outline-offset: -2px;
}

/* Spec W16b-fix5 — compact status strip */
.w16-status-bar {
  display: grid;
  grid-template-columns: 2fr 2fr auto;
  gap: 16px;
  align-items: center;
  border-left: 3px solid var(--teal);
  padding: 12px 18px;
  background: var(--bg-panel);
  border-radius: 8px;
  margin-bottom: 16px;
}
.w16-status-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.w16-status-row {
  display: flex;
  gap: 12px;
  font-size: 12px;
  align-items: center;
  line-height: 1.5;
  min-width: 0;
}
.w16-status-row .key {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 90px;
  flex: 0 0 auto;
}
.w16-status-row .val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w16-status-row .val.with-pulse::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--teal-glow);
}
.w16-status-row .val .pnl-paren {
  color: var(--pink, #F87171);
  font-weight: 500;
  margin-left: 4px;
}
.w16-status-row .val .pnl-paren.pos { color: var(--green, #10b981); }
.w16-status-actions {
  display: flex;
  gap: 6px;
  align-self: center;
}
.w16-status-actions button { font-size: 12px; }

/* Spec W16b-fix6 — density + pulse glow */
.w16-status-bar {
  grid-template-columns: auto auto 1fr;  /* was 2fr 2fr auto */
  gap: 24px;
  padding: 10px 16px;
}
.w16-status-block { gap: 4px; }
.w16-status-row {
  font-size: 11px;
  line-height: 1.4;
  gap: 8px;
}
.w16-status-row .key {
  font-size: 10px;
  min-width: 90px;
}
.w16-status-row .val.with-pulse::before {
  width: 8px;
  height: 8px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  margin-right: 8px;
}
.w16-status-actions {
  justify-self: end;
  align-self: center;
  display: flex;
  gap: 6px;
}

/* Spec X1 — filter pills */
.x1-filter-pills {
  margin: 4px 0 12px;
  position: relative;
  z-index: 50;
}
.x1-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.x1-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.x1-pill:hover {
  background: var(--bg-row-hover);
  border-color: var(--border-strong);
}
.x1-pill .x1-pill-key {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.x1-pill .x1-pill-val {
  font-weight: 600;
  color: var(--text-primary);
}
.x1-pill .x1-pill-chev {
  font-size: 9px;
  color: var(--text-dim);
}
.x1-pill.pill-active {
  background: rgba(34, 211, 238, 0.12);
  border-color: var(--teal);
  color: var(--text-primary);
}
.x1-pill.pill-active .x1-pill-key {
  color: var(--teal);
}
.x1-pill .x1-pill-clear {
  display: none;
  margin-left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.x1-pill.pill-active .x1-pill-clear { display: inline-flex; }
.x1-pill .x1-pill-clear:hover {
  background: var(--pink);
  color: var(--bg-dark);
}
.x1-pill-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  padding: 4px;
}
.x1-pill-popover[hidden] { display: none; }
.x1-pill-popover button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.x1-pill-popover button:hover {
  background: var(--bg-row-hover);
}
.x1-pill-popover button.x1-pill-option-active {
  color: var(--teal);
  font-weight: 600;
}
.x1-pill-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.x1-pill-hint .x1-clear-all {
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  margin-left: 8px;
}
.x1-pill-hint .x1-clear-all:hover { text-decoration: underline; }

/* Spec X3 — compact account card */
.account-card {
  padding: 10px 12px;
}
.account-card .account-netliq {
  font-size: 18px;
  margin: 4px 0 6px;
}
.account-today-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.account-today-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  min-width: 42px;
}
.account-today-val {
  font-weight: 600;
}
.account-today-val.pos { color: var(--green); }
.account-today-val.neg { color: var(--pink); }

/* Spec X4 — Schwab tab accordion */
.x4-schwab-accordion {
  margin-top: 16px;
}
.x4-schwab-accordion .w16-accordion-trigger {
  font-size: 13px;
  padding: 12px 16px;
}
.x4-schwab-accordion .w16-accordion-body {
  padding: 12px 16px 16px;
}
.x4-schwab-accordion .w16-accordion-body > .activity-card,
.x4-schwab-accordion .w16-accordion-body > .section-card,
.x4-schwab-accordion .w16-accordion-body > .mini-cal {
  margin: 0;
}
.x4-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
  padding: 8px 0;
}

/* Spec X5 — Diagnostics panels */
.x5-diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) {
  .x5-diag-grid { grid-template-columns: 1fr; }
}
.x5-diag-panel {
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.x5-diag-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.x5-diag-panel-title .x5-diag-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.x5-leak-row,
.x5-yoy-row {
  display: grid;
  align-items: baseline;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 4px;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.x5-leak-row { grid-template-columns: 22px 1fr auto auto; }
.x5-yoy-row  { grid-template-columns: 56px 1fr auto auto; }
.x5-leak-rank {
  color: var(--text-dim);
  font-weight: 600;
}
.x5-leak-symbol,
.x5-yoy-year {
  font-weight: 600;
  color: var(--text-primary);
}
.x5-leak-pnl,
.x5-yoy-pnl {
  font-weight: 600;
}
.x5-leak-pnl.neg, .x5-yoy-pnl.neg { color: var(--pink); }
.x5-leak-pnl.pos, .x5-yoy-pnl.pos { color: var(--green); }
.x5-leak-lots,
.x5-yoy-meta {
  color: var(--text-muted);
  font-size: 11px;
}
.x5-empty,
.x5-loading,
.x5-error {
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
  padding: 8px 4px;
}

/* Spec X7 — truth hero */
.truth-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 80px;
  gap: 16px;
  align-items: center;
  border-left: 3px solid var(--blue, var(--accent, #2563EB));
  background: linear-gradient(135deg,
                              var(--bg-elev,  var(--bg-panel, #1F2A3D)) 0%,
                              var(--bg-elev-2,var(--bg-row,   #252F44)) 100%);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.truth-hero[hidden] { display: none; }
.truth-hero .th-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6B7585);
  margin-bottom: 4px;
}
.truth-hero .th-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #FFFFFF);
  line-height: 1.15;
}
.truth-hero .th-value.mono { font-feature-settings: 'tnum'; }
.truth-hero .th-value.pos { color: var(--green, #10b981); }
.truth-hero .th-value.neg { color: var(--pink, #F87171); }
.truth-hero .th-meta {
  font-size: 11px;
  color: var(--text-faint, var(--text-muted, #8A95A8));
  margin-top: 4px;
  line-height: 1.35;
}
.truth-hero .th-meta .pos { color: var(--green, #10b981); }
.truth-hero .th-meta .neg { color: var(--pink, #F87171); }
.truth-hero .th-gain-block .th-value {
  font-size: 26px;
}
.truth-hero .th-percent {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.truth-hero .th-percent.pos { color: var(--green, #10b981); }
.truth-hero .th-percent.neg { color: var(--pink, #F87171); }
.truth-hero .th-expand-btn {
  background: var(--bg-elev-2, var(--bg-row, #252F44));
  border: 1px solid var(--border, #2A3550);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-secondary, #B8C0CC);
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  align-self: center;
  white-space: nowrap;
}
.truth-hero .th-expand-btn:hover {
  background: var(--bg-row-hover, #2A3650);
  color: var(--text-primary, #FFFFFF);
}
.truth-hero .th-expand-btn[aria-expanded="true"] {
  background: var(--bg-row-hover, #2A3650);
  color: var(--text-primary, #FFFFFF);
}

/* When the hero is visible we hide the legacy tc-body until Detail
   is expanded. The .x7-detail-collapsed class is toggled by JS. */
.tc-body.x7-detail-collapsed,
.tc-per-account-section.x7-detail-collapsed { display: none !important; }

/* Spec X8 — shared cal-layout + 3-col diagnostics */
.cal-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 14px;
  padding: 0;
}
.cal-layout > .mini-cal { margin: 0; }
.cal-layout .cal-drilldown { margin-top: 0; min-height: 200px; }
@media (max-width: 700px) {
  .cal-layout { grid-template-columns: 1fr; gap: 10px; }
}

/* Diagnostics — 3 columns (was 2) */
.x5-diag-grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .x5-diag-grid { grid-template-columns: 1fr; }
}

/* Spec W16b-fix7 — status strip layout + chrome */
.w16-status-bar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--teal) !important;
  border-radius: 8px !important;
  margin-bottom: 16px;
}
.w16-status-block { gap: 6px !important; }
.w16-status-row {
  font-size: 12px !important;
  line-height: 1.3 !important;
  gap: 8px !important;
}
.w16-status-row .key {
  min-width: unset !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  text-transform: none !important;  /* override fix5 uppercase */
  letter-spacing: 0 !important;
}
.w16-status-row .val {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}
.w16-status-row .val.neutral { color: var(--text-muted); }
.w16-status-row .val.pos     { color: var(--green); }
.w16-status-row .val.neg     { color: var(--pink); }
.w16-status-actions {
  gap: 8px !important;
  align-items: center !important;
  justify-self: end !important;
  display: flex !important;
}

/* Spec X9 — detail panel + per-account grid */
.td-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 4px 4px;
  font-size: 13px;
}
.td-rows.mono { font-variant-numeric: tabular-nums; }
.td-rows .label { color: var(--text-secondary, #B8C0CC); }
.td-rows .value { font-weight: 600; text-align: right; }
.td-rows .value.pos { color: var(--green); }
.td-rows .value.neg { color: var(--pink); }
.td-rows .label.total,
.td-rows .value.total {
  font-weight: 700;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 6px;
}

.per-account-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .per-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .per-account-grid { grid-template-columns: 1fr; }
}
.pa-card {
  background: var(--bg-elev-2, var(--bg-row, #252F44));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pa-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}
.pa-card-suffix {
  color: var(--text-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pa-card-label {
  color: var(--text-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-card-pnl {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.pa-card-pnl-value {
  font-size: 14px;
  font-weight: 700;
}
.pa-card-pnl-value.pos { color: var(--green); }
.pa-card-pnl-value.neg { color: var(--pink); }
.pa-card-pnl-pct {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.pa-card-pnl-pct.pos { color: var(--green); }
.pa-card-pnl-pct.neg { color: var(--pink); }
.pa-card-meta {
  font-size: 10px;
  color: var(--text-dim);
}

.conf-pill {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.conf-high     { background: rgba(16, 185, 129, 0.18); color: var(--green); }
.conf-inferred { background: rgba(251, 191, 36, 0.18); color: var(--amber); }
.conf-residual { background: rgba(248, 113, 113, 0.18); color: var(--pink); }
.conf-unknown  { background: var(--bg-row);            color: var(--text-dim); }
.conf-pill.conf-override {
  background: rgba(34, 211, 238, 0.18);
  color: var(--teal);
  margin-left: 6px;
}

/* Spec X10 — single-card account row */
.account-row:has(.account-card.selected) .account-card:not(.selected) {
  display: none;
}
.account-row:has(.account-card.selected) .account-card.selected {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0 auto;
}

/* Spec X13.1 — tab-bot-only scoping */
.tab-pane:not(#tab-bot) .tab-bot-only { display: none !important; }

/* Spec X13.2 — symbol-scoped account card muted state */
.account-card.account-card-muted {
  opacity: 0.55;
}
.account-card.account-card-muted .account-netliq,
.account-card.account-card-muted .account-today-val {
  color: var(--text-muted);
}
.account-today-val.muted { color: var(--text-muted); }

/* ----------------------------------------------------------------- */
/* Spec BOT_RUN_TRAIL (2026-05-12) — visible run history + live clock */
/* ----------------------------------------------------------------- */

.server-clock {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  margin-left: 12px;
  letter-spacing: 0.05em;
}
.server-clock #server-clock-time {
  color: var(--text-secondary);
}

.bot-run-trail-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 12px 0 16px 0;
  overflow: hidden;
}
.bot-run-trail-card > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}
.bot-run-trail-card > summary::-webkit-details-marker { display: none; }
.bot-run-trail-card > summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.12s ease;
}
.bot-run-trail-card[open] > summary::before {
  transform: rotate(90deg);
}
.bot-run-trail-card[open] > summary {
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.trail-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.trail-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.trail-row {
  display: grid;
  grid-template-columns: 80px 110px 140px 72px auto;
  gap: 14px;
  padding: 6px 16px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  align-items: center;
}
.trail-row:hover {
  background: var(--bg-row-hover);
}
.trail-time      { color: var(--teal); }
.trail-regime    { color: var(--text-secondary); }
.trail-sigs      { color: var(--text-primary); }
.trail-exec      { color: var(--text-secondary); }
.trail-err       { color: var(--pink); font-weight: 600; }

.trail-more-hint {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------------- */
/* Spec C1 (2026-05-12) — Schwab API status pill (header)             */
/* ----------------------------------------------------------------- */

.schwab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 0 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-row);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.schwab-pill:hover {
  border-color: var(--border-strong);
}
.schwab-pill-unconnected {
  color: var(--text-muted);
}
.schwab-pill-active {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-glow);
  cursor: default;
}
.schwab-pill-active:hover { border-color: var(--green); }
.schwab-pill-warn {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
}
.schwab-pill-error {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-glow);
}

/* --- Schwab API diff panel (C2 — diff-only, not authoritative) --- */
.schwab-api-card { margin-top: 14px; }
.schwab-api-card > summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 4px;
}
.schwab-api-card .schwab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px;
  font-size: 0.85em;
  color: var(--text-muted, #98a2b3);
}
.schwab-api-card .schwab-toolbar button {
  font-size: 0.85em;
  padding: 4px 10px;
}
.schwab-api-card .schwab-authority-note {
  font-style: italic;
  opacity: 0.7;
}
.schwab-empty {
  padding: 10px 4px;
  color: var(--text-muted, #98a2b3);
  font-style: italic;
}
#schwab-diff-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.schwab-diff-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  font-size: 0.88em;
  border-radius: 3px;
}
.schwab-diff-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.schwab-diff-row .schwab-diff-tag {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.06em;
}
.schwab-diff-row .schwab-diff-sig {
  font-family: var(--mono, ui-monospace, monospace);
  opacity: 0.85;
}
.schwab-diff-row.mismatch     { border-left-color: var(--amber); }
.schwab-diff-row.only-local   { border-left-color: var(--pink); }
.schwab-diff-row.only-api     { border-left-color: var(--blue, #5fb6e6); }
.schwab-rgl-summary {
  margin-top: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  font-size: 0.85em;
  line-height: 1.5;
}
.schwab-rgl-summary .schwab-rgl-caveat {
  display: block;
  margin-top: 4px;
  font-style: italic;
  opacity: 0.7;
}

/* --- Spec SOURCE_VISIBILITY_BADGES — freshness badges + audit drawer --- */
.source-badge {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.02em;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.source-badge.csv.fresh         { background: var(--teal-glow);  color: var(--teal); }
.source-badge.csv.stale         { background: var(--amber-glow); color: var(--amber); }
.source-badge.csv.very-stale    { background: var(--pink-glow);  color: var(--pink); }
.source-badge.api.fresh         { background: var(--green-glow); color: var(--green); }
.source-badge.api.match         { background: var(--teal-glow);  color: var(--teal); }
.source-badge.api.mismatch      { background: var(--pink-glow);  color: var(--pink); }

.audit-history-link {
  margin-left: 8px;
  font-size: 0.85em;
  cursor: pointer;
  color: var(--teal);
  text-decoration: underline dotted;
}
.audit-history-link:hover { color: #FFFFFF; }
.audit-history-link:focus { outline: 1px dotted var(--teal); outline-offset: 2px; }

.audit-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-strong);
  z-index: 1000;
  overflow-y: auto;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.audit-drawer[hidden] { display: none; }
.audit-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--text-muted);
}
.audit-drawer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.audit-drawer-close:hover { color: #FFFFFF; }
.audit-drawer-body {
  flex: 1;
  overflow-y: auto;
}
.audit-drawer-row {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  gap: 3px;
}
.audit-drawer-row .audit-ts { color: #FFFFFF; }
.audit-drawer-row .audit-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.audit-drawer-row .audit-state.match    { color: var(--teal); }
.audit-drawer-row .audit-state.mismatch { color: var(--pink); font-weight: 600; }
.audit-drawer-row .audit-file {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  word-break: break-all;
}
.audit-drawer-loading,
.audit-drawer-empty,
.audit-drawer-error {
  padding: 16px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}
.audit-drawer-error { color: var(--pink); font-style: normal; }



/* ============================================================================
   SPEC D1.5 — Apex tab styles.
   Reuses .section-card, .pos-strip, .pos-card, .mini-cal-* classes. Adds
   only the new layout primitives (split grids, scrolling strip, lens
   badge) and the LIVE pill on the tab nav button.
   ============================================================================ */

.apex-pill-live {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 4px;
  background: rgba(8, 149, 145, 0.18);
  color: var(--green);
  border: 1px solid rgba(8, 149, 145, 0.4);
  vertical-align: middle;
}

.apex-source-badge {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--purple, #C8A6FF);
  opacity: 0.85;
}

/* Spec D2.4 — sticky health banner. Sits above the SCOPE strip in
   the Apex tab and surfaces issues the user couldn't otherwise see:
   stale ingest, fetcher errors, OAuth state, backend unreachable.
   Single-banner-at-a-time policy (priority chosen in morning.js).
   Reuses --amber (already defined in the palette at the top of this
   file) and --pink for red severity. */
.apex-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 0.2px;
}
.apex-banner-amber {
  background: var(--amber-glow, rgba(251, 191, 36, 0.15));
  border-color: var(--amber, #FBBF24);
  color: var(--amber, #FBBF24);
}
.apex-banner-red {
  background: rgba(248, 113, 113, 0.15);
  border-color: var(--pink, #F87171);
  color: var(--pink, #F87171);
}
.apex-banner-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apex-banner-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.apex-banner-msg {
  flex: 1;
  min-width: 0;
  /* tabular-nums keeps the HH:MM:SS UTC timestamps from jittering */
  font-variant-numeric: tabular-nums;
}
.apex-banner-toggle {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.apex-banner-toggle:hover { opacity: 0.8; }
/* Reconnect Schwab — primary CTA in a failing banner. Filled (text uses the
   banner bg color) so it reads as the action vs the outlined Details toggle.
   Navigates same-tab to /api/schwab/oauth-start (see morning.js click handler);
   never a new tab — the CSRF state stash is session-bound. */
.apex-banner-reconnect {
  background: currentColor;
  border: 1px solid currentColor;
  color: var(--bg, #0F1729);
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.apex-banner-reconnect:hover { opacity: 0.85; }
.apex-banner-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  font-size: 11px;
  color: var(--text, #E2E8F0);
  font-family: 'SF Mono', Menlo, monospace;
  line-height: 1.5;
}
.apex-banner-details .apex-banner-row {
  display: grid;
  grid-template-columns: 130px 90px 1fr;
  gap: 8px;
  padding: 2px 0;
}
.apex-banner-details-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.apex-banner-details-action {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.apex-banner-details-action:hover { opacity: 0.8; }
/* Apex-scoped hide utility — use display:none so the sticky position
   doesn't reserve a band when the banner is dormant. */
.apex-hidden { display: none !important; }

/* Header strip — D2.2: row with greet/freshness stack on left,
   refresh button on right. */
.apex-header {
  padding: 6px 0 14px;
  border-bottom: 1px solid #1F2937;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.apex-header-info {
  min-width: 0;
}
.apex-header-greet {
  font-size: 22px;
  font-weight: 600;
  color: var(--text, #E2E8F0);
}
.apex-header-sub {
  font-size: 11px;
  color: var(--text-muted, #8896A8);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* Refresh button — matches the .apex-curve-windows button rhythm:
   dark background, muted border, lights up on hover, purple-accent
   when active/refreshing. Icon spins via .is-refreshing modifier. */
.apex-refresh-btn {
  background: #0F1620;
  color: var(--text-muted, #8896A8);
  border: 1px solid #2A3548;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.apex-refresh-btn:hover:not(:disabled) {
  color: var(--text, #E2E8F0);
  border-color: var(--purple, #C8A6FF);
}
.apex-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.apex-refresh-btn.is-refreshing {
  color: var(--purple, #C8A6FF);
  border-color: var(--purple, #C8A6FF);
}
.apex-refresh-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}
.apex-refresh-btn.is-refreshing .apex-refresh-icon {
  animation: apex-spin 0.8s linear infinite;
}
@keyframes apex-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Filter bar — 6 selects horizontally + D1.7 × clear affordance */
.apex-filter-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  position: relative;
}
.apex-filter-row select {
  background: #0F1620;
  color: var(--text, #E2E8F0);
  border: 1px solid #2A3548;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-family: inherit;
}
.apex-filter-clear {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 4px;
  font-size: 11px;
  color: #8896A8;
  text-decoration: none;
  padding: 2px 6px;
}
.apex-filter-clear:hover { color: var(--text, #E2E8F0); }

/* Real Performance — 3 tiles */
.apex-realperf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.apex-realperf-tile {
  padding: 12px 16px;
  background: rgba(13, 20, 33, 0.4);
  border: 1px solid #2A3548;
  border-radius: 4px;
}
.apex-realperf-label {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
}
.apex-realperf-value {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 24px;
  font-weight: 600;
  color: var(--text, #E2E8F0);
  margin-top: 4px;
}
.apex-realperf-value.pos { color: var(--green, #089591); }
.apex-realperf-value.neg { color: var(--pink, #F86C6B); }
.apex-realperf-sub {
  font-size: 11px;
  color: var(--text-muted, #8896A8);
  margin-top: 2px;
}

/* Chart container — CONSTANT height (never gated by a class). The
   Realized P&L Chart.js canvas and the TradingView Account Value div
   overlap here; only one is visibility:visible at a time. Using
   visibility (not display) keeps both at full size so neither collapses
   to 0 — the v1 hidden-ancestor sizing bug (SPEC_TRADINGVIEW_MIGRATION_V2). */
.apex-curve-wrap {
  position: relative;
  height: 320px;
}
.apex-curve-wrap > #apex-curve-canvas,
.apex-curve-wrap > #apex-curve-tv {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
#apex-curve-tv { visibility: hidden; }

/* Bug 2 (SPEC_SCOPE_CHART_FIXES): Account Value disabled under symbol scope.
   Dimmed centered note layered over the (hidden) chart wrap. */
.apex-av-disabled {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 32px;
  font-size: 12px; line-height: 1.5; font-weight: 500;
  color: var(--text-muted, #8896A8);
  background: rgba(15, 23, 41, 0.55);
}

/* Annotation overlay + chips — recovered from commit 5c172bf (Sashi-approved). */
.apex-curve-wrap .annotation-overlay {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  visibility: hidden; z-index: 3;
}
.ann-chip {
  position: absolute; background: rgba(20, 25, 38, 0.92); color: var(--text, #E2E8F0);
  font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; border: 0.5px solid; transform: translateX(-50%);
  pointer-events: auto; cursor: pointer; transition: transform 0.15s;
  line-height: 1.3; z-index: 2;
}
.ann-chip:hover { transform: translateX(-50%) translateY(-2px); }
.ann-chip .amt { display: block; font-weight: 600; }
.ann-chip .lbl { display: block; font-size: 9px; opacity: 0.85; font-weight: 400; }
.ann-chip.single-line .lbl { font-size: 10px; font-weight: 500; opacity: 1;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ann-chip.in       { border-color: #5DCAA5; box-shadow: 0 0 0 1px rgba(93, 202, 165, 0.3); }
.ann-chip.out      { border-color: #F0997B; box-shadow: 0 0 0 1px rgba(240, 153, 123, 0.3); }
.ann-chip.rollover { border-color: #AFA9EC; box-shadow: 0 0 0 1px rgba(175, 169, 236, 0.3); }
/* internal transfers — dashed + muted slate so they read as "money moved
   within the household", visually distinct from real deposits/withdrawals. */
.ann-chip.internal { border-style: dashed; border-color: #8B95AB; box-shadow: none; color: #BCC4D6; }
.ann-leader { position: absolute; height: 1px; background: rgba(255, 255, 255, 0.18);
  pointer-events: none; z-index: 1; transform-origin: 0 0; }
.ann-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1.5px solid #0F1729;
  pointer-events: none; z-index: 2; }
.ann-dot.in       { background: #1D9E75; }
.ann-dot.out      { background: #D85A30; }
.ann-dot.rollover { background: #7F77DD; }
.ann-dot.internal { background: #6B7280; }
.ann-popover {
  position: absolute; background: #1A1F2E; color: #E2E8F0; font-size: 11px;
  line-height: 1.4; padding: 8px 10px; border-radius: 4px; max-width: 280px;
  pointer-events: none; z-index: 10; display: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); border: 1px solid #2A3548;
}
.ann-popover.show { display: block; }
.ann-popover .pop-row { margin-top: 2px; }
.ann-popover .pop-row:first-child { margin-top: 0; font-weight: 600; }
.ann-popover .pop-muted { color: #8896A8; font-size: 10px; }

/* Curve window selector buttons */
.apex-chart-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #1F2937;
}
.apex-chart-tab {
  background: transparent;
  color: var(--text-muted, #8896A8);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease;
  margin-bottom: -1px;
}
.apex-chart-tab:hover { color: var(--text, #E2E8F0); }
/* Account Value tab greyed while a single-stock scope is active (Bug 2). */
.apex-chart-tab.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.apex-chart-tab.is-disabled:hover { color: var(--text-muted, #8896A8); }
.apex-chart-tab.active {
  color: var(--purple, #C8A6FF);
  border-bottom-color: var(--purple, #C8A6FF);
}
.apex-curve-footer {
  font-size: 10.5px;
  color: var(--text-muted, #8896A8);
  margin-top: 4px;
  opacity: 0.85;
}
.apex-curve-windows {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.apex-curve-windows button,
.apex-curve-windows select,
.apex-curve-windows input[type='date'] {
  background: #0F1620;
  color: var(--text-muted, #8896A8);
  border: 1px solid #2A3548;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.apex-curve-windows input[type='date'] { padding: 3px 8px; cursor: text; }
.apex-curve-windows button:hover,
.apex-curve-windows select:hover,
.apex-curve-windows input[type='date']:hover { color: var(--text, #E2E8F0); }
.apex-curve-windows button.active,
.apex-curve-windows select.active {
  color: var(--purple, #C8A6FF);
  border-color: var(--purple, #C8A6FF);
}
.apex-curve-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid #2A3548;
}
.apex-curve-custom input[type='date'] { width: 130px; }
.apex-curve-meta {
  font-size: 11px;
  color: var(--text-muted, #8896A8);
  margin-top: 4px;
  text-align: right;
}

/* Real Performance per-account tile — redesigned 2026-05-19.
   One card per account: account-name + XXX### header, BIG centered
   current_value, invested figure + colored gain pill beneath. Left
   edge carries an account-color accent stripe driven by --rp-accent
   set inline from JS. */
.apex-rp-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .apex-rp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .apex-rp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.apex-rp-tile {
  position: relative;
  background: var(--bg-elevated, #1F2937);
  border: 1px solid var(--border, #2A3548);
  border-left: 3px solid var(--rp-accent, #64748B);
  border-radius: 5px;
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  min-height: 170px;
}
.apex-rp-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.apex-rp-tile-titles { line-height: 1.15; }
.apex-rp-tile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #E2E8F0);
}
.apex-rp-tile-acct {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
  margin-top: 1px;
}
.apex-rp-tile-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--green, #089591);
  border: 1px solid var(--green, #089591);
  background: rgba(8, 149, 145, 0.10);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: help;
  white-space: nowrap;
}
.apex-rp-tile-cv {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #E2E8F0);
  text-align: center;
  margin-top: 14px;
  letter-spacing: -0.5px;
}
.apex-rp-tile-cv-label {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
  text-align: center;
  margin-top: 1px;
}
.apex-rp-tile-today {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2A3548);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.apex-rp-tile-today-label {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
}
.apex-rp-tile-today-val {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}
.apex-rp-tile-today-pos { color: var(--green, #089591); }
.apex-rp-tile-today-neg { color: var(--pink, #F86C6B); }
.apex-rp-tile-today-neutral { color: var(--text-muted, #8896A8); }
.apex-rp-tile-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.apex-rp-tile-invested {
  font-size: 11px;
  color: var(--text-muted, #8896A8);
  font-variant-numeric: tabular-nums;
}
/* Design C — "Net invested" headline + deposited/withdrawn breakdown panel. */
.apex-rp-tile-net {
  font-size: 12px;
  color: var(--text, #E5E9F2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-bottom: 6px;
  border-bottom: 1px dashed #2A3548;
}
.apex-rp-bd {
  margin-top: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  align-self: stretch;
}
.apex-rp-bd-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 0;
}
.apex-rp-bd-row > span:first-child {
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.apex-rp-bd-in  > span:last-child { color: #5DCAA5; font-weight: 600; }
.apex-rp-bd-out > span:last-child { color: #F0997B; font-weight: 600; }
/* Zero withdrawal: reserve the row for alignment but show a neutral "—"
   (NOT red — red is reserved for real withdrawal amounts). */
.apex-rp-bd-out.apex-rp-bd-zero > span:last-child { color: var(--text-muted, #8896A8); font-weight: 400; }
.apex-rp-bd-net {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #2A3548;
}
.apex-rp-bd-net > span { color: var(--text, #E5E9F2); font-weight: 700; }
.apex-rp-bd-net > span:first-child { font-size: 10px; }
.apex-rp-tile-pill {
  border-radius: 4px;
  padding: 5px 12px;
  text-align: center;
  min-width: 110px;
  font-variant-numeric: tabular-nums;
}
.apex-rp-tile-pill-money {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}
.apex-rp-tile-pill-pct {
  font-size: 10px;
  font-weight: 500;
  margin-top: 1px;
  opacity: 0.85;
}
.apex-rp-tile-pill-pos {
  background: rgba(8, 149, 145, 0.18);
  color: var(--green, #089591);
}
.apex-rp-tile-pill-neg {
  background: rgba(248, 108, 107, 0.18);
  color: var(--pink, #F86C6B);
}
.apex-rp-tile-pill-neutral {
  background: rgba(136, 150, 168, 0.18);
  color: var(--text-muted, #8896A8);
}

/* Per-account tile additions to .pos-card */
.apex-tile-acct {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8896A8);
  text-transform: uppercase;
}
.apex-tile-val {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #E2E8F0);
  margin-top: 2px;
}
.apex-tile-val.pos { color: var(--green, #089591); }
.apex-tile-val.neg { color: var(--pink, #F86C6B); }
.apex-tile-change {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  margin-top: 2px;
}
.apex-tile-change.pos { color: var(--green, #089591); }
.apex-tile-change.neg { color: var(--pink, #F86C6B); }
.apex-tile-meta {
  font-size: 9px;
  color: var(--text-muted, #8896A8);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
/* D2.1.3 — reconciliation warning indicator on a tile whose computed
   net_liq diverges from data/account_expected_net_liq.json by more
   than the tolerance. Yellow border + dot beside the account label;
   tooltip on the dot carries the expected value and delta. */
.pos-card.apex-tile-warn {
  border: 1px solid #D89A29;
}
.apex-tile-warn-dot {
  color: #D89A29;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: 1px;
  cursor: help;
}

/* Open positions table */
.apex-pos-table, .apex-activity-table, .apex-drilldown-table {
  width: 100%;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  border-collapse: collapse;
}
.apex-pos-table th, .apex-activity-table th, .apex-drilldown-table th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted, #8896A8);
  padding: 6px 8px;
  border-bottom: 1px solid #2A3548;
}
.apex-pos-table td, .apex-activity-table td, .apex-drilldown-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #1A2230;
  color: var(--text, #E2E8F0);
}
.apex-pos-table td.pos, .apex-activity-table td.pos, .apex-drilldown-table td.pos {
  color: var(--green, #089591);
}
.apex-pos-table td.neg, .apex-activity-table td.neg, .apex-drilldown-table td.neg {
  color: var(--pink, #F86C6B);
}
.apex-opt-tag {
  font-size: 9px;
  color: var(--text-muted, #8896A8);
  margin-left: 4px;
}

/* Calendar 40/60 split */
.apex-cal-split {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 12px;
}
.apex-cal-grid-wrap {
  padding: 6px;
}
.apex-cal-drilldown {
  padding: 8px;
  background: rgba(13, 20, 33, 0.4);
  border: 1px solid #2A3548;
  border-radius: 4px;
  min-height: 200px;
}
.apex-cal-drilldown-empty {
  font-size: 12px;
  color: var(--text-muted, #8896A8);
  font-style: italic;
  padding: 24px 8px;
  text-align: center;
}
.apex-cal-drilldown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 8px;
  border-bottom: 1px solid #2A3548;
  margin-bottom: 6px;
  font-size: 12px;
  font-family: 'SF Mono', Menlo, monospace;
}
.apex-cal-drilldown-header .pos { color: var(--green, #089591); }
.apex-cal-drilldown-header .neg { color: var(--pink, #F86C6B); }

/* ── SPEC_SIMPLE_PNL_VIEW — economic (full-window) primary view ───────────── */
.apex-econ-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.apex-econ-card {
  background: rgba(13, 20, 33, 0.45);
  border: 1px solid #2A3548;
  border-radius: 6px;
  padding: 12px 14px;
}
.apex-econ-card-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8896A8);
  font-weight: 600;
}
.apex-econ-card-val {
  font-size: 22px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  margin-top: 4px;
  color: var(--text, #D6DEEB);
}
.apex-econ-card-val.pos { color: var(--green, #089591); }
.apex-econ-card-val.neg { color: var(--pink, #F86C6B); }
.apex-econ-card-meta {
  font-size: 10px;
  color: var(--text-muted, #8896A8);
  margin-top: 3px;
}
/* live mark-to-market strip — visually distinct from the realized cards */
.apex-econ-live {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  margin-bottom: 12px;
  background: rgba(40, 53, 72, 0.35);
  border: 1px dashed #38465C;
  border-radius: 5px;
}
.apex-econ-live-label { font-size: 11px; color: var(--text-muted, #8896A8); }
.apex-econ-live-sub { font-size: 10px; opacity: 0.8; }
.apex-econ-live-val {
  font-size: 14px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--text, #D6DEEB);
}
.apex-econ-live-val.pos { color: var(--green, #089591); }
.apex-econ-live-val.neg { color: var(--pink, #F86C6B); }
.apex-econ-cal-split { margin-top: 2px; }
/* flagged (held pre-window) markers */
.mini-cal-day-flag {
  font-size: 7px;
  color: #E0A458;
  margin-top: 1px;
}
.apex-econ-flag-note { color: #E0A458; }
.apex-econ-flag-row { opacity: 0.85; }
.apex-econ-flag-cell {
  color: #E0A458;
  font-style: italic;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APEX DASHBOARD RE-SKIN (SPEC_APEX_DASHBOARD_RESKIN) — TradeReview-style.
   Dark slate premium dashboard: icon sidebar · 4 glowing stat cards · gradient
   area chart + recent trades · collapsible chips wrapping all legacy panels.
   ═══════════════════════════════════════════════════════════════════════════ */
#tab-apex {
  --dash-bg: #0A0D13;
  --dash-card: #10141C;
  --dash-card-2: #141925;
  --dash-border: #1E2533;
  --dash-text: #D6DEEB;
  --dash-muted: #7A879B;
  --dash-coral: #FF6B6B;
  --dash-purple: #9B7BFF;
  --dash-teal: #2DD4BF;
  --dash-blue: #4C8DFF;
  --dash-green: #2DD4A7;
  --dash-red: #FF5C7A;
  background: var(--dash-bg);
}
.apex-dash {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--dash-bg);
  color: var(--dash-text);
  padding: 8px 8px 24px;
}
/* ── icon sidebar ─────────────────────────────────────────────────────────── */
.apex-sidebar {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.apex-sidebar-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--dash-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.apex-sidebar-icon:hover { color: var(--dash-text); background: var(--dash-card-2); }
.apex-sidebar-icon.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(76,141,255,0.30), rgba(45,212,191,0.20));
  box-shadow: 0 0 0 1px rgba(76,141,255,0.35), 0 0 18px rgba(76,141,255,0.25);
}
.apex-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── stat cards ───────────────────────────────────────────────────────────── */
.apex-statcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.apex-statcards-5 { grid-template-columns: repeat(5, 1fr); }
/* compact 10-column day-trade table (entry/exit time+qty+price) */
.apex-econ-daytable { font-size: 11px; }
.apex-econ-daytable th, .apex-econ-daytable td { padding: 4px 6px; white-space: nowrap; }

/* ── journal metrics strip ── */
.apex-metrics {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  background: var(--dash-card); border: 1px solid var(--dash-border);
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.40);
}
.apex-metric-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--dash-muted); }
.apex-metric-val { font-size: 18px; font-weight: 700; font-family: 'SF Mono', Menlo, monospace; color: var(--dash-text); margin-top: 3px; }
.apex-metric-val .pos { color: var(--dash-green); }
.apex-metric-val .neg { color: var(--dash-red); }
.apex-m-sep { color: var(--dash-muted); margin: 0 3px; }
@media (max-width: 880px) { .apex-metrics { grid-template-columns: repeat(3, 1fr); } }

/* ── calendar polish (econ calendar): rounded green/red tiles ── */
.apex-econ-cal-split .mini-cal-day { border-radius: 8px; }
.apex-econ-cal-split .mini-cal-day.pos { background: rgba(45,212,167,0.14); border: 1px solid rgba(45,212,167,0.28); }
.apex-econ-cal-split .mini-cal-day.neg { background: rgba(255,92,122,0.12); border: 1px solid rgba(255,92,122,0.26); }
.apex-econ-cal-split .mini-cal-day.selected { box-shadow: 0 0 0 2px var(--dash-blue); }
.apex-cal-today-btn {
  margin-left: 10px; font-size: 11px; padding: 3px 10px; border-radius: 7px;
  background: var(--dash-card-2); color: var(--dash-text);
  border: 1px solid var(--dash-border); cursor: pointer;
}
.apex-cal-today-btn:hover { background: rgba(76,141,255,0.18); }

/* ── calendar legend (Profit/Loss/Breakeven/No-trading + Best/Worst) ── */
.apex-cal-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dash-border);
  font-size: 11px; color: var(--dash-muted);
}
.apex-leg { display: inline-flex; align-items: center; gap: 5px; }
.apex-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.apex-dot.pos { background: var(--dash-green); }
.apex-dot.neg { background: var(--dash-red); }
.apex-dot.be { background: var(--dash-muted); }
.apex-dot.none { background: transparent; border: 1px solid var(--dash-border); }
.apex-leg-bw { margin-left: auto; color: var(--dash-text); }
.apex-leg-bw .pos { color: var(--dash-green); }
.apex-leg-bw .neg { color: var(--dash-red); }
.apex-leg-date { color: var(--dash-muted); font-size: 10px; }

/* ── Trading Calendar (freetradejournal-style) ── */
.apex-econ-cal-split { grid-template-columns: 1.7fr 1fr; }
.apex-cal-main { min-width: 0; }
.apex-cal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.apex-cal-title { font-size: 15px; font-weight: 700; color: var(--dash-text); }
.apex-cal-navgroup { display: inline-flex; align-items: center; gap: 6px; }
.apex-cal-sel {
  background: var(--dash-card-2); color: var(--dash-text); border: 1px solid var(--dash-border);
  border-radius: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.apex-cal-statrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
.apex-cal-stat { background: var(--dash-card-2); border: 1px solid var(--dash-border); border-radius: 10px; padding: 8px 10px; }
.apex-cal-stat-label { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--dash-muted); }
.apex-cal-stat-val { font-size: 15px; font-weight: 700; font-family: 'SF Mono', Menlo, monospace; color: var(--dash-text); margin-top: 2px; }
.apex-cal-stat-val.pos { color: var(--dash-green); } .apex-cal-stat-val.neg { color: var(--dash-red); }
.apex-cal-stat-val .pos { color: var(--dash-green); } .apex-cal-stat-val .neg { color: var(--dash-red); }

/* full month grid — taller gradient tiles */
.apex-cal-grid-full { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.apex-cal-grid-full .mini-cal-dow { text-align: center; font-size: 10px; color: var(--dash-muted); padding-bottom: 2px; }
.apex-cal-grid-full .mini-cal-day {
  min-height: 64px; border-radius: 10px; padding: 6px; position: relative;
  background: var(--dash-card-2); border: 1px solid var(--dash-border);
  display: flex; flex-direction: column; cursor: default;
}
.apex-cal-grid-full .mini-cal-day.empty { background: rgba(20,25,37,0.5); border-color: rgba(30,37,51,0.5); }
.apex-cal-grid-full .mini-cal-day.empty.pad { background: transparent; border: none; }
.apex-cal-grid-full .mini-cal-day.pos { background: linear-gradient(150deg, rgba(45,212,167,0.30), rgba(45,212,167,0.08)); border-color: rgba(45,212,167,0.45); cursor: pointer; }
.apex-cal-grid-full .mini-cal-day.neg { background: linear-gradient(150deg, rgba(255,92,122,0.28), rgba(255,92,122,0.06)); border-color: rgba(255,92,122,0.42); cursor: pointer; }
.apex-cal-grid-full .mini-cal-day.today { box-shadow: 0 0 0 2px var(--dash-blue); }
.apex-cal-grid-full .mini-cal-day.selected { box-shadow: 0 0 0 2px var(--dash-teal); }
.apex-cal-grid-full .mini-cal-daynum { font-size: 10px; color: var(--dash-muted); }
.apex-cal-grid-full .mini-cal-day-pnl { font-size: 14px; font-weight: 700; font-family: 'SF Mono', Menlo, monospace; margin-top: auto; }
.apex-cal-grid-full .mini-cal-day-pnl.pos { color: var(--dash-green); } .apex-cal-grid-full .mini-cal-day-pnl.neg { color: var(--dash-red); }
.apex-cal-grid-full .mini-cal-day-sub { font-size: 9px; color: var(--dash-muted); margin-top: 1px; }
.apex-cal-grid-full .mini-cal-day-flag { color: #E0A458; margin-left: 4px; }
@media (max-width: 980px) { .apex-econ-cal-split { grid-template-columns: 1fr; } .apex-cal-statrow { grid-template-columns: repeat(3, 1fr); } }

.apex-statcard {
  position: relative;
  background: linear-gradient(160deg, var(--dash-card-2), var(--dash-card));
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.40);
  overflow: hidden;
}
.apex-statcard.primary { border-color: rgba(255,107,107,0.30); }
.apex-statcard-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  font-size: 17px;
  margin-bottom: 12px;
}
.apex-statcard-icon.coral  { background: rgba(255,107,107,0.16); color: var(--dash-coral);  box-shadow: 0 0 18px rgba(255,107,107,0.35); }
.apex-statcard-icon.purple { background: rgba(155,123,255,0.16); color: var(--dash-purple); box-shadow: 0 0 18px rgba(155,123,255,0.32); }
.apex-statcard-icon.teal   { background: rgba(45,212,191,0.16);  color: var(--dash-teal);   box-shadow: 0 0 18px rgba(45,212,191,0.32); }
.apex-statcard-icon.blue   { background: rgba(76,141,255,0.16);  color: var(--dash-blue);   box-shadow: 0 0 18px rgba(76,141,255,0.32); }
.apex-statcard-label {
  font-size: 11px; letter-spacing: .04em; color: var(--dash-muted); font-weight: 600;
  text-transform: uppercase;
}
.apex-statcard-val {
  font-size: 26px; font-weight: 750; margin-top: 4px;
  font-family: 'SF Mono', Menlo, monospace; color: var(--dash-text);
  line-height: 1.1;
}
.apex-statcard-val.pos { color: var(--dash-green); }
.apex-statcard-val.neg { color: var(--dash-red); }
.apex-statcard-sub { font-size: 11px; color: var(--dash-muted); margin-top: 4px; }
.apex-statcard-sub .pos { color: var(--dash-green); }
.apex-statcard-sub .neg { color: var(--dash-red); }

/* ── main dashboard row: chart (60) + recent trades (40) ──────────────────── */
.apex-dash-row {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 16px;
}
.apex-panel {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.40);
  padding: 16px;
}
.apex-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.apex-panel-title { font-size: 13px; font-weight: 650; color: var(--dash-text); }
.apex-panel-title small { display:block; font-size: 10px; color: var(--dash-muted); font-weight: 500; margin-top: 2px; }
.apex-seg {
  display: inline-flex; gap: 2px; background: var(--dash-bg);
  border: 1px solid var(--dash-border); border-radius: 9px; padding: 2px;
}
.apex-seg button {
  border: none; background: transparent; color: var(--dash-muted);
  font-size: 11px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
}
.apex-seg button.active { background: var(--dash-card-2); color: var(--dash-text); box-shadow: 0 0 0 1px var(--dash-border); }
.apex-dash-chart-wrap { position: relative; height: 260px; }

/* ── recent trades panel ──────────────────────────────────────────────────── */
.apex-dash-trades { max-height: 292px; display: flex; flex-direction: column; }
.apex-trades-list { overflow-y: auto; flex: 1; margin: -2px -4px 0; padding: 0 4px; }
.apex-trade-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid rgba(30,37,51,0.6);
}
.apex-trade-row:last-child { border-bottom: none; }
.apex-trade-sym { flex: 1 1 auto; min-width: 0; }
.apex-trade-sym-name { font-size: 12px; color: var(--dash-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apex-trade-sym-meta { font-size: 10px; color: var(--dash-muted); margin-top: 1px; }
.apex-trade-pill {
  font-size: 11px; font-weight: 650; font-family: 'SF Mono', Menlo, monospace;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.apex-trade-pill.pos { background: rgba(45,212,167,0.14); color: var(--dash-green); }
.apex-trade-pill.neg { background: rgba(255,92,122,0.14); color: var(--dash-red); }
.apex-trade-pill.flag { background: rgba(224,164,88,0.14); color: #E0A458; font-style: italic; }

/* ── collapsible chips wrapping legacy panels ─────────────────────────────── */
.apex-chips { display: flex; flex-direction: column; gap: 10px; }
.apex-chip {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  overflow: hidden;
}
.apex-chip-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: transparent; border: none; cursor: pointer;
  color: var(--dash-text); font-size: 13px; font-weight: 600;
  text-align: left;
}
.apex-chip-head:hover { background: var(--dash-card-2); }
.apex-chip-icon { font-size: 15px; }
.apex-chip-title { flex: 1; }
.apex-chip-caret { color: var(--dash-muted); transition: transform .18s; }
.apex-chip[open] > .apex-chip-head .apex-chip-caret,
.apex-chip.open > .apex-chip-head .apex-chip-caret { transform: rotate(180deg); }
.apex-chip-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--dash-border);
}
.apex-chip-body.apex-hidden { display: none; }
/* legacy section-cards inside chips: drop their own chrome (the chip is the card) */
.apex-chip-body .section-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  padding: 0 !important;
}

@media (max-width: 880px) {
  .apex-dash { flex-direction: column; }
  .apex-sidebar { position: static; flex-direction: row; }
  .apex-statcards, .apex-statcards-5 { grid-template-columns: repeat(2, 1fr); }
  .apex-dash-row { grid-template-columns: 1fr; }
}

/* YoY horizontal-scroll strip */
.apex-yoy-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.apex-yoy-tile {
  flex: 0 0 78px;
  padding: 8px 6px;
  border: 1px solid #2A3548;
  background: rgba(13, 20, 33, 0.4);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.apex-yoy-tile.current {
  border-color: var(--purple, #C8A6FF);
}
.apex-yoy-tile.ghost {
  opacity: 0.4;
}
.apex-yoy-year {
  font-size: 11px;
  color: var(--text-muted, #8896A8);
  letter-spacing: 0.5px;
}
.apex-yoy-pnl {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  margin-top: 4px;
}
.apex-yoy-pnl.pos { color: var(--green, #089591); }
.apex-yoy-pnl.neg { color: var(--pink, #F86C6B); }
.apex-yoy-wl {
  font-size: 9px;
  color: var(--text-muted, #8896A8);
  margin-top: 2px;
}

/* Top movers 50/50 split */
.apex-topn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apex-topn-side {
  padding: 8px;
  background: rgba(13, 20, 33, 0.4);
  border: 1px solid #2A3548;
  border-radius: 4px;
}
.apex-topn-title {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted, #8896A8);
  margin-bottom: 6px;
}
.apex-topn-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid #1A2230;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
}
.apex-topn-sym {
  color: var(--text, #E2E8F0);
  font-weight: 600;
}
.apex-topn-pnl.pos { color: var(--green, #089591); text-align: right; }
.apex-topn-pnl.neg { color: var(--pink, #F86C6B); text-align: right; }
.apex-topn-count {
  color: var(--text-muted, #8896A8);
  text-align: right;
  font-size: 10px;
}

/* Recent activity tags */
.apex-activity-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
}
.apex-activity-tag.tag-buy {
  background: rgba(8, 149, 145, 0.18);
  color: var(--green, #089591);
}
.apex-activity-tag.tag-sell {
  background: rgba(248, 108, 107, 0.18);
  color: var(--pink, #F86C6B);
}
.apex-activity-tag.tag-dividend {
  background: rgba(200, 166, 255, 0.15);
  color: var(--purple, #C8A6FF);
}
.apex-activity-tag.tag-fee, .apex-activity-tag.tag-other {
  background: rgba(136, 150, 168, 0.15);
  color: var(--text-muted, #8896A8);
}

/* Mobile fallbacks — collapse splits */
@media (max-width: 760px) {
  .apex-filter-row { grid-template-columns: repeat(2, 1fr); }
  .apex-realperf-grid { grid-template-columns: 1fr; }
  .apex-cal-split { grid-template-columns: 1fr; }
  .apex-topn-split { grid-template-columns: 1fr; }
}

/* SPEC_REALTIME_QUOTES — brief tick-flash when a live mark changes. */
@keyframes rtq-flash-up   { 0% { background: rgba(46, 196, 130, 0.35); } 100% { background: transparent; } }
@keyframes rtq-flash-down { 0% { background: rgba(220, 64, 96,  0.35); } 100% { background: transparent; } }
.rtq-flash-up   { animation: rtq-flash-up   0.6s ease-out; }
.rtq-flash-down { animation: rtq-flash-down 0.6s ease-out; }
tr[data-rtq-stale] td:nth-child(5)::after,
tr[data-rtq-stale] td:nth-child(4)::after { content: ' ⚠'; color: #c89b3c; }

/* SPEC_REAL_NEWS_INTEGRATION — RECENT NEWS panel */
.apex-news-subtitle {
  padding: 4px 14px 8px;
  color: var(--text-muted, #98a1b8);
  font-size: 12px;
}
.apex-news-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.apex-news-table thead th {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  color: var(--text-muted, #98a1b8); font-weight: 500;
}
.apex-news-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.apex-news-table .ticker { font-weight: 600; font-family: var(--mono, monospace); }
.apex-news-table .col-r { text-align: right; }
.apex-news-row.apex-news-pos td:nth-child(2) { color: var(--teal, #2ec482); }
.apex-news-row.apex-news-neg td:nth-child(2) { color: var(--coral, #dc4060); }
.apex-news-row.apex-news-neu td:nth-child(2) { color: var(--text-muted, #98a1b8); }
.apex-news-headline { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.apex-news-ago { color: var(--text-muted, #98a1b8); font-size: 12px; white-space: nowrap; }
.apex-news-expand-cell { width: 28px; }
.apex-news-expand {
  background: transparent; border: none; color: var(--text-muted, #98a1b8);
  cursor: pointer; font-size: 14px; padding: 0 4px;
}
.apex-news-expand:hover { color: var(--text, #d8deee); }
.apex-news-cited td { background: rgba(255,255,255,0.02); padding: 6px 14px 10px 60px; }
.apex-news-cited-list { margin: 0; padding-left: 16px; color: var(--text-muted, #98a1b8); }
.apex-news-cited-list li { padding: 2px 0; font-size: 12px; line-height: 1.45; }

/* ── Tax view (wash-sale adjusted) — SPEC_TAX_VIEW_WASH_SALE. Distinct gold
   accent so it is NEVER confused with the live FIFO (teal) realized number. ── */
.apex-tax-card { border-left: 3px solid #C8953D; }
.apex-tax-badge { background: rgba(200,149,61,0.18); color: #E0B566; }
.apex-tax-uploadbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.apex-tax-upload-btn {
  background: rgba(200,149,61,0.14); border: 1px solid #C8953D; color: #E0B566;
  padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.apex-tax-upload-btn:hover { background: rgba(200,149,61,0.24); }
.apex-tax-uploadhint { font-size: 10.5px; color: var(--text-muted, #8896A8); }
.apex-tax-house { padding: 4px 0 12px; border-bottom: 1px solid #1F2937; margin-bottom: 10px; }
.apex-tax-house-net { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apex-tax-house-label { font-size: 12px; color: var(--text-muted, #8896A8); margin-top: 2px; }
.apex-tax-house-drag { font-size: 11px; color: #B08A4A; margin-top: 4px; }
.apex-tax-warn { color: #E0A458; }
.apex-tax-empty { color: var(--text-muted, #8896A8); font-size: 12px; }
.apex-tax-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.apex-tax-table th { text-align: right; color: var(--text-muted, #8896A8); font-weight: 500; padding: 5px 10px; border-bottom: 1px solid #1F2937; font-size: 11px; }
.apex-tax-table th:first-child, .apex-tax-table td:first-child { text-align: left; }
.apex-tax-table td { text-align: right; padding: 5px 10px; border-bottom: 1px solid #161E2B; }
.apex-tax-table .pos { color: var(--teal, #089591); }
.apex-tax-table .neg { color: var(--pink, #F86C6B); }
.apex-tax-drag { color: #B08A4A; }
.apex-tax-range { color: var(--text-muted, #8896A8); font-size: 10px; }
.apex-tax-missing td { color: var(--text-muted, #8896A8); font-style: italic; }
.apex-tax-stale { color: #E0A458; font-size: 10px; border: 1px solid #C8953D; border-radius: 3px; padding: 0 4px; }
.apex-tax-footnote { font-size: 10.5px; color: var(--text-muted, #8896A8); margin-top: 8px; line-height: 1.5; }
.apex-tax-recon-h { font-size: 11px; color: var(--text-muted, #8896A8); margin: 16px 0 6px; letter-spacing: 0.3px; text-transform: uppercase; }

/* Non-skippable confirm modal — no backdrop dismiss; explicit Cancel/Confirm only. */
.apex-tax-confirm-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,20,0.72);
  display: flex; align-items: center; justify-content: center;
}
.apex-tax-confirm-card {
  background: #131A26; border: 1px solid #2A3548; border-top: 3px solid #C8953D;
  border-radius: 6px; width: min(460px, 92vw); padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); font-size: 13px; color: var(--text, #E2E8F0);
}
.apex-tax-confirm-title { font-size: 15px; font-weight: 600; }
.apex-tax-confirm-sub { font-size: 11.5px; color: var(--text-muted, #8896A8); margin: 4px 0 14px; line-height: 1.45; }
.apex-tax-confirm-invalid { background: rgba(248,108,107,0.12); border: 1px solid #F86C6B; color: #F8A0A0; padding: 6px 10px; border-radius: 4px; margin-bottom: 12px; font-size: 12px; }
.apex-tax-confirm-empty { background: rgba(8,149,145,0.12); border: 1px solid #089591; color: #6FD0CB; padding: 6px 10px; border-radius: 4px; margin-bottom: 12px; font-size: 12px; line-height: 1.4; }
.apex-tax-confirm-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 5px 0; align-items: center; }
.apex-tax-confirm-row label { color: var(--text-muted, #8896A8); font-size: 11.5px; }
.apex-tax-confirm-row select { background: #0F1729; color: var(--text, #E2E8F0); border: 1px solid #2A3548; border-radius: 4px; padding: 4px 8px; font-family: inherit; }
.apex-tax-confirm-routenote { font-size: 10.5px; color: var(--text-muted, #8896A8); margin: 0 0 6px 120px; }
.apex-tax-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.apex-tax-btn-cancel { background: transparent; border: 1px solid #2A3548; color: var(--text-muted, #C2CBDA); padding: 6px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; }
.apex-tax-btn-commit { background: #C8953D; border: 1px solid #C8953D; color: #1A130A; font-weight: 600; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; }
.apex-tax-btn-commit:disabled { opacity: 0.4; cursor: not-allowed; }
.apex-tax-btn-commit:not(:disabled):hover { background: #D8A555; }