/* ==========================================================================
   B2B 营销体检 · 业务样式（顶栏 / 首屏 / 表单 / 弹层 / 响应式）
   --------------------------------------------------------------------------
   颜色全部走 design/design-tokens.css 的变量，本文件不写任何裸色值（#fff/#000 除外）。
   改配色 / 字号 / 圆角 → 去 design-tokens.css。改这里只动布局与组件外观。
   动画只在 @media (prefers-reduced-motion: no-preference) 内做变换，禁用弹跳缓动。
   ========================================================================== */

/* ----------------------------- 基础重置 ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
a { color: var(--accent); }

/* 数字对齐：评分 / 百分比 / 题号 / 编号 */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 通用容器 */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }
.container--form { max-width: var(--container-form); }

/* ----------------------------- 图标尺寸类 ----------------------------- */
.ic { display: inline-block; vertical-align: middle; flex: none; fill: none; stroke: currentColor; }
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

/* ----------------------------- 顶部品牌条 ----------------------------- */
.app-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--brand-900); letter-spacing: var(--tracking-tight); }
.app-header__right { display: flex; align-items: center; gap: var(--space-4); }
.save-hint { font-size: var(--text-2xs); color: var(--meta); min-width: 1px; }

/* ----------------------------- 屏幕切换 ----------------------------- */
.screen { display: block; }
.screen[hidden] { display: none; }
.screen--intro { padding-top: var(--space-16); padding-bottom: var(--section-y); }
.screen--form { padding-bottom: calc(var(--actionbar-h) + var(--space-10)); }

/* ----------------------------- 按钮 / 链接 ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--text-md); }
.btn--primary { background: var(--accent); color: var(--accent-on); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); transform: none; }
.btn--ghost { background: transparent; color: var(--fg-2); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-warm); border-color: var(--border-strong); }
.btn--secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-warm); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-hover); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 禁用按钮 hover 时不许变色：primary 保持主色，secondary 保持白底，ghost 保持透明 */
.btn--primary[disabled]:hover { background: var(--accent); }
.btn--secondary[disabled]:hover { background: var(--surface); }
.btn--ghost[disabled]:hover { background: transparent; }
.btn--danger[disabled]:hover { background: var(--danger); }

.link { background: none; border: none; padding: 0; color: var(--accent); font-size: var(--text-base); text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--accent-hover); }
.link--quiet { color: var(--muted); text-decoration: none; font-size: var(--text-sm); }
.link--quiet:hover { color: var(--fg-2); }

/* 图标按钮（关闭等）：扩大命中区到 44px */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: none; color: var(--meta); border-radius: var(--radius-sm);
}
.icon-btn:hover { color: var(--fg); background: var(--surface-warm); }

/* 统一聚焦态（禁止 outline:none 无替代）
   注意：这里不要写 border-radius，否则会把组件自己的圆角覆盖成 4px */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ----------------------------- 首屏 P1 ----------------------------- */
.intro__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
/* 左栏限宽 560px：中文一行 30 来个字最好读，太宽眼睛要来回扫 */
.intro__left { max-width: 560px; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); color: var(--muted); text-transform: uppercase; }
.intro__title { margin-top: var(--space-4); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--brand-900); }
.intro__lede { margin-top: var(--space-5); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-2); max-width: 34em; }

.fact-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.fact-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--fg-2); }
.fact-list .ic { color: var(--success); margin-top: 4px; flex: none; }

.privacy-note { margin-top: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); background: var(--surface-warm); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.privacy-note .ic { color: var(--brand-600); margin-top: 3px; flex: none; }

.intro__cta { margin-top: var(--space-6); }
.intro__cta .btn--primary { width: auto; }
.intro__cta-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--meta); }

.step-outline { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.step-outline li { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-2); }
.step-outline__no { color: var(--meta); }
.step-outline__text { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.step-outline__name { font-weight: var(--weight-medium); color: var(--fg); }
.step-outline__title { color: var(--muted); font-size: var(--text-xs); }

.intro__secondary { margin-top: var(--space-5); }

/* 来源行 */
.source-line { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); font-size: var(--text-xs); color: var(--meta); }

