/* ============================================================
   睡愈力 · AI 睡眠测评 — 页面视觉
   月夜暖金暗夜风（tokens 见 site.css）
   签名元素：月相进度（新月 → 满月，随答题圆满）
   ============================================================ */

[x-cloak] { display: none !important; }

:root { --weak: #c77e52; } /* 陶土色：薄弱维度警示，暖色系内、暗底可读 */

.st { position: relative; z-index: 1; }
.st-intro, .st-quiz, .st-result__inner {
  width: min(640px, 100% - 32px);
  margin: 0 auto;
}

/* ============================================================
   屏 1 · 开场
   ============================================================ */
.st-intro {
  padding: calc(var(--nav-h) + 80px) 0 80px;
  text-align: center;
}
.st-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: var(--radius-full);
  border: 1px solid rgba(196,162,101,0.2);
  font-size: 13px; font-weight: 500; color: var(--gold-dim); /* 46+ 用户可读性：≥13px/500 */
  letter-spacing: 0.14em; background: rgba(196,162,101,0.05);
}
.st-intro__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px); font-weight: 600;
  line-height: 1.3; letter-spacing: 0.04em;
  margin: 24px 0 20px;
}
.st-intro__title em { font-style: normal; color: var(--gold); }
.st-intro__sub {
  font-size: 15px; color: var(--text-muted); line-height: 1.9;
}
.st-intro__dims {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 32px 0 40px;
  font-size: 13px; color: var(--text-dim); letter-spacing: 0.06em;
}
.st-intro__dims li { display: flex; align-items: center; }
.st-intro__dims li + li::before {
  content: '·'; margin: 0 12px; color: var(--gold-dim);
}
.st-intro__cta { padding: 16px 48px; font-size: 16px; }
.st-intro__note,
.st-result__note {
  margin-top: 32px; font-size: 12px; color: var(--text-dim); text-align: center;
}

/* ============================================================
   屏 2 · 逐题作答
   ============================================================ */
/* — 题卡同格堆叠：切题时新旧题卡原地交叉淡入淡出，
     避免旧题卡淡出期间占位、新题卡先出现在底部再跳回顶部 — */
.st-quiz {
  padding: calc(var(--nav-h) + 48px) 0 80px;
  display: grid;
}
.st-quiz > .st-q { grid-row: 2; grid-column: 1; align-self: start; }

/* — 月相进度 — */
.st-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.st-moon {
  position: relative; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--gold-pale), var(--gold) 74%);
  box-shadow: 0 0 0 1px rgba(196,162,101,0.3), 0 0 14px rgba(196,162,101,0.28);
  overflow: hidden;
}
/* 夜色遮罩：从完全遮蔽（新月）滑出（满月） */
.st-moon::after {
  content: ''; position: absolute; top: -3%; left: -3%;
  width: 118%; height: 118%; border-radius: 50%;
  background: #0d0f15;
  transform: translateX(var(--shadowx, 0%));
  transition: transform 0.8s var(--ease);
}
.st-progress__track {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.st-progress__bar {
  height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.5s var(--ease);
}
.st-progress__txt {
  font-family: var(--font-display); font-size: 13px;
  color: var(--text-muted); letter-spacing: 0.12em; white-space: nowrap;
}

/* — 题卡 — */
.st-q__dim {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.14em; color: var(--gold-dim);
  margin-bottom: 16px;
}
.st-q__dim::before { content: ''; width: 22px; height: 1px; background: var(--gold-dim); }
.st-q__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 28px); font-weight: 600;
  line-height: 1.45; letter-spacing: 0.02em;
  margin-bottom: 32px; outline: none;
}
.st-q__opts { display: flex; flex-direction: column; gap: 12px; }
.st-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 20px;
  text-align: left; font-size: 15px; line-height: 1.6; color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.st-opt:hover {
  border-color: var(--gold-dim);
  background: rgba(196,162,101,0.04);
  transform: translateY(-1px);
}
.st-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.st-opt__dot {
  position: relative; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--text-dim);
  transition: border-color 0.12s;
}
.st-opt__dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--gold);
  transform: scale(0); transition: transform 0.15s var(--ease);
}
.st-opt--on {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(196,162,101,0.1), rgba(196,162,101,0.04));
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.st-opt--on .st-opt__dot { border-color: var(--gold); }
.st-opt--on .st-opt__dot::after { transform: scale(1); }

