/* ============================================================
   香槟月光与鸢尾花园 · 印刷请柬风
   雾白纸 × 香槟黄 × 鸢尾紫 × 浅灰绿 · 星月梦核 · 轻法式
   ============================================================ */

:root {
  /* 纸 */
  --paper: #f6f1e3;           /* 奶油纸底 */
  --paper-warm: #f1e9d6;      /* 略深一档 */
  --lilac-wash: #eae4f0;      /* 鸢尾浅晕纸 */
  --sage-wash: #e9ecdf;       /* 灰绿浅晕纸 */

  /* 墨与色 */
  --ink: #514a63;             /* 紫灰墨（线条与正文） */
  --ink-soft: #8a8298;        /* 次级文字 */
  --iris: #8d83b8;            /* 鸢尾紫 */
  --iris-deep: #6b6293;
  --night: #4b4166;           /* 拱窗夜色（低饱和深鸢尾） */
  --night-2: #3c3554;
  --champagne: #e3c87f;       /* 香槟黄 */
  --champagne-deep: #c2a153;
  --cream: #f3ecd9;           /* 插画奶油色 */
  --sage: #9aa98b;            /* 浅灰绿 */
  --rose: #cf8fa3;            /* 玫粉（流程线/点彩，参考图同款） */
  --rose-soft: #e3b6c3;

  --hairline: rgba(81, 74, 99, .35);
  --hairline-soft: rgba(81, 74, 99, .18);

  /* 字体 */
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --latin: "Cormorant Garamond", "Noto Serif SC", serif;
  --script: "Pinyon Script", cursive;
  --type: "Special Elite", "Courier New", monospace;   /* 打字机 */
  --sans: "Noto Sans SC", "PingFang SC", sans-serif;

  --maxw: 1040px;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 纸张颗粒（全局覆盖层） */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 999;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .14;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--iris-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--champagne); color: var(--night-2); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-soft);
  transform: translateY(-110%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.nav.show { transform: translateY(0); }
.nav-brand {
  font-family: var(--script);
  font-size: 22px;
  color: var(--iris-deep);
  white-space: nowrap;
  line-height: 1;
}
.nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a,
.nav-admin-btn {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 11px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav-admin-btn {
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  line-height: inherit;
}
.nav-links a:hover,
.nav-admin-btn:hover { color: var(--iris-deep); border-color: var(--iris); }

/* ---------- 首屏 · 插画封面 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 540px at 50% 0%, color-mix(in srgb, var(--lilac-wash) 80%, transparent), transparent 70%),
    var(--paper);
  padding: 48px 16px 64px;
}
.cover {
  width: min(460px, 92vw);
  position: relative;
  perspective: 1100px;
  animation: coverIn 1.6s ease both, coverFloat 8s ease-in-out 1.8s infinite;
}
@keyframes coverFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes coverIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 封面文字带（叠在插画底部奶油带上） */
.cover-band {
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.cover-script {
  font-family: var(--script);
  font-size: clamp(30px, 7.2vw, 52px);
  color: var(--rose);
  line-height: 1.05;
  white-space: nowrap;
}
.cover-cn {
  font-size: clamp(14px, 2.6vw, 18px);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--ink);
}
.cover-date {
  font-family: var(--sans);
  font-size: clamp(13px, 2.4vw, 16px);
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--ink-soft);
}
.cover-date-numerals {
  font-family: Verdana, Arial, sans-serif;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.cover-date-place { font-family: var(--sans); }

/* 封面两侧竖排题词 */
.motto {
  position: absolute;
  top: 25%;
  writing-mode: vertical-rl;
  font-size: clamp(13px, 1.8vw, 17px);
  letter-spacing: .55em;
  color: var(--iris-deep);
  opacity: .85;
}
.motto::after {
  content: "";
  display: block;
  width: 1px; height: 44px;
  margin: 16px auto 0;
  background: linear-gradient(180deg, var(--iris), transparent);
}
.motto-left { left: max(8px, calc(50% - min(340px, 47vw) - 56px)); }
.motto-right { right: max(8px, calc(50% - min(340px, 47vw) - 56px)); }

.scroll-cue {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 28px;
  background: linear-gradient(180deg, var(--ink-soft), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- 日期与倒计时（活版印刷式） ---------- */
.dateblock {
  background: var(--lilac-wash);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: center;
  padding: 52px 20px 48px;
}
.dateblock .save {
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.daterow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 28px);
  margin-bottom: 22px;
}
.datebox {
  font-family: var(--latin);
  font-size: clamp(15px, 3vw, 20px);
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 6px 18px;
  position: relative;
}
.datebox::before, .datebox::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.datebig {
  font-family: var(--latin);
  font-size: clamp(56px, 12vw, 92px);
  line-height: 1;
  color: var(--iris-deep);
}
.dateweek {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.cd-line {
  font-family: var(--type);
  font-size: clamp(13px, 2.6vw, 16px);
  letter-spacing: .12em;
  color: var(--ink);
}
.cd-line b {
  font-weight: 400;
  color: var(--rose);
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 章节通用 ---------- */
.chapter { padding: clamp(76px, 11vw, 116px) 0; position: relative; }
.chapter.tint-lilac { background: var(--lilac-wash); }
.chapter.tint-sage { background: var(--sage-wash); }
.chapter.tint-warm { background: var(--paper-warm); }

.chapter-head { text-align: center; margin-bottom: clamp(40px, 6vw, 60px); }
.spark {
  width: 22px; height: 22px;
  margin: 0 auto 12px;
  display: block;
  color: var(--champagne-deep);
}
.chapter-eyebrow {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--ink-soft);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.chapter-title {
  font-size: clamp(25px, 4.6vw, 33px);
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--ink);
}
.chapter-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 12px;
  letter-spacing: .06em;
}

/* 滚动浮现 */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- 卡纸（双线框 + 星芒角） ---------- */
.card {
  position: relative;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, white 36%, var(--paper));
  padding: clamp(34px, 6vw, 56px) clamp(22px, 5vw, 52px);
}
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.card .corner {
  position: absolute;
  width: 16px; height: 16px;
  color: var(--champagne-deep);
}
.card .corner.tl { top: -8px; left: -8px; }
.card .corner.tr { top: -8px; right: -8px; }
.card .corner.bl { bottom: -8px; left: -8px; }
.card .corner.br { bottom: -8px; right: -8px; }

/* ---------- 请柬 ---------- */
.invite-card { max-width: 660px; margin: 0 auto; text-align: center; }
.invite-greeting {
  font-size: 14px;
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.invite-script {
  font-family: var(--script);
  font-size: clamp(34px, 7vw, 50px);
  color: var(--iris-deep);
  line-height: 1.2;
  margin-bottom: 4px;
}
.invite-names {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  margin-bottom: 24px;
}
.invite-body {
  font-size: 15.5px;
  max-width: 29em;
  margin: 0 auto 18px;
  color: var(--ink);
}
.invite-vow {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 auto 28px;
  line-height: 1.9;
}
.invite-meta {
  display: grid;
  gap: 8px;
  justify-items: center;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: .08em;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 24px;
}
.invite-meta strong {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .14em;
}
.invite-signoff {
  margin-top: 26px;
  font-size: 13.5px;
  letter-spacing: .26em;
  color: var(--champagne-deep);
}

/* ---------- 流程 · 蜿蜒小路 ---------- */
.path-zone {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 0;
}
.path-line {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.path-line path {
  stroke: var(--rose);
  stroke-width: 3px;
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .8;
}
.path-items { position: relative; display: grid; gap: clamp(30px, 5vw, 44px); }
.path-item {
  width: min(360px, 78%);
}
.path-item:nth-child(odd) { margin-right: auto; }
.path-item:nth-child(even) { margin-left: auto; }
.path-item:nth-child(even) .path-node { flex-direction: row-reverse; text-align: right; }
.path-item:nth-child(even) .path-detail > p {
  border-left: 0;
  border-right: 2px solid color-mix(in srgb, var(--rose) 45%, transparent);
  padding-left: 0;
  padding-right: 12px;
}
.path-item:nth-child(even) .path-more { margin-left: 0; margin-right: 8px; }
.doodle {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  background: color-mix(in srgb, white 50%, var(--paper));
  border: 1px solid var(--hairline-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rose);
}
.doodle svg { width: 38px; height: 38px; }
.path-time {
  font-family: var(--type);
  font-size: 15px;
  color: var(--rose);
  letter-spacing: .06em;
}
.path-title {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
  margin: 2px 0;
}
.path-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------- 花园小集 ---------- */
.fair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.fair-card {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  padding: 28px 22px 24px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.fair-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -20px rgba(81, 74, 99, .4);
}
.fair-card .doodle {
  margin: 0 auto 14px;
  color: var(--iris-deep);
  background: var(--lilac-wash);
  border-color: transparent;
}
.fair-title {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .14em;
  margin-bottom: 10px;
}
.fair-text {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
  text-align: center;
}

/* ---------- 着装色卡 ---------- */
.dress-box { max-width: 640px; margin: 44px auto 0; text-align: center; }
.dress-label {
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dress-note {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 22px;
}
.swatches {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 5vw, 38px);
}
.swatch { display: grid; gap: 8px; justify-items: center; }
.swatch .daub { width: 64px; height: 34px; color: inherit; }
.swatch .daub path { fill: currentColor; }
.swatch span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

/* ---------- 故事 ---------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
.story-card {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  padding: 30px 26px;
  position: relative;
}
.story-card::after {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 56px; height: 18px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--iris) 32%, white);
  opacity: .6;
}
.story-year {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--rose);
  margin-bottom: 8px;
}
.story-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.story-text {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.95;
}

/* ---------- 月下影像 · 可展开相册 ---------- */
#gallery { overflow: hidden; }
.gallery-grid {
  width: 100%;
}
.gallery-album-shell {
  display: grid;
  place-items: center;
  min-height: clamp(390px, 54vw, 560px);
  perspective: 1800px;
  overflow: visible;
}
.gallery-album {
  position: relative;
  width: min(620px, 84vw, calc((clamp(390px, 54vw, 560px) - 4px) * 1.24));
  aspect-ratio: 1.24 / 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform .45s ease;
}
.gallery-album:hover { transform: translateY(-6px); }
.gallery-album:focus-visible { outline: 2px solid var(--champagne-deep); outline-offset: 12px; }
.album-shadow {
  position: absolute;
  left: 8%; right: 4%; bottom: -4%;
  height: 18%;
  border-radius: 50%;
  background: rgba(60, 48, 67, .24);
  filter: blur(22px);
  transform: translateZ(-20px);
  transition: opacity .8s, transform .9s;
}
.album-book {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}
.album-inside,
.album-page-stack,
.album-cover {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 3px 7px 7px 3px;
}
.album-inside {
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(97, 81, 108, .2);
  background:
    linear-gradient(90deg, rgba(86,68,94,.08), transparent 8%, transparent 92%, rgba(86,68,94,.06)),
    #f4ecdf;
  box-shadow: 0 24px 55px -30px rgba(57,45,67,.55);
}
.album-inside::before {
  content: "";
  position: absolute;
  top: 6%; bottom: 6%; left: 50%;
  width: 1px;
  background: rgba(93,73,99,.14);
  box-shadow: 0 0 12px rgba(73,55,80,.12);
}
.album-page-stack {
  inset: 5px -6px -6px 5px;
  z-index: 1;
  border: 1px solid rgba(101,85,108,.16);
  background: #eee4d7;
  box-shadow: 3px 3px 0 #f8f2e9, 6px 6px 0 rgba(115,96,117,.15);
}
.album-cover {
  z-index: 4;
  overflow: hidden;
  transform-origin: left center;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  border: 1px solid rgba(77,61,87,.3);
  background:
    radial-gradient(circle at 72% 24%, rgba(222,195,132,.22), transparent 24%),
    linear-gradient(145deg, #6f6282, #564967 72%);
  box-shadow: 0 28px 58px -28px rgba(51,39,61,.68), inset 0 0 0 7px rgba(255,255,255,.035);
  transition: transform 1.05s cubic-bezier(.2,.72,.25,1), box-shadow .9s;
  cursor: pointer;
}
.album-cover::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(231,207,151,.34);
}
.album-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9%;
  background: linear-gradient(90deg, rgba(35,25,43,.28), rgba(255,255,255,.06), transparent);
  border-right: 1px solid rgba(237,215,167,.2);
}
.album-moon {
  position: absolute;
  width: clamp(112px, 25%, 145px);
  aspect-ratio: 1;
  left: 50%; top: 22%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 32px rgba(225,195,126,.18);
}
.album-moon::after {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 27%; top: -13%;
  border-radius: 50%;
  background: #625571;
}
.album-star {
  position: absolute;
  color: #e7cf98;
  line-height: 1;
}
.album-star-a { left: 29%; top: 24%; font-size: 18px; }
.album-star-b { right: 27%; top: 42%; font-size: 13px; }
.album-cover-copy {
  position: absolute;
  left: 14%; right: 10%; bottom: 14%;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #f2e8d2;
}
.album-cover-copy small {
  font-family: var(--latin);
  font-size: 9px;
  letter-spacing: .28em;
  opacity: .72;
}
.album-cover-copy strong {
  font-family: var(--type);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: .28em;
  padding-left: .28em;
}
.album-cover-copy em {
  font-family: var(--script);
  font-size: clamp(16px, 4vw, 22px);
  font-style: normal;
  color: #d9b5bd;
}
.album-photo {
  position: absolute;
  display: block;
  width: 42%;
  border: 0;
  padding: clamp(6px, .8vw, 10px) clamp(6px, .8vw, 10px) clamp(18px, 2vw, 25px);
  background: #fffaf1;
  color: var(--ink-soft);
  box-shadow: 0 9px 20px -12px rgba(47,37,54,.48);
  opacity: 0;
  cursor: zoom-in;
  box-sizing: border-box;
  transition: transform .72s cubic-bezier(.2,.8,.3,1), opacity .45s ease;
}
.album-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.album-photo > span {
  position: absolute;
  right: 8px;
  bottom: 5px;
  font-family: var(--latin);
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .62;
}
.album-photo-1 { left: 4%; top: 9%; transform: translate(24%, 18%) rotate(-3deg) scale(.72); }
.album-photo-2 { left: 54%; top: 8%; transform: translate(-24%, 18%) rotate(3deg) scale(.72); }
.album-photo-3 { left: 10%; top: 49%; transform: translate(24%, -18%) rotate(3deg) scale(.72); }
.album-photo-4 { left: 55%; top: 47%; transform: translate(-24%, -18%) rotate(-3deg) scale(.72); }
.album-pages { position: absolute; inset: 0; display: block; }
.album-pages.single-page .album-photo-1 { left: 29%; }
.album-inside-mark {
  position: absolute;
  inset: auto 0 4% 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .45s .55s;
}
.album-inside-mark b { font-family: var(--latin); font-size: 10px; letter-spacing: .18em; }
.album-inside-mark i { font-family: var(--latin); font-size: 9px; font-style: normal; letter-spacing: .14em; }
.gallery-album.opened { transform: translateY(-2px) scale(.97); }
.gallery-album.opened:hover { transform: translateY(-2px) scale(.97); }
.gallery-album.opened .album-cover {
  transform: rotateY(-168deg);
  box-shadow: -18px 18px 42px -24px rgba(42,32,50,.48);
}
.gallery-album.opened .album-shadow { opacity: .65; transform: translateX(-12%) scaleX(1.65) translateZ(-20px); }
.gallery-album.opened .album-photo { opacity: 1; }
.gallery-album.opened .album-photo-1 { transform: rotate(-3deg) scale(1); transition-delay: .24s; }
.gallery-album.opened .album-photo-2 { transform: rotate(3deg) scale(1); transition-delay: .34s; }
.gallery-album.opened .album-photo-3 { transform: rotate(3deg) scale(1); transition-delay: .43s; }
.gallery-album.opened .album-photo-4 { transform: rotate(-3deg) scale(1); transition-delay: .52s; }
.gallery-album.turning .album-photo { opacity: 1; transition: none; transition-delay: 0s; }
.gallery-album.opened .album-inside-mark { opacity: 1; }
.gallery-album.opening { pointer-events: none; }
.album-controls {
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: -58px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s .75s, transform .35s .75s;
}
.gallery-album.opened .album-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.album-turn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(91, 72, 99, .28);
  border-radius: 50%;
  background: rgba(255, 250, 241, .76);
  color: var(--iris);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, border-color .25s, opacity .25s;
}
.album-turn:hover:not(:disabled) { background: #fffaf1; border-color: var(--champagne-deep); }
.album-turn:disabled { opacity: .28; cursor: default; }
.gallery-album.turning .album-turn { opacity: .28; pointer-events: none; }
.gallery-album:not(.ready) .album-turn { opacity: .28; pointer-events: none; }
.album-page-counter {
  min-width: 92px;
  text-align: center;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}
.album-turn-sheet {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}
.album-turn-face { position: absolute; inset: 0; background: linear-gradient(90deg, #f8f0e4, #eee3d5); backface-visibility: hidden; }
.album-turn-front { box-shadow: -8px 0 18px rgba(72, 55, 80, .14); }
.album-turn-back { background: linear-gradient(270deg, #f8f0e4, #eee3d5); box-shadow: 8px 0 18px rgba(72, 55, 80, .12); transform: rotateY(180deg); }
.album-inside.turn-next .album-turn-sheet { animation: albumPageNext 1.18s cubic-bezier(.45,.03,.2,1) both; will-change: transform, opacity; }
.album-inside.turn-prev .album-turn-sheet {
  left: 0;
  transform-origin: right center;
  animation: albumPagePrev 1.18s cubic-bezier(.45,.03,.2,1) both;
  will-change: transform, opacity;
}
.album-inside.turn-next .album-pages { animation: albumContentNext 1.18s ease-in-out both; will-change: transform, opacity; }
.album-inside.turn-prev .album-pages { animation: albumContentPrev 1.18s ease-in-out both; will-change: transform, opacity; }
@keyframes albumPageNext {
  0% { opacity: 1; transform: perspective(900px) rotateY(0deg) translateZ(0); }
  45% { opacity: 1; transform: perspective(900px) rotateY(-78deg) translateZ(0); }
  55% { opacity: 1; transform: perspective(900px) rotateY(-104deg) translateZ(0); }
  100% { opacity: 1; transform: perspective(900px) rotateY(-180deg) translateZ(0); }
}
@keyframes albumPagePrev {
  0% { opacity: 1; transform: perspective(900px) rotateY(0deg) translateZ(0); }
  45% { opacity: 1; transform: perspective(900px) rotateY(78deg) translateZ(0); }
  55% { opacity: 1; transform: perspective(900px) rotateY(104deg) translateZ(0); }
  100% { opacity: 1; transform: perspective(900px) rotateY(180deg) translateZ(0); }
}
@keyframes albumContentNext {
  0%, 38% { opacity: 1; }
  48%, 100% { opacity: 0; }
}
@keyframes albumContentPrev {
  0%, 38% { opacity: 1; }
  48%, 100% { opacity: 0; }
}
.gallery-empty {
  text-align: center;
  border: 1px dashed var(--hairline);
  padding: 56px 24px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

.video-shell {
  max-width: 860px;
  margin: 44px auto 0;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 50%, var(--paper));
  padding: 10px;
}
.video-shell video { width: 100%; display: block; }

/* ---------- 交通与到场 ---------- */
.map-nav {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-bottom: 44px;
}
.map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.map-label {
  font-size: clamp(20px, 3.6vw, 25px);
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--ink);
  line-height: 1.4;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .16em;
  text-indent: .16em;
  padding: 12px 26px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--iris-deep); border-color: var(--iris-deep); color: #fdfbf4; }
.btn-solid:hover { background: var(--night-2); border-color: var(--night-2); color: #fdfbf4; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.info-card {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  padding: 24px 22px;
}
.info-card h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 8px;
  color: var(--ink);
}
.info-card h3 .mini-spark {
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 8px;
  color: var(--champagne-deep);
  vertical-align: -1px;
}
.info-card p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* ---------- 座位查询 ---------- */
.seat-box { max-width: 540px; margin: 0 auto; text-align: center; }
.seat-form { display: flex; gap: 10px; margin-bottom: 26px; }
.field {
  flex: 1;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  letter-spacing: .06em;
  border-radius: 0;
}
.field::placeholder { color: var(--ink-soft); }
.field:focus { outline: none; border-bottom-color: var(--iris-deep); box-shadow: 0 1px 0 var(--iris-deep); }
textarea.field {
  border: 1px solid var(--hairline-soft);
  padding: 12px 14px;
  resize: vertical;
  min-height: 96px;
  line-height: 1.8;
  background: color-mix(in srgb, white 38%, transparent);
}
select.field { appearance: none; }

.seat-result { min-height: 56px; }
.seat-card {
  display: inline-block;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, white 45%, var(--paper));
  padding: 20px 36px;
  margin: 6px;
  position: relative;
}
.seat-card::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.seat-name { font-size: 17px; font-weight: 600; letter-spacing: .16em; }
.seat-table {
  font-family: var(--sans);
  font-size: 30px;
  letter-spacing: 0;
  color: var(--iris-deep);
  margin: 4px 0 2px;
}
.seat-seatno {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: .08em;
}
.seat-group {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-soft);
}
.seat-hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ---------- 祝福与回执 ---------- */
.msg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}
.msg-form, .rsvp-form { display: grid; gap: 16px; }
.rsvp-party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
}
.rsvp-companions { display: grid; gap: 10px; }
.rsvp-companion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .55fr) minmax(120px, .8fr) auto;
  gap: 8px;
  align-items: center;
}
.rsvp-companion .field { min-width: 0; }
.rsvp-remove-person {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 19px;
}
.rsvp-add-person { justify-self: start; }
@media (max-width: 520px) {
  .rsvp-companion { grid-template-columns: 1fr 90px 1fr auto; }
}
.form-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: 4px;
}
.form-title::after {
  content: "";
  display: block;
  width: 38px; height: 1px;
  background: var(--champagne-deep);
  margin-top: 10px;
}
.form-note {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .03em;
}
.msg-wall { margin-top: 20px; display: grid; gap: 12px; }
.msg-item {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 40%, var(--paper));
  padding: 14px 18px;
}
.msg-item .who {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--rose);
  margin-bottom: 2px;
}
.msg-item .what {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
}
.toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translate(-50%, 20px);
  z-index: 140;
  background: var(--night-2);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .08em;
  padding: 12px 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 页脚 ---------- */
