/* ============================================================
   wangzeyue.uk — 玻璃拟态 · 深色渐变
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  --bg-0:#06060d;
  --bg-1:#0b0a18;
  --bg-2:#120f24;

  --glass:        rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.085);
  --glass-hover:  rgba(255,255,255,.11);
  --stroke:       rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.18);

  --text:   #eef0f8;
  --text-2: #c3c9dd;
  --muted:  #8e96b0;
  --faint:  #6b7391;

  --violet:#8b5cf6;
  --cyan:  #22d3ee;
  --pink:  #f472b6;
  --lime:  #a3e635;

  --accent-grad: linear-gradient(135deg,#8b5cf6 0%,#22d3ee 55%,#a3e635 100%);
  --accent-soft: linear-gradient(135deg,rgba(139,92,246,.18),rgba(34,211,238,.14));

  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,.35);
  --shadow-3: 0 24px 70px rgba(0,0,0,.55);
  --ring: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 900px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

::selection{ background:rgba(139,92,246,.4); color:#fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:padding-box; }

/* ============================================================
   背景：动态流光 · 多层极光 · 光束 · 星点 · 网格 · 噪点 · 暗角
   ============================================================ */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg::after{ /* 噪点 */
  content:""; position:absolute; inset:-50%;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 旋转流光锥形渐变（流光主体） ---- */
.flow-ribbon{
  position:absolute; inset:-25%;
  background:conic-gradient(from 0deg at 38% 42%,
    transparent 0deg,
    rgba(139,92,246,.22) 28deg,
    rgba(34,211,238,.18) 82deg,
    rgba(244,114,182,.16) 152deg,
    rgba(163,230,53,.12) 222deg,
    rgba(245,158,11,.10) 288deg,
    transparent 340deg);
  filter:blur(95px);
  animation:spin 26s linear infinite;
  opacity:.75;
  mix-blend-mode:screen;
}

/* ---- 五团极光（多层有机漂移） ---- */
.aurora{
  position:absolute; border-radius:50%;
  filter:blur(90px);
  will-change:transform;
  mix-blend-mode:screen;
}
.aurora.a1{
  width:48vw; height:48vw; min-width:380px; min-height:380px;
  top:-16vw; left:-12vw;
  background:radial-gradient(circle, #7c3aed 0%, transparent 65%);
  opacity:.55;
  animation:float1 12s var(--ease) infinite alternate;
}
.aurora.a2{
  width:42vw; height:42vw; min-width:340px; min-height:340px;
  top:18vh; right:-14vw;
  background:radial-gradient(circle, #06b6d4 0%, transparent 65%);
  opacity:.5;
  animation:float2 14s var(--ease) infinite alternate;
}
.aurora.a3{
  width:36vw; height:36vw; min-width:300px; min-height:300px;
  bottom:-16vw; left:22vw;
  background:radial-gradient(circle, #ec4899 0%, transparent 68%);
  opacity:.42;
  animation:float3 13s var(--ease) infinite alternate;
}
.aurora.a4{
  width:34vw; height:34vw; min-width:280px; min-height:280px;
  bottom:6vh; right:6vw;
  background:radial-gradient(circle, #a3e635 0%, transparent 65%);
  opacity:.3;
  animation:float4 16s var(--ease) infinite alternate;
}
.aurora.a5{
  width:30vw; height:30vw; min-width:260px; min-height:260px;
  top:48vh; left:-10vw;
  background:radial-gradient(circle, #f59e0b 0%, transparent 65%);
  opacity:.22;
  animation:float5 18s var(--ease) infinite alternate;
}
@keyframes float1{ from{transform:translate3d(0,0,0) scale(1)    rotate(0deg)}  to{transform:translate3d(9vw,7vh,0)   scale(1.18) rotate(18deg)}  }
@keyframes float2{ from{transform:translate3d(0,0,0) scale(1.08) rotate(0deg)}  to{transform:translate3d(-10vw,-8vh,0) scale(.92)  rotate(-22deg)} }
@keyframes float3{ from{transform:translate3d(0,0,0) scale(.94)  rotate(0deg)}  to{transform:translate3d(7vw,-9vh,0)  scale(1.2)  rotate(26deg)}  }
@keyframes float4{ from{transform:translate3d(0,0,0) scale(1)    rotate(0deg)}  to{transform:translate3d(-8vw,6vh,0)  scale(1.15) rotate(-30deg)} }
@keyframes float5{ from{transform:translate3d(0,0,0) scale(.96)  rotate(0deg)}  to{transform:translate3d(6vw,8vh,0)   scale(1.12) rotate(24deg)}  }

/* ---- 横扫光束（柔光斜扫过屏幕） ---- */
.streak{
  position:absolute;
  top:-30%; left:-60%;
  width:220%; height:55%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.04) 38%,
    rgba(139,92,246,.14) 48%,
    rgba(34,211,238,.12) 52%,
    rgba(255,255,255,.04) 62%,
    transparent 100%);
  transform:rotate(-20deg);
  animation:streakMove 8s var(--ease) infinite alternate;
  filter:blur(20px);
}
@keyframes streakMove{
  0%  { transform:rotate(-20deg) translateX(-32%); }
  100%{ transform:rotate(-20deg) translateX(32%);  }
}

/* ---- 闪烁星点 ---- */
.sparkles{ position:absolute; inset:0; }
.sparkles span{
  position:absolute;
  width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.2) 40%, transparent 70%);
  box-shadow:0 0 8px 1px rgba(255,255,255,.4);
  animation:twinkle 5s ease-in-out infinite;
  will-change:opacity, transform;
}
.sparkles span:nth-child(1){ top:14%; left:18%; animation-delay:0s;    animation-duration:2.8s; }
.sparkles span:nth-child(2){ top:32%; left:76%; animation-delay:.7s;   animation-duration:3.2s; width:2px; height:2px; }
.sparkles span:nth-child(3){ top:58%; left:42%; animation-delay:1.3s;  animation-duration:2.6s; }
.sparkles span:nth-child(4){ top:72%; left:84%; animation-delay:.45s;  animation-duration:3s;   width:2px; height:2px; }
.sparkles span:nth-child(5){ top:84%; left:22%; animation-delay:1.7s;  animation-duration:3.4s; }
.sparkles span:nth-child(6){ top:42%; left:62%; animation-delay:1s;    animation-duration:2.9s; width:2px; height:2px; }
.sparkles span:nth-child(7){ top:22%; left:48%; animation-delay:1.4s;  animation-duration:3.6s; width:2px; height:2px; }
.sparkles span:nth-child(8){ top:66%; left:14%; animation-delay:.25s;  animation-duration:3.3s; }
@keyframes twinkle{
  0%,100%{ opacity:.18; transform:scale(.8); }
  50%    { opacity:1;   transform:scale(1.5); }
}

/* ---- 网格遮罩 ---- */
.grid-veil{
  position:absolute; inset:0; opacity:.45;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 22%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 22%, transparent 80%);
}

/* ---- 暗角（增加纵深） ---- */
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 110% 95% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ============================================================
   布局
   ============================================================ */
.wrap{
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 20px 96px;
  position:relative; z-index:1;
}

/* ============================================================
   玻璃卡片
   ============================================================ */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:var(--ring);
  overflow:hidden;
}
/* 顶部高光 */
.glass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%);
  opacity:.85;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  margin-top:56px; padding:48px 40px 40px;
  text-align:center;
  animation:rise .8s var(--ease) both;
}
@keyframes rise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

