/* ==========================================================================
   TaiQi Shell — Base.master 外壳样式
   顶栏 / 头部搜索 / 主导航 / 下拉面板 / 面包屑 / 悬浮组件 / 页脚 / 头像面板
   --------------------------------------------------------------------------
   服务 27 个 PC 页面：15 个直接引用 Base.master，12 个经 User.master 嵌套继承。
   依赖：/css/tokens.css 必须先于本文件加载（色板 / 字号 / 间距 / 阴影 / 动效）。

   三条不可违反的约束：
   1. 本文件排在 <asp:ContentPlaceHolder ID="head"> 之前，子页面 CSS 永远比它晚。
      所以外壳规则一律带 .tq-shell 前缀（+1 类特异度），才能稳定压住
      search_home.css 的 .header{border-bottom:2px solid #19e;min-width:1200px}、
      search_com.css 的 a{white-space:nowrap} 之类。
      例外：第 1、2 节（全局重置与 Element UI 主题化）必须保持不加前缀——
      给 body *{margin:0;padding:0} 加前缀会把特异度从 (0,0,0,1) 抬到 (0,0,1,1)，
      反而压过当前能覆盖它的页面规则，造成 27 页的静默级联变化。
   2. 绝不给 body / .tq-shell 设 font-size：home_common 是 16px、search.css 是 14px，
      设了会改掉 26 个页面的正文排版。字号逐组件显式声明。
   3. 绝不写任何 .container 规则：Base.master 里包裹 cphContent 的那个 .container
      在 26 页上是无样式全宽块，只有 Search.aspx 被 Bootstrap 的 .container 变成
      1200px + margin-top:35px。各页面自行居中，动它等于同时改 27 页版心。

   另：jQuery 的 .show()/.hide() 会写内联 display，压过任何样式表。因此
   .nav-pop-list / .Js_hotSearchKeyWord / #myInfoBox / .suspension .d / .a-top
   这些元素本身绝不设 display:flex，要 flex 就 flex 它们的子元素。
   ========================================================================== */

/* ---------- 0. 外壳专属 token（可移植原始量在 /css/tokens.css） ---------- */
:root {
    /* 版心 */
    --shell-max: 1200px;
    --shell-pad: 20px;
    /* 结构尺寸（4px 栅格） */
    --topbar-h: 40px;
    --header-pad-y: 18px;
    --logo-w: 150px;
    --logo-h: 50px;
    --search-h: 48px;
    --btn-w: 110px;
    --nav-h: 64px;
    --nav-item-w: 88px;
    --crumb-h: 48px;
    --sus-tile: 64px;
    --search-max: 860px;
    --pop-w: 300px;
    /* 导航配色：改这三个即可整体切换深色/浅色导航 */
    --nav-bg: var(--brand-600);
    --nav-bg-hover: var(--brand-700);
    --nav-fg: var(--surface);
    /* 层级契约：.suspension 100000 > --z-pop > --z-nav > 其余(auto)。
       .site-nav-r 只允许设 position:relative（给 #myInfoBox 当定位祖先），
       绝不设 z-index，否则会打断这条链 */
    --z-nav: 1040;
    --z-pop: 1060;
    /* 外壳专用阴影（tokens.css 的 --shadow-btn 对 30px 顶栏按钮太大） */
    --shadow-btn-sm: 0 2px 6px -2px hsl(var(--brand-700) / .45);
    --shadow-bar: 0 1px 2px hsl(var(--ink-900) / .06);
    --shadow-tile: 0 4px 16px -6px hsl(var(--ink-900) / .18);
    /* 页脚次要文字：tokens.css 的 --ink-500 压在 --ink-900 深海军蓝底上只有
       3.81:1，不到 AA 的 4.5。这个值实测 5.54:1，且仍比 --ink-400(6.97:1) 暗，
       保留与页脚链接的层级差 */
    --foot-muted: 215 18% 58%;
}