.footer {
  background: var(--lilac-wash);
  border-top: 1px solid var(--hairline-soft);
  text-align: center;
  padding: 64px 24px 52px;
}
.footer .script {
  font-family: var(--script);
  font-size: clamp(30px, 6vw, 44px);
  color: var(--iris-deep);
  line-height: 1.2;
}
.footer .names {
  font-size: 15px;
  letter-spacing: .34em;
  text-indent: .34em;
  margin: 6px 0 4px;
  color: var(--ink);
}
.footer .date {
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.footer .qr {
  width: 112px; height: 112px;
  margin: 0 auto 14px;
  background: white;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
}
.footer .qr img { width: 100%; height: 100%; }
.footer .fine {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

/* ---------- 管理面板 ---------- */
.admin-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--iris-deep);
  font-size: 16px;
  opacity: .55;
  transition: opacity .3s, transform .3s;
  font-family: var(--sans);
}
.admin-fab:hover { opacity: 1; transform: rotate(16deg); }

.admin {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 130;
  width: min(420px, 100vw);
  background: var(--paper);
  color: var(--ink);
  border-left: 1px solid var(--hairline);
  box-shadow: -24px 0 60px rgba(60, 53, 84, .35);
  transform: translateX(105%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
}
.admin.open { transform: translateX(0); }
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hairline-soft);
}
.admin-head h2 { font-size: 16px; letter-spacing: .24em; font-weight: 600; }
.admin-close {
  background: none; border: none;
  font-size: 19px;
  color: var(--ink-soft);
  width: 36px; height: 36px;
}
.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: grid;
  gap: 24px;
}
.admin-sec { display: grid; gap: 12px; }
.admin-sec h3 {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.admin label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  display: grid;
  gap: 5px;
  letter-spacing: .04em;
}
.admin .field { font-size: 14px; }
.admin-foot {
  padding: 16px 22px;
  border-top: 1px solid var(--hairline-soft);
  display: grid;
  gap: 10px;
}
.admin-fine {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.data-admin {
  left: 0;
  width: 100vw;
  max-width: none;
  border-left: 0;
  box-shadow: 0 0 80px rgba(60, 53, 84, .35);
  transform: translateY(105%);
}
.data-admin.open { transform: translateY(0); }
.data-admin .admin-head {
  min-height: 58px;
  padding: 14px 26px;
}
.data-admin .admin-body {
  align-content: start;
  gap: 18px;
  padding: 22px 28px 28px;
  overflow: auto;
}
.data-admin .data-dashboard { min-width: 1320px; }
#dataLoginBox {
  width: min(360px, 100%);
  margin: 18px auto 0;
  padding: 26px 24px 24px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  box-shadow: 0 18px 44px -34px rgba(60, 53, 84, .55);
}
#dataLoginBox h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ink);
  text-align: center;
  text-transform: none;
}
.data-login-form {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}
.data-login-form label {
  font-size: 12.5px;
  color: var(--ink-soft);
  gap: 7px;
}
.data-login-form .field {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 58%, var(--paper));
  font-size: 14px;
  letter-spacing: .04em;
}
.data-login-form .field:focus {
  border-color: var(--iris-deep);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--iris) 18%, transparent);
}
.data-login-form .btn {
  width: fit-content;
  min-width: 128px;
  justify-self: center;
  padding: 9px 20px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-indent: .12em;
}
.data-login-form .admin-fine {
  margin-top: 2px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.8;
}
.data-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.data-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.data-toolbar .btn { padding: 9px 14px; font-size: 12px; }
.data-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.metric-card {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 46%, var(--paper));
  padding: 14px 12px;
  display: grid;
  gap: 6px;
}
.metric-label {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}
.metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--iris-deep);
  letter-spacing: .06em;
}
.data-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline-soft);
}
.data-tab {
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 30%, var(--paper));
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .16em;
}
.data-tab:last-child { border-right: 0; }
.data-tab.active {
  background: var(--iris-deep);
  color: #fdfbf4;
}
.data-list {
  display: grid;
  gap: 12px;
}
.roster-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.roster-filters .field { width: min(260px, 100%); }
.data-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--hairline-soft);
  border-top: 0;
  background: color-mix(in srgb, white 38%, var(--paper));
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.data-pagination strong { color: var(--iris-deep); font-weight: 600; }
.data-page-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--iris-deep);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.data-page-btn:hover:not(:disabled) { background: var(--iris-deep); color: #fff; }
.data-page-btn:disabled { opacity: .32; cursor: default; }
.roster-table-wrap {
  overflow: auto;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 44%, var(--paper));
}
.roster-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
  font-family: var(--sans);
  font-size: 12.5px;
}
.roster-table th,
.roster-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  text-align: left;
  vertical-align: top;
}
.roster-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--paper) 92%, white);
  color: var(--ink-soft);
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .18em;
}
.roster-table tbody tr:hover {
  background: color-mix(in srgb, white 65%, var(--champagne));
}
.roster-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.roster-note-cell {
  min-width: 140px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.roster-actions {
  flex-wrap: nowrap;
}
.roster-actions .btn {
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.roster-edit-row td {
  background: color-mix(in srgb, white 72%, var(--lilac-wash));
  padding-top: 14px;
  padding-bottom: 14px;
}
.data-empty {
  border: 1px dashed var(--hairline);
  padding: 26px 18px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
}
.data-row {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  padding: 15px 16px;
  display: grid;
  gap: 10px;
}
.data-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.data-row-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
}
.data-row-time {
  font-family: var(--type);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.data-row-body {
  display: grid;
  gap: 5px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.data-row-body strong {
  color: var(--ink);
  font-weight: 500;
}
.data-row-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.data-row-editor label {
  display: grid;
  gap: 5px;
}
.data-row-editor textarea.field {
  min-height: 74px;
}
.data-span-2 { grid-column: 1 / -1; }
.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.data-actions .btn {
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-indent: .08em;
}
.data-view-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(45, 39, 58, .46);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .22s ease;
}
.data-view-modal[hidden] { display: none; }
.data-view-modal.show { opacity: 1; }
.data-view-sheet {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--champagne-deep) 58%, var(--hairline));
  border-radius: 6px;
  background: color-mix(in srgb, white 38%, var(--paper));
  box-shadow: 0 28px 90px -36px rgba(31, 25, 44, .72);
  transform: translateY(12px) scale(.985);
  transition: transform .24s ease;
}
.data-view-modal.show .data-view-sheet { transform: translateY(0) scale(1); }
.data-view-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--champagne-deep), var(--iris), var(--sage));
}
.data-view-close {
  position: absolute;
  top: 15px;
  right: 16px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline-soft);
  border-radius: 50%;
  background: color-mix(in srgb, white 48%, var(--paper));
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
}
.data-view-close:hover { border-color: var(--iris); color: var(--iris-deep); }
.data-view-head {
  padding: 28px 64px 22px 28px;
  border-bottom: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 36%, var(--champagne));
}
.data-view-head p {
  margin-bottom: 8px;
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--champagne-deep);
  text-transform: uppercase;
}
.data-view-head h3 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--iris-deep);
}
.data-view-head > span {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.data-view-content { padding: 8px 28px 12px; }
.data-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.data-view-grid > div {
  min-width: 0;
  padding: 15px 12px 14px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.data-view-grid > div:nth-child(even):not(.data-view-wide) { padding-left: 18px; }
.data-view-grid dt {
  margin-bottom: 6px;
  font-family: var(--type);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}
.data-view-grid dd {
  min-width: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.data-view-grid .data-view-wide {
  grid-column: 1 / -1;
  padding-right: 0;
}
.data-view-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 16px 2px 0;
  white-space: nowrap;
}
.data-view-person i { width: 7px; height: 7px; border-radius: 50%; }
.data-view-person small { color: var(--ink-soft); }
.data-view-muted, .data-view-note { color: var(--ink-soft); }
.data-view-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 28px 20px;
}
.data-view-foot .btn { padding: 8px 18px; font-size: 12px; }
@media (max-width: 640px) {
  .data-view-modal { padding: 12px; }
  .data-view-head { padding: 24px 54px 18px 20px; }
  .data-view-head h3 { font-size: 23px; }
  .data-view-content { padding: 6px 20px 10px; }
  .data-view-grid { grid-template-columns: 1fr; }
  .data-view-grid > div:nth-child(even):not(.data-view-wide) { padding-left: 0; }
  .data-view-grid .data-view-wide { grid-column: auto; }
  .data-view-foot { padding: 12px 20px 18px; }
}
.seat-panel { min-height: 620px; }
.seat-planner {
  display: grid;
  grid-template-columns: 300px minmax(680px, 1fr) 320px;
  grid-template-rows: auto minmax(560px, 1fr);
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
  min-width: 1380px;
}
.seat-topbar {
  grid-column: 1 / -1;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
}
.seat-topbar label,
.seat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.seat-topbar .field {
  min-width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--hairline-soft);
}
.seat-topbar .btn { padding: 8px 11px; font-size: 11.5px; }
.seat-left,
.seat-right,
.seat-canvas-wrap {
  min-height: 560px;
  min-width: 0;
}
.seat-left,
.seat-right {
  display: grid;
  align-content: start;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.seat-left {
  overflow: hidden;
}
.seat-block {
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 42%, var(--paper));
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.seat-block h3 {
  font-family: var(--type);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.seat-guest-form,
.seat-guest-import {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.seat-left .field,
.seat-left .btn {
  min-width: 0;
  max-width: 100%;
}
.seat-guest-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  min-width: 0;
}
.seat-guest-page {
  display: grid;
  gap: 8px;
}
.seat-guest-list .data-pagination {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, var(--paper) 94%, white);
}
.seat-guest {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 55%, var(--paper));
  padding: 9px;
  min-width: 0;
}
.seat-guest p {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.seat-guest-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.seat-guest small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.seat-tag-dot {
  width: 9px;
  height: 30px;
  border-radius: 99px;
}
.seat-guest .btn {
  padding: 6px 8px;
  font-size: 11px;
  justify-self: start;
}
.seat-guest-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 16px;
}
.seat-canvas-wrap {
  position: relative;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, white 36%, var(--paper));
  overflow: hidden;
  min-width: 680px;
  z-index: 1;
}
.seat-toolbox {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(6px);
  align-items: center;
}
.seat-toolbox label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
}
.seat-toolbox .field {
  min-width: 94px;
  padding: 6px 8px;
  border: 1px solid var(--hairline-soft);
}
.seat-toolbox .btn {
  padding: 7px 9px;
  font-size: 11px;
}
.seat-canvas {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  cursor: grab;
}
.seat-canvas:active { cursor: grabbing; }
.seat-element rect {
  fill: color-mix(in srgb, var(--sage-wash) 72%, white);
  stroke: var(--sage);
  stroke-width: 2;
}
.seat-element-room rect {
  fill: color-mix(in srgb, white 58%, var(--champagne));
  stroke: color-mix(in srgb, var(--champagne-deep) 78%, var(--ink-soft));
  stroke-width: 3;
  stroke-dasharray: 10 7;
}
.seat-element text {
  font-family: var(--sans);
  font-size: 18px;
  fill: var(--ink);
  pointer-events: none;
}
.seat-element.selected rect,
.seat-table.selected .seat-table-shape {
  stroke: var(--champagne-deep);
  stroke-width: 4;
}
.seat-table .seat-table-shape {
  fill: color-mix(in srgb, white 54%, var(--lilac-wash));
  stroke: var(--iris-deep);
  stroke-width: 2.5;
  filter: drop-shadow(0 8px 12px rgba(60, 53, 84, .14));
}
.seat-table-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  fill: var(--ink);
  pointer-events: none;
}
.seat-table-count {
  font-family: var(--sans);
  font-size: 13px;
  fill: var(--ink-soft);
  pointer-events: none;
}
.seat-guest-line {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  fill: #51436f;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--paper) 88%, transparent);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.seat-guest-label { pointer-events: none; }
.seat-guest-seatno {
  fill: #9b4f69;
}
.seat-guest-name { fill: #51436f; }
.seat-highlight .seat-table-shape {
  animation: seatGlow 1s ease-in-out 3;
}
@keyframes seatGlow {
  0%, 100% { stroke: var(--champagne-deep); filter: drop-shadow(0 0 0 rgba(194, 161, 83, 0)); }
  50% { stroke: #d6a84c; filter: drop-shadow(0 0 12px rgba(214, 168, 76, .9)); }
}
.seat-decor text {
  font-size: 34px;
  fill: var(--champagne-deep);
  opacity: .5;
  pointer-events: none;
}
.seat-popover {
  position: fixed;
  z-index: 1200;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  background: var(--paper);
  box-shadow: 0 24px 80px -38px rgba(0, 0, 0, .5);
  padding: 16px;
}
.seat-pop-close {
  position: absolute;
  right: 8px;
  top: 6px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--ink-soft);
}
.seat-popover h4 {
  font-size: 15px;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.seat-pop-section {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  min-width: 0;
  overflow: visible;
}
.seat-pop-section h5 {
  font-family: var(--type);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.seat-pop-table-row,
.seat-pop-guest-row {
  display: grid;
  align-items: end;
  gap: 8px;
  min-width: 0;
}
.seat-pop-table-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 48%, var(--paper));
}
.seat-pop-guest-row,
.seat-pop-add-edit-row {
  grid-template-columns:
    8px
    minmax(80px, 1.08fr)
    minmax(58px, .72fr)
    minmax(52px, .62fr)
    minmax(70px, .78fr)
    minmax(82px, .92fr)
    minmax(82px, .92fr)
    minmax(76px, .84fr)
    minmax(112px, 1.32fr)
    auto;
  overflow: hidden;
}
.seat-pop-guest-row {
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, white 48%, var(--paper));
}
.seat-pop-add-edit-row {
  display: grid;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid var(--champagne-deep);
  background: color-mix(in srgb, var(--champagne) 18%, var(--paper));
}
.seat-pop-add-edit-row-batch {
  grid-template-columns: 8px minmax(80px, 1.08fr) minmax(58px, .72fr) minmax(52px, .62fr) minmax(70px, .78fr) minmax(82px, .92fr) minmax(82px, .92fr) minmax(76px, .84fr) minmax(112px, 1.32fr);
}
.seat-pop-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px dashed var(--hairline);
  background: color-mix(in srgb, white 32%, var(--paper));
}
.seat-pop-add-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.seat-pop-multi {
  position: relative;
  min-width: 0;
  font-family: var(--sans);
  letter-spacing: 0;
}
.seat-pop-multi > summary {
  display: flex;
  align-items: center;
  min-height: 34px;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
}
.seat-pop-multi > summary::-webkit-details-marker {
  display: none;
}
.seat-pop-multi > summary::after {
  content: "⌄";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  color: var(--ink-soft);
}
.seat-pop-multi > summary > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.seat-pop-multi[open] > summary {
  border-color: var(--champagne-deep);
}
.seat-pop-multi-menu {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  box-shadow: 0 16px 36px -24px rgba(0, 0, 0, .55);
}
.seat-pop-multi-option {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px !important;
  padding: 7px 8px;
  cursor: pointer;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
.seat-pop-multi-option:hover {
  background: color-mix(in srgb, var(--champagne) 18%, transparent);
}
.seat-pop-multi-option[hidden] {
  display: none !important;
}
.seat-pop-multi-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--champagne-deep);
}
.seat-pop-multi-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.seat-pop-multi-option strong,
.seat-pop-multi-option small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.seat-pop-multi-option strong {
  font-weight: 600;
}
.seat-pop-multi-option small,
.seat-pop-multi-empty {
  font-size: 10.5px;
  color: var(--ink-soft);
}
.seat-pop-multi-empty {
  margin: 0;
  padding: 10px 8px;
}
.seat-pop-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.seat-pop-empty,
.seat-mini-list p {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
}
.seat-mini-list span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.seat-pop-dot {
  width: 10px;
  height: 34px;
  border-radius: 99px;
}
.seat-pop-guest-row > .seat-pop-dot,
.seat-pop-add-edit-row > .seat-pop-dot {
  align-self: stretch;
  height: auto;
  min-height: 34px;
}
.seat-pop-guest-row > .seat-pop-dot,
.seat-pop-add-edit-row > .seat-pop-dot {
  width: 100%;
}
.seat-pop-table-row label,
.seat-pop-guest-row label,
.seat-pop-add-edit-row label,
.seat-pop-add-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.seat-pop-table-row .field,
.seat-pop-guest-row .field,
.seat-pop-add-edit-row .field,
.seat-pop-add-row .field {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
}
.seat-pop-guest-row .field,
.seat-pop-add-edit-row .field {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.seat-pop-guest-row .btn,
.seat-pop-add-edit-row .btn,
.seat-pop-add-row .btn {
  padding: 8px 10px;
  font-size: 11px;
}
.seat-pop-guest-row > .btn,
.seat-pop-add-edit-row > .btn {
  min-width: 0;
  align-self: end;
}
.seat-pop-guest-row > .btn,
.seat-pop-add-edit-row > .btn {
  white-space: nowrap;
}
.seat-pop-add-editor {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.seat-pop-add-editor[hidden] {
  display: none;
}
.seat-pop-batch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 780px) {
  .seat-popover {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 14px 12px;
  }
  .seat-pop-table-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seat-pop-guest-row,
  .seat-pop-add-edit-row {
    gap: 3px;
  }
  .seat-pop-guest-row,
  .seat-pop-add-edit-row {
    grid-template-columns: 5px 1.08fr .72fr .62fr .78fr .92fr .92fr .84fr 1.32fr auto;
    padding: 7px 4px;
  }
  .seat-pop-add-edit-row-batch {
    grid-template-columns: 5px 1.08fr .72fr .62fr .78fr .92fr .92fr .84fr 1.32fr;
  }
  .seat-pop-guest-row label,
  .seat-pop-add-edit-row label {
    gap: 2px;
    font-size: 8px;
  }
  .seat-pop-guest-row .field,
  .seat-pop-add-edit-row .field {
    padding: 6px 3px;
    font-size: 10px;
  }
  .seat-pop-guest-row > .btn,
  .seat-pop-add-edit-row > .btn {
    padding: 7px 4px;
    font-size: 9px;
  }
  .seat-pop-add-row {
    grid-template-columns: 1fr;
  }
  .seat-pop-add-row .btn {
    width: 100%;
  }
}
.seat-props-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.seat-right label {
  display: grid;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.seat-mini-list {
  display: grid;
  gap: 6px;
  margin: 4px 0;
}
.seat-mini-list button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--rose);
  font-family: var(--sans);
  font-size: 12px;
}
.data-danger {
  border-color: color-mix(in srgb, var(--rose) 60%, var(--ink));
  color: color-mix(in srgb, var(--rose) 72%, var(--ink));
}
.data-danger:hover {
  background: color-mix(in srgb, var(--rose) 80%, var(--ink));
  border-color: color-mix(in srgb, var(--rose) 80%, var(--ink));
  color: #fff;
}
.data-import-sec {
  border: 1px dashed var(--hairline);
  padding: 16px;
  background: color-mix(in srgb, white 42%, var(--paper));
}

