/* ==========================================================================
   销售数据大屏 v1 · 深色主题
   SPEC §4 布局：1920×1080 整体不滚动；模块 8 表格体内部滚动、表头 sticky。
   M5：调色板 ≤3 主色 + 1 强调，所有文字/轴线/分隔线显式给深色值。
   ========================================================================== */

:root {
  /* 背景层级 */
  --bg:            #080d16;
  --bg-grad-a:     #0a1220;
  --bg-grad-b:     #070b13;
  --panel:         #0e1726;
  --panel-soft:    #111c2e;
  --line:          #1c2740;
  --line-soft:     rgba(38, 51, 77, .55);

  /* 文字层级 */
  --text:          #c9d6e8;
  --text-strong:   #eef3fb;
  --text-dim:      #8296b0;   /* on panel #0e1726 = 5.93:1 */
  /* 7-5 修复：原 #5b6b85 只有 3.32:1（WCAG AA 要求 4.5:1）。
     取 #7c8ca6 = 5.27:1（on panel）/ 5.71:1（on page）：
     既过 AA，又仍然**暗于** --text-dim(5.93)，不会把「faint → dim → text」的层级倒过来。
     （#8b9bb5 有 6.37:1，但比 --text-dim 还亮，会造成层级反转，故不用） */
  --text-faint:    #7c8ca6;

  /* 主色 3 + 强调 1（与 app.js 的 PALETTE 保持同一套） */
  --c1:            #3d7dff;
  --c2:            #21c7a8;
  --c3:            #9b7dff;
  --accent:        #ffb454;

  --radius:        10px;
  --gap:           10px;
  --font:          -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
                   "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --mono:          "SFMono-Regular", "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

/* ── 滚动模型（SPEC §6.1 L1/L2）────────────────────────────────────────────
   纵向滚动放在内层 .app 上，而不是根元素：
   · 根元素一旦有纵向滚动条，documentElement.scrollWidth 会比 innerWidth 少 15px，
     L1 的 `docScrollW === innerW` 就永远不成立；
   · 滚动条改由 .app 承担后，根元素无滚动条 → scrollWidth === innerWidth === body.scrollWidth，
     而且 .app 的 border-box 仍然铺满整个视口宽度。
   html 也铺深色底：任何余白（含滚动条槽）都是深色，不可能露白。 */
html {
  height: 100%;
  background-color: var(--bg-grad-b);   /* L2：余白绝不露白 */
}

html, body {
  margin: 0;
}

body {
  height: 100%;
  overflow: hidden;                      /* 根元素不滚 → 无根滚动条 → L1 等式成立 */
  background:
    radial-gradient(1200px 620px at 12% -10%, rgba(61, 125, 255, .13), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(155, 125, 255, .10), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b)),
    var(--bg-grad-b);
  color: var(--text);
  font-family: var(--font);
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ── 骨架 ─────────────────────────────────────────────────────────────── */

.app {
  height: 100vh;
  overflow-y: auto;                      /* 允许纵向滚动（用户明确接受） */
  overflow-x: hidden;                    /* 禁止横向滚动 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 16px;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;                      /* 20px 字号的 chip 一行放不下时换行，而不是撑出横向滚动 */
  gap: 12px 20px;
  min-height: 44px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  /* 复审修 2：brand 曾因 flex:0 0 auto + 不换行把顶栏撑出横向滚动（390 宽溢出 46px） */
  min-width: 0;
  max-width: 100%;
}

.brand__text {
  min-width: 0;
}

.brand__mark {
  width: 4px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 0 14px rgba(61, 125, 255, .55);
}

.brand__text h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-strong);
}

.brand__sub {
  margin: 3px 0 0;
  font-size: 16px;
  color: var(--text-faint);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* 允许换行：窄屏下免责声明另起一行而不是撑破顶栏 */
  gap: 4px 10px;
  min-width: 0;
  white-space: normal;
}

/* 合成数据免责声明（SPEC §8）：不抢眼，但必须能看见 */
.disclaimer {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: #b39a72;
  letter-spacing: .2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── 筛选状态机 ───────────────────────────────────────────────────────── */

.filters {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 23, 38, .72);
}

.filter-group__label {
  padding: 0 10px 0 12px;
  font-size: 16px;
  color: var(--text-faint);
  letter-spacing: .5px;
  white-space: nowrap;
}

.chip {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.chip:hover {
  color: var(--text-strong);
  background: rgba(61, 125, 255, .12);
}

.chip:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 1px;
}

