/* =========================================
   1. СВЕТЛАЯ ТЕМА (По умолчанию)
========================================= */
:root, [data-theme="light"] {
    --bg-body: #f1f5f9;       
    --card-bg: #ffffff;       
    --card-border: #e2e8f0;   
    --text-main: #1e293b;     
    --text-muted: #64748b;    
    --primary: #0f172a;       
    --primary-hover: #1e293b;
    --input-bg: #f8fafc;

    --accent-blue-text: #2563eb;
    --accent-blue-bg: #eff6ff;
    --accent-blue-border: #bfdbfe;
    
    --accent-amber-text: #d97706;
    --accent-amber-bg: #fffbeb;
    --accent-amber-border: #fde68a;

    --accent-green-text: #16a34a;
    --accent-green-bg: #f0fdf4;
    --accent-green-border: #bbf7d0;

    --accent-red-text: #dc2626;
    --accent-red-bg: #fef2f2;
    --accent-red-border: #fecaca;
}

/* =========================================
   2. ТЕМНАЯ ТЕМА
========================================= */
[data-theme="dark"] {
    --bg-body: #0f172a;       
    --card-bg: #1e293b;       
    --card-border: #334155;   
    --text-main: #f8fafc;     
    --text-muted: #94a3b8;    
    --primary: #3b82f6;       
    --primary-hover: #2563eb;
    --input-bg: #0f172a;

    --accent-blue-text: #60a5fa;
    --accent-blue-bg: rgba(59, 130, 246, 0.15);
    --accent-blue-border: rgba(59, 130, 246, 0.3);

    --accent-amber-text: #fbbf24;
    --accent-amber-bg: rgba(245, 158, 11, 0.15);
    --accent-amber-border: rgba(245, 158, 11, 0.3);

    --accent-green-text: #4ade80;
    --accent-green-bg: rgba(34, 197, 94, 0.15);
    --accent-green-border: rgba(34, 197, 94, 0.3);

    --accent-red-text: #f87171;
    --accent-red-bg: rgba(239, 68, 68, 0.15);
    --accent-red-border: rgba(239, 68, 68, 0.3);
}

/* =========================================
   3. ТЕМА "ОКЕАН" (Исправленная)
========================================= */
[data-theme="ocean"] {
    --bg-body: #082f49; /* sky-900 */      
    --card-bg: #0c4a6e; /* sky-800 */       
    --card-border: #0369a1;   
    --text-main: #f0f9ff;     
    --text-muted: #bae6fd;    
    --primary: #0284c7;       
    --primary-hover: #0369a1;
    --input-bg: #082f49;

    /* Яркий циан вместо синего для контраста */
    --accent-blue-text: #67e8f9; 
    --accent-blue-bg: rgba(103, 232, 249, 0.15);
    --accent-blue-border: rgba(103, 232, 249, 0.3);

    --accent-amber-text: #fcd34d;
    --accent-amber-bg: rgba(252, 211, 77, 0.15);
    --accent-amber-border: rgba(252, 211, 77, 0.3);

    --accent-green-text: #6ee7b7;
    --accent-green-bg: rgba(110, 231, 183, 0.15);
    --accent-green-border: rgba(110, 231, 183, 0.3);

    --accent-red-text: #fda4af;
    --accent-red-bg: rgba(253, 164, 175, 0.15);
    --accent-red-border: rgba(253, 164, 175, 0.3);
}

/* =========================================
   4. ТЕМА "ЛЕС"
========================================= */
[data-theme="forest"] {
    --bg-body: #064e3b; /* emerald-900 */      
    --card-bg: #065f46; /* emerald-800 */       
    --card-border: #047857;   
    --text-main: #ecfdf5;     
    --text-muted: #a7f3d0;    
    --primary: #10b981;       
    --primary-hover: #059669;
    --input-bg: #064e3b;

    --accent-blue-text: #fef08a; /* Желтый акцент вместо синего */
    --accent-blue-bg: rgba(254, 240, 138, 0.15);
    --accent-blue-border: rgba(254, 240, 138, 0.3);

    --accent-amber-text: #fdba74;
    --accent-amber-bg: rgba(253, 186, 116, 0.15);
    --accent-amber-border: rgba(253, 186, 116, 0.3);

    --accent-green-text: #86efac;
    --accent-green-bg: rgba(134, 239, 172, 0.15);
    --accent-green-border: rgba(134, 239, 172, 0.3);

    --accent-red-text: #fca5a5;
    --accent-red-bg: rgba(252, 165, 165, 0.15);
    --accent-red-border: rgba(252, 165, 165, 0.3);
}

