@charset "UTF-8";

/* Aff-Tools v12. Montserrat; light/dark themes; brand gradient buttons; no transitions. */

/* ==========================================================================
   ТЁМНАЯ ТЕМА (по умолчанию)
   Логика палитры:
   - фон страницы → панель → карточка/контрол → вложенный блок → приподнятый:
     каждая следующая поверхность чуть светлее предыдущей;
   - текст: primary > emphasis > content > secondary > muted (основной текст) > hint;
     все уровни, кроме hint и placeholder, читаются с контрастом ≥ 4.5:1;
   - статусы: насыщенный цвет + полупрозрачная подложка 10–12% того же цвета;
   - границы: полупрозрачный белый, чтобы работать на любой поверхности.
   ========================================================================== */

:root
{
  color-scheme: dark;
  /* Стрелки всех выпадающих списков — chevron-down из bootstrap-icons, приглушённого цвета. */
  --select-arrow-color: var(--icon-muted);
  /* Иконка поиска — search из bootstrap-icons, цвет --icon-muted темы. */
  /* Размеры и типографика */
  --container-width: 1440px;
  --container-gap: 24px;
  --row-cols: 12;
  --row-gap-x: 20px;
  --row-gap-y: 20px;
  --font-family-body: "Montserrat", Arial, Helvetica, sans-serif;
  --font-size-body: 15px;
  --line-height-body: 1.4;
  --font-family-heading: var(--font-family-body);
  --font-weight-heading: 600;
  --line-height-heading: 1.4;
  --heading-margin: 0 0 16px 0;
  --font-size-heading-1: 24px;
  --font-size-heading-2: 20px;
  --font-size-heading-3: 18px;
  --font-size-heading-4: 16px;
  --font-size-heading-5: 14px;
  --font-size-heading-6: 14px;
  --paragraph-margin: 0 0 25px 0;
  --radius-base: 12px;
  /* Текст */
  --text-body: var(--text-muted);
  --text-primary: #E8EAEF;
  --text-emphasis: #D2D6DE;
  --text-content: #A9AFBB;
  --text-secondary: #979DAA;
  --text-muted: #8E94A1;
  --text-hint: #737985;
  --text-on-accent: #ffffff;
  --text-strong: #F4F5F8;
  --text-loading: #979DAA;
  /* Поверхности */
  --background-body: var(--surface-page);
  --surface-page: #121418;
  --surface-panel: #16191E;
  --surface-dialog: #1A1D23;
  --surface-tertiary: #1C1F25;
  --surface-inset: #1F2228;
  --surface-raised: #21242B;
  --surface-step: #24272E;
  --surface-muted: #262A31;
  --surface-secondary: #262A31;
  --surface-card: rgba(255, 255, 255, 0.025);
  --surface-highlight: rgba(255, 255, 255, 0.05);
  --surface-neutral: rgba(255, 255, 255, 0.04);
  /* Фон страницы «Кометы по дуге»: кометы на орбитах + свечение в правом верхнем углу */
  --page-background-image: url(../img/bg-comets-dark.svg?v=3), radial-gradient(900px 600px at 100% 0%, rgba(106, 166, 255, .12), transparent 70%);
  /* Акценты и состояния */
  --accent-primary: #6AA6FF;
  --accent-secondary: #7DD3E8;
  --status-success: #4CC38A;
  --status-success-hover: #3FAE79;
  --status-danger: #F2777A;
  --status-danger-hover: #F58C8E;
  --status-warning: #E6B450;
  --status-info: #6AA6FF;
  --status-online: #4CC38A;
  --status-pending: #E6B450;
  --status-info-bg: rgba(106, 166, 255, 0.12);
  --status-danger-bg: rgba(242, 119, 122, 0.11);
  --status-success-bg: rgba(76, 195, 138, 0.11);
  --status-warning-bg: rgba(230, 180, 80, 0.11);
  /* Границы */
  --border-subtle: rgba(255, 255, 255, 0.025);
  --border-default: rgba(255, 255, 255, 0.04);
  --border-control: rgba(255, 255, 255, 0.12);
  --border-danger: rgba(242, 119, 122, 0.45);
  --border-danger-hover: rgba(242, 119, 122, 0.75);
  --border-success: rgba(76, 195, 138, 0.40);
  --border-success-hover: rgba(76, 195, 138, 0.70);
  --border-interactive-hover: rgba(255, 255, 255, 0.22);
  /* Компоненты */
  --pagination-active-bg: var(--surface-muted);
  --scrollbar-table-thumb: #353A43;
  --scrollbar-thumb: #3E434D;
  --tab-button-bg: rgba(255, 255, 255, 0.07);
  --faq-expanded-bg: rgba(106, 166, 255, 0.06);
  --button-round-border: rgba(255, 255, 255, 0.08);
  --button-border: rgba(255, 255, 255, 0.04);
  --button-secondary-bg: #262A31;
  --button-secondary-hover-bg: #2E323A;
  --button-primary-bg: var(--button-primary-gradient-start);
  --button-primary-hover-bg: var(--button-primary-hover-gradient-start);
  --button-danger-bg: #E06569;
  --button-danger-hover-bg: #C9575B;
  --waf-add-bg: rgba(106, 166, 255, 0.12);
  --waf-add-hover-bg: rgba(106, 166, 255, 0.22);
  --waf-delete-bg: rgba(242, 119, 122, 0.11);
  --waf-delete-hover-bg: rgba(242, 119, 122, 0.20);
  --waf-error-color: var(--status-danger);
  --select-active-bg: rgba(106, 166, 255, 0.16);
  --select-search-surface: rgba(255, 255, 255, 0.05);
  --pagination-bullet-bg: var(--text-secondary);
  --message-neutral-text: var(--text-content);
  --message-neutral-bg: var(--surface-muted);
  --loader-accent: #6AA6FF;
  --icon-muted: #7A808D;
  --control-bg: #1A1D23;
  --control-hover-bg: #20232A;
  --loading-shimmer-color: rgba(255, 255, 255, 0.18);
  --on-accent-overlay: rgba(255, 255, 255, 0.22);
  --action-bg: #24272E;
  --spinner-track: rgba(255, 255, 255, 0.14);
  --spinner-accent: var(--accent-primary);
  --input-bg: #1F2228;
  --input-label: #979DAA;
  --input-placeholder: #646A76;
  --input-focus-border: rgba(106, 166, 255, 0.55);
  --input-autofill-bg: var(--input-bg);
  --input-autofill-text: var(--text-primary);
  --toggle-track-bg: #2E323A;
  --badge-success-bg: rgba(76, 195, 138, 0.11);
  --badge-success-text: #7FD8AC;
  --close-bg: #4A2729;
  --warning-border: #E6B450;
  --select-highlight: #24272E;
  --select-dropdown-bg: #1D2026;
  --select-option-bg: #1D2026;
  --select-option-hover-bg: #262A31;
  --select-option-selected-bg: rgba(106, 166, 255, 0.14);
  --select-option-text: var(--text-primary);
  --select-search-bg: #262A31;
  --select-multiple-bg: #1F2228;
  --action-cancel-bg: #E06569;
  --info-text: #6AA6FF;
  --danger-text: #F58C8E;
  --toast-info-bg: #1B2D47;
  --toast-success-bg: #17362A;
  --toast-warning-bg: #3A3020;
  --toast-danger-bg: #3F2427;
  --error-bg: rgba(242, 119, 122, 0.08);
  --error-border: #F2777A;
  --chart-track: rgba(255, 255, 255, 0.06);
  --progress-track: rgba(255, 255, 255, 0.10);
  --material-bg: #262A31;
  --menu-active-bg: rgba(106, 166, 255, 0.13);
  --heading-text: var(--text-primary);
  --button-text: var(--text-primary);
  --toggle-thumb-bg: var(--text-primary);
  --icon-active: var(--text-primary);
  --selection-text: #ffffff;
  --selection-bg: rgba(106, 166, 255, 0.40);
  --plan-basic-accent: var(--text-primary);
  /* Насыщенные цвета тарифов: карточка тарифа в меню (.sb-plan) и карточки на странице «Тарифы» (.sub-card) */
  --plan-light: var(--button-primary-gradient-start);
  --plan-optimal: #2FB86A;
  --plan-premium: #7E6BFF;
  --plan-corporate: #F04C45;
  --plan-trial: #06B6D4;
  --plan-progress-fill: var(--text-primary);
  --tooltip-bg: #2A2E36;
  --tooltip-text: var(--text-emphasis);
  --tooltip-border: rgba(255, 255, 255, 0.06);
  --tooltip-shadow: rgba(0, 0, 0, 0.40);
  --tooltip-info-bg: rgba(255, 255, 255, 0.09);
  --tooltip-info-text: var(--text-content);
  --tooltip-info-hover-bg: rgba(106, 166, 255, 0.20);
  --scrollbar-track: var(--surface-muted);
  --action-edit-bg: var(--status-success-bg);
  --balance-action-bg: var(--surface-muted);
  --focus-outline: var(--accent-primary);
  --menu-marker: var(--text-hint);
  --loader-track: var(--surface-muted);
  --toast-surface: var(--surface-panel);
  --sidebar-fade-bg: var(--surface-panel);
  --filter-panel-bg: var(--surface-dialog);
  --confirm-dialog-bg: var(--surface-dialog);
  /* Эффекты */
  --overlay-loader: rgba(0, 0, 0, 0.22);
  --overlay-modal: var(--surface-page);
  --overlay-modal-opacity: 0.88;
  --shadow-dropdown: rgba(0, 0, 0, 0.38);
  --shadow-floating: rgba(0, 0, 0, 0.30);
  --shadow-select: rgba(0, 0, 0, 0.38);
  --shadow-panel: rgba(0, 0, 0, 0.45);
  --gradient-transparent: transparent;
  --transparent-text: rgba(232, 234, 239, 0);
  --transparent-menu: rgba(106, 166, 255, 0);
  /* Статистика, календарь, карта и графики */
  --statistics-popup-bg: #1D2026;
  --statistics-popup-border: rgba(255, 255, 255, 0.05);
  --statistics-popup-shadow: rgba(0, 0, 0, 0.38);
  --statistics-divider: rgba(255, 255, 255, 0.05);
  --statistics-control-bg: #262A31;
  --statistics-control-border: rgba(255, 255, 255, 0.05);
  --statistics-control-text: #BEC3CD;
  --statistics-control-hover-bg: #2E323A;
  --statistics-control-hover-border: rgba(255, 255, 255, 0.16);
  --statistics-label-color: #868C99;
  --statistics-card-bg: #1F2228;
  --statistics-empty-overlay: rgba(22, 25, 30, 0.6);
  --calendar-control-hover-bg: #2A2E36;
  --calendar-control-border: rgba(255, 255, 255, 0.07);
  --calendar-navigation-color: #979DAA;
  --calendar-divider: rgba(255, 255, 255, 0.05);
  --calendar-day-color: #D2D6DE;
  --calendar-selection-bg: #5B95EE;
  --calendar-range-bg: rgba(106, 166, 255, 0.16);
  --calendar-adjacent-day-color: #5F6571;
  --calendar-disabled-day-color: #454A54;
  --tracker-filter-row-text: #D2D6DE;
  --tracker-filter-check-selected-bg: var(--calendar-selection-bg);
  --tracker-filter-scrollbar-thumb: #40454F;
  --tracker-filter-scrollbar-bg: #3A3F48;
  --tracker-filter-scrollbar-hover-bg: #525864;
  --tracker-filter-folder-icon: #868C99;
  --tracker-filter-item-text: #BEC3CD;
  --tracker-filter-item-icon: #7A808D;
  --tracker-filter-check-bg: #16191E;
  --tracker-filter-count-color: #868C99;
  --chart-series-hosts: #6AA6FF;
  --chart-series-hits: #4CC38A;
  --chart-series-waf: #7DD3E8;
  --chart-series-blocked: #F2777A;
  --chart-series-income: #F5B544;
  --chart-legend-color: #979DAA;
  --chart-axis-color: var(--statistics-label-color);
  --chart-grid-color: rgba(255, 255, 255, 0.05);
  --chart-tooltip-bg: #262A31;
  --chart-tooltip-text: var(--text-primary);
  --chart-tooltip-border: rgba(255, 255, 255, 0.07);
  --geo-grid-color: rgba(255, 255, 255, 0.035);
  --geo-map-glow-color: rgba(106, 166, 255, 0.06);
  --geo-land-color: #2A2E36;
  --geo-land-border: #363B44;
  --geo-point-border: rgba(255, 255, 255, 0.6);
  --geo-point-glow-color: rgba(106, 166, 255, 0.40);
  --geo-point-center-color: #ffffff;
  --geo-ranking-divider: rgba(255, 255, 255, 0.05);
  --geo-flag-surface: rgba(255, 255, 255, 0.05);
  --geo-country-name-color: #D2D6DE;
  --geo-bar-track: #2A2E36;
  --breakdown-name-color: #A9AFBB;
  --modal-close-bg: var(--close-bg);
  /* Фирменный градиент и основные кнопки — общие для обеих тем.
     Спокойный сине-синий градиент в тон акценту, без фиолетового. */
  --brand-gradient-start: #3B78DE;
  --brand-gradient-end: #2F62C4;
  --brand-gradient-angle: 110deg;
  --brand-gradient: linear-gradient(var(--brand-gradient-angle), var(--brand-gradient-start), var(--brand-gradient-end));
  --button-primary-gradient-start: #3B78DE;
  --button-primary-gradient-end: #2F62C4;
  --button-primary-gradient: linear-gradient(var(--brand-gradient-angle), var(--button-primary-gradient-start), var(--button-primary-gradient-end));
  --button-primary-hover-gradient: linear-gradient(var(--brand-gradient-angle), var(--button-primary-hover-gradient-start), var(--button-primary-hover-gradient-end));
  --button-primary-active-gradient: linear-gradient(var(--brand-gradient-angle), var(--button-primary-active-gradient-start), var(--button-primary-active-gradient-end));
  --button-primary-focus-ring: rgba(106, 166, 255, 0.40);
  --button-primary-hover-gradient-start: #346Ed2;
  --button-primary-hover-gradient-end: #2A58B3;
  --button-primary-active-gradient-start: #2F66C4;
  --button-primary-active-gradient-end: #254FA3;
}

/* ==========================================================================
   СВЕТЛАЯ ТЕМА
   Та же логика, зеркально: страница — светло-серая, карточки — белые,
   вложенные блоки — чуть темнее белого. Тени заменяют свечение.
   Акценты темнее, чтобы держать контраст ≥ 4.5:1 на белом.
   ========================================================================== */

:root[data-theme="light"]
{
  color-scheme: light;
  /* Текст */
  --text-primary: #141B2D;
  --text-emphasis: #2B354A;
  --text-content: #4A556B;
  --text-secondary: #5C677D;
  --text-muted: #586379;
  --text-hint: #727D91;
  --text-strong: #0E1424;
  --text-loading: #5C677D;
  /* Поверхности */
  --surface-page: #F3F5F9;
  --surface-panel: #FFFFFF;
  --surface-dialog: #FFFFFF;
  --surface-tertiary: #F0F3F8;
  --surface-inset: #F6F8FB;
  --surface-raised: #F0F3F8;
  --surface-step: #EEF2F7;
  --surface-muted: #E9EDF4;
  --surface-secondary: #E9EDF4;
  --surface-card: #FFFFFF;
  --surface-highlight: rgba(20, 27, 45, 0.04);
  --surface-neutral: #EEF1F6;
  --page-background-image: url(../img/bg-comets-light.svg?v=3), radial-gradient(900px 600px at 100% 0%, rgba(59, 120, 222, .12), transparent 70%);
  /* Акценты и состояния */
  --accent-primary: #0A66C2;
  --accent-secondary: #0B7A99;
  --status-success: #1B7F39;
  --status-success-hover: #176E32;
  --status-danger: #D1343F;
  --status-danger-hover: #B82A34;
  --status-warning: #A15C07;
  --status-info: #2D6BC4;
  --status-online: #1B7F39;
  --status-pending: #A87F12;
  --status-info-bg: #E8F1FD;
  --status-danger-bg: #FDECEE;
  --status-success-bg: #E7F5EC;
  --status-warning-bg: #FDF2E1;
  /* Границы */
  --border-subtle: #F0F2F6;
  --border-default: #EAEEF4;
  --border-control: #D0D7E2;
  --border-danger: rgba(209, 52, 63, 0.40);
  --border-danger-hover: rgba(209, 52, 63, 0.75);
  --border-success: rgba(30, 138, 62, 0.40);
  --border-success-hover: rgba(30, 138, 62, 0.70);
  --border-interactive-hover: #8E9AB0;
  /* Компоненты */
  --pagination-active-bg: #E9EDF4;
  --scrollbar-table-thumb: #D3DAE5;
  --scrollbar-thumb: #BBC5D4;
  --tab-button-bg: #E9EEF6;
  --faq-expanded-bg: #F2F6FD;
  --button-round-border: #DEE3EB;
  --button-border: #EAEEF4;
  --button-secondary-bg: #EDF1F7;
  --button-secondary-hover-bg: #E1E7F0;
  --button-danger-bg: #D1343F;
  --button-danger-hover-bg: #B82A34;
  --waf-add-bg: #E8F1FD;
  --waf-add-hover-bg: #D5E6FB;
  --waf-delete-bg: #FDECEE;
  --waf-delete-hover-bg: #F9D9DD;
  --select-active-bg: #E1EDFC;
  --select-search-surface: #EEF1F6;
  --pagination-bullet-bg: var(--text-hint);
  --loader-accent: #2F6FD0;
  --icon-muted: #6E7A8F;
  --control-bg: #FFFFFF;
  --control-hover-bg: #F3F6FA;
  --loading-shimmer-color: rgba(20, 27, 45, 0.08);
  --on-accent-overlay: rgba(255, 255, 255, 0.25);
  --action-bg: #EEF2F7;
  --spinner-track: rgba(20, 27, 45, 0.12);
  --input-bg: #FFFFFF;
  --input-label: #5C677D;
  --input-placeholder: #8A94A6;
  --input-focus-border: rgba(10, 102, 194, 0.55);
  --input-autofill-bg: var(--input-bg);
  --input-autofill-text: var(--text-primary);
  --toggle-track-bg: #D3DAE5;
  --toggle-thumb-bg: #FFFFFF;
  --badge-success-bg: #E7F5EC;
  --badge-success-text: #146B30;
  --close-bg: #C9343F;
  --warning-border: #C99A06;
  --select-highlight: #FFFFFF;
  --select-dropdown-bg: #FFFFFF;
  --select-option-bg: #FFFFFF;
  --select-option-hover-bg: #F1F4F9;
  --select-option-selected-bg: #E1EDFC;
  --select-search-bg: #F3F5F9;
  --select-multiple-bg: #FFFFFF;
  --action-cancel-bg: #D1343F;
  --info-text: #0A66C2;
  --danger-text: #B42A35;
  --toast-info-bg: #E3EEFC;
  --toast-success-bg: #E3F3E8;
  --toast-warning-bg: #FCEFD9;
  --toast-danger-bg: #FCE6E8;
  --error-bg: rgba(209, 52, 63, 0.07);
  --error-border: #D1343F;
  --chart-track: rgba(20, 27, 45, 0.07);
  --progress-track: rgba(20, 27, 45, 0.10);
  --material-bg: #EEF2F7;
  --menu-active-bg: rgba(10, 102, 194, 0.10);
  --selection-text: var(--text-primary);
  --selection-bg: #CFE2FB;
  --tooltip-bg: #FFFFFF;
  --tooltip-text: var(--text-emphasis);
  --tooltip-border: #EAEEF4;
  --tooltip-shadow: rgba(20, 27, 45, 0.12);
  --tooltip-info-bg: #E4E9F1;
  --tooltip-info-text: #4A556B;
  --tooltip-info-hover-bg: #D5E6FB;
  --loader-track: var(--surface-muted);
  /* Эффекты */
  --overlay-loader: rgba(20, 27, 45, 0.12);
  --overlay-modal: #141B2D;
  --overlay-modal-opacity: 0.5;
  --shadow-dropdown: rgba(20, 27, 45, 0.12);
  --shadow-floating: rgba(20, 27, 45, 0.12);
  --shadow-select: rgba(20, 27, 45, 0.12);
  --shadow-panel: rgba(20, 27, 45, 0.16);
  --transparent-text: rgba(20, 27, 45, 0);
  --transparent-menu: rgba(10, 102, 194, 0);
  /* Статистика, календарь, карта и графики */
  --statistics-popup-bg: #FFFFFF;
  --statistics-popup-border: #EAEEF4;
  --statistics-popup-shadow: rgba(20, 27, 45, 0.14);
  --statistics-divider: #EEF1F5;
  --statistics-control-bg: #F3F6FA;
  --statistics-control-border: #DEE3EB;
  --statistics-control-text: #3E4960;
  --statistics-control-hover-bg: #E9EFF8;
  --statistics-control-hover-border: #AAB7CB;
  --statistics-label-color: #5C677D;
  --statistics-card-bg: #F6F8FB;
  --statistics-empty-overlay: rgba(243, 245, 249, 0.78);
  --calendar-control-hover-bg: #EEF3FA;
  --calendar-control-border: #DEE3EB;
  --calendar-navigation-color: #4A556B;
  --calendar-divider: #EEF1F5;
  --calendar-day-color: #2B354A;
  --calendar-selection-bg: #0A66C2;
  --calendar-range-bg: rgba(10, 102, 194, 0.10);
  --calendar-adjacent-day-color: #8E98AA;
  --calendar-disabled-day-color: #B8C0CD;
  --tracker-filter-row-text: #2B354A;
  --tracker-filter-scrollbar-thumb: #C3CCD9;
  --tracker-filter-scrollbar-bg: #C3CCD9;
  --tracker-filter-scrollbar-hover-bg: #98A6BB;
  --tracker-filter-folder-icon: #5C677D;
  --tracker-filter-item-text: #3E4960;
  --tracker-filter-item-icon: #6E7A8F;
  --tracker-filter-check-bg: #FFFFFF;
  --tracker-filter-count-color: #6E7A8F;
  --chart-series-hosts: #0A7CE0;
  --chart-series-hits: #1FA34A;
  --chart-series-waf: #0FA5C9;
  --chart-series-blocked: #E0424C;
  --chart-series-income: #D98E0B;
  --chart-legend-color: #4A556B;
  --chart-grid-color: #E8ECF2;
  --chart-tooltip-bg: #FFFFFF;
  --chart-tooltip-border: #EAEEF4;
  --geo-grid-color: rgba(20, 27, 45, 0.05);
  --geo-map-glow-color: rgba(10, 102, 194, 0.06);
  --geo-land-color: #DEE5EF;
  --geo-land-border: #B6C3D5;
  --geo-point-border: #FFFFFF;
  --geo-point-glow-color: rgba(10, 102, 194, 0.25);
  --geo-ranking-divider: #EEF1F5;
  --geo-flag-surface: rgba(20, 27, 45, 0.06);
  --geo-country-name-color: #2B354A;
  --geo-bar-track: #E4E9F0;
  --breakdown-name-color: #4A556B;
}

#preloader
{
  position: fixed;
  inset: 0;
  background: var(--background-body);
  background-image: var(--page-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.loader-wrapper
{
  position: relative;
  width: 160px;
  height: 160px;
}

.loader
{
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}

.loader .bg
{
  fill: none;
  stroke: var(--loader-track);
  stroke-width: 5;
}

.loader .progress
{
  fill: none;
  stroke: var(--loader-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 339;
  stroke-dashoffset: 339;
}

.loader-logo
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  object-fit: contain;
  animation: pulse 1.5s infinite ease-in-out;
}

/* Анимация логотипа */

@keyframes pulse
{
  0%
  {
    transform: translate(-50%,-50%) scale(1);
  }

  50%
  {
    transform: translate(-50%,-50%) scale(1.08);
  }

  100%
  {
    transform: translate(-50%,-50%) scale(1);
  }
}

#preloader.hidden
{
  opacity: 0;
  pointer-events: none;
}

.global-loader
{
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: all;
  background: var(--overlay-loader);
  visibility: hidden;
  opacity: 0;
}

.global-loader .spinner-border
{
  position: absolute;
  top: 40px;
  right: 40px;
}

.container-full
{
  padding: 20px;
  box-sizing: border-box;
}

.row
{
  --bs-gutter-x: 24px;
}

.gy-base
{
  --bs-gutter-y: 24px;
}

.gy-large
{
  --bs-gutter-y: 40px;
}

.gx-small
{
  --bs-gutter-x: 16px !important;
}

.gy-small
{
  --bs-gutter-y: 16px !important;
}

@font-face
{
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Montserrat/Montserrat-Variable.woff2?v=2") format("woff2");
}

@font-face
{
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Montserrat/Montserrat-Italic-Variable.woff2?v=2") format("woff2");
}

.fw-100
{
  font-weight: 100 !important;
}

.fw-300
{
  font-weight: 300 !important;
}

.fw-400
{
  font-weight: 400 !important;
}

.fw-500
{
  font-weight: 500 !important;
}

.fw-600
{
  font-weight: 600 !important;
}

.fw-700
{
  font-weight: 700 !important;
}

.fw-900
{
  font-weight: 900 !important;
}

.text-white
{
  color: var(--text-primary) !important;
}

.text-black
{
  color: var(--surface-page) !important;
}

.text-gray
{
  color: var(--text-emphasis) !important;
}

.text-coral
{
  color: var(--text-muted) !important;
}

.text-blue
{
  color: var(--accent-primary) !important;
}

.text-green
{
  color: var(--status-success) !important;
}

.text-cyan
{
  color: var(--accent-secondary) !important;
}

.text-red
{
  color: var(--status-danger) !important;
}

.bg-white
{
  background-color: var(--text-primary) !important;
}

.bg-black
{
  background-color: var(--surface-page) !important;
}

.bg-gray
{
  background-color: var(--text-emphasis) !important;
}

.bg-coral
{
  background-color: var(--text-muted) !important;
}

.bg-blue
{
  background-color: var(--accent-primary) !important;
}

.bg-green
{
  background-color: var(--status-success) !important;
}

.bg-cyan
{
  background-color: var(--accent-secondary) !important;
}

.bg-black-90
{
  background-color: var(--surface-muted) !important;
}

.bg-black-80
{
  background-color: var(--surface-secondary) !important;
}

.bg-black-70
{
  background-color: var(--surface-dialog) !important;
}

.reset-list
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.d-flex-center
{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mw-auto
{
  min-width: auto !important;
}

.full-img
{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.pr-0
{
  padding-right: 0 !important;
}

.pl-0
{
  padding-left: 0 !important;
}

.lh-inherit
{
  line-height: inherit !important;
}

html,
body
{
  margin: 0;
  padding: 0;
}

body
{
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--text-body);
  background-color: var(--background-body);
}

/*
 * Иллюстрация фона — отдельный неподвижный слой на весь экран.
 * background-attachment: fixed на мобильных (iOS Safari и др.) не работает,
 * а position: fixed держит фон на месте при прокрутке во всех браузерах.
 */
body::before
{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--page-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body::-webkit-scrollbar
{
  width: 6px;
  background-color: transparent;
}

body::-webkit-scrollbar-thumb
{
  border-radius: 6px;
  background-color: var(--scrollbar-thumb);
}

body::-webkit-scrollbar-track
{
  border-radius: 6px;
  background-color: transparent;
}

*
{
  outline-offset: 3px;
  outline-color: var(--focus-outline);
}

*::-moz-selection
{
  color: var(--selection-text);
  background: var(--selection-bg);
}

*::selection
{
  color: var(--selection-text);
  background: var(--selection-bg);
}

h1,
h2,
h3,
h4,
h5,
h6
{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin: var(--heading-margin);
  color: var(--heading-text);
}

h1,
.h1
{
  font-size: var(--font-size-heading-1);
}

h2,
.h2
{
  font-size: var(--font-size-heading-2);
}

h3,
.h3
{
  font-size: var(--font-size-heading-3);
}

h4,
.h4
{
  font-size: var(--font-size-heading-4);
}

h5,
.h5
{
  font-size: var(--font-size-heading-5);
}

h6,
.h6
{
  font-size: var(--font-size-heading-6);
}

p
{
  margin: var(--paragraph-margin);
}

a
{
  color: inherit;
}

a:hover
{
  text-decoration: none;
}

b,
strong
{
  font-weight: bold;
}

img
{
  max-width: 100%;
  height: auto;
}

.fa
{
  font-size: 12px;
  color: var(--text-muted);
}

.fa.red
{
  color: var(--status-danger);
}

.fa.green
{
  color: var(--status-online);
}

.fa.yellow
{
  color: var(--status-pending);
}

.fa.blue
{
  color: var(--status-info);
}

.icon
{
  display: block;
  color: var(--icon-muted);
  fill: currentColor;
}

.icon.red
{
  color: var(--status-danger);
}

.icon.green
{
  color: var(--status-online);
}

.icon.yellow
{
  color: var(--status-pending);
}

.icon.blue
{
  color: var(--status-info);
}

.menu-link:hover .icon
{
  color: var(--accent-primary);
}

.table-inner td.dataTables_empty
{
  padding: 28px 20px !important;
  border: 0 !important;
  text-align: center !important;
}

/* Пустая таблица (общая для всех DataTables): иконка и «Нет данных для отображения». */
.table-empty
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--statistics-label-color);
  font-size: 13px;
  font-weight: 400;
}

.table-empty-state
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
}

.table-empty-state-icon
{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  font-size: 28px;
}

.table-empty-state-title
{
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.table-empty-state-desc
{
  max-width: 360px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.table-empty-state-button
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.table-empty-state-search .table-empty-state-icon
{
  color: var(--text-hint);
}

.mark,
mark
{
  color: var(--accent-primary);
  background-color: var(--status-info-bg);
  font-weight: 600;
  border-radius: 4px;
}

.button
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--button-text);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 70px;
  box-sizing: border-box;
  background-color: var(--control-bg);
  border: 1px solid var(--button-border);
  outline: none;
}

.button:hover
{
  background-color: var(--control-hover-bg);
}

.button:active
{
  transform: scale(0.995);
}

.button:disabled
{
  pointer-events: none;
  color: var(--text-strong);
  filter: blur(0px);
}

.btn-loading
{
  position: relative;
  overflow: hidden;
}

.btn-loading.is-loading
{
  pointer-events: none;
  opacity: 0.9;
}

.btn-loading.is-loading::after
{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
        120deg,
        transparent 0%,
        var(--loading-shimmer-color) 50%,
        transparent 100%
    );
  animation: btnShimmer 1s infinite;
}

