/* ============================================================
   MA·IV 量化选股系统 · 全局样式
   所有颜色均通过 CSS 变量定义，组件中不得硬编码颜色值
   ============================================================ */

:root {
  /* 背景层级 */
  --bg-base:        #0d1117;
  --bg-surface:     #161b22;
  --bg-elevated:    #1f2937;
  --bg-hover:       #21262d;

  /* 边框 */
  --border:         #30363d;
  --border-subtle:  #21262d;

  /* 文字 */
  --text-primary:   #ffffff;
  --text-secondary: #c9d1d9;
  --text-muted:     #8b949e;

  /* 信号颜色 */
  --signal-high:    #3fb950;
  --signal-mid:     #58a6ff;
  --signal-low:     #8b949e;
  --signal-warn:    #f85149;

  /* 行情颜色（美股惯例）*/
  --price-up:       #3fb950;
  --price-down:     #f85149;
  --price-flat:     #8b949e;

  /* 期权颜色 */
  --call-color:     #58a6ff;
  --put-color:      #f0883e;
  --hv-color:       #8b949e;

  /* 强调色 */
  --accent:         #388bfd;
  --accent-subtle:  #388bfd1a;

  /* 评分渐变 */
  --score-90:       #3fb950;
  --score-70:       #58a6ff;
  --score-50:       #e3b341;
  --score-30:       #f85149;

  /* 字体 */
  --font-mono: 'JetBrains Mono', monospace;
  --font-ui:   'Inter', sans-serif;

  /* 布局尺寸 */
  --header-height:       48px;
  --sidebar-width:       320px;
  --vol-subpanel-height:   80px;
  --macd-subpanel-height: 110px;
  --tab-bar-height:      38px;
  --resize-handle-width: 4px;
}

/* ============================================================
   Reset & Base
   ============================================================ */

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input {
  font-family: inherit;
}

/* ============================================================
   App Shell
   ============================================================ */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   Header
   ============================================================ */

#header {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-height);
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  user-select: none;
}

.header-logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Market status badge */
.header-market-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.status-dot.live {
  background: var(--signal-high);
  animation: blink 2s ease-in-out infinite;
}

.status-dot.pre,
.status-dot.ah {
  background: var(--score-50);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ET clock */
.header-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.header-spacer { flex: 1; }

/* WSS status button */
.header-wss {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.header-wss:hover {
  background: var(--bg-hover);
}

.wss-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--price-down);
  flex-shrink: 0;
}

.wss-dot.connected {
  background: var(--signal-high);
}

.header-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================
   Main Layout
   ============================================================ */

#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ============================================================
   Sidebar
   ============================================================ */

#sidebar {
  width: var(--sidebar-width);
  min-width: 260px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  position: relative;
}

.sidebar-search input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 5px 34px 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.sidebar-search input::placeholder {
  color: var(--text-muted);
}

.sidebar-search input:focus {
  border-color: var(--accent);
}

.search-clear-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.search-clear-btn.visible {
  display: flex;
}

.search-clear-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

#grid-container {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ============================================================
   Resize Handle
   ============================================================ */

#resize-handle {
  width: var(--resize-handle-width);
  background: var(--border-subtle);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}

#resize-handle:hover,
#resize-handle.dragging {
  background: var(--accent);
}

/* ============================================================
   Chart Area
   ============================================================ */

#chart-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg-base);
}

/* ============================================================
   Tab Bar
   ============================================================ */

#tab-bar {
  display: flex;
  align-items: center;
  height: var(--tab-bar-height);
  padding: 0 12px;
  gap: 2px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.tab-btn {
  padding: 4px 14px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ============================================================
   Chart Panels
   ============================================================ */

#chart-panels {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.chart-panel {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.chart-panel.active {
  display: flex;
  flex-direction: column;
}

/* 周期选择栏 */
#kline-period-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.period-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.period-btn:hover  { border-color: var(--accent); color: var(--text-secondary); }
.period-btn.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
.period-ext {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.period-ext input { accent-color: var(--accent); cursor: pointer; }

/* 图表水印（K线 / IV走势 / 期权链 公用）*/
#kline-watermark,
.chart-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  letter-spacing: 4px;
  white-space: nowrap;
}

