/* Студия: превью, плеер, таймлайн, субтитры, якоря баннера.
   Здесь только то, что встречается на одной этой вкладке. */

.studio { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.studio-left { flex: 0 1 310px; min-width: 250px; display: flex; flex-direction: column; gap: 12px; }
.studio-right { flex: 1 1 430px; min-width: 0; display: flex; flex-direction: column; }
.studio-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Строка источника ────────────────────────────────────────────────────── */

.source-field {
  flex: 1 1 340px;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--l22);
  background: var(--panel);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.source-tag { color: var(--l35); }

.source-status {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--l45);
}

/* ── Превью 9:16 ─────────────────────────────────────────────────────────── */

.preview {
  aspect-ratio: 9 / 16;
  border: 1px solid var(--l18);
  /* Диагональная штриховка — заглушка вместо кадра. */
  background: repeating-linear-gradient(135deg, #131311 0 8px, #0E0E0C 8px 16px);
  position: relative;
  overflow: hidden;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 223, 205, 0.28);
}

/* Затемнение областей, которые в кадр не войдут. */
.preview-mask { position: absolute; left: 0; right: 0; height: 5%; background: rgba(10, 10, 9, 0.66); }
.preview-mask.is-top { top: 0; }
.preview-mask.is-bottom { bottom: 0; }

.preview-crop {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5%;
  bottom: 5%;
  border: 1px solid rgba(232, 223, 205, 0.85);
}

.preview-handle { position: absolute; width: 9px; height: 9px; background: var(--fg); }
.preview-handle.is-tl { left: -4px; top: -4px; cursor: nwse-resize; }
.preview-handle.is-tr { right: -4px; top: -4px; cursor: nesw-resize; }
.preview-handle.is-bl { left: -4px; bottom: -4px; cursor: nesw-resize; }
.preview-handle.is-br { right: -4px; bottom: -4px; cursor: nwse-resize; }

/* Направляющие: треть кадра и центр. */
.preview-guide-h { position: absolute; left: 0; right: 0; top: 18.5%; border-top: 1px dashed var(--l40); }
.preview-guide-v { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--l40); }

.preview-banner {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 12%;
  border: 1px solid var(--fg);
  background: rgba(232, 223, 205, 0.1);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l75);
  cursor: move;
}
.preview-banner-tag {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--l60);
  white-space: nowrap;
}

.preview-caption-wrap { position: absolute; left: 8%; right: 8%; bottom: 26%; display: flex; justify-content: center; }
.preview-caption {
  border: 1px dashed var(--l40);
  padding: 6px 10px;
  background: rgba(10, 10, 9, 0.6);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  cursor: ns-resize;
}
.preview-caption mark { background: var(--fg); color: var(--bg); padding: 0 3px; }

.preview-label { position: absolute; left: 9px; bottom: 9px; font-family: var(--mono); font-size: 10.5px; color: var(--l40); }

/* ── Плеер ───────────────────────────────────────────────────────────────── */

.player { display: flex; align-items: center; gap: 12px; }
.player-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--l30);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.player-btn:hover { background: rgba(232, 223, 205, 0.1); }
.player-play {
  width: 0;
  height: 0;
  border-left: 9px solid var(--fg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
}
.player-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.player-bar { height: 3px; background: var(--l16); position: relative; }
.player-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg); }
.player-bar-knob { position: absolute; top: -3px; width: 2px; height: 9px; background: var(--fg); }
.player-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--l45);
}

/* ── До / После ──────────────────────────────────────────────────────────── */

.compare { display: flex; gap: 8px; }
.compare-btn {
  flex: 1;
  height: 32px;
  border: 1px solid var(--l20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  color: var(--l60);
}
.compare-btn:hover { background: rgba(232, 223, 205, 0.08); color: var(--fg); }
.compare-btn.is-active {
  background: rgba(232, 223, 205, 0.12);
  border-color: var(--l40);
  color: var(--fg);
}

/* ── Якоря баннера ───────────────────────────────────────────────────────── */

.anchor-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; }
.anchor { height: 26px; border: 1px solid var(--l18); cursor: pointer; }
.anchor:hover { background: rgba(232, 223, 205, 0.12); }
.anchor.is-active { border-color: var(--fg); background: rgba(232, 223, 205, 0.25); }

.anchor-info {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--l50);
}
.anchor-info > div { display: flex; justify-content: space-between; gap: 8px; }
.anchor-value { color: var(--fg); }

/* ── Вставки баннера ─────────────────────────────────────────────────────── */

