/* 暗色模式：html 和所有容器背景 */
html:has(body.dark-mode),
body.dark-mode,
body.dark-mode .typora-export-content,
body.dark-mode .typora-export,
body.dark-mode #write {
  background-color: #1a1a1a !important;
}

/* 暗色模式变量覆盖 */
body.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --bg-contents: #1a1a1a;
  --bg-write: #242424;
  --color-text: #e0e0e0;
  --color-em: #f0f0f0;
  --color-weak: #aaa;
  --color-weakest: #888;
  --bg-color-1: #242424;
  --bg-color-2: #2a2a2a;
  --bg-color-3: #2f2f2f;
  --bg-color-4: #333;
  --bg-color-5: #3a3a3a;
  --bg-quote: #2a2a2a;
  --bg-code: #2f2f2f;
  --bg-code-block: #2f2f2f;
  --shadow: #00000060 0px 3px 12px;
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode #write {
  background: #242424;
  border-color: rgba(255,255,255,0.1);
  color: #e0e0e0;
}

/* 暗色模式下所有文字 */
body.dark-mode,
body.dark-mode p,
body.dark-mode li,
body.dark-mode ol,
body.dark-mode ul,
body.dark-mode span,
body.dark-mode div,
body.dark-mode center,
body.dark-mode em {
  color: #e0e0e0;
}

/* 暗色模式下标题强制白色 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode #write h1,
body.dark-mode #write h2,
body.dark-mode #write h3,
body.dark-mode #write h1 *,
body.dark-mode #write h2 *,
body.dark-mode #write h3 * {
  color: #f0f0f0 !important;
  --color-title: #f0f0f0;
  --color-title-h1: #f0f0f0;
  --color-title-h2: #f0f0f0;
  --color-title-h3: #f0f0f0;
}

body.dark-mode blockquote {
  background: #2a2a2a;
  color: #bbb;
}

body.dark-mode blockquote * {
  color: #bbb;
}

/* 暗色模式下按钮 */
body.dark-mode .button {
  background-color: #2c2c2c !important;
  color: #c8c8c8 !important;
  border-color: #444 !important;
}

body.dark-mode .button:before {
  background-color: #3a3a3a !important;
}

body.dark-mode .button:after {
  background-color: #2c2c2c !important;
}

body.dark-mode .button:hover {
  background-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

body.dark-mode .button .text {
  color: #c8c8c8 !important;
}

/* 暗色模式下表格 */
body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode figure {
  background: transparent;
}

/* AI 资讯标题链接 */
body.dark-mode .ai-title,
body.dark-mode .ai-title a {
  color: #7ecfff !important;
  border-bottom-color: #7ecfff !important;
}

body.dark-mode .ai-title a:hover {
  color: #a8dfff !important;
  opacity: 1 !important;
}

body.dark-mode .ai-detail {
  color: #aaa !important;
}

body.dark-mode .ai-source {
  color: #777 !important;
}

/* 切换按钮 */
#theme-toggle {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 999;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #333;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.85);
}

body.dark-mode #theme-toggle {
  border-color: #555;
  background: rgba(40,40,40,0.9);
  color: #e0e0e0;
}

#theme-toggle:hover {
  opacity: 0.8;
}