/* ==========================================================================
   深空薄荷 · 深色模式（独立设计方案）
   --------------------------------------------------------------------------
   使用方式：html 元素设置 data-mode="dark" 时整套生效；
             data-mode="light" 或未设置时本文件零命中，亮色原样。
   设计原则：
     1. 深色模式锁定专属主题色（深空薄荷 #34d399），不跟随 8 套 data-theme；
        本文件必须在 style.css / course.css 之后引入，靠加载顺序覆盖主题变量。
     2. 所有规则均以 [data-mode="dark"] 为前缀，不污染亮色路径。
     3. course.css / style.css 源文件零改动，回滚时删除本文件即可。
   ========================================================================== */

/* ========== 1. 设计令牌 ========== */
[data-mode="dark"] {
    /* --- 中性色（深空石板系） --- */
    --color-bg-page: #0d1420;
    --color-bg-surface: #182338;
    --color-bg-elevated: #1f2b41;       /* 比 surface 更亮：突出"上层"卡片 */
    --color-bg-base: #0f1828;            /* 比 page 略亮、比 surface 更暗：凹陷子项 */
    --color-bg-hover: #223050;
    --color-bg-muted: #1c2842;
    --color-bg-inverse: #e2e8f0;
    --color-bg-inverse-soft: #cbd5e1;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-disabled: #475569;
    --color-text-on-inverse: #182338;
    --color-border: #2b3a57;
    --color-border-hover: #3d527a;
    --color-border-muted: #24324e;

    /* --- 深空薄荷主题色（深色专属，锁定不随 data-theme 变化） --- */
    --theme-primary: #34d399;
    --theme-primary-rgb: 52, 211, 153;
    --theme-primary-dark: #10b981;
    --theme-primary-darker: #059669;
    --theme-accent: #6ee7b7;
    --theme-accent-rgb: 110, 231, 183;
    --theme-accent-light: #a7f3d0;
    --theme-accent-mid: #6ee7b7;

    /* --- 语义文字色提亮（底色为低透明度 rgba，深浅通用） --- */
    --color-danger-text: #f87171;
    --color-success-text: #4ade80;
    --color-warning-text: #fbbf24;
    --color-warning: #f59e0b;

    /* --- 阴影加重（深底上黑色阴影加深以维持层次感） --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(var(--theme-primary-rgb), 0.05);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(var(--theme-primary-rgb), 0.07);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(var(--theme-primary-rgb), 0.08);
}

/* ========== 2. 页面底色与网格纹理（黑色描边网格换白色，保留品牌质感） ========== */
[data-mode="dark"] body {
    background-color: var(--color-bg-page);
    background-image:
        radial-gradient(circle at 20% 10%, rgba(var(--theme-primary-rgb), 0.045), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(var(--theme-primary-rgb), 0.04), transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0V60' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.03'/%3E%3Cpath d='M30 0V60M0 30V60H60M30 30H60V0M0 30H30V60' fill='none' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.022'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* ========== 3. 头部：深石板底 + 亮绿底线（box-shadow 实现，不占布局） ========== */
[data-mode="dark"] .custom-header {
    background-color: #111a2c !important;
    box-shadow: 0 2px 0 0 var(--theme-primary), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* 雨滴特效画布在深底上依然可见，无需处理 */

/* ========== 4. 页脚：深底 + 白色细网格纹理 ========== */
[data-mode="dark"] footer.bg-dark {
    background-color: #0a101c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.045'/%3E%3C/svg%3E");
}

/* ========== 5. 弹窗与设置面板（style.css 硬编码白底 → 深色表面） ========== */
[data-mode="dark"] .about-modal {
    background: #182338;
}

[data-mode="dark"] .settings-offcanvas {
    background: #182338;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.5);
}

/* 设置面板遮罩加深 */
[data-mode="dark"] .settings-offcanvas-backdrop.show,
[data-mode="dark"] .about-modal-backdrop.about-modal-show {
    background: rgba(2, 6, 14, 0.66);
}

/* ========== 7. 深色模式下主题色选择区禁用 ========== */
.theme-lock-hint {
    display: none;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-warning-text);
    white-space: nowrap;
}

[data-mode="dark"] .theme-lock-hint {
    display: inline;
}

[data-mode="dark"] .settings-theme-grid {
    opacity: 0.35;
    pointer-events: none;
    filter: saturate(0.35);
}

/* 灰化圆点加一圈亮色外描边，避免深色下主题区"一片空白"无视觉反馈 */
[data-mode="dark"] .theme-swatch .theme-dot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), var(--shadow-sm);
}

/* ========== 8. course.css 特例覆盖（源文件零改动） ========== */

/* 8.1 高不透明度毛玻璃白 → 深色半透明（保持通透感） */
[data-mode="dark"] .char-item {
    background: rgba(24, 35, 56, 0.55);
}

[data-mode="dark"] .str-route-label {
    background: rgba(24, 35, 56, 0.95);
}

[data-mode="dark"] .arch-wheel-center {
    background: rgba(24, 35, 56, 0.92);
}

[data-mode="dark"] .td-q-drive {
    background: rgba(24, 35, 56, 0.75);
}

[data-mode="dark"] .ai-guide-wrap {
    background: rgba(24, 35, 56, 0.96);
}

/* 8.2 四象限表格渐变白底 → 深色表面渐变 */
[data-mode="dark"] .td-quadrant-table .td-q-danger {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.14) 0%, #182338 46px);
}