.insert-row {
  display: grid;
  grid-template-columns: 18px 76px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--l07);
}
.insert-row:first-child { border-top: none; }

/* Выбранная вставка: её место и отступ правятся полями выше. */
.insert-row.is-active .insert-mark { background: var(--fg); color: var(--bg); }

.insert-mark {
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  border: 1px solid var(--l25);
  color: var(--l50);
  line-height: 16px;
}

.insert-time {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--l20);
  background: var(--panel);
  padding: 3px 6px;
  text-align: center;
}

.insert-where { font-family: var(--mono); font-size: 12px; color: var(--l45); }

.insert-drop {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--l30);
  cursor: pointer;
  text-align: center;
}
.insert-drop:hover { color: var(--err); }

/* ── Обрезка по времени ──────────────────────────────────────────────────── */

.timeline {
  height: 38px;
  border: 1px solid var(--l16);
  /* Полоски — условная звуковая дорожка. */
  background: repeating-linear-gradient(90deg, #16160F 0 3px, #101008 3px 6px);
  position: relative;
}
.timeline-mask { position: absolute; top: 0; bottom: 0; background: rgba(10, 10, 9, 0.74); }
.timeline-handle { position: absolute; top: -1px; bottom: -1px; width: 8px; background: var(--fg); cursor: ew-resize; }

.time-tag { font-family: var(--mono); font-size: 11px; color: var(--l40); }
.time-box {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--l20);
  background: var(--panel);
  padding: 3px 9px;
}

/* ── Наглядный просмотр ──────────────────────────────────────────────────── */

.page-preview { max-width: 1240px; }

/* Кадр держится наверху при прокрутке: ползунок внизу, а смотреть надо на
   картинку — иначе эффекта не видно вовсе. */
.preview-stage {
  position: sticky;
  top: 52px;
  z-index: 5;
  background: var(--bg);
  border: 1px solid var(--l14);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-pair { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Кадры посередине, настройки кадра, подложки и баннера — по бокам: там всё
   равно пусто, а крутить их удобнее, не отводя глаз от кадра. */
.preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.preview-layout .preview-pair { flex-wrap: nowrap; }
.preview-layout .preview-shot { flex: 0 1 270px; }
.preview-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.preview-side > .card { border-top: 1px solid var(--l14); }

/* На узком экране бокам места нет: кадры сверху, настройки под ними. И
   кадр больше не держим прилипшим — вместе с настройками он выше экрана, и
   до ручек было бы не долистать. */
@media (max-width: 1100px) {
  .preview-layout { grid-template-columns: minmax(0, 1fr); }
  .preview-layout .preview-pair { order: -1; flex-wrap: wrap; }
  .preview-stage.has-sides { position: static; }
}

.preview-shot {
  position: relative;
  margin: 0;
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-shot img {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border: 1px solid var(--l18);
  background: #0E0E0C;
  display: block;
}
.preview-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l40);
  text-align: center;
}
.preview-spinner {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--fg);
  padding: 2px 7px;
}

.preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.preview-note { min-height: 15px; }

/* Ползунок времени — единственный обычный input[type=range] в панели:
   у него ход по всей длине, а не по безопасному диапазону. */
.preview-time {
  flex: 1 1 200px;
  min-width: 140px;
  appearance: none;
  height: 3px;
  background: var(--l16);
  outline: none;
  cursor: pointer;
}
.preview-time::-webkit-slider-thumb {
  appearance: none;
  width: 3px;
  height: 11px;
  background: var(--fg);
  cursor: pointer;
}
.preview-time::-moz-range-thumb {
  width: 3px;
  height: 11px;
  background: var(--fg);
  border: none;
  border-radius: 0;
}

/* Ручки в несколько колонок: виден весь набор разом, а не одна группа на
   экран. Колонки складываются сами по ширине окна. */
.preview-columns {
  column-width: 340px;
  column-gap: 14px;
}
.preview-columns > .card {
  break-inside: avoid;
  margin-bottom: 14px;
  /* В колоночной раскладке общая граница стопки не нужна: карточки стоят
     раздельно. */
  border-top: 1px solid var(--l14);
}

/* ── Строки субтитров ────────────────────────────────────────────────────── */

.cues { border-top: 1px solid var(--l10); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.cue { display: flex; align-items: center; gap: 10px; }
.cue-time { font-family: var(--mono); font-size: 12px; color: var(--l45); width: 52px; flex: 0 0 auto; }
.cue.is-active .cue-time { color: var(--l70); }
.cue-text {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--l14);
  background: var(--panel);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cue.is-active .cue-text { border-color: var(--l45); text-overflow: clip; }