:root{--bg:#0b0b10;--surface:#111218;--muted:#9aa3b2;--text:#e6e8ef;--accent:#6c64f2;--accent-2:#06b6d4;--success:#10b981;--glass:rgba(255,255,255,0.08);--radius:16px;--shadow:0 10px 30px rgba(0,0,0,0.35)}*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#0a0b0f 0%,#0d0f16 100%);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;position:relative;overflow:hidden}.bg-bubbles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}.bg-bubbles li{position:absolute;list-style:none;display:block;width:40px;height:40px;background-color:rgba(255,255,255,0.1);bottom:-160px;border-radius:50%;animation:square 25s infinite;transition-timing-function:linear}.bg-bubbles li:nth-child(1){left:10%;animation-delay:0s;width:80px;height:80px}.bg-bubbles li:nth-child(2){left:20%;animation-delay:2s;animation-duration:17s;width:60px;height:60px}.bg-bubbles li:nth-child(3){left:25%;animation-delay:4s;width:120px;height:120px}.bg-bubbles li:nth-child(4){left:40%;animation-delay:0s;animation-duration:22s;width:160px;height:160px}.bg-bubbles li:nth-child(5){left:70%;animation-delay:3s;width:100px;height:100px}.bg-bubbles li:nth-child(6){left:80%;animation-delay:2s;width:120px;height:120px}.bg-bubbles li:nth-child(7){left:32%;animation-delay:6s;width:140px;height:140px}.bg-bubbles li:nth-child(8){left:55%;animation-delay:8s;animation-duration:18s;width:40px;height:40px}.bg-bubbles li:nth-child(9){left:25%;animation-delay:9s;animation-duration:20s;width:20px;height:20px}.bg-bubbles li:nth-child(10){left:90%;animation-delay:11s;width:60px;height:60px}
@keyframes square{0%{transform:translateY(0)rotate(0deg);opacity:0.5;border-radius:50%}
100%{transform:translateY(-1000px)rotate(720deg);opacity:0;border-radius:50%}}.login-container{width:100%;max-width:440px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative;z-index:1;border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(10px)}.login-header{background:var(--accent);padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden}.login-header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;transform:rotate(30deg)}.logo{display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:white;font-weight:800;font-size:1.8rem}.logo i{color:white;margin-right:12px;font-size:2.2rem}.login-header h1{font-weight:700;font-size:1.8rem;margin-bottom:0.5rem;color:white}.login-header p{color:rgba(255,255,255,0.8);font-size:1rem}.login-body{padding:2rem}.form-group{margin-bottom:1.5rem;position:relative}.form-label{display:block;margin-bottom:0.5rem;font-weight:600;color:var(--text);display:flex;align-items:center}.form-label i{margin-right:10px;color:var(--accent)}.form-control{width:100%;padding:14px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--text);font-size:1rem;transition:all 0.3s ease}.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,29,72,0.2);background:rgba(255,255,255,0.08)}.form-control::placeholder{color:var(--muted)}.password-toggle{position:absolute;right:15px;top:42px;color:var(--muted);cursor:pointer;transition:color 0.3s}.password-toggle:hover{color:var(--text)}.btn{display:block;width:100%;padding:14px;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-align:center}.btn-primary{background:var(--accent);color:white;margin-bottom:1.5rem;box-shadow:0 4px 10px #8079ff}.btn-primary:hover{transform:translateY(-2px)}.divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--muted)}.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.1)}.divider span{padding:0 15px;font-size:0.9rem}.btn-register{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.btn-register:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}.login-footer{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1)}.login-footer a{color:var(--accent);text-decoration:none;font-weight:600;transition:color 0.3s}.login-footer a:hover{color:#ff6b8a;text-decoration:underline}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}}.login-container{animation:fadeIn 0.6s ease-out}
@media(max-width:480px){.login-container{margin:0 10px}.login-header{padding:2rem 1.5rem}.login-body{padding:1.5rem}.logo{font-size:1.5rem}.login-header h1{font-size:1.5rem}}.is-invalid{border-color:#ff4757!important}.invalid-feedback{color:#ff4757;font-size:0.85rem;margin-top:0.5rem;display:none}.is-invalid+.invalid-feedback{display:block}