/* ----------------------------- 首屏报告样张 ----------------------------- */
.sample { margin: 0; }
.sample__cap { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-3); }
.sample__paper {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-1); padding: var(--space-6);
}
.sample__no { font-size: var(--text-sm); color: var(--meta); margin-bottom: var(--space-4); }
.sample__no .mono { color: var(--fg-2); }

.radar-block { margin: 0 auto; max-width: 300px; }
.radar { width: 100%; height: auto; display: block; }
.radar__grid { stroke: var(--chart-grid); stroke-width: 1; }
.radar__full { stroke: var(--chart-fullmark); stroke-width: 1.5; stroke-dasharray: var(--chart-fullmark-dash); }
.radar__axes { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 3 3; }
.radar__self { fill: var(--chart-self-fill); stroke: var(--chart-self-stroke); stroke-width: 2; }
.radar__dots circle { fill: var(--chart-self-dot); }
.radar__label { fill: var(--fg-2); font-size: 11px; font-family: var(--font-sans); font-weight: var(--weight-medium); }
.radar__score { fill: var(--fg); font-size: 11px; font-family: var(--font-mono); font-weight: var(--weight-medium); }
.radar__legend { text-align: center; font-size: var(--text-2xs); color: var(--meta); margin-top: var(--space-2); }

.score-list { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.score-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--space-3); }
.score-row__w { font-size: var(--text-2xs); color: var(--meta); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 2px 6px; }
.score-row__name { font-size: var(--text-sm); color: var(--fg-2); white-space: nowrap; }
.score-row__track { height: 8px; background: var(--score-track); border-radius: var(--radius-pill); overflow: hidden; }
.score-row__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--score-fill); border-radius: var(--radius-pill); }
.score-row__val { font-size: var(--text-sm); color: var(--fg); font-weight: var(--weight-medium); }

.sample__rule { height: 1px; background: var(--border-soft); margin: var(--space-5) 0; }
.sample__quote { font-family: var(--font-serif); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--fg-2); }
.sample__fade { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sample-fade-h); background: linear-gradient(to bottom, transparent, var(--surface)); }

/* ----------------------------- 草稿恢复提示条 ----------------------------- */
.draft-bar {
  margin-top: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); position: relative;
}
.draft-bar__ic { color: var(--info); flex: none; margin-top: 2px; }
.draft-bar__body { flex: 1; min-width: 0; }
.draft-bar__title { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg); }
.draft-bar__meta { font-size: var(--text-base); color: var(--muted); margin-top: var(--space-1); }
.draft-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }
.draft-bar__actions .btn { min-height: 40px; }
.draft-bar__confirm { font-size: var(--text-sm); color: var(--fg-2); width: 100%; }
.draft-bar__close { position: absolute; top: var(--space-3); right: var(--space-3); }

/* ----------------------------- 进度 / 圆点 / 状态 ----------------------------- */
.progress { height: var(--progress-h); background: var(--surface-sunken); width: 100%; }
/* 用 scaleX 而不是 width：只动 transform，不触发重排（--p 由 js/form.js 写入，取值 0~1） */
.progress__fill {
  height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .progress__fill { transition: transform var(--dur-slow) var(--ease-out); }
}

/* 圆点行：默认显示（平板/桌面），手机隐藏避免误触 */
.step-dots { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-6) 0 var(--space-3); }
.step-dot {
  width: var(--progress-step); height: var(--progress-step); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  border: 1px solid var(--border); background: var(--surface-sunken); color: var(--meta);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.step-dot.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-dot.is-current { background: var(--surface); border: 2px solid var(--accent); color: var(--accent); font-weight: var(--weight-medium); }
.step-dot:not([disabled]) { cursor: pointer; }

.step-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--muted); margin: var(--space-2) 0 var(--space-6); }
.step-status .ic { color: var(--meta); }
.step-status b { color: var(--fg); font-weight: var(--weight-medium); }

