/* В начало style.css */
:root {
    --content-scale-factor: 1.0;
    --body-font: 'JetBrains Mono', monospace;
    --light-bg-color: #f8f9fa;
    --dark-bg-color: #12181f;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 45px;
    --sidebar-width-expanded: 250px;

    /* Light Theme Color Scheme */
    --primary-blue: #2563eb;
    --primary-red: #dc2626;
    --primary-yellow: #d97706;
    --primary-green: #059669;
    --background-main: #f8fafc;
    --background-card: #ffffff;
    --background-alt: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-strong: #94a3b8;
    --accent-blue: #3b82f6;
    --accent-blue-light: #dbeafe;
    --accent-red: #ef4444;
    --accent-green: #10b981;
    --accent-purple: #8b5cf6;
    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body.dark-theme {
    /* --- NEW DARKER BACKGROUNDS --- */
    --background-main: #010114;  /* Deepest Black-Blue (Page Background) */
    --background-card: #0e151c;  /* Very Dark Slate (Search Block/Container) */
    --background-alt: #181c24;   /* Slightly lighter for inputs/hovers */

    /* Adjusted text and borders to fit the new darker theme */
    --text-primary: #cdd3d9;
    --text-secondary: #a0a7b1;
    --text-muted: #6b7280;

    /* Darker borders to blend with the new background */
    --border-light: #252b36;
    --border-medium: #353d4a;
    --border-strong: #393d42;

    /* Accents (kept the same or adjusted slightly for contrast) */
    --accent-blue: #8cb4ff;
    --accent-blue-light: rgba(140, 180, 255, 0.08);
    --accent-red: #ff8a80;
    --accent-green: #81c784;
    --accent-purple: #ba68c8;

    /* Shadows adjusted for darker depth */
    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);

    /* Update background image to match darker tone (or keep your image) */
    --background-image: url('images/dark_1.jpg');
}

/* Единая CSS-переменная для всех цветов текста в формах (только для placeholders и дефолтных) */
:root {
    --form-text-color: #6b7280; /* Средне-серый для светлой темы */
}

body.dark-theme {
    --form-text-color: #828a95; /* Более подходящий серый для тёмной темы (из вашей --text-muted) */
}


input,
textarea,
select {
    font-family: 'Inter', monospace;
}

/* Global styles */
body {
    font-family: var(--body-font, 'Roboto', sans-serif);
    background-color: var(--background-main);
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 20px 65px 20px calc(20px + var(--sidebar-width-collapsed));
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s, padding-left 0.3s ease-in-out, padding-right 0.3s ease-in-out;
    overflow-y: scroll;
    min-height: 100vh;
}



.sidebar {
    width: var(--sidebar-width-collapsed);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1100;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out, right 0.3s ease-in-out;
    overflow-x: hidden;
    overflow-y: hidden;          /* ← ДОБАВИТЬ */
    -ms-overflow-style: none;    /* ← ДОБАВИТЬ (для Edge) */
    scrollbar-width: none;       /* ← ДОБАВИТЬ (для Firefox) */
}

.sidebar::-webkit-scrollbar {    /* ← ДОБАВИТЬ ЭТОТ БЛОК ПОЛНОСТЬЮ */
    display: none;
}

.sidebar.expanded {
    width: var(--sidebar-width-expanded);
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Sidebar item styles */
.sidebar-item {
    margin: 4px 8px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.15); /* Light gray background */
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.sidebar-item:hover {
    background: rgba(128, 128, 128, 0.25); /* Slightly darker gray on hover */
}

/* Bottom items specific styling */
.sidebar-item.bottom-item {
    margin: 6px 8px;
}

/* Spacer to push bottom items down */
.sidebar-spacer {
    flex: 1;
}

/* Sidebar buttons with centered icons and equal spacing */
.sidebar nav ul li a,
.sidebar nav ul li button,
.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;        /* ← ЭТО ЦЕНТРИРУЕТ ВСЁ ПО ГОРИЗОНТАЛИ */
    flex-direction: column;         /* ← Иконка сверху, текст снизу (в развёрнутом виде) */
    padding: 15px 8px;              /* ← Уменьшили боковые отступы, чтобы не растягивать */
    gap: 8px;                       /* ← Расстояние между иконкой и текстом */
    text-decoration: none;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    margin: 0;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Removed duplicate rule - using the updated version below with increased padding */

/* Разные цвета для иконок сайдбара */
.sidebar nav ul li:nth-child(1) i {
    color: #3b82f6 !important; /* Синий */
}

.sidebar nav ul li:nth-child(2) i {
    color: #10b981 !important; /* Зеленый */
}

.sidebar nav ul li:nth-child(3) i {
    color: #f59e0b !important; /* Оранжевый */
}

.sidebar nav ul li:nth-child(4) i {
    color: #8b5cf6 !important; /* Фиолетовый */
}

.sidebar nav ul li:nth-child(5) i {
    color: #ec4899 !important; /* Розовый */
}

.sidebar nav ul li:nth-child(6) i {
    color: #0ea5e9 !important; /* Небесно-синий */
}

.sidebar nav ul li:nth-child(7) i {
    color: #22c55e !important; /* Изумрудный */
}

/* Убираем фоновые градиенты для цветных иконок */
.sidebar nav ul li:nth-child(1) a,
.sidebar nav ul li:nth-child(1) button,
.sidebar nav ul li:nth-child(2) a,
.sidebar nav ul li:nth-child(2) button,
.sidebar nav ul li:nth-child(3) a,
.sidebar nav ul li:nth-child(3) button,
.sidebar nav ul li:nth-child(4) a,
.sidebar nav ul li:nth-child(4) button,
.sidebar nav ul li:nth-child(5) a,
.sidebar nav ul li:nth-child(5) button,
.sidebar nav ul li:nth-child(6) a,
.sidebar nav ul li:nth-child(6) button,
.sidebar nav ul li:nth-child(7) a,
.sidebar nav ul li:nth-child(7) button {
    background: none !important;
}

/* Hover эффекты для цветных кнопок */
.sidebar nav ul li a:hover,
.sidebar nav ul li button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Для темной темы - более насыщенные цвета иконок без фонов */
body.dark-theme .sidebar nav ul li:nth-child(1) a,
body.dark-theme .sidebar nav ul li:nth-child(1) button {
    background: none;
    color: #dbeafe;
}

body.dark-theme .sidebar nav ul li:nth-child(2) a,
body.dark-theme .sidebar nav ul li:nth-child(2) button {
    background: none;
    color: #d1fae5;
}

body.dark-theme .sidebar nav ul li:nth-child(3) a,
body.dark-theme .sidebar nav ul li:nth-child(3) button {
    background: none;
    color: #fed7aa;
}

body.dark-theme .sidebar nav ul li:nth-child(4) a,
body.dark-theme .sidebar nav ul li:nth-child(4) button {
    background: none;
    color: #e9d5ff;
}

body.dark-theme .sidebar nav ul li:nth-child(5) a,
body.dark-theme .sidebar nav ul li:nth-child(5) button {
    background: none;
    color: #fce7f3;
}

body.dark-theme .sidebar nav ul li:nth-child(6) a,
body.dark-theme .sidebar nav ul li:nth-child(6) button {
    background: none;
    color: #bae6fd;
}

body.dark-theme .sidebar nav ul li:nth-child(7) a,
body.dark-theme .sidebar nav ul li:nth-child(7) button {
    background: none;
    color: #bbf7d0;
}

.sidebar nav ul li i {
    font-size: 15px !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: color 0.3s ease;
}

.sidebar .menu-text {
    margin-left: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s;
    color: #ffffff;
}

.sidebar.expanded .menu-text {
    opacity: 1;
    visibility: visible;
}

/* --- Sidebar Light Theme Colors --- */
body:not(.dark-theme) .sidebar nav ul li a,
body:not(.dark-theme) .sidebar nav ul li button,
body:not(.dark-theme) .sidebar nav ul li i,
body:not(.dark-theme) .sidebar .menu-text {
    color: #4f555e;
}

/* Main Container */
.container {
    background-color: var(--background-card);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    padding: 25px;
    /* max-width: 1000px; */ /* Superseded by variable */
    margin: 0 auto;
    text-align: center;
    /* Применение переменной для ширины контейнера */
    max-width: var(--container-max-width, 1000px);
}

/* Main Container */
.container @media (min-width: 768px) { {
    border: 1px solid var(--border-light);
}}

/* Logo */
.logo {

    display: flex;
    justify-content: center;
    gap: 2px;
    letter-spacing: -0.05em;
    transition: transform 0.3s;
    cursor: default;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.dark-theme .logo {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ---
 * ! *!! BLOCKS REMOVED !!!
 * Removed old form styles (.form-row, .form-group, old input styles)
 * They are replaced by the "Ghost" design styles below.
 * --- */

#author-display {
background-color: #f5f5f5 !important;
color: #666 !important;
cursor: not-allowed !important;
user-select: none;
}

#author-display:not(:placeholder-shown) {
background-color: #e8f5e8 !important;
color: #2e7d32 !important;
font-weight: 500;
}

/* Block Shorts Toggle (Old styles, superseded by .toggle-slider) */
.form-group .toggle-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.toggle-button {
    display: inline-block;
    cursor: pointer;
    margin-bottom: 0;
}

.toggle-button input[type="checkbox"] {
    display: none;
}

/* Checkbox styles (Old) */
#exclude-indic {
display: none;
}

#exclude-indic + label {
position: relative;
padding-left: 35px;
cursor: pointer;
font-family: Roboto, sans-serif;
font-size: 15px;
}

#exclude-indic + label::before {
content: '';
position: absolute;
left: 5px;
top: 60%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #fff;
transition: all 0.3s ease;
}

#exclude-indic:checked + label::before {
background-color: #12181f;
border-color: #4d6887;
}

#exclude-indic:checked + label::after {
content: '✓';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 14px;
font-weight: bold;
}

#exclude-indic + label:hover::before {
border-color: #999;
}

/* Search Button (Old style, superseded by flexbox .search-btn) */
/* .search-btn { ... } */

.filter-note {
    margin-top: 0px;
    margin-bottom: 18px;
}

.filter-note.hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Controls */
.controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    padding: 5px;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.control-btn:hover {
    color: var(--accent-blue);
}

.mobile-controls-toggle {
    display: none;
}

.controls.open {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
    animation: slideDown 0.3s forwards;
}

body:not(.dark-theme) .controls.open {
    background-color: rgba(0, 0, 0, 0.02);
}

body.dark-theme .controls.open {
    background-color: rgba(255, 255, 255, 0.02);
}

.controls.open .control-btn {
    display: block;
}

.controls.open .mobile-controls-toggle i.fa-bars {
    display: none;
}

.controls.open .mobile-controls-toggle i.fa-xmark {
    display: inline-block;
}

.mobile-controls-toggle i.fa-xmark {
    display: none;
}

/* Results and Sorting */
.results {
    margin-top: 24px;
    text-align: left;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* В конец style.css */
.sort-options {
    display: none !important;
}

.sort-options [data-sort] {
    font-size: 16px;
    padding: 7px 18px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background-color: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-options [data-sort]:hover {
    background-color: var(--background-alt);
    border-color: var(--border-medium);
}

.sort-options [data-sort].selected {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    font-weight: 600;
}

/* Comments */
.comment {
    display: block;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease;
    background-color: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0px;
    margin-bottom: 20px;
    position: relative;
    overflow: visible;
    box-shadow: var(--shadow-light);
}

.comment:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--border-medium);
}

.comment.is-fading-out {
    opacity: 0;
    transform: scale(0.95);
}

.comment.is-new {
    opacity: 0;
    transform: translateY(20px);
}

/* Video Header */
.comment-video-header {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, var(--background-alt), var(--background-card));
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.preview-column .video-preview-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.video-data-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-width: 0; /* <-- FIX for flex overflow */
}

.video-data-title {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--text-primary);
    text-decoration-color: var(--accent-blue);
    text-underline-offset: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * ! *!! BLOCK REMOVED !!!
 * Old .video-data-grid styles.
 * Replaced by the new grid system at the end of the file.
 */

.video-data-item, .video-data-grid-item {
    margin: 2px 0;
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.video-data-item strong, .video-data-grid-item strong {
    color: var(--text-primary);
}

.video-data-button {
    background: linear-gradient(135deg, var(--accent-red), var(--primary-red)) !important;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    margin-top: 12px !important;
    display: inline-block;
    align-self: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-light);
}

.video-data-button i {
    margin-right: 8px;
}

.video-data-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* Comment Content */
.comment-content {
    padding: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--background-card);
    transition: background-color 0.3s ease-in-out;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: var(--text-muted);
    gap: 15px;
}

.comment-meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(66, 133, 244, 0.2);
    transition: border-color 0.3s;
    transform: scale(var(--image-scale-factor, 1.0));
    transform-origin: left center;
}

.author-avatar:hover {
    border-color: var(--accent-blue);
}

.username {
    color: var(--accent-blue);
    font-weight: 600;
    margin-right: 0;
}

.username::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-blue), transparent);
    margin-top: 2px;
}

.username.selectable-author {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.username.selectable-author:hover {
    background: rgba(33, 150, 243, 0.1);
    text-decoration: underline;
}

.username.selectable-author:active {
    background: rgba(33, 150, 243, 0.2);
    transform: scale(0.98);
}

.likes {
    margin-right: 15px; /* Увеличьте или уменьшите значение по вкусу */
    color: var(--text-muted);
}

.likes i.fa-thumbs-up {
    color: #FFCC4D;
    padding-right: 2px;
}

.favorite-btn {
    background-color: transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorite-btn:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background-color: var(--accent-blue-light);
}

.favorite-btn.favorited i.fa-star {
    color: #ffd700;
}

.comment-header-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.select-author-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.select-author-btn:hover {
    background: #e3f2fd;
    color: #2196f3;
}

.select-author-btn:active {
    transform: scale(0.95);
}

/* Comment Text */
.comment-text {
    word-break: break-word;
    font-size: calc(16px * var(--content-scale-factor, 1.0));
    line-height: 1.6;
    color: var(--text-primary);
}

.comment-text.truncated {
    max-height: 1450px;
    overflow: hidden;
}

.full-comment-text {
    display: none;
}

.full-comment-text.comment-text {
    display: block;
    margin-top: 10px;
}

.read-more-btn {
    color: var(--accent-blue);
    cursor: pointer;
    font-size: calc(14px * var(--content-scale-factor, 1.0));
    text-decoration: underline;
    margin-left: 5px;
    display: inline;
    padding: 0;
}

.read-more-btn:hover {
    color: #5a9eff;
}

/* Comment Footer */
.comment-footer {
    display: flex;
    justify-content: space-between; /* Это свойство расставит кнопки по краям, если их две */
    align-items: center;
    color: var(--text-muted);
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}

.source a {
    font-size: calc(14px * var(--content-scale-factor, 1.0));
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

.date-text {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: calc(14px * var(--content-scale-factor, 1.0));
}

/* Replies */
.replies {
    margin-top: 10px;
    display: none;
}

.replies.show {
    display: block;
}

.reply {
    background-color: var(--background-alt);
    border: 1px solid var(--border-light);
    border-radius: 8px;

    margin-top: 10px;
    position: relative;
    transition: background-color 0.3s ease;
}

.reply:hover {
    background-color: var(--background-card);
    border-color: var(--border-medium);
}

.reply .comment-header {
    margin-bottom: 15px;
}

.replies-footer {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-top: 8px;
}

.load-more-replies,
.back-to-parent-link {
    background-color: var(--background-alt);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    appearance: none;
    font-family: inherit;
    padding: 10px 16px;
    font-size: 0.9em;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.load-more-replies:hover,
.back-to-parent-link:hover {
    background-color: var(--background-card);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.back-to-parent-link i {
    margin-right: 8px;
    font-size: 1em;
}

.more-replies-notice {
    display: block;
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

.reply-hide-indicator {
    position: fixed;
    right: calc((100% - 800px)/2 - 55px);
    top: 50%;
    transform: translateY(-50%);
    background: #2d2d2d;
    color: white;
    width: 20px;
    height: 260px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
    z-index: 10;
}

/* Reactions */
.reply-footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reactions-count {
    background-color: var(--background-alt);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.reactions-count:hover {
    background-color: var(--border-light);
}

.reactions-count i {
    font-size: 11px;
}

.reactions-tooltip {
    position: absolute;
    z-index: 1080;
    background-color: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    padding: 8px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    padding: 4px 6px;
    border-radius: 4px;
    background-color: var(--background-alt);
}

.reaction-author {
    font-weight: bold;
    color: var(--accent-blue);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s;
}

.reaction-author:hover {
    border-bottom-color: var(--accent-blue);
}

.reaction-date {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-left: 15px;
    white-space: nowrap;
}

/* Mentions and Tooltips */
.mention {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    padding: 1px 4px;
    font-weight: 500;
    color: var(--accent-blue);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

.mention[data-comment-ref-id] {
    cursor: pointer;
    border-bottom: 1px dotted rgba(59, 130, 246, 0.5);
}

.mention[data-comment-ref-id]:hover {
    text-decoration: underline;
    background-color: rgba(59, 130, 246, 0.2);
}

.comment-tooltip,
.comment-preview-tooltip {
    position: absolute;
    z-index: 10020 !important;
    display: block;
    font-size: calc(14px * var(--content-scale-factor));
    line-height: 1.4;
    max-width: 470px;
    padding: 12px 15px;
    background-color: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    /* --- Fixes from later --- */
    display: inline-block;
    max-width: 450px !important;
    width: auto !important;
    box-sizing: border-box;
    white-space: normal;
}

.comment-tooltip,
.comment-preview-tooltip,
.mention-list-popup {
    pointer-events: auto !important;
}


.comment-preview-tooltip {
    max-height: 300px;
}

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

.tooltip-author {
    font-weight: bold;
    color: var(--accent-blue);
    display: block;
    margin-bottom: 5px;
}

.tooltip-avatar {
    margin-bottom: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.comment-tooltip::-webkit-scrollbar,
.comment-preview-tooltip::-webkit-scrollbar {
    width: 6px;
}

.comment-tooltip::-webkit-scrollbar-track,
.comment-preview-tooltip::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.comment-tooltip::-webkit-scrollbar-thumb,
.comment-preview-tooltip::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-red));
    border-radius: 3px;
}

/* Pop-up Selectors */
.font-selector, .size-selector, .image-size-selector {
    position: absolute;
    top: 50px;
    right: 10px;
    background: var(--background-card);
    padding: 10px;
    border: 1px solid var(--border-light);
    z-index: 1001;
    border-radius: 5px;
    display: none;
    width: 300px;
    box-sizing: border-box;
}

.font-selector.active,
.size-selector.active,
.image-size-selector.active {
    display: block;
}

.font-selector {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 150px;
}

.font-selector button {
    width: 100%;
    padding: 8px 12px;
    margin: 5px 0;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--background-alt), var(--background-card));
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.font-selector button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    background: linear-gradient(90deg, var(--border-light), var(--background-card));
}

.font-selector button.selected {
    background: linear-gradient(90deg, var(--accent-blue), #357ae8);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 0 2px #357ae8 inset;
}

.size-selector input[type="range"],
.image-size-selector input[type="range"] {
    width: 100%;
    height: 12px;
    margin: 5px 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

.size-selector input[type="range"]::-webkit-slider-runnable-track,
.image-size-selector input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #ccc;
    border-radius: 2px;
}

.size-selector input[type="range"]::-moz-range-track,
.image-size-selector input[type="range"]::-moz-range-track {
    height: 4px;
    background: #ccc;
    border-radius: 2px;
}

.size-selector input[type="range"]::-webkit-slider-thumb,
.image-size-selector input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent-blue);
    border-radius: 50%;
    margin-top: -4px;
    appearance: none;
}

.size-selector input[type="range"]::-moz-range-thumb,
.image-size-selector input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent-blue);
    border-radius: 50%;
}

