/* =========================================================
   小涵互联 · 全站统一导航栏（nav.css）
   站点页面 / 资源中心 / 登录注册 / 后台共用同一套结构与视觉
   ========================================================= */

:root {
    --xh-nav-h: 62px;
}

.xh-nav {
    position: relative;
    z-index: 900;
    width: 100%;
    background: var(--xh-nav-bg);
    border-bottom: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    color: var(--xh-text, #eaf1ff);
    font-family: var(--xh-font, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif);
}

/* 统一吸顶：全站一律 fixed，避免 sticky 在 overflow 容器里失效 */
.xh-nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
}

/* 导航 fixed 后为页面内容让位（PHP 直出页 / 登录注册页等不带 xh-has-nav 的场景） */
body:has(> .xh-nav.xh-nav-fixed) {
    padding-top: var(--xh-nav-h);
}

.xh-nav.scrolled {
    background: var(--xh-nav-bg-2);
    box-shadow: 0 10px 30px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .38);
}

.xh-nav-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--xh-nav-h);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- 品牌 ---------------- */
.xh-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}

.xh-nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--xh-primary-soft, rgba(var(--xh-primary-rgb), .12));
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
    flex: 0 0 auto;
}

.xh-nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xh-nav-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.xh-nav-titles b {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
}

.xh-nav-titles i {
    font-style: normal;
    font-size: 11px;
    color: var(--xh-muted, #8fa2c2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
}

/* ---------------- 主导航链接 ---------------- */
.xh-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.xh-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--xh-radius-pill, 999px);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--xh-text-2, #c7d6f2);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s var(--xh-ease, ease), color .18s var(--xh-ease, ease);
}

.xh-nav-link:hover {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .07);
    color: #fff;
}

.xh-nav-link.active {
    color: #fff;
    background: var(--xh-primary-grad, linear-gradient(120deg, #4f8cff, #7a5cff));
    box-shadow: 0 6px 18px rgba(var(--xh-primary-rgb), .28);
}

/* ---------------- 右侧动作区 ---------------- */
.xh-nav-side {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.xh-nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--xh-radius-sm, 10px);
    border: 1px solid transparent;
    color: var(--xh-text-2, #c7d6f2);
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
}

.xh-nav-ico svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.xh-nav-ico:hover,
.xh-nav-ico.active {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .08);
    border-color: var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
    color: #fff;
}

.xh-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 15px;
    border-radius: var(--xh-radius-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--xh-primary-grad, linear-gradient(120deg, #4f8cff, #7a5cff));
    box-shadow: 0 8px 20px rgba(var(--xh-primary-rgb), .26);
    transition: transform .16s var(--xh-ease, ease), box-shadow .16s;
}

.xh-nav-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.xh-nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(var(--xh-primary-rgb), .34);
}

.xh-nav-btn.ghost {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .05);
    border: 1px solid var(--xh-line-strong, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .16));
    box-shadow: none;
    color: var(--xh-text, #eaf1ff);
}

/* ---------------- 用户菜单 ---------------- */
.xh-nav-user {
    position: relative;
}

.xh-nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--xh-line-strong, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .16));
    border-radius: 50%;
    background: var(--xh-primary-soft, rgba(var(--xh-primary-rgb), .12));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .18s, transform .18s;
}

.xh-nav-avatar:hover {
    box-shadow: var(--xh-ring, 0 0 0 4px rgba(var(--xh-primary-rgb), .14));
    transform: translateY(-1px);
}

.xh-nav-menu {
    position: absolute;
    top: 46px;
    right: 0;
    min-width: 190px;
    padding: 8px;
    border-radius: var(--xh-radius, 14px);
    background: var(--xh-panel-2, rgba(23, 33, 53, .96));
    border: 1px solid var(--xh-line-strong, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .16));
    box-shadow: var(--xh-shadow, 0 18px 44px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .42));
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: xhMenuIn .16s var(--xh-ease, ease);
}

@keyframes xhMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.xh-nav-menu-head {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
}

