/* =============================================================
   KORZIK DESIGN SYSTEM (Modern Frontend Edition)
   ============================================================= */

:root {
  /* --- Типографика --- */
  --font-main: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Manrope", sans-serif;

  /* --- БАЗА --- */
  --space-unit: clamp(4px, 0.25vw + 3px, 5px);

  --text-base: clamp(15px, 0.5vw + 13px, 18px);

  /* --- МЕЛКИЙ ТЕКСТ (зависит от базы) --- */
  --text-xs: calc(var(--text-base) * 0.75);
  /* ~11-12px */
  --text-sm: calc(var(--text-base) * 0.875);
  /* ~13-14px */
  --text-md: var(--text-base);
  /* 14-16px */

  /* --- СРЕДНИЙ И КРУПНЫЙ (резиновый clamp) --- */
  /* Для подзаголовков внутри карточек */
  --text-lg: clamp(17px, 0.8vw + 14px, 20px);

  /* Для заголовков H2 */
  --text-xl: clamp(20px, 1.5vw + 15px, 26px);

  /* Для главных заголовков H1 */
  --text-2xl: clamp(24px, 3vw + 14px, 34px);

  --space-xs: calc(var(--space-unit) * 2);
  --space-sm: calc(var(--space-unit) * 3);
  --space-md: calc(var(--space-unit) * 4);
  --space-lg: calc(var(--space-unit) * 6);
  --space-xl: calc(var(--space-unit) * 8);

  /* Межстрочный интервал (Line Height) */
  --lh-tight: 1.2;
  /* Для крупных заголовков */
  --lh-base: 1.5;
  /* Для обычного текста */
  --lh-relaxed: 1.7;
  /* Для длинных статей */
  --fw-light: 300;
  --fw-regular: 400;
  /* Обычный текст */
  --fw-medium: 500;
  /* Средний (для кнопок, пунктов меню) */
  --fw-semibold: 600;
  /* Полужирный (для подзаголовков h3-h4) */
  --fw-bold: 700;
  /* Жирный (для h1-h2) */
  --fw-black: 800;
  /* Очень жирный (для акцентных заголовков) */

  /* --- Цветовая палитра (Светлая тема) --- */
  --color-bg: #f5f5f7;
  --color-bg-soft: #edf0f3;
  --color-card: #ffffff;
  --color-text: #111111;
  --color-text-soft: #2d3748;
  --color-muted: #64748b;

  --accent-h: 25;
  --accent-s: 100%;
  /* Основной цвет (кнопки, активные иконки) */
  --color-accent: hsl(var(--accent-h), var(--accent-s), 50%);
  /* Состояние Hover (чуть темнее и насыщеннее) */
  --color-accent-down: hsl(var(--accent-h), var(--accent-s), 45%);
  /* Состояние Light (для фонов уведомлений или бейджей) */
  --color-accent-soft: hsl(var(--accent-h), var(--accent-s), 96%);
  --color-accent-text: #ffffff;

  --btn-h: 48px;

  --color-border: #e6e6ea;
  --header-bg: var(--color-accent);
  --header-shadow:
    0 2px 10px rgba(255, 106, 0, 0.2),
    /* Ближнее свечение */ 0 4px 20px rgba(255, 106, 0, 0.1); /* Рассеянный ореол */

  /* Важно для sticky хедера: свечение должно быть ПОВЕРХ контента */
  z-index: 1000;
  --color-accent-text-soft: rgba(255, 255, 255, 0.7);

  /* --- Инпуты --- */
  --color-input-bg: #ffffff;
  --color-input-bg-focus: #fffbea;
  --color-input-border: #d0d7de;
  --color-input-text: #1f2328;
  --color-input-placeholder: #8a8f98;
  --color-input-border-focus: var(--color-accent);

  --color-danger: #ef4444;
  --color-success: #22c55e;

  --color-like: #28a745;
  --color-dislike: #dc3545;
  --color-hover-bg: #f0f0f2;

  --c-padding-x: var(--space-sm, 12px);
  --c-padding-y: var(--space-xs, 8px);

  --c-padding-x-mobile: var(--space-md, 12px);
  --c-padding-y-mobile: var(--space-xs) ;

  --indent-desktop: calc(var(--c-padding-x) + (var(--avatar-size-lg) / 2));
  --indent-mobile: calc(
    var(--c-padding-x-mobile) + (var(--avatar-size-sm) / 2)
  );

  --tree-line-color: var(--color-border, #e0e0e0);
  --tree-line-width: 2px;
  --tree-radius: var(--radius-base);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm: 4px;
  --radius-base: 12px;
  --radius-card: 16px;

  --header-height: clamp(54px, 1.5vw + 45px, 64px);

  --input-height: 48px;
  --input-font-size: 16px;

  --icon-size-lg: calc(var(--space-unit) * 8);
  --icon-size: calc(var(--space-unit) * 6);
  --icon-size-sm: calc(var(--space-unit) * 4.5);
  --icon-size-xs: calc(var(--space-unit) * 3.5);

  --avatar-size-2xl: calc(var(--space-unit) * 20);
  --avatar-size-xl: calc(var(--space-unit) * 16);
  --avatar-size-lg: calc(var(--space-unit) * 12);
  --avatar-size-md: calc(var(--space-unit) * 10);
  --avatar-size-sm: calc(var(--space-unit) * 8);

  --container-max-width: 1440px; /*1240px;*/
  --sidebar-width: 300px;

  --container-padding: clamp(12px, 2vw, 24px);
  --card-padding: clamp(16px, 3vw, 24px);
}
/* --- Темная тема --- */
.dle_theme_dark {
  --color-bg: #0f1115;
  --color-bg-soft: #1d2129;
  --color-card: #171a21;
  --color-text: #f5f5f5;
  --color-text-soft: #cbd5e1;
  --color-muted: #94a3b8;
  --color-border: #262a33;
  --color-input-bg: #1c2028;
  --color-input-bg-focus: #20242c; /* чуть светлее при фокусе */
  --color-input-text: #f5f5f5;
  --color-input-placeholder: #7c818a;
  --color-input-border: #2a2f36;
  --color-input-border-focus: #ff7a1a;
  --color-hover-bg: #262b35;
  --accent-h: 25;
  --accent-s: 85%;
  --color-accent: hsl(var(--accent-h), var(--accent-s), 50%);
  --header-bg: rgba(15, 17, 21, 0.85);
  --header-border-color: var(--color-accent);
  --color-accent-down: hsl(var(--accent-h), var(--accent-s), 40%);
  --color-accent-soft: hsla(var(--accent-h), var(--accent-s), 15%, 0.4);

  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* =============================================================
   BASE STYLES
   ============================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative; /* Помогает браузеру правильно определять границы */
  font-display: swap;
}
html {
  scroll-behavior: smooth;
}
:target {
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  0% {
    box-shadow: 0 0 0 5px var(--color-accent);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.dle_theme_dark .DLEPush-notification.wrapper{
  color: var(--color-text);
  background-color:var(--color-card);
  border-radius: .694em
}

.dle_theme_dark .DLEPush-notification .DLEPush-icon{
  color: var(--color-text-soft);
	border-top-left-radius: .694em;
	border-bottom-left-radius: .694em;
}
.dle_theme_dark .DLEPush-notification .DLEPush-close:hover {
    opacity: 1;
    color: #fff;
}

/* Успех (Зеленый) */
.dle_theme_dark .DLEPush-notification.wrapper.push-success {
    background-color: #1b2e2b; /* Темно-изумрудный фон */
    color: #e0f2f1;
    border-color:  #00897b;
}

.dle_theme_dark .DLEPush-notification.wrapper.push-success .DLEPush-icon {
    background-color: #26a69a; /* Яркий акцент */
}

/* Предупреждение (Оранжевый) */
.dle_theme_dark .DLEPush-notification.wrapper.push-warning {
    background-color: #2e261a; /* Темно-янтарный фон */
    color: #fff3e0;
    border-color:  #ff9800;
}

.dle_theme_dark .DLEPush-notification.wrapper.push-warning .DLEPush-icon {
    background-color: #ffa726; /* Яркий акцент */
}

/* Ошибка (Красный) */
.dle_theme_dark .DLEPush-notification.wrapper.push-error {
    background-color: #2c1c1a; /* Глубокий темно-красный */
    color: #fbe9e7;
    border-color:  #ff5722;
}

.dle_theme_dark .DLEPush-notification.wrapper.push-error .DLEPush-icon {
    background-color: #ff7043; /* Яркий акцент */
}
body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
  /* Рендеринг текста */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Дополнение для Firefox на Mac */
  text-rendering: optimizeSpeed;
  overflow-wrap: break-word;
  hyphens: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent-down);
}

h1,
h2,
h3,
h4,
h5 {
  text-rendering: optimizeLegibility;
}
/*
video:not(.wseditor *),
iframe:not(.wseditor *) {
  aspect-ratio: auto;
  width: 100%;
  max-width: 900px;
  height: auto !important;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-base);
  display: block;
  margin-inline-start: auto;
  margin-inline-end: auto;
}*/
.wseditor {
  border-top: none;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);
  color: var(--color-text);
}
.tox-tinymce {
  border: none !important;
  border-radius: var(--radius-base) !important;
}
.tox .tox-editor-header {
  border: none !important;
}
.tox-toolbar__primary {
  background-color: inherit !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  border: none !important; border-top: none !important;
}
.wseditor .dle_theme_dark .tox .tox-toolbar,
 .wseditor .dle_theme_dark .tox .tox-toolbar__overflow,
 .wseditor .dle_theme_dark .tox .tox-toolbar__primary {
  border: none !important;
}
.dle_theme_dark .tox .tox-toolbar-overlord {
  background-color: #282c39 !important;
}
 .wseditor .wseditor .dle_theme_dark .tox .tox-toolbar,
 .wseditor .dle_theme_dark .tox .tox-toolbar__overflow,
 .wseditor .dle_theme_dark .tox .tox-toolbar__primary {
  border-top: none !important;
}
.dle_theme_dark .dlecomments-editor .tox .tox-toolbar, .dle_theme_dark .dlecomments-editor .tox .tox-toolbar__overflow, .dle_theme_dark .dlecomments-editor .tox .tox-toolbar__primary{border-top:none !important;}
.dle_theme_dark .dlecomments-editor .tox .tox-toolbar, .dle_theme_dark .dlecomments-editor .tox .tox-toolbar__overflow, .dle_theme_dark .dlecomments-editor .tox .tox-toolbar__primary{border-top:none !important;}
.dle_theme_dark .tox-tbtn[data-mce-name="dleupload"] svg {
    stroke: #ffffff !important;
    fill: none !important;    
}

.dle_theme_dark .tox-tbtn[data-mce-name="dleupload"] svg path {
    stroke: #ffffff !important;
}
table {
  overflow-x: auto;
  /* Появится скролл внутри таблицы, если она не лезет */
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

.form-check-label {
  display: flex;
  gap: var(--space-xs);
  align-content: center;
}
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: var(--transition-base);
  opacity: 0.9;
  image-rendering: -webkit-optimize-contrast;
}
.icon:hover {
  opacity: 1;
}

.icon-sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}
.icon-xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}
.icon-edit {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/pencil.svg");
  mask-image: url("../images/icons/pencil.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-hide {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/eye-closed.svg");
  mask-image: url("../images/icons/eye-closed.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-views {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/eye.svg");
  mask-image: url("../images/icons/eye.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-comments {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/comment.svg");
  mask-image: url("../images/icons/comment.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-fav {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/bookmark.svg");
  mask-image: url("../images/icons/bookmark.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-fav__del {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/bookmark-slash.svg");
  mask-image: url("../images/icons/bookmark-slash.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-share {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/share.svg");
  mask-image: url("../images/icons/share.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-like {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/thumbsup.svg");
  mask-image: url("../images/icons/thumbsup.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-dislike {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/thumbsdown.svg");
  mask-image: url("../images/icons/thumbsdown.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-search {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/search.svg");
  mask-image: url("../images/icons/search.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-password {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/key.svg");
  mask-image: url("../images/icons/key.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-sun {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/sun.svg");
  mask-image: url("../images/icons/sun.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-moon {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/moon.svg");
  mask-image: url("../images/icons/moon.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-paperclip {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/paperclip.svg");
  mask-image: url("../images/icons/paperclip.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-send {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/paper-airplane.svg");
  mask-image: url("../images/icons/paper-airplane.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-download {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/download.svg");
  mask-image: url("../images/icons/download.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-lock {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/lock.svg");
  mask-image: url("../images/icons/lock.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-quote {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/quote.svg");
  mask-image: url("../images/icons/quote.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-report {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/report.svg");
  mask-image: url("../images/icons/report.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-trash {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/trash.svg");
  mask-image: url("../images/icons/trash.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-menu__vertical {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/menu-vertical.svg");
  mask-image: url("../images/icons/menu-vertical.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-arrow__right {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/arrow-right.svg");
  mask-image: url("../images/icons/arrow-right.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-arrow__left {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/arrow-left.svg");
  mask-image: url("../images/icons/arrow-left.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-arrow__up {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/arrow-up.svg");
  mask-image: url("../images/icons/arrow-up.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-plus__circle {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/plus-circle.svg");
  mask-image: url("../images/icons/plus-circle.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-upload {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/upload.svg");
  mask-image: url("../images/icons/upload.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-blocked {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/blocked.svg");
  mask-image: url("../images/icons/blocked.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-info {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/info.svg");
  mask-image: url("../images/icons/info.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-person {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/person.svg");
  mask-image: url("../images/icons/person.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-sign__in {
  background-color: currentColor;
  -webkit-mask-image: url("../images/icons/sign-in.svg");
  mask-image: url("../images/icons/sign-in.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.post-full__content > div:not(:has(.dleplyrplayer)) {
  display: block;
}

ul,
ol {
  list-style: none;
}

[data-modal-target] {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  /* Устаревший, но для верности */
  clip-path: inset(100%);
  /* Современный стандарт */
  border: 0;
  white-space: nowrap;
  /* Чтобы текст не переносился */
}

#dropmenudiv {
  background-color: var(--color-card);
  color: var(--color-text);
}

#dropmenudiv a:hover {
  color: var(--color-accent);
  background-color: var(--color-card);
}

