@font-face { font-family:Manrope; src:url("assets/manrope-variable.ttf") format("truetype"); font-weight:200 800; font-display:swap; }
:root { color-scheme:light; font-family:Manrope,Arial,sans-serif; --ink:#17191d; --muted:#626c71; --accent:#795135; --line:#cbd6d3; --field-line:#7b8c84; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; min-height:100svh; background-image:radial-gradient(#e0e5eb .8px,transparent .8px); background-size:24px 24px; --paper:#e7f3eb; --paper-line:#cde3d5; }
body[data-auth-mode="sign-up"] { --paper:#e9f2fa; --paper-line:#cddfed; }
body[data-auth-mode="forgot-password"],body[data-auth-mode="verify-email"] { --paper:#fcf5d9; --paper-line:#ebdfad; }
body[data-auth-mode="update-password"] { --paper:#f2edf9; --paper-line:#e2d9f1; }
[hidden] { display:none!important; }
button,input { font:inherit; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:not(:disabled),a { cursor:pointer; }
svg { width:17px; height:17px; flex-shrink:0; stroke-width:1.6; }
.auth-topbar { display:flex; align-items:center; justify-content:flex-start; height:72px; padding:0 30px; border-bottom:1px solid #f2f2f3; background:#fafafae6; }
.logo-link { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:16px; font-weight:550; min-height:40px; }
.brand-mark { position:relative; display:block; width:32px; height:32px; overflow:hidden; flex-shrink:0; }
.brand-mark img { position:absolute; width:170%; height:auto; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%); }
.back-link { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:8px 13px; border:1px solid #e9eaed; border-radius:20px; background:white; text-decoration:none; color:var(--muted); font-size:11px; }
.back-link svg { width:14px; height:14px; }
.back-link:hover { color:var(--accent); background:#f7f7f8; }
main { min-height:calc(100svh - 72px); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; padding:32px 20px; }
.auth-panel { width:min(420px,100%); justify-self:center; padding:28px 30px 24px; border:1px solid var(--paper-line); border-radius:28px; background:var(--paper); box-shadow:inset 0 1px #ffffffc4,0 10px 28px #252b3508; }
h1 { margin:0; font-size:25px; font-weight:550; line-height:1.3; overflow-wrap:anywhere; }
.auth-heading p { margin:8px 0 22px; color:var(--muted); font-size:12px; line-height:1.7; }
.auth-heading .auth-availability { margin:-8px 0 18px; font-size:11px; line-height:1.7; color:#795135; }
form { text-align:left; }
.name-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:block; margin-bottom:13px; }
.field-label { display:block; margin:0 0 6px; color:#4e5c61; font-size:11px; font-weight:500; }
.input-wrap { display:flex; align-items:center; gap:9px; border:1px solid var(--field-line); border-radius:8px; background:white; min-height:46px; padding:0 12px; color:#6b7b81; transition:border-color 160ms,box-shadow 160ms; }
.input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px #79513518; }
input { display:block; width:100%; min-width:0; padding:12px 0; background:transparent; border:0; outline:0; color:var(--ink); font-size:13px; }
input::placeholder { color:#72777c; }
.password-toggle { display:grid; place-items:center; width:30px; height:40px; padding:0; border:0; border-radius:5px; color:#63747b; background:transparent; flex-shrink:0; }
.password-toggle:hover { color:var(--accent); background:#f4f5f5; }
.password-toggle svg { width:16px; height:16px; }
.password-hint { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.6; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; padding:11px 16px; margin-top:19px; border:1px solid var(--accent); border-radius:24px; background:var(--accent); color:#fff; box-shadow:inset 0 1px #ffffff40,0 4px 10px #68463014; font-size:12px; font-weight:500; transition:background 160ms; }
.primary-button:hover { background:#603f2a; }
.primary-button:active { transform:translateY(1px); }
.primary-button svg { width:16px; height:16px; }
button:disabled { opacity:.55; cursor:default; }
.divider { display:flex; align-items:center; gap:12px; color:var(--muted); margin:19px 0 16px; font-size:10px; }
.divider::before,.divider::after { content:""; flex:1; border-top:1px solid var(--paper-line); }
.social-row { display:grid; grid-template-columns:minmax(0,1fr); }
.social-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 12px; border-radius:24px; border:1px solid #d1dbd8; background:#fff; color:#414e54; font-size:12px; transition:background 160ms; }
.social-button:hover { background:#f7f8f8; }
.provider-logo { display:grid; place-items:center; width:20px; height:20px; flex-shrink:0; }
.provider-logo img { width:17px; height:auto; display:block; }
.account-switch { margin:21px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.account-switch a { color:var(--accent); font-weight:550; text-decoration:none; margin-left:5px; padding-block:4px; }
.account-switch a:hover { text-decoration:underline; }
.auth-beta-note { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.7; }
.form-message { margin:15px 0 0; padding:11px 12px; border:1px solid #b8d4c5; border-radius:8px; background:#f5fbf7; color:#3e6655; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.form-message:empty { display:none; }
.form-message[data-error="true"] { color:#8c3539; border-color:#dfb3b6; background:#fff3f3; }
.forgot-link,.account-password-link { display:block; margin-top:9px; text-align:right; font-size:11px; color:var(--muted); text-decoration:none; padding:6px 0; }
.forgot-link:hover,.account-password-link:hover { color:var(--accent); text-decoration:underline; }
.secondary-button { display:block; width:100%; min-height:44px; margin-top:12px; border:1px solid var(--line); border-radius:24px; background:#fff; color:#4e5c61; font-size:12px; }
.secondary-button:hover { background:#f7f8f8; }
a.primary-button { text-decoration:none; }
.account-details { margin:0; text-align:left; }
.account-details>div { padding:14px 0; border-bottom:1px solid var(--paper-line); }
.account-details dt { color:var(--muted); font-size:11px; }
.account-details dd { margin:6px 0 0; font-size:14px; overflow-wrap:anywhere; }
.confirmation-copy { color:#4e5c61; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.confirmation-copy strong { color:var(--ink); }
form[aria-busy="true"] { opacity:.8; }
:focus-visible:not(input) { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:760px) { .auth-topbar { height:68px; padding-inline:20px; } .brand-mark { width:28px; height:28px; } .logo-link { font-size:14px; gap:7px; } main { min-height:calc(100svh - 68px); padding:28px 20px; } .auth-panel { width:min(390px,100%); padding:26px 24px 24px; border-radius:24px; } h1 { font-size:24px; } input { font-size:16px; } .input-wrap { min-height:48px; padding-inline:11px; } .name-row { gap:10px; } .primary-button,.social-button { min-height:46px; } }
@media(max-width:390px) { .auth-topbar { padding-inline:16px; } main { padding:24px 16px; } .auth-panel { padding:24px 20px 22px; } h1 { font-size:23px; } .name-row { grid-template-columns:1fr; gap:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
@media(forced-colors:active) { .auth-panel { background:Canvas; color:CanvasText; border-color:CanvasText; box-shadow:none; } .primary-button { border-color:ButtonText; } .input-wrap { border-color:CanvasText; } }