/* ============================================================
   偕见坊 · 设计系统 v2「暖誓 Warm Vow」
   见 docs/DESIGN-SYSTEM.md：暖而不腻 / 成双语言 / 郑重来自工艺 / 金铜只点缀
   ============================================================ */

:root {
  --brand:      #BE2E5E;  /* v6 主色（酒红轴降饱和）：主按钮/链接/进度/强调 */
  --brand-deep: #8F1F44;  /* v6 主色深阶：hover/按下 */
  --coral:      #FF7A59;  /* 珊瑚：渐变搭档/次级强调 */
  --blush:      #FFE9E0;  /* 杏粉：分区底/卡片底 */
  --cream:      #FFF8F4;  /* 页面底色 */
  --ink:        #33272B;  /* 主文字（深暖墨） */
  --ink-soft:   #7A6A70;  /* 次级文字 */
  --gold:       #C9A227;  /* v6 香槟金点缀（限信任徽标/尊享描边）；徽章深金棕 #8A5F22 不变 */
  --white:      #FFFFFF;  /* 表单卡/内容卡 */

  --sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --num: Georgia, "Songti SC", serif;   /* 大数字统计的数字衬线点缀 */

  --radius-card: 14px;
  --radius-ctrl: 10px;
  --radius-pill: 999px;

  --shadow:       0 6px 24px rgba(190, 46, 94, .10);
  --shadow-hover: 0 10px 32px rgba(190, 46, 94, .16);

  /* ---- R1 渐变双 token（v6 酒红轴换算）：载字面深一档（白字 on #BE2E5E≈5.6 / on #8F1F44≈8.6）/ 装饰面亮渐变（不载字） ---- */
  --grad-text: linear-gradient(135deg, #8F1F44, #BE2E5E);
  --grad-deco: linear-gradient(135deg, #BE2E5E, #E8617C);

  /* ---- v3 比例与节奏 token（ITERATION-PLAN-v3 A） ---- */
  --space-section: clamp(56px, 8vw, 96px);  /* 全站区块垂直节奏（hero/页脚豁免） */
  --gap-blk:  40px;   /* 组内大间距：区块头 → 内容 */
  --gap-item: 24px;   /* 组内中间距：卡片/条目之间 */
  --gap-inl:  16px;   /* 组内小间距：行内/紧密元素 */

  /* ---- R1 字号 9 档（全站收敛，档位表见 docs/DESIGN-SYSTEM.md） ---- */
  --fs-micro: 12px;       /* 仅注脚/徽标小字：配 ink 或深色，不配 inkSoft */
  --fs-aux: 13px;         /* 辅助文字最低档（inkSoft 白/cream 底允许的最低字号） */
  --fs-aux-strong: 14px;  /* 次级强调（R2：blush 底不用 inkSoft，辅助字一律 --ink） */
  --fs-body: 15.5px;      /* 正文 */
  --fs-h4: 18px;          /* 卡片小标题 */
  --fs-h3: 20px;          /* 区块三级标题 */
  --fs-display-s: 24px;   /* 中展示字（测评题号/类型徽章等） */
  --fs-h2: clamp(30px, 2.2vw, 34px);  /* 区块主标题一档 */
  --fs-h1: clamp(30px, 4.5vw, 46px);  /* 页面主标题 */

  /* 内容宽度三层（v6 桌面档）：全宽背景带 · wide 1440（≥1600→1520）· 窄文 760（桌面 900，见下方桌面档 MQ） */
  --width-wide: 1440px;
  --width-narrow: 760px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 布局 ---------- */
.container { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--width-wide); }
.container-narrow { max-width: var(--width-narrow); }  /* 840 窄容器：测评正文/FAQ/关于 */

/* R1 ≥1440 大屏：区块垂直节奏上限放宽到 104（v6 容器宽上移到 :root 1440 基准） */
@media (min-width: 1440px) {
  :root { --space-section: clamp(56px, 8vw, 104px); }
}

/* v6 ≥1600 视口：容器 wide 1520 */
@media (min-width: 1600px) {
  .container-wide { max-width: 1520px; }
}

/* ============ v6 桌面字号层（>900px；≤900px 移动档继承原值，规格见 SPRINT-SPEC-v6 三） ============ */
@media (min-width: 901px) {
  :root {
    --fs-aux: 14px;                    /* 13→14 */
    --fs-body: 17px;                   /* 15.5→17 */
    --fs-h4: 20px;                     /* 18→20 */
    --fs-h3: 22px;                     /* 20→22 */
    --fs-h2: clamp(34px, 2.6vw, 40px); /* 栏目标题一档 30-34→34-40 */
    --width-narrow: 900px;             /* 窄文 760→900（FAQ 答案/result 解读段） */
  }
}

/* ============ v6 桌面导航（>900px）：logo 44 + 链接组真居中（flex 三段 1:auto:1）+ 16px/40 间距 ============ */
@media (min-width: 901px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .nav .brand { justify-self: start; grid-column: 1; }
  .nav .brand svg { height: 44px; }               /* 34→44 */
  .nav .nav-links { justify-self: center; grid-column: 2; gap: 40px; font-size: 16px; }
  .nav .nav-side { justify-self: end; grid-column: 3; }
  .nav > .admin-link { grid-column: 3; justify-self: end; }   /* result/admin 单链接导航落右段 */
}

.section { padding: var(--space-section) 0; }
.rule-top { border-top: 1px solid var(--blush); }

/* ---------- v5 页面骨架统一：非首页顶部导航与首页同款底色/高度 ---------- */
.page-head {
  background: rgba(255, 248, 244, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--blush);
}
.page-head .nav { padding: 18px 0 16px; }

/* ---------- v5 照片体系：全站照片统一暖调（SPRINT-SPEC-v5 素材统一处理） ---------- */
.photo {
  display: block;
  filter: saturate(.92) sepia(.08) brightness(.98);
}

/* ---------- v5 页脚统一（自 index 收编，四页同款） ---------- */
.footer {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
.footer .foot-rose {
  position: absolute;
  left: -26px; top: -30px;
  opacity: .10;
  pointer-events: none;
}
.foot-grid {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-brand svg { height: 40px; width: auto; }
.footer .foot-note { line-height: 2; }
.foot-qr { text-align: center; flex: none; }
.foot-qr p { font-size: var(--fs-aux); color: var(--ink-soft); margin-top: 6px; max-width: none; }
.foot-qr svg { display: block; margin: 0 auto; background: var(--white); border-radius: 8px; padding: 5px; box-shadow: var(--shadow); }
@media (max-width: 640px) {
  .foot-grid { flex-direction: column; }
  .foot-qr { display: flex; align-items: center; gap: 12px; text-align: left; }
  .foot-qr p { margin-top: 0; }
}

/* 类型代码的字母衬线（result/admin 表格用，JS 模板引用此类名） */
.serif { font-family: var(--num); letter-spacing: .05em; }

/* 成双分隔：两枚交叠小圆点（成双语言，替代单线） */
.dbl-div {
  display: flex; justify-content: center; align-items: center;
  height: 6px; margin: 6px 0 14px;
}
.dbl-div::before, .dbl-div::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
}
.dbl-div::before { margin-right: 3px; }
.dbl-div::after  { margin-left: 3px; background: var(--brand); }

/* ---------- 排版（v3 定档：h1 大/800，h2 一档 30px，h3 20px） ---------- */
h1, h2, h3 { font-weight: 800; line-height: 1.4; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }

.small { font-size: var(--fs-aux); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.lead  { font-size: var(--fs-body); color: var(--ink-soft); }
p { max-width: 40em; }

.num { font-family: var(--num); font-weight: 800; }

/* ---------- nav（logo + 右侧链接，全站通用） ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.nav .brand { display: inline-flex; align-items: center; }
.nav .brand:hover { text-decoration: none; }
.nav .brand svg { display: block; height: 34px; width: auto; }
.nav .admin-link { font-size: var(--fs-aux); color: var(--ink-soft); }
.nav .admin-link:hover { color: var(--brand); }

/* ---------- 按钮（v7 按钮系统：全站只许 btn-primary / btn-ghost / btn-text 三种，渐变按钮废除——SPRINT-SPEC-v7 一） ---------- */
.btn {
  display: inline-block;
  background: #8F1F44;   /* v7: 实心深酒红主按钮（原 --grad-text 渐变废除）；白字 on #8F1F44 ≈ 8.6 */
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 11px 28px;
  border: none;
  border-radius: var(--radius-ctrl);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  color: var(--white); text-decoration: none;
  background: #7A1533;   /* v7: hover 深一档 */
  box-shadow: var(--shadow-hover);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }

/* v3-E6 表单体验：提交 loading 转圈 / 成功"已登记"+勾 */
.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 1;   /* R2: 伴 .btn:disabled 出现时不再被 .45 压暗，spinner 保持全亮 */
}
.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 248, 244, .45);
  border-top-color: #FFF8F4;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn.btn-done {
  background: #2B7A4B;
  box-shadow: none;
  cursor: default;
}
.btn.btn-done::after {
  content: "";
  display: inline-block;
  vertical-align: 2px;
  width: 8px; height: 5px;
  margin-left: 7px;
  border-left: 2px solid #FFF8F4;
  border-bottom: 2px solid #FFF8F4;
  transform: rotate(-45deg);
}

.btn-ghost {
  display: inline-block;
  background: var(--white);
  color: var(--brand);
  border: 1.5px solid var(--brand);
  font-family: var(--sans);
  font-size: var(--fs-aux-strong);
  font-weight: 600;   /* R1: 500 单点字重并入 600 */
  padding: 10px 20px;
  border-radius: var(--radius-ctrl);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-ghost:hover { background: var(--blush); color: var(--brand-deep); text-decoration: none; }
.btn-small { padding: 5px 14px; font-size: var(--fs-aux); }

/* v7 第三级按钮：无框文字链 + 右侧箭头（SPRINT-SPEC-v7 一） */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
}
.btn-text:hover { color: var(--brand-deep); text-decoration: none; }
.btn-text svg { flex: none; transition: transform .15s ease; }

/* ---------- v7 按钮桌面档尺寸层（>900px；≤900px 移动尺寸冻结不动） ---------- */
@media (min-width: 901px) {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    font-size: 16px;
  }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    font-size: 16px;
  }
  .btn-small { height: auto; padding: 5px 14px; font-size: var(--fs-aux); }
  .btn-text { font-size: 16px; }
  .btn-text:hover svg { transform: translateX(3px); }
}