/* K线图 Panel */
#kline-chart-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* IV走势 Panel */
.iv-trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 8px;
}

#iv-trend-container {
  position: relative;
  min-height: 0;
}

.options-summary.iv-trend-summary {
  width: 220px;
  min-width: 0;
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
}

#iv-call-action.buy {
  color: var(--signal-high);
}

#iv-call-action.watch {
  color: var(--score-50);
}

#iv-call-reason {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
  white-space: nowrap;
  line-height: 1.4;
}

.call-main-reason {
  display: flex;
  gap: 8px;
  color: var(--text-muted);
}

.call-main-reason b {
  color: var(--text-primary);
  font-weight: 700;
}

.call-reason-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.call-reason-title {
  font-size: 11px;
  color: var(--text-muted);
}

.call-reason-group.pass span:not(.call-reason-title) {
  color: var(--signal-high);
}

.call-reason-group.risk span:not(.call-reason-title) {
  color: var(--score-50);
}

.call-reason-group.missing span:not(.call-reason-title) {
  color: var(--score-low);
}

/* After-close independent ML ranking */
#panel-close-rank,
#panel-structure-rank,
#panel-squeeze-15m {
  background: var(--bg-base);
  overflow: hidden;
}

.close-rank-toolbar {
  height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.close-rank-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.close-rank-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 12px;
}

.squeeze-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.squeeze-period-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.squeeze-period-btn {
  min-width: 52px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}

.squeeze-period-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.squeeze-period-btn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.close-rank-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
}

.close-rank-header,
.close-rank-row {
  display: grid;
  grid-template-columns: 52px 72px 72px 82px 88px 96px 88px 70px 52px 76px 76px 70px 70px 70px 58px 86px 86px;
  align-items: center;
  column-gap: 12px;
  padding: 0 20px;
  min-width: 1390px;
}

