:root{
  --primary:#155eef;
  --accent:#06b6d4;
  --dark:#071b5f;
  --text:#334155;
  --muted:#64748b;
  --bg:#f4f9ff;
  --border:#dbeafe;
  --shadow:0 20px 45px rgba(15,23,42,.10);
  --good:#22c55e;
  --bad:#ef4444;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  min-height:100vh!important;
  font-family:"Inter",Arial,sans-serif!important;
  background:radial-gradient(circle at top left,rgba(21,94,239,.14),transparent 32%),radial-gradient(circle at bottom right,rgba(6,182,212,.12),transparent 32%),var(--bg)!important;
  color:var(--text)!important;
  line-height:1.65!important;
}

.page,.container,main.container{
  width:min(1000px,calc(100% - 48px))!important;
  max-width:1000px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  min-width:0;
}

.top-bar,.top,.page>.top-bar{
  min-height:76px;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:20px!important;
}

.brand,.logo{
  color:var(--dark)!important;
  font-size:20px!important;
  font-weight:800!important;
}
.brand{display:inline-flex!important;align-items:center;gap:12px;text-decoration:none!important}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;font-style:italic;font-weight:700}

.hero{
  background:rgba(255,255,255,.88)!important;
  border:1px solid var(--border)!important;
  border-radius:34px!important;
  padding:46px!important;
  box-shadow:var(--shadow)!important;
  margin:30px 0!important;
}

.hero h1,h1{
  color:var(--dark)!important;
  font-size:clamp(38px,5vw,50px)!important;
  line-height:1.08!important;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

.hero,.question,.q,.result{min-width:0;max-width:100%}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 24px}
.meta>div{padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.9);color:#52627a;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.meta strong{color:var(--dark);font-size:17px}
mjx-container{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}
svg{max-width:100%}

.badge{
  display:inline-flex!important;
  padding:9px 15px!important;
  border-radius:999px!important;
  background:#e0f2fe!important;
  color:#0369a1!important;
  font-size:14px!important;
  font-weight:800!important;
}

.quiz{display:grid!important;gap:24px!important}
.question,.q{
  background:rgba(255,255,255,.9)!important;
  border:1px solid var(--border)!important;
  border-radius:28px!important;
  padding:30px!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
}

.question-number,.num{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,var(--primary),var(--accent))!important;
  color:#fff!important;
  font-weight:900!important;
}

.question h2,.question-title,.qh{
  color:var(--dark)!important;
  font-size:22px!important;
  font-weight:800!important;
}

.answers{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;margin-top:18px!important;min-width:0!important;max-width:100%!important}
.answer{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 18px!important;
  border:2px solid #dbeafe!important;
  border-radius:18px!important;
  background:#f8fbff!important;
  color:var(--text)!important;
  font-family:"Inter",Arial,sans-serif!important;
  font-size:17px!important;
  line-height:1.45!important;
  cursor:pointer!important;
}
.answer>span{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important}
.answer mjx-container{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}
.answer:hover,.answer.selected{border-color:#93c5fd!important;transform:translateY(-2px)}
.answer.correct{border-color:var(--good)!important;background:rgba(34,197,94,.12)!important}
.answer.wrong{border-color:var(--bad)!important;background:rgba(239,68,68,.12)!important}

.feedback{margin-top:18px!important;padding:16px 18px!important;border-radius:18px!important;font-size:16px!important}
.feedback.good{background:rgba(34,197,94,.12)!important;color:#166534!important}
.feedback.bad{background:rgba(239,68,68,.10)!important;color:#991b1b!important}

.actions,.controls,.submit-wrapper,#nextStep{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  margin-top:30px!important;
}

.submit-btn,.check-btn,.btn,.next-button,.retry-button,.next-btn,.back-link{
  min-height:62px!important;
  min-width:210px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:17px 28px!important;
  border-radius:18px!important;
  font-family:"Inter",Arial,sans-serif!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:900!important;
  text-align:center!important;
  text-decoration:none!important;
  cursor:pointer!important;
}

.submit-btn,.check-btn,.btn-primary,.primary,.next-button{
  border:0!important;
  background:linear-gradient(135deg,var(--primary),var(--accent))!important;
  color:#fff!important;
}
.btn-secondary,.secondary,.retry-button,.next-btn.secondary-btn,.back-link{
  background:#fff!important;
  border:1px solid var(--border)!important;
  color:var(--primary)!important;
}
.back-link{min-width:190px!important}

.result{
  margin-top:30px!important;
  border:1px solid var(--border)!important;
  border-radius:28px!important;
  background:#fff!important;
  color:#334155!important;
  padding:34px!important;
  box-shadow:var(--shadow)!important;
}
.result h2,.result-title{
  color:#071b5f!important;
  opacity:1!important;
}
.result p,.resultText,.result-text{
  color:#334155!important;
  opacity:1!important;
}
.result-score,.result-percent,.result .percent,.score{
  font-size:60px!important;
  font-weight:900!important;
  color:#0b46bd!important;
  opacity:1!important;
  text-shadow:0 2px 0 #dbeafe!important;
}

@media(max-width:700px){
  .page,.container,main.container{width:min(100% - 28px,1000px)!important}
  .top-bar,.top{flex-direction:column!important;align-items:stretch!important;padding:14px 0!important}
  .hero,.question,.q{padding:25px 20px!important}
  .meta{grid-template-columns:1fr}
  .hero h1,h1{font-size:2rem!important}
  .submit-btn,.check-btn,.btn,.next-button,.retry-button,.next-btn,.back-link{width:100%!important;min-width:0!important}
  .actions,.controls,.submit-wrapper,#nextStep{flex-direction:column!important;align-items:stretch!important}
}