/* ============================================================
   暗色模式覆盖层 —— 仅在 <html class="dark"> 时生效。
   采用「未分层 + 更高选择器特异度」的普通 CSS，稳定压过 Tailwind v4
   @layer utilities 里的同名工具类；渐变 band / 彩色图标卡等保持原样。
   ============================================================ */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }

/* 基础画布与正文 */
html.dark body { background-color: #0b1220; color: #cbd5e1; transition: background-color .25s ease, color .25s ease; }
html.dark main { color: #cbd5e1; }

/* 白色卡面 → 深蓝灰 */
html.dark .bg-white { background-color: #17203a; }
html.dark .bg-slate-50 { background-color: #111a2e; }
html.dark .bg-slate-100 { background-color: #202c47; }
html.dark .bg-slate-800 { background-color: #0b1220; } /* 页脚本就是深色，收得更黑 */

/* 文字层级 */
html.dark .text-slate-800, html.dark .text-slate-700 { color: #f1f5f9; }
html.dark .text-slate-600 { color: #cbd5e1; }
html.dark .text-slate-500 { color: #94a3b8; }
html.dark .text-slate-400 { color: #7c8aa5; }
html.dark .text-slate-300 { color: #9fb0c9; }

/* 边框 / 分隔 / 环 */
html.dark .border-slate-50, html.dark .border-slate-100,
html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #2a3752; }
html.dark .divide-slate-50 > * + *, html.dark .divide-slate-100 > * + *,
html.dark .divide-slate-200 > * + * { border-color: #2a3752; }
html.dark .ring-slate-100 { --tw-ring-color: #26324c; }

/* 悬停面 */
html.dark .hover\:bg-slate-50:hover { background-color: #202c47; }
html.dark .hover\:bg-slate-100:hover { background-color: #26324c; }
html.dark .hover\:bg-white:hover { background-color: #1c2742; }
html.dark .hover\:text-brand-600:hover, html.dark .hover\:text-brand-700:hover,
html.dark .hover\:text-brand-500:hover { color: #a5b4fc; }

/* 品牌/彩色柔光芯片：底色转暗、文字转亮，保持可辨 */
html.dark .bg-brand-50 { background-color: #1b2440; }
html.dark .text-brand-600, html.dark .text-brand-700 { color: #b7bdff; }
html.dark .text-brand-500 { color: #99a3ff; }
html.dark .bg-emerald-50 { background-color: #10261f; } html.dark .text-emerald-600 { color: #6ee7b7; }
html.dark .bg-amber-50 { background-color: #2a2412; }  html.dark .text-amber-600 { color: #fcd34d; }
html.dark .bg-sky-50 { background-color: #10233a; }    html.dark .text-sky-600 { color: #7dd3fc; }
html.dark .bg-indigo-50 { background-color: #1a1e44; } html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .bg-rose-50 { background-color: #2c1620; }   html.dark .text-rose-600 { color: #fda4af; }

/* 教程正文富文本 */
html.dark .rt-content { color: #cbd5e1; }
html.dark .rt-content h3 { color: #f1f5f9; }
html.dark .rt-content code { background-color: #26324c; color: #e2e8f0; }
html.dark .rt-content th { background-color: #202c47; color: #f1f5f9; }
html.dark .rt-content th, html.dark .rt-content td { border-color: #2a3752; }
html.dark .rt-content tr:nth-child(even) td { background-color: #141d33; }
html.dark .rt-content blockquote { background-color: #161f38; color: #b7bdff; }

/* 顶部提示条（Tailwind 加载失败通知）在暗色下不至于刺眼 */
html.dark #__twFailNotice { background:#3b2f14; color:#fcd34d; border-bottom-color:#7c5a12; }

/* 品牌渐变（导航栏 / 页面顶部横幅 / 按钮 / 分页选中态）→ 深靛紫，白色文字依旧清晰 */
html.dark .bg-brand-grad { background-image: linear-gradient(135deg, #232a4d 0%, #2f2347 100%); }
html.dark header.bg-brand-grad { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); }

/* 移动端抽屉（导航栏下方展开栏） */
html.dark .bg-grape-600\/95 { background-color: rgba(26, 23, 46, .96); }