@import url('design-tokens.css');
* { box-sizing: border-box; }
:root { color: var(--seel-ink); background: var(--seel-surface); font-family: var(--seel-font); font-synthesis: none; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--seel-focus); outline-offset: 3px; }
.auth-layout { display: grid; grid-template-columns: minmax(430px, 40.2%) 1fr; min-height: 100svh; }
.auth-panel { padding: 40px clamp(36px, 5.3vw, 90px) 32px; display: flex; flex-direction: column; }
.auth-logo { font-size: 25px; font-weight: 800; letter-spacing: -.04em; width: fit-content; line-height: 1.2; }
.auth-content { width: min(100%, 420px); margin: auto; padding: 40px 0; container-type: inline-size; }
h1 { margin: 0; font-size: clamp(36px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.03em; font-weight: 750; text-wrap: balance; }
.intro { margin: 12px 0 0; color: var(--seel-muted); font-size: 15px; font-weight: 400; line-height: 1.5; }

.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
.auth-form [role="status"]:empty { display: none; }
.auth-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.field { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 16px; border: 1px solid var(--seel-field-line); border-radius: var(--seel-radius-button); background: var(--seel-surface); }
.field:focus-within { border-color: var(--seel-focus); outline: 2px solid var(--seel-focus); outline-offset: -2px; }
.field > img, .password-toggle img { width: 20px; height: 20px; opacity: .75; }
.field input { width: 0; min-width: 0; flex: 1; align-self: center; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; line-height: 24px; color: var(--seel-ink); }
.field input:focus-visible { outline: none; }
.field input::placeholder { color: var(--seel-muted); opacity: 1; }
.password-toggle { min-width: 36px; min-height: 44px; border: 0; background: transparent; padding: 8px; cursor: pointer; display: grid; place-items: center; }
.forgot { justify-self: end; color: var(--seel-ink); font-size: 13px; font-weight: 600; min-height: 28px; display: inline-flex; align-items: center; }
.forgot:hover { text-decoration: underline; text-underline-offset: 3px; }
.submit, .social-options button { width: 100%; min-height: 48px; border-radius: var(--seel-radius-button); font: inherit; font-size: 14px; font-weight: 650; }
.submit { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; border: 0; color: var(--seel-surface); background: var(--seel-ink); cursor: pointer; }
.submit:hover:not(:disabled) { background: var(--seel-action-hover); }
.submit img { width: 16px; filter: invert(1); }
button:disabled { cursor: not-allowed; }
.submit:disabled { opacity: .72; }
.divider { display: flex; align-items: center; gap: 16px; color: var(--seel-muted); font-size: 13px; margin: 24px 0; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: var(--seel-line); }
.social-options { display: grid; gap: 10px; }
.social-options button { border: 1px solid var(--seel-line); background: var(--seel-ground); color: var(--seel-muted); }
.social-options button img { width: 20px; height: 20px; vertical-align: middle; margin-right: 14px; }
.google-color { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 14px; background: conic-gradient(from -45deg, #ea4335 0deg 90deg, #4285f4 90deg 180deg, #34a853 180deg 255deg, #fbbc05 255deg 290deg, #ea4335 290deg); -webkit-mask: url('assets/auth-google.svg') center / contain no-repeat; mask: url('assets/auth-google.svg') center / contain no-repeat; }
.switch { margin: 28px 0 0; text-align: center; color: var(--seel-muted); font-size: 13px; line-height: 1.6; }
.switch a { color: var(--seel-ink); font-weight: 650; margin-left: 5px; text-decoration: underline; text-underline-offset: 3px; }
.back-home { display: block; text-align: center; margin-top: 16px; min-height: 28px; font-size: 12px; color: var(--seel-muted); }
.preview-note { margin: 18px 0 0; padding: 0; color: var(--seel-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.auth-visual { position: relative; overflow: hidden; min-height: 100%; background: #1d195d url('assets/auth-visual.webp') center / cover no-repeat; }
.visual-caption { position: absolute; z-index: 1; left: clamp(35px, 6vw, 90px); bottom: 7%; color: white; }
.visual-caption span { font-size: 12px; font-weight: 650; }
.visual-caption p { margin: 13px 0 0; font-size: clamp(24px, 3.2vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
@media(max-width: 850px) { .auth-layout { grid-template-columns: minmax(340px, 52%) 1fr; } .auth-panel { padding-inline: 32px; } }
@media(max-width: 600px) {
 .auth-layout { display: flex; flex-direction: column; min-height: 100svh; }
 .auth-panel { min-height: 100svh; padding: 24px 21px; justify-content: center; align-items: center; }
 .auth-logo { align-self: center; font-size: 23px; }
 .auth-content { width: min(100%, 390px); flex: 0 0 auto; margin: 0; padding: 24px 0 0; text-align: center; }
 .auth-content h1 { font-size: clamp(30px, 8vw, 38px); }
 .intro { margin-top: 8px; font-size: 14px; }
 .auth-form { margin-top: 24px; gap: 10px; }
 .field { min-height: 50px; text-align: left; }
 .submit { min-height: 48px; }
 .divider { margin: 20px 0; }
 .switch { margin-top: 22px; }
 .preview-note { margin-top: 14px; }
 .auth-visual { display: none; }
}
@media(max-width: 600px) and (max-height: 650px) { .auth-panel { justify-content: start; padding-block: 18px; } .auth-content { padding-top: 18px; } .auth-form { margin-top: 18px; } }