/**
 * Фінальні оверрайди для сірого/білого фону на vacancies + specialists.
 * Підключати ОСТАННІМ серед CSS сторінки.
 */

/* ===== Перемикач мов (світла тема): темний текст на світлій кнопці =====
   Специфічність має бити header *:not(.btn):not(.fa)... { color:#fff } */
body.light-theme.light-background-active header .language-btn,
body.light-theme.light-background-active header .language-btn *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
body.light-theme.light-background-active header #language-toggle,
body.light-theme.light-background-active header #current-language,
body.light-theme.light-background-active header .current-flag,
body.light-theme.light-background-active header .flag-emoji,
body.light-theme[style*="ffffff"] header .language-btn,
body.light-theme[style*="ffffff"] header .language-btn *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
body.light-theme[style*="ffffff"] header .current-flag,
body.light-theme[style*="e2e8f0"] header .language-btn,
body.light-theme[style*="e2e8f0"] header .language-btn *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
body.light-theme[style*="e2e8f0"] header .current-flag,
body.light-theme[style*="cbd5e0"] header .language-btn,
body.light-theme[style*="cbd5e0"] header .language-btn *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
body.light-theme[style*="cbd5e0"] header .current-flag {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

body.light-theme.light-background-active header .language-btn,
body.light-theme[style*="ffffff"] header .language-btn,
body.light-theme[style*="e2e8f0"] header .language-btn,
body.light-theme[style*="cbd5e0"] header .language-btn {
    background: #f7fafc !important;
    border: 1px solid #cbd5e0 !important;
}

body.light-theme.light-background-active header .language-flags,
body.light-theme.light-background-active header .language-flags *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
body.light-theme.light-background-active header .flag-label,
body.light-theme.light-background-active header .language-option {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

body.light-theme.light-background-active header .language-flags {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

/* ===== Copyright: нормальна вага; у темній темі — світлий текст ===== */
html body.light-background-active:not(.light-theme) footer.site-footer p,
html body.light-background-active:not(.light-theme) footer.site-footer .footer-main p,
html body.light-background-active:not(.light-theme) footer.site-footer .footer-bottom p,
html body.light-background-active:not(.light-theme) footer.site-footer [data-lang-key="copyright"],
html body.light-background-active:not(.light-theme) footer.site-footer *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(a) {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

html body.light-theme.light-background-active footer.site-footer p,
html body.light-theme.light-background-active footer.site-footer .footer-main p,
html body.light-theme.light-background-active footer.site-footer [data-lang-key="copyright"],
html body.light-theme.light-background-active footer.site-footer *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(a) {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

html body.light-theme.light-background-active footer.site-footer a {
    color: #1d4ed8 !important;
    opacity: 1 !important;
}

html body.light-background-active:not(.light-theme) footer.site-footer a {
    color: #7dd3fc !important;
    opacity: 1 !important;
}

/* ===== Картки / фільтри: м’які рамки ===== */
html body.light-background-active .filter-section,
html body.light-background-active .filters-section,
html body.light-background-active .vacancies-container .section,
html body.light-background-active .section.filter-section,
html body.light-background-active .vacancy-item,
html body.light-background-active .specialist-item,
html body.light-background-active .specialist-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

/* ===== Hover: НЕ чорніти ===== */
html body.light-background-active:not(.light-theme) .vacancy-item:hover,
html body.light-background-active:not(.light-theme) .specialist-item:hover,
html body.light-background-active:not(.light-theme) .specialist-card:hover,
html body.light-background-active:not(.light-theme) .filter-section:hover,
html body.light-background-active .vacancy-item:hover,
html body.light-background-active .specialist-item:hover,
html body.light-background-active .specialist-card:hover,
html body.light-background-active .filter-section:hover,
html body.light-background-active .dark-theme-enhanced:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    transform: translateY(-2px);
}

html body.light-background-active:not(.light-theme) .vacancy-item:hover *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active .vacancy-item:hover *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active:not(.light-theme) .specialist-item:hover *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active .specialist-item:hover *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active .filter-section:hover label,
html body.light-background-active .filter-section:hover h2,
html body.light-background-active .filter-section:hover h3 {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html body.light-background-active .vacancy-item:hover .company-name,
html body.light-background-active .specialist-item:hover .company-name {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}

html body.light-background-active:not(.light-theme) .filter-section,
html body.light-background-active:not(.light-theme) .filters-section,
html body.light-background-active:not(.light-theme) .section {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ===== Select option: білий фон + темний текст (інакше чорний на #1a2a43) ===== */
html body.light-background-active .filter-select,
html body.light-background-active select,
html body[style*="ffffff"] .filter-select,
html body[style*="e2e8f0"] .filter-select,
html body[style*="cbd5e0"] .filter-select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html body.light-background-active .filter-select option,
html body.light-background-active select option,
html body[style*="ffffff"] .filter-select option,
html body[style*="ffffff"] select option,
html body[style*="e2e8f0"] .filter-select option,
html body[style*="e2e8f0"] select option,
html body[style*="cbd5e0"] .filter-select option,
html body[style*="cbd5e0"] select option,
html body.force-black-borders .filter-select option {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ===== Кастомний дропдаун країн ===== */
html body.light-background-active .country-dropdown,
html body[style*="ffffff"] .country-dropdown,
html body[style*="e2e8f0"] .country-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

html body.light-background-active .country-option,
html body[style*="ffffff"] .country-option,
html body[style*="e2e8f0"] .country-option {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

html body.light-background-active .country-section-header {
    background: #f1f5f9 !important;
    color: #1d4ed8 !important;
}

/* ===== CTA: не чорніти (a.create-vacancy-btn потрапляв під blanket color:#000) ===== */
html body.light-background-active .create-vacancy-btn,
html body.light-background-active a.create-vacancy-btn,
html body.light-background-active .create-vacancy-btn *,
html body.light-background-active a.create-vacancy-btn *,
html body.light-background-active .apply-btn,
html body.light-background-active .apply-btn *,
html body.light-background-active .reset-filters-btn,
html body.light-background-active .reset-filters-btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.light-background-active .create-vacancy-btn,
html body.light-background-active a.create-vacancy-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    background-color: #10b981 !important;
}

html body.light-background-active .create-vacancy-btn:hover,
html body.light-background-active a.create-vacancy-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    background-color: #059669 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.light-background-active .apply-btn:hover {
    background: #2980b9 !important;
    color: #ffffff !important;
}

/* М’які рамки + без transition:all (менше «блимання» border) */
html body.light-background-active .vacancy-item,
html body.light-background-active .specialist-item,
html body.light-background-active .specialist-card,
html body.force-black-borders .vacancy-item,
html body[style*="ffffff"] .vacancy-item,
html body[style*="e2e8f0"] .vacancy-item,
html body[style*="cbd5e0"] .vacancy-item {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

/* ===== Header як на index: білі написи, зелений KuBeyond =====
   Виключаємо дропдаун мов — біла стрічка потребує чорних написів (як на index). */
html body.light-background-active header *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text):not(.create-vacancy-btn):not(.apply-btn):not(.reset-filters-btn):not(.reset-btn):not(option):not(.vacancy-card-favorite):not(.favorite-btn):not(.language-flags):not(.language-option):not(.flag-label):not(.flag-emoji):not(.language-btn):not(.current-flag):not(#current-language):not(#lang-arrow),
html body[style*="ffffff"] header *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text):not(.language-flags):not(.language-option):not(.flag-label):not(.flag-emoji):not(.language-btn):not(.current-flag):not(#current-language):not(#lang-arrow),
html body[style*="e2e8f0"] header *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text):not(.language-flags):not(.language-option):not(.flag-label):not(.flag-emoji):not(.language-btn):not(.current-flag):not(#current-language):not(#lang-arrow),
html body[style*="cbd5e0"] header *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text):not(.language-flags):not(.language-option):not(.flag-label):not(.flag-emoji):not(.language-btn):not(.current-flag):not(#current-language):not(#lang-arrow),
html body.light-background-active header button:not(.language-btn):not(#language-toggle),
html body.light-background-active header .btn:not(.language-btn),
html body.light-background-active header nav a,
html body[style*="ffffff"] header nav a,
html body[style*="e2e8f0"] header nav a,
html body[style*="cbd5e0"] header nav a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Мови: біла стрічка + чорні написи (desktop у header + mobile portal на body) */
html body.light-theme.light-background-active .language-flags,
html body.light-theme[style*="ffffff"] .language-flags,
html body.light-theme[style*="e2e8f0"] .language-flags,
html body.light-theme[style*="cbd5e0"] .language-flags,
html body.light-theme.light-background-active header .language-flags,
html body.light-theme[style*="ffffff"] header .language-flags,
html body.light-theme[style*="e2e8f0"] header .language-flags,
html body.light-theme[style*="cbd5e0"] header .language-flags,
html body.light-theme.light-background-active body > .language-flags,
html body.light-theme[style*="ffffff"] body > .language-flags,
html body.light-theme[style*="e2e8f0"] body > .language-flags,
html body.light-theme[style*="cbd5e0"] body > .language-flags {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html body.light-theme.light-background-active .language-flags .flag-label,
html body.light-theme.light-background-active .language-flags .language-option,
html body.light-theme.light-background-active .language-flags .language-option span,
html body.light-theme.light-background-active .language-flags *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.flag-emoji),
html body.light-theme.light-background-active header .language-flags .flag-label,
html body.light-theme.light-background-active header .language-flags .language-option,
html body.light-theme.light-background-active header .language-flags *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.flag-emoji),
html body.light-theme[style*="ffffff"] .language-flags .flag-label,
html body.light-theme[style*="ffffff"] .language-flags .language-option,
html body.light-theme[style*="ffffff"] .language-flags *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.flag-emoji),
html body.light-theme[style*="e2e8f0"] .language-flags .flag-label,
html body.light-theme[style*="e2e8f0"] .language-flags .language-option,
html body.light-theme[style*="e2e8f0"] .language-flags *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.flag-emoji),
html body.light-theme[style*="cbd5e0"] .language-flags .flag-label,
html body.light-theme[style*="cbd5e0"] .language-flags .language-option,
html body.light-theme[style*="cbd5e0"] .language-flags *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.flag-emoji) {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html body.light-theme.light-background-active .language-flags .language-option:hover,
html body.light-theme[style*="ffffff"] .language-flags .language-option:hover,
html body.light-theme[style*="e2e8f0"] .language-flags .language-option:hover,
html body.light-theme[style*="cbd5e0"] .language-flags .language-option:hover {
    background: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html body header .logo-text,
html body.light-theme header .logo-text,
html body:not(.light-theme) header .logo-text,
html body.light-background-active header .logo-text,
html body.light-background-active header .logo .logo-text,
html body.light-background-active header .logo-container .logo-text,
html body[style*="ffffff"] header .logo-text,
html body[style*="e2e8f0"] header .logo-text,
html body[style*="cbd5e0"] header .logo-text,
html body.light-theme.light-background-active header .logo-text {
    color: #2ecc71 !important;
    -webkit-text-fill-color: #2ecc71 !important;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.3) !important;
}

/* ===== Сердечка обраних: червоні (не чорні від blanket іконок) ===== */
html body.light-background-active .vacancy-card-favorite.active,
html body.light-background-active .vacancy-card-favorite.active i,
html body.light-background-active .vacancy-card-favorite.active .fa-heart,
html body.light-theme.light-background-active .vacancy-item .vacancy-card-favorite.active i,
html body.light-theme.light-background-active .vacancy-item i.fa-heart,
html body.light-background-active .vacancy-item .vacancy-card-favorite.active i.fa-heart,
html body.light-background-active .specialist-card-favorite.active,
html body.light-background-active .specialist-card-favorite.active i,
html body.light-background-active .specialist-card-favorite.active .fa-heart,
html body[style*="ffffff"] .vacancy-card-favorite.active i,
html body[style*="e2e8f0"] .vacancy-card-favorite.active i,
html body[style*="cbd5e0"] .vacancy-card-favorite.active i {
    color: #e74c3c !important;
    -webkit-text-fill-color: #e74c3c !important;
}

html body.light-background-active .vacancy-card-favorite:not(.active) i,
html body.light-theme.light-background-active .vacancy-card-favorite:not(.active) i,
html body.light-background-active .specialist-card-favorite:not(.active) i {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* ===== Мобільне меню (сендвіч): як на index =====
   Темна тема + сірий/білий page-bg → сірий градієнт + білий текст.
   Світла тема + сірий/білий page-bg → біла стрічка + темний текст (НЕ синя). */
html body.light-background-active:not(.light-theme) .mobile-menu,
html body:not(.light-theme)[style*="ffffff"] .mobile-menu,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-menu,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-menu {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: none !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
}

html body.light-theme.light-background-active .mobile-menu,
html body.light-theme[style*="ffffff"] .mobile-menu,
html body.light-theme[style*="e2e8f0"] .mobile-menu,
html body.light-theme[style*="cbd5e0"] .mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Темна тема / без light-theme: білий текст на сірому сендвічі */
html body.light-background-active:not(.light-theme) .mobile-menu,
html body.light-background-active:not(.light-theme) .mobile-menu a,
html body.light-background-active:not(.light-theme) .mobile-menu button,
html body.light-background-active:not(.light-theme) .mobile-menu ul,
html body.light-background-active:not(.light-theme) .mobile-menu li,
html body.light-background-active:not(.light-theme) .mobile-menu span,
html body.light-background-active:not(.light-theme) .mobile-menu *:not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body:not(.light-theme)[style*="ffffff"] .mobile-menu,
html body:not(.light-theme)[style*="ffffff"] .mobile-menu a,
html body:not(.light-theme)[style*="ffffff"] .mobile-menu button,
html body:not(.light-theme)[style*="ffffff"] .mobile-menu *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text),
html body:not(.light-theme)[style*="e2e8f0"] .mobile-menu,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-menu a,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-menu button,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-menu *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text),
html body:not(.light-theme)[style*="cbd5e0"] .mobile-menu,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-menu a,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-menu button,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-menu *:not(button):not(.btn):not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.logo-text) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.light-background-active:not(.light-theme) .mobile-menu a:hover,
html body.light-background-active:not(.light-theme) .mobile-menu button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.light-background-active:not(.light-theme) .mobile-menu button {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Світла тема: темний текст на білій стрічці (як на index) */
html body.light-theme.light-background-active .mobile-menu,
html body.light-theme.light-background-active .mobile-menu a,
html body.light-theme.light-background-active .mobile-menu button,
html body.light-theme.light-background-active .mobile-menu ul,
html body.light-theme.light-background-active .mobile-menu li,
html body.light-theme.light-background-active .mobile-menu span,
html body.light-theme.light-background-active .mobile-menu *:not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-theme.light-background-active .mobile-menu ul li a,
html body.light-theme[style*="ffffff"] .mobile-menu,
html body.light-theme[style*="ffffff"] .mobile-menu a,
html body.light-theme[style*="ffffff"] .mobile-menu button,
html body.light-theme[style*="ffffff"] .mobile-menu *:not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-theme[style*="e2e8f0"] .mobile-menu,
html body.light-theme[style*="e2e8f0"] .mobile-menu a,
html body.light-theme[style*="e2e8f0"] .mobile-menu button,
html body.light-theme[style*="e2e8f0"] .mobile-menu *:not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-theme[style*="cbd5e0"] .mobile-menu,
html body.light-theme[style*="cbd5e0"] .mobile-menu a,
html body.light-theme[style*="cbd5e0"] .mobile-menu button,
html body.light-theme[style*="cbd5e0"] .mobile-menu *:not(.fa):not(.fas):not(.far):not(.fab):not(i) {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html body.light-theme.light-background-active .mobile-menu a:hover,
html body.light-theme.light-background-active .mobile-menu button:hover,
html body.light-theme.light-background-active .mobile-menu ul li a:hover,
html body.light-theme[style*="ffffff"] .mobile-menu a:hover,
html body.light-theme[style*="ffffff"] .mobile-menu button:hover,
html body.light-theme[style*="e2e8f0"] .mobile-menu a:hover,
html body.light-theme[style*="e2e8f0"] .mobile-menu button:hover,
html body.light-theme[style*="cbd5e0"] .mobile-menu a:hover,
html body.light-theme[style*="cbd5e0"] .mobile-menu button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html body.light-theme.light-background-active .mobile-menu button,
html body.light-theme[style*="ffffff"] .mobile-menu button,
html body.light-theme[style*="e2e8f0"] .mobile-menu button,
html body.light-theme[style*="cbd5e0"] .mobile-menu button {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html body.light-theme.light-background-active .mobile-menu ul,
html body.light-theme[style*="ffffff"] .mobile-menu ul,
html body.light-theme[style*="e2e8f0"] .mobile-menu ul,
html body.light-theme[style*="cbd5e0"] .mobile-menu ul {
    background: transparent !important;
    border: none !important;
}

/* ===== Auth modal: у темній темі на сірому/білому page-bg текст НЕ чорний =====
   Blanket body.light-background-active * { color:#000 } інакше ховає написи. */
html body:not(.light-theme) #unified-auth-modal .unified-auth-content,
html body:not(.light-theme) #forgot-password-modal .unified-auth-content,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-auth-content,
html body.light-background-active:not(.light-theme) #forgot-password-modal .unified-auth-content,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-auth-content,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-auth-content,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-auth-content,
html body[style*="e2e8f0"]:not(.light-theme) #forgot-password-modal .unified-auth-content,
html body[style*="ffffff"]:not(.light-theme) #forgot-password-modal .unified-auth-content,
html body[style*="cbd5e0"]:not(.light-theme) #forgot-password-modal .unified-auth-content {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body:not(.light-theme) #forgot-password-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body.light-background-active:not(.light-theme) #forgot-password-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="e2e8f0"]:not(.light-theme) #forgot-password-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="ffffff"]:not(.light-theme) #forgot-password-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a),
html body[style*="cbd5e0"]:not(.light-theme) #forgot-password-modal .unified-auth-content *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.unified-modal-logo):not(.unified-auth-btn):not(.unified-modal-tab):not(a) {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-modal-logo,
html body:not(.light-theme) #forgot-password-modal .unified-modal-logo,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-modal-logo,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-modal-logo,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-modal-logo,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-modal-logo {
    color: #2ecc71 !important;
    -webkit-text-fill-color: #2ecc71 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-modal-title,
html body:not(.light-theme) #unified-auth-modal .unified-account-title,
html body:not(.light-theme) #unified-auth-modal .unified-form-group label,
html body:not(.light-theme) #unified-auth-modal .unified-remember-me label,
html body:not(.light-theme) #forgot-password-modal .unified-modal-title,
html body:not(.light-theme) #forgot-password-modal .unified-form-group label,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-modal-title,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-form-group label,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-remember-me label,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-modal-title,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-form-group label,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-modal-title,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-form-group label,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-modal-title,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-form-group label {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-form-input,
html body:not(.light-theme) #forgot-password-modal .unified-form-input,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-form-input,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-form-input,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-form-input,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-form-input {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-form-input::placeholder,
html body:not(.light-theme) #forgot-password-modal .unified-form-input::placeholder,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-form-input::placeholder,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-form-input::placeholder,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-form-input::placeholder,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-form-input::placeholder {
    color: #95a5a6 !important;
    -webkit-text-fill-color: #95a5a6 !important;
    opacity: 1 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-auth-btn,
html body:not(.light-theme) #forgot-password-modal .unified-auth-btn,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-auth-btn,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-auth-btn,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-auth-btn,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-auth-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.light-theme) #unified-auth-modal a,
html body:not(.light-theme) #forgot-password-modal a,
html body:not(.light-theme) #unified-auth-modal .unified-auth-links a,
html body.light-background-active:not(.light-theme) #unified-auth-modal a,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal a,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal a,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal a {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-auth-separator,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-auth-separator,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-auth-separator,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-auth-separator,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-auth-separator {
    color: #95a5a6 !important;
    -webkit-text-fill-color: #95a5a6 !important;
}

html body:not(.light-theme) #unified-auth-modal .unified-password-toggle,
html body:not(.light-theme) #unified-auth-modal .unified-modal-close,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-password-toggle,
html body.light-background-active:not(.light-theme) #unified-auth-modal .unified-modal-close,
html body[style*="e2e8f0"]:not(.light-theme) #unified-auth-modal .unified-password-toggle,
html body[style*="ffffff"]:not(.light-theme) #unified-auth-modal .unified-password-toggle,
html body[style*="cbd5e0"]:not(.light-theme) #unified-auth-modal .unified-password-toggle {
    color: #bdc3c7 !important;
    -webkit-text-fill-color: #bdc3c7 !important;
}

/* html boot: фон до появи body — без чорного кадру */
html.light-background-active {
    background-attachment: fixed;
    min-height: 100%;
}

/* ===== Модалка вакансії: блок резюме / превʼю в темній темі (не чорний на чорному) ===== */
html body:not(.light-theme) #vacancy-modal .resume-upload-label,
html body:not(.light-theme) #vacancy-modal .resume-option-item,
html body:not(.light-theme) #vacancy-modal .resume-option-item span,
html body:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body:not(.light-theme) #vacancy-modal .resume-visibility-preview *,
html body:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body:not(.light-theme) #vacancy-modal .preview-employer-view-btn span,
html body:not(.light-theme) #vacancy-modal .preview-employer-view-btn i,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-upload-label,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-option-item,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-option-item span,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-visibility-preview *,
html body.light-background-active:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body.light-background-active:not(.light-theme) #vacancy-modal .preview-employer-view-btn span,
html body.light-background-active:not(.light-theme) #vacancy-modal .preview-employer-view-btn i,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-option-item span,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview *,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-option-item span,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-visibility-preview *,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-option-item span,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview *,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

html body:not(.light-theme) #vacancy-modal .resume-visibility-preview strong,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-visibility-preview strong,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview strong,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-visibility-preview strong,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-privacy-hint,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-privacy-hint {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

html body:not(.light-theme) #vacancy-modal .resume-option-item,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-option-item,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-option-item {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html body:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body.light-background-active:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .resume-visibility-preview,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .resume-visibility-preview {
    background: rgba(52, 152, 219, 0.14) !important;
    border-color: rgba(52, 152, 219, 0.4) !important;
}

html body:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body.light-background-active:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body[style*="e2e8f0"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body[style*="ffffff"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn,
html body[style*="cbd5e0"]:not(.light-theme) #vacancy-modal .preview-employer-view-btn {
    background: rgba(14, 116, 144, 0.25) !important;
    border-color: rgba(125, 211, 252, 0.5) !important;
}

html body:not(.light-theme) .employer-preview-modal__content,
html body:not(.light-theme) .employer-preview-modal__content *:not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active:not(.light-theme) .employer-preview-modal__content,
html body.light-background-active:not(.light-theme) .employer-preview-modal__content *:not(.fa):not(.fas):not(.far):not(.fab):not(i) {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

html body:not(.light-theme) .employer-preview-modal__title,
html body.light-background-active:not(.light-theme) .employer-preview-modal__title {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

/* =====================================================================
   Specialists: країна / сердечка / модалка профілю (сірий+білий bg)
   ===================================================================== */

/* Поле країни — біле і в спокої, і у focus (дропдаун відкритий) */
html body.light-background-active:not(.light-theme) #country-filter,
html body.light-background-active:not(.light-theme) input.country-input.filter-select,
html body.force-dark-cards:not(.light-theme) #country-filter,
html body.force-dark-cards:not(.light-theme) input.country-input,
html body:not(.light-theme)[style*="ffffff"] #country-filter,
html body:not(.light-theme)[style*="e2e8f0"] #country-filter,
html body:not(.light-theme)[style*="cbd5e0"] #country-filter,
html body.light-background-active:not(.light-theme) #country-filter:focus,
html body.light-background-active:not(.light-theme) input.country-input:focus,
html body.force-dark-cards:not(.light-theme) #country-filter:focus,
html body:not(.light-theme)[style*="e2e8f0"] #country-filter:focus,
html body:not(.light-theme)[style*="ffffff"] #country-filter:focus,
html body:not(.light-theme)[style*="cbd5e0"] #country-filter:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

html body.light-background-active:not(.light-theme) #country-filter::placeholder,
html body.force-dark-cards:not(.light-theme) #country-filter::placeholder,
html body:not(.light-theme)[style*="e2e8f0"] #country-filter::placeholder,
html body:not(.light-theme)[style*="ffffff"] #country-filter::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

html body.light-background-active .country-dropdown,
html body.force-dark-cards .country-dropdown,
html body[style*="cbd5e0"] .country-dropdown {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html body.light-background-active .country-option,
html body.force-dark-cards .country-option,
html body[style*="cbd5e0"] .country-option {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 400 !important;
}

/* Чекбокси фільтрів — звичайна вага */
html body.light-background-active label[for="show-favorites"],
html body.light-background-active label[for="show-favorites"] span,
html body.light-background-active label[for="show-available"],
html body.light-background-active label[for="show-available"] span,
html body.force-dark-cards label[for="show-favorites"],
html body.force-dark-cards label[for="show-favorites"] span,
html body.force-dark-cards label[for="show-available"],
html body.force-dark-cards label[for="show-available"] span {
    font-weight: 400 !important;
}

/* Сердечко — прибрати круглий «бейдж» від force-dark-cards */
html body.light-background-active .specialist-item .specialist-card-favorite,
html body.light-background-active .specialist-item .specialist-card-favorite.favorite-btn,
html body.force-dark-cards .specialist-item .specialist-card-favorite,
html body.force-dark-cards .specialist-item .specialist-card-favorite.favorite-btn,
html body.force-dark-cards .specialist-item button.specialist-card-favorite,
html body[style*="ffffff"] .specialist-item .specialist-card-favorite,
html body[style*="e2e8f0"] .specialist-item .specialist-card-favorite,
html body[style*="cbd5e0"] .specialist-item .specialist-card-favorite {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
}

html body.light-background-active .specialist-item .specialist-card-favorite:hover,
html body.force-dark-cards .specialist-item .specialist-card-favorite:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Модалка профілю спеціаліста + зв'язок — світлий текст (як auth-modal у цьому файлі) */
html body:not(.light-theme) .specialist-info-modal-content,
html body.light-background-active:not(.light-theme) .specialist-info-modal-content,
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content,
html body[style*="e2e8f0"]:not(.light-theme) .specialist-info-modal-content,
html body[style*="ffffff"]:not(.light-theme) .specialist-info-modal-content,
html body[style*="cbd5e0"]:not(.light-theme) .specialist-info-modal-content {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="e2e8f0"]:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="ffffff"]:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="cbd5e0"]:not(.light-theme) .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.light-background-active:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body.force-dark-cards:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="e2e8f0"]:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="ffffff"]:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i),
html body[style*="cbd5e0"]:not(.light-theme) .contact-specialist-modal .modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i) {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) .specialist-info-modal-content .detail-label,
html body:not(.light-theme) .specialist-info-modal-content .specialist-location-large,
html body:not(.light-theme) .specialist-info-modal-content .resume-filesize,
html body.light-background-active:not(.light-theme) .specialist-info-modal-content .detail-label,
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content .detail-label,
html body[style*="e2e8f0"]:not(.light-theme) .specialist-info-modal-content .detail-label {
    color: #bdc3c7 !important;
    -webkit-text-fill-color: #bdc3c7 !important;
}

html body:not(.light-theme) .specialist-info-modal-content .specialist-occupation-large,
html body:not(.light-theme) .contact-specialist-modal .specialist-name,
html body.light-background-active:not(.light-theme) .specialist-info-modal-content .specialist-occupation-large,
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content .specialist-occupation-large {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

html body:not(.light-theme) .specialist-info-modal-content .skill-tag-large,
html body.light-background-active:not(.light-theme) .specialist-info-modal-content .skill-tag-large,
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content .skill-tag-large {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.light-theme) .specialist-info-modal-content i:not(.fa-heart),
html body.light-background-active:not(.light-theme) .specialist-info-modal-content i:not(.fa-heart),
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content i:not(.fa-heart) {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

html body:not(.light-theme) .specialist-info-modal-content button,
html body.light-background-active:not(.light-theme) .specialist-info-modal-content button,
html body.force-dark-cards:not(.light-theme) .specialist-info-modal-content button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.light-theme) .specialist-modal-close,
html body.light-background-active:not(.light-theme) .specialist-modal-close,
html body.force-dark-cards:not(.light-theme) .specialist-modal-close {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
}

/* Світла тема: біла модалка — темний текст */
html body.light-theme .specialist-info-modal-content,
html body.light-theme .specialist-info-modal-content *:not(button):not(.fa):not(.fas):not(.far):not(.fab):not(i) {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}
html body.light-theme .specialist-info-modal-content .detail-label,
html body.light-theme .specialist-info-modal-content .specialist-description-large {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}
html body.light-theme .specialist-modal-close {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: rgba(15, 23, 42, 0.08) !important;
}

/* =====================================================================
   Спеціалісти: мова / освіта / ЗАКРИТИ / PDF (сірий+білий bg)
   ===================================================================== */

/* Перемикач мов — як на vacancies:
   світла тема: білий фон + темний текст;
   темна тема: прозорий/сірий як header + білий текст (НЕ майже чорний) */
html body.light-theme.light-background-active header .language-btn,
html body.light-theme.force-dark-cards header .language-btn,
html body.light-theme[style*="e2e8f0"] header .language-btn,
html body.light-theme[style*="ffffff"] header .language-btn,
html body.light-theme[style*="cbd5e0"] header .language-btn,
html.light-theme body.light-background-active header .language-btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e0 !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html body.light-theme.light-background-active header .language-btn *,
html body.light-theme.light-background-active header .language-btn #current-language,
html body.light-theme.light-background-active header .language-btn #lang-arrow,
html.light-theme body.light-background-active header .language-btn #current-language,
html.light-theme body.light-background-active header .language-btn #lang-arrow {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html body.light-theme.light-background-active header .language-btn:hover,
html.light-theme body.light-background-active header .language-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

html body.light-background-active:not(.light-theme) header .language-btn,
html body.force-dark-cards:not(.light-theme) header .language-btn,
html body:not(.light-theme)[style*="e2e8f0"] header .language-btn,
html body:not(.light-theme)[style*="ffffff"] header .language-btn,
html body:not(.light-theme)[style*="cbd5e0"] header .language-btn,
html body.dark-theme.light-background-active header .language-btn,
html body.dark-theme.force-dark-cards header .language-btn,
html:not(.light-theme) body.light-background-active header .language-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

html body.light-background-active:not(.light-theme) header .language-btn *,
html body.force-dark-cards:not(.light-theme) header .language-btn *,
html body.dark-theme.light-background-active header .language-btn #current-language,
html body.dark-theme.light-background-active header .language-btn #lang-arrow,
html body.light-background-active:not(.light-theme) header .language-btn #current-language,
html body.light-background-active:not(.light-theme) header .language-btn #lang-arrow,
html:not(.light-theme) body.light-background-active header .language-btn #current-language,
html:not(.light-theme) body.light-background-active header .language-btn #lang-arrow {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.light-background-active:not(.light-theme) header .language-btn:hover,
html body.force-dark-cards:not(.light-theme) header .language-btn:hover,
html body.dark-theme.light-background-active header .language-btn:hover,
html:not(.light-theme) body.light-background-active header .language-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Освіта: без рамки/кнопкового вигляду від force-dark-cards */
html body .specialist-info-modal-content .education-toggle-btn,
html body.light-background-active .specialist-info-modal-content .education-toggle-btn,
html body.force-dark-cards .specialist-info-modal-content .education-toggle-btn,
html body.dark-theme.force-dark-cards .specialist-info-modal-content .education-toggle-btn,
html body.light-theme .specialist-info-modal-content .education-toggle-btn,
html body[style*="e2e8f0"] .specialist-info-modal-content .education-toggle-btn,
html body[style*="ffffff"] .specialist-info-modal-content .education-toggle-btn,
html body[style*="cbd5e0"] .specialist-info-modal-content .education-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
    font-weight: inherit !important;
    transform: none !important;
}

html body.light-theme .specialist-info-modal-content .education-toggle-btn,
html body.light-theme .specialist-info-modal-content .education-toggle-btn .education-compact-text,
html body.light-theme .specialist-info-modal-content .education-toggle-btn .detail-value {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

html body:not(.light-theme) .specialist-info-modal-content .education-toggle-btn,
html body:not(.light-theme) .specialist-info-modal-content .education-toggle-btn .education-compact-text,
html body:not(.light-theme) .specialist-info-modal-content .education-toggle-btn .detail-value {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body .specialist-info-modal-content .education-toggle-hint,
html body.light-theme .specialist-info-modal-content .education-toggle-hint {
    color: #2f7ec9 !important;
    -webkit-text-fill-color: #2f7ec9 !important;
    background: transparent !important;
    border: none !important;
}

html body:not(.light-theme) .specialist-info-modal-content .education-toggle-hint {
    color: #7aa9d8 !important;
    -webkit-text-fill-color: #7aa9d8 !important;
}

/* Модалка зв'язку: ЗАКРИТИ — видимий контраст */
/* Темна тема: світлий текст (НІКОЛИ не застосовувати при light-theme) */
html body:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body:not(.light-theme) .contact-specialist-modal #contact-close-btn,
html body.light-background-active:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body.force-dark-cards:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body.dark-theme:not(.light-theme).force-dark-cards .contact-specialist-modal .btn-secondary,
html body.dark-theme:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body[style*="e2e8f0"]:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body[style*="ffffff"]:not(.light-theme) .contact-specialist-modal .btn-secondary,
html body[style*="cbd5e0"]:not(.light-theme) .contact-specialist-modal .btn-secondary,
html:not(.light-theme) body:not(.light-theme) .contact-specialist-modal .btn-secondary,
html:not(.light-theme) body:not(.light-theme) .contact-specialist-modal #contact-close-btn {
    background: rgba(236, 240, 241, 0.12) !important;
    background-color: rgba(236, 240, 241, 0.12) !important;
    border: 2px solid rgba(189, 195, 199, 0.65) !important;
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme) .contact-specialist-modal .btn-secondary:hover,
html body:not(.light-theme) .contact-specialist-modal #contact-close-btn:hover,
html body.light-background-active:not(.light-theme) .contact-specialist-modal .btn-secondary:hover,
html body.force-dark-cards:not(.light-theme) .contact-specialist-modal .btn-secondary:hover,
html:not(.light-theme) body:not(.light-theme) .contact-specialist-modal .btn-secondary:hover {
    background: rgba(236, 240, 241, 0.2) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Світла тема: темний текст на світло-сірому тлі (не біле на білому) */
html body.light-theme .contact-specialist-modal .btn-secondary,
html body.light-theme .contact-specialist-modal button.btn-secondary,
html body.light-theme .contact-specialist-modal .no-contact-info .btn-secondary,
html body.light-theme.light-background-active .contact-specialist-modal .btn-secondary,
html body.light-theme.force-dark-cards .contact-specialist-modal .btn-secondary,
html body.light-theme .contact-specialist-modal #contact-close-btn,
html body.light-theme.light-background-active .contact-specialist-modal #contact-close-btn,
html body.light-theme .contact-specialist-modal .no-contact-info #contact-close-btn,
html.light-theme body .contact-specialist-modal .btn-secondary,
html.light-theme body .contact-specialist-modal button.btn-secondary,
html.light-theme body.light-background-active .contact-specialist-modal .btn-secondary,
html.light-theme body .contact-specialist-modal #contact-close-btn,
html.light-theme body .contact-specialist-modal .no-contact-info #contact-close-btn {
    background: #e8eef3 !important;
    background-color: #e8eef3 !important;
    border: 2px solid #94a3b8 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600 !important;
}

html body.light-theme .contact-specialist-modal .btn-secondary:hover,
html body.light-theme.light-background-active .contact-specialist-modal .btn-secondary:hover,
html body.light-theme .contact-specialist-modal #contact-close-btn:hover,
html.light-theme body .contact-specialist-modal .btn-secondary:hover,
html.light-theme body .contact-specialist-modal #contact-close-btn:hover {
    background: #d5dde5 !important;
    background-color: #d5dde5 !important;
    border-color: #64748b !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* PDF-бейдж у світлій темі модалки — контрастніший червоний */
html body.light-theme .specialist-info-modal-content .resume-file-icon,
html body.light-theme .specialist-info-modal-content .resume-file-icon.is-pdf,
html body.light-theme.light-background-active .specialist-info-modal-content .resume-file-icon.is-pdf {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.28) !important;
}

html body.light-theme .specialist-info-modal-content .resume-file-icon i,
html body.light-theme .specialist-info-modal-content .resume-file-icon.is-pdf i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Фінал: «Закрыть» у світлій темі — завжди читабельний (перебиває будь-який fill) */
html.light-theme #contact-close-btn,
html body.light-theme #contact-close-btn,
body.light-theme #contact-close-btn.btn-secondary {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: #e8eef3 !important;
    background-color: #e8eef3 !important;
    border: 2px solid #94a3b8 !important;
}

/* Auth modal tabs: неактивна вкладка — приглушений темний тон (не білий «падінг») */
html body #unified-auth-modal .unified-modal-tabs,
html body #forgot-password-modal .unified-modal-tabs {
    background: rgba(0, 0, 0, 0.35) !important;
}

html body #unified-auth-modal .unified-modal-tab:not(.active),
html body #forgot-password-modal .unified-modal-tab:not(.active) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 10px 14px !important;
}

