/* ============================================================
 * Homomuse 故事化设计稿 · 设计系统
 * 绘本风（G10 甜度收敛）：暖白纸底 + 深棕墨色 + 金色点缀
 * Hoho 橘 (#F2A259) / Momo 蓝灰 (#93A5BB) / 宝箱木金
 * ============================================================ */

/* G10 · 甜度收敛 token 初值（plans/POLISH_G10_SWEETNESS.md，朋友复测后只调值不动结构）：
 * ①底色降甜：奶油黄 → 暖白偏灰；②圆角 22→14、阴影减淡；③金色下沿按钮扁平化（见 .btn-primary） */
:root {
  --paper: #FAF7F2;
  --paper-2: #F1ECE3;
  --cream: #FFFDF7;
  --ink: #463327;
  --ink-2: #7C6350;
  --ink-3: #A68B74;
  --gold: #E9A13B;
  --gold-2: #C97F1F;
  --gold-soft: #F7E3BC;
  --hoho: #F2A259;
  --hoho-2: #DE8438;
  --momo: #93A5BB;
  --momo-2: #5F7288;
  --wood: #A0653B;
  --wood-2: #7C4A28;
  --green: #7FB069;
  --red: #E3655B;
  --line: #E7DECE;
  --shadow: 0 10px 26px rgba(70, 51, 39, .09);
  --shadow-sm: 0 2px 10px rgba(70, 51, 39, .06);
  --radius: 14px;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  /* G10①·底色降甜：装饰性渐晕与点纹同步减淡，避免暖黄大面积平铺 */
  background:
    radial-gradient(circle at 12% 8%, rgba(233, 161, 59, .05), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(147, 165, 187, .07), transparent 46%),
    radial-gradient(rgba(70, 51, 39, .03) 1px, transparent 1.6px),
    var(--paper);
  background-size: auto, auto, 26px 26px, auto;
  line-height: 1.7;
  min-height: 100vh;
  opacity: 0;
  transition: opacity .4s ease;
}
body.ready { opacity: 1; }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.35; }

/* 插画占位元素：统一为可设尺寸的块级容器，内部 SVG 自适应填满 */
[data-art] { display: inline-block; line-height: 0; }
[data-art] > svg { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--gold-soft); }

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  background: rgba(250, 247, 242, .88); /* G10①·随 --paper 暖白 */
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line);
  /* Electron 窗口拖动区（09-20 实报"窗口没法拖动"）：窗口 titleBarStyle=hiddenInset，
     系统默认拖动条只覆盖顶部约 28px 且被交互元素吃掉大半——整行站点头设为拖动区，
     交互元素（链接/按钮/表单）逐一豁免。浏览器中 app-region 为惰性属性，无副作用 */
  -webkit-app-region: drag;
}
.site-header a, .site-header button, .site-header input, .site-header select, .site-header textarea { -webkit-app-region: no-drag; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.brand .logo-svg { width: 42px; height: 32px; }
.brand small { font-size: 12px; color: var(--ink-2); font-family: var(--font-body); font-weight: 400; letter-spacing: 2px; }
.site-header nav { display: flex; gap: 4px; margin-left: auto; }
.site-header nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--ink-2);
  transition: background .2s, color .2s;
}
.site-header nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-header nav a.active { background: var(--gold-soft); color: var(--gold-2); font-weight: 600; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  color: var(--ink);
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--gold), var(--shadow-sm); }
.btn:active { transform: translateY(0); }
/* G10③·按钮扁平化：去 4px 下沿与文字拟物投影（金色保留，品牌色不动） */
.btn-primary {
  background: linear-gradient(180deg, #F2B45C, var(--gold));
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .paw-svg { width: 18px; height: 18px; }

/* ---------- 小标签 ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip-tech { background: #F0EDE6; color: #6E6A5E; border-color: #E2DCCC; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.chip-hoho { background: #FDEBD8; color: var(--hoho-2); border-color: #F3D3AE; }
.chip-momo { background: #E7EDF4; color: var(--momo-2); border-color: #CBD8E6; }
.chip-gold { background: var(--gold-soft); color: var(--gold-2); border-color: #EBD09A; }

/* ---------- Hero ---------- */
.hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: 1px; }
.hero h1 .h2h { color: var(--hoho-2); }
.hero h1 .m2m { color: var(--momo-2); }
.hero .lead { margin: 20px 0 30px; font-size: 17px; color: var(--ink-2); max-width: 30em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* G10②·插画降浓度：hero 场景缩到点缀位 */
.hero-scene { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 20px 0 0; }
.hero-scene > span[data-art="hoho"],
.hero-scene > span[data-art="momo"] { flex: 0 1 150px; min-width: 100px; }
.hero-scene > span[data-art="chest"] { flex: 0 1 210px; min-width: 130px; position: relative; z-index: 2; margin: 0 -14px; }
/* G10⑤·装饰减量：漂浮爪印退休（装饰符号只留叙事关键点：开箱/封存/约定卡） */
.deco { display: none; }

/* ---------- 区块 ---------- */
.section { max-width: 1160px; margin: 0 auto; padding: 64px 32px; }
.section-title { font-size: clamp(26px, 3vw, 36px); text-align: center; }
.section-sub { text-align: center; color: var(--ink-2); margin: 12px auto 44px; max-width: 38em; }
.section-tag { display: block; text-align: center; margin-bottom: 10px; }

/* ---------- 小狗名片 ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; }
.duo-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.duo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
}
.duo-card.card-hoho::before { background: linear-gradient(90deg, var(--hoho), #F7C99A); }
.duo-card.card-momo::before { background: linear-gradient(90deg, var(--momo), #C2D0DF); }
.duo-card .dog-svg { width: 150px; margin: 4px auto 10px; }
.duo-card h3 { font-size: 24px; margin-bottom: 2px; }
.duo-card .role { font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
.duo-card p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 18px; }

/* ---------- 故事卷轴 ---------- */
.chapters { position: relative; max-width: 920px; margin: 0 auto; }
.chapters::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--line) 0 10px, transparent 10px 20px);
}
.chapter {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  margin-bottom: 34px;
}
.chapter-num {
  grid-column: 2;
  justify-self: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 2.5px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-2);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.chapter-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.chapter-card h3 { font-size: 21px; margin-bottom: 8px; }