[data-mode="dark"] .td-quadrant-table .td-q-warning {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.14) 0%, #182338 46px);
}

[data-mode="dark"] .td-quadrant-table .td-q-success {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.14) 0%, #182338 46px);
}

[data-mode="dark"] .td-quadrant-table .td-q-info {
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.12) 0%, #182338 46px);
}

/* 8.3 架构特性参考表分类底色 → 深色变体（深底浅字，保证可读） */
[data-mode="dark"] .arch-char-ref-table tbody tr.cat-operational td {
    background: rgba(52, 211, 153, 0.10) !important;
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-operational .arch-char-ref-feature-cell {
    background: rgba(52, 211, 153, 0.18) !important;
    color: #6ee7b7;
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-structural td {
    background: rgba(56, 189, 248, 0.10) !important;
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-structural .arch-char-ref-feature-cell {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #7dd3fc;
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-crosscutting td {
    background: rgba(251, 191, 36, 0.10) !important;
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-crosscutting .arch-char-ref-feature-cell {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #fbbf24;
}

/* 8.4 画笔工具浮层（小三角与色点描边硬编码白 → 深色） */
[data-mode="dark"] .pen-color-picker {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

[data-mode="dark"] .pen-color-picker::after {
    border-left-color: #182338;
}

[data-mode="dark"] .pen-color-dot {
    border-color: #2b3a57;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* 8.5 便签工具（黄色便签本身为内容色，保留；容器阴影加深即可） */
/* 输入文本与光标在浅绿底上易看不清，统一使用占位符同色的深石板灰 */
[data-mode="dark"] .note-card .note-body {
    color: var(--color-text-muted);
    caret-color: var(--color-text-muted);
}

/* 8.6 主内容区与翻页卡片正面（硬编码 white → 深色表面） */
/*
 * course.css 里 .main-content / .flip-card-front / .flip-card-sm .flip-card-front
 * 均硬编码 background-color: white，亮色下自然；深色下必须改为深色面板，
 * 否则右侧整片内容区仍呈亮色——这是「深色模式不彻底」的最大根因。
 * 白色仅允许用于字体颜色，背景一律改为 var(--color-bg-surface)。
 */
[data-mode="dark"] .main-content,
[data-mode="dark"] #main-content,
[data-mode="dark"] .flip-card-front,
[data-mode="dark"] .flip-card-sm .flip-card-front,
[data-mode="dark"] #main-content:-webkit-full-screen {
    background-color: var(--color-bg-surface) !important;
}

/* 卡片正面在 hover/focus 时被 .flip-card-inner flip 180° 时，正面会"折叠走"——
   但浏览器在翻转过渡时偶尔漏一帧白底，再压一层兜底确保不出白。 */
[data-mode="dark"] .flip-card-inner {
    background-color: var(--color-bg-surface);
}

/* 8.7 课程导学 4 张卡片（架构困境 / 解决方案 / 技术支撑 / 架构演示）
 *
 * course.css 中 .content-card-grid 用 background-color: var(--color-bg-page)，
 * 深色下会解析为 #0d1420（页面底色），跟外面页面"完全同色"显得是个黑洞。
 * 改为 --color-bg-elevated（比 surface 更亮），让卡片从页面里"浮起来"。
 */
[data-mode="dark"] .content-card-grid:not(.flip-card) {
    background-color: var(--color-bg-elevated) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
                0 8px 16px rgba(0, 0, 0, 0.2),
                0 0 0 0.5px rgba(255, 255, 255, 0.04) !important;
}

/* 8.8 课程导学卡片内部的行（problem-item / solution-item / tech-tag）
 *
 * 原色用 rgba(danger/success, 0.05) 半透，落到纯黑 page 底上看不见也"全是黑"，
 * 落到 elevated 底上又能看出微弱的红/绿味道，配合左侧 3px 色条仍有节奏。
 */
[data-mode="dark"] .problem-item {
    background-color: rgba(239, 68, 68, 0.10) !important;
}
[data-mode="dark"] .solution-item {
    background-color: rgba(34, 197, 94, 0.10) !important;
}
[data-mode="dark"] .tech-tag {
    /* 大部分 tech-tag 已自带彩色背景（如 red/blue），仅兜底避免 .tech-tag.gray 变成纯黑 */
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
/* .tech-tag.gray 兜底（原为透明，会变成纯黑）
 * 0.35 实心度：叠深色页底后有效底色 ≈ #3c4554，白字对比度 ≈9.6:1
 * （仅改背景色，已逐像素验证字形遮罩不变，不引入文字模糊） */
[data-mode="dark"] .tech-tag.gray {
    background-color: rgba(148, 163, 184, 0.35) !important;
}

/* 8.9 翻页卡片背面 tip-dot 圆点（深色下保持白色，让条目文字"前导点"清晰可读）
 *
 * 原色为 var(--color-bg-surface)，亮色是 #fff（呈现为白色圆点引导），
 * 深色下应保留白色——它本来就是视觉指示器而非字体颜色，例外允许。
 */
[data-mode="dark"] .flip-card-back .tip-line .tip-dot {
    background-color: #ffffff !important;
}

/* 8.10 6.3 章节 ATAM 阶段卡片 / 子项（消除深色下"组件粘连"）
 *
 * 亮色下 atam-phase-card (白) 与 atam-phase-item (浅灰) 色差明显；
 * 深色下两者都用 #182338 / #0d1420，几乎同色，看起来像"全部糊在一起"。
 * 修法：card 用 elevated + 边框 + 阴影（凸起），item 用 base + 边框（凹陷）。
 */
[data-mode="dark"] .atam-phase-card {
    background-color: var(--color-bg-elevated) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                0 6px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-mode="dark"] .atam-phase-item {
    background-color: var(--color-bg-base) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset !important;
}
/* 阶段节点的"圆点"原本的 box-shadow: 0 0 0 2px #fff 在深色下是亮白圈，
   改为用卡片底色（elevated）做 halo，让它从卡片里"透出来" */
[data-mode="dark"] .atam-phase-dot {
    box-shadow: 0 0 0 2px var(--color-bg-elevated) !important;
}

/* 8.11 成绩构成表格 assessment-table
 *
 * overview.html 内联样式硬编码 .assessment-table tr:nth-child(odd) td { background: #fff }，
 * 深色下奇数行白底 + 浅色文字根本看不清。覆盖成 surface / elevated 双色交替。
 */
[data-mode="dark"] .assessment-table tr:nth-child(odd) td {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
}
[data-mode="dark"] .assessment-table tr:nth-child(even) td {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}
[data-mode="dark"] .assessment-table tr:hover td {
    background-color: rgba(52, 211, 153, 0.06) !important;
}

/* ========== 10. 学习路径（4 步骤编号与徽章统一绿系） ========== */
/*
 * 亮色下 1~4 用 4 种不同主题色（primary/success/warning/danger）帮助区分步骤。
 * 深色下仅允许黑/白/绿/警示，且深底上 4 色同时出现过于杂乱——
 * 1~3 号一律改为绿色系（与 brand 一致），4 号保留警示红作为结尾强调。
 * step-badge.ai(蓝绿) → 薄荷绿；step-badge.brain(成功绿) → 保留绿。
 */
[data-mode="dark"] .learning-stepper .step-number {
    /* 抹掉 inline --step-color / --step-bg */
    color: var(--theme-primary) !important;
    background: rgba(var(--theme-primary-rgb), 0.10) !important;
    box-shadow: 0 0 0 4px var(--color-bg-surface), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 保留第 4 步的警示红强调（结尾步骤，鼓励权衡） */
[data-mode="dark"] .learning-stepper .learning-step:last-child .step-number {
    color: var(--color-danger-text) !important;
    background: rgba(248, 113, 113, 0.10) !important;
    box-shadow: 0 0 0 4px var(--color-bg-surface), 0 2px 8px rgba(220, 38, 38, 0.2) !important;
}

/* 步骤连接线统一绿色（亮色渐变到灰色，深色全部走主题色，弱化 4 步差异） */
[data-mode="dark"] .learning-stepper .step-connector::before {
    background: linear-gradient(90deg, var(--theme-primary), rgba(var(--theme-primary-rgb), 0.25));
}

[data-mode="dark"] .learning-stepper .step-connector::after {
    border-left-color: var(--theme-primary);
}

/* AI 徽章（亮色用 accent 蓝绿）→ 深色统一绿 */
[data-mode="dark"] .step-badge.ai {
    background-color: rgba(var(--theme-primary-rgb), 0.18);
    color: #6ee7b7;
}

/* brain 徽章（亮色用 success 绿）→ 深色保持绿，但加深底透明度 */
[data-mode="dark"] .step-badge.brain {
    background-color: rgba(var(--theme-primary-rgb), 0.12);
    color: var(--theme-primary);
}

/* 学习飞轮容器边框（虚线）→ 主题色虚线 */
[data-mode="dark"] .learning-loop {
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    color: var(--color-text-secondary);
}

[data-mode="dark"] .learning-loop i {
    color: var(--theme-primary);
}

/* ========== 11. 架构特性参考表分类底色收尾（深底浅字对齐） ========== */
/* §8.3 已处理 3 类；此处统一边框与悬停态 */
[data-mode="dark"] .arch-char-ref-table tbody tr.cat-operational,
[data-mode="dark"] .arch-char-ref-table tbody tr.cat-structural,
[data-mode="dark"] .arch-char-ref-table tbody tr.cat-crosscutting {
    border-left: 3px solid rgba(var(--theme-primary-rgb), 0.45);
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-structural {
    border-left-color: rgba(125, 211, 252, 0.45);
}

[data-mode="dark"] .arch-char-ref-table tbody tr.cat-crosscutting {
    border-left-color: rgba(251, 191, 36, 0.5);
}

/* ========== 12. 强调链接/卡片/标签残留彩色清理 ========== */
/*
 * 单点兜底：因站点章节内容持续扩展，新增彩色 class 在所难免。
 * 任何深色下仍是"亮色"的视觉块，一律改为绿色系。
 */

/* 资源卡片标题色变化 */
[data-mode="dark"] a.resource-card .resource-title,
[data-mode="dark"] .quote-text::before {
    color: var(--theme-primary);
}

/* 自述盒 / 说明盒 / 高亮盒的彩色左边线 */
[data-mode="dark"] .info-box,
[data-mode="dark"] .note-box,
[data-mode="dark"] .highlight-box,
[data-mode="dark"] .tip-box {
    border-left-color: var(--theme-primary) !important;
    background-color: rgba(var(--theme-primary-rgb), 0.08);
}

/* warning/info/light 提示盒变体 */
[data-mode="dark"] .warning-box,
[data-mode="dark"] .danger-box {
    border-left-color: var(--color-danger-text) !important;
    background-color: rgba(248, 113, 113, 0.08);
}

[data-mode="dark"] .warning-text-box {
    border-left-color: var(--color-warning-text) !important;
    background-color: rgba(251, 191, 36, 0.08);
}

/* 页脚文字硬编码 #cbd5e1（亮色下也是浅灰）→ 深色无需变，提亮一点 */
[data-mode="dark"] .site-footer {
    color: var(--color-text-secondary);
}

/* 注：曾有一条 [style*="background: #f"/#e/#d] 的宽泛兜底，实测全站唯一命中对象是
   nav.html 主题色圆点的彩色内联背景（#db7193 等），属于误伤——彩色圆点在深色下
   本应靠 .settings-theme-grid 的 opacity/saturate 灰化，而不是被抹成 surface。
   已移除；白底兜底统一由下方精确的 #fff/#ffffff/white 规则负责。 */

/* 同款：HTML 片段内联 background:#fff / background: #fff（多见于 chapter-* 内容卡） */
[data-mode="dark"] [style*="background:#fff"],
[data-mode="dark"] [style*="background: #fff"],
[data-mode="dark"] [style*="background-color:#fff"],
[data-mode="dark"] [style*="background-color: #fff"],
[data-mode="dark"] [style*="background: white"],
[data-mode="dark"] [style*="background-color: white"] {
    background-color: var(--color-bg-surface) !important;
}

/* ========== 13. SVG 文字深色化与锐化（消除"连线文字变糊"） ========== */
/*
 * 课程章节大量使用 PlantUML / Mermaid / Structurizr DSL 渲染 C4 架构图，生成的 SVG 内
 * text 元素的 fill 被硬编码为 #333 / #000 等深色，在深色背景下几乎看不见或被抗锯齿糊成一团。
 * 覆盖 fill + text-rendering，让 SVG 文字在深色下保持对比度与锐利度。
 * 注意：只覆盖暗底场景的文字（连接线 / 标签），不要误改"白底深字"场景。
 */
[data-mode="dark"] svg text[fill="#333"],
[data-mode="dark"] svg text[fill="#222"],
[data-mode="dark"] svg text[fill="#000"],
[data-mode="dark"] svg text[fill="#000000"],
[data-mode="dark"] svg text[fill="#444"],
[data-mode="dark"] svg text[fill="#1e293b"],
[data-mode="dark"] svg text[fill="#334155"],
[data-mode="dark"] svg text[fill="#475569"] {
    fill: #cbd5e1;   /* slate-300，与 dark 背景对比度高又不刺眼 */
}
[data-mode="dark"] svg text {
    text-rendering: geometricPrecision;
}

/* 13.1 内联 SVG 形状兜底：白底形状 → 深色表面，黑色描边/连线 → 次级文字色
 *
 * 章节内联 SVG（架构图）大量硬编码 fill="#fff" 作卡片底、stroke="#000000" 作连线：
 * 深色下前者形成刺眼白块、后者融进黑底看不见。此处统一兜底，只处理属性写法；
 * text 的 fill="white" 保留（文字位于彩色图形上时需要保持白色，见上文注释）。
 */
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#fff"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#fff"],
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#ffffff"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#ffffff"],
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="white"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="white"] {
    fill: var(--color-bg-surface) !important;
}

[data-mode="dark"] .main-content svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="#000"], [data-mode="dark"] #svgModal svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="#000"],
[data-mode="dark"] .main-content svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="#000000"], [data-mode="dark"] #svgModal svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="#000000"],
[data-mode="dark"] .main-content svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="black"], [data-mode="dark"] #svgModal svg :is(line, path, rect, circle, ellipse, polygon, polyline)[stroke="black"] {
    stroke: var(--color-text-secondary) !important;
}

/* 13.1a 演进 SVG 彩色盒降为暗调（7.6 云平台化 15 阶段架构图，course.js 动态注入）
 *
 * 深色模式下 --color-warning 被调亮（#d97706 → #f59e0b）、--color-success 保持亮绿，
 * 而 §13 又把盒上黑字统一覆盖为浅灰 #cbd5e1 → 黄盒对比度仅 1.45:1、绿盒 2.2:1。
 * 用半透明罩把亮彩盒降为暗调（保留色相、透出面板底色），浅灰字对比升至 6.4:1+。
 * 属性选择器按 fill 字面量精确命中 SVG rect，零误伤、不碰 HTML。
 */
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-warning)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-warning)"] {
    fill: rgba(245, 158, 11, 0.26) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-success)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-success)"] {
    fill: rgba(22, 163, 74, 0.28) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-danger-bg-hover)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-danger-bg-hover)"] {
    fill: rgba(248, 113, 113, 0.14) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-warning-bg)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-warning-bg)"] {
    fill: rgba(245, 158, 11, 0.12) !important;
}

