/* Minimal, clean, Netlify-friendly */
:root{
  --bg:#0b1220;
  --card:#111a2e;
  --card2:#0f172a;
  --text:#e5e7eb;
  --muted:#a3a3a3;
  --border:rgba(255,255,255,.12);
  --ok:#22c55e;
  --bad:#ef4444;
  --btn:#1f2a44;
  --btn2:#223052;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #172554 0%, transparent 60%), var(--bg);
  color:var(--text);
}
.app{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 14px 40px;
}
.header{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
h1{margin:0 0 8px;font-size: 28px;letter-spacing:.2px}
.intro{color:var(--muted);line-height:1.45}
.intro p{margin: 0 0 10px}
.quiz{
  margin-top: 16px;
  display: grid;
  gap: 14px;
}
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px 10px;
}
.card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
.card h2{
  font-size: 16px;
  margin:0;
  color:#cbd5e1;
  font-weight:600;
}
.badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.options{
  display:grid;
  gap:10px;
}
.option{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(0,0,0,.10);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.option input{margin-top: 3px}
.option .txt{line-height:1.35}
.option.correct{border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.10)}
.option.incorrect{border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.10)}
.option.dim{opacity:.7}
.footer{
  margin-top: 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
}
.btn:hover{background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05))}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{
  background: linear-gradient(180deg, rgba(59,130,246,.35), rgba(59,130,246,.15));
}
.status{min-width: 240px; flex:1; display:flex; flex-direction:column; gap:8px}
.score{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
}
.message{
  color: var(--muted);
  border-left: 3px solid rgba(255,255,255,.15);
  padding-left: 10px;
}
.small{font-size:12px;color:var(--muted)}