.structured-question-editor { border-top: 1px solid #cfdbed; padding-top: 14px; margin-top: 12px; }
.true-false-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 10px; }
.true-false-options .choice { margin: 0; min-height: 52px; align-items: center; }
.true-false-options .choice:has(input:checked) { background: #e9f2ff; border-color: #175cd3; }
.picture-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.picture-order-heading span { color: #63758a; font-size: 13px; }
.picture-order-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 200px)); gap: 12px; align-items: start; }
.picture-order-list:empty { display: none; }
.picture-order-item { position: relative; min-width: 0; border: 1px solid #bfcddd; border-radius: 6px; padding: 8px; background: #fff; transition: border-color 120ms, box-shadow 120ms; }
.picture-item-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.picture-item-heading b, .picture-position { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 4px; background: #e9eef4; color: #25384b; font-size: 14px; }
.picture-position { position: absolute; top: 8px; left: 8px; pointer-events: none; z-index: 1; }
button.picture-select { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; border-radius: 4px; background: #fff; color: #25384b; cursor: grab; touch-action: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button.picture-select:hover { background: #f3f7fa; }
.picture-select img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 3px; pointer-events: none; }
.picture-select span { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; padding: 2px 4px; }
.picture-order-item [data-picture-label] { width: 100%; min-width: 0; padding: 8px; font-size: 13px; margin-top: 6px; }
.picture-move-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
button.picture-tool { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 7px; border-radius: 4px; }
.picture-order-item.is-selected { border-color: #175cd3; box-shadow: 0 0 0 2px #175cd3; }
.picture-order-item.is-drop-target { border-color: #087e68; box-shadow: 0 0 0 3px #65c8b2; }
.picture-order-item.is-holding::after, .picture-order-item.is-pressed::after, .picture-order-item.is-dragging::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 3px; border-radius: 3px; background: #175cd3; transform: scaleX(1); transform-origin: left; pointer-events: none; }
.picture-order-item.is-holding::after { transform: scaleX(0); animation: picture-hold 50ms linear forwards; }
@keyframes picture-hold { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .picture-order-item.is-holding::after { animation: none; transform: scaleX(1); } }
.picture-order-item.is-pressed, .picture-order-item.is-dragging { border-color: #175cd3; background: #e9f2ff; box-shadow: 0 0 0 3px #175cd3, 0 8px 16px #175cd333; z-index: 2; transition: none; }
.picture-order-item.is-pressed [data-picture-position], .picture-order-item.is-dragging [data-picture-position] { color: #fff; background: #175cd3; }
.picture-order-item.is-pressed .picture-select, .picture-order-item.is-dragging .picture-select { cursor: grabbing; }
.picture-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.picture-upload > span { display: inline-flex; gap: 8px; align-items: center; }
.picture-upload input { width: auto; max-width: 100%; font-size: 14px; }
.picture-error { color: #b42318; margin: 6px 0 0; }
.picture-error:empty { display: none; }
.student-picture-order { margin-top: 16px; }
.student-picture-order .picture-order-list { grid-template-columns: repeat(auto-fit, minmax(145px, 200px)); }
.student-picture-order .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.student-picture-order button.picture-tool { width: 44px; height: 40px; flex-basis: 44px; }
.picture-order-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 130px)); gap: 10px; list-style: none; padding: 0; margin: 12px 0; }
.picture-order-report li { display: flex; flex-direction: column; gap: 4px; border: 1px solid #cfdbed; border-radius: 4px; padding: 6px; min-width: 0; }
.picture-order-report b { font-size: 12px; color: #526277; }
.picture-order-report img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.picture-order-report span { overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 480px) { .picture-order-list, .student-picture-order .picture-order-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
