/* 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; }

/* 信息量提示（SUPE-19）：纯本地，不参与任何请求。高度预算（综述）：
   进度行（12px，line-height 1.2）+ chip 行（11px，line-height 16px）+ 小间距 ≈ 37px；
   1920×1080 上页面底边只有约 12px 余量，所以 ≥1600px 另外把页面底部纯留白收掉（见文末大屏段）。
   chip 字号 11px（≤12px）：大屏输入列里 5 个 chip 能排成一行；窄屏自然折行，不横向溢出。 */
.info-row { margin: calc(3 * var(--px)) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: calc(1 * var(--px)) calc(8 * var(--px)); }
.info-progress {
  margin: 0; font-size: calc(12 * var(--px)); line-height: 1.2;
  color: var(--muted); white-space: nowrap;
}
/* 进度条（SUPE-19）：行内 flex 项、定高 6px，跟「已提供 N/5」同一行——不新增行、不撑高 #info-row。
   1920×1080 整页只剩约 4.3px 余量，这里一旦换行（如 display:block / flex-basis:100%）C9 就会红。 */
.info-bar {
  flex: 0 1 auto; width: calc(76 * var(--px)); height: 6px;
  border-radius: 999px; background: #eaeef2; overflow: hidden;
}
.info-bar-fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #1a7f37, #2bb3cf);
}
.info-chips { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.info-chip {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 0 calc(6 * var(--px));
  font-size: calc(11 * var(--px)); line-height: calc(16 * var(--px)); font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.info-chip.is-on { border-color: #b7e0c3; background: var(--green-bg); color: var(--green); cursor: default; }
.info-chip.is-off:hover { background: var(--bg); }
.info-chip:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }

.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 / SUPE-21）：左侧可选猜测，右侧「判断」+「随机出题」。
   行高仍由「判断」按钮决定（猜测按钮更矮、align-items:center 吸收差额）；
   .action-row 整体折行：窄屏放不下时两个按钮一起换到下一行，判断的宽度不会被动过
   （check:layout 的 R9 / R10 量与这里有关，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; }
.action-row { display: flex; align-items: center; gap: calc(8 * var(--px)); flex-wrap: wrap; min-width: 0; }
.action-row .primary-btn { flex: 0 0 auto; }
.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; }

/* 次级按钮（SUPE-21：随机出题）：描边 + 浅色文字，视觉权重明显低于实心的「判断」；
   上下 padding 比 .primary-btn 少 1px（8 vs 9）、多一圈 1px 边框 —— border-box 下
   两者高度完全相同（38px），基线也对齐（check:layout R9）。 */
.secondary-btn {
  flex: 0 0 auto;
  padding: calc(8 * var(--px)) calc(16 * var(--px));
  background: #fff; color: #0969da; border: 1px solid #0969da;
  border-radius: calc(8 * var(--px)); font-size: calc(15 * var(--px)); cursor: pointer;
}
.secondary-btn:hover:not(:disabled) { background: #e7f0fb; }
.secondary-btn:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.secondary-btn:disabled { color: #9ec7f0; border-color: #c8defa; cursor: not-allowed; }

/* 出题状态行（SUPE-21）：限流倒计时 / 失败提示；默认 hidden，出现时才占一行高度 */
.random-hint { margin: calc(8 * var(--px)) 0 0; font-size: calc(13 * var(--px)); color: var(--muted); }
.random-hint.is-error { color: var(--red); }

/* 结果区 */
.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-22）：JS 只在新判断时加 .is-entering（animationend 后摘掉），
   所以回放历史 / 切语气不播；只动 opacity / transform，260ms ≤ 300ms。
   结论文字从第一帧就是终值，这里不碰文字内容。 */
.verdict-card.is-entering { animation: verdict-enter 260ms ease-out both; }
@keyframes verdict-enter {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

/* 揭晓彩蛋（SUPE-19）：纸屑层绝对定位、不参与布局（不影响 B2 / C5 / C8 的几何）；
   纯 CSS 动画，JS 只负责撒节点与到时移除整层（绝对定位 + overflow:hidden，长不出卡片）。 */
.verdict-card { position: relative; }
.confetti-layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.confetti-piece {
  position: absolute; top: calc(-14 * var(--px)); display: block;
  width: calc(7 * var(--px)); height: calc(10 * var(--px)); border-radius: calc(2 * var(--px));
  will-change: transform, opacity;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate3d(0, calc(260 * var(--px)), 0) rotate(540deg); opacity: 0; }
}
/* 连续 3 次 UNSURE 的提示（SUPE-19）：一行灰字，不进结论卡（维度 / 依据布局不变） */
.unsure-streak-hint {
  margin: 0 0 calc(14 * var(--px)); font-size: calc(13 * var(--px)); color: var(--muted);
  text-align: center;
}
/* 减少动效：纸屑层不显示（JS 本身也不会在 reducedMotion 下撒纸屑，这里是双保险）；
   入场动画同样关掉 —— check:layout 全程 reducedMotion，C4 / C8 的 rect 与字号不能被 scale() 影响 */
@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none; }
  .verdict-card.is-entering { animation: none; }
}

