/* ==================== RESET & BASE ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: #0f1117;
  color: #e2e8f0;
  line-height: 1.6;
}

/* ==================== LAYOUT ==================== */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
  width: 240px;
  min-width: 240px;
  background: #1a1f36;
  border-right: 1px solid #2d3348;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-bottom: 1px solid #2d3348;
}
.sidebar-header h1 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.logo-icon {
  flex-shrink: 0;
}
.nav-menu {
  list-style: none;
  padding: 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #94a3b8;
  transition: all 0.15s;
}
.nav-item:hover {
  background: #252b42;
  color: #cbd5e1;
}
.nav-item.active {
  background: #0077b6;
  color: #fff;
}
.nav-item svg { flex-shrink: 0; }

/* ==================== MAIN CONTENT ==================== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}
.view { display: none; }
.view.active { display: block; }
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.view-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.view-desc {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 20px;
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: #0077b6;
  color: #fff;
}
.btn-primary:hover { background: #0096c7; }
.btn-primary:disabled {
  background: #334155;
  color: #64748b;
  cursor: not-allowed;
}
.btn-secondary {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
}
.btn-secondary:hover { background: #334155; }
.btn-danger {
  background: #991b1b;
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; }

/* ==================== INPUTS ==================== */
.input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}
.input-field {
  background: #1e2230;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 9px 14px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  flex: 1;
  min-width: 0;
}
.input-field:focus { border-color: #0077b6; }
.input-field::placeholder { color: #4a5568; }
.select-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ==================== PROGRESS ==================== */
.progress-container { margin-bottom: 20px; }
.progress-bar {
  height: 8px;
  background: #1e2230;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}
.progress-fill.indeterminate {
  width: 30%;
  animation: indeterminate 1.5s infinite ease-in-out;
}
@keyframes indeterminate {
  0% { margin-left: 0; }
  50% { margin-left: 70%; }
  100% { margin-left: 0; }
}
.progress-text {
  font-size: 13px;
  color: #94a3b8;
}

/* ==================== LOADING SPINNER ==================== */
.loading-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: #94a3b8;
  font-size: 14px;
}
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #334155;
  border-top-color: #00b4d8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== CARDS ==================== */
.card {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* ==================== BADGES ==================== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-green { background: #065f46; color: #34d399; }
.badge-yellow { background: #78350f; color: #fbbf24; }
.badge-red { background: #7f1d1d; color: #f87171; }
.badge-blue { background: #1e3a5f; color: #60a5fa; }
.badge-gray { background: #334155; color: #94a3b8; }

/* ==================== TABLES ==================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  background: #151822;
  color: #94a3b8;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #2d3348;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: #00b4d8; }
.data-table th .sort-arrow { font-size: 0.75em; margin-left: 3px; color: #60a5fa; }
.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #1e2230;
  white-space: nowrap;
}
.data-table tbody tr:hover { background: #1a1f36; }
.data-table tbody tr:nth-child(even) { background: #151822; }
.data-table tbody tr:nth-child(even):hover { background: #1a1f36; }
.data-table tbody tr.row-selected {
  background: rgba(99, 102, 241, 0.25) !important;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
}
.data-table tbody tr.row-selected:hover {
  background: rgba(99, 102, 241, 0.35) !important;
}
.table-wrapper {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #2d3348;
}

/* ==================== STAT PANELS ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-box {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value.positive { color: #34d399; }
.stat-value.negative { color: #f87171; }

/* ==================== PATTERN CARDS ==================== */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.pattern-card {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 18px;
}
.pattern-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.pattern-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
}
.pattern-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.pattern-stat-label { color: #64748b; }
.pattern-stat-value { color: #cbd5e1; text-align: right; font-weight: 500; }

/* ==================== TABS ==================== */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #2d3348;
  padding-bottom: 0;
}
.tab {
  padding: 10px 20px;
  background: none;
  border: none;
  color: #64748b;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.tab:hover { color: #cbd5e1; }
.tab.active {
  color: #00b4d8;
  border-bottom-color: #00b4d8;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ==================== DASHBOARD ==================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.dash-card {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.dash-card:hover {
  border-color: #0077b6;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 119, 182, 0.15);
}
.dash-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.dash-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.dash-card p {
  font-size: 13px;
  color: #64748b;
}

/* ==================== SETTINGS ==================== */
.settings-grid {
  display: grid;
  gap: 16px;
  max-width: 700px;
}
.settings-section {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 20px;
}
.settings-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.settings-key { color: #94a3b8; }
.settings-val { color: #e2e8f0; font-weight: 500; }

/* ==================== SCORE COLORS ==================== */
.score-high { color: #34d399; }
.score-mid { color: #fbbf24; }
.score-low { color: #f87171; }
.score-bar {
  height: 6px;
  background: #151822;
  border-radius: 3px;
  overflow: hidden;
  width: 60px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.score-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* ==================== VERDICT PANELS ==================== */
.verdict-panel {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.verdict-positive { background: #064e3b; color: #6ee7b7; border: 1px solid #065f46; }
.verdict-negative { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.verdict-neutral { background: #1c1917; color: #fde68a; border: 1px solid #78350f; }

/* ==================== CHART ==================== */
.chart-container {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ==================== PLAYBOOK ==================== */
.playbook-summary {
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #94a3b8;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #4a5568;
}
.empty-state h3 {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 8px;
}

/* ==================== RECOMMENDER ==================== */

/* Phase indicators */
.rec-phases {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 16px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
}
.rec-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}
.rec-phase-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #4a5568;
  transition: all 0.3s;
}
.rec-phase.active .rec-phase-dot {
  background: #0077b6;
  border-color: #00b4d8;
  box-shadow: 0 0 12px rgba(0, 180, 216, 0.4);
  animation: phasePulse 1.5s ease-in-out infinite;
}
.rec-phase.completed .rec-phase-dot {
  background: #065f46;
  border-color: #34d399;
}
@keyframes phasePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 180, 216, 0.3); }
  50% { box-shadow: 0 0 18px rgba(0, 180, 216, 0.6); }
}
.rec-phase-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rec-phase.active .rec-phase-label { color: #00b4d8; }
.rec-phase.completed .rec-phase-label { color: #34d399; }
.rec-phase-connector {
  width: 40px;
  height: 2px;
  background: #334155;
  margin-bottom: 24px;
}

/* Summary bar */
.rec-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
}
.rec-summary-count {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.rec-summary-note {
  font-size: 13px;
  color: #64748b;
}

/* Card grid */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.rec-card {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 18px;
  border-top: 3px solid #334155;
  display: flex;
  flex-direction: column;
}
.rec-card.rec-bullish { border-top-color: #34d399; }
.rec-card.rec-bearish { border-top-color: #f87171; }
.rec-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.rec-rank {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  min-width: 28px;
}
.rec-ticker {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.rec-confidence {
  margin-left: auto;
  text-align: right;
}
.rec-confidence-value {
  font-size: 20px;
  font-weight: 700;
}
.rec-confidence-label {
  display: block;
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contract line */
.rec-contract {
  background: #151822;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e2e8f0;
  margin-bottom: 10px;
}
.rec-contract strong { color: #fff; }
.rec-contract .rec-spread {
  font-size: 11px;
  color: #64748b;
  margin-left: 4px;
}

/* Greeks row */
.rec-greeks {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.rec-greek {
  flex: 1;
  text-align: center;
  background: #151822;
  border-radius: 4px;
  padding: 6px 4px;
}
.rec-greek-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rec-greek-value {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
}

/* Metrics grid */
.rec-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin-bottom: 10px;
  font-size: 12px;
}
.rec-metric {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.rec-metric-label { color: #64748b; }
.rec-metric-value { color: #cbd5e1; font-weight: 500; }

/* Pattern badge */
.rec-pattern-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.rec-pattern-name { color: #60a5fa; font-weight: 600; }
.rec-pattern-stat { color: #94a3b8; }

/* Rationale */
.rec-rationale {
  background: #151822;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  border-left: 3px solid #0077b6;
  margin-top: auto;
}
.rec-view-chain {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 0;
  background: linear-gradient(135deg, #0077b6, #00a8e8);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s;
}
.rec-view-chain:hover {
  background: linear-gradient(135deg, #0096d6, #00c0ff);
  box-shadow: 0 4px 16px rgba(0, 119, 182, 0.4);
  transform: translateY(-1px);
}
.rec-load-more {
  text-align: center;
  padding: 20px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .sidebar { width: 60px; min-width: 60px; }
  .sidebar-header h1, .nav-item span { display: none; }
  .nav-item { justify-content: center; padding: 10px; }
  .main-content { padding: 16px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .pattern-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rec-grid { grid-template-columns: 1fr; }
  .rec-metrics { grid-template-columns: 1fr; }
  .rec-summary { flex-direction: column; gap: 4px; }
  .rec-phases { flex-wrap: wrap; gap: 8px; }
  .rec-phase-connector { width: 20px; margin-bottom: 0; }
  .sort-toggles { flex-wrap: wrap; }
  .pagination-controls { gap: 10px; }
}

/* ==================== SORT TOGGLES ==================== */
.sort-toggles {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.sort-toggle.active {
  background: #0077b6;
  color: #fff;
  border-color: #0077b6;
}

/* ==================== PAGINATION ==================== */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 0;
}
.pagination-info {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
}
.pagination-controls .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==================== PATTERN REC ==================== */
.patrec-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
}
.patrec-summary .rec-summary-count {
  font-weight: 600;
  color: #e2e8f0;
}
.patrec-summary .rec-summary-note {
  color: #94a3b8;
  font-size: 13px;
}
.clickable-row {
  cursor: pointer;
  transition: background 0.15s;
}
.clickable-row:hover {
  background: #1e3a5f !important;
}

/* ==================== PATTERN REC STATUS & HEADER ==================== */
.view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.view-header-actions .select-field {
  width: auto;
  min-width: 120px;
}
.patrec-status {
  padding: 10px 16px;
  margin-bottom: 14px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  font-size: 13px;
  color: #94a3b8;
}

/* ==================== YAHOO OPTIONS MONITOR ==================== */

.monitor-info-bar {
  display: flex;
  /* MUST wrap. This was a single non-wrapping row, and adding the realized-vol
     group (the longest item on the bar) left no slack — on a narrower window the
     tail was being squeezed off. Generous column gap plus a divider so the
     readings stay visually separate rather than running together. */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding: 10px 18px;
  margin-bottom: 16px;
  background: #1a2332;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  font-size: 13px;
  color: #94a3b8;
}
.monitor-info-bar > span {
  white-space: nowrap;
  padding: 0 20px;
  border-left: 1px solid #2b3d55;
}
/* No leading divider on the first item, nor on whichever item starts a
   wrapped line. */
.monitor-info-bar > span:first-child {
  padding-left: 0;
  border-left: none;
}
.monitor-info-bar strong {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
/* Uniform "dim label, bright value" across every group, so the labels recede
   and the numbers are what you actually land on. */
.monitor-info-bar .om-bar-label {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.monitor-info-bar .om-bar-ticker {
  color: #e2e8f0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The three realized-vol windows. The one the IV − HV column compares against
   gets a PILL rather than an underline — an underline read as a stray accent,
   and it has to be unmistakable now that the HV column itself is gone. */
.monitor-info-bar .om-hv-part { margin-left: 14px; }
.monitor-info-bar .om-hv-win {
  color: #64748b;
  font-size: 11px;
}
.monitor-info-bar .om-hv-active {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 999px;
  padding: 1px 9px;
}
.monitor-info-bar .om-hv-active .om-hv-win { color: #7dd3fc; }
.monitor-info-bar .om-hv-active strong { color: #bae6fd; }

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
}
.auto-refresh-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0077b6;
}

/* Options monitor table.
   HORIZONTAL scrolling only — the wrapper deliberately does NOT cap its height.
   A `max-height: 75vh` + `overflow-y: auto` here put a second scrollbar inside
   the page's own, so the chain read as a window within a window: two scrollbars
   on the right edge, and the table detached from the page it sits on. The table
   now flows with the page and there is exactly one scrollbar (`.main-content`).
   Keep `overflow-x` — the 21-column chain needs it, and it is what the pinned
   Strike column sticks against. Don't reintroduce a height cap. */
.om-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
/* Floating copy of the chain's column header — see syncMonitorFloatHead() in
   app.js for why the header has to live outside .om-table-wrap to pin at all.
   It sits in the page's own scroll flow, so `top: 0` resolves against
   .main-content. `overflow: hidden` both clips it to the visible table width and
   makes it a scroll container, which is what lets its first cell stay pinned
   left in step with the real Strike column. */
.om-float-head {
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: hidden;
  background: #151c28;
}
.om-float-head table { table-layout: fixed; }
.om-float-head th:first-child { z-index: 13; }
/* The real header is hidden only once its copy is confirmed in place (the class
   is added by JS), so a failure degrades to a plain unpinned header. visibility
   rather than display: it still has to size the columns. */
.om-table-wrap.om-head-floated > table > thead { visibility: hidden; }

.om-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.om-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #151c28;
  color: #94a3b8;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  border-bottom: 2px solid #1e3a5f;
  text-align: center;
  cursor: default;
}
.om-table th[data-tooltip] {
  cursor: help;
  text-decoration: underline dotted #475569;
}

/* Custom tooltip popup */
.om-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 340px;
  padding: 14px 18px;
  background: #131a27;
  border: 1px solid #2d4a6f;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, visibility 0.15s;
  word-wrap: break-word;
}
.om-tooltip.visible {
  visibility: visible;
  opacity: 1;
}
.om-tooltip-title {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
  border-bottom: 1px solid #253348;
  padding-bottom: 6px;
}
.om-tooltip-desc {
  color: #94a3b8;
  margin-bottom: 8px;
}
.om-tooltip-colors {
  background: rgba(0, 119, 182, 0.12);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 11px;
  color: #e2e8f0;
  margin-bottom: 8px;
  border-left: 3px solid #0077b6;
  line-height: 1.7;
}
.om-tooltip-insight {
  font-style: italic;
  color: #64748b;
  font-size: 11px;
  border-top: 1px solid #1e2a3a;
  padding-top: 6px;
}
.om-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #1e2a3a;
  text-align: center;
  color: #e2e8f0;
}
/* ---- Row banding --------------------------------------------------------
   Alternating stripes, kept SEPARATE per moneyness band: in-the-money rows
   alternate two shades of blue, out-of-the-money rows alternate transparent
   with a faint grey. So the stripes make it easy to track a value across 20
   columns, while the blue/grey split still tells you at a glance where the
   money line is. The `row-alt` class is assigned in JS, counted within each
   band — see renderMonitorTable.                                            */
.om-table .row-otm            { background: transparent; }
.om-table .row-otm.row-alt    { background: rgba(255, 255, 255, 0.045); }
.om-table .row-itm            { background: rgba(0, 119, 182, 0.20); }
.om-table .row-itm.row-alt    { background: rgba(0, 119, 182, 0.32); }

/* Hover has to be legible over all four, so each gets its own step up rather
   than one translucent overlay that would vanish against the blues. */
.om-table .row-otm:hover         { background: rgba(255, 255, 255, 0.09); }
.om-table .row-otm.row-alt:hover { background: rgba(255, 255, 255, 0.12); }
.om-table .row-itm:hover         { background: rgba(0, 119, 182, 0.33); }
.om-table .row-itm.row-alt:hover { background: rgba(0, 119, 182, 0.45); }

/* Highlighted rows. .row-highlight = deep-linked from another tab;
   .row-compare = ticked into the comparison table. Same look on purpose —
   both mean "this row is marked", and can stack on any number of rows.

   VIOLET, not yellow. A yellow wash over a dark table reads as mustard, and
   worse, amber already means something here (the `6h` staleness tag), so it
   collided with a signal. Violet is the one hue this table doesn't already
   spend: blue is the ITM band, green/red are the anomaly findings, cyan is a
   live price, amber/red are age. It also matches `.row-selected` elsewhere in
   the app, so "marked row" looks the same everywhere. */
.om-table .row-highlight,
.om-table .row-compare {
  background: rgba(139, 92, 246, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}
.om-table .row-highlight:hover,
.om-table .row-compare:hover {
  background: rgba(139, 92, 246, 0.38) !important;
}
/* NOTE: .cell-green / .cell-yellow / .cell-red were removed along with the last
   of the fixed-threshold colouring. Cells are now coloured only by the
   local-curve engine — see .cell-anom-cheap / .cell-anom-rich / .cell-crowd
   below. Don't reintroduce a generic traffic-light class here; it invites
   absolute cutoffs, which is what made this table unreadable to begin with. */

/* ---- Strike column: pinned -----------------------------------------------
   The chain is 22 columns wide inside a horizontally scrolling wrapper, so
   scrolling right to read OI used to carry the strike off screen — leaving a
   number with no label attached to it. Pinning column 1 fixes that, and makes
   the strike the fixed reference point it actually is. Row-level anomaly marks
   are rendered in this cell precisely because it is always visible.          */
.om-table-chain td.om-strike,
.om-table-chain th:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #101826;
  border-right: 2px solid #334155;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* The header's own sticky rule must win at the top-left corner. */
.om-table-chain th:first-child {
  z-index: 12;
  background: #151c28;
}
/* Row tints are painted by the <tr>, which a sticky cell would otherwise show
   straight through as it slides over the other columns — so the pinned cell
   needs its OWN opaque equivalent of all four band shades, plus their hovers.
   These are the translucent row colours above pre-composited against the panel
   background; if you change one, change its partner. */
.om-table-chain .row-otm td.om-strike            { background: #0f1726; }
.om-table-chain .row-otm.row-alt td.om-strike    { background: #161f30; }
.om-table-chain .row-itm td.om-strike            { background: #0d2a45; }
.om-table-chain .row-itm.row-alt td.om-strike    { background: #113655; }
.om-table-chain .row-otm:hover td.om-strike         { background: #1b2537; }
.om-table-chain .row-otm.row-alt:hover td.om-strike { background: #202a3c; }
.om-table-chain .row-itm:hover td.om-strike         { background: #123a5c; }
.om-table-chain .row-itm.row-alt:hover td.om-strike { background: #16466b; }
/* The pinned Strike cell carries the mark too — and has to, since it is the one
   cell still on screen once you scroll right. Opaque (a sticky cell slides over
   the other columns, so anything translucent shows them through): these are the
   translucent violets above pre-composited against the panel. Slightly stronger
   than the row plus a left accent bar, so the marked strikes are findable by
   running an eye down the pinned column alone.

   ⚠ The `!important` is load-bearing, not lazy. The banding rules above are
   TWO classes deep on the row (`.row-itm.row-alt td.om-strike`) and this one is
   one (`.row-compare td.om-strike`), so on every ALTERNATE row the band won on
   specificity and the strike cell silently kept its blue while the rest of the
   row turned violet — the mark appeared to work on some rows and not others.
   Raising specificity instead would need a selector deeper than every future
   band rule; `!important` states the intent, which is that a marked row wins
   over its banding. The rainbow ladder is `!important` AND later in the file,
   so it still beats this — as it must. */
.om-table-chain .row-highlight td.om-strike,
.om-table-chain .row-compare td.om-strike {
  background: #392e6d !important;
  color: #ede9fe;
  box-shadow: inset 3px 0 0 0 #a78bfa;
}
.om-table-chain .row-highlight:hover td.om-strike,
.om-table-chain .row-compare:hover td.om-strike { background: #463582 !important; }

/* Last is a traded price, not the fixed reference next to it — different
   colour so the two adjacent dollar figures stop reading as one number. */
.om-table .om-last { color: #7dd3fc; font-variant-numeric: tabular-nums; }

/* IV − HV below zero: implied vol under realized, the condition worth hunting.
   Coloured TEXT, not a filled cell — deliberately a lighter visual weight than
   the anomaly fills. This is a LEVEL readout (IV minus one constant), so it can
   legitimately be true for a whole band of strikes at once — eleven consecutive
   rows on a live AAPL chain — whereas the filled findings are capped at five
   because they are meant to be rare. Filled = "a rare finding about this
   strike"; coloured text = "this level happens to be favourable here". */
.om-table .om-ivhv-cheap {
  color: #4ade80;
  font-weight: 600;
}

/* Age of the last print. Not an anomaly marker: a stale Last is a caveat, not
   an opportunity, so it stays visually quiet. */
/* Fixed slot width, so every Last cell is "number + a constant-width tag" and
   the figures line up down the column. Without it the cell centres a variable-
   width unit: `0.00` with no tag sat visibly off from `11.70 live` beside it,
   and `3d` sat off from `45m`. The floor covers the widest label the formatter
   can emit — measured: live/18h/3d/45d = 26px, 45m = 28px, 365d = 32px. */
.om-table .om-age {
  display: inline-block;
  margin-left: 4px;
  min-width: 32px;
  text-align: center;
  font-size: 10px;
  padding: 0 3px;
  border-radius: 3px;
  cursor: help;
  vertical-align: middle;
}
/* No timestamp: holds the slot open and paints nothing. */
.om-table .om-age-none { background: none; cursor: default; }
/* Cyan for "live", deliberately NOT green: green in this table already means
   favourable value, and freshness is a data-quality fact, not a verdict.
   The progression cyan -> grey -> amber -> red reads as newest to oldest. */
.om-table .om-age-live  { color: #38bdf8; background: rgba(56, 189, 248, 0.13); }
.om-table .om-age-fresh { color: #94a3b8; background: rgba(148, 163, 184, 0.15); }
.om-table .om-age-warn  { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.om-table .om-age-stale { color: #f87171; background: rgba(248, 113, 113, 0.18); }

/* ---- Anomaly cells ------------------------------------------------------
   Findings are painted on the CELL that is actually odd rather than on a
   symbol, so the colour points at the number it is talking about. Every
   flagged cell carries data-anomaly-tooltip and the delegated handler keys on
   that attribute, so hovering any of them explains the finding.

   Three distinct looks, because they mean three different things:
     cell-anom-cheap  vivid green   a real finding: cheap for its spot
     cell-anom-rich   red           a real finding: expensive for its spot
     cell-crowd       muted green   a LANDMARK, not a finding
     cell-ladder      rainbow       a no-arbitrage violation                 */

/* Discoverability: a symbol invites a hover, a coloured cell does not, so
   flagged cells get a help cursor and a faint ring to say "there is more
   here". Applied to every flagged type at once. */
.om-table td[data-anomaly-tooltip] {
  cursor: help;
  position: relative;
}

/* These three are OPAQUE on purpose. They used to be translucent, which meant a
   finding composited differently depending on the row it landed on — the same
   green reading as teal on a blue in-the-money row and as green on a grey
   out-of-the-money one. A signal has to look identical wherever it appears, so
   these are the former translucent values pre-composited against the panel
   background and pinned. */

/* A real finding, favourable. */
.om-table .cell-anom-cheap {
  background: #1a7747;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.9);
}
/* A real finding, unfavourable. */
.om-table .cell-anom-rich {
  background: #84444e;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.85);
}
/* Where the crowd is. Deliberately a DIFFERENT, muted green from the finding
   green: the top-3 open-interest cells are present on every chain, every day,
   so a vivid green here would permanently mean "normal" and dilute the colour
   that is supposed to mean "look at this". Static, no ring — it is furniture. */
.om-table .cell-crowd {
  background: #20453e;
  color: #d1fae5;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30);
}

/* Broken price ladder. Rare (zero on every live chain tested), urgent, and
   categorically different from "this is a good price" — so it gets a moving
   rainbow that cannot be confused with anything else on the screen. Painted on
   the pinned Strike cell, which needs !important to beat the sticky-column
   background rules above. */
.om-table-chain td.om-strike.cell-ladder,
.om-table-chain .row-itm td.om-strike.cell-ladder,
.om-table-chain tr:hover td.om-strike.cell-ladder {
  background: linear-gradient(
    100deg,
    #f87171, #fbbf24, #a3e635, #34d399, #38bdf8, #a78bfa, #f472b6, #f87171
  ) !important;
  background-size: 300% 100% !important;
  animation: omRainbow 4s linear infinite;
  color: #0b1220;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
@keyframes omRainbow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}
/* Respect a user's reduced-motion preference — the gradient still reads as a
   rainbow standing still. */
@media (prefers-reduced-motion: reduce) {
  .om-table-chain td.om-strike.cell-ladder { animation: none; }
}

/* Pick for me modal */
.pfm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.pfm-modal {
  position: relative;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 22px 26px;
  width: min(760px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pfm-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pfm-close:hover {
  background: #1e293b;
  color: #fff;
  border-color: #64748b;
}
.pfm-modal h3 {
  margin: 0 0 14px;
  font-size: 17px;
  color: #e2e8f0;
}
.pfm-modal .pfm-desc {
  color: #94a3b8;
  font-size: 13px;
  margin-bottom: 14px;
}
.pfm-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.pfm-row label {
  font-size: 12px;
  color: #94a3b8;
  margin-right: 6px;
}
.pfm-row select,
.pfm-row input[type="text"] {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 180px;
}
.pfm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.pfm-pick {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pfm-pick-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pfm-pick-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pfm-pick-badge.near    { background: #1e40af; color: #dbeafe; }
.pfm-pick-badge.medium  { background: #065f46; color: #d1fae5; }
.pfm-pick-badge.leap    { background: #6b21a8; color: #e9d5ff; }
.pfm-pick-badge.nopick  { background: #4b5563; color: #e5e7eb; }
.pfm-pick.pfm-nopick    { opacity: 0.85; border-style: dashed; }
.pfm-pts                { font-weight: 700; padding: 0 4px; }
.pfm-pts.pos            { color: #34d399; }
.pfm-pts.neg            { color: #f87171; }
.pfm-breakdown          { margin: 8px 0 4px; color: #94a3b8; font-size: 12px; }
.pfm-breakdown summary  { cursor: pointer; padding: 4px 0; color: #7dd3fc; }
.pfm-breakdown summary:hover { color: #bae6fd; }
.pfm-steps              { margin-top: 16px; color: #94a3b8; font-size: 12px; }
.pfm-steps summary      { cursor: pointer; padding: 6px 0; color: #cbd5e1; font-weight: 600; }
.pfm-steps ol           { padding-left: 22px; margin: 8px 0; }
.pfm-steps li           { margin-bottom: 10px; color: #cbd5e1; }
.pfm-step-answer        { color: #94a3b8; margin-top: 2px; font-weight: 400; line-height: 1.45; }
.pfm-ctx {
  background: #0b1424;
  border: 1px solid #1e293b;
  border-left: 3px solid #0ea5e9;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.pfm-ctx-head {
  font-weight: 700;
  font-size: 13px;
  color: #e2e8f0;
  margin-bottom: 8px;
}
.pfm-ctx-row {
  color: #cbd5e1;
  line-height: 1.6;
}
.pfm-ctx-row span { color: #94a3b8; }
.pfm-help {
  border-bottom: 1px dotted #64748b;
  cursor: help;
  color: #94a3b8;
}
.pfm-help:hover { color: #cbd5e1; border-bottom-color: #94a3b8; }
.pfm-ctx-muted { color: #94a3b8; font-style: italic; }
.pfm-ctx-sub {
  margin-top: 6px;
  color: #cbd5e1;
}
.pfm-ctx-sub ul {
  margin: 4px 0 0 18px;
  padding: 0;
}
.pfm-ctx-sub li { margin-bottom: 3px; color: #cbd5e1; }
.pfm-ctx-hint {
  margin-top: 8px;
  color: #38bdf8;
  font-size: 12px;
  font-style: italic;
}
.portfolio-pattern-detail {
  font-size: 12px;
  color: #cbd5e1;
  padding: 4px 0;
  line-height: 1.5;
}
.portfolio-pattern-detail.bearish { color: #fca5a5; }
.portfolio-pattern-detail b { color: #e2e8f0; }
.portfolio-pattern-detail .tone { font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.portfolio-pattern-detail .tone.bullish { background: #065f46; color: #d1fae5; }
.portfolio-pattern-detail .tone.bearish { background: #7f1d1d; color: #fecaca; }
.portfolio-pattern-detail .tone.neutral { background: #374151; color: #e5e7eb; }

.portfolio-exit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.portfolio-exit-grid > div {
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 8px 10px;
}
.portfolio-exit-label { display: block; font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; }
.portfolio-exit-val   { display: block; font-size: 16px; color: #e2e8f0; font-weight: 700; margin-top: 2px; }
.portfolio-exit-val.up   { color: #34d399; }
.portfolio-exit-val.down { color: #f87171; }
.portfolio-exit-note  { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.portfolio-exit-reasons { margin-top: 8px; color: #cbd5e1; font-size: 12px; }

.pfm-dup-warn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #b45309;
  color: #fde68a;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}
.pfm-save-row   { margin-top: 10px; text-align: right; }
.pfm-save-btn   { font-size: 11px; padding: 4px 10px; }

.pfm-saved-head {
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.pfm-saved-table {
  width: 100%;
  font-size: 11px;
  color: #cbd5e1;
  border-collapse: collapse;
}
.pfm-saved-table th, .pfm-saved-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #1e293b;
  text-align: left;
  white-space: nowrap;
}
.pfm-saved-table th {
  color: #94a3b8;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pfm-saved-ts { color: #64748b; font-size: 10px; }
.pfm-runners {
  margin: -6px 0 12px 12px;
  color: #94a3b8;
  font-size: 12px;
}
.pfm-runners summary {
  cursor: pointer;
  padding: 4px 0;
  color: #7dd3fc;
}
.pfm-runners summary:hover { color: #bae6fd; }
.pfm-runners-list { margin-top: 8px; }
.pfm-pick.pfm-runner {
  background: #0b1220;
  border-left: 3px solid #475569;
  opacity: 0.92;
}
.pfm-pick.pfm-runner .pfm-pick-title { font-size: 14px; }
.pfm-pick-head .pfm-score {
  font-size: 12px;
  color: #94a3b8;
}
.pfm-pick-title {
  font-size: 15px;
  color: #e2e8f0;
  font-weight: 600;
}
.pfm-pick-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 14px;
  font-size: 12px;
  color: #cbd5e1;
  margin: 8px 0;
}
.pfm-pick-metrics span b { color: #e2e8f0; }
.pfm-pick-why {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.45;
}
.pfm-pick-why ul {
  margin: 4px 0 0 18px;
  padding: 0;
}
.pfm-pick-why li {
  margin-bottom: 2px;
}
.pfm-loading {
  text-align: center;
  padding: 30px 10px;
  color: #94a3b8;
  font-size: 13px;
}

/* Compare checkbox. Ticked violet, matching the row mark it produces — the tick
   and the highlight are one action, so they should be one colour. */
.om-table .om-check {
  width: 16px;
  height: 16px;
  accent-color: #8b5cf6;
  cursor: pointer;
}

/* Comparison section */
.comparison-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  margin-bottom: 12px;
}
.comparison-header h3 {
  font-size: 16px;
  color: #e2e8f0;
  margin: 0;
}

#monitorComparison .om-table tr {
  background: #1a2332;
}
#monitorComparison .om-table tr:hover {
  background: #1e2a3a;
}

/* ==================== INFORMATION TAB ==================== */
.info-section {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}
.info-section h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.info-section-desc {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 16px;
  line-height: 1.6;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.info-card {
  background: #151822;
  border: 1px solid #2d3348;
  border-radius: 8px;
  padding: 16px;
}
.info-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
}
.info-card p {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

/* ==================== LEAD-LAG UNIVERSE TOGGLES ==================== */
.ll-universe-row {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ll-universe-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ll-universe-label {
  font-size: 0.8em;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ll-toggle-group {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #2d3348;
}
.ll-toggle {
  padding: 6px 14px;
  font-size: 0.85em;
  background: #1a1f36;
  color: #94a3b8;
  border: none;
  border-right: 1px solid #2d3348;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ll-toggle:last-child {
  border-right: none;
}
.ll-toggle:hover {
  background: #1e3a5f;
  color: #fff;
}
.ll-toggle.active {
  background: #8b5cf6;
  color: #fff;
}

/* Checkbox toggle label (used in header actions) */
.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  color: var(--text-secondary);
  user-select: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #2d3348;
  background: #1a1f36;
  transition: all 0.15s;
}
.toggle-label:hover {
  border-color: #8b5cf6;
  color: #fff;
}
.toggle-label input[type="checkbox"] {
  accent-color: #8b5cf6;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.toggle-label input[type="checkbox"]:checked + .toggle-text {
  color: #8b5cf6;
}

/* ==================== STOCK GROUPING (Universal Options Recommender) ==================== */
.rec-stock-group {
  margin-bottom: 2px;
  border: 1px solid #2d3348;
  border-radius: 8px;
  overflow: hidden;
}
.rec-stock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #151822;
  cursor: pointer;
  transition: background 0.15s;
  flex-wrap: wrap;
}
.rec-stock-header:hover { background: #1a1f36; }
.rec-stock-expand { font-size: 11px; color: #60a5fa; min-width: 14px; }
.rec-stock-rank { color: #64748b; font-size: 13px; font-weight: 600; }
.rec-stock-ticker { font-weight: 700; color: #fff; font-size: 15px; }
.rec-stock-price { color: #94a3b8; font-size: 13px; }
.rec-stock-wr { color: #34d399; font-size: 12px; margin-left: auto; }
.rec-stock-count { color: #64748b; font-size: 12px; background: #1e2230; padding: 2px 8px; border-radius: 4px; }
.rec-stock-conf { font-weight: 600; font-size: 13px; }
.rec-stock-options {
  padding: 12px;
  background: #0e1117;
  border-top: 1px solid #2d3348;
}

/* ==================== ENTRY / SELL TIMING PANELS ==================== */
.rec-entry-timing {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid #34d399;
  background: rgba(52, 211, 153, 0.08);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.rec-entry-timing .timing-label { color: #34d399; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rec-sell-timing {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.rec-sell-timing .timing-label { color: #fbbf24; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rec-exit-thresholds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.rec-exit-threshold {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
}
.rec-exit-threshold strong {
  color: #e2e8f0;
  font-size: 12px;
}
.rec-exit-threshold span {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}
.rec-exit-threshold small {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
}

.lead-lag-panel {
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 3px solid #8b5cf6;
  border-radius: 0 8px 8px 0;
  background: rgba(139, 92, 246, 0.08);
}
.lead-lag-label {
  font-size: 11px;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.lead-lag-summary {
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.5;
}
.lead-lag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.portfolio-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.portfolio-metric-card {
  padding: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #2d3348;
  border-radius: 10px;
}
.portfolio-metric-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.portfolio-metric-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
}
.portfolio-metric-note {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}
.portfolio-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
}
.portfolio-section-card {
  padding: 14px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid #2d3348;
  border-radius: 10px;
}
.portfolio-section-title {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
}
.portfolio-section-subtitle {
  margin-top: 4px;
  margin-bottom: 12px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}
.portfolio-rank-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.portfolio-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
}
.portfolio-rank-pill.is-current {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--pill-bg);
  box-shadow: inset 0 0 0 1px var(--pill-bg);
  color: var(--pill-text);
}
.portfolio-rank-score {
  min-width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.portfolio-factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.portfolio-factor-card {
  padding: 12px;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid #334155;
  border-radius: 10px;
}
.portfolio-factor-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.portfolio-factor-head strong {
  color: #e2e8f0;
  font-size: 13px;
}
.portfolio-factor-value {
  margin-top: 8px;
  color: #67e8f9;
  font-size: 13px;
  font-weight: 600;
}
.portfolio-factor-threshold {
  margin-top: 4px;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
}
.portfolio-factor-detail {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}
.portfolio-subsection + .portfolio-subsection {
  margin-top: 12px;
}
.portfolio-subsection-label {
  margin-bottom: 6px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 700;
}
.portfolio-pattern-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portfolio-pattern-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portfolio-note-item {
  padding: 4px 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}
.portfolio-note-empty {
  color: #64748b;
  font-size: 12px;
}

/* Individual Recommender mode toggle */
.ind-rec-mode-btn {
  background: #151822;
  color: #94a3b8;
  border: none;
  transition: all 0.15s;
  cursor: pointer;
}
.ind-rec-mode-btn.active {
  background: #6366f1;
  color: #fff;
}
.ind-rec-mode-btn:hover:not(.active) {
  background: #1a1f36;
  color: #fff;
}

.ind-rec-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.ind-rec-status-top {
  color: #94a3b8;
  font-size: 12px;
}
.ind-rec-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ind-rec-summary-card {
  padding: 12px;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid #2d3348;
  border-radius: 10px;
}
.ind-rec-summary-label {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ind-rec-summary-value {
  margin-top: 6px;
  color: #e2e8f0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.ind-rec-summary-note {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
}
.ind-rec-summary-value.positive,
.ind-rec-scenario-pnl.positive {
  color: #34d399;
}
.ind-rec-summary-value.negative,
.ind-rec-scenario-pnl.negative {
  color: #f87171;
}
.ind-rec-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.ind-rec-component-card {
  padding: 12px;
  background: rgba(2, 6, 23, 0.52);
  border: 1px solid #334155;
  border-radius: 10px;
}
.ind-rec-component-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.ind-rec-component-head strong {
  color: #e2e8f0;
  font-size: 13px;
}
.ind-rec-component-head span {
  color: #67e8f9;
  font-size: 13px;
  font-weight: 700;
}
.ind-rec-component-note {
  margin-top: 8px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}
.ind-rec-card {
  border-top-color: #38bdf8;
}
.ind-rec-thesis-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.ind-rec-thesis-strip span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: #cbd5e1;
  font-size: 12px;
}
.ind-rec-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.ind-rec-score-tile {
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.42);
}
.ind-rec-score-tile span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ind-rec-score-tile strong {
  display: block;
  margin-top: 6px;
  color: #e2e8f0;
  font-size: 20px;
  font-weight: 700;
}
.ind-rec-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ind-rec-scenario-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(2, 6, 23, 0.48);
}
.ind-rec-scenario-card.positive {
  border-color: rgba(52, 211, 153, 0.35);
}
.ind-rec-scenario-card.negative {
  border-color: rgba(248, 113, 113, 0.28);
}
.ind-rec-scenario-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.ind-rec-scenario-head strong {
  color: #e2e8f0;
  font-size: 13px;
}
.ind-rec-scenario-head span {
  color: #94a3b8;
  font-size: 11px;
}
.ind-rec-scenario-move {
  margin-top: 8px;
  color: #67e8f9;
  font-size: 12px;
}
.ind-rec-scenario-pnl {
  margin-top: 4px;
  color: #e2e8f0;
  font-size: 16px;
  font-weight: 700;
}
.ind-rec-scenario-note {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 11px;
}
.ind-rec-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.ind-rec-list-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(2, 6, 23, 0.42);
}
.ind-rec-list-card.positive {
  border-color: rgba(52, 211, 153, 0.35);
}
.ind-rec-list-card.negative {
  border-color: rgba(248, 113, 113, 0.28);
}
.ind-rec-list-title {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ind-rec-list-item {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
  padding: 3px 0;
}
.ind-rec-list-empty {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

/* Responsive: stack vertically on narrow screens */
@media (max-width: 768px) {
  .ll-universe-row { flex-direction: column; gap: 12px; }
  .ind-rec-score-grid,
  .ind-rec-summary-grid,
  .ind-rec-component-grid,
  .ind-rec-scenario-grid,
  .ind-rec-list-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== LOGIN PAGE ==================== */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #0f1117;
}
.login-card {
  background: #1a1f36;
  border: 1px solid #2d3348;
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-logo {
  margin-bottom: 20px;
}
.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.login-subtitle {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 28px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-input {
  width: 100%;
  padding: 12px 16px;
  background: #0f1117;
  border: 1px solid #2d3348;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.login-input:focus {
  border-color: #0077b6;
}
.login-btn {
  padding: 12px;
  background: #0077b6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.login-btn:hover {
  background: #005f8f;
}

/* Pattern help icon (question mark tooltip) */
.pattern-help-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.pattern-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  cursor: help;
  position: relative;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pattern-help-icon:hover {
  background: rgba(103, 232, 249, 0.25);
  color: #67e8f9;
}
.pattern-help-icon:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.6);
  outline-offset: 2px;
}
.pattern-help-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: min(440px, 80vw);
  min-width: 200px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: rgba(2, 6, 23, 0.98);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
  opacity: 0;
  /* display:none (not visibility:hidden) so the hidden tooltip occupies NO
     layout/scroll space. As an absolutely-positioned, visibility:hidden element
     it still added ~237px each to the scroll container's scrollHeight, which gave
     every signal/pattern table a spurious inner vertical scrollbar nested inside
     the page scroll ("window within a window"). */
  display: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pattern-help-tooltip strong {
  display: block;
  margin-bottom: 6px;
  color: #67e8f9;
  font-size: 12px;
}
.pattern-help-tooltip span {
  display: block;
}
.pattern-help-wrap:hover .pattern-help-tooltip,
.pattern-help-wrap:focus-within .pattern-help-tooltip {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Compact "Detail" column trigger — keeps the column narrow so the whole
   Active Signals table fits on screen; full text shows on hover. */
.detail-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.22);
  color: #94a3b8;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: help;
  border: none;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.detail-help-btn:hover {
  background: rgba(103, 232, 249, 0.25);
  color: #67e8f9;
}
.detail-help-btn:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.6);
  outline-offset: 2px;
}
/* Detail tooltip can open near the left edge of the table; let it span wider. */
.detail-help-wrap .pattern-help-tooltip {
  max-width: min(520px, 70vw);
}

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

/* ==================== BLACK-SCHOLES CALCULATOR ==================== */
.bs-card {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.bs-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bs-card-head h3 { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.bs-head-sub { font-size: 12px; font-weight: 400; color: #8b95ad; margin-left: 8px; }
.bs-head-actions { display: flex; align-items: center; gap: 12px; }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* --- call / put toggle --- */
.bs-type-toggle {
  display: inline-flex;
  border: 1px solid #2d3348;
  border-radius: 7px;
  overflow: hidden;
}
.bs-type-btn {
  background: #171b28;
  color: #8b95ad;
  border: none;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bs-type-btn:hover { color: #cbd5e1; }
.bs-type-btn.active { background: #00b4d8; color: #06131c; }

/* --- inputs --- */
.bs-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px 14px;
}
.bs-field { display: flex; flex-direction: column; gap: 5px; }
.bs-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8b95ad;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.bs-field .input-field { width: 100%; }
.bs-hint { font-style: normal; font-weight: 500; color: #64748b; text-transform: none; letter-spacing: 0; }
.bs-suffix-wrap { position: relative; display: block; }
.bs-suffix-wrap .input-field { width: 100%; padding-right: 26px; }
.bs-suffix-wrap i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 12px;
  color: #64748b;
  pointer-events: none;
}
.bs-auto-pill {
  background: #14532d;
  color: #4ade80;
  border: 1px solid #166534;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
}
.bs-auto-pill.manual { background: #3a2a12; color: #fbbf24; border-color: #78350f; }
/* Fields whose value is derived rather than typed carry their explanation in a
   hover box instead of a paragraph under the form — the reasoning is only
   wanted when questioned, and it changes with the inputs. */
.bs-explained { cursor: help; }
.bs-explain-label {
  font-style: normal;
  border-bottom: 1px dotted #5a6480;
}
.bs-explained:hover .bs-explain-label { border-bottom-color: #00b4d8; color: #cbd5e1; }
.bs-context-note { font-size: 12px; color: #8b95ad; align-self: center; }

/* --- output tiles --- */
.bs-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.bs-tile {
  background: #1e2230;
  border: 1px solid #2d3348;
  border-radius: 9px;
  padding: 12px 14px;
}
.bs-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8b95ad;
  margin-bottom: 4px;
}
.bs-tile-value { font-size: 19px; font-weight: 700; color: #f1f5f9; line-height: 1.25; }
.bs-tile-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.bs-tile.accent { border-color: #00b4d8; }
.bs-tile-value.pos { color: #34d399; }
.bs-tile-value.neg { color: #f87171; }

/* --- grid controls --- */
.bs-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 12px 14px;
  background: #171b28;
  border: 1px solid #262b3d;
  border-radius: 8px;
  margin-bottom: 12px;
}
.bs-control-group { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bs-control-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #00b4d8;
  align-self: center;
  margin-right: 2px;
}
.bs-mini { display: flex; flex-direction: column; gap: 3px; }
.bs-mini > span { font-size: 10px; color: #8b95ad; }
.bs-mini .input-field { padding: 5px 8px; font-size: 12px; width: 96px; }
.bs-derived {
  align-self: center;
  font-size: 10px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
}
.bs-grid-legend { font-size: 12px; color: #8b95ad; margin-bottom: 10px; line-height: 1.55; }
.bs-grid-legend strong { color: #cbd5e1; font-weight: 600; }

/* --- scenario grid --- */
.bs-grid-scroll { overflow-x: auto; border: 1px solid #262b3d; border-radius: 8px; }
table.bs-grid { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }
table.bs-grid th, table.bs-grid td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid #232838;
  border-right: 1px solid #232838;
}
table.bs-grid thead th {
  background: #171b28;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.bs-grid thead th.bs-sub { font-weight: 400; color: #64748b; font-size: 10px; top: 27px; }
table.bs-grid th.bs-corner, table.bs-grid td.bs-rowhead {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #171b28;
  text-align: left;
  font-weight: 600;
  color: #e2e8f0;
}
table.bs-grid thead th.bs-corner { z-index: 4; }
table.bs-grid tbody tr:hover td { background: #232838; }
table.bs-grid tbody tr:hover td.bs-rowhead { background: #2a3044; }
table.bs-grid td.bs-cell { cursor: help; font-variant-numeric: tabular-nums; }
/* The price text stays white unless the row IS the value it is marked with —
   tinting a row that is several dollars off implies it is the share price or the
   break-even when it is not. The badge beside it names the real figure. */
table.bs-grid tr.bs-exact-spot td.bs-rowhead { color: #00b4d8; }
/* Share price is a point between rows, like the break-even: one line on that
   boundary, not brackets that claim the row is the price. */
table.bs-grid tr.bs-row-spot-edge td { border-bottom: 2px solid #00b4d8; }
table.bs-grid tr.bs-row-spot-exact td { border-top: 2px solid #00b4d8; border-bottom: 2px solid #00b4d8; }
/* Break-even is a boundary between two rows, so it is ONE line on that edge —
   which is the red/green transition in the expiry column. Only when it lands on
   a row exactly does it bracket that row. */
table.bs-grid tr.bs-exact-be td.bs-rowhead { color: #fbbf24; }
table.bs-grid tr.bs-row-be-edge td { border-bottom: 2px dashed #fbbf24; }
table.bs-grid tr.bs-row-be-exact td { border-top: 2px dashed #fbbf24; border-bottom: 2px dashed #fbbf24; }
.bs-row-pct {
  font-size: 10px;
  font-weight: 500;
  color: #7c879e;
  margin-left: 7px;
  font-variant-numeric: tabular-nums;
}
table.bs-grid thead th.bs-corner .bs-row-pct { font-weight: 400; color: #64748b; }
table.bs-grid tr.bs-exact-spot td.bs-rowhead .bs-row-pct { color: #4b8fa6; }
.bs-row-tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; margin-left: 6px; opacity: .85; }

/* --- hover tooltip --- */
#bsTip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #0b0e17;
  border: 1px solid #3b4256;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.6;
  color: #e2e8f0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  max-width: 280px;
  opacity: 0;
  transition: opacity .1s;
}
#bsTip.show { opacity: 1; }
#bsTip .bs-tip-head {
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid #262b3d;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
#bsTip .bs-tip-row { display: flex; justify-content: space-between; gap: 18px; }
#bsTip .bs-tip-row span:first-child { color: #8b95ad; }
#bsTip .bs-tip-row span:last-child { font-variant-numeric: tabular-nums; }
#bsTip .bs-tip-foot {
  border-top: 1px solid #262b3d;
  margin-top: 6px;
  padding-top: 6px;
  color: #8b95ad;
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
}
#bsTip .bs-tip-foot b { color: #cbd5e1; font-weight: 600; }
#bsTip .pos { color: #34d399; }
#bsTip .neg { color: #f87171; }

/* the chain's strike cell doubles as a jump into the calculator */
td.om-strike.om-strike-link { cursor: pointer; }
td.om-strike.om-strike-link:hover { color: #00b4d8; text-decoration: underline; }

/* Age of the spot quote, sitting on the Stock price label. A calculator whose
   price silently drifts from the market is worse than one that admits it. */
.bs-spot-age {
  background: #1e2a1f;
  color: #4ade80;
  border: 1px solid #285232;
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
}
.bs-spot-age:hover { filter: brightness(1.25); }
.bs-spot-age.stale { background: #3a2a12; color: #fbbf24; border-color: #78350f; }
.bs-spot-age.manual { background: #2a2440; color: #a78bfa; border-color: #4c3f7a; }