/* ==========================================================================
   1. 全局重置
   --------------------------------------------------------------------------
   影响全部 27 页，改动前必须全量回归。以下逐字保留自原 Base.master 内联块 B，
   它们是整个 1200px float 布局的地基：
   - box-sizing:border-box 是 .nav-pop-list2{width:560px;padding:0 10px} 能装下的前提
   - body *{margin:0;padding:0} 是 .nav-ul/.class-lay/h3/p 没有默认外边距的原因
   - body a{color:inherit} 是过去必须写 .nav-ul a{color:#fff}、.foot a{...!important}
     的原因；保留它意味着本文件每个区域都要显式声明链接颜色（各节已声明）
   两处 font-family 的 !important 必须保留：search.css:20502 的
   body{font:14px 'Microsoft YaHei',Tahoma,Verdana,'Simsun'} 是简写，会在
   Search.aspx 上重置 font-family，且它加载在本文件之后、特异度相同。
   ========================================================================== */
body *, body *:before, body *:after {
    box-sizing: border-box;
}

body * {
    margin: 0;
    padding: 0;
}

body a {
    text-decoration: none;
    background-color: transparent;
    color: inherit;
}

    body a:visited {
        color: inherit;
    }

body img {
    border-style: none;
}

body ul {
    list-style-type: none;
}

body input {
    font-family: inherit;
    font-size: inherit;
}

body span, body svg {
    color: inherit;
}

body button {
    font-family: inherit;
    cursor: pointer;
    border-width: 0;
    background-color: transparent;
}

    body button:focus, body button:active {
        background-color: transparent;
        outline: none;
    }

body {
    font-family: PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif !important;
    font-weight: 400;
    /* 原为 background-color: var(--graph_bg_regular)——该自定义属性在整个仓库从未定义，
       声明无效，实际渲染一直是白色画布。这里显式写成白色，不加 !important，
       以保留 search.css 的 #eef1f5!important 与 search_home.css 的 #f9f9f9。 */
    background-color: hsl(var(--surface));
    /* 保留待测：这是唯一可能破坏 .nav-wrap{position:sticky} 的声明，
       吸顶验证通过后才可删除 */
    overflow-x: auto;
}

/* 实测 matchMedia('(-webkit-max-device-pixel-ratio:1)').matches === true，
   即 DPR=1 的普通桌面屏上生效的正是下面这份字体栈（不是上面那份）。
   因此这个块必须保留，不能当死代码删。 */
@media (-webkit-max-device-pixel-ratio: 1) {
    body {
        font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif !important;
    }
}

/* ---------- 2. 全局组件（不加 .tq-shell 前缀：弹窗挂在 body 下，且非外壳） ---------- */
[v-cloak] {
    display: none;
}

.el-form-item {
    margin-bottom: 22px;
}

.el-input__inner {
    height: 35px;
}

/* ==========================================================================
   外壳重构（阶段 5-8）
   --------------------------------------------------------------------------
   以上 A/B/C 三段是从 Base.master 逐字搬来的历史样式，仅删掉已确认死亡的规则；
   保留它们是为了不误删任何仍在生效的声明。本节全部带 .tq-shell 前缀，
   在文件中更靠后且特异度更高（+1 类），因此稳定覆盖上方历史规则，
   也稳定覆盖子页面注入在 head 占位符处的 CSS。

   三条铁律（见文件头）：不给 body/.tq-shell 设 font-size；不写任何 .container
   规则；不给 jQuery 会 .show()/.hide() 的元素本身设 display:flex。
   ========================================================================== */

/* ---------- S1. 蓝色单条导航栏：logo + 菜单 + 工具区 + 登录态 ---------- */
.tq-shell .nav-wrap {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: hsl(var(--nav-bg));
    background-image: none;
    height: auto;
    box-shadow: var(--shadow-bar);
}

.tq-shell .nav-bar {
    color: hsl(var(--nav-fg));
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: auto;
    max-width: var(--shell-max);
    height: var(--nav-h);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}

/* logo 是蓝底上的白底图，放进白色胶囊芯片才读得清（与登录/注册页品牌区一致） */
.tq-shell .logo {
    flex: none;
    float: none;
}

    .tq-shell .logo .wrap-logo {
        display: flex;
        float: none;
        align-items: center;
        width: auto;
        height: 40px;
        margin: 0;
        padding: 5px 12px;
        border-radius: var(--r-sm);
        box-shadow: var(--shadow-btn-sm);
        transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

        .tq-shell .logo .wrap-logo:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px -4px hsl(var(--brand-950) / .5);
        }

        .tq-shell .logo .wrap-logo img {
            display: block;
            width: auto;
            height: 30px;
            object-fit: contain;
        }

