/* ================================================
   ChangoBibVis 主题样式
   版本: 20250115_v1 - 添加欢迎引导模态框主题适配
   支持: 白天/黑夜/科幻模式
   ================================================ */

/* ===== 黑夜模式 ===== */
html.mode-dark .bibvis-header,
body.dark-mode .bibvis-header {
    background: linear-gradient(135deg, #0096c7 0%, #023e8a 100%);
    box-shadow: 0 4px 12px rgba(0, 150, 199, 0.3);
}

html.mode-dark .bibvis-panel,
body.dark-mode .bibvis-panel {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.mode-dark .bibvis-panel-title,
body.dark-mode .bibvis-panel-title {
    color: #48cae4;
    border-bottom-color: #48cae4;
}

html.mode-dark .import-panel .file-drop-zone,
body.dark-mode .import-panel .file-drop-zone {
    background: #1a202c;
    border-color: #4a5568;
}

html.mode-dark .import-panel .file-drop-zone:hover,
body.dark-mode .import-panel .file-drop-zone:hover {
    border-color: #48cae4;
    background: rgba(72, 202, 228, 0.1);
}

html.mode-dark .analysis-type-btn,
body.dark-mode .analysis-type-btn {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}

html.mode-dark .analysis-type-btn:hover,
body.dark-mode .analysis-type-btn:hover {
    border-color: #48cae4;
    background: rgba(72, 202, 228, 0.1);
}

html.mode-dark .analysis-type-btn.active,
body.dark-mode .analysis-type-btn.active {
    background: #0096c7;
    border-color: #0096c7;
}

html.mode-dark .cluster-item,
body.dark-mode .cluster-item {
    background: #1a202c;
}

html.mode-dark .cluster-item:hover,
body.dark-mode .cluster-item:hover {
    background: rgba(72, 202, 228, 0.15);
}

html.mode-dark .cluster-count,
body.dark-mode .cluster-count {
    background: #2d3748;
    color: #a0aec0;
}

html.mode-dark .bibvis-toolbar,
body.dark-mode .bibvis-toolbar {
    background: #2d3748;
    border-color: #4a5568;
}

html.mode-dark .view-tab-btn,
html.mode-dark .toolbar-btn,
body.dark-mode .view-tab-btn,
body.dark-mode .toolbar-btn {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}

html.mode-dark .view-tab-btn:hover,
html.mode-dark .toolbar-btn:hover,
body.dark-mode .view-tab-btn:hover,
body.dark-mode .toolbar-btn:hover {
    border-color: #48cae4;
    color: #48cae4;
}

html.mode-dark .view-tab-btn.active,
body.dark-mode .view-tab-btn.active {
    background: #0096c7;
    border-color: #0096c7;
    color: white;
}

html.mode-dark .bibvis-canvas,
body.dark-mode .bibvis-canvas {
    background: #1a202c;
    border-color: #4a5568;
}

html.mode-dark .stat-item,
body.dark-mode .stat-item {
    background: #1a202c;
}

html.mode-dark .stat-value,
body.dark-mode .stat-value {
    color: #48cae4;
}

html.mode-dark .top-node-item,
body.dark-mode .top-node-item {
    background: #1a202c;
}

html.mode-dark .top-node-item:hover,
body.dark-mode .top-node-item:hover {
    background: rgba(72, 202, 228, 0.15);
}

html.mode-dark .loading-overlay,
body.dark-mode .loading-overlay {
    background: rgba(26, 32, 44, 0.95);
}

html.mode-dark .loading-spinner,
body.dark-mode .loading-spinner {
    border-color: #4a5568;
    border-top-color: #48cae4;
}

html.mode-dark .loading-text,
body.dark-mode .loading-text {
    color: #48cae4;
}

/* 黑夜模式：工具栏两行深色背景 */
html.mode-dark .toolbar-row,
body.dark-mode .toolbar-row {
    background: #2d3748 !important;
}

html.mode-dark .toolbar-actions,
body.dark-mode .toolbar-actions {
    background: #2d3748 !important;
    border-top: 1px solid #4a5568;
}

html.mode-dark .toolbar-section-label,
body.dark-mode .toolbar-section-label {
    color: #a0aec0 !important;
}

html.mode-dark .search-box,
body.dark-mode .search-box {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

html.mode-dark .search-box input,
body.dark-mode .search-box input {
    color: #e2e8f0 !important;
    background: transparent !important;
}

html.mode-dark .search-box input::placeholder,
body.dark-mode .search-box input::placeholder {
    color: rgba(226, 232, 240, 0.5) !important;
}

html.mode-dark .search-icon,
body.dark-mode .search-icon {
    color: #48cae4 !important;
}

/* 黑夜模式：AI图表解读按钮突出显示 */
html.mode-dark #btnChartInterpret,
body.dark-mode #btnChartInterpret {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
    border-color: #f093fb !important;
    box-shadow: 0 0 15px rgba(240, 147, 251, 0.5);
    animation: ai-pulse-dark 2s ease-in-out infinite;
}

html.mode-dark #btnChartInterpret:hover,
body.dark-mode #btnChartInterpret:hover {
    box-shadow: 0 0 25px rgba(240, 147, 251, 0.8);
    transform: scale(1.05);
}

@keyframes ai-pulse-dark {
    0%, 100% { box-shadow: 0 0 15px rgba(240, 147, 251, 0.5); }
    50% { box-shadow: 0 0 25px rgba(240, 147, 251, 0.8); }
}

/* ===== 科幻模式 ===== */
html.mode-scifi .bibvis-header,
body.scifi-mode .bibvis-header {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 50%, #00d9ff 100%);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.4);
    animation: scifi-glow 3s ease-in-out infinite;
}

@keyframes scifi-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.4); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 136, 0.5); }
}

