/* 🚨 核心修复：只给真正的文章内容加样式，排除搜索预览区 */
/* 使用 .md-content 来锁定正文，避开 .md-search 等预览界面 */

.md-content article h2, 
.md-content article h3 {
    border-bottom: .05rem solid var(--md-typeset-a-color);
    padding-bottom: .3em;
    display: flex; /* 保持你的折叠 UI */
    align-items: center;
    user-select: none;
    /* 强制恢复正常行高，防止搜索预览时挤压 */
    line-height: 1.4 !important; 
    margin-bottom: 1rem !important;
}

/* 🚨 强制重置搜索结果面板内的标题样式，彻底消除干扰 */
.md-search-result__article h1,
.md-search-result__article h2,
.md-search-result__article h3 {
    display: block !important;    /* 撤销 Flex，恢复块状 */
    border-bottom: none !important; /* 撤销下划线 */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 消除预览中那个讨厌的小三角箭头 */
.md-search-result__article h2::before,
.md-search-result__article h3::before {
    display: none !important;
    content: "" !important;
}

/* 在標題前添加一個小三角箭頭 */
article h2::before, 
article h3::before {
    content: "▾";
    margin-right: 10px;
    transition: transform 0.2s;
    font-size: 0.8em;
    color: var(--md-primary-fg-color);
}

/* 摺疊狀態時箭頭旋轉 (H2 与 H3 共用) */
article h2.header-collapsed::before, 
article h3.header-collapsed::before {
    transform: rotate(-90deg);
}

/* 1. 預設隱藏所有 H2 下方的子層級 (H3, H4) */
.md-sidebar--secondary .toc-has-children > .md-nav {
    display: none;
}

/* 2. 展開狀態：當賦予 .toc-expanded 類名時顯示內容 */
.md-sidebar--secondary .toc-has-children.toc-expanded > .md-nav {
    display: block;
    padding-left: 1rem; /* 確保子層級有視覺縮進 */
}

/* 3. 排版佈局：將 H2 連結改為 Flex，讓文字與箭頭分居兩側 */
.md-sidebar--secondary .toc-has-children > .md-nav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 4. 箭頭初始狀態與動畫 (預設收縮，指向左/右) */
.toc-toggle-arrow {
    cursor: pointer;
    transform: rotate(-90deg); /* 箭頭朝右 */
    transition: transform 0.2s ease;
    padding: 2px 8px;
    opacity: 0.6;
}

.toc-toggle-arrow:hover {
    opacity: 1;
    background-color: var(--md-default-fg-color--lightest);
    border-radius: 4px;
}

/* 5. 箭頭展開狀態 (箭頭朝下) */
.md-sidebar--secondary .toc-has-children.toc-expanded > .md-nav__link .toc-toggle-arrow {
    transform: rotate(0deg); 
}

/* =========================================
   组件：对比图容器 (Comparison Box & Row)
   ========================================= */

/* 1. 外层框视觉属性 */
.comparison-box {
    border: 2px solid var(--md-primary-fg-color);
    border-radius: 8px;
    padding: 20px;
    background-color: var(--md-default-bg-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin: 2rem 0;

}

/* 2. 内部 Flexbox 布局逻辑 (已合并冗余定义) */
.comparison-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important; /* 对齐顶部 */
    gap: 15px !important;
    width: 100% !important;
	margin: 0 !important;
}

/* 3. 图片容器权重配比 */
.comparison-row figure {
    flex: 0 1 auto !important;   /* 预留 10% 空间给分隔符 */
    max-width: 45% !important;
    margin: 0 !important;
    padding: 0 !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}

/* 4. 图片物理尺寸自适应 */
.comparison-row img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 5. 分隔符专属几何约束 (修复 span 的内联限制) */
.comparison-row .separator {
    display: inline-block !important; /* ✅ 核心解药：强行赋予块级物理特性，使其能接受 transform 变换 */
    align-self: center !important;   
    font-size: 2rem !important;
    font-weight: bold !important;
    color: var(--md-primary-fg-color) !important;
    flex: 0 0 auto !important;       
    margin: 0 10px !important;
    transform: translateY(-1.2rem) !important; /* 桌面端：仅做 Y 轴向上光学补偿 */
}

/* 6. 移动端 (窄屏) 响应式降级策略 (已补全截断代码) */
@media screen and (max-width: 768px) {
    .comparison-row {
        flex-direction: column !important; /* 强制切回垂直堆叠 */
        align-items: center !important;
    }
    .comparison-row figure {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .comparison-row .separator {
        /* ✅ 核心响应：取消 Y 轴位移，并强制顺时针旋转 90 度，变成向下箭头 */
        transform: translateY(0) rotate(90deg) !important; 
        margin: 15px 0 !important; /* 增加手机端箭头前后的呼吸空间 */
    }
}

/* =========================================
   组件：内层嵌套框 (Inner Box)
   ========================================= */
.comparison-inner-box {
    border: 1px dashed var(--md-default-fg-color--light); /* ✅ 视觉降级：使用浅色虚线，避免与外层实线框抢夺注意力 */
    border-radius: 6px;                                   /* 圆角略小于外层，符合物理嵌套逻辑 */
    padding: 15px;                                        /* 内层呼吸空间 */
    background-color: var(--md-default-bg-color); 
    margin: 1rem 0;                                       /* 维持与上方标题或下方 "or" 的物理安全距离 */
}

/* =========================================
   组件：逻辑分支分隔符 (Logical Divider)
   ========================================= */
.logical-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1.5rem auto !important;
    color: #b388ff !important;            /* 维持你设定的紫色高亮 */
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important; /* 强制转换为大写 OR，增强边界感 */
    letter-spacing: 2px !important;
    width: 80% !important;                /* 控制分隔线的整体跨度 */
    
    /* 🚫 核心阻断：声明绝对免疫任何旋转与位移指令 */
    transform: none !important;           
}

/* =========================================
   纯净模块化四宫格 (Pure Modular Grid - 穿透版)
   ========================================= */

/* 1. 主容器：只负责纵向堆叠 (Y轴) */
.pure-four-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 2rem 0 !important;
}

