/* ============================================================
   Foyer — Монтажная (reel-studio). Светлая тёплая бумага журнала,
   терракота только на активном (playhead, выбранный формат, действия).
   Не тёмная NLE-тема, не клон Premiere. Mobile-first, breakpoints вверх.
   ============================================================ */

.reel { display: block; min-width: 0; }
.reel-i { display: inline-flex; }
.reel-i svg { width: 1em; height: 1em; display: block; }

.reel-frame {
  display: flex; flex-direction: column;
  border: var(--rule) solid var(--line-strong); border-radius: 6px;
  background: var(--paper-raise); overflow: hidden;
  color: var(--ink);
}

/* — шапка — */
.reel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 0.85rem; border-bottom: var(--rule) solid var(--line);
  flex-wrap: wrap;
}
.reel-head__title { display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 var(--t-h3)/1 var(--grotesk); letter-spacing: -0.01em; }
.reel-head__title .reel-i { font-size: 1.15rem; color: var(--accent); }
.reel-head__right { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: auto; }

.reel-fmt { display: inline-flex; padding: 0.15rem; gap: 0.15rem;
  border: var(--rule) solid var(--line); border-radius: 999px; background: var(--paper); }
.reel-fmt__btn {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.04em;
  padding: 0.34rem 0.66rem; border: 0; border-radius: 999px;
  background: none; color: var(--ink-faint); cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.reel-fmt__btn:hover { color: var(--ink-soft); }
.reel-fmt__btn.is-on { background: var(--accent-wash); color: var(--accent-deep); }

.reel-save {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.03em;
  color: var(--ink-faint); min-width: 0; white-space: nowrap;
}
.reel-save[data-state="saved"] { color: #6f8f74; }
.reel-save[data-state="error"] { color: var(--accent-deep); }

/* — тело — */
.reel-body { display: flex; flex-direction: column; }

/* верх: бин + превью (mobile: стопка) */
.reel-top { display: flex; flex-direction: column; }

/* превью */
.reel-previewwrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
  padding: 0.9rem 0.85rem 1rem; background: var(--paper-sink);
  border-bottom: var(--rule) solid var(--line);
}
.reel-stage { width: 100%; display: grid; place-items: center; }
.reel-preview {
  width: 100%; max-width: 520px; aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg, oklch(0.235 0.012 60 / 0.02) 0 8px, transparent 8px 16px),
    var(--paper);
  border: var(--rule) solid var(--line-strong); border-radius: 4px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.5);
}
.reel-preview--v { aspect-ratio: 9 / 16; max-width: 260px; }

.reel-transport { display: inline-flex; align-items: center; gap: 0.5rem; }
.reel-tbtn {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: var(--rule) solid var(--line-strong); border-radius: 50%;
  background: var(--paper-raise); color: var(--ink-soft); cursor: pointer;
  font-size: 1.05rem; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.reel-tbtn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.reel-tbtn[data-role="play"] { width: 46px; height: 46px; font-size: 1.25rem; color: var(--ink); }
.reel-tbtn:disabled, .reel-tbtn.is-soon { opacity: 0.4; cursor: not-allowed; }
.reel-tc {
  margin-left: 0.35rem; font: 500 var(--t-small)/1 var(--mono); letter-spacing: 0.06em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* бин */
.reel-bin {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.75rem 0.85rem; border-bottom: var(--rule) solid var(--line);
  background: var(--paper-raise);
}
.reel-bin__head { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); }
.reel-bin__list { min-height: 0; }
.reel-bin__empty { display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.9rem; border: var(--rule) dashed var(--line-strong); border-radius: 4px;
  background: var(--paper); }
.reel-bin__empty p { margin: 0; font: 400 var(--t-small)/1.4 var(--grotesk); color: var(--ink-soft); }
.reel-bin__hint { color: var(--ink-faint) !important; font-size: var(--t-micro) !important; }
.reel-bin__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem; border: var(--rule) solid var(--line-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
  font: 500 var(--t-small)/1 var(--grotesk);
}
.reel-bin__add .reel-i { font-size: 1rem; }

/* — таймлайн — */
.reel-timeline { display: flex; flex-direction: column; }
.reel-tlhead {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.85rem; border-bottom: var(--rule) solid var(--line);
}
.reel-tlhead__t { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); }
.reel-toolbar { display: inline-flex; align-items: center; gap: 0.4rem; }
.reel-toolbar .reel-tbtn { width: 32px; height: 32px; border-radius: 3px; font-size: 0.95rem; }

