/* ============================================================
   百昔心理匿名测评数据大屏 — 大屏样式
   深蓝科技风 · 三栏布局 · 数据可视化
   ============================================================ */
:root {
  --bg-0: #030a1a;
  --bg-1: #061630;
  --panel-bg: rgba(10, 30, 62, 0.55);
  --panel-border: var(--brand-1-soft);
  --cyan: #00e5ff;
  --blue: #3d7eff;
  --purple: #8b5cf6;
  --pink: #ff4d94;
  --green: #2ee6a8;
  --yellow: #ffd166;
  --orange: #ff8c42;
  --red: #ff5252;
  --text: #dceaff;
  --text-dim: rgba(220, 234, 255, 0.55);
  --num-font: 'DIN Alternate', 'Bahnschrift', 'Consolas', 'Menlo', monospace;
  /* 品牌强调色（默认 = 科技青蓝；screen.js 从后台「系统设置」拉取 primary/secondary_color 动态覆盖） */
  --brand-1: #00e5ff;
  --brand-2: #3d7eff;
  --brand-1-soft: rgba(0, 229, 255, 0.16);
  --brand-1-glow: rgba(0, 229, 255, 0.45);
  --brand-2-soft: rgba(61, 126, 255, 0.16);
  --brand-2-glow: rgba(61, 126, 255, 0.45);

  /* ---------- 大屏自适应量尺 ----------
     面板由 flex 撑满视口，内部尺寸却是按 1366×768 写死的固定 px，
     全屏到 1080p/1440p 后就成了「面板大、内容小」的稀疏观感。
     这里改用 vw+vh 合成的连续量尺：字号与条高随视口同步长大（以 vh 为主，
     因为面板高度由视口高度决定，宽屏矮窗不需要放大），
     1920×1080 约 1.3~1.55×、2560×1440 约 1.6×，并设上限防止超宽屏失衡。
     列宽用 em 相对字号表达，保证「定宽 + 省略号」的排版规则在放大后依然成立 */
  --fs-md: clamp(12.5px, 0.35vw + 1.05vh, 21px);    /* 排行正文 */
  --fs-sm: clamp(11px, 0.3vw + 0.92vh, 19px);       /* 名称、图例、单位等次级标签 */
  --fs-xs: clamp(10.5px, 0.28vw + 0.85vh, 17.5px);  /* 数量、占比等次要读数 */
  --fs-lg: clamp(13px, 0.38vw + 1.16vh, 22px);      /* 面板标题 */
  --fs-num: clamp(30px, 1.1vw + 1.95vh, 50px);      /* KPI 大数字 */
  --bar-h: clamp(8px, 1.05vh, 16px);                /* 排行条高度 */
  --bar-h-sm: clamp(6px, 0.78vh, 12px);             /* 年龄条高度 */
  --bar-h-lv: clamp(5px, 0.65vh, 10px);             /* 等级条高度 */
  --dot: clamp(4px, 0.52vh, 8px);                   /* 条形端头光点直径 */
  --pad-panel: clamp(10px, 1.2vh, 18px);            /* 面板内边距基准（10px ≈ 原 10px 12px 8px） */
  /* 行高上限：面板被撑得很高时行不再无限拉伸，多余高度交给 space-evenly 均分成行距，
     这样 10 行的排行榜在大屏上仍是「列表」而不是散开的点 */
  --row-max: clamp(32px, 4.2vh, 56px);
  --lv-row-max: clamp(44px, 7vh, 88px);
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at 50% -20%, #0c2b57 0%, var(--bg-1) 42%, var(--bg-0) 100%);
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* ---------- 背景 ---------- */
#bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.8;
}
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.9) 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.9) 30%, transparent 85%);
}

/* ---------- 顶部 ---------- */
.screen-header {
  position: relative;
  z-index: 2;
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(8, 28, 60, 0.85), rgba(8, 28, 60, 0.25));
  border-bottom: 1px solid var(--panel-border);
  overflow: hidden;
}
.screen-header::after {
  /* 扫光动效 */
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(100deg, transparent, var(--brand-1-soft), transparent);
  animation: sweep 6s linear infinite;
  pointer-events: none;
}
@keyframes sweep {
  to { left: 130%; }
}
.header-title { text-align: center; }
.header-title h1 {
  font-size: 26px;
  letter-spacing: 6px;
  font-weight: 700;
  background: linear-gradient(90deg, #7fe7ff, #4d9fff 55%, #b18cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 26px rgba(0, 150, 255, 0.45);
  animation: titleGlow 3.6s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  /* 优化：opacity 呼吸替代 filter:brightness（合成层友好，避免大标题整块重绘） */
  from { opacity: 0.85; }
  to   { opacity: 1; }
}
.header-sub {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--text-dim);
  margin-top: 2px;
}
.header-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.header-right { justify-content: flex-end; }
.header-left .brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-1);
  box-shadow: 0 0 12px var(--brand-1);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.header-left .brand-name {
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--brand-1);
  text-shadow: 0 0 10px var(--brand-1-glow);
}
/* 后台配置 Logo：注入 header 左侧，存在时隐藏装饰圆点 */
.header-left .site-logo-img {
  height: 26px;
  max-height: 26px;
  width: auto;
  display: inline-block;
  margin-right: 10px;
}
.header-left.has-logo .brand-dot { display: none; }
.scale-select {
  background: var(--brand-1-soft);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  max-width: 150px;
}
.scale-select option { background: #0a1e3e; color: var(--text); }
.live-clock {
  font-family: var(--num-font);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--brand-1);
  text-shadow: 0 0 10px var(--brand-1-glow);
  white-space: nowrap;
}
.fs-btn {
  background: var(--brand-1-soft);
  border: 1px solid var(--panel-border);
  color: var(--brand-1);
  width: 34px;
  height: 30px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s;
}
.fs-btn:hover {
  background: var(--brand-1-glow);
  box-shadow: 0 0 14px var(--brand-1-glow);
}