#comments_ifr {
  border-radius: 0;
}
/*
.ui-dialog {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  animation: modalAppear var(--transition-base);
  background-color: var(--color-card);
  backdrop-filter: blur(4px);
}
.ui-dialog-titlebar {
  background-color: var(--color-card) !important;
  border: none;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text) !important;
}
.ui-dialog-title {
  font-weight: var(--fw-regular);
  text-shadow: none;
  font-size: var(--text-md);
  font-family: var(--font-main);
}

.ui-dialog label {
  color: var(--color-muted);
}

.ui-dialog-content {
  border: 1px solid var(--color-border);
}

.ui-state-error {
  border: 1px solid var(--color-dislike);
  color: var(--color-dislike);
}

.ui-button {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 4px 12px var(--color-accent-soft);
}

.ui-button:hover {
  background-color: var(--color-accent-down);
}

.ui-dialog .ui-dialog-buttonset button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-sm) var(--space-md) !important;
  margin: 5px !important;
  border-radius: var(--radius-base) !important;
  border: none !important;

  font-size: var(--text-sm) !important;
  font-weight: var(--fw-regular) !important;
  cursor: pointer;
  transition: all 0.2s ease;

  text-shadow: none !important;
  box-shadow: none !important;
}

.ui-dialog-buttonset button:last-child {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.ui-dialog-buttonset button:last-child:hover {
  background-color: var(--color-accent-down);
}

.ui-dialog-buttonset button:first-child {
  background: none;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text);
}

.ui-dialog-buttonset button:first-child:hover {
  background: none;
  border-color: var(--color-accent) !important;
  color: var(--color-accent);
}

.tox .tox-dialog__footer .tox-button--secondary {
  background: none !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

.tox .tox-button {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.dle-popup-userprofileadmin .ui-dialog-buttonset button:nth-child(2) {
  background-color: var(--color-muted) !important;
  color: var(--color-text);
}
.bb-editor textarea {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);
  color: var(--color-text);
}

.bb-editor textarea:focus {
  outline: none;
  border: var(--color-input-border-focus);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.bb-editor textarea::placeholder {
  color: var(--color-input-placeholder);
}

.quick-edit-textarea{
  border-color: var(--color-border) ;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="file"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
   box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   max-width: 100%;
   width: 100%;
   height: var(--input-height);
  padding: 0 var(--space-md);
  line-height: var(--lh-tight);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);
  color: var(--color-input-text);

  box-shadow: var(--shadow-sm);
  font-family: var(--font-main);
  font-size: var(--text-base);
  transition: var(--transition-base);
  -webkit-transition:var(--transition-base);
  transition: border 0.2s linear 0s;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: var(--color-input-border-focus);
  background-color: var(--color-input-bg-focus);
}
select::placeholder,
textarea::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="file"]::placeholder,
input[type="datetime"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder,
input[type="time"]::placeholder,
input[type="week"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="color"]::placeholder{
  color:var(--color-input-placeholder);
}

.bbcodes,
button.bbcodes {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--space-lg);
  background-color: var(--color-accent);

  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-base);
}

.bbcodes:hover {
  background: var(--color-accent-down);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.bbcodes svg {
  width: var(--icon-size-sm);
 
  height: var(--icon-size-sm);
  fill: currentColor;
}

.bbcodes:active {
  transform: scale(0.96);
}

.bbcodes + .bbcodes {
  margin-inline-start: var(--space-sm);
}

.btn,
.bbcodes,
.btn-border {
  border-radius: var(--radius-base);
  background-color: var(--color-accent);
  color: var(--color-text);
  text-shadow: none;
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.btn > .icon {
  fill: currentColor;
  opacity: 0.9;
}

.btn-white > .icon {
  fill: var(--color-accent);
}
.btn-white {
  background-color: #fff;
  color: var(--color-accent-text);
}
.btn-white:hover > .icon {
  fill: currentColor;
}
.btn-white:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.btn:hover,
.bbcodes:hover {
  background-color: var(--color-accent-down);
}

.bbcodes.cancelchanges {
  background-color: var(--color-muted);
}
.bbcodes.cancelchanges:hover {
  background-color: #888888c7;
}

.btn-border {
  color: var(--color-accent);
  border: 2px solid var(--color-accent); 
}
.xfieldsnote {
  color: var(--color-muted);
}
.file-box{
  border-color: var(--color-border);
}

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

.wseditor{
  border-top: 5px solid var(--color-accent);
}
.mce-toc{
  border-color: var(--color-border);
}
.image-bordered{
  border-color: var(--color-border);
}

.comments-user-profile{
  
  color: var(--color-accent);
}

.tox .tox-dialog__header{
  
  background-color: #517fa4 !important;
  border-bottom: #517fa4 !important;
}
.tox .tox-dialog__title{text-shadow: none !important;
}
.dle-popup-mediaupload .tabs a{
color:var(--color-text) !important;
}
*/
.plyr {
  border-radius: 0 !important;
}

.plyr--video {
  border-radius: 0 !important;
}

.main-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 320px;
  height: 100%;
  background-color: var(--color-card);
  border-left: 1px solid var(--color-border);
  z-index: 999;

  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-md);
  transition: right var(--transition-base);
}

.main-nav .nav-list {
  display: flex;
  list-style: none;
  /* 1. Выстраиваем в колонку */
  flex-direction: column;
  /* 2. Растягиваем на всю ширину шторки */
  width: 100%;
  /* 3. Убираем центрирование, прижимаем к краям */
  align-items: stretch;
  gap: var(--space-xs); /* Небольшой зазор между пунктами */
  padding: 0 var(--space-md); /* Отступы от краев шторки */
}

.nav-link {
  position: relative;
  display: flex; /* На всю ширину */
  align-items: center;

  /* Увеличиваем высоту до 48px - золотой стандарт для тач-скринов */
  height: 48px;

  font-family: var(--font-main);
  /* Текст чуть крупнее, чтобы было легче читать на ходу */
  font-size: var(--text-md);
  line-height: var(--lh-tight);

  /* На мобилке в шторке (на белом/светлом фоне) лучше темный текст */
  color: var(--color-text);

  padding: 0 var(--space-md);
  text-decoration: none;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
}

.main-nav .nav-list .nav-link:active,
.main-nav .nav-list .nav-link.active {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.comment__desktop-actions {
  display: none;
}

.comment__mass-action {
  opacity: 1;
  transform: none;
}

.comment__mobile-trigger {
  display: block;
}

/* =============================================================
   COMPONENTS
   ============================================================= */

.btn {
  box-shadow: none;
  outline: none;
  appearance: none;
  background: transparent;
  border: none;
  text-shadow: none;

  /* 1. Центрирование контента (текст + иконка) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs); /* Отступ между иконкой и текстом */

  /* 2. Размеры из твоих переменных */
  min-height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 var(--space-md);
  box-sizing: border-box;

  /* 3. Типографика */
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-soft);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  /* 4. Внешний вид */
  border-radius: var(--radius-base);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;

  /* 5. Плавность всего */
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform 0.1s ease;
}
.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  /* Легкое внутреннее свечение сверху для объема */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

.btn--glass {
  /* Прозрачная база с размытием */
  background: rgba(255, 255, 255, 0.03); /* Почти невидимый белый */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);

  /* Тонкая "стеклянная" граница */
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* Цвет текста — приглушенный белый */
  color: rgba(255, 255, 255, 0.7);

  /* Убираем тени, оставляем только внутренний блик для объема */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  /* Используем мягкий цвет текста, чтобы не отвлекать от главного */
  color: var(--color-muted);
  box-shadow: none;
}

.btn--ghost-accent {
  background-color: transparent;
  color: var(--color-accent);
}

.btn--icon {
  width: var(--btn-h);
  height: var(--btn-h);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;

  transition: transform 0.1s ease;
}
.btn--icon svg {
  /* Сама иконка остается маленькой */
  width: 24px;
  height: 24px;
  /* Цвет иконки */
  fill: currentColor;
}

/* Эффект при нажатии на мобилке */
.btn--icon:active {
  transform: scale(0.9);
  opacity: 0.7;
}
.btn--link-wrapper {
  padding: 0 !important;
}

.btn--link-wrapper a {
  display: flex;
  padding: var(--space-sm) var(--space-lg);
  color: inherit;
  text-decoration: none;
}

.btn--primary-inverse {
  /* Чисто белый фон */
  background-color: #ffffff;

  /* Текст цвета твоего оранжевого акцента */
  color: var(--color-accent);

  font-weight: var(--fw-bold);
  border: none;

  /* Тень делаем очень мягкой и в тон оранжевого, чтобы кнопка "светилась" */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
  .btn:hover {
    background: transparent;
    color: var(--color-text-soft);
  }
  .btn--primary:hover {
    background-color: var(--color-accent-down);
    color: var(--color-accent-text);
  }
  .btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: rgba(255, 106, 0, 0.04); /* Легкий оранжевый оттенок */
  }

  .btn--glass:hover {
    background: var(--color-accent); /* Твой оранжевый */
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    opacity: 1;

    /* Мощное неоновое свечение */
    box-shadow: 0 0 20px rgba(255, 106, 0, 0.5);
  }

  .btn--ghost:hover {
    /* При наведении подсвечиваем фон очень слабым оттенком серого или акцента */
    /*background-color: var(--color-hover-bg);*/
    color: var(--color-text);
  }

  .btn--ghost-accent:hover {
    background-color: rgba(255, 106, 0, 0.08); /* Тонкий оранжевый налет */
    color: var(--color-accent-down);
  }

  .btn--primary-inverse:hover {
    background-color: #f8f9fa; /* Едва заметный серый оттенок */
  }

  .comment__desktop-actions,
  .comment__mass-action {
    opacity: 0;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
    transform: translateX(5px);
  }

  .comment:hover .comment__desktop-actions,
  .comment:hover .comment__mass-action {
    opacity: 1;
    transform: translateX(0);
  }

  .comment__mass-action:has(input:checked) {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}
/* =============================================================
   LAYOUT
   ============================================================= */

.main-layout {
  flex: 1 0 auto;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-top:var(--header-height);
}

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--container-padding);
}

.main-layout__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  width: 100%;
  max-width: var(--container-max-width);
  box-sizing: border-box;
}

/** Site-header **/
.site-header {
  position: static;
  z-index: 100;
  height: var(--header-height);
  max-height: var(--header-height);
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  max-height: var(--header-height);

  transition: transform 0.3s ease-in-out;
  width: 100%;
  border-bottom: 2px solid var(--header-border-color);
  color: var(--color-accent-text);
}

.site-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-hidden {
  transform: translateY(-100%);
}

.site-header .layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-actions {
  display: flex;
  gap: var(--space-xs);
}

.header-right {
  position: relative;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  margin-inline-end: var(--space-md);
  gap: var(--space-xs);
  color: var(--color-accent-text);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-family: var(--font-display);
}

.logo__icon img {
  height: calc(var(--header-height) * 0.6);
  width: auto;
  display: block;
  transition: transform var(--transition-base);
}

.logo:hover .logo__icon {
  animation: cookie-wiggle 4s ease-in-out infinite;
}

.logo__text img {
  height: calc(var(--header-height) * 0.3);
  width: auto;
  display: block;
  transition: transform var(--transition-base);
}
@keyframes cookie-wiggle {
  /* 0% - 20% — это активная фаза (движение) */
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-8deg);
  } /* аналог ваших 25% */
  15% {
    transform: rotate(8deg);
  } /* аналог ваших 75% */
  20% {
    transform: rotate(0deg);
  } /* возврат в исходную точку */

  /* 20% - 100% — это фаза покоя (пауза) */
  100% {
    transform: rotate(0deg);
  }
}
.search-container,
#themeToggle,
.user-panel {
  display: none;
}

/* Анимация пульсации, если есть почта */
@keyframes pulse-white {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  width: var(--header-height);
  height: var(--header-height);

  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;

  position: relative;
  z-index: 210;
}

