/* ===== Палитра/токены — "Стеклянный" (glass) style, 2026-09-02 =====
   Перекраска по запросу пользователя ("в остальном - можно брать и
   обстиливать живой проект который в работе") — ЧИСТО визуальный
   рестайлинг по образцу согласованного макета (Обзор/Фразы/Семантика):
   значения переменных + точечные добавления (blur, градиент, стрелка
   у select) у карточек/полей/кнопок. Компоновка (sidebar слева / content
   справа, вкладки, структура index.php) НЕ менялась — тот же принцип, что
   и в предыдущем рестайле (см. историю этого файла): меняем только то, что
   красится через переменные и точечные правила, DOM/классы из app.js не
   трогаем. Ориентир — glass_overview.html: полупрозрачные "стеклянные"
   панели с blur поверх мягкого градиентного фона, вместо плоских
   непрозрачных панелей. */
:root {
  --bg: linear-gradient(135deg, #E8F0FF 0%, #F1E9FB 45%, #FCE7F1 100%);
  --blob-1: rgba(79,140,255,0.22);
  --blob-2: rgba(224,90,155,0.18);
  --glass-blur: blur(22px) saturate(160%);
  --glass-blur-sm: blur(14px) saturate(150%);
  --glass-highlight: rgba(255,255,255,0.65);

  --panel: rgba(255,255,255,0.76);
  --panel2: rgba(255,255,255,0.58);
  --panel3: rgba(255,255,255,0.40);
  --text: #14161F;
  --muted: #585F6F;
  --muted-light: #8991A2;
  --accent: #2F6FED;
  --accent-2: #6EA1FF;
  --accent-hover: #2159C4;
  --accent-soft: rgba(47,111,237,0.14);
  --accent-contrast: #ffffff;
  --good: #1E8E5A;
  --good-soft: rgba(30,142,90,0.15);
  --bad: #E23F35;
  --bad-soft: rgba(226,63,53,0.13);
  --warn: #C98A1E;
  --warn-soft: rgba(201,138,30,0.15);
  --border: rgba(20,25,55,0.09);
  --border-strong: rgba(20,25,55,0.18);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23585F6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(24,29,64,0.06);
  --shadow-md: 0 14px 38px rgba(24,29,64,0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Мягкие цветные "пятна" под стеклянными панелями — тот же приём, что и в
   согласованном макете (body::before/::after), только тут они статично
   фиксированы (position:fixed), не мешают скроллу и лежат ниже всего
   остального контента (z-index управляется через main/header, см. ниже). */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
body::before { width: 560px; height: 560px; top: -160px; left: -120px; background: var(--blob-1); }
body::after { width: 620px; height: 620px; bottom: -220px; right: -160px; background: var(--blob-2); }

header {
  position: relative;
  z-index: 2;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
header h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ---------- Шапка: брендинг слева (в духе двухстрочного лого Similarweb —
   иконка + название сверху, подпись помельче снизу) ---------- */
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.brand:hover .brand-text strong { color: var(--accent, #3b5bdb); }
/* Синий→красный градиент — та же пара цветов, что и в фавиконке (IN на
   диагональном градиенте): логотип в шапке и фавиконка теперь одна и та же
   визуальная марка, а не два случайно разных синих. */
.brand-mark {
  font-size: 19px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(155deg, #2F6FED, #fc3f1d);
  box-shadow: 0 4px 10px rgba(47,111,237,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 18px; height: 18px; }
/* Крупная версия — для логотипа на весь экран (страницы входа/регистрации,
   хедер лендинга), та же марка, просто больше. */
.brand-mark-lg { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 6px 16px rgba(47,111,237,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.brand-mark-lg svg { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.brand-text small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }

main { display: flex; min-height: calc(100vh - 53px); align-items: stretch; position: relative; z-index: 1; }

/* ---------- Sidebar ---------- */

.sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  background: var(--panel2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease, padding 0.15s ease;
}

/* Свёрнутое состояние (см. #sidebarToggleBtn в app.js) — список проектов
   прячется целиком, освобождая экран под таблицу позиций; сам переключатель
   всегда виден (сидит на границе сайдбара и контента), чтобы можно было
   развернуть обратно. Состояние запоминается в localStorage (per-браузер,
   как и все прочие чисто визуальные настройки этого дашборда). */
body.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  border-right: none;
  overflow: hidden;
}
.sidebar-toggle-btn {
  position: absolute;
  top: 24px;
  left: 280px;
  transform: translateX(-50%);
  width: 32px;
  height: 72px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  box-shadow: var(--shadow-md);
  transition: left 0.15s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.sidebar-toggle-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 4px 20px rgba(23, 26, 33, 0.12);
}
body.sidebar-collapsed .sidebar-toggle-btn { left: 0; }
.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-light);
  margin: 4px 2px 10px;
}
/* Поиск по списку проектов (.search-wrap в согласованном макете) — прямо
   над секцией "Проекты", как в макете; сама фильтрация — filterProjectList()
   в app.js, чисто на стороне клиента по уже загруженному списку. */
.project-search-wrap { position: relative; margin-bottom: 12px; }
.project-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted-light);
  pointer-events: none;
}
.project-search-wrap input { width: 100%; padding-left: 33px; }
.project-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 2px;
  color: var(--text);
  transition: background 0.12s ease;
}
.project-item:hover { background: var(--panel3); }
/* Активный проект — мягкая акцентная подложка (.proj-row.active в
   согласованном макете: background:var(--accent-tint)), а не сплошная
   заливка — старое решение (сплошной синий, "как в System Settings")
   было из до-стеклянного раунда и разошлось с макетом. */
.project-item.active { background: var(--accent-soft); }
.project-item.active .project-item-name { color: var(--text); font-weight: 700; }
.project-item.active small { color: var(--muted); }
.project-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* Бейдж видимости в строке проекта.
   10.09.2026: подложка больше НЕ повторяет цвет числа. Раньше у каждого
   бейджа фон был цветной заливкой того же тона (--good-soft/--warn-soft/
   --bad-soft), и в списке из десятка проектов сайдбар превращался в
   светофор: цветные пятна перетягивали внимание на себя, конкурировали с
   выделением активного проекта и мешали читать сами названия. Теперь
   подложка нейтральная и одинаковая у всех, а цветом остаётся ТОЛЬКО само
   число — оно и несёт смысл. Фон намеренно почти непрозрачный, а не
   полупрозрачный: строка активного проекта подсвечена синим, и
   полупрозрачная пилюля набрала бы этот оттенок, снова став цветной.
   Тонкая рамка даёт бейджу край на любом фоне строки. */
.project-badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.project-badge.good { color: var(--good); }
.project-badge.mid { color: var(--warn); }
.project-badge.bad { color: var(--bad); }
/* «—» это ОТСУТСТВИЕ данных, а не плохой показатель: красным его красить
   нельзя, иначе непроверенный проект выглядит как проваленный. */
.project-badge.none { color: var(--muted-light); }

/* Статус/группа-пилюля в таблицах "Фразы"/"Семантика" — согласованный макет
   красит только текст+подложку мягким акцентом (.status-tag/.group-tag в
   макете, одинаковые значения), а не оставляет обычный серый текст. */
.status-tag {
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.project-item-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-item small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-move-btn {
  display: none;
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  opacity: 0.65;
  box-shadow: none;
}
.project-move-btn:hover { background: var(--panel); opacity: 1; }
.project-item:hover .project-move-btn { display: block; }
.project-folder-items { padding-left: 8px; }
.custom-folder-actions { margin-left: auto; display: none; gap: 2px; }
.project-folder-title:hover .custom-folder-actions { display: inline-flex; }
.custom-folder-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.custom-folder-actions button:hover { background: var(--panel2); color: var(--text); }

/* ---------- Content ---------- */

.content { flex: 1; padding: 24px 32px; overflow-y: auto; min-width: 0; }

/* ---------- Form controls ---------- */

input, select, button, textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted-light); }

/* Стрелка у <select> — нативная стрелка браузера не в духе стеклянных полей
   остального интерфейса; появление кастомной стрелки. Сам элемент остаётся
   обычным <select> (опции/onchange не меняются), только его отрисовка. */
select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px 13px;
}
label.field-label, label.muted {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* Файловые поля (импорт CSV/XLSX) — нативная кнопка браузера ("Выберите
   файл") выглядела чужеродно рядом со скруглёнными полями остального
   интерфейса (жёсткие прямые углы, системный вид ОС, а не приложения).
   ::file-selector-button переопределяет именно эту кнопку-часть под общий
   стиль вторичной кнопки, само поле остаётся тем же input с нашей рамкой/
   радиусом — так что структура и поведение (accept=, change-хендлеры в
   app.js) не меняются, только внешний вид самого элемента. */
input[type="file"] {
  padding: 5px 5px 5px 6px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  margin-right: 10px;
  transition: background 0.12s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--panel2); }
input[type="file"] { background: var(--panel3); }

/* Чекбоксы — крупнее и со скруглёнными углами (в духе чекбоксов macOS/
   System Settings), а не мелкий системный квадратик браузера по умолчанию.
   accent-color меняет и "галочку", и заливку при отмеченном состоянии одним
   свойством, без псевдоэлементов — чекбокс остаётся настоящим
   input[type=checkbox] (та же семантика/события), просто крупнее и в цвет
   акцента приложения вместо синего по умолчанию у браузера. */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */

button {
  cursor: pointer;
  background: linear-gradient(155deg, var(--accent), var(--accent-2));
  border: 1px solid transparent;
  color: var(--accent-contrast);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(47,111,237,0.3);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
button:hover { background: linear-gradient(155deg, var(--accent-hover), var(--accent)); box-shadow: 0 4px 14px rgba(47,111,237,0.4); }
button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
button.secondary:hover { background: var(--panel2); border-color: var(--border-strong); }
button.ghost {
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 500;
  border-radius: 999px;
  box-shadow: none;
}
button.ghost:hover { background: var(--panel); color: var(--text); }
/* Цвет здесь — это семантика (предупреждение/опасность), а не заливка: в
   согласованном макете фон у всех "таблеток" шапки одинаково нейтральный,
   разным его делает только цвет текста/иконки (см. .gpill.danger в
   макете). */
button.ghost.danger { color: var(--bad); }
button.ghost.danger:hover { background: var(--bad-soft); color: var(--bad); }
button.danger-ghost {
  background: transparent;
  color: var(--bad);
  border: 1px solid transparent;
  font-weight: 500;
  box-shadow: none;
}
button.danger-ghost:hover { background: var(--bad-soft); border-color: var(--bad-soft); }
button.icon-btn {
  padding: 7px 9px;
  line-height: 1;
  box-shadow: none;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.small { padding: 5px 9px; font-size: 12px; }

/* ---------- Layout helpers ---------- */

.row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* Стеклянные панели — полупрозрачный фон + blur поверх градиентной подложки
   страницы, вместо плоской непрозрачной заливки. */
.card {
  position: relative;
  background: var(--panel2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
/* Карточка графика/распределения по топам — чуть более непрозрачное стекло,
   чтобы читаться как приподнятый блок на фоне остальных карточек. */
#statsCard {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.field > label { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* ---------- Главный экран: сводка по проектам ----------
   Карточки в духе списков macOS (System Settings/Finder/Контакты): цветная
   монограмма слева как индивидуальная "иконка" строки, чёткая иерархия
   текста (жирное название / приглушённый домен), тонкий разделитель перед
   строкой метаданных вместо второй границы, и едва заметная стрелка ">"
   в правом углу — то же визуальное обещание "это открывающийся ряд", что
   и у строк в System Settings, только выключено до момента ховера, чтобы
   не спорить с остальным содержимым карточки. */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.dashboard-card {
  position: relative;
  background: var(--panel2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Ховер — не "гасим" карточку затемнением фона (читалось как disabled-
   состояние), а слегка приподнимаем её тенью, как карточки в macOS/по
   образцу .engine-region-group выше: тень заметно больше и мягкий
   translateY, ощущение "карточка выныривает" под курсором. */
.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 29, 64, 0.14);
  border-color: var(--border-strong);
}
.dashboard-card:hover .dashboard-card-chevron { opacity: 1; transform: translateX(0); }
.dashboard-card-alert { background: var(--bad-soft); border-color: rgba(215, 0, 21, 0.12); }
.dashboard-card-alert:hover { box-shadow: 0 14px 30px rgba(215, 0, 21, 0.16); }

.dashboard-card-head { display: flex; align-items: center; gap: 12px; }
.dashboard-card-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(24,29,64,0.16), inset 0 1px 0 rgba(255,255,255,0.3);
}
.dashboard-card-titles { min-width: 0; flex: 1; }
.dashboard-card-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-card-domain { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-card-spark { flex-shrink: 0; opacity: 0.9; }

.dashboard-card-divider { height: 1px; background: var(--border); margin: 14px 0 12px; }

.dashboard-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dashboard-card-row-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dashboard-card-chevron {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted-light);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .16s ease, transform .16s ease;
}

/* ---------- Project header ---------- */

.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 16px;
}
.project-header h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
/* #webmasterDiagnosticsBanner переехал внутрь .project-header (см. app.js) —
   встаёт компактной "таблеткой" справа от названия проекта, как в
   согласованном макете, вместо отдельной полосы во всю ширину под
   заголовком. Для состояний с найденными проблемами (там есть бейдж,
   заголовок проблемы, кнопка "Показать все" и раскрывающийся список —
   в одну строку с названием проекта не поместится) — принудительно
   переносим на свою отдельную полную строку через :has(), с graceful
   деградацией в компактный вид на совсем старых браузерах без :has(). */
#webmasterDiagnosticsBanner { flex-shrink: 0; max-width: 100%; }
#webmasterDiagnosticsBanner:has(.diag-fatal, .diag-critical, .diag-possible, .diag-recommendation) {
  flex-basis: 100%;
}
.project-header .diag-banner { margin: 0; }
/* Названию проекта + плашке диагностики вдвоём тесно на узких экранах —
   не дожидаемся, пока сама строка начнёт переноситься по словам (тогда
   кнопка "Обновить"/"Показать все" может обрезаться по правому краю
   карточки): ниже этой ширины плашка сразу переезжает на свою строку. */
@media (max-width: 860px) {
  #webmasterDiagnosticsBanner { flex-basis: 100%; }
}
.project-header .muted { font-size: 13px; }
/* Название + домен в одну строку (как .page-title-block в согласованном
   макете — там второй строки с доменом вообще нет, он идёт сразу после
   названия). Макет не показывает кнопку удаления на этой странице вовсе —
   её саму убирать нельзя (единственный способ удалить проект), поэтому она
   вынесена из строки названия в компактную иконку в правом углу шапки:
   margin-left:auto забирает всё оставшееся место строки на себя, из-за
   этого баннер диагностики и иконка удаления всегда сбиваются в одну
   группу справа, а не расходятся по разным концам через space-between. */
.project-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.project-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.project-delete-icon-btn { margin-left: auto; flex-shrink: 0; padding: 7px 9px; }

/* ---------- Tabs ---------- */

/* Вкладки — стеклянная "таблетка"-контейнер с плавающими активными
   вкладками внутри (как в согласованном макете), вместо подчёркивания снизу.
   Клики/переключение панелей (.tab-panel/.hidden) не менялись — только то,
   как выглядит сама кнопка вкладки. */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel3);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  margin-bottom: 20px;
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 13px;
  margin-right: 0;
  border-radius: 10px;
  box-shadow: none;
}
.tab-btn:hover { color: var(--text); background: var(--panel3); border-color: transparent; }
.tab-btn.active { color: var(--accent); background: var(--panel); box-shadow: 0 1px 3px rgba(24,29,64,0.1); }
.tab-panel.hidden { display: none; }

/* ---------- Quick stats ---------- */

/* Единая полоса метрик вместо 7 отдельных карточек с рамкой и тенью каждая —
   так они всегда стоят в один ряд без переноса (проблема из отзыва: раньше
   7-я карточка при недостатке ширины съезжала на вторую строку сиротой).
   Один общий .card-контейнер (см. .stat-strip-card в разметке), внутри —
   плоские ячейки на flex с тонким разделителем слева у каждой, кроме первой,
   вместо тяжёлого бордера+тени на каждый блок. */
.stat-strip-card { padding: 16px 18px; }
.stat-grid { display: flex; gap: 0; }
.stat-card {
  flex: 1 1 0;
  min-width: 0; /* даёт ячейкам сжиматься ниже их content-width вместо переноса строки */
  padding: 0 18px;
  border-left: 1px solid var(--border);
}
.stat-card:first-child { padding-left: 0; border-left: none; }
.stat-card .stat-label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
.stat-card .stat-hint {
  color: var(--muted-light);
  font-size: 11.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* полный текст остаётся в title при наведении */
}

/* На узких экранах плоская строка становится тесной — переключаемся на сетку
   2 колонки в ряд (без разделителей, они тут не к месту) вместо сжатия
   текста в нечитаемую полоску. */
@media (max-width: 1150px) {
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
  .stat-card { border-left: none; padding: 0; }
  .stat-card:first-child { padding-left: 0; }
}

/* ---------- Section headers (Settings tab) ---------- */

.section-title { font-size: 14.5px; font-weight: 700; margin: 0 0 3px 0; display: flex; align-items: center; gap: 6px; }
.section-desc { color: var(--muted); font-size: 12.5px; margin: 0 0 14px 0; max-width: 720px; }
.settings-section { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--panel3);
  color: var(--muted);
}
.badge-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- Table ---------- */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; background: var(--panel); position: sticky; top: 0; z-index: 1; }
tbody tr:hover td { background: var(--panel2); }
td:first-child, th:first-child { white-space: normal; min-width: 220px; }
.pos-good { color: var(--good); font-weight: 700; }
.pos-bad { color: var(--bad); }
.pos-none { color: var(--muted-light); }
.muted { color: var(--muted); font-size: 13px; }
a { color: var(--accent); text-decoration: none; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
#chartWrap { max-width: 900px; }
.empty { color: var(--muted); padding: 60px 20px; text-align: center; font-size: 14px; }
/* max-height + overflow:auto (обе оси СРАЗУ на одном контейнере) — не просто
   "красивая рамка": это то, что вообще заставляет работать "position: sticky"
   у th выше. Если оставить только overflow-x:auto (как было раньше), браузер
   по спецификации CSS Overflow всё равно молча меняет вычисленный overflow-y
   с 'visible' на 'auto' (нельзя, чтобы одна ось была visible, а другая — нет)
   — из-за этого .table-scroll сам становится ближайшим "скролл-контейнером"
   для sticky-заголовков внутри, но т.к. высота у него ничем не ограничена, он
   сам никогда не скроллится — весь блок целиком (и "прилипший" thead вместе
   с ним) просто уезжает вверх при скролле страницы, как обычный элемент, и
   заголовки колонок теряются из виду. Явная max-height решает это — теперь
   .table-scroll САМ по-настоящему скроллится (появляется свой скролл, когда
   строк много), и sticky-заголовки корректно остаются на месте относительно
   НЕГО, пока скроллится тело таблицы. Проверено визуально через headless
   Chromium (Playwright) — до фикса position:sticky не работал вовсе (шапка
   таблицы уезжала вместе со строками), после — работает.
*/
.table-scroll { overflow: auto; max-height: 70vh; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Мгновенная подсказка с URL при наведении на позицию (см. showPosUrlTooltip
   в app.js) — замена нативному title у браузера, который всплывает только
   через ~1-1.5 сек. position:fixed — специально не absolute внутри таблицы,
   чтобы не обрезалось горизонтальным скроллом .table-scroll. */
.pos-url-tooltip {
  position: fixed;
  z-index: 1000;
  background: #1f2430;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* SHIFT+клик по галочке (выделение диапазона строк — см. wireShiftClickCheckboxes
   в app.js) в Safari/macOS без этого триггерит штатное выделение текста
   вместо клика по чекбоксу — браузер трактует Shift+клик как "расширить
   выделение", как при выделении текста в редакторе, и клик до чекбокса
   иногда просто не долетает. user-select: none на самих таблицах с
   галочками убирает эту интерференцию, ничего в самих таблицах всё равно
   осмысленно выделять текстом не нужно (кроме самой фразы — она по-прежнему
   выделяется, см. ниже точечное исключение). */
#posTable, #keywordsMgmtTable {
  -webkit-user-select: none;
  user-select: none;
}
#posTable td:nth-child(2), #keywordsMgmtTable td:nth-child(2) {
  -webkit-user-select: text;
  user-select: text; /* сама фраза — единственное, что в этих таблицах разумно копировать выделением */
}

