:root { --canvas: #f4f5f7; --surface: #fff; --ink: #171a21; --muted: #67707e; --line: #d9dde4; --accent: #2559b0; --danger: #b73b3b; --reading: "Source Serif 4", serif; --ui: "Atkinson Hyperlegible Next", sans-serif; }
* { box-sizing: border-box; letter-spacing: 0; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(135deg, #eef1f5, #fff 54%, #edf3f1); font-family: var(--ui); }
button, input, select { font: inherit; }
.auth-page { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); min-height: 100vh; }
.auth-panel { display: flex; flex-direction: column; padding: clamp(24px, 5vw, 64px); border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.auth-brand i { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 600 14px var(--reading); }
.auth-form { display: grid; gap: 14px; margin: auto 0; }
.auth-form h1, .account-main h1 { margin: 0; font: 600 32px/1.1 var(--reading); }
.auth-form > p { margin: -5px 0 8px; color: var(--muted); line-height: 1.5; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.auth-form label[hidden] { display: none; }
.auth-form input { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.auth-form input:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 12%, transparent); }
.auth-form button, .account-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: 8px; padding: 8px 13px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 600; }
.auth-form button:disabled { cursor: wait; opacity: .9; }
.auth-form a { color: var(--accent); }
.auth-status { display: flex; align-items: center; min-height: 20px; color: var(--muted); font-size: 13px; }
.auth-status.error { color: var(--danger); }
.auth-button-spinner { display: none; width: 15px; height: 15px; flex: none; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-form button.is-loading .auth-button-spinner { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-context { display: grid; place-items: center; padding: 8vw; }
.auth-context blockquote { max-width: 620px; margin: 0; color: #344052; font: 400 clamp(24px, 4vw, 48px)/1.25 var(--reading); }
.account-page { min-height: 100vh; padding: 30px; background: var(--canvas); }
.account-main { max-width: 920px; margin: 0 auto; }
.account-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.account-head a { color: var(--accent); text-decoration: none; }
.account-card { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.account-card h2 { margin: 0 0 12px; font: 600 20px var(--reading); }
.account-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.account-grid input, .account-grid select { min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; }
.account-button.is-busy { cursor: wait; opacity: .85; }
.account-button .button-spinner { width: 15px; height: 15px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.user-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.user-row small { color: var(--muted); }
.secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
@media (max-width: 720px) { .auth-page { grid-template-columns: 1fr; } .auth-context { display: none; } .auth-panel { min-height: 100vh; border: 0; } .account-page { padding: 16px; } .account-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .auth-button-spinner { animation-duration: 1.4s; } }