/* css/components/scrollbars.css — Единый вид полос прокрутки во всех прокручиваемых областях.
   Порядок подключения всех стилей задан в layout/head.php — он важен. */

/* ===== ЕДИНЫЙ СТИЛЬ СКРОЛЛБАРА ДЛЯ ВСЕХ ПРОКРУЧИВАЕМЫХ ОБЛАСТЕЙ =====
   Боковые панели (Settings / Batch Tools / CSV Export), модалки
   (Usage Statistics), кастомный dropdown-список и
   фиксированные по высоте Include/Exclude/Trademarks (.kr-field-row). */
.batch-tools-panel,
.pstats-body,
.custom-select-list,
.kr-field-row textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 92, 255, 0.4) transparent;
}

.batch-tools-panel::-webkit-scrollbar,
.pstats-body::-webkit-scrollbar,
.custom-select-list::-webkit-scrollbar,
.kr-field-row textarea::-webkit-scrollbar {
  width: 6px;
}

.batch-tools-panel::-webkit-scrollbar-track,
.pstats-body::-webkit-scrollbar-track,
.custom-select-list::-webkit-scrollbar-track,
.kr-field-row textarea::-webkit-scrollbar-track {
  background: transparent;
}

.batch-tools-panel::-webkit-scrollbar-thumb,
.pstats-body::-webkit-scrollbar-thumb,
.custom-select-list::-webkit-scrollbar-thumb,
.kr-field-row textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.45), rgba(0, 229, 255, 0.35));
  border-radius: 3px;
}

.batch-tools-panel::-webkit-scrollbar-thumb:hover,
.pstats-body::-webkit-scrollbar-thumb:hover,
.custom-select-list::-webkit-scrollbar-thumb:hover,
.kr-field-row textarea::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.65), rgba(0, 229, 255, 0.55));
}

.settings-mirror-card #model,
.settings-mirror-card #platform {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid rgba(124, 92, 255, 0.2);
  background: linear-gradient(180deg, rgba(20, 28, 45, 0.95), rgba(12, 18, 32, 0.98));
  color: #ffffff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.settings-mirror-card #model:hover,
.settings-mirror-card #platform:hover {
  border-color: rgba(0, 229, 255, 0.35);
}

.settings-mirror-card #model:focus {
  border-color: rgba(124, 92, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15), 0 0 18px rgba(124, 92, 255, 0.2);
}

/* .settings-field-label — это <label for="..."> у Title/Description/
   Keywords count/Top keywords count. Отдельно от .settings-toggle-switch
   (тот тоже <label>, но это переключатель, не подпись — не трогаем его здесь). */
.settings-mirror-card .settings-field-label {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-mirror-card .settings-field-control input[type="number"] {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, 0.2);
  background: linear-gradient(180deg, rgba(20, 28, 45, 0.95), rgba(12, 18, 32, 0.98));
  color: #ffffff;
  outline: none;
  text-align: right;
}

.settings-mirror-card .settings-field-control input[type="number"]:focus {
  border-color: rgba(124, 92, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15), 0 0 18px rgba(124, 92, 255, 0.2);
}

/* То же самое для текстовых полей .settings-field-control — раньше только
   input[type=number] (Title/Description/Keywords и т.п. лимиты), текстовые
   поля не появлялись в этом паттерне ни у одного генератора до Audio
   (License/Artist/Author Name и т.п., переведены с .kr-field на
   .settings-field 2026-08-25 для единообразия с остальными тремя
   генераторами) — тот же вид, что у number, без text-align:right (текст
   читается слева, не как число). */
.settings-mirror-card .settings-field-control input[type="text"] {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, 0.2);
  background: linear-gradient(180deg, rgba(20, 28, 45, 0.95), rgba(12, 18, 32, 0.98));
  color: #ffffff;
  outline: none;
}

.settings-mirror-card .settings-field-control input[type="text"]:focus {
  border-color: rgba(124, 92, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15), 0 0 18px rgba(124, 92, 255, 0.2);
}