/* 三种结论的概率条（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-19）：并进 .share-row，不新增一行高度；窄屏随 share-row 自然折行。
   按钮比 .share-row 的按钮小一档（12px / line-height 22px），行高仍由「复制分享链接」决定。 */
.tone-switch { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.tone-label { font-size: calc(12 * var(--px)); color: var(--muted); }
.share-row .tone-btn {
  padding: 0 calc(8 * var(--px)); font-size: calc(12 * var(--px));
  line-height: calc(22 * var(--px)); border-radius: 999px; color: var(--ink);
}
.share-row .tone-btn[aria-pressed="true"] {
  border-color: #0969da; background: #e7f0fb; color: #0969da; font-weight: 600;
}

/* 分享链接（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); }


/* 桌面（≥1024px）：只有一行「左输入 / 右结果」等高两列（SUPE-21 去掉示例面板后不再有第二行）。
   列宽必须 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; }

  /* 结果区：内容层绝对定位，这样它不参与行高计算 ——
     出结果（哪怕长到十几条维度）时行高仍只由输入区决定，整页不高、不跳（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; }

}

/* 大屏（≥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; }

  /* 底部留白预算（SUPE-19）：信息量提示行要在 1920×1080 上装进首屏。
     改前 1920×1080 的内容底边约 1067.75（视口 1080）——只剩 12px，而这一行至少 37px。
     这里只收「纯留白」：面板的 margin-bottom 与 .page 的 padding-bottom。
     不移动任何内容、不改字号 / 面板 padding / 栅格 / 输入框高度（C1 / C3 / C4 / C7 的量都不在这里），
     窄屏（C8 的 390 / 768）不受影响。不收的话 C9（整页无滚动）在 1920×1080 上必然 FAIL。

     SUPE-21：必须给**两个**面板同时去 margin。删掉示例面板后 .result-area 成了
     `:last-child`，只收它的 margin 会让栅格行高变成「输入区 + 输入区的 margin」，
     结果区被 stretch 到行高后比输入区高出一个 margin（2560 上 Δ≈19.2，B2 当场红）。 */
  .page { padding-bottom: 0; }
  .page > .panel { margin-bottom: 0; }
}

@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); }
}

/* ==================================================================== *
 * SUPE-20：判断人格卡 / 成就徽章 / 「后来怎么样了」回访
 * 全部追加在文件末尾 —— 这样 `.topbar .badge` / `.topbar .icon-btn`
 * 一定排在 `.icon-btn { margin-left: auto }` 之后，`.drawer.profile-drawer`
 * 也一定排在 `.drawer { width: 360px }` 之后（同权重时靠后取胜）。
 * ==================================================================== */

/* 顶栏右对齐（SUPE-20）：多插一颗 .icon-btn 后，如果仍由按钮的 margin-left:auto 承担右对齐，
   第一颗之后的按钮会被推到最右之外。改成徽标 margin-right:auto 承担，按钮 margin-left 归零。
   顶栏高度仍由 .icon-btn（6 padding + 16 字号 line-height:1 + 2 边框 = 30）决定，
   加按钮前后实测 390 / 1920 / 2560 的顶栏高度、.page 顶边都不变。 */
.topbar .badge { margin-right: auto; }
.topbar .icon-btn { margin-left: 0; }

/* 「后来怎么样了」回访条（SUPE-20）：夹在顶栏与 .page 之间的一行。
   必须显式写 [hidden] { display: none } —— 作者样式的 display:flex 权重高于 UA 的
   [hidden] 规则，漏了这条「没有可问条目」时仍然占一行（1920×1080 的 C6 余量只有 4.28px）。 */
.revisit-banner {
  position: relative; z-index: 4;
  display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--px)) calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(16 * var(--px));
  background: rgba(9, 105, 218, .18);
  border-bottom: 1px solid rgba(140, 170, 255, .32);
  color: var(--on-space);
  font-size: calc(13 * var(--px));
}
.revisit-banner[hidden] { display: none; }
.revisit-text { margin: 0; flex: 1 1 auto; min-width: 0; }
/* actions 用可伸缩项（而不是 flex:0 0 auto）：320px 宽下 4 个按钮要能自己折行，
   否则「不再提醒」会被裁到视口外（右边界 362 > clientWidth 320，中点 elementFromPoint 命中 null）。 */
.revisit-actions { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); flex: 1 1 auto; min-width: 0; }
.revisit-btn {
  border: 1px solid rgba(140, 170, 255, .45); background: rgba(126, 158, 255, .16);
  color: var(--on-space); border-radius: 999px; font-family: inherit;
  padding: calc(3 * var(--px)) calc(10 * var(--px)); font-size: calc(12 * var(--px));
  cursor: pointer; white-space: nowrap;
}
.revisit-btn:hover { background: rgba(126, 158, 255, .3); }
.revisit-close {
  margin-left: 0; background: rgba(126, 158, 255, .12);
  border-color: rgba(140, 170, 255, .32); color: var(--on-space);
}
.revisit-close:hover { background: rgba(126, 158, 255, .3); }

