@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-02
 *
 * @file D:/controls-psr/sdqa.ru/cdn.sdqa.ru/css/main.css
 * @link https://cdn.telega.fm/css/main.css
 *
 * @remarks
 * - Стили для главной страницы с лентой постов
 * - Адаптивный дизайн для мобильных устройств
 * =============================================================================
 */

/* Определение цветовых переменных (в темах) */
/* ОСНОВНЫЕ ПЕРЕМЕННЫЕ ТЕМЫ */
:root[data-theme="telega"]
{
  /* Базовые цвета (base colors) */
  --color-primary: rgb(2, 124, 100);
  --color-primary-hover: rgb(2, 107, 86);
  --color-primary-dark: rgb(1, 90, 71);
  --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(240, 240, 240);
  --color-bg-tertiary: rgb(248, 248, 248);
  --color-bg-accent: rgb(229, 221, 213);

  /* Цвета текста (text colors) */
  --color-text-primary: rgb(0, 0, 0);
  --color-text-secondary: rgb(71, 85, 105);
  --color-text-muted: rgb(160, 160, 160);
  --color-text-inverse: rgb(255, 255, 255);

  /* Цвета границ (border colors) */
  --color-border: rgb(224, 224, 224);
  --color-border-hover: rgb(2, 124, 100);

  /* Цвета Header & Footer */
  --header-footer-bg-color: rgb(240, 240, 240);
  --header-footer-bg-image: none;
  --header-footer-border-color: rgb(224, 224, 224);

  /* Main background */
  --color-bg-main: rgb(242, 243, 247);

  /* Card background */
  --color-bg-card: rgb(255, 255, 255);

  /* Цвета для Header компонентов */
  --color-bg-header: rgb(255, 255, 255);
  --color-bg-feed: rgb(255, 255, 255);
  --color-bg-date: rgb(229, 221, 213);
  --text-header: rgb(0, 0, 0);
  --text-meta: rgb(100, 116, 139);
  --text-channel: rgb(2, 124, 100);
  --text-post: rgb(0, 0, 0);
  --text-link: rgb(5, 103, 250);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

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

  /* Хлебные крошки (breadcrumbs) */
  --breadcrumb-bg-start: rgb(248, 248, 248);
  --breadcrumb-bg-end: rgb(224, 224, 224);
  --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(2, 124, 100);
  --breadcrumb-link-hover-color: rgb(2, 107, 86);
  --breadcrumb-link-hover-bg: rgba(2, 124, 100, 0.1);
  --breadcrumb-divider-color: rgb(100, 116, 139);

  /* Цвета уведомлений (Alert Colors) */
  --alert-blue-bg: rgb(224, 242, 254);
  --alert-blue-border: rgb(125, 211, 252);
  --alert-blue-text: rgb(12, 74, 110);
  --alert-yellow-bg: rgb(254, 249, 195);
  --alert-yellow-border: rgb(253, 224, 71);
  --alert-yellow-text: rgb(133, 77, 14);
  --alert-green-bg: rgb(220, 252, 231);
  --alert-green-border: rgb(134, 239, 172);
  --alert-green-text: rgb(22, 101, 52);
  --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);
  --alert-red-bg: rgb(254, 226, 226);
  --alert-red-border: rgb(252, 165, 165);
  --alert-red-text: rgb(153, 27, 27);

  /* Содержание статьи (supply) */
  --supply-bg: rgb(248, 248, 248);
  --supply-border-color: rgb(224, 224, 224);
  --supply-header-text-color: rgb(0, 0, 0);
  --supply-indicator-color: rgb(2, 124, 100);
  --supply-link-color: rgb(71, 85, 105);
  --supply-link-hover-color: rgb(2, 124, 100);
  --supply-link-hover-bg: rgba(2, 124, 100, 0.1);
  --supply-number-color: rgb(2, 124, 100);
  --supply-sub-number-color: rgb(100, 116, 139);
}

/* КОМПОНЕНТЫ */

/* Уведомления (Alerts) */
:root[data-theme="telega"] .alert-success
{
  color: rgb(22, 101, 52);
  background-color: rgb(220, 252, 231);
  border-color: rgb(134, 239, 172);
}

:root[data-theme="telega"] .alert-warning
{
  color: rgb(133, 77, 14);
  background-color: rgb(254, 249, 195);
  border-color: rgb(253, 224, 71);
}

:root[data-theme="telega"] .alert-danger
{
  color: rgb(153, 27, 27);
  background-color: rgb(254, 226, 226);
  border-color: rgb(252, 165, 165);
}

:root[data-theme="telega"] .alert-info
{
  color: rgb(12, 74, 110);
  background-color: rgb(224, 242, 254);
  border-color: rgb(125, 211, 252);
}

