.task-image-editor { padding: 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--paper); }
.task-image-editor.is-over { border-color: var(--slate-blue); background: var(--sand); }
.task-image-picker { position: relative; cursor: pointer; overflow: hidden; }
.task-image-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.task-image-status { font-size: .86rem; margin: .5rem 0 0; color: var(--coffee); overflow-wrap: anywhere; }
[data-task-image-list] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.task-image-uploaded { min-width: 0; padding: .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.task-image-uploaded .row > span { overflow-wrap: anywhere; font-size: .8rem; min-width: 0; }
.task-image-gallery { display: grid; gap: 1rem; margin: 1rem 0; }
.task-image-figure { margin: 0; min-width: 0; }
.task-image-button { display: block; border: 0; padding: 0; width: 100%; background: transparent; cursor: zoom-in; }
.task-image-button img { display: block; margin: auto; max-width: 100%; max-height: 700px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.task-image-button img:not([src]) { width: 100%; min-height: 110px; background: var(--sand); }
.task-image-uploaded img { height: 130px; max-height: 130px; }
.task-image-uploaded .task-image-gallery { margin: 0 0 .5rem; }
.task-preview-dialog { width: min(960px, calc(100vw - 2rem)); max-height: 90dvh; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); }
.task-preview-dialog::backdrop { background: rgb(20 20 20 / .55); }
.task-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 1; padding: 1rem 1.3rem; background: var(--paper); border-bottom: 1px solid var(--border-strong); }
.task-preview-content { padding: 1.5rem; overflow-wrap: anywhere; }
.task-preview-content .practice-question { margin-bottom: 1.5rem; }
.task-preview-content h1 { font-size: 1.75rem; }
.task-image-full { display: block; max-width: 100%; height: auto; margin: auto; }
.task-editor-preview { margin-top: 1rem; }
.task-editor-preview summary { cursor: pointer; font-weight: 600; }
[data-task-editor-preview] { padding: 1rem 0; }
@media (max-width: 600px) {
  .task-image-editor > .row { flex-direction: column; align-items: stretch; }
  .task-preview-content { padding: .8rem; }
  .task-preview-dialog { width: calc(100vw - 1rem); max-height: 94dvh; }
}