html body #unified-auth-modal .unified-modal-tab.active,
html body #forgot-password-modal .unified-modal-tab.active {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    background-color: #3498db !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.35) !important;
    text-shadow: none !important;
}

html body.light-theme #unified-auth-modal .unified-modal-tab:not(.active),
html body.light-theme #forgot-password-modal .unified-modal-tab:not(.active) {
    background: rgba(108, 117, 125, 0.16) !important;
    background-color: rgba(108, 117, 125, 0.16) !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    border: 1px solid rgba(51, 65, 85, 0.2) !important;
}

html body.light-theme #unified-auth-modal .unified-modal-tab.active,
html body.light-theme #forgot-password-modal .unified-modal-tab.active {
    background: linear-gradient(135deg, #5a6c7d, #4a5568) !important;
    background-color: #5a6c7d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #unified-auth-modal .unified-account-title {
    font-size: 0.8rem !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
}

html body #unified-auth-modal .unified-account-option {
    height: auto !important;
    min-height: 112px !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* ===== specialist-panel.html: темна панель на сірому/білому page-bg =====
   light-background-fixes фарбує все в #000, а картки панелі лишаються темними. */
html body:not(.light-theme).light-background-active .specialist-panel,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel,
html body:not(.light-theme)[style*="f5f7fa"] .specialist-panel,
html body:not(.light-theme)[style*="c3cfe2"] .specialist-panel {
    color: #ecf0f1 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a),
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a),
html body:not(.light-theme)[style*="ffffff"] .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a),
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a),
html body:not(.light-theme)[style*="f5f7fa"] .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a),
html body:not(.light-theme)[style*="c3cfe2"] .specialist-panel *:not(.fa):not(.fas):not(.far):not(.fab):not(i):not(.btn):not(button):not(a) {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel h1,
html body:not(.light-theme).light-background-active .specialist-panel h2,
html body:not(.light-theme).light-background-active .specialist-panel h3,
html body:not(.light-theme).light-background-active .specialist-panel label,
html body:not(.light-theme).light-background-active .specialist-panel .panel-header p,
html body:not(.light-theme).light-background-active .specialist-panel .sp-preview-header h2,
html body:not(.light-theme).light-background-active .specialist-panel .form-section h2,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel h1,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel h2,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel h3,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel label,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .panel-header p,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel h1,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel h2,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel h3,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel label,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .panel-header p,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel h1,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel h2,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel h3,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel label,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .panel-header p {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel .sp-preview-occupation,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .sp-preview-occupation,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .sp-preview-occupation,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .sp-preview-occupation {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel input,
html body:not(.light-theme).light-background-active .specialist-panel select,
html body:not(.light-theme).light-background-active .specialist-panel textarea,
html body:not(.light-theme).light-background-active .specialist-panel input:focus,
html body:not(.light-theme).light-background-active .specialist-panel select:focus,
html body:not(.light-theme).light-background-active .specialist-panel textarea:focus,
html body:not(.light-theme).light-background-active .specialist-panel input:focus-visible,
html body:not(.light-theme).light-background-active .specialist-panel select:focus-visible,
html body:not(.light-theme).light-background-active .specialist-panel textarea:focus-visible,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel input,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel select,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel textarea,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel input:focus,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel select:focus,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel textarea:focus,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel input,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel select,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel textarea,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel input:focus,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel select:focus,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel textarea:focus,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel input,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel select,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel textarea,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel input:focus,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel select:focus,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel textarea:focus {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
    caret-color: #ecf0f1 !important;
    background: rgba(0, 0, 0, 0.28) !important;
    background-color: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
}

html body:not(.light-theme) .specialist-panel .jg-salary-currency-slot > .salary-currency-select,
html body:not(.light-theme) .specialist-panel .jg-salary-currency-slot > .salary-currency-custom,
html body:not(.light-theme).light-background-active .specialist-panel .jg-salary-currency-slot > .salary-currency-custom,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .jg-salary-currency-slot > .salary-currency-custom,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .jg-salary-currency-slot > .salary-currency-custom,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .jg-salary-currency-slot > .salary-currency-custom {
    background: rgba(0, 0, 0, 0.28) !important;
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    caret-color: #ecf0f1 !important;
}


html body:not(.light-theme).light-background-active .specialist-panel input::placeholder,
html body:not(.light-theme).light-background-active .specialist-panel textarea::placeholder,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel input::placeholder,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel input::placeholder,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel button,
html body:not(.light-theme).light-background-active .specialist-panel .btn,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel button,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .btn,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel button,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .btn,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel button,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.light-theme).light-background-active .specialist-panel a,
html body:not(.light-theme).light-background-active .specialist-panel .back-link,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel a,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .back-link,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel a,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .back-link,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel a,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .back-link {
    color: #7dd3fc !important;
    -webkit-text-fill-color: #7dd3fc !important;
}

html body:not(.light-theme).light-background-active .specialist-panel .fa,
html body:not(.light-theme).light-background-active .specialist-panel .fas,
html body:not(.light-theme).light-background-active .specialist-panel .far,
html body:not(.light-theme).light-background-active .specialist-panel .fab,
html body:not(.light-theme).light-background-active .specialist-panel i,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .fa,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .fas,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel i,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .fa,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .fas,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel i,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .fa,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .fas,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel i {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

html body:not(.light-theme).light-background-active .specialist-panel .limit-item,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .limit-item,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .limit-item,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .limit-item {
    color: #7dd3fc !important;
    -webkit-text-fill-color: #7dd3fc !important;
}

html body:not(.light-theme).light-background-active .specialist-panel .resume-warning-text,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .resume-warning-text,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .resume-warning-text,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .resume-warning-text {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

/* Заголовок панелі (червоний блок force-title) — білий текст */
html body:not(.light-theme).light-background-active .specialist-panel #panel-title,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel #panel-title,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel #panel-title,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel #panel-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Навички: не сірий чіп + білий текст (нечитабельно) — синій фон, білі літери */
html body:not(.light-theme) .specialist-panel .skill-tag,
html body:not(.light-theme).light-background-active .specialist-panel .skill-tag,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .skill-tag,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .skill-tag,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .skill-tag,
html body:not(.light-theme)[style*="f5f7fa"] .specialist-panel .skill-tag,
html body:not(.light-theme)[style*="c3cfe2"] .specialist-panel .skill-tag {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    background-color: #3498db !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(41, 128, 185, 0.55) !important;
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.28) !important;
}

html body:not(.light-theme) .specialist-panel .skill-tag .skill-remove-btn,
html body:not(.light-theme).light-background-active .specialist-panel .skill-tag .skill-remove-btn,
html body:not(.light-theme)[style*="e2e8f0"] .specialist-panel .skill-tag .skill-remove-btn,
html body:not(.light-theme)[style*="ffffff"] .specialist-panel .skill-tag .skill-remove-btn,
html body:not(.light-theme)[style*="cbd5e0"] .specialist-panel .skill-tag .skill-remove-btn {
    background: rgba(185, 28, 28, 0.95) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== specialist-panel: custom datalist (категорія / країна) =====
   Dropdown вішається на body, тому global light-bg button{color:#fff} робить білий-на-білому. */
html body .mobile-datalist-fallback {
    max-height: 220px !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    z-index: 10000 !important;
}

/* Світла тема (+ сірий/білий page-bg): білий список, чорний текст */
html body.light-theme .mobile-datalist-fallback,
html body.light-theme.light-background-active .mobile-datalist-fallback,
html body.light-theme[style*="ffffff"] .mobile-datalist-fallback,
html body.light-theme[style*="e2e8f0"] .mobile-datalist-fallback,
html body.light-theme[style*="cbd5e0"] .mobile-datalist-fallback {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

html body.light-theme .mobile-datalist-fallback button,
html body.light-theme.light-background-active .mobile-datalist-fallback button,
html body.light-theme[style*="ffffff"] .mobile-datalist-fallback button,
html body.light-theme[style*="e2e8f0"] .mobile-datalist-fallback button,
html body.light-theme[style*="cbd5e0"] .mobile-datalist-fallback button,
html body.light-background-active.light-theme .mobile-datalist-fallback button {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
    background-color: transparent !important;
}

html body.light-theme .mobile-datalist-fallback button:hover,
html body.light-theme .mobile-datalist-fallback button:focus {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Темна тема (+ сірий/білий page-bg): темний список, світлий текст */
html body:not(.light-theme) .mobile-datalist-fallback,
html body:not(.light-theme).light-background-active .mobile-datalist-fallback,
html body:not(.light-theme)[style*="ffffff"] .mobile-datalist-fallback,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-datalist-fallback,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-datalist-fallback {
    background: #16213e !important;
    background-color: #16213e !important;
    border: 1px solid rgba(52, 152, 219, 0.35) !important;
}

html body:not(.light-theme) .mobile-datalist-fallback button,
html body:not(.light-theme).light-background-active .mobile-datalist-fallback button,
html body:not(.light-theme)[style*="ffffff"] .mobile-datalist-fallback button,
html body:not(.light-theme)[style*="e2e8f0"] .mobile-datalist-fallback button,
html body:not(.light-theme)[style*="cbd5e0"] .mobile-datalist-fallback button {
    color: #ecf0f1 !important;
    -webkit-text-fill-color: #ecf0f1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

html body:not(.light-theme) .mobile-datalist-fallback button:hover,
html body:not(.light-theme) .mobile-datalist-fallback button:focus {
    background: #2f3e52 !important;
    background-color: #2f3e52 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Світла тема + light-bg: інпути панелі — темний текст (категорія/країна тощо) */
html body.light-theme.light-background-active .specialist-panel input,
html body.light-theme.light-background-active .specialist-panel select,
html body.light-theme.light-background-active .specialist-panel textarea,
html body.light-theme.light-background-active .specialist-panel input:focus,
html body.light-theme.light-background-active .specialist-panel select:focus,
html body.light-theme.light-background-active .specialist-panel textarea:focus,
html body.light-theme[style*="ffffff"] .specialist-panel input,
html body.light-theme[style*="ffffff"] .specialist-panel select,
html body.light-theme[style*="ffffff"] .specialist-panel textarea,
html body.light-theme[style*="e2e8f0"] .specialist-panel input,
html body.light-theme[style*="e2e8f0"] .specialist-panel select,
html body.light-theme[style*="e2e8f0"] .specialist-panel textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}