:root {
    --login-bg-dark: #0f1221;
    --login-bg-mid: #1e274f;
    --login-panel: rgba(8, 12, 31, 0.78);
    --login-panel-border: rgba(255, 255, 255, 0.22);
    --login-text: #f5f7ff;
    --login-muted: #b8c0e7;
    --login-accent: #50a3df;
    --login-accent-light: #6ab8eb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", sans-serif;
    color: var(--login-text);
    background: linear-gradient(120deg, rgba(15, 18, 33, 0.9), rgba(30, 39, 79, 0.62)), url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1950&q=80') center/cover no-repeat;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-shell {
    width: min(460px, 100%);
    border-radius: 24px;
    background: var(--login-panel);
    border: 1px solid var(--login-panel-border);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 70px rgba(6, 10, 28, 0.45);
    padding: 2.2rem 2rem 1.9rem;
    animation: panel-in .55s ease-out;
}

@@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

.brand {
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .3px;
    margin: 0 0 1.15rem;
    text-align: center;
}

    .brand span {
        color: var(--login-accent);
    }

h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    text-align: center;
}

.subtitle {
    margin: .45rem 0 1.5rem;
    color: var(--login-muted);
    text-align: center;
    font-size: .95rem;
}

.input-wrap {
    margin-bottom: .9rem;
}

label {
    display: block;
    font-size: .84rem;
    margin-bottom: .42rem;
    color: #dce2ff;
}

.field {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 12px;
    padding: .76rem .9rem;
    font-size: .96rem;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

    .field::placeholder {
        color: rgba(230, 234, 255, 0.62);
    }

    .field:focus {
        border-color: var(--login-accent);
        background: rgba(255, 255, 255, 0.12);
    }

.validation {
    margin: 0 0 .8rem;
    padding: .62rem .75rem;
    border-radius: 10px;
    background: rgba(255, 82, 82, 0.14);
    border: 1px solid rgba(255, 122, 122, 0.45);
    color: #ffd6d6;
    font-size: .84rem;
}

.field-validation {
    display: block;
    margin-top: .32rem;
    color: #ffc0c0;
    font-size: .8rem;
}

.row-meta {
    margin: .35rem 0 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
}

.remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #dfe5ff;
}

    .remember input {
        accent-color: var(--login-accent);
    }

.forgot {
    color: #d9ecfb;
    text-decoration: none;
}

    .forgot:hover {
        text-decoration: underline;
    }

.btn-login {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: .82rem .95rem;
    font-size: .97rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: #f3f8ff;
    background: linear-gradient(90deg, var(--login-accent) 0%, var(--login-accent-light) 100%);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
    box-shadow: 0 12px 26px rgba(80, 163, 223, .35);
}

    .btn-login:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(80, 163, 223, .42);
    }

.foot-note {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--login-muted);
    font-size: .82rem;
}

    .foot-note a {
        color: #ecfffa;
        text-decoration: none;
    }

        .foot-note a:hover {
            text-decoration: underline;
        }

@@media (max-width: 520px) {
    .login-shell {
        padding: 1.6rem 1.1rem 1.35rem;
        border-radius: 18px;
    }

    h1 {
        font-size: 1.28rem;
    }
}