<style>
/* ============================================================
   鲁庄一中表白墙 · 纯前端单文件版
   所有数据走 localStorage，刷新不丢
   ============================================================ */

/* ---------- CSS 变量（主题可切换） ---------- */
:root{
  --bg:#0f0820;
  --glass:rgba(255,255,255,0.06);
  --glass2:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.10);
  --border-hi:rgba(255,255,255,0.18);
  --text:#fff;
  --text2:rgba(255,255,255,0.65);
  --text3:rgba(255,255,255,0.40);
  --green:#3ddc97;
  --green2:#2fffc4;
  --pink:#ff6b9d;
  --purple:#a78bfa;
  --blue:#60a5fa;
  --grad-title:linear-gradient(90deg,#ff6b9d,#c084fc,#60a5fa);
  --grad-btn:linear-gradient(135deg,#3ddc97,#2dd4bf);
  --grad-avatar:linear-gradient(135deg,#a78bfa,#f472b6);
  --shadow:0 8px 32px rgba(0,0,0,0.35);
  --fs:15px;
  --accent:#3ddc97;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs);
  overflow-x:hidden;
  padding-bottom:135px;
  transition:background .4s;
}

/* ---------- 极光背景 ---------- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;animation:drift 18s ease-in-out infinite alternate;}
.aurora i:nth-child(1){width:300px;height:300px;background:#7c3aed;top:-5%;left:-10%;}
.aurora i:nth-child(2){width:260px;height:260px;background:#ec4899;top:20%;right:-8%;animation-delay:-6s;opacity:.3;}
.aurora i:nth-child(3){width:220px;height:220px;background:#06b6d4;bottom:10%;left:20%;animation-delay:-12s;opacity:.25;}
@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(30px,40px) scale(1.2);}}
/* 星星粒子 */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;}
.stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.5;animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.2;}50%{opacity:.8;}}

#app{position:relative;z-index:1;max-width:420px;margin:0 auto;min-height:100vh;}

/* ============================================================
   启动页
   ============================================================ */
#splash{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#1e1040 0%,#0a0618 100%);
  transition:opacity .55s ease, transform .55s ease;
  overflow:hidden;
}
#splash.hide{opacity:0;transform:scale(1.06);pointer-events:none;}

/* ---------- 舞台：图标 + 波纹 + 光线都定位在这一层 ---------- */
.splash-stage{
  position:relative;width:300px;height:300px;
  display:flex;align-items:center;justify-content:center;
}

/* 1) 放射状光线（缓慢旋转的星芒） */
.splash-rays{
  position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(192,132,252,0.20) 0deg 2deg,
    transparent 2deg 12deg);
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.95) 12%,transparent 62%);
  mask-image:radial-gradient(circle,rgba(0,0,0,.95) 12%,transparent 62%);
  opacity:0;
  animation:raysIn 1.2s .15s ease forwards, raysSpin 26s linear infinite;
}
@keyframes raysIn{to{opacity:1;}}
@keyframes raysSpin{to{transform:rotate(360deg);}}

/* 2) 多层水波：从中心持续向外扩散 */
.splash-waves{position:absolute;inset:0;pointer-events:none;}
.splash-waves span{
  position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  border-radius:26px;border:1.5px solid rgba(167,139,250,0.55);
  opacity:0;animation:waveOut 2.8s cubic-bezier(0.22,0.75,0.3,1) infinite;
}
.splash-waves span:nth-child(1){animation-delay:.15s;}
.splash-waves span:nth-child(2){animation-delay:1.05s;border-color:rgba(96,165,250,0.45);}
.splash-waves span:nth-child(3){animation-delay:1.95s;border-color:rgba(244,114,182,0.40);}
@keyframes waveOut{
  0%  {transform:scale(.55);opacity:0;}
  14% {opacity:.85;}
  100%{transform:scale(3.1);opacity:0;}
}

/* 3) 落地冲击波：图标落定时只播一次 */
.splash-shock{
  position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  border-radius:28px;border:2px solid rgba(255,255,255,0.85);
  opacity:0;pointer-events:none;
  animation:shockOnce .85s 1.02s cubic-bezier(0.15,0.8,0.3,1) forwards;
}
@keyframes shockOnce{
  0%  {transform:scale(.7);opacity:0;}
  18% {opacity:.9;}
  100%{transform:scale(2.6);opacity:0;}
}