/* 13.1b fill="#000" 形状兜底：marker 箭头（a1/a2）、阶段15 黑圆点/polygon
 * 深底上黑色形状不可见，且与已转灰的连线不一致 → 统一转次级文字色 */
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#000"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#000"],
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#000000"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#000000"],
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="black"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="black"] {
    fill: var(--color-text-secondary) !important;
}

/* 13.1c 章节 C4 图（8.2 视图模型选择 / 8.4 图面规范定义）深色兜底
 *
 * 8.2 硬编码 #333 作描边/连线与 marker 箭头、#666 作副标题小字（MyBatis/Feign 等），
 *     深底上对比仅 2.4~2.6:1；关系标签 text 带 stroke="#fff" 白描边形成 Halo 重影。
 * 8.4 改用变量但取值过淡：--theme-primary-bg / --theme-accent-bg 5% 罩近乎隐形、
 *     --color-border-muted 外部框比面板还暗、--color-bg-page 类图卡片与面板色差极小。
 * 统一按属性字面量兜底为次级文字色 / 半透明色罩，零误伤、不碰章节 HTML。
 */
[data-mode="dark"] .main-content svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#333"], [data-mode="dark"] #svgModal svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#333"],
[data-mode="dark"] .main-content svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#333333"], [data-mode="dark"] #svgModal svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#333333"] {
    stroke: var(--color-text-secondary) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#333"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#333"],
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#333333"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="#333333"] {
    fill: var(--color-text-secondary) !important;
}
[data-mode="dark"] .main-content svg text[fill="#666"], [data-mode="dark"] #svgModal svg text[fill="#666"],
[data-mode="dark"] .main-content svg text[fill="#666666"], [data-mode="dark"] #svgModal svg text[fill="#666666"] {
    fill: var(--color-text-secondary) !important;
}
/* 关系标签白描边 Halo：深色下白边重影，转 surface 与底融合 */
[data-mode="dark"] .main-content svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#fff"], [data-mode="dark"] #svgModal svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#fff"],
[data-mode="dark"] .main-content svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#ffffff"], [data-mode="dark"] #svgModal svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="#ffffff"],
[data-mode="dark"] .main-content svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="white"], [data-mode="dark"] #svgModal svg :is(text, line, path, rect, circle, ellipse, polygon, polyline)[stroke="white"] {
    stroke: var(--color-bg-surface) !important;
}
/* 8.4 变量盒底增强：5% 罩 → 18%/12% 罩，外部框 → 灰罩，类图卡片 → 升高一级 */
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--theme-primary-bg)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--theme-primary-bg)"] {
    fill: rgba(52, 211, 153, 0.18) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--theme-accent-bg)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--theme-accent-bg)"] {
    fill: rgba(52, 211, 153, 0.12) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-border-muted)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-border-muted)"] {
    fill: rgba(148, 163, 184, 0.14) !important;
}
[data-mode="dark"] .main-content svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-bg-page)"], [data-mode="dark"] #svgModal svg :is(path, rect, circle, ellipse, polygon, polyline)[fill="var(--color-bg-page)"] {
    fill: var(--color-bg-elevated) !important;
}

