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

   2026-10-14 首页美化：搜索带改为一条"导航下延带"——底色直接复用导航那条蓝
   （112deg 同方向同色值），上面压一层从透明到实心的画布色把它往下淡出，
   于是导航 → hero → 内容区是蓝 → 浅蓝 → 画布的连续过渡，中间不经过灰色；
   顶部掠光 + 白色刻线网格做质感，白色大标题与白搜索框浮在上段的蓝底上。
   首页顶部 banner（HomeKV 广告位）已连同 index.aspx.cs 里的绑定一起去掉，中部轮播保留。
   主题库由一整张空白大卡改为六张带图标的小卡；排行榜前三名换金银铜徽章；
   页尾保留深蓝「服务说明条」作收束重音。
   注意：hero 与导航现在是同一条蓝，改 --tq-nav-g* 时必须同步改 --hero-g*。

   三条继承自 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 能存活。）
   6. 改完本文件必须同步换 Web/index.aspx 里 /css/home.css?v=主版本.随机数
      的随机数（如 ?v=1.5.0.80395），否则浏览器仍用旧缓存。

   相对路径注意：本文件位于 /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);
    /* banner 圆角：广告素材是实拍图，24px 大圆角会把画面切得太"软"，收到 8px */
    --home-banner-r: 8px;
    --home-shadow-card: 0 1px 2px hsl(var(--ink-900) / .04);
    --home-shadow-card-hi: 0 12px 28px -14px hsl(var(--brand-950) / .35);

    /* hero 不再自己配色：底色就是导航那条蓝（四档值必须与 home_nav.css 的
       --tq-nav-g1~g4 一致，改导航色时这里同步），上面再压一层从透明到实心的
       画布色把它往下淡出。所以顶边与导航是同一条蓝、中间不经过任何灰色。 */
    --hero-g1: 204 91% 31%;
    --hero-g2: 202 89% 35%;
    --hero-g3: 200 88% 39%;
    --hero-g4: 197 84% 43%;
    /* 淡出层各档的不透明度：0 = 纯导航蓝，1 = 纯画布色。
       前两档必须一路 0 到正文下方，否则白副标题会先被洗进浅蓝里失去对比。 */
    --hero-fade-a1: 0;
    --hero-fade-a2: .18;
    --hero-fade-a3: .68;
    /* 纵向收束带的厚度。hero 下内边距必须等于本值，这样"淡到画布"这一段永远落在
       正文下方，不会把白标题/白搜索框垫到浅底上失去对比。 */
    --hero-fade: 104px;
    --hero-hi: 0 0% 100%;                /* 顶部掠光 */
    --hero-grid: 0 0% 100% / .05;        /* 蓝底上的白色刻线，随底色变浅自然隐去 */
    /* 服务说明条是白字小字号，必须保持深色底 */
    --value-g1: 208 84% 19%;
    --value-g2: 203 80% 27%;
    --value-g3: 198 74% 37%;
    --value-fg-dim: 0 0% 100% / .72;
    --value-line: 0 0% 100% / .14;
    --hero-search-h: 52px;
    /* 主标题比通用 --fs-34 再大一档：hero 带高 200px+，34px 压不住场 */
    --hero-title-fs: 40px;
    /* hero 上的文字：深底回到白色半透明体系，不用灰字 */
    --hero-fg-dim: 0 0% 100% / .68;
    --hero-fg-faint: 210 12% 64%;        /* 引导语，比正文低一档明度 */
    --hero-line: 0 0% 100% / .18;
    /* 排行榜前三名：金 / 银 / 铜（浅底深字，与 --danger 一样是克制的暖色） */
    --medal-1: 36 92% 40%;
    --medal-1-soft: 42 96% 92%;
    --medal-2: 213 14% 42%;
    --medal-2-soft: 210 26% 93%;
    --medal-3: 19 64% 42%;
    --medal-3-soft: 24 84% 93%;

    /* 区块图标（stroke 型 24×24，经 mask 上色，改色只需改 --ic 背景色） */
    --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 3 14 8 19 8'/%3E%3C/svg%3E");
    --ico-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
    --ico-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c1.5 3 4.5 4.6 4.5 8.5a4.5 4.5 0 0 1-9 0C7.5 8.6 9 7 9 7c.3 1.6 1.2 2.4 2 2.6C10.4 7.4 11 4.6 12 2z'/%3E%3C/svg%3E");
    --ico-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E");
    --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    /* 六大主题各一枚：电池 / 芯片 / 信号 / 工厂 / 天平 / 折线 */
    --ico-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2.6'/%3E%3Cpath d='M21.5 10.5v3'/%3E%3Cpolyline points='10.5 9.5 8 12.6 11.2 12.6 8.8 15.5'/%3E%3C/svg%3E");
    --ico-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M10 2.5v3M14 2.5v3M10 18.5v3M14 18.5v3M2.5 10h3M2.5 14h3M18.5 10h3M18.5 14h3'/%3E%3C/svg%3E");
    --ico-signal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 18.4a10 10 0 0 1 0-12.8'/%3E%3Cpath d='M19.4 5.6a10 10 0 0 1 0 12.8'/%3E%3Cpath d='M8.4 15a5.4 5.4 0 0 1 0-6'/%3E%3Cpath d='M15.6 9a5.4 5.4 0 0 1 0 6'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
    --ico-factory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10l5 3.2V10l5 3.2V10l5 3.2V20z'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");
    --ico-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v17M6 20.5h12M5 7h14'/%3E%3Cpath d='M5 7 2 14h6z'/%3E%3Cpath d='M19 7l-3 7h6z'/%3E%3C/svg%3E");
    --ico-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v17h17'/%3E%3Cpolyline points='7.5 15.5 11 10.5 14.5 13.5 20 6'/%3E%3C/svg%3E");
}

