.ds-quiz-root {
      margin-top: var(--ds-space-6);
    }
    .ds-quiz-loading,
    .ds-quiz-error,
    .ds-quiz-empty {
      padding: var(--ds-space-4);
      color: var(--ds-text-muted);
      font-size: var(--ds-text-body);
    }
    .ds-quiz-panel {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-4);
      padding: var(--ds-space-4);
      background: var(--ds-surface-section);
      border: 1px solid var(--ds-border);
      border-radius: var(--ds-radius-md);
    }
    .ds-quiz-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--ds-space-3);
    }
    .ds-quiz-score {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ds-space-4);
      font-size: var(--ds-text-caption);
      color: var(--ds-text-muted);
    }
    .ds-quiz-score strong {
      color: var(--ds-text);
      font-weight: var(--ds-weight-semibold);
    }
    .ds-quiz-toolbar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ds-space-2);
    }
    .ds-quiz-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
    }
    .ds-quiz-filter {
      appearance: none;
      border: 1px solid var(--ds-border);
      background: var(--ds-surface);
      color: var(--ds-text-muted);
      font-size: var(--ds-text-caption);
      font-weight: var(--ds-weight-medium);
      padding: 0.3rem 0.65rem;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .ds-quiz-filter:hover:not(.ds-quiz-filter--active) {
      color: var(--ds-text);
      border-color: var(--ds-border-strong);
    }
    .ds-quiz-filter--active {
      background: var(--ds-accent-soft);
      border-color: var(--ds-accent);
      color: var(--ds-accent);
    }
    .ds-quiz-progress {
      height: 3px;
      background: var(--ds-border-subtle);
      border-radius: 999px;
      overflow: hidden;
    }
    .ds-quiz-progress-bar {
      height: 100%;
      background: var(--ds-accent);
      border-radius: 999px;
      transition: width 0.2s ease;
    }
    .ds-quiz-meta {
      margin: 0;
      font-size: var(--ds-text-caption);
      color: var(--ds-text-muted);
    }
    .ds-quiz-meta-sep { opacity: 0.5; }
    .ds-quiz-meta-diff--hard { color: var(--ds-amount-negative); }
    .ds-quiz-meta-diff--medium { color: var(--ds-text-muted); }
    .ds-quiz-meta-diff--easy { color: var(--ds-amount-positive); }
    .ds-quiz-prompt {
      margin: 0;
      font-size: var(--ds-text-title-sm);
      font-weight: var(--ds-weight-semibold);
      line-height: 1.35;
      color: var(--ds-text);
    }
    .ds-quiz-choices {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .ds-quiz-choice {
      display: flex;
      align-items: flex-start;
      gap: var(--ds-space-3);
      width: 100%;
      text-align: left;
      padding: 0.75rem 0.85rem;
      border: 1px solid var(--ds-border);
      border-radius: var(--ds-radius-md);
      background: var(--ds-surface);
      color: var(--ds-text);
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .ds-quiz-choice:hover:not(:disabled) {
      border-color: var(--ds-border-strong);
      background: var(--ds-surface-inset);
    }
    .ds-quiz-choice--picked {
      border-color: var(--ds-accent);
      background: var(--ds-accent-soft);
    }
    .ds-quiz-choice--correct {
      border-color: var(--ds-amount-positive);
      background: color-mix(in srgb, var(--ds-amount-positive) 12%, var(--ds-surface));
    }
    .ds-quiz-choice--wrong {
      border-color: var(--ds-amount-negative);
      background: color-mix(in srgb, var(--ds-amount-negative) 10%, var(--ds-surface));
    }
    .ds-quiz-choice:disabled { cursor: default; }
    .ds-quiz-choice-label {
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--ds-surface-inset);
      font-size: var(--ds-text-caption);
      font-weight: var(--ds-weight-semibold);
      color: var(--ds-text-muted);
    }
    .ds-quiz-choice-text {
      flex: 1;
      font-size: var(--ds-text-body);
      line-height: 1.4;
    }
    .ds-quiz-feedback {
      padding: var(--ds-space-3) var(--ds-space-4);
      border-radius: var(--ds-radius-md);
      border: 1px solid var(--ds-border);
    }
    .ds-quiz-feedback--ok {
      border-color: color-mix(in srgb, var(--ds-amount-positive) 40%, var(--ds-border));
      background: color-mix(in srgb, var(--ds-amount-positive) 8%, var(--ds-surface));
    }
    .ds-quiz-feedback--bad {
      border-color: color-mix(in srgb, var(--ds-amount-negative) 35%, var(--ds-border));
      background: color-mix(in srgb, var(--ds-amount-negative) 6%, var(--ds-surface));
    }
    .ds-quiz-feedback-verdict {
      margin: 0 0 0.35rem;
      font-weight: var(--ds-weight-semibold);
      font-size: var(--ds-text-body);
    }
    .ds-quiz-feedback-explain {
      margin: 0;
      font-size: var(--ds-text-body);
      color: var(--ds-text);
      line-height: 1.45;
    }
    .ds-quiz-refs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: var(--ds-space-3);
    }
    .ds-quiz-ref {
      appearance: none;
      border: 1px solid var(--ds-border);
      background: var(--ds-surface);
      color: var(--ds-accent);
      font-size: var(--ds-text-caption);
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      cursor: pointer;
    }
    .ds-quiz-ref:hover {
      border-color: var(--ds-accent);
      background: var(--ds-accent-soft);
    }
    .ds-quiz-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--ds-space-3);
      padding-top: var(--ds-space-2);
    }