/* ============================================================
   数值工具集 · 全站样式
   设计约定：
   - 一套 token（颜色 / 字号 / 间距 / 圆角 / 阴影），不写魔法数字
   - 正文 14px、数字用等宽数字排版（tabular-nums），表格内容统一居中
   - 层级：顶栏（sticky）> 页标题 > 区块（h2 带序号）> 卡片 > 表格
   ============================================================ */

:root {
  /* 颜色 */
  --ink: #1B3348;
  --ink-2: #2C3E4F;
  --ink-3: #48606F;
  --muted: #6E7C88;
  --faint: #98A6B1;
  --line: #E2E7EC;
  --line-2: #EDF1F4;
  --bg: #F4F7F9;
  --bg-soft: #FAFBFC;
  --card: #FFFFFF;
  --accent: #2E6C9E;
  --accent-soft: #EDF4FA;
  --accent-line: #C6DBEB;
  --ok: #1F7A54;
  --ok-soft: #E9F6EF;
  --warn: #A6402F;
  --warn-soft: #FBEEEC;
  --amber: #8A5A18;
  --amber-soft: #FBF5EA;
  --code-bg: #10202C;
  --code-fg: #CFE2F0;

  /* 尺寸 */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --shadow-1: 0 1px 2px rgba(27, 51, 72, .05);
  --shadow-2: 0 2px 8px rgba(27, 51, 72, .07);
  --shadow-3: 0 12px 32px rgba(27, 51, 72, .14);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }
::selection { background: #D5E7F4; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--sp-5) 72px; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(27, 51, 72, .03);
}
.topbar .wrap {
  padding: 10px var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  min-height: 52px;
}
.brand { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .3px; display: flex; align-items: baseline; gap: 8px; }
.brand small { font-weight: 400; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.spacer { flex: 1 1 auto; }
.actions { display: flex; gap: var(--sp-2); align-items: center; }
.actions a { font-size: 13px; color: var(--muted); }
.actions a:hover { color: var(--accent); text-decoration: none; }

/* ---------------- 标题层级 ---------------- */
h1 { font-size: 24px; line-height: 1.3; color: var(--ink); margin: 0 0 6px; letter-spacing: .2px; }
h2 {
  font-size: 16px; color: var(--ink); margin: var(--sp-6) 0 var(--sp-3);
  padding: 0; border: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
h3 { font-size: 14px; color: var(--ink); margin: var(--sp-4) 0 var(--sp-2); }
.lead { color: var(--ink-3); margin: 0 0 var(--sp-4); max-width: 92ch; }
.lead b, p b { color: var(--ink); }

/* 区块标题：左侧竖条 + 序号 */
.sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2.sec-head { margin: var(--sp-6) 0 var(--sp-3); }
h2.sec-head > span:first-child {
  position: relative; padding-left: 12px; font-weight: 700;
}
h2.sec-head > span:first-child::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--ink);
}
h2.sec-head .cnt, h2.sec-head .secdesc {
  font-weight: 400; font-size: 12.5px; color: var(--muted); flex: 1 1 auto;
}
h2.sec-head .sec-toggle { margin-left: auto; }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: var(--sp-4); }
.grid.c3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.c1 { grid-template-columns: 1fr; }

