.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#080c14}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 900px 600px at 60% 40%,rgba(37,99,235,.18),transparent 70%),radial-gradient(ellipse 600px 400px at 20% 70%,rgba(6,182,212,.12),transparent 60%),#080c14}
.hero-grid{position:absolute;inset:0;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:60px 60px}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:orbFloat 12s infinite;pointer-events:none}
.hero-orb-1{width:500px;height:500px;background:#2563eb;top:-100px;right:-100px}
.hero-orb-2{width:350px;height:350px;background:#06b6d4;bottom:-80px;left:10%}
.hero-orb-3{width:200px;height:200px;background:#3b82f6;left:60%;top:40%}
@keyframes orbFloat{0%,100%{transform:translate(0)}50%{transform:translate(30px,-20px)}}

.login-container{width:1000px;max-width:90%;display:flex;align-items:center;gap:80px;position:relative;z-index:2}

.login-brand-panel{flex:1;color:white}
.brand-title{font-size:4rem;font-weight:900;background:linear-gradient(135deg,#fff,#93c5fd,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand-desc{margin-top:20px;color:rgba(255,255,255,.55);line-height:1.8}
.brand-app-list{margin-top:40px;display:flex;flex-direction:column;gap:18px}
.brand-app{display:flex;align-items:center;gap:15px}
.brand-app img{width:55px;height:55px;border-radius:14px;object-fit:cover}
.brand-app strong{display:block}
.brand-app span{display:block;color:rgba(255,255,255,.45);font-size:.8rem;margin-top:5px}
.brand-stat{display:flex;gap:10px;margin-top:35px}
.brand-stat span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:10px 15px;border-radius:50px;font-size:.8rem}

.login-card{width:400px;padding:45px;background:rgba(13,21,38,.8);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:28px;box-shadow:0 40px 80px rgba(0,0,0,.5)}

.login-logo{text-align:center;margin-bottom:35px}
.login-brand{font-size:2rem;font-weight:900;background:linear-gradient(135deg,#fff,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-logo h2{color:#fff;margin:15px 0 5px}
.login-logo p{color:rgba(255,255,255,.45)}

.login-input{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;margin-bottom:15px}
.login-input input{flex:1;background:none;border:0;outline:0;color:white}
.login-input input::placeholder{color:rgba(255,255,255,.35)}

.login-options{display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:.85rem;margin:20px 0}
.login-options a{color:#60a5fa;text-decoration:none}

.login-submit{width:100%;height:58px;border:0;border-radius:50px;color:white;font-weight:700;background:linear-gradient(135deg,#2563eb,#06b6d4);cursor:pointer}
.login-submit:hover{transform:translateY(-2px)}

.login-error{padding:12px;background:rgba(239,68,68,.15);border-radius:10px;color:#fca5a5;margin-bottom:20px}

.login-footer{text-align:center;color:rgba(255,255,255,.25);margin-top:30px;font-size:.8rem}

@media(max-width:900px){
.login-container{flex-direction:column;gap:30px}
.login-brand-panel{text-align:center}
.brand-app-list{display:none}
.login-card{width:100%}
}