/* Highlight Effects */
.highlight-blue {
    background-color: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) inset;
    border-radius: 8px;
}

.highlight-green {
    background-color: rgba(5, 150, 105, 0.08);
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) inset;
    border-radius: 8px;
}

.highlight-orange {
    background-color: rgba(217, 119, 6, 0.08);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) inset;
    border-radius: 8px;
}

.comment.highlight-blue .comment-content,
.reply.highlight-blue .comment-content {
    background-color: transparent !important;
}

.comment.highlight-green .comment-content,
.reply.highlight-green .comment-content {
    background-color: rgba(22,163,74,0.03) !important;
}

.comment.highlight-orange .comment-content,
.reply.highlight-orange .comment-content {
    background-color: rgba(249,115,22,0.02) !important;
}

/* Reaction-based highlights for dark theme */
body.dark-theme {
    --reaction-green-strong: #16A34A;
    --reaction-green-muted: rgba(22,163,74,0.10);
    --reaction-green-glow: rgba(22,163,74,0.14);
    --reaction-orange-strong: #F97316;
    --reaction-orange-muted: rgba(249,115,22,0.09);
    --reaction-orange-glow: rgba(249,115,22,0.12);
    --reaction-text-on-dark: #E6F9EA;
    --reaction-text-orange-on-dark: #FFF3E0;
}

.highlight-green {
    background-color: var(--reaction-green-muted);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.25), 0 0 12px var(--reaction-green-glow);
    border-radius: 6px;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.highlight-green.accent-left {
    border-left: 3px solid var(--reaction-green-strong);
    padding-left: 10px;
}

.username.highlight-green,
.mention.highlight-green,
.reaction-author.highlight-green {
    color: var(--reaction-green-strong) !important;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    background: transparent;
    padding: 1px 6px;
    border-radius: 4px;
}

.highlight-orange {
    background-color: var(--reaction-orange-muted);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25), 0 0 10px var(--reaction-orange-glow);
    border-radius: 6px;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.highlight-orange.accent-left {
    border-left: 3px solid var(--reaction-orange-strong);
    padding-left: 10px;
}

.username.highlight-orange,
.mention.highlight-orange,
.reaction-author.highlight-orange {
    color: var(--reaction-orange-strong) !important;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,0.55);
    background: transparent;
    padding: 1px 6px;
    border-radius: 4px;
}

.comment .username.highlight-green,
.reply .username.highlight-green {
    background-color: rgba(22,163,74,0.06);
    padding: 2px 6px;
    border-radius: 6px;
}

.comment .username.highlight-orange,
.reply .username.highlight-orange {
    background-color: rgba(249,115,22,0.05);
    padding: 2px 6px;
    border-radius: 6px;
}

.username.highlight-green:focus,
.mention.highlight-green:focus,
.username.highlight-orange:focus,
.mention.highlight-orange:focus {
    outline: 2px dashed rgba(255,255,255,0.06);
    outline-offset: 3px;
}

.username.highlight-green:hover,
.mention.highlight-green:hover,
.username.highlight-orange:hover,
.mention.highlight-orange:hover {
    transform: translateY(-1px);
    transition: transform 120ms ease;
}

/* Modal Windows */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s ease-in-out;
}

.modal-overlay:target,
.modal-overlay[style*="display: flex"] {
    display: flex !important;
    opacity: 1;
}

.modal-content {
    background: var(--background-card);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
    width: 100%;
    max-width: 400px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s;
    border: 1px solid var(--border-light);
}

.modal-overlay:target .modal-content,
.modal-overlay[style*="display: flex"] .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--text-primary);
}

#modal-body form {
display: flex;
flex-direction: column;
gap: 15px;
}

#modal-body input[type="text"],
#modal-body input[type="email"],
#modal-body input[type="password"] {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-light);
border-radius: 8px;
font-size: 16px;
background-color: var(--background-card);
color: var(--text-primary);
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}

#modal-body input:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px var(--accent-blue-light);
outline: none;
}

#modal-body button[type="submit"] {
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: var(--accent-blue);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
margin-top: 10px;
}

#modal-body button[type="submit"]:hover {
background-color: #357ae8;
transform: translateY(-2px);
}

#modal-body p {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: var(--text-muted);
}

#modal-body a {
color: var(--accent-blue);
text-decoration: none;
font-weight: bold;
}

#modal-body a:hover {
text-decoration: underline;
}

.modal-error {
    color: #ea4335;
    background-color: rgba(234, 67, 53, 0.1);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 14px;
}

/* Design Controls Modal */
.design-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.control-group label {
    font-size: 14px;
    color: var(--text-secondary);
}

.radio-group, .theme-options {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bg-variant-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.variant-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

.variant-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-right: 10px;
    min-width: 40px;
}

.bg-variant-btn {
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background-color: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.bg-variant-btn:hover {
    background-color: var(--background-alt);
    border-color: var(--border-medium);
}

.bg-variant-btn.selected {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    font-weight: 600;
}

.design-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.design-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px; /* Changed from 12px */
    background-color: var(--background-card); /* Changed from var(--background-alt) */
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    gap: 8px;
    color: var(--text-primary); /* <-- ДОБАВЛЕНО: Явно задаем цвет текста */
    font-size: 14px; /* <-- ДОБАВЛЕНО: для консистентности */
}

.design-option-btn input[type="radio"] {
    display: none;
}

.design-option-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.design-option-btn:has(input[type="radio"]:checked) {
    background-color: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: 0 0 10px var(--accent-blue-light);
}

.font-options {
    grid-template-columns: 1fr 1fr;
}

/* Mention Popups */
.mention-list-popup {
    position: absolute;
    background-color: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    padding: 8px 10px;
    z-index: 10010 !important;
    font-size: calc(14px * var(--content-scale-factor));
    line-height: 1.4;
    /* Fix from later */
    max-width: none !important;
    box-sizing: border-box;
}

.mention-list-item {
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
}

.mention-list-item:hover {
    background-color: var(--background-alt);
}

/* Author Popup */
.author-popup {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background-color: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    position: absolute;
    z-index: 1000;
    width: auto;
    min-width: 200px;
}

.author-popup::-webkit-scrollbar {
    width: 6px;
}

.author-popup::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 10px;
}

.author-popup-item {
    padding: 8px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.author-popup-item:last-child {
    border-bottom: none;
}

.author-popup-item:hover {
    background-color: var(--background-alt);
}

/* Scalable elements */
.scalable-text {
    font-size: calc(1em * var(--content-scale-factor, 1.0));
}

/* Scrollbar Styles */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#results-container::-webkit-scrollbar,
.author-popup::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#results-container::-webkit-scrollbar-track,
.author-popup::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#results-container::-webkit-scrollbar-thumb,
.author-popup::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-red));
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

html,
body,
#results-container,
.author-popup {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}

/* Images */
.video-thumbnail {
    width: 120px;
    height: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 5;
    object-fit: cover;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 5;
    object-fit: cover;
}

body.dark-theme .video-thumbnail,
body.dark-theme .author-avatar {
    background-color: #333;
    border-color: #666;
}

body.dark-theme .toggle-button-label {
    color: rgb(160, 167, 177);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* --- СТИЛИ ДЛЯ КОМПАКТНОГО ПРЕВЬЮ (ОБНОВЛЕННЫЕ) --- */

/* Контейнер для компактной полосы */
.comment-video-header-compact {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    /* Более современный фон с размытием */
    background-color: #313189;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Для поддержки Safari */
    color: #cdd3d9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: background-color 0.2s ease;
    min-height: 18px; /* Чтобы полоска не схлопывалась */
}

.comment-video-header-compact:hover {
    background-color: #3b515b;
}

/* Левая часть (только заголовок) */
.compact-header-left {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    flex-grow: 1; /* Позволяем занимать доступное пространство */
    min-width: 0; /* Важно для работы text-overflow в flex-контейнере */
}

.compact-title {
    font-weight: bold;
}

/* Центральная часть (точки) - по умолчанию пустая */
.compact-header-center {
    display: none; /* Скрыта по умолчанию */
    font-weight: bold;
    letter-spacing: 2px;
}

/* Правая часть (название канала и иконка) */
.compact-header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между каналом и иконкой */
    flex-shrink: 0; /* Чтобы не сжималась */
    margin-left: 20px; /* Отступ от заголовка */
}

.compact-channel {
    /* Более светлый цвет для названия канала */
    color: #cdd3d9;
    font-size: 13px;
}

.compact-youtube-icon {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s;
}

.compact-youtube-icon:hover {
    color: #ef4444; /* Красный цвет YouTube при наведении */
}

/* --- Логика при клике на полоску --- */

/* Когда полоска "открыта", скрываем левую и правую части */
.comment.header-toggled-on .compact-header-left,
.comment.header-toggled-on .compact-header-right {
    display: none;
}

/* И показываем центральные точки */
.comment.header-toggled-on .compact-header-center {
    display: block;
    width: 100%;
    text-align: center;
}

/* --- ОБЩАЯ ЛОГИКА ОТОБРАЖЕНИЯ (без изменений) --- */
.preview-mode-full .comment-video-header { display: grid; }
.preview-mode-full .comment-video-header-compact { display: none; }
.preview-mode-compact .comment-video-header { display: none; }
.preview-mode-compact .comment-video-header-compact { display: flex; }
.preview-mode-compact .comment.header-toggled-on .comment-video-header {
    display: grid;
}

/* --- СТИЛИ ДЛЯ ПОДСВЕТКИ КЛЮЧЕВЫХ СЛОВ --- */

mark {
    background-color: #dbeafe; /* Светло-голубой фон для светлой темы */
    color: #1e3a8a; /* Темно-синий текст */
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
}

body.dark-theme mark {
    background-color: #4a5568; /* Темно-серый фон для темной темы */
    color: #e2e8f0; /* Светлый текст */
}

/* --- СТИЛИ ДЛЯ КНОПОК-ФИЛЬТРОВ (ТЁМНАЯ ТЕМА, ЗЕЛЕНЫЙ ВАРИАНТ) --- */

/* Состояние по умолчанию (неактивное) */
body.dark-theme .toggle-button .toggle-slider {
    border-color: var(--border-medium); /* <--- Ставим общий цвет */
    color: var(--text-secondary); /* Нейтральный, приглушенный цвет для текста и иконок */
    transition: all 0.3s ease; /* Плавный переход для всех свойств */
}

/* Состояние при наведении курсора */
body.dark-theme .toggle-button:hover .toggle-slider {
    border-color: var(--text-muted); /* Обводка становится чуть ярче */
}

/* Активное состояние (кнопка нажата) */
body.dark-theme .toggle-button input[type="checkbox"]:checked + .toggle-slider {
    border-color: var(--accent-green); /* Яркая зелёная обводка */
    background-color: rgba(129, 199, 132, 0.1); /* Лёгкая зелёная подсветка фона */
    color: var(--accent-green); /* Текст и иконки становятся ярко-зелёными */
    font-weight: 700;
}


/* --- СТИЛИ ДЛЯ КНОПОК-ФИЛЬТРОВ (СВЕТЛАЯ ТЕМА, СИНИЙ ВАРИАНТ) --- */

/* Состояние по умолчанию (неактивное) */
body:not(.dark-theme) .toggle-button input[type="checkbox"] + .toggle-slider .toggle-text-simple {
    color: var(--text-secondary); /* Нейтральный, приглушенный текст */
}

body:not(.dark-theme) .toggle-button .toggle-slider {
    border-color: var(--border-medium);
}

/* Состояние при наведении курсора */
body:not(.dark-theme) .toggle-button:hover .toggle-slider {
    border-color: var(--border-medium); /* Обводка становится чуть ярче */
}

/* Активное состояние (кнопка нажата) */
body:not(.dark-theme) .toggle-button input[type="checkbox"]:checked + .toggle-slider {
    border-color: var(--accent-blue); /* Яркая синяя обводка */
    background-color: var(--accent-blue-light); /* Лёгкая синяя подсветка фона */
    color: var(--accent-blue); /* Текст и иконки становятся ярко-зелёными */
}

/* Стили для кнопки перевода, аналогично favorite-btn */
.translate-btn {
    background-color: transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0; /* Убираем лишние отступы */
    font-size: 14px; /* Размер иконки */
}

.translate-btn:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background-color: var(--accent-blue-light);
}

.translate-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Comment Text Wrapper (for translation) */
.comment-text-wrapper,
.comment-text-content,
.full-comment-text {
    word-break: break-word;
    font-size: calc(16px * var(--content-scale-factor, 1.0));
    line-height: 1.6;
    color: var(--text-primary);
}

body.dark-theme .search-btn,
body.dark-theme .video-data-button {
    /* Используем фиксированные цвета из Light Theme */
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}



/* --- СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ВЕТКИ КОММЕНТАРИЕВ --- */

/* Контент модального окна ветки */
.thread-modal-content {
    background: var(--background-card);
    padding: 0 !important;            /* Убираем внутренний отступ */
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    position: relative;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* Важно: чтобы контент не вылезал за скругленные углы */
}

/* Тело модального окна, где будут комментарии */
#thread-modal-body {
    overflow-y: auto;
    padding: 0;       /* Убираем лишние отступы */
    width: 100%;      /* Растягиваем на всю ширину */
}

/* Стили для родительского комментария внутри модального окна */
#thread-modal-body .comment {
    border: 2px solid var(--accent-blue); /* Выделяем родительский коммент */
    box-shadow: var(--shadow-medium);
}

/* Стили для подсвеченного ответа (результата поиска) */
#thread-modal-body .reply.highlight-search-hit {
    background-color: var(--accent-blue-light);
    border: 2px solid var(--accent-blue);
    box-shadow: 0 0 15px var(--accent-blue-light);
}

body.dark-theme #thread-modal-body .reply.highlight-search-hit {
    background-color: rgba(140, 180, 255, 0.1);
}


/* --- СТИЛИ ДЛЯ КНОПКИ "OPEN THREAD" И ПОМЕТКИ "REPLY" --- */

.reply-as-top-marker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: var(--background-alt);
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    /* Fix for border radius */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -1px;
}

.reply-marker-text {
    color: var(--text-secondary);
    font-weight: 500;
}

.open-thread-btn,
.toggle-replies,
.source {
    display: inline-flex; /* Используем flex для идеального выравнивания иконки и текста */
    align-items: center;  /* Вертикальное выравнивание по центру */
    gap: 8px;             /* Отступ между иконкой и текстом */
    padding: 6px 12px;    /* Одинаковые внутренние отступы для всех кнопок */
    font-size: 14px;      /* Одинаковый размер шрифта */
    font-weight: 600;
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none; /* Убирает подчеркивание у ссылки "source" */
    line-height: 1.2;      /* Стабилизирует высоту кнопки */
    height: auto;          /* Позволяет высоте подстраиваться под контент */
}

.open-thread-btn:hover,
.toggle-replies:hover,
.source:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.open-thread-btn i {
    margin-right: 8px;
}

/* style.css - add or update these styles at the end of the file */

/* Dark theme: Pinkish-orange accents for warmth and attention */
body.dark-theme .reply-as-top-marker {
    background-color: rgba(255, 138, 128, 0.1);
    border-bottom-color: rgba(255, 138, 128, 0.3);
}

body.dark-theme .reply-marker-text {
    color: #ff8a80 !important;
    font-weight: 600;
}

body.dark-theme .open-thread-btn {
    border-color: #ff8a80;
    color: #ff8a80;
}

body.dark-theme .open-thread-btn:hover {
    background-color: rgba(255, 138, 128, 0.2);
    color: #fff;
}

/* Light theme: Blue-gray accents */
body:not(.dark-theme) .reply-as-top-marker {
    background-color: rgba(100, 116, 139, 0.05);
    border-bottom-color: #94a3b8;
}

body:not(.dark-theme) .reply-marker-text {
    color: #475569 !important;
    font-weight: 600;
}

body:not(.dark-theme) .open-thread-btn {
    border-color: #64748b;
    color: #475569;
}

body:not(.dark-theme) .open-thread-btn:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}


/* --- СТИЛИ ДЛЯ ФОРМЫ ПОИСКА (Контурный "Ghost" дизайн) --- */
/* (This block replaces all previous form styles) */

#search-form {
margin-top: 20px;
}

.form-group {
    position: relative; /* For icon positioning */
}

/* 1. Стилизуем все поля ввода (текст, числа, даты) */
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 12px 16px 12px 18px;
    background-color: transparent; /* Прозрачный фон */
    border: 2px solid var(--border-medium); /* Видимая рамка (серая) */
    box-shadow: none; /* Убираем все тени */
    border-radius: 30px;
    font-size: 16px;
    color: var(--text-primary); /* Цвет вводимого текста */
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* Fix for clear button */
    padding-right: 35px !important;
}

input[type="date"] {
    width: 100%;
    /* Fix for date field sizing bug - prevent field from changing size when date picker opens */
    box-sizing: border-box !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 11px 16px 11px 18px !important;
    margin-top: 0 !important;
    background-color: transparent !important;
    border: 2px solid var(--border-medium) !important;
    box-shadow: none !important;
    border-radius: 30px !important; /* Rounded corners - match other inputs */
    font-size: 16px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    line-height: normal !important;
    display: block !important;
    /* Prevent browser from changing appearance */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Force consistent sizing */
    outline: none !important;
    /* Fix for clear button + calendar */
    padding-right: 65px !important;
    /* Prevent any layout shifts */
    position: relative !important;
    overflow: hidden !important;
}

/* Force consistent styling when date picker is open */
input[type="date"]:focus,
input[type="date"]:active,
input[type="date"]:focus-visible {
    border-radius: 30px !important; /* Keep consistent with non-focused state */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* 2. Стилизуем кнопки-переключатели */
.toggle-slider {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 18px;
    background: transparent;
    border: 2px solid var(--border-medium);
    box-shadow: none;
    color: var(--text-muted);
    transition: all 0.3s ease;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    min-height: auto;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    border-radius: 30px; /* Added */
}

/* 3. Стиль плейсхолдера */
input::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Убираем доп. прозрачность */
}

/* 4. Состояние фокуса для полей ввода */
input:focus {
    background-color: transparent; /* Фон остается прозрачным */
    border-color: var(--accent-blue); /* Рамка становится акцентной */
    box-shadow: none; /* Никаких теней или свечения */
    outline: none;
}

/* 5. Состояние при наведении для кнопок-переключателей */
.toggle-button:hover .toggle-slider {
    border-color: var(--border-strong);
}

.form-group.disabled-for-guest .toggle-button:hover .toggle-slider {
    border-color: var(--border-medium);
}

/* 6. Активное состояние для кнопок-переключателей (ОБЕ ТЕМЫ) */
.toggle-button input[type="checkbox"]:checked + .toggle-slider {
    background-color: transparent; /* Фон остается прозрачным */
    border-color: var(--accent-blue); /* Рамка становится акцентной (синей) */
    color: var(--accent-blue); /* Текст и иконка тоже */
    font-weight: 700;
}

/* 7. Иконка календаря */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('../images/calendar2.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* 8. Главная кнопка "Search" (Final Flexbox version) */
.search-btn {
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    width: 50%;
    max-width: 430px;
    height:48px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--primary-blue));
    color: white;
    border: none;
    border-radius: 30px;
    box-shadow: var(--shadow-light);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Убираем все transition, кроме необходимых */
}

body.dark-theme .search-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* 9. Grid Layout for Form */
.form-grid-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Отступ между полями */
    margin-top: 15px;
}

.form-group {
    width: 100%;
    min-height: auto;
    margin-bottom: 0;
}

