/* ============================================
   theme.css — A股商务科技深色风 · 完整视觉层
   Node-StockLab · theme-ui 分支
   - 只做视觉/信息层，不碰策略/评分/选股/交易逻辑
   - 在 ui3.css 之后加载，全部为覆盖/新增规则
   - 设计语言：深空蓝黑 + 科技青/蓝渐变 + 克制的语义色
   ============================================ */

/* ---------- 设计令牌（深色默认 / 亮色覆盖） ---------- */
:root{
  --up:#ff6b7a; --down:#2ee6a8;                 /* A股约定：红涨绿跌 */
  --risk-high:#ff5d6c; --risk-mid:#fbbf24; --risk-low:#2ee6a8;
  --accent:#22d3ee; --accent2:#5ea2ff;          /* 科技青 / 科技蓝 */
  --panel2:#131d30;
  --glow:rgba(34,211,238,.22);
  --grad-brand:linear-gradient(90deg,#22d3ee,#5ea2ff);
  --grad-btn:linear-gradient(135deg,#0ea5a0,#2563eb);
}
body[data-theme=light]{
  --up:#dc2626;--down:#059669;
  --risk-high:#dc2626;--risk-mid:#d97706;--risk-low:#059669;
  --panel2:#f1f5f9;
  --glow:rgba(37,99,235,.18);
  --grad-btn:linear-gradient(135deg,#0d9488,#2563eb);
}

/* ---------- 页面底色：深空渐变 ---------- */
body{background:
  radial-gradient(1100px 520px at 85% -12%, rgba(34,211,238,.09), transparent 62%),
  radial-gradient(900px 520px at -8% 112%, rgba(59,130,246,.08), transparent 60%),
  var(--bg) !important;}

/* ---------- 侧栏：深蓝渐变 + 导航质感 ---------- */
.sidebar{background:linear-gradient(180deg,#0d1524,#0a101d);border-right:1px solid var(--line)}
.brand b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.06em}
.brand strong{color:var(--text)}
.nav{position:relative;border-radius:8px;margin:2px 8px;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.nav:hover{background:rgba(34,211,238,.08);color:var(--text)}
.nav.active{background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(59,130,246,.06));color:#fff;
  box-shadow:inset 2px 0 0 var(--accent);text-shadow:0 0 12px rgba(34,211,238,.35)}
body[data-theme=light] .sidebar{background:linear-gradient(180deg,#fbfcfe,#f3f5f9);border-right-color:#e2e8f0}
body[data-theme=light] .nav.active{background:linear-gradient(90deg,rgba(37,99,235,.12),rgba(37,99,235,.03));color:#1e40af}

/* ---------- 顶栏：毛玻璃 ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(10,16,29,.78) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.28)}
body[data-theme=light] .top{background:rgba(255,255,255,.82) !important;box-shadow:0 4px 16px rgba(15,23,42,.06)}

/* ---------- 卡片：玻璃渐变 + 柔和投影 + 聚焦光晕 ---------- */
.card{background:linear-gradient(180deg,rgba(19,29,48,.88),rgba(13,20,33,.92)) !important;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.32);
  transition:border-color .18s ease,box-shadow .18s ease}
.card:hover{border-color:rgba(94,162,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 38px rgba(0,0,0,.38),0 0 0 1px rgba(34,211,238,.06)}
body[data-theme=light] .card{background:#fff !important;box-shadow:0 4px 14px rgba(15,23,42,.05)}
body[data-theme=light] .card:hover{box-shadow:0 10px 26px rgba(15,23,42,.10)}

/* ---------- 主按钮：科技渐变 ---------- */
button.primary,.primary{background:var(--grad-btn) !important;border:none !important;color:#fff;
  box-shadow:0 4px 16px var(--glow),inset 0 1px 0 rgba(255,255,255,.18);transition:filter .18s ease,box-shadow .18s ease}
button.primary:hover,.primary:hover{filter:brightness(1.12);box-shadow:0 6px 22px var(--glow),inset 0 1px 0 rgba(255,255,255,.22)}

/* ---------- 模式/筛选 chip：选中发光 ---------- */
.mode.active,.chip.active{border-color:var(--accent) !important;color:var(--accent) !important;
  box-shadow:0 0 0 1px rgba(34,211,238,.28),0 0 14px rgba(34,211,238,.18);background:rgba(34,211,238,.07) !important}
.mode,.chip{transition:all .16s ease}

/* ---------- 指标卡 / 表格 ---------- */
.metric{background:linear-gradient(180deg,rgba(19,29,48,.8),rgba(13,20,33,.8)) !important;
  border:1px solid var(--line);border-radius:12px}
.metric strong{color:var(--accent2)}
table thead th{color:var(--muted);letter-spacing:.04em}
table tbody tr:hover{background:rgba(34,211,238,.045)}

/* ---------- 行情/跟踪卡片：层级 + 聚焦 ---------- */
.quote-item,.watch-card,.near-card{background:linear-gradient(180deg,rgba(19,29,48,.85),rgba(13,20,33,.85)) !important;
  border:1px solid var(--line);border-radius:12px;transition:border-color .18s ease,box-shadow .18s ease}
.quote-item:hover,.watch-card:hover,.near-card:hover{border-color:rgba(94,162,255,.4);box-shadow:0 8px 24px rgba(0,0,0,.35)}
body[data-theme=light] .quote-item,body[data-theme=light] .watch-card,body[data-theme=light] .near-card{background:#fff !important}

/* ---------- AI 操作日志：终端感 ---------- */
.ai-log-box{background:#070c16 !important;border:1px solid var(--line);border-radius:10px;
  font-family:Consolas,"Cascadia Mono",monospace;font-size:12px;color:#9fb4d8;
  box-shadow:inset 0 0 24px rgba(0,0,0,.4)}
/* 白天模式：日志框改浅色，避免深色刺眼 */
body[data-theme=light] .ai-log-box{background:#f3f5f9 !important;color:#334155 !important;
  box-shadow:inset 0 0 10px rgba(15,23,42,.05);border-color:#d1d5db}

/* ---------- 大盘数字 orb：发光 ---------- */
#orbNumber{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px var(--glow))}

/* ---------- 顶部市场状态徽章（复用 /api/market-state） ---------- */
#topMarketState{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:500;
  border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--panel2);cursor:default;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(8px)}
#topMarketState b{font-weight:700}
#topMarketState .ms-up{color:var(--up)}
#topMarketState .ms-down{color:var(--down)}
#topMarketState .ms-flat{color:var(--muted)}
#topMarketState .risk-h{color:var(--risk-high)}
#topMarketState .risk-m{color:var(--risk-mid)}
#topMarketState .risk-l{color:var(--risk-low)}
#topMarketState .ms-loading{color:var(--muted);animation:msPulse 1.6s ease-in-out infinite}
@keyframes msPulse{0%,100%{opacity:1}50%{opacity:.45}}
body[data-theme=light] #topMarketState{background:#f1f5f9;border-color:#d1d5db}

/* ---------- 风险语义色（全局） ---------- */
.risk-h{color:var(--risk-high) !important}
.risk-m{color:var(--risk-mid) !important}
.risk-l{color:var(--risk-low) !important}

/* ---------- 数字等宽：价格/涨跌幅不抖动 ---------- */
.up,.down,.metric strong,.watch-numbers b,.near-rank strong,.quote-item strong,.quote-item b,
.funnel-stage b,.score,.version-info b,#orbNumber,table td b,table td strong{font-variant-numeric:tabular-nums}

/* ---------- 页面切换微动效 ---------- */
.page.active{animation:fadeSlide .26s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- 细滚动条 ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,160,220,.22);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,160,220,.38)}

/* ---------- 操作说明页：流程图/步骤卡 ---------- */
.guide-card{margin-bottom:16px}
.guide-flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;padding:14px 4px}
.flow-node{flex:1;min-width:120px;background:linear-gradient(180deg,rgba(19,29,48,.85),rgba(13,20,33,.85));border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center;transition:border-color .18s ease}
.flow-node:hover{border-color:rgba(94,162,255,.4)}
.flow-node .flow-icon{display:block;font-size:26px;margin-bottom:6px}
.flow-node b{display:block;font-size:14px;margin-bottom:4px;color:var(--text)}
.flow-node small{font-size:11px;color:var(--muted);line-height:1.5}
.flow-arrow{align-self:center;color:var(--accent);font-size:18px;font-style:normal;padding:0 2px}
body[data-theme=light] .flow-node{background:#f8fafc;border-color:#d1d5db}
.guide-steps{display:flex;flex-direction:column;gap:10px}
.guide-step{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;background:var(--panel2);border-radius:10px;border:1px solid var(--line)}
.guide-step b{flex:0 0 90px;color:var(--accent);font-size:13px;padding-top:1px}
.guide-step span{font-size:13px;color:var(--text);line-height:1.6}
body[data-theme=light] .guide-step{background:#f8fafc}
@media(max-width:700px){.flow-node{min-width:100%}.flow-arrow{transform:rotate(90deg);align-self:center;padding:4px 0}}