:root {
  /* Palette: dark slate with strict accent colors */
  --bg: #0f1419;
  --bg-elevated: #1a2129;
  --bg-row-hover: #232c36;
  --border: #2a3540;
  --border-strong: #3a4754;
  --text: #e5e9ec;
  --text-muted: #9aa5b1;
  --text-dim: #6b7682;

  /* Status / tier colors */
  --green-1: #22c55e;
  --green-2: #65d491;
  --yellow-1: #eab308;
  --yellow-2: #f5b941;
  --red: #ef4444;
  --neutral: #6b7682;
  --blue: #3b82f6;

  /* Brand · Aegus
     Primary brand blue is #185fa5 — used for tinted accents and hover.
     Lighter variant #378add is the on-dark logo color (better contrast
     against the dark theme bg than the deeper primary). */
  --brand-blue: #185fa5;
  --brand-blue-light: #378add;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);

  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Roboto Mono', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sticky-layer heights. Used to stagger top values so the header,
     tabs, and table column headers all stay in view when scrolling.
     If you adjust header or tab padding, update these to match. */
  --sticky-header-h: 64px;
  --sticky-tabs-h: 42px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.hidden {
  display: none !important;
}

/* ---------- HEADER ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Aegus brand lockup: shield mark + wordmark.
   Mark uses currentColor so it inherits .brand's color (brand blue
   light, for contrast on the dark theme). The wordmark overrides
   color back to --text so it reads as a normal title, giving the
   classic 2-color logo + wordmark treatment. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-blue-light);
  user-select: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

.brand-name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text);
  line-height: 1;
}

.header-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.header-divider {
  margin: 0 8px;
  color: var(--text-dim);
}

.controls {
  display: flex;
  gap: 8px;
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover:not(:disabled) {
  background: var(--bg-row-hover);
  border-color: var(--text-dim);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
}

/* ---------- TABS ---------- */
.tabs {
  position: sticky;
  top: var(--sticky-header-h);
  z-index: 40;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  gap: 4px;
}

.tab {
  padding: 11px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
  color: var(--text);
}

.tab-active {
  color: var(--text);
  border-bottom-color: var(--blue);
}

/* ---------- MAIN ---------- */
main {
  padding: 24px 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.tab-panel {
  animation: none;
}

/* ---------- SECTION HEADERS ---------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.section-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- TABLES ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* No overflow:hidden here — that would create a scroll context that
     prevents `position: sticky` on table headers from working. The visual
     impact at the rounded corners is negligible because thead/tbody
     backgrounds match the table background. */
}

/* Sticky column-header row: pinned below the page header + tabs.
   Applied to `<thead>` (not individual `<th>` cells) because per-cell
   sticky can collapse the `<tr>` height and push the first data row
   into the header's slot in some browsers. `<thead>` sticky is
   supported in all current browsers (Chrome 91+, Firefox 90+, Safari 15+). */
thead {
  position: sticky;
  top: calc(var(--sticky-header-h) + var(--sticky-tabs-h));
  z-index: 30;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

/* Override the global sticky thead behavior for tables inside the Guide
   tab. Guide reference tables are short and don't need sticky headers;
   the global rule applies to all <thead> elements and was causing the
   first data rows of guide-compare-table to render in the header's slot
   (the column headers appeared between rows 2 and 3 of the body). */
.guide-section thead {
  position: static;
  z-index: auto;
}

th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  /* Opaque background so sticky content doesn't bleed through visually */
  background: var(--bg-elevated);
}

th.right, td.right {
  text-align: right;
}

td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

tbody tr:hover {
  background: var(--bg-row-hover);
}

tbody tr:last-child td {
  border-bottom: none;
}

.mono {
  font-family: var(--font-mono);
}

.ticker {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

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

.text-dim {
  color: var(--text-dim);
}

.text-green {
  color: var(--green-1);
}

.text-red {
  color: var(--red);
}

.text-yellow {
  color: var(--yellow-1);
}

/* ---------- TIER BADGES (scores) ---------- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  border: 1px solid;
}

.badge-green {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
  color: var(--green-1);
}

.badge-yellow {
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.28);
  color: var(--yellow-1);
}

.badge-red {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.28);
  color: var(--red);
}

.badge-neutral {
  background: rgba(107, 118, 130, 0.14);
  border-color: rgba(107, 118, 130, 0.28);
  color: var(--text-muted);
}

.badge-blue {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.28);
  color: var(--blue);
}

/* ---------- PILLS (watchlist items) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}

.pill-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
}

.pill-remove:hover {
  color: var(--red);
}

/* ---------- LOADING / EMPTY ---------- */
.loading, .empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-detail {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.error {
  padding: 16px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.05);
  color: var(--red);
  border-radius: var(--radius);
  font-size: 13px;
}

.warning {
  padding: 16px;
  border: 1px solid rgba(234, 179, 8, 0.28);
  background: rgba(234, 179, 8, 0.05);
  color: var(--yellow-1);
  border-radius: var(--radius);
  font-size: 13px;
}

/* ---------- WATCHLIST CONTROLS ---------- */
.watchlist-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

input[type="text"], input[type="number"], select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}

input::placeholder {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* ---------- SETTINGS ---------- */
.settings-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 800px;
}

.settings-label {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.settings-input {
  width: 100%;
}

.settings-section-title {
  grid-column: 1 / -1;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding-top: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.settings-section-title:first-child {
  padding-top: 0;
}

.settings-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.settings-help {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: -8px;
  margin-bottom: 8px;
}

/* VCP settings section: header with inline Reset button */
.settings-vcp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-reset-btn {
  font-size: 11px;
  padding: 4px 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Subgrouping within VCP section — visually quieter than the main section
   title but still clear that these params group together. */
.settings-vcp-subgroup {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-header {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal-ticker {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.modal-subtitle {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.modal-body {
  padding: 24px;
}

.modal-section {
  margin-bottom: 28px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section .section-title {
  margin-bottom: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  font-size: 13px;
}

.summary-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-top: 1px;
}

.summary-value {
  font-family: var(--font-mono);
  color: var(--text);
}

.summary-factors {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.factor-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.ai-analysis {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

.ai-analysis .ai-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- VCP-SPECIFIC STYLES ---------- */
.vcp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  margin-right: 16px;
}

.vcp-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Tier filter select (replaces the binary checkbox) */
.vcp-filter-select {
  background: var(--bg-input, #1a2330);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.vcp-filter-select:hover,
.vcp-filter-select:focus {
  border-color: var(--accent, #5b9bd5);
}

/* Watchlist star toggle in VCP rows */
.watch-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.15s, background-color 0.15s, transform 0.1s;
  font-family: inherit;
}

.watch-toggle:hover {
  color: #f5c14e; /* warm gold on hover */
  background: rgba(245, 193, 78, 0.08);
}

.watch-toggle:active {
  transform: scale(0.92);
}

.watch-toggle.is-watched {
  color: #f5c14e; /* solid gold when watched */
}

.watch-toggle.is-watched:hover {
  color: #e0a838;
}

/* Subtle highlight on rows that are in the watchlist */
tbody tr[data-watched="true"] {
  background-color: rgba(245, 193, 78, 0.05);
}

tbody tr[data-watched="true"]:hover {
  background-color: rgba(245, 193, 78, 0.08);
}

/* ============================================================ */
/* Breakout Imminence Score (BIS) — table badge and detail panel */
/* ============================================================ */
.bis-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.bis-badge .bis-stars {
  font-size: 13px;
  letter-spacing: 1px;
}

.bis-badge .bis-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.bis-na {
  color: var(--text-muted);
  border-color: var(--border);
}

.bis-0 {
  color: #8a93a3;
  background: rgba(138, 147, 163, 0.08);
  border-color: rgba(138, 147, 163, 0.2);
}

.bis-1 {
  color: #5b9bd5;
  background: rgba(91, 155, 213, 0.08);
  border-color: rgba(91, 155, 213, 0.25);
}

.bis-2 {
  color: #f5c14e;
  background: rgba(245, 193, 78, 0.1);
  border-color: rgba(245, 193, 78, 0.3);
}

.bis-3 {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.35);
  font-weight: 600;
}

/* BIS detail panel section */
.bis-section {
  margin-top: 20px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  border-radius: 4px;
}

.bis-section-0 {
  background: rgba(138, 147, 163, 0.05);
}
.bis-section-1 {
  background: rgba(91, 155, 213, 0.05);
}
.bis-section-2 {
  background: rgba(245, 193, 78, 0.06);
}
.bis-section-3 {
  background: rgba(255, 107, 107, 0.07);
  border-left: 3px solid #ff6b6b;
  padding-left: 13px;
}

.bis-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.bis-section-stars {
  font-size: 18px;
  letter-spacing: 2px;
  color: #f5c14e;
}

.bis-section-score {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.bis-section-label {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 12px;
}

.bis-signals-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.bis-signals-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.bis-signals-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bis-signal-row.fired .bis-signal-mark {
  color: #5bb86a;
  font-weight: bold;
}

.bis-signal-row.not-fired .bis-signal-mark {
  color: var(--text-muted);
}

.bis-signal-row.not-fired {
  opacity: 0.65;
}

.bis-signal-name {
  font-weight: 500;
}

.bis-signal-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.bis-section-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-top: 8px;
}

.bis-unavailable {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================ */
/* Sector filter, sector strip, sector badges                   */
/* ============================================================ */

/* Sector strip: horizontal row of mini-badges showing 30d returns
   for all 11 sectors, sorted hot to cold. Appears between filters
   and the table. */
.sector-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 12px 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.sector-strip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 8px;
}

.sector-strip-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  border: 1px solid transparent;
  min-width: 48px;
  line-height: 1.2;
}

.sector-strip-abbr {
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.sector-strip-return {
  font-size: 9px;
  font-family: var(--font-mono);
  opacity: 0.85;
}

/* Sector tone colors (used in both strip and table badge) */
.sector-hot {
  color: #5bb86a;
  background: rgba(91, 184, 106, 0.1);
  border-color: rgba(91, 184, 106, 0.3);
}
.sector-mid {
  color: #c2c2c2;
  background: rgba(194, 194, 194, 0.06);
  border-color: rgba(194, 194, 194, 0.2);
}
.sector-cold {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.3);
}
.sector-no-rank {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}
.sector-unknown {
  color: var(--text-muted);
  font-style: italic;
  font-size: 10px;
}

/* Sector badge in VCP table row */
.sector-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.sector-rank {
  font-size: 9px;
  opacity: 0.8;
  font-weight: 600;
}

/* Sector picker button + modal */
.btn-small {
  background: var(--bg-input, #1a2330);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.btn-small:hover {
  border-color: var(--accent, #5b9bd5);
}

.sector-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.sector-picker-modal {
  background: var(--bg, #0e1620);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.sector-picker-body {
  padding: 12px 16px;
  overflow-y: auto;
  max-height: 60vh;
}

.sector-picker-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sector-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sector-picker-row:hover {
  background: rgba(91, 155, 213, 0.06);
}

.sector-picker-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.sector-picker-name {
  flex: 1;
}

.sector-picker-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  width: 30px;
  text-align: right;
}

.sector-picker-return {
  font-family: var(--font-mono);
  font-size: 11px;
  width: 60px;
  text-align: right;
}

.sector-picker-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

/* ============================================================ */
/* Sortable table headers                                       */
/* ============================================================ */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.15s;
}

/* Sticky thead requires opaque backgrounds; the hover must also be
   opaque or content will visibly scroll through the header on hover. */
th[data-sort]:hover {
  background-color: var(--bg-row-hover);
}

th[data-sort]:active {
  background-color: var(--border);
}

/* The sort arrow span is inline in every sortable header. By default
   it shows a subtle hint that the column is sortable; when the column
   is the active sort, the arrow brightens and flips direction. */
.sort-arrow {
  display: inline-block;
  width: 10px;
  margin-left: 3px;
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 11px;
  transition: opacity 0.15s, color 0.15s;
}

.sort-arrow::after {
  content: '⇅';
}

th[data-sort]:hover .sort-arrow {
  opacity: 0.65;
}

th.sort-asc .sort-arrow {
  opacity: 1;
  color: var(--accent, #5b9bd5);
}

th.sort-desc .sort-arrow {
  opacity: 1;
  color: var(--accent, #5b9bd5);
}

th.sort-asc .sort-arrow::after {
  content: '↑';
}

th.sort-desc .sort-arrow::after {
  content: '↓';
}

/* Ticker link styling — looks like the existing ticker text but with
   a hover state indicating it's a chart link. */
.ticker-link {
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}

.ticker-link:hover {
  color: var(--accent, #5b9bd5);
  border-bottom-color: var(--accent, #5b9bd5);
}

.ticker-link:focus {
  outline: 2px solid var(--accent, #5b9bd5);
  outline-offset: 1px;
}

.vcp-contractions-section,
.vcp-rules-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.vcp-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.vcp-contractions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.vcp-contractions-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 500;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.vcp-contractions-table th.right { text-align: right; }

.vcp-contractions-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.vcp-contractions-table td.right { text-align: right; }
.vcp-contractions-table tbody tr:last-child td { border-bottom: none; }

.vcp-marginal {
  margin-top: 16px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 12px 16px;
}

.vcp-marginal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(245, 158, 11);
  margin-bottom: 8px;
  font-weight: 600;
}

.vcp-marginal ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}

.vcp-marginal li { margin-bottom: 4px; }
.vcp-marginal li:last-child { margin-bottom: 0; }

.vcp-rules-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vcp-rule {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
}

.vcp-rule-pass {
  color: rgb(34, 197, 94);
  border-color: rgba(34, 197, 94, 0.3);
}

.vcp-rule-fail {
  color: var(--text-dim);
  border-color: var(--border);
}

/* ---------- WEINSTEIN STAGE BADGES + DETAIL ---------- */
/* Compact stage badge in table cells. Color-coded by stage. */
.stage-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  text-align: center;
  min-width: 30px;
}

.stage-1 {
  /* Accumulation — blue (building, attention) */
  color: rgb(96, 165, 250);
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.30);
}

.stage-2 {
  /* Markup — green (uptrend, bullish) */
  color: rgb(34, 197, 94);
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}

.stage-3 {
  /* Distribution — yellow (warning) */
  color: rgb(245, 158, 11);
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
}

.stage-4 {
  /* Markdown — red (avoid) */
  color: rgb(239, 68, 68);
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
}

.stage-unknown {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--border);
}

/* Larger version of the badge for the detail panel header */
.stage-badge.stage-large {
  font-size: 13px;
  padding: 6px 14px;
  min-width: 0;
}

.stage-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.stage-confidence {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage-interpretation {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 12px;
}

.stage-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stage-imminent {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgb(245, 158, 11);
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.30);
  padding: 6px 12px;
  border-radius: 4px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-weight: 500;
}

.stage-transition {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.stage-unavailable {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
}

/* ---------- REVERSAL-ANCHOR INDICATORS ---------- */
/* Small ⚓ icon shown next to the Mode column when a VCP result came
 * from the reversal-anchor fallback (post-bottom sub-base interpretation
 * rather than standard full-data detection). Visual cue that the pivot
 * was computed against the post-recovery high, not pre-decline peaks. */
.anchor-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: rgb(96, 165, 250);
  cursor: help;
  line-height: 1;
  vertical-align: middle;
}

.anchor-badge-large {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-left: 0;
  padding: 4px 10px;
  border-radius: 4px;
  color: rgb(96, 165, 250);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anchor-info-block {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 6px;
}

.anchor-info-header {
  margin-bottom: 8px;
}

.anchor-info-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.anchor-info-body strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ---------- INSIDER CLUSTER BADGES + DETAIL ---------- */
/* Compact insider badge for table cells. Color-coded by label_tier from
 * the trading suite's insider screener (green=STRONG, yellow=WATCH,
 * neutral=MONITOR/WEAK, ipo=IPO/SPONSOR). */
.insider-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
}

.insider-green {
  color: rgb(34, 197, 94);
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}

.insider-yellow {
  color: rgb(245, 158, 11);
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
}

.insider-neutral {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.20);
}

.insider-ipo {
  color: rgb(168, 85, 247);
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.30);
}

.insider-none {
  color: var(--text-dim);
  background: transparent;
  border-color: transparent;
  cursor: help;
}

.insider-large {
  font-size: 13px;
  padding: 6px 14px;
}

.insider-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.insider-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.insider-summary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.insider-composition,
.insider-recency,
.insider-entry-comparison {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.insider-entry-comparison {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(148, 163, 184, 0.05);
  border-radius: 4px;
  border-left: 2px solid var(--border);
}

.insider-lead-buyer {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

.insider-lead-buyer strong {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

.insider-rarity {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}

.insider-flag {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.insider-flag-review {
  color: rgb(245, 158, 11);
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.20);
}

.insider-flag-new {
  color: rgb(96, 165, 250);
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.20);
}

.insider-unavailable {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
}

/* ---------- FOOTER ---------- */
footer {
  padding: 24px 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

/* ---------- GUIDE TAB ---------- */
.guide-hero {
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.guide-intro {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.6;
}

.guide-section {
  margin-bottom: 40px;
}

.guide-section-title {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.guide-text {
  margin: 0 0 16px;
  color: var(--text-muted);
  max-width: 760px;
  line-height: 1.6;
}

/* Cards for the three trading styles */
.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.guide-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guide-card-header {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guide-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.guide-card-body {
  padding: 14px 16px;
  flex: 1;
}

.guide-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

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

.guide-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding-top: 2px;
  font-weight: 500;
}

.guide-card-footer {
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.guide-card-footer strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* Score legend rows */
.guide-score-table {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.guide-score-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

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

.guide-score-row > span.badge {
  justify-self: start;
}

.guide-score-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.guide-score-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Column reference tables */
.guide-table-explainer {
  margin-bottom: 24px;
}

.guide-table-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.guide-ref-table {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

.guide-ref-table td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.guide-ref-table tr:last-child td {
  border-bottom: none;
}

.guide-ref-table tr:hover {
  background: transparent;
}

.guide-col-name {
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 160px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Workflow steps */
.guide-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.8;
  max-width: 760px;
}

.guide-steps li {
  padding: 2px 0;
}

.guide-steps strong {
  color: var(--text);
  font-weight: 600;
}

/* Callout cards */
.guide-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.guide-callout {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 2px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.guide-callout-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.guide-callout-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* References list */
.guide-refs {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 760px;
}

.guide-ref-title {
  color: var(--text);
  font-weight: 600;
}

.guide-refs em {
  color: var(--text-muted);
  font-style: italic;
}

/* Comparison table at top of styles section */
.guide-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.guide-compare-table thead {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.guide-compare-table th {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.guide-compare-table td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.guide-compare-table tr:last-child td {
  border-bottom: none;
}

.guide-compare-table tr:hover {
  background: transparent;
}

.guide-compare-name {
  font-weight: 600;
  color: var(--text);
}

.guide-compare-quote {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- HELP DROPDOWN ---------- */
.help-menu {
  position: relative;
}

.help-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 60;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.help-item {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.help-item:hover {
  background: var(--bg-row-hover);
}

/* Highlight target section briefly when navigated to */
.guide-section-highlight {
  animation: section-flash 1.5s ease-out;
}

@keyframes section-flash {
  0% {
    background: rgba(59, 130, 246, 0.10);
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.06);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ---------- COLUMN HEADER TOOLTIPS ---------- */
th[data-tip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--text-dim);
}

th[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  width: 240px;
  text-align: left;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 40;
  box-shadow: var(--shadow);
}

th[data-tip]::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 41;
}

th[data-tip]:hover::after,
th[data-tip]:hover::before {
  opacity: 1;
}

/* Right-aligned tooltips align right edge to avoid overflow */
th.right[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}

th.right[data-tip]::before {
  left: auto;
  right: 14px;
  transform: none;
}

/* ---------- LOOKUP TAB ---------- */
.lookup-form {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  max-width: 600px;
}

.lookup-form input {
  flex: 1;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lookup-form input::placeholder {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}

.lookup-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.lookup-empty-detail {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.lookup-result {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lookup-header-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lookup-ticker-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lookup-ticker-symbol {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.lookup-ticker-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.lookup-price-block {
  text-align: right;
}

.lookup-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.lookup-price-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.lookup-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lookup-section-header {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lookup-section-title {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.lookup-section-body {
  padding: 16px;
}

/* Lookup VCP strip — at-a-glance summary card that mirrors a row from
   the VCP scan table. Lives at the top of the Lookup tab's VCP section
   so a single-ticker lookup shows the same readable visual treatment
   (tier, BIS, stage, insider, sector badges + key metrics) that the
   user is fluent in reading from the daily scan. */
.lookup-vcp-strip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lookup-vcp-strip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.lookup-vcp-strip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lookup-vcp-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 13px;
  color: var(--text);
}

.lookup-vcp-strip-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.lookup-vcp-strip-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lookup-indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
}

.lookup-indicator {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lookup-indicator-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lookup-indicator-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}

.lookup-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

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

.lookup-filter-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}

.lookup-filter-status.pass {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: var(--green-1);
}

.lookup-filter-status.fail {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: var(--red);
}

.lookup-filter-label {
  flex: 1;
  color: var(--text);
}

.lookup-filter-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.lookup-verdict {
  padding: 12px 16px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.lookup-verdict.qualifies {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: var(--text);
}

.lookup-verdict.subthreshold {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.28);
  color: var(--text);
}

.lookup-verdict.disqualified {
  background: rgba(107, 118, 130, 0.08);
  border: 1px solid rgba(107, 118, 130, 0.28);
  color: var(--text-muted);
}

.lookup-verdict-icon {
  font-family: var(--font-mono);
  font-weight: 600;
  margin-right: 8px;
}

.lookup-patterns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.lookup-pattern-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 4px;
}

.lookup-pattern-age {
  color: var(--text-dim);
  margin-left: 4px;
}

.lookup-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.lookup-error {
  padding: 16px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.05);
  color: var(--red);
  border-radius: var(--radius);
  font-size: 13px;
}

/* ---------- TAB BADGE ---------- */
.tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--green-1);
  color: #0a0e13;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.tab-badge.alert {
  background: var(--yellow);
  color: #1a1300;
}

.tab-badge.danger {
  background: var(--red);
  color: #fff;
}

/* ---------- ACTIVE TRADES TAB ---------- */
.trades-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.trades-empty-detail {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.trade-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.trade-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.trade-card.has-alert {
  border-color: rgba(234, 179, 8, 0.4);
}

.trade-card.has-danger {
  border-color: rgba(239, 68, 68, 0.4);
}

.trade-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.trade-ticker {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.trade-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.trade-pnl {
  margin-left: auto;
  text-align: right;
}

.trade-pnl-dollar {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}

.trade-pnl-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.text-green { color: var(--green-1); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-orange { color: #f97316; }
.text-dim { color: var(--text-dim); }

.trade-body {
  padding: 16px 20px;
}

.trade-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 20px;
}

.trade-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-metric-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trade-metric-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.trade-status-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.status-flag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-flag.at_stop, .status-flag.stop_hit {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: var(--red);
}

.status-flag.near_target, .status-flag.target_hit {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: var(--green-1);
}

.status-flag.time_stop_approaching, .status-flag.time_stop_reached, .status-flag.setup_failing {
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.28);
  color: var(--yellow);
}

.trade-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border);
}

.trade-actions button {
  font-size: 12px;
  padding: 6px 12px;
}

/* ---------- TRADE REVIEW TAB ---------- */
.review-empty {
  padding: 40px 0 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.review-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.review-form-title {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.review-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.review-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-form-field label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-form-field input,
.review-form-field select {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.review-form-field input:focus,
.review-form-field select:focus {
  outline: none;
  border-color: var(--green-1);
}

.review-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.review-from-active {
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text);
}

.review-from-active select {
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.review-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-header-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.review-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.review-comparison-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.review-comparison-header {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.review-comparison-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: 0;
}

.review-comparison-table > div {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.review-comparison-table > div:nth-child(-n+4) {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.01);
}

.review-comparison-table .col-metric { color: var(--text); }
.review-comparison-table .col-original { font-family: var(--font-mono); color: var(--text-dim); }
.review-comparison-table .col-current { font-family: var(--font-mono); color: var(--text); }
.review-comparison-table .col-delta { font-family: var(--font-mono); font-size: 11px; }

.review-verdict {
  border-radius: var(--radius);
  padding: 20px 24px;
  border-width: 1px;
  border-style: solid;
}

.review-verdict.green {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.3);
}

.review-verdict.yellow {
  background: rgba(234, 179, 8, 0.06);
  border-color: rgba(234, 179, 8, 0.3);
}

.review-verdict.orange {
  background: rgba(249, 115, 22, 0.06);
  border-color: rgba(249, 115, 22, 0.3);
}

.review-verdict.red {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}

.review-verdict-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.review-verdict.green .review-verdict-title { color: var(--green-1); }
.review-verdict.yellow .review-verdict-title { color: var(--yellow); }
.review-verdict.orange .review-verdict-title { color: #f97316; }
.review-verdict.red .review-verdict-title { color: var(--red); }

.review-verdict-action {
  font-size: 14px;
  color: var(--text);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.review-verdict-action-label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.review-what-changed {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.review-what-changed li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.review-what-changed li:last-child { border-bottom: none; }
.review-what-changed li:before {
  content: "• ";
  color: var(--text-muted);
  margin-right: 4px;
}

.review-plain-english {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.review-plain-english-label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* ---------- MODAL ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 8px;
}

.modal-error.hidden { display: none; }

.form-row {
  display: flex;
  gap: 12px;
}

.form-row .review-form-field {
  flex: 1;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* ---------- CLOSED TRADES TAB ---------- */
.closed-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.closed-empty-detail {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.analytics-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.analytics-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.analytics-value.large {
  font-size: 26px;
}

.analytics-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.analytics-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}

.analytics-section-header {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.analytics-section-body {
  padding: 16px;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.breakdown-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

.breakdown-table td {
  padding: 6px 8px;
  font-family: var(--font-mono);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.breakdown-table tr:last-child td {
  border-bottom: none;
}

.breakdown-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.closed-table-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.closed-table {
  width: 100%;
  border-collapse: collapse;
}

.closed-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.closed-table th.numeric { text-align: right; }

.closed-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.closed-table td.text { font-family: var(--font-sans); }
.closed-table td.numeric { text-align: right; }

.closed-table tr {
  cursor: pointer;
  transition: background 0.1s ease;
}

.closed-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.closed-table tr:last-child td {
  border-bottom: none;
}

.exit-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exit-badge.target_hit {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: var(--green-1);
}

.exit-badge.stop_hit {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: var(--red);
}

.exit-badge.time_stop,
.exit-badge.setup_failed {
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.28);
  color: var(--yellow);
}

.exit-badge.manual,
.exit-badge.trailing_stop {
  background: rgba(107, 118, 130, 0.14);
  border: 1px solid rgba(107, 118, 130, 0.28);
  color: var(--text-muted);
}

/* Trade detail modal styles - larger modal */
.modal.modal-large {
  max-width: 800px;
}

.detail-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-field-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.adjustment-row {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 0;
  color: var(--text-dim);
}

/* "Retrospective Mode" callout for closed trades in Review tab */
.review-retrospective-banner {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text);
}

.review-retrospective-banner-title {
  font-weight: 600;
  color: var(--green-1);
  margin-bottom: 4px;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* ============================================================================
   INSIDER CLUSTERS TAB
   ============================================================================ */
.insider-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 4px 0 14px; flex-wrap: wrap;
}
.insider-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.ins-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 10px; }
.ins-dot-green { background: var(--green-1); }
.ins-dot-yellow { background: var(--yellow-1); }
.insider-hint { font-size: 12px; color: var(--text-dim); max-width: 540px; }

.insider-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--neutral);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.insider-card.ins-green  { border-left-color: var(--green-1); }
.insider-card.ins-yellow { border-left-color: var(--yellow-1); }
.insider-card.ins-red    { border-left-color: var(--red); }

.insider-card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; cursor: pointer; user-select: none;
}
.insider-card-head:hover { background: var(--bg-row-hover); }

.ins-rank-score {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--text);
}
.ins-green  .ins-rank-score { color: var(--green-2); border-color: var(--green-1); }
.ins-yellow .ins-rank-score { color: var(--yellow-2); border-color: var(--yellow-1); }

.ins-main { flex: 1 1 auto; min-width: 0; }
.ins-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-ticker { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); }
.ins-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: var(--radius-sm); }
.ins-label-green  { background: rgba(34,197,94,0.15); color: var(--green-2); }
.ins-label-yellow { background: rgba(234,179,8,0.15); color: var(--yellow-2); }
.ins-label-red    { background: rgba(239,68,68,0.15); color: var(--red); }
.ins-tag { font-size: 10px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-row-hover); color: var(--text-muted); }
.ins-tag-csuite { color: var(--brand-blue-light); }
.ins-company { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ins-entry-line { margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.ins-entry-avg { font-family: var(--font-mono); color: var(--text-muted); }
.ins-entry-arrow { color: var(--text-dim); }
.ins-entry-cur { font-family: var(--font-mono); color: var(--text); }
.ins-entry-diff { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: var(--radius-sm); }
.ins-above { background: rgba(239,68,68,0.12); color: #fca5a5; }   /* current ABOVE insider avg = chasing */
.ins-below { background: rgba(34,197,94,0.12); color: var(--green-2); } /* current BELOW = buying under insiders */
.ins-at    { background: var(--bg-row-hover); color: var(--text-muted); }
.ins-na    { color: var(--text-dim); font-size: 11px; }

.ins-stats { flex: 0 0 auto; display: flex; gap: 18px; }
.ins-stat { display: flex; flex-direction: column; align-items: flex-end; }
.ins-stat-val { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.ins-stat-lbl { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.ins-date { font-size: 12px; }

.ins-expand-chevron { flex: 0 0 auto; color: var(--text-dim); transition: transform 0.15s; }
.insider-card.expanded .ins-expand-chevron { transform: rotate(180deg); }

.insider-card-body { display: none; padding: 0 14px 14px 66px; }
.insider-card.expanded .insider-card-body { display: block; }

.ins-sub-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin: 12px 0 6px; }
.ins-factor { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12px; }
.ins-factor-on .ins-factor-name { color: var(--text); }
.ins-factor-off .ins-factor-name { color: var(--text-dim); }
.ins-factor-yes { color: var(--green-1); flex: 0 0 12px; }
.ins-factor-no { color: var(--text-dim); flex: 0 0 12px; }
.ins-factor-note { color: var(--text-muted); font-size: 11px; font-style: italic; }

.ins-buys-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ins-buys-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.ins-buys-table td { padding: 5px 8px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border); }
.ins-buys-table .right { text-align: right; }
.ins-role { color: var(--text-muted); font-size: 11px; }
.ins-dot-neutral { background: var(--neutral); }
.ins-label-neutral, .ins-label-ipo { background: var(--bg-row-hover); color: var(--text-muted); }
.insider-card.ins-neutral, .insider-card.ins-ipo { border-left-color: var(--neutral); }

/* Insider tab — Run SEC Scan controls */
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.insider-scan-controls { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.insider-scan-status { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); max-width: 320px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-insider-scan:disabled { opacity: 0.6; cursor: default; }

/* Insider SEC scan — progress bar */
.insider-scan-progress { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.insider-scan-progress.hidden { display: none; }
.insider-scan-phase { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.insider-scan-bar { height: 6px; background: var(--bg-row-hover); border-radius: 3px; overflow: hidden; position: relative; }
.insider-scan-bar-fill { height: 100%; background: var(--brand-blue-light); border-radius: 3px; width: 0%; transition: width 0.4s ease; }
/* Indeterminate "running dot" for phases that report no count */
.insider-scan-bar-fill.indeterminate {
  width: 40% !important;
  position: absolute;
  animation: insScanSlide 1.1s ease-in-out infinite;
  transition: none;
}
@keyframes insScanSlide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ============================================================================
   BIOTECH SPIKE TAB
   ============================================================================ */
.biospike-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 12px; color: var(--text-muted); }
.bs-legend-item { display: flex; align-items: center; gap: 6px; }
.bs-col-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); }
.bs-tag-setup { background: rgba(59,130,246,0.15); color: var(--brand-blue-light); }
.bs-tag-cat { background: rgba(124,77,221,0.15); color: #b9a7f0; }
.bs-tag-verdict { background: rgba(234,179,8,0.15); color: var(--yellow-2); }
.bs-legend-hint { color: var(--text-dim); flex: 1 1 280px; min-width: 220px; }

.bs-card { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--neutral); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.bs-card-trap { border-left-color: var(--red); }
.bs-card-head { display: flex; align-items: center; gap: 16px; padding: 12px 14px; cursor: pointer; user-select: none; }
.bs-card-head:hover { background: var(--bg-row-hover); }

.bs-ticker-block { flex: 0 0 150px; display: flex; flex-direction: column; gap: 2px; }
.bs-ticker { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); }
.bs-price { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.bs-company { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bs-cols { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.bs-col { display: flex; flex-direction: column; gap: 3px; padding: 0 8px; border-left: 1px solid var(--border); }
.bs-col:first-child { border-left: none; }
.bs-col-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }

.bs-score { font-family: var(--font-mono); font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.bs-score.bs-strong { color: var(--green-2); }
.bs-score.bs-good { color: var(--yellow-2); }
.bs-score.bs-watch { color: var(--text-muted); }
.bs-score-grade { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.bs-signals { display: flex; flex-direction: column; gap: 1px; }
.bs-sig { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.bs-yes { color: var(--green-1); }
.bs-no { color: var(--text-dim); }

.bs-days { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.bs-cat-near { color: var(--green-2); }
.bs-cat-far { color: var(--text-muted); }
.bs-cat-detail { font-size: 11px; color: var(--text-muted); }
.bs-cat-drug { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bs-verdict { font-size: 14px; font-weight: 500; }
.bs-verdict-clean { color: var(--green-2); }
.bs-verdict-mixed { color: var(--yellow-2); }
.bs-verdict-trap { color: var(--red); }
.bs-skep { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.bs-skep-green { color: var(--green-1); }
.bs-skep-yellow { color: var(--yellow-1); }
.bs-skep-red { color: var(--red); }
.bs-flags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.bs-flag { font-size: 9px; padding: 1px 5px; border-radius: var(--radius-sm); background: rgba(239,68,68,0.12); color: #fca5a5; }

.bs-missing { font-size: 12px; color: var(--text-dim); font-style: italic; }
.bs-missing-hint { font-size: 10px; color: var(--text-dim); }

.bs-expand-chevron { flex: 0 0 auto; color: var(--text-dim); transition: transform 0.15s; }
.bs-card.expanded .bs-expand-chevron { transform: rotate(180deg); }

.bs-trap-banner { background: rgba(239,68,68,0.1); border-top: 1px solid rgba(239,68,68,0.3); color: #fca5a5; font-size: 12px; padding: 8px 14px; }

.bs-card-body { display: none; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.bs-card.expanded .bs-card-body { display: block; }
.bs-headline { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.bs-headline-label { color: var(--text-dim); }
.bs-detail-row { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bs-detail-row span { color: var(--text-dim); }

/* Biotech Spike — verified article link */
.bs-article { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.bs-article-link { color: var(--brand-blue-light); text-decoration: none; }
.bs-article-link:hover { text-decoration: underline; }

/* ============================================================================
   OPTIONS OVERLAY (VCP detail)
   ============================================================================ */
.vcp-options-section { margin-top: 18px; }
.options-overlay-intro { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; max-width: 760px; }
.options-overlay-btn { margin-bottom: 10px; }
.options-loading, .options-empty, .options-error { font-size: 12px; padding: 10px 12px; border-radius: var(--radius); margin-top: 6px; }
.options-loading { color: var(--text-muted); background: var(--bg-row-hover); }
.options-empty { color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); line-height: 1.5; }
.options-error { color: #fca5a5; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); }
.options-catalyst-note { font-size: 12px; color: var(--yellow-2); background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.25); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 10px; line-height: 1.5; }
.options-result-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.options-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.options-table th { text-align: left; color: var(--text-dim); font-weight: 500; padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.options-table th.right, .options-table td.right { text-align: right; }
.options-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
.options-table .mono { font-family: var(--font-mono); }
.opt-ev-pos { color: var(--green-2); }
.opt-ev-neg { color: var(--red); }
.opt-score { color: var(--brand-blue-light); font-weight: 600; }
.options-caveats { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 10px; max-width: 760px; }

/* ============================================================================
   CATALYST MANAGER (Biotech Spike — user-added/extracted PDUFA dates)
   ============================================================================ */
.catalyst-manager { margin: 12px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.catalyst-manager-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; color: var(--text); padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 500; }
.catalyst-manager-toggle:hover { background: var(--bg-row-hover); }
.catalyst-manager-hint { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.catalyst-manager-body { padding: 14px; border-top: 1px solid var(--border); }
.catalyst-manager-intro { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; max-width: 720px; }
.catalyst-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.catalyst-input { background: var(--bg-input, var(--bg)); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 7px 9px; font-size: 12px; }
.catalyst-input { width: 110px; }
.catalyst-input-wide { width: 180px; flex: 1; min-width: 140px; }
.catalyst-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.catalyst-extract-result { font-size: 12px; color: var(--brand-blue-light); }
.catalyst-list { display: flex; flex-direction: column; gap: 5px; }
.catalyst-loading, .catalyst-empty { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.catalyst-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border-subtle, rgba(255,255,255,0.05)); border-radius: 5px; font-size: 12px; }
.catalyst-row-ticker { font-weight: 600; font-family: var(--font-mono); min-width: 52px; }
.catalyst-row-date { font-family: var(--font-mono); color: var(--text-muted); min-width: 150px; }
.catalyst-row-days { color: var(--text-dim); }
.catalyst-src { font-size: 10px; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .03em; }
.catalyst-src-manual { background: rgba(55,138,221,0.15); color: var(--brand-blue-light); }
.catalyst-src-extracted { background: rgba(34,197,94,0.13); color: var(--green-2); }
.catalyst-row-detail { color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalyst-row-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.catalyst-row-del:hover { color: var(--red); }
.catalyst-src-harvested { background: rgba(168,85,247,0.15); color: #c084fc; }

/* VCP main scan table — center all header text and column data for a clean,
   consistent look (overrides the default left/right alignment for this table
   only; other tables keep their alignment). */
.vcp-main-table th,
.vcp-main-table td {
  text-align: center;
  vertical-align: middle;
}
/* Keep the Ticker column left-aligned (reads better as a label at the row start) */
.vcp-main-table th:first-child,
.vcp-main-table td:first-child {
  text-align: left;
}

/* Grade cell — keep the NUMBER centered in the column whether or not the ⚡
   explosive tag is present. The number is the centered anchor; the bolt hangs
   to its right (absolutely positioned) so it never pushes the number off-center.
   This makes every grade number line up vertically down the column. */
.vcp-main-table .grade-cell { text-align: center; }
.grade-num {
  position: relative;
  display: inline-block;
}
.grade-bolt {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 3px;
  font-size: 0.9em;
}

/* Congress table: center the win-rate column HEADERS (Win Rate Disc/Txn 90d/30d)
   so the longer labels sit balanced in the column rather than hugging the right
   edge. Data cells stay right-aligned (correct for numeric figures). */
.congress-table thead th.cong-wr { text-align: center; }