:root {
    --color-bg: #050816;
    --color-accent: #38bdf8;
    --color-accent-soft: rgba(56, 189, 248, 0.2);
    --color-card: rgba(15, 23, 42, 0.92);
    --color-text: #e5e7eb;
    --color-text-soft: #94a3b8;
    --radius: 1.2rem;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 10%, rgba(56,189,248,0.16), transparent 60%), radial-gradient(circle at 90% 90%, rgba(59,130,246,0.16), transparent 60%), var(--color-bg);
    font-family: system-ui, sans-serif;
    color: var(--color-text);
}

.login-card {
    width: 100%;
    max-width: 380px !important;
    padding: 2rem;
    margin: 0px 10px;
    border-radius: var(--radius);
    background: var(--color-card);
    border: 1px solid rgba(148,163,184,0.3);
    box-shadow: 0 0 25px rgba(15,23,42,0.85);
    animation: fadeIn 0.6s ease-out;
}

.login-logo {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background:#e5e7eb;
    /* background: radial-gradient(circle at 30% 0%, #38bdf8, transparent 60%), radial-gradient(circle at 70% 100%, #4f46e5, transparent 55%);
    box-shadow: 0 0 18px rgba(56,189,248,0.8);*/
    margin: 0 auto 1rem;
}

.login-title {
    text-align: center;
    margin-bottom: .5rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.login-subtitle {
    text-align: center;
    color: var(--color-text-soft);
    margin-bottom: 1.6rem;
    font-size: .9rem;
}

.form-control {
    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(148,163,184,.4);
    color: var(--color-text);
    border-radius: .8rem;
}

    .form-control:focus {
        box-shadow: 0 0 0 2px var(--color-accent-soft);
        border-color: var(--color-accent);
    }

.btn-login {
    background: linear-gradient(90deg, rgba(56,189,248,0.3), rgba(37,99,235,0.4));
    border: 1px solid rgba(56,189,248,0.6);
    color: white;
    width: 100%;
    padding: .6rem;
    border-radius: .8rem;
    font-size: 1rem;
    box-shadow: 0 0 16px rgba(56,189,248,0.35);
}

    .btn-login:hover {
        background: rgba(56,189,248,0.45);
    }

.btn-google {
    width: 100%;
    padding: .55rem;
    border-radius: .8rem;
    border: 1px solid rgba(148,163,184,.4);
    background: rgba(15,23,42,.7);
    color: var(--color-text);
}

    .btn-google:hover {
        background: rgba(30,41,59,.9);
        border-color: var(--color-accent);
    }

.google-icon {
    width: 22px;
    margin-right: 6px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (max-width: 768px) {
    .login-card {
        max-width: 90%;
    }
}