/* R60 家风家训展示系统 · 新中式国潮（禁用 Google Fonts，衬线走系统/国内字体栈） */
:root {
  --primary: #C17A4E; --bg: #FAF7F2; --bg-alt: #F3EDE4; --accent: #C43A31;
  --text: #2C2C2C; --text-muted: #6B5B4F; --border: #E8DDD0; --seal: #C43A31;
  --serif: 'Songti SC', 'STSong', 'SimSun', 'PingFang SC', serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--serif); background: var(--bg); color: var(--text); line-height: 1.7;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
[data-theme="dark"] body, body[data-scheme="dark"] { color: var(--text); }

.scroll-snap-root { scroll-snap-type: y mandatory; overflow-y: auto; height: 100vh; }
.snap-section {
  min-height: 100vh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
.section-inner { padding: 4rem 1.25rem 5rem; max-width: 920px; margin: 0 auto; width: 100%; }
.section__title { font-size: 1.5rem; font-weight: 700; text-align: center; color: var(--accent); margin: 0 0 .35rem; letter-spacing: .15em; }
.section__sub { text-align: center; font-size: .82rem; color: var(--text-muted); margin-bottom: 1.25rem; }

.glass-card {
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 24px rgba(44, 44, 44, .06);
}

.section-nav {
  position: fixed; right: .5rem; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; gap: .35rem;
}
.section-nav__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  text-decoration: none; position: relative;
}
.section-nav__dot span { display: none; }
.section-nav__dot:hover span {
  display: block; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: .68rem; background: var(--bg-alt); padding: .2rem .45rem; border-radius: 4px; border: 1px solid var(--border);
}
.scheme-toggle {
  margin-top: .5rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-alt); cursor: pointer; font-size: .75rem;
}
.scheme-panel {
  position: fixed; right: 2.5rem; top: 50%; transform: translateY(-50%);
  z-index: 899; padding: .75rem; display: flex; flex-direction: column; gap: .35rem; max-width: 140px;
}
.scheme-btn {
  border: 1px solid var(--border); background: var(--bg); padding: .35rem .5rem;
  border-radius: 6px; font-size: .68rem; cursor: pointer; text-align: left;
}
.scheme-btn.active { border-color: var(--primary); color: var(--accent); font-weight: 700; }

.hero { text-align: center; overflow: hidden; }
.hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.scroll-paper {
  position: relative; z-index: 1; padding: 2rem 1.5rem;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border: 2px solid var(--primary); border-radius: 4px; margin: 1rem;
  clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.4, 0, .2, 1);
  box-shadow: inset 0 0 60px rgba(193, 122, 78, .08);
}
.scroll-unroll.is-unrolled .scroll-paper { clip-path: inset(0 0 0 0); }
.hero__family { font-size: .9rem; letter-spacing: .3em; color: var(--primary); margin: 0 0 .75rem; }
.hero__motto { font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 700; color: var(--accent); margin: 0 0 .5rem; line-height: 1.4; }
.hero__sub { font-size: .82rem; color: var(--text-muted); margin: 0; }
.hero__scroll-hint { margin-top: 2rem; font-size: .75rem; color: var(--text-muted); }
.scroll-arrow {
  width: 16px; height: 16px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); margin: .5rem auto 0; animation: bounce 1.5s infinite;
}
@keyframes bounce { 50% { transform: rotate(45deg) translateY(5px); } }