/* Стили для кнопки "Доп. фильтры" */
.toggle-filters-btn {
    display: flex;
    width: 100%;
    padding: 12px 16px;
    background-color: transparent;
    border: 2px solid var(--border-medium);
    border-radius: 30px;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    font-family: var(--body-font);
}

.toggle-filters-btn .icon-toggle {
    transition: transform 0.3s ease;
}

.toggle-filters-btn.expanded {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.toggle-filters-btn.expanded .icon-toggle {
    transform: rotate(180deg);
}

/* По умолчанию скрываем доп. фильтры */
.advanced-filter {
    display: none;
}
/* Показываем кнопку на мобильных */
#fg-toggle {
display: block;
}

/* 10. Стили для ДЕСКТОПА (min-width: 769px) */
@media (min-width: 769px) {
    .form-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px 25px; /* row-gap, column-gap */
        align-items: start;
    }

    #fg-toggle {
    display: none;
    }

    .advanced-filter {
        display: flex;
    }

    /* Ряд 1 */
    #fg-keywords {
    grid-column: 1 / 2;
    grid-row: 1;
    }
    #fg-stop-words {
    grid-column: 2 / 3;
    grid-row: 1;
    }
    #fg-author {
    grid-column: 3 / 4;
    grid-row: 1;
    }
    #fg-block-shorts {
    grid-column: 4 / 4;
    grid-row: 1;
    }

    /* Ряд 2 */
    #fg-min-likes {
    grid-column: 1 / 2;
    grid-row: 2;
    }
    #fg-word-count {
    grid-column: 2 / 3;
    grid-row: 2;
    }
    #fg-start-date {
    grid-column: 3 / 4;
    grid-row: 2;
    }
    #fg-end-date {
    grid-column: 4 / 5;
    grid-row: 2;
    }
}

/* 11. СТИЛИ ДЛЯ БЛОКИРОВКИ ФИЛЬТРОВ ДЛЯ ГОСТЕЙ */
.form-group.disabled-for-guest {
    position: relative;
    opacity: 0.7;
    cursor: pointer;
}

.form-group.disabled-for-guest input,
.form-group.disabled-for-guest .toggle-slider {
    pointer-events: none;
    background-color: var(--background-alt) !important;
}

.guest-lock-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    opacity: 0.7;
    pointer-events: none;
    filter: grayscale(50%);
}

body.dark-theme .guest-lock-icon {
    filter: grayscale(50%) brightness(1.2);
}

/* Увеличиваем padding-right в гостевых полях, чтобы текст не налезал на замок */
.disabled-for-guest input[type="text"],
.disabled-for-guest input[type="number"],
.disabled-for-guest input[type="date"] {
    padding-right: 42px !important;
}

/* Для кнопок-переключателей */
.form-group.disabled-for-guest .toggle-slider + .guest-lock-icon {
    top: 24px;
}

/* 12. Selected Categories */
.selected-categories {
    margin: 15px 0;
    padding: 10px;
    background: var(--background-alt);
    border-radius: 30px;
    border: 1px solid var(--border-light);
}

.category-tag {
    display: inline-flex;
    align-items: center;
    background: var(--accent-blue);
    color: white;
    padding: 5px 10px;
    margin: 3px;
    border-radius: 15px;
    font-size: 0.9em;
}

.category-tag .remove-category {
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.8;
}

.category-tag .remove-category:hover {
    opacity: 1;
}

/* 13. Fix Autofill styles */
input[spellcheck="false"] {
    background-color: inherit !important;
    outline: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-primary) !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
    box-shadow: 0 0 0px 1000px var(--background-card) inset !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--background-card) inset !important;
}

/* 14. Стили для 3-х частей кнопки Search */
.btn-part {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    flex: 1;
    flex-basis: 0;
    min-width: 0;
}

.btn-part.btn-left {
    justify-content: flex-start;
    padding-left: 25px;
}
.btn-part.btn-right {
    justify-content: flex-end;
    padding-right: 25px;
}

.btn-part.btn-center {
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    flex-basis: auto;
}

.btn-icon {
    height: 1.5em;
    width: auto;
}

.btn-text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1;
}

/* 15. Form Text Color Overrides (Final Version) */
/* Основные инпуты: текст — яркий/белый при вводе */
.form-group input[type="text"],
.form-group input[type="number"],
#keywords,
#author-input,
#stop-words,
#word-count,
#min-likes {
color: var(--text-primary) !important;  /* Яркий текст при вводе */
}

/* Placeholder для всех инпутов — серый */
.form-group input::placeholder {
    color: var(--form-text-color) !important;
    opacity: 1 !important;
}

/* Поля даты: текст — яркий при выборе даты */
#fg-start-date input[type="date"],
#fg-end-date input[type="date"] {
color: var(--text-primary) !important;  /* Яркий текст при вводе/выборе */
}

#fg-start-date input[type="date"]::placeholder,
#fg-end-date input[type="date"]::placeholder {
color: var(--form-text-color) !important;  /* Серый placeholder по умолчанию */
opacity: 1 !important;
}

/* Форсируем для тёмной темы (на случай браузерных багов) */
body.dark-theme input[type="date"] {
    color-scheme: dark !important;
}

body.dark-theme input[type="date"]::placeholder {
    color: var(--form-text-color) !important;  /* Убедимся, что серый в dark */
}

input[type="date"]::-webkit-datetime-edit {
    color: var(--form-text-color) !important;
}
body.dark-theme input[type="date"]::-webkit-datetime-edit {
    color: var(--form-text-color) !important;
}


/* Для Block Shorts: дефолтный текст и иконка — серые */
#fg-block-shorts .toggle-text {
color: var(--form-text-color) !important;  /* Серый по умолчанию (unchecked) */
}

#fg-block-shorts .toggle-icon {
color: var(--form-text-color) !important;  /* Серый для иконки по умолчанию */
}

/* Когда Block Shorts включён (checked) — текст и иконка становятся яркими/белыми */
#block-shorts:checked + .toggle-slider .toggle-text {
color: #5b5e72 !important;
}

#block-shorts:checked + .toggle-slider .toggle-icon {
color: var(--text-primary) !important;
}

/* Для disabled/guest полей — приглушённо на основе серого */
.disabled-for-guest input {
    color: var(--form-text-color) !important;
    opacity: 0.7 !important;
}

.disabled-for-guest .toggle-text {
    color: var(--form-text-color) !important;
    opacity: 0.7 !important;
}

/* Общий для advanced-filter */
.advanced-filter input {
    color: var(--text-primary) !important;  /* Яркий при вводе */
}

.advanced-filter .toggle-text {
    color: var(--form-text-color) !important;  /* Серый по умолчанию */
}

/* --- Убираем стандартные стрелки (спиннеры) в полях type="number" --- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* --- СТИЛИ ДЛЯ КНОПКИ ОЧИСТКИ (КРЕСТИК) --- */
.clear-input-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    display: none;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 6;
    padding: 5px;
}

.clear-input-btn:hover {
    color: var(--accent-red);
    transform: translateY(-50%) scale(1.1);
}

.form-group input[type="text"] ~ .clear-input-btn,
.form-group input[type="number"] ~ .clear-input-btn {
    right: 12px;
}

.form-group input[type="date"] ~ .clear-input-btn {
    right: 40px;
}

.form-group.disabled-for-guest .clear-input-btn {
    display: none !important;
}


/* --- Modal Button Styles --- */
#save-design-settings {
    max-width: none;
    min-width: 250px;
    width: 100%;
    padding: 13px 24px;
}

#activate-key-btn,
#key-activation-form button[type="submit"] {
    max-width: none;
    min-width: 250px;
    width: 100%;
    padding: 13px 24px;
}

/* --- Preloader Styles --- */
#preloader {
    position: fixed !important;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0A0D12; /* Светлая тема: #0A0D12 */
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999;
    transition: opacity 0.5s ease;
    margin: 0 !important;
    padding: 0 !important;
}

/* Темная тема для preloader */
body.dark-theme #preloader {
    background-color: #0D1118 !important; /* Темная тема: #0D1118 */
}

.preloader-icon {
    width: 40px;
    max-width: 70px;
    height: auto;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* --- Design Modal "Ghost" Styles --- */
body.dark-theme #design-modal .modal-content {
    background-color: var(--dark-bg-color);
    border: 1px solid var(--border-light);
}

#design-modal .design-option-btn {
    background-color: transparent;
    border: 2px solid var(--border-medium);
    box-shadow: none;
    color: var(--text-muted);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all 0.3s ease;
}

#design-modal .design-option-btn:not(:has(input[type="radio"]:checked)):hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

#design-modal .design-option-btn:has(input[type="radio"]:checked) {
    background-color: transparent;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    font-weight: 700;
    box-shadow: none;
}

#design-modal .control-group label {
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 15px;
}

#design-modal #text-size-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Custom Font Select --- */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--body-font);
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: transparent;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-muted);
    font-size: 14px;
}

.custom-select-trigger .fa-chevron-down {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

.custom-select-trigger:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.custom-select-trigger.open {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.custom-select-trigger.open .fa-chevron-down {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--dark-bg-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 5px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-medium);
}

.custom-select-options.open {
    display: block;
}

body:not(.dark-theme) .custom-select-options {
    background: var(--background-card);
}

.custom-select-option {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-select-option:hover {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
}

.custom-select-option.selected {
    background-color: var(--accent-blue);
    color: white;
    font-weight: 700;
}

/* ---
 * ! *!! BLOCK REMOVED !!!
 * Old .category-btn, .folder-btn styles.
 * Replaced by the new "transparent" version below.
 * --- */

/* ---
 * ! *!! BLOCK REMOVED !!!
 * Old .category-buttons-wrapper (scrolling version).
 * Replaced by the new "grid" version below.
 * --- */

/* --- Back Button Premium Style (Transparent) --- */
.back-btn.premium {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: transparent !important; /* Убираем фон */
    border: none !important;            /* Убираем рамку */
    border-radius: 16px;
    cursor: pointer;
    margin: 8px;
    overflow: hidden;
    box-shadow: none !important;
    transform: none !important;
    transition: none;
}

.back-btn.premium:hover {
    background: rgba(128, 128, 128, 0.1) !important; /* Легкий эффект при наведении (опционально) */
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent;
}

.back-btn.premium:active {
    background: rgba(128, 128, 128, 0.2) !important;
}

.back-btn.premium i {
    font-size: 20px;
    color: #FD526A;
    font-weight: 900;
    transition: all 0.25s ease;
    filter: none !important;
    box-shadow: none !important;
}

.back-btn.premium::before,
.back-btn.premium::after {
    box-shadow: none !important;
    display: none !important;
    content: none !important;
}

/* --- FINAL Category & Folder Button Styles (Transparent) --- */
.category-btn, .folder-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 100px;
    height: 80px;
    background-color: transparent !important;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
    padding: 10px 15px;
    box-shadow: none;
    flex-shrink: 0;
}

.category-btn:hover, .folder-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.category-btn.selected, .folder-btn.selected {
    background-color: #584fb5 !important;
    color: white !important;
    border-color: #584fb5 !important;
}

.folder-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 5px;
    border-radius: 12px; /* Fix for hover */
    overflow: hidden; /* Fix for hover */
    padding: 2px; /* Fix for hover */
}

.folder-icon-wrapper img.folder-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.folder-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    margin-top: 5px;
    color: var(--text-primary);
}

body.dark-theme .folder-text {
    color: #e2e8f0 !important;
}

body:not(.dark-theme) .folder-text {
    color: #334155 !important;
}

/* Text color when selected */
body.dark-theme .category-btn.selected .folder-text,
body.dark-theme .folder-btn.selected .folder-text {
    color: #fff !important;
    font-weight: bold !important;
}

body:not(.dark-theme) .category-btn.selected .folder-text,
body:not(.dark-theme) .folder-btn.selected .folder-text {
    color: #ffffff !important; /* Принудительно белый цвет */
}

.category-tag {
    /* ... existing styles ... */
    background: #584fb5 !important;
    color: #fff !important;
}

body.dark-theme .category-tag {
    background: #584fb5 !important;
    color: #fff !important;
}

body.dark-theme .category-tag .remove-category {
    color: #fff !important;
    opacity: 0.7;
}

/* Кнопка "Добавить категорию" */
.category-btn.add-item-btn .folder-text {
    color: var(--accent-blue);
    font-style: italic;
}

body:not(.dark-theme) .category-btn.add-item-btn .folder-text {
    color: var(--accent-blue);
}

/* ---
 * ! *!! BLOCK REMOVED !!!
 * Old .category-scroll-wrapper and .category-content-wrapper (scrolling version).
 * Replaced by the new "grid" version below.
 * --- */

/* ==========================================================================
 * ФИНАЛЬНЫЕ СТИЛИ: СЕТКА КАТЕГОРИЙ И ЦЕНТРИРОВАНИЕ (GRID VERSION)
 * ========================================================================== */

/* Обертка */
.category-scroll-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center; /* Главное центрирование */
    padding: 0 10px;
    box-sizing: border-box;
    overflow: visible !important;
    min-height: 100px;
}

/* Контейнер с кнопками */
#category-content-wrapper {
    display: flex;
    flex-wrap: wrap !important; /* Разрешаем перенос строк */
    justify-content: center;
    align-items: flex-start;
    gap: 8px; /* Отступ между плитками */
    width: 100%;
    max-width: 860px;
    padding: 10px 0;
    margin: 0 auto;
    overflow: visible;
}

/* Кнопка "Назад" - Абсолютное позиционирование */
#breadcrumb-back-root {
    position: absolute !important;
    left: 0px !important;
    top: 22px !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 600;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* Унифицированные размеры кнопок */
.category-btn, .folder-btn, .toggle-expand-btn {
    min-width: 95px;
    height: 80px;
    margin: 0;
}

/* Стили кнопки MORE / LESS */
.toggle-expand-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px dashed var(--border-medium);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    padding: 5px;
}

.toggle-expand-btn:hover {
    background-color: var(--background-alt);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.toggle-expand-btn .folder-icon-wrapper {
    height: 30px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-expand-btn i {
    font-size: 24px;
}

.toggle-expand-btn .folder-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit !important;
    margin-top: 0;
}

/* Скрываем скроллбары */
#category-content-wrapper::-webkit-scrollbar {
    display: none;
}
#category-content-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Context Menu & Modals --- */
.custom-context-menu {
    display: none;
    position: fixed;
    z-index: 10000;
    background: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);
    padding: 5px;
}

.custom-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-context-menu li {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-context-menu li:hover {
    background-color: var(--background-alt);
    color: var(--accent-blue);
}

.custom-context-menu li i {
    width: 16px;
    text-align: center;
}

#add-category-list {
    grid-template-columns: 1fr 1fr; /* 2 колонки */
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 10px;
    gap: 10px;
}

#add-category-list .design-option-btn {
    font-size: 14px;
    justify-content: flex-start;
    padding: 10px;
}

#add-category-list .sidebar-cat-icon {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

#add-category-list .design-option-btn.active {
    background-color: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: 0 0 10px var(--accent-blue-light);
}

.ghost-highlight {
    opacity: 0.5;
    background: var(--accent-blue-light) !important;
    border: 1px dashed var(--accent-blue);
    border-radius: 12px;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    text-align: left;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--text-muted);
}

.breadcrumb .breadcrumb-link {
    color: var(--accent-blue);
    cursor: pointer;
    font-weight: 600;
}
.breadcrumb .breadcrumb-link:hover {
    text-decoration: underline;
}

/* === СТИЛИ ДЛЯ НОВЫХ МОДАЛОК (Prompt/Confirm) === */
#custom-prompt-modal .modal-content,
#custom-confirm-modal .modal-content {
    z-index: 11000;
    border: 1px solid var(--border-medium);
}

/* Поле ввода в промпте */
.prompt-input {
    background-color: var(--background-alt) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
    padding: 12px !important;
    border-radius: 10px !important;
    outline: none;
}

.prompt-input:focus {
    border-color: var(--accent-blue) !important;
}

body.dark-theme #confirm-message {
    color: #e2e8f0 !important;
}

#custom-prompt-modal .modal-content > div[style*="display: flex"],
#custom-confirm-modal .modal-content > div[style*="display: flex"] {
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 25px !important;
    width: 100%;
    box-sizing: border-box;
}

#prompt-cancel-btn,
#confirm-cancel-btn,
#custom-prompt-form button[type="submit"],
#confirm-ok-btn {
    height: 44px !important;
    min-width: 110px !important;
    width: auto !important;
    padding: 0 25px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

#prompt-cancel-btn,
#confirm-cancel-btn {
    background: transparent !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text-secondary) !important;
}

#prompt-cancel-btn:hover,
#confirm-cancel-btn:hover {
    background-color: var(--background-alt) !important;
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

#custom-prompt-form button[type="submit"] {
    background: var(--accent-blue) !important;
    border: 2px solid var(--accent-blue) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

#custom-prompt-form button[type="submit"]:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3) !important;
}

#confirm-ok-btn {
    background: transparent !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text-secondary) !important;
}

#confirm-ok-btn:hover {
    background-color: var(--background-alt) !important;
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

/* === УЛУЧШЕНИЕ КНОПКИ "ADD SELECTED" В МОДАЛКЕ КАТЕГОРИЙ === */
#save-categories-btn {
    width: auto !important;
    min-width: 200px !important;
    max-width: 80%;
    margin: 25px auto 0 auto !important;
    padding: 12px 40px !important;
    display: block !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: none !important;
    background: var(--accent-blue) !important;
    border: 2px solid var(--accent-blue) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

#save-categories-btn:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
}

#save-categories-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

/* --- КОСМИЧЕСКИЙ ФОН --- */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    z-index: -100;
    overflow: hidden;
    pointer-events: none;
}

.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
}

.layer-1 {
    box-shadow:
    5vw 10vh #ccc, 12vw 25vh #ccc, 3vw 50vh #ccc, 15vw 80vh #ccc, 8vw 90vh #ccc,
    85vw 15vh #ccc, 95vw 35vh #ccc, 90vw 60vh #ccc, 98vw 85vh #ccc, 82vw 5vh #ccc;
    width: 1px;
    height: 1px;
    animation: star-pulse 4s ease-in-out infinite;
}

.layer-2 {
    box-shadow:
    18vw 5vh #ccc, 2vw 40vh #ccc, 10vw 70vh #ccc,
    88vw 20vh #ccc, 99vw 55vh #ccc, 83vw 95vh #ccc;
    width: 2px;
    height: 2px;
    animation: star-pulse 7s ease-in-out infinite 1s;
}

.layer-3 {
    box-shadow:
    7vw 15vh #aaa, 1vw 85vh #aaa,
    92vw 10vh #aaa, 96vw 75vh #aaa;
    width: 3px;
    height: 3px;
    animation: star-pulse 10s ease-in-out infinite 2s;
}

@keyframes star-pulse {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.2);
    }
}

body.dark-theme {
    background-color: transparent !important;
}

.no-transitions, .no-transitions * {
    transition: none !important;
    animation: none !important;
}

/* --- Profile View Styles --- */
#view-profile .auth-container {
    max-width: 1000px;
    margin: 0 auto;
}

.profile-search-container {
    margin-bottom: 20px;
    position: relative;
    padding-top: 20px;
}
#profile-search-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: var(--body-font, 'Roboto', sans-serif);
    border-radius: 30px;
    border: 2px solid var(--border-medium);
    background-color: transparent;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: all 0.3s ease;
}
#profile-search-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 25px;
    flex-wrap: wrap;
}
.pagination a {
    display: inline-block;
    padding: 8px 14px;
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--text-primary);
    background-color: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}