.xh-nav-menu-head b {
    font-size: 13.5px;
    color: var(--xh-text, #eaf1ff);
    overflow: hidden;
    text-overflow: ellipsis;
}

.xh-nav-menu-head span {
    font-size: 11.5px;
    color: var(--xh-muted, #8fa2c2);
}

.xh-nav-menu a,
.xh-nav-menu button {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--xh-radius-sm, 10px);
    background: transparent;
    color: var(--xh-text-2, #c7d6f2);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, color .16s;
}

.xh-nav-menu a:hover,
.xh-nav-menu button:hover {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .07);
    color: #fff;
}

.xh-nav-menu button[data-xh-logout] {
    color: var(--xh-danger, #ff6b81);
}

/* ---------------- 汉堡按钮（移动端） ---------------- */
.xh-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
    border-radius: var(--xh-radius-sm, 10px);
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
    cursor: pointer;
}

.xh-nav-burger span {
    display: block;
    height: 1.6px;
    border-radius: 2px;
    background: var(--xh-text, #eaf1ff);
    transition: transform .2s var(--xh-ease, ease), opacity .2s;
}

.xh-nav.nav-open .xh-nav-burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.xh-nav.nav-open .xh-nav-burger span:nth-child(2) { opacity: 0; }
.xh-nav.nav-open .xh-nav-burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
    .xh-nav-titles i { display: none; }
    .xh-nav-link { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 860px) {
    .xh-nav-inner { gap: 10px; padding: 0 14px; }
    .xh-nav-burger { display: flex; }
    .xh-nav-links {
        position: absolute;
        top: var(--xh-nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px 12px 14px;
        background: rgba(9, 13, 24, .98);
        border-bottom: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09));
        box-shadow: 0 18px 40px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .45);
        display: none;
        max-height: calc(100vh - var(--xh-nav-h));
        overflow: auto;
    }
    .xh-nav.nav-open .xh-nav-links { display: flex; }
    .xh-nav-link { height: 40px; justify-content: flex-start; padding: 0 12px; border-radius: var(--xh-radius-sm, 10px); }
    .xh-nav-btn.ghost { display: none; }
}

@media (max-width: 520px) {
    .xh-nav-titles b { font-size: 14px; max-width: 40vw; }
    .xh-nav-ico { display: none; }
    .xh-nav-btn { padding: 0 12px; }
}

/* 统一导航存在时，为站点页面预留顶部空间并隐藏原站各自为政的旧导航 */
body.xh-has-nav {
    padding-top: 62px !important;
}

