.section-images { min-width: 0; }
.section-image-section h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.section-image-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: var(--space-3); }
.section-image-item { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--paper-line); border-radius: var(--radius-control); padding: var(--space-2); }
.section-image-preview { width: 100%; height: 150px; padding: 0; overflow: hidden; background: var(--paper); border: 0; border-radius: var(--radius-control); cursor: zoom-in; color: var(--ink-soft); }
.section-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.section-image-name { font-size: var(--text-sm); overflow-wrap: anywhere; }
.section-image-error { color: var(--status-danger); font-size: var(--text-sm); overflow-wrap: anywhere; }
.section-images .section-image-controls { gap: var(--space-1); flex-wrap: wrap; flex-direction: row; }
.section-images .section-image-controls .btn { width: auto; flex: 1 1 44px; min-width: var(--touch-target); min-height: var(--touch-target); padding-inline: var(--space-1); }
.section-image-pickers label { position: relative; overflow: hidden; min-height: var(--touch-target); cursor: pointer; }
.section-image-pickers input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.section-image-pickers label:focus-within { outline: 2px solid var(--steel); outline-offset: 2px; }
.section-image-item progress { width: 100%; accent-color: var(--steel); }
.section-image-viewer { width: min(1100px,96vw); max-width: 96vw; height: min(900px,94dvh); max-height: 94dvh; box-sizing: border-box; color: var(--ink); background: var(--paper-card); border: 1px solid var(--paper-line); border-radius: var(--radius-panel); padding: var(--space-3); }
.section-image-viewer::backdrop { background: rgba(0,0,0,.65); }
.section-image-viewer .row { justify-content: center; flex-wrap: wrap; }
.section-image-viewer .btn { min-height: var(--touch-target); }
.section-image-viewer img { display: block; width: 100%; height: calc(100% - 100px); object-fit: contain; touch-action: pan-y pinch-zoom; }
.assignment-section-actions[hidden] { display: none; }
@media (max-width: 480px) {
  .section-image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
  .section-image-preview { height: 125px; }
  .section-image-item { padding: var(--space-1); }
  .section-image-controls { gap: 0; }
  .section-image-pickers { gap: var(--space-2); }
}