:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#0b5fff;
  --muted:#9aa4b2;
  --surface:#0b1220;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(180deg,#07102a 0%, #0b1728 100%);color:#e6eef8;display:flex;align-items:center;justify-content:center;padding:24px}
.container{max-width:760px;width:100%}
header h1{margin:0;font-size:1.6rem}
.card{background:rgba(255,255,255,0.03);padding:18px;border-radius:12px;margin-top:14px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.hidden{display:none}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.choice-btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:10px 14px;border-radius:8px;color:var(--muted);cursor:pointer}
.choice-btn:hover{border-color:var(--accent);color:#fff}
#next-btn{background:var(--accent);border:none;color:#fff;padding:10px 14px;border-radius:8px}
.checkbox-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.checkbox-item{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.02);padding:8px;border-radius:8px}
#extra-options{margin-top:12px}
.choice-btn.selected{background:linear-gradient(90deg,var(--accent),#2a6bff);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(11,95,255,0.18)}
#next-btn[disabled]{opacity:0.5;cursor:not-allowed}
#recommendations{white-space:pre-wrap;margin-top:8px}
button#restart{margin-top:12px;padding:8px 12px;border-radius:8px;border:none;background:var(--accent);color:#fff}
.install-banner{position:fixed;left:16px;bottom:16px;background:linear-gradient(90deg, rgba(11,95,255,0.18), rgba(11,95,255,0.08));padding:10px;border-radius:10px}
.install-banner button{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:8px 10px;border-radius:6px;color:#e6eef8}
@media (max-width:520px){.container{padding:10px}}

/* On small screens, don't vertically center the whole app (can hide top content behind browser UI) */
@media (max-width:520px){
  body{align-items:flex-start;padding-top:20px;padding-bottom:40px}
  .card{margin-top:12px}
}

/* Responsive tweaks for summary image and tyre controls */
.choices-summary{display:flex;gap:16px;align-items:flex-start}
.choices-summary .vehicle-image{flex:0 0 220px;overflow:hidden;border-radius:8px}
.choices-summary .vehicle-image img{width:100%;height:140px;object-fit:cover;border-radius:6px;display:block}
.choices-summary .choices-list{flex:1;min-width:0}

.tyres-group{display:flex;gap:12px}
.tyres-group fieldset{border:0;padding:0;margin:0;min-width:0}
.tyres-group legend{font-weight:600;margin-bottom:6px}
.tyres-group .checkbox-item{padding:6px 8px}

@media (max-width:520px){
  .choices-summary{flex-direction:column}
  .choices-summary .vehicle-image{flex:0 0 auto;max-width:320px}
  .choices-summary .vehicle-image img{height:180px}
  .tyres-group{flex-direction:column}
}

@media (max-width:380px){
  .choice-btn{padding:12px 10px;font-size:0.95rem}
  #next-btn{width:100%}
}