* { box-sizing: border-box; }
body {
    margin: 0;
    background: #fff;
    color: #10243d;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
}
.login-page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    padding: 20px 16px;
}
.login-shell { width: 100%; max-width: 450px; margin: auto; }
h1 { font-size: 18px; font-weight: 800; text-align: center; margin: 0 0 14px; }
.login-form {
    background: #fff;
    border: 1px solid #e3e7ec;
    border-radius: 2px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, .09);
    padding: 30px 34px 28px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
    display: block;
    color: #0f1f35;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}
.login-field input {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid #9da8b3;
    border-radius: 0;
    background: #fff;
    color: #10243d;
    font: inherit;
    font-size: 14px;
    padding: 4px 8px;
}
.login-field input:focus { border-color: #188da1; outline: 2px solid #188da1; outline-offset: 2px; }
.required, .login-error { color: #b42318; }
.login-error, .login-notice { font-size: 14px; margin: 0 0 18px; overflow-wrap: anywhere; }
.login-error { font-weight: 700; }
.login-notice { color: #007185; }
.forgot-password {
    display: block;
    width: fit-content;
    margin: -4px 0 20px auto;
    font-size: 13px;
}
a { color: #007185; }
.forgot-password, .login-register a { text-decoration: none; }
.forgot-password:hover, .login-register a:hover { text-decoration: underline; }
.login-button {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: #188da1;
    color: #fff;
    padding: 6px 18px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.login-button:hover { background: #127486; color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid #10243d; outline-offset: 3px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #637083; font-size: 13px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: #e3e7ec; flex: 1; }
.login-register { text-align: center; font-size: 13px; margin: 22px 0 0; }
.login-register a { font-weight: 700; }
@media (max-width: 767px) {
    .login-page { padding: 16px; }
    .login-form { padding: 24px 20px; }
    .login-field input { height: 40px; font-size: 16px; }
    .login-button { min-height: 44px; }
    .forgot-password { padding: 6px 0; }
}
@media (max-height: 600px) {
    .login-page { padding-top: 10px; padding-bottom: 10px; }
    .login-form { padding-top: 16px; padding-bottom: 16px; }
    .login-field { margin-bottom: 12px; }
    .forgot-password { margin-bottom: 12px; }
    .login-divider { margin: 14px 0 12px; }
    .login-register { margin-top: 14px; }
}