/* ----------------------------- 题目卡 ----------------------------- */
.q-list { display: grid; gap: var(--space-4); }
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
/* fieldset 的 legend 默认画在边框线上（浏览器 UA 行为），会把标题挤到卡片外面。
   修法：legend 浮动进入正常文档流，后续内容 clear 掉浮动。 */
.q-card__legend { float: left; width: 100%; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg); line-height: var(--leading-normal); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.q-card__ctrl, .q-card__note-slot { clear: both; }
.q-card__no { color: var(--meta); }
.q-card__hint { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-regular); }
.q-card__req { font-size: var(--text-xs); color: var(--muted); }
.q-card__ctrl { margin-top: var(--space-4); }

/* 单选行（竖排整行，好点） */
.opt-group { display: grid; gap: var(--space-2); }

/* 卡片式单选（BR-01 行业）：选项短且多，横着铺更省屏 */
.opt-group--card { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 767px) {
  .opt-group--card { grid-template-columns: minmax(0, 1fr); }
}
.opt { display: flex; align-items: center; gap: var(--space-3); min-height: var(--option-min-h); padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.opt:hover { border-color: var(--border-strong); }
.opt.is-checked { background: var(--accent-quiet); border-color: var(--accent-line); }
.opt__radio {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  position: relative; margin: 0; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.opt__radio:checked { border-color: var(--accent); }
.opt__radio:checked::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}
.opt__txt { font-size: var(--text-base); color: var(--fg-2); }
.opt.is-checked .opt__txt { color: var(--fg); font-weight: var(--weight-medium); }

/* 文本域 */
.q-text { width: 100%; min-height: 120px; resize: vertical; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.q-text::placeholder { color: var(--meta); }
.q-text:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.q-counter { margin-top: var(--space-2); font-size: var(--text-2xs); color: var(--meta); }

/* 数字输入 */
.q-num { min-height: var(--control-h); width: 100%; max-width: 200px; font-family: var(--font-mono); font-size: var(--text-base); color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--input-pad-x); }
.q-num--inline { width: 120px; }
.q-num:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* 单选 + 数字（BR-03） */
.count-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.count-row__label { font-size: var(--text-sm); color: var(--fg-2); }

/* 两组单选（BR-04） */
.two-radio__group { margin-top: var(--space-4); }
.two-radio__group:first-child { margin-top: 0; }
.two-radio__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); margin-bottom: var(--space-2); }

/* 占位题卡 */
.q-card--placeholder { border-style: dashed; }
.q-placeholder__txt { font-size: var(--text-sm); color: var(--muted); }

/* ----------------------------- 底部操作条 ----------------------------- */
.action-bar { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); }
.action-bar .btn { min-width: 120px; }

/* ----------------------------- 二次确认遮罩 ----------------------------- */
.overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay-scrim); }
.overlay[hidden] { display: none; }
.overlay__panel { background: var(--overlay-panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: var(--space-8); max-width: 420px; width: 100%; }
.overlay__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--fg); }
.overlay__text { margin-top: var(--space-3); font-size: var(--text-base); color: var(--fg-2); }
.overlay__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

/* ----------------------------- Toast ----------------------------- */
.toast { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast); background: var(--fg); color: #fff; font-size: var(--text-sm); border-radius: var(--radius-md); box-shadow: var(--elev-3); padding: var(--space-3) var(--space-4); }
.toast[hidden] { display: none; }

/* 无脚本提示 */
.noscript { padding: var(--space-8); text-align: center; color: var(--danger); }

/* ----------------------------- 响应式 ----------------------------- */
@media (min-width: 1280px) {
  .intro__title { font-size: var(--text-4xl); }
}

