:root {
  --bg: #0e1014;
  --panel: #171a21;
  --panel-2: #1d212a;
  --border: #272c37;
  --border-control: #666c78;
  --text: #e7eaf0;
  --muted: #8b93a7;
  --accent: #3390ec;
  --accent-hover: #4a9df0;
  --accent-solid: #2a78c4;
  --accent-solid-hover: #2465a6;
  --selection-bg: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  --ok: #3fb950;
  --err: #f85149;
  --warn: #d29922;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);

  /* Дизайн-система: единые радиусы, шкала шрифтов и геометрия кнопок.
     Новые элементы берут значения отсюда, а не подбирают на глаз. */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  --fs-xs: 12px;      /* значки, счётчики, мелкие подписи */
  --fs-sm: 13px;      /* вторичный текст, подсказки */
  --fs-md: 14.5px;    /* основной текст, кнопки */
  --fs-lg: 16px;      /* заголовки карточек */
  --fs-xl: 20px;      /* крупные заголовки */

  /* Кольцо фокуса — одно на все кнопки и поля. */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* Тема одна — тёмная. Говорим об этом браузеру, иначе он рисует своим
     светлым: автозаполнение полей, календари, полосы прокрутки. */
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Свои display у блоков перебивали hidden — и «скрытое» оставалось на экране */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; min-height: 100vh; }
.mobile-nav-toggle, .mobile-nav-backdrop { display: none; }

/* Первое состояние приходит с сервера после проверки входа. До него не даём
   редактировать пустые заготовки: так ни одна правка не может «потеряться»
   между открытием страницы и первым ответом API. */
.workspace-boot {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel-2) 92%, var(--accent));
  color: var(--muted);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow);
}

.workspace-boot-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: workspace-boot-pulse 1.1s ease-in-out infinite;
}
.workspace-boot.problem {
  border-color: color-mix(in srgb, var(--err) 52%, var(--border));
  color: var(--text);
}
.workspace-boot.problem .workspace-boot-dot {
  background: var(--err);
  animation: none;
}
.app:not(.is-booting) .workspace-boot { display: none; }
.app.is-booting .content > :not(.workspace-boot),
.app.is-booting .topbar-actions {
  pointer-events: none;
  user-select: none;
  opacity: .58;
}
@keyframes workspace-boot-pulse {
  50% { transform: scale(.68); opacity: .55; }
}

/* ===== Сайдбар ===== */
.sidebar {
  width: 276px;
  flex: 0 0 276px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex; align-items: center; gap: 10px; padding: 0 6px;
  color: inherit; text-decoration: none;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent),
    color-mix(in srgb, var(--accent) 58%, var(--text)));
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; letter-spacing: .5px;
}
.brand-text { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.sidebar-collapse {
  position: absolute; top: 20px; right: 16px; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--panel-2); color: var(--muted);
}
.sidebar-collapse:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.sidebar-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app.sidebar-collapsed .sidebar { width: 76px; flex-basis: 76px; }
.app.sidebar-collapsed .brand-text,
.app.sidebar-collapsed .nav,
.app.sidebar-collapsed .sidebar-foot { display: none; }
.app.sidebar-collapsed .sidebar-collapse { top: 68px; right: 20px; }
.app.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
/* Счётчик уходит вправо — он справочный, а не часть названия. */
.nav-item > .badge { margin-left: auto; }

/* Подзаголовки навигации: отделяют «что настроить для отправки» от отчётов,
   чтобы порядок шагов читался сверху вниз. */
.nav-group {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .75;
  padding: 0 12px;
  margin: 16px 0 6px;
}

/* Три шага настройки — с номерами: видно порядок, что за чем настраивать. */
.nav-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: навшаг;
}

.nav-section {
  margin: 8px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  user-select: none;
}
.nav-section > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .12s ease;
}
.nav-section[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.nav-section > summary:hover { background: transparent; color: var(--text); }
.nav-section > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.nav-section-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 7px;
}
.nav-section .nav-item { user-select: none; }

/* Три шага не висят россыпью в сайдбаре: это один раскрывающийся раздел.
   Название объясняет, что именно настраивается, ещё до первого клика. */
.nav-dispatch {
  margin: 8px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  user-select: none;
}
.nav-dispatch > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.nav-dispatch > summary::-webkit-details-marker { display: none; }
.nav-dispatch > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .12s ease;
}
.nav-dispatch[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.nav-dispatch > summary:hover { background: transparent; color: var(--text); }
.nav-dispatch > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.nav-dispatch .nav-steps { padding: 0 0 7px; }
.nav-dispatch .nav-item { user-select: none; }

.nav-steps .nav-item::before {
  content: counter(навшаг);
  counter-increment: навшаг;
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--muted);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}

.nav-steps .nav-item:hover::before { color: var(--text); }
.nav-steps .nav-item.active::before { background: var(--accent); color: #fff; }
/* У запертого шага номер тоже гаснет — заодно с самим пунктом. */
.nav-steps .nav-item.locked::before { opacity: .55; }

/* Раздел заблокирован, пока нет рабочего аккаунта: тусклый, с замком, курсор
   «нельзя». Кнопку не отключаем совсем — иначе не покажется подсказка при
   наведении, а по клику уводим к добавлению аккаунта. */
.nav-item.locked { opacity: .45; cursor: not-allowed; }
.nav-item.locked:hover { background: transparent; color: var(--muted); }
.nav-item.locked::after {
  content: "🔒";
  font-size: 11px;
  margin-left: auto;
  opacity: .8;
}
/* Замок вместо счётчика: у заблокированного раздела счётчик не нужен. */
.nav-item.locked .badge { display: none; }

/* Выход в кабинет — ссылка, а не вкладка: отделяем чертой, чтобы не читалась
   как ещё один раздел рассылки. */
.nav-back {
  text-decoration: none;
  margin-bottom: 6px; padding-bottom: 13px;
  border-bottom: 1px solid var(--border); border-radius: 9px 9px 0 0;
}
.nav-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge {
  font-style: normal; font-size: 11px; font-weight: 600;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 20px; min-width: 22px; text-align: center;
}
.nav-item.active .badge { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: transparent; }

.account-summary {
  align-items: end;
}

.account-summary > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-summary strong {
  font-weight: 600;
}

.warmup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.warmup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.warmup-summary > div {
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  display: grid;
  align-content: center;
  gap: 5px;
}
.warmup-summary span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.warmup-summary strong {
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.warmup-table {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.warmup-mode {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  font-size: 13px;
}
.warmup-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) 116px minmax(180px, 1fr) minmax(170px, 1fr) minmax(160px, .8fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  background: var(--panel);
}
.warmup-row + .warmup-row { border-top: 1px solid var(--border); }
.warmup-row.head {
  min-height: 38px;
  background: color-mix(in srgb, var(--panel-2) 74%, var(--panel));
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.warmup-account {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.warmup-account b,
.warmup-device b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warmup-account small,
.warmup-device small,
.warmup-error {
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warmup-state {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.warmup-state.ready {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.warmup-state.attention {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.warmup-state.paused {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}
.warmup-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.warmup-check {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.warmup-check.ok {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.warmup-device {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.warmup-proxy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.warmup-proxy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .warmup-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warmup-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .warmup-row.head { display: none; }
}

/* Остаток обращений к Клоду: на исходе — предупреждаем, кончился — гасим
   красным. Молча упереться в потолок неприятно. */
#accountAiLimit.low { color: var(--warn); }
#accountAiLimit.out { color: var(--err); }

.sidebar-foot { margin-top: auto; }

/* Вход в админку — заметная кнопка в тон «Личного кабинета»: это раздел
   владельца, не рядовая ссылка. Видна только администратору. */
.admin-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font-weight: 650;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .12s;
}

.admin-link:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
  transform: translateY(-1px);
}

.admin-ico { font-size: 15px; line-height: 1; }

/* ===== Кнопка запуска обучения ===== */
.tour-launch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tour-launch:hover {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.tour-launch:disabled {
  border-style: solid;
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: .62;
}
.tour-launch:disabled:hover { border-color: var(--border); background: transparent; }
.tour-launch-ico { font-size: 15px; line-height: 1; }

/* ===== Панель обучения ===== */
/* Контейнер во весь экран сам клики не ловит — их ловят затемнение и карточка.
   Так на шаге-объяснении затемнение блокирует страницу (модалка), а на
   шаге-ожидании — пропускает клики, чтобы человек мог нажимать кнопки. */
/* Слои: затемнение (40) ниже диалогов (.ask-back 60, .modal 100) — открытое
   окно остаётся освещённым само по себе. Подсветка цели (45) выше затемнения,
   карточка гида (110) — выше всего и сбоку, чтобы ничего не закрывать. */
.tour {
  position: fixed; inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.tour-dim {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
}

.tour-dim-part {
  position: fixed;
  display: block;
  margin: 0;
  background: rgba(3, 8, 16, .62);
  pointer-events: auto;
}

/* Карточка гида всегда яркая: она поверх затемнения и должна читаться как
   активный элемент, а не как погашенный кусок страницы. */
.tour-card {
  position: fixed; z-index: 110;
  right: 24px; top: 50%; transform: translateY(-50%);
  width: 350px; max-width: calc(100vw - 32px);
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
              0 18px 50px rgba(0, 0, 0, .55),
              0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
  overflow: hidden;
  pointer-events: auto;
  transition: left .18s ease, right .18s ease, top .18s ease;
}

/* Шаг-ожидание и шаг с подсветкой: затемнение не ловит клики — по кнопке или
   в открытом окне надо действовать прямо сейчас. */
.tour.tour-spotting .tour-dim-part { background: rgba(3, 8, 16, .48); }

/* Луч: элемент поднимается над затемнением и обводится акцентом с пульсом —
   как подсказка в обучении игры. */
.tour-spot {
  position: relative;
  z-index: 45;
  border-radius: 10px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 34px 8px color-mix(in srgb, var(--accent) 34%, transparent);
  animation: tour-spot-pulse 1.6s ease-in-out infinite;
}

@keyframes tour-spot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent),
                         0 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent),
                         0 0 34px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 85%, transparent),
                         0 0 0 16px color-mix(in srgb, var(--accent) 10%, transparent),
                         0 0 44px 12px color-mix(in srgb, var(--accent) 45%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spot { animation: none; }
}

.tour-progress { height: 4px; background: var(--panel-2); }
.tour-fill {
  height: 100%; width: 0;
  background: var(--accent);
  transition: width .35s ease;
}

.tour-body { padding: 18px 20px 20px; }

.tour-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tour-step { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.tour-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 2px 6px; line-height: 1;
}
.tour-x:hover { color: var(--text); }

.tour-title { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 650; color: var(--text); }
/* Текст гида — обычный, а не приглушённый: его читают, а не проглядывают. */
.tour-text { margin: 0; color: var(--text); opacity: .92; line-height: 1.6; font-size: var(--fs-md); }
.tour-step { color: var(--accent); }

/* Ожидание действия пользователя — с «дышащей» точкой. */
.tour-wait {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: flex; align-items: center; gap: 9px;
}
.tour-wait::before {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: tour-pulse 1.2s ease-in-out infinite;
}
.tour-wait.done {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.tour-wait.done::before { animation: none; }

@keyframes tour-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.tour-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.tour-finished .tour-wait { display: none; }

@media (max-width: 900px) {
  /* Узкий экран: сбоку места нет — карточка уходит вниз. */
  .tour-card {
    right: 12px; left: 12px; top: auto; bottom: 12px;
    transform: none; width: auto;
  }
}

/* ===== Основная часть ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 12px 26px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.status { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: 0 0 8px;
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot.err { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 20%, transparent); }
.dot.busy { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.notification-center { position: relative; flex: 0 0 auto; }
.topbar-project { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--muted); }
.topbar-project svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.topbar-project > span:not(.topbar-divider) { color: var(--text); }
.topbar-project i {
  padding: 3px 8px; border-radius: 6px; background: var(--panel-2);
  color: var(--muted); font-size: var(--fs-xs); font-style: normal;
}
.topbar-divider { width: 1px; height: 24px; margin: 0 5px; background: var(--border); }
.topbar-bell {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text);
}
.topbar-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0 5px; border-radius: 999px;
  background: var(--err); color: white; border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.notification-mobile-label { display: none; }
.notification-panel {
  position: absolute; z-index: 90; top: calc(100% + 10px); right: 0;
  width: min(420px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 92px));
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow);
}
.notification-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--border);
}
.notification-panel-head > div { display: grid; gap: 2px; }
.notification-panel-head span { color: var(--text); font-size: var(--fs-lg); font-weight: 700; }
.notification-panel-head small { color: var(--muted); font-size: var(--fs-xs); }
.notification-panel-head .icon-btn { width: 40px; min-width: 40px; height: 40px; }
.notification-panel-head svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.notification-list {
  min-height: 0; max-height: 540px; overflow-y: auto; scrollbar-gutter: stable;
  padding: 10px;
}
.notification-item {
  display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--panel-2);
}
.notification-item + .notification-item { margin-top: 8px; }
.notification-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notification-item-head b { color: var(--text); font-size: var(--fs-sm); }
.notification-item-head time { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.notification-context {
  overflow: hidden; color: var(--muted); font-size: var(--fs-xs);
  text-overflow: ellipsis; white-space: nowrap;
}
.notification-item p { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.notification-skip-note,
.notification-topic-hint { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.notification-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.notification-suppress { color: var(--muted); }
.notification-topic-editor { display: grid; gap: 8px; margin-top: 2px; }
.notification-empty { display: grid; place-items: center; gap: 4px; min-height: 150px; text-align: center; }
.notification-empty b { color: var(--text); }
.notification-empty span { color: var(--muted); font-size: var(--fs-sm); }
#btnSend { display: none; }
.topbar-action-icon { display: none; }
.mobile-nav-toggle .topbar-action-label { display: none; }
.mobile-tab-shortcut { display: none; }

.content { padding: 28px 30px 48px; max-width: 1260px; width: 100%; }

.tab { display: none; }
.tab.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Карточки ===== */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card-head { margin-bottom: 16px; }
.card-head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.card-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.card-head p { margin: 0; font-size: 13px; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.card-foot > .primary:only-child { margin-left: auto; }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
.hint.err { color: var(--err); }
code {
  font-size: 13px; line-height: 1.4;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px;
}

/* ===== Поля ===== */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; font-weight: 550; color: var(--muted); margin-bottom: 6px; }
/* Перечислять типы поимённо оказалось ловушкой: у поля без type="…" вид
   оставался системным. Поэтому наоборот — оформляем все поля ввода, кроме
   тех, у кого своя внешность (галки, переключатели, выбор файла). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea {
  width: 100%; padding: 10px 12px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-control); border-radius: 9px;
  font: inherit; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-control); border-radius: 9px;
  padding: 9px 10px; font: inherit; outline: none; cursor: pointer;
}
select:focus { border-color: var(--accent); }
select:disabled { opacity: .5; cursor: default; }
.over { color: var(--err); font-weight: 650; }

/* ===== Кнопки ===== */
button {
  font: inherit; font-weight: 550; cursor: pointer;
  border-radius: 9px; padding: 9px 16px;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, opacity .12s, transform .06s;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; transform: none; }

/* Чип-кнопка: фильтры в админке, готовые формулировки в требованиях.
   Живёт здесь, а не в admin.css: index.html тот файл не подключает,
   и чипы рисовались системной кнопкой браузера. */
.chip-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.chip-btn:hover { color: var(--text); border-color: var(--muted); }

.chip-btn.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  border-color: var(--accent);
  color: var(--accent);
}

/* Одно кольцо фокуса на все кнопки и поля — и в app, и в кабинете, и в
   админке (style.css грузится везде). Раньше фокус нигде не был виден. */
button:focus-visible,
.btn:focus-visible,
.add-msg:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.chip-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.primary { background: var(--accent-solid); color: #fff; font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--accent-solid-hover); }
.ghost { background: transparent; color: var(--text); border-color: var(--border-control); }
.ghost:hover:not(:disabled) { background: var(--panel-2); }
.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 12%, transparent); }
.small { padding: 6px 12px; font-size: 12.5px; }
.icon-btn {
  background: transparent; border: 0; color: var(--muted);
  min-width: 34px; min-height: 34px; padding: 6px 9px;
  border-radius: 9px; line-height: 1;
}
.icon-btn:hover { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.icon-btn.danger {
  color: var(--err);
  border: 1px solid color-mix(in srgb, var(--err) 38%, transparent);
}
.row-gap { display: flex; gap: 8px; }

/* ===== Вход ===== */
.seg {
  display: inline-flex; gap: 3px; margin-bottom: 18px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.seg-btn {
  background: transparent; color: var(--muted); border: 0;
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
}
.seg-btn:hover:not(.active) { color: var(--text); }
.seg-btn.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

.qr-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.qr-box {
  flex: 0 0 auto; width: 224px; height: 224px; border-radius: 12px;
  background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
}
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-wait { color: var(--muted); font-size: 13px; }
.qr-side { flex: 1; min-width: 220px; }
.qr-steps { margin: 0; padding-left: 20px; }
.qr-steps li { margin-bottom: 7px; }
.qr-steps b { font-weight: 650; }

.details { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.details summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.details .toolbar { margin-top: 10px; margin-bottom: 0; }
.details input { font-size: 14px; }

.notice {
  margin: 0 0 14px; padding: 11px 13px; font-size: 13px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
}
.notice.warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.step {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); font-weight: 500;
  padding: 6px 12px 6px 6px; border-radius: 20px; border: 1px solid var(--border);
}
.step i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel-2); color: var(--muted);
  display: grid; place-items: center; font-size: 11px; font-weight: 650;
}
.step.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.step.active i { background: var(--accent); color: #fff; }
.step.done i { background: var(--ok); color: #fff; }

.account { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  background: linear-gradient(135deg, var(--accent),
    color-mix(in srgb, var(--accent) 52%, var(--text)));
  color: #fff; font-size: 19px; font-weight: 650;
  display: grid; place-items: center;
}
.account-info { flex: 1; min-width: 0; }
.account-name { font-weight: 650; font-size: 15px; }

/* ===== Сообщения ===== */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px;
}
.msg-item textarea { background: transparent; border: 0; padding: 2px; min-height: 54px; }
.msg-item textarea:focus { box-shadow: none; }
.msg-num {
  flex: 0 0 22px; height: 22px; border-radius: 6px; margin-top: 3px;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; font-weight: 650; display: grid; place-items: center;
}
.msg-body { flex: 1; min-width: 0; }
.msg-item textarea { width: 100%; min-height: 90px; }
.msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.msg-foot .muted { margin-right: auto; }
.msg-foot .over { color: var(--err); font-weight: 650; }
.msg-foot select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px;
}

.photos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.photo { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--panel); }
.photo button {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.photo:hover button { opacity: 1; }

.scan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.scan-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.scan-main { flex: 1; min-width: 0; }
.scan-preview {
  margin-top: 7px; padding: 8px 10px; max-height: 120px; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  white-space: pre-wrap; font-size: 12.5px; color: var(--muted);
}

/* ===== Группы ===== */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }

/* Панель вспомогательных действий: отделена тонкой чертой и набрана мельче —
   чтобы не спорить за внимание с главным действием карточки. */
.toolbar-quiet {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* Растягиваем только поля ввода. Без этой оговорки кружок переключателя,
   попавший в панель, раздувался в длинную пилюлю на 140 пикселей. */
.toolbar input:not([type="checkbox"]):not([type="radio"]) { flex: 1; min-width: 140px; }
.toolbar button { flex: 0 0 auto; }

.dialog-list {
  max-height: 380px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2);
}
/* ===== Выбор объявлений для папки =====
   Карточка показывает сам текст, а не только первую строку: по имени вроде
   «впп» человек не помнит, что внутри, и отмечает вслепую. */
.msg-pick { align-items: flex-start; gap: 12px; }
.msg-pick > input[type="checkbox"] { margin-top: 2px; }
.msg-pick .dialog-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg-pick .dialog-title { white-space: normal; font-weight: 600; }
.msg-pick-text {
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-pick-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-pick-foot .spacer { flex: 1; min-width: 0; }
.msg-pick-foot .muted { font-size: var(--fs-xs); white-space: nowrap; }
.msg-pick.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.msg-pick.has-message-preview { cursor: help; }
.message-preview-tooltip {
  position: fixed; z-index: 130;
  width: min(340px, calc(100vw - 24px)); max-height: min(220px, calc(100vh - 24px));
  padding: 11px 12px; overflow: auto;
  color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
  pointer-events: none;
}

/* Список, в котором лежит только подпись «пусто», коробкой не обводим:
   рамка вокруг одной фразы — это рамка ни о чём. */
.dialog-list:has(> .empty:only-child),
.msg-side:has(> .empty:only-child),
.folder-list:has(> .empty:only-child) {
  border: 0; background: none; padding: 0;
}
.dialog-row {
  display: flex; align-items: center; gap: 11px; user-select: none;
  padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.dialog-row:last-child { border-bottom: 0; }
.dialog-row { transition: background .12s; }
.dialog-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* Отмеченная строка видна и без взгляда на галочку. */
.dialog-row:has(input:checked) { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.dialog-row input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 16px; cursor: pointer; }
.dialog-main { flex: 1; min-width: 0; }
.dialog-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* В списке групп рядом с названием живут чип языка и кнопка «Язык?»:
   длинное имя обрезается, а чипу с кнопкой место остаётся всегда. */
.dialog-title.with-lang { display: flex; align-items: center; gap: 7px; }
.dialog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-ask {
  flex: 0 0 auto; padding: 1px 7px; font-size: 11px; line-height: 1.7;
  background: transparent; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 6px;
}
.lang-ask:hover { color: var(--accent); border-color: var(--accent); }
.lang-ask:disabled { opacity: .55; }
.lang-progress { font-size: 12px; }
.dialog-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-folder-note {
  display: inline-block; width: fit-content; margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 11px; line-height: 1.35; opacity: .8;
}
.dialog-folder-note.has-folder-assignment-tooltip { cursor: help; }
.folder-assignment-tooltip {
  position: fixed; z-index: 130; width: min(250px, calc(100vw - 24px));
  padding: 9px 11px; color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow); font-size: var(--fs-sm); line-height: 1.4;
  pointer-events: none;
}
.folder-assignment-tooltip-title { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 4px; }
.folder-assignment-tooltip-list { display: grid; gap: 2px; overflow-wrap: anywhere; }
.tag {
  font-size: 11px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); padding: 1px 8px; border-radius: 20px; flex: 0 0 auto;
}
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 5px 6px 5px 11px; border-radius: 20px; font-size: 12.5px;
}
.chip button { background: transparent; border: 0; color: var(--muted); padding: 0 4px; font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--err); }

/* ===== Переключатели ===== */
.switch { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer;
  user-select: none; -webkit-user-select: none; }

/* Переключатель. Вся геометрия выведена из одной величины — высоты дорожки.
   Ширина = 1.75 высоты, кружок = высота минус поля с двух сторон, ход =
   0.75 высоты. При таком счёте зазоры слева и справа равны сами собой, на
   любом размере. Раньше ширина, диаметр и ход были расписаны в четырёх
   местах и разъезжались при каждой правке. */
/* Селекторы с [type="checkbox"] — не для красоты: общее правило галочки
   (квадрат 20×20 с повёрнутой птичкой) имеет тот же вес и стоит ниже по
   файлу. Без атрибута оно выигрывало, и переключатель превращался в галку. */
.switch input[type="checkbox"] {
  /* Высота кратна 4: при 23px дорожка выходила 40.25px, а ход 17.25px —
     дробные пиксели округлялись в разные стороны, и кружок съезжал за край.
     При 24 всё целое: дорожка 42, кружок 18, ход 18. */
  --h: 24px;
  --pad: 3px;
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
  flex: 0 0 calc(var(--h) * 1.75);
  width: calc(var(--h) * 1.75); height: var(--h);
  border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  position: relative; cursor: pointer;
  transition: background .16s;
}
.switch input[type="checkbox"]::after,
.switch input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  /* margin сбрасываем обязательно: общее правило галочки центрует птичку
     через margin: -6px 0 0 -3px, и во включённом виде кружок уезжал вверх
     и влево. Свойство, которое не переопределили, приходит оттуда. */
  margin: 0;
  top: var(--pad); left: var(--pad);
  width: calc(var(--h) - var(--pad) * 2);
  height: calc(var(--h) - var(--pad) * 2);
  border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .16s;
}
.switch input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.switch input[type="checkbox"]:checked::after { transform: translateX(calc(var(--h) * .75)); }
.switch input[type="checkbox"]:hover { border-color: transparent; }
.switch input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ring); }

