:root{--page:#f7f8fb;--surface:#fff;--line:#e6ebf2;--text:#101828;--muted:#667085;--blue:#2675f6;--blue-soft:#edf4ff;--red:#ef4444;--red-soft:#fff0f0;--shadow:0 18px 46px rgba(15,23,42,.08)}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--page);color:var(--text);font-family:"Manrope","IBM Plex Sans","Aptos",Arial,sans-serif}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(420px,100%);display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:850}
.brand span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#1d72f3,#42a5ff);color:#fff;font-size:.68rem}
h1{margin:0;font-size:1.45rem;line-height:1.08;letter-spacing:-.03em}
p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}
form{display:grid;gap:12px}
label{display:grid;gap:6px;color:#344054;font-size:.72rem;font-weight:800}
input{min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--text);padding:0 12px;font:inherit;outline:0}
input:focus{border-color:#b8d3ff;box-shadow:0 0 0 3px rgba(38,117,246,.12)}
button{min-height:42px;border:1px solid var(--blue);border-radius:11px;background:var(--blue);color:#fff;font:inherit;font-weight:850;cursor:pointer}
.auth-error{min-height:36px;display:flex;align-items:center;padding:0 12px;border:1px solid rgba(239,68,68,.18);border-radius:10px;background:var(--red-soft);color:var(--red);font-size:.75rem}
.switch{min-height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--blue);text-decoration:none;font-size:.75rem;font-weight:820}