/* =========================================
   5. ТЕМА "ЗАКАТ"
========================================= */
[data-theme="sunset"] {
    --bg-body: #4c0519; /* rose-950 */      
    --card-bg: #881337; /* rose-900 */       
    --card-border: #be123c;   
    --text-main: #fff1f2;     
    --text-muted: #fecdd3;    
    --primary: #f43f5e;       
    --primary-hover: #e11d48;
    --input-bg: #4c0519;

    --accent-blue-text: #fde047; /* Золотой акцент */
    --accent-blue-bg: rgba(253, 224, 71, 0.15);
    --accent-blue-border: rgba(253, 224, 71, 0.3);

    --accent-amber-text: #f9a8d4;
    --accent-amber-bg: rgba(249, 168, 212, 0.15);
    --accent-amber-border: rgba(249, 168, 212, 0.3);

    --accent-green-text: #6ee7b7;
    --accent-green-bg: rgba(110, 231, 183, 0.15);
    --accent-green-border: rgba(110, 231, 183, 0.3);

    --accent-red-text: #ffffff; /* Белый для ошибок на красном фоне */
    --accent-red-bg: rgba(255, 255, 255, 0.15);
    --accent-red-border: rgba(255, 255, 255, 0.3);
}

/* =========================================
   6. ТЕМА "КИБЕРПАНК"
========================================= */
[data-theme="cyberpunk"] {
    --bg-body: #2e1065; /* violet-900 */      
    --card-bg: #4c1d95; /* violet-800 */       
    --card-border: #7c3aed;   
    --text-main: #fdf4ff;     
    --text-muted: #e9d5ff;    
    --primary: #d946ef; /* fuchsia-500 */      
    --primary-hover: #c026d3;
    --input-bg: #2e1065;

    --accent-blue-text: #22d3ee; /* Неоновый циан */
    --accent-blue-bg: rgba(34, 211, 238, 0.15);
    --accent-blue-border: rgba(34, 211, 238, 0.4);

    --accent-amber-text: #fef08a; /* Неоновый желтый */
    --accent-amber-bg: rgba(254, 240, 138, 0.15);
    --accent-amber-border: rgba(254, 240, 138, 0.4);

    --accent-green-text: #4ade80; /* Неоновый зеленый */
    --accent-green-bg: rgba(74, 222, 128, 0.15);
    --accent-green-border: rgba(74, 222, 128, 0.4);

    --accent-red-text: #f472b6; /* Неоновый розовый */
    --accent-red-bg: rgba(244, 114, 182, 0.15);
    --accent-red-border: rgba(244, 114, 182, 0.4);
}

/* =========================================
   7. ТЕМА "КОФЕЙНАЯ" (Светлая/Теплая)
========================================= */
[data-theme="coffee"] {
    --bg-body: #fef3c7; /* amber-50 */      
    --card-bg: #fffbeb; /* amber-10 */       
    --card-border: #fcd34d;   
    --text-main: #78350f; /* amber-900 */     
    --text-muted: #b45309;    
    --primary: #92400e;       
    --primary-hover: #78350f;
    --input-bg: #fef3c7;

    --accent-blue-text: #0f766e; /* Бирюзовый */
    --accent-blue-bg: rgba(15, 118, 110, 0.1);
    --accent-blue-border: rgba(15, 118, 110, 0.2);

    --accent-amber-text: #d97706; /* Карамельный */
    --accent-amber-bg: rgba(217, 119, 6, 0.1);
    --accent-amber-border: rgba(217, 119, 6, 0.2);

    --accent-green-text: #4d7c0f; /* Оливковый */
    --accent-green-bg: rgba(77, 124, 15, 0.1);
    --accent-green-border: rgba(77, 124, 15, 0.2);

    --accent-red-text: #b91c1c; /* Кирпичный */
    --accent-red-bg: rgba(185, 28, 28, 0.1);
    --accent-red-border: rgba(185, 28, 28, 0.2);
}