.st-q__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px;
}
.st-q__back {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 12px; /* §10.2 触控 ≥44px */
  font-size: 13px; color: var(--text-muted);
  transition: color 0.2s;
}
.st-q__back:hover:not(:disabled) { color: var(--gold-pale); }
.st-q__back:disabled { opacity: 0.3; cursor: default; }
.st-q__hint { font-size: 12px; color: var(--text-dim); }

/* ============================================================
   屏 3 · 结果页
   ============================================================ */
.st-result { position: relative; padding: calc(var(--nav-h) + 20px) 0 80px; }
/* 背景色彩旅程：首屏纯黑 → 中段一点冷灰蓝（情绪区）→ CTA 回暖；
   长渐变无硬停，透明度在 DESIGN.md 氛围色上限内 */
.st-result::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,13,19,0) 0%,
    rgba(96,116,140,0.045) 38%,
    rgba(96,116,140,0.055) 62%,
    rgba(196,162,101,0.05) 100%);
}
.st-result__inner { position: relative; }

/* — 总分 — */
.st-score {
  text-align: center;
  padding-bottom: 48px; margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.st-score__row {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 24px;
}
.st-score__num {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 104px); font-weight: 500;
  line-height: 1; color: var(--gold-pale);
  text-shadow: 0 0 40px rgba(196,162,101,0.25);
}
.st-score__num::after {
  content: ' 岁';
  font-family: var(--font-body); font-size: 18px;
  color: var(--text-dim); margin-left: 10px; text-shadow: none;
}
/* 睡眠人格（结果页顶部主标题） */
.st-persona__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px); font-weight: 600;
  letter-spacing: 0.04em; color: var(--gold-pale);
  margin: 24px 0 16px; line-height: 1.4;
}
.st-persona__desc {
  max-width: 480px; margin: 0 auto;
  font-size: 15px; color: var(--text-muted); line-height: 1.9;
}
.st-score__agelabel {
  margin-top: 40px;
  font-size: 13px; letter-spacing: 0.22em; color: var(--gold-dim);
}
.st-score__peer { margin-top: 20px; font-size: 14px; color: var(--text-muted); }
.st-score__peer b {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--gold); margin: 0 3px;
}
.st-score__grade {
  padding: 7px 20px; border: 1px solid var(--gold); border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--gold);
  background: rgba(196,162,101,0.06); white-space: nowrap;
}
.st-score__desc {
  max-width: 480px; margin: 24px auto 0;
  font-size: 15px; color: var(--text-muted); line-height: 1.9;
}

