:root {
  --bg: #121212;
  --panel: #1e1e1e;
  --panel-2: #181818;
  --line: #888888;
  --text: #ffffff;
  --muted: #b3b3b3;
  --accent: #1db954;
  --accent-2: #3b6fd4;
}

* { box-sizing: border-box; }

/* Глобально убираем синее focus-кольцо браузера со всех кнопок, ссылок и
   органов управления (появляется после клика и нажатия Space/Tab) */
button:focus, button:focus-visible,
a:focus, a:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible {
  outline: none !important;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  max-width: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 30% 0%, #1a3326 0%, var(--bg) 60%);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  max-width: 100%;
}

.app-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.panel {
  background: linear-gradient(180deg, #282828 0%, var(--panel-2) 100%);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (max-width: 820px) {
  .app-shell { padding: 8px; }
}

/* ── Topbar / nav (адаптация из karaoke.vocala.net) ───────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand-accent { color: var(--accent); }

.top-nav {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-btn:hover { border-color: var(--accent-2); }
.nav-btn.is-active {
  background: linear-gradient(var(--accent), #158a3e);
  border-color: #1ed760;
}
.nav-btn__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.nav-btn.is-active .nav-btn__num { background: rgba(255, 255, 255, 0.3); }
.nav-btn--lang { flex-shrink: 0; }

/* ── Workspace row: tab panes + ad sidebar ────────────────── */

.workspace-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
  min-height: 600px;
  min-width: 0;
}

.tab-panes-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ad-pane {
  height: 100%;
  position: relative;
  border: 1px solid #909090;
  overflow: hidden;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #121212;
}
.ad-wrap {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 100%;
  max-width: 100%;
}
.ad-slot {
  border: 1px dashed #121212;
  border-radius: 6px;
  background: #121212;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-rotator-block { width: 100%; height: 100%; }
.ad-rotator-block > div, .ad-rotator-block > iframe { max-width: 100% !important; max-height: 100% !important; display: block; }

@media (max-width: 880px) {
  .workspace-row { grid-template-columns: 1fr; min-height: 0; }
  .tab-panes-col, .ad-pane { height: auto; }
  .ad-pane { width: 100%; min-height: 180px; }
}

/* ── Tab panes ────────────────────────────────────────────── */

.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

.pane-inner {
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.pane-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.pane-hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.pane-heading-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.pane-heading-box .pane-title,
.pane-heading-box .pane-hint {
  margin: 0;
}

.pane-inner--placeholder { align-items: stretch; text-align: left; }

.placeholder-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.placeholder-icon { font-size: 34px; line-height: 1; }
.placeholder-text { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ── Dropzone ─────────────────────────────────────────────── */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 34px 20px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--accent);
  background: rgba(29, 185, 84, 0.06);
  outline: none;
}
.dropzone.dropzone--over {
  border-color: var(--accent);
  background: rgba(29, 185, 84, 0.12);
}
.dropzone-icon {
  font-size: 30px;
  color: var(--accent);
}
.dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dropzone-text strong { font-size: 15px; }
.dropzone-text span { font-size: 13px; color: var(--muted); }
.dropzone-file {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}

/* ── Buttons ──────────────────────────────────────────────── */

.primary-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0b1c10;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 13px 20px;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
  position: relative;
  overflow: hidden;
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.08); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; }

.split-btn.progress {
  color: #fff;
  background: linear-gradient(90deg, var(--accent) calc(var(--split-progress, 0) * 1%), #3a3a3a calc(var(--split-progress, 0) * 1%));
}

.secondary-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.secondary-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* ── Queue message ────────────────────────────────────────── */

.queue-msg {
  font-size: 13px;
  font-weight: 600;
  color: #ffb74d;
  background: rgba(255, 183, 77, 0.1);
  border: 1px solid rgba(255, 183, 77, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
}

/* ── Result block ─────────────────────────────────────────── */

.result-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.result-block[hidden],
.dropzone-file[hidden],
.queue-msg[hidden] {
  display: none;
}
.result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}
.result-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}
.result-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.result-audio {
  width: 100%;
  height: 36px;
}
.result-download { flex: none; }

/* ── Footer ───────────────────────────────────────────────── */