.scheduler-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scheduler-title { font-weight: 650; font-size: 15px; margin-bottom: 2px; }

/* ===== Результаты ===== */
.result-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.result-row:last-child { border-bottom: 0; }
.result-row .mark { flex: 0 0 auto; font-weight: 700; }
.result-row .mark.ok { color: var(--ok); }
.result-row .mark.err { color: var(--err); }
.result-row .why { color: var(--muted); margin-left: auto; text-align: right; }

/* ===== Журнал ===== */
.log {
  height: 460px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; font-size: 13px; line-height: 1.6;
}
.log-line { display: flex; gap: 10px; padding: 1px 0; }
.log-time { color: var(--muted); flex: 0 0 auto; }
.log-msg { white-space: pre-wrap; word-break: break-word; }
.log-line.ERROR .log-msg { color: var(--err); }
.log-line.WARNING .log-msg { color: var(--warn); }

/* ===== Двухколоночные раскладки ===== */
.split { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
.split-side, .split-main { min-width: 0; }
.spacer { flex: 1 1 auto; }
.busy { opacity: .6; pointer-events: none; }

/* ===== Папки ===== */
.folder-list {
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
}
.folder-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.folder-row:last-child { border-bottom: 0; }
.folder-row { transition: background .12s; }
.folder-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.folder-row.active {
  background: var(--selection-bg);
}
.folder-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-language-label {
  flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 500;
}
.folder-meta { font-size: 12px; color: var(--muted); }

/* Без рамки и заливки: карточка → панель → список давали три обводки вокруг
   одной фразы. Колонки разделяет сетка, а что где — говорят заголовки. */
.pane { min-width: 0; margin-bottom: 14px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pane-head h3 { margin: 0; font-size: 13px; font-weight: 650; }
.pane-head .switch { padding: 0; gap: 12px; font-size: var(--fs-sm); color: var(--muted); }
.pane .dialog-list { max-height: 300px; }
.pane .toolbar { margin-bottom: 10px; }
.pane .toolbar:last-of-type { margin-top: 10px; margin-bottom: 0; }
.pane .chips { margin-top: 10px; }
.pane .notice { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane .notice button { flex: 0 0 auto; }
#folderMsgList { max-height: 380px; }
#folderMsgSummary { margin: 10px 0 0; font-size: 12.5px; }
#folderMsgSummary.warn { color: var(--err); font-weight: 550; }

.lang-chip {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.lang-chip.warn {
  background: color-mix(in srgb, var(--err) 14%, transparent);
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 35%, transparent);
}
/* Язык группы не совпал с языком папки — жёлтый: уйдёт чужой язык */
.lang-chip.miss {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.dialog-row input.other { filter: grayscale(1); opacity: .65; }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }

.search-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.search-row:last-child { border-bottom: 0; }
.search-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.search-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 16px; cursor: pointer; }
.search-row.in-folder {
  background: color-mix(in srgb, var(--ok) 5%, transparent);
  border-color: color-mix(in srgb, var(--ok) 22%, var(--border));
}
.search-row.in-folder:hover { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.search-row.in-folder input[type="checkbox"] { opacity: .42; cursor: default; }

/* Поиск: переключатель режимов стоит вплотную к строке запроса */
#cardSearch .seg { margin-bottom: 12px; }
/* Строка запроса — textarea: в быстром режиме одна строка, в глубоком четыре */
.toolbar textarea {
  flex: 1; min-width: 200px; min-height: 0; resize: vertical;
  line-height: 1.45; font-family: inherit;
}
/* В одну строку поле ведёт себя как обычная строка ввода: текст не
   переносится и не прячется под нижний край, а едет вбок за курсором. */
.toolbar textarea[rows="1"] { resize: none; overflow: hidden; white-space: pre; }
/* В глубоком режиме описание занимает всю строку, а под ним — срок и кнопки */
#cardSearch.deep .toolbar textarea { flex: 1 0 100%; }
#cardSearch.deep .toolbar { align-items: flex-end; }
#cardSearch.deep #deepLimitBox { margin-right: auto; }
.deep-limit { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12.5px; }
.deep-limit select { width: auto; }

/* Вариации одного объявления */
.variants {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.variants-label { font-size: 13px; font-weight: 550; color: var(--muted); }
.variant-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.variant-chip {
  padding: 7px 13px; font-size: 13.5px; font-weight: 550;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px;
}
.variant-chip:hover { color: var(--text); border-color: var(--accent); }
.variant-chip.on { color: var(--text); background: var(--panel); border-color: var(--accent); }
/* Пустая вариация не отправится — видно заранее, а не в журнале */
.variant-chip.blank { border-style: dashed; opacity: .7; }
/* Выключенная: текст цел, но в группы не уходит */
.variant-chip.muted-off { opacity: .45; text-decoration: line-through; }
.variant-chip.muted-off.on { opacity: .7; }
#btnVariantOff.on { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Строка находки: слева описание, справа действия. Метки — под названием,
   иначе длинная «только чтение» отжимает имя группы до нуля. */
.search-row { flex-wrap: wrap; }
.search-row .dialog-main { flex: 1 1 260px; }
.search-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.search-tags:empty { display: none; }
.search-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

/* Значки в строке находки: перейти и скрыть */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
  font-size: 16px; line-height: 1; text-decoration: none;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.icon-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-solid);
  border-color: var(--accent-solid);
}
.icon-btn:active:not(:disabled) {
  background: var(--accent-solid-hover);
  border-color: var(--accent-solid-hover);
}
.icon-btn.danger:hover:not(:disabled) {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}
.icon-btn.danger:active:not(:disabled) {
  background: color-mix(in srgb, var(--err) 82%, var(--panel));
  border-color: var(--err);
}
.icon-btn .icon-duplicate {
  width: 17px; height: 17px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn.on { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Скрытая находка: видно, что с ней сделали, но она уже не мешает.
   Строку не убираем сразу — иначе список прыгает под курсором, а промахнувшись,
   вернуть уже нечего. */
.search-row.off { opacity: .42; }
.search-row.off:hover { opacity: .62; }
.search-row.off .icon-btn { opacity: 1; }

/* Прерванный поиск, который можно продолжить */
.deep-saved {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.deep-saved-main { flex: 1 1 320px; min-width: 0; }
.deep-saved-main b { display: block; margin-bottom: 3px; }
.deep-saved .row-gap { flex: 0 0 auto; margin-left: auto; }

/* Глубокий поиск: что происходит прямо сейчас */
.deep-run {
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
}
.deep-head { display: flex; align-items: center; gap: 9px; }
.deep-stage { font-size: 13px; font-weight: 550; flex: 1; min-width: 0; }
.deep-head .muted { font-size: 12.5px; flex: 0 0 auto; }
.deep-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--accent); animation: deep-pulse 1.4s ease-in-out infinite;
}
.deep-run.done .deep-dot { background: var(--ok); animation: none; }
.deep-run.warn .deep-dot { background: var(--warn); animation: none; }
@keyframes deep-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.deep-bar {
  height: 4px; margin: 10px 0 9px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}
.deep-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s linear; }
.deep-run.done .deep-bar i { background: var(--ok); }
.deep-now {
  font-size: 12.5px; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.deep-now:empty { display: none; }
.deep-stats { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* Очередь вступления: не прячет реальные паузы Telegram за крутилкой. */
.join-run {
  margin-top: 14px; padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.join-run-head { display: flex; align-items: flex-start; gap: 12px; }
.join-run-head > div { min-width: 0; flex: 1; }
.join-run-head b { display: block; font-size: 14px; }
.join-run-head .muted { display: block; margin-top: 3px; font-size: 12.5px; }
.join-bar { height: 4px; margin: 11px 0; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); }
.join-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.join-accounts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.join-account {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 12px; background: var(--panel);
}
.join-account b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.join-account.waiting { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.join-account.joining { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); color: var(--text); }
.join-account.success { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.join-rows { display: grid; gap: 6px; }
.join-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12.5px;
}
.join-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }
.join-row small { display: block; margin-top: 2px; color: var(--muted); }
.join-row-state { white-space: nowrap; color: var(--muted); }
.join-row.success .join-row-state { color: var(--ok); }
.join-row.waiting .join-row-state { color: var(--warn); }
.join-row.requested .join-row-state { color: var(--warn); }
.join-row.failed .join-row-state, .join-row.stopped .join-row-state { color: var(--danger); }
@media (max-width: 640px) {
  .join-run-head { flex-direction: column; }
  .join-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ===== Центр групп ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.groups-legacy { display: none; }
.groups-legacy.is-active { display: block; }
.groups-library-view { display: block; }
.groups-search-field { display: block; min-width: 0; }
.wide { width: 100%; }
.groups-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 0 0 16px;
}
.groups-page-head > div { min-width: 0; }
.groups-page-head h1 { margin: 7px 0 7px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.groups-page-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.page-eyebrow {
  display: block; color: var(--accent); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.groups-head-action { flex: 0 0 auto; }
.groups-subnav {
  display: grid; grid-template-columns: repeat(4, max-content); gap: 4px; width: fit-content;
  margin-bottom: 18px; padding: 4px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--panel);
}
.groups-subnav button {
  min-width: 118px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.groups-subnav button:hover { color: var(--text); background: var(--panel-2); }
.groups-subnav button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 28%, var(--panel-2)); }
.groups-subnav span {
  display: inline-grid; place-items: center; min-width: 20px; min-height: 20px; margin-left: 7px;
  padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 15%, transparent);
  color: currentColor; font-size: 11px;
}
.groups-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 18px;
}
.groups-metrics > div {
  min-width: 0; padding: 15px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--panel);
}
.groups-metrics b { display: block; font-size: 22px; line-height: 1.05; }
.groups-metrics span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.groups-metrics .ok b { color: var(--ok); }
.groups-metrics .warn b { color: var(--warn); }
.groups-metrics .accent b { color: var(--accent); }
.groups-library-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 14px;
  align-items: stretch;
}
.groups-list-panel, .groups-action-panel {
  min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel);
}
.groups-list-panel { min-height: 680px; padding: 16px; }
.groups-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.groups-panel-actions { display: flex; align-items: center; gap: 8px; }
.groups-panel-actions .icon-btn { flex: 0 0 auto; }
#btnGroupsHidden.active { border-color: var(--accent); color: var(--accent); }
.groups-panel-head h2, .groups-action-panel h2 { margin: 0; font-size: 17px; }
.groups-panel-head p, .groups-action-panel > p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.groups-library-toolbar {
  display: grid; grid-template-columns: minmax(210px, 1fr) 154px 148px 142px; gap: 8px;
  margin-top: 16px;
}
.groups-library-toolbar input, .groups-library-toolbar select { width: 100%; min-width: 0; }
.groups-search-field { position: relative; display: block; }
.groups-search-field > svg {
  position: absolute; z-index: 1; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.groups-search-field > input { padding-left: 40px; }
.groups-library-toolbar .picker-btn { min-height: 44px; padding: 9px 12px; gap: 8px; font-size: 13px; font-weight: 600; }
.groups-library-toolbar .picker-value { flex: 1 1 auto; }
.groups-filter-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }
.groups-filter-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.groups-list-summary {
  display: flex; justify-content: space-between; gap: 16px; margin: 13px 2px 8px;
  color: var(--muted); font-size: 12px;
}
.groups-hub-list { display: grid; gap: 7px; max-height: 548px; overflow-y: auto; padding-right: 4px; }
.groups-hub-list .empty { display: grid; gap: 4px; min-height: 220px; place-content: center; text-align: center; }
.groups-hub-list .empty span { color: var(--muted); }
.groups-hub-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 28px; align-items: center; gap: 12px;
  min-height: 73px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.groups-hub-row:hover { border-color: var(--border); background: color-mix(in srgb, var(--panel-2) 86%, var(--accent)); }
.groups-hub-row.selected {
  border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
}
.groups-hub-row.in-selected-folder:not(.selected) {
  background: color-mix(in srgb, var(--ok) 6%, var(--panel-2));
  border-color: color-mix(in srgb, var(--ok) 24%, var(--border));
}
.groups-hub-row.in-selected-folder:not(.selected):hover {
  background: color-mix(in srgb, var(--ok) 10%, var(--panel-2));
}
.groups-hub-row-copy, .groups-hub-row-copy > span, .groups-hub-row-copy > small { display: block; min-width: 0; }
.groups-hub-row-heading { display: flex !important; align-items: center; gap: 7px; flex-wrap: wrap; }
.groups-hub-row-heading b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groups-hub-row-heading i {
  padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--muted); font-size: 10px; font-style: normal;
}
.groups-hub-row-heading i.danger { color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--panel)); }
.groups-hub-row-heading i.in-selected-folder-badge {
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel));
}
.groups-hub-row-heading .lang-chip { min-height: 22px; padding: 2px 8px; border-radius: 6px; }
.groups-hub-row-copy small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.groups-hub-username { color: var(--muted); text-decoration: none; }
.groups-hub-username:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.groups-hub-row-state { display: none; }
.groups-hub-row-state span {
  padding: 3px 7px; border-radius: 6px; background: var(--panel); color: var(--muted);
  font-size: 10.5px; white-space: nowrap;
}
.groups-hub-row-state span.ok { color: var(--ok); }
.groups-hub-row-state span.warn { color: var(--warn); }
.groups-hub-row-state span.accent { color: var(--accent); }
.groups-hub-row-remove {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); opacity: .7; cursor: pointer;
}
.groups-hub-row-remove:hover { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); opacity: 1; }
.groups-hub-row-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.groups-action-panel {
  display: flex; flex-direction: column; min-height: 682px; padding: 16px;
  border-color: color-mix(in srgb, var(--border) 82%, var(--muted)); border-radius: 10px; background: var(--panel);
}
.groups-action-panel > .page-eyebrow { margin-bottom: 8px; color: var(--accent); font-size: 10px; line-height: 1; }
.groups-action-panel h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.groups-action-panel > p { max-width: 265px; margin-top: 6px; font-size: 12px; line-height: 1.45; }
.groups-action-section { display: grid; gap: 9px; margin-top: 18px; padding-top: 0; border-top: 0; }
.groups-action-section label {
  color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase;
}
.groups-action-section select, .groups-action-section button, .groups-action-stack button { width: 100%; }
.groups-destination-picker { position: relative; }
.groups-destination-trigger {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--border) 65%, var(--muted)); border-radius: 8px;
  background: var(--panel-2); color: var(--text); text-align: left;
}
.groups-destination-trigger:hover, .groups-destination-trigger[aria-expanded="true"] { border-color: var(--border); background: color-mix(in srgb, var(--panel-2) 88%, var(--accent)); }
.groups-destination-trigger > span { min-width: 0; }
.groups-destination-trigger b, .groups-destination-trigger small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groups-destination-trigger b { font-size: 13px; font-weight: 600; }
.groups-destination-trigger small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.groups-destination-icon, .groups-destination-chevron {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.groups-destination-icon { color: var(--accent); }
.groups-destination-chevron { color: var(--muted); }
.groups-destination-popover {
  position: absolute; z-index: 50; top: calc(100% + 10px); left: 0; right: 0; display: grid; gap: 10px;
  width: 100%; box-sizing: border-box;
  max-height: 390px; overflow: hidden; padding: 12px; border: 1px solid color-mix(in srgb, var(--border) 65%, var(--muted)); border-radius: var(--r-md);
  background: var(--panel); box-shadow: 0 20px 48px rgb(0 0 0 / 48%);
}
.groups-destination-popover.up { top: auto; bottom: calc(100% + 10px); }
.groups-destination-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.groups-destination-popover-head span { display: grid; gap: 3px; min-width: 0; }
.groups-destination-popover-head b { font-size: 14px; line-height: 1.25; }
.groups-destination-popover-head small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.groups-destination-popover-head button {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 7px;
  background: var(--panel-2); color: var(--muted);
}
.groups-destination-popover-head button:hover { color: var(--text); background: color-mix(in srgb, var(--panel-2) 70%, var(--accent)); }
.groups-destination-popover-head button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.groups-destination-search-field { position: relative; display: block; }
.groups-destination-search-field svg {
  position: absolute; z-index: 2; top: 50%; left: 13px; width: 16px; height: 16px; transform: translateY(-50%);
  pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.groups-destination-search-field input { width: 100%; min-height: 40px; padding: 9px 11px 9px 44px !important; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); }
.groups-destination-search-field input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.groups-destination-options { display: grid; gap: 6px; min-height: 0; max-height: 238px; overflow-y: auto; padding-right: 2px; }
.groups-destination-option {
  display: grid; grid-template-columns: 20px 20px minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 52px; padding: 8px 9px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); text-align: left;
}
.groups-destination-option:hover { border-color: transparent; background: color-mix(in srgb, var(--panel-2) 86%, var(--accent)); }
.groups-destination-option.active { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); }
.groups-destination-option > input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.groups-destination-option-icon { display: grid; place-items: center; color: var(--accent); }
.groups-destination-option-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.groups-destination-option b, .groups-destination-option small { display: block; }
.groups-destination-option b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.groups-destination-option small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
#btnGroupsAddFolder, #btnSearchAddMirror {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 9px 12px;
  font-size: 13px; font-weight: 650;
}
#btnGroupsAddFolder svg, #btnSearchAddMirror svg, .groups-delete-action svg {
  width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.groups-action-stack { display: grid; gap: 8px; margin-top: 4px; }
