/* One quiet, readable surface for every workshop dialog. */
dialog {
  --dialog-ink: #203b59;
  --dialog-muted: #52677d;
  --dialog-line: #d5dfe7;
  --dialog-blue: #2468d4;
  --dialog-paper: #fffefa;
  color: var(--dialog-ink);
  font-family: var(--rocode-font-family, Pretendard, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
dialog::backdrop,
dialog:is(.media-library,.section-library,.page-dialog,.image-upload-dialog,.drawing-pad-dialog,.checkpoint-dialog)::backdrop { background: #182d4580; backdrop-filter: blur(3px); }
dialog:is(.media-library,.section-library,.page-dialog,.image-upload-dialog,.drawing-pad-dialog,.checkpoint-dialog),
.builder-workspace dialog.page-dialog,
#studio-dialog {
  border: 1px solid #c7d3dd;
  border-radius: 20px;
  background: var(--dialog-paper);
  box-shadow: 0 24px 80px #142d4733, 0 4px 16px #142d4712;
  color: var(--dialog-ink);
  max-height: calc(100dvh - 32px);
}
dialog :is(button,input,select,textarea) { font-family: inherit; font-size: 16px; }
dialog [hidden] { display: none !important; }
dialog button { touch-action: manipulation; }
dialog button:active:not(:disabled) { transform: none; }
dialog :is(button,input,select,textarea,summary,a):focus-visible,
dialog:is(.media-library,.section-library,.page-dialog,.image-upload-dialog,.drawing-pad-dialog,.checkpoint-dialog) :is(button,input,select,textarea,summary,a):focus-visible {
  outline: 3px solid var(--dialog-blue);
  outline-offset: 3px;
}
dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.checkpoint-heading) {
  padding: 20px 24px;
  background: var(--dialog-paper);
  border-bottom: 1px solid var(--dialog-line);
  gap: 16px;
}
dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading) > div { min-width: 0; }
dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading) h2,
.builder-workspace .page-dialog-heading h2,
.section-library .page-dialog-heading h2,
.media-library .media-heading h2 {
  color: var(--dialog-ink);
  background: none;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.5px;
  line-height: 1.25;
  margin: 0;
}
dialog :is(.media-heading,.upload-heading,.drawing-heading,.checkpoint-heading) p {
  margin: 0 0 6px;
  color: var(--dialog-muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: 1px;
}
dialog .page-dialog-heading p { margin: 8px 0 0; font-size: 16px; color: var(--dialog-muted); }
dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading) > button,
.builder-workspace .page-dialog-heading > button,
.media-library .media-close,
.checkpoint-dialog .checkpoint-preview-heading > button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #edf2f6;
  color: var(--dialog-ink);
  box-shadow: none;
}
dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading) > button:hover,
.media-library .media-close:hover { background: #e2eaf1; border-color: #c1cfdd; }
dialog :is(.dialog-actions,.upload-actions,.drawing-actions,.page-dialog-footer) { gap: 10px; }
dialog :is(.dialog-actions,.upload-actions,.drawing-actions) button,
dialog.page-dialog button,
dialog.checkpoint-dialog button,
dialog.image-upload-dialog button,
dialog.drawing-pad-dialog button {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: none;
}
dialog :is(.dialog-actions,.upload-actions,.drawing-actions) button { padding: 11px 17px; }
dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore),
.builder-workspace .page-dialog button.primary,
.checkpoint-dialog .checkpoint-restore,
.image-upload-dialog .primary,
.drawing-pad-dialog .primary,
.media-library .media-use {
  background: #3568e6;
  border: 1px solid #3568e6;
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}
dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore):hover:not(:disabled),
.checkpoint-dialog .checkpoint-restore:hover,
.image-upload-dialog .primary:hover:not(:disabled),
.drawing-pad-dialog .primary:hover:not(:disabled),
.media-library .media-use:hover:not(:disabled) { background: #2854c7; border-color: #2854c7; color: #fff; }
dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore,.media-use):disabled {
  background: #e8eef7;
  color: #67788e;
  border-color: #d4deed;
  opacity: 1;
  box-shadow: none;
  cursor: default;
}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) {
  min-height: 48px;
  color: var(--dialog-ink);
  background: #fff;
  border-color: #aebfce;
  border-radius: 10px;
}
dialog :is(input,textarea)::placeholder { color: #607487; opacity: 1; }
dialog :is(.dialog-intro,.page-dialog-tip,.publish-note,.upload-intro,.upload-file-help,.drawing-help,.drawing-stamp-hint,.checkpoint-capacity,.checkpoint-storage,.checkpoint-preview-tip) {
  color: var(--dialog-muted);
  font-size: 16px;
  line-height: 1.5;
}
dialog :is(.new-field,.page-name-label,.drawing-select,.drawing-footer>label,.publish-label) { font-size: 16px; font-weight: 650; }
dialog :is(.project-card,.mission-card) { padding: 18px; border-radius: 12px; border-color: var(--dialog-line); box-shadow: none; }
dialog :is(.project-card,.mission-card) p { font-size: 16px; }
dialog :is(.project-card,.mission-card) strong { margin: 0 0 8px; font-size: 18px; }
dialog .project-card:hover { background: #f0f6ff; border-color: #8bafe3; }
dialog .publish-address { border-radius: 12px; background: #f0f5fc; border-color: var(--dialog-line); }
dialog .publish-status { border-radius: 0 10px 10px 0; }

/* A library is a shelf of pictures: strong previews, quiet labels, clear selection. */
.media-library { width: min(1020px,calc(100vw - 32px)); height: min(880px,calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
.media-library .media-tools { gap: 12px; padding: 18px 24px 16px; }
.media-library .media-tabs { gap: 4px; border-radius: 12px; padding: 4px; background: #eaf0f5; }
.media-library .media-tabs button { min-height: 44px; border-radius: 9px; padding: 8px 15px; color: #425b73; }
.media-library .media-tabs button[aria-pressed=true] { background: #fff; color: #1a56ad; box-shadow: 0 1px 3px #203b5914; }
.media-library .media-search { gap: 8px; flex-basis: 190px; min-width: 150px; font-size: 16px; }
.media-library .media-search>span { display: none; }
.media-library .media-search input { height: 48px; padding: 10px 14px; border-radius: 12px; border-color: #aebfce; }
.media-library :is(.media-upload,.media-draw) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 13px;
  color: #1a56ad;
  background: #f0f6ff;
  border: 1px solid #c1d4ed;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
}
.media-library :is(.media-upload,.media-draw):hover:not(:disabled) { background: #e5efff; border-color: #87ace0; }
.media-library .media-categories { gap: 8px; padding: 0 24px 16px; max-height: 116px; }
.media-library .media-categories button { min-height: 44px; padding: 8px 14px; font-size: 16px; border-radius: 10px; border-color: #d2dce6; background: #fff; color: #425b73; }
.media-library .media-categories button[aria-pressed=true] { color: #fff; background: var(--dialog-blue); border-color: var(--dialog-blue); box-shadow: none; }
.media-library .media-results { padding: 20px 24px; gap: 16px; border-color: var(--dialog-line); background: #f4f6f7; scrollbar-gutter: stable; }
.media-library .media-picture { min-height: 200px; padding: 10px; border: 2px solid #dde5ed; border-radius: 14px; background: #fff; box-shadow: none; }
.media-library .media-picture>span { position: relative; background: #f7f8f8; border-radius: 8px; height: 136px; margin-bottom: 10px; }
.media-library .media-picture strong { color: var(--dialog-ink); font-size: 16px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.media-library .media-picture:hover { border-color: #9abbe7; background: #fff; }
.media-library .media-picture[aria-pressed=true] { border-color: var(--dialog-blue); background: #edf4ff; box-shadow: none; }
.media-library .media-selected-mark {
  display: none;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  place-items: center;
  background: var(--dialog-blue);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px #203b591a;
}
.media-library [data-media][aria-pressed=true] .media-selected-mark { display: grid; }
.media-library .media-selected-mark svg { width: 16px; height: 16px; }
.media-library .media-sound { border: 2px solid #dde5ed; border-radius: 12px; box-shadow: none; padding: 8px; gap: 10px; }
.media-library .media-sound:has([aria-pressed=true]) { border-color: var(--dialog-blue); background: #edf4ff; }
.media-library .media-sound>button[data-media] { position: relative; min-height: 64px; padding: 7px 36px 7px 4px; border-radius: 8px; }
.media-library .media-sound>button[data-media][aria-pressed=true] { background: transparent; }
.media-library .media-sound strong { font-size: 16px; color: var(--dialog-ink); }
.media-library .media-sound small { color: var(--dialog-muted); font-size: 14px; }
.media-library .media-sound .media-selected-mark { top: 50%; right: 1px; transform: translateY(-50%); }
.media-library .sound-listen { display: grid; place-items: center; height: 48px; width: 48px; border-radius: 50%; background: #eaf5ef; color: #18794e; border-color: #c3ddcf; }
.media-library .media-pagination { gap: 16px; padding: 4px 24px; border-top: 1px solid var(--dialog-line); background: #f4f6f7; color: var(--dialog-muted); font-size: 14px; }
.media-library .media-pagination button { padding: 8px 12px; font-size: 16px; color: #1a56ad; border-radius: 10px; }
.media-library .media-pagination button:disabled { color: #768493; }
.media-library .media-pagination button:hover:not(:disabled) { background: #e5edf6; }
.media-library .media-footer { padding: 16px 24px; background: var(--dialog-paper); border-top-color: var(--dialog-line); gap: 20px; }
.media-library .media-selection { font-size: 16px; color: var(--dialog-ink); }
.media-library .media-selection strong { font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.media-library .media-selection audio { width: 300px; height: 44px; }
.media-library .media-use { min-height: 48px; border-radius: 12px; padding: 12px 20px; }
.media-library .media-error { font-size: 16px; color: #9f3737; }
.media-library .media-empty { display: grid; justify-items: center; align-content: center; gap: 10px; margin: 0; padding: 36px 16px; min-height: 220px; color: var(--dialog-muted); font-size: 16px; }
.media-library .media-empty>svg { width: 40px; height: 40px; color: #6b8db6; }
.media-library .media-empty strong { font-size: 20px; font-weight: 700; color: var(--dialog-ink); }
.media-library .media-empty p { max-width: 40ch; margin: 0; }
.media-library .media-empty button { margin-top: 6px; border: 1px solid #bfd0e7; padding: 10px 16px; border-radius: 10px; background: #fff; color: #1a56ad; }

/* Starter layouts retain their helpful miniatures without decorative tape. */
.section-library .section-template-grid { gap: 16px; padding: 24px; background: #f4f6f7; }
.section-library .section-template-grid>button { border-radius: 14px; padding: 10px 10px 18px; border: 2px solid #dce4eb; background: #fff; box-shadow: none; }
.section-library .section-template-grid>button::before { content: none; }
.section-library .section-template-grid>button:is(:hover,:focus-visible) { background: #fff; border-color: #7fa6df; box-shadow: none; }
.section-library .section-miniature { margin: 0; height: 140px; border: 0; border-radius: 9px; }
.section-library .section-template-grid strong { margin: 16px 6px 7px; font-size: 18px; font-weight: 700; color: var(--dialog-ink); }
.section-library .template-description { margin: 0 6px; color: var(--dialog-muted); font-size: 16px; line-height: 1.5; }
.section-library .section-library-foot { padding: 16px 24px; background: var(--dialog-paper); color: var(--dialog-muted); border-color: var(--dialog-line); font-size: 16px; }
.page-dialog .page-start label,
.builder-workspace .page-dialog .page-start label { border-radius: 10px; box-shadow: none; border-color: var(--dialog-line); background: #fff; }
.page-dialog .page-start label:has(input:checked),
.builder-workspace .page-dialog .page-start label:has(input:checked) { background: #edf4ff; border-color: var(--dialog-blue); }
.page-dialog .page-dialog-footer { flex-wrap: wrap; border-color: var(--dialog-line); }

/* Drawing stays spacious. Active tools have shape and text, not only a color. */
.drawing-pad-dialog { width: min(1000px,calc(100vw - 32px)); padding: 24px; }
.drawing-pad-dialog .drawing-toolbar { margin-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--dialog-line); }
.drawing-pad-dialog :is(.drawing-tools,.drawing-history,.drawing-stamps) { gap: 8px; }
.drawing-pad-dialog :is(.drawing-tools,.drawing-history,.drawing-stamps) button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border-color: #c8d4e0; padding: 9px 13px; color: var(--dialog-ink); }
.drawing-pad-dialog :is(.drawing-tools,.drawing-stamps) button[aria-pressed=true] { color: #1a56ad; background: #edf4ff; border-color: var(--dialog-blue); box-shadow: inset 0 -3px var(--dialog-blue); }
.drawing-pad-dialog button:is(:disabled,[aria-disabled=true]) { opacity: .5; }
.drawing-pad-dialog .drawing-options { margin: 16px 0; gap: 16px; }
.drawing-pad-dialog .drawing-colors { gap: 4px; }
.drawing-pad-dialog .drawing-colors button { position: relative; width: 44px; height: 44px; border-radius: 50%; padding: 5px; border: 2px solid transparent; background: transparent; }
.drawing-pad-dialog .drawing-colors button span { width: 30px; height: 30px; }
.drawing-pad-dialog .drawing-colors button[aria-pressed=true] { border-color: var(--dialog-blue); background: #fff; box-shadow: none; }
.drawing-pad-dialog .drawing-colors button[aria-pressed=true]::after { content: ''; position: absolute; width: 6px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); top: 12px; left: 17px; filter: drop-shadow(0 1px 1px #132b46); }
.drawing-pad-dialog .drawing-select { gap: 6px; font-size: 16px; }
.drawing-pad-dialog .drawing-select select { min-height: 44px; height: 44px; }
.drawing-pad-dialog .drawing-stamps { margin-bottom: 18px; }
.drawing-pad-dialog .drawing-stamp-hint { margin-left: auto; font-size: 14px; }
.drawing-pad-dialog .drawing-surface { border-color: #c5cdd3; border-radius: 10px; box-shadow: 0 3px 12px #203b590a; overflow: hidden; }
.drawing-pad-dialog .drawing-surface:has(canvas:focus-visible) { outline: 3px solid var(--dialog-blue); outline-offset: 3px; }
.drawing-pad-dialog .drawing-surface canvas { border-radius: 9px; }
.drawing-pad-dialog .drawing-help { margin: 14px 0 8px; font-size: 14px; }
.drawing-pad-dialog .drawing-status { margin: 0 0 18px; color: #335574; font-size: 16px; }
.drawing-pad-dialog .drawing-footer { padding-top: 18px; border-top: 1px solid var(--dialog-line); }
.drawing-pad-dialog .drawing-footer>label { gap: 7px; font-size: 16px; }
.drawing-pad-dialog .drawing-footer input { width: 280px; }
.image-upload-dialog { padding: 24px; }
.image-upload-dialog .upload-heading { padding-bottom: 20px; border-bottom: 1px solid var(--dialog-line); }
.image-upload-dialog .upload-preview { background: #f2f5f6; border: 1px solid #d5dfe7; border-radius: 12px; }
.image-upload-dialog .upload-shapes label { border-radius: 10px; border-color: #c8d4e0; }
.image-upload-dialog .upload-shapes label:has(input:checked) { background: #edf4ff; border-color: var(--dialog-blue); }
.image-upload-dialog .upload-actions { padding-top: 18px; border-top: 1px solid var(--dialog-line); }

/* Saved ideas read as a clear list; destructive actions stay secondary. */
.checkpoint-dialog .checkpoint-save { padding: 18px; border: 1px solid #d2e0ed; border-radius: 14px; background: #f1f6fc; }
.checkpoint-dialog .checkpoint-capacity { margin: 10px 0 0; font-size: 14px; }
.checkpoint-dialog .checkpoint-message { margin: 12px 0; min-height: 24px; font-size: 16px; }
.checkpoint-dialog :is(.checkpoint-card,.checkpoint-empty) { padding: 20px; border: 1px solid var(--dialog-line); border-radius: 14px; background: #fff; box-shadow: none; }
.checkpoint-dialog .checkpoint-card h3 { color: var(--dialog-ink); font-size: 20px; margin: 0 0 6px; }
.checkpoint-dialog .checkpoint-card.is-previewing { border-color: var(--dialog-blue); background: #f1f6ff; }
.checkpoint-dialog .checkpoint-card [data-checkpoint-preview][aria-expanded=true] { background: #edf4ff; color: #1a56ad; border-color: var(--dialog-blue); }
.checkpoint-dialog .checkpoint-card>p { color: var(--dialog-muted); font-size: 16px; margin: 8px 0 16px; }
.checkpoint-dialog .checkpoint-card time { font-size: 14px; color: var(--dialog-muted); }
.checkpoint-dialog .checkpoint-actions { gap: 8px; }
.checkpoint-dialog .checkpoint-remove { margin-left: auto; color: #995454; border-color: transparent; background: transparent; }
.checkpoint-dialog .checkpoint-confirm { border-top-color: var(--dialog-line); padding-top: 14px; }
.checkpoint-dialog .checkpoint-confirm p { font-size: 16px; }
.checkpoint-dialog .checkpoint-empty { background: #f5f8fb; }
.checkpoint-dialog .checkpoint-empty strong { font-size: 18px; }
.checkpoint-dialog .checkpoint-empty p { margin-bottom: 0; color: var(--dialog-muted); }
.checkpoint-dialog .checkpoint-preview { border-radius: 14px; border-color: #bdcede; }
.checkpoint-dialog .checkpoint-preview-heading { padding: 14px; gap: 10px; background: #eff5fc; }
.checkpoint-dialog .checkpoint-preview-heading label { font-size: 16px; }
.checkpoint-dialog .checkpoint-preview-detail { padding: 12px 14px; font-size: 14px; }
.checkpoint-dialog .checkpoint-preview-tip { padding: 12px 14px; font-size: 16px; }
.checkpoint-dialog .checkpoint-storage { margin-top: 22px; font-size: 14px; }

@media (max-width: 800px) {
  .media-library .media-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .media-library .media-tabs { justify-self: start; }
  .media-library .media-search { min-width: 0; }
  .media-library .media-results { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .media-library .media-results.sound-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  dialog:is(.media-library,.section-library,.page-dialog,.image-upload-dialog,.drawing-pad-dialog,.checkpoint-dialog),
  .builder-workspace dialog.page-dialog,
  #studio-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.checkpoint-heading) { padding: 16px; }
  dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading) h2,
  .builder-workspace .page-dialog-heading h2,
  .section-library .page-dialog-heading h2,
  .media-library .media-heading h2 { font-size: 23px; }
  dialog :is(.dialog-actions,.page-dialog-footer) { flex-wrap: wrap; }
  dialog :is(.dialog-actions,.page-dialog-footer) button { flex: 1 1 auto; }
  dialog :is(.projects-grid,.mission-grid) { grid-template-columns: 1fr; }
  .media-library { height: calc(100dvh - 16px); }
  .media-library .media-tools { padding: 12px 16px; }
  .media-library .media-tabs { grid-column: 1/-1; }
  .media-library .media-search { grid-column: 1/-1; }
  .media-library :is(.media-upload,.media-draw) { padding: 10px 8px; white-space: normal; }
  .media-library .media-categories { flex-wrap: nowrap; max-height: none; overflow-x: auto; padding: 0 16px 12px; gap: 8px; }
  .media-library .media-categories button { flex-shrink: 0; }
  .media-library .media-results { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 16px; gap: 12px; }
  .media-library .media-picture { min-height: 178px; padding: 8px; }
  .media-library .media-picture>span { height: 112px; }
  .media-library .media-picture img { max-height: 106px; }
  .media-library .media-results.sound-results { grid-template-columns: 1fr; }
  .media-library .media-pagination { gap: 8px; padding: 2px 12px; }
  .media-library .media-footer { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 16px; }
  .media-library .media-selection { font-size: 16px; }
  .media-library .media-selection audio { width: 100%; }
  .media-library .media-selection strong { font-size: 16px; }
  .media-library .media-use { width: 100%; }
  .media-library .media-empty { min-height: 180px; padding: 24px 8px; }
  .section-library .section-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
  .section-library .section-miniature { height: 106px; padding: 10px; }
  .section-library .section-template-grid strong { margin: 12px 3px 6px; font-size: 17px; }
  .section-library .template-description { margin: 0 3px; font-size: 16px; }
  .section-library .section-library-foot { padding: 16px; }
  .drawing-pad-dialog,.image-upload-dialog { padding: 16px; }
  .drawing-pad-dialog .drawing-toolbar { margin-top: 18px; gap: 12px; }
  .drawing-pad-dialog :is(.drawing-tools,.drawing-history) { width: 100%; }
  .drawing-pad-dialog :is(.drawing-tools,.drawing-history) button { flex: 1; padding: 9px 8px; gap: 5px; }
  .drawing-pad-dialog .drawing-options { gap: 12px; }
  .drawing-pad-dialog .drawing-colors { width: 100%; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; }
  .drawing-pad-dialog .drawing-select { flex: 1; }
  .drawing-pad-dialog .drawing-select select { width: 100%; }
  .drawing-pad-dialog .drawing-stamp-hint { width: 100%; margin: 2px 0 0; }
  .drawing-pad-dialog .drawing-help { font-size: 14px; }
  .drawing-pad-dialog .drawing-footer input { width: 100%; }
  .drawing-pad-dialog .drawing-actions { width: 100%; }
  .drawing-pad-dialog .drawing-actions button { flex: 1; }
  .checkpoint-dialog .checkpoint-save { padding: 16px; }
  .checkpoint-dialog .checkpoint-save button { align-self: stretch; }
  .checkpoint-dialog :is(.checkpoint-card,.checkpoint-empty) { padding: 16px; }
}
@media (max-width: 420px) {
  .drawing-pad-dialog .drawing-colors { grid-template-columns: repeat(4,44px); gap: 4px 10px; }
}
@media (max-width: 380px) {
  .section-library .section-template-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) and (max-height: 680px) {
  .media-library[open] { display: block; height: auto; overflow: auto; }
  .media-library .media-results { height: 240px; min-height: 180px; }
  .media-library .media-footer { position: sticky; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  dialog *,dialog *::before,dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Page forms share the flat RoCode actions and bounded dialog structure. */
html:root dialog.page-dialog {
  --page-control:max(44px,var(--editor-control,44px));
  box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);
  margin:auto;padding:0;overflow:hidden;border:1px solid #b9cddd;border-radius:12px;
  background:#fff;box-shadow:0 24px 80px #17355235;font:16px/1.5 var(--rocode-font-family);color:#294b61;
}
html:root dialog.page-dialog[open] { display:flex;flex-direction:column; }
html:root dialog.page-dialog .page-dialog-heading { flex:none;align-items:center;gap:16px;padding:16px 20px;background:#f0f8ff;border-bottom:1px solid #d2e5ef; }
html:root dialog.page-dialog .page-dialog-heading h2 { margin:0;color:#294b61;font-size:24px;line-height:1.3;letter-spacing:-.4px; }
html:root dialog.page-dialog button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--page-control);padding:9px 14px;border:1px solid #4f80ff;border-radius:6px;background:#fff;color:#245ac2;box-shadow:none;font:650 15px/1.4 var(--rocode-font-family); }
html:root dialog.page-dialog button:hover:not(:disabled) { background:#eef4ff;border-color:#3568e6;color:#245ac2; }
html:root dialog.page-dialog button:disabled { opacity:1;color:#7e8d9d;border-color:#d4deed;background:#f7f9fc;cursor:default; }
html:root dialog.page-dialog .ui-icon { width:18px;height:18px;flex:none; }
html:root dialog.page-dialog .page-dialog-heading>button { width:var(--page-control);height:var(--page-control);min-width:var(--page-control);padding:0;border-color:transparent;background:transparent;color:#52708a; }
html:root dialog.page-dialog form { display:flex;flex:1 1 auto;flex-direction:column;min-height:0;padding:0;overflow:hidden; }
html:root dialog.page-dialog .page-dialog-body { display:flex;flex-direction:column;gap:20px;min-height:0;padding:20px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable; }
html:root dialog.page-dialog .page-dialog-body>* { flex:none; }
html:root dialog.page-dialog .page-name-label { font-size:15px;line-height:1.4;font-weight:650;min-width:0; }
html:root dialog.page-dialog .page-name-label input { box-sizing:border-box;min-width:0;width:100%;height:var(--page-control);min-height:var(--page-control);margin-top:8px;padding:9px 12px;border:1px solid #b7cddd;border-radius:6px;background:#fff;color:#294b61;font:16px/1.4 var(--rocode-font-family); }
html:root dialog.page-dialog .page-menu-choice { display:flex;align-items:center;gap:10px;min-height:var(--page-control);font-size:15px;font-weight:500;cursor:pointer; }
html:root dialog.page-dialog .page-menu-choice input { width:20px;height:20px;margin:0;flex:none;accent-color:#3568e6; }
html:root dialog.page-dialog .page-dialog-tip { margin:4px 0 0 30px;color:#5f7482;font-size:13px;line-height:1.5; }
html:root dialog.page-dialog .page-order-setting { min-width:0;margin:0;padding:0;border:0; }
html:root dialog.page-dialog .page-order-setting legend { display:flex;align-items:center;gap:12px;width:100%;padding:0;margin-bottom:8px;font-size:15px;font-weight:650; }
html:root dialog.page-dialog [data-page-position] { margin-left:auto;color:#5f7482;font-size:13px;font-weight:500; }
html:root dialog.page-dialog .page-order { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
html:root dialog.page-dialog .page-order button { min-width:0;padding-inline:8px;font-size:14px; }
html:root dialog.page-dialog .page-remove-setting { border-top:1px solid #d2e5ef;padding-top:16px; }
html:root dialog.page-dialog [data-remove] { color:#a23739;border-color:#db9b9e;background:#fff; }
html:root dialog.page-dialog [data-remove]:hover:not(:disabled) { background:#fff2f2;border-color:#b8595f;color:#a23739; }
html:root dialog.page-dialog [data-remove]:disabled { color:#7e8d9d;border-color:#d4deed;background:#f7f9fc; }
html:root dialog.page-dialog .page-dialog-footer { display:flex;flex:none;justify-content:flex-end;align-items:center;gap:10px;margin:0;padding:14px 20px;border-top:1px solid #d2e5ef;background:#fff; }
html:root dialog.page-dialog .page-dialog-footer button { min-width:96px;min-height:var(--page-control); }
html:root dialog.page-dialog button.primary { border-color:#3568e6;background:#3568e6;color:#fff; }
html:root dialog.page-dialog button.primary:hover:not(:disabled) { border-color:#2854c7;background:#2854c7;color:#fff; }
html:root dialog.page-dialog .page-start { margin:0;padding:0;gap:10px; }
html:root dialog.page-dialog .page-start legend { padding:0;margin-bottom:8px;font-size:15px; }
html:root dialog.page-dialog .page-start label { min-width:0;min-height:var(--page-control);padding:10px;border-radius:6px;font-size:15px; }
html:root dialog.page-dialog .page-start label:has(input:checked) { background:#eef4ff;border-color:#3568e6; }
html:root dialog.page-dialog .page-start input { accent-color:#3568e6; }
html:root dialog.page-dialog .page-template-browse { width:100%;min-height:var(--page-control);margin:0; }
html:root dialog.page-dialog .page-dialog-error { margin:0; }
@media(max-width:420px) {
  html:root dialog.page-dialog { width:calc(100vw - 24px);max-height:calc(100dvh - 24px); }
  html:root dialog.page-dialog .page-dialog-heading,html:root dialog.page-dialog .page-dialog-body { padding:16px; }
  html:root dialog.page-dialog .page-dialog-heading h2 { font-size:22px; }
  html:root dialog.page-dialog .page-dialog-footer { padding:12px 16px; }
  html:root dialog.page-dialog .page-dialog-footer button { padding-inline:10px;font-size:14px; }
}