/* — 五维度条形图 — */
.st-dims { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.st-dim__hd { display: flex; justify-content: space-between; align-items: baseline; }
.st-dim__name { font-size: 14px; font-weight: 500; }
.st-dim--weak .st-dim__name::after {
  content: '· 待加强'; margin-left: 8px;
  font-size: 12px; font-weight: 400; color: var(--weak);
}
.st-dim__val { font-family: Georgia, serif; font-size: 13px; color: var(--text-muted); }
.st-dim--weak .st-dim__val { color: var(--weak); }
.st-dim__track {
  height: 6px; margin: 8px 0 12px; border-radius: 3px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.st-dim__fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 1.1s var(--ease);
}
.st-dim--weak .st-dim__fill { background: linear-gradient(90deg, #96522f, var(--weak)); }
/* 阶梯延迟：七条 bar 依次生长 */
.st-dim:nth-child(1) .st-dim__fill { transition-delay: 0.20s; }
.st-dim:nth-child(2) .st-dim__fill { transition-delay: 0.28s; }
.st-dim:nth-child(3) .st-dim__fill { transition-delay: 0.36s; }
.st-dim:nth-child(4) .st-dim__fill { transition-delay: 0.44s; }
.st-dim:nth-child(5) .st-dim__fill { transition-delay: 0.52s; }
.st-dim:nth-child(6) .st-dim__fill { transition-delay: 0.60s; }
.st-dim:nth-child(7) .st-dim__fill { transition-delay: 0.68s; }
.st-dim__tip { font-size: 13px; color: var(--text-muted); line-height: 1.75; }

/* — 内容推荐 — */
.st-recs { margin-bottom: 48px; }
.st-recs__title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  letter-spacing: 0.03em; margin-bottom: 20px;
}
.st-rec {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color 0.12s, transform 0.12s;
}
.st-rec:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.st-rec__tag {
  flex-shrink: 0; padding: 4px 12px;
  border: 1px solid rgba(196,162,101,0.25); border-radius: var(--radius-full);
  font-size: 11px; color: var(--gold-dim); letter-spacing: 0.06em;
}
.st-rec__dim { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.st-rec__title { flex: 1; font-size: 14px; line-height: 1.6; }
.st-rec__arrow { color: var(--gold-dim); transition: transform 0.12s; }
.st-rec:hover .st-rec__arrow { transform: translateX(4px); }
/* 暂无内容标记态：不可交互、无悬停反馈 */
.st-rec--empty, .st-rec--empty:hover {
  border-color: var(--border); transform: none; cursor: default;
}
.st-rec--empty .st-rec__title { color: var(--text-dim); font-size: 13.5px; }

/* — 转化区 — */
.st-cta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.st-cta .btn { justify-content: center; padding: 13px 28px; font-size: 15px; }
.st-cta__again {
  align-self: center;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 16px; /* §10.2 触控 ≥44px */
  font-size: 13px; color: var(--text-muted); transition: color 0.2s;
}
.st-cta__again:hover { color: var(--gold-pale); }

/* ============================================================
   蒙版（睡眠卡片 / 21 天计划推广图 共用；模式同 sleep-calendar 的 cal-mask）
   ============================================================ */
.st-mask {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11,13,19,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.st-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: 92vh; overflow-y: auto;
  overscroll-behavior: contain; /* 蒙版内滚到底不穿透主页面 */
  background: var(--bg-elevated);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  padding: 28px 24px 24px;
  text-align: center;
}
.st-modal__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 44px; height: 44px; /* §10.2 触控 ≥44px */
  display: grid; place-items: center;
  border-radius: 50%; color: var(--text-muted);
  background: rgba(11,13,19,0.55);
  transition: color 0.2s, background 0.2s;
}
.st-modal__close:hover { color: var(--gold-pale); background: rgba(255,255,255,0.06); }
.st-modal__close:focus-visible { outline: 2px solid var(--gold-dim); }
.st-modal__card {
  width: min(320px, 100%);
  border: 1px solid rgba(196,162,101,0.3); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.st-modal__actions {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  margin-top: 20px;
}
.st-modal__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.st-modal__hint { margin-top: 12px; font-size: 12px; color: var(--text-dim); }

/* 推广图弹层：图即主体，去卡片底板；直角 + 放大（直角在深色蒙版上更利落） */
.st-modal--promo {
  width: auto; padding: 0;
  background: transparent; border: none; box-shadow: none;
  overflow: visible;
}
.st-modal__promo {
  display: block;
  width: min(440px, calc(100vw - 40px));
  max-height: 86vh; object-fit: contain;
  border: 1px solid rgba(196,162,101,0.25);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

/* ============================================================
   登录锁定卡（结果页未登录态）
   ============================================================ */
.st-lock {
  text-align: center;
  padding: 48px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
}
.st-lock__moon {
  width: 56px; height: 56px; margin: 0 auto 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--gold-pale), var(--gold) 74%);
  box-shadow: 0 0 0 1px rgba(196,162,101,0.3), 0 0 28px rgba(196,162,101,0.28);
  animation: moonBreathe 10s ease-in-out infinite; /* §5：循环动效 ≥10s 呼吸感 */
}
@keyframes moonBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(196,162,101,0.3), 0 0 20px rgba(196,162,101,0.22); }
  50% { box-shadow: 0 0 0 1px rgba(196,162,101,0.4), 0 0 40px rgba(196,162,101,0.36); }
}
.st-lock__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 28px); font-weight: 600;
  letter-spacing: 0.03em; color: var(--gold-pale);
  margin-bottom: 16px;
}
.st-lock__desc {
  max-width: 420px; margin: 0 auto 24px;
  font-size: 14px; line-height: 1.9; color: var(--text-muted);
}
.st-lock__btn { padding: 12px 32px; font-size: 15px; }
.st-lock__privacy {
  margin-top: 20px; font-size: 12px; color: var(--text-dim); line-height: 1.7;
}