/* 左侧主菜单 */
.tq-shell .nav-ul-l {
    display: flex;
    flex: none;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--fs-15);
}

.tq-shell .nav-bar .nav-list-item {
    position: relative;
    display: flex;
    float: none;
    align-items: stretch;
    line-height: normal;
    z-index: 100;
}

    .tq-shell .nav-bar .nav-list-item a,
    .tq-shell .nav-bar .nav-list-item .nav-list-tit1 {
        position: relative;
        display: flex;
        float: none;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: var(--nav-item-w);
        height: 100%;
        padding: 0 var(--sp-3);
        font-size: var(--fs-15);
        font-weight: 500;
        color: hsl(var(--nav-fg));
        text-align: center;
        white-space: nowrap;
        transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .nav-bar .nav-list-item a:hover,
        .tq-shell .nav-bar .nav-list-item .nav-list-tit1:hover,
        .tq-shell .nav-bar .nav-list-item:hover > .pos-rel .nav-list-tit1 {
            background: hsl(var(--nav-bg-hover));
            color: hsl(var(--nav-fg));
        }

        /* 悬停项底部指示条 */
        .tq-shell .nav-bar .nav-list-item a::after,
        .tq-shell .nav-bar .nav-list-item .pos-rel::after {
            content: "";
            position: absolute;
            right: var(--sp-3);
            bottom: 0;
            left: var(--sp-3);
            height: 2px;
            background: hsl(var(--surface));
            transform: scaleX(0);
            transform-origin: center;
            opacity: .9;
            transition: transform var(--dur) var(--ease-out);
        }

        .tq-shell .nav-bar .nav-list-item a:hover::after,
        .tq-shell .nav-bar .nav-list-item:hover .pos-rel::after {
            transform: scaleX(1);
        }

.tq-shell .pos-rel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    /* 不自带横向内边距：里面的 .nav-list-tit1 已有 padding，两层叠加会把
       导航最小内容宽度推到 800px 以上，在窄视口撑出横向滚动条 */
    padding: 0;
}

/* JS 在 nav-icon2-down / nav-icon2-up 之间切换，两个类名都必须存活 */
.tq-shell .nav-icon2 {
    display: block;
    width: 14px;
    height: 14px;
    background: none;
    color: hsl(var(--nav-fg));
}

.tq-shell .pos-rel .nav-icon2 {
    position: static;
    right: auto;
    top: auto;
}

.tq-shell .nav-icon2 svg {
    display: block;
    width: 14px;
        height: 14px;
    stroke: currentColor;
        stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    transition: transform var(--dur) var(--ease-out);
}

.tq-shell .nav-icon2-up svg {
    transform: rotate(180deg);
}

/* ---------- S2. 右侧工具区：个人中心 / 上传文档 / 登录态 ---------- */
.tq-shell .nav-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sp-2);
    height: 100%;
    min-width: 0;
    /* index 等页不渲染 .nav-search，右对齐不能只靠它的 auto margin；
       两处 auto 并存时剩余空间对半分，搜索框正好居中 */
    margin-left: auto;
}

.tq-shell .nav-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid hsl(0 0% 100% / .34);
    border-radius: var(--r-full);
    font-size: var(--fs-13);
    color: hsl(0 0% 100% / .92);
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

    .tq-shell .nav-tool svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tq-shell .nav-tool:hover {
        background: hsl(0 0% 100% / .14);
        border-color: hsl(0 0% 100% / .6);
        color: hsl(var(--surface));
    }

/* position:relative 只为给 #myInfoBox 当定位祖先；此处绝不设 z-index，
   否则会破坏 .suspension(100000) > --z-pop > --z-nav > auto 的层级契约 */