/* ---------- 1. 画布：整页内容区铺浅灰底，白卡浮于其上 ---------- */
.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;
}

/* ---------- 2. Hero：导航蓝向下淡出到画布的主视觉带 ----------
   自下而上六层：导航同款蓝底（112deg 同方向同色值，顶边直接对齐）→ 画布色淡出层
   （顶透明、底实心，所以全程是"蓝 → 浅蓝 → 画布"，不经过中性灰）→ 白色刻线网格 →
   掠光 → 顶部承接层。最后一档写死画布 token，保证 hero 与下方内容区永远没有接缝。
   顶部承接层是给导航条那道 --tq-shadow-nav 投影准备的落点：导航是 sticky 且
   z-index 高于正文，投影必然压在 hero 顶边上。若此处不给同色过渡，投影和下面的
   亮蓝之间就是一条硬横线。 */
.tq-shell .tq-hero {
    position: relative;
    padding: var(--sp-10) 0 var(--hero-fade);
    background:
        linear-gradient(180deg, hsl(var(--brand-900) / .42) 0, hsl(var(--brand-900) / .16) 12px, hsl(var(--brand-900) / 0) 46px),
        radial-gradient(1100px 420px at 74% 24%, hsl(var(--hero-hi) / .07), transparent 70%),
        repeating-linear-gradient(90deg, hsl(var(--hero-grid)) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, hsl(var(--hero-grid)) 0 1px, transparent 1px 72px),
        linear-gradient(180deg,
            hsl(var(--surface-muted) / var(--hero-fade-a1)) 0%,
            hsl(var(--surface-muted) / var(--hero-fade-a1)) 45%,
            hsl(var(--surface-muted) / var(--hero-fade-a2)) calc(100% - var(--hero-fade)),
            hsl(var(--surface-muted) / var(--hero-fade-a3)) calc(100% - var(--hero-fade) / 2),
            hsl(var(--surface-muted)) 100%),
        linear-gradient(112deg, hsl(var(--hero-g1)) 0%, hsl(var(--hero-g2)) 38%, hsl(var(--hero-g3)) 70%, hsl(var(--hero-g4)) 100%);
    color: hsl(var(--surface));
    border-bottom: 0;
    overflow: hidden;
}

.tq-shell .tq-hero-in {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    width: auto;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}