/* ---------- 主体 ---------- */
/* 兼容旧内核浏览器（电视内置浏览器等不支持 CSS Grid）：三栏改用 flex 实现 */
.screen-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px 16px 8px;
  min-height: 0;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  flex: 1;
}
.col-center { flex: 1.35; }

/* 面板通用 */
.panel {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  /* 内边距随视口放大；--pad-panel 为 10px 时推算结果就是原来的 10px 12px 8px */
  padding: var(--pad-panel) calc(var(--pad-panel) * 1.2) calc(var(--pad-panel) * 0.8);
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  transform: translateY(18px);
  animation: panelIn 0.7s ease forwards;
}
.panel:nth-child(1) { animation-delay: 0.05s; }
.panel:nth-child(2) { animation-delay: 0.15s; }
.panel:nth-child(3) { animation-delay: 0.25s; }
@keyframes panelIn {
  to { opacity: 1; transform: translateY(0); }
}
.panel::before {
  /* 四角描边 */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--brand-1), var(--brand-1)) top left / 14px 2px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) top left / 2px 14px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) top right / 14px 2px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) top right / 2px 14px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--brand-1), var(--brand-1)) bottom right / 2px 14px no-repeat;
  opacity: 0.55;
}
.panel-grow { flex: 1; }
.panel-title {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.5vw, 14px);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: clamp(6px, 0.6vh, 12px);
}
.panel-title i {
  width: clamp(4px, 0.28vw, 6px);
  height: clamp(14px, 0.8vw + 0.4vh, 22px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 8px var(--brand-1-glow);
}
.panel-title .panel-extra {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brand-1);
  text-shadow: 0 0 8px var(--brand-1-glow);
}
/* 风险等级分布：环形图 + 图例分布列表（比例对齐测评人群画像） */
.levels-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.levels-donut {
  flex: 0 0 42%;
  min-width: 0;
  height: 100%;
  min-height: 120px;
  position: relative;
}
.levels-legend {
  flex: 1;
  min-width: 0;
  /* 限宽居中：单列布局（窄视口浏览器）下面板全宽时，
     防止 lv-head 内 name 的 flex:1 把数量/百分比推到远处造成视觉分离 */
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(9px, 1vh, 18px);
  padding: 0;
}
.lv-row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 0.55vh, 10px);
  padding: clamp(6px, 0.6vh, 12px) clamp(9px, 0.6vw, 16px) clamp(7px, 0.7vh, 14px) clamp(12px, 0.8vw, 20px);
  /* 行高封顶：等级面板被拉高时行不跟着无限拉伸，多出的高度交给 .levels-legend 的 gap */
  max-height: var(--lv-row-max);
  border-radius: 8px;
  cursor: default;
  transition: background-color 0.22s ease;
}
/* 左侧等级色强调条：默认收短弱化，激活时展开点亮（scaleY 走合成层，不依赖百分比高度） */
.lv-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--lv-c);
  transform: scaleY(0.42);
  transform-origin: center;
  opacity: 0.3;
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.lv-row:hover,
.lv-row.is-active {
  background: var(--brand-1-soft);
}
.lv-row.is-active::before {
  transform: scaleY(1);
  opacity: 1;
  box-shadow: 0 0 10px var(--lv-g);
}
.lv-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.6vw, 14px);
  min-width: 0;
}
.lv-dot {
  width: clamp(8px, 1vh, 14px);
  height: clamp(8px, 1vh, 14px);
  border-radius: 50%;
  flex: none;
  background: var(--lv-c);
  box-shadow: 0 0 8px var(--lv-g);
}
.lv-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  color: rgba(220, 234, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.22s ease;
}
.lv-row.is-active .lv-name {
  color: #fff;
}
/* 占比：等级色高亮的主要读数 */
.lv-pct {
  flex: none;
  font-size: calc(var(--fs-md) + 3px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: var(--lv-c);
  text-shadow: 0 0 10px var(--lv-g);
}
/* 数量：次要读数，右对齐成列 */
.lv-count {
  flex: none;
  min-width: calc(var(--fs-xs) * 4.4);
  text-align: right;
  font-size: var(--fs-xs);
  color: rgba(220, 234, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
.lv-bar {
  position: relative;
  height: var(--bar-h-lv);
  border-radius: calc(var(--bar-h-lv) / 2);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.lv-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: calc(var(--bar-h-lv) / 2);
  overflow: hidden;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 端点光点 */
.lv-fill::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.45);
}
/* 流光扫过（复用 regionShine，各行错峰） */
.lv-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: regionShine 3.2s ease-in-out infinite;
}
.lv-row:nth-child(2) .lv-fill::after { animation-delay: 0.4s; }
.lv-row:nth-child(3) .lv-fill::after { animation-delay: 0.8s; }
.lv-row:nth-child(4) .lv-fill::after { animation-delay: 1.2s; }
.lv-row:nth-child(5) .lv-fill::after { animation-delay: 1.6s; }
/* 环形图中心：当前激活等级概览（内圈径向辉光随激活等级色变化） */
.lv-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--lv-glow, transparent) 0%, transparent 68%);
}
.lv-center-name {
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  color: rgba(220, 234, 255, 0.7);
}
.lv-center-pct {
  font-size: clamp(22px, 0.6vw + 1.5vh, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.lv-center-count {
  font-size: var(--fs-xs);
  color: rgba(220, 234, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
/* 趋势折线流光叠加层 */
.trend-wrap {
  position: relative;
}
.trend-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.panel-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

/* ---------- 左栏 KPI ---------- */
.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.1vh, 18px);
}
.kpi-card {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: var(--pad-panel) calc(var(--pad-panel) * 1.2) calc(var(--pad-panel) * 0.8);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: panelIn 0.6s ease forwards;
}
.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.12s; }
.kpi-card:nth-child(3) { animation-delay: 0.19s; }
.kpi-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-1), transparent);
  opacity: 0.7;
}
.kpi-num {
  font-family: var(--num-font);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-1);
  text-shadow: 0 0 16px var(--brand-1-glow);
  font-variant-numeric: tabular-nums;
}
.kpi-card:nth-child(2) .kpi-num { color: var(--brand-2); text-shadow: 0 0 16px var(--brand-2-glow); }
.kpi-card:nth-child(3) .kpi-num { color: var(--brand-1); text-shadow: 0 0 16px var(--brand-1-glow); }
.kpi-label {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ---------- 中栏 Hero ---------- */
.hero-total {
  position: relative;
  text-align: center;
  padding: 10px 0 6px;
  opacity: 0;
  transform: translateY(14px);
  animation: panelIn 0.6s ease 0.05s forwards;
}
/* hero 区：大数字居中独占（扫码入口已移至页脚右下角，不再分占主数据位） */
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  min-width: 0;
}
.hero-core { min-width: 0; }
.hero-label {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--text-dim);
}
.hero-num {
  font-family: var(--num-font);
  font-size: clamp(44px, 6.2vw, 74px);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #eaffff 10%, var(--brand-1) 55%, var(--brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(0, 190, 255, 0.45));
}
/* 二维码槽位：位于页脚上方的悬浮卡片内，纵向排列（码在上、标签在下） */
.qr-slot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
/* 关键：display:flex 会覆盖 hidden 属性的 UA 样式，必须显式声明，否则后台关闭开关后白框与文字仍显示 */
.qr-slot[hidden] {
  display: none !important;
}
.qr-box {
  /* 悬浮卡片不受页脚高度约束，二维码可以放大到远距离可扫的尺寸（约 2× 原 62px） */
  width: 132px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: #f4fbff;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 0 18px var(--brand-1-glow), inset 0 0 10px rgba(0, 60, 110, 0.06);
  overflow: hidden;
}
.qr-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
}
.qr-label {
  font-size: 12px;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--text-dim);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}
.hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-dim);
}
.hero-meta b {
  color: var(--brand-1);
  font-family: var(--num-font);
  font-weight: 600;
}
.hero-divider {
  width: 1px;
  height: 12px;
  background: var(--panel-border);
}

/* ---------- 人群画像 ---------- */
/* 与「风险等级分布」同一套视觉语言：环形图 + 中心读数 + 分级读数列表
   关键：.profile-body 用 align-items:stretch 让两列拿到确定高度，
   否则子项高度为内容自适应，配合 flex 基准会塌缩（参见 .levels-body 注释） */
.profile-body {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 0.8vw, 20px);
  /* 保底高度：Chart.js 圆环直径取容器宽高较小值，高度过小会让圆环缩成一小点。
     这里随视口高度增长（大屏下圆环同步变大，不再是小圆环配大片空白） */
  min-height: clamp(200px, 26vh, 330px);
}
.profile-gender {
  /* 36%：环形图列略窄，避免圆环两侧留白过多，同时把余量让给年龄条的条长 */
  flex: 0 0 36%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 14px);
}
.gender-ring {
  position: relative;
  flex: 1 1 auto;
  min-height: 92px;
}
/* canvas 必须脱离文档流：否则它自身高度会成为 .gender-ring 的内容高度基准，
   而 Chart.js 又按父容器回写 canvas 尺寸，两者互相拉扯会让容器持续增高（实测涨到 300px）。
   定位用长写法而非 inset，兼容旧内核浏览器 */
