/* ================================================================
   THEME.CSS — единый слой оформления Hotel Intelligence (2026)
   ----------------------------------------------------------------
   Подключается ПОСЛЕДНИМ в <head> каждой страницы (includes/theme_head.html).
   Задаёт токены светлой (по умолчанию) и тёмной темы через html[data-theme]
   и аккуратно переопределяет «шумные» приёмы старого стиля: градиентный
   текст, свечения, розово-фиолетовые заливки, shimmer на кнопках.
   Сетка, отступы и поведение компонентов не трогаются — только облик.
   ================================================================ */

/* ==================== ШРИФТ: Onest (self-hosted, variable) ==================== */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/onest-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================== ТОКЕНЫ ==================== */

/* Светлая тема — по умолчанию (и на :root, и явно на html[data-theme="light"]) */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Акцент: спокойный кобальт вместо индиго-градиентов */
  --primary: #1f4fd8;
  --primary-dark: #173fb3;
  --primary-light: #3d66e6;
  --primary-soft: rgba(31, 79, 216, 0.09);
  --ring: rgba(31, 79, 216, 0.18);
  /* «Вторичный» цвет намеренно близок к акценту: старые градиенты primary→secondary
     схлопываются в почти плоскую заливку без правки сотни правил */
  --secondary: #3b63e6;
  --accent: #b7791f;
  --success: #178a52;
  --danger: #d4483e;
  --warning: #c48a11;

  /* Нейтральные: тёплая «бумага», а не холодный слейт */
  --bg: #f5f4f0;
  --bg-dark: #eeede8;
  --bg-darker: #e6e4de;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --surface-light: #f4f3ef;
  --input-bg: #ffffff;
  --text: #171a21;
  --text-muted: #5f6673;
  --text-soft: #6f7684;
  --border: #e3e1db;
  --border-strong: #cfcdc5;
  --overlay: rgba(23, 26, 33, 0.45);

  /* Радиусы: мягкие, но не «пузыри» */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Тени: низкие и мягкие, без свечений */
  --shadow-sm: 0 1px 2px rgba(23, 26, 33, 0.04), 0 1px 1px rgba(23, 26, 33, 0.03);
  --shadow-md: 0 4px 14px rgba(23, 26, 33, 0.07);
  --shadow-lg: 0 12px 32px rgba(23, 26, 33, 0.10);
  --shadow-xl: 0 20px 48px rgba(23, 26, 33, 0.14);
  --shadow-glow: 0 8px 24px rgba(31, 79, 216, 0.14);

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Токены лендинга (landing.css) */
  --bg-0: #f5f4f0;
  --bg-1: #f0efea;
  --bg-2: #ebe9e3;
  --bg-3: #e3e1da;
  --surface-2: #f4f3ef;
  --border-accent: rgba(31, 79, 216, 0.28);
  --indigo: #1f4fd8;
  --indigo-light: #3d66e6;
  --indigo-dark: #173fb3;
  --pink: #b7791f;
  --pink-light: #d09a3f;
  --teal: #0f8f83;
  --amber: #c48a11;
  --green: #178a52;
  --text-0: #171a21;
  --text-1: #3e4552;
  --text-2: #5f6673;
  --text-3: #6f7684;

  /* Акцентная панель («шапки» разделов, панель мониторинга, сводки).
     Мягкий градиент вместо плоской ярко-синей заливки: тёмная плашка
     работает и на светлой «бумаге», и на тёмном фоне. */
  --panel-bg:
    radial-gradient(120% 150% at 6% -20%, rgba(255, 255, 255, 0.16) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 110%, rgba(122, 86, 128, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, #1f2540 0%, #33407a 46%, #66486f 100%);
  --panel-fg: #ffffff;
  --panel-fg-muted: rgba(255, 255, 255, 0.76);
  --panel-fg-soft: rgba(255, 255, 255, 0.58);
  --panel-border: rgba(255, 255, 255, 0.10);
  --panel-inset: rgba(255, 255, 255, 0.10);
  --panel-inset-strong: rgba(255, 255, 255, 0.18);
  --panel-shadow: 0 14px 34px rgba(24, 30, 58, 0.20);

  /* Легаси-псевдонимы: часть старых стилей ссылается на имена, которых
     в новой палитре нет. Без них правило целиком становится невалидным
     (фон «пропадает», радиус схлопывается в 0) — особенно заметно
     в светлой теме на карточках отчётов и уведомлений. */
  --radius: var(--radius-md);
  --bg-card: var(--card-bg);
  --bg-secondary: var(--surface-light);
  --primary-lightest: var(--primary-soft);

  /* Декоративный слой лендинга: сетка «цифрового пространства», искры, лучи */
  --mesh-line: rgba(31, 79, 216, 0.055);
  --mesh-dot: rgba(31, 79, 216, 0.10);
  --scan-line: rgba(31, 79, 216, 0.30);
  --spark: rgba(31, 79, 216, 0.30);
  --spark-glow: transparent;
  --cta-glow: rgba(31, 79, 216, 0.13);
  --hero-glow-a: rgba(31, 79, 216, 0.13);
  --hero-glow-b: rgba(112, 78, 132, 0.11);

  /* Статусные цвета в виде ТЕКСТА на светлой поверхности: янтарь и голубой
     из старой тёмной палитры на белом фоне давали контраст 1.7–3.7 — текст
     буквально «съедался». Заливки (бейджи, полосы) продолжают использовать
     --warning/--danger/--success. */
  --warning-ink: #8a5d00;
  --success-ink: #12703f;
  --danger-ink: #b8322a;
  --info-ink: #1f4fd8;
  --muted-ink: #5f6673;
  --danger-fill: #b8322a;
}

/* Тёмная тема — по выбору пользователя */
html[data-theme="dark"] {
  color-scheme: dark;

  --primary: #4b73ee;
  --primary-dark: #2f56e0;
  --primary-light: #8ea6ff;
  --primary-soft: rgba(142, 166, 255, 0.12);
  --ring: rgba(142, 166, 255, 0.22);
  --secondary: #5b80f0;
  --accent: #d5a24a;
  --success: #34c37f;
  --danger: #f0665c;
  --warning: #e2a93a;

  --bg: #0c0e13;
  --bg-dark: #111318;
  --bg-darker: #090b0f;
  --card-bg: #161922;
  --surface: #161922;
  --surface-light: #1e2230;
  --input-bg: #111318;
  --text: #edeff4;
  --text-muted: #9ba3b4;
  --text-soft: #828a9c;
  --border: #262b38;
  --border-strong: #343a4a;
  --overlay: rgba(0, 0, 0, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 24px rgba(75, 115, 238, 0.22);

  --bg-0: #0c0e13;
  --bg-1: #0f1218;
  --bg-2: #13161e;
  --bg-3: #1a1e28;
  --surface-2: #1e2230;
  --border-accent: rgba(142, 166, 255, 0.28);
  --indigo: #4b73ee;
  --indigo-light: #8ea6ff;
  --indigo-dark: #2f56e0;
  --pink: #d5a24a;
  --pink-light: #e6bd73;
  --teal: #2bb3a5;
  --amber: #e2a93a;
  --green: #34c37f;
  --text-0: #edeff4;
  --text-1: #c3c9d6;
  --text-2: #9ba3b4;
  --text-3: #828a9c;

  --panel-bg:
    radial-gradient(120% 150% at 6% -20%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 110%, rgba(104, 72, 110, 0.42) 0%, transparent 60%),
    linear-gradient(135deg, #161a2b 0%, #26305e 46%, #4a3757 100%);
  --panel-fg: #f3f5fb;
  --panel-fg-muted: rgba(243, 245, 251, 0.74);
  --panel-fg-soft: rgba(243, 245, 251, 0.54);
  --panel-border: rgba(255, 255, 255, 0.07);
  --panel-inset: rgba(255, 255, 255, 0.07);
  --panel-inset-strong: rgba(255, 255, 255, 0.13);
  --panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);

  /* Легаси-псевдонимы: часть старых стилей ссылается на имена, которых
     в новой палитре нет. Без них правило целиком становится невалидным
     (фон «пропадает», радиус схлопывается в 0) — особенно заметно
     в светлой теме на карточках отчётов и уведомлений. */
  --radius: var(--radius-md);
  --bg-card: var(--card-bg);
  --bg-secondary: var(--surface-light);
  --primary-lightest: var(--primary-soft);

  --mesh-line: rgba(142, 166, 255, 0.06);
  --mesh-dot: rgba(142, 166, 255, 0.13);
  --scan-line: rgba(142, 166, 255, 0.34);
  --spark: rgba(226, 233, 255, 0.85);
  --spark-glow: rgba(142, 166, 255, 0.55);
  --cta-glow: rgba(75, 115, 238, 0.20);
  --hero-glow-a: rgba(75, 115, 238, 0.16);
  --hero-glow-b: rgba(126, 92, 148, 0.16);

  --warning-ink: #e2a93a;
  --success-ink: #34c37f;
  --danger-ink: #f0665c;
  --info-ink: #8ea6ff;
  --muted-ink: #9ba3b4;
  --danger-fill: #b8322a;
}

/* ==================== БАЗА И ТИПОГРАФИКА ==================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'cv02' on;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  color: var(--text);
}
h1 { font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-weight: 700; }
h3 { font-weight: 700; }
h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Градиентный текст → обычный, читаемый */
h1,
.hero h1,
.logo,
.stat-number,
.dashboard-card .value,
.pricing-price,
.price-amount {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text);
}
.dashboard-card .value { color: var(--text); }
.pricing-price, .price-amount { color: var(--text); }

p { color: var(--text-muted); }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

::selection { background: var(--primary); color: #fff; }

/* Тонкие скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Фокус: одно кольцо для всех интерактивных элементов */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==================== КНОПКИ ==================== */

.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: visible;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.btn::before { display: none; }

.btn-primary,
.hero-buttons .btn-primary,
.btn-secondary {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
  border: 1px solid transparent;
}
.btn-primary:hover,
.hero-buttons .btn-primary:hover,
.btn-secondary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 79, 216, 0.22);
}

