@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [Telega FM](//telega.fm)
 * @summary Единый стиль для проектов.
 * @created 2025-10
 * @modified 2026-01
 *
 * @file D:/controls-psr/sdqa.ru/cdn.sdqa.ru/css/styles-standard-project-telega.css
 * @link https://cdn.telega.fm/css/styles-standard-project-telega.min.css
 *
 * @remarks
 * - Стандарты CSS3 2025
 * - Поддержка тем
 * - Inline комментарии запрещены
 * - Независимые стили под проекта Telega.fm
 * =============================================================================
 */

/* CSS ПЕРЕМЕННЫЕ (CSS CUSTOM PROPERTIES) */

:root
{
  /* CSS значения по умолчанию для тем (default theme values) */

  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);

  /* Базовые цвета (base colors) */
  --color-primary: rgb(59, 130, 246);
  --color-primary-hover: rgb(37, 99, 235);
  --color-primary-dark: rgb(30, 64, 175);
  --color-secondary: rgb(107, 114, 128);
  --color-secondary-hover: rgb(75, 85, 99);
  --color-success: rgb(16, 185, 129);
  --color-success-hover: rgb(5, 150, 105);
  --color-warning: rgb(245, 158, 11);
  --color-warning-hover: rgb(217, 119, 6);
  --color-danger: rgb(239, 68, 68);
  --color-danger-hover: rgb(220, 38, 38);
  --color-info: rgb(6, 182, 212);
  --color-info-hover: rgb(8, 145, 178);

  /* Цвета фона (background colors) */
  --color-bg-primary: rgb(255, 255, 255);
  --color-bg-secondary: rgb(248, 250, 252);
  --color-bg-tertiary: rgb(241, 245, 249);
  --color-bg-accent: rgb(226, 232, 240);

  /* Цвета текста (text colors) */
  --color-text-primary: rgb(30, 41, 59);
  --color-text-secondary: rgb(71, 85, 105);
  --color-text-muted: rgb(100, 116, 139);
  --color-text-inverse: rgb(255, 255, 255);
  --color-text-link: rgb(59, 130, 246);

  /* Цвета границ (border colors) */
  --color-border: rgb(226, 232, 240);
  --color-border-hover: rgb(203, 213, 225);

  /* Цвета Header & Footer */
  --header-footer-bg-color: var(--color-bg-secondary);
  --header-footer-bg-image: none;
  --header-footer-border-color: var(--color-border);
  --header-footer-text-color: var(--color-border);

  --color-footer-bg-color: var(--color-border);
  --color-footer-bg-image: none;
  --color-footer-border-color: none;
  --color-footer-text-color: rgb(100, 116, 139);

  /* Цвета теней (shadow colors) */
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Хлебные крошки (breadcrumbs) */
  --breadcrumb-bg-start: rgb(248, 250, 252);
  --breadcrumb-bg-end: rgb(226, 232, 240);
  --breadcrumb-border: rgb(203, 213, 225);
  --breadcrumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --breadcrumb-color: rgb(71, 85, 105);
  --breadcrumb-link-color: rgb(59, 130, 246);
  --breadcrumb-link-hover-color: rgb(30, 64, 175);
  --breadcrumb-link-hover-bg: rgba(59, 130, 246, 0.1);
  --breadcrumb-divider: "›";
  --breadcrumb-divider-color: rgb(100, 116, 139);

  /* Таблицы (tables) */
  --table-border: rgb(226, 232, 240);
  --table-header-bg: rgb(241, 245, 249);
  --table-row-hover: rgb(248, 250, 252);
  --table-stripe: rgb(248, 250, 252);

  /* Уведомления (alerts) */
  --alert-blue-bg: rgb(224, 242, 254);
  --alert-blue-border: rgb(125, 211, 252);
  --alert-blue-text: rgb(12, 74, 110);
  --alert-green-bg: rgb(220, 252, 231);
  --alert-green-border: rgb(134, 239, 172);
  --alert-green-text: rgb(22, 101, 52);
  --alert-yellow-bg: rgb(254, 249, 195);
  --alert-yellow-border: rgb(253, 224, 71);
  --alert-yellow-text: rgb(133, 77, 14);
  --alert-red-bg: rgb(254, 226, 226);
  --alert-red-border: rgb(252, 165, 165);
  --alert-red-text: rgb(153, 27, 27);
  --alert-purple-bg: rgb(245, 208, 254);
  --alert-purple-border: rgb(240, 171, 252);
  --alert-purple-text: rgb(112, 26, 117);
  --alert-indigo-bg: rgb(224, 231, 255);
  --alert-indigo-border: rgb(165, 180, 252);
  --alert-indigo-text: rgb(55, 48, 163);
  --alert-gray-bg: rgb(243, 244, 246);
  --alert-gray-border: rgb(209, 213, 219);
  --alert-gray-text: rgb(55, 65, 81);

  /* Содержание статьи (supply) */
  --supply-bg: var(--color-bg-secondary);
  --supply-border-color: var(--color-border);
  --supply-header-text-color: var(--color-text-primary);
  --supply-indicator-color: var(--color-primary);
  --supply-link-color: var(--color-text-secondary);
  --supply-link-hover-color: var(--color-primary);
  --supply-link-hover-bg: var(--color-bg-accent);
  --supply-number-color: var(--color-primary);
  --supply-sub-number-color: var(--color-text-muted);


  /* ПЕРЕМЕННЫЕ НЕ СВЯЗАННЫЕ С ТЕМАМИ (NON-THEME VARIABLES) */
  /* Границы (borders) */
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;

  /* Отступы (spacing) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Типографика (typography) */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Переходы (transitions) */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Тени (shadows) */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow: 0 1px 3px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color);

  /* Логотип по умолчанию (Logo Default) */
  --header-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23eeeeee'/%3E%3Ctext x='50' y='50' font-family='sans-serif' font-size='30' fill='%23999999' text-anchor='middle' dy='.3em'%3ELOGO%3C/text%3E%3C/svg%3E");

  /* SVG Elements */
  --icon-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* БАЗОВЫЕ СТИЛИ (BASE STYLES) */

*,
*::before,
*::after
{
  box-sizing: border-box;
}

html
{
  scroll-behavior: smooth;
  scroll-padding-top: 70px;

  font-family: var(--font-family-sans), sans-serif;
  line-height: 1.5;
}

body
{
  margin: 0;

  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: inherit;
  color: var(--color-text-primary);

  background-color: var(--color-bg-primary);

  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Дополнительные цвета */
.color-white
{
  color: rgb(255, 255, 255);
}

.color-black
{
  color: rgb(0, 0, 0);
}

.color-purple
{
  color: rgb(139, 92, 246);
}

.color-orange
{
  color: rgb(249, 115, 22);
}

.color-green
{
  color: rgb(34, 197, 94);
}

.color-teal
{
  color: rgb(20, 184, 166);
}

.color-red
{
  color: rgb(239, 68, 68);
}

.color-blue
{
  color: rgb(59, 130, 246);
}

.color-pink
{
  color: rgb(236, 72, 153);
}

/* ТИПОГРАФИКА (TYPOGRAPHY) */

h1,
h2,
h3,
h4,
h5,
h6
{
  margin-top: 1.125rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1
{
  font-size: var(--font-size-4xl);
}

h2
{
  font-size: var(--font-size-3xl);
}

h3
{
  font-size: var(--font-size-2xl);
}

h4
{
  font-size: var(--font-size-xl);
}

h5
{
  font-size: var(--font-size-lg);
}

h6
{
  font-size: var(--font-size-base);
}

p
{
  margin-bottom: var(--spacing-md);

  line-height: 1.6;
  color: var(--color-text-primary);
}

small
{
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

code
{
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;

  font-family: var(--font-family-mono), monospace;
  font-size: 0.875em;
  color: var(--color-primary-dark);

  background-color: var(--color-bg-tertiary);
}

pre
{
  position: relative;

  overflow-x: auto;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);

  font-family: var(--font-family-mono), monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);

  background-color: var(--color-bg-tertiary);
}

pre code
{
  padding: 0;
  border-radius: 0;

  color: inherit;

  background-color: transparent;
}

blockquote
{
  margin: var(--spacing-xl) 0;
  padding-left: var(--spacing-lg);
  border-left: 4px solid var(--color-primary);

  font-style: italic;
  color: var(--color-text-secondary);
}

hr
{
  height: 1px;
  margin: var(--spacing-xl) 0;
  border: 0;

  background-color: var(--color-border);
}

figure.image
{
  margin: var(--spacing-xl) 0;

  text-align: center;
}

figure.image img
{
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg);

  box-shadow: var(--shadow-md);
}

