:root{
  --ink:#23232f; --sub:rgba(40,40,55,0.62);
  --accent:#e84d8a; --accent-grad:linear-gradient(135deg,#ff8fb8,#e84d8a);
  --glass:linear-gradient(150deg,rgba(255,255,255,0.62),rgba(255,255,255,0.26));
  --glass-border:1px solid rgba(255,255,255,0.72);
  --glass-shadow:0 14px 44px rgba(150,100,140,0.20), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -14px 26px rgba(255,255,255,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); overflow-x:hidden;
  background:
    radial-gradient(900px 620px at 88% -6%, #ffc9de 0%, rgba(255,201,222,0) 62%),
    radial-gradient(820px 560px at -8% 22%, #c9d9ff 0%, rgba(201,217,255,0) 60%),
    radial-gradient(900px 700px at 55% 112%, #ffe0bd 0%, rgba(255,224,189,0) 60%),
    linear-gradient(158deg,#fdf1f7 0%,#f4f6ff 45%,#fdf6ec 100%);
  background-attachment:fixed;
  background-color:#fdf1f7;
  background-repeat:no-repeat;
}
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.72;}
.orb1{width:360px;height:360px;top:-80px;right:-70px;background:radial-gradient(circle,#ffb7d4,#ff6fa5);}
.orb2{width:330px;height:330px;top:36%;left:-130px;background:radial-gradient(circle,#c3d8ff,#7aa5ff);}
.orb3{width:400px;height:400px;bottom:-150px;right:-90px;background:radial-gradient(circle,#ffdbb2,#ffae63);}
.orb4{width:240px;height:240px;top:6%;left:34%;background:radial-gradient(circle,#ffe2f1,#ff9ecb);opacity:.55;}
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);border:var(--glass-border);box-shadow:var(--glass-shadow);overflow:hidden;}
.glass::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,0.66),transparent);pointer-events:none;}
.wrap{max-width:430px;margin:0 auto;padding:0 20px 52px;position:relative;z-index:1;}
.nav{position:sticky;top:12px;z-index:20;padding:0 16px;margin-top:10px;}
.nav-in{max-width:430px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-radius:22px;
  background:rgba(255,255,255,0.38);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 10px 34px rgba(150,100,140,0.16), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -8px 18px rgba(255,255,255,0.25);}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;}
.logo i{width:28px;height:28px;border-radius:9px;background:var(--accent-grad);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(232,77,138,0.4);}
.logo i svg{width:16px;height:16px;}
.badge{font-size:11px;font-weight:600;color:rgba(40,40,55,0.6);background:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.8);padding:5px 12px;border-radius:999px;}
.screen{display:none;}
.screen.active{display:block;}
.hero{padding:52px 0 30px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.8);padding:7px 16px;border-radius:999px;margin-bottom:20px;}
h1{font-size:36px;line-height:1.16;font-weight:800;letter-spacing:-0.02em;}
h1 .grad{background:linear-gradient(120deg,#ff5c9d,#e84d8a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:15px;line-height:1.65;color:var(--sub);margin-top:16px;}
.upload{border-radius:32px;padding:32px 24px;text-align:center;}
.upload-ico{width:104px;height:104px;margin:8px auto 20px;border-radius:52%;display:flex;align-items:center;justify-content:center;position:relative;
  background:rgba(255,255,255,0.42);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1.5px dashed rgba(232,77,138,0.65);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -10px 20px rgba(255,255,255,0.35), 0 12px 30px rgba(232,77,138,0.16);}
.upload-ico::after{content:"";position:absolute;left:12px;right:12px;top:8px;height:40%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0.7),transparent);}
.upload-ico svg{width:42px;height:42px;stroke:var(--accent);}
.upload h3{font-size:20px;font-weight:800;position:relative;z-index:1;}
.upload .tip{font-size:13px;color:var(--sub);margin:9px 0 24px;line-height:1.65;position:relative;z-index:1;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:19px;padding:16px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;position:relative;z-index:1;}
.btn-p{background:var(--accent-grad);color:#fff;box-shadow:0 12px 28px rgba(232,77,138,0.38), inset 0 1px 0 rgba(255,255,255,0.55);overflow:hidden;}
.btn-p::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,0.5),transparent);}
.btn-s{margin-top:12px;background:rgba(255,255,255,0.45);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.8);color:var(--ink);}
.btn svg{width:18px;height:18px;}
.privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--sub);margin-top:20px;position:relative;z-index:1;}
.privacy svg{width:14px;height:14px;stroke:var(--accent);}
.steps{display:flex;justify-content:center;gap:10px;margin-top:32px;}
.step{font-size:11px;font-weight:600;color:rgba(40,40,55,0.62);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.75);padding:7px 14px;border-radius:999px;}
.step b{width:15px;height:15px;border-radius:50%;background:var(--accent-grad);color:#fff;font-size:9px;display:inline-flex;align-items:center;justify-content:center;}
footer{margin-top:44px;text-align:center;font-size:11px;color:rgba(40,40,55,0.45);}
.center{min-height:calc(100vh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px;}
.lock-card{border-radius:32px;padding:36px 26px;width:100%;max-width:340px;text-align:center;position:relative;z-index:1;}
.lock-title{font-size:22px;font-weight:800;position:relative;z-index:1;}
.lock-sub{font-size:13px;color:var(--sub);margin:8px 0 22px;line-height:1.6;position:relative;z-index:1;}
#password-input{padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,0.8);background:rgba(255,255,255,0.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:16px;width:100%;outline:none;color:var(--ink);font-family:inherit;box-shadow:inset 0 2px 6px rgba(150,100,140,0.08);position:relative;z-index:1;}
#password-input::placeholder{color:rgba(40,40,55,0.45);}
#password-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,77,138,0.16);}
#lock-error{color:#e84d8a;font-size:12px;margin-top:12px;position:relative;z-index:1;}
.thumb{width:150px;height:150px;border-radius:40px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:42px;overflow:hidden;border:1px solid rgba(255,255,255,0.8);
  background:linear-gradient(160deg,rgba(255,205,225,0.75),rgba(255,150,190,0.65));
  box-shadow:0 18px 46px rgba(200,110,150,0.35), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -16px 30px rgba(255,255,255,0.3);}
.thumb .shine{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0.55),transparent 42%);}
#preview{width:100%;height:100%;object-fit:cover;}
.spinner{width:60px;height:60px;border-radius:50%;background:conic-gradient(from 0deg,rgba(232,77,138,0.05),rgba(232,77,138,0.95),rgba(232,77,138,0.05));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:spin 1.1s linear infinite;margin:0 auto 28px;}
@keyframes spin{to{transform:rotate(360deg)}}
h2{font-size:22px;font-weight:800;}
.sub{font-size:14px;color:var(--sub);margin-top:10px;line-height:1.65;}
.stepList{margin-top:36px;width:100%;max-width:300px;text-align:left;border-radius:26px;padding:6px 22px;}
.stepRow{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid rgba(255,255,255,0.7);font-size:14px;color:var(--sub);position:relative;z-index:1;}
.stepRow:first-child{border-top:none;}
.stepRow.on{color:var(--ink);font-weight:700;}
.stepRow .dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;flex:none;}
.stepRow.on .dot{border-color:#fff;background:var(--accent-grad);box-shadow:0 4px 12px rgba(232,77,138,0.4);}
.stepRow.on .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;}
.stepRow.done .dot{background:var(--accent-grad);border-color:#fff;}
.stepRow.done .dot svg{width:11px;height:11px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:32px 0 15px;}
.section-title h2{font-size:19px;font-weight:800;}
.section-title span{font-size:12px;color:var(--sub);}
.profile{border-radius:32px;padding:26px;}
.profile-top{display:flex;align-items:center;gap:18px;position:relative;z-index:1;}
.face{width:88px;height:100px;flex:none;border-radius:28px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.85);
  background:linear-gradient(165deg,rgba(255,225,240,0.8),rgba(255,180,210,0.65));
  box-shadow:0 10px 26px rgba(210,120,160,0.3), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -14px 26px rgba(255,255,255,0.35);}
