/**
 * 统一导航栏样式
 * 
 * 模式说明：
 * ============================================
 * 1. 壁纸模式 (backgroundWallpaper.mode):
 *    - "banner": 横幅壁纸模式 (有 #banner-wrapper)
 *    - "overlay": 全屏壁纸模式 (body.wallpaper-transparent)
 *    - "none": 纯色背景无壁纸
 * 
 * 2. 导航栏透明模式 (transparentMode):
 *    - "semi": 半透明加圆角 (始终半透明)
 *    - "full": 完全透明 (始终透明)
 *    - "semifull": 动态透明 (未滚动时透明，滚动后变半透明)
 * 
 * 3. 其他条件:
 *    - 桌面端: min-width: 1024px
 *    - 移动端: max-width: 1023px
 *    - 首页: data-is-home="true" (移动端仅在首页生效)
 *    - 滚动状态: .scrolled (仅 semifull 模式)
 *    - 亮色/暗色主题: :root.dark
 * ============================================
 */

/* ============================================
 * 基础导航栏样式
 * 适用: 所有模式，所有设备
 * ============================================ */
 #navbar > div {
    background: var(--card-bg);
    border: 1px solid transparent;
    border-radius: 0 0 0.75rem 0.75rem;
    transition: all var(--duration-medium) var(--ease-standard);
}

/* ============================================
 * 桌面端 - 亮色主题 - Banner模式
 * 适用: 桌面端(≥1024px) + Banner模式 + 亮色主题
 * ============================================ */