/* ============================================================
   测评日历入口（占位，功能未上线）
   ============================================================ */
.st-cal-row { display: flex; justify-content: center; margin-top: 20px; }
.st-cal {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; /* §10.2 触控 ≥44px */
  padding: 8px 20px; border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  font-size: 13px; color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.2s, color 0.2s;
}
.st-cal:hover { border-color: var(--gold-dim); color: var(--text); }

/* ============================================================
   移动端
   ============================================================ */
@media (max-width: 768px) {
  .st-intro { padding-top: calc(var(--nav-h) + 48px); }
  .st-quiz { padding-top: calc(var(--nav-h) + 32px); }
  .st-result { padding-top: calc(var(--nav-h) + 12px); }
  .st-score__row { flex-direction: column; gap: 16px; }
  .st-q__hint { display: none; } /* 小屏省空间，自动推进不言自明 */
}

/* ============================================================
   降低动效（系统偏好）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-ambiance::before, .bg-ambiance::after { animation: none; }
  .st-lock__moon { animation: none; }
  .st-moon::after,
  .st-progress__bar,
  .st-dim__fill { transition: none; }
  .st-opt, .st-rec, .btn { transition-duration: 0.01ms; }
  .st-dim:nth-child(n) .st-dim__fill { transition-delay: 0s; }
}

/* ============================================================
   V2 · 睡眠测评完整版（20 题 + 结果方案）
   新增：题组约定横幅 / 每题小字 / 年份选择器 / 多选题 / 未成年终止态
        / 结果页 ⓪–⑩ 模块 / 年龄对照标尺（签名元素）/ 隐私授权弹窗
   上方旧 .st-* 类全部保留（sleep_calendar.html 结果蒙版复用）
   ============================================================ */

/* — 富文本加粗（设计稿文案 ** 标记 → <strong>） — */
.st-main__line strong, .st-mod__text strong, .st-letter__text strong, .st-letter__body strong,
.st-quad__ageline strong, .st-act__text strong, .st-next__pitch strong,
.st-flag__text strong { color: var(--gold-pale); font-weight: 600; }

/* ============ 屏 2 新增：题组横幅 / 小字提示 / 年份 / 多选 ============ */
.st-q__banner {
  margin: 0 0 20px; padding: 10px 14px;
  font-size: 12px; line-height: 1.8; color: var(--gold-dim);
  background: rgba(196,162,101,0.05);
  border: 1px solid rgba(196,162,101,0.16);
  border-radius: var(--radius-md);
}
.st-q__note {
  margin: -18px 0 22px;
  font-size: 13px; line-height: 1.7; color: var(--text-dim);
}