/* 8.2 上下文图人物图标：深色下改为与图中其它组件一致的浅灰白描边 */
[data-mode="dark"] .main-content svg use[href="#person-icon"],
[data-mode="dark"] #svgModal svg use[href="#person-icon"] {
    stroke: var(--color-text-primary) !important;
    stroke-width: 2.5px !important;
}

/* svg 根元素内联白底（个别图用 style="background:#fff" 整片铺底） */
[data-mode="dark"] .main-content svg[style*="background:#fff"], [data-mode="dark"] #svgModal svg[style*="background:#fff"],
[data-mode="dark"] .main-content svg[style*="background: #fff"], [data-mode="dark"] #svgModal svg[style*="background: #fff"],
[data-mode="dark"] .main-content svg[style*="background:#ffffff"], [data-mode="dark"] #svgModal svg[style*="background:#ffffff"],
[data-mode="dark"] .main-content svg[style*="background: #ffffff"], [data-mode="dark"] #svgModal svg[style*="background: #ffffff"],
[data-mode="dark"] .main-content svg[style*="background:white"], [data-mode="dark"] #svgModal svg[style*="background:white"],
[data-mode="dark"] .main-content svg[style*="background: white"], [data-mode="dark"] #svgModal svg[style*="background: white"] {
    background-color: var(--color-bg-surface) !important;
}

