/* Editing and sound controls for the Pix2move creator. */
button, input, select, textarea { font: inherit; }
.format-preview { display: flex; gap: 8px; margin: -3px 0 14px; }
.format-preview button { flex: 1; min-height: 35px; padding: 7px 9px; border: 1px solid #35444c; border-radius: 8px; background: #17222a; color: #b9c7cc; font-size: 11px; font-weight: 700; }
.format-preview button.active { border-color: #ff3cac; background: #372237; color: #fff; }
.export-results { display: grid; gap: 8px; margin-top: 12px; }
.export-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid #3c4952; border-radius: 9px; padding: 11px 12px; background: #17222a; }
.export-result strong { display: block; color: #f4f8f7; font-size: 12px; }
.export-result small { display: block; color: #aebfc3; margin-top: 3px; font-size: 10px; }
.export-result a { flex: none; border-radius: 7px; padding: 9px 12px; background: #ff3cac; color: #101015; font-size: 11px; font-weight: 800; text-decoration: none; }
.export-result a:hover { background: #ff76c4; }
.export-result video { grid-column: 1 / -1; width: 100%; max-height: 200px; background: #070b10; border-radius: 6px; }
.stage-shell.is-landscape { min-height: 0; padding: 18px; }
.stage-shell.is-landscape canvas { width: 100%; height: auto; max-width: 100%; max-height: 68vh; aspect-ratio: 16/9; }
.panel .text-area {
  display: block;
  width: 100%;
  min-height: 86px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #35444c;
  border-radius: 10px;
  background: #17212a;
  color: #f5f8f6;
  font-size: 12px;
  line-height: 1.5;
}
.panel .text-area:focus, .photo-caption input:focus {
  outline: none;
  border-color: #ff3cac;
  box-shadow: 0 0 0 3px #ff3cac34;
}
.suggestion-button { margin-top: 10px; }
.photo-item { flex-wrap: wrap; }
.photo-workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 7px; }
.photo-workflow-actions button { flex: 1 1 135px; min-height: 40px; height: auto; padding: 7px; }
.photo-meta { display: flex; align-items: center; gap: 8px; width: 100%; }
.photo-meta select { flex: 1; min-width: 0; background: #101a22; color: #f5f8f6; border: 1px solid #35444c; border-radius: 7px; padding: 8px; }
.photo-meta label { color: #d7e4e7; font-size: 10px; white-space: nowrap; }
.photo-item.is-excluded { opacity: .57; }
.photo-clean { margin-left: auto; min-height: 32px; padding: 5px 9px; }
.cleanup-dialog { width: min(94vw, 1060px); max-height: 94vh; overflow: auto; border: 1px solid #47515d; border-radius: 16px; background: #0b141c; color: #f5f8f6; box-shadow: 0 24px 90px #000b; }
.cleanup-dialog::backdrop { background: #02060bdd; }
.cleanup-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cleanup-head h2 { margin: 0 0 10px; }
.cleanup-dialog canvas { display: block; width: 100%; height: auto; max-height: 54vh; object-fit: contain; margin: 15px 0; border-radius: 9px; cursor: crosshair; touch-action: none; }
.cleanup-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cleanup-tools button { flex: 1 1 140px; height: auto; min-height: 38px; padding: 7px; }
.cleanup-sliders { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.cleanup-sliders label { display: grid; gap: 6px; font-size: 11px; color: #b9c7cc; }
.cleanup-sliders input { width: 100%; accent-color: #ff3cac; }
@media (max-width: 650px) { .cleanup-sliders { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 430px) { .format-preview button { font-size: 10px; } .stage-shell.is-landscape { padding: 10px; } .stage-shell.is-landscape .stage-hint { bottom: 14px; } }
.photo-caption { display: block; flex-basis: 100%; margin-top: 3px; }
.photo-caption span { display: block; margin: 0 0 5px; color: #aebdc6; font-size: 10px; font-weight: 700; }
.photo-caption input[type=text] {
  width: 100%;
  height: 38px;
  border: 1px solid #35444c;
  border-radius: 8px;
  background: #101a22;
  color: #f5f8f6;
  font-size: 11px;
  padding: 0 10px;
}
.sound-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sound-actions .secondary, .sound-actions .upload-inline {
  flex: 1 1 110px;
  min-height: 43px;
  height: auto;
  margin: 0;
  padding: 10px 8px;
  display: grid;
  place-items: center;
  line-height: 1.3;
}
.sound-file { min-height: 14px; overflow-wrap: anywhere; }
.volume-label { margin-top: 15px; }
.volume-range { display: block; width: 100%; accent-color: #ff3cac; }
.voice-upload { margin-top: 9px; }
.export-section #downloadImage { margin-top: 21px; }
.export-section #exportVideo { margin-top: 15px; }
.right-panel .export-section { min-width: 0; }
@media (max-width: 1180px) {
  .right-panel:has(#composerSection.hidden):has(#selectionPanel.hidden) { grid-template-columns: 1fr; }
}