:root{--ink:#0E2A47;--chalk:#F1F4F6;--teal:#0FA3A3;--iron:#4A5B6C;--err:#B3261E}
*{box-sizing:border-box}body{margin:0;background:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
main{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{width:100%;max-width:400px;background:var(--chalk);border-radius:14px;padding:28px 24px}
.brand{display:block;font-weight:900;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-bottom:6px}
h1{font-size:1.2rem;margin:0 0 18px;font-weight:600;color:var(--iron)}
label{display:block;font-weight:600;font-size:.92rem;margin:14px 0 6px}
input{width:100%;font:inherit;padding:12px;border:1.5px solid #9FB0C0;border-radius:8px;background:#fff;color:var(--ink)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.help{font-size:.82rem;color:var(--iron);margin:4px 0 0}
button{width:100%;margin-top:22px;font:inherit;font-weight:700;padding:14px;border:0;border-radius:10px;background:var(--teal);color:#fff;cursor:pointer}
.alt{margin:18px 0 0;text-align:center;font-size:.92rem}.alt a{color:var(--ink);font-weight:700}
.error{background:#FDECEA;color:var(--err);border-radius:8px;padding:10px 12px;margin:0 0 6px;font-size:.92rem}
.out{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.roles legend{font-weight:600;font-size:.92rem;margin-bottom:6px;padding:0}
.warn{background:#FFF4D6;color:#5C3D00;border-radius:8px;padding:10px 12px;margin:0 0 14px;font-size:.92rem}
.warn a{color:inherit;font-weight:700}
.ok{background:#E3F6EE;color:#0B5B3B;border-radius:8px;padding:10px 12px;margin:0 0 6px;font-size:.92rem}
.plain{display:block;text-align:center;margin-top:16px;color:var(--ink);font-weight:700}
.roles{border:0;padding:0;margin:14px 0 0;min-width:0;display:grid;gap:10px}
label.role{display:block;position:relative;margin:0;padding:0;font-weight:400;cursor:pointer}
label.role input{position:absolute;opacity:0;width:1px;height:1px}
.box{display:block;position:relative;padding:14px 44px 14px 16px;border:2px solid #9FB0C0;border-radius:10px;background:#fff;transition:background .15s,border-color .15s}
.rt{display:block;font-weight:800;font-size:1.05rem;color:var(--ink)}
.rd{display:block;margin-top:2px;font-size:.85rem;font-weight:500;color:#0B7F7F}
label.role:hover .box{border-color:var(--teal)}
label.role input:checked + .box{background:var(--ink);border-color:var(--ink)}
label.role input:checked + .box .rt{color:#fff}
label.role input:checked + .box .rd{color:#8FE0E0}
label.role input:checked + .box::after{content:"\2713";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#8FE0E0;font-weight:900}
label.role input:focus-visible + .box{outline:3px solid var(--teal);outline-offset:2px}