html.mode-scifi .bibvis-header h2,
body.scifi-mode .bibvis-header h2 {
    color: #0a0a1a !important;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .bibvis-header .subtitle,
body.scifi-mode .bibvis-header .subtitle {
    color: rgba(10, 10, 26, 0.8);
}

html.mode-scifi .bibvis-panel,
body.scifi-mode .bibvis-panel {
    background: rgba(10, 15, 25, 0.9) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.15),
                inset 0 0 30px rgba(0, 217, 255, 0.05);
}

html.mode-scifi .bibvis-panel-title,
body.scifi-mode .bibvis-panel-title {
    color: #00d9ff;
    border-bottom-color: #00d9ff;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .import-panel .file-drop-zone,
body.scifi-mode .import-panel .file-drop-zone {
    background: rgba(0, 217, 255, 0.05);
    border-color: rgba(0, 217, 255, 0.3);
}

html.mode-scifi .import-panel .file-drop-zone:hover,
body.scifi-mode .import-panel .file-drop-zone:hover {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .import-panel .file-drop-zone i,
body.scifi-mode .import-panel .file-drop-zone i {
    color: #00d9ff;
    text-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .analysis-type-btn,
body.scifi-mode .analysis-type-btn {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.3);
    color: #e0f7ff;
}

html.mode-scifi .analysis-type-btn:hover,
body.scifi-mode .analysis-type-btn:hover {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .analysis-type-btn.active,
body.scifi-mode .analysis-type-btn.active {
    background: linear-gradient(135deg, #00d9ff, #00ff88);
    border-color: transparent;
    color: #0a0a1a;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .cluster-item,
body.scifi-mode .cluster-item {
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .cluster-item:hover,
body.scifi-mode .cluster-item:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .cluster-item.highlighted,
body.scifi-mode .cluster-item.highlighted {
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
    border-color: #00d9ff;
}

html.mode-scifi .cluster-count,
body.scifi-mode .cluster-count {
    background: rgba(0, 217, 255, 0.2);
    color: #00d9ff;
}

html.mode-scifi .bibvis-toolbar,
body.scifi-mode .bibvis-toolbar {
    background: rgba(10, 15, 25, 0.95);
    border-color: rgba(0, 217, 255, 0.3);
}

/* 科幻模式：工具栏两行都使用深色背景 */
html.mode-scifi .toolbar-row,
body.scifi-mode .toolbar-row {
    background: rgba(10, 15, 25, 0.95) !important;
}

html.mode-scifi .toolbar-actions,
body.scifi-mode .toolbar-actions {
    background: rgba(10, 15, 25, 0.95) !important;
    border-top: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .toolbar-section-label,
body.scifi-mode .toolbar-section-label {
    color: #66b3ff !important;
}

html.mode-scifi .search-box,
body.scifi-mode .search-box {
    background: rgba(0, 217, 255, 0.1) !important;
    border-color: rgba(0, 217, 255, 0.3) !important;
}

html.mode-scifi .search-box input,
body.scifi-mode .search-box input {
    color: #e0f7ff !important;
    background: transparent !important;
}

html.mode-scifi .search-box input::placeholder,
body.scifi-mode .search-box input::placeholder {
    color: rgba(224, 247, 255, 0.5) !important;
}

html.mode-scifi .search-icon,
body.scifi-mode .search-icon {
    color: #00d9ff !important;
}

html.mode-scifi .view-tab-btn,
html.mode-scifi .toolbar-btn,
body.scifi-mode .view-tab-btn,
body.scifi-mode .toolbar-btn {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.3);
    color: #e0f7ff;
}

html.mode-scifi .view-tab-btn:hover,
html.mode-scifi .toolbar-btn:hover,
body.scifi-mode .view-tab-btn:hover,
body.scifi-mode .toolbar-btn:hover {
    border-color: #00ff88;
    color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .view-tab-btn.active,
body.scifi-mode .view-tab-btn.active {
    background: linear-gradient(135deg, #00d9ff, #00ff88);
    border-color: transparent;
    color: #0a0a1a;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .toolbar-btn.primary,
body.scifi-mode .toolbar-btn.primary {
    background: linear-gradient(135deg, #00d9ff, #00ff88);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .toolbar-btn.primary:hover,
body.scifi-mode .toolbar-btn.primary:hover {
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
}

html.mode-scifi .bibvis-canvas,
body.scifi-mode .bibvis-canvas {
    background: rgba(5, 10, 20, 0.95);
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: inset 0 0 50px rgba(0, 217, 255, 0.1);
}

html.mode-scifi .stat-item,
body.scifi-mode .stat-item {
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .stat-value,
body.scifi-mode .stat-value {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .stat-label,
body.scifi-mode .stat-label {
    color: #66b3ff;
}

html.mode-scifi .top-node-item,
body.scifi-mode .top-node-item {
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.15);
}

html.mode-scifi .top-node-item:hover,
body.scifi-mode .top-node-item:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
}

html.mode-scifi .top-node-rank,
body.scifi-mode .top-node-rank {
    background: linear-gradient(135deg, #00d9ff, #00ff88);
    color: #0a0a1a;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .btn-ai-insights,
body.scifi-mode .btn-ai-insights {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    color: #0a0a1a;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
    font-weight: 600;
}

html.mode-scifi .btn-ai-insights:hover,
body.scifi-mode .btn-ai-insights:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
}

/* 科幻模式：AI图表解读按钮突出显示 */
html.mode-scifi #btnChartInterpret,
body.scifi-mode #btnChartInterpret {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%) !important;
    color: white !important;
    border-color: #ff6b9d !important;
    box-shadow: 0 0 15px rgba(255, 107, 157, 0.5);
    animation: ai-pulse-scifi 2s ease-in-out infinite;
}

html.mode-scifi #btnChartInterpret:hover,
body.scifi-mode #btnChartInterpret:hover {
    box-shadow: 0 0 25px rgba(255, 107, 157, 0.8);
    transform: scale(1.05);
}

@keyframes ai-pulse-scifi {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 107, 157, 0.5); }
    50% { box-shadow: 0 0 25px rgba(255, 107, 157, 0.8); }
}

html.mode-scifi .empty-state i,
body.scifi-mode .empty-state i {
    color: #00d9ff;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .loading-overlay,
body.scifi-mode .loading-overlay {
    background: rgba(5, 10, 20, 0.95);
}

html.mode-scifi .loading-spinner,
body.scifi-mode .loading-spinner {
    border-color: rgba(0, 217, 255, 0.2);
    border-top-color: #00d9ff;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .loading-text,
body.scifi-mode .loading-text {
    color: #00d9ff;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

/* 科幻模式下的模态框 */
html.mode-scifi .bibvis-modal .modal-content,
body.scifi-mode .bibvis-modal .modal-content {
    background: rgba(10, 15, 25, 0.98);
    border: 1px solid rgba(0, 217, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .bibvis-modal .modal-header,
body.scifi-mode .bibvis-modal .modal-header {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    border-bottom-color: rgba(0, 217, 255, 0.3);
}

html.mode-scifi .bibvis-modal .modal-title,
body.scifi-mode .bibvis-modal .modal-title {
    color: #0a0a1a;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* ========== 构建网络按钮 - 黑夜模式 ========== */
html.mode-dark .btn-build-network,
body.dark-mode .btn-build-network {
    background: linear-gradient(135deg, #48cae4 0%, #0096c7 100%);
    color: white;
    box-shadow: 0 3px 15px rgba(72, 202, 228, 0.5);
}

html.mode-dark .btn-build-network:hover,
body.dark-mode .btn-build-network:hover {
    background: linear-gradient(135deg, #90e0ef 0%, #48cae4 100%);
    box-shadow: 0 5px 20px rgba(72, 202, 228, 0.6);
}

/* ========== 构建网络按钮 - 科幻模式 ========== */
html.mode-scifi .btn-build-network,
body.scifi-mode .btn-build-network {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    color: #0a0a1a;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5), 0 0 40px rgba(0, 255, 136, 0.3);
    animation: scifi-btn-glow 2s infinite;
}

html.mode-scifi .btn-build-network:hover,
body.scifi-mode .btn-build-network:hover {
    background: linear-gradient(135deg, #00ff88 0%, #00d9ff 100%);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6), 0 0 60px rgba(0, 217, 255, 0.4);
}

@keyframes scifi-btn-glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(0, 217, 255, 0.5), 0 0 40px rgba(0, 255, 136, 0.3); 
    }
    50% { 
        box-shadow: 0 0 30px rgba(0, 217, 255, 0.7), 0 0 60px rgba(0, 255, 136, 0.5); 
    }
}

/* ========== 可折叠面板 - 黑夜模式 ========== */
html.mode-dark .collapsible-panel .collapsible-header:hover,
body.dark-mode .collapsible-panel .collapsible-header:hover {
    background: rgba(72, 202, 228, 0.15);
}

/* ========== 可折叠面板 - 科幻模式 ========== */
html.mode-scifi .collapsible-panel .collapsible-header:hover,
body.scifi-mode .collapsible-panel .collapsible-header:hover {
    background: rgba(0, 217, 255, 0.15);
}

/* ========== Tooltip - 科幻模式 ========== */
html.mode-scifi .label-tooltip,
body.scifi-mode .label-tooltip {
    background: rgba(0, 15, 30, 0.95);
    border: 1px solid rgba(0, 217, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .label-tooltip::before,
body.scifi-mode .label-tooltip::before {
    border-bottom-color: rgba(0, 15, 30, 0.95);
}

/* ========== 参数控制面板 - 黑夜模式 ========== */
html.mode-dark .chart-params-bar,
body.dark-mode .chart-params-bar {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

html.mode-dark .chart-params-bar .param-group label,
body.dark-mode .chart-params-bar .param-group label {
    color: #e2e8f0 !important;
}

html.mode-dark .chart-params-bar .form-select,
html.mode-dark .chart-params-bar .form-control,
body.dark-mode .chart-params-bar .form-select,
body.dark-mode .chart-params-bar .form-control {
    background: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

html.mode-dark .chart-params-bar .btn-outline-primary,
body.dark-mode .chart-params-bar .btn-outline-primary {
    color: #48cae4;
    border-color: #48cae4;
}

html.mode-dark .chart-params-bar .btn-outline-secondary,
body.dark-mode .chart-params-bar .btn-outline-secondary {
    color: #a0aec0;
    border-color: #4a5568;
}

/* ========== 参数控制面板 - 科幻模式 ========== */
html.mode-scifi .chart-params-bar,
body.scifi-mode .chart-params-bar {
    background: rgba(10, 15, 26, 0.95) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.1);
}

html.mode-scifi .chart-params-bar .param-group label,
body.scifi-mode .chart-params-bar .param-group label {
    color: #00d9ff !important;
    text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .chart-params-bar .form-select,
html.mode-scifi .chart-params-bar .form-control,
body.scifi-mode .chart-params-bar .form-select,
body.scifi-mode .chart-params-bar .form-control {
    background: rgba(0, 20, 40, 0.8) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    color: #00d9ff !important;
}

html.mode-scifi .chart-params-bar .btn-outline-primary,
body.scifi-mode .chart-params-bar .btn-outline-primary {
    color: #00ff88;
    border-color: #00ff88;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

html.mode-scifi .chart-params-bar .btn-outline-primary:hover,
body.scifi-mode .chart-params-bar .btn-outline-primary:hover {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

html.mode-scifi .chart-params-bar .btn-outline-secondary,
body.scifi-mode .chart-params-bar .btn-outline-secondary {
    color: rgba(0, 217, 255, 0.7);
    border-color: rgba(0, 217, 255, 0.3);
}

/* ========== 参数组和操作按钮区域 - 黑夜模式 ========== */
html.mode-dark .chart-params-bar .params-group,
body.dark-mode .chart-params-bar .params-group {
    background: #1a202c !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.mode-dark .chart-params-bar .params-group .params-label,
body.dark-mode .chart-params-bar .params-group .params-label {
    color: #48cae4 !important;
    border-right-color: #4a5568 !important;
}

html.mode-dark .chart-params-bar .params-actions-left,
body.dark-mode .chart-params-bar .params-actions-left {
    background: #1a202c !important;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
}

/* ========== 参数组和操作按钮区域 - 科幻模式 ========== */
html.mode-scifi .chart-params-bar .params-group,
body.scifi-mode .chart-params-bar .params-group {
    background: rgba(0, 20, 40, 0.8) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.1) !important;
}

html.mode-scifi .chart-params-bar .params-group .params-label,
body.scifi-mode .chart-params-bar .params-group .params-label {
    color: #00d9ff !important;
    border-right-color: rgba(0, 217, 255, 0.3) !important;
    text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .chart-params-bar .params-actions-left,
body.scifi-mode .chart-params-bar .params-actions-left {
    background: rgba(0, 20, 40, 0.8) !important;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(0, 217, 255, 0.3);
}

/* ========== 画布背景 - 黑夜模式 ========== */
html.mode-dark #networkChart,
body.dark-mode #networkChart {
    background: #1a202c !important;
}

html.mode-dark .bibvis-canvas,
body.dark-mode .bibvis-canvas {
    background: #1a202c !important;
}

/* ========== 画布背景 - 科幻模式 ========== */
html.mode-scifi #networkChart,
body.scifi-mode #networkChart {
    background: rgba(5, 10, 20, 0.95) !important;
}

html.mode-scifi .bibvis-canvas,
body.scifi-mode .bibvis-canvas {
    background: rgba(5, 10, 20, 0.95) !important;
}

/* ========== AI洞察模态框 - 科幻模式内容区 ========== */
html.mode-scifi #aiInsightsModal .modal-body,
body.scifi-mode #aiInsightsModal .modal-body {
    background: rgba(10, 15, 26, 0.98) !important;
    color: #e2e8f0;
}

html.mode-scifi #aiInsightsModal .alert,
body.scifi-mode #aiInsightsModal .alert {
    background: rgba(0, 20, 40, 0.8) !important;
    border-color: rgba(0, 217, 255, 0.3) !important;
    color: #00d9ff !important;
}

html.mode-scifi #aiInsightsModal #insightsContent,
body.scifi-mode #aiInsightsModal #insightsContent {
    background: rgba(0, 15, 30, 0.6) !important;
    border: 1px solid rgba(0, 217, 255, 0.2);
    color: #e2e8f0 !important;
}

html.mode-scifi #aiInsightsModal h1,
html.mode-scifi #aiInsightsModal h2,
html.mode-scifi #aiInsightsModal h3,
html.mode-scifi #aiInsightsModal h4,
html.mode-scifi #aiInsightsModal h5,
html.mode-scifi #aiInsightsModal h6,
body.scifi-mode #aiInsightsModal h1,
body.scifi-mode #aiInsightsModal h2,
body.scifi-mode #aiInsightsModal h3,
body.scifi-mode #aiInsightsModal h4,
body.scifi-mode #aiInsightsModal h5,
body.scifi-mode #aiInsightsModal h6 {
    color: #00d9ff !important;
}

html.mode-scifi #aiInsightsModal .text-muted,
body.scifi-mode #aiInsightsModal .text-muted {
    color: rgba(0, 217, 255, 0.6) !important;
}

html.mode-scifi #aiInsightsModal .btn-outline-secondary,
body.scifi-mode #aiInsightsModal .btn-outline-secondary {
    color: #00d9ff;
    border-color: rgba(0, 217, 255, 0.5);
}

html.mode-scifi #aiInsightsModal .btn-primary,
body.scifi-mode #aiInsightsModal .btn-primary {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    border: none;
    color: #0a0a1a;
}

/* ========== AI洞察模态框 - 黑夜模式内容区 ========== */
html.mode-dark #aiInsightsModal .modal-body,
body.dark-mode #aiInsightsModal .modal-body {
    background: #2d3748 !important;
    color: #e2e8f0;
}

html.mode-dark #aiInsightsModal .alert,
body.dark-mode #aiInsightsModal .alert {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

html.mode-dark #aiInsightsModal #insightsContent,
body.dark-mode #aiInsightsModal #insightsContent {
    background: #1a202c !important;
    border-color: #4a5568;
    color: #e2e8f0 !important;
}

/* ========== 视图按钮禁用状态 - 黑夜模式 ========== */
html.mode-dark .view-tab-btn:disabled,
html.mode-dark .view-tab-btn.disabled,
body.dark-mode .view-tab-btn:disabled,
body.dark-mode .view-tab-btn.disabled {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #718096 !important;
    opacity: 0.5;
}

/* ========== 视图按钮禁用状态 - 科幻模式 ========== */
html.mode-scifi .view-tab-btn:disabled,
html.mode-scifi .view-tab-btn.disabled,
body.scifi-mode .view-tab-btn:disabled,
body.scifi-mode .view-tab-btn.disabled {
    background: rgba(10, 15, 26, 0.6) !important;
    border-color: rgba(0, 217, 255, 0.2) !important;
    color: rgba(0, 217, 255, 0.3) !important;
    opacity: 0.5;
}

/* ========== 已缓存网络类型指示器 - 黑夜模式 ========== */
html.mode-dark .analysis-type-btn.has-cache::after,
body.dark-mode .analysis-type-btn.has-cache::after {
    color: #48cae4;
}

/* ========== 已缓存网络类型指示器 - 科幻模式 ========== */
html.mode-scifi .analysis-type-btn.has-cache::after,
body.scifi-mode .analysis-type-btn.has-cache::after {
    color: #00ff88;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

/* ========== 节点详情浮动面板 - 黑夜模式 ========== */
html.mode-dark .node-detail-float,
body.dark-mode .node-detail-float {
    background: #2d3748;
    border: 1px solid #4a5568;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

html.mode-dark .node-detail-float #nodeDetailContent,
body.dark-mode .node-detail-float #nodeDetailContent {
    background: #2d3748;
    color: #e2e8f0;
}

html.mode-dark .node-detail-title,
body.dark-mode .node-detail-title {
    color: #48cae4 !important;
}

/* 黑夜模式 - 三行标签样式 */
html.mode-dark .node-tags-row.row-primary .node-tag,
body.dark-mode .node-tags-row.row-primary .node-tag {
    background: linear-gradient(135deg, #48cae4 0%, #0096c7 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(72, 202, 228, 0.4);
}

html.mode-dark .node-tags-row.row-primary .node-tag:hover,
body.dark-mode .node-tags-row.row-primary .node-tag:hover {
    box-shadow: 0 3px 8px rgba(72, 202, 228, 0.5);
}

html.mode-dark .node-tags-row.row-secondary .node-tag,
body.dark-mode .node-tags-row.row-secondary .node-tag {
    background: rgba(72, 202, 228, 0.2);
    color: #90e0ef;
    border-color: rgba(72, 202, 228, 0.4);
}

html.mode-dark .node-tags-row.row-secondary .node-tag:hover,
body.dark-mode .node-tags-row.row-secondary .node-tag:hover {
    background: rgba(72, 202, 228, 0.3);
    border-color: rgba(72, 202, 228, 0.6);
}

html.mode-dark .node-tags-row.row-tertiary .node-tag,
body.dark-mode .node-tags-row.row-tertiary .node-tag {
    background: rgba(72, 202, 228, 0.1);
    color: #48cae4;
    border-color: rgba(72, 202, 228, 0.25);
}

html.mode-dark .node-tags-row.row-tertiary .node-tag:hover,
body.dark-mode .node-tags-row.row-tertiary .node-tag:hover {
    background: rgba(72, 202, 228, 0.18);
}

html.mode-dark .node-stat,
body.dark-mode .node-stat {
    background: #1a202c !important;
    border: 1px solid #4a5568;
}

html.mode-dark .node-stat-value,
body.dark-mode .node-stat-value {
    color: #48cae4 !important;
}

html.mode-dark .node-stat-label,
body.dark-mode .node-stat-label {
    color: #a0aec0 !important;
}

html.mode-dark .node-section-title,
body.dark-mode .node-section-title {
    color: #48cae4 !important;
}

html.mode-dark .centrality-label,
body.dark-mode .centrality-label {
    color: #e2e8f0 !important;
}

html.mode-dark .centrality-value,
body.dark-mode .centrality-value {
    color: #48cae4 !important;
}

html.mode-dark .centrality-bar-bg,
body.dark-mode .centrality-bar-bg {
    background: #1a202c !important;
}

html.mode-dark .connected-node-item,
html.mode-dark .related-doc-item,
body.dark-mode .connected-node-item,
body.dark-mode .related-doc-item {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}

html.mode-dark .connected-node-item:hover,
html.mode-dark .related-doc-item:hover,
body.dark-mode .connected-node-item:hover,
body.dark-mode .related-doc-item:hover {
    background: rgba(72, 202, 228, 0.15);
    border-color: #48cae4;
}

html.mode-dark .node-detail-info-header .badge,
body.dark-mode .node-detail-info-header .badge {
    background: #0096c7 !important;
}

/* ========== 节点详情浮动面板 - 科幻模式 ========== */
html.mode-scifi .node-detail-float,
body.scifi-mode .node-detail-float {
    background: rgba(10, 15, 25, 0.98);
    border: 1px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 0 40px rgba(0, 217, 255, 0.4), 
                0 10px 50px rgba(0, 0, 0, 0.6),
                inset 0 0 30px rgba(0, 217, 255, 0.05);
}

html.mode-scifi .node-detail-float #nodeDetailContent,
body.scifi-mode .node-detail-float #nodeDetailContent {
    background: transparent;
    color: #e0f7ff;
}

html.mode-scifi .node-detail-title,
body.scifi-mode .node-detail-title {
    color: #00d9ff !important;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

/* 科幻模式 - 三行标签样式 */
html.mode-scifi .node-tags-row.row-primary .node-tag,
body.scifi-mode .node-tags-row.row-primary .node-tag {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    color: #0a0a1a;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5), 
                0 0 25px rgba(0, 255, 136, 0.3);
    text-shadow: none;
}

html.mode-scifi .node-tags-row.row-primary .node-tag:hover,
body.scifi-mode .node-tags-row.row-primary .node-tag:hover {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6), 
                0 0 35px rgba(0, 255, 136, 0.4);
    transform: translateY(-2px);
}

html.mode-scifi .node-tags-row.row-secondary .node-tag,
body.scifi-mode .node-tags-row.row-secondary .node-tag {
    background: rgba(0, 217, 255, 0.15);
    color: #00d9ff;
    border-color: rgba(0, 217, 255, 0.4);
    text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .node-tags-row.row-secondary .node-tag:hover,
body.scifi-mode .node-tags-row.row-secondary .node-tag:hover {
    background: rgba(0, 217, 255, 0.25);
    border-color: rgba(0, 217, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .node-tags-row.row-tertiary .node-tag,
body.scifi-mode .node-tags-row.row-tertiary .node-tag {
    background: rgba(0, 217, 255, 0.08);
    color: #66b3ff;
    border-color: rgba(0, 217, 255, 0.25);
}

html.mode-scifi .node-tags-row.row-tertiary .node-tag:hover,
body.scifi-mode .node-tags-row.row-tertiary .node-tag:hover {
    background: rgba(0, 217, 255, 0.15);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.2);
}

html.mode-scifi .node-stat,
body.scifi-mode .node-stat {
    background: rgba(0, 217, 255, 0.1) !important;
    border: 1px solid rgba(0, 217, 255, 0.3);
}

html.mode-scifi .node-stat-value,
body.scifi-mode .node-stat-value {
    color: #00ff88 !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .node-stat-label,
body.scifi-mode .node-stat-label {
    color: #66b3ff !important;
}

html.mode-scifi .node-section-title,
body.scifi-mode .node-section-title {
    color: #00d9ff !important;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .centrality-label,
body.scifi-mode .centrality-label {
    color: #e0f7ff !important;
}

html.mode-scifi .centrality-value,
body.scifi-mode .centrality-value {
    color: #00ff88 !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

html.mode-scifi .centrality-bar-bg,
body.scifi-mode .centrality-bar-bg {
    background: rgba(0, 20, 40, 0.8) !important;
    border: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .connected-node-item,
html.mode-scifi .related-doc-item,
body.scifi-mode .connected-node-item,
body.scifi-mode .related-doc-item {
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.2);
    color: #e0f7ff;
}

html.mode-scifi .connected-node-item:hover,
html.mode-scifi .related-doc-item:hover,
body.scifi-mode .connected-node-item:hover,
body.scifi-mode .related-doc-item:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .node-detail-info-header .badge,
body.scifi-mode .node-detail-info-header .badge {
    background: linear-gradient(135deg, #00d9ff, #00ff88) !important;
    color: #0a0a1a !important;
    border: none;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .node-detail-header,
body.scifi-mode .node-detail-header {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    border-bottom: 1px solid rgba(0, 217, 255, 0.3);
}

html.mode-scifi .node-detail-header > span,
body.scifi-mode .node-detail-header > span {
    color: #0a0a1a !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

html.mode-scifi .btn-detail-action,
body.scifi-mode .btn-detail-action {
    background: rgba(10, 10, 26, 0.3);
    border: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .btn-detail-action:hover,
body.scifi-mode .btn-detail-action:hover {
    background: rgba(0, 255, 136, 0.3);
    border-color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

html.mode-scifi .btn-close-float,
body.scifi-mode .btn-close-float {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

html.mode-scifi .btn-close-float:hover,
body.scifi-mode .btn-close-float:hover {
    background: rgba(255, 107, 107, 0.4);
    border-color: rgba(255, 107, 107, 0.6);
}

/* ========== 节点详情面板标题区样式 ========== */
.node-detail-info-header {
    border-bottom: 1px solid rgba(0, 180, 216, 0.2);
    padding-bottom: 0.75rem;
}

.node-detail-title-row {
    margin-bottom: 0;
}

.node-detail-cluster-row {
    margin-top: 0.5rem;
}

html.mode-dark .node-detail-info-header,
body.dark-mode .node-detail-info-header {
    border-bottom-color: #4a5568;
}

html.mode-scifi .node-detail-info-header,
body.scifi-mode .node-detail-info-header {
    border-bottom-color: rgba(0, 217, 255, 0.3);
}

/* ========== 欢迎引导模态框 - 黑夜模式 ========== */
html.mode-dark .welcome-guide-content,
body.dark-mode .welcome-guide-content {
    background: #1a202c;
    border: 1px solid #4a5568;
}

html.mode-dark .welcome-guide-header,
body.dark-mode .welcome-guide-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d47a1 50%, #023e8a 100%);
}

html.mode-dark .welcome-guide-body,
body.dark-mode .welcome-guide-body {
    background: #1a202c;
}

html.mode-dark .welcome-intro,
body.dark-mode .welcome-intro {
    background: linear-gradient(135deg, #3d2b08 0%, #2d2007 100%);
    border-left-color: #d69e2e;
    color: #fbd38d;
}

html.mode-dark .guide-section,
body.dark-mode .guide-section {
    background: #2d3748;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.mode-dark .guide-section-header,
body.dark-mode .guide-section-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-bottom-color: #4a5568;
}

html.mode-dark .guide-section-header h5,
body.dark-mode .guide-section-header h5 {
    color: #e2e8f0;
}

html.mode-dark .guide-option,
body.dark-mode .guide-option {
    background: #1a202c;
    border-color: #4a5568;
}

html.mode-dark .guide-option:hover,
body.dark-mode .guide-option:hover {
    border-color: #48cae4;
    background: rgba(72, 202, 228, 0.1);
}

html.mode-dark .guide-option i,
body.dark-mode .guide-option i {
    color: #a0aec0;
}

html.mode-dark .guide-option:hover i,
body.dark-mode .guide-option:hover i {
    color: #48cae4;
}

html.mode-dark .guide-option span,
body.dark-mode .guide-option span {
    color: #e2e8f0;
}

html.mode-dark .guide-option small,
body.dark-mode .guide-option small {
    color: #718096;
}

html.mode-dark .guide-option-highlight,
body.dark-mode .guide-option-highlight {
    background: linear-gradient(135deg, rgba(72, 202, 228, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
    border-color: #48cae4;
}

html.mode-dark .guide-option-highlight::before,
body.dark-mode .guide-option-highlight::before {
    background: linear-gradient(135deg, #48cae4 0%, #0096c7 100%);
}

html.mode-dark .guide-option-highlight i,
body.dark-mode .guide-option-highlight i {
    color: #48cae4;
}

html.mode-dark .guide-option-highlight:hover,
body.dark-mode .guide-option-highlight:hover {
    border-color: #90e0ef;
    background: rgba(72, 202, 228, 0.2);
}

html.mode-dark .guide-list li,
body.dark-mode .guide-list li {
    border-bottom-color: #4a5568;
}

html.mode-dark .guide-list li strong,
body.dark-mode .guide-list li strong {
    color: #e2e8f0;
}

html.mode-dark .guide-warning,
body.dark-mode .guide-warning {
    color: #fc8181;
}

html.mode-dark .guide-ai-item,
body.dark-mode .guide-ai-item {
    background: linear-gradient(135deg, rgba(159, 122, 234, 0.15) 0%, rgba(159, 122, 234, 0.1) 100%);
    border-color: rgba(159, 122, 234, 0.3);
}

html.mode-dark .guide-ai-item i,
body.dark-mode .guide-ai-item i {
    color: #b794f4;
}

html.mode-dark .guide-ai-item strong,
body.dark-mode .guide-ai-item strong {
    color: #e9d8fd;
}

html.mode-dark .guide-ai-item small,
body.dark-mode .guide-ai-item small {
    color: #b794f4;
}

html.mode-dark .guide-help-tip,
body.dark-mode .guide-help-tip {
    background: #2d3748;
    border-color: #4a5568;
}

html.mode-dark .guide-help-tip span,
body.dark-mode .guide-help-tip span {
    color: #a0aec0;
}

html.mode-dark .guide-help-tip > i,
body.dark-mode .guide-help-tip > i {
    color: #63b3ed;
}

html.mode-dark .welcome-guide-footer,
body.dark-mode .welcome-guide-footer {
    background: #2d3748;
    border-top-color: #4a5568;
}

html.mode-dark .welcome-guide-footer .form-check-label,
body.dark-mode .welcome-guide-footer .form-check-label {
    color: #a0aec0;
}

html.mode-dark .guide-footer-buttons .btn-primary,
body.dark-mode .guide-footer-buttons .btn-primary {
    background: linear-gradient(135deg, #48cae4 0%, #0096c7 100%);
    box-shadow: 0 4px 15px rgba(72, 202, 228, 0.4);
}

html.mode-dark .guide-footer-buttons .btn-primary:hover,
body.dark-mode .guide-footer-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #0096c7 0%, #023e8a 100%);
    box-shadow: 0 6px 20px rgba(72, 202, 228, 0.5);
}

html.mode-dark .guide-footer-buttons .btn-outline-secondary,
body.dark-mode .guide-footer-buttons .btn-outline-secondary {
    color: #a0aec0;
    border-color: #4a5568;
}

html.mode-dark .guide-footer-buttons .btn-outline-secondary:hover,
body.dark-mode .guide-footer-buttons .btn-outline-secondary:hover {
    background: #4a5568;
    color: #e2e8f0;
}

/* ========== 欢迎引导模态框 - 科幻模式 ========== */
html.mode-scifi .welcome-guide-content,
body.scifi-mode .welcome-guide-content {
    background: rgba(10, 15, 25, 0.98);
    border: 1px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 0 50px rgba(0, 217, 255, 0.3), 0 0 100px rgba(0, 255, 136, 0.15);
}

html.mode-scifi .welcome-guide-header,
body.scifi-mode .welcome-guide-header {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 50%, #00d9ff 100%);
    animation: scifi-header-glow 3s ease-in-out infinite;
}

html.mode-scifi .welcome-guide-header::before,
body.scifi-mode .welcome-guide-header::before {
    background: radial-gradient(circle, rgba(0, 255, 136, 0.4) 0%, transparent 70%);
}

@keyframes scifi-header-glow {
    0%, 100% { box-shadow: inset 0 -2px 20px rgba(0, 255, 136, 0.3); }
    50% { box-shadow: inset 0 -2px 40px rgba(0, 217, 255, 0.5); }
}

html.mode-scifi .welcome-title-main,
body.scifi-mode .welcome-title-main {
    color: #0a0a1a !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

html.mode-scifi .welcome-title-sub,
body.scifi-mode .welcome-title-sub {
    color: rgba(10, 10, 26, 0.8);
}

html.mode-scifi .welcome-icon-wrapper,
body.scifi-mode .welcome-icon-wrapper {
    background: rgba(10, 10, 26, 0.3);
    color: #0a0a1a;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .welcome-guide-body,
body.scifi-mode .welcome-guide-body {
    background: rgba(10, 15, 25, 0.95);
}

html.mode-scifi .welcome-intro,
body.scifi-mode .welcome-intro {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%);
    border-left-color: #00d9ff;
    color: #00d9ff;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.1);
}

html.mode-scifi .welcome-intro i,
body.scifi-mode .welcome-intro i {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .guide-section,
body.scifi-mode .guide-section {
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.1);
}

html.mode-scifi .guide-section-header,
body.scifi-mode .guide-section-header {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.15) 0%, rgba(0, 255, 136, 0.1) 100%);
    border-bottom-color: rgba(0, 217, 255, 0.2);
}

html.mode-scifi .guide-step-number,
body.scifi-mode .guide-step-number {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    color: #0a0a1a;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.6);
}

html.mode-scifi .guide-section-header h5,
body.scifi-mode .guide-section-header h5 {
    color: #00d9ff;
    text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

html.mode-scifi .guide-option,
body.scifi-mode .guide-option {
    background: rgba(0, 217, 255, 0.05);
    border: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .guide-option:hover,
body.scifi-mode .guide-option:hover {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .guide-option i,
body.scifi-mode .guide-option i {
    color: #66b3ff;
}

html.mode-scifi .guide-option:hover i,
body.scifi-mode .guide-option:hover i {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .guide-option span,
body.scifi-mode .guide-option span {
    color: #e0f7ff;
}

html.mode-scifi .guide-option small,
body.scifi-mode .guide-option small {
    color: rgba(224, 247, 255, 0.6);
}

html.mode-scifi .guide-option-highlight,
body.scifi-mode .guide-option-highlight {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 217, 255, 0.1) 100%);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

html.mode-scifi .guide-option-highlight::before,
body.scifi-mode .guide-option-highlight::before {
    background: linear-gradient(135deg, #00ff88 0%, #00d9ff 100%);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .guide-option-highlight i,
body.scifi-mode .guide-option-highlight i {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

html.mode-scifi .guide-option-highlight:hover,
body.scifi-mode .guide-option-highlight:hover {
    border-color: #00d9ff;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

html.mode-scifi .guide-list li,
body.scifi-mode .guide-list li {
    border-bottom-color: rgba(0, 217, 255, 0.15);
}

html.mode-scifi .guide-list li strong,
body.scifi-mode .guide-list li strong {
    color: #e0f7ff;
}

html.mode-scifi .guide-warning,
body.scifi-mode .guide-warning {
    color: #ff6b6b;
    text-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
}

html.mode-scifi .guide-ai-item,
body.scifi-mode .guide-ai-item {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.15) 0%, rgba(196, 69, 105, 0.1) 100%);
    border: 1px solid rgba(255, 107, 157, 0.3);
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.1);
}

html.mode-scifi .guide-ai-item i,
body.scifi-mode .guide-ai-item i {
    color: #ff6b9d;
    text-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
}

html.mode-scifi .guide-ai-item strong,
body.scifi-mode .guide-ai-item strong {
    color: #ffb3cc;
}

html.mode-scifi .guide-ai-item small,
body.scifi-mode .guide-ai-item small {
    color: #ff6b9d;
}

html.mode-scifi .guide-help-tip,
body.scifi-mode .guide-help-tip {
    background: rgba(0, 20, 40, 0.6);
    border: 1px dashed rgba(0, 217, 255, 0.3);
}

html.mode-scifi .guide-help-tip span,
body.scifi-mode .guide-help-tip span {
    color: #66b3ff;
}

html.mode-scifi .guide-help-tip > i,
body.scifi-mode .guide-help-tip > i {
    color: #00d9ff;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

html.mode-scifi .guide-help-tip .btn-outline-primary,
body.scifi-mode .guide-help-tip .btn-outline-primary {
    color: #00ff88;
    border-color: #00ff88;
}

html.mode-scifi .guide-help-tip .btn-outline-primary:hover,
body.scifi-mode .guide-help-tip .btn-outline-primary:hover {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

html.mode-scifi .welcome-guide-footer,
body.scifi-mode .welcome-guide-footer {
    background: rgba(10, 15, 25, 0.95);
    border-top: 1px solid rgba(0, 217, 255, 0.2);
}

html.mode-scifi .welcome-guide-footer .form-check-label,
body.scifi-mode .welcome-guide-footer .form-check-label {
    color: #66b3ff;
}

html.mode-scifi .welcome-guide-footer .form-check-input,
body.scifi-mode .welcome-guide-footer .form-check-input {
    accent-color: #00d9ff;
}

html.mode-scifi .guide-footer-buttons .btn-primary,
body.scifi-mode .guide-footer-buttons .btn-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00d9ff 100%);
    color: #0a0a1a;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5), 0 0 40px rgba(0, 217, 255, 0.3);
    animation: scifi-btn-pulse 2s ease-in-out infinite;
}

@keyframes scifi-btn-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.5), 0 0 40px rgba(0, 217, 255, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 136, 0.7), 0 0 60px rgba(0, 217, 255, 0.5); }
}

html.mode-scifi .guide-footer-buttons .btn-primary:hover,
body.scifi-mode .guide-footer-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.6), 0 0 60px rgba(0, 255, 136, 0.4);
}

html.mode-scifi .guide-footer-buttons .btn-outline-secondary,
body.scifi-mode .guide-footer-buttons .btn-outline-secondary {
    color: #66b3ff;
    border-color: rgba(0, 217, 255, 0.3);
}

html.mode-scifi .guide-footer-buttons .btn-outline-secondary:hover,
body.scifi-mode .guide-footer-buttons .btn-outline-secondary:hover {
    background: rgba(0, 217, 255, 0.15);
    border-color: #00d9ff;
    color: #00d9ff;
}