.groups-selection-state {
  display: grid; gap: 13px; margin-top: 14px; padding: 15px 0 0;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent;
}
.groups-selection-state > b {
  margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 650;
  letter-spacing: .045em; text-transform: uppercase;
}
.groups-selection-state > span {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12px;
}
.groups-selection-state strong { color: var(--text); font-size: 12px; }
.groups-selection-state strong.ok { color: var(--ok); }
.groups-selection-state strong.warn { color: var(--warn); }
.groups-action-notice {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; margin-top: 16px; padding: 12px;
  border-radius: 7px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--muted);
  font-size: 10.5px; line-height: 1.45;
}
.groups-action-notice svg {
  width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.groups-delete-action {
  display: flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 12px 0 0;
  color: var(--err); font-size: 12px; font-weight: 650; text-decoration: none;
}
.groups-delete-action:hover { color: color-mix(in srgb, var(--err) 76%, var(--text)); opacity: 1; }
.link-btn.danger.groups-delete-action { color: var(--err); }
.link-btn.danger.groups-delete-action:disabled { color: var(--muted); opacity: .55; }
.groups-search-view { margin: 0; }
#tab-joining .joining-dashboard { margin-top: 0; }

.groups-topic-filter { position: relative; min-width: 0; }
.groups-topic-trigger {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); text-align: left; font-size: 13px;
}
.groups-topic-trigger:hover, .groups-topic-trigger.active { border-color: var(--accent); }
.groups-topic-trigger > svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--accent); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.groups-topic-trigger span { font-weight: 600; }
.groups-topic-trigger i { color: var(--text); font-size: 13px; font-style: normal; }
.groups-topic-trigger b { margin-left: auto; color: var(--muted); font-size: 13px; }
.groups-topic-popover {
  position: absolute; z-index: 48; top: calc(100% + 12px); right: 0; width: 330px; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--muted) 42%, var(--border)); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel) 86%, var(--panel-2)); box-shadow: 0 20px 48px rgb(0 0 0 / 46%);
  font-size: 13px;
}
.groups-topic-popover.up { top: auto; bottom: calc(100% + 12px); }
.groups-topic-popover-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 36px; margin-bottom: 14px; }
.groups-topic-popover-head > span { display: grid; gap: 3px; }
.groups-topic-popover-head b { font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.groups-topic-popover-head small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.25; }
.groups-topic-popover-head button, .groups-topic-edit, .groups-topic-remove {
  display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0;
  border: 0; border-radius: 7px; background: color-mix(in srgb, var(--bg) 52%, var(--panel-2)); color: var(--muted); font-size: 17px;
}
.groups-topic-edit svg, .groups-topic-remove svg, .groups-topic-popover-head button svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.groups-topic-popover-head button:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 10%, var(--panel-2)); }
.groups-topic-search-field { position: relative; display: block; margin-bottom: 10px; }
.groups-topic-search-field > svg {
  position: absolute; z-index: 2; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.groups-topic-search-field input[type="search"] {
  width: 100%; height: 42px; min-height: 42px; padding: 9px 12px 9px 44px !important; text-indent: 0;
  border-radius: 9px; background: color-mix(in srgb, var(--panel-2) 74%, var(--panel)); font-size: 13px;
}
.groups-topic-create {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  width: 100%; min-height: 40px; margin-bottom: 14px; padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
  color: var(--accent); font-size: 13px; font-weight: 500;
}
.groups-topic-create svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.groups-topic-create:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel-2)); }
.groups-topic-create-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 9px; }
.groups-topic-create-form input { min-width: 0; }
.groups-topic-options { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding-right: 5px; scrollbar-gutter: stable; scrollbar-width: thin; }
.groups-topic-option {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 30px 30px; align-items: center; gap: 8px;
  min-height: 46px; padding: 8px; border-radius: 7px; background: transparent; cursor: pointer;
}
.groups-topic-option:hover { background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.groups-topic-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.groups-topic-option span { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.groups-topic-option small { min-width: 20px; color: var(--muted); font-size: 12px; text-align: right; }
.groups-topic-edit:hover { color: var(--text); }
.groups-topic-remove { color: var(--err); font-size: 14px; }
.groups-topic-remove:hover { background: color-mix(in srgb, var(--err) 12%, var(--panel-2)); }
.groups-topic-option.is-editing { grid-template-columns: minmax(0, 1fr); }
.groups-topic-option.is-editing > :not(.groups-topic-inline-input) { display: none; }
.groups-topic-inline-input { width: 100%; min-height: 32px; }
.groups-topic-popover-foot { display: flex; align-items: center; justify-content: flex-start; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.groups-topic-popover-foot .link-btn { min-height: 30px; padding: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.groups-topic-popover-foot .link-btn:hover { color: var(--accent); }

#navGroupSearch { display: none; }
body[data-active-tab="groups"] .content,
body[data-active-tab="joining"] .content { max-width: 1260px; }

@media (max-width: 1050px) {
  .groups-library-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  .groups-library-toolbar { grid-template-columns: minmax(180px, 1fr) repeat(2, 145px); }
  .groups-library-toolbar > :last-child { grid-column: 2 / -1; }
}
@media (max-width: 820px) {
  .groups-library-layout { grid-template-columns: 1fr; }
  .groups-action-panel { min-height: 0; }
  .groups-delete-action { margin-top: 12px; }
  .groups-hub-row-remove { grid-column: 2; justify-self: end; }
}
@media (max-width: 620px) {
  .groups-page-head { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 0; }
  .groups-page-head h1 { font-size: 22px; }
  .groups-head-action { width: 100%; }
  .groups-subnav { display: flex; overflow-x: auto; }
  .groups-subnav button { flex: 0 0 auto; min-width: 150px; }
  .groups-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groups-metrics > div { padding: 13px; }
  .groups-library-toolbar { grid-template-columns: 1fr; }
  .groups-library-toolbar > :last-child { grid-column: auto; }
  .groups-topic-popover { position: fixed; inset: auto 12px calc(86px + env(safe-area-inset-bottom)); width: auto; max-height: 68dvh; overflow-y: auto; }
  .groups-panel-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .groups-panel-actions { display: grid; grid-template-columns: 1fr auto; }
  .groups-panel-actions #btnGroupsSelectVisible { grid-column: 1 / -1; width: 100%; }
  .groups-hub-list { max-height: none; overflow: visible; }
  .groups-hub-row { grid-template-columns: 20px minmax(0, 1fr); }
  .groups-hub-row-state { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .groups-hub-row-copy small { white-space: normal; }
}

/* Отдельный журнал вступлений: одна строка отвечает на три вопроса — куда,
   каким аккаунтом и почему действие ещё не завершено. */
.joining-dashboard {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "summary summary"
    "head settings"
    "toolbar settings"
    "list settings";
  gap: 0 14px; min-height: 610px; padding: 0;
  border: 0; border-radius: 0; background: transparent;
}
.joining-dashboard > .card-head {
  grid-area: head; margin: 14px 0 0; padding: 16px 16px 10px;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0; background: var(--panel);
}
.joining-dashboard > .card-head h2 { font-size: 16px; }
.joining-dashboard > .card-head p { max-width: 640px; margin-top: 4px; line-height: 1.4; }
.joining-dashboard > .card-head button { min-height: 38px; }
.joining-summary {
  grid-area: summary; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.joining-stat {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2);
}
.joining-stat b { display: block; color: var(--text); font-size: 22px; line-height: 1; }
.joining-stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.joining-stat.active b { color: var(--accent); }
.joining-stat.requested b { color: var(--warn); }
.joining-stat.joined b { color: var(--ok); }
.joining-stat.failed b { color: var(--danger); }
.joining-skeleton-card {
  min-height: 70px; border-color: var(--border);
  background: linear-gradient(100deg, var(--panel-2) 20%,
    color-mix(in srgb, var(--accent) 12%, var(--panel-2)) 42%, var(--panel-2) 64%);
  background-size: 240% 100%; animation: joining-shimmer 1.15s ease-in-out infinite;
}
.joining-sync-settings {
  grid-area: settings; position: relative; display: flex; flex-direction: column;
  align-items: stretch; gap: 14px; min-width: 0; margin-top: 14px; padding: 52px 16px 16px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel);
}
.joining-sync-settings::before {
  content: "НАСТРОЙКИ ОЧЕРЕДИ"; position: absolute; top: 18px; left: 16px;
  color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.joining-sync-copy { align-self: center; min-width: 0; }
.joining-sync-copy b, .joining-sync-copy span { display: block; }
.joining-sync-copy b { font-size: 17px; }
.joining-sync-copy span { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.joining-spread-field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.joining-toolbar {
  grid-area: toolbar; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, .75fr) minmax(180px, 1fr) auto;
  align-items: end; gap: 8px; padding: 0 16px 12px;
  border-right: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--panel);
}
.joining-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.joining-toolbar select, .joining-toolbar input { width: 100%; }
.joining-interval { display: flex; align-items: center; gap: 8px; }
.joining-interval input { min-width: 0; }
.joining-interval-help { position: relative; }
.joining-delay-tooltip {
  position: absolute; z-index: 60; right: 0; bottom: calc(100% + 9px);
  width: min(310px, calc(100vw - 40px)); padding: 10px 12px;
  border: 1px solid var(--border-control, var(--border)); border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, black); color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  font-size: 12px; line-height: 1.45; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  pointer-events: none; transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.joining-delay-tooltip::after {
  content: ""; position: absolute; right: 28px; top: 100%;
  border: 6px solid transparent; border-top-color: var(--border-control, var(--border));
}
.joining-interval-help:hover .joining-delay-tooltip,
.joining-interval-help:focus-within .joining-delay-tooltip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.joining-account-filter { position: relative; min-width: 0; }
.joining-field-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.joining-account-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--border-control, var(--border)); border-radius: 8px;
  background: var(--panel-2); color: var(--text);
}
.joining-account-trigger > span { min-width: 0; }
.joining-account-trigger b, .joining-account-trigger small { display: block; }
.joining-account-trigger b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joining-account-trigger small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.joining-account-trigger i { color: var(--muted); font-style: normal; font-size: 18px; }
.joining-account-popover {
  position: absolute; z-index: 40; top: calc(100% + 7px); left: 0;
  width: min(430px, calc(100vw - 32px)); padding: 10px;
  border: 1px solid var(--border-control, var(--border)); border-radius: 10px;
  background: var(--panel); box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
}
.joining-account-popover input { width: 100%; margin-bottom: 8px; }
.joining-account-options { display: grid; gap: 4px; max-height: 330px; overflow-y: auto; }
.joining-account-option {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center;
  gap: 10px; width: 100%; padding: 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); text-align: left;
}
.joining-account-option:hover, .joining-account-option.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}
.joining-account-option b, .joining-account-option small { display: block; }
.joining-account-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joining-account-option small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.joining-account-avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
  color: var(--accent); font-size: 12px; font-weight: 700;
}
.joining-list {
  grid-area: list; display: grid; align-content: start; gap: 7px; min-height: 300px; max-height: 430px; overflow-y: auto;
  padding: 0 16px 12px; border-right: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--panel);
}
.joining-list > .empty { min-height: 58px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: color-mix(in srgb, var(--panel-2) 72%, transparent); text-align: center; }
.joining-loader {
  padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.joining-loader-head { display: flex; align-items: center; gap: 13px; }
.joining-loader-head > span:last-child { min-width: 0; }
.joining-loader-head b, .joining-loader-head small { display: block; }
.joining-loader-head b { color: var(--text); font-size: 14px; }
.joining-loader-head small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.joining-loader-spinner {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-top-color: var(--accent); animation: joining-spin .75s linear infinite;
}
.joining-loader-bar {
  height: 4px; margin: 16px 0 12px; overflow: hidden; border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}
.joining-loader-bar i {
  display: block; width: 38%; height: 100%; border-radius: inherit;
  background: var(--accent); animation: joining-progress 1.25s ease-in-out infinite;
}
.joining-loader-rows { display: grid; gap: 7px; }
.joining-loader-rows i {
  display: block; height: 48px; border-radius: 8px;
  background: linear-gradient(100deg, var(--panel) 20%,
    color-mix(in srgb, var(--accent) 10%, var(--panel)) 42%, var(--panel) 64%);
  background-size: 240% 100%; animation: joining-shimmer 1.15s ease-in-out infinite;
}
.joining-loader-rows i:nth-child(2) { animation-delay: .08s; }
.joining-loader-rows i:nth-child(3) { animation-delay: .16s; }
.joining-loader-rows i:nth-child(4) { animation-delay: .24s; }
.joining-dashboard .head-row button.is-loading { color: var(--accent); }
@keyframes joining-spin { to { transform: rotate(360deg); } }
@keyframes joining-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@keyframes joining-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .joining-skeleton-card, .joining-loader-spinner,
  .joining-loader-bar i, .joining-loader-rows i { animation: none; }
}

/* Независимые расписания: список слева по смыслу, группы — единый выбор. */
.schedule-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.schedule-list-item {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border-control);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}
.schedule-list-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.schedule-list-item.active {
  border-color: transparent;
  background: var(--selection-bg);
  box-shadow: none;
}
.schedule-list-item b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-list-item small { color: var(--muted); white-space: nowrap; }
.schedule-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.schedule-editor-head > div {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-name-field {
  flex: 1;
  max-width: 520px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.schedule-name-field input { min-height: 44px; }
.schedule-folder-toggle.occupied { opacity: .7; }
.schedule-folder-toggle.occupied .schedule-folder-toggle-state { color: var(--warn); }

@media (max-width: 620px) {
  .schedule-create-head,
  .schedule-editor-head { align-items: stretch; flex-direction: column; }
  .schedule-create-head > button,
  .schedule-name-field { width: 100%; max-width: none; }
  .schedule-editor-head > div { justify-content: space-between; }
  .schedule-list { grid-template-columns: 1fr; max-height: 220px; overflow: auto; }
}
.joining-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 14px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2);
}
.joining-item-main { min-width: 0; }
.joining-item-main b, .joining-item-main small { display: block; line-height: 1.5; }
.joining-item-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joining-item-main small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.joining-item-main .joining-item-detail { margin-top: 7px; }
.joining-item-main .joining-item-detail { color: color-mix(in srgb, var(--muted) 88%, var(--text)); }
.joining-item-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.joining-item.active .joining-item-state { color: var(--accent); }
.joining-item.requested .joining-item-state { color: var(--warn); }
.joining-item.joined .joining-item-state { color: var(--ok); }
.joining-item.failed .joining-item-state { color: var(--danger); }

