:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#15283e;background:#f4f7fc;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-layout{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}
.welcome-panel{background:radial-gradient(ellipse at 0 100%,#244d79 0,transparent 65%),#102943;color:#fff;padding:48px 64px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.welcome-panel:after{content:"";position:absolute;width:500px;height:500px;border:1px solid #ffffff0e;border-radius:50%;right:-300px;bottom:-170px;box-shadow:0 0 0 80px #ffffff03,0 0 0 160px #ffffff02;pointer-events:none}
.brand{display:flex;align-items:center;gap:13px;font-weight:600;font-size:21px;letter-spacing:1px}.brand small{display:block;font-size:12px;font-weight:400;color:#afc4dd;margin-top:4px;letter-spacing:1px}.brand-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#2376e8}.brand svg{width:27px;height:27px}
.welcome-content{margin:auto 0;padding:76px 0;position:relative;z-index:1}.eyebrow{color:#96bae7;font-size:13px;letter-spacing:4px}h1{font-size:clamp(38px,4.2vw,62px);font-weight:600;letter-spacing:2px;line-height:1.35;margin:22px 0} .welcome-content p{font-size:16px;line-height:2;color:#b9cce3;margin-bottom:40px}.learning-path{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:#dbe8f7}.learning-path span{border:1px solid #7c9bbc55;background:#ffffff04;border-radius:8px;padding:10px 14px}.learning-path i{font-style:normal;color:#789dc9}.welcome-footer{color:#8faaca;font-size:12px}
.form-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 40px;background:linear-gradient(145deg,#fff,#f4f7fc)}.login-card{width:100%;max-width:380px}.card-mark{display:grid;place-items:center;background:#eaf2ff;color:#176bf1;width:48px;height:48px;border-radius:14px;margin-bottom:26px}.card-mark svg{width:25px;height:25px}h2{font-size:30px;letter-spacing:1px;font-weight:600;margin:0 0 12px}.form-description{font-size:14px;color:#687c94;line-height:1.8;margin:0 0 34px}label{display:block;margin:22px 0 9px;font-size:14px;font-weight:600}input{width:100%;height:50px;padding:0 15px;border:1px solid #dce5f0;border-radius:9px;outline:none;background:#fff;color:#15283e;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#95a3b4}input:focus{border-color:#176bf1;box-shadow:0 0 0 3px #176bf117}button{width:100%;height:50px;background:#176bf1;color:#fff;border:0;border-radius:9px;cursor:pointer;font-weight:600;display:flex;justify-content:center;align-items:center;gap:16px;box-shadow:0 6px 18px #176bf121}button:hover{background:#125bd0}button:focus-visible{outline:3px solid #93b9ff;outline-offset:3px}button:disabled{opacity:.65;cursor:wait}.login-error{min-height:22px;margin:12px 0 14px;color:#b42336;font-size:13px;line-height:1.6}.login-note{font-size:12px;text-align:center;color:#8291a4;margin:22px 0 0;line-height:1.8}.form-panel footer{position:absolute;bottom:28px;font-size:11px;letter-spacing:1px;color:#95a3b4}
@media(max-width:1050px){.welcome-panel{padding:36px}.learning-path{gap:8px}.learning-path span{padding:9px}}
@media(max-width:700px){.login-layout{display:flex;flex-direction:column}.welcome-panel{padding:24px}.brand{font-size:18px}.brand-icon{width:40px;height:40px}.welcome-content,.welcome-footer{display:none}.form-panel{flex:1;padding:36px 24px 72px;min-height:calc(100dvh - 96px)}.card-mark{margin-bottom:20px}h2{font-size:27px}.form-description{margin-bottom:26px}input{font-size:16px}.form-panel footer{bottom:22px}}
@media(prefers-reduced-motion:reduce){input{transition:none}}