:root {
    color-scheme: light;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: #eef1f4;
    color: #18202a;
}

.login-card {
    width: min(100%, 27rem);
    padding: clamp(1.4rem, 4vw, 2.2rem);
    border: 1px solid #cfd6df;
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 1rem 3rem rgb(20 30 45 / 10%);
}

.login-heading h1 {
    margin: 0.2rem 0 0.45rem;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
}

.login-heading p {
    margin: 0;
    color: #5b6573;
}

.login-kicker {
    color: #315b79 !important;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.login-form label {
    display: grid;
    gap: 0.4rem;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #aeb8c5;
    border-radius: 0.45rem;
    background: #fff;
    color: inherit;
    font: inherit;
}

.login-form input:focus {
    outline: 3px solid rgb(50 102 139 / 22%);
    border-color: #32668b;
}

.login-form button {
    min-height: 2.9rem;
    border: 1px solid #234e6d;
    border-radius: 0.48rem;
    background: #315f80;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.login-form button:hover,
.login-form button:focus-visible {
    background: #244d69;
}

.login-error,
.login-notice {
    margin-top: 1.2rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.45rem;
    line-height: 1.45;
}

.login-error {
    border: 1px solid #c96a6a;
    background: #fff2f2;
    color: #7b2020;
}

.login-notice {
    border: 1px solid #d1b56b;
    background: #fff9e9;
    color: #614b16;
}

.login-notice code {
    font-weight: 700;
}