/* ==========================================================================
    1. 全局配色 & 基础设置 (调暗版)
   ========================================================================== */
:root {
  --day-pink: #d7d7d7d8;   
  --cocoa-brown: #fffffa9e; 
  --black:#000000
}

/* ==========================================================================
   ☀️ 2. 白天模式背景 (低密度波点 + 调暗色彩)
   ========================================================================== */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:  #4545439e; /* 导航栏 */
    --md-primary-fg-color--light: #000000;
    
    /* 1. 设置底色 */
    background-color: #d7d7d7d8 !important; 
    
    /* 2. 降低波点密度：增大 background-size，并调整位置 */
    background-image: 
        radial-gradient(rgba(82, 69, 65, 0.15) 2px, transparent 2.5px),
        radial-gradient(rgba(82, 69, 65, 0.15) 2px, transparent 2.5px) !important;
    background-size: 60px 60px !important; /* 密度减半 */
    background-position: 0 0, 30px 30px !important; 
    
    --md-default-bg-color: #d7d7d7d8;
}
/* 4. 搜索框优化 */
.md-search__form {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-radius: 20px !important;
}
.md-search__input::placeholder {
    color: rgba(245, 240, 225, 0.6) !important;
}
.md-search__icon {
    color: #f5f0e1 !important;
}
/* ==========================================================================
   ✨ 3. 内容卡片和字体样式
   ========================================================================== */
/* 卡片  */
.md-typeset details,
.md-typeset .admonition {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-left: 4px solid var(--md-primary-fg-color) !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
}
/* 卡片标题 */
.md-typeset summary, .md-typeset .admonition-title {
    padding: 12px 15px !important; 
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important; 
}
/* 卡片内容 */
.md-typeset .admonition-content,
.md-typeset details .md-typeset-details__content {
    padding: 20px !important;
    color: #000000 !important;
    font-size: 0.75rem !important; 
    line-height: 1.8 !important;
}
/* 隐藏默认图标 */
.md-typeset details > summary::before,
.md-typeset .admonition > .admonition-title::before {
    display: none !important;
}
/* 全局正文文字 */
.md-typeset p, .md-typeset ul li, .md-typeset ol li {
    font-size: 0.75rem !important;
    line-height: 1.9 !important;
}

/* ==========================================================================
   💻 4. 电脑端专属样式 (min-width: 76.25em)
   ========================================================================== */
@media screen and (min-width: 76.25em) {

    /* --- ☀️ 白天模式侧边栏 --- */
    [data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__scrollwrap {
        position: sticky !important;
        top: 20px !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: none !important;
        border-radius: 12px;
        height: fit-content !important; 
        padding: 15px 10px !important;
        margin: 10px 0 10px 10px;
    }
    [data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link {
        color: var(--black) !important;
    }

   

    /* --- ☀️ 白天模式中间内容 (白色信纸) --- */
    [data-md-color-scheme="default"] .md-content__inner {
        background-color: #ffffff; 
        padding: 40px 50px; 
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        margin-top: 1rem;
        border-top: 4px solid var(--md-primary-fg-color);
        position: relative;
    }
    
    /* 大标题变粉色 */
    [data-md-color-scheme="default"] .md-typeset h1 {
        color: #000000;
    }
    
    /* 🎀 电脑端：顶部的粉色和纸胶带 */
    .md-content__inner::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%) rotate(-1deg);
        width: 140px;
        height: 35px;
        background-color: var(--md-primary-fg-color) !important;
        opacity: 0.7; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 10;
        pointer-events: none;
    }

    .md-sidebar--secondary { display: none !important; }
    .md-grid { max-width: 1200px !important; }
} 

/* ==========================================================================
   📱 5. 手机端/平板端 终极适配 (max-width: 76.1875em)
   ========================================================================== */