.burger span {
  display: block;
  width: var(--icon-size);
  height: 2px;
  background: var(--color-accent-text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger.open span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

.mobile-search {
  position: relative;
  display: flex;
  padding: 0 var(--space-md);
  box-sizing: border-box;
  width: 100%;
}

.mobile-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
  font-size: var(--input-font-size);
  height: var(--input-height);
  color: var(--color-text);
  transition: var(--transition-base);
  outline: none;
}

.mobile-search input::placeholder {
  color: var(--color-input-placeholder);
}

.mobile-search input:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.mobile-search button {
  position: absolute;
  /* Выравниваем кнопку внутри паддингов родителя */
  right: calc(var(--space-md) + var(--space-xs));
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-muted);
  display: flex;
  padding: 0;
}

body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- Оверлей (затемнение фона) --- */
.menu-overlay {
  position: fixed;

  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* Полупрозрачный черный */
  backdrop-filter: blur(8px);
  /* Размытие контента сзади */

  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: 998; /* Чуть ниже самого меню */
}
/* Показываем оверлей, когда меню открыто */
body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
}

body.menu-open .main-nav {
  right: 0;
}

.mobile-user-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.mobile-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

.btn-mobile-login,
.btn-mobile-reg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
}

/* Акцент на кнопку входа */
.btn-mobile-login {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-mobile-login .icon {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  fill: var(--color-accent);
}

/* Стиль профиля в мобилке */
.profile-btn-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 1;
  text-align: left;
  font-family: var(--font-main);
}

.avatar-mini {
  overflow: hidden;
  flex-shrink: 0;
  width: var(--avatar-size-lg);
  /* 48px */
  height: var(--avatar-size-lg);
  border-radius: 50%;
  display: block;
}

.avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-info b {
  font-size: var(--text-lg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

.user-info span {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.pm-badge {
  margin-inline-start: auto;
  background: var(--color-accent);
  color: var(--color-accent-text);
  line-height: var(--icon-size);
  height: var(--icon-size);
  width: var(--icon-size);
  text-align: center;
  border-radius: 9999px;
  font-size: var(--text-xs);
}
.pm-badge:not(:empty):not([title*="- 0"]) {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  animation: pulse-white 2s infinite;
}

.mobile-menu__footer {
  margin-top: auto;
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Текст слева, кнопка справа */
  padding: var(--space-md) 0;
  /*background: var(--color-bg-soft); Легкий фон для выделения */
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: var(--transition-base);
  height: 48px;
}
.theme-item__label {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

.theme-toggle#themeToggleMobile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* background: var(--color-card);*/
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  padding: 0;
}

.theme-item:active {
  color: var(--color-accent);
}

.theme-toggle#themeToggleMobile .theme-icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--color-muted);
}

.dle_theme_dark .theme-toggle .icon-moon {
  display: none;
}
.dle_theme_dark .theme-toggle .icon-sun {
  display: flex;
}
html:not(.dle_theme_dark) .theme-toggle .icon-sun {
  display: none;
}

.dle_theme_dark .label-to-dark {
  display: none;
}

.dle_theme_dark .label-to-light {
  display: flex;
}

html:not(.dle_theme_dark) .label-to-dark {
  display: flex;
}
html:not(.dle_theme_dark) .label-to-light {
  display: none;
}

/* =============================================================
   UTILITIES
   ============================================================= */

.posts-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card-base {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--card-padding);
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
  margin-left: calc(var(--container-padding) * -1);
  margin-right: calc(var(--container-padding) * -1);
  width: auto;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  content-visibility: auto;
  contain-intrinsic-size: auto 670px;
}
.posts-feed .post-card:nth-child(-n + 2) {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.post-card:hover {
  box-shadow: var(--shadow-md);
}
.post-card__image {
  position: relative;
  display: block;
}
.video-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центровка */

  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none; /* Клик будет проходить сквозь иконку на ссылку */
  z-index: 2;
}

/* Рисуем треугольник внутри */
.video-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%; /* Небольшое смещение вправо для визуального баланса */
  transform: translate(-50%, -50%);

  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
}
.post-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.post-card__header_left {
  flex-grow: 1;
}

.post-card__title {
  margin: 0 0 var(--space-xs) 0;

  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.post-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-base);

  /* Обрезка текста до 2-х строк (теперь внутри ссылки) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__link:hover {
  color: var(--color-accent);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--lh-tight);
}

.post-card__meta > * {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
  gap: var(--space-xs);
}

.post-card__meta a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

.post-card__meta a:hover {
  color: var(--color-text-soft);
}

/* Для иконок (SVG) лучше сбросить это поведение */
.post-card__meta svg {
  display: block; /* Убирает лишний зазор снизу */
  line-height: 0;
}

.post-card__meta-item:not(:last-child)::after {
  content: "•";
  /* Цвет точки можно сделать чуть светлее основного текста */
  color: var(--color-muted);
  opacity: 0.5;
  /* Отключаем подчеркивание у точки, если родитель — ссылка */
  text-decoration: none;
  display: inline-block;
}

.post-card__category {
  color: var(--color-text-soft);
  text-transform: uppercase;
  font-size: var(--text-xs); /* Еще мельче, но капсом */
  letter-spacing: 0.05em;
}

.post-card__more {
  margin-inline-start: auto;
  align-self: flex-start;
}
.post-card__more a {
  color: var(--color-text-soft);
}
.post-card__edit-btn {
  opacity: 0.7;
}
.post-card__edit-btn:hover {
  opacity: 1;
}

.post-card__content {
  font-family: var(--font-main);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  color: var(--color-text-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* Безопасный разрыв */
  line-break: loose; /* Для лучшей читаемости */
}

.post-card__content p {
  margin-bottom: var(--space-sm);
}

.post-card__content p:empty {
  display: none;
}

.post-card__content > *:last-child {
  margin-bottom: 0;
}

.post-card__content img,
.post-full__content img {
  display: block;
  max-width: 100%;
  aspect-ratio: auto;
  height: auto;
  order: none;
  border-radius: 0;
  margin-inline-start: calc(var(--card-padding) * -1) !important;
  margin-inline-end: calc(var(--card-padding) * -1) !important;

  width: calc(100% + (var(--card-padding) * 2));
  max-width: none !important;
}

.post-card__content br {
  display: none;
}

.post-card__readmore {
  display: flex;
}

.read-more-btn {
  display: inline-flex;
  padding: 0;
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

/* Эффект стрелочки */
.read-more-btn::after {
  content: "→";
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-base);
}

/* Состояния при наведении */
.read-more-btn:hover {
  color: var(--color-accent-down);
  background: none;
}

.read-more-btn:hover::after {
  /* Стрелка плавно отлетает вправо */
  transform: translateX(var(--space-xs));
}

/* Состояние при нажатии (active) */
.read-more-btn:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.post-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--space-sm);

  border-top: 1px solid var(--color-border);

  margin-left: calc(var(--card-padding) * -1);
  margin-right: calc(var(--card-padding) * -1);
  margin-bottom: calc(var(--card-padding) * -1);

  padding: 0 var(--card-padding);
}

.post-card__actions {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs); /* Расстояние между кнопками */
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-card__action > a,
.post-card__action > span,
.post-card__action > button,
.post-card__action-static {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit);

  min-height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0;

  color: var(--color-text-soft); /* Все по умолчанию серые */
  font-size: var(--text-sm);
  line-height: 1;

  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap; /* Чтобы "В закладки" не прыгало на вторую строку */
  transition: color var(--transition-base);
}

.post-card__action-text {
  display: none;
}
.post-card__static-item {
  cursor: default;
}

.post-card__action:hover > *,
.post-card__action button:hover {
  color: var(--color-accent) !important;
}

.post-card__action.post-favorites {
  display: flex;
  align-items: center;
}

.post-favorites-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit);
}

.post-favorites-link.is-active {
  color: var(--color-accent);
}

.post-card__action svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
  display: block;
}

.post-rating {
  display: flex;
  align-items: center;
}

.rate-controls {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.rate-controls > * {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  color: var(--color-text-soft);
  transition: var(--transition-base);
}

.rate-btn {
  display: flex;
  align-items: center;
  gap: var(--space-unit);
  transition: all var(--transition-base);
  min-width: var(--btn-h);
  min-height: var(--btn-h);
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  box-sizing: border-box;
}

.rate-count {
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
}

.rate-controls > *:hover {
  background: var(--color-card);
}

.rate-up:hover,
.rate-up.is-active {
  color: var(--color-like);
}

.rate-down:hover,
.rate-down.is-active {
  color: var(--color-dislike);
}

/** SIDEBAR **/

.main-layout__sidebar {
  width: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-widget__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);

  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.sidebar-widget__title::before {
  content: "";
  width: 3px;
  height: 18px;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);

  display: block;
  flex-shrink: 0;
}

.sidebar-widget a {
  color: var(--color-text);
}

.sidebar-widget a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.sidebar-widget > *:last-child {
  margin-bottom: 0;
}

dialog.modal {
  /* Сброс браузерных стилей */
  border: none;
  padding: 0;
  background: transparent;

  /* Центрирование */
  position: fixed;
  inset: 0;
  /* Растягиваем на весь экран */
  display: none;
  /* Скрываем по умолчанию */
  align-items: center;
  justify-content: center;

  /* Убираем стандартный margin браузера, который тянет его влево */
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
}

/* Когда диалог открыт через .showModal() в JS */
dialog.modal[open] {
  display: flex;
}

/* Стили для заднего фона (overlay) */
dialog.modal::backdrop {
  background-color: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(4px);
}

.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: var(--transition-base);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 460px;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: modalAppear var(--transition-base);
  gap: var(--space-md);
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(var(--space-sm)) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.modal__avatar {
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
  margin-bottom: var(--space-xs);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  padding: 3px;
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.modal__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.modal__subtitle {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-lg);
}

.profile-modal__admin {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  /* Небольшой трекинг для стиля */
  letter-spacing: 0.05em;
}

/* Меню профиля */
.profile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-menu a {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-base);
  text-decoration: none;
  color: var(--color-text-soft);
  transition: var(--transition-base);
}

.profile-menu a:hover {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.menu-counter {
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-bg);
  padding: calc(var(--space-unit) / 2) var(--space-xs);
  border-radius: var(--radius-base);
}

.menu-counter b {
  color: var(--color-accent);
}

.modal__footer {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modal__footer a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.modal__footer a:hover {
  text-decoration: underline;
}

.add-news {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  padding: var(--space-sm);
  border-radius: var(--radius-base);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-base);
}

.add-news:hover {
  background-color: var(--color-accent-down);
  transform: translateY(-1px);
}

.logout {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-dislike);
  text-decoration: none;
  opacity: 0.8;
  padding: var(--space-xs);
}

.logout:hover {
  opacity: 1;
  text-decoration: underline;
}

.login_form {
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
  text-align: left;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.form-label {
  font-family: var(--font-main);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input.form-input,
textarea.form-input,
select.form-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  height: var(--input-height);
  padding: 0 var(--space-md) /*0 calc(var(--icon-size) + var(--space-md));*/;
  line-height: var(--lh-tight);

  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);
  color: var(--color-input-text);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-main);
  font-size: var(--text-base);
  transition: var(--transition-base);
}
.form-input.input-icon-left {
  padding-left: calc(var(--icon-size-xs) + var(--space-md));
}
textarea.form-input--textarea {
  height: auto;
  min-height: 150px;
  line-height: var(--lh-relaxed);
  resize: vertical;
  padding: var(--space-md) !important;
}

input.form-input:focus,
textarea.form-input--textarea:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  background-color: var(--color-input-bg-focus);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

input.form-input + .input-icon,
input.form-input + svg {
  fill: var(--color-muted);
  color: var(--color-muted);
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  position: absolute;
  left: var(--space-sm);
}

input.form-input:focus + .input-icon,
input.form-input:focus + svg {
  /*color:var(--color-input-border-focus);
  fill:var(--color-input-border-focus);*/
}

input.form-input::placeholder {
  color: var(--color-input-placeholder);
  font-size: var(--text-sm);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.modal-content ul,
.modal-content li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-indent: 0 !important;
}

.modal-content a {
  text-decoration: none;
  transition: var(--transition-base);
  background: transparent !important;
  /* Убираем возможный фон у ссылок из DLE */
}

.modal-content a:hover {
  text-decoration: underline;
}

.modal-content .input-icon {
  position: absolute;
  left: var(--space-md);
  /* Центрируем иконку вертикально относительно 36px */
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size-sm);
  /* Используем уменьшенную иконку, если 20px слишком много */
  height: var(--icon-size-sm);
  color: var(--color-muted);
  pointer-events: none;
}

.login-socials {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  /* Расстояние между кнопками */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: var(--space-md) !important;
  /* Дополнительный зазор после разделителя */
  margin-bottom: var(--space-md) !important;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size-md);
  /* 40px */
  height: var(--avatar-size-md);
  background-color: var(--color-bg) !important;
  border-radius: var(--radius-base);
  color: var(--color-text-soft);
  transition: var(--transition-base);
}

