/* ==========================================================================
   TaiQi SearchDtl — 文档详情页样式
   --------------------------------------------------------------------------
   承接原 SearchDtl.aspx 三段内联 <style>，并把 search_home / search_com 的
   硬编码色（#19e / #0793de / #55afee / #208bbb / #db5b5a / #ea005d …）统一到
   /css/tokens.css 的蓝白体系。

   继承自 master.css 的铁律：
   1. 本文件在 head 占位符内最后加载，所有规则带 .tq-shell 前缀（+1 类特异度）。
   2. 绝不给 body / .tq-shell 设 font-size。
   3. 绝不写任何 .container 规则——本文件只碰 .iw / .view_left / .view_right /
      .view_right_downbtn 及其子树。

   关键修复：
   - 下载条不再靠 JS 写 position:fixed（z-index:999 会被 sticky 导航栏 1040 盖住）。
     改为 .iw 用 flex + align-items:stretch 把右栏拉到与左栏等高，下载条用
     position:sticky 跟随整篇文档；top 用 --nav-h 让开导航栏。
   - 删除 .adcontainer div, a, img, p 这条写错的全局重置（逗号选择器让页面上
     所有 a/img/p 都被重置，outline:0 直接干掉键盘焦点环）。
   - 删除全局 a:hover{color:#146c88}；删除后 search_com.css 的旧 a:hover 青色
     会露出来，因此本文件为各链接簇显式定义 token 化 hover 色。

   相对路径：本文件在 /css/ 下，url(../images/...) 解析到 /images/...，
   与原内联样式（相对文档 /SearchDtl.aspx）等价。
   ========================================================================== */

/* ---------- 0. 详情页专属 token ---------- */
:root {
    --dtl-rail-w: 270px;
    --dtl-gap: var(--sp-8);
    --dtl-cta-h: 48px;
    --dtl-shadow-card: 0 1px 2px hsl(var(--ink-900) / .04);
}

/* ---------- S1. 两栏：左内容 + 右栏，stretch 让右栏与左栏等高 ---------- */
.tq-shell .iw {
    display: flex;
    align-items: stretch;
    gap: var(--dtl-gap);
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: var(--sp-6) auto 0;
}

    .tq-shell .iw::after {
        content: none;
    }

.tq-shell .view_left {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
}

.tq-shell .view_right {
    display: flex;
    flex: 0 0 var(--dtl-rail-w);
    flex-direction: column;
    float: none;
    width: var(--dtl-rail-w);
}

    /* 链接 hover 兜底：删除页面内全局 a:hover 后 search_com.css 的旧青色会露出来。
   放在各组件 hover 规则之前，让更具体的规则靠源码顺序胜出。 */
    .tq-shell .view_left a:hover,
    .tq-shell .view_right a:hover {
        color: hsl(var(--brand-600));
    }

/* ---------- S2. 标题卡 ---------- */
.tq-shell .view_title {
    padding: var(--sp-5) var(--sp-6);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-lg);
    box-shadow: var(--dtl-shadow-card);
    overflow: visible;
}

    .tq-shell .view_title > h1 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        margin: 0;
        font-size: var(--fs-20);
        font-weight: 600;
        line-height: 1.5;
        color: hsl(var(--ink-900));
    }

        /* 只命中文档类型精灵图；专区角标同样是 <i>，不能被这条压成 23px */
        .tq-shell .view_title > h1 i.rb {
            flex: none;
            width: 23px;
            height: 23px;
            margin-right: 0;
            vertical-align: middle;
        }

.tq-shell .view_title_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-3) 0 0;
    padding: 0;
}

    .tq-shell .view_title_info li {
        float: none;
        margin: 0;
        font-size: var(--fs-13);
        line-height: 1.5;
        color: hsl(var(--ink-500));
    }

        .tq-shell .view_title_info li a {
            display: inline-block;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: hsl(var(--ink-600));
            vertical-align: bottom;
            transition: color var(--dur-fast) var(--ease-out);
        }

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

/* 图标用浅灰，不跟主题色；特异度需压过 search_home 的 .view_title .view_title_info .li1 i */
.tq-shell .view_title .view_title_info li i {
    padding-right: 5px;
    color: #cbced0;
}

/* 专区角标：静态药丸，按语义分色（免费=成功绿，积分=品牌蓝，下载币=唯一暖色） */
.tq-shell .twohot-icon {
    position: static;
    top: auto;
    left: auto;
    flex: none;
    margin-left: var(--sp-2);
    padding: 2px 10px;
    border: 1px solid hsl(var(--brand-200));
    border-radius: var(--r-full);
    background: hsl(var(--brand-50));
    font-size: var(--fs-12);
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: hsl(var(--brand-600));
    vertical-align: middle;
    transform: none;
    animation: none;
}