/* ---------- 响应式 ---------- */
@media (max-width: 880px) {
  .motto-left { left: 6px; }
  .motto-right { right: 6px; }
}
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .msg-cols { grid-template-columns: 1fr; gap: 56px; }
  .nav-brand { display: none; }
  .path-item { width: 86%; }
  .data-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-album-shell { min-height: 360px; }
  .gallery-album { width: min(446px, 92vw); }
  .gallery-album.opened,
  .gallery-album.opened:hover {
    transform: translateY(-2px) scale(.94);
  }
  .motto { display: none; }
  .seat-form { flex-direction: column; }
  .seat-form .btn { width: 100%; }
  .data-row-editor,
  .data-tabs,
  .data-metrics { grid-template-columns: 1fr; }
  .roster-table { min-width: 720px; }
  .chapter { padding: 64px 0; }
  .path-item { width: 100%; }
  .path-item:nth-child(even) .path-node { flex-direction: row; text-align: left; }
  .path-item:nth-child(even) .path-detail > p {
    border-right: 0;
    border-left: 2px solid color-mix(in srgb, var(--rose) 45%, transparent);
    padding-right: 0;
    padding-left: 12px;
  }
  .path-item:nth-child(even) .path-time::before { float: none; margin-left: 0; margin-right: 6px; }
  .path-line, .path-star { display: none; }
  .path-items { border-left: 1px dashed var(--rose-soft); padding-left: 14px; }
}