.social-btn:hover {
  background-color: var(--color-accent-soft) !important;
  color: var(--color-accent);
  transform: translateY(-2px);
}

.social-btn .icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
  /* Чтобы иконка красилась в цвет текста */
}

/* Кнопка действия */
.modal-content .auth-btn {
  display: flex;
  width: 100%;
  margin-top: var(--space-sm);
  height: var(--input-height);
}

/* Ссылка "Забыли?" рядом с Label */
.login-lost-link {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: var(--space-xl);
  /* Увеличиваем верхний отступ */
  margin-bottom: var(--space-lg);
  /* Отступ до кнопок соцсетей */
  color: var(--color-muted);
}

/* Линии по бокам */
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Текст внутри разделителя */
.divider-text {
  padding: 0 var(--space-md);
  /* Отступы от линий до текста */
  font-family: var(--font-main);
  font-size: 10px;
  /* Очень мелкий, как в iOS */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* Разрядка букв для "премиального" вида */
  white-space: nowrap;
}

.tg-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.post-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.post-full__header {
  position: relative;
}

.post-full__more {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.post-full__edit-btn {
  opacity: 0.7;
}

.post-full__edit-btn:hover {
  opacity: 1;
}
.post-full__title {
  font-family: var(--font-display);
  margin-bottom: var(--space-xs);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.post-full__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.post-full__meta > * {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
  gap: var(--space-xs);
}

.post-full__meta a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

.post-full__meta a:hover {
  color: var(--color-text-soft);
}

.post-full__meta-item:not(:last-child)::after {
  content: "•";
  /* Цвет точки можно сделать чуть светлее основного текста */
  color: var(--color-muted);
  opacity: 0.5;
  /* Отключаем подчеркивание у точки, если родитель — ссылка */
  text-decoration: none;
  display: inline-block;
}
.post-full__category {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-full__stats {
  display: flex;
  align-items: center;
}

.post-full__views {
  display: inline-flex;
  align-items: center;
  gap: var(--space-unit);
}

.post-full__views svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentColor;
  opacity: 0.8;
  vertical-align: middle;
}

.post-full__views-count {
  font-weight: var(--fw-medium);
  /* color: var(--color-text); */
}

.post-full__content {
  font-family: var(--font-main);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  color: var(--color-text-soft);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  line-break: loose;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-full__content p:empty {
  display: none;
}

.post-full__content > *:last-child {
  margin-bottom: 0;
}

.post-full__body {
  display: flex;
  gap: var(--space-xs);

  flex-direction: column;
}
.post-full__body.is-nsfw  {
 position: relative;
  overflow: hidden;
    min-height: 320px;
}

.is-nsfw .post-full__content {
  filter: blur(40px);
  /* Сильное размытие */
  pointer-events: none;
  /* Чтобы нельзя было кликнуть по ссылкам внутри */
  user-select: none;
  /* Чтобы нельзя было выделить текст */
}
.post-full__content > div:first-child .dleplyrplayer {
  margin-top: 0 !important;
}

.post-full__content > .dleplyrplayer:first-child {
  margin-top: 0 !important;
}

.post-full__content br {
  display: none;
}

.post-full__tags {
  display: flex;
  align-items: center;
  font-size: 0;
  flex-wrap: wrap;
}

.post-full__tags-title {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.post-full__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.post-full__tags a {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.post-full__tags-list a::before {
  content: "#";
  color: var(--color-accent);
  margin-inline-end: 2px;
}

.post-full__tags-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.post-full__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--space-sm);

  margin-left: calc(var(--card-padding) * -1);
  margin-right: calc(var(--card-padding) * -1);
  margin-bottom: calc(var(--card-padding) * -1);

  padding: 0 var(--card-padding);
}

.post-full__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-full__action > *,
.post-full__action-static {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Расстояние иконка-текст */

  padding: var(--space-xs) 8px; /* Одинаковая зона клика */

  color: var(--color-muted); /* Все по умолчанию серые */
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap; /* Чтобы "В закладки" не прыгало на вторую строку */
  transition: color var(--transition-base);
}

.post-full__static-item {
  cursor: default;
}

.post-full__action:hover > *,
.post-full__action button:hover {
  color: var(--color-accent) !important;
}

.post-full__action svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentColor;
}
.post-full__action-text {
  display: none;
}
.post-full__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-lg); /* Отступ от текста/картинки до линии */
  padding-top: var(--space-md); /* Отступ от линии до самих кнопок */
  padding-bottom: var(--space-sm);

  width: 100%; /* Занимает всю строку */
  align-items: center;
}

.post-full__nav:not(:has(.prev-btn)) {
  justify-content: flex-end;
}


.plyr__controls {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
  color: #fff !important;
}

.btn--nav {
  height: calc(var(--space-unit) * 10); /* 50px - чуть солиднее для десктопа */
  padding: 0 var(--space-lg); /* По 30px - широкая и надежная */
  flex: 1;
}
.btn--nav span {
  display: none;
}
.btn--nav .icon {
  width: 20px;
  height: 20px;
}
/* Обертка */
.post-item-wrapper {
  position: relative;
  display: inline-block; /* Чтобы обертка была по размеру картинки */
  width: 100%;
}

/* Кнопка на картинке */
.item-anchor-btn {
  position: absolute;
  top: var(--space-xs);
  left: 0;
  height: 32px;
  min-width: 40px;

  /* Делаем фон почти невидимым */
  background: var(--color-bg);
  /* Эффект матового стекла (очень важно для читаемости на пестром фоне) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Тонкая, едва заметная граница */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  color: var(--color-text-soft); /* Текст (номер) тоже полупрозрачный */
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  opacity: 0.5;

  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-base);
}

.item-anchor-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  opacity: 1;
  box-shadow: 0 0 15px rgba(255, 106, 0, 0.4); /* Твое любимое мягкое глоу */
  transform: translateY(-1px);
}

.item-anchor-btn.is-copied {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
  opacity: 1;
}

/* Чтобы картинка не плыла */
.post-item-wrapper img,
.post-item-wrapper video {
  display: block;
  max-width: 100%;
  height: auto;
}

.post-comments-area {
  scroll-margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.comments-empty-vibe {
  padding: var(--space-lg) var(--card-padding);
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-base, 12px);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* Иконка и пульсирующий сигнал */
.vibe-icon-box {
  position: relative;
  display: inline-block;
  font-size: 40px;
  margin-bottom: var(--space-md);
}

.vibe-signal {
  position: absolute;
  top: 5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background: var(--color-danger);
  border-radius: 50%;
  animation: vibe-blink 1.5s infinite;
}

@keyframes vibe-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}

/* Заголовок */
.vibe-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Текст сообщения */
.vibe-text {
  font-size: var(--text-base);
  color: var(--color-text-soft);
  line-height: var(--lh-base);
  max-width: 450px;
  margin: 0 auto 25px;
}

.vibe-text span {
  display: block;
  margin-top: 10px;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* Кнопка "Ожить" */
.btn-vibe {
  transition: all 0.2s ease;
}

.btn-vibe:hover {
  transform: translateY(-2px);
}

.btn-vibe:active {
  transform: translateY(2px);
}

.top-comm {
    position: relative;
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(135deg, #fffcf5 0%, #fff8e1 100%);
    border: 1px solid #ffe082; 
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-base);
 /*   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);*/
    overflow: hidden;
}

.dle_theme_dark .top-comm{
background: linear-gradient(135deg, rgb(23, 26, 33) 0%, rgb(35, 39, 48) 100%);
border: 1px solid rgba(255, 224, 130, 0.2); 
/*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);*/
}
/* Бейдж сверху */
.top-comm__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-unit);
    background: #fff8e1;
    color: #ffa000;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: var(--space-xs);
    letter-spacing: 0.5px;
}

.dle_theme_dark .top-comm__badge {
    background: rgba(255, 193, 7, 0.1);
    color: #ffca28;
    border: 1px solid rgba(255, 202, 40, 0.2);
}
.top-comm__container {
    display: flex;
    gap: 15px;
}

/* Аватар */
.top-comm__avatar {
    width: var(--avatar-size-sm);
    height:var(--avatar-size-sm);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Шапка */
.top-comm__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.top-comm__author {
    
  font-weight: var(--fw-semibold);
   
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: 1;
}

.top-comm__date {
     font-size: var(--text-sm);
   
  color: var(--color-text-soft);
}

/* Рейтинг */
.top-comm__rating {
    margin-left: auto;
    display:flex;flex-direction: row;gap:var(--space-xs);
}

.top-comm__rating-val {
  display:flex;
  gap:var(--space-unit);
    color: var(--color-like);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
}
.top-comm__rating-val__dislike {
  display:flex;
  gap:var(--space-unit);
    color: var(--color-dislike);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
}

/* Текст */
.top-comm__text {
    
  line-height: var(--lh-base);
  color: var(--color-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; 
  line-break: loose; 
  font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    font-style: italic; /* Выделяем как цитату */
}



.add-comment-form:last-child {
  margin-bottom: 0;
}

.comments-header {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-sm);
}

.comments-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}

.comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

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

  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.comments-count:has(span:empty),
.comments-count span:contains("0") {
  color: var(--color-text-soft);
  opacity: 0.6;
}
.comment img {
  max-width: 100%;
}
.last-comments {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.last-comments__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* 3. ИСКЛЮЧЕНИЕ ДЛЯ КОРНЯ */
/* Если это корень (is-root), нам не нужна горизонтальная ветка слева */
.comment.is-root .comment__tree-glue::after {
  display: none !important;
}

.comment__news-header a {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

.comments-tree-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /*overflow: visible !important;*/
}

/* Вложенные списки смещаются ровно на центр аватара */
.comments-tree-list .comments-tree-list {
  margin-inline-start: var(--indent-mobile);
  padding-left: 0;
}

.comment.is-root .comment__aside {
  padding-left: var(--c-padding-x-mobile);
  width: calc(var(--c-padding-x-mobile) + var(--avatar-size-sm));
}
/* Аватар */
.comment__aside {
  position: relative;
  display: flex;
  justify-content: center;
  width: var(--avatar-size-sm);
  flex-shrink: 0;
  align-self: flex-start;
}

/* Стили аватара, чтобы он был "поверх" и с чистыми краями */
.comment__avatar {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: 50%;
  position: relative;
  z-index: 5;
  /* Аватар выше всех линий */
  display: block;
  object-fit: cover;
}

.comment__status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: calc(var(--space-unit) * 2);
  height: calc(var(--space-unit) * 2);
  border-radius: 50%;
  border: 2px solid var(--color-card);
  z-index: 11;
}

.comment__status--online {
  background-color: var(--color-like);
}

.comment__status--offline {
  background-color: var(--color-muted);
}

/* Контентная часть */
.comment__content {
  flex-grow: 1;
  min-width: 0;

  background: var(--color-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Шапка комментария */
.comment__header {
  line-height: var(--lh-tight);
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--text-md);
  color: var(--color-text-soft);
  line-height: 1;
}
.comment__meta a {
  color: inherit;
} /*
.post-comment__meta > * {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
  gap: var(--space-xs);
}*/

.comment__meta-item:not(:last-child)::after {
  content: "•";
  margin: 0 var(--space-xs);

  opacity: 0.5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none !important;
  pointer-events: none;

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

.comment__author {
  font-weight: var(--fw-semibold);
}

.comment__date {
  color: var(--color-text-soft);
}

.comment__stat {
  font-weight: var(--fw-medium);
  color: var(--color-muted);
}

.comment__author:has(+ .comment__stat)::after {
  display: none;
}

.comment__badge {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 10px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.comment__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* Отступ между текстом, картинками и подписью */
}
/* Текст комментария */
.comment__body-text {
  line-height: var(--lh-base);
  color: var(--color-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* Безопасный разрыв */
  line-break: loose; /* Для лучшей читаемости */
  font-size: var(--text-base);
}
.comment__body-text p:last-child {
  margin-bottom: 0;
}
.comment__body-gallery {
  margin: 0;
}
.comments-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 0;
  padding: 0;
  list-style: none;
}

.comments-image-gallery li {
  margin: 0;
  padding: 0;
}

.comments-image-gallery a {
  display: block;
  line-height: 0;
  outline: none;
}

.comments-image-gallery img {
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comments-image-gallery a:hover img {
  transform: scale(1.05);
  z-index: 2;
  position: relative;
}

.comment__body-signature {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  font-style: italic;
  opacity: 0.8;
}

.comment__footer {
  margin: 0;
}

.comment__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.actions-left {
  display: flex;
  gap: var(--space-md);
}
.comment__action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-base);
  cursor: pointer;
  padding: 0;
  min-height: var(--btn-h);
}

.comment__action-link:hover {
  color: var(--color-accent-down);
}

.comment__utility {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.mass_comments_action {
  padding: var(--card-padding);
}
.comment__mass-action {
  position: absolute;
  right: 0;
  top: 0;
}
.comment__mass-action input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;

  width: 18px;
  height: 18px;
  background: var(--color-card);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);

  cursor: pointer;
  position: relative;
  outline: none;
  transition: all 0.2s ease;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.comment__mass-action input[type="checkbox"]:hover {
  border-color: var(--color-input-border-focus);
}

.comment__mass-action input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.comment__mass-action input[type="checkbox"]:checked::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: rotate(-45deg);
  margin-top: -2px;
}

