/* Пока Vue не поднялся, страница не показывается.
   Иначе на долю секунды видна неготовая разметка: выражения вида
   {{ entry.teg }} прямо в ячейках, а поверх них — окно выдачи и окно
   настройки телеграма во весь экран. Они прячутся классом, который
   навешивает Vue, и до его запуска честно рисуются.

   !important обязателен: правило по атрибуту весит меньше, чем #Main
   ниже, и без него молча отменяется. */
[v-cloak] { display: none !important; }

#Main {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.ui.dropdown .menu {
    /* было "abspolute" — опечатка, из-за неё всё правило браузер отбрасывал */
    position: absolute !important;
    z-index: 999 !important;
    transform-origin: top left;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* ───────────────────────────────────────────────
   Список аккаунтов в шапке.
   Был одним длинным столбцом во всю ширину имени — при десятке аккаунтов
   вылезал за правый край экрана. Теперь колонки, мелкий шрифт и ограничение
   по высоте; если у края не помещается, js прижимает его правым краем.
   ─────────────────────────────────────────────── */
#menuOtkr { display: none; }
#menuOtkr.otkryt {
    display: grid !important;
}
#menuOtkr {
    /* Колонки и строки крупнее: в аккаунт нужно попадать пальцем,
       а имена бывают длинные и в 112px не помещались.

       ВАЖНО: ширину задаёт js (otkrytMenuAkk) по числу аккаунтов.
       Раньше здесь стояло width: max-content, и вместе с auto-fill это
       разворачивало весь список в ОДНУ строку: max-content складывает
       ширину всех колонок, переносить их некуда. */
    grid-template-columns: repeat(var(--kolonok-akk, 3), minmax(0, 1fr));
    gap: 2px;
    min-width: 0 !important;
    width: min(640px, 94vw);
    max-width: 94vw;
    box-sizing: border-box;
    /* Высоту ставит js (vysotaMenuAkk) — по месту от списка до низа
       экрана. Здесь только запас на случай, если скрипт не отработал. */
    max-height: 80vh;
    overflow-y: auto;
    padding: 5px !important;
}
#menuOtkr .item {
    padding: 7px 10px !important;
    font-size: 13.5px !important;
    line-height: 20px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 3px;
    border: 0 !important;
}
#menuOtkr .item:hover { background: #eef1f4 !important; }

/* Открытый сейчас аккаунт. Затемнён, а не выделен цветом: цветов в панели
   и без того хватает, а тут нужно только «ты здесь». Наведение на него
   ничего не меняет — переходить некуда. */
#menuOtkr .item.vybran {
    background: #cfd6dd !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #a8b3bf;
    cursor: default;
}
#menuOtkr .item.vybran:hover { background: #cfd6dd !important; }
/* Пока строку тянут, подсветка переноса важнее отметки «открыт» */
#menuOtkr .item.vybran.tyanetsya {
    background: #dbe7f3 !important;
    box-shadow: inset 0 0 0 1px #7ea9d1;
}
html[data-tema="noch"] #menuOtkr .item.vybran,
html[data-tema="noch"] #menuOtkr .item.vybran:hover {
    background: #39414a !important;
    box-shadow: inset 0 0 0 1px #56606b;
}
html[data-tema="noch"] #menuOtkr .item.vybran.tyanetsya {
    background: #24344a !important;
    box-shadow: inset 0 0 0 1px #3f6183;
}

/* Ручка перетаскивания в списке аккаунтов.
   touch-action:none обязателен: без него палец на ручке браузер считает
   прокруткой и перетаскивание не начинается вовсе. Стоит он ТОЛЬКО на
   ручке — на остальной строке прокрутка списка должна работать как обычно. */
#menuOtkr .menu-ruchka {
    display: inline-block;
    touch-action: none;
    margin-right: 6px;
    padding: 0 2px;
    color: #9aa3ad;
    cursor: grab;
    /* Палец должен попадать по ручке, а не по строке рядом */
    font-size: 15px;
    line-height: 20px;
    vertical-align: -1px;
    user-select: none;
    -webkit-user-select: none;
}
#menuOtkr .menu-ruchka:hover { color: #5c6672; }
#menuOtkr .menu-ruchka:active { cursor: grabbing; }

/* Ячейка, которую сейчас тянут: видно, что она подхвачена */
#menuOtkr .item.tyanetsya {
    background: #dbe7f3 !important;
    box-shadow: inset 0 0 0 1px #7ea9d1;
    opacity: .85;
}
html[data-tema="noch"] #menuOtkr .menu-ruchka { color: #7d8794; }
html[data-tema="noch"] #menuOtkr .menu-ruchka:hover { color: #c3c9d0; }
html[data-tema="noch"] #menuOtkr .item.tyanetsya {
    background: #24344a !important;
    box-shadow: inset 0 0 0 1px #3f6183;
}
/* ===========================================================
   РАСКЛАДКА СТРАНИЦЫ: колонка во всю высоту экрана.
   Меню сверху и футер снизу — своей высоты,
   таблица посередине прокручивается внутри себя.
   =========================================================== */
html, body {
  height: 100%;
  margin: 0;
}

#Main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;      /* на телефоне учитывает панель браузера */
  box-sizing: border-box;
  max-width: 100%;
  /* overflow тут НЕ ставим: он обрезал бы выпадающие меню
     и всплывающее окно настройки телеграма */
}

/* Меню сверху: своей высоты */
#menu {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* Контейнер таблицы прокручивается сам и ВСЕГДА занимает всю свободную
   высоту (flex-grow: 1), поэтому футер прижат к низу экрана даже при
   коротком списке.
   Это важно не только для вида: у контейнера overflow: auto, а такой
   контейнер ОБРЕЗАЕТ выпадающие окна (инфо о ролике, о канале и т.д.) —
   они не могут вылезти за его нижнюю границу. Когда контейнер доходит
   до низа экрана, окнам хватает места и они не прячутся под футером. */
#tablWrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

/* Таблица по ширине содержимого: не ужимается в экран,
   иначе на телефоне 27 колонок схлопываются в кашу */
#video {
  width: auto;
  min-width: 100%;
  margin-bottom: 0;
}

/* Футер сразу за таблицей */
.ui.borderless.menu {
  /* relative + низкий z-index: футер рисуется ПОД выпадающими окнами,
     у которых z-index 1000-2000 */
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  min-height: 0;
  background-color: white;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px;
  flex-wrap: wrap;
}

/* Прилипающая шапка таблицы.
   Правило стоит ДО медиазапроса: у мобильного правила такая же
   специфичность, и выигрывает то, что идёт в файле позже. */
#video thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  z-index: 5;
}

/* --- СЕНСОРНЫЕ ЭКРАНЫ ---
   (pointer: coarse) ловит телефон/планшет даже при включённом
   "виде для ПК", когда медиазапрос по ширине не срабатывает.

   Здесь колонка во всю высоту отключается совсем: страница обычная,
   скроллится целиком вниз и вбок, ничего не залипает.
   #Main становится inline-block — он ужимается/растягивается по
   содержимому, то есть шириной с таблицу, и меню с футером (width: 100%)
   тянутся на ту же ширину, а не в ширину экрана. */
@media (max-width: 700px), (pointer: coarse) {

  html, body {
    height: auto;
    width: auto;
    max-width: none;
    overflow-x: visible;
  }

  #Main {
    display: inline-block;
    vertical-align: top;
    height: auto;
    min-width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 4px;
  }

  /* Контейнер перестаёт быть областью прокрутки */
  #tablWrap {
    overflow: visible;
    max-height: none;
    height: auto;
    width: 100%;
  }

  /* Шапка не прилипает — уезжает вместе со страницей */
  #video thead th {
    position: static;
  }

  /* Меню сверху: таблица в одну строку во всю ширину */
  #menu {
    display: table;
    width: 100%;
    max-width: none;
  }
  #menu > tbody > tr > td {
    white-space: nowrap;
  }

  /* Футер: во всю ширину таблицы, элементы в одну строку */
  .ui.borderless.menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: 1px solid #ccc;
    font-size: 12px;
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px)) 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  #video th, #video td {
    padding: 2px 5px;
    font-size: 12px;
  }
}

/* Крутилка для индикатора загрузки таблицы */
.bustik-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #ccc;
  border-top-color: #2185d0;
  border-radius: 50%;
  animation: bustik-spin 0.7s linear infinite;
}
@keyframes bustik-spin {
  to { transform: rotate(360deg); }
}

/* Улучшенный стиль для активной страницы пагинации */
.ui.borderless.menu .item.active {
  font-weight: bold;
  background-color: #f0f0f0;
}

/* Стиль для наведения на элементы пагинации */
.ui.borderless.menu .item:hover {
  background-color: #f5f5f5;
}

/* Подсветка выбранной строки убрана по просьбе.
   Класс negative по-прежнему вешается на строку при клике (в разметке),
   так что вернуть подсветку можно, раскомментировав правило ниже. */
/*
.negative {
  background-color: lightyellow !important;
}
*/

.text-red {
    color: rgb(217, 92, 92);
}
.notice {
    font-size: small;
    color: gray;
}
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные рамки */
   }
   th, td {
    border: 1px solid #333; /* Параметры рамки */
     padding: 2px 3px;/* Поля в ячейках — компактно */
     vertical-align: middle;
   }

   /* Компактная шапка таблицы (прилипание задаётся отдельно, выше по файлу) */
   thead th {
     background: #f0f0f0;
     white-space: nowrap;   /* название и цифра в одну строку, шапка не растёт вверх */
     padding: 1px 4px;      /* шапка ниже по высоте */
     font-size: 11px;
     line-height: 1.15;
     font-style: normal;
   }
   /* Подсветка строки при наведении убрана по просьбе: строка и так
      читается, а заливка перебивала собственные цвета заказов
      (выполнен, остановлен, оплачен). */
