/* ============================================================
   信息概览（gold-v1 定稿视觉）· 正式接入版
   ------------------------------------------------------------
   只服务 mobile/js/overview.js 渲染的 .ov-* 结构。
   设计值取自 design-gold-v1.css（用户已定稿），但：
   · 全部类名加 ov- 前缀，不与 mobile.css 既有选择器冲突（M04：不污染正式主题）
   · 变量局部化在 .ov-section 上，不改 :root（避免影响资讯/报告两栏目的既有视觉）
   · 字号沿用 mobile.css 的可读性下限结论（正文≥13.5 / 元信息≥12）
   ============================================================ */

.ov-section {
  /* —— gold-v1 局部变量（只在概览区内生效）—— */
  --ov-bg: #07080a;
  --ov-card-hi: #181a1e;
  --ov-card-lo: #0e1014;
  --ov-card-line: rgba(56, 62, 74, 0.5);
  --ov-text: #ecebe8;
  --ov-light: #f2d4a4;
  --ov-copper: #cc9166;

  /* 仪表外接尺寸。素材亮环外径只占图片 64.4%（实测 206/320），
     参考图环外径 ≈118 CSS → 图片盒 118/0.644 ≈ 183px。
     按 132px 设会让环只有 85 CSS（"仪表盘明显偏小"的根因，勿回退）。
     2026-09-29 首屏压缩：183 → 158（环外径 118 → 102，仍明显大于 85 的下限）。 */
  --ov-gauge: 158px;

  margin: 0 0 4px;
}

/* ---------- 资讯页头（设计稿版式，不含星球装饰）---------- */
.ov-hero {
  margin: 2px 0 16px;
}
.ov-hero-date {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ov-light);
}
.ov-hero-date i {
  font-style: normal;
  margin-left: 8px;
  font-weight: 500;
  color: var(--ov-label-2, rgba(236, 235, 232, 0.62));
}
.ov-hero-title {
  margin: 0;
  font-family: var(--f-serif, "Noto Serif SC", Georgia, serif);
  font-size: clamp(28px, 8.6vw, 33px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
}
.ov-hero-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(236, 235, 232, 0.62);
}

/* ---------- 卡头与分隔线（2026-09-29 合并仪表卡）----------
   「信息概览」标题在卡内；细分隔线负外边距通到卡缘，把上半仪表与
   下方七日焦点分成同卡的两个分区。 */
.ov-dash-head { margin: 0 0 6px; }
.ov-dash-sep {
  border: 0;
  border-top: 1px solid rgba(242, 212, 164, 0.14);
  margin: 10px -11px 0;
}

.ov-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

/* ---------- 总览卡片 ---------- */
.ov-dash {
  position: relative;
  padding: 7px 11px;
  border-radius: 14px;
  border: 1px solid var(--ov-card-line);
  background: linear-gradient(168deg, var(--ov-card-hi) 0%, #131519 46%, var(--ov-card-lo) 100%);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
/* 卡片顶部一道极淡的金色光带（点缀） */
.ov-dash::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(224, 168, 111, 0.30) 22%, rgba(242, 212, 164, 0.45) 50%,
    rgba(224, 168, 111, 0.30) 78%, transparent 100%);
  pointer-events: none;
}

/* 上排：圆环 + KPI 竖排 */
.ov-dash-top {
  display: grid;
  grid-template-columns: minmax(0, var(--ov-gauge)) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
/* 窄屏断点合并进 KPI 节末尾的 @media (max-width: 379px)。 */

/* ---------- 圆环仪表 ---------- */
.ov-gauge { display: flex; justify-content: center; }
.ov-gauge-stage {
  position: relative; isolation: isolate;
  width: 100%; max-width: var(--ov-gauge);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.ov-gauge-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* 素材是不透明黑底图（交接单明示，非透明 PNG）。
     设计稿整页就是纯黑底所以看不出；正式页卡片底是深灰渐变，
     必须把图片外沿的黑底淡出，否则露出一块方形黑底（实测踩过）。 */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 62%, transparent 96%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 62%, transparent 96%);
}
/* 环描边：素材环半径占半宽 ≈0.613（实测正圆，椭圆度 1.037）→ 内缩 19% */
.ov-gauge-stage::before {
  content: '';
  position: absolute; inset: 19%;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 200, 140, 0.55);
  box-shadow: 0 0 12px 2px rgba(224, 168, 111, 0.34),
              inset 0 0 10px 1px rgba(224, 168, 111, 0.22);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(135deg, #000 6%, rgba(0,0,0,0.90) 44%, rgba(0,0,0,0.42) 100%);
  mask-image: linear-gradient(135deg, #000 6%, rgba(0,0,0,0.90) 44%, rgba(0,0,0,0.42) 100%);
  animation: ov-ring-breathe 8s ease-in-out infinite;
}
/* 环外柔光（与环本体同步 8s） */
.ov-gauge-stage::after {
  content: '';
  position: absolute; inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 212, 164, 0.18) 0%, rgba(204, 145, 102, 0.09) 44%, transparent 70%);
  animation: ov-gauge-breathe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ov-ring-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}