.pagination a:hover {
    background-color: var(--background-alt);
    border-color: var(--accent-blue);
}
.pagination a.active {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    pointer-events: none;
}
.pagination a.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Final Profile Category View Fix */
#profile-category-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Отступы */
    width: 100%;
    max-width: 830px;
    margin: 0 auto; /* Центрируем контейнер с max-width */
}

#profile-category-view .category-btn,
#profile-category-view .folder-btn,
#profile-category-view .toggle-expand-btn {
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ============================================================
 * ФИНАЛЬНЫЕ ИСПРАВЛЕНИЯ ВИДЕО БЛОКА
 * ============================================================ */

/* Сброс стилей иконок в кнопке */
.video-data-button i {
    margin-right: 8px; /* Отступ иконки от текста */
}

/* 1. Глобальные настройки сетки */
.video-data-grid-item,
.channel-item {
    font-size: 14px !important; /* Единый размер шрифта везде */
    line-height: 1.5;
    white-space: nowrap;
}

/* Скрываем детали на мобильном по умолчанию, показываем на ПК */
.video-details-wrapper {
    display: block; /* На ПК всегда открыто */
}
.mobile-details-toggle {
    display: none; /* На ПК кнопку скрываем */
    cursor: pointer;
    color: var(--accent-blue);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Кнопка видео общая */
.item-btn {
    display: inline-flex !important;
    white-space: nowrap;
    padding: 6px 16px;
    font-size: 13px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

/* =========================================
 * МОБИЛЬНАЯ ВЕРСИЯ (до 768px)
 * ========================================= */
@media (max-width: 768px) {

    /* 1. Показываем кнопку "Show details" */
    .mobile-details-toggle {
        display: block;
    }

    /* 2. Скрываем контент по умолчанию (JS будет переключать display: block) */
    .video-details-wrapper {
        display: none;
    }

    /* 3. Сетка мобильная: 2 колонки */
    .video-data-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 5px;
    }

    /* 4. Позиционирование элементов */
    .item-duration { grid-column: 1; grid-row: 1; }
    .item-views    { grid-column: 2; grid-row: 1; text-align: right; }

    .item-comments { grid-column: 1; grid-row: 2; }
    .item-likes    { grid-column: 2; grid-row: 2; text-align: right; }

    /* Updated на мобильном скрываем */
    .item-updated-label, .item-updated-value {
        display: none;
    }

    /* Published на новой строке слева */
    .item-published {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 5px;
    }

    /* Кнопка: Маленькая, слева, под Published */
    .item-btn {
        grid-column: 1 / -1;
        grid-row: 4;
        width: auto !important; /* Не на всю ширину */
        justify-self: start !important; /* Прижата влево */
        margin-top: 5px;
    }

    /* Кнопка поиска на всю ширину */
    .search-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Mobile Header Fixes */
    .comment-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        overflow: hidden;
    }
    .comment-meta-left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        gap: 6px;
    }
    .author-avatar {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
    }
    .username {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        flex-grow: 0;
        max-width: 130px;
        font-size: 17px !important;
        margin-right: 0 !important;
        line-height: 1.2;
    }
    .likes,
    .date-text {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 16px !important;
        line-height: 1.2;
    }
    .comment-header-buttons {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* 6. Mobile Video Title Fix */
    .video-data-column {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .video-data-title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        margin-bottom: 5px !important;
    }

    /* 7. Profile View Mobile Fix */
    #profile-category-view .back-btn.premium {
    position: static !important;
    transform: none !important;
    margin-bottom: 10px !important;
    }
}

/* =========================================
 * ПК ВЕРСИЯ (от 769px)
 * ========================================= */
@media (min-width: 769px) {

    /* 1. Показываем блок деталей, скрываем мобильную кнопку */
    .video-details-wrapper {
        display: block !important;
    }
    .mobile-details-toggle {
        display: none !important;
    }

    /* 2. Настраиваем Channel */
    .mobile-top-row {
        margin-bottom: 4px;
        border-bottom: none;
        padding-bottom: 0;
    }
    .channel-item {
        font-size: 14px !important;
        margin: 0;
    }

    /* 3. СЕТКА (GRID) */
    .video-data-grid {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        gap: 4px 90px;
        margin-top: 0 !important;
        align-items: baseline;
    }

    /* --- СТРОКА 1 --- */
    .item-published {
        grid-column: 1;
        grid-row: 1;
    }
    .item-comments {
        grid-column: 2;
        grid-row: 1;
    }
    .item-updated-label {
        grid-column: 3;
        grid-row: 1;
        color: var(--text-primary);
        justify-self: start;
    }

    /* --- СТРОКА 2 --- */
    .item-views {
        grid-column: 1;
        grid-row: 2;
    }
    .item-likes {
        grid-column: 2;
        grid-row: 2;
    }
    .item-updated-value {
        grid-column: 3;
        grid-row: 2;
        justify-self: start;
        color: var(--text-secondary);
        font-size: 14px !important;
    }

    /* --- СТРОКА 3 --- */
    .item-duration {
        grid-column: 1;
        grid-row: 3;
    }

    /* --- СТРОКА 4 --- */
    .item-btn {
        grid-column: 1;
        grid-row: 4;
        width: auto !important;
        justify-self: start;
        margin-top: 2px !important;
        margin-left: 0 !important;
        padding: 8px 25px !important;
    }
}

/* style.css */

/* 1. Добавляем плавность самому контейнеру */
#category-content-wrapper {
    opacity: 1;
    transition: opacity 0.2s ease-in-out; /* Плавное появление/исчезновение */
}

/* Класс для скрытия контента во время загрузки */
#category-content-wrapper.loading-state {
    opacity: 0;
    pointer-events: none; /* Запрещаем клики пока грузится */
}

/* 2. ЖЕСТКАЯ фиксация размеров иконок.
 *   Браузер сразу нарисует квадратик нужного размера, не дожидаясь картинки. */
.folder-icon {
    width: 28px !important;    /* Укажите точный размер как у вас в дизайне */
    height: 28px !important;   /* Укажите точный размер */
    min-width: 28px;
    min-height: 28px;
    display: block;            /* Убираем отступы строчных элементов */
    object-fit: contain;
}

/* То же самое для обертки, чтобы она не схлопывалась */
.folder-icon-wrapper {
    width: 40px;      /* Чуть больше самой иконки */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Fix for Login/Register Modal Buttons --- */
#auth-modal .search-btn,
#register-form .search-btn,
#login-form .search-btn {
    justify-content: center !important; /* Центрируем контент */
    text-align: center !important;      /* Центрируем текст */
    padding-left: 0 !important;         /* Убираем лишние отступы */
    padding-right: 0 !important;
}

/* На случай, если кнопка имеет другую вложенность в будущем */
#modal-body form button[type="submit"] {
    justify-content: center !important;
    display: flex !important;
}

.folder-icon {
    width: 28px !important;
    height: 28px !important;
    image-rendering: -webkit-optimize-contrast; /* против лёгкого блюра на некоторых устройствах */
    image-rendering: crisp-edges;
}

/* --- CLOUDY BACKGROUND (LIGHT THEME) --- */

.clouds-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -98; /* Just above the default background, below content */
    overflow: hidden;
    pointer-events: none;

    /* Gloomy/Overcast Sky Gradient: Grey-Blue center, darker edges */
    background: radial-gradient(ellipse at center, #d4dfe8 0%, #b0bcc6 100%);

    /* Hide by default (will be shown only in Light Theme via display rules below) */
    display: none;
}

/* Visibility Logic: */
/* 1. Show Clouds ONLY in Light Theme */
body:not(.dark-theme) .clouds-background {
    display: block;
}

/* 2. Hide Stars in Light Theme (to be safe) */
body:not(.dark-theme) .space-background {
    display: none;
}

/* 3. Show Stars in Dark Theme */
body.dark-theme .space-background {
    display: block;
}

/* 4. Hide Clouds in Dark Theme */
body.dark-theme .clouds-background {
    display: none;
}

/* --- Cloud Layers & Animation --- */

.cloud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/cloud.png'); /* Ensure path is correct */
    background-repeat: repeat-x; /* Repeat horizontally */
    background-position: 0 center;
    will-change: background-position;
}

/* Layer 1: Closest, largest, fastest, most transparent (misty) */
.cloud-1 {
    background-size: 1000px auto; /* Big clouds */
    opacity: 0.5; /* 50% opacity */
    animation: drift 60s linear infinite;
    top: 10%;
}

/* Layer 2: Medium distance */
.cloud-2 {
    background-size: 600px auto; /* Medium clouds */
    opacity: 0.6; /* 60% opacity */
    animation: drift 120s linear infinite reverse; /* Moves opposite way */
    top: -20%;
}

/* Layer 3: Furthest, smallest, slowest */
.cloud-3 {
    background-size: 300px auto; /* Small clouds */
    opacity: 0.7; /* 70% opacity */
    animation: drift 200s linear infinite;
    bottom: 0;
}

/* Animation Keyframes */
@keyframes drift {
    from {
        background-position: 0 center;
    }
    to {
        background-position: 2000px center;
    }
}

/* --- ФИКС ФОНА ДЛЯ ОБЛАКОВ --- */
/* Устанавливаем фон farm.jpeg для светлой темы */
body:not(.dark-theme),
html:not(.dark-theme) @media (min-width: 769px) { {
    background-image: url('../images/farm.jpeg') !important;
    background-color: transparent !important;
}}

/* Убедимся, что слой с облаками растянут и видим */
.clouds-background {
    display: block !important;
    z-index: -99 !important; /* Уводим на самый задний план */
    background: radial-gradient(ellipse at center, #d4dfe8 0%, #b0bcc6 100%); /* Цвет неба */
}

/* Центрирование кнопки Save & Close */
#save-design-settings {
    justify-content: center !important; /* Центрируем содержимое */
    text-align: center;
}

/* --- ФИКС КНОПКИ НАЗАД В ПРОФИЛЕ --- */

/* Задаем контекст позиционирования для контейнера в профиле */
#view-profile .category-container {
    position: relative !important;
    min-height: 60px; /* Резервируем место, чтобы кнопку не перекрыло */
}

/* Исправляем позицию самой кнопки внутри профиля */
#view-profile #breadcrumb-back-root {
    position: absolute !important;
    top: 50% !important;      /* Центрируем по вертикали относительно контейнера */
    transform: translateY(-50%) !important;
    left: 0 !important;       /* Прижимаем к левому краю */
    margin: 0 !important;
    z-index: 10;
}

/* --- CSS ОБЛАКА (PURE CSS) --- */

/* Контейнер для облаков */
.css-clouds-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99; /* Самый задний план */
    overflow: hidden;
    pointer-events: none;
    /* Нежный градиент неба (для светлой темы) */
    background: radial-gradient(ellipse at bottom, #eef2f3 0%, #dbe6ea 100%);
}

/* Скрываем в темной теме */
body.dark-theme .css-clouds-container {
    display: none;
}

/* Базовая форма облака */
.css-cloud {
    background: #fff;
    width: 120px;
    height: 40px;
    border-radius: 50px;
    position: absolute;
    opacity: 0.8;
}

/* Пушистость (используем псевдоэлементы для создания "холмиков") */
.css-cloud::after,
.css-cloud::before {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.css-cloud::after {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 20px;
}

.css-cloud::before {
    width: 60px;
    height: 60px;
    top: -35px;
    left: 45px;
}

/* Анимация движения */
@keyframes moveClouds {
    0% { left: -200px; }
    100% { left: 110%; }
}

/* --- Размеры и позиции для каждого облака --- */

/* Облако 1: Маленькое, медленное, высоко */
.css-cloud:nth-child(1) {
    top: 15%;
    transform: scale(0.6);
    opacity: 0.7;
    animation: moveClouds 55s linear infinite;
}

/* Облако 2: Среднее, чуть ниже */
.css-cloud:nth-child(2) {
    top: 25%;
    transform: scale(1);
    opacity: 0.8;
    animation: moveClouds 40s linear infinite reverse; /* Плывет в другую сторону для разнообразия */
}

/* Облако 3: Большое, очень медленное */
.css-cloud:nth-child(3) {
    top: 50%;
    transform: scale(1.4);
    opacity: 0.6;
    animation: moveClouds 80s linear infinite;
    animation-delay: -10s;
}

/* Облако 4: Крошечное, быстрое */
.css-cloud:nth-child(4) {
    top: 65%;
    transform: scale(0.4);
    opacity: 0.5;
    animation: moveClouds 35s linear infinite;
    animation-delay: -5s;
}

/* Облако 5: Среднее */
.css-cloud:nth-child(5) {
    top: 80%;
    transform: scale(0.9);
    opacity: 0.7;
    animation: moveClouds 60s linear infinite reverse;
    animation-delay: -20s;
}

/* Облако 6: Где-то посередине */
.css-cloud:nth-child(6) {
    top: 35%;
    transform: scale(0.7);
    animation: moveClouds 50s linear infinite;
    animation-delay: -30s;
}

body.modal-open {

    scrollbar-gutter: stable; /* ← магия 2025 года, работает везде */
}

/* Если у вас есть фиксированный хедер/навигация — добавьте и туда */
header.fixed-header,
nav.fixed-nav,
.any-fixed-element {
    scrollbar-gutter: stable;
}

.modal-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-overlay.closing {
    opacity: 0;
}

/* === 1. УВЕЛИЧЕНИЕ ШИРИНЫ НА ~15% === */

/* Основной контейнер */
.container, .auth-container {
    /* Было около 1000px, увеличиваем до 1150-1200px */
    max-width: 1000px !important;
    width: 95%; /* На мобильных займет почти всю ширину */
}

/* Модальные окна (сделаем их тоже шире) */
.thread-modal-content {
    max-width: 1000px !important; /* Было ~500-600px */
    width: 95%;
}

/* Сетка категорий: Применяем ТОЛЬКО к профилю, чтобы не ломать центрирование на главной */
#profile-category-view {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px;
    display: grid; /* Явно указываем grid для профиля */
}

/* Для главного меню форсируем Flexbox и центрирование */
#category-content-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Главное: центрирование по горизонтали */
    gap: 12px !important; /* Можно оставить отступ побольше, как вы хотели */
    width: 100%;
    margin: 0 auto;
}


/* === 2. НОВЫЙ ДИЗАЙН (ВНУТРЕННЕЕ СВЕЧЕНИЕ) === */

/* --- Поля ввода (Inputs) --- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select {
    /* Темный полупрозрачный фон */
    background: rgba(20, 25, 35, 0.6) !important;

    /* Тонкая рамка */
    border: 1px solid rgba(60, 100, 150, 0.3) !important;

    /* Скругление */
    border-radius: 10px !important;

    /* ВНУТРЕННЕЕ СВЕЧЕНИЕ (легкое синее) */
    box-shadow: inset 0 0 15px rgba(0, 162, 255, 0.08) !important;

    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

/* Эффект при клике (фокусе) */
input:focus, textarea:focus, select:focus {
    /* Усиливаем свечение */
    box-shadow: inset 0 0 20px rgba(0, 162, 255, 0.2),
    0 0 10px rgba(0, 162, 255, 0.2) !important; /* Внешнее свечение */
    border-color: var(--accent-blue) !important;
    outline: none;
}

/* --- Кнопки категорий и папок --- */
.category-btn, .folder-btn, .design-option-btn, .toggle-expand-btn {

    border-radius: 14px;


    backdrop-filter: blur(5px);
}


/* Активная кнопка (выбранная) */
.category-btn.selected, .folder-btn.selected {
    background: rgba(0, 162, 255, 0.15);
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 20px rgba(0, 162, 255, 0.3);
}

/* Основная кнопка поиска (Search) */
.search-btn {
    border-radius: 50px !important; /* Более округлая */
    background: linear-gradient(135deg, #1e2530, #2a3b55);
    border: 1px solid rgba(0, 162, 255, 0.3);
    box-shadow: inset 0 0 15px rgba(0, 162, 255, 0.15),
    0 4px 10px rgba(0,0,0,0.3);
}

.search-btn:hover {
    box-shadow: inset 0 0 25px rgba(0, 162, 255, 0.3),
    0 6px 15px rgba(0, 162, 255, 0.2); /* Внешнее свечение */
}

/* ============================================================
 * ФИНАЛЬНЫЙ АДАПТИВНЫЙ ДИЗАЙН (Светлая + Тёмная темы)
 * ============================================================ */

/* 1. Общий стиль для ВСЕХ полей ввода и кнопки Block Shorts */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select,
.toggle-slider { /* <-- Применяем и к кнопке */

    /* Используем переменные темы */
    background: var(--ghost-bg) !important;
    border: 1px solid var(--ghost-border) !important;
    color: var(--ghost-text) !important;
    box-shadow: var(--ghost-shadow) !important;

    /* Общие параметры формы */
    border-radius: 10px !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Размытие фона под полем */
    -webkit-backdrop-filter: blur(5px);
}

/* 2. Специфика для Block Shorts (выравнивание) */
.toggle-slider {
    padding: 12px 16px 12px 18px !important;
    display: flex;
    align-items: center;
}

/* 3. Эффект при наведении (Hover) и Фокусе (Focus) */
input:focus,
textarea:focus,
select:focus,
.toggle-button:hover .toggle-slider {

    border-color: var(--ghost-focus-border) !important;
    box-shadow: var(--ghost-focus-shadow) !important;
    outline: none;
    background: var(--ghost-bg) !important; /* Фон не меняем */
}

/* 4. Активное состояние чекбокса Block Shorts */
.toggle-button input[type="checkbox"]:checked + .toggle-slider {
    border-color: var(--accent-blue) !important;
    background: var(--ghost-bg) !important;
    /* Усиленное свечение для активного состояния */
    box-shadow: var(--ghost-focus-shadow) !important;
}

/* 5. Цвета текста внутри кнопки Block Shorts */
.toggle-slider .toggle-text,
.toggle-slider .toggle-icon {
    color: var(--ghost-text) !important;
    font-weight: normal !important;
    transition: color 0.3s;
}

/* При активации текст становится акцентным */
.toggle-button input[type="checkbox"]:checked + .toggle-slider .toggle-text,
.toggle-button input[type="checkbox"]:checked + .toggle-slider .toggle-icon {
    color: var(--accent-blue) !important;
    font-weight: 600 !important;
}

/* 6. Кнопки категорий (Folder/Category btns) - тоже адаптивные */
.category-btn, .folder-btn, .design-option-btn, .toggle-expand-btn {
    border-radius: 14px;
    backdrop-filter: blur(5px);
    border: 1px solid transparent; /* По умолчанию рамки нет */
}

/* Выбранная кнопка */
.category-btn.selected, .folder-btn.selected {
    background: #26344a !important; /* Легкий синий фон */
    border-color: #26344a !important;
    color: var(--text-primary) !important;
}

/* Текст внутри папок */
.folder-text {
    color: var(--text-primary) !important;
}

:root {
    /* ... ваши старые переменные ... */

    /* --- НОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ GHOST INPUTS (СВЕТЛАЯ ТЕМА) --- */
    /* Светлый полупрозрачный фон (белый с оттенком) */
    --ghost-bg: rgba(255, 255, 255, 0.7);
    /* Серая рамка, но полупрозрачная */
    --ghost-border: rgba(148, 163, 184, 0.6);
    /* Едва заметное внутреннее свечение для объема */
    --ghost-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
    /* Цвет текста */
    --ghost-text: #1e293b;

    /* Цвета при фокусе/наведении (Светлая тема) */
    --ghost-focus-border: var(--accent-blue);
    --ghost-focus-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(59, 130, 246, 0.15);
}

body.dark-theme {
    /* ... ваши старые переменные ... */

    /* --- НОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ GHOST INPUTS (ТЁМНАЯ ТЕМА) --- */
    /* Тот самый темный фон, который вам понравился */
    --ghost-bg: rgba(20, 25, 35, 0.6);
    /* Тонкая синеватая рамка */
    --ghost-border: rgba(60, 100, 150, 0.3);
    /* Внутреннее неоновое свечение */
    --ghost-shadow: inset 0 0 15px rgba(0, 162, 255, 0.08);
    /* Цвет текста */
    --ghost-text: #e2e8f0;

    /* Цвета при фокусе/наведении (Тёмная тема) */
    --ghost-focus-border: var(--accent-blue);
    --ghost-focus-shadow: inset 0 0 20px rgba(0, 162, 255, 0.2), 0 0 10px rgba(0, 162, 255, 0.2);
}

/* --- GHOST VARIABLES (LIGHT THEME DEFAULT) --- */
:root {
    /* Старые переменные... */
    --content-scale-factor: 1.0;
    /* ... */

    /* НОВЫЕ GHOST ПЕРЕМЕННЫЕ (Светлая тема) */
    --ghost-bg: rgba(255, 255, 255, 0.7);
    --ghost-border: rgba(148, 163, 184, 0.6);
    --ghost-text: #1e293b;
    --ghost-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
    --ghost-focus-border: var(--accent-blue);
    --ghost-focus-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* --- DARK THEME OVERRIDES --- */
body.dark-theme {
    /* Старые переменные темной темы... */
    --background-main: #010114;
    --background-card: #0e151c;
    --text-primary: #cdd3d9;
    /* ... */

    /* НОВЫЕ GHOST ПЕРЕМЕННЫЕ (Темная тема) */
    --ghost-bg: rgba(20, 25, 35, 0.6);
    --ghost-border: rgba(60, 100, 150, 0.3);
    --ghost-text: #e2e8f0;
    --ghost-shadow: inset 0 0 15px rgba(0, 162, 255, 0.08);
    --ghost-focus-border: var(--accent-blue);
    --ghost-focus-shadow: inset 0 0 20px rgba(0, 162, 255, 0.2), 0 0 10px rgba(0, 162, 255, 0.2);
}

/* --- Стили для переключателя версий в сайдбаре --- */
.mode-toggle-btn {
    transition: color 0.3s ease, transform 0.2s ease;
}

.mode-toggle-btn.mode-paid {
    color: var(--accent-green) !important; /* Спокойный зеленый для здоровья/платной */
}

.mode-toggle-btn.mode-free {
    color: #64748b !important; /* Спокойный серо-голубой для глобуса/бесплатной */
}

/* Эффект нажатия */
.mode-toggle-btn:active {
    transform: scale(0.95);
}

/* --- Анимация кнопки поиска (Cooldown) --- */
.search-btn {
    position: relative;
    overflow: hidden; /* чтобы прогресс-бар не вылезал */
    z-index: 1;
}

/* Прогресс-бар внутри кнопки (шторка) - применяем ТОЛЬКО к кнопке в форме поиска */
#search-form .search-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
    transition: none;
}

/* Анимация заполнения */
#search-form .search-btn.locked::after {
    width: 100%;
    animation: search-cooldown 2s linear forwards;
}