.footer {
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.footer-link { color: var(--accent); text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .top-nav { order: 3; flex: 1 1 100%; overflow-x: auto; }
}

@media (max-width: 520px) {
  .brand { font-size: 15px; }
  .nav-btn, .primary-btn, .secondary-btn { padding: 6px 10px; font-size: 13px; }
  .pane-title { font-size: 20px; }
  .pane-inner { padding: 18px 14px 22px; }
}

/* ───── Вкладка «Мастеринг» – каркас, перенесённый из вкладки «Треки» karaoke.vocala.net ───── */
:is(#tab-mastering, #tab-minus, #tab-editor) [hidden] { display: none !important; }
:is(#tab-mastering, #tab-minus, #tab-editor).tab-pane .pane-inner {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: clamp(260px, 26vw, 335px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 600px;
  min-width: 0;
  width: 100%;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .heading-and-cards {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  width: calc(100% - 517px);
  box-sizing: border-box;
  align-self: start;
  justify-self: start;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .heading-and-cards-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 240px;
  flex: 1;
}
#tab-editor .heading-and-cards-left { max-height: 410px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .pane-heading-box {
  width: fit-content;
  box-sizing: border-box;
  padding: 10px 14px;
  gap: 4px;
  background: linear-gradient(180deg, #282828 0%, var(--panel-2) 100%);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .pane-heading-box .pane-title { font-size: 18px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .pane-heading-box .pane-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  min-height: calc(14px * 1.3 * 2);
}
:is(#tab-mastering, #tab-minus, #tab-editor).panel { border: none; background: none; box-shadow: none; }

:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-box {
  flex: none;
  align-self: flex-start;
  width: fit-content;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px 10px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 410px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 160px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  text-align: center;
  flex: none;
  width: 22px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-bars {
  flex: 1;
  display: flex;
  gap: 4px;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-bar {
  flex: 1;
  position: relative;
  background: linear-gradient(to bottom, #f4d35e 0%, #f4d35e 16%, #6fcf6f 16%, #2fae4a 100%);
}
/* Шкала редактора расширена на +3дБ запаса сверху: 0..4.11% — зона перегруза (красная,
   обычно скрыта тёмной заливкой), 4.11..19.45% — жёлтая зона до 0дБ, далее зелёная */
#tab-editor .loudness-meter-bar {
  background: linear-gradient(to bottom,
    #e7493c 0%, #e7493c 4.1096%,
    #f4d35e 4.1096%, #f4d35e 19.4521%,
    #6fcf6f 19.4521%, #2fae4a 100%);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--meter-dim, 100%);
  background: rgba(10, 14, 10, 0.82);
  transition: height 90ms linear;
  z-index: 1;
}
/* Маркер интегрального уровня LUFS поверх индикатора */
:is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-bar.has-lufs::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--lufs-pos, 0%);
  height: 2px;
  margin-top: -1px;
  background: #fff;
  z-index: 2;
}
/* Маркер мгновенного пика (PEAK) — отдельная линия поверх LUFS-маркера и тёмной заливки,
   показывает текущий пик относительно потолка Максимайзера */
#tab-editor .loudness-meter-peak-marker {
  position: absolute;
  left: 0; right: 0;
  top: var(--peak-pos, 100%);
  height: 2px;
  margin-top: -1px;
  background: #ffb020;
  transition: top 90ms linear;
  z-index: 3;
}

:is(#tab-mastering, #tab-minus, #tab-editor) .workspace { display: contents; }
:is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .center-column { display: contents; }
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 6px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
}
#tab-mastering .dual-audio-row { padding-bottom: 7px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-cards {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  min-width: 0;
  gap: 6px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row :is(#master-run-btn-cards, #minus-run-btn-cards, #editor-run-btn-cards):disabled {
  opacity: 1;
  cursor: not-allowed;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row :is(#master-run-btn-cards, #minus-run-btn-cards, #editor-run-btn-cards) {
  align-self: stretch;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 6px;
  margin: 0;
  border: 2px solid rgb(30, 215, 96);
  background: linear-gradient(rgb(29, 185, 84), rgb(21, 138, 62));
  color: rgb(255, 255, 255);
}
#tab-mastering .dual-audio-row #master-run-btn-cards { margin-top: 0; }
#tab-minus .dual-audio-row #minus-run-btn-cards { margin-top: -1px; }
#tab-minus .loudness-meter-box { align-self: stretch; }
#tab-minus .dual-audio-row { flex: 1; }
#tab-minus .dual-audio-cards { flex: 1; }
#tab-minus #minus-reference-audio-card { display: flex; flex-direction: column; }
#tab-minus #minus-reference-audio-card .dropzone { flex: 1; }
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row :is(#master-run-btn-cards, #minus-run-btn-cards, #editor-run-btn-cards).progress {
  position: relative;
  overflow: hidden;
  z-index: 0;
  color: #ffffff;
  background: #282828;
  border-color: #7eb6ff;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row :is(#master-run-btn-cards, #minus-run-btn-cards, #editor-run-btn-cards).progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--split-progress, 0) * 1%);
  background: linear-gradient(90deg, #1db954, #158a3e);
  z-index: -1;
  transition: width 0.25s linear;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dual-audio-row .left-column { align-self: stretch; flex: 1 1 200px; min-width: 200px; width: auto; }
:is(#tab-mastering, #tab-minus, #tab-editor) :is(#reference-audio-card, #minus-reference-audio-card, #editor-reference-audio-card, #mastering-audio-card, #mastering-reference-card) {
  flex: 1 1 200px;
  min-width: 200px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  align-self: stretch;
  box-sizing: border-box;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .preview { grid-column: 2; grid-row: 1; }
:is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .stems { grid-column: 1 / -1; grid-row: 2; min-height: 0; }

:is(#tab-mastering, #tab-minus, #tab-editor) .left-column {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  align-self: start;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .left-panel-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .left-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .left-panel--tracks { flex: 0 0 auto; align-self: start; }
:is(#tab-mastering, #tab-minus, #tab-editor) .left-card h3 { margin: 0 0 8px; font-size: 18px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .left-card--split { min-height: 158px; }

:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone {
  border: 1px dashed #949494;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  background: rgba(18, 18, 18, 0.65);
  display: grid;
  gap: 8px;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone.dropzone--over { border-color: #5a8fd4; background: rgba(20, 40, 80, 0.65); }
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone-hint {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone-note { display: block; }
/* #minus-reference-audio-card растягивается на всю ширину строки (карточка одна, не две,
   как в мастеринге) – сужаем текст подсказки до той же ширины, что и в узкой карточке
   мастеринга, чтобы перенос строк совпадал и высота блока была идентичной "один в один";
   .dropzone-note переносится по заданному <br> в две строки и сюда не входит */
#tab-minus #minus-reference-audio-card .dropzone-hint,
#tab-minus #minus-reference-audio-card .dropzone-picked-name,
#tab-editor #editor-reference-audio-card .dropzone-hint,
#tab-editor #editor-reference-audio-card .dropzone-picked-name {
  max-width: 284px;
  margin-left: auto;
  margin-right: auto;
}
/* .dropzone-note здесь – ровно 2 строки через <br> (короче трёхстрочной версии в мастеринге
   на 14px); добавляем эту разницу через min-height, чтобы высота карточки и всех
   связанных борderов осталась "один в один" с вкладкой Аудио Мастеринг Онлайн */
#tab-minus #minus-reference-audio-card .dropzone-note,
#tab-editor #editor-reference-audio-card .dropzone-note {
  min-height: 42px;
}
#tab-editor .editor-heading-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
#tab-editor .editor-heading-row .pane-heading-box {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
#tab-editor .editor-save-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 0 0 220px;
}
#tab-editor .editor-mix-btn { width: 100%; }
/* Текст кнопок сохранения микса при hover/active всегда белый — несмотря на
   общее правило .track-download-btn:hover (та же специфичность, но идёт ниже
   по каскаду) — добиваем специфичность дублирующимся классом .track-download-btn */
#tab-editor .editor-mix-btn.track-download-btn:hover,
#tab-editor .editor-mix-btn.track-download-btn:active { color: #fff; border-color: #ff0000; }
#tab-editor #editor-reference-audio-card .cursor-time-pane { width: 100%; flex: 1 1 0; }
#tab-editor .editor-ctrl-gap { flex: 1 1 0; min-width: 0; }
#tab-editor #editor-btn-record { font-size: 18px; color: #cc4444; }
#tab-editor #editor-btn-record.active {
  color: #ff0000; border-color: #ff0000;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.9);
  animation: editor-rec-pulse 1s ease-in-out infinite;
}
#tab-editor #editor-player-progress { flex: 1 1 0; width: 0; min-width: 40px; }
#tab-editor #editor-reference-audio-card {
  min-height: 256px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex: 1;
  padding-bottom: 6px;
}
#tab-editor .editor-left-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding-top: 2px;
}
#tab-editor .editor-tool-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; text-align: left;
  white-space: nowrap;
}
#tab-editor .editor-tool-btn:hover { border-color: var(--accent-2); }

/* Undo/Redo — прижаты к нижнему краю левой колонки кнопок, на одном уровне
   с панелью транспорта справа */
#tab-editor .editor-left-buttons-bottom {
  margin-top: auto;
  margin-bottom: 7px;
  display: flex;
  gap: 8px;
}
#tab-editor .editor-left-buttons-bottom #editor-btn-undo,
#tab-editor .editor-left-buttons-bottom #editor-btn-redo {
  font-size: 20px;
}

/* Tool buttons active state */
#tab-editor .editor-tool-btn.active {
  background: linear-gradient(var(--accent), #158a3e);
  border-color: #1ed760;
}

/* Mixer panel */
/* ── Максимайзер ─────────────────────────────────────────────────────────── */
#tab-editor .editor-maximizer-panel {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: 5px; padding: 6px 10px 6px 42px;
  border: 2px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
#tab-editor .editor-maximizer-panel:not(.eq-disabled) {
  background: rgba(18, 18, 18, 0.65);
}
#tab-editor .editor-maximizer-panel.eq-disabled { pointer-events: none; }
#tab-editor .editor-maximizer-panel.eq-disabled::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(38, 38, 38, 0.75); border-radius: 6px; z-index: 1;
}
#tab-editor .editor-maximizer-panel.eq-disabled .eq-power-btn { pointer-events: auto; z-index: 2; }
/* ── Общий "плагинный кит" (FX-модалка + Master EQ + Максимайзер) ─────────── */
#tab-editor .plugin-knobs-row {
  display: flex; flex-direction: row;
  justify-content: space-evenly; align-items: center;
  gap: 6px; flex: 1; min-height: 0; min-width: 0;
}
#tab-editor .plugin-knobs-row--fixed { flex: 0 0 auto; }
#tab-editor .plugin-graph-row {
  display: flex; flex-direction: row;
  gap: 6px; flex: 1; min-height: 0;
}
#tab-editor .plugin-knob-group {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px; flex: 1; min-width: 0;
}
#tab-editor .plugin-knob-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); text-align: center; white-space: nowrap;
}
#tab-editor .plugin-knob-canvas { cursor: ns-resize; flex-shrink: 0; }
#tab-editor .plugin-knob-val {
  font-size: 11px; font-weight: 700; text-align: center;
  min-width: 50px; white-space: nowrap;
}
#tab-editor .max-knob-desc {
  font-size: 11px; color: var(--muted); text-align: center;
  white-space: normal; line-height: 1.15;
}
#tab-editor .max-char-slider {
  width: 100%; margin: 1px 0;
  accent-color: #8a5af5;
  cursor: pointer;
}
#tab-editor .max-char-slider-wrap {
  display: flex; flex-direction: row;
  justify-content: space-between; width: 100%;
}
#tab-editor .max-char-label { font-size: 11px; color: var(--muted); }