/* ---------- 信封图标：左侧滑入 + 落地弹跳（squash & stretch） ---------- */
.splash-icon{
  width:104px;height:104px;border-radius:28px;position:relative;z-index:3;
  background:linear-gradient(135deg,#c084fc,#f472b6,#60a5fa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 60px rgba(192,132,252,0.5);
  transform:translate(-420px,0) rotate(-30deg) scale(.5);
  opacity:0;
  animation:envelopeIn 1.15s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes envelopeIn{
  0%  {transform:translate(-420px,0) rotate(-32deg) scale(.45);opacity:0;}
  10% {opacity:1;}
  /* 冲过头 */
  52% {transform:translate(26px,0) rotate(8deg) scale(1.10);}
  /* 回拉 */
  68% {transform:translate(-10px,0) rotate(-3deg) scale(.97);}
  /* 落地压扁 */
  80% {transform:translate(0,0) rotate(0deg) scale(1.06,0.82);}
  /* 弹起拉伸 */
  90% {transform:translate(0,-22px) rotate(0deg) scale(.93,1.12);}
  /* 二次落回 */
  96% {transform:translate(0,0) rotate(0deg) scale(1.04,0.95);opacity:1;}
  100%{transform:translate(0,0) rotate(0deg) scale(1,1);opacity:1;}
}
/* 图标落定后持续轻微呼吸 */
.splash-icon::after{
  content:'';position:absolute;inset:-10px;border-radius:36px;pointer-events:none;
  background:radial-gradient(circle,rgba(192,132,252,0.35),transparent 70%);
  opacity:0;animation:iconGlow 2.4s 1.5s ease-in-out infinite;
}
@keyframes iconGlow{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.85;transform:scale(1.08);}}
.splash-icon svg{width:50px;height:50px;fill:#fff;}

/* ---------- 标题 / 副标题：弹性上浮 ---------- */
.splash-title{
  margin-top:26px;font-size:27px;font-weight:800;letter-spacing:2px;
  background:var(--grad-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:0;transform:translateY(24px) scale(.9);
  animation:titlePop .8s 1.15s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes titlePop{
  0%  {opacity:0;transform:translateY(24px) scale(.9);}
  60% {opacity:1;transform:translateY(-6px) scale(1.04);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.splash-sub{
  margin-top:10px;font-size:13px;letter-spacing:4px;color:rgba(255,255,255,0.45);
  opacity:0;transform:translateY(16px);
  animation:fadeUp .7s 1.5s ease forwards;
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

/* ---------- 进度条（带掠光） ---------- */
.splash-bar{
  margin-top:38px;width:200px;height:3px;border-radius:99px;background:rgba(255,255,255,0.10);
  overflow:hidden;position:relative;
  opacity:0;animation:fadeUp .5s 1.75s ease forwards;
}
.splash-bar i{
  display:block;height:100%;width:0;border-radius:99px;position:relative;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));
  animation:prog 2s 1.8s linear forwards;
}
/* 进度条走完时的闪光 */
.splash-bar::after{
  content:'';position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
  transform:translateX(-100%);opacity:0;
  animation:barFlash .6s 3.75s ease-out forwards;
}
@keyframes prog{to{width:100%;}}
@keyframes barFlash{
  0%{transform:translateX(-100%);opacity:0;}
  30%{opacity:1;}
  100%{transform:translateX(100%);opacity:0;}
}
/* 加载文案（逐句轮换 + 三个点跳动） */
.splash-loading{
  margin-top:16px;font-size:12px;color:rgba(255,255,255,0.40);letter-spacing:1px;
  height:16px;display:flex;align-items:center;gap:2px;
  opacity:0;animation:fadeUp .5s 1.95s ease forwards;
}
.splash-loading .txt{transition:opacity .35s ease;}
.splash-loading .dot3{display:inline-flex;gap:2px;margin-left:1px;}
.splash-loading .dot3 i{
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.45);
  animation:dotBounce 1.2s ease-in-out infinite;
}
.splash-loading .dot3 i:nth-child(2){animation-delay:.18s;}
.splash-loading .dot3 i:nth-child(3){animation-delay:.36s;}
@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(-3px);opacity:1;}}
.splash-skip{
  margin-top:14px;font-size:12px;color:rgba(255,255,255,0.30);cursor:pointer;
  opacity:0;animation:fadeUp .5s 2.3s ease forwards;
}

/* ============================================================
   通用玻璃 & 按钮
   ============================================================ */
.glass{
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:18px;
}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:99px;font-size:13px;
  background:var(--glass);border:1px solid var(--border);cursor:pointer;transition:all .25s;user-select:none;
}
.pill:active{transform:scale(.92);}
.pill.active{background:var(--grad-btn);color:#0a2e1f;border-color:transparent;font-weight:700;box-shadow:0 4px 16px rgba(61,220,151,0.3);}
/* 可按压元素 */
.pressable{position:relative;overflow:hidden;cursor:pointer;transition:transform .15s;}
.pressable:active{transform:scale(.92);}
/* 点击径向白光扩散 */
.ripple{
  position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,transparent 70%);
  width:120px;height:120px;transform:translate(-50%,-50%);pointer-events:none;
  animation:rip .45s ease-out forwards;
}
@keyframes rip{to{transform:translate(-50%,-50%) scale(3);opacity:0;}}

/* ============================================================
   页面容器
   ============================================================ */
.page{display:none;padding:12px;animation:pageIn .35s ease;}
.page.active{display:block;}
@keyframes pageIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   顶栏
   ============================================================ */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px;}