.gender-ring > canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
/* 中心读数：显示占比最高的性别 */
.gender-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.gender-center-name { font-size: var(--fs-sm); letter-spacing: 1px; color: rgba(220, 234, 255, 0.62); }
.gender-center-pct {
  font-size: clamp(18px, 0.5vw + 1.3vh, 30px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.gender-center-count { font-size: var(--fs-xs); color: rgba(220, 234, 255, 0.45); font-variant-numeric: tabular-nums; }
/* 自绘图例：发光圆点 + 名称 + 占比（主读数）+ 数量（次读数） */
.gender-legend {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, 0.6vh, 11px);
}
.gd-row {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.5vw, 13px);
  min-width: 0;
  font-size: var(--fs-sm);
}
.gd-dot {
  width: clamp(7px, 0.85vh, 13px);
  height: clamp(7px, 0.85vh, 13px);
  border-radius: 50%;
  flex: none;
  background: var(--gd-c);
  box-shadow: 0 0 7px var(--gd-g);
}
.gd-name {
  flex: 1;
  min-width: 0;
  color: rgba(220, 234, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gd-pct {
  flex: none;
  font-size: calc(var(--fs-sm) + 2px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--gd-c);
  text-shadow: 0 0 8px var(--gd-g);
  font-variant-numeric: tabular-nums;
}
.gd-count {
  flex: none;
  min-width: calc(var(--fs-xs) * 3.8);
  text-align: right;
  font-size: var(--fs-xs);
  color: rgba(220, 234, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
/* 年龄分布：区间名 + 品牌色占比主读数 + 数量次读数 + 渐变占比条（含端点光点） */
.profile-ages {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 22px);
  justify-content: center;
}
.age-row { font-size: var(--fs-sm); }
.age-head {
  display: flex;
  align-items: baseline;
  gap: clamp(6px, 0.45vw, 12px);
  margin-bottom: clamp(3px, 0.45vh, 8px);
}
.age-range {
  flex: 1;
  min-width: 0;
  color: rgba(220, 234, 255, 0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.age-pct {
  flex: none;
  font-size: calc(var(--fs-sm) + 2px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--brand-1);
  text-shadow: 0 0 8px var(--brand-1-glow);
  font-variant-numeric: tabular-nums;
}
.age-count {
  flex: none;
  min-width: calc(var(--fs-xs) * 3.2);
  text-align: right;
  font-size: var(--fs-xs);
  color: rgba(220, 234, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.age-track {
  position: relative;
  height: var(--bar-h-sm);
  border-radius: calc(var(--bar-h-sm) / 2);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.age-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  border-radius: calc(var(--bar-h-sm) / 2);
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 8px var(--brand-1-glow);
  /* 裁掉流光伪元素：否则扫过的高光会溢出到条右侧的空轨道上 */
  overflow: hidden;
  transition: width 1.1s cubic-bezier(0.22, 0.9, 0.36, 1);
}
.age-fill::before {
  /* 端点光点（与地区分布条一致） */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.45);
}
/* 年龄条流光：复用量表热度的 regionShine，5 行错峰 0.3s */
.age-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: regionShine 3.2s ease-in-out infinite;
}
#age-bars .age-row:nth-child(1) .age-fill::after { animation-delay: 0s; }
#age-bars .age-row:nth-child(2) .age-fill::after { animation-delay: 0.3s; }
#age-bars .age-row:nth-child(3) .age-fill::after { animation-delay: 0.6s; }
#age-bars .age-row:nth-child(4) .age-fill::after { animation-delay: 0.9s; }
#age-bars .age-row:nth-child(5) .age-fill::after { animation-delay: 1.2s; }

/* ---------- 排行条（地区分布 / 量表热度 通用组件） ---------- */
.rank-list {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(4px, 0.6vh, 12px);
  overflow: hidden;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 18px);
  font-size: var(--fs-md);
  /* 行高上限：面板被拉高时行不无限拉伸，多余高度由 space-evenly 均分成行距 */
  max-height: var(--row-max);
}
.rank-rank { flex: 0 0 calc(var(--fs-md) * 2.2); }
/* 名称列：两块采用同一规则（定宽 + 省略号）保证排行条起点对齐；
   定宽用字号倍数表达，放大后仍能容纳原有字数（量表 9 字、地区 2~3 字） */
.rank-name { flex: 0 0 calc(var(--fs-md) * 4); }
.rank-rank {
  font-family: var(--num-font);
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
}
.rank-row:nth-child(-n+3) .rank-rank { color: var(--orange); }
.rank-name {
  color: var(--text);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rank-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--bar-h);
  border-radius: calc(var(--bar-h) / 2);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.rank-fill {
  position: relative;
  /* 必须显式 block：该元素在 DOM 里是 <span>，父级 .rank-track 是普通块容器（非 flex 容器），
     不写 display 会保持 inline，width/height 全部失效 → 条宽恒为 0（条一直渲染不出来） */
  display: block;
  height: 100%;
  width: 0;
  border-radius: calc(var(--bar-h) / 2);
  overflow: hidden;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 10px var(--brand-1-glow);
  transition: width 1.1s cubic-bezier(0.22, 0.9, 0.36, 1);
}
/* 前三名：金橙→粉亮色渐变，呼应橙色序号 */
.rank-row:nth-child(-n+3) .rank-fill {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.95), rgba(255, 138, 76, 0.95) 50%, rgba(255, 77, 148, 0.95));
  box-shadow: 0 0 10px rgba(255, 138, 76, 0.5);
}
/* 端头光点 */
.rank-fill::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.55);
}
/* 流光扫过：量表热度全部 10 行（左栏视觉焦点）；地区分布保持静态数据感，不闪 */
#scale-list .rank-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: regionShine 3s ease-in-out infinite;
}
@keyframes regionShine {
  0%   { transform: translateX(-100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateX(350%); opacity: 0; }
}
/* 10 行错峰 0.25s：自上而下连成一道波次光带，而不是整列同时闪 */
#scale-list .rank-row:nth-child(1) .rank-fill::after { animation-delay: 0s; }
#scale-list .rank-row:nth-child(2) .rank-fill::after { animation-delay: 0.25s; }
#scale-list .rank-row:nth-child(3) .rank-fill::after { animation-delay: 0.5s; }
#scale-list .rank-row:nth-child(4) .rank-fill::after { animation-delay: 0.75s; }
#scale-list .rank-row:nth-child(5) .rank-fill::after { animation-delay: 1s; }
#scale-list .rank-row:nth-child(6) .rank-fill::after { animation-delay: 1.25s; }
#scale-list .rank-row:nth-child(7) .rank-fill::after { animation-delay: 1.5s; }
#scale-list .rank-row:nth-child(8) .rank-fill::after { animation-delay: 1.75s; }
#scale-list .rank-row:nth-child(9) .rank-fill::after { animation-delay: 2s; }
#scale-list .rank-row:nth-child(10) .rank-fill::after { animation-delay: 2.25s; }
/* 占比（次要读数，与 lv-count / gd-count 同族） */
.rank-pct {
  flex: none;
  min-width: calc(var(--fs-xs) * 3.8);
  text-align: right;
  font-size: var(--fs-xs);
  color: rgba(220, 234, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
.rank-count {
  flex: 0 0 calc(var(--fs-md) * 3.4);
  text-align: right;
  font-family: var(--num-font);
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
}
/* 量表名较长：列宽加宽（同为定宽策略，保证条起点对齐）；9.6em 可容纳 9 字中文名 */
#scale-list .rank-name { flex: 0 0 calc(var(--fs-md) * 9.6); }

/* ---------- 右栏：三面板等比可收缩 ----------
   修复：原风险面板 flex:0 1 auto（basis=内容高）优先占位，
   矮视口浏览器（电视内置浏览器等）下把 basis=0 的地区面板挤到只剩 2~3 行。
   统一 basis=0 按比例分摊，高度不足时三面板等比收缩 */
.col-right > .panel:first-child { flex: 1.15 1 0; }
.col-right > .panel-grow { flex: 1 1 0; }

/* ---------- 最新动态滚动 ---------- */
.panel-ticker { flex: 0.9 1 0; }
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.ticker-list {
  list-style: none;
  animation: tickerScroll 22s linear infinite;
}
.ticker-viewport:hover .ticker-list { animation-play-state: paused; }
@keyframes tickerScroll {
  to { transform: translateY(-50%); }
}
.ticker-list li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.6vw, 14px);
  font-size: clamp(11.5px, 0.3vw + 0.95vh, 19px);
  padding: clamp(6px, 0.8vh, 13px) 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.ticker-time {
  font-family: var(--num-font);
  color: var(--text-dim);
  flex: none;
}
.ticker-scale { color: var(--brand-1); font-weight: 600; flex: none; }
.ticker-desc {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex: none;
}

/* ---------- 底部 AI 洞察 ---------- */
.insight-bar {
  position: relative;
  z-index: 2;
  flex: none;
  min-height: 46px;
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), rgba(0, 229, 255, 0.10), rgba(255, 77, 148, 0.14));
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.ai-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--purple), var(--brand-2));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.55);
  animation: badgeBreath 2.4s ease-in-out infinite;
}
@keyframes badgeBreath {
  /* 优化：opacity 呼吸替代 box-shadow 动画（box-shadow 逐帧重算阴影昂贵，opacity 走合成层） */
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
.ai-text {
  /* 可收缩：文案过长时截断，避免把右下角二维码挤出页脚 */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-cursor {
  flex: none;
  width: 7px;
  height: 16px;
  background: var(--brand-1);
  animation: cursorBlink 0.9s steps(1) infinite;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}
/* 页脚右端：版本号 + 右下角扫码入口（margin-left:auto 整体靠右） */
.footer-right {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 扫码区触发按钮（点击固定展开；鼠标悬停也会自动浮出） */
.qr-toggle {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 20px;
  background: rgba(0, 229, 255, 0.05);
  color: var(--brand-1);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.22s, box-shadow 0.22s;
}
/* 与 .qr-slot 同理：display:flex 会覆盖 hidden 属性的 UA 样式，必须显式声明 */
.qr-toggle[hidden] { display: none; }
.qr-toggle:hover,
.qr-toggle.is-open {
  background: var(--brand-1-soft);
  box-shadow: 0 0 12px var(--brand-1-glow);
}
/* 箭头默认朝上（表示向上弹出卡片），展开后旋转朝下 */
.qr-toggle-ico {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  transition: transform 0.3s ease;
}
.qr-toggle.is-open .qr-toggle-ico { transform: rotate(180deg); }

/* 悬浮二维码卡片：绝对定位在页脚上方，完全脱离文档流，
   因此二维码可以放大到 132px 也不会挤压 AI 文案、不改变页脚高度。
   定位基准取 .insight-bar（高度固定 46px，比按钮组更稳定）：
   right:16px 与页脚内容右边界对齐，bottom:100%+8px 在页脚上方留 8px 间隙 */
.qr-corner {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9, 28, 58, 0.97), rgba(5, 17, 38, 0.97));
  border: 1px solid var(--brand-1-soft);
  box-shadow: 0 16px 40px rgba(2, 8, 22, 0.72), 0 0 24px var(--brand-1-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 0.9, 0.36, 1), visibility 0s linear 0.26s;
}
.qr-corner.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 0.9, 0.36, 1), visibility 0s linear 0s;
}
/* 移动端底部扫码区：桌面端隐藏（桌面扫码走页脚悬浮卡片），仅 ≤900px 媒体查询内显示 */
.qr-mobile { display: none; }
/* 大屏版本号（后台「大屏展示设置」配置） */
.ver-badge {
  flex: none;
  font-family: var(--num-font);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding: 3px 12px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 20px;
  background: rgba(0, 229, 255, 0.05);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
  white-space: nowrap;
}
/* 移动端页脚版本号：桌面端隐藏（桌面版号在吸底洞察条右侧），仅 ≤900px 媒体查询内显示 */
.ver-mobile { display: none; }

