/* Quiz app — web shell (aligned with gx-take / gx-hub) */

html.edu-view-web .edu-web-content .quiz-page {
  --gx-web-navy: #000000;
  max-width: 1180px;
  margin-inline: auto;
  padding: 0 0 3rem;
}

html.edu-view-web .edu-web-content .quiz-header-card {
  margin-bottom: 20px;
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 48%, #1a1a1a 100%);
  box-shadow: 0 16px 40px rgba(13, 27, 62, 0.18);
}

html.edu-view-web .edu-web-content .quiz-header-card--child {
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 52%, #0284c7 100%);
}

html.edu-view-web .edu-web-content .quiz-header-card--empty {
  text-align: start;
}

html.edu-view-web .edu-web-content .quiz-top-row h1 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

html.edu-view-web .edu-web-content .quiz-top-row p {
  font-size: 0.92rem;
  line-height: 1.6;
}

html.edu-view-web .edu-web-content .quiz-timer {
  min-width: 88px;
  height: 52px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  border-radius: 14px;
}

html.edu-view-web .edu-web-content .quiz-progress-line {
  height: 8px;
  margin-top: 14px;
}

html.edu-view-web .edu-web-content .quiz-meta-row {
  margin-top: 10px;
  font-size: 0.86rem;
}

html.edu-view-web .edu-web-content .quiz-course-label {
  margin-top: 10px;
  font-size: 0.84rem;
  opacity: 0.88;
}

html.edu-view-web .edu-web-content .quiz-form {
  max-width: 820px;
  margin-inline: auto;
}

html.edu-view-web .edu-web-content .quiz-question {
  padding: 22px 24px;
  border-radius: 16px;
  border-color: #e8ecf1;
  box-shadow: 0 4px 18px rgba(13, 27, 62, 0.06);
}

html.edu-view-web .edu-web-content .quiz-question h2 {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.55;
}

html.edu-view-web .edu-web-content .quiz-option {
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 14px;
  border-color: #e8ecf1;
  font-size: 0.94rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(13, 27, 62, 0.04);
}

html.edu-view-web .edu-web-content .quiz-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand, #0B1426) 45%, #e8ecf1);
  background: #F3F2EF;
}

html.edu-view-web .edu-web-content .quiz-actions {
  position: static;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e8ecf1;
  box-shadow: 0 8px 24px rgba(13, 27, 62, 0.06);
}

html.edu-view-web .edu-web-content .quiz-actions .edu-btn.primary {
  background: var(--gx-web-navy, #000000);
}

html.edu-view-web .edu-web-content .quiz-actions .edu-btn.primary:hover {
  background: #1a1a1a;
}

html.edu-view-web .edu-web-content .quiz-actions .edu-btn.secondary {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: var(--gx-web-navy, #000000);
}

html.edu-view-web .edu-web-content .quiz-result {
  max-width: 640px;
  margin: 20px auto 0;
  padding: 32px 28px;
  border-radius: 20px;
  border-color: #e8ecf1;
  box-shadow: 0 12px 36px rgba(13, 27, 62, 0.08);
}

html.edu-view-web .edu-web-content .quiz-result h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

html.edu-view-web .edu-web-content .result-score {
  width: 160px;
  height: 160px;
  border-radius: 24px;
}

html.edu-view-web .edu-web-content .result-score strong {
  font-size: 2.2rem;
}

html.edu-view-web .edu-web-content .result-actions .edu-btn.primary {
  background: var(--gx-web-navy, #000000);
}

html.edu-view-web .edu-web-content .result-actions .edu-btn.primary:hover {
  background: #1a1a1a;
}

@media (max-width: 960px) {
  html.edu-view-web .edu-web-content .quiz-form,
  html.edu-view-web .edu-web-content .quiz-result {
    max-width: none;
  }
}

@media (max-width: 560px) {
  html.edu-view-web .edu-web-content .quiz-header-card {
    padding: 20px 18px;
  }

  html.edu-view-web .edu-web-content .quiz-top-row {
    flex-direction: column;
  }

  html.edu-view-web .edu-web-content .quiz-timer {
    width: 100%;
  }
}