.top-left{display:flex;align-items:center;gap:10px;}
.top-logo{
  width:38px;height:38px;border-radius:12px;background:var(--grad-btn);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(61,220,151,0.3);
}
.top-logo svg{width:20px;height:20px;fill:#0a2e1f;}
.top-title{font-size:19px;font-weight:800;background:var(--grad-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.top-actions{display:flex;gap:8px;align-items:center;}
.top-badge{
  width:38px;height:38px;border-radius:14px;background:var(--glass);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fbbf24;position:relative;
}
.top-icon{
  width:38px;height:38px;border-radius:14px;background:var(--glass);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
}

/* 搜索弹层 */
.search-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:300;display:none;
  align-items:flex-start;justify-content:center;padding-top:60px;backdrop-filter:blur(6px);
}
.search-overlay.active{display:flex;}
.search-box{width:90%;max-width:380px;}
.search-box input{
  width:100%;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,0.1);
  border:1px solid var(--border-hi);color:#fff;font-size:15px;outline:none;
}
.search-results{margin-top:12px;max-height:60vh;overflow-y:auto;}

/* ============================================================
   公告跑马灯
   ============================================================ */
.marquee{
  display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:12px;overflow:hidden;
}
.mq-label{
  flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;
  background:var(--grad-btn);color:#0a2e1f;font-size:12px;font-weight:700;
}
.mq-track{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.mq-text{white-space:nowrap;font-size:12px;color:var(--text2);animation:mq 18s linear infinite;display:inline-block;}
@keyframes mq{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}

/* ============================================================
   Hero 卡片
   ============================================================ */
.hero{padding:18px;margin-bottom:14px;position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;top:-40%;right:-20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(236,72,153,0.2),transparent 70%);pointer-events:none;
}
.hero-top{display:flex;align-items:center;gap:12px;}
.hero-avatar{
  width:56px;height:56px;border-radius:18px;background:var(--grad-btn);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#0a2e1f;
  box-shadow:0 4px 16px rgba(61,220,151,0.3);
}
.hero-name{font-size:22px;font-weight:800;background:var(--grad-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:1px;}
.hero-quote{
  margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);font-size:14px;color:var(--text2);font-style:italic;
}
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px;}
.hstat{
  text-align:center;padding:12px 4px;border-radius:14px;background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
}
.hstat-n{font-size:24px;font-weight:800;background:linear-gradient(90deg,#ff6b9d,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hstat-l{font-size:11px;color:var(--text3);margin-top:3px;}

/* ============================================================
   筛选 Pills
   ============================================================ */
.filters{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;}
.filters::-webkit-scrollbar{display:none;}

/* ============================================================
   发布卡片
   ============================================================ */
.publish{padding:16px;margin-bottom:14px;}
.pub-input{
  width:100%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);color:var(--text);font-size:14px;outline:none;margin-bottom:10px;
}
.pub-input::placeholder{color:var(--text3);}
.pub-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.avatar-pick{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:2px 0;}
.avatar-pick::-webkit-scrollbar{display:none;}
.av-opt{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border:2px solid transparent;cursor:pointer;font-size:18px;flex-shrink:0;
  transition:all .2s;
}
.av-opt.sel{border-color:var(--green);background:rgba(61,220,151,0.15);}
.av-opt.custom{background:var(--grad-btn);color:#0a2e1f;font-size:11px;font-weight:700;}
.pub-textarea{
  width:100%;min-height:90px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);color:var(--text);font-size:14px;outline:none;resize:none;line-height:1.6;
}
.pub-textarea::placeholder{color:var(--text3);}
.char-count{text-align:right;font-size:11px;color:var(--text3);margin-top:4px;}
.quick-phrases{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.qp{font-size:11px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,0.05);color:var(--text3);cursor:pointer;border:1px solid var(--border);}
.pub-bottom{display:flex;align-items:center;gap:12px;margin-top:12px;}
.anon-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);cursor:pointer;}
.anon-check input{accent-color:var(--pink);width:16px;height:16px;}
.pub-btn{
  flex:1;padding:13px;border-radius:14px;background:var(--grad-btn);color:#0a2e1f;font-size:15px;
  font-weight:800;text-align:center;cursor:pointer;border:none;transition:all .2s;
  box-shadow:0 4px 18px rgba(61,220,151,0.3);
}
.pub-btn:active{transform:scale(.96);}

/* ============================================================
   留言卡片
   ============================================================ */
