/* ── BASE ─────────────────────────────────────────── */
.dtq-quiz-wrap{max-width:800px;margin:2rem auto;font-family:inherit}
.dtq-progress-bar{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:.5rem}
.dtq-progress-fill{height:100%;background:#2563eb;border-radius:999px;transition:width .4s ease}
.dtq-progress-text{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}
.dtq-timer-bar{display:flex;align-items:center;gap:.5rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:.5rem 1rem;margin-bottom:1rem;font-weight:600;color:#0369a1}
.dtq-timer-urgent{color:#dc2626!important;animation:dtq-pulse 1s infinite}
@keyframes dtq-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.dtq-question{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.75rem;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dtq-question-text{font-size:1.1rem;font-weight:600;color:#111827;margin-bottom:1.25rem;line-height:1.55}
.dtq-question-image img{max-width:100%;border-radius:8px;margin-bottom:1.25rem}

/* ── MULTIPLE CHOICE ──────────────────────────────── */
.dtq-choices{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.dtq-choice-label{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:border-color .18s,background .18s;font-weight:500}
.dtq-choice-label:hover{border-color:#2563eb;background:#eff6ff}
.dtq-choice-label input{display:none}
.dtq-choice-letter{min-width:28px;height:28px;background:#e5e7eb;color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.dtq-is-correct .dtq-choice-letter{background:#16a34a;color:#fff}
.dtq-is-correct{border-color:#16a34a!important;background:#f0fdf4!important}

/* ── DRAG & DROP ──────────────────────────────────── */
/* Token bank */
.dtq-token-bank{display:flex;flex-wrap:wrap;gap:10px;padding:14px;background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:10px;margin-bottom:14px;min-height:60px;transition:background .18s}
.dtq-token-bank.dtq-drop-hover{background:#dbeafe;border-color:#3b82f6}
.dtq-token{width:46px;height:46px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;cursor:grab;user-select:none;box-shadow:0 2px 8px rgba(37,99,235,.35);transition:transform .15s,opacity .15s;touch-action:none}
.dtq-token:active{cursor:grabbing}
.dtq-token.dtq-dragging{opacity:.4;transform:scale(.9)}
.dtq-touch-clone{width:46px;height:46px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;box-shadow:0 4px 16px rgba(37,99,235,.5)}

/* Image wrap */
.dtq-dropimage-wrap{position:relative;display:inline-block;width:100%;margin-bottom:14px}
.dtq-drop-img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e5e7eb}

/* Drop zones on image */
.dtq-drop-zone{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,box-shadow .18s}
.dtq-zone-inner{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.75);border:2.5px dashed #6b7280;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#6b7280;transition:background .18s,border-color .18s}
.dtq-drop-zone.dtq-drop-hover .dtq-zone-inner{background:rgba(219,234,254,.9);border-color:#2563eb}
.dtq-drop-zone .dtq-token{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:grab}
/* Feedback states */
.dtq-zone-ok   .dtq-zone-inner{background:rgba(240,253,244,.9);border-color:#16a34a}
.dtq-zone-wrong .dtq-zone-inner{background:rgba(254,242,242,.9);border-color:#dc2626}

/* ── FEEDBACK ─────────────────────────────────────── */
.dtq-answer-feedback{padding:.75rem 1rem;border-radius:8px;font-weight:700;font-size:1rem;margin:1rem 0 .5rem}
.dtq-correct{background:#dcfce7;color:#166534;border:1.5px solid #86efac}
.dtq-incorrect{background:#fee2e2;color:#991b1b;border:1.5px solid #fca5a5}
.dtq-explanation{background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:.75rem 1rem;color:#78350f;font-size:.9rem;margin-bottom:1rem}

/* ── BUTTONS ──────────────────────────────────────── */
.dtq-question-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.dtq-btn{padding:.65rem 1.4rem;border-radius:8px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:background .18s}
.dtq-btn-submit{background:#2563eb;color:#fff}
.dtq-btn-submit:hover{background:#1d4ed8}
.dtq-btn-submit:disabled{background:#9ca3af;cursor:default}
.dtq-btn-next{background:#16a34a;color:#fff}
.dtq-btn-next:hover{background:#15803d}
.dtq-btn-restart{background:#4f46e5;color:#fff;margin-top:1rem}

/* ── RESULTS ──────────────────────────────────────── */
.dtq-results{text-align:center;padding:3rem 2rem}
.dtq-results-inner{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:3rem 2rem;max-width:480px;margin:0 auto;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.dtq-results-icon{font-size:4rem;margin-bottom:1rem}
.dtq-results-title{font-size:1.5rem;font-weight:700;margin-bottom:.75rem;color:#111827}
.dtq-results-score{color:#374151;font-size:1rem;margin-bottom:1.5rem}

/* ── VIDEO ────────────────────────────────────────── */
.dtq-video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin-bottom:1.5rem}
.dtq-video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px}

@media(max-width:600px){
    .dtq-question{padding:1.25rem}
    .dtq-question-text{font-size:1rem}
    .dtq-question-actions{flex-direction:column}
    .dtq-btn{width:100%;text-align:center}
    .dtq-token{width:40px;height:40px;font-size:1.1rem}
    .dtq-drop-zone{width:44px;height:44px}
    .dtq-zone-inner{width:36px;height:36px}
}