/* 13.1d 章节 C4 viewer 顶部 tab 标题（8.2 / 8.4）深色化
 *
 * 8.2/8.4 的 "C4-L1 上下文图 / C4-L2 容器图 …" 标题是 HTML div 内联 color: #333
 * （非 SVG 文字，§13 的 svg text 规则不命中），深色下深灰字在深底上几乎不可读。
 * 属性选择器按字面量匹配内联样式 + !important 覆盖；限定 viewer id 零误伤。
 */
[data-mode="dark"] #c4-diagram-viewer [style*="color: #333"],
[data-mode="dark"] #c4-diagram-viewer-843 [style*="color: #333"] {
    color: var(--color-text-primary) !important;
}

/* 13.2 .code-block 真代码块（PlantUML / Mermaid / 目录树）深色化
 *
 * course.css 基类用 background: var(--color-text-primary) / color: var(--color-border)，
 * 深色下变量反转成「浅底深字」，与深色模式"仅白用于文字"冲突，产生刺眼浅色块。
 * 覆盖为 base 凹陷底 + 次级文字色；.code-block.light（Prompt 框）已全变量自适应，不动。
 */
[data-mode="dark"] .code-block:not(.light) {
    background-color: var(--color-bg-base);
    color: var(--color-text-secondary);
}

