/* Темная тема для DBT Mind 
   Файл содержит стили для темной темы приложения
*/

/* Применение темной темы при наличии класса dark-theme на html или body */
html.dark-theme,
body.dark-theme:not(.page-chat) {
    background-color: rgb(19, 15, 44) !important;
    color: #ffffff !important;
}

/* Исключение для страницы чата - разрешаем фоновые изображения */
html.dark-theme body.page-chat,
body.dark-theme.page-chat,
body.page-chat.dark-theme,
html.dark-theme body.dark-theme.page-chat {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Контейнер должен иметь такой же фон, как и страница */
html.dark-theme .container,
body.dark-theme .container {
    background-color: rgb(19, 15, 44); 
}

/* Карточка должна иметь фиолетовый фон */
html.dark-theme .overlap-group,
body.dark-theme .overlap-group {
    background-color: #9349f8;
}

/* Текстовые элементы должны быть белыми */
html.dark-theme .text-wrapper-2,
html.dark-theme .text-wrapper-4,
html.dark-theme .text-wrapper-5,
html.dark-theme .text-wrapper-13,
html.dark-theme .p,
body.dark-theme .text-wrapper-2,
body.dark-theme .text-wrapper-4,
body.dark-theme .text-wrapper-5,
body.dark-theme .text-wrapper-13,
body.dark-theme .p {
    color: #ffffff;
}

/* Стили для страницы дневника */
html.dark-theme .diary-main-container,
html.dark-theme .diary-custom-container,
html.dark-theme .diary-card-section,
body.dark-theme .diary-main-container,
body.dark-theme .diary-custom-container,
body.dark-theme .diary-card-section {
    background-color: rgb(19, 15, 44);
}

/* Заголовки в дневнике должны иметь светло-фиолетовый текст без изменения фона */
html.dark-theme .diary-card-title,
html.dark-theme .diary-condition-title,
html.dark-theme .diary-desires-title,
html.dark-theme .diary-condition-subtitle,
html.dark-theme .diary-desires-subtitle,
body.dark-theme .diary-card-title,
body.dark-theme .diary-condition-title,
body.dark-theme .diary-desires-title,
body.dark-theme .diary-condition-subtitle,
body.dark-theme .diary-desires-subtitle {
    color: #E6DFFF;
}

body.dark-theme .diary-condition-expression-note {
    color: #E6DFFF;
}

body.dark-theme .diary-skills-subtitle {
    color: #E6DFFF;
}

/* Стили для описаний в дневнике */
html.dark-theme .diary-card-description,
body.dark-theme .diary-card-description {
    color: #E6DFFF;
}

/* Псевдоэлементы с обводкой должны иметь фиолетовый цвет вместо черного */
html.dark-theme .element-2::after,
html.dark-theme .element::after,
html.dark-theme .overlap-group::after,
body.dark-theme .element-2::after,
body.dark-theme .element::after,
body.dark-theme .overlap-group::after {
    border-color: #9349f8;
}

/* Фиолетовые обводки для всех элементов, где используется черная обводка */
html.dark-theme [class*="element"]::after,
html.dark-theme [class*="frame"]::after,
body.dark-theme [class*="element"]::after,
body.dark-theme [class*="frame"]::after {
    border-color: #9349f8 !important;
}

body.dark-theme .element-2::before,
body.dark-theme .element::before,
body.dark-theme .overlap-group::before {
    border-color: #9349f8;
}

body.dark-theme [class*="element"]::before,
body.dark-theme [class*="frame"]::before {
    border-color: #9349f8 !important;
}

/* Стили для дней недели в календаре (кроме сб и вс) */
html.dark-theme .diary-weekday-workday:not(:nth-child(6)):not(:nth-child(7)),
body.dark-theme .diary-weekday-workday:not(:nth-child(6)):not(:nth-child(7)) {
    color: #E6DFFF;
}

/* Стили для чисел в календаре */
html.dark-theme .diary-day:not(.diary-day-inactive),
body.dark-theme .diary-day:not(.diary-day-inactive) {
    color: #E6DFFF;
}

/* Стили для неактивных чисел в календаре */
html.dark-theme .diary-day.diary-day-inactive,
body.dark-theme .diary-day.diary-day-inactive {
    color: rgba(230, 223, 255, 0.4); /* Полупрозрачный от основного цвета */
}

/* Название месяца в календаре */
html.dark-theme .diary-custom-month-text,
body.dark-theme .diary-custom-month-text {
    color: #E6DFFF;
}

/* Дополнительные стили для темной темы, если нужны */ 

html.dark-theme .element-2 .skill-block .text-wrapper-5,
body.dark-theme .element-2 .skill-block .text-wrapper-5 {
    color: #E6DFFF;
}

/* Добавляем стили для явного переключения на светлую тему */
html:not(.dark-theme) .therapy-skills-description,
body:not(.dark-theme) .therapy-skills-description,
html:not(.dark-theme) .therapy-skills-item-text,
body:not(.dark-theme) .therapy-skills-item-text {
    color: rgba(86, 76, 126, 0.92) !important;
}

html:not(.dark-theme) .element-2 .skill-block .text-wrapper-5,
body:not(.dark-theme) .element-2 .skill-block .text-wrapper-5 {
    color: rgba(86, 76, 126, 0.92) !important;
}

/* Стили для модального окна плеера в темной теме */
html.dark-theme #activityModal .modal-content,
body.dark-theme #activityModal .modal-content {
    background-color: #111111;
}

