/* ============================================================
   慧望盘面播报（daa930.com）
   ============================================================ */

#page-watch .page-hero { min-height: 26vh; }
#page-watch .page-hero[data-page="watch"] .hero-nebula {
  background: radial-gradient(ellipse at 50% 60%, rgba(196,163,90,0.10) 0%, transparent 65%),
              radial-gradient(ellipse at 30% 40%, rgba(124,111,220,0.10) 0%, transparent 70%);
}
#page-watch .hero-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }

/* ---------- 容器 ---------- */
#wd-root {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-2xl);
}

/* ---------- 控制条 ---------- */
.wd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.wd-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-ink-dim);
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
}
.wd-btn:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface4);
}
.wd-btn:active { transform: translateY(1px) scale(0.98); background: var(--color-surface2); }

.wd-btn-main {
  color: var(--color-ink);
  border-color: var(--color-gold-dim);
  background: rgba(196, 163, 90, 0.12);
}
.wd-btn-main:hover { border-color: var(--color-gold); background: rgba(196, 163, 90, 0.2); }
.wd-btn-main.on {
  border-color: var(--color-gold);
  background: rgba(196, 163, 90, 0.28);
  color: #fff;
}
.wd-btn.on:not(.wd-btn-main) {
  border-color: var(--color-accent);
  color: var(--color-ink);
  background: rgba(124, 111, 220, 0.18);
}

.wd-status {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

/* ---------- 语速档位 ---------- */
.wd-speedrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: 0.6rem var(--space-md);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.wd-speed-k {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
}
.wd-speed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 语速滑杆。项目 UI 规则：可操作的元素要有可见框体 + 按下反馈，不能只靠颜色区分。
   轨道和滑块都给实线边框：滑块是金框实心块，按下时填成金色，拖到哪儿看得见。 */
.wd-rate {
  -webkit-appearance: none;
  appearance: none;
  width: 170px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.wd-rate::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.wd-rate::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  background: var(--color-surface4);
  border: 1px solid var(--color-gold);
  border-radius: 5px;
  transition: background var(--transition-fast);
}
.wd-rate:hover::-webkit-slider-thumb { background: rgba(196, 163, 90, 0.3); }
.wd-rate:active::-webkit-slider-thumb { background: var(--color-gold); }
.wd-rate:focus-visible { outline: 2px solid var(--color-accent-dim); outline-offset: 2px; }
/* Firefox 走另一套伪元素，不写就只有默认样式（无框） */
.wd-rate::-moz-range-track {
  height: 6px;
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.wd-rate::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-surface4);
  border: 1px solid var(--color-gold);
  border-radius: 5px;
}
/* 读数：跟档位按钮一个视觉（实心框），字号走等宽数字，拖动时数字跳变不会左右抖 */
.wd-rate-val {
  font-family: var(--font-num);
  font-size: 0.78rem;
  color: var(--color-ink);
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  min-width: 3.2em;
  text-align: center;
}
.wd-spd {
  font-family: var(--font-num);
  font-size: 0.78rem;
  color: var(--color-ink-dim);
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-spd:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface4);
}
.wd-spd:active { transform: translateY(1px) scale(0.96); background: var(--color-surface2); }
.wd-spd.on {
  color: var(--color-ink);
  border-color: var(--color-gold);
  background: rgba(196, 163, 90, 0.24);
}
.wd-speed-hint {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  margin-left: auto;
  /* 提示文字要能跟着窄屏换行，不能像语速那行那样被挤成一条竖线 */
  max-width: 100%;
}
/* 音色按钮：和语速档位同一套视觉（有实体边框、选中态换色），只是名字长短不一，
   所以要能换行——音色名的长度各机器差别很大（晓晓 到 Google 普通话（中国大陆））。 */
.wd-voice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.wd-voice .wd-spd { font-family: var(--font-body); }
.wd-voice-none { font-size: 0.72rem; color: var(--color-ink-muted); }