/* =========================================
   8. ТЕМА "МАТРИЦА"
========================================= */
[data-theme="matrix"] {
    --bg-body: #000000;       
    --card-bg: #052e16; /* emerald-950 */       
    --card-border: #047857;   
    --text-main: #10b981;     
    --text-muted: #059669;    
    --primary: #059669;       
    --primary-hover: #047857;
    --input-bg: #000000;

    --accent-blue-text: #ffffff; /* Белый акцент */
    --accent-blue-bg: rgba(255, 255, 255, 0.15);
    --accent-blue-border: rgba(255, 255, 255, 0.3);

    --accent-amber-text: #bef264; /* Салатовый */
    --accent-amber-bg: rgba(190, 242, 100, 0.15);
    --accent-amber-border: rgba(190, 242, 100, 0.3);

    --accent-green-text: #34d399; /* Изумрудный */
    --accent-green-bg: rgba(52, 211, 153, 0.15);
    --accent-green-border: rgba(52, 211, 153, 0.3);

    --accent-red-text: #ef4444; /* Ярко-красный */
    --accent-red-bg: rgba(239, 68, 68, 0.15);
    --accent-red-border: rgba(239, 68, 68, 0.3);
}

/* =========================================
   ОСНОВНЫЕ СТИЛИ ЭЛЕМЕНТОВ
========================================= */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.theme-text-muted { color: var(--text-muted); }
.theme-link { color: var(--accent-blue-text); transition: opacity 0.2s; }
.theme-link:hover { opacity: 0.8; }

.theme-input, select.theme-input {
    background-color: var(--input-bg);
    color: var(--text-main);
    border-color: var(--card-border);
}
select.theme-input option {
    background-color: var(--card-bg);
    color: var(--text-main);
}

/* =========================================
   КНОПКИ И БЕЙДЖИ
========================================= */
.theme-btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}
.theme-btn-primary:hover {
    background-color: var(--primary-hover);
}

/* Синие элементы (Сырые новости, Одобрить) */
.theme-badge-blue { background-color: var(--accent-blue-bg); color: var(--accent-blue-text); border: 1px solid var(--accent-blue-border); }
.theme-btn-blue { background-color: var(--accent-blue-bg); color: var(--accent-blue-text); border: 1px solid var(--accent-blue-border); }
.theme-btn-blue:hover { background-color: var(--accent-blue-text); color: var(--bg-body); }

/* Янтарные элементы (От ИИ) */
.theme-badge-amber { background-color: var(--accent-amber-bg); color: var(--accent-amber-text); border: 1px solid var(--accent-amber-border); }

/* Зеленые элементы (Опубликовано) */
.theme-badge-green { background-color: var(--accent-green-bg); color: var(--accent-green-text); border: 1px solid var(--accent-green-border); }

/* Красные элементы (Ошибки, В корзину) */
.theme-badge-red { background-color: var(--accent-red-bg); color: var(--accent-red-text); border: 1px solid var(--accent-red-border); }
.theme-btn-red { background-color: var(--accent-red-bg); color: var(--accent-red-text); border: 1px solid var(--accent-red-border); }
.theme-btn-red:hover { background-color: var(--accent-red-text); color: var(--bg-body); }

/* Текст ошибки */
.theme-text-red { color: var(--accent-red-text); }

/* Вкладки в модалке */
.theme-tab-active { border-bottom: 2px solid var(--accent-blue-text); color: var(--accent-blue-text); }
.theme-tab-inactive { border-bottom: 2px solid transparent; color: var(--text-muted); }
.theme-tab-inactive:hover { color: var(--text-main); }