.screen-three-col { display: grid; gap: .75rem; }
@media (min-width: 768px) { .screen-three-col { grid-template-columns: 120px 1fr 140px; } }
.col-label { font-size: .72rem; color: var(--text-muted); margin-bottom: .5rem; }
.filter-chip {
  display: block; width: 100%; text-align: left; margin-bottom: .35rem; padding: .35rem .5rem;
  border: 1px solid var(--border); background: transparent; border-radius: 4px; font-size: .75rem; cursor: pointer; font-family: inherit;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.precept-card {
  display: block; width: 100%; text-align: left; padding: .85rem; margin-bottom: .5rem; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg);
}
.precept-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.precept-cat { font-size: .65rem; color: var(--primary); }
.precept-card strong { display: block; margin: .25rem 0; color: var(--accent); }
.precept-card p { margin: 0; font-size: .78rem; color: var(--text-muted); }
.seal-stamp {
  width: 72px; height: 72px; border: 3px solid var(--seal); border-radius: 50%; color: var(--seal);
  display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800;
  text-align: center; line-height: 1.2; margin: 0 auto .75rem; transform: rotate(-8deg);
  animation: sealIn .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sealIn { from { transform: scale(2) rotate(-8deg); opacity: 0; } }
.sealed-text { font-size: .82rem; text-align: center; color: var(--text-muted); }

.family-tree-wrap { padding: .5rem; overflow: auto; }
#family-tree-svg { width: 100%; height: auto; min-height: 320px; }
.tree-link { stroke-width: 1.5; }

.heritage-timeline { display: flex; flex-direction: column; gap: 1rem; }
.timeline-item { padding: 1rem 1.25rem; position: relative; }
.timeline-item.is-right { margin-left: 1.5rem; }
.timeline-year { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.timeline-item h3 { margin: .35rem 0; font-size: .95rem; }
.timeline-item p { margin: 0; font-size: .82rem; color: var(--text-muted); }
.timeline-tags span { font-size: .65rem; padding: .1rem .4rem; border: 1px solid var(--border); border-radius: 4px; margin-right: .25rem; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1.25rem; }
.stats-row--wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stats-row--wide { grid-template-columns: repeat(4, 1fr); } }
.stat-card { text-align: center; padding: .85rem .5rem; }
.stat-num { display: block; font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.stat-card span:last-child { font-size: .68rem; color: var(--text-muted); }

.chart-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .chart-grid { grid-template-columns: 1fr 1fr; } }
.chart-card { padding: .85rem; }

.tree-toolbar { padding: .75rem; margin-bottom: .75rem; }
.tree-search {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-family: inherit; font-size: .82rem; margin-bottom: .5rem;
}
.tree-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.filter-chip--inline { display: inline-block; width: auto; margin: 0; }
.tree-node.is-dimmed circle, .tree-node.is-dimmed text { opacity: .2; }
.tree-node.is-match circle { stroke: var(--accent); stroke-width: 3; fill: var(--accent); }
.tree-link.is-dimmed { opacity: .15; }

.precept-row { display: flex; align-items: stretch; gap: .35rem; margin-bottom: .5rem; }
.precept-row .precept-card { flex: 1; margin-bottom: 0; }
.precept-speak {
  flex-shrink: 0; width: 2.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-alt); cursor: pointer; font-size: 1rem; align-self: center;
}
.precept-card.is-speaking { border-color: var(--accent); animation: speakPulse 1.2s ease infinite; }
.precept-card.is-speaking .precept-content { color: var(--accent); font-weight: 600; }
@keyframes speakPulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } }

.treasure-layout { display: grid; gap: 1rem; }
@media (min-width: 768px) { .treasure-layout { grid-template-columns: 1fr 200px; } }
.treasure-viewer { padding: 1rem; text-align: center; }
.treasure-stage {
  width: 180px; height: 180px; margin: 0 auto 1rem; perspective: 600px; cursor: grab; touch-action: none;
}
.treasure-stage:active { cursor: grabbing; }
.treasure-cube {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform .1s linear;
}
.treasure-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--primary); background: linear-gradient(145deg, var(--bg-alt), color-mix(in srgb, var(--treasure-hue, var(--primary)) 35%, var(--bg)));
  backface-visibility: hidden; border-radius: 6px;
}
.treasure-face span { font-size: 2.5rem; font-weight: 800; color: var(--accent); }
.treasure-face small { font-size: .65rem; color: var(--text-muted); margin-top: .25rem; }
.treasure-face--front { transform: translateZ(90px); }
.treasure-face--back { transform: rotateY(180deg) translateZ(90px); }
.treasure-face--right { transform: rotateY(90deg) translateZ(90px); }
.treasure-face--left { transform: rotateY(-90deg) translateZ(90px); }
.treasure-face--top { transform: rotateX(90deg) translateZ(90px); }
.treasure-face--bottom { transform: rotateX(-90deg) translateZ(90px); }
.treasure-hint { font-size: .72rem; color: var(--text-muted); margin: 0 0 .75rem; }
.treasure-detail { text-align: left; font-size: .82rem; }
.treasure-detail h3 { margin: 0 0 .25rem; color: var(--accent); font-size: .95rem; }
.treasure-detail p { margin: 0; color: var(--text-muted); }
.treasure-list { display: flex; flex-direction: column; gap: .5rem; }
.treasure-card {
  display: flex; align-items: center; gap: .65rem; padding: .65rem; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg); width: 100%;
}
.treasure-card.active { border-color: var(--accent); }
.treasure-card__glyph {
  width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; flex-shrink: 0;
}
.treasure-card strong { display: block; font-size: .82rem; }
.treasure-card span { font-size: .68rem; color: var(--text-muted); }