@media print {
  .nav, .admin-fab, .admin, .scroll-cue, .toast, .lb, .progress, .film-sound, .orn, .path-star, .totop, .music-btn, .gate { display: none !important; }
}


/* ════════ 升级 · 动态请柬画框 ════════ */
.film {
  position: relative;
  margin: 0 auto;
  width: min(420px, 84vw, calc((100svh - 300px) * 0.75));
  border-radius: 999px 999px 22px 22px;
  background: var(--cream);
  box-shadow:
    0 24px 60px -28px rgba(75, 65, 102, .45),
    0 6px 22px -10px rgba(75, 65, 102, .25);
  transform-style: preserve-3d;
  will-change: transform;
}
.film::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid color-mix(in srgb, var(--iris-deep) 45%, transparent);
  border-radius: 999px 999px 30px 30px;
  pointer-events: none;
}
.film::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid color-mix(in srgb, var(--champagne) 75%, transparent);
  border-radius: 999px 999px 25px 25px;
  pointer-events: none;
}
.film-video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: inherit;
}
.film-open {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: zoom-in;
}
.film-open:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }
.film-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(3px);
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
  z-index: 2;
}
.film-sound:hover { transform: scale(1.08); background: var(--cream); }
.film-sound:active { transform: scale(.94); }
.film-sound svg { width: 22px; height: 22px; }
.film-sound .snd-on { display: none; }
.film-sound[aria-pressed="true"] .snd-on { display: block; }
.film-sound[aria-pressed="true"] .snd-off { display: none; }
.film-star {
  position: absolute;
  color: var(--champagne);
  animation: twinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}
