/* ---- Animations ---- */
.fade-in {
    animation: fadein .5s ease-out;
}
@keyframes fadein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Login Card ---- */
.auth-card {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.auth-logo {
    width: 80px;
    display: block;
    margin: 0 auto 16px auto;
}

body.auth-bg {
    background: linear-gradient(135deg, #f5f7fa, #dfe8ff);
    min-height: 100vh;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
    body.auth-bg {
        background: #111;
    }
    .auth-card {
        background: rgba(20,20,20,0.82);
        color: #eee;
    }
    .auth-card input {
        background: #222 !important;
        color: #eee !important;
        border-color: #444 !important;
    }
    .auth-card .form-label {
        color: #bbb;
    }
}