/* Класс блокировки кнопки */
.search-btn.locked {
    pointer-events: none;
    cursor: wait;
    opacity: 0.9;
}


/* Анимация: ширина уменьшается от 100% до 0%, создавая эффект "ухода" влево */
@keyframes search-cooldown {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* === ДОБАВЛЕНИЕ: Анимация для бесплатной версии === */
/* Полоска, которая будет двигаться справа налево (только в бесплатном режиме) */
.search-btn.free-mode-cooldown::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;                    /* стартует справа */
    width: 100%;                /* в начале закрывает всю кнопку */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 30%,
                                rgba(255, 255, 255, 0.35) 50%,
                                transparent 100%
    );
    z-index: -1;
    pointer-events: none;

    /* Анимация 5 секунд (можно менять) */
    animation: freeCooldownSweep 5s linear forwards;
    opacity: 0.7;
}

/* Светлая тема — чуть темнее полоска */
body:not(.dark-theme) .search-btn.free-mode-cooldown::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.12) 30%,
                                rgba(0, 0, 0, 0.20) 50%,
                                transparent 100%
    );
}

/* Полоска для бесплатной версии */
#search-form .search-btn.free-mode-cooldown::before {
    /* ... всё содержимое оставляем как есть ... */
    content: '';
    position: absolute;
    /* ... */
}

/* Сама анимация */
@keyframes freeCooldownSweep {
    0%   { transform: translateX(0%); }      /* полностью справа */
    100% { transform: translateX(-100%); }   /* уходит влево */
}

/* Когда кулдаун закончился — убираем полоску */
.search-btn.free-mode-cooldown.finished::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Корректировка цветов для темной темы */
body.dark-theme .mode-toggle-btn.mode-free {
    color: #94a3b8 !important;
}

/* --- СТИЛИЗАЦИЯ ИКОНКИ КАЛЕНДАРЯ (ЦВЕТНАЯ) --- */

/* 1. Скрываем стандартную иконку браузера, но оставляем её кликабельной областью */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: none; /* Убираем старую картинку PNG */
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;

    /* Используем маску для создания формы иконки */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");

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

    transition: background-color 0.3s ease;
}

/* 2. Цвет для СВЕТЛОЙ ТЕМЫ (Тёмно-синий) */
body:not(.dark-theme) input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--primary-blue); /* Используем переменную темы */
}
/* Ховер в светлой теме */
body:not(.dark-theme) input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: #1e40af; /* Чуть темнее при наведении */
}

/* 3. Цвет для ТЁМНОЙ ТЕМЫ (Светло-синий) */
body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: var(--accent-blue); /* Используем переменную темы */
}
/* Ховер в тёмной теме */
body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: #fff; /* Белый при наведении */
}

/* --- КНОПКА НАВЕРХ --- */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    color: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    z-index: 20000; /* Очень высокий z-index */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    /* Скрыто по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Чтобы не мешала кликам, когда скрыта */
}

/* Активное состояние */
.scroll-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto; /* Включаем клики */
}

.scroll-to-top:hover {
    background-color: var(--accent-blue);
    color: #fff;
    transform: translateY(-3px) !important;
}

/* --- ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ИНПУТОВ (Text, Number, Date) --- */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="date"]:focus, /* Добавлено принудительное сохранение стилей фокуса */
.form-group input[type="text"]:focus {
    width: 100%;
    /* Фиксированная высота и отступы (ОЧЕНЬ ВАЖНО для устранения сдвига) */
    height: 48px !important;
    min-height: 48px !important;
    padding: 12px 18px 12px 18px !important; /* Убедитесь, что отступы симметричны */
    margin: 0 !important;

    /* GHOST DESIGN VARIABLES */
    background: var(--ghost-bg) !important;
    border: 1px solid var(--ghost-border) !important;
    color: var(--ghost-text) !important;
    border-radius: 15px !important; /* Единый радиус скругления */
    box-shadow: var(--ghost-shadow) !important;

    font-family: var(--body-font, 'Roboto', sans-serif);
    font-size: 16px !important;
    line-height: normal !important;
    box-sizing: border-box !important;

    /* Убираем стандартные стили браузера, чтобы избежать изменения размера */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.2s ease;
}

/* --- Стилизация обводки при фокусе (единая для всех типов полей) --- */
.form-group input:focus {
    /* Принудительно устанавливаем те же значения, что и для всех инпутов */
    border: 1px solid var(--ghost-focus-border) !important;
    box-shadow: var(--ghost-focus-shadow) !important;
    /* Убедитесь, что нет других конфликтующих свойств, кроме border и shadow */
}

/* ПРИМЕЧАНИЕ:
 * Если у вас где-то используется класс, например, `.form-group.focused`,
 * проверьте, что его стили не конфликтуют с `:focus` и также имеют `height: 48px !important;`.
 */

/* Принудительно отменяем display:none, если он был задан где-то еще */
.scroll-to-top {
    /* ... (остальные стили) ... */
    display: flex !important; /* Принудительно flex, чтобы кнопка всегда имела место */
}

/* --- КНОПКА НАВЕРХ (Обновленный стиль) --- */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    color: var(--background-card);
    border-radius: 50%;

    /* Добавляем !important для display, чтобы перебить возможные display: none */
    display: flex !important;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    text-decoration: none;
    cursor: pointer;

    /* Поднимаем Z-index выше модалок и облаков */
    z-index: 2147483647;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    /* Скрыто по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Не кликабельна, пока скрыта */
}

/* Активное состояние */
.scroll-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; /* Включаем клики */
}

.scroll-to-top:hover {
    background-color: var(--accent-blue);
    color: #fff;
    transform: translateY(-3px) !important;
}

/* === ФИКС ДЛЯ КНОПКИ BLOCK SHORTS === */

/* 1. Принудительно задаем высоту контейнеру кнопки */
#fg-block-shorts .toggle-button {
    display: flex;
    align-items: center;
    height: 48px !important; /* Точно как у input */
    margin: 0;
    width: 100%;
}

/* 2. Стилизуем саму рамку-слайдер */
#fg-block-shorts .toggle-slider {
    height: 48px !important;       /* Жесткая высота */
    min-height: 48px !important;   /* Запрещаем сжиматься */
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important; /* Центрируем текст и иконку по вертикали */

    /* Копируем отступы как у ваших input */
    padding: 0 16px 0 18px !important;

    /* Гарантируем, что рамки совпадают */
    border-radius: 15px !important;
    margin-top: 0 !important;
    width: 100%;
}

/* 3. Фикс для мобильных устройств, чтобы текст не уезжал */
#fg-block-shorts .toggle-text {
    line-height: 1 !important;
    margin-top: 1px; /* Микро-коррекция для визуального центра */
}

/* 4. Если внутри есть иконка замка (для гостей), центрируем её */
#fg-block-shorts .guest-lock-icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* === CUSTOM TOOLTIP STYLES === */
.custom-ui-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #1e3a8a, #2563eb); /* Синий градиент */
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--body-font, sans-serif);
    font-weight: 500;
    pointer-events: none; /* Чтобы мышка не "спотыкалась" */
    z-index: 999999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.custom-ui-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === SIDEBAR TOOLTIP STYLES === */
/* Скрываем стандартный title браузера */
.sidebar-btn[title] {
    position: relative;
}

/* Показываем кастомный tooltip при наведении */
.sidebar-btn[title]:hover::after {
    content: attr(title);
    position: fixed;
    left: calc(100% + 15px); /* Справа от иконки с отступом */
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff;
    padding: 0 12px; /* Только горизонтальные отступы */
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--body-font, sans-serif);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    opacity: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 44px; /* Точная высота как у иконки */
    display: flex;
    align-items: center;
    min-width: fit-content;
    line-height: 1; /* Убираем лишние отступы */
}

/* Скрываем tooltip когда не наведено */
.sidebar-btn[title]:not(:hover)::after {
    display: none;
}

/* Базовый стиль кнопки (у вас уже есть, убедитесь что есть position: relative) */
.search-btn {
    position: relative;
    overflow: hidden; /* Важно: обрезает все, что выходит за границы */
    /* ... остальные ваши стили ... */
}

/* Состояние блокировки */
.search-btn.locked {
    pointer-events: none; /* Запрет кликов */
    cursor: wait;
}

/* Шторка кулдауна (Псевдоэлемент) */
.search-btn.locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Цвет шторки (затемнение) */
    background: rgba(0, 0, 0, 0.4);
    z-index: 2; /* Поверх текста кнопки */

    /* Анимация движения ширины */
    animation: searchCooldownSwipe 5s linear forwards;

    /* Точка трансформации справа, чтобы шторка уходила влево */
    transform-origin: right center;
}

/* Анимация: Шторка сжимается по горизонтали */
@keyframes searchCooldownSwipe {
    0% {
        transform: scaleX(1); /* Полная ширина */
    }
    100% {
        transform: scaleX(0); /* Исчезает */
    }
}

/* ======================================== */
/* ИСПРАВЛЕННЫЙ КАК У GROK — МЕНЬШЕ ИКОНКИ -30% (ЕЩЁ МЕНЬШЕ), БОЛЬШЕ ОТСТУП СНИЗУ, БЕЗ ДВИЖЕНИЯ */
/* ======================================== */

.sidebar nav ul {
    padding: 20px 0 40px 0 !important;  /* ← увеличил снизу до 40px — теперь точно не уйдёт за край */
    margin: 0 !important;
    gap: 14px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    overflow: hidden !important;
    height: 100%;
    justify-content: flex-start !important;
}

/* Кнопка — полностью статичная */
.sidebar-btn {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    transition: background 0.3s ease !important;  /* ← только фон, без движения */
    position: relative !important;
    padding: 0 !important;
}

/* Только фон при наведении — без scale или transform */
.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Активная — статичная */
.sidebar-btn.active {
    background: rgba(100, 149, 237, 0.18) !important;
    color: #8cb4ff !important;
}

/* Иконки — ещё меньше на 30% (с 22px базового → 10.5px ≈ 11px, но для читаемости 12px) */
.sidebar-btn i,
.sidebar-btn img {
    font-size: 12px !important;     /* ← теперь реально -30% от оригинала, очень маленькие */
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.3s ease !important;
}

.sidebar-btn:hover i,
.sidebar-btn:hover img {
    color: white !important;
}

.sidebar-btn.active i,
.sidebar-btn.active img {
    color: #8cb4ff !important;
}

/* Текст скрыт */
.sidebar .menu-text {
    display: none !important;
}

/* Раскрытие — статичное */
.sidebar.expanded .sidebar-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 16px !important;
    justify-content: flex-start !important;
    padding-left: 20px !important;
    gap: 16px !important;
    background: transparent !important;
}

.sidebar.expanded .sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar.expanded .menu-text {
    display: block !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9);
}

/* --- ИСПРАВЛЕНИЕ ОТСТУПА СНИЗУ --- */
.sidebar nav ul {
    /* Было 40px, ставим 80px или больше, чтобы поднять кнопки выше */
    padding-bottom: 80px !important;
}

/* --- SIDEBAR TOOLTIP (теперь управляется JavaScript) --- */

/* Разрешаем подсказке выходить за пределы кнопки */
.sidebar-btn {
    overflow: visible !important;
    position: relative !important;
}

/* !!! ВАЖНО: Разрешаем подсказкам вылетать за пределы узкого сайдбара !!! */
.sidebar {
    overflow: visible !important; /* Было hidden, ставим visible */
}

/* На всякий случай для навигации тоже */
.sidebar nav {
    overflow: visible !important;
}

/* И для списка */
.sidebar nav ul {
    overflow: visible !important;
    /* ОТСТУП СНИЗУ ДЛЯ НИЖНИХ КНОПОК */
    padding-bottom: 10px !important; /* Увеличил отступ, чтобы точно поднялось */
    box-sizing: border-box !important; /* Чтобы отступ считался внутрь высоты */
}

/* --- СБРОС И НАСТРОЙКА ПОДСКАЗОК (TOOLTIP) --- */

/* 1. Скрываем стандартную браузерную подсказку (насколько это возможно CSS)
 *  и готовим кнопку */
.sidebar-btn {
    position: relative !important;
}

/* 2. Рисуем свою красивую подсказку */
.sidebar-btn[title]:hover::after {
    /* Берем текст из атрибута title */
    content: attr(title);

    /* ПОЗИЦИОНИРОВАНИЕ */
    position: absolute !important;
    left: 100% !important;  /* Сдвигаем вправо от кнопки */
    top: 0 !important;      /* Верхний край ровно по кнопке */
    margin-left: 10px;      /* Отступ от кнопки (щель) */

    /* РАЗМЕРЫ */
    height: 100% !important; /* Высота ТОЧНО как у кнопки */
    width: max-content;      /* Ширина по тексту */
    min-width: 80px;         /* Минимальная ширина, чтобы не было сплюснуто */

    /* ОФОРМЛЕНИЕ ТЕКСТА */
    display: flex !important;
    align-items: center;     /* Центрируем текст по вертикали */
    justify-content: center; /* Центрируем текст по горизонтали */
    white-space: nowrap;     /* Текст в одну строку */
    font-size: 14px;
    font-weight: 500;

    /* ЦВЕТА (Как на твоем скрине) */
    background: #313189 !important; /* Синий фон */
    color: #ffffff !important;      /* Белый текст */

    /* КРАСОТА */
    padding: 0 15px;        /* Отступы внутри плашки */
    border-radius: 8px;     /* Скругление */
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3); /* Тень */
    z-index: 99999;         /* Поверх всего */

    /* Отключаем любые старые трансформации */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Убираем старую подсказку, если она была реализована через другой класс */
.sidebar-btn:hover .menu-text {
    display: none !important; /* На всякий случай, чтобы не двоилось */
}

/* --- 1. Уменьшение сайдбара (-20%) --- */

/* Уменьшаем вертикальный отступ между иконками */
.sidebar nav ul {
    gap: 10px !important; /* Было 14px */
}

/* Уменьшаем размер круглой кнопки и фона */
.sidebar-btn {
    width: 36px !important;  /* Было 44px */
    height: 36px !important; /* Было 44px */
}

/* Уменьшаем размер самой иконки внутри */
.sidebar-btn i,
.sidebar-btn img {
    font-size: 11px !important; /* Было ~14-15px */
    /* Если используются картинки img, добавляем ограничение */
    width: 16px !important;
    height: 16px !important;
}

/* Корректируем отступ для развернутого состояния, чтобы текст не прилипал */
.sidebar.expanded .sidebar-btn {
    height: 40px !important; /* Чуть меньше для развернутого */
    border-radius: 12px !important;
}

/* --- 2. Фикс центрирования категорий --- */

/* Правило для платной версии (по умолчанию) */
body:not(.app-mode-free) #category-content-wrapper .category-btn {
    /* Фиксируем ширину, чтобы левая и правая стороны были симметричны */
    min-width: 90px !important;
    max-width: 130px !important;
    /* Разрешаем перенос текста, если он длинный */
    white-space: normal !important;
    padding: 3px !important;
}

/* Правило для бесплатной версии */
body.app-mode-free #category-content-wrapper .category-btn {
    /* Фиксируем ширину, чтобы левая и правая стороны были симметричны */
    min-width: 90px !important;
    max-width: 130px !important;
    /* Разрешаем перенос текста, если он длинный */
    white-space: normal !important;
    padding: 3px !important;
}

/* Уменьшаем шрифт, чтобы длинные названия (Mental Health) влезали в 110px */
#category-content-wrapper .folder-text {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: normal !important; /* Разрешить перенос слов */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Максимум 2 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- ВОЗВРАЩЕНИЕ ЗВЕЗД --- */
body.dark-theme {
    /* Убираем статичную картинку, чтобы было видно слой .space-background */
    background-image: none !important;
    /* Делаем фон прозрачным, чтобы просвечивал градиент космоса */
    background-color: transparent !important;
}

/* Убедимся, что контейнер со звездами видим */
body.dark-theme .space-background {
    display: block !important;
    z-index: -100; /* На самом заднем плане */
}

/* 1. Настраиваем плавность */
.category-btn, .folder-btn, .toggle-expand-btn {
    /* Убедимся, что фон и тень появляются плавно */

    /* Убираем рамки, чтобы они не мешали заливке */
    border: none !important;
    /* Важно: margin должен остаться как был, чтобы сетка не прыгала */
}

/* 2. Стиль при НАВЕДЕНИИ (Hover) */
.category-btn:hover, .folder-btn:hover, .toggle-expand-btn:hover {
    /* 1. Задаем цвет фона */
    background-color: rgba(255, 255, 255, 0.1) !important;

    /* 2. МАГИЯ: Создаем жесткую тень ТОГО ЖЕ ЦВЕТА, что и фон.
     *      0 0 0 — смещение и размытие (их нет)
     *      4px — насколько расширить "фон" во все стороны */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important;

    /* 3. Поднимаем слой, чтобы расширенный фон перекрыл границы соседей, а не ушел под них */
    z-index: 10;

}

