:root{
    --bg0:#050820;
    --bg2:#0f1656;
    --bg3:#2a1172;
    --cyan:#22e4ff;
    --cyan2:#00b4ff;
    --blue:#3b6bff;
    --violet:#a855f7;
    --violet2:#c084fc;
    --ink:#eef1ff;
    --muted:#8b96c4;
    --line:rgba(140,160,255,.16);
    /* 右侧淡蓝紫（与 S 形分割右侧填充完全一致） */
    --r-top:#f3f6ff;
    --r-mid:#eef0ff;
    --r-bot:#f4eeff;
    /* S 形过渡区宽度（与 SVG viewBox 宽度一致，1 单位 = 1px） */
    --wave-w:320px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%}
body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--r-mid);color:var(--ink);overflow-x:hidden;
}
.login-container{position:relative;display:flex;width:100%;min-height:100vh;min-height:100dvh}
/* 顶部流光彩条：横跨整页 */
.login-container::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:20;pointer-events:none;
    background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--violet2),var(--cyan));
    background-size:300% 100%;animation:barflow 8s linear infinite;
}
@keyframes barflow{to{background-position:300% 0}}

/* ================= 左侧 ================= */
.left-panel{
    flex:0 0 min(calc(56.5% + 35px), calc(100% - 470px));
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;
    padding:90px calc(var(--wave-w) * .5) 0 0;
    background:
        radial-gradient(circle at 42% 48%,rgba(140,170,255,.24) 0%,rgba(110,120,255,.08) 30%,transparent 55%),
        radial-gradient(circle at 15% 10%,rgba(90,200,255,.22) 0%,transparent 40%),
        radial-gradient(circle at 60% 95%,rgba(120,40,200,.42) 0%,transparent 45%),
        linear-gradient(135deg,var(--bg0) 0%,var(--bg2) 50%,var(--bg3) 100%);
    isolation:isolate;
}