html.dark-theme #activityModal .player-title,
body.dark-theme #activityModal .player-title {
    color: rgba(255, 255, 255, 0.69);
}

html.dark-theme #activityModal .player-text,
body.dark-theme #activityModal .player-text {
    color: #ffffff;
}

html.dark-theme #activityModal .player-time-current,
html.dark-theme #activityModal .player-time-total,
body.dark-theme #activityModal .player-time-current,
body.dark-theme #activityModal .player-time-total {
    color: rgba(255, 255, 255, 0.59);
}

html.dark-theme #activityModal .player-progress-container,
body.dark-theme #activityModal .player-progress-container {
    background-color: #533B7A;
}

html.dark-theme #activityModal .player-progress-bar,
html.dark-theme #activityModal .player-progress-handle,
body.dark-theme #activityModal .player-progress-bar,
body.dark-theme #activityModal .player-progress-handle {
    background-color: #9349f8;
}

html.dark-theme #activityModal .modal-indicator,
body.dark-theme #activityModal .modal-indicator {
    background-color: #9349f8;
}

html.dark-theme #activityModal .player-image,
body.dark-theme #activityModal .player-image {
    opacity: 0.9;
    mix-blend-mode: lighten;
}

html.dark-theme #activityModal .modal,
body.dark-theme #activityModal .modal {
    background-color: rgba(77, 32, 143, 0); /* Начальный цвет для темной темы */
}

html.dark-theme #activityModal .modal.visible,
body.dark-theme #activityModal .modal.visible {
    background-color: rgba(77, 32, 143, 0.76); /* Видимый цвет фона для темной темы */
}

html.dark-theme #activityModal .close-modal,
body.dark-theme #activityModal .close-modal {
    color: #ffffff;
}

/* Стили для кнопки воспроизведения в темной теме */
html.dark-theme .therapy-skills-play-button img,
body.dark-theme .therapy-skills-play-button img {
    filter: invert(1); /* Инвертируем цвета иконки, чтобы тёмная иконка стала светлой */
    opacity: 0.9; /* Небольшая прозрачность для лучшего вида */
}

html.dark-theme #activityModal .modal,
body.dark-theme #activityModal .modal {
    background-color: rgba(77, 32, 143, 0); /* Начальный цвет для темной темы */
}

/* Стили для блока действий */
html.dark-theme .diary-actions-title,
body.dark-theme .diary-actions-title,
html.dark-theme .diary-actions-item,
body.dark-theme .diary-actions-item {
    color: #E6DFFF;
}

html.dark-theme .diary-action-checkbox,
body.dark-theme .diary-action-checkbox {
    box-shadow: 0px 0px 0px 2px #9349f8;
}

html.dark-theme .diary-action-checkbox div,
body.dark-theme .diary-action-checkbox div {
    background-color: #9349f8;
}