/* ---------- 密码解锁遮罩 ---------- */
.pw-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 10, 26, 0.88);
  backdrop-filter: blur(6px);
}
.pw-gate[hidden] { display: none; }
.pw-gate-box {
  width: min(360px, 88vw);
  text-align: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 30px 26px;
  animation: panelIn 0.5s ease forwards;
}
.pw-gate-icon { font-size: 34px; margin-bottom: 8px; }
.pw-gate-box h2 {
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 6px;
  color: var(--brand-1);
}
.pw-gate-box p {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.pw-gate-box input {
  width: 100%;
  background: var(--brand-1-soft);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 10px 14px;
  outline: none;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.pw-gate-box input:focus {
  border-color: var(--brand-1);
  box-shadow: 0 0 12px var(--brand-1-glow);
}
.pw-gate-err {
  font-size: 12px;
  color: var(--red);
  min-height: 18px;
  margin-top: 8px;
}
.pw-gate-btn {
  width: 100%;
  margin-top: 4px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #03101f;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.25s, box-shadow 0.25s;
}
.pw-gate-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 16px var(--brand-1-glow);
}

/* ---------- 移动端适配 ---------- */
/* 中等宽度桌面：悬浮卡片内的二维码略缩（仍是浮层，不影响布局） */
@media (max-width: 1180px) {
  .qr-box { width: 112px; border-radius: 10px; }
  .hero-num { font-size: clamp(38px, 5vw, 64px); }
}
/* 平板 / 手机竖屏：三栏改单栏，顶部栏改两行，AI 洞察条吸底 */
@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }

  /* 移动端扫码区：悬浮卡片依赖悬停/点击触发，小屏改为页面底部常驻区块；
     仅隐藏触发按钮与悬浮层（槽位样式复用，供底部区块继续使用） */
  .qr-toggle,
  .qr-corner { display: none; }
  .qr-mobile {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px, 8vw, 40px);
    padding: 20px 12px 8px;
  }
  /* hidden 属性优先级兜底：display:flex 会覆盖 UA 的 [hidden] 样式 */
  .qr-mobile[hidden] { display: none; }
  .qr-mobile .qr-box { width: clamp(96px, 30vw, 118px); }

  /* 移动端版本号：从吸底洞察条移到页面底部（扫码区下方）居中 */
  .footer-right .ver-badge { display: none; }
  .ver-mobile {
    display: flex;
    justify-content: center;
    padding: 4px 12px 12px;
  }
  /* hidden 属性优先级兜底：display:flex 会覆盖 UA 的 [hidden] 样式 */
  .ver-mobile[hidden] { display: none; }

  /* 顶部栏：标题独占首行，第二行为品牌 + 控件，避免被 overflow:hidden 裁切 */
  .screen-header {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 12px 10px;
  }
  .header-title {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
  }
  .header-title h1 { font-size: 18px; letter-spacing: 3px; }
  .header-sub { display: none; }
  .header-left { flex: 0 0 auto; }
  .header-right { flex: 1 1 auto; gap: 8px; }
  .live-clock { display: none; }

  /* 控件触控目标放大 */
  .scale-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    font-size: 13px;
    padding: 8px 10px;
  }
  .fs-btn {
    flex: none;
    width: 44px;
    height: 40px;
    font-size: 17px;
  }

  /* 主体：收紧间距，面板改为移动端可滚动高度 */
  .screen-main {
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 6px;
  }
  .col { gap: 10px; }
  .panel { min-height: 280px; padding: 10px 10px 8px; }
  .panel-body { min-height: 210px; }
  .panel-ticker { min-height: 240px; }

  .hero-num { font-size: clamp(40px, 11vw, 52px); }
  .hero-meta { flex-wrap: wrap; gap: 10px; }

  /* AI 洞察条：吸底常驻，避免滚到页面底部才可见 */
  .insight-bar {
    position: sticky;
    bottom: 0;
    height: auto;
    min-height: 46px;
    flex-wrap: wrap;
    row-gap: 6px;
    margin: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -6px 18px rgba(3, 10, 26, 0.55);
  }
  .ai-text { white-space: normal; }

  /* 移动端粒子背景降低密度感，减轻滚动渲染压力 */
  #bg-particles { opacity: 0.55; }
}

