.quizzer-scope{
  --quizzer-bg: #ffffff;
  --quizzer-fg: #1f2937;
  --quizzer-primary: #2563eb;
  --quizzer-secondary: #6b7280;
  --quizzer-border: #e5e7eb;
  --quizzer-backdrop: rgba(0,0,0,.5);
  --quizzer-correct: #16a34a;
  --quizzer-incorrect: #dc2626;
}

.quizzer-modal{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.quizzer-backdrop{ position: absolute; inset: 0; background: var(--quizzer-backdrop); opacity: 0; transition: opacity .25s ease; }
.quizzer-dialog{ position: relative; background: var(--quizzer-bg); color: var(--quizzer-fg); border-radius: 12px; width: min(760px, 92vw); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 24px 24px 28px; transform: translateY(10px) scale(.98); opacity: 0; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .24s ease; font-family: inherit; }
.quizzer-close{ position: absolute; top: 10px; right: 12px; background: transparent; border: 0; font-size: 22px; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; line-height: 1; cursor: pointer; color: var(--quizzer-secondary); }
.quizzer-close:hover{ background: #f3f4f6; }
.quizzer-modal.quizzer-visible{ opacity: 1; pointer-events: auto; }
.quizzer-modal.quizzer-visible .quizzer-backdrop{ opacity: 1; }
.quizzer-modal.quizzer-visible .quizzer-dialog{ transform: translateY(0) scale(1); opacity: 1; }

.quizzer-title{ margin: 0 0 8px; font-size: 22px; }
.quizzer-desc{ margin: 0 0 16px; color: var(--quizzer-secondary); }
.quizzer-hero-row{ font-family: inherit; }
.quizzer-hero{ width: 80px; height: 80px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.quizzer-hero-xl{ width: 120px; height: 120px; }
.quizzer-intro-grid{ display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: stretch; }
.quizzer-intro-left{ position: relative; overflow: hidden; border-radius: 12px; }
.quizzer-intro-left .quizzer-hero{ width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; box-shadow: none; background: transparent; }

.quizzer-form{ display: grid; gap: 12px; }
.quizzer-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quizzer-input{ width: 100%; padding: 10px 12px; border: 1px solid var(--quizzer-border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.quizzer-btn{ padding: 10px 14px; border-radius: 8px; border: 0; cursor: pointer; font-weight: 600; font-family: inherit; }
.quizzer-btn-primary{ background: var(--quizzer-primary); color: #fff; }
.quizzer-btn-primary:hover{ filter: brightness(1.05); }
.quizzer-btn-secondary{ background: #f3f4f6; color: var(--quizzer-fg); }

.quizzer-error{ color: var(--quizzer-incorrect); font-size: 13px; }

.quizzer-step[hidden]{ display: none !important; }

.quizzer-spinner{ width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: var(--quizzer-primary); border-radius: 50%; animation: quizzer-spin 1s linear infinite; margin: 20px auto; }
@keyframes quizzer-spin{ to{ transform: rotate(360deg); } }
.quizzer-loading-text{ text-align: center; color: var(--quizzer-secondary); }

.quizzer-quiz-header{ display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.quizzer-quiz-title{ font-weight: 700; }
.quizzer-progress{ font-weight: 600; color: var(--quizzer-secondary); }
.quizzer-progressbar.progress{ height: 6px; background: #eef2f7; }
.quizzer-progressbar .progress-bar{ background: var(--quizzer-primary); }
.quizzer-question{ font-size: 18px; margin: 12px 0 8px; }
.quizzer-options{ display: grid; gap: 10px; margin: 12px 0 8px; }
.quizzer-option{ text-align: left; width: 100%; padding: 12px; border: 1px solid var(--quizzer-border); background: #fff; border-radius: 10px; cursor: pointer; position: relative; }
.quizzer-option.selected{ outline: 2px solid var(--quizzer-primary); }
.quizzer-option.correct{ border-color: var(--quizzer-correct); background: #ecfdf5; animation: quizzer-pop .22s ease-out; }
.quizzer-option.incorrect{ border-color: var(--quizzer-incorrect); background: #fef2f2; animation: quizzer-shake .3s ease-in-out; }
.quizzer-option.correct::after, .quizzer-option.incorrect::after{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.quizzer-option.correct::after{ content: "\2713"; color: var(--quizzer-correct); }
.quizzer-option.incorrect::after{ content: "\2715"; color: var(--quizzer-incorrect); }
.quizzer-option:disabled, .quizzer-option[disabled]{ cursor: default; opacity: 1; }
@keyframes quizzer-pop{ 0%{ transform: scale(.98); } 100%{ transform: scale(1); } }
@keyframes quizzer-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}

.quizzer-msg{ min-height: 20px; color: var(--quizzer-secondary); font-size: 14px; }
.quizzer-nav{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

.quizzer-score{ font-size: 18px; font-weight: 600; }
.quizzer-share{ margin-top: 8px; }
.quizzer-share-list{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.quizzer-share-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #f3f4f6; color: var(--quizzer-fg); text-decoration: none; }

/* Donut chart */
.quizzer-chart{ --p: 0; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--quizzer-primary) calc(var(--p)*1turn), #e5e7eb 0); -webkit-mask: radial-gradient(farthest-side,#000 calc(100% - 16px), transparent 0); mask: radial-gradient(farthest-side,#000 calc(100% - 16px), transparent 0); display: grid; place-items: center; margin: 14px auto; }
.quizzer-chart-label{ font-weight: 700; font-size: 20px; }

@media (max-width: 520px){
  .quizzer-row{ grid-template-columns: 1fr; }
  .quizzer-dialog{ padding: 16px 14px 20px; }
}
@media (max-width: 720px){
  .quizzer-intro-grid{ grid-template-columns: 1fr; text-align: left; }
  .quizzer-intro-left{ display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
  .quizzer-intro-left .quizzer-hero{ width: 100%; height: auto; max-height: 220px; object-fit: cover; }
}

/* Inline CTA and fun touches */
.quizzer-inline-cta { border: 1px solid var(--quizzer-border); border-radius: 12px; background: #fff; }
.quizzer-inline-cta .card-body { padding: 14px; }
.quizzer-inline-cta .card-title { margin-bottom: 4px; }
.quizzer-inline-cta .card-text { color: var(--quizzer-secondary); margin: 0; }
.quizzer-inline-cta .quizzer-emoji { font-size: 28px; line-height: 1; animation: quizzer-bounce 1.4s ease-in-out infinite; }
@keyframes quizzer-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Make Bootstrap option buttons look consistent when we add classes dynamically */
.quizzer-options .quizzer-option.btn { padding: 10px 12px; border-radius: 10px; }
.quizzer-options .quizzer-option.btn.selected { box-shadow: 0 0 0 3px rgba(37,99,235,.25); }