/* ===================================================================
   Yuluo · 御萝  |  萝莉风格官网样式
   palette: 樱花粉 / 薰衣草紫 / 薄荷绿 / 奶油白
   =================================================================== */

:root{
  --pink-50:#fff6fb;
  --pink-100:#ffe6f3;
  --pink-200:#ffd0e7;
  --pink-300:#ffb3d8;
  --pink-400:#ff8fc6;
  --pink-500:#ff63b0;
  --pink-600:#ee479a;
  --lav-100:#f3ecff;
  --lav-200:#e2d6ff;
  --lav-300:#c9b5ff;
  --lav-400:#b299ff;
  --mint-100:#e6fbf4;
  --mint-200:#c3f4e4;
  --mint-300:#9ae9d5;
  --lemon:#fff5c2;
  --ink:#5c4566;
  --ink-soft:#8e7b97;
  --ink-mute:#b0a2b8;
  --white:#fff;
  --shadow-sm:0 4px 14px rgba(255,143,198,.18);
  --shadow-md:0 10px 30px rgba(198,150,220,.22);
  --shadow-lg:0 18px 48px rgba(186,140,210,.26);
  --radius-sm:14px;
  --radius:22px;
  --radius-lg:32px;
  --ring:0 0 0 4px rgba(255,179,216,.45);
  --font-cute:"ZCOOL KuaiLe","YouYuan","幼圆","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 8% -8%,#ffe9f5 0%,rgba(255,233,245,0) 60%),
    radial-gradient(900px 520px at 96% 4%,#eee6ff 0%,rgba(238,230,255,0) 62%),
    radial-gradient(760px 520px at 50% 108%,#e4fbf3 0%,rgba(228,251,243,0) 60%),
    var(--pink-50);
  line-height:1.75;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--pink-600);text-decoration:none}
a:hover{color:var(--pink-500)}
::selection{background:var(--pink-200);color:var(--ink)}

/* 滚动条也要可爱 */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--pink-100)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-300),var(--lav-300));
  border-radius:99px;border:3px solid var(--pink-100);
}