.btn-outline,
.hero-buttons .btn-outline {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover,
.hero-buttons .btn-outline:hover {
  background: var(--surface-light);
  color: var(--text);
  border-color: var(--text-soft);
  transform: translateY(-1px);
}

/* Кнопки с inline-градиентом (Админка, CRM, поддержка в футере): гасим до плоского акцента */
.btn[style*="linear-gradient"],
a.btn[style*="linear-gradient"] {
  background: var(--primary) !important;
  color: #fff !important;
}

.btn-pricing-dashboard { text-transform: none; letter-spacing: -0.01em; border-radius: var(--radius-md); }
.btn-primary-dashboard { background: var(--primary); }
.btn-primary-dashboard:hover:not(:disabled) { background: var(--primary-dark); box-shadow: 0 6px 16px rgba(31, 79, 216, 0.22); }
.btn-outline-dashboard { border: 1px solid var(--border-strong); color: var(--text); }
.btn-outline-dashboard:hover { background: var(--surface-light); color: var(--text); }

.btn-icon {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.btn-icon:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--text-soft); }
.btn-icon-info { color: var(--primary); border-color: var(--border-strong); }
.btn-icon-info:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.btn-icon-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-icon-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: none; }
.btn-icon-danger { color: var(--danger); border-color: var(--border-strong); }
.btn-icon-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.mode-btn.active { background: var(--primary); box-shadow: none; }
.mode-btn:hover { background: var(--primary-soft); }