.tq-shell .tq-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.tq-shell .tq-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .22em;
    color: hsl(var(--hero-fg-faint));
}

    .tq-shell .tq-hero-eyebrow::before {
        content: "";
        flex: none;
        width: 28px;
        height: 1px;
        background: currentColor;
        opacity: .7;
    }

.tq-shell .tq-hero-title {
    margin: 0;
    font-size: var(--hero-title-fs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    color: hsl(var(--surface));
}

.tq-shell .tq-hero-sub {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-14);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .02em;
    color: hsl(var(--hero-fg-dim));
}

.tq-shell .tq-hero-search {
    flex: 0 0 520px;
    max-width: 100%;
}

/* 搜索框：白底胶囊 + 渐变按钮。深底上白盒本身已经够跳，不要描边，靠投影浮起 */
.tq-shell .tq-hero .search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
    margin: 0;
}

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

    .tq-shell .tq-hero .top-search-box .s-ipt-wr:focus-within {
        border-color: hsl(var(--brand-500));
        box-shadow: var(--shadow-focus), 0 10px 26px -14px hsl(215 20% 2% / .70);
        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 .tq-hero .top-search-box .s-ipt-wr:focus-within .s-ipt-icon {
    stroke: hsl(var(--brand-500));
}

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

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

.tq-shell .tq-hero .search-box .s-btn-wr {
    position: relative;
    /* 旧模板把这里写成 absolute + right:10px，只改 position 时 right 仍生效，
       会把按钮往左推 10px 压在输入框上，必须一并复位 */
    top: auto;
    right: auto;
    display: flex;
    flex: none;
    float: none;
    align-items: center;
    width: auto;
    height: var(--hero-search-h);
}

.tq-shell .tq-hero .search-box .s-btn {
    float: none;
    width: 132px;
    height: var(--hero-search-h);
    border: 0;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: inherit;
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: var(--hero-search-h);
    letter-spacing: .06em;
    text-align: center;
    color: hsl(var(--surface));
    background: linear-gradient(135deg, hsl(var(--brand-500)), hsl(var(--brand-700)));
    box-shadow: 0 10px 26px -14px hsl(215 20% 2% / .55);
    cursor: pointer;
    overflow: visible;
    transition: filter var(--dur-fast) var(--ease-out);
}

    .tq-shell .tq-hero .search-box .s-btn:hover {
        filter: brightness(1.1);
    }

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

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

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

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

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

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

    .tq-shell .tq-hero .swiper-slide a {
        color: inherit;
    }

/* ---------- 3. 区块头公共件：图标砖 + 标题 + 右侧「更多」 ----------
   三个区块头共用 .tq-sec-tit / .a_more，但图标砖的 glyph 各不相同，
   取代改版前「4px 蓝条 + 标题」三处雷同的排版。 */
.tq-shell .tq-sec-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
    padding: 0;
    border-bottom: 0;
}

.tq-shell .tq-sec-tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.4;
    color: hsl(var(--ink-900));
}

.tq-shell .tq-sec-ico {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(150deg, hsl(var(--brand-500)), hsl(var(--brand-700)));
    box-shadow: 0 8px 16px -10px hsl(var(--brand-700) / .95);
}

    .tq-shell .tq-sec-ico::after {
        content: "";
        position: absolute;
        inset: 6px;
        background: hsl(var(--surface));
        -webkit-mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
        mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
    }

.tq-shell .tq-sec-ico.i-grid {
    --ico: var(--ico-grid);
}

.tq-shell .tq-sec-ico.i-flame {
    --ico: var(--ico-flame);
}

.tq-shell .tq-sec-ico.i-bookmark {
    --ico: var(--ico-bookmark);
}

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

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

    .tq-shell .tq-sec-head .a_more svg,
    .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;
    }

/* ---------- 4. 主题库：六张带图标的主题小卡 ---------- */
.tq-shell .class-wr {
    display: block;
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: var(--sp-12) auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.tq-shell .class-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: stretch;
}