@media (max-width: 850px) {
  .joining-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas: "summary" "head" "toolbar" "list" "settings";
    gap: 0;
  }
  .joining-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .joining-toolbar { grid-template-columns: 1fr 1fr; }
  .joining-sync-settings { min-height: 0; margin-top: 14px; }
}
@media (max-width: 600px) {
  .joining-dashboard { gap: 0; }
  .joining-summary { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .joining-stat { min-width: 132px; }
  .joining-toolbar { grid-template-columns: 1fr; }
  .joining-account-popover { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; }
  .joining-item {
    grid-template-columns: minmax(0, 1fr); gap: 12px;
    min-height: 112px; padding: 17px 15px;
  }
  .joining-item-state { grid-column: 1; white-space: normal; }
}

/* ===== Расписание ===== */
.range { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.range input { width: 92px; flex: 0 0 92px; }

.plan { display: flex; flex-direction: column; gap: 10px; }
.plan-row {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; background: var(--panel-2);
}
.plan-row.warn {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-head b { font-weight: 650; }
.plan-langs { display: flex; gap: 5px; margin-left: auto; }
.plan-groups { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.plan-group { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.plan-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
a.plan-group-name { cursor: pointer; text-decoration: none; }
a.plan-group-name:hover, a.plan-group-name:focus-visible { color: var(--accent); text-decoration: underline; }
.plan-when { margin-left: auto; flex: 0 0 auto; }
.plan-when.ready { color: var(--ok); }
.plan-when.warn { color: var(--warn); }

/* ===== Редактор сообщений ===== */
.msg-split { display: grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: start; }
.msg-side, .msg-editor { min-width: 0; }
.msg-side {
  max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
}
.msg-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.msg-row:last-child { border-bottom: 0; }
.msg-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.msg-row.active { background: var(--selection-bg); }
.msg-row.child { padding-left: 28px; opacity: .82; }
.msg-row .msg-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row .msg-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }

/* Поле одной спокойной высоты: раньше пустое было 160px, а с текстом —
   полэкрана (50vh), и редактор прыгал при каждом переключении. Теперь
   стабильные 260px, растёт под длинный текст до 60vh, дальше прокрутка. */
.msg-editor #edText {
  min-height: 260px;
  max-height: 60vh;
  resize: vertical;
  overflow-y: auto;
}
.msg-editor .photo { width: 110px; height: 110px; }
.msg-editor .photo button { opacity: .85; width: 22px; height: 22px; font-size: 12px; }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.msg-actions .sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
.msg-actions select { padding: 6px 9px; font-size: 12.5px; }
#edHint.err { color: var(--err); }
.card > .details:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.details summary { font-weight: 550; }

.result-row .mark.skip { color: var(--muted); }
.result-row .folder { color: var(--muted); font-size: 12.5px; }

/* ===== Своё окно вопроса вместо системного confirm ===== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
  animation: fade .12s ease;
}
.modal-card {
  width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 26px 28px 20px;
  animation: pop .14s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-text { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.modal-text b { font-weight: 650; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
/* ===== Тост ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 18px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 50; max-width: 90vw; font-size: 13.5px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: color-mix(in srgb, var(--err) 45%, transparent); }

/* ===== Больше воздуха =====
   Крупнее текст, просторнее строки, списки не жмут глаз. Собрано в одном
   месте, чтобы дальше правились только эти числа. */
body { font-size: 14px; line-height: 1.5; }

.content { padding: 28px 30px 48px; max-width: 1260px; margin: 0 auto; }
.card { padding: 30px 32px; margin-bottom: 26px; border-radius: 16px; }
.card-head { margin-bottom: 24px; }
.card-head h2 { font-size: 19px; }
.card-head h3 { font-size: 16px; }
.card-head p, .muted { font-size: 14px; }
.card-foot { margin-top: 26px; padding-top: 22px; }
.hint { font-size: 13.5px; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea, select {
  padding: 12px 14px; font-size: 15px; border-radius: 10px;
}
button { padding: 11px 18px; border-radius: 10px; }
.small { padding: 8px 14px; font-size: 13.5px; }
.toolbar { gap: 12px; margin-bottom: 22px; }
/* Между колонками папки — широкий проход: 22px читались как слипшиеся. */
.grid-2 { gap: 0 36px; }
.field { margin-bottom: 18px; }
.field > span { font-size: 13.5px; margin-bottom: 8px; }
.nav-item { padding: 10px 12px; font-size: 14px; }

/* Списки: строки-карточки с промежутками вместо сплошной таблицы */
.dialog-list, .folder-list, .msg-side {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 12px;
}
.dialog-row, .folder-row, .msg-row, .search-row {
  border: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 10px; background: var(--panel);
  padding: 14px 16px; gap: 14px;
}
/* Панель без заливки — строки на цвете карточки пропадали. */
.pane .dialog-row, .pane .msg-row { background: var(--panel-2); }
.folder-row { gap: 4px; }
.msg-row { padding: 13px 16px; gap: 12px; }
.msg-row.child { margin-left: 22px; }
.dialog-row input[type="checkbox"], .search-row input[type="checkbox"],
.msg-row input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 20px;
}
.dialog-title, .msg-row .msg-text, .folder-name { font-size: 15px; }
.dialog-sub, .folder-meta, .msg-row .msg-meta { font-size: 13px; margin-top: 3px; }
.tag, .lang-chip { font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.empty { padding: 34px; font-size: 14px; }

/* Высота списков: длинные списки скроллятся, короткие занимают своё */
.dialog-list { max-height: 540px; }
.pane .dialog-list { max-height: 480px; }
#folderMsgList { max-height: 540px; }
.folder-list { max-height: 560px; }
.msg-side { max-height: 68vh; }

.pane { margin-bottom: 26px; }
.pane-head { margin-bottom: 14px; }
.pane-head h3 { font-size: 15px; }

.plan-row { padding: 16px 18px; border-radius: 12px; }
.plan-group { font-size: 13.5px; }
.plan { gap: 12px; }

.msg-editor .photo { width: 128px; height: 128px; }
.msg-actions { gap: 9px; margin-top: 16px; }
.msg-actions select { padding: 8px 11px; font-size: 13.5px; }
.scan-item { padding: 16px 18px; border-radius: 12px; margin-bottom: 12px; gap: 16px; }
.scan-preview { font-size: 13.5px; padding: 12px 14px; max-height: 150px; }
.notice { padding: 14px 16px; font-size: 14px; border-radius: 12px; }
.toast { padding: 14px 22px; font-size: 14.5px; }

/* Две панели папки рядом только на широком экране: иначе названия групп
   обрезаются на полуслове, а читать их важнее, чем видеть всё разом. */
@media (max-width: 1500px) {
  #folderBody .grid-2 { grid-template-columns: 1fr; }
}

/* Пара «от — до» не должна переноситься на другую строку посреди тире */
@media (max-width: 1100px) {
  #tab-schedule .grid-2 { grid-template-columns: 1fr; }
  /* Две колонки папки («группы» и «сообщения») на среднем экране жмутся —
     раскладываем друг под другом, каждая получает полную ширину. */
  #tab-groups .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Список папок уезжает наверх, рабочая область — под ним. */
  .split { grid-template-columns: 1fr; gap: 16px; }
  .split-side { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
  .folder-list { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ===== Свои элементы управления вместо системных =====
   Браузерные стрелки у чисел, галочки и треугольник у списка выглядят
   инородно — рисуем своё. */

/* Числа: убираем системные стрелки, рядом свои кнопки (их ставит app.js) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.range { gap: 10px; font-size: 13.5px; flex-wrap: wrap; }

/* Пояснение под полем: что эти числа значат на самом деле */
.under {
  display: block; margin-top: 9px;
  font-style: normal; font-size: 13px; color: var(--muted);
}
.under.warn { color: var(--warn); }

/* Галочки */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--panel-2); cursor: pointer;
  transition: background .12s, border-color .12s;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  /* Галку центруем от середины — тогда она ровная при любом размере коробки */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 9px; margin: -6px 0 0 -3px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }

/* Переключатели остаются переключателями */
/* Выключенный переключатель на дорожке --border давал 1.25:1 к панели —
   белый кружок висел словно сам по себе. Видимая обводка держит 3:1. */
/* В шапке панели — тот же переключатель, только мельче. */
.pane-head .switch input[type="checkbox"] { --h: 20px; }

/* Выпадающие списки и поиск — со своими значками */
select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
input[type="search"] {
  padding-left: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>");
  background-repeat: no-repeat; background-position: left 13px center; background-size: 16px;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Строка перевода в редакторе: язык → язык, чем, кнопка */
.msg-editor .toolbar { flex-wrap: wrap; align-items: center; }
.msg-editor .toolbar select { flex: 0 0 auto; padding: 8px 34px 8px 11px; font-size: 13.5px;
  background-position: right 10px center; }
.msg-editor .toolbar .arrow { flex: 0 0 auto; font-size: 15px; }
.msg-editor .toolbar #edCount { margin-right: 10px; }

/* ===== Вкладки языков внутри сообщения ===== */
.lang-tabs { display: flex; flex-wrap: wrap; margin-bottom: 14px; max-width: 100%; }
.lang-tabs .seg-btn { position: relative; padding-left: 24px; }
/* Точка слева: закрашена — текст есть, пустая — перевода нет. */
.lang-tabs .seg-btn::before {
  content: ""; position: absolute; left: 10px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}
.lang-tabs .seg-btn.empty::before { background: transparent; border: 1px solid var(--muted); }
.lang-tabs .seg-btn.empty { color: var(--muted); }
.lang-tabs .seg-btn.empty.active { color: var(--text); }

/* Пустая версия — высота та же, чтобы страница не дёргалась; строка
   «перевода нет» и так видна сразу под полем. */
/* Гид сворачивается в свою же шапку, а не пропадает: кнопка остаётся на
   месте, и пояснение можно вернуть. Раскрытие объясняет результат клика,
   но не двигает другие элементы по отдельности. */
.guide-card { transition: padding .18s ease-out; }
.guide-card.folded { padding-top: 16px; padding-bottom: 16px; }
.guide-card.folded .card-head { margin-bottom: 0; }
.guide-content {
  display: grid; grid-template-rows: 1fr;
  opacity: 1; transform: translateY(0);
  transition: grid-template-rows .22s ease-out, opacity .14s ease-out, transform .22s ease-out;
}
.guide-content-inner { min-height: 0; overflow: hidden; }
.guide-card.folded .guide-content {
  grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition-duration: .14s, .1s, .14s;
}
.guide-card .guide-toggle {
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background .12s;
}
.guide-card .guide-toggle:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .folder-row, .dialog-row, .msg-pick, .lang-chip, .preset {
    transition: background .16s ease-out, border-color .16s ease-out, color .16s ease-out;
  }
  .save-state.ok { animation: feedback-in .18s ease-out both; }
}

@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Строка «перевода нет» под пустым полем */
/* Строка «текста нет» держит своё место всегда: если её то показывать, то
   прятать, первая набранная буква сдвигает вниз фото и панель Клода. Пустую
   не рисуем — остаётся только зарезервированная высота. */
.notice.no-text {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; min-height: 46px;
}
.notice.no-text.blank { background: none; border-color: transparent; }
.notice.no-text select { flex: 0 0 auto; padding: 7px 30px 7px 10px; font-size: 13.5px; }
.notice.no-text button { flex: 0 0 auto; }

/* ===== Список сообщений: строка на сообщение ===== */
.msg-row .msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msg-row .msg-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-langs { display: flex; gap: 6px; flex-wrap: wrap; }
/* Клод работает над этим сообщением — заметно, но не мешает выбрать другое */
.msg-row.working { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.msg-row.working .tag {
  border-color: var(--accent); color: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
.lang-chip.off {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  opacity: .7;
}

/* ===== Гид «с чего начать» — видно, пока нет ни одного сообщения ===== */
.guide-card {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent),
                    color-mix(in srgb, var(--accent) 7%, transparent)),
    var(--panel);
}

.guide-card h2 { color: var(--accent); }

.guide-steps {
  list-style: none;
  counter-reset: гид;
  margin: 18px 0 4px;
  padding: 0;
  display: block;
}

.guide-steps li {
  counter-increment: гид;
  position: relative;
  padding: 4px 0 14px 44px;
  line-height: 1.6;
  color: var(--muted);
}

.guide-steps li b { color: var(--text); font-weight: 650; }

.guide-steps li::before {
  content: counter(гид);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Соединительная линия между кружками — читается как последовательность. */
.guide-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ===== Что обязано быть в каждом сообщении ===== */
.must-have textarea { min-height: 84px; }
.must-have .card-foot { margin-top: 12px; padding-top: 12px; }
.must-have .card-foot .muted { font-size: 13px; }

/* ===== Показ «вот это место» (ui/spotlight.js) =====
   Правило программы: если интерфейс что-то демонстрирует — экран гаснет
   везде, кроме нужного места, на пару секунд. Слой ниже модалок (60), но
   выше всего остального; цель поднимается над ним и остаётся кликабельной. */
.spot-dim { position: fixed; inset: 0; z-index: 55; }
.spot-dim > i {
  position: fixed; display: block; margin: 0;
  background: rgba(3, 8, 16, .62);
  animation: spot-fade .18s ease-out;
}
.spot-on {
  position: relative; z-index: 57; border-radius: var(--r-md);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
@keyframes spot-fade { from { opacity: 0; } to { opacity: 1; } }
/* Кому движение мешает — гасим без наплыва, обводка остаётся. */
@media (prefers-reduced-motion: reduce) {
  .spot-dim > i { animation: none; }
}

/* Поле ввода отделено от списка требований: это форма, а не ещё одна строка. */
.rule-add { display: flex; gap: 10px; align-items: center; }
.rule-add input { flex: 1; min-width: 200px; }
.rule-add .primary { flex: 0 0 auto; }

.rule-ready {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 18px;
}
.rule-ready .muted { font-size: var(--fs-sm); }

/* Форматирование — не требование к Клоду, а вид готового сообщения. Отделяем
   чертой, иначе галка читается как ещё одно правило в списке. */
.markup-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.markup-row .switch { padding: 0; }
/* 40px переключателя + 10px зазора — подсказка встаёт под подписью, не под галкой */
.markup-row .hint { margin-top: 6px; margin-left: 50px; max-width: 640px; }

/* ===== Массовый перевод ===== */
.bulk-langs {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel-2); padding: 22px 24px; margin: 8px 0 26px;
}
.bulk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bulk-head b { font-weight: 650; font-size: 14.5px; }
.bulk-head .muted { font-size: 13px; }
.lang-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; }
.lang-picks .lang-pick {
  display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; gap: 10px;
  min-height: 68px; padding: 12px 13px; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.lang-picks .lang-pick:hover { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); transform: translateY(-1px); }
.lang-picks .lang-pick.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.lang-picks .lang-pick.base { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.lang-picks .lang-pick input { width: 19px; height: 19px; margin-top: 2px; cursor: pointer; }
.lang-picks .lang-pick input:disabled { cursor: default; }
.lang-pick-copy { display: grid; gap: 4px; min-width: 0; }
.lang-pick-name { color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.25; }
.lang-pick-status { color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.lang-picks .lang-pick.base .lang-pick-status,
.lang-picks .lang-pick .done { color: var(--ok); }
.bulk-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.bulk-row .muted { font-size: 13.5px; }
.bulk-langs .hint { margin-top: 14px; }
.bulk-row .primary { flex: 0 0 auto; min-width: 320px; }
.bulk-run {
  margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.bulk-run[hidden] { display: none; }
.bulk-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.bulk-run-head > div { display: grid; gap: 4px; }
.bulk-run-head b { font-size: 13.5px; }
.bulk-run-head .muted { font-size: 12.5px; }
.bulk-current { display: grid; gap: 6px; margin-top: 12px; }
.bulk-current-row {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px;
  border-radius: 7px; background: var(--panel-2); color: var(--muted); font-size: 12.5px;
}
.bulk-current-row::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Массовые действия нужны не при каждом сообщении. По умолчанию это компактная
   строка, а не ещё одна большая форма над редактором. */
.bulk-langs {
  padding: 0; overflow: hidden; margin: 8px 0 24px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel));
}
.bulk-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 68px; padding: 15px 20px; cursor: pointer; list-style: none;
}
.bulk-summary::-webkit-details-marker { display: none; }
.bulk-summary::marker { content: ""; }
.bulk-summary-copy { display: grid; min-width: 0; gap: 5px; }
.bulk-summary-copy b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.bulk-summary-copy .muted { font-size: 13px; line-height: 1.4; }
.bulk-summary-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bulk-summary-link {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--accent-solid); border-radius: var(--r-sm);
  color: #fff; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  background: var(--accent-solid);
}
.bulk-langs[open] .bulk-summary { border-bottom: 1px solid var(--border); }
.bulk-langs[open] .bulk-summary-link { background: transparent; border-color: var(--border-control); color: var(--muted); }
.bulk-langs[open] .bulk-summary-link { font-size: 0; }
.bulk-langs[open] .bulk-summary-link::after { content: "Свернуть"; font-size: var(--fs-sm); }
.bulk-content { padding: 18px 20px 20px; }
.bulk-select {
  padding: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 82%, var(--panel));
}
/* Три элемента при space-between разводило по краям и по центру: ссылка
   зависала в пустоте посреди строки. Заголовок расталкивает остальных вправо,
   и ссылка со «Сохранено» стоят одной группой. */
.bulk-head { justify-content: flex-start; align-items: center; margin-bottom: 14px; }
.bulk-head > div:first-child { margin-right: auto; }
.bulk-head > div { display: grid; gap: 3px; }
.bulk-head > div .muted { font-size: 12.5px; line-height: 1.45; }
.bulk-step {
  display: inline-flex; width: max-content; padding: 3px 7px; border-radius: 99px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.bulk-head b { margin-top: 3px; font-size: 15px; font-weight: 700; }
.bulk-list-link {
  padding: 6px 2px; border: 0; border-radius: 0; background: transparent; color: var(--accent);
  font-size: 12.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
}
.bulk-list-link:hover { color: var(--accent-hover); background: transparent; }
.bulk-actions { display: grid; gap: 10px; margin-top: 14px; }
.bulk-action {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel);
}
.bulk-action > div { display: grid; gap: 5px; min-width: 0; }
.bulk-action b { font-size: 15px; font-weight: 700; }
.bulk-action .muted { font-size: 12.5px; line-height: 1.45; }
.bulk-translate-action {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), var(--panel));
}
.bulk-translate-action .primary { min-height: 42px; padding-inline: 17px; }
/* Переписать всё — одна строка с кнопкой: прятать единственное действие
   за раскрытием незачем. */
.bulk-rewrite {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 17px;
  border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 76%, var(--panel));
}
.bulk-rewrite-copy { display: grid; gap: 3px; min-width: 0; }
.bulk-rewrite b { font-size: 13px; font-weight: 650; }
.bulk-rewrite .muted { font-size: 12.5px; line-height: 1.35; }

@media (max-width: 760px) {
  .bulk-summary { align-items: flex-start; flex-direction: column; gap: 12px; }
  .bulk-summary-actions { width: 100%; gap: 8px; }
  .bulk-summary-link { display: flex; justify-content: center; width: 100%; }
  .bulk-run-head { flex-direction: column; }
  .bulk-head, .bulk-action, .bulk-rewrite-body { align-items: flex-start; flex-direction: column; }
}

/* ===== Клод под полем текста =====
   Панель открыта всегда: закрытая выпадашка «Помощь с текстом» выглядела
   служебной, и половина людей так и не узнавала, что текст можно не писать
   руками. Две ступени: сверху — написать с нуля по заданию, снизу — правки
   уже написанного. */