/* 🚨 核心杀毒机制：彻底消除 Markdown 幽灵 <p> 标签的物理体积 
   让内部的 figure 和 span 重新回到 Flex 引擎的怀抱 */
.pure-four-grid p, 
.pure-grid-row p {
    display: contents !important;
}

/* 2. 独立行容器：只负责横向排列 (X轴) */
.pure-grid-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 3. 图片容器防御：强制均分空间，解除直接子代 (>) 的严格限制 */
.pure-grid-row figure {
    flex: 1 1 0 !important; 
    min-width: 0 !important; 
    margin: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 4. 图片物理约束 (异形比例混排终极修复) */
.pure-grid-row figure img {
    /* 🚨 撤销强制满宽：允许图片根据自身比例收缩 */
    width: auto !important; 
    max-width: 100% !important;
    
    /* 🚨 核心限高令：强制将手机竖图和电脑横图压制在同一高度阈值内。
       400px 是桌面端的黄金阅读高度，可根据你的喜好微调为 350px 或 450px */
    max-height: 400px !important; 
    
    object-fit: contain !important;
    border-radius: 4px !important;
    margin: 0 auto !important; /* 确保图片在各自的格子内居中 */
}

/* 📱 移动端光学补偿：在手机窄屏下（上下堆叠时），解除高度枷锁，恢复全宽以保证字迹清晰 */
@media screen and (max-width: 768px) {
    .pure-grid-row figure img {
        width: 100% !important;
        max-height: none !important; /* 撤销限高 */
    }
}

/* =========================================
   统一矩阵箭头渲染引擎 (Unified Arrow Engine)
   ========================================= */

/* 5. 横向箭头 (Span) */
.pure-grid-row .grid-arrow {
    flex: 0 0 auto !important;
    font-size: 2.5rem !important;
    color: var(--md-primary-fg-color) !important;
    user-select: none !important;
    margin: 0 10px !important;
    font-family: inherit !important; /* 🚫 核心锁定：强制继承正文字体，绝对禁止系统调用 Emoji 库 */
}

/* 6. 纵向跨行箭头容器 (Div) */
.pure-four-grid .grid-row-arrow {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: -5px 0 !important; 
}

/* 🚨 核心同源克隆：强制抓取内部的 span 并物理旋转 90 度 */
.pure-four-grid .grid-row-arrow span {
    font-size: 2.5rem !important;
    color: var(--md-primary-fg-color) !important;
    user-select: none !important;
    display: inline-block !important;
    transform: rotate(90deg) !important; /* 物理旋转 */
    font-family: inherit !important;     /* 🚫 核心锁定：同源屏蔽 Emoji */
}

/* 7. 手机端响应式降级策略 (带箭头物理修正版) */
@media screen and (max-width: 768px) {
    /* 强制轨道转为垂直堆叠 */
    .pure-grid-row { 
        flex-direction: column !important; 
        gap: 10px !important; 
    }
    
    /* 🚨 核心复活：解除横向箭头屏蔽，并强行旋转 90 度，使其向下指引 */
    .pure-grid-row .grid-arrow { 
        display: flex !important; 
        transform: rotate(90deg) !important; 
        margin: 15px 0 !important; /* 增加呼吸空间 */
    }
    
    /* 🚨 核心复活：解除原本的纵向跨行箭头屏蔽 */
    .pure-four-grid .grid-row-arrow { 
        display: flex !important; 
        margin: 10px 0 !important;
    }
}

/* =========================================
   孤立节点自动收缩协议 (Orphan Node Compression)
   ========================================= */

/* 🚨 核心触发器：当行内只存在唯一一个 figure 时，强制图片收缩至 50% */
.pure-grid-row figure:only-of-type img {
    width: 70% !important;
    margin: 0 auto !important; /* 强制在 100% 的父容器中物理居中 */
}

/* 📱 移动端光学补偿：在窄屏下解除限制，恢复全屏高对比度 */
@media screen and (max-width: 768px) {
    .pure-grid-row figure:only-of-type img {
        width: 100% !important;
    }
}

/* =========================================
   组件：行内逻辑分支分隔符 (Inline OR Separator)
   ========================================= */
.pure-grid-row .grid-or-separator {
    flex: 0 0 auto !important;           /* 🚨 核心物理锁：绝对禁止被拉伸或压缩 */
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--md-primary-fg-color) !important;
    margin: 0 15px !important;           /* 左右留出呼吸空间 */
    text-transform: uppercase !important;
    user-select: none !important;        /* 防止用户误选 */
    align-self: center !important;       /* 强制在 Y 轴居中 */
}

