/* HOJ 顶栏换肤：对齐 pro.meky.space 的 VitePress 风格顶栏。
   只改外观，不动 DOM 与业务逻辑；删除 index.html 里的本文件引用即可回滚。 */
#header {
    --vp-brand: #00a996;
    --vp-brand-dark: #009486;
    --vp-text: #2c3e50;
    --vp-divider: rgba(60, 60, 67, .12);
    box-shadow: 0 1px 0 var(--vp-divider) !important;
}

/* 标题栏：60px、左右 32px、白底 + 1px 分隔线 */
#header .top-navigation {
    display: flex !important;
    align-items: center !important;
    height: 63px !important;
    min-height: 63px !important;
    padding: 0 32px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 4px !important;
}

/* Logo：40px（放大 1.05 后视觉 42px），右侧间距 20px */
#header .site-logo {
    margin: 0 20px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: 100% !important;
}

#header .site-logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#header .site-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* 主菜单：14px / 500、padding 0 12px、无间隙 */
#header .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#header .nav-menu li {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

#header .nav-menu li > a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 12px !important;
    gap: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: Inter var, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif !important;
    line-height: 1 !important;
    color: var(--vp-text) !important;
    background: none !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    transition: color .25s !important;
}

#header .nav-menu li > a:hover,
#header .nav-menu li.nav-active > a {
    color: var(--vp-brand) !important;
    background: none !important;
    border-bottom: 0 !important;
}

#header .nav-menu li > a i {
    display: none !important;
}

#header .nav-menu li > a span {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 下拉面板：12px 圆角、间距 6px、16px 内边距 */
#header .nav-menu .dropdown > .dropdown-menu {
    display: none !important;
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    margin-top: 6px !important;
    min-width: 168px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid var(--vp-divider) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12) !important;
    box-sizing: border-box !important;
}

#header .nav-menu .dropdown:hover > .dropdown-menu,
#header .nav-menu .dropdown:focus-within > .dropdown-menu {
    display: block !important;
}

#header .nav-menu .dropdown > .dropdown-menu li {
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

#header .nav-menu .dropdown > .dropdown-menu li a {
    display: block !important;
    height: auto !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--vp-text) !important;
    background: none !important;
    border-bottom: 0 !important;
    white-space: nowrap !important;
    transition: color .2s, background-color .2s !important;
}

#header .nav-menu .dropdown > .dropdown-menu li a:hover,
#header .nav-menu .dropdown > .dropdown-menu li.nav-active a,
#header .nav-menu .dropdown > .dropdown-menu li.nav-active a:hover {
    color: var(--vp-brand) !important;
    background: rgba(0, 169, 150, .08) !important;
    font-weight: 500 !important;
}

/* 右侧：登录/注册 */
#header .user-actions {
    gap: 10px !important;
}

#header .btn-menu {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#header .btn-menu .el-button {
    height: 34px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    margin-left: 0 !important;
    background: transparent !important;
    border: 1px solid var(--vp-divider) !important;
    color: var(--vp-text) !important;
    transition: color .2s, background-color .2s, border-color .2s !important;
}

#header .btn-menu .el-button.el-button--primary {
    background: var(--vp-brand) !important;
    border-color: var(--vp-brand) !important;
    color: #fff !important;
}

#header .btn-menu .el-button.el-button--primary:hover {
    background: var(--vp-brand-dark) !important;
    border-color: var(--vp-brand-dark) !important;
}

#header .btn-menu .el-button:not(.el-button--primary):hover {
    color: var(--vp-brand) !important;
    border-color: var(--vp-brand) !important;
    background: rgba(0, 169, 150, .06) !important;
}

/* 已登录：用户名下拉触发器 */
#header .user-actions .el-dropdown-link {
    font-size: 14px !important;
    color: var(--vp-text) !important;
}

#header .user-actions .el-dropdown-link:hover {
    color: var(--vp-brand) !important;
}

/* 内容区下移，避开固定顶栏 */
#header + * {
    /* 由 HOJ 自带的 #header-hidden 占位，保留原行为 */
}