/* Стили для тултипа блока действий в темной теме */
html.dark-theme .diary-actions-tooltip,
body.dark-theme .diary-actions-tooltip {
    background-color: rgb(36, 27, 67) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme .diary-actions-tooltip-text,
body.dark-theme .diary-actions-tooltip-text {
    color: #E6DFFF !important;
}

html.dark-theme .diary-actions-tooltip-close:before,
html.dark-theme .diary-actions-tooltip-close:after,
body.dark-theme .diary-actions-tooltip-close:before,
body.dark-theme .diary-actions-tooltip-close:after {
    background-color: #CCCCCC !important;
}

html.dark-theme .diary-actions-help-icon,
body.dark-theme .diary-actions-help-icon {
    background-color: #9349f8;
}

/* Стили для анимаций тултипа в темной теме */
html.dark-theme .tooltip-animated-in,
body.dark-theme .tooltip-animated-in {
    animation: tooltipFadeIn 0.3s ease forwards !important;
}

html.dark-theme .tooltip-animated-out,
body.dark-theme .tooltip-animated-out {
    animation: tooltipFadeOut 0.3s ease forwards !important;
}

html.dark-theme .diary-desires-help-icon,
body.dark-theme .diary-desires-help-icon {
    background-color: #9349f8;
}

/* Стили для иконки "Поделиться" в темной теме */
body.dark-theme .diarydbt-share-icon .icon-light {
    display: none !important;
}
body.dark-theme .diarydbt-share-icon .icon-dark {
    display: inline-block !important;
}

/* ===== Profile Page Styles (dark-theme.css) ===== */

/* Applied to body when profile page is active and dark theme is on */
body.dark-theme:has(.profile-container) {
    background-color: rgb(19, 15, 44); /* Dark Purple page background */
    color: #E0E0E0; /* Default light text for the page */
}

/* General text colors for cards in profile */
body.dark-theme .profile-container .card h3 {
    color: rgb(230, 223, 255) !important; /* White for titles in cards */
}
body.dark-theme .profile-container .card p {
    color: rgb(230, 223, 255) !important; /* Lighter gray for paragraphs in cards */
}
body.dark-theme .profile-container .card a.edit-reminder-link { /* Specific for edit-reminder-link if it's an anchor */
    color: #BEA0F5 !important; 
}

/* General background and shadow for ALL cards in profile on dark theme */
body.dark-theme .profile-container .card {
    background-image: linear-gradient(to bottom, rgb(55 36 105 / 0%), rgb(52 37 94)) !important; /* Убираем градиент от светлой темы */
}

/* Отдельный селектор именно для плашки напоминания в темной теме - можно переопределить для кастомизации */
body.dark-theme .profile-container .card.reminder-section {
    background-image: linear-gradient(to bottom, rgb(55 36 105 / 0%), rgb(76 62 114 / 84%)) !important; /* Убираем градиент от светлой темы */
}

/* Greeting Section */
body.dark-theme .profile-container .greeting-section .main-greeting {
    color: rgb(230, 223, 255);
}

/* Goal Section Card */
body.dark-theme .profile-container .goal-section.card {
    background-color: rgb(36, 27, 67); /* Lighter Purple */
    background-image: none; /* Убираем градиент от светлой темы */
}
body.dark-theme .profile-container .goal-section p {
    color: #E0E0E0;
}
body.dark-theme .profile-container .goal-section .edit-button {
    background-color: rgb(57, 44, 99); /* New color for 'Изменить' button */
    color: #BEA0F5; /* Light purple text, should still work */
}
body.dark-theme .profile-container .goal-section .edit-button:hover {
    background-color: rgba(57, 44, 99, 0.8); /* Slightly lighter on hover */
}

/* Skills Progress Section Card */
body.dark-theme .profile-container .skills-progress-section.card {
    background-color: rgb(36, 27, 67); /* Lighter Purple */
    background-image: none; /* Убираем градиент от светлой темы */
}
body.dark-theme .profile-container .skills-progress-section h3 {
    color: #FFFFFF;
}
/* Progress Circles */
/* The track color in conic-gradient (#e9e9e9) is set by JS and cannot be changed via CSS here. */
body.dark-theme .profile-container .skills-progress-section .progress-circle {
     background-color: #4a3b5b; /* Fallback, likely overridden by JS's full conic-gradient */
}
body.dark-theme .profile-container .skills-progress-section .progress-circle::before { /* Inner circle */
    background: rgb(36, 27, 67); /* Изменено с rgb(19, 15, 44) на цвет фона карточки */
}
body.dark-theme .profile-container .skills-progress-section .progress-circle span { /* Text inside circle */
    color: rgb(230, 223, 255);
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}
body.dark-theme .profile-container .skills-progress-section .skill-item p { /* Skill name text */
    color: rgb(230, 223, 255);
}

/* Clean Days Section Card */
body.dark-theme .profile-container .clean-days-section.card {
    background-color: rgb(36, 27, 67); /* Lighter Purple */
    background-image: none; /* Убираем градиент от светлой темы */
}
body.dark-theme .profile-container .clean-days-section p {
    color: #FFFFFF;
}

/* Reminder Section Card */
body.dark-theme .profile-container .reminder-section.card {
    background-color: rgb(36, 27, 67); /* Lighter Purple */
    background-image: none; /* Убираем градиент от светлой темы */
}
body.dark-theme .profile-container .reminder-section .reminder-text {
    color: rgb(230, 223, 255);
}
body.dark-theme .profile-container .reminder-section .reminder-arrow {
    color: #BEA0F5; /* Lighter purple for accent */
}
body.dark-theme .profile-container .reminder-section .edit-reminder-link {
    color: #BEA0F5; /* Lighter purple for accent */
}
body.dark-theme .profile-container .reminder-section .edit-reminder-link:hover {
    color: #D0B0FF;
}

/* Profile Settings Section */
body.dark-theme .profile-container .profile-settings-section .main-action-button {
    background-image: linear-gradient(to bottom, rgb(77, 63, 115), rgb(57, 43, 95)) !important; /* Убираем градиент от светлой темы */
    background-color: transparent !important; /* Убираем background-color */
    color: rgb(230, 223, 255) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
body.dark-theme .profile-container .profile-settings-section .main-action-button:hover {
    background-image: linear-gradient(to bottom, rgb(81, 63, 132), rgb(57, 43, 95)) !important; /* Убираем градиент от светлой темы */
    background-color: transparent !important; /* Убираем background-color */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
body.dark-theme .profile-container .profile-settings-section .main-action-button:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
body.dark-theme .profile-container .profile-settings-section .main-action-button:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* TODO List Link Section - добавляем стили для темной темы */
body.dark-theme .profile-container .todo-list-section .main-action-button {
    background-image: linear-gradient(to bottom, rgb(77, 63, 115), rgb(57, 43, 95)) !important; /* Вертикальный градиент от светлого к темному */
    color: rgb(230, 223, 255) !important;
}
body.dark-theme .profile-container .todo-list-section .main-action-button:hover {
    background-image: linear-gradient(to bottom, rgba(77, 63, 115, 0.9), rgba(57, 43, 95, 0.9)) !important; /* Немного прозрачнее при наведении */
}
body.dark-theme .profile-container .todo-list-section .main-action-button .highlight-word-oval {
    color: rgb(230, 223, 255) !important; /* Светло-фиолетовый для выделенного слова */
    border-color: rgb(196, 181, 251) !important; /* Белая обводка в темной теме */
}
body.dark-theme .profile-container .todo-list-section .values-custom-button {
    background-image: linear-gradient(to bottom, rgb(77, 63, 115), rgb(57, 43, 95)) !important;
    color: rgb(230, 223, 255) !important;
}
body.dark-theme .profile-container .todo-list-section .values-custom-button:hover {
    background-image: linear-gradient(to bottom, rgba(77, 63, 115, 0.9), rgba(57, 43, 95, 0.9)) !important;
}


/* ===== End Profile Page Styles ===== */

/* ===== Home Page Styles (dark-theme.css) ===== */

/* Обновление темной темы для главной страницы в соответствии со стилем профиля */
html.dark-theme,
body.dark-theme {
    background-color: rgb(19, 15, 44); /* Тёмно-фиолетовый фон как на странице профиля */
    min-height: 100vh; /* Минимальная высота для всего документа */
}

/* Контейнер главной страницы */
html.dark-theme .home-container,
body.dark-theme .home-container {
    background-color: rgb(19, 15, 44); /* Тёмно-фиолетовый фон как на странице профиля */
    background: rgb(19, 15, 44); /* Явно устанавливаем фон для всего контейнера */
}

/* Заголовок с аффирмацией */
html.dark-theme .header-content,
body.dark-theme .header-content {
    background-color: rgb(36, 27, 67); /* Цвет как у карточек в профиле */
    background-image: none; /* Убираем градиент */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .header-text h1,
body.dark-theme .header-text h1 {
    color: #FFFFFF; /* Белый текст для заголовка */
}

html.dark-theme #affirmation-text,
body.dark-theme #affirmation-text {
    color: #E6DFFF; /* Светлый текст для аффирмации */
}

html.dark-theme #affirmation-text .sparkle,
body.dark-theme #affirmation-text .sparkle {
    color: #FFD700; /* Золотой цвет для звездочки */
}

/* ДБТ карточка */
html.dark-theme .dbt-card-status,
body.dark-theme .dbt-card-status {
    background-color: rgb(36, 27, 67); /* Цвет как у карточек в профиле */
    background-image: none; /* Убираем градиент */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark-theme .checkmark-circle,
body.dark-theme .checkmark-circle {
    background-color: rgb(44, 31, 74); /* Тёмный фон кружка */
    border-color: rgb(90, 74, 125);
}

html.dark-theme .checkmark-icon,
body.dark-theme .checkmark-icon {
    color: #D9CFFF; /* Светлый цвет для галочки */
}

html.dark-theme .dbt-card-title-text,
body.dark-theme .dbt-card-title-text {
    color: #FFFFFF; /* Белый текст для заголовка карточки */
}

html.dark-theme .dbt-card-info,
body.dark-theme .dbt-card-info {
    color: #BEA0F5; /* Светло-фиолетовый для информации */
}

/* Раздел навыков */
html.dark-theme .skills-section h2,
body.dark-theme .skills-section h2 {
    color: #E6DFFF; /* Белый текст для заголовка навыков */
}

html.dark-theme .skill-card,
body.dark-theme .skill-card {
    background-color: rgb(36, 27, 67) !important; /* Цвет как у карточек в профиле, добавлен !important */
    background-image: none !important; /* Убираем градиент по умолчанию, добавлен !important */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-theme .skill-card span,
body.dark-theme .skill-card span,
html.dark-theme .observation-title,
body.dark-theme .observation-title {
    color: #E6DFFF; /* Светлый текст для названий навыков и заголовка наблюдения */
}

html.dark-theme .start-button,
body.dark-theme .start-button {
    background-color: rgb(58, 46, 92); /* Темно-фиолетовый фон кнопки */
    color: #FFFFFF; /* Белый текст для кнопки */
    border-color: rgb(90, 74, 125); /* Темно-фиолетовая граница */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html.dark-theme .start-button:hover,
body.dark-theme .start-button:hover {
    background-color: rgb(74, 62, 108); /* Немного светлее при наведении */
}

/* Разные варианты карточек навыков - теперь они должны наследовать основной стиль .skill-card */
/* Убираем или комментируем специфичные фоны для них, если они должны быть одинаковыми */
html.dark-theme .skill-card.mindfulness,
body.dark-theme .skill-card.mindfulness {
    /* background-image: linear-gradient(to bottom right, rgb(64, 51, 97), rgb(58, 46, 92)); */ /* Старый стиль */
}

html.dark-theme .skill-card.emotion-regulation,
body.dark-theme .skill-card.emotion-regulation {
    /* background-image: linear-gradient(to bottom right, rgb(80, 51, 97), rgb(74, 46, 92)); */ /* Старый стиль */
}

html.dark-theme .skill-card.interpersonal-effectiveness,
body.dark-theme .skill-card.interpersonal-effectiveness {
    /* background-image: linear-gradient(to bottom right, rgb(51, 64, 97), rgb(46, 58, 92)); */ /* Старый стиль */
}

html.dark-theme .skill-card.observation.full-width-skill,
body.dark-theme .skill-card.observation.full-width-skill {
    /* background-image: linear-gradient(to bottom right, rgb(51, 45, 82), rgb(43, 37, 68)); */ /* Старый стиль */
}

/* Исправление для медиа-запросов */
@media (max-width: 480px) {
    html.dark-theme, body.dark-theme {
        background-color: rgb(19, 15, 44);
    }
    
    html.dark-theme .home-container,
    body.dark-theme .home-container {
        background-color: rgb(19, 15, 44);
        background: rgb(19, 15, 44);
    }
}

/* ===== End Home Page Styles ===== */

/* ===== Therapy Skills Page Dark Theme ===== */
/* Применяем основной фон страницы из профиля/главной */
html.dark-theme .therapy-skills-main-container,
body.dark-theme .therapy-skills-main-container,
html.dark-theme .therapy-skills-custom-container,
body.dark-theme .therapy-skills-custom-container {
    background-color: rgb(19, 15, 44) !important; /* Фон как на главной и в профиле */
}

/* Стили для плашек избранного в темной теме */
html.dark-theme .favorite-item,
body.dark-theme .favorite-item {
    background-color: rgb(36, 27, 67) !important; /* Такой же цвет как у карточек навыков */
    background-image: none !important; /* Убираем градиент */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-theme .favorite-item-title,
body.dark-theme .favorite-item-title {
    color: #E6DFFF; /* Светлый текст, как у карточек навыков */
}

/* ===== Therapy Skills Page Dark Theme ===== */
/* Заголовок DBT Mind на странице - УДАЛЕНО 
html.dark-theme .dbt-mind-page-header,
body.dark-theme .dbt-mind-page-header {
    color: #FFFFFF;
}*/

html.dark-theme .image-background-shape,  /* Изменен селектор */
body.dark-theme .image-background-shape {   /* Изменен селектор */
    background-color: rgb(36, 27, 75); /* Новый цвет фона для скругленного квадрата в темной теме */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-theme .therapy-skills-title,
body.dark-theme .therapy-skills-title {
    color: rgb(230, 223, 255); /* Светлый текст для заголовка - ИЗМЕНЕН */
    text-align: left; /* Выравнивание по левому краю */
}

html.dark-theme .therapy-skills-description,
body.dark-theme .therapy-skills-description {
    color: rgb(230, 223, 255); /* Белый цвет для темной темы */
    text-align: left; /* Выравнивание по левому краю */
}

html.dark-theme .therapy-skills-item,
body.dark-theme .therapy-skills-item {
    background-color: #3A2E5C; /* Фон кнопок в темной теме - можно взять тот же, что и для круга #2C204D или чуть светлее */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    justify-content: flex-start; /* Выравнивание текста по левому краю */
}

html.dark-theme .therapy-skills-item-text,
body.dark-theme .therapy-skills-item-text {
    color: #E0D9F8; /* Текст на кнопках в темной теме, достаточно светлый для фона #3A2E5C */
}
/* ===== End Therapy Skills Page Dark Theme ===== */

html.dark-theme .therapy-skills-tooltip-title,
body.dark-theme .therapy-skills-tooltip-title,
html.dark-theme .therapy-skills-tooltip-text,
body.dark-theme .therapy-skills-tooltip-text {
    color: rgb(230, 223, 255); /* Цвет текста как в светлой теме ИСПРАВЛЕНО НА БЕЛЫЙ */
}

html.dark-theme .therapy-skills-tooltip-close:before,
html.dark-theme .therapy-skills-tooltip-close:after,
body.dark-theme .therapy-skills-tooltip-close:before,
body.dark-theme .therapy-skills-tooltip-close:after {
    background-color: rgb(46, 40, 95); /* Цвет как в светлой теме */
}

/* Контейнер для круглого фона изображения навыка */
.image-background-circle {
    width: 269px; 
    height: 269px; 
    background-color: rgb(243, 234, 253); /* Новый цвет фона круга */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto; 
    padding: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: visible; /* Позволяем изображению выходить за пределы */
}

/* Контейнер для скругленного фона изображения навыка */
.image-background-shape {
    width: 230px; /* Размер фона */
    background-color: rgb(243, 234, 253); /* Цвет фона из вашего предыдущего запроса */
    border-radius: 300px; /* Значение для скругленного квадрата/прямоугольника - УВЕЛИЧЕНО */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: visible; /* Позволяем изображению выходить за пределы */
    position: relative; /* Для корректного отображения выступающего изображения */
} 

/* ===== Favorites Page Styles (dark-theme.css) ===== */

body.dark-theme .favorites-container,
html.dark-theme body .favorites-container {
    background-color: rgb(19, 15, 44); /* Темно-фиолетовый фон как на profile/home dark */
}

body.dark-theme .favorites-header h1,
html.dark-theme body .favorites-header h1 {
    color: rgb(230, 223, 255); /* Белый текст для заголовка */
}

body.dark-theme .favorite-item,
html.dark-theme body .favorite-item {
    background-color: rgb(36, 27, 67); /* Цвет как у карточек в профиле */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Тень для темной темы */
}

body.dark-theme .favorite-item-image-wrapper,
html.dark-theme body .favorite-item-image-wrapper {
    background-color: rgb(44, 31, 74); /* Более темный фон для плейсхолдера изображения */
}

body.dark-theme .favorite-item-title,
html.dark-theme body .favorite-item-title {
    color: rgb(230, 223, 255); /* Светлый текст для названий, как в профиле */
}

body.dark-theme .favorites-empty-message,
html.dark-theme body .favorites-empty-message {
    background-color: rgba(36, 27, 67, 0.5); /* Полупрозрачный темный фон */
}

body.dark-theme .favorites-empty-message p,
html.dark-theme body .favorites-empty-message p {
    color: #E0E0E0; /* Светлый текст для заголовка */
}

body.dark-theme .favorites-empty-message span,
html.dark-theme body .favorites-empty-message span {
    color: #B8B8C0; /* Светло-серый для подтекста */
}

/* ===== End Favorites Page Styles ===== */

/* ===== Player Page Dark Theme ===== */
body.dark-theme,
html.dark-theme body {
    --player-page-bg: rgb(19, 15, 44); /* Фон всей страницы плеера - как .home-container в темной теме */
    --player-container-bg: rgb(19, 15, 44); /* Фон самого блока плеера - ТАКОЙ ЖЕ КАК У СТРАНИЦЫ */
    --player-text-color: rgb(230, 223, 255); 
    --player-secondary-text-color: rgb(230, 223, 255); 
    --player-time-text-color: rgb(230, 223, 255); 
    --player-progress-bg: rgb(57, 44, 99);    
    --player-progress-fill: #BEA0F5;  
    --player-icon-color: rgb(230, 223, 255); 
    --player-favorite-active-color: rgb(237, 181, 221); 
    
    --player-image-placeholder-bg: rgb(36, 27, 67); /* Плейсхолдер обложки - как фон карточек в профиле */ 
    
    --player-skill-link-bg: rgb(36, 27, 67); /* Ссылка на навык - как фон карточек в профиле */ 
    --player-skill-link-text-color: rgb(230, 223, 255); 
    --player-skill-link-arrow-color: #BEA0F5;
}

/* Убираем фильтр для PNG иконок кнопок управления плеером, чтобы они не меняли цвет */
body.dark-theme #playerControlButton img, 
body.dark-theme .player-control-left img, 
body.dark-theme .player-control-right img,
html.dark-theme body #playerControlButton img, 
html.dark-theme body .player-control-left img, 
html.dark-theme body .player-control-right img {
    filter: none; 
}

/* Удалена анимация волн, поэтому стили для body.dark-theme .player-images-container .player-image больше не нужны */

/* ===== End Player Page Dark Theme ===== */

/* ===== Achievements Page Styles (dark-theme.css) ===== */
body.dark-theme .achievements-container,
html.dark-theme body .achievements-container {
    background-color: rgb(19, 15, 44); /* Темно-фиолетовый фон, как на profile/home dark */
}

body.dark-theme .achievements-header h1,
html.dark-theme body .achievements-header h1 {
    color: rgb(230, 223, 255); /* Белый текст для заголовка */
}

/* Стили для неактивных достижений в темной теме */
body.dark-theme .achievement-item.locked .achievement-badge,
html.dark-theme body .achievement-item.locked .achievement-badge {
    background-color: rgba(141, 79, 255, 0.15);
    border-color: rgba(141, 79, 255, 0.2);
}

body.dark-theme .achievement-item.locked .achievement-badge img,
html.dark-theme body .achievement-item.locked .achievement-badge img {
    filter: grayscale(90%);
    opacity: 0.5;
}

/* Стили для активных (заработанных) достижений в темной теме */
body.dark-theme .achievement-item.earned .achievement-badge,
html.dark-theme body .achievement-item.earned .achievement-badge {
    background-color: rgba(141, 79, 255, 0.53);
    border-color: #9B6BF5;
}

body.dark-theme .achievement-item.earned .achievement-badge img,
html.dark-theme body .achievement-item.earned .achievement-badge img {
    filter: grayscale(0%);
    opacity: 1;
}

body.dark-theme .achievement-name,
html.dark-theme body .achievement-name {
    color: rgb(230, 223, 255);
}

body.dark-theme .no-achievements,
html.dark-theme body .no-achievements {
    color: rgba(255, 255, 255, 0.6);
}
/* ===== End Achievements Page Styles ===== */

/* Стили для страницы достижений */
html.dark-theme body:not(.page-chat),
body.dark-theme:not(.page-chat) {
    background-color: rgb(19, 15, 44) !important;
    color: #ffffff !important;
}

html.dark-theme body .achievements-container,
html.dark-theme .achievements-container,
body.dark-theme .achievements-container {
    background-color: rgb(19, 15, 44) !important;
}

/* Fallback: invert share icon in dark theme */
html.dark-theme .diarydbt-share-icon img,
body.dark-theme .diarydbt-share-icon img {
    filter: invert(1) brightness(2) !important;
}

body.dark-theme .values-page-container {
    background-color: rgb(19, 15, 44) !important;
}
body.dark-theme .values-header h1 {
    color: rgb(230, 223, 255) !important;
}
body.dark-theme .values-list {
    background-color: rgb(36, 27, 67) !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
body.dark-theme .values-item {
    border-bottom: 1px dashed rgba(230, 223, 255, 0.4) !important;
}
body.dark-theme .auth-required-container {
    background-color: rgb(36, 27, 67) !important;
}
body.dark-theme .auth-required-title {
    color: rgb(230, 223, 255) !important;
}
body.dark-theme .auth-required-text {
    color: rgba(230, 223, 255, 0.6) !important;
}

html.dark-theme .db-item,
body.dark-theme .db-item {
    color: rgb(224, 224, 224) !important;
}

/* Стили для textarea в темной теме */
html.dark-theme .db-textarea,
body.dark-theme .db-textarea {
    color: rgb(230, 223, 255) !important; /* Светлый цвет текста */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(1.5em - 1px),
        rgba(230, 223, 255, 0.25) calc(1.5em - 1px), /* Светлые линии */
        rgba(230, 223, 255, 0.25) 1.5em
    ) !important;
}

/* Dark theme overrides */
html.dark-theme .db-page-title,
body.dark-theme .db-page-title {
    color: rgb(230, 223, 255) !important;
}

/* ===== Todo Lists Page Dark Theme ===== */
body.dark-theme .accordion-item {
    background-image: linear-gradient(to bottom right, rgb(36, 27, 67), rgb(52, 37, 94)) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

body.dark-theme .accordion-header {
    color: rgb(230, 223, 255) !important;
}

body.dark-theme .accordion-list-description {
    color: rgba(230, 223, 255, 0.7) !important;
}

body.dark-theme .todo-item-label {
    color: rgb(230, 223, 255) !important;
}

body.dark-theme .todo-item.completed .todo-item-text {
    color: rgba(230, 223, 255, 0.49) !important;
}

body.dark-theme .custom-checkbox-todo {
    border-color: rgba(230, 223, 255, 0.4) !important;
}

body.dark-theme .empty-list-text {
    color: rgba(230, 223, 255, 0.6) !important;
}
/* ===== End Todo Lists Page Dark Theme ===== */

/* Стили для подложки маскота в профиле в темной теме */
body.dark-theme .profile-container .image-background-shape {
    background-color: rgb(36, 27, 75); /* Новый цвет фона для скругленного квадрата в темной теме */
}

/* КРИТИЧЕСКИ ВАЖНО: перебиваем любые другие background правила для чата */
body.page-chat,
body.dark-theme.page-chat,
html body.page-chat,
html body.dark-theme.page-chat {
    background-color: transparent !important;
}