.tq-shell .site-nav-r {
    position: relative;
    display: flex;
    float: none;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-13);
    color: hsl(0 0% 100% / .85);
}

    .tq-shell .site-nav-r > a {
        float: none;
        margin: 0;
        color: hsl(0 0% 100% / .85);
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .site-nav-r > a:hover {
            color: hsl(var(--surface));
        }

/* home_common_v921.css 的 .site-nav-r a{margin-left:10px;float:left} 只重置了
   直接子级；#myInfoBox 挂进 .site-nav-r 后，面板内所有链接仍被渗入
   float/margin（.links-item 不是 flex 容器，菜单项会被挤成横排），必须整棵子树中和 */
.tq-shell .site-nav-r .user-pop a,
.tq-shell .site-nav-r .user-pop a:hover,
.tq-shell .site-nav-r .user-pop a:focus {
    float: none;
    margin: 0;
    text-decoration: none;
}

.tq-shell .user-name {
    display: none;
    max-width: 88px;
    overflow: hidden;
    font-weight: 500;
    color: hsl(var(--surface));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tq-shell .topbar-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border: 1px solid hsl(0 0% 100% / .55);
    transition: border-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .topbar-avatar:hover {
        border-color: hsl(var(--surface));
    }

    .tq-shell .topbar-avatar .avatar-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tq-shell .vip-badge {
    flex: none;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--r-full);
    font-size: var(--fs-11);
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .02em;
}

.tq-shell .vip-badge--on {
    background: hsl(var(--surface));
    color: hsl(var(--brand-600));
}

.tq-shell .vip-badge--off {
    background: transparent;
    border: 1px solid hsl(0 0% 100% / .45);
    color: hsl(0 0% 100% / .8);
}

/* 登录=幽灵，注册=实心白底（蓝条上唯一的实心块，转化动作只有一个） */
.tq-shell .auth-links {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.tq-shell .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 32px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-full);
    font-size: var(--fs-13);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

    .tq-shell .auth-btn.login-btn {
        background: transparent;
        border: 1px solid hsl(0 0% 100% / .5);
        color: hsl(var(--surface));
    }

        .tq-shell .auth-btn.login-btn:hover {
            background: hsl(0 0% 100% / .14);
            border-color: hsl(0 0% 100% / .8);
            color: hsl(var(--surface));
        }

    .tq-shell .auth-btn.register-btn {
        background: hsl(var(--surface));
        border: 1px solid transparent;
        box-shadow: var(--shadow-btn-sm);
        color: hsl(var(--brand-600));
    }

        .tq-shell .auth-btn.register-btn:hover {
            background: hsl(var(--brand-50));
            color: hsl(var(--brand-700));
            box-shadow: 0 4px 12px -4px hsl(var(--brand-950) / .5);
        }

/* ---------- S3. 导航条内紧凑搜索框（大搜索行已移到 index.aspx） ---------- */
.tq-shell .nav-search {
    display: flex;
    flex: 0 1 200px;
    align-items: center;
    min-width: 120px;
    height: 34px;
    margin-left: auto;
    background: hsl(0 0% 100% / .14);
    border: 1px solid hsl(0 0% 100% / .3);
    border-radius: var(--r-full);
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), flex-basis var(--dur) var(--ease-out);
}

    .tq-shell .nav-search:focus-within {
        flex-basis: 260px;
        background: hsl(var(--surface));
        border-color: hsl(var(--surface));
    }

.tq-shell .nav-search-ipt {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-13);
    color: hsl(var(--surface));
    outline: 0;
}

    .tq-shell .nav-search-ipt::placeholder {
        color: hsl(0 0% 100% / .65);
    }

    .tq-shell .nav-search:focus-within .nav-search-ipt {
        color: hsl(var(--ink-900));
    }

        .tq-shell .nav-search:focus-within .nav-search-ipt::placeholder {
            color: hsl(var(--ink-400));
        }

.tq-shell .nav-search-btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: hsl(0 0% 100% / .8);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .nav-search-btn:hover {
        color: hsl(var(--surface));
    }

    .tq-shell .nav-search:focus-within .nav-search-btn {
        color: hsl(var(--brand-600));
    }

    .tq-shell .nav-search-btn svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- S4. 下拉面板 ---------- */
/* 这些元素本身由 jQuery .show()/.hide() 写内联 display，绝不能在它们身上设 flex */
.tq-shell .nav-pop-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-pop);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-pop);
}

/* 面板挂在 .nav-list-item 里，S1 对导航条所有 a 的规则会渗进每个下拉面板：
   min-width:88px 把子分类胶囊撑宽一倍、hover 深蓝底让父分类标题蓝字压蓝底、
   2px 白色下划线指示条挂在每个链接尾部。这里整棵中和，再由各面板自己的
   规则重新上色。特异性与 S1 的 a 规则持平（靠出现顺序取胜），
   低于面板内链接规则，不会反杀面板样式 */
