/* ==========================================================================
   TaiQi Home — index.aspx 页面样式
   --------------------------------------------------------------------------
   承接原 index.aspx 内联 <style> 的全部内容，并把旧模板（main_v921 /
   home_common_v921 / _index）的硬编码色统一到 /css/tokens.css 的蓝白体系。

   三条继承自 master.css 的铁律：
   1. 本文件在 head 占位符内最后加载（晚于 home_common_v921.css 的第二次加载），
      且所有规则带 .tq-shell 前缀（+1 类特异度），才能稳定压住旧模板。
   2. 绝不给 body / .tq-shell 设 font-size——字号逐组件显式声明。
   3. 绝不写任何 .container 规则。

   另两条本页专属约束：
   4. .class-lay 在 Base.master 的导航下拉里也被使用（.nav-pop-list .class-lay），
      所以本页的分类规则一律写成 .tq-shell .class-wr .class-lay，绝不写裸
      .class-lay，否则会改坏下拉面板。
   5. .Js_hotSearchKeyWord / .report-list 由 jQuery .show()/.hide() 写内联
      display，元素本身绝不设 display:flex；要 flex 就 flex 它们的子元素。
      （.report-list 例外：jQuery 1.10.2 的 showHide 在 show 时先清内联值，
      计算值若已非 none 就不再补默认值，因此样式表的 display:grid 能存活。）

   相对路径注意：本文件位于 /css/ 下，url() 一律写 ../images/... 才能解析到
   /images/...（原内联样式里写 images/... 是相对文档 /index.aspx 的）。
   ========================================================================== */

/* ---------- 0. 首页专属 token（可移植原始量在 /css/tokens.css） ---------- */
:root {
    /* 中间轮播 + 排行榜行的公共高度：广告素材的设计比例，改动会裁切素材 */
    --home-row-h: 321px;
    --home-rank-w: 376px;
    /* 文档缩略图：接近 A4 竖版比例，object-fit:cover 几乎不裁 */
    --home-thumb-w: 100px;
    --home-thumb-h: 140px;
    --home-card-pad: var(--sp-4);
    --home-shadow-card: 0 1px 2px hsl(var(--ink-900) / .04);
    --home-shadow-card-hi: 0 12px 28px -14px hsl(var(--brand-950) / .35);
}

/* ---------- S1. 画布：整页内容区铺浅灰底，白卡浮于其上 ---------- */
.tq-shell .tq-home {
    background: hsl(var(--surface-muted));
    padding-bottom: var(--sp-12);
}

/* 三个版心容器统一响应式：>1200 时封顶 1200，窄屏时留 20px 侧边距。
   用 width:auto + max-width 一次覆盖所有断点，无需媒体查询复刻旧模板的
   width:100%+padding 行为（旧媒体查询特异度低于 .tq-shell 前缀规则）。 */
.tq-shell .t-banner-wr,
.tq-shell .hot-item-wr {
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.tq-shell .t-banner-bg {
    background: transparent;
    padding: 0;
    overflow: visible;
}

/* ---------- S2. 搜索带：蓝色导航下的白色 hero 条 ---------- */
.tq-shell .search-bar {
    padding: var(--sp-6) 0;
    background: linear-gradient(180deg, hsl(var(--brand-50)), hsl(var(--surface)));
    border-bottom: 1px solid hsl(var(--line-soft));
}

.tq-shell .search-bar-in {
    width: auto;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}

.tq-shell .search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: var(--search-max);
    margin: 0 auto;
}

.tq-shell .top-search-box .s-ipt-wr {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: var(--search-h);
    margin: 0;
    padding: 0 var(--sp-4);
    overflow: hidden;
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-strong));
    border-right: 0;
    border-radius: var(--r-input) 0 0 var(--r-input);
    font-size: var(--fs-15);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

    .tq-shell .top-search-box .s-ipt-wr:focus-within {
        border-color: hsl(var(--brand-500));
        box-shadow: var(--shadow-focus);
        z-index: 1;
    }

.tq-shell .s-ipt-icon {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: hsl(var(--ink-400));
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--dur) var(--ease-out);
}