.ai-panel {
  margin-top: 16px; padding: 16px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.ai-panel-head { margin-bottom: 12px; }
.ai-panel-head b { font-size: var(--fs-md); font-weight: 650; }

.ai-task { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-task .primary { flex: 0 0 auto; }
.ai-task-why {
  flex: 1; min-width: 240px;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.5;
}

.ai-fix { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ai-fix-label {
  display: block; margin-bottom: 10px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.ai-fix-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Свой список языков ===== */
.lang-setup {
  margin-top: 18px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.lang-setup-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lang-setup-head .muted { font-size: 13px; }
.lang-rows { display: flex; flex-direction: column; gap: 8px; }
.lang-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lang-row .lang-code {
  flex: 0 0 84px; font-size: 13px;
  color: var(--muted); text-align: center;
}
.lang-row input[type="text"] { flex: 1 1 200px; min-width: 160px; }
.lang-row .tag { flex: 0 0 auto; }
.lang-row.base input[type="text"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Добавление языка — отдельная полоса под списком, а не «ещё одна строка»:
   так видно, что это форма, а не язык, который уже заведён. */
.lang-add {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.lang-add-fields { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Код встаёт ровно под колонку кодов в списке выше. */
.lang-add #langNewCode {
  flex: 0 0 84px; width: 84px; padding-left: 0; padding-right: 0;
  text-align: center; text-transform: uppercase; letter-spacing: .06em;
}
.lang-add #langNewName { flex: 1 1 200px; min-width: 160px; width: auto; }
.lang-add #btnLangAdd { flex: 0 0 auto; }
.lang-add #langNewCode.bad { border-color: var(--err); }
.lang-add .muted { display: block; margin-top: 10px; font-size: 13px; }
.lang-add .lang-add-link { margin-top: 6px; }
.lang-add a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lang-add a:hover { opacity: .8; }
/* Итог проверки кода: зелёным — всё сходится, жёлтым — стоит посмотреть,
   красным — так добавить нельзя. */
.lang-hint-ok { color: var(--ok) !important; }
.lang-hint-warn { color: var(--warn) !important; }
.lang-hint-err { color: var(--err) !important; }

/* Коды, найденные по названию языка */
.lang-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lang-suggest .lang-pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 13.5px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
}
.lang-suggest .lang-pick b {
  font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}
.lang-suggest .lang-pick:hover { border-color: var(--accent); }
.lang-suggest .lang-pick:hover b { color: var(--accent); }

/* ===== Строка состояния вместо кнопки «Сохранить» ===== */
.save-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--muted); font-weight: 550;
}
.save-state::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); flex: 0 0 8px;
}
.save-state.ok { color: var(--ok); }
.save-state.saving { color: var(--muted); }
.save-state.saving::before { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.save-state.err { color: var(--err); font-weight: 650; }
.save-state.err::before { background: var(--err); }

/* Кнопка «перевести» прямо в списке сообщений папки */
.dialog-row > button { flex: 0 0 auto; }

/* Блоки, которые меняют текст на лету, держат высоту — иначе страница дёргается */
#bulkNeed, #bulkHint { display: block; min-height: 21px; }
.bulk-row { min-height: 44px; align-items: center; }
.msg-editor .seg { min-height: 44px; }
#edCount { display: inline-block; min-width: 150px; }

/* Кнопка «добавить» стоит над списком сообщений, во всю его ширину */
.msg-column { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Главное действие на пустой вкладке — видно сразу: акцентная заливка и рамка,
   а не бледный пунктир, который сливался с фоном. */
.add-msg {
  width: 100%; padding: 13px 16px; text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: var(--radius);
  font-size: var(--fs-md); font-weight: 600;
}
.add-msg:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
}

/* Кнопка добавления фотографий */
.add-photo {
  width: 128px; height: 128px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 12px; font-size: 13px;
}
.add-photo:hover {
  border-style: solid; border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.add-photo b { font-size: 22px; font-weight: 400; line-height: 1; }

/* Требования к тексту — ячейками */
.rule {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; margin-bottom: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
}
.rule textarea {
  flex: 1; min-height: 24px; padding: 4px 0; resize: none; overflow: hidden;
  background: transparent; border: 0; border-radius: 0; font-size: 15px;
}
.rule textarea:focus { box-shadow: none; }
.rule input[type="checkbox"] { margin-top: 3px; }
.rule.off { opacity: .55; }
.rule.off textarea { text-decoration: line-through; }

.split-side { display: flex; flex-direction: column; gap: 14px; }
.range-to { flex: 0 0 auto; color: var(--muted); font-size: 13.5px; }

/* Тема форума — второй строкой внутри группы */
.topic-line {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 6px 10px 6px 12px; border-radius: 9px;
  background: var(--panel-2);                     /* не синий: синим помечен выбор группы */
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
}
.topic-line.none {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
}
.topic-label { flex: 0 0 auto; font-size: 13px; color: var(--ok); font-weight: 550; }
.topic-line.none .topic-label { color: var(--warn); }
.topic-line { position: relative; }
.topic-btn {
  flex: 1; min-width: 0; text-align: left;
  padding: 4px 26px 4px 6px; border: 0; background: transparent;
  color: var(--text); font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 13px;
}
.topic-btn:hover { color: var(--accent); }
.topic-line.none .topic-btn { color: var(--warn); }

.topic-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.topic-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13.5px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.topic-item.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 550; }
.topic-item.muted { color: var(--muted); }

.lang-chip.stale {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

/* Расписание: строки настроек и быстрые наборы */
.presets { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.preset {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 14px 18px; text-align: left;
  color: var(--text);                      /* иначе браузер берёт свой чёрный для кнопок */
  background: color-mix(in srgb, var(--text) 7%, var(--panel));
  border: 1px solid var(--border); border-radius: 12px;
  transition: background .12s, border-color .12s, color .12s;
}
.preset b { font-size: 14.5px; font-weight: 650; }
.preset i { font-style: normal; font-size: 13px; color: var(--muted); }
.preset:hover { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.preset.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.preset.on b { color: var(--accent); }

.setting {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.setting:last-of-type { border-bottom: 0; }
.setting-main { flex: 1; min-width: 0; }
.setting-title { font-size: 15px; font-weight: 550; }
.setting-note { font-size: 13px; color: var(--muted); margin-top: 4px; min-height: 19px; }
.setting .range { flex: 0 0 auto; }
.setting .switch { padding: 0; flex: 0 0 auto; }
.setting .switch span { display: none; }

/* Первый запуск расписания: сначала три решения, которые действительно нужны.
   Технические паузы и переключатели остаются доступными, но не перегружают экран. */
.schedule-basics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.schedule-setting {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 176px; padding: 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel-2);
}
.schedule-setting .setting-title { font-size: 15px; font-weight: 650; }
.schedule-setting .setting-note { min-height: 0; line-height: 1.45; }
.schedule-range { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.schedule-range label { display: inline-flex; align-items: center; gap: 5px; }
.schedule-range input, .schedule-single input { width: 64px; padding: 8px 6px; text-align: center; }
.schedule-single { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.schedule-advanced { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.schedule-advanced > summary {
  padding: 15px 18px; cursor: pointer; list-style: none; color: var(--text); font-weight: 650; font-size: 14px;
}
.schedule-advanced > summary::-webkit-details-marker { display: none; }
.schedule-advanced > summary::marker { content: ""; }
.schedule-advanced > summary::after { content: "Показать"; float: right; color: var(--accent); font-size: 13px; font-weight: 600; }
.schedule-advanced[open] > summary { border-bottom: 1px solid var(--border); }
.schedule-advanced[open] > summary::after { content: "Свернуть"; }
.schedule-advanced > p { margin: 0; padding: 13px 18px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.schedule-advanced .setting { margin: 0 18px; }
.scheduler-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.scheduler-card .scheduler-row { min-height: 44px; }
.scheduler-card .muted { max-width: 620px; line-height: 1.45; }
.schedule-folders-card { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.schedule-folder-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
}
.schedule-folder-toggle {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); cursor: pointer;
}
.schedule-folder-toggle.on {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}
.schedule-folder-toggle input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.schedule-folder-toggle-copy { min-width: 0; display: grid; gap: 3px; }
.schedule-folder-toggle-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.schedule-folder-toggle-copy small { color: var(--muted); font-size: 12px; }
.schedule-folder-toggle-state { margin-left: auto; flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.schedule-folder-toggle.on .schedule-folder-toggle-state { color: var(--accent); }
.plan-row.disabled { opacity: .62; }
.plan-row.disabled .plan-groups { display: none; }

@media (max-width: 1600px) {
  .schedule-basics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-setting:last-child { grid-column: span 2; }
}

@media (max-width: 900px) {
  .schedule-basics { grid-template-columns: 1fr; }
  .schedule-setting, .schedule-setting:last-child { min-height: 0; grid-column: auto; }
}
/* Отдельная настройка в карточке поиска: линии снизу не надо, а воздух сверху —
   надо, иначе она липнет к строке запроса. */
#deepSkipBox { border-bottom: 0; padding-top: 4px; margin-bottom: 18px; }
#deepSkipBox .setting-note { max-width: 660px; line-height: 1.5; }

@media (max-width: 900px) {
  .setting { flex-direction: column; align-items: stretch; gap: 12px; }
  .setting .range { justify-content: flex-start; }
}

/* Панели папки выравниваем по верху: пустая тянулась до высоты соседней и
   оставляла под собой провал в пол-экрана. */
#folderBody .grid-2 { align-items: start; }

/* ===== Две половины папки =====
   Слева — куда пойдут объявления, справа — какие. Номер и подпись под
   заголовком отвечают на «где что» до того, как человек начнёт гадать. */
.pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pane-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.pane-num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 700;
}
.pane-head .muted { margin-left: auto; font-size: var(--fs-sm); white-space: nowrap; }
.pane-lead { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }

/* Список папок отделён от её содержимого чертой: иначе левая колонка и
   редактор сливаются в одно полотно. */
.split-main { border-left: 1px solid var(--border); padding-left: 36px; }

/* Шапка выбранной папки — строка заголовка, а не форма. Подпись «Название
   папки» над полем, в котором написано название, ничего не объясняет: это
   лишний ряд и лишние слова. */
.folder-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
/* По id, а не по классу: общее правило для полей записано как
   input:not(...):not(...):not(...):not(...) и по весу перебивает любой класс.
   Id перевешивает его гарантированно. */
#folderName.folder-title {
  flex: 1 1 240px; min-width: 0;
  padding: 6px 0; border: 0; background: transparent; border-radius: 0;
  font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em;
}
#folderName.folder-title:focus {
  box-shadow: none; border-bottom: 1px solid var(--accent);
}
.folder-lang { flex: 0 0 auto; }
.folder-lang .picker-btn { padding: 8px 12px; font-size: var(--fs-sm); }
.folder-head .icon-btn { flex: 0 0 auto; }

.folder-message-picker { position: relative; margin-top: 14px; }
.folder-message-trigger {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center;
  gap: 11px; width: 100%; min-height: 62px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); text-align: left;
}
.folder-message-trigger:hover,
.folder-message-trigger.is-open {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}
.folder-message-trigger > svg {
  width: 20px; height: 20px; fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.folder-message-trigger-copy { min-width: 0; }
.folder-message-trigger-copy b,
.folder-message-trigger-copy small { display: block; }
.folder-message-trigger-copy b { font-size: var(--fs-sm); }
.folder-message-trigger-copy small {
  margin-top: 4px; overflow: hidden; color: var(--muted); font-size: var(--fs-xs);
  text-overflow: ellipsis; white-space: nowrap;
}
.folder-message-trigger.has-warning .folder-message-trigger-copy small { color: var(--warn); }
.folder-message-trigger-action { color: var(--accent); font-size: var(--fs-xs); font-weight: 650; }
.folder-message-popover {
  position: absolute; z-index: 90; top: calc(100% + 8px); left: 0;
  width: min(560px, calc(100vw - 32px)); padding: 14px;
  border: 1px solid var(--border-control, var(--border)); border-radius: var(--r-md);
  background: var(--panel); box-shadow: var(--shadow);
}
.folder-message-popover[hidden] { display: none !important; }
.folder-message-popover-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 12px;
}
.folder-message-popover-head h3 { margin: 0; font-size: var(--fs-lg); }
.folder-message-popover-head p {
  margin: 5px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45;
}
.folder-message-popover #folderMsgList {
  display: grid; align-content: start; gap: 7px; min-height: 110px; max-height: 340px;
  overflow-y: auto; padding: 7px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--panel-2);
}
.folder-message-popover #folderMsgSummary { margin: 10px 2px 0; font-size: var(--fs-xs); }
.folder-message-popover .dialog-row { background: var(--panel); }
.folder-message-popover .notice { margin-top: 10px; }

/* ===== Редактор папки: три самостоятельных отсека ===== */
.folder-work-card { overflow: visible; }
.folder-work-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.folder-work-head > div { min-width: 0; }
.folder-control-center {
  display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  align-items: stretch; gap: 16px; margin-bottom: 16px;
}
.folder-control-center .folder-section-list {
  min-height: 0; padding: 18px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel-2);
}
.folder-control-center .folder-section-list .folder-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 0 0 14px;
}
.folder-control-center .folder-section-list .folder-section-head p { display: block; }
.folder-control-center .folder-primary-action { margin: 0; white-space: nowrap; }
.folder-workspace {
  display: grid;
  /* Папки задают контекст сверху, группы получают всю рабочую ширину,
     сообщения находятся ниже как следующий этап настройки. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(680px, auto);
  height: auto;
  min-height: 0;
  gap: 16px; align-items: stretch;
}
.folder-body { display: contents; }
.folder-body[hidden] { display: none !important; }

.folder-section {
  min-width: 0; min-height: 650px;
  display: flex; flex-direction: column;
  padding: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Тянемся на всю высоту ряда: без этого колонка с самым длинным
     содержимым оказывалась выше соседних. */
  align-self: stretch; height: 100%;
}
.folder-section-list,
.folder-section-groups,
.folder-section-messages {
  background: var(--panel-2);
  border-color: var(--border);
}
.folder-section-list { min-height: 0; height: auto; }
.folder-section-groups { grid-column: 1; grid-row: 1; min-height: 680px; height: min(780px, calc(100vh - 150px)); }
.folder-section-messages { grid-column: 1; grid-row: 2; min-height: 0; height: auto; }

.folder-section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 11px;
  min-height: 58px; margin-bottom: 16px;
}
.folder-section-head h3 {
  margin: 2px 0 4px; font-size: 18px; line-height: 1.2; font-weight: 650;
}
.folder-section-head p {
  margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4;
}
.folder-section-count {
  align-self: start; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: 12px;
}

.folder-primary-action {
  width: 100%; margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  font-weight: 650;
}
.folder-primary-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}
.folder-section-list .folder-list {
  display: flex; flex-direction: column; gap: 7px; flex: 0 1 auto;
  min-height: 82px; max-height: 330px; overflow-x: hidden; overflow-y: auto;
  padding: 7px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.folder-section-list .folder-row {
  flex: 0 0 auto; width: 100%; min-width: 0; min-height: 68px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto; align-content: center; gap: 5px 10px;
  padding: 11px 13px;
  background: var(--panel); border-color: var(--border);
  border: 1px solid var(--border); border-radius: 8px;
}
.folder-section-list .folder-row.active {
  border-color: transparent;
  background: var(--selection-bg);
  box-shadow: none;
}
.folder-section-list .folder-row .folder-name { grid-column: 1; grid-row: 1; }
.folder-section-list .folder-row .folder-meta { grid-column: 1; grid-row: 2; }
.folder-section-list .folder-name { gap: 8px; font-size: 14px; font-weight: 650; }
.folder-section-list .folder-language-label {
  padding: 2px 6px; color: var(--accent); font-size: 10px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 6px; background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.folder-section-list .folder-meta {
  min-width: 0; display: flex; align-items: center; gap: 7px;
  overflow: hidden; font-size: 11px; white-space: nowrap;
}
.folder-section-list .folder-meta > span:first-child {
  overflow: hidden; text-overflow: ellipsis;
}
.folder-row-state {
  flex: 0 0 auto; padding-left: 7px; border-left: 1px solid var(--border);
  color: var(--muted);
}
.folder-row-state.warn { color: var(--warn); }
.folder-section-list .folder-section-head { min-height: 0; margin-bottom: 10px; }
.folder-section-list .folder-section-head p { display: block; }
.folder-section-list .folder-primary-action {
  align-self: flex-start; width: auto; min-width: 160px; margin-bottom: 0;
  padding: 8px 14px;
}

.folder-settings {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.folder-settings-label {
  display: block; margin-bottom: 10px;
  color: var(--muted); font-size: 11px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
}
.folder-settings .folder-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px; padding: 0; margin: 0; border: 0;
}
.folder-settings #folderName.folder-title {
  grid-column: 1 / -1; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel);
  font-size: 15px; font-weight: 600;
}
.folder-settings #folderName.folder-title:focus {
  border: 1px solid var(--accent); box-shadow: var(--ring);
}
.folder-settings .folder-lang { min-width: 0; width: 100%; }
.folder-settings .folder-lang .picker-btn { width: 100%; justify-content: space-between; }
.folder-settings .icon-btn { align-self: center; }
.folder-settings[hidden] { display: none !important; }

.folder-settings-bar {
  min-width: 0; display: flex; flex-direction: column;
  margin: 0; padding: 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2);
}
.folder-settings-main {
  display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.folder-settings-bar .folder-settings-label {
  display: none;
}
.folder-settings-bar .folder-head {
  min-width: 0; display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) auto;
  align-items: end; gap: 12px;
}
.folder-setting-field { min-width: 0; display: grid; gap: 6px; }
.folder-setting-field > span:first-child {
  color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1;
}
.folder-settings-bar #folderName.folder-title {
  min-width: 0; width: 100%; height: 40px;
  padding: 8px 11px;
}
.folder-setting-name { min-width: 0; }
.folder-setting-language { min-width: 0; }
.folder-settings-bar .folder-lang { min-width: 0; width: 100%; }
.folder-settings-bar .folder-lang .picker-btn { min-height: 40px; }
.folder-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.folder-head-actions .icon-btn { flex: 0 0 40px; width: 40px; height: 40px; }
.folder-settings-head h3 { margin: 2px 0 4px; font-size: 18px; line-height: 1.2; }
.folder-settings-head p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.folder-settings-bar .folder-accounts {
  position: relative; min-width: 0; margin-top: 14px; padding: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.folder-settings-bar .folder-accounts-head {
  min-height: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0; border: 0;
}
.folder-settings-bar .folder-accounts-head > div { min-width: 0; }
.folder-settings-bar .folder-accounts-head b { display: block; font-size: 13px; }
.folder-settings-bar .folder-accounts-head p {
  margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4;
}
.folder-settings-bar .folder-accounts-toggle {
  flex: 0 0 auto; padding: 8px 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.folder-settings-bar .folder-accounts-toggle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
}
.folder-settings-bar .folder-account-config:not([hidden]) {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0;
  display: grid; width: min(760px, calc(100vw - 48px)); gap: 12px;
  padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 10px; background: var(--panel-2);
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%), 0 4px 14px rgb(0 0 0 / 24%);
}
.folder-settings-bar .folder-account-config:not([hidden])::before {
  content: ""; position: absolute; right: 52px; top: -6px;
  width: 10px; height: 10px; transform: rotate(45deg);
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--panel-2);
}
.folder-settings-bar .folder-account-list {
  /* Две колонки по три строки: видны шесть аккаунтов, остальные прокручиваются. */
  max-height: 230px; padding-right: 4px; overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.folder-account-mode { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.folder-account-mode .chip-btn { min-height: 34px; padding: 7px 11px; }
.folder-account-mode .chip-btn.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}
.folder-account-tools {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) auto;
  align-items: end; gap: 10px;
}
.folder-account-tools label { min-width: 0; display: grid; gap: 6px; }
.folder-account-tools label > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.folder-account-tools input,
.folder-account-tools select { min-width: 0; width: 100%; }
.folder-account-tag-apply { min-height: 40px; }
.folder-account-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; max-height: 310px; overflow: auto;
}
.folder-account-choice {
  position: relative; min-width: 0; display: grid;
  grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); cursor: pointer;
}
.folder-account-choice:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.folder-account-choice.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}
.folder-account-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.folder-account-box {
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel);
}
.folder-account-choice > input:checked + .folder-account-box {
  border-color: var(--accent); background: var(--accent);
}
.folder-account-choice > input:checked + .folder-account-box::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.folder-account-copy { min-width: 0; display: grid; gap: 3px; }
.folder-account-copy b,
.folder-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-account-copy b { font-size: 12px; }
.folder-account-copy small { color: var(--muted); font-size: 10px; }
.folder-account-inline-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.folder-account-inline-tags > span {
  padding: 2px 6px; color: var(--muted); font-size: 10px;
  border: 1px solid var(--border); border-radius: 999px;
}
.folder-account-list-empty { grid-column: 1 / -1; padding: 18px; color: var(--muted); text-align: center; }
.folder-section-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.folder-section-foot .muted { font-size: 12px; }

/* Итог по папкам и состояние сохранения — общие на всю рабочую область.
   Внутри колонки «Папка» они ломали ей высоту: колонка становилась выше
   соседних ровно на этот подвал. */
.folder-work-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.folder-work-foot .muted { font-size: var(--fs-sm); }

.folder-empty-state {
  grid-column: 1; min-height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 3%, var(--panel-2));
  color: var(--muted);
}
.folder-empty-state[hidden] { display: none !important; }
.folder-empty-state b { margin: 12px 0 6px; color: var(--text); font-size: 18px; }
.folder-empty-state p { max-width: 360px; margin: 0; line-height: 1.5; }

.folder-section-actionbar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: -4px 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.folder-group-filters {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(164px, 190px);
  align-items: center; gap: 10px; width: 100%; margin-bottom: 12px;
}
.folder-group-filters input { min-width: 0; width: 100%; }
.folder-group-filters .quiet-select { max-width: 190px; width: 100%; }
.folder-group-filters .filter-check {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  min-height: 38px; padding: 0 11px; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 13px;
  cursor: pointer;
}
.folder-group-filters .filter-check input { width: 15px; height: 15px; min-width: 15px; accent-color: var(--blue); }
.folder-section .pane-more { margin-bottom: 12px; }
.folder-group-picker {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 14px;
}
.folder-group-library,
.folder-group-selected {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.folder-group-pane-head {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--border);
}
.folder-group-pane-head > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.folder-group-pane-head b { font-size: 14px; }
.folder-group-pane-head .muted { font-size: 11px; }
.folder-group-library-tools {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, .7fr) auto;
  gap: 8px; padding: 10px 10px 6px;
}
.folder-group-library-tools input,
.folder-group-library-tools select { min-width: 0; width: 100%; }
.folder-group-library-tools #btnManageLibraryTopics { min-height: 44px; padding-inline: 13px; }

.modal-heading { margin-bottom: 20px; }
.modal-heading h3 { margin: 0 0 5px; font-size: 18px; }
.modal-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.library-topic-modal { max-width: 540px; }
.topic-choice-list { display: flex; flex-direction: column; gap: 8px; }
.topic-choice {
  min-height: 62px; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); cursor: pointer;
}
.topic-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
}
.topic-choice input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.topic-choice > span { display: flex; flex-direction: column; gap: 2px; }
.topic-choice b { font-size: 14px; }
.topic-choice small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.topic-choice-field { padding: 2px 0 6px 41px; }
.topic-choice-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.topic-choice-field input, .topic-choice-field .picker { width: 100%; }
.field-error { display: block; min-height: 18px; margin-top: 5px; color: var(--err); font-size: 12px; }
.library-topics-modal { max-width: 560px; }
.library-topic-list {
  max-height: min(420px, 55vh); overflow: auto; padding: 5px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
}
.library-topic-row {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 11px; border-bottom: 1px solid var(--border);
}
.library-topic-row:last-child { border-bottom: 0; }
.library-topic-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.library-topic-row-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.library-topic-row-copy small { color: var(--muted); font-size: 12px; }
.library-topic-row .ghost { min-width: 92px; }
.folder-library-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 32px; margin: 0 10px 6px;
}
.folder-library-actions .link-btn { font-size: 12px; }
.folder-library-actions .lang-progress { flex: 1 1 100%; line-height: 1.35; }
.folder-library-view {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 10px 8px;
}
.folder-library-view .filter-check {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 11px; cursor: pointer;
}
.folder-library-view .filter-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.folder-library-view select { width: auto; min-width: 145px; padding: 7px 28px 7px 9px; font-size: 11px; }
.folder-group-list {
  flex: 1 1 auto; min-height: 430px; overflow: auto;
  padding: 7px;
}
/* Правая колонка содержит ещё панель вступления, поэтому общий минимум
   библиотеки здесь переполнял сетку и наезжал на ручное добавление снизу. */