.film-star-tl { width: 20px; height: 20px; top: 4%; left: -34px; }
.film-star-br { width: 16px; height: 16px; bottom: 10%; right: -32px; animation-delay: 1.4s; }
@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.82) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.06) rotate(14deg); }
}

/* ════════ 升级 · 顶部阅读进度 ════════ */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--champagne), var(--rose));
  z-index: 60;
  transition: width .12s linear;
}

/* ════════ 升级 · 导航当前章节 ════════ */
.nav-links a.active {
  color: var(--iris-deep);
  border-color: var(--iris);
}

/* ════════ 升级 · 流程节点可展开 ════════ */
.path-node {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.path-node:focus-visible { outline: 2px solid var(--iris); outline-offset: 6px; border-radius: 10px; }
.path-more {
  margin-left: 8px;
  display: inline-block;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--rose);
  border-bottom: 1.6px solid var(--rose);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s ease;
}
.path-item.open .path-more { transform: rotate(225deg) translateY(-1px); }
.path-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.32,.8,.35,1), opacity .4s ease, margin .45s ease;
  margin-top: 0;
}
.path-item.open .path-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}
.path-detail > p {
  overflow: hidden;
  min-height: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-soft);
  border-left: 2px solid color-mix(in srgb, var(--rose) 45%, transparent);
  padding-left: 12px;
}

