:root{
  --bg:#0f172a; /* slate-900 */
  --card:#0b1220;
  --text:#e6eef8;
  --muted:#9fb0cc;
  --accent:#ffcc00;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg),#071025);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.container{
  max-width:900px;
  width:100%;
  background:linear-gradient(180deg,var(--card),#071022);
  border-radius:12px;
  padding:1.25rem 1.5rem;
  box-shadow: 0 6px 24px rgba(2,6,23,0.6);
}

h1{margin:0 0 .25rem 0;font-size:1.6rem}
.lead{margin:0 0 .75rem 0;color:var(--muted)}

.controls{display:flex;gap:12px;align-items:center;margin-bottom:1rem}
.controls label{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted)}
.controls input, .controls select{padding:.35rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}

button#fetchBtn{padding:.5rem .75rem;border-radius:8px;border:none;background:var(--accent);color:#04101a;font-weight:600;cursor:pointer}

.quiz{display:flex;flex-direction:column;gap:14px}
.card{background:rgba(255,255,255,0.03);padding:12px;border-radius:8px}
.question{font-weight:600;margin-bottom:.5rem}
.options{display:flex;flex-wrap:wrap;gap:8px}
.optionBtn{padding:.45rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);cursor:pointer}
.optionBtn.selected{outline:2px solid rgba(255,204,0,0.25)}
.optionBtn.correct{background:rgba(34,197,94,0.15);border-color:rgba(34,197,94,0.25)}
.optionBtn.wrong{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.25)}

.meta{margin-top:1rem;color:var(--muted);font-size:.9rem}