/* =============================================
   Система тем оформления ApiParus
   Три темы: brand (фирменная), white (светлая), black (тёмная)
   Фирменная тема = дефолтные стили из main.css (без класса)
   Анимации сохраняются для всех тем
   ============================================= */

/* Плавный переход при смене темы */
body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
    transition: background-color 0.5s ease,
                color 0.5s ease,
                border-color 0.5s ease,
                box-shadow 0.4s ease !important;
}

/* Исключаем логотип из анимации — мерцает из-за GPU-композитинга при массовом transition */
body.theme-transition .logo,
body.theme-transition .logo *,
body.theme-transition .logo-text,
body.theme-transition .logo-highlight {
    transition: none !important;
}


/* =============================================================================
   СВЕТЛАЯ ТЕМА (White)
   ============================================================================= */
body.theme-white {
    --dark-bg: #f5f5f7;
    --darker-bg: #eaeaef;
    --card-bg: #ffffff;
    --card-hover: #f0f0f5;
    --text-primary: #1a1a2e;
    --text-secondary: #555570;
    --text-muted: #8888a0;
    --border-color: #d0d0e0;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    scrollbar-color: #c0c0d0 #eaeaef;
}

html:has(body.theme-white) {
    scrollbar-color: #c0c0d0 #eaeaef;
}

html:has(body.theme-white) ::-webkit-scrollbar-track,
body.theme-white ::-webkit-scrollbar-track {
    background: #eaeaef;
}

html:has(body.theme-white) ::-webkit-scrollbar-thumb,
body.theme-white ::-webkit-scrollbar-thumb {
    background: #c0c0d0;
}

html:has(body.theme-white) ::-webkit-scrollbar-thumb:hover,
body.theme-white ::-webkit-scrollbar-thumb:hover {
    background: #6d28d9;
}

/* --- Фон --- */
html:has(body.theme-white) {
    background-color: #ededf0 !important;
}

body.theme-white {
    background: linear-gradient(180deg, #ededf0 0%, #f5f5f7 50%, #ededf0 100%) !important;
}

/* --- Шапка --- */
body.theme-white .header {
    background-color: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(0, 0, 0, 0.04);
}

body.theme-white .header:hover {
    border-color: rgba(109, 40, 217, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(109, 40, 217, 0.08);
}

/* --- Навигация --- */
body.theme-white .nav-link:hover {
    color: var(--text-primary);
    background-color: rgba(109, 40, 217, 0.06);
}

body.theme-white .nav-link.active {
    color: #6d28d9;
    background-color: rgba(109, 40, 217, 0.1);
}

/* --- Мобильное меню --- */
body.theme-white .mobile-menu {
    background-color: #f5f5f7cc;
}

body.theme-white .mobile-nav-link:hover {
    background: rgba(109, 40, 217, 0.06);
}

body.theme-white .mobile-nav-link i {
    color: #888;
}

body.theme-white .mobile-nav-link:hover i {
    color: #6d28d9;
}

body.theme-white .mobile-auth-buttons .btn-outline {
    background: #ffffff;
    border-color: #e0e0e0;
}

body.theme-white .mobile-auth-buttons .btn-outline:hover {
    border-color: #6d28d9;
    background: rgba(109, 40, 217, 0.04);
}

body.theme-white .mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.25);
}

body.theme-white .mobile-menu-btn span {
    background: var(--text-primary);
}

/* --- Кнопки --- */
body.theme-white .btn-outline {
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.theme-white .btn-outline:hover {
    border-color: var(--primary-color);
    background-color: rgba(109, 40, 217, 0.06);
}

/* --- Формы и инпуты --- */
body.theme-white .form-input,
body.theme-white .sidebar-search input,
body.theme-white #model-search {
    background: var(--darker-bg) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.theme-white .form-input:focus,
body.theme-white .sidebar-search input:focus,
body.theme-white #model-search:focus {
    border-color: var(--primary-color);
    background: var(--card-bg) !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1);
}

/* --- Селекты (модели, документация) --- */
body.theme-white .filter-select,
body.theme-white .parameter-select,
body.theme-white .form-select {
    background: var(--darker-bg) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    color: var(--text-primary);
}