.tq-shell .top-search-box .s-ipt-wr:focus-within .s-ipt-icon {
    stroke: hsl(var(--brand-500));
}

.tq-shell .search-box .s-ipt,
.tq-shell .top-search-box .s-ipt {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: calc(var(--search-h) - 2px);
    padding: 0;
    border: 0;
    font-size: var(--fs-15);
    line-height: calc(var(--search-h) - 2px);
    color: hsl(var(--ink-900));
    background: transparent;
    outline: 0;
}

    .tq-shell .search-box .s-ipt::placeholder {
        color: hsl(var(--ink-400));
    }

.tq-shell .search-box .s-btn-wr {
    position: relative;
    display: flex;
    flex: none;
    float: none;
    align-items: center;
    width: auto;
    height: var(--search-h);
}

.tq-shell .search-box .s-btn {
    float: none;
    width: 128px;
    height: var(--search-h);
    border: 0;
    border-radius: 0 var(--r-input) var(--r-input) 0;
    font-family: inherit;
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: var(--search-h);
    letter-spacing: .04em;
    text-align: center;
    color: hsl(var(--surface));
    background: hsl(var(--brand-600));
    cursor: pointer;
    overflow: visible;
    transition: background-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .search-box .s-btn:hover {
        background: hsl(var(--brand-700));
    }

/* 热门搜索：元素本身被 jQuery .show()/.hide() 写内联 display，
   所以这里保持 display:none 打底、flex 只给子元素（见文件头约束 5） */
.tq-shell .hot-search {
    display: none;
    flex: 0 0 100%;
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-12);
    color: hsl(var(--ink-500));
}

.tq-shell .hot-search-in {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 24px;
}

.tq-shell .hot-search-label {
    display: flex;
    flex: none;
    align-items: center;
    gap: 5px;
    margin: 0;
    line-height: 1;
    color: hsl(var(--ink-500));
}

    .tq-shell .hot-search-label svg {
        display: block;
        flex: none;
        width: 15px;
        height: 15px;
        stroke: hsl(var(--danger));
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tq-shell .hot-search-swiper {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    overflow: hidden;
}

.tq-shell .swiper-slide {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--r-full);
    background: hsl(var(--brand-50));
    font-size: var(--fs-12);
    line-height: 24px;
    color: hsl(var(--brand-600));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- S3. 顶部 banner：整幅圆角卡 ---------- */
.tq-shell .t-banner-wr:not(.tq-split) {
    margin-top: var(--sp-6);
}

.tq-shell .t-banner-wr:not(.tq-split) .doc-banner {
    float: none;
    width: 100%;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: hsl(var(--surface));
}

.tq-shell .banner_img {
    position: relative;
    display: block;
    width: 100%;
}

    .tq-shell .banner_img img,
    .tq-shell .t-banner-wr:not(.tq-split) .doc-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* ---------- S4. 分类浏览：一整张白卡，内部网格 + 子分类 chip ---------- */
.tq-shell .class-wr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-6) var(--sp-8);
    align-items: start;
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: var(--sp-8) auto 0;
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-lg);
    box-shadow: var(--home-shadow-card);
    overflow: visible;
}

.tq-shell .class-wr .more {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0 0 var(--sp-5);
    border-bottom: 1px solid hsl(var(--line-soft));
}

.tq-shell .class-wr .hot-rec-h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.4;
    color: hsl(var(--ink-900));
    cursor: default;
}

    .tq-shell .class-wr .hot-rec-h2::before {
        content: "";
        flex: none;
        width: 4px;
        height: 18px;
        border-radius: var(--r-full);
        background: hsl(var(--brand-600));
    }

