*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#1b2f5b,#070b16 55%);color:#fff;font-family:Arial,Helvetica,sans-serif}
.quiz-app{width:min(850px,94%);margin:auto;padding:18px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:12px}
.brand{font-size:1.45rem;font-weight:1000;color:#00eaff}
.sub{color:#98a8c8;font-size:.88rem}
.scorebox{background:#111a30;border:1px solid rgba(0,234,255,.14);border-radius:14px;padding:10px 14px;font-weight:800}
.scorebox b{font-size:1.2rem}
.card{background:linear-gradient(145deg,rgba(13,22,44,.96),rgba(7,12,26,.98));border:1px solid rgba(0,234,255,.16);border-radius:22px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.3)}
.topline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#9bb0d4;font-size:.9rem;margin-bottom:10px}
.bar{height:10px;background:#0f1730;border-radius:999px;overflow:hidden;margin-bottom:18px}
#barFill{height:100%;width:0;background:linear-gradient(90deg,#705dff,#00d7ff)}
.screen{display:none}
.screen.active{display:block}
.big{font-size:3.6rem;text-align:center}
.screen h1{font-size:2.2rem;text-align:center;margin:8px 0}
.screen p{text-align:center;color:#b7c5de}
.category{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,234,255,.11);border:1px solid rgba(0,234,255,.14);font-weight:900;font-size:.76rem;letter-spacing:.6px;color:#00eaff;margin-bottom:10px}
#question{font-size:1.55rem;line-height:1.25;margin:8px 0 18px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answer,.next,#startBtn,#restartBtn{border:0;border-radius:16px;font-weight:900;cursor:pointer}
.answer{padding:16px 14px;background:#111a30;color:#fff;text-align:left;border:1px solid rgba(255,255,255,.08);font-size:1rem;min-height:76px}
.answer.correct{background:#133b27;border-color:#2ecc71}
.answer.wrong{background:#411a2a;border-color:#ff7093}
.answer:disabled{opacity:1}
.feedback{margin:14px 0 0;color:#cfe1ff;min-height:40px;line-height:1.4}
.next,#startBtn,#restartBtn{display:inline-block;margin-top:16px;padding:14px 20px;background:linear-gradient(135deg,#705dff,#00bfe8);color:#fff;font-size:1rem;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.next{display:none}
.final-score{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px}
.final-score span{color:#9bb0d4}
.final-score b{font-size:2rem}
@media(max-width:760px){
  .quiz-app{padding:8px}
  header{flex-direction:column;align-items:flex-start}
  .scorebox{width:100%;text-align:center}
  .answers{grid-template-columns:1fr}
  .answer{min-height:84px}
}
@media(max-width:560px){
  .quiz-app{padding:4px}
  .brand{font-size:1.12rem}
  .sub{display:none}
  .card{padding:16px 14px;border-radius:18px}
  .topline{font-size:.82rem}
  .screen h1{font-size:1.6rem}
  .big{font-size:2.7rem}
  #question{font-size:1.24rem;line-height:1.3}
  .answer{font-size:.98rem;padding:15px 13px;min-height:88px;border-radius:14px}
  .feedback{font-size:.92rem;min-height:48px}
  .next,#startBtn,#restartBtn{width:100%;font-size:1rem;padding:15px 16px}
  .next{position:sticky;bottom:6px;z-index:20}
}