.chapter-card p { color: var(--ink-2); font-size: 15px; margin-bottom: 12px; }
.chapter-art { display: flex; justify-content: center; align-items: flex-end; gap: 6px; min-height: 120px; }
.chapter-art .dog-svg { width: 108px; }
.chapter-art .chest-svg { width: 150px; }
.chapter-art .paw-svg { width: 44px; height: 44px; }
.chapter:nth-child(odd) .chapter-card { grid-column: 1; grid-row: 1; }
.chapter:nth-child(odd) .chapter-art { grid-column: 3; grid-row: 1; }
.chapter:nth-child(even) .chapter-card { grid-column: 3; grid-row: 1; }
.chapter:nth-child(even) .chapter-art { grid-column: 1; grid-row: 1; }

/* ---------- 卡片网格 ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { font-size: 18px; margin: 14px 0 8px; }
.card p { color: var(--ink-2); font-size: 14.5px; }
.card .icon-bubble {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
}
.card .icon-bubble .paw-svg { width: 28px; height: 28px; }

/* ---------- 角色入口 ---------- */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 30px 22px;
  background: var(--cream);
  border: 1.5px dashed var(--ink-3);
  border-radius: var(--radius);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.role-card:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--gold); box-shadow: var(--shadow); }
.role-card .dog-svg { width: 96px; }
.role-card .chest-svg { width: 120px; }
.role-card h3 { font-size: 19px; margin-top: 8px; }
.role-card p { color: var(--ink-2); font-size: 14px; }
.role-card .go { margin-top: 12px; color: var(--gold-2); font-weight: 600; font-size: 14.5px; }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1.5px solid var(--line);
  margin-top: 40px;
  padding: 34px 32px 44px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}
.footer .logo-svg { width: 40px; height: 30px; vertical-align: middle; margin-right: 8px; }
.footer p { margin-top: 8px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 8px; }
.input, .textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 161, 59, .18); }
.textarea { resize: vertical; min-height: 84px; }

/* 爪印开关 */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track {
  width: 58px; height: 32px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  position: relative;
  transition: background .25s, border-color .25s;
  flex: none;
}
.switch .knob {
  position: absolute;
  top: 2.5px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--ink-3);
  display: grid;
  place-items: center;
  transition: left .25s cubic-bezier(.34,1.56,.64,1), border-color .25s;
}
.switch .knob .paw-svg { width: 14px; height: 14px; opacity: .45; transition: opacity .25s; }
.switch input:checked + .track { background: var(--gold-soft); border-color: var(--gold); }
.switch input:checked + .track .knob { left: 28px; border-color: var(--gold-2); }
.switch input:checked + .track .knob .paw-svg { opacity: 1; }
.switch .switch-label { font-size: 14.5px; }

