*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef3fa;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#17324d;padding:16px}
.card{background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(23,50,77,.12);padding:28px;width:100%;max-width:400px;border-top:5px solid #c9992f}
h1{font-size:19px;margin:0 0 4px}p{margin:0 0 18px;color:#5d7288;font-size:13px}label{display:block;font-size:12px;font-weight:700;margin:12px 0 4px}
input{width:100%;padding:13px 12px;font-size:16px;border:1px solid #b9c8d8;border-radius:10px}button{width:100%;margin-top:16px;padding:14px;font-size:16px;font-weight:800;border:0;border-radius:10px;background:#1d4e89;color:#fff;cursor:pointer}
button.alt{background:#fff;color:#1d4e89;border:1px solid #1d4e89}.err{color:#b3261e;font-size:13px;margin-top:10px;min-height:18px}.small{font-size:11px;color:#5d7288;margin-top:14px;text-align:center}
body.wide .card{max-width:860px}.roles{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}@media(min-width:600px){.roles{grid-template-columns:1fr 1fr}}@media(min-width:820px){.roles{grid-template-columns:1fr 1fr 1fr}}
button.role{margin:0;padding:12px 14px;text-align:left;background:#fff;color:#17324d;border:1px solid #b9c8d8;font-weight:400;display:flex;flex-direction:column;gap:4px}button.role:hover,button.role:focus-visible{border-color:#1d4e89;background:#f4f8fd}button.role b{font-size:14px;font-weight:800}button.role small{font-size:12px;color:#5d7288;line-height:1.35}
.link{display:block;margin-top:16px;font-size:13px;color:#1d4e89;text-align:center}