/* 左上角 Logo + AICC（白色，与文字等高） */
.brand-top{
    position:absolute;top:28px;left:36px;z-index:6;
    display:flex;align-items:center;gap:10px;text-decoration:none;
    font-size:1.55rem;line-height:1;
}
.brand-top svg{width:1em;height:1em;display:block;flex:none;filter:drop-shadow(0 0 8px rgba(255,255,255,.4))}
.brand-top span{font-weight:800;letter-spacing:3px;color:#fff;text-shadow:0 0 16px rgba(160,190,255,.5)}

/* 静态星点 */
.stars{
    position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 18%,#bfefff 50%,transparent 51%),
        radial-gradient(1px 1px at 28% 72%,#d9c8ff 50%,transparent 51%),
        radial-gradient(1.4px 1.4px at 46% 12%,#ffffff 50%,transparent 51%),
        radial-gradient(1px 1px at 54% 86%,#bfefff 50%,transparent 51%),
        radial-gradient(1.3px 1.3px at 70% 22%,#e3d4ff 50%,transparent 51%),
        radial-gradient(1px 1px at 62% 62%,#ffffff 50%,transparent 51%),
        radial-gradient(1px 1px at 6% 52%,#d9c8ff 50%,transparent 51%),
        radial-gradient(1.2px 1.2px at 60% 8%,#bfefff 50%,transparent 51%);
}

/* 能量环 */
.energy{
    position:absolute;left:calc(50% - var(--wave-w) * .25);top:50%;z-index:2;pointer-events:none;
    width:min(84vh,50vw,900px);aspect-ratio:1/1;
    transform:translate(-50%,-50%);
}
.e-spin{position:absolute;inset:0;animation:spin 90s linear infinite;will-change:transform}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.ring .spark{animation:flick 1.6s infinite steps(1)}
.ring .spark.s2{animation-delay:.5s}
.ring .spark.s3{animation-delay:.9s}
@keyframes flick{0%,100%{opacity:1}20%{opacity:.25}35%{opacity:.9}55%{opacity:.4}70%{opacity:1}85%{opacity:.6}}
.ring-glow{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65}50%{opacity:.85}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ======== 左右过渡：标准 S 形多层波浪 + 流光分界线 ======== */
.wave-v{
    position:absolute;top:0;right:-1px;bottom:0;width:var(--wave-w);z-index:4;pointer-events:none;
}
.wave-v svg{width:100%;height:100%;display:block;overflow:visible}
.wave-v .w1{animation:waveA 9s ease-in-out infinite}
.wave-v .w2{animation:waveB 12s ease-in-out infinite}
@keyframes waveA{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes waveB{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}
.seam-glow{animation:seamPulse 5s ease-in-out infinite}
@keyframes seamPulse{0%,100%{opacity:.55}50%{opacity:1}}
.wave-h{display:none}

/* 鼠标光晕 & 点击波纹 */
.cursor-glow{
    position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
    z-index:3;pointer-events:none;opacity:0;transition:opacity .4s ease;will-change:transform;
    background:radial-gradient(circle,rgba(120,170,255,.18) 0%,rgba(168,85,247,.08) 40%,transparent 70%);
}
.left-panel:hover .cursor-glow{opacity:1}
.ripple{
    position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;z-index:3;pointer-events:none;
    border:2px solid rgba(200,220,255,.85);box-shadow:0 0 18px rgba(120,170,255,.6);
    animation:rip 1s ease-out forwards;
}
@keyframes rip{from{transform:scale(.2);opacity:1}to{transform:scale(7);opacity:0}}

/* 左侧内容 */
.left-content{
    position:relative;z-index:5;flex:1;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:#fff;padding:2vh 4% 3vh 6%;
}
.left-content h1{
    font-size:clamp(2rem,4.2vw,3.5rem);font-weight:800;letter-spacing:3px;line-height:1.25;
    background:linear-gradient(92deg,#ffffff 0%,#9fdcff 30%,#c4a8ff 65%,#ffffff 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:shine 7s linear infinite;
    filter:drop-shadow(0 0 22px rgba(60,150,255,.35));
}
@keyframes shine{to{background-position:220% 0}}
.left-content h2{margin-top:14px;font-size:clamp(1rem,1.7vw,1.45rem);font-weight:600;letter-spacing:4px}
.left-content h2 .hl{
    background:linear-gradient(90deg,var(--cyan),var(--violet2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---- 悬停方案：位置不动，仅发光 + 渐变层淡入 ---- */
.site-link{
    position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:11px 26px;
    border-radius:40px;font-size:1rem;letter-spacing:2px;color:#fff;text-decoration:none;
    background:rgba(14,24,80,.55);
    border:1px solid rgba(125,200,255,.38);
    box-shadow:0 8px 26px rgba(0,0,0,.3);
    transition:border-color .3s ease,box-shadow .3s ease;
}
.site-link::before{
    content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:linear-gradient(90deg,rgba(34,228,255,.35),rgba(168,85,247,.35));
    opacity:0;transition:opacity .3s ease;
}
.site-link i{color:var(--cyan);transition:transform .3s ease}
.site-link:hover{border-color:rgba(160,230,255,.9);box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 22px rgba(60,160,255,.45)}
.site-link:hover::before{opacity:1}
.site-link:hover i{transform:rotate(20deg)}

.feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:32px auto 0;max-width:600px;width:100%}
.feature{
    position:relative;isolation:isolate;overflow:hidden;
    padding:18px 12px 16px;border-radius:16px;text-align:center;
    background:rgba(14,22,74,.55);
    border:1px solid rgba(140,170,255,.24);
    transition:border-color .3s ease,box-shadow .3s ease;
}
.feature::before{
    content:'';position:absolute;left:18%;right:18%;top:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--cyan),var(--violet2),transparent);
}
.feature::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:radial-gradient(120% 90% at 50% 0%,rgba(60,160,255,.28),transparent 70%);
    opacity:0;transition:opacity .35s ease;
}
.feature:hover{border-color:rgba(140,210,255,.7);box-shadow:0 0 24px rgba(60,150,255,.3)}
.feature:hover::after{opacity:1}
.f-ico{
    width:42px;height:42px;margin:0 auto 10px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#fff;
    background:linear-gradient(135deg,var(--cyan2),var(--violet));
    box-shadow:0 6px 18px rgba(34,160,255,.3);
    transition:transform .3s ease,box-shadow .3s ease;
}
.feature:hover .f-ico{transform:scale(1.1);box-shadow:0 0 20px rgba(80,180,255,.7)}
.f-txt b{display:block;font-size:.98rem;font-weight:700;letter-spacing:1px;color:#fff;white-space:nowrap}
.f-txt span{display:block;margin-top:5px;font-size:.8rem;color:#9fdcff;letter-spacing:.5px}

/* 底部微信提示 */
.left-footer{
    position:relative;z-index:5;width:100%;
    display:flex;justify-content:center;
    padding:0 2% 34px 4%;
}
.wechat-tip{
    position:relative;display:inline-flex;align-items:center;gap:10px;padding:11px 22px;
    border-radius:34px;font-size:.9rem;font-weight:600;letter-spacing:.5px;color:#fff;
    background:linear-gradient(90deg,rgba(7,193,96,.28),rgba(14,24,80,.5));
    border:1px solid rgba(120,255,200,.35);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.wechat-tip i{font-size:1.1rem;color:#7dffbf}
.wechat-tip::after{
    content:'';position:absolute;inset:-1px;border-radius:34px;pointer-events:none;
    box-shadow:0 0 22px rgba(7,193,96,.45);opacity:0;animation:tipGlow 3.2s ease-in-out infinite;
}
@keyframes tipGlow{0%,100%{opacity:0}50%{opacity:1}}

/* ================= 右侧（很淡的蓝紫渐变，与分割右侧同色） ================= */
.right-panel{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
    padding:48px 24px 48px 16px;position:relative;overflow:hidden;
    background:linear-gradient(180deg,var(--r-top) 0%,var(--r-mid) 50%,var(--r-bot) 100%);
}
.r-glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;will-change:transform}
.r-glow.g1{width:340px;height:340px;top:-130px;right:-120px;background:radial-gradient(circle,rgba(34,180,255,.18) 0%,rgba(34,180,255,0) 70%);animation:g1m 18s ease-in-out infinite}
.r-glow.g2{width:300px;height:300px;bottom:-130px;right:-60px;background:radial-gradient(circle,rgba(168,85,247,.16) 0%,rgba(168,85,247,0) 70%);animation:g2m 22s ease-in-out infinite}
@keyframes g1m{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-26px,32px,0)}}
@keyframes g2m{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-24px,-26px,0)}}
.r-dots{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.rp{position:absolute;bottom:-10px;border-radius:50%;opacity:0;animation:rise-p linear infinite;will-change:transform}
@keyframes rise-p{0%{transform:translateY(0);opacity:0}15%{opacity:.7}75%{opacity:.3}100%{transform:translateY(-105vh);opacity:0}}

/* 登录框：保持原深色 */
.login-card{
    position:relative;z-index:5;width:100%;max-width:440px;padding:36px 34px 28px;border-radius:24px;
    background:linear-gradient(160deg,#181d4b 0%,#10133c 55%,#1c1349 100%);
    border:1px solid rgba(140,160,255,.2);
    box-shadow:0 30px 70px rgba(40,40,140,.28),0 8px 20px rgba(40,40,140,.15),inset 0 1px 0 rgba(255,255,255,.08);
    animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.card-header{margin-bottom:20px}
.brand-badge{
    display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.5px;
    padding:6px 14px 6px 8px;border-radius:30px;color:#dff9ff;
    background:linear-gradient(90deg,rgba(34,228,255,.16),rgba(168,85,247,.18));
    border:1px solid rgba(125,249,255,.35);
}
.brand-badge svg{width:18px;height:18px;display:block}
.card-header h2{font-size:1.85rem;font-weight:800;margin-top:16px;letter-spacing:1px;color:#fff}
.card-header p{margin-top:8px;font-size:.9rem;color:var(--muted)}

.tab-nav{display:flex;gap:26px;margin:22px 0;border-bottom:1px solid var(--line)}
.tab-item{position:relative;cursor:pointer;font-size:.93rem;font-weight:600;color:#7f8ab8;padding-bottom:12px;transition:color .3s ease;white-space:nowrap}
.tab-item:hover{color:var(--cyan)}
.tab-item.active{color:#fff}
.tab-item::after{
    content:'';position:absolute;left:0;bottom:-1px;height:3px;width:0;border-radius:3px;
    background:linear-gradient(90deg,var(--cyan),var(--violet2));
    box-shadow:0 0 10px rgba(34,228,255,.6);transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.tab-item.active::after{width:100%}

/* 错误提示 */
.form-error{
    display:none;align-items:center;gap:8px;margin-top:14px;padding:11px 14px;
    border-radius:10px;font-size:.85rem;color:#ff9ec4;
    background:rgba(255,90,180,.1);border:1px solid rgba(255,130,200,.32);
}
.form-error.show{display:flex}
.form-error i{color:#ff7ab8;flex:none}

.form-group{position:relative;margin-bottom:16px;display:flex;align-items:center}
.input-icon{position:absolute;left:16px;font-size:1rem;color:#6f7aa8;transition:color .3s ease;pointer-events:none;z-index:1}
.form-control{
    width:100%;padding:15px 16px 15px 46px;font-size:.95rem;color:var(--ink);
    background:rgba(8,12,44,.6);border:1.4px solid rgba(140,160,255,.2);border-radius:12px;outline:none;
    transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.form-control::placeholder{color:#6b76a3}
.form-control:hover{border-color:rgba(140,160,255,.38)}
.form-group:focus-within .form-control{background:rgba(10,16,56,.85);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,228,255,.12)}
.form-group:focus-within .input-icon{color:var(--cyan)}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--ink);
    -webkit-box-shadow:0 0 0 1000px #0b1146 inset;
    caret-color:var(--ink);
    transition:background-color 9999s ease-in-out 0s;
}
.has-code .form-control{padding-right:126px}
.has-eye .form-control{padding-right:48px}
.has-code.has-eye .form-control{padding-right:160px}
.toggle-password{position:absolute;right:132px;cursor:pointer;color:#6f7aa8;font-size:.95rem;transition:color .25s;padding:6px}
.has-eye:not(.has-code) .toggle-password{right:14px}
.toggle-password:hover{color:var(--cyan)}

.btn-send-code{
    position:absolute;right:6px;height:38px;padding:0 14px;border:none;border-radius:9px;cursor:pointer;
    font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.5px;
    background:linear-gradient(90deg,var(--cyan2),var(--violet),var(--cyan2));
    background-size:200% 100%;background-position:0 0;
    box-shadow:0 4px 14px rgba(34,180,255,.25);
    transition:background-position .5s ease,box-shadow .3s ease;
}
.btn-send-code:hover:not(:disabled){background-position:100% 0;box-shadow:0 0 18px rgba(80,170,255,.6)}
.btn-send-code:disabled{background:rgba(255,255,255,.08);color:#7f8ab8;box-shadow:none;cursor:not-allowed}

.form-extra{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;font-size:.85rem}
.remember{display:flex;align-items:center;gap:8px;color:#a3acd6;cursor:pointer;user-select:none}
.remember input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid rgba(140,160,255,.4);border-radius:5px;cursor:pointer;position:relative;transition:background-color .2s,border-color .2s;background:transparent}
.remember input:checked{background:linear-gradient(135deg,var(--cyan2),var(--violet));border-color:transparent}
.remember input:checked::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:700}
.link{color:var(--cyan);text-decoration:none;font-weight:600;transition:color .25s}
.link:hover{color:var(--violet2);text-decoration:underline}

.btn-submit{
    position:relative;overflow:hidden;width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer;
    font-size:1rem;font-weight:700;letter-spacing:4px;color:#fff;
    background:linear-gradient(90deg,#00c6ff,var(--blue) 30%,var(--violet) 60%,var(--violet2) 80%,#00c6ff);
    background-size:200% 100%;background-position:0 0;
    box-shadow:0 10px 28px rgba(59,107,255,.35);
    transition:background-position .6s ease,box-shadow .3s ease;
}
.btn-submit:hover{background-position:100% 0;box-shadow:0 10px 28px rgba(59,107,255,.35),0 0 0 3px rgba(120,190,255,.25),0 0 28px rgba(120,120,255,.5)}
.btn-submit:active{box-shadow:0 4px 14px rgba(59,107,255,.35)}
.btn-submit:disabled{opacity:.8;cursor:wait}
.btn-submit::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);animation:sweep 3.4s ease-in-out infinite;
}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}

.divider{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:#6f7aa8;font-size:.78rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(34,228,255,.3),transparent)}
.social-row{display:flex;gap:12px;justify-content:center}
.social{
    position:relative;isolation:isolate;overflow:hidden;
    width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:#9aa5d4;background:rgba(255,255,255,.04);border:1.2px solid rgba(140,160,255,.2);
    cursor:pointer;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.social::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(135deg,var(--cyan2),var(--violet));
    opacity:0;transition:opacity .3s ease;
}
.social i{transition:transform .3s ease}
.social:hover{color:#fff;border-color:transparent;box-shadow:0 0 18px rgba(80,160,255,.55)}
.social:hover::before{opacity:1}
.social:hover i{transform:scale(1.15)}

.qrcode-container{display:none;text-align:center;padding:6px 0 4px}
.qrcode-box{
    width:186px;height:186px;margin:0 auto 18px;padding:12px;border-radius:18px;background:#fff;
    border:1px solid rgba(125,249,255,.4);
    box-shadow:0 0 0 6px rgba(34,228,255,.06),0 14px 34px rgba(0,0,30,.5);
    position:relative;overflow:hidden;transition:box-shadow .35s ease;
}
.qrcode-box:hover{box-shadow:0 0 0 6px rgba(80,160,255,.15),0 14px 34px rgba(0,0,30,.5),0 0 30px rgba(80,160,255,.45)}
.qrcode-box::after{
    content:'';position:absolute;left:8%;right:8%;height:3px;border-radius:3px;top:10%;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    box-shadow:0 0 14px var(--cyan);animation:qrscan 2.4s ease-in-out infinite;
}
@keyframes qrscan{0%,100%{top:8%}50%{top:88%}}
.qrcode-box img{width:100%;height:100%;object-fit:contain;display:block}
.qr-mask{
    position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:rgba(16,20,60,.94);z-index:2;
}
.qr-mask.show{display:flex}
.qr-mask i{font-size:2.2rem;color:#34e3a4}
.qr-mask span{font-size:.85rem;color:var(--muted)}
.qr-refresh{
    margin-top:4px;padding:7px 16px;border:none;border-radius:8px;cursor:pointer;
    font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.5px;
    background:linear-gradient(90deg,var(--cyan2),var(--violet));
    box-shadow:0 4px 12px rgba(34,180,255,.3);
}
.qrcode-container p{font-size:.88rem;color:var(--muted)}

.security-tips{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.79rem;color:#8b96c4}
.security-tips i{color:#34e3a4}
.footer-note{margin-top:10px;text-align:center;font-size:.74rem;color:#5f6994}

/* ================= 响应式 ================= */
@media (max-width:1200px){
    .feature-row{gap:10px}
    .feature{padding:14px 8px 12px}
    .f-txt b{font-size:.86rem;letter-spacing:.5px}
    .f-txt span{font-size:.72rem}
    .login-card{padding:30px 24px 24px}
}
@media (max-width:960px){
    .login-container{flex-direction:column}
    .login-container::before{display:none}
    .left-panel{flex:none;width:100%;min-height:62vh;padding:80px 0 110px}
    .brand-top{top:20px;left:20px;gap:8px;font-size:1.3rem}
    .energy{left:50%;width:min(100vw,640px)}
    .wave-v{display:none}
    .wave-h{display:block;position:absolute;left:0;right:0;bottom:-1px;height:110px;z-index:4;pointer-events:none}
    .wave-h svg{width:100%;height:100%;display:block;overflow:visible}
    .wave-h .w1{animation:waveH1 9s ease-in-out infinite}
    .wave-h .w2{animation:waveH2 12s ease-in-out infinite}
    @keyframes waveH1{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
    @keyframes waveH2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    .right-panel{flex:none;width:100%;padding:24px 18px 44px}
    .left-content{padding:0 6% 20px}
    .left-footer{padding:0 6% 0}
    .site-link{margin-top:20px;padding:10px 22px;font-size:.9rem}
    .feature-row{margin-top:24px;gap:10px}
    .f-txt b{font-size:.95rem}
    .f-txt span{font-size:.8rem}
    .wechat-tip{padding:10px 18px;font-size:.82rem}
    .r-glow{filter:blur(56px)}
    .login-card{padding:30px 22px 24px}
}
@media (max-width:600px){
    .feature-row{grid-template-columns:1fr;max-width:340px}
    .feature{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px}
    .feature::before{left:0;right:auto;top:18%;bottom:18%;width:2px;height:auto;background:linear-gradient(180deg,var(--cyan),var(--violet2))}
    .f-ico{margin:0;flex:none;width:38px;height:38px}
    .f-txt span{margin-top:3px}
}
@media (max-width:420px){
    .tab-nav{gap:16px}
    .tab-item{font-size:.85rem}
    .card-header h2{font-size:1.55rem}
    .has-code .form-control{padding-right:116px}
    .has-code.has-eye .form-control{padding-right:150px}
    .toggle-password{right:120px}
    .wechat-tip{font-size:.76rem;padding:9px 15px;line-height:1.4}
    .login-card{padding:26px 16px 22px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}