/* =========================================================
   喜迎国庆 · 云端献礼 — 样式
   视觉参考：Obsidian 设计提示词库
   （GlowHorizon 发光地平线 / InkReveal 墨迹 / SiriWave 波纹 /
     液态金属流转边框 / 星图粒子 / 底部导航规范）
   ========================================================= */
:root{
  --red:#a5121a; --red-deep:#6d0a10; --red-dark:#3d060a;
  --gold:#f5c451; --gold-bright:#ffe08a; --gold-deep:#c8952b;
  --cream:#fdf6ec; --ink:#3a2420; --card:#fffdf8;
  --angle:0deg;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--red-dark); color:var(--ink);
  display:flex; justify-content:center; min-height:100vh;
}
.stage-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(245,196,81,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 100%, rgba(165,18,26,.35), transparent 65%),
    linear-gradient(180deg,#2a0407 0%, #3d060a 55%, #2a0407 100%);
}
.app{
  position:relative; z-index:1; width:100%; max-width:480px;
  background:var(--cream); box-shadow:0 0 60px rgba(0,0,0,.55);
  overflow:hidden; min-height:100vh;
}

/* ---------- 顶部阅读进度（anime.onScroll 驱动） ---------- */
.progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:70;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0); transform-origin:left center; pointer-events:none;
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  background:
    radial-gradient(700px 340px at 50% 0%, #c01a22 0%, transparent 70%),
    linear-gradient(180deg,#8f0f16 0%, #6d0a10 55%, #4a070c 100%);
  color:var(--gold-bright); overflow:hidden;
  /* 底部留出渐隐区的高度，正文不被渐隐层压住 */
  padding:0 24px 200px;
}
/* AI 生成底图 + 文字可读性遮罩（图片缺失时自动隐藏） */
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.62}
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(74,7,12,.52) 0%, rgba(61,6,10,.30) 42%, rgba(43,4,7,.86) 100%);
}
/* 有 AI 底图时：隐藏手绘剪影（避免与画面里的建筑重复），并让底图更通透 */
.hero.has-bg .skyline{display:none}
.hero.has-bg .hero-bg{opacity:.82}
.hero.has-bg .hero-veil{
  background:linear-gradient(180deg, rgba(74,7,12,.60) 0%, rgba(61,6,10,.26) 45%, rgba(43,4,7,.88) 100%);
}
#starfield,#fireworks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
#starfield{opacity:.55}
.hero-inner{position:relative; z-index:5}

/* GlowHorizon · 发光地平线（三层光晕，bottom 变体） */
.glow-horizon{position:absolute; left:0; right:0; bottom:0; height:190px; overflow:hidden; pointer-events:none; z-index:3}
.glow-horizon i{position:absolute; left:-15%; width:130%; border-radius:50%; display:block}
.glow-horizon .l1{bottom:-118px; height:210px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,243,207,.60), rgba(255,243,207,.18) 45%, transparent 72%)}
.glow-horizon .l2{bottom:-132px; height:230px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(245,196,81,.50), rgba(245,196,81,.14) 48%, transparent 74%)}
.glow-horizon .l3{bottom:-158px; height:260px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(109,10,16,.75), rgba(61,6,10,.35) 50%, transparent 78%)}