/* ---------- 28 刻度尺（rose 系） ---------- */
.ticks {
  display: flex; gap: 4px; align-items: flex-end;
  height: 18px; margin: 14px 0 6px;
}
.ticks i {
  flex: 1 1 0; min-width: 3px; height: 10px;
  background: var(--blush);
  border-radius: 2px;
  display: block;
}
.ticks i.done { background: var(--brand); height: 16px; }
.ticks i.current { background: var(--coral); height: 18px; }

/* ---------- 五档 Likert（选中态 rose 填充白字） ---------- */
.likert {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 34px 0 10px;
}
.likert label {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 10px 4px;
  border-radius: var(--radius-ctrl);
  transition: background .15s ease;
}
.likert input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.likert .bar {
  height: 4px; width: 100%; max-width: 64px;
  background: var(--blush);
  border-radius: var(--radius-pill);
  transition: background .15s ease, height .15s ease;
}
/* 刻度长度随档位递增：20→64px 五档 */
.likert label:nth-child(2) .bar { max-width: 32px; }
.likert label:nth-child(3) .bar { max-width: 44px; }
.likert label:nth-child(4) .bar { max-width: 54px; }
.likert label:nth-child(5) .bar { max-width: 64px; }

.likert .word {
  font-size: var(--fs-aux); color: var(--ink-soft);
  text-align: center;
  transition: color .15s ease, font-weight .15s ease;
}
.likert label:hover .word { color: var(--ink); }

