.login-page {
    --paper: #f1f8f6;
    --surface: #fff;
    --text: #142c28;
    --muted: #46615b;
    --border: #cfe2da;
    --field-border: #8ca9a0;
    --accent: #13594f;
    --accent-soft: #dff2e9;
    --action: #07574e;
    --action-hover: #06473f;
    --on-action: #fff;
    --focus: #0d7467;
    --error-text: #9e2240;
    --error-bg: #fff1f3;
    --success-text: #1a604b;
    --success-bg: #e3f6eb;
    --shadow: 0 12px 40px rgb(20 61 49 / 8%);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--paper);
    color: var(--text);
    color-scheme: light;
    font: 400 16px/1.5 system-ui, sans-serif;
}

.login-page * { box-sizing: border-box; }

.login-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 16px;
    padding: 10px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }

.login-brand-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.login-page svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-page a { color: var(--accent); text-underline-offset: 3px; }
.login-page a:hover { text-decoration: underline; }
.login-support { padding: 10px 0; font-size: .875rem; font-weight: 600; text-decoration: none; }

.login-shell {
    display: grid;
    flex: 1;
    place-items: center;
    padding: clamp(24px, 6vw, 64px) 16px;
    background:
        radial-gradient(ellipse at 16% 67%, var(--accent-soft), transparent 60%),
        radial-gradient(var(--border) 1px, transparent 1.5px) 0 0 / 17px 17px;
}

.login-card {
    width: min(100%, 410px);
    padding: clamp(22px, 5vw, 32px);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-kicker {
    margin: 0 0 5px;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-card h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.15; letter-spacing: -.04em; }
.login-intro { margin: 6px 0 0; color: var(--muted); font-size: .9375rem; }
.login-form { display: grid; gap: 14px; margin-top: 22px; }
.login-form label { display: grid; gap: 5px; font-size: .875rem; font-weight: 650; }

.login-form input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: 400 1rem/1.4 system-ui, sans-serif;
}

.login-form input::placeholder { color: var(--muted); opacity: 1; }
.login-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.login-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--action);
    color: var(--on-action);
    font: 650 .9375rem/1.4 system-ui, sans-serif;
    cursor: pointer;
}

.login-form button:hover { background: var(--action-hover); }
.login-form button svg { width: 17px; height: 17px; }
.login-recovery { margin: 14px 0 0; text-align: center; font-size: .875rem; }
.login-page .alert { margin-top: 14px; padding: 9px 11px; border-radius: 8px; font-size: .875rem; overflow-wrap: anywhere; }
.login-page .alert.error { background: var(--error-bg); color: var(--error-text); }
.login-page .alert.success { background: var(--success-bg); color: var(--success-text); }

@media (prefers-color-scheme: dark) {
    .login-page {
        --paper: #132321;
        --surface: #1b302d;
        --text: #e8f7f2;
        --muted: #adc7be;
        --border: #34504a;
        --field-border: #6d9287;
        --accent: #9de6cf;
        --accent-soft: #244940;
        --action: #97e4ce;
        --action-hover: #b2efde;
        --on-action: #102d27;
        --focus: #9de6cf;
        --error-text: #ffd0d8;
        --error-bg: #592c38;
        --success-text: #b8f2dc;
        --success-bg: #254d41;
        --shadow: 0 12px 40px rgb(0 0 0 / 15%);
        color-scheme: dark;
    }
}