/* ---------------------------------------------------------------- 通用 */
.wrap{width:min(1160px,92vw);margin:0 auto}
.cute-tag{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.35em 1em;border-radius:999px;
  background:linear-gradient(135deg,#fff,var(--pink-100));
  border:2px dashed var(--pink-300);
  color:var(--pink-600);font-size:.86rem;font-weight:700;
  letter-spacing:.06em;
}
.section{padding:clamp(56px,8vw,104px) 0;position:relative}
.section-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.section-head h2{
  font-family:var(--font-cute);
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  margin:.7em 0 .3em;letter-spacing:.04em;
  background:linear-gradient(100deg,var(--pink-500),#a97bff 55%,var(--pink-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head p{margin:0;color:var(--ink-soft)}
.deco-line{
  width:120px;height:8px;margin:0 auto 18px;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--pink-300) 0 10px,transparent 10px 20px);
  opacity:.8;
}

/* 按钮 */
.btn{
  --btn-bg:linear-gradient(135deg,var(--pink-400),var(--pink-500));
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.86em 1.9em;border-radius:999px;border:0;
  font-family:var(--font-cute);font-size:1.02rem;font-weight:700;
  color:#fff;background:var(--btn-bg);
  box-shadow:0 10px 22px rgba(255,99,176,.32),inset 0 -3px 0 rgba(0,0,0,.08);
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px rgba(255,99,176,.4);color:#fff}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.ghost{
  background:rgba(255,255,255,.85);color:var(--pink-600);
  border:2px solid var(--pink-300);box-shadow:var(--shadow-sm);
}
.btn.ghost:hover{background:#fff;color:var(--pink-500)}
.btn.lav{background:linear-gradient(135deg,var(--lav-300),var(--lav-400));box-shadow:0 10px 22px rgba(178,153,255,.35)}
.btn.mint{background:linear-gradient(135deg,var(--mint-300),#6fd9c0);box-shadow:0 10px 22px rgba(111,217,192,.35)}
.btn.sm{padding:.6em 1.3em;font-size:.92rem}
.btn[disabled]{filter:grayscale(.55) opacity(.7);cursor:not-allowed;transform:none;box-shadow:none}

/* ---------------------------------------------------------------- 顶栏 */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,246,251,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:2px solid rgba(255,208,231,.7);
}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.logo-mark{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(255,143,198,.35))}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text b{font-family:var(--font-cute);font-size:1.32rem;letter-spacing:.06em;color:var(--pink-600)}
.logo-text small{font-size:.66rem;letter-spacing:.28em;color:var(--ink-mute)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  padding:.5em .95em;border-radius:999px;color:var(--ink-soft);
  font-size:.95rem;font-weight:600;transition:.2s;white-space:nowrap;
}
.nav a:hover,.nav a.active{background:var(--pink-100);color:var(--pink-600)}
.nav .nav-tg{
  display:inline-flex;align-items:center;gap:.4em;
  background:linear-gradient(135deg,#e8f4ff,#d9ecff);
  color:#2f7fd4;border:2px solid #bfe0ff;
}
.nav .nav-tg:hover{background:#d9ecff;color:#1f6fc4}
.nav-toggle{display:none;margin-left:auto;border:2px solid var(--pink-300);background:#fff;
  color:var(--pink-600);border-radius:14px;padding:.45em .8em;font-size:1.1rem;cursor:pointer}

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;padding:clamp(46px,7vw,96px) 0 clamp(40px,6vw,80px);overflow:hidden}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);
  align-items:center;position:relative;z-index:2;
}
.hero-copy h1{
  font-family:var(--font-cute);
  font-size:clamp(2.6rem,6.2vw,4.6rem);
  line-height:1.05;margin:.18em 0 .1em;letter-spacing:.02em;
}
.hero-copy h1 .grad{
  background:linear-gradient(100deg,var(--pink-500) 5%,#a97bff 48%,#5fd6bd 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 14px rgba(255,143,198,.35));
}
.hero-copy h1 .ribbon{
  display:inline-block;margin-left:.2em;font-size:.44em;vertical-align:super;
  padding:.25em .7em;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-500));
  transform:rotate(-6deg);box-shadow:var(--shadow-sm);
}
.hero-sub{
  font-size:clamp(1rem,1.6vw,1.16rem);color:var(--ink-soft);
  max-width:34em;margin:.6em 0 0;
}
.hero-sub b{color:var(--pink-600)}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.chip{
  display:inline-flex;align-items:center;gap:.42em;
  padding:.42em 1em;border-radius:999px;font-size:.86rem;font-weight:700;
  background:#fff;color:var(--ink-soft);border:2px solid var(--pink-100);
  box-shadow:0 4px 10px rgba(255,179,216,.16);
}
.chip i{font-style:normal;font-size:1em}
.chip.tg{color:#2f7fd4;border-color:#bfe0ff;background:#f2f9ff}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* 吉祥物舞台 */
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.art-ring{
  position:absolute;inset:auto;width:min(420px,86%);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,#fff 0 18%,rgba(255,255,255,0) 46%),
    conic-gradient(from 220deg,var(--pink-200),var(--lav-200),var(--mint-200),var(--pink-200));
  filter:blur(2px);opacity:.9;
  animation:spinSlow 26s linear infinite;
}
.art-ring:after{
  content:"";position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff 0 40%,#fff9fd 70%,#fff 100%);
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.mascot{position:relative;z-index:2;width:min(360px,82%);filter:drop-shadow(0 22px 34px rgba(198,150,220,.35))}
.mascot .blink{animation:blink 5.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%,98%{transform:scaleY(.08)}}
.mascot .arm-wave{transform-origin:70% 62%;animation:wave 3.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}45%{transform:rotate(-14deg)}55%{transform:rotate(-14deg)}}
.sticker{
  position:absolute;padding:.4em .9em;border-radius:999px;background:#fff;
  font-family:var(--font-cute);font-size:.9rem;color:var(--pink-600);
  border:2px solid var(--pink-200);box-shadow:var(--shadow-sm);z-index:3;
  animation:floaty 5s ease-in-out infinite;
}
.sticker.s1{top:6%;left:-2%;transform:rotate(-8deg)}
.sticker.s2{bottom:12%;right:-2%;animation-delay:.9s;color:#7a5cd6;border-color:var(--lav-200)}
.sticker.s3{bottom:-2%;left:12%;animation-delay:1.7s;color:#2fa98c;border-color:var(--mint-200)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-12px) rotate(var(--rot,0deg))}}
.sticker.s1{--rot:-8deg}.sticker.s2{--rot:3deg}.sticker.s3{--rot:-2deg}

.hero-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;z-index:0;pointer-events:none}
.hero-blob.b1{width:420px;height:420px;background:var(--pink-200);top:-120px;left:-120px}
.hero-blob.b2{width:360px;height:360px;background:var(--lav-200);bottom:-140px;right:-80px}
.hero-blob.b3{width:260px;height:260px;background:var(--mint-200);top:40%;right:26%}

/* 樱花 / 星星 漂浮层 */
.petal-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{
  position:absolute;top:-40px;width:14px;height:14px;border-radius:60% 20% 60% 20%;
  background:linear-gradient(135deg,var(--pink-300),var(--pink-200));
  opacity:.75;animation:fall linear infinite;
}
@keyframes fall{
  0%{transform:translate3d(0,-60px,0) rotate(0deg);opacity:0}
  10%{opacity:.8}
  100%{transform:translate3d(var(--drift,60px),108vh,0) rotate(540deg);opacity:0}
}

/* ---------------------------------------------------------------- 跑马灯 */
.marquee{
  border-top:2px dashed var(--pink-200);border-bottom:2px dashed var(--pink-200);
  background:linear-gradient(90deg,#fff6fb,#f4eeff,#effcf8,#fff6fb);
  overflow:hidden;padding:12px 0;
}
.marquee-track{display:flex;gap:2.4rem;width:max-content;animation:scrollX 30s linear infinite}
.marquee-track span{
  font-family:var(--font-cute);font-size:1rem;letter-spacing:.14em;
  color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:.7em;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- 关于 */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.about-card{
  background:linear-gradient(160deg,#fff,#fff8fc 60%,#f8f2ff);
  border:2px solid var(--pink-100);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.about-card:before{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--pink-100),transparent 70%);
  top:-70px;right:-60px;
}
.about-card h3{font-family:var(--font-cute);font-size:1.5rem;margin:.1em 0 .6em;color:var(--pink-600)}
.about-card p{margin:.2em 0 1em;color:var(--ink-soft)}
.about-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.about-list li{display:flex;gap:.7em;align-items:flex-start;color:var(--ink-soft)}
.about-list i{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink-100);color:var(--pink-600);font-style:normal;font-size:.86rem;font-weight:700;
}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{
  background:#fff;border:2px solid var(--lav-100);border-radius:var(--radius);
  padding:18px;text-align:center;box-shadow:var(--shadow-sm);
}
.stat b{
  display:block;font-family:var(--font-cute);font-size:1.7rem;
  background:linear-gradient(120deg,var(--pink-500),var(--lav-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:.84rem;color:var(--ink-mute);letter-spacing:.06em}

/* ---------------------------------------------------------------- 特色 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.feat{
  position:relative;background:#fff;border:2px solid var(--pink-100);
  border-radius:var(--radius);padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
  overflow:hidden;
}
.feat:nth-child(3n+1){border-color:var(--pink-200)}
.feat:nth-child(3n+2){border-color:var(--lav-200)}
.feat:nth-child(3n){border-color:var(--mint-200)}
.feat:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:var(--shadow-lg)}
.feat-ico{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(135deg,var(--pink-100),#fff);
  border:2px solid #fff;box-shadow:0 6px 16px rgba(255,143,198,.22);
  font-size:1.6rem;
}
.feat:nth-child(3n+2) .feat-ico{background:linear-gradient(135deg,var(--lav-100),#fff)}
.feat:nth-child(3n) .feat-ico{background:linear-gradient(135deg,var(--mint-100),#fff)}
.feat h3{font-family:var(--font-cute);font-size:1.16rem;margin:0 0 .4em;letter-spacing:.02em}
.feat p{margin:0;font-size:.94rem;color:var(--ink-soft)}
.feat .dot{
  position:absolute;right:16px;top:16px;width:10px;height:10px;border-radius:50%;
  background:var(--pink-300);opacity:.8;
}

/* ---------------------------------------------------------------- 卡密专区 */
.card-zone{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#fff2f9,#f6efff 52%,#eefcf7);
  border:2px solid #fff;box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,52px);
}
.card-zone:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,143,198,.28),transparent 42%),
    radial-gradient(circle at 6% 92%,rgba(154,233,213,.32),transparent 46%);
}
.card-zone-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,3vw,42px);align-items:center}
.card-zone h2{font-family:var(--font-cute);font-size:clamp(1.5rem,3vw,2.2rem);margin:.1em 0 .4em}
.card-zone p{color:var(--ink-soft);margin:.2em 0 1.2em}
.card-zone .steps{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none;counter-reset:s}
.card-zone .steps li{position:relative;padding-left:2.4em;color:var(--ink-soft);font-size:.95rem}
.card-zone .steps li:before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:.1em;width:1.7em;height:1.7em;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--pink-400),var(--lav-400));
}
.ticket{
  background:#fff;border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow-md);border:2px dashed var(--pink-300);
  transform:rotate(1.6deg);transition:transform .3s;
}
.ticket:hover{transform:rotate(0) translateY(-4px)}
.ticket h4{font-family:var(--font-cute);margin:0 0 .2em;font-size:1.15rem;color:var(--pink-600)}
.ticket .mini{font-size:.82rem;color:var(--ink-mute);margin-bottom:14px}
.ticket .row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--pink-100);font-size:.92rem;color:var(--ink-soft)}
.ticket .row:last-of-type{border-bottom:0}
.ticket .row b{color:var(--ink);font-family:var(--font-cute);font-weight:700}