.td-centered {
  padding: 2px;
  margin: 0;
  text-align: center;
  vertical-align: middle;
}
.img-centered {
  display: block;
  margin: 0 auto;
  object-fit: contain;
 
}
#response-popup {
  position: static;   /* положение задаёт зона #zona-soobshenij */
  background-color: #4CAF50;
   border: 1px solid #ccc;
  color: white;
  padding: 15px;
  display: none;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Добавляем стили для мобильных устройств */
  max-width: 90%; /* Ширина не более 90% от ширины экрана */
  word-wrap: break-word; /* Перенос слов для маленьких экранов */
}
#error-popup {
  position: static;   /* положение задаёт зона #zona-soobshenij */
  
            
            
  background-color: #b81414;
   border: 1px solid #ccc;
  color: white;
  padding: 15px;
  display: none;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Добавляем стили для мобильных устройств */
  max-width: 90%; /* Ширина не более 90% от ширины экрана */
  word-wrap: break-word; /* Перенос слов для маленьких экранов */
}
.table-container {

  max-height: 900px; /* Установите максимальную высоту контейнера, чтобы он мог прокручиваться */
  overflow-y: auto; /* Разрешить вертикальную прокрутку при необходимости */
}

/* правило #video thead th перенесено выше, до медиазапроса */
 
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f2f2f2;
}

.td-centered {
  text-align: center;
  vertical-align: middle;
}

.img-centered {
  cursor: pointer;
  transition: opacity 0.2s;
}

.img-centered:hover {
  opacity: 0.85;
}


.youtube-cell-container {
  position: relative;
}
.dop-popup-table {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 900px; /* Fixed width */
  max-height: 900px;
  overflow-y: auto;
  overflow-x: hidden; /* Hide horizontal scrollbar */
   z-index: 1500;
}

.youtube-popup-table {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 900px; /* Fixed width */
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden; /* Hide horizontal scrollbar */
   z-index: 1500;
}

.youtube-close {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 5px;
  right: 10px;
  color: red;
  line-height: 1;
}

.youtube-video-details {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.youtube-video-details th, .youtube-video-details td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.youtube-video-details th {
  background-color: #f8f8f8;
  color: brown;
  white-space: nowrap; /* Prevent wrapping of header text */
  overflow: hidden;    /* Hide overflow content */
  text-overflow: ellipsis; /* Show ellipsis for overflow text */
  text-align: center;
}

/* Row with multiple headers */
.youtube-video-details tr:nth-child(2) th {
  font-size: 12px; /* Smaller font for the row with multiple headers */
  padding: 4px;    /* Reduced padding for compact display */
}

.youtube-loading, .youtube-error {
  text-align: center;
  padding: 15px;
}

.youtube-error {
  color: red;
}

.youtube-description {
  max-height: 100px;
  overflow-y: auto;
  white-space: pre-line;
  word-wrap: break-word;
}

.gray-row {
    background-color: yellow;  /* Серый фон */
    color: red;               /* Серый текст */
}

.order-details-popup {
  position: absolute;
  top: 100%; /* Размещаем под элементом */
  right: 0; /* Привязываем к правому краю, чтобы уходила влево */
  z-index: 1500;
  display: inline-block;
  width: auto;
  max-width: 95vw;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
  padding: 10px;
  white-space: nowrap;
}

/* Обновленный CSS для всплывающей таблицы с данными по тегам */
.popup-top-table-Channel {
  /* Фиксированное позиционирование вместо абсолютного */
  position: fixed;
  /* Позиционируем в правом верхнем углу */
  top: 10%;
  right: 10%;
  /* Больше не привязываем к родительскому элементу */
  z-index: 2000; /* Повышенный z-index чтобы быть выше других элементов */
  
  /* Оформление */
  display: inline-block;
  width: auto;
  min-width: 400px; /* Минимальная ширина для комфортного просмотра */
  max-width: 80vw; /* Максимальная ширина 80% от ширины экрана */
  
  background-color: white;
  border: 2px solid #2196F3; /* Граница в цвет кнопки */
 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3); /* Заметная тень */
  
  max-height: 80vh; /* Ограничение по высоте */
  overflow-y: auto;
  overflow-x: auto;
  
  padding: 15px;
  white-space: nowrap;
}




/* Добавьте эти стили в ваш CSS файл */

