/* ============================================================================
 * Xdir 顶栏品牌区（logo 图标 + 站名 + 版本徽章）—— 样式单一出处
 * ----------------------------------------------------------------------------
 * 本文件从 style.css 抽离，目的只有一个：**前台与后台「LOGO 实时预览」共用同一份规则**。
 *
 * 抽离前，后台预览在 admin.php 里自己抄了一份数值；只要前台改了而预览忘了同步，
 * 后台就会"骗人"——看着满意，发到前台却是另一个样子（v2.0.14 曾修过 12 处偏差）。
 * 现在两边引用同一文件，改一次两边同时生效，从机制上消除不同步。
 *
 * 作用域写法 `:is(#page-navbar, .xdir-brand-scope)`：
 *   · 前台     → 祖先 #page-navbar 命中；
 *   · 后台预览 → 容器加 class="xdir-brand-scope" 命中。
 *   两条路径执行完全相同的声明，全站只有这一处定义。
 *
 * 修改前须知：
 *   1. 顶栏高度 65px 是硬约束（#page-content 的 padding-top 依赖它）；
 *   2. 徽章上下 margin 必须等值 —— flex 的 align-self:center 居中 margin box，
 *      不等值会让内容偏离中线（详见徽章段落注释）；
 *   3. 窄屏（≤828px）隐藏站名与徽章，只留图标。
 * ==========================================================================*/

/* ----------------------------------------------------------------------------
 * 徽章垂直偏移：唯一可调旋钮
 * ----------------------------------------------------------------------------
 * 徽章是实心色块，视觉位置就看它的「盒顶」。本变量把盒顶相对「站名盒中线」
 * 做纵向位移，三个常用取值（28px 站名 / 18px 徽章 实测）：
 *
 *   0px    → 盒中心对齐（旧的垂直居中）；盒顶 24.5，比文字顶端低 2px
 *  -2px    → **盒顶对齐文字笔画顶端**（当前值）；盒顶 22.5 = 笔画顶端 22.5
 *  -5px    → 盒顶对齐站名「行盒」顶端；盒顶 19.5，比文字顶端高 3px（易显"翘"）
 *
 * 换算依据：站名行盒 28px、徽章 18px，中线到行盒顶为 (28−18)/2 = 5px；
 * 而 28px 微软雅黑的字形笔画顶端落在行盒顶下方 3px，故 −2px 才是"看着齐"。
 * -------------------------------------------------------------------------- */
:root { --xdir-badge-top-shift: -2px; }

/* ===================== 顶栏品牌区（logo 图标 + 站名 + 版本徽章）重构 Xdir 20261027 ===================== */
/* 品牌区外层容器：放开默认 max-width/overflow 裁剪，使「Logo + 站名 + 右上角徽章」完整显示 Xdir 20261028
   （仅在桌面端放开；移动端站名与徽章由 .xElli 隐藏，保留原有 65px 宽度约束） */
@media screen and (min-width: 829px) {
/* 顶栏固定高度：站标容器放大后若不锁高，.navbar-text 的 15px 上下外边距会把顶栏从 65 撑到 77，
   连带把整页内容下移/被遮挡。此处锁定 65px，站标在其中垂直居中 Xdir 20261028 */
#page-navbar {
    height: 65px;
    min-height: 65px;
}
/* 注意：.shiyu 绝不能设 display:flex / height —— 它原本高度为 0（内部为浮动），
   一旦占满整行会把右上 .topbar-right 挤到下一行（实测 top 变 83px，跑到顶栏外面）。
   站标垂直居中改用 .navbar-text 的 margin-top 控制 Xdir 修复 20261028 */
:is(#page-navbar, .xdir-brand-scope) .shiyu .navbar-text.super-sy {
    display: inline-flex;
    align-items: center;
    max-width: none;
    overflow: visible;
    margin-left: 0;
    margin-right: 10px;
    margin-top: 8.5px;          /* (顶栏 65 − 站标 48) / 2，实现垂直居中且顶栏不被撑高 Xdir 20261028 */
    margin-bottom: 0;
    line-height: 1;
    text-indent: 0;   /* 关键：bootstrap.min.css 全局 p{text-indent:28px} 会被继承，把站名与徽章的盒子各撑宽 28px 导致徽章压住文字 Xdir 修复 20261028 */
}
}
/* 品牌链接本体：display 用「两个选择器」双保险 ——
   `:is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand`（1,2,1）压过任何 `:is(#page-navbar, .xdir-brand-scope) .shiyu a`（1,1,1），
   `:is(#page-navbar, .xdir-brand-scope) .xdir-brand`（1,1,0）供非 .shiyu 容器（如后台侧栏）复用。
   必须由 CSS 在首帧就定成 inline-flex，否则 align-items:center 不生效 → 刷新抖动 Xdir v2.0.13 */