.tq-shell .nav-bar .nav-pop-list a {
    position: static;
    min-width: 0;
    height: auto;
    padding: 0;
    font-weight: 400;
}

    .tq-shell .nav-bar .nav-pop-list a:hover {
        background-color: transparent;
        color: inherit;
    }

    .tq-shell .nav-bar .nav-pop-list a::after {
        content: none;
        position: static;
        background: none;
    }

.tq-shell .nav-pop-list2 {
    /* 中宽卡片：父分类竖列 + 子分类横排的经典文库式布局，
       比 640px 大面板收敛、比窄卡片可扫读 */
    width: 460px;
    /* 展开的面板是绝对定位的，在窄视口下会伸出右缘并撑出横向滚动条 */
    max-width: calc(100vw - 2 * var(--shell-pad));
}

    /* 滚动放在内层：面板本体一旦设 overflow，就会裁掉 S11 的 tooltip 箭头
       （::before，top:-5px）和跨间隙的透明桥（::after，top:-9px）。
       父分类数量在服务端没有上限（Base.master.cs 只把子分类截断到 8），
       所以必须能滚动，否则分类一多就顶穿视口 */
    .tq-shell .nav-pop-list2 .nav-pop-scroll {
        max-height: min(70vh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--sp-2) 0;
        border-radius: inherit;
    }

.tq-shell .nav-pop-list .class-lay {
    display: flex;
    align-items: flex-start;
    gap: 4px 16px;
    width: 100%;
    margin: 0;
    padding: 10px 16px 12px;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--line-soft));
    transition: background-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .nav-pop-list .class-lay:last-child {
        border-bottom: 0;
    }

    .tq-shell .nav-pop-list .class-lay:hover {
        background: hsl(var(--brand-50));
    }

.tq-shell .nav-pop-list2 .class-lay h3 {
    flex: 0 0 108px;
    height: auto;
    margin: 0;
    padding-top: 3px;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 20px;
}

    .tq-shell .nav-pop-list2 .class-lay h3 a.tit {
        /* inline 压掉 S1 渗入的 flex 居中，标题按设计左对齐 */
        display: inline;
        width: auto;
        height: auto;
        font-size: var(--fs-14);
        font-weight: 600;
        color: hsl(var(--ink-900));
        text-align: left;
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .nav-pop-list2 .class-lay h3 a.tit:hover {
            color: hsl(var(--brand-700));
        }

    /* 标题尾部的 › 箭头：提示整条父分类可点进列表页 */
    .tq-shell .nav-pop-list2 .class-lay h3 a.tit::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        vertical-align: 2px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        opacity: .4;
        transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    }

        .tq-shell .nav-pop-list2 .class-lay h3 a.tit:hover::after {
            transform: rotate(-45deg) translateX(1px);
            opacity: 1;
        }