.tq-shell .twohot-free {
    border-color: hsl(var(--success) / .3);
    background: hsl(var(--success) / .1);
    color: hsl(var(--success));
    animation: tq-float 2.8s var(--ease-in-out) infinite;
}

@keyframes tq-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.tq-shell .twohot-pay {
    border-color: hsl(var(--danger) / .25);
    background: hsl(var(--danger-soft));
    color: hsl(var(--danger));
}

/* ---------- S3. 预览区 ----------
   旧规则 .view_body > div 给所有直接子元素挂了边框 + 888.gif 底 + font-size:0，
   这里先整体中和，再逐个子元素定义。 */
.tq-shell .view_body {
    position: relative;
    margin-top: var(--sp-5);
    overflow: visible;
}

    .tq-shell .view_body > div {
        padding: 0;
        margin-bottom: 0;
        border: 0;
        background: none;
        font-size: var(--fs-14);
    }

    .tq-shell .view_body .Js_ResourcePicItem {
        max-height: 700px;
        min-height: 400px;
        padding: var(--sp-3);
        overflow-y: auto;
        background: hsl(var(--surface-muted));
        border: 1px solid hsl(var(--line-soft));
        border-radius: var(--r-md);
        /* el-image 是 inline-block，font-size:0 消除图片间的空白缝隙 */
        font-size: 0;
        scrollbar-width: thin;
        scrollbar-color: hsl(var(--line-strong)) hsl(var(--surface-muted));
    }

.tq-shell .Js_ResourcePicItem::-webkit-scrollbar {
    width: 10px;
    background: hsl(var(--surface-muted));
    border-radius: var(--r-full);
}

.tq-shell .Js_ResourcePicItem::-webkit-scrollbar-thumb {
    min-height: 60px;
    border: 2px solid hsl(var(--surface-muted));
    border-radius: var(--r-full);
    background: hsl(var(--line-strong));
}

    .tq-shell .Js_ResourcePicItem::-webkit-scrollbar-thumb:hover {
        background: hsl(var(--ink-400));
    }

.tq-shell .Js_ResourcePicItem::-webkit-scrollbar-corner {
    background: hsl(var(--surface-muted));
}

.tq-shell .Js_ResourcePicItem .el-image {
    display: block;
    margin: var(--sp-2) 0;
    background: hsl(var(--surface));
}

.tq-shell .loading-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: hsl(var(--surface) / .85);
}

.tq-shell .loading-spinner {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border: 3px solid hsl(var(--line));
    border-top-color: hsl(var(--brand-600));
    border-radius: 50%;
    animation: tq-spin 1s linear infinite;
}

@keyframes tq-spin {
    to {
        transform: rotate(360deg);
    }
}

.tq-shell .loading-text {
    font-size: var(--fs-14);
    letter-spacing: 2px;
    color: hsl(var(--brand-600));
}

/* ---------- S4. 继续阅读卡 ---------- */
.tq-shell .view_body .surplus {
    position: relative;
    min-height: 125px;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-6) var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--dtl-shadow-card);
    font-size: var(--fs-14);
    text-align: center;
}

.tq-shell .surplus p {
    font-size: var(--fs-16);
    line-height: 1.6;
    color: hsl(var(--ink-800));
}

.tq-shell .surplus .uploader,
.tq-shell .surplus .uploader2 {
    font-size: var(--fs-12);
    line-height: 1.6;
    color: hsl(var(--ink-400));
}

.tq-shell .surplus_label {
    padding-top: var(--sp-2);
    font-size: var(--fs-14) !important;
    font-weight: 500;
    color: hsl(var(--danger));
}

.tq-shell .surplus-operate {
    margin: var(--sp-4) auto 0;
}