/* 3. Стиль ВЫБРАННОЙ категории (Selected) */
.category-btn.selected, .folder-btn.selected {
    /* Цвет фона для выбранного (ваш синий/фиолетовый) */
    background-color: #584fb5 !important;
    color: white !important;

    /* Тень того же цвета (#584fb5) на 4px во все стороны */
    box-shadow: 0 0 0 4px #584fb5 !important;

    z-index: 10;
}

/* 4. Корректировка для ТЕМНОЙ ТЕМЫ (при наведении) */
body.dark-theme .category-btn:hover,
body.dark-theme .folder-btn:hover {
    /* Чуть светлее фон для темной темы */

    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* Добавьте это в style.css */

.comment-preview-tooltip {
    position: fixed; /* Используем fixed для точного позиционирования относительно окна */
    z-index: 10020 !important;
    display: block;
    font-size: calc(14px * var(--content-scale-factor, 1.0));
    line-height: 1.4;
    max-width: 450px !important;
    width: auto !important;
    max-height: 300px;
    padding: 12px 15px;
    background-color: var(--background-card);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: var(--shadow-strong);

    /* Важно для прокрутки */
    overflow-y: auto;
    overscroll-behavior: contain; /* Предотвращает прокрутку родителя в современных браузерах */

    /* Для взаимодействия мышью */
    pointer-events: auto !important;
    box-sizing: border-box;
    white-space: normal;
}

/* Скроллбар внутри тултипа */
.comment-preview-tooltip::-webkit-scrollbar {
    width: 6px;
}
.comment-preview-tooltip::-webkit-scrollbar-track {
    background: transparent;
}
.comment-preview-tooltip::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), #2563eb);
    border-radius: 3px;
}

/* =========================================
 *  MOBILE ADAPTATION (max-width: 768px)
 *  ========================================= */

@media (max-width: 768px) {

    /* --- 1. GLOBAL LAYOUT & RESET --- */
    body {
        /* Отступ сверху равен высоте шапки (60px) + немного воздуха (10px) */
        padding: 70px 0 0 0 !important;
        width: 100% !important;
        overflow-x: hidden;
        background-color: var(--background-main) !important; /* Цвет фона страницы */
    }

    /* Скрываем десктопную стрелку */
    #scrollToTopBtn {
    display: none !important;
    }

    /* Восстанавливаем белый фон (или цвет карточки) для контента */
    .container, .auth-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;

        /* ВЕРНУЛИ ФОН: */
        background-color: var(--background-card) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;

        /* Убираем радиус, чтобы было во всю ширину */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;

        /* Внутренние отступы контента */
        padding: 15px !important;
        margin: 0 !important;
        min-height: calc(100vh - 70px); /* Чтобы фон тянулся до низа */
    }

    /* Скрываем логотип внутри контента, так как он в шапке */
    .container > .logo {
        display: none !important;
    }

    /* --- 2. HEADER (FIXED) --- */
    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        /* Фон шапки (используем переменную карточки или main) */
        background: var(--background-card);
        border-bottom: 1px solid var(--border-light);
        z-index: 10000;
        padding: 0 15px; /* Отступы по краям шапки */
        box-sizing: border-box;
        /* Эффект размытия (Ghost) */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }



    .burger-btn, .header-icon-btn {
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 20px;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Стили для стрелки вверх в шапке */
    .header-icon-btn i {
        color: var(--accent-blue); /* Акцентный цвет */
        font-size: 22px;
    }

    .mobile-logo-img {
        height: 35px;
        width: auto;
        display: block;
    }

    /* --- 3. SIDEBAR (CLEAN STYLE) --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        background: var(--background-card) !important; /* Плотный фон */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 10002; /* Поверх всего */
        box-shadow: 4px 0 15px rgba(0,0,0,0.3);
        padding-top: 70px !important; /* Отступ чтобы не перекрывать крестик если он будет */
        border-right: 1px solid var(--border-light);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Overlay затемнения */
    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 10001;
        backdrop-filter: blur(3px);
    }

    .mobile-sidebar-overlay.active {
        display: block;
    }

    /* Стилизация списка внутри сайдбара */
    .sidebar nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Выравнивание по левому краю */
        padding: 0 20px !important;
        gap: 0 !important; /* Убираем отступы между li, будем делать padding у кнопок */
    }

    .sidebar-item {
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important; /* Убираем фон плашек */
        border-radius: 0 !important;
        border-bottom: 1px solid var(--border-light); /* Тонкая линия разделитель (опционально) */
    }

    /* Последний элемент без линии */
    .sidebar-item:last-child {
        border-bottom: none;
    }

    /* --- ЧИСТЫЙ СТИЛЬ КНОПОК (Иконка + Текст) --- */
    .sidebar .sidebar-btn,
    .sidebar nav ul li a,
    .sidebar nav ul li button {
        width: 100% !important;
        height: auto !important;
        min-height: 55px !important; /* Высота строки */
        background: transparent !important; /* ПРОЗРАЧНЫЙ ФОН */
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        /* Flex для выравнивания в строку */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 !important;
        color: var(--text-primary) !important;
        font-family: var(--body-font);
        font-weight: 500;
        font-size: 16px !important;
        text-transform: capitalize; /* Первая буква заглавная */
    }

    /* Иконка */
    .sidebar .sidebar-btn i {
        width: 30px !important; /* Фиксированная ширина для выравнивания */
        text-align: center; /* Центрируем иконку в её контейнере */
        font-size: 18px !important;
        margin-right: 15px !important; /* Отступ до текста */
        color: var(--text-muted) !important; /* Спокойный цвет иконок */
        transition: color 0.2s;
    }

    /* Текст */
    .sidebar .menu-text {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: var(--text-primary) !important;
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Активное состояние и ховер */
    .sidebar .sidebar-btn:active i,
    .sidebar .sidebar-btn.active i {
        color: var(--accent-blue) !important; /* Синий цвет активной иконки */
    }

    .sidebar .sidebar-btn:active .menu-text,
    .sidebar .sidebar-btn.active .menu-text {
        color: var(--accent-blue) !important;
        font-weight: 600;
    }

    /* --- 4. КАТЕГОРИИ И ПРОЧЕЕ --- */
    #category-content-wrapper,
    .category-scroll-wrapper {
        display: none !important;
    }

    .mobile-only-btn {
        display: flex !important;
        width: 100%;
        height: 45px;
        margin: 0 0 20px 0; /* Отступ снизу */
        justify-content: center;
        gap: 10px;
    }

    /* Модалка категорий */
    .mobile-category-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        background: var(--background-card);
    }

    .mobile-modal-header {
        padding: 15px;
        background: var(--background-alt);
        border-bottom: 1px solid var(--border-light);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #mobile-category-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    }

    /* Исправление формы поиска */
    .form-grid-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        margin: 0 !important;
    }
}

/* Это у вас уже есть в конце файла, трогать не нужно: */
@media (max-width: 768px) {
    .mobile-only-btn {
        display: flex !important;
        /* ... */
    }
}

/* =========================================
 *  MOBILE ADAPTATION (max-width: 768px)
 *  ========================================= */

@media (max-width: 768px) {


    /* --- 4. CATEGORIES --- */
    /* Скрываем старые категории */
    #category-content-wrapper,
    .category-scroll-wrapper {
        display: none !important;
    }

    /* Показываем кнопку */
    .mobile-only-btn {
        display: flex !important;
        width: 100%;
        margin: 20px 0;
        justify-content: center;
        gap: 10px;
    }

    /* --- 5. MOBILE CATEGORY MODAL --- */
    .mobile-category-content {
        max-width: 95% !important;
        height: 85vh;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden;
    }

    .mobile-modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-modal-header h2 { margin: 0; font-size: 18px; }

    #mobile-category-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    }

    .mobile-theme-group h3 {
        text-align: center;
        text-transform: uppercase;
        font-size: 14px;
        color: var(--text-muted);
        margin: 25px 0 15px 0;
        letter-spacing: 1px;
        position: relative;
    }

    /* Линии по бокам заголовка */
    .mobile-theme-group h3::before,
    .mobile-theme-group h3::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: var(--border-light);
    }
    .mobile-theme-group h3::before { left: 0; }
    .mobile-theme-group h3::after { right: 0; }

    .mobile-theme-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        gap: 10px;
    }

    /* Стиль плитки категории в модалке */
    .mobile-cat-item {
        background: var(--background-alt);
        border: 1px solid var(--border-medium);
        border-radius: 10px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-cat-item.selected {
        background: var(--accent-blue-light);
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 1px var(--accent-blue);
    }

    .mobile-cat-item img {
        width: 32px;
        height: 32px;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .mobile-cat-item span {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
        pointer-events: none;
    }

    .mobile-modal-footer {
        padding: 15px;
        border-top: 1px solid var(--border-light);
        background: var(--background-card);
    }

    .mobile-modal-footer .search-btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* style.css - В САМЫЙ КОНЕЦ */

/* Скрываем элементы с классом mobile-only-btn на экранах шире 768px */
@media (min-width: 769px) {
    .mobile-only-btn {
        display: none !important;
    }
}

/* style.css */

/* === МОБИЛЬНЫЕ СТИЛИ (до 768px) === */
@media (max-width: 768px) {

    /* 1. ЦЕНТРИРОВАНИЕ ЛОГОТИПА */
    /* Предполагаем, что логотип лежит в контейнере .mobile-header или .sidebar-header */
    .mobile-header, .sidebar-header {
        display: flex;
        justify-content: center; /* Центр по горизонтали */
        align-items: center;     /* Центр по вертикали */
        position: relative;      /* Важно для позиционирования меню */
        width: 100%;
    }

    /* Если логотип сдвинут, убедитесь, что у него нет margin-left/right */
    .logo-container, .mobile-logo-img {
        margin: 0 auto !important;
    }

    /* 2. НАСТРОЙКА ФОНА ФОРМЫ ПОИСКА */

    /* Убираем фон с самой формы, чтобы она была прозрачной */
    #search-form, .search-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    }

    /* Задаем белый/темный фон ТОЛЬКО для контейнера инпутов */
    .search-inputs-container {
        background: var(--background-card); /* Или #fff / #1e1e1e */
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        margin-bottom: 15px; /* Отступ от блока инпутов до кнопки */
        border: 1px solid var(--border-light);
    }

    /* Стили для кнопки поиска, которая теперь отдельно */
    .search-btn.main-search-submit {
        width: 100%;
        margin-top: 0;
        /* Кнопка будет на фоне сайта (прозрачном вокруг нее) */
    }
}

@media (max-width: 768px) {
    body {
        /* Высота шапки 60px, добавляем отступ только для контента */
        padding: 60px 0 0 0 !important;
    }

    /* --- ИСПРАВЛЕННАЯ ШАПКА (GRID) --- */
    .mobile-header {
        display: grid !important;
        grid-template-columns: 60px 1fr 60px; /* Боковые колонки фиксированы, центр тянется */
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: var(--background-card);
        border-bottom: 1px solid var(--border-light);
        z-index: 10000;
        padding: 0 !important; /* Убираем падинги, выровняем через гриды */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Левая часть (Бургер) */
    .header-left {
        justify-content: flex-start;
        padding-left: 20px !important; /* Сдвигаем бургер-меню вправо */
    }

    /* Центр (Логотип) */
    .mobile-logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-logo-img {
        height: 35px;
        width: auto;
    }

    /* Правая часть (Стрелка) */
    .header-right {
        justify-content: flex-end;
        padding-right: 20px !important; /* Сдвигаем стрелку влево */
    }

    /* Скрываем старый логотип в контейнере, если он там есть */
    .container > .logo {
        display: none !important;
    }
}

/* Фикс белого фона при автозаполнении в темной теме */
body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme input:-webkit-autofill:active {
    /* Заменяем стандартный белый фон браузера на ваш темный Ghost-дизайн */
    -webkit-box-shadow: 0 0 0px 1000px #0e151c inset !important; /* Цвет var(--background-card) */
    -webkit-text-fill-color: #e2e8f0 !important; /* Цвет var(--ghost-text) */
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 15px rgba(0, 162, 255, 0.08) !important; /* Ваше свечение */
}

/* Усиленный фикс прозрачности для Ghost-инпутов */
input[type="text"], input[type="number"], input[type="date"] {
    background: var(--ghost-bg) !important;
    color: var(--ghost-text) !important;
}

@media (max-width: 768px) {
    .mobile-header {
        display: grid !important;
        /* Три колонки: края по 60px, центр забирает всё остальное */
        grid-template-columns: 60px 1fr 60px !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: var(--background-card);
        border-bottom: 1px solid var(--border-light);
        z-index: 10000;
        padding: 0 !important;
        backdrop-filter: blur(10px);
    }

    .header-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .header-left { justify-content: flex-start; padding-left: 10px; }
    .header-right { justify-content: flex-end; padding-right: 10px; }

    .mobile-logo-img {
        height: 35px;
        width: auto;
        margin: 0 auto !important;
    }

    /* Убираем лишние отступы у body, чтобы шапка была в самом верху */
    body {
        padding-top: 60px !important;
        margin: 0 !important;
    }
}

/* 1. ПРИНУДИТЕЛЬНО СКРЫВАЕМ МОБИЛЬНУЮ ШАПКУ НА ДЕСКТОПЕ */
@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
}

/* 2. ФИКС БЕЛОГО ПОЛЯ ПРИ АВТОЗАПОЛНЕНИИ И ПЕРЕХОДАХ */
/* Этот блок гарантирует, что в темной теме поля всегда будут темными */
body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #0e151c inset !important; /* Цвет вашего фона --background-card */
    -webkit-text-fill-color: #e2e8f0 !important; /* Цвет текста --ghost-text */
    transition: background-color 5000s ease-in-out 0s;
}

/* Дополнительно фиксируем фон инпутов для темной темы */
body.dark-theme input[type="text"],
body.dark-theme input[type="number"],
body.dark-theme input[type="date"] {
    background-color: rgba(20, 25, 35, 0.6) !important; /* Ваш --ghost-bg */
    color: #e2e8f0 !important;
}

/* --- В файл style.css --- */

/* Сетка для избранного (как в платной секции) */
#user-folder-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Адаптивная ширина */
gap: 15px;
padding: 10px 0;
width: 100%;
}

/* Карточка в избранном должна быть такой же, как category-card */
.folder-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 15px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100px; /* Фиксированная высота для единообразия */
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.folder-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

.folder-item-card img {
    width: 40px; /* Фиксированный размер иконки */
    height: 40px;
    object-fit: contain;
    margin-bottom: 8px;
}

.folder-item-card span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничение в 2 строки текста */
    -webkit-box-orient: vertical;
}

/* Активное состояние */
.folder-item-card.active-folder {
    background: var(--accent-blue-light);
    border-color: var(--primary-blue);
}

/* --- В файл style.css --- */

/* Исправление мобильной модалки категорий */
@media (max-width: 768px) {
    /* Центрирование кнопки Continue */
    .mobile-modal-footer {
        display: flex !important;           /* Включаем Flexbox */
        justify-content: center !important; /* Центр по горизонтали */
        align-items: center !important;     /* Центр по вертикали */
        text-align: center !important;
        width: 100%;
        margin: 0 auto;
        padding: 12px 0; /* Равномерный отступ */
        line-height: normal; /* Сброс высоты строки */
    }
}

/* === 1. Исправление кнопки Continue на мобильных (Центрирование) === */
.mobile-modal-footer .search-btn {
    display: flex !important;
    justify-content: center !important; /* Центрирует текст по горизонтали */
    align-items: center !important;     /* Центрирует по вертикали */
    text-align: center !important;
    padding-left: 0 !important;         /* Убирает отступы слева/справа */
    padding-right: 0 !important;
}

/* Скрываем части кнопки (иконки квоты), если они там есть, для чистого текста */
.mobile-modal-footer .search-btn .btn-part {
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
/* Скрываем боковые части в модалке, если они мешают */
.mobile-modal-footer .search-btn .btn-left,
.mobile-modal-footer .search-btn .btn-right {
    display: none !important;
}


/* === 2. Исправление стиля папок в Избранном (Как на главной) === */
/* Переопределяем Grid на Flexbox с центрированием */
#profile-category-view {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important; /* Центрирование по горизонтали */
gap: 8px !important; /* Отступ как на главной */
width: 100% !important;
max-width: 860px !important; /* Ограничение ширины как на главной */
margin: 0 auto !important;
padding: 10px 0 !important;
}

/* Принудительно задаем размер кнопок в профиле, как на главной */
#profile-category-view .category-btn,
#profile-category-view .folder-btn,
#profile-category-view .toggle-expand-btn {
width: auto !important;
min-width: 95px !important;
height: 80px !important;
margin: 0 !important;
flex-grow: 0 !important; /* Не растягиваться */
flex-shrink: 0 !important;
}

/* Уменьшаем шрифт текста внутри папок профиля для единообразия */
#profile-category-view .folder-text {
font-size: 13px !important;
white-space: normal !important;
line-height: 1.2 !important;
}

/* --- SMART USERNAME TRUNCATION & DATE SPACING --- */

/* Контейнер заголовка */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Минимальный зазор между левой частью и кнопками справа */
    overflow: hidden; /* Важно */
}

/* Левая часть (аватар, ник, лайки, дата) */
.comment-meta-left {
    display: flex;
    align-items: center;
    flex: 1; /* Занимает всё доступное место слева от кнопок действий */
    min-width: 0; /* Критично для работы ellipsis внутри flex */
    gap: 0; /* Убираем gap, будем управлять отступами вручную для точности */
}

.author-avatar {
    flex-shrink: 0; /* Аватар никогда не сжимается */
    margin-right: 10px;
}

.username {
    /* "Умное" сокращение */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1; /* Разрешаем сжиматься, если места мало */
    max-width: 100%; /* Но не шире контейнера */
    margin-right: 0; /* Отступ справа не нужен, он будет у следующего элемента */
}

/* Лайки и дата никогда не сжимаются */
.likes, .date-text {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 15px; /* Единый большой отступ слева от предыдущего элемента */
}

/* Если лайков нет, дата всё равно получит margin-left: 15px от ника,
 *  благодаря правилу выше. */

/* Правая часть (кнопки перевода и избранного) */
.comment-header-buttons {
    flex-shrink: 0; /* Кнопки справа не сжимаются */
    display: flex;
    gap: 5px;
}

/* --- MODAL CLOSE BUTTON FIX --- */

/* Контейнер модального окна должен иметь relative, чтобы позиционировать кнопку */
.thread-modal-content, .modal-content {
    position: relative !important;
}

.modal-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 100 !important; /* Поверх всего */

    width: 32px;
    height: 32px;

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

    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;

    /* Дефолтный фон (для светлой темы) */
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

.modal-close:hover {
    background-color: var(--accent-red); /* Красный при наведении */
    color: white;
    transform: rotate(90deg); /* Эффект вращения */
}

/* Для темной темы */
body.dark-theme .modal-close {
    background-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

body.dark-theme .modal-close:hover {
    background-color: var(--accent-red);
    color: white;
}

/* --- UPDATED BUTTONS (Source & Open Thread) --- */

.open-thread-btn,
.source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;

    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    border-radius: 20px; /* Форма пилюли */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    /* Границы и цвета по умолчанию */
    border: 1px solid var(--border-medium);
    background-color: transparent;
    color: var(--text-secondary);
}

/* Source specific */
.source:hover {
    border-color: var(--accent-blue);
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Open Thread specific */
.open-thread-btn:hover {
    border-color: var(--accent-blue);
    background-color: var(--accent-blue); /* Заливка цветом */
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
}

/* Dark Theme Adjustments */
body.dark-theme .open-thread-btn,
body.dark-theme .source {
    border-color: rgba(255,255,255,0.2);
    color: #a0a7b1;
}

body.dark-theme .source:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-color: #fff;
}