/* ---------- 播报模式（维度开关的预设） ---------- */
/* 一排单选：点一下换一套"看盘角度"。视觉语言和下面的维度开关保持一致——
   虚线边=没选，实心金边+浅金底=选中的那一个。两处都刻意不用"文字变灰"
   表示未选中（项目 UI 规则：可选项必须有可见框体，且不能只靠颜色区分状态），
   所以截图、色弱、灰度打印下都还分得出来选的是哪个。
   多一个「已微调」小角标：当前这套预设被手动改过，和原封不动的预设分得开。 */
.wd-moderow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: 0.6rem var(--space-md);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.wd-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.wd-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: left;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-mode:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface3);
}
.wd-mode:active { transform: translateY(1px) scale(0.96); }
.wd-mode.on {
  color: var(--color-ink);
  border: 1px solid var(--color-gold);
  background: rgba(196, 163, 90, 0.20);
}
.wd-mode-tw {
  font-size: 0.62rem;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  padding: 0 0.25rem;
}
.wd-mode-note {
  display: block;
  font-size: 0.62rem;
  color: var(--color-ink-muted);
}
.wd-mode-hint {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  margin-left: auto;
}

/* ---------- 播报维度开关 ---------- */
/* 每个可点的东西都有实心边框 + hover + :active（项目 UI 规则：禁止只靠文字颜色
   表示可选/已选）。关闭态不是"变灰了事"，而是边框样式本身变了（虚线 + 无填充），
   所以截图或色弱环境下也分得出来。 */
