/* ═══════════════════════════════════════════════════════════
   新疆婚礼设计系统 · XINJIANG WEDDING DESIGN SYSTEM v3
   ───────────────────────────────────────────────────────────
   01 TOKENS    设计变量（夜宴香槟色谱）
   02 RESET     基础重置 + RTL 规范
   03 PATTERN   纹样（巴旦木 / 八角星 / 艾德莱斯扎染）
   04 HOME      首页
   05 LETTER    邀请函
   06 RSVP      出席回执
   07 PANEL     数据看板
   08 MOTION    动效
   09 ADAPT     移动端适配
   ═══════════════════════════════════════════════════════════ */

/* ─── 01 · TOKENS ─────────────────────────────────────────── */
:root{
  /* 夜宴香槟色谱 · Quiet Luxury —— 低饱和，去土黄去大红 */
  --c-red:#A6313C;      --c-red-dp:#7A1F2B;
  --c-blue:#16283A;
  --c-teal:#7FA89F;
  --c-gold:#C9A96F;     --c-gold-lt:#E4CDA0;  --c-gold-pale:#F6EAD2;
  --c-cream:#F2EAE0;
  --c-ink:#F2EAE0;      --c-ink-soft:rgba(242,234,224,.50);
  --c-night:#140F10;    --c-night-2:#1F1518;
  --c-accent:#D9BE8C;   --c-accent-dp:#B89B6A;

  /* 发丝金线 —— 高级感核心：1px 细线，不用粗金边 */
  --hair:rgba(217,190,140,.20);
  --hair-s:rgba(217,190,140,.10);

  /* 字体族：维吾尔文优先本地字体 → 系统阿拉伯字体 → 通用回退 */
  --f-ug:"ALKATIP Tor","ALKATIP Tor Tom","UKIJ Qara","UKIJ Tuz","UKIJ Tuz Tom",
         "Microsoft Uighur","MicrosoftUighur","UKIJ Nasq","UKIJ Kitab",
         "Noto Naskh Arabic","Amiri","Scheherazade New","Alpida",
         "Geeza Pro","Al Bayan","Arabic Typesetting","Tahoma",serif;
  --f-ug-dis:"UKIJ Tuz Tom","ALKATIP Tor Tom","UKIJ Nasq","UKIJ Tuz",
             "Microsoft Uighur","Noto Naskh Arabic","Amiri",serif;
  --f-cn:"PingFang SC","WenQuanYi Micro Hei","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-s:6px; --r-m:14px; --r-l:22px; --r-xl:30px;
  --e-silk:cubic-bezier(.22,.85,.28,1);
  --e-back:cubic-bezier(.34,1.4,.64,1);
}

/* ─── 02 · RESET + RTL ────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--f-ug);background:var(--c-night);color:var(--c-cream);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}

/* ★ 维吾尔文禁止 letter-spacing：会切断阿拉伯字母连字，文字散架 */
.ug{font-family:var(--f-ug);letter-spacing:0 !important;direction:rtl}
.ug-dis{font-family:var(--f-ug-dis);letter-spacing:0 !important;direction:rtl}
.cn{font-family:var(--f-cn)}
[lang="zh"],.cn-block{direction:ltr;text-align:center}