/* 见文件头约束 4：必须带 .class-wr 限定，否则会改坏导航下拉面板 */
.tq-shell .class-wr .class-lay {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border-right: 0;
    overflow: visible;
}

    .tq-shell .class-wr .class-lay h3 {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-16);
        font-weight: 600;
        line-height: 1.4;
    }

        .tq-shell .class-wr .class-lay h3 a {
            color: hsl(var(--ink-900));
            transition: color var(--dur-fast) var(--ease-out);
        }

            .tq-shell .class-wr .class-lay h3 a:hover {
                color: hsl(var(--brand-600));
            }

    .tq-shell .class-wr .class-lay ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-2);
        margin: 0;
        padding: 0;
    }

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

        .tq-shell .class-wr .class-lay li a {
            display: inline-block;
            height: auto;
            padding: 3px 10px;
            border-radius: var(--r-full);
            background: hsl(var(--surface-muted));
            font-size: var(--fs-13);
            font-weight: 400;
            line-height: 1.5;
            color: hsl(var(--ink-600));
            transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
        }

            .tq-shell .class-wr .class-lay li a:hover {
                background: hsl(var(--brand-50));
                color: hsl(var(--brand-600));
            }

/* ---------- S5. 中间行：轮播 + 排行榜，flex 一行 ----------
   旧实现靠 .doc-banner{margin-right:250px} 预留空档、再用
   .help-box-wr{margin-left:-235px} 把卡片拉进空档——四个互相耦合的魔法数。
   这里换成等价的显式 flex：轮播吃剩余宽度，排行榜固定 376px。 */
.tq-shell .t-banner-wr.tq-split {
    display: flex;
    align-items: stretch;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
}

.tq-shell .tq-split .doc-banner {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: hsl(var(--surface));
}

    .tq-shell .tq-split .doc-banner .banner {
        position: relative;
        margin-right: 0;
    }

    .tq-shell .tq-split .doc-banner img {
        display: block;
        width: 100%;
        /* 必须是确定高度：height:100% 在 flex 行高未定时不解析，
           会回退成图片固有比例把整行撑高 */
        height: var(--home-row-h);
        object-fit: cover;
    }

/* ---------- S6. 排行榜卡：高度由内容撑，永不截断 ---------- */
.tq-shell .help-box-wr {
    display: flex;
    flex-direction: column;
    float: none;
    flex: 0 0 var(--home-rank-w);
    width: var(--home-rank-w);
    height: auto;
    min-height: var(--home-row-h);
    margin: 0;
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-lg);
    box-shadow: var(--home-shadow-card);
}

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

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

.tq-shell .help-box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    font-size: var(--fs-14);
}

    .tq-shell .help-box li {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        height: auto;
        margin: 0;
        padding: 6px var(--sp-2);
        border-left: 0;
        border-radius: var(--r-sm);
        transition: background-color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .help-box li:hover {
            background: hsl(var(--brand-50));
        }

    .tq-shell .help-box li a {
        margin: 0;
        padding: 0;
    }

/* 名次徽章：前三用唯一暖色强调（浅底深字），其余中性 */
.tq-shell .paihang {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: var(--r-sm);
    background: hsl(var(--surface-muted));
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: hsl(var(--ink-500));
}

.tq-shell .paihang-top {
    background: hsl(var(--danger-soft));
    color: hsl(var(--danger));
}

.tq-shell .hot_title {
    flex: 1 1 auto;
    display: block;
    width: auto;
    min-width: 0;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-14);
    line-height: 1.5;
    color: hsl(var(--ink-700));
    transition: color var(--dur-fast) var(--ease-out);
}

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

#mbaslider .yuan li {
    width: 10px;
}

/* ---------- S7. 文档列表：区块头（标题 + tab + 更多） ---------- */
.tq-shell .hot-item-wr {
    margin: var(--sp-8) auto 0;
}

.tq-shell .conta-wr {
    width: auto;
    max-width: none;
    margin: 0;
}

.tq-shell .conta-l-wr {
    float: none;
    width: auto;
    margin: 0;
}

.tq-shell .conta-l {
    margin: 0;
}

.tq-shell .newcanvas-lay {
    margin: 0;
    padding: 0;
    overflow: visible;
}

.tq-shell .newcanvas-lay h3.title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: auto;
    margin: 0 0 var(--sp-5);
    padding: 0 0 var(--sp-4);
    border-bottom: 1px solid hsl(var(--line-soft));
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.4;
    color: hsl(var(--ink-900));
    overflow: visible;
}