/* ════════ 升级 · 小集卡片可展开 ════════ */
.fair-card { cursor: pointer; transition: transform .35s ease, box-shadow .35s ease; }
.fair-card:hover { transform: translateY(-4px); }
.fair-card:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }
.fair-card .fair-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.32,.8,.35,1), opacity .4s ease, margin .45s ease;
}
.fair-card.open .fair-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}
.fair-card .fair-detail > p {
  overflow: hidden;
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  border-top: 1px dashed color-mix(in srgb, var(--iris) 40%, transparent);
  padding-top: 10px;
}
.fair-hint {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--rose);
  opacity: .75;
  transition: opacity .3s;
}
.fair-card.open .fair-hint { opacity: 0; }

/* ════════ 升级 · 灯箱 ════════ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: color-mix(in srgb, var(--night-deep) 88%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.lb.show { opacity: 1; }
.lb[hidden] { display: none; }
.lb-stage {
  max-width: min(560px, 92vw);
  max-height: 86svh;
  margin: 0;
  text-align: center;
  animation: lbIn .45s cubic-bezier(.3,.9,.35,1.05) both;
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.lb-video .lb-stage video {
  display: block;
  max-width: 100%;
  max-height: 86svh;
  border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.lb-photo .lb-stage img {
  display: block;
  max-width: 100%;
  max-height: 78svh;
  border-radius: 12px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  background: var(--cream);
}
.lb-photo .lb-stage figcaption {
  margin-top: 14px;
  color: var(--cream);
  font-size: 14px;
  letter-spacing: .12em;
  opacity: .9;
}
.lb-counter {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .24em;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}
.lb-photo .lb-stage.turn-next { animation: photoTurnNext .42s ease both; }
.lb-photo .lb-stage.turn-prev { animation: photoTurnPrev .42s ease both; }
@keyframes photoTurnNext {
  0% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
  48% { opacity: .12; transform: perspective(900px) rotateY(-12deg) translateX(-28px); }
  52% { opacity: .12; transform: perspective(900px) rotateY(10deg) translateX(28px); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
}
@keyframes photoTurnPrev {
  0% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
  48% { opacity: .12; transform: perspective(900px) rotateY(12deg) translateX(28px); }
  52% { opacity: .12; transform: perspective(900px) rotateY(-10deg) translateX(-28px); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
}
.lb-close {
  position: absolute;
  top: 18px; right: 20px;
  width: 42px; height: 42px;
  border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 17px;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.lb-close:hover { background: color-mix(in srgb, var(--cream) 16%, transparent); transform: rotate(90deg); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border: 1px solid color-mix(in srgb, var(--cream) 35%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s;
}
.lb-nav:hover { background: color-mix(in srgb, var(--cream) 16%, transparent); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
@media (max-width: 560px) {
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ════════ 升级 · 相册可点击提示 ════════ */
.gallery-grid figure { cursor: zoom-in; transition: transform .35s ease; }
.gallery-grid figure:hover { transform: translateY(-3px); }

/* ════════ 升级 · 进场动效（模糊到清晰 + 子元素错峰） ════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.25,.8,.3,1), filter .9s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.25,.8,.3,1);
}
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: .05s; }
.stagger.in > *:nth-child(2) { transition-delay: .15s; }
.stagger.in > *:nth-child(3) { transition-delay: .25s; }
.stagger.in > *:nth-child(4) { transition-delay: .35s; }
.stagger.in > *:nth-child(5) { transition-delay: .45s; }
.stagger.in > *:nth-child(6) { transition-delay: .55s; }
.stagger.in > *:nth-child(7) { transition-delay: .65s; }
.stagger.in > *:nth-child(8) { transition-delay: .75s; }

/* ════════ 升级 · 章节星芒呼吸 ════════ */
.chapter-head .spark { animation: twinkle 4.2s ease-in-out infinite; }

/* ════════ 减少动态偏好 ════════ */
@media (prefers-reduced-motion: reduce) {
  .film, .film-star, .chapter-head .spark { animation: none; }
  .reveal, .stagger > * { opacity: 1; transform: none; filter: none; transition: none; }
  .progress { transition: none; }
  #windPath { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}


/* ════════ 升级二 · 首屏环境星光 ════════ */
.hero-star {
  position: absolute;
  color: var(--champagne);
  animation: twinkle 4.6s ease-in-out infinite;
  pointer-events: none;
}
.hs-a { width: 18px; height: 18px; top: 14%; left: 12%; }
.hs-b { width: 12px; height: 12px; top: 22%; right: 14%; animation-delay: 1.6s; }
.hs-c { width: 14px; height: 14px; bottom: 16%; left: 18%; animation-delay: 3s; }
@media (max-width: 720px) { .hs-a { left: 6%; } .hs-b { right: 7%; } .hs-c { display: none; } }

/* ════════ 升级二 · 故事卡可点开 ════════ */
.story-card[data-more] { cursor: pointer; transition: transform .35s ease, box-shadow .35s ease; }
.story-card[data-more]:hover { transform: translateY(-4px); }
.story-card[data-more]:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }
.story-more-hint {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--rose);
  opacity: .75;
}
.story-sheet {
  position: relative;
  width: min(460px, 92vw);
  background: var(--cream);
  padding: 46px 40px 42px;
  text-align: center;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55);
}
.story-sheet::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.story-sheet .mini-spark { display: block; margin: 0 auto 14px; color: var(--champagne-deep); width: 14px; height: 14px; }
.story-sheet-year {
  font-family: var(--script);
  font-size: 40px;
  color: var(--rose);
  line-height: 1.1;
  margin-bottom: 6px;
}
.story-sheet-title {
  font-size: 17px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
  margin-bottom: 18px;
}
.story-sheet-text {
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--ink-soft);
  text-align: left;
}