/* 人格卡抽屉（SUPE-20）：.drawer 的 360px 同权重会覆盖 .profile-drawer，
   所以这里写 .drawer.profile-drawer（权重 0,2,0）。 */
.drawer.profile-drawer { width: calc(420 * var(--px)); }
.persona-card {
  border: 1px solid var(--card-line); border-radius: calc(12 * var(--px));
  background: #fff; padding: calc(12 * var(--px)) calc(14 * var(--px)); margin-bottom: calc(14 * var(--px));
}
.persona-title {
  margin: 0; font-size: calc(20 * var(--px)); font-weight: 700; color: var(--ink);
  line-height: 1.3;
}
.persona-title:empty { display: none; }
.persona-locked { margin: 0; font-size: calc(13 * var(--px)); color: var(--muted); }
.persona-locked[hidden] { display: none; }
.persona-stats { list-style: none; margin: calc(8 * var(--px)) 0 0; padding: 0; }
.persona-stat {
  display: flex; align-items: baseline; gap: calc(8 * var(--px));
  padding: calc(3 * var(--px)) 0; font-size: calc(13 * var(--px)); border-top: 1px dashed var(--line);
}
.persona-stat:first-child { border-top: 0; }
.persona-stat .stat-label { flex: 0 0 auto; color: var(--muted); }
.persona-stat .stat-value { flex: 0 0 auto; font-weight: 700; color: var(--ink); }
.persona-stat .stat-note { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: calc(12 * var(--px)); }

/* 成就徽章面板（SUPE-20）：未解锁 = 灰（label 用 --muted、底 #f6f8fa），已解锁 = 绿。
   灰掉但文字保留 —— 未解锁项不许 display:none（那样看不到还差什么）。 */
.badge-section { margin-bottom: calc(14 * var(--px)); }
.badge-title { margin: 0 0 calc(8 * var(--px)); font-size: calc(15 * var(--px)); color: var(--ink); }
.badge-list { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.badge-item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(6 * var(--px)) calc(8 * var(--px));
  border: 1px solid var(--line); border-radius: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(12 * var(--px));
  background: #f6f8fa;
}
.badge-item .badge-label { font-size: calc(13 * var(--px)); font-weight: 700; color: var(--muted); }
.badge-item .badge-desc { flex: 1 1 auto; min-width: 0; font-size: calc(12 * var(--px)); color: var(--muted); }
.badge-item .badge-time { font-size: calc(12 * var(--px)); color: var(--muted); }
.badge-item.is-on { background: var(--green-bg); border-color: #b7e0c3; }
.badge-item.is-on .badge-label { color: var(--green); }
.badge-item.is-on .badge-desc,
.badge-item.is-on .badge-time { color: #3f6b4c; }

/* 成就解锁 toast（SUPE-20）：固定底部居中，节点 3 秒后整块移除；position:fixed 不进布局 */
.toast-host {
  position: fixed; left: 50%; bottom: calc(24 * var(--px)); transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; gap: calc(8 * var(--px));
  align-items: center; pointer-events: none;
}
.toast {
  background: rgba(9, 13, 30, .92); color: #e8eeff;
  border: 1px solid rgba(140, 170, 255, .32); border-radius: 999px;
  padding: calc(6 * var(--px)) calc(16 * var(--px)); font-size: calc(13 * var(--px));
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .9);
}

/* 历史条目上的回访结果标记（SUPE-20）：老条目没有 outcome 时不出现 */
.history-outcome {
  flex: 0 0 auto; order: 2; font-size: calc(12 * var(--px));
  color: var(--muted);
}

/* 大屏（≥1600px）的回访条改成固定贴底（SUPE-20 返工）。
   为什么必须离开文档流：1920×1080 的整页余量是 0 —— 示例面板底边本来就 1075.72 / 1080（check:layout C6/C9），
   提示条在流内占 46~50px，会把 documentElement.scrollHeight 顶到 1126 > 1080，整页多出一条滚动条；
   check:layout 抓不到这一面（它不预置历史，永远没有提示条），只能由 check:features 的 Q11 守。
   fixed 之后：scrollHeight 仍是 1080、示例面板底边 1075.72 不动、提示条 top ≈ 1030 / bottom = 视口底，
   四个按钮仍可点、top 远大于顶栏 bottom（不遮顶栏）。
   <1600px 保持流内（那里整页本来就比视口高，多一行不影响任何断言，也不改任何窄屏基线）。 */
@media (min-width: 1600px) {
  .revisit-banner {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 6;
    /* 浮在白色面板上：半透明底色会把下面的面板文字透上来，所以用和顶栏一样的深色底（不透明度 96%） */
    background: rgba(9, 13, 30, .96);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 0;
    border-top: 1px solid rgba(120, 160, 255, .28);
    box-shadow: 0 -14px 32px -26px rgba(0, 0, 0, .95);
  }
  /* 提示条贴底后，徽章 toast 要上移一层：两者原本都在底部居中，新解锁的 toast 会盖住提示条的选项。
     toast-host 本身 pointer-events:none，不影响点击，但视觉上会把提示条挡住。 */
  .toast-host { bottom: calc(24 * var(--px) + 64px); }
}