.comment__mass-action input[type="checkbox"]:checked {
  box-shadow: var(--shadow-sm);
}

.comment__rating {
  align-items: center;
  display: inline-flex;
  background: transparent !important;
  border: none !important;
  gap: 8px;
}

.comment__rating .rating-up,
.comment__rating .rating-down {
  /* background: var(--color-bg);*/
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Рейтинг */
.rating-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.rating-group a {
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
  min-height: var(--btn-h);
  min-width: var(--btn-h);
  justify-content: center;
}
.rating-group a:hover .rating-up {
  color: var(--color-like);
  background-color: var(--color-like);
}

.rating-group a:hover .rating-down {
  color: var(--color-dislike);
  background-color: var(--color-dislike);
}
.rating-up,
.rating-down {
  display: flex;
  align-items: center;
  gap: var(--space-unit);
  color: var(--color-muted);
  transition: color 0.2s;
}

.rate-value {
  font-family: var(--font-main);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-soft);
}

.comment__more-trigger {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  transition: var(--transition-base);
}

.comment__more-trigger:hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
}

.comment__dropdown {
  display: none;
  /* Скрыто по умолчанию, нужно добавить JS для показа по клику */
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99999 !important;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  overflow: hidden;
}

.comment__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-soft);
  font-size: var(--text-base);
  transition: var(--transition-base);
}

.comment__dropdown-item:hover {
  color: var(--color-accent);
}

.comment__dropdown-item--danger {
  color: var(--color-dislike);
}

.comment__mobile-trigger {
  background: none;
  border: none;
  color: var(--color-muted);
  padding: var(--space-xs);
  display: block;
}

.comment__body :is(video, iframe, .dle_video_wrapper) {
  max-width: 900px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;

  display: block;

  border-radius: var(--radius-base);
  overflow: hidden;

  flex-shrink: 0;
}

.comment__body-text .dleplyrplayer,
.comment__body-text [class*="dle_video"],
.comment__body-text .plyr {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  display: block;
}

.comment__body-text iframe {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  display: block;
  max-width: 100%;
  border-radius: var(--radius-base);
}

.comment__body-text br + .dleplyrplayer,
.comment__body-text br + iframe {
  display: none;
}

.comment-form__subscribe .form-check-label {
  display: flex;
  gap: var(--space-xs);
  flex-direction: row;
}
.comment-form__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);

  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);

  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.comment-form__title::before {
  content: "";
  width: var(--space-unit);
  height: 20px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}
/* --- Поля гостя --- */
.comment-form__guest-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.comment-form__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-base);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  transition: var(--transition-base);
}

.comment-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-card);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.comment-form__mock {
  cursor: pointer;
  transition: var(--transition-base);
}

.comment-form__mock:hover .comment-form__editor.is-mock {
  border-color: var(--color-accent);
  background: var(--color-hover-bg);
}

.comment-form__editor.is-mock {
  pointer-events: none;
  /* Чтобы клик пролетал сквозь элементы на родительский div */
  background: var(--color-bg);
  opacity: 0.8;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-bottom: var(--space-sm);
  position: relative;
}

.comment-form__editor {
}

/* --- Основной враппер (Инпут-группа) --- */
.comment-form__editor.is-mock .comment-form__wrapper {
  display: flex;
  align-items: flex-end;
  /* Строго по центру */
  gap: var(--space-xs);
  /* 8px */
  padding: 0 var(--space-sm);
  /* 0 сверху/снизу, 12px по бокам */
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  min-height: var(--input-height);
  /* Ровно 40px */
  transition: var(--transition-base);
  box-sizing: border-box;
}

.comment-form__editor.is-mock .comment-form__wrapper:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* --- Поле ввода (Textarea) --- */
.comment-form__textarea {
  flex: 1;
  display: block;
  border: none !important;
  background: transparent !important;

  /* padding: 11px 0 !important; */
  margin: 0 !important;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  /* 0.86rem */
  line-height: 1.2;
  color: var(--color-text);
  resize: none;
  outline: none !important;
  min-height: 20px !important;
  overflow-y: hidden;
}

.comment-form__textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

/* --- Кнопки инструментов (Эмодзи, Аттач) --- */
.comment-form__tool-btn {
  width: var(--avatar-size-sm);
  /* 32px */
  height: var(--avatar-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  border-radius: 50%;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.comment-form__tool-btn:hover {
  background: var(--color-hover-bg);
  color: var(--color-accent);
}

.comment-form__tool-btn .icon {
  width: var(--icon-size-sm);
  /* 18px */
  height: var(--icon-size-sm);
  fill: currentColor;
}

/* --- Кнопка Отправить (Компактная) --- */
.comment-form__submit-btn {
  /* 16px */
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  border-radius: 9999px;
  /* (32 / 2) */
  font-family: var(--font-main);
  font-size: var(--text-sm);
  margin-left: auto;
  /* 0.75rem */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  cursor: pointer;
  transition: var(--transition-base);

  /* opacity: 0.3;
  pointer-events: none;
  filter: grayscale(1);*/
}

/*.comment-form__textarea:not(:placeholder-shown)
  ~ .comment-form__tools
  .comment-form__submit-btn,
.comment-form__textarea:not(:placeholder-shown) ~ .comment-form__submit-btn {
  opacity: 1;
  pointer-events: auto;
  filter: grayscale(0);
}

.comment-form__submit-btn:hover {
  background: var(--color-accent-down);
  transform: translateY(-1px);
}
*/
.comment-form__submit-btn__text {
  display: none;
}
.comment-form__editor.is-mock .comment-form__wrapper {
  align-items: center;
}
.comment-form__textarea-mock {
  flex: 1;
  height: var(--input-height);
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--color-muted);
  display: flex;
  align-items: center;

  margin: 0 !important;
}

.comment-form__submit-btn.is-disabled {
  background: var(--color-muted);
  opacity: 0.6;
}

.comment-form__hint {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
}

.comment-form__hint .accent {
  color: var(--color-accent);
  font-weight: 700;
}

/* --- Кнопки и инструменты --- */
.comment-form__tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* --- Эмодзи Пикер --- */
.comment-form__emoji-picker {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-base);
  padding: var(--space-sm);
  z-index: 10;
  margin-bottom: var(--space-xs);
}

.comment-form__emoji-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
}

.comment-form__emoji-list span {
  cursor: pointer;
  font-size: 1.2rem;
  padding: var(--space-xs);
  border-radius: 4px;
  transition: 0.2s;
}

.comment-form__emoji-list span:hover {
  background: var(--color-hover-bg);
}

/* --- Блок верификации --- */
.comment-form__verification {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.comment-form__captcha-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.comment-form__captcha-img img {
  border-radius: var(--radius-base);
  height: 44px;
}

.sidebar-topnews {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.top-card {
  position: relative;
  transition: var(--transition-base);
}

.top-card a , .top-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}

.top-card__thumb {
  margin: 0;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--color-bg);
}

.top-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.top-card__body {
  flex: 1;
  min-width: 0;
}

.top-card__title {
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-unit) 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-base);
}

.top-card__date {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.top-card:hover .top-card__title {
  color: var(--color-accent);
}

.top-card:hover .top-card__thumb img {
  transform: scale(1.1);
}

.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-hover-bg);
  font-size: 9px;
  font-weight: var(--fw-black);
  color: var(--color-muted);
  text-transform: uppercase;
}

.sidebar-discussed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dis-card {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
  transition: var(--transition-base);
}

.dis-card:last-child {
  border-bottom: none;
}

.dis-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dis-card__title {
  font-family: var(--font-main);
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-xs) 0;
  transition: color var(--transition-base);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dis-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.dis-card__comments {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: 1;
  padding: calc(var(--space-unit) * 0.5) var(--space-unit);

  gap: var(--space-unit);
}

.dis-card__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-weight: var(--fw-regular);
}

.dis-card__link:hover .dis-card__title {
  color: var(--color-accent);
}
.dis-card__count {
  line-height: 1;
  margin-bottom: 1px;
}
.friends-block {
  padding: 0;
}

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

.friends-list__item {
  margin-bottom: var(--space-xs);
}

.friends-list__link {
  filter: grayscale(1);
  opacity: 0.7;

  display: block;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  transition: color var(--transition-base);
}

.friends-list__link:hover {
  filter: grayscale(0);
  opacity: 1;
  padding-left: var(--space-unit);
}

.friends-list__link:hover .friends-list__name {
  color: var(--color-accent);
}

.friends-list__name {
  font-family: var(--font-main);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-list__desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

.friends-list__link::after {
  content: "↗";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--color-accent);
  transition: var(--transition-base);
}

.friends-list__link:hover::after {
  opacity: 1;
}

.related-posts {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.related-posts__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);

  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);

  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.related-posts__title::before {
  content: "";
  width: var(--space-unit);
  height: 20px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.related-card {
  background: var(--color-card);
  border-radius: var(--radius-base);
  overflow: hidden;
  transition: var(--transition-base);
}

.related-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.related-card__thumb {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg);
}

.related-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.related-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.related-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-text);
  /* Ограничение текста (многоточие на 3-й строке) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card__meta {
  margin-top: auto;
  /* Прижимает дату к низу, если заголовки разной длины */
}

.related-card__date {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.related-card:hover {
  box-shadow: var(--shadow-md);
}

.related-card:hover .related-card__thumb img {
  transform: scale(1.08);
}

.related-card:hover .related-card__title {
  color: var(--color-accent);
}

/* Анимация пульсации (блика) */
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.skeleton-rect,
.skeleton-line {
  background: linear-gradient(
    90deg,
    var(--color-bg-soft) 25%,
    var(--color-border) 50%,
    var(--color-bg-soft) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: var(--radius-base);
}

.skeleton-rect {
  height: 120px;
  width: 100%;
}

.skeleton-line {
  height: 12px;
  width: 80%;
}

.skeleton-line.short {
  width: 50%;
}

.related-card__thumb:empty,
.thumb-placeholder,
.is-loading {
  background: linear-gradient(
    90deg,
    var(--color-bg) 25%,
    var(--color-border) 50%,
    var(--color-bg) 75%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.related-card__thumb {
  background: var(--color-bg);
  position: relative;
}

.related-card__thumb img:not([src]),
.related-card__thumb img[src=""] {
  opacity: 0;
}

.auth-card {
  min-height: calc(100vh - var(--header-height));
  position: relative;
  animation: authFadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
}

.auth-form__input-row {
  display: flex;
  gap: var(--space-xs);
}

.auth-form__input-row .auth-form__input {
  flex: 1;
}

.auth-form__btn-check {
  height: var(--input-height);
}

/*
.auth-card select,
.auth-card textarea,
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.auth-card .auth-form__input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}*/

.auth-card .auth-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
}

.auth-card .auth-form__grid .auth-form__group {
  flex: 1 1 calc(50% - var(--space-md) / 2);
  min-width: 200px;
}

.auth-card .required {
  color: var(--color-accent);
  margin-inline-start: 2px;
}

.auth-card .auth-form__captcha {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.auth-card .captcha-img img {
  border-radius: var(--radius-base);
  height: var(--input-height);
}

/* --- Стили для иконки и заголовка --- */
.auth-card .auth-card__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  background-color: var(--color-accent-soft);
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  animation: authFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
}

.auth-card .auth-card__icon svg {
  fill: var(--color-accent);
}

.auth-card .auth-card__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.auth-card .auth-card__subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-lg);
}

.close-btn {
  width: 32px;
  height: 32px;
  background: var(--color-bg-soft);
  color: var(--color-text-soft);
  border: none;

  border-radius: 9999px;
  text-decoration: none;
  font-family: Arial, sans-serif; /* Arial очень стабилен для спецсимволов */
  font-size: 20px;
  line-height: 0;
  font-weight: var(--fw-light);
  transition: var(--transition-base);
  z-index: 10;
  cursor: pointer;
}
.close-btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-text-soft);
  transform: rotate(90deg);
}
.auth-card__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);

  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card .auth-form__group {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
}

.auth-card .auth-form__label {
}

.auth-card .auth-form__input,
.auth-card input.auth-form__input,
.auth-card textarea.auth-form__input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block;
  /* Убирает лишние зазоры снизу */
}
/*
.auth-card .auth-form__input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-md);
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-border);
  border-radius: var(--radius-base);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--text-base);
  transition: var(--transition-base);
}*/
/*
.auth-card .auth-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}*/

.auth-card .auth-form__input--textarea {
  height: auto;
  padding: var(--space-sm) var(--space-md);
  resize: vertical;
}

.auth-form__helper {
  font-size: var(--text-xs);
  margin-top: 4px;
  min-height: 14px;
}

/* Определение анимации */
@keyframes authFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-card__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
}

