/* Dark Mode CSS for XinQi Website */

html[data-theme="dark"] {
    /* Core Colors */
    --primary-color: #3b82f6;           /* Blue-500 - slightly brighter in dark mode for better visibility */
    --primary-color-light: #1e3a8a;     /* Blue-900 - darker background for primary elements */
    --primary-color-dark: #60a5fa;      /* Blue-400 - lighter accent for dark mode */
    --secondary-color: #94a3b8;         /* Slate-400 - lighter secondary color */
    --link-color: #60a5fa;              /* Blue-400 - brighter links for dark mode */
    --link-hover-color: #93c5fd;        /* Blue-300 - even brighter on hover */
    --primary-link-color: #60a5fa;      /* Blue-400 - primary links */
    
    /* Backgrounds */
    --body-bg: #0f172a;                 /* Slate-900 - very dark background */
    --header-bg: #1e293b;               /* Slate-800 - slightly lighter header */
    --nav-text: #e2e8f0;                /* Slate-200 - light nav text */
    --nav-hover-bg: rgba(59, 130, 246, 0.2); /* Primary color with opacity */
    --footer-bg: #1e293b;               /* Slate-800 - dark footer */
    --footer-text: #cbd5e1;             /* Slate-300 - light footer text */
    
    /* Cards and UI Elements */
    --card-bg: #1e293b;                 /* Slate-800 - dark card background */
    --card-bg-light: #334155;           /* Slate-700 - slightly lighter card */
    --code-bg: #334155;                 /* Slate-700 - code background */
    --table-header-bg: #334155;         /* Slate-700 - table header */
    
    /* Text Colors */
    --text-color: #e2e8f0;              /* Slate-200 - light text for readability */
    --muted-text: #cbd5e1;              /* Slate-300 - slightly dimmed text */
    --light-text: #94a3b8;              /* Slate-400 - even more dimmed text */
    
    /* Borders */
    --border-color: #475569;            /* Slate-600 - visible but not stark borders */
    --light-border: #334155;            /* Slate-700 - subtle borders */
    
    /* Shadows */
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --hover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    
    /* Additional Variables */
    --bg-color: #0f172a;                /* Slate-900 - main background */
    --sidebar-border: #334155;          /* Slate-700 - sidebar borders */
    --h1-border: #334155;               /* Slate-700 - heading borders */
    --light-muted: #94a3b8;             /* Slate-400 - light muted text */
    --pre-border: #475569;              /* Slate-600 - code block borders */
    --table-border: #475569;            /* Slate-600 - table borders */
    --mobile-menu-bg: #1e293b;          /* Slate-800 - mobile menu background */
    --mobile-menu-text: #e2e8f0;        /* Slate-200 - mobile menu text */
    
    /* Set color scheme for browser */
    color-scheme: dark;
}

/* Core Element Overrides */
html[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

html[data-theme="dark"] a {
    color: var(--link-color);
}

html[data-theme="dark"] a:hover {
    color: var(--link-hover-color);
}

/* Header */
html[data-theme="dark"] header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] nav.navbar,
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .site-header {
    background: var(--header-bg) !important; /* Simpler background */
    border-bottom: 1px solid var(--border-color) !important; /* Use defined border color */
    box-shadow: none !important; /* No shadow */
}

html[data-theme="dark"] .top-nav a {
    color: var(--nav-text);
}

html[data-theme="dark"] .top-nav a:hover {
    background-color: var(--nav-hover-bg);
    color: var(--link-hover-color);
}

/* Content */
html[data-theme="dark"] .content {
    background-color: var(--bg-color);
}

/* Cards */
html[data-theme="dark"] .card, 
html[data-theme="dark"] .ai-tool-card, 
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .website-card,
html[data-theme="dark"] .tutorial-fixed-card,
html[data-theme="dark"] .resource-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Code Blocks */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: var(--code-bg);
    border-color: var(--pre-border);
}

/* Tables */
html[data-theme="dark"] table {
    border-color: var(--table-border);
}

html[data-theme="dark"] th {
    background-color: var(--table-header-bg);
}

html[data-theme="dark"] td {
    border-color: var(--table-border);
}

/* Sidebar */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] aside.sidebar,
html[data-theme="dark"] .side-nav {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] nav.side-nav {
    background-color: var(--bg-color) !important;
}

/* Footer - 暗色模式使用暗色背景设计 */
html[data-theme="dark"] footer {
    background-color: #1e293b;
    color: #cbd5e1;
    border-top: 1px solid #334155;
}

html[data-theme="dark"] .footer-content p {
    color: #cbd5e1;
}

html[data-theme="dark"] .footer-link {
    color: #cbd5e1;
}

html[data-theme="dark"] .footer-link:hover {
    color: #f1f5f9;
}

html[data-theme="dark"] .beian-link {
    color: #cbd5e1;
}

html[data-theme="dark"] .beian-link:hover {
    color: #f1f5f9;
}