#tab-editor .plugin-meters-col {
  display: flex; flex-direction: row;
  gap: 6px; align-items: stretch; flex: 0 0 auto;
}
/* Компактный вариант для узких панелей плагинов FX-модалки (3 метра IN/GR/OUT) */
#tab-editor .plugin-meters-col--compact { gap: 4px; }
#tab-editor .plugin-meters-col--compact .plugin-meter-group { gap: 2px; }
#tab-editor .plugin-meters-col--compact .plugin-meter-label {
  font-size: 8px; letter-spacing: 0.02em;
}
#tab-editor .plugin-meters-col--compact .plugin-meter-bar-wrap {
  width: 9px; min-height: 40px;
}
#tab-editor .plugin-meter-group {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
}
#tab-editor .plugin-meter-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted);
}
#tab-editor .plugin-meter-bar-wrap {
  flex: 1; width: 12px; min-height: 50px;
  background: #1a1a1a; border: 1px solid #333; border-radius: 3px;
  overflow: hidden; position: relative;
}
#tab-editor .plugin-meter-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--meter-dim, 0%);
  background: linear-gradient(to top, #2fae4a 0%, #6fcf6f 70%, #f4d35e 90%, #e7493c 100%);
  transition: height 90ms linear;
}
#tab-editor .plugin-meter-bar--gr {
  bottom: auto; top: 0;
  background: linear-gradient(to bottom, #8a5af5, #5a2af5);
}

#tab-editor .max-meta-row {
  display: flex; flex-direction: row;
  gap: 14px; justify-content: center;
  flex-shrink: 0;
}
#tab-editor .max-meta-item {
  display: flex; flex-direction: row; align-items: baseline; gap: 4px;
  font-size: 12px;
}
#tab-editor .max-meta-label {
  font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
}
#tab-editor .max-meta-val {
  font-weight: 700; color: #3b6fd4;
}

/* ── EQ ─────────────────────────────────────────────────────────────────── */
#tab-editor .editor-eq-panel {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: row; align-items: stretch;
  gap: 3px; padding: 6px 10px 9px 42px;
  overflow-x: auto;
  border: 2px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
}
#tab-editor .editor-eq-panel:not(.eq-disabled) {
  background: rgba(18, 18, 18, 0.65);
}
#tab-editor .eq-power-btn {
  position: absolute; top: 7px; left: 8px;
  width: 26px; height: 26px;
  border-radius: 5px;
  background: #1a1a1a;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  box-shadow: 0 0 6px rgba(255, 59, 48, 0.5);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#tab-editor .eq-power-btn.active {
  color: #1db954;
  border-color: #1db954;
  box-shadow: 0 0 6px rgba(29, 185, 84, 0.45);
}
#tab-editor .editor-eq-panel.eq-disabled { pointer-events: none; }
#tab-editor .editor-eq-panel.eq-disabled::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(38, 38, 38, 0.75); border-radius: 6px; z-index: 1;
}
#tab-editor .editor-eq-panel.eq-disabled .eq-power-btn { pointer-events: auto; z-index: 2; }
#tab-editor .eq-band {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; flex-shrink: 0; width: 26px;
}
#tab-editor .eq-gain-val {
  font-size: 11px; color: var(--muted); text-align: center;
  white-space: nowrap; min-width: 24px; line-height: 1;
}
#tab-editor .eq-fader {
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 22px; height: auto; flex: 1; min-height: 0;
  cursor: pointer; flex-shrink: 1; background: transparent;
}
#tab-editor .eq-fader::-webkit-slider-runnable-track {
  width: 22px;
  background:
    linear-gradient(to right, transparent 43%, var(--accent-2) 43%, var(--accent-2) 57%, transparent 57%)
    0 0 / 100% calc(100% - 10px) no-repeat,
    linear-gradient(to bottom, transparent 49.5%, #555 49.5%, #555 50.5%, transparent 50.5%)
    0 0 / 100% 100% no-repeat;
  border: none;
}
#tab-editor .eq-fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 10px; border-radius: 3px;
  background: linear-gradient(180deg, #7ea3e6 0%, var(--accent-2) 100%);
  border: 1px solid #2a52a8; cursor: pointer; margin-top: 0;
}
#tab-editor .eq-freq-label {
  font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; line-height: 1;
}

/* ── FX-модалка для дорожек ─────────────────────────────────────────────── */
#tab-editor .fx-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#tab-editor .fx-modal-overlay[hidden] { display: none; }
#tab-editor .fx-modal {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  width: min(760px, 96vw);
  height: min(480px, 92vh);
  display: flex; flex-direction: column;
  gap: 10px; padding: 12px;
  box-sizing: border-box;
}
#tab-editor .fx-modal-header {
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#tab-editor .fx-modal-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
#tab-editor .fx-modal-close {
  font: inherit; font-size: 16px; line-height: 1;
  color: var(--muted); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 6px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#tab-editor .fx-modal-close:hover { border-color: var(--accent-2); color: var(--text); }
#tab-editor .fx-modal-body {
  display: flex; flex-direction: row;
  gap: 10px; flex: 1; min-height: 0;
}
#tab-editor .fx-plugin-list {
  display: flex; flex-direction: column;
  gap: 8px; flex: 0 0 auto;
}
#tab-editor .fx-plugin-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 9px 12px; cursor: grab;
  text-align: left; white-space: nowrap; user-select: none;
}
#tab-editor .fx-plugin-btn:hover { border-color: var(--accent-2); }
#tab-editor .fx-plugin-btn.active {
  background: linear-gradient(var(--accent), #158a3e);
  border-color: #1ed760;
}
#tab-editor .fx-plugin-btn.dragging { opacity: 0.4; cursor: grabbing; }
#tab-editor .fx-plugin-panel-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
/* Канал микшера выбранной дорожки — переносится сюда из микшера на время
   открытия модалки (см. moveFxModalExtrasIn в app.js) */
#tab-editor .fx-modal-channel-strip {
  display: flex; flex-direction: column;
  flex: 0 0 84px;
}
#tab-editor .fx-modal-channel-strip .mixer-channel {
  border-right: none; padding-right: 0;
  min-height: 0;
}
/* Мастер-индикатор — тоже переносится сюда из мастер-секции */
#tab-editor .fx-modal-master-meter {
  display: flex; flex-direction: column;
  flex: 0 0 auto;
}
#tab-editor .fx-modal-master-meter .loudness-meter-box {
  flex: 1; min-height: 0;
}
#tab-editor .fx-plugin-panel {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 20px 10px 6px 42px;
  border: 2px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