@media (min-width: 1024px) {
    /* 
     * 透明模式: "semi" (半透明)
     * 条件: Banner模式 + transparentMode="semi"
     * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semi"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "full" (完全透明)
     * 条件: Banner模式 + transparentMode="full"
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="full"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="full"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态)
     * 条件: Banner模式 + transparentMode="semifull" + 未滚动
     * 效果: 完全透明，有圆角但无背景
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态)
     * 条件: Banner模式 + transparentMode="semifull" + .scrolled
     * 效果: 滚动后变为半透明背景 + 模糊 + 圆角 + 阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"].scrolled > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 桌面端 - 亮色主题 - 壁纸模式 (Overlay)
 * 适用: 桌面端(≥1024px) + 壁纸模式 + 亮色主题
 * ============================================ */
@media (min-width: 1024px) {
    /* 
     * 透明模式: "semi" (半透明)
     * 条件: 壁纸模式 (body.wallpaper-transparent) + transparentMode="semi"
     * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semi"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "full" (完全透明)
     * 条件: 壁纸模式 + transparentMode="full"
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="full"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态)
     * 条件: 壁纸模式 + transparentMode="semifull" + 未滚动
     * 效果: 半透明背景 + 模糊 (壁纸模式下始终半透明)
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semifull"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态)
     * 条件: 壁纸模式 + transparentMode="semifull" + .scrolled
     * 效果: 滚动后保持半透明 (与未滚动状态相同)
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semifull"].scrolled > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 移动端 - 亮色主题 - Banner模式
 * 适用: 移动端(≤1023px) + Banner模式 + 亮色主题 + 仅首页生效
 * 注意: 移动端透明效果仅在首页 (data-is-home="true") 生效
 * ============================================ */
@media (max-width: 1023px) {
    /* 
     * 透明模式: "semi" (半透明)
     * 条件: Banner模式 + transparentMode="semi" + 首页
     * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semi"][data-is-home="true"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "full" (完全透明)
     * 条件: Banner模式 + transparentMode="full" + 首页
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="full"][data-is-home="true"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态)
     * 条件: Banner模式 + transparentMode="semifull" + 首页 + 未滚动
     * 效果: 完全透明，有圆角但无背景
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态)
     * 条件: Banner模式 + transparentMode="semifull" + 首页 + .scrolled
     * 效果: 滚动后变为半透明背景 + 模糊 + 圆角 + 阴影
     */
    #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 移动端 - 亮色主题 - 壁纸模式 (Overlay)
 * 适用: 移动端(≤1023px) + 壁纸模式 + 亮色主题 + 仅首页生效
 * ============================================ */
@media (max-width: 1023px) {
    /* 
     * 透明模式: "semi" (半透明)
     * 条件: 壁纸模式 + transparentMode="semi" + 首页
     * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "full" (完全透明)
     * 条件: 壁纸模式 + transparentMode="full" + 首页
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态)
     * 条件: 壁纸模式 + transparentMode="semifull" + 首页 + 未滚动
     * 效果: 半透明背景 + 模糊 (壁纸模式下始终半透明)
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态)
     * 条件: 壁纸模式 + transparentMode="semifull" + 首页 + .scrolled
     * 效果: 滚动后保持半透明 (与未滚动状态相同)
     */
    body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 桌面端 - 暗色主题 - Banner模式
 * 适用: 桌面端(≥1024px) + Banner模式 + 暗色主题 (:root.dark)
 * ============================================ */
@media (min-width: 1024px) {
    /* 
     * 透明模式: "semi" (半透明) - 暗色主题
     * 条件: Banner模式 + transparentMode="semi" + 暗色主题
     * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semi"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"] > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* 
     * 透明模式: "full" (完全透明) - 暗色主题
     * 条件: Banner模式 + transparentMode="full" + 暗色主题
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="full"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"] > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
     * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 未滚动
     * 效果: 完全透明，有圆角但无背景
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"] > div {
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
     * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + .scrolled
     * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"].scrolled > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 桌面端 - 暗色主题 - 壁纸模式 (Overlay)
 * 适用: 桌面端(≥1024px) + 壁纸模式 + 暗色主题 (:root.dark)
 * ============================================ */
@media (min-width: 1024px) {
    /* 
     * 透明模式: "semi" (半透明) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semi" + 暗色主题
     * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semi"] > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* 
     * 透明模式: "full" (完全透明) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="full" + 暗色主题
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="full"] > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 未滚动
     * 效果: 暗色半透明背景 + 模糊 (壁纸模式下始终半透明)
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"] > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + .scrolled
     * 效果: 滚动后保持暗色半透明 (与未滚动状态相同)
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"].scrolled > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 移动端 - 暗色主题 - Banner模式
 * 适用: 移动端(≤1023px) + Banner模式 + 暗色主题 + 仅首页生效
 * ============================================ */
@media (max-width: 1023px) {
    /* 
     * 透明模式: "semi" (半透明) - 暗色主题
     * 条件: Banner模式 + transparentMode="semi" + 暗色主题 + 首页
     * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semi"][data-is-home="true"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* 
     * 透明模式: "full" (完全透明) - 暗色主题
     * 条件: Banner模式 + transparentMode="full" + 暗色主题 + 首页
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="full"][data-is-home="true"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
     * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 首页 + 未滚动
     * 效果: 完全透明，有圆角但无背景
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
     * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 首页 + .scrolled
     * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 移动端 - 暗色主题 - 壁纸模式 (Overlay)
 * 适用: 移动端(≤1023px) + 壁纸模式 + 暗色主题 + 仅首页生效
 * ============================================ */
@media (max-width: 1023px) {
    /* 
     * 透明模式: "semi" (半透明) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semi" + 暗色主题 + 首页
     * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* 
     * 透明模式: "full" (完全透明) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="full" + 暗色主题 + 首页
     * 效果: 完全透明，无背景、无边框、无阴影
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 首页 + 未滚动
     * 效果: 暗色半透明背景 + 模糊 (壁纸模式下始终半透明)
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 
     * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
     * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 首页 + .scrolled
     * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
     */
    :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 响应式优化
 * ============================================ */

/* 平板设备优化 (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    #navbar > div {
        border-radius: 0 0 1rem 1rem !important;
    }
    
    /* 隐藏导航栏主导航项的图标，只显示文字 */
    /* 只隐藏主导航栏按钮和链接中的图标，保留下拉菜单中的图标 */
    #navbar .dropdown-container > .btn-plain .navbar-icon,
    #navbar .dropdown-container > a.btn-plain .navbar-icon {
        display: none !important;
    }
}

/* 小屏手机优化 (≤480px) */
@media (max-width: 480px) {
    #navbar > div {
        border-radius: 0 0 0.5rem 0.5rem !important;
        margin: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* 手机端导航栏全宽优化 (≤768px) */
/* 修复768px断点问题：确保在≤768px时菜单隐藏，按钮显示 */
@media (max-width: 768px) {
    #navbar > div {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 强制隐藏导航菜单（覆盖Tailwind的md:flex） */
    /* 直接选择包含导航链接的div容器（第二个直接子元素） */
    #navbar > div > div:nth-child(2) {
        display: none !important;
    }
    
    /* 强制显示菜单按钮（覆盖Tailwind的md:!hidden） */
    #navbar #nav-menu-switch {
        display: flex !important;
    }
}

/* ============================================
 * 下拉菜单和面板样式 - 亮色主题
 * 适用: 所有模式、所有设备 + 亮色主题
 * 说明: 下拉菜单和面板在所有模式下样式统一，只需区分亮色/暗色主题
 * ============================================ */
/* 桌面端 - 所有面板样式 */
@media (min-width: 1024px) {
    /* 二级菜单 (下拉菜单内容) */
    .dropdown-content {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 主题色设置面板 */
    #display-setting {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 壁纸模式切换面板 */
    #wallpaper-mode-panel .float-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 主题切换面板 */
    #theme-mode-panel .float-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 手机端导航菜单面板 */
    #nav-menu-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 手机端MD导航菜单面板 (目录) */
    #mobile-toc-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 搜索面板 */
    #search-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
}

/* 移动端 - 所有面板样式(仅在首页生效) */
@media (max-width: 1023px) {
    /* 二级菜单 (下拉菜单内容) - 仅在首页生效 */
    #navbar[data-is-home="true"] .dropdown-content {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 主题色设置面板 - 仅在首页生效 */
    #navbar[data-is-home="true"] ~ * #display-setting,
    #navbar[data-is-home="true"] #display-setting {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 壁纸模式切换面板 - 仅在首页生效 */
    #navbar[data-is-home="true"] #wallpaper-mode-panel .float-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 主题切换面板 - 仅在首页生效 */
    #navbar[data-is-home="true"] #theme-mode-panel .float-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 手机端导航菜单面板 - 仅在首页生效 */
    #navbar[data-is-home="true"] #nav-menu-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 手机端MD导航菜单面板 (目录) - 仅在首页生效 */
    #navbar[data-is-home="true"] #mobile-toc-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
    
    /* 搜索面板 - 仅在首页生效 */
    #navbar[data-is-home="true"] #search-panel {
        backdrop-filter: blur(var(--blur-2xl)) !important;
        background: rgba(255, 255, 255, var(--opacity-90)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar) !important;
    }
}

/* ============================================
 * 下拉菜单和面板样式 - 暗色主题
 * 适用: 所有模式、所有设备 + 暗色主题 (:root.dark)
 * ============================================ */

/* 桌面端 - 所有面板样式 - 暗色主题 */
@media (min-width: 1024px) {
    /* 二级菜单 (下拉菜单内容) */
    :root.dark .dropdown-content {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 主题色设置面板 */
    :root.dark #display-setting {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 壁纸模式切换面板 */
    :root.dark #wallpaper-mode-panel .float-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 主题切换面板 */
    :root.dark #theme-mode-panel .float-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 手机端导航菜单面板 */
    :root.dark #nav-menu-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 手机端MD导航菜单面板 (目录) */
    :root.dark #mobile-toc-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 搜索面板 */
    :root.dark #search-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* 移动端 - 所有面板样式 - 暗色主题 (仅在首页生效) */
@media (max-width: 1023px) {
    /* 二级菜单 (下拉菜单内容) - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] .dropdown-content {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 主题色设置面板 - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] ~ * #display-setting,
    :root.dark #navbar[data-is-home="true"] #display-setting {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 壁纸模式切换面板 - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] #wallpaper-mode-panel .float-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 主题切换面板 - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] #theme-mode-panel .float-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 手机端导航菜单面板 - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] #nav-menu-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 手机端MD导航菜单面板 (目录) - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] #mobile-toc-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
    
    /* 搜索面板 - 仅在首页生效 */
    :root.dark #navbar[data-is-home="true"] #search-panel {
        background: rgba(0, 0, 0, var(--opacity-90)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 全宽导航栏适配 (Full Width Navbar)
 * 确保在开启全宽模式时覆盖所有圆角和宽度限制
 * 针对所有模式（Banner模式、壁纸模式、透明模式）统一去除圆角
 * 使用高优先级选择器确保覆盖原主题样式
 * 仅在桌面端 (min-width: 1024px) 生效，移动端保留圆角
 * ============================================ */
@media (min-width: 1024px) {
    #navbar-wrapper #navbar[data-full-width="true"] > div,
    body:has(#banner-wrapper) #navbar-wrapper #navbar[data-full-width="true"] > div,
    body.wallpaper-transparent #navbar-wrapper #navbar[data-full-width="true"] > div,
    #navbar-wrapper #navbar[data-full-width="true"].scrolled > div {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}