.popup-channel-info {
    position: absolute;
    top: 50px;
    left: 0;
    background: white;
    border: 2px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 700px;
    max-height: 700px;
    overflow-y: auto;
    padding: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Полосы счётчиков в верхней панели.
   Сегменты идут вплотную друг к другу, без круглых меток и подписей —
   так весь набор влезает в одну строку. Что означает каждый сегмент,
   написано в подсказке при наведении.
   ───────────────────────────────────────────────────────────── */
.pol {
  display: inline-flex;
  vertical-align: middle;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 5px 0 0;
  line-height: 0;          /* убирает щели между сегментами */
  white-space: nowrap;
}
.pol .kl {
  display: inline-block;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 15px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
/* подпись внутри сегмента: тише самого числа */
.pol .kl s {
  text-decoration: none;
  font-weight: 400;
  opacity: .75;
  margin-right: 3px;
  font-size: 10px;
}
/* сегмент без данных не должен спорить за внимание с непустым */
.pol .kl.pust { opacity: .35; }

.kl.zh { background: #d9a406; }   /* скорость 1 */
.kl.ol { background: #a2b81a; }   /* скорость 2 */
.kl.ze { background: #1a9c4a; }   /* скорость 3 */
.kl.ti { background: #1294a6; }   /* скорость 4 */
.kl.kr { background: #c8392b; }   /* скорость 5 */
.kl.vs { background: #4a5158; }   /* итог по скоростям */
.kl.ko { background: #8a6244; }   /* темы */
.kl.si { background: #1f6feb; }   /* поставщик */
.kl.ch { background: #3b434b; }   /* мощность */
.kl.se { background: #6b7480; }   /* нейтральный */

/* Баллы — главное число панели, поэтому чуть крупнее остальных */
.pol.bal .kl { font-size: 12px; padding: 2px 7px; }

/* ─────────────────────────────────────────────────────────────
   Импорт из экселя.
   Раньше: голая подпись одной строкой, textarea фиксированной ширины
   и таблица-результат, собранная склейкой html — без заголовков колонок,
   без итогов и с остановкой на первой же ошибке.
   ───────────────────────────────────────────────────────────── */
.imp {
  display: grid;
  /* Памятку читают один раз, а в поле работают постоянно — поэтому обе
     половины одинаковой ширины, а не памятка шире, как было сначала.
     minmax(0,...) обязателен: без него длинные строки в поле распирают
     колонку и ломают равенство. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 10px 2px;
}
.imp-rezultat { grid-column: 1 / -1; }

.imp-pamyatka {
  background: #f7f9fb;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #3c444c;
}
.imp-pamyatka p { margin: 4px 0; }
.imp-pamyatka ol { margin: 4px 0; padding-left: 17px; }
.imp-pamyatka li { margin-bottom: 2px; }
.imp-pamyatka code {
  background: #eceff3;
  border-radius: 3px;
  padding: 0 3px;
  font-size: 11px;
  white-space: nowrap;
}
.imp-tiho { color: #8a939c; font-size: 12px; }

.imp-pole { display: flex; flex-direction: column; height: 100%; }
.imp-pole textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 210px;
  resize: vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-sizing: border-box;
  white-space: pre;
  overflow-x: auto;
}
.imp-pole textarea:focus { border-color: #1f6feb; outline: none; }
.imp-knopki { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.imp-itog {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  margin: 4px 0 8px;
  color: #3c444c;
}
.imp-horosho { color: #1a7f37; }
.imp-ploho { color: #b62324; }

.imp-tabl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.imp-tabl th {
  background: #f0f2f5;
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid #dfe3e8;
  font-weight: 600;
  white-space: nowrap;
}
.imp-tabl td { padding: 4px 8px; border-bottom: 1px solid #eef1f4; }
.imp-tabl .imp-chislo { text-align: right; font-variant-numeric: tabular-nums; }
.imp-tabl tr.imp-stroka-ploho { background: #fff6f6; }

/* ── Заполнение импорта из поиска ──
   Живёт внутри памятки, поэтому отделяется от неё чертой сверху, а не
   собственной рамкой: две рамки одна в другой выглядят коробкой в коробке. */
.imp-poisk {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #cfd6dd;
}
.imp-poisk > b { color: #1f4d7a; }
.imp-poisk p { margin: 4px 0; }
.imp-poisk-ryad {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.imp-poisk-teg {
  flex: 1 1 150px;
  min-width: 120px;
  font-size: 12px;
  padding: 4px 7px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-sizing: border-box;
}
.imp-poisk-teg:focus { border-color: #1f6feb; outline: none; }
.imp-poisk-vybor {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  max-width: 190px;
}
/* Кат ещё не выбран, а строки из поиска уже в поле — подсвечиваем список:
   иначе непонятно, почему «проверить» не нажимается. */
.imp-poisk-nado { border-color: #b62324; background: #fff6f6; }
.imp-poisk-otchet {
  margin-top: 6px !important;
  font-size: 11.5px;
  color: #3c444c;
}
/* Отсеянные 18+. Список бывает длинным, поэтому со своей прокруткой:
   иначе он выдавливает вниз само поле импорта. */
.imp-poisk-18 {
  margin-top: 5px;
  padding: 5px 7px;
  border: 1px solid #f0c6c6;
  border-radius: 6px;
  background: #fff6f6;
  font-size: 11px;
  line-height: 1.5;
  max-height: 96px;
  overflow-y: auto;
}
.imp-poisk-18 > b { color: #b62324; }
.imp-poisk-18 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .imp { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   НОЧНОЙ РЕЖИМ

   Включается атрибутом data-tema="noch" на <html> — его ставит
   скрипт в <head> ещё до отрисовки, поэтому белым не моргает.
   Выбор хранится в localStorage и общий с тепловизором.

   Правила намеренно перегружены (html впереди, местами !important):
   Semantic UI подключается с CDN и задаёт свои цвета почти всему,
   а в разметке есть инлайновые стили — без этого они бы перебивали.
   Картинки (превью роликов) не трогаем: инверсия их бы испортила.
   ═══════════════════════════════════════════════════════════════ */
html[data-tema="noch"] {
  --n-fon: #14171a;
  --n-karta: #1c2024;
  --n-ramka: #2c3237;
  --n-tekst: #e3e6e9;
  --n-tusklyy: #949ca6;
  color-scheme: dark;
}

html[data-tema="noch"] body,
html[data-tema="noch"] #Main {
  background: var(--n-fon) !important;
  color: var(--n-tekst) !important;
}

/* ── таблицы: заказы, меню, форма добавления ── */
html[data-tema="noch"] table,
html[data-tema="noch"] #video,
html[data-tema="noch"] #menu,
html[data-tema="noch"] #import table {
  background: var(--n-karta) !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
}
html[data-tema="noch"] th {
  background: #23282d !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
}
html[data-tema="noch"] td { border-color: var(--n-ramka) !important; }
html[data-tema="noch"] tr:not([style*="background"]) td { background: transparent; }

/* ── поля ввода и выпадающие списки ── */
html[data-tema="noch"] input[type=text],
html[data-tema="noch"] input[type=number],
html[data-tema="noch"] input[type=password],
html[data-tema="noch"] input[type=date],
html[data-tema="noch"] input[type=datetime-local],
html[data-tema="noch"] select,
html[data-tema="noch"] textarea,
html[data-tema="noch"] .ui.input > input {
  background: #23282d !important;
  color: var(--n-tekst) !important;
  border-color: #333a41 !important;
}
html[data-tema="noch"] ::placeholder { color: #6f7780 !important; }

html[data-tema="noch"] .ui.dropdown .menu,
html[data-tema="noch"] #menuOtkr {
  background: var(--n-karta) !important;
  border-color: var(--n-ramka) !important;
}
html[data-tema="noch"] .ui.dropdown .menu > .item,
html[data-tema="noch"] #menuOtkr .item {
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
}
html[data-tema="noch"] .ui.dropdown .menu > .item:hover,
html[data-tema="noch"] #menuOtkr .item:hover { background: #2a3036 !important; }

/* ── кнопки: цветные semantic оставляем как есть, серые перекрашиваем ── */
html[data-tema="noch"] .ui.button:not(.primary):not(.green):not(.red):not(.blue):not(.brown):not(.teal):not(.olive):not(.yellow):not(.orange) {
  background: #2a3036 !important;
  color: var(--n-tekst) !important;
}

/* ── всплывающие окна ── */
/* #response-popup здесь НЕТ намеренно: это зелёное окошко «готово».
   Оно попадало под общее правило и становилось тёмным, хотя красное
   окно ошибки (#error-popup) оставалось красным — выглядело так, будто
   успешное действие не сработало. Цвет у него смысловой, тема его
   не меняет. */
html[data-tema="noch"] .dop-popup-table,
html[data-tema="noch"] .popup-top-table-Channel,
html[data-tema="noch"] .youtube-popup,
html[data-tema="noch"] .order-details-popup,
html[data-tema="noch"] .popup-content {
  background: var(--n-karta) !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
}
html[data-tema="noch"] .youtube-close {
  background: #2a3036 !important;
  color: var(--n-tekst) !important;
}
html[data-tema="noch"] .gray-row td { background: #22262a !important; color: var(--n-tusklyy) !important; }

/* ── импорт из экселя ── */
html[data-tema="noch"] .imp-pamyatka {
  background: #1f2429 !important; border-color: var(--n-ramka) !important; color: var(--n-tekst) !important;
}
html[data-tema="noch"] .imp-pamyatka code { background: #2a3036 !important; color: var(--n-tekst) !important; }
html[data-tema="noch"] .imp-pole textarea { background: #23282d !important; color: var(--n-tekst) !important; }
html[data-tema="noch"] .imp-tabl th { background: #23282d !important; }
html[data-tema="noch"] .imp-tabl td { border-color: #262b30 !important; }
html[data-tema="noch"] .imp-tabl tr.imp-stroka-ploho { background: #3a2222 !important; }
html[data-tema="noch"] .imp-tiho, html[data-tema="noch"] .zam { color: var(--n-tusklyy) !important; }
html[data-tema="noch"] .imp-poisk { border-top-color: #2c3237 !important; }
html[data-tema="noch"] .imp-poisk > b { color: #8ec0ff !important; }
html[data-tema="noch"] .imp-poisk-teg,
html[data-tema="noch"] .imp-poisk-vybor {
  background: #23282d !important;
  color: var(--n-tekst) !important;
  border-color: #2c3237 !important;
}
html[data-tema="noch"] .imp-poisk-nado { background: #3a2222 !important; border-color: #b62324 !important; }
html[data-tema="noch"] .imp-poisk-otchet { color: var(--n-tekst) !important; }
html[data-tema="noch"] .imp-poisk-18 {
  background: #3a2222 !important;
  border-color: #5a2c2c !important;
  color: var(--n-tekst) !important;
}
html[data-tema="noch"] .imp-poisk-18 > b { color: #ff9a9a !important; }

/* Ссылки внутри цветных строк таблицы: там свой тёмный текст */
html[data-tema="noch"] tr[style*="db7093"] a,
html[data-tema="noch"] tr[style*="f4c430"] a,
html[data-tema="noch"] tr[style*="8B4513"] a,
html[data-tema="noch"] tr[style*="5a4a17"] a,
html[data-tema="noch"] tr[style*="5c2c3c"] a { color: #fff; }

/* Страница входа: у неё свой фон и блоки semantic */
html[data-tema="noch"] body#registration { background: var(--n-fon) !important; color: var(--n-tekst) !important; }
html[data-tema="noch"] .ui.segment,
html[data-tema="noch"] .ui.container,
html[data-tema="noch"] .ui.form,
html[data-tema="noch"] .ui.message {
  background: var(--n-karta) !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
  box-shadow: none;
}
html[data-tema="noch"] .ui.form label,
html[data-tema="noch"] .ui.header { color: var(--n-tekst) !important; }

/* ── Инлайновые цвета из разметки ───────────────────────────────
   В tabl.html и tabl.js около сотни атрибутов style= с цветами:
   серый текст #777/#333/#999, белые кружки закрытия, сиреневая
   подсветка будильника. Переписывать всю разметку рискованно,
   поэтому перекрываем по самому атрибуту — селектор [style*="…"]
   попадает точно в те элементы, где этот цвет прописан.
   ─────────────────────────────────────────────────────────────── */
html[data-tema="noch"] [style*="color: #777"],
html[data-tema="noch"] [style*="color:#777"],
html[data-tema="noch"] [style*="color: #888"],
html[data-tema="noch"] [style*="color:#888"],
html[data-tema="noch"] [style*="color: #999"],
html[data-tema="noch"] [style*="color:#999"] { color: var(--n-tusklyy) !important; }

html[data-tema="noch"] [style*="color: #333"],
html[data-tema="noch"] [style*="color:#333"],
html[data-tema="noch"] [style*="color: black"],
html[data-tema="noch"] [style*="color:black"] { color: var(--n-tekst) !important; }

/* Синие ссылки-подписи в разметке: на тёмном фоне тонут */
/* ВАЖНО: селектор по атрибуту ищет подстроку, а «background-color: #2196F3»
   содержит в себе «color: #2196F3». Из-за этого синие КНОПКИ получали
   голубой текст на синем фоне — почти нечитаемо. Поэтому оттенок кнопок
   в список ниже не входит; для него отдельное правило. */
html[data-tema="noch"] [style*="color: #1565c0"],
html[data-tema="noch"] [style*="color:#1565c0"],
html[data-tema="noch"] [style*="color: #0088cc"],
html[data-tema="noch"] [style*="color:#0088cc"] { color: #6cb0ff !important; }

/* Синие кнопки («тепло», «тепло канала», «топы канала» и прочие):
   текст остаётся белым, как в дневном режиме. */
html[data-tema="noch"] [style*="background-color: #2196F3"] { color: #fff !important; }

html[data-tema="noch"] [style*="color: red"],
html[data-tema="noch"] [style*="color:#c00"] { color: #ff8080 !important; }

html[data-tema="noch"] [style*="color: #8B4513"] { color: #d99a5b !important; }

/* Белые плашки: кружок закрытия окон и блок сообщения */
html[data-tema="noch"] [style*="background-color: #ffffff"],
html[data-tema="noch"] [style*="background:#fff"],
html[data-tema="noch"] [style*="background: #fff"] {
  background: #2a3036 !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
}

/* Сиреневая подсветка будильника и телеграма — приглушаем */
/* Ячейки будильника и телеграм-заказчика.

   Фон стоит ВСЕГДА — и когда включено, и когда выключено: он помечает
   саму колонку. Включено или нет, видно по цвету значка: колокольчик
   зелёный или серый, человечек синий или серый.

   Цвет задаётся классом, а не инлайново: Vue нормализует статический
   атрибут style (переводит #e3d4f7 в rgb(...)), и правило-перекрытие
   по атрибуту в ночном режиме промахивалось. */
.yach-otmetka { background-color: #e3d4f7; }

html[data-tema="noch"] .yach-otmetka {
  background-color: #453a66 !important;   /* было #2e2545 — почти сливалось с фоном */
  color: #ded4f5 !important;
}
html[data-tema="noch"] .yach-otmetka i,
html[data-tema="noch"] .yach-otmetka .icon { color: #cbbde8; }
/* Серый значок «выключено» на тёмно-фиолетовом почти не виден */
html[data-tema="noch"] .yach-otmetka i.grey { color: #a79ec4 !important; }

/* Semantic: выбранная строка и таблица в целом */
html[data-tema="noch"] .ui.table { background: var(--n-karta) !important; color: var(--n-tekst) !important; }
html[data-tema="noch"] .ui.table thead th { background: #23282d !important; color: var(--n-tekst) !important; }

/* Ячейки с цветной заливкой строки: текст в них должен читаться */
html[data-tema="noch"] tr[style*="5c2c3c"] td,
html[data-tema="noch"] tr[style*="5a4a17"] td,
html[data-tema="noch"] tr[style*="4a2447"] td,
html[data-tema="noch"] tr[style*="1e3a5f"] td { color: #f4f6f8; }

/* ── Ночной режим: подсветка строк, ссылки, футер ───────────────
   Правки после проверки в живую:
   1) при наведении строка светилась салатовым (#d5e6a2 из общего
      правила) — на тёмном фоне текст на ней пропадал;
   2) ссылки и подчёркивания сливались с фоном;
   3) футер — это .ui.borderless.menu внизу, у него свой фон
      от Semantic UI, поэтому он оставался светлым.
   ─────────────────────────────────────────────────────────────── */

/* Ссылки: заметнее и с читаемым подчёркиванием */
html[data-tema="noch"] a,
html[data-tema="noch"] a:link { color: #7cbcff !important; }
html[data-tema="noch"] a:visited { color: #b39dff !important; }
html[data-tema="noch"] a:hover { color: #a9d4ff !important; }
html[data-tema="noch"] a[style*="text-decoration: underline"],
html[data-tema="noch"] u,
html[data-tema="noch"] ins {
  text-decoration-color: #7cbcff !important;
  text-underline-offset: 2px;
}
/* Ссылки внутри цветных строк остаются белыми — там свой фон */
html[data-tema="noch"] #video tbody tr[style*="5c2c3c"] a,
html[data-tema="noch"] #video tbody tr[style*="5a4a17"] a,
html[data-tema="noch"] #video tbody tr[style*="4a2447"] a,
html[data-tema="noch"] #video tbody tr[style*="1e3a5f"] a { color: #fff !important; }
html[data-tema="noch"] #video tbody tr[style*="5c2c3c"] u,
html[data-tema="noch"] #video tbody tr[style*="5a4a17"] u,
html[data-tema="noch"] #video tbody tr[style*="4a2447"] u,
html[data-tema="noch"] #video tbody tr[style*="1e3a5f"] u { text-decoration-color: #fff !important; }

/* Футер и верхнее меню: Semantic UI красит их в белый */
html[data-tema="noch"] .ui.menu,
html[data-tema="noch"] .ui.borderless.menu,
html[data-tema="noch"] .ui.borderless.menu .item {
  background: var(--n-karta) !important;
  color: var(--n-tekst) !important;
  border-color: var(--n-ramka) !important;
  box-shadow: none !important;
}
html[data-tema="noch"] .ui.menu .item:before { background: var(--n-ramka) !important; }

/* Страница целиком: если содержимое короче экрана, ниже виден фон html */
html[data-tema="noch"] { background: var(--n-fon); }

/* ── Выделение текста ───────────────────────────────────────────
   Браузер красит выделение системным цветом: светло-синий фон и
   ЧЁРНЫЙ текст. В ночной теме текст на нём пропадал — особенно
   в полях ввода и в ячейках таблицы. Задаём явно. */
html[data-tema="noch"] ::selection {
  background: #2f6fd0;
  color: #ffffff;
}
html[data-tema="noch"] ::-moz-selection {
  background: #2f6fd0;
  color: #ffffff;
}
/* В цветных строках фон выделения светлее — там свой тёмный фон */
html[data-tema="noch"] #video tbody tr[style*="5c2c3c"] ::selection,
html[data-tema="noch"] #video tbody tr[style*="5a4a17"] ::selection,
html[data-tema="noch"] #video tbody tr[style*="4a2447"] ::selection,
html[data-tema="noch"] #video tbody tr[style*="1e3a5f"] ::selection {
  background: #ffffff;
  color: #14171a;
}

/* Строка, выбранная кликом. Класс negative Vue по-прежнему вешает, но
   подсветку убрали по просьбе — в обоих режимах. У Semantic UI своя
   заливка с !important, поэтому гасим явно.

   ВАЖНО: гасим только цвет самой строки, а фон ячеек-отметок
   (будильник, заказчик) возвращаем следующим правилом. Без него клик
   по значку будильника делал строку «выбранной», и это правило стирало
   только что появившийся фон — выглядело так, будто фон появляется
   лишь после обновления таблицы. */
tr.negative td,
.ui.table tr.negative td,
#video tbody tr.negative td {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
#video tbody tr.negative td.yach-otmetka { background-color: #e3d4f7 !important; }
html[data-tema="noch"] #video tbody tr.negative td.yach-otmetka { background-color: #453a66 !important; }

/* Подсветка при наведении.

   Накладываем полупрозрачный слой через background-image, а НЕ меняем
   background-color: так собственный цвет строки (выполнен, остановлен,
   оплачен) и фон ячеек-отметок остаются на месте, строка просто чуть
   темнеет или светлеет. */
#video tbody tr:hover td {
  background-image: linear-gradient(rgba(0, 0, 0, .055), rgba(0, 0, 0, .055));
}
html[data-tema="noch"] #video tbody tr:hover td {
  background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
}

/* ── Тег и примечание ───────────────────────────────────────────
   Жирный убран: в таблице жирным было почти всё, и выделение
   переставало что-либо значить. Примечание вдобавок курсивом —
   так его видно как пометку, а не как данные заказа. */
.tekst-teg { font-weight: normal; }
.tekst-prim { font-weight: normal; font-style: italic; }

/* ── Границы ячеек в ночном режиме ──────────────────────────────
   Общее правило задаёт границы #333 — на тёмном фоне они сливались
   с ним, и таблица выглядела сплошным полотном. */
html[data-tema="noch"] th,
html[data-tema="noch"] td,
html[data-tema="noch"] #video th,
html[data-tema="noch"] #video td,
html[data-tema="noch"] #menu td,
html[data-tema="noch"] #import td {
  border-color: #566270 !important;
}

/* Уведомления «готово» и «ошибка»: цвет несёт смысл, поэтому в обеих
   темах одинаковый. Тёмная тема их не трогает. */
html[data-tema="noch"] #response-popup {
  background-color: #4CAF50 !important;
  color: #fff !important;
  border-color: #3d8b40 !important;
}
html[data-tema="noch"] #error-popup {
  background-color: #b81414 !important;
  color: #fff !important;
  border-color: #8f1010 !important;
}

/* Ячейки-переключатели (будильник, заказчик): клик работает по всей
   ячейке, а не только по значку — попасть в мелкую иконку на телефоне
   почти невозможно. Курсор показывает, что кликабельно всё поле. */
.yach-klik { cursor: pointer; }
.yach-klik:hover i.icon { filter: brightness(1.15); }

/* ── Тепловизор во всплывающем окне ─────────────────────────────
   Открывается кнопкой «тепло», тегом в окне частоты и кнопкой
   «инфо». Он на том же домене и с той же сессией, поэтому
   показывается фреймом поверх таблицы — не нужно уходить
   на другую вкладку и терять из виду заказы. */
#teplo-okno {
  position: fixed; z-index: 3000;
  /* Не inset: 0, а явные размеры от видимой области. При inset: 0 ширина
     считается от содержимого страницы, а таблица шире экрана — окно
     растягивалось за его пределы и на телефоне выглядело сдвинутым. */
  top: 0; left: 0;
  width: 100vw;  width: 100dvw;
  height: 100vh; height: 100dvh;
  background: rgba(10, 13, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  overscroll-behavior: contain;   /* прокрутка внутри не «протекает» на страницу */
}
#teplo-okno.skryt { display: none; }

.teplo-vnutri {
  background: #0d1117;            /* фон самого тепловизора — без белой рамки при загрузке */
  border-radius: 10px;
  width: 100%; max-width: 1500px;
  height: 92vh;
  max-height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .45);
}

.teplo-shapka {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: #161b22; color: #e6edf3;
  font: 13px 'Segoe UI', sans-serif;
  border-bottom: 1px solid #2c3237;
}
.teplo-shapka a { color: #7cbcff; font-size: 12px; text-decoration: none; }
.teplo-shapka a:hover { text-decoration: underline; }
.teplo-shapka button {
  background: #2a3036; color: #e6edf3; border: none; border-radius: 5px;
  padding: 2px 9px; font-size: 14px; cursor: pointer; line-height: 1.4;
}
.teplo-shapka button:hover { background: #3a424a; }

.teplo-ramka { flex: 1; width: 100%; border: 0; display: block; }

/* На телефоне окно во весь экран: полей по краям там жалко.

   Высота в dvh, а не vh: на телефоне 100vh считается БЕЗ учёта адресной
   строки, поэтому низ окна уходил за экран. dvh — реальная видимая
   высота; для старых браузеров ниже остаётся запасное правило в vh. */
@media (max-width: 700px), (pointer: coarse) {
  /* На телефоне окно во весь экран: полей по краям там жалко.
     Размеры дублируются в vh/vw и dvh/dvw — вторые точнее (без учёта
     адресной строки), первые остаются для браузеров постарше. */
  #teplo-okno {
    padding: 0;
    width: 100vw;  width: 100dvw;
    height: 100vh; height: 100dvh;
  }
  .teplo-vnutri {
    width: 100%; max-width: none; min-width: 0;
    height: 100vh; height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .teplo-shapka { padding: 8px 10px; }   /* крестик крупнее под палец */
  .teplo-shapka button { padding: 4px 12px; font-size: 16px; }
}

/* ── Синие кнопки в карточке ролика и в строке заказа ───────────
   «о канале», «топы канала», «тепло канала», «тепло» — один вид
   на всех: раньше у каждой был свой инлайновый стиль, и после
   переименования одна из них стала выше остальных из-за переноса
   текста. Заодно цвет теперь в одном месте, а не в четырёх. */
.knopka-sin {
  display: inline-block;
  padding: 3px 8px;
  background-color: #2196F3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;      /* текст в одну строку — кнопка не растёт вверх */
  vertical-align: middle;
}
.knopka-sin:hover { background-color: #1976d2; }

/* Ячейки с кнопками — содержимое по центру. Выравнивание всплывающему
   окну не мешает, поэтому оставлено на общем классе. */
.youtube-cell-container { text-align: center; vertical-align: middle; }

/* В ночном режиме синий фон и белый текст остаются: цвет тут смысловой */
html[data-tema="noch"] .knopka-sin { background-color: #2196F3 !important; color: #fff !important; }
html[data-tema="noch"] .knopka-sin:hover { background-color: #1976d2 !important; }

/* Зелёная кнопка проверки позиции («чекнуть»). Тот же размер и шрифт,
   что у синих: раньше у неё был свой инлайновый стиль и подпись «-----».
   Цвет оставлен зелёным — по нему её и находят глазами. */
.knopka-zel {
  display: inline-block;
  padding: 3px 8px;
  margin-right: 10px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: middle;
}
.knopka-zel:hover { background-color: #3d8b40; }

/* Пришёл ответ проверки («№ 3» или «нету») — показываем крупно, как было
   раньше: эту цифру читают с расстояния, в отличие от подписи «чекнуть».
   Отступы убираем, чтобы кнопка не выросла вместе со шрифтом. */
.knopka-zel.est-otvet {
  font-size: inherit;
  line-height: 1.15;
  padding: 1px 6px;
}

/* Обе кнопки — «чекнуть» и «тепло» — в один ряд. Раньше при узкой ячейке
   они переносились одна под другую. */
.ryad-knopok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.ryad-knopok .knopka-zel { margin-right: 0; }
html[data-tema="noch"] .knopka-zel { background-color: #4CAF50 !important; color: #fff !important; }
html[data-tema="noch"] .knopka-zel:hover { background-color: #3d8b40 !important; }

/* ── Ячейка с регионом и кнопками ───────────────────────────────
   Отступы ужаты: ячейка узкая, и поля по краям съедали место,
   из-за которого кнопки норовили встать в две строки. */
/* Только ячейка с выбором гео и кнопками «чекнуть»/«тепло» (класс
   yach-geo). Раньше правила стояли на .youtube-cell-container, а он
   висит ещё на пяти ячейках ВНУТРИ всплывающего окна превью — там
   ширина 1% и запрет переносов ломали раскладку, строки с кнопками
   наезжали друг на друга. */
td.yach-geo { padding: 0 2px !important; width: 1%; white-space: nowrap; }
.ryad-knopok { margin-top: 2px !important; gap: 4px; }

/* Список регионов — чуть шире: названия вроде «Великобритания (GB)»
   в 100px не помещались */
.pole-region {
  width: 124px;
  max-width: 100%;
  cursor: pointer;
  padding: 2px 3px;
  font-size: 12px;
}

/* ── Спокойные цвета кнопок в строке заказа ─────────────────────
   Яркая заливка на каждой строке рябила в глазах: в таблице их
   десятки. Пока кнопка ничего не сообщает — она приглушённая;
   яркой становится только «чекнуть» с ответом (класс est-otvet),
   чтобы результат проверки бросался в глаза. */
.ryad-knopok .knopka-zel,
.ryad-knopok .knopka-sin { padding-left: 6px; padding-right: 6px; }
.ryad-knopok .knopka-zel {
  background-color: #e4f1e5;
  color: #2f6b34;
  box-shadow: inset 0 0 0 1px #c6e0c9;
}
.ryad-knopok .knopka-zel:hover {
  background-color: #d3e9d6;
  color: #245628;
}
.ryad-knopok .knopka-sin {
  background-color: #e3edf8;
  color: #1b5e93;
  box-shadow: inset 0 0 0 1px #c5daee;
}
.ryad-knopok .knopka-sin:hover {
  background-color: #d2e3f4;
  color: #144a75;
}

/* Пришёл ответ — вот теперь ярко-зелёная, как раньше */
.ryad-knopok .knopka-zel.est-otvet {
  background-color: #4CAF50 !important;
  color: #fff !important;
  box-shadow: none;
}
.ryad-knopok .knopka-zel.est-otvet:hover { background-color: #3d8b40 !important; }

/* Ночной режим: те же роли, но фон приглушён под тёмный */
html[data-tema="noch"] .ryad-knopok .knopka-zel {
  background-color: #27352a !important;
  color: #8fd39a !important;
  box-shadow: inset 0 0 0 1px #354a39;
}
html[data-tema="noch"] .ryad-knopok .knopka-zel:hover { background-color: #2f4033 !important; }
html[data-tema="noch"] .ryad-knopok .knopka-sin {
  background-color: #22303f !important;
  color: #8ec0ff !important;
  box-shadow: inset 0 0 0 1px #2f4256;
}
html[data-tema="noch"] .ryad-knopok .knopka-sin:hover { background-color: #29394b !important; }
html[data-tema="noch"] .ryad-knopok .knopka-zel.est-otvet {
  background-color: #4CAF50 !important;
  color: #fff !important;
  box-shadow: none;
}

/* ── Зона уведомлений ───────────────────────────────────────────
   Занимает ровно видимую ширину экрана и прижимает сообщения к
   правому краю. Раньше каждое сообщение само цеплялось к правому
   краю, но на телефоне это край СТРАНИЦЫ, а таблица шире экрана —
   уведомления улетали за пределы видимого. Работает одинаково и в
   обычном мобильном виде, и во «вид для ПК». */
#zona-soobshenij {
  /* Положение и ширину выставляет js (podognatZonuSoobshenij) — по
     видимой области экрана, с поправкой на масштаб страницы.
     Здесь только запасные значения на случай старого браузера. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* сообщения у правого края */
  gap: 8px;
  z-index: 4000;           /* выше окна тепловизора и выпадающих списков */
  pointer-events: none;    /* пустая зона не перехватывает клики по таблице */
}
#zona-soobshenij > div {
  pointer-events: auto;
  /* Ширину меряем в процентах от зоны, а зона равна видимой области.
     В vw нельзя: при «виде для ПК» vw — это ширина страницы (~980),
     и сообщение вылезало бы за экран. */
  max-width: 100%;
}

@media (max-width: 700px), (pointer: coarse) {
  #zona-soobshenij { padding: 6px; }
  #zona-soobshenij > div { padding: 10px 12px; font-size: 14px; }
}


/* ── Поля ввода в таблице ───────────────────────────────────────
   Поле должно быть ровно по ячейке и той же высоты, что и текст,
   который оно заменяет. Иначе при каждом клике строка подпрыгивала.

   Раньше отступы ячейки убирались скриптом — из-за этого и было
   дёрганье: сначала браузер показывал поле, и только следующим шагом
   менялись отступы. Теперь всё решается сразу, без скрипта. */
#video input[type="text"],
#video input[type="number"],
#video textarea {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0 3px;
  font-size: 12px;
  line-height: 16px;
  vertical-align: middle;
  border-radius: 3px;
}

/* Однострочные поля — вровень со строкой текста, который они заменяют */
#video input[type="text"],
#video input[type="number"] { height: 18px; }

/* Тег и примечание — на всю ячейку и в две строки: туда вписывают
   длинные фразы, и одной строки мало. Растягивать за уголок можно —
   если текста совсем много. */
#video input[type="text"],
#video textarea {
  width: 100%;
  white-space: pre-wrap;
  overflow: auto;
}
#video textarea {
  height: 36px;          /* ровно две строки по 16px + рамка */
  min-height: 36px;
  resize: vertical;      /* тянуть можно только вниз, ширину ломать нельзя */
  line-height: 16px;
}

/* Числовому полю ширину не задаём: рядом с ним стоят кнопки − и +,
   и растянутое на всю ячейку поле выталкивало бы их за край. */
#video input[type="number"] { max-width: 100%; }

/* ── Ячейка, пока в ней открыто поле ──────────────────────────────
   Поле должно занимать её целиком, поэтому боковые отступы убираем,
   а содержимое ставим по центру. Отступы гасятся ТОЛЬКО когда поле
   видно: :has смотрит на само поле, без скриптов — значит без рывка,
   которым страдала прошлая версия на js. */
/* Полей со style="display: none" больше нет: поле либо есть в разметке,
   либо его нет вовсе — этим ведает Vue. Поэтому проверка проще. */
#video td:has(textarea),
#video td:has(input[type="text"]),
#video td:has(input[type="number"]) {
  padding: 0 !important;
  text-align: center;
}

/* Числовое поле вместе с кнопками − + ↵ — по центру ячейки */
#video input[type="number"] { text-align: center; }

/* Semantic UI оборачивает поля в свой блок с полями по краям —
   в ячейке он не нужен, поле должно занимать её целиком. */
#video .ui.input,
#video .ui.fluid.input {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}



/* Поля по краям ячеек — ТОЛЬКО в таблице заказов. Раньше стояли на общем
   правиле th/td, и от них раздувалась верхняя панель (таблица #menu):
   кнопки и счётчики переставали помещаться в строку и переносились. */
/* Строки плотнее: вертикальных отступов нет, по бокам минимум, чтобы
   колонки не слипались. */
#video > tbody > tr > td,
#video > thead > tr > th { padding: 0 4px; }
#video td.yach-geo { padding: 0 2px !important; }

/* Верхняя панель: всё в один ряд, без переносов */
#menu > tbody > tr > td { padding: 1px 3px; white-space: nowrap; vertical-align: middle; }

/* На телефоне браузер подсвечивает всё, чего касаешься, серой вспышкой —
   на плотной таблице это читается как рывок при каждом тапе. Подсветку
   убираем: строка и так реагирует, а лишнее мелькание мешает. */
@media (max-width: 700px), (pointer: coarse) {
  #video, #video * {
    -webkit-tap-highlight-color: transparent;
  }
  /* Двойной тап по таблице не должен масштабировать страницу —
     из-за этого касания обрабатывались с задержкой и «дёргались» */
  #video { touch-action: manipulation; }
}

/* ── Верхняя панель: всё в один ряд ─────────────────────────────
   Кнопок и счётчиков много, и на нешироком экране панель переставала
   помещаться. Ужимаем шрифт и отступы — своими правилами, поверх
   Semantic UI, у которого кнопки заметно «толще» нужного. */
#menu > tbody > tr > td { padding: 1px 2px; }

#menu .ui.button,
#menu button,
#menu .ui.mini.button {
  padding: 3px 6px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
  margin: 0 1px !important;
}

/* Кружки-счётчики (баллы, заказы, свободно) */
#menu .ui.label,
#menu .ui.circular.label {
  padding: 2px 5px !important;
  font-size: 10.5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 1px !important;
  line-height: 1.2 !important;
}

/* Поля и списки в панели */
#menu input[type="text"],
#menu select {
  font-size: 11px;
  padding: 2px 4px;
  height: 22px;
  box-sizing: border-box;
}

/* Semantic-обёртки полей добавляют свои поля по краям */
#menu .ui.input { margin: 0 1px; }
#menu .item { padding: 0 !important; margin: 0 !important; }
#menu .ui.buttons { margin: 0 1px !important; }

/* Значки внутри кнопок — без лишних полей справа */
#menu .ui.button > i.icon { margin: 0 !important; font-size: 11px; }

/* ── Кнопки шага у числовых полей ───────────────────────────────
   Теперь их рисует Vue рядом с самим полем (см. tabl.html), поэтому
   отдельной обёртки нет — стили висят прямо на кнопках. */
/* Поле сверху, кнопки под ним — одинаково на компьютере и на телефоне.
   В строку они не помещались: ячейка узкая, и кнопки выдавливали поле. */
/* Раскладка ячейки с числом в три ряда:
     сверху  — широкая низкая кнопка «↵»,
     посреди — само поле,
     снизу   — маленькие «−» и «+» по краям.
   Так поле остаётся в центре внимания, а кнопки не жмут его по бокам. */
.pole-s-shagom {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  gap: 2px;
  width: auto !important;
}
.pole-s-shagom > button.knopka-enter { grid-row: 1; grid-column: 1 / -1; }
.pole-s-shagom > input               { grid-row: 2; grid-column: 1 / -1; }
.pole-s-shagom > button.shag-levo    { grid-row: 3; grid-column: 1; }
.pole-s-shagom > button.shag-pravo   { grid-row: 3; grid-column: 2; }
button.chislo-shag {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 14px;
  height: 15px;
  font-weight: 600;
  color: #35414d;
  background: #eef1f4;
  border: 1px solid #d6dce2;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
button.chislo-shag:hover { background: #e2e7ec; }
/* «Сохранить» — во всю ширину ячейки, но низкая: нажимать её удобно,
   а по высоте строка от неё почти не растёт. */
button.chislo-shag.knopka-enter {
  background: #e3edf8;
  border-color: #c5daee;
  color: #1b5e93;
  font-size: 13px;
  line-height: 13px;
  height: 14px;
  padding: 0;
}
/* На телефоне чуть крупнее — под палец, но раскладка та же */
@media (max-width: 700px), (pointer: coarse) {
  button.chislo-shag { padding: 0 6px; font-size: 14px; line-height: 18px; height: 19px; }
  button.chislo-shag.knopka-enter { font-size: 14px; line-height: 16px; height: 17px; }
}
html[data-tema="noch"] button.chislo-shag {
  background: #2a3036; color: #e3e6e9; border-color: #3a424a;
}
html[data-tema="noch"] button.chislo-shag.knopka-enter {
  background: #22303f; color: #8ec0ff; border-color: #2f4256;
}

/* ── Выпадающие списки в строках таблицы ────────────────────────
   Semantic UI прячет .menu своим правилом display: none. Раньше его
   перебивал jQuery .show() инлайновым стилем; теперь списком ведает
   Vue, поэтому нужен класс с той же силой. */
/* По умолчанию списки скрыты — своим правилом, а не только правилом
   Semantic UI: если стили с CDN не подгрузятся, списки не должны
   развернуться все разом. */
#video .menu { display: none; }
#video .ui.dropdown .menu.spisok-otkryt,
#video .menu.spisok-otkryt {
  display: block !important;
}

/* Родные стрелки браузера убираем везде: свои кнопки − и + теперь есть
   и на компьютере, два набора рядом только мешают. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Поле упёрлось в нижнюю границу — дальше уменьшать нельзя.
   Для баллов это уже выполненные просмотры: меньше заказать не выйдет.
   Число остаётся на месте, а поле подсвечивается оранжевым. */
#video input.upor-v-vypoln {
  background: #ffe8c9 !important;
  border-color: #e2952c !important;
  color: #8a4b00 !important;
  font-weight: 600;
}
html[data-tema="noch"] #video input.upor-v-vypoln {
  background: #4a3213 !important;
  border-color: #a86a1c !important;
  color: #ffcf8a !important;
}

/* ── Страница входа ─────────────────────────────────────────────
   Форма по центру экрана — и на компьютере, и на телефоне.
   Оформление то же, что у таблицы: те же цвета, скругления и рамки. */
body#registration {
  margin: 0;
  background: #f6f7f9;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.vhod-ekran {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.vhod-karta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #d6dce2;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.vhod-karta .join-i {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-size: 14px;
  color: #23272b;
  background: #fff;
  border: 1px solid #d6dce2;
  border-radius: 6px;
  outline: none;
}
.vhod-karta .join-i:focus { border-color: #2196F3; }
.vhod-karta .btns {
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2196F3;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.vhod-karta .btns:hover { background: #1976d2; }

html[data-tema="noch"] body#registration { background: #14171a; }
html[data-tema="noch"] .vhod-karta {
  background: #1c2024;
  border-color: #2c3237;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
html[data-tema="noch"] .vhod-karta .join-i {
  background: #23282d;
  color: #e3e6e9;
  border-color: #333a41;
}
html[data-tema="noch"] .vhod-karta .join-i::placeholder { color: #6f7780; }


/* ── Блок добавления заказа ─────────────────────────────────────
   Слева карточка ролика во всю высоту, справа сама форма. Карточка
   на месте всегда: пока ссылки нет — в ней подсказка, поэтому при
   вставке ссылки ничего не прыгает. */
#new {
  display: none;                 /* показывает кнопка «добав. новое» */
  gap: 10px;
  align-items: stretch;
  margin: 4px 0 6px;
}
#new.vidno { display: flex; }

.karta-rolika {
  flex: 0 0 320px;
  /* Высоту задаёт правая часть: карточка растягивается на всю высоту
     формы. Форма всегда одинаковой высоты (место под название занято
     даже когда его нет), поэтому и карточка не скачет. */
  align-self: stretch;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;               /* по высоте отступов нет — место под содержимое */
  box-sizing: border-box;
  background: #f2f5f8;
  border: 1px solid #d6dce2;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
}
.karta-rolika img {
  /* Превью целиком, без обрезки: у YouTube оно 16:9, и при подгонке под
     узкую полосу срезалась верхняя часть кадра. Задаём ширину, высота
     считается сама по пропорции. */
  width: 220px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  align-self: center;
  border-radius: 4px;
  margin: 0;
  /* Превью забирает всю свободную высоту карточки, сохраняя пропорцию */
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
}

/* Подсказка, пока ссылку не вставили */
.karta-podskazka {
  color: #8a939c;
  text-align: center;
  font-size: 12px;
  margin: auto 0;          /* по центру растянутой карточки */
}

.karta-nazv {
  font-weight: 600;
  color: #23272b;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* длинное название — не больше двух строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karta-kanal { line-height: 1.25; }
.karta-kanal { color: #6b7480; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Дата, просмотры и лайки — одной строкой через промежутки */
.karta-data {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
  line-height: 1.2;
  color: #6b7480;
  font-variant-numeric: tabular-nums;
}

/* Ролик, который брать нельзя: 18+ или удалён */
.karta-rolika.plohoy { background: #fdecec; border-color: #e0a1a1; }
.karta-zapret { color: #b81414; font-weight: 600; margin-top: 2px; }

/* ── Форма добавления без таблицы ───────────────────────────────
   Два ряда: сверху ссылка, теги, частота, баллы и «Добавить»,
   снизу плейлисты и счётчик. Кнопки и число баллов занимают ровно
   столько, сколько нужно, а ссылка с тегами делят остальное. */
.forma-dobavleniya {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ryad-formy {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Каждая часть на своей строке: ссылка, теги с частотой, количество,
   кнопка, плейлисты со счётчиком. Порядок одинаковый и на телефоне. */
/* Ссылка — по длине ссылки на ролик, а не во всю строку */
.forma-dobavleniya .pole-url { flex: 0 1 340px; width: 340px; max-width: 100%; min-width: 0; }
/* Поисковый запрос — по размеру запроса, а не во всю ширину:
   рядом с ним стоит кнопка частоты, и растянутое поле её отодвигало. */
.forma-dobavleniya .pole-teg { flex: 0 1 340px; width: 340px; max-width: 100%; min-width: 0; }
.forma-dobavleniya .pole-pl  { flex: 1 1 auto; min-width: 0; }

/* Количество — узкое поле по содержимому */
.forma-dobavleniya .pole-bally { flex: 0 0 140px; width: 140px; text-align: center; }

/* Сателлиты: галка и выпадающий язык статей (видно только тестовым аккаунтам) */
.ryad-sat .sat-galka { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.ryad-sat .sat-galka input { margin: 0; }
.forma-dobavleniya .pole-sat-yazyk { flex: 0 0 190px; width: 190px; }
.ryad-sat .sat-podskazka { font-size: 12px; opacity: .7; white-space: nowrap; }

.ryad-formy > button,
.ryad-formy > span > button { flex: 0 0 auto; white-space: nowrap; }
.ryad-formy > span { flex: 0 0 auto; }

/* Кнопка добавления — заметная, во всю ширину своей строки */
.knopka-dobavit {
  flex: 0 0 auto;
  min-width: 140px;
  background: #d0342c !important;
  color: #fff !important;
  font-weight: 600;
}
.knopka-dobavit:hover:not(:disabled) { background: #b52b24 !important; }
.knopka-dobavit:disabled { opacity: .5; cursor: not-allowed; }

.forma-dobavleniya input {
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #23272b;
  background: #fff;
  border: 1px solid #d6dce2;
  border-radius: 5px;
  outline: none;
}
.forma-dobavleniya input:focus { border-color: #2196F3; }

.vsego-formy { font-size: 12px; color: #6b7480; white-space: nowrap; }
.idet-dobavlenie { font-size: 12px; white-space: nowrap; }

html[data-tema="noch"] .forma-dobavleniya input {
  background: #23282d; color: #e3e6e9; border-color: #333a41;
}
html[data-tema="noch"] .vsego-formy { color: #949ca6; }

/* На телефоне карточка встаёт сверху во всю ширину */
@media (max-width: 700px), (pointer: coarse) {
  /* Порядок тот же, что на компьютере: карточка слева, поля справа.
     Уже — чтобы на узком экране осталось место под ввод. */
  #new.vidno { flex-direction: row; gap: 6px; }
  .karta-rolika {
    flex: 0 0 40%;
    max-width: 190px;
    height: auto;
    padding: 0 6px;
    font-size: 10.5px;
  }
  .karta-rolika img { width: 100%; }
  /* Количество и кнопка — по содержимому: на узком экране растянутое
     поле баллов занимало всю строку без пользы. */
  .forma-dobavleniya .pole-bally { flex: 0 0 auto; width: 130px; }
  .knopka-dobavit { flex: 0 0 auto; min-width: 130px; }
  /* Ссылка и запрос не тянутся и здесь: сужаются по месту, но всю
     строку не занимают. */
  .forma-dobavleniya .pole-url,
  .forma-dobavleniya .pole-teg { flex: 0 1 240px; width: 240px; max-width: 100%; }
}

html[data-tema="noch"] .karta-rolika { background: #1f2429; border-color: #2c3237; }
html[data-tema="noch"] .karta-nazv { color: #e3e6e9; }
html[data-tema="noch"] .karta-kanal,
html[data-tema="noch"] .karta-data,
html[data-tema="noch"] .karta-podskazka { color: #949ca6; }
html[data-tema="noch"] .karta-rolika.plohoy { background: #3a2222; border-color: #6b3030; }
html[data-tema="noch"] .karta-zapret { color: #ff9b9b; }

/* Название ролика над полем ссылки. Место занято всегда — иначе форма
   подпрыгивала бы в момент, когда прилетают данные о ролике. */
.ryad-nazvanie {
  min-height: 17px;
  align-items: flex-end;
}
.nazvanie-rolika {
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  color: #23272b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
html[data-tema="noch"] .nazvanie-rolika { color: #e3e6e9; }

/* Крестик в уведомлении: убрать сообщение сразу, не дожидаясь,
   пока оно погаснет само через пять секунд. */
#zona-soobshenij > div {
  display: none;                 /* показывает js */
  position: relative;
  padding-right: 30px !important;
}
.zakryt-soobshenie {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 18px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: .85;
}
.zakryt-soobshenie:hover { background: rgba(255, 255, 255, .32); opacity: 1; }

/* ── Окно с выдачей YouTube ─────────────────────────────────────
   Что именно показал поиск по запросу и гео при последней проверке.
   Данные берутся из уже полученного ответа — повторных запросов нет. */
#vydacha-okno {
  position: fixed; z-index: 3100;
  top: 0; left: 0;
  width: 100vw;  width: 100dvw;
  height: 100vh; height: 100dvh;
  background: rgba(10, 13, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
#vydacha-okno.skryt { display: none; }

.vydacha-vnutri {
  width: 100%; max-width: 640px;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .45);
}

/* Шапка в две строки: сверху тег и место, снизу мелким название окна,
   гео и время. В одну строку длинный тег не помещался — под гео и время
   уходила половина ширины, и от тега оставалось несколько букв. */
.vydacha-shapka {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px;
  background: #f2f5f8;
  border-bottom: 1px solid #d6dce2;
  font: 13px 'Segoe UI', sans-serif;
  color: #23272b;
}

.vydacha-svedeniya {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}

.vydacha-stroka1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vydacha-stroka2 {
  display: flex; align-items: baseline; gap: 5px;
  min-width: 0; font-size: 10.5px; color: #8a939c;
}

/* Тег — главное в шапке: занимает всю первую строку и сжимается
   многоточием только когда места правда нет */
.vydacha-zapros {
  min-width: 0; flex: 0 1 auto;
  font-size: 13px; font-weight: 600; color: #23272b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Название окна мелкое и тусклое: важны тег и место, а не то,
   как окно называется */
.vydacha-zagolovok { color: #8a939c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vydacha-podpis { font-size: 10px; }
.vydacha-znach {
  font-size: 11px; font-weight: 600; color: #23272b;
  white-space: nowrap;
}

.vydacha-knopki { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.vydacha-shapka button {
  background: #e4e9ee; color: #35414d; border: none; border-radius: 5px;
  padding: 2px 9px; font-size: 14px; cursor: pointer; line-height: 1.4;
}
.vydacha-shapka button:hover { background: #d5dce3; }

.vydacha-spisok { overflow-y: auto; padding: 6px; }

.vydacha-strochka {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
}

/* Превью с длительностью в углу — как на самом YouTube */
.vydacha-prevyu { position: relative; flex: 0 0 auto; line-height: 0; }
.vydacha-dlit {
  position: absolute; right: 3px; bottom: 3px;
  padding: 0 3px; border-radius: 2px;
  background: rgba(0, 0, 0, .8); color: #fff;
  font: 600 10px/14px 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
}
.vydacha-strochka:hover { background: #f2f5f8; }
.vydacha-nomer {
  flex: 0 0 22px;
  text-align: center;
  font: 600 12px/1 'Segoe UI', sans-serif;
  color: #8a939c;
}
.vydacha-strochka img {
  flex: 0 0 auto;
  width: 108px; height: 61px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}
.vydacha-tekst { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vydacha-nazv {
  font-size: 12.5px; line-height: 1.25; color: #23272b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vydacha-kanal { font-size: 11px; color: #6b7480; }

/* Ваш ролик в выдаче — выделен */
.vydacha-strochka.nash-rolik { background: #e8f4ea; box-shadow: inset 0 0 0 1px #b6ddbf; }
.vydacha-strochka.nash-rolik .vydacha-nomer { color: #2f6b34; }
.vydacha-strochka.nash-rolik .vydacha-kanal { color: #2f6b34; font-weight: 600; }

/* Лупа в строке заказа — рядом с «чекнуть». Видна всегда. */
.knopka-lupa {
  padding: 0 5px;
  font-size: 12px;
  line-height: 16px;
  height: 17px;
  background: #eef1f4;
  border: 1px solid #d6dce2;
  border-radius: 4px;
  cursor: pointer;
}
.knopka-lupa:hover { background: #e2e7ec; }
html[data-tema="noch"] .knopka-lupa { background: #2a3036; border-color: #3a424a; }

/* Id искомого ролика в шапке окна. Мелкий и тусклый: это опознавательный
   знак, а не то, ради чего окно открывают. Моноширинный — id состоит из
   похожих друг на друга знаков, и вразнобой они читаются плохо. */
.vydacha-vid-id {
  margin-left: auto;          /* вместе с местом уезжает к правому краю */
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #8a939c;
  white-space: nowrap;
}
/* Отступ вправо уже забрал id — второй раз его забирать не надо,
   иначе между id и местом появится пустота во всю строку */
.vydacha-vid-id + .vydacha-mesto { margin-left: 0; }
html[data-tema="noch"] .vydacha-vid-id { color: #949ca6; }

/* Место нашего ролика в шапке окна. Красное и жирное: его в этом окне
   ищут глазами первым, всё остальное — обстоятельства проверки. */
.vydacha-mesto {
  margin-left: auto;          /* прижато к правому краю первой строки */
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: #c4302b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-tema="noch"] .vydacha-mesto { color: #ff8a85; }

/* Числа под названием ролика в окне выдачи */
/* Числа: значение заметное, подпись рядом мелкая */
.vydacha-chisla {
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  font-size: 10px;
  color: #8a939c;
  font-variant-numeric: tabular-nums;
}
.vydacha-chisla b { font-size: 11px; font-weight: 600; color: #4a5461; }
html[data-tema="noch"] .vydacha-chisla b { color: #c3c9d0; }
.vydacha-18 { color: #b81414; font-weight: 600; }
.vydacha-zhdem { padding: 18px; text-align: center; color: #8a939c; font-size: 12px; }
html[data-tema="noch"] .vydacha-chisla,
html[data-tema="noch"] .vydacha-zhdem { color: #949ca6; }
html[data-tema="noch"] .vydacha-18 { color: #ff9b9b; }

@media (max-width: 700px), (pointer: coarse) {
  #vydacha-okno { padding: 0; }
  .vydacha-vnutri { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }

  /* На телефоне место дороже: превью меньше, отступы почти убраны,
     шапка переносится в две строки, заголовок прячем совсем */
  .vydacha-strochka img { width: 76px; height: 43px; }
  .vydacha-strochka { gap: 6px; padding: 2px 4px; }
  .vydacha-spisok { padding: 3px; }
  .vydacha-nomer { flex: 0 0 16px; font-size: 11px; }
  .vydacha-nazv { font-size: 11.5px; }
  .vydacha-kanal { font-size: 10px; }
  .vydacha-chisla { font-size: 9.5px; gap: 0 6px; }
  .vydacha-chisla b { font-size: 10.5px; }
  .vydacha-dlit { font-size: 9px; line-height: 12px; }

  /* Те же две строки, только мельче. Название окна прячем совсем:
     на узком экране во второй строке важнее гео и время. */
  .vydacha-shapka { padding: 4px 8px; gap: 8px; }
  .vydacha-zagolovok { display: none; }
  .vydacha-zapros { font-size: 12px; }
  .vydacha-stroka1 { gap: 8px; }
  .vydacha-stroka2 { font-size: 9.5px; }
  .vydacha-znach { font-size: 10px; }
  .vydacha-mesto { font-size: 13px; }
}

html[data-tema="noch"] .vydacha-vnutri { background: #1c2024; }
html[data-tema="noch"] .vydacha-shapka {
  background: #23282d; color: #e3e6e9; border-bottom-color: #2c3237;
}
html[data-tema="noch"] .vydacha-shapka button { background: #2a3036; color: #e3e6e9; }
html[data-tema="noch"] .vydacha-nazv { color: #e3e6e9; }
html[data-tema="noch"] .vydacha-znach { color: #e3e6e9; }
html[data-tema="noch"] .vydacha-zapros { color: #e3e6e9; }
html[data-tema="noch"] .vydacha-strochka:hover { background: #23282d; }
html[data-tema="noch"] .vydacha-strochka.nash-rolik {
  background: #27352a; box-shadow: inset 0 0 0 1px #3c5741;
}
html[data-tema="noch"] .vydacha-strochka.nash-rolik .vydacha-nomer,
html[data-tema="noch"] .vydacha-strochka.nash-rolik .vydacha-kanal { color: #8fd39a; }
html[data-tema="noch"] .knopka-vydacha {
  background: #2a3036; color: #e3e6e9; border-color: #3a424a;
}

/* ── Памятка в футере ───────────────────────────────────────────
   Свёрнута: в футере мало места, а инструкция нужна не каждый день.
   Разворачивается всплывающим окошком над строкой, чтобы не разъезжался
   сам футер. */
/* Пока памятка открыта, поднимаем ВЕСЬ футер: у него свой слой с нулевым
   порядком (position: relative + z-index: 0), и что бы мы ни задали
   вложенной подсказке, выше этого слоя она подняться не может — её
   перекрывала липкая шапка таблицы. */
.ui.borderless.menu:has(.pamyatka[open]),
.ui.borderless.menu.pamyatka-otkryta { z-index: 4200; }

.pamyatka { position: relative; z-index: 4200; }
.pamyatka > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: #2196F3;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
}
.pamyatka > summary::-webkit-details-marker { display: none; }
.pamyatka > summary:hover { background: #eef1f4; }
.pamyatka[open] > summary { background: #e3edf8; }

.pamyatka-vnutri {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  width: 460px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d6dce2;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
  font-size: 12px;
  line-height: 1.45;
  color: #23272b;
  text-align: left;
  z-index: 4200;           /* выше липкой шапки таблицы и выпадающих окон */
  white-space: normal;
}
.pamyatka-vnutri h4 {
  margin: 12px 0 4px;
  font-size: 12.5px;
  color: #1b5e93;
}
.pamyatka-vnutri h4:first-child { margin-top: 0; }
.pamyatka-vnutri p { margin: 0 0 6px; }
.pamyatka-vnutri ul { margin: 0 0 6px; padding-left: 18px; }
.pamyatka-vnutri li { margin-bottom: 2px; }

@media (max-width: 700px), (pointer: coarse) {
  .pamyatka-vnutri { right: auto; left: 0; width: 92vw; }
}

html[data-tema="noch"] .pamyatka-vnutri {
  background: #1c2024;
  border-color: #2c3237;
  color: #e3e6e9;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
html[data-tema="noch"] .pamyatka-vnutri h4 { color: #8ec0ff; }
html[data-tema="noch"] .pamyatka > summary:hover { background: #2a3036; }
html[data-tema="noch"] .pamyatka[open] > summary { background: #22303f; }

/* ── Бегунок на кнопке ──
   Свой, а не загрузчик Semantic UI: тот подменяет кнопке цвет и требует
   своих классов, а здесь нужно только показать, что запрос пошёл. Работает
   на любой кнопке: <span class="krutilka"></span> перед надписью. */
.krutilka {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: krutilka-hod .7s linear infinite;
}
@keyframes krutilka-hod { to { transform: rotate(360deg); } }
/* На светлой кнопке белый бегунок не виден — там он тёмный */
.ui.button:not(.orange):not(.red):not(.primary):not(.green):not(.blue):not(.teal):not(.brown) .krutilka {
  border-color: rgba(0, 0, 0, .25);
  border-top-color: #444;
}

/* ═══════════════════════════════════════════════════════════════
   Выполненные просмотры — кнопка «закрыть заказ по выполненному».

   Рамка прозрачная намеренно: у строки свой цвет заливки (выполнена,
   оплачена, стоит), и любой собственный фон у кнопки спорил бы с ним.
   Просвечивает цвет строки, видна только рамка и само число.
   ═══════════════════════════════════════════════════════════════ */
.knopka-vypoln {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 5px;
  padding: 1px 7px;
  font: inherit;
  line-height: 1.5;
  cursor: pointer;
  min-width: 34px;
}
.knopka-vypoln:hover:not(:disabled) {
  border-color: #b62324;
  color: #b62324;
  background: rgba(182, 35, 36, .07);
}
.knopka-vypoln:active:not(:disabled) { background: rgba(182, 35, 36, .15); }
/* Возвращать нечего — рамка бледнеет, но число остаётся читаемым */
.knopka-vypoln:disabled {
  border-color: rgba(0, 0, 0, .13);
  cursor: default;
  opacity: .75;
}
html[data-tema="noch"] .knopka-vypoln { border-color: rgba(255, 255, 255, .3); }
html[data-tema="noch"] .knopka-vypoln:hover:not(:disabled) {
  border-color: #ff9a9a;
  color: #ff9a9a;
  background: rgba(255, 154, 154, .1);
}
html[data-tema="noch"] .knopka-vypoln:disabled { border-color: rgba(255, 255, 255, .12); }

/* Кнопка снимка в шапке окна выдачи */
.knopka-skrin {
  background: #e4e9ee;
  color: #35414d;
  border: none;
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}
.knopka-skrin:hover:not(:disabled) { background: #d5dce3; }
.knopka-skrin:disabled { opacity: .6; cursor: default; }
html[data-tema="noch"] .knopka-skrin { background: #2a3036; color: #e3e6e9; }

/* Номер строки как кнопка: по клику раскрывается список статей сети сателлитов по этому заказу */
button.nomer-sat{background:none;border:1px solid transparent;border-radius:4px;padding:1px 5px;cursor:pointer;font:inherit;color:inherit;line-height:1.2}
button.nomer-sat:hover{border-color:#b98;background:#fff3e0}
/* По заказу уже есть статьи сети — видно сразу при открытии таблицы, без клика */
button.nomer-sat.est-stati{background:#ffe066;border-color:#e6c200;color:#3d3000;font-weight:bold}
button.nomer-sat.est-stati:hover{background:#ffd633;border-color:#c9a800}
html[data-tema="noch"] button.nomer-sat.est-stati{background:#b58900;border-color:#8a6800;color:#fff8e1}
html[data-tema="noch"] button.nomer-sat.est-stati:hover{background:#c99a12;border-color:#9c7700}
/* раскрытая строка — коричневая, она главнее подсветки, поэтому правило идёт последним */
button.nomer-sat.otkryt,
button.nomer-sat.otkryt:hover,
html[data-tema="noch"] button.nomer-sat.otkryt,
html[data-tema="noch"] button.nomer-sat.otkryt:hover{border-color:#8B4513;background:#8B4513;color:#fff;font-weight:bold}
/* Сателлиты: всплывающее окошко со статьями по заказу (открывается кнопкой-номером строки).
   Стоит position: fixed, координаты, ширину и max-height ставит js (satPolozhenie).
   z-index ниже зоны уведомлений (4000) — сообщение «скопированы» видно поверх окошка. */
.sat-okno{position:fixed;z-index:3000;display:flex;flex-direction:column;box-sizing:border-box;
  width:max-content;min-width:260px;   /* резиновое: по самому длинному названию; предел по экрану ставит js (max-width) */
  background:#fffaf2;color:#333;border:1px solid #d9c3a5;border-radius:6px;
  box-shadow:0 6px 22px rgba(0,0,0,.22);font-size:12px;line-height:1.35;overflow:hidden}
.sat-shapka{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 9px;border-bottom:1px solid #ecdcc6;flex:0 0 auto}
.sat-shapka > b{color:#8B4513;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sat-kopir{flex:0 0 auto;font:inherit;font-size:11px;padding:2px 8px;border:1px solid #c9a27a;border-radius:4px;
  background:#fff;color:#8B4513;cursor:pointer;white-space:nowrap;line-height:1.4}
.sat-kopir:hover{background:#8B4513;border-color:#8B4513;color:#fff}
.sat-kopir:disabled{opacity:.45;cursor:default;background:#fff;color:#8B4513;border-color:#c9a27a}
.sat-zakryt{flex:0 0 auto;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:none;
  color:#888;font-size:14px;line-height:22px;cursor:pointer}
.sat-zakryt:hover{background:#f3e1e1;color:#c33}
.sat-telo{overflow-y:auto;padding:3px 9px 6px;overscroll-behavior:contain;min-height:0}
.sat-spisok{margin:0}
.sat-punkt{display:flex;align-items:baseline;gap:6px;padding:3px 0;border-top:1px dotted #e6d8c4}
.sat-punkt:first-child{border-top:none}
.sat-yaz{flex:0 0 auto;min-width:20px;text-align:center;font-size:10px;font-weight:bold;text-transform:uppercase;
  padding:0 3px;border-radius:3px;background:#efe2cf;color:#6b3a10;letter-spacing:.3px}
.sat-punkt a{flex:0 0 auto;font-weight:600;white-space:nowrap}
.sat-zag{flex:1 1 auto;min-width:0;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* название целиком одной строкой — окошко растягивается под него */
@media (max-width:700px){ .sat-zag{white-space:normal;overflow-wrap:anywhere;overflow:visible} }   /* на телефоне экрана не хватит — переносим */
.sat-data{flex:0 0 auto;color:#888;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sat-mini{color:#888;font-size:11px}
.sat-rolik{display:block;margin:3px 0 0}
.sat-indeks{flex:0 0 auto;color:#1a7f37;font-size:11px;white-space:nowrap}
.sat-yaz.sat-yaz-net{background:#f3e1e1;color:#a33}
.sat-preduprezhdenie{color:#b35900;margin-top:3px}
.sat-osh{color:#c33}
html[data-tema="noch"] .sat-okno{background:#23272e !important;color:#d8dde3 !important;border-color:#566270 !important;box-shadow:0 6px 22px rgba(0,0,0,.6)}
html[data-tema="noch"] .sat-shapka{border-bottom-color:#3a424d}
html[data-tema="noch"] .sat-shapka > b{color:#e0a86b !important}
html[data-tema="noch"] .sat-kopir{background:#2c323a !important;color:#e0a86b !important;border-color:#7a5a3a !important}
html[data-tema="noch"] .sat-kopir:hover{background:#8B4513 !important;color:#fff !important}
html[data-tema="noch"] .sat-kopir:disabled{background:#2c323a !important;color:#e0a86b !important}
html[data-tema="noch"] .sat-zakryt:hover{background:#4a2a2a;color:#ff8a80}
html[data-tema="noch"] .sat-punkt{border-top-color:#3a424d}
html[data-tema="noch"] .sat-yaz{background:#4a3a24 !important;color:#ffd9a8 !important}
html[data-tema="noch"] .sat-zag{color:#b8c0c9 !important}
html[data-tema="noch"] .sat-yaz.sat-yaz-net{background:#4a2a2a !important;color:#ff8a80 !important}
html[data-tema="noch"] .sat-preduprezhdenie{color:#ffb74d}
html[data-tema="noch"] .sat-indeks{color:#6fd18a !important}