#tab-editor .fx-plugin-panel:not(.eq-disabled) {
  background: rgba(18, 18, 18, 0.65);
}
#tab-editor .fx-plugin-panel.eq-disabled { pointer-events: none; }
#tab-editor .fx-plugin-panel.eq-disabled::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(38, 38, 38, 0.75); border-radius: 6px; z-index: 1;
}
#tab-editor .fx-plugin-panel.eq-disabled .eq-power-btn { pointer-events: auto; z-index: 2; }
#tab-editor .plugin-body {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; gap: 6px;
}
#tab-editor .plugin-graph-canvas {
  flex: 1; min-height: 0; width: 100%; display: block;
  border: 1px solid var(--line); border-radius: 4px;
  background: #141414;
}
#tab-editor .plugin-toggle-row {
  display: flex; flex-direction: row; align-items: center;
  gap: 4px; flex: 0 0 auto; flex-wrap: wrap;
}
#tab-editor .plugin-toggle-btn {
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; cursor: pointer;
  flex: 1; min-width: 0; text-align: center;
  white-space: normal; line-height: 1.15;
}
#tab-editor .plugin-toggle-btn:hover { border-color: var(--accent-2); }
#tab-editor .plugin-toggle-btn.active {
  background: #3b6fd4; border-color: #3b6fd4; color: #fff;
}
#tab-editor .plugin-toggle-btn.enabled {
  border-color: #1db954; color: #1db954;
}
#tab-editor .plugin-toggle-btn.enabled.active {
  background: #1db954; border-color: #1db954; color: #0c0c0c;
}
#tab-editor .plugin-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  flex: 0 0 auto; display: flex; align-items: center;
  padding-right: 2px;
}

/* ── Вокал: 2×2 сетка из De-Ess / Exciter / Saturation / Air ─────────────── */
#tab-editor .vocal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px; flex: 1; min-height: 0;
}
#tab-editor .vocal-module {
  display: flex; flex-direction: column;
  gap: 4px; padding: 5px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 0; min-width: 0;
}
#tab-editor .vocal-module-head {
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: 4px; flex: 0 0 auto;
}
#tab-editor .vocal-module-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--vocal-accent, var(--muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-editor .vocal-module-toggle {
  flex: 0 0 auto; padding: 2px 6px; font-size: 9px;
}
#tab-editor .vocal-module .plugin-knob-group {
  flex: 1; justify-content: center;
}
#tab-editor .vocal-meters-row {
  display: flex; flex-direction: row;
  justify-content: center; flex: 0 0 auto;
}
#tab-editor .editor-mixer-panel {
  flex: 1; min-height: 0; min-width: 0;
  align-self: stretch; width: 100%;
  display: flex; flex-direction: row; align-items: stretch;
  gap: 10px; padding: 6px 10px 9px;
  overflow-x: auto;
  box-sizing: border-box;
}
#tab-editor .mixer-channel {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex: 1 1 0; min-width: 0;
  border-right: 1px solid #3a3a3a;
  padding-right: 10px;
}
#tab-editor .mixer-channel--master {
  border-right: none;
  padding-right: 0;
  flex: 0 0 auto;
  /* В канале есть строка mute/solo (28px) + отступ (5px), которых нет у мастера —
     компенсируем сверху, чтобы фейдер мастера был той же высоты, что у каналов */
  padding-top: 33px;
}
#tab-editor .mixer-channel-btns {
  display: flex; flex-direction: row; gap: 4px;
  flex: 0 0 auto;
}
/* Mute/Solo в микшере — тот же визуальный стиль и размер (34×28), что в треках */
#tab-editor .mixer-channel .mute-btn {
  width: 34px; height: 28px; min-height: 28px; max-height: 28px;
  min-width: 34px; flex: 0 0 34px;
}
#tab-editor .mixer-channel .track-ctrl-btn {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 28px; min-height: 28px; max-height: 28px;
  min-width: 34px; flex: 0 0 34px;
  border: 1px solid #909090; background: #1e1e1e; border-radius: 6px;
  padding: 0; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center; box-sizing: border-box;
  font-size: 11px; font-weight: 700; color: #cccccc;
}
/* Фейдер и индикатор растянуты на всю высоту блока (как фейдеры в Мастер EQ) */
#tab-editor .mixer-fader-wrap {
  display: flex; flex-direction: row; align-items: stretch; justify-content: center;
  gap: 3px; flex: 1; min-height: 0; width: 100%;
}
#tab-editor .mixer-fader {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 28px; height: 100%;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
}
#tab-editor .mixer-fader::-webkit-slider-runnable-track {
  width: 28px;
  background:
    linear-gradient(to right, transparent 40%, #1db954 40%, #1db954 60%, transparent 60%)
    0 0 / 100% 100% no-repeat;
  border: none;
}
#tab-editor .mixer-meter {
  width: 10px; height: 100%;
  flex-shrink: 0; display: block; border-radius: 2px;
}
#tab-editor .mixer-label {
  font-size: 11px; color: #999; text-align: center;
  max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  flex: 0 0 auto;
}
#tab-editor .mixer-separator {
  width: 1px; background: #444;
  flex-shrink: 0; margin: 0 8px; align-self: stretch;
}
#tab-editor .mixer-channel--master .mixer-label { color: #ccc; font-weight: 600; }
#tab-editor .mixer-vol-num {
  width: 44px; height: 20px;
  border: 1px solid #606060; border-radius: 4px;
  background: #1a1a1a; color: #ccc;
  font-size: 11px; text-align: center; padding: 0 2px;
  box-sizing: border-box;
  margin-top: -1px;
}
/* Горизонтальный движок панорамы — между фейдером и полем громкости */
#tab-editor .mixer-pan {
  -webkit-appearance: none; appearance: none;
  width: 64px; height: 14px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin: 2px 0;
}
#tab-editor .mixer-pan::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #555 0%, #555 47%, #999 47%, #999 53%, #555 53%, #555 100%);
}
#tab-editor .mixer-pan::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c8deff 0%, #6699ee 40%, #3366cc 100%);
  border: 1px solid #0033aa;
  cursor: pointer;
}
#tab-editor .mixer-pan::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #555 0%, #555 47%, #999 47%, #999 53%, #555 53%, #555 100%);
}
#tab-editor .mixer-pan::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c8deff 0%, #6699ee 40%, #3366cc 100%);
  border: 1px solid #0033aa;
  cursor: pointer;
}

/* Ruler above tracks — canvas, отрисовывается через JS */
#tab-editor .editor-ruler {
  display: block;
  width: 100%; height: 24px; flex-shrink: 0;
  background: #181818;
  border-bottom: 1px solid #444;
}

/* Editor tracks: 6 рядов, 1px бордер без скругления */
#tab-editor #editor-center-panel-tracks { position: relative; flex: 1; min-height: 0; grid-template-rows: repeat(6, 1fr); }
#tab-editor #editor-center-panel-tracks .track-block {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 44px 34px;
  height: 100%;
}
#tab-editor #editor-center-panel-tracks .track-head-row {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
}
/* Фиксированная ширина под имя трека (maxlength=6) — не зависит от длины текста,
   иначе разные по длине названия сдвигают дорожки относительно линейки тактов */
#tab-editor #editor-center-panel-tracks .track-head {
  flex: 0 0 84px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default; user-select: none;
}
#tab-editor #editor-center-panel-tracks .track-head:hover { color: var(--accent-2); }
/* Inline-редактирование названия трека */
#tab-editor #editor-center-panel-tracks .track-name-input {
  flex: 0 0 84px; min-width: 0;
  background: #111; color: #fff;
  border: 1px solid var(--accent-2); border-radius: 3px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 1px 4px; outline: none;
}
/* Кнопки Solo/FX/Rec — точный стиль как .mute-btn */
#tab-editor #editor-center-panel-tracks .track-ctrl-btn {
  appearance: none;
  border: 1px solid #909090;
  background: #1e1e1e;
  border-radius: 6px;
  width: 34px; height: 28px;
  min-height: 28px; max-height: 28px;
  padding: 0; line-height: 1;
  cursor: pointer;
  flex: 0 0 34px;
  display: inline-grid; place-items: center;
  box-sizing: border-box;
  font-size: 11px; font-weight: 700; color: #cccccc;
}
#tab-editor #editor-center-panel-tracks .track-ctrl-btn:hover {
  border-color: #c0c0c0; background: #2a2a2a; color: #fff;
}
/* Соло активно — применяется и в треках, и в микшере */
#tab-editor .track-solo-btn.active {
  border-color: #e6c000; color: #ffee00;
}
#tab-editor #editor-center-panel-tracks .track-solo-btn.active {
  border-color: #e6c000; color: #ffee00;
}
#tab-editor #editor-center-panel-tracks .track-fx-btn.active {
  border-color: #3070c8; color: #70b0ff;
}
#tab-editor #editor-center-panel-tracks .track-rec-btn { color: #cc4444; font-size: 15px; }
#tab-editor #editor-center-panel-tracks .track-rec-btn.active {
  border-color: #ff0000; color: #ff0000;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.9);
  animation: editor-rec-pulse 1s ease-in-out infinite;
}
@keyframes editor-rec-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}
/* Toolbar теперь без кнопки мьюта — только volume.
   Слайдер растягивается так, чтобы поле "0" заканчивалось на одном уровне
   с кнопкой "Запись" в строке выше (padding-right совпадает с track-head-row) */