/* Q0 出生年份选择器（移动端原生滚轮） */
.st-year__select {
  width: 100%; min-height: 56px; padding: 12px 44px 12px 20px;
  font-size: 16px; color: var(--text);
  background: var(--bg-card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239f814a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  appearance: none; -webkit-appearance: none;
  transition: border-color 0.12s;
}
.st-year__select:hover { border-color: var(--gold-dim); }
.st-year__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.st-year__select option { background: var(--bg-elevated); color: var(--text); }
.st-year__warn {
  margin: 12px 0 0; padding: 10px 14px;
  font-size: 13px; line-height: 1.7; color: var(--warning);
  background: rgba(212,184,122,0.06);
  border: 1px solid rgba(212,184,122,0.22);
  border-radius: var(--radius-md);
}

/* R3 多选：方框勾选 */
.st-opt__box {
  position: relative; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--text-dim);
  transition: border-color 0.12s, background 0.12s;
}
.st-opt--multi .st-opt__box::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #14161c; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s var(--ease);
}
.st-opt--on .st-opt__box { border-color: var(--gold); background: var(--gold); }
.st-opt--on .st-opt__box::after { transform: rotate(45deg) scale(1); }
.st-q__done {
  display: flex; margin: 20px 0 0 auto; padding: 12px 28px; font-size: 15px;
}
.st-q__done:disabled { opacity: 0.4; cursor: default; }

/* 未成年终止态 */
.st-underage { width: min(640px, 100% - 32px); margin: 0 auto; padding: calc(var(--nav-h) + 80px) 0 80px; }

/* ============ 结果页 ⓪ 关怀卡 / 轻提示条 ============ */
.st-care {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 20px 24px; margin-bottom: 24px;
  background: rgba(196,162,101,0.05);
  border: 1px solid rgba(196,162,101,0.24);
  border-radius: var(--radius-md);
}
.st-care__icon { flex-shrink: 0; margin-top: 2px; color: var(--gold-dim); }
.st-care__text { font-size: 15px; line-height: 1.9; color: var(--text); }
.st-mildbar {
  margin-bottom: 24px; padding: 12px 16px;
  font-size: 13px; line-height: 1.7; color: var(--text-muted);
  background: rgba(196,162,101,0.04);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--radius-sm);
}

/* ============ 结果页 人格块（旧版内容回归，顶部原位置） ============ */
.st-persona { text-align: center; margin-bottom: 30px; }
.st-persona .st-persona__title { margin: 18px 0 12px; font-size: clamp(26px, 4.6vw, 38px); }