.tq-shell .surplus-btn {
    position: relative;
    display: inline-block;
    width: 260px;
    max-width: 100%;
    height: 44px;
    border-radius: var(--r-input);
    background-color: hsl(var(--brand-600));
    color: hsl(var(--surface));
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

    .tq-shell .surplus-btn:hover {
        background-color: hsl(var(--brand-700));
        box-shadow: var(--shadow-btn);
    }

    .tq-shell .surplus-btn span {
        font-size: var(--fs-15);
        font-weight: 500;
    }

.tq-shell .surplus-down {
    display: block;
    position: static;
    width: max-content;
    margin: var(--sp-3) auto 0;
    line-height: 1.5;
    font-size: var(--fs-14);
    color: hsl(var(--brand-700));
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .surplus-down:hover {
        color: hsl(var(--brand-800));
        text-decoration: underline;
    }

/* ---------- S5. 右栏下载条：sticky 跟随，不再被导航栏遮挡 ---------- */
.tq-shell .view_right_downbtn {
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-4));
    z-index: 1;
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

    /* kefu 的 .clearfix::after 在 flex 容器里会成为 0 宽 flex item 白占一个 gap */
    .tq-shell .view_right_downbtn::before,
    .tq-shell .view_right_downbtn::after {
        content: none;
    }

    /* 背景图必须用 longhand：简写会把 background-image 一起清掉 */
    .tq-shell .view_right_downbtn .download,
    .tq-shell .download {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        /* gap: 289px; */
        float: none;
        width: auto;
        height: var(--dtl-cta-h);
        border: 0;
        border-radius: var(--r-input);
        background-color: hsl(var(--brand-600));
        background-image: url(../images/down-icon.png);
        background-repeat: no-repeat;
        background-position: left 16px center;
        /* 左侧留出图标区，居中文字才不会贴到图标 */
        padding-left: 30px;
        font-family: inherit;
        font-size: var(--fs-16);
        font-weight: 500;
        line-height: var(--dtl-cta-h);
        text-align: center;
        text-indent: 0;
        color: hsl(var(--surface));
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

        .tq-shell .view_right_downbtn .download:hover,
        .tq-shell .download:hover {
            background-color: hsl(var(--brand-700));
            background-position: left 12px center;
            box-shadow: var(--shadow-btn);
            color: hsl(var(--surface));
        }

    /* 主 CTA 的光影扫过：absolute 伪元素不参与 flex 排布 */
    .tq-shell .surplus-btn,
    .tq-shell .view_right_downbtn .download {
        overflow: hidden;
    }

        .tq-shell .surplus-btn::after,
        .tq-shell .view_right_downbtn .download::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -45%;
            width: 35%;
            background: linear-gradient(100deg, transparent, hsl(0 0% 100% / .35), transparent);
            transform: skewX(-18deg);
            transition: left var(--dur-slow) var(--ease-out);
            pointer-events: none;
        }

        .tq-shell .surplus-btn:hover::after,
        .tq-shell .view_right_downbtn .download:hover::after {
            left: 115%;
        }

    .tq-shell .view_right_downbtn .book_favorite {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        float: none;
        width: auto;
        min-width: 88px;
        height: var(--dtl-cta-h);
        margin: 0;
        padding: 0 var(--sp-4) 0 38px;
        border: 1px solid hsl(var(--line));
        border-radius: var(--r-input);
        background-color: hsl(var(--surface));
        background-image: url(../images/view_related_shoucang.png);
        background-repeat: no-repeat;
        background-position: left 12px center;
        font-size: var(--fs-14);
        color: hsl(var(--ink-600));
        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);
    }

        .tq-shell .view_right_downbtn .book_favorite:hover {
            border-color: hsl(var(--brand-300));
            background-color: hsl(var(--brand-50));
            color: hsl(var(--brand-600));
        }

        .tq-shell .view_right_downbtn .book_favorite.active {
            border-color: hsl(var(--danger) / .25);
            background-color: hsl(var(--danger-soft));
            background-image: url(../images/view_related_yishoucang.png);
            color: hsl(var(--danger));
        }

/* ---------- S6. 上传者卡 ---------- */
.tq-shell .view_user {
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--dtl-shadow-card);
}

    .tq-shell .view_user img {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 12px;
        padding: 0;
        border: 1px solid hsl(var(--line));
        border-radius: 50%;
        background: hsl(var(--surface-muted));
        overflow: hidden;
    }

    .tq-shell .view_user a {
        display: block;
        line-height: 48px;
        font-size: var(--fs-14);
        color: hsl(var(--ink-800));
        transition: color var(--dur-fast) var(--ease-out);
    }

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

    .tq-shell .view_user p {
        clear: both;
        margin: var(--sp-3) 0 0;
        font-size: var(--fs-13);
        line-height: 1.6;
        color: hsl(var(--ink-500));
    }

        .tq-shell .view_user p span {
            padding: 0 4px;
            font-weight: 600;
            color: hsl(var(--brand-600));
        }