body.theme-white .filter-select option,
body.theme-white .parameter-select option,
body.theme-white .form-select option {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* --- Модальные окна --- */
body.theme-white .modal {
    background-color: rgba(0, 0, 0, 0.25);
}

body.theme-white .modal-content {
    background-color: #ffffff94;
    border-color: var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* --- Загрузка --- */
body.theme-white .loading-spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
}

/* --- Таблицы (dashboard) --- */
body.theme-white .data-table tbody tr:hover {
    background-color: rgba(109, 40, 217, 0.04);
}

/* --- Бейджи транзакций и статусов (полупрозрачные фоны — OK на обеих) --- */

/* --- Карточки моделей --- */
body.theme-white .model-item {
    background: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-white .model-item:hover {
    box-shadow: 0 8px 30px rgba(109, 40, 217, 0.12),
                0 0 0 1px var(--primary-color);
}

body.theme-white .model-item-details {
    background: var(--darker-bg);
}

body.theme-white .detail {
    border-bottom-color: var(--border-color);
}

body.theme-white .detail i {
    background: rgba(109, 40, 217, 0.08);
}

/* --- Бейджи моделей --- */
body.theme-white .badge.category {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.06));
    color: var(--text-secondary);
}

/* --- Фильтры и теги (models) --- */
body.theme-white .search-filters {
    background: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-white .filter-tag {
    background: var(--card-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* --- Примеры моделей --- */
body.theme-white .examples-section {
    background: var(--card-bg);
}

body.theme-white .example-input,
body.theme-white .example-output {
    background-color: var(--darker-bg);
}

body.theme-white .example-prompt {
    background-color: rgba(109, 40, 217, 0.06);
}

/* --- Документация --- */
body.theme-white .code-example {
    background-color: #f0f0f5;
}

body.theme-white .code-header {
    background-color: #e4e4ea;
}

body.theme-white .params-table th {
    background-color: rgba(0, 0, 0, 0.04);
}

body.theme-white .info-box {
    background-color: rgba(109, 40, 217, 0.06);
}

body.theme-white .model-tag {
    background-color: rgba(109, 40, 217, 0.1);
}

body.theme-white .nav-links a:hover {
    background-color: rgba(109, 40, 217, 0.06);
}

body.theme-white .params-table code {
    background-color: rgba(109, 40, 217, 0.1);
    color: #6d28d9;
}

body.theme-white .docs-content code:not([class*="language-"]) {
    background-color: rgba(109, 40, 217, 0.1);
    color: #6d28d9;
}

body.theme-white code.meta-value {
    background-color: rgba(109, 40, 217, 0.1);
    color: #6d28d9;
}

/* --- Документация: подсветка кода --- */
body.theme-white .hljs {
    background: transparent;
    color: var(--text-primary);
}

/* --- Скроллбары --- */
body.theme-white ::-webkit-scrollbar-track {
    background: #f0f0f5;
}

body.theme-white ::-webkit-scrollbar-thumb {
    background: #c0c0d0;
}

body.theme-white ::-webkit-scrollbar-thumb:hover {
    background: #a0a0b0;
}

body.theme-white .docs-sidebar::-webkit-scrollbar-track,
body.theme-white .model-details-content::-webkit-scrollbar-track,
body.theme-white .code-lines::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

/* --- Dashboard: метод оплаты active --- */
body.theme-white .method-card.active {
    background-color: rgba(109, 40, 217, 0.06);
}

/* --- Dashboard: переключатель --- */
body.theme-white .toggle-slider {
    background: rgba(0, 0, 0, 0.12);
}

body.theme-white .toggle-slider::before {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* --- Футер --- */
body.theme-white .footer {
    background-color: var(--darker-bg);
}

/* --- Визуальная карточка (landing-style, если есть на авторизованных страницах) --- */
body.theme-white .visual-card {
    background: linear-gradient(135deg, rgba(240, 240, 245, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body.theme-white .visual-card:hover {
    box-shadow: 0 35px 70px rgba(109, 40, 217, 0.15), 0 0 0 1px rgba(109, 40, 217, 0.2);
}

body.theme-white .card-content {
    background: rgba(245, 245, 247, 0.7);
}

body.theme-white .card-header {
    background: rgba(234, 234, 239, 0.9);
}

body.theme-white .code-container {
    background-color: rgba(240, 240, 245, 0.95);
    border-color: var(--border-color);
}

body.theme-white .lang-btn {
    background: rgba(0, 0, 0, 0.04);
}

body.theme-white .lang-btn:hover {
    background: rgba(109, 40, 217, 0.08);
}

/* =============================================================================
   СВЕТЛАЯ ТЕМА: Исправления специфичности
   body.theme-white .X (0,2,1) побеждает .X:hover/.X.active (0,2,0)
   Поэтому нужно явно прописывать hover/active состояния с градиентными фонами
   ============================================================================= */

/* --- Иконки на градиентных фонах всегда белые --- */
body.theme-white .action-icon,
body.theme-white .stat-icon,
body.theme-white .model-icon,
body.theme-white .model-details-icon,
body.theme-white .steps-additional-icon,
body.theme-white .flow-node,
body.theme-white .floating-element {
    color: white;
}

/* --- Фильтр-теги: active с градиентом --- */
body.theme-white .filter-tag.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-color: var(--primary-color);
}

body.theme-white .filter-tag:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 6px 12px rgba(109, 40, 217, 0.12);
}

/* --- Кнопки с градиентом: всегда белый текст --- */
body.theme-white .btn-primary {
    color: white;
}

body.theme-white .lang-btn.active {
    color: white;
}

/* --- Документация: табы active --- */
body.theme-white .examples-section .tab-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-color: var(--primary-color);
}

/* --- Модальная карточка модели: действия --- */
body.theme-white .model-item-actions .btn-outline:hover {
    color: var(--primary-color);
}

/* --- Категория модели --- */
body.theme-white .model-category {
    color: white;
}

/* --- Блок ID модели на странице модели --- */
body.theme-white .model-id-badge {
    background: rgba(109, 40, 217, 0.04);
    border-color: rgba(109, 40, 217, 0.15);
}

body.theme-white .model-id-copy {
    background: rgba(109, 40, 217, 0.06);
}

body.theme-white .model-id-label {
    color: white;
}

/* --- Ссылки в документах (светлая тема) --- */
body.theme-white .document-content a {
    color: #7c3aed;
    border-bottom-color: rgba(124, 58, 237, 0.25);
}

body.theme-white .document-content a:hover {
    color: #6d28d9;
    border-bottom-color: rgba(109, 40, 217, 0.5);
}

body.theme-white .document-content a:active {
    color: #7c3aed;
}

body.theme-white .document-content a *,
body.theme-white .document-content a strong {
    color: inherit !important;
}

@media (max-width: 768px) {
    body.theme-white {
        background: #f5f5f7 !important;
    }
}


/* =============================================================================
   ТЁМНАЯ ТЕМА (Black)
   ============================================================================= */
body.theme-black {
    --dark-bg: #121212;
    --darker-bg: #0a0a0a;
    --card-bg: #1e1e1e;
    --card-hover: #2a2a2a;
    --text-primary: #e0e0e0;
    --text-secondary: #999999;
    --text-muted: #666666;
    --border-color: #333333;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    scrollbar-color: #444444 #0a0a0a;
}

html:has(body.theme-black) {
    scrollbar-color: #444444 #0a0a0a;
}

html:has(body.theme-black) ::-webkit-scrollbar-track,
body.theme-black ::-webkit-scrollbar-track {
    background: #0a0a0a;
}

html:has(body.theme-black) ::-webkit-scrollbar-thumb,
body.theme-black ::-webkit-scrollbar-thumb {
    background: #444444;
}

html:has(body.theme-black) ::-webkit-scrollbar-thumb:hover,
body.theme-black ::-webkit-scrollbar-thumb:hover {
    background: #6d28d9;
}

/* --- Фон --- */
html:has(body.theme-black) {
    background-color: #0e0e0e !important;
}

body.theme-black {
    background: linear-gradient(180deg, #0e0e0e 0%, #121212 50%, #0e0e0e 100%) !important;
}

/* --- Шапка --- */
body.theme-black .header {
    background-color: rgba(30, 30, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.theme-black .header:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --- Мобильное меню --- */
body.theme-black .mobile-menu {
    background-color: #181818d6;
}

body.theme-black .mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.theme-black .mobile-auth-buttons .btn-outline {
    background: #222;
    border-color: #333;
}

body.theme-black .mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

body.theme-black .mobile-menu-btn span {
    background: var(--text-primary);
}

/* --- Формы и инпуты --- */
body.theme-black .form-input,
body.theme-black .sidebar-search input,
body.theme-black #model-search {
    background: var(--darker-bg) !important;
    color: var(--text-primary);
}

body.theme-black .form-input:focus,
body.theme-black .sidebar-search input:focus,
body.theme-black #model-search:focus {
    background: var(--card-bg) !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2);
}

/* --- Селекты --- */
body.theme-black .filter-select,
body.theme-black .parameter-select,
body.theme-black .form-select {
    background: var(--darker-bg) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    color: var(--text-primary);
}

body.theme-black .filter-select option,
body.theme-black .parameter-select option,
body.theme-black .form-select option {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* --- Модальные окна --- */
body.theme-black .modal {
    background-color: rgba(0, 0, 0, 0.85);
}

body.theme-black .modal-content {
    background-color: #1e1e1e94;
    border-color: #333;
}

/* --- Загрузка --- */
body.theme-black .loading-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color);
}

/* --- Карточки моделей --- */
body.theme-black .model-item {
    background: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.theme-black .model-item:hover {
    box-shadow: 0 8px 30px rgba(109, 40, 217, 0.15),
                0 0 0 1px var(--primary-color);
}

body.theme-black .model-item-details {
    background: var(--darker-bg);
}

body.theme-black .detail {
    border-bottom-color: var(--border-color);
}

body.theme-black .detail i {
    background: rgba(109, 40, 217, 0.12);
}

/* --- Бейджи --- */
body.theme-black .badge.category {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.06));
    color: var(--text-secondary);
}

/* --- Фильтры (models) --- */
body.theme-black .search-filters {
    background: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.theme-black .filter-tag {
    background: var(--card-bg);
}

/* --- Примеры моделей --- */
body.theme-black .examples-section {
    background: var(--card-bg);
}

body.theme-black .example-input,
body.theme-black .example-output {
    background-color: var(--darker-bg);
}

body.theme-black .example-prompt {
    background-color: rgba(109, 40, 217, 0.08);
}

/* --- Документация --- */
body.theme-black .code-example {
    background-color: #0e0e0e;
}

body.theme-black .code-header {
    background-color: #181818;
}

body.theme-black .params-table th {
    background-color: rgba(255, 255, 255, 0.04);
}

body.theme-black .info-box {
    background-color: rgba(109, 40, 217, 0.08);
}

body.theme-black .model-tag {
    background-color: rgba(109, 40, 217, 0.15);
}

body.theme-black .params-table code {
    background-color: rgba(109, 40, 217, 0.15);
}

/* --- Скроллбары --- */
body.theme-black ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.theme-black ::-webkit-scrollbar-thumb {
    background: #444;
}

body.theme-black ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body.theme-black .docs-sidebar::-webkit-scrollbar-track,
body.theme-black .model-details-content::-webkit-scrollbar-track,
body.theme-black .code-lines::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

/* --- Dashboard: метод оплаты --- */
body.theme-black .method-card.active {
    background-color: rgba(109, 40, 217, 0.1);
}

/* --- Dashboard: переключатель --- */
body.theme-black .toggle-slider {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Визуальная карточка --- */
body.theme-black .visual-card {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98), rgba(42, 42, 42, 0.98));
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.theme-black .visual-card:hover {
    box-shadow: 0 35px 70px rgba(109, 40, 217, 0.2), 0 0 0 1px rgba(109, 40, 217, 0.3);
}

body.theme-black .card-content {
    background: rgba(10, 10, 10, 0.7);
}

body.theme-black .card-header {
    background: rgba(10, 10, 10, 0.9);
}

body.theme-black .code-container {
    background-color: rgba(10, 10, 10, 0.95);
    border-color: var(--border-color);
}

body.theme-black .lang-btn {
    background: rgba(255, 255, 255, 0.05);
}

body.theme-black .lang-btn:hover {
    background: rgba(109, 40, 217, 0.15);
}

/* --- Блок ID модели на странице модели --- */
body.theme-black .model-id-badge {
    background: rgba(109, 40, 217, 0.08);
    border-color: rgba(109, 40, 217, 0.25);
}

body.theme-black .model-id-copy {
    background: rgba(109, 40, 217, 0.15);
}

body.theme-black .model-id-label {
    color: white;
}

/* --- Ссылки в документах (темная тема) --- */
body.theme-black .document-content a {
    color: #c4b5fd;
    border-bottom-color: rgba(196, 181, 253, 0.3);
}

body.theme-black .document-content a:hover {
    color: #ddd6fe;
    border-bottom-color: rgba(221, 214, 254, 0.5);
}

body.theme-black .document-content a:active {
    color: #c4b5fd;
}

body.theme-black .document-content a *,
body.theme-black .document-content a strong {
    color: inherit !important;
}

/* =============================================================================
   ТЁМНАЯ ТЕМА: Исправления специфичности (аналогично белой)
   ============================================================================= */

/* --- Иконки на градиентных фонах --- */
body.theme-black .action-icon,
body.theme-black .stat-icon,
body.theme-black .model-icon,
body.theme-black .model-details-icon,
body.theme-black .steps-additional-icon,
body.theme-black .flow-node,
body.theme-black .floating-element {
    color: white;
}

/* --- Фильтр-теги: active с градиентом --- */
body.theme-black .filter-tag.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-color: var(--primary-color);
}

body.theme-black .filter-tag:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* --- Кнопки с градиентом --- */
body.theme-black .btn-primary {
    color: white;
}

body.theme-black .lang-btn.active {
    color: white;
}

/* --- Документация: табы active --- */
body.theme-black .examples-section .tab-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-color: var(--primary-color);
}

/* --- Категория модели --- */
body.theme-black .model-category {
    color: white;
}

@media (max-width: 768px) {
    body.theme-black {
        background: #121212 !important;
    }
}