@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Outfit', sans-serif; 
    background: #0a0a1a url('../img/bg-pattern.png') center/cover;
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

/* Background Animated Orbs */
body::before, body::after {
    content: '';
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    animation: drift 20s infinite alternate linear;
}
body::before { background: rgba(247, 37, 133, 0.4); top: -10vw; left: -10vw; }
body::after { background: rgba(67, 97, 238, 0.4); bottom: -10vw; right: -10vw; animation-delay: -10s; }

@keyframes drift {
    100% { transform: translate(10vw, 10vw) scale(1.2); }
}

.login-wrapper { padding: 20px; width: 100%; display: flex; justify-content: center; }

.login-glass { 
    background: rgba(26, 26, 46, 0.4); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 50px 40px; 
    border-radius: 24px; 
    width: 100%; 
    max-width: 420px; 
    text-align: center; 
    border: 1px solid rgba(255,255,255,0.05); 
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

.logo { 
    width: 80px; 
    height: 80px; 
    background: linear-gradient(135deg, #f72585, #7209b7); 
    border-radius: 20px; 
    margin: 0 auto 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2.5rem; 
    box-shadow: 0 10px 25px rgba(247, 37, 133, 0.5);
}

h1 { 
    background: linear-gradient(to right, #fff, #b5179e); 
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    margin-bottom: 5px; 
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.input-group { margin-bottom: 20px; }

input { 
    width: 100%; 
    padding: 18px 20px; 
    border-radius: 12px; 
    background: rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.1); 
    color: #fff; 
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
input::placeholder { color: #666; font-weight: 500; }
input:focus { outline: none; border-color: #f72585; background: rgba(0,0,0,0.6); box-shadow: 0 0 20px rgba(247, 37, 133, 0.2); }

.btn-glow { 
    width: 100%; 
    padding: 18px; 
    margin-top: 10px; 
    border-radius: 12px; 
    background: linear-gradient(135deg, #f72585, #4361ee); 
    color: #fff; 
    font-weight: 800; 
    font-size: 1.2rem;
    font-family: inherit;
    letter-spacing: 1px;
    border: none; 
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(247, 37, 133, 0.5); }

.error { 
    color: #ff4d4d; 
    font-size: 0.9rem; 
    margin-top: 20px; 
    background: rgba(255, 77, 77, 0.1);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
}