:root { color-scheme: light; font-family: 'Inter', system-ui, sans-serif; color: #202523; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: #fff; background: var(--login-accent); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100svh; }
.login-art { display: flex; flex-direction: column; margin: 24px 0 24px 24px; height: calc(100svh - 48px); min-height: 600px; overflow: hidden; border-radius: 20px; background: var(--login-surface); }
.login-cover { display: block; width: 100%; height: 0; min-height: 0; flex: 1 1 auto; object-fit: cover; object-position: center 45%; }
.login-art-caption { padding: 28px 36px 32px; }
.login-art-caption h2 { max-width: 20ch; margin: 0 0 12px; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.login-art-caption p { max-width: 48ch; margin: 0; color: #4d544e; font-size: .9375rem; line-height: 1.65; }
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 56px 48px; }
.login-form-content { width: 100%; max-width: 408px; }
.login-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 48px; }
.login-brand img { display: block; width: 180px; max-width: 100%; height: 64px; object-fit: contain; object-position: left center; }
.login-brand-label { color: #606862; font-size: .8125rem; }
.login-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.25; letter-spacing: -.03em; margin: 0 0 12px; font-weight: 600; }
.login-heading p { margin: 0 0 32px; color: #606862; line-height: 1.65; font-size: .9375rem; }
.login-form { display: grid; gap: 24px; }
.login-field { display: grid; gap: 8px; }
.login-field label { font-size: .875rem; font-weight: 500; }
.login-field input { display: block; width: 100%; height: 52px; padding: 12px 16px; border: 1px solid #bbc2bd; border-radius: 8px; background: #fff; color: #202523; caret-color: var(--login-accent); }
.login-field input:hover { border-color: #747e76; }
.login-field input:focus { border-color: var(--login-accent); }
.login-field input[aria-invalid="true"] { border-color: #b42332; }
.login-password { position: relative; }
.login-password input { padding-right: 56px; }
.login-password-toggle { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; color: #58635a; border: 0; border-radius: 6px; cursor: pointer; }
.login-password-toggle[hidden] { display: none; }
.login-password-toggle:hover { color: var(--login-accent); background: var(--login-surface); }
.password-hidden-line { display: none; }
.login-password-toggle[aria-pressed="true"] .password-hidden-line { display: block; }
.login-submit { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 52px; padding: 14px 20px; color: #fff; background: var(--login-accent); border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color .15s ease; }
.login-submit:hover { background: var(--login-accent-hover); }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-submit-status { margin: 0; color: #606862; font-size: .875rem; }
.login-submit-status:empty { display: none; }
.login-error { padding: 16px; margin-bottom: 24px; color: #92202d; background: #fff0f1; border-radius: 8px; font-size: .875rem; line-height: 1.6; }
.login-help { margin: 24px 0 0; font-size: .8125rem; color: #606862; line-height: 1.6; }
.login-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; font-size: .75rem; color: #606862; }
@media (min-width: 1600px) { .login-art-caption { padding: 32px 48px 40px; } }
@media (max-width: 900px) {
    .login-layout { display: flex; flex-direction: column; }
    .login-form-panel { order: 0; min-height: 100svh; padding: 40px 24px; }
    .login-art { order: 1; height: 440px; min-height: 0; margin: 0 16px 16px; border-radius: 16px; }
    .login-art-caption { padding: 24px; }
    .login-cover { object-position: center 48%; }
    .login-brand { margin-bottom: 32px; }
    .login-footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .login-submit { transition: none; } }