.reel-zoom { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.35rem; }
.reel-zoom__lab { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-faint); }
.reel-zoom__btn {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: var(--rule) solid var(--line-strong); border-radius: 3px;
  background: var(--paper-raise); color: var(--ink-soft); cursor: pointer;
  font: 500 1rem/1 var(--grotesk);
}
.reel-zoom__btn:hover { color: var(--accent); border-color: var(--accent); }

.reel-tlbody { display: flex; align-items: stretch; background: var(--paper-sink); }

/* колонка ярлыков дорожек — фиксированная слева */
.reel-labels { flex: 0 0 auto; width: 84px; border-right: var(--rule) solid var(--line-strong);
  background: var(--paper-raise); }
.reel-lab {
  display: flex; align-items: center; justify-content: space-between; gap: 0.25rem;
  padding: 0 0.5rem; border-bottom: var(--rule) solid var(--line);
}
.reel-lab--video { height: 46px; }
.reel-lab--audio { height: 34px; }
.reel-lab:last-child { border-bottom: 0; }
.reel-lab__n { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); }
.reel-lab--video .reel-lab__n { color: var(--ink); }
.reel-lab__ics { display: inline-flex; gap: 0.1rem; }
.reel-lab__ic {
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 3px; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 0.85rem; transition: color 0.15s var(--ease);
}
.reel-lab__ic:hover:not(:disabled) { color: var(--ink); }
.reel-lab__ic.is-off { color: var(--accent); }
.reel-lab__ic.is-on { color: var(--accent); }
.reel-lab__ic:disabled { cursor: default; opacity: 0.55; }

/* прокручиваемая область времени */
.reel-tlscroll { position: relative; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; }
.reel-tlinner { position: relative; min-width: 100%; }

.reel-ruler { position: relative; height: 22px; border-bottom: var(--rule) solid var(--line);
  background: var(--paper-raise); cursor: ew-resize; user-select: none; }
.reel-tick { position: absolute; top: 0; bottom: 0; border-left: var(--rule) solid var(--line-strong); }
.reel-tick__t { position: absolute; left: 3px; top: 4px; font: 500 var(--t-micro)/1 var(--mono);
  color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.reel-lanes { position: relative; cursor: ew-resize; }
.reel-lane { position: relative; border-bottom: var(--rule) solid var(--line); }
.reel-lane:last-child { border-bottom: 0; }
.reel-lane--video { height: 46px; background:
  linear-gradient(var(--paper-sink), var(--paper-sink)); }
.reel-lane--audio { height: 34px; background: var(--paper-sink); }
.reel-lane.is-locked { background:
  repeating-linear-gradient(45deg, oklch(0.235 0.012 60 / 0.03) 0 6px, transparent 6px 12px), var(--paper-sink); }
.reel-lane__empty { position: absolute; inset: 0; }

/* playhead — единственная терракотовая вертикаль */
.reel-playhead { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3;
  border-left: 1.5px solid var(--accent); pointer-events: none; }
.reel-playhead::before {
  content: ""; position: absolute; top: -22px; left: -4px; width: 9px; height: 9px;
  background: var(--accent); border-radius: 2px; transform: rotate(45deg);
}
.reel-lanes.is-scrubbing, .reel-ruler.is-scrubbing { cursor: ew-resize; }

/* — инспектор — */
.reel-inspector { border-top: var(--rule) solid var(--line); padding: 0.85rem; background: var(--paper-raise); }
.reel-inspector__empty { display: flex; flex-direction: column; gap: 0.25rem; }
.reel-inspector__h { margin: 0; font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); }
.reel-inspector__p { margin: 0; font: 400 var(--t-small)/1.5 var(--grotesk); color: var(--ink-soft); max-width: 46ch; }