/* ============ 结果页 ① 主数字 + 双游标年龄刻度尺（签名元素） ============ */
.st-main {
  /* 语义色分档变量：默认金（优/轻微）；中度=陶橙、重度=红（DESIGN.md 偏离已报备用户） */
  --sev: var(--gold); --sev-dim: var(--gold-dim);
  --sev-num: var(--gold-pale); --sev-glow: rgba(196,162,101,0.25);
  text-align: center;
  padding-bottom: 32px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.st-main--moderate { --sev: #c77e52; --sev-dim: #96522f; --sev-num: #daa177; --sev-glow: rgba(199,126,82,0.28); }
.st-main--severe { --sev: #f87171; --sev-dim: #c2504a; --sev-num: #f6a5a0; --sev-glow: rgba(248,113,113,0.26); }
.st-main .st-score__agelabel { margin-top: 0; }
/* 大数字不带「岁」后缀（岁字由刻度尺标签与一句话承载，避免基线视觉错位） */
.st-main__num {
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 96px); font-weight: 500;
  line-height: 1; color: var(--sev-num);
  text-shadow: 0 0 40px var(--sev-glow);
}
.st-main__line {
  max-width: 500px; margin: 40px auto 0; /* 与刻度尺下标（实际 X 岁）拉开，防视觉拥挤（用户裁定 2026-09-07） */
  font-size: 16px; line-height: 1.9; color: var(--text-muted);
  text-wrap: pretty; /* 长句防孤儿字 */
}
.st-main__foot { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.st-main__hint { margin-top: 18px; font-size: 12px; letter-spacing: 0.08em; color: var(--gold-dim); }

/* 双游标年龄刻度尺：左端 18 / 右端 60+，下标灰「实际 X 岁」、上标档位色「睡眠年龄」（无数字——
   用户裁定 2026-09-07：上标数字与上方大数字重复显乱，只留词；下标数字是页面唯一的实际年龄，保留）。
   中间距离用档位色填充——距离越长越刺眼 */
.st-ruler { display: flex; align-items: center; gap: 10px; margin: 24px auto 0; max-width: 520px; }
.st-ruler__cap { flex-shrink: 0; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.st-ruler__track { position: relative; flex: 1; height: 48px; }
.st-ruler__track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px;
  background: var(--border-light); border-radius: 1px;
}
.st-ruler__gap {
  position: absolute; top: 22px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sev-dim), var(--sev));
}
.st-ruler__mark { position: absolute; top: 17px; transform: translateX(-50%); }
.st-ruler__mark i { display: block; width: 2px; height: 14px; margin: 0 auto; border-radius: 1px; }
.st-ruler__mark--actual i { background: var(--text-dim); }
.st-ruler__mark--sleep i { background: var(--sev); box-shadow: 0 0 8px var(--sev-glow); }
.st-ruler__tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em;
}
.st-ruler__tag b { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 1px; }
/* 标签贴近轴线（2026-09-07 用户裁定：离轴太远显乱）：上标底边距刻度 3px、下标顶边距刻度 3px */
.st-ruler__tag--above { bottom: 34px; color: var(--sev); font-weight: 500; letter-spacing: 0.12em; }
.st-ruler__tag--below { top: 34px; }
.st-ruler__tag--below b { color: var(--text-muted); }
/* 游标靠近两端时标签内收对齐，防溢出/防与端点字相碰 */
.st-ruler__tag--start { transform: translateX(-6%); }
.st-ruler__tag--end { transform: translateX(-94%); }

/* 结果导览步骤条 */
.st-steps {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 28px;
  font-size: 12px; letter-spacing: 0.1em; color: var(--text-dim);
}
.st-steps i { font-style: normal; color: var(--gold-dim); }