/* Оверлей загрузки (Loading Overlay) */
:root[data-theme="telega"] .loading-overlay
{
  background-color: rgba(255, 255, 255, 0.8);
}

/* Кнопки прокрутки (Scroll Controls) */
:root[data-theme="telega"] .scroll-control
{
  background-color: rgba(240, 240, 240, 0.9);
}

:root[data-theme="telega"] .scroll-control:hover
{
  background-color: rgb(240, 240, 240);
}

:root[data-theme="telega"] .scroll-btn:hover
{
  background-color: rgb(229, 221, 213);
}

/* Элементы форм (Form Controls) */
:root[data-theme="telega"] .form-select
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="telega"] .form-input:focus,
:root[data-theme="telega"] .form-textarea:focus,
:root[data-theme="telega"] .form-select:focus,
:root[data-theme="telega"] .form-input.focus
{
  border-color: rgb(2, 124, 100);
  box-shadow: 0 0 0 2px rgba(2, 124, 100, 0.25);
}

/* Фокус кнопок (Button Focus) */
:root[data-theme="telega"] .btn:focus
{
  box-shadow: 0 0 0 2px rgba(2, 124, 100, 0.25);
}

/* Модальное окно (Modal) */
:root[data-theme="telega"] .modal
{
  background-color: rgba(0, 0, 0, 0.5);
}