/* ---------------------------------------------------------------- 团队 */
.team-card{
  text-align:center;background:#fff;border:2px solid var(--lav-100);
  border-radius:var(--radius);padding:26px 18px 24px;box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s;
}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.avatar{
  width:96px;height:96px;margin:0 auto 12px;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:0 8px 20px rgba(198,150,220,.3);
  background:linear-gradient(135deg,var(--pink-100),var(--lav-100));
  display:grid;place-items:center;
}
.team-card h4{font-family:var(--font-cute);margin:0;font-size:1.1rem}
.team-card .role{font-size:.8rem;color:var(--pink-600);letter-spacing:.1em;margin:.2em 0 .6em}
.team-card p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ---------------------------------------------------------------- 联系 */
.contact{
  border-radius:var(--radius-lg);padding:clamp(26px,4vw,46px);
  background:linear-gradient(135deg,#e9f4ff,#f3ecff 55%,#ffeaf5);
  border:2px solid #fff;box-shadow:var(--shadow-md);text-align:center;
}
.contact h2{font-family:var(--font-cute);font-size:clamp(1.5rem,3vw,2.1rem);margin:.1em 0 .3em}
.contact p{color:var(--ink-soft);margin:.2em 0 1.2em}
.tg-box{
  display:inline-flex;align-items:center;gap:.8em;flex-wrap:wrap;justify-content:center;
  background:#fff;border:2px solid #bfe0ff;border-radius:999px;
  padding:.6em .9em .6em 1.2em;box-shadow:var(--shadow-sm);
}
.tg-box .tg-id{
  font-family:var(--font-cute);font-size:1.24rem;letter-spacing:.03em;
  background:linear-gradient(120deg,#2f7fd4,#7a5cd6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tg-box a.tg-link{
  font-size:.8rem;color:#8e7b97;background:var(--pink-50);border-radius:999px;
  padding:.35em .9em;border:1px dashed var(--pink-200);
}
.copy-btn{
  border:0;cursor:pointer;border-radius:999px;padding:.6em 1.15em;
  background:linear-gradient(135deg,#5aa9ff,#2f7fd4);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 8px 18px rgba(47,127,212,.3);transition:.2s;
}
.copy-btn:hover{transform:translateY(-2px)}
.copy-hint{font-size:.78rem;color:var(--ink-mute);margin-top:.7em;min-height:1.2em}

/* ---------------------------------------------------------------- 页脚 */
.site-footer{
  margin-top:clamp(40px,6vw,70px);padding:34px 0 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),#fff);
  border-top:2px dashed var(--pink-200);
}
.footer-inner{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand b{font-family:var(--font-cute);color:var(--pink-600);font-size:1.1rem}
.footer-brand small{color:var(--ink-mute);font-size:.76rem;display:block;letter-spacing:.04em}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem}
.footer-links a{color:var(--ink-soft)}
.footer-links a:hover{color:var(--pink-500)}
.footer-bottom{margin-top:18px;padding-top:16px;border-top:1px dashed var(--pink-100);
  font-size:.78rem;color:var(--ink-mute);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}

/* ---------------------------------------------------------------- 悬浮件 */
.float-tg{
  position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:.5em;
  padding:.7em 1.1em;border-radius:999px;background:linear-gradient(135deg,#5aa9ff,#2f7fd4);
  color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;
  box-shadow:0 12px 26px rgba(47,127,212,.36);transition:.25s;
}
.float-tg:hover{transform:translateY(-3px) scale(1.03);color:#fff}
.float-tg .pulse{
  width:9px;height:9px;border-radius:50%;background:#b7ffdd;
  box-shadow:0 0 0 0 rgba(183,255,221,.8);animation:pulse 2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(183,255,221,0)}100%{box-shadow:0 0 0 0 rgba(183,255,221,0)}}
.backtop{
  position:fixed;right:18px;bottom:78px;z-index:80;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--pink-200);background:#fff;color:var(--pink-500);cursor:pointer;
  font-size:1.1rem;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:.3s;
}
.backtop.show{opacity:1;pointer-events:auto}
.backtop:hover{transform:translateY(-3px)}

/* 光标星尘 */
.spark{
  position:fixed;pointer-events:none;z-index:90;font-size:12px;color:var(--pink-400);
  animation:sparkOut .8s ease-out forwards;
}
@keyframes sparkOut{
  0%{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.6) rotate(90deg);opacity:0}
}

/* 揭示动画 */
html.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
html.js-reveal .reveal.in{opacity:1;transform:none}

/* ================================================================
   卡密解绑页
   ================================================================ */
.page-hero{padding:clamp(34px,5vw,64px) 0 10px;text-align:center;position:relative}
.page-hero h1{font-family:var(--font-cute);font-size:clamp(1.9rem,4.4vw,2.9rem);margin:.1em 0 .25em}
.page-hero h1 .grad{background:linear-gradient(100deg,var(--pink-500),#a97bff 60%,#5fd6bd);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{color:var(--ink-soft);margin:0 auto;max-width:44em}

.panel{
  background:#fff;border-radius:var(--radius-lg);border:2px solid var(--pink-100);
  box-shadow:var(--shadow-lg);padding:clamp(20px,3.2vw,38px);position:relative;overflow:hidden;
}
.panel:before{
  content:"";position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(90deg,var(--pink-300) 0 14px,var(--lav-300) 14px 28px,var(--mint-300) 28px 42px);
  opacity:.75;
}
.panel h2{font-family:var(--font-cute);font-size:1.3rem;margin:.2em 0 .2em}
.panel .hint{font-size:.86rem;color:var(--ink-mute);margin:0 0 18px}

.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-bottom:.5em;letter-spacing:.04em}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .ico{position:absolute;left:16px;font-size:1.1rem;opacity:.7}
input[type=text],input[type=password]{
  width:100%;padding:.95em 1.1em .95em 2.9em;border-radius:16px;
  border:2px solid var(--pink-200);background:var(--pink-50);color:var(--ink);
  font-family:var(--font-cute);font-size:1.06rem;letter-spacing:.14em;transition:.2s;
}
input[type=text]::placeholder{color:var(--ink-mute);letter-spacing:.08em;font-family:var(--font-body);font-size:.94rem}
input[type=text]:focus,input[type=password]:focus{
  outline:none;border-color:var(--pink-400);background:#fff;box-shadow:var(--ring);
}
input.bad{border-color:#ff8f8f;background:#fff5f5}

.captcha-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.captcha-row .field{flex:1 1 220px;margin-bottom:0}
.captcha-chip{
  display:flex;align-items:center;gap:.6em;padding:.62em 1em;border-radius:16px;
  background:linear-gradient(135deg,#f6efff,#fff2f9);border:2px dashed var(--lav-300);
  font-family:var(--font-cute);font-size:1.06rem;color:#7a5cd6;letter-spacing:.1em;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.captcha-chip:hover{filter:brightness(1.03)}
.captcha-chip small{font-family:var(--font-body);font-size:.7rem;color:var(--ink-mute);letter-spacing:0}

.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.msg{font-size:.9rem;margin-top:12px;min-height:1.4em}
.msg.err{color:#e0528a}
.msg.ok{color:#1f9c7e}

/* 结果卡 */
.result{margin-top:22px;display:none}
.result.show{display:block;animation:popIn .4s cubic-bezier(.2,.8,.3,1.4)}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.result-card{
  border-radius:var(--radius);border:2px solid var(--pink-200);
  background:linear-gradient(160deg,#fff,#fff7fc 60%,#f8f2ff);
  padding:clamp(16px,2.4vw,26px);position:relative;
}
.result-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.result-head .who{font-family:var(--font-cute);font-size:1.16rem}
.result-head .who small{display:block;font-family:var(--font-body);font-size:.76rem;color:var(--ink-mute);letter-spacing:.06em}
.badge{
  display:inline-flex;align-items:center;gap:.4em;padding:.34em 1em;border-radius:999px;
  font-size:.8rem;font-weight:800;letter-spacing:.04em;
}
.badge.ok{background:#e5fbf3;color:#1f9c7e;border:2px solid #b8f0df}
.badge.warn{background:#fff6de;color:#b8860b;border:2px solid #ffe6a8}
.badge.bad{background:#ffeef4;color:#d63d7c;border:2px solid #ffcadf}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.info{
  background:#fff;border:2px solid var(--pink-100);border-radius:16px;padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.info span{font-size:.76rem;color:var(--ink-mute);letter-spacing:.06em}
.info b{font-family:var(--font-cute);font-size:1rem;color:var(--ink);word-break:break-all}
.info b.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.9rem;letter-spacing:.02em}
.info.full{grid-column:1/-1}
.info.accent b{color:var(--pink-600)}

.unbind-area{margin-top:18px;padding-top:16px;border-top:2px dashed var(--pink-100)}
.unbind-note{font-size:.82rem;color:var(--ink-mute);margin:.6em 0 0;line-height:1.65}
.device-empty{color:#b8860b}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;z-index:120;background:rgba(92,69,102,.32);
  backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.show{display:flex}
.modal{
  width:min(420px,100%);background:#fff;border-radius:var(--radius-lg);
  border:2px solid var(--pink-200);box-shadow:var(--shadow-lg);padding:26px;text-align:center;
  animation:popIn .32s cubic-bezier(.2,.8,.3,1.3);
}
.modal h3{font-family:var(--font-cute);margin:.2em 0 .4em;font-size:1.26rem}
.modal p{color:var(--ink-soft);font-size:.92rem;margin:0 0 1.2em;white-space:pre-line}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-ico{font-size:2.2rem;line-height:1}

/* 规则区 */
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.rule{background:#fff;border:2px dashed var(--lav-200);border-radius:var(--radius);padding:18px}
.rule h4{font-family:var(--font-cute);margin:.1em 0 .4em;font-size:1rem;color:#7a5cd6}
.rule p{margin:0;font-size:.86rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:1}
  .hero-art{order:2;min-height:300px;margin-top:10px}
  .hero-cta,.hero-badges{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .about-grid,.card-zone-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{position:absolute;top:100%;left:0;right:0;background:rgba(255,246,251,.98);
    border-bottom:2px solid var(--pink-100);flex-direction:column;align-items:stretch;
    padding:10px 14px 16px;display:none;box-shadow:var(--shadow-md)}
  .nav.open{display:flex}
  .nav a{padding:.7em 1em}
  .nav-toggle{display:block}
  .header-inner{position:relative}
  .grid-3,.rules,.info-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .float-tg{right:12px;bottom:12px;padding:.6em .95em;font-size:.84rem}
  .backtop{right:12px;bottom:70px}
  .petal{width:11px;height:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}