/* ════════ 升级二 · 倒计时数字翻动 ════════ */
.cd-line b { display: inline-block; }
.cd-line b.tick { animation: numTick .5s cubic-bezier(.3,.9,.4,1); }
@keyframes numTick {
  0% { opacity: 0; transform: translateY(-9px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════ 升级二 · 祝福墙便签 ════════ */
.msg-item { transition: transform .3s ease; }
.msg-item:nth-child(odd) { transform: rotate(-.7deg); }
.msg-item:nth-child(even) { transform: rotate(.6deg); }
.msg-item:hover { transform: rotate(0) translateY(-2px); }
.msg-item.pop { animation: msgPop .6s cubic-bezier(.3,1.2,.4,1) both; }
@keyframes msgPop {
  0% { opacity: 0; transform: translateY(14px) rotate(-2deg) scale(.96); }
  100% { opacity: 1; transform: translateY(0) rotate(-.7deg) scale(1); }
}

/* ════════ 升级二 · 座位卡盖章感 ════════ */
.seat-card.stamp { animation: stampIn .55s cubic-bezier(.25,1.25,.4,1) both; }
@keyframes stampIn {
  0% { opacity: 0; transform: scale(1.18) rotate(1.6deg); }
  60% { opacity: 1; transform: scale(.97) rotate(-.4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ════════ 升级二 · 回到顶部（月亮） ════════ */
.totop {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(3px);
  color: var(--champagne-deep);
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, background .25s;
}
.totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ════════ 背景音乐控制按钮 ════════ */
.music-btn {
  position: fixed;
  left: 18px;
  bottom: 74px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(3px);
  color: var(--champagne-deep);
  cursor: pointer;
  z-index: 51;
  transition: background .25s, transform .25s, box-shadow .3s;
}
.music-btn:hover { background: var(--cream); transform: translateY(-2px); }
.music-btn:active { transform: scale(.94); }
.music-btn:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }
.music-btn.playing {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--champagne) 20%, transparent);
}
/* 播放时显示跳动均衡条，隐藏静音图标 */
.music-btn .music-off-icon { width: 22px; height: 22px; display: block; }
.music-btn .eq { display: none; align-items: flex-end; gap: 2.5px; height: 18px; }
.music-btn.playing .eq { display: flex; }
.music-btn.playing .music-off-icon { display: none; }
.music-btn .eq i {
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  animation: eqBounce 1s ease-in-out infinite;
}
.music-btn .eq i:nth-child(1) { height: 7px;  animation-delay: 0s; }
.music-btn .eq i:nth-child(2) { height: 16px; animation-delay: .22s; }
.music-btn .eq i:nth-child(3) { height: 11px; animation-delay: .44s; }
.music-btn .eq i:nth-child(4) { height: 18px; animation-delay: .12s; }
@keyframes eqBounce {
  0%, 100% { transform: scaleY(.4); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .music-btn .eq i { animation: none; transform: scaleY(.8); }
}
.totop:hover { background: var(--cream); }
.totop svg { width: 22px; height: 22px; }

/* ════════ 升级二 · 章节花线 ════════ */
.chapter-head::after {
  content: "";
  display: block;
  width: 132px;
  height: 12px;
  margin: 18px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 12'%3E%3Cline x1='2' y1='6' x2='52' y2='6' stroke='%23d2ba85' stroke-width='1'/%3E%3Cpath d='M66,0.5 C67,4.2 69.8,5 73,6 C69.8,7 67,7.8 66,11.5 C65,7.8 62.2,7 59,6 C62.2,5 65,4.2 66,0.5 Z' fill='%23d2ba85'/%3E%3Cline x1='80' y1='6' x2='130' y2='6' stroke='%23d2ba85' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .cover, .hero-star { animation: none !important; }
  .film { transform: none !important; }
  .cd-line b.tick, .msg-item.pop, .seat-card.stamp { animation: none; }
}


/* ════════ 升级三 · 引路星 ════════ */
.path-star {
  position: absolute;
  left: 30%; top: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  color: var(--champagne-deep);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
}
.path-star.on { opacity: 1; }
.path-star svg {
  width: 100%; height: 100%;
  display: block;
  animation: starPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--champagne) 90%, transparent));
}
.path-star-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--champagne) 45%, transparent), transparent 70%);
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes starPulse {
  0%, 100% { transform: scale(.92) rotate(0deg); }
  50% { transform: scale(1.1) rotate(18deg); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* 星星走到哪，哪一站点亮 */
.path-item .doodle {
  transition: border-color .6s ease, box-shadow .6s ease, transform .6s ease;
}
.path-item.lit .doodle {
  border-color: color-mix(in srgb, var(--champagne-deep) 70%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--champagne) 22%, transparent),
    0 8px 20px -8px color-mix(in srgb, var(--champagne-deep) 55%, transparent);
  transform: scale(1.05);
}
.path-time { transition: color .5s ease; }
.path-time::before {
  content: "\2726";
  display: inline-block;
  margin-right: 6px;
  color: var(--champagne-deep);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s ease, transform .5s cubic-bezier(.3,1.4,.4,1);
}
.path-item.lit .path-time::before { opacity: 1; transform: scale(1); }
.path-item:nth-child(even) .path-time::before { margin-right: 0; margin-left: 6px; float: right; }

/* ════════ 升级三 · 两侧垂坠星链 ════════ */
.orn {
  position: fixed;
  top: -8px;
  z-index: 5;
  color: var(--iris);
  opacity: .55;
  pointer-events: none;
  display: none;
}
.orn-left { left: clamp(14px, 3.2vw, 56px); }
.orn-right { right: clamp(14px, 3.2vw, 56px); }
.orn-slide { display: flex; gap: 14px; align-items: flex-start; will-change: transform; }
.orn-right .orn-slide { flex-direction: row-reverse; }
.orn .dangle {
  transform-origin: 50% 0;
  animation: sway 6.5s ease-in-out infinite;
  color: var(--champagne-deep);
}
.orn .dangle.d2 { color: var(--iris); animation-duration: 7.8s; animation-delay: 1.1s; }
.orn .dangle.d3 { animation-duration: 5.8s; animation-delay: 2.2s; }
@keyframes sway {
  0%, 100% { transform: rotate(2.4deg); }
  50% { transform: rotate(-2.4deg); }
}
@media (min-width: 1180px) { .orn { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .path-star { display: none; }
  .orn .dangle { animation: none; }
  .path-star svg, .path-star-glow { animation: none; }
}


/* ════════ 升级四 · 完整小路 + 已走亮线 ════════ */
#windPathDone {
  stroke: var(--champagne-deep);
  stroke-width: 3.4px;
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .95;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--champagne) 80%, transparent));
}

/* ════════ 升级四 · 流程区夜尘星屑 ════════ */
.dust {
  position: absolute;
  bottom: 6%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--champagne-deep);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--champagne) 65%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: dustRise 11s linear infinite;
}
.du1 { left: 8%;  animation-duration: 12s; }
.du2 { left: 24%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: 2.5s; }
.du3 { left: 46%; animation-duration: 10s; animation-delay: 5s; }
.du4 { left: 64%; width: 4px; height: 4px; animation-duration: 14s; animation-delay: 1.2s; }
.du5 { left: 82%; animation-duration: 12.5s; animation-delay: 6.4s; }
.du6 { left: 93%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: 3.8s; }
@keyframes dustRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .85; }
  55%  { transform: translateY(-46vh) translateX(10px); opacity: .5; }
  100% { transform: translateY(-86vh) translateX(-6px); opacity: 0; }
}

/* ════════ 升级四 · 日期块侧星与流光 ════════ */
.daterow { position: relative; }
.date-star {
  color: var(--champagne-deep);
  animation: twinkle 3.8s ease-in-out infinite;
  align-self: flex-start;
}
.ds-l { width: 14px; height: 14px; margin-right: 6px; margin-top: -4px; }
.ds-r { width: 11px; height: 11px; margin-left: 6px; align-self: flex-end; margin-bottom: -2px; animation-delay: 1.7s; }
.datebig { position: relative; overflow: hidden; }
.datebig::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--champagne) 38%, transparent), transparent);
  animation: sheen 6.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 72% { left: -70%; }
  88%, 100% { left: 130%; }
}

/* ════════ 升级四 · 页脚月亮摇坠 ════════ */
.foot-orn {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--champagne-deep);
}
.foot-orn .cradle {
  transform-origin: 40px 0;
  animation: sway 7s ease-in-out infinite;
}

/* ════════ 升级四 · SCROLL 提示呼吸 ════════ */
.scroll-cue { animation: cueBreath 3s ease-in-out infinite; }
@keyframes cueBreath {
  0%, 100% { opacity: .55; letter-spacing: .34em; }
  50% { opacity: 1; letter-spacing: .42em; }
}