@media (max-width: 1024px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__right { order: 2; }                 /* 样张移到 CTA 下方 */
}
@media (max-width: 767px) {
  .step-dots { display: none; }              /* 手机隐藏圆点，避免误触 */
  .intro__title { font-size: var(--text-2xl); }
  .screen--intro { padding-top: var(--space-10); }
  .q-card { padding: var(--space-5); }
  .draft-bar__actions .btn { flex: 1 1 100%; }
  /* 底部操作条固定 */
  .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar); margin: 0; padding: var(--space-3) var(--container-gutter-m) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .action-bar .btn { flex: 1; }
  .btn--ghost { flex: 0 0 auto; }
}
/* ----------------------------- 新题型控件 -----------------------------
   注意：变量名必须能在 design/design-tokens.css 里找到。写错变量名不会报错，
   只会静默取初始值（通常是继承色 / 透明），这种 bug 肉眼看不出来，只能靠核对。 */

/* ③ 多选 + 百分比（BR-08）*/
.pct-group { display: grid; gap: var(--space-2); }
.pct-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pct-row:hover { border-color: var(--border-strong); }
.pct-row:focus-within { border-color: var(--accent); }
.pct-row__box { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pct-row__txt { flex: 1 1 auto; font-size: var(--text-base); color: var(--fg-2); }
.pct-row__unit { flex: none; font-size: var(--text-sm); color: var(--meta); }
.q-num--pct { flex: none; width: 88px; text-align: right; }   /* §5.4 ③ 固定 88px */
.q-num:disabled { background: var(--surface-sunken); color: var(--meta); cursor: not-allowed; }

/* 合计行：必须让用户看见「加起来是多少」，不许静默通过 */
.pct-sum { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--meta); }
.pct-sum.is-ok { color: var(--success); }
.pct-sum.is-warn { color: var(--warn); }
.pct-sum.is-error { color: var(--danger); font-weight: var(--weight-medium); }

/* ④ 滑杆（M-06）：端点标签 + 刻度都按题目配置生成，不写死 0–10 */
.slider-list { display: grid; gap: var(--space-3); }
.slider-row {
  display: grid; grid-template-columns: minmax(110px, 1fr) minmax(150px, 240px) 3rem;
  align-items: center; gap: var(--space-3);
}
.slider-row__label { font-size: var(--text-base); color: var(--fg-2); }
.slider-row__ctl { display: grid; gap: var(--space-1); }
.slider-row__range {
  width: 100%; accent-color: var(--accent); cursor: pointer;
  padding-block: 12px;          /* 把触摸命中区撑到 48px（§5.4 ④） */
}
.slider-row__ticks { display: flex; justify-content: space-between; }
.slider-row__tick { flex: 1; text-align: center; }
.slider-row__tick::before {
  content: ''; display: block; width: 1px; height: 4px;
  margin: 0 auto 2px; background: var(--border-strong);
}
.slider-row__tickno { font-size: var(--text-2xs); color: var(--meta); }
.slider-row__val { text-align: right; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--accent); }
.slider-row.is-untouched .slider-row__label { color: var(--muted); }
.slider-row.is-untouched .slider-row__val { color: var(--meta); }

/* 排序（C-06）：上移 / 下移，不用拖拽 */
.sort-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sort-item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.sort-item__idx {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.sort-item__txt { flex: 1 1 auto; font-size: var(--text-base); color: var(--fg); }
.sort-item__btns { display: flex; gap: var(--space-1); }

/* ----------------------------- 跳过提示（§6）----------------------------- */
/* 校验汇总条：只在点了「下一步」还有洞时出现，不打断、不弹窗 */
.step-gate {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-3) var(--space-4);
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--fg-2);
}
.step-gate[hidden] { display: none; }
.step-gate__text { display: grid; gap: var(--space-1); }
.step-gate__acts { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* 有问题的题目卡：只改边框，不改背景（§6.2） */
.q-card.is-warn { border-color: var(--warn-line); }
.q-card__note-slot:empty { display: none; }

/* 题目卡内的提示块：浅黄底，警示色只用在图标和底上，文字用 --fg-2 保证对比度 */
.q-note {
  margin-top: var(--space-4);
  background: var(--warn-bg); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.q-note__head { display: flex; align-items: flex-start; gap: var(--space-2); }
.q-note__head .ic { color: var(--warn); flex: none; margin-top: 2px; }
.q-note__txt { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-2); }
.q-note__acts { display: flex; gap: var(--space-4); margin-top: var(--space-2); padding-left: calc(20px + var(--space-2)); }

/* 已跳过的题：整卡换暖底，右上角挂「已跳过」胶囊 */
.q-card.is-skipped { background: var(--surface-warm); border-color: var(--border-soft); }
.q-card__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); color: var(--meta);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px var(--space-3);
}
.q-card__undo { background: none; border: none; padding: 0; color: var(--accent); font-size: var(--text-2xs); text-decoration: underline; text-underline-offset: 3px; }
.q-card__undo:hover { color: var(--accent-hover); }