.tq-shell .nav-pop-list .class-lay ul {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 3px 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tq-shell .nav-pop-list .class-lay li {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
}

    /* 子分类做成安静的文本链（无底色），hover 升级为实心品牌胶囊；
       行 hover 只有浅品牌底，层级递进不互相打架 */
    .tq-shell .nav-pop-list .class-lay li a {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 3px 9px;
        border: 1px solid transparent;
        border-radius: var(--r-full);
        font-size: var(--fs-13);
        line-height: 20px;
        color: hsl(var(--ink-600));
        background: transparent;
        text-align: center;
        white-space: nowrap;
        transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .nav-pop-list .class-lay li a:hover {
            background: hsl(var(--brand-600));
            border-color: transparent;
            color: hsl(var(--surface));
        }

/* 个人中心下拉 */
.tq-shell .nav-pop-list5 {
    min-width: 140px;
    padding: 6px 0;
    line-height: 1.4;
}

    .tq-shell .nav-pop-list5 .ui-navlist2 {
        display: block;
        font-size: 0;
    }

        .tq-shell .nav-pop-list5 .ui-navlist2 li {
            display: block;
            width: auto;
            margin: 0;
            padding: 0;
            text-align: left;
        }

            .tq-shell .nav-pop-list5 .ui-navlist2 li a {
                display: block;
                padding: 8px var(--sp-5);
                font-size: var(--fs-13);
                color: hsl(var(--ink-700));
                white-space: nowrap;
                transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
            }

                .tq-shell .nav-pop-list5 .ui-navlist2 li a:hover {
                    background: hsl(var(--brand-50));
                    color: hsl(var(--brand-700));
                }

/* ---------- S5. 面包屑 ---------- */
.tq-shell .crumb {
    display: flex;
    align-items: center;
    width: auto;
    max-width: var(--shell-max);
    height: var(--crumb-h);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}

.tq-shell .crumb-txt {
    margin: 0;
    font-size: var(--fs-13);
    line-height: 1.6;
    color: hsl(var(--ink-500));
}

    .tq-shell .crumb-txt a {
        color: hsl(var(--ink-600));
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .crumb-txt a:hover {
            color: hsl(var(--brand-600));
        }

/* ---------- S6. 页脚 ---------- */
.tq-shell .foot {
    margin-top: var(--sp-16);
    padding: var(--sp-8) var(--shell-pad) var(--sp-6);
    background: hsl(var(--ink-900));
    font-size: var(--fs-13);
    text-align: center;
    clear: both;
}

.tq-shell .foot-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-4);
}

    .tq-shell .foot-links a {
        position: relative;
        padding: 0 var(--sp-4);
        font-size: var(--fs-13);
        color: hsl(var(--ink-400));
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .foot-links a:hover {
            color: hsl(var(--surface));
        }

        .tq-shell .foot-links a + a::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 11px;
            background: hsl(0 0% 100% / .18);
            transform: translateY(-50%);
        }

.tq-shell .foot p {
    margin: 4px 0 0;
    font-size: var(--fs-12);
    line-height: 1.8;
    color: hsl(var(--foot-muted));
}

.tq-shell .foot a {
    color: hsl(var(--ink-400));
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .foot a:hover {
        color: hsl(var(--surface));
    }

/* ---------- S7. 右侧悬浮栏：图标 + 文字竖排瓦片 ---------- */
.tq-shell .suspension {
    position: fixed;
    right: 0;
    bottom: 130px;
    z-index: 100000;
    width: auto;
    height: auto;
}

.tq-shell .suspension-box {
    position: relative;
    display: flex;
    float: none;
    flex-direction: column;
    align-items: stretch;
    width: var(--sus-tile);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line));
    border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
    box-shadow: var(--shadow-tile);
    overflow: visible;
}

/* 用 text-align + 块级排布而不是 flex：.a-top 的 display 由 JS 写内联 block，
   若这里设 flex 会被内联值顶掉，图标与文字就会失去排布 */
.tq-shell .suspension .a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 4px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid hsl(var(--line-soft));
    border-radius: 0;
    background: transparent;
    color: hsl(var(--ink-600));
    font-size: var(--fs-11);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

    .tq-shell .suspension .a:last-of-type {
        border-bottom: 0;
    }

.tq-shell .suspension-box > .a:first-child {
    border-radius: var(--r-md) 0 0 0;
}

.tq-shell .suspension .a:hover {
    background: hsl(var(--brand-600));
    color: hsl(var(--surface));
}

/* kefu/style.css 给 .suspension .a span 挂了橙色渐变背景，必须清掉 */
.tq-shell .suspension .a span {
    display: block;
    padding: 0;
    background: none;
    background-image: none;
    line-height: 1.3;
}

.tq-shell .suspension .a-ico {
    display: block;
    height: 20px;
    margin-bottom: 5px;
}

    .tq-shell .suspension .a-ico svg {
        display: inline-block;
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 1.7;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        vertical-align: top;
    }

.tq-shell .suspension .a-txt {
    display: block;
    font-size: var(--fs-11);
    letter-spacing: .02em;
    white-space: nowrap;
}

.tq-shell .suspension .a-top {
    display: none;
    background: transparent;
}

    .tq-shell .suspension .a-top .i {
        display: block;
        height: 20px;
        margin-bottom: 5px;
        background: none;
    }

        .tq-shell .suspension .a-top .i svg {
            display: inline-block;
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            vertical-align: top;
        }

/* 二维码弹层 */
.tq-shell .suspension .d {
    position: absolute;
    top: 0;
    right: calc(var(--sus-tile) + 12px);
    width: 196px;
    min-height: 0;
    padding: var(--sp-4);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    text-align: center;
}