/* 手机（≤640px）：进一步缩小层级字号、图表区留足高度 */
@media (max-width: 640px) {
  .header-title h1 { font-size: 17px; letter-spacing: 2px; }
  .header-left .brand-name { font-size: 13px; letter-spacing: 2px; }
  .header-left .site-logo-img { height: 22px; max-height: 22px; margin-right: 6px; }

  .screen-main { padding: 10px 8px 4px; gap: 8px; }
  .col { gap: 8px; }

  .kpi-grid { gap: 8px; }
  .kpi-card { padding: 8px 10px 6px; }
  .kpi-num { font-size: 26px; }
  .kpi-label { font-size: 10.5px; letter-spacing: 0; }

  .hero-num { font-size: 46px; }
  .hero-label { font-size: 11px; letter-spacing: 3px; }
  .hero-meta { font-size: 11.5px; }

  .panel { min-height: 300px; }
  .panel-body { min-height: 220px; }
  .panel-title { font-size: 12.5px; letter-spacing: 1px; }

  /* 「风险等级分布」：401–640px 也改纵向堆叠 + 居中内容列（原来是左右双列：环形图贴左、图例贴右） */
  .levels-body { flex-direction: column; align-items: stretch; gap: 10px; }
  /* 堆叠后必须按内容排布，否则面板高度会塌缩：
     1) .col-right > .panel:first-child 的 flex:1.15 1 0 是为桌面「固定视口内分配行高」而设，
        基准 0 会把面板高度钉死在 min-height 上；
     2) .panel-body 基础规则 flex:1（基准 0）同样不贡献内容高度；
     3) 再叠加 .levels-legend 的 flex:1，5 行图例会被压成 0 高，溢出面板边框压到下一个面板 */
  .col-right > .panel:first-child { flex: 0 0 auto; }
  .panel-body.levels-body { flex: none; min-height: 0; }
  /* 环形图与图例统一收窄到 300px 并水平居中，形成一条居中的内容列（左右留白对称）。
     环形图必须显式 margin:auto：堆叠容器是 align-items:stretch，但该项已显式指定宽度，
     stretch 不生效会退化为左对齐，右侧会多出 52px 空档 */
  .levels-donut {
    flex: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    height: 180px;
    min-height: 180px;
  }
  .levels-legend {
    flex: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
    gap: 8px;
  }
  .lv-row { padding: 4px 7px 4px 10px; }

  .rank-row { gap: 6px; font-size: 11.5px; }
  .ticker-list li { font-size: 11px; padding: 5px 2px; }

  /* 密码遮罩：加大输入与按钮点击区域 */
  .pw-gate-box { padding: 24px 18px; }
  .pw-gate-box input,
  .pw-gate-btn { min-height: 46px; }
}