figure.image figcaption
{
  margin-top: var(--spacing-sm);

  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

figure.image-zoomable
{
  cursor: pointer;
}

/* Gallery preview images */
.gallery-preview-img
{
  cursor: pointer;
  object-fit: cover;
  height: 200px;
  width: 100%;
}

/* Clickable images */
.clickable-img
{
  cursor: pointer;
}

/* КОНТЕЙНЕРЫ МАКЕТА (LAYOUT CONTAINERS) */

.container
{
  position: relative;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-lg);
  padding-left: var(--spacing-lg);
}

@media (min-width: 640px)
{
  .container
  {
    max-width: 640px;
  }
}

@media (min-width: 768px)
{
  .container
  {
    max-width: 768px;
  }
}

@media (min-width: 1024px)
{
  .container
  {
    max-width: 1024px;
  }
}

@media (min-width: 1280px)
{
  .container
  {
    max-width: 1280px;
  }
}

/* ЭЛЕМЕНТЫ ФОРМ (FORM CONTROLS) */

.form-group
{
  margin-bottom: var(--spacing-xl);
}

.form-label
{
  display: block;
  margin-bottom: var(--spacing-sm);

  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.form-input,
.form-textarea,
.form-select
{
  display: block;
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);

  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);

  background-color: var(--color-bg-primary);
  background-clip: padding-box;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus
{
  outline: 0;
  border-color: var(--color-primary);

  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.form-input.focus
{
  border-color: var(--color-primary);

  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled
{
  opacity: 0.65;
  cursor: not-allowed;

  background-color: var(--color-bg-accent);
}

.form-textarea
{
  min-height: 100px;
  resize: vertical;
}

.form-select
{
  appearance: none;
  padding-right: 2.5rem;
  background-image: var(--icon-select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 16px 12px;
}

/* КНОПКИ (BUTTONS) */

.btn
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: var(--spacing-md) var(--spacing-xl);
  border: 1px solid transparent;
  border-radius: var(--border-radius);

  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-inverse);
  text-align: center;
  text-decoration: none;

  background-color: transparent;

  cursor: pointer;
  user-select: none;

  transition: all var(--transition-fast);
}

.btn:hover
{
  text-decoration: none;
}

.btn:focus
{
  outline: 0;

  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.btn:disabled
{
  opacity: 0.65;

  cursor: not-allowed;
  pointer-events: none;
}

/* Варианты кнопок (button variants) */
.btn-primary
{
  color: var(--color-text-inverse);

  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled)
{
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary
{
  color: var(--color-text-inverse);

  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover:not(:disabled)
{
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-success
{
  color: var(--color-text-inverse);

  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled)
{
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.btn-warning
{
  color: var(--color-text-inverse);

  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning:hover:not(:disabled)
{
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.btn-danger
{
  color: var(--color-text-inverse);

  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled)
{
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-info
{
  color: var(--color-text-inverse);

  background-color: var(--color-info);
  border-color: var(--color-info);
}

.btn-info:hover:not(:disabled)
{
  background-color: var(--color-info-hover);
  border-color: var(--color-info-hover);
}

.btn-outline
{
  color: var(--color-primary);

  background-color: transparent;
  border-color: var(--color-primary);
}

.btn-outline:hover:not(:disabled)
{
  color: var(--color-text-inverse);

  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-ghost
{
  color: var(--color-primary);

  background-color: transparent;
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled)
{
  background-color: var(--color-bg-tertiary);
}

/* Размеры кнопок (button sizes) */
.btn-sm
{
  padding: var(--spacing-sm) var(--spacing-md);

  font-size: var(--font-size-sm);
}

.btn-lg
{
  padding: var(--spacing-lg) var(--spacing-2xl);

  font-size: var(--font-size-lg);
}

.btn-xl
{
  padding: var(--spacing-xl) var(--spacing-3xl);

  font-size: var(--font-size-xl);
}

/* КАРТОЧКИ (CARDS) */

.card
{
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  word-wrap: break-word;
  background-color: var(--color-bg-primary);
  background-clip: border-box;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover
{
  border-color: var(--color-border-hover);

  box-shadow: var(--shadow-md);
}

.card-header
{
  margin-bottom: 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);

  background-color: var(--color-bg-tertiary);
}

.card-body
{
  flex: 1 1 auto;
  padding: var(--spacing-md);
}

.card-footer
{
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  border-bottom-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);

  background-color: var(--color-bg-tertiary);
}

.card-title
{
  margin-bottom: var(--spacing-sm);

  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.card-subtitle
{
  margin-bottom: var(--spacing-md);

  color: var(--color-text-muted);
}

.card-text:last-child
{
  margin-bottom: 0;
}

/* УВЕДОМЛЕНИЯ (ALERTS) */

.alert
{
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-width: 1px;
  border-left-width: 7px;
  border-style: solid;
  border-radius: var(--border-radius);
}

/* Исправление отступов для параграфов в alert (fix paragraph margins in alerts) */
.alert p
{
  margin: 0;
}

.alert-flex
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Кнопка закрытия для уведомлений (notification close button) */
.alert .notification-close
{
  float: right;
  margin-left: 1rem;
  padding: 0;

  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  text-shadow: none;

  background-color: transparent;
  border: 0;
  opacity: 0.7;

  cursor: pointer;
  appearance: none;
}

.alert .notification-close:hover
{
  opacity: 1;
}

.alert-flex .notification-close
{
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  text-shadow: none;
  opacity: .5;
  background-color: transparent;
  border: 0;
  margin-left: 15px;
  padding: 0;
}

.alert-flex .notification-close:hover
{
  opacity: 1;
  color: inherit;
}

.alert-title
{
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Alert list indentation */
.alert-list
{
  padding-left: 1rem;
}

/* Цветовые вариации уведомлений (alert color variants) */
.alert-blue
{
  background-color: var(--alert-blue-bg);
  border-color: var(--alert-blue-border);
  color: var(--alert-blue-text);
}

.alert-green
{
  background-color: var(--alert-green-bg);
  border-color: var(--alert-green-border);
  color: var(--alert-green-text);
}

.alert-yellow,
.alert-processing
{
  background-color: var(--alert-yellow-bg);
  border-color: var(--alert-yellow-border);
  color: var(--alert-yellow-text);
}

.alert-red
{
  background-color: var(--alert-red-bg);
  border-color: var(--alert-red-border);
  color: var(--alert-red-text);
}

.alert-purple
{
  background-color: var(--alert-purple-bg);
  border-color: var(--alert-purple-border);
  color: var(--alert-purple-text);
}

.alert-indigo
{
  background-color: var(--alert-indigo-bg);
  border-color: var(--alert-indigo-border);
  color: var(--alert-indigo-text);
}

.alert-gray
{
  background-color: var(--alert-gray-bg);
  border-color: var(--alert-gray-border);
  color: var(--alert-gray-text);
}

/* Уведомления (Alerts) */
.alert-success
{
  color: rgb(6, 95, 70);
  background-color: rgb(209, 250, 229);
  border-color: rgb(167, 243, 208);
}

.alert-warning
{
  color: rgb(146, 64, 14);
  background-color: rgb(254, 243, 199);
  border-color: rgb(253, 230, 138);
}

.alert-danger,
.alert-error
{
  color: rgb(153, 27, 27);
  background-color: rgb(254, 226, 226);
  border-color: rgb(254, 202, 202);
}

.alert-info
{
  color: rgb(12, 74, 110);
  background-color: rgb(224, 242, 254);
  border-color: rgb(179, 229, 252);
}

/* Оверлей загрузки (Loading Overlay) */
.loading-overlay
{
  background-color: rgba(255, 255, 255, 0.95);
}

/* МОДАЛЬНЫЕ ОКНА (MODALS) */

.modal
{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-sm);
  overflow-x: hidden;
  overflow-y: auto;

  opacity: 0;
  visibility: hidden;

  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);

  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal.show
{
  opacity: 1;
  visibility: visible;
}

.modal-dialog
{
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;

  opacity: 0;
  pointer-events: none;

  transform: translateY(-50px);

  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.modal.show .modal-dialog
{
  opacity: 1;

  transform: translateY(0);
}

.modal-content
{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  outline: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);

  background-color: var(--color-bg-primary);
  background-clip: padding-box;

  pointer-events: auto;
  box-shadow: var(--shadow-xl);
}

.modal-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);

  background-color: var(--color-bg-tertiary);
}

.modal-title
{
  margin: 0;

  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.modal-body
{
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-md);
}

/* Исправление видимости ссылок в модальных окнах (fix modal links visibility) */
.modal-body a
{
  color: var(--color-primary);
  text-decoration: underline;

  transition: color var(--transition-fast);
}

.modal-body a:hover
{
  color: var(--color-primary-hover);
}

.modal-footer
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  border-bottom-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);

  background-color: var(--color-bg-tertiary);
}

.modal-button-close
{
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);

  color: var(--color-text-primary);
  font-size: var(--font-size-3xl);
  background-color: var(--color-bg-tertiary);
  background-image: var(--icon-close);
  background-position: center center;
  background-size: 70%;
  background-repeat: no-repeat;
  opacity: 0.8;
  cursor: pointer;

  transition: all var(--transition-fast);
}

.modal-button-close:hover
{
  color: var(--color-danger);
  background-color: var(--color-bg-accent);
  opacity: 1;

  transform: scale(1.1);
}

@media (min-width: 576px)
{
  .modal-dialog
  {
    max-width: 600px;
    margin: 1.75rem auto;
  }
}

/* МОДАЛЬНОЕ ОКНО ПРОСМОТРА ИЗОБРАЖЕНИЙ (IMAGE VIEWER) */
.image-viewer-modal
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  visibility: hidden;
  backdrop-filter: blur(8px);

  background-color: rgba(0, 0, 0, 0.85);
}

.image-viewer-modal.show
{
  opacity: 1;
  visibility: visible;
}

.image-viewer-dialog
{
  position: relative;
  width: 95%;
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scale(0.95);
  transition: transform 0.3s ease-in-out;
}

.image-viewer-modal.show .image-viewer-dialog
{
  transform: scale(1);
}

.image-viewer-header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);

  background-color: rgba(0, 0, 0, 0.5);
}

.image-viewer-header,
.image-viewer-header h2,
.image-viewer-header h3
{
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
}

.image-viewer-title
{
  color: var(--color-text-inverse);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
}

.image-viewer-img
{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);
}

.image-viewer-footer
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: rgb(255, 255, 255);
  padding: 1rem 1.5rem;
  text-align: center;
  z-index: 1;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);

  background-color: rgba(0, 0, 0, 0.5);
}