.auth-card__socials,
.auth-card__footer {
  animation: authFadeUp 0.5s ease-out 0.2s backwards;
}

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

.auth-form__submit {
  width: 100%;
  transition: var(--transition-base);
  margin-top: var(--space-md);
}

.auth-form__submit:hover {
  transform: translateY(-2px);
}

.auth-form__submit:active {
  transform: translateY(0);
}

.auth-card__footer {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.auth-card__footer a {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.auth-card__footer a:hover {
  text-decoration: underline;
}

.file-attachment {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  /* Светлая подложка */
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-base);
  margin: var(--space-lg) 0;
  transition: var(--transition-base);
}

.file-attachment:hover {
  border-color: var(--color-accent);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.file-attachment__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-base);
}

.file-attachment__icon .icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.file-attachment__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-attachment__label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-attachment__link {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-base);
}

.file-attachment__link:hover .file-attachment__name {
  color: var(--color-accent);
  text-decoration: underline;
}

.file-attachment__meta {
  font-weight: 400;
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-inline-start: var(--space-xs);
}

.file-attachment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 4px;
}

.file-attachment__stat,
.file-attachment__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

.file-attachment__view {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.file-attachment__view:hover {
  text-decoration: underline;
}

/* Модификатор "Доступ запрещен" */
.file-attachment--denied {
  border-style: solid;
  opacity: 0.8;
}

.file-attachment--denied .file-attachment__icon {
  background: #fee2e2;
  /* Бледно-красный */
  color: #ef4444;
}

/* --- Общие стили для всех рекламных блоков --- */
.ad-card,
.ad-widget {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clear: both;
}

/* Метка "Реклама" */
.ad-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 5;
  pointer-events: none;
}

/* Контейнер кода баннера */
.ad-code {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.ad-code img,
.ad-code iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* --- Скелетон анимация --- */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.ad-placeholder {
  position: absolute;
  inset: 0;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  z-index: 1;
  background: var(--color-card);
}

.skeleton-rect,
.skeleton-line {
  background: linear-gradient(
    90deg,
    var(--color-bg-soft) 25%,
    var(--color-border) 50%,
    var(--color-bg-soft) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 2s infinite linear;
  border-radius: var(--radius-base);
}

.skeleton-line {
  height: 12px;
  width: 80%;
}

.skeleton-line.short {
  width: 50%;
}

/* Логика скрытия: если в ad-code есть контент, прячем скелетон */
/*.ad-card:has(.ad-code > *) .ad-placeholder,
.ad-widget:has(.ad-code > *) .ad-placeholder {
  display: none;
}
*/
/* Скрываем весь виджет/карточку, если внутри ad-code нет дочерних элементов */
/*.ad-card:not(:has(.ad-code > *)),
.ad-widget:not(:has(.ad-code > *)) {
  display: none !important;
}
*/
/* Дополнительно: если ad-code пустой (даже без пробелов) */
/*.ad-card:has(.ad-code:empty),
.ad-widget:has(.ad-code:empty) {
  display: none !important;
}*/

/* --- Специфика для ЛЕНТЫ (Горизонтальная) --- */
.ad-feed {
  padding: var(--card-padding);
  min-height: 250px;
  box-shadow: var(--shadow-sm);
  width: auto;
}

.ad-feed .skeleton-rect {
  /* height: 140px;*/
  width: 100%;
}

/* --- Специфика для САЙДБАРА (Вертикальная) --- */
.ad-widget {
  padding: var(--space-sm);
  min-height: var(--sidebar-width);
  width: auto;
}

.ad-widget .skeleton-rect {
  height: 200px;
  width: 100%;
}

/* Липкий виджет (опционально) */
.ad-widget.is-sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  min-height: 600px;
}

.ad-widget.vertical {
  min-height: 600px;
}

.ad-widget.rect {
  min-height: 300px;
}

.site-footer {
  background-color: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-md);
}

.footer-logo span {
  color: var(--color-accent);
}

.footer-description {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.footer-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: var(--transition-base);
}

.footer-links a:hover {
  color: var(--color-accent);
  padding-left: 5px;
  /* Мягкий эффект при наведении */
}
/* Форма подписки */
.subscribe-form {
  display: flex;
  gap: 0;
  margin-top: var(--space-sm);
}

.subscribe-form input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-base) 0 0 var(--radius-base);
  background: var(--color-bg);
  font-size: var(--text-sm);
  outline: none;
}

.subscribe-form button {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  cursor: pointer;
  transition: var(--transition-base);
}

.subscribe-form button:hover {
  background: var(--color-accent-down);
}

/* Нижняя панель */
.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  align-items: center;
}

.footer-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  filter: grayscale(1);
  /* Делаем счетчики черно-белыми, чтобы не пестрили */
  opacity: 0.5;
  /* Делаем их полупрозрачными */
  transition: var(--transition-base);
}

.footer-stats:hover {
  filter: grayscale(0);
  /* При наведении становятся цветными */
  opacity: 1;
}

/* Ограничиваем высоту, если иконки слишком большие */
.footer-stats img {
  height: 31px;
  /* Стандартная высота кнопок LiveInternet/Яндекс */
  width: auto;
}

.lastcom-item {
  list-style: none;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}
.lastcom-item:first-child {
  padding-top: 0;
}
.lastcom-item:last-child {
  border-bottom: none;
}

.lastcom-link {
  display: block;
  text-decoration: none;
  transition: var(--transition-base);
}

/* Шапка комментария */
.lastcom-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.lastcom-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-accent);
  /* Выделяем автора оранжевым */
}

.lastcom-author b {
  font-weight: 700;
}

.lastcom-icon-wrap .icon {
  width: 14px;
  height: 14px;
  fill: var(--color-muted);
}

/* Текст комментария */
.lastcom-text {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Обрезать текст после 2-й строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ссылка на новость под текстом */
.lastcom-news-title {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Эффект при наведении */
.lastcom-link:hover .lastcom-text {
  color: var(--color-text);
}

.lastcom-link:hover .lastcom-author {
  color: var(--color-accent-down);
}

.lastcom-author {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Чуть больше отступ для фото */
}

.lastcom-avatar {
  width: 24px;
  /* Компактный размер для сайдбара */
  height: 24px;
  flex-shrink: 0;
  /* Чтобы фото не сжималось */
  border-radius: 50%;
  /* Круглая аватарка */
  overflow: hidden;
  background: var(--color-bg);
  /* Фон, если фото долго грузится */
  border: 1px solid var(--color-border);
}

.lastcom-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Чтобы фото не искажалось */
  display: block;
}

.static-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Шапка страницы */
.static-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border);
}

.static-card__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Кнопка редактирования */
.static-card__btn-edit {
  display: inline-flex;
  align-items: center;
}

.static-card__content {
  line-height: var(--lh-relaxed);
  color: var(--color-text-soft);
  font-size: var(--text-base);
}

.static-card__content p {
  margin-bottom: var(--space-sm);
}

.static-card__content p:empty {
  display: none;
}

.static-card__content > *:last-child {
  margin-bottom: 0;
}

.static-card__content ul {
  padding-left: revert;
  margin-block-start: revert;
  margin-block-end: revert;
  list-style-type: revert;
}

/* Навигация по страницам ({pages}) */
.static-card__nav {
  margin-top: var(--space-lg);
  padding: var(--space-sm);
  background: var(--color-bg-soft);
  border-radius: var(--radius-base);
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
}

.title_quote {
  font-size: var(--text-xs);
  color: var(--color-muted);

  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  border: none;
  font-weight: var(--fw-regular);
  margin-top: var(--space-sm);
}

/* тело цитаты */
.quote,
blockquote {
  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md) 0;
  border: none;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.quote,
blockquote,
.title_quote {
  border-left: 3px solid var(--color-border);
}

.title_quote {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.quote,
blockquote {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* вложенные цитаты */
.quote .quote,
blockquote blockquote {
  margin-top: var(--space-sm);
  border-left: 3px solid var(--color-border);
  background: transparent;
}

/* убрать кривые br от DLE */
.quote + br,
blockquote + br {
  display: none;
}

/* компактнее текст внутри */
.quote p,
blockquote p {
  margin: var(--space-xs) 0;
}

.title-quote::before {
  content: "❝";
  margin-inline-end: var(--space-xs);
  color: var(--color-meta);
}

.title_quote b,
.title_quote strong {
  color: var(--color-text);
}

#dleprofilepopup {
  padding: 0 !important;
  /* Убираем белое поле вокруг твоей карточки */
  margin: 0 !important;
  overflow-x: hidden;
  /* Убираем горизонтальный скролл, если появится */
}

/* Основной контейнер */
.usercard {
  background-color: var(--color-card);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  /* Убираем рамку, если она была у .usercard */
  border-radius: 0;
  /* Внутри окна скругления по краям обычно не нужны */
  box-shadow: none !important;
  /* Тень уже есть у самого окна диалога */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.usercard__header,
.usercard__content,
.usercard__footer {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.usercard__header {
  padding-top: var(--space-lg);
}

.usercard__footer {
  padding-bottom: var(--space-lg);
}

.ui-dialog .ui-dialog-buttonpane {
  margin-top: 0 !important;
  border-top: 1px solid var(--color-border);
  background: var(--color-card);
}

/* Шапка карточки */
.usercard__header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: var(--space-lg, 20px);
}

.usercard__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.usercard__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Статусная точка на аватаре */
.usercard__status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-card);
}

.usercard__status-dot.is-online {
  background-color: var(--color-like);
}

.usercard__status-dot.is-offline {
  background-color: var(--color-muted);
}

/* Имя и группа */
.usercard__name {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

.usercard__status-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.usercard__label {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-base);
  font-weight: var(--fw-semibold);
}

.usercard__label--online {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Таблица статистики (в стиле .comment__content) */
.usercard__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}

.usercard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.usercard__label-text {
  font-size: var(--text-md);
  color: var(--color-muted);
}

.usercard__value {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
}

.usercard__links {
  margin-inline-start: var(--space-xs);
}

.usercard__links a {
  color: var(--color-accent);
  font-size: var(--font-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.usercard__links a:hover {
  border-bottom-color: var(--color-accent);
}

/* Футер и кнопка */
.usercard__footer {
  margin-top: var(--space-lg);
}
/*
.usercard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.usercard__btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.usercard__btn--primary:hover {
  background-color: var(--color-accent-down);
}
*/
.usercard__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Лучше для многострочных данных */
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

/* По умолчанию все панели скрыты */
.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Показываем только активную панель */
.tab-pane.is-active {
  display: block;
  opacity: 1;
}

/* --- Вкладки и анимации переключения --- */
.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-pane.is-active {
  display: block;
  opacity: 1;
}

.profile-card__tabs {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.profile-card__tabs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-lg);
}

.profile-card__tabs li a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  font-family: var(--font-main);
  position: relative;
  transition: color var(--transition-base);
}

.profile-card__tabs li.is-active a,
.profile-card__tabs li.active a {
  color: var(--color-accent);
}

.profile-card__tabs li.is-active a::after,
.profile-card__tabs li.active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  border-radius: 3px 3px 0 0;
}

/* --- Секции контента --- */
.profile-card__section {
  padding: 0 var(--space-lg) var(--space-lg);
}

.profile-card__section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.profile-card__data-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.profile-card {
  display: flex;
  gap: var(--space-md);
  flex-direction: column;
}

.profile-card__header {
  position: relative;
}

.profile-card__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}
.profile-card__user-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.profile-card__info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.profile-card__avatar-wrapper {
  position: relative;
  width: var(--avatar-size-2xl);
  height: var(--avatar-size-2xl);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  padding: 3px;
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.profile-card__avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}

.profile-card__user {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.profile-card__status-dot {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--color-card);
  border-radius: 50%;
}

.profile-card__status-dot.online,
.is-online {
  background-color: var(--color-like);
}

.profile-card__status-dot.offline,
.is-offline {
  background-color: var(--color-muted);
}

.profile-card__username {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.profile-card__bio {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
}

.profile-card__stats {
  display: flex;
  flex-direction: column;
}

/* Верхний ряд: Посты и Комменты */
.profile-card__main-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.profile-card__main-metrics .profile-card__stat-item {
  background: var(--color-input-bg);
  padding: var(--space-sm);
  border-radius: var(--radius-base);
  text-align: center;
}

.profile-card__stat-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-main);
}

