/* 配色取自 dataviz 参考调色板(已验证)。只用前 3 个色位, 图表以单色系为主。
   浅色值定义在裸 :root, 深色在媒体查询和 data-theme 下各写一份, 保证
   系统深色和手动切换两种情况都生效。*/
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;      /* 卡片/图表底 */
  --plane:     #f9f9f7;      /* 页面底 */
  --ink-1:     #0b0b0b;
  --ink-2:     #52514e;
  --ink-3:     #898781;      /* 轴/次要标签 */
  --grid:      #e1e0d9;
  --axis:      #c3c2b7;
  --border:    rgba(11, 11, 11, .10);
  --s1:        #2a78d6;      /* 色位1 蓝 */
  --s2:        #eb6834;      /* 色位2 橙 */
  --s3:        #1baf7a;      /* 色位3 青 */
  --seq-200:   #9ec5f4;
  --seq-450:   #2a78d6;
  --seq-600:   #184f95;
  --critical:  #d03b3b;
  --good:      #0ca30c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane:     #0d0d0d;
    --ink-1:     #ffffff;
    --ink-2:     #c3c2b7;
    --ink-3:     #898781;
    --grid:      #2c2c2a;
    --axis:      #383835;
    --border:    rgba(255, 255, 255, .10);
    --s1:        #3987e5;
    --s2:        #d95926;
    --s3:        #199e70;
    --seq-200:   #184f95;
    --seq-450:   #3987e5;
    --seq-600:   #9ec5f4;
    --critical:  #d03b3b;
    --good:      #0ca30c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane:     #0d0d0d;
  --ink-1:     #ffffff;
  --ink-2:     #c3c2b7;
  --ink-3:     #898781;
  --grid:      #2c2c2a;
  --axis:      #383835;
  --border:    rgba(255, 255, 255, .10);
  --s1:        #3987e5;
  --s2:        #d95926;
  --s3:        #199e70;
  --seq-200:   #184f95;
  --seq-450:   #3987e5;
  --seq-600:   #9ec5f4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink-1);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", sans-serif;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ───── 顶部 ───── */
.top {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 22px 0 18px;
}
.top h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: .2px; }
.sub { margin: 5px 0 0; color: var(--ink-2); font-size: 13px; }

/* ───── 标签页 ───── */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 2px;
}
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 8px 14px; border-radius: 7px 7px 0 0;
  color: var(--ink-2); font: inherit; font-size: 14px;
  border-bottom: 2px solid transparent;
}
.tab:hover { background: var(--surface-1); color: var(--ink-1); }
.tab.is-on {
  color: var(--ink-1); font-weight: 600;
  border-bottom-color: var(--s1); background: var(--surface-1);
}

/* ───── 卡片 ───── */
.view { padding: 18px 0 40px; }
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 2px;
}
.card-hd h2 { margin: 0; font-size: 16px; font-weight: 600; }
.note { margin: 4px 0 14px; color: var(--ink-2); font-size: 13px; max-width: 78ch; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ───── 指标卡 ───── */
.kpis {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.kpi {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 15px 17px;
}
.kpi .k { color: var(--ink-2); font-size: 12.5px; }
/* 大数字用比例字形, tabular-nums 会让它显得松散 */
.kpi .v { font-size: 27px; font-weight: 600; line-height: 1.25; margin-top: 3px; }
.kpi .u { font-size: 14px; font-weight: 400; color: var(--ink-2); margin-left: 3px; }
.kpi .d { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

/* ───── 图表 ───── */
.chart { width: 100%; height: 320px; }
#c-hangye, #c-rate { height: 380px; }

/* ───── 表格 ───── */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td {
  text-align: left; padding: 8px 11px;
  border-bottom: 1px solid var(--grid); white-space: nowrap;
}
th { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.name { white-space: normal; min-width: 220px; max-width: 420px; }
tbody tr:hover { background: color-mix(in srgb, var(--s1) 6%, transparent); }
.rk { color: var(--ink-3); font-variant-numeric: tabular-nums; }
a.ent { color: var(--s1); text-decoration: none; cursor: pointer; }
a.ent:hover { text-decoration: underline; }

/* 阶段徽标: 颜色之外还有文字, 不靠颜色单独表意 */
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 12px; border: 1px solid var(--border); color: var(--ink-2);
}
.tag.result { color: var(--good);     border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.tag.abort  { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }

/* ───── 控件 ───── */
.ctrls { display: flex; gap: 8px; flex-wrap: wrap; }
.inp {
  font: inherit; font-size: 13.5px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--plane); color: var(--ink-1); min-width: 150px;
}
.inp:focus { outline: 2px solid var(--s1); outline-offset: -1px; }
.btn, .lnk {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 13px; background: var(--plane); color: var(--ink-1);
}
.lnk { border: 0; background: none; color: var(--s1); padding: 4px 6px; }
.lnk:hover { text-decoration: underline; }
.btn:hover { border-color: var(--s1); }

.pager {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; color: var(--ink-2); font-size: 13px;
}

/* ───── 抽屉 ───── */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.34); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw);
  background: var(--surface-1); border-left: 1px solid var(--border);
  z-index: 41; display: flex; flex-direction: column;
}
.drawer-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border);
}
.drawer-hd h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.drawer-bd { overflow-y: auto; padding: 16px 20px 40px; }
.x {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-2); padding: 0 4px;
}
.d-sec { margin-bottom: 22px; }
.d-sec h3 { font-size: 13.5px; margin: 0 0 8px; color: var(--ink-2); font-weight: 600; }
.d-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; }
.d-kpis .kpi { padding: 11px 13px; }
.d-kpis .v { font-size: 20px; }
.d-chart { height: 220px; }

.foot { color: var(--ink-3); font-size: 12.5px; padding-bottom: 30px; }
.empty { color: var(--ink-3); padding: 22px 4px; font-size: 13.5px; }

.chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  padding: 6px 4px; white-space: nowrap;
}