/* =============================================================
   宏观数据看板（国家统计局）· 列表页顶部紧凑版
   -------------------------------------------------------------
   设计目标：融入站点主题 —— 不再用写死的深海军蓝 HUD，而是改用站点
   自己的玻璃表面变量（--surface / --bg / --line / --ink …），这样无论
   前台现在是 dawn / 国庆 / 党建 / 军队 / 哀悼 哪种主题，看板都和页面
   背景融洽，不会突兀地「镶」一块黑面板。
   涨红跌绿 —— 跟随中文财经习惯（与股票同向），但颜色加深到在浅色表面
   上也清晰可读。
   ============================================================= */

/* ---------------- 栏目标题（h1 在面板标题条中段）----------------
   2026-10-20：站长要求标题直接写进看板标题条、原来的页头大标题删掉。
   所以这里不再有独立的 .sb-head 块 —— h1 走 .sb__mid，与标题条同高。 */
.sb__mid{min-width:0;text-align:center;justify-self:center;max-width:100%}
.sb__title{margin:0;font-size:15px;font-weight:650;letter-spacing:.02em;line-height:1.3;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;}
.sb__sub{display:block;margin-top:2px;font-size:11px;font-weight:400;letter-spacing:0;
  color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;}

/* 面板本体：站点玻璃表面 + 极淡的科技色晕，圆角细线，和整站卡片同调 */
.sb{
  position:relative;overflow:visible;margin:0 0 18px;
  padding:12px 16px 10px;border-radius:16px;
  background:
    radial-gradient(120% 140% at 8% -20%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(90% 120% at 92% 0%, rgba(167,139,250,.08), transparent 62%),
    var(--surface, #ffffff);
  border:1px solid var(--line, rgba(16,32,72,.10));
  box-shadow:0 16px 38px -28px rgba(16,32,72,.45), inset 0 1px 0 rgba(255,255,255,.6);
  color:var(--ink, #101c3a);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* 细网格底纹：随主题走墨色，极淡；自身裁剪圆角，不再依赖 .sb 的 overflow */
.sb__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;overflow:hidden;border-radius:inherit;
  background-image:linear-gradient(rgba(16,32,72,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,32,72,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 78%);}
/* 顶部扫描光带：在浅色表面下调成柔和强调色，保留一点科技感 */
.sb__scan{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.6),rgba(167,139,250,.5),transparent);
  opacity:.5;animation:sbScan 8s linear infinite;}
@keyframes sbScan{0%{transform:translateY(0);opacity:0}12%{opacity:.5}100%{transform:translateY(58px);opacity:0}}

/* ---------------- 标题条 ----------------
   三栏：左（品牌+来源）· 中（页面标题 h1）· 右（期次+更新时间）。
   中栏吃剩余空间并居中 —— 站长要的「标题写进这条里」就是这个位置。 */
.sb__head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line, rgba(16,32,72,.10));}
.sb__headl{display:flex;align-items:center;gap:9px;min-width:0;}
.sb__dot{width:7px;height:7px;border-radius:50%;background:#34d399;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:sbPulse 2.4s ease-out infinite;}
@keyframes sbPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.sb__brand{font-size:14.5px;letter-spacing:.04em;color:var(--ink)}
.sb__src{font-size:11.5px;color:var(--muted);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb__headr{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.sb__tag{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  padding:5px 9px;border-radius:999px;color:var(--ink-2);
  background:var(--surface-3, rgba(16,32,72,.05));border:1px solid var(--line-2, rgba(16,32,72,.18));}
.sb__upd{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);}
/* 样例基线标记：看板展示的不是最新抓取数据时，明确标出来，不让站长误以为是实时数据 */
.sb__sample{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  padding:5px 9px;border-radius:999px;color:#b45309;
  background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.40);}

/* ---------------- KPI 卡片 ---------------- */
.sb__cards{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;}
.sb-card{position:relative;min-width:0;padding:9px 10px 8px;border-radius:11px;
  background:var(--surface-3, rgba(16,32,72,.035));
  border:1px solid var(--line, rgba(16,32,72,.10));
  transition:transform .35s var(--ease-out, ease),border-color .35s,box-shadow .35s;}
.sb-card::before{content:"";position:absolute;left:11px;right:11px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.8;}
.sb-card:hover{transform:translateY(-2px);border-color:var(--line-2, rgba(16,32,72,.2));
  box-shadow:0 14px 26px -20px rgba(16,32,72,.5);}
.sb-card--cyan{--acc:#0ea5e9}.sb-card--violet{--acc:#8b5cf6}.sb-card--amber{--acc:#d97706}
.sb-card--teal{--acc:#0d9488}.sb-card--orange{--acc:#ea580c}.sb-card--blue{--acc:#2563eb}

.sb-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
.sb-card__label{font-size:11.5px;color:var(--muted);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-card__scope{font:500 9.5px/1 ui-monospace,Menlo,monospace;color:var(--muted);flex:0 0 auto;}
.sb-card__val{display:flex;align-items:baseline;gap:3px;margin-top:5px;}
.sb-card__num{font:600 25px/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.sb-card__unit{font-size:10.5px;color:var(--muted);}
.sb-card__yoy{display:flex;align-items:baseline;gap:4px;margin-top:5px;
  font:600 13px/1 ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}
.sb-arrow{font-size:9px;}
.sb-card__yoytag{font-size:9.5px;color:var(--muted);font-weight:400;}
.sb-card__mom{font-size:10px;color:var(--ink-2);font-weight:500;margin-left:2px;}
.sb-card__note{margin:6px 0 0;font-size:10.5px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

/* 涨红跌绿（中文财经习惯）；在浅色表面加深，保证可读 */
.sb-dir--up{color:#d23b3b}.sb-dir--down{color:#0f9d6b}.sb-dir--flat{color:var(--muted)}
.sb-dir--up .sb-arrow{color:#d23b3b}.sb-dir--down .sb-arrow{color:#0f9d6b}
.sb-card__mom.sb-dir--up{color:#d23b3b}.sb-card__mom.sb-dir--down{color:#0f9d6b}

/* ---------------- 下半区：趋势线 + 数据带 ---------------- */
.sb__lower{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:12px;margin-top:9px;}
.sb-spark{padding:9px 11px 6px;border-radius:11px;
  background:var(--surface-3, rgba(16,32,72,.035));border:1px solid var(--line, rgba(16,32,72,.10));}
.sb-spark__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px;}
.sb-spark__label{font-size:11px;color:var(--muted);}
.sb-spark__range{font:500 9.5px/1 ui-monospace,Menlo,monospace;color:var(--muted);}
.sb-spark__svg{display:block;width:100%;height:40px;overflow:visible;}
.sb-spark__zero{stroke:var(--line-2, rgba(16,32,72,.2));stroke-width:.6;stroke-dasharray:2 3;}
.sb-spark__area{fill:url(#sbSparkFill);}
.sb-spark__line{fill:none;stroke:url(#sbSparkLine);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.35));}
.sb-spark__dot{fill:#8b5cf6;filter:drop-shadow(0 0 6px rgba(139,92,246,.7));}

.sb-band{position:relative;padding:9px 11px 8px;border-radius:11px;
  background:var(--surface-3, rgba(16,32,72,.035));border:1px solid var(--line, rgba(16,32,72,.10));}
.sb-band__head{font-size:11px;color:var(--ink-2);margin-bottom:6px;}
.sb-band__cols{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-items:end;}
.sb-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;}
.sb-col__v{font:600 11px/1 ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--ink);}
/* 零轴居中：正值柱向上、负值柱向下（否则 -21% 与 +31% 视觉上无法区分） */
.sb-col__bar{position:relative;width:100%;height:56px;border-radius:3px;
  background:
    repeating-linear-gradient(180deg,rgba(16,32,72,.06) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,rgba(16,32,72,.06),rgba(16,32,72,.03));}
.sb-col__bar::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line-2, rgba(16,32,72,.18));}
.sb-col__bar i{position:absolute;left:0;right:0;display:block;border-radius:3px;
  background:linear-gradient(180deg,currentColor,color-mix(in srgb,currentColor 45%,transparent));
  box-shadow:0 0 10px -2px currentColor;}
.sb-col__bar--up i{bottom:50%;}
.sb-col__bar--down i{top:50%;}
.sb-col__k{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* ---------------- 业态带 ---------------- */
.sb-forms{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  margin-top:8px;padding-top:7px;border-top:1px solid var(--line, rgba(16,32,72,.1));
  font-size:11px;color:var(--muted);}
.sb-forms__label{color:var(--muted);}
.sb-forms__it{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;}
.sb-forms__it b{font:600 11.5px/1 ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* ---------------- 术语悬停注释（2026-10-20）----------------
   鼠标悬停在带「?」或虚线下划线的术语上，弹出解释气泡。
   颜色全部走站点变量，气泡背景用 --bg-3（实白卡），在任何主题下都清晰。 */
.sb-card__label.has-tip{cursor:help;border-bottom:1px dashed currentColor;}
.sb-card__tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  width:min(260px, 72vw);
  padding:9px 11px;border-radius:10px;
  background:var(--bg-3, #fff);color:var(--ink-2);
  font-size:12px;line-height:1.6;text-align:left;
  border:1px solid var(--line-2, rgba(16,32,72,.2));
  box-shadow:0 12px 30px -12px rgba(16,32,72,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease-out, ease), transform .18s var(--ease-out, ease), visibility .18s;
  z-index:30;
}
.sb-card:hover .sb-card__tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

.sb-band__q{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:5px;
  border-radius:50%;
  background:var(--surface-3, rgba(16,32,72,.06));
  border:1px solid var(--line-2, rgba(16,32,72,.2));
  color:var(--muted);font-size:10px;font-weight:700;font-style:normal;
  cursor:help;vertical-align:middle;
}
.sb-band__tip{
  position:absolute;left:0;top:calc(100% + 6px);
  width:min(320px, 80vw);
  padding:9px 11px;border-radius:10px;
  background:var(--bg-3, #fff);color:var(--ink-2);
  font-size:12px;line-height:1.6;text-align:left;
  border:1px solid var(--line-2, rgba(16,32,72,.2));
  box-shadow:0 12px 30px -12px rgba(16,32,72,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px);
  transition:opacity .18s var(--ease-out, ease), transform .18s var(--ease-out, ease), visibility .18s;
  z-index:30;
}
.sb-band:hover .sb-band__tip{opacity:1;visibility:visible;transform:translateY(0);}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .sb__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sb__lower{grid-template-columns:minmax(0,1fr);}
  .sb-band__cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;}
}
@media (max-width:640px){
  .sb{padding:12px 13px 11px;border-radius:14px;}
  .sb__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sb-card__note{display:none;}
  .sb-card__num{font-size:17px;}
  .sb-card__val{margin-top:3px;}
  .sb-col__bar{height:34px;}
  .sb__head{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;}
  .sb__src{display:none;}
  /* 窄屏标题条放不下三栏：标题落到第二行、左对齐，完整显示不截断 */
  .sb__mid{grid-column:1 / -1;grid-row:2;justify-self:start;text-align:left;max-width:100%;}
  .sb__title{font-size:13px;white-space:normal;overflow:visible;text-overflow:clip;}
  .sb__sub{font-size:10.5px;}
  .sb-card__num{font-size:21px;}
  .sb-band__cols{grid-template-columns:repeat(4,minmax(0,1fr));}
  /* 窄屏 3 列时每列只有 ~100px，标签被省略号截成「网…」「人…」——
     这里让标签允许换行、期间小标签另起一行，保证指标名完整可读。 */
  .sb-card__top{flex-wrap:wrap;gap:2px 5px;}
  .sb-card__label{font-size:11px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;}
  .sb-card__scope{font-size:9px;flex:0 0 auto;}
  /* 窄屏下数值/涨跌幅不换行 flex 会撑破卡片 → 强制受父宽约束、允许换行 */
  .sb-card__val,.sb-card__yoy{flex-wrap:wrap;row-gap:2px;min-width:0;width:100%;max-width:100%;}
  .sb-card__num{font-size:16px;min-width:0;max-width:100%;overflow-wrap:anywhere;}
  .sb-card__unit{font-size:9.5px;}
  .sb-card__yoy{font-size:11.5px;gap:3px;}
  .sb-card__yoytag,.sb-card__mom{font-size:9px;white-space:nowrap;}
  /* 移动端：术语气泡改为视口底部居中的浮层，宽度不超过屏宽，杜绝横向溢出 */
  .sb-card__tip,.sb-band__tip{
    position:fixed;left:50%;right:auto;top:auto;bottom:16px;
    transform:translateX(-50%);
    width:min(300px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    box-shadow:0 16px 40px -10px rgba(16,32,72,.55);
    z-index:60;
  }
}
@media (prefers-reduced-motion:reduce){
  .sb__scan,.sb__dot{animation:none;}
}