body.dark-theme .open-thread-btn:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

@media (max-width: 768px) {
    /* Превращаем грид в вертикальную колонку */
    .preview-mode-full .comment-video-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }

    /* Картинка на всю ширину */
    .preview-mode-full .preview-column {
        width: 100% !important;
    }

    .preview-mode-full .preview-column .video-preview-img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px; /* Ограничение высоты */
        object-fit: cover;
        border-radius: 8px;
    }

    /* Колонка с данными */
    .preview-mode-full .video-data-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Центрируем заголовок и кнопку */
    }

    /* Заголовок под видео */
    .preview-mode-full .video-data-title {
        font-size: 16px !important;
        text-align: center !important;
        white-space: normal !important; /* Разрешаем перенос строк заголовка */
        margin-bottom: 5px !important;
    }

    /* Кнопка "Show details" под заголовком */
    .preview-mode-full .mobile-details-toggle {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding: 5px 10px;
        background: var(--background-alt);
        border-radius: 15px;
    }
}

@media (max-width: 768px) {
    /* 1. Поднимаем нижние кнопки (Design/Logout) */
    .sidebar nav ul {
        padding-bottom: 100px !important; /* Большой отступ снизу */
        justify-content: flex-start !important; /* Прижимаем к верху */
        overflow-y: auto !important; /* Разрешаем скролл если экран маленький */
    }

    /* Разделитель (пружина) должна работать */
    .sidebar-spacer {
        flex-grow: 1;
        min-height: 20px;
    }

    /* 2. Исправление цвета при наведении (Hover) */
    .sidebar .sidebar-btn:hover,
    .sidebar nav ul li a:hover,
    .sidebar nav ul li button:hover {
        /* Яркий фон, чтобы отличался от текста */
        background-color: rgba(37, 99, 235, 0.1) !important; /* Светло-синий */
    }

    .sidebar .sidebar-btn:hover .menu-text,
    .sidebar nav ul li a:hover .menu-text,
    .sidebar nav ul li button:hover .menu-text {
        color: var(--accent-blue) !important; /* Синий текст */
        font-weight: 600;
    }

    /* Для темной темы (мобильный) */
    body.dark-theme .sidebar .sidebar-btn:hover,
    body.dark-theme .sidebar nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-theme .sidebar .sidebar-btn:hover .menu-text {
        color: #fff !important;
    }
}

/* --- FIXED DESIGN GRID & MOBILE ARROW --- */

/* 1. Красивая сетка настроек (Design Settings) */
.design-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 10px; /* Расстояние между кнопками */
    width: 100%;
}

.design-option-btn {
    width: 100% !important; /* Растягиваем на всю ячейку */
    margin: 0 !important;
    justify-content: center; /* Центрируем текст и иконку */
    text-align: center;
    padding: 10px 5px; /* Чуть меньше боковые отступы, чтобы текст влезал */
}

/* 2. Круглая стрелка меню (Sidebar Toggle) в мобильной версии */
@media (max-width: 768px) {
    #sidebar-toggle {
    left: 10px !important; /* Сдвигаем левее (было 15px или 20px) */
    width: 42px;
    height: 42px;
    border-radius: 50% !important; /* Делаем идеальный круг */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* Тень для красоты */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background-color: var(--background-card); /* Плотный фон */
    }

    /* Центрируем иконку внутри круга */
    #sidebar-toggle i {
    margin: 0;
    font-size: 18px;
    }
}

/* --- PERFECT DATE SPACING --- */

.comment-meta-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;

    /* ГЛАВНОЕ ИСПРАВЛЕНИЕ: */
    gap: 15px; /* Единый фиксированный отступ между всеми элементами внутри */
}

.author-avatar {
    flex-shrink: 0;
    margin-right: 0; /* Убираем margin, так как теперь работает gap */
    /* Но если аватар кажется слишком далеко, можно уменьшить gap или сделать margin-right: 10px тут и убрать gap, но gap надежнее */
}
/* Если аватар должен быть ближе к нику, чем дата к нику: */
.author-avatar {
    margin-right: 10px; /* Отступ аватара от ника */
    margin-left: 0;
}
.comment-meta-left {
    gap: 0; /* Сбрасываем общий gap */
}
/* Применяем отступ только к элементам мета-данных */
.username {
    margin-right: 15px; /* Отступ от ника до следующего элемента (лайка или даты) */
}
.likes {
    margin-right: 15px; /* Отступ от лайка до даты */
}

/* ОБНОВЛЕННЫЙ ВАРИАНТ (Самый надежный): */
.comment-meta-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.author-avatar {
    margin-right: 10px; /* Аватар всегда близко к нику */
}

.username {
    /* Smart truncation */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

/* Вот тут магия: */
.likes {
    margin-left: 15px; /* Отступ слева от Ника */
}

.date-text {
    /* Если перед датой идут Лайки, отступ будет 15px.
     *     Если перед датой идет Ник (лайков нет), нам нужно, чтобы отступ тоже был 15px. */
    margin-left: 15px;
}

/* ВАЖНО: Убедитесь, что в HTML лайки вообще не рендерятся (display: none или отсутствуют в DOM), если их нет.
 * Е с*ли блок .likes присутствует в HTML но пустой, он может ломать отступы.
 */

@media (max-width: 768px) {
    /* МОДАЛЬНОЕ ОКНО НА ВЕСЬ ЭКРАН */
    .thread-modal-content,
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Убираем скругления углов */
        display: flex;
        flex-direction: column;
        top: 0 !important; /* Прижимаем к самому верху */
    }

    /* Контент внутри модалки должен скроллиться */
    #thread-container,
    #modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px; /* Немного отступа для текста внутри */
    }

    /* КРЕСТИК (CLOSE BUTTON) */
    .modal-close {
        /* Делаем его непрозрачным */
        background-color: var(--background-card) !important;

        /* Добавляем тень, чтобы выделялся на фоне картинок */
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);

        /* Позиция */
        top: 10px !important;
        right: 10px !important;

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

        /* Размер */
        width: 36px;
        height: 36px;
        opacity: 1 !important; /* Полная видимость */
        z-index: 9999;
    }
}

/* --- 1. ИСПРАВЛЕНИЕ КНОПОК В НАСТРОЙКАХ --- */
/* Убедись, что этот класс применяется к контейнеру кнопок (Light/Dark и шрифты) */
.design-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки одинаковой ширины */
    gap: 10px; /* Отступ между кнопками */
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* Убираем лишние отступы самого контейнера */
}

.design-option-btn {
    width: 100%; /* Растянуть кнопку на всю ячейку */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 !important; /* Убираем внешние отступы, которые могли сдвигать кнопку */
    box-sizing: border-box;
}

/* --- FIX: Утилита для скрытия --- */
.d-none {
    display: none !important;
}

/* --- FIX: Мобильный макет "Show Details" (как на скриншоте) --- */
.mobile-details-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--background-alt); /* Слегка отличающийся фон */
    border-radius: 8px;
}

.mobile-details-thumb {
    flex-shrink: 0;
    width: 120px; /* Фиксированная ширина картинки */
    height: 68px; /* Пропорция 16:9 */
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.mobile-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-details-thumb .video-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
}

.mobile-details-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0; /* Важно для обрезки текста */
}

.mobile-details-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;

    /* Ограничение в 2 строки */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

.mobile-details-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* --- КНОПКА ЗАКРЫТИЯ ВНУТРИ ЗАГОЛОВКА ВИДЕО --- */

/* 1. Делаем заголовок "опорным" элементом для позиционирования */
.comment-video-header {
    position: relative !important;
    /* Убедимся, что заголовок не перекрывает кнопку */
    z-index: 1005;
}

/* 2. Стилизуем кнопку, когда она находится ВНУТРИ заголовка */
.comment-video-header .modal-close {
    position: absolute !important;
    top: 15px !important;   /* Отступ сверху */
    right: 15px !important; /* Отступ справа */

    /* Цвета для синего фона */
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.2) !important; /* Полупрозрачная подложка */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    /* Размеры и форма */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    z-index: 1010; /* Поверх всего в заголовке */
    transition: all 0.2s ease;
}

/* Эффект при наведении */
.comment-video-header .modal-close:hover {
    background-color: #ef4444 !important; /* Красный фон */
    color: white !important;
    transform: rotate(90deg); /* Поворот */
    border-color: #ef4444 !important;
}

/* Скрываем стандартную кнопку, если она осталась снаружи (на всякий случай),
 *  чтобы не было дублей, хотя JS ее перенесет. */
.thread-modal-content > .modal-close {
    /* Оставляем видимой, пока JS не перенесет её,
     *      но можно задать z-index пониже */
}

/* --- НОВЫЕ СТИЛИ ДЛЯ ШАПКИ МОДАЛЬНОГО ОКНА --- */

/* 1. Делаем синюю шапку "липкой" */
.comment-video-header-compact {
    position: sticky !important; /* Приклеивает элемент */
    top: 0 !important;           /* К самому верху */
    z-index: 2000 !important;    /* Поверх всего контента */
    border-radius: 0 !important; /* Убираем скругления сверху, чтобы прилегало плотно */
    margin-top: -1px;            /* Микро-фикс для швов */
    padding-right: 10px;         /* Место справа для крестика */
}

/* 2. Стили для кнопки закрытия ВНУТРИ синей шапки */
.header-close-btn-custom {
    background: transparent !important;
    border: none !important;
    color: white !important;       /* Белый цвет */
    font-size: 28px !important;    /* Размер крестика */
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 10px !important;
    margin-left: auto;             /* Отодвигает крестик в самый правый угол */

    /* Отключаем анимации и трансформации */
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.header-close-btn-custom:hover {
    color: #e2e8f0 !important;     /* Легкое изменение цвета при наведении (опционально) */
    background: transparent !important;
    transform: none !important;
}

/* 3. Корректировка контейнера, чтобы sticky работал */
#thread-modal-body {
    overflow-y: auto !important;   /* Разрешаем скролл внутри тела */
    scroll-behavior: smooth;       /* Плавный скролл */
    position: relative;
    max-height: 100vh;             /* На весь экран */
    padding-top: 0 !important;     /* Убираем отступ сверху, чтобы шапка была впритык */
}

/* Скрываем стандартный крестик модального окна, так как у нас будет свой в шапке */
#thread-modal .modal-close:not(.header-close-btn-custom) {
    display: none !important;
}

/* --- ФИКС КНОПКИ CLOSE --- */
/* Скрывать кастомную кнопку закрытия по умолчанию */
.header-close-btn-custom,
#thread-header-sticky .header-close-btn-custom {
display: none !important;
}