/* Нижние блоки: Рейтинги */
.profile-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.profile-card__stat-item--wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02); /* Легкий фон для разделения */
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.profile-card__stat-label {
  color: var(--color-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Стилизация того, что выплевывает DLE внутри {rate} */
.ratingtypeplusminus {
  font-weight: var(--fw-bold);
  margin: 0 2px;
}

.ratingplus {
  color: #2ecc71;
} /* Зеленый */
.ratingminus {
  color: #e74c3c;
} /* Красный */
.ratingzero {
  color: var(--color-muted);
}

.profile-card__stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.profile-card__stat-value {
  font-family: var(--font-main);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.profile-card__stat-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Кнопки --- */
.profile-card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.profile-card__fieldset {
  border: none;
  padding: 0;
}

/* Заголовок группы (legend) */
.profile-card__fieldset legend {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  display: block;
  width: 100%;
}

/* Контейнер */
.post-card__body.is-nsfw {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.is-nsfw {
    min-height: 320px;
    max-height: 600px;
}
/* Блюрим только контент, когда родитель имеет класс is-nsfw */
.is-nsfw .post-card__content {
  filter: blur(40px);
  /* Сильное размытие */
  pointer-events: none;
  /* Чтобы нельзя было кликнуть по ссылкам внутри */
  user-select: none;
  /* Чтобы нельзя было выделить текст */
}

/* Накладка с текстом */
.nsfw-overlay {
  position: absolute;
  inset: 0;
  /* Растянуть на весь блок */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  /* Светлая подложка */
  backdrop-filter: blur(10px);
  /* Дополнительное размытие под текстом */
  z-index: 10;
  padding: var(--space-lg);
  text-align: center;
  transition: opacity 0.3s ease;
}

/* Скрываем накладку, если класс is-nsfw убран */
:not(.is-nsfw) > .nsfw-overlay {
  display: none;
}

/* Стили текста внутри */
.nsfw-inner h3 {
  margin-bottom: var(--space-md);
  font-size: var(--text-h4);
  color: var(--color-text);
  opacity: 0.9;
}

.nsfw-inner p {
  font-size: var(--text-base);
  color: var(--color-text);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.nsfw-hint {
  color: var(--color-text);
  opacity: 0.6;
  font-size: 0.85rem;
}

/* Акценты (ссылки) внутри прозрачного текста должны быть яркими */
.nsfw-hint .accent {
  opacity: 1;
  /* Возвращаем полную видимость для кликабельных зон */
  color: var(--color-primary);
  /* Твой оранжевый */
  font-weight: 600;
}

.nsfw-btn {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: var(--space-md);
}

.nsfw-btn:hover {
  transform: scale(1.05);
}

.nsfw-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  opacity: 0.7;
  margin-bottom: var(--space-md);
}

.dle_theme_dark .nsfw-overlay {
  /* В темноте используем более темное стекло */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

/* Когда открыто */
.nsfw-wrapper.is-opened img {
  filter: blur(0);
}

.nsfw-wrapper.is-opened::after {
  opacity: 0;
}

/* Чтобы highslide не срабатывал, пока блюр активен */
.nsfw-wrapper:not(.is-opened) a {
  pointer-events: none;
  cursor: default;
}
.feedback-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.feedback-page__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
}

.feedback-page__subtitle {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.pm-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.pm-page__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
}
.pm-msg__author {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.pm-msg__date {
  opacity: 0.8;
}

.pm-msg__content {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.pm-msg__text {
  font-family: var(--font-main);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text-soft);
  word-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}
.pm-msg__text a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1.5px solid hsla(var(--accent-h), var(--accent-s), 50%, 0.2);
  transition: all var(--transition-base);
}

.pm-msg__text a:hover {
  color: var(--color-accent-down);
  border-bottom-color: var(--color-accent-down);
}

/* Цитаты [quote] */
.pm-msg__text blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--color-muted);
}

.pm-msg__text img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-base);
  margin: var(--space-sm) 0;
  box-shadow: var(--shadow-sm);
}

.pm-msg__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  opacity: 0.6;
  transition: opacity var(--transition-base);
}
.pm-msg__bubble:hover .pm-msg__actions {
  opacity: 1;
}
.pm-action-btn {
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.pm-action-btn:hover {
  transform: scale(1.1);
}

.pm-action-btn--danger {
  color: var(--color-dislike);
}

.pm-msg__avatar {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  flex-shrink: 0;
}
.pm-msg--self .pm-msg__avatar {
  display: none;
}
.pm-msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.pm-page__nav {
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.pm-nav-list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pm-nav-list__item {
  position: relative;
}

.pm-nav-list__item a {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
  color: var(--color-muted);
  font-family: var(--font-display); /* Акцентный шрифт для меню */
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Эффект при наведении */
.pm-nav-list__item a:hover {
  color: var(--color-accent);
}

.pm-nav-list__item a::after {
  content: "";
  position: absolute;
  bottom: -1px; /* Прижимаем к border-bottom навигации */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.pm-nav-list__item a:hover::after {
  transform: scaleX(1);
}

.pm-nav-list__item span {
  position: relative;
  z-index: 2;
}
.pm-msg {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  align-items: flex-start;
  max-width: 100%;
}
.pm-msg--self {
  flex-direction: row-reverse;
}
.pm-msg--self .pm-msg__meta {
  flex-direction: row-reverse;
}

.pm-msg__bubble {
  background: var(--color-bg-soft);
  padding: var(--space-md);
  border-radius: var(--radius-base);
  border-top-left-radius: 4px;
  max-width: 85%;
  transition: transform var(--transition-base);
}

.pm-msg--self .pm-msg__bubble {
  background: var(--color-accent-soft);
  border-radius: var(--radius-base);
  border-top-right-radius: 4px;
  border-top-left-radius: var(--radius-base);
}

.pm-msg--self .pm-msg__text blockquote {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--color-accent-text);
}

.pm-msg__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 4px;
}

.pm-compose__header {
  margin-bottom: var(--space-lg);
}

.pm-compose__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin: 0;
}

.pm-captcha {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.pm-captcha__img {
  border-radius: var(--radius-base);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.pm-form__actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.pm-dialog__reply {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pm tbody > tr:hover {
  background-color: var(--color-bg-soft);
}

.pm-dialog__submit {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    /* Плавное проявление */ max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    /* Плавное увеличение высоты */ margin-top 0.4s ease;
  margin-top: 0;
}
.pm-page .save-buttons {
  display: flex;
  gap: var(--space-sm);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* 8px */
  margin: var(--space-lg) 0;
}

/* Общий стиль для кнопок-стрелок и цифр */
.pagination__btn,
.pagination__pages a,
.pagination__pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: var(--radius-base);
  /* Твои 12px или около того */
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition-base);
  text-decoration: none;
  cursor: pointer;
}

/* Ссылки (неактивные страницы) */
.pagination__pages a,
.pagination__btn {
  background-color: var(--color-bg-soft);
  color: var(--color-text-soft);
}

/* Эффект при наведении */
.pagination__pages a:hover,
.pagination__btn:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Текущая страница (span) */
.pagination__pages span {
  background-color: var(--color-accent);
  color: #ffffff;
  cursor: default;
  box-shadow: 0 4px 12px rgba(255, 111, 0, 0.2);
}

/* Иконки в стрелках */
.pagination__btn .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/** nav lazy **/
.ajax-nav {
  margin-bottom: var(--space-md);
  text-align: center;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* Растягиваем на всю ширину карточки */
  max-width: 400px;
  height: var(--btn-h);
  background-color: var(--color-bg-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: var(--transition-base);
}

.btn-more:hover {
  background-color: var(--color-card);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-more .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.5s ease;
}

/* Анимация вращения при загрузке */
.btn-more.is-loading .icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.search-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.search-page__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
/* Общий контейнер */
.search-page__container {
  /*padding: var(--card-padding);*/
}

/* Сетка для расширенного поиска (если DLE выводит таблицу) */
.search-page__extended-content {
  margin-bottom: var(--space-lg);
}

/* Группа кнопок */
.search-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Специфический отступ для футера результатов */
.search-page__footer {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* Сетка для блоков расширенного поиска */
.search-page__extended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Блок, который должен занимать всю ширину (например, категории) */
.search-page__block--full {
  grid-column: 1 / -1;
}

/* Стили для fieldset */
.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-md);
  height: 100%;
}

.form-legend {
  padding: 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* Флекс-ряды для настроек внутри */
.form-flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Исправляем стандартные селекты DLE, чтобы они не ломали верстку */
.search-page__extended-grid select {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-input-border);
  font-family: var(--font-main);
}
.category-select-wrapper select {
  width: 100%;
  min-height: 150px; /* Чтобы было удобно выбирать несколько категорий */
}
.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  text-decoration: none;
  transition: var(--transition-base);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-sm);
  background-color: var(--color-card);
}

/* Убираем рамку у последнего элемента в списке */
.search-result:last-child {
  border-bottom: none;
}

/* Эффект наведения */
.search-result:hover {
  background-color: var(--color-bg-soft);
}

.search-result__content {
  flex: 1;
  min-width: 0;
  /* Важно для корректной обрезки текста */
}

/* Заголовок результата */
.search-result__title {
  margin: 0 0 4px 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Обрезаем длинные заголовки */
}

/* Краткое описание */
.search-result__text {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Показываем максимум 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Иконка стрелочки справа */
.search-result__arrow {
  flex-shrink: 0;
  color: var(--color-text-soft);
  transition: transform var(--transition-base);
}

.search-result:hover .search-result__arrow {
  color: var(--color-accent);
  transform: translateX(3px);
}

.search-result__arrow .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

#searchsuggestions .seperator {
  background-color: var(--color-card);
  color: var(--color-text);
}

#searchsuggestions .seperator a {
  color: var(--color-muted);
}

#searchsuggestions .seperator a:hover {
  color: var(--color-accent);
}

#searchsuggestions a,
#searchsuggestions span.notfound {
  padding: var(--space-md) var(--space-lg);
  display: block;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.addnews-page {
  padding: var(--space-xl) var(--space-lg);
  margin: 0 auto;
}

.addnews-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.addnews-page__header {
  margin-bottom: var(--space-xl);
  /* Увеличиваем отступ ПЕРЕД первым полем (тема сообщения) */
  text-align: center;
  /* Если хочешь по левому краю, как на скрине */
}

/* Отступ между заголовком и подзаголовком */
.addnews-page__title {
  margin: 0 0 var(--space-sm) 0;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.addnews-page__subtitle {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-lg);
}

/* Сетка для имени и email */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-wrapper select {
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;

  height: var(--input-height);
  padding: 0 !important;

  background-color: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-base);

  line-height: var(--input-height) !important;
  font-size: var(--text-base);
  font-family: var(--font-main);
  cursor: pointer;
  outline: none;

  /* Убираем стандартную стрелку браузера */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  transition: var(--transition-base);
}

.custom-select-wrapper select::placeholder {
  color: var(--color-input-placeholder);
}

/* Эффект при фокусе */
.custom-select-wrapper select:focus {
  outline: none !important;
  background-color: var(--color-card) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* Добавляем свою стрелочку через псевдоэлемент или фон */
/*.custom-select-wrapper::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* Чтобы клик проходил сквозь стрелку в селект */
/* transition: var(--transition-base);*/
/*}*/

/* Поворот стрелочки при фокусе (не во всех браузерах работает без JS, но выглядит круто) */
.custom-select-wrapper:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
  stroke: var(--color-accent);
}

/* Стилизация выпадающих пунктов (option) */
.custom-select-wrapper select option {
  background-color: var(--color-input-bg);
  color: var(--color-text);
  padding: var(--space-sm) var(--space-md);
}

/* Футер и кнопка */
.addnews-page__footer {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.addnews-page__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  font-weight: 700;
}

.captcha-box {
  display: flex;
  flex-direction: row;
  /* По умолчанию друг под другом */
  gap: var(--space-sm);
}
/*
.form-input,
.form-group,
.addnews-page__form {
  width: 100%;
  max-width: 100%;
}*/

/* Кнопка "Добавить опрос" */
.btn-add-extra {
  background: none;
  border: 1px dashed var(--color-border);
  padding: 10px 15px;
  border-radius: var(--radius-base);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-base);
}

.btn-add-extra:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.add-news .plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-radius: 50%;
  margin-inline-end: var(--space-xs);
  font-size: var(--text-xs);
}

/* Группа кнопок внизу */
.button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
}

.form-info {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: var(--space-md) 0 0;
}

.required {
  color: var(--color-dislike);
}

/* Кастомный чекбокс */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 10px;
}

.form-checkbox__input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* Стили карточки инфо */

.info-block {
  margin-bottom: var(--space-lg); /* Отступ до начала ленты */
}
.info-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
/* Иконка в шапке */
.info-card__icon-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 75, 75, 0.1);
  border-radius: 50%;
  color: #ff4b4b;
}

.info-card__icon-wrapper .icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.info-card__title {
  font-family: var(--font-display);
  margin-bottom: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
/* Текст ошибки */
.info-card__text {
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Футер и кнопки */
.info-card__footer {
  margin-top: var(--space-xl);
}

/* Используем ту же сетку кнопок, что и в addnews */
.info-card__footer .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.info-card__btn {
  display: inline-flex;
  gap: var(--space-xs);
  flex: 1; /* На мобилках кнопки растягиваются */
  min-width: 160px;
}

/*******/

.account-card {
}

.account-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-direction: column;
}

.account-card__title {
  font-family: var(--font-display);
  margin-bottom: var(--space-xs);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.account-card__text {
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.account-card__content {
}
.account-card__footer {
  margin-top: var(--space-xl);
}

.account-card__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 160px;
}

.mini-editor {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f9f9f9;
  padding: 8px;
  font-family: inherit;
}

.mini-editor__input {
  width: 100%;
  min-height: 50px;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 15px;
  padding: 8px;
}

.media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.preview-item {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #eee;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-item.loading {
  font-size: 20px;
}

.rem-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.mini-editor__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.tool-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
}

.tool-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.btn-send {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
}

.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

.action-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.action-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: 0.3s;
}