.close-rank-header {
  height: 38px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.close-rank-list {
  flex: 1;
  overflow: auto;
}

.close-rank-row {
  height: 44px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

/* 粘合起爆面板列表行字体缩小一号 */
#panel-squeeze-15m .close-rank-row {
  font-size: 11px;
  height: 40px;
}

.close-rank-row:hover {
  background: var(--bg-hover);
}

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

.close-rank-symbol {
  color: var(--text-primary);
  font-weight: 600;
}

.close-rank-score {
  width: 54px;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
}

.close-rank-score.high {
  color: var(--signal-high);
  background: rgba(63, 185, 80, 0.12);
}

.close-rank-positive {
  color: var(--price-up);
}

.close-rank-negative {
  color: var(--price-down);
}

.close-rank-aligned {
  color: var(--signal-high);
}

.close-rank-empty {
  display: none;
  padding: 44px 20px;
  text-align: center;
  color: var(--text-muted);
}

.close-rank-empty.visible {
  display: block;
}


/* 结构排名手动刷新按钮 */
.sr-refresh-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sr-refresh-btn:hover  { border-color: var(--accent); color: var(--accent); }
.sr-refresh-btn:active { opacity: 0.7; }
.sr-refresh-btn.loading {
  color: var(--text-muted);
  pointer-events: none;
  animation: sr-spin 1s linear infinite;
}
@keyframes sr-spin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.structure-rank-header,
.structure-rank-row {
  display: grid;
  grid-template-columns: 52px 72px 72px 150px 64px 82px 70px 82px 70px 52px 76px 70px 70px 70px 86px 82px 88px 82px 82px 96px 86px 72px 72px;
  align-items: center;
  column-gap: 8px;
  padding: 0 20px;
  min-width: 1940px;
}

.structure-rank-header {
  height: 38px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  flex-shrink: 0;
  will-change: transform;
}

.structure-rank-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.structure-rank-sort:hover,
.structure-rank-sort.active {
  color: var(--text-primary);
}

.structure-rank-row {
  height: 44px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

.structure-rank-row:hover {
  background: var(--bg-hover);
}

.trigger-badge {
  width: 64px;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  color: var(--text-muted);
  background: transparent;
}

.trigger-badge.watch {
  color: var(--score-50);
  background: rgba(227, 179, 65, 0.12);
}

.trigger-badge.strong {
  color: var(--signal-high);
  background: rgba(63, 185, 80, 0.14);
  font-weight: 700;
}

.pattern-label {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-label.watch {
  color: var(--score-50);
}

.pattern-label.high {
  color: var(--signal-high);
  font-weight: 700;
}

.call-action {
  width: 64px;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  color: var(--text-muted);
}

.call-action.watch {
  color: var(--score-50);
  background: rgba(227, 179, 65, 0.12);
}

.call-action.buy {
  color: var(--signal-high);
  background: rgba(63, 185, 80, 0.14);
  font-weight: 700;
}

/* ============================================================
   成交量 Subpanel + MACD Subpanel（K线Tab时固定显示在底部）
   ============================================================ */

#volume-subpanel {
  height: var(--vol-subpanel-height);
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

#volume-subpanel.hidden { display: none; }

#volume-chart-container {
  width: 100%;
  height: 100%;
}

.vol-legend {
  position: absolute;
  top: 4px;
  left: 10px;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  z-index: 2;
  pointer-events: none;
}

.vol-legend-item { color: var(--text-muted); }
.vol-legend-item .lbl { margin-right: 3px; }
.vol-legend-item .val { color: var(--text-primary); }

/* ── MACD 副图 ── */
#macd-subpanel {
  height: var(--macd-subpanel-height);
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

#macd-subpanel.hidden { display: none; }

#macd-chart-container {
  width: 100%;
  height: 100%;
}

.macd-legend {
  position: absolute;
  top: 4px;
  left: 10px;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  z-index: 2;
  pointer-events: none;
}

.macd-legend .lbl { color: var(--text-muted); margin-right: 3px; }
.macd-legend-item.dif  .val { color: #58a6ff; }
.macd-legend-item.dea  .val { color: #f0883e; }
.macd-legend-item.hist .val { color: var(--text-secondary); }


/* ============================================================
   量能分析 Panel
   ============================================================ */

#vol-analysis-body {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

/* 右侧摘要栏 */
#vol-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px 0 10px;
  order: 2;
}

/* 图表区在左 */
#vol-charts {
  order: 1;
}

.vol-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding: 0 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.vol-sidebar-subtitle {
  font-size: 12px;
  color: var(--accent);
  padding: 4px 12px 4px;
  font-weight: 600;
}

.vol-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.vol-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
}

.vol-metric-label { color: var(--text-muted); }
.vol-metric-value { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); text-align: right; max-width: 100px; }

.vol-recent-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 12px;
  font-size: 12px;
}
.vol-recent-date { color: var(--text-muted); }
.vol-recent-state { font-weight: 600; }
.vol-recent-score { color: var(--text-muted); font-family: var(--font-mono); }

/* 右侧图表区（五层等高分割）*/
#vol-charts {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  order: 1;
}

.vol-chart-wrap {
  flex: 1;
  border-bottom: 1px solid var(--border);
  position: relative;
  min-height: 0;
}

/* 主图（价格K线）占更多高度，副图缩小 */
#vol-chart1 { flex: 2.8; }
#vol-chart2,
#vol-chart3,
#vol-chart4,
#vol-chart5 { flex: 1; }

.vol-chart-wrap:last-child { border-bottom: none; }

.vol-chart-label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 10px;
  color: var(--text-muted);
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
}

/* ============================================================
   期权链 Panel
   ============================================================ */

.options-expiry-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.expiry-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 2px;
}

.expiry-btn {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.expiry-btn:hover  { border-color: var(--accent); color: var(--accent); }
.expiry-btn.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }

.options-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.skew-chart-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border-subtle);
}

.options-summary {
  width: 210px;
  flex-shrink: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.summary-label { color: var(--text-secondary); }

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

/* 摘要分组 */
.summary-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 2px 0;
}