@keyframes btnShimmer
{
  0%
  {
    left: -150%;
  }

  100%
  {
    left: 150%;
  }
}

.button-blue
{
  background-color: var(--button-primary-bg);
  border-color: transparent;
  background-image: var(--button-primary-gradient);
}

.button-blue:hover
{
  background-color: var(--button-primary-hover-bg);
  background-image: var(--button-primary-hover-gradient);
}

.button-round
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid var(--button-round-border);
}

.button-round:hover
{
  border-color: var(--border-interactive-hover);
}

.button-bordered
{
  background-color: transparent;
  border-color: var(--button-round-border);
}

.button-bordered:hover
{
  border-color: var(--border-interactive-hover);
  background-color: transparent;
}

.button-bordered-red
{
  background-color: transparent;
  border-color: var(--border-danger);
}

.button-bordered-red:hover
{
  border-color: var(--border-danger-hover);
  background-color: transparent;
}

.button-bordered-green
{
  background-color: transparent;
  border-color: var(--border-success);
}

.button-bordered-green:hover
{
  border-color: var(--border-success-hover);
  background-color: transparent;
}

.button-with-icon
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.button-with-icon:hover
{
  color: var(--text-primary);
}

.button-with-icon:hover .button-round
{
  border-color: var(--border-interactive-hover);
}

.button-icon
{
  width: 32px;
  height: 32px;
}

.button-action
{
  padding: 0;
  width: 27px;
  min-height: 27px;
  height: 27px;
  border-radius: 6px;
  border: none;
  background: var(--action-bg);
}

.button-action.del
{
  color: var(--status-danger);
  background-color: var(--status-danger-bg);
}

.button-action.edit
{
  color: var(--status-success);
  background-color: var(--action-edit-bg);
}

.button-action:hover
{
  opacity: 0.8;
}

.button-action:active
{
  transform: scale(0.92);
}

.button-small
{
  padding: 8px 16px;
  font-size: 14px;
  min-height: 35px;
  max-height: 35px;
}

@keyframes shake
{
  0%
  {
    transform: translateX(0);
  }

  20%
  {
    transform: translateX(-5px);
  }

  40%
  {
    transform: translateX(5px);
  }

  60%
  {
    transform: translateX(-5px);
  }

  80%
  {
    transform: translateX(5px);
  }

  100%
  {
    transform: translateX(0);
  }
}

.recaptcha-error
{
  display: inline-block;
  animation: shake 0.5s ease;
}

/* Капча Google: в тёмной теме страница объявляет color-scheme: dark, а документ капчи светлый.
   Из-за этой разницы браузер подкладывает под iframe белый фон, и по краям капчи видна белая полоса */
.g-recaptcha iframe,
iframe[src*="/recaptcha/"]
{
  color-scheme: light;
}

.float-right
{
  float: right;
}

.modal-loader
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 12px;
}