/* ============ 结果页 ② 医学红旗卡 ============ */
.st-flags { margin-bottom: 24px; }
.st-flag {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px; margin-bottom: 12px;
  background: rgba(212,184,122,0.05);
  border: 1px solid rgba(212,184,122,0.22);
  border-radius: var(--radius-md);
}
.st-flag__icon { flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.st-flag__text { font-size: 14px; line-height: 1.9; color: var(--text); }
.st-flags__more {
  display: inline-flex; align-items: center; min-height: 44px; /* §10.2 触控 ≥44px */
  padding: 4px 8px; font-size: 13px; color: var(--gold-dim);
  transition: color 0.2s;
}
.st-flags__more:hover { color: var(--gold-pale); }

/* ============ 结果页通用模块卡 ============ */
.st-mod {
  padding: 20px 24px; margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.st-mod__kicker {
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; /* ≥13px/500，46+ 可读 */
  color: var(--gold-dim); margin-bottom: 10px;
}
.st-mod__kicker svg { vertical-align: -2px; margin-right: 8px; }
.st-mod__text { font-size: 15px; line-height: 1.9; color: var(--text); }
.st-mod__text--sub { margin-top: 8px; color: var(--text-muted); font-size: 14px; }

/* ③④ 数据卡（配角：压缩高度，桌面端双列） */
.st-datagrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.st-datagrid .st-mod { margin-bottom: 0; }
.st-mod--data { padding: 18px 22px; }

/* P4 矛盾提示卡（睡够仍累） */
.st-notebar {
  margin-bottom: 16px; padding: 12px 16px;
  font-size: 13px; line-height: 1.8; color: var(--text-muted);
  background: rgba(143,163,184,0.06);
  border-left: 2px solid var(--info);
  border-radius: var(--radius-sm);
}

/* ⑤ 源头归因（主角卡）：金徽章序号 + 图标 + 「可改」chip，点击展开一句解释 */
.st-causes { margin-top: 14px; }
.st-cause + .st-cause { border-top: 1px solid var(--border); }
.st-cause__head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 4px;
  text-align: left; border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.st-cause__head:hover { background: rgba(255,255,255,0.025); }
.st-cause__head:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
.st-cause__badge {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: #14161c;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold));
}
.st-cause__icon { flex-shrink: 0; display: inline-flex; color: var(--gold-dim); }
.st-cause__label { font-size: 15px; font-weight: 600; color: var(--text); }
.st-cause__chip {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 10px; border: 1px solid rgba(196,162,101,0.25); border-radius: var(--radius-full);
  font-size: 12px; color: var(--gold-dim); letter-spacing: 0.04em;
}
.st-cause__chev { flex-shrink: 0; color: var(--text-dim); transition: transform 0.2s var(--ease); }
.st-cause__chev--open { transform: rotate(180deg); }
.st-cause__body { max-height: 0; overflow: hidden; transition: max-height 0.25s var(--ease); }
.st-cause__body--open { max-height: 140px; }
.st-cause__body p { padding: 0 4px 14px 42px; font-size: 13px; line-height: 1.8; color: var(--text-muted); }

/* ============ 结果页 ⑥⑦ 信件卡（情绪归因 / 给你的话） ============
   全页唯一换底色的地方：冷灰蓝 + 左边框竖线 + 衬线正文，「一封信」质感；行高 ≥1.8。
   用户裁定 2026-09-07：取消 23em 行宽帽，文案填满卡宽再换行（原窄列在宽卡上右侧留大白块）。
   （冷色背景属 DESIGN.md 微偏离，已报备用户：用 --info 语义色而非紫色渐变） */
.st-letter {
  background: linear-gradient(160deg, rgba(96,116,140,0.10), rgba(96,116,140,0.03) 70%);
  border: 1px solid rgba(143,163,184,0.16);
  border-left: 2px solid var(--info);
}
.st-letter__text {
  font-family: var(--font-display); font-size: 16px; line-height: 1.9;
  letter-spacing: 0.02em; color: var(--text);
}
.st-letter__text--sub { margin-top: 10px; font-size: 15px; color: var(--text-muted); }
.st-letter__body {
  font-family: var(--font-display); font-size: 15.5px; line-height: 1.9;
  letter-spacing: 0.02em; color: var(--text-muted);
}

/* 象限 unaware 事实清单（信件卡内） */
.st-quad__factsintro { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.st-quad__facts { margin: 8px 0 4px; }
.st-quad__facts li {
  position: relative; padding-left: 16px; margin-top: 6px;
  font-size: 14px; line-height: 1.8; color: var(--text);
}
.st-quad__facts li::before { content: '·'; position: absolute; left: 4px; color: var(--gold-dim); }
.st-quad__ageline {
  margin: 16px 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  line-height: 1.6; color: var(--gold-pale);
}

/* ============ 结果页 ⑧ 行动卡 ============
   sage 绿 accent 与金色 CTA 区分（类型色仅小面积：标签/chip）；
   用户裁定 2026-09-07：删除左侧空心方框——像勾选框但不可点，造成误解 */
.st-act { margin-top: 14px; display: grid; gap: 8px; }
.st-act__item {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015);
}
.st-act__body { flex: 1; min-width: 200px; }
.st-act__label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #b8c8a0; }
.st-act__text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.9; color: var(--text); }
.st-act__chip {
  flex-shrink: 0; margin-top: 2px; padding: 3px 10px;
  border: 1px solid rgba(184,200,160,0.3); border-radius: var(--radius-full);
  font-size: 12px; color: #b8c8a0; white-space: nowrap;
}

/* ============ 结果页 ⑨ CTA（3 按钮 + 2 小字链接） ============ */
.st-next { text-align: center; padding: 28px 0 8px; }
.st-next__pitch { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.9; color: var(--text-muted); }
.st-next__line { display: block; text-wrap: pretty; } /* 按句号手动分行 + pretty 防窄屏孤儿字 */
.st-next__line + .st-next__line { margin-top: 4px; }
.st-next__retest { margin-top: 18px; font-size: 13px; color: var(--text-dim); }
.st-perks {
  margin: 18px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em;
}
.st-perks i { font-style: normal; color: var(--gold); margin-right: 7px; }
.st-next__cta { margin: 22px auto 0; width: min(480px, 100%); padding: 15px 24px; font-size: 16px; justify-content: center; }
.st-next__row { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.st-next__row .btn { flex: 1; max-width: 234px; padding: 13px 12px; font-size: 14px; justify-content: center; }
/* 描边按钮前置 lucide 图标（2026-09-07 用户裁定）：15px 描边图标，随文字色 */
.st-next__row .btn svg { width: 15px; height: 15px; margin-right: 7px; flex-shrink: 0; }
.st-next__links {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; color: var(--text-dim);
}
.st-next__links i { font-style: normal; }
.st-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 4px; /* §10.2 触控 ≥44px */
  font-size: 13px; color: var(--text-muted); transition: color 0.2s;
}
.st-link:hover { color: var(--gold-pale); }

/* P4 低信度轻提示 */
.st-confidence { margin: 24px 0 0; font-size: 12px; text-align: center; color: var(--text-dim); }

/* ============ 结果页 ⑩ 合规免责 + 援助渠道 ============ */
.st-legal {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.st-legal__help { font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.st-legal__help--strong { font-size: 13px; font-weight: 600; color: var(--gold-dim); }
.st-legal__disclaimer { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--text-dim); }

/* ============ 隐私授权弹窗（敏感个人信息单独同意） ============ */
.st-modal--consent { width: min(480px, 100%); text-align: left; }
.st-consent__title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--gold-pale);
  text-align: center; margin-bottom: 16px;
}
.st-consent__body { margin-bottom: 24px; }
.st-consent__body p { font-size: 14px; line-height: 1.9; color: var(--text-muted); }
.st-consent__body ul { margin-top: 12px; }
.st-consent__body li {
  position: relative; padding-left: 16px; margin-top: 8px;
  font-size: 14px; line-height: 1.9; color: var(--text-muted);
}
.st-consent__body li::before { content: '·'; position: absolute; left: 4px; color: var(--gold-dim); }
.st-consent__decline {
  display: flex; justify-content: center; width: 100%;
  min-height: 44px; align-items: center; /* §10.2 触控 ≥44px */
  margin-top: 8px; font-size: 13px; color: var(--text-muted);
  transition: color 0.2s;
}
.st-consent__decline:hover { color: var(--gold-pale); }

