/*
---
generated_by: GLM-5.3-Flash (builtin:bigmodel-coding-plan, Reflect experience v2 Task 8)
date: 2026-09-14
core_logic: Reflect 体验 v2 You / Start / Settings 三页换装。You（§5.5）：账户摘要 → Chart 面板 →
  Updates 诚实中性段 → Saved/已购与控制项入口分组；头像区角部小型素描（72px 圆形，不占控制项空间）。
  Start（§5.11）：先解释三个字段为什么需要（.sy-why-list），再进既有出生表单（纸感 input）。
  Settings（§5.10）：分组展示 + About & acknowledgements 低干扰小节占位（正文 V6）。
  另含四页共用控件 re-skin（.btn-primary/.btn-ghost indigo → 纸感墨色/苔绿；.section-h → demo
  list-panel rust mono 语言）。全部取值走 tokens.css 令牌；交互 ≥44px（.seg 链接补足）；
  动效仅 hover/焦点 120–220ms 档；选择器 scope 在四页 section 内不外溢。
  行为零变化：全部 id/data-when/data-action/data-i18n 契约原样，仅视觉层。
test_record: Playwright en/zh-CN × 390/1280 截图 + scrollWidth≤clientWidth + img naturalWidth>0 +
  交互命中区 ≥44px 抽查 + #/ #/chart 回归对比，见 task-8-report.md（2026-09-14）。
recent_changes:
  - 2026-09-14: 初版——You 头像区/Chart 面板/入口分组、Start explain-first 面板、Settings 分组与
    About 占位、四页共用按钮/小节标 re-skin。
---
*/

/* ================= 四页共用控件 re-skin（inline 旧壳样式为 indigo/白，本层按 D26 纸感覆写） ================= */
#page-shop .btn-primary, #page-you .btn-primary, #page-start .btn-primary, #page-settings .btn-primary {
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  border-radius: var(--reflect-radius-md);
}
#page-shop .btn-primary:hover, #page-you .btn-primary:hover,
#page-start .btn-primary:hover, #page-settings .btn-primary:hover {
  background: var(--reflect-moss);
}
#page-shop .btn-ghost, #page-you .btn-ghost, #page-start .btn-ghost, #page-settings .btn-ghost {
  color: var(--reflect-moss);
  border-radius: var(--reflect-radius-md);
}
#page-shop .btn-ghost:hover, #page-you .btn-ghost:hover,
#page-start .btn-ghost:hover, #page-settings .btn-ghost:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#page-shop .section-h, #page-you .section-h, #page-start .section-h, #page-settings .section-h {
  margin: 0 0 var(--reflect-space-8);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reflect-rust);
}
#page-shop .page-h1, #page-you .page-h1, #page-start .page-h1, #page-settings .page-h1 {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
}
#page-shop .page-lead, #page-you .page-lead, #page-start .page-lead, #page-settings .page-lead {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
@media (min-width: 768px) {
  #page-shop .page-lead, #page-you .page-lead, #page-start .page-lead, #page-settings .page-lead { font-size: 16px; }
}
/* 入口行（You More 列表 / Settings 分组项）：纸卡化，min-height 48px 保留 ≥44px 触控 */
#page-you .entry, #page-settings .entry {
  border-color: var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  color: var(--reflect-ink);
}
#page-you .entry:hover, #page-settings .entry:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#page-you .entry .chev, #page-settings .entry .chev { color: var(--reflect-ink-soft); }

/* 次级页返回链（Settings）：苔绿 → 墨色 hover；GC#7 触控目标补足 44px（原 6px 上下 padding 仅 ~28px） */
#page-settings .back-link {
  color: var(--reflect-moss);
  min-height: 44px;
  padding: 12px 8px 12px 0;
}
#page-settings .back-link:hover { color: var(--reflect-ink); }

/* ================= You：页头（eyebrow + 衬线标题 + 角部小素描） ================= */
.sy-you-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--reflect-space-16);
}
.sy-you-head-copy { display: flex; flex-direction: column; gap: var(--reflect-space-8); min-width: 0; }
.sy-you-head-copy .eyebrow { margin: 0; }
/* 头像区角部素描：72px 圆形小图，纯装饰 alt=""，不占身份与控制项空间（§5.5 图片合同） */
.sy-you-corner {
  flex: none;
  width: 72px;
  height: 72px;
  border: 1px solid var(--reflect-ink);
  border-radius: 50%;
}
.sy-you-corner img { border-radius: 50%; }
.sy-you-corner::after { inset: 6px; border-radius: 50%; }