/* 基础高亮（无 :has 时的可见反馈） */
.likert input:checked ~ .bar { background: var(--brand); height: 5px; }
.likert input:checked ~ .word { color: var(--brand-deep); font-weight: 600; }
/* 完整选中态：rose 填充白字 */
.likert label:has(input:checked) {
  background: var(--brand);
}
.likert label:has(input:checked) .word { color: var(--white); font-weight: 600; }
.likert label:has(input:checked) .bar { background: var(--white); height: 5px; }
.likert input:focus-visible ~ .bar { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- 表单 ---------- */
.field { margin: 14px 0; }
.field label { display: block; font-size: var(--fs-aux-strong); color: var(--ink-soft); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--blush);
  border-radius: var(--radius-ctrl);
  padding: 10px 12px;
  transition: border-color .15s ease;
}
.input::placeholder { color: var(--ink-soft); }   /* R2: 占位文字提对比（白底 ≈4.9） */
/* R1 P0-3: 去掉 outline:none，恢复键盘焦点品牌环（鼠标点击仍只亮边框） */
.input:focus { border-color: var(--brand); }
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* v3-E6 手机号输满 11 位行内绿勾（JS 给达标 input 加 .phone-ok） */
input.phone-ok {
  border-color: #2B7A4B !important;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232B7A4B' fill-opacity='.12'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' stroke='%232B7A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px 20px;
}

.form-msg { font-size: var(--fs-aux-strong); min-height: 22px; margin-top: 8px; }
.form-msg.error { color: var(--brand-deep); font-weight: 600; }
.form-msg.ok { color: #2B7A4B; }

/* ---------- 表格（后台：表头 blush 底） ---------- */
/* R2: 删 overflow:hidden（table 上建立滚动上下文致 position:sticky 失效）——
   圆角裁剪职责移交 .table-wrap（admin.html 由 D 组并行补 border-radius） */
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-aux-strong);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
table.grid th {
  text-align: left;
  font-weight: 600;
  color: var(--brand-deep);
  font-size: var(--fs-aux);
  padding: 10px;
  background: var(--blush);
  white-space: nowrap;
}
table.grid td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--blush);
  vertical-align: top;
}
table.grid tr:last-child td { border-bottom: none; }
/* v3-B 斑马纹（奇数行 blush 4%）+ hover 行高亮 */
table.grid tbody tr:nth-child(odd) td { background: rgba(255, 233, 224, .42); }
table.grid tr:hover td { background: rgba(255, 233, 224, .62); }