.tq-shell .tq-sec-tit {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-right: var(--sp-3);
}

    .tq-shell .tq-sec-tit::before {
        content: "";
        flex: none;
        width: 4px;
        height: 18px;
        border-radius: var(--r-full);
        background: hsl(var(--brand-600));
    }

/* tab：真按钮（键盘可达），药丸选中态取代旧的下划线式 */
.tq-shell .newcanvas-lay h3.title .Js_Link {
    flex: none;
    margin: 0;
    padding: 6px var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-14);
    font-weight: 400;
    line-height: 1.5;
    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 .newcanvas-lay h3.title .Js_Link:hover {
        background: hsl(var(--surface-muted));
        color: hsl(var(--brand-600));
    }

    .tq-shell .newcanvas-lay h3.title .Js_Link:focus-visible {
        outline: 2px solid hsl(var(--brand-500));
        outline-offset: 2px;
    }

    .tq-shell .newcanvas-lay h3.title .Js_Link.link_selected {
        background: hsl(var(--brand-50));
        border-color: hsl(var(--brand-200));
        color: hsl(var(--brand-600));
        font-weight: 500;
    }

.tq-shell .newcanvas-lay h3.title .a_more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none;
    width: auto;
    height: auto;
    margin-left: auto;
    padding: 6px 0;
    background: transparent;
    font-size: var(--fs-13);
    line-height: 1.5;
    color: hsl(var(--ink-500));
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .newcanvas-lay h3.title .a_more:hover {
        color: hsl(var(--brand-600));
    }

    .tq-shell .newcanvas-lay h3.title .a_more svg {
        flex: none;
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- S8. 文档卡片：三列网格 ---------- */
.tq-shell .report-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    padding: 0;
    overflow: visible;
}

.tq-shell .report-list-item {
    display: flex;
    gap: var(--sp-4);
    width: auto;
    min-height: 0;
    margin: 0;
    padding: var(--home-card-pad);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--home-shadow-card);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

    .tq-shell .report-list-item:hover {
        border-color: hsl(var(--brand-200));
        box-shadow: var(--home-shadow-card-hi);
        transform: translateY(-2px);
    }

.tq-shell .report-list-item .pic {
    position: relative;
    flex: 0 0 var(--home-thumb-w);
    width: var(--home-thumb-w);
    height: var(--home-thumb-h);
    margin: 0;
    background: hsl(var(--surface-muted));
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-sm);
    overflow: hidden;
}

    .tq-shell .report-list-item .pic > a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .tq-shell .report-list-item .pic img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--dur) var(--ease-out);
    }

    .tq-shell .report-list-item:hover .pic img {
        transform: scale(1.05);
    }

    .tq-shell .report-list-item .pic i {
        position: absolute;
        right: 6px;
        bottom: 6px;
    }

.tq-shell .report-list-item .cont {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.tq-shell .report-list-item .tit {
    display: -webkit-box;
    height: auto;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 1.55;
    color: hsl(var(--ink-900));
}

    .tq-shell .report-list-item .tit a {
        color: inherit;
        transition: color var(--dur-fast) var(--ease-out);
    }

    .tq-shell .report-list-item:hover .tit a {
        color: hsl(var(--brand-600));
    }

.tq-shell .report-list-item .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-12);
    line-height: 1.5;
    color: hsl(var(--ink-400));
}

    .tq-shell .report-list-item .tags .tag-item {
        position: relative;
    }

        .tq-shell .report-list-item .tags .tag-item::after {
            content: "";
            display: inline-block;
            width: 1px;
            height: .9em;
            margin: 0 var(--sp-2);
            background: hsl(var(--line-strong));
            vertical-align: middle;
        }

        .tq-shell .report-list-item .tags .tag-item:last-child::after {
            display: none;
        }

.tq-shell .report-list-item .info {
    margin: auto 0 0;
    padding-top: var(--sp-3);
}

/* 价格：唯一暖色强调 */
.tq-shell .tq-price {
    font-weight: 500;
    color: hsl(var(--danger));
}