.image-viewer-details
{
  color: var(--color-text-inverse);
  font-size: 0.9rem;
  margin: 0;
}

/* Переключатель тем в модальном окне (theme switcher modal) */
.theme-switcher-modal
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.theme-switcher-modal .theme-option
{
  flex-grow: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);

  font-weight: 500;
  color: var(--color-text-secondary);

  background-color: var(--color-bg-secondary);
  cursor: pointer;

  transition: all var(--transition-fast);
}

.theme-switcher-modal .theme-option:hover
{
  border-color: var(--color-primary);
  color: var(--color-text-primary);

  background-color: var(--color-bg-accent);
}

.theme-switcher-modal .theme-option.active
{
  color: var(--color-text-inverse);

  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ЗОНЫ ПЕРЕТАСКИВАНИЯ (DRAG & DROP AREAS) */

.drop-zone
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--spacing-sm);
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius-lg);
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--color-text-muted);
  text-align: center;

  background-color: var(--color-bg-secondary);

  cursor: pointer;

  transition: all var(--transition-normal);
}

.drop-zone:hover
{
  border-color: var(--color-primary);
  color: var(--color-text-secondary);

  background-color: var(--color-bg-tertiary);
}

.drop-zone.dragover
{
  border-color: var(--color-primary);
  color: var(--color-primary);

  background-color: rgba(59, 130, 246, 0.05);

  transform: scale(1.02);
}

.drop-zone-icon
{
  font-size: var(--font-size-3xl);

  opacity: 0.7;
}

.drop-zone-text
{
  margin-bottom: var(--spacing-sm);

  font-size: var(--font-size-lg);
  font-weight: 500;
}

.drop-zone-hint
{
  font-size: var(--font-size-sm);

  opacity: 0.8;
}

/* ИНДИКАТОРЫ ПРОГРЕССА (PROGRESS BARS) */

.progress
{
  display: flex;
  height: 1rem;
  overflow: hidden;
  border-radius: var(--border-radius);

  font-size: var(--font-size-xs);

  background-color: var(--color-bg-accent);
}

.progress-bar
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;

  color: var(--color-text-inverse);
  text-align: center;
  white-space: nowrap;

  background-color: var(--color-primary);

  transition: width var(--transition-slow);
}

.progress-bar-success
{
  background-color: var(--color-success);
}

.progress-bar-warning
{
  background-color: var(--color-warning);
}

.progress-bar-danger
{
  background-color: var(--color-danger);
}

.progress-bar-info
{
  background-color: var(--color-info);
}

/* СОСТОЯНИЯ ЗАГРУЗКИ И СПИННЕРЫ (LOADING STATES & SPINNERS) */

.spinner
{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;

  animation: spin 1s ease-in-out infinite;
}

.spinner-lg
{
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

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

.loading-overlay
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;

  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

.loading-overlay-wrapper
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius);

  background-color: var(--color-bg-tertiary);
}

/* СЛУЖЕБНЫЕ КЛАССЫ (UTILITY CLASSES) */

/* Цвета текста (text colors) */
.text-primary
{
  color: var(--color-text-primary) !important;
}

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

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

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

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

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

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

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

/* Цвета фона (background colors) */
.bg-primary
{
  color: var(--color-text-inverse) !important;
  background-color: var(--color-primary) !important;
}

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

.bg-tertiary
{
  background-color: var(--color-bg-tertiary) !important;
}

.bg-success
{
  color: var(--color-text-inverse) !important;
  background-color: var(--color-success) !important;
}

.bg-warning
{
  color: var(--color-text-inverse) !important;
  background-color: var(--color-warning) !important;
}

.bg-danger
{
  color: var(--color-text-inverse) !important;
  background-color: var(--color-danger) !important;
}

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

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

/* Отступы (spacing) */
.m-0
{
  margin: 0 !important;
}

.m-1
{
  margin: var(--spacing-xs) !important;
}

.m-2
{
  margin: var(--spacing-sm) !important;
}

.m-3
{
  margin: var(--spacing-md) !important;
}

.m-4
{
  margin: var(--spacing-lg) !important;
}

.m-5
{
  margin: var(--spacing-xl) !important;
}

.p-0
{
  padding: 0 !important;
}

.p-1
{
  padding: 0.25rem !important;
}

.p-2
{
  padding: 0.5rem !important;
}

.p-3
{
  padding: 0.75rem !important;
}

.p-4
{
  padding: 1.5rem !important;
}

.p-5
{
  padding: 2rem !important;
}

.pt-4
{
  padding-top: 1.5rem !important;
}

.pb-4
{
  padding-bottom: 1.5rem !important;
}

.mb-1
{
  margin-bottom: var(--spacing-xs) !important;
}

.mb-2
{
  margin-bottom: var(--spacing-sm) !important;
}

.mb-3
{
  margin-bottom: var(--spacing-md) !important;
}

.mb-4
{
  margin-bottom: var(--spacing-lg) !important;
}

.mb-5
{
  margin-bottom: var(--spacing-xl) !important;
}

.me-2
{
  margin-right: var(--spacing-sm) !important;
}

.me-3
{
  margin-right: var(--spacing-md) !important;
}

.gap-2
{
  gap: var(--spacing-xs);
}

.gap-3
{
  gap: var(--spacing-sm);
}

.gap-4
{
  gap: var(--spacing-md);
}

.gap-6
{
  gap: var(--spacing-lg);
}

.gap-8
{
  gap: var(--spacing-xl);
}

/* Display */
.d-none
{
  display: none !important;
}

.d-block
{
  display: block !important;
}

.d-inline
{
  display: inline !important;
}

.d-inline-block
{
  display: inline-block !important;
}

.d-flex
{
  display: flex !important;
}

.d-inline-flex
{
  display: inline-flex !important;
}

/* Flexbox */
.flex-row
{
  flex-direction: row !important;
}

.flex-column
{
  flex-direction: column !important;
}

.flex-wrap
{
  flex-wrap: wrap !important;
}

.flex-nowrap
{
  flex-wrap: nowrap !important;
}

.justify-content-start
{
  justify-content: flex-start !important;
}

.justify-content-end
{
  justify-content: flex-end !important;
}

.justify-content-center
{
  justify-content: center !important;
}

.justify-content-between
{
  justify-content: space-between !important;
}

.justify-content-around
{
  justify-content: space-around !important;
}

.align-items-start
{
  align-items: flex-start !important;
}

.align-items-end
{
  align-items: flex-end !important;
}

.align-items-center
{
  align-items: center !important;
}

.align-items-baseline
{
  align-items: baseline !important;
}

.align-items-stretch
{
  align-items: stretch !important;
}

/* Text Alignment */
.text-left
{
  text-align: left !important;
}

.text-center
{
  text-align: center !important;
}

.text-right
{
  text-align: right !important;
}

.text-justify
{
  text-align: justify !important;
}

/* Font Weight */
.fw-light
{
  font-weight: 300 !important;
}

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

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

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

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

/* Font Size */
.fs-xs
{
  font-size: var(--font-size-xs) !important;
}