/* 见文件头约束 4：必须带 .class-wr 限定，否则会改坏导航下拉面板 */
.tq-shell .class-wr .class-lay {
    position: relative;
    display: block;
    width: auto;
    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);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

    /* 顶部品牌色细线：静止时收成一条亮边，悬停时横向铺开 */
    .tq-shell .class-wr .class-lay::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, hsl(var(--ic, var(--brand-600))), hsl(var(--brand-300)));
        transform: scaleX(.18);
        transform-origin: left;
        transition: transform var(--dur) var(--ease-out);
    }

    .tq-shell .class-wr .class-lay:hover {
        border-color: hsl(var(--brand-200));
        box-shadow: var(--home-shadow-card-hi);
        transform: translateY(-3px);
    }

        .tq-shell .class-wr .class-lay:hover::before {
            transform: scaleX(1);
        }

    .tq-shell .class-wr .class-lay h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 var(--sp-4);
        font-size: var(--fs-16);
        font-weight: 600;
        line-height: 1.4;
    }

        .tq-shell .class-wr .class-lay h3 a {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            color: hsl(var(--ink-900));
            transition: color var(--dur-fast) var(--ease-out);
        }

            /* 悬停才浮出的跳转箭头 */
            .tq-shell .class-wr .class-lay h3 a::after {
                content: "";
                flex: none;
                width: 15px;
                height: 15px;
                margin-left: auto;
                background: hsl(var(--ink-400));
                -webkit-mask: var(--ico-arrow) center / contain no-repeat;
                mask: var(--ico-arrow) center / contain no-repeat;
                opacity: 0;
                transform: translateX(-6px);
                transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
            }

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

                .tq-shell .class-wr .class-lay:hover h3 a::after {
                    opacity: 1;
                    transform: translateX(0);
                }

/* 主题图标砖：底色浅、glyph 用该主题的色相，六卡分三档蓝系色循环 */
.tq-shell .class-wr .tq-cat-ico {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: hsl(var(--ic-soft, var(--brand-50)));
    transition: transform var(--dur) var(--ease-spring);
}

    .tq-shell .class-wr .tq-cat-ico::after {
        content: "";
        position: absolute;
        inset: 7px;
        background: hsl(var(--ic, var(--brand-600)));
        -webkit-mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
        mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
    }

.tq-shell .class-wr .class-lay:hover .tq-cat-ico {
    transform: scale(1.08);
}

/* 六张卡的图标与色相。第 7 个分类起自动回落到 --ico-doc 默认蓝 */
.tq-shell .class-grid .class-lay:nth-child(6n+1) .tq-cat-ico {
    --ico: var(--ico-battery);
    --ic: 201 89% 40%;
}

.tq-shell .class-grid .class-lay:nth-child(6n+2) .tq-cat-ico {
    --ico: var(--ico-chip);
    --ic: 208 88% 44%;
}

.tq-shell .class-grid .class-lay:nth-child(6n+3) .tq-cat-ico {
    --ico: var(--ico-signal);
    --ic: 186 72% 34%;
}

.tq-shell .class-grid .class-lay:nth-child(6n+4) .tq-cat-ico {
    --ico: var(--ico-factory);
    --ic: 196 84% 38%;
}

.tq-shell .class-grid .class-lay:nth-child(6n+5) .tq-cat-ico {
    --ico: var(--ico-scale);
    --ic: 210 60% 40%;
}

.tq-shell .class-grid .class-lay:nth-child(6n+6) .tq-cat-ico {
    --ico: var(--ico-chart);
    --ic: 172 62% 32%;
}

.tq-shell .class-wr .class-lay ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 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: 4px 11px;
        border: 1px solid transparent;
        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), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .class-wr .class-lay li a:hover {
            border-color: hsl(var(--brand-200));
            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-10);
}

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

    .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;
    }

    /* 底部压暗渐变：让圆点在亮色素材上始终可读 */
    .tq-shell .tq-split .doc-banner::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 84px;
        background: linear-gradient(180deg, hsl(var(--brand-950) / 0), hsl(var(--brand-950) / .38));
        pointer-events: none;
    }