/* 13.3 书封图片柔和化（overview 推荐书目 JPG 封面多带白底，深色下刺眼） */
[data-mode="dark"] .book-mini-card .mini-cover-wrap img {
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--color-border), 0 4px 14px rgba(0, 0, 0, 0.45);
    opacity: 0.92;
}

/* 13.4 模式切换平滑过渡（进入深色时生效；退出深色时规则卸载、瞬间还原，可接受） */
[data-mode="dark"] html,
[data-mode="dark"] body,
[data-mode="dark"] .main-content,
[data-mode="dark"] #content-wrapper {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== 14. 全屏模式背景深色化（局部全屏 / 浏览器全屏） ========== */
/*
 * course.css 中 #content-wrapper:fullscreen 与 #main-content:fullscreen 均硬编码
 * background-color: white（id 选择器 + 伪类，特异性 1-1-0），深色下若不覆盖，
 * 进入局部全屏后整片内容区回到白底，而正文颜色已是浅灰 → 浅字白底不可读。
 * 8.6 节只覆盖了 #main-content:-webkit-full-screen 旧前缀，
 * 漏掉了标准 :fullscreen 和真正的局部全屏元素 #content-wrapper，本节补齐。
 */
[data-mode="dark"] #content-wrapper:fullscreen,
[data-mode="dark"] #content-wrapper:-webkit-full-screen,
[data-mode="dark"] #main-content:fullscreen,
[data-mode="dark"] #main-content:-webkit-full-screen {
    background-color: var(--color-bg-surface) !important;
}

