: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, .dashboard-link { border: 0; padding: 10px 18px; color: white; background: #1264a3; font-weight: 700; cursor: pointer; }
.dashboard-link { display: flex; min-height: 48px; border-radius: 10px; align-items: center; justify-content: center; margin-top: 18px; text-align: center; text-decoration: none; }
button.danger { background: #a52828; }
button:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
.progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.progress[hidden] { display: none; }
progress { width: 100%; height: 18px; accent-color: #1264a3; }
[role="alert"] { min-height: 1.5em; color: #a52828; }
@media (max-width: 360px) { .card { padding: 20px; } .actions { grid-template-columns: 1fr; } }