#tab-editor #editor-center-panel-tracks .track-toolbar { grid-column: 1; grid-row: 2; padding-right: 6px; }
#tab-editor #editor-center-panel-tracks .vol-range { flex: 1; width: auto; }
#tab-editor #editor-center-panel-tracks .track-download-buttons { display: none; }
#tab-editor #editor-center-panel-tracks .track-wave-wrap {
  grid-column: 2; grid-row: 1 / 3;
  border: 1px solid #606060; border-radius: 0; padding: 0; background: transparent;
  overflow: hidden;
}

/* Контейнер всех клипов дорожки — позиционер для динамически создаваемых .editor-track-clip
   (один на каждый клип в editorTrackClips[n], порядок DOM = z-порядок) */
#tab-editor .editor-track-clips { position: absolute; inset: 0; }

/* Клип волны на дорожке — позиционируется/масштабируется по времени (px/сек = editorPxPerSec).
   Непрозрачный фон + рамка отделяют клип от соседних/перекрытых клипов и от дорожки —
   полупрозрачным клип становится только во время перетаскивания (см. .editor-clip-ghost-inner).
   isolation:isolate — z-index хендлов (см. .clip-trim-handle) не "протекает" выше соседних
   клипов: при перекрытии хендлы нижнего клипа скрываются под верхним по DOM-порядку */
#tab-editor .editor-track-clip {
  position: absolute; top: 0; left: 0; height: 100%;
  box-sizing: border-box;
  isolation: isolate;
  border: 1px solid #888;
  background: #23262d;
  cursor: grab;
}
#tab-editor .editor-track-clip.is-live { border-color: #e0473b; }
/* Подсветка клипа под курсором мыши (выделение для трима/удаления) */
#tab-editor .editor-track-clip:hover { border-color: #ffffff; }
#tab-editor .editor-track-clip.is-live:hover { border-color: #e0473b; box-shadow: none; }
/* Множественное выделение клипов (Ctrl/Cmd+клик) — синяя подсветка */
#tab-editor .editor-track-clip.is-multi-selected { border-color: #3b6fd4; box-shadow: inset 0 0 0 1px #3b6fd4; }
#tab-editor .editor-track-clip.is-multi-selected:hover { border-color: #3b6fd4; }
#tab-editor .editor-track-clip:active { cursor: grabbing; }
#tab-editor .editor-track-clip[hidden] { display: none; }
/* Канвас волны рисуется только для видимого окна (+запас) и позиционируется через
   left/width в JS (renderEditorClipWaveWindow) — растягивание на всю длину клипа
   убрано, иначе на длинных файлах при большом зуме волна выглядела размыто */
#tab-editor .editor-track-clip .track-wave-canvas { display: block; position: absolute; top: 0; height: 100%; }

/* Хендлы неразрушающего трима в нижних углах клипа (как в Cubase) — скрыты по
   умолчанию, появляются только когда курсор мыши находится над клипом */
#tab-editor .clip-trim-handle {
  position: absolute; bottom: 0; width: 10px; height: 10px;
  background: rgba(59, 111, 212, 0.85); border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: ew-resize; z-index: 2;
  display: none;
}
#tab-editor .editor-track-clip:hover .clip-trim-handle { display: block; }
#tab-editor .clip-trim-handle--left  { left: 0; }
#tab-editor .clip-trim-handle--right { right: 0; }

/* Затемнённые треугольные оверлеи зон фейд-ин/фейд-аут — позиция и ширина задаются
   в JS (renderEditorClipFades, на основе fadeInZone/fadeOutZone) в px; видны всегда,
   когда фейд > 0 (по умолчанию width=0 — оверлей не виден) */
#tab-editor .clip-fade-overlay {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}
#tab-editor .clip-fade-overlay--in  { clip-path: polygon(0 0, 100% 0, 0 100%); }
#tab-editor .clip-fade-overlay--out { clip-path: polygon(100% 0, 100% 100%, 0 0); }

/* Треугольные хендлы фейд-ин/фейд-аут в верхних углах клипа (как в Cubase) — скрыты
   по умолчанию, появляются только когда курсор мыши находится над клипом (как и
   .clip-trim-handle); позиция задаётся в JS на основе fadeInZone/fadeOutZone */
#tab-editor .clip-fade-handle {
  position: absolute; top: 0; left: 0; width: 10px; height: 10px;
  background: #ffffff;
  cursor: ew-resize; z-index: 3;
  display: none;
}
#tab-editor .editor-track-clip:hover .clip-fade-handle { display: block; }
/* Вершина (прямой угол) — в точке fadeIn/fadeOut, сам треугольник уходит ВНУТРЬ
   клипа (вправо/вниз для fade-in, влево/вниз для fade-out), не вылезая за рамку */
#tab-editor .clip-fade-handle--in  { clip-path: polygon(0 0, 100% 0, 0 100%); }
#tab-editor .clip-fade-handle--out { clip-path: polygon(100% 0, 100% 100%, 0 0); }

/* Линия-ориентир уровня собственного гейна клипа (clip.gain) — 1px от края до края
   клипа, у верхнего края квадратика-хендла .clip-gain-handle; видна только при
   наведении (как и остальные хендлы клипа) */
#tab-editor .clip-gain-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: #e0473b;
  pointer-events: none;
  z-index: 3;
  display: none;
}
/* Квадратик-хендл собственного гейна клипа — по центру сверху, тянется вертикально
   (вниз — тише, вверх — громче); позиция .top задаётся в JS (renderEditorClipGain) */
#tab-editor .clip-gain-handle {
  position: absolute; left: 50%; margin-left: -5px; width: 10px; height: 10px;
  background: #e0473b; border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: ns-resize; z-index: 4;
  display: none;
}
#tab-editor .editor-track-clip:hover .clip-gain-line,
#tab-editor .editor-track-clip:hover .clip-gain-handle { display: block; }

/* Оверлей для drag-призрака клипа поверх всей сетки дорожек */
#tab-editor .editor-clips-overlay {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 50;
}
/* Внешний контейнер призрака — только маска обрезки по ширине колонки волны (как
   .track-wave-wrap, overflow:hidden), сам по себе невидим */
#tab-editor .editor-clip-ghost {
  position: absolute;
  cursor: grabbing;
  pointer-events: none;
  overflow: hidden;
}
/* Рамка + волна двигаются ВМЕСТЕ как единый полупрозрачный клип — повторяет вид
   .editor-track-clip (рамка/фон), но с прозрачностью, чтобы было видно клип под ним */