@media screen and (max-width: 76.1875em) {
/* --- ☀️ 白天模式手机背景 (还原草莓巧克力波点图) --- */
    [data-md-color-scheme="default"] {
        /* 1. 底色：提取自图片的浅粉色 */
        background-color: #ffe3e6 !important; 
        
        /* 2. 波点：提取自图片的深红棕色 */
        background-image: 
            radial-gradient(#7a5559 2.5px, transparent 3px),
            radial-gradient(#7a5559 2.5px, transparent 3px) !important;
            
        /* 3. 波点间距：保持和电脑端一致的排列 */
        background-size: 30px 30px !important;
        background-position: 0 0, 15px 15px !important; 
    }
    /* --- 菜单 (Drawer) --- */
    [data-md-color-scheme="default"] .md-drawer {
        background-color: #f5f0e1 !important;
    }
    [data-md-color-scheme="default"] .md-drawer .md-nav__title {
        background-color: var(--md-primary-fg-color) !important;
        color: white !important;
        padding: 0.8rem 1.5rem !important;
    }
    [data-md-color-scheme="default"] .md-drawer .md-nav__link {
        color: #5c5252 !important;
        font-size: 0.9rem !important;
        padding: 0.6rem 1.5rem !important;
    }
    [data-md-color-scheme="default"] .md-drawer .md-nav__link--active,
    [data-md-color-scheme="default"] .md-drawer .md-nav__link:hover {
        color: var(--md-primary-fg-color) !important;
    }

    /* --- 中间内容区 (白天 - 手机端 - 白色卡片) --- */
    [data-md-color-scheme="default"] .md-content__inner {
        background-color: #ffffff !important;
        color: #444444 !important;
        margin: 1rem 0.8rem !important;
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
        border-top: none !important;
    }
    /* 隐藏手机端顶部的纸胶带装饰 */
    [data-md-color-scheme="default"] .md-content__inner::before {
        display: none !important;
    }

    

} /* <--- 5. 手机端适配结束 */



/* ==========================================================================
   🖼️ 7. Logo 尺寸和位置调整 (电脑端左侧，手机端右侧)
   ========================================================================== */

/* --- 1. 电脑端顶部导航栏的 Logo (保持在标题左边) --- */
.md-header__button.md-logo img {
    height: 2.5rem !important; /* 电脑端 Logo 高度 */
    width: auto !important;
    margin-top: -0.1rem;
    background: transparent !important;
    object-fit: contain;
    transition: transform 0.3s;
}

.md-header__button.md-logo:hover img {
    transform: scale(1.1);
}

/* 确保标题文字和 Logo 之间有适当间距，并且 Logo 在左侧 */
.md-header__title {
    margin-left: -0.5rem !important; /* 标题与 Logo 的间距 */
    /* 其他默认样式保持不变 */
}


/* --- 2. 手机端侧边栏（抽屉菜单）的 Logo 和标题位置 (Logo 放在标题右侧) --- */
@media screen and (max-width: 76.1875em) {
    /* 让侧边栏顶部的容器变成 Logo 在右、标题在左的排列 */
    .md-nav__title {
        display: flex !important;
        flex-direction: row-reverse !important; /* 核心：让 Logo 在标题右侧 */
        align-items: center !important; /* 垂直居中对齐 */
        justify-content: space-between !important; /* Logo 和标题分开到两端 */
        
        /* ✨✨✨ 修改这里 ✨✨✨ */
        padding: 1rem 1.5rem 1rem 1.5rem !important; /* 上 右 下 左 的内边距 */
        /* 你可以把第二个值 (右内边距) 和第四个值 (左内边距) 改成你喜欢的数值，比如 1.2rem */
        /* 比如 padding: 1rem 1.2rem !important; (如果只写两个值，表示上下 1rem，左右 1.2rem) */
        
        height: auto !important; /* 允许高度自适应 */
    }

    /* 调整手机端 Logo 的样式和位置 */
    .md-nav__button.md-logo {
        order: 2; /* Logo 排在标题后面 */
        margin-left: 1rem !important; /* Logo 与标题的距离 */
        margin-right: 0 !important; /* 继续清除 Logo 自身可能带的右外边距 */
        padding: 0 !important; /* 移除默认内边距 */
    }
    
    /* 其他代码保持不变... */
}
    .md-nav__button.md-logo img {
        height: 3.5rem !important; /* 手机端 Logo 高度 */
        width: auto !important;
        background: transparent !important;
        object-fit: contain;
    }

    /* 调整手机端标题的样式和位置 */
    .md-nav__title .md-nav__button {
        order: 1; /* 标题排在 Logo 前面 */
        padding: 0 !important; /* 移除默认内边距 */
        margin-bottom: 0 !important;
    }

    /* 确保标题文字不被挤压 */
    .md-nav__title .md-nav__text {
        flex-grow: 1; /* 标题占据可用空间 */
        text-align: left; /* 文本左对齐 */
    }


/* --- 3. 强制背景透明，消除可能的残余底色 (全局) --- */
.md-logo img {
    background: transparent !important;
    border-radius: 0 !important;
}