/* 纸面板（guest 引导 / Chart / Updates）：细线 + 纸洗 + 留白分层 */
.sy-you-panel {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
  padding: 16px 18px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
}
.sy-you-panel .body-p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--reflect-ink-soft); }
.sy-you-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reflect-space-8); }

/* 账户摘要行（auth）：纸感化；you-name/you-email/you-tier id 契约原样。
   R15 修：#page-you .account-card/.account-avatar 系 H13 死样式漏网（首删取证 grep
   漏 *.css 文件）——DOM 无此二 class，整删；name/email/tier 活跃保留。 */
#page-you .account-name {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--reflect-ink);
}
#page-you .account-email {
  margin: 2px 0 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}
#page-you .account-tier {
  margin-top: 6px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  color: #425847;
  background: rgba(82, 107, 86, .14);
  border-radius: var(--reflect-radius-pill);
  padding: 2px 10px;
}

/* You 顶部二级 seg（Updates | Chart）：纸药丸 + 44px 命中；aria-current 行为原样。
   （chart 页同款 .seg 归 Chart 页 Task，本文件不外溢） */
#page-you .seg {
  padding: 3px;
  border: 1px solid var(--reflect-hairline);
  background: rgba(216, 208, 192, .5);
}
#page-you .seg a {
  padding: 13px 0; /* 18px 行高 + 26px padding = 44px 命中区 */
  font-size: 13px;
  color: var(--reflect-ink-soft);
}
#page-you .seg a:hover { color: var(--reflect-ink); }
#page-you .seg a[aria-current="page"] {
  background: var(--reflect-paper-light);
  color: var(--reflect-ink);
  font-weight: 600;
  box-shadow: none;
}

/* ================= Start：explain-first（§5.11 先解释为什么，再收集） ================= */
.sy-start-why {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-4);
  padding: 16px 18px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
}
.sy-why-list {
  margin: 0 0 var(--reflect-space-8);
  padding: 0;
  list-style: none;
}
.sy-why-list li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--reflect-space-12);
  padding: 10px 0;
  border-bottom: 1px solid var(--reflect-hairline);
}
.sy-why-list li:last-child { border-bottom: 0; }
.sy-why-k {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--reflect-ink);
}
.sy-why-v {
  font-size: 14px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
.sy-start-why .body-p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--reflect-ink-soft); }
@media (max-width: 479px) {
  .sy-why-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* Start 出生表单（id/label/hint 契约原样；仅纸感 input） */
#page-start .birth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--reflect-ink);
}
#page-start .birth-field input {
  height: 46px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-light);
  color: var(--reflect-ink);
  font-family: inherit;
}
#page-start .birth-field input:focus {
  border-color: var(--reflect-moss);
  box-shadow: 0 0 0 3px var(--reflect-moss-wash);
}
#page-start .birth-hint { color: var(--reflect-ink-soft); }

/* ================= Settings：分组 + About & acknowledgements 低干扰占位（§5.10） ================= */
.sy-settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8);
  padding-top: var(--reflect-space-12);
  border-top: 1px solid var(--reflect-line);
}
.sy-about {
  padding-top: var(--reflect-space-12);
  border-top: 1px solid var(--reflect-line);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-4);
}
.sy-about-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}

/* ===== Wave B（2026-09-18 demo 丰富度移植）：Updates 枢纽——真报告汇聚卡 + 星象百科 ===== */
.you-report-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.you-report-title {
  margin: 0;
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--reflect-ink);
}
.you-report-note {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--reflect-ink-soft);
}
.you-report-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--reflect-ink);
}
.you-report-outline-h {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--reflect-ink-soft);
}
.you-report-outline {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.you-report-outline li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--reflect-ink);
}
.you-report-outline li::marker {
  color: var(--reflect-ink-soft);
  font-variant-numeric: tabular-nums;
}
.you-report-cta {
  margin-top: 4px;
  align-self: flex-start;
}
.you-glossary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.you-glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.you-glossary-item {
  border: 1px solid var(--reflect-line);
  border-radius: 12px;
  background: var(--reflect-paper, #fbf9f4);
  overflow: hidden;
}
.you-glossary-item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  color: var(--reflect-ink);
}
.you-glossary-item summary::-webkit-details-marker { display: none; }
.you-glossary-item summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--reflect-ink-soft);
  font-size: 15px;
}
.you-glossary-item[open] summary::after { content: '–'; }
.you-glossary-glyph {
  font-size: 15px;
  color: var(--reflect-ink-soft);
  min-width: 1.4em;
  text-align: center;
}
.you-glossary-name { font-weight: 550; }
.you-glossary-body {
  padding: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--reflect-line);
  padding-top: 10px;
  margin-top: -1px;
}
.you-glossary-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--reflect-ink);
}