/* 剪影下沿渐隐，融进晨光，避免在米白区留下一道硬边黑块 */
.skyline{
  position:absolute; bottom:-2px; left:0; width:100%; opacity:.95; pointer-events:none; z-index:4;
  -webkit-mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 72%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 72%,transparent 96%);
}
.hero-emblem{
  width:74px;height:74px;border-radius:50%; margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;font-size:40px;
  background:radial-gradient(circle at 35% 30%, #ffe08a, #f5c451 45%, #c8952b 100%);
  box-shadow:0 0 34px rgba(245,196,81,.55), inset 0 -4px 10px rgba(139,90,10,.35);
  position:relative; z-index:3;
}
.hero-emblem i{font-style:normal; font-size:40px; line-height:1}
.hero-emblem img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(245,196,81,.5))}
/* 用生成的金徽章后，去掉底衬圆让它自然呈现 */
.hero-emblem.has-img{background:none; box-shadow:none}
.hero-emblem.has-img i{display:none}
.hero-title{
  font-size:44px; font-weight:800; letter-spacing:6px; line-height:1.25;
  background:linear-gradient(180deg,#fff3cf 20%, #ffe08a 45%, #f0b53e 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 6px 30px rgba(245,196,81,.25);
}
.hero-sub{margin-top:14px; font-size:16px; letter-spacing:10px; color:#ffd98a; opacity:.9}
.hero-org{margin-top:32px; font-size:12.5px; letter-spacing:2px; color:rgba(255,224,138,.7)}
.hero-meta{margin-top:8px; font-size:12.5px; color:rgba(255,224,138,.55); letter-spacing:1px}
.scroll-hint{
  position:absolute; bottom:170px; left:50%; transform:translateX(-50%); z-index:6;
  color:rgba(255,224,138,.85); font-size:12px; letter-spacing:3px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-hint .arrow{width:1px;height:32px;background:linear-gradient(180deg,rgba(255,224,138,.9),transparent);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}

/* ================= 通用区块 ================= */
.section{padding:48px 20px 28px; position:relative}
.sec-head{margin-bottom:2px}
.sec-index{
  display:inline-block; font-size:13px; font-weight:700; color:var(--red);
  border:1.5px solid var(--red); border-radius:999px; padding:2px 10px; letter-spacing:1px;
}
.sec-title{font-size:23px; font-weight:800; color:var(--red-deep); letter-spacing:1px; margin-top:8px}
/* InkReveal · 墨迹笔触（canvas 绘制） */
/* ---------- 假期配图轮播 ---------- */
.holiday-stack{
  position:relative; width:100%; aspect-ratio:16 / 10; border-radius:16px; overflow:hidden;
  margin:0 0 16px; box-shadow:0 8px 22px rgba(109,10,16,.16);
  background:linear-gradient(135deg,#f7ead9,#fdf6ec);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 92%,transparent 100%);
}
.holiday-stack .ha{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.holiday-stack .ha.on{opacity:1; animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.06)}}
.ha-dots{
  position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3;
}
.ha-dots i{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.35s ease;
}
.ha-dots i.on{width:18px; border-radius:3px; background:var(--gold)}

/* ---------- 文本框：聚焦浮起 + 金色光标 + 字数进度条 ---------- */
.msg-form{transition:transform .3s ease, box-shadow .3s ease}
.msg-form.focus{transform:translateY(-3px); box-shadow:0 12px 28px rgba(109,10,16,.16)}
.msg-form.focus::before{filter:drop-shadow(0 0 7px rgba(245,196,81,.6))}
.msg-form textarea{caret-color:#c8952b}
.char-bar{
  height:3px; border-radius:2px; background:rgba(165,18,26,.10);
  margin-top:6px; overflow:hidden;
}
.char-bar i{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,#a5121a,#e0a03c);
  transition:width .2s ease, background .3s ease;
}
.msg-form.near .char-bar i{background:linear-gradient(90deg,#d0432c,#c0242c)}

/* 标题下的书法飘带（SVG 描边书写 + 末端墨点） */
.brush{display:block; width:200px; height:26px; margin:6px 0 12px; overflow:visible}
.brush .ib{fill:none; stroke-linecap:round}
.brush .main{stroke:url(#inkGrad); stroke-width:6.5}
.brush .dry{stroke:#a5121a; stroke-width:2; opacity:.45}
.brush .gold{stroke:#c8952b; stroke-width:1.4; opacity:.5}
.brush .id{fill:#a5121a}
.ink-defs{position:absolute; width:0; height:0; overflow:hidden}
.sec-desc{font-size:14px; color:#8a6a5c; line-height:1.8; margin:8px 0 20px}

/* GlowHorizon · 分隔光带（top 变体） */
.glowline{position:relative; height:56px; margin:14px 0; overflow:hidden}
.glowline i{
  position:absolute; left:-5%; width:110%; top:-40px; height:110px; border-radius:50%;
  background:radial-gradient(50% 62% at 50% 100%, rgba(245,196,81,.32), rgba(200,149,43,.10) 55%, transparent 76%);
}
.glowline::after{
  content:''; position:absolute; left:12%; right:12%; bottom:16px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(165,18,26,.45), rgba(245,196,81,.6), rgba(165,18,26,.45), transparent);
}

/* ---------- 通道卡片 ---------- */
.lanes{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lane{
  background:var(--card); border-radius:18px; padding:18px 14px;
  box-shadow:
    0 2px 4px rgba(109,10,16,.05),
    0 10px 24px rgba(109,10,16,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(200,149,43,.28);
  text-decoration:none; color:inherit; display:block; position:relative; overflow:hidden;
}
.lane:active{transform:scale(.97)}
.lane .ico{
  font-size:30px; margin-bottom:8px; display:block; transform-origin:50% 60%;
  width:34px; height:34px; position:relative;
}
.lane .ico i{font-style:normal; font-size:30px; line-height:34px; display:block}
.lane .ico img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.lane .ico.has-img i{display:none}
.lane h3{font-size:15.5px; color:var(--red-deep); font-weight:700; margin-bottom:4px}
.lane p{font-size:12px; color:#9a7a6a; line-height:1.6}
/* 进入视口时一道金色斜光扫过卡片 */
.lane::after{
  content:''; position:absolute; top:-40%; left:-70%; width:45%; height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,236,180,.85), transparent);
  transform:rotate(18deg); pointer-events:none; opacity:0;
}
.lane.shine::after{animation:laneShine 1.05s ease-out forwards}
@keyframes laneShine{
  0%{opacity:0; left:-70%}
  25%{opacity:.95}
  100%{opacity:0; left:130%}
}

/* ================= 板块一 · 照片 ================= */
.upload-box{
  position:relative; overflow:hidden;
  border:2px dashed rgba(165,18,26,.4); border-radius:18px; background:#fff;
  padding:24px 16px; text-align:center; cursor:pointer; display:block; transition:.2s;
}
.upload-box:active{background:#fff5f5}
.upload-box .big{font-size:32px; display:block; transform-origin:50% 60%;
  width:44px; height:44px; margin:0 auto; position:relative}
.upload-box .big i{font-style:normal; font-size:32px; line-height:44px; display:block; text-align:center}
.upload-box .big img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.upload-box .big.has-img i{display:none}
/* 选中/拖拽时的脉冲光环 */
.upload-box.pulse::before{
  content:''; position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  border:2px solid rgba(245,196,81,.9);
  animation:uploadPulse 1.2s ease-out infinite;
}
@keyframes uploadPulse{
  0%{opacity:.9; transform:scale(1)}
  100%{opacity:0; transform:scale(1.04)}
}
.upload-box h4{margin-top:6px; color:var(--red-deep); font-size:15px}
.upload-box p{font-size:12px; color:#9a7a6a; margin-top:4px; line-height:1.6}
#photoInput{display:none}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.photo-grid .ph{
  position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#f3d9b8,#e8b98a);
  box-shadow:0 3px 10px rgba(109,10,16,.12);
}
.photo-grid img{width:100%; height:100%; object-fit:cover; display:block}
.photo-grid .demo{position:relative; display:flex; align-items:center; justify-content:center; font-size:26px;
  background:linear-gradient(135deg,#c01a22,#f5c451)}
.photo-grid .demo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* 板块配图 / 分享海报（AI 生成素材位） */
.wide-art{
  display:block; width:100%; border-radius:16px; margin:0 0 16px;
  box-shadow:0 8px 22px rgba(109,10,16,.18);
}
/* （旧海报样式已由文件末尾的新版 .poster-* 取代） */
.submit-tip{
  margin-top:14px; font-size:12px; color:#a0785f; background:#fff7e8;
  border:1px solid rgba(200,149,43,.35); border-radius:12px; padding:10px 12px; line-height:1.7;
}

/* ---------- 按钮 ---------- */
.btn{
  display:block; width:100%; border:none; cursor:pointer; margin-top:14px;
  background:linear-gradient(180deg,#d0242c,#a5121a); color:#ffe8b0;
  font-size:15.5px; font-weight:700; letter-spacing:3px; padding:14px; border-radius:14px;
  box-shadow:
    0 2px 5px rgba(165,18,26,.22),
    0 8px 20px rgba(165,18,26,.32),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.btn:active{transform:scale(.97)}
.btn.gold{
  background:linear-gradient(180deg,#f0b53e,#c8952b); color:#5a3a08;
  box-shadow:
    0 2px 5px rgba(200,149,43,.24),
    0 8px 20px rgba(200,149,43,.34),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-small{
  border:none; cursor:pointer; padding:9px 22px; border-radius:999px;
  background:linear-gradient(180deg,#d0242c,#a5121a); color:#ffe8b0;
  font-size:13.5px; font-weight:700; letter-spacing:2px;
}
.btn-small.gold{background:linear-gradient(180deg,#f0b53e,#c8952b); color:#5a3a08}

/* 液态金属流转边框 */
.liquid{position:relative; border-radius:18px}
.liquid::before{
  content:''; position:absolute; inset:-1.5px; border-radius:19px; z-index:0;
  background:conic-gradient(from var(--angle),
    #f5c451 0%, #fff3cf 12%, #c8952b 26%, #a5121a 42%, #d0242c 55%, #f5c451 70%, #fff3cf 86%, #f5c451 100%);
  opacity:.92;
}
.liquid::after{
  content:''; position:absolute; inset:1.5px; border-radius:17px; background:var(--card); z-index:0;
}
.liquid > *{position:relative; z-index:1}

/* ================= 板块二 · 留言墙 ================= */
.msg-form{padding:16px; box-shadow:0 6px 20px rgba(109,10,16,.08)}
.msg-form textarea{
  width:100%; height:84px; border:none; outline:none; resize:none;
  font-size:15px; line-height:1.8; font-family:inherit; color:var(--ink); background:transparent;
}
.msg-form textarea::placeholder{color:#c4a795}
.msg-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.count{font-size:12px; color:#b09280}
.count.warn{color:#c0242c}

/* SiriWave · 声波条 */
.siri-wrap{margin:2px 0 18px; border-radius:16px; overflow:hidden; background:#2a0407;
  box-shadow:0 6px 18px rgba(109,10,16,.18); position:relative}
.siri-wrap canvas{display:block; width:100%; height:78px}
.siri-wrap .siri-tip{
  position:absolute; left:14px; bottom:8px; font-size:11px; letter-spacing:2px;
  color:rgba(255,224,138,.7); pointer-events:none;
}

.wall{margin-top:8px; display:flex; flex-direction:column; gap:10px}
.msg{
  position:relative; background:var(--card); border-radius:14px; padding:13px 14px 10px;
  /* 三层阴影：近距定型 + 远距氛围 + 顶部内高光，卡片更有纸质立体感 */
  box-shadow:
    0 1px 2px rgba(109,10,16,.05),
    0 6px 16px rgba(109,10,16,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
  border-left:4px solid var(--gold);
}
.msg:nth-child(3n){border-left-color:#c01a22}
.msg:nth-child(4n){border-left-color:#d4691e}
.msg p{font-size:14.5px; line-height:1.75; color:#4a3028}
.msg .meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.msg .name{font-size:12px; color:#b09280}
.like{border:none; background:none; cursor:pointer; font-size:13px; color:#c0785f;
  display:flex; align-items:center; gap:4px; padding:4px 6px}
.like.liked{color:#c0242c; font-weight:700}
.wall-more{text-align:center; font-size:12px; color:#b09280; margin-top:14px}

/* ================= 板块三 · 打卡 ================= */
.checkin-list{display:flex; flex-direction:column; gap:12px}
.checkin{
  background:var(--card); border-radius:16px; overflow:hidden;
  box-shadow:
    0 1px 2px rgba(109,10,16,.05),
    0 6px 16px rgba(109,10,16,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.checkin .ci-body{padding:13px 15px}
.checkin .tag{display:inline-block; font-size:11px; color:var(--red); background:rgba(165,18,26,.08);
  border-radius:999px; padding:3px 10px; margin-bottom:8px; letter-spacing:1px}
.checkin p{font-size:14px; line-height:1.75; color:#4a3028}
.checkin .name{font-size:12px; color:#b09280; margin-top:8px}

/* ================= 答题 ================= */
.quiz-card{padding:20px 16px; box-shadow:0 6px 20px rgba(109,10,16,.08)}
.quiz-q{font-size:16px; font-weight:700; color:var(--red-deep); line-height:1.7; margin-bottom:16px}
.quiz-opts{display:flex; flex-direction:column; gap:10px}
.opt{
  border:1.5px solid rgba(165,18,26,.25); background:#fff; border-radius:12px;
  padding:12px 14px; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit;
}
.opt:active{transform:scale(.98)}
.opt.correct{border-color:#1d9e55; background:#eafaf1; color:#14683a; font-weight:700}
.opt.wrong{border-color:#c0242c; background:#fdf0f0; color:#a01218}
.opt:disabled{cursor:default}
.quiz-progress{display:flex; gap:5px; margin-bottom:14px}
.quiz-progress i{flex:1; height:4px; border-radius:2px; background:rgba(165,18,26,.15)}
.quiz-progress i.done{background:var(--red)}
.quiz-result{text-align:center; padding:14px 0 6px; display:none}
.quiz-result .score{font-size:46px; font-weight:800; color:var(--red)}
.quiz-result .word{margin-top:8px; font-size:14px; color:#8a6a5c; line-height:1.8}

/* ================= 底部导航（Bottom Navigation） =================
   注意：这里不能用 transform:translateX(-50%) 居中 ——
   入场动画由 anime 写 transform:translateY()，会整个覆盖 transform 导致导航偏位。
   改用 left/right + margin:auto 居中，与 transform 解耦。 */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto;
  width:100%; max-width:480px; z-index:60; display:flex;
  background:rgba(255,253,248,.94); backdrop-filter:blur(14px);
  border-top:1px solid rgba(200,149,43,.35);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 20px rgba(61,6,10,.18);
}
.bottom-nav::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,196,81,.7), transparent);
}
.nav-item{
  flex:1; border:none; background:none; cursor:pointer; padding:7px 0 9px;
  display:flex; flex-direction:column; align-items:center; gap:2px; color:#b09280;
  position:relative; z-index:1;
}
.nav-item .ico{
  font-size:19px; line-height:1; display:block;
  width:24px; height:24px; position:relative;
}
.nav-item .ico i{font-style:normal; font-size:19px; line-height:24px; display:block; text-align:center}
.nav-item .ico img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:grayscale(1) opacity(.55); transition:filter .25s ease;
}
.nav-item .ico.has-img i{display:none}
.nav-item.on .ico img{filter:none}
.nav-item .lb{font-size:10.5px; letter-spacing:1px}
/* 选中态：滑动的金色发光药丸（由 anime 驱动，比伪元素过渡更稳） */
.nav-pill{
  position:absolute; top:3px; left:0; width:16.666%; height:34px; border-radius:999px;
  background:radial-gradient(circle at 50% 40%, rgba(245,196,81,.55), rgba(245,196,81,0) 72%);
  pointer-events:none; z-index:0;
}
.nav-item.on{color:var(--red); font-weight:700}
.nav-ind{
  position:absolute; top:0; left:0; width:16.666%; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
  box-shadow:0 0 8px rgba(245,196,81,.75);
}

/* ================= 页脚 ================= */
footer{
  background:linear-gradient(180deg,#6d0a10,#3d060a); color:rgba(255,224,138,.75);
  padding:38px 24px 96px; text-align:center; font-size:12.5px; line-height:2.1; letter-spacing:1px;
  position:relative;
}
footer .f-title{font-size:15px; color:var(--gold); letter-spacing:4px; margin-bottom:10px; font-weight:700}
/* 页脚小国旗图标（加载失败自动回退 emoji） */
footer .f-ico{
  display:inline-block; width:20px; height:20px; margin-right:6px;
  vertical-align:-4px; position:relative;
}
footer .f-ico i{font-style:normal; font-size:16px; line-height:20px}
footer .f-ico img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
footer .f-ico.has-img i{display:none}

footer .rule{width:44px; height:1px; background:rgba(245,196,81,.4); margin:14px auto}

/* toast */
.toast{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px);
  background:rgba(40,10,10,.93); color:#ffe8b0; font-size:13.5px; letter-spacing:1px;
  padding:11px 22px; border-radius:999px; z-index:99; opacity:0; pointer-events:none;
  transition:.3s ease; max-width:82vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- 我的参与（登记表单 / 个人状态 / 登出） ---------- */
.me-card{
  background:var(--card); border-radius:18px; padding:22px 22px 18px;
  box-shadow:0 2px 4px rgba(109,10,16,.05), 0 10px 24px rgba(109,10,16,.09),
             inset 0 1px 0 rgba(255,255,255,.85);
  display:flex; flex-direction:column; gap:10px;
}
.me-card h3{font-size:19px; color:var(--red-deep); letter-spacing:2px; text-align:center}
.me-card .me-sub{font-size:11.5px; color:#9a7a6a; line-height:1.7; text-align:center; margin-bottom:2px}
.me-card input{
  border:1.5px solid rgba(165,18,26,.25); border-radius:12px; padding:11px 13px;
  font-size:14px; background:#fff; outline:none; transition:.2s;
}
.me-card input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,196,81,.25)}
.me-card .me-err{min-height:16px; font-size:12px; color:#c0242c; text-align:center}
.me-head{display:flex; align-items:center; gap:12px}
.me-avatar{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, #ffe08a, #f5c451 55%, #c8952b);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#5a3a08;
  box-shadow:0 0 0 3px rgba(245,196,81,.35);
}
.me-id{flex:1; display:flex; flex-direction:column; gap:2px}
.me-id b{font-size:17px; color:var(--red-deep); letter-spacing:1px}
.me-id span{font-size:12px; color:#9a7a6a}
.me-out{
  border:1.5px solid rgba(165,18,26,.35); background:#fff; color:var(--red);
  border-radius:999px; padding:6px 14px; font-size:12px; cursor:pointer; transition:.2s;
}
.me-out:hover{background:rgba(165,18,26,.06)}
.me-progress{list-style:none; display:flex; flex-direction:column; gap:8px; margin:4px 0}
.me-progress li{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:#4a3028;
  background:rgba(245,196,81,.10); border-radius:12px; padding:9px 12px;
}
.me-progress li .st{
  margin-left:auto; font-size:11px; padding:2px 9px; border-radius:999px; letter-spacing:1px;
  background:rgba(165,18,26,.10); color:#b09280;
}
.me-progress li.done{background:rgba(245,196,81,.22)}
.me-progress li.done .st{background:var(--red); color:#ffe8b0}
.admin-link{
  display:block; text-align:center; font-size:12px; color:#b09280;
  text-decoration:none; letter-spacing:1px; padding-top:8px; border-top:1px dashed rgba(200,149,43,.4);
}
.admin-link:hover{color:var(--red)}

/* ================= 新增动效元素 ================= */

/* 点赞时飘出的心形粒子 */
.heart-fly{
  position:absolute; right:14px; bottom:10px; font-size:14px; pointer-events:none;
  color:#e0403a; will-change:transform,opacity;
}

/* 新留言落下的「国庆」印章 */
.stamp{
  position:absolute; top:8px; right:10px; width:34px; height:34px; border-radius:6px;
  border:2px solid rgba(165,18,26,.75); color:rgba(165,18,26,.8);
  font-size:12px; font-weight:800; letter-spacing:1px; line-height:15px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-12deg); pointer-events:none;
  font-family:"STKaiti","KaiTi","PingFang SC",serif;
  box-shadow:inset 0 0 0 1px rgba(165,18,26,.25);
}

/* 满分撒花粒子 */
.confetti-bit{
  position:absolute; width:8px; height:12px; border-radius:2px;
  pointer-events:none; top:50%; left:50%; will-change:transform,opacity;
}

/* 首屏标题金色流光（配合 GSAP 动 backgroundPosition） */
.hero-title{background-size:220% 100%; background-position:0% 0}

/* 首屏点击/触摸处爆开的烟花（提示用） */
.tap-hint{
  position:absolute; left:50%; bottom:205px; transform:translateX(-50%); z-index:6;
  font-size:11px; letter-spacing:2px; color:rgba(255,224,138,.5); pointer-events:none;
}

/* 尊重系统「减弱动效」设置 */
@media (prefers-reduced-motion: reduce){
  .lane.shine::after, .upload-box.pulse::before{animation:none}
  .heart-fly, .confetti-bit, .stamp{display:none}
}

@media (prefers-reduced-motion: reduce){
  .scroll-hint .arrow{animation:none}
}

/* =========================================================
   无缝衔接（不插入任何独立色带）
   ① 首屏底部自带渐隐：夜色 → 晨光 → 米白，直接进入内容区
   ② 页脚向上延伸一段渐变：米白 → 暖金 → 深红
   两段都贴合相邻区块，滑动时是连续的一整条色彩旅程
   ========================================================= */
/* 日出色阶：夜色 → 破晓 → 晨光 → 白天，8 段缓升，避免"短距离暴涨"的突兀感 */
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:260px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(74,7,12,0)    0%,
    rgba(93,14,18,.30) 14%,
    rgba(125,28,21,.48) 28%,
    rgba(168,58,42,.64) 42%,
    rgba(212,118,63,.78) 55%,
    rgba(232,168,102,.87) 67%,
    rgba(240,205,154,.93) 78%,
    rgba(248,230,204,.97) 89%,
    #fdf6ec 100%);
}
/* ② 最后一个板块底部自带渐隐收尾（日落色阶反向，同样 8 段缓降） */
.section:last-of-type{padding-bottom:220px}
.section:last-of-type::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:200px; pointer-events:none;
  background:linear-gradient(180deg,
    #fdf6ec 0%,
    #f8ead4 12%,
    #f0cd9a 26%,
    #e8a866 40%,
    #d4763f 54%,
    #a8452a 68%,
    #7d1c15 82%,
    #6d0a10 100%);
}

/* =========================================================
   分享海报（真正的海报，不是一张空白图）
   ========================================================= */
.poster-wrap{margin-top:24px}
/* 高度由图片自身决定（不锁 aspect-ratio），保证海报完整展示、不被裁切 */
.poster-box{
  position:relative; width:100%; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(61,6,10,.3);
  background:linear-gradient(160deg,#8f0f16 0%,#5d0b11 45%,#3d060a 100%);
}
.poster-bg{display:block; width:100%; height:auto}
.poster-layer{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:9% 10%; text-align:center;
}
.p-logo{width:46px; height:46px; object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(245,196,81,.6))}
.p-org{font-size:11px; letter-spacing:1.6px; color:rgba(255,232,176,.78); margin-top:8px}
.p-mid{display:flex; flex-direction:column; align-items:center}
.p-title{
  font-size:33px; font-weight:800; line-height:1.3; letter-spacing:6px;
  color:#ffe08a; text-shadow:0 2px 14px rgba(61,6,10,.6), 0 0 26px rgba(245,196,81,.35);
}
.p-sub{margin-top:10px; font-size:13.5px; letter-spacing:9px; color:#ffd98a}
.p-line{width:58px; height:2px; margin-top:16px;
  background:linear-gradient(90deg, transparent, #f5c451, transparent)}
.p-foot{font-size:12.5px; line-height:2; letter-spacing:1px; color:rgba(255,232,176,.92)}
.poster-cap{margin-top:12px; text-align:center; font-size:12px; letter-spacing:1px; color:#a0785f}

/* 图片边缘渐变融入背景（不再硬切） */
.hero-bg{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.5) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.5) 84%,transparent 100%);
}
.wide-art{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 86%,transparent 100%);
}
.photo-grid .ph.demo img{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
/* 内容区极淡的暖金晕染，避免大面积纯色显得平 */
.app{
  background:
    radial-gradient(900px 520px at 50% 14%, rgba(245,196,81,.07), transparent 62%),
    radial-gradient(700px 420px at 20% 52%, rgba(200,149,43,.05), transparent 60%),
    var(--cream);
}