.action-sheet.is-open .action-sheet__backdrop {
  opacity: 1;
}

.action-sheet__content {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--color-card);
  color: var(--color-text);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-sheet.is-open .action-sheet__content {
  bottom: 0;
}

.action-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--color-muted);
  margin: 0 auto var(--space-lg);
  border-radius: 2px;
}

.action-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-size: var(--text-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-soft);
  text-decoration: none;
}

.action-sheet-item.danger {
  color: var(--color-dislike);
}

.action-sheet__cancel {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  /* Отступ от основного списка */
  padding: var(--space-md);
  background: var(--color-bg-soft);
  /* Светло-серый фон подложки */
  border: none;
  border-radius: var(--radius-base);

  color: var(--color-text-soft);
  /* Не слишком яркий текст */
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

/* Эффект при нажатии */
.action-sheet__cancel:active {
  background: var(--color-border);
}

/* 2. ГОРИЗОНТАЛЬНАЯ ЛИНИЯ (Ветка) */
/* Рисуем только для ответов */
.comment.is-child .comment__tree-glue::after {
 content: "";
  position: absolute;
  /* Ширина ветки от края вложенности до центра аватара */
  right: 0;
  width: var(--indent-mobile);
  /* Высота вверх до родительского стебля */
  height: 50vh; 
  bottom: 0;

  border-left: var(--tree-line-width) solid var(--tree-line-color);
  border-bottom: var(--tree-line-width) solid var(--tree-line-color);
  border-bottom-left-radius: var(--tree-radius);
}
/* Корневой комментарий прижимаем влево */
.comment.is-root {
  padding-left: 0 !important;
}

/* Вложенный комментарий ДОЛЖЕН иметь padding-left, 
   чтобы было место для отрисовки горизонтальной ветки */
.comment.is-child {
  padding-left: var(--c-padding-x-mobile) !important;
}

/* Контейнер для линий */
.comment__tree-glue {
  position: absolute;
  top: calc(var(--avatar-size-sm) / 2);
  left: 50%; /* Центр аватара */
  width: 0;
  height: 0;
  z-index: 1;
}
/* ВЕРТИКАЛЬНАЯ ЛИНИЯ (Стебель) */
/* Рисуем её только если это НЕ последний элемент в списке ИЛИ если есть ответы */
.comments-tree-item:not(:last-child) > div > .comment .comment__tree-glue::before,
.comment.has-child .comment__tree-glue::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--tree-line-width) / -2);
  width: var(--tree-line-width);
  /* Делаем огромную высоту, которую обрежет overflow: hidden выше */
  height: 5000px; 
  background: var(--tree-line-color);
}

/* ГОРИЗОНТАЛЬНАЯ ЛИНИЯ (Ветка-уголок) */
/* Рисуем только для вложенных ответов */
.comment.is-child .comment__tree-glue::after {
  content: "";
  position: absolute;
  /* Ширина от края вложенности до центра аватара */
  right: 0;
  width: var(--indent-mobile);
  /* Высота от верха комментария до середины аватара */
  height: calc(var(--c-padding-y-mobile) + (var(--avatar-size-sm) / 2));
  bottom: 0;

  border-left: var(--tree-line-width) solid var(--tree-line-color);
  border-bottom: var(--tree-line-width) solid var(--tree-line-color);
  border-bottom-left-radius: var(--tree-radius);
}

/* Базовый стиль: у всех ответов есть паддинг слева для веток */
.comment {
  display: flex;
  gap: var(--space-sm);
  padding: var(--c-padding-y-mobile) 0 var(--c-padding-x-mobile);
  position: relative;
  background: var(--color-card);
}

/* ИСКЛЮЧЕНИЕ ДЛЯ КОРНЯ: прижимаем к краю */
.comment.is-root {
  padding-left: 0 !important;
}

/* Сдвигаем точку начала линий для корня, чтобы стебель был по центру смещенного аватара */
.comment.is-root .comment__tree-glue {
  left: calc(var(--c-padding-x-mobile) + (var(--avatar-size-sm) / 2));
}
.comments-tree-item {
  position: relative;
  /* Это обрубит все линии, которые пытаются вылезти за пределы ветки */
  overflow: hidden; 
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  border-radius: var(--radius-base);

  color: var(--color-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  /* Начальное состояние: скрыта */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  /* Тень тоже делаем мягче */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  background-color: rgba(255, 255, 255, 0.1); /* Очень бледный белый */

  /* ЭФФЕКТ РАЗМЫТИЯ ФОНА */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Для Safari */

  color: var(--color-text); /* Иконка должна быть темной на светлом */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая граница */
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.back-to-top:hover {
  transform: translateY(-5px);
  /* При наведении делаем кнопку полностью непрозрачной и яркой */
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  backdrop-filter: none; /* Убираем размытие при наведении */
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  /* Иконку тоже можно сделать чуть бледнее в обычном состоянии */
  opacity: 0.8;
}

.back-to-top:hover svg {
  opacity: 1;
}

.dleplyrplayer {
    margin-left: calc(var(--card-padding) * -1);
    margin-right:calc(var(--card-padding) * -1);
    width: calc(var(--card-padding) * 2 + 100%) !important;
    max-width: min(100%,800px);
    
    min-width:min(350px,100%);
}
/* =============================================================
   MEDIA QUERIES
   ============================================================= */

/* Адаптивность */
@media (max-width: 480px) {
  .vibe-title {
    font-size: 1.25rem;
  }
  .vibe-text {
    font-size: 0.95rem;
  }
  .btn-vibe {
    width: 100%;
  }
}

/* 3. Планшеты (Portrait) */
@media (min-width: 768px) {
 
  .dleplyrplayer {
    margin-left: auto;
    margin-right:auto;
    width:auto !important;
    
}
  .post-full__footer {
    margin: revert;

    padding: revert;
    padding-top: var(--space-sm);
  }
  .post-full__content .plyr {
    border-radius: var(--radius-base);
  }
  .post-card__content img,
  .post-full__content img {
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto;
    border-radius: var(--radius-base);
  }

  .post-card__footer {
    margin: revert;

    padding: revert;
    padding-top: var(--space-sm);
  }

  .rate-controls {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
  }
  .rate-controls > *:not(:last-child) {
    border-right: 1px solid var(--color-border);
  }
  .info-card {
  }

  .info-card__btn {
    flex: none;
  }
  .post-card__action-text {
    display: flex;
  }
  .ad-feed {
    width: 100%;
  }
  .ad-widget {
    width: 100%;
  }
  .post-card__actions {
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --radius-card: 20px;
    --btn-h: 40px;
  }

  .site-header .btn {
    min-height: var(--btn-h);
    padding: 0 var(--space-md);
  }

  .theme-toggle {
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: var(--transition-base);
  }

  .theme-toggle .theme-icon {
    flex-shrink: 0;
  }

  /* Базовый класс для всего кликабельного в шапке */
  .header__btn {
    appearance: none;
    background: none;
    border: none;
    box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    line-height: 1;

    border-radius: var(--radius-base);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-accent-text);
  }

  .header__btn:hover {
    color: var(--color-accent-text);
    background-color: rgba(255, 255, 255, 0.15);
  }

  .header__btn--primary {
    background-color: #ffffff;
    color: var(--color-accent);
  }

  .header__btn--primary:hover {
    background-color: var(--color-bg-soft);
    color: var(--color-accent);
  }

  .header__btn--ghost {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-accent-text);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .header__btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }

  .header__btn--icon {
    color: var(--color-accent-text);
    border-radius: 9999px;
  }

  .header__btn--icon:hover {
    color: var(--color-accent-text);
    background-color: rgba(255, 255, 255, 0.1);
  }

  .header__btn .icon {
    fill: currentColor;
  }
  .header__btn:hover .icon {
    fill: currentColor;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .card-base {
    border-radius: var(--radius-base);
    margin-left: 0;
    margin-right: 0;
  }

  .main-layout__container {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 300px);
  }

  .main-layout__sidebar {
    display: flex;
    width: var(--sidebar-width);
  }

  .related-posts__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
  }
  .auth-card .auth-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pm-msg--self .pm-msg__avatar {
    display: flex;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .btn--nav span {
    display: flex;
  }

  .comment__desktop-actions {
    display: flex;
    gap: var(--space-sm);
  }

  .comment__desktop-actions a {
    color: var(--color-muted);
    display: flex;
  }

  .comment__desktop-actions a:hover {
    color: var(--color-accent);
  }

  .comment__desktop-actions a.action-delete:hover {
    color: var(--color-dislike);
  }

  .comment__desktop-actions .icon,
  .comment__desktop-actions svg {
    fill: currentColor;
  }
  .comment-form__submit-btn {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-base);
  }
  .comment-form__submit-btn__text {
    display: block;
  }

  .comment__mobile-trigger {
    display: none;
  }
  .login-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }
  .reg-btn {
    display: inline-flex;
  }

  .profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding-right: var(--space-md);
  }

  .pm_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-xs);
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: var(--fw-black);
    line-height: 1;
    transition: var(--transition-base);

    /* По умолчанию (0 сообщений) — полупрозрачный */
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
  }

  .pm_num:not(:empty):not([title*="- 0"]) {
    background-color: #ffffff;
    color: var(--color-accent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    animation: pulse-white 2s infinite;
  }
}
@media (min-width: 1280px) {
  .menu-overlay,
  .mobile-user-panel,
  .mobile-search,
  .mobile-menu__footer,
  .burger {
    display: none;
  }
  #themeToggle,
  .user-panel {
    display: flex;
  }
  .search-input-icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    /* Центрируем иконку строго по центру инпута */
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-muted);
    pointer-events: none;
  }

  .search-desktop-btn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .search-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-wrapper {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 300px;

    /* Теперь враппер выглядит как инпут */
    display: flex;
    align-items: center;
    background: var(--color-card);
    padding: 0 15px;
    /* Отступы внутри враппера */
    height: 48px;

    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Анимация */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
  }

  .search-wrapper:focus-within {
    border-color: var(--color-accent);
    /* Твой оранжевый */
    box-shadow: 0 10px 30px rgba(255, 120, 0, 0.15);
  }

  .search-wrapper.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* "Обнуляем" инпут, так как стиль теперь на враппере */
  .desktop-search {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .search-wrapper::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-card);
    transform: rotate(45deg);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
  }

  .search-wrapper:focus-within::before {
    border-top: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
  }

  .search-desktop-btn {
    display: block;
  }

  .desktop-search input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    height: 100%;
    font-size: var(--text-sm);
    color: var(--color-text-soft);
    padding-left: var(--space-lg);
  }

  .dle_theme_dark .desktop-search input:focus {
    color: #111;
  }

  .desktop-search input::placeholder {
    color: var(--color-input-placeholder);
  }
  .main-nav {
    /* 1. Сбрасываем мобильное позиционирование */
    position: static; /* Возвращаем в поток документа */
    width: auto; /* Убираем фиксированную ширину */
    max-width: none;
    height: auto;
    box-shadow: none; /* Убираем тень шторки */
    border-left: none; /* Убираем левую границу */
    padding: 0; /* Убираем большие мобильные отступы */
    right: auto; /* Сбрасываем параметр right */

    /* 2. Делаем навигацию горизонтальной */
    flex-direction: row;
    align-items: center;
    gap: var(--space-md); /* Уменьшаем расстояние для десктопа */

    /* 3. Фон (обычно на десктопе навигация прозрачная внутри хедера) */
    background-color: transparent;
  }
  .main-nav .nav-list {
    flex-direction: row; /* Возвращаем в ряд */
    align-items: center;
    width: auto;
    padding: 0;
    gap: var(--space-md);
  }
  .nav-link {
    display: inline-flex;
    height: auto; /* Сбрасываем фиксированную высоту */
    font-size: var(--text-sm);
    /* В шапке текст снова белый/акцентный */
    color: var(--color-accent-text);
    padding: var(--space-xs) var(--space-sm);
  }

  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-accent-text);
  }
}


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


.dle-popup-mediaupload .tabs a {
    color: var(--color-text) !important;
}


.dle-popup-mediaupload .tabs a.current,.dle-popup-mediaupload .tabs a.current:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-bottom: none !important;
}

.dle-popup-mediaupload .tabs a:hover {
    background-color: var(--color-bg-soft)  !important;
    border: 1px solid var(--color-border)  !important;
}


.dle-popup-mediaupload .mediaupload-insert-params {
    background-color: var(--color-card) !important;
    border-top: 1px solid var(--color-border)  !important;
}
.ui-dialog label {
  color:var(--color-text-soft) !important;
}
.ui-dialog-content { border:1px solid var(--color-border) !important;}

div:has(> .dleplyrplayer) {
  display: block !important;
  text-align: center !important;
}