.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-slider { background-color: var(--border-strong); }

/* Фирменные иконки: плоский акцент вместо фиолетово-розового градиента */
.hi { background: var(--primary); }
.hi-light { background: #fff; }
.btn .hi, .btn-icon .hi, .hi-cc { background: currentColor; }

/* ==================== ШАПКА ==================== */

header {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  animation: none;
  padding: 1.1rem 0;
  min-height: 72px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  header { background: var(--surface); }
}

.logo, .logo a { color: var(--text); font-weight: 800; letter-spacing: -0.03em; font-size: 1.35rem; }
.logo > span:first-child, .logo a > span:first-child { font-size: 1.15em; }

nav a { color: var(--text-muted); font-weight: 500; }
nav a:hover { color: var(--text); }
nav a::after { background: var(--primary); height: 1.5px; }
nav .btn { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* Гамбургер (общий для всех страниц) */
.menu-toggle span { background: var(--text); }

/* Переключатель темы в шапке */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-light); }
.theme-toggle::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--hi-theme-icon) no-repeat center / contain;
  mask: var(--hi-theme-icon) no-repeat center / contain;
  --hi-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .theme-toggle::before {
  --hi-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M5 5l1.7 1.7M17.3 17.3 19 19M19 5l-1.7 1.7M6.7 17.3 5 19'/%3E%3C/svg%3E");
}
.header-content { gap: 0.75rem; }
.header-content .theme-toggle { margin-left: auto; }
.header-content nav { margin-left: 0; }
@media (min-width: 769px) {
  .header-content .theme-toggle { margin-left: auto; margin-right: 0.25rem; }
  .header-content nav { margin-left: 0; }
}

/* ==================== КАРТОЧКИ И ПОВЕРХНОСТИ ==================== */

.card::before,
.feature-card::before,
.pricing-card::before,
.stat-card::before,
.testimonial-card::before,
.diff-card::before { display: none !important; }

.card, .feature-card, .stat-card, .testimonial-card, .diff-card, .pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  animation: none;
}
.card:hover, .feature-card:hover, .stat-card:hover, .testimonial-card:hover, .diff-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card::after { display: none; }
.feature-icon { animation: none; }

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dashboard-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dashboard-card h4 { color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.08em; }
.dashboard-card .value { font-size: 1.85rem; letter-spacing: -0.03em; }

.dashboard-content { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
/* Колонки грид-раскладки кабинета не должны распираться содержимым:
   без min-width:0 широкая таблица растягивает колонку и появляется
   горизонтальный скролл всей страницы (особенно на планшетах). */
.dashboard-container > * { min-width: 0; }
.dashboard-content { min-width: 0; }
.dashboard-content .table-container { max-width: 100%; }
.form-card { background: var(--surface-light); border: 1px solid var(--border); }

/* Карточка подписки — та же акцентная плашка (раньше: чернильная в светлой
   теме и плоская синяя в тёмной) */
.subscription-card {
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}
.subscription-card h3 { color: inherit; }
.subscription-info-item { background: var(--panel-inset); border-color: var(--panel-border); backdrop-filter: none; }

/* ===== Акцентные панели =====
   Одна плашка на все «шапки» разделов: панель мониторинга, заголовок админки,
   сводка по конкуренту, итог калькулятора. Раньше каждая красилась своим
   инлайновым linear-gradient(primary → secondary) — после перехода на кобальт
   это схлопывалось в плоскую ярко-синюю заливку. */
.panel-accent {
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: var(--radius-lg);
}
.panel-accent h1,
.panel-accent h2,
.panel-accent h3,
.panel-accent h4,
.panel-accent strong,
.panel-accent .value { color: var(--panel-fg); }
.panel-accent p,
.panel-accent label,
.panel-accent .label,
.panel-accent small { color: var(--panel-fg-muted); }
.panel-accent a:not(.btn) { color: var(--panel-fg); text-decoration: underline; text-underline-offset: 3px; }
.panel-accent .panel-inset {
  background: var(--panel-inset);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
}

.monitoring-panel { background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); }
.monitoring-panel h3 { color: var(--panel-fg); }
.monitoring-panel .form-control { border-color: transparent; }
.btn-monitoring-launch, .btn-monitoring-history { color: #26305e !important; box-shadow: none; }
.monitoring-controls .btn { box-shadow: none; }

/* Кнопки одиночного мониторинга, заблокированные на время активной задачи */
.btn-icon[disabled],
.btn-icon.is-monitoring-locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Тарифы */
.pricing-card.popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg);
  transform: none;
}
.pricing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pricing-card.popular:hover { box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg); }
.pricing-badge, .pricing-badge-dashboard { background: var(--primary); box-shadow: none; letter-spacing: 0.06em; }
.pricing-card-dashboard { background: var(--surface); border: 1px solid var(--border); }
.pricing-card-dashboard.popular { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pricing-card-dashboard.popular:hover { box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg); }
.pricing-card-dashboard.enterprise { background: var(--surface); border-color: var(--border); }
.pricing-card-dashboard.current-plan { border-color: var(--success); background: var(--surface); }
.pricing-card-dashboard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pricing-features-dashboard li { border-bottom-color: var(--border); }
.pricing-features li:hover { transform: none; }
.feature-new { background: var(--primary-soft); color: var(--primary); }

