:root { color-scheme: light; --login-ink: #122d42; --login-muted: #526777; --login-blue: #12568e; --login-blue-dark: #0b3b68; --login-line: #dbe5ec; font-family: "Paperlogy", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--login-ink); background: #fbfcfd; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.login-page { min-width: 280px; min-height: 100vh; min-height: 100dvh; margin: 0; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; font-family: "Paperlogy", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; line-height: 1.75; letter-spacing: .012em; color: var(--login-ink); word-break: keep-all; overflow-wrap: break-word; background: radial-gradient(ellipse at 80% 34%, #e8f3fb90, transparent 60%), #fbfcfd; }
.login-card { width: min(100%, 440px); padding: 38px; background: #ffffffed; border: 1px solid var(--login-line); border-radius: 28px; box-shadow: 0 24px 64px -32px #173a6233, 0 1px 0 #fff inset; }
.login-brand { display: flex; align-items: center; gap: 16px; color: var(--login-blue); }
.login-wordmark { display: inline-flex; align-items: baseline; font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: .035em; }
.login-brand-dot { display: inline-block; width: 7px; height: 7px; margin-left: 3px; background: #4ba8db; border-radius: 50%; }
.login-brand small { max-width: 100px; font-size: 11px; font-weight: 500; letter-spacing: .015em; line-height: 1.55; color: var(--login-muted); }
h1 { margin: 34px 0 10px; font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: .008em; }
.login-intro, .login-help { color: var(--login-muted); font-size: 14px; line-height: 1.8; }
.login-intro { margin: 0 0 26px; }
label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
input, button { font: inherit; }
input { width: 100%; min-width: 0; height: 48px; padding: 10px 14px; border: 1px solid #cddce7; border-radius: 12px; color: var(--login-ink); background: #fff; font-size: 16px; }
input:focus-visible, button:focus-visible { outline: 3px solid #339cef; outline-offset: 4px; }
button { width: 100%; min-height: 50px; border: 1px solid transparent; border-radius: 100px; padding: 12px 21px; background: var(--login-blue); color: #fff; font-weight: 600; line-height: 1.4; letter-spacing: .012em; box-shadow: 0 7px 16px #12568e15, inset 0 1px 0 #ffffff23; cursor: pointer; }
button:not(:disabled):hover { background: var(--login-blue-dark); }
button:disabled { background: var(--login-muted); box-shadow: none; cursor: not-allowed; }
.login-status { min-height: 24px; margin: 14px 0; font-size: 13px; line-height: 1.6; color: var(--login-muted); overflow-wrap: anywhere; }
.login-status[data-error="true"] { color: #a93636; }
.login-retry { margin-top: 10px; border-color: #b9ccda; background: transparent; color: var(--login-blue); box-shadow: none; }
.login-retry:not(:disabled):hover { background: #f0f7fc; }
.login-help { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--login-line); font-size: 12px; }
@media (max-width: 420px) { .login-page { padding-inline: 16px; } .login-card { padding: 28px 24px; } }