.fs-sm
{
  font-size: var(--font-size-sm) !important;
}

.fs-base
{
  font-size: var(--font-size-base) !important;
}

.fs-lg
{
  font-size: var(--font-size-lg) !important;
}

.fs-xl
{
  font-size: var(--font-size-xl) !important;
}

.fs-2xl
{
  font-size: var(--font-size-2xl) !important;
}

.fs-3xl
{
  font-size: var(--font-size-3xl) !important;
}

.fs-4xl
{
  font-size: var(--font-size-4xl) !important;
}

/* Границы (borders) */
.border
{
  border: 1px solid var(--color-border) !important;
}

.border-0
{
  border: 0 !important;
}

.border-top
{
  border-top: 1px solid var(--color-border) !important;
}

.border-bottom
{
  border-bottom: 1px solid var(--color-border) !important;
}

.border-left
{
  border-left: 1px solid var(--color-border) !important;
}

.border-right
{
  border-right: 1px solid var(--color-border) !important;
}

/* Border Radius - ТОЛЬКО радиусы, без лишних стилей */
.rounded
{
  border-radius: var(--border-radius) !important;
}

.rounded-lg
{
  border-radius: var(--border-radius-lg) !important;
}

.rounded-xl
{
  border-radius: var(--border-radius-xl) !important;
}

.rounded-full
{
  border-radius: 50% !important;
}

.rounded-none
{
  border-radius: 0 !important;
}

/* Shadow */
.shadow-none
{
  box-shadow: none !important;
}

.shadow-sm
{
  box-shadow: var(--shadow-sm) !important;
}

.shadow
{
  box-shadow: var(--shadow) !important;
}

.shadow-md
{
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg
{
  box-shadow: var(--shadow-lg) !important;
}

.shadow-xl
{
  box-shadow: var(--shadow-xl) !important;
}

/* Width & Height */
.w-25
{
  width: 25% !important;
}

.w-50
{
  width: 50% !important;
}

.w-75
{
  width: 75% !important;
}

.w-100
{
  width: 100% !important;
}

.h-25
{
  height: 25% !important;
}

.h-50
{
  height: 50% !important;
}

.h-75
{
  height: 75% !important;
}

.h-100
{
  height: 100% !important;
}

/* Position */
.position-static
{
  position: static !important;
}

.position-relative
{
  position: relative !important;
}

.position-absolute
{
  position: absolute !important;
}

.position-fixed
{
  position: fixed !important;
}

.position-sticky
{
  position: sticky !important;
}

/* RESPONSIVE UTILITIES */

/* Hide/Show on different screen sizes */
@media (min-width: 640px) and (max-width: 767px)
{
  .d-sm-block
  {
    display: block !important;
  }

  .d-sm-none
  {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px)
{
  .d-md-block
  {
    display: block !important;
  }

  .d-md-none
  {
    display: none !important;
  }
}

@media (min-width: 1024px)
{
  .d-lg-block
  {
    display: block !important;
  }

  .d-lg-none
  {
    display: none !important;
  }
}

/* ANIMATIONS & TRANSITIONS */

@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}

@keyframes fadeOut
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 0;
  }
}