/* v3-B 状态列彩色 pill（select 徽章化，JS 按值上色；保留行内编辑能力） */
select.st-pill {
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: var(--white);
}
select.st-new       { color: #BE2E5E; border-color: rgba(190, 46, 94, .55); }
select.st-contacted { color: #C2410C; border-color: rgba(194, 65, 12, .55); }   /* R1: 白底 ≥4.5 复算修正 */
select.st-intended  { color: #8A5F22; border-color: rgba(138, 95, 34, .55); }   /* R1: 白底 ≥4.5 复算修正 */
select.st-visited   { color: #7648A8; border-color: rgba(142, 90, 200, .5); }
select.st-signed    { color: #2B7A4B; border-color: rgba(43, 122, 75, .5); }
select.st-invalid   { color: var(--ink-soft); border-color: #D8CBCF; }

/* v3-B admin 空状态插画行 */
.empty-cell { padding: 34px 10px !important; text-align: center; }
.empty-cell .empty-rose { display: block; margin: 0 auto 12px; }
.empty-cell p { color: var(--ink-soft); font-size: var(--fs-aux-strong); max-width: none; }

/* ---------- 结果页四轴（rose 填充 + blush 轨道） ---------- */
.axis { margin: 20px 0; }
.axis .axis-head {
  display: flex; justify-content: space-between;
  font-size: var(--fs-aux-strong); color: var(--ink-soft);
  margin-bottom: 6px;
}
.axis .axis-head b { font-family: var(--num); font-size: var(--fs-h4); color: var(--brand-deep); font-weight: 700; }
.axis .track {
  height: 10px;
  background: var(--blush);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}
.axis .fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--brand), var(--coral));
  border-radius: var(--radius-pill);
  transition: width .6s ease;
}

/* ---------- 上锁区（暖化遮罩） ---------- */
.locked-block { position: relative; }
.locked-content {
  filter: blur(7px);
  opacity: .65;
  user-select: none;
  pointer-events: none;
}
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,248,244,.55), rgba(255,248,244,.94));
}
.lock-overlay .lock-title {
  font-size: var(--fs-h4); font-weight: 700;
}
.lock-overlay svg rect, .lock-overlay svg path { stroke: var(--brand); }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--blush);
  padding: 30px 0 44px;
  font-size: var(--fs-aux);
  color: var(--ink-soft);
}

/* ---------- v3-E2 滚动入场（IO 一次性触发；类由 JS 挂，无 JS 不隐藏） ---------- */
.io-hide { opacity: 0; transform: translateY(12px); }
.io-in   { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .io-hide { opacity: 1; transform: none; }
}

/* ---------- v3-B 五档选项移动端（≤640px）纵排：每项 52px 高、全宽、左圆点右文字 ---------- */
@media (max-width: 640px) {
  .likert {
    flex-direction: column;
    gap: 0;
    margin: var(--gap-item) 0 10px;
  }
  .likert label {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    padding: 6px 16px;
    border-radius: 12px;
  }
  .likert label + label { margin-top: 8px; }
  .likert .bar {
    order: -1;
    width: 12px; min-width: 12px; max-width: 12px !important;
    height: 12px;
    border-radius: 50%;
    background: #F3D7CE;
  }
  .likert .word {
    flex: 1 1 auto;
    text-align: left;
    font-size: var(--fs-aux-strong);
    letter-spacing: 0;
  }
  .likert input:checked ~ .bar {
    height: 12px !important;
    background: var(--white) !important;
  }
}

/* ---------- 375px 不破版 ---------- */
@media (max-width: 420px) {
  .container { padding: 0 18px; }
  .section { padding: 40px 0; }
  table.grid { font-size: var(--fs-micro); }
  table.grid th, table.grid td { padding: 7px 6px; }
}

/* ============ v6 桌面档元素字号（置尾保证覆盖同权基础规则；>900px 生效） ============ */
@media (min-width: 901px) {
  .btn { font-size: 16px; }        /* 按钮 15→16 */
  table.grid { font-size: 15px; }  /* admin 表体 14→15（表头随 --fs-aux→14） */
  .footer { font-size: 14px; }     /* 页脚 13→14（显式，双保险于 --fs-aux） */
}