/* «Каталог эффектов» by menu section (web/admin-effects-list.js): sections with their bulk buttons, each effect's
   switch «во всех ботах», its menu section and the pills of what a run takes; the header switch «Включать новые эффекты
   из API сразу» and the outcome of a bulk switch. The graphite palette of style.css; no inline styles (CSP). */

.effects-toolbar { align-items: end; }
.effects-section-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.effects-section-filter span { white-space: nowrap; }
.effects-section-filter select { width: auto; min-width: 180px; max-width: 100%; min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; }

.effect-sections { display: grid; gap: 22px; }
.effect-menu-error { display: grid; justify-items: start; gap: 10px; margin-bottom: 12px; }
.effect-menu-error p { margin: 0; }
.effect-section { display: grid; gap: 10px; }
.effect-section-head { margin-bottom: 0; }
.effect-section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.effect-section-head .pill { margin-top: 0; }

.effect-row .effect-main { min-width: 0; }
.effect-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.effect-badges .pill { min-height: 22px; padding: 0 8px; font-size: 12px; }
.effect-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.effect-switch, .effects-auto { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
.effect-switch { white-space: nowrap; }
.effects-auto { max-width: 100%; }
.effect-place { display: flex; align-items: center; gap: 8px; margin: 0; }
.effect-place span { white-space: nowrap; }
.effect-place select { width: auto; min-width: 150px; max-width: 220px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }

.effect-bulk-names, .effect-bulk-results { margin: 8px 0 0; padding-left: 18px; }
.effect-bulk-names { max-height: 40vh; overflow: auto; }
.effect-bulk-results { max-height: 50vh; overflow: auto; }
.effects-auto-paused { color: var(--warn); font-size: 13px; }
.effect-bulk-results li { margin: 4px 0; }
.effect-bulk-results li.is-failed { color: var(--warn); }

@media (min-width: 620px) {
  .effect-actions { flex: none; justify-content: flex-end; max-width: 55%; }
}
@media (max-width: 619px) {
  .effect-place { width: 100%; }
  .effect-place select { flex: 1; max-width: none; }
  .effects-section-filter { width: 100%; }
  .effects-section-filter select { flex: 1; }
}