@media (max-width: 768px) {
    #header .top-navigation {
        padding: 0 12px !important;
    }

    #header .site-logo {
        margin-right: 8px !important;
    }

    #header .site-logo img {
        height: 32px !important;
    }
}

/* 窄屏（<992px）HOJ 切换为 mu-appbar 抽屉模式：对齐 pro 移动端顶栏
   50px 白底、左汉堡 + 标题、右侧 青底胶囊登录 / 描边胶囊注册 */
@media (max-width: 991px) {
    header.mobile-nav.mu-appbar {
        display: flex !important;
        align-items: center !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 12px 0 4px !important;
        background: #fff !important;
        background-color: #fff !important;
        color: #2c3e50 !important;
        box-shadow: 0 1px 0 rgba(60, 60, 67, .12) !important;
        border: 0 !important;
    }

    /* 汉堡：40x40 点击区，图标 20px 深灰 */
    header.mobile-nav.mu-appbar .mu-appbar-left {
        width: 40px !important;
        min-width: 40px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-left .mu-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        color: #2c3e50 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-left .mu-button i {
        font-size: 20px !important;
        color: #2c3e50 !important;
    }

    /* 标题：紧贴汉堡右侧起排，17px/700 */
    header.mobile-nav.mu-appbar .mu-appbar-title {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        height: 50px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 8px 0 12px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        line-height: 1 !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-title > span {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        height: 50px !important;
        flex: 0 0 auto !important;
    }

    /* 默认描边胶囊（注册） */
    header.mobile-nav.mu-appbar .mu-appbar-right > .mu-flat-button {
        height: 32px !important;
        min-width: 0 !important;
        min-height: 32px !important;
        margin: 0 0 0 8px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        color: #2c3e50 !important;
        background: transparent !important;
        border: 1px solid rgba(60, 60, 67, .12) !important;
        box-shadow: none !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-right > .mu-flat-button:hover {
        color: #00a996 !important;
        border-color: #00a996 !important;
        background: rgba(0, 169, 150, .06) !important;
    }

    /* 登录（第一个按钮）：青底胶囊 */
    header.mobile-nav.mu-appbar .mu-appbar-right > .mu-flat-button:first-of-type {
        background: #00a996 !important;
        border-color: #00a996 !important;
        color: #fff !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-right > .mu-flat-button:first-of-type:hover {
        background: #009486 !important;
        border-color: #009486 !important;
        color: #fff !important;
    }

    /* 已登录：消息/头像触发器 */
    header.mobile-nav.mu-appbar .mu-appbar-right .mu-menu > .mu-menu-activator .mu-button {
        height: 32px !important;
        min-width: 0 !important;
        min-height: 32px !important;
        margin: 0 0 0 8px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        color: #2c3e50 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    header.mobile-nav.mu-appbar .mu-appbar-right .mu-menu > .mu-menu-activator .mu-button i {
        font-size: 22px !important;
        color: #2c3e50 !important;
    }

    /* 抽屉：白底、条目 15px/500、选中青底，隐藏原分隔线 */
    .mu-drawer {
        background: #fff !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .12) !important;
    }

    .mu-drawer .mu-list {
        padding: 8px !important;
    }

    .mu-drawer li > a.mu-item-wrapper .mu-item {
        min-height: 46px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        background: transparent !important;
    }

    .mu-drawer .mu-item-title {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #2c3e50 !important;
    }

    .mu-drawer .mu-item-action i {
        font-size: 20px !important;
        color: #6b7280 !important;
    }

    .mu-drawer .mu-item-action:first-child {
        margin-right: 10px !important;
    }

    .mu-drawer .mu-divider {
        display: none !important;
    }

    .mu-drawer .mobile-menu-active .mu-item {
        background: rgba(0, 169, 150, .08) !important;
    }

    .mu-drawer .mobile-menu-active .mu-item-title,
    .mu-drawer .mobile-menu-active .mu-item-action i {
        color: #00a996 !important;
    }
}