*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0b0e14;position:relative;overflow:hidden}

/* Background gradient */
body::before{content:'';position:fixed;inset:0;background:
    radial-gradient(circle at 30% 40%,rgba(255,120,0,.1) 0%,transparent 60%),
    radial-gradient(circle at 70% 60%,rgba(0,160,255,.08) 0%,transparent 60%);
    animation:bgPulse 10s ease-in-out infinite alternate}
@keyframes bgPulse{0%{opacity:.6}100%{opacity:1}}

/* Particles */
.particles{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{
    0%{transform:translateY(100vh) scale(0);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* Card */
.login-wrapper{position:relative;z-index:10;width:100%;max-width:400px;padding:20px;animation:cardIn .6s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:translateY(30px)}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}

.login-card{background:linear-gradient(160deg,rgba(25,28,38,.95),rgba(15,17,24,.98));border:1px solid rgba(255,255,255,.06);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;position:relative}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b00,#ff8c00,#ffaa00,#00c8ff,#0096ff,#00c8ff,#ffaa00,#ff8c00,#ff6b00);background-size:300% 100%;animation:borderShine 5s linear infinite}
@keyframes borderShine{0%{background-position:0% 0}100%{background-position:300% 0}}

/* Logo section */
.login-header{text-align:center;padding:32px 30px 12px}
.login-logo{width:88px;height:88px;margin:0 auto 16px;background:linear-gradient(145deg,#ff8c00,#ff6b00);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(255,120,0,.35);position:relative;animation:logoGlow 3s ease-in-out infinite}
.login-logo img{width:70%;height:70%;object-fit:contain;filter:brightness(1.3) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
@keyframes logoGlow{0%,100%{box-shadow:0 8px 30px rgba(255,120,0,.35)}50%{box-shadow:0 8px 40px rgba(255,120,0,.5),0 0 15px rgba(0,180,255,.15)}}

.login-header h1{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:3px;margin-bottom:2px}
.login-header h1 span{background:linear-gradient(90deg,#ff8c00,#ffb347,#00c8ff);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textGlow 4s linear infinite}
@keyframes textGlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.login-header p{color:rgba(255,255,255,.3);font-size:.75rem;letter-spacing:1.5px;font-weight:500}

/* Form */
.login-body{padding:20px 32px 32px}
.alert{padding:12px 16px;border-radius:10px;font-size:.84rem;margin-bottom:18px;background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.12);animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.form-group{margin-bottom:18px}
.form-group label{display:block;color:rgba(255,255,255,.4);font-size:.7rem;font-weight:700;margin-bottom:7px;letter-spacing:1px;text-transform:uppercase}
.input-group{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:16px;color:rgba(255,140,0,.35);font-size:.85rem;z-index:2;transition:all .3s}
.form-input{width:100%;padding:13px 48px 13px 44px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;font-size:.9rem;font-family:'Plus Jakarta Sans',sans-serif;transition:all .25s}
.form-input::placeholder{color:rgba(255,255,255,.15)}
.form-input:focus{outline:none;border-color:rgba(0,180,255,.45);background:rgba(0,180,255,.04);box-shadow:0 0 0 3px rgba(0,180,255,.08)}
.input-group:focus-within .input-icon{color:#00bfff;filter:drop-shadow(0 0 4px rgba(0,191,255,.5))}
.toggle-password{position:absolute;right:14px;background:none;border:none;color:rgba(255,255,255,.2);cursor:pointer;z-index:2;padding:4px;transition:color .3s}
.toggle-password:hover{color:#00bfff}

/* Button */
.btn-login{width:100%;padding:14px;background:linear-gradient(135deg,#ff8c00,#ff6b00);border:none;border-radius:12px;color:#fff;font-size:.95rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:all .25s;letter-spacing:.5px;margin-top:6px;position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(255,120,0,.25)}
.btn-login::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,120,0,.35)}
.btn-login:hover::before{left:100%}
.btn-login:active{transform:translateY(0)}

/* Footer */
.login-footer{text-align:center;padding:0 32px 20px;font-size:.7rem;color:rgba(255,255,255,.15)}

/* Responsive */
@media(max-width:480px){.login-wrapper{padding:16px;max-width:100%}.login-card{border-radius:16px}.login-header{padding:28px 24px 10px}.login-body{padding:18px 24px 28px}.login-logo{width:76px;height:76px;border-radius:18px}}