.folder-group-selected .folder-group-list { min-height: 0; }
.folder-group-option {
  width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 6px; padding: 10px 11px;
  color: var(--text); text-align: left; border: 1px solid transparent;
  border-radius: 7px; background: var(--panel-2);
}
.folder-group-option { cursor: pointer; }
.folder-group-option:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
}
.folder-group-option.selected {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
}
.folder-group-option.selected-folder { opacity: 1; }
.folder-group-option-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.folder-group-option-title { min-width: 0; display: flex; align-items: center; gap: 7px; }
.folder-group-option-main b {
  overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.folder-group-option-main small {
  overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap;
}
.folder-group-option-action {
  flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px;
  padding: 0; color: var(--accent); font-size: 20px; font-weight: 600;
  border: 0; background: transparent;
}
.folder-group-option-action:hover:not(:disabled) { background: var(--panel); }
.folder-group-option.selected .folder-group-option-action { color: var(--err); }
.folder-group-option .icon-btn { flex: 0 0 32px; width: 32px; height: 32px; }
.folder-group-option .lang-chip,
.folder-group-option .lang-ask { flex: 0 0 auto; }
.folder-group-option .lang-ask { padding: 2px 6px; font-size: 11px; }
.folder-group-meta { display: block; }
.folder-group-link {
  color: var(--muted); text-decoration: none;
  text-decoration-color: transparent; text-underline-offset: 2px;
}
.folder-group-link:hover {
  color: var(--accent); text-decoration: underline;
  text-decoration-color: currentColor;
}
.folder-group-list > .empty { margin: 10px; padding: 28px 16px; }
.folder-group-selected.is-empty {
  align-self: start; min-height: 0;
}
.folder-group-selected.is-empty .folder-group-list {
  flex: 0 0 auto; min-height: 0; padding: 8px;
}
.folder-group-selected.is-empty .folder-group-list > .empty {
  min-height: 96px; display: grid; place-items: center; margin: 0;
  border: 1px dashed var(--border); border-radius: 8px;
  background: var(--panel-2);
}
.folder-dialog-legacy[hidden] { display: none !important; }
.folder-section-groups #dialogList,
.folder-section-messages #folderMsgList {
  flex: 1 1 360px; min-height: 320px; max-height: 520px;
  background: var(--panel); border-radius: 12px;
}
.folder-section-groups #dialogList { flex: 1 1 auto; min-height: 0; max-height: none; }
.folder-section-messages #folderMsgList { flex: 1 1 auto; min-height: 360px; max-height: none; }
.folder-section-messages #folderMsgList {
  flex: 0 1 auto; min-height: 160px; max-height: 320px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start; gap: 8px; padding: 8px;
}
.folder-section-messages .folder-section-head { min-height: 0; margin-bottom: 10px; }
.folder-section-messages .folder-message-rule { margin-bottom: 10px; }
.folder-section-groups #dialogList > .empty {
  margin: 12px;
  padding: 28px 36px;
}
.folder-section-groups .dialog-row,
.folder-section-messages .dialog-row { background: var(--panel-2); }
.folder-section-groups .dialog-row.is-hidden-group { opacity: .68; }
.group-actions-trigger {
  display: grid; place-items: center; flex: 0 0 34px;
  width: 34px; height: 34px; padding: 0;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
}
.group-actions-trigger:hover, .group-actions-trigger[aria-expanded="true"] {
  color: var(--text); background: var(--panel); border-color: var(--border);
}
.group-actions-trigger svg { width: 18px; height: 18px; fill: currentColor; }
.group-actions-menu {
  position: fixed; z-index: 120;
  width: min(248px, calc(100vw - 24px)); padding: 7px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.group-actions-title {
  margin: 3px 7px 7px; overflow: hidden; color: var(--muted);
  font-size: var(--fs-xs); font-weight: 650; text-overflow: ellipsis; white-space: nowrap;
}
.group-actions-item {
  display: flex; align-items: center; width: 100%; min-height: 38px;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  color: var(--text); background: transparent; font-size: var(--fs-sm);
  text-align: left; text-decoration: none; cursor: pointer;
}
.group-actions-item:hover, .group-actions-item:focus-visible {
  color: var(--text); background: var(--panel-2); outline: none;
}
.group-actions-item.danger { color: var(--err); }
.group-actions-item.danger:hover, .group-actions-item.danger:focus-visible {
  background: color-mix(in srgb, var(--err) 12%, transparent);
}
.group-actions-item[aria-disabled="true"] { color: var(--muted); cursor: wait; opacity: .65; }
.folder-manual-add { flex-wrap: nowrap; margin: 12px 0 0; }
.folder-manual-add input { min-width: 0; }
.folder-message-rule {
  margin: -4px 0 14px; padding: 11px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border-control);
  color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
.folder-section-messages #folderMsgSummary { margin-top: 12px; }

/* ===== Редактор сообщений: та же система карточек, что и у папок ===== */
.message-work-card { overflow: visible; }
.message-work-head { margin-bottom: 20px; }
.message-work-head > div { min-width: 0; }
.message-work-head p { margin-top: 5px; }
.message-workspace {
  grid-template-columns: minmax(290px, .72fr) minmax(0, 2fr);
  gap: 16px; align-items: stretch;
}
.message-section {
  min-width: 0; min-height: 690px;
  display: flex; flex-direction: column;
  padding: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.message-section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 11px;
  min-height: 58px; margin-bottom: 16px;
}
.message-section-head h3 {
  margin: 2px 0 4px; font-size: 18px; line-height: 1.2; font-weight: 650;
}
.message-section-head p {
  margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4;
}
.message-list-section .add-msg { width: 100%; margin-bottom: 12px; }
.message-list-section .msg-side {
  flex: 0 0 auto; max-height: none;
  background: var(--panel); border-radius: 12px;
}
.msg-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.msg-pager[hidden] { display: none; }
.msg-pager-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.message-editor-section #msgEmpty {
  flex: 1 1 auto; display: grid; place-items: center;
  min-height: 420px; border: 1px dashed var(--border); border-radius: 12px;
  background: var(--panel); text-align: center;
}
.message-editor-section #msgEmpty[hidden] { display: none !important; }
.message-editor-section #msgEditorBody:not([hidden]) {
  display: flex; flex-direction: column; min-width: 0;
}
.message-editor-section .lang-tabs {
  display: flex; align-items: center; align-content: center; gap: 6px;
  min-height: 0; margin: 0 0 14px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.message-editor-section .lang-tabs .seg-btn {
  flex: 0 0 auto; min-height: 38px;
  padding: 8px 13px 8px 30px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; box-shadow: none;
}
.message-editor-section .lang-tabs .seg-btn:hover:not(.active) {
  color: var(--text); background: var(--panel-2); border-color: var(--border);
}
.message-editor-section .lang-tabs .seg-btn.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: none;
}
.message-editor-section .lang-tabs .seg-btn::before {
  left: 13px; width: 7px; height: 7px; margin-top: -3.5px;
}
.message-editor-section .variants {
  margin: 0 0 14px; padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.message-editor-section .editor-toolbar { margin-bottom: 14px; }
.message-editor-section #edText { width: 100%; background: var(--panel); }
.message-editor-section .notice.no-text.blank {
  display: none; margin: 0; min-height: 0;
}
.message-editor-section .photos {
  align-items: flex-start; min-height: 0;
  margin-top: 16px; margin-bottom: 8px;
}
.message-editor-section .add-photo {
  width: auto; height: 40px; flex: 0 0 auto;
  flex-direction: row; justify-content: flex-start; gap: 8px;
  padding: 0 14px;
  background: var(--panel); border: 1px dashed var(--border); border-radius: 10px;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.message-editor-section .add-photo b {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-size: 17px; line-height: 1;
}
.message-editor-section .add-photo:hover {
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--text);
}
.message-editor-section .ai-panel {
  margin-top: 28px;
  background: var(--panel); border-color: var(--border);
}

@media (max-width: 1100px) {
  .message-workspace { grid-template-columns: 1fr; }
  .message-section { min-height: 0; }
  .message-list-section .msg-side { max-height: 320px; }
}

@media (max-width: 1500px) {
  .folder-settings-main { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .folder-control-center { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
  .folder-settings-bar .folder-head { grid-template-columns: 1fr; }
  .folder-head-actions { justify-content: flex-end; }
  .folder-section-groups { height: auto; min-height: 720px; }
}

@media (max-width: 980px) {
  .folder-work-head { flex-direction: column; gap: 12px; }
  .folder-control-center { grid-template-columns: 1fr; }
  .folder-settings-main { grid-template-columns: 1fr; gap: 8px; }
  .folder-settings-bar .folder-settings-label { margin: 0; }
  .folder-settings-bar .folder-head { grid-template-columns: minmax(220px, 1fr) minmax(160px, 190px) auto; }
  .folder-workspace { grid-template-columns: 1fr; grid-template-rows: none; }
  .folder-section-list, .folder-section-groups, .folder-section-messages, .folder-empty-state {
    grid-column: auto; grid-row: auto;
  }
  .folder-section { min-height: 0; }
  .folder-group-picker { grid-template-columns: 1fr; }
  .folder-group-list { min-height: 300px; max-height: 440px; }
  .folder-section-groups #dialogList,
  .folder-section-messages #folderMsgList { min-height: 300px; max-height: 480px; }
}

@media (max-width: 620px) {
  .folder-control-center .folder-section-list,
  .folder-settings-bar { padding: 14px; }
  .folder-control-center .folder-section-list .folder-section-head {
    flex-direction: column; align-items: stretch;
  }
  .folder-section-list .folder-primary-action { width: 100%; }
  .folder-setting-name { flex: 1 1 100%; }
  .folder-setting-language { flex: 1 1 180px; }
  .folder-settings-bar .folder-accounts-head { align-items: flex-start; flex-direction: column; }
  .folder-settings-bar .folder-accounts-toggle { width: 100%; }
  .folder-settings-bar .folder-account-config:not([hidden]) {
    position: fixed; z-index: 80; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-height: min(78vh, 620px); overflow-y: auto;
  }
  .folder-settings-bar .folder-account-config:not([hidden])::before { display: none; }
  .folder-account-tools { grid-template-columns: 1fr; }
  .folder-account-tag-apply { width: 100%; }
  .folder-account-list { grid-template-columns: 1fr; }
  .folder-settings-bar .folder-account-list { max-height: 360px; }
  .folder-group-filters { grid-template-columns: 1fr auto; }
  .folder-group-filters .quiet-select { grid-column: 1 / -1; max-width: none; width: 100%; }
  .folder-group-filters .filter-check { flex: 0 0 auto; }
  .folder-manual-add { flex-wrap: wrap; }
  .folder-section-head { grid-template-columns: minmax(0, 1fr); }
  .folder-section-count { grid-column: 1; justify-self: start; }
}

/* Порядок сортировки — без подписи: значение читается само. */
.quiet-select { flex: 0 0 auto; }
.quiet-select .picker-btn { padding: 10px 12px; font-size: var(--fs-sm); }

/* Действия над списком стоят сразу над ним, тихой строкой: кнопками они
   спорили с поиском за внимание, а внизу отрывались от того, на что влияют. */
.pane-more {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.pane-more .link-btn.danger { color: var(--err); }

/* Заголовок сообщения в списке — до двух строк, а не обрубок */
.msg-row .msg-text {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
}

/* Предпросмотр сообщения */
.tg-preview {
  min-height: 50vh; padding: 16px 18px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; line-height: 1.55; white-space: normal; word-break: break-word;
}
.tg-preview b { font-weight: 700; }
.tg-preview code, .tg-preview pre {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 6px; padding: 1px 6px; border: 0;
}
.tg-preview pre { display: block; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; }
.tg-preview a { color: var(--accent); text-decoration: none; }
.tg-preview a:hover { text-decoration: underline; }
#edPreviewBtn.on { border-color: var(--accent); color: var(--accent); }

.search-hidden {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px;
}
.copyable { cursor: copy; display: inline-block; }
.copyable:hover { color: var(--accent); text-decoration: underline dotted; }

.head-row { display: flex; align-items: center; gap: 14px; }
.head-row h2 { flex: 1; min-width: 0; margin: 0; }
.head-row .muted { flex: 0 0 auto; }

/* Журнал отправленных */
.sent-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
}
.list-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px 0 2px;
}
.list-pager .muted { min-width: 54px; text-align: center; }
.sent-main { flex: 1; min-width: 0; }
.sent-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sent-head b { font-size: 15px; font-weight: 650; }
.sent-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sent-text { font-size: 13.5px; color: var(--muted); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ответы: входящее в личку, упоминания, ответы на объявления */
.reply-row { flex-wrap: wrap; }
.reply-row .sent-main { flex: 1 1 280px; }
.reply-row .row-gap { flex-wrap: wrap; margin-left: auto; }
/* Непрочитанное заметно, прочитанное отходит на второй план. */
.reply-row:not(.read) { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.reply-row.read { opacity: .72; }
.reply-row .sent-text { white-space: normal; overflow: visible;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.reply-ours {
  margin-top: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: var(--r-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-account-line {
  min-width: min(100%, 260px);
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.lead-account-line span,
.lead-account-line small {
  color: var(--muted);
  font-size: 12px;
}
.lead-account-line b {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.25;
}
#repliesFilter { flex: 0 1 auto; flex-wrap: wrap; }

/* Что придумал Клод — врезка внутри карточки, до того как правила приняли */
.card-inner {
  margin-bottom: 18px; padding: 18px 20px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
}
.card-inner .pane-head { margin-bottom: 14px; }
.card-inner .toolbar:last-child { margin-bottom: 0; }
.rule.pick { cursor: pointer; }
.rule.pick textarea { cursor: text; }

/* Сработавшее слово в чужом сообщении */
.reply-row mark {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text); border-radius: 4px; padding: 0 3px;
}
/* Как писать правила — разворачивается кнопкой, поэтому строки нужны читаемые */
#watchHelp { line-height: 1.7; }
#watchHelp code {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px;
}

/* Проблемные группы */
.prob-row {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
}
.prob-row.banned {
  border-color: color-mix(in srgb, var(--err) 40%, transparent);
  background: color-mix(in srgb, var(--err) 7%, var(--panel-2));
}
/* Названию нужно место: не хватило ширины — кнопки уходят на строку ниже. */
.prob-row .sent-main { flex: 1 1 260px; }
.prob-row .row-gap { flex-wrap: wrap; margin-left: auto; }
.prob-row .row-gap > button { min-height: 44px; }
#problemBanned:not(:empty) { margin-bottom: 14px; }
#problemBanned .notice { margin-bottom: 10px; }
.linkbtn {
  display: inline-flex; align-items: center; text-decoration: none;
  color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 550;
}
.linkbtn:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }

/* На каком объявлении споткнулись */
.prob-msg {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel); font-size: 13.5px; line-height: 1.45;
}
.prob-row.banned .prob-msg { border-color: color-mix(in srgb, var(--err) 55%, var(--border)); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { opacity: .8; }
#manualGroup { scroll-margin-top: 24px; }

/* Полосы прокрутки — тоньше и спокойнее системных */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

/* ===== Узкий экран ===== */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .msg-split { grid-template-columns: 1fr; }
  .msg-side { max-height: 300px; }
  .folder-list { max-height: 240px; }
}

@media (max-width: 780px) {
  body.mobile-nav-lock { overflow: hidden; }
  .app { min-height: 100dvh; }
  .sidebar {
    position: fixed; z-index: 72; inset: 0 auto 0 0;
    width: min(330px, 88vw); height: 100dvh; flex: none;
    padding: 18px 12px max(18px, env(safe-area-inset-bottom));
    transform: translateX(-102%); transition: transform .2s ease;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 18px 0 48px rgb(0 0 0 / 38%);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar .brand { min-height: 42px; }
  .sidebar .nav { flex-direction: column; }
  .sidebar .nav-item { min-height: 44px; white-space: normal; }
  .sidebar-foot { margin-top: auto; }
  .mobile-nav-backdrop {
    position: fixed; z-index: 71; inset: 0; width: 100%; height: 100%; padding: 0;
    border: 0; border-radius: 0; background: rgb(0 0 0 / 58%); backdrop-filter: blur(2px);
  }
  .app.mobile-nav-open .mobile-nav-backdrop { display: block; }
  .mobile-nav-toggle {
    display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel);
    color: var(--text);
  }
  .mobile-nav-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .main { width: 100%; }
  .content {
    max-width: 100%;
    padding: 14px 12px calc(112px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  .topbar {
    position: fixed; z-index: 70; inset: auto 0 0 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border); border-bottom: 0;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow: 0 -10px 28px rgb(0 0 0 / 28%);
  }
  .status {
    position: fixed; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px); min-height: 32px;
    padding: 7px 11px;
    border: 1px solid var(--border); border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
    backdrop-filter: blur(12px);
    font-size: var(--fs-xs);
  }
  .topbar-project { display: none; }
  .topbar-actions { display: none; }
  .notification-center { position: static; min-width: 0; }
  .mobile-nav-toggle,
  .mobile-tab-shortcut,
  .topbar-bell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; min-width: 0; height: 54px; min-height: 54px; padding: 5px 2px;
    border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--muted); box-shadow: none;
    font-size: 10px; font-weight: 550; line-height: 1.1; white-space: nowrap;
  }
  .mobile-nav-toggle:hover,
  .mobile-tab-shortcut:hover,
  .topbar-bell:hover { background: var(--panel-2); color: var(--text); }
  .mobile-tab-shortcut.active { color: var(--accent); }
  .topbar-action-icon,
  .mobile-nav-toggle svg,
  .mobile-tab-shortcut svg,
  .topbar-bell svg {
    display: block; width: 21px; height: 21px; flex: 0 0 21px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .mobile-nav-toggle .topbar-action-label { display: inline; }
  .notification-mobile-label { display: inline; }
  .notification-badge { top: 3px; right: calc(50% - 19px); border-color: var(--panel); }
  .notification-panel {
    position: fixed; z-index: 75; inset: auto 12px calc(76px + env(safe-area-inset-bottom)) 12px;
    width: auto; max-height: min(68dvh, 560px);
  }
  .notification-list { max-height: calc(68dvh - 70px); }
  .topbar-action-label,
  .mobile-tab-shortcut span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ===== Полноценный мобильный режим основного приложения ===== */
@media (max-width: 620px) {
  body { font-size: 14px; overflow-wrap: anywhere; }
  .card { padding: 16px; margin-bottom: 12px; border-radius: var(--r-md); }
  .card-head { margin-bottom: 14px; }
  .card-head h2 { font-size: 18px; }
  .card-head h3 { font-size: 16px; }
  .card-foot, .modal-foot, .toolbar, .row-gap, .head-row,
  .scheduler-row, .message-work-head, .folder-work-head {
    align-items: stretch; flex-direction: column;
  }
  .card-foot > *, .modal-foot > button, .toolbar > button, .scheduler-row > button { width: 100%; }
  button, .ghost, .primary, .btn { min-height: 44px; }
  .icon-btn, .account-action { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  textarea, select, .picker-btn { min-height: 44px; font-size: 16px; }
  textarea { max-width: 100%; }

  .modal { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: none; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; animation: none;
  }
  .modal-foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 2; margin: 18px -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); }

  .split-main { padding-left: 0; border-left: 0; }
  .split-side { display: block; }
  .msg-split, .message-workspace, .folder-control-center, .folder-group-picker, .folder-workspace { gap: 12px; }
  .message-work-card, .folder-work-card { padding: 14px; }
  .message-section, .folder-section { padding: 14px; border-radius: var(--r-md); }
  .message-list-section .msg-side, .msg-side { max-height: 280px; }
  .message-editor-section, .folder-section-groups { min-height: 0; height: auto; }
  .folder-section-list .folder-list { max-height: 280px; }
  .folder-settings-bar .folder-head { grid-template-columns: 1fr; }
  .folder-head-actions { justify-content: flex-start; }
  .folder-group-pane { min-height: 0; }
  .folder-group-list, .folder-section-groups #dialogList, .folder-section-messages #folderMsgList { min-height: 260px; max-height: 58dvh; }
  .folder-group-library-tools, .folder-group-filters { grid-template-columns: 1fr; }
  .folder-group-library-tools > *, .folder-group-filters > * { grid-column: 1; max-width: none; width: 100%; }
  .folder-library-actions, .folder-manual-add, .variants, .editor-toolbar, .ai-task, .ai-fix-btns { flex-wrap: wrap; }
  .folder-manual-add > button, .add-msg { width: 100%; }
  .message-editor-section .editor-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
  }
  .message-editor-section .editor-toolbar > .muted {
    grid-column: 1 / -1;
    display: block;
    padding: 0 2px 2px;
    text-align: right;
    line-height: 1.35;
  }
  .message-editor-section .editor-toolbar > .spacer { display: none; }
  .message-editor-section .editor-toolbar > button {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: 1.25;
    white-space: normal;
  }
  .dialog-row, .folder-row, .msg-row, .search-row { padding: 12px; gap: 10px; }
  .dialog-title, .folder-group-option-main b { white-space: normal; }
  .group-actions-menu { width: calc(100vw - 24px); max-width: none; }

  .schedule-basics { grid-template-columns: 1fr; }
  .schedule-setting:last-child { grid-column: auto; }
  #tab-schedule .schedule-range.schedule-control-group,
  #tab-schedule .schedule-single.schedule-control-group { align-items: stretch; flex-wrap: wrap; }
  #tab-schedule .schedule-control-group .schedule-field { flex: 1 1 96px; }
  #tab-schedule .schedule-control-group .schedule-field > input[type="number"],
  #tab-schedule .schedule-control-group .schedule-field > .schedule-hour-select { width: 100%; min-width: 0; }
  #tab-schedule .schedule-control-unit { flex: 1 1 100%; padding: 0; }
  .scheduler-row > div { min-width: 0; }
  .schedule-folder-list { grid-template-columns: 1fr; }

  .sent-row, .prob-row { padding: 12px; gap: 10px; }
  .sent-row { flex-wrap: wrap; }
  .sent-row .sent-main, .prob-row .sent-main { flex-basis: 100%; }
  .sent-row .row-gap, .prob-row .row-gap {
    width: 100%; margin-left: 0; display: grid; gap: 6px;
  }
  .sent-row .row-gap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prob-row .row-gap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sent-row .row-gap > * {
    min-width: 0; width: 100%; padding: 8px 6px; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .prob-row .row-gap > * {
    min-width: 0; width: 100%; min-height: 48px; padding: 8px 9px;
    font-size: 12.5px; line-height: 1.25; white-space: normal;
  }
  .list-pager { margin: 12px 0 0; }
  .log { max-height: 60dvh; overflow: auto; }

  .stat-cols { grid-template-columns: 1fr; }
  .seg { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .seg > button { flex: 0 0 auto; min-height: 40px; }
  .notice, .empty { max-width: 100%; }
}


/* ===== Единая типографика =====
   Размеры разъехались по мере роста программы: 11, 12, 12.5, 13, 13.5, 14,
   14.5, 15, 15.5, 16… Сводим к пяти ступеням и трём насыщенностям. */
input, textarea, select, button, .details input, #qrUrl {
  font-family: inherit;
}
.details input, #qrUrl { font-size: 14px; }

/* Заголовки */
.card-head h2 { font-size: 19px; font-weight: 650; }
.card-head h3, .pane-head h3, .scheduler-title { font-size: 16px; font-weight: 650; }
.bulk-head b, .setting-title { font-size: 15.5px; font-weight: 550; }

/* Основной текст и названия в списках */
.dialog-title, .msg-row .msg-text, .folder-name, .sent-head b,
.scan-main .dialog-title, .plan-head b { font-size: 15.5px; font-weight: 550; }

/* Второстепенное */
.muted, .hint, .under, .setting-note, .dialog-sub, .msg-row .msg-meta,
.folder-meta, .sent-meta, .sent-text, .scan-preview, .plan-group,
.preset i, .qr-wait, .empty { font-size: 13.5px; }

/* Мелкие метки */
.tag, .lang-chip, .badge, .msg-num { font-size: 12px; }

/* Управление */
button { font-size: 15px; }
.small, .seg-btn, .topic-pick, .msg-actions select, .msg-editor .toolbar select,
.range, .range-to { font-size: 13.5px; }
.lang-pick, .preset b { font-size: 15px; }
.log { font-size: 12.5px; }


/* Один шрифт во всём интерфейсе — никаких моноширинных вставок */
body, input, textarea, select, button, code, .log, .details input, #qrUrl {
  font-family: -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
}


/* ===== Свои выпадающие списки (ui/select.js) =====
   Родной select остаётся в разметке ради .value и change, но с глаз убран:
   его попап рисует браузер, оформить его нельзя, и в тёмной программе он
   выглядел белым системным окном. */
.picker { position: relative; display: inline-flex; min-width: 0; }
.picker > select {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; clip-path: inset(50%);
}
.picker-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; min-width: 0;
  padding: 11px 14px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 450; text-align: left;
}
.picker-btn:hover:not(:disabled) { border-color: var(--muted); }
.picker.open > .picker-btn { border-color: var(--accent); box-shadow: var(--ring); }
.picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-arrow {
  flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .14s;
}
.picker.open .picker-arrow { transform: rotate(-135deg) translate(-3px, -3px); }
.picker.disabled { opacity: .55; }

.picker-menu {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px);
  min-width: 100%; width: max-content; max-width: 320px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.picker-menu.up { top: auto; bottom: calc(100% + 6px); }
.picker-item {
  padding: 9px 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  font-size: var(--fs-sm); font-weight: 450; text-align: left; white-space: nowrap;
}
.picker-item:hover:not(:disabled) { background: var(--panel-2); }
.picker-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.picker-item:disabled { color: var(--muted); }


/* ===== Статистика ===== */
.stat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-box {
  padding: 20px 22px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 12px;
}
.stat-name { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.stat-big { font-size: 27px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.stat-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.stat-split {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.stat-line { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.stat-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-line > b { margin-left: auto; flex: 0 0 auto; font-weight: 550; }
.stat-line.dim, .stat-line.dim > b { color: var(--muted); }

/* Гистограмма по дням — на голом CSS, без библиотек: столбик тянется вверх
   долей от самого высокого дня. Число и дата живут вне поля столбиков —
   иначе высокий столбик выталкивал бы подпись за пределы карточки. */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.bar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bar-num { flex: 0 0 auto; font-size: 12px; font-weight: 550; }
.bar-col { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; }
.bar-fill {
  width: 100%; min-height: 3px;
  background: var(--accent); border-radius: 6px 6px 0 0;
}
.bar.zero .bar-fill { background: color-mix(in srgb, var(--muted) 25%, transparent); }
.bar.zero .bar-num { color: var(--muted); }
.bar.today .bar-fill { background: var(--ok); }
.bar-day { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

@media (max-width: 1100px) {
  .stat-cols { grid-template-columns: 1fr 1fr; }
  .bar-day { font-size: 11px; }
}
@media (max-width: 780px) {
  .stat-cols { grid-template-columns: 1fr; }
  .bars { height: 150px; gap: 3px; }
  .bar-day, .bar-num { font-size: 10px; }
  /* Четырнадцать дат в такую ширину не встают — оставляем каждую вторую,
     последний столбик (сегодня) при этом подписан. */
  .bar:nth-child(odd) .bar-day { visibility: hidden; }
}


/* Пояснение под прогнозом стояло вплотную к карточкам */
#statLimit { margin: 22px 0 0; padding: 16px 20px; line-height: 1.55; }
#statForecastNote { margin-top: 16px; }
.stat-cols + .hint { margin-top: 16px; }

/* ===== Расписание в той же системе, что «Сообщения» и «Группы» =====
   Общий каркас: карточка страницы → спокойные внутренние секции → одно
   акцентное состояние у выбранного элемента. */
#tab-schedule .schedule-setup { padding: 30px 32px; }
#tab-schedule .schedule-setup .card-head { display: block; max-width: none; margin-bottom: 20px; }
#tab-schedule .schedule-setup .card-head h2 { font-size: 19px; letter-spacing: -.01em; }
#tab-schedule .schedule-setup .card-head p { max-width: 720px; margin: 6px 0 0; line-height: 1.5; }

#tab-schedule .schedule-pace { margin: 0 0 18px; }
#tab-schedule .schedule-pace-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 12px;
}
#tab-schedule .schedule-pace-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
#tab-schedule .schedule-pace-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
#tab-schedule .schedule-pace-note { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Быстрый выбор темпа: цифры — главный ориентир, но карточки остаются
   спокойной частью общей системы, без стрелок, галочек и лишних плашек. */
#tab-schedule .presets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 0;
}
#tab-schedule .preset {
  min-height: 148px; padding: 18px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel-2); color: var(--text); box-shadow: none; cursor: pointer;
  text-align: left; transition: background .16s ease, border-color .16s ease;
}
#tab-schedule .preset-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }
#tab-schedule .preset-title { font-size: 15px; font-weight: 650; }
#tab-schedule .preset-state { visibility: hidden; color: var(--accent); font-size: 12px; font-weight: 600; }
#tab-schedule .preset-value {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
#tab-schedule .preset-range-dash { color: var(--muted); font-weight: 500; letter-spacing: 0; }
#tab-schedule .preset-value small { font-size: 15px; font-weight: 600; letter-spacing: 0; }
#tab-schedule .preset-note { color: var(--muted); font-size: 13px; line-height: 1.4; }
#tab-schedule .preset:hover {
  transform: none; color: var(--text); box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 2%, var(--panel-2));
}
#tab-schedule .preset:focus-visible {
  outline: 0; border-color: var(--accent); box-shadow: var(--ring);
}
#tab-schedule .preset.on {
  background: color-mix(in srgb, var(--accent) 3%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
#tab-schedule .preset.on .preset-title { color: var(--accent); }
#tab-schedule .preset.on .preset-state { visibility: visible; }

#tab-schedule .schedule-repeat {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 16px; padding: 18px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
}
#tab-schedule .schedule-repeat .setting-title { font-size: 16px; }
#tab-schedule .schedule-repeat .setting-note { margin-top: 4px; line-height: 1.45; }

