body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f8fafc; font-family:Inter,sans-serif; color:#0f172a; }
.login { width:min(420px, calc(100% - 32px)); background:white; border:1px solid #d9e1ec; border-radius:8px; padding:32px; box-shadow:0 4px 12px rgba(16,24,40,.08); }
h1 { margin:0 0 8px; font-size:28px; }
p { margin:0 0 24px; color:#475569; }
label { display:block; font-weight:700; font-size:13px; margin:14px 0 6px; }
input { width:100%; box-sizing:border-box; border:1px solid #d9e1ec; border-radius:8px; padding:12px 13px; font-size:16px; }
input:focus { outline:0; border-color:#1e4bff; box-shadow:0 0 0 3px rgba(30,75,255,.14); }
button,.google-login { width:100%; box-sizing:border-box; border-radius:8px; padding:13px 16px; font-weight:700; font-size:16px; cursor:pointer; }
button { margin-top:18px; border:0; color:white; background:#1e4bff; }
.google-login { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #d9e1ec; color:#0f172a; background:#fff; text-decoration:none; }
.google-login:hover { border-color:#94a3b8; background:#f8fafc; }
.google-mark { display:grid; place-items:center; width:24px; height:24px; color:#1e4bff; font-weight:800; }
.login-divider { display:flex; align-items:center; gap:12px; margin:22px 0 4px; color:#94a3b8; font-size:12px; }
.login-divider::before,.login-divider::after { content:""; height:1px; background:#e2e8f0; flex:1; }
.error { padding:12px 14px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:8px; margin-bottom:16px; }