/* ---------- S6. 排行榜卡：高度由内容撑，永不截断 ---------- */
.tq-shell .help-box-wr {
    display: flex;
    flex-direction: column;
    float: none;
    flex: 0 0 var(--home-rank-w);
    align-self: stretch;
    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-xl);
    box-shadow: var(--home-shadow-card);
}

.tq-shell .hot_doc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sp-2);
    padding: 0 0 var(--sp-4);
    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 .tq-sec-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

    .tq-shell .hot_doc .tq-sec-ico::after {
        inset: 5px;
    }

.tq-shell .hot_doc-more {
    flex: none;
    margin-left: auto;
    padding-left: var(--sp-2);
    font-size: var(--fs-12);
    font-weight: 400;
    color: hsl(var(--ink-400));
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .hot_doc-more:hover {
        color: 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: 24px;
    height: 24px;
    margin: 0;
    border-radius: var(--r-sm);
    background: hsl(var(--surface-muted));
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: hsl(var(--ink-500));
}

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

.tq-shell .help-box li:nth-child(1) .paihang-top {
    --medal: var(--medal-1);
    --medal-soft: var(--medal-1-soft);
}

.tq-shell .help-box li:nth-child(2) .paihang-top {
    --medal: var(--medal-2);
    --medal-soft: var(--medal-2-soft);
}

.tq-shell .help-box li:nth-child(3) .paihang-top {
    --medal: var(--medal-3);
    --medal-soft: var(--medal-3-soft);
}

.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-12) 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;
}

/* 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;
    }

/* ---------- 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);
    box-shadow: 0 6px 14px -10px hsl(var(--ink-900) / .5);
    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:hover img {
        transform: scale(1.1);
    }

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

/* 封面左上角属性角标：免费=绿、会员=金 */
.tq-shell .tq-flag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 2px 8px 2px 6px;
    border-radius: var(--r-sm) 0 var(--r-sm) 0;
    font-size: var(--fs-11);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .04em;
    color: hsl(var(--surface));
    pointer-events: none;
}

.tq-shell .tq-flag-free {
    background: linear-gradient(135deg, hsl(158 66% 40%), hsl(var(--success)));
}

.tq-shell .tq-flag-vip {
    background: linear-gradient(135deg, hsl(38 92% 52%), hsl(26 88% 44%));
}

.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 .tq-value {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: var(--sp-10) 0 0;
    padding: 0;
    border-radius: var(--r-xl);
    background:
        radial-gradient(460px 220px at 92% -20%, hsl(var(--accent-300) / .26), transparent 66%),
        repeating-linear-gradient(90deg, hsl(0 0% 100% / .05) 0 1px, transparent 1px 72px),
        linear-gradient(160deg, hsl(var(--value-g1)), hsl(var(--value-g2)) 78%, hsl(var(--value-g3)));
    background-color: hsl(var(--value-g2));
    color: hsl(var(--surface));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.tq-shell .tq-value-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: var(--sp-6);
    border-right: 1px solid hsl(var(--value-line));
}

    .tq-shell .tq-value-item:last-child {
        border-right: 0;
    }

.tq-shell .tq-value-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid hsl(var(--value-line));
    border-radius: 12px;
    background: hsl(0 0% 100% / .12);
}

    .tq-shell .tq-value-ico svg {
        width: 20px;
        height: 20px;
        stroke: hsl(var(--accent-300));
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tq-shell .tq-value-txt {
    min-width: 0;
}

    .tq-shell .tq-value-txt b {
        display: block;
        font-size: var(--fs-15);
        font-weight: 600;
        line-height: 1.5;
        color: hsl(var(--surface));
    }

    .tq-shell .tq-value-txt p {
        margin: 3px 0 0;
        font-size: var(--fs-13);
        line-height: 1.65;
        color: hsl(var(--value-fg-dim));
    }

/* ---------- S11. 友情链接：收成一条细带 ---------- */
.tq-shell .notice {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    float: none;
    width: auto;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-3) 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 {
    flex: none;
    width: auto;
    padding: 0;
    border-bottom: 0;
    background: transparent;
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.5;
    text-indent: 0;
    color: hsl(var(--ink-500));
}

.tq-shell .frienddiv {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    float: none;
    margin: 0;
    padding: 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: 4px 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));
            }

