/* ================================================================
   Leowh 暗色主题（theme-dark.css）
   所有页面统一加载，规则全部挂在 html.dark 下 —— 浅色模式零影响。
   色板取自 md-to.com 的暖黑体系：
     背景 #171411 → 卡片 #1D1A16 → 次级面 #2C2621 → 边框 #352E27
     正文 #EFECE7 / 次要 #C9C4BC / 弱化 #A39C8F
   品牌色 indigo #4F46E5 暗色下提亮为 #818CF8（indigo-400）
   ================================================================ */

/* ----------------
   1. 根基础
   ---------------- */
html.dark {
  background: #171411;
  color-scheme: dark;
}

html.dark body {
  background: #171411;
  color: #EFECE7;
}

/* 自定义滚动条（md-to 同款暖色滚动条） */
html.dark ::-webkit-scrollbar-track {
  background: #231F1A;
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(98, 89, 80, 0.6);
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(126, 115, 103, 0.8);
}
html.dark * {
  scrollbar-color: rgba(98, 89, 80, 0.6) rgba(35, 31, 26, 0.5);
}

/* 选中文字颜色 */
html.dark ::selection {
  background: rgba(129, 140, 248, 0.35);
  color: #EFECE7;
}

/* ----------------
   2. CSS 变量覆盖
   ---------------- */