/* ============ 结果页导航换按钮（body 类由 assessment.js 按步骤切换） ============ */
.nav__cta-join { display: none; }
body.st-on-result .nav__cta-test { display: none; }
body.st-on-result .nav__cta-join { display: inline-flex; }

/* ============ 桌面端放宽（结果容器 920px；数据卡/行动卡双列） ============ */
@media (min-width: 1024px) {
  .st-result__inner { width: 920px; }
  .st-datagrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .st-act { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* 奇数条建议（常见 3 条）时末条通栏，避免右下留洞（2026-09-07 审计 F-A1）；
     用 of-type：x-for 的 <template> 占位也是子节点，nth-child 会错位 */
  .st-act__item:nth-last-of-type(1):nth-of-type(odd) { grid-column: 1 / -1; }
}

/* ============ V2 移动端 ============ */
@media (max-width: 768px) {
  .st-ruler { max-width: none; }
  .st-mod, .st-care { padding: 16px; }
  .st-act__chip { margin-left: 0; } /* 方框已删（2026-09-07），chip 折行时贴左对齐 */
}

/* ============ V2 降低动效（系统偏好） ============ */
@media (prefers-reduced-motion: reduce) {
  .st-opt__box, .st-opt__box::after, .st-year__select { transition: none; }
  .st-cause__chev, .st-cause__body { transition: none; }
}