.chip.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(61, 125, 255, .85), rgba(61, 125, 255, .62));
  border-color: rgba(61, 125, 255, .9);
  box-shadow: 0 0 12px rgba(61, 125, 255, .35);
  font-weight: 600;
}

/* 致命态禁用（复审修 3）：点了不能改 state，也不能看起来可点 */
.chip:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
}

.chip:disabled:hover {
  color: var(--text-dim);
  background: transparent;
}

.filter-group[aria-disabled="true"] {
  opacity: .55;
}

/* ── 模块 1 · KPI 条 ──────────────────────────────────────────────────── */

.kpi-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  height: 132px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 46%),
    var(--panel);
}

.kpi-card__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kpi-card__label {
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: .6px;
}

.kpi-card__hint {
  font-size: 16px;
  color: var(--text-faint);
  font-family: var(--mono);
  /* 注意：这里原先有 opacity:.8 —— 半透明会把 #7c8ca6 的实际呈现压到约 3.8:1，
     等于把刚修好的 7-5 又打回去。文字可读性不允许用 opacity 调暗，要用颜色。 */
}

.kpi-card__num {
  display: flex;
  align-items: baseline;
  gap: 7px;                            /* 单位紧贴数字（设计评审：单位不能只写在标题里） */
  line-height: 1.1;
}

.kpi-value {
  font-size: 40px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

.kpi-unit {
  font-size: 16px;
  color: var(--text-faint);
}

.kpi-card__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c1), transparent 88%);
}

.kpi-card:nth-child(2) .kpi-card__bar { background: linear-gradient(180deg, var(--c2), transparent 88%); }
.kpi-card:nth-child(3) .kpi-card__bar { background: linear-gradient(180deg, var(--c3), transparent 88%); }
.kpi-card:nth-child(4) .kpi-card__bar { background: linear-gradient(180deg, var(--accent), transparent 88%); }

/* ── 图表网格 ─────────────────────────────────────────────────────────── */

.grid {
  /* 固定像素行高：字号放大后不允许再靠 1fr 压缩（压缩 = 字被挤爆）
     总高 260+260+320+380 + 3×10 gap = 1250px，加上页头/KPI 后页面纵向滚动，这是接受的。 */
  flex: 0 0 auto;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 360px 340px 360px 400px;
  grid-template-areas:
    "trend  trend  trend  trend  trend  trend  chan   chan   chan   chan   chan   chan"
    "region region region region region region cat    cat    cat    cat    cat    cat"
    "heat   heat   heat   heat   heat   heat   funnel funnel funnel funnel funnel funnel"
    "table  table  table  table  table  table  table  table  table  table  table  table";
}

.card--trend    { grid-area: trend; }
.card--channel  { grid-area: chan; }
.card--region   { grid-area: region; }
.card--category { grid-area: cat; }
.card--heatmap  { grid-area: heat; }
.card--funnel   { grid-area: funnel; }
.card--table    { grid-area: table; }

.card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 40%),
    var(--panel);
}

.card__hd {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px 4px;
}

.card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .3px;
  white-space: nowrap;
}

.card__title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--c1);
  vertical-align: -2px;
}

.card__meta {
  margin-left: auto;
  font-size: 16px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__bd {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 10px 8px;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* 逐模块空态（B4 / H3）：筛选空集时不白屏，就地显示提示 */
.card__empty {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-dim);
  background: rgba(8, 13, 22, .6);
  border-radius: 0 0 var(--radius) var(--radius);
  pointer-events: none;
}

body.is-empty .card__empty { display: flex; }

/* 致命失败（聚合模块/数据/图表库加载失败）：卡片也要挡住并说明，不能只剩空框（R4） */
body.is-fatal .card__empty {
  display: flex;
  color: #e2a79f;
  background: rgba(20, 8, 8, .72);
  font-weight: 500;
}

/* ── 模块 8 · 明细表（表体内部滚动 + sticky 表头） ─────────────────────── */

.card--table .card__hd { padding-bottom: 5px; }

.card__bd--table {
  padding: 0;
  min-height: 0;
}

.table-scroll {
  height: 100%;
  overflow: auto;                       /* 只有表体滚动，页面整体不滚 */
  overscroll-behavior: contain;
}

table.dt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 20px;
  table-layout: auto;
}

table.dt thead th {
  position: sticky;                     /* 表头 sticky */
  top: 0;
  z-index: 2;
  padding: 11px 14px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-dim);
  white-space: nowrap;
  background: #0d1523;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

table.dt tbody td {
  padding: 9px 14px;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}

table.dt tbody tr:hover td { background: rgba(61, 125, 255, .09); }

.dt__num { text-align: right; }