#tab-schedule .schedule-basics { gap: 16px; }
#tab-schedule .schedule-setting {
  min-height: 208px; padding: 18px;
  border-radius: 14px;
  background: var(--panel-2);
  justify-content: flex-start; gap: 16px;
}
#tab-schedule .schedule-setting .setting-title { font-size: 16px; }
#tab-schedule .schedule-setting .setting-note { margin-top: 4px; line-height: 1.45; }
#tab-schedule .schedule-setting-copy { min-height: 67px; }
#tab-schedule .schedule-setting > .schedule-range,
#tab-schedule .schedule-setting > .schedule-single { margin-top: auto; }
#tab-schedule .schedule-range.schedule-control-group,
#tab-schedule .schedule-single.schedule-control-group {
  display: flex; min-width: 0; align-items: end; gap: 10px;
}
#tab-schedule .schedule-control-group .schedule-field { flex: 0 0 auto; margin: 0; }
#tab-schedule .schedule-control-group .schedule-field > span { line-height: 1; }
#tab-schedule .schedule-control-group .schedule-field > input[type="number"] {
  width: 96px; min-height: 40px; padding: 8px 12px;
  text-align: center; font-size: 15px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--panel) 35%, var(--panel-2));
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
}
#tab-schedule .schedule-control-group .schedule-field > .schedule-hour-select {
  width: 96px; min-width: 96px;
}
#tab-schedule .schedule-hour-select .picker-btn {
  min-height: 40px; padding: 8px 12px;
  background: color-mix(in srgb, var(--panel) 35%, var(--panel-2));
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  font-size: 15px; font-variant-numeric: tabular-nums;
}
#tab-schedule .schedule-hour-select .picker-value { text-align: center; }
#tab-schedule .schedule-control-group .schedule-field > input[type="number"]:hover {
  border-color: color-mix(in srgb, var(--muted) 48%, var(--border));
}
#tab-schedule .schedule-hour-select .picker-btn:hover { border-color: color-mix(in srgb, var(--muted) 48%, var(--border)); }
#tab-schedule .schedule-control-dash,
#tab-schedule .schedule-control-unit {
  flex: 0 0 auto; padding-bottom: 11px; color: var(--muted);
}
#tab-schedule .schedule-control-dash { font-size: 22px; font-weight: 500; line-height: 1; }
#tab-schedule .schedule-control-unit { font-size: 12.5px; }
#tab-schedule .schedule-daily-forecast {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--border);
}
#tab-schedule .schedule-daily-label { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; }
#tab-schedule .schedule-daily-note { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
#tab-schedule .schedule-daily-result { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
#tab-schedule .schedule-daily-value {
  color: var(--accent); font-size: 22px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#tab-schedule .schedule-daily-unit { color: var(--muted); font-size: 12px; line-height: 1.35; }
#tab-schedule .schedule-range {
  display: grid; grid-template-columns: repeat(2, max-content);
  align-items: end; gap: 12px; margin: 0;
}
#tab-schedule .schedule-single {
  display: flex; align-items: end; gap: 10px; margin: 0;
}
#tab-schedule .schedule-field { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; }
#tab-schedule .schedule-field > span { line-height: 1; }
#tab-schedule .schedule-single-note { padding-bottom: 11px; color: var(--muted); font-size: 12.5px; }

@media (max-width: 560px) {
  #tab-schedule .schedule-pace-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  #tab-schedule .presets { grid-template-columns: 1fr; }
  #tab-schedule .preset { min-height: 128px; }
  #tab-schedule .schedule-range { grid-template-columns: 1fr; }
  #tab-schedule .schedule-setting { min-height: 0; }
  #tab-schedule .schedule-setting-copy { min-height: 0; }
  #tab-schedule .schedule-daily-forecast { align-items: flex-start; flex-direction: column; }
  #tab-schedule .schedule-daily-result { justify-content: flex-start; flex-wrap: wrap; }
  #tab-schedule .schedule-single { align-items: flex-start; flex-direction: column; gap: 4px; }
  #tab-schedule .schedule-single-note { padding-bottom: 0; }
  #tab-schedule .schedule-repeat { align-items: flex-start; flex-direction: column; gap: 14px; }
}
#tab-schedule .schedule-advanced { margin-top: 16px; border-radius: 14px; }
#tab-schedule .schedule-advanced > summary { padding: 18px; }
#tab-schedule .schedule-advanced .setting-toggle {
  margin-right: 8px; margin-left: 8px; padding: 16px 10px;
  border-radius: 10px; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
#tab-schedule .schedule-advanced .setting-toggle:hover,
#tab-schedule .schedule-advanced .setting-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  outline: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
#tab-schedule .schedule-advanced .setting-toggle.on .setting-title { color: var(--accent); }
#tab-schedule .scheduler-card {
  margin-top: 0; padding: 30px 32px;
  background: var(--panel); border-color: var(--border);
}

/* Импорт аккаунтов: выбор способа остаётся коротким, а тяжёлые файлы — в отдельном
   понятном окне. Так список не создаёт «пустые» аккаунты до реального действия. */
.ask-box.account-add-chooser {
  width: min(720px, calc(100vw - 40px)); max-width: 720px;
  padding: 30px;
}
.account-add-chooser-head { max-width: 530px; }
.account-add-chooser-kicker {
  display: block; margin-bottom: 8px; color: var(--accent); font-size: var(--fs-xs);
  font-weight: 750; letter-spacing: .08em;
}
.account-add-chooser h3 { margin-bottom: 8px; font-size: var(--fs-xl); letter-spacing: -.02em; }
.account-add-chooser p { max-width: 520px; margin-bottom: 0; line-height: 1.55; }
.account-add-modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 28px;
}
.account-add-modes > button {
  min-height: 172px; padding: 20px; text-align: left;
  color: var(--text); background: var(--panel-2); border-color: var(--border);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 18px; border-radius: var(--r-lg); transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.account-add-modes > button:hover:not(:disabled),
.account-add-modes > button:focus-visible {
  color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border)); outline: 0;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.account-add-mode-icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.account-add-mode-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-add-mode-copy { display: grid; gap: 7px; min-width: 0; }
.account-add-modes b { font-size: var(--fs-lg); line-height: 1.25; }
.account-add-mode-copy span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; }
.account-add-chooser-footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.account-import-box { width: min(640px, calc(100vw - 32px)); }
.account-import-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-import-head h3 { margin-bottom: 6px; }
.account-import-head p { margin: 0; }
.account-import-drop {
  margin-top: 20px; min-height: 172px; padding: 25px 18px; border: 1px dashed var(--border);
  border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.account-import-drop:hover, .account-import-drop.dragging, .account-import-drop:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); outline: 0;
}
.account-import-drop strong { color: var(--text); font-size: 15px; }
.account-import-drop span, .account-import-drop small { font-size: 12.5px; }
.account-import-drop small { color: var(--muted); }
.link-btn { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: inherit; }
.link-btn:hover { text-decoration: underline; }
.account-import-files { margin-top: 14px; max-height: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.account-import-files-title { padding: 9px 12px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--border); }
.account-import-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 12px; }
.account-import-file + .account-import-file { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.account-import-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.account-import-result { min-height: 18px; }
.account-import-actions { justify-content: flex-end; margin-top: 20px; }

@media (max-width: 620px) {
  .folder-group-picker { grid-template-columns: 1fr; }
  .folder-group-library-tools { grid-template-columns: 1fr; }
  .folder-group-list { min-height: 240px; max-height: 360px; }
  .ask-box.account-add-chooser { width: min(100vw - 24px, 520px); padding: 22px; }
  .account-add-modes { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .account-add-modes > button { min-height: 96px; padding: 16px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .account-add-mode-copy { gap: 4px; }
  .account-add-chooser-footer { margin-top: 20px; }
  .account-import-drop { min-height: 150px; }
}

@media (max-width: 900px) {
  #tab-schedule .schedule-account-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  #tab-schedule .schedule-account-lane-target { grid-column: 1 / -1; }
  #tab-schedule .schedule-setup,
  #tab-schedule .scheduler-card { padding: 22px; }
  #tab-schedule .presets { gap: 10px; }
}

/* Единый компонент основных настроек расписания. Геометрия повторяет референс:
   крупная спокойная карточка, пояснение и одинаковый ряд подписанных полей. */
#tab-schedule .schedule-basics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
#tab-schedule .schedule-basics > .schedule-setting {
  min-height: 188px;
  padding: 24px 26px;
  gap: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
#tab-schedule .schedule-basics > .schedule-setting:last-child { grid-column: auto; }
#tab-schedule .schedule-basics .schedule-setting-copy { min-height: 0; }
#tab-schedule .schedule-basics .setting-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}
#tab-schedule .schedule-basics .setting-note {
  max-width: 44ch;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}
#tab-schedule .schedule-basics .schedule-range,
#tab-schedule .schedule-basics .schedule-single {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: nowrap;
}
#tab-schedule .schedule-basics .schedule-field {
  display: grid;
  gap: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
#tab-schedule .schedule-basics .schedule-field > .schedule-hour-select {
  width: 104px;
  min-width: 104px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
#tab-schedule .schedule-basics .schedule-field > input[type="number"],
#tab-schedule .schedule-advanced .schedule-field > input[type="number"],
#tab-schedule .schedule-basics .schedule-hour-select .picker-btn {
  width: 104px;
  min-width: 104px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel));
  border-color: color-mix(in srgb, var(--muted) 16%, var(--border));
}
#tab-schedule .schedule-basics .schedule-field > input[type="number"]:hover,
#tab-schedule .schedule-advanced .schedule-field > input[type="number"]:hover,
#tab-schedule .schedule-basics .schedule-hour-select .picker-btn:hover {
  border-color: color-mix(in srgb, var(--muted) 30%, var(--border));
}
#tab-schedule .schedule-basics .schedule-hour-select .picker-btn { justify-content: space-between; }
#tab-schedule .schedule-basics .schedule-hour-select .picker-value { text-align: left; }
#tab-schedule .schedule-basics .schedule-control-dash {
  width: 32px;
  height: 2px;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 72%, var(--border));
  color: transparent;
  font-size: 0;
}
#tab-schedule .schedule-advanced .schedule-control-dash {
  width: 32px;
  height: 2px;
  padding: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 72%, var(--border));
  color: transparent;
  font-size: 0;
}
#tab-schedule .schedule-basics .schedule-control-unit {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
#tab-schedule .schedule-advanced .schedule-control-group {
  align-items: center;
  gap: 12px;
}
#tab-schedule .schedule-advanced .schedule-field { display: block; }
#tab-schedule .schedule-advanced .schedule-control-unit {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
#tab-schedule .schedule-basics .schedule-single .schedule-field > input[type="number"] {
  width: 124px;
  min-width: 124px;
}