.avatar-ring{
  position:relative; width:132px; height:132px;
  margin:0 auto 22px;
}
.avatar-ring::before{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg,#8b5cf6,#22d3ee,#f472b6,#a3e635,#8b5cf6);
  animation:spin 9s linear infinite;
  filter:blur(1px);
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.avatar-ring::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg,#8b5cf6,#22d3ee,#f472b6,#a3e635,#8b5cf6);
  animation:spin 9s linear infinite;
  filter:blur(16px); opacity:.7; z-index:-1;
}
.avatar{
  position:relative; width:132px; height:132px;
  border-radius:50%; object-fit:cover;
  border:4px solid #0d0c18;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .45s var(--ease);
  background:#15142a;
}
.avatar-ring:hover .avatar{ transform:scale(1.045); }

.name{
  margin:0; font-size:clamp(30px,5.4vw,42px);
  font-weight:800; letter-spacing:.02em; line-height:1.2;
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.tagline{ margin:10px 0 0; color:var(--text-2); font-size:16px; }
.tagline .dot{ color:var(--faint); margin:0 8px; }

.status{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; padding:6px 14px 6px 11px;
  font-size:12.5px; color:var(--text-2); letter-spacing:.02em;
  background:rgba(163,230,53,.09);
  border:1px solid rgba(163,230,53,.22);
  border-radius:99px;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 0 rgba(163,230,53,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(163,230,53,.55) }
  70%{ box-shadow:0 0 0 9px rgba(163,230,53,0) }
  100%{ box-shadow:0 0 0 0 rgba(163,230,53,0) }
}

/* ---------- 联系方式 ---------- */
.contacts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:26px;
}
.contact{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px;
  font-size:13.5px; color:var(--text-2);
  background:var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius:99px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:all .25s var(--ease);
  position:relative;
}
.contact:hover{
  color:#fff; background:var(--glass-hover);
  border-color:var(--stroke-strong);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.contact svg{ width:15px; height:15px; flex:none; opacity:.85; }
.contact .v{ font-weight:600; letter-spacing:.01em; }
.contact .copy-hint{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%) translateY(6px);
  padding:3px 9px; font-size:11.5px; white-space:nowrap;
  background:#fff; color:#111; border-radius:6px;
  opacity:0; pointer-events:none; transition:all .2s var(--ease);
  font-weight:600;
}
.contact.copied .copy-hint{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 入口按钮 ---------- */
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; font-size:14.5px; font-weight:600;
  border-radius:99px; border:1px solid var(--stroke);
  background:var(--glass-strong);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text);
  transition:all .28s var(--ease);
  position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--stroke-strong); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:var(--accent-grad);
  color:#0a0912; border-color:transparent; font-weight:700;
  box-shadow:0 10px 30px rgba(139,92,246,.32);
}
.btn-primary:hover{ box-shadow:0 14px 40px rgba(139,92,246,.45); }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);
}
.btn-primary:hover::after{ animation:sheen .75s var(--ease); }
@keyframes sheen{ to{ transform:translateX(100%) } }
.btn-sm{ padding:8px 16px; font-size:13px; }