/* Зона для перетаскивания файлов (Drop Zone) */
:root[data-theme="telega"] .drop-zone:hover
{
  border-color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .drop-zone.dragover
{
  border-color: rgb(2, 124, 100);
  background-color: rgba(2, 124, 100, 0.05);
  color: rgb(2, 124, 100);
}

/* Переключатель тем (Theme Switcher) */
:root[data-theme="telega"] .theme-option:hover
{
  background-color: rgb(229, 221, 213);
}

:root[data-theme="telega"] .theme-option.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

:root[data-theme="telega"] .theme-switcher-modal .theme-option:hover
{
  background-color: rgb(229, 221, 213);
}

:root[data-theme="telega"] .theme-switcher-modal .theme-option.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

/* Спиннер (Spinner) */
:root[data-theme="telega"] .spinner
{
  border-color: rgb(224, 224, 224);
  border-top-color: rgb(2, 124, 100);
}

/* Кнопки в шапке (Header Buttons) */
:root[data-theme="telega"] .header-btn:hover
{
  background-color: rgba(2, 124, 100, 0.1);
}

/* Элементы карточек (Card Elements) */
:root[data-theme="telega"] .card-header,
:root[data-theme="telega"] .card-footer
{
  background-color: rgb(248, 248, 248);
  background-image: none;
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .card-header
{
  border-bottom-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .card-footer
{
  border-top-color: rgb(224, 224, 224);
}

/* Элементы модального окна (Modal Elements) */
:root[data-theme="telega"] .modal-header,
:root[data-theme="telega"] .modal-footer
{
  background-color: rgb(240, 240, 240);
  background-image: none;
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .modal-header
{
  border-bottom-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .modal-footer
{
  border-top-color: rgb(224, 224, 224);
}

/* Хлебные крошки (Breadcrumbs) */
:root[data-theme="telega"] .breadcrumb-item a
{
  color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .breadcrumb-item a:hover
{
  color: rgb(2, 107, 86);
}

:root[data-theme="telega"] .breadcrumb-item.active
{
  color: rgb(160, 160, 160);
}

:root[data-theme="telega"] .breadcrumb-arrow .breadcrumb-item:not(:last-child)::after
{
  color: rgb(2, 124, 100);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item a
{
  background-color: rgb(248, 248, 248);
  color: rgb(71, 85, 105);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item a:hover
{
  background-color: rgba(2, 124, 100, 0.1);
}

:root[data-theme="telega"] .breadcrumb-pills .breadcrumb-item.active
{
  background-color: rgb(2, 124, 100);
  color: rgb(255, 255, 255);
}

/* Таблицы (Tables) */
:root[data-theme="telega"] .param-table
{
  background-color: rgb(255, 255, 255);
  border-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .param-table th
{
  background-color: rgb(248, 248, 248);
  color: rgb(0, 0, 0);
  border-color: rgb(224, 224, 224);
}

:root[data-theme="telega"] .param-table td
{
  border-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

:root[data-theme="telega"] .param-table tbody tr:hover
{
  background-color: rgb(240, 240, 240);
}

:root[data-theme="telega"] .param-table tbody tr:nth-child(even)
{
  background-color: rgb(248, 248, 248);
}

/* Эффект мерцания (Shimmer Effect) */
:root[data-theme="telega"] .shimmer
{
  background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

/* Основные стили страницы */
body
{
  padding-top: 100px !important;

  font-family: "Inter", sans-serif;

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

/* Header стили */
.header
{
  position: sticky;
  top: 0;
  z-index: 10;

  padding: 12px 0 0 0;

  color: var(--text-header);

  background-color: var(--color-bg-header);
  box-shadow: var(--shadow);
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}

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

.header-left
{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo
{
  flex-shrink: 0;
  width: 32px;
  height: 32px;

  background-repeat: no-repeat;
  background-size: contain;
}

.header-title
{
  display: flex;
  flex-direction: column;

  text-decoration: none;
  color: var(--text-header);
}

.header-title:hover
{
  opacity: 0.8;
}

.header-title-main
{
  font-size: 20px;
  font-weight: 700;
  color: var(--text-header);
}

.header-subtitle
{
  display: block;
  margin-top: -2px;

  font-size: 12px;
  color: var(--text-meta);
}

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

.header-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background-color: transparent;

  transition: background-color 0.2s ease-in-out;
}

.header-btn:hover
{
  background-color: rgba(0, 0, 0, 0.1);
}

/* Иконки для кнопок в header (из styles-assets.css) */
.header-btn .icon
{
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Иконка настроек */
.header-btn[data-modal-target="modal-settings"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.61l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.49 1a9.6 9.6 0 0 0-1.65-.94L14.05 2.5a.5.5 0 0 0-.5-.5h-3.8c-.28 0-.5.22-.5.5l-.34 2.67a9.6 9.6 0 0 0-1.65.94l-2.49-1a.5.5 0 0 0-.61.22l-1.92 3.32a.5.5 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.61l1.92 3.32a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.65.94l.34 2.67a.5.5 0 0 0 .5.5h3.8c.28 0 .5-.22.5.5l.34-2.67c.57-.2 1.13-.54 1.65-.94l2.49 1a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.61l-2.03-1.58zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка уведомлений */
.header-btn[data-modal-target="modal-notifications"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка помощи */
.header-btn[data-modal-target="modal-help"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка профиля */
.header-btn[data-modal-target="modal-profile"] .icon
{
  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Иконка ленты */
.icon-lenta
{
  background-color: var(--color-primary);
  mask-image: var(--icon-lenta);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Основная область контента */
main
{
  min-height: calc(100vh - 140px);
  padding: 16px 0;
  background-color: var(--color-bg-main);
}

/* Лента постов */
.feed-container
{
  max-width: 800px;
  margin: 0 auto;
}

/* Разделитель дат */
.date-separator
{
  width: fit-content;
  margin: 16px auto;
  padding: 8px 16px;
  border-radius: 8px;

  font-size: 12px;
  font-weight: 600;
  color: var(--text-meta);
  text-align: center;

  background-color: var(--color-bg-date);
  box-shadow: var(--shadow);
}

/* Обертка ссылки на пост */
.post-link-wrapper
{
  display: block;

  text-decoration: none;
  color: inherit;
}

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

/* Пост карточка */
.post-card, .post-card-full
{
  /* Блочная модель */
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 390px;
  max-height: 660px;
  margin: 0 auto 12px auto;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;

  /* Визуальное оформление */
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow);
  opacity: 1;

  /* Анимации */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  animation: fadeIn 0.3s ease-out;
}
.post-card-full
{
  max-height: none;
}
.post-media-link
{
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 360px;
}

.post-card:hover
{
  /* border-color: var(--color-border-hover); */
}

/* Шапка поста с названием канала и кнопкой */
.post-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Аватар канала */
.post-avatar
{
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Информация шапки (Заголовок + Дата) */
.post-header-info
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
  gap: 2px;
}

/* Заголовок канала в посте */
.post-channel
{
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-header);
  text-decoration: none;
}

.post-channel a
{
  color: inherit;
  text-decoration: none;
}

/* Дата публикации поста */
.post-date
{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(102, 109, 127);
}

/* Кнопка опций (три точки) */
.post-options
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--text-muted);
}

/* Изображение в посте */
.post-image
{
  width: 100%;
  margin-bottom: 8px;
  border-radius: 8px;
}

/* Текст поста */
.post-text,
.post-text-full,
.post-text-collapsed
{
  margin-bottom: 8px;

  /* Цвет текста */
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-post);

  /* Перенос длинных слов */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Ссылки в тексте поста */
.post-text a,
.post-text-full a,
.post-text-collapsed a
{
  text-decoration: none;
  color: var(--text-link);
}

/* Ссылка-обертка текста поста */
.post-text .post-text-link,
.post-text-collapsed .post-text-link
{
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.3px;

  text-decoration: none;
  color: rgb(102, 109, 127);
}

/* Свернутый текст поста (Комбинированный класс) */
.post-text-collapsed
{
  position: relative;
  height: 70px;
  max-height: 70px;
  overflow: hidden;

  /* Маска для плавного затухания текста внизу */
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 70px, transparent);
}

.post-text-collapsed h2
{
  margin: 0 0 8px 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
}

/* Свернутый текст поста (Устаревший, для совместимости) */
.post-text.collapsed
{
  position: relative;
  height: 70px;
  max-height: 70px;
  overflow: hidden;

  /* Маска для плавного затухания текста внизу */
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 70px, transparent);
}

/* Кнопка "Показать полностью" */
.post-text-expand-btn
{
  display: block;
  width: 100%;
  padding: 8px 0;
  border: none;
  cursor: pointer;

  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-link);
  text-align: left;

  background-color: transparent;
}

.post-text-expand-btn:hover
{
  text-decoration: underline;
}

/* Спойлер (скрытый текст) */
.spoiler
{
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;

  /* Эффект размытия (Blur) как в spoilerjs */
  color: transparent;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  background-color: rgba(100, 100, 100, 0.1);

  user-select: none;

  transition: all 0.3s ease;
}

.spoiler:hover
{
  background-color: rgba(100, 100, 100, 0.2);
}

.spoiler.is-visible
{
  cursor: auto;

  color: inherit;
  text-shadow: none;

  background-color: transparent;

  user-select: auto;
}

/* Разделитель внутри поста */
.post-divider
{
  height: 1px;
  margin: 8px 0;

  background-color: var(--color-border-hover);
  opacity: 0.5;
}

/* Мета информация поста */
.post-meta
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.3px;
  color: rgb(102, 109, 127);
}

/* Применение новых иконок в футере и их цвет */
.post-meta .icon-comment-new,
.post-meta .icon-eye,
.post-meta .icon-share-arrow,
.post-meta .icon-telegram
{
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;

  /* Цвет иконок по дизайну #666D7F */
  background-color: rgb(102, 109, 127);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.post-meta-left,
.post-meta-right
{
  display: flex;
  align-items: center;
  gap: 16px;
}

.post-stat-item
{
  display: flex;
  align-items: center;
  gap: 6px;

  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.post-stat-item:hover
{
  color: var(--color-primary);
}

a.post-stat-item:hover .icon-comment-new,
a.post-stat-item:hover .icon-eye
{
  background-color: var(--color-primary);
}

.post-action-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;

  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.post-action-btn:hover .icon-share-arrow,
.post-action-btn:hover .icon-telegram
{
  background-color: var(--color-primary);
}

/* Кнопки действий в посте (Комментарии, Подробнее) */
.post-comments-btn,
.post-more-btn
{

  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

/* Стили для посещенных ссылок (фиксация цвета) */
.post-comments-btn:visited,
.post-more-btn:visited
{
  border-color: var(--color-primary);

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

.post-comments-btn:hover,
.post-more-btn:hover
{
  border-color: var(--color-primary);

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

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

.post-comments-btn:hover .icon
{
  background-color: var(--color-text-inverse);
}

/* Ссылка внутри канала */
.post-channel-link
{
  text-decoration: none;
  color: inherit;
}

/* Меню "Поделиться" */
.share-container
{
  position: relative;

  display: inline-block;
}

.share-btn
{
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;

  background-color: transparent;
}

.share-dropdown
{
  position: absolute;
  bottom: 100%;
  right: -10px;
  z-index: 100;

  display: none;
  flex-direction: column;
  min-width: 160px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;

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

.share-dropdown.active
{
  display: flex;
}

.share-option
{
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;

  font-size: 14px;
  color: var(--text-post);
  text-align: left;
  text-decoration: none;

  background-color: transparent;

  transition: background-color 0.2s;
}

.share-option:hover
{
  text-decoration: none;
  color: var(--text-post);

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

/* --- МЕДИА (ФОТО/ВИДЕО) --- */

.post-media
{
  display: grid;
  grid-gap: 8px;
  margin-bottom: 12px;
}

.post-media.single
{
  grid-template-columns: 1fr;
}

.post-media.multiple
{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.post-media-item
{
  position: relative;

  display: block;
  width: 100%;
  max-height: 358px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;

  text-decoration: none;
  text-align: center;

  background-color: rgb(225, 227, 234);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Эффект размытия (Blur) для фона */
.post-media-item::before
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  background: inherit;

  filter: blur(15px);
  transform: scale(1.1);

  content: "";
}

.post-media-img
{
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  object-fit: contain;
  opacity: 1;
}

.post-video-overlay
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.2);

  transition: background-color 0.2s;
}

.post-media-item:hover .post-video-overlay
{
  background-color: rgba(0, 0, 0, 0.1);
}

.post-video-play-icon
{
  position: relative;

  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  background-color: rgba(0, 0, 0, 0.6);
  background-image: var(--icon-play-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}

.video-placeholder
{
  aspect-ratio: 16/9;
  background-image: var(--bg-video-placeholder);
  background-position: center;
  background-size: cover;
}

/* --- РЕАКЦИИ (EMOTIONS) --- */

.post-reactions
{
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  gap: 8px;
  overflow: hidden;
}

.post-reaction
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 40px;
  padding: 4px 6px;
  border-radius: 18px;
  gap: 4px;

  font-size: 12px;
  color: var(--text-post);
  cursor: pointer;

  background-color: rgb(242, 243, 247);

  user-select: none;
}

/* --- КОММЕНТАРИИ --- */

.comments-section
{
  margin-top: 20px;
}

.comments-list
{
  margin-top: 15px;
}

/* Основной контейнер дерева */
.comment-tree
{
  margin: 0;
  padding-left: 0;

  list-style-type: none;
}

/* Вложенные списки (ветки) */
.comment-tree ul
{
  position: relative;

  margin: 0;
  /* Отступ ветки */
  padding-left: 20px;

  list-style-type: none;
}

/* Вертикальная линия для вложенных списков */
.comment-tree ul:before
{
  position: absolute;
  top: 0;
  left: 0;

  width: 1px;
  height: 100%;

  background-color: var(--color-border);
  opacity: 0.5;

  content: "";

  transition: background-color 0.2s;
}

/* Подсветка линии при наведении */
.comment-tree ul:hover:before
{
  width: 2px;

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

/* Узел дерева (комментарий) */
.comment-node
{
  position: relative;

  margin-top: 10px;
}

/* Горизонтальная линия от вертикальной к блоку комментария */
.comment-tree ul > .comment-node:before
{
  position: absolute;
  /* Середина аватара или заголовка */
  top: 20px;
  left: -20px;

  width: 20px;
  height: 1px;

  background-color: var(--color-border);
  opacity: 0.5;

  content: "";
}

/* Исправление вертикальной линии для последнего элемента */
.comment-tree ul > .comment-node:last-child:after
{
  position: absolute;
  /* Совпадение с top у :before */
  top: 20px;
  /* Смещение влево для перекрытия линии */
  left: -21px;

  /* Чуть шире, чтобы перекрыть наверняка */
  width: 3px;
  height: 100%;

  /* Цвет фона для скрытия линии */
  background-color: var(--color-bg-feed);

  content: "";
}

/* При наведении на линию, скрытие хвоста должно сохраняться корректно */
/* Но если линия становится толще (2px), то after должен быть шире */

/* Блок содержимого комментария */
.comment-content
{
  position: relative;

  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 12px;

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

.comment-header
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;

  font-size: 0.9em;
  color: var(--text-secondary);
}

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

.comment-text
{
  font-size: 14px;
  line-height: 1.4;
}

.comment-text blockquote
{
  display: block;
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--text-link);

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

.comments-empty
{
  padding: 20px;

  color: var(--text-secondary);
  text-align: center;
}

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

.comment-branch-controls
{
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
}

.branch-expand-btn,
.branch-collapse-btn
{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: inherit;
  color: var(--text-link);

  background-color: transparent;

  transition: all 0.2s;
}

.branch-expand-btn:hover,
.branch-collapse-btn:hover
{
  border-color: var(--color-border);

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

  background-color: var(--text-link);
}

.branch-expand-btn .icon-expand,
.branch-collapse-btn .icon-collapse
{
  display: block;
  width: 16px;
  height: 16px;

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  font-size: 0;
}

.branch-expand-btn .icon-expand
{
  background-color: rgb(139, 195, 74);
  mask-image: var(--icon-plus);
}

.branch-collapse-btn .icon-collapse
{
  background-color: var(--text-secondary);
  mask-image: var(--icon-minus);
}

/* Состояния скрытия/отображения */
/* По умолчанию (развернуто) - скрываем кнопку раскрытия */
.comment-node .branch-expand-btn
{
  display: none;
}

/* По умолчанию (развернуто) - показываем кнопку сворачивания */
.comment-node .branch-collapse-btn
{
  display: flex;
}

/* Когда свернуто - показываем кнопку раскрытия */
.comment-node.collapsed .branch-expand-btn
{
  display: flex;
}

/* Когда свернуто - скрываем кнопку сворачивания */
.comment-node.collapsed .branch-collapse-btn
{
  display: none;
}

/* Скрываем вложенные ветки при сворачивании */
.comment-node.collapsed > ul
{
  display: none;
}

/* Медиа в комментариях */
.comment-media-item
{
  position: relative;
  display: block;
  max-width: 100%;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.comment-media-img
{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Оверлей для видео в комментариях */
.comment-video-overlay
{
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.2);

  transition: background-color 0.2s;
}

.comment-media-item:hover .comment-video-overlay
{
  background-color: rgba(0, 0, 0, 0.1);
}

.comment-video-play-icon
{
  position: relative;

  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  background-color: rgba(0, 0, 0, 0.6);
  background-image: var(--icon-play-white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}

/* Footer */
.footer
{
  padding: 16px 0;

  font-size: 12px;
  color: var(--text-meta);
  text-align: center;

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

/* Адаптивность */
@media (max-width: 768px)
{
  .header-container
  {
    padding: 0 16px;
  }

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

  .header-subtitle
  {
    font-size: 11px;
  }

  .header-actions
  {
    gap: 4px;
  }

  .header-btn
  {
    width: 36px;
    height: 36px;
  }

  .container
  {
    padding: 0 12px;
  }

  .post-card
  {
    padding: 10px;
  }

  .pagination__pages
  {
    flex-wrap: wrap;
  }

  .pagination__page_next
  {
    width: 100%;
    margin-right: 0;
  }
}

/* Переключение тем */
.theme-btn
{
  border: 1px solid var(--text-meta);

  opacity: 0.7;

  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.theme-btn.active
{
  transform: scale(1.2);

  opacity: 1;

  box-shadow: 0 0 5px 2px var(--text-channel);
}

/* ПАГИНАЦИЯ */

.pagination
{
  margin-top: 15px;

  user-select: none;
}

.pagination__pages
{
  display: flex;
  overflow: hidden;
  cursor: default;
}

.pagination__page
{
  display: block;
  min-width: 32px;
  height: 32px;
  margin-right: 12px;
  padding: 0 4px;
  border: 2px solid var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;

  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text-secondary);
  text-align: center;

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

  transition: background-color 0.2s, color 0.2s, border 0.2s;
}

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

.pagination__page:hover:not(.pagination__page_more, .pagination__page_disabled, .pagination__page_current)
{
  border-color: var(--bg-accent);

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

.pagination__page:active:not(.pagination__page_more, .pagination__page_disabled, .pagination__page_current)
{
  border-color: var(--color-border);

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

.pagination__page:focus-visible
{
  border-color: var(--color-primary-dark);
  outline: 0;
}

.pagination__page_current
{
  border-color: var(--color-primary);
  cursor: default;

  color: var(--color-text-inverse);

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

.pagination__page_current:hover
{
  border-color: var(--color-primary-hover);

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

.pagination__page_current:active
{
  border-color: var(--color-primary-dark);

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

.pagination__page_more
{
  border-color: transparent;

  background-color: transparent;
}

.pagination__page_more .icon
{
  position: relative;
  top: 6px;

  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.pagination__page_next
{
  width: auto;
  padding: 0 20px;
}

.pagination__page_disabled
{
  opacity: 0.5;
}

.pagination__page:last-child
{
  margin-right: 0;
}

/* Панель выбора ленты (Feeders) */
.feeders
{
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
}

/* Контейнер для табов внутри feeders */
.feeders-tabs-container
{
  display: flex;
  align-items: center;
  height: 100%;
}

/* Обычные ссылки */
.feeders .feeders-tab
{
  padding: 0 12px;
  position: relative;

  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 3px solid transparent;

  font-size: 14px;
  font-weight: 500;
  color: var(--text-meta);
  text-decoration: none;

  transition: color 0.2s;
}

.feeders .feeders-tab:hover
{
  background-color: rgba(0, 150, 235, 0.1);
}

/* Активная ссылка (текущий раздел) */
.feeders .active
{
  cursor: default;
  color: rgb(0, 150, 235);
  border-bottom-color: rgb(0, 150, 235);
}

/* Иконка настроек */
.feeders .icon-config
{
  position: absolute;
  top: 50%;
  right: 16px;

  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  cursor: pointer;

  /* noinspection CssUnresolvedCustomProperty */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16.75 8.74954H6.0646M2.29292 8.74954H0.75M2.29292 8.74954C2.29292 8.22319 2.49156 7.71839 2.84514 7.34619C3.19872 6.974 3.67828 6.76491 4.17832 6.76491C4.67837 6.76491 5.15793 6.974 5.51151 7.34619C5.86509 7.71839 6.06373 8.22319 6.06373 8.74954C6.06373 9.2759 5.86509 9.7807 5.51151 10.1529C5.15793 10.5251 4.67837 10.7342 4.17832 10.7342C3.67828 10.7342 3.19872 10.5251 2.84514 10.1529C2.49156 9.7807 2.29292 9.2759 2.29292 8.74954ZM16.75 14.7645H11.7788M11.7788 14.7645C11.7788 15.2909 11.5796 15.7963 11.226 16.1686C10.8723 16.5409 10.3926 16.75 9.89249 16.75C9.39245 16.75 8.91289 16.54 8.5593 16.1678C8.20572 15.7956 8.00708 15.2908 8.00708 14.7645M11.7788 14.7645C11.7788 14.238 11.5796 13.7335 11.226 13.3612C10.8723 12.989 10.3926 12.7798 9.89249 12.7798C9.39245 12.7798 8.91289 12.9889 8.5593 13.3611C8.20572 13.7333 8.00708 14.2381 8.00708 14.7645M8.00708 14.7645H0.75M16.75 2.73464H14.0646M10.2929 2.73464H0.75M10.2929 2.73464C10.2929 2.20828 10.4916 1.70348 10.8451 1.33129C11.1987 0.959095 11.6783 0.75 12.1783 0.75C12.4259 0.75 12.6711 0.801334 12.8998 0.901072C13.1286 1.00081 13.3364 1.147 13.5115 1.33129C13.6866 1.51558 13.8255 1.73436 13.9202 1.97515C14.015 2.21594 14.0637 2.47401 14.0637 2.73464C14.0637 2.99526 14.015 3.25334 13.9202 3.49413C13.8255 3.73491 13.6866 3.9537 13.5115 4.13799C13.3364 4.32228 13.1286 4.46847 12.8998 4.5682C12.6711 4.66794 12.4259 4.71927 12.1783 4.71927C11.6783 4.71927 11.1987 4.51018 10.8451 4.13799C10.4916 3.7658 10.2929 3.261 10.2929 2.73464Z' stroke='%23A3A8B3' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
}

/* --- ASSETS (telega-fm-assets) --- */

:root
{
  /* Лента */
  --icon-lenta: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' y1='6' x2='21' y2='6'/%3e%3cline x1='8' y1='12' x2='21' y2='12'/%3e%3cline x1='8' y1='18' x2='21' y2='18'/%3e%3cline x1='3' y1='6' x2='3.01' y2='6'/%3e%3cline x1='3' y1='12' x2='3.01' y2='12'/%3e%3cline x1='3' y1='18' x2='3.01' y2='18'/%3e%3c/svg%3e");
  /* Просмотры */
  --icon-view: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3e%3ccircle cx='12' cy='12' r='3'/%3e%3c/svg%3e");
  /* Комментарии */
  --icon-comments: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3e%3c/svg%3e");
  /* Поделиться */
  --icon-share: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='18' cy='5' r='3'/%3e%3ccircle cx='6' cy='12' r='3'/%3e%3ccircle cx='18' cy='19' r='3'/%3e%3cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3e%3cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3e%3c/svg%3e");
  /* Три точки горизонтальные */
  --icon-overflow-horizontal: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='1'/%3e%3ccircle cx='19' cy='12' r='1'/%3e%3ccircle cx='5' cy='12' r='1'/%3e%3c/svg%3e");
  /* Три точки вертикальные */
  --icon-overflow-vertical: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='1'/%3e%3ccircle cx='12' cy='5' r='1'/%3e%3ccircle cx='12' cy='19' r='1'/%3e%3c/svg%3e");
  /* Пять точек крестом и стрелки */
  --icon-overflow-multifunctional: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='1'/%3e%3ccircle cx='12' cy='8' r='1'/%3e%3ccircle cx='12' cy='16' r='1'/%3e%3ccircle cx='8' cy='12' r='1'/%3e%3ccircle cx='16' cy='12' r='1'/%3e%3cpath d='M12 3l-2 2m2-2l2 2M12 21l-2-2m2 2l2-2M3 12l2-2m-2 2l2 2M21 12l-2-2m2 2l-2 2'/%3e%3c/svg%3e");
  /* Точки пагинации */
  --icon-dots: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3e%3cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3e%3c/svg%3e");
  /* Свернуть (минус) */
  --icon-minus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='5' y1='12' x2='19' y2='12'/%3e%3c/svg%3e");
  /* Развернуть (плюс) */
  --icon-plus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='5' x2='12' y2='19'/%3e%3cline x1='5' y1='12' x2='19' y2='12'/%3e%3c/svg%3e");

  /* Иконка Play (White) */
  --icon-play-white: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M8 5v14l11-7z'/%3e%3c/svg%3e");
  /* Фон-заглушка для видео */
  --bg-video-placeholder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3e%3cdefs%3e%3clinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%233a3a3a'/%3e%3cstop offset='100%25' stop-color='%231a1a1a'/%3e%3c/linearGradient%3e%3c/defs%3e%3crect width='100%25' height='100%25' fill='url(%23g)'/%3e%3c/svg%3e");

  /* --- Новые иконки для футера поста --- */
  /* Комментарий (iconamoon_comment) */
  --icon-comment-new: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C13.5822 20 15.129 19.5308 16.4446 18.6518C17.7602 17.7727 18.7855 16.5233 19.391 15.0615C19.9965 13.5997 20.155 11.9911 19.8463 10.4393C19.5376 8.88743 18.7757 7.46197 17.6568 6.34315C16.538 5.22433 15.1126 4.4624 13.5607 4.15372C12.0089 3.84504 10.4003 4.00347 8.93853 4.60897C7.47672 5.21447 6.22729 6.23985 5.34824 7.55544C4.46919 8.87103 4 10.4178 4 12C4 13.3227 4.32 14.5698 4.88889 15.6684L4 20L8.33155 19.1111C9.43022 19.68 10.6782 20 12 20Z' stroke='%23A3A8B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  /* Глаз (solar_eye-linear) */
  --icon-eye: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.275 15.296C2.425 14.192 2 13.639 2 12C2 10.36 2.425 9.809 3.275 8.704C4.972 6.5 7.818 4 12 4C16.182 4 19.028 6.5 20.725 8.704C21.575 9.81 22 10.361 22 12C22 13.64 21.575 14.191 20.725 15.296C19.028 17.5 16.182 20 12 20C7.818 20 4.972 17.5 3.275 15.296Z' stroke='%23A3A8B3' stroke-width='1.5'/%3e%3cpath d='M15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12Z' stroke='%23A3A8B3' stroke-width='1.5'/%3e%3c/svg%3e");
  /* Поделиться (Vector / Share Arrow) */
  --icon-share-arrow: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.8418 0.750977C10.8533 0.752596 10.8671 0.757334 10.8799 0.768555L19.2129 8.05469C19.2227 8.06331 19.2323 8.07534 19.2393 8.09082C19.2463 8.1064 19.25 8.12479 19.25 8.14355C19.25 8.16212 19.2461 8.17987 19.2393 8.19531L19.2129 8.23145L10.8799 15.5176L10.8789 15.5186C10.8662 15.5295 10.8531 15.5345 10.8418 15.5361C10.8304 15.5377 10.818 15.5362 10.8057 15.5303C10.7931 15.5243 10.7796 15.5129 10.7686 15.4951C10.7574 15.4771 10.75 15.4545 10.75 15.4297V11.2197L9.9375 11.2871C7.06567 11.5259 4.88229 12.881 3.38184 14.2314H3.38086C2.6954 14.8488 2.07155 15.5346 1.51855 16.2783L1.51758 16.2803C1.32173 16.5453 1.13637 16.8187 0.962891 17.0996L0.948242 17.1162L0.900391 17.2031C0.886853 17.2274 0.870392 17.2392 0.859375 17.2441C0.845595 17.2502 0.831472 17.2514 0.818359 17.248C0.805027 17.2447 0.789124 17.236 0.775391 17.2188C0.761997 17.2018 0.752732 17.1782 0.750977 17.1514C0.750812 16.9581 0.748453 16.7934 0.75293 16.623C0.761632 16.293 0.786236 15.82 0.848633 15.2539C0.973102 14.1224 1.24896 12.6094 1.85352 11.0957C2.45801 9.58223 3.39352 8.06472 4.83496 6.92676C6.12907 5.90484 7.82479 5.19681 10.0459 5.06152L10.751 5.01855V0.856445C10.7511 0.83179 10.7575 0.808895 10.7686 0.791016C10.7794 0.773648 10.7933 0.762927 10.8057 0.756836C10.818 0.750988 10.8304 0.749398 10.8418 0.750977Z' stroke='%23A3A8B3' stroke-width='1.5'/%3e%3c/svg%3e");
  /* Телеграм (iconamoon_telegram) */
  --icon-telegram: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.5 15.5L17.2438 20.8238C17.3637 20.9063 17.5287 20.8371 17.554 20.6938L20.4337 4.37582C20.4617 4.21696 20.2998 4.09198 20.1532 4.15933L2.42322 12.3055C2.26356 12.3789 2.26931 12.6077 2.43244 12.673L9.5 15.5ZM9.5 15.5L15 10' stroke='%23A3A8B3' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
}

.header-logo
{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3e%3cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3e%3cline x1='12' y1='19' x2='12' y2='23'/%3e%3cline x1='8' y1='23' x2='16' y2='23'/%3e%3c/svg%3e");
}

.icon-lenta,
.icon-view,
.icon-comments,
.icon-share,
.icon-overflow-horizontal,
.icon-overflow-vertical,
.icon-overflow-multifunctional,
.icon-dots
{
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;

  background-color: var(--color-text-primary);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

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

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

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

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

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

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

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

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

/* Новые классы для иконок футера */
.icon-comment-new
{
  mask-image: var(--icon-comment-new);
}

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

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

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