/* ========== 15. SVG 放大模态框关闭按钮深色修复 ========== */
/*
 * course.css 的 .svg-modal-close 按钮底色为 var(--color-bg-surface)（深色下 #182338），
 * 但深色模式同时给 <html> 设了 data-bs-theme="dark"，Bootstrap 对 .btn-close 整体施加
 * filter: invert(1) grayscale(100%) brightness(200%)——滤镜作用于整个元素渲染结果，
 * 深色按钮底被反转成白色，黑色 X 也被反转成白色 → 白底白 X 不可见（仅 hover 变红时可见）。
 * 此处关闭滤镜，并显式提供浅色 X（slate-300，与深色下 SVG 文字色一致）。
 * hover 态（红底白 X）本就显式覆盖了 --bs-btn-close-bg，去掉滤镜后恢复正常。
 */
[data-mode="dark"] .svg-zoom-modal .svg-modal-close {
    filter: none;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cbd5e1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* ========== 16. 未上线课程提示（coming-soon-toast）：深色下强制白底黑字 ========== */
/*
 * style.css 的 .coming-soon-toast 背景取 var(--color-text-primary)：
 * 浅色模式下它是深色（#1e293b）+ 写死的 color:#fff，正常；
 * 深色模式下该变量变为浅色 → 背景变白，而 color 仍是 #fff → 白底白字不可读。
 * 悬浮提示脱离文档流，按需求在深色下固定为白底黑字，保证可读性。
 */
[data-mode="dark"] .coming-soon-toast {
    background-color: #ffffff;
    color: #1e293b;
}
[data-mode="dark"] .coming-soon-toast strong {
    color: #1e293b;
}

/* ========== 9. 打印安全：打印时恢复亮色令牌（纸张永远白底深字） ========== */
@media print {
    [data-mode="dark"] {
        --color-bg-page: #f8fafc;
        --color-bg-surface: #ffffff;
        --color-bg-hover: #f1f5f9;
        --color-bg-muted: #f1f5f9;
        --color-bg-inverse: #1e293b;
        --color-bg-inverse-soft: #334155;
        --color-text-primary: #1e293b;
        --color-text-secondary: #64748b;
        --color-text-muted: #94a3b8;
        --color-text-disabled: #cbd5e1;
        --color-text-on-inverse: #f8fafc;
        --color-border: #e2e8f0;
        --color-border-hover: #cbd5e1;
        --color-border-muted: #f1f5f9;
        --color-danger-text: #991b1b;
        --color-success-text: #15803d;
        --color-warning-text: #92400e;
        --color-warning: #d97706;
    }

    [data-mode="dark"] body {
        background-color: #ffffff;
        background-image: none;
    }
}

/* 13.1e 1.1 组合派五图文字深色化（chapter-1-1.html 架构核心要素）
 *
 * 这些 SVG 内大量 text 没有 fill 属性（默认黑字）或 fill="#333"，
 * 深色页底上看不清；统一转浅色，但保留红绿圆圈上的 white ✗/✓。
 */
[data-mode="dark"] .main-content svg.combo-svg text:not([fill="white"]):not([fill="#fff"]):not([fill="#ffffff"]):not(.muted-label),
[data-mode="dark"] #svgModal svg.combo-svg text:not([fill="white"]):not([fill="#fff"]):not([fill="#ffffff"]):not(.muted-label) {
    fill: var(--color-text-primary) !important;
}