.dt__sortable { cursor: pointer; user-select: none; }
.dt__sortable:hover { color: var(--text-strong); }
/* 键盘焦点必须可见（WCAG 2.4.7 / RING-6 R5） */
.dt__sortable:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: -2px;
  border-radius: 3px;
  color: var(--text-strong);
  background: rgba(61, 125, 255, .12);
}
.dt__ind { margin-left: 4px; color: var(--c1); font-size: 16px; }
.dt__sortable[data-dir="desc"] .dt__ind::after { content: "↓"; }
.dt__sortable[data-dir="asc"]  .dt__ind::after { content: "↑"; }

.dt__empty {
  padding: 28px 12px !important;
  text-align: center;
  color: var(--text-dim);
}

.dt__amount { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.dt__mono { font-family: var(--mono); color: var(--text-dim); }

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.5;
  border: 1px solid transparent;
}

.tag--cw { color: var(--c1); border-color: rgba(61, 125, 255, .35); background: rgba(61, 125, 255, .10); }
.tag--ce { color: var(--c2); border-color: rgba(33, 199, 168, .35); background: rgba(33, 199, 168, .10); }
.tag--cs { color: var(--c3); border-color: rgba(155, 125, 255, .35); background: rgba(155, 125, 255, .10); }
.tag--cn { color: var(--accent); border-color: rgba(255, 180, 84, .35); background: rgba(255, 180, 84, .10); }
.tag--d { color: var(--accent); }
.tag--plain { color: var(--text-dim); }

/* ── 全局提示条 ───────────────────────────────────────────────────────── */

.banner {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(1100px, 88vw);
  padding: 12px 22px;
  font-size: 18px;
  color: #ffe0b2;
  background: rgba(38, 24, 8, .94);
  border: 1px solid rgba(255, 180, 84, .55);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  pointer-events: none;
  text-align: center;
}

/* 空态提示（info）：琥珀色，不打断 */
.banner--info {
  color: #ffe0b2;
  background: rgba(38, 24, 8, .94);
  border-color: rgba(255, 180, 84, .55);
}

/* 错误态（error）：红色，必须一眼看出是「坏了」而不是「没数据」（RING-6 R7） */
.banner--error {
  color: #ffd9d4;
  background: rgba(46, 12, 10, .96);
  border-color: rgba(255, 122, 107, .72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 122, 107, .25);
  border-radius: 10px;
  text-align: left;
  line-height: 1.5;
}

/* ── 滚动条（深色） ───────────────────────────────────────────────────── */

/* 整页滚动条（.app 承担滚动）：滑块压暗，避免右边缘出现一条亮带被误认成白边 */
.app::-webkit-scrollbar { width: 10px; }
.app::-webkit-scrollbar-track { background: #0a1220; }
.app::-webkit-scrollbar-thumb {
  background: rgba(130, 150, 176, .22);
  border-radius: 5px;
}
.app::-webkit-scrollbar-thumb:hover { background: rgba(130, 150, 176, .38); }

/* 明细表内部滚动条：同时作为「这里可以滚」的视觉暗示 */
.table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .02); }
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(130, 150, 176, .34);
  border-radius: 5px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(130, 150, 176, .55); }

/* ==========================================================================
   窄屏 / 矮屏退化：1440 宽允许页面纵向滚动，模块不重叠（SPEC §4）
   ========================================================================== */

/* 宽度断点只负责列数变化，不再改行高（行高由字号决定，越小屏越不允许压缩） */

@media (max-width: 1180px) {
  .kpi-bar { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { padding: 12px 16px; }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "trend  chan"
      "region cat"
      "heat   funnel"
      "table  table";
  }

  .topbar { flex-wrap: wrap; }
  .filters { margin-left: 0; justify-content: flex-start; }
}