.modal-spinner
{
  width: 32px;
  height: 32px;
  border: 3px solid var(--spinner-track);
  border-top-color: var(--spinner-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.modal-text
{
  font-size: 13px;
  color: var(--text-loading);
}

@keyframes spin
{
  to
  {
    transform: rotate(360deg);
  }
}

*[disabled]
{
  opacity: 0.75;
  pointer-events: none;
}

.input-field:not(:last-child)
{
  margin-bottom: 20px;
}

.input-field:not(:last-child).custom
{
  margin-bottom: 33px;
}

.input-field.error .input-error
{
  display: block;
}

.input-inner
{
  position: relative;
}

.input-inner .input-control
{
  padding-right: 55px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.input-label
{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.input-control
{
  max-width: 100%;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  color: var(--text-primary);
  background-color: var(--input-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  outline: none;
}

.input-control:disabled
{
  color: var(--input-label);
}

.input-control:focus
{
  border-color: var(--input-focus-border);
}

.input-control::-webkit-input-placeholder, .field-required::-webkit-input-placeholder
{
  color: var(--input-placeholder);
}

.input-control::-moz-placeholder, .field-required::-moz-placeholder
{
  color: var(--input-placeholder);
}

.input-control:-ms-input-placeholder, .field-required::-ms-input-placeholder
{
  color: var(--input-placeholder);
}

/* Автозаполнение браузера: убираем системную заливку (голубую/жёлтую), поле остаётся в цветах текущей темы */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
  -webkit-text-fill-color: var(--input-autofill-text);
  caret-color: var(--input-autofill-text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset;
  box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset;
}

input:autofill,
textarea:autofill,
select:autofill
{
  color: var(--input-autofill-text);
  box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset;
}

.input-control.has-copy
{
  padding-right: 55px;
}

.input-control-small
{
  min-height: 38px;
  padding-left: 12px;
  font-size: 14px;
}

.input-control-success
{
  padding-right: 55px;
  border-color: #30d450;
}

.input-control-search
{
  padding-right: 48px;
}

/* Поле поиска с иконкой лупы из спрайта. */
.input-search
{
  position: relative;
  display: block;
}

.input-search > svg
{
  position: absolute;
  top: 50%;
  right: 18px;
  width: 15px;
  height: 15px;
  fill: var(--select-arrow-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.input-pin
{
  -moz-appearance: textfield;
  min-width: auto;
  text-align: center;
  font-size: 24px;
  padding: 0;
}

.input-pin::-webkit-outer-spin-button,
.input-pin::-webkit-inner-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.input-meta
{
  font-size: 14px;
}

.input-meta:not(:first-child)
{
  margin-top: 21px;
}

.input-meta a
{
  color: var(--text-primary);
}

.input-copy
{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
}

.input-copy.normal
{
  position: relative;
  right: 0;
  top: 0;
  transform: none;
}

.input-copy.normal:active
{
  transform: scale(0.97);
}

.input-copy:before,
.input-copy:after
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.input-copy:hover svg
{
  fill: var(--icon-active);
}

.input-copy:active
{
  transform: translate(0, -50%) scale(0.97);
}

.input-row
{
  flex-wrap: wrap;
  gap: 16px;
}

.input-row.large
{
  column-gap: 32px;
}

.input-radio
{
  display: block;
  margin: 0;
  cursor: pointer;
}

.input-radio input
{
  display: none;
}

.input-radio input:checked + span
{
  color: var(--text-primary);
}

.input-radio input:checked + span:before
{
  border-color: var(--accent-primary);
}

.input-radio input:checked + span:after
{
  opacity: 1;
}

.input-radio span
{
  position: relative;
  display: block;
  padding-left: 28px;
  box-sizing: border-box;
}

.input-radio span:before,
.input-radio span:after
{
  content: "";
  position: absolute;
  border-radius: 100%;
}

.input-radio span:before
{
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-control);
  left: 0;
  top: 0;
}

.input-radio span:after
{
  width: 10px;
  height: 10px;
  left: 5px;
  top: 5px;
  background-color: var(--accent-primary);
  opacity: 0;
}

.input-toggle
{
  margin: 0;
  display: block;
}

.input-toggle a
{
  color: var(--text-primary);
}

.input-toggle:not(:last-child)
{
  margin-bottom: 16px;
}

.input-toggle input
{
  display: none;
}

.input-toggle input:checked + span
{
  color: var(--text-primary);
}

.input-toggle input:checked + span:before
{
  background-color: var(--button-primary-bg);
  background-image: var(--button-primary-gradient);
  border-color: transparent;
}

.input-toggle input:checked + span:after
{
  left: 22px;
}

.input-toggle span
{
  display: block;
  position: relative;
  padding-left: 55px;
  cursor: pointer;
  font-size: 14px;
}

.input-toggle span:before,
.input-toggle span:after
{
  content: "";
  position: absolute;
}

.input-toggle span:before
{
  width: 41px;
  height: 21px;
  background-color: var(--toggle-track-bg);
  border: 1px solid var(--border-default);
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 20px;
}

.input-toggle span:after
{
  width: 17px;
  height: 17px;
  border-radius: 100%;
  left: 2px;
  top: 2px;
  background-color: var(--toggle-thumb-bg);
}

.input-toggle-single span
{
  width: 41px;
  height: 21px;
  padding: 0;
}

.input-photo
{
  display: flex;
  align-items: center;
  gap: 17px;
}

.input-photo.active
{
  height: 100%;
}

.input-photo.active .input-photo-img
{
  background-size: cover !important;
}

.input-photo.active .input-photo-img:before
{
  display: none;
}

.input-photo.active .input-photo-info
{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.input-photo.active .input-photo-reset
{
  display: flex;
}

.input-photo-reset
{
  display: none;
}

.input-photo-img
{
  width: 132px;
  height: 132px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 100%;
}

.input-photo-img.active:before
{
  display: none;
}

.input-photo-img:before
{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface-highlight);
  opacity: 0;
}

.input-photo-camera
{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 26px;
  height: 26px;
  fill: #fff;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.input-photo-img:hover .input-photo-camera
{
  opacity: 1;
}

.input-photo.active .input-photo-camera,
.input-photo-img.active .input-photo-camera
{
  display: none;
}

.input-photo-img:hover:before
{
  opacity: 1;
}

.input-photo-img input
{
  display: none;
}

.input-photo-info
{
  flex: 1;
}

.input-hr
{
  border-bottom: 1px solid var(--border-default);
}

.input-hr:not(:last-child)
{
  margin-bottom: 20px;
}

.input-price
{
  font-size: 24px;
  font-weight: 500;
}

.input-price sup
{
  color: var(--text-muted);
  text-decoration: line-through;
}

.input-price-radio
{
  margin: 0;
  display: block;
}

.input-price-radio input
{
  display: none;
}

.input-price-radio input:checked + span
{
  color: var(--text-on-accent);
  background-color: var(--accent-primary);
  border-color: transparent;
}

.input-price-radio input:checked + span mark
{
  color: var(--text-on-accent);
  background-color: var(--on-accent-overlay);
}

.input-price-radio span
{
  display: block;
  text-align: center;
  padding: 13px 10px 14px 13px;
  box-sizing: border-box;
  border: 1px solid var(--button-round-border);
  border-radius: 8px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.input-price-radio span mark
{
  padding: 4px 11px;
  font-size: 12px;
}

.input-price-row
{
  gap: 16px;
  justify-content: space-between;
}

.input-range
{
  gap: 16px;
}

.input-range .input-control
{
  max-width: 90px;
  width: 90px;
  text-align: center;
}

.input-empty
{
  padding: 30px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: var(--surface-inset);
  text-align: center;
}

.input-expression
{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  background-color: var(--waf-add-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--accent-primary);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.input-expression-error
{
  display: none;
  font-size: 14px;
  margin-top: 5px;
  color: var(--status-danger-hover);
}

.input-box
{
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--button-round-border);
  border-radius: 8px;
}

.input-box .row
{
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.input-box-actions
{
  gap: 12px;
}

.input-box-button
{
  font-family: inherit;
  font-size: 14px;
  padding: 2px 18px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 8px;
  border: none;
  color: var(--accent-primary);
  background-color: var(--waf-add-bg);
}

.input-box-button:hover
{
  background-color: var(--waf-add-hover-bg);
}

.input-box-button:active
{
  transform: scale(0.98);
}

.input-box-button.del
{
  padding: 0;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--waf-delete-bg);
}

.input-box-button.del:hover
{
  background-color: var(--waf-delete-hover-bg);
}

.input-box-and
{
  margin-left: 22px;
  border-left: 1px solid var(--button-round-border);
  color: var(--text-primary);
  padding: 16px 0 16px 12px;
  font-size: 14px;
  line-height: 1.2;
}

select.input-control
{
  padding-right: 55px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}

textarea.input-control
{
  resize: none;
  min-height: 170px;
  padding: 16px;
}

/* Ошибка поля (вариант 4 «Подсветка поля»): текст с иконкой «!» под полем, обе темы */
label.error
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--status-danger);
}

label.error::before
{
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 3.6a1 1 0 0 0-1 1.05l.24 4.3a.76.76 0 0 0 1.52 0L9 4.65A1 1 0 0 0 8 3.6zm0 7.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 3.6a1 1 0 0 0-1 1.05l.24 4.3a.76.76 0 0 0 1.52 0L9 4.65A1 1 0 0 0 8 3.6zm0 7.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Поле пароля: кнопка «показать пароль» и индикатор надёжности (core/password-strength.js) */
.pw-wrap
{
  position: relative;
  display: block;
}

.pw-wrap > .input-control
{
  padding-right: 52px;
}

.pw-toggle
{
  position: absolute;
  top: 26px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transform: translateY(-50%);
}

.pw-toggle svg
{
  width: 18px;
  height: 18px;
  fill: var(--input-label);
}

.pw-toggle:hover svg,
.pw-toggle:focus-visible svg
{
  fill: var(--text-primary);
}

.pw-field
{
  position: relative;
}

.pw-meter
{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pw-meter[data-score="0"]
{
  display: none;
}

.pw-meter-bar
{
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, 24px);
  gap: 3px;
}

.pw-meter-bar i
{
  height: 4px;
  border-radius: 2px;
  background-color: var(--border-default);
}

.pw-meter-level
{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pw-color);
}

.pw-meter[data-score="1"] { --pw-color: var(--status-danger); }
.pw-meter[data-score="2"] { --pw-color: var(--status-warning); }
.pw-meter[data-score="3"] { --pw-color: var(--status-info); }
.pw-meter[data-score="4"] { --pw-color: var(--status-success); }

.pw-meter[data-score="1"] .pw-meter-bar i:nth-child(-n+1),
.pw-meter[data-score="2"] .pw-meter-bar i:nth-child(-n+2),
.pw-meter[data-score="3"] .pw-meter-bar i:nth-child(-n+3),
.pw-meter[data-score="4"] .pw-meter-bar i
{
  background-color: var(--pw-color);
}

/* Блок подсказок: всплывает под полем, пока оно в фокусе, и не мешает кликать по полям под ним */
.pw-tips
{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1100;
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--statistics-popup-bg);
  border: 1px solid var(--statistics-popup-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px var(--statistics-popup-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}

.pw-field.is-focused .pw-tips
{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pw-tips svg
{
  flex: none;
  width: 14px;
  height: 14px;
  fill: var(--text-hint);
}

.pw-tips-problem
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  color: var(--status-danger);
  border-bottom: 1px solid var(--statistics-popup-border);
}

.pw-tips-problem[hidden]
{
  display: none;
}

.pw-tips-problem svg
{
  margin-top: 2px;
  fill: var(--status-danger);
}

.pw-tips-list
{
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-tips-list li
{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.pw-tips-list li.is-done
{
  color: var(--text-primary);
}

.pw-tips-list li.is-done svg
{
  fill: var(--status-success);
}

#checkbox_rules-error
{
  padding-left: 55px;
}

.input-description
{
  padding: 14px 22px;
  font-size: 14px;
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.input-control.error:not([aria-invalid="false"]):not(:disabled)
{
  border-color: var(--status-danger) !important;
  background-color: color-mix(in srgb, var(--status-danger) 6%, var(--input-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 14%, transparent);
}

.input-control.error:not([aria-invalid="false"]):not(:disabled) + span.select2 .select2-selection,
.linedtextarea.error .linedwrap
{
  border-color: var(--waf-error-color) !important;
  background-color: color-mix(in srgb, var(--status-danger) 6%, var(--input-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 14%, transparent);
}

.input-control.error[aria-invalid="false"] + label.error
{
  display: none !important;
}

.time-range-sep
{
  padding-top: 17px;
}

.toggle-accessibility input,
.toggle-accessibility input:checked + div
{
  display: none;
}

.toggle-accessibility input:checked + div + div
{
  display: inline-block;
}

.toggle-accessibility div
{
  cursor: pointer;
}

.toggle-accessibility div:nth-child(2)
{
  display: inline-block;
}

.toggle-accessibility div:nth-child(3)
{
  display: none;
}

.input-panel
{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 14px;
  padding: 6px 20px;
  box-sizing: border-box;
  border-left: 1px solid var(--button-round-border);
  white-space: nowrap;
}

.input-reset
{
  -moz-appearance: textfield;
}

.input-reset::-webkit-outer-spin-button,
.input-reset::-webkit-inner-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.resend-code
{
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--status-info);
  cursor: pointer;
}

.resend-code:hover
{
  color: var(--button-primary-hover-bg);
}

.modal
{
  --bs-modal-width: 440px;
}

.modal-backdrop
{
  --bs-backdrop-bg: var(--overlay-modal);
  --bs-backdrop-opacity: var(--overlay-modal-opacity);
}

.modal-close
{
  border-radius: 8px;
  width: 27px;
  height: 27px;
  color: var(--text-on-accent);
  background: var(--modal-close-bg);
  cursor: pointer;
  border: none;
}

.modal-close:hover svg
{
  fill: var(--icon-active);
}

.modal-close:active
{
  transform: scale(0.97);
}

.modal-content
{
  border: none;
  box-shadow: none;
  background-color: var(--control-bg);
  box-sizing: border-box;
}

.modal-header
{
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 10px;
  background: var(--surface-raised);
}

.modal-inner
{
  padding: 20px;
}

.modal-title
{
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}

.modal-title span
{
  color: var(--accent-primary);
  background-color: var(--status-info-bg);
  font-weight: 300;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 4px;
}

.modal-desc p:last-child
{
  margin: 0;
}

.modal-desc ol,
.modal-desc ul
{
  padding-left: 18px;
}

.modal-row
{
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.modal-price .input-field:not(:last-child)
{
  margin-bottom: 24px;
}

.modal-accordeon
{
  color: var(--text-primary);
  background-color: var(--surface-inset) !important;
}

.modal-accordeon:not(:last-child)
{
  margin-bottom: 16px;
}

.modal-accordeon-header
{
  display: flex;
  align-items: center;
  padding: 14px 15px;
  box-sizing: border-box;
  justify-content: space-between;
  cursor: pointer;
  gap: 16px;
}

.modal-accordeon-header.active .toggle-arrow
{
  transform: rotate(180deg);
}

.modal-accordeon-header.active .toggle-arrow svg
{
  fill: var(--icon-active);
}

.modal-accordeon-content
{
  padding: 0 15px 15px 15px;
  box-sizing: border-box;
  display: none;
}

.modal-accordeon-content p:last-child
{
  margin: 0;
}

.modal-accordeon-content .button
{
  padding-left: 24px;
  padding-right: 24px;
}

/* Дата и время во всём проекте (вариант 1): дата обычным текстом, время рядом мельче и тише */
.af-date
{
  font-weight: 500;
}

.af-time
{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted) !important;
}

/* Dropdown */

.toggle-arrow
{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

[data-toggle-menu]:hover .toggle-arrow svg,
[data-toggle-menu][aria-expanded="true"] .toggle-arrow svg,
[data-toggle-menu].active .toggle-arrow svg,
[data-bs-toggle]:hover .toggle-arrow svg,
[data-bs-toggle][aria-expanded="true"] .toggle-arrow svg,
[data-bs-toggle].active .toggle-arrow svg
{
  fill: var(--icon-active);
}

[data-toggle-menu][aria-expanded="true"] .toggle-arrow,
[data-toggle-menu].active .toggle-arrow,
[data-bs-toggle][aria-expanded="true"] .toggle-arrow,
[data-bs-toggle].active .toggle-arrow
{
  transform: rotate(180deg);
}

.dropdown-menu
{
  --bs-dropdown-bg: var(--control-bg);
  --bs-dropdown-border-radius: 8px;
  --bs-dropdown-box-shadow: 0px 4px 106px var(--shadow-dropdown);
  --bs-dropdown-border-width: 0px;
  border: 1px solid var(--border-default);
  margin-top: 3px !important;
  overflow: hidden;
  padding: 0;
  color: inherit;
}

.dropdown-menu.large.body-placement
{
  max-width: 240px;
}

.dropdown-menu.large
{
  min-width: 240px;
}

.dropdown-menu li:first-child a
{
  padding-top: 12px;
}

.dropdown-menu li:last-child a
{
  padding-bottom: 12px;
}

.dropdown-menu-link
{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  box-sizing: border-box;
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-menu-link:hover
{
  background-color: var(--control-hover-bg);
}

.dropdown-menu-link:hover svg
{
  fill: var(--accent-primary);
}

.dropdown-menu-link-remove
{
  color: var(--status-danger) !important;
}

.dropdown-menu-link-remove svg
{
  fill: var(--status-danger);
}

.dropdown-menu-link-remove .dropdown-menu-text
{
  color: var(--status-danger);
}

.dropdown-menu-link-remove:hover
{
  background-color: var(--status-danger-bg);
}

.dropdown-menu-link-remove:hover svg
{
  fill: var(--status-danger);
}

.dropdown-menu-icon
{
  width: 20px;
  height: 20px;
}

.dropdown-menu-text
{
  flex: 1;
}

.dropdown-filter
{
  overflow: inherit;
}

.dropdown .button-small[aria-expanded="true"] svg
{
  fill: var(--icon-active);
}

.dropdown-filter
{
  min-width: 630px;
  padding: 24px;
  box-sizing: border-box;
  background-color: var(--filter-panel-bg);
}

.dropdown-filter-row
{
  --bs-gutter-y: 20px;
}

.dropdown-filter-actions
{
  justify-content: space-between;
  margin-top: 23px;
  gap: 20px;
}

.dropdown-filter-actions button:not(.button-blue)
{
  background-color: var(--button-secondary-hover-bg);
}

.dropdown-filter-actions button:not(.button-blue):hover
{
  opacity: 0.8;
}

/* End Dropdown */

.tooltip
{
  --bs-tooltip-bg: var(--tooltip-bg);
  --bs-tooltip-color: var(--tooltip-text);
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-font-size: 12px;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-margin: 10px;
}

.tooltip
{
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-padding-x: 12px;
  --bs-tooltip-padding-y: 9px;
}

.tooltip-inner
{
  text-align: left;
  line-height: 1.45;
  font-weight: 400;
  border: 1px solid var(--tooltip-border);
  box-shadow: 0 8px 24px var(--tooltip-shadow);
}

.tooltip-info
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tooltip-info-text);
  background-color: var(--tooltip-info-bg);
  border-radius: 100%;
  margin: 0 6px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.tooltip-info:hover,
.tooltip-info[aria-describedby]
{
  color: var(--accent-primary);
  background-color: var(--tooltip-info-hover-bg);
}

.input-field
{
  position: relative;
}

.input-field:not(.adaptive-select) .select2-container.select2-container--open:last-child
{
  top: 100% !important;
}

.select2-container--open .select2-dropdown--above
{
  margin: 0;
  top: -5px;
}

.input-select-option
{
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-select-option-icon
{
  width: 30px;
  height: 30px;
}

.select2
{
  width: 100% !important;
  outline: none;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple
{
  font-family: inherit;
  font-size: inherit;
  color: var(--text-primary);
  background-color: var(--input-bg);
  border: 1px solid var(--border-default) !important;
  max-width: 100%;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 8px !important;
  cursor: pointer;
}

.select2-container .select2-selection--single[aria-expanded="true"],
.select2-container .select2-selection--multiple[aria-expanded="true"]
{
  background-color: var(--select-highlight) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered
{
  padding-left: 0;
  color: var(--text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered
{
  line-height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  top: 50%;
  transform: translate(0, -50%);
  right: 16px;
  will-change: auto;
}

/* Стрелки Select2 и DataTables: <svg><use> вставляет core/icons.js. */
.ic-s2-arrow,
.ic-dt-order
{
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  fill: var(--select-arrow-color);
}

.ic-dt-order
{
  width: 12px;
  height: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b
{
  display: none;
}

.select2-container.select2-container--open .select2-selection__arrow
{
  transform: translate(0, -50%) rotate(180deg);
}

.select2-dropdown
{
  background-color: var(--select-dropdown-bg);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  margin-top: 5px;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0px 0px 25px 0px var(--shadow-select) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable
{
  background-color: var(--select-option-hover-bg) !important;
  color: var(--select-option-text) !important;
}

.select2-container--default .select2-results__option--selected
{
  background-color: var(--select-option-selected-bg) !important;
  color: var(--select-option-text) !important;
}

.select2-container--default .select2-results__option--selected.select2-results__option--highlighted
{
  background-color: var(--select-option-hover-bg) !important;
  color: var(--select-option-text) !important;
}

.select2-results__option
{
  padding: 12px 16px;
  box-sizing: border-box;
  font-size: 16px;
}

/* Группы в списке (часовые пояса по частям света) */
.select2-results__option.select2-results__option--group
{
  padding: 0;
}

.select2-container--default .select2-results__group
{
  padding: 14px 16px 6px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-hint);
  cursor: default;
}

.select2-container--default .select2-results__option .select2-results__option
{
  padding-left: 16px;
}

.select2-search--dropdown
{
  padding: 12px 16px;
  box-sizing: border-box;
  display: none;
}

.select2-search--dropdown input
{
  border: none;
}

.select2-container--default .select2-results > .select2-results__options
{
  max-height: 270px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar,
.balance-step::-webkit-scrollbar
{
  width: 4px;
  background-color: transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb,
.balance-step::-webkit-scrollbar-thumb
{
  border-radius: 4px;
  background-color: var(--scrollbar-thumb);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track,
.balance-step::-webkit-scrollbar-track
{
  border-radius: 4px;
  background-color: transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice
{
  display: inline-block;
  margin-left: 5px;
  margin-top: 11px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove
{
  font-weight: normal;
}

.select2-selection--multiple .select2-search__field
{
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  padding-top: 14px !important;
  box-sizing: border-box !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  pointer-events: none;
  color: transparent;
}

.select2-selection--multiple .select2-search__field::-webkit-input-placeholder
{
  color: var(--text-muted);
}

.select2-selection--multiple .select2-search__field:-moz-placeholder
{
  color: var(--text-muted);
}

.select2-selection--multiple .select2-search__field::-moz-placeholder
{
  color: var(--text-muted);
}

.select2-selection--multiple .select2-search__field:-ms-input-placeholder
{
  color: var(--text-muted);
}

.select2-selection--multiple .select2-selection__rendered
{
  position: relative;
  top: 14px;
}

.select2-selection--multiple > .ic-s2-arrow
{
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translate(0, -50%);
}

.select2-selection--multiple[aria-expanded="true"] > .ic-s2-arrow
{
  transform: translate(0, -50%) rotate(180deg);
}

.select2-results__options[aria-multiselectable="true"] li
{
  position: relative;
}

.select2-results__options[aria-multiselectable="true"] li:after
{
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid var(--text-content);
  padding: auto;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 2px;
  position: absolute;
}

.select2-results__options[aria-multiselectable="true"] li.select2-results__option--selected:after
{
  background-color: var(--accent-primary);
  border-color: transparent;
}

.ic-s2-check
{
  display: none;
  position: absolute;
  top: 50%;
  right: 24px;
  z-index: 1;
  width: 10px;
  height: 10px;
  fill: #fff;
  transform: translate(0, -50%);
  pointer-events: none;
}

.select2-results__options[aria-multiselectable="true"] li.select2-results__option--selected > .ic-s2-check
{
  display: block;
}

.select2-results__options[aria-multiselectable="true"] li .input-select-option
{
  gap: 12px;
}

.select2-results__options[aria-multiselectable="true"] li .input-select-option img
{
  width: 23px;
  height: 16px;
  border-radius: 4px;
}

.select2-actions
{
  border-bottom: 1px solid var(--border-default);
  padding: 20px;
  box-sizing: border-box;
}

.select2-actions .input-search
{
  margin-bottom: 16px;
}

.select2-actions input
{
  background-color: var(--select-search-bg);
  border: none;
}

.select2-actions button
{
  color: var(--text-strong);
  border-radius: 5px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  background-color: transparent;
  display: inline-block;
  box-shadow: none;
  border: none;
  outline: none;
  margin-right: 5px;
}

.select2-actions button:hover
{
  color: var(--text-primary);
}

.select2-actions button.select-all
{
  background-color: var(--button-primary-bg);
  background-image: var(--button-primary-gradient);
}

.select2-actions button.select-all:hover
{
  background-color: var(--button-primary-hover-bg);
  background-image: var(--button-primary-hover-gradient);
}

.select2-actions button.cancel-all
{
  background-color: var(--action-cancel-bg);
}

.select2-actions button.cancel-all:hover
{
  background-color: var(--button-danger-bg);
}

.select2-container--default.select2-container--disabled .select2-selection--single
{
  background-color: var(--surface-inset);
  opacity: 0.5;
}

/* Убирает светлый блик Select2 Multiple в форме WAF. */

.waf-add .select2-container--default .select2-selection--multiple,
.waf-add .select2-container--default.select2-container--focus .select2-selection--multiple,
.waf-add .select2-container--default.select2-container--open .select2-selection--multiple,
.waf-add .select2-container--default.select2-container--disabled .select2-selection--multiple,
.waf-add .select2-selection--multiple[aria-expanded="true"],
.waf-add .select2-selection--multiple:focus,
.waf-add .select2-selection--multiple:focus-visible
{
  background-color: var(--select-multiple-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* До появления строки «Выбрано: N» Select2 успевает создать стандартный */

.waf-add .select2-selection--multiple .select2-selection__rendered,
.waf-add .select2-selection--multiple .select2-selection__choice,
.waf-add .select2-selection--multiple .select2-search--inline,
.waf-add .select2-selection--multiple .select2-search__field
{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/*
 * Таблицы кабинета (этап 133, вариант C): одна панель как у .box, лёгкая шапка,
 * строки с линиями, низ (страницы, счётчик, «По N») внутри панели.
 */
.table-container
{
  white-space: nowrap;
  font-size: 14px;
  background-color: var(--control-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.table-inner
{
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
}

/* Без !important: в скрытой шапке прокрутки DataTables обнуляет отступы и рамки через style */
.table-container .table-inner thead th
{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-hint);
  white-space: nowrap;
  text-align: left;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--border-default);
}

.table-container .table-inner thead th .tooltip-info
{
  margin: 0 0 0 6px;
}

.table-container .table-inner thead th .dt-column-order
{
  width: 12px;
  margin-left: 4px !important;
}

/* Название, «?» и стрелка — рядом; DataTables сам разносит их и переворачивает у числовых колонок */
.table-container .table-inner .dt-column-header
{
  flex-direction: row;
  justify-content: flex-start;
  gap: 0;
}

.table-container .table-inner th.is-num
{
  text-align: right;
}

/* У чисел стрелка слева от названия: название стоит ровно над числами */
.table-container .table-inner th.is-num .dt-column-header
{
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.table-container .table-inner th.is-num .dt-column-order
{
  margin: 0 4px 0 0 !important;
}

.table-inner tbody
{
  color: var(--text-primary);
}

.table-container .table-inner tbody td
{
  padding: 0;
  height: 0;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}

.table-container .table-inner tbody tr:last-child td
{
  border-bottom: 0;
}

/* Пустая таблица и «Загрузка…»: текст по центру с отступом (DataTables сам центрирует, общий td — влево) */
.table-container .table-inner tbody td.dt-empty
{
  padding: 16px;
  text-align: center;
}

.table-inner tbody td .table-field
{
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.table-container .table-inner td.is-num .table-field
{
  justify-content: flex-end;
  text-align: right;
}

/* Строка под курсором: фон и полоска слева */
.table-container .table-inner tbody tr:not(.sk-row):hover > td:not(.dt-empty)
{
  background-color: var(--surface-highlight);
}

.table-container .table-inner tbody tr:not(.sk-row):hover > td:first-child:not(.dt-empty)
{
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.table-inner tbody td a
{
  color: var(--accent-primary);
}

.table-actions
{
  display: flex;
  gap: 6px;
}

table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td
{
  padding: 0;
}

.dt-paging nav
{
  display: flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.dt-paging nav .first,
.dt-paging nav .last
{
  display: none !important;
}

.dt-paging nav .dt-paging-button
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
}

.dt-paging nav .dt-paging-button.disabled
{
  opacity: .4;
}

.dt-paging nav .ellipsis
{
  min-width: 22px;
  text-align: center;
  color: var(--text-hint);
}

.dt-paging nav .dt-paging-button:hover
{
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.dt-paging nav .dt-paging-button.current
{
  color: var(--text-primary) !important;
}

div.dt-container .dt-paging .dt-paging-button:hover
{
  background: none !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover
{
  color: var(--text-primary) !important;
  background: var(--pagination-active-bg) !important;
  box-shadow: none !important;
}

th[aria-sort="ascending"] .dt-column-order,
td[aria-sort="ascending"] .dt-column-order
{
  transform: rotate(180deg);
}

/* Стрелка видна только у активной колонки; у сортируемой — бледно при наведении */
.table-container .table-inner thead th .dt-column-order
{
  opacity: 0;
}

.table-container .table-inner thead th.dt-orderable-asc:hover .dt-column-order,
.table-container .table-inner thead th.dt-orderable-desc:hover .dt-column-order
{
  opacity: .5;
}

.table-container .table-inner thead th[aria-sort] .dt-column-order
{
  opacity: 1;
}

.table-container .table-inner thead th[aria-sort] .ic-dt-order
{
  fill: var(--accent-primary);
}

.dt-column-title
{
  font-weight: normal;
}

.dt-column-order
{
  position: relative !important;
  right: 0 !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 6px !important;
  width: 15px;
  height: 15px;
  outline: none;
  will-change: auto;
}

.dt-column-order:before,
.dt-column-order:after
{
  display: none !important;
}

div.dt-container.dt-empty-footer .dt-scroll-body
{
  border: none;
  padding-bottom: 7px;
}

div.dt-container.dt-empty-footer .dt-scroll-body::-webkit-scrollbar
{
  width: 4px;
  height: 4px;
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}

div.dt-container.dt-empty-footer .dt-scroll-body::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  background-color: var(--scrollbar-table-thumb);
}

div.dt-container.dt-empty-footer .dt-scroll-body::-webkit-scrollbar-track
{
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}

.table-inner.large .table-field
{
  min-height: 82px;
}

table .no-sorting
{
  pointer-events: none;
}

table .no-sorting .dt-column-order
{
  display: none !important;
}

table .no-sorting .tooltip-info
{
  pointer-events: all;
}

table .dropdown-menu-text
{
  color: var(--text-primary);
}

.table-container-custom
{
  max-width: 1124px;
  overflow: hidden;
}

.toggle-details svg:nth-child(2)
{
  display: none;
}

tr.dt-hasChild td .toggle-details svg:nth-child(1)
{
  display: none;
}

tr.dt-hasChild td .toggle-details svg:nth-child(2)
{
  display: block;
}

tr.dt-hasChild td .toggle-details svg
{
  fill: var(--icon-active);
}

.table-field.child
{
  background-color: var(--surface-inset);
  padding-left: 75px !important;
  padding-right: 75px !important;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.box code.hljs
{
  padding: 0 20px 20px 20px;
  background-color: transparent;
  box-sizing: border-box;
}

.box code.hljs.inline
{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.box code.hljs.inline .hljs-literal,
.box code.hljs.inline .hljs-addition,
.box code.hljs.inline .hljs-attribute,
.box code.hljs.inline .hljs-meta .hljs-string,
.box code.hljs.inline .hljs-regexp,
.box code.hljs.inline .hljs-string
{
  display: inline-block;
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title
{
  color: var(--info-text);
}

.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag,
.hljs-section,
.hljs-title
{
  font-weight: normal;
}

.hljs-literal,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string
{
  color: var(--danger-text);
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword
{
  color: var(--text-primary);
}

.toasts
{
  position: fixed;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  align-items: flex-end;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.toasts-item
{
  pointer-events: all;
  position: relative;
  padding: 18px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  width: 350px;
  overflow: hidden;
  transform: translateX(100%);
  animation: slideIn 0.4s ease forwards;
}

.toasts-item.hide
{
  transform: translateX(0);
  animation: slideOut 0.4s ease forwards;
}

.toasts-item-close
{
  position: absolute;
  right: 6px;
  top: 6px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toasts-item-close:hover svg
{
  fill: var(--icon-active);
}

.toasts-item-icon
{
  width: 32px;
  height: 32px;
}

.toasts-item-content
{
  flex: 1;
}

.toasts-item-title
{
  color: var(--text-primary);
  font-weight: 700;
}

.toasts-item-desc
{
  font-size: 14px;
}

.toasts-item-desc span
{
  color: var(--text-primary);
}

.toasts-item.info
{
  background: linear-gradient(90deg, var(--toast-info-bg) 0%, var(--toast-surface) 71.43%);
}

.toasts-item.success
{
  background: linear-gradient(90deg, var(--toast-success-bg) 0%, var(--toast-surface) 71.43%);
}

.toasts-item.warning
{
  background: linear-gradient(90deg, var(--toast-warning-bg) 0%, var(--toast-surface) 71.43%);
}

.toasts-item.error
{
  background: linear-gradient(90deg, var(--toast-danger-bg) 0%, var(--toast-surface) 71.43%);
}

@keyframes slideIn
{
  to
  {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut
{
  to
  {
    transform: translateX(100%);
    opacity: 0;
  }
}

.input-pin-row
{
  flex-wrap: nowrap;
}

.waf-rulls,
.waf-rulls-items:not(:last-child)
{
  margin-bottom: 20px;
}

.waf-rulls-items .waf-rulls-item:not(:last-child)
{
  position: relative;
}

.waf-rulls-items .waf-rulls-item:not(:last-child):after
{
  content: "AND";
  display: block;
  margin-left: 22px;
  border-left: 1px solid var(--button-round-border);
  color: var(--text-primary);
  padding: 16px 0 16px 12px;
  font-size: 14px;
  line-height: 1.2;
}

.waf-rulls-result .input-control
{
  min-height: auto;
}

.waf-rulls-result .input-copy
{
  top: inherit;
  bottom: 16px;
  transform: none;
}

.conditional-value
{
  display: none;
}

.conditional-value.active
{
  display: block;
}

.disabled
{
  opacity: 0.5;
  pointer-events: none;
}

.disabled label.error
{
  display: none !important;
}

.disabled .input-control.error + span.select2 .select2-selection
{
  border-color: var(--border-default) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder
{
  color: var(--text-muted);
}

.swiper-pagination
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.swiper-pagination-bullet
{
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: var(--pagination-bullet-bg);
  opacity: 0.5;
}

.swiper-pagination-bullet-acitve
{
  opacity: 1;
}

.linedwrap
{
  /* Колонка номеров строк чуть темнее поля, само поле — как обычный input */
  --lined-gutter-bg: color-mix(in srgb, var(--text-primary) 4%, var(--input-bg));

  position: relative;
  padding: 16px 0 16px 0;
  box-sizing: border-box;
  background: linear-gradient(to right, var(--lined-gutter-bg) 0 49px, transparent 49px), var(--input-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  display: flex;
}

.linedwrap:focus-within
{
  border-color: var(--input-focus-border);
}

.linedwrap:before
{
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 49px;
  top: 0;
  background-color: var(--border-default);
}

.linedwrap textarea
{
  /* Плагин задаёт ширину в пикселях при запуске (и 0, если блок был скрыт) —
     растягиваем поле на всю доступную ширину. */
  width: 100% !important;
  min-height: 0;
  padding: 0 16px;
  color: var(--text-primary);
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  line-height: 22.55px;
}

.linedwrap textarea::-webkit-scrollbar
{
  width: 4px;
  background-color: transparent;
}

.linedwrap textarea::-webkit-scrollbar-thumb
{
  border-radius: 4px;
  background-color: var(--scrollbar-thumb);
}

.linedwrap textarea::-webkit-scrollbar-track
{
  border-radius: 6px;
  background-color: transparent;
}

.linedtextarea
{
  padding: 0px;
  margin: 0px;
}

.linedtextarea textarea::-webkit-scrollbar,
textarea::-webkit-scrollbar
{
  width: 4px;
  background-color: transparent;
}

.linedtextarea textarea::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb
{
  border-radius: 4px;
  background-color: var(--scrollbar-thumb);
}

.linedtextarea textarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track
{
  border-radius: 4px;
  background-color: transparent;
}

.linedwrap .lines
{
  margin-top: 0px;
  width: 48px;
  float: left;
  overflow: hidden;
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
}

.linedwrap .codelines .lineno
{
  color: var(--text-hint);
  padding-right: 15px;
  padding-top: 0.3px;
  text-align: right;
  white-space: nowrap;
  font-family: inherit;
  font-size: 12px;
  line-height: 22.4px;
}

.lineno.line-error
{
  background-color: var(--error-bg);
  border-left: 2px solid var(--error-border);
}

.linedtextarea
{
  flex: 1;
  min-width: 0;
}

.linedtextarea .linedwrap
{
  width: 100% !important;
}

.jconfirm.jconfirm-white .jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg
{
  background-color: var(--overlay-modal);
  opacity: var(--overlay-modal-opacity);
}

.jconfirm.jconfirm-white .jconfirm-box,
.jconfirm.jconfirm-light .jconfirm-box
{
  border-radius: 0.5rem;
}

.jconfirm .jconfirm-box
{
  color: var(--bs-modal-color);
  background-clip: padding-box;
  border: none;
  border-radius: 0.5rem;
  outline: 0;
  background-color: var(--confirm-dialog-bg);
  padding: 24px;
  box-sizing: border-box;
  box-shadow: none;
}

.jconfirm .jconfirm-box div.jconfirm-title-c
{
  margin-bottom: 12px;
  padding: 0;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title
{
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: initial;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane
{
  margin-bottom: 24px;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons
{
  display: flex;
  align-items: center;
  float: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button
{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 10px;
  box-sizing: border-box;
  background-color: var(--button-secondary-bg);
  border: 1px solid var(--button-border);
  outline: none;
  color: var(--text-primary) !important;
  text-transform: capitalize;
  margin: 0;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button:hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button:hover
{
  background-color: var(--button-secondary-hover-bg) !important;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button:nth-child(1),
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button:nth-child(1)
{
  background-color: var(--button-danger-bg);
  border-color: transparent;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button:nth-child(1):hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button:nth-child(1):hover
{
  background-color: var(--button-danger-hover-bg) !important;
}

.jconfirm .jconfirm-box.jconfirm-animation-modal
{
  transform: translate(0, -50px);
}

.contact-field
{
  display: flex;
  align-items: center;
  height: 52px;
  color: var(--text-primary);
  background-color: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
}

.contact-field > select:not(.select2-hidden-accessible)
{
  display: none;
}

/* Пока Select2 не запустился, вместо обычного списка видна копия выбранного мессенджера */
.contact-field-stub
{
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 80px;
  align-self: stretch;
  padding-left: 21px;
  background-color: var(--control-bg);
}

.contact-field-stub img
{
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.contact-field .select2-container
{
  width: 80px !important;
  min-width: 80px !important;
  background-color: var(--control-bg);
}

.contact-field .select2-selection--single
{
  height: 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.contact-field .select2-selection__rendered
{
  height: 58px !important;
  line-height: 58px !important;
  padding-right: 0 !important;
}

.contact-field .select2-selection__arrow
{
  height: 58px !important;
  right: 5px !important;
}

.contact-field input
{
  flex: 1;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  padding: 0 16px;
  outline: none;
}

.messenger-option
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-right: 10px;
}

.messenger-option img
{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Бокс */

.box
{
  border-radius: var(--radius-base);
  padding: 20px;
  box-sizing: border-box;
  background-color: var(--control-bg);
  border: 1px solid var(--border-default);
}

.box-header.d-flex
{
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.box-header:not(:last-child)
{
  margin-bottom: 26px;
}

.box-row
{
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}

.box-row-col
{
  position: relative;
}

.box-row-col.col-md-4:not(:last-child):after
{
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border-default);
  position: absolute;
  right: 0;
  top: 0;
}

/* Графики ECharts рисуются внутри <div>, поэтому высота задаётся явно. */

.box-chart.echart-line
{
  width: 100%;
  height: 260px;
}

.box-chart-doughnut
{
  aspect-ratio: 1 / 1;
  max-width: 100px;
  width: 100%;
  margin: 0 auto 30px auto;
  background: radial-gradient(circle at center, var(--gradient-transparent) 0, var(--gradient-transparent) 46%, var(--chart-track) 32%, var(--chart-track) 60%, var(--chart-track) 70%, var(--gradient-transparent) 30%, var(--gradient-transparent) 100%);
}

.box-chart-vals.d-flex
{
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 5px;
}

.box-chart-vals.d-flex .box-chart-val
{
  margin: 0;
}

.box-chart-val
{
  display: flex;
  font-size: 13px;
  position: relative;
  padding-left: 14px;
  cursor: pointer;
}

.box-chart-val.hidden
{
  opacity: 0.3;
}

.box-chart-val:before
{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background-color: var(--point-color);
}

.box-chart-val:not(:last-child)
{
  margin-bottom: 10px;
}

.box-chart-val span
{
  margin-left: auto;
  color: var(--text-primary);
}

.box-lines
{
  padding: 24px;
}

.box-line
{
  box-sizing: border-box;
  padding: 24px 0;
}

.box-line:first-child
{
  padding-top: 6px;
}

.box-line:last-child
{
  padding-bottom: 0;
}

.box-line:not(:last-child)
{
  border-bottom: 1px solid var(--border-default);
}

.box-line-title
{
  color: var(--text-primary);
}

.box-line-desc
{
  max-width: 285px;
  margin-top: 16px;
  font-size: 14px;
}

.box-line-row
{
  --bs-gutter-y: 20px;
}

/* # Бокс */

/* Карточка "Premium" */

.main-plan
{
  display: block;
  text-decoration: none;
  background: linear-gradient(to right, var(--surface-highlight), transparent);
  position: relative;
  padding: 1px;
  overflow: hidden;
  border-radius: 13px;
}

.main-plan.custom
{
  border-radius: 8px;
}

.main-plan-inner
{
  border: none;
  padding: 16px;
  background-color: var(--surface-inset);
}

.main-plan:before,
.main-plan:after
{
  content: "";
  position: absolute;
  pointer-events: none;
}

.main-plan:before
{
  height: 30px;
  width: 1px;
  left: 0;
  top: 12px;
  z-index: 1;
}

.main-plan:after
{
  width: 32px;
  height: 52px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100%;
  filter: blur(45px);
}

.main-plan-header
{
  margin-bottom: 9px;
  gap: 8px;
}

.main-plan-header-icon
{
  width: 23px;
  height: 23px;
}

.main-plan-header-title
{
  font-size: 18px;
  flex: 1;
}

.main-plan-header-button
{
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid var(--border-default);
}

.main-plan-progress-desc
{
  font-size: 14px;
  margin-bottom: 12px;
}

.main-plan-progress-inner
{
  position: relative;
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--progress-track);
}

.main-plan-progress-fill
{
  position: absolute;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--transparent-text) 0%, var(--plan-progress-fill) 100%);
}

.main-plan-val
{
  font-size: 28px;
  line-height: 1;
  margin-top: 20px;
}

.main-plan.light:before
{
  background: linear-gradient(to bottom, transparent, var(--plan-basic-accent), transparent);
}

.main-plan.light:after
{
  background-color: var(--plan-basic-accent);
}

.main-plan.optimal:before
{
  background: linear-gradient(to bottom, transparent, var(--status-success), transparent);
}

.main-plan.optimal:after
{
  background-color: var(--status-success);
}

.main-plan.premium:before
{
  background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent);
}

.main-plan.premium:after
{
  background-color: var(--accent-primary);
}

.main-plan.corporate:before
{
  background: linear-gradient(to bottom, transparent, var(--status-danger), transparent);
}

.main-plan.corporate:after
{
  background-color: var(--status-danger);
}

/* # Карточка "Premium" */

/* Карточка "Any questions?" */

.any-questions-title
{
  margin-bottom: 8px;
}

.any-questions-desc
{
  font-size: 14px;
  margin-bottom: 12px;
}

.any-questions a
{
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}

.any-questions a:hover
{
  text-decoration: underline;
}

/* # Карточка "Any questions?" */

/* Уведомления */

.notif
{
  min-width: 380px;
}

.notif-item
{
  padding: 12px 19px;
  box-sizing: border-box;
  font-size: 14px;
}

.notif-item:not(:last-child)
{
  border-bottom: 1px solid var(--border-default);
}

.notif-item-header
{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.notif-item-title
{
  flex: 1;
  position: relative;
  font-weight: 600;
}

.notif-item-title.active
{
  padding-left: 16px;
}

.notif-item-title.active:before
{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background-color: var(--accent-primary);
}

.notif-item-date
{
  font-size: 13px;
}

.action-notif .main-actions-item-icon.active circle,
.action-notif:hover circle
{
  fill: var(--accent-primary);
}

/* # Уведомления */

/* Табы */

.tabs-header
{
  margin-bottom: 24px;
}

.tabs-header-api
{
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.tabs-header-inner
{
  padding: 6px;
  border-radius: var(--radius-base);
}

.tabs-header-button
{
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  padding: 10px 35px;
  box-sizing: border-box;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
}

.tabs-header-button.current
{
  background-color: var(--tab-button-bg);
}

.tabs-content-item:not(.current)
{
  display: none;
}

/* # Табы */

/* FAQ */

.faq-item
{
  padding: 0;
}

.faq-item.current,
.faq-item:hover
{
  background-color: var(--faq-expanded-bg);
}

.faq-item.current .faq-item-arrow:before
{
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item:not(:last-child)
{
  margin-bottom: 20px;
}

.faq-item-header
{
  padding: 24px 65px 24px 24px;
  box-sizing: border-box;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  position: relative;
}

.faq-item-arrow
{
  position: absolute;
  width: 38px;
  height: 38px;
  top: 50%;
  right: 20px;
  border: 1px solid var(--button-round-border);
  border-radius: 100%;
  transform: translate(0, -50%);
}

.faq-item-arrow:before,
.faq-item-arrow:after
{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--text-primary);
  border-radius: 5px;
}

.faq-item-arrow:before
{
  height: 12px;
  width: 1px;
}

.faq-item-arrow:after
{
  width: 12px;
  height: 1px;
}

.faq-item-content
{
  padding: 0 24px 24px 24px;
  box-sizing: border-box;
  display: none;
}

.faq-item-content-text
{
  max-width: 800px;
}

.faq-item-content-text p:last-child
{
  margin: 0;
}

/* # FAQ */

/* Пагинация */

.pagination
{
  margin-top: 24px;
}

.pagination-link
{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid transparent;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  font-size: 18px;
}

.pagination-link.current
{
  border-color: var(--button-round-border);
}

.pagination-link.current,
.pagination-link:hover
{
  color: var(--text-primary);
}

.pagination-link.current svg,
.pagination-link:hover svg
{
  fill: var(--icon-active);
}

.pagination-link.prev,
.pagination-link.next
{
  border: none;
  width: 20px;
  height: 20px;
}

.pagination-link.prev
{
  margin-right: 12px;
}

.pagination-link.next
{
  margin-left: 12px;
}

.pagination-custom .pagination-link
{
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.pagination-custom .pagination-link.current
{
  border-color: transparent;
  background: var(--pagination-active-bg) !important;
}

/* # Пагинация */

/* Статья */

.article-box
{
  display: flex;
  text-decoration: none;
  gap: 20px;
  font-size: 14px;
  color: var(--text-content);
}

.article-box-img
{
  position: relative;
  width: 226px;
  border-radius: var(--radius-base);
  overflow: hidden;
}

.article-box-inner
{
  flex: 1;
}

.article-box-title
{
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 500;
  line-height: 1.24;
}

.article-box-date
{
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  gap: 6px;
  line-height: 0.8;
}

.article-box-date-icon
{
  width: 20px;
  height: 20px;
}

.article-box-content
{
  margin-bottom: 26px;
}

.article-box-button
{
  opacity: 0;
}

.article-box:hover .article-box-button
{
  opacity: 1;
}

.article-row
{
  position: relative;
}

.article-return
{
  position: absolute;
  left: 0;
  top: 0;
}

.article-container
{
  max-width: 735px;
  margin: 0 auto;
}

.article-header
{
  margin-bottom: 20px;
}

.article-meta
{
  font-size: 14px;
  margin-bottom: 10px;
  gap: 8px;
}

.article-content
{
  color: var(--text-content);
}

.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6
{
  margin-top: 32px;
}

.article-img
{
  border-radius: 8px;
}

.article-img:not(:last-child)
{
  margin-bottom: 32px;
}

/* # Статья */

/* Список с синими точками */

.dot-list li
{
  position: relative;
  padding-left: 20px;
  box-sizing: border-box;
}

.dot-list li:before
{
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--accent-primary);
  border: 100%;
  position: absolute;
  left: 0;
  top: 6px;
  border-radius: 10px;
}

.dot-list li:not(:last-child)
{
  margin-bottom: 16px;
}

/* # Список с синими точками */

/* Список страниц */

.pages-list li:not(:last-child)
{
  margin-bottom: 5px;
}

.pages-list li a:hover
{
  color: var(--text-primary);
}

/* # Список страниц */

/* Логин */

.login
{
  padding: 24px;
  max-width: 454px;
  width: 100%;
}

.login-header
{
  margin-bottom: 40px;
}

.login-header.d-flex-center
{
  margin-bottom: 30px;
}

.login-form-header
{
  margin-bottom: 24px;
}

.login-form-title
{
  display: inline-flex;
  max-width: 368px;
  margin-bottom: 16px;
}

.login-form-title:last-child
{
  margin: 0;
}

.login-form-icon
{
  width: 70px;
  height: 70px;
  margin: 0 auto 32px auto;
}

/* # Логин */

/* 404 */

.error404
{
  gap: 50px;
}

.error404-code
{
  font-size: 64px;
  font-weight: 600;
  color: var(--text-primary);
}

.error404-title
{
  margin-bottom: 12px;
}

/* # 404 */

/* Фильтр */

.filter
{
  margin-bottom: 24px;
}

.filter.d-flex
{
  align-items: center;
}

.filter.d-flex .filter-item
{
  max-width: 200px;
  min-width: 200px;
}

.filter-row
{
  gap: 16px;
}

.filter-item
{
  max-width: 232px;
  width: 100%;
}

.filter-item .select2-container .select2-selection--single
{
  min-height: 38px;
  padding: 0 12px;
}

.filter-item .select2-container--default .select2-selection--single .select2-selection__rendered
{
  line-height: 38px;
  font-size: 14px;
}

.filter-item .select2-container--default .select2-selection--single .select2-selection__arrow
{
  right: 12px;
}

.filter .button-small
{
  height: 38px;
  padding: 0 20px 0 20px;
  gap: 8px;
  font-weight: normal;
}

.filter .button-small:hover
{
  background-color: var(--material-bg);
}

.filter .button-small:hover svg
{
  fill: var(--icon-active);
}

/* # Фильтр */

/* Услуга */

.service
{
  font-size: 14px;
}

.service-header
{
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.service-content
{
  margin-bottom: 24px;
}

.service-logo
{
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
}

.service-logo img
{
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 12px;
}

.service-name
{
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}

.service-name a
{
  text-decoration: none;
}

.service-tag
{
  display: inline-block;
  padding: 4px 12px;
  color: var(--accent-primary);
  background-color: var(--status-info-bg);
  font-size: 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.service-meta
{
  display: flex;
  align-items: center;
  gap: 13px;
}

.service-meta-item
{
  display: flex;
  align-items: center;
  gap: 3px;
}

.service-meta-icon
{
  width: 20px;
  height: 20px;
}

.service-meta-info
{
  color: var(--text-primary);
}

.service-more
{
  font-size: 16px;
  border: none;
}

.service-single
{
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.service-single-logo
{
  width: 140px;
  height: 140px;
}

.service-single-name
{
  font-size: 24px;
}

.service-single-header
{
  margin-bottom: 65px;
}

.service-single-header-items
{
  margin-bottom: 12px;
  align-items: center;
}

.service-single-url
{
  color: var(--text-primary);
}

.service-single-content
{
  flex: 1;
  font-size: 16px;
}

.service-single-text
{
  margin-bottom: 32px;
}

.service-single-text h2,
.service-single-text h3,
.service-single-text h4,
.service-single-text h5,
.service-single-text h6
{
  margin-bottom: 12px;
}

.service-single-text p:last-child
{
  margin: 0;
}

.service-single-footer
{
  gap: 20px;
}

.service-single-footer .button
{
  font-size: 16px;
  padding-left: 70px;
  padding-right: 70px;
}

.service-single-footer-item
{
  min-height: 52px;
  background-color: var(--button-secondary-bg);
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  gap: 16px;
  font-size: 16px;
  border-radius: 8px;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

.service-single-footer-item small
{
  font-size: 12px;
}

/* # Услуга */

/* Статистика */

.statistics-row
{
  --bs-gutter-y: 8px;
}

.statistics-box
{
  display: flex;
  gap: 15px;
  align-items: center;
  line-height: 1.2;
  padding: 16px;
  color: var(--text-primary);
}

.statistics-box:not(:last-child)
{
  margin-bottom: 8px;
}

.statistics-box-name
{
  flex: 1;
  font-size: 14px;
}

.statistics-box-val
{
  font-size: 16px;
  font-weight: 500;
}

/* # Статистика */

/* Боковая панель */

.aside
{
  position: sticky;
  top: 10px;
}

.aside-header
{
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 17px;
}

.aside-header-icon
{
  width: 24px;
  height: 24px;
}

.aside-header-text
{
  flex: 1;
  font-size: 14px;
}

.aside-item:not(:last-child)
{
  border-bottom: 1px solid var(--border-default);
}

.aside-item-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
  padding: 17px 0;
  cursor: pointer;
}

.aside-item-header.active .toggle-arrow
{
  transform: rotate(180deg);
}

.aside-item-header.active .toggle-arrow svg,
.aside-item-header:hover .toggle-arrow svg
{
  fill: var(--icon-active);
}

.aside-item-content
{
  display: none;
  padding-bottom: 17px;
}

.aside-item-list li:not(:last-child)
{
  margin-bottom: 8px;
}

.aside-item-list li a
{
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding-left: 14px;
}

.aside-item-list li a:before
{
  content: "";
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  background-color: var(--text-muted);
}

.aside-item-list li a:hover,
.aside-item-list li a.active
{
  color: var(--text-primary);
}

.aside-item-list li a:hover:before,
.aside-item-list li a.active:before
{
  background-color: var(--accent-primary);
}

/* # Боковая панель */

/* Тарифы: карточки (вариант 1 «Карточки с разделами»), разделы — по PLAN_LIMIT_SECTIONS.
   Шапка по центру (вариант 2): значок, название, цена.
   Цвет тарифа --pa — свечение слева сверху (как .main-plan), значок, фон блоков лимитов,
   свой тариф — пульсирующая точка в правом верхнем углу. */
.sub-plans
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.sub-card
{
  --pa: var(--plan-light);
  /* Строки карточек в ряду выровнены: шапка, кнопка, «Трекинг», «Клоакинг» */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.sub-card::before,
.sub-card::after
{
  content: "";
  position: absolute;
  left: 0;
  pointer-events: none;
}

.sub-card::before
{
  top: 14px;
  width: 1px;
  height: 44px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--pa), transparent);
}

.sub-card::after
{
  top: 0;
  width: 40px;
  height: 64px;
  border-radius: 100%;
  background-color: var(--pa);
  filter: blur(45px);
}

.sub-card.is-optimal { --pa: var(--plan-optimal); }
.sub-card.is-premium { --pa: var(--plan-premium); }
.sub-card.is-corporate { --pa: var(--plan-corporate); }

.sub-card-head
{
  padding: 26px 20px 18px;
  text-align: center;
}

.sub-card-name
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sub-card-name h3
{
  max-width: 100%;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.sub-card-icon
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--pa) 14%, transparent);
}

.sub-card-icon svg
{
  width: 22px;
  height: 22px;
  fill: var(--pa);
}

/* Старая цена и скидка — строкой над ценой; без скидки строка скрыта, но место за ней
   остаётся, чтобы шапки всех карточек и при смене срока были одной высоты */
.sub-price-old
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 22px;
  margin-bottom: 4px;
}

.sub-price-old.is-empty
{
  visibility: hidden;
}

.sub-price-old s
{
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
  color: var(--text-hint);
}

.sub-price-old mark
{
  padding: 2px 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--status-success) 14%, transparent);
  font-size: 12px;
  font-weight: 700;
  color: var(--status-success);
}

/* Цена и «/ мес.» — всегда одной строкой: в узкой карточке цена мельче */
.sub-card-head
{
  container-type: inline-size;
}

.sub-price
{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.sub-price b
{
  font-size: clamp(26px, 15cqi, 36px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.sub-price span
{
  font-size: 14px;
  color: var(--text-muted);
}

.sub-price-total
{
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.sub-card-buy
{
  padding: 0 20px 18px;
}

.sub-card-button
{
  width: 100%;
}

.sub-card-button.is-ghost
{
  border: 1px solid var(--button-round-border);
  background-color: transparent;
  background-image: none;
  color: var(--text-primary);
}

/* Наведение — только синяя обводка, без заливки (просьба пользователя) */
.sub-card-button.is-ghost:hover,
.sub-card-button.is-ghost:active
{
  border-color: var(--accent-primary);
  background-color: transparent;
  background-image: none;
  color: var(--text-primary);
}

.sub-card-left
{
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

.sub-card-left i
{
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--surface-muted);
}

.sub-card-left i::after
{
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  background-color: var(--pa);
}

.sub-sec
{
  padding: 22px 20px 20px;
  border-top: 1px solid var(--border-default);
}

.sub-sec-h
{
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Лимиты раздела — отдельный блок цвета тарифа: подпись слева, число справа */
.sub-limits
{
  padding: 3px 22px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--pa) 8%, transparent);
}

.sub-limit
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.sub-limit + .sub-limit
{
  border-top: 1px solid color-mix(in srgb, var(--pa) 14%, transparent);
}

.sub-limit span
{
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.sub-limit b
{
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.sub-limit.is-off b
{
  color: var(--text-hint);
}

/* ∞ в шрифте мельче цифр; высота строки та же — ряды во всех карточках одной высоты */
.sub-limit.is-unlimited b
{
  font-size: 19px;
}

.sub-limits + .sub-list
{
  margin-top: 14px;
}

.sub-list li
{
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text-content);
}

.sub-list li svg
{
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  fill: var(--status-success);
}

.sub-list li.is-off
{
  color: var(--text-hint);
}

.sub-list li.is-off svg
{
  fill: var(--text-hint);
}

.sub-mine
{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pa);
}

.sub-mine::after
{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--pa);
  animation: sub-mine-pulse 1.8s ease-out infinite;
}

@keyframes sub-mine-pulse
{
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce)
{
  .sub-mine::after
  {
    animation: none;
  }
}

/* Тарифы: выбор срока */
.sub-periods
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.sub-periods-label
{
  margin-right: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.balance-chip mark
{
  margin-left: 6px;
  padding: 0;
  background: none;
  color: var(--status-success);
}

/* Плашка под шапкой: тестовый период, льготный период, «ссылки не принимают трафик» */
.plan-banner
{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 16px 20px;
  border: 1px solid var(--border-default);
}

/* Тестовый период (вариант 3 «Большая цифра»): слева крупно «7 дней бесплатно»,
   лимиты — чипами, кнопка и «Все тарифы» столбиком; свечение слева сверху */
.plan-banner.is-trial
{
  position: relative;
  overflow: hidden;
  gap: 22px;
  padding: 18px 22px;
}

.plan-banner.is-trial::after
{
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  opacity: 0.55;
  filter: blur(55px);
  pointer-events: none;
}

.plan-banner.is-trial .plan-banner-body,
.plan-banner.is-trial .plan-banner-actions
{
  position: relative;
  z-index: 1;
}

.plan-banner.is-trial .plan-banner-title
{
  font-size: 17px;
  font-weight: 700;
}

.plan-banner.is-trial .plan-banner-actions
{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: center;
}

.plan-banner-days
{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 96px;
  padding: 10px 6px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent);
}

.plan-banner-days b
{
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--button-primary-gradient-start), var(--button-primary-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plan-banner-days span
{
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
}

.plan-banner-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.plan-banner-chip
{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  font-size: 12px;
  color: var(--text-muted);
}

.plan-banner-chip b
{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.plan-banner.is-warn
{
  border-color: color-mix(in srgb, var(--status-warning) 45%, transparent);
  background-color: var(--status-warning-bg);
}

.plan-banner.is-warn .plan-banner-icon
{
  background: color-mix(in srgb, var(--status-warning) 18%, transparent);
}

.plan-banner.is-warn .plan-banner-icon svg
{
  fill: var(--status-warning);
}

.plan-banner.is-bad
{
  border-color: color-mix(in srgb, var(--status-danger) 45%, transparent);
  background-color: var(--status-danger-bg);
}

.plan-banner.is-bad .plan-banner-icon
{
  background: color-mix(in srgb, var(--status-danger) 18%, transparent);
}

.plan-banner.is-bad .plan-banner-icon svg
{
  fill: var(--status-danger);
}

.plan-banner-body
{
  flex: 1;
  min-width: 0;
}

.plan-banner-title
{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-banner-text
{
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.plan-banner-error
{
  margin-top: 6px;
  font-size: 12px;
  color: var(--status-danger);
}

.plan-banner-error[hidden]
{
  display: none;
}

.plan-banner-actions
{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.plan-banner-link
{
  font-size: 13px;
}

.plan-banner-button
{
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 767px)
{
  .plan-banner
  {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .plan-banner-body
  {
    flex-basis: calc(100% - 56px);
  }

  .plan-banner-actions
  {
    width: 100%;
    justify-content: space-between;
  }

  .plan-banner.is-trial
  {
    gap: 16px;
    padding: 16px;
  }

  .plan-banner.is-trial .plan-banner-body
  {
    flex-basis: calc(100% - 96px);
  }

  .plan-banner-days
  {
    width: 80px;
  }
}

/* Окно оплаты: что освободить */
.sub-over
{
  margin-top: 18px;
}

.sub-over-list
{
  margin-top: 12px;
}

.sub-over-item
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
}

.sub-over-item b
{
  display: block;
  color: var(--text-primary);
}

.sub-over-item small
{
  display: block;
  color: var(--text-muted);
}

.sub-need
{
  margin-top: 14px;
}

/* Окно оплаты: промокод */
.sub-promo
{
  margin-top: 18px;
}

.sub-promo-open
{
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--accent-primary);
  cursor: pointer;
}

.sub-promo-open:hover
{
  text-decoration: underline;
}

.sub-promo-row
{
  display: flex;
  gap: 8px;
}

.sub-promo-input
{
  flex: 1;
  min-width: 0;
  letter-spacing: .06em;
}

.sub-promo-row .button
{
  flex: none;
  min-height: 38px;
  max-height: 38px;
}

.sub-promo-sum
{
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sub-promo-remove
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-hint);
  cursor: pointer;
}

.sub-promo-remove svg
{
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.sub-promo-remove:hover
{
  background-color: var(--control-hover-bg);
  color: var(--text-primary);
}

/* # Цены */

/* Уведомления */

.notifications-box
{
  position: relative;
  padding-left: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.notifications-box.active
{
  background-color: var(--faq-expanded-bg);
}

.notifications-box:not(:last-child)
{
  margin-bottom: 16px;
}

.notifications-box-content
{
  flex: 1;
}

.notifications-box-icon
{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-box-title
{
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.notifications-box-text a
{
  color: var(--accent-primary);
}

/* # Уведомления */


/* Тип платежа */

.payment
{
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-icon
{
  width: 24px;
  height: 24px;
  border-radius: 100%;
}

.payment-icon img
{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.payment-text
{
  font-size: 14px;
}

/* # Тип платежа */

/* Статус */

.status
{
  font-size: 12px;
  line-height: 1.2;
  display: inline-block;
  padding: 3.5px 6px;
  border-radius: 4px;
}

.status.blue
{
  color: var(--accent-primary);
  background-color: var(--status-info-bg);
}

.status.red
{
  color: var(--status-danger);
  background-color: var(--status-danger-bg);
}

.status.gray
{
  color: var(--text-primary);
  background-color: var(--surface-highlight);
}

.status.green
{
  color: var(--status-success);
  background-color: var(--status-success-bg);
}

.status.orange
{
  color: var(--status-warning);
  background-color: var(--status-warning-bg);
}

/* # Статус */

/* QR код в модалке */

.qr
{
  margin: 30px auto;
  width: 180px;
  position: relative;
  left: -15px;
}

/* QR рисуется в браузере (qrcode-generator), белая подложка нужна для сканирования в тёмной теме */
.qr svg
{
  display: block;
  width: 180px;
  height: 180px;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
}

.qr-secret
{
  margin: -12px 0 6px -15px;
  text-align: center;
  font-size: 13px;
  color: var(--statistics-label-color);
}

.qr-secret b
{
  display: block;
  margin-top: 4px;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-primary);
  user-select: all;
}

/* # QR код в модалке */

/* Категория */

.cats-items
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cats-item
{
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent-primary);
  border-radius: 4px;
  background-color: var(--status-info-bg);
}

.cats-item-actions
{
  display: flex;
  gap: 2px;
}

.cats-item-action
{
  background-color: transparent;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
}

.cats-item-action:hover
{
  opacity: 0.8;
}

.cats-item-action:active
{
  transform: scale(0.92);
}

.cats-row
{
  gap: 24px;
}

.cats-row .button
{
  padding-left: 20px;
  padding-right: 20px;
}

/* # Категория */

/* Шаги */

.steps:not(:last-child)
{
  margin-bottom: 24px;
}

.steps-box
{
  padding: 25px 25px 25px 76px;
  box-sizing: border-box;
  position: relative;
  color: var(--text-primary);
}

.steps-box:not(:last-child)
{
  margin-bottom: 12px;
}

.steps-box:before
{
  content: attr(data-num);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translate(0, -50%);
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  border: 1px solid var(--border-default);
  background-color: var(--surface-step);
  position: absolute;
  color: var(--text-primary);
}

.steps-box-text
{
  max-width: 850px;
}

/* # Шаги */

/* Инфо-бокс */

/* Инфо-бокс */

/* Как сообщения в окне просмотра клика в статистике (.tsv-check):
   компактная плашка с рамкой в цвет статуса, цветная иконка, обычный текст. */
.info-box
{
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* Информационное сообщение */

.info-box--info
{
  color: var(--accent-primary);
  background-color: var(--status-info-bg);
  border-color: color-mix(in srgb, var(--status-info) 25%, transparent);
}

/* Успешное действие */

.info-box--success
{
  color: var(--status-success);
  background-color: var(--status-success-bg);
  border-color: color-mix(in srgb, var(--status-success) 25%, transparent);
}

/* Предупреждение */

.info-box--warning
{
  color: var(--status-warning);
  background-color: var(--status-warning-bg);
  border-color: color-mix(in srgb, var(--status-warning) 25%, transparent);
}

/* Ошибка или опасное действие */

.info-box--danger
{
  color: var(--status-danger);
  background-color: var(--status-danger-bg);
  border-color: color-mix(in srgb, var(--status-danger) 25%, transparent);
}

/* Нейтральное сообщение */

.info-box--neutral
{
  color: var(--message-neutral-text);
  background-color: var(--message-neutral-bg);
}

.info-box-icon
{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: currentColor;
}

.info-box-content
{
  flex: 1;
  min-width: 0;
  max-width: 780px;
}

.info-box-title
{
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.info-box-text
{
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.info-box-text b,
.info-box-text strong
{
  color: inherit;
  font-weight: 600;
}

/* # Инфо-бокс */

/* NS Сервисы */

.ns-services-item
{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* # NS Сервисы */

/* Копировать ссылку API */

.request-link
{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 24px;
  border: 1px solid var(--button-round-border);
  border-radius: 8px;
  color: var(--text-primary);
  justify-content: center;
}

/* # Копировать ссылку API */

/* Смарт линк */

.smart-link
{
  display: inline-flex;
  align-items: center;
  width: 220px;
  background-color: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  height: 31px;
  box-sizing: border-box;
  padding-right: 1px;
  padding-left: 10px;
  gap: 10px;
}

.smart-link-url
{
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.2;
}

.smart-link-copy
{
  width: 27px;
  height: 27px;
  border: none;
  background-color: var(--status-info-bg);
}

/* # Смарт линк */

/* WAF */

.waf
{
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.2;
  gap: 10px;
  padding: 0 11px 0 9px;
  color: var(--text-muted);
  cursor: pointer;
}

.waf.active
{
  background-color: var(--status-info-bg);
  color: var(--accent-primary);
}

.waf > svg
{
  flex: none;
  width: 14px;
  height: 14px;
  fill: #565b70;
}

.waf.active > svg
{
  fill: #0391fb;
}

/* # WAF */

/* Поток */

.flow
{
  position: relative;
  padding-left: 11px;
}

.flow:before
{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: var(--status-success);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

/* # Поток */

/* Страна */

.flow-country
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.flow-country-flag
{
  border-radius: 2px;
  overflow: hidden;
  width: 19px;
  height: 14px;
}

.flow-country-flag img
{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.flow-country-name
{
  flex: 1;
}

/* # Страна */

.main
{
  min-height: 100vh;
  box-sizing: border-box;
}

.main-container
{
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
}

.main-container-full
{
  padding: 20px;
  box-sizing: border-box;
  min-height: 100vh;
}

.main-row
{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
  box-sizing: border-box;
  min-height: 100vh;
}

.main-panel
{
  position: sticky;
  top: 16px;
  max-width: 260px;
  width: 100%;
}

.main-panel-header
{
  padding: 22px 20px 19px 20px;
  box-sizing: border-box;
}

.main-panel-content
{
  position: relative;
}

.main-panel-content:after
{
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, var(--sidebar-fade-bg), transparent);
  pointer-events: none;
  z-index: 2;
}

.main-panel-footer
{
  gap: 24px;
  padding: 24px;
  box-sizing: border-box;
}

.main-content
{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content-header
{
  padding-bottom: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-default);
}

.main-content-inner
{
  padding: 40px 0 8px 0;
  box-sizing: border-box;
  flex: 1;
}

.main-content-footer
{
  font-size: 14px;
  padding: 32px 0;
  box-sizing: border-box;
}

.main-content-line-header:not(:last-child)
{
  margin-bottom: 16px;
}

.main-content-line-header.d-flex
{
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.main-content-line:not(:last-child)
{
  margin-bottom: 40px;
}

.main-content-title-mobile
{
  margin-bottom: 32px;
}

.main-content-desc
{
  max-width: 887px;
}

.main-content-filter
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
}

.main-content-filter .button
{
  padding-left: 34px;
  padding-right: 34px;
}

.main-actions
{
  gap: 12px;
  margin-left: auto;
}

.main-actions-item
{
  display: flex;
  align-items: center;
  min-height: 54px;
  gap: 12px;
  padding: 6px 10px 6px 10px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 8px;
}

.main-actions-item:not(.action-balance)
{
  cursor: pointer;
}

.main-actions-item-box
{
  padding: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-actions-item-icon,
.main-actions-item-toggle
{
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-actions-item-icon
{
  width: 27px;
  height: 27px;
  border-radius: 100%;
  overflow: hidden;
}

.main-actions-item-tag
{
  display: block;
  font-size: 12px;
}

.main-actions-item-text
{
  flex: 1;
}

.main-actions-item-toggle
{
  border-radius: 100%;
}

.main-actions-item.action-balance
{
  padding-left: 10px;
}

.main-actions-item.action-balance .main-actions-item-icon
{
  width: 24px;
  height: 24px;
}

.main-actions-item.action-balance .toggle-arrow
{
  background-color: var(--balance-action-bg);
}

.main-actions-item.action-balance .toggle-arrow:hover svg
{
  color: var(--accent-primary);
}

.main-actions-item .toggle-arrow
{
  border-radius: 100%;
}

.main-actions-toggle
{
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  position: relative;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.main-actions-toggle span
{
  display: block;
  height: 2px;
  width: 24px;
  background-color: var(--text-primary);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.main-actions-toggle span:nth-child(1)
{
  top: calc(50% - 4px);
}

.main-actions-toggle span:nth-child(2)
{
  top: calc(50% + 4px);
}

.main-actions-toggle.active span:nth-child(1)
{
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.main-actions-toggle.active span:nth-child(2)
{
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.main-langs
{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
}

.main-langs-flag
{
  width: 23px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
}

.main-langs-name
{
  text-transform: uppercase;
  color: var(--text-primary);
}

.main-menu
{
  max-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 16px 50px 16px;
  box-sizing: border-box;
  position: relative;
}

.main-menu::-webkit-scrollbar
{
  width: 0px;
  background-color: transparent;
}

.main-menu::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  background-color: var(--border-default);
}

.main-menu::-webkit-scrollbar-track
{
  border-radius: 10px;
  background-color: transparent;
}

.main-menu-item:not(:last-child)
{
  margin-bottom: 2px;
}

.main-menu-link
{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 16px;
  position: relative;
  z-index: 2;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.main-menu-link:hover:before,
.main-menu-link.active:before
{
  opacity: 1;
}

.main-menu-link:before
{
  content: "";
  position: absolute;
  opacity: 0;
}

.main-menu-link:before
{
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--menu-active-bg) 0%, var(--transparent-menu) 100%);
  left: 0;
  top: 0;
}

.main-menu-icon
{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-menu-text
{
  flex: 1;
}

.main-menu-sub
{
  margin-bottom: 12px;
  padding-top: 7px;
  padding-bottom: 14px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-default);
}

.main-menu-sub:not(.active)
{
  display: none;
}

.main-menu-sub-link
{
  display: block;
  position: relative;
  padding-left: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
  text-decoration: none;
}

.main-menu-sub-link:before
{
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: var(--menu-marker);
  transform: translate(0, -50%);
}

.main-menu-sub-link:hover,
.main-menu-sub-link.active
{
  color: var(--text-primary);
}

.main-menu-sub-link:hover:before,
.main-menu-sub-link.active:before
{
  background: var(--accent-primary);
  background-image: var(--button-primary-gradient);
}

.main-menu-actions
{
  padding: 20px;
  box-sizing: border-box;
}

.filter-toggle
{
  background-color: var(--control-bg);
  gap: 8px;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.filter-toggle-inner
{
  width: 26px;
  height: 31px;
  position: relative;
}

.filter-toggle-inner span
{
  position: absolute;
  width: 22px;
  height: 1px;
  background-color: var(--text-muted);
  left: 50%;
  transform: translate(-50%, 0);
}

.filter-toggle-inner span:nth-child(1)
{
  top: calc(50% - 6px);
}

.filter-toggle-inner span:nth-child(2)
{
  width: 10px;
  top: 50%;
  transform: translate(-50%, -50%);
}

.filter-toggle-inner span:nth-child(3)
{
  top: calc(50% + 6px);
}

.filter-toggle[aria-expanded="true"]
{
  background-color: var(--control-hover-bg);
}

.filter-toggle[aria-expanded="true"] span:nth-child(1)
{
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.filter-toggle[aria-expanded="true"] span:nth-child(2)
{
  opacity: 0;
}

.filter-toggle[aria-expanded="true"] span:nth-child(3)
{
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (min-width: 576px)
{
  .toasts-item:not(:last-child)
  {
    margin-bottom: 12px;
  }
}

@media screen and (min-width: 768px)
{
  .service-single-header-item:not(:last-child)
  {
    padding-right: 16px;
    margin-right: 16px;
    position: relative;
  }

  .service-single-header-item:not(:last-child):after
  {
    content: "";
    width: 1px;
    height: 26px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color: var(--border-default);
  }
}

@media screen and (min-width: 991px)
{
  .main-panel-content
  {
    max-height: 100%;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 1260px)
{
  .box-title
  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-actions-toggle
  {
    display: none;
  }
}

@media screen and (max-width: 1390px)
{
  .table-container-custom
  {
    max-width: 1000px;
  }
}

@media (max-width: 1260px)
{
  .table-container-custom
  {
    max-width: 100%;
  }

  .main-row
  {
    padding: 0;
  }

  .main-panel
  {
    position: fixed;
    left: 20px;
    top: 20px;
    height: calc(100vh - 40px);
    background-color: var(--surface-page);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    box-shadow: 4px 4px 78px 0px var(--shadow-panel);
    transform: translate(-100%, 0);
  }

  .main-panel.active
  {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }

  .main-panel-footer
  {
    padding: 20px;
  }

  .main-content-header
  {
    padding: 12px 20px 16px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-default);
    background-color: var(--surface-page);
    position: sticky;
    z-index: 9;
    top: 0;
    margin: 0;
  }

  .main-content-inner
  {
    padding: 32px 20px 8px 20px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100vw;
  }

  /* Плашка тарифа под шапкой — по ширине блоков страницы (у них поля 20px) */
  .plan-banner
  {
    margin-left: 20px;
    margin-right: 20px;
  }

  .main-actions-item
  {
    padding: 6px 12px;
    min-height: 48px;
  }

  .main-actions-item-box
  {
    width: 48px;
    height: 48px;
  }

  .main-actions-item-icon
  {
    width: 32px;
    height: 32px;
  }

  .main-actions-item.action-balance
  {
    padding-left: 12px;
  }

  .main-menu
  {
    padding: 0;
  }

  .main-menu-link
  {
    border-radius: 0;
    padding: 12px 20px;
    gap: 10px;
    font-size: 18px;
  }

  .main-menu-sub-link
  {
    padding-left: 50px;
  }

  .main-menu-sub-link:before
  {
    left: 26px;
  }
}

@media (max-width: 991px)
{
  .dropdown .button-small
  {
    width: 100%;
  }

  .dropdown-filter
  {
    width: 100%;
    min-width: 100%;
  }

  .tabs-header
  {
    width: 100%;
  }

  .tabs-header-api
  {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .article-return
  {
    display: none;
  }

  .filter.d-flex
  {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .filter.d-flex .filter-item
  {
    max-width: 100%;
  }

  .filter.d-flex .filter-row
  {
    flex: 1;
    width: 100%;
    flex-direction: column;
  }

  .service-single-footer
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-single-footer .button
  {
    order: 3;
  }

  .request-link
  {
    width: 100%;
  }

  .main
  {
    overflow: hidden;
  }

  .main-panel
  {
    border-radius: 0;
    max-width: 100vw;
    width: 100vw;
    left: 0;
    top: 76px;
    height: 100%;
    height: calc(100dvh - 76px);
    min-height: calc(100dvh - 76px);
    transform: translate(0, 0);
    box-shadow: none;
    overflow-y: auto;
  }

  .main-panel > .box
  {
    border-radius: 0;
    background-color: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .main-panel-content:after
  {
    display: none;
  }
}

@media (max-width: 768px)
{
  .box-header.d-flex
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-single
  {
    flex-direction: column;
    gap: 16px;
  }

  .service-single-logo
  {
    width: 90px;
    height: 90px;
  }

  .service-single-header
  {
    margin-bottom: 32px;
  }

  .service-single-header-items
  {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 576px)
{
  .row
  {
    --bs-gutter-x: 20px;
  }

  .gy-base
  {
    --bs-gutter-y: 20px;
  }

  .input-field:not(:last-child).custom
  {
    margin-bottom: 25px;
  }

  .input-meta:not(:first-child)
  {
    margin-top: 16px;
  }

  .input-photo-img
  {
    width: 100px;
    height: 100px;
  }

  .input-photo-info
  {
    font-size: 14px;
  }

  .dropdown-filter-actions button
  {
    width: 100%;
  }

  .toasts
  {
    position: fixed;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .toasts-item
  {
    border-radius: 0px;
    min-width: 100vw;
  }

  .box-row-col.col-md-4:not(:last-child):after
  {
    width: 100%;
    height: 1px;
    right: inherit;
    bottom: -20px;
    top: inherit;
    left: 0;
  }

  .box-chart-doughnut
  {
    margin: 0;
    max-width: 90px;
    width: 90px !important;
    height: 90px !important;
  }

  .box-chart-val:not(:last-child)
  {
    margin-bottom: 8px;
  }

  .box-chart-row
  {
    display: flex;
    align-items: flex-start;
    gap: 30px;
  }

  .box-lines
  {
    padding: 20px;
  }

  .main-plan-val
  {
    font-size: 24px;
  }

  .notif
  {
    min-width: 230px;
  }

  .notif-item-header
  {
    flex-direction: column;
    align-items: flex-start;
  }

  .notif-item-date
  {
    font-size: 12px;
  }

  .tabs-header
  {
    width: 100vw;
    overflow-x: auto;
    margin-left: -20px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .faq-item-header
  {
    padding: 24px 65px 24px 20px;
    font-size: 18px;
  }

  .faq-item-arrow
  {
    width: 32px;
    height: 32px;
  }

  .faq-item-content
  {
    padding: 0 20px 24px 20px;
  }

  .article-box
  {
    flex-direction: column;
  }

  .article-box-img
  {
    padding-top: 75%;
    width: 100%;
  }

  .article-box-content
  {
    margin-bottom: 16px;
  }

  .article-inner
  {
    border: none;
    background-color: transparent;
    padding: 0;
  }

  .login
  {
    padding: 20px;
  }

  .login-header
  {
    margin-bottom: 30px;
  }

  .login-header.d-flex-center,
  .login-form-header
  {
    margin-bottom: 20px;
  }

  .login-form-title
  {
    font-size: 20px;
  }

  .login-form-desc
  {
    font-size: 14px;
  }

  .error404-code
  {
    font-size: 48px;
  }

  .error404-title
  {
    font-size: 18px;
  }

  .service-logo
  {
    width: 70px;
    height: 70px;
  }

  .service-single
  {
    padding: 20px;
  }

  .service-single-content
  {
    font-size: 14px;
  }

  .notifications-box
  {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .notifications-box-header
  {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 18px;
  }

  .notifications-box-icon
  {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
  }

  .notifications-box-title
  {
    margin: 0;
    font-size: 16px;
  }

  .steps-box
  {
    padding: 76px 20px 20px 20px;
  }

  .steps-box:before
  {
    left: 20px;
    top: 20px;
    transform: none;
  }

  .main-logo
  {
    max-width: 141px;
  }
}

/* Дополнительная информация строки статистики. */

#clicks-table .tracking-statistics-details
{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
}

#clicks-table .tracking-statistics-details ul,
#clicks-table .tracking-statistics-details li
{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

#clicks-table .tracking-statistics-details li,
#clicks-table .tracking-statistics-details a
{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* DataTables создаёт отдельную строку для row.child(). */

#clicks-table tbody tr.child > td,
#clicks-table tbody tr.dt-hasChild + tr > td
{
  min-width: 0;
  white-space: normal;
  overflow: hidden;
}

/*
 * Выбор периода (общий блок templates/period-picker.php): кнопка с диапазоном и одно окно
 * «быстрые периоды + календарь».
 */

.filter-item.tsp,
.filter.d-flex .filter-item.tsp
{
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: none;
}

.tsp-toggle
{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 232px;
  max-width: 420px;
  padding-right: 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.tsp-icon
{
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: var(--select-arrow-color);
}

.tsp-title
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.tsp-sub
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--statistics-label-color);
  font-size: 13px;
}

.tsp-sub::before
{
  content: "· ";
}

.tsp-toggle .tsf-arrow
{
  margin-left: auto;
}

.tsp.open .tsf-arrow
{
  transform: rotate(180deg);
}

.tsp-menu
{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1150;
  display: none;
  grid-template-columns: 190px minmax(0, 1fr);
  width: 780px;
  background: var(--statistics-popup-bg);
  border: 1px solid var(--statistics-popup-border);
  border-radius: 14px;
  box-shadow: 0 16px 42px var(--statistics-popup-shadow);
  overflow: hidden;
}

.tsp.open .tsp-menu
{
  display: grid;
}

/* Кнопка справа (статистика «Рефералов»): окно выравнивается по правому краю */
@media (min-width: 768px)
{
  .tsp-end .tsp-menu
  {
    right: 0;
    left: auto;
    max-width: calc(100vw - 60px);
  }
}

.tsp-presets
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-right: 1px solid var(--statistics-divider);
}

.tsp-preset
{
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--calendar-day-color);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.tsp-preset:hover
{
  background: var(--calendar-control-hover-bg);
  color: var(--text-primary);
}

.tsp-preset.active
{
  background: var(--calendar-range-bg);
  color: var(--calendar-selection-bg);
  font-weight: 600;
}

.tsp-sep
{
  height: 1px;
  margin: 6px 4px;
  background: var(--statistics-divider);
}

.tsp-main
{
  min-width: 0;
  padding: 16px 20px;
}

.tsp-fields
{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.tsp-field
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 160px;
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--calendar-control-border);
  border-radius: 9px;
  cursor: text;
}

.tsp-field:focus-within
{
  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

.tsp-field:has(.invalid)
{
  border-color: var(--border-danger);
}

.tsp-field-label
{
  color: var(--statistics-label-color);
  font-size: 11px;
  line-height: 1.2;
}

.tsp-date
{
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tsp-date::placeholder
{
  color: var(--calendar-disabled-day-color);
  font-weight: 400;
}

.tsp-field-arrow
{
  flex: none;
  color: var(--calendar-adjacent-day-color);
}

.tsp-days
{
  margin-left: auto;
  padding: 6px 10px;
  background: var(--calendar-control-hover-bg);
  border-radius: 20px;
  color: var(--statistics-label-color);
  font-size: 12px;
  white-space: nowrap;
}

.tsp-source
{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tsp-footer
{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--statistics-divider);
}

.tsp-apply
{
  min-width: 112px;
}

/* Flatpickr — встроенный календарь окна периода. */

.tsp-menu .flatpickr-calendar.tsp-flatpickr
{
  width: 100% !important;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: inherit;
}

.tsp-menu .flatpickr-calendar.tsp-flatpickr::before,
.tsp-menu .flatpickr-calendar.tsp-flatpickr::after
{
  display: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-months
{
  position: relative;
  align-items: center;
  margin-bottom: 6px;
}

.tsp-menu .tsp-flatpickr .flatpickr-month
{
  height: 32px;
  background: transparent;
  color: var(--text-primary);
  fill: var(--text-primary);
}

.tsp-menu .tsp-flatpickr .flatpickr-current-month
{
  left: 0;
  width: 100%;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.tsp-menu .tsp-flatpickr .flatpickr-current-month span.cur-month
{
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.tsp-menu .tsp-flatpickr .flatpickr-current-month span.cur-month:hover
{
  background: transparent;
}

.tsp-menu .tsp-flatpickr .numInputWrapper
{
  width: 5ch;
  pointer-events: none;
}

.tsp-menu .tsp-flatpickr .numInputWrapper:hover
{
  background: transparent;
}

.tsp-menu .tsp-flatpickr .numInputWrapper span
{
  display: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-current-month input.cur-year
{
  padding: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month,
.tsp-menu .tsp-flatpickr .flatpickr-next-month
{
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--calendar-control-border);
  border-radius: 8px;
  color: var(--calendar-navigation-color);
  fill: var(--calendar-navigation-color);
  z-index: 3;
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month
{
  left: 0;
}

.tsp-menu .tsp-flatpickr .flatpickr-next-month
{
  right: 0;
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month svg,
.tsp-menu .tsp-flatpickr .flatpickr-next-month svg
{
  width: 12px;
  height: 12px;
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month:hover,
.tsp-menu .tsp-flatpickr .flatpickr-next-month:hover
{
  background: var(--calendar-control-hover-bg);
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month:hover svg,
.tsp-menu .tsp-flatpickr .flatpickr-next-month:hover svg
{
  fill: var(--text-primary);
}

.tsp-menu .tsp-flatpickr .flatpickr-prev-month.flatpickr-disabled,
.tsp-menu .tsp-flatpickr .flatpickr-next-month.flatpickr-disabled
{
  display: grid;
  opacity: .35;
  pointer-events: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-innerContainer,
.tsp-menu .tsp-flatpickr .flatpickr-rContainer,
.tsp-menu .tsp-flatpickr .flatpickr-days
{
  width: 100% !important;
  border: 0;
}

.tsp-menu .tsp-flatpickr .flatpickr-weekdays
{
  height: 28px;
  background: transparent;
}

.tsp-menu .tsp-flatpickr .flatpickr-weekdaycontainer,
.tsp-menu .tsp-flatpickr .dayContainer
{
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
}

.tsp-menu .tsp-flatpickr .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer,
.tsp-menu .tsp-flatpickr .dayContainer + .dayContainer
{
  margin-left: 28px;
  box-shadow: none;
}

.tsp-menu .tsp-flatpickr span.flatpickr-weekday
{
  background: transparent;
  color: var(--calendar-adjacent-day-color);
  font-size: 11px;
  font-weight: 500;
}

.tsp-menu .tsp-flatpickr .flatpickr-day
{
  position: relative;
  z-index: 0;
  flex: 0 0 calc(100% / 7);
  max-width: none;
  height: 36px;
  margin: 2px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--calendar-day-color);
  font-size: 13px;
  line-height: 36px;
}

/* Кружок дня рисуем псевдоэлементом, чтобы полоса диапазона шла под ним. */
.tsp-menu .tsp-flatpickr .flatpickr-day::before
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tsp-menu .tsp-flatpickr .flatpickr-day:hover,
.tsp-menu .tsp-flatpickr .flatpickr-day:focus
{
  background: transparent;
  border: 0;
  color: var(--text-primary);
}

.tsp-menu .tsp-flatpickr .flatpickr-day:hover::before
{
  background: var(--calendar-control-hover-bg);
}

.tsp-menu .tsp-flatpickr .flatpickr-day.today::before
{
  box-shadow: inset 0 0 0 1px var(--calendar-selection-bg);
}

.tsp-menu .tsp-flatpickr .flatpickr-day.inRange,
.tsp-menu .tsp-flatpickr .flatpickr-day.inRange:hover
{
  background: var(--calendar-range-bg);
  box-shadow: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.inRange:nth-child(7n + 1)
{
  border-radius: 18px 0 0 18px;
  box-shadow: none;
}

/* У Flatpickr для второго месяца своя серая тень у полосы — убираем. */
.tsp-menu .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1)
{
  box-shadow: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.inRange:nth-child(7n)
{
  border-radius: 0 18px 18px 0;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.startRange
{
  background: linear-gradient(90deg, transparent 50%, var(--calendar-range-bg) 50%);
}

.tsp-menu .tsp-flatpickr .flatpickr-day.endRange
{
  background: linear-gradient(90deg, var(--calendar-range-bg) 50%, transparent 50%);
}

.tsp-menu .tsp-flatpickr .flatpickr-day.startRange.endRange,
.tsp-menu .tsp-flatpickr .flatpickr-day.startRange:nth-child(7n),
.tsp-menu .tsp-flatpickr .flatpickr-day.endRange:nth-child(7n + 1),
.tsp-menu .tsp-flatpickr .flatpickr-day.selected:not(.startRange):not(.endRange)
{
  background: transparent;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.selected,
.tsp-menu .tsp-flatpickr .flatpickr-day.startRange,
.tsp-menu .tsp-flatpickr .flatpickr-day.endRange
{
  border: 0;
  box-shadow: none;
  color: #FFFFFF;
  font-weight: 600;
}

/*
 * Когда начало и конец стоят рядом, Flatpickr рисует между ними свою
 * синюю полоску тенью. Полоса диапазона у нас своя, тень убираем.
 */
.tsp-menu .tsp-flatpickr .flatpickr-day.startRange + .flatpickr-day.endRange:not(:nth-child(7n+1))
{
  box-shadow: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.selected::before,
.tsp-menu .tsp-flatpickr .flatpickr-day.startRange::before,
.tsp-menu .tsp-flatpickr .flatpickr-day.endRange::before
{
  background: var(--calendar-selection-bg);
  box-shadow: none;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.prevMonthDay,
.tsp-menu .tsp-flatpickr .flatpickr-day.nextMonthDay
{
  color: var(--calendar-adjacent-day-color);
}

.tsp-menu .tsp-flatpickr .flatpickr-day.flatpickr-disabled,
.tsp-menu .tsp-flatpickr .flatpickr-day.flatpickr-disabled:hover
{
  background: transparent;
  color: var(--calendar-disabled-day-color);
  cursor: default;
}

.tsp-menu .tsp-flatpickr .flatpickr-day.flatpickr-disabled:hover::before
{
  background: transparent;
}

/* Телефон: окно выезжает снизу, быстрые периоды — строкой чипов. */

@media (max-width: 767.98px)
{
  .filter-item.tsp
  {
    width: 100%;
  }

  .tsp-toggle
  {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .tsp-sub
  {
    display: none;
  }

  .tsp-menu
  {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4);
  }

  .tsp-presets
  {
    flex-direction: row;
    gap: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--statistics-divider);
    scrollbar-width: none;
  }

  .tsp-presets::-webkit-scrollbar
  {
    display: none;
  }

  .tsp-preset
  {
    flex: 0 0 auto;
    padding: 7px 12px;
    background: var(--calendar-control-hover-bg);
    border-radius: 20px;
  }

  .tsp-sep
  {
    display: none;
  }

  .tsp-main
  {
    padding: 14px 16px 18px;
  }

  .tsp-days
  {
    display: none;
  }

  .tsp-field
  {
    flex: 1 1 0;
  }

  .tsp-footer button
  {
    flex: 1 1 0;
  }
}

/*
 * Дополнительные фильтры: кнопка «Фильтры», панель и строка чипов.
 */

.filter-item.tsx,
.filter.d-flex .filter-item.tsx
{
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-left: auto;
}

.tsx-toggle
{
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.tsx-icon
{
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: var(--select-arrow-color);
}

.tsx-toggle.has-filters
{
  border-color: color-mix(in srgb, var(--calendar-selection-bg) 45%, var(--border-default));
  color: var(--calendar-selection-bg);
  font-weight: 600;
}

.tsx-toggle.has-filters .tsx-icon
{
  fill: var(--calendar-selection-bg);
}

/* Кнопка «Выгрузить» над таблицей логов: по ширине текста. */
.filter-item.ts-export,
.filter.d-flex .filter-item.ts-export
{
  width: auto;
  min-width: 0;
  max-width: none;
}

.ts-export-toggle
{
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.ts-export-toggle.is-busy
{
  opacity: .6;
  pointer-events: none;
}

.tsx-badge
{
  min-width: 20px;
  padding: 2px 6px;
  background: var(--calendar-selection-bg);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.tsx-menu
{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1150;
  display: none;
  width: 700px;
  background: var(--statistics-popup-bg);
  border: 1px solid var(--statistics-popup-border);
  border-radius: 14px;
  box-shadow: 0 16px 42px var(--statistics-popup-shadow);
}

.tsx.open .tsx-menu
{
  display: block;
}

.tsx-cols
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tsx-col
{
  min-width: 0;
  padding: 20px 20px 4px;
}

.tsx-col + .tsx-col
{
  border-left: 1px solid var(--statistics-divider);
}

.tsx-sec
{
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tsx-field
{
  margin-bottom: 16px;
  border-radius: 10px;
}

.tsx-field.highlight
{
  box-shadow: 0 0 0 6px var(--calendar-range-bg);
}

/* VPN, WAF, Referer: подпись слева, переключатель справа. */

.tsx-grid
{
  margin-bottom: 18px;
}

.tsx-grid .tsx-field
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tsx-grid .tsx-field:last-child
{
  margin-bottom: 0;
}

.tsx-grid .tsx-label
{
  margin-bottom: 0;
  white-space: nowrap;
}

.tsx-label
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 7px;
  color: var(--statistics-label-color);
  font-size: 12.5px;
}

.tsx-mode
{
  display: inline-flex;
  padding: 2px;
  background: var(--calendar-control-hover-bg);
  border-radius: 6px;
}

.tsx-mode button
{
  padding: 2px 8px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--statistics-label-color);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.tsx-mode button.active
{
  background: var(--statistics-popup-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  color: var(--text-primary);
  font-weight: 600;
}

/* Мультивыбор с тегами. */

.tsx-ms
{
  position: relative;
}

.tsx-ms-box
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid var(--calendar-control-border);
  border-radius: 8px;
  cursor: text;
}

.tsx-ms.open .tsx-ms-box,
.tsx-ms-box:focus-within
{
  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

.tsx-tag
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 26px;
  padding: 0 2px 0 8px;
  background: var(--calendar-control-hover-bg);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
}

.tsx-tag > span:not(.tsx-flag)
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsx-tag-remove
{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--calendar-adjacent-day-color);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tsx-tag-remove:hover
{
  color: var(--text-primary);
}

.tsx-flag
{
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 12px;
  overflow: hidden;
  border-radius: 2px;
}

.tsx-flag img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsx-ms-input
{
  flex: 1 1 80px;
  min-width: 80px;
  height: 26px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}

.tsx-ms-input::placeholder
{
  color: var(--calendar-adjacent-day-color);
}

.tsx-ms-list
{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 5;
  display: none;
  max-height: 240px;
  padding: 6px;
  overflow-y: auto;
  background: var(--statistics-popup-bg);
  border: 1px solid var(--statistics-popup-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px var(--statistics-popup-shadow);
}

.tsx-ms.open .tsx-ms-list
{
  display: block;
}

.tsx-ms-option
{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--calendar-day-color);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.tsx-ms-option:hover
{
  background: var(--calendar-control-hover-bg);
}

.tsx-ms-check
{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--calendar-control-border);
  border-radius: 4px;
}

.tsx-ms-check svg
{
  display: none;
  width: 12px;
  height: 12px;
  fill: #fff;
}

.tsx-ms-option.selected .tsx-ms-check
{
  background: var(--calendar-selection-bg);
  border-color: var(--calendar-selection-bg);
}

.tsx-ms-option.selected .tsx-ms-check svg
{
  display: block;
}

.tsx-ms-name
{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsx-ms-count
{
  color: var(--calendar-adjacent-day-color);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tsx-ms-empty
{
  padding: 10px 8px;
  color: var(--statistics-label-color);
  font-size: 13px;
}

/* Переключатели (устройство, результат, HTTP-код). */

.tsx-toggles
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tsx-toggle-item
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--calendar-control-border);
  border-radius: 8px;
  color: var(--calendar-day-color);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.tsx-toggle-item small
{
  color: var(--calendar-adjacent-day-color);
  font-size: 11px;
}

.tsx-toggle-item small:empty
{
  display: none;
}

.tsx-toggle-item:hover
{
  background: var(--calendar-control-hover-bg);
}

.tsx-toggle-item.active
{
  background: var(--calendar-range-bg);
  border-color: color-mix(in srgb, var(--calendar-selection-bg) 45%, transparent);
  color: var(--calendar-selection-bg);
  font-weight: 600;
}

/* Три положения: Все / Да / Нет. */

.tsx-seg
{
  display: grid;
  flex: 0 0 190px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  background: var(--calendar-control-hover-bg);
  border-radius: 8px;
}

.tsx-seg button
{
  padding: 5px 6px;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--statistics-label-color);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.tsx-seg button.active
{
  background: var(--statistics-popup-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  color: var(--text-primary);
  font-weight: 600;
}

.tsx-foot
{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--statistics-divider);
}

.tsx-reset
{
  margin-right: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--statistics-label-color);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tsx-reset:hover
{
  color: var(--text-primary);
}

.tsx-apply
{
  min-width: 112px;
}

/* Строка применённых фильтров. */

.tsx-chips
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -10px 0 20px;
}

.tsx-chip
{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 30px;
  background: var(--calendar-range-bg);
  border-radius: 16px;
}

.tsx-chip.negative
{
  background: color-mix(in srgb, var(--status-danger) 10%, transparent);
}

.tsx-chip-open
{
  max-width: 420px;
  padding: 0 4px 0 12px;
  overflow: hidden;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tsx-chip-open b
{
  font-weight: 600;
}

.tsx-chip-remove
{
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--statistics-label-color);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tsx-chip-remove:hover
{
  color: var(--text-primary);
}

.tsx-chips-clear
{
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--statistics-label-color);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tsx-chips-clear:hover
{
  color: var(--text-primary);
}

@media (max-width: 767.98px)
{
  .filter-item.tsx,
  .filter.d-flex .filter-item.tsx
  {
    width: 100%;
  }

  .tsx-toggle
  {
    width: 100%;
  }

  .tsx-menu
  {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4);
  }

  .tsx-cols
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .tsx-col
  {
    padding: 14px 16px 2px;
  }

  .tsx-col + .tsx-col
  {
    border-top: 1px solid var(--statistics-divider);
    border-left: 0;
  }

  .tsx-foot
  {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    background: var(--statistics-popup-bg);
  }

  .tsx-chips
  {
    margin-top: -8px;
  }
}

/*
 * Окно визита: панель справа по клику на строку таблицы статистики.
 */

/*
 * Строка кликабельна: курсор и стрелка справа.
 * Подсветка при наведении — общая для таблиц (.table-container .table-inner).
 */
#clicks-table tbody tr
{
  cursor: pointer;
}

/* Длинный IPv6 переносится на две строки, а не растягивает таблицу. */
#clicks-table tbody td .table-field.ts-ip
{
  line-height: 1.35;
  white-space: normal;
}

/*
 * Горизонтальная прокрутка таблицы: заметная полоса и затемнение
 * у края, за которым ещё есть колонки.
 */
#clicks-table_wrapper .dt-scroll
{
  position: relative;
}

#clicks-table_wrapper .dt-scroll::before,
#clicks-table_wrapper .dt-scroll::after
{
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px;
  z-index: 2;
  width: 56px;
  opacity: 0;
  pointer-events: none;
}

#clicks-table_wrapper .dt-scroll::before
{
  left: 0;
  background: linear-gradient(to left, transparent, var(--control-bg));
}

#clicks-table_wrapper .dt-scroll::after
{
  right: 0;
  background: linear-gradient(to right, transparent, var(--control-bg));
}

#clicks-table_wrapper.ts-scroll-less .dt-scroll::before,
#clicks-table_wrapper.ts-scroll-more .dt-scroll::after
{
  opacity: 1;
}

/* Firefox: стандартные свойства. Chrome рисует полосу по правилам ниже. */
@supports not selector(::-webkit-scrollbar)
{
  #clicks-table_wrapper .dt-scroll-body
  {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--icon-muted) 55%, var(--scrollbar-table-thumb)) transparent;
  }
}

div.dt-container.dt-empty-footer#clicks-table_wrapper .dt-scroll-body::-webkit-scrollbar
{
  height: 8px;
}

div.dt-container.dt-empty-footer#clicks-table_wrapper .dt-scroll-body::-webkit-scrollbar-thumb
{
  background-color: color-mix(in srgb, var(--icon-muted) 55%, var(--scrollbar-table-thumb));
}

div.dt-container.dt-empty-footer#clicks-table_wrapper .dt-scroll-body::-webkit-scrollbar-thumb:hover
{
  background-color: var(--calendar-selection-bg);
}

/* Выбранная строка (открыта карточка визита): фон с акцентом и полоска, как при наведении */
#clicks-table tbody tr.tsv-selected > td
{
  background-color: color-mix(in srgb, var(--calendar-selection-bg) 10%, var(--control-bg));
}

#clicks-table tbody tr.tsv-selected > td:first-child
{
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.ts-row-arrow
{
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-left: auto;
  padding-left: 12px;
  box-sizing: content-box;
  fill: var(--icon-muted);
}

#clicks-table tbody tr:hover .ts-row-arrow,
#clicks-table tbody tr.tsv-selected .ts-row-arrow
{
  fill: var(--calendar-selection-bg);
  transform: translateX(3px);
}

body.tsv-lock
{
  overflow: hidden;
}

.tsv
{
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none;
}

.tsv.open
{
  visibility: visible;
  pointer-events: auto;
}

.tsv-shade
{
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, .35);
  opacity: 0;
}

.tsv.open .tsv-shade
{
  opacity: 1;
}

.tsv-panel
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  background: var(--statistics-popup-bg);
  border-left: 1px solid var(--statistics-popup-border);
  box-shadow: -16px 0 42px var(--statistics-popup-shadow);
  outline: none;
  transform: translateX(100%);
}

.tsv.open .tsv-panel
{
  transform: none;
}

.tsv-head
{
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--statistics-divider);
}

.tsv-head-row
{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.tsv-ip
{
  min-width: 0;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

.tsv-head-long .tsv-ip
{
  font-size: 13.5px;
  letter-spacing: -.02em;
}

.tsv-meta .status
{
  font-weight: 600;
}

.tsv-when
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tsv-when-main
{
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.tsv-when-main b
{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tsv-when-sub
{
  color: var(--statistics-label-color);
  font-size: 12px;
  font-weight: 400;
}

.tsv-geo
{
  display: flex;
  align-items: center;
  gap: 8px;
  /* Строка с IP высотой с кнопку закрытия, подтягиваем страну к самому IP. */
  margin-top: -4px;
  color: var(--statistics-label-color);
  font-size: 14px;
}

.tsv-geo span
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsv-geo .tsv-flag
{
  flex: none;
}

.tsv-close
{
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  place-items: center;
  background: transparent;
  border: 1px solid var(--statistics-popup-border);
  border-radius: 8px;
  color: var(--statistics-label-color);
  cursor: pointer;
}

.tsv-close:hover
{
  background: var(--calendar-control-hover-bg);
  color: var(--text-primary);
}

.tsv-meta
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--statistics-label-color);
  font-size: 12.5px;
}

.tsv-flag
{
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.tsv-body
{
  flex: 1;
  padding: 4px 24px 20px;
  overflow-y: auto;
}

/*
 * Прокрутка как в остальном проекте: тонкая, без стрелок и фона.
 * Свойство scrollbar-width здесь не ставим: Chrome тогда игнорирует
 * правила ::-webkit-scrollbar и рисует системную полосу со стрелками.
 */
.tsv-body,
.tsx-ms-list,
.tsx-menu,
.tsf-list
{
  scrollbar-gutter: auto;
}

.tsv-body::-webkit-scrollbar,
.tsx-ms-list::-webkit-scrollbar,
.tsx-menu::-webkit-scrollbar,
.tsf-list::-webkit-scrollbar
{
  width: 6px;
  height: 6px;
  background-color: transparent;
}

.tsv-body::-webkit-scrollbar-thumb,
.tsx-ms-list::-webkit-scrollbar-thumb,
.tsx-menu::-webkit-scrollbar-thumb,
.tsf-list::-webkit-scrollbar-thumb
{
  border-radius: 6px;
  background-color: var(--scrollbar-thumb);
}

.tsv-body::-webkit-scrollbar-track,
.tsx-ms-list::-webkit-scrollbar-track,
.tsx-menu::-webkit-scrollbar-track,
.tsf-list::-webkit-scrollbar-track
{
  border-radius: 6px;
  background-color: transparent;
}

.tsv-body::-webkit-scrollbar-button,
.tsx-ms-list::-webkit-scrollbar-button,
.tsx-menu::-webkit-scrollbar-button,
.tsf-list::-webkit-scrollbar-button
{
  display: none;
}

@supports not selector(::-webkit-scrollbar)
{
  .tsv-body,
  .tsx-ms-list,
  .tsx-menu,
  .tsf-list
  {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}

.tsv-section
{
  margin-top: 18px;
}

.tsv-title
{
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tsv-grid
{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 9px 14px;
  font-size: 13px;
  line-height: 1.4;
}

.tsv-key
{
  color: var(--statistics-label-color);
}

.tsv-value
{
  min-width: 0;
  color: var(--text-primary);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.tsv-value a
{
  color: var(--calendar-selection-bg);
  text-decoration: none;
}

.tsv-value a:hover
{
  text-decoration: underline;
}

.tsv-ua
{
  padding: 11px 13px;
  background: var(--calendar-control-hover-bg);
  border-radius: 10px;
  color: var(--statistics-label-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tsv-check
{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.tsv-check svg
{
  flex: 0 0 16px;
  margin-top: 1px;
}

.tsv-check b
{
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.tsv-check small
{
  display: block;
  margin-top: 2px;
  color: var(--statistics-label-color);
  font-size: 12px;
}

.tsv-check.ok
{
  background: var(--status-success-bg);
  border-color: color-mix(in srgb, var(--status-success) 25%, transparent);
  color: var(--status-success);
}

.tsv-check.bad
{
  background: var(--status-danger-bg);
  border-color: color-mix(in srgb, var(--status-danger) 25%, transparent);
  color: var(--status-danger);
}

.tsv-check.warn
{
  background: var(--status-warning-bg);
  border-color: color-mix(in srgb, var(--status-warning) 25%, transparent);
  color: var(--status-warning);
}

.tsv-check.muted
{
  background: var(--surface-highlight);
  color: var(--statistics-label-color);
}

.tsv-foot
{
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--statistics-divider);
}

@media (max-width: 767.98px)
{
  .tsv-panel
  {
    width: 100%;
    border-left: 0;
  }

  .tsv-head,
  .tsv-foot
  {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tsv-body
  {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tsv-grid
  {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .tsv-foot .button
  {
    flex: 1;
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
  }
}

/* Фильтр трекеров. */

.tsf
{
  position: relative;
  width: 280px;
  min-width: 280px;
}

.tsf-toggle
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.tsf-title
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Та же стрелка, что у всех выпадающих списков (select2). */
.tsf-arrow
{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  padding: 3px;
  box-sizing: border-box;
  fill: var(--select-arrow-color);
}

.tsf.open .tsf-arrow
{
  transform: rotate(180deg);
}

.tsf-menu
{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1150;
  display: none;
  width: 390px;
  background: var(--statistics-popup-bg);
  border: 1px solid var(--statistics-popup-border);
  border-radius: 12px;
  box-shadow: 0 16px 42px var(--statistics-popup-shadow);
  overflow: hidden;
}

.tsf.open .tsf-menu
{
  display: block;
}

.tsf-search
{
  padding: 12px;
  border-bottom: 1px solid var(--statistics-divider);
}

.tsf-search .input-control
{
  width: 100%;
}

.tsf-list
{
  max-height: 410px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tsf-row
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  color: var(--tracker-filter-row-text);
  cursor: pointer;
  user-select: none;
}

.tsf-row:hover
{
  background: var(--statistics-control-bg);
}

.tsf-all
{
  min-height: 46px;
  border-bottom: 1px solid var(--statistics-divider);
  color: var(--text-primary);
  font-weight: 500;
}

.tsf-group + .tsf-group
{
  border-top: 1px solid var(--statistics-divider);
}

.tsf-folder
{
  min-height: 44px;
  color: var(--text-primary);
  font-weight: 500;
}

.tsf-folder .icon
{
  color: var(--tracker-filter-folder-icon);
}

.tsf-items
{
  padding-bottom: 4px;
}

.tsf-item
{
  padding-left: 38px;
  color: var(--tracker-filter-item-text);
}

.tsf-item .icon
{
  color: var(--tracker-filter-item-icon);
}

.tsf-input
{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tsf-check
{
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--tracker-filter-check-bg);
  border: 1px solid var(--tracker-filter-scrollbar-thumb);
  border-radius: 5px;
}

.tsf-input:checked + .tsf-check
{
  background: var(--tracker-filter-check-selected-bg);
  border-color: var(--tracker-filter-check-selected-bg);
}

.tsf-input:checked + .tsf-check::after
{
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tsf-input:indeterminate + .tsf-check
{
  background: var(--tracker-filter-check-selected-bg);
  border-color: var(--tracker-filter-check-selected-bg);
}

.tsf-input:indeterminate + .tsf-check::after
{
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 2px;
  background: var(--text-on-accent);
  border-radius: 2px;
}

.tsf-name
{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsf-count
{
  flex: 0 0 auto;
  color: var(--tracker-filter-count-color);
  font-size: 12px;
}

.tsf-empty
{
  display: none;
  padding: 18px 14px;
  color: var(--statistics-label-color);
  text-align: center;
}

.tsf-no-data
{
  padding: 18px 14px;
  color: var(--statistics-label-color);
  text-align: center;
}

@media (max-width: 767.98px)
{
  .tsf
  {
    width: 100%;
    min-width: 0;
  }

  .tsf-menu
  {
    width: min(390px, calc(100vw - 32px));
  }
}

/* Основной график статистики переходов. */

.ts-chart
{
  margin: 22px 0 24px;
}

.ts-chart .box-header
{
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Карточки итогов над графиком — общий блок templates/stat-cards.php («Статистика переходов», «Рефералы»):
   значок цвета линии (--card-color), название, итог; выбранная — на графике только её линия */
.stat-cards
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 4px 0 18px;
}

.stat-card
{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--statistics-card-bg);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.stat-card.active
{
  border-color: var(--card-color);
  background: color-mix(in srgb, var(--card-color) 8%, var(--statistics-card-bg));
}

.stat-card-icon
{
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--card-color);
  background-color: color-mix(in srgb, var(--card-color) 16%, transparent);
}

.stat-card-icon svg
{
  fill: currentColor;
}

.stat-card-text
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-card-name
{
  font-size: 13px;
  color: var(--statistics-label-color);
}

.stat-card-value
{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}

.ts-chart-body
{
  position: relative;
  width: 100%;
  height: 240px;
  min-height: 240px;
}

.ts-chart-body .ts-echart
{
  width: 100% !important;
  height: 100% !important;
}

#tracking-statistics-chart-legend .box-chart-vals,
.ref-legend .box-chart-vals
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

#tracking-statistics-chart-legend .box-chart-val,
.ref-legend .box-chart-val
{
  position: relative;
  padding-left: 14px;
  color: var(--chart-legend-color);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

#tracking-statistics-chart-legend .box-chart-val::before,
.ref-legend .box-chart-val::before
{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--point-color);
  border-radius: 50%;
}

#tracking-statistics-chart-legend .box-chart-val.hidden,
.ref-legend .box-chart-val.hidden
{
  opacity: .4;
}

.ts-chart-empty
{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}

@keyframes ts-line-pulse
{
  0%,
  100%
  {
    opacity: .34;
  }

  50%
  {
    opacity: .66;
  }
}

.ts-chart-empty
{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  pointer-events: none;
}


.ts-chart-empty
{
  gap: 7px;
  padding: 20px;
  background: var(--statistics-empty-overlay);
  backdrop-filter: blur(2px);
  color: var(--statistics-label-color);
}

.ts-chart.empty:not(.loading) .ts-chart-empty
{
  display: flex;
}

/* При пустой выборке сам график не показываем. */

.ts-chart.empty:not(.loading) .ts-chart-body .ts-echart
{
  opacity: 0;
  visibility: hidden;
}

.ts-chart-empty-icon
{
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-chart-empty-icon svg
{
  width: 28px;
  height: 28px;
  fill: var(--accent-primary);
}

.ts-chart-empty strong
{
  color: var(--text-primary);
  font-size: 13px;
}

.ts-chart-empty span
{
  max-width: 300px;
  font-size: 11px;
  line-height: 1.45;
}

/* ==========================================================================
   Таблицы DataTables: зона, нижняя панель, состояние загрузки.
   Общие для списка трекеров и логов статистики (TableKit в assets/js/core/app.js).
   ========================================================================== */

.table-zone
{
  position: relative;
}

/* Низ внутри панели: страницы слева, счётчик и выбор количества строк справа. */

.table-container .bottom
{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  border-top: 1px solid var(--border-default);
}

/* Таблица без страниц (профиль): низа нет */
.table-container .bottom:empty
{
  display: none;
}

.table-zone .table-info
{
  margin-left: auto;
  font-size: 13px;
  color: var(--text-hint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-zone .bottom .dt-paging
{
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.table-zone .table-length
{
  flex: 0 0 120px;
  width: 120px;
}

.table-zone .table-length .select2-container
{
  display: block;
  width: 100% !important;
}

/* Нижний Select2 — малый, как поля над таблицей (поиск, фильтры): 38 px на всех страницах. */

.table-zone .table-length .select2-container .select2-selection--single
{
  min-height: 38px;
  padding: 0 12px;
}

.table-zone .table-length .select2-container--default .select2-selection--single .select2-selection__rendered
{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 14px;
  line-height: 36px;
}

.table-zone .table-length .select2-container--default .select2-selection--single .select2-selection__arrow
{
  right: 12px;
}

/* До первого ответа сервера пагинация и выбор строк не нужны. */

.table-zone.is-first-loading .bottom
{
  visibility: hidden;
}

/* Во время загрузки таблица приглушается. */

.table-zone.is-loading tbody
{
  opacity: .45;
  pointer-events: none;
}

/* Раскрытые детали строки на время загрузки скрываются. */

.table-zone.is-loading tbody tr.dt-hasChild + tr
{
  display: none;
}

/* Телефон: страницы сверху, под ними счётчик слева и «По N» справа */
@media (max-width: 575.98px)
{
  .table-container .bottom
  {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px;
  }

  .table-zone .bottom .dt-paging
  {
    flex: 1 0 100%;
  }

  .table-zone .table-info
  {
    margin-left: 0;
  }

  .table-zone .table-length
  {
    flex-basis: 110px;
    width: 110px;
    margin-left: auto;
  }
}

@media (max-width: 991.98px)
{
  .stat-cards
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px)
{
  .ts-chart .box-header
  {
    align-items: flex-start;
    flex-direction: column;
  }

  .stat-cards
  {
    gap: 10px;
  }

  .stat-card
  {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .stat-card-value
  {
    font-size: 20px;
  }

  .ts-chart-body
  {
    height: 210px;
    min-height: 210px;
  }
}

/* География переходов. */

.ts-geo
{
  margin: 0 0 30px;
  overflow: hidden;
}

.ts-geo .box-header
{
  margin-bottom: 10px;
}

.ts-geo-layout
{
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(420px, 1fr);
  gap: 0;
}

.ts-geo-main
{
  min-width: 0;
  padding-right: 36px;
}

.ts-geo-map
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 350px;
  min-height: 350px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(var(--geo-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--geo-grid-color) 1px, transparent 1px),
        radial-gradient(circle at 54% 42%, var(--geo-map-glow-color), transparent 38%);
  background-size: 26px 26px, 26px 26px, auto;
}

.ts-geo-world
{
  display: block;
  width: 100%;
  height: 350px;
  max-height: 350px;
  overflow: visible;
}


/* «Топ стран» — отдельная колонка с линией слева, без серой подложки. */
.ts-geo-ranking
{
  position: relative;
  min-width: 0;
  padding: 0 12px 0 36px;
  overflow: hidden;
  border-left: 1px solid var(--chart-grid-color);
}

.ts-geo-list
{
  display: flex;
  flex-direction: column;
}

.ts-geo-row
{
  display: grid;
  grid-template-columns: 9px minmax(150px, 1fr) auto 48px 86px;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border-bottom: 1px solid var(--geo-ranking-divider);
}

.ts-geo-row:last-child
{
  border-bottom: 0;
}

.ts-geo-row.other
{
  margin-top: 3px;
  padding-top: 3px;
  color: var(--statistics-label-color);
}

.ts-geo-dot
{
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ts-geo-country
{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ts-geo-flag
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--geo-flag-surface);
  box-shadow: 0 0 0 1px var(--geo-flag-surface);
}

.ts-geo-flag img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-geo-country-name
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--geo-country-name-color);
  font-size: 12px;
}

.ts-geo-value
{
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.ts-geo-percent
{
  color: var(--statistics-label-color);
  font-size: 11px;
  text-align: right;
}

.ts-geo-bar
{
  position: relative;
  height: 6px;
  overflow: hidden;
  background: var(--geo-bar-track);
  border-radius: 4px;
}

.ts-geo-bar > i
{
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
}

.ts-geo-empty
{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--statistics-empty-overlay);
  backdrop-filter: blur(2px);
  color: var(--statistics-label-color);
  text-align: center;
}

.ts-geo.empty .ts-geo-empty
{
  display: flex;
}

.ts-geo.empty .ts-geo-list
{
  opacity: .25;
}

/* Если географических данных нет, правая колонка «Топ стран» не нужна. */

.ts-geo.empty .ts-geo-layout
{
  grid-template-columns: minmax(0, 1fr);
}

.ts-geo.empty .ts-geo-ranking
{
  display: none;
}

/* Загрузка: «Статистика», «География» и разбивка тускнеют одинаково, целиком. */
.ts-chart.loading > *,
.ts-geo.loading > *,
.ts-breakdown-section.loading
{
  opacity: .4;
  pointer-events: none;
}

/* Загрузка в компактном виде: вместо «Нет данных» — «Загрузка...» той же высоты. */
.ts-geo.loading.empty .ts-geo-empty
{
  color: transparent;
}

/* «Загрузка...» в пустых блоках; у графика — только при первой загрузке.
   Текст на языке страницы задаёт словарь (js.common.css_loading в i18n-js.php). */
.ts-chart.ts-chart-pending .ts-chart-body::after,
.ts-geo.loading.empty .ts-geo-empty::after,
.ts-breakdown-section.loading.empty .ts-breakdown-empty::after
{
  content: var(--text-loading, "Загрузка...");
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--statistics-label-color);
  font-size: 13px;
}

@media (max-width: 1199.98px)
{
  .ts-geo-layout
  {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
  }

  .ts-geo-row
  {
    grid-template-columns: 9px minmax(0, 1fr) auto 44px;
  }

  .ts-geo-bar
  {
    display: none;
  }
}

@media (max-width: 991.98px)
{
  .ts-geo-layout
  {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ts-geo-main
  {
    padding-right: 0;
  }

  .ts-geo-map
  {
    height: 320px;
    min-height: 320px;
  }

  .ts-geo-world
  {
    height: 320px;
    max-height: 320px;
  }

  .ts-geo-ranking
  {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--chart-grid-color);
  }

  .ts-geo-row
  {
    grid-template-columns: 9px minmax(0, 1fr) auto 50px 90px;
  }

  .ts-geo-bar
  {
    display: block;
  }
}

@media (max-width: 575.98px)
{
  .ts-geo-map
  {
    height: 250px;
    min-height: 250px;
  }

  .ts-geo-world
  {
    height: 250px;
    max-height: 250px;
  }

  .ts-geo-row
  {
    grid-template-columns: 9px minmax(0, 1fr) auto 44px;
  }

  .ts-geo-bar
  {
    display: none;
  }
}

/* Компактное пустое состояние статистики и географии. */

.ts-chart.empty:not(.loading) .ts-chart-body
{
  height: auto;
  min-height: 0;
}

.ts-chart.empty:not(.loading) .ts-chart-body .ts-echart
{
  display: none !important;
}

.ts-chart.empty:not(.loading) .ts-chart-empty
{
  position: relative;
  inset: auto;
  padding: 28px 20px 30px;
  background: transparent;
  backdrop-filter: none;
}

.ts-geo.empty .ts-geo-layout
{
  display: block;
}

.ts-geo.empty .ts-geo-main
{
  padding-right: 0;
}

.ts-geo.empty .ts-geo-map
{
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 14px 0 6px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.ts-geo.empty .ts-geo-world
{
  display: none;
}

.ts-geo.empty .ts-geo-empty
{
  position: relative;
  inset: auto;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  font-size: 13px;
}

/* Разбивка трафика: устройства / ОС / браузеры — один блок, три графика полосами. */

.ts-breakdown-card
{
  position: relative;
  min-width: 0;
  margin-bottom: 30px;
  padding: 18px;
}

.ts-breakdown-grid
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.ts-breakdown-section
{
  position: relative;
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid var(--chart-grid-color);
}

.ts-breakdown-section:first-child
{
  padding-left: 0;
  border-left: 0;
}

.ts-breakdown-section:last-child
{
  padding-right: 0;
}

.ts-breakdown-subtitle
{
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

/* Высоту графика задаёт JS по числу строк; здесь — только стартовая. */
.ts-breakdown-chart .ts-echart
{
  width: 100%;
  height: 96px;
}

.ts-breakdown-empty
{
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px 0 6px;
  color: var(--statistics-label-color);
  font-size: 13px;
  text-align: center;
}

.ts-breakdown-section.empty .ts-breakdown-chart
{
  display: none;
}

.ts-breakdown-section.empty .ts-breakdown-empty
{
  position: relative;
  display: flex;
}

.ts-breakdown-section.loading.empty .ts-breakdown-empty
{
  color: transparent;
}

/* Пустое состояние: иконка над текстом. */
.ts-breakdown-empty
{
  flex-direction: column;
  gap: 10px;
}

.ts-empty-icon
{
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--statistics-label-color);
  opacity: 0.2;
}

.ts-geo.loading.empty .ts-empty-icon,
.ts-breakdown-section.loading.empty .ts-empty-icon
{
  visibility: hidden;
}

@media (max-width: 991.98px)
{
  .ts-breakdown-grid
  {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ts-breakdown-section,
  .ts-breakdown-section:first-child,
  .ts-breakdown-section:last-child
  {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--chart-grid-color);
  }

  .ts-breakdown-section:first-child
  {
    padding-top: 0;
    border-top: 0;
  }
}

@media screen and (max-width: 420px)
{
  .input-pin
  {
    min-height: 45px;
    font-size: 20px;
  }

  .input-row
  {
    gap: 8px;
  }
}

@media screen and (max-width: 400px)
{
  .toasts-item
  {
    min-width: 100%;
  }
}

@media screen and (min-width: 1260px) and (max-width: 1300px)
{
  .box-chart-val:not(:last-child)
  {
    margin-bottom: 6px;
  }
}

@media screen and (max-width: 768px) and (min-width: 576px)
{
  .tabs-header-inner
  {
    flex-direction: column;
    width: 100%;
  }
}

/* Foreground on solid accent backgrounds stays white in both themes. */

.button-blue, .button-blue:hover, .button-blue:disabled,
.select2-actions button.select-all, .select2-actions button.cancel-all,
.select2-actions button.select-all:hover, .select2-actions button.cancel-all:hover,
.modal-close
{
  color: var(--text-on-accent);
}

.modal-close:hover svg
{
  fill: var(--text-on-accent);
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button:nth-child(1),
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button:nth-child(1)
{
  color: var(--text-on-accent) !important;
}

.input-toggle input:checked + span:after
{
  background-color: var(--text-on-accent);
}

[data-theme-toggle]:focus-visible
{
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

/* Inline SVG colors in the supplied analytics page. */

.main-plan.light .main-plan-header-icon [fill="white"]
{
  fill: var(--plan-basic-accent);
}

.main-plan.light .main-plan-header-button [fill="white"]
{
  fill: var(--plan-basic-accent);
}

.theme-toggle
{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  min-height: 40px;
}

.theme-toggle svg
{
  width: 19px;
  height: 19px;
}

.theme-toggle .theme-moon
{
  display: none;
}

:root[data-theme="light"] .theme-toggle .theme-sun
{
  display: none;
}

:root[data-theme="light"] .theme-toggle .theme-moon
{
  display: block;
}

.theme-switch
{
  padding: 0;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
}

.theme-switch .icon
{
  fill: currentColor;
}

.theme-switch .theme-switch-moon
{
  display: none;
}

:root[data-theme="light"] .theme-switch .theme-switch-sun
{
  display: none;
}

:root[data-theme="light"] .theme-switch .theme-switch-moon
{
  display: block;
}

.theme-switch:focus-visible
{
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

.brand-logo img
{
  width: 180px;
}

.brand-logo .brand-logo-on-dark
{
  display: block;
}

.brand-logo .brand-logo-on-light
{
  display: none;
}

:root[data-theme="light"] .brand-logo .brand-logo-on-dark
{
  display: none;
}

:root[data-theme="light"] .brand-logo .brand-logo-on-light
{
  display: block;
}

.button-blue:active,
.select2-actions button.select-all:active
{
  background-image: var(--button-primary-active-gradient);
}

.button-blue:focus-visible,
.select2-actions button.select-all:focus-visible
{
  outline: 2px solid var(--button-primary-focus-ring);
  outline-offset: 3px;
}

/* ==========================================================================
   Согласование тем: места, где одних токенов недостаточно.
   ========================================================================== */

/* Блик загрузки на градиентной кнопке всегда светлый. */

.button-blue.btn-loading.is-loading::after
{
  background: linear-gradient(120deg, transparent 0%, var(--on-accent-overlay) 50%, transparent 100%);
}

/* Видимый фокус с клавиатуры для кнопок. */

.button:focus-visible,
.button-round:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/*
 * Поля ввода: вместо жёсткой обводки — цветная рамка и мягкая тень.
 * Текстовые поля получают :focus-visible и при клике мышью, поэтому outline убираем.
 */
.input-control:focus,
.input-control:focus-visible
{
  outline: none;
  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

/* Кнопки в виде поля (например «Все трекеры») не подсвечиваем после клика мышью. */
button.input-control:focus:not(:focus-visible)
{
  border-color: var(--border-default);
  box-shadow: none;
}

/* Тёмный фон 404 не подходит светлой теме. */

:root[data-theme="light"] .error404
{
  background-image: none;
}

/* Бегунок переключателя в светлой теме — белый с тенью. */

:root[data-theme="light"] .input-toggle span:after
{
  box-shadow: 0 1px 3px rgba(20, 27, 45, .25);
}
/* ==========================================================================
   Выбор языка: кнопка и окно со списком языков (app/lang-picker.php)
   ========================================================================== */

.lang-picker-button
{
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: inherit;
}

.lang-picker-button:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 4px;
  border-radius: 6px;
}

.lang-picker-open,
.lang-picker-open body
{
  overflow: hidden;
}

.lang-picker
{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lang-picker[hidden]
{
  display: none;
}

/*
 * Прозрачность анимируем у фона и окна по отдельности, а не у всего .lang-picker.
 * Пока у родителя opacity < 1, браузер не применяет backdrop-filter к его
 * потомкам: размытие появлялось только после того, как окно уже открылось.
 */
.lang-picker-backdrop
{
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
}

.lang-picker.show .lang-picker-backdrop
{
  opacity: 1;
}

:root[data-theme="light"] .lang-picker-backdrop
{
  background: rgba(20, 27, 45, .35);
}

.lang-picker-dialog
{
  position: relative;
  width: 760px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 32px;
  box-sizing: border-box;
  background: var(--surface-dialog);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(8px) scale(.98);
}

.lang-picker.show .lang-picker-dialog
{
  opacity: 1;
  transform: none;
}

.lang-picker-dialog-small
{
  width: 560px;
}

.lang-picker-close
{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  cursor: pointer;
}

.lang-picker-close svg
{
  width: 16px;
  height: 16px;
  fill: var(--text-secondary);
}

.lang-picker-close:hover svg
{
  fill: var(--text-primary);
}

.lang-picker-close:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.lang-picker-title
{
  margin: 0 56px 6px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.lang-picker-text
{
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.lang-picker-search
{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  margin-bottom: 16px;
  flex: none;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-control);
  cursor: text;
}

.lang-picker-search:focus-within
{
  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

.lang-picker-search svg
{
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--icon-muted);
}

.lang-picker-search input
{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}

.lang-picker-search input::placeholder
{
  color: var(--input-placeholder);
}

.lang-picker-search input::-webkit-search-cancel-button
{
  display: none;
}

.lang-picker-grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow-y: auto;
  margin: -2px;
  padding: 2px;
}

.lang-picker-dialog-small .lang-picker-grid
{
  grid-template-columns: repeat(2, 1fr);
}

.lang-picker-item
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 34px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  text-decoration: none;
}

.lang-picker-item[hidden]
{
  display: none;
}

.lang-picker-item:hover
{
  background: var(--surface-highlight);
  border-color: var(--border-interactive-hover);
}

.lang-picker-item:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.lang-picker-item.active
{
  background: var(--select-active-bg);
  border-color: var(--accent-primary);
}

.lang-picker-flag
{
  width: 32px;
  height: 32px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-control);
}

.lang-picker-flag img
{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lang-picker-names
{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lang-picker-name
{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.lang-picker-name-en
{
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.lang-picker-check
{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  fill: var(--accent-primary);
}

.lang-picker-empty
{
  padding: 24px 0 8px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* На телефоне окно выезжает снизу, языки в одну колонку */

@media (max-width: 575px)
{
  .lang-picker
  {
    align-items: flex-end;
    padding: 0;
  }

  .lang-picker-dialog,
  .lang-picker-dialog-small
  {
    width: 100%;
    max-height: 88%;
    padding: 22px 18px 24px;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }

  .lang-picker-close
  {
    top: 14px;
    right: 14px;
  }

  .lang-picker-title
  {
    font-size: 19px;
  }

  .lang-picker-grid,
  .lang-picker-dialog-small .lang-picker-grid
  {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Окно «Мои папки» и формы папок (json-folders.php) — в стиле окна выбора языка
   ========================================================================== */

.modal-dialog:has(.app-modal)
{
  max-width: 560px;
}

.modal-content:has(.app-modal)
{
  background: var(--surface-dialog);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
}

body:has(.app-modal) .modal-backdrop
{
  backdrop-filter: blur(3px);
}

.app-modal
{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
  padding: 24px 28px 28px;
  box-sizing: border-box;
}

.app-modal-head
{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

/* Окно без подзаголовка: заголовок по центру значка */
.app-modal-head:not(:has(.app-modal-text))
{
  align-items: center;
}

.app-modal-heading
{
  flex: 1;
  min-width: 0;
}

.app-modal-title
{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.app-modal-count
{
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.app-modal-text
{
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

.app-modal-round
{
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  cursor: pointer;
}

.app-modal-round svg
{
  width: 16px;
  height: 16px;
  fill: var(--text-secondary);
}

.app-modal-round:hover svg
{
  fill: var(--text-primary);
}

.app-modal-round:focus-visible,
.app-modal-action:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.app-modal-search
{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  margin-bottom: 14px;
  flex: none;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-control);
  cursor: text;
}

.app-modal-search:focus-within
{
  border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

.app-modal-search svg
{
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--icon-muted);
}

.app-modal-search input
{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}

.app-modal-search input::placeholder
{
  color: var(--input-placeholder);
}

.app-modal-search input::-webkit-search-cancel-button
{
  display: none;
}

.app-modal-list
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  margin: -2px;
  padding: 2px;
}

.app-modal-list:empty
{
  display: none;
}

.app-modal-item
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
}

.app-modal-item[hidden]
{
  display: none;
}

.app-modal-item:hover
{
  background: var(--surface-highlight);
  border-color: var(--border-interactive-hover);
}

.app-modal-icon
{
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--select-active-bg);
}

.app-modal-icon svg
{
  width: 18px;
  height: 18px;
  fill: var(--accent-primary);
}

.app-modal-names
{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-modal-name
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.app-modal-meta
{
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.app-modal-actions
{
  display: flex;
  gap: 6px;
  flex: none;
}

.app-modal-action
{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--surface-muted);
  cursor: pointer;
}

.app-modal-action svg
{
  width: 15px;
  height: 15px;
  fill: var(--text-secondary);
}

.app-modal-action:hover
{
  background: var(--select-active-bg);
}

.app-modal-action:hover svg
{
  fill: var(--accent-primary);
}

.app-modal-action-delete:hover
{
  background: var(--status-danger-bg);
}

.app-modal-action-delete:hover svg
{
  fill: var(--status-danger);
}

.app-modal-action:disabled
{
  opacity: .4;
  cursor: not-allowed;
  background: var(--surface-muted);
}

.app-modal-action:disabled svg
{
  fill: var(--text-secondary);
}

.app-modal-empty
{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
  text-align: center;
}

.app-modal-empty[hidden],
.app-modal-nothing[hidden]
{
  display: none;
}

.app-modal-empty-icon
{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--select-active-bg);
}

.app-modal-empty-icon svg
{
  width: 24px;
  height: 24px;
  fill: var(--accent-primary);
}

.app-modal-empty-title
{
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-modal-empty-text,
.app-modal-nothing
{
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.app-modal-nothing
{
  padding: 16px 0 4px;
  text-align: center;
}

.app-modal-foot
{
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex: none;
}

.app-modal-foot .button
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.app-modal-foot .button svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.app-modal-foot .button:disabled
{
  opacity: .5;
  cursor: not-allowed;
}

.app-modal-cancel
{
  background: var(--surface-muted);
  color: var(--text-primary);
}

.app-modal-cancel:hover
{
  background: var(--button-secondary-hover-bg);
}

.app-modal-form .input-field
{
  margin-bottom: 0;
}

.app-modal-hint
{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-hint);
}

/* На телефоне окно выезжает снизу */

@media (max-width: 575px)
{
  .modal-dialog:has(.app-modal)
  {
    max-width: none;
    min-height: 100%;
    margin: 0;
    align-items: flex-end;
  }

  .modal-content:has(.app-modal)
  {
    border-radius: 20px 20px 0 0;
  }

  .app-modal
  {
    max-height: 88vh;
    padding: 20px 18px 24px;
  }

  .app-modal-title
  {
    font-size: 19px;
  }
}

.app-modal-foot .button
{
  padding: 2px 20px;
}

/* ==========================================================================
   Окно «WAF-правила» (json-tracking.php) — на основе окна «Мои папки»
   ========================================================================== */

.modal-dialog:has(.waf-modal)
{
  max-width: 640px;
}

.waf-modal-list:not(:has(.waf-modal-item))
{
  display: none;
}

.waf-modal-item
{
  gap: 12px;
  padding: 10px 14px 10px 6px;
}

/* Ручка перетаскивания: порядок карточек = порядок проверки правил */
.waf-modal-handle
{
  width: 22px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}

.waf-modal-handle:active
{
  cursor: grabbing;
}

.waf-modal-handle svg
{
  width: 16px;
  height: 16px;
  fill: var(--icon-muted);
}

.waf-modal-item:hover .waf-modal-handle svg
{
  fill: var(--text-primary);
}

/* Цвет по действию: блокировка — красный, перенаправление — синий, случайное — бирюзовый */
.waf-modal-icon.waf-modal-kind-block
{
  background: var(--status-danger-bg);
}

.waf-modal-icon.waf-modal-kind-block svg
{
  fill: var(--status-danger);
}

.waf-modal-icon.waf-modal-kind-random
{
  background: color-mix(in srgb, var(--accent-secondary) 14%, transparent);
}

.waf-modal-icon.waf-modal-kind-random svg
{
  fill: var(--accent-secondary);
}

.waf-modal-meta
{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
  white-space: nowrap;
}

.waf-modal-action
{
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--accent-primary);
}

.waf-modal-action.waf-modal-kind-block
{
  color: var(--status-danger);
}

.waf-modal-action.waf-modal-kind-random
{
  color: var(--accent-secondary);
}

.waf-modal-triggers
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waf-modal-triggers::before
{
  content: "·";
  margin-right: 6px;
  color: var(--text-hint);
}

/* Переключатель отделён от кнопок линией, как отдельное действие */
.waf-modal-switch
{
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: -10px 0 -10px 2px;
  padding-left: 14px;
  border-left: 1px solid var(--border-default);
}

.waf-modal-switch span
{
  width: 41px;
  height: 21px;
  padding: 0;
}

/* Отключённое правило приглушено, но остаётся доступным для включения */
.waf-modal-item.is-off .waf-modal-icon,
.waf-modal-item.is-off .app-modal-names
{
  opacity: .5;
}

.waf-modal-item.is-off .waf-modal-icon
{
  filter: grayscale(1);
}

/* Перетаскивание */
.waf-modal-item.sortable-chosen
{
  background: var(--surface-highlight);
  border-color: var(--border-interactive-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.waf-modal-item.sortable-ghost
{
  opacity: .4;
  border-style: dashed;
  border-color: var(--accent-primary);
  box-shadow: none;
}

.waf-modal-limit
{
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--status-warning);
}

.waf-modal-limit[hidden]
{
  display: none;
}

@media (max-width: 575px)
{
  .waf-modal-item
  {
    gap: 8px;
    padding-right: 10px;
  }

  .waf-modal-icon
  {
    display: none;
  }

  .waf-modal-triggers
  {
    display: none;
  }

  .waf-modal-switch
  {
    padding-left: 10px;
  }
}

/* ==========================================================================
   Форма WAF-правила (добавление и редактирование) — в стиле окна «Мои папки»
   ========================================================================== */

.modal-dialog:has(.waf-form-modal)
{
  max-width: 720px;
}

/* Форма длиннее экрана: прокручивается всё окно, как обычная модалка */
.waf-form-modal
{
  max-height: none;
}

.waf-form
{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.waf-form-section
{
  padding: 18px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--surface-card);
}

.waf-form-section-head
{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.waf-form-step
{
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--select-active-bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
}

.waf-form-section-title
{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.waf-form-required
{
  color: var(--status-danger);
}

.waf-form-section-hint
{
  grid-column: 2;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Отступы внутри секций задаёт форма, а не общие .input-field */
.waf-form-modal .waf-form-section .input-field:not(:last-child)
{
  margin-bottom: 14px;
}

.waf-form-modal .waf-rulls-item > .input-field
{
  margin-bottom: 0;
}

/* Условия: группа = карточка, внутри условия через AND, между группами OR */
.waf-form-modal .waf-rulls
{
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.waf-form-modal .waf-rulls-items
{
  position: relative;
  margin: 0;
}

/* Между группами — пунктирная линия с меткой OR */
.waf-form-modal .waf-rulls-items + .waf-rulls-items
{
  margin-top: 18px;
  padding-top: 40px;
}

.waf-form-modal .waf-rulls-items + .waf-rulls-items::before
{
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--status-warning) 40%, transparent);
}

.waf-form-modal .waf-rulls-items + .waf-rulls-items::after
{
  content: "OR";
  position: absolute;
  top: 1px;
  left: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-warning) 16%, var(--surface-dialog));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--status-warning);
}

.waf-form-modal .waf-rulls-items .waf-rulls-item:not(:last-child)::after
{
  content: "AND";
  display: block;
  width: max-content;
  margin: 14px 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--select-active-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--accent-primary);
}

.waf-form-modal .input-box
{
  padding: 0;
  border: 0;
  border-radius: 0;
}

.waf-form-modal .input-box .row
{
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
}

/* Кнопка удаления условия — в правом верхнем углу условия */
.waf-form-modal .input-box-button.waf-rulls-del
{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

/* Строка AND/OR скрывается, если в ней осталась только кнопка удаления */
.waf-form-modal .waf-rulls-actions:not(:has(.waf-rulls-and, .waf-rulls-or))
{
  height: 0;
  margin-top: 0;
  padding-top: 0;
}

.waf-form-modal .input-box-actions
{
  width: 100%;
  gap: 8px;
}

.waf-form-modal .input-box-button
{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--select-active-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-primary);
}

.waf-form-modal .input-box-button:not(.del)::before
{
  content: "+";
  margin-right: 6px;
  font-size: 14px;
  font-weight: 600;
}

.waf-form-modal .input-box-button.waf-rulls-or
{
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
  color: var(--status-warning);
}

.waf-form-modal .input-box-button:hover
{
  background: color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.waf-form-modal .input-box-button.waf-rulls-or:hover
{
  background: color-mix(in srgb, var(--status-warning) 24%, transparent);
}

.waf-form-modal .input-box-button.del
{
  width: 32px;
  justify-content: center;
  padding: 0;
  background: var(--status-danger-bg);
}

.waf-form-modal .input-box-button.del:hover
{
  background: color-mix(in srgb, var(--status-danger) 22%, transparent);
}

.waf-form-modal .input-box-button.del svg
{
  width: 12px;
  height: 12px;
  fill: var(--status-danger);
}

/* Предпросмотр итогового выражения */
.waf-form-preview
{
  margin-top: 14px;
}

.waf-form-preview-label
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.waf-form-preview-label svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.waf-form-modal .input-expression
{
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px dashed var(--border-control);
  border-radius: 12px;
  background: var(--input-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--accent-primary);
}

.waf-form-modal .input-expression:empty::before
{
  content: attr(data-empty);
  font-family: var(--font-family-body);
  font-size: 13px;
  color: var(--input-placeholder);
}

/* Действие: блоки под выбранным действием */
.waf-form-modal .waf-action-value > *
{
  margin: 14px 0 0 !important;
}

.waf-form-modal .waf-form-section > .conditional-field > .input-field
{
  margin-bottom: 0;
}

.waf-form-foot
{
  margin-top: 6px;
}

@media (max-width: 575px)
{
  .waf-form-section
  {
    padding: 14px;
  }
}

/* ==========================================================================
   Мультивыбор в форме WAF — как фильтр в статистике (теги, поиск, галочки)
   ========================================================================== */

/* Сам select остаётся в форме для проверки и .val(), но не виден */
select.waf-ms-native
{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.waf-ms .tsx-ms-box
{
  min-height: 52px;
  max-height: 168px;
  padding: 8px 10px;
  gap: 6px;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.waf-ms .tsx-tag
{
  height: 32px;
  gap: 8px;
  padding: 0 4px 0 10px;
  border-radius: 8px;
  font-size: 14px;
}

.waf-ms .tsx-tag-remove
{
  width: 24px;
  height: 24px;
}

.waf-ms .tsx-flag
{
  flex-basis: 20px;
  width: 20px;
  height: 15px;
}

.waf-ms .tsx-ms-input
{
  height: 32px;
  font-size: 14px;
}

.waf-ms .tsx-ms-input::placeholder
{
  color: var(--input-placeholder);
}

/* Список раскрывается под полем и сдвигает форму вниз, а не перекрывает её */
.waf-ms .tsx-ms-list
{
  position: static;
  max-height: 280px;
  margin-top: 6px;
  padding: 6px;
}

.waf-ms .tsx-ms-option
{
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.waf-ms .tsx-ms-check
{
  flex-basis: 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.waf-ms .tsx-ms-check svg
{
  width: 14px;
  height: 14px;
}

.waf-ms.is-disabled
{
  opacity: .5;
  pointer-events: none;
}

/* Ошибка проверки на скрытом select подсвечивает поле */
.waf-ms:has(+ select.error:not([aria-invalid="false"])) .tsx-ms-box
{
  border-color: var(--border-danger);
}

/* ==========================================================================
   Окно «Массовые изменения» — на основе формы WAF (шаги, предпросмотр)
   ========================================================================== */

/* Найти → Заменить на */
.bulk-pair
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

.bulk-pair-arrow
{
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--select-active-bg);
}

.bulk-pair-arrow svg
{
  width: 16px;
  height: 16px;
  fill: var(--accent-primary);
}

/* Области замены — карточки-переключатели */
.bulk-scopes
{
  display: grid;
  gap: 10px;
}

.bulk-scope
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
  cursor: pointer;
}

.bulk-scope:hover
{
  border-color: var(--border-interactive-hover);
}

.bulk-scope input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bulk-scope:has(input:checked)
{
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
}

.bulk-scope:has(input:focus-visible)
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.bulk-scope-check
{
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--calendar-control-border);
  border-radius: 6px;
}

.bulk-scope-check svg
{
  display: none;
  width: 14px;
  height: 14px;
  fill: #fff;
}

.bulk-scope input:checked ~ .bulk-scope-check
{
  background: var(--calendar-selection-bg);
  border-color: var(--calendar-selection-bg);
}

.bulk-scope input:checked ~ .bulk-scope-check svg
{
  display: block;
}

.bulk-scope:not(:has(input:checked)) .bulk-scope-icon
{
  opacity: .45;
  filter: grayscale(1);
}

.bulk-scope-names
{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bulk-scope-title
{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.bulk-scope-text
{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Предпросмотр */
.bulk-preview-empty
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--border-control);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.bulk-preview-empty svg
{
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.bulk-preview.is-error .bulk-preview-empty
{
  border-style: solid;
  border-color: var(--border-danger);
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.bulk-stats
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bulk-stat
{
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-default);
}

.bulk-stat-value
{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bulk-stat-label
{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.bulk-examples-title
{
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.bulk-example
{
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--input-bg);
}

.bulk-example + .bulk-example
{
  margin-top: 8px;
}

.bulk-example-owner
{
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.bulk-example-line
{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.bulk-example-line + .bulk-example-line
{
  margin-top: 4px;
}

.bulk-example-label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-hint);
}

.bulk-example-line code
{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-all;
  color: var(--text-content);
}

.bulk-example-line mark
{
  padding: 1px 3px;
  border-radius: 4px;
  font-weight: 600;
}

.bulk-example-line.is-before mark
{
  background: var(--status-danger-bg);
  color: var(--status-danger);
  text-decoration: line-through;
}

.bulk-example-line.is-after mark
{
  background: var(--status-success-bg);
  color: var(--status-success);
}

.bulk-preview-note
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--status-warning);
}

.bulk-preview-note svg
{
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  fill: currentColor;
}

@media (max-width: 575px)
{
  .bulk-pair
  {
    grid-template-columns: 1fr;
  }

  .bulk-pair-arrow
  {
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .bulk-stats
  {
    gap: 6px;
  }

  .bulk-stat
  {
    padding: 10px;
  }

  .bulk-stat-value
  {
    font-size: 18px;
  }
}

/* ==========================================================================
   Окно «Настройки трекера» — выбор домена по умолчанию карточками
   ========================================================================== */

.settings-modal .waf-form-step svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.settings-domain-search
{
  margin-bottom: 10px;
}

.settings-domains
{
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: -2px;
  padding: 2px;
}

.settings-domain[hidden]
{
  display: none;
}

/* Круглый переключатель вместо квадратной галочки */
.settings-domain .settings-domain-radio
{
  border-radius: 50%;
}

.settings-domain input:checked ~ .settings-domain-radio
{
  background: transparent;
  border: 6px solid var(--calendar-selection-bg);
}

.settings-domain .bulk-scope-title
{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-domain-badge
{
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--select-active-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
}

.settings-domain-badge.is-system
{
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
  color: var(--status-success);
}

/* В списке доменов невыбранные карточки не приглушаем — это выбор одного из многих */
.settings-domain:not(:has(input:checked)) .bulk-scope-icon
{
  opacity: 1;
  filter: none;
}

/* У варианта «Не выбран» иконка всегда приглушённая */
.settings-domain:has(input[value=""]) .bulk-scope-icon
{
  opacity: .6;
  filter: grayscale(1);
}

.settings-modal .app-modal-foot a.button
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.settings-modal .app-modal-foot a.button svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ==========================================================================
   Раздел «Домены» (pages/domains.php, templates/domain-card.php)
   ========================================================================== */

.domains-connect
{
  padding: 24px;
}

.domains-connect-head
{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.domains-connect-title
{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.domains-connect-text
{
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.domains-connect-form
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-top: 18px;
}

.domains-connect-form .button
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  padding: 2px 22px;
}

.domains-connect-form .button svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.domains-connect-form .button:disabled
{
  opacity: .5;
  cursor: not-allowed;
}

.domains-connect-hint
{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-hint);
}

.domains-connect-hint.is-warning
{
  color: var(--status-warning);
}

.domains-connect-hint[hidden]
{
  display: none;
}

.domains-steps
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.domains-step
{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
}

.domains-step-num
{
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--select-active-bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
}

.domains-step-title
{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.domains-step-text
{
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Список доменов */
.domains-list-head
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.domains-list-head .main-content-title
{
  display: flex;
  align-items: center;
  gap: 10px;
}

.domains-search
{
  width: 280px;
  margin: 0;
}

.domains-search[hidden]
{
  display: none;
}

.domains-list
{
  display: grid;
  gap: 12px;
}

.domains-list:not(:has(.domain-card))
{
  display: none;
}

.domains-empty
{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px;
  text-align: center;
}

.domains-empty[hidden],
.domain-card[hidden]
{
  display: none;
}

.domain-card
{
  padding: 16px 18px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background-color: var(--control-bg);
}

.domain-card.is-flash
{
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.domain-card.is-checking
{
  opacity: .6;
}

.domain-card.is-checking [data-action="domain:update"] svg
{
  animation: domain-spin .8s linear infinite;
}

@keyframes domain-spin
{
  to { transform: rotate(360deg); }
}

.domain-card-main
{
  display: flex;
  align-items: center;
  gap: 14px;
}

.domain-card-icon
{
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--select-active-bg);
}

.domain-card-icon svg
{
  width: 18px;
  height: 18px;
  fill: var(--accent-primary);
}

.domain-card.is-active .domain-card-icon
{
  background: var(--status-success-bg);
}

.domain-card.is-active .domain-card-icon svg
{
  fill: var(--status-success);
}

.domain-card.is-deleted .domain-card-icon,
.domain-card.is-error .domain-card-icon
{
  background: var(--status-danger-bg);
}

.domain-card.is-deleted .domain-card-icon svg,
.domain-card.is-error .domain-card-icon svg
{
  fill: var(--status-danger);
}

.domain-card-names
{
  flex: 1;
  min-width: 0;
}

.domain-card-name
{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.domain-card-domain
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.domain-card-meta
{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.domain-status
{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--status-info-bg);
  color: var(--status-info);
}

.domain-status i
{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.domain-status.is-pending i
{
  animation: domain-pulse 1.6s ease-in-out infinite;
}

@keyframes domain-pulse
{
  50% { opacity: .3; }
}

.domain-status.is-active
{
  background: var(--status-success-bg);
  color: var(--status-success);
}

.domain-status.is-moved
{
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.domain-status.is-deleted,
.domain-status.is-error
{
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.domain-status.is-disabled
{
  background: var(--surface-muted);
  color: var(--text-muted);
}

.domain-card-actions
{
  display: flex;
  gap: 6px;
  flex: none;
}

/* NS-серверы для домена, который ещё не активен */
.domain-card-ns
{
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border-control);
  border-radius: 12px;
}

.domain-card-ns-title
{
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.domain-card-ns-row
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--input-bg);
}

.domain-card-ns-row + .domain-card-ns-row
{
  margin-top: 6px;
}

.domain-card-ns-label
{
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-hint);
}

.domain-card-ns-row code
{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.domain-copy
{
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface-muted);
  cursor: pointer;
}

.domain-copy svg
{
  width: 14px;
  height: 14px;
  fill: var(--text-secondary);
}

.domain-copy:hover
{
  background: var(--select-active-bg);
}

.domain-copy:hover svg
{
  fill: var(--accent-primary);
}

.domain-copy.is-copied
{
  background: var(--status-success-bg);
}

.domain-copy.is-copied svg
{
  fill: var(--status-success);
}

.domain-card-ns-empty,
.domain-card-ns-hint
{
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.domain-card-ns-hint
{
  margin-top: 10px;
}

.domain-card-note
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.domain-card-note svg
{
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  fill: currentColor;
}

.domain-card-note.is-warning
{
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.domain-card-note.is-danger
{
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

@media (max-width: 991.98px)
{
  .domains-steps
  {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px)
{
  .domains-connect
  {
    padding: 18px;
  }

  .domains-connect-form
  {
    grid-template-columns: 1fr;
  }

  .domains-list-head
  {
    flex-direction: column;
    align-items: stretch;
  }

  .domains-search
  {
    width: 100%;
  }

  .domain-card
  {
    padding: 14px;
  }

  .domain-card-main
  {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .domain-card-names
  {
    flex-basis: calc(100% - 54px);
  }

  .domain-status
  {
    order: 3;
  }

  .domain-card-actions
  {
    order: 4;
    margin-left: auto;
  }
}

/* ==========================================================================
   Боковое меню — «С описанием»
   Пункт: иконка в плитке, название и короткое пояснение.
   Текущая страница — карточка с рамкой и градиентной иконкой.
   .active ставит app.js: ссылке текущей страницы и раскрытому разделу.
   ========================================================================== */

.main-panel .main-menu
{
  padding: 2px 14px 40px 14px;
}

.main-menu-group
{
  margin: 18px 12px 8px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-hint);
}

.main-menu-actions + .main-menu-group,
.main-menu > .main-menu-group:first-child
{
  margin-top: 6px;
}

.main-menu-divider
{
  height: 1px;
  margin: 14px 10px;
  background-color: var(--border-default);
}

.main-menu-list
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.main-menu .main-menu-item
{
  margin: 0;
}

.main-menu .main-menu-link
{
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text-primary);
  overflow: visible;
  user-select: none;
}

.main-menu .main-menu-link:before
{
  display: none;
}

.main-menu .main-menu-link:hover
{
  background-color: var(--surface-highlight);
}

.main-menu .main-menu-link:focus-visible
{
  outline: none;
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.main-menu .main-menu-icon
{
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background-color: var(--surface-muted);
}

/* В светлой теме плитки иконок — цвета фона страницы, без резкого контраста */
:root[data-theme="light"] .main-menu .main-menu-icon
{
  background-color: var(--surface-page);
}

.main-menu .main-menu-icon svg
{
  width: 17px;
  height: 17px;
  fill: var(--icon-muted);
}

.main-menu .main-menu-link:hover .main-menu-icon svg
{
  fill: var(--text-primary);
}

.main-menu .main-menu-text
{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.main-menu-title
{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-menu-desc
{
  margin-top: 1px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-menu-chevron
{
  display: flex;
  flex: none;
}

.main-menu-chevron svg
{
  width: 12px;
  height: 12px;
  fill: var(--text-hint);
}

/* Текущая страница */
.main-menu a.main-menu-link.active
{
  background-color: var(--control-bg);
  border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* Раздел, в котором открыта страница подменю: весь блок (раздел + подменю)
   в такой же карточке, как текущая страница. Рамка — inset-тенью, чтобы пункты не сдвигались */
.main-menu .main-menu-item:has(.main-menu-sub-link.active)
{
  border-radius: 13px;
  background-color: var(--control-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent), 0 6px 18px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* Иконка текущей страницы и раздела, в котором открыта страница подменю:
   мягкая голубая плитка и синяя иконка */
.main-menu a.main-menu-link.active .main-menu-icon,
:root[data-theme="light"] .main-menu a.main-menu-link.active .main-menu-icon,
.main-menu-item:has(.main-menu-sub-link.active) > .main-menu-link .main-menu-icon,
:root[data-theme="light"] .main-menu-item:has(.main-menu-sub-link.active) > .main-menu-link .main-menu-icon
{
  background-color: var(--select-active-bg);
}

.main-menu a.main-menu-link.active .main-menu-icon svg,
.main-menu-item:has(.main-menu-sub-link.active) > .main-menu-link .main-menu-icon svg
{
  fill: var(--accent-primary);
}

.main-menu [data-toggle-menu].active .main-menu-chevron svg
{
  transform: rotate(180deg);
}

/* Подменю: пунктирная ветка от иконки раздела */
.main-menu .main-menu-sub
{
  margin: 2px 0 6px 30px;
  padding: 2px 0;
  border: none;
  border-left: 1px dashed var(--border-control);
}

.main-menu .main-menu-sub-link
{
  padding: 7px 10px 7px 30px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-muted);
}

.main-menu .main-menu-sub-link:before
{
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  height: auto;
  border-radius: 2px;
  background: transparent;
  transform: none;
}

.main-menu .main-menu-sub-link:hover
{
  background-color: var(--surface-highlight);
  color: var(--text-primary);
}

.main-menu .main-menu-sub-link:hover:before
{
  background: var(--border-control);
}

.main-menu .main-menu-sub-link.active
{
  color: var(--accent-primary);
  font-weight: 600;
}

.main-menu .main-menu-sub-link.active:before
{
  background: var(--accent-primary);
}

/* Подвал меню */
.main-panel .main-panel-footer
{
  gap: 18px;
  padding: 16px 18px 20px 18px;
}

/* Карточка тарифа: «Волна». Цвета волны задаёт класс тарифа,
   по умолчанию (Light) — градиент кнопок. */
.sb-plan
{
  --w1: var(--plan-light);
  --w2: var(--button-primary-gradient-end);
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 16px 60px 16px;
  border-radius: 16px;
  background-color: var(--surface-inset);
  border: 1px solid var(--border-default);
  text-decoration: none;
}

.sb-plan.is-optimal { --w1: var(--plan-optimal); --w2: #22B8CF; }
.sb-plan.is-premium { --w1: var(--plan-premium); --w2: #E76FD1; }
.sb-plan.is-corporate { --w1: var(--plan-corporate); --w2: #F29B4B; }
.sb-plan.is-trial { --w1: var(--plan-trial); --w2: #818CF8; }
.sb-plan.is-none { --w1: #6B7385; --w2: #9AA3B5; }

.sb-plan:hover
{
  border-color: color-mix(in srgb, var(--w1) 40%, var(--border-default));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--w1) 16%, transparent);
}

.sb-plan-top
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sb-plan-name
{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.sb-plan-name svg
{
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--w1);
}

.sb-plan-go
{
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--control-bg);
  border: 1px solid var(--border-control);
}

.sb-plan-go svg
{
  width: 12px;
  height: 12px;
  fill: var(--text-primary);
}

.sb-plan:hover .sb-plan-go
{
  background: linear-gradient(135deg, var(--w1), var(--w2));
  border-color: transparent;
}

.sb-plan:hover .sb-plan-go svg
{
  fill: #fff;
  transform: translateX(1px);
}

.sb-plan-left
{
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.sb-plan-left b
{
  font-weight: 700;
  color: var(--text-primary);
}

.sb-plan-wave
{
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.sb-plan-wave stop:first-child { stop-color: var(--w1); }
.sb-plan-wave stop:last-child { stop-color: var(--w2); }

.sb-plan-wave path
{
  fill: url(#sbPlanWave);
}

.sb-plan-wave-back
{
  opacity: .35;
}

.sb-plan-action
{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Серверное время в часовом поясе пользователя: две колонки под тарифом */
.sb-clock
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  row-gap: 4px;
  column-gap: 8px;
  padding: 14px 2px 0 2px;
  border-top: 1px dashed var(--border-default);
  text-decoration: none;
}

.sb-clock-main,
.sb-clock-side
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sb-clock-side
{
  align-items: flex-end;
  gap: 5px;
}

.sb-clock-label
{
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-hint);
}

.sb-clock-time
{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.sb-clock:hover .sb-clock-time
{
  color: var(--accent-primary);
}

.sb-clock-sec
{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hint);
}

.sb-clock-offset
{
  padding: 3px 8px;
  border-radius: 20px;
  background-color: var(--select-active-bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent-primary);
}

.sb-clock-date
{
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}

.sb-clock-zone
{
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1260px)
{
  .main-panel .main-menu
  {
    padding: 0 12px 24px 12px;
  }

  .main-menu .main-menu-link
  {
    padding: 7px 10px;
    font-size: inherit;
  }

  .main-menu-title
  {
    font-size: 15px;
  }

  .main-menu-desc
  {
    font-size: 12px;
  }

  .main-menu .main-menu-sub-link
  {
    padding-left: 30px;
    font-size: 14.5px;
  }

  .main-menu .main-menu-sub-link:before
  {
    left: -1px;
  }

  .main-panel .main-panel-footer
  {
    padding: 16px 14px 20px 14px;
  }
}
/* # Боковое меню */

/* ==========================================================================
   Шапка: уведомления и меню профиля (баланс, язык, тема, выход)
   ========================================================================== */

.user-menu-button
{
  gap: 12px;
  padding: 6px 14px 6px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.user-avatar
{
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button-primary-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.user-avatar.is-large
{
  width: 40px;
  height: 40px;
  font-size: 13.5px;
}

.user-menu-button[aria-expanded="true"]
{
  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.user-menu-button[aria-expanded="true"] .toggle-arrow svg
{
  transform: rotate(180deg);
}

.dropdown-menu.user-menu-list
{
  width: 290px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  margin-top: 8px !important;
  border-radius: 16px;
  box-shadow: 0 18px 40px var(--shadow-dropdown);
}

.user-menu-head
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px 8px;
}

.user-menu-names
{
  min-width: 0;
}

.user-menu-name
{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Скопировать ID — значок рядом с ID в меню профиля */
.user-menu-copy
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background-color: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.user-menu-copy svg
{
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.user-menu-copy:hover
{
  background-color: var(--surface-muted);
  color: var(--accent-primary);
}

.user-menu-copy.is-copied
{
  color: var(--status-success);
}

.user-menu-email
{
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-balance
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 6px 2px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background-color: var(--surface-muted);
}

.user-menu-balance-label
{
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--text-muted);
}

.user-menu-balance-value
{
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.user-menu-topup
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--button-primary-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.user-menu-topup:hover
{
  background: var(--button-primary-hover-gradient);
  color: #fff;
}

.user-menu-topup svg
{
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.user-menu-row
{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 6px 10px 6px 6px;
  box-sizing: border-box;
  appearance: none;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-row:hover,
.user-menu-row:focus-visible
{
  outline: none;
  background-color: var(--surface-highlight);
  color: var(--text-primary);
}

/* Иконки пунктов — в одинаковых плитках, чтобы стояли ровно в столбик
   независимо от формы самого значка */
.user-menu-row > svg
{
  width: 32px;
  height: 32px;
  flex: none;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 9px;
  background-color: var(--surface-muted);
  fill: var(--icon-muted);
}

.user-menu-row:hover > svg
{
  background-color: var(--select-active-bg);
  fill: var(--accent-primary);
}

.user-menu-text
{
  flex: 1;
  min-width: 0;
}

.user-menu-value
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.user-menu-value img
{
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.user-menu-chevron
{
  width: 11px;
  height: 11px;
  fill: var(--text-hint);
}

/* Переключатель темы: включён, когда активна тёмная тема */
.user-menu-switch
{
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
  border-radius: 99px;
  background-color: var(--surface-muted);
}

.user-menu-switch i
{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

:root[data-theme="dark"] .user-menu-switch
{
  background: var(--button-primary-gradient);
}

:root[data-theme="dark"] .user-menu-switch i
{
  left: 18px;
}

.user-menu-sep
{
  height: 1px;
  margin: 6px 4px;
  background-color: var(--border-default);
}

.user-menu-row.is-danger,
.user-menu-row.is-danger:hover
{
  color: var(--status-danger);
}

.user-menu-row.is-danger > svg,
.user-menu-row.is-danger:hover > svg
{
  background-color: color-mix(in srgb, var(--status-danger) 10%, transparent);
  fill: var(--status-danger);
}

@media (max-width: 1260px)
{
  .user-menu-button
  {
    width: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
  }

  .user-avatar
  {
    width: 32px;
    height: 32px;
  }
}
/* Плитки и блок баланса — того же цвета, что плитки иконок в боковом меню:
   в тёмной теме --surface-muted, в светлой — фон страницы */
:root[data-theme="light"] .user-menu-balance,
:root[data-theme="light"] .user-menu-row > svg
{
  background-color: var(--surface-page);
}

:root[data-theme="light"] .user-menu-row:hover > svg
{
  background-color: var(--select-active-bg);
}

:root[data-theme="light"] .user-menu-row.is-danger > svg
{
  background-color: color-mix(in srgb, var(--status-danger) 10%, transparent);
}

a.action-notif
{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Поддержка: кнопка в шапке и окно с контактом менеджера */
.support-button
{
  border: 1px solid var(--border-default);
  font-family: inherit;
  cursor: pointer;
}

.support-button svg
{
  width: 20px;
  height: 20px;
  fill: var(--icon-muted);
}

.support-button:hover svg
{
  fill: var(--accent-primary);
}

.modal-dialog:has(.support-modal)
{
  max-width: 480px;
}

.support-modal .app-modal-title
{
  font-weight: 700;
}

/* Крестик не сужает подзаголовок: он стоит в углу, на уровне заголовка */
.support-modal .app-modal-head
{
  position: relative;
}

.support-modal .app-modal-title
{
  padding-right: 52px;
}

.support-modal .app-modal-round
{
  position: absolute;
  top: -6px;
  right: 0;
}

.support-manager
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background-color: var(--surface-muted);
}

:root[data-theme="light"] .support-manager
{
  background-color: var(--surface-page);
}

.support-manager-icon
{
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #64ACE9, #4D8FD6);
}

.support-manager-icon svg
{
  width: 22px;
  height: 22px;
  fill: #fff;
}

.support-manager-names
{
  flex: 1;
  min-width: 0;
}

.support-manager-title
{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.support-manager-text
{
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.support-manager-button
{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 11px;
  background-color: #5FA9E8;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.support-manager-button:hover
{
  background-color: #4D97D9;
  color: #fff;
}

.support-manager-button svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.support-topics-title
{
  margin: 20px 0 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-hint);
}

.support-topics
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-topics li
{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-content);
}

.support-topics svg
{
  width: 18px;
  height: 18px;
  flex: none;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--status-success) 16%, transparent);
  fill: var(--status-success);
}

.support-id
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 12px 12px 14px;
  border: 1px dashed var(--border-control);
  border-radius: 14px;
}

.support-id-label
{
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.support-id-value
{
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-primary);
}

.support-id-copy
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-control);
  border-radius: 10px;
  background-color: var(--control-bg);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.support-id-copy svg
{
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.support-id-copy:hover
{
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  color: var(--accent-primary);
}

.support-id-copy.is-copied
{
  border-color: color-mix(in srgb, var(--status-success) 45%, transparent);
  color: var(--status-success);
}

@media (max-width: 575px)
{
  .support-manager
  {
    flex-wrap: wrap;
  }

  .support-manager-button
  {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1260px)
{
  .support-button
  {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
}

/* # Шапка */

/* ==========================================================================
   Баланс (/deposit): карточка баланса, окно пополнения, история
   ========================================================================== */

.balance-hero
{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.balance-hero-icon
{
  width: 52px;
  height: 52px;
  border-radius: 15px;
}

.balance-hero-icon svg
{
  width: 22px;
  height: 22px;
}

.balance-hero-body
{
  flex: 1;
  min-width: 0;
}

.balance-hero-label
{
  font-size: 13px;
  color: var(--text-muted);
}

.balance-hero-value
{
  margin-top: 2px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.balance-hero-hint
{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-hint);
}

.balance-hero-button
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.balance-hero-button svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Незавершённые пополнения под карточкой */
.balance-open
{
  margin-top: 16px;
}

.balance-open[hidden]
{
  display: none;
}

.balance-open-title
{
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.balance-open-list
{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.balance-open-item
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background-color: var(--control-bg);
}

.balance-open-amount
{
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.balance-open-method
{
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.balance-open-button
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.balance-open-button svg
{
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Окно пополнения */
.modal-dialog:has(.balance-modal)
{
  max-width: 540px;
}

.balance-step[hidden]
{
  display: none;
}

.balance-step
{
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.balance-amount
{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--border-control);
  background-color: var(--input-bg);
}

.balance-amount:focus-within
{
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-default));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.balance-amount-currency
{
  font-size: 24px;
  font-weight: 600;
  color: var(--text-hint);
}

.balance-amount-input
{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.balance-amount-code
{
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hint);
}

.balance-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.balance-chip
{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background-color: var(--surface-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

:root[data-theme="light"] .balance-chip
{
  background-color: var(--surface-page);
}

.balance-chip:hover
{
  border-color: var(--border-interactive-hover);
}

.balance-chip.active
{
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  background-color: var(--select-active-bg);
  color: var(--accent-primary);
}

.balance-hint
{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-hint);
}

.balance-label-gap
{
  margin-top: 20px;
}

.balance-methods
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.balance-method
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background-color: var(--control-bg);
  cursor: pointer;
}

.balance-method input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.balance-method:hover
{
  border-color: var(--border-interactive-hover);
}

.balance-method:has(input:checked)
{
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  background-color: var(--select-active-bg);
}

.balance-method:has(input:focus-visible)
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.balance-method-icon
{
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: var(--surface-muted);
}

:root[data-theme="light"] .balance-method-icon
{
  background-color: var(--surface-page);
}

/* Логотипы платёжных систем (официальные знаки, img/payicon) */
.balance-logo
{
  display: block;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat;
}

/* Знак Cryptomus одноцветный — цвет текста темы */
.balance-logo.is-cryptomus
{
  -webkit-mask: url("../img/payicon/cryptomus.svg") center / contain no-repeat;
  mask: url("../img/payicon/cryptomus.svg") center / contain no-repeat;
  background-color: var(--text-primary);
}

.balance-logo.is-oxapay
{
  background-image: url("../img/payicon/oxapay.svg");
}

.balance-logo.is-trybit
{
  background-image: url("../img/payicon/trybit.svg");
}

.balance-method-names
{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.balance-method-title
{
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.balance-method-desc
{
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.balance-summary
{
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background-color: var(--surface-muted);
}

:root[data-theme="light"] .balance-summary
{
  background-color: var(--surface-page);
}

.balance-summary-row
{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.balance-summary-row[hidden]
{
  display: none;
}

.balance-summary-row b
{
  color: var(--text-primary);
}

.balance-summary-row.is-total
{
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-control);
  font-size: 14px;
}

.balance-summary-note
{
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-hint);
}

.balance-submit
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  text-decoration: none;
}

.balance-submit svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.balance-note
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: var(--surface-muted);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-content);
}

:root[data-theme="light"] .balance-note
{
  background-color: var(--surface-page);
}

.balance-note svg
{
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  fill: currentColor;
}

.balance-note.is-warning
{
  background-color: var(--status-warning-bg);
  color: var(--status-warning);
}

.balance-note.is-info
{
  background-color: var(--status-info-bg);
  color: var(--accent-primary);
}

/* Шаг оплаты */
.balance-pay-head
{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.balance-pay-amount
{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.balance-pay-order
{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.balance-pay-method
{
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.balance-pay-head > .status
{
  flex: none;
  white-space: nowrap;
}

.balance-pay-foot
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-control);
  font-size: 12.5px;
  color: var(--text-muted);
}

.balance-live
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-primary);
}

.balance-live i
{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.balance-countdown
{
  font-variant-numeric: tabular-nums;
}

.balance-countdown.is-expired
{
  flex-basis: 100%;
  color: var(--status-warning);
}

/* Итог платежа */
.balance-result
{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 4px;
  text-align: center;
}

.balance-result-icon
{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background-color: var(--surface-muted);
}

.balance-result-icon svg
{
  width: 26px;
  height: 26px;
  fill: var(--text-muted);
}

.balance-result.is-success .balance-result-icon
{
  background-color: var(--status-success-bg);
}

.balance-result.is-success .balance-result-icon svg
{
  fill: var(--status-success);
}

.balance-result.is-danger .balance-result-icon
{
  background-color: var(--status-danger-bg);
}

.balance-result.is-danger .balance-result-icon svg
{
  fill: var(--status-danger);
}

.balance-result.is-warning .balance-result-icon
{
  background-color: var(--status-warning-bg);
}

.balance-result.is-warning .balance-result-icon svg
{
  fill: var(--status-warning);
}

.balance-result-title
{
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.balance-result-text
{
  max-width: 380px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.balance-result-order
{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-hint);
}

/* Подробности операции */
.balance-details
{
  display: flex;
  flex-direction: column;
}

.balance-details-row
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-default);
  font-size: 13.5px;
  color: var(--text-muted);
}

.balance-details-row:last-of-type
{
  border-bottom: 0;
}

.balance-details-row > span:last-child
{
  min-width: 0;
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere; /* длинный номер операции переносится, текст — по словам */
  color: var(--text-primary);
}

.balance-details-row code
{
  font-size: 12px;
  color: var(--text-primary);
}

/* Ячейки истории */
.balance-method-cell
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.balance-method-cell-icon
{
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-method-cell-icon .balance-logo
{
  width: 18px;
  height: 18px;
}

.balance-op-title
{
  font-weight: 600;
  color: var(--text-primary);
}

.balance-op-ref
{
  font-size: 12px;
  color: var(--text-hint);
}

.balance-amount-cell
{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}

.balance-amount-cell.is-credit
{
  color: var(--status-success);
}

@media (max-width: 767px)
{
  .balance-hero
  {
    flex-wrap: wrap;
    padding: 18px;
  }

  .balance-hero-button
  {
    width: 100%;
    justify-content: center;
  }

  .balance-hero-value
  {
    font-size: 26px;
  }

  .balance-open-item
  {
    flex-wrap: wrap;
  }

  .balance-open-button
  {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px)
{
  .balance-methods
  {
    grid-template-columns: 1fr;
  }
}
/* # Баланс */

/* Рефералы (pages/referrals.php): карточка дохода и ссылки, статистика, «История выводов»,
   окна «Как начисляется доход» и «Вывод средств» */

.ref-card
{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.ref-card-wallet
{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 75%);
}

.ref-card-row
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ref-card-row .balance-hero-button
{
  white-space: nowrap;
}

.ref-card-stats
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ref-card-stats > div
{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: var(--surface-muted);
}

/* Светлая тема: плитки сумм светлее подложки карточки */
:root[data-theme="light"] .ref-card-stats > div
{
  background-color: var(--surface-inset);
}

.ref-card-stats span
{
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ref-card-stats b
{
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.ref-card-invite
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border-left: 1px solid var(--border-default);
}

.ref-card-head,
.ref-card-foot
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ref-card-head > b
{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.ref-card-foot
{
  font-size: 13px;
  color: var(--text-muted);
}

.ref-card-foot b
{
  color: var(--text-primary);
}

.ref-rate
{
  display: inline-block;
  padding: 0 20px;
  line-height: 26px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--accent-primary);
  background-color: var(--select-active-bg);
}

.ref-icon-link
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ref-icon-link svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Статистика: блок как «Статистика переходов» (ts-chart), период — общий блок .tsp */
.ref-stats
{
  margin: 0;
}

.ref-stats .box-header
{
  flex-wrap: wrap;
}

/* Загрузка тускнит карточки и график, но не шапку: период можно сменить сразу */
.ts-chart.ref-stats.loading > .box-header
{
  opacity: 1;
  pointer-events: auto;
}

.ref-stats-tools
{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
}

/* Промо-материалы (вариант A «Строка с кнопкой») */
.ref-promo
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--surface-muted);
}

:root[data-theme="light"] .ref-promo
{
  background-color: var(--surface-inset);
}

.ref-promo-icon
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--accent-primary);
  background-color: var(--select-active-bg);
}

.ref-promo-icon svg,
.ref-promo-button svg
{
  fill: currentColor;
}

.ref-promo-text
{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ref-promo-text b
{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ref-promo-text span
{
  font-size: 12px;
  color: var(--text-muted);
}

.ref-promo-button
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Вкладки «Мои рефералы» и «История выводов»: справа — поиск или фильтр открытой */
.ref-tabs-line
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.ref-tabs-line .tabs-header
{
  margin-bottom: 0;
}

.ref-tab-tool
{
  min-width: 200px;
}

.ref-count
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-muted);
  background-color: var(--surface-muted);
}

.ref-user
{
  font-weight: 600;
  color: var(--text-primary);
}

.ref-muted
{
  color: var(--text-hint);
}

/* «История выводов» */
.ref-to
{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Значок в квадрате: «Куда» в истории, правила в окне «Как начисляется доход» */
.ref-icon
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--accent-primary);
  background-color: var(--surface-muted);
}

.ref-icon svg
{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ref-to-name
{
  white-space: nowrap;
  color: var(--text-primary);
}

.ref-to-address
{
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.ref-cell-note
{
  display: block;
  max-width: 220px;
  margin-top: 4px;
  font-size: 12px;
  white-space: normal;
  color: var(--text-muted);
}

.ref-cell-note a
{
  color: var(--accent-primary);
}

/* Окно «Как начисляется доход» */
.ref-how
{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ref-rules
{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-rule
{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ref-rule b
{
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ref-rule p
{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ref-example
{
  padding: 16px;
  border-radius: 14px;
  background-color: var(--surface-muted);
}

.ref-example-title
{
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ref-timeline
{
  display: flex;
  gap: 3px;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background-color: var(--progress-track);
}

.ref-timeline i
{
  display: block;
  width: 50%;
  height: 100%;
}

.ref-timeline .is-open
{
  background-color: var(--accent-primary);
}

.ref-timeline .is-pending
{
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 45%, transparent) 0 5px, color-mix(in srgb, var(--accent-primary) 16%, transparent) 5px 10px);
}

.ref-timeline-marks
{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.ref-timeline-marks span
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-timeline-marks span:nth-child(2)
{
  text-align: center;
}

.ref-timeline-marks span:last-child
{
  text-align: right;
}

.ref-timeline-marks b
{
  font-weight: 600;
  color: var(--text-primary);
}

.ref-method-icon svg
{
  fill: var(--accent-primary);
}

/* Окно вывода: выключенные сети USDT — «Скоро» */
.balance-method.ref-soon
{
  opacity: 0.55;
  cursor: default;
}

.balance-method.ref-soon:hover
{
  border-color: var(--border-default);
}

.ref-soon .balance-method-names
{
  padding-right: 40px;
}

.ref-soon-tag
{
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--surface-muted);
}

.balance-amount.is-error
{
  border-color: var(--status-danger);
}

.balance-chip:disabled,
.balance-chip:disabled:hover
{
  border-color: var(--border-default);
  opacity: 0.45;
  cursor: default;
}

.ref-wallet-list
{
  display: grid;
  gap: 8px;
}

.ref-wallet-address
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ref-wallet-list .balance-method-names
{
  min-width: 0;
}

.ref-no-wallet
{
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.ref-no-wallet a
{
  font-weight: 600;
  color: var(--accent-primary);
}

.ref-confirm-text
{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ref-confirm-summary
{
  margin-top: 0;
}

.ref-confirm-summary .balance-summary-row b
{
  min-width: 0;
}

.ref-code-input
{
  letter-spacing: 0.3em;
}

.ref-confirm-links
{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.ref-link-button
{
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  cursor: pointer;
}

.ref-link-button:disabled
{
  color: var(--text-hint);
  cursor: default;
}

@media (max-width: 1199px)
{
  .ref-card
  {
    grid-template-columns: 1fr;
  }

  .ref-card-invite
  {
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }
}

/* Планшет и телефон: вкладки на всю ширину пополам, поиск или фильтр — под ними */
@media (max-width: 991px)
{
  .ref-tabs-line .tabs-header,
  .ref-tab-tool
  {
    width: 100%;
    max-width: none;
  }

  /* Две вкладки помещаются: без общей прокрутки вкладок вбок */
  .ref-tabs-line .tabs-header
  {
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }

  .ref-tabs-line .tabs-header-inner
  {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-sizing: border-box;
    width: 100%;
  }

  .ref-tabs-line .tabs-header-button
  {
    padding-right: 8px;
    padding-left: 8px;
    text-align: center;
  }
}

@media (max-width: 767px)
{
  .ref-card-wallet,
  .ref-card-invite
  {
    padding: 20px 16px;
  }

  .ref-card-row
  {
    flex-direction: column;
    align-items: stretch;
  }

  .ref-card-row .balance-hero-button
  {
    width: 100%;
    justify-content: center;
  }

  .ref-card-stats
  {
    gap: 8px;
  }

  .ref-card-stats > div
  {
    padding: 10px;
  }

  .ref-card-stats span
  {
    white-space: normal;
  }

  .ref-stats-tools
  {
    justify-content: flex-start;
    width: 100%;
  }

  .ref-timeline-marks
  {
    font-size: 11px;
  }
}
/* # Рефералы */

/* ==========================================================================
   «Клоакинг → Личные фильтры» (personal-filters.php, exec-personal-filters.js):
   карточки списков, вкладки «Все · Чёрные · Белые» с поиском, окно-редактор
   ========================================================================== */

.pf-intro
{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
}

.pf-intro-title
{
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.pf-intro-text
{
  max-width: 760px;
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.pf-row
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pf-row[hidden]
{
  display: none;
}

.pf-title
{
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-create
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
}

.pf-create svg
{
  fill: currentColor;
}

.pf-tools .tabs-header-button
{
  border: 0;
  font-family: inherit;
  background-color: transparent;
}

.pf-tools .tabs-header-button.current
{
  background-color: var(--tab-button-bg);
}

.pf-search
{
  min-width: 240px;
}

.pf-list
{
  display: grid;
  gap: 12px;
}

.pf-card
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background-color: var(--control-bg);
}

.pf-card[hidden]
{
  display: none;
}

.pf-icon
{
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.pf-icon svg,
.pf-typecard-icon svg
{
  fill: currentColor;
}

.pf-card.is-black .pf-icon,
.pf-typecard.is-black .pf-typecard-icon
{
  color: var(--status-danger);
  background-color: var(--status-danger-bg);
}

.pf-card.is-white .pf-icon,
.pf-typecard.is-white .pf-typecard-icon
{
  color: var(--status-success);
  background-color: var(--status-success-bg);
}

.pf-names
{
  flex: 0 1 260px;
  min-width: 0;
}

.pf-name
{
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.pf-meta
{
  font-size: 13px;
  color: var(--text-secondary);
}

.pf-chips
{
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.pf-chip
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  color: var(--text-secondary);
  background-color: var(--surface-muted);
}

.pf-chip b
{
  font-weight: 600;
  color: var(--text-primary);
}

.pf-chip.is-zero
{
  opacity: .5;
}

.pf-type
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pf-type i
{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.pf-type.is-black
{
  color: var(--status-danger);
  background-color: var(--status-danger-bg);
}

.pf-type.is-white
{
  color: var(--status-success);
  background-color: var(--status-success-bg);
}

.pf-menu
{
  flex: none;
}

.pf-empty
{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px;
  text-align: center;
}

.pf-empty[hidden]
{
  display: none;
}

.pf-empty .pf-create
{
  margin-top: 18px;
}

/* Окно-редактор: шире обычного окна, содержимое прокручивается, шапка и кнопки — на месте */
.modal-dialog:has(.pf-editor)
{
  max-width: 600px;
}

.pf-editor-body
{
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px 4px;
  overflow-y: auto;
}

.pf-field + .pf-field
{
  margin-top: 16px;
}

.pf-label
{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.pf-types
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pf-typecard
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background-color: var(--input-bg);
  cursor: pointer;
}

.pf-typecard input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pf-typecard:has(input:focus-visible)
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.pf-typecard.is-black:has(input:checked)
{
  border-color: var(--status-danger);
  background-color: color-mix(in srgb, var(--status-danger) 7%, var(--input-bg));
}

.pf-typecard.is-white:has(input:checked)
{
  border-color: var(--status-success);
  background-color: color-mix(in srgb, var(--status-success) 7%, var(--input-bg));
}

.pf-typecard-icon
{
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.pf-typecard-text b
{
  display: block;
  font-size: 14px;
  color: var(--text-primary);
}

.pf-typecard-text small
{
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

.pf-tabs
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 18px 0 12px;
  padding: 4px;
  border-radius: 12px;
  background-color: var(--surface-muted);
}

.pf-tab
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-secondary);
  background: none;
  cursor: pointer;
}

.pf-tab.active
{
  color: var(--text-primary);
  background-color: var(--control-bg);
}

.pf-tab-n
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--accent-primary);
  background-color: var(--select-active-bg);
}

.pf-tab-n.is-zero
{
  color: var(--text-secondary);
  background: none;
}

.pf-panel[hidden]
{
  display: none;
}

/* Номер строки — той же высоты, что строка поля: подсветка ошибки не уезжает на длинных списках */
.pf-editor .linedwrap .codelines .lineno
{
  height: 22.55px;
  padding-top: 0;
  line-height: 22.55px;
}

.pf-hint
{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-hint);
}

@media (max-width: 991px)
{
  .pf-tools .tabs-header,
  .pf-search
  {
    width: 100%;
    max-width: none;
  }

  .pf-tools .tabs-header
  {
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }

  .pf-tools .tabs-header-inner
  {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    box-sizing: border-box;
    width: 100%;
  }

  .pf-tools .tabs-header-button
  {
    padding-right: 8px;
    padding-left: 8px;
  }

  .pf-card
  {
    flex-wrap: wrap;
  }

  .pf-names
  {
    flex: 1;
  }

  .pf-chips
  {
    flex-basis: 100%;
    order: 5;
  }
}

@media (max-width: 575px)
{
  .pf-card
  {
    gap: 10px 12px;
    padding: 14px;
  }

  /* Первая строка — значок, название и меню, ниже — тип и счётчики */
  .pf-names
  {
    flex-basis: calc(100% - 102px);
  }

  .pf-type
  {
    order: 4;
  }

  .pf-types
  {
    grid-template-columns: 1fr;
  }

  .pf-tab
  {
    font-size: 12px;
  }
}
/* # Личные фильтры */

/* Потоки: список (streams.php) и редактор на одной странице со сводкой (streams-edit.php) */
.st-list-tools
{
  display: flex;
  align-items: center;
  gap: 20px;
}

.st-total
{
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.st-total b
{
  font-weight: 600;
  color: var(--text-primary);
}

.st-name
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Название — как текст строки (общее .table-inner tbody td a — синее); длинное — с многоточием, чтобы список помещался в панель */
.table-inner .st-name a
{
  max-width: 180px;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-inner .st-name a:hover
{
  color: var(--accent-primary);
}

.st-name small
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.st-name small svg
{
  fill: currentColor;
}

/* «Поток» в списке: #id серым перед названием */
.st-name-row
{
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.st-name-id
{
  flex: none;
  font-weight: 500;
  color: var(--text-hint);
  font-variant-numeric: tabular-nums;
}

/* «Трафик»: хиты крупно, ниже хосты */
.st-traffic
{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.st-traffic b
{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.st-traffic small
{
  font-size: 12px;
  color: var(--text-hint);
}

/* «Результат»: полоса — зелёная доля на Offer, остальное отфильтровано; ниже подписи */
.st-result
{
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 210px;
}

.st-result-bar
{
  display: flex;
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--status-danger) 55%, transparent);
}

.st-result-bar i
{
  display: block;
  height: 100%;
  background-color: var(--status-success);
}

.st-result.is-empty .st-result-bar
{
  background-color: var(--surface-muted);
}

.st-result-text
{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-hint);
  white-space: nowrap;
}

.st-result-text b
{
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/*
 * До 1390 px панель таблиц не шире 1000 px (.table-container-custom): ячейки плотнее,
 * название потока и полоса «Результата» короче — список потоков помещается вместе с меню строки.
 */
@media (max-width: 1390px)
{
  .table-container .table-inner thead th
  {
    padding-right: 12px;
    padding-left: 12px;
  }

  .table-inner tbody td .table-field
  {
    padding-right: 12px;
    padding-left: 12px;
  }

  .table-inner .st-name a
  {
    max-width: 140px;
  }

  .st-result
  {
    width: 170px;
  }
}

.st-status
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.st-status i
{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.st-status.is-on
{
  color: var(--status-success);
  background: var(--status-success-bg);
}

.st-status.is-off
{
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.st-empty,
.st-not-found
{
  padding: 40px 20px;
}

.st-empty .button,
.st-not-found .button
{
  margin-top: 18px;
}

.st-layout
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.st-main
{
  min-width: 0;
}

.st-nav
{
  position: sticky;
  top: 16px;
  z-index: 3;
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.st-nav a
{
  flex: none;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
}

.st-nav a.active
{
  background: var(--surface-muted);
  color: var(--text-primary);
}

.st-section
{
  scroll-margin-top: 90px;
}

.st-line-text
{
  margin: 6px 0 0;
  max-width: 280px;
  font-size: 13px;
  color: var(--text-muted);
}

.st-field
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.st-field + .st-field
{
  margin-top: 18px;
}

.st-label
{
  font-size: 14px;
  color: var(--text-secondary);
}

.st-label-row
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}

.st-help
{
  font-size: 12px;
  color: var(--text-muted);
}

a.st-help
{
  color: var(--accent-primary);
}

.st-field label.error
{
  margin-top: 0;
}

.st-grid2
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.st-grid2 .st-field + .st-field
{
  margin-top: 0;
}

.st-grid2 + .st-field
{
  margin-top: 18px;
}

.st-toggles
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.st-toggle.input-toggle:not(:last-child)
{
  margin-bottom: 0;
}

.st-toggle span
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-toggle b
{
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.st-toggle small
{
  font-size: 12px;
  color: var(--text-muted);
}

.st-url,
.st-folder
{
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-url .input-control,
.st-folder-select
{
  flex: 1;
  min-width: 0;
}

.st-folder
{
  align-items: stretch;
}

.st-folder .button
{
  flex: none;
  max-height: none;
}

/* Варианты в одну строку (радио-кнопки): способ показа, «Разрешить | Запретить», статус */
.st-seg
{
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-muted);
}

.st-seg label
{
  display: flex;
  margin: 0;
}

.st-seg input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.st-seg span
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.st-seg input:checked + span
{
  background: var(--accent-primary);
  color: #fff;
}

.st-seg input:focus-visible + span
{
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.st-seg.is-ad input[value="allow"]:checked + span
{
  background: var(--status-success);
}

.st-seg.is-ad input[value="deny"]:checked + span
{
  background: var(--status-danger);
}

.st-seg.is-wide
{
  display: flex;
}

.st-seg.is-wide label
{
  flex: 1;
}

.st-seg.is-wide span
{
  flex: 1;
  height: 34px;
}

.st-seg.is-wide input:checked + span
{
  background: var(--control-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.st-seg.is-disabled
{
  opacity: 0.45;
}

.st-seg.is-disabled span
{
  cursor: default;
}

.st-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-chips:empty
{
  display: none;
}

.st-chip
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border-success);
  border-radius: 8px;
  background: var(--status-success-bg);
  font-size: 13px;
  color: var(--text-primary);
}

.st-chips.is-deny .st-chip
{
  border-color: var(--border-danger);
  background: var(--status-danger-bg);
}

.st-chips.is-neutral .st-chip
{
  border-color: var(--border-default);
  background: var(--surface-muted);
}

.st-chip-remove
{
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.st-chip-remove svg
{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.st-chip-remove:hover
{
  color: var(--text-primary);
}

.st-flag
{
  width: 16px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}

.st-dot
{
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.st-dot.is-on,
.st-dot.is-white
{
  background: var(--status-success);
}

.st-dot.is-off
{
  background: var(--status-warning);
}

.st-dot.is-black
{
  background: var(--status-danger);
}

.st-whitelist .linedtextarea textarea
{
  min-height: 150px;
}

/* Сводка «Как работает поток» */
.st-summary
{
  position: sticky;
  top: 16px;
  padding: 22px;
}

.st-summary-title
{
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.st-flow
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.st-flow-row
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-muted);
}

.st-flow-row > span:last-child,
.st-flow-end
{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.st-flow-row b,
.st-flow-end b
{
  font-size: 14px;
  font-weight: 600;
}

.st-flow-row b
{
  color: var(--text-primary);
}

.st-flow-row small,
.st-flow-end small
{
  font-size: 12px;
  color: var(--text-muted);
}

.st-flow-ico
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--status-info-bg);
  color: var(--accent-primary);
}

.st-flow-ico svg
{
  fill: currentColor;
}

.st-flow-split
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.st-flow-end
{
  padding: 10px 12px;
  border-radius: 12px;
}

.st-flow-end.is-offer
{
  background: var(--status-success-bg);
  color: var(--status-success);
}

.st-flow-end.is-white
{
  background: var(--surface-muted);
  color: var(--text-primary);
}

.st-summary-rows
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}

.st-summary-rows div
{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.st-summary-rows span
{
  color: var(--text-muted);
}

.st-summary-rows b
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

.st-save
{
  width: 100%;
  height: 48px;
  white-space: nowrap;
  user-select: none;
}

/* До 1260 px у страницы overflow: hidden — липкие меню и сводка не держатся:
   сводка — под разделами, «Сохранить» — закреплена в правом нижнем углу (на телефоне — во всю ширину) */
@media (max-width: 1260px)
{
  .st-layout
  {
    grid-template-columns: 1fr;
    padding-bottom: 72px;
  }

  .st-nav,
  .st-summary
  {
    position: static;
  }

  .st-save
  {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 320px;
  }
}

@media (max-width: 991px)
{
  .st-save
  {
    left: 16px;
    width: auto;
  }

  .st-list-tools
  {
    gap: 12px;
  }
}

@media (max-width: 767px)
{
  .st-grid2,
  .st-toggles
  {
    grid-template-columns: 1fr;
  }

  .st-url
  {
    flex-direction: column;
    align-items: stretch;
  }

  .st-url .st-seg
  {
    display: flex;
  }

  .st-url .st-seg label,
  .st-url .st-seg span
  {
    flex: 1;
  }

  /* «Потоков N / лимит» — отдельной строкой под кнопками */
  .main-content-filter:has(.st-list-tools)
  {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .st-list-tools
  {
    display: contents;
  }

  .st-total
  {
    order: 3;
    width: 100%;
  }
}
/* «Подключение»: точка — работает (последний запрос не раньше суток назад), давно, нет запросов */
.st-conn
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.st-conn i
{
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--text-muted);
}

.st-conn.is-on i
{
  background: var(--status-success);
}

.st-conn.is-old i
{
  background: var(--status-warning);
}

.st-conn.is-none
{
  color: var(--text-muted);
}

/* Окна «Интеграция» и «Тестовая ссылка» — на основе app-modal */
.modal-dialog:has(.st-int)
{
  max-width: 600px;
}

.st-int-body
{
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px;
  overflow-y: auto;
}

/* Карточки «PHP-файл» и «WordPress» — вкладки окна */
.st-int-cards
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.st-int-card
{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.st-int-card:hover
{
  border-color: var(--border-interactive-hover);
}

.st-int-card[aria-selected="true"]
{
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-default));
  background: var(--select-active-bg);
}

.st-int-card:focus-visible
{
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.st-steps
{
  margin: 6px 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: st-step;
}

.st-steps li
{
  position: relative;
  padding-left: 40px;
  counter-increment: st-step;
}

.st-steps li + li
{
  margin-top: 18px;
}

.st-steps li::before
{
  content: counter(st-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--select-active-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
}

.st-steps b
{
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  color: var(--text-primary);
}

.st-steps p
{
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.st-steps .st-conn
{
  white-space: normal;
}

.st-download
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.st-download svg
{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.st-key
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--border-default);
}

.st-key-label
{
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
}

.st-key code
{
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 13px;
  color: var(--text-primary);
}

.st-servers-title
{
  margin: 4px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.st-int .app-modal-item.is-blocked .app-modal-name
{
  color: var(--text-muted);
}

.st-server-blocked
{
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--status-danger-bg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--status-danger);
}

.st-test-field
{
  display: flex;
  align-items: center;
  gap: 8px;
}

.st-test-field .input-control
{
  flex: 1;
  min-width: 0;
}

.st-test-notes
{
  margin: 16px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.st-test-notes li + li
{
  margin-top: 4px;
}

.st-test [data-st-test-open][aria-disabled="true"]
{
  opacity: .5;
  pointer-events: none;
}

@media (max-width: 575px)
{
  .st-key
  {
    flex-wrap: wrap;
  }

  .st-key-label
  {
    flex-basis: 100%;
  }
}

/* Статистика потоков (streams-statistics.php): причины фильтрации — кольцо и легенда рядом */
.ss-reasons .box-chart-row
{
  display: flex;
  align-items: center;
  gap: 30px;
}

.ss-reasons .box-chart-doughnut
{
  flex: none;
  max-width: 160px;
  margin: 0;
}

.ss-reasons .box-chart-vals
{
  max-width: 420px;
}

/* Журнал кликов: устройство, поток и причина с названием списка переносятся — колонки помещаются без прокрутки */
#streams-statistics-log .st-name
{
  max-width: 200px;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* # Потоки */

/* «GEO-базы»: ссылка на DB-IP под статистикой гео — условие лицензии CC BY 4.0, пока DB-IP источник гео */
.geo-credit
{
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}

.geo-credit:hover
{
  color: var(--text-muted);
  text-decoration: underline;
}