/* ==================== ФОРМЫ ==================== */

.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], input[type="search"], input[type="url"],
select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-md);
  font-family: inherit;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-soft); opacity: 1; }
.form-group label { color: var(--text); font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
select { -webkit-appearance: none; appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px; }
select[multiple], select[size] { background-image: none; padding-right: 0.75rem; }

.monitoring-panel .form-control { background: #fff; color: #171a21; }

/* Дата/время: тёмная тема красит контролы через color-scheme */

/* ==================== ТАБЛИЦЫ ==================== */

/* Таблицы прокручиваются внутри своей карточки, а не ломают слова
   и не растягивают страницу. */
.table-container { background: var(--surface); border: 1px solid var(--border); padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.table-container > table { min-width: 620px; }
.table-container table { border-collapse: separate; border-spacing: 0; }
th {
  background: var(--surface-light);
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}
td { border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover { background: var(--surface-light); }
.data-table th { background: var(--surface-light); }

/* ==================== БЕЙДЖИ, АЛЕРТЫ ==================== */

.badge { border-radius: 999px; font-size: 0.78rem; padding: 0.2rem 0.65rem; font-weight: 600; }
.badge-success { background: rgba(23, 138, 82, 0.12); color: var(--success-ink); }
.badge-warning { background: rgba(196, 138, 17, 0.16); color: var(--warning-ink); }
.badge-danger { background: rgba(212, 72, 62, 0.12); color: var(--danger-ink); }
.badge-secondary { background: var(--surface-light); color: var(--muted-ink); }
.status-badge { border-radius: 999px; }
.status-active { background: rgba(23, 138, 82, 0.12); color: var(--success); }
.status-inactive { background: rgba(212, 72, 62, 0.12); color: var(--danger); }
.status-admin { background: var(--primary-soft); color: var(--primary); }

.alert { border-left-width: 3px; animation: none; }
.alert-success { background: rgba(23, 138, 82, 0.08); color: var(--success); border-color: var(--success); }
.alert-danger { background: rgba(212, 72, 62, 0.08); color: var(--danger); border-color: var(--danger); }
.alert-warning { background: rgba(196, 138, 17, 0.1); color: var(--warning); border-color: var(--warning); }
.alert-info { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

/* ==================== САЙДБАР КАБИНЕТА ==================== */

.sidebar { padding: 1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sidebar > h3 {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
  margin: 0.25rem 0 0.75rem 0.85rem !important;
}
.sidebar-menu li { margin-bottom: 0.15rem; }
.sidebar-menu a { padding: 0.6rem 0.85rem; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-md); }
.sidebar-menu a:hover { background: var(--surface-light); color: var(--text); }
.sidebar-menu a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar-menu a.active::before { background: var(--primary); left: -1rem; }
.menu-icon { width: 24px; height: 24px; }

/* ==================== МОДАЛКИ, ТОСТЫ, УВЕДОМЛЕНИЯ ==================== */

.competitor-modal, .confirm-modal, #onboarding-overlay { background: var(--overlay); }
.competitor-modal-content, .confirm-modal-content, .onboarding-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}
.competitor-modal-header { border-bottom: 1px solid var(--border); background: var(--surface); padding: 1.25rem 1.5rem; }
.competitor-modal-header h2 { color: var(--text); font-size: 1.25rem; }
.competitor-modal-body { padding: 1.25rem 1.5rem; }
.confirm-modal-header h3 { color: var(--text); }
.onboarding-modal::before { display: none; }
.modal-header, .modal-footer { border-color: var(--border) !important; }

.notifications-dropdown { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-xl) !important; }
.notifications-dropdown::after { border-bottom-color: var(--surface) !important; }
.notifications-badge { background: var(--danger) !important; }

.toast { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg); }

/* Куки-баннер (inline-стили в footer.html) */
#cookieConsentBanner {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}
#cookieConsentBanner p { color: var(--text-muted) !important; }
#cookieConsentBanner a { color: var(--primary) !important; }
#cookieConsentBanner button:first-child { background: var(--primary) !important; border-radius: var(--radius-md) !important; }
#cookieConsentBanner button:last-child { color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md) !important; }

/* ==================== ФУТЕР ==================== */

footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-section h4 { color: var(--text); font-size: 0.9rem; }
.footer-section a { color: var(--text-muted); }
.footer-section a:hover { color: var(--primary); }
.footer-bottom { border-top-color: var(--border); color: var(--text-soft); font-size: 0.85rem; }

/* Сетки тарифов: minmax(0, 1fr) вместо 1fr — иначе содержимое карточки
   распирает колонку и страница едет вбок на планшетах. */
.pricing-grid-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .pricing-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.pricing-card-dashboard, .pricing-card { min-width: 0; }

/* Планшеты: карточки статистики в две колонки — на 820px колонка контента
   узкая, и minmax(250px) схлопывал сетку в один столбец. */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
}

/* Планшеты (769–1024): панель мониторинга не влезает в три колонки —
   кнопки уходят за край. Переносим их на отдельную строку. */
@media (max-width: 1024px) {
  .monitoring-grid { grid-template-columns: 1fr 1fr !important; }
  .monitoring-grid > div:last-child { grid-column: 1 / -1 !important; display: flex; gap: 0.5rem; }
  .btn-monitoring-launch, .btn-monitoring-history { min-width: 0 !important; flex: 1 1 0; }
}

/* ==================== ЛЕНДИНГ ==================== */

.hero { background: var(--bg); }
.hero h1 { color: var(--text); letter-spacing: -0.035em; }
.hero-subtitle { color: var(--text-muted); }
.hero-trust { color: var(--text-soft); }

/* ---- Первый экран: «цифровое пространство» ----
   Три очень тихих слоя поверх фона: координатная сетка, медленно дышащие
   пятна света и один луч-сканер. Всё на токенах — работает и в светлой,
   и в тёмной теме; при prefers-reduced-motion движение снимается
   глобальным правилом в конце файла. */

.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--mesh-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mesh-line) 1px, transparent 1px),
    radial-gradient(circle, var(--mesh-dot) 1px, transparent 1.5px);
  background-size: 68px 68px, 68px 68px, 68px 68px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 74%);
  mask-image: radial-gradient(115% 85% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 74%);
  animation: hi-mesh-drift 26s linear infinite;
}
@keyframes hi-mesh-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 -68px, 0 -68px, 0 -68px; }
}