/* 小屏手机（≤400px）：内部双列改纵向堆叠 */
@media (max-width: 400px) {
  .header-title h1 { font-size: 15px; letter-spacing: 1px; }
  .header-left .brand-name { display: none; }

  .kpi-num { font-size: 24px; }
  .hero-num { font-size: 42px; }
  .hero-meta { font-size: 11px; gap: 8px; }
  .hero-divider { display: none; }

  .panel { min-height: 290px; }
  .panel-body { min-height: 200px; }

  /* 人群画像改纵向堆叠（「风险等级分布」的堆叠与居中已上移到 ≤640px 统一处理） */
  .profile-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* 堆叠后圆环需要独立的高度预算：.panel-body 基础规则 flex:1（基准 0）不贡献内容高度 */
  .profile-body { min-height: 0; }
  .profile-gender {
    flex: none;
    width: 100%;
  }
  /* 环形图定高（保证圆环直径），图例随内容 */
  .gender-ring {
    flex: none;
    height: 150px;
    min-height: 150px;
  }

  .rank-row { gap: 5px; font-size: 11px; }
}

/* ---------- 桌面三栏（≥901px）：图例行自适应均分面板高度 ----------
   关键：.levels-body 必须 align-items:stretch 让图例容器拿到确定高度。
   若沿用 center，图例高度为内容自适应，配合 flex-basis:0 会把各行压成 2px 并裁掉内容
   （这正是大屏「内容显示不全」的成因）；此处改为自然基准 + 等比增长，永不塌缩 */
@media (min-width: 901px) {
  /* 等级条收窄：原 clamp(5px, 0.65vh, 10px) 在 1080p 约 7px、2K 触顶 10px，右侧数据条偏粗；
     收到 4~7px（1080p 约 4.5px）。--dot 不动，端头光点维持原有观感 */
  :root { --bar-h-lv: clamp(4px, 0.42vh, 7px); }
  /* 标题（含「共 XXX 份」统计徽标）与第一张图例卡片之间留出安全间距：
     面板标题 margin-bottom 仅 4.5px（矮视口档），徽标正压在首行卡片上方 */
  .levels-body { align-items: stretch; padding-top: clamp(6px, 0.9vh, 12px); }
  .levels-legend { justify-content: center; gap: clamp(6px, 0.9vh, 16px); }
  .lv-row { flex: 1 1 auto; }
  .rank-list { gap: 0; }
  .rank-row { flex: 1 1 0; min-height: 0; }
}