@keyframes ov-gauge-breathe {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%      { opacity: 0.62; transform: scale(1.02); }
}

/* 环上亮点：旋转载体绕中心公转（26s/圈，很慢） */
.ov-gauge-ring {
  position: absolute; inset: 19%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  animation: ov-ring-spin 26s linear infinite;
}
@keyframes ov-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ov-gauge-node {
  position: absolute;
  top: 0; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  background: radial-gradient(circle, #fffaf0 0%, #f2d4a4 55%, rgba(242, 212, 164, 0) 100%);
  box-shadow: 0 0 9px 3px rgba(253, 240, 213, 0.75);
  animation: ov-node-pulse 8s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes ov-node-pulse {
  0%, 100% { opacity: 0.82; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.ov-gauge-copy {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.ov-gauge-value {
  font-size: 27px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.ov-gauge-label {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ov-light);
  opacity: 0.9;
}

/* ---------- 两项 KPI（PIL-103）----------
   原三格（信源数 / 7日热词 / AI 解读）缺少决策价值，改为仪表右侧单列两项：
   「24h动态」（独立 24h 统计）与「信源」（168h total_sources）。
   沿用 PIL-100 的排版结论：数值在上、短标签在下，行间只用细分隔线 + 留白。
   360px 实算：卡片内宽约 300，减仪表 158 + 间距 10，右栏约 130px；
   「24h动态」19px 数字 + 12px 四字标签（≈48px）均单行放得下。
   两项时格子更矮，不足以撑满 168px 仪表：grid-auto-rows:1fr 拉伸等高。 */
.ov-kpi-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  min-width: 0;
}
.ov-kpi-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 12px 4px;
  min-width: 0;
}
.ov-kpi-cell + .ov-kpi-cell {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ov-kpi-value {
  font-size: 19px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--ov-light);
  white-space: nowrap;
}
.ov-kpi-label {
  font-size: 13px;
  line-height: 1.3;
  color: rgba(235, 235, 245, 0.58);
  white-space: nowrap;
}

/* <379px：仪表上下排，KPI 退到仪表下方两列，分隔线随之转竖。 */
@media (max-width: 379px) {
  .ov-dash-top { grid-template-columns: minmax(0, 1fr); }
  .ov-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-kpi-cell + .ov-kpi-cell {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ---------- TOP 区宿主 ----------
   2026-09-29 合并仪表卡：宿主在卡内、分隔线之下，挂 hotspots.js 的
   七日焦点排名榜（.hs-*）；自身的纵向间距交给分隔线与卡底内边距。 */
.ov-top-host { margin-top: 2px; padding-bottom: 6px; }

/* ---------- 骨架 / 重试 ---------- */
.ov-body { display: grid; gap: 10px; }
.ov-skeleton {
  height: 78px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%);
  background-size: 220% 100%;
  animation: ov-shimmer 1.4s linear infinite;
}
@keyframes ov-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
.ov-retry {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 235, 245, 0.80);
  font-size: 13.5px;
  cursor: pointer;
}
.ov-retry:disabled { opacity: 0.55; }

/* ---------- 降级：不做呼吸/公转，但停在可见状态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ov-gauge-stage::before,
  .ov-gauge-stage::after,
  .ov-gauge-ring,
  .ov-gauge-node { animation: none !important; }
  .ov-gauge-stage::before { opacity: 1; }
  .ov-skeleton { animation: none !important; }
}