/* 窄手机（375 宽）单列：图表保持可读高度，避免每图被压到 160px（RING-6 R9） */
@media (max-width: 760px) {
  .app { padding: 8px; }

  .topbar { gap: 8px; }
  .brand { max-width: 100%; }

  .brand__sub {
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px 8px;
  }

  .kpi-bar { grid-template-columns: 1fr; }

  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 340px) 400px;
    grid-template-areas:
      "trend"
      "chan"
      "region"
      "cat"
      "heat"
      "funnel"
      "table";
  }

  /* 筛选器整行铺开并允许组内换行，避免 7 个区域 chip 把宽度顶出去 */
  .filters {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    justify-content: flex-start;
  }

  .filter-group {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   SPEC §4.5 · 详情页 + 主屏卡片详情入口（builder-3 / 任务块 C）
   字号口径沿用 §6.2：主体 20px / 辅助 ≥16px / 图表标签 18px（图表在 detail.js 里设）
   ========================================================================== */

/* ── 主屏：卡片可点击的视觉暗示（hover + 右上角小箭头，不加花哨动效）───── */

.card[data-module] {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.card[data-module]:hover {
  border-color: rgba(61, 125, 255, .55);
  box-shadow: 0 0 0 1px rgba(61, 125, 255, .22), 0 10px 26px rgba(0, 0, 0, .38);
}

.card[data-module]:focus-within {
  border-color: rgba(61, 125, 255, .6);
}

.card__open {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.card[data-module]:hover .card__open {
  color: var(--text);
  border-color: rgba(61, 125, 255, .45);
}

.card__open:hover {
  color: #fff;
  border-color: rgba(61, 125, 255, .8);
  background: rgba(61, 125, 255, .22);
}

.card__open:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 1px;
  color: #fff;
}

/* 明细表里的订单号：键盘可达的新标签页入口（图内元素「表格行」的落点） */
.dt__link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dashed rgba(130, 150, 176, .45);
}

.dt__link:hover {
  color: var(--text-strong);
  border-bottom-color: var(--c1);
}

.dt__link:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 1px;
  border-radius: 3px;
}

table.dt tbody tr[data-order-id] { cursor: pointer; }

/* ── 详情页骨架 ───────────────────────────────────────────────────────── */

.detail-topbar { align-items: flex-start; }

.detail-nav {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.detail-back {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 23, 38, .72);
  color: var(--text);
  font-size: 20px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.detail-back:hover {
  color: #fff;
  border-color: rgba(61, 125, 255, .75);
  background: rgba(61, 125, 255, .18);
}

.detail-back:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 2px;
}

.detail-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-bottom: 24px;
}

/* 详情卡片：高度由内容决定（不做视口内固定行高，避免裁字；L4） */
.detail-card { overflow: hidden; }
.detail-card .card__bd { flex: 0 0 auto; min-height: 0; }

/* 辅助图容器：显式高度，canvas 与容器同尺寸（L3） */
.detail-chart {
  width: 100%;
  height: 340px;
}

/* 明细表：表体内部滚动 + 表头 sticky（L4 明确允许内部滚动的就是这类表） */
.detail-table-wrap {
  max-height: 520px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.detail-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.detail-table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .02); }
.detail-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(130, 150, 176, .34);
  border-radius: 5px;
}
.detail-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(130, 150, 176, .55); }

table.dt--detail { min-width: 100%; }
table.dt--detail thead th { background: #0d1523; }
table.dt--detail tbody td { font-size: 20px; }

.detail-caption {
  margin: 8px 2px 2px;
  font-size: 16px;
  color: var(--text-faint);
}

.detail-empty {
  margin: 0;
  padding: 36px 14px;
  text-align: center;
  font-size: 20px;
  color: var(--text-dim);
}

.detail-focus { color: var(--accent); font-weight: 600; }
.detail-focus::after { content: " ← 已选中"; font-size: 16px; color: var(--accent); }

.detail-note {
  margin: 0;
  padding: 6px 2px 10px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ── 订单字段卡（module=table）───────────────────────────────────────── */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--panel);
}

.field dt {
  margin: 0;
  font-size: 18px;
  color: var(--text-dim);
  white-space: nowrap;
}

.field dd {
  margin: 0;
  font-size: 20px;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}

/* ── 详情页错误态（缺 module / module 非法 / 依赖加载失败）────────────── */

.detail-card--error {
  border-color: rgba(255, 122, 107, .55);
  background:
    linear-gradient(160deg, rgba(255, 122, 107, .09), rgba(255, 122, 107, 0) 55%),
    var(--panel);
}

.detail-error__msg {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.55;
  color: #ffd9d4;
}

.detail-error__hint {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
}

.detail-error__legal {
  margin: 0 0 18px;
  font-size: 18px;
  color: var(--text-faint);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.detail-error__back { margin: 0; }

.detail-noscript {
  margin: 48px auto;
  max-width: 720px;
  padding: 0 16px;
  font-size: 20px;
  line-height: 1.7;
  color: #ffd9d4;
  text-align: center;
}

/* ── 详情页窄屏退化（不压缩字号，只改列/高度）────────────────────────── */

@media (max-width: 900px) {
  .detail-topbar { flex-wrap: wrap; }
  .detail-nav { margin-left: 0; }
  .field-grid { grid-template-columns: 1fr; }
  .detail-chart { height: 300px; }
  .detail-table-wrap { max-height: 440px; }
}