:is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand,
:is(#page-navbar, .xdir-brand-scope) .xdir-brand {
    position: relative;            /* 统一悬停光晕的定位上下文 Xdir 20261028 */
    display: inline-flex;
    align-items: center;           /* logo / 站名 / 徽章 三者垂直居中，左右并排 Xdir 20261028 */
    gap: 7px;                      /* 三者间隙收紧（10→7），左右并排更紧凑 Xdir 20261028 */
    height: 48px;                  /* 随图标 40px 略增（46→48），仍远低于顶栏 65px，不撑破 Xdir 20261028 */
    /* 悬停高亮背景的左内边距：原为 0，白色蒙版紧贴 logo 左缘，鼠标一滑上去图标就像
       "贴"在框边上。现给左侧留 6px（右侧同步放到 8px），并配 margin-left:-6px 抵消，
       保证 logo 的版面位置不变、与页面其它内容左对齐，只是高亮框向左"长"出一点。v2.0.18 */
    padding: 0 8px 0 6px;
    margin-left: -6px;
    text-indent: 0;                /* 重置全局 p 首行缩进继承，否则站名/徽章盒子各多 28px Xdir 修复 20261028 */
    text-decoration: none !important;
    line-height: 1;
}
/* 统一悬停反馈：滑到 logo / 站名 / 徽章任一处，整组一起亮起（视觉上是一个整体）
   ★ v2.0.9 修复「悬停后整组发糊」：
     原实现用 `::before` 绝对定位做一层 rgba(255,255,255,.09) 的白色蒙版。
     但绝对定位伪元素在绘制顺序上**晚于**普通流内联内容 —— 于是这层白膜盖在了
     logo 图标与站名文字**上面**，看起来就像隔着一层雾（用户反馈的「显示模糊」）。
     现改为直接给 <a> 自身加半透明背景：背景永远绘制在内容之下，
     既保留同样的高亮反馈，又不会遮住任何一笔。 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand {
    border-radius: 10px;
    transition: background .2s ease;
}
:is(#page-navbar, .xdir-brand-scope) .xdir-brand:hover {
    text-decoration: none !important;
    background: rgba(255,255,255,.07);
}
/* logo 图标：去边框、去底色、去阴影，仅保留纯图标（透明背景，随配色融合）Xdir 20261028 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;                   /* 图标盒 25→35 后留少量余量，避免裁切 Xdir 20261028 */
    height: 40px;
    border: 0;
    border-radius: 0;
    background: none;              /* 去掉蓝色渐变底 Xdir 20261028 */
    box-shadow: none;              /* 去掉发光阴影，消除"边框感" Xdir 20261028 */
    flex-shrink: 0;
    overflow: visible;
    transition: color .2s ease;
    /* 字号与颜色显式固定，不依赖继承 —— v2.0.19
       前台本容器继承自 .navbar-text（29px / 青绿），后台预览继承自 .xdir-prev（13px / 灰蓝）。
       当图标元素 <i> 存在时会被下方 35px/品牌蓝 的规则盖掉，看不出差别；但若站点把 LOGO
       直接写成纯文本（site_name 填文字而非 <i>/<img>），两边就会呈现出完全不同的字号与颜色。
       这里给定与图标一致的默认值，彻底切断继承链，两条作用域走同一套值。 */
    font-size: 35px;
    font-weight: 600;
    color: #58b4ff;
}
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico i,
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico .fa {
    font-size: 35px !important;    /* 图标 25→35，与 28px 站名匹配 Xdir 20261028 */
    line-height: 1;
    letter-spacing: 0 !important;
    /* 与站名做色彩区分：图标用品牌蓝、站名用近白，深灰顶栏(68,68,68)上层次分明 Xdir 20261028 */
    color: #58b4ff !important;
    margin: 0;
    -webkit-font-smoothing: antialiased;   /* 矢量图标边缘更干净 Xdir 20261028 */
    transition: color .2s ease, filter .2s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.30));   /* 深底上勾边更立体 */
}
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico img { max-width: 100%; max-height: 100%; display: block; }
/* 内联 SVG 文件夹树图标：固定尺寸、矢量清晰（替代 FA4.7 缺失的 fa-folder-tree）Xdir 20261102 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico svg.xdir-folder-tree { width: 34px; height: 34px; display: block; }
/* 防御：FA4.7 无 fa-folder-tree 字形，全局降级为 sitemap，避免任何位置出现空白图标 Xdir 20261102 */
.fa-folder-tree:before { content: "\f0e8"; }
/* 统一悬停：图标再提亮一档（与站名同步变化，但始终保持色相差）Xdir 20261028 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand:hover .xdir-brand-ico i,
:is(#page-navbar, .xdir-brand-scope) .xdir-brand:hover .xdir-brand-ico .fa {
    color: #8fd0ff !important;
    filter: drop-shadow(0 1px 3px rgba(88,180,255,.45));
}
/* 站名文本 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-name {
    font-size: 28px;               /* 站名 21→28 Xdir 20261028 */
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    flex: 0 0 auto;      /* 按文字实际宽度排布，不被拉伸 Xdir 20261028 */
    white-space: nowrap;
    text-indent: 0;      /* 同上：清除继承的首行缩进 Xdir 修复 20261028 */
    /* 比纯白略收一点、带一点冷调，避免与蓝色图标抢眼，同时压住深灰底 Xdir 20261028 */
    color: #f2f6fa;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
    -webkit-font-smoothing: antialiased;
    transition: color .2s ease;
}
:is(#page-navbar, .xdir-brand-scope) .xdir-brand:hover .xdir-brand-name { color: #ffffff; }
/* logo 容器：仅承载图标，尺寸与图标一致 Xdir 20261028 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;                   /* 与图标盒同步 Xdir 20261028 */
    height: 40px;
}
/* 版本徽章：与 logo + 站标名「同一水平线、垂直居中、留有明确间距」Xdir v2.0.11
   ── 位置：align-self:center —— 徽章中心与 logo / 站标名 的中心严格对齐，
      三者像一行文字里的「图标 + 文字 + 小标签」，不再是浮在右上角的上标。
      （v2.0.9 曾用 flex-start 做成角标，实测比站名中心高 15px，观感"翘起来"，
        与 logo、站名不成一体，故改回水平对齐。）
   ── 间距：margin-left 额外补一点，配合 .xdir-brand 的 gap，
      保证"站标名 — 徽章"之间始终有清晰留白，不贴字。
   ── 尺寸：18px 高 / 11px 字 / 0.8px 字距（v2.0.19 定版），不喧宾夺主。
   ── 清晰度：白字 + 红色渐变底 + 1px 半透明白描边 + 投影 + 文字投影。
      深灰顶栏(#444)上红块边缘靠白描边"托"出来，字靠 text-shadow 压住渐变，
      无论是 1x 还是 2x 屏都不会发虚、糊边。 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-badge {
    flex: 0 0 auto;
    align-self: center;            /* 与 logo / 站标名 垂直居中，三者同一水平线 */
    /* ── 垂直定位（v2.0.18 修订）
       align-self:center 居中的是「margin box」而非内容盒：
       上下 margin 等值（30 / 30）时净偏移为 0，徽章「盒中心」落在站名盒中心 33.5；
       margin box 78px 虽超出 48px 品牌框，但 flex 居中允许负向溢出，
       不撑高容器、也不影响右侧控制区。**两个 margin 必须成对改，只改一边立刻偏 5px。**
       注意：margin 只负责"居中"，真正的纵向位置由下面的 transform 决定。 */
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 3px;              /* 在 gap 之上再加 3px，间距更从容 */
    /* ── 顶端对齐：把盒顶抬到与站名文字笔画顶端同一条水平线
       实测坐标（顶栏内，CSS px）：
         站名行盒顶      19.5
         站名笔画顶端    22.5   ← 目标线（28px 微软雅黑，字形顶端在行盒顶下方 3px）
         徽章盒顶(居中)  24.5   ← 纯 align-self:center 的结果
       差值 24.5 − 22.5 = 2px，故取 −2px。
       若想与「行盒顶」对齐则取 −5px（但会比文字高 3px，观感偏"翘"）。
       用 transform 而非 margin/position：transform 不参与布局、不触发重排，
       不会把 flex 的居中结果挤歪，也不会改变横向间距。 */
    transform: translateY(var(--xdir-badge-top-shift, -2px));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 18px;                  /* v2.0.19 按需求定为 18px：比站名 28px 的一半略高，红块更醒目 */
    padding: 0 6px;                /* 小字号下左右对称即可，无需再补偿 letter-spacing */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;         /* v2.0.18 按需求放宽 .4→0.8，小字更透气、不挤成一块 */
    line-height: 1;
    white-space: nowrap;
    text-indent: 0;                /* 清除继承的首行缩进（否则徽章多出 28px 宽） */
    color: #fff;
    background: linear-gradient(180deg, #ff6262 0%, #d92c2c 100%);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .38);
    text-shadow: 0 1px 1px rgba(120, 0, 0, .45);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* 徽章与站名之间不加任何分隔线（不要虚线/竖线），纯靠 gap 留白区分 Xdir 20261028 */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-badge::before,
:is(#page-navbar, .xdir-brand-scope) .xdir-brand-badge::after { content: none !important; }
/* 统一悬停：徽章整体提亮一档、描边更实（与 logo / 站名 的提亮同步） */
:is(#page-navbar, .xdir-brand-scope) .xdir-brand:hover .xdir-brand-badge {
    background: linear-gradient(180deg, #ff7b7b 0%, #e63a3a 100%) !important;
    border-color: rgba(255, 255, 255, .62) !important;
    box-shadow: 0 2px 8px rgba(215, 49, 49, .5);
}

@media (max-width: 828px) {
    #page-navbar {
        height: 65px !important;
        min-height: 65px !important;
    }
    :is(#page-navbar, .xdir-brand-scope) .shiyu .navbar-text.super-sy {
        text-indent: 0 !important;      /* 清掉 28px 首行缩进，左边缘回到容器内容起点 */
        margin-left: 0 !important;      /* 原 -4px 的"目测补偿"已无意义，一并归零 */
        margin-right: 10px !important;
        margin-top: 8.5px !important;   /* (65 − 品牌框 48) / 2 → 垂直居中于顶栏 */
        margin-bottom: 0 !important;
        max-width: none !important;     /* 原 65px 会把徽章裁掉 */
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* 关键：特异性必须高于「:is(#page-navbar, .xdir-brand-scope) .shiyu a」，否则 display 会被 inline-block 覆盖 */
    :is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand {
        display: inline-flex !important;
        align-items: center !important;
        height: 48px;
        padding: 0;                     /* 窄屏只留 logo，去掉内边距让图标贴齐容器内容起点 */
        margin-left: 0;                 /* 同时清掉桌面端为悬停高亮加的 −6px 抵消，避免图标出界 */
    }
    /* 图标与徽章在品牌框内垂直居中（由上面的 flex 保证），这里只统一尺寸口径 */
    :is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand > * { flex: 0 0 auto; }
    :is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand .xdir-brand-ico { align-self: center; }
    :is(#page-navbar, .xdir-brand-scope) .shiyu a.xdir-brand .xdir-brand-badge {
        align-self: center;
        margin-top: 30px;          /* 与桌面端一致：上下 margin 等值，净位移为 0 */
        margin-bottom: 30px;
        margin-left: 3px;
    }

    /* 预览作用域在窄屏同样归零内边距与负 margin，与前台保持一致
       （前台由上面的 .shiyu 规则处理，预览没有 .shiyu，需单列一条；同特异性靠后覆盖） */
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand {
        padding: 0;
        margin-left: 0;
    }

    /* 移动端只保留 logo 图标：站名与版本徽章一律不显示 Xdir 20261029
       必须用 !important —— initBrandBadge() 会给徽章写内联 display:inline-flex，
       内联优先级高于样式表里的 .xElli{display:none}，光靠类名在窄屏上藏不住。 */
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand .xdir-brand-name,
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand .xdir-brand-badge,
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand-badge.xElli,
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand-name.xElli {
        display: none !important;
    }
}

/* 更窄屏（≤420px）：图标再收一档，给右侧搜索与按钮腾空间。
   与 style.css 其它 420px 规则分开维护，但作用域与上方一致，预览同样跟随。 */
@media (max-width: 420px) {
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand-ico,
    :is(#page-navbar, .xdir-brand-scope) .xdir-brand-logo {
        width: 34px;
        height: 34px;
    }
}