/* 小号文字链接（跳过 / 回去填 这类次要动作） */
.link--xs { font-size: var(--text-xs); }
.link--accent { color: var(--accent); }
.link--accent:hover { color: var(--accent-hover); }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }

/* ----------------------------- 提交结果页 ----------------------------- */
.screen--result { padding: var(--space-8) 0 var(--space-12); }
.result-card {
  max-width: 680px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.result-card__cap { font-size: var(--text-sm); color: var(--muted); }
.result-id { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.result-id .ic { color: var(--meta); }
.result-id__label { font-size: var(--text-sm); color: var(--muted); }
.result-id__val { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); }
.result-wait { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--fg-2); }
.result-wait .ic { color: var(--accent); }
.result-grade { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.result-grade__score { font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--brand-700); letter-spacing: var(--tracking-tight); }
.result-grade__tag { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg); }
.result-grade__red { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--danger); font-size: var(--text-sm); }
.result-dims { display: grid; gap: var(--space-2); }
.result-dim { display: grid; grid-template-columns: 2.75rem 4.5rem 1fr 2.5rem auto; align-items: center; gap: var(--space-3); }
.result-dim__w { font-size: var(--text-sm); color: var(--meta); }
.result-dim__name { font-weight: var(--weight-medium); color: var(--fg); }
.result-dim__track { height: 10px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.result-dim__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--brand-600); border-radius: var(--radius-pill); }
.result-dim__fill.is-capped { background: var(--warn); }
.result-dim__val { text-align: right; font-weight: var(--weight-medium); }
.result-dim__cap { font-size: var(--text-xs); color: var(--warn); }
.result-note { font-size: var(--text-sm); color: var(--fg-2); background: var(--warn-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.result-tree { background: var(--surface-warm); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.result-tree__title { font-weight: var(--weight-medium); color: var(--fg); margin-bottom: var(--space-1); }
.result-tree__act { font-size: var(--text-base); color: var(--fg-2); line-height: var(--leading-normal); }
.result-red { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-md); color: var(--danger); font-weight: var(--weight-medium); }
.result-card .link { align-self: flex-start; margin-top: var(--space-1); }

/* ≤640px：滑杆改成「标签 + 数值」一行、轨道独占一行；占比输入框收窄（§13 断点表） */
@media (max-width: 640px) {
  .slider-row { grid-template-columns: 1fr auto; }
  .slider-row__label { grid-column: 1; grid-row: 1; }
  .slider-row__ctl { grid-column: 1 / -1; grid-row: 2; }
  .slider-row__val { grid-column: 2; grid-row: 1; }
  .q-num--pct { width: 76px; }
  .result-dim { grid-template-columns: 2.5rem 4rem 1fr 2.25rem auto; gap: var(--space-2); }
  .q-note__acts { padding-left: 0; }
}

/* ----------------------------- 打印 -----------------------------
   本轮只做「把不能印的东西藏掉」；报告页完成后，
   这里会补上 design/设计提示词.md §12 的完整分页与页眉页脚规则 */
@media print {
  .no-print { display: none !important; }
  body { background: var(--surface); }
}

/* ----------------------------- 无障碍：减少动效 ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* 仅允许 transform / opacity 的轻微过渡，已在上面组件里使用；
     进入动画等如需新增放在这里。禁用弹跳缓动（全站未使用）。 */
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}