/* Показывать её ТОЛЬКО когда модальное окно открыто (имеет display: block или flex) */
#thread-modal[style*="block"] .header-close-btn-custom,
#thread-modal[style*="flex"] .header-close-btn-custom,
.modal-overlay[style*="block"] .header-close-btn-custom,
.modal-overlay[style*="flex"] .header-close-btn-custom {
    display: block !important;
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ v2 (Усиленная) --- */
@media screen and (max-width: 768px) {

    /* 0. ТЕСТ: Если на телефоне появилась тонкая красная полоска сверху,
     *      значит код работает, и дело было в размерах.
     *      Если полоски нет — проблема в Meta Viewport (см. пункт 1 выше) */
    body {
        border-top: 3px solid red !important;
    }

    /* 1. Уменьшаем текст (ищем по частичному совпадению имени класса) */
    /* Это затронет .comment-text, .reply-text, .thread-text и любые похожие */
    div[class*="text"],
    p[class*="text"],
    span[class*="content"],
    .comment-content,
    .message-body {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    /* 2. Уменьшаем Ники */
    div[class*="author"],
    span[class*="author"],
    a[class*="author"],
    .username,
    .name {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* 3. Уменьшаем Даты и Вспомогательное инфо */
    div[class*="date"],
    span[class*="date"],
    span[class*="time"],
    .timestamp {
        font-size: 12px !important;
    }

    /* 4. Статистика (лайки, кнопка ответа) */
    .comment-footer,
    div[class*="stats"],
    div[class*="actions"],
    .like-count,
    .reply-btn {
        font-size: 9px !important;
    }

    /* Уменьшаем иконки внутри кнопок */
    .comment-footer i,
    div[class*="stats"] i,
    .fa-heart, .fa-comment {
        font-size: 10px !important;
    }

    /* Уменьшаем отступы для компактности */
    .comment-item, .reply-item {
        padding: 6px !important;
        margin-bottom: 4px !important;
    }

    .scalable-text {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .fa-regular.fa-star {
        font-size: 12px !important;
    }

    .reactions-count {
        display: none;
    }

    .fa-arrow-up {
        margin-right: 14px;
    }

    .open-thread-btn {
        font-size: 13px !important;

    }

    .source {
        font-size: 13px !important;
    }

    .container {
        padding: 0px !important;
    }

    .category-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .form-grid-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .search-btn {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}

/* --- Убираем подсказку для кнопки закрытия в мобильной версии --- */
@media (max-width: 768px) {
    .header-close-btn-custom[data-title]:hover::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Если подсказка - отдельный элемент (например, .tooltip или кастомный класс), скрываем и его */
    .header-close-btn-custom:hover + .tooltip,  /* Если tooltip - sibling */
    .header-close-btn-custom:hover .tooltip {   /* Если внутри */
        display: none !important;
    }

    /* Дополнительный хак для native title (если JS копирует data-title в title) */
    .header-close-btn-custom {
        pointer-events: auto;  /* Кнопка остается кликабельной */
    }
}

/* Уменьшаем элементы в .comment-footer на 10% в мобильной версии */
@media (max-width: 768px) {
    .comment-footer {
        margin-top: calc(15px * 0.9); /* Уменьшаем верхний отступ на 10% */
        padding-top: calc(15px * 0.9); /* Уменьшаем верхний паддинг на 10%, что сократит высоту футера */
    }

    .comment-footer > * {
        transform: scale(0.99); /* Уменьшаем все дочерние элементы (кнопку, ссылку) на 10% */
        transform-origin: center; /* Масштабирование от центра, чтобы не сдвигалось */
    }

    /* Если нужно уточнить для конкретных элементов (на случай, если scale не идеален) */
    .toggle-replies {
        font-size: 13px;
        padding: calc(10px * 0.8) calc(16px * 0.8); /* Уменьшаем отступы кнопки на 10% (от ваших 10px/16px) */
    }

    .source {
        font-size: calc(14px * 0.9); /* Уменьшаем шрифт ссылки на 10% (от вашего базового calc(14px * var(--content-scale-factor))) */
        padding: calc(6px * 0.9) calc(14px * 0.9); /* Уменьшаем отступы ссылки на 10% (от ваших 6px/14px в обновлённых стилях) */
    }
}

/* Убираем тени слева в мобильной версии */
@media (max-width: 768px) {
    /* Для sidebar: убираем тень и blur (эффект размытия, похожий на тень) */
    .sidebar {
        box-shadow: none !important; /* Полностью убираем тень, если есть */
        backdrop-filter: none !important; /* Убираем blur, который может создавать "тень" */
        -webkit-backdrop-filter: none !important;
    }

    /* Для комментариев и карточек: убираем тень полностью или только слева */
    .comment,
    .comment:hover,
    .container,
    .controls.open,
    #sidebar-toggle,
    .mobile-details-row {
        box-shadow: none !important; /* Полностью убираем тень */
        /* Альтернатива: убираем только левую тень (если симметричная) */
        /* box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.05), 2px 0 4px -1px rgba(0, 0, 0, 0.03) !important; */ /* Тень только справа */
    }

    /* Если тень от переменных, переопределяем их */
    :root {
        --shadow-light: none;
        --shadow-medium: none;
        --shadow-strong: none;
    }
}

@media (max-width: 768px) {
    .compact-title {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .compact-channel {
        font-size: 13px !important;
    }
}

/* --- style.css (внутри @media max-width: 768px) --- */

@media (max-width: 768px) {
    /* ... остальные стили ... */

    /* Добавили .mobile-list-popup в список селекторов */
    .comment-preview-tooltip,
    .mobile-tooltip,
    .mobile-list-popup {
        position: fixed !important; /* Фиксируем относительно экрана */
        z-index: 100000 !important; /* Поверх всего */

        /* Ширина и центрирование */
        width: 96% !important;
        left: 2% !important;
        right: 2% !important;
        max-width: none !important;

        /* Оформление */
        background-color: var(--background-card) !important;
        border: 1px solid var(--accent-blue) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;

        /* Скролл внутри */
        max-height: 40vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;

        /* Сброс стилей списка */
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Стиль элементов внутри списка */
    .mobile-list-popup .mention-list-item {
        padding: 12px 10px !important;
        border-bottom: 1px solid var(--border-light) !important;
        font-size: 15px !important;
        color: var(--text-primary) !important;
    }
}

/* --- style.css (Внутри @media max-width: 768px) --- */

@media (max-width: 768px) {

    /* 1. УБИРАЕМ ПОДСКАЗКУ "CLOSE" ПРИ НАЖАТИИ */
    .header-close-btn-custom::after,
    .header-close-btn-custom::before,
    .header-close-btn-custom:hover::after,
    .header-close-btn-custom:hover::before,
    .header-close-btn-custom:active::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* 2. ИСПРАВЛЕНИЕ СКРОЛЛА В ПОДСКАЗКЕ */
    /* Контейнер подсказки */
    .comment-preview-tooltip,
    .mobile-tooltip,
    .mobile-list-popup {
        position: fixed !important;
        z-index: 100000 !important;

        width: 96% !important;
        left: 2% !important;
        right: 2% !important;
        max-width: none !important;

        background-color: var(--background-card) !important;
        border: 1px solid var(--accent-blue) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;

        /* Важно: используем Flexbox, чтобы заголовок стоял, а текст скроллился */
        display: flex !important;
        flex-direction: column !important;

        /* Убираем overflow у контейнера, он будет у текста */
        overflow: hidden !important;
        padding: 0 !important; /* Паддинги переносим внутрь */

        max-height: 50vh !important; /* Максимальная высота всего блока */
        border-radius: 12px !important;
    }

    /* Заголовок подсказки (фиксированный) */
    .mobile-tooltip .tooltip-header {
        padding: 12px 15px !important;
        flex-shrink: 0 !important; /* Не сжимается */
        border-bottom: 1px solid var(--border-light) !important;
        background: var(--background-alt);
    }

    /* Текст подсказки (СКРОЛЛИРУЕМЫЙ) */
    .mobile-tooltip .tooltip-text {
        padding: 15px !important;

        /* Свойства скролла */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Инерция на iOS */
        overscroll-behavior: contain !important; /* Не прокручивать страницу за пределами */

        flex-grow: 1 !important; /* Занимает все доступное место */
        font-size: 15px !important;
        line-height: 1.5 !important;

        /* Убираем ограничение высоты тут, оно задается контейнером */
        max-height: none !important;
    }
}
/* --- FIX MOBILE SCROLLING & INTERACTION --- */
@media (max-width: 768px) {
    /* 1. Ensure the popup flex container handles height correctly */
    .mobile-tooltip,
    .mobile-preview {
        /* Limit height to 60% of screen so there is room to see context */
        max-height: 60vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. The header must not shrink */
    .mobile-tooltip .tooltip-header {
        flex-shrink: 0 !important;
    }

    /* 3. The text area must scroll independently and TRAP the scroll */
    .mobile-tooltip .tooltip-text {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important; /* Critical for Flexbox scrolling */

        /* Modern way to prevent background scrolling */
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;

        /* Ensure text is selectable/readable */
        pointer-events: auto !important;
    }
}

/* Базовые стили для десктопной версии tooltip (preview) */
.comment-preview-tooltip {
    position: absolute; /* Абсолютное позиционирование (inline top/left переопределят) */
    z-index: 10000; /* Поверх контента, но ниже модалов если есть */
    background-color: var(--background-card); /* Фон из темы */
    border: 1px solid var(--border-light); /* Граница для видимости */
    box-shadow: var(--shadow-medium); /* Тень для глубины */
    padding: 10px; /* Внутренние отступы */
    border-radius: 8px; /* Скругление углов */
    max-width: 400px; /* Ограничение ширины, чтобы не растягивался */
    word-wrap: break-word; /* Перенос слов */
    font-size: 14px; /* Шрифт */
    color: var(--text-primary); /* Цвет текста */
    display: block; /* Видимый блок */
    opacity: 1; /* Полная видимость */
    pointer-events: auto; /* Взаимодействие с мышью (для enter/leave) */
}

/* Стили для внутреннего текста (для consistency) */
.comment-preview-tooltip .tooltip-text {
    line-height: 1.4; /* Интервал строк */
    white-space: pre-wrap; /* Сохранение пробелов и переносы */
}

/* В темной теме корректировка (опционально, если нужно) */
body.dark-theme .comment-preview-tooltip {
    background-color: var(--background-card);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

/* Базовые стили для десктопной версии tooltip (preview) */
.comment-preview-tooltip {
    position: absolute; /* Абсолютное позиционирование (inline top/left переопределят) */
    z-index: 10000; /* Поверх контента, но ниже модалов если есть */
    background-color: var(--background-card); /* Фон из темы */
    border: 1px solid var(--border-light); /* Граница для видимости */
    box-shadow: var(--shadow-medium); /* Тень для глубины */
    padding: 10px; /* Внутренние отступы */
    border-radius: 8px; /* Скругление углов */
    max-width: 400px; /* Ограничение ширины, чтобы не растягивался */
    word-wrap: break-word; /* Перенос слов */
    font-size: 14px; /* Шрифт */
    color: var(--text-primary); /* Цвет текста */
    display: block; /* Видимый блок */
    opacity: 1; /* Полная видимость */
    pointer-events: auto; /* Взаимодействие с мышью (для enter/leave) */
}

/* Стили для header (для consistency с одиночным) */
.comment-preview-tooltip .tooltip-header {
    font-size: 12px; /* Меньше, как в скрине */
    color: var(--text-secondary); /* Серый для лайков */
    margin-bottom: 5px; /* Отступ от текста */
}

/* Ник автора: синий, bold (match одиночному) */
.comment-preview-tooltip .tooltip-header .author {
    color: var(--accent-blue); /* Синий акцент */
    font-weight: bold; /* Толстый */
}

/* Стили для внутреннего текста */
.comment-preview-tooltip .tooltip-text {
    line-height: 1.4; /* Интервал строк */
    white-space: pre-wrap; /* Сохранение пробелов и переносы */
}

/* Выделение упоминаний: синий блок с фоном и обводкой (match одиночному) */
.comment-preview-tooltip .tooltip-text .highlight {
    background-color: var(--accent-blue-light); /* Светло-синий фон */
    color: var(--accent-blue); /* Темно-синий текст */
    border: 1px solid var(--accent-blue); /* Синяя обводка */
    border-radius: 4px; /* Скругление */
    padding: 2px 4px; /* Внутренние отступы для блока */
    font-weight: bold; /* Толстый для выделения */
}

/* В темной теме корректировка */
body.dark-theme .comment-preview-tooltip {
    background-color: var(--background-card);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.dark-theme .comment-preview-tooltip .tooltip-header .author {
    color: var(--accent-blue); /* Синий в dark */
}

body.dark-theme .comment-preview-tooltip .tooltip-text .highlight {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* Reduce spacing in tooltip/comment headers (affects nickname, likes, date) */
.tooltip-header,
.comment-header {  /* Target both tooltip and comment headers if needed */
    display: flex;
    align-items: center;
    gap: 4px;  /* Reduce overall gap between elements (was likely larger or using space-between) */
    justify-content: flex-start;  /* Align left to minimize auto-spacing; override space-between if needed */
}

/* Specific reductions between elements */
.tooltip-author,
.author {  /* Nickname/author span */
    margin-right: 4px;  /* Reduce space after nickname (to likes/date) */
}

.likes {  /* Likes span */
    margin-left: 4px;   /* Reduce space before likes (from nickname) */
    margin-right: 4px;  /* Reduce space after likes (to date) */
}

/* If date has a class (e.g., .item-date or .timestamp), target it */
.item-date,
.timestamp,
span[class*="date"] {  /* Date spans */
    margin-left: 12px;  /* Reduce space before date (from likes/nickname) */
}

/* For mobile: Even tighter spacing */
@media (max-width: 768px) {
    .tooltip-header,
    .comment-header {
        gap: 2px;  /* Tighter on small screens */
    }

    .tooltip-author,
    .author {
        margin-right: 2px;
    }

    .likes {
        margin-left: 2px;
        margin-right: 2px;
    }

    .item-date,
    .timestamp,
    span[class*="date"] {
        margin-left: 4px;
    }
}

/* Align Show replies (.toggle-replies) with Open Thread (.open-thread-btn) */
.toggle-replies,
.open-thread-btn {
    background-color: var(--background-alt); /* Subtle background */
    border: 1px solid var(--border-light); /* Light border for pill shape */
    border-radius: 20px; /* Rounded corners */
    padding: 6px 14px; /* Padding for button feel */
    font-size: calc(14px * var(--content-scale-factor)); /* Scaled font */
    color: var(--text-secondary); /* Text color */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Space between icon and text */
    transition: background-color 0.2s, color 0.2s; /* Smooth hover */
    white-space: nowrap; /* Prevent text wrapping */
}

.toggle-replies:hover,
.open-thread-btn:hover {
    background-color: var(--accent-blue-light); /* Hover background */
    color: var(--accent-blue); /* Hover text */
    border-color: var(--accent-blue); /* Hover border */
}

/* Dark theme adjustments (to match existing .source dark styles) */
body.dark-theme .toggle-replies,
body.dark-theme .open-thread-btn {
    background-color: var(--background-alt);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

body.dark-theme .toggle-replies:hover,
body.dark-theme .open-thread-btn:hover {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* Optional: If you want to remove the icon from Show replies to match the image (where Open Thread may not show it visibly), add this */
.toggle-replies i {
    /* display: none; */ /* Uncomment to hide icon */
}

/* Media query for mobile (tighter spacing if needed) */
@media (max-width: 768px) {
    .toggle-replies,
    .open-thread-btn {
        padding: 4px 10px; /* Smaller on mobile */
        font-size: 13px;
        gap: 4px;
    }
}

/* --- FIX: Стили для превью-тултипа (Ник и Лайки) --- */

/* 1. Увеличиваем размер ника (Исправление бага 2) */
.comment-preview-tooltip .tooltip-header .author-name {
    font-size: 0.9rem;      /* Крупный размер, как в заголовке поста */
    font-weight: 700;       /* Жирный шрифт */
    color: var(--accent-blue);
    margin-right: 12px;     /* Отступ от ника до лайков */
}

/* 2. Стилизация блока лайков (если он есть) */
.comment-preview-tooltip .tooltip-header .comment-likes {
    font-size: 0.95rem;     /* Размер чуть меньше ника */
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Цвет пальца вверх */
.comment-preview-tooltip .tooltip-header .comment-likes i.fa-thumbs-up {
    color: #FFCC4D; /* Желтый цвет как в основном дизайне */
}

/* Общее выравнивание шапки */
.comment-preview-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 2px;
}



/* В темной теме */
body.dark-theme .comment-preview-tooltip .tooltip-header .author-name {
    color: var(--accent-blue); /* Или другой цвет для темной темы */
}

/* Унификация базовых стилей: preview наследует от основного tooltip */
.comment-preview-tooltip {
    position: absolute;
    z-index: 10000;
    background-color: var(--background-card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-medium);
    padding: 10px;
    border-radius: 8px;
    max-width: 450px; /* Увеличено до ширины одиночного */
    word-wrap: break-word;
    font-size: 14px;
    color: var(--text-primary);
    display: block;
    opacity: 1;
    pointer-events: auto;
    width: 450px; /* Точно как в одиночном */
}

/* Общие стили для header (ник и лайки) — унифицировано */
.tooltip-header {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}


/* Лайки: с иконкой (для обоих) */
.tooltip-header .likes {
    font-size: 0.95rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tooltip-header .likes i.fa-thumbs-up {
    color: #FFCC4D; /* Жёлтый, как в основном дизайне */
}



/* Выделение mentions: синий блок (общее) */
.tooltip-text .highlight {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    padding: 2px 4px;
    font-weight: bold;
}

/* Темная тема (общее для обоих тултипов) */
body.dark-theme .comment-preview-tooltip,
body.dark-theme .comment-tooltip {
    background-color: var(--background-card);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

body.dark-theme .tooltip-header .tooltip-author {
    color: var(--accent-blue);
}

body.dark-theme .tooltip-text .highlight {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* Ник: жирный, синий (для обоих тултипов) */
.tooltip-header .tooltip-author {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-blue);
    /* Было 12px, ставим меньше, например 5px или 6px */
    margin-right: 6px;
}

/* Лайки: с иконкой (для обоих) */
.tooltip-header .likes {
    font-size: 0.95rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    /* --- ДОБАВЛЕННЫЕ СТРОКИ --- */
    position: relative; /* Включаем возможность позиционирования */
    top: -2px;          /* Поднимаем на 2 пикселя вверх (регулируйте это число) */
}

@media (max-width: 768px) {
    .mobile-tooltip,
    .mobile-preview {
        max-height: 60vh !important;  /* Оставляем, но можно уменьшить до 50vh для компактности */
        padding: 0 !important;       /* Уже есть, но подтверждаем */
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }

    .mobile-tooltip .tooltip-header,
    .mobile-preview .tooltip-header {
        padding: 8px 10px !important;  /* Уменьшаем с 12px 15px — меньше пространства сверху/снизу */
        border-bottom: 1px solid var(--border-light) !important;
    }

    .mobile-tooltip .tooltip-text,
    .mobile-preview .tooltip-text {
        padding: 10px !important;      /* Уменьшаем с 15px — меньше бокового/нижнего пространства */
        flex-grow: 0 !important;       /* Не растягивать текст-блок, если контент короткий */
        min-height: auto !important;   /* Позволяет сжиматься до размера контента */
        overflow-y: auto !important;   /* Скролл только если нужно */
    }

    /* Если нужно убрать боковые отступы глобально */
    .mobile-tooltip,
    .mobile-preview {
        width: 92% !important;         /* Уменьшаем с 96% для больше пространства по бокам экрана */
        left: 4% !important;           /* Центрируем чуть лучше */
    }
}

@media (max-width: 768px) {
    .tooltip-header {
        display: flex;
        align-items: center;
        gap: 8px;  /* Увеличили gap с 4px для лучшего разделения (ник + лайки) */
        justify-content: flex-start;
    }

    .tooltip-author {
        margin-right: 0;  /* Убрали лишний margin, gap возьмёт на себя */
    }

    .likes {
        margin-left: 0;   /* Убрали, чтобы лайки были ближе к нику */
        margin-right: 0;
        position: static; /* Убрали relative/top, чтобы не сдвигать вертикально */
    }

    /* Специфично для лайков в мобильной версии */
    .tooltip-header .likes {
        font-size: 0.75rem !important;
        gap: 3px !important;
    }

}

@media (max-width: 768px) {
    .scalable-text .date-text {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {  /* Или подстрой под нужную ширину мобильных, например max-width: 480px */
    span.likes.scalable-text {
        margin-left: 10px;  /* Сдвиг вправо за счёт левого отступа */
        /* Или альтернативы:
         *   padding-left: 10px;
         *   или
         *   transform: translateX(10px);
         *   или
         *   position: relative;
         *   left: 10px;
         */
    }
}

/* --- ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ШИРИНЫ КНОПКИ SEARCH НА МОБИЛЬНЫХ --- */
@media (max-width: 768px) {
    /* Обращаемся через ID формы, чтобы перебить старые стили */
    #search-form .search-btn {
    width: 95% !important;      /* Растягиваем на всю ширину */
    max-width: 95% !important;  /* Убираем ограничение в 430px */
    height: 45px !important;
    box-sizing: border-box !important; /* Учитываем рамки в ширине */

    /* Гарантируем отображение */
    display: flex !important;
    justify-content: space-between !important;
    }
}

/* --- НОВЫЕ СТИЛИ ДЛЯ МОБИЛЬНОГО FOOTER --- */

/* Контейнер футера теперь Flexbox */
.comment-footer {
    display: flex;
    justify-content: space-between; /* Разносит левую и правую части по краям */
    align-items: center;
    width: 100%;
    margin-top: 8px;
    flex-wrap: nowrap;
}

/* Левая часть футера (Кнопки + Source) */
.footer-left-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Отступ между кнопкой и Source */
}

/* Правая часть футера (Дата на мобильных) */
.footer-right-group {
    display: flex;
    align-items: center;
    margin-left: auto; /* Прижимает к правому краю */
}

/* Дата в футере по умолчанию скрыта (для ПК) */
.footer-date {
    display: none;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Стили для иконки внутри кнопки Open Thread */
.btn-icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    fill: currentColor;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* --- МОБИЛЬНЫЕ НАСТРОЙКИ (до 768px) --- */
@media (max-width: 768px) {
    /* Скрываем дату в заголовке на мобильных */
    .comment-header .date-text {
        display: none !important;
    }

    /* Показываем дату в футере на мобильных */
    .footer-date {
        display: block !important;
    }

    /* Уменьшаем отступы для компактности */
    .comment-footer {
        margin-top: 6px;
    }

    /* Корректируем размер шрифта даты внизу */
    .footer-date {
        font-size: 12px;
    }
}

/* В style.css */

/* Класс для скрытия контента при инициализации */
.js-loading .main-content-wrapper,
.js-loading .sidebar,
.js-loading #main-view {
    display: none !important;
}

/* Убедитесь, что лоадер видим, когда этот класс есть */
.js-loading #global-loader {
    display: flex !important; /* Или block, в зависимости от верстки */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    background: var(--background-main); /* Чтобы перекрыть всё остальное */
}

/* 1. Убираем отступ у полей, если они находятся ВНУТРИ строки */
.filter-group-row .filter-group {
    margin-bottom: 0 !important;
}

/* 2. Задаем отступ самой строке, чтобы она отталкивала следующий элемент */
.filter-group-row {
    margin-bottom: 20px !important; /* Такое же значение, как у обычных полей */
}

/* 3. (Опционально) Убираем отступ у самой последней строки, чтобы кнопка Search не улетала слишком далеко */
.filter-container > .filter-group-row:last-of-type {
    margin-bottom: 20px !important; /* Или 0, если хотите ближе к кнопке */
}

/* Мобильный тултип: ссылка "Go to comment →" */
.mobile-tooltip .jump-link {
    font-size: 0.95em;              /* Чуть меньше основного текста */
    font-weight: 600;               /* Полужирный для акцента */
    color: #ffcc4d;                 /* Яркий золотисто-жёлтый, как на твоём скриншоте */
    opacity: 1;
    margin-left: auto;              /* Прижимает к правому краю заголовка */
    margin-right: 12px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;                       /* Красивое расстояние между текстом и стрелкой */
    transition: color 0.2s ease, transform 0.15s ease;
}

/* Эффект при нажатии (лёгкое "вдавливание" и ярче цвет) */
.mobile-tooltip .jump-link:active {
    transform: scale(0.94);
    color: #ffd700;                 /* Ещё ярче при тапе */
}

/* Для светлой темы (если у тебя есть класс .light-theme или body без .dark-theme) */
body:not(.dark-theme) .mobile-tooltip .jump-link,
body.light-theme .mobile-tooltip .jump-link {
    color: #353f72;                 /* Тёмно-жёлтый, чтобы не слепил на светлом фоне */
}

body:not(.dark-theme) .mobile-tooltip .jump-link:active,
body.light-theme .mobile-tooltip .jump-link:active {
    color: #edb942;
}

/* Убираем фоновое изображение и устанавливаем цвет как у формы поиска в мобильной версии */
@media (max-width: 768px) {
    body {
        background-image: none !important;  /* Полностью убираем изображение */
        background-color: var(--background-card) !important;  /* Делаем фон таким же, как у контейнера формы */
    }

    /* Для тёмной темы — убеждаемся, что цвет не переопределяется */
    body.dark-theme {
        background-color: var(--background-card) !important;  /* #0e151c в твоей схеме */
    }
}

/* --- ЗАДАЧА №2: ОБНОВЛЕНИЕ ФОНА СВЕТЛОЙ ТЕМЫ --- */
:root {
    /* Обновляем светлый фон на #F0F4F8 */
    --light-bg-color: #F0F4F8;
    --background-main: #F0F4F8;
    --background-alt: #ffffff; /* Контент на карточках пусть будет белым для контраста */

    /* Остальные переменные (оставляем как есть, если они не конфликтуют) */
    --content-scale-factor: 1.0;
    --body-font: 'JetBrains Mono', monospace;
    --dark-bg-color: #12181f;

    /* Sidebar widths */
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 45px;

    /* Colors... (твои остальные цвета) */
    --primary-blue: #2563eb;
    --primary-red: #dc2626;
    /* ... остальные переменные ... */
    --border-medium: #cbd5e1;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Применяем новый фон к body */
body {
    background-color: var(--background-main);
    /* ...остальные стили body... */
}

/* --- ЗАДАЧА №1: УБИРАЕМ МИГАНИЕ САЙДБАРА --- */
/* По умолчанию сайдбар скрыт через opacity и visibility.
 *  Мы используем visibility, чтобы кнопки не кликались, пока их не видно.
 */
.sidebar {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px); /* Лёгкий сдвиг для анимации выхода */
    transition: opacity 0.4s ease, transform 0.4s ease, width 0.3s ease;
    will-change: opacity, transform;
}

/* Класс, который JS добавит после загрузки */
.sidebar.is-loaded {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* FALLBACK: Если JS отключен, показываем сайдбар сразу,
 *  чтобы не блокировать доступ к навигации.
 */
@media (scripting: none) {
    .sidebar {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}


/* --- ЗАДАЧА №3: СОВРЕМЕННЫЕ КНОПКИ (DESIGN SETTINGS) --- */

/* Базовый стиль для кнопок опций */
.design-option-btn {
    background-color: var(--background-card);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: 12px; /* Современное скругление */
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

    /* Flex для иконок внутри, если есть */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    outline: none;
    position: relative;
    overflow: hidden;
}

/* Hover эффект - легкий подъем и тень */
.design-option-btn:hover:not(:disabled) {
    background-color: #ffffff;
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    color: var(--primary-blue);
}

/* Active / Focus - эффект нажатия */
.design-option-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    background-color: var(--background-alt);
}

/* Состояние Selected / Active (выбранная тема и т.д.) */
.design-option-btn.active,
.design-option-btn.selected {
    background-color: var(--primary-blue);
    color: #ffffff;
    border-color: var(--primary-blue);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.design-option-btn.active:hover,
.design-option-btn.selected:hover {
    background-color: #1d4ed8; /* Чуть темнее синий */
    transform: translateY(-1px);
}

/* Темная тема для кнопок (инверсия) */
body.dark-theme .design-option-btn {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
    box-shadow: none;
}

body.dark-theme .design-option-btn:hover:not(:disabled) {
    background-color: #334155;
    border-color: var(--accent-blue);
    color: #60a5fa;
}

body.dark-theme .design-option-btn.active,
body.dark-theme .design-option-btn.selected {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}