.summary-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Greeks 颜色 */
.greeks-delta { color: var(--text-primary); }
.greeks-gamma { color: #a78bfa; }   /* 紫色：Gamma */
.greeks-theta { color: var(--price-down); }   /* 红色：Theta（负值，时间耗损）*/
.greeks-vega  { color: var(--put-color); }    /* 橙色：Vega */
.greeks-call-oi { color: var(--call-color); } /* 蓝色：Call OI */
.greeks-put-oi  { color: var(--put-color); }  /* 橙色：Put OI */

.oi-chart-wrap {
  height: 120px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

/* ============================================================
   AG Grid 主题覆盖（Alpine Dark）
   ============================================================ */

.ag-theme-alpine-dark {
  --ag-background-color:            var(--bg-surface);
  --ag-odd-row-background-color:    var(--bg-surface);
  --ag-header-background-color:     var(--bg-elevated);
  --ag-border-color:                var(--border-subtle);
  --ag-row-border-color:            var(--border-subtle);
  --ag-selected-row-background-color: var(--bg-elevated);
  --ag-row-hover-color:             var(--bg-hover);
  --ag-foreground-color:            var(--text-primary);
  --ag-secondary-foreground-color:  var(--text-secondary);
  --ag-font-size:                   12px;
  --ag-font-family:                 var(--font-ui);
  --ag-header-column-resize-handle-color: var(--border);
  --ag-cell-horizontal-padding:     8px;
  --ag-row-height:                  32px;
  --ag-header-height:               36px;
}

.ag-theme-alpine-dark .ag-header-cell-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ag-theme-alpine-dark .ag-row-selected .ag-cell {
  background-color: var(--bg-elevated);
}

/* 等宽数字单元格 */
.cell-mono {
  font-family: var(--font-mono);
}

/* 评分色块 */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 0 5px;
}

.score-badge.s90 { background: var(--score-90); }
.score-badge.s70 { background: var(--score-70); }
.score-badge.s50 { background: var(--score-50); color: #0d1117; }
.score-badge.s30 { background: var(--score-30); }

/* IVP 颜色 */
.ivp-low  { color: var(--signal-high); }
.ivp-mid  { color: var(--text-secondary); }
.ivp-high { color: var(--signal-warn); }

/* 涨跌颜色 */
.change-up   { color: var(--price-up); }
.change-down { color: var(--price-down); }
.change-flat { color: var(--price-flat); }

/* Skew 颜色 */
.skew-pos { color: var(--put-color); }
.skew-neg { color: var(--call-color); }

/* 单元格闪烁动画（200ms）*/
@keyframes flash-up {
  from { background-color: #3fb95030; }
  to   { background-color: transparent; }
}

@keyframes flash-down {
  from { background-color: #f8514930; }
  to   { background-color: transparent; }
}

.flash-up   { animation: flash-up   0.2s ease-out forwards; }
.flash-down { animation: flash-down 0.2s ease-out forwards; }

/* ============================================================
   设置入口密码弹窗
   ============================================================ */

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

.settings-auth-overlay.hidden { display: none; }

.settings-auth-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 22px 24px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.settings-auth-title {
  font-size: 14px;
  font-weight: 600;
  color: #e6edf3;
  margin: 0;
}

#settings-auth-input {
  width: 100%;
  box-sizing: border-box;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 14px;
  color: #e6edf3;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  letter-spacing: 0.1em;
  transition: border-color 0.2s;
}
#settings-auth-input:focus { border-color: #1e88e5; }

.settings-auth-error {
  font-size: 12px;
  color: #f85149;
  margin: -4px 0 0;
}
.settings-auth-error.hidden { display: none; }

.settings-auth-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#settings-auth-cancel {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 5px;
  color: #8b949e;
  font-size: 13px;
  cursor: pointer;
}
#settings-auth-cancel:hover { border-color: #8b949e; }

#settings-auth-confirm {
  padding: 6px 14px;
  background: #1e88e5;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
#settings-auth-confirm:hover:not(:disabled) { opacity: 0.85; }
#settings-auth-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   加载遮罩（骨架屏）
   ============================================================ */

#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 999;
  transition: opacity 0.35s;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-logo {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.12em;
}

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* ============================================================
   Alert Toast（右上角飘入）
   ============================================================ */

#alert-container {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}

.alert-toast {
  background: var(--bg-elevated);
  border: 1px solid var(--signal-warn);
  border-left: 3px solid var(--signal-warn);
  border-radius: 4px;
  padding: 10px 14px;
  max-width: 300px;
  pointer-events: auto;
  animation: toast-in 0.25s ease-out;
}

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.alert-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.alert-symbol {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--signal-warn);
}

.alert-score {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--score-90);
}