@keyframes slideInDown
{
  from
  {
    transform: translateY(-100%);
    opacity: 0;
  }
  to
  {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInUp
{
  from
  {
    transform: translateY(100%);
    opacity: 0;
  }
  to
  {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft
{
  from
  {
    transform: translateX(-100%);
    opacity: 0;
  }
  to
  {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight
{
  from
  {
    transform: translateX(100%);
    opacity: 0;
  }
  to
  {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zoomIn
{
  from
  {
    transform: scale(0.8);
    opacity: 0;
  }
  to
  {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounce
{
  0%, 20%, 53%, 80%, 100%
  {
    transform: translate3d(0, 0, 0);
  }
  40%, 43%
  {
    transform: translate3d(0, -30px, 0);
  }
  70%
  {
    transform: translate3d(0, -15px, 0);
  }
  90%
  {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes pulse
{
  0%
  {
    transform: scale(1);
  }
  50%
  {
    transform: scale(1.05);
  }
  100%
  {
    transform: scale(1);
  }
}

@keyframes shimmer
{
  0%
  {
    background-position: -468px 0;
  }
  100%
  {
    background-position: 468px 0;
  }
}

/* Animation Classes */
.animate-fade-in
{
  animation: fadeIn 0.5s ease-in-out;
}

.animate-fade-out
{
  animation: fadeOut 0.5s ease-in-out;
}

.animate-slide-in-down
{
  animation: slideInDown 0.5s ease-out;
}

.animate-slide-in-up
{
  animation: slideInUp 0.5s ease-out;
}

.animate-slide-in-left
{
  animation: slideInLeft 0.5s ease-out;
}

.animate-slide-in-right
{
  animation: slideInRight 0.5s ease-out;
}

.animate-zoom-in
{
  animation: zoomIn 0.5s ease-out;
}

.animate-bounce
{
  animation: bounce 2s infinite;
}

.animate-pulse
{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.shimmer
{
  background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  background-size: 468px 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}


/* GRID SYSTEM */

.row
{
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12
{
  position: relative;
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.col
{
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-1
{
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2
{
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3
{
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4
{
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5
{
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6
{
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7
{
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8
{
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9
{
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10
{
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11
{
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12
{
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px)
{
  .col-sm
  {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-1
  {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-sm-2
  {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-sm-3
  {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4
  {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-sm-5
  {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-sm-6
  {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7
  {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-sm-8
  {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-sm-9
  {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10
  {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-sm-11
  {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-sm-12
  {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px)
{
  .col-md
  {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-1
  {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2
  {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3
  {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4
  {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5
  {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6
  {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7
  {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8
  {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9
  {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10
  {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11
  {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12
  {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* HEADER & FOOTER & ICONS */

/* Логотип - переопределяется в каждом проекте через !important */
.header-logo
{
  width: 48px;
  height: 48px;
  background-image: var(--header-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 10px;
}

/* Header стили */
.header
{
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  backdrop-filter: blur(8px);
}

/* Компенсация высоты зафиксированного header */
body
{
  padding-top: 80px;
}

.header-container
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.header-left
{
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Стили для заголовка в хедере */
.header-title
{
  display: flex;
  flex-direction: column;

  line-height: 1.2;
}

.header-title-main
{
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.header-subtitle
{
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 1px 0 0;
}

.header-actions
{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  flex-wrap: nowrap;
  max-width: 50vw;
}

.header-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 18px;
}

.header-btn:hover
{
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Footer стили */
.footer
{
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-2xl);
}

.footer-container
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.footer-text
{
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.footer-links
{
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link
{
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-row
{
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.footer-row:last-child
{
  margin-bottom: 0;
}

.footer-link:hover
{
  color: var(--color-primary);
  text-decoration: underline;
}

/* SCROLL BUTTONS */

.scroll-buttons
{
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}

.scroll-buttons.visible
{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.scroll-btn:hover
{
  background-color: var(--color-bg-tertiary);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

/* --- ЭЛЕМЕНТЫ ПРОКРУТКИ КОНТЕНТА */

/* Контейнер для кнопок прокрутки. Появляется только при необходимости. */
.scroll-controls
{
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;

  visibility: visible;
  transform: translateY(10px);
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, transform 200ms ease-in-out;
}

/* Сами кнопки прокрутки. Стилизованы для минимального отвлечения. */
.scroll-control
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(241, 245, 249, 0.8);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: all 150ms ease-in-out;
  cursor: pointer;
}

.scroll-control:hover
{
  background-color: var(--color-bg-accent);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Иконки для кнопок, используя CSS Mask. */
.scroll-icon
{
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.icon-scroll-up
{
  mask-image: var(--icon-chevron-up);
}

.icon-scroll-down
{
  mask-image: var(--icon-chevron-down);
}

/* Правило для отображения кнопок, когда основной контент (`main`) длиннее высоты окна просмотра. */
main:has(+ .scroll-controls)
{
  /* Это правило может быть пустым, оно нужно для работы :has() */
}

body:has(main:nth-child(n+2)) .scroll-controls,
body:has(main:nth-last-child(n+2)) .scroll-controls,
main:has(~ main) + .scroll-controls,
main ~ main + .scroll-controls
{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- TABS & CODE BLOCKS */

.tabs
{
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
}

.tab-link
{
  flex-grow: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: var(--font-size-base);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  text-align: center;
}

.tab-link:hover
{
  color: var(--color-text-primary);
  background-color: var(--color-bg-accent);
}

.tab-link.active
{
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: var(--color-bg-primary);
}

.tab-link:first-child
{
  border-top-left-radius: var(--border-radius-lg);
}

.tab-link:last-child
{
  border-top-right-radius: var(--border-radius-lg);
}

.tab-content
{
  /* По умолчанию скрываем все вкладки */
  display: none;
}

.tab-content.active
{
  /* Показываем только активную вкладку */
  display: block;
  animation: contentFadeIn 0.4s ease-in-out;
}

.copy-code-button
{
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  background-color: var(--color-bg-accent);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  opacity: 0.7;
  transition: all var(--transition-fast);
}

.copy-code-button:hover
{
  opacity: 1;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* ХЛЕБНЫЕ КРОШКИ (BREADCRUMBS) */

/* Хлебные крошки с Schema.org */
.breadcrumb
{
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  padding: 0.75rem 0;
  margin: 0.5rem 0;
}

.breadcrumb .container
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Элементы хлебных крошек */
.breadcrumb span[itemprop="itemListElement"]
{
  color: var(--breadcrumb-color);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Ссылки в хлебных крошках */
.breadcrumb a[itemprop="item"]
{
  color: var(--breadcrumb-link-color);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  position: relative;
  background-color: rgba(59, 130, 246, 0.1);
}

/* Эффект при наведении на ссылки */
.breadcrumb a[itemprop="item"]:hover
{
  color: var(--breadcrumb-link-hover-color);
  background-color: var(--breadcrumb-link-hover-bg);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Разделители */
.breadcrumb .divider::before
{
  content: var(--breadcrumb-divider);
  color: var(--breadcrumb-divider-color);
  font-weight: 400;
  margin: 0 0.5rem;
}

/* Стандартные хлебные крошки в секции (legacy support) */
.breadcrumb ol
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);

  font-size: var(--font-size-sm);
  list-style: none;
}

.breadcrumb-item
{
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before
{
  content: "/";
  margin: 0 var(--spacing-sm);

  color: var(--color-text-muted);
}

.breadcrumb-item a
{
  position: relative;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius);

  color: var(--color-text-secondary);
  text-decoration: none;

  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);

  transition: all var(--transition-fast);
}

.breadcrumb-item a:hover
{
  color: var(--color-text-inverse);
  text-decoration: none;

  background-color: var(--color-primary);
  border-color: var(--color-primary);

  box-shadow: var(--shadow-sm);
}

.breadcrumb-item.active
{
  color: var(--color-text-muted);
}

/* Варианты хлебных крошек (breadcrumb variants) */
.breadcrumb-arrow
{
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);

  background-color: var(--color-bg-secondary);
}

.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before
{
  content: "→";
  margin: 0 var(--spacing-sm);

  font-weight: 600;
  color: var(--color-primary);
}

.breadcrumb-pills
{
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
  list-style: none;
}

.breadcrumb-pills .breadcrumb-item
{
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.breadcrumb-pills .breadcrumb-item a
{
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
}

.breadcrumb-pills .breadcrumb-item a:hover
{
  color: var(--color-primary);
  background-color: var(--breadcrumb-link-hover-bg);
}

.breadcrumb-pills .breadcrumb-item + .breadcrumb-item::before
{
  content: none;
}

.breadcrumb-pills .breadcrumb-item.active
{
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ТАБЛИЦЫ (TABLES) */

.param-table
{
  width: 100%;
  margin-bottom: var(--spacing-xl);
  border-collapse: collapse;
  border-spacing: 0;

  font-size: var(--font-size-base);
  color: var(--color-text-primary);

  background-color: var(--color-bg-primary);
}

.param-table th,
.param-table td
{
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.param-table th
{
  font-weight: 600;
  color: var(--color-text-primary);

  background-color: var(--color-bg-tertiary);
}

.param-table tbody tr:nth-child(even)
{
  background-color: var(--color-bg-secondary);
}

.param-table tbody tr:hover
{
  background-color: var(--color-bg-accent);
}

.param-table code
{
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 0.25rem;

  font-family: var(--font-family-mono), monospace;
  font-size: 0.875em;
  color: var(--color-primary);

  background-color: rgba(59, 130, 246, 0.1);
}

/* Адаптивная таблица (responsive table) */
.table-responsive
{
  overflow-x: auto;
  border-radius: var(--border-radius);
}

.table-responsive .param-table
{
  min-width: 600px;
}

/* Компактная таблица (compact table) */
.param-table.table-compact th,
.param-table.table-compact td
{
  padding: var(--spacing-sm) var(--spacing-md);

  font-size: var(--font-size-sm);
}

/* СОДЕРЖАНИЕ СТАТЬИ (ARTICLE TABLE OF CONTENTS) */

/* Контейнер для содержания статьи */
.supply
{
  position: relative;
  margin: var(--spacing-xl) 0;
  border: 1px solid var(--supply-border-color);
  border-radius: var(--border-radius);
  background-color: var(--supply-bg);
  box-shadow: var(--shadow);
  transition: all var(--transition-normal);
}

.supply:hover
{
  border-color: var(--color-border-hover);

  box-shadow: var(--shadow-md);
}

/* Скрытый checkbox для управления состоянием */
.supply-toggle
{
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Заголовок содержания (кликабельный) */
.supply-header
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  margin: 0;
  border-radius: var(--border-radius);

  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--supply-header-text-color);

  background-color: var(--header-footer-bg-color);
  background-image: var(--header-footer-bg-image);
  cursor: pointer;
  user-select: none;

  transition: all var(--transition-fast);
}

.supply-header:hover
{
  background-color: rgba(59, 130, 246, 0.05);
}

/* Индикатор состояния (стрелка) */
.supply-indicator
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--supply-indicator-color);
  transition: transform var(--transition-normal);
}

.supply-indicator::before
{
  content: "▼";
  font-size: var(--font-size-base);
  line-height: 1;
}

/* Поворот индикатора при сворачивании */
.supply-toggle:checked + .supply-header .supply-indicator
{
  transform: rotate(-90deg);
}

/* Список содержания */
.supply-content
{
  max-height: 500px;
  overflow: hidden;
  padding: var(--spacing-lg);

  transition: max-height var(--transition-slow), padding var(--transition-slow);
}

/* Состояние сворачивания */
.supply-toggle:checked + .supply-header + .supply-content
{
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Стили самого списка */
.supply ul
{
  margin: 0;
  padding-left: var(--spacing-lg);

  list-style: none;
  counter-reset: supply-counter;
}

.supply ul li
{
  position: relative;
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-xl);

  counter-increment: supply-counter;

  transition: all var(--transition-fast);
}

/* Нумерация элементов */
.supply ul li::before
{
  content: counter(supply-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--supply-number-color);
}

/* Ссылки в содержании */
.supply ul li a
{
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  color: var(--supply-link-color);
  text-decoration: none;
  font-weight: 500;
  background-color: transparent;
  transition: all var(--transition-fast);
}

.supply ul li a:hover
{
  color: var(--supply-link-hover-color);
  background-color: var(--supply-link-hover-bg);
}

/* Вложенные списки */
.supply ul ul
{
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-lg);

  counter-reset: supply-sub-counter;
}

.supply ul ul li
{
  counter-increment: supply-sub-counter;

  font-size: var(--font-size-sm);
}

.supply ul ul li::before
{
  content: counter(supply-counter) "." counter(supply-sub-counter);

  color: var(--supply-sub-number-color);
}

.supply ul ul li a
{
  color: var(--supply-link-color);

  font-weight: 400;
}

.supply ul ul li a:hover
{
  color: var(--supply-link-hover-color);
}

/* Третий уровень вложенности */
.supply ul ul ul
{
  counter-reset: supply-deep-counter;
}

.supply ul ul ul li
{
  counter-increment: supply-deep-counter;

  font-size: var(--font-size-xs);
}

.supply ul ul ul li::before
{
  content: counter(supply-counter) "." counter(supply-sub-counter) "." counter(supply-deep-counter);

  color: var(--supply-sub-number-color);
}

.max-w-full
{
  width: 100%;
}

.max-h-48
{
  height: 48px;
}

/* ДЕМОНСТРАЦИОННЫЕ классы для показа скруглений - только для примеров */
/* Специальные классы для демонстрации (demo classes) */
.demo-shadow-box
{
  border: 1px solid var(--color-border) !important;
}

.demo-border-radius
{
  display: inline-block;
  min-width: 120px;
  margin: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--color-border);

  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;

  background-color: var(--color-bg-tertiary);

  transition: all var(--transition-fast);
}

.demo-border-radius:hover
{
  border-color: var(--color-border-hover);

  background-color: var(--color-bg-accent);
}

/* Демонстрационные варианты скруглений */
.demo-border-radius.demo-rounded-none
{
  border-radius: 0;
}

.demo-border-radius.demo-rounded
{
  border-radius: var(--border-radius);
}

.demo-border-radius.demo-rounded-lg
{
  border-radius: var(--border-radius-lg);
}

.demo-border-radius.demo-rounded-xl
{
  border-radius: var(--border-radius-xl);
}

.demo-border-radius.demo-rounded-full
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border-radius: 50%;
}

/* СТРАНИЦЫ АУТЕНТИФИКАЦИИ (AUTHENTICATION PAGES) */

.page-container
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spacing-md);
  background-color: var(--color-bg-tertiary);
}

.auth-card
{
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.auth-card .card-header
{
  padding: 0;
}

/* Кастомный чекбокс */
.form-check
{
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-check-input
{
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.1em;
  vertical-align: top;
  appearance: none;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.form-check-input:checked
{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: var(--icon-checkbox-checked);
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-check-input:focus
{
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.form-check-label
{
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* Закладки (Tabs) v-standard */

/* Контейнер для вкладок */
.tabs-container
{
  position: relative;
}

/* Скрываем радиокнопки */
.tab-radio
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Панель закладок */
.tabs
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: var(--color-bg-secondary);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}

/* Элемент закладки */
.tab-item
{
  padding: var(--spacing-md);
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: var(--font-size-base);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
  text-align: center;
  text-decoration: none;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}

/* Состояние при наведении */
.tab-item:hover
{
  color: var(--color-text-primary);
  background-color: var(--color-bg-accent);
}

/* Отключённая закладка */
.tab-item:disabled
{
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Активная закладка по умолчанию (только при загрузке) */
.tabs-container:not(:has(.tab-radio:checked)) .tab-item.active
{
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: var(--color-bg-primary);
}

/* Активная закладка при клике (через :checked) */
.tabs-container .tab-radio:nth-child(1):checked ~ .tabs label:nth-of-type(1),
.tabs-container .tab-radio:nth-child(2):checked ~ .tabs label:nth-of-type(2),
.tabs-container .tab-radio:nth-child(3):checked ~ .tabs label:nth-of-type(3),
.tabs-container .tab-radio:nth-child(4):checked ~ .tabs label:nth-of-type(4),
.tabs-container .tab-radio:nth-child(5):checked ~ .tabs label:nth-of-type(5),
.tabs-container .tab-radio:nth-child(6):checked ~ .tabs label:nth-of-type(6),
.tabs-container .tab-radio:nth-child(7):checked ~ .tabs label:nth-of-type(7),
.tabs-container .tab-radio:nth-child(8):checked ~ .tabs label:nth-of-type(8),
.tabs-container .tab-radio:nth-child(9):checked ~ .tabs label:nth-of-type(9),
.tabs-container .tab-radio:nth-child(10):checked ~ .tabs label:nth-of-type(10)
{
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: var(--color-bg-primary);
}

/* Контейнер для контента вкладок */
.tabs-content
{
  position: relative;
}

/* Скрываем весь контент по умолчанию */
.tab-pane
{
  display: none;
}

/* Показываем активный контент (через .active или :checked) */
.tabs-container:not(:has(.tab-radio:checked)) .tab-pane.active,
.tabs-container .tab-radio:nth-child(1):checked ~ .tabs-content .tab-pane:nth-child(1),
.tabs-container .tab-radio:nth-child(2):checked ~ .tabs-content .tab-pane:nth-child(2),
.tabs-container .tab-radio:nth-child(3):checked ~ .tabs-content .tab-pane:nth-child(3),
.tabs-container .tab-radio:nth-child(4):checked ~ .tabs-content .tab-pane:nth-child(4),
.tabs-container .tab-radio:nth-child(5):checked ~ .tabs-content .tab-pane:nth-child(5),
.tabs-container .tab-radio:nth-child(6):checked ~ .tabs-content .tab-pane:nth-child(6),
.tabs-container .tab-radio:nth-child(7):checked ~ .tabs-content .tab-pane:nth-child(7),
.tabs-container .tab-radio:nth-child(8):checked ~ .tabs-content .tab-pane:nth-child(8),
.tabs-container .tab-radio:nth-child(9):checked ~ .tabs-content .tab-pane:nth-child(9),
.tabs-container .tab-radio:nth-child(10):checked ~ .tabs-content .tab-pane:nth-child(10)
{
  display: block;
  animation: contentFadeIn 0.4s ease-in-out;
}

/* Модификатор для закладок на всю ширину */
.tabs-full-width
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0;
  width: 100%;
}

.tabs-full-width .tab-item
{
  text-align: center;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Анимация для контента вкладок */
@keyframes contentFadeIn
{
  from
  {
    opacity: 0;
    transform: translateY(10px);
  }
  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-info-system
{
  position: fixed;
  margin: 0;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  width: 100%;
  display: none;
}

/* HEADER MENU (DROPDOWN) */

.header-menu-container
{
  /* position: relative; */
  display: inline-block;
}

.header-menu-toggle
{
  display: none;
}

.header-menu-dropdown
{
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;

  min-width: 300px;
  margin-top: var(--spacing-sm);
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);

  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-lg);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);

  transition: all var(--transition-fast);
}

.header-menu-header
{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xs);
}

.header-menu-title
{
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);

  margin: 0 0 10px;
  padding:7px 15px;
  border-radius:7px;
  text-align:left;
  background-color:var(--header-footer-border-color);
  text-transform:uppercase;
  display:inline-block;
}

.header-menu-close
{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  background-color: rgb(240, 240, 240);
  border-radius: 5px;
  padding: 5px;
}

.header-menu-close:hover
{
  color: var(--color-danger);
}

.header-menu-toggle:checked ~ .header-menu-dropdown
{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-menu-item
{
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);

  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-decoration: none;

  transition: background-color var(--transition-fast);
}

.header-menu-item:hover
{
  color: var(--color-primary);
  background-color: var(--color-bg-tertiary);
}

.header-menu-divider
{
  height: 1px;
  margin: var(--spacing-xs) 0;

  background-color: var(--color-border);
}

/* --- FIX: MEDIA QUERIES (ADAPTIVE) */

/* Mobile devices (300px+) */
@media (min-width: 300px)
{
}

/* Tablets (768px+) */
@media (min-width: 768px)
{
}

/* Main Container / Laptops (1024px+) */
@media (min-width: 992px)
{
}

/* Standard Monitors / Vertical (full) */
@media (min-width: 1200px)
{
}
/* --- Assets */
:root
{
  /* SVG Icons */
  /* <svg viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg> */
  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M348.25 21.75c-15.625-15.625-41-15.625-56.625 0l-200 200c-15.625 15.625-15.625 41 0 56.625s41 15.625 56.625 0L280 146.625 280 610c0 22.125 17.875 40 40 40s40-17.875 40-40l0-463.375 131.75 131.75c15.625 15.625 41 15.625 56.625 0s15.625-41 0-56.625l-200-200z'/%3E%3C/svg%3E");

  /* <svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg> */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M291.75 628.25c15.625 15.625 41 15.625 56.625 0l200-200c15.625-15.625 15.625-41 0-56.625s-41-15.625-56.625 0L360 503.375 360 40c0-22.125-17.875-40-40-40s-40 17.875-40 40l0 463.375-131.75-131.75c-15.625-15.625-41-15.625-56.625 0s-15.625 41 0 56.625l200 200z'/%3E%3C/svg%3E");

  --icon-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='96' d='M192 320l96 96l192-192'/%3E%3C/svg%3E");

  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M415.9 274.5C428.1 271.2 440.9 277 446.4 288.3L465 325.9C475.3 327.3 485.4 330.1 494.9 334L529.9 310.7C540.4 303.7 554.3 305.1 563.2 314L582.4 333.2C591.3 342.1 592.7 356.1 585.7 366.5L562.4 401.4C564.3 406.1 566 411 567.4 416.1C568.8 421.2 569.7 426.2 570.4 431.3L608.1 449.9C619.4 455.5 625.2 468.3 621.9 480.4L614.9 506.6C611.6 518.7 600.3 526.9 587.7 526.1L545.7 523.4C539.4 531.5 532.1 539 523.8 545.4L526.5 587.3C527.3 599.9 519.1 611.3 507 614.5L480.8 621.5C468.6 624.8 455.9 619 450.3 607.7L431.7 570.1C421.4 568.7 411.3 565.9 401.8 562L366.8 585.3C356.3 592.3 342.4 590.9 333.5 582L314.3 562.8C305.4 553.9 304 540 311 529.5L334.3 494.5C332.4 489.8 330.7 484.9 329.3 479.8C327.9 474.7 327 469.6 326.3 464.6L288.6 446C277.3 440.4 271.6 427.6 274.8 415.5L281.8 389.3C285.1 377.2 296.4 369 309 369.8L350.9 372.5C357.2 364.4 364.5 356.9 372.8 350.5L370.1 308.7C369.3 296.1 377.5 284.7 389.6 281.5L415.8 274.5zM448.4 404C424.1 404 404.4 423.7 404.5 448.1C404.5 472.4 424.2 492 448.5 492C472.8 492 492.5 472.3 492.5 448C492.4 423.6 472.7 404 448.4 404zM224.9 18.5L251.1 25.5C263.2 28.8 271.4 40.2 270.6 52.7L267.9 94.5C276.2 100.9 283.5 108.3 289.8 116.5L331.8 113.8C344.3 113 355.7 121.2 359 133.3L366 159.5C369.2 171.6 363.5 184.4 352.2 190L314.5 208.6C313.8 213.7 312.8 218.8 311.5 223.8C310.2 228.8 308.4 233.8 306.5 238.5L329.8 273.5C336.8 284 335.4 297.9 326.5 306.8L307.3 326C298.4 334.9 284.5 336.3 274 329.3L239 306C229.5 309.9 219.4 312.7 209.1 314.1L190.5 351.7C184.9 363 172.1 368.7 160 365.5L133.8 358.5C121.6 355.2 113.5 343.8 114.3 331.3L117 289.4C108.7 283 101.4 275.6 95.1 267.4L53.1 270.1C40.6 270.9 29.2 262.7 25.9 250.6L18.9 224.4C15.7 212.3 21.4 199.5 32.7 193.9L70.4 175.3C71.1 170.2 72.1 165.2 73.4 160.1C74.8 155 76.4 150.1 78.4 145.4L55.1 110.5C48.1 100 49.5 86.1 58.4 77.2L77.6 58C86.5 49.1 100.4 47.7 110.9 54.7L145.9 78C155.4 74.1 165.5 71.3 175.8 69.9L194.4 32.3C200 21 212.7 15.3 224.9 18.5zM192.4 148C168.1 148 148.4 167.7 148.4 192C148.4 216.3 168.1 236 192.4 236C216.7 236 236.4 216.3 236.4 192C236.4 167.7 216.7 148 192.4 148z'/%3E%3C/svg%3E");

  --icon-notifications: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M60 80c-33.125 0-60 26.875-60 60 0 18.875 8.875 36.625 24 48l260 195c21.375 16 50.625 16 72 0l260-195c15.125-11.375 24-29.125 24-48 0-33.125-26.875-60-60-60L60 80zM0 245L0 480c0 44.125 35.875 80 80 80l480 0c44.125 0 80-35.875 80-80l0-235-248 186c-42.625 32-101.375 32-144 0L0 245z'/%3E%3C/svg%3E");

  --icon-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M320 310a150 150 0 1 0 0-300 150 150 0 1 0 0 300zm-37.125 70C159.75 380 60 479.75 60 602.875 60 623.375 76.625 640 97.125 640l445.75 0c20.5 0 37.125-16.625 37.125-37.125 0-123.125-99.75-222.875-222.875-222.875l-74.25 0z'/%3E%3C/svg%3E");

  --icon-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='currentColor' stroke-width='50' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M570 70L295 345'/%3E%3Cpath d='M570 70L395 570L295 345L70 245L570 70z'/%3E%3C/svg%3E");

  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M463.4 166.6C424.322 130.01 373.61 109.953 319.81 110c-96.822.085-180.41 66.473-203.489 158.563-1.68 6.704-7.653 11.438-14.564 11.438H30.129c-9.373 0-16.493-8.509-14.759-17.72C42.416 118.655 168.516 10 320 10c83.06 0 158.489 32.67 214.144 85.856L578.788 51.213C597.686 32.314 630 45.699 630 72.426V240c0 16.569-13.431 30-30 30H432.426c-26.728 0-40.113-32.314-21.214-51.214l52.188-52.186zM40 370h167.574c26.728 0 40.113 32.314 21.214 51.214l-52.188 52.188c39.078 36.591 89.794 56.649 143.595 56.6 96.772-.088 180.394-66.43 203.484-158.561 1.68-6.704 7.653-11.438 14.564-11.438h71.63c9.373 0 16.493 8.509 14.759 17.72C597.584 521.345 471.484 630 320 630c-83.06 0-158.489-32.67-214.144-85.856L61.213 588.788C42.314 607.686 10 594.301 10 567.574V400c0-16.569 13.431-30 30-30z'/%3E%3C/svg%3E");

  --icon-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M 200 120 c 22.13 0 40 -17.88 40 -40 s -17.88 -40 -40 -40 L 120 40 C 53.75 40 0 93.75 0 160 L 0 480 c 0 66.25 53.75 120 120 120 l 80 0 c 22.13 0 40 -17.88 40 -40 s -17.88 -40 -40 -40 l -80 0 c -22.13 0 -40 -17.88 -40 -40 l 0 -320 c 0 -22.13 17.88 -40 40 -40 l 80 0 z M 628.25 348.25 c 15.63 -15.63 15.63 -41 0 -56.63 l -160 -160 c -15.63 -15.63 -41 -15.63 -56.63 0 s -15.63 41 0 56.63 L 503.38 280 L 240 280 c -22.13 0 -40 17.88 -40 40 s 17.88 40 40 40 l 263.38 0 l -91.75 91.75 c -15.63 15.63 -15.63 41 0 56.63 s 41 15.63 56.63 0 l 160 -160 z'/%3E%3C/svg%3E");

  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M96 160C96 142.3 110.3 128 128 128l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L128 192C110.3 192 96 177.7 96 160zM96 320c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L128 352c-17.7 0-32-14.3-32-32zM544 480c0 17.7-14.3 32-32 32L128 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");

  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M148.9 91.8c-15.6-15.6-41-15.6-56.6 0s-15.6 41 0 56.6L264 320 92.4 491.8c-15.6 15.6-15.6 41 0 56.6s41 15.6 56.6 0L320.6 376.6 492.4 548.3c15.6 15.6 41 15.6 56.6 0s15.6-41 0-56.6L377.3 320 548.9 148.3c15.6-15.6 15.6-41 0-56.6s-41-15.6-56.6 0L320.6 263.4 148.9 91.8z'/%3E%3C/svg%3E");

  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M 80 500 l 480 0 c 11 0 20 -9 20 -20 l 0 -300 c 0 -11 -9 -20 -20 -20 l -187 0 c -22 0 -43 -7 -60 -20 L 265 104 c -3.5 -2.6 -7.6 -4 -12 -4 L 80 100 c -11 0 -20 9 -20 20 l 0 360 c 0 11 9 20 20 20 z m 480 60 L 80 560 c -44 0 -80 -36 -80 -80 L 0 120 c 0 -44 36 -80 80 -80 l 173 0 c 17 0 34 6 48 16 l 48 36 c 7 5 15 8 24 8 L 560 100 c 44 0 80 36 80 80 l 0 300 c 0 44 -36 80 -80 80 z'/%3E%3C/svg%3E");

  --icon-images: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M128 160c0-35.3 28.7-64 64-64l320 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-320 0c-35.3 0-64-28.7-64-64L128 160zM56 192c13.3 0 24 10.7 24 24l0 296c0 8.8 7.2 16 16 16l360 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L96 576c-35.3 0-64-28.7-64-64L32 216c0-13.3 10.7-24 24-24zm168 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm196.5 11.5c-4.4-7.1-12.1-11.5-20.5-11.5s-16.1 4.4-20.5 11.5l-56.3 92.1-24.5-30.6c-4.6-5.7-11.4-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4S206.8 416 216 416l272 0c8.7 0 16.7-4.7 20.9-12.3s4.1-16.8-.5-24.3l-88-144z'/%3E%3C/svg%3E");

  --icon-upload-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='currentColor' stroke-width='37.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M420 420l-100-100l-100 100M320 320v225'/%3E%3Cpath d='M529.75 479.75A125 125 0 0 0 470 245h-31.5A200 200 0 1 0 95 427.5'/%3E%3Cpath d='M420 420l-100-100l-100 100'/%3E%3C/svg%3E");

  --icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M 528 320 C 528 205 435 112 320 112 C 205 112 112 205 112 320 C 112 435 205 528 320 528 C 435 528 528 435 528 320 z M 64 320 C 64 179 179 64 320 64 C 461 64 576 179 576 320 C 576 461 461 576 320 576 C 179 576 64 461 64 320 z M 320 240 C 302 240 288 254 288 272 C 288 285 277 296 264 296 C 251 296 240 285 240 272 C 240 228 276 192 320 192 C 364 192 400 228 400 272 C 400 319 364 339 344 346 L 344 350 C 344 364 333 374 320 374 C 307 374 296 364 296 350 L 296 342 C 296 322 311 307 326 302 C 332 300 339 296 344 292 C 349 288 352 282 352 272 C 352 254 338 240 320 240 z M 288 432 C 288 414 302 400 320 400 C 338 400 352 414 352 432 C 352 450 338 464 320 464 C 302 464 288 450 288 432 z'/%3E%3C/svg%3E");

  --icon-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M120 100c-11 0-20 9-20 20l0 400c0 11 9 20 20 20l400 0c11 0 20-9 20-20l0-400c0-11-9-20-20-20L120 100zM40 120C40 75.9 75.9 40 120 40l400 0c44.1 0 80 35.9 80 80l0 400c0 44.1-35.9 80-80 80L120 600c-44.1 0-80-35.9-80-80L40 120zM290 430l0-80-80 0c-16.6 0-30-13.4-30-30s13.4-30 30-30l80 0 0-80c0-16.6 13.4-30 30-30s30 13.4 30 30l0 80 80 0c16.6 0 30 13.4 30 30s-13.4 30-30 30l-80 0 0 80c0 16.6-13.4 30-30 30s-30-13.4-30-30z'/%3E%3C/svg%3E");

  --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M535.6 85.7C513.7 63.8 478.3 63.8 456.4 85.7L432 110.1L529.9 208L554.3 183.6C576.2 161.7 576.2 126.3 554.3 104.4L535.6 85.7zM236.4 305.7C230.3 311.8 225.6 319.3 222.9 327.6L193.3 416.4C190.4 425 192.7 434.5 199.1 441C205.5 447.5 215 449.7 223.7 446.8L312.5 417.2C320.7 414.5 328.2 409.8 334.4 403.7L496 241.9L398.1 144L236.4 305.7zM160 128C107 128 64 171 64 224L64 480C64 533 107 576 160 576L416 576C469 576 512 533 512 480L512 384C512 366.3 497.7 352 480 352C462.3 352 448 366.3 448 384L448 480C448 497.7 433.7 512 416 512L160 512C142.3 512 128 497.7 128 480L128 224C128 206.3 142.3 192 160 192L256 192C273.7 192 288 177.7 288 160C288 142.3 273.7 128 256 128L160 128z'/%3E%3C/svg%3E");

  --icon-delete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M232.7 77.9C237.1 64.8 249.3 56 263.1 56L377 56C390.8 56 403 64.8 407.4 77.9L416 104L512 104C529.7 104 544 118.3 544 136C544 153.7 529.7 168 512 168L128 168C110.3 168 96 153.7 96 136C96 118.3 110.3 104 128 104L224 104L232.7 77.9zM128 216L512 216L512 520C512 555.3 483.3 584 448 584L192 584C156.7 584 128 555.3 128 520L128 216zM216 280C202.7 280 192 290.7 192 304L192 496C192 509.3 202.7 520 216 520C229.3 520 240 509.3 240 496L240 304C240 290.7 229.3 280 216 280zM320 280C306.7 280 296 290.7 296 304L296 496C296 509.3 306.7 520 320 520C333.3 520 344 509.3 344 496L344 304C344 290.7 333.3 280 320 280zM424 280C410.7 280 400 290.7 400 304L400 496C400 509.3 410.7 520 424 520C437.3 520 448 509.3 448 496L448 304C448 290.7 437.3 280 424 280z'/%3E%3C/svg%3E");

  --icon-reports: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M360 170V0H110C93.375 0 80 13.375 80 30v580c0 16.625 13.375 30 30 30h420c16.625 0 30-13.375 30-30V200H390c-16.5 0-30-13.5-30-30zm200-17.625v7.625H400V0h7.625c8 0 15.625 3.125 21.25 8.75l122.375 122.5c5.625 5.625 8.75 13.25 8.75 21.25zM160 280h320v60H160v-60zm0 100h320v60H160v-60zm0 100h320v60H160v-60z'/%3E%3C/svg%3E");

  --icon-ellipsis-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M40 320a70 70 0 1 1 140 0 70 70 0 1 1 -140 0zm210 0a70 70 0 1 1 140 0 70 70 0 1 1 -140 0zm210 0a70 70 0 1 1 140 0 70 70 0 1 1 -140 0z'/%3E%3C/svg%3E");

  --icon-ellipsis-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='currentColor'%3E%3Cpath d='M 250 110 a 70 70 0 1 1 140 0 70 70 0 1 1 -140 0 M 250 320 a 70 70 0 1 1 140 0 70 70 0 1 1 -140 0 M 250 530 a 70 70 0 1 1 140 0 70 70 0 1 1 -140 0'/%3E%3C/svg%3E");

  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M 360 40 c 0 -22.125 -17.875 -40 -40 -40 s -40 17.875 -40 40 l 0 263.375 -51.75 -51.75 c -15.625 -15.625 -41 -15.625 -56.625 0 s -15.625 41 0 56.625 l 120 120 c 15.625 15.625 41 15.625 56.625 0 l 120 -120 c 15.625 -15.625 15.625 -41 0 -56.625 s -41 -15.625 -56.625 0 L 360 303.375 360 40 z M 120 400 c -44.125 0 -80 35.875 -80 80 l 0 40 c 0 44.125 35.875 80 80 80 l 400 0 c 44.125 0 80 -35.875 80 -80 l 0 -40 c 0 -44.125 -35.875 -80 -80 -80 l -58.625 0 -70.75 70.75 c -39 39 -102.375 39 -141.375 0 L 178.625 400 120 400 z m 380 70 a 30 30 0 1 1 0 60 30 30 0 1 1 0 -60 z'/%3E%3C/svg%3E");

  --icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M 320 576 C 178.6 576 64 461.4 64 320 C 64 178.6 178.6 64 320 64 C 461.4 64 576 178.6 576 320 C 576 461.4 461.4 576 320 576 z M 438 209.7 C 427.3 201.9 412.3 204.3 404.5 215 L 285.1 379.2 L 233 327.1 C 223.6 317.7 208.4 317.7 199.1 327.1 C 189.8 336.5 189.7 351.7 199.1 361 L 271.1 433 C 276.1 438 282.9 440.5 289.9 440 C 296.9 439.5 303.3 435.9 307.4 430.2 L 443.3 243.2 C 451.1 232.5 448.7 217.5 438 209.7 z'/%3E%3C/svg%3E");

  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M 320 64 C 461.4 64 576 178.6 576 320 C 576 461.4 461.4 576 320 576 C 178.6 576 64 461.4 64 320 C 64 178.6 178.6 64 320 64 z M 296 184 L 296 320 C 296 328 300 335.5 306.7 340 L 402.7 404 C 413.7 411.4 428.6 408.4 436 397.3 C 443.4 386.2 440.4 371.4 429.3 364 L 344 307.2 L 344 184 C 344 170.7 333.3 160 320 160 C 306.7 160 296 170.7 296 184 z'/%3E%3C/svg%3E");

  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Icons - используется при прямом SVG в HTML (убирает `background-color: currentColor;`, но зато корректно отображаются SVG иконки.) */
.icon-i,
.icon
{
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Icons */
.icon
{
  background-color: currentColor;
}

.drop-zone-icon .icon
{
  width: 48px;
  height: 48px;
}

/* Иконки общие */
.icon-chevron-up
{
  mask-image: var(--icon-chevron-up);
}

.icon-chevron-down
{
  mask-image: var(--icon-chevron-down);
}

.icon-checkbox-checked
{
  mask-image: var(--icon-checkbox-checked);
}

.icon-settings
{
  mask-image: var(--icon-settings);
}

.icon-notifications
{
  mask-image: var(--icon-notifications);
}

.icon-profile
{
  mask-image: var(--icon-profile);
}

.icon-telegram
{
  mask-image: var(--icon-telegram);
}

.icon-refresh
{
  mask-image: var(--icon-refresh);
}

.icon-exit
{
  mask-image: var(--icon-exit);
}

.icon-menu
{
  mask-image: var(--icon-menu);
}

.icon-close
{
  mask-image: var(--icon-close);
}

.icon-add
{
  mask-image: var(--icon-add);
}

.icon-edit
{
  mask-image: var(--icon-edit);
}

.icon-delete
{
  mask-image: var(--icon-delete);
}

.icon-reports
{
  mask-image: var(--icon-reports);
}

.icon-help
{
  mask-image: var(--icon-help);
}

.icon-folder
{
  mask-image: var(--icon-folder);
}

.icon-images
{
  mask-image: var(--icon-images);
}

.icon-upload-cloud
{
  mask-image: var(--icon-upload-cloud);
}

.icon-ellipsis-horizontal
{
  mask-image: var(--icon-ellipsis-horizontal);
}

.icon-ellipsis-vertical
{
  mask-image: var(--icon-ellipsis-vertical);
}

.icon-download
{
  mask-image: var(--icon-download);
}

.icon-circle-check
{
  mask-image: var(--icon-circle-check);
}

.icon-clock
{
  mask-image: var(--icon-clock);
}

.icon-info
{
  mask-image: var(--icon-info);
}