.figures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .figures-grid { grid-template-columns: repeat(4, 1fr); } }
.figure-card { padding: 1rem; text-align: center; cursor: pointer; transition: transform .25s; }
.figure-card:hover { transform: translateY(-4px) rotateX(2deg); }
.figure-card__avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto .5rem;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.figure-card h3 { margin: 0; font-size: .88rem; }
.figure-card p { margin: .2rem 0; font-size: .72rem; color: var(--text-muted); }
.figure-card blockquote { margin: .5rem 0 0; font-size: .72rem; color: var(--accent); border: none; padding: 0; }

.quiz-box { padding: 1.5rem; max-width: 480px; margin: 0 auto; }
.quiz-score { font-size: 2.5rem; font-weight: 800; text-align: center; color: var(--accent); margin: .5rem 0; }
.quiz-q { font-size: 1rem; margin: 1rem 0; text-align: center; }
.quiz-options { display: flex; flex-direction: column; gap: .5rem; }

.form-field { margin-bottom: .75rem; }
.form-field label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .25rem; }
.form-field input { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); font-family: inherit; }
.poster-preview-wrap { margin: 1rem 0; overflow: auto; }

.sig-canvas {
  display: block; width: 100%; max-width: 320px; margin: 0 auto 1rem;
  border: 2px dashed var(--border); border-radius: 8px; background: var(--bg-alt); touch-action: none;
}
.sig-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.sig-input { flex: 1; min-width: 120px; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.signature-wall { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; min-height: 48px; }
.sig-chip {
  padding: .35rem .65rem; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 4px; font-size: .78rem; transform: rotate(-2deg);
}

.btn {
  display: inline-block; text-align: center; border-radius: 6px; padding: .65rem 1rem;
  font-size: .88rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; text-decoration: none;
}
.btn-block { display: block; width: 100%; margin-top: .5rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-sm { padding: .4rem .75rem; font-size: .78rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal__box { position: relative; max-width: 400px; width: 100%; padding: 1.25rem; max-height: 85vh; overflow-y: auto; }
.detail-era { font-size: .78rem; color: var(--primary); }
.detail-bio { font-size: .88rem; color: var(--text-muted); }
blockquote { border-left: 3px solid var(--accent); padding-left: .75rem; color: var(--accent); margin: 1rem 0; }

.heritage-toast {
  position: fixed; left: 50%; bottom: calc(6rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(44, 44, 44, .9); color: #fff; padding: .55rem 1rem; border-radius: 4px;
  font-size: .82rem; z-index: 960; opacity: 0; pointer-events: none; transition: .25s;
}
.heritage-toast--show { opacity: 1; }

.hall-scene {
  width: 100%; height: min(380px, 55vh); min-height: 280px; overflow: hidden; position: relative;
}
.hall-scene canvas { display: block; width: 100% !important; height: 100% !important; }
.hall-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.hall-tip { font-size: .72rem; color: var(--text-muted); }
.snap-section--hall .section-inner { max-width: 720px; }

.photo-restore-layout { display: grid; gap: 1rem; }
@media (min-width: 768px) { .photo-restore-layout { grid-template-columns: 1fr 160px; } }
.photo-viewer { padding: 1rem; }
.photo-compare {
  position: relative; max-width: 280px; margin: 0 auto 1rem; border: 4px solid var(--border);
  border-radius: 4px; overflow: hidden; background: #2a2a2a; line-height: 0;
}
.photo-canvas { display: block; width: 280px; max-width: 100%; height: auto; }
.photo-compare__clip {
  position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; border-right: 2px solid var(--accent);
}
.photo-compare__clip .photo-canvas { width: 280px; max-width: none; }
.photo-compare__handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
  pointer-events: none; transform: translateX(-50%); z-index: 2;
}
.photo-compare__after {
  display: none;
}
.photo-compare__handle::after {
  content: '◆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--accent); font-size: .75rem; background: var(--bg); padding: .15rem;
}
.photo-label {
  position: absolute; bottom: .35rem; font-size: .62rem; padding: .15rem .35rem;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 3px;
}
.photo-label--before { left: .35rem; }
.photo-label--after { right: .35rem; }
.photo-slider { width: 100%; max-width: 280px; display: block; margin: 0 auto .75rem; accent-color: var(--accent); }
.photo-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .75rem; }
.photo-upload { cursor: pointer; margin: 0; }
.photo-desc { font-size: .82rem; color: var(--text-muted); text-align: center; margin: 0 0 .5rem; }
.photo-disclaimer { font-size: .65rem; color: var(--text-muted); text-align: center; margin: 0; opacity: .85; }
.photo-gallery { display: flex; flex-direction: column; gap: .5rem; }
.photo-thumb {
  display: block; width: 100%; text-align: left; padding: .65rem; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg);
}
.photo-thumb.active { border-color: var(--accent); }
.photo-thumb.is-enhanced strong::after { content: ' ✨'; font-size: .7rem; }
.photo-thumb__year { font-size: .65rem; color: var(--primary); display: block; }
.photo-thumb strong { display: block; font-size: .82rem; }
.photo-thumb span:last-child { font-size: .68rem; color: var(--text-muted); }

.contact-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  padding: .45rem .75rem calc(.45rem + env(safe-area-inset-bottom));
  background: var(--bg-alt); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.contact-footer__btns { display: flex; gap: .35rem; justify-content: center; max-width: 420px; margin: 0 auto; }
.contact-footer__cta, .contact-footer__btn {
  flex: 1; min-width: 0; padding: .45rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  text-align: center; text-decoration: none; line-height: 1.25;
}
.contact-footer__cta { background: #c41e1e; color: #fff !important; border: 1px solid #c41e1e; }
.contact-footer__btn { background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.contact-footer__brand { text-align: center; font-size: .62rem; color: var(--text-muted); margin-top: .35rem; }
html.has-contact-footer .zw-root .zw-fab { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }

.share-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--bg); }
.share-card { max-width: 360px; width: 100%; padding: 1.5rem; text-align: center; }
.share-card__family { font-size: .78rem; letter-spacing: .2em; color: var(--primary); margin: 0 0 .5rem; }
.share-card__motto { font-size: 1rem; color: var(--accent); font-weight: 700; margin: .5rem 0; line-height: 1.5; }
.share-card__sub { font-size: .78rem; color: var(--text-muted); margin: 0 0 .25rem; }
.share-card__stats { display: flex; justify-content: space-around; margin: 1rem 0; font-size: .85rem; color: var(--text-muted); }
.share-card__stats strong { display: block; font-size: 1.25rem; color: var(--accent); }
.scheme-bar { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-bottom: 1rem; }
.scheme-chip {
  border: 1px solid var(--border); background: var(--bg-alt); padding: .3rem .5rem;
  border-radius: 999px; font-size: .65rem; cursor: pointer; font-family: inherit;
}
.scheme-chip.active { border-color: var(--primary); color: var(--accent); font-weight: 700; }
#share-canvas-wrap { margin-top: 1rem; }

@media (max-width: 767px) {
  .section-nav { display: none; }
  .scheme-panel { right: .75rem; top: auto; bottom: calc(5rem + env(safe-area-inset-bottom)); transform: none; }
}