/* 与触发它的「关注公众号」瓦片对齐：该瓦片是盒中第 2 个 */
.tq-shell .suspension .d-qrcode {
    top: 62px;
}

.tq-shell .suspension .d .arrow {
    position: absolute;
    top: 22px;
    right: -5px;
    width: 8px;
    height: 8px;
    background: hsl(var(--surface));
    border-top: 1px solid hsl(var(--line));
    border-right: 1px solid hsl(var(--line));
    transform: rotate(45deg);
}

.tq-shell .suspension .inner-box {
    padding: 0;
}

.tq-shell .suspension .qrcode-img img {
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
}

.tq-shell .suspension .d p {
    margin: 10px 0 0;
    font-size: var(--fs-12);
    color: hsl(var(--ink-500));
}

/* ---------- S8. 头像面板 ---------- */
.tq-shell #myInfoBox {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--z-pop);
    width: var(--pop-w);
    background: transparent;
    border: 0;
}

.tq-shell .avatar-panel-popover {
    width: var(--pop-w);
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
}

.tq-shell .head_img_name_box {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid hsl(var(--line-soft));
}

.tq-shell .big-avatar {
    position: relative;
    display: block;
    flex: none;
    width: 50px;
    height: 50px;
    padding: 0;
}

    .tq-shell .big-avatar .el-avatar {
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: hsl(var(--surface-muted));
        border: 1px solid hsl(var(--line));
        overflow: visible;
    }

    .tq-shell .big-avatar .avatar-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.tq-shell .avatar-vip-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    height: 16px;
    padding: 0 5px;
    border: 2px solid hsl(var(--surface));
    border-radius: var(--r-full);
    background: hsl(var(--brand-600));
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: .02em;
    color: hsl(var(--surface));
    transform: none;
}

.tq-shell .nickname-item {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-16);
    font-weight: 600;
    color: hsl(var(--ink-900));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tq-shell .counts-item {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid hsl(var(--line-soft));
}

