/* ===== 看盘大屏（白底苹果风 · 与全站 v5 统一；保留红涨绿跌语义色） ===== */
.dash { background: transparent; min-height: calc(100vh - 90px); padding: 16px 18px 26px;
  max-width: var(--gl-content, 1720px); margin: 0 auto; color: var(--gl-ink, #0a0a0a);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }

/* ---- 顶栏 ---- */
.dash-top { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px; }
.dash-title h1 { font-size: 20px; margin: 0 0 3px; color: #0a0a0a; }
.dash-sub { color: var(--gl-ink-3, #86868b); font-size: 12.5px; }
.dash-sub b { color: var(--gl-ink-2, #48484a); font-weight: 600; }
.dash-idx { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 640px; min-width: 0; }
/* ★2026-10-15 用户要求：每个单元拉长、左右对齐铺满整行（basis 压到 96px 保证
   常见宽度 9 格单行铺满；窄屏自动换行且末行不出现超宽格） */
.db-idx-it { background: #fff; border: 1px solid var(--gl-line, #e3e4e6); border-radius: 9px;
  padding: 8px 14px; flex: 1 1 96px; min-width: 0; box-shadow: var(--gl-shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.db-idx-it .n { color: var(--gl-ink-3, #86868b); font-size: 12px; }
.db-idx-it .p { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; color: #0a0a0a; }
.db-idx-it .c { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ---- 网格与卡片 ---- */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.db-card { background: #fff; border: 1px solid rgba(0,0,0,.045); border-radius: 14px; padding: 14px 16px;
  min-width: 0; box-shadow: var(--gl-shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.db-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.db-h b { font-size: 15px; color: #0a0a0a; }
.db-h .db-sub { font-size: 12px; }
.db-seg { margin-left: auto; display: flex; background: rgba(0,0,0,.035); border-radius: 7px; padding: 2px; }
.db-seg button { border: 0; background: transparent; color: var(--gl-ink-3, #86868b); font-size: 12px;
  padding: 4px 12px; border-radius: 5px; cursor: pointer; }
.db-seg button.on { background: #27548c; color: #fff; }

/* ---- KPI ---- */
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; margin-bottom: 10px; }
.db-kpi { background: #fafafa; border: 1px solid var(--gl-line-l, #f0f0f2); border-radius:14px; padding: 7px 10px; }
.db-kpi .k { color: var(--gl-ink-3, #86868b); font-size: 11.5px; white-space: nowrap; }
.db-kpi .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; color: #0a0a0a; }
.db-kpi .v.sm { font-size: 14px; }
/* 可点选 KPI（涨跌停分析）：点击查看对应个股明细 */
.db-kpis.clickable .db-kpi { cursor: pointer; transition: border-color .15s, background .15s; }
.db-kpis.clickable .db-kpi:hover { background: #f0f6ff; }
.db-kpis.clickable .db-kpi.on { border-color: #27548c; background: var(--gl-blue-l, #eef3fa); }
.db-kpis.clickable .db-kpi.on .k { color: var(--gl-blue-d, #1d3f6b); }
.up-c { color: #e03131; } .dn-c { color: #0ca678; } .fl-c { color: var(--gl-ink-3, #86868b); }
.zt-c { color: #e03131; } .dt-c { color: #0ca678; } .zb-c { color: #f59f00; }

/* ---- 图表 ---- */
.db-chart { width: 100%; }

/* ---- 指数分时 ---- */
.db-intraday { display: flex; gap: 14px; }
.db-it { flex: 1; min-width: 0; background: #fafafa; border: 1px solid var(--gl-line-l, #f0f0f2);
  border-radius: 9px; padding: 10px 12px 2px; }
.db-it-h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 2px; }
.db-it-h .nm { color: var(--gl-ink-2, #48484a); font-weight: 600; }
.db-it-h .px { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: #0a0a0a; }
.db-it-h .pc { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ---- 表格 ---- */
.db-zt-tbl, .db-board-tbl { max-height: 240px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--gl-line-l, #f0f0f2); border-radius: 8px; }
.db-zt-tbl.tall { max-height: 300px; }
.db-zt-tbl table, .db-board-tbl table { width: 100%; border-collapse: collapse; font-size: 12px; }
#dbThemeTbody, #dbThemeHead + tbody { font-size: 11.5px; }
.db-zt-tbl table { min-width: 560px; }
.db-zt-tbl th, .db-board-tbl th { background: #fafafa; color: var(--gl-ink-3, #86868b); font-weight: 600; text-align: left;
  padding: 6px 8px; position: sticky; top: 0; white-space: nowrap; }
.db-zt-tbl td, .db-board-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--gl-line-l, #f0f0f2); color: var(--gl-ink-2, #48484a); white-space: nowrap; }
.db-zt-tbl tbody tr:hover, .db-board-tbl tbody tr:hover { background: var(--gl-blue-xl, #f6f9fd); }
.db-code { font-family: Consolas, monospace; color: #27548c; }
.db-theme-txt { color: var(--gl-ink-3, #86868b); overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: inline-block; vertical-align: bottom; }
.db-lb-tag { display: inline-block; min-width: 20px; text-align: center; border-radius: 4px;
  background: #fbeceb; color: #e03131; font-weight: 700; padding: 1px 5px; font-size: 11px; }
/* 个股内链（2026-10-15）：本页所有个股名称/代码点击进入本站「个股 360°」页 */
.db-slink { color: inherit; text-decoration: none; }
.db-slink:hover { color: #27548c; text-decoration: underline; }
a.db-chip { text-decoration: none; color: inherit; cursor: pointer; }
a.db-chip:hover { border-color: #0ca678; }
.db-lb-tag.hi { background: #e03131; color: #fff; }

/* ---- chips ---- */
.db-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.db-chip { background: #fafafa; border: 1px solid var(--gl-line-l, #f0f0f2); border-radius: 14px;
  padding: 3px 10px; font-size: 12px; color: var(--gl-ink-2, #48484a); white-space: nowrap; }
.db-chip b { color: #0a0a0a; }
.db-chip .cnt { color: var(--gl-ink-3, #86868b); font-size: 11px; margin-left: 3px; }
.db-chip.up { border-color: #f5c6c6; } .db-chip.up b { color: #e03131; }
.db-chip.dn { border-color: #b7e2d3; } .db-chip.dn b { color: #0ca678; }

/* ---- 事件列表 ---- */
.db-events { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
/* 题材关联：左题材列表 + 右个股表 */
.db-ev-layout { display: flex; gap: 10px; min-height: 360px; }
.db-ev-side { width: 168px; flex: none; display: flex; flex-direction: column; gap: 6px;
  max-height: 388px; overflow-y: auto; padding-right: 2px; }
.db-ev-it { background: #fff; border: 1px solid var(--gl-line-l, #f0f0f2); border-radius: 8px;
  padding: 7px 9px; font-size: 11.5px; color: var(--gl-ink-2, #48484a); cursor: pointer; line-height: 1.5; }
.db-ev-it:hover { background: #f0f6ff; }
.db-ev-it.on { border-color: #27548c; background: var(--gl-blue-l, #eef3fa); color: var(--gl-blue-d, #1d3f6b); }
.db-ev-it .d { color: var(--gl-ink-3, #86868b); font-size: 10.5px; }
.db-ev-it .cnt { float: right; color: #e03131; font-weight: 700; }
.db-ev-main { flex: 1; min-width: 0; }
.db-ev-sub { color: var(--gl-ink-3, #86868b); font-size: 12px; margin-bottom: 8px; }
/* ★2026-10-15 「市场涨跌状态」卡内两段式排版：分隔线 + 统一子标题 + 卡底来源小字
   ★同日追加（用户反馈太拥挤）：上图压矮、两图间距拉开呼吸 */
.db-split { height: 1px; background: #eef0f4; margin: 18px 0 12px; }
.db-subh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.db-subh b { font-size: 13px; color: #0a0a0a; }
.db-subh > span { font-size: 11px; color: #8a93a5; }
.db-subh .db-seg { margin-left: auto; align-self: center; }
.db-src { margin-top: 8px; font-size: 11px; color: #9aa3b2; }
/* ★2026-10-15 数据时点徽标：每个模块自报「实时 N s 前」或「快照 HH:MM」，
   让数据新鲜度一眼可见（避免再出现「看着像实时、其实是昨日快照」的误判） */
.db-stamp { margin-left: auto; font-size: 10.5px; color: #8a93a5; white-space: nowrap;
  border: 1px solid #e6e8ec; border-radius: 999px; padding: 1px 8px; line-height: 1.6; }
.db-stamp.live { color: #0a7d5c; border-color: #cfe8df; background: #f2faf7; }
.db-stamp.live::before { content: '●'; font-size: 8px; margin-right: 4px; color: #0ca678; }
.db-stamp.snap { color: #8a6d3b; border-color: #eee2cc; background: #fdf9f1; }
.db-stamp.snap::before { content: '◷'; font-size: 10px; margin-right: 3px; }
.db-stamp.bad { color: #b45309; border-color: #f0d9bd; background: #fdf3e7; }
/* ★2026-10-15 卡内填满：右侧「涨跌停分析」卡更高，本卡被 grid 拉伸后底部留白 →
   flex 纵排 + dbHist2 弹性占满剩余高度，来源小字钉在卡底 */
.db-card-breadth { display: flex; flex-direction: column; }
.db-card-breadth #dbHist2 { flex: 0 0 auto; min-height: 0; height: 320px; }   /* 399px 的 80% */
.db-card-breadth .db-src { margin-top: auto; padding-top: 8px; }
/* ★2026-10-15 热点概览卡：与左侧资金流向卡同构（flex 纵排），板块表弹性占满
   （14 行可完整展示、不再出现 240px 截断滚动），今日题材 chips 钉在卡底，消除死空白 */
.db-card-boards { display: flex; flex-direction: column; }
.db-card-boards .db-board-tbl { flex: 1 1 auto; min-height: 240px; max-height: none; }
.db-card-boards .db-chips { margin-top: 12px; }
/* ★2026-10-15 行3 两卡弹性填满（用户：下面的空间闲置着有什么用）：
   强势股表与热点事件题材区都向下拉伸占满卡片，与左侧高度对齐 */
.db-card-heat { display: flex; flex-direction: column; }
.db-card-heat #dbCohort { flex: 0 0 auto; }
.db-card-heat .db-zt-tbl.tall { flex: 0 0 auto; min-height: 0; max-height: 300px; }
.db-card-ev #dbThemeView:not([hidden]), .db-card-ev #dbEventView:not([hidden]) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.db-card-ev .db-ev-layout { flex: 1 1 auto; min-height: 0; }
.db-card-ev .db-ev-side { max-height: none; }
.db-card-ev .db-ev-main { display: flex; flex-direction: column; min-height: 0; }
.db-card-ev .db-ev-main .db-zt-tbl.tall { flex: 1 1 auto; min-height: 360px; max-height: none; }
.db-card-ev .db-events { flex: 1 1 auto; min-height: 360px; max-height: none; }
.db-ev-g { background: #fafafa; border: 1px solid var(--gl-line-l, #f0f0f2); border-radius: 9px; padding: 9px 12px; }
.db-ev-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.db-ev-h .ev-t { font-weight: 700; color: #0a0a0a; }
.db-ev-h .ev-c { color: var(--gl-ink-3, #86868b); font-size: 11.5px; }
.db-ev-tag { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 11px; }
.db-ev-tag.机会 { background: #fbeceb; color: #e03131; }
.db-ev-tag.风险 { background: #d8f3e9; color: #0ca678; }
.db-ev-tag.中性 { background: #f0f0f2; color: var(--gl-ink-3, #86868b); }
.db-ev-tag.重点 { background: #fff3dd; color: #b9740a; font-weight: 600; }
.db-ev-stocks { display: flex; flex-wrap: wrap; gap: 5px; }
.db-ev-st { display: inline-flex; gap: 4px; align-items: baseline; background: #fff;
  border: 1px solid var(--gl-line-l, #f0f0f2); border-radius: 6px; padding: 2px 8px; font-size: 12px;
  color: var(--gl-ink-2, #48484a); text-decoration: none; }
.db-ev-st:hover { border-color: #27548c; color: var(--gl-blue-d, #1d3f6b); }
.db-ev-st .cd { color: #27548c; font-family: Consolas, monospace; font-size: 11px; }
.db-ev-st .ct { color: var(--gl-ink-3, #86868b); font-size: 10.5px; }

/* ---- 页脚 ---- */
.dash-foot { color: var(--gl-ink-3, #86868b); font-size: 11.5px; line-height: 1.8; margin-top: 16px; }
.dash-foot b { color: var(--gl-ink-2, #48484a); }

/* ---- 滚动条（白底） ---- */
.dash ::-webkit-scrollbar { width: 8px; height: 8px; }
.dash ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.10); border-radius: 4px; }
.dash ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  .dash-grid > .db-card { grid-column: span 12 !important; }
  .db-two { flex-direction: column !important; }
  .db-intraday { flex-direction: column; }
  .db-ev-layout { flex-direction: column; }
  .db-ev-side { width: 100%; flex-direction: row; overflow-x: auto; max-height: none; }
  .db-ev-it { min-width: 150px; }
  .db-chart { overflow: hidden; }
  .db-chart canvas { max-width: 100%; }
}

/* ---- 手机端（≤720px）----
   ★2026-10-29 用户要求：手机浏览器打开可正常阅读。仅收紧间距与纵排热点三栏，
   不动桌面布局；表格横向滚动、图表随容器重排（dashboard.js 已有 resize 监听）。 */
@media (max-width: 720px) {
  body { overflow-x: hidden; }   /* 兜底：任何残余溢出不再扩视口（表格自滚动不受影响） */
  .dash { padding: 10px 10px 22px; }
  .dash-title h1 { font-size: 18px; }
  .db-h b { font-size: 14px; }
  .db-card { padding: 12px 12px; border-radius: 12px; }
  /* 热点概览三栏（天数图 + 题材卡 + 明细表 + 异动）纵排 */
  #dbHotRow { flex-direction: column; gap: 10px; }
  #dbHotCards, #dbHotTbl, #dbHotMoves { width: 100% !important; flex: 0 0 auto !important; max-height: 300px; }
  #dbHotMoves { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid #eef1f6; padding-top: 10px; }
  .db-kpi .v { font-size: 17px; }
  .dash-foot { font-size: 11px; }
}
.db-two { display: flex; gap: 14px; }
.db-two > .db-chart { flex: 1; min-width: 0; }
.db-two > .db-zt-tbl { flex: 1.25; min-width: 0; }

/* 实时状态徽标：live=数据全部实时 / part=部分通道受限降级 */
.db-live { font-weight: 500; font-size: 12.5px; }
.db-live.live { color: #0ca678; }
.db-live.part { color: #b26a00; }
.db-live::before { content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }

/* ★2026-10-15：实时通道状态条（右下角紧凑条；hover 显示错误细节） */
.db-live-bar { position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: flex; gap: 4px; padding: 4px 6px; background: rgba(255,255,255,.92);
  border: 1px solid #e3e6ee; border-radius: 6px; font-size: 11px; line-height: 1.4;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; color: #5a6478;
  backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(20,30,50,.08);
  user-select: none; }
.db-live-bar .lb-mode { padding: 0 4px; color: #27548c; font-weight: 600;
  border-right: 1px solid #e3e6ee; margin-right: 2px; }
.db-live-bar .lb-cell { padding: 1px 4px; border-radius: 3px; cursor: default; }
.db-live-bar .lb-ok { color: #0ca678; background: rgba(12,166,120,.08); }
.db-live-bar .lb-err { color: #c63a3a; background: rgba(198,58,58,.08); }
.db-live-bar .lb-wait { color: #8a93a5; }
.db-live-bar.good .lb-mode { color: #0ca678; }
.db-live-bar.part .lb-mode { color: #b26a00; }
.db-live-bar.bad .lb-mode { color: #c63a3a; }
@media (max-width: 720px) { .db-live-bar { font-size: 10px; right: 8px; bottom: 8px; } }

/* ===== 近15日独立卡 + 卡片自由拖动（2026-10-27） ===== */
.db-card-hist15 { display: flex; flex-direction: column; }
.db-card-hist15 #dbHist2 { flex: 0 0 auto; height: 230px; }
.db-grip { color: #c9d1de; font-size: 13px; margin-right: -2px; user-select: none; }
[data-card] .db-h { cursor: grab; }
[data-card] .db-h:active { cursor: grabbing; }
[data-card].gl-dragging { opacity: .5; outline: 2px dashed #27548c; outline-offset: 3px; }
[data-card].gl-drop-hint { outline: 2px dashed #b45309; outline-offset: 3px; }
#dbLayoutReset { margin-left: 10px; border: 1px solid #d8dee9; background: #fff; color: #5a6478; border-radius: 12px; padding: 1px 10px; font-size: 11px; cursor: pointer; vertical-align: 1px; }
#dbLayoutReset:hover { border-color: #27548c; color: #27548c; }



/* ---- 双列瀑布流（2026-10-27 用户要求：等宽卡紧凑填充，不留行对齐空白） ---- */
.dash-cols { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.dash-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dash-col > .db-card { width: 100%; }
/* ★2026-10-29 手机端适配（用户要求）：纵排瀑布流必须 align-items:stretch——
   基础规则 flex-start 会让每列按内容收缩（fit-content），被画布/表格 min-content
   撑到 726/2214px，页面横向溢出 → 手机浏览器扩视口 → 断点失效（恶性循环）。
   ★必须写在本文件靠后位置（晚于第 219 行基础规则）才能覆盖同特异性。 */
@media (max-width: 1100px) { .dash-cols { flex-direction: column; align-items: stretch; } }


/* 通栏卡拖动时的插入位置指示线（2026-10-27） */
.gl-band-line { height: 3px; background: #27548c; border-radius: 2px; margin: 7px 0; }