.tq-shell .report-list-item .icon {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: var(--fs-12);
    font-weight: 400;
    color: hsl(var(--ink-400));
}

    /* 分享量图标用内联 SVG：images/share.png 在服务器上并不存在 */
    .tq-shell .report-list-item .icon svg {
        flex: none;
        width: 14px;
        height: 14px;
        margin-right: 5px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- S9. 文档类型角标精灵图 ----------
   路径必须是 ../images/...：本文件在 /css/ 下（见文件头）。 */
.tq-shell .file_s_doc, .tq-shell .file_s_pdf, .tq-shell .file_s_ppt, .tq-shell .file_s_rar, .tq-shell .file_s_zip, .tq-shell .file_s_xls, .tq-shell .file_s_txt, .tq-shell .file_s_dwg, .tq-shell .file_s_other, .tq-shell .file_s_docx, .tq-shell .file_s_xlsx {
    width: 16px;
    height: 16px;
    background: transparent url('../images/doc_type.png?v=20221117') no-repeat;
}

.tq-shell .file_s_doc,
.tq-shell .file_s_docx {
    background-position: 0 -38px;
}

.tq-shell .file_s_pdf {
    background-position: -18px -38px;
}

.tq-shell .file_s_ppt {
    background-position: -36px -38px;
}

.tq-shell .file_s_rar,
.tq-shell .file_s_zip {
    background-position: -54px -38px;
}

.tq-shell .file_s_xls,
.tq-shell .file_s_xlsx {
    background-position: -72px -38px;
}

.tq-shell .file_s_txt {
    background-position: -90px -38px;
}

.tq-shell .file_s_dwg {
    background-position: -108px -38px;
}

.tq-shell .file_s_other {
    background-position: -126px -38px;
}

/* ---------- S10. 友情链接 ---------- */
.tq-shell .notice {
    float: none;
    width: auto;
    margin: var(--sp-8) 0 0;
    padding: var(--sp-5);
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    box-shadow: var(--home-shadow-card);
}

.tq-shell .jtitle2 {
    width: auto;
    padding: 0 0 var(--sp-3);
    border-bottom: 1px solid hsl(var(--line-soft));
    background: transparent;
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: 1.5;
    text-indent: 0;
    color: hsl(var(--ink-900));
}

.tq-shell .frienddiv {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-2);
    float: none;
    margin: 0;
    padding: var(--sp-4) 0 0;
}

    .tq-shell .frienddiv li {
        float: none;
        width: auto;
        margin: 0;
        font-size: var(--fs-13);
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        cursor: default;
    }

        .tq-shell .frienddiv li a {
            display: inline-block;
            padding: 5px var(--sp-3);
            border-radius: var(--r-full);
            background: hsl(var(--surface-muted));
            color: hsl(var(--ink-600));
            transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
        }

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

/* ---------- S11. 轮播圆点配色 ---------- */
.tq-shell .banner ol li {
    background-color: hsl(var(--line-strong));
}

    .tq-shell .banner ol li:hover {
        background-color: hsl(var(--ink-400));
    }

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

/* ---------- S12. 断点 ----------
   .tq-shell 前缀规则特异度高于旧模板的媒体查询，旧断点在所有宽度下都被压住，
   因此这里必须自己重写。旧模板 ≤768px 会隐藏 .class-wr / .phone-hide，照搬。 */
@media screen and (max-width: 980px) {
    .tq-shell .report-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tq-shell .class-wr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-5) var(--sp-6);
        padding: var(--sp-5) var(--sp-6) var(--sp-6);
    }
}

@media screen and (max-width: 768px) {
    .tq-shell .class-wr,
    .tq-shell .phone-hide {
        display: none;
    }

    .tq-shell .t-banner-wr.tq-split {
        flex-direction: column;
        gap: var(--sp-4);
    }

    .tq-shell .help-box-wr {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
    }

    .tq-shell .report-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .tq-shell .newcanvas-lay h3.title {
        flex-wrap: wrap;
        row-gap: var(--sp-2);
    }

    .tq-shell .newcanvas-lay h3.title .a_more {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}