:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#142033;background:#eef3f8;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0b3b68 0,#0b3b68 136px,#eef3f8 136px)}
button,input{font:inherit}
button{cursor:pointer}
.topbar{
  min-height:116px;padding:24px max(18px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;
}
.brand{font-size:26px;font-weight:850;letter-spacing:.1px}
.brand span{font-weight:950}
.subtitle{font-size:13px;opacity:.84;margin-top:3px}
.shell{width:min(760px,100%);margin:0 auto;padding:0 16px 42px}
.card{
  background:#fff;border-radius:18px;padding:22px;margin-bottom:16px;
  box-shadow:0 12px 30px rgba(13,38,66,.11);border:1px solid rgba(15,54,88,.08);
}
h1,h2{margin:0 0 11px;line-height:1.2}
h1{font-size:25px}h2{font-size:20px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.11em;color:#6a8095;margin-bottom:5px}
.muted,.message{color:#607489;line-height:1.5}
.message{min-height:20px;font-size:14px;margin:11px 0 0}
label{display:block;font-size:14px;font-weight:760;margin:16px 0 7px}
input{
  width:100%;min-height:50px;border:1px solid #bcc9d5;border-radius:12px;
  background:#fff;color:#142033;padding:11px 13px;outline:none;
}
input:focus{border-color:#0b5c9b;box-shadow:0 0 0 3px rgba(11,92,155,.12)}
.primary,.ghost{
  border:0;border-radius:12px;min-height:48px;padding:11px 16px;font-weight:850;
}
.primary{width:100%;background:#0b5c9b;color:#fff;margin-top:17px}
.large{min-height:56px;font-size:17px}
.ghost{background:rgba(255,255,255,.16);color:#fff}
.ghost.dark{background:#e8eff5;color:#173a58}
button:disabled{opacity:.55;cursor:not-allowed}
.optional{font-weight:500;color:#7a8d9e}
.hidden{display:none!important}
.check-row{
  display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:14px;
  border:1px solid #d8e1e8;border-radius:13px;background:#f8fafc;
}
.check-row input{width:22px;min-height:22px;margin:2px 0 0;flex:0 0 auto}
.check-row span{display:flex;flex-direction:column;gap:4px}
.check-row small{font-size:12px;color:#6a7e90;font-weight:500;line-height:1.4}
.welcome-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.role-card{
  display:flex;flex-direction:column;min-height:210px;background:#fff;border-radius:18px;
  padding:20px;border:1px solid rgba(15,54,88,.08);box-shadow:0 10px 26px rgba(13,38,66,.09);
}
.role-icon{font-size:38px;margin-bottom:13px}
.role-title{font-size:20px;font-weight:900;margin-bottom:7px}
.role-desc{color:#64798b;font-size:14px;line-height:1.5;flex:1}
.role-action{
  display:block;margin-top:18px;text-align:center;text-decoration:none;background:#0b5c9b;
  color:#fff;border-radius:12px;padding:13px 14px;font-weight:850;
}
.role-card.driver .role-action{background:#176b32}
.role-card.disabled{opacity:.65}
.role-card.disabled .role-action{background:#91a0ad;pointer-events:none}
.info-card p{margin-bottom:0;color:#5f7487;line-height:1.55}
footer{text-align:center;color:#6a8093;font-size:12px;padding:0 16px 24px}
@media(max-width:620px){
  .role-grid{grid-template-columns:1fr}
  .welcome-card{flex-direction:column}
  .welcome-card .ghost{width:100%}
  .topbar{padding-top:20px}
  .brand{font-size:23px}
  .card{padding:18px}
}