/* Dark Mode Toggle Button - OSCHINA Style */
.theme-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.theme-toggle:hover {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Special Components */
html[data-theme="dark"] .search-input {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .navbar-search-form {
    background-color: var(--card-bg-light);
    border-color: var(--border-color);
}

/* AI tools specific */
html[data-theme="dark"] .ai-tool-icon {
    background-color: var(--card-bg-light);
    border-color: var(--border-color);
}

/* Ensure all text is visible in dark mode */
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
    color: var(--text-color);
}

/* 视频展示区域深色模式 */
html[data-theme="dark"] .featured-videos-container {
    background-color: var(--card-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .main-video-container {
    border-right-color: var(--border-color);
}

html[data-theme="dark"] .main-video-info {
    background-color: var(--card-bg-light);
    border-top-color: var(--border-color);
}

html[data-theme="dark"] .main-video-title {
    color: var(--text-color);
}

html[data-theme="dark"] .main-video-meta {
    color: var(--muted-text);
}

html[data-theme="dark"] .btn-control {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

html[data-theme="dark"] .btn-control:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--link-color);
}

html[data-theme="dark"] .video-thumbnails-container {
    background-color: var(--card-bg-light);
}

html[data-theme="dark"] .video-thumbnails-label {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .video-thumbnail-item {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .video-thumbnail-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .video-thumbnail-item.active {
    background-color: rgba(59, 130, 246, 0.2);
    border-left-color: var(--primary-color);
}

html[data-theme="dark"] .video-number {
    background-color: var(--card-bg);
    color: var(--text-color);
}

html[data-theme="dark"] .video-thumbnail-item.active .video-number {
    background-color: var(--primary-color);
    color: white;
}

html[data-theme="dark"] .video-thumbnail-title {
    color: var(--text-color);
}

html[data-theme="dark"] .video-thumbnail-source {
    color: var(--muted-text);
}

/* 左边栏组件深色模式 */
html[data-theme="dark"] .sidebar-profile,
html[data-theme="dark"] .sidebar-widget,
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .left-sidebar-widget {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .sidebar-title,
html[data-theme="dark"] .widget-title {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .profile-info h3 {
    color: var(--text-color);
}

html[data-theme="dark"] .profile-motto {
    color: var(--muted-text);
}

html[data-theme="dark"] .profile-intro {
    color: var(--muted-text);
    border-color: var(--border-color);
}

html[data-theme="dark"] .daily-tip-widget .card-header {
    background-color: var(--card-bg-light) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .daily-tip-widget .card-body {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .tip-title {
    color: var(--text-color);
}

html[data-theme="dark"] .tip-content {
    color: var(--muted-text);
}

html[data-theme="dark"] .baidu-search-widget {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .baidu-search-input {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 卡片、按钮和其他UI元素深色模式调整 */
html[data-theme="dark"] .tools-container,
html[data-theme="dark"] .tools-section,
html[data-theme="dark"] .jy-tool-item,
html[data-theme="dark"] .category-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--card-bg-light) !important;
}

/* 深色模式下的mega-menu优化 */
html[data-theme="dark"] .mega-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item {
    color: var(--text-color) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item i {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08)) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover i {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}

/* 深色模式下特定编程语言图标保持原色 */
html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-python {
    background: linear-gradient(135deg, #3776ab, #ffd43b) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-java {
    background: linear-gradient(135deg, #f89820, #ed8b00) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-html5 {
    background: linear-gradient(135deg, #e34f26, #f06529) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-js {
    background: linear-gradient(135deg, #f7df1e, #f0db4f) !important;
    color: #323330 !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-css3-alt {
    background: linear-gradient(135deg, #1572b6, #33a9dc) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-git-alt {
    background: linear-gradient(135deg, #f05032, #f14e32) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-database {
    background: linear-gradient(135deg, #4479a1, #00758f) !important;
    color: white !important;
}

html[data-theme="dark"] .mega-menu .dropdown-item:hover .fa-php {
    background: linear-gradient(135deg, #777bb4, #8892bf) !important;
    color: white !important;
}

/* 首页其他部分的深色模式 */
html[data-theme="dark"] .homepage-hero {
    background-color: var(--card-bg-light);
}

html[data-theme="dark"] .homepage-hero h1,
html[data-theme="dark"] .homepage-hero .subtitle {
    color: var(--text-color);
}

html[data-theme="dark"] .section-title {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
}

html[data-theme="dark"] .latest-list {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .latest-list-item {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .latest-list-item:hover {
    background-color: var(--card-bg-light);
}

html[data-theme="dark"] .latest-list-item a {
    color: var(--text-color);
}

html[data-theme="dark"] .latest-list-item .date {
    color: var(--muted-text);
}

/* 公告样式 */
html[data-theme="dark"] .site-announcement {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

/* 确保所有容器背景色正确 */
html[data-theme="dark"] .container,
html[data-theme="dark"] .three-column-container {
    background-color: var(--bg-color);
}

/* 右侧边栏 */
html[data-theme="dark"] .right-sidebar {
    background-color: var(--bg-color);
}

html[data-theme="dark"] .right-features-area {
    background-color: var(--bg-color);
}

html[data-theme="dark"] .features-sidebar {
    background-color: var(--card-bg);
}

/* AI工具区域 */
html[data-theme="dark"] #ai-tools a {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] #ai-tools .ai-tool-logo {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
}

/* 轮播区域 */
html[data-theme="dark"] #homePageCarousel .carousel-caption {
    background-color: rgba(15, 23, 42, 0.6);
}

/* 表单元素 */
html[data-theme="dark"] input, 
html[data-theme="dark"] textarea, 
html[data-theme="dark"] select {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] input::placeholder {
    color: var(--muted-text) !important;
}

/* 确保所有可能的白色背景元素都被覆盖 */
html[data-theme="dark"] .tools-container .navbar-search-form,
html[data-theme="dark"] .tools-container .search-input,
html[data-theme="dark"] .tools-container .btn-search {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 左边栏深色模式样式增强 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .card-header {
    background-color: var(--card-bg-light) !important;
}

html[data-theme="dark"] .widget-title {
    color: var(--text-color) !important;
}

/* 技术书籍轮播 */
html[data-theme="dark"] .book-slide {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .book-slide-link:hover .book-slide {
    background-color: var(--card-bg-light) !important;
}

html[data-theme="dark"] .book-cover-container {
    background-color: var(--card-bg-light);
    border-color: var(--border-color);
}

html[data-theme="dark"] .book-title-compact {
    color: var(--text-color);
}

html[data-theme="dark"] .book-view-more {
    color: var(--link-color);
}

html[data-theme="dark"] .book-no-cover {
    background-color: var(--card-bg-light);
    color: var(--text-color);
}

html[data-theme="dark"] .carousel-control-prev-icon,
html[data-theme="dark"] .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 每日编程小贴士 */
html[data-theme="dark"] .daily-tip {
    background-color: var(--card-bg);
}

html[data-theme="dark"] .quote-icon {
    color: var(--muted-text);
}

/* 百度搜索框 */
html[data-theme="dark"] .search-input-wrapper {
    background-color: var(--card-bg-light);
    border-color: var(--border-color);
}

html[data-theme="dark"] .baidu-search-input {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
}

/* 搜索引擎链接 */
html[data-theme="dark"] .sidebar-search-engines-list {
    background-color: var(--card-bg);
}

html[data-theme="dark"] .sidebar-search-engine-item {
    background-color: var(--card-bg-light);
    color: var(--text-color);
}

html[data-theme="dark"] .sidebar-search-engine-item:hover {
    background-color: var(--card-bg);
}

html[data-theme="dark"] .sidebar-search-engine-item span {
    color: var(--text-color);
}

/* 技术资源链接 */
html[data-theme="dark"] .resource-links-widget .list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .resource-item a {
    color: #6ca0f6 !important;
    font-weight: 500;
}

html[data-theme="dark"] .resource-item a:hover {
    /* 移除背景变色效果 */
}

html[data-theme="dark"] .resource-title {
    color: #6ca0f6;
}

html[data-theme="dark"] .text-muted {
    color: var(--muted-text) !important;
}

/* Bootstrap组件覆盖 */
html[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .list-group-flush {
    border-color: var(--border-color) !important;
}

/* 修复首页其他可能的白色背景 */
html[data-theme="dark"] .tutorials-fixed-grid .tutorial-fixed-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .tutorial-fixed-image {
    background-color: var(--card-bg-light);
}

html[data-theme="dark"] .tutorial-fixed-content h3 {
    color: var(--text-color);
}

html[data-theme="dark"] .tutorial-fixed-description {
    color: var(--muted-text);
}

/* 视频轮播深色模式增强 */
html[data-theme="dark"] .carousel-item .carousel-image {
    filter: brightness(0.85);
}

/* 公告深色模式增强 */
html[data-theme="dark"] .announcement-item {
    color: var(--text-color);
}

html[data-theme="dark"] .announcement-title {
    color: var(--text-color);
}

html[data-theme="dark"] .announcement-message {
    color: var(--muted-text);
}

/* 重设部分图标和文字颜色 */
html[data-theme="dark"] .text-warning {
    color: #f59e0b !important;
}

html[data-theme="dark"] .fas.fa-lightbulb {
    color: #f59e0b !important;
}

html[data-theme="dark"] i.fas, 
html[data-theme="dark"] i.far, 
html[data-theme="dark"] i.fab {
    color: var(--muted-text);
}

/* 修复额外的背景问题 */
html[data-theme="dark"] .sidebar-widget,
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .profile-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 使用更高优先级选择器确保覆盖 */
html[data-theme="dark"] body .sidebar * {
    border-color: var(--border-color) !important;
}

/* 确保任何内嵌样式也被覆盖 */
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
}

/* 修复编程教程页面深色模式 */
html[data-theme="dark"] .tutorial-page-container,
html[data-theme="dark"] .tutorial-content,
html[data-theme="dark"] .tutorial-main-content,
html[data-theme="dark"] .tutorial-sidebar,
html[data-theme="dark"] .tutorial-toc,
html[data-theme="dark"] .tutorial-navigation,
html[data-theme="dark"] .programming-tutorials,
html[data-theme="dark"] .tutorial-wrapper,
html[data-theme="dark"] .tutorial-container,
html[data-theme="dark"] .tutorial-page,
html[data-theme="dark"] .programming-content,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] article.content,
html[data-theme="dark"] div.content,
html[data-theme="dark"] main.content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复教程页面左边栏内容区域白色背景 */
html[data-theme="dark"] aside nav,
html[data-theme="dark"] .side-menu,
html[data-theme="dark"] .tutorial-sidebar nav,
html[data-theme="dark"] .sidebar-menu,
html[data-theme="dark"] .sidebar-nav,
html[data-theme="dark"] .nav-sidebar,
html[data-theme="dark"] .left-nav,
html[data-theme="dark"] #sidebar-menu,
html[data-theme="dark"] .vertical-menu,
html[data-theme="dark"] .course-menu,
html[data-theme="dark"] .nav-list,
html[data-theme="dark"] .chapter-list,
html[data-theme="dark"] .tutorial-menu,
html[data-theme="dark"] .tutorial-nav,
html[data-theme="dark"] .tutorial-sidebar-menu,
html[data-theme="dark"] .toc-container,
html[data-theme="dark"] .tutorial-left-nav,
html[data-theme="dark"] .tutorial-categories,
html[data-theme="dark"] .tutorial-sections,
html[data-theme="dark"] .tutorial-toc-menu {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复Python教程特定的左侧导航 */
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] aside a,
html[data-theme="dark"] .side-nav a,
html[data-theme="dark"] nav a,
html[data-theme="dark"] .tutorial-sidebar a,
html[data-theme="dark"] .tutorial-menu a,
html[data-theme="dark"] .tutorial-nav a,
html[data-theme="dark"] .tutorial-sidebar-menu a,
html[data-theme="dark"] .tutorial-toc a,
html[data-theme="dark"] .tutorial-navigation a {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] aside a:hover,
html[data-theme="dark"] .side-nav a:hover,
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] .tutorial-sidebar a:hover,
html[data-theme="dark"] .tutorial-menu a:hover,
html[data-theme="dark"] .tutorial-nav a:hover,
html[data-theme="dark"] .tutorial-sidebar-menu a:hover,
html[data-theme="dark"] .tutorial-toc a:hover,
html[data-theme="dark"] .tutorial-navigation a:hover {
    /* 简化悬停效果，只保留颜色变化 */
    color: var(--link-hover-color) !important;
}

/* 使用更强的选择器覆盖所有可能的白色背景 */
html[data-theme="dark"] body .sidebar *,
html[data-theme="dark"] body aside *,
html[data-theme="dark"] body .side-nav *,
html[data-theme="dark"] body nav.sidebar *,
html[data-theme="dark"] body .tutorial-sidebar * {
    background-color: inherit;
}

/* 特别针对嵌套菜单项 */
html[data-theme="dark"] .sidebar ul,
html[data-theme="dark"] .sidebar li,
html[data-theme="dark"] .sidebar ol,
html[data-theme="dark"] aside ul,
html[data-theme="dark"] aside li,
html[data-theme="dark"] aside ol,
html[data-theme="dark"] .side-nav ul,
html[data-theme="dark"] .side-nav li,
html[data-theme="dark"] .side-nav ol,
html[data-theme="dark"] nav ul,
html[data-theme="dark"] nav li,
html[data-theme="dark"] nav ol,
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .tutorial-category,
html[data-theme="dark"] .tutorial-category-item,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .tutorial-sidebar .list-group,
html[data-theme="dark"] .tutorial-sidebar .list-group-item,
html[data-theme="dark"] .category-list,
html[data-theme="dark"] .category-item,
html[data-theme="dark"] .tutorial-categories-list,
html[data-theme="dark"] .tutorial-category-list,
html[data-theme="dark"] .sidebar-category,
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 极端情况：强制所有可能的白色背景元素 */
html[data-theme="dark"] [class*="sidebar"],
html[data-theme="dark"] [class*="side-nav"],
html[data-theme="dark"] [class*="side-menu"],
html[data-theme="dark"] [class*="nav-sidebar"],
html[data-theme="dark"] [id*="sidebar"],
html[data-theme="dark"] [id*="side-nav"],
html[data-theme="dark"] [id*="side-menu"],
html[data-theme="dark"] [id*="nav-sidebar"] {
    background-color: var(--bg-color) !important;
}

/* 针对截图中显示的Python教程特定样式 */
html[data-theme="dark"] .python-menu,
html[data-theme="dark"] .python-sidebar,
html[data-theme="dark"] .python-nav,
html[data-theme="dark"] [class*="python"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 修复折叠菜单展开状态 */
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--card-bg-light) !important;
    color: var(--primary-color-dark) !important;
}

html[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* 增强右侧内容区域字体可见度 */
html[data-theme="dark"] .tutorial-content p,
html[data-theme="dark"] .tutorial-content li,
html[data-theme="dark"] .tutorial-content span,
html[data-theme="dark"] .tutorial-content div,
html[data-theme="dark"] .programming-content p,
html[data-theme="dark"] .programming-content li,
html[data-theme="dark"] .programming-content span,
html[data-theme="dark"] .programming-content div,
html[data-theme="dark"] .content-area p,
html[data-theme="dark"] .content-area li,
html[data-theme="dark"] .content-area span,
html[data-theme="dark"] .content-area div,
html[data-theme="dark"] .main-content p,
html[data-theme="dark"] .main-content li,
html[data-theme="dark"] .main-content span,
html[data-theme="dark"] .main-content div {
    color: var(--text-color) !important;
}

/* 增强右侧内容区域代码块可见度 */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] .code-block,
html[data-theme="dark"] .code-example,
html[data-theme="dark"] .syntax-highlight {
    background-color: #1a2234 !important;
    color: #e2e8f0 !important;
    border-color: var(--border-color) !important;
}

/* 确保链接在深色背景下明显可见 */
html[data-theme="dark"] .tutorial-content a,
html[data-theme="dark"] .programming-content a,
html[data-theme="dark"] .main-content a,
html[data-theme="dark"] .content-area a {
    color: var(--primary-color-dark) !important;
    text-decoration: underline;
}

html[data-theme="dark"] .tutorial-content a:hover,
html[data-theme="dark"] .programming-content a:hover,
html[data-theme="dark"] .main-content a:hover,
html[data-theme="dark"] .content-area a:hover {
    color: var(--link-hover-color) !important;
}

/* 修复特殊样式的区块 */
html[data-theme="dark"] .note-block,
html[data-theme="dark"] .tip-block,
html[data-theme="dark"] .warning-block,
html[data-theme="dark"] .info-block,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .card {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
}

/* 确保覆盖任何可能的白色背景 */
html[data-theme="dark"] .row,
html[data-theme="dark"] .container .row,
html[data-theme="dark"] .container-fluid .row,
html[data-theme="dark"] .col,
html[data-theme="dark"] .col-md-8,
html[data-theme="dark"] .col-md-4,
html[data-theme="dark"] .col-lg-9,
html[data-theme="dark"] .col-lg-3 {
    background-color: var(--bg-color) !important;
}

/* 修复教程页面左边栏主分类的白色背景 */
html[data-theme="dark"] .sidebar > ul > li,
html[data-theme="dark"] .sidebar > ul > li > a,
html[data-theme="dark"] .sidebar > nav > ul > li,
html[data-theme="dark"] .sidebar > nav > ul > li > a,
html[data-theme="dark"] .side-nav > ul > li,
html[data-theme="dark"] .side-nav > ul > li > a,
html[data-theme="dark"] .tutorial-sidebar > ul > li,
html[data-theme="dark"] .tutorial-sidebar > ul > li > a,
html[data-theme="dark"] .tutorial-nav > ul > li,
html[data-theme="dark"] .tutorial-nav > ul > li > a,
html[data-theme="dark"] .tutorial-menu > ul > li,
html[data-theme="dark"] .tutorial-menu > ul > li > a,
html[data-theme="dark"] aside > ul > li,
html[data-theme="dark"] aside > ul > li > a,
html[data-theme="dark"] aside > nav > ul > li,
html[data-theme="dark"] aside > nav > ul > li > a,
html[data-theme="dark"] .category-heading,
html[data-theme="dark"] .parent-category,
html[data-theme="dark"] .tutorial-category-heading,
html[data-theme="dark"] .main-category,
html[data-theme="dark"] .top-level-item,
html[data-theme="dark"] .tutorial-parent-item {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 针对直接使用标签选择器的元素 */
html[data-theme="dark"] li a.active,
html[data-theme="dark"] li a.expanded,
html[data-theme="dark"] li.expanded,
html[data-theme="dark"] li.active,
html[data-theme="dark"] li.open,
html[data-theme="dark"] li.selected {
    background-color: var(--nav-hover-bg) !important;
    color: var(--link-hover-color) !important;
}

/* 为主类别导航添加悬停效果 */
html[data-theme="dark"] .sidebar > ul > li:hover,
html[data-theme="dark"] .sidebar > ul > li > a:hover,
html[data-theme="dark"] .side-nav > ul > li:hover,
html[data-theme="dark"] .side-nav > ul > li > a:hover,
html[data-theme="dark"] .tutorial-sidebar > ul > li:hover,
html[data-theme="dark"] .tutorial-sidebar > ul > li > a:hover,
html[data-theme="dark"] aside > ul > li:hover,
html[data-theme="dark"] aside > ul > li > a:hover {
    /* 简化悬停效果，只保留颜色变化 */
    color: var(--link-hover-color) !important;
}

/* 强制覆盖可能的内联样式 */
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
}

/* 深色模式的白色背景图标反转 */
html[data-theme="dark"] .nav-icon,
html[data-theme="dark"] .menu-icon,
html[data-theme="dark"] .category-icon,
html[data-theme="dark"] .expand-icon,
html[data-theme="dark"] .collapse-icon {
    filter: invert(1);
}

/* 修复工具箱页面顶部区域的白色背景 */
html[data-theme="dark"] .tools-header,
html[data-theme="dark"] .tools-description,
html[data-theme="dark"] .tools-intro,
html[data-theme="dark"] .tools-banner,
html[data-theme="dark"] .tools-title-area,
html[data-theme="dark"] .tools-header-container,
html[data-theme="dark"] .tools-hero,
html[data-theme="dark"] .tools-jumbotron,
html[data-theme="dark"] .tools-section-header,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .page-description,
html[data-theme="dark"] .page-intro,
html[data-theme="dark"] .intro-section,
html[data-theme="dark"] .header-section,
html[data-theme="dark"] .description-area,
html[data-theme="dark"] .section-heading-container,
html[data-theme="dark"] .toolbox-intro,
html[data-theme="dark"] .toolbox-description,
html[data-theme="dark"] .toolbox-header {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复工具箱页面内容区域 */
html[data-theme="dark"] .tools-content,
html[data-theme="dark"] .tools-grid,
html[data-theme="dark"] .tools-list,
html[data-theme="dark"] .toolbox-container,
html[data-theme="dark"] .tool-category-section,
html[data-theme="dark"] .tool-listing,
html[data-theme="dark"] .tool-gallery,
html[data-theme="dark"] .tools-collection,
html[data-theme="dark"] .tools-showcase {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 确保工具箱中的卡片和项目也具有正确的背景色 */
html[data-theme="dark"] .tool-item,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .tool-box,
html[data-theme="dark"] .tool-entry,
html[data-theme="dark"] .tool-widget {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 确保页面主体容器也有深色背景 */
html[data-theme="dark"] .page-container,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .main-container,
html[data-theme="dark"] main,
html[data-theme="dark"] article,
html[data-theme="dark"] section {
    background-color: var(--bg-color) !important;
}

/* 修复AI工具专区顶部文字描述区域的白色背景 */
html[data-theme="dark"] .ai-tools-header,
html[data-theme="dark"] .ai-tools-description,
html[data-theme="dark"] .ai-tools-intro,
html[data-theme="dark"] .ai-tools-banner,
html[data-theme="dark"] .ai-tools-section,
html[data-theme="dark"] .ai-tools-container,
html[data-theme="dark"] .ai-header,
html[data-theme="dark"] .ai-description,
html[data-theme="dark"] .ai-banner,
html[data-theme="dark"] .ai-intro,
html[data-theme="dark"] .ai-section,
html[data-theme="dark"] .ai-container,
html[data-theme="dark"] .ai-tools-title-area,
html[data-theme="dark"] .ai-tools-heading,
html[data-theme="dark"] .ai-heading,
html[data-theme="dark"] #ai-tools-header,
html[data-theme="dark"] #ai-tools-description,
html[data-theme="dark"] #ai-tools-section,
html[data-theme="dark"] #ai-tools-intro,
html[data-theme="dark"] .ai-tools-hero,
html[data-theme="dark"] .ai-hero,
html[data-theme="dark"] .ai-jumbotron,
html[data-theme="dark"] .tools-ai-section,
html[data-theme="dark"] .tools-ai-header,
html[data-theme="dark"] .tools-ai-description,
html[data-theme="dark"] [class*="ai-tools"],
html[data-theme="dark"] [class*="ai-section"],
html[data-theme="dark"] [id*="ai-tools"],
html[data-theme="dark"] [id*="ai-section"],
html[data-theme="dark"] .page-header.ai,
html[data-theme="dark"] .section-header.ai,
html[data-theme="dark"] .description-container.ai {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复AI工具专区中的卡片和项目 */
html[data-theme="dark"] .ai-tool-item,
html[data-theme="dark"] .ai-item,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .ai-box,
html[data-theme="dark"] .ai-tool-card,
html[data-theme="dark"] .ai-tools-item,
html[data-theme="dark"] .ai-tools-card,
html[data-theme="dark"] .ai-tool-box,
html[data-theme="dark"] [class*="ai-tool-"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important; /* Ensure a clean border */
    color: var(--text-color) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
}

/* 确保AI工具区域内的所有元素都有正确的颜色 */
html[data-theme="dark"] [class*="ai-tool"] *,
html[data-theme="dark"] [class*="ai-tools"] *,
html[data-theme="dark"] [id*="ai-tool"] *,
html[data-theme="dark"] [id*="ai-tools"] * {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important; /* Keep existing border color rule */
    background-color: transparent !important; /* Ensure transparent background for children unless specified */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
}

/* 修复任何可能的白色背景元素 */
html[data-theme="dark"] [class*="header-section"],
html[data-theme="dark"] [class*="description-section"],
html[data-theme="dark"] [class*="intro-section"],
html[data-theme="dark"] [class*="banner-section"],
html[data-theme="dark"] [class*="hero-section"],
html[data-theme="dark"] [class*="section-header"],
html[data-theme="dark"] [class*="section-description"],
html[data-theme="dark"] [class*="section-intro"],
html[data-theme="dark"] [class*="section-banner"],
html[data-theme="dark"] [class*="section-hero"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复AI工具详情页面内容区域的白色背景 */
html[data-theme="dark"] .ai-tool-detail,
html[data-theme="dark"] .ai-tool-content,
html[data-theme="dark"] .ai-tool-description,
html[data-theme="dark"] .ai-tool-info,
html[data-theme="dark"] .ai-tool-page,
html[data-theme="dark"] .ai-detail,
html[data-theme="dark"] .ai-detail-page,
html[data-theme="dark"] .ai-detail-content,
html[data-theme="dark"] .ai-detail-description,
html[data-theme="dark"] .ai-content,
html[data-theme="dark"] .ai-description,
html[data-theme="dark"] .ai-info,
html[data-theme="dark"] .tool-detail,
html[data-theme="dark"] .tool-detail-page,
html[data-theme="dark"] .tool-detail-content,
html[data-theme="dark"] .tool-detail-description,
html[data-theme="dark"] .tool-content,
html[data-theme="dark"] .tool-description,
html[data-theme="dark"] .tool-info,
html[data-theme="dark"] [class*="ai-tool-detail"],
html[data-theme="dark"] [class*="ai-detail"],
html[data-theme="dark"] [class*="tool-detail"],
html[data-theme="dark"] [id*="ai-tool-detail"],
html[data-theme="dark"] [id*="ai-detail"],
html[data-theme="dark"] [id*="tool-detail"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复AI工具详情页中的各个部分 */
html[data-theme="dark"] .ai-tool-features,
html[data-theme="dark"] .ai-tool-specs,
html[data-theme="dark"] .ai-tool-usage,
html[data-theme="dark"] .ai-tool-examples,
html[data-theme="dark"] .ai-tool-screenshots,
html[data-theme="dark"] .ai-tool-ratings,
html[data-theme="dark"] .ai-tool-reviews,
html[data-theme="dark"] .ai-tool-alternatives,
html[data-theme="dark"] .ai-tool-pricing,
html[data-theme="dark"] .ai-tool-related,
html[data-theme="dark"] .ai-features,
html[data-theme="dark"] .ai-specs,
html[data-theme="dark"] .ai-usage,
html[data-theme="dark"] .ai-examples,
html[data-theme="dark"] .ai-screenshots,
html[data-theme="dark"] .ai-ratings,
html[data-theme="dark"] .ai-reviews,
html[data-theme="dark"] .ai-alternatives,
html[data-theme="dark"] .ai-pricing,
html[data-theme="dark"] .ai-related,
html[data-theme="dark"] [class*="detail-section"],
html[data-theme="dark"] [class*="detail-container"],
html[data-theme="dark"] [class*="detail-content"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 修复详情页内的卡片、面板和块 */
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .detail-block,
html[data-theme="dark"] .detail-box,
html[data-theme="dark"] .ai-detail-card,
html[data-theme="dark"] .ai-detail-panel,
html[data-theme="dark"] .ai-detail-block,
html[data-theme="dark"] .ai-detail-box,
html[data-theme="dark"] .ai-tool-detail-card,
html[data-theme="dark"] .ai-tool-detail-panel,
html[data-theme="dark"] .ai-tool-detail-block,
html[data-theme="dark"] .ai-tool-detail-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 确保详情页面所有内容容器都有深色背景 */
html[data-theme="dark"] article,
html[data-theme="dark"] .article,
html[data-theme="dark"] main,
html[data-theme="dark"] .main,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .blog-content,
html[data-theme="dark"] .post-content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 特殊处理内容区域的所有直接子元素 */
html[data-theme="dark"] .content > *,
html[data-theme="dark"] .content-area > *,
html[data-theme="dark"] .main-content > *,
html[data-theme="dark"] article > *,
html[data-theme="dark"] main > * {
    background-color: inherit;
    color: var(--text-color) !important;
}

/* 修复关于我们页面文字颜色 */
html[data-theme="dark"] .about-us,
html[data-theme="dark"] .about-page,
html[data-theme="dark"] .about-content,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .about-container,
html[data-theme="dark"] [class*="about-us"],
html[data-theme="dark"] [class*="about-page"],
html[data-theme="dark"] [id*="about-us"],
html[data-theme="dark"] [id*="about-page"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 确保关于我们页面所有文本元素都是白色 */
html[data-theme="dark"] .about-us p,
html[data-theme="dark"] .about-us span,
html[data-theme="dark"] .about-us div,
html[data-theme="dark"] .about-us li,
html[data-theme="dark"] .about-us td,
html[data-theme="dark"] .about-us th,
html[data-theme="dark"] .about-us blockquote,
html[data-theme="dark"] .about-us h1,
html[data-theme="dark"] .about-us h2,
html[data-theme="dark"] .about-us h3,
html[data-theme="dark"] .about-us h4,
html[data-theme="dark"] .about-us h5,
html[data-theme="dark"] .about-us h6,
html[data-theme="dark"] .about-page p,
html[data-theme="dark"] .about-page span,
html[data-theme="dark"] .about-page div,
html[data-theme="dark"] .about-page li,
html[data-theme="dark"] .about-page td,
html[data-theme="dark"] .about-page th,
html[data-theme="dark"] .about-page blockquote,
html[data-theme="dark"] .about-page h1,
html[data-theme="dark"] .about-page h2,
html[data-theme="dark"] .about-page h3,
html[data-theme="dark"] .about-page h4,
html[data-theme="dark"] .about-page h5,
html[data-theme="dark"] .about-page h6,
html[data-theme="dark"] .about-content p,
html[data-theme="dark"] .about-content span,
html[data-theme="dark"] .about-content div,
html[data-theme="dark"] .about-content li,
html[data-theme="dark"] .about-content td,
html[data-theme="dark"] .about-content th,
html[data-theme="dark"] .about-content blockquote,
html[data-theme="dark"] .about-content h1,
html[data-theme="dark"] .about-content h2,
html[data-theme="dark"] .about-content h3,
html[data-theme="dark"] .about-content h4,
html[data-theme="dark"] .about-content h5,
html[data-theme="dark"] .about-content h6,
html[data-theme="dark"] .about-section p,
html[data-theme="dark"] .about-section span,
html[data-theme="dark"] .about-section div,
html[data-theme="dark"] .about-section li,
html[data-theme="dark"] .about-section td,
html[data-theme="dark"] .about-section th,
html[data-theme="dark"] .about-section blockquote,
html[data-theme="dark"] .about-section h1,
html[data-theme="dark"] .about-section h2,
html[data-theme="dark"] .about-section h3,
html[data-theme="dark"] .about-section h4,
html[data-theme="dark"] .about-section h5,
html[data-theme="dark"] .about-section h6 {
    color: #ffffff !important;  /* 使用纯白色以确保最大可读性 */
}

/* 更通用的选择器来覆盖所有可能的情况 */
html[data-theme="dark"] [class*="about"] p,
html[data-theme="dark"] [class*="about"] span,
html[data-theme="dark"] [class*="about"] div,
html[data-theme="dark"] [class*="about"] li,
html[data-theme="dark"] [class*="about"] h1,
html[data-theme="dark"] [class*="about"] h2,
html[data-theme="dark"] [class*="about"] h3,
html[data-theme="dark"] [class*="about"] h4,
html[data-theme="dark"] [class*="about"] h5,
html[data-theme="dark"] [class*="about"] h6,
html[data-theme="dark"] [id*="about"] p,
html[data-theme="dark"] [id*="about"] span,
html[data-theme="dark"] [id*="about"] div,
html[data-theme="dark"] [id*="about"] li,
html[data-theme="dark"] [id*="about"] h1,
html[data-theme="dark"] [id*="about"] h2,
html[data-theme="dark"] [id*="about"] h3,
html[data-theme="dark"] [id*="about"] h4,
html[data-theme="dark"] [id*="about"] h5,
html[data-theme="dark"] [id*="about"] h6 {
    color: #ffffff !important;
}

/* 确保链接也有适当的颜色 */
html[data-theme="dark"] [class*="about"] a {
    color: var(--primary-color-dark) !important;
    text-decoration: underline;
}

html[data-theme="dark"] [class*="about"] a:hover {
    color: var(--link-hover-color) !important;
}

/* 修复博客列表页面介绍文字颜色 */
html[data-theme="dark"] .blog-list,
html[data-theme="dark"] .blog-index,
html[data-theme="dark"] .blog-archive,
html[data-theme="dark"] .blog-grid,
html[data-theme="dark"] .blog-container,
html[data-theme="dark"] .blog-section,
html[data-theme="dark"] .blogs-container,
html[data-theme="dark"] .blogs-list,
html[data-theme="dark"] .posts-list,
html[data-theme="dark"] .posts-container,
html[data-theme="dark"] .articles-list,
html[data-theme="dark"] .articles-container,
html[data-theme="dark"] [class*="blog-list"],
html[data-theme="dark"] [class*="blog-index"],
html[data-theme="dark"] [class*="blog-archive"],
html[data-theme="dark"] [id*="blog-list"],
html[data-theme="dark"] [id*="blog-container"],
html[data-theme="dark"] [id*="posts"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 博客列表页面介绍文字和描述 */
html[data-theme="dark"] .blog-intro,
html[data-theme="dark"] .blog-description,
html[data-theme="dark"] .blog-header,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .blog-banner,
html[data-theme="dark"] .blog-welcome,
html[data-theme="dark"] .blog-section-header,
html[data-theme="dark"] .blog-section-intro,
html[data-theme="dark"] .posts-intro,
html[data-theme="dark"] .posts-description,
html[data-theme="dark"] .posts-header,
html[data-theme="dark"] .articles-intro,
html[data-theme="dark"] .articles-description,
html[data-theme="dark"] .articles-header,
html[data-theme="dark"] [class*="blog-intro"],
html[data-theme="dark"] [class*="blog-desc"],
html[data-theme="dark"] [class*="blog-header"],
html[data-theme="dark"] [class*="posts-intro"],
html[data-theme="dark"] [class*="posts-desc"],
html[data-theme="dark"] [id*="blog-intro"],
html[data-theme="dark"] [id*="blog-desc"],
html[data-theme="dark"] [id*="blog-header"] {
    background-color: var(--bg-color) !important;
    color: #ffffff !important;
}

/* 确保博客列表页面所有文本元素都是白色 */
html[data-theme="dark"] .blog-intro p,
html[data-theme="dark"] .blog-intro span,
html[data-theme="dark"] .blog-intro div,
html[data-theme="dark"] .blog-intro h1,
html[data-theme="dark"] .blog-intro h2,
html[data-theme="dark"] .blog-intro h3,
html[data-theme="dark"] .blog-intro h4,
html[data-theme="dark"] .blog-intro h5,
html[data-theme="dark"] .blog-intro h6,
html[data-theme="dark"] .blog-description p,
html[data-theme="dark"] .blog-description span,
html[data-theme="dark"] .blog-description div,
html[data-theme="dark"] .blog-description h1,
html[data-theme="dark"] .blog-description h2,
html[data-theme="dark"] .blog-description h3,
html[data-theme="dark"] .blog-description h4,
html[data-theme="dark"] .blog-description h5,
html[data-theme="dark"] .blog-description h6,
html[data-theme="dark"] .blog-header p,
html[data-theme="dark"] .blog-header span,
html[data-theme="dark"] .blog-header div,
html[data-theme="dark"] .posts-intro p,
html[data-theme="dark"] .posts-intro span,
html[data-theme="dark"] .posts-intro div,
html[data-theme="dark"] .posts-intro h1,
html[data-theme="dark"] .posts-intro h2,
html[data-theme="dark"] .posts-intro h3,
html[data-theme="dark"] .posts-intro h4,
html[data-theme="dark"] .posts-intro h5,
html[data-theme="dark"] .posts-intro h6,
html[data-theme="dark"] .posts-description p,
html[data-theme="dark"] .posts-description span,
html[data-theme="dark"] .posts-description div {
    color: #ffffff !important;
}

/* 更通用的选择器来覆盖所有可能的博客介绍文字 */
html[data-theme="dark"] [class*="blog"] .intro,
html[data-theme="dark"] [class*="blog"] .description,
html[data-theme="dark"] [class*="blog"] .summary,
html[data-theme="dark"] [class*="blog"] .header-text,
html[data-theme="dark"] [class*="post"] .intro,
html[data-theme="dark"] [class*="post"] .description,
html[data-theme="dark"] [class*="post"] .summary,
html[data-theme="dark"] [class*="post"] .header-text,
html[data-theme="dark"] [class*="article"] .intro,
html[data-theme="dark"] [class*="article"] .description,
html[data-theme="dark"] [class*="article"] .summary,
html[data-theme="dark"] [class*="article"] .header-text {
    color: #ffffff !important;
}

/* 确保博客列表中的卡片和项目也具有正确的背景色 */
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-item,
html[data-theme="dark"] .blog-post-card,
html[data-theme="dark"] .blog-article-card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post-item,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .article-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* 强制设置博客列表页面所有文字为白色 - 更高优先级规则 */
html[data-theme="dark"] .blog-list *,
html[data-theme="dark"] .blog-index *,
html[data-theme="dark"] .blog-archive *,
html[data-theme="dark"] .blog-container *,
html[data-theme="dark"] .blog-section *,
html[data-theme="dark"] .blogs-container *,
html[data-theme="dark"] .blogs-list *,
html[data-theme="dark"] .posts-list *,
html[data-theme="dark"] .posts-container *,
html[data-theme="dark"] .articles-list *,
html[data-theme="dark"] .articles-container *,
html[data-theme="dark"] .blog-content *,
html[data-theme="dark"] .posts-content *,
html[data-theme="dark"] .blog-wrapper *,
html[data-theme="dark"] .posts-wrapper *,
html[data-theme="dark"] #blog-list *,
html[data-theme="dark"] #blog-container *,
html[data-theme="dark"] #posts-list *,
html[data-theme="dark"] #posts-container * {
    color: #ffffff !important;
}

/* 特别关注可能存在的介绍段落和文字 */
html[data-theme="dark"] p,
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] em,
html[data-theme="dark"] small,
html[data-theme="dark"] address,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] time {
    color: var(--text-color) !important;
}

/* 针对博客页面的特定选择器 */
html[data-theme="dark"] body.blog p,
html[data-theme="dark"] body.blog h1,
html[data-theme="dark"] body.blog h2,
html[data-theme="dark"] body.blog h3,
html[data-theme="dark"] body.blog h4,
html[data-theme="dark"] body.blog h5,
html[data-theme="dark"] body.blog h6,
html[data-theme="dark"] body.blog span,
html[data-theme="dark"] body.blog div,
html[data-theme="dark"] body.posts p,
html[data-theme="dark"] body.posts h1,
html[data-theme="dark"] body.posts h2,
html[data-theme="dark"] body.posts h3,
html[data-theme="dark"] body.posts h4,
html[data-theme="dark"] body.posts h5,
html[data-theme="dark"] body.posts h6,
html[data-theme="dark"] body.posts span,
html[data-theme="dark"] body.posts div {
    color: #ffffff !important;
}

/* 直接覆盖任何可能的内联样式 */
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color: #000000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color:#000000"],
html[data-theme="dark"] [style*="color:black"] {
    color: #ffffff !important;
}

/* 博客主体内容强制白色文字 */
html[data-theme="dark"] main,
html[data-theme="dark"] article,
html[data-theme="dark"] section,
html[data-theme="dark"] .content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .blog-content,
html[data-theme="dark"] .post-content {
    color: #ffffff !important;
}

/* 彻底移除顶部导航栏及选项的所有阴影效果 - 使用最高优先级选择器 */
html[data-theme="dark"] body header,
html[data-theme="dark"] body .navbar,
html[data-theme="dark"] body nav,
html[data-theme="dark"] body .top-nav,
html[data-theme="dark"] body .main-nav,
html[data-theme="dark"] body .nav-menu,
html[data-theme="dark"] body .navigation,
html[data-theme="dark"] body .site-nav,
html[data-theme="dark"] body .header-nav,
html[data-theme="dark"] body nav.navbar,
html[data-theme="dark"] body .navbar-nav,
html[data-theme="dark"] body .nav-list,
html[data-theme="dark"] body .header .container,
html[data-theme="dark"] body .navbar-container,
html[data-theme="dark"] body .header-container,
html[data-theme="dark"] body .nav-container {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 覆盖任何可能的导航链接样式 */
html[data-theme="dark"] body header a,
html[data-theme="dark"] body .navbar a,
html[data-theme="dark"] body nav a,
html[data-theme="dark"] body .nav-link,
html[data-theme="dark"] body .nav-item,
html[data-theme="dark"] body .nav-item a,
html[data-theme="dark"] body header li,
html[data-theme="dark"] body header li a,
html[data-theme="dark"] body .navbar li,
html[data-theme="dark"] body .navbar li a,
html[data-theme="dark"] body .navbar-nav li,
html[data-theme="dark"] body .navbar-nav li a,
html[data-theme="dark"] body .navbar-nav .nav-item,
html[data-theme="dark"] body .navbar-nav .nav-link,
html[data-theme="dark"] body .nav-item.active,
html[data-theme="dark"] body .nav-link.active,
html[data-theme="dark"] body .navbar .active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    border-shadow: none !important;
    filter: none !important;
    border: none !important;
    outline: none !important;
    background-image: none !important;
    background: transparent !important;
}

/* 直接针对Bootstrap导航组件 */
html[data-theme="dark"] .navbar-dark,
html[data-theme="dark"] .navbar-light,
html[data-theme="dark"] .navbar-default,
html[data-theme="dark"] .navbar-expand,
html[data-theme="dark"] .navbar-expand-lg,
html[data-theme="dark"] .navbar-expand-md,
html[data-theme="dark"] .navbar-expand-sm,
html[data-theme="dark"] .bg-dark,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .navbar-toggler {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* 覆盖所有可能的背景色和边框 */
html[data-theme="dark"] header *,
html[data-theme="dark"] .navbar *,
html[data-theme="dark"] nav * {
    border-radius: 0 !important;
}

/* 移除任何可能的全局背景和边框样式 */
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-md {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 覆盖任何可能的固定内联样式 */
html[data-theme="dark"] [style*="box-shadow"],
html[data-theme="dark"] [style*="text-shadow"],
html[data-theme="dark"] [style*="-webkit-box-shadow"],
html[data-theme="dark"] [style*="-moz-box-shadow"] {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
}

/* 导航栏美化 - 重新设计深色模式 */
html[data-theme="dark"] header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] nav.navbar,
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .site-header {
    background: var(--header-bg) !important; /* Simpler background */
    border-bottom: 1px solid var(--border-color) !important; /* Use defined border color */
    box-shadow: none !important; /* No shadow */
}

/* 导航项美化 */
html[data-theme="dark"] .navbar-nav .nav-item,
html[data-theme="dark"] .navbar-nav .nav-link,
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] header a,
html[data-theme="dark"] nav a,
html[data-theme="dark"] .navbar a {
    color: #ffffff !important;
    font-weight: normal !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    transition: none !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline !important;
}

/* 导航项悬停效果 */
html[data-theme="dark"] .navbar-nav .nav-item:hover,
html[data-theme="dark"] .navbar-nav .nav-link:hover,
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] header a:hover,
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] .navbar a:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* 活动状态导航项 */
html[data-theme="dark"] .navbar-nav .nav-item.active,
html[data-theme="dark"] .navbar-nav .nav-link.active,
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] header a.active,
html[data-theme="dark"] nav a.active,
html[data-theme="dark"] .active > a {
    background: transparent !important; /* No background */
    color: var(--primary-color-dark) !important; /* Use a prominent color, maybe lighter primary */
    border-bottom: none !important; /* No border bottom */
    font-weight: bold !important; /* Make active item bold */
    box-shadow: none !important;
}

/* 导航容器美化 */
html[data-theme="dark"] .navbar-collapse,
html[data-theme="dark"] .collapse,
html[data-theme="dark"] .navbar > .container,
html[data-theme="dark"] .navbar > .container-fluid,
html[data-theme="dark"] nav > div,
html[data-theme="dark"] header > div {
    background: transparent !important;
    border: none !important;
}

/* Logo区域美化 */
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .site-logo,
html[data-theme="dark"] .logo {
    color: var(--primary-link-color) !important; /* Use variable */
    font-weight: 700 !important;
    text-shadow: none !important; /* No text shadow */
}

/* 搜索框美化 */
html[data-theme="dark"] .navbar-search-form,
html[data-theme="dark"] .search-form,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-container,
html[data-theme="dark"] .search-input {
    background: var(--card-bg-light) !important; /* Use variable, e.g., Slate-700 */
    border: 1px solid var(--border-color) !important; /* Use variable */
    border-radius: 3px !important; /* Smaller radius or 0 */
    box-shadow: none !important;
    transition: none !important;
}

html[data-theme="dark"] .navbar-search-form:focus-within,
html[data-theme="dark"] .search-form:focus-within,
html[data-theme="dark"] .search-box:focus-within,
html[data-theme="dark"] .search-input:focus {
    background: var(--card-bg-light) !important; /* Can be same or slightly different */
    border-color: var(--primary-color) !important; /* Focus border color */
    box-shadow: none !important;
}

/* 搜索按钮美化 */
html[data-theme="dark"] .btn-search,
html[data-theme="dark"] .search-btn,
html[data-theme="dark"] .search-button {
    background: var(--primary-color) !important; /* Use variable */
    border-color: var(--primary-color) !important; /* Use variable */
    color: white !important;
    border-radius: 3px !important; /* Match input field or 0 */
    transition: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-search:hover,
html[data-theme="dark"] .search-btn:hover,
html[data-theme="dark"] .search-button:hover {
    background: var(--primary-color-dark) !important; /* Darker shade for hover */
    transform: none !important;
    box-shadow: none !important;
}

/* 确保导航菜单一致 */
html[data-theme="dark"] .navbar-nav,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav-list,
html[data-theme="dark"] .menu {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* 书籍列表界面深色模式样式 */
html[data-theme="dark"] .book-list,
html[data-theme="dark"] .books-container,
html[data-theme="dark"] .book-grid,
html[data-theme="dark"] .book-collection,
html[data-theme="dark"] .book-showcase,
html[data-theme="dark"] .books-showcase,
html[data-theme="dark"] .books-grid,
html[data-theme="dark"] .books-gallery,
html[data-theme="dark"] .tech-books,
html[data-theme="dark"] [class*="book-list"],
html[data-theme="dark"] [class*="books-list"],
html[data-theme="dark"] [id*="book-list"],
html[data-theme="dark"] [id*="books-list"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 书籍卡片深色模式样式 */
html[data-theme="dark"] .book-card,
html[data-theme="dark"] .book-item,
html[data-theme="dark"] .book-container,
html[data-theme="dark"] .book-box,
html[data-theme="dark"] .book-preview,
html[data-theme="dark"] .book-thumbnail,
html[data-theme="dark"] .book-entry,
html[data-theme="dark"] [class*="book-card"],
html[data-theme="dark"] [class*="book-item"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* 书籍卡片悬停效果 */
html[data-theme="dark"] .book-card:hover,
html[data-theme="dark"] .book-item:hover,
html[data-theme="dark"] .book-container:hover,
html[data-theme="dark"] .book-box:hover,
html[data-theme="dark"] .book-preview:hover,
html[data-theme="dark"] .book-thumbnail:hover,
html[data-theme="dark"] .book-entry:hover,
html[data-theme="dark"] [class*="book-card"]:hover,
html[data-theme="dark"] [class*="book-item"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* 书籍标题和描述文字 */
html[data-theme="dark"] .book-title,
html[data-theme="dark"] .book-name,
html[data-theme="dark"] .book-description,
html[data-theme="dark"] .book-author,
html[data-theme="dark"] .book-info,
html[data-theme="dark"] .book-details,
html[data-theme="dark"] [class*="book-title"],
html[data-theme="dark"] [class*="book-author"] {
    color: var(--text-color) !important;
}

/* 书籍操作按钮美化 */
html[data-theme="dark"] .book-action,
html[data-theme="dark"] .book-button,
html[data-theme="dark"] .book-link,
html[data-theme="dark"] .detail-btn,
html[data-theme="dark"] .buy-btn,
html[data-theme="dark"] .view-btn,
html[data-theme="dark"] [class*="book-btn"] {
    background-color: var(--card-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease !important;
}

html[data-theme="dark"] .book-action:hover,
html[data-theme="dark"] .book-button:hover,
html[data-theme="dark"] .book-link:hover,
html[data-theme="dark"] .detail-btn:hover,
html[data-theme="dark"] .buy-btn:hover,
html[data-theme="dark"] .view-btn:hover,
html[data-theme="dark"] [class*="book-btn"]:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* 购买按钮特殊样式 */
html[data-theme="dark"] .buy-btn,
html[data-theme="dark"] .purchase-btn,
html[data-theme="dark"] [class*="buy-"] {
    background-color: var(--primary-color-light) !important;
    color: white !important;
}

html[data-theme="dark"] .buy-btn:hover,
html[data-theme="dark"] .purchase-btn:hover,
html[data-theme="dark"] [class*="buy-"]:hover {
    background-color: var(--primary-color) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* 书籍分类导航 */
html[data-theme="dark"] .book-categories,
html[data-theme="dark"] .book-category,
html[data-theme="dark"] .book-filter,
html[data-theme="dark"] .book-nav,
html[data-theme="dark"] .book-sidebar,
html[data-theme="dark"] [class*="book-category"],
html[data-theme="dark"] [class*="book-filter"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 书籍分类项 */
html[data-theme="dark"] .book-category-item,
html[data-theme="dark"] .category-link,
html[data-theme="dark"] .filter-item,
html[data-theme="dark"] .book-category a,
html[data-theme="dark"] .book-filter a,
html[data-theme="dark"] [class*="category-item"] {
    color: var(--text-color) !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
}

html[data-theme="dark"] .book-category-item:hover,
html[data-theme="dark"] .category-link:hover,
html[data-theme="dark"] .filter-item:hover,
html[data-theme="dark"] .book-category a:hover,
html[data-theme="dark"] .book-filter a:hover,
html[data-theme="dark"] [class*="category-item"]:hover {
    background-color: var(--nav-hover-bg) !important;
    color: var(--link-hover-color) !important;
}

/* 活动状态的分类 */
html[data-theme="dark"] .book-category-item.active,
html[data-theme="dark"] .category-link.active,
html[data-theme="dark"] .filter-item.active,
html[data-theme="dark"] .book-category a.active,
html[data-theme="dark"] .book-filter a.active,
html[data-theme="dark"] [class*="category-item"].active {
    background-color: var(--primary-color-light) !important;
    color: white !important;
}

/* 书籍封面容器 */
html[data-theme="dark"] .book-cover,
html[data-theme="dark"] .book-image,
html[data-theme="dark"] .book-thumbnail img,
html[data-theme="dark"] .book-preview img,
html[data-theme="dark"] [class*="book-cover"],
html[data-theme="dark"] [class*="book-image"] {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 常见 Bug 修复指南页面深色模式样式 */
html[data-theme="dark"] .bug-guide,
html[data-theme="dark"] .bug-fix,
html[data-theme="dark"] .bug-help,
html[data-theme="dark"] .bug-solution,
html[data-theme="dark"] .error-guide,
html[data-theme="dark"] .error-fix,
html[data-theme="dark"] .error-help,
html[data-theme="dark"] .error-solution,
html[data-theme="dark"] .troubleshoot,
html[data-theme="dark"] .troubleshooting,
html[data-theme="dark"] .troubleshoot-guide,
html[data-theme="dark"] .fix-guide,
html[data-theme="dark"] [class*="bug-guide"],
html[data-theme="dark"] [class*="error-guide"],
html[data-theme="dark"] [class*="fix-guide"],
html[data-theme="dark"] [id*="bug-guide"],
html[data-theme="dark"] [id*="error-guide"],
html[data-theme="dark"] [id*="fix-guide"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Bug 修复指南内容卡片 */
html[data-theme="dark"] .bug-card,
html[data-theme="dark"] .bug-item,
html[data-theme="dark"] .bug-container,
html[data-theme="dark"] .bug-box,
html[data-theme="dark"] .error-card,
html[data-theme="dark"] .error-item,
html[data-theme="dark"] .error-container,
html[data-theme="dark"] .error-box,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .solution-item,
html[data-theme="dark"] .solution-container,
html[data-theme="dark"] .fix-card,
html[data-theme="dark"] .fix-item,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .guide-item,
html[data-theme="dark"] [class*="bug-card"],
html[data-theme="dark"] [class*="error-card"],
html[data-theme="dark"] [class*="solution-card"],
html[data-theme="dark"] [class*="guide-card"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 搜索框和过滤器 */
html[data-theme="dark"] .bug-search,
html[data-theme="dark"] .error-search,
html[data-theme="dark"] .guide-search,
html[data-theme="dark"] .bug-filter,
html[data-theme="dark"] .error-filter,
html[data-theme="dark"] .guide-filter,
html[data-theme="dark"] [class*="bug-search"],
html[data-theme="dark"] [class*="error-search"],
html[data-theme="dark"] [class*="guide-search"],
html[data-theme="dark"] [id*="bug-search"],
html[data-theme="dark"] [id*="error-search"],
html[data-theme="dark"] [id*="guide-search"] {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 4px !important;
}

/* 代码块和错误信息样式 */
html[data-theme="dark"] .bug-code,
html[data-theme="dark"] .error-code,
html[data-theme="dark"] .code-example,
html[data-theme="dark"] .error-example,
html[data-theme="dark"] .traceback,
html[data-theme="dark"] [class*="language-"],
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: #171e2e !important;
    color: #e2e8f0 !important;
    border-color: var(--border-color) !important;
    border-radius: 4px !important;
    font-family: monospace !important;
}

/* 错误消息和警告样式 */
html[data-theme="dark"] .error-message,
html[data-theme="dark"] .error-warning,
html[data-theme="dark"] .bug-message,
html[data-theme="dark"] .bug-warning,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] [class*="error-message"],
html[data-theme="dark"] [class*="warning-message"] {
    background-color: rgba(220, 38, 38, 0.2) !important;
    border-left: 4px solid #dc2626 !important;
    color: #fecaca !important;
    padding: 1rem !important;
    border-radius: 4px !important;
}

/* 选择器和下拉菜单 */
html[data-theme="dark"] select,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .select-container,
html[data-theme="dark"] .category-select,
html[data-theme="dark"] .bug-select,
html[data-theme="dark"] .error-select,
html[data-theme="dark"] [class*="select-"],
html[data-theme="dark"] [id*="select-"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 4px !important;
}

/* 强制任何白色背景容器转为深色 */
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* 彻底解决Bug指南页面中的白色背景问题 */
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] main {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* 针对解决方案区域的特殊处理 */
html[data-theme="dark"] .solution,
html[data-theme="dark"] .solution-area,
html[data-theme="dark"] .solution-section,
html[data-theme="dark"] .fix-solution,
html[data-theme="dark"] .solution-container,
html[data-theme="dark"] .solution-wrapper,
html[data-theme="dark"] .solution-content,
html[data-theme="dark"] .fix-content,
html[data-theme="dark"] [class*="solution-"],
html[data-theme="dark"] [id*="solution-"],
html[data-theme="dark"] [class*="fix-solution"],
html[data-theme="dark"] [id*="fix-solution"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 所有段落、文本容器强制深色背景 */
html[data-theme="dark"] p,
html[data-theme="dark"] .text-container,
html[data-theme="dark"] .description,
html[data-theme="dark"] .explanation,
html[data-theme="dark"] .info,
html[data-theme="dark"] .info-text,
html[data-theme="dark"] .text-block,
html[data-theme="dark"] .text-section,
html[data-theme="dark"] .paragraph,
html[data-theme="dark"] [class*="text-"],
html[data-theme="dark"] [id*="text-"],
html[data-theme="dark"] [class*="info-"],
html[data-theme="dark"] [id*="info-"],
html[data-theme="dark"] [class*="desc-"],
html[data-theme="dark"] [id*="desc-"] {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

/* 搜索容器和表单强制深色 */
html[data-theme="dark"] .search-container,
html[data-theme="dark"] .search-form,
html[data-theme="dark"] .search-wrapper,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-area,
html[data-theme="dark"] .search-section,
html[data-theme="dark"] form,
html[data-theme="dark"] [class*="search-"],
html[data-theme="dark"] [id*="search-"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 输入框和选择框背景调整 */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group,
html[data-theme="dark"] [class*="input-"] {
    background-color: var(--card-bg-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 极端强力选择器 - 捕获所有元素的白色背景 */
html[data-theme="dark"] * {
    background-color: inherit;
}

html[data-theme="dark"] body * {
    border-color: var(--border-color) !important;
}

/* 直接针对白色容器 */
html[data-theme="dark"] .white-bg,
html[data-theme="dark"] .white-background,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .background-white,
html[data-theme="dark"] [class*="white-bg"],
html[data-theme="dark"] [class*="bg-white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* 移除首页轮播图文字阴影框 */
html[data-theme="dark"] .carousel-caption,
html[data-theme="dark"] .carousel-caption h1,
html[data-theme="dark"] .carousel-caption h2,
html[data-theme="dark"] .carousel-caption h3,
html[data-theme="dark"] .carousel-caption h4,
html[data-theme="dark"] .carousel-caption h5,
html[data-theme="dark"] .carousel-caption h6,
html[data-theme="dark"] .carousel-caption p,
html[data-theme="dark"] .carousel-caption span,
html[data-theme="dark"] .carousel-caption div,
html[data-theme="dark"] .carousel-caption-text,
html[data-theme="dark"] .carousel-caption-title,
html[data-theme="dark"] .carousel-caption-description,
html[data-theme="dark"] #homePageCarousel .carousel-caption,
html[data-theme="dark"] [id*="carousel"] .carousel-caption {
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background: transparent !important; /* 确保背景透明，移除可能的背景色块 */
    background-color: transparent !important;
}

/* 确保轮播图标题和描述文字颜色清晰 */
html[data-theme="dark"] .carousel-caption h1,
html[data-theme="dark"] .carousel-caption h2,
html[data-theme="dark"] .carousel-caption h3,
html[data-theme="dark"] .carousel-caption h4,
html[data-theme="dark"] .carousel-caption h5,
html[data-theme="dark"] .carousel-caption h6,
html[data-theme="dark"] .carousel-caption-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .carousel-caption p,
html[data-theme="dark"] .carousel-caption span,
html[data-theme="dark"] .carousel-caption-description {
    color: rgba(255, 255, 255, 0.85) !important; /* 稍微柔和的白色 */
}

/* 移除轮播控件的阴影（如果存在） */
html[data-theme="dark"] .carousel-control-prev,
html[data-theme="dark"] .carousel-control-next,
html[data-theme="dark"] .carousel-indicators button {
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background-image: none !important; /* 移除可能的背景渐变 */
}

/* 如果轮播图的图片本身有过暗处理，可以稍微调亮 */
html[data-theme="dark"] .carousel-item img {
    filter: brightness(0.9) !important; /* 之前是0.85，稍微调亮一点 */
}

/* 彻底移除轮播控件区域的任何阴影或背景 */
html[data-theme="dark"] .carousel-control-prev,
html[data-theme="dark"] .carousel-control-next,
html[data-theme="dark"] .carousel-indicators {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border: none !important;
    text-shadow: none !important; /* 确保图标本身也没有阴影 */
}

/* 轮播控件图标样式 */
html[data-theme="dark"] .carousel-control-prev-icon,
html[data-theme="dark"] .carousel-control-next-icon {
    background-image: none !important; /* 移除默认的SVG背景图像 */
    color: rgba(255, 255, 255, 0.7) !important; /* 设置清晰的白色图标 */
    font-size: 2rem !important; /* 适当调整图标大小 */
    text-shadow: none !important;
    width: 3rem !important;
    height: 3rem !important;
    line-height: 3rem !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.3) !important; /* 半透明黑色背景，增加可见性 */
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

html[data-theme="dark"] .carousel-control-prev-icon:hover,
html[data-theme="dark"] .carousel-control-next-icon:hover {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 轮播指示器按钮样式 */
html[data-theme="dark"] .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html[data-theme="dark"] .carousel-indicators button.active {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* 确保轮播图控件区域不会有意外的边框或背景 */
html[data-theme="dark"] .carousel-inner,
html[data-theme="dark"] .carousel-item,
html[data-theme="dark"] #homePageCarousel,
html[data-theme="dark"] [id*="carousel"],
html[data-theme="dark"] [class*="carousel"] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 移除工具箱页面工具展示区的阴影框 */
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .tool-item,
html[data-theme="dark"] .tool-box,
html[data-theme="dark"] .tool-entry,
html[data-theme="dark"] .tool-widget,
html[data-theme="dark"] .ai-tool-card,
html[data-theme="dark"] .website-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .jy-tool-item,
html[data-theme="dark"] [class*="tool-card"],
html[data-theme="dark"] [class*="tool-item"] {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important; /* 保留一个微妙的边框 */
}

/* 工具卡片内容区域样式调整 */
html[data-theme="dark"] .tool-card-body,
html[data-theme="dark"] .tool-item-content,
html[data-theme="dark"] .tool-card-content,
html[data-theme="dark"] .tool-info,
html[data-theme="dark"] .tool-details {
    background-color: transparent !important; /* 确保内容区域背景透明 */
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 工具名称和描述文字样式 */
html[data-theme="dark"] .tool-name,
html[data-theme="dark"] .tool-title,
html[data-theme="dark"] .tool-card-title,
html[data-theme="dark"] .tool-item-title {
    color: var(--text-color) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

html[data-theme="dark"] .tool-description,
html[data-theme="dark"] .tool-card-description,
html[data-theme="dark"] .tool-item-description,
html[data-theme="dark"] .tool-category-label {
    color: var(--muted-text) !important;
    text-shadow: none !important;
}

/* 工具图标/图片区域样式调整 */
html[data-theme="dark"] .tool-icon,
html[data-theme="dark"] .tool-logo,
html[data-theme="dark"] .tool-image,
html[data-theme="dark"] .tool-card-img,
html[data-theme="dark"] .tool-item-icon,
html[data-theme="dark"] .ai-tool-icon,
html[data-theme="dark"] .ai-tool-logo {
    background-color: var(--card-bg-light) !important; /* 给图标一个稍微亮一点的背景 */
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 8px !important; /* 图标区域圆角 */
    padding: 0.5rem !important; /* 给图标一些内边距 */
}

html[data-theme="dark"] .tool-icon img,
html[data-theme="dark"] .tool-logo img,
html[data-theme="dark"] .tool-image img {
    filter: none !important; /* 移除可能的滤镜效果 */
}

/* 如果工具卡片是链接，确保链接本身没有阴影 */
html[data-theme="dark"] a.tool-card,
html[data-theme="dark"] a.tool-item {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* 移除可能的全局阴影类 */
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-md {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 移除AI工具详情界面详细介绍文字区域的黑色背景框 */
html[data-theme="dark"] .ai-tool-detail .description-section,
html[data-theme="dark"] .ai-tool-detail .detailed-description,
html[data-theme="dark"] .ai-tool-detail .tool-description-long,
html[data-theme="dark"] .ai-tool-detail .full-description,
html[data-theme="dark"] .ai-tool-content .description-section,
html[data-theme="dark"] .ai-tool-content .detailed-description,
html[data-theme="dark"] .ai-detail-page .description-section,
html[data-theme="dark"] .ai-detail-page .detailed-description,
html[data-theme="dark"] [class*="ai-tool-detail"] .description,
html[data-theme="dark"] [class*="ai-tool-detail"] [class*="description"],
html[data-theme="dark"] [class*="ai-detail"] .description,
html[data-theme="dark"] [class*="ai-detail"] [class*="description"],
html[data-theme="dark"] #ai-tool-detail-description,
html[data-theme="dark"] #ai-tool-full-description,
html[data-theme="dark"] .detailed-info-box,
html[data-theme="dark"] .tool-long-description-wrapper,
html[data-theme="dark"] .description-card,
html[data-theme="dark"] .description-panel,
html[data-theme="dark"] .description-box,
html[data-theme="dark"] .tool-intro-text,
html[data-theme="dark"] .tool-overview-text {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    padding: 0 !important; /* 移除可能的内边距，避免看起来像一个框 */
    margin: 0 !important; /* 移除可能的外边距 */
}

/* 确保详细介绍区域内的文本颜色正确 */
html[data-theme="dark"] .ai-tool-detail .description-section p,
html[data-theme="dark"] .ai-tool-detail .detailed-description p,
html[data-theme="dark"] .ai-tool-detail .description-section span,
html[data-theme="dark"] .ai-tool-detail .detailed-description span,
html[data-theme="dark"] .ai-tool-detail .description-section div,
html[data-theme="dark"] .ai-tool-detail .detailed-description div,
html[data-theme="dark"] [class*="ai-tool-detail"] .description p,
html[data-theme="dark"] [class*="ai-tool-detail"] [class*="description"] p,
html[data-theme="dark"] [class*="ai-detail"] .description p,
html[data-theme="dark"] [class*="ai-detail"] [class*="description"] p,
html[data-theme="dark"] .detailed-info-box p,
html[data-theme="dark"] .tool-long-description-wrapper p {
    color: var(--text-color) !important;
    line-height: 1.8 !important; /* 提高可读性 */
    background: transparent !important;
}

/* 移除详细介绍区域内的标题可能带有的背景或边框 */
html[data-theme="dark"] .ai-tool-detail .description-section h1,
html[data-theme="dark"] .ai-tool-detail .description-section h2,
html[data-theme="dark"] .ai-tool-detail .description-section h3,
html[data-theme="dark"] .ai-tool-detail .description-section h4,
html[data-theme="dark"] .ai-tool-detail .description-section h5,
html[data-theme="dark"] .ai-tool-detail .description-section h6,
html[data-theme="dark"] .detailed-description h1,
html[data-theme="dark"] .detailed-description h2,
html[data-theme="dark"] .detailed-description h3,
html[data-theme="dark"] .detailed-description h4,
html[data-theme="dark"] .detailed-description h5,
html[data-theme="dark"] .detailed-description h6,
html[data-theme="dark"] [class*="description"] h1,
html[data-theme="dark"] [class*="description"] h2,
html[data-theme="dark"] [class*="description"] h3,
html[data-theme="dark"] [class*="description"] h4,
html[data-theme="dark"] [class*="description"] h5,
html[data-theme="dark"] [class*="description"] h6 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-color) !important; /* 确保标题颜色也正确 */
}

/* 通用规则，确保父容器没有意外背景 */
html[data-theme="dark"] .ai-tool-detail .content-section,
html[data-theme="dark"] .ai-tool-detail .info-section,
html[data-theme="dark"] .ai-tool-detail .text-content-area {
    background-color: var(--bg-color) !important;
}

/* Deepseek AI Assistant Chat Widget Dark Mode Fixes */
html[data-theme="dark"] .deepseek-chat-container, /* Assuming a container class */
html[data-theme="dark"] [class*="deepseek-chat"], /* Generic class containing "deepseek-chat" */
html[data-theme="dark"] [id*="deepseek-widget"], /* Generic ID containing "deepseek-widget" */
html[data-theme="dark"] .ai-assistant-chat { /* Another common pattern */
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .deepseek-chat-container *,
html[data-theme="dark"] [class*="deepseek-chat"] *,
html[data-theme="dark"] [id*="deepseek-widget"] *,
html[data-theme="dark"] .ai-assistant-chat * {
    color: var(--text-color) !important;
    background-color: transparent !important; /* Prevent nested elements from having conflicting backgrounds */
}

html[data-theme="dark"] .deepseek-chat-header,
html[data-theme="dark"] [class*="deepseek-chat-header"] {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .deepseek-message-user,
html[data-theme="dark"] [class*="user-message"],
html[data-theme="dark"] .deepseek-chat-bubble-user {
    background-color: var(--primary-color-light) !important;
    color: #ffffff !important; /* Ensure user messages are very clear */
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}

html[data-theme="dark"] .deepseek-message-assistant,
html[data-theme="dark"] [class*="assistant-message"],
html[data-theme="dark"] [class*="bot-message"],
html[data-theme="dark"] .deepseek-chat-bubble-assistant {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}

html[data-theme="dark"] .deepseek-chat-input,
html[data-theme="dark"] [class*="deepseek-chat-input"] input[type="text"],
html[data-theme="dark"] [class*="chat-input-area"] textarea {
    background-color: var(--card-bg-light) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

html[data-theme="dark"] .deepseek-chat-input::placeholder,
html[data-theme="dark"] [class*="deepseek-chat-input"] input[type="text"]::placeholder,
html[data-theme="dark"] [class*="chat-input-area"] textarea::placeholder {
    color: var(--muted-text) !important;
}

html[data-theme="dark"] .deepseek-chat-button,
html[data-theme="dark"] [class*="deepseek-chat-button"] button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
}

/* AI Chat Interface Dark Mode Fixes */
html[data-theme="dark"] .message.assistant .message-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .message.assistant .message-avatar {
    background-color: var(--card-bg-light) !important;
    color: var(--primary-color) !important;
}

html[data-theme="dark"] .chat-input-container {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .chat-input-form {
    background-color: var(--card-bg-light) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .chat-input {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .chat-input::placeholder {
    color: var(--muted-text) !important;
}

html[data-theme="dark"] .chat-main {
    background-color: var(--body-bg) !important;
}

/* ====== Programming Tutorial Page Left Sidebar Dark Mode Fixes ====== */

/* Ensure the main sidebar container and its direct children have correct dark theme */
html[data-theme="dark"] .tutorial-page-container .tutorial-sidebar,
html[data-theme="dark"] .programming-tutorials .tutorial-sidebar,
html[data-theme="dark"] .tutorial-wrapper .tutorial-sidebar,
html[data-theme="dark"] .tutorial-container .tutorial-sidebar,
html[data-theme="dark"] div[class*="tutorial"] aside[class*="sidebar"],
html[data-theme="dark"] div[class*="course"] aside[class*="sidebar"],
html[data-theme="dark"] .left-sidebar-column, /* Generic left sidebar column */
html[data-theme="dark"] .tutorial-left-nav { /* A common class for such navs */
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-right: 1px solid var(--border-color) !important; /* Ensure right border is dark */
}

/* Target all elements within the tutorial sidebar for background and text color */
html[data-theme="dark"] .tutorial-sidebar *,
html[data-theme="dark"] .tutorial-left-nav * {
    background-color: transparent !important; /* Children should inherit or be transparent */
    color: var(--text-color) !important;
    border-color: var(--border-color) !important; /* Ensure all borders are dark */
}

/* Navigation lists and items within the tutorial sidebar */
html[data-theme="dark"] .tutorial-sidebar ul,
html[data-theme="dark"] .tutorial-sidebar ol,
html[data-theme="dark"] .tutorial-sidebar li,
html[data-theme="dark"] .tutorial-sidebar .nav,
html[data-theme="dark"] .tutorial-sidebar .nav-item,
html[data-theme="dark"] .tutorial-sidebar .list-group,
html[data-theme="dark"] .tutorial-sidebar .list-group-item,
html[data-theme="dark"] .tutorial-sidebar .accordion-item,
html[data-theme="dark"] .tutorial-sidebar .accordion-header,
html[data-theme="dark"] .tutorial-sidebar .accordion-button,
html[data-theme="dark"] .tutorial-sidebar .accordion-body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Links within the tutorial sidebar */
html[data-theme="dark"] .tutorial-sidebar a,
html[data-theme="dark"] .tutorial-sidebar .nav-link,
html[data-theme="dark"] .tutorial-sidebar .list-group-item a, /* For links inside list items */
html[data-theme="dark"] .tutorial-sidebar .accordion-button {
    color: var(--text-color) !important;
    background-color: transparent !important;
    border-bottom: 1px solid transparent; /* Add subtle separation if needed, or keep transparent */
}

html[data-theme="dark"] .tutorial-sidebar a:hover,
html[data-theme="dark"] .tutorial-sidebar .nav-link:hover,
html[data-theme="dark"] .tutorial-sidebar .list-group-item a:hover,
html[data-theme="dark"] .tutorial-sidebar .accordion-button:hover {
    color: var(--link-hover-color) !important;
    background-color: var(--nav-hover-bg) !important;
}

/* Active/current links in the tutorial sidebar */
html[data-theme="dark"] .tutorial-sidebar a.active,
html[data-theme="dark"] .tutorial-sidebar .nav-link.active,
html[data-theme="dark"] .tutorial-sidebar .list-group-item.active,
html[data-theme="dark"] .tutorial-sidebar .list-group-item.active a,
html[data-theme="dark"] .tutorial-sidebar li.active > a { /* Direct li.active targeting */
    color: var(--primary-color-dark) !important;
    background-color: var(--primary-color-light) !important; /* Use a subtle active background */
    border-left: 3px solid var(--primary-color) !important; /* Highlight with a left border */
    padding-left: calc(1rem - 3px); /* Adjust padding to account for border */
    font-weight: bold;
}

/* Expanded accordion button in tutorial sidebar */
html[data-theme="dark"] .tutorial-sidebar .accordion-button:not(.collapsed) {
    background-color: var(--card-bg-light) !important;
    color: var(--primary-color-dark) !important;
}

/* Ensure any icons in the tutorial sidebar are visible */
html[data-theme="dark"] .tutorial-sidebar .accordion-button::after,
html[data-theme="dark"] .tutorial-sidebar .nav-icon,
html[data-theme="dark"] .tutorial-sidebar .menu-icon,
html[data-theme="dark"] .tutorial-sidebar i.fas,
html[data-theme="dark"] .tutorial-sidebar i.far,
html[data-theme="dark"] .tutorial-sidebar i.fab {
    filter: invert(0.8) brightness(1.2); /* Adjust if icons are still hard to see, or use specific color */
    color: var(--muted-text) !important; /* Fallback color */
}

/* Force override any rogue white backgrounds on generic divs/sections within tutorial sidebar */
html[data-theme="dark"] .tutorial-sidebar div,
html[data-theme="dark"] .tutorial-sidebar section,
html[data-theme="dark"] .tutorial-sidebar header, /* For any header elements within sidebar */
html[data-theme="dark"] .tutorial-sidebar nav { /* For nav elements within sidebar */
    background-color: inherit !important; /* Inherit from parent */
    color: inherit !important;
}

/* Specific override for elements that might have inline styles or very specific light mode CSS */
html[data-theme="dark"] .tutorial-sidebar [style*="background-color: white"],
html[data-theme="dark"] .tutorial-sidebar [style*="background-color: #fff"],
html[data-theme="dark"] .tutorial-sidebar [style*="background-color: #ffffff"],
html[data-theme="dark"] .tutorial-sidebar [style*="background: white"],
html[data-theme="dark"] .tutorial-sidebar [style*="background: #fff"],
html[data-theme="dark"] .tutorial-sidebar [style*="background: #ffffff"] {
    background-color: var(--bg-color) !important;
    background: var(--bg-color) !important;
}