.alert-reason {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-muted); }

/* ============================================================
   设置按钮（Header）
   ============================================================ */

.settings-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.settings-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--bg-hover);
}

/* ============================================================
   设置弹窗
   ============================================================ */

.settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.settings-overlay.active { display: flex; }

.settings-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.settings-close {
  color: var(--text-muted);
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.settings-close:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Tab 栏 */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stab-btn {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.stab-btn:hover  { color: var(--text-primary); }
.stab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* 面板内容 */
.stab-panel { display: none; flex-direction: column; overflow-y: auto; flex: 1; }
.stab-panel.active { display: flex; }

/* 参数组 */
.setting-group {
  padding: 14px 18px 4px;
}
.setting-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.setting-row label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.setting-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.setting-input-wrap input[type="number"] {
  width: 72px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.setting-input-wrap input[type="number"]:focus { border-color: var(--accent); }
.setting-unit {
  font-size: 11px;
  color: var(--text-muted);
}
.setting-hint {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
}

/* Toggle 开关 */
.setting-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-checkbox {
  display: none;
}

.toggle-label {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.toggle-label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: left 0.2s;
}

.toggle-checkbox:checked + .toggle-label {
  background: var(--signal-high);
  border-color: var(--signal-high);
}

.toggle-checkbox:checked + .toggle-label::after {
  left: 20px;
  background: #fff;
}

.toggle-text {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 50px;
}

/* 底部操作栏 */
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  margin-top: auto;
}
.setting-save-btn {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.setting-save-btn:hover { opacity: 0.85; }

/* Toast 通知 */
.settings-toast {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.settings-toast.toast-ok  { background: #3fb95020; color: var(--signal-high); }
.settings-toast.toast-err { background: #f8514920; color: var(--signal-warn); }

/* 股票池添加栏提示（重复警告）*/
.wl-add-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  min-height: 16px;
  padding: 0 18px 6px;
  color: #e3b341;
  transition: opacity 0.3s;
}

/* 股票池保存成功提示 */
.wl-save-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal-high);
  transition: opacity 0.3s;
  margin-right: auto;
}

/* ── 股票池 ── */
.wl-add-bar {
  display: flex;
  gap: 8px;
  padding: 12px 18px 8px;
  flex-shrink: 0;
}
.wl-add-bar input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 10px;
  outline: none;
  text-transform: uppercase;
}
.wl-add-bar input:focus { border-color: var(--accent); }
.wl-add-btn {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  padding: 5px 14px;
  transition: background 0.15s;
  white-space: nowrap;
}
.wl-add-btn:hover { background: var(--accent); color: #fff; }

/* 批量操作栏 */
.wl-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 8px;
  flex-shrink: 0;
}
.wl-tool-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.15s;
}
.wl-tool-btn:hover           { border-color: var(--accent); color: var(--accent); }
.wl-tool-btn.danger          { color: var(--signal-warn); border-color: #f8514940; }
.wl-tool-btn.danger:hover    { background: #f8514915; border-color: var(--signal-warn); }
.wl-sel-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  min-width: 50px;
}
.wl-total {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* 股票芯片网格 */
.wl-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-content: start;
}
.wl-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 2px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.wl-chip:hover    { border-color: var(--accent); background: var(--bg-hover); }
.wl-chip.selected {
  background: #f8514925;
  border-color: var(--signal-warn);
  color: var(--signal-warn);
}

/* ============================================================
   15分钟 Vegas 粘合起爆面板 — 对齐结构ML样式
   ============================================================ */

.squeeze-header,
.squeeze-row {
  display: grid;
  grid-template-columns: 52px 72px 62px 58px 118px 126px 64px 70px 82px 82px 58px 82px 82px 64px;
  align-items: center;
  padding: 0 18px;
  min-width: 1180px;
}

.squeeze-header {
  height: 38px;
  color: var(--text-muted);
  background: var(--bg-surface);
  font-size: 13px;
  font-weight: 500;
  will-change: transform;
  flex-shrink: 0;
}
.squeeze-header span {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}
.squeeze-header span:hover,
.squeeze-header span.active { color: var(--text-primary); }

.squeeze-row {
  height: 44px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.squeeze-row > span { text-align: center; }
.squeeze-row:hover { background: var(--bg-hover); }

/* 上穿类型徽章 */
.sq15-cross-strong { color: var(--signal-high); font-weight: 600; font-size: 13px; }
.sq15-cross-mid    { color: var(--signal-mid);  font-size: 13px; }
.sq15-cross-soft   { color: var(--signal-warn); font-size: 13px; }

.sq15-state-probe     { color: var(--score-50); font-weight: 600; font-size: 13px; }
.sq15-state-confirmed { color: var(--signal-mid); font-weight: 600; font-size: 13px; }
.sq15-state-secondary { color: var(--signal-high); font-weight: 700; font-size: 13px; }
.sq15-state-failed    { color: var(--signal-warn); font-weight: 600; font-size: 13px; }
.sq15-state-retest-watch     { color: var(--score-50); font-weight: 600; font-size: 13px; }
.sq15-state-extended-weak    { color: var(--score-50); font-weight: 600; font-size: 13px; }
.sq15-state-retest-launch    { color: var(--signal-high); font-weight: 700; font-size: 13px; }
.sq15-state-retest-confirmed { color: var(--signal-high); font-weight: 700; font-size: 13px; }
.sq15-pattern { color: var(--text-primary); font-size: 13px; }

/* ── U型底面板 ── */
.ub-stage-2 { color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.ub-stage-3 { color: var(--score-70);       font-weight: 600; font-size: 13px; }
.ub-stage-5 { color: var(--signal-high);    font-weight: 700; font-size: 13px; }
.ub-vol-ok  { color: var(--signal-high);    font-weight: 600; }
.ub-vol-no  { color: var(--text-muted); }
.close-rank-score.mid { color: var(--score-50); }

/* EMA200 状态 */
.sq15-ema200-yes { color: var(--signal-high); font-weight: 600; font-size: 11px; }
.sq15-ema200-no  { color: var(--signal-warn); font-size: 11px; }

/* 评分徽章中等色 */
.close-rank-score.mid { color: var(--signal-mid); background: rgba(88,166,255,0.10); }


/* ============================================================
   数字过渡（避免跳变）
   ============================================================ */

.transition-color {
  transition: color 0.2s;
}

/* ============================================================
   期权统计面板
   ============================================================ */

#panel-option-stats { background: var(--bg-base); overflow: hidden; }

.ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ops-symbol {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.ops-updated {
  font-size: 11px;
  color: var(--text-muted);
}

/* 三格卡片区 */
.ops-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.ops-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ops-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}
.ops-donut {
  width: 110px;
  height: 110px;
}
.ops-donut-labels {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-secondary);
}
.ops-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.ops-dot.call { background: var(--price-up); }
.ops-dot.put  { background: var(--price-down); }
.ops-donut-labels b { color: var(--text-primary); }
.ops-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ops-sub span { color: var(--signal-mid); font-weight: 600; }

/* 综合判断卡片 */
.ops-card-verdict { justify-content: flex-start; align-items: flex-start; }
.ops-verdict-badge {
  font-size: 28px;
  font-weight: 700;
  padding: 6px 0 4px;
  letter-spacing: 0.02em;
}
.verdict-bull { color: var(--signal-high); }
.verdict-bear { color: var(--signal-warn); }
.verdict-neut { color: var(--signal-mid); }

.ops-metrics { width: 100%; margin-top: 4px; }
.ops-metric-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
}
.ops-metric-row:last-child { border-bottom: none; }
.ops-metric-row span:last-child { color: var(--text-primary); font-family: var(--font-mono); }

/* PCR 折线图 */
.ops-chart-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 18px 12px;
  min-height: 0;
}
.ops-chart-title {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
#ops-pcr-chart {
  flex: 1;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}