/* только-чтение (гость/просмотр) — прячем управляющие действия */
.reel-frame--ro .reel-bin__add,
.reel-frame--ro .reel-toolbar .reel-tbtn { display: none; }

/* ============================================================
   Широкий экран: бин слева, превью справа; таймлайн во всю ширину.
   ============================================================ */
@media (min-width: 860px) {
  .reel-top { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; }
  .reel-bin { border-bottom: 0; border-right: var(--rule) solid var(--line); }
  .reel-previewwrap { border-bottom: 0; }
  .reel-body { }
  .reel-timeline { border-top: var(--rule) solid var(--line); }
  .reel-labels { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-fmt__btn, .reel-tbtn, .reel-zoom__btn, .reel-lab__ic { transition: none; }
}

/* ============================================================
   «Монтаж» (R1+R2): бин-исходники, клипы, ручки, волна, инспектор.
   ============================================================ */

/* история (undo/redo) в шапке */
.reel-histgrp { display: inline-flex; gap: 0.15rem; margin-right: 0.2rem; }
.reel-hbtn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: var(--rule) solid var(--line-strong); border-radius: 3px; background: var(--paper-raise);
  color: var(--ink-soft); cursor: pointer; font-size: 0.95rem; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); }
.reel-hbtn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.reel-hbtn:disabled { opacity: 0.35; cursor: default; }

/* бин: список исходников */
.reel-file { display: none; }
.reel-src { display: flex; align-items: center; gap: 0.5rem; position: relative;
  padding: 0.5rem 0.55rem; border: var(--rule) solid var(--line); border-radius: 4px;
  background: var(--paper); margin-bottom: 0.4rem; }
.reel-src.is-error { border-color: var(--accent); }
.reel-src__k { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font: 600 var(--t-micro)/1 var(--mono); letter-spacing: 0.02em; border-radius: 3px;
  color: var(--ink-faint); background: var(--paper-sink); border: var(--rule) solid var(--line); }
.reel-src--video .reel-src__k { color: var(--accent-deep); }
.reel-src--audio .reel-src__k { color: #5f7f8e; }
.reel-src__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.reel-src__n { font: 500 var(--t-small)/1.2 var(--grotesk); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-src__m { font: 500 var(--t-micro)/1 var(--mono); color: var(--ink-faint); }
.reel-src__add { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: var(--rule) solid var(--line-strong); border-radius: 50%; background: var(--paper-raise);
  color: var(--ink-soft); cursor: pointer; font-size: 0.95rem; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); }
.reel-src__add:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.reel-src__add:disabled { opacity: 0.4; cursor: default; }
.reel-src__track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); border-radius: 0 0 4px 4px; overflow: hidden; }
.reel-src__bar { display: block; height: 100%; background: var(--accent); transition: width 0.2s var(--ease); }

/* клип на дорожке */
.reel-clip { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; overflow: hidden;
  border: var(--rule) solid var(--line-strong); cursor: grab; user-select: none; touch-action: none;
  display: flex; align-items: center; background: var(--paper-raise); }