/* 悬浮名片（当前无 JS 触发，保持隐藏但配色统一） */
.tq-shell .user-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-pop);
    width: 200px;
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    text-align: center;
}

    .tq-shell .user-tip > a {
        color: hsl(var(--ink-600));
    }

    .tq-shell .user-tip > ul > li {
        font-size: var(--fs-12);
        color: hsl(var(--ink-500));
    }

    .tq-shell .user-tip li.line {
        background-color: hsl(var(--line));
    }

    .tq-shell .user-tip > div > a {
        background: hsl(var(--brand-600));
        border-radius: var(--r-sm);
        color: hsl(var(--surface));
    }

        .tq-shell .user-tip > div > a:hover {
            background: hsl(var(--brand-700));
        }

/* ---------- S7. 右栏区块卡 ---------- */
.tq-shell .link_docs,
.tq-shell .view_keys {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--dtl-shadow-card);
}

    .tq-shell .link_docs h3,
    .tq-shell .view_keys h3 {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin: 0 0 var(--sp-3);
        padding: 0 0 var(--sp-3);
        border-bottom: 1px solid hsl(var(--line-soft));
        font-size: var(--fs-15);
        font-weight: 600;
        line-height: 1.4;
        color: hsl(var(--ink-900));
    }

        .tq-shell .link_docs h3::before,
        .tq-shell .view_keys h3::before {
            content: "";
            flex: none;
            width: 4px;
            height: 15px;
            border-radius: var(--r-full);
            background: hsl(var(--brand-600));
        }

    /* 旧规则 .link_docs div{height:40px} 会同时命中行容器，把列表压成一行高 */
    .tq-shell .link_docs > div {
        height: auto;
        line-height: 1.5;
    }

    .tq-shell .link_docs .ld-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        height: auto;
        padding: 2px var(--sp-2);
        border-radius: var(--r-sm);
        transition: background-color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .link_docs .ld-row:hover {
            background: hsl(var(--surface-muted));
        }

        .tq-shell .link_docs .ld-row a {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            padding: 4px var(--sp-2);
            border-radius: var(--r-sm);
            font-size: var(--fs-13);
            line-height: 2.5;
            color: hsl(var(--ink-700));
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
        }

            .tq-shell .link_docs .ld-row a:hover {
                background: hsl(var(--brand-50));
                color: hsl(var(--brand-600));
            }

            .tq-shell .link_docs .ld-row a i {
                margin-right: 2px;
            }

        .tq-shell .link_docs .ld-row span {
            flex: none;
            max-width: 50px;
            font-size: var(--fs-12);
            color: hsl(var(--ink-400));
        }

    .tq-shell .view_keys div {
        padding-top: 0;
        font-size: var(--fs-13);
        line-height: 1.8;
        color: hsl(var(--ink-600));
    }

    .tq-shell .view_keys a {
        border: 1px solid hsl(var(--line));
        border-radius: 10px;
        color: hsl(var(--ink-600));
        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 .view_keys a:hover {
            border-color: hsl(var(--brand-300));
            background: hsl(var(--brand-50));
            color: hsl(var(--brand-600));
        }

.tq-shell .view_ad {
    margin-top: var(--sp-4);
}

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

    .tq-shell .view_ad label {
        display: block;
        margin-top: var(--sp-2);
        font-size: var(--fs-13);
        font-weight: 500;
        line-height: 1.5;
        color: hsl(var(--ink-800));
    }

    .tq-shell .view_ad p {
        margin-top: 2px;
        font-size: var(--fs-12);
        line-height: 1.6;
        color: hsl(var(--ink-500));
    }

/* 正文底部广告轮播 */
.tq-shell .view_body .search_ad {
    position: relative;
    margin-top: var(--sp-6);
}

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

/* unslider 的圆点导航：.search_ad 不在 .banner 下，旧圆点样式命中不到，
       不补的话 ol 会以带数字的列表流到图片下方 */
.tq-shell .search_ad ol {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 10;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

    .tq-shell .search_ad ol li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 2px;
        border-radius: 5px;
        background-color: hsl(0 0% 100% / .6);
        font-size: 0;
        line-height: 0;
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .search_ad ol li:hover {
            background-color: hsl(0 0% 100% / .9);
        }

        .tq-shell .search_ad ol li.unslider-active {
            background-color: hsl(var(--brand-600));
        }

/* ---------- S9. 断点 ---------- */
@media screen and (max-width: 980px) {
    .tq-shell .iw {
        flex-direction: column;
        gap: var(--sp-5);
    }

    .tq-shell .view_right {
        flex: 0 0 auto;
        width: 100%;
    }

    .tq-shell .view_right_downbtn {
        position: static;
    }
}