/* jev 快速判断 —— 无构建、无 CDN、窄屏可用 */
* { box-sizing: border-box; }

:root {
  --green: #1a7f37;
  --green-bg: #e6f4ea;
  --yellow: #9a6700;
  --yellow-bg: #fff8e6;
  --red: #cf222e;
  --red-bg: #fdecec;
  --ink: #1f2328;
  /* 次级文字：卡片底是浅蓝白渐变（非纯白），#6e7781 在渐变底部只有 4.35:1，
     会跌破 AA。改用 Primer 的 #656d76：卡片渐变区间 5.02–5.11，白底 5.25。 */
  --muted: #656d76;
  --line: #d0d7de;
  --bg: #f6f8fa;

  /* 背景层配色（MYPR-45）：深色底 + 蓝紫 / 青 */
  --space-0: #05070f;
  --space-grid: rgba(122, 162, 255, .085);
  --glow-indigo: rgba(96, 110, 245, .58);
  --glow-violet: rgba(150, 90, 240, .46);
  --glow-cyan: rgba(45, 200, 230, .34);
  --card-bg: #fbfcff;
  --card-line: rgba(146, 172, 255, .32);
  --on-space: #e8eeff;
  --on-space-dim: #a9b8e0;

  /* 整页缩放单位（SUPE-14）：全站的字号 / padding / 间距 / 圆角都写成 calc(N * var(--px))。
     默认 1px，所以每个 calc() 的结果与原来的 px 字面值完全相同 —— <1600px 的渲染逐像素不变；
     大屏断点（见文末「≥1600px」）把这一个值改成随视口插值的长度，整页就等比放大。 */
  --px: 1px;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(15 * var(--px));
  line-height: 1.6;
  overflow-x: hidden;
}