/* ============================================================
 * v3.5（PR-F，图纸 §v3.3 我的 + §v3.3.1 修图）
 * ============================================================ */

/* 修图①：页头圆形树改整棵树缩进圆框——object-fit:contain + 自底 #f3e7d0（防裁切露纸底） */
.sy-you-corner img {
  object-fit: contain;
  background: #f3e7d0;
}

/* 三星座刻度盘（you-bt-discs）：88px 星座仪器图纸 + k 标签 + v 星座名；值齐才揭整组 */
.you-bt-discs {
  display: flex;
  justify-content: space-between;
  gap: var(--reflect-space-12);
}
.you-bt-disc {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.you-bt-disc img {
  width: 88px;
  height: 88px;
  display: block;
}
.you-bt-disc .k {
  margin: 0;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--reflect-ink-soft);
}
.you-bt-disc .v {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 15px;
  color: var(--reflect-ink);
}

/* 修图②：报告卡头图（Y3 report-instruments 同商店）——去固定高，比例锁 1371/725 顶部对齐 */
.you-report-art {
  margin: -16px -18px 0; /* 抵消 .sy-you-panel padding，头图贴卡边 */
  aspect-ratio: 1371 / 725;
  overflow: hidden;
  border-radius: var(--reflect-radius-md) var(--reflect-radius-md) 0 0;
}
.you-report-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 入口行缩略图（Y4 四盘拼格 / Y5 羊毛毡双人裁切）：44px 方形圆角 */
.entry-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--reflect-radius-sm);
  overflow: hidden;
  display: flex;
}
.you-glyphs-thumb { background: var(--reflect-paper-deep); padding: 4px; gap: 2px; }
.you-glyphs-thumb img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; }
.you-felt-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* 带缩略图的入口行：文案两行（标题+提示） */
.entry-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entry-copy strong { font-weight: 600; }
.entry-copy em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--reflect-ink-soft); }

/* 小百科子页（#page-you-glossary）：词条列表复用 .you-glossary* 既有规则；
   面板间距与 You 页一致，词条锚滚动留 12px 呼吸 */
#page-you-glossary .sy-you-panel { gap: 8px; }
#page-you-glossary .you-glossary-item { scroll-margin-top: 12px; }
#page-you-glossary .back-link {
  color: var(--reflect-moss);
  min-height: 44px;
  padding: 12px 8px 12px 0;
}
#page-you-glossary .back-link:hover { color: var(--reflect-ink); }
#page-you-glossary .page-h1 { margin: 0 0 4px; }
#page-you-glossary .body-p { margin: 0 0 8px; }

/* ================= PR-G 动效（Y1 刻度盘描线 / Y2 外圈 90s 自转；motion_spec §2，2026-10-07） =================
   Y1 = 全站唯一非合成属性动画（stroke-dashoffset，一次性 1.4s，三个小 SVG 可接受——规格 §0/§6 唯一例外）；
   keyframes 共用 chart.css chart-draw（to{stroke-dashoffset:0} 通用，长度由元素级 --len 提供）。
   Y2 = 外圈刻度组 90s/圈 linear 自转（无限环境动效 ▲13 补丁族：只动 transform、离视口 JS 摘 m-spin 即停）。
   内联 SVG 由 you-view.js 动态装载（fetch+DOMParser），<img> 留作失败回落。零 reduce 分支。 */
.you-bt-disc svg.m-dial {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 8px;
  overflow: visible;
}
.you-bt-disc svg.m-dial [data-draw] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.you-bt-disc svg.m-dial.m-go [data-draw] {
  animation: chart-draw var(--m-draw-dur) var(--m-ease-out) both;
  animation-delay: calc(var(--dl, 0s) + var(--k, 0) * 40ms);
}
.you-bt-disc svg.m-dial .m-fadein { opacity: 0; }
.you-bt-disc svg.m-dial.m-go .m-fadein {
  animation: m-dial-fade 500ms var(--m-ease-out) both;
  animation-delay: calc(var(--dl, 0s) + 900ms);
}
@keyframes m-dial-fade { to { opacity: 1; } }
.you-bt-disc svg.m-dial .m-ring {
  transform-origin: 50px 50px;
  transform-box: view-box;
}
.you-bt-disc svg.m-dial.m-spin .m-ring { animation: m-ring var(--m-ring-dur) linear infinite; }
@keyframes m-ring { to { transform: rotate(360deg); } }