/* Video to GIF — tool-only styles. Shared rules stay in style.css. */

/* Staged reveal (mechanic in style.css). */
main[data-stage="empty"] .gif-studio { display: none; }

.studio.gif-studio {
  grid-template-areas: "side stage ext";
  grid-template-columns: 290px minmax(0, 1fr) 310px;
  align-items: start;
}
.studio .tile.side { grid-area: side; }
.studio .tile.stage { grid-area: stage; }
.studio .tile.ext { grid-area: ext; }

#preview { width: 100%; height: auto; display: block; border-radius: 10px; background: #000; max-height: 430px; }
#loadErr { color: var(--warn); font-weight: 600; }

/* Selection track */
.track {
  position: relative; height: 30px; margin-top: 10px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  touch-action: none; cursor: pointer;
}
.track-win {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent); border-top: 1px solid var(--accent-border); border-bottom: 1px solid var(--accent-border);
}
.track-handle {
  position: absolute; top: -3px; width: 14px; height: 34px; margin-left: -7px;
  background: var(--brand); border-radius: 4px; cursor: ew-resize; z-index: 2;
}
.track-handle::after {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(255, 255, 255, .65); border-radius: 1px;
}

.segrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip-btn {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 650; cursor: pointer;
}
.chip-btn.on { border-color: var(--brand); background: var(--accent); color: var(--brand); }
.lab input[type="number"] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); margin-top: 3px;
}
.lab.grow { flex: 1; }
#loopSel {
  width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink);
}
.estline { font-size: 12.5px; color: var(--muted); min-height: 16px; margin: 6px 0; }
.warnline { color: var(--warn); font-weight: 650; }
#resultImg { width: 100%; height: auto; border-radius: 8px; display: block; margin-bottom: 8px; background: var(--bg-soft); }

@media (max-width: 1100px) {
  .studio.gif-studio { grid-template-areas: "stage" "side" "ext"; grid-template-columns: minmax(0, 1fr); }
}