/* ===== 暗黑模式样式 - 基于个人网站风格 ===== */

body.dark-mode {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --input-bg: #374151;
  background: var(--bg-primary);
}

body.dark-mode .novel-container {
  box-shadow: none;
}

body.dark-mode .header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .navbar {
  background: var(--bg-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-btn {
  background: rgba(255, 107, 53, 0.15);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-mode .nav-btn:hover {
  background: var(--primary-color);
  color: white;
}

body.dark-mode .nav-link {
  color: var(--text-primary);
}

body.dark-mode .nav-link:hover {
  color: var(--primary-color);
}

body.dark-mode .nav-divider {
  color: var(--border-color);
}

body.dark-mode .config-section {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

body.dark-mode .config-section:hover {
  background: var(--bg-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.dark-mode .form-input:hover,
body.dark-mode .form-select:hover,
body.dark-mode .form-textarea:hover {
  border-color: var(--primary-color);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-textarea:focus {
  border-color: var(--primary-color);
  background: #1f2937;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

body.dark-mode .output-box {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.dark-mode .output-box:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: var(--primary-color);
}

body.dark-mode .stats-bar {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

body.dark-mode .tips-box {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(40, 167, 69, 0.08) 100%);
  border-left-color: var(--primary-color);
  color: var(--text-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.dark-mode .tips-box strong {
  color: var(--primary-color);
}

body.dark-mode .tag {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(40, 167, 69, 0.12) 100%);
  color: var(--primary-color);
  border-color: rgba(255, 107, 53, 0.3);
}

body.dark-mode .tag:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(40, 167, 69, 0.2) 100%);
}

body.dark-mode .tag.active {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  border-color: transparent;
}

body.dark-mode .btn-secondary {
  background: var(--bg-secondary);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-mode .btn-secondary:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
}

body.dark-mode .btn-primary:hover::before {
  background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .chapter-nav {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.dark-mode #chapterNavInfo {
  color: var(--text-primary);
}

body.dark-mode .checkbox-group:hover {
  background: var(--bg-secondary);
}

body.dark-mode .checkbox-group label {
  color: var(--text-secondary);
}

body.dark-mode .slider-group label {
  color: var(--text-secondary);
}

body.dark-mode .slider-group input[type="range"] {
  background: var(--border-color);
}

body.dark-mode .slider-group input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
}

body.dark-mode .spinner {
  border-color: var(--border-color);
  border-top-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

body.dark-mode .error-message {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: #fecaca;
  border-left-color: #ef4444;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .history-toggle {
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

body.dark-mode .history-toggle:hover {
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.5);
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-dark);
}

/* 左右分割布局暗黑模式 */
body.dark-mode .left-panel {
  border-right-color: var(--border-color);
  background: var(--bg-primary);
}

body.dark-mode .right-panel {
  background: var(--bg-primary);
}

body.dark-mode .output-section {
  background: var(--bg-primary);
}

body.dark-mode .output-header {
  border-bottom-color: var(--border-color);
}

@media (max-width: 768px) {
  body.dark-mode .left-panel {
    border-bottom-color: var(--border-color);
  }
}