/* ---------- 步骤条 ---------- */
.steps { display: flex; justify-content: center; gap: 10px; margin: 26px 0 36px; flex-wrap: wrap; }
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
}
.step .n {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  font-size: 12.5px;
}
.step.active { border-color: var(--gold); color: var(--gold-2); background: var(--gold-soft); }
.step.active .n { background: var(--gold); color: #fff; }
.step.done { color: var(--green); border-color: #CBE3C0; background: #F0F7EA; }

/* ---------- 面板 / 布局 ---------- */
.panel {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px;
}
.page { max-width: 1160px; margin: 0 auto; padding: 40px 32px 64px; }
.page-narrow { max-width: 760px; margin: 0 auto; padding: 48px 32px 72px; }
.page-head { text-align: center; margin-bottom: 8px; }
.page-head h1 { font-size: clamp(28px, 3.4vw, 40px); }
.page-head p { color: var(--ink-2); margin-top: 10px; }

/* ---------- 上传区 ---------- */
.dropzone {
  border: 2px dashed var(--ink-3);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: rgba(255, 253, 247, .6);
}
.dropzone:hover { border-color: var(--gold); background: var(--cream); }
.dropzone .dog-svg { width: 88px; margin: 0 auto 10px; } /* G10②·插画降浓度 */
.dropzone strong { display: block; font-size: 17px; margin-bottom: 6px; }
.dropzone span { color: var(--ink-3); font-size: 13.5px; }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 16px; }
.preview-item {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--paper-2);
  position: relative;
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item svg { width: 100%; height: 100%; }

/* ---------- 开箱仪式（全屏覆盖层） ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 242, .96); /* G10①·随 --paper 暖白 */
  backdrop-filter: blur(6px);
}
.overlay.show { display: flex; }
.ceremony { text-align: center; max-width: 720px; padding: 24px; width: 100%; }
.ceremony-scene { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.ceremony-scene .dog-svg { width: 168px; transition: transform 1s ease; }
/* B13 · 给 Hoho 尾巴留摆动位：静态贴近 56→44（B8 后尾巴能画出画布，过近会被 z-index:2 的宝箱遮住） */
.ceremony-scene .dog-hoho { transform: translateX(44px); }
.ceremony-scene .dog-momo { transform: translateX(-44px) scaleX(-1); }
.ceremony-scene .chest-svg { width: 240px; position: relative; z-index: 2; }
.ceremony.st-press .dog-hoho { transform: translateX(20px); }
.ceremony.st-press .dog-momo { transform: translateX(-20px) scaleX(-1); }
.ceremony-caption { font-family: var(--font-display); font-size: 24px; min-height: 40px; margin: 18px 0 6px; }
.ceremony-sub { color: var(--ink-2); font-size: 14.5px; min-height: 24px; }
.ceremony-tech { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ceremony-tech .chip { transition: all .3s; opacity: .45; }
.ceremony-tech .chip.on { opacity: 1; background: var(--gold-soft); color: var(--gold-2); border-color: var(--gold); }

.result-card {
  margin: 22px auto 0;
  max-width: 560px;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.ceremony.st-done .result-card { opacity: 1; transform: none; }
.result-link {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--paper-2);
  border-radius: 10px;
  padding: 10px 12px;
  word-break: break-all;
  text-align: left;
  margin: 12px 0 16px;
  max-height: 84px;
  overflow: auto;
}
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- 画廊 ---------- */
.gallery-head { text-align: center; margin: 34px 0 26px; opacity: 0; transform: translateY(14px); transition: all .7s ease; }
.gallery-head.show, .gallery.show .gallery-head { opacity: 1; transform: none; }
.gallery-head h1 { font-size: clamp(26px, 3vw, 36px); }
.gallery-head .desc { color: var(--ink-2); margin: 8px 0 12px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.memory-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius); /* G10④·随 token 收敛 */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(22px) scale(.96);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.64,1);
}
.gallery.show .memory-card { opacity: 1; transform: none; }
.memory-card:nth-child(2) { transition-delay: .08s; }
.memory-card:nth-child(3) { transition-delay: .16s; }
.memory-card:nth-child(4) { transition-delay: .24s; }
.memory-card:nth-child(5) { transition-delay: .32s; }
.memory-card:nth-child(6) { transition-delay: .4s; }
.memory-card .thumb { aspect-ratio: 4 / 3; }
.memory-card .thumb svg { width: 100%; height: 100%; }
.memory-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.memory-card figcaption { padding: 12px 14px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-card figcaption .dl { color: var(--ink-3); font-size: 12px; flex: none; }
.memory-card figcaption .dl.ok { color: var(--gold-2); cursor: pointer; font-weight: 600; }

/* ---------- Momo 的家（仪表盘） ---------- */
.dash-hero {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.dash-hero .dog-svg { width: 150px; flex: none; }
.dash-hero .who h1 { font-size: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-hero .who p { color: var(--ink-2); margin-top: 6px; font-size: 14.5px; }
.dot-online {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(127, 176, 105, .5);
  animation: pulse 2s infinite;
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 26px 0; }
.stat-card { background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; } /* G10④·随 token 收敛 */
.stat-card .num { font-family: var(--font-display); font-size: 32px; color: var(--gold-2); }
.stat-card .lbl { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.storage-bar { height: 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.storage-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hoho), var(--gold)); }
.member-row, .log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.member-row:last-child, .log-row:last-child { border-bottom: none; }
.member-row .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--paper-2);
}
.member-row .avatar .paw-svg { width: 20px; height: 20px; }
.member-row .grow, .log-row .grow { flex: 1; }
.member-row .muted, .log-row .muted { color: var(--ink-3); font-size: 12.5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.qr-fake {
  width: 148px; height: 148px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-soft) 24%, transparent 25%),
    repeating-conic-gradient(var(--ink) 0 8deg, transparent 8deg 16deg),
    var(--cream);
  background-size: auto, 24px 24px, auto;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
}
.qr-fake .paw-svg { width: 44px; height: 44px; background: var(--cream); border-radius: 50%; padding: 6px; border: 1.5px solid var(--gold); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  opacity: 0;
  transition: all .35s ease;
  z-index: 200;
  box-shadow: var(--shadow);
  max-width: calc(100vw - 48px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* toast 行动按钮（BILLING §9.2 撞墙升级 CTA；无 action 的纯文案 toast 外观不变） */
.toast-act {
  font: inherit; color: var(--gold); background: none; border: none; padding: 0;
  margin-left: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- 动效 ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* G10②·插画动效仪式化：眨眼/摇尾/嫩芽/垂耳默认静态，只在仪式场景（开箱 .gift-scene / 封存 .ceremony-scene）播放 */
.ceremony-scene .dog-svg .eyes, .gift-scene .dog-svg .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.ceremony-scene .dog-svg .tail, .gift-scene .dog-svg .tail { transform-box: fill-box; transform-origin: left bottom; animation: wag 1.6s ease-in-out infinite; }
/* B8 · Hoho 摇尾尖超出 viewBox 右边界被裁：允许画出画布（右侧空白零影响，全站一处生效） */
.dog-hoho { overflow: visible; }
.ceremony-scene .dog-svg .sprout, .gift-scene .dog-svg .sprout { transform-box: fill-box; transform-origin: center bottom; animation: sway 3s ease-in-out infinite; }
.ceremony-scene .dog-svg .ear-l, .gift-scene .dog-svg .ear-l { transform-box: fill-box; transform-origin: top right; animation: twitch 5s ease-in-out infinite; }
.ceremony-scene .dog-svg .ear-r, .gift-scene .dog-svg .ear-r { transform-box: fill-box; transform-origin: top left; animation: twitch 5s ease-in-out .6s infinite; }

.chest-svg .fx { opacity: 0; transition: opacity .9s ease; }
.chest-svg.open .fx { opacity: 1; }
.chest-svg .lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1s cubic-bezier(.3, 1.25, .4, 1);
}
.chest-svg.open .lid { transform: perspective(900px) rotateX(-68deg); }
.chest-svg .pad-paw { opacity: .35; transition: opacity .4s ease; }
.chest-svg .pad-ring { opacity: .5; transition: opacity .4s ease; }
.chest-svg.press-h .pad-h .pad-paw,
.chest-svg.press-m .pad-m .pad-paw { opacity: 1; }
.chest-svg.press-h .pad-h .pad-paw { filter: drop-shadow(0 0 6px rgba(242, 162, 89, .9)); }
.chest-svg.press-m .pad-m .pad-paw { filter: drop-shadow(0 0 6px rgba(147, 165, 187, .9)); }
.chest-svg.press-h .pad-h .pad-ring,
.chest-svg.press-m .pad-m .pad-ring { opacity: 1; }
/* 回忆卡：开箱时从箱中弹出 */
.chest-svg .mini-in { opacity: 0; transform-box: fill-box; }
.chest-svg.open .m1 .mini-in { animation: cardPop .7s cubic-bezier(.34, 1.5, .64, 1) .3s both, bob 2.6s ease-in-out 1.2s infinite; }
.chest-svg.open .m2 .mini-in { animation: cardPop .7s cubic-bezier(.34, 1.5, .64, 1) .45s both, bob 2.6s ease-in-out 1.4s infinite; }

/* 双爪按下：爪印盖戳上垫（先扑身，后盖戳） */
.chest-svg .stamp { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.chest-svg.press-h .stamp-h { animation: stampPop .55s cubic-bezier(.34, 1.56, .64, 1) .08s both; filter: drop-shadow(0 0 6px rgba(242, 162, 89, .85)); }
.chest-svg.press-m .stamp-m { animation: stampPop .55s cubic-bezier(.34, 1.56, .64, 1) .16s both; filter: drop-shadow(0 0 6px rgba(147, 165, 187, .85)); }

/* 开箱：光柱升起 + 光晕绽放 */
.chest-svg .beam { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.chest-svg.open .beam { animation: beamUp .9s cubic-bezier(.2, .7, .3, 1) .1s both; }
.chest-svg .glow { transform-box: fill-box; transform-origin: center; }
.chest-svg.open .glow { animation: glowBloom 1.1s ease both; }

.float-slow { animation: floatY 5s ease-in-out infinite; }
.float-slow-2 { animation: floatY 6.5s ease-in-out .8s infinite; }

@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
@keyframes wag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-7deg); } 96% { transform: rotate(4deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 176, 105, .5); }
  70% { box-shadow: 0 0 0 9px rgba(127, 176, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 176, 105, 0); }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; gap: 28px; }
  .hero-scene { order: -1; }
  .duo { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .chapters::before { left: 27px; }
  .chapter { grid-template-columns: 56px 1fr; gap: 14px; }
  .chapter-num { grid-column: 1; grid-row: 1; width: 46px; height: 46px; font-size: 18px; }
  .chapter:nth-child(odd) .chapter-card,
  .chapter:nth-child(even) .chapter-card { grid-column: 2; grid-row: 1; }
  .chapter:nth-child(odd) .chapter-art,
  .chapter:nth-child(even) .chapter-art { grid-column: 2; grid-row: 2; min-height: 90px; margin-top: 10px; }
  .site-header { gap: 12px; padding: 12px 16px; }
  .site-header nav a { padding: 7px 10px; font-size: 14px; }
  .section, .page { padding-left: 20px; padding-right: 20px; }
  .ceremony-scene .dog-svg { width: 120px; }
  .ceremony-scene .chest-svg { width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 认亲引导横幅（share 页） ---------- */
.bind-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-radius: 14px;
  background: #E7EDF4;
  border: 1.5px solid #CBD8E6;
  color: var(--momo-2);
  font-size: 14px;
  margin-bottom: 20px;
}
.bind-banner .paw-svg { width: 18px; height: 18px; }
.bind-banner a { font-weight: 700; text-decoration: underline; }

/* ---------- 认亲页（bind） ---------- */
.bind-scene { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-bottom: 6px; }
.bind-scene span[data-art="hoho"] { width: 130px; }
.bind-scene span[data-art="momo"] { width: 140px; }
.role-card .qr-fake { width: 96px; height: 96px; margin-bottom: 6px; }
.role-card .qr-fake .paw-svg { width: 30px; height: 30px; padding: 4px; }
.role-card button { margin-top: 12px; }
.bind-note { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 26px; }

/* ---------- 仪式节奏控制：跳过 / 安静模式 ---------- */
.ceremony { position: relative; }
.ceremony-skip {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.ceremony-skip:hover { color: var(--ink); background: rgba(70, 51, 39, .06); }
.overlay .ceremony-skip { top: 22px; right: 26px; }

.quiet-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.quiet-opt input { accent-color: var(--gold-2); width: 15px; height: 15px; cursor: pointer; }

/* ---------- 礼物卡（view 页：内容优先，仪式退为配角） ---------- */
.gift-card {
  position: relative;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 28px 30px;
  text-align: center;
  margin-top: 28px;
}
.gift-from { color: var(--ink-2); font-size: 15px; }
.gift-from b { color: var(--hoho-2); }
.gift-card h1 { font-size: clamp(28px, 3.4vw, 38px); margin: 8px 0 6px; }
.gift-desc { color: var(--ink-2); margin-bottom: 14px; }
.gift-scene { display: flex; align-items: flex-end; justify-content: center; margin: 20px 0 6px; }
.gift-scene span[data-art="hoho"],
.gift-scene span[data-art="momo"] { width: 100px; }
/* B13 · 与仪式场景同改：宝箱左侧留 8px 摆动位，Hoho 摇尾不再被 z-index:2 的宝箱遮住 */
.gift-scene span[data-art="chest"] { width: 146px; margin: 0 -2px 0 8px; position: relative; z-index: 2; }
.gift-caption { font-family: var(--font-display); font-size: 17.5px; color: var(--ink-2); min-height: 28px; }

.demo-link-bar { display: flex; gap: 10px; margin: 18px auto 0; max-width: 560px; }
.demo-link-bar .input { font-size: 13px; padding: 10px 14px; }

.gallery-divider { text-align: center; color: var(--ink-3); font-size: 14px; margin: 34px 0 18px; opacity: 0; transition: opacity .6s ease; }
.gallery-divider.show { opacity: 1; }

.safety-note { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 28px; }
.safety-note .b-hoho { color: var(--hoho-2); }
.safety-note .b-momo { color: var(--momo-2); }

/* ---------- 开箱动作：扑身按爪 + 金光一闪 + 关键帧 ---------- */
.gift-scene.st-press span[data-art="hoho"] { animation: hopR .55s ease .05s; }
.gift-scene.st-press span[data-art="momo"] { animation: hopL .55s ease .05s; }
@keyframes hopR { 0% { transform: translateX(0); } 40% { transform: translateX(14px) rotate(3deg); } 100% { transform: translateX(0); } }
@keyframes hopL { 0% { transform: translateX(0); } 40% { transform: translateX(-14px) rotate(-3deg); } 100% { transform: translateX(0); } }

.gift-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 62%, rgba(247, 201, 72, .55), transparent 65%);
  opacity: 0;
  pointer-events: none;
}
.gift-card.flash::after { animation: flashFade 1.2s ease .1s both; }
@keyframes flashFade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

@keyframes stampPop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes cardPop { 0% { opacity: 0; transform: translateY(26px) scale(.7); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes beamUp { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes glowBloom { 0% { transform: scale(.55); } 100% { transform: scale(1); } }

/* ============================================================
 * design2 新增组件样式
 * ============================================================ */

/* ---- 「门」按钮与弹层（单场景三层读法） ---- */
.door {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--cream);
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  transition: transform .15s, background .2s;
}
.door:hover { transform: scale(1.12); background: var(--gold-soft); }
.door-modal {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(70, 51, 39, .28);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.door-modal.show { display: flex; }
.door-card {
  position: relative;
  max-width: 440px; width: 100%;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 20px;
  animation: doorIn .3s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes doorIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }
.door-card p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.door-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; color: var(--ink-3); cursor: pointer; }
.door-more { margin-top: 16px; }

/* ---- Momo 睡着了（失败态） ---- */
.asleep-card {
  background: linear-gradient(180deg, #EEF2F7, var(--cream));
  border: 1.5px solid #CBD8E6;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 26px;
  text-align: center;
  margin-top: 28px;
}
.asleep-card .dog-svg { width: 150px; margin: 0 auto 6px; }
.asleep-card h2 { font-size: 24px; color: var(--momo-2); }
.asleep-card p { color: var(--ink-2); margin: 10px auto 18px; max-width: 30em; font-size: 14.5px; }
.asleep-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dog-svg .zzz text { animation: zFloat 2.6s ease-in-out infinite; transform-box: fill-box; }
.dog-svg .zzz text:nth-child(2) { animation-delay: .4s; }
.dog-svg .zzz text:nth-child(3) { animation-delay: .8s; }
@keyframes zFloat { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }

/* ---- 爪印帖（认亲领养） ---- */
.ticket-hero { display: flex; justify-content: center; margin: 8px 0 2px; }
.ticket-hero span[data-art="ticket"] { width: 240px; filter: drop-shadow(0 10px 22px rgba(70, 51, 39, .14)); }
.code-input {
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.path-card.fire { border-color: #CBD8E6; background: linear-gradient(180deg, #F5F8FB, var(--cream)); }
.path-card h3 { font-size: 19px; margin-bottom: 8px; display: flex; align-items: center; }
.path-card p { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }

/* ---- 火种标识 ---- */
.fire-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #E7EDF4; border: 1px solid #CBD8E6; color: var(--momo-2); font-size: 12.5px; font-weight: 600; }

/* ---- 画廊最后一张「卡」：转化格 ---- */
.conv-cell { border-style: dashed; border-color: var(--gold); background: linear-gradient(180deg, #FFF4DE, var(--cream)); display: flex; }
.conv-cell .conv-inner { margin: auto; text-align: center; display: grid; gap: 8px; justify-items: center; padding: 16px 12px; }
.conv-cell .conv-inner span[data-art="chest"] { width: 68px; }
.conv-cell .conv-inner b { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.conv-cell .conv-inner small { font-size: 12px; color: var(--gold-2); font-weight: 600; }
.conv-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gallery .memory-card:nth-child(7) { transition-delay: .48s; }
.gallery .memory-card:nth-child(8) { transition-delay: .56s; }

/* ---- 视频标记 / 选择计数 ---- */
.thumb { position: relative; }

/* A3/R4 · 图片大图查看：点开看全图（iOS 微信在大图上长按才能存原图——卡片缩略图是 cover 裁剪，长按存到的是渲染裁剪图） */
.imgview { position: fixed; inset: 0; z-index: 300; background: rgba(20, 14, 8, .94); display: flex; align-items: center; justify-content: center; }
.imgview[hidden] { display: none; }
.imgview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imgview .ceremony-skip { color: var(--gold-soft); }
.memory-card:not(.is-video) .thumb img { cursor: zoom-in; }
/* A17a · 逐张容错：失败张占位卡（虚线框 + 一句故事话，无点击） */
.thumb-broken { display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-3); font-size: 13px; text-align: center; padding: 12px; }

/* A7 · 本人管理抽屉：统计区 */
.manage-stats .stats-row { font-size: 13.5px; color: var(--ink-2); text-align: center; margin-top: 12px; }
.manage-stats .stats-row b { color: var(--gold-2); }
.stats-viewers { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.stats-viewers li { margin-top: 4px; }
/* A3 完整版 · 灯箱控件：左右切换 / 计数 / 下载（蓝本：旧 viewer ImageSlideshowPlayer） */
.imgview-count {
  position: absolute; top: 14px; left: 16px;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--gold-soft); font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  pointer-events: none; font-variant-numeric: tabular-nums;
}
.imgview-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--gold-soft); font-size: 24px; line-height: 1; font-family: var(--font-body);
  cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
}
.imgview-nav:hover { background: rgba(0, 0, 0, .62); }
.imgview-prev { left: 12px; }
.imgview-next { right: 12px; }
.imgview-dl {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .22);
  color: var(--gold-soft); font-size: 13px; font-family: var(--font-body);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.imgview-dl:hover { background: rgba(0, 0, 0, .62); }
/* 「仅可在线查看」：图片不接收触摸/指针——长按落在容器上，连「保存图片」菜单都弹不出；
   卡片点击开大图（监听在 figure）、大图点空白关闭（事件落在遮罩）均不受影响 */
.no-save img { -webkit-touch-callout: none; user-select: none; pointer-events: none; }
.vid-badge { position: absolute; left: 6px; bottom: 6px; background: rgba(40, 28, 18, .62); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-count { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

/* ---- 卡片无单独介绍时，权限角标靠右 ---- */
.memory-card figcaption .dl:first-child { margin-left: auto; }

/* ---- 修复：hidden 属性被组件 display 覆盖 ---- */
[hidden] { display: none !important; }

/* ---- 转交宝箱（接收人的二次分享入口） ---- */
.reshare { display: none; text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--ink-2); }
.reshare.show { display: block; }
.reshare .btn { margin-left: 8px; }
.reshare-hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* ---- 演示控制台（评审控件收进角落，不进用户界面） ---- */
.demo-console { position: fixed; right: 18px; bottom: 18px; z-index: 400; }
.dc-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .75;
  transition: opacity .2s, transform .2s;
}
.dc-toggle:hover { opacity: 1; transform: scale(1.06); }
.dc-panel {
  position: absolute;
  right: 0; bottom: 54px;
  width: 310px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: none;
}
.demo-console.open .dc-panel { display: block; }
.dc-panel > b { font-size: 14px; }
.dc-note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin: 6px 0 4px; }
.dc-body > * { margin-top: 10px; }
.dc-body .demo-link-bar { margin: 10px 0 0; }

/* ============================================================
 * 双端整合：手机宽度（≤720px）加固
 * 规格以 mobile.html 板子为准；同一份 HTML 双端可用
 * ============================================================ */
@media (max-width: 720px) {
  /* 顶栏：品牌一行，导航一行可横滑 */
  .site-header { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .site-header nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .site-header nav a { white-space: nowrap; }

  /* 页面留白收紧 */
  .page, .page-narrow, .section { padding-left: 16px; padding-right: 16px; }
  .panel { padding: 22px 18px; }

  /* 礼物卡（view）：文字在上、场景在下，场景按手机规格缩小 */
  .gift-card { padding: 24px 16px 20px; margin-top: 18px; }
  .gift-card h1 { font-size: 26px; }
  .gift-scene span[data-art="hoho"],
  .gift-scene span[data-art="momo"] { width: 72px; }
  .gift-scene span[data-art="chest"] { width: 104px; }
  .gift-caption { font-size: 16px; }

  /* 画廊两列（手机规格） */
  .gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .memory-card figcaption { font-size: 12.5px; padding: 10px 12px; }

  /* 仪式覆盖层 */
  .ceremony { padding: 12px; }
  .ceremony-caption { font-size: 19px; }
  .result-card { padding: 18px 16px; }

  /* 表单与选择器（share） */
  .dropzone { padding: 26px 14px; }
  .steps { gap: 6px; }
  .step { padding: 6px 12px; font-size: 12.5px; }

  /* 认亲领养（adopt） */
  .ticket-hero span[data-art="ticket"] { width: 200px; }

  /* Momo 的家（owner） */
  .dash-hero .dog-svg { width: 104px; }
  .dash-hero .who h1 { font-size: 23px; }

  /* 首页 Hero */
  .hero { padding: 36px 16px 24px; gap: 18px; }
}

/* ---- 通知策略选择（分段控件 + 关注引导） ---- */
.seg { display: inline-flex; background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.seg-item {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-2);
  padding: 8px 16px; border-radius: 999px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg-item:hover { color: var(--ink); }
.seg-item.active { background: var(--cream); color: var(--gold-2); font-weight: 700; box-shadow: var(--shadow-sm); }
/* B11 寄存选择器 · 额度子行（BILLING §9.3）：醒着/睡着了 · 本月已封 X/Y 箱 */
.seg-item .seg-sub {
  display: block; margin-top: 2px;
  font-size: 12.5px; font-weight: 400; line-height: 1.4;
  color: var(--ink-3); white-space: normal;
}
.follow-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  background: #FFF4DE; border: 1px solid #EBD09A; border-radius: 12px;
  font-size: 13px; color: var(--gold-2);
}

/* ---- 礼物卡两阶段揭示：权限签开箱后才淡入 ---- */
#permChip { transition: opacity .8s ease, transform .8s ease; }
#permChip.perm-hidden { opacity: 0; transform: translateY(6px); }

/* ---- 视频播放器（剧场 overlay：解密流供给 → 就绪 → 播放） ---- */
.player {
  /* A20 · 水平留 16px 边距（对齐页边距规范）：手机上圆角完整不贴边（桌面被 max-width 720px 接管，无影响） */
  width: calc(100% - 32px);
  max-width: 720px;
  background: #2A1F16;
  border-radius: var(--radius); /* G10④·随 token 收敛 */
  overflow: hidden;
  box-shadow: var(--shadow);
}
.player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1C140D;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.player-stage .player-poster { width: 100%; height: 100%; }
.player-stage .player-poster svg { width: 100%; height: 100%; display: block; }
/* 视频绝对铺满舞台（不随内嵌尺寸溢出）；舞台比例由 JS 按视频实际宽高比设置 */
.player-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 247, .94);
  color: #2A1F16;
  font-size: 28px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.player-caption {
  color: #F7E3BC;
  font-size: 14px;
  padding: 14px 18px 8px;
  text-align: center;
  min-height: 24px;
}
.player-bar {
  height: 6px;
  background: rgba(255, 253, 247, .18);
  margin: 0 18px 16px;
  border-radius: 999px;
  overflow: hidden;
}
.player-bar i { display: block; height: 100%; width: 0%; background: var(--gold); border-radius: 999px; transition: width .25s ease; }
/* A18③ · 控制条悬浮舞台底部：渐变衬底保证可读；播放 3s 无操作淡出（.faded），暂停/播完常显 */
.player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(20, 14, 8, .72));
  color: #F7E3BC;
  opacity: 1;
  transition: opacity .3s ease;
}
.player-controls.faded { opacity: 0; pointer-events: none; }
.pc-btn { background: none; border: none; color: var(--gold-soft); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.pc-time { font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* A9 · 剧场控制条扩展：右侧倍速 / 全屏（只读进度复用 .player-bar 供给条） */
.pc-spacer { flex: 1; }
.pc-speed { position: relative; }
.pc-speed .pc-btn { font-size: 14px; min-width: 44px; }
.pc-speed-menu {
  position: absolute; right: 0; bottom: 36px; z-index: 5;
  min-width: 78px; display: grid; padding: 5px;
  background: rgba(28, 20, 13, .97);
  border: 1px solid rgba(247, 227, 188, .28);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pc-speed-item {
  border: none; background: transparent; cursor: pointer;
  color: var(--gold-soft); font-size: 13px; font-family: var(--font-body);
  padding: 6px 12px; border-radius: 8px; text-align: center;
}
.pc-speed-item:hover { background: rgba(247, 227, 188, .14); }
.pc-speed-item.on { background: var(--gold); color: #2A1F16; font-weight: 700; }
/* 视频卡可点击提示 */
.memory-card.is-video { cursor: pointer; }
.memory-card.is-video:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---- 仪式进度条 + 后台封存状态行 ---- */
.ceremony-prog {
  width: 240px;
  height: 6px;
  margin: 14px auto 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.ceremony-prog i { display: block; height: 100%; width: 0%; background: var(--gold); border-radius: 999px; transition: width .2s ease; }
.ceremony-escape { margin-top: 14px; }
.bg-seal-row {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 11px 16px;
  background: var(--gold-soft); border: 1px solid #EBD09A; border-radius: 14px;
  font-size: 14px; color: var(--gold-2);
}
.bg-seal-row .bg-bar { flex: none; width: 120px; height: 6px; background: rgba(255,253,247,.8); border-radius: 999px; overflow: hidden; }
.bg-seal-row .bg-bar i { display: block; height: 100%; width: 0%; background: var(--gold); }


/* ===== L2 打磨 · 批次 A（移动端 App 化 + 开箱撤场；仅新增选择器与 ≤720 媒体查询，PC 零影响） ===== */
/* 通知策略分段控件手机不折行 */
@media (max-width: 720px) {
  .seg { display: flex; width: 100%; }
  .seg-item { flex: 1; padding: 8px 6px; font-size: 12.5px; white-space: nowrap; }
  .seg-item .seg-sub { font-size: 11px; }
}

/* B 方案 · 沉浸式流程页：顶部细品牌条 + 主 CTA 贴底 + 控制台隐藏 */
.sticky-cta { text-align: center; margin-top: 26px; }
@media (max-width: 720px) {
  .site-header { padding: 8px 16px; flex-wrap: nowrap; }
  .site-header nav { display: none; }
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    margin-top: 0;
    /* G12 · 大字体：内边距改 em（跟随系统字体放大），贴底栏比例不失衡 */
    padding: 0.7em 16px calc(0.7em + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, .94); /* G10①·随 --paper 暖白 */
    backdrop-filter: blur(10px);
    border-top: 1.5px solid var(--line);
  }
  .sticky-cta .btn { width: 100%; }
  /* G12 · 大字体：内容衬距改 em（随字体放大），巨号贴底栏不再盖住内容 */
  body.has-sticky-cta { padding-bottom: calc(5.6em + env(safe-area-inset-bottom, 0px)); }
  /* share 页贴底 CTA 改 sticky（仅 share）：fixed 在微信 textZoom 后不重排，
     按钮折行后底边被视口裁（2026-08-28 真机实证，金色盒子两行一起被裁=位置停滞）。
     sticky 参与文档流、重排即正位，滚到页尾自然归位不再遮内容；
     负边距抵消 page-narrow 的 16px 侧衬距保持全宽。adopt 贴底栏嵌在卡内，保持 fixed 不动 */
  .sticky-cta-flow {
    position: sticky;
    left: auto; right: auto;
    margin: 20px -16px 0;
  }
  .demo-console { display: none; }
  .reshare, .safety-note { padding: 0 8px; }
  /* G2 · 页面最底（页脚）让出刘海屏 Home 指示条区域 */
  .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* 开箱撤场：礼盒卡收拢成题头（双端一致） */
/* B7 · 刚封存接力（quiet-open）：开箱仪式整段不演——场景与跳过键收起，只留卡面信息 */
.gift-card.quiet-open .gift-scene, .gift-card.quiet-open .ceremony-skip { display: none; }
.gift-card .title-row { display: flex; align-items: center; justify-content: center; }
.gift-card .mini-chest {
  flex: none; width: 0; opacity: 0; overflow: hidden;
  transition: width .5s ease .15s, opacity .5s ease .15s, margin-right .5s ease .15s;
}
.gift-card.collapsed .mini-chest { width: 46px; opacity: 1; margin-right: 10px; }
.gift-card .gift-scene { max-height: 240px; overflow: hidden; transition: max-height .7s cubic-bezier(.4, 0, .2, 1), opacity .45s ease, margin .5s ease; }
.gift-card .gift-caption, .gift-card .gift-sub { max-height: 40px; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .4s ease, min-height .5s ease; }
.gift-card.collapsed .gift-scene { max-height: 0; opacity: 0; margin: 0; }
.gift-card.collapsed .gift-caption, .gift-card.collapsed .gift-sub { max-height: 0; min-height: 0; padding: 0; opacity: 0; margin: 0; }
.gift-card.collapsed .ceremony-skip { display: none; }

/* 移动端收拢后再降级为紧凑题头条 */
@media (max-width: 720px) {
  .gift-card.collapsed { padding: 14px 16px 12px; text-align: left; }
  .gift-card.collapsed .gift-from { font-size: 12px; }
  .gift-card.collapsed .title-row { justify-content: flex-start; }
  .gift-card.collapsed .mini-chest { width: 34px; margin-right: 8px; }
  .gift-card.collapsed h1 { font-size: 20px; margin: 4px 0 2px; }
  .gift-card.collapsed .gift-desc { font-size: 13px; margin-bottom: 8px; }
  .gift-card.collapsed .chip { font-size: 11px; padding: 3px 10px; }
}

/* ===== L2 打磨 · 批次 C1（结构逻辑包） ===== */
/* 仅移动端显示的工具类（C3 adopt 页"这一步要在电脑上完成"提示） */
.only-mobile { display: none; }
@media (max-width: 720px) { .only-mobile { display: block; } }

/* ============================================================
 * L2 打磨 · 批次 D1（2026-08-28）
 * ============================================================ */

/* G5 · 门的首次可见性：未点开过门时呼吸发光几轮（点开任意一扇即全站退潮，见 story.js mountDoors） */
.door.door-hint { animation: doorBreathe 2.2s ease-in-out 4; }
@keyframes doorBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 161, 59, 0); }
  50% { box-shadow: 0 0 0 5px rgba(233, 161, 59, .30); }
}

/* A15 · 下载进度状态行（取回/逐张保存期间常显，完成即隐） */
.dl-status { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

/* A16 · file 类专属卡（图标 + 文件名 + 下载） */
.file-card { display: grid; justify-items: center; gap: 8px; padding: 26px 14px; text-align: center; }
.file-card .file-icon { width: 44px; height: auto; }
.file-card .file-name { font-size: 13.5px; color: var(--ink); word-break: break-all; line-height: 1.5; }
.file-card .file-size { font-size: 12px; color: var(--ink-3); }

/* A19① · 剧场播完转化引导一行（浮现在 caption 位，不遮挡播放） */
.player-caption .player-conv { color: var(--gold); text-decoration: underline; }

/* A18② · 控制条图标线性 SVG 化（emoji 在微信 webview 渲染成色块，与线性控制条不搭——2026-08-28 真机反馈） */
.pc-btn svg { width: 19px; height: 19px; display: block; }
#btnMute .mx { display: none; }
#btnMute.off .mw { display: none; }
#btnMute.off .mx { display: block; }
/* 剧场大播放键 SVG（三角光学校正：视觉重心右移 2px） */
.play-btn svg { width: 30px; height: 30px; display: block; margin: 0 auto; transform: translateX(2px); }

/* E5 · 爪印帖真二维码（有 qrUrl 时替换装饰占位） */
.qr-fake.has-qr { background: #fff; background-image: none; padding: 8px; }
.qr-fake.has-qr img { width: 100%; height: 100%; display: block; border-radius: 8px; }

/* G12 · 大字体适老化：字放大时不竖排、不溢出、不遮挡（系统字体调最大是长辈常态，非边缘场景） */
/* 按钮/标签/步骤/分段：不逐字换行（不竖排），宽度随内容、允许增高 */
.btn, .seg-item, .chip, .step { white-space: nowrap; }
/* 占满宽度的主按钮反过来：允许折成两行（一行放不下时增高，不横向溢出） */
.btn-block, .sticky-cta .btn { white-space: normal; }
/* 头部弹性：空间不足时换行增高（副标掉到下一行，不再竖排四字） */
.site-header { flex-wrap: wrap; row-gap: 6px; }
.brand { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.brand small { white-space: nowrap; }
/* 长标题/长文案允许断行，不顶破卡片 */
h1, h2, h3 { overflow-wrap: break-word; }

/* G12+/首屏上传可达（2026-08-28 大字体走查后用户提出，仅移动端）：
   压缩首屏之前的纵向铬件——页头副标收起（规则说明与 dropzone 文案重叠）、标题收小、
   steps 收紧、dropzone 狗缩小——目标：任意系统字体下，第一张卡（选照片/选视频按钮）尽量落进首屏 */
@media (max-width: 720px) {
  .page-head-compact { margin-bottom: 2px; }
  .page-head-compact h1 { font-size: 22px; }
  .page-head-compact p { display: none; }
  .steps { margin: 14px 0 18px; }
  .dropzone { padding: 16px 14px; }
  .dropzone .dog-svg { width: 56px; margin-bottom: 6px; }
  /* 规则行与卡下计数行（"还没有回忆 · 一箱只装一类…"）重复，移动端收起——大字体下省两行 */
  .dropzone > span:not([data-art]) { display: none; }
}

/* B9 · view 转交区防丢提示（仅"刚封存完"的分享者视角显示） */
.reshare-key-hint { display: block; font-size: 12px; color: var(--gold-2); margin-top: 6px; }

/* ============================================================
 * 管理面（账号 account / 设置 settings / 收银台 cashier · 2026-09-04 MGMT_UI_DESIGN）
 * DESIGN.md §5.7 基调：克制——绘本底色 + 细线卡片 + 直白文案；
 * 不发明仪式；小狗只在空态/错误态点缀；付费场景不卖萌。
 * 纪律：仅追加本区块，不改既有规则；token 一律引用 var(--*)，tint 色值随既有惯例就近声明。
 * ============================================================ */

/* 定义行：图标/标签 + 值 + 动作（账号 / 设置通用；与 .member-row 同族） */
.mgmt-row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.mgmt-row:last-child { border-bottom: none; }
.mgmt-row .grow { flex: 1; min-width: 0; }
.mgmt-row .sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.mgmt-row .val { flex: none; color: var(--ink-2); font-size: 13.5px; text-align: right; }
.mgmt-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper-2); }
.mgmt-ico .paw-svg { width: 20px; height: 20px; }

/* 状态点：运行中沿用既有脉冲绿点 .dot-online；停下/异常用静点 */
.dot-off { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.dot-err { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* 额度细条（节点池口径，D1 C 模型）：复用存储条渐变，克制的细仪表 */
.quota-meter { display: block; height: 8px; margin-top: 6px; }

/* 空态点缀：小狗只在空态/错误态出现（§5.7），其余管理面场景不上插画 */
.empty-note { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 16px 0 8px; }
.empty-note [data-art] { width: 64px; margin-bottom: 6px; }

/* 危险动作（退出登录 / 解绑确认）；红 tint 无 token，随既有 chip 惯例就近声明 */
.btn-danger { color: var(--red); box-shadow: inset 0 0 0 1.5px #F0C9C4; }
.btn-danger:hover { box-shadow: inset 0 0 0 1.5px var(--red), var(--shadow-sm); }

/* ---- 收银台：价格牌（年付主角位预选、月付退路，战略 §4.2） ---- */
.plan-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin: 22px 0; }
.plan-card {
  position: relative;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan-card.selected { border-color: var(--gold); background: linear-gradient(180deg, #FFF7E8, var(--cream)); box-shadow: var(--shadow); }
.plan-card .plan-badge {
  position: absolute; top: -11px; left: 20px;
  padding: 2px 12px; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: 12px; font-weight: 700;
}
.plan-card .plan-name { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.plan-card .plan-price { font-family: var(--font-display); font-size: 36px; color: var(--ink); line-height: 1.2; margin: 6px 0 2px; }
.plan-card .plan-price .cur { font-size: 18px; margin-right: 2px; }
.plan-card .plan-price .unit { font-size: 14px; color: var(--ink-3); font-family: var(--font-body); }
.plan-card .plan-per { font-size: 13px; color: var(--gold-2); font-weight: 600; }
.plan-card .plan-note { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }

/* 人话条款：克制清单（D2/D4 口径：手动续费 / 到期降级限写不限读 / 不无理由退+例外必退） */
.terms { list-style: none; font-size: 14px; color: var(--ink-2); }
.terms li { padding: 7px 0 7px 20px; position: relative; }
.terms li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-soft); border: 1.5px solid var(--gold);
}

/* 收银台状态行 / 支付说明 */
.pay-state { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 12px; }

/* 管理面安静的次级出口（回账号 / 回 Momo 的家 / 恢复订阅） */
.mgmt-quiet { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 26px; }
.mgmt-quiet a { color: var(--ink-2); text-decoration: underline; }

/* ===== 批次 E（2026-09-21） ===== */
/* B16 · Momo 寄存选择器长名防溢出（真机实报"wangyunqian（家人家的）"溢出容器右边界）：
   本选择器豁免 G12 的 seg-item nowrap——项内允许折行（增高不竖排），flex 子项 min-width:0 才能收缩 */
#bondSeg .seg-item { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  #bondSeg .seg-item { flex: 1 1 0; }
}