.hero-glow-1 {
  background: radial-gradient(circle, var(--hero-glow-a) 0%, transparent 65%);
  animation: hi-glow-drift-a 18s ease-in-out infinite;
}
.hero-glow-2 {
  background: radial-gradient(circle, var(--hero-glow-b) 0%, transparent 65%);
  animation: hi-glow-drift-b 22s ease-in-out infinite;
}
@keyframes hi-glow-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50%      { transform: translate3d(-3%, 4%, 0) scale(1.12); opacity: 1; }
}
@keyframes hi-glow-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); opacity: 0.85; }
  50%      { transform: translate3d(4%, -3%, 0) scale(1); opacity: 1; }
}

.hero-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--scan-line) 45%, var(--scan-line) 55%, transparent 100%);
  opacity: 0;
  animation: hi-hero-scan 11s ease-in-out infinite;
}
@keyframes hi-hero-scan {
  0%        { transform: translateY(14vh); opacity: 0; }
  12%, 78%  { opacity: 0.8; }
  100%      { transform: translateY(88vh); opacity: 0; }
}

/* Искры: раньше в светлой теме их просто прятали. Теперь это общий слой —
   светлые точки на тёмном фоне и приглушённо-синие на светлом. */
.stars-container { z-index: 3; }
.star {
  background: var(--spark);
  box-shadow: 0 0 6px var(--spark-glow);
}
html[data-theme="light"] .star,
:root:not([data-theme="dark"]) .star { animation-duration: 6s; }

