@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&family=Instrument+Sans:wght@400;500;600&display=swap");
:root{--bg:#f2f4f8;--surface:#fff;--line:#d5dbe7;--fg:#121a2b;--muted:#5a6477;--accent:#2747c4;--hero:#14224f;--bad:#c23a3a;--work:#1d8657;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0d1220;--surface:#151c2d;--line:#29344d;--fg:#e6eaf3;--muted:#96a0b6;--accent:#8199ff;--hero:#1a2752;--bad:#f06c6c;color-scheme:dark}}
*{box-sizing:border-box}
body.auth{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),radial-gradient(900px 500px at 110% 110%,color-mix(in srgb,var(--work) 18%,transparent),transparent 60%),var(--bg);color:var(--fg);font:15px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;padding:24px max(16px,env(safe-area-inset-left,0px))}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:16px;padding:28px;box-shadow:0 20px 60px rgba(10,20,50,.15);display:grid;gap:12px}
.auth-card.wide{max-width:560px}
.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.brand i{width:12px;height:12px;border-radius:3px;background:var(--accent)}
h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:26px;margin:4px 0 0;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}.small{font-size:13px}
form{display:grid;gap:12px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px;margin:0}
legend{font-weight:600;padding:0 6px}
label{display:grid;gap:5px;font-size:13px;font-weight:500;color:var(--muted)}
input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn{display:inline-block;text-decoration:none;text-align:center;font:inherit;font-weight:700;border-radius:10px;padding:12px 16px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.error{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));border-radius:8px;padding:10px 12px}
.warn{background:color-mix(in srgb,#c07610 12%,var(--surface));border:1px solid #c07610;border-radius:8px;padding:10px 12px}
a{color:var(--accent)}