body{min-height:100vh;display:grid;place-items:center;padding:16px}
.card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
h1{font-size:24px;font-weight:800;font-stretch:80%;margin:0}
.intro{margin:0;color:var(--muted);font-size:14px}
.err{margin:0;background:var(--warnbg);color:var(--warnink);border-radius:8px;padding:8px 12px;font-size:14px}
form{display:flex;flex-direction:column;gap:10px}
.f input{padding:8px 10px;font-size:15px}
.btn{padding:10px 12px;font-size:15px}
.google{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  text-decoration:none;color:var(--ink);font-weight:700;background:var(--surface)}
.google:hover{background:var(--soft)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.switch{margin:0;text-align:center;font-size:14px}
.link{border:0;background:none;color:var(--info);padding:0;text-decoration:underline}