/* ---------------- 工具入口卡（首页） ---------------- */
.entry { display: block; color: inherit; }
.entry:hover { text-decoration: none; }
.entry .card {
  position: relative; height: 100%; padding: var(--sp-5);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.entry:hover .card { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.entry h3 { margin: 0 0 8px; font-size: 16px; }
.entry p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.entry .tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 1px 10px; margin-top: var(--sp-3);
}
.entry.disabled { opacity: .5; pointer-events: none; }
.entry.disabled .tag { color: var(--muted); background: var(--bg-soft); border-color: var(--line); }
.entry .go { position: absolute; right: var(--sp-5); top: var(--sp-5); color: var(--faint); font-size: 18px; transition: transform .16s, color .16s; }
.entry:hover .go { color: var(--accent); transform: translateX(3px); }

/* ---------------- 按钮 ---------------- */
button, .btn {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 7px 15px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
button:hover, .btn:hover { background: #2C5470; border-color: #2C5470; color: #fff; }
button:active, .btn:active { background: #14293A; border-color: #14293A; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: #0E2130; border-color: #0E2130; }
button.primary:hover { background: #1D3B52; border-color: #1D3B52; }
button.mini { padding: 4px 10px; font-size: 12px; font-weight: 500; }
button.ghost, .btn.ghost { background: #fff; color: var(--ink-2); border-color: #CBD6DF; font-weight: 500; }
button.ghost:hover { background: var(--bg-soft); color: var(--accent); border-color: var(--accent-line); }

/* 表格里的小按钮保持轻量 */
td button, .tablebox button, .picks button {
  background: #fff; color: var(--ink-3); border-color: #D3DCE3; font-weight: 500;
  padding: 3px 9px; font-size: 12px;
}
td button:hover, .tablebox button:hover, .picks button:hover {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);
}
button:disabled { opacity: .45; cursor: not-allowed; }
.toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }

/* ---------------- 表格 ---------------- */
table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
th, td {
  border: 1px solid var(--line); padding: 7px 10px;
  text-align: left; vertical-align: middle;
}
th {
  background: var(--bg-soft); color: var(--ink); font-weight: 600;
  white-space: nowrap; font-size: 12.5px; letter-spacing: .2px;
}
tbody tr:hover > td { background: #FBFCFD; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.sum td { background: var(--bg-soft); font-weight: 600; }
.tablebox { overflow: auto; border-radius: var(--r); }
.tablebox table { border-radius: var(--r); }

/* 输入：表格内几乎无框，聚焦才显形 */
input.cell {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; color: inherit; padding: 3px 5px; border-radius: var(--r-sm);
}
input.cell:hover { border-color: var(--line); background: #fff; }
input.cell:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(46, 108, 158, .08); }
input.cell.num { text-align: right; }
input.cell.bad { border-color: var(--warn); background: var(--warn-soft); }

/* ---------------- 文字 / 标签 ---------------- */
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.badge { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #EEF2F6; color: var(--muted); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.tag { display: inline-block; font-size: 11px; color: var(--accent); }

/* ---------------- 提示条 ---------------- */
.msg { padding: 9px 14px; border-radius: var(--r); font-size: 13px; margin: var(--sp-2) 0; display: none; border: 1px solid transparent; }
.msg.show, .msg.ok, .msg.okk, .msg.err, .msg.warn { display: block; }
.msg:empty { display: none; }
.msg.ok, .msg.okk { background: var(--ok-soft); color: var(--ok); border-color: #CFE7DB; }
.msg.err { background: var(--warn-soft); color: var(--warn); border-color: #F0D6D3; }
.msg.warn { background: var(--amber-soft); color: var(--amber); border-color: #EBDCC2; }

/* ---------------- 图表 ---------------- */
.chartbox { position: relative; height: 280px; }
.chartbox.tall { height: 340px; }
.chartgrid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.chartcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4) var(--sp-2); box-shadow: var(--shadow-1); }
.chartcard h4 { margin: 0 0 2px; font-size: 13px; color: var(--ink); font-weight: 600; }
.chartcard .hint { font-size: 12px; }

/* ---------------- 行内布局 ---------------- */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > label { color: var(--muted); font-size: 13px; }
select, input[type=text], input[type=number] {
  font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--line);
  border-radius: var(--r); background: #fff; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
select:hover, input[type=text]:hover, input[type=number]:hover { border-color: #C9D4DE; }
select:focus, input[type=text]:focus, input[type=number]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 108, 158, .1);
}

/* ---------------- 结论卡（KPI） ---------------- */
.kpis { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--sp-4); }
.kpi {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .8;
}
.kpi b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi span { color: var(--muted); font-size: 12px; }
.kpi .v { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi .k { color: var(--muted); font-size: 12px; }

/* KPI 的对比增量 */
.kpi .delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; }
.kpi .delta.up { color: var(--warn); background: var(--warn-soft); }
.kpi .delta.down { color: var(--ok); background: var(--ok-soft); }
.kpi .delta.flat { color: var(--muted); background: var(--bg-soft); }

ul.tight { margin: 6px 0 0 20px; padding: 0; }
ul.tight li { margin: 5px 0; }
ol.tight { margin: 6px 0 0 20px; padding: 0; }
ol.tight li { margin: 6px 0; }

/* ---------------- 表头吸附 ---------------- */
.tablebox { max-height: 72vh; }
.tablebox thead th {
  position: sticky; top: 0; z-index: 3;
  background: #F3F6F9;
  box-shadow: inset 0 -1px 0 var(--line);
}
.tablebox thead th:first-child { z-index: 4; }

/* ---------------- 折叠 ---------------- */
.sec-head { cursor: default; user-select: none; }
.sec-head .caret {
  color: var(--muted); font-size: 12px; transition: transform .15s;
  display: inline-block; width: 10px;
}
.sec-head.collapsed .caret { transform: rotate(-90deg); }
.sec-head .cnt { color: var(--muted); font-size: 12px; font-weight: 400; }
.hidden, .sec-body.hidden { display: none !important; }
.sec-toggle {
  margin-left: 10px; background: #fff; color: var(--ink-2); border: 1px solid #CBD6DF;
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.sec-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* ---------------- 两行表头 ---------------- */
.tablebox thead.two tr.enrow th { background: #F7F9FB; font-weight: 400; padding: 3px 6px; }
.tablebox thead.two tr.enrow th input {
  width: 100%; min-width: 0; font: inherit; font-size: 12px; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink-2);
}
.tablebox thead.two tr.enrow th input:focus { outline: none; border-color: var(--accent); }
.tablebox thead.two tr.enrow th, .tablebox thead.two tr:not(.enrow) th { min-width: 92px; }
.tablebox thead.two tr.enrow th .pick { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.tablebox thead.two tr.enrow th .pick + input { width: calc(100% - 26px); }
.tablebox thead.two tr:not(.enrow) th { top: 32px; }
.tablebox thead.two tr.enrow th { z-index: 6; }
.tablebox th.tiny, .tablebox td.tiny { width: 52px; text-align: center; }
.tablebox table { table-layout: fixed; }
.tablebox td, .tablebox th { overflow: hidden; text-overflow: ellipsis; }
.tablebox td input.cell { min-width: 0; }

/* ---------------- 属性列头里的成长规则 ---------------- */
.tablebox thead.two th.sub { background: #F7F9FB; font-weight: normal; }
.p3 { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.p3 input { width: 56px; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.p3v { display: flex; flex-direction: column; gap: 3px; min-width: 158px; }
.p3v label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.p3v input { width: 80px; padding: 1px 5px; font-size: 12px; }

/* ---------------- 字段勾选 ---------------- */
.picks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.picks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; }
.pickrow > b { min-width: 76px; color: var(--ink); }
.pickrow .picksub { color: var(--muted); font-size: 12px; margin-right: 4px; }
.tablebox td.dim { color: #A7B0B8; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); vertical-align: -2px; cursor: pointer; }
input[type=checkbox][disabled] { opacity: 1; cursor: not-allowed; }

/* ---------------- 战力表：属性做列 ---------------- */
.tablebox thead.attrpow th { position: sticky; background: #EFF3F7; }
.tablebox thead.attrpow tr:first-child th { top: 0; z-index: 3; }
.tablebox thead.attrpow tr:nth-child(2) th { top: 38px; z-index: 2; background: #F7F9FB; }
.tablebox thead.attrpow th select { font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.tablebox thead.attrpow th .mini { padding: 1px 7px; font-size: 11px; }

/* ---------------- 属性值可手改 ---------------- */
input.pv {
  width: 100%; min-width: 76px; padding: 3px 5px; font-size: 12.5px; text-align: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
input.pv:hover { border-color: var(--line); background: #fff; }
input.pv:focus { border-color: var(--accent); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(46, 108, 158, .08); }
input.pv.man { color: var(--accent); font-weight: 700; }


/* 只读的属性汇总表：按内容自适应，别被固定列宽挤成一团 */
.tablebox table.attrs-table { table-layout: auto; width: auto; min-width: 0; max-width: 100%; }
.tablebox table.attrs-table td.hint { white-space: normal; line-height: 1.5; max-width: 260px; }
.tablebox table.attrs-table td { padding: 7px 12px; }

/* ---------------- 属性战力表 ---------------- */
.tablebox table.attr-table { table-layout: auto; width: auto; min-width: 100%; }
.tablebox table.attr-table th, .tablebox table.attr-table td { text-align: center; vertical-align: middle; padding-left: 10px; padding-right: 10px; }
.tablebox table.attr-table td input, .tablebox table.attr-table td select { text-align: center; margin: 0 auto; }
.tablebox table.attr-table td button { margin: 0 auto; }
.tablebox table.attr-table td.rangecell { white-space: nowrap; }
.rangehint { font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.35; white-space: normal; min-height: 15px; }

/* ---------------- 表格内容统一居中 ---------------- */
.tablebox table th, .tablebox table td,
.tablebox table th.num, .tablebox table td.num { text-align: center; vertical-align: middle; }
.tablebox table td input, .tablebox table td select, .tablebox table td textarea { text-align: center; }
.tablebox table input[type=number] { text-align: center; }
input.pv, .num, td .num { text-align: center; }
.tablebox table th .p3v { margin-left: auto; margin-right: auto; }
.tablebox table td .p3v { align-items: center; }

/* ---------------- 异常 / 校验标记 ---------------- */
.flagcell { width: 62px; text-align: center; }
.flag {
  display: inline-block; color: #C0392B; font-size: 12px; font-weight: 600; cursor: help;
  border-bottom: 1px dashed #C0392B; line-height: 1.2;
}
.fmlname { white-space: nowrap; }
.fmlbad {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px;
  background: #C0392B; color: #fff; font-size: 11px; font-weight: 600; cursor: help;
}
input.bad { border-color: #C0392B !important; background: #FFF6F5 !important; }

/* ---------------- 参数面板（动作/群攻） ---------------- */
.actgrid {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  padding: 12px 16px; margin: 8px 0 10px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: var(--r);
}
.actcell { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.actlab { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.actin { display: flex; align-items: center; gap: 6px; }
.actin input { width: 96px; }
.actin em { font-style: normal; font-size: 11px; color: var(--muted); }
.actwide { min-width: 250px; }

.aoegrid {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end;
  padding: 12px 16px; margin: 8px 0 4px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: var(--r);
}
.aoeitem { display: flex; flex-direction: column; gap: 4px; }
.aoeitem label { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.aoeitem input[type=number] { width: 90px; }
.aoechk { justify-content: flex-end; }
.aoechk label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; }

/* ---------------- 最少项标绿 ---------------- */
.tablebox td.best { background: var(--ok-soft); color: #146C2E; font-weight: 700; }
.bestmark {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 10px; font-weight: 600; line-height: 16px; border-radius: 3px;
  background: #146C2E; color: #fff;
}

/* ============================================================
   A/B 对比
   ============================================================ */

/* 顶栏第二行：配置条 */
.abbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px var(--sp-5);
  border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, #FBFCFD, #F7FAFC);
  font-size: 12.5px;
}
.abbar .ablab { color: var(--muted); }
.abbar input[type=text] { width: 210px; padding: 4px 10px; font-size: 12.5px; }
.abbar .stamp { color: var(--faint); font-size: 11.5px; }
.statepill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.statepill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.statepill.dirty { color: var(--amber); background: var(--amber-soft); border-color: #EBDCC2; }
.statepill.none { color: var(--muted); background: var(--bg-soft); border-color: var(--line); }
.statepill.base { color: #146C2E; background: var(--ok-soft); border-color: #BFE3CC; }

/* 常驻对比卡（页面内，替代原来的右侧抽屉） */
.abcmp {
  margin: 0 0 18px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-1);
}
.abcmph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; }
.abcmph .t { font-weight: 700; color: var(--ink); font-size: 13px; }
.abcmph .hl { color: var(--accent); font-size: 14px; }
.abcmph .hint { font-size: 12px; }
.abcmpb { padding: 2px 14px 14px; border-top: 1px dashed var(--line-2); }
.abcmpb h4 { margin: 12px 0 8px; font-size: 13px; color: var(--ink-2); }

/* 图表：放大按钮 + 弹窗大图 */
.chartbox { position: relative; }
.chartzoom {
  position: absolute; top: -30px; right: 0; z-index: 5;
  width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.86);
  color: var(--muted); cursor: pointer; opacity: .5; transition: opacity .15s ease;
}
.chartcard:hover .chartzoom, .chartzoom:hover, .chartzoom:focus { opacity: 1; }
.chartzoom:hover { color: var(--accent); border-color: var(--accent-line); background: #fff; }
.zoom-mask {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(16, 32, 44, .45); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
.zoom-mask.on { display: flex; }
.zoom-box {
  width: min(1180px, 94vw); height: min(760px, 88vh);
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.zoom-box header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
.zoom-box header h4 { margin: 0; font-size: 14px; }
.zoom-body { flex: 1 1 auto; min-height: 0; padding: 14px 16px 18px; }
.zoom-body canvas { width: 100% !important; height: 100% !important; }

/* 配置选择：输入框 + 切换按钮 + 下拉面板 */
.abpick { position: relative; display: flex; align-items: center; gap: 6px; }
.abpick input[type=text] { width: 190px; }
.abpick #abPick { white-space: nowrap; }
.abpanel {
  display: none; position: absolute; z-index: 200; top: calc(100% + 6px); left: 0;
  width: 340px; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-3);
}
.abpanel.on { display: block; }
.abpanel .abh { font-size: 11.5px; color: var(--muted); padding: 4px 8px 8px; }
.abpanel .abrow {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer;
}
.abpanel .abrow:hover { background: var(--bg-soft); }
.abpanel .abrow.cur { background: var(--accent-soft); }
.abpanel .abrow .nm { font-weight: 600; color: var(--ink); }
.abpanel .abrow .ts { font-size: 11px; color: var(--faint); }
.abpanel .tagbase, .abpanel .tagcur {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; line-height: 16px;
}
.abpanel .tagbase { color: #146C2E; background: var(--ok-soft); border: 1px solid #BFE3CC; }
.abpanel .tagcur { color: var(--accent); background: #fff; border: 1px solid var(--accent-line); }
.abpanel .abrow .del { font-size: 11px; color: var(--warn); padding: 0 4px; }
.abpanel .abrow .del:hover { text-decoration: underline; }
.abpanel .abrow.new { color: var(--accent); font-weight: 600; }
.abpanel .abrow.full { color: var(--muted); cursor: default; font-size: 11.5px; }

/* 对比开关 */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 38px; height: 21px; border-radius: 999px; background: #CBD6DF; position: relative;
  transition: background .16s ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .16s ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch .swlab { color: var(--ink-3); font-size: 12.5px; }

/* 对比抽屉 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(16, 32, 44, .28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 80;
}
.drawer-mask.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 92vw;
  background: #fff; box-shadow: var(--shadow-3); z-index: 81;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
  display: flex; flex-direction: column;
}
.drawer.on { transform: translateX(0); }
.drawer header {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; background: var(--bg-soft);
}
.drawer header h3 { margin: 0; font-size: 14px; }
.drawer .dbody { padding: var(--sp-4) var(--sp-5) var(--sp-6); overflow: auto; flex: 1 1 auto; min-height: 0; }
.drawer .dfoot { padding: 10px 20px; border-top: 1px solid var(--line); background: var(--bg-soft); display: flex; gap: 8px; }
.drawer h4 { font-size: 13px; margin: 18px 0 8px; color: var(--ink); }
.drawer h4:first-child { margin-top: 0; }
.drawer table { font-size: 12.5px; }
.drawer table th, .drawer table td { padding: 6px 8px; }
.chglist { list-style: none; margin: 0; padding: 0; }
.chglist li {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; margin-bottom: 6px;
  background: var(--bg-soft); border-radius: var(--r); font-size: 12.5px;
  border-left: 3px solid var(--line);
}
.chglist li.why-cost { border-left-color: #C77B3C; }
.chglist li.why-attr { border-left-color: var(--accent); }
.chglist li.why-prob { border-left-color: #6B5AA8; }
.chglist b { color: var(--ink); }
.chglist .arrow { color: var(--faint); }
.chglist .val { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.chglist .val.now { color: var(--accent); font-weight: 700; }

/* 差异表 */
.diffup { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.diffdn { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.diffflat { color: var(--faint); font-variant-numeric: tabular-nums; }

/* 对比摘要条（主页面顶部） */
.absum {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: var(--sp-3);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r); font-size: 12.5px; color: var(--ink-3);
}
.absum b { color: var(--ink); }
.absum .link { margin-left: auto; font-weight: 600; }

/* ============================================================
   天数换算
   ============================================================ */
.daysbox { margin-top: var(--sp-4); }
.daysgrid { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.daychip {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; min-width: 150px;
  align-items: center; text-align: center;
}
.daychip label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.daychip .din { display: flex; align-items: center; gap: 5px; }
.daychip input { width: 74px; padding: 3px 7px; font-size: 12.5px; }
.daychip em { font-style: normal; font-size: 11px; color: var(--faint); }

/* ============================================================
   首页
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #16303F 0%, #1F4459 55%, #2A5C74 100%);
  border-radius: var(--r-lg); color: #EAF2F7;
  padding: 34px 36px; margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-2);
}
.hero::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(126, 186, 225, .28), transparent 68%);
}
.hero h1 { color: #fff; font-size: 27px; margin: 0 0 10px; }
.hero p { margin: 0; color: #C3D6E3; max-width: 72ch; font-size: 13.5px; line-height: 1.8; }
.hero .hstats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 22px; }
.hero .hstat b { display: block; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.hero .hstat span { font-size: 12px; color: #9FB7C7; }
.hero .hstat { position: relative; z-index: 1; }

.steps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 8px;
}
.step h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--ink); }
.step p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

.footnote {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}


/* ============================================================
   反馈组件：toast / 确认框 / 抖动
   ============================================================ */
.toastbar {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 220px; max-width: 420px;
  padding: 11px 14px; border-radius: var(--r);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-3); font-size: 13px; line-height: 1.55;
  opacity: 1; transform: none;
  animation: toastIn .22s cubic-bezier(.2, .8, .3, 1) both;
}
.toast.on { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.toast .ic {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: normal; color: #fff;
  background: var(--accent); margin-top: 1px;
}
.toast.ok { border-left-color: #1F7A4D; }
.toast.ok .ic { background: #1F7A4D; }
.toast.err { border-left-color: #C0392B; background: #FDF4F3; }
.toast.err .ic { background: #C0392B; }
.toast.warn { border-left-color: #B7791F; background: #FDF9F0; }
.toast.warn .ic { background: #B7791F; }
.toast.info .ic { background: var(--accent); }

.ui-mask {
  position: fixed; inset: 0; z-index: 210; background: rgba(16, 32, 44, .34);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; padding: 20px; animation: maskIn .16s ease both;
}
.ui-mask.on { opacity: 1; }
.ui-mask.out { opacity: 0; transition: opacity .14s ease; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.ui-dialog {
  width: 100%; max-width: 420px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 22px 24px 18px;
  transform: none; opacity: 1;
  animation: dialogIn .2s cubic-bezier(.2, .8, .3, 1) both;
}
.ui-mask.on .ui-dialog { transform: none; opacity: 1; }
@keyframes dialogIn {
  from { transform: translateY(10px) scale(.985); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.ui-dialog h4 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.ui-dialog .uitext { margin: 0 0 18px; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.ui-dialog .uibtns { display: flex; justify-content: flex-end; gap: 10px; }
button.danger {
  background: #C0392B; border-color: #C0392B; color: #fff;
}
button.danger:hover { background: #A93226; border-color: #A93226; color: #fff; }

@keyframes uishake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
}
.shake { animation: uishake .5s cubic-bezier(.36, .07, .19, .97); }

/* 没有基准时：开关看起来是关的、不可用，但仍能点（点了给红提示） */
.switch.off .track { background: #DDE4EA; }
.switch.off .track::after { background: #F4F7F9; }
.switch.off .swlab { color: var(--faint); }
.switch.off { cursor: not-allowed; }
button:active { transform: translateY(1px); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 860px) {
  .wrap { padding: 18px 14px 56px; }
  .topbar .wrap { padding: 8px 14px; }
  .abbar { padding: 8px 14px; }
  h1 { font-size: 20px; }
  .hero { padding: 24px 20px; }
  .hero h1 { font-size: 21px; }
  .chartgrid { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
}
@media print {
  .topbar, .abbar, .drawer, .drawer-mask, .sec-toggle, .toolbar { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* 撤销按钮「暂时没得撤」：不置灰禁用（点了要给提示），只做视觉弱化 */
button.is-dim { opacity: .55; }
button.is-dim:hover { opacity: .8; }
.statepill.none.hot {
  color: #C0392B; background: #FDF4F3; border-color: #E7C0BA;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .1);
}

/* 战斗演示 */
.animctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 12px; }
.animctl label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.animctl select { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; font-size: 13px; }
.stagebox { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #F7F9FB; }
.stagebox canvas { display: block; width: 100%; }

/* 首页：全部模板条 */
.tplbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; justify-content: space-between;
  margin: 18px 0 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft, #F7F9FB); }
.tplbar-t { display: flex; flex-direction: column; gap: 3px; }
.tplbar-t b { font-size: 14px; color: var(--ink); }
.tplbar-t span { font-size: 12.5px; color: var(--muted); }

/* 导入校验提示 */
.impwarn { display: none; flex-basis: 100%; order: 99; margin: 8px 0 4px; padding: 10px 14px; border-radius: var(--r-sm, 6px);
  border: 1px solid #F0D0A8; border-left: 3px solid #C97A16; background: #FFF8EC; font-size: 12.5px; }
.impwarn.on { display: block; }
.impwarn-h { font-weight: 700; color: #8A5A12; margin-bottom: 4px; }
.impwarn ul { margin: 0; padding-left: 18px; color: #6B5433; }
.impwarn li { line-height: 1.7; }

/* 悬浮提示（自绘，比原生 title 快且明显） */
.tiptip { position: fixed; z-index: 9999; max-width: 340px; padding: 8px 11px;
  background: #2B3A47; color: #fff; font-size: 12.5px; line-height: 1.65; border-radius: 7px;
  box-shadow: 0 8px 24px rgba(20,32,44,.22); pointer-events: none; white-space: pre-wrap; }
.flag { cursor: help; }

.tplnote { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.tplnote b { color: var(--ink-2); }

/* ---------------- 表格内容一律居中（含 A/B 对比表、天数换算表这类非 .tablebox 的表） ---------------- */
table th, table td { text-align: center; }
td.num, th.num { text-align: center; }
table td .hint { text-align: center; }

/* 同一套参数、失败不回退的对比块（整宽，不挤在 KPI 网格里） */
.cmpcmp { margin-top: 14px; }
.cmpkpi { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 10px 0 12px; }