.msg{
  padding:16px;margin-bottom:14px;border-radius:18px;position:relative;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--border);
  animation:stagger .45s ease forwards;opacity:0;transform:translateY(16px);
}
.msg::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--pink),var(--purple),var(--blue));
}
@keyframes stagger{to{opacity:1;transform:translateY(0);}}
.msg-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.msg-ava{
  width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;flex-shrink:0;
}
.msg-info{flex:1;min-width:0;}
.msg-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tag-class{font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(167,139,250,0.2);color:var(--purple);}
.tag-top{font-size:10px;padding:2px 7px;border-radius:6px;background:#fbbf24;color:#000;font-weight:700;}
.tag-hot{font-size:10px;padding:2px 7px;border-radius:6px;background:#ef4444;color:#fff;font-weight:700;}
.msg-time{font-size:11px;color:var(--text3);margin-top:2px;}
.msg-to{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:8px;
  background:rgba(96,165,250,0.12);color:var(--blue);margin-bottom:8px;
}
.msg-body{font-size:15px;line-height:1.7;color:rgba(255,255,255,0.92);margin-bottom:10px;white-space:pre-wrap;}
.msg-topic{color:var(--green2);font-size:13px;}
.msg-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.act{
  display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:99px;font-size:13px;
  background:rgba(255,255,255,0.06);border:1px solid var(--border);cursor:pointer;color:var(--text2);transition:all .2s;
}
.act:active{transform:scale(.92);}
.act.heart{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3);color:#f87171;}
.act.heart.liked{background:var(--grad-btn);color:#0a2e1f;border-color:transparent;}
.act .like-num{font-weight:700;}
.msg-bottom-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.msg-tools{display:flex;gap:14px;color:var(--text3);font-size:16px;}
/* 点赞 +1 上浮 */
.like-pop{
  position:fixed;color:#f87171;font-weight:800;font-size:18px;pointer-events:none;z-index:999;
  animation:likeUp .8s ease forwards;
}
@keyframes likeUp{to{transform:translateY(-50px);opacity:0;}}

/* ============================================================
   底部导航
   ============================================================ */
/* 底部导航：悬浮玻璃岛（不贴底、左右留边、大圆角、浮起阴影） */
.tabbar{
  position:fixed;
  bottom:calc(14px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:392px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  padding:6px 6px;
  border-radius:28px;
  background:rgba(22,13,44,0.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 34px rgba(0,0,0,0.45),
             0 2px 8px rgba(0,0,0,0.30),
             inset 0 1px 0 rgba(255,255,255,0.07);
  z-index:100;
}
.tab{
  position:relative;text-align:center;padding:5px 2px;border-radius:16px;
  cursor:pointer;color:var(--text3);font-size:11px;
  transition:color .2s, background .25s, transform .15s;
}
.tab svg{width:22px;height:22px;fill:currentColor;margin:0 auto 3px;display:block;}
.tab:active{transform:scale(.9);}
/* 选中：椭圆高亮底 + 主题色 */
.tab.active{color:var(--green);background:rgba(61,220,151,0.16);}
/* 未读徽章 */
.tab-badge{
  position:absolute;top:-1px;right:calc(50% - 22px);
  min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:700;line-height:16px;
  display:none;align-items:center;justify-content:center;
  border:2px solid rgba(22,13,44,0.95);box-shadow:0 2px 6px rgba(239,68,68,0.5);
}
.tab-badge.show{display:flex;animation:badgePop .35s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes badgePop{0%{transform:scale(0);}60%{transform:scale(1.25);}100%{transform:scale(1);}}

/* 中间抽签：从岛上方凸出的圆形按钮 */
.tab.center{align-self:start;}
.tab.center .tab-btn{
  width:50px;height:50px;border-radius:50%;background:var(--grad-btn);
  margin:-26px auto 2px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(61,220,151,0.45),
             0 0 0 4px rgba(22,13,44,0.92);
  color:#0a2e1f;transition:transform .15s;
}
.tab.center .tab-btn svg{width:24px;height:24px;fill:#0a2e1f;margin:0;}
.tab.center:active .tab-btn{transform:scale(.9);}
/* 中心按钮选中时不加背景（它本身就是高亮圆钮） */
.tab.center.active{background:transparent;color:var(--green);}

/* 悬浮 + 按钮（呼吸浮动） */
.fab{
  /* 容器内右对齐：容器宽 420 居中 → right = 50% - 194px；窄屏时退化为 16px 边距 */
  position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));
  right:max(22px, calc(50% - 186px));
  width:54px;height:54px;border-radius:18px;
  background:var(--grad-btn);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 24px rgba(61,220,151,0.4);z-index:90;animation:breathe 3s ease-in-out infinite;
  transition:transform .15s;
}
.fab:active{transform:scale(.9);}
@keyframes breathe{
  0%,100%{box-shadow:0 6px 24px rgba(61,220,151,0.3);transform:translateY(0);}
  50%{box-shadow:0 6px 36px rgba(61,220,151,0.6);transform:translateY(-5px);}
}
.fab svg{width:26px;height:26px;fill:#0a2e1f;}

/* ============================================================
   榜单页
   ============================================================ */
.sec-title{font-size:18px;font-weight:800;margin:6px 0 14px;display:flex;align-items:center;gap:8px;}
.sec-title .icon{font-size:20px;}
.rank-card{padding:16px;margin-bottom:14px;}
.rank-legend{display:flex;gap:16px;font-size:12px;color:var(--text2);margin-bottom:14px;}
.rank-legend span{display:flex;align-items:center;gap:4px;}
.dot{width:10px;height:10px;border-radius:3px;}
.rank-row{margin-bottom:16px;}
.rank-row:last-child{margin-bottom:0;}
.rank-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.rank-cls{font-size:14px;font-weight:700;}
.rank-meta{font-size:12px;color:var(--text3);}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,0.06);margin-bottom:4px;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;transition:width .8s ease;}
.bar-pink i{background:linear-gradient(90deg,#f472b6,#ec4899);}
.bar-blue i{background:linear-gradient(90deg,#a78bfa,#60a5fa);}
.top-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.top-item:last-child{border-bottom:none;}
.rank-medal{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.rank-medal.r1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;}
.rank-medal.r2{background:linear-gradient(135deg,#d4d4d8,#a1a1aa);color:#000;}
.rank-medal.r3{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;}
.rank-medal.rx{background:rgba(255,255,255,0.08);color:var(--text3);}
.top-content{flex:1;min-width:0;}
.top-text{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.top-score{font-size:16px;font-weight:800;color:var(--pink);}
.topic-chip{
  display:inline-block;padding:6px 14px;margin:4px;border-radius:99px;font-size:13px;
  background:rgba(167,139,250,0.12);color:var(--purple);border:1px solid rgba(167,139,250,0.25);cursor:pointer;
}

/* ============================================================
   抽签页（3D 翻面）
   ============================================================ */
.draw-wrap{perspective:1000px;margin:20px 0;position:relative;}
.draw-card{
  width:100%;height:300px;position:relative;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(0.34,1.56,0.64,1);cursor:pointer;
}
.draw-card.flipped{transform:rotateY(180deg);}
.draw-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;
}
.draw-front{background:var(--glass);border:1px solid var(--border);}
.draw-front .big-icon{font-size:48px;margin-bottom:12px;}
.draw-front .hint{font-size:14px;color:var(--text2);}
.draw-back{
  background:linear-gradient(160deg,rgba(236,72,153,0.15),rgba(167,139,250,0.15));
  border:1px solid rgba(236,72,153,0.3);transform:rotateY(180deg);
  box-shadow:0 0 80px rgba(236,72,153,0.2);
}
.draw-fortune{font-size:36px;font-weight:900;color:var(--pink);margin-bottom:12px;}
.draw-msg{font-size:15px;line-height:1.7;color:var(--text2);margin-bottom:16px;}
.draw-luck{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.draw-luck span{
  font-size:12px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,0.06);
  border:1px solid var(--border);color:var(--text2);
}
.draw-sub-card{padding:20px;text-align:center;margin-top:14px;}
.draw-sub-card .env{font-size:36px;margin-bottom:10px;}
.draw-sub-card p{font-size:13px;color:var(--text3);line-height:1.6;}
.draw-glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle at 50% 50%,rgba(236,72,153,0.15),transparent 60%);
}
.draw-glow.on{opacity:1;}

/* ============================================================
   成长中心
   ============================================================ */
.lv-card{padding:18px;margin-bottom:14px;display:flex;align-items:center;gap:16px;}
.lv-badge{
  width:64px;height:64px;border-radius:20px;background:var(--grad-btn);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0a2e1f;flex-shrink:0;
}
.lv-badge .lv-label{font-size:11px;font-weight:700;}
.lv-badge .lv-num{font-size:24px;font-weight:900;line-height:1;}
.lv-info{flex:1;}
.lv-name{font-size:18px;font-weight:800;margin-bottom:8px;}
.lv-bar{height:8px;border-radius:99px;background:rgba(255,255,255,0.08);overflow:hidden;}
.lv-bar i{display:block;height:100%;background:var(--grad-btn);border-radius:99px;transition:width .6s ease;}
.lv-exp{font-size:12px;color:var(--text3);margin-top:6px;}
.cal-card{padding:16px;margin-bottom:14px;}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.cal-head h3{font-size:16px;font-weight:700;}
.cal-streak{font-size:12px;color:var(--pink);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-grid .ch{text-align:center;font-size:11px;color:var(--text3);padding:4px 0;}
.cal-grid .cd{
  text-align:center;padding:8px 0;font-size:13px;border-radius:8px;color:var(--text2);
}
.cal-grid .cd.today{
  background:rgba(236,72,153,0.15);border:1.5px solid var(--pink);color:var(--pink);font-weight:700;
}
.cal-grid .cd.signed{background:rgba(61,220,151,0.15);color:var(--green);}
.signin-btn{
  width:100%;padding:12px;border-radius:12px;background:var(--grad-btn);color:#0a2e1f;
  font-weight:800;text-align:center;cursor:pointer;border:none;margin-top:12px;font-size:14px;
}
.data-card{padding:16px;margin-bottom:14px;}
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.data-item{
  text-align:center;padding:16px 8px;border-radius:14px;background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
}
.data-n{font-size:28px;font-weight:800;background:var(--grad-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.data-l{font-size:12px;color:var(--text3);margin-top:4px;}
.my-msg-list{margin-top:10px;}
.copyright{text-align:center;font-size:11px;color:var(--text3);padding:20px 0;line-height:1.8;}

/* ============================================================
   我的页面
   ============================================================ */
.set-row{
  display:flex;justify-content:space-between;align-items:center;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);cursor:pointer;
}
.set-row:last-child{border-bottom:none;}
.set-label{display:flex;align-items:center;gap:10px;font-size:14px;}
.set-arrow{color:var(--green);font-size:14px;font-weight:600;}
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0;}
.swatch{
  aspect-ratio:1;border-radius:14px;cursor:pointer;border:2px solid transparent;transition:all .2s;
}
.swatch.sel{border-color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff;}
.bg-pills{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.fs-pills{display:flex;gap:8px;margin-top:8px;}
.toast{
  position:fixed;bottom:120px;left:50%;transform:translateX(-50%);padding:10px 24px;
  border-radius:99px;background:var(--grad-btn);color:#0a2e1f;font-size:14px;font-weight:700;
  z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;}

/* ============================================================
   评论弹层
   ============================================================ */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);
}
.modal.active{display:flex;}
.modal-sheet{
  width:100%;max-width:420px;max-height:75vh;border-radius:22px 22px 0 0;padding:20px;
  background:#1a1030;overflow-y:auto;animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-sheet h3{font-size:17px;margin-bottom:14px;}
.com-item{padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.com-item:last-child{border:none;}
.com-nick{font-size:13px;color:var(--green);font-weight:600;}
.com-text{font-size:14px;margin-top:3px;line-height:1.5;}
.modal-sheet input,.modal-sheet textarea{
  width:100%;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,0.06);
  border:1px solid var(--border);color:var(--text);outline:none;font-size:14px;margin-bottom:8px;
}

/* ============================================================
   UI 优化补丁
   ============================================================ */
/* 输入控件：统一聚焦态 */
.pub-input,.pub-textarea,.search-box input,
.modal-sheet input,.modal-sheet textarea{transition:all .2s;}
.pub-input:focus,.pub-textarea:focus,.search-box input:focus,
.modal-sheet input:focus,.modal-sheet textarea:focus{
  border-color:var(--green);
  background:rgba(255,255,255,0.09);
  box-shadow:0 0 0 3px rgba(61,220,151,0.12);
}

/* 头像 / 表情选择器：加大热区 + 更明显的选中态 */
.avatar-pick{gap:8px;padding:4px 2px 6px;}
.av-opt{width:40px;height:40px;font-size:19px;}
.av-opt.sel{
  transform:scale(1.12);
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--green),0 4px 12px rgba(61,220,151,0.35);
}
.av-opt:active{transform:scale(.88);}
.av-opt.custom{width:auto;padding:0 12px;border-radius:99px;}
.pub-row-label{font-size:13px;color:var(--text2);flex-shrink:0;}
/* 留言卡片上的表情头像 */
.msg-ava-emo{
  background:rgba(255,255,255,0.10);border:1px solid var(--border-hi);font-size:20px;
}

/* 空状态 */
.empty-state{text-align:center;padding:48px 20px;color:var(--text2);font-size:14px;}
.empty-ico{font-size:40px;margin-bottom:12px;opacity:.85;}
.empty-sub{font-size:12px;color:var(--text3);margin-top:6px;}

/* 筛选提示条 */
.filter-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;margin-bottom:12px;border-radius:12px;font-size:13px;
  background:rgba(61,220,151,0.12);border:1px solid rgba(61,220,151,0.30);color:var(--green2);
}
.filter-clear{cursor:pointer;font-weight:700;}

/* 消息红点：有未读时脉冲 */
.top-badge.has-new{color:#f87171;}
.top-badge.has-new::after{
  content:'';position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#ef4444;animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.7);}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

/* 底部 Tab 按压反馈 */
.tab{transition:transform .15s,color .2s;}
.tab:active{transform:scale(.9);}
.tab.center:active{transform:translateY(-14px) scale(.9);}

/* ---------- 正文字号：让 --fs 真正驱动全站文本 ----------
   原写法只有 body 跟着 --fs 走，而卡片内绝大多数文字写死了 px，
   导致切换字号几乎看不出变化。这里统一改为基于 --fs 的差值，
   13 / 15 / 17 三档会整体等比缩放。
------------------------------------------------------------ */
/* 正文类 */
.msg-body,.draw-msg,.com-text,.hero-quote,.empty-state{font-size:var(--fs);}
/* 次级正文（-1） */
.msg-name,.pub-input,.pub-textarea,.set-label,.modal-sheet input,.modal-sheet textarea,
.anon-check{font-size:calc(var(--fs) - 1px);}
/* 辅助/标签（-3 ~ -4） */
.msg-time,.msg-topic,.char-count,.top-sub,.com-nick,.qp,
.cal-grid .cd,.cal-grid .ch,.rank-meta,.data-l,.hstat-l,.lv-exp,.hero-sub,
.filter-bar,.empty-sub,.mq-text,.search-box input{font-size:calc(var(--fs) - 3px);}
.tag-class,.tag-top,.tag-hot,.msg-to,.act,.pill,.topic-chip,.draw-luck span,
.copyright,.set-arrow,.rank-legend{font-size:calc(var(--fs) - 2px);}
/* 中标题（+2 ~ +3） */
.sec-title,.lv-name,.top-title,.modal-sheet h3{font-size:calc(var(--fs) + 3px);}
/* 大标题（+5 ~ +7）：只轻微跟随，避免小屏撑爆 */
.hero-name{font-size:calc(var(--fs) + 7px);}
.data-n{font-size:calc(var(--fs) + 13px);}
.hstat-n{font-size:calc(var(--fs) + 9px);}
.draw-fortune{font-size:calc(var(--fs) + 21px);}
.lv-badge .lv-num,.top-score{font-size:calc(var(--fs) + 9px);}
/* -tabbar 与 FAB 不跟随，保持固定操作区尺寸 */
.tab{font-size:11px;}

/* 字号实时预览 */
.fs-preview{
  margin-top:12px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  transition:font-size .2s;
}
.fs-preview .fp-t{font-size:12px;color:var(--text3);margin-bottom:8px;}
.fs-preview .fp-body{font-size:var(--fs);line-height:1.7;color:var(--text2);}
.fs-preview .fp-sub{font-size:calc(var(--fs) - 3px);color:var(--text3);margin-top:6px;}
/* 字号档位显示当前档 */
.fs-pills .pill{position:relative;}
.fs-pills .pill.active::after{
  content:'当前';position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--green);white-space:nowrap;
}
.fs-pills{margin-bottom:18px;}

/* ---------- 表情反应按钮 ---------- */
.act.react{transition:all .18s;}
.act.react.on{
  background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,0.42);
  color:#fbbf24;font-weight:700;
}
.act.react.on:active{transform:scale(.88);}
.react-num{font-weight:700;transition:none;}
.act.react.bump{animation:reactBump .42s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes reactBump{
  0%{transform:scale(1);}35%{transform:scale(1.28);}70%{transform:scale(.94);}100%{transform:scale(1);}
}
/* 反应 +1 上浮 */
.react-pop{
  position:fixed;color:#fbbf24;font-weight:800;font-size:16px;pointer-events:none;z-index:999;
  animation:likeUp .8s ease forwards;
}

/* ---------- 收藏 ---------- */
.fav-btn{font-size:17px;line-height:1;transition:all .2s;display:inline-flex;}
.fav-btn.on{color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,0.6);}
.fav-btn.pop{animation:favPop .5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes favPop{
  0%{transform:scale(1) rotate(0);}
  40%{transform:scale(1.45) rotate(18deg);}
  100%{transform:scale(1) rotate(0);}
}
/* 「我的」页 → 收藏入口（长方形大按钮） */
.entry-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:16px 18px;margin-bottom:14px;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,rgba(251,191,36,0.14),rgba(251,191,36,0.05));
  border:1px solid rgba(251,191,36,0.30);
  transition:transform .15s,border-color .2s;
}
.entry-row:active{transform:scale(.97);}
.entry-ico{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  box-shadow:0 4px 14px rgba(251,191,36,0.30);
}
.entry-main{flex:1;min-width:0;}
.entry-t{font-size:15px;font-weight:700;color:#fde68a;}
.entry-s{font-size:12px;color:var(--text3);margin-top:3px;}
.entry-arrow{color:#fbbf24;font-size:18px;font-weight:700;flex-shrink:0;}

/* ---------- 收藏页 ---------- */
.fav-hero{
  padding:18px;margin-bottom:14px;text-align:center;position:relative;overflow:hidden;
}
.fav-hero .fh-ico{font-size:38px;margin-bottom:8px;}
.fav-hero .fh-n{
  font-size:30px;font-weight:900;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fav-hero .fh-l{font-size:12px;color:var(--text3);margin-top:2px;}
.fav-tabs{display:flex;gap:8px;margin-bottom:14px;}
.fav-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;margin-bottom:12px;border-radius:12px;font-size:12px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text3);
}
.fav-toolbar .ft-act{color:var(--green);font-weight:700;cursor:pointer;}
.fav-toolbar .ft-act.danger{color:#f87171;}
/* 收藏卡片上的来源角标 */
.msg-fav-badge{
  position:absolute;right:12px;top:12px;font-size:15px;color:#fbbf24;
  text-shadow:0 0 10px rgba(251,191,36,0.5);
}
.msg.is-fav{border-color:rgba(251,191,36,0.32);}
.fav-meta{font-size:12px;color:var(--text3);}

/* ---------- 卡片配色变体：让信息流不再千篇一律 ---------- */
.msg.var-0::before{background:linear-gradient(180deg,#ff6b9d,#c084fc,#60a5fa);}
.msg.var-1::before{background:linear-gradient(180deg,#34d399,#2dd4bf,#22d3ee);}
.msg.var-2::before{background:linear-gradient(180deg,#f472b6,#fb923c,#fbbf24);}
.msg.var-3::before{background:linear-gradient(180deg,#a78bfa,#818cf8,#60a5fa);}
.msg.var-4::before{background:linear-gradient(180deg,#fb7185,#f43f5e,#ec4899);}
.msg.var-5::before{background:linear-gradient(180deg,#38bdf8,#818cf8,#c084fc);}
/* 置顶卡：金色描边 + 微光 */
.msg.is-top{
  border-color:rgba(251,191,36,0.35);
  box-shadow:0 8px 32px rgba(251,191,36,0.10);
}
/* 长文折叠 */
.msg-body.clamp{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.msg-more{
  display:inline-block;margin-top:4px;font-size:12px;color:var(--green);cursor:pointer;
}
/* 话题内联（时间行里的小尾巴） */

/* 首页热门话题快选条 */
.topic-bar{
  display:flex;gap:6px;align-items:center;margin-bottom:14px;
  overflow-x:auto;padding:2px 0 6px;
}
.topic-bar::-webkit-scrollbar{display:none;}
.tb-label{font-size:12px;color:var(--text3);flex-shrink:0;}
.tb-chip{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  padding:6px 12px;border-radius:99px;font-size:12px;cursor:pointer;
  background:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.28);color:var(--purple);
  transition:all .2s;
}
.tb-chip i{font-style:normal;font-size:10px;opacity:.6;}
.tb-chip:active{transform:scale(.92);}

/* ============================================================
   小彩蛋弹窗
   ============================================================ */
.egg-mask{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,2,12,0.72);backdrop-filter:blur(8px);
}
.egg-mask.show{display:flex;animation:eggFade .3s ease;}
@keyframes eggFade{from{opacity:0;}to{opacity:1;}}
.egg-box{
  width:100%;max-width:330px;border-radius:24px;padding:26px 22px 22px;text-align:center;
  background:linear-gradient(160deg,rgba(124,92,255,0.22),rgba(78,168,255,0.16) 55%,rgba(47,255,196,0.14));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  animation:eggPop .55s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes eggPop{
  0%{opacity:0;transform:scale(.8) translateY(20px);}
  60%{transform:scale(1.04) translateY(-6px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
/* 弹窗上方的星芒光环 */
.egg-halo{
  width:82px;height:82px;margin:0 auto 14px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 50%,#2fffc4 0 26%,#7b5cff 26% 46%,#4ea8ff 46% 70%,transparent 72%);
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 0 34px rgba(47,255,196,0.45);
  animation:eggSpin 8s linear infinite;
}
@keyframes eggSpin{to{transform:rotate(360deg);}}
.egg-halo span{animation:eggSpin 8s linear infinite reverse;}
.egg-title{
  font-size:20px;font-weight:800;letter-spacing:1px;margin-bottom:4px;
  background:linear-gradient(90deg,#2fffc4,#7b5cff,#4ea8ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.egg-sub{font-size:12px;color:var(--text3);margin-bottom:16px;}
.egg-thanks{
  text-align:left;border-radius:16px;padding:14px 16px;margin-bottom:18px;
  background:rgba(0,0,0,0.26);border:1px solid rgba(255,255,255,0.08);
}
.egg-thanks .et-h{
  font-size:13px;font-weight:700;color:var(--green);margin-bottom:10px;letter-spacing:1px;
}
.egg-rows{display:flex;flex-direction:column;gap:7px;}
.egg-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:rgba(255,255,255,0.88);
}
.egg-row .k{color:var(--text3);flex-shrink:0;}
.egg-row .v{font-weight:600;text-align:right;}
/* 联系方式可长按复制 */
.egg-row .v.copy{
  color:var(--green);cursor:pointer;user-select:all;
  -webkit-user-select:all;padding:2px 8px;border-radius:8px;
  background:rgba(47,255,196,0.12);border:1px solid rgba(47,255,196,0.28);
}
.egg-row .v.copy:active{transform:scale(.94);}
.egg-ok{
  padding:12px;border-radius:14px;font-size:15px;font-weight:700;color:#0a2e1f;
  background:var(--grad-btn);box-shadow:0 6px 20px rgba(61,220,151,0.35);cursor:pointer;
}
.egg-ok:active{transform:scale(.95);}

/* 信息流到底提示 */
.list-end{
  text-align:center;padding:28px 20px 10px;color:var(--text3);font-size:12px;line-height:1.8;
}
.list-end .le-ico{font-size:22px;opacity:.6;margin-bottom:6px;}
.list-end .le-btn{
  display:inline-block;margin-top:10px;padding:8px 16px;border-radius:99px;
  background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--green);
  font-size:12px;cursor:pointer;
}
.list-end .le-btn:active{transform:scale(.94);}

/* 表情反应按钮：选中态 */
.act.react{transition:all .2s;}
.act.react.reacted{
  background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,0.38);color:#fbbf24;
}
.act.react:active{transform:scale(.9);}

/* ============================================================
   抽签页 · 抽一条心事
   ============================================================ */
.pick-card{
  margin-top:14px;padding:18px 16px;border-radius:16px;text-align:left;
  background:linear-gradient(160deg,rgba(236,72,153,0.13),rgba(167,139,250,0.13));
  border:1px solid rgba(236,72,153,0.28);
  animation:pickIn .55s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pickIn{
  0%{opacity:0;transform:translateY(16px) scale(.94);}
  60%{transform:translateY(-4px) scale(1.02);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.pick-ico{font-size:30px;margin-bottom:10px;text-align:center;}
.pick-text{
  font-size:15px;line-height:1.75;color:rgba(255,255,255,0.94);
  white-space:pre-wrap;text-align:center;
}
.pick-from{
  margin-top:12px;padding-top:10px;font-size:12px;color:var(--text3);text-align:center;
  border-top:1px solid rgba(255,255,255,0.08);
}
.pick-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.pick-btn{
  padding:13px;border-radius:14px;text-align:center;font-size:15px;font-weight:700;
  cursor:pointer;transition:transform .15s;
}
.pick-btn:active{transform:scale(.96);}
.pick-btn.primary{
  background:var(--grad-btn);color:#0a2e1f;box-shadow:0 4px 18px rgba(61,220,151,0.30);
}
.pick-btn.ghost{
  background:rgba(255,255,255,0.08);border:1px solid var(--border-hi);color:var(--text2);
}
.pick-count{margin-top:14px;font-size:12px;color:var(--text3);}
.pick-count b{color:var(--pink);font-size:14px;}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