/* 2a. 工具页标准变量（各工具页本地 styles.css 定义，此处统一暗色化） */
html.dark {
  --bg: #171411;
  --bg-alt: #1D1A16;
  --surface: #1D1A16;
  --border: #352E27;
  --border-strong: #4A4239;
  --text: #EFECE7;
  --text-secondary: #C9C4BC;
  --text-muted: #A39C8F;
  --primary: #818CF8;
  --primary-hover: #A5B4FC;
  --primary-light: rgba(129, 140, 248, 0.14);
  --secondary: #FB923C;
  --accent: #F472B6;
  --success: #34D399;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* 2b. 博客编辑风变量（blog.css） */
html.dark {
  --text-tertiary: #A39C8F;
  --text-subtle: #8C867D;
  --text-muted: #8C867D;
  --text-quiet: #8C867D;
  --border-light: #26211D;
  --border-hover: #4A4239;
  --highlight: #EFECE7;
  --tag-bg: #2C2621;
  --tag-text: #A39C8F;
}

/* 2c. 图片库 / 博客共享设计令牌（styles.css :root，image 页使用）
   blog.css 的 --accent 是 #1A1A1A（黑白编辑风），暗色下反转为主文字色 */
html.dark {
  --surface: #1D1A16;
  --text-primary: #EFECE7;
  --text-secondary: #C9C4BC;
  --border: #26211D;
  --border-strong: #352E27;
  --accent: #818CF8;
  --accent-light: rgba(129, 140, 248, 0.14);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* blog 专属的 accent（黑色编辑风），需独立于上面的 --accent 覆盖 */
html.dark .blog-body {
  --accent: #EFECE7;
  --highlight: #EFECE7;
}

/* ----------------
   3. Tailwind 中性色类映射
   ---------------- */

/* 背景 */
html.dark .bg-white { background-color: #1D1A16; }
html.dark body.bg-white { background-color: #171411; }
html.dark .bg-gray-50,
html.dark .bg-neutral-50,
html.dark .bg-slate-50 { background-color: #1D1A16; }
html.dark .bg-gray-100,
html.dark .bg-neutral-100,
html.dark .bg-slate-100 { background-color: #2C2621; }
html.dark .bg-gray-200,
html.dark .bg-neutral-200 { background-color: #352E27; }

/* 文字 */
html.dark .text-neutral-900,
html.dark .text-gray-900,
html.dark .text-slate-900 { color: #EFECE7; }
html.dark .text-neutral-800,
html.dark .text-gray-800,
html.dark .text-slate-800 { color: #EFECE7; }
html.dark .text-neutral-700,
html.dark .text-gray-700,
html.dark .text-slate-700 { color: #D6D2CB; }
html.dark .text-neutral-600,
html.dark .text-gray-600,
html.dark .text-slate-600 { color: #C9C4BC; }
html.dark .text-neutral-500,
html.dark .text-gray-500,
html.dark .text-slate-500 { color: #A39C8F; }
html.dark .text-neutral-400,
html.dark .text-gray-400,
html.dark .text-slate-400 { color: #8C867D; }
html.dark .text-gray-300 { color: #5C5750; }
html.dark .text-black { color: #EFECE7; }
/* 自定义色板 dark:'#1E293B'（工具主页/404 大标题） */
html.dark .text-dark { color: #EFECE7; }

/* 边框 */
html.dark .border-gray-100,
html.dark .border-neutral-100 { border-color: #26211D; }
html.dark .border-gray-200,
html.dark .border-neutral-200,
html.dark .border-slate-200 { border-color: #352E27; }
html.dark .border-gray-300,
html.dark .border-neutral-300 { border-color: #4A4239; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #352E27; }

/* 占位文字 */
html.dark .placeholder-gray-400::placeholder,
html.dark .placeholder-gray-500::placeholder { color: #8C867D; }
html.dark #searchInput::placeholder { color: #8C867D; }

/* ----------------
   3b. Tailwind hover 变体类映射（独立类名，仅含 :hover 基态）
   ---------------- */
html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-neutral-900:hover { color: #EFECE7; }
html.dark .hover\:text-gray-400:hover { color: #A39C8F; }
html.dark .hover\:border-gray-200:hover { border-color: #352E27; }
html.dark .hover\:border-neutral-400:hover { border-color: #4A4239; }
html.dark .hover\:border-neutral-900:hover { border-color: #EFECE7; }
html.dark .hover\:border-indigo-200:hover { border-color: rgba(129, 140, 248, 0.35); }
html.dark .hover\:bg-neutral-50:hover { background-color: #2C2621; }
html.dark .hover\:bg-white:hover { background-color: #2C2621; }
html.dark .hover\:bg-pink-100:hover { background-color: #4C2438; }
html.dark .hover\:bg-amber-100:hover { background-color: #4C3D24; }
html.dark .hover\:bg-indigo-100:hover { background-color: #24254C; }

/* group-hover 变体（如工具主页卡片：悬停时组内元素的颜色变化） */
html.dark .group:hover .group-hover\:text-gray-900 { color: #EFECE7; }
html.dark .group:hover .group-hover\:text-indigo-600 { color: #A5B4FC; }
html.dark .group:hover .group-hover\:border-indigo-200 { border-color: rgba(129, 140, 248, 0.35); }
html.dark .group:hover .group-hover\:bg-pink-100 { background-color: #4C2438; }
html.dark .group:hover .group-hover\:bg-indigo-100 { background-color: #24254C; }
html.dark .group:hover .group-hover\:bg-amber-100 { background-color: #4C3D24; }
html.dark .focus\:border-neutral-900:focus { border-color: #EFECE7; }

/* ----------------
   4. 任意值颜色类映射（text-[#xxx] 等）
   ---------------- */
html.dark .text-\[\#1E293B\] { color: #EFECE7; }  /* 工具页标题 */
html.dark .text-\[\#71717A\] { color: #A39C8F; }  /* 工具页描述 */
html.dark .text-\[\#52525B\] { color: #C9C4BC; }
html.dark .text-\[\#555555\] { color: #C9C4BC; }
html.dark .text-\[\#A1A1AA\],
html.dark .text-\[\#8A8A8A\],
html.dark .text-\[\#B0B0B0\] { color: #8C867D; }
html.dark .text-\[\#D6D3D1\] { color: #8C867D; }
html.dark .text-\[\#4F46E5\] { color: #818CF8; }
html.dark .border-\[\#4F46E5\] { border-color: #818CF8; }
html.dark .text-\[\#F97316\] { color: #FB923C; }
html.dark .text-\[\#EC4899\] { color: #F472B6; }
html.dark .border-\[\#E8E6E3\],
html.dark .border-\[\#E7E5E4\] { border-color: #352E27; }
html.dark .bg-\[\#FAFAF9\] { background-color: #171411; }
html.dark .via-\[\#CBD5E1\] { --tw-gradient-via: #352E27; } /* 工具页顶部分隔线 */

/* ----------------
   5. 品牌色 indigo（暗色提亮，对应 md-to 的 primary 提亮逻辑）
   ---------------- */
html.dark .text-indigo-600,
html.dark .text-indigo-500,
html.dark .text-indigo-700 { color: #818CF8; }
html.dark .hover\:text-indigo-700:hover,
html.dark .hover\:text-indigo-600:hover { color: #A5B4FC; }
html.dark .bg-indigo-100 { background-color: #232348; }
html.dark .border-indigo-100 { border-color: #232348; }
html.dark .border-indigo-200,
html.dark .border-indigo-300 { border-color: rgba(129, 140, 248, 0.35); }
/* 实底按钮 bg-indigo-600 保持原样（暗底上协调） */

/* ----------------
   6. 彩色类映射（500/600 文字提亮到 400 档；*-50 浅底变 tint 深底）
   ---------------- */
html.dark .text-amber-500, html.dark .text-amber-600 { color: #FBBF24; }
html.dark .text-orange-500, html.dark .text-orange-600 { color: #FB923C; }
html.dark .text-red-500, html.dark .text-red-600 { color: #F87171; }
html.dark .text-rose-500, html.dark .text-rose-600 { color: #FB7185; }
html.dark .text-pink-500, html.dark .text-pink-600 { color: #F472B6; }
html.dark .text-fuchsia-500 { color: #E879F9; }
html.dark .text-purple-500, html.dark .text-purple-600 { color: #C084FC; }
html.dark .text-violet-500, html.dark .text-violet-600 { color: #A78BFA; }
html.dark .text-blue-500, html.dark .text-blue-600 { color: #60A5FA; }
html.dark .text-sky-500, html.dark .text-sky-600 { color: #38BDF8; }
html.dark .text-cyan-500, html.dark .text-cyan-600 { color: #22D3EE; }
html.dark .text-teal-500, html.dark .text-teal-600 { color: #2DD4BF; }
html.dark .text-emerald-500, html.dark .text-emerald-600 { color: #34D399; }
html.dark .text-green-500, html.dark .text-green-600 { color: #4ADE80; }
html.dark .text-lime-500 { color: #A3E635; }
html.dark .text-yellow-500 { color: #FACC15; }

html.dark .bg-amber-50 { background-color: #372D1B; }
html.dark .bg-orange-50 { background-color: #37261B; }
html.dark .bg-red-50 { background-color: #371B1B; }
html.dark .bg-rose-50 { background-color: #371B1F; }
html.dark .bg-pink-50 { background-color: #371B29; }
html.dark .bg-fuchsia-50 { background-color: #331B37; }
html.dark .bg-purple-50 { background-color: #291B37; }
html.dark .bg-violet-50 { background-color: #231B37; }
html.dark .bg-indigo-50 { background-color: #1B1B37; }
html.dark .bg-blue-50 { background-color: #1B2537; }
html.dark .bg-sky-50 { background-color: #1B2E37; }
html.dark .bg-cyan-50 { background-color: #1B3437; }
html.dark .bg-teal-50 { background-color: #1B3734; }
html.dark .bg-emerald-50 { background-color: #1B372E; }
html.dark .bg-green-50 { background-color: #1B3725; }
html.dark .bg-lime-50 { background-color: #2C371B; }
html.dark .bg-yellow-50 { background-color: #37301B; }

/* ----------------
   7. 公共组件暗色规则
   ---------------- */

/* 导航：滚动后状态 */
html.dark #header.scrolled {
  background: rgba(23, 20, 17, 0.88);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
html.dark #header.scrolled a:not(.flex) {
  color: #EFECE7;
}

/* 导航：主题切换按钮图标（月亮=浅色态显示，太阳=暗色态显示） */
.theme-toggle-btn .sun-icon { display: none; }
html.dark .theme-toggle-btn .moon-icon { display: none; }
html.dark .theme-toggle-btn .sun-icon { display: block; }

/* 导航：移动端菜单（nav.js 注入 bg-white，由 .bg-white 映射兜底，这里只补细节） */
html.dark #mobileMenu {
  background-color: #171411;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* 首页搜索下拉 */
html.dark #searchDropdown {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.55);
}

/* 首页 Hero 装饰：网格与点阵暗色下用白线低透明 */
html.dark .hero-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
html.dark .hero-dot-pattern {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
/* Hero 柔光保持 indigo，微降透明度避免刺眼 */
html.dark .hero-glow {
  background: radial-gradient(ellipse 55% 45% at 50% -8%, rgba(129, 140, 248, 0.14), transparent 70%);
}

/* 键盘快捷键提示 */
html.dark .kbd {
  border-color: #352E27;
  border-bottom-color: #4A4239;
  background: #1D1A16;
  color: #A39C8F;
}

/* 示例入口小胶囊 */
html.dark .chip {
  color: #A39C8F;
  background: #1D1A16;
  border-color: #352E27;
}
html.dark .chip:hover {
  color: #A5B4FC;
  border-color: #818CF8;
  background: rgba(129, 140, 248, 0.12);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

/* 工具主页分类筛选按钮 */
html.dark .filter-btn { color: #A39C8F; }
html.dark .filter-btn:hover,
html.dark .filter-btn.active { color: #EFECE7; }

/* 工具主页分类标签栏（亮色取反：白底→黑底，选中黑底→暖白底） */
html.dark .tab-btn {
  border-color: #26211D;
  background: #171411;
  color: #C9C4BC;
}
html.dark .tab-btn:hover {
  border-color: #8C867D;
  color: #EFECE7;
}
html.dark .tab-btn.active {
  background: #EFECE7;
  border-color: #EFECE7;
  color: #171411;
}
html.dark .tab-count {
  color: #A39C8F;
  background: #2C2621;
}
html.dark .tab-btn.active .tab-count {
  color: rgba(23, 20, 17, 0.85);
  background: rgba(23, 20, 17, 0.15);
}

/* 首页 Bento 卡片 */
html.dark .bento-card:hover {
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
html.dark .bento-icon {
  border-color: rgba(255, 255, 255, 0.08);
  background: #1D1A16;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.dark .bento-card:hover .bento-icon {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* 区块标题箭头链接 */
html.dark .link-arrow { color: #818CF8; }
html.dark .link-arrow:hover { color: #A5B4FC; }

/* 轻提示 Toast（styles.css 用 var(--text-primary) 作底，暗色下自动反转） */
html.dark .toast {
  background: #EFECE7;
  color: #171411;
}

/* ----------------
   8. 工具页组件补充
   工具页本地 styles.css 模板中规则体内的硬编码颜色，
   在此统一暗色化（变量之外的兜底）。
   ---------------- */
html.dark .guide-section {
  background: #1D1A16;
}
html.dark .guide-toggle-title,
html.dark .guide-item-title {
  color: #EFECE7;
}
/* 各工具页内部少量硬编码深色文字组件 */
html.dark .op-btn--outline,
html.dark .dp-btn,
html.dark .output-display b,
html.dark .nginx-op,
html.dark .calculator,
html.dark .bmi-indicator {
  color: #EFECE7;
}
/* JSON 语法高亮等弱色 */
html.dark .json-null { color: #A39C8F; }
html.dark .json-bracket { color: #C9C4BC; }
/* 分组按钮边框 */
html.dark .action-bar-group { border-color: #352E27; }
/* Diff 新增行标记底 */
html.dark .diff-line-add .diff-line-num,
html.dark .unified-add .unified-line-num,
html.dark .unified-add .unified-line-marker {
  background: #2C2621;
}

/* ----------------
   9. 相关工具组件（related-tools.js 动态注入，类名固定）
   ---------------- */

/* 导航 / 页脚 Logo：SVG 文字暗色下变白 */
html.dark #header svg text,
html.dark footer svg text {
  fill: #EFECE7;
}

/* 相关工具 / 更多同类工具（rt 注入 CSS 硬编码浅色，此处暗色化） */
html.dark .rt-section-title {
  color: #EFECE7;
}
html.dark .rt-section-title .rt-count {
  color: #A39C8F;
}
html.dark .rt-card {
  background: #1D1A16;
  border-color: #26211D;
}
html.dark .rt-card:hover {
  border-color: #4A4239;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html.dark .rt-card-name {
  color: #EFECE7;
}
html.dark .rt-card-desc {
  color: #A39C8F;
}
html.dark .rt-pill {
  background: #2C2621;
  color: #C9C4BC;
}
html.dark .rt-pill:hover {
  background: #352E27;
  color: #EFECE7;
}
html.dark .rt-back-link {
  background: #1D1A16;
  border-color: #352E27;
  color: #C9C4BC;
}
html.dark .rt-back-link:hover {
  background: #2C2621;
  border-color: #4A4239;
  color: #EFECE7;
}
html.dark .rt-breadcrumb,
html.dark .rt-breadcrumb a {
  color: #C9C4BC;
}
html.dark .rt-breadcrumb a:hover {
  color: #EFECE7;
}
html.dark .rt-breadcrumb .rt-sep {
  color: #4A4239;
}

/* ----------------
   10. 图片站 hero：暗色下压暗背景大图（白字白框仍浮于其上）
   ---------------- */
html.dark .hero__bg {
  filter: brightness(0.55) saturate(0.9);
}
html.dark .hero__gradient {
  opacity: 0.85;
}

/* ----------------
   11. 细节收尾
   ---------------- */

/* 工具主页：分类标题分隔线（内联 style 硬编码浅灰渐变） */
html.dark .cat-section-header::after {
  background: linear-gradient(to right, #352E27, transparent);
}

/* 工具主页 hero：indigo-50 淡紫白渐变装饰（Tailwind 渐变类走变量，需覆盖其 --tw-gradient-from） */
html.dark .from-indigo-50\/30 {
  --tw-gradient-from: rgb(27 27 55 / 0.3);
}

/* 博客详情页：返回博客按钮 */
html.dark .article-back-link {
  color: #C9C4BC;
  border-color: #352E27;
  background: #1D1A16;
}
html.dark .article-back-link:hover {
  border-color: #4A4239;
  background: #2C2621;
  color: #EFECE7;
}

/* 图片站 hero：搜索框暗色化（浮于压暗大图之上） */
html.dark .hero__search {
  background: #1D1A16;
}
html.dark .hero__search input {
  color: #EFECE7;
}

/* 图片站分页：激活页码暗色下为白底黑字（原深底白字反转后变成白底白字） */
html.dark .pager__num.is-active {
  background: #EFECE7;
  color: #171411;
  border-color: #EFECE7;
}

/* ----------------
   12. 对比度修正（WCAG）：暗色下文字可见性
   ---------------- */

/* 工具页「使用说明」内联硬编码（200 页模板统一，!important 压过内联样式）
   #3F3F46 标题（对比度 1.76 → 不可见）、#71717A 段落（3.8 → 弱） */
html.dark [style*="color:#3F3F46"] {
  color: #EFECE7 !important;
}
html.dark [style*="color:#71717A"] {
  color: #A39C8F !important;
}

/* 壁纸详情页：作者徽章（浅灰底硬编码 + 变量文字 → 白底白字）、标签 hover、相关卡片图片占位 */
html.dark .author-card__badge {
  background: #2C2621;
}
html.dark .tag-pill:hover {
  background: #2C2621;
}
html.dark .related-card {
  background: #2C2621;
}
/* 登录页验证码格子：亮色是近白底，暗色 1:1 取反为纯背景黑（focus 对应亮色的纯白 → 略浮起一档） */
html.dark .code-cell {
  background: #171411;
}
html.dark .code-cell:focus {
  background: #1D1A16;
}
/* 登录页发送验证码按钮：全硬编码浅色（白底浅灰字） */
html.dark .send-btn {
  background: #1D1A16;
  border-color: #352E27;
  color: #C9C4BC;
}
html.dark .send-btn:hover:not(:disabled) {
  border-color: #EFECE7;
  color: #EFECE7;
}
/* 登录按钮：亮色为近黑底白字，暗色 1:1 取反为暖白底深字（hover 同逻辑反转） */
html.dark #loginBtn {
  background: #EFECE7;
  color: #171411;
}
html.dark #loginBtn:hover:not(:disabled) {
  background: #FFFFFF;
  color: #171411;
}
/* 演示模式验证码小胶囊：同取反逻辑（深底白字 → 浅底深字） */
html.dark #demoCode {
  background: #EFECE7;
  color: #171411;
}

/* 壁纸详情页「未找到」返回按钮：白字 + var(--text-primary) 深底，暗色下底反转成暖白（白底白字） */
html.dark .not-found__link {
  color: #171411;
}
html.dark .not-found__link:hover {
  background: #C9C4BC;
  color: #171411;
}

/* 图片站 Lightbox 主按钮：白底按钮在暗色下文字反转成白字（白底白字） */
html.dark .lb__btn--primary {
  color: #171411;
}

/* 工具页输出/结果框浅色硬编码（morse、unicode 等 --result 类） */
html.dark .morse-textarea--result,
html.dark .unicode-textarea--result {
  background: #1D1A16;
}
/* 代码输入框 focus 态浅色底（barcode/qrcode 等 3 个工具） */
html.dark .code-input:focus {
  background: #1D1A16;
}
/* 红色警告提示底 */
html.dark .results-error,
html.dark .forge-warning {
  background: #371B1B;
}
/* 示例胶囊 hover 浅黄底 */
html.dark .example-pill:hover {
  background: #2C2621;
}
/* 加载容器浅灰底 */
html.dark .spinner-wrap {
  background: #2C2621;
}
/* 复制按钮统一透明底（number-chinese 等个别工具硬编码了 70% 白底） */
html.dark .btn-copy {
  background: transparent;
}
/* hover 态浅色底：危险/删除按钮（红 tint）、次级按钮（紫 tint）、标题反显 */
html.dark .action-btn--danger:hover,
html.dark .output-action-btn--danger:hover,
html.dark .batch-remove:hover {
  background: #371B1B;
}
html.dark .op-btn--secondary:hover {
  background: rgba(129, 140, 248, 0.14);
}
html.dark .reverse-title:hover {
  background: #2C2621;
}