/* ---------- 矮视口适配（高度不足的浏览器 / 电视内置浏览器等） ----------
   与宽度档位正交（限桌面三栏 ≥901px）：按视口高度逐级压缩固定尺寸，
   配合右栏 flex 等比收缩与列表行自适应，保证全部面板与行数完整可见 */
@media (max-height: 960px) and (min-width: 901px) {
  .screen-header { height: 54px; padding: 0 14px; }
  .header-title h1 { font-size: 22px; letter-spacing: 4px; }
  .screen-main { gap: 10px; padding: 10px 12px 6px; }
  .col { gap: 10px; }
  .panel { padding: clamp(6px, 0.85vh, 12px) clamp(9px, 0.55vw, 14px) clamp(5px, 0.7vh, 10px); }
  .panel-title { font-size: clamp(12px, 0.32vw + 1vh, 19px); margin-bottom: clamp(4px, 0.5vh, 10px); }
  .kpi-card { padding: clamp(6px, 0.85vh, 12px) clamp(9px, 0.55vw, 14px) clamp(5px, 0.7vh, 10px); }
  .kpi-num { font-size: clamp(26px, 1.05vw + 1.6vh, 44px); }
  .hero-total { padding: 6px 0 4px; }
  .hero-num { font-size: clamp(40px, 5vw, 58px); }
  .levels-donut { min-height: 96px; }
  .rank-row { gap: clamp(6px, 0.55vw, 13px); font-size: clamp(11.5px, 0.32vw + 0.92vh, 18px); }
  /* 人群画像压缩：环形图保底直径 + 图例/年龄行收紧 */
  .profile-body { min-height: 172px; }
  .gender-legend { gap: clamp(2px, 0.5vh, 9px); }
  .profile-ages { gap: clamp(6px, 0.9vh, 16px); }
  .gd-name,
  .age-range { font-size: clamp(10.5px, 0.28vw + 0.82vh, 16px); }
  /* 图例单行化：名称行 | 占比条 水平排列（原两行堆叠在压缩后内容溢出导致重叠错位） */
  .lv-row { flex-direction: row; align-items: center; gap: 8px; padding: 2px 8px; }
  .lv-head { flex: 0 1 auto; min-width: 0; gap: 6px; }
  .lv-name { flex: 0 1 auto; min-width: 3.5em; }
  /* 矮视口：条高再降一档（高度与圆角统一走变量，避免圆角大于条高） */
  .lv-bar { flex: 1 1 auto; min-width: 20px; --bar-h-lv: 3px; }
  .lv-count { min-width: 40px; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .screen-header { height: 46px; }
  .header-title h1 { font-size: 19px; letter-spacing: 3px; }
  .header-sub { display: none; }
  .screen-main { gap: 8px; padding: 8px 10px 4px; }
  .col { gap: 8px; }
  .panel { padding: clamp(5px, 0.75vh, 11px) clamp(8px, 0.5vw, 13px) clamp(4px, 0.6vh, 9px); border-radius: 8px; }
  .panel-title { font-size: clamp(11.5px, 0.3vw + 0.9vh, 17px); letter-spacing: 1px; }
  .kpi-card { padding: clamp(5px, 0.75vh, 11px) clamp(8px, 0.5vw, 13px) clamp(4px, 0.6vh, 9px); }
  .kpi-num { font-size: clamp(22px, 0.95vw + 1.45vh, 38px); }
  .hero-total { padding: 4px 0 2px; }
  .hero-num { font-size: clamp(34px, 4vw, 46px); }
  .hero-label { font-size: 11px; }
  .hero-meta { font-size: 11px; }
  .levels-donut { min-height: 76px; }
  .rank-row { gap: clamp(5px, 0.5vw, 11px); font-size: clamp(11px, 0.3vw + 0.85vh, 17px); }
  /* 人群画像进一步压缩（矮视口）：行更紧以把高度让给圆环直径，
     否则圆环缩到 85px 时中心读数（50.9% / 9,283 份）会溢出内圈 */
  .profile-body { min-height: 150px; }
  .gender-ring { min-height: 68px; }
  .gender-center-name { font-size: 10px; }
  .gender-center-pct { font-size: 15px; }
  .gender-center-count { font-size: 9px; }
  .profile-ages { gap: 4px; }
  .age-head { margin-bottom: 2px; }
  .age-track { height: 5px; }
  .gd-row,
  .age-row { font-size: 10px; }
  .gd-pct,
  .age-pct { font-size: 11.5px; }
  .gd-count,
  .age-count { font-size: 10px; min-width: 32px; }
  .lv-row { padding: 1px 8px; gap: 6px; }
  .lv-name { font-size: 11px; }
  .lv-pct { font-size: 13px; }
  .lv-count { font-size: 10px; min-width: 36px; }
  .lv-center-pct { font-size: 20px; }
  .ticker-list li { font-size: 11px; }
}