/* ===========================
   YELLOW CANARY CAPITAL TERMINAL
   =========================== */

:root {
  --bg:          #0A0A0A;
  --bg-panel:    #0D0D0D;
  --bg-panel2:   #111111;
  --border:      #1E1E1E;
  --border-hi:   #2A2A2A;
  --green:       #00D26A;
  --green-dim:   #007A3D;
  --red:         #FF3B3B;
  --red-dim:     #8B0000;
  --amber:       #FFB800;
  --amber-dim:   #7A5500;
  --blue:        #00A0FF;
  --blue-dim:    #004A7A;
  --gold:        #FFD700;
  --canary:      #FFEF00;
  --white:       #E8E8E8;
  --gray:        #666666;
  --gray-mid:    #444444;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
  --font-sans:   'Space Grotesk', 'Arial', sans-serif;
  --header-h:    44px;
  --ticker-h:    32px;
  --cmd-h:       44px;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  cursor: default;
}

/* ---- SCANLINES ---- */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  animation: scanShift 8s linear infinite;
}
@keyframes scanShift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 200px; }
}

/* ---- TOP HEADER ---- */
.top-header {
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: #050505;
  border-bottom: 1px solid var(--amber);
  padding: 0 12px;
  gap: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 20px rgba(255,184,0,0.08);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
  letter-spacing: 0.06em;
}
.brand-prefix, .brand-suffix { color: var(--amber); font-size: 14px; font-weight: 700; }
.brand-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.12em;
}
.brand-version { font-size: 9px; color: var(--gray); font-weight: 400; margin-left: 2px; }

.connection-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.conn-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: blink 1.5s ease-in-out infinite;
}
.dot-green  { background: var(--green);  box-shadow: 0 0 6px var(--green); }
.dot-yellow { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }
.dot-red    { background: var(--red);    box-shadow: 0 0 6px var(--red); }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.conn-status { font-size: 10px; color: var(--amber); font-weight: 600; letter-spacing: 0.08em; }

.clock-block { margin-left: auto; text-align: right; white-space: nowrap; }
.clock-row { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.clock-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; min-width: 28px; }
.clock-value { font-size: 12px; color: var(--amber); font-weight: 600; letter-spacing: 0.05em; }
.clock-date { font-size: 9px; color: var(--gray-mid); text-align: right; margin-top: 1px; white-space: nowrap; line-height: 1.2; }

.refresh-info { text-align: right; min-width: 120px; }
.mode-indicator {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border: 1px solid currentColor;
}
.mode-demo { color: var(--amber); }
.mode-live { color: var(--green); }

/* ---- TICKER TAPE ---- */
.ticker-wrapper {
  display: flex;
  align-items: center;
  height: var(--ticker-h);
  background: #080808;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.ticker-label {
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 9px;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-right: 1px solid var(--border);
  height: 100%;
  display: flex;
  align-items: center;
  background: #0A0A0A;
}
.ticker-scroll-container {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  gap: 0;
}
.ticker-content:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  font-size: 11px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  height: 100%;
  transition: background 0.15s;
}
.ticker-item:hover { background: #161616; }
.ticker-sym { font-weight: 700; color: var(--amber); letter-spacing: 0.05em; }
.ticker-price { color: var(--white); }
.ticker-chg.pos { color: var(--green); }
.ticker-chg.neg { color: var(--red); }
.ticker-loading { padding: 0 20px; color: var(--gray); font-size: 10px; }

/* ---- MAIN GRID ---- */
.main-grid {
  display: grid;
  grid-template-columns: 220px 230px 1fr 280px;
  grid-template-rows: 1fr 1fr auto;
  gap: 1px;
  background: var(--border);
  height: calc(100vh - var(--header-h) - var(--ticker-h) - var(--cmd-h) - 1px);
  overflow: hidden;
}

/* ---- PANELS ---- */
.panel {
  background: var(--bg-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.panel-market {
  grid-column: 1;
  grid-row: 1 / 3;
}
.panel-watchlist {
  grid-column: 2;
  grid-row: 1;
}
.panel-movers {
  grid-column: 2;
  grid-row: 2;
}
.panel-chart {
  grid-column: 3;
  grid-row: 1 / 3;
}
.panel-news {
  grid-column: 1 / 5;
  grid-row: 3;
  max-height: 120px;
}

/* ---- PANEL HEADER ---- */
.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--amber-dim);
  flex-shrink: 0;
  background: #0A0A0A;
  position: relative;
}
.panel-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
}
.panel-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.panel-tag {
  font-size: 8px;
  color: var(--gray);
  letter-spacing: 0.08em;
  border: 1px solid var(--border-hi);
  padding: 1px 4px;
}
.panel-timestamp {
  margin-left: auto;
  font-size: 9px;
  color: var(--gray);
}

/* ---- PANEL BODY ---- */
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.panel-body::-webkit-scrollbar { width: 3px; }
.panel-body::-webkit-scrollbar-track { background: var(--bg); }
.panel-body::-webkit-scrollbar-thumb { background: var(--border-hi); }