/* 📱 手机端自动降级：当图片变成上下堆叠时，OR 自动变成上下间隔 */
@media screen and (max-width: 768px) {
    .pure-grid-row .grid-or-separator {
        margin: 10px 0 !important; 
    }
}



/* =========================================
   UI 升维：将 H3 重塑为独立的手风琴控制栏 (双模自适应)
   ========================================= */

/* 1. 基础/日间模式 (Light Mode) - 增强物理边界与对比度 */
article h3 {
    border-bottom: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--md-default-fg-color) !important; /* ✅ 字体加深：日间模式必须使用高对比度正文色 */
    
    padding: 12px 15px !important;
    margin-top: 1.2rem !important;
    margin-bottom: 1rem !important;
    
    /* ✅ 核心修正：日间模式改用高饱和度的深紫色，提高辨识度 */
    background-color: rgba(101, 31, 255, 0.05) !important; 
    border: 1px solid rgba(101, 31, 255, 0.25) !important; 
    border-radius: 6px !important;
    
    transition: all 0.2s ease !important;
}

/* 日间模式悬停：增加微弱的 Z 轴立体投影 (Elevation) */
article h3:hover {
    background-color: rgba(101, 31, 255, 0.1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; 
}

/* 2. 夜间模式 (Dark Mode / Slate) - 专属光学补偿 */
[data-md-color-scheme="slate"] article h3 {
    color: var(--md-default-fg-color) !important; /* ✅ 字体加深：日间模式必须使用高对比度正文色 */
    /* 恢复你之前的马卡龙紫色系 */
    background-color: rgba(179, 136, 255, 0.08) !important; 
    border: 1px solid rgba(179, 136, 255, 0.2) !important; 
}

[data-md-color-scheme="slate"] article h3:hover {
    background-color: rgba(179, 136, 255, 0.15) !important;
    box-shadow: none !important; /* 🚫 夜间模式下阴影容易导致画面脏乱，强制剔除 */
}

/* 3. 小三角公共属性 (自动继承当前字体的颜色) */
article h3::before {
    font-size: 0.65em !important;
    color: inherit !important;           /* ✅ 智能继承：跟随 H3 在不同模式下的文字颜色 */
    opacity: 0.7 !important;             /* 降低一点透明度作为层级区分 */
    margin-right: 10px !important;
    transform-origin: center !important;
}

/* =========================================
   动态空间收敛：折叠状态下的极限压缩 (State-Aware Compression)
   ========================================= */

/* 1. 当外层框探测到内部的 H3 处于折叠状态时，触发底部空间坍缩 */
.comparison-box:has(h3.header-collapsed) {
    padding-bottom: 12px !important;     /* ✅ 核心收缩：大幅削减底部内边距，使其与顶部视觉对称 */
    transition: padding 0.2s ease;       /* 增加平滑的呼吸过渡效果 */
}

/* 2. 当 H3 处于折叠状态时，彻底消除其向下排斥的物理推力 */
article h3.header-collapsed {
    margin-bottom: 0 !important;         /* ✅ 核心切割：移除折叠状态下多余的底部外边距 */
}

/* 3. 优化常规状态下的外层框基准边距 (微调) */
.comparison-box {
    padding: 13px 20px !important;       /* 将上下边距从 20px 略微压紧至 16px，提升整体紧凑度 */
}

/* =========================================
   全局劫持：赋予原生 Tab 容器绝对等同于 comparison-box 的物理外观
   ========================================= */
.tabbed-set {
    border: 2px solid var(--md-primary-fg-color) !important;
    border-radius: 8px !important;
    background-color: var(--md-default-bg-color) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    margin: 2rem 0 !important;
    
    /* 🚨 核心对齐：恢复与 comparison-box 100% 一致的 20px 物理内边距 */
    padding: 20px !important; 
}

/* 🚨 核心切断：彻底抹除 Tab 内容区域的原生内边距，防止与外层 20px 叠加形成双重虚胖 */
.tabbed-content {
    padding: 0 !important; 
    margin-top: 15px !important; /* 仅在上方的 Tab 按钮和下方内容之间建立物理隔离带 */
}

/* 优化 Tab 按钮区域的底部边距，使其更贴合外框的紧凑感 */
.tabbed-labels {
    margin-bottom: 0 !important;
}

/* =========================================
   Tab 引擎移动端 UX 终极升维 (Segmented Control 极限压缩版)
   ========================================= */
@media screen and (max-width: 768px) {
    .tabbed-labels {
        display: flex !important;
        flex-direction: row !important;  
        flex-wrap: wrap !important;      
        background-color: rgba(128, 128, 128, 0.1) !important;
        /* 🚨 压缩到底：底座内边距仅留 2px，剔除所有多余脂肪 */
        padding: 2px !important;         
        border-radius: 6px !important;
        margin-bottom: 20px !important;
    }

    [data-md-color-scheme="slate"] .tabbed-labels {
        background-color: rgba(0, 0, 0, 0.3) !important;
    }

    .tabbed-labels::before {
        display: none !important;
    }

    .tabbed-labels > label {
        flex: 1 1 auto !important;
        width: auto !important;
        /* 🚨 压缩到底：字号降至 0.7rem (约11px)，这是手机端可读性的物理极限 */
        font-size: 0.7rem !important;    
        /* 🚨 压缩到底：按钮上下仅留 5px，左右留 6px */
        padding: 5px 6px !important;     
        text-align: center !important;
        white-space: normal !important;
        /* 🚨 压缩到底：文字行距收到最紧致的 1.1 */
        line-height: 1.1 !important;     
        border-radius: 4px !important;
        background-color: transparent !important; 
        color: var(--md-default-fg-color--light) !important; 
        border: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
    .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
    .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3) {
        background-color: var(--md-primary-fg-color) !important; 
        color: #ffffff !important;                               
        /* 减弱阴影，消除光学膨胀感 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;       
        font-weight: bold !important;
    }
}

/* =========================================
   子分支现代 UI 引擎 (Modern Sub-Branch Tab) - 物理悬浮滑块风
   ========================================= */

/* 1. 外部容器：抹除廉价虚线，改用高级感微弧卡片底座 */
.branch-tab .tabbed-set {
    border: 1px solid rgba(128, 128, 128, 0.15) !important;
    border-radius: 12px !important; /* 现代 UI 标志性的圆润 R 角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; /* 极其微弱的弥散环境光阴影 */
    padding: 16px !important;
    background-color: var(--md-default-bg-color) !important; 
    margin: 1.5rem 0 !important;
}

/* 🌙 夜间模式容器专属微调 */
[data-md-color-scheme="slate"] .branch-tab .tabbed-set {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(0, 0, 0, 0.15) !important; /* 深邃的沉浸式背景 */
}

/* 2. 标签轨道 (Track)：经典的 iOS 灰色凹槽滑轨 */
.branch-tab .tabbed-labels {
    display: flex !important;
    flex-direction: row !important;
    background-color: rgba(128, 128, 128, 0.08) !important; /* 浅灰轨道底色 */
    border-radius: 8px !important;
    padding: 4px !important; /* 轨道内壁预留空间 */
    margin-bottom: 20px !important;
    gap: 4px !important; /* 按钮之间的呼吸距 */
}

/* 🌙 夜间模式轨道 */
[data-md-color-scheme="slate"] .branch-tab .tabbed-labels {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* 3. 按钮本体 (Unselected)：绝对无边框，极简留白 */
.branch-tab .tabbed-labels > label {
    flex: 1 1 0 !important; /* 强制轨道内按钮等宽，绝对对称 */
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    border: none !important; /* 🚨 彻底抹除所有生硬边框 */
    border-radius: 6px !important;
    background-color: transparent !important; /* 未选中时融入轨道 */
    color: var(--md-default-fg-color--light) !important;
    font-weight: 500 !important;
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 丝滑阻尼动画 */
}

/* 🖱️ 鼠标悬停微交互 (非移动端可见) */
.branch-tab .tabbed-labels > label:hover {
    color: var(--md-default-fg-color) !important;
    background-color: rgba(128, 128, 128, 0.05) !important;
}

/* 4. 选中状态 (Selected)：物理悬浮滑块弹起效果 */
.branch-tab .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.branch-tab .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) {
    background-color: var(--md-default-bg-color) !important; /* 亮起，与灰色轨道形成强烈 z 轴落差 */
    color: var(--md-primary-fg-color) !important;            /* 你的主题紫色文字 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0,0,0,0.04) !important; /* 🚨 核心现代感：细腻的立体投影 */
    font-weight: 700 !important;
}

/* 🌙 夜间模式选中状态 */
[data-md-color-scheme="slate"] .branch-tab .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
[data-md-color-scheme="slate"] .branch-tab .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important; /* 夜间模式下激活文字反白更清晰 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================
   组件：Info 警告框 - 彻底紫色化与对齐
   ========================================= */

/* 1. 强制击穿边框色与左侧强调线 */
.md-typeset .admonition.info,
.md-typeset details.info {
    border-color: var(--md-primary-fg-color) !important; /* 四周细边框紫色 */
    border-left-width: 4px !important;                 /* 保持左侧厚度 */
}

/* 2. 标题栏：背景、文字、居中同步 */
.md-typeset .admonition.info .admonition-title,
.md-typeset details.info summary {
    background-color: rgba(126, 87, 194, 0.1) !important; /* 极淡紫色 */
    border-bottom: 1px solid var(--md-primary-fg-color) !important; /* 标题分割线紫色 */
    color: var(--md-primary-fg-color) !important;
    
    font-size: 0.8rem !important; 
    font-weight: 800 !important;
    text-transform: uppercase !important;
    
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;     
    padding: 15px !important;
}

/* 3. 图标：彻底紫色化并强制归零对齐 */
.md-typeset .admonition.info .admonition-title::before,
.md-typeset details.info summary::before {
    background-color: var(--md-primary-fg-color) !important; /* 图标紫色 */
    position: relative !important; 
    top: 0 !important;             /* 🚨 核心修复：归零原生下压位移 */
    left: auto !important;         
    width: 1.6rem !important;       
    height: 1.6rem !important;
    margin-right: 14px !important; 
}

/* =========================================
   AI 语言控制台 (挂载于 H1 标题旁)
   ========================================= */

.custom-lang-tabs {
    display: inline-flex;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 20px; 
    padding: 3px;
    margin-right: 0; 
    gap: 2px;
    line-height: 1 !important;
    letter-spacing: normal !important;
}

[data-md-color-scheme="slate"] .custom-lang-tabs {
    background-color: rgba(0, 0, 0, 0.3);
}

.custom-lang-tabs .lang-btn {
    background: transparent;
    border: none;
    color: var(--md-default-fg-color--light);
    font-size: 0.75rem !important; 
    font-weight: 700 !important;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.custom-lang-tabs .lang-btn:hover {
    color: var(--md-default-fg-color);
    background-color: rgba(128, 128, 128, 0.15);
}

.custom-lang-tabs .lang-btn.active {
    background-color: var(--md-primary-fg-color); 
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   物理防线：屏蔽 Google 顶部横幅，但保留底部控件
   ========================================= */
/* 彻底抹杀页面被强行下压的 Bug */
body {
    top: 0 !important;
    position: static !important;
}

/* 隐藏烦人的顶部翻译提示横幅，防止破坏导航栏 */
.skiptranslate iframe,
.goog-te-banner-frame { 
    display: none !important; 
    visibility: hidden !important; 
}

/* 彻底隐藏顶部导航栏左侧的 Logo 按钮 */
.md-header__button.md-logo {
    display: none !important;
}

/* =========================================
   UI 升維：全局文章圖片細黑邊框 (物理隔離版)
   ========================================= */

/* 1. 精準鎖定：僅對文章正文中的圖片生效 */
.md-typeset figure img, 
.md-typeset p img {
    /* 🚨 核心解藥：使用 1px 的外陰影代替 border。
       它不會增加圖片的寬度，完美保護你的 Flex 四宮格佈局不坍塌。 */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) !important; 
    
    /* 可選：增加微小的圓角，使其看起來更現代 */
    border-radius: 4px !important; 
    
    /* 確保圖片在邊框內正確裁切 */
    overflow: hidden !important; 
    
    /* 增加一點點內邊距，讓邊框與圖片有呼吸感（可選，根據喜好調整） */
    padding: 2px !important; 
    background-color: #ffffff !important; /* 確保 padding 區域是白色的 */
}

/* 🌙 夜間模式光学補償 (Slate Theme) */
[data-md-color-scheme="slate"] .md-typeset figure img, 
[data-md-color-scheme="slate"] .md-typeset p img {
    /* 在深色背景下，純黑邊框看不見。
       需要補償為極淡的灰色或半透明白色。 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important; 
    background-color: rgba(0, 0, 0, 0.2) !important; /* 夜間模式下的 padding 底色 */
}