.face svg{width:72px;height:72px;margin-bottom:-6px;}
.profile h3{font-size:20px;font-weight:800;}
.profile .shape{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--accent);background:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.85);padding:5px 13px;border-radius:999px;}
.profile .desc{font-size:13px;color:var(--sub);margin-top:11px;line-height:1.65;position:relative;z-index:1;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;position:relative;z-index:1;}
.chip{font-size:12px;font-weight:600;color:var(--ink);background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.85);padding:8px 14px;border-radius:999px;}
.chip b{color:var(--accent);font-weight:700;}
.bcard{border-radius:30px;margin-bottom:20px;}
.bhead{display:flex;align-items:center;gap:14px;padding:18px 20px 14px;position:relative;z-index:1;}
.avatar{width:54px;height:54px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;box-shadow:inset 0 -6px 14px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.12);}
.bmeta{flex:1;min-width:0;}
.bname{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.bname .pf{font-size:10px;font-weight:800;padding:2px 8px;border-radius:6px;flex:none;}
.pf.dy{background:#16161a;color:#fff;}
.pf.xhs{background:#fff;color:#ff2442;border:1px solid #ffd0da;}
.btags{font-size:12px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.score{flex:none;text-align:center;}
.score .num{font-size:21px;font-weight:800;background:linear-gradient(120deg,#ff5c9d,#e84d8a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.score .lab{font-size:10px;color:var(--sub);}
.vthumb{position:relative;height:152px;margin:0 20px;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,0.7);box-shadow:0 10px 26px rgba(120,80,110,0.18);}
.vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.88);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,0.22);}
.vplay svg{width:17px;height:17px;fill:var(--accent);margin-left:2px;}
.vmeta{width:100%;padding:10px 14px;background:linear-gradient(transparent,rgba(20,10,20,0.55));color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;}
.link-row{padding:14px 20px 18px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;}
.link-row .t{font-size:13px;color:var(--sub);}
.go{font-size:13px;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:4px;}
.go svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.note{margin-top:28px;text-align:center;font-size:11px;color:rgba(40,40,55,0.5);line-height:1.75;}
.retry{color:var(--accent);font-weight:700;background:none;border:none;padding:0;font-family:inherit;font-size:inherit;cursor:pointer;}