:root {
    color-scheme: light;
    --background: #fafafa;
    --foreground: #17191d;
    --muted: #5d6673;
    --line: #d9dde3;
    --blue: #2563eb;
    --surface: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-page {
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(440px, 100%);
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(23, 25, 29, 0.1);
}

.login-card img {
    width: min(260px, 100%);
    height: auto;
    margin-bottom: 24px;
}

.login-card h1 { font-size: 30px; }

.stack-form {
    display: grid;
    gap: 18px;
}

.stack-form label,
.stack-form label > span {
    display: grid;
    gap: 7px;
}

.stack-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--foreground);
    font: inherit;
}

button {
    min-height: 44px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    padding: 10px 16px;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

a { color: #1749a3; }

.field-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.notice {
    border-left: 4px solid var(--blue);
    padding: 12px;
    background: #eef4ff;
}

.notice-error {
    border-left-color: #b3131a;
    background: #fff1f1;
}

:where(a, button, input):focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

@media (max-width: 430px) {
    .login-page { padding: 16px; }
    .login-card { padding: 24px; }
}