:root { color-scheme: light; --ink: #252525; --muted: #666660; --line: #d8d8d4; --accent: #6078c5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; padding: 56px 20px 32px; background: #f7f7f5; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; }
.login-shell { width: min(420px, 100%); margin: auto; }
.login-card { padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 4px 20px #25252504; }
h1 { margin: 0 0 4px; font-size: 25px; font-weight: 550; letter-spacing: -.035em; }
p { margin: 0; }
.intro { color: var(--muted); margin-bottom: 24px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, summary:focus-visible, .notice:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.google, .primary { width: 100%; min-height: 46px; border-radius: 5px; font-size: 14px; font-weight: 500; }
.google { display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.google:not(:disabled):hover { background: #f7f7f5; }
.google svg { width: 19px; height: 19px; flex: none; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; height: 1px; background: #e8e8e4; flex: 1; }
label { display: block; margin: 16px 0 7px; font-size: 13px; font-weight: 500; }
input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; }
input:focus { border-color: var(--accent); outline: 2px solid #6078c526; outline-offset: 1px; }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.toggle { position: absolute; right: 2px; top: 1px; height: 44px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 12px; }
.primary { margin-top: 22px; border:1px solid #6078c5; background:#6078c5; color: #fff; }
.primary:not(:disabled):hover { background:#6078c5; }
.help { margin-top: 20px; color: var(--muted); font-size: 12px; }
.access-request { margin-top: 24px; text-align: center; font-size: 12px; }
.access-note { padding: 22px 16px 0; color: var(--muted); text-align: center; font-size: 12px; }
.notice { padding: 12px; margin-bottom: 18px; border: 1px solid #e4cfc7; border-radius: 5px; background: #fcf6f3; color: #713c2b; font-size: 13px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.status { font-size: 12px; color: var(--muted); }
.status:not(:empty) { margin-bottom: 16px; }
@media (max-width: 480px) { body { padding: 28px 16px; } .login-card { padding: 26px 22px; } input { font-size: 16px; } }
@media (max-height: 640px) and (min-width: 481px) { body { padding-top: 24px; } }

.help a, .access-note a, .access-request a { color: var(--ink); text-underline-offset: 3px; }
.field-help { margin-top: 7px; font-size: 12px; color: var(--muted); }
.success { margin-top: 16px; line-height: 1.65; }

.primary:not(:disabled):hover,.submit-button:not(:disabled):hover {background:#526bb5;border-color:#526bb5;}

.primary:not(:disabled):active,.submit-button:not(:disabled):active {background:#485fa7;border-color:#485fa7;}
.primary:focus-visible,.submit-button:focus-visible {outline:2px solid #6078c5;outline-offset:3px;}