/* Scope all quiz styles */
.qt-container {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 720px;
  margin: 0 auto;
}

/* Form + questions */
.qt-form {
  display: block;
}

.qt-question {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.qt-question-text {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1rem;
}

.qt-options {
  display: grid;
  gap: 6px;
}

.qt-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

.qt-option:hover {
  background: #fafafa;
  border-color: #eee;
}

.qt-option-input {
  /* leave default radio styling; clients can customize if they wish */
}

.qt-option-label {
  line-height: 1.3;
}

/* Captcha area */
.qt-captcha {
  margin: 12px 0;
}

/* Submit button */
.qt-button.qt-submit {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.qt-button.qt-submit:hover {
  background: #f6f6f6;
}

/* Errors */
.qt-error,
.qt-load-error {
  margin-top: 10px;
  color: #b00020;
  border: 1px solid #f5c2c7;
  background: #f8d7da;
  padding: 8px;
  border-radius: 8px;
}

/* Results mode */
.qt-results-header {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.qt-results-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.qt-results-score .qt-score {
  font-weight: 700;
}

.qt-result-item {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.qt-result-item.is-correct {
  border-color: #c8e6c9;
  background: #f1fff2;
}

.qt-result-item.is-incorrect {
  border-color: #ffcdd2;
  background: #fff5f6;
}

.qt-result-question {
  font-weight: 600;
  margin-bottom: 6px;
}

.qt-result-your-answer,
.qt-result-correct-answer,
.qt-resut-explanation,
.qt-result-explanation-text {
  margin: 2px 0;
}

.qt-result-most-picked {
  margin: 4px 0;
}

.qt-result-details {
  margin-top: 6px;
}

.qt-result-counts {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

.qt-count-row {
  margin: 2px 0;
}

/* Example: stronger theming if desired */
.qt-container.theme-dark {
  color: #ffffff;
  background: #121212;
}

.qt-container.theme-dark .qt-question,
.qt-container.theme-dark .qt-results-header,
.qt-container.theme-dark .qt-result-item {
  border-color: #2a2a2a;
  background: #1b1b1b;
}

.qt-container.theme-dark .qt-option:hover {
  background: #222;
  border-color: #333;
}

.qt-container.theme-dark .qt-button.qt-submit {
  border-color: #444;
  background: #222;
  color: #eee;
}