/* 旧站左侧抽屉（mdui-drawer）与统一顶部导航重复，统一隐藏并取消 body 左侧占位 */
body.xh-has-nav,
body.xh-has-nav.mdui-drawer-body-left {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

body.xh-has-nav .xh-legacy-hide,
body.xh-has-nav #drawer,
body.xh-has-nav .mdui-drawer,
body.xh-has-nav .mdui-drawer-left,
body.xh-has-nav .mdui-overlay {
    display: none !important;
}

/* 旧站内容区若按「抽屉打开」状态做了左偏移，一并归零 */
body.xh-has-nav .mdui-drawer-body-left .mdui-appbar {
    margin-left: 0 !important;
}


/* ---------------------------------------------------------
   全站公告条（内容由后台「站点外观 → 首页公告」维护，支持 HTML）
   --------------------------------------------------------- */
.xh-notice {
    max-width: 1180px;
    margin: 16px auto 0;
    padding: 14px 18px;
    border-radius: var(--xh-radius, 14px);
    border: 1px solid rgba(255, 92, 92, .28);
    background: linear-gradient(180deg, rgba(255, 92, 92, .10), rgba(255, 92, 92, .04));
    line-height: 1.7;
    word-break: break-word;
}
.xh-notice p { margin: 0 0 6px; }
.xh-notice p:last-child { margin-bottom: 0; }
.xh-notice a { color: #6ea8ff; text-decoration: underline; }
.xh-notice a:hover { color: #9cc4ff; }
@media (max-width: 760px) {
    .xh-notice { margin: 12px 12px 0; padding: 12px 14px; }
}

/* ---------------------------------------------------------
   统一顶栏隔离层：防止原站页面全局 header / * / body 样式污染导航
   --------------------------------------------------------- */
.xh-nav,
.xh-nav * { box-sizing: border-box; }

.xh-nav {
    flex: 0 0 100% !important;
    order: -1;
    align-self: stretch;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 62px;
    float: none !important;
    transform: none !important;
    filter: none !important;
    top: 0 !important;
}

.xh-nav.xh-nav-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }

/* body 若是 flex/grid 布局（部分工具页），导航依旧独占首行整行宽度 */
body.xh-has-nav > .xh-nav { order: -1; width: 100% !important; flex: 0 0 100% !important; }

/* 原站固定定位的旧顶栏（Tailwind / 自定义 fixed header）一并隐藏 */
body.xh-has-nav > nav.fixed,
body.xh-has-nav > div.fixed.top-0,
body.xh-has-nav > .mdui-toolbar.mdui-toolbar-top { display: none !important; }


/* =========================================================
   v2 导航：主题切换按钮 + 移动端右侧抽屉
   ========================================================= */

/* 主题切换 */
.xh-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius-pill, 999px);
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .05);
    color: var(--xh-text-2);
    font: 500 12.5px var(--xh-font);
    cursor: pointer;
    transition: background .16s var(--xh-ease), border-color .16s var(--xh-ease), color .16s;
}
.xh-theme-btn:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1); color: var(--xh-text); }
.xh-theme-ico { position: relative; display: inline-flex; width: 16px; height: 16px; }
.xh-theme-ico svg { position: absolute; inset: 0; width: 16px; height: 16px; fill: currentColor; transition: opacity .2s, transform .3s; }
.xh-theme-ico .ico-moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
html[data-theme="dark"] .xh-theme-ico .ico-sun { opacity: 0; transform: rotate(40deg) scale(.7); }
html[data-theme="dark"] .xh-theme-ico .ico-moon { opacity: 1; transform: none; }
.xh-theme-btn[data-mode="auto"] { border-style: dashed; }
html[data-theme="light"] .xh-theme-btn { background: #fff; }

/* 抽屉 */
.xh-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    pointer-events: none;
}
.xh-drawer.open { display: block; pointer-events: auto; }
.xh-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(var(--xh-k), var(--xh-k), var(--xh-k), .48);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .24s var(--xh-ease);
}
.xh-drawer.open .xh-drawer-mask { opacity: 1; }
.xh-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--xh-panel-2);
    border-left: 1px solid var(--xh-line);
    box-shadow: -24px 0 60px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .35);
    transform: translateX(102%);
    transition: transform .28s var(--xh-ease);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
html[data-theme="dark"] .xh-drawer-panel {
    background: linear-gradient(180deg, rgba(17, 25, 43, .98), rgba(9, 13, 24, .99));
}
.xh-drawer.open .xh-drawer-panel { transform: translateX(0); }
html.xh-drawer-open, html.xh-drawer-open body { overflow: hidden; }

.xh-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--xh-line);
}
.xh-drawer-brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
.xh-drawer-brand b {
    font-size: 14.5px; font-weight: 700; color: var(--xh-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-drawer-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--xh-line);
    border-radius: 10px;
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .05);
    color: var(--xh-text-2);
    cursor: pointer;
}
.xh-drawer-close svg { width: 15px; height: 15px; fill: currentColor; }
.xh-drawer-close:hover { color: var(--xh-text); background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1); }

.xh-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 8px; -webkit-overflow-scrolling: touch; }