@media (max-width: 1180px) {
  #tab-schedule .schedule-basics { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #tab-schedule .schedule-basics > .schedule-setting {
    min-height: 0;
    padding: 20px;
  }
  #tab-schedule .schedule-basics .setting-title { font-size: 18px; }
  #tab-schedule .schedule-basics .schedule-range,
  #tab-schedule .schedule-basics .schedule-single { flex-wrap: wrap; }
  #tab-schedule .schedule-basics .schedule-field > input[type="number"],
  #tab-schedule .schedule-basics .schedule-field > .schedule-hour-select,
  #tab-schedule .schedule-basics .schedule-hour-select .picker-btn {
    width: 100px;
    min-width: 100px;
  }
  #tab-schedule .schedule-basics .schedule-control-dash { width: 20px; }
  #tab-schedule .schedule-basics .schedule-single .schedule-field > input[type="number"] {
    width: 112px;
    min-width: 112px;
  }
}

/* ===== Расписание: создание → настройки → очередь ===== */
#tab-schedule .schedule-mini-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
}
#tab-schedule .schedule-mini-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#tab-schedule .schedule-mini-tab:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
  color: var(--text);
}
#tab-schedule .schedule-mini-tab:focus-visible { outline: 0; box-shadow: var(--ring); }
#tab-schedule .schedule-mini-tab.active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  color: var(--text);
}
#tab-schedule .schedule-mini-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
#tab-schedule .schedule-mini-tab.active .schedule-mini-index {
  background: var(--accent-solid, var(--accent));
  color: white;
}
#tab-schedule .schedule-mini-tab b,
#tab-schedule .schedule-mini-tab small { display: block; }
#tab-schedule .schedule-mini-tab b { font-size: 14px; line-height: 1.3; }
#tab-schedule .schedule-mini-tab small {
  margin-top: 3px;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-schedule .schedule-step-panel[hidden] { display: none; }
#tab-schedule .schedule-step-panel > .card:first-child { margin-top: 0; }
#tab-schedule .schedule-step-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#tab-schedule .schedule-create-head,
#tab-schedule .schedule-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
#tab-schedule .schedule-create-head > div,
#tab-schedule .schedule-queue-head > div { min-width: 0; }
#tab-schedule .schedule-folder-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
#tab-schedule .schedule-folder-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
}
#tab-schedule .schedule-folder-search {
  display: grid;
  gap: 6px;
  width: min(460px, 100%);
  color: var(--muted);
  font-size: 12px;
}
#tab-schedule .schedule-folder-search input { width: 100%; min-height: 44px; }
#tab-schedule .schedule-folder-actions { display: flex; gap: 8px; }
#tab-schedule .schedule-folder-actions > button { min-height: 44px; }
#tab-schedule .schedule-folder-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(48vh, 480px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#tab-schedule .schedule-folder-toggle {
  min-height: 88px;
  padding: 14px;
  border-color: var(--border);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
#tab-schedule .schedule-folder-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
#tab-schedule .schedule-folder-toggle input { width: 20px; height: 20px; }
#tab-schedule .schedule-folder-toggle-copy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#tab-schedule .schedule-folder-toggle-copy b,
#tab-schedule .schedule-folder-toggle-copy small { grid-column: 1; }
#tab-schedule .schedule-folder-toggle-copy .lang-chip { grid-column: 2; grid-row: 1 / span 2; }
#tab-schedule .schedule-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
#tab-schedule .schedule-launch-actions { display: flex; gap: 10px; }

#tab-schedule .schedule-queue-card { padding: 24px; }
#tab-schedule .schedule-queue-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--r-md);
  background: var(--border);
}
#tab-schedule .schedule-queue-summary > span {
  display: grid;
  align-content: center;
  min-height: 74px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
#tab-schedule .schedule-queue-summary b,
#tab-schedule .schedule-queue-summary small { display: block; }
#tab-schedule .schedule-queue-summary b {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-schedule .schedule-queue-summary small { margin-top: 4px; color: var(--muted); font-size: 11px; }
#tab-schedule .schedule-queue-summary.empty { grid-template-columns: 1fr; }
#tab-schedule .schedule-account-lanes {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  margin: 10px 0 12px;
}
#tab-schedule .schedule-account-lane {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.5fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}
#tab-schedule .schedule-account-lane-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
#tab-schedule .schedule-account-lane-name i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); }
#tab-schedule .schedule-account-lane-name b,
#tab-schedule .schedule-account-lane-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-schedule .schedule-account-lane-target,
#tab-schedule .schedule-account-lane time { color: var(--muted); font-size: 12px; }
#tab-schedule .schedule-account-lane time { color: var(--text); font-weight: 700; white-space: nowrap; }
#tab-schedule .schedule-account-lane.offline { opacity: .62; }
#tab-schedule .schedule-account-lane.offline .schedule-account-lane-name i { background: var(--muted); }
#tab-schedule .schedule-issues {
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 5%, var(--panel-2));
}
#tab-schedule .schedule-issues.clear {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: color-mix(in srgb, var(--ok) 4%, var(--panel-2));
}
#tab-schedule .schedule-issues > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}
#tab-schedule .schedule-issues > summary::-webkit-details-marker { display: none; }
#tab-schedule .schedule-issues > summary > span:first-child { min-width: 0; }
#tab-schedule .schedule-issues > summary b,
#tab-schedule .schedule-issues > summary small { display: block; }
#tab-schedule .schedule-issues > summary b { font-size: 13px; }
#tab-schedule .schedule-issues > summary small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-schedule .schedule-issues-count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  color: var(--warn);
  font-size: 12px;
  font-weight: 750;
}
#tab-schedule .schedule-issues.clear .schedule-issues-count {
  background: color-mix(in srgb, var(--ok) 14%, var(--panel));
  color: var(--ok);
}
#tab-schedule .schedule-issues-list {
  max-height: 230px;
  overflow-y: auto;
  padding: 0 14px 12px;
  scrollbar-gutter: stable;
}
#tab-schedule .schedule-issue-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
#tab-schedule .schedule-issue-row > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warn) 14%, var(--panel));
  color: var(--warn);
  font-size: 10px;
  font-weight: 750;
}
#tab-schedule .schedule-issue-row p { margin: 1px 0 0; color: var(--text); font-size: 12px; line-height: 1.45; }
#tab-schedule .schedule-queue-table {
  max-height: min(55vh, 560px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#tab-schedule .schedule-queue-table-head,
#tab-schedule .schedule-queue-row {
  display: grid;
  grid-template-columns: 54px minmax(210px, 1.45fr) minmax(120px, .7fr)
    minmax(150px, .9fr) minmax(110px, .62fr) minmax(180px, 1fr);
  align-items: center;
  min-width: 900px;
}
#tab-schedule .schedule-queue-table-head {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 40px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#tab-schedule .schedule-queue-table-head > span,
#tab-schedule .schedule-queue-cell { padding: 9px 11px; }
#tab-schedule .schedule-queue-row {
  min-height: 72px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
#tab-schedule .schedule-queue-row:last-child { border-bottom: 0; }
#tab-schedule .schedule-queue-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--panel-2)); }
#tab-schedule .schedule-queue-cell { min-width: 0; color: var(--muted); font-size: 11px; }
#tab-schedule .schedule-queue-cell.timing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
}
#tab-schedule .schedule-queue-time-value {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#tab-schedule .schedule-queue-cell.order {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
#tab-schedule .schedule-queue-primary,
#tab-schedule .schedule-queue-stack { display: grid; min-width: 0; gap: 3px; }
#tab-schedule .schedule-queue-primary > a,
#tab-schedule .schedule-queue-primary > span,
#tab-schedule .schedule-queue-primary > b,
#tab-schedule .schedule-queue-stack > b {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-schedule .schedule-queue-primary .lang-chip { justify-self: start; margin-top: 2px; }
#tab-schedule .schedule-queue-stack > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-schedule .schedule-queue-cell.status b { color: var(--accent); }
#tab-schedule .schedule-queue-row.sent .schedule-queue-cell.status b { color: var(--ok); }
#tab-schedule .schedule-queue-row.waiting .schedule-queue-cell.status b { color: var(--warn); }
#tab-schedule .schedule-queue-row.error .schedule-queue-cell.status b { color: var(--err); }
#tab-schedule .schedule-queue-row.error { background: color-mix(in srgb, var(--err) 4%, var(--panel-2)); }
#tab-schedule .schedule-queue-reset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 5px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  opacity: .82;
  flex: 0 0 26px;
}
#tab-schedule .schedule-queue-reset-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
#tab-schedule .schedule-queue-reset-icon:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 1; }
#tab-schedule .schedule-queue-reset-icon:disabled { cursor: wait; opacity: .5; }

@media (max-width: 900px) {
  #tab-schedule .schedule-folder-list { grid-template-columns: 1fr; }
  #tab-schedule .schedule-folder-tools { align-items: stretch; flex-direction: column; }
  #tab-schedule .schedule-folder-search { width: 100%; }
  #tab-schedule .schedule-queue-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-schedule .schedule-queue-table { max-height: min(58vh, 620px); border: 0; }
  #tab-schedule .schedule-queue-table-head { display: none; }
  #tab-schedule .schedule-queue-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  #tab-schedule .schedule-queue-cell { display: grid; gap: 4px; padding: 10px 12px; }
  #tab-schedule .schedule-queue-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  #tab-schedule .schedule-queue-cell.order { grid-row: 1 / span 3; align-self: stretch; align-content: center; }
  #tab-schedule .schedule-queue-cell.group { grid-column: 2 / -1; }
  #tab-schedule .schedule-queue-cell.status { grid-column: 2 / -1; }
}

@media (max-width: 620px) {
  #tab-schedule .schedule-mini-tabs { gap: 5px; padding: 5px; }
  #tab-schedule .schedule-mini-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 68px;
    padding: 8px 5px;
    text-align: center;
  }
  #tab-schedule .schedule-mini-index { width: 26px; height: 26px; }
  #tab-schedule .schedule-mini-tab b { font-size: 12px; }
  #tab-schedule .schedule-mini-tab small { display: none; }
  #tab-schedule .schedule-create-head,
  #tab-schedule .schedule-queue-head,
  #tab-schedule .schedule-step-actions,
  #tab-schedule .scheduler-row { align-items: stretch; flex-direction: column; }
  #tab-schedule .schedule-folder-count { align-self: flex-start; }
  #tab-schedule .schedule-folder-actions,
  #tab-schedule .schedule-launch-actions { display: grid; grid-template-columns: 1fr; }
  #tab-schedule .schedule-folder-actions > button,
  #tab-schedule .schedule-launch-actions > button,
  #tab-schedule .schedule-step-actions > button { width: 100%; min-height: 46px; }
  #tab-schedule .schedule-queue-card { padding: 16px; }
  #tab-schedule .schedule-queue-summary { grid-template-columns: 1fr 1fr; }
  #tab-schedule .schedule-queue-summary > span { min-height: 68px; padding: 10px; }
  #tab-schedule .schedule-queue-row { grid-template-columns: 42px minmax(0, 1fr); }
  #tab-schedule .schedule-queue-cell.order { grid-column: 1; grid-row: 1 / span 6; padding: 8px; }
  #tab-schedule .schedule-queue-cell.group,
  #tab-schedule .schedule-queue-cell.folder,
  #tab-schedule .schedule-queue-cell.account,
  #tab-schedule .schedule-queue-cell.timing,
  #tab-schedule .schedule-queue-cell.status { grid-column: 2; }
  #tab-schedule .schedule-issues > summary small { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  #tab-schedule .schedule-mini-tab,
  #tab-schedule .schedule-folder-toggle { transition: none; }
}

/* Рабочее пространство расписаний: список слева, папки выбранного расписания справа. */
#tab-schedule #scheduleGuide {
  margin-bottom: 22px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
}
#tab-schedule #scheduleGuide .card-head { margin: 0; }
#tab-schedule #scheduleGuide h2 { color: var(--text); font-size: 22px; }
#tab-schedule .schedule-guide-action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-color: var(--border);
  background: var(--panel);
}
#tab-schedule .schedule-guide-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#tab-schedule .guide-action-label { white-space: nowrap; }
#tab-schedule .schedule-mini-tabs {
  gap: 0;
  margin-bottom: 24px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
#tab-schedule .schedule-mini-tab {
  min-height: 56px;
  padding: 8px 14px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
#tab-schedule .schedule-mini-tab:hover { background: transparent; }
#tab-schedule .schedule-mini-tab.active {
  border-color: var(--accent);
  background: transparent;
}
#tab-schedule .schedule-mini-index { width: 28px; height: 28px; }

#tab-schedule .schedule-folders-card {
  padding: 0;
  overflow: hidden;
  border-color: var(--border);
}
#tab-schedule .schedule-create-head {
  align-items: center;
  margin: 0;
  padding: 28px 30px 24px;
  border-bottom: 1px solid var(--border);
}
#tab-schedule .schedule-create-head h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
#tab-schedule .schedule-create-head > button { min-height: 44px; padding-inline: 18px; }
#tab-schedule .schedule-create-head > button,
#tab-schedule .schedule-runbar-actions > button,
#tab-schedule .schedule-folder-actions > button,
#tab-schedule .schedule-editor-head > button,
#tab-schedule .schedule-step-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 650;
}
#tab-schedule .schedule-action-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#tab-schedule .schedule-action-label { white-space: nowrap; }
#tab-schedule .schedule-icon-action {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}
#tab-schedule .schedule-secondary-action {
  border-color: var(--border-control);
  background: var(--panel-2);
  color: var(--text);
}
#tab-schedule .schedule-secondary-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border-control));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

#tab-schedule .schedule-builder {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#tab-schedule .schedule-builder-sidebar {
  display: block;
  min-width: 0;
  padding: 14px 30px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
#tab-schedule .schedule-list {
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  max-height: none;
  overflow-x: auto;
  margin: 0;
  padding: 0 0 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#tab-schedule .schedule-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name pace" "count pace";
  align-items: center;
  min-height: 68px;
  padding: 12px 13px;
  border-color: transparent;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
}
#tab-schedule .schedule-list-item::before { content: none; }
#tab-schedule .schedule-list-item:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
#tab-schedule .schedule-list-item.active {
  border-color: transparent;
  background: var(--selection-bg);
  box-shadow: none;
}
#tab-schedule .schedule-list-item.running .schedule-list-pace { color: var(--ok); }
#tab-schedule .schedule-list-item b { grid-area: name; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#tab-schedule .schedule-list-item small { grid-area: count; margin-top: 4px; color: var(--muted); font-size: 11px; }
#tab-schedule .schedule-list-pace {
  grid-area: pace;
  margin-left: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
#tab-schedule .schedule-runbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 14px 30px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
#tab-schedule .schedule-runbar-copy { display: flex; align-items: center; min-width: 0; }
#tab-schedule .schedule-runbar-copy > span:last-child { display: flex; flex-direction: column; min-width: 0; }
#tab-schedule .schedule-runbar-copy b { color: var(--text); font-size: 15px; }
#tab-schedule .schedule-runbar-copy small { margin-top: 5px; color: var(--muted); font-size: 12px; }
#tab-schedule .schedule-runbar-actions { display: flex; gap: 10px; flex: 0 0 auto; }
#tab-schedule .schedule-runbar-actions > button { min-height: 46px; padding-inline: 18px; }

#tab-schedule .schedule-builder-editor { min-width: 0; padding: 28px 30px 24px; }
#tab-schedule .schedule-builder-editor[hidden] { display: none; }
#tab-schedule .schedule-editor-head {
  align-items: end;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
#tab-schedule .schedule-name-field { max-width: 580px; }
#tab-schedule .schedule-name-field > span { margin-bottom: 8px; font-size: 12px; font-weight: 650; }
#tab-schedule .schedule-name-field input { min-height: 48px; font-size: 15px; }
#tab-schedule .schedule-editor-head > button {
  flex: 0 0 auto;
  min-height: 44px;
}
#tab-schedule .schedule-editor-head > .schedule-danger-action {
  border-color: color-mix(in srgb, var(--err) 52%, var(--border-control));
  background: color-mix(in srgb, var(--err) 8%, var(--panel));
  color: var(--err);
}
#tab-schedule .schedule-editor-head > .schedule-danger-action:hover:not(:disabled) {
  border-color: var(--err);
  background: color-mix(in srgb, var(--err) 15%, var(--panel));
}
#tab-schedule .schedule-folder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
}
#tab-schedule .schedule-folder-heading h3 { margin: 0; color: var(--text); font-size: 18px; }
#tab-schedule .schedule-folder-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
#tab-schedule .schedule-folder-tools {
  margin: 16px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
#tab-schedule .schedule-folder-actions { align-items: center; }
#tab-schedule .schedule-folder-actions .link-btn { min-height: 44px; padding-inline: 12px; }
#tab-schedule .schedule-folder-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(40vh, 380px);
  padding: 0 6px 0 0;
  border: 0;
}
#tab-schedule .schedule-folder-toggle {
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel-2) 64%, var(--panel));
}
#tab-schedule .schedule-folder-toggle:hover {
  border-color: var(--border-control);
  background: var(--panel-2);
}
#tab-schedule .schedule-folder-toggle.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
}
#tab-schedule .schedule-folder-toggle-copy b { font-size: 14px; }
#tab-schedule .schedule-folder-toggle-copy small { margin-top: 5px; font-size: 12px; }
#tab-schedule .schedule-folder-toggle-state { padding-left: 16px; font-size: 12px; }
#tab-schedule .schedule-step-actions {
  margin-top: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}

@media (max-width: 900px) {
  #tab-schedule .schedule-builder-editor { padding-inline: 18px; }
  #tab-schedule .schedule-runbar { padding-inline: 18px; }
}

@media (max-width: 720px) {
  #tab-schedule .schedule-create-head { align-items: stretch; flex-direction: column; padding: 18px; }
  #tab-schedule .schedule-create-head > button { width: 100%; }
  #tab-schedule .schedule-builder-sidebar { padding: 16px; }
  #tab-schedule .schedule-list { grid-auto-columns: minmax(210px, 82vw); max-height: none; }
  #tab-schedule .schedule-runbar { align-items: stretch; flex-direction: column; gap: 14px; }
  #tab-schedule .schedule-runbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #tab-schedule .schedule-builder-editor { padding: 18px 16px; }
  #tab-schedule .schedule-folder-heading { align-items: flex-start; }
  #tab-schedule .schedule-folder-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #tab-schedule .schedule-mini-tabs { padding: 0; }
  #tab-schedule .schedule-mini-tab { min-height: 58px; }
  #tab-schedule .schedule-editor-head { align-items: stretch; flex-direction: column; }
  #tab-schedule .schedule-editor-head > button { width: 100%; }
  #tab-schedule .schedule-folder-heading { flex-direction: column; gap: 10px; }
  #tab-schedule .schedule-folder-tools { align-items: stretch; }
  #tab-schedule .schedule-folder-actions { grid-template-columns: 1fr 1fr; }
  #tab-schedule .schedule-runbar-actions { grid-template-columns: 1fr; }
  #tab-schedule .schedule-runbar-actions > button { width: 100%; min-height: 48px; }
  #tab-schedule .schedule-folder-toggle { align-items: flex-start; min-height: 82px; }
  #tab-schedule .schedule-folder-toggle-copy { grid-template-columns: minmax(0, 1fr); }
  #tab-schedule .schedule-folder-toggle-copy .lang-chip { grid-column: 1; grid-row: auto; justify-self: start; }
  #tab-schedule .schedule-folder-toggle-state { margin-left: 30px; padding: 0; }
}