/* Живой индикатор над заголовком */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  box-shadow: var(--shadow-sm);
}
.hero-badge-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.hero-badge-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: hi-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes hi-ping {
  0%        { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

.section-label { color: var(--primary); }
.section-label::before { background: var(--primary); }
.section-glow::before { background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

/* По линии-разделителю секции раз в несколько секунд пробегает блик */
.section-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -240px;
  width: 480px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
  background-size: 170px 100%;
  background-repeat: no-repeat;
  animation: hi-section-sweep 8s ease-in-out infinite;
}
@keyframes hi-section-sweep {
  0%       { background-position: -170px 0; opacity: 0; }
  18%, 78% { opacity: 0.6; }
  100%     { background-position: 480px 0; opacity: 0; }
}

.nail-col { background: var(--surface); }
.nail-col-muted { background: var(--bg-2); opacity: 1; }
.nail-col-accent { border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.bridge-cards { border-color: var(--border); background: var(--surface); }
.bridge-card { background: var(--surface); border-color: var(--border); }
.bridge-card:hover { background: var(--surface-light); }
.bridge-card:nth-child(1)::before { background: var(--primary); }
.bridge-card:nth-child(2)::before { background: var(--accent); }
.bridge-card:nth-child(3)::before { background: var(--teal); }
.icon-indigo { background: var(--primary-soft); }
.icon-pink { background: rgba(183, 121, 31, 0.12); }
.icon-teal { background: rgba(15, 143, 131, 0.12); }
.icon-amber { background: rgba(196, 138, 17, 0.12); }
.icon-green { background: rgba(23, 138, 82, 0.12); }
.demo-frame { border-color: var(--border); box-shadow: var(--shadow-lg); }
.demo-frame:hover { box-shadow: var(--shadow-xl); }
.demo-frame-bar { background: var(--surface-light); }
.demo-metric { background: var(--surface-light); }
.demo-metric.accent .demo-metric-value { color: var(--primary); }

/* Зелёная «лампочка» в шапке макета пульсирует — окно живое, а не картинка */
.demo-dot-g {
  position: relative;
  box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.55);
  animation: hi-dot-pulse 2.8s ease-out infinite;
}
@keyframes hi-dot-pulse {
  0%       { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); }
  70%      { box-shadow: 0 0 0 7px rgba(40, 200, 64, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}

/* Раз в несколько секунд по макету проходит мягкий блик — «данные обновились» */
.demo-inner { position: relative; overflow: hidden; }
.demo-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, var(--primary-soft) 50%, transparent 100%);
  animation: hi-demo-sweep 9s ease-in-out infinite;
}
@keyframes hi-demo-sweep {
  0%, 55%  { left: -45%; opacity: 0; }
  60%      { opacity: 1; }
  95%      { left: 100%; opacity: 0; }
  100%     { left: 100%; opacity: 0; }
}
.diff-formula { background: var(--surface-light); color: var(--primary); }
.question-title { color: var(--primary); }
.scenario-card .conclusion { color: var(--primary); }
.faq-btn:hover { color: var(--primary); }
.faq-item.open .faq-icon { border-color: var(--primary); color: var(--primary); }
.final-cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--primary-soft) 0%, transparent 65%);
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: -30% -15% auto;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(55% 100% at 50% 0%, var(--cta-glow) 0%, transparent 70%);
  animation: hi-cta-breathe 14s ease-in-out infinite;
}
.final-cta > * { position: relative; z-index: 1; }
@keyframes hi-cta-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Возможности/статистика из style.css (если где-то остались) */
.stat-card { background: var(--surface); }
.stat-number { color: var(--text); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ==================== AUTH-СТРАНИЦЫ ==================== */

.auth-card { box-shadow: var(--shadow-lg); border-color: var(--border); border-radius: var(--radius-xl); }
.auth-header h1 { font-size: 1.75rem; }
.auth-links { border-top-color: var(--border); }
.auth-links a { color: var(--primary); }
.auth-links a:hover { color: var(--primary-dark); }
.auth-card .alert-danger { color: var(--danger); }
.auth-card .alert-success { color: var(--success); }
.auth-card .alert-info { color: var(--primary); }

/* ==================== АДМИНКА ==================== */

.admin-nav { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: var(--shadow-sm); gap: 0.5rem !important; padding: 0.75rem !important; }
.admin-nav .btn { font-weight: 500; }
.admin-nav .btn-outline { border-color: transparent; background: transparent; color: var(--text-muted); }
.admin-nav .btn-outline:hover { background: var(--surface-light); color: var(--text); transform: none; }
.admin-nav .btn-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.admin-nav .btn-primary:hover { background: var(--primary-soft); color: var(--primary); transform: none; box-shadow: none; }
.section-card { box-shadow: var(--shadow-sm); }
.resource-card { box-shadow: var(--shadow-sm); }

/* Шапка профиля пользователя в админке — та же акцентная плашка, что и
   «Панель мониторинга», заголовок админки и сводка по конкурентам */
.user-header, .profile-header {
  background: var(--panel-bg) !important;
  color: var(--panel-fg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  flex-wrap: wrap;
  gap: 1rem;
}
.user-header h1 { color: inherit; }
.user-header .btn-outline { background: transparent; color: inherit !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.user-header .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
.user-meta { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.user-meta > * { min-width: 0; overflow-wrap: anywhere; }

/* --- Контраст статусных подписей в админке ---
   Старые классы задают янтарь/голубой/серый из тёмной палитры прямо в
   <style> страницы. theme.css подключается после них, поэтому здесь мы
   переводим именно ТЕКСТ на «чернильные» варианты; фон-заливки не трогаем. */
.c-warn,
.status-badge.status-pending,
.type-warning,
.notice-box,
.tk-badge-open,
.promo-status.expired { color: var(--warning-ink) !important; }

.status-badge.status-running,
.type-info { color: var(--info-ink) !important; }

.status-badge.status-active,
.status-badge.status-completed,
.read-badge.read-yes,
.tk-badge-closed.status-done { color: var(--success-ink) !important; }

.status-badge.status-inactive,
.status-badge.status-failed,
.error-message { color: var(--danger-ink) !important; }

.log-table td.col-module,
.tk-badge-closed { color: var(--muted-ink) !important; }

/* Кнопки удаления: белый текст на светло-красном давал 3.1–4.4 */
.btn-delete,
.btn-danger,
.btn-icon-danger.btn-filled { background: var(--danger-fill); color: #fff; }
.btn-delete:hover,
.btn-danger:hover { background: #9d2a23; color: #fff; }

/* ==================== УТИЛИТЫ ТЕМЫ ==================== */

/* Показ элементов только в одной из тем */
html[data-theme="dark"] .only-light { display: none !important; }
html:not([data-theme="dark"]) .only-dark { display: none !important; }

/* ================================================================
   МОБИЛЬНАЯ ВЕРСИЯ: ощущение приложения, а не сжатого сайта
   (переопределяет !important-правила mobile.css)
   ================================================================ */
@media (max-width: 768px) {
  header {
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    min-height: 56px !important;
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)) {
    header { background: var(--surface) !important; }
  }
  .header-content { gap: 0.5rem !important; }
  .theme-toggle { width: 36px; height: 36px; }
  .logo, .logo a { font-size: 1.1rem !important; }

  /* Выпадающее меню шапки */
  nav {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  nav { align-items: stretch !important; }
  nav a { color: var(--text) !important; border-bottom: 1px solid var(--border) !important; width: 100%; justify-content: flex-start !important; text-align: left; }
  nav a:last-of-type:not(.btn) { border-bottom: none !important; }
  nav a:not(.btn) { padding: 0.85rem 0.75rem !important; }
  nav .btn { border-bottom: none !important; }
  .header-content nav a:not(.btn) { font-size: 1rem !important; padding: 0.85rem 0.75rem !important; }
  .header-content .btn-outline.btn-sm { min-height: 44px !important; font-size: 0.9rem !important; }
  nav .notifications-container { width: 100%; padding: 0.25rem 0.5rem; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
  nav .notifications-container::after { content: 'Уведомления'; color: var(--text); font-weight: 500; }
  nav .notifications-bell { width: 44px !important; height: 44px !important; }
  nav .notifications-bell img { width: 34px !important; height: 34px !important; }

  /* Поддержка: шапка карточки обращений переносится, кнопки не вылезают */
  .sp-card-header { flex-wrap: wrap; gap: 0.5rem; }
  .sp-card-header > div { width: 100%; }
  .sp-card-header > div .btn { flex: 1; }

  /* Нижняя навигация кабинета */
  .sidebar {
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -6px 24px rgba(23, 26, 33, 0.06) !important;
    height: 64px !important;
    padding: 0 !important;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sidebar { height: calc(64px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom) !important; }
    .dashboard-content { margin-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
    body:has(.sidebar) footer { padding-bottom: calc(64px + env(safe-area-inset-bottom) + 1.5rem) !important; }
  }
  .sidebar-menu { height: 64px !important; }
  .sidebar-menu a {
    color: var(--text-muted) !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    border-top: 2px solid transparent !important;
    padding: 6px 2px 4px !important;
    gap: 2px !important;
  }
  .sidebar-menu a.active {
    background: transparent !important;
    color: var(--primary) !important;
    border-top-color: transparent !important;
    font-weight: 600 !important;
  }
  .sidebar-menu a:hover { background: transparent !important; }
  .sidebar-menu .menu-icon {
    width: 26px !important;
    height: 26px !important;
    padding: 2px;
    border-radius: 8px;
    transition: background-color 0.15s, transform 0.15s !important;
  }
  .sidebar-menu a.active .menu-icon { background: var(--primary-soft); transform: none; filter: none; }

  /* Контент кабинета: не растягиваем на 80vh — пустые секции не оставляют «дыру» */
  .dashboard-container { min-height: auto !important; }
  .dashboard-content {
    padding: 0.9rem !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 64px !important;
  }
  .dashboard-grid { gap: 0.6rem !important; }
  .dashboard-card { padding: 0.9rem !important; border-radius: var(--radius-md) !important; }
  .dashboard-card .value { font-size: 1.5rem !important; }

  /* Таблицы: карточки вместо горизонтальной прокрутки там, где размечены data-label */
  .table-container { margin: 0 !important; width: 100% !important; border-radius: var(--radius-md) !important; padding: 0 !important; }
  .table-container table:not(.table-cards) { min-width: 560px !important; }
  table.table-cards { min-width: 0 !important; width: 100% !important; }
  table.table-cards thead { display: none !important; }
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td { display: block !important; }
  table.table-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin: 0.6rem;
    padding: 0.35rem 0.85rem;
  }
  table.table-cards tr:hover { background: var(--surface); }
  table.table-cards td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border: none !important;
    padding: 0.45rem 0 !important;
    font-size: 0.9rem !important;
    text-align: right;
  }
  table.table-cards td::before {
    content: attr(data-label);
    color: var(--text-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    flex-shrink: 0;
  }
  table.table-cards td:not([data-label])::before { display: none; }
  table.table-cards td.td-actions { justify-content: flex-end; padding-top: 0.6rem !important; border-top: 1px solid var(--border) !important; margin-top: 0.25rem; }
  table.table-cards td.td-actions::before { display: none; }
  table.table-cards td.td-actions .btn-icon { width: 40px !important; height: 40px !important; }
  table.table-cards td.td-title { justify-content: flex-start; text-align: left; font-size: 1rem !important; padding-bottom: 0.15rem !important; }
  table.table-cards td.td-title::before { display: none; }

  /* Админка: навигация лентой, таблицы прокручиваются внутри карточек */
  .admin-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.35rem !important;
    padding: 0.5rem !important;
    margin: 0 -1rem 1rem !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav .btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .section-card { padding: 1rem !important; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .info-grid { grid-template-columns: 1fr !important; gap: 0.35rem 1rem !important; }
  .tab-nav { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-button { white-space: nowrap; flex: 0 0 auto; }

  /* Секции и заголовки */
  body:has(.sidebar) .section { padding-top: 64px !important; }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Модалки — нижние листы */
  .confirm-modal { align-items: flex-end !important; padding: 0 !important; }
  .confirm-modal-content {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .competitor-modal-content { border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; }
  #onboarding-overlay { align-items: flex-end !important; padding: 0 !important; }
  .onboarding-modal {
    max-width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 88vh;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Куки-баннер — компактнее */
  #cookieConsentBanner { padding: 0.75rem 1rem !important; }
  #cookieConsentBanner > div { gap: 0.75rem !important; }
  #cookieConsentBanner p { font-size: 0.8rem !important; }
  #cookieConsentBanner > div > div { width: 100%; }
  #cookieConsentBanner button { flex: 1; min-height: 42px; }

  /* Тосты снизу, над нижней навигацией */
  body:has(.sidebar) .toast-container { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; top: auto !important; }

  /* Крупные тач-зоны для форм */
  .form-control, input:not([type="checkbox"]):not([type="radio"]), select { min-height: 46px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* Футер: тише */
  footer { background: transparent !important; }
}

@media (max-width: 480px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr !important; }
  .dashboard-card .value { font-size: 1.35rem !important; }
}

/* ==================== МОДАЛКА «РЕКОМЕНДОВАННЫЕ ЦЕНЫ НА 21 ДЕНЬ» ====================
   Раньше плашка и шапка таблицы были захардкожены под тёмный фон (#1a1d29,
   rgba(255,255,255,.05)) — в светлой теме получался тёмный прямоугольник
   с нечитаемым текстом. Теперь всё на токенах. */

.rec-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 80px 20px 20px;
}

.rec-modal-dialog {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
}

.rec-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.rec-modal-header h2 { margin: 0; font-size: 1.4rem; color: var(--text); }

.rec-modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0.25rem;
  border-radius: var(--radius-sm);
}
.rec-modal-close:hover { color: var(--text); background: var(--surface-light); }

.rec-modal-meta {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rec-modal-meta-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.rec-modal-meta p { margin: 0.25rem 0; color: var(--text); }
.rec-modal-meta strong { color: var(--text); }

.rec-note {
  margin-top: 0.65rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text);
}
.rec-note-sub { font-size: 0.85em; color: var(--text-muted); }
.rec-note-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); border-left-color: var(--warning); }
.rec-note-success { background: color-mix(in srgb, var(--success) 12%, transparent); border-left-color: var(--success); }
.rec-note-muted   { background: var(--surface-light); border-left-color: var(--border-strong); color: var(--text-muted); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .rec-note-warning { background: var(--surface-light); }
  .rec-note-success { background: var(--surface-light); }
}

.rec-legend {
  margin-bottom: 0.75rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.rec-dot-direct { color: var(--success); }
.rec-dot-extra  { color: var(--warning); }
.rec-dot-none   { color: var(--text-soft); }

.rec-table-wrap {
  max-height: calc(100vh - 380px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

.rec-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 780px; }
.rec-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-light);
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
  padding: 0.7rem 0.75rem;
}
.rec-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.rec-table tr:last-child td { border-bottom: none; }
.rec-table td:first-child,
.rec-table td:nth-child(2) { white-space: nowrap; }
.rec-table .ta-center { text-align: center; }
.rec-table .ta-right  { text-align: right; }
.rec-table .rec-comment {
  font-size: 0.8em;
  color: var(--text-muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.rec-table .rec-up   { color: var(--success); }
.rec-table .rec-down { color: var(--warning); }
.rec-table .rec-price-high { color: var(--success); font-weight: 700; }
.rec-table .rec-price-low  { color: var(--warning); font-weight: 700; }
.rec-table .rec-row-holiday { background: var(--primary-soft); }

.rec-daytype {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8em;
  background: var(--surface-light);
  color: var(--text-muted);
}
.rec-daytype-holiday { background: var(--primary-soft); color: var(--primary); }
.rec-daytype-weekend { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }

.rec-modal-footer { margin-top: 1.25rem; text-align: center; }

@media (max-width: 768px) {
  .rec-modal { padding: 60px 10px 10px; }
  .rec-modal-dialog { padding: 1rem; }
  .rec-table-wrap { max-height: calc(100vh - 300px); }
}

/* Уважение к «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}