/* Общие дизайн-токены (цвета, базовые размеры) для всех страниц webapp/.
   Единый источник вместо копипасты :root{...} по каждому html-файлу —
   при разъезде значений между страницами это было легко не заметить. */
:root{
  --ac:#3DD6C8;        /* акцент (бирюзовый) — СТРОГО основные действия (кнопки-CTA, лого) */
  --ac-tx:#06231f;     /* текст на акцентном фоне */
  --ac-tint:#16302d;   /* приглушённый акцентный фон (плашки, бейджи) */
  --sec:#6b8299;       /* вторичный (приглушённый синевато-серый) — состояния:
                          чекбоксы/тумблеры, выделение текущего элемента списка,
                          слайдеры настроек. Не для кликабельных действий. */
  --bg:#15161a;        /* фон страницы */
  --panel:#1f2127;     /* фон карточки */
  --panel2:#2a2c33;    /* фон вложенных элементов (инпуты, вставки) */
  --bd:#34363d;        /* границы */
  --tx:#e4e4e7;        /* основной текст */
  --mut:#8c8e96;       /* второстепенный текст */
  --link:#4bd6c8;      /* ссылки */
  --err:#f2a6a6;       /* ошибки */
  --ok:#6ee7b7;        /* успех */
  --hdr:58px;          /* высота шапки (студия/редактор шортсов) */
  /* Звуковая волна на таймлайне (webapp/static/timeline.js) — два слоя:
     огибающая (максимум по пикселю) тусклее, «тело» (среднее) светлее.
     Разделение цветом обязательно: на отдалённом масштабе в один пиксель
     попадают десятки значений, и одноцветная волна вырождается в прямоугольник. */
  --wave-env:#4a5c6e;
  --wave-body:#7f9ab5;
  --font-display:'Montserrat ExtraBold','Montserrat',system-ui;  /* лого, заголовки —
                          тот же шрифт, что в самом рендере (хук-плашка/субтитры),
                          используется точечно (лого + hero), не для основного текста */
}
html{color-scheme:dark}
/* Тот же файл, что грузит libass при рендере (assets/fonts/, см. pipeline/config.py:
   FONTS_DIR) и canvas-превью в shorts.html — теперь и для UI-хрома (лого/заголовки),
   единым @font-face на всё приложение вместо копии в одном файле. */
@font-face{
  font-family:'Montserrat ExtraBold';
  font-weight:800;
  font-display:swap;
  /* woff2 первым — тот же контур, что и .ttf (используется бэкендом для
     libass/Pillow-замера, см. pipeline/styles.py), просто эффективнее
     упакован: 455 КБ -> 130 КБ (71.5%, замерено). .ttf вторым — фолбэк для
     совсем старых браузеров, которых у этого сервиса практически нет. */
  src:url('/fonts/Montserrat-ExtraBold.woff2') format('woff2'),
      url('/fonts/Montserrat-ExtraBold.ttf') format('truetype');
}

/* Подсказки по наведению: чистый CSS, без JS/таймеров.
   Задержка появления — на transition-delay ::after (только при :hover;
   при уходе курсора используется базовое правило с delay:0, поэтому
   подсказка прячется сразу, а не спустя 2с). data-tooltip-pos управляет
   стороной (по умолчанию — сверху) для кнопок у края экрана. */
[data-tooltip]{position:relative}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,4px);
  background:var(--panel2);
  color:var(--tx);
  border:1px solid var(--bd);
  padding:5px 9px;
  border-radius:6px;
  font-size:12px;
  line-height:1.3;
  font-weight:400;
  white-space:normal;
  width:max-content;
  max-width:min(60vw,320px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1000;
  transition:opacity .12s ease,visibility .12s ease,transform .12s ease;
}
[data-tooltip]:hover::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  transition-delay:2s;
}
[data-tooltip][data-tooltip-pos="bottom"]::after{
  left:50%;
  bottom:auto;
  top:calc(100% + 8px);
  transform:translate(-50%,-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after{
  transform:translate(-50%,0);
}
[data-tooltip][data-tooltip-pos="left"]::after{
  left:auto;
  right:calc(100% + 8px);
  bottom:auto;
  top:50%;
  transform:translate(4px,-50%);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after{
  transform:translate(0,-50%);
}
[data-tooltip][data-tooltip-pos="right"]::after{
  left:calc(100% + 8px);
  bottom:auto;
  top:50%;
  transform:translate(-4px,-50%);
}
[data-tooltip][data-tooltip-pos="right"]:hover::after{
  transform:translate(0,-50%);
}
/* bottom-right: правый край подсказки = правый край кнопки, растёт влево —
   для элементов у правого края экрана (шапки страниц), где центрированная
   "bottom" вылезала бы за границу вьюпорта. */
[data-tooltip][data-tooltip-pos="bottom-right"]::after{
  left:auto;
  right:0;
  bottom:auto;
  top:calc(100% + 8px);
  transform:translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom-right"]:hover::after{
  transform:translateY(0);
}
@media (hover:none){
  [data-tooltip]::after{display:none}
}

/* Ползунок перемотки с зонами ручных вырезов (docs/CUT_FEATURE_PLAN.md).
   Красные участки показывают, ПОЧЕМУ воспроизведение перескакивает — без них
   пропуск вырезанного выглядел бы как сбой плеера. Градиент считает
   utils.js:seekGradientJS и кладёт в --cutgrad; заполнение до текущего момента
   там же первым слоем (штатный accent-color при кастомном треке уже не
   работает, поэтому прогресс рисуем сами). Класс, а не тег: обычные ползунки
   настроек (размер шрифта, отступ) должны остаться нативными. */
input[type=range].seek-cuts{
  -webkit-appearance:none;appearance:none;
  background:transparent;height:16px;cursor:pointer;
}
input[type=range].seek-cuts::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background-color:var(--panel2);
  background-image:var(--cutgrad,none);
  background-repeat:no-repeat;
}
input[type=range].seek-cuts::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--ac);
  border:0;margin-top:-4px;
}
input[type=range].seek-cuts::-moz-range-track{
  height:6px;border-radius:3px;
  background-color:var(--panel2);
  background-image:var(--cutgrad,none);
  background-repeat:no-repeat;
}
input[type=range].seek-cuts::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:50%;background:var(--ac);
}

/* Кастомный модал (webapp/static/utils.js: customConfirm/customAlert/
   customPrompt) — замена нативных confirm()/alert()/prompt(). Общий для
   всех страниц, подключающих theme.css, — сам оверлей/бокс создаётся и
   удаляется из DOM в JS, здесь только визуальное оформление. */
.cm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:16px;
}
.cm-box{
  background:var(--panel);border:1px solid var(--bd);border-radius:12px;
  padding:20px;max-width:420px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.cm-msg{color:var(--tx);font-size:14px;line-height:1.5;white-space:pre-line}
.cm-input{
  width:100%;margin-top:12px;padding:8px 10px;box-sizing:border-box;
  background:var(--panel2);border:1px solid var(--bd);border-radius:8px;
  color:var(--tx);font:inherit;
}
.cm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.cm-btn{
  padding:8px 16px;border:0;border-radius:8px;font-weight:600;
  font:inherit;cursor:pointer;background:var(--panel2);color:var(--tx);
}
.cm-btn.cm-ok{background:var(--ac);color:var(--ac-tx)}
.cm-btn.cm-ok.cm-danger{background:#43262a;color:var(--err)}
.cm-btn:hover{filter:brightness(1.12)}