/* ════════ 升级四 · 按钮流光掠过 ════════ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-12deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .dust, .date-star, .datebig::after, .foot-orn .cradle, .scroll-cue, .btn::after { animation: none; }
  .dust { display: none; }
  #windPathDone { display: none; }
}


/* ════════ 启封仪式 · 星星漆印信封 ════════ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 700px at 50% 30%, #564b78, transparent 75%),
    var(--night-deep);
  transition: opacity 1.25s cubic-bezier(.4, 0, .2, 1);
}
.gate[hidden] { display: none; }
.gate.away { opacity: 0; pointer-events: none; }

.gate-bgstar {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--champagne) 55%, transparent);
  animation: twinkle 4.5s ease-in-out infinite;
}
.gb1 { top: 16%; left: 20%; }
.gb2 { top: 24%; right: 18%; width: 3px; height: 3px; animation-delay: 1.2s; }
.gb3 { bottom: 26%; left: 14%; animation-delay: 2.4s; }
.gb4 { bottom: 18%; right: 24%; width: 5px; height: 5px; animation-delay: .7s; }
.gb5 { top: 44%; left: 8%; width: 3px; height: 3px; animation-delay: 3.2s; }

.env-wrap {
  perspective: 1000px;
  text-align: center;
  animation: coverIn 1.1s ease both;
}
.env {
  position: relative;
  display: block;
  width: min(520px, 88vw);
  aspect-ratio: 1.56 / 1;
  border: 1px solid rgba(76, 66, 82, .28);
  border-radius: 2px;
  background: #f7f0e5;
  box-shadow:
    0 38px 90px -36px rgba(0, 0, 0, .72),
    0 12px 32px -16px rgba(0, 0, 0, .48),
    inset 0 0 0 5px rgba(255,255,255,.2);
  cursor: pointer;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  transition: transform .45s ease;
  animation: envFloat 6.5s ease-in-out infinite;
}
.env::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(105, 87, 113, .11);
  pointer-events: none;
  z-index: 8;
}
.env:hover { transform: translateY(-4px); }
.env:focus-visible { outline: 2px solid var(--champagne); outline-offset: 6px; }
@keyframes envFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.env-liner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 23%, rgba(183,154,91,.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 70%, rgba(111,91,126,.045) 0 1px, transparent 1.5px),
    #f8f2e8;
  background-size: 23px 21px, 29px 27px, auto;
  z-index: 0;
}
/* 下方口袋与左右折面，比例按真实西式婚礼信封构造 */
.env-pocket {
  position: absolute;
  inset: 0;
  background: #f3eadc;
  clip-path: polygon(0 100%, 0 46%, 50% 73%, 100% 46%, 100% 100%);
  z-index: 2;
}
.env-pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(76,66,82,.12);
}
.env-fold {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #f6eee2;
}
.env-fold-left {
  clip-path: polygon(0 12%, 51% 65%, 0 100%);
  filter: brightness(.99);
}
.env-fold-right {
  clip-path: polygon(100% 12%, 49% 65%, 100% 100%);
  filter: brightness(1.015);
}
/* 封盖 */
.env-flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background: #efe4d5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .65s cubic-bezier(.45,.05,.35,1);
  backface-visibility: hidden;
  z-index: 3;
  border-bottom: 1px solid rgba(76,66,82,.17);
  filter: drop-shadow(0 2px 1px rgba(74,55,38,.08));
}
.gate.open .env-flap { transform: rotateX(-178deg); }
/* 星星漆印 */
.seal {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 66px; height: 66px;
  margin: -33px 0 0 -33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  background:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, white 28%, transparent), transparent 55%),
    radial-gradient(circle at 50% 50%, #cda14e, #a87f33 78%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, .35),
    inset 0 -3px 6px rgba(80, 55, 10, .45),
    0 4px 12px -4px rgba(0, 0, 0, .5);
  z-index: 4;
  transition: transform .45s ease, opacity .45s ease;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 248, 224, .4);
  inset: 6px;
}
.seal svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 1px 1px rgba(80, 55, 10, .5));
  animation: twinkle 3.6s ease-in-out infinite;
}
.gate.open .seal { transform: scale(1.3) rotate(18deg); opacity: 0; }
/* 信封署名 */
.env-names {
  position: absolute;
  left: 0; right: 0;
  bottom: 8.5%;
  font-family: var(--script);
  font-size: clamp(20px, 5vw, 26px);
  color: var(--rose);
  z-index: 3;
  pointer-events: none;
}
.gate.open .env { animation: envOut .8s ease .3s both; }
@keyframes envOut {
  to { opacity: 0; transform: scale(.9) translateY(10px); }
}
.gate.open .env-wrap .gate-hint { opacity: 0; }
.gate-hint {
  margin-top: 26px;
  font-family: var(--type);
  font-size: 12.5px;
  letter-spacing: .32em;
  color: #1f1c27;
  animation: cueBreath 3.2s ease-in-out infinite;
  transition: opacity .4s;
}
.gate-skip {
  position: absolute;
  right: 22px;
  bottom: 20px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .18em;
  cursor: pointer;
  padding: 8px 10px;
  transition: color .3s;
}
.gate-skip:hover { color: var(--cream); }

/* 启封烟花：升空、爆点、扩散环与星屑 */
.burst { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.bstar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s, 14px);
  height: var(--s, 14px);
  background: var(--star-img) center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 246, 224, .85)) drop-shadow(0 0 11px rgba(255, 224, 180, .45));
  will-change: transform, opacity;
  animation: starFly var(--dur, 1.8s) cubic-bezier(.12,.78,.32,1) var(--delay, 0s) both;
}
.fspark {
  position: absolute;
  width: 4px;
  height: 13px;
  margin: -6px 0 0 -2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 9px 2px currentColor;
  transform-origin: 50% 100%;
  animation: fireworkFly var(--fdur, 1.45s) cubic-bezier(.12,.65,.2,1) var(--fdelay, 0s) both;
}
.fring {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 8px currentColor);
  animation: fireworkRing 1.05s ease-out var(--fdelay, 0s) both;
}
.fflash {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff8df;
  box-shadow: 0 0 16px 7px currentColor, 0 0 42px 14px currentColor;
  opacity: 0;
  animation: fireworkFlash .55s ease-out var(--fdelay, 0s) both;
}
@keyframes fireworkFly {
  0% { transform: translate(0, 0) rotate(var(--fa, 0deg)) scaleY(.25); opacity: 0; }
  10% { opacity: 1; }
  68% { transform: translate(var(--fx), var(--fy)) rotate(var(--fa, 0deg)) scaleY(1); opacity: 1; }
  100% { transform: translate(var(--fx), calc(var(--fy) + 34px)) rotate(var(--fa, 0deg)) scaleY(.35); opacity: 0; }
}
@keyframes fireworkRing {
  0% { transform: scale(.08); opacity: 0; }
  18% { opacity: .9; }
  100% { transform: scale(var(--fr, 8)); opacity: 0; }
}
@keyframes fireworkFlash {
  0% { transform: scale(.2); opacity: 0; }
  22% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(.45); opacity: 0; }
}
@keyframes starFly {
  0%   { transform: translate(-50%, -50%) scale(.15) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--sc, 1)) rotate(var(--rot, 200deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx) * 1.12), calc(-50% + var(--dy) * 1.12 + 40px)) scale(calc(var(--sc, 1) * .7)) rotate(calc(var(--rot, 200deg) + 40deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .env, .gate-hint, .seal svg, .gate-bgstar { animation: none; }
  .bstar { display: none; }
  .fspark { height: 7px; animation-duration: .7s; }
  .fring { animation-duration: .65s; }
  .env-flap, .gate { transition-duration: .2s; }
}

/* 启封期间：完全藏起主页内容，仅留信封遮罩 */
/* 启封期间：主页内容透明隐藏，仅留信封遮罩；撤掉 gate-on 后柔和淡入（与夜幕淡出重叠） */
body.gate-on { overflow: hidden; }
body.gate-on > *:not(.gate):not(script) {
  opacity: 0;
  visibility: hidden;
}
body > *:not(.gate):not(script) {
  transition: opacity 1.15s cubic-bezier(.4, 0, .2, 1);
}

/* 独立座位与后台页面 */
body.invitation-page #seating { display: none; }
body.operations-page > *:not(.nav):not(#seating):not(#dataAdmin):not(#seatPopover):not(#dataViewModal):not(.toast):not(script) { display: none !important; }
body.operations-page {
  min-height: 100vh;
  background: var(--paper);
}
body.operations-page .nav { position: sticky; top: 0; }
body.operations-page #seating {
  display: block;
  min-height: calc(100vh - 64px);
  padding-top: 88px;
}
body.operations-page #seating .spark { display: none; }