/* Practice uses the same assessment media markup as timed quizzes. */
.mcq-card .question-stem,.mcq-card .opt-text,.mcq-card .mcq-correct-option{min-width:0;overflow-wrap:anywhere}
.mcq-card .q-media{max-width:100%;margin:16px 0;font-size:14px;font-weight:400}
.mcq-card .q-media img{display:block;width:auto;height:auto;max-width:100%;max-height:440px;object-fit:contain;background:#fff;border:1px solid hsl(var(--border));border-radius:10px;padding:8px;box-sizing:border-box}
.mcq-card .q-media figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.mcq-card .q-media .tq-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;padding:6px 0;background:none;color:hsl(var(--primary));font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;touch-action:manipulation}
.mcq-card .q-media button:disabled{opacity:.55;cursor:not-allowed}
.mcq-card .q-media-loading{display:none;font-size:13px;color:hsl(var(--muted-foreground))}
.mcq-card .q-media[data-loading=true] .q-media-loading{display:block}
.mcq-card .q-media[data-failed=true] img{display:none}
.mcq-card .q-media [hidden]{display:none!important}
.mcq-card .q-media-error,.mcq-card .q-media-failure,.mcq-card .q-image-description{font-size:13px;font-weight:400;color:hsl(var(--muted-foreground))}
.mcq-card .q-image-description summary{cursor:pointer;min-height:44px;padding:8px 0}
.mcq-card .mcq-image-option{min-width:0;display:flex;flex-direction:column;gap:12px;border:1.5px solid hsl(var(--option-border));border-radius:12px;padding:12px;background:hsl(var(--option-bg))}
.mcq-card .mcq-image-option>.opt-text{flex:1}
.mcq-card .mcq-image-option .q-media{margin:0}
.mcq-card .mcq-image-option .mcq-opt-btn{width:100%;min-height:48px}
.mcq-card .mcq-image-option:has(.mcq-correct){border-color:hsl(var(--success-600))}
.mcq-card .mcq-image-option:has(.mcq-incorrect){border-color:hsl(var(--danger-600))}
.mcq-card .mcq-correct-option{margin:8px 0 12px}
.mcq-card .mcq-explanation [data-question-media]{line-height:1.6}
.mcq-card .mcq-options{align-items:stretch}
.mcq-card :focus-visible,.mcq-media-surface :focus-visible{outline:3px solid hsl(var(--primary));outline-offset:3px}
.mcq-media-surface .q-image-viewer{width:min(1100px,calc(100vw - 24px));height:min(900px,calc(100dvh - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:1px solid hsl(var(--border));border-radius:16px;background:hsl(var(--card));color:hsl(var(--foreground));overflow:hidden;box-sizing:border-box}
.mcq-media-surface .q-image-viewer[open]{display:flex;flex-direction:column;gap:12px}
.mcq-media-surface .q-image-viewer::backdrop{background:#111827aa}
.mcq-media-surface .q-viewer-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
.mcq-media-surface .q-viewer-toolbar h2{font-size:18px;font-weight:700;margin:0}
.mcq-media-surface .q-viewer-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}
.mcq-media-surface .q-viewer-toolbar button{min-width:44px;min-height:44px;border:1px solid hsl(var(--border));border-radius:8px;padding:8px 12px;background:hsl(var(--muted));color:inherit;font-size:14px;cursor:pointer;touch-action:manipulation}
.mcq-media-surface #q-viewer-description{font-size:13px;line-height:1.5;margin:0;max-height:6em;overflow:auto;flex-shrink:0;color:hsl(var(--muted-foreground))}
.mcq-media-surface .q-viewer-canvas{flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--muted)/.4);cursor:grab}
.mcq-media-surface .q-viewer-canvas.is-dragging{cursor:grabbing}
.mcq-media-surface .q-viewer-canvas>img{display:block;max-width:none;max-height:none;background:#fff;user-select:none;object-fit:contain}
.mcq-media-surface .q-image-viewer>.tq-meta{font-size:12px;line-height:1.5;margin:0;color:hsl(var(--muted-foreground));flex-shrink:0}
@media(max-width:600px){
  .mcq-card .learning-block{padding:14px}
  .mcq-card .q-media img{max-height:360px;padding:5px}
  .mcq-card .mcq-image-option{padding:10px}
  .mcq-card .mcq-explanation{padding:12px}
  .mcq-card .mcq-explanation>div{gap:8px}
  .mcq-media-surface .q-image-viewer{padding:14px}
}
@media(prefers-reduced-motion:reduce){.mcq-card .animate-fade-in,.mcq-card .animate-pulse-once{animation:none}}