:root{color-scheme:dark;--safe-bottom:max(22px,env(safe-area-inset-bottom));--pink:#f73576;--cyan:#75eee3;--ink:#07131c}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif}
body{overflow:hidden;color:#fff}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.login-page{position:relative;width:100%;height:100vh;height:100dvh;min-height:620px;overflow:hidden;background:#07131c;isolation:isolate}
.map-scene,.map-scene>*{position:absolute;inset:0}
.map-scene{z-index:-2;overflow:hidden;background:radial-gradient(circle at 77% 26%,rgba(17,104,112,.28),transparent 34%),radial-gradient(circle at 23% 56%,rgba(150,24,74,.2),transparent 36%),linear-gradient(162deg,#06131d 0%,#0a1921 43%,#061018 100%)}
.map-scene__ambient{inset:-16%;background:conic-gradient(from 210deg at 58% 43%,rgba(20,193,184,.13),transparent 23%,rgba(215,35,104,.11),transparent 55%);filter:blur(34px);animation:ambient-shift 16s ease-in-out infinite alternate}
.map-scene__roads{width:112%;height:112%;inset:-6%;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 9px currentColor)}
.map-scene__roads path{vector-effect:non-scaling-stroke}
.map-scene__roads--far{color:rgba(123,222,220,.15);stroke:currentColor;stroke-width:2.2;animation:map-drift 21s ease-in-out infinite alternate}
.map-scene__roads--far path:nth-child(2n){stroke:rgba(182,71,119,.14);stroke-width:3.5}
.map-scene__roads--near{color:rgba(159,236,230,.24);stroke:currentColor;stroke-width:3.6;stroke-dasharray:3 10;animation:road-flow 20s linear infinite,map-breathe 10s ease-in-out infinite}
.map-scene__roads--near path:nth-child(2n){stroke:rgba(240,77,139,.21);stroke-dasharray:2 13}
.map-scene__grid{opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;transform:perspective(440px) rotateX(14deg) scale(1.2);animation:grid-drift 24s linear infinite}
.map-node{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%)}
.map-node i,.map-node span{position:absolute;inset:0;border-radius:50%}
.map-node i{background:#f34c83;box-shadow:0 0 18px rgba(247,53,118,.85)}
.map-node span{border:1px solid rgba(247,83,135,.75);animation:node-wave 2.8s ease-out infinite}
.map-node--one{left:19%;top:26%}.map-node--two{left:68%;top:21%;transform:scale(.72)}.map-node--three{left:78%;top:47%;transform:scale(.56)}.map-node--four{left:37%;top:53%;transform:scale(.48)}
.map-node--two i,.map-node--four i{background:#5ee4d7;box-shadow:0 0 18px rgba(66,225,210,.82)}
.map-node--two span,.map-node--four span{border-color:rgba(92,232,218,.75);animation-delay:-1.2s}
.map-scan{height:22%;top:-22%;background:linear-gradient(180deg,transparent,rgba(119,238,226,.08),transparent);filter:blur(3px);animation:scan-down 8s linear infinite}
.map-vignette{background:linear-gradient(180deg,rgba(2,8,13,.18),rgba(2,8,13,.02) 34%,rgba(2,8,13,.48) 68%,rgba(2,7,11,.97) 100%),linear-gradient(90deg,rgba(2,8,13,.4),transparent 34%,rgba(4,10,15,.12))}
.login-statusbar{position:absolute;top:max(30px,calc(env(safe-area-inset-top) + 14px));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:2}
.live-pill{height:32px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(2,10,16,.34);backdrop-filter:blur(12px);display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:2px}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#ff3d83;box-shadow:0 0 12px #ff3d83;animation:dot-pulse 1.7s ease-in-out infinite}
.status-copy{font-size:9px;font-weight:700;letter-spacing:2.7px;color:rgba(255,255,255,.64);white-space:nowrap}
.signal-card{position:absolute;top:29%;left:23px;display:flex;align-items:center;gap:12px;min-width:252px;padding:12px 17px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(3,11,18,.55);backdrop-filter:blur(15px);box-shadow:0 18px 52px rgba(0,0,0,.22);animation:card-float 5s ease-in-out infinite}
.signal-card__icon{position:relative;width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:linear-gradient(145deg,#e62c70,#711744);box-shadow:inset 0 1px rgba(255,255,255,.16)}
.signal-card__icon:before,.signal-card__icon:after,.signal-card__icon i{content:"";position:absolute;border-radius:50%;inset:50% auto auto 50%;transform:translate(-50%,-50%)}
.signal-card__icon:before{width:14px;height:14px;border:2px solid #fff}.signal-card__icon:after{width:4px;height:4px;background:#fff}.signal-card__icon i{width:24px;height:24px;border:1px solid rgba(255,255,255,.32);animation:node-wave 2.3s ease-out infinite}
.signal-card b,.signal-card small{display:block}.signal-card b{font-size:14px;letter-spacing:.5px}.signal-card small{margin-top:3px;color:rgba(255,255,255,.5);font-size:10px}
.login-content{position:absolute;left:0;right:0;bottom:0;padding:0 26px var(--safe-bottom);z-index:3}
.brand-row{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.brand-mark{width:51px;height:51px;padding:5px;overflow:hidden;border-radius:15px;border:1px solid rgba(255,255,255,.72);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 -4px #ed3477,0 12px 32px rgba(0,0,0,.26)}
.brand-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.brand-row b,.brand-row small{display:block}.brand-row b{font-size:22px;letter-spacing:2px}.brand-row small{margin-top:3px;font-size:9px;font-weight:700;letter-spacing:3.2px;color:rgba(255,255,255,.58)}
h1{margin:0;font-size:clamp(36px,10.5vw,47px);line-height:1.08;letter-spacing:0;font-weight:900;text-shadow:0 9px 34px rgba(0,0,0,.35)}
.login-tagline{margin:15px 0 0;font-size:9px;font-weight:800;letter-spacing:1.6px;color:rgba(255,255,255,.78)}
.login-description{margin:9px 0 22px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.49)}
.wechat-login{width:100%;height:62px;border:0;border-radius:32px;background:#fff;color:#10141a;box-shadow:0 14px 42px rgba(0,0,0,.28);font-size:17px;font-weight:800;letter-spacing:.5px;transition:transform .18s ease,opacity .18s ease}
.wechat-login:not(:disabled):active{transform:scale(.975)}
.wechat-login:disabled{opacity:.52}
.button-loading{display:none;align-items:center;justify-content:center;gap:10px}.button-loading i{width:17px;height:17px;border:2px solid rgba(8,17,24,.18);border-top-color:#0b1820;border-radius:50%;animation:spin .8s linear infinite}
.wechat-login.is-loading .button-label{display:none}.wechat-login.is-loading .button-loading{display:flex}
.agreement-row{margin:15px auto 0;display:flex;align-items:flex-start;justify-content:center;gap:8px;width:max-content;max-width:100%;font-size:10px;line-height:18px;color:rgba(255,255,255,.46);user-select:none}
.agreement-row input{position:absolute;opacity:0;pointer-events:none}
.agreement-check{position:relative;width:17px;height:17px;flex:0 0 auto;border-radius:6px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);transition:.18s ease}
.agreement-row input:checked+.agreement-check{background:#fff;border-color:#fff}.agreement-row input:checked+.agreement-check:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #0c1921;border-width:0 2px 2px 0;transform:rotate(45deg)}
.agreement-row a{color:#65dfd2;text-decoration:none;font-weight:650}
.security-note{text-align:center;margin:9px 0 0;font-size:9px;letter-spacing:.6px;color:rgba(255,255,255,.24)}
.checking-overlay{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(2,9,14,.78);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.25s ease}
.checking-overlay.is-visible{opacity:1;visibility:visible}.checking-overlay b{margin-top:21px;font-size:16px}.checking-overlay small{margin-top:6px;font-size:11px;color:rgba(255,255,255,.45)}
.checking-pulse{position:relative;width:52px;height:52px;border-radius:50%;border:1px solid rgba(102,235,222,.3)}.checking-pulse:before,.checking-pulse:after,.checking-pulse i{content:"";position:absolute;border-radius:50%;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.checking-pulse i{width:12px;height:12px;background:#69e7da;box-shadow:0 0 20px #69e7da}.checking-pulse:before{width:36px;height:36px;border:1px solid rgba(105,231,218,.4);animation:node-wave 1.8s ease-out infinite}.checking-pulse:after{width:62px;height:62px;border:1px solid rgba(105,231,218,.16);animation:node-wave 1.8s ease-out .6s infinite}
.login-sheet{position:absolute;inset:0;z-index:12;visibility:hidden}.login-sheet.is-open{visibility:visible}.sheet-backdrop{position:absolute;inset:0;width:100%;border:0;background:rgba(0,0,0,.56);opacity:0;transition:.25s ease}.login-sheet.is-open .sheet-backdrop{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;padding:12px 26px calc(var(--safe-bottom) + 8px);border-radius:30px 30px 0 0;background:#f9f8f6;color:#171823;text-align:center;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.75,.22,1)}.login-sheet.is-open .sheet-panel{transform:translateY(0)}
.sheet-handle{display:block;width:42px;height:5px;margin:0 auto 19px;border-radius:3px;background:#d9d8d5}.sheet-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 13px;border-radius:16px;background:#ffedf3;color:#e82d6e;font-size:22px;font-weight:900}.sheet-panel h2{margin:0;font-size:21px}.sheet-panel p{margin:9px auto 21px;max-width:290px;color:#77737e;font-size:13px;line-height:1.65}.sheet-primary,.sheet-secondary{width:100%;height:52px;border-radius:27px;font-weight:800}.sheet-primary{border:0;background:#1d1b27;color:#fff}.sheet-secondary{margin-top:5px;border:0;background:transparent;color:#8c8992}
@keyframes ambient-shift{to{transform:translate3d(-5%,4%,0) rotate(7deg)}}
@keyframes map-drift{to{transform:translate3d(-3%,2%,0) scale(1.04)}}
@keyframes map-breathe{50%{opacity:.66}}
@keyframes road-flow{to{stroke-dashoffset:-180}}
@keyframes grid-drift{to{background-position:104px 104px}}
@keyframes node-wave{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(3.4)}}
@keyframes scan-down{to{transform:translateY(560%)}}
@keyframes dot-pulse{50%{opacity:.35;transform:scale(.72)}}
@keyframes card-float{50%{transform:translateY(-7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-height:730px){.signal-card{top:24%;transform:scale(.9);transform-origin:left center}.brand-row{margin-bottom:11px}.login-description{margin-bottom:15px}.wechat-login{height:56px}.login-content{padding-left:22px;padding-right:22px}h1{font-size:34px}}
@media(min-width:700px){.login-page{max-width:480px;margin:0 auto;box-shadow:0 0 90px rgba(0,0,0,.5)}body{background:#02070b}.login-content{padding-left:34px;padding-right:34px}}
@media(prefers-reduced-motion:reduce){.map-scene__ambient,.map-scene__roads,.map-scene__grid,.map-node span,.map-scan,.live-pill i,.signal-card,.checking-pulse:before,.checking-pulse:after{animation:none!important}}
