:root { color-scheme: light; --ink: #17211f; --muted: #66716e; --line: #d6dcda; --paper: #f1f4f2; --white: #ffffff; --teal: #087f72; --teal-dark: #05665c; --error: #b42318; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.auth-nav { display: flex; width: min(1120px, calc(100% - 32px)); min-height: 72px; align-items: center; justify-content: space-between; margin: 0 auto; border-bottom: 1px solid var(--line); }
.auth-nav-actions { display: flex; align-items: center; gap: 14px; }
.brand, .back-link { color: inherit; text-decoration: none; }
.brand { font-size: 18px; font-weight: 800; }
.back-link { color: var(--muted); font-size: 14px; }
.auth-main { display: grid; min-height: calc(100vh - 72px); align-items: start; justify-items: center; padding: clamp(24px, 6vh, 56px) 16px 64px; }
.auth-panel { width: min(430px, 100%); border: 1px solid var(--line); border-radius: 8px; padding: 30px; background: var(--white); }
.auth-heading { margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--teal-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: 0; }
.auth-heading > p:last-child, .free-note { margin: 0; color: var(--muted); font-size: 14px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #f4f6f5; }
.mode-switch button { min-height: 38px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 700; }
.mode-switch button[aria-selected="true"] { color: var(--ink); background: var(--white); box-shadow: 0 1px 3px rgba(23, 33, 31, 0.16); }
form, label { display: grid; }
form { gap: 16px; }
label { gap: 7px; font-size: 13px; font-weight: 700; }
input { width: 100%; min-height: 44px; border: 1px solid #aeb8b4; border-radius: 6px; padding: 9px 11px; color: var(--ink); background: var(--white); font: inherit; }
input:focus { border-color: var(--teal); outline: 3px solid rgba(8, 127, 114, 0.14); }
small { color: var(--muted); font-weight: 400; }
.submit-button { min-height: 46px; border: 0; border-radius: 6px; padding: 11px 16px; color: var(--white); background: var(--teal); cursor: pointer; font: inherit; font-weight: 800; }
.submit-button:hover { background: var(--teal-dark); }
.submit-button:disabled { cursor: wait; opacity: 0.7; }
.auth-error { margin: 0; border-left: 3px solid var(--error); padding: 9px 11px; color: var(--error); background: #fff3f1; font-size: 13px; line-height: 1.45; }
.free-note { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; text-align: center; }
@media (min-height: 820px) { .auth-main { align-items: center; } }
@media (max-width: 480px) { .auth-nav { min-height: 64px; } .auth-main { min-height: calc(100vh - 64px); padding: 20px 12px 44px; } .auth-panel { padding: 22px 18px; } .brand { max-width: 160px; overflow-wrap: anywhere; } .auth-nav-actions .back-link { display: none; } }