:root { color-scheme: dark; --red:#ff2b2b; --red2:#a50000; --muted:#a6a6a6; }
* { box-sizing:border-box; }
html { background:#050505; }
body { margin:0; min-height:100vh; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:#050505; color:#fff; }
button { font:inherit; }
.page-shell { width:min(100%, 480px); min-height:100vh; margin:auto; overflow:hidden; background:#080808; }
.hero { position:relative; min-height:100svh; padding:24px 22px calc(24px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 33%, rgba(202,0,0,.32), transparent 34%), linear-gradient(160deg,#161616 0%,#050505 58%,#120000 100%); isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.32; background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px); }
.noise { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:900; letter-spacing:2px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ff4b4b; background:linear-gradient(145deg,#e30000,#400); clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%); }
.eyebrow { display:flex; align-items:center; gap:9px; margin-top:48px; font-size:12px; letter-spacing:1.5px; color:#cacaca; }
.eyebrow i { display:block; width:28px; height:2px; background:var(--red); box-shadow:0 0 8px var(--red); }
h1 { margin:15px 0 12px; font-size:clamp(42px,13vw,58px); line-height:1.08; letter-spacing:-3px; }
h1 em,.success-head em { color:var(--red); font-style:normal; text-shadow:0 0 24px rgba(255,30,30,.35); }
.subtitle { max-width:340px; margin:0; color:#aaa; font-size:14px; line-height:1.8; }
.member-card { position:relative; height:152px; margin:26px 0 20px; padding:24px; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:linear-gradient(135deg,#2b2b2b,#090909 55%,#260000); box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.1); transform:perspective(800px) rotateX(2deg); }
.member-card::after { content:"FH"; position:absolute; right:16px; bottom:-24px; font-size:90px; font-weight:1000; font-style:italic; color:rgba(255,255,255,.045); }
.card-glow { position:absolute; width:140px; height:140px; right:-30px; top:-40px; border-radius:50%; background:#d90000; filter:blur(45px); opacity:.3; }
.card-label { display:block; color:#aaa; font-size:10px; letter-spacing:2px; }
.member-card strong { display:block; margin-top:10px; font-size:25px; letter-spacing:1px; }
.card-meta { display:flex; gap:16px; position:absolute; left:24px; bottom:22px; color:#bbb; font-size:11px; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.benefits div { padding:10px 6px; border-left:1px solid #303030; }
.benefits b,.benefits span { display:block; }
.benefits b { color:#5f5f5f; font-size:11px; }
.benefits span { margin-top:4px; font-size:13px; }
.claim-button { width:100%; min-height:64px; border:0; border-radius:16px; color:#fff; background:linear-gradient(100deg,#b40000,#ff3232 55%,#bd0000); box-shadow:0 10px 34px rgba(255,0,0,.26),inset 0 1px rgba(255,255,255,.28); cursor:pointer; animation:pulse 2.3s infinite; }
.claim-button span,.claim-button small { display:block; }
.claim-button span { font-size:20px; font-weight:900; letter-spacing:2px; }
.claim-button small { margin-top:3px; color:#ffd1d1; font-size:10px; }
.safe-tip { margin:11px 0 0; color:#666; font-size:11px; text-align:center; }
@keyframes pulse { 50% { box-shadow:0 10px 42px rgba(255,0,0,.5), inset 0 1px rgba(255,255,255,.28); transform:translateY(-1px); } }
.success-view { display:none; min-height:100svh; padding:30px 18px calc(32px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 0,rgba(190,0,0,.23),transparent 30%),#090909; }
.success-view.is-active { display:block; animation:rise .55s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity:0; transform:translateY(28px); } }
.success-head { text-align:center; }
.check { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 10px; border-radius:50%; background:var(--red); font-size:27px; box-shadow:0 0 30px rgba(255,0,0,.4); }
.success-head>span { color:#8c8c8c; font-size:12px; letter-spacing:3px; }
.success-head h2 { margin:8px 0; font-size:34px; line-height:1.16; }
.success-head p { margin:0 auto 20px; max-width:340px; color:#8e8e8e; font-size:13px; line-height:1.7; }
.qr-card { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid #252525; border-radius:18px; background:linear-gradient(145deg,#1b1b1b,#101010); }
.qr-card img { width:112px; height:112px; object-fit:cover; border-radius:12px; background:#fff; }
.qr-card strong,.qr-card span { display:block; }
.qr-card strong { font-size:17px; }
.qr-card span { margin-top:8px; color:#777; font-size:12px; }
.guide-title { display:flex; justify-content:space-between; align-items:end; margin:26px 2px 12px; }
.guide-title span { font-size:18px; font-weight:800; }
.guide-title small { color:#666; }
.image-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.asset-card { padding:0; overflow:hidden; border:1px solid #282828; border-radius:16px; color:#fff; text-align:left; background:#151515; cursor:pointer; }
.asset-card img { display:block; width:100%; height:182px; object-fit:cover; object-position:top; }
.asset-card span { display:block; padding:12px; }
.asset-card b,.asset-card small { display:block; }
.asset-card b { font-size:14px; }
.asset-card small { margin-top:4px; color:#777; font-size:10px; }
.back-button { display:block; margin:24px auto 0; padding:10px 18px; border:0; color:#777; background:transparent; }
.lightbox { position:fixed; inset:0; z-index:20; display:none; width:min(100%,480px); margin:auto; background:#050505; }
.lightbox.is-open { display:flex; flex-direction:column; animation:fade .25s ease; }
@keyframes fade { from { opacity:0; } }
.lightbox-bar { display:flex; flex:none; align-items:center; justify-content:space-between; height:58px; padding:0 16px; border-bottom:1px solid #222; background:#0b0b0b; }
.lightbox-bar span { font-size:14px; font-weight:700; }
.lightbox-bar button { width:38px; height:38px; border:0; color:#fff; font-size:30px; line-height:1; background:transparent; }
.lightbox-scroll { flex:1; overflow:auto; overscroll-behavior:contain; }
.lightbox-scroll img { display:block; width:100%; height:auto; }
@media (min-width:481px) { body { background:#171717; } .page-shell,.lightbox { box-shadow:0 0 80px #000; } }
@media (max-height:700px) { .eyebrow { margin-top:28px; } .member-card { height:132px; margin:18px 0 12px; } .card-meta { bottom:17px; } }

/* 网易云会员邀请页：领取前保持原落地页的粉白视觉 */
.netease-invite { min-height:100svh; padding:0 24px; overflow:hidden; color:#000; background:linear-gradient(#ffdfdf,#fff); }
.netease-invite::before { display:none; }
.invite-background { position:absolute; top:0; left:0; z-index:0; width:100%; height:auto; }
.official-logo { position:absolute; z-index:2; top:20px; left:20px; width:176px; height:14px; object-fit:contain; object-position:left center; }
.official-inviter { position:absolute; z-index:2; top:63%; left:50%; display:flex; align-items:center; gap:9px; min-width:164px; padding:7px 14px 7px 7px; border-radius:28px; background:rgba(255,255,255,.8); box-shadow:0 5px 18px rgba(88,22,20,.08); transform:translateX(-50%); }
.official-inviter img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.official-inviter strong,.official-inviter span { display:block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.official-inviter strong { font-size:14px; font-weight:500; }
.official-inviter span { margin-top:2px; color:rgba(0,0,0,.42); font-size:10px; }
.official-claim { position:absolute; z-index:2; top:72%; left:0; right:0; display:flex; flex-direction:column; align-items:center; }
.netease-button { width:240px; min-height:50px; border-radius:25px; background:#ff3a3a; box-shadow:none; animation:none; font-size:20px; font-weight:600; letter-spacing:0; }
.official-claim p { margin:16px 0 0; color:rgba(0,0,0,.4); font-size:12px; font-weight:500; }
@media (min-aspect-ratio:375/812) { .official-claim { top:74%; } }