/* ── Quizzie Widget ────────────────────────────────────────────────────── */

.quizzie-embed {
  container-type: inline-size;
}

.quizzie-widget {
  --qz-accent:      #4f46e5;
  --qz-accent-dark: #3730a3;
  --qz-correct:     #16a34a;
  --qz-wrong:       #dc2626;
  --qz-bg:          #f8f9fb;
  --qz-surface:     #ffffff;
  --qz-border:      #e2e8f0;
  --qz-text:        #1e293b;
  --qz-text-muted:  #64748b;
  --qz-radius:      12px;

  background:   var(--qz-bg);
  border:       1px solid var(--qz-border);
  border-radius: var(--qz-radius);
  padding:      28px 32px;
  margin:       2.5rem 0;
  font-family:  inherit;
  color:        var(--qz-text);
  box-sizing:   border-box;
}

/* Header */
.quizzie-header   { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.quizzie-icon     { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--qz-accent); color: #fff; border-radius: 8px; font-size: 18px; flex-shrink: 0; }
.quizzie-title    { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--qz-text); }

/* Progress */
.quizzie-progress-wrap   { margin-bottom: 22px; }
.quizzie-progress-label  { display: block; font-size: .78rem; color: var(--qz-text-muted); margin-bottom: 6px; }
.quizzie-progress-bar    { width: 100%; height: 6px; background: var(--qz-border); border-radius: 99px; overflow: hidden; }
.quizzie-progress-fill   { height: 100%; background: var(--qz-accent); border-radius: 99px; transition: width .3s ease; }

/* Question */
.quizzie-question-wrap  { margin-bottom: 18px; }
.quizzie-multi-hint     { display: block; font-size: .75rem; color: var(--qz-text-muted); margin-bottom: 5px; }
.quizzie-question-text  { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.55; }

/* Answers */
.quizzie-answers     { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.quizzie-answer      { margin: 0; padding: 0; }
.quizzie-answer-btn  {
  width: 100%; text-align: left;
  background: var(--qz-surface); border: 2px solid var(--qz-border); border-radius: 10px;
  padding: 12px 16px; font-size: .95rem; color: var(--qz-text); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s; line-height: 1.45;
}
.quizzie-answer-btn:hover:not(:disabled) { border-color: var(--qz-accent); background: #eef2ff; transform: translateX(2px); }
.quizzie-answer-btn.selected  { border-color: var(--qz-accent); background: #eef2ff; font-weight: 600; }
.quizzie-answer-btn.correct   { border-color: var(--qz-correct); background: #dcfce7; color: #14532d; }
.quizzie-answer-btn.wrong     { border-color: var(--qz-wrong);   background: #fee2e2; color: #7f1d1d; }
.quizzie-answer-btn:disabled  { cursor: default; }

/* Explanation */
.quizzie-explanation         { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; }
.quizzie-explanation.quizzie-correct { background: #dcfce7; border: 1px solid #86efac; }
.quizzie-explanation.quizzie-wrong   { background: #fee2e2; border: 1px solid #fca5a5; }
.quizzie-feedback-icon       { font-size: 1.1rem; font-weight: 700; line-height: 1.5; flex-shrink: 0; }
.quizzie-explanation.quizzie-correct .quizzie-feedback-icon { color: var(--qz-correct); }
.quizzie-explanation.quizzie-wrong   .quizzie-feedback-icon { color: var(--qz-wrong); }
.quizzie-explanation-text    { margin: 0; font-size: .9rem; line-height: 1.55; }

/* Action bar */
.quizzie-action-bar { display: flex; justify-content: flex-end; }
.quizzie-btn-primary {
  background: var(--qz-accent); color: #fff; border: none; border-radius: 8px;
  padding: 11px 24px; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.quizzie-btn-primary:hover:not(:disabled) { background: var(--qz-accent-dark); }
.quizzie-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* Result */
.quizzie-result          { text-align: center; padding: 12px 0; }
.quizzie-result-badge    { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; font-size: 1.6rem; font-weight: 800; margin: 0 auto 16px; color: #fff; }
.quizzie-result-badge.quizzie-passed { background: var(--qz-correct); }
.quizzie-result-badge.quizzie-failed { background: var(--qz-wrong); }
.quizzie-result-headline { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; }
.quizzie-result-sub      { margin: 0 0 24px; color: var(--qz-text-muted); }
.quizzie-btn-secondary   {
  background: transparent; color: var(--qz-accent); border: 2px solid var(--qz-accent);
  border-radius: 8px; padding: 10px 22px; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.quizzie-btn-secondary:hover { background: var(--qz-accent); color: #fff; }

/* Error */
.quizzie-error { color: var(--qz-wrong); font-size: .9rem; padding: 10px; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .quizzie-widget {
    --qz-bg:         #1e1e2e;
    --qz-surface:    #2a2a3e;
    --qz-border:     #3d3d55;
    --qz-text:       #e2e8f0;
    --qz-text-muted: #94a3b8;
  }
  .quizzie-answer-btn:hover:not(:disabled),
  .quizzie-answer-btn.selected { background: #2e2e5e; }
}

/* Narrow container */
@container (max-width: 480px) {
  .quizzie-widget { padding: 20px 16px; }
  .quizzie-btn-primary { width: 100%; }
}