.wd-dimrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: 0.6rem var(--space-md);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.wd-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.wd-dimgroup {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wd-dim {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-dim:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface3);
}
.wd-dim:active { transform: translateY(1px) scale(0.96); }
.wd-dim.on {
  color: var(--color-ink);
  border: 1px solid var(--color-gold);
  background: rgba(196, 163, 90, 0.20);
}
/* 半开：组里有的开有的关。用实线但不上金色底，和"全开"区分开 */
.wd-dim.part {
  color: var(--color-ink-dim);
  border: 1px solid var(--color-accent-dim);
  background: rgba(124, 111, 220, 0.12);
}
.wd-dim.open { border-style: solid; }
.wd-dim-mark { font-size: 0.7rem; opacity: 0.85; }
.wd-subdims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--color-border);
}
.wd-subdim {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-subdim:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface3);
}
.wd-subdim:active { transform: translateY(1px) scale(0.96); }
.wd-subdim.on {
  color: var(--color-ink);
  border: 1px solid var(--color-gold);
  background: rgba(196, 163, 90, 0.18);
}
.wd-dim-hint {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  margin-left: auto;
}
.wd-status.live { color: #6fd48a; border-color: rgba(111,212,138,0.45); }
.wd-status.off  { color: var(--color-ink-muted); }
.wd-status.err  { color: #e08080; border-color: rgba(224,128,128,0.45); }
/* 部分源不可用：还在播、但少了东西，比 live 弱、比 err 轻 */
.wd-status.warn { color: #e0c07a; border-color: rgba(224,192,122,0.45); }

.wd-meta {
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  margin: var(--space-sm) 0 var(--space-md);
  letter-spacing: 0.02em;
}

/* ---------- 结构看板 ---------- */
.wd-stat {
  display: grid;
  /* 固定 5 列 → 10 个指标正好两行，不留半行空位 */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
/* 开盘前压在格子上的通栏标题。盘前那七十五分钟看板里摆的是**昨日收盘**的数，
   不写明是哪一天，扫一眼就会当成实时——用户口径（2026-09-24）：「早上一打开不应该
   有封板信息啊，应该将昨天信息汇总一下」。通栏（1 / -1）才不会挤乱下面 5 列的排布。 */
.wd-stat-head {
  grid-column: 1 / -1;
  background: var(--color-surface2);
  color: var(--color-gold);
  font-family: var(--font-num);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.wd-cell {
  background: var(--color-surface2);
  padding: 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.wd-k { font-size: 0.7rem; color: var(--color-ink-muted); letter-spacing: 0.05em; }
.wd-v {
  font-family: var(--font-num);
  font-size: 1.15rem;
  color: var(--color-ink);
}
.wd-v i { font-style: normal; font-size: 0.7rem; color: var(--color-ink-muted); }

/* ---------- 板块榜 ---------- */
.wd-boards {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: var(--color-surface2);
}
.wd-brow {
  display: grid;
  grid-template-columns: 1fr 4.5rem 5rem 1fr;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-border);
}
.wd-brow:last-child { border-bottom: none; }
.wd-brow.sealed { background: rgba(196, 163, 90, 0.07); }
.wd-bname { color: var(--color-ink); }
.wd-bpct { font-family: var(--font-num); color: #d98b6a; text-align: right; }
.wd-bup { color: var(--color-ink-muted); font-size: 0.75rem; text-align: right; }
.wd-bleader { color: var(--color-ink-dim); font-size: 0.78rem; text-align: right; }
.wd-brow.sealed .wd-bleader { color: var(--color-gold); }

/* ---------- 播报流 ---------- */
/* 标题行：左边"播报流"，右边"回到最新"（用户口径：同一行的最右边）。
   分隔线挂在这一行上而不是标题上，按钮才能跟着标题同一个基线，不另起一行。 */
.wd-hrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}
.wd-h {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-ink-dim);
  letter-spacing: 0.08em;
}

.wd-feed {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 120px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.wd-item {
  display: grid;
  grid-template-columns: 4.2rem auto 1fr auto;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.84rem;
  line-height: 1.6;
  animation: wdIn 0.35s ease-out;
}
@keyframes wdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.wd-item.wd-event   { border-left-color: var(--color-gold); }
.wd-item.wd-board   { border-left-color: var(--color-accent); }
.wd-item.wd-industry{ border-left-color: #4a8fb8; }
.wd-item.wd-summary { border-left-color: var(--color-border); }
.wd-item.wd-clock   { border-left-color: #8a6fb0; }
.wd-item.wd-news    { border-left-color: #6f8fa8; }

.wd-time { font-family: var(--font-num); color: var(--color-ink-muted); font-size: 0.75rem; }

.wd-label {
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}
.wd-icon {
  width: 1.25rem; height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
  color: #0a0e20;
  background: var(--color-gold);
  border-radius: 4px;
  align-self: center;
}
.wd-text { color: var(--color-ink); }

/* 个股标签（〔行业·次新·近20日强〕）。压一档亮度就够：标签是"扫一眼"用的元信息，
   和正文同色时它会混进句子里，而重到金色又会跟封板/炸板的图标抢注意力。
   用 --color-ink-dim（正文是 ink、时间戳是更暗的 ink-muted），夹在两者之间。 */
.wd-tags { color: var(--color-ink-dim); }

.wd-replay {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-replay:hover { color: var(--color-gold); border-color: var(--color-gold-dim); }
.wd-replay:active { transform: scale(0.9); background: var(--color-surface3); }

.wd-empty { padding: 2rem; text-align: center; color: var(--color-ink-muted); font-size: 0.8rem; }

/* ---------- 回到最新 ---------- */
/* 播报流是定高内滚的（62vh），最新的那条又插在最上面，所以信息一多，
   读到下面想回最新就得滚很久。按钮挂在标题行最右边，跟着标题一起走。
   只在"最新那条看不见"时出现（watch.js 的 syncTop 管显隐），所以它出现
   本身就等于一句提示：你现在看的不是最新。
   注意别给 .wd-top 写 display——作者样式会盖掉 [hidden] 的 display:none，
   按钮就永远藏不住了（下面那条 [hidden] 是防这一手的）。 */
.wd-top {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-dim);
  background: transparent;
  border: 1px solid var(--color-gold-dim);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wd-top[hidden] { display: none; }
.wd-top:hover { color: var(--color-ink); border-color: var(--color-gold); background: rgba(196, 163, 90, 0.16); }
.wd-top:active { transform: scale(0.96); background: rgba(196, 163, 90, 0.26); }

/* ---------- 免责声明 ---------- */
.wd-disclaimer {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface2);
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--color-ink-muted);
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .wd-brow { grid-template-columns: 1fr 4rem 1fr; }
  .wd-bup { display: none; }
  .wd-item { grid-template-columns: 3.6rem auto 1fr auto; font-size: 0.78rem; }
  .wd-stat { grid-template-columns: repeat(3, 1fr); }
}