*{
box-sizing:border-box}

body{
margin:0;
min-height:100vh;
font-family:"Microsoft YaHei",sans-serif;
background:radial-gradient(circle at 15% 10%,#225ca1 0,#0c2344 38%,#07162b 100%);
color:#fff}

.login-shell{
min-height:100vh;
display:grid;
grid-template-columns:1.25fr .75fr;
align-items:center;
max-width:1180px;
margin:auto;
padding:50px}

.login-brand .logo{
width:76px;
height:76px;
border-radius:20px;
background:linear-gradient(135deg,#3b8cff,#54d1ff);
display:grid;
place-items:center;
font-size:40px;
font-weight:bold;
box-shadow:0 15px 40px #061327}

.login-brand h1{
font-size:44px;
line-height:1.3;
margin:28px 0 16px}

.login-brand p{
color:#acc5e6;
font-size:18px}

.tags{
display:flex;
gap:12px;
margin-top:30px}

.tags span{
border:1px solid #3e6694;
border-radius:20px;
padding:7px 15px;
color:#cbe0fa}

.login-card{
background:#fff;
color:#15243a;
border-radius:18px;
padding:42px;
box-shadow:0 28px 70px rgba(0,0,0,.28)}

.login-card h2{
font-size:28px;
margin:0}

.login-card>p,.login-card small{
color:#77859a}

.login-card label{
display:block;
margin:20px 0;
color:#425168}

.login-card input{
display:block;
width:100%;
height:48px;
margin-top:7px;
padding:0 14px;
border:1px solid #d9e1eb;
border-radius:8px;
font-size:16px}

.login-card button{
width:100%;
height:50px;
border:0;
border-radius:8px;
background:#2374e1;
color:#fff;
font-size:17px;
font-weight:bold;
margin:8px 0 18px}

.error{
background:#fff0f0;
color:#b62f2f;
padding:11px;
border-radius:7px;
margin-top:16px}

@media(max-width:800px){
.login-shell{
grid-template-columns:1fr;
padding:24px}

.login-brand{
display:none}

}


/* Login layout refinement */
body{background:radial-gradient(ellipse at 12% 18%,#244e83 0,transparent 52%),linear-gradient(135deg,#102a4d,#07162b);line-height:1.6}
.login-shell{max-width:1240px;grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr);gap:80px;padding:48px}
.login-brand h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:1px}
.login-brand p{font-size:16px}
.login-brand .logo{border:1px solid #ffffff30}
.login-card{padding:40px;border:1px solid #e3eaf3;border-radius:22px;box-shadow:0 28px 80px #00000030}
.login-card>p{font-size:14px;margin:10px 0 26px;line-height:1.8}
.login-card label{font-size:14px;font-weight:600;margin:20px 0}
.login-card input{background:#f8fafc;transition:border-color .2s,box-shadow .2s;outline:none;height:50px;color:#15243a}
.login-card input:focus{border-color:#2879e6;box-shadow:0 0 0 4px #2879e61a;background:#fff}
.login-card button{cursor:pointer;background:linear-gradient(110deg,#2563eb,#287fe9);box-shadow:0 6px 16px #2563eb26;transition:filter .2s}
.login-card button:hover{filter:brightness(1.08)}
.login-card button:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
.login-card small{display:block;text-align:center;font-size:12px;border-top:1px solid #edf0f5;padding-top:20px}
@media(max-width:900px){.login-shell{gap:32px;padding:32px;grid-template-columns:1fr 1fr}.login-card{padding:28px}.tags{gap:8px;flex-wrap:wrap}.tags span{font-size:13px}}
@media(max-width:800px){.login-shell{grid-template-columns:minmax(0,420px);justify-content:center;padding:24px;gap:0}.login-brand{display:none}.login-card{width:100%;padding:32px 26px}.login-card h2{font-size:26px}}