.tq-shell .single-count-item {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 0;
    border-radius: var(--r-sm);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .single-count-item:hover {
        background: hsl(var(--brand-50));
    }

.tq-shell .count-num {
    overflow: hidden;
    font-size: var(--fs-16);
    font-weight: 600;
    line-height: 1.3;
    color: hsl(var(--brand-600));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tq-shell .count-text {
    margin-top: 2px;
    font-size: var(--fs-11);
    color: hsl(var(--ink-500));
}

/* 原标记内联写死了 B 站粉 rgb(255,236,241)/rgb(255,102,153)，改为品牌蓝 */
.tq-shell .vip-entry-containter {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: hsl(var(--brand-50));
    border: 1px solid hsl(var(--brand-100));
    border-radius: var(--r-md);
}

.tq-shell .vip-entry-desc {
    flex: 1 1 auto;
    min-width: 0;
}

.tq-shell .vip-entry-desc-title {
    margin: 0;
    font-size: var(--fs-13);
    font-weight: 600;
    color: hsl(var(--brand-700));
}

.tq-shell .vip-entry-desc-subtitle {
    margin: 2px 0 0;
    font-size: var(--fs-11);
    color: hsl(var(--ink-500));
}

.tq-shell .vip-entry-btn {
    display: inline-block;
    flex: none;
    padding: 6px 14px;
    border-radius: var(--r-full);
    background: hsl(var(--brand-600));
    font-size: var(--fs-12);
    font-weight: 600;
    color: hsl(var(--surface));
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .vip-entry-btn:hover {
        background: hsl(var(--brand-700));
        color: hsl(var(--surface));
    }

.tq-shell .links-item {
    padding: var(--sp-3) 0 var(--sp-1);
}

.tq-shell .single-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: hsl(var(--ink-700));
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

    .tq-shell .single-link-item:hover {
        background: hsl(var(--brand-50));
        color: hsl(var(--brand-700));
    }

.tq-shell .link-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tq-shell .link-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    color: hsl(var(--ink-400));
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .link-icon svg {
        display: block;
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 1.7;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tq-shell .single-link-item:hover .link-icon {
    color: hsl(var(--brand-600));
}

.tq-shell .link-icon--right {
    flex: none;
    color: hsl(var(--ink-400));
}

.tq-shell .split-line {
    height: 1px;
    margin: 6px 0;
    background: hsl(var(--line-soft));
}

.tq-shell .logout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: hsl(var(--ink-600));
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

    .tq-shell .logout-item:hover {
        background: hsl(var(--danger-soft));
        color: hsl(var(--danger));
    }

    .tq-shell .logout-item a {
        flex: 1 1 auto;
        color: inherit;
        text-decoration: none;
    }

    .tq-shell .logout-item .link-icon {
        color: inherit;
    }

/* ---------- S9. Element UI 主题化（全局组件，不加 .tq-shell 前缀） ---------- */
.el-dialog__header {
    padding: 12px 20px;
    border-bottom: 1px solid hsl(var(--line-soft));
    background: hsl(var(--brand-600));
}

.el-dialog__title {
    font-size: var(--fs-15);
    line-height: 1.4;
    color: hsl(var(--surface));
}

.el-dialog__headerbtn {
    top: 14px;
}

    .el-dialog__headerbtn .el-dialog__close,
    .el-dialog__headerbtn:focus .el-dialog__close,
    .el-dialog__headerbtn:hover .el-dialog__close {
        color: hsl(var(--surface));
    }

/* ---------- S10. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .tq-shell *,
    .tq-shell *::before,
    .tq-shell *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   S11. 修订：Element light 风格浮层 + 分类 hover + 头像面板文字颜色
   --------------------------------------------------------------------------
   放在文件最后，与上文同特异度时按顺序覆盖。
   ========================================================================== */

/* ---------- 浮层：Element light tooltip 观感 ---------- */
/* 面板本身仍由 jQuery .show()/.hide() 写内联 display，所以这里不设 display，
   动画靠 display:none -> block 时自动重播的 animation 实现 */
.tq-shell .nav-pop-list {
    top: calc(100% + 8px);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    animation: tq-pop-in 180ms var(--ease-out) both;
}

/* 8px 间隙的透明桥：面板是 .nav-list-item 的后代，鼠标穿过间隙时
   不会触发 li 的 mouseleave，下拉不会在移动途中关掉 */
.tq-shell .nav-pop-list::after {
    content: "";
    position: absolute;
    top: -9px;
    right: 0;
    left: 0;
    height: 9px;
}

/* Element light tooltip 的小箭头 */
.tq-shell .nav-pop-list::before {
    content: "";
    position: absolute;
    top: -5px;
    left: var(--pop-arrow-x, 47px);
    z-index: 1;
    width: 9px;
    height: 9px;
    background: hsl(var(--surface));
    border-top: 1px solid hsl(var(--line));
    border-left: 1px solid hsl(var(--line));
    transform: rotate(45deg);
}

@keyframes tq-pop-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 分类面板：行 hover 浅品牌底（背景声明在 S4），父分类标题同步转品牌色 ---------- */
.tq-shell .nav-pop-list .class-lay:hover h3 a.tit {
    color: hsl(var(--brand-700));
}

    .tq-shell .nav-pop-list .class-lay:hover h3 a.tit:hover {
        color: hsl(var(--brand-700));
    }

/* ---------- 头像面板 ---------- */
/* 相对头像定位，箭头位置不再随用户名长度漂移 */
.tq-shell .user-pop {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
}

.tq-shell #myInfoBox {
    /* 面板里的文字此前继承了 .site-nav-r 的白色（蓝条前景色），压在白色面板上
       等于隐形 —— 这里显式设回深色 */
    color: hsl(var(--ink-700));
    animation: tq-pop-in 180ms var(--ease-out) both;
}

    .tq-shell #myInfoBox::before {
        content: "";
        position: absolute;
        top: 3px;
        /* 头像宽 28px、右缘与面板右缘对齐，故中心距右缘 14px，箭头 9px 宽 */
        right: 9.5px;
        z-index: 1;
        width: 9px;
        height: 9px;
        background: hsl(var(--surface));
        border-top: 1px solid hsl(var(--line-soft));
        border-left: 1px solid hsl(var(--line-soft));
        transform: rotate(45deg);
    }

.tq-shell .avatar-panel-popover {
    border-color: hsl(var(--line));
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .tq-shell .nav-pop-list,
    .tq-shell #myInfoBox {
        animation: none;
    }
}