/* ─── 03 · PATTERN ────────────────────────────────────────── */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.bg-atlas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,rgba(166,49,60,.15),transparent 62%),
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(30,58,82,.26),transparent 65%),
    linear-gradient(170deg,#1C1416 0%,#140F10 45%,#101318 100%);
}
/* 艾德莱斯扎染波纹 */
.bg-atlas::after{
  content:"";position:absolute;inset:-10%;
  background:repeating-linear-gradient(102deg,
    rgba(217,190,140,.045) 0px,rgba(217,190,140,.045) 3px,
    transparent 3px,transparent 22px);
  filter:url(#atlasDye);opacity:.75;
}
/* 八角星底纹（伊斯兰几何） */
.bg-star{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><g fill='none' stroke='%23D9BE8C' stroke-width='1'><path d='M36 8 L46 26 L64 26 L50 38 L56 56 L36 45 L16 56 L22 38 L8 26 L26 26 Z'/></g></svg>");
  background-size:72px 72px;
}
.glow{position:fixed;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
.glow-1{width:260px;height:260px;top:-70px;right:-80px;background:rgba(166,49,60,.26)}
.glow-2{width:220px;height:220px;bottom:8%;left:-70px;background:rgba(217,190,140,.15)}

/* ─── 04 · HOME ───────────────────────────────────────────── */
.page{position:relative;z-index:2;min-height:100dvh;display:flex;
  flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 30px) var(--s5) calc(env(safe-area-inset-bottom) + 34px)}

.crown{width:120px;height:34px;margin-bottom:var(--s4);animation:dropIn 1s var(--e-back) both}
.eyebrow{
  font-size:12px;color:var(--c-gold-lt);opacity:.85;letter-spacing:0;
  padding:5px 18px;border:1px solid var(--hair-s);border-radius:99px;
}
.h-title{
  margin-top:var(--s5);font-size:40px;line-height:1.35;font-weight:700;
  background:linear-gradient(178deg,#F6EAD2 0%,#E4CDA0 38%,#C9A96F 72%,#9A8050 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(201,169,111,.28));
  animation:dropIn .9s var(--e-back) .1s both;
}
.h-sub{margin-top:var(--s2);font-size:12px;color:rgba(242,234,224,.5);letter-spacing:5px}

/* 倒计时 */
.countdown{
  margin-top:var(--s5);display:flex;align-items:flex-end;justify-content:center;gap:var(--s4);
  animation:dropIn .9s var(--e-back) .16s both;
}
.cd-u{text-align:center;min-width:46px}
.cd-n{
  font-family:var(--f-cn);font-size:26px;font-weight:700;line-height:1.1;
  background:linear-gradient(178deg,#F6EAD2,#E4CDA0 45%,#C9A96F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cd-l{margin-top:5px;font-size:10px;color:rgba(242,234,224,.42);letter-spacing:2px}
.cd-sep{font-size:18px;color:rgba(217,190,140,.34);padding-bottom:16px;line-height:1}
.cd-done{
  margin-top:var(--s5);text-align:center;font-size:14px;color:var(--c-gold-lt);
  letter-spacing:0;padding:9px 20px;border:1px solid var(--hair-s);border-radius:99px;
}

/* 新人名字 */
.couple{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s5);
  animation:dropIn .9s var(--e-back) .2s both}
.cp{text-align:center;min-width:98px}
.cp-role{font-size:12px;color:var(--c-gold);opacity:.85;letter-spacing:0}
.cp-name{margin-top:var(--s2);font-size:30px;font-weight:700;color:var(--c-cream);
  text-shadow:0 2px 16px rgba(0,0,0,.6);letter-spacing:0}
.cp-cn{margin-top:5px;font-size:11px;color:rgba(242,234,224,.45);letter-spacing:2px}
.badam-div{width:34px;height:34px;flex:none;animation:breathe 3.6s ease-in-out infinite}

/* 合照（首页 + 邀请函共用） */
.l-couple{margin-top:var(--s6);width:100%;max-width:400px}
.lc-frame{
  position:relative;width:100%;aspect-ratio:1/1.16;overflow:hidden;
  border-radius:50% 50% 16px 16px / 34% 34% 5% 5%;
  border:1.5px solid var(--c-accent);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.14);
  background-image:
    repeating-linear-gradient(100deg,
      rgba(166,49,60,.24) 0px,rgba(166,49,60,.24) 14px,
      rgba(201,169,111,.16) 14px,rgba(201,169,111,.16) 26px,
      rgba(30,58,82,.26) 26px,rgba(30,58,82,.26) 40px),
    linear-gradient(160deg,#2A1F22,#3A2C26);
  background-size:200% 100%,100% 100%;
  animation:dropIn .8s var(--e-back) both;
}
.lc-frame img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  position:relative;z-index:1}
.lc-frame::after{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path d='M30 3 C 47 15, 57 38, 30 57 C 3 38, 13 15, 30 3 Z' fill='none' stroke='%23F6EAD2' stroke-width='2.2' opacity='.55'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.lc-tag{
  position:absolute;top:38%;z-index:4;padding:5px 11px;border-radius:99px;
  background:rgba(20,15,16,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(217,190,140,.30);
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25;
}
.lc-tag.r{right:12px}
.lc-tag.l{left:12px}
.lc-tag span{font-size:11px;color:var(--c-gold-lt);letter-spacing:0}
.lc-tag b{font-size:9px;color:rgba(242,234,224,.7);letter-spacing:2px;font-weight:400}
.lc-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:36px var(--s4) var(--s4);
  background:linear-gradient(180deg,transparent,rgba(18,12,14,.72) 42%,rgba(18,12,14,.93));
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
}
.lc-bar-side{text-align:center;min-width:0;flex:1}
.lc-name{font-size:20px;font-weight:700;color:var(--c-gold-pale);letter-spacing:0;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-name-cn{margin-top:2px;font-size:10px;color:rgba(242,234,224,.62);letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-bar svg{width:20px;height:20px;flex:none;opacity:.85}
.lc-mask{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,rgba(20,15,16,.28),rgba(20,15,16,.5))}
.lc-mask span{font-size:12px;color:rgba(242,234,224,.8);letter-spacing:0}
.lc-mask b{font-size:11px;color:#F6EAD2;font-family:var(--f-cn);letter-spacing:2px;font-weight:400}

/* 首页版：收窄 + 隐藏名字条 */
.home-couple{max-width:236px;margin-top:var(--s6)}
.home-couple .lc-bar{display:none}
.home-couple .lc-tag{top:46%}

/* 相册 */
.album{margin-top:var(--s6);width:100%;max-width:290px;height:330px;
  position:relative;perspective:1200px;animation:dropIn .9s var(--e-back) .3s both}
.ph{
  position:absolute;inset:0;border-radius:var(--r-l);overflow:hidden;
  border:1.5px solid rgba(217,190,140,.40);
  box-shadow:0 20px 55px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .95s var(--e-silk),opacity .95s var(--e-silk);
  background-image:
    repeating-linear-gradient(100deg,
      rgba(166,49,60,.26) 0px,rgba(166,49,60,.26) 16px,
      rgba(201,169,111,.16) 16px,rgba(201,169,111,.16) 30px,
      rgba(30,58,82,.28) 30px,rgba(30,58,82,.28) 48px),
    linear-gradient(150deg,#241A1C,#33262A 55%,#16283A);
  background-size:200% 100%,100% 100%;
}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-mask{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s3);
  background:linear-gradient(180deg,rgba(20,15,16,.34),rgba(20,15,16,.70))}
.ph-mask svg{width:48px;height:48px;opacity:.6}
.ph-mask span{font-size:13px;color:rgba(242,234,224,.62);letter-spacing:0}
.ph-tag{position:absolute;bottom:12px;right:12px;left:12px;text-align:center;
  font-size:11px;color:rgba(242,234,224,.55);letter-spacing:2px}
.dots{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(217,190,140,.26);transition:.4s}
.dot.on{width:22px;border-radius:3px;background:var(--c-gold-lt)}

/* 输入 */
.form{margin-top:var(--s6);width:100%;max-width:320px;animation:dropIn .9s var(--e-back) .4s both}
.lbl{text-align:center;font-size:14px;color:rgba(242,234,224,.72);letter-spacing:0;margin-bottom:var(--s3)}
.lbl small{display:block;margin-top:4px;font-size:11px;color:rgba(242,234,224,.38);letter-spacing:1px}
.field{position:relative}
.field svg{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:18px;height:18px;opacity:.5}
input#nick{
  width:100%;padding:16px 46px 16px 18px;font-size:17px;text-align:right;
  font-family:var(--f-ug);letter-spacing:0;
  background:rgba(242,234,224,.05);color:var(--c-cream);
  border:1px solid var(--hair);border-radius:var(--r-m);outline:none;transition:.3s;
}
input#nick::placeholder{color:rgba(242,234,224,.30);letter-spacing:0}
input#nick:focus{border-color:rgba(228,205,160,.60);background:rgba(217,190,140,.08);
  box-shadow:0 0 0 3px rgba(217,190,140,.10)}
.btn-main{
  margin-top:var(--s4);width:100%;padding:16px;font-size:17px;font-weight:700;letter-spacing:0;
  font-family:var(--f-ug);color:#1B1417;border-radius:var(--r-m);
  background:linear-gradient(120deg,#F6EAD2,#E4CDA0 30%,#C9A96F 62%,#A58A5C);
  box-shadow:0 8px 26px rgba(201,169,111,.20);transition:transform .2s;
}
.btn-main:active{transform:scale(.975)}
.btn-main small{display:block;margin-top:3px;font-size:10px;letter-spacing:2px;opacity:.62}
.msg{margin-top:var(--s3);min-height:20px;text-align:center;font-size:13px;color:#E37C6E;letter-spacing:0}
.hint{margin-top:var(--s5);text-align:center;font-size:11px;color:rgba(242,234,224,.34);line-height:2.1;letter-spacing:0}
.hint b{color:var(--c-gold);font-weight:400}
.home-foot{margin-top:auto;padding-top:var(--s6);text-align:center;font-size:11px;color:rgba(242,234,224,.26);letter-spacing:1px}

/* ─── 05 · LETTER ─────────────────────────────────────────── */
.letter-wrap{width:100%;max-width:400px;animation:unroll 1.05s var(--e-silk) both}
.card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;color:var(--c-ink);
  background:
    linear-gradient(178deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 52%,rgba(255,255,255,.028)),
    linear-gradient(180deg,#22171B 0%,#181013 58%,#1B1417 100%);
  border:1px solid var(--hair);
  box-shadow:0 26px 64px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
/* 噪点质感：消解数字渐变的塑料感 */
.card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.card>*{position:relative;z-index:1}
.card-tape{height:26px;background:
  repeating-linear-gradient(100deg,
    rgba(166,49,60,.62) 0px,rgba(166,49,60,.62) 9px,
    rgba(201,169,111,.58) 9px,rgba(201,169,111,.58) 17px,
    rgba(30,58,82,.62) 17px,rgba(30,58,82,.62) 26px);
  filter:url(#atlasDye);opacity:.85}
.card-body{padding:var(--s6) var(--s5) var(--s7)}

.l-bismi{text-align:center;font-size:20px;color:var(--c-accent);letter-spacing:0;opacity:.9}
.l-title{margin-top:var(--s3);text-align:center;font-size:34px;font-weight:700;
  letter-spacing:0;color:var(--c-accent)}
.l-title-cn{margin-top:6px;text-align:center;font-size:11px;color:var(--c-ink-soft);letter-spacing:6px}
.divider{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0}
.divider i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(217,190,140,.38),transparent)}
.divider svg{width:20px;height:20px;flex:none;opacity:.75}

.guest{text-align:center;margin:var(--s5) 0}
.guest-lbl{font-size:12px;color:var(--c-ink-soft);letter-spacing:0}
.guest-name{margin-top:var(--s2);display:inline-block;font-size:34px;font-weight:700;
  letter-spacing:2px;font-family:var(--f-cn);color:var(--c-accent);
  padding:2px 20px 6px;border-bottom:2px solid rgba(217,190,140,.30)}
.guest-honor{margin-top:var(--s3);font-size:14px;color:var(--c-ink);letter-spacing:0}
.guest-honor em{font-style:normal;color:var(--c-accent);font-weight:600}
.guest-cn{margin-top:3px;font-size:11px;color:var(--c-ink-soft);letter-spacing:2px}

.l-body{margin-top:var(--s5);font-size:17px;line-height:2.25;text-align:center;
  color:var(--c-ink);letter-spacing:0;padding:0 var(--s2)}
.l-body-cn{margin-top:var(--s4);font-size:12px;line-height:2.1;color:var(--c-ink-soft);
  letter-spacing:1px;text-align:center}

.info{margin-top:var(--s5);border-top:1px dashed var(--hair);padding-top:var(--s5)}
.info-row{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.info-ico{width:26px;height:26px;flex:none;margin-top:2px;opacity:.8}
.info-k{font-size:12px;color:var(--c-ink-soft);letter-spacing:0;min-width:52px;margin-top:2px}
.info-v{flex:1;font-size:15px;color:var(--c-ink);line-height:1.9;letter-spacing:0}
.info-v b{color:var(--c-accent);font-weight:700}
.info-v-cn{display:block;margin-top:2px;font-size:11px;color:var(--c-ink-soft);letter-spacing:1px}

.flow{margin-top:var(--s5);border-top:1px dashed var(--hair);padding-top:var(--s5)}
.flow-t{text-align:center;font-size:13px;color:var(--c-ink-soft);letter-spacing:0;margin-bottom:var(--s4)}
.flow-item{display:flex;gap:var(--s3);position:relative;padding-bottom:var(--s5)}
.flow-item:last-child{padding-bottom:0}
.flow-item::before{content:"";position:absolute;top:22px;right:11px;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(217,190,140,.30),rgba(217,190,140,.13))}
.flow-item:last-child::before{display:none}
.fi-dot{width:23px;height:23px;flex:none;border-radius:50%;z-index:1;
  background:linear-gradient(140deg,#E4CDA0,#B89B6A);
  border:2px solid #22171B;box-shadow:0 0 0 1px rgba(217,190,140,.30);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#1B1417;font-family:var(--f-cn)}
.fi-name{font-size:15px;font-weight:700;color:var(--c-ink);letter-spacing:0}
.fi-time{margin-top:2px;font-size:12px;color:var(--c-accent);letter-spacing:0}
.fi-cn{margin-top:1px;font-size:10px;color:var(--c-ink-soft);letter-spacing:1px}
.fi-note{margin-top:var(--s2);display:inline-block;padding:3px 10px;border-radius:99px;
  font-size:10px;letter-spacing:0;background:rgba(127,168,159,.12);color:var(--c-teal);
  border:1px solid rgba(127,168,159,.28)}
.fi-note.alt{background:rgba(166,49,60,.10);color:#C4787F;border-color:rgba(217,190,140,.26)}

.l-sign{margin-top:var(--s6);text-align:center}
.l-sign-wish{font-size:16px;color:var(--c-accent);letter-spacing:0}
.l-sign-cn{margin-top:4px;font-size:11px;color:var(--c-ink-soft);letter-spacing:2px}
.l-sign-from{margin-top:var(--s5);font-size:14px;color:var(--c-ink);letter-spacing:0;line-height:2}
.l-seal{position:absolute;left:26px;bottom:26px;width:60px;height:60px;
  border:2px solid rgba(217,190,140,.40);border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;transform:rotate(-11deg);
  color:rgba(217,190,140,.48);font-size:12px;line-height:1.35;text-align:center;letter-spacing:0}

.acts{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3);width:100%;max-width:400px}
.btn-ghost{
  padding:14px;font-size:14px;letter-spacing:0;border-radius:var(--r-m);
  border:1px solid var(--hair);color:var(--c-gold-lt);
  background:rgba(255,255,255,.03);transition:.25s;font-family:var(--f-ug);
}
.btn-ghost:active{background:rgba(217,190,140,.12)}
.btn-ghost small{font-family:var(--f-cn);letter-spacing:2px}

/* ─── 06 · RSVP ───────────────────────────────────────────── */
.rsvp{
  margin-top:var(--s5);width:100%;max-width:400px;border-radius:var(--r-l);
  padding:var(--s5) var(--s4);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(217,190,140,.06));
  border:1px solid var(--hair-s);backdrop-filter:blur(10px);
}
.rsvp-t{text-align:center;font-size:14px;color:var(--c-gold-lt);letter-spacing:0}
.rsvp-t small{display:block;margin-top:4px;font-size:10px;color:rgba(242,234,224,.40);
  letter-spacing:2px;font-family:var(--f-cn)}
.rsvp-btns{margin-top:var(--s4);display:flex;gap:var(--s3)}
.rsvp-btn{flex:1;padding:13px;border-radius:var(--r-m);font-size:14px;letter-spacing:0;
  border:1px solid var(--hair);color:var(--c-gold-lt);background:rgba(255,255,255,.03);
  transition:.25s;font-family:var(--f-ug)}
.rsvp-btn small{display:block;margin-top:2px;font-size:9px;letter-spacing:1px;
  font-family:var(--f-cn);opacity:.7}
.rsvp-btn:active{transform:scale(.97)}
.rsvp-btn.yes.on{background:linear-gradient(120deg,#E4CDA0,#C9A96F);color:#1B1417;border-color:transparent}
.rsvp-btn.no.on{background:rgba(242,234,224,.10);color:rgba(242,234,224,.55)}
.rsvp-form{margin-top:var(--s4);display:none;animation:dropIn .4s var(--e-silk)}
.rsvp-form.on{display:block}
.rf-row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.rf-lbl{font-size:12px;color:rgba(242,234,224,.55);letter-spacing:0;min-width:56px;flex:none}
.rf-steps{display:flex;gap:6px;flex:1}
.rf-n{flex:1;padding:9px 0;text-align:center;font-size:13px;font-family:var(--f-cn);
  border:1px solid var(--hair);border-radius:var(--r-s);color:rgba(242,234,224,.65);
  background:rgba(255,255,255,.02);transition:.2s;cursor:pointer}
.rf-n.on{background:rgba(217,190,140,.18);border-color:rgba(217,190,140,.5);color:var(--c-gold-pale)}
.rf-input,.rf-area{width:100%;padding:11px 13px;font-size:14px;border-radius:var(--r-s);
  background:rgba(255,255,255,.03);border:1px solid var(--hair);
  color:var(--c-ink);outline:none;transition:.25s;font-family:var(--f-cn)}
.rf-area{min-height:66px;resize:none;line-height:1.7;margin-bottom:var(--s3)}
.rf-input:focus,.rf-area:focus{border-color:rgba(228,205,160,.5);background:rgba(217,190,140,.06)}
.rf-input::placeholder,.rf-area::placeholder{color:rgba(242,234,224,.25)}
.rsvp-submit{margin-top:var(--s2);width:100%;padding:13px;border-radius:var(--r-m);
  font-size:14px;font-weight:700;letter-spacing:0;font-family:var(--f-ug);
  color:#1B1417;background:linear-gradient(120deg,#F6EAD2,#E4CDA0 40%,#C9A96F)}
.rsvp-submit:active{transform:scale(.98)}
.rsvp-submit:disabled{opacity:.55}
.rsvp-done{text-align:center;padding:var(--s4) 0}
.rsvp-done-ico{width:46px;height:46px;margin:0 auto var(--s3)}
.rsvp-done b{display:block;font-size:15px;color:var(--c-gold-pale);letter-spacing:0}
.rsvp-done small{display:block;margin-top:6px;font-size:11px;color:rgba(242,234,224,.45);
  letter-spacing:1px;font-family:var(--f-cn);line-height:1.9}
.rsvp-redo{margin-top:var(--s3);font-size:11px;color:rgba(242,234,224,.40);
  letter-spacing:1px;font-family:var(--f-cn);text-decoration:underline;
  display:block;width:100%;text-align:center}

/* ─── 07 · PANEL 数据看板 ─────────────────────────────────── */
.panel{position:relative;z-index:2;max-width:900px;margin:0 auto;
  padding:26px var(--s5) 60px}
.panel h2{font-size:20px;color:var(--c-gold-lt);text-align:center;letter-spacing:0}
.panel-sub{margin-top:6px;font-size:11px;color:rgba(242,234,224,.40);text-align:center;letter-spacing:1px}
.stats{margin-top:var(--s5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.stat{padding:var(--s4);border-radius:var(--r-m);background:rgba(255,255,255,.04);
  border:1px solid var(--hair-s);text-align:center}
.stat b{display:block;font-size:26px;font-weight:700;color:var(--c-gold-pale);
  font-family:var(--f-cn);line-height:1.2}
.stat span{display:block;margin-top:5px;font-size:10px;color:rgba(242,234,224,.42);letter-spacing:1px;font-family:var(--f-cn)}
.pbar{margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-m);
  background:rgba(255,255,255,.04);border:1px solid var(--hair-s)}
.pbar-t{display:flex;justify-content:space-between;font-size:11px;color:rgba(242,234,224,.5);font-family:var(--f-cn)}
.pbar-track{margin-top:var(--s2);height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.pbar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#C9A96F,#E4CDA0);transition:width .8s var(--e-silk)}
.tools{margin-top:var(--s5);display:flex;gap:var(--s2);flex-wrap:wrap}
.tool{padding:9px 16px;border-radius:99px;font-size:12px;font-family:var(--f-cn);
  border:1px solid var(--hair);color:rgba(242,234,224,.65);background:rgba(255,255,255,.03);transition:.2s}
.tool.on{background:rgba(217,190,140,.18);color:var(--c-gold-pale);border-color:rgba(217,190,140,.45)}
.tool.primary{background:linear-gradient(120deg,#E4CDA0,#C9A96F);color:#1B1417;border-color:transparent;font-weight:600}
.search{margin-top:var(--s4);display:flex;gap:var(--s2)}
.search input{flex:1;padding:11px 15px;border-radius:99px;font-size:13px;font-family:var(--f-cn);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--c-ink);outline:none}
.search input::placeholder{color:rgba(242,234,224,.28)}
.search button{padding:11px 20px;border-radius:99px;font-size:12px;font-family:var(--f-cn);
  background:rgba(217,190,140,.16);color:var(--c-gold-pale);border:1px solid rgba(217,190,140,.35)}
.tbl{margin-top:var(--s4);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--hair-s)}
.tbl table{width:100%;border-collapse:collapse;font-family:var(--f-cn)}
.tbl th{padding:12px var(--s3);font-size:11px;color:rgba(242,234,224,.45);
  background:rgba(255,255,255,.03);text-align:right;font-weight:400;letter-spacing:1px}
.tbl td{padding:12px var(--s3);font-size:12px;color:rgba(242,234,224,.78);
  border-top:1px solid rgba(217,190,140,.07);text-align:right;vertical-align:top}
.tbl td.nm{color:var(--c-gold-pale);font-weight:600}
.tbl .wish{color:rgba(242,234,224,.5);max-width:220px;line-height:1.7}
.badge{padding:3px 10px;border-radius:99px;font-size:11px}
.badge.y{background:rgba(217,190,140,.18);color:var(--c-gold-lt)}
.badge.n{background:rgba(242,234,224,.08);color:rgba(242,234,224,.45)}
.empty{margin-top:var(--s6);padding:var(--s7) var(--s4);text-align:center;
  font-size:12px;color:rgba(242,234,224,.35);line-height:2;font-family:var(--f-cn)}
.pager{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center;font-family:var(--f-cn)}
.pager a,.pager span{padding:7px 13px;border-radius:var(--r-s);font-size:12px;
  border:1px solid var(--hair);color:rgba(242,234,224,.6)}
.pager .cur{background:rgba(217,190,140,.16);color:var(--c-gold-pale)}
.backlink{margin-top:var(--s5);text-align:center;font-size:11px;color:rgba(242,234,224,.35);font-family:var(--f-cn)}
.backlink a{color:var(--c-gold-lt);text-decoration:underline}

/* ─── 08 · MOTION ─────────────────────────────────────────── */
.dust{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dust i{position:absolute;top:-12px;width:4px;height:4px;border-radius:50%;
  background:var(--c-gold-lt);opacity:0;box-shadow:0 0 8px rgba(228,205,160,.9);
  animation:fall linear infinite}
@keyframes fall{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.6)}
  12%{opacity:.85}
  100%{opacity:0;transform:translateY(104dvh) translateX(var(--dx)) scale(1)}
}
@keyframes dropIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes unroll{0%{opacity:0;transform:translateY(40px) scaleY(.72)}
  60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}

.toast{position:fixed;left:50%;bottom:16%;transform:translate(-50%,20px);
  padding:12px 22px;border-radius:99px;font-size:13px;letter-spacing:0;
  background:rgba(20,15,16,.94);color:var(--c-gold-lt);
  border:1px solid var(--hair);z-index:99;opacity:0;pointer-events:none;
  transition:.35s var(--e-silk);max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ─── 09 · ADAPT ──────────────────────────────────────────── */
@media (max-width:360px){
  .h-title{font-size:33px}
  .cp-name{font-size:26px}
  .guest-name{font-size:29px}
  .album{max-width:250px;height:290px}
  .couple{gap:var(--s4)}
  .lc-frame{aspect-ratio:1/1.08}
  .lc-name{font-size:17px}
  .lc-tag{top:34%;padding:4px 9px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:430px){ .album{max-width:320px;height:360px} }
@media (max-width:640px){
  .tbl{overflow-x:auto}
  .tbl table{min-width:620px}
}
@supports not (min-height:100dvh){.page{min-height:100vh}}