/* 主页大号 CTA：体验我最新的系统 */
.hero-cta{ display:flex; justify-content:center; margin-top:4px; }
.btn-cta{
  padding:16px 36px; font-size:17px; font-weight:800; letter-spacing:.4px;
  box-shadow:0 14px 44px rgba(139,92,246,.5);
  animation:ctaPulse 2.8s var(--ease) infinite;
}
.btn-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 56px rgba(139,92,246,.62);
  animation:none;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 14px 44px rgba(139,92,246,.42); }
  50%{ box-shadow:0 16px 56px rgba(139,92,246,.7); }
}

/* ============================================================
   区块
   ============================================================ */
.section{ margin-top:34px; }

.sec-head{
  display:flex; align-items:center; gap:12px;
  padding:22px 26px; width:100%; text-align:left;
  transition:background .25s var(--ease);
}
.sec-icon{
  width:40px; height:40px; flex:none; border-radius:13px;
  display:grid; place-items:center;
  background:var(--accent-grad);
  border:1px solid rgba(255,255,255,.18);
  font-size:18px; color:#0a0912;
  box-shadow:0 6px 20px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sec-head:hover .sec-icon{ transform:rotate(-6deg) scale(1.05); box-shadow:0 10px 28px rgba(139,92,246,.45); }
.sec-title{ flex:1; min-width:0; }
.sec-title h2{
  margin:0; font-size:18px; font-weight:800; letter-spacing:.005em;
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sec-title p{ margin:3px 0 0; font-size:12.5px; color:var(--muted); }
.chev{
  width:20px; height:20px; flex:none; color:var(--faint);
  transition:transform .35s var(--ease), color .25s;
}
.section.open .chev{ transform:rotate(180deg); color:var(--text-2); }

.sec-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
}
.section.open .sec-body{ grid-template-rows:1fr; }
.sec-body > .inner{ overflow:hidden; }
.sec-pad{ padding:0 26px 26px; }

/* 分隔线 */
.hr{ height:1px; background:linear-gradient(90deg,transparent,var(--stroke),transparent); margin:4px 26px; }

/* ============================================================
   工具：通用控件
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.label{ font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.03em; }

.input, .textarea{
  width:100%; padding:12px 14px;
  font-size:14px; color:var(--text);
  background:rgba(0,0,0,.28);
  border:1px solid var(--stroke);
  border-radius:var(--r-md);
  transition:all .22s var(--ease);
  font-family:inherit;
}
.textarea{ resize:vertical; min-height:96px; line-height:1.7; }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.textarea:focus{
  outline:none;
  border-color:rgba(139,92,246,.55);
  background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(139,92,246,.14);
}

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grow{ flex:1 1 160px; min-width:0; }

.tool-wrap{ display:flex; flex-direction:column; gap:14px; }

/* 二维码 */
.qr-stage{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:22px; border-radius:var(--r-lg);
  background:rgba(0,0,0,.24);
  border:1px dashed var(--stroke);
}
.qr-box{
  width:200px; height:200px; border-radius:16px;
  background:#fff; padding:12px;
  display:grid; place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:opacity .3s var(--ease);
}
.qr-box canvas, .qr-box img{ width:100%; height:100%; border-radius:6px; }
.qr-empty{ color:var(--faint); font-size:13px; text-align:center; padding:0 10px; }

/* 时间戳 */
.ts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.ts-card{
  padding:16px; border-radius:var(--r-lg);
  background:rgba(0,0,0,.24); border:1px solid var(--stroke);
}
.ts-card h4{ margin:0 0 10px; font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.04em; }
.ts-out{
  font-family:var(--mono); font-size:13px; color:var(--cyan);
  word-break:break-all; min-height:22px; line-height:1.6;
}
.ts-out.empty{ color:var(--faint); }

/* 文本处理 */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.stat{
  padding:12px 10px; text-align:center; border-radius:var(--r-md);
  background:rgba(0,0,0,.24); border:1px solid var(--stroke);
}
.stat b{ display:block; font-size:19px; font-weight:700; letter-spacing:.01em;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.stat span{ font-size:11.5px; color:var(--muted); }

/* ============================================================
   捐赠
   ============================================================ */
.donate-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.donate-card{
  padding:20px; text-align:center; border-radius:var(--r-lg);
  background:rgba(0,0,0,.24); border:1px solid var(--stroke);
  transition:all .3s var(--ease);
}
.donate-card:hover{ border-color:var(--stroke-strong); transform:translateY(-3px); }
.donate-card h4{ margin:0 0 4px; font-size:14.5px; font-weight:700; }
.donate-card p{ margin:0 0 14px; font-size:12.5px; color:var(--muted); }
.qr-mini{
  width:150px; height:150px; margin:0 auto;
  padding:8px; background:#fff; border-radius:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.qr-mini img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }

/* ============================================================
   Footer
   ============================================================ */
.foot{
  margin-top:44px; text-align:center;
  font-size:12.5px; color:var(--faint); line-height:2;
}
.foot .heart{ color:var(--pink); }
.foot a{ color:var(--muted); border-bottom:1px solid transparent; transition:.2s; }
.foot a:hover{ color:var(--text); border-bottom-color:var(--stroke-strong); }

/* 回到顶部 */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass-strong); border:1px solid var(--stroke-strong);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text-2); font-size:17px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .32s var(--ease);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ color:#fff; background:var(--glass-hover); transform:translateY(-3px); }

/* Toast */
.toast-host{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:999; display:flex; flex-direction:column; gap:9px;
  align-items:center; pointer-events:none;
}
.toast{
  padding:11px 20px; font-size:13.5px; font-weight:500;
  border-radius:99px; color:#0b0a14;
  background:linear-gradient(135deg,#e9e4ff,#c7f5ff);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:toastIn .3s var(--ease) both;
  white-space:nowrap;
}
.toast.err{ background:linear-gradient(135deg,#ffd9d9,#ffc0cb); }
@keyframes toastIn{ from{opacity:0; transform:translateY(14px) scale(.94)} to{opacity:1; transform:none} }
.toast.out{ animation:toastOut .28s var(--ease) both; }
@keyframes toastOut{ to{opacity:0; transform:translateY(10px) scale(.96)} }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:720px){
  .hero{ margin-top:32px; padding:36px 22px 32px; }
  .avatar-ring,.avatar{ width:108px; height:108px; }
  .sec-head{ padding:18px 18px; }
  .sec-pad{ padding:0 18px 20px; }
  .hr{ margin:4px 18px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .to-top{ right:14px; bottom:14px; }
}
@media (max-width:420px){
  .wrap{ padding:0 14px 80px; }
  .contacts{ gap:8px; }
  .contact{ padding:9px 13px; font-size:12.5px; }
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}