:root { --brand:#004F9F; --bg:#e8eef5; --ink:#1a2332; --muted:#5b6b7c; --line:#d5dee8; --danger:#b91c1c; --touch:2.85rem; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; font-family:Lato,system-ui,sans-serif; color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, #cfe0f5 0%, transparent 55%),
              radial-gradient(900px 500px at 100% 0%, #d7e8fb 0%, transparent 50%),
              var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.card { width:min(400px,100%); background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.6rem 1.4rem 1.4rem; box-shadow:0 18px 40px rgba(15,23,42,0.08); }
h1 { margin:0; font-family:Unbounded,Lato,sans-serif; font-size:clamp(1.1rem, 4.5vw, 1.25rem); color:var(--brand); }
p { margin:0.4rem 0 1.2rem; color:var(--muted); font-size:0.9rem; }
label { display:flex; flex-direction:column; gap:0.35rem; font-size:0.8rem; color:var(--muted); margin-bottom:0.85rem; }
input { border:1px solid var(--line); border-radius:12px; padding:0.8rem 0.85rem; font:inherit; font-size:1rem; min-height:var(--touch); }
button { width:100%; margin-top:0.4rem; border:0; border-radius:12px; padding:0.9rem 0.95rem;
  background:var(--brand); color:#fff; font:inherit; font-weight:700; cursor:pointer; min-height:var(--touch); touch-action:manipulation; }
button:disabled { opacity:0.6; cursor:wait; }
.err { color:var(--danger); font-size:0.85rem; min-height:1.2rem; margin:0.45rem 0 0; }