:root {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #222;
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main {
    height: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
}
.login { width: 100%; max-width: 320px; }
.login-header { margin-bottom: 26px; }
.wordmark { display: block; font-size: 30px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; }
h1 { margin: 8px 0 0; color: #777; font-size: 13px; font-weight: 400; }
.field { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; }
input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 16px;
}
input:focus-visible { outline: 2px solid #555; outline-offset: 1px; }
button {
    width: 100%;
    height: 40px;
    margin-top: 4px;
    border: 0;
    border-radius: 4px;
    background: #252525;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
button:hover { background: #404040; }
button:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.error-message { margin-bottom: 14px; color: #a32e28; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; max-height: 48px; overflow: auto; }
@media (max-height: 420px) {
    main { padding-block: 8px; }
    .login-header { margin-bottom: 12px; }
    .wordmark { font-size: 24px; }
    h1 { margin-top: 4px; }
    .field { margin-bottom: 10px; }
    input, button { height: 36px; }
}