/* Заголовки таблицы фраз, кликабельные для сортировки (Фраза / Частота /
   дата проверки) — см. handleColumnSortClick() в app.js. */
.pos-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.pos-th-sortable:hover {
  color: var(--accent, #4f5fe0);
}

/* Строка статуса подключения Яндекс.Вебмастера — цветная точка + текст, в
   духе status-row у конкурентов ("Интеграция": зелёная/красная точка). */
.wm-status-row .wm-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wm-dot-ok { background: var(--good, #15803d); }
.wm-dot-warn { background: #b8860b; }
.wm-dot-off { background: var(--muted-light, #9aa1ae); }

/* Колонка с галочками — по умолчанию у th/td общий padding 9px 10px (см.
   правило "th, td" выше), из-за чего вокруг маленького чекбокса получались
   широкие поля с обеих сторон. Сужаем отступы вдвое. Селектор по классу
   (.pos-select-col), а не :first-child — колонка с галочками не всегда
   первая и не всегда вообще есть (например, у таблицы позиций её нет в
   режиме просмотра конкурента), :first-child в таких случаях случайно
   ужимал бы совсем другую колонку ("Фраза").
   НАСТОЯЩАЯ причина, почему колонка всё равно оставалась широкой несмотря
   на предыдущую попытку сузить: есть более раннее общее правило
   "td:first-child, th:first-child { min-width: 220px }" (рассчитанное на
   текстовые колонки других таблиц, например report.php) — оно било по
   галочке ровно потому, что она у нас тоже первая колонка, и min-width
   побеждает width при конфликте. Явно перебиваем min-width здесь. */
.pos-select-col {
  padding-left: 4px !important;
  padding-right: 4px !important;
  width: 30px !important;
  min-width: 30px !important;
  text-align: center;
}

/* Узкая колонка с порядковым номером (#) в таблицах рейтингов/лидеров —
   тот же принцип, что и у .pos-select-col выше: без сужения ей достаётся
   общий padding 9px 10px и min-width:220px от "td:first-child" (см.
   комментарий у .pos-select-col), из-за чего вокруг "1"/"12" получались
   неоправданно широкие поля. */
.rank-idx-col {
  padding-left: 6px !important;
  padding-right: 6px !important;
  width: 26px !important;
  min-width: 26px !important;
  text-align: center;
}

/* ---------- Таблица фраз: режим "оба поисковика сразу" ---------- */

.pos-nodata { color: var(--muted-light); text-align: center; background: var(--panel2); }
.engine-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.engine-badge-yandex { background: #fc3f1d; }
.engine-badge-google { background: #4285f4; }
.engine-badge-bing { background: #008373; }
tr.both-engine-row-second td { border-bottom: 2px solid var(--border-strong); }

/* ---------- Регионы и проверка (по строкам, сгруппировано по системе) ---------- */

.engine-region-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
.engine-region-group:last-child { margin-bottom: 0; }
.engine-region-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.engine-region-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.engine-region-icon-yandex { background: #fc3f1d; }
.engine-region-icon-google { background: #4285f4; }
.engine-region-icon-bing { background: #008373; }
.engine-region-title { font-weight: 700; font-size: 14.5px; }
.engine-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

/* Переключатель "Проверять" — визуально как iOS-style toggle switch вместо
   обычного чекбокса: та же семантика (checked/onchange не меняются, только
   внешний вид), но сразу видно вкл/выкл без надписи. appearance:none +
   псевдоэлементы, без картинок и JS — переключается плавной анимацией
   ползунка и цвета фона одним transition. */
.engine-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .18s ease;
}
.engine-toggle input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .18s ease;
}
.engine-toggle input[type="checkbox"]:checked {
  background: var(--accent);
}
.engine-toggle input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}
.engine-toggle input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(59,91,219,0.25));
}
.engine-toggle input[type="checkbox"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.region-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.region-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--panel2);
  font-size: 13px;
  transition: opacity 0.12s ease;
}
.region-row.region-row-disabled { opacity: 0.5; }
.region-row-check { cursor: pointer; flex-shrink: 0; }
.region-row-flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.region-row-name { flex: 1; font-weight: 600; }
.region-row-name .region-row-sub { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12px; }
.region-row-del { padding: 2px 8px; font-size: 12px; line-height: 1.4; flex-shrink: 0; }
.region-rows-empty { color: var(--muted-light); font-size: 12.5px; padding: 4px 2px; }
.region-add-row { margin-bottom: 0 !important; }

/* ---------- Таблица настроек региона (устройство/язык/глубина/периодичность/главный) ---------- */

.region-settings-table { font-size: 12.5px; }
.region-settings-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
.region-settings-table td { white-space: nowrap; vertical-align: middle; }
.region-settings-table select, .region-settings-table input[type="text"] {
  padding: 4px 6px; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel);
}
.region-settings-table input[type="text"] { width: 52px; }
.region-main-radio { cursor: pointer; }

/* ---------- Переключатель метрики графика (Видимость / Средняя) ---------- */

.chart-metric-tabs { display: flex; gap: 4px; }
.chart-metric-tab {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-weight: 600; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  box-shadow: none;
}
.chart-metric-tab:hover { background: var(--panel2); color: var(--text); }
.chart-metric-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Индикатор фоновой проверки (в шапке) ---------- */

/* #wordstatRunIndicator — тот же индикатор, что и для позиций, только для
   фоновой проверки частоты (kind='wordstat'). У него никогда не было своих
   стилей, только класс .hidden — пока не скрыт, span рендерился обычной
   строчной надписью без фона/spinner-обвязки и терялся среди остальных
   кнопок шапки. Теперь оба используют одни и те же правила. */
#checkRunIndicator, #wordstatRunIndicator {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; margin-right: 6px;
}
.check-run-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(59, 91, 219, 0.25); border-top-color: var(--accent);
  animation: check-run-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes check-run-spin { to { transform: rotate(360deg); } }
.check-run-stop-btn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11.5px;
  border: 1px solid var(--bad, #d64545);
  color: var(--bad, #d64545);
  background: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
}
.check-run-stop-btn:hover { background: var(--bad-soft, #fde8e8); }

/* ---------- Ячейка "в работе" (фоновая проверка ещё не дошла до неё) ----------
   Отдельная анимация фона у ячейки таблицы позиций — чтобы "проверка ещё
   идёт, результата пока нет" нельзя было спутать с обычным прочерком
   "проверили — не нашли". См. isCellPending()/positionCellHtml() в app.js. */
.pos-pending-cell {
  background: linear-gradient(
    100deg,
    var(--accent-soft) 30%,
    rgba(59, 91, 219, 0.22) 50%,
    var(--accent-soft) 70%
  );
  background-size: 200% 100%;
  animation: pos-pending-shimmer 1.4s ease-in-out infinite;
}
@keyframes pos-pending-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* .pos-pending (обёртка пульсации вокруг ⏳) убрана 2026-09-04 — глиф ⏳
   заменён на .inline-spinner везде по проекту (см. app.js), у него уже своя
   анимация (вращение), отдельная пульсация больше не нужна. */

/* ---------- Общие утилиты ---------- */

.hidden { display: none !important; }

/* ---------- Личные кабинеты: шапка, вход, папки клиентов, модалка смены пароля ---------- */

.header-user { display: flex; align-items: center; gap: 8px; }

/* ---------- Панель шапки — «облака» с мягкой тенью ----------
   10.09.2026, по образцу тулбаров Apple (Finder, Apple Music). Раньше это
   были плоские серые «призрачные» таблетки с приглушённым текстом: они
   сливались с фоном, и глазу было не за что зацепиться. Теперь каждая
   кнопка — светлая пилюля, чуть приподнятая над фоном двойной тенью
   (короткая жёсткая даёт край, длинная мягкая — сам подъём). Текст
   обычного цвета, а не серый: в тулбарах Apple подписи полноконтрастные,
   приглушают их только у неактивных элементов.

   Значки убраны отовсюду, кроме «Сброса очереди»: там точка — не
   украшение, а метка рубильника, единственного действия в шапке, которое
   обрывает работу. Цветом выделен только он, как красное «Очистить» у
   Apple: заливка остаётся нейтральной, красным становится текст.

   Правила намеренно ограничены .header-user — класс .ghost используется по
   всему приложению, и общий вид кнопок в других местах трогать не нужно. */
.header-user button.ghost.small {
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  border: 1px solid rgba(20, 25, 55, 0.06);
  font-weight: 500;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 1.5px rgba(20, 25, 55, 0.05), 0 4px 12px rgba(20, 25, 55, 0.08);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.header-user button.ghost.small:hover {
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 3px rgba(20, 25, 55, 0.07), 0 8px 22px rgba(20, 25, 55, 0.12);
}
/* Нажатие — короткий «провал» вниз, как у физической клавиши: без него
   пилюля с тенью выглядит нажимаемой, но не откликается. */
.header-user button.ghost.small:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(20, 25, 55, 0.06);
}
.header-user button.ghost.small.danger { color: var(--bad); }
.header-user button.ghost.small.danger:hover { background: #fff; color: var(--bad); }

/* Баланс и индикатор проверки — те же «облака», чтобы полоса шапки читалась
   как один набор элементов, а не как кнопки вперемешку с надписями. */
.header-user .header-check-balance {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 55, 0.06);
  box-shadow: 0 1px 1.5px rgba(20, 25, 55, 0.05), 0 4px 12px rgba(20, 25, 55, 0.08);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
}
/* Оранжевым баланс светился всегда — то есть цвет ничего не сообщал.
   Теперь он окрашивается, только когда действительно кончается. */
.header-user .header-check-balance.header-check-balance-low {
  color: var(--bad);
  font-weight: 600;
}
.header-user #checkRunIndicator,
.header-user #wordstatRunIndicator {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 55, 0.06);
  box-shadow: 0 1px 1.5px rgba(20, 25, 55, 0.05), 0 4px 12px rgba(20, 25, 55, 0.08);
  color: var(--accent);
  font-size: 12.5px;
  padding: 7px 14px;
}
.header-user-name { font-size: 13px; color: var(--muted); font-weight: 600; }
.header-user-name .role-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  vertical-align: middle;
}

/* ---------- Аватар-меню (Профиль/Клиенты/Рефералы/Смена пароля/Выход) ----------
   Круглая аватарка справа в шапке, по клику раскрывает выпадающее меню — по
   образцу правого верхнего угла в Topvisor/Similarweb, вместо ряда из пяти
   отдельных кнопок. См. #userMenuBtn/#userMenuDropdown в app.js. */
.user-menu { position: relative; }
.user-avatar-btn {
  background: none;
  border: none;
  padding: 2px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: none;
}
.user-avatar-btn:hover { background: var(--panel2); }
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(155deg, #8A6FE8, #B592F5);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
/* Аватар-меню — по образцу системного меню macOS.
   10.09.2026. Раньше пункты выглядели стопкой отдельных белых «кирпичей» с
   зазорами, а не строками меню. Виновато было глобальное правило button в
   этом же файле: оно вешает на ЛЮБУЮ кнопку синий градиент и тень
   (box-shadow: 0 4px 12px), а .user-menu-item гасил только background и
   border — тень оставалась и на покое, и на наведении. Отсюда и объёмные
   карточки. Теперь тень снимается явно, а строка ведёт себя как пункт
   системного меню: подсветка во всю ширину, светлый текст на акценте.

   Панель намеренно почти непрозрачная. Прежние 0.76 прозрачности пропускали
   сквозь меню то, что лежит под ним (на скриншоте сквозь пункты читались
   дата диагностики и кнопка «Обновить»), — в системном меню такого не
   бывает: размытие там сильное, а подложка плотная. */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 236px;
  background: rgba(252, 252, 254, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(20, 25, 55, 0.10);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(20, 25, 55, 0.20), 0 1px 3px rgba(20, 25, 55, 0.10);
  padding: 5px;
  z-index: 20;
}
.user-menu-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid rgba(20, 25, 55, 0.09);
}
.user-menu-header .header-user-name {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
/* Роль внутри меню — спокойная подпись под именем, а не яркая синяя пилюля:
   в шапке она конкурировала за внимание с самими пунктами. Правило
   намеренно ограничено .user-menu-header — в других местах .role-badge
   остаётся прежней. */
.user-menu-header .role-badge {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted-light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Без значков (10.09.2026, по просьбе): в системном меню иконки есть далеко
   не у всех пунктов, а разнокалиберные эмодзи давали пёстрый ряд картинок
   вместо спокойного списка. Отступ слева чуть больше прежнего — текст
   начинается там же, где раньше начиналась колонка значков, поэтому меню не
   «съезжает» к краю. */
.user-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 6px;
}
.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: none;
  outline: none;
}
.user-menu-item-danger { color: var(--bad); }
.user-menu-item-danger:hover,
.user-menu-item-danger:focus-visible {
  background: var(--bad);
  color: #fff;
  box-shadow: none;
}
.user-menu-divider {
  height: 1px;
  border: none;
  background: rgba(20, 25, 55, 0.09);
  margin: 5px 4px;
}

/* Остаток баланса проверок в шапке (см. #headerCheckBalance в index.php) —
   показывается только когда у аккаунта есть числовой (не безлимитный)
   баланс, см. renderHeaderUser() в app.js. Жёлтый акцент — это не ошибка, а
   нейтрально-предупреждающий "счётчик", который со временем убывает. */
.header-check-balance {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--warn);
  white-space: nowrap;
}
.header-check-balance.header-check-balance-low { color: var(--bad); }

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-box {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  padding: 32px 28px;
  position: relative;
  z-index: 1;
}
.login-title { font-size: 19px; margin: 0 0 2px; }
.login-error {
  background: var(--bad-soft);
  color: var(--bad);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.5px;
  margin-bottom: 14px;
}

.project-folder { margin-bottom: 4px; }
.project-folder-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  user-select: none;
}
.project-folder-title:hover { color: var(--text); }
.project-folder-title .folder-arrow { transition: transform 0.12s ease; font-size: 10px; }
.project-folder.collapsed .folder-arrow { transform: rotate(-90deg); }
.project-folder.collapsed .project-folder-items { display: none; }
.project-folder-count {
  margin-left: auto;
  background: var(--panel3);
  color: var(--muted);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 26, 33, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-box {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  padding: 24px;
}
.modal-box h3 { margin: 0 0 4px; font-size: 16px; }
.modal-box .modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
}

.clients-table-wrap { overflow-x: auto; }
.temp-password-box {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 10px;
}
.temp-password-box code {
  background: var(--panel3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  user-select: all;
}

/* ---------- Продающая главная страница (landing.php) ----------
   Опирается на те же токены дизайна (--bg/--panel/--accent/...), что и
   весь остальной интерфейс, — чтобы переход от рекламной страницы к
   личному кабинету не выглядел как смена другого сайта. */

.landing-body {
  margin: 0;
  background: var(--bg);
}

.landing-header {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: sticky;
  top: 0;
  z-index: 5;
}
.landing-header-inner {
  /* Никакого max-width — в отличие от остального контента (.landing-main,
     max-width:1080px), хедер занимает всю ширину окна целиком: лого прижато
     к левому краю, контакты — к правому, на любом экране, а не жмутся друг
     к другу посередине с пустыми полями по бокам на широких мониторах. */
  width: 100%;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.landing-logo { font-size: 18px; font-weight: 700; }
/* Деловой хедер: только логотип + контакты поддержки (email/телефон) — без
   кнопок входа/регистрации, они уже есть на первом экране (герой) ниже,
   дублировать их в хедере на каждой странице избыточно. */
.landing-header-contacts { display: flex; gap: 20px; flex-wrap: wrap; }
.landing-header-contact {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.landing-header-contact:hover { color: var(--accent); }
@media (max-width: 560px) {
  .landing-header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.landing-btn {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
}
.landing-btn:active { transform: translateY(1px); }
.landing-btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.landing-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.landing-btn-secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
}
.landing-btn-secondary:hover { background: var(--panel2); }
.landing-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.landing-btn-ghost:hover { background: var(--panel2); }
.landing-btn-lg { padding: 13px 26px; font-size: 15px; }

/* Явно переопределяем global "main { display: flex; ... }" (используется
   для раскладки сайдбар+контент в дашборде, см. выше) — иначе секции
   лендинга (герой/фичи/CTA) выстраивались бы в ряд по горизонтали, а не
   одна под другой, как задумано. */
.landing-main { display: block; max-width: 1080px; margin: 0 auto; padding: 0 24px; min-height: 0; }

.landing-hero { padding: 64px 0 48px; }
.landing-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .landing-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .landing-hero-cta { justify-content: center; }
}
.landing-hero-text { text-align: left; }
@media (max-width: 860px) { .landing-hero-text { text-align: center; } }
.landing-hero h1 {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 18px;
}
.landing-hero-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.landing-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.landing-hero-note { color: var(--muted-light); font-size: 13px; margin: 0; }

/* ---------- Карточка с графиком видимости (герой) ---------- */
.landing-hero-visual { display: flex; justify-content: center; }
.landing-chart-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  padding: 20px 22px 16px;
}
.landing-chart-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.landing-chart-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.landing-chart-stat { font-size: 20px; font-weight: 700; color: var(--good); }
.landing-chart-svg { width: 100%; height: auto; display: block; }
.landing-chart-grid { stroke: var(--border); stroke-width: 1; }
.landing-chart-grid-base { stroke: var(--border-strong); }
.landing-chart-axis-label { font-size: 10px; fill: var(--muted-light); }
.landing-chart-point-label { font-size: 12px; font-weight: 700; fill: var(--text); }
.landing-chart-line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.landing-chart-marker-start { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.landing-chart-marker-end { fill: var(--accent); }
.landing-chart-stop-start { stop-color: var(--accent); stop-opacity: 0.28; }
.landing-chart-stop-end { stop-color: var(--accent); stop-opacity: 0; }
.landing-chart-caption { color: var(--muted-light); font-size: 12px; margin: 8px 0 0; line-height: 1.5; }

/* ---------- Строка "работаем с Яндекс и Google" ---------- */
.landing-engines-section { text-align: center; padding: 8px 0 44px; }
.landing-engines-label { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.landing-engines-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.landing-engine-badge {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: var(--radius);
  font-size: 19px;
  font-weight: 700;
}
.landing-engine-yandex { background: #fc3f1d; color: #ffffff; }
.landing-engine-google { background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.landing-engine-google .g-blue { color: #4285F4; }
.landing-engine-google .g-red { color: #EA4335; }
.landing-engine-google .g-yellow { color: #FBBC05; }
.landing-engine-google .g-green { color: #34A853; }
.landing-engine-bing { background: #008373; color: #ffffff; }

/* Чуть более тёмный фон у "чётных" секций — отделяет их друг от друга без
   явных линий-разделителей, как и в остальном интерфейсе (--panel2). */
.landing-section-alt { background: var(--panel2); border-radius: var(--radius); }

/* ---------- Мокап таблицы позиций ("окно" браузера) ---------- */
.landing-mockup-frame {
  max-width: 720px;
  margin: 0 auto;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  overflow: hidden;
}
.landing-mockup-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.landing-mockup-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.landing-mockup-dot-red { background: #ff5f57; }
.landing-mockup-dot-yellow { background: #febc2e; }
.landing-mockup-dot-green { background: #28c840; }
.landing-mockup-url { margin-left: 10px; color: var(--muted); font-size: 12px; }
.landing-mockup-body { padding: 4px 0; overflow-x: auto; }
.landing-mockup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.landing-mockup-table th, .landing-mockup-table td { padding: 10px 16px; text-align: left; white-space: nowrap; }
.landing-mockup-table thead th { color: var(--muted); font-size: 11.5px; font-weight: 600; border-bottom: 1px solid var(--border); }
.landing-mockup-table tbody tr + tr td { border-top: 1px solid var(--border); }
.landing-delta-up { color: var(--good); font-weight: 600; }
.landing-delta-down { color: var(--bad); font-weight: 600; }
.landing-delta-flat { color: var(--muted-light); font-weight: 600; }
.landing-mockup-note { text-align: center; color: var(--muted-light); font-size: 12px; margin: 12px 0 0; }

/* ---------- Карта регионов ---------- */
.landing-map-card { max-width: 640px; margin: 0 auto; text-align: center; }
.landing-map-svg { width: 100%; height: auto; }
.landing-map-shape { fill: var(--accent-soft); stroke: var(--border-strong); stroke-width: 1; }
.landing-map-pin circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.landing-map-pin text { font-size: 12px; font-weight: 600; fill: var(--text); }
.landing-map-note { color: var(--muted-light); font-size: 12.5px; margin: 14px 0 0; }

/* ---------- Демо кластеризации семантического ядра ---------- */
.landing-cluster-demo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.landing-cluster-col { flex: 1; min-width: 260px; max-width: 340px; }
.landing-cluster-col-label { color: var(--muted); font-size: 12.5px; font-weight: 600; margin: 0 0 12px; text-align: center; }
.landing-cluster-arrow { font-size: 26px; color: var(--muted-light); align-self: center; padding-top: 30px; }
@media (max-width: 700px) {
  .landing-cluster-col, .landing-cluster-arrow { flex-basis: 100%; }
  .landing-cluster-arrow { transform: rotate(90deg); padding: 4px 0; text-align: center; }
}
.landing-chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.landing-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--muted);
}
.landing-cluster-groups { display: flex; flex-direction: column; gap: 10px; }
.landing-cluster-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.landing-cluster-count { font-weight: 500; color: var(--muted); font-size: 12px; }

.landing-section { padding: 40px 0 56px; }
.landing-section-title { font-size: 24px; text-align: center; margin: 0 0 6px; }
.landing-section-sub { color: var(--muted); text-align: center; margin: 0 0 36px; }

.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .landing-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .landing-features-grid { grid-template-columns: 1fr; } }

.landing-feature {
  background: var(--panel2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  padding: 22px 20px;
}
.landing-feature-icon { font-size: 26px; margin-bottom: 10px; }
.landing-feature h3 { font-size: 15.5px; margin: 0 0 8px; }
.landing-feature p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

.landing-cta-section {
  text-align: center;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 48px 24px;
  margin-bottom: 56px;
}
.landing-cta-section h2 { font-size: 22px; margin: 0 0 8px; }
.landing-cta-section p { color: var(--muted); margin: 0 0 22px; }

.landing-footer {
  text-align: center;
  color: var(--muted-light);
  font-size: 12.5px;
  padding: 24px;
}

/* ---------- Toast-уведомления (замена alert() для успеха/ошибок/статуса) —
   заметное всплывающее сообщение в углу экрана вместо блокирующего
   браузерного окна confirm/alert. См. showToast() в app.js. ---------- */
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-md), 0 2px 8px rgba(23, 26, 33, 0.12);
  border-left: 4px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toast-in 0.2s ease-out;
  white-space: pre-wrap;
}
.toast-icon { flex-shrink: 0; font-size: 16px; line-height: 1.35; }
.toast-body { flex: 1; word-break: break-word; }
.toast-close {
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--muted-light);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 4px;
}
.toast-close:hover { color: var(--muted); }
.toast.toast-success { border-left-color: var(--good); }
.toast.toast-success .toast-icon { color: var(--good); }
.toast.toast-error { border-left-color: var(--bad); }
.toast.toast-error .toast-icon { color: var(--bad); }
.toast.toast-warning { border-left-color: var(--warn); }
.toast.toast-warning .toast-icon { color: var(--warn); }
.toast.toast-info { border-left-color: var(--accent); }
.toast.toast-info .toast-icon { color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(24px); } }
.toast.toast-hide { animation: toast-out 0.18s ease-in forwards; }

/* Строчный спиннер внутри ячейки таблицы (например, "проверяем частоту…" в
   таблице подсказок) — переиспользует ту же анимацию, что и check-run-spinner
   в шапке, просто без обвязки-пилюли вокруг. */
.inline-spinner {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(59, 91, 219, 0.25); border-top-color: var(--accent);
  animation: check-run-spin 0.8s linear infinite;
  vertical-align: middle;
}
/* Переключатели дней недели/месяца в расписании автопроверки (вкладка
   "⚙ Настройки" — см. рендер расписания и wireScheduleToggles в app.js).
   Простые кнопки-пилюли: активный день — залит акцентным цветом, как и
   остальные "активные" элементы интерфейса (.tab-btn.active и т.п.). */
.day-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.day-toggle {
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.day-toggle:hover { border-color: var(--accent); }
.day-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.day-toggle-flag { font-size: 13px; }

/* ---------- Диагностика сайта (баннер из Яндекс.Вебмастера) ---------- */

.diag-banner {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: none;
  background: var(--panel2);
  font-size: 13px;
}
.diag-banner-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Плоские системные тинты (без насыщенной обводки) — в духе баннеров
   System Settings/Notification Center на macOS Tahoe: цвет только в
   мягкой заливке и в тексте/иконке, а не в жирной рамке. */
/* Согласованный макет НЕ красит фон всей плашки "проблем не найдено" в
   зелёный (.status-chip там — нейтральный стеклянный фон); зелёный несёт
   только маленький кружок-индикатор (.status-dot) с белой галочкой внутри
   — тот же принцип "цвет в иконке/точке, не в заливке", что и у .status-tag/
   .project-badge выше. Раньше здесь была background:var(--good-soft) и
   эмодзи ✅ в тексте — оба расходились с макетом. */
.diag-banner.diag-ok { background: var(--panel2); }
.diag-banner.diag-ok .diag-ok-text { color: var(--text); font-weight: 600; }
.diag-status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-soft);
  flex: none;
  margin-right: 2px;
}
.diag-status-dot svg { width: 10px; height: 10px; color: #fff; }
.diag-banner.diag-unknown { background: var(--panel2); }
.diag-banner.diag-fatal { background: var(--bad-soft); }
.diag-banner.diag-fatal .diag-banner-row { color: var(--bad); font-weight: 600; }
.diag-banner.diag-critical { background: var(--warn-soft); }
.diag-banner.diag-critical .diag-banner-row { color: var(--warn); font-weight: 600; }
.diag-banner.diag-possible, .diag-banner.diag-recommendation { background: var(--panel2); }

.diag-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--panel3);
  color: var(--muted);
  white-space: nowrap;
}
.diag-badge.diag-fatal { background: var(--bad); color: #fff; }
.diag-badge.diag-critical { background: var(--warn); color: #fff; }
.diag-badge.diag-possible { background: var(--panel3); color: var(--text); }
.diag-badge.diag-recommendation { background: var(--panel3); color: var(--muted); }

.diag-banner-details {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.diag-item { display: flex; align-items: flex-start; gap: 10px; }
.diag-item .diag-badge { margin-top: 2px; flex-shrink: 0; }

/* 2026-09-04: своя строка в "Лидерах ниши". Свой домен теперь собирается в
   этот срез наравне с остальными (раньше исключался), и без подсветки его
   пришлось бы выискивать глазами в списке из десятков доменов. */
#nicheLeadersTable tbody tr.niche-leader-own {
  background: rgba(47, 111, 237, .10);
  outline: 1px solid rgba(47, 111, 237, .35);
}

/* 2026-09-04. Вкладка "Обзор Яндекс" — стоит вплотную к "Обзору" и намеренно
   выделена фирменным красным Яндекса (#FC3F1D). Это не украшательство: рядом
   лежат две внешне одинаковые таблицы позиций по одним и тем же фразам, и
   спутать, на какую смотришь, очень легко — а выводы из них делаются разные.
   Цвет держится и в неактивном состоянии, поэтому активность показываем
   не заливкой (она и так красная), а более тёмным оттенком и обводкой. */
.tab-btn.tab-btn-yandex {
  background: #FC3F1D;
  color: #fff;
  border-color: #FC3F1D;
}
.tab-btn.tab-btn-yandex:hover {
  background: #e63512;
  border-color: #e63512;
  color: #fff;
}
.tab-btn.tab-btn-yandex.active {
  background: #cc2f0f;
  border-color: #cc2f0f;
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
/* ===== Скелетоны загрузки (shimmer) — 19.09.2026 =========================
   По просьбе владельца: «какие-то индикаторы блоков, может пусть они будут
   как бы размыты и переливаться и потом проявляться, когда данные приходят».
   Принцип: место под данные занято сразу, той же высоты и в том же месте,
   где потом встанут настоящие цифры/строки, — поэтому страница не прыгает,
   когда ответы приходят один за другим. Сам блеск — только подсветка
   (background-image поверх ровной заливки), поэтому его можно выключить
   одной строкой, не трогая разметку.
   Разметку скелетонов рисует app.js (rtSkelBar / rtShowSkeleton).          */
@keyframes rt-shimmer {
  0%   { background-position: -320px 0; }
  100% { background-position:  320px 0; }
}
.rt-skel {
  display: block;
  border-radius: 8px;
  background-color: rgba(20,25,55,0.07);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 320px 100%;
  animation: rt-shimmer 1.15s linear infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.rt-skel + .rt-skel { margin-top: 8px; }
td > .rt-skel, th > .rt-skel { margin: 2px 0; }
/* Крупный блок на месте графика — тот же приём, но во всю площадь холста. */
.rt-skel-chart { position: absolute; inset: 0; border-radius: var(--radius-sm); }
/* Уже показанный блок, данные которого перезапрашиваются: размываем и
   гасим, чтобы было видно — цифры на экране устарели и сейчас обновятся. */
.rt-fading { filter: blur(3px); opacity: 0.5; transition: filter .2s ease, opacity .2s ease; pointer-events: none; }
/* Проявление настоящих данных на месте скелетона. */
.rt-fade-in { animation: rt-appear .3s ease both; }
@keyframes rt-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rt-skel { animation: none; }
  .rt-fade-in { animation: none; }
  .rt-fading { filter: none; opacity: 0.6; }
}