.xh-drawer-user {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius);
    background: linear-gradient(135deg, rgba(var(--xh-primary-rgb), .12), rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03));
    text-decoration: none;
    color: inherit;
}
.xh-drawer-user.guest { margin-bottom: 10px; }
.xh-drawer-avatar {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: var(--xh-primary-grad);
    color: #fff; font-weight: 700; font-size: 17px;
    box-shadow: 0 8px 20px rgba(var(--xh-primary-rgb), .3);
}
.xh-drawer-userinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.xh-drawer-userinfo b { font-size: 14.5px; color: var(--xh-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-drawer-userinfo i { font-style: normal; font-size: 11.5px; color: var(--xh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-drawer-arrow { flex: 0 0 auto; width: 16px; height: 16px; fill: var(--xh-faint); }

.xh-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 4px; }
.xh-drawer-auth .xh-btn { height: 40px; }

.xh-drawer-section { margin-top: 18px; }
.xh-drawer-label {
    font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--xh-faint); margin: 0 6px 8px;
}
.xh-drawer-links { display: flex; flex-direction: column; gap: 3px; }
.xh-drawer-link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px; padding: 0 13px;
    border-radius: 12px;
    color: var(--xh-text-2);
    font-size: 14.5px;
    text-decoration: none;
    transition: background .16s, color .16s;
}
.xh-drawer-link svg { width: 15px; height: 15px; fill: var(--xh-faint); }
.xh-drawer-link:hover, .xh-drawer-link:active { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .06); color: var(--xh-text); }
.xh-drawer-link.active {
    color: #fff;
    background: var(--xh-primary-grad);
    box-shadow: 0 8px 20px rgba(var(--xh-primary-rgb), .26);
}
.xh-drawer-link.active svg { fill: rgba(255, 255, 255, .85); }

.xh-drawer-theme {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; padding: 4px;
    border: 1px solid var(--xh-line);
    border-radius: 13px;
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
}
.xh-drawer-theme button {
    height: 36px; border: 0; border-radius: 10px; background: transparent;
    color: var(--xh-muted); font: 500 13px var(--xh-font); cursor: pointer;
    transition: background .16s, color .16s;
}
.xh-drawer-theme button.active { background: var(--xh-primary-grad); color: #fff; box-shadow: 0 6px 16px rgba(var(--xh-primary-rgb), .3); }

.xh-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xh-drawer-actions a, .xh-drawer-actions button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 14px;
    border: 1px solid var(--xh-line);
    border-radius: 11px;
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
    color: var(--xh-text-2); font: 500 13px var(--xh-font);
    text-decoration: none; cursor: pointer;
}
.xh-drawer-actions button[data-xh-logout] { color: var(--xh-danger); }
.xh-drawer-actions a:hover, .xh-drawer-actions button:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09); color: var(--xh-text); }

.xh-drawer-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--xh-line);
    color: var(--xh-faint); font-size: 11.5px;
}
.xh-drawer-ver { padding: 1px 7px; border-radius: 99px; background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .06); }

/* 响应式：≤980 收起桌面链接，启用右侧抽屉 */
@media (max-width: 980px) {
    .xh-nav-links { display: none !important; }
    .xh-nav-burger { display: flex; }
    .xh-nav-inner { gap: 10px; padding: 0 14px; }
    .xh-theme-btn .xh-theme-label { display: none; }
    .xh-theme-btn { padding: 0 9px; }
    .xh-hide-sm { display: none !important; }
}
@media (max-width: 520px) {
    .xh-nav-titles b { font-size: 14px; max-width: 38vw; }
    .xh-nav-ico { display: none; }
    .xh-nav-btn { padding: 0 12px; }
    .xh-nav-btn svg { display: none; }
}

/* ---------------------------------------------------------
   Logo 与主题反色：深色主题下默认反相，浅色主题保持原色
   后台「站点外观」可分别上传深/浅两套 Logo，未配置则用反色兜底
   --------------------------------------------------------- */
.xh-nav-logo img { transition: filter .2s ease; }
html[data-theme="dark"] .xh-nav-logo img[data-logo-invert="1"] { filter: invert(1) hue-rotate(180deg) brightness(1.12); }
html[data-theme="light"] .xh-nav-logo img[data-logo-invert="1"] { filter: none; }