#tab-editor .editor-clip-ghost-inner {
  position: absolute;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #888;
  background: #23262d;
  opacity: 0.55;
}
#tab-editor .editor-clip-ghost-inner.is-live { border-color: #e0473b; }
#tab-editor .editor-clip-ghost .track-wave-canvas { display: block; width: 100%; height: 100%; }

/* Подсветка дорожки-цели при перетаскивании клипа */
#tab-editor #editor-center-panel-tracks .track-wave-wrap.track-wave-wrap--drag-over {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

/* Курсор воспроизведения поверх дорожек */
#tab-editor .editor-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(255,255,255,0.95);
  z-index: 55;
}
#tab-editor .editor-playhead[hidden] { display: none; }

/* Линия предпросмотра разреза (инструмент "Ножницы") — показывает, где пройдёт
   разрез клипа; при включённой сетке перескакивает по шагу привязки */
#tab-editor .editor-cut-line {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed rgba(255,90,90,0.9);
  z-index: 56;
  pointer-events: none;
}
#tab-editor .editor-cut-line[hidden] { display: none; }

/* Инструмент "Ножницы" активен — над клипами курсор-перекрестие вместо grab */
#tab-editor.editor-tool-cut .editor-track-clip { cursor: crosshair; }

/* Zoom/scale strip below tracks */
#tab-editor .editor-bottom-bar {
  display: flex; flex-direction: row; align-items: center;
  gap: 6px; flex-shrink: 0; height: 26px;
}
#tab-editor .editor-scroll-bar {
  flex: 1; height: 22px; position: relative;
  background: #1a1a1a; border: 1px solid #444; border-radius: 3px;
  overflow: hidden; cursor: pointer;
}
#tab-editor .editor-scroll-thumb {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 50%; min-width: 42px; background: #909090;
  border: none; border-radius: 3px; cursor: grab; padding: 0;
}
#tab-editor .editor-zoom-toolbar {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
#tab-editor .editor-zoom-btn {
  width: 26px; height: 22px; padding: 0;
  font-size: 16px; font-weight: 700; line-height: 1;
  border: 1px solid #505050; background: #282828; color: #fff;
  border-radius: 4px; cursor: pointer;
}
#tab-editor .editor-zoom-btn:hover { border-color: #909090; background: #333; }
#tab-editor .editor-zoom-label {
  font-size: 13px; color: #b3b3b3; min-width: 28px; text-align: center;
}

#tab-editor .editor-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#tab-editor #editor-dropzone {
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tab-mastering .dual-audio-cards .dropzone {
  height: 203px;
  overflow: hidden;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone span { color: var(--muted); font-size: 12px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone-picked-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.35;
  min-height: 2.7em;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .dropzone-picked-name[hidden] { display: -webkit-box !important; visibility: hidden; }

:is(#tab-mastering, #tab-minus, #tab-editor) .stem-list { display: grid; gap: 8px; margin-top: 10px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .stem-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font-size: 13px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .mini-wave,
:is(#tab-mastering, #tab-minus, #tab-editor) .track-wave {
  height: 12px;
  border-radius: 10px;
  border: 1px solid #909090;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px);
}

:is(#tab-mastering, #tab-minus, #tab-editor) .control {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; box-sizing: border-box;
  border: 2px solid #a0a0a0; color: #ffffff; background: #282828;
  border-radius: 6px; cursor: pointer;
  outline: none; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .control.control--transport-active {
  background: linear-gradient(#1db954, #158a3e);
  border-color: #1ed760;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .control:disabled {
  opacity: 0.35; cursor: default;
}
@keyframes minus-render-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
#tab-minus #minus-btn-play.minus-rendering {
  animation: minus-render-pulse 0.8s ease-in-out infinite;
  pointer-events: none;
}
/* Затемнение + красный спиннер при рендере тональности */
#minus-center-panel-tracks {
  position: relative;
}
@keyframes minus-spinner-spin {
  to { transform: rotate(360deg); }
}
#minus-center-panel-tracks.minus-processing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  border-radius: 6px;
  z-index: 10;
  pointer-events: none;
}
#minus-center-panel-tracks.minus-processing::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  margin-left: -23px;
  border: 4px solid rgba(220, 40, 40, 0.25);
  border-top-color: #e03030;
  border-right-color: #e03030;
  border-radius: 50%;
  animation: minus-spinner-spin 0.75s linear infinite;
  z-index: 11;
  pointer-events: none;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .pitch-label {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .pitch-num {
  border: 2px solid #a0a0a0; color: #ffffff; background: #282828;
  border-radius: 6px; padding: 7px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  outline: none;
  width: 64px;
  text-align: center;
  flex: 0 0 auto;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .pitch-num::-webkit-inner-spin-button,
:is(#tab-mastering, #tab-minus, #tab-editor) .pitch-num::-webkit-outer-spin-button {
  opacity: 1;
}
#tab-editor .editor-bpm-group {
  display: flex; align-items: center;
  border: 2px solid #a0a0a0; background: #282828;
  border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  padding-right: 8px;
  flex: 0 0 auto;
}
#tab-editor .editor-bpm-input {
  border: none; outline: none; background: transparent;
  color: #ffffff; padding: 7px 4px 7px 8px;
  width: 54px; text-align: center;
}
#tab-editor .editor-bpm-input::-webkit-inner-spin-button,
#tab-editor .editor-bpm-input::-webkit-outer-spin-button {
  opacity: 1;
}
#tab-editor .editor-bpm-suffix {
  color: var(--text); font-size: 13px; white-space: nowrap;
}

/* Курсор/Ножницы — переключатели инструмента редактора (взаимоисключающие) */
#tab-editor .editor-tool-toggle svg { display: block; }
#tab-editor .editor-tool-toggle.active {
  background: linear-gradient(#1db954, #158a3e);
  border-color: #1ed760;
}

/* Привязка по сетке (#) с выпадающим меню 1/1..1/16 */
#tab-editor .editor-snap-group { position: relative; flex: 0 0 auto; }
#tab-editor .editor-snap-btn {
  width: auto; padding: 4px;
  display: inline-flex; align-items: center; gap: 8px;
}
#tab-editor .editor-snap-hash-box {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  color: #e8e8e8;
}
#tab-editor .editor-snap-hash-box svg { display: block; }
#tab-editor .editor-snap-divider {
  width: 1px; height: 22px; flex: 0 0 auto; background: rgba(255,255,255,0.3);
}
/* Привязка к сетке включена — кнопка целиком синяя, как активные кнопки
   транспорта (плей/пауза/стоп), но в синей градации вместо зелёной */
#tab-editor .editor-snap-btn:not(.snap-disabled) {
  background: linear-gradient(#3b6fd4, #1a4a9e);
  border-color: #7eb6ff;
}
#tab-editor .editor-snap-value {
  font-size: 15px; font-weight: 600; white-space: nowrap; color: #e8e8e8;
  display: inline-block; min-width: 34px; text-align: center;
}
#tab-editor .editor-snap-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  color: #cfcfcf; padding-right: 2px;
}
#tab-editor .editor-snap-arrow svg { display: block; }
/* Меню открывается вверх от кнопки и примыкает к ней, образуя одну фигуру:
   у кнопки сверху нет скругления (рамка продолжается в меню), у меню снизу
   нет ни скругления, ни границы — рамка кнопки сверху служит общим швом.
   position: fixed — координаты считаются в JS при открытии, чтобы меню не
   обрезалось overflow:hidden у .cursor-time-pane */