.reel-clip.is-drag { cursor: grabbing; z-index: 4; box-shadow: 0 6px 18px oklch(0.235 0.012 60 / 0.18); }
.reel-clip.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); z-index: 3; }
.reel-clip.is-locked { cursor: default; opacity: 0.85; }
.reel-clip--video { background: linear-gradient(180deg, oklch(0.93 0.02 50) 0%, oklch(0.9 0.025 48) 100%); }
.reel-clip--image { background: linear-gradient(180deg, oklch(0.93 0.015 120) 0%, oklch(0.9 0.02 120) 100%); }
.reel-clip--audio { background: oklch(0.94 0.012 230); }
.reel-clip__name { position: relative; z-index: 2; padding: 0 0.4rem; font: 500 var(--t-micro)/1 var(--grotesk);
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.reel-clip__h { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 5; cursor: ew-resize;
  touch-action: none; background: transparent; }
.reel-clip__h::after { content: ""; position: absolute; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: oklch(0.235 0.012 60 / 0.35); }
.reel-clip__h--l { left: 0; } .reel-clip__h--l::after { left: 2px; }
.reel-clip__h--r { right: 0; } .reel-clip__h--r::after { right: 2px; }
.reel-clip.is-sel .reel-clip__h::after { background: var(--accent); }
.reel-clip__fade { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.reel-clip__fade--in { left: 0; background: linear-gradient(90deg, oklch(0.235 0.012 60 / 0.22), transparent); }
.reel-clip__fade--out { right: 0; background: linear-gradient(270deg, oklch(0.235 0.012 60 / 0.22), transparent); }

/* волна */
.reel-wave { position: absolute; inset: 3px 4px; z-index: 1; display: flex; align-items: center; gap: 1px; pointer-events: none; }
.reel-wave--flat { border-top: 1.5px solid oklch(0.5 0.02 230 / 0.5); border-bottom: 1.5px solid oklch(0.5 0.02 230 / 0.5);
  top: 50%; bottom: auto; height: 0; }
.reel-wave__b { flex: 1 1 auto; min-width: 1px; background: oklch(0.5 0.03 230 / 0.55); border-radius: 1px; align-self: center; }

.reel-labspacer { height: 22px; border-bottom: var(--rule) solid var(--line); }
.reel--razor .reel-clip { cursor: crosshair; }

/* инспектор — контролы */
.reel-insp { display: flex; flex-direction: column; gap: 0.7rem; }
.reel-insp__head { display: flex; align-items: center; gap: 0.5rem; }
.reel-insp__k { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-wash); border-radius: 999px; padding: 0.25rem 0.55rem; }
.reel-insp__n { flex: 1 1 auto; min-width: 0; font: 500 var(--t-small)/1.2 var(--grotesk); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-insp__x { flex: none; width: 26px; height: 26px; border: 0; background: none; color: var(--ink-faint);
  cursor: pointer; font-size: 0.9rem; border-radius: 3px; }
.reel-insp__x:hover { color: var(--ink); background: var(--paper-sink); }
.reel-insp__rows { display: flex; flex-direction: column; gap: 0.55rem; }
.reel-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 0.6rem; }
.reel-row__l { font: 400 var(--t-small)/1 var(--grotesk); color: var(--ink-soft); }
.reel-row__v { font: 500 var(--t-micro)/1 var(--mono); color: var(--ink); min-width: 48px; text-align: right;
  font-variant-numeric: tabular-nums; }
.reel-range { width: 100%; accent-color: var(--accent); height: 22px; }
.reel-seg { display: inline-flex; border: var(--rule) solid var(--line); border-radius: 999px; overflow: hidden; }
.reel-seg__b { border: 0; background: var(--paper); color: var(--ink-faint); cursor: pointer;
  font: 500 var(--t-micro)/1 var(--grotesk); padding: 0.4rem 0.7rem; }
.reel-seg__b.is-on { background: var(--accent-wash); color: var(--accent-deep); }
.reel-insp__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; padding-top: 0.2rem;
  border-top: var(--rule) solid var(--line); }
.reel-insp__meta span { font: 500 var(--t-micro)/1 var(--mono); color: var(--ink-faint); letter-spacing: 0.03em; }

/* превью-медиа */
.reel-preview { position: relative; overflow: hidden; }
.reel-preview__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-preview--empty::after { content: attr(data-ph); position: absolute; inset: 0;
  display: grid; place-items: center; font: 400 var(--t-small)/1 var(--grotesk); color: var(--ink-faint); }

/* ============================================================
   Телефон: инспектор выезжает снизу как лист (bottom sheet).
   ============================================================ */
@media (max-width: 640px) {
  .reel-inspector { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -8px 24px oklch(0.235 0.012 60 / 0.1);
    transform: translateY(calc(100% - 2.6rem)); transition: transform 0.22s var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .reel--hassel .reel-inspector { transform: translateY(0); }
  .reel-row { grid-template-columns: 78px 1fr auto; }
  .reel-labels { width: 74px; }
  .reel-toolbar { padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px)); }
}
/* Крупные hit-area под палец (спека: ≥44px). Видимая полоса тонкая, зона тапа большая. */
@media (pointer: coarse) {
  .reel-clip__h { width: 22px; }
  .reel-clip__h::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -11px; right: -11px; }
  .reel-mk { padding: 6px; }
  .reel-mk::before { top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .reel-inspector { transition: none; } }

/* ============================================================
   Экспорт (R3): кнопка, панель рендера, прогресс, версии.
   ============================================================ */
.reel-export-btn { border: var(--rule) solid var(--accent); background: var(--accent); color: #fff;
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0.42rem 0.85rem; border-radius: 3px; cursor: pointer;
  transition: background 0.15s var(--ease); }
.reel-export-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.reel-export-btn.is-on { background: var(--accent-deep); }

.reel-export { border-bottom: var(--rule) solid var(--line); background: var(--paper-sink); overflow: hidden; }
.reel-export.is-closed { display: none; }
.reel-exp { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; }
.reel-exp__head { display: flex; align-items: center; justify-content: space-between; }
.reel-exp__t { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.reel-exp__x { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 3px; font-size: 0.9rem; }
.reel-exp__x:hover { color: var(--ink); background: var(--paper-raise); }

.reel-exp__setup { display: flex; flex-direction: column; gap: 0.55rem; }
.reel-exp__row { display: flex; align-items: center; gap: 0.7rem; }
.reel-exp__lab { font: 400 var(--t-small)/1 var(--grotesk); color: var(--ink-soft); }
.reel-exp__hint { margin: 0; font: 400 var(--t-micro)/1.5 var(--grotesk); color: var(--ink-faint); }
.reel-exp__go { align-self: flex-start; border: var(--rule) solid var(--accent); background: var(--accent); color: #fff;
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0.55rem 1rem; border-radius: 3px; cursor: pointer; }
.reel-exp__go:hover { background: var(--accent-deep); }
.reel-exp__err { margin: 0; font: 500 var(--t-small)/1.4 var(--grotesk); color: var(--accent-deep); }
.reel-exp__ok { margin: 0; font: 500 var(--t-small)/1.4 var(--grotesk); color: #6f8f74; }

.reel-exp__run { display: flex; align-items: center; gap: 0.7rem; }
.reel-exp__track { flex: 1 1 auto; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.reel-exp__bar { display: block; height: 100%; background: var(--accent); transition: width 0.4s var(--ease); }
.reel-exp__pct { font: 500 var(--t-micro)/1 var(--mono); color: var(--ink-soft); min-width: 64px; text-align: right; }
.reel-exp__cancel { border: var(--rule) solid var(--line-strong); background: var(--paper-raise); color: var(--ink-soft);
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0.4rem 0.8rem; border-radius: 3px; cursor: pointer; }
.reel-exp__cancel:hover { color: var(--accent-deep); border-color: var(--accent); }

.reel-exp__vers { display: flex; flex-direction: column; gap: 0.4rem; }
.reel-exp__vershead { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.reel-exp__ver { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem; border: var(--rule) solid var(--line);
  border-radius: 4px; background: var(--paper-raise); }
.reel-exp__thumb { flex: none; width: 52px; height: 32px; object-fit: cover; border-radius: 2px; background: var(--paper-sink);
  border: var(--rule) solid var(--line); }
.reel-exp__thumb--empty { display: block; }
.reel-exp__vmeta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.reel-exp__vd { font: 500 var(--t-small)/1 var(--mono); color: var(--ink); }
.reel-exp__vt { font: 400 var(--t-micro)/1 var(--grotesk); color: var(--ink-faint); }
.reel-exp__vacts { display: inline-flex; align-items: center; gap: 0.4rem; }
.reel-exp__mk { border: var(--rule) solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  font: 500 var(--t-micro)/1 var(--grotesk); padding: 0.35rem 0.6rem; border-radius: 999px; cursor: pointer; }
.reel-exp__mk.is-cur { background: var(--accent-wash); color: var(--accent-deep); border-color: transparent; cursor: default; }
.reel-exp__dl { width: 28px; height: 28px; display: grid; place-items: center; text-decoration: none; border-radius: 3px;
  border: var(--rule) solid var(--line-strong); color: var(--ink-soft); font-size: 0.95rem; }
.reel-exp__dl:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   R4: растворение (клин), маркеры, кнопки проекта.
   ============================================================ */
/* растворение — диагональный клин слева клипа (нахлёст с предыдущим) */
.reel-clip__diss { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, oklch(0.235 0.012 60 / 0.18) 0 3px, transparent 3px 6px);
  border-right: 1px solid var(--accent); }

/* маркеры на линейке */
.reel-mk { position: absolute; top: 2px; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; }
.reel-mk::before { content: ""; position: absolute; top: 0; left: -4px; width: 8px; height: 8px;
  background: #5f7f8e; border-radius: 2px 2px 2px 0; transform: rotate(45deg); }
.reel-mk::after { content: ""; position: absolute; top: 3px; left: -0.5px; width: 1px; height: 16px; background: #5f7f8e; opacity: 0.5; }
.reel-mk:hover::before { background: var(--accent); }

/* кнопки проекта в панели экспорта */
.reel-exp__proj { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding-top: 0.6rem; border-top: var(--rule) solid var(--line); }
.reel-exp__pbtn { border: var(--rule) solid var(--line-strong); background: var(--paper-raise); color: var(--ink-soft);
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0.42rem 0.75rem; border-radius: 3px; cursor: pointer; }
.reel-exp__pbtn:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   R5: титры, цветокоррекция, PIP.
   ============================================================ */
.reel-clip--title { background: linear-gradient(180deg, oklch(0.92 0.03 90) 0%, oklch(0.89 0.04 88) 100%); }
.reel-clip--title .reel-clip__name { font-style: italic; }
.reel-titlebtn { border: var(--rule) solid var(--line-strong); background: var(--paper-raise); color: var(--ink-soft);
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0 0.7rem; height: 32px; border-radius: 3px; cursor: pointer; }
.reel-titlebtn:hover { color: var(--accent); border-color: var(--accent); }

/* инспектор: группы, текст, цвет, позиция, чек */
.reel-insp__grp { border: var(--rule) solid var(--line); border-radius: 4px; padding: 0.55rem; display: flex; flex-direction: column; gap: 0.5rem; }
.reel-insp__gh { display: flex; align-items: center; justify-content: space-between; }
.reel-insp__gh span { font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.reel-insp__reset { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font: 500 var(--t-micro)/1 var(--grotesk); text-decoration: underline; }
.reel-insp__reset:hover { color: var(--accent-deep); }
.reel-row--text { grid-template-columns: 92px 1fr; align-items: start; }
.reel-text { width: 100%; resize: vertical; min-height: 2.4rem; border: var(--rule) solid var(--line-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink); font: 400 var(--t-small)/1.4 var(--grotesk); padding: 0.4rem 0.5rem; }
.reel-color { width: 44px; height: 26px; padding: 0; border: var(--rule) solid var(--line-strong); border-radius: 3px; background: none; cursor: pointer; }
.reel-posgrid { display: grid; grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 20px); gap: 2px; }
.reel-pos { padding: 0; border: var(--rule) solid var(--line-strong); border-radius: 2px; background: var(--paper); cursor: pointer; }
.reel-pos:hover { border-color: var(--accent); }
.reel-pos.is-on { background: var(--accent-wash); border-color: var(--accent); }
.reel-check { border: var(--rule) solid var(--line-strong); background: var(--paper); color: var(--ink-soft); cursor: pointer;
  font: 500 var(--t-micro)/1 var(--mono); padding: 0.35rem 0.7rem; border-radius: 999px; }
.reel-check.is-on { background: var(--accent-wash); color: var(--accent-deep); border-color: transparent; }

/* превью: контейнер для cqh, наложение титров */
.reel-preview { container-type: size; }
.reel-titov { position: absolute; inset: 8% 8%; display: flex; pointer-events: none; z-index: 3; }
.reel-titov[data-pos^="t"] { align-items: flex-start; }
.reel-titov[data-pos^="m"] { align-items: center; }
.reel-titov[data-pos^="b"] { align-items: flex-end; }
.reel-titov[data-pos$="l"] { justify-content: flex-start; }
.reel-titov[data-pos$="c"] { justify-content: center; }
.reel-titov[data-pos$="r"] { justify-content: flex-end; }
.reel-titov__t { font-family: var(--grotesk); line-height: 1.15; text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.5); white-space: pre-wrap; }

/* дубль-кнопка в шапке инспектора */
.reel-insp__dup { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 3px; font-size: 0.95rem; }
.reel-insp__dup:hover { color: var(--accent); background: var(--paper-raise); }

/* ============================================================
   UX-доводка: резак-курсор, активная дорожка, удаление из бина,
   действия клипа, пикер замены, сворачивание инспектора.
   ============================================================ */
/* резак: своя линия под курсором + курсор-крест */
.reel-razorline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--accent);
  pointer-events: none; display: none; z-index: 6; }
.reel--razor .reel-razorline { display: block; }
.reel--razor .reel-lane, .reel--razor .reel-clip { cursor: crosshair; }

/* ручки трима видны при наведении на клип (а не только на выделенном) */
.reel-clip:hover .reel-clip__h::after { background: var(--accent); }

/* активная дорожка (куда лягут исходники) */
.reel-lab { cursor: pointer; }
.reel-lab.is-active { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.reel-lane.is-active { background: color-mix(in oklch, var(--accent-wash) 45%, transparent); }

/* кнопка удаления исходника из бина */
.reel-src { position: relative; }
.reel-src__rm { flex: none; width: 24px; height: 24px; border: 0; background: none; color: var(--ink-faint);
  cursor: pointer; border-radius: 3px; font-size: 0.8rem; }
.reel-src__rm:hover:not(:disabled) { color: var(--accent-deep); background: var(--paper-sink); }
.reel-src__rm:disabled { opacity: 0.3; cursor: default; }

/* подписанные действия клипа в инспекторе — вместо загадочных иконок */
.reel-insp__actions { display: flex; gap: 0.5rem; }
.reel-act { flex: 1 1 auto; border: var(--rule) solid var(--line-strong); background: var(--paper-raise); color: var(--ink);
  font: 500 var(--t-small)/1 var(--grotesk); padding: 0.5rem 0.7rem; border-radius: 3px; cursor: pointer; }
.reel-act:hover { border-color: var(--accent); color: var(--accent-deep); }
.reel-act--del:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.reel-act--rep { width: 100%; }

/* пикер замены исходника */
.reel-reppick { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem; margin-top: 0.3rem;
  border: var(--rule) solid var(--line); border-radius: 4px; background: var(--paper-sink); }
.reel-reppick__empty { margin: 0; font: 400 var(--t-micro)/1.4 var(--grotesk); color: var(--ink-faint); }
.reel-reppick__it { display: flex; align-items: center; gap: 0.5rem; text-align: left; border: var(--rule) solid var(--line);
  background: var(--paper); color: var(--ink); font: 400 var(--t-small)/1 var(--grotesk); padding: 0.4rem 0.5rem; border-radius: 3px; cursor: pointer; }
.reel-reppick__it:hover { border-color: var(--accent); }

/* сворачивание инспектора + ограничение высоты (чтобы превью не уезжало) */
.reel-insp__collapse { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 3px; }
.reel-insp__collapse:hover { color: var(--accent); background: var(--paper-raise); }
.reel-insp__rows { max-height: 38vh; overflow-y: auto; }
.reel--inspcol .reel-insp__rows { display: none; }
@media (max-width: 640px) { .reel-insp__rows { max-height: 46vh; } }

/* ============================================================
   Бин: режим плиток, перетаскивание на дорожку, добавление дорожек, LUT, шрифт.
   ============================================================ */
.reel-bin__list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 34vh; overflow-y: auto; }
@media (min-width: 860px) { .reel-bin__list { max-height: none; } }
/* аватар теперь кнопка */
.reel-src__k { border: 0; cursor: pointer; }
.reel-src__k:hover { color: var(--accent); }
/* плитки: 3 в ряд */
.reel-bin__list--tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.reel-bin__list--tiles .reel-src { flex-direction: column; align-items: stretch; text-align: center; gap: 0.3rem; padding: 0.4rem; cursor: grab; }
.reel-bin__list--tiles .reel-src__k { width: 100%; height: 34px; }
.reel-bin__list--tiles .reel-src__n { white-space: normal; font-size: var(--t-micro); line-height: 1.2; max-height: 2.4em; overflow: hidden; }
/* призрак перетаскивания */
.reel-dragghost { position: fixed; z-index: 9999; pointer-events: none; background: var(--accent); color: #fff;
  font: 500 var(--t-micro)/1 var(--grotesk); padding: 0.35rem 0.55rem; border-radius: 3px; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px oklch(0.235 0.012 60 / 0.25); }
.reel--binning { cursor: grabbing; }
.reel-lane.is-drop { background: var(--accent-wash); box-shadow: inset 0 0 0 2px var(--accent); }

/* добавление/удаление дорожек */
.reel-trackadd { display: flex; gap: 0.3rem; padding: 0.3rem; }
.reel-trackadd__b { flex: 1 1 auto; border: var(--rule) dashed var(--line-strong); background: none; color: var(--ink-soft);
  font: 500 var(--t-micro)/1 var(--grotesk); padding: 0.35rem; border-radius: 3px; cursor: pointer; }
.reel-trackadd__b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); }
.reel-trackadd__b:disabled { opacity: 0.35; cursor: default; }
.reel-lab__x { margin-left: auto; width: 18px; height: 18px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 0.7rem; border-radius: 2px; }
.reel-lab__x:hover { color: var(--accent-deep); background: var(--paper-sink); }

/* LUT в инспекторе */
.reel-lutrow { display: flex; gap: 0.4rem; align-items: center; }
.reel-lut__sel { flex: 1 1 auto; border: var(--rule) solid var(--line-strong); background: var(--paper); color: var(--ink);
  font: 400 var(--t-small)/1 var(--grotesk); padding: 0.4rem; border-radius: 3px; }
.reel-lut__up { flex: none; border: var(--rule) solid var(--line-strong); background: var(--paper-raise); color: var(--ink-soft);
  font: 500 var(--t-micro)/1 var(--grotesk); padding: 0.4rem 0.6rem; border-radius: 3px; cursor: pointer; }
.reel-lut__up:hover { color: var(--accent); border-color: var(--accent); }

/* сворачивание бина */
.reel-bin__head { display: flex; align-items: center; justify-content: space-between; }
.reel-bin__toggle { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; border-radius: 3px; width: 24px; height: 22px; }
.reel-bin__toggle:hover, .reel-bin__toggle.is-on { color: var(--accent); }
.reel--bincol .reel-bin__list, .reel--bincol .reel-bin__add { display: none; }
@media (min-width: 860px) { .reel--bincol .reel-top { grid-template-columns: 120px 1fr; } }