/* ---- MARKET SECTION LABELS ---- */
.market-section-label {
  font-size: 8px;
  color: var(--blue);
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 4px 4px 2px;
  border-bottom: 1px solid var(--blue-dim);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.mt8 { margin-top: 8px; }

/* ---- ASSET TABLES ---- */
.asset-table { width: 100%; }
.asset-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  padding: 3px 4px;
  border-bottom: 1px solid #111;
  cursor: pointer;
  align-items: center;
  transition: background 0.1s;
  min-height: 22px;
}
.asset-row:hover { background: #161616; }
.asset-row.selected { background: #1A1A00; border-left: 2px solid var(--amber); }

.asset-sym {
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-name {
  font-size: 8px;
  color: var(--gray);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-price {
  font-size: 10px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
  white-space: nowrap;
}
.asset-chg {
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

.pos { color: var(--green); }
.neg { color: var(--red); }
.neu { color: var(--gray); }

.asset-vol {
  font-size: 8px;
  color: var(--gray);
  grid-column: 1;
}

.loading-row { display: flex; align-items: center; padding: 6px 4px; }
.ld { color: var(--gray); font-size: 9px; letter-spacing: 0.08em; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ---- WATCHLIST ---- */
.panel-watchlist .panel-body { padding: 0; }
.watchlist-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #0A0A0A;
}
.wl-prompt { color: var(--green); font-size: 11px; }
.wl-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  caret-color: var(--green);
}
.wl-input::placeholder { color: var(--gray); }
.wl-btn {
  background: var(--border-hi);
  border: 1px solid var(--gray-mid);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.1s;
}
.wl-btn:hover { background: var(--amber-dim); border-color: var(--amber); color: var(--white); }

.watchlist-table { flex: 1; overflow-y: auto; }
.watchlist-table::-webkit-scrollbar { width: 3px; }
.watchlist-table::-webkit-scrollbar-thumb { background: var(--border-hi); }

.wl-row {
  display: grid;
  grid-template-columns: 1fr auto auto 18px;
  gap: 3px;
  padding: 4px 6px;
  border-bottom: 1px solid #111;
  cursor: pointer;
  align-items: center;
  transition: background 0.1s;
}
.wl-row:hover { background: #161616; }
.wl-row.selected { background: #1A1A00; border-left: 2px solid var(--amber); }
.wl-sym { font-size: 10px; font-weight: 700; color: var(--white); }
.wl-price { font-size: 10px; color: var(--white); text-align: right; }
.wl-chg { font-size: 9px; text-align: right; }
.wl-del {
  font-size: 9px;
  color: var(--gray-mid);
  text-align: center;
  cursor: pointer;
  transition: color 0.1s;
}
.wl-del:hover { color: var(--red); }

/* ---- MOVERS ---- */
.movers-body {
  display: flex;
  gap: 1px;
  padding: 0;
  overflow: hidden;
}
.movers-col {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.movers-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.green-label { color: var(--green); }
.red-label   { color: var(--red); }
.movers-table { overflow-y: auto; }
.movers-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid #111;
  cursor: pointer;
  transition: background 0.1s;
  align-items: center;
}
.movers-row:hover { background: #161616; }
.mv-sym { font-size: 9px; font-weight: 700; color: var(--white); }
.mv-price { font-size: 9px; color: var(--white); }
.mv-chg { font-size: 9px; }

/* ---- CHART ---- */
.panel-chart .panel-header { flex-wrap: wrap; row-gap: 4px; }
.chart-controls {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.chart-range-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  cursor: pointer;
  transition: all 0.1s;
  letter-spacing: 0.05em;
}
.chart-range-btn:hover { border-color: var(--amber-dim); color: var(--amber); }
.chart-range-btn.active { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); }

.chart-detail-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #090909;
  flex-wrap: wrap;
}
.cdb-item {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  border-right: 1px solid var(--border);
}
.cdb-label { font-size: 7px; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; }
.cdb-value { font-size: 11px; color: var(--white); font-weight: 600; }

.chart-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
#tvChart {
  width: 100%;
  height: 100%;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}
.chart-ph-icon { font-size: 48px; color: var(--border-hi); }
.chart-ph-text { font-size: 14px; color: var(--gray-mid); letter-spacing: 0.1em; }
.chart-ph-sub { font-size: 10px; color: #333; letter-spacing: 0.06em; }

/* ---- NEWS ---- */
.panel-news { flex-direction: column; }
.panel-news .panel-header { flex-shrink: 0; }
.news-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: stretch;
  padding: 4px 8px;
  gap: 12px;
  white-space: nowrap;
  min-width: 0;
  scrollbar-width: thin;
}
.news-container::-webkit-scrollbar { height: 3px; }
.news-container::-webkit-scrollbar-thumb { background: var(--border-hi); }
.news-item {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 280px;
  max-width: 320px;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.news-item:hover { border-color: var(--amber-dim); }
.news-headline {
  font-size: 9px;
  color: var(--white);
  white-space: normal;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  font-size: 8px;
  color: var(--gray);
  display: flex;
  gap: 6px;
}
.news-source { color: var(--blue); }
.news-loading { color: var(--gray); font-size: 10px; letter-spacing: 0.06em; animation: pulse 1.5s infinite; }

/* ---- COMMAND BAR ---- */
.cmd-bar {
  display: flex;
  align-items: center;
  height: var(--cmd-h);
  background: #050505;
  border-top: 1px solid var(--green-dim);
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 -2px 20px rgba(0,210,106,0.05);
}
.cmd-prefix {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  caret-color: var(--green);
  letter-spacing: 0.05em;
}
.cmd-input::placeholder { color: var(--gray-mid); font-weight: 400; text-transform: none; }
.cmd-hints {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cmd-hint-item { font-size: 8px; color: var(--gray); letter-spacing: 0.06em; }
.cmd-hint-sep { color: var(--border-hi); }

/* ---- SCROLLBARS (global) ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 0; }

/* ---- FLICKER EFFECT ---- */
@keyframes flicker {
  0%,97%,100% { opacity: 1; }
  98%          { opacity: 0.95; }
  99%          { opacity: 1; }
}
body { animation: flicker 8s ease-in-out infinite; }

/* ---- NUMBER FLASH ---- */
.flash-up   { animation: flashGreen 0.6s ease-out; }
.flash-down { animation: flashRed 0.6s ease-out; }
@keyframes flashGreen { 0%{background:#00D26A33;} 100%{background:transparent;} }
@keyframes flashRed   { 0%{background:#FF3B3B33;} 100%{background:transparent;} }

/* ---- CHART LOADING ---- */
.chart-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}
.chart-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border-hi);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chart-load-text { font-size: 11px; color: var(--amber); letter-spacing: 0.1em; }

/* ---- GLOW EFFECTS ---- */
.panel-market   { box-shadow: inset 0 0 40px rgba(0,160,255,0.015); }
.panel-watchlist{ box-shadow: inset 0 0 40px rgba(0,210,106,0.015); }
.panel-chart    { box-shadow: inset 0 0 60px rgba(255,184,0,0.015); }

/* ---- DEMO BANNER ---- */
.demo-banner {
  background: rgba(255,184,0,0.08);
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  text-align: center;
  flex-shrink: 0;
}

/* ---- HELP OVERLAY ---- */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-box {
  background: #0D0D0D;
  border: 1px solid var(--amber);
  padding: 24px 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 0 40px rgba(255,184,0,0.2);
}
.help-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.help-row {
  display: flex;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid #151515;
  align-items: baseline;
}
.help-cmd { color: var(--green); min-width: 100px; font-size: 10px; font-weight: 600; }
.help-desc { color: var(--gray); font-size: 10px; }
.help-close-hint { margin-top: 16px; font-size: 9px; color: var(--gray); text-align: center; }

/* ---- SENTIMENT BADGE ---- */
.sentiment-badge { font-weight: 700; letter-spacing: 0.5px; padding: 1px 8px; border-radius: 2px; }
.sentiment-badge.pos { background: var(--green); color: #000; }
.sentiment-badge.neg { background: var(--red); color: #fff; }
.sentiment-badge.neu { background: var(--amber); color: #000; }

/* ---- STRATEGIES PANEL ---- */
.panel-strategies {
  grid-column: 4;
  grid-row: 1;
  box-shadow: inset 0 0 40px rgba(0,160,255,0.015);
  overflow: hidden;
}
.panel-quant {
  grid-column: 4;
  grid-row: 2;
  box-shadow: inset 0 0 40px rgba(255,184,0,0.01);
}

/* ============================================
   SURMOUNT STRATEGIES PANEL
   ============================================ */
.strategies-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.strategies-body::-webkit-scrollbar { width: 4px; }
.strategies-body::-webkit-scrollbar-thumb { background: var(--border-hi); }

.strat-card {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.strat-card:hover {
  background: #141414;
}
.strat-card.expanded {
  background: #111;
}

.strat-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.strat-name {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strat-return {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.strat-return.pos { color: var(--green); }
.strat-return.neg { color: var(--red); }

.strat-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  align-items: center;
  flex-wrap: wrap;
}
.strat-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  letter-spacing: 0.06em;
  background: var(--border-hi);
  color: var(--gray);
}
.strat-badge.risk-med { background: #332D00; color: var(--amber); }
.strat-badge.rebal { background: #00262E; color: var(--blue); }
.strat-badge.status-inactive { background: #1A1A1A; color: #555; }

.strat-detail {
  display: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.strat-card.expanded .strat-detail {
  display: block;
}

.strat-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.strat-metric {
  text-align: center;
  padding: 3px 0;
  background: #0A0A0A;
  border: 1px solid var(--border);
}
.strat-metric-label {
  font-size: 7px;
  color: var(--gray);
  letter-spacing: 0.08em;
}
.strat-metric-value {
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  font-family: var(--font-mono);
}
.strat-metric-value.pos { color: var(--green); }
.strat-metric-value.neg { color: var(--red); }

.strat-holdings-label {
  font-size: 7px;
  color: var(--gray);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.strat-holding-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font-size: 9px;
  cursor: pointer;
}
.strat-holding-row:hover {
  color: var(--amber);
}
.strat-holding-row:hover .strat-hold-ticker {
  color: var(--amber);
}
.strat-hold-ticker {
  font-weight: 700;
  color: var(--blue);
  width: 42px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.strat-hold-name {
  flex: 1;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strat-hold-weight {
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  text-align: right;
  min-width: 38px;
}
.strat-hold-bar-wrap {
  width: 40px;
  height: 4px;
  background: var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.strat-hold-bar {
  height: 100%;
  background: var(--blue);
  transition: width 0.3s ease;
}
.quant-body {
  padding: 8px;
  overflow-y: auto;
  gap: 0;
}
.quant-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.quant-sym-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quant-label {
  font-size: 8px;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quant-sym-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.08em;
}
.quant-input-row {
  display: flex;
  gap: 8px;
}
.quant-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quant-input {
  background: #0A0A0A;
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.quant-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 4px rgba(255,184,0,0.15);
}
.quant-input::-webkit-inner-spin-button,
.quant-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 20px;
}
.quant-run-btn {
  background: transparent;
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.quant-run-btn:hover {
  background: rgba(255,184,0,0.08);
  border-color: var(--amber);
  box-shadow: 0 0 10px rgba(255,184,0,0.15);
}
.quant-run-btn:active {
  background: rgba(255,184,0,0.15);
}
.quant-run-btn.running {
  color: var(--gray);
  border-color: var(--gray-mid);
  cursor: wait;
  animation: pulse 1s ease-in-out infinite;
}
.quant-status {
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 2px 0;
  min-height: 14px;
  color: var(--amber);
}
.quant-status.error { color: var(--red); }

/* Stats Grid */
.quant-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 6px;
}
.quant-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #111;
}
.quant-stat-label {
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.04em;
}
.quant-stat-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
  letter-spacing: 0.02em;
}
.quant-stat-value.pos { color: var(--green); }
.quant-stat-value.neg { color: var(--red); }
.quant-stat-value.amber { color: var(--amber); }
.quant-stat-value.blue { color: var(--blue); }

/* Histogram */
.quant-hist-section {
  margin-top: 4px;
}
.quant-hist-label {
  font-size: 8px;
  color: var(--blue);
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 4px 0 4px;
  border-bottom: 1px solid var(--blue-dim);
  margin-bottom: 4px;
}
.quant-hist-canvas {
  width: 100%;
  height: 160px;
  background: #080808;
  border: 1px solid var(--border);
  display: block;
}

@media (max-width: 1100px) {
  .main-grid {
    grid-template-columns: 200px 200px 1fr;
  }
  .panel-quant {
    display: none;
  }
  .panel-strategies {
    display: none;
  }
  .panel-news {
    grid-column: 1 / 4;
  }
}

/* ============================================
   ANALYSIS TAB SYSTEM
   ============================================ */

/* Tab Bar */
.analysis-tab-bar {
  display: flex;
  flex-shrink: 0;
  background: #060606;
  border-bottom: 1px solid var(--border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.analysis-tab-bar::-webkit-scrollbar { display: none; }

.analysis-tab-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
  text-transform: uppercase;
}
.analysis-tab-btn:hover {
  color: var(--white);
  background: #111;
}
.analysis-tab-btn.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  background: #0D0D0D;
}

/* Tab Content Panes */
.analysis-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.analysis-tab-content.active {
  display: flex;
  flex-direction: column;
}
.analysis-tab-content::-webkit-scrollbar { width: 3px; }
.analysis-tab-content::-webkit-scrollbar-thumb { background: var(--border-hi); }

/* Chart tab: let chart-container fill */
#tab-chart {
  overflow: hidden;
}
#tab-chart .chart-container {
  flex: 1;
  min-height: 0;
}

/* ── No Data message ── */
.no-data-msg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 40px;
}

/* ============================================
   FINANCIALS PANEL
   ============================================ */

#tab-financials {
  padding: 10px;
  gap: 10px;
}

.fin-company-header {
  border: 1px solid var(--border-hi);
  padding: 10px;
  background: #0A0A0A;
  flex-shrink: 0;
}
.fin-company-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.fin-company-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.fin-badge {
  font-size: 8px;
  color: var(--blue);
  border: 1px solid var(--blue-dim);
  padding: 1px 5px;
  letter-spacing: 0.08em;
}
.fin-meta-item {
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.04em;
}
.fin-val { color: var(--white); }
.fin-desc {
  font-size: 9px;
  color: var(--gray);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.fin-section-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.12em;
  padding: 4px 2px 4px;
  border-bottom: 1px solid var(--amber-dim);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Metrics Grid */
.fin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  flex-shrink: 0;
}
.fin-metric-card {
  background: #0D0D0D;
  border: 1px solid var(--border);
  padding: 6px 8px;
  transition: border-color 0.15s;
}
.fin-metric-card:hover { border-color: var(--border-hi); }
.fin-metric-label {
  font-size: 7px;
  color: var(--gray);
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.fin-metric-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.fin-metric-sub {
  font-size: 7px;
  color: var(--gray);
  margin-top: 2px;
}

/* Revenue bar canvas */
.fin-chart-wrapper {
  flex-shrink: 0;
}
.fin-canvas {
  width: 100%;
  height: 150px;
  display: block;
  background: #080808;
  border: 1px solid var(--border);
}

/* Tables */
.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
  flex-shrink: 0;
}
.fin-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--gray);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-hi);
  font-size: 8px;
  font-weight: 700;
  background: #0A0A0A;
}
.fin-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #111;
  color: var(--white);
  letter-spacing: 0.02em;
}
.fin-table tr:hover td { background: #111; }
.gray-val { color: var(--gray); }

/* Earnings table */
.fin-earnings-table .row-beat td { background: rgba(0,210,106,0.04); }
.fin-earnings-table .row-miss td { background: rgba(255,59,59,0.04); }

/* Sentiment */
.fin-sentiment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.fin-sentiment-card {
  border: 1px solid var(--border);
  padding: 8px;
  background: #0A0A0A;
}
.fin-sentiment-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.fin-sentiment-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #111;
  align-items: flex-start;
  font-size: 9px;
  line-height: 1.5;
}
.fin-sentiment-row:last-child { border-bottom: none; }
.bull-row { border-left: 2px solid var(--green); padding-left: 6px; }
.bear-row { border-left: 2px solid var(--red); padding-left: 6px; }
.fin-sentiment-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 5px;
  flex-shrink: 0;
  letter-spacing: 0.08em;
  align-self: flex-start;
  margin-top: 2px;
}
.bull-badge { background: var(--green); color: #000; }
.bear-badge { background: var(--red); color: #fff; }
.fin-sentiment-text { color: var(--gray); }

/* ============================================
   TECHNICALS PANEL
   ============================================ */

#tab-technicals {
  padding: 10px;
  gap: 10px;
}

.tech-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.tech-section-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.12em;
  padding: 4px 2px;
  border-bottom: 1px solid var(--blue-dim);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Signal Banner */
.tech-signal-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: #0D0D0D;
  flex-shrink: 0;
}
.tech-signal-banner.signal-pos { border-color: var(--green-dim); background: rgba(0,210,106,0.04); }
.tech-signal-banner.signal-neg { border-color: var(--red-dim); background: rgba(255,59,59,0.04); }
.tech-signal-banner.signal-neu { border-color: var(--amber-dim); }
.tech-signal-label {
  font-size: 8px;
  color: var(--gray);
  letter-spacing: 0.1em;
}
.tech-signal-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.tech-signal-score {
  font-size: 9px;
  color: var(--gray);
  margin-left: auto;
  letter-spacing: 0.06em;
}

/* RSI Row */
.tech-rsi-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.tech-rsi-gauge-wrap {
  flex: 1;
}
.tech-rsi-gauge {
  height: 12px;
  background: #111;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.tech-rsi-fill {
  height: 100%;
  transition: width 0.5s ease;
}
.tech-rsi-fill.pos { background: linear-gradient(90deg, #007A3D, #00D26A); }
.tech-rsi-fill.neg { background: linear-gradient(90deg, #8B0000, #FF3B3B); }
.tech-rsi-fill.neu { background: linear-gradient(90deg, #444, #999); }
.tech-rsi-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #444;
}
.tech-rsi-labels {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: var(--gray);
  margin-top: 2px;
}
.tech-rsi-vals {
  text-align: right;
  flex-shrink: 0;
  min-width: 70px;
}
.tech-rsi-big {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.tech-rsi-zone {
  font-size: 8px;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* RSI Canvas */
.tech-chart-wrapper { flex-shrink: 0; }
.tech-canvas {
  width: 100%;
  background: #080808;
  border: 1px solid var(--border);
  display: block;
}

/* Indicators Grid */
.tech-indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  flex-shrink: 0;
}
.tech-indicator-card {
  background: #0D0D0D;
  border: 1px solid var(--border);
  padding: 6px 8px;
}
.tech-ind-label {
  font-size: 7px;
  color: var(--gray);
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.tech-ind-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}
.tech-ind-value.amber { color: var(--amber); }

/* MA Summary bar */
.tech-ma-summary { flex-shrink: 0; padding: 4px 0; }
.tech-ma-bar {
  height: 5px;
  background: var(--red-dim);
  border-radius: 0;
  overflow: hidden;
}
.tech-ma-bull-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.5s ease;
}

/* ============================================
   SYMBOL NEWS PANEL
   ============================================ */

#tab-news {
  padding: 0;
  gap: 0;
}

.sym-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: #0A0A0A;
  flex-shrink: 0;
}
.sym-news-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.08em;
}
.sym-news-time {
  font-size: 9px;
  color: var(--gray);
}

.sym-news-feed {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  max-height: 55%;
  overflow-y: auto;
}
.sym-news-feed::-webkit-scrollbar { width: 3px; }
.sym-news-feed::-webkit-scrollbar-thumb { background: var(--border-hi); }

.sym-news-item {
  padding: 7px 10px;
  border-bottom: 1px solid #111;
  cursor: pointer;
  transition: background 0.1s;
}
.sym-news-item:hover { background: #111; }
.sym-news-headline {
  font-size: 10px;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 3px;
}
.sym-news-snippet {
  font-size: 8px;
  color: var(--gray);
  line-height: 1.4;
  margin-bottom: 3px;
}
.sym-news-meta {
  display: flex;
  gap: 8px;
  font-size: 8px;
}
.sym-news-source { color: var(--blue); }
.sym-news-ts { color: var(--amber); }

.sym-news-unavailable {
  padding: 20px 10px;
  color: var(--red);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.sym-news-fallback-note {
  padding: 0 10px 10px;
  color: var(--gray);
  font-size: 9px;
}

/* Sentiment in News tab */
.sym-news-sentiment-header {
  padding: 8px 10px 4px;
  font-size: 8px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.12em;
  border-top: 1px solid var(--amber-dim);
  flex-shrink: 0;
  margin-top: 4px;
}
.sym-news-sentiment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 10px;
  overflow-y: auto;
  flex: 1;
}
.sym-news-sentiment-list::-webkit-scrollbar { width: 3px; }
.sym-news-sentiment-list::-webkit-scrollbar-thumb { background: var(--border-hi); }

.sym-sent-card {
  border: 1px solid var(--border);
  padding: 8px;
  background: #0A0A0A;
  flex-shrink: 0;
}
.sym-sent-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 6px;
}
.sym-sent-bull {
  border-left: 2px solid var(--green);
  padding: 3px 0 3px 8px;
  font-size: 9px;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 3px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.sym-sent-bear {
  border-left: 2px solid var(--red);
  padding: 3px 0 3px 8px;
  font-size: 9px;
  color: var(--gray);
  line-height: 1.5;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.sym-sent-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  flex-shrink: 0;
  letter-spacing: 0.08em;
  align-self: flex-start;
  margin-top: 1px;
}
.sym-sent-badge.bull { background: var(--green); color: #000; }
.sym-sent-badge.bear { background: var(--red); color: #fff; }

/* ============================================
   SUPPLY WEB PANEL
   ============================================ */

#tab-supply {
  padding: 0;
  gap: 0;
}

.supply-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: #0A0A0A;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.supply-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.08em;
}
.supply-legend {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: var(--gray);
  letter-spacing: 0.06em;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.supply-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.supply-canvas {
  display: block;
  background: #080808;
  cursor: default;
}

/* Supply Tooltip */
.supply-tooltip {
  position: absolute;
  background: #111;
  border: 1px solid var(--amber-dim);
  padding: 8px 10px;
  pointer-events: none;
  z-index: 20;
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.tt-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.tt-ticker {
  font-size: 10px;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.tt-rel {
  font-size: 9px;
  color: var(--gray);
  margin-bottom: 3px;
  line-height: 1.4;
}
.tt-type {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tt-hint {
  font-size: 8px;
  color: var(--amber);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

/* ===========================
   TIER FEATURES — v5.0.0 STYLES
   =========================== */

/* ── Tab Bar Enhancements ── */
.analysis-tab-bar {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.analysis-tab-btn {
  font-size: 9px;
  padding: 0 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.analysis-tab-btn.tier-tab {
  color: var(--blue);
  border-bottom: 1px solid transparent;
}
.analysis-tab-btn.tier-tab:hover {
  color: var(--white);
  background: rgba(0,160,255,0.08);
}
.analysis-tab-btn.tier-tab.active {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  background: rgba(0,160,255,0.08);
}
.tab-divider {
  color: var(--border-hi);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ── Multi-Chart Button ── */
.multi-chart-btn {
  background: rgba(255,184,0,0.1) !important;
  color: var(--amber) !important;
  border: 1px solid var(--amber-dim) !important;
  margin-left: 4px;
}
.multi-chart-btn:hover {
  background: rgba(255,184,0,0.2) !important;
}

/* ── Multi-Chart Grid ── */
.multi-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  height: 100%;
  background: var(--bg);
  padding: 2px;
  flex: 1;
}
.multi-chart-cell {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.multi-chart-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  padding: 3px 6px;
  background: #050505;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  letter-spacing: 0.08em;
}
.multi-chart-tv {
  flex: 1;
  min-height: 0;
}

/* ── Alert Toast ── */
.tier-alert-toast {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9998;
  background: #0D0D0D;
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 24px rgba(255,184,0,0.2);
  animation: toastIn 0.3s ease;
  max-width: 280px;
}
@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Common Tab Container Patterns ── */
.opts-container, .est-container, .corr-container, .vol-container,
.risk-container, .macro-container, .bt-container, .hm-container,
.cg-container, .l2-container, .alerts-container {
  padding: 10px 12px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ═══════════════════════════
   OPTIONS CHAIN
   ═══════════════════════════ */
.opts-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.opts-sym { font-size: 14px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.opts-price { font-size: 11px; color: var(--white); }
.opts-price strong { color: var(--green); }
.opts-updated { font-size: 9px; color: var(--gray); }
.opts-expiry-label { font-size: 9px; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.opts-expiry-select {
  background: var(--bg-panel2);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 4px;
  cursor: pointer;
}
.opts-itm-legend { font-size: 9px; color: var(--gray); display: flex; align-items: center; gap: 3px; }
.opts-atm-dot { color: var(--amber); }

.opts-table-wrap {
  overflow: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.opts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  min-width: 700px;
}
.opts-table th {
  background: #111;
  color: var(--gray);
  padding: 4px 6px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 9px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.opts-thead-group th {
  font-size: 10px;
  padding: 5px 6px;
}
.opts-strike-th {
  background: #1a1a1a !important;
  color: var(--amber) !important;
  font-weight: 700;
}
.opts-table td {
  padding: 3px 6px;
  text-align: center;
  border-bottom: 1px solid #111;
  font-size: 10px;
  transition: background 0.1s;
}
.opts-row:hover td { background: rgba(255,255,255,0.03); }
.opts-itm { color: var(--white); background: rgba(0,210,106,0.06); }
.opts-otm { color: #888; }
.opts-strike {
  background: #1a1a1a;
  color: var(--amber);
  font-weight: 700;
  font-size: 11px;
}
.opts-atm td {
  background: rgba(255,184,0,0.08) !important;
}
.opts-atm .opts-strike {
  color: var(--amber);
  background: rgba(255,184,0,0.15);
  font-size: 12px;
}

/* ═══════════════════════════
   ESTIMATES
   ═══════════════════════════ */
.est-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.est-sym { font-size: 14px; font-weight: 700; color: var(--amber); }
.est-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }
.est-count { font-size: 9px; color: var(--blue); margin-left: auto; }

.est-section { margin-bottom: 6px; }
.est-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
}

.est-target-bar-wrap { padding: 0 8px; }
.est-target-minmax { display: flex; justify-content: space-between; margin-bottom: 4px; }
.est-target-low { font-size: 9px; color: var(--red); }
.est-target-high { font-size: 9px; color: var(--green); }
.est-target-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  position: relative;
  margin: 12px 0 6px;
}
.est-target-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--red-dim), var(--amber-dim), var(--green-dim));
  border-radius: 3px;
}
.est-target-mean {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.est-target-needle {
  width: 2px;
  height: 22px;
  background: var(--white);
  border-radius: 1px;
}
.est-target-mean-label {
  font-size: 9px;
  color: var(--white);
  white-space: nowrap;
  background: #0D0D0D;
  padding: 1px 3px;
  position: absolute;
  top: 22px;
}
.est-target-median { font-size: 9px; color: var(--gray); text-align: center; margin-top: 16px; }

.est-ratings-row { display: flex; gap: 16px; align-items: flex-start; }
.est-ratings-legend { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.est-rat-row { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.est-rat-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

.est-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.est-table th {
  background: #111;
  color: var(--gray);
  padding: 5px 8px;
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.est-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #111;
  color: var(--white);
}

/* ═══════════════════════════
   CORRELATION
   ═══════════════════════════ */
.corr-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.corr-table {
  border-collapse: collapse;
  font-size: 10px;
}
.corr-sym-th, .corr-sym-label {
  color: var(--amber);
  font-weight: 700;
  font-size: 9px;
  padding: 4px 6px;
  letter-spacing: 0.05em;
}
.corr-sym-th {
  background: #111;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
}
.corr-sym-label {
  background: #111;
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
}
.corr-cell {
  width: 52px;
  height: 32px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  cursor: default;
  transition: filter 0.15s;
  padding: 2px;
}
.corr-cell:hover { filter: brightness(1.3); }
.corr-diag { font-weight: 700; }
.corr-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 9px;
}
.corr-grad-bar {
  flex: 1;
  height: 8px;
  max-width: 200px;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF3B3B, #FFB800, #00D26A);
}

/* ═══════════════════════════
   VOLATILITY
   ═══════════════════════════ */
.vol-header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.vol-sym { font-size: 14px; font-weight: 700; color: var(--amber); }
.vol-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }

.vol-metrics-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vol-metric-card {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 3px;
  min-width: 80px;
  text-align: center;
}
.vol-metric-label { font-size: 8px; color: var(--gray); letter-spacing: 0.1em; margin-bottom: 4px; }
.vol-metric-val { font-size: 14px; font-weight: 700; }

.vol-gauges-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.vol-gauge-section { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vol-section-title { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.1em; text-align: center; margin-bottom: 2px; }
.vol-gauge-val { font-size: 16px; font-weight: 700; color: var(--white); text-align: center; }
.vol-gauge-unit { font-size: 10px; color: var(--gray); }
.vol-cone-section { display: flex; flex-direction: column; gap: 4px; }

/* ═══════════════════════════
   RISK
   ═══════════════════════════ */
.risk-header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.risk-sym { font-size: 14px; font-weight: 700; color: var(--amber); }
.risk-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }

.risk-main-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.risk-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.risk-section-title { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.1em; text-align: center; margin-bottom: 4px; }
.risk-gauge-label { font-size: 24px; font-weight: 700; color: var(--white); }
.risk-gauge-sub { font-size: 9px; color: var(--gray); letter-spacing: 0.08em; }

.risk-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1;
}
.risk-metric {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rm-label { font-size: 9px; color: var(--gray); letter-spacing: 0.06em; }
.rm-val { font-size: 12px; font-weight: 700; }

/* ═══════════════════════════
   MACRO
   ═══════════════════════════ */
.macro-header { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.macro-title { font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.macro-date { font-size: 9px; color: var(--gray); margin-left: auto; }

.macro-kpi-row { display: flex; gap: 8px; flex-wrap: wrap; }
.macro-kpi {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 3px;
  min-width: 90px;
  text-align: center;
}
.macro-kpi-label { font-size: 8px; color: var(--gray); letter-spacing: 0.1em; margin-bottom: 4px; }
.macro-kpi-val { font-size: 14px; font-weight: 700; }

.macro-charts-row { display: flex; gap: 12px; flex-wrap: wrap; }
.macro-chart-section { display: flex; flex-direction: column; gap: 4px; }
.macro-chart-title { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.1em; }

.macro-yields-table { margin-top: 4px; }
.macro-yield-row-group { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.macro-yield-item {
  display: grid;
  grid-template-columns: 40px 56px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.macro-yield-label { color: var(--gray); text-align: right; font-size: 9px; }
.macro-yield-val { color: var(--blue); font-weight: 700; }
.macro-yield-bar {
  height: 6px;
  background: var(--blue-dim);
  border-right: 2px solid var(--blue);
  border-radius: 2px;
  max-width: 200px;
  transition: width 0.3s ease;
}

/* ═══════════════════════════
   BACKTESTER
   ═══════════════════════════ */
.bt-header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.bt-sym { font-size: 14px; font-weight: 700; color: var(--amber); }
.bt-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }

.bt-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bt-field { display: flex; flex-direction: column; gap: 4px; }
.bt-lbl { font-size: 9px; color: var(--gray); letter-spacing: 0.08em; }
.bt-select {
  background: var(--bg-panel2);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
.bt-select:focus { border-color: var(--amber); }
.bt-run-btn {
  background: rgba(255,184,0,0.1);
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.bt-run-btn:hover { background: rgba(255,184,0,0.2); }

.bt-status { font-size: 10px; min-height: 16px; }

.bt-stats-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bt-stat {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}
.bt-stat-lbl { font-size: 8px; color: var(--gray); letter-spacing: 0.08em; }
.bt-stat-val { font-size: 14px; font-weight: 700; }

.bt-chart-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; margin-top: 8px; font-weight: 700; }

/* ═══════════════════════════
   SECTOR HEATMAP
   ═══════════════════════════ */
.hm-title { font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: 0.1em; }
.hm-subtitle { font-size: 8px; color: var(--gray); letter-spacing: 0.08em; margin-top: 2px; margin-bottom: 10px; }

.hm-grid {
  display: flex;
  gap: 3px;
  height: 100px;
  flex-wrap: nowrap;
}
.hm-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 4px 2px;
  min-width: 30px;
  transition: filter 0.15s, transform 0.15s;
  border: 1px solid rgba(0,0,0,0.3);
}
.hm-cell:hover { filter: brightness(1.2); transform: scaleY(1.03); }
.hm-cell-selected { outline: 2px solid var(--white); z-index: 1; }
.hm-cell-name { font-size: 8px; font-weight: 700; text-align: center; line-height: 1.2; }
.hm-cell-chg { font-size: 10px; font-weight: 700; margin-top: 2px; }
.hm-cell-wt { font-size: 7px; opacity: 0.7; margin-top: 1px; }

.hm-detail {
  padding: 8px 10px;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hm-detail-name { font-size: 11px; font-weight: 700; color: var(--white); }
.hm-detail-chg { font-size: 12px; font-weight: 700; }
.hm-detail-tickers { display: flex; gap: 6px; flex-wrap: wrap; }
.hm-ticker {
  background: rgba(0,160,255,0.1);
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 0.06em;
  transition: background 0.15s;
}
.hm-ticker:hover { background: rgba(0,160,255,0.25); color: var(--white); }

/* ═══════════════════════════
   CONGRESSIONAL TRADES
   ═══════════════════════════ */
.cg-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cg-title { font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.cg-count { font-size: 9px; color: var(--gray); margin-left: auto; }

.cg-filters { display: flex; gap: 4px; }
.cg-filter-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.15s;
}
.cg-filter-btn:hover { border-color: var(--white); color: var(--white); }
.cg-filter-btn.active { background: rgba(255,184,0,0.1); border-color: var(--amber); color: var(--amber); }

.cg-table-wrap {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.cg-table th {
  background: #111;
  color: var(--gray);
  padding: 5px 8px;
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cg-table td { padding: 5px 8px; border-bottom: 1px solid #111; }
.congress-row:hover td { background: rgba(255,255,255,0.02); }
.cg-date { color: var(--gray); font-size: 9px; }
.cg-name { color: var(--white); }
.cg-ticker {
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.cg-ticker:hover { text-decoration: underline; }
.cg-buy { color: var(--green); font-weight: 700; letter-spacing: 0.06em; }
.cg-sell { color: var(--red); font-weight: 700; letter-spacing: 0.06em; }
.cg-amount { color: var(--gray); font-size: 9px; }

/* ═══════════════════════════
   LEVEL 2 / ORDER BOOK
   ═══════════════════════════ */
.l2-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.l2-sym { font-size: 14px; font-weight: 700; color: var(--amber); }
.l2-label { font-size: 9px; color: var(--gray); letter-spacing: 0.1em; }
.l2-mid { font-size: 11px; color: var(--white); margin-left: auto; }
.l2-mid strong { color: var(--amber); }
.l2-note { font-size: 9px; color: var(--gray); }

.l2-main { display: flex; gap: 12px; flex: 1; min-height: 0; flex-wrap: wrap; }
.l2-book { flex: 1; min-width: 0; overflow: auto; }

.l2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  font-family: var(--font-mono);
}
.l2-table th {
  background: #111;
  color: var(--gray);
  padding: 5px 6px;
  font-size: 9px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.l2-bid-th { color: var(--green) !important; }
.l2-ask-th { color: var(--red) !important; }

.l2-table td { padding: 4px 6px; border-bottom: 1px solid #0F0F0F; text-align: center; }
.l2-bid-price { color: var(--green); font-weight: 700; }
.l2-ask-price { color: var(--red); font-weight: 700; }
.l2-bid-size, .l2-bid-total { color: rgba(0,210,106,0.8); }
.l2-ask-size, .l2-ask-total { color: rgba(255,59,59,0.8); }

.l2-bar {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.15;
}
.l2-bar-bid { right: 0; background: var(--green); }
.l2-bar-ask { left: 0; background: var(--red); }

.l2-dark {
  display: inline-block;
  font-size: 7px;
  color: var(--amber);
  background: rgba(255,184,0,0.15);
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 3px;
  vertical-align: middle;
}
.l2-depth { display: flex; flex-direction: column; gap: 4px; }
.l2-depth-title { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.1em; }
.l2-legend { font-size: 9px; color: var(--gray); margin-top: 4px; display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════
   ALERTS
   ═══════════════════════════ */
.alerts-header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.alerts-title { font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.alerts-count { font-size: 9px; color: var(--gray); margin-left: auto; }

.alerts-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.alert-input {
  background: var(--bg-panel2);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 8px;
  outline: none;
}
.alert-input:focus { border-color: var(--amber); }
.alert-select {
  background: var(--bg-panel2);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
}
.alert-add-btn {
  background: rgba(0,210,106,0.1);
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.2s;
}
.alert-add-btn:hover { background: rgba(0,210,106,0.2); }

.alerts-hint { font-size: 9px; color: var(--gray); margin-top: -4px; }

.alerts-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.alert-empty {
  text-align: center;
  color: var(--gray);
  font-size: 10px;
  padding: 24px;
  line-height: 2;
}
.alert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 10px;
}
.alert-active {
  background: rgba(255,184,0,0.05);
  border: 1px solid rgba(255,184,0,0.2);
}
.alert-triggered {
  background: rgba(0,210,106,0.05);
  border: 1px solid rgba(0,210,106,0.2);
}
.alert-dot { font-size: 12px; flex-shrink: 0; }
.alert-sym { font-weight: 700; color: var(--white); min-width: 48px; letter-spacing: 0.06em; }
.alert-cond { color: var(--amber); min-width: 80px; }
.alert-status { flex: 1; font-size: 9px; }
.alert-del-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--gray);
  font-size: 9px;
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  margin-left: auto;
}
.alert-del-btn:hover { border-color: var(--red); color: var(--red); }

/* ── Canvas defaults ── */
canvas { display: block; }

/* ═══════════════════════════════════════════════════════════
   QUANT MODELS v6.0 — STYLES
   BSM, CAPM, MPT, Risk Parity, Mean-Rev, Momentum, Pairs, HFT
   Supply Chain Dynamic, PMANSUR Score, Alerts
   ═══════════════════════════════════════════════════════════ */

/* ── Gold Quant Tab Buttons ── */
.analysis-tab-btn.quant-tab {
  color: #ffd700;
  border-color: #ffd70055;
  background: rgba(255,215,0,0.04);
  font-size: 9px;
  padding: 3px 7px;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}
.analysis-tab-btn.quant-tab:hover {
  background: rgba(255,215,0,0.12);
  border-color: #ffd700;
  color: #fff8d0;
}
.analysis-tab-btn.quant-tab.active {
  background: rgba(255,215,0,0.15);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.analysis-tab-btn.supply-plus-tab { color: #ff6600; border-color: #ff660055; }
.analysis-tab-btn.supply-plus-tab:hover { background: rgba(255,102,0,0.12); border-color:#ff6600; }
.analysis-tab-btn.supply-plus-tab.active { background: rgba(255,102,0,0.15); border-color:#ff6600; box-shadow: 0 0 8px rgba(255,102,0,0.3); }

/* ── PMANSUR Score Widget ── */
.pmansur-score-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 3px;
  cursor: default;
  white-space: nowrap;
}

/* ── Base Quant Panel ── */
.qm-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--bg-panel);
}
.qm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #050505;
  border-bottom: 1px solid rgba(255,215,0,0.25);
  flex-shrink: 0;
}
.qm-title {
  font-size: 10px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.08em;
  flex: 1;
}
.qm-sym {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 2px;
}
.qm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 8px;
  padding: 8px;
}
.qm-left {
  min-width: 220px;
  max-width: 260px;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qm-right {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.qm-section-label {
  font-size: 9px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 0 2px;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: 3px;
}
.qm-chart-title {
  font-size: 9px;
  color: #666;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 1px solid #181818;
}

/* ── Controls Grid ── */
.qm-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.qm-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qm-field label {
  font-size: 8px;
  color: #666;
  letter-spacing: 0.08em;
}
.qm-inp {
  background: #111;
  border: 1px solid #2a2a2a;
  color: #e8e8e8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 4px 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.qm-inp:focus { border-color: #ffd700; }
.qm-select {
  background: #111;
  border: 1px solid #2a2a2a;
  color: #e8e8e8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
  width: 100%;
}
.qm-run-btn {
  width: 100%;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.4);
  color: #ffd700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: all 0.15s;
  margin-top: 6px;
}
.qm-run-btn:hover {
  background: rgba(255,215,0,0.2);
  box-shadow: 0 0 8px rgba(255,215,0,0.3);
}

/* ── Results Box ── */
.qm-results-box {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qm-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.qm-rl {
  font-size: 9px;
  color: #666;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.qm-rv {
  font-size: 10px;
  font-weight: 600;
  color: #e8e8e8;
  white-space: nowrap;
  text-align: right;
}
.qm-divider {
  height: 1px;
  background: #1e1e1e;
  margin: 3px 0;
}

/* ── Canvas ── */
.qm-canvas {
  display: block;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
}

/* ── IV Solver Row ── */
.qm-iv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qm-iv-row .qm-field { flex: 1; min-width: 100px; }
.qm-iv-row .qm-run-btn { min-width: 80px; width: auto; margin-top: 0; padding: 4px 10px; font-size: 9px; }

/* ── Score Grid ── */
.qm-score-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
}
.qm-score-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #888;
}
.qm-score-item > span:first-child { min-width: 130px; }
.qm-score-item > span:last-child { min-width: 28px; text-align: right; font-weight: 700; }
.qm-score-bar {
  flex: 1;
  height: 8px;
  background: #1a1a1a;
  border-radius: 2px;
  overflow: hidden;
}
.qm-score-bar > div {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* ── Gauge Wrap ── */
.qm-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Factor Table ── */
.qm-factor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.qm-factor-table th {
  background: #0a0a0a;
  color: #ffd700;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #2a2a2a;
  white-space: nowrap;
}
.qm-factor-table td {
  padding: 3px 5px;
  border-bottom: 1px solid #181818;
  color: #aaa;
  font-size: 9px;
  white-space: nowrap;
}
.qm-factor-table tr:hover td { background: rgba(255,215,0,0.04); }

/* ── MPT Weights ── */
.qm-mpt-port { margin-bottom: 8px; }
.qm-weight-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}
.qm-wt-sym { min-width: 42px; font-size: 9px; color: #ffd700; font-weight: 600; }
.qm-wt-bar { flex: 1; height: 6px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
.qm-wt-bar > div { height: 100%; border-radius: 2px; min-width: 2px; }
.qm-wt-val { min-width: 36px; text-align: right; font-size: 9px; color: #888; }

/* ── Signal Display ── */
.qm-signal-mega {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 12px 8px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
}
.signal-badge { font-weight: 700; letter-spacing: 0.08em; }

/* ── All Signals List ── */
.qm-all-signals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
}
.qm-all-sig-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  font-size: 9px;
  background: rgba(255,255,255,0.02);
}

/* ── Quant Alert Overlay ── */
.qalert-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qalert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 9px;
  border-radius: 2px;
}
.qalert-signal { font-weight: 700; font-size: 10px; min-width: 36px; letter-spacing: 0.06em; }
.qalert-ticker { font-weight: 700; color: #ffd700; min-width: 44px; letter-spacing: 0.08em; }
.qalert-type { min-width: 80px; }
.qalert-stars { font-size: 9px; min-width: 50px; }
.qalert-price { min-width: 56px; color: #aaa; }
.qalert-ts { min-width: 60px; font-size: 8px; }

/* ── Flash Animations ── */
@keyframes flashSignal {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor; }
  50%       { opacity: 0.5; text-shadow: none; }
}
@keyframes flash-buy {
  0%, 100% { background: rgba(0,255,65,0.15); box-shadow: 0 0 10px rgba(0,255,65,0.4); }
  50%       { background: rgba(0,255,65,0.05); box-shadow: none; }
}
@keyframes flash-sell {
  0%, 100% { background: rgba(255,0,64,0.15); box-shadow: 0 0 10px rgba(255,0,64,0.4); }
  50%       { background: rgba(255,0,64,0.05); box-shadow: none; }
}
@keyframes flashGold {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ═══════════════════════════
   SUPPLY CHAIN DYNAMIC
   ═══════════════════════════ */

.sc-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--bg-panel);
}
.sc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #050505;
  border-bottom: 1px solid rgba(255,102,0,0.3);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sc-title {
  font-size: 10px;
  font-weight: 700;
  color: #ff6600;
  letter-spacing: 0.08em;
}
.sc-sym {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  padding: 2px 8px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 2px;
}
.sc-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.sc-ticker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
}
.sc-ticker-inp {
  width: 80px;
  background: #111;
  border: 1px solid rgba(255,215,0,0.3);
  color: #ffd700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  letter-spacing: 0.1em;
  outline: none;
  text-transform: uppercase;
}
.sc-ticker-inp:focus { border-color: #ffd700; }
.sc-search {
  width: 130px;
  background: #111;
  border: 1px solid #2a2a2a;
  color: #e8e8e8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 3px 6px;
  outline: none;
  text-transform: uppercase;
}
.sc-search:focus { border-color: #ff6600; }
.sc-btn {
  background: rgba(255,102,0,0.08);
  border: 1px solid rgba(255,102,0,0.35);
  color: #ff6600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.15s;
  white-space: nowrap;
}
.sc-btn:hover { background: rgba(255,102,0,0.18); }
.sc-btn.gold-btn {
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.4);
  color: #ffd700;
}
.sc-btn.gold-btn:hover { background: rgba(255,215,0,0.2); }

.sc-loading-bar {
  padding: 5px 10px;
  background: rgba(255,215,0,0.05);
  border-bottom: 1px solid #1a1a1a;
  font-size: 9px;
  color: #ffd700;
  animation: flashGold 1s infinite;
  flex-shrink: 0;
}
.sc-legend-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 10px;
  background: #080808;
  border-bottom: 1px solid #181818;
  font-size: 9px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sc-graph-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.sc-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}
.sc-detail-bar {
  display: flex;
  gap: 0;
  background: #080808;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.sc-detail-item {
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
  border-right: 1px solid #1a1a1a;
  min-width: 90px;
}
.sc-dl { font-size: 8px; color: #555; letter-spacing: 0.08em; }
.sc-dv { font-size: 9px; color: #aaa; font-weight: 600; }

.sc-info-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  background: #080808;
  border-top: 1px solid #1a1a1a;
  max-height: 130px;
  overflow-y: auto;
  flex-shrink: 0;
}
.sc-info-col {
  padding: 6px 8px;
  border-right: 1px solid #141414;
}
.sc-info-col:last-child { border-right: none; }
.sc-info-col-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 3px;
}
.sc-info-row {
  display: flex;
  gap: 5px;
  align-items: baseline;
  padding: 1px 0;
  font-size: 9px;
}
.sc-info-row:hover { background: rgba(255,255,255,0.03); }
.sc-info-row > span:first-child { min-width: 50px; font-weight: 600; }
.sc-info-row > span:nth-child(2) { flex: 1; }

/* ═══════════════════════════
   BSM SPECIFIC
   ═══════════════════════════ */

#tab-bsm .qm-body,
#tab-capm .qm-body,
#tab-mpt .qm-body,
#tab-risk-parity .qm-body,
#tab-meanrev .qm-body,
#tab-momentum .qm-body,
#tab-pairs .qm-body,
#tab-hft .qm-body {
  flex-direction: row;
}

/* ── Pairs Trading ── */
.pair-row:hover { color: #00ff41 !important; cursor: pointer; }

/* ═══════════════════════════
   HFT ORDER BOOK
   ═══════════════════════════ */

/* ── Scrollbars for quant panels ── */
.qm-left::-webkit-scrollbar,
.qm-right::-webkit-scrollbar,
.qm-all-signals::-webkit-scrollbar,
.qalert-list::-webkit-scrollbar,
.sc-info-grid::-webkit-scrollbar { width: 4px; }
.qm-left::-webkit-scrollbar-track,
.qm-right::-webkit-scrollbar-track,
.qm-all-signals::-webkit-scrollbar-track,
.sc-info-grid::-webkit-scrollbar-track { background: #0a0a0a; }
.qm-left::-webkit-scrollbar-thumb,
.qm-right::-webkit-scrollbar-thumb,
.qm-all-signals::-webkit-scrollbar-thumb,
.sc-info-grid::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

/* ═══════════════════════════
   RESPONSIVE TAB BAR QUANT
   ═══════════════════════════ */

.analysis-tab-bar {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* ── Canvas container responsive ── */
.qm-canvas, .sc-canvas {
  max-width: 100%;
  display: block;
}