/* 兜底色：背景层加载前后都是深色，避免白闪；同时作为超出视口的兜底渐变 */
html {
  background-color: var(--space-0);
  background-image: linear-gradient(168deg, #070b1a 0%, #0b1030 38%, #0a1a35 68%, #05070f 100%);
  background-attachment: fixed;
  /* SUPE-12：永久预留滚动条槽位。设置抽屉是 position:fixed 的浮层，但它出现时若
     页面滚动条因此出现/消失，面板宽度会跳 15px —— 预留下这条就不会（B7）。 */
  scrollbar-gutter: stable;
}
body { background: transparent; }

/* ------------------------------------------------------------------ *
 * 背景层：深色底 + 蓝紫/青渐变 + 低透明度网格 + 光晕 + 缓慢流动光带
 * 动效只用 transform / opacity（合成层），不动 layout，避免掉帧
 * ------------------------------------------------------------------ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--space-0);
}
.bd-base {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 90% at 8% -12%, #202a72 0%, rgba(32, 42, 114, 0) 58%),
    radial-gradient(110% 85% at 96% 0%, #11406b 0%, rgba(17, 64, 107, 0) 56%),
    radial-gradient(100% 70% at 50% 108%, #0e3f57 0%, rgba(14, 63, 87, 0) 62%),
    linear-gradient(168deg, #070b1a 0%, #0b1030 38%, #0a1a35 68%, #05070f 100%);
}
.bd-grid {
  position: absolute;
  inset: -25%;
  background-image:
    linear-gradient(to right, var(--space-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--space-grid) 1px, transparent 1px);
  background-size: calc(52 * var(--px)) calc(52 * var(--px));
  -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 22%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .18) 86%, transparent 100%);
  mask-image: radial-gradient(125% 100% at 50% 0%, #000 22%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .18) 86%, transparent 100%);
  will-change: transform;
  animation: bd-grid-drift 30s linear infinite;
}
.bd-glow {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  will-change: transform;
}
.bd-glow-indigo {
  top: -30vmax; left: -22vmax;
  background: radial-gradient(circle, var(--glow-indigo) 0%, rgba(96, 110, 245, .18) 34%, transparent 68%);
  animation: bd-float-a 26s ease-in-out infinite alternate;
}
.bd-glow-violet {
  top: -26vmax; right: -24vmax;
  width: 54vmax; height: 54vmax;
  background: radial-gradient(circle, var(--glow-violet) 0%, rgba(150, 90, 240, .14) 36%, transparent 68%);
  animation: bd-float-b 32s ease-in-out infinite alternate;
}
.bd-glow-cyan {
  bottom: -34vmax; left: 22%;
  width: 58vmax; height: 58vmax;
  background: radial-gradient(circle, var(--glow-cyan) 0%, rgba(45, 200, 230, .11) 34%, transparent 66%);
  animation: bd-float-c 38s ease-in-out infinite alternate;
}
.bd-sheen {
  position: absolute;
  left: -60%; top: -40%;
  width: 55%; height: 180%;
  transform: rotate(12deg) translate3d(0, 0, 0);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(122, 170, 255, .05) 44%,
    rgba(120, 230, 255, .09) 50%,
    rgba(122, 170, 255, .05) 56%,
    transparent 100%);
  opacity: 0;
  will-change: transform, opacity;
  animation: bd-sheen-sweep 28s ease-in-out infinite;
}

@keyframes bd-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 52px, 0); }
}
@keyframes bd-float-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vmax, 5vmax, 0) scale(1.08); }
}
@keyframes bd-float-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.1); }
}
@keyframes bd-float-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-7vmax, -3vmax, 0) scale(1.06); }
}
@keyframes bd-sheen-sweep {
  0% { transform: rotate(12deg) translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  68% { opacity: 1; }
  100% { transform: rotate(12deg) translate3d(200vw, 0, 0); opacity: 0; }
}

/* 减少动效：所有动画关闭，渐变与网格保留为静态底 */
@media (prefers-reduced-motion: reduce) {
  .bd-grid, .bd-glow, .bd-sheen { animation: none !important; }
  .bd-sheen { display: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

/* 顶栏 */
.topbar {
  display: flex; align-items: center; gap: calc(10 * var(--px));
  padding: calc(12 * var(--px)) calc(16 * var(--px));
  background: rgba(9, 13, 30, .74);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(120, 160, 255, .18);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .95);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: calc(17 * var(--px)); margin: 0; flex: 0 0 auto; color: var(--on-space); }
.badge {
  font-size: calc(12 * var(--px)); padding: calc(2 * var(--px)) calc(10 * var(--px)); border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-ok { color: var(--green); background: var(--green-bg); border-color: #b7e0c3; }
.badge-warn { color: var(--yellow); background: var(--yellow-bg); border-color: #eedcaa; }
/* 顶栏在深色底上，徽标换成高对比的玻璃态 */
.topbar .badge-ok { color: #8be8ad; background: rgba(26, 127, 55, .26); border-color: rgba(139, 232, 173, .40); }
.topbar .badge-warn { color: #ffd27a; background: rgba(154, 103, 0, .28); border-color: rgba(255, 210, 122, .40); }
.icon-btn {
  margin-left: auto; border: 1px solid var(--line); background: #fff;
  border-radius: calc(8 * var(--px)); font-size: calc(16 * var(--px)); line-height: 1;
  padding: calc(6 * var(--px)) calc(10 * var(--px)); cursor: pointer;
}
.icon-btn:hover { background: var(--bg); }
.topbar .icon-btn {
  background: rgba(126, 158, 255, .12);
  border-color: rgba(140, 170, 255, .32);
  color: var(--on-space);
}
.topbar .icon-btn:hover { background: rgba(126, 158, 255, .24); }

.banner-warn {
  position: relative; z-index: 1;
  padding: calc(8 * var(--px)) calc(16 * var(--px)); font-size: calc(13 * var(--px));
  color: #ffd27a; background: rgba(154, 103, 0, .24);
  border-bottom: 1px solid rgba(255, 210, 122, .28);
}

/* .page 需要自己的层：位置在固定背景层之上 */
.page {
  position: relative; z-index: 1; margin: 0 auto;
  max-width: calc(720 * var(--px)); padding: calc(16 * var(--px));
}
/* 卡片保持浅底（表单/文字对比度优先），用描边 + 投影与深色底分离 */
.panel {
  background: linear-gradient(180deg, var(--card-bg) 0%, #f7faff 100%);
  border: 1px solid var(--card-line);
  border-radius: calc(14 * var(--px)); padding: calc(16 * var(--px)); margin-bottom: calc(16 * var(--px));
  box-shadow:
    0 26px 50px -30px rgba(2, 6, 24, .95),
    0 2px 10px -8px rgba(2, 6, 24, .7),
    0 1px 0 rgba(255, 255, 255, .7) inset;
}

/* 输入区 */
.field-label {
  display: block; font-size: calc(13 * var(--px)); font-weight: 600;
  margin: calc(12 * var(--px)) 0 calc(6 * var(--px));
}
.field-label:first-child { margin-top: 0; }
textarea, input[type="text"], input[type="url"], input[type="password"], select {
  width: 100%; padding: calc(8 * var(--px)) calc(10 * var(--px));
  border: 1px solid var(--line); border-radius: calc(8 * var(--px));
  font: inherit; background: #fff; color: var(--ink);
}
textarea { resize: vertical; }

/* 两个输入框默认等高 = 原 rows="2" 实测 clientHeight 的 3 倍（SUPE-10，SUPE-12 扩到 #subject）。
   口径（改前基线：rows="2"，line-height 24px，上下 padding 8+8，上下边框 1+1，box-sizing: border-box）：
     clientHeight 64 = 2 行 × 24 + 16 padding；目标 3 × 64 = 192。
     height 写的是 border-box，所以 192 + 上下边框 2 = 194px（实测 clientHeight 192）。
   rows 凑不出这个值（rows=6 → 160，rows=7 → 184），所以高度只能落在 CSS 上；
   HTML 里保留 rows 只作为样式失效时的兜底。
   resize: vertical 仍然生效，用户拖拽会用行内 height 覆盖这里的默认值。
   改字体 / 行高时要按同一口径重算，`npm run check:layout` 的 A8 / B1 会验 clientHeight ∈ [188,196] 且两者相等。
   SUPE-14：高度跟着 --px 同比放大（大屏 194 → 232.8px），行高与 padding 同样随 --px 放大，
   “3 倍行数” 的口径因此在大屏上也成立；大屏下 A8 / B1 的期望区间改为
   `194 × scale − 2` ± 4（scale = --px 的缩放系数，见 check-layout.mjs 的 scaleForWidth()）。 */
#subject, #criteria { height: calc(194 * var(--px)); }

/* 输入框淡色（SUPE-12）：只给 .input-area 里的这两个框上色，
   抽屉里的 #cfg-* 输入框、结果区、示例卡片一律保持原样（B10 会验抽屉仍是白底）。 */
#subject {
  background-color: #f4f5ff;
  background-image: linear-gradient(180deg, #f4f5ff, #eef0ff);
  border-color: #c9cff8;
}
#criteria {
  background-color: #f1fbfd;
  background-image: linear-gradient(180deg, #f1fbfd, #eaf7fb);
  border-color: #bfe3ec;
}
/* 浏览器默认 placeholder 色（Chromium 是 #757575）在 #eef0ff 上只有 4.07:1，跌破 AA；
   显式改成 --muted（#656d76）：在 #eef0ff 上 4.63、在 #eaf7fb 上 4.80（B11 实测）。 */
#subject::placeholder, #criteria::placeholder { color: var(--muted); }
/* 聚焦：底色回白、边框换成本框主色、用色环代替原来的蓝色 outline */
#subject:focus, #criteria:focus {
  background-color: #fff; background-image: none; outline: none;
}
#subject:focus { border-color: #6e7cf5; box-shadow: 0 0 0 3px #6e7cf522; }
#criteria:focus { border-color: #2bb3cf; box-shadow: 0 0 0 3px #2bb3cf22; }
/* 标签前的 3px 色条，与输入框主色对应 */
.field-label[for="subject"]::before,
.field-label[for="criteria"]::before {
  content: ""; display: inline-block;
  /* 宽度保持 3px（B10 的约定值，不随大屏缩放），高度/间距跟着字号放大 */
  width: 3px; height: calc(12 * var(--px)); border-radius: calc(2 * var(--px));
  margin-right: calc(6 * var(--px)); vertical-align: -1px;
}
.field-label[for="subject"]::before { background-color: #6e7cf5; }
.field-label[for="criteria"]::before { background-color: #2bb3cf; }
textarea:focus, input:focus, select:focus {
  outline: 2px solid #0969da33; border-color: #0969da;
}
.ta-wrap { position: relative; }
.counter {
  position: absolute; right: calc(8 * var(--px)); bottom: calc(6 * var(--px));
  font-size: calc(12 * var(--px)); color: var(--muted); pointer-events: none;
}
.counter.over { color: var(--red); font-weight: 600; }
.field-error { color: var(--red); font-size: calc(13 * var(--px)); margin: calc(4 * var(--px)) 0 0; }
.hint { color: var(--muted); font-size: calc(12 * var(--px)); margin: calc(6 * var(--px)) 0 0; }

.mode-row {
  border: 0; margin: calc(12 * var(--px)) 0 0; padding: 0;
  display: flex; gap: calc(18 * var(--px)); font-size: calc(14 * var(--px));
}
.mode-row label { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.mode-row.disabled { opacity: .5; }
.mode-row input:disabled { cursor: not-allowed; }

/* 提交行（SUPE-17）：左侧可选猜测 + 右侧「判断」按钮，窄屏折行。
   行高仍由「判断」按钮决定（猜测按钮更矮、align-items:center 吸收差额），
   输入区面板高度与改动前一致（check:layout A8 / B1 / B2 / C8 都量这里）。 */
.submit-row {
  display: flex; align-items: center; gap: calc(12 * var(--px)); flex-wrap: wrap;
  margin-top: calc(14 * var(--px));
}
.submit-row .primary-btn { margin-top: 0; }
.guess-row { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.guess-label { font-size: calc(13 * var(--px)); color: var(--muted); }
.guess-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: calc(5 * var(--px)) calc(12 * var(--px));
  font-size: calc(13 * var(--px)); cursor: pointer;
}
.guess-btn:hover { background: var(--bg); }
.guess-btn:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.guess-btn[aria-pressed="true"] { border-color: #0969da; background: #e7f0fb; color: #0969da; font-weight: 600; }
.guess-btn[data-guess="NO_GO"][aria-pressed="true"] { border-color: var(--red); background: var(--red-bg); color: var(--red); }

/* 揭晓行（SUPE-17）：只在有猜测时出现，紧跟结论摘要 */
.guess-reveal {
  display: flex; align-items: baseline; gap: calc(10 * var(--px)); flex-wrap: wrap;
  margin: calc(8 * var(--px)) 0 0; font-size: calc(13 * var(--px)); color: var(--ink);
}
.guess-reveal-text { font-weight: 600; }
.guess-rate { color: var(--muted); font-size: calc(12 * var(--px)); }

.primary-btn {
  margin-top: calc(14 * var(--px)); padding: calc(9 * var(--px)) calc(26 * var(--px));
  background: #0969da; color: #fff; border: 0; border-radius: calc(8 * var(--px));
  font-size: calc(15 * var(--px)); cursor: pointer;
}
.primary-btn:hover:not(:disabled) { background: #0757b8; }
.primary-btn:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.primary-btn:disabled { background: #9ec7f0; cursor: not-allowed; }
button:disabled { cursor: not-allowed; }

/* 结果区 */
.empty-hint { color: var(--muted); text-align: center; margin: calc(24 * var(--px)) 0; }

.verdict-card {
  border-radius: calc(10 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px));
  margin-bottom: calc(14 * var(--px));
  border: 1px solid transparent;
}
.v-go { background: var(--green-bg); border-color: #b7e0c3; }
.v-nogo { background: var(--red-bg); border-color: #f3c1c5; }
.v-unsure { background: var(--yellow-bg); border-color: #eedcaa; }
.verdict-main { display: flex; align-items: baseline; gap: calc(10 * var(--px)); flex-wrap: wrap; }
.verdict-text { font-size: calc(24 * var(--px)); font-weight: 700; }
.verdict-conf { font-size: calc(15 * var(--px)); color: var(--muted); }
.tag-lowconf {
  font-size: calc(12 * var(--px)); color: var(--yellow); background: #fff;
  border: 1px solid #eedcaa; border-radius: 999px; padding: calc(1 * var(--px)) calc(8 * var(--px));
}
.verdict-summary { margin: calc(8 * var(--px)) 0 0; font-size: calc(14 * var(--px)); }

/* 三种结论的概率条（SUPE-17）：一条分段横条 + 下方读数；颜色沿用结论徽标（.history-badge.v-*）的配色 */
.prob-bar { margin: 0 0 calc(14 * var(--px)); }
.prob-track {
  display: flex; height: calc(10 * var(--px)); border-radius: 999px; overflow: hidden; background: #eaeef2;
}
.prob-seg { display: block; height: 100%; }
.prob-seg.v-go, .prob-dot.v-go { background: var(--green); }
.prob-seg.v-unsure, .prob-dot.v-unsure { background: var(--yellow); }
.prob-seg.v-nogo, .prob-dot.v-nogo { background: var(--red); }
.prob-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--px)) calc(8 * var(--px));
  margin: calc(6 * var(--px)) 0 0; font-size: calc(12 * var(--px)); color: var(--muted);
}
.prob-item { display: inline-flex; align-items: center; gap: calc(5 * var(--px)); }
.prob-sep { color: var(--line); }
.prob-dot { display: inline-block; width: calc(8 * var(--px)); height: calc(8 * var(--px)); border-radius: 50%; }

/* 维度图（SUPE-17）：默认在维度条上方居中；大屏改左右并排（见 ≥1600 段） */
.dim-section { margin: 0 0 calc(14 * var(--px)); }
.dim-section > .dim-list { margin: 0; }
.dim-chart { margin: 0 0 calc(10 * var(--px)); }
.dim-svg { display: block; width: 100%; max-width: calc(400 * var(--px)); height: auto; margin: 0 auto; }
.dim-svg-label { font-size: 14px; fill: var(--muted); font-family: inherit; }   /* viewBox 单位：400 宽时按比例缩放 */
.dim-svg-score { font-size: 13px; font-weight: 600; font-family: inherit; }

.dim-list { margin: 0 0 calc(14 * var(--px)); }
.dim-row { display: flex; align-items: center; gap: calc(8 * var(--px)); margin: calc(8 * var(--px)) 0; flex-wrap: wrap; }
.dim-name { flex: 0 0 calc(96 * var(--px)); font-size: calc(13 * var(--px)); font-weight: 600; word-break: break-all; }
.dim-bar-wrap {
  flex: 1 1 calc(120 * var(--px)); min-width: calc(100 * var(--px)); height: calc(10 * var(--px));
  background: #eaeef2; border-radius: 999px; overflow: hidden;
}
.dim-bar { height: 100%; border-radius: 999px; background: #9ec7f0; }
.dim-bar.level-hit { background: var(--green); }
.dim-bar.level-partial { background: #d4a72c; }
.dim-bar.level-miss { background: var(--red); }
.dim-score { flex: 0 0 auto; font-size: calc(13 * var(--px)); color: var(--muted); min-width: calc(30 * var(--px)); text-align: right; }
.dim-level { flex: 0 0 auto; font-size: calc(12 * var(--px)); border-radius: 999px; padding: calc(1 * var(--px)) calc(8 * var(--px)); border: 1px solid var(--line); }
.dim-level.level-hit { color: var(--green); border-color: #b7e0c3; background: var(--green-bg); }
.dim-level.level-partial { color: var(--yellow); border-color: #eedcaa; background: var(--yellow-bg); }
.dim-level.level-miss { color: var(--red); border-color: #f3c1c5; background: var(--red-bg); }
.dim-basis { flex-basis: 100%; margin: 0 0 0 calc(104 * var(--px)); font-size: calc(12 * var(--px)); color: var(--muted); }

.result-block { margin-bottom: calc(14 * var(--px)); }
.result-block h3 { font-size: calc(13 * var(--px)); margin: 0 0 calc(6 * var(--px)); color: var(--ink); }
.result-block ul { margin: 0; padding-left: calc(20 * var(--px)); font-size: calc(14 * var(--px)); }
.result-block li { margin: calc(3 * var(--px)) 0; }
.missing-block { background: var(--yellow-bg); border: 1px solid #eedcaa; border-radius: calc(10 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); }
.missing-block h3 { color: var(--yellow); }

.result-footer { color: var(--muted); font-size: calc(12 * var(--px)); margin: 0; }

/* 最近判断（SUPE-13）：放在 .result-area 内部、#error-card 之后，
   跟结果区内容一起滚动，不新增 grid 项；收起/展开照示例面板的写法 */
.history-panel { margin-top: calc(14 * var(--px)); border-top: 1px solid var(--line); padding-top: calc(10 * var(--px)); }
.history-head-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--px)); }
.history-title { font-size: calc(14 * var(--px)); margin: 0; color: var(--ink); }
.history-count { font-weight: 400; font-size: calc(12 * var(--px)); color: var(--muted); margin-left: calc(4 * var(--px)); }
.history-toggle {
  margin-left: 0; flex: 0 0 auto;
  font-size: calc(13 * var(--px)); padding: calc(4 * var(--px)) calc(9 * var(--px)); color: var(--muted);
}
.history-panel.collapsed .history-toggle { transform: rotate(-90deg); }
.history-panel.collapsed .history-body { display: none; }
.history-body { margin-top: calc(8 * var(--px)); }
.history-list { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.history-item {
  display: flex; align-items: center; gap: calc(8 * var(--px)); width: 100%; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(10 * var(--px)); font: inherit; color: inherit; cursor: pointer;
}
.history-item:hover { background: var(--bg); }
.history-item:focus-visible { outline: 2px solid #0969da; outline-offset: -2px; }
/* 徽标视觉在左，DOM 里排在 subject 之后：条目文本以 subject 开头（H1 的口径） */
.history-subject { flex: 1 1 auto; min-width: 0; font-size: calc(13 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-badge {
  order: -1; flex: 0 0 auto;
  font-size: calc(12 * var(--px)); line-height: 1; padding: calc(3 * var(--px)) calc(8 * var(--px));
  border-radius: 999px; border: 1px solid transparent;
}
.history-badge.v-go { color: var(--green); background: var(--green-bg); border-color: #b7e0c3; }
.history-badge.v-nogo { color: var(--red); background: var(--red-bg); border-color: #f3c1c5; }
.history-badge.v-unsure { color: var(--yellow); background: var(--yellow-bg); border-color: #eedcaa; }
.history-time { flex: 0 0 auto; font-size: calc(12 * var(--px)); color: var(--muted); }
.history-actions { margin-top: calc(8 * var(--px)); }
.history-actions button {
  border: 1px solid var(--line); background: #fff; border-radius: calc(8 * var(--px));
  padding: calc(5 * var(--px)) calc(14 * var(--px)); font-size: calc(13 * var(--px)); color: var(--ink); cursor: pointer;
}
.history-actions button:hover { background: var(--bg); }

/* 分享链接（SUPE-13）：结果卡上的「复制分享链接」+ 剪贴板不可用时的手选输入框 */
.share-row { display: flex; align-items: center; gap: calc(8 * var(--px)); flex-wrap: wrap; margin-bottom: calc(12 * var(--px)); }
.share-row button {
  border: 1px solid var(--line); background: #fff; border-radius: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(14 * var(--px)); font-size: calc(13 * var(--px)); cursor: pointer;
}
.share-row button:hover { background: var(--bg); }
.share-row .share-fallback { flex: 1 1 calc(220 * var(--px)); min-width: 0; font-size: calc(12 * var(--px)); }
.share-row .share-hint { flex-basis: 100%; margin: 0; font-size: calc(12 * var(--px)); color: var(--muted); }

/* UNSURE 时的「去补充」（SUPE-13）：只聚焦输入框，不自动提交 */
.missing-block .go-fill {
  margin-top: calc(8 * var(--px)); border: 1px solid var(--yellow); background: #fff; color: var(--yellow);
  border-radius: calc(8 * var(--px)); padding: calc(5 * var(--px)) calc(14 * var(--px)); font-size: calc(13 * var(--px)); cursor: pointer;
}
.missing-block .go-fill:hover { background: var(--yellow-bg); }

/* 错误卡 */
.error-card {
  background: var(--red-bg); border: 1px solid #f3c1c5;
  border-radius: calc(10 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px));
}
.error-card .error-msg { color: var(--red); font-weight: 600; margin: 0 0 calc(10 * var(--px)); }
.error-card .error-actions { display: flex; gap: calc(10 * var(--px)); align-items: center; flex-wrap: wrap; }
.error-card button {
  border: 1px solid var(--line); background: #fff; border-radius: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(16 * var(--px)); font-size: calc(14 * var(--px)); cursor: pointer;
}
.error-card .error-code { color: var(--muted); font-size: calc(12 * var(--px)); margin: calc(10 * var(--px)) 0 0; }
.raw-block { margin-top: calc(10 * var(--px)); font-size: calc(12 * var(--px)); }
.raw-block summary { cursor: pointer; color: var(--muted); }
.raw-block pre {
  white-space: pre-wrap; word-break: break-all;
  background: #fff; border: 1px solid var(--line); border-radius: calc(8 * var(--px));
  padding: calc(8 * var(--px)); max-height: calc(160 * var(--px)); overflow: auto;
}

/* 设置抽屉 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(3, 6, 18, .62); z-index: 10;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 11;
  width: calc(360 * var(--px)); max-width: 100vw;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-left: 1px solid var(--card-line);
  padding: calc(16 * var(--px)); overflow-y: auto;
  box-shadow: -18px 0 48px -20px rgba(2, 6, 24, .85);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(8 * var(--px)); }
.drawer-head h2 { font-size: calc(16 * var(--px)); margin: 0; }
.check-row { display: flex; gap: calc(8 * var(--px)); align-items: flex-start; font-size: calc(13 * var(--px)); margin: calc(10 * var(--px)) 0 0; }
.check-row input { margin-top: calc(4 * var(--px)); }
.drawer-actions { display: flex; gap: calc(10 * var(--px)); align-items: center; margin-top: calc(16 * var(--px)); }
/* 只作用于普通按钮；.primary-btn 的优先级低于 .drawer-actions button，
   若不排除会把主按钮背景刷成白色，白字白底导致默认态不可见 */
.drawer-actions button:not(.primary-btn) {
  border: 1px solid var(--line); background: #fff; border-radius: calc(8 * var(--px));
  padding: calc(7 * var(--px)) calc(18 * var(--px)); font-size: calc(14 * var(--px)); cursor: pointer;
}
.drawer-actions button:not(.primary-btn):hover:not(:disabled) { background: var(--bg); }
.drawer-actions .primary-btn { margin-top: 0; }
#test-result { font-size: calc(13 * var(--px)); }
#test-result.ok { color: var(--green); }
#test-result.fail { color: var(--red); }

/* 使用示例面板（MYPR-44） */
.ex-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(10 * var(--px)); }
.ex-headings { min-width: 0; }
.ex-panel-title { font-size: calc(15 * var(--px)); margin: 0; }
.ex-narrow-count { display: none; font-weight: 400; color: var(--muted); }
.ex-subtitle { font-size: calc(12 * var(--px)); color: var(--muted); margin: calc(4 * var(--px)) 0 0; }
.ex-toggle {
  margin-left: 0; flex: 0 0 auto;
  font-size: calc(13 * var(--px)); padding: calc(5 * var(--px)) calc(9 * var(--px)); color: var(--muted);
}
.examples-area.collapsed .ex-toggle { transform: rotate(-90deg); }
.ex-body { margin-top: calc(12 * var(--px)); }
.examples-area.collapsed .ex-body { display: none; }
.examples-area.collapsed .ex-subtitle { display: none; }

/* 示例平铺（SUPE-12）：窄屏 1 列 → 640~1023 两列 → 桌面 5 列（见文末桌面段）。
   用 grid 而不是 flex，卡片才能在跨行/换行时自动等高。 */
.ex-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--px)); }
.ex-card {
  border: 1px solid var(--line); border-radius: calc(10 * var(--px));
  background: #fff; overflow: hidden;
  /* 卡片内部纵向排：「填入」贴在卡片底部，5 张卡片同高时按钮也在同一水平线 */
  display: flex; flex-direction: column;
}
.ex-card-main {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(6 * var(--px));
  font: inherit; color: inherit; cursor: pointer;
}
.ex-card-main:hover { background: var(--bg); }
.ex-card-main:focus-visible, .ex-fill:focus-visible, .ex-toggle:focus-visible {
  outline: 2px solid #0969da; outline-offset: -2px;
}
.ex-fill:focus-visible { outline-offset: 2px; }
.ex-tag {
  display: inline-block; font-size: calc(12 * var(--px)); line-height: 1;
  padding: calc(3 * var(--px)) calc(8 * var(--px)); border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: var(--bg); margin-right: calc(6 * var(--px));
  vertical-align: 2px;
}
.ex-tag.t-0 { color: var(--green); background: var(--green-bg); border-color: #b7e0c3; }
.ex-tag.t-1 { color: #0969da; background: #e7f0fb; border-color: #bcd7f5; }
.ex-tag.t-2 { color: var(--ink); background: var(--bg); border-color: var(--line); }
.ex-tag.t-3 { color: var(--red); background: var(--red-bg); border-color: #f3c1c5; }
.ex-tag.t-4 { color: var(--yellow); background: var(--yellow-bg); border-color: #eedcaa; }
.ex-title { font-size: calc(14 * var(--px)); font-weight: 600; }
.ex-subject {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: calc(6 * var(--px)); font-size: calc(13 * var(--px)); color: var(--muted); line-height: 1.5;
}
.ex-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(6 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px)); margin-top: auto;   /* 钉在卡片底部 */
}
.ex-count { font-size: calc(12 * var(--px)); color: var(--muted); }
.ex-fill {
  border: 1px solid #0969da; background: #fff; color: #0969da;
  border-radius: calc(8 * var(--px)); padding: calc(4 * var(--px)) calc(16 * var(--px)); font-size: calc(13 * var(--px)); cursor: pointer;
}
.ex-fill:hover { background: #e7f0fb; }
.ex-tip { font-size: calc(12 * var(--px)); color: var(--muted); margin: calc(12 * var(--px)) 0 0; }

/* 桌面（≥1024px）：第一行「左输入 / 右结果」等高两列，第二行示例横跨两列。
   列宽必须 minmax(0,…)：长文本、长维度名都不能把列撑宽；auto 最小尺寸会按内容
   撑开列，那样 2000 字的输入或长维度名就会把栅格顶变形（B6）。 */
@media (min-width: 1024px) {
  .page {
    max-width: calc(1100 * var(--px));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(16 * var(--px));
    /* 行距交给 .panel 自己的 margin-bottom：grid 的 row-gap 会再叠一层 16px */
    row-gap: 0;
    /* 第一行两块面板等高（行高只由输入区决定），第二行按示例内容 */
    align-items: stretch;
  }
  .input-area { grid-column: 1; grid-row: 1; }
  .examples-area { grid-column: 1 / -1; grid-row: 2; }

  /* 结果区：内容层绝对定位，这样它不参与行高计算 ——
     出结果（哪怕长到十几条维度）时行高仍只由输入区决定，整页不高、不跳（B2 / B3）；
     内容超出时只在结果区内部滚动，而不是把面板顶高。 */
  .result-area { grid-column: 2; grid-row: 1; position: relative; padding: 0; }
  .result-body { position: absolute; inset: 0; padding: calc(16 * var(--px)); overflow-y: auto; }

  .ex-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 大屏（≥1600px，SUPE-14；SUPE-15 把曲线调小一档）：整页等比放大，内容宽随视口增长。
   唯一的旋钮是 :root 里的 --px（全站字号 / padding / 间距 / 圆角都写成 calc(N * var(--px))）：
     1600px 视口  → --px 1px（与 1024~1599 完全一致，断点处不跳变）
     1920px 视口  → --px 1.0667px（正文 16px）
     2560px 视口  → --px 1.2px（正文 15 → 18px、面板 padding 16 → 19.2px、圆角 10 → 12px）
     中间按 vw 线性插值，超过 2560 封顶 1.2（不再继续放大）。
   宽度：min(92vw, 1680px) —— 2560 时内容宽（clientWidth − padding）≈ 1642，1920 时 ≈ 1646，
   1600 时 1440；≥1024 的中等桌面仍用上面的 calc(1100 * var(--px))，视口 <1600 时就是原来的 1100px。
   纵向（SUPE-15）：第 1 行高度仍由输入区决定，两个 textarea 跟着 --px 长高（194 → 232.8px）。
   1.35 那一档在 2560×1271 上整页高约 1352（第 1 行把示例面板的 padding / 提示行推出视口，页面出现纵向滚动），
   1.2 下页面底边 1203、示例面板底边 1165、正文 18px —— 2560×1271 / 2560×1440 / 1920×1080 都不出滚动条。
   结果区在大屏上仍不滚动（C5），示例 5 张仍同排（C6），缩放仍统一走 --px（C7 / C9）。 */
@media (min-width: 1600px) {
  :root { --px: clamp(1px, calc(0.020834vw + 0.666667px), 1.2px); }
  .page { max-width: min(92vw, 1680px); }

  /* 结果区在大屏上用横向空间换纵向高度：每个维度只占一行 —— 名称 / 进度条 / 分数 / 等级 / 依据
     排在同一行，依据在行尾灰字并允许收缩换行（min-width:0 + overflow-wrap），依据列表分两列。
     不这样做的话，结果内容比输入区高约 1.2 倍（自然 mock 结果在 1280 上就是 736 vs 609）——
     字号与面板一齐放大后，2560／1920 上默认 mock 结果（5 维度 + 5 条依据 + 分享按钮行）仍要内部滚动（C5）。
     两列下的维度名仍按 129.6px 固定宽度，窄列里超长名字会按 word-break:break-all 换行。 */
  .dim-row { flex-wrap: nowrap; }
  .dim-basis { flex: 1 1 auto; min-width: 0; margin: 0 0 0 calc(12 * var(--px)); overflow-wrap: anywhere; }
  #result-card > .result-block:not(.missing-block) ul { columns: 2; column-gap: calc(24 * var(--px)); }

  /* 维度图（SUPE-17）与大屏：雷达图缩到 268 × --px 宽（高约 154）并与维度条左右并排。
     上下叠放会让默认 mock 结果高出内容区（雷达图 + 维度条），C5 的「不内部滚动」当场红掉；
     顺带把三处卡片间距从 14 收到 10、维度行间距 8 收到 4，保证 2560 / 1920 的默认结果装得下。 */
  .dim-section { display: flex; align-items: flex-start; gap: calc(16 * var(--px)); margin-bottom: calc(10 * var(--px)); }
  .dim-section > .dim-chart { flex: 0 0 auto; margin: 0; }
  .dim-section > .dim-list { flex: 1 1 auto; min-width: 0; margin: 0; }
  .dim-chart .dim-svg { width: calc(268 * var(--px)); max-width: none; }   /* 高 ≈ 154 × --px，与改前的高度预算一致 */
  #result-card > .verdict-card,
  #result-card > .prob-bar,
  #result-card > .result-block { margin-bottom: calc(10 * var(--px)); }
  .dim-row { margin: calc(4 * var(--px)) 0; }
}

/* 平板（640~1023px）：示例两列（768×1024 上两张一行、第三张换行，见 check:layout B9） */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .ex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 窄屏（<1024px）：手风琴形态，标题带数量 */
@media (max-width: 1023.98px) {
  .ex-narrow-count { display: inline; }
}

@media (max-width: 480px) {
  .page { padding: calc(10 * var(--px)); }
  .dim-name { flex-basis: calc(80 * var(--px)); }
  .dim-basis { margin-left: calc(88 * var(--px)); }
}

/* 窄屏：光晕尺寸反而放大（屏小、光斑占比更小会看不见），网格间距收一档 */
@media (max-width: 640px) {
  .bd-glow { width: 80vmax; height: 80vmax; }
  .bd-glow-violet { width: 72vmax; height: 72vmax; }
  .bd-glow-cyan { width: 76vmax; height: 76vmax; }
  .bd-grid { background-size: calc(44 * var(--px)) calc(44 * var(--px)); }
}

/* 兜底：不支持 backdrop-filter 的浏览器顶栏仍需足够不透明，保证标题可读 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar { background: rgba(9, 13, 30, .9); }
}