/* ---------- S12. 轮播圆点配色 ---------- */
.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));
    }

/* ---------- S13. 中部轮播外观（book118 式箭头 + 横条圆点，箭头悬停显示） ---------- */
.tq-shell .tq-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 56px;
    margin-top: -28px;
    border-radius: var(--r-sm);
    background: hsl(var(--ink-900) / .28);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.tq-shell .tq-mba-slider:hover .tq-slider-arrow {
    opacity: 1;
}

.tq-shell .tq-slider-arrow:hover {
    background: hsl(var(--ink-900) / .45);
}

.tq-shell .tq-slider-arrow svg {
    width: 18px;
    height: 18px;
    stroke: hsl(var(--surface));
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tq-shell .tq-slider-prev {
    left: 12px;
}

.tq-shell .tq-slider-next {
    right: 12px;
}

/* 底部横条圆点 */
.tq-shell .tq-mba-slider .unslider-nav {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.tq-shell .tq-mba-slider .unslider-nav ol {
    position: static;
    display: inline-flex;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 0;
    justify-content: center;
    list-style: none;
}

.tq-shell .tq-mba-slider .unslider-nav li {
    width: 26px;
    height: 4px;
    border-radius: var(--r-full);
    background: hsl(var(--surface) / .45);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

    .tq-shell .tq-mba-slider .unslider-nav li.unslider-active {
        width: 34px;
        background: hsl(var(--surface));
    }

/* ---------- S14. 断点 ----------
   .tq-shell 前缀规则特异度高于旧模板的媒体查询，旧断点在所有宽度下都被压住，
   因此这里必须自己重写。旧模板 ≤768px 会隐藏 .class-wr / .phone-hide，照搬。 */
@media screen and (max-width: 1180px) {
    .tq-shell .tq-hero-in {
        gap: var(--sp-6);
    }

    .tq-shell .tq-hero-search {
        flex: 0 0 420px;
    }
}

@media screen and (max-width: 980px) {
    .tq-shell .tq-hero {
        padding: var(--sp-8) 0 var(--hero-fade);
    }

    .tq-shell .tq-hero-in {
        display: block;
    }

    .tq-shell .tq-hero-search {
        flex: none;
        width: 100%;
        margin-top: var(--sp-6);
    }

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

    .tq-shell .class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tq-shell .tq-value {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tq-shell .tq-value-item:nth-child(2) {
        border-right: 0;
    }

    .tq-shell .tq-value-item:nth-child(-n+2) {
        border-bottom: 1px solid hsl(var(--value-line));
    }
}

@media screen and (max-width: 768px) {
    .tq-shell {
        --home-row-h: 196px;
    }

    .tq-shell .class-wr,
    .tq-shell .phone-hide {
        display: none;
    }

    .tq-shell .tq-hero-title {
        font-size: var(--fs-26);
    }

    /* 收窄字距，避免英文引导语在窄屏断词 */
    .tq-shell .tq-hero-eyebrow {
        gap: var(--sp-2);
        font-size: var(--fs-11);
        letter-spacing: .1em;
    }

    /* 窄屏下输入框必须按 flex-basis 0 收缩，否则按钮会被挤到第二行 */
    .tq-shell .tq-hero .top-search-box .s-ipt-wr {
        flex: 1 1 0;
    }

    .tq-shell .tq-hero .search-box .s-btn {
        width: 108px;
        letter-spacing: .02em;
    }

    .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 .tq-value {
        grid-template-columns: minmax(0, 1fr);
    }

    .tq-shell .tq-value-item {
        border-right: 0;
        border-bottom: 1px solid hsl(var(--value-line));
    }

    .tq-shell .tq-value-item:last-child {
        border-bottom: 0;
    }

    .tq-shell .notice {
        display: block;
    }

    .tq-shell .frienddiv {
        margin-top: var(--sp-2);
    }
}