/* 1.1 组合派四图外侧标签：每图仅保留一个高亮，其余弱化 */
[data-mode="dark"] .main-content svg.combo-svg text.muted-label,
[data-mode="dark"] #svgModal svg.combo-svg text.muted-label {
    fill: var(--color-text-muted) !important;
}

/* ========== 上下课提醒工具（铃铛）深色适配 ========== */
/* 上/下课提醒色在深空背景上提亮，保证光晕与卡片醒目（不随主题色变化） */
[data-mode="dark"] {
    --remind-start-color: #4ade80;
    --remind-end-color: #fbbf24;
}
/* 深色背景上光晕叠加双层辉光，进一步放大可见范围 */
[data-mode="dark"] .remind-halo {
    box-shadow: 0 0 20px 4px var(--remind-halo-color),
        0 0 44px 10px var(--remind-halo-color);
}
/* 上课态卡片图标底色：跟随提亮后的翠绿 */
[data-mode="dark"] #remindCard.remind-up {
    --remind-accent-bg: rgba(74, 222, 128, 0.14);
}
/* 下课态卡片图标底色：跟随提亮后的琥珀 */
[data-mode="dark"] #remindCard.remind-down {
    --remind-accent-bg: rgba(251, 191, 36, 0.14);
}
/* 自定义时/分下拉：深色面板上箭头提亮（slate-400），原生下拉层按深色渲染 */
[data-mode="dark"] .remind-setup-content .remind-time {
    color-scheme: dark;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 L5 6.5 L8 3.5' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 深色模式下列头节数 badge 提亮，避免与背景融合 */
[data-mode="dark"] .remind-col-count {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.14);
}
/* 铃铛红点：亮色基类的 surface 描边在深色按钮上呈黑圈，深色下取消描边，
   红色主体 + 光晕保持不变（红色跨主题固定，无需跟随变量） */
[data-mode="dark"] .remind-badge {
    border-color: transparent;
}
/* 提醒开关：未选中轨道改深空灰，避免浅灰在深色面板上突兀；白色滑块保留 */
[data-mode="dark"] .remind-switch-slider {
    background: #475569;
}