*{margin:0;padding:0;box-sizing:border-box}

body.login-page{
min-height:100vh;
overflow:hidden;
font-family:Inter,Arial,sans-serif;
background:
radial-gradient(circle at 20% 20%, rgba(0,255,200,.08), transparent 25%),
radial-gradient(circle at 80% 70%, rgba(80,120,255,.12), transparent 30%),
linear-gradient(135deg,#07111f 0%,#081426 35%,#0b1730 100%);
position:relative;
}

body.login-page::before{
content:"";
position:absolute;
inset:-20%;
background:
radial-gradient(circle, rgba(0,255,200,.05), transparent 35%),
radial-gradient(circle, rgba(95,130,255,.08), transparent 40%);
animation:bgFloat 18s linear infinite;
z-index:0;
}

@keyframes bgFloat{
0%{transform:translate(-5%,-5%) rotate(0deg)}
50%{transform:translate(5%,5%) rotate(180deg)}
100%{transform:translate(-5%,-5%) rotate(360deg)}
}

.login-particles{
position:absolute;
inset:0;
overflow:hidden;
z-index:1;
pointer-events:none;
}

.login-particles span{
position:absolute;
width:4px;
height:4px;
border-radius:50%;
background:#53ffd7;
opacity:.5;
box-shadow:0 0 10px #53ffd7;
animation:floatParticle linear infinite;
}

.login-particles span:nth-child(1){left:10%;top:100%;animation-duration:12s}
.login-particles span:nth-child(2){left:25%;top:100%;animation-duration:18s}
.login-particles span:nth-child(3){left:50%;top:100%;animation-duration:15s}
.login-particles span:nth-child(4){left:75%;top:100%;animation-duration:20s}
.login-particles span:nth-child(5){left:90%;top:100%;animation-duration:14s}

@keyframes floatParticle{
from{transform:translateY(0);opacity:0}
10%{opacity:.5}
to{transform:translateY(-120vh);opacity:0}
}

.login-wrapper{
position:relative;
z-index:5;
display:flex;
align-items:center;
justify-content:center;
gap:40px;
min-height:100vh;
padding:40px;
animation:fadeIn .8s ease;
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:none}
}

.login-hero,.login-box{
backdrop-filter:blur(18px);
background:rgba(10,18,35,.82);
border:1px solid rgba(100,180,255,.12);
border-radius:28px;
box-shadow:0 0 40px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.02);
transition:.25s ease;
}

.login-hero:hover,.login-box:hover{transform:translateY(-3px)}

.login-hero{
width:540px;
padding:42px;
position:relative;
overflow:hidden;
}

.login-hero::after{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
background:rgba(0,255,200,.06);
right:-120px;
bottom:-120px;
filter:blur(20px);
}

.login-badge{
display:inline-flex;
align-items:center;
padding:8px 14px;
border-radius:999px;
background:rgba(0,255,170,.08);
border:1px solid rgba(0,255,170,.18);
color:#7affd7;
font-size:12px;
margin-bottom:20px;
letter-spacing:1px;
}

.login-title{
font-size:clamp(48px,4.2vw,58px);
line-height:1;
font-weight:800;
color:#fff;
margin-bottom:20px;
letter-spacing:-1.5px;
}

.login-desc{
color:#aebcd5;
line-height:1.8;
font-size:17px;
margin-bottom:30px;
}

.hero-tags{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.hero-tags span{
padding:10px 16px;
border-radius:14px;
border:1px solid rgba(100,180,255,.12);
background:rgba(255,255,255,.02);
color:#dfe8ff;
font-size:13px;
}

.login-box{
width:430px;
padding:42px;
}

.login-status{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
}

.status-online{
display:flex;
align-items:center;
gap:10px;
color:#7affd7;
font-size:13px;
letter-spacing:1px;
}

.status-online::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
background:#42ffb0;
box-shadow:0 0 10px #42ffb0;
animation:pulse 1.8s infinite;
}

@keyframes pulse{
0%{transform:scale(.8);opacity:.5}
50%{transform:scale(1.2);opacity:1}
100%{transform:scale(.8);opacity:.5}
}

.mini-role{
padding:8px 12px;
border-radius:12px;
background:rgba(95,124,255,.1);
border:1px solid rgba(95,124,255,.2);
color:#8db3ff;
font-size:11px;
letter-spacing:1px;
}

.login-box h2{
color:#fff;
font-size:44px;
margin-bottom:8px;
}

.login-subtitle{
color:#9eb0cc;
margin-bottom:28px;
}

.login-error{
margin-bottom:18px;
padding:14px;
border-radius:14px;
background:rgba(255,80,80,.08);
border:1px solid rgba(255,80,80,.18);
color:#ffb3b3;
font-size:14px;
}

.login-box input{
width:100%;
height:58px;
border-radius:16px;
border:1px solid rgba(100,180,255,.12);
background:#081423;
color:#fff;
padding:0 18px;
font-size:15px;
margin-bottom:18px;
transition:.25s;
}

.login-box input:focus{
outline:none;
border-color:rgba(72,207,255,.9);
box-shadow:0 0 0 1px rgba(72,207,255,.35),0 0 18px rgba(72,207,255,.18),0 0 35px rgba(72,207,255,.10);
transform:translateY(-1px);
}

.login-btn{
width:100%;
height:60px;
border:none;
border-radius:18px;
font-size:18px;
font-weight:700;
color:#fff;
cursor:pointer;
background:linear-gradient(135deg,#5b8cff,#57e6b1);
transition:.25s;
box-shadow:0 10px 30px rgba(91,140,255,.25);
position:relative;
overflow:hidden;
}

.login-btn::before{
content:'';
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
transform:skewX(-20deg);
transition:.7s;
}

.login-btn:hover::before{left:140%}

.login-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(77,163,255,.25),0 0 40px rgba(90,255,200,.15);
}

.login-footer{
margin-top:20px;
text-align:center;
color:#7f90a8;
font-size:13px;
}

@media(max-width:1100px){
body.login-page{overflow:auto}
.login-wrapper{flex-direction:column}
.login-hero,.login-box{width:100%;max-width:620px}
.login-title{font-size:44px}
}

/* ===== BCS Login Rework v20260527 polish ===== */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.login-notice{margin-bottom:18px;padding:14px;border-radius:14px;background:rgba(83,255,215,.08);border:1px solid rgba(83,255,215,.18);color:#a9ffe9;font-size:14px;line-height:1.45}
.login-box input{background:#eaf1ff;color:#10213d;border-color:rgba(255,255,255,.08)}
.login-box input::placeholder{color:#697893}.login-box input:focus{background:#f4f8ff;color:#081423}
.login-hero,.login-box{isolation:isolate}.login-hero>*{position:relative;z-index:2}
.login-wrapper{max-width:1280px;margin:0 auto}.login-page{color-scheme:dark}
@media(max-width:760px){.login-wrapper{padding:22px}.login-hero,.login-box{padding:28px;border-radius:24px}.login-title{font-size:40px!important}.login-box h2{font-size:36px}.login-desc{font-size:15px}.hero-tags span{padding:9px 12px}.login-status{align-items:flex-start;gap:12px;flex-direction:column}.login-box input,.login-btn{height:56px}}
@media(max-width:420px){.login-wrapper{padding:16px}.login-hero,.login-box{padding:22px}.login-title{font-size:34px!important}.login-box h2{font-size:32px}}