:root { font-family: system-ui, sans-serif; color: #10243e; background: #eef3f8; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
.card { width: min(100%, 480px); padding: 28px; border-radius: 18px; background: white; box-shadow: 0 16px 45px #10243e20; }
h1 { margin: 0 0 28px; font-size: 1.7rem; }
form, label { display: grid; gap: 8px; }
form { gap: 18px; }
input, button { min-height: 48px; border-radius: 10px; font: inherit; }
input { border: 1px solid #8090a0; padding: 10px 12px; }
button { border: 0; padding: 10px 18px; color: white; background: #1264a3; font-weight: 700; cursor: pointer; }
button.danger { background: #a52828; }
button:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
[role="alert"] { min-height: 1.5em; color: #a52828; }
@media (max-width: 360px) { .card { padding: 20px; } .actions { grid-template-columns: 1fr; } }