#tab-editor .editor-snap-btn.menu-open {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#tab-editor .editor-snap-menu {
  position: fixed;
  display: flex; flex-direction: column;
  background: #282828;
  border: 2px solid #7eb6ff;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.6);
  overflow: hidden; z-index: 1000;
}
#tab-editor .editor-snap-option {
  border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 7px 12px; text-align: center;
  cursor: pointer; white-space: nowrap;
}
#tab-editor .editor-snap-option:hover { background: rgba(59,111,212,0.25); }
#tab-editor .editor-snap-option.active { color: #3b6fd4; font-weight: 700; }
/* Привязка к сетке выключена — значок, разделитель, значение и стрелка засерены;
   стрелка/значение перестают быть кликабельными (меню недоступно) */
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-hash-box,
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-divider,
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-value,
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-arrow {
  opacity: 0.35;
}
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-value,
#tab-editor .editor-snap-btn.snap-disabled .editor-snap-arrow {
  cursor: default;
}

:is(#tab-mastering, #tab-minus, #tab-editor) .split-btn { width: 100%; margin-top: 10px; margin-bottom: 10px; min-height: 36px; }
:is(#tab-minus, #tab-editor) .split-queue-msg {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: rgba(255, 180, 0, 0.1);
  border: 1px solid rgba(255, 180, 0, 0.35);
  border-radius: 6px;
  color: #f5c842;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
  animation: split-queue-fadein 0.3s ease;
}
@keyframes split-queue-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

:is(#tab-mastering, #tab-minus, #tab-editor) .preview {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  width: fit-content;
  gap: clamp(8px, 1.2vw, 12px);
  padding: 0;
  align-items: stretch;
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .video-pane { position: relative; border: 1px solid #909090; overflow: hidden; border-radius: 6px; height: 100%; }
:is(#tab-mastering, #tab-minus, #tab-editor) .video-pane.player-pane { display: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .preview.panel { border: none; background: none; box-shadow: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .right-pane { width: 507px; flex: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .player-pane {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 8px;
  background: #181818;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .player-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid #909090;
  border-radius: 6px;
  overflow: hidden;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 20%, #ffc77b 0%, #a45f3a 20%, #1e1e1e 65%, #121212 100%);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .preview-media-matte { position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; opacity: 0; }
:is(#tab-mastering, #tab-minus, #tab-editor) .preview-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-color: #000; }
:is(#tab-mastering, #tab-minus, #tab-editor) .player-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; pointer-events: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .player-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; }

:is(#tab-mastering, #tab-minus, #tab-editor) .player-controls {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 6px;
  min-width: 0;
  box-sizing: border-box;
  border-color: #121212;
  background: #121212;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .player-controls input[type="range"] { width: calc(100% - 12px); max-width: calc(100% - 12px); min-width: 0; box-sizing: border-box; margin: 0 6px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .time { color: #ffffff; font-size: 13px; line-height: normal; }

:is(#tab-mastering, #tab-minus, #tab-editor) .right-pane { min-width: 0; }
:is(#tab-mastering, #tab-minus, #tab-editor) .right-pane--split {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .right-pane.right-pane--split { min-height: 410px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .ad-pane.ad-pane--top {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  display: grid;
  place-items: center;
  background: #121212;
  border: 1px solid #909090;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .ad-pane.ad-pane--top .ad-wrap {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .ad-pane.ad-pane--top .ad-slot {
  border: 1px dashed #121212;
  border-radius: 6px;
  background: #121212;
  width: 100%;
  height: 100%;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-time-pane {
  flex: 0 0 auto;
  height: auto;
  background: linear-gradient(180deg, #282828 0%, #1e1e1e 100%);
  display: flex;
  align-items: stretch;
  padding: 6px;
  gap: 6px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-time-pane .time {
  display: flex;
  align-items: center;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-time-pane input[type="range"] {
  align-self: center;
}
/* На #tab-minus в блоке курсора (под рекламой) добавляется регулятор тональности –
   ползунку позиции не хватает места рядом с тремя кнопками, временем и спойлером
   тональности, поэтому он сжимается под доступную ширину вместо фиксированной */
#tab-minus .right-pane--split .cursor-time-pane input[type="range"] { flex: 1; min-width: 0; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-tool-btn { padding: 7px 10px; font-size: 16px; line-height: 1; min-width: 34px; text-align: center; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-tool-btn--wide { white-space: nowrap; font-size: 11px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-tool-btn--active { background: linear-gradient(#1db954, #158a3e); border-color: #1ed760; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-tool-btn--disabled { opacity: 0.35; cursor: not-allowed !important; pointer-events: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .cursor-time-display {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .editing-countdown-hint { display: none; font-size: 11px; line-height: 1.4; color: var(--muted); flex: 1; padding: 0 8px; }
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-beats-spinner {
  display: none;
  flex-direction: column;
  border: 2px solid #a0a0a0;
  border-radius: 6px;
  background: #282828;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-beats-btn {
  appearance: none; border: none; background: transparent; color: #ffffff; cursor: pointer;
  padding: 0 8px; font-size: 9px; flex: 1; display: flex; align-items: center; justify-content: center; line-height: 1;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-beats-btn:hover { background: rgba(255,255,255,0.12); }
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-beats-btn:first-child { border-bottom: 1px solid #555555; }
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-source {
  border-color: #7eb6ff;
  background: linear-gradient(#3b6fd4, #1a4a9e);
  letter-spacing: 2px;
  cursor: grab;
  user-select: none;
  display: none;
  justify-content: center;
  text-align: center;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .countdown-source:active { cursor: grabbing; opacity: 0.85; }

:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 8px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 800;
  font-family: var(--preview-lyrics-font, "Segoe UI", Arial, sans-serif);
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics:empty { display: none; }
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line { margin: 0; max-width: 92%; justify-self: center; font-size: var(--preview-lyrics-size, 24px); line-height: 1.35; }
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line--karaoke { font-size: var(--preview-lyrics-size, 24px); }
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line--karaoke .lyrics-line__outer {
  position: relative; display: inline-block; max-width: 100%; text-align: center;
  font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line--karaoke .lyrics-line__base {
  position: relative; z-index: 0;
  color: var(--preview-lyrics-base, #ffffff);
  -webkit-text-stroke: var(--preview-lyrics-outline-width, 2px) var(--preview-lyrics-outline, #000000);
  paint-order: stroke fill;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line--karaoke .lyrics-line__fill-wrap {
  position: absolute; left: 0; top: 0; height: 100%; width: 0; overflow: hidden; pointer-events: none; z-index: 1;
  display: none !important;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .lyrics-line--karaoke .lyrics-line__fill {
  display: inline-block;
  color: var(--preview-lyrics-fill, #00ff00);
  -webkit-text-stroke: var(--preview-lyrics-outline-width, 2px) var(--preview-lyrics-outline, #000000);
  paint-order: stroke fill;
  white-space: nowrap;
}
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(100% - (40px + (var(--preview-lyrics-size, 24px) * 1.12) + 2px));
  transform: translateY(-50%);
  height: calc((var(--preview-lyrics-size, 24px) * 2.25 + 10px) * var(--preview-lyrics-stripe-height-scale, 1));
  background: var(--preview-lyrics-stripe-color, #a0a0a0);
  opacity: var(--preview-lyrics-stripe-opacity, 0.55);
  z-index: 0;
  pointer-events: none;
}
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics-line { position: relative; z-index: 1; }
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 clamp(6px, 3%, 20px) 40px;
  transform: translateY(calc(var(--preview-lyrics-stripe-position, 0) * (-1% + 1.2px)));
}
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics-tracks-billboard {
  position: absolute;
  left: clamp(6px, 3%, 20px);
  right: clamp(6px, 3%, 20px);
  top: calc(100% - (40px + (var(--preview-lyrics-size, 24px) * 1.12) + 2px));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics-tracks-billboard .lyrics-line { line-height: 1.12; }
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics-tracks-billboard .lyrics-line:first-of-type .lyrics-line__outer { white-space: normal; }
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics .lyrics-line { width: 100%; max-width: 100%; justify-self: stretch; }
:is(#tab-mastering, #tab-minus, #tab-editor) #live-player-frame .lyrics .lyrics-line .lyrics-line__outer {
  display: block; width: 100%; max-width: 100%; white-space: normal; text-align: center; box-sizing: border-box;
}

:is(#tab-mastering, #tab-minus, #tab-editor) .stems {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .center-panel-tracks {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-block {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 150px;
  grid-template-rows: 44px 34px;
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-download-buttons {
  grid-column: 3; grid-row: 1 / 3;
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; align-self: stretch;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-download-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; text-align: center;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-download-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
@keyframes tab-mastering-pulse-hint {
  0%   { border-color: rgba(255,255,255,0.9); box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 18px rgba(255,255,255,0.35); }
  50%  { border-color: rgba(255,20,20,1);     box-shadow: 0 0 0 3px rgba(255,40,40,0.6), 0 0 22px rgba(220,0,0,0.4); }
  100% { border-color: rgba(255,255,255,0.9); box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 18px rgba(255,255,255,0.35); }
}
:is(#tab-mastering, #tab-minus, #tab-editor) .pulse-hint:not(:disabled) {
  animation: tab-mastering-pulse-hint 0.8s ease-in-out infinite;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-head {
  grid-column: 1; grid-row: 1;
  font-weight: 600; font-size: 14px; height: 44px; line-height: 1.25;
  display: flex; align-items: center; box-sizing: border-box;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 4px;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-toolbar { grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; }
:is(#tab-mastering, #tab-minus, #tab-editor) .track-wave-wrap {
  position: relative;
  grid-column: 2; grid-row: 1 / 3;
  display: flex; align-items: stretch; align-content: stretch;
  align-self: stretch; width: 100%; min-width: 0; min-height: 0; height: 100%;
  border: 2px solid #909090; border-radius: 6px; padding: 6px 10px;
  background: rgba(18, 18, 18, 0.65); box-sizing: border-box;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .track-wave-canvas { width: 100%; height: 100%; min-height: 0; flex: 1; border: 0; background: transparent; display: block; }

/* Дорожка: оверлей "перетащите файл / выбрать файл" до загрузки аудио */
#tab-editor .track-dropzone {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 8px; padding: 8px 14px;
  text-align: left;
  border-radius: 4px;
  transition: background 0.15s;
}
#tab-editor .track-dropzone.track-dropzone--over {
  background: rgba(59, 111, 212, 0.1);
}
#tab-editor .track-dropzone[hidden] { display: none; }
#tab-editor .track-dropzone-hint {
  margin: 0; font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#tab-editor .track-dropzone-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
#tab-editor .track-dropzone-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
:is(#tab-mastering, #tab-minus, #tab-editor) .mute-btn {
  appearance: none;
  border: 1px solid #909090;
  background: #1e1e1e;
  border-radius: 6px;
  width: 34px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  vertical-align: middle;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .mute-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
}
:is(#tab-mastering, #tab-minus, #tab-editor) .mute-btn.muted {
  background: #1e1e1e;
  border-color: #ff2020;
  margin: 0;
  font-size: inherit;
  color: inherit;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .mute-btn.muted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff2020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
}
:is(#tab-mastering, #tab-minus, #tab-editor) .vol-range { width: 120px; flex: 0 0 auto; }
/* Вертикальный thumb — синий, высокий (как ручка микшерного фейдера) */
#tab-editor .mixer-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(to bottom,
    #c8deff 0%,
    #6699ee 20%,
    #3366cc 44%,
    #eef2ff 48%, #ffffff 50%, #eef2ff 52%,
    #3366cc 56%,
    #1a50b8 80%,
    #0d3a99 100%);
  border: 1px solid #0033aa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  cursor: pointer;
}
#tab-editor .mixer-fader::-moz-range-track {
  width: 4px;
  background: #1db954;
  border-radius: 2px;
}
#tab-editor .mixer-fader::-moz-range-thumb {
  width: 28px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(to bottom,
    #c8deff 0%, #6699ee 20%, #3366cc 44%,
    #eef2ff 48%, #ffffff 50%, #eef2ff 52%,
    #3366cc 56%, #1a50b8 80%, #0d3a99 100%);
  border: 1px solid #0033aa;
  cursor: pointer;
}
:is(#tab-mastering, #tab-minus, #tab-editor) .vol-num {
  width: 56px; height: 24px; border: 1px solid #909090; border-radius: 5px;
  background: #1e1e1e; color: #ffffff; text-align: center; flex: 0 0 auto;
}

@media (max-width: 880px) {
  :is(#tab-mastering, #tab-minus, #tab-editor).tab-pane .pane-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  :is(#tab-mastering, #tab-minus, #tab-editor) .heading-and-cards,
  :is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .preview,
  :is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .stems {
    grid-column: 1;
  }
  :is(#tab-mastering, #tab-minus, #tab-editor) .heading-and-cards {
    flex-direction: column;
    width: 100%;
  }
  :is(#tab-mastering, #tab-minus, #tab-editor) .heading-and-cards-left,
  :is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter-box {
    flex: none;
    width: 100%;
  }
  :is(#tab-mastering, #tab-minus, #tab-editor) .loudness-meter { width: 100%; max-width: 220px; margin: 0 auto; }
  :is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .preview {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    justify-self: stretch;
  }
  :is(#tab-mastering, #tab-minus, #tab-editor) .workspace--tracks .stems { grid-row: 3; }
  :is(#tab-mastering, #tab-minus, #tab-editor) .preview { grid-template-columns: 1fr; }
  :is(#tab-mastering, #tab-minus, #tab-editor) .center-panel-tracks { grid-template-rows: auto auto auto; }
  :is(#tab-mastering, #tab-minus, #tab-editor) .track-block { height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SEO-лендинги (/vocal-remover/, /audio-editor/, /mastering/ и /en/…)
   ═══════════════════════════════════════════════════════════════ */

.seo-page .pane-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.seo-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seo-hero .pane-title {
  font-size: 28px;
  line-height: 1.25;
}

.seo-lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.seo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.seo-cta-row .primary-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.seo-section h2 {
  font-size: 20px;
  margin: 0 0 10px;
}

.seo-section h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.seo-section p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.seo-section p:last-child { margin-bottom: 0; }

.seo-features,
.seo-steps,
.seo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.seo-features li,
.seo-list li {
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.seo-features li b,
.seo-list li b { color: var(--accent); }

.seo-steps {
  counter-reset: seo-step;
}
.seo-steps li {
  padding: 12px 14px 12px 46px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.seo-steps li::before {
  counter-increment: seo-step;
  content: counter(seo-step);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #0b1c10;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 620px) {
  .seo-features,
  .seo-steps,
  .seo-list {
    grid-template-columns: 1fr 1fr;
  }
}

.seo-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seo-faq-item {
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.seo-faq-item h3 { margin: 0 0 6px; }
.seo-faq-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.seo-tools-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seo-tools-nav .nav-btn { text-decoration: none; }

.seo-breadcrumbs {
  font-size: 13px;
  color: var(--muted);
}
.seo-breadcrumbs a { color: var(--accent); text-decoration: none; }
.seo-breadcrumbs a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .seo-hero .pane-title { font-size: 22px; }
}

/* ── Кастомные тултипы ──────────────────────────────────────── */
#vt {
  position: fixed;
  z-index: 99999;
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #909090;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 230px;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: normal;
  text-align: center;
  display: none;
}
#vt.vt-on {
  display: block;
  opacity: 1;
}
#vt.vt-fade {
  display: block;
  opacity: 0;
}
#vt::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}
#vt.vt-top::after {
  top: 100%;
  border-top-color: #909090;
}
#vt.vt-bot::after {
  bottom: 100%;
  border-bottom-color: #909090;
}