.program-editor__items { display: grid; gap: .75rem; }
.program-editor__card { border: 1px solid var(--ui-divider); border-radius: .8rem; padding: 1rem; background: var(--ui-surface, rgba(255,255,255,.025)); }
.program-editor__card.is-dragging { opacity: .45; }
.program-editor__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.program-editor__drag-hint { color: var(--ui-muted); font-size: .8rem; cursor: grab; }
.program-editor__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.program-editor__field { display: grid; gap: .3rem; min-width: 0; }
.program-editor__field > span { font-size: .875rem; color: var(--ui-muted); }
.program-editor__field:has(textarea) { grid-column: 1 / -1; }
.program-preview__frame-wrap { overflow: auto; margin-top: 1rem; padding: .5rem; border: 1px solid var(--ui-divider); border-radius: .8rem; background: #e9eef2; }
.program-preview__frame { display: block; margin-inline: auto; border: 0; border-radius: .45rem; background: white; }
.program-map__open { display: grid; gap: .5rem; width: 100%; padding: .65rem; color: inherit; text-align: start; border: 1px solid var(--ui-divider); border-radius: .75rem; background: transparent; }
.program-map__open img { display: block; width: 100%; max-height: 24rem; object-fit: contain; border-radius: .4rem; }
.program-map__open span { font-size: .9rem; }
.program-map__dialog { width: min(96vw, 1200px); max-width: none; max-height: 94vh; padding: 1rem; color: var(--ui-text); border: 1px solid var(--ui-divider); border-radius: .8rem; background: var(--ui-bg, #102333); }
.program-map__dialog::backdrop { background: rgba(0,0,0,.78); }
.program-map__dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.program-map__canvas { max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
.program-map__canvas img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; transform-origin: top left; }
.program-map__zoom { display: flex; align-items: center; gap: .8rem; max-width: 24rem; margin-block: .8rem; }
.program-map__zoom input { flex: 1; }
@media (max-width: 600px) {
  .program-editor__fields { grid-template-columns: 1fr; }
  .program-editor__field:has(textarea) { grid-column: auto; }
  .program-editor__card { padding: .75rem; }
  .program-map__dialog { padding: .7rem; }
}