/* ============================================================================
   uwh 图书馆站（tsg）2026-09 改版覆盖层 —— 方案 A「保守改版」
   ----------------------------------------------------------------------------
   为什么是"覆盖层"而不是直接改老文件：
     `new_file.css` / `h5.css` / `list.css` / `reading.css` / `page.css` 是从老站
     template15 原样迁过来的，template15 家族（cwc / hbc / jygh / tsg / zcc / zsw）
     六站各存一份但内容完全一致，是这套设计的公共基线。改老文件等于同时改另外
     五个站的设计，与"只重做图书馆站"是两件事。所以这里一层新文件，在 head.tera
     里**排在那些文件之后**加载 —— 同优先级下后写的规则自然覆盖，整份文件不用写
     一个 `!important`。要回退只需删掉 head.tera 里那一行 <link>。

   本层改动对应方案 A 的四件事（详见 `uwh-图书馆站重设计方案.md` §5）：
     1. 第一屏检索位：`.tsg-hero` 检索区（站内检索 + 功能入口）
     2. 补入口：头部导航扩项后改两行式 + 支持下拉子菜单；功能入口提到第一屏
     3. 视觉：配色/间距/卡片层次/列表与正文排版/分页 hover
     4. 响应式：老样式只有 >1200px（`.header{min-width:1200px}`）和 <981px 两档，
        982–1199px 会横向滚动，这里补中间档并放开写死的 min-width

   结构骨架（banner + 板块卡片区 + 图片滚动 + 页脚、`.container/.cb-content`
   内页壳）全部沿用，没有新造页面骨架。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 设计变量
   --------------------------------------------------------------------------- */
.tsg-v2 {
    /* 主色沿用老站 #005ABB（学校主站同一支蓝），只补层次色，不换品牌色 */
    --tsg-accent: #005ABB;
    --tsg-accent-2: #007BFF;
    --tsg-accent-dark: #004B9B;
    --tsg-ink: #1f2d3d;
    --tsg-ink-2: #64748b;
    --tsg-line: #e4ecf5;
    --tsg-bg: #f1f6fc;
    --tsg-card: #ffffff;
    --tsg-radius: 8px;
    --tsg-shadow: 0 2px 10px rgba(0, 90, 187, .06);
    --tsg-shadow-hover: 0 8px 22px rgba(0, 90, 187, .14);
}

/* 老样式 body 底色是饱和度很高的 #CAE6FF，压到浅灰蓝，卡片的白才立得住 */
.tsg-v2 body,
body.tsg-v2 {
    background-color: var(--tsg-bg);
    color: var(--tsg-ink);
}

/* ---------------------------------------------------------------------------
   1. 头部：两行式（第一行 logo + 站内检索，第二行导航）
   ---------------------------------------------------------------------------
   为什么改两行：① 站点 logo（`/uploads/20250224/c7f97a2f...png`）是 2864×304 的
   长条，按老样式 height:62px 渲染出来有 584px 宽，单行只剩 616px 给导航；
   ② 导航要从 5 项补到 8 项（方案 §5.3），8×(4字×16px+20px 间距)=672px，单行
   放不下；③ A 版要求补"第一屏检索位"，检索框本身也要占位。
   两行是这三个约束下唯一不用缩字号、不裁 logo 的排法。
   --------------------------------------------------------------------------- */
@media (min-width: 982px) {
    .tsg-v2 .header {
        min-width: 0;
        padding: 0;
        background-color: var(--tsg-accent);
    }

    .tsg-v2 .tsg-header-top {
        padding: 14px 0;
    }

    .tsg-v2 .tsg-header-nav {
        background-color: var(--tsg-accent-dark);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    .tsg-v2 .tsg-header-inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .tsg-v2 .hdbox-logo img {
        height: 54px;
        width: auto;
    }

    .tsg-v2 .tsg-header-side {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    /* 导航回到原来那套右对齐排法，只是换了个容器 */
    .tsg-v2 .tsg-header-nav .nav-box {
        display: block;
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .tsg-v2 .tsg-header-nav .nav-box > ul {
        justify-content: flex-end;
    }

    .tsg-v2 .tsg-header-nav .nav-box > ul > li {
        margin-left: 0;
        margin-right: 4px;
    }

    .tsg-v2 .tsg-header-nav .nav-box > ul > li:last-child {
        margin-right: 0;
    }

    .tsg-v2 .tsg-header-nav .nav-box > ul > li > a {
        padding: 12px 16px;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        font-size: 16px;
    }

    .tsg-v2 .tsg-header-nav .nav-box > ul > li > a:hover {
        background-color: var(--tsg-accent-2);
    }
}

/* 下拉子菜单：老 CSS 里 `.nav-box .child_ul` 这套规则本来就写好了，只是老模板
   从没渲染过 `children`（menu 数据有层级、模板没输出）。A 版把层级渲染补上，
   这样"导航扩项"可以靠"顶层少加、子项挂靠"来做，顶行不会越排越挤。 */
@media (min-width: 982px) {
    .tsg-v2 .nav-box > ul > li.has-children > a::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 6px;
        vertical-align: 2px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid rgba(255, 255, 255, .85);
    }

    .tsg-v2 .nav-box .child_ul {
        min-width: 148px;
        padding: 6px 0;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
    }

    .tsg-v2 .nav-box .child_ul li {
        padding: 0;
    }

    .tsg-v2 .nav-box .child_ul li a {
        padding: 9px 14px;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
    }
}

/* 站内检索框（头部）。表单 action 直接指向 `/search`，参数名 `keyword`
   —— 跟 `services::render::search_context` / `routes::front` 的入参一致。 */
.tsg-v2 .tsg-search {
    position: relative;
    display: flex;
    align-items: center;
}

.tsg-v2 .tsg-search input {
    width: 190px;
    height: 34px;
    padding: 0 40px 0 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 17px;
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 14px;
    transition: background-color .2s, border-color .2s;
}

.tsg-v2 .tsg-search input::placeholder {
    color: rgba(255, 255, 255, .78);
}

.tsg-v2 .tsg-search input:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--tsg-ink);
}

.tsg-v2 .tsg-search button {
    position: absolute;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.tsg-v2 .tsg-search button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}

.tsg-v2 .tsg-search input:focus + button svg {
    stroke: var(--tsg-accent);
}

/* ---------------------------------------------------------------------------
   2. 第一屏检索区（首页专属）
   --------------------------------------------------------------------------- */
.tsg-v2 .tsg-hero {
    position: relative;
    margin-top: 15px;
    border-radius: var(--tsg-radius);
    background-image: linear-gradient(118deg, #005ABB 0%, #0072D2 58%, #2F99D0 100%);
    box-shadow: var(--tsg-shadow);
    overflow: hidden;
}

.tsg-v2 .tsg-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .08);
}

.tsg-v2 .tsg-hero-main {
    position: relative;
    z-index: 1;
    padding: 26px 32px 22px;
}

.tsg-v2 .tsg-hero-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

.tsg-v2 .tsg-hero-sub {
    margin-top: 7px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
}

.tsg-v2 .tsg-hero-search {
    display: flex;
    max-width: 760px;
    margin-top: 16px;
    padding: 4px;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.tsg-v2 .tsg-hero-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 16px;
    border: 0;
    background-color: transparent;
    color: var(--tsg-ink);
    font-size: 15px;
}

.tsg-v2 .tsg-hero-search button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background-color: var(--tsg-accent);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .2s;
}

.tsg-v2 .tsg-hero-search button:hover {
    background-color: var(--tsg-accent-2);
}

/* 功能入口：数据来自首页设置的「命名区域 quicklinks_area」绑定（tsg 绑的是
   「文献资源」栏目，底下 5 条内容：书目检索 / 我的图书馆 / 电子数据库 /
   期刊 / 超星发现）。老版这几个入口是页面中部的一个 300px 小宫格，A 版把它
   提到第一屏；`home.html.tera` 里那个栏目在下面的 `.news` 循环中会被跳过，
   不会重复渲染。图标用白底方块承载，蓝色渐变上始终可读。 */
.tsg-v2 .tsg-hero-entries {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.tsg-v2 .tsg-hero-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--tsg-radius);
    background-color: #fff;
    color: var(--tsg-accent);
    font-size: 15px;
    transition: transform .2s, box-shadow .2s;
}

.tsg-v2 .tsg-hero-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    color: var(--tsg-accent-2);
}

.tsg-v2 .tsg-hero-entry img {
    height: 26px;
    width: auto;
    max-width: 58px;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   3. 首页板块（`.news` 里的卡片）
   --------------------------------------------------------------------------- */
.tsg-v2 .news-bigtable,
.tsg-v2 .news-litteltable {
    border-radius: var(--tsg-radius);
    box-shadow: var(--tsg-shadow);
    transition: box-shadow .2s;
    margin-top: 14px;
}

.tsg-v2 .news-bigtable:hover,
.tsg-v2 .news-litteltable:hover {
    box-shadow: var(--tsg-shadow-hover);
}

/* 「文献资源」宫格提到第一屏后，`.news` 里常驻 4 张卡片（通知公告 / 新闻动态 /
   图书推荐 / 服务指南）—— 4×440px 在 1200px 里排不下三个，排两个又会因为
   `justify-content:space-between` 中间空出一大块。改成两列等宽，行行铺满。 */
.tsg-v2 .news-bigtable {
    width: calc(50% - 6px);
}

.tsg-v2 .headline {
    border-bottom: 1px solid var(--tsg-line);
    padding: 12px 16px 0;
    margin-bottom: 8px;
}

.tsg-v2 .headline .span-first {
    position: relative;
    padding-bottom: 8px;
    color: var(--tsg-ink);
}

/* 标题左侧色条 + 下划线，纯粹提层次，不改字号字重 */
.tsg-v2 .headline .span-first::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    background-color: var(--tsg-accent);
}

.tsg-v2 .headline .span-first::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 2px;
    background-color: var(--tsg-accent);
}

.tsg-v2 .headline .span-three {
    line-height: 30px;
}

.tsg-v2 .headline .span-three a {
    color: var(--tsg-ink-2);
}

.tsg-v2 .headline .span-three a:hover {
    color: var(--tsg-accent-2);
}

.tsg-v2 .news-list {
    padding: 0 16px 4px;
}

.tsg-v2 .news-list a {
    margin-bottom: 0;
    padding: 11px 0;
    border-bottom: 1px dashed var(--tsg-line);
    transition: padding-left .2s;
}

.tsg-v2 .news-list a:last-child {
    border-bottom: 0;
}

.tsg-v2 .news-list a:hover {
    padding-left: 4px;
}

.tsg-v2 .news-list .span-four {
    color: var(--tsg-ink-2);
    font-size: 12px;
}

/* 「联系我们」从第三列的窄卡片改成整幅横条：`文献资源` 一走，`.news` 里只剩
   4 张卡，留一个 300px 的空位反而更难看；联系方式横排一行也更醒目。 */
.tsg-v2 .tsg-contact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 40px;
    width: 100%;
    margin-top: 14px;
    padding: 18px 26px;
    border-radius: var(--tsg-radius);
    background-color: #fff;
    box-shadow: var(--tsg-shadow);
}

.tsg-v2 .tsg-contact-bar .tsg-contact-title {
    position: relative;
    padding-left: 12px;
    color: var(--tsg-ink);
    font-size: 18px;
    font-weight: bold;
}

.tsg-v2 .tsg-contact-bar .tsg-contact-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background-color: var(--tsg-accent);
}

.tsg-v2 .tsg-contact-bar p {
    color: var(--tsg-ink-2);
    font-size: 14px;
}

.tsg-v2 .tsg-contact-bar p span {
    color: var(--tsg-accent);
}

/* 图片滚动区（新馆风采） */
.tsg-v2 .scroll {
    border-radius: var(--tsg-radius);
    box-shadow: var(--tsg-shadow);
    margin-top: 14px;
    padding-bottom: 22px;
}

.tsg-v2 .slider_Box .swiper-slide img {
    border-radius: 4px;
    transition: transform .25s;
}

.tsg-v2 .slider_Box .swiper-slide:hover img {
    transform: scale(1.03);
}

/* ---------------------------------------------------------------------------
   4. 页脚
   --------------------------------------------------------------------------- */
.tsg-v2 .footer {
    min-width: 0;
    margin-top: 24px;
    padding: 26px 0;
    background-image: linear-gradient(180deg, #004B9B 0%, #003F82 100%);
}

.tsg-v2 .footer-box {
    width: 100%;
    max-width: 1200px;
    padding: 0 16px;
}

.tsg-v2 .footer-text p {
    padding: 4px;
    line-height: 1.8;
}

/* 「馆长信箱」独立一行，和上面的电话/地址拉开一点层次 */
.tsg-v2 .footer-mailbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
}

.tsg-v2 .footer-mailbox a {
    color: #fff;
    font-weight: bold;
}

.tsg-v2 .footer-mailbox a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   5. 内页（`.container` 壳：栏目列表 / 详情 / 单页 / 分类落地页）
   --------------------------------------------------------------------------- */
.tsg-v2 .container {
    min-width: 0;
}

.tsg-v2 .container-box {
    width: 100%;
    max-width: 1200px;
    border-radius: var(--tsg-radius);
    box-shadow: var(--tsg-shadow);
}

.tsg-v2 .cb-content-head {
    display: flex;
    align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--tsg-line);
    color: var(--tsg-ink-2);
}

.tsg-v2 .cb-content-head a {
    color: var(--tsg-ink-2);
}

.tsg-v2 .cb-content-head a:hover {
    color: var(--tsg-accent-2);
}

/* 列表项：老样式 `margin-bottom:18px` 靠外间距分行，改成分隔线，长列表更整齐 */
.tsg-v2 .news-list a {
    color: var(--tsg-ink);
}

/* 详情页 */
.tsg-v2 .page {
    padding: 0 40px 30px;
}

.tsg-v2 .content_box {
    font-size: 15px;
}

.tsg-v2 .page-title {
    padding: 22px 0 0;
    font-size: 22px;
    line-height: 1.5;
    color: var(--tsg-ink);
}

.tsg-v2 .page-time {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tsg-line);
    color: var(--tsg-ink-2);
}

.tsg-v2 .page-read {
    padding-top: 18px;
    line-height: 1.9;
    color: #26333f;
}

.tsg-v2 .page-read p {
    margin: 0 0 14px;
}

.tsg-v2 .page-read img {
    max-width: 100%;
    height: auto !important;
    border-radius: 4px;
}

/* 老站正文里的表格普遍没边框，加上细边框更像"数据表"而不是挤在一起的文字 */
.tsg-v2 .page-read table {
    max-width: 100%;
    margin: 14px auto;
    border-collapse: collapse;
}

.tsg-v2 .page-read table td,
.tsg-v2 .page-read table th {
    padding: 8px 10px;
    border: 1px solid var(--tsg-line);
}

.tsg-v2 .page-read table th {
    background-color: var(--tsg-bg);
    font-weight: bold;
}

.tsg-v2 .attach {
    padding-top: 16px;
    border-top: 1px dashed var(--tsg-line);
}

.tsg-v2 .attach a {
    color: var(--tsg-accent);
}

/* 分类落地页（子栏目卡片） */
.tsg-v2 .cat-landing-card {
    border-color: var(--tsg-line);
    border-radius: var(--tsg-radius);
    color: var(--tsg-ink);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.tsg-v2 .cat-landing-card:hover {
    border-color: #bcd8f2;
    box-shadow: var(--tsg-shadow-hover);
    transform: translateY(-2px);
}

.tsg-v2 .cat-landing-card .cat-landing-name {
    color: var(--tsg-accent);
}

/* ---------------------------------------------------------------------------
   6. 分页（列表页 / 搜索页共用，markup 沿用 2026-09-18 复刻的老系统
   Bootstrap 结构 `.pagination > .page-item > .page-link`）
   --------------------------------------------------------------------------- */
.tsg-v2 .pagination .page-item {
    border-color: var(--tsg-line);
    border-radius: 4px;
    transition: border-color .2s, background-color .2s;
}

.tsg-v2 .pagination .page-item .page-link {
    color: var(--tsg-ink-2);
}

.tsg-v2 .pagination .page-item:not(.disabled):not(.active):hover {
    border-color: var(--tsg-accent-2);
    background-color: #f2f8ff;
}

.tsg-v2 .pagination .page-item:not(.disabled):not(.active):hover .page-link {
    color: var(--tsg-accent);
}

.tsg-v2 .pagination .active {
    border-color: var(--tsg-accent);
    background-color: var(--tsg-accent);
}

/* 搜索页结果条数说明 */
.tsg-v2 .tsg-search-summary {
    padding: 14px 24px 0;
    color: var(--tsg-ink-2);
    font-size: 14px;
}

.tsg-v2 .tsg-search-summary b {
    color: var(--tsg-accent);
}

.tsg-v2 .tsg-search-empty {
    padding: 60px 24px;
    color: var(--tsg-ink-2);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   7. 响应式补充
   --------------------------------------------------------------------------- */
/* 982–1199px：老样式在这档会把 `.header/.content/.footer/.container` 按
   `min-width:1200px` 撑出横向滚动条，这里放开并把容器改成流式。 */
@media (min-width: 982px) and (max-width: 1231px) {

    .tsg-v2 .content,
    .tsg-v2 .footer,
    .tsg-v2 .container {
        min-width: 0;
    }

    .tsg-v2 .content-box {
        width: 100%;
        max-width: 1200px;
        padding: 0 16px;
    }

    .tsg-v2 .news-bigtable {
        width: calc(50% - 6px);
    }
}

/* <982px：老样式（h5.css）在这一档把 `.nav-box` 变成右侧抽屉。抽屉是
   `position:fixed`，所以第二行容器不能 `display:none`（会连抽屉一起隐藏），
   改成让它透明、不占视觉位置，只当抽屉的挂载点。 */
@media (max-width: 981px) {
    .tsg-v2 .header {
        min-width: 0;
        padding: 0;
    }

    .tsg-v2 .tsg-header-top {
        padding: 10px 0;
    }

    .tsg-v2 .tsg-header-nav {
        background-color: transparent;
        box-shadow: none;
    }

    .tsg-v2 .tsg-header-inner {
        width: 100%;
        padding: 0 12px;
    }

    .tsg-v2 .tsg-header-side {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .tsg-v2 .tsg-search {
        margin-right: 12px;
    }

    .tsg-v2 .tsg-search input {
        width: 120px;
        height: 30px;
        padding: 0 32px 0 12px;
        font-size: 13px;
    }

    .tsg-v2 .tsg-search button {
        right: 2px;
        width: 26px;
        height: 26px;
    }

    /* 抽屉打开后的检索位：手机上第一屏检索同样要能用 */
    .tsg-v2 .tsg-hero {
        margin: 12px;
    }

    .tsg-v2 .tsg-hero-main {
        padding: 20px 18px;
    }

    .tsg-v2 .tsg-hero-title {
        font-size: 19px;
    }

    .tsg-v2 .tsg-hero-search {
        max-width: 100%;
    }

    .tsg-v2 .tsg-hero-search button {
        padding: 0 20px;
    }

    .tsg-v2 .tsg-hero-entry {
        padding: 8px 14px;
        font-size: 14px;
    }

    .tsg-v2 .news-bigtable {
        width: 100%;
    }

    .tsg-v2 .tsg-contact-bar {
        padding: 16px 18px;
        gap: 6px 24px;
    }

    .tsg-v2 .container-box {
        border-radius: 0;
    }

    .tsg-v2 .page {
        padding: 0 16px 20px;
    }

    .tsg-v2 .tsg-search-panel {
        margin: 12px 16px 0;
        padding: 16px;
    }

    /* 移动端没有 hover 这个概念，`new_file.css` 里 `.child_ul{display:none}` +
       `.nav-box>ul>li:hover .child_ul{display:block}` 这套在手机上等于子菜单永远
       打不开。抽屉里改成常显（`h5.css` 已经把它的 position/背景改成"平铺在父项
       下面"的样子，只差把 display 放开）。 */
    .tsg-v2 .nav-box .child_ul {
        display: block;
    }
}

/* ---------------------------------------------------------------------------
   8. 搜索页（A 版新增 slot）—— 页面底色是白的，hero 那套"白底胶囊"直接用会糊在
   一起，所以检索条给一块浅蓝底板 + 细边框。
   --------------------------------------------------------------------------- */
.tsg-v2 .tsg-search-panel {
    margin: 18px 24px 0;
    padding: 22px 24px;
    border-radius: var(--tsg-radius);
    background-color: var(--tsg-bg);
}

.tsg-v2 .tsg-search-pill {
    display: flex;
    max-width: 760px;
    margin: 0 auto;
    padding: 4px;
    border: 1px solid var(--tsg-line);
    border-radius: 999px;
    background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.tsg-v2 .tsg-search-pill:focus-within {
    border-color: var(--tsg-accent-2);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .12);
}

.tsg-v2 .tsg-search-pill input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 0;
    background-color: transparent;
    color: var(--tsg-ink);
    font-size: 15px;
}

.tsg-v2 .tsg-search-pill button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background-color: var(--tsg-accent);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .2s;
}

.tsg-v2 .tsg-search-pill button:hover {
    background-color: var(--tsg-accent-2);
}

/* 列表/搜索结果的行内边距跟面包屑（18px 24px）对齐，原来 16px 会显得缩进不一致 */
.tsg-v2 .cb-content .news-list {
    padding: 0 24px 4px;
}

@media (max-width: 981px) {
    .tsg-v2 .cb-content .news-list {
        padding: 0 16px 4px;
    }
}

/* ===========================================================================
   B 版门户层（2026-09-18，对标 lib.tust.edu.cn 骨架）
   顶栏 / 检索区叠 banner / 快捷图标行 / 重点关注 / 数字资源卡 /
   图书封面卡 / 服务指南 / 大数据看板。全部只追加，不动 A 版规则。
   ======================================================================== */

/* ── 最顶深色工具栏 ─────────────────────────────────────────── */
.tsg-topbar {
    background-color: #12294d;
    color: #c9d6ea;
    font-size: 13px;
    line-height: 34px;
}
.tsg-topbar .tsg-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}
/* 2026-09-18 用户反馈顶栏检索与蓝色头部检索重复，顶栏检索位删除，以下三条
   检索规则随之作废移除；.tsg-topbar-right 一并移除（顶栏只剩右侧一个链接）。 */
.tsg-topbar-login {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
}
.tsg-topbar-login:hover { color: #f7c948; }
.tsg-topbar-login svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ── 检索区叠 banner ────────────────────────────────────────── */
.tsg-banner-wrap {
    position: relative;
    overflow: hidden;
}
.tsg-banner-wrap .list_banner img {
    min-height: 300px;
    object-fit: cover;
}
.tsg-v2 .tsg-hero {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    z-index: 5;
    display: flex;
    justify-content: center;
    pointer-events: none;           /* 让 banner 空白处仍可点轮播 */
}
.tsg-v2 .tsg-hero-main {
    pointer-events: auto;
    width: min(860px, 92%);
    background-color: rgba(16, 34, 64, .72);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 18px 22px 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.tsg-hero-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 14px;
}
.tsg-hero-tabs a {
    color: #c9d6ea;
    font-size: 15px;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
}
.tsg-hero-tabs a:hover { color: #fff; }
.tsg-hero-tabs a.is-active {
    color: #fff;
    font-weight: bold;
    border-bottom-color: #f7c948;
}
.tsg-v2 .tsg-hero-search {
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.tsg-v2 .tsg-hero-search input {
    flex: 1;
    border: 0;
    outline: none;
    font-size: 15px;
    padding: 0 16px;
    height: 46px;
}
.tsg-v2 .tsg-hero-search button {
    border: 0;
    background-color: var(--tsg-accent, #1f5faa);
    color: #fff;
    font-size: 16px;
    padding: 0 30px;
    cursor: pointer;
}
.tsg-v2 .tsg-hero-search button:hover { background-color: #17497f; }

/* ── 快捷服务图标行 ─────────────────────────────────────────── */
.tsg-quickbar {
    background-color: #16305c;
}
.tsg-quickbar .tsg-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 12px;
}
.tsg-quickbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #e8eef8;
    text-decoration: none;
    padding: 16px 6px 14px;
    min-width: 96px;
}
.tsg-quickbar a:hover { color: #f7c948; }
.tsg-quickbar svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tsg-quickbar span { font-size: 13px; }

/* ── 通用板块标题（B 版居中式） ─────────────────────────────── */
.tsg-section { margin: 34px auto 0; }
.tsg-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}
.tsg-section-title h2 {
    font-size: 24px;
    color: #16305c;
    letter-spacing: 2px;
    margin: 0;
}
.tsg-section-title .tsg-section-line {
    width: 64px;
    height: 3px;
    background-color: #f7c948;
    border-radius: 2px;
}
.tsg-section-title .tsg-more {
    position: absolute;
    right: 0;
    font-size: 13px;
    color: #7d8aa3;
    text-decoration: none;
}
.tsg-section-title .tsg-more:hover { color: var(--tsg-accent, #1f5faa); }

/* ── 重点关注两栏 ───────────────────────────────────────────── */
.tsg-focus {
    display: flex;
    gap: 26px;
    margin-top: 30px;
}
.tsg-focus-col {
    flex: 1;
    min-width: 0;
}
.tsg-focus-col .headline { margin-bottom: 8px; }

/* ── 数字资源导航卡 ─────────────────────────────────────────── */
.tsg-digital {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.tsg-digital-card {
    display: block;
    border-radius: 8px;
    padding: 22px 20px;
    color: #fff;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.tsg-digital-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(22, 48, 92, .25);
}
.tsg-digital-card h3 { margin: 0 0 8px; font-size: 19px; }
.tsg-digital-card p { margin: 0; font-size: 13px; opacity: .85; }
.tsg-digital-card.is-blue   { background-color: #1f5faa; }
.tsg-digital-card.is-orange { background-color: #d97e2b; }
.tsg-digital-card.is-green  { background-color: #2b8a6b; }
.tsg-digital-card.is-purple { background-color: #6a5aa8; }

/* ── 图书推荐封面卡 ─────────────────────────────────────────── */
.tsg-books {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.tsg-book {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.tsg-book-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background-color: #eef2f8;
    margin-bottom: 8px;
}
.tsg-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tsg-book-blank {
    color: #9aa9c2;
    font-size: 14px;
    letter-spacing: 2px;
}
.tsg-book:hover .tsg-book-title { color: var(--tsg-accent, #1f5faa); }
.tsg-book-title {
    font-size: 14px;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}
.tsg-book-author {
    font-size: 12px;
    color: #8a97ad;
    margin-top: 2px;
}

/* ── 服务指南 ───────────────────────────────────────────────── */
.tsg-guide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 26px;
    border: 1px solid #e3e9f2;
    border-radius: 8px;
    padding: 16px 20px;
    background-color: #fbfcfe;
}
.tsg-guide-item {
    text-decoration: none;
    color: #3a4a63;
    font-size: 14px;
    line-height: 34px;
    border-bottom: 1px dashed #e6ecf5;
}
.tsg-guide-item svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #b9c6da;
    stroke-width: 2;
    stroke-linecap: round;
    margin-right: 8px;
    flex: none;
}
.tsg-guide-item:hover { color: var(--tsg-accent, #1f5faa); }
.tsg-guide-item:hover svg { stroke: var(--tsg-accent, #1f5faa); }

/* ── 大数据看板（模拟数据） ─────────────────────────────────── */
.tsg-stats {
    margin: 40px auto 0;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(63, 121, 199, .35), transparent 60%),
        linear-gradient(180deg, #0d1f3c 0%, #12294d 100%);
    border-radius: 10px;
    padding: 30px 26px 34px;
}
.tsg-section-title.is-light h2 { color: #fff; }
.tsg-section-title.is-light .tsg-section-line { background-color: #3f79c7; }
.tsg-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    text-align: center;
}
.tsg-stat b {
    display: block;
    font-size: 28px;
    color: #6fb1ff;
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 1px;
}
.tsg-stat span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #9db4d6;
}

/* ── 响应式 ─────────────────────────────────────────────────── */
@media (max-width: 981px) {
    .tsg-topbar .tsg-header-inner { padding: 0 16px; }
    .tsg-v2 .tsg-hero { position: static; pointer-events: auto; margin: 12px 16px 0; }
    .tsg-v2 .tsg-hero-main { width: 100%; }
    .tsg-focus { flex-direction: column; }
    .tsg-digital { grid-template-columns: repeat(2, 1fr); }
    .tsg-books { grid-template-columns: repeat(3, 1fr); }
    .tsg-guide { grid-template-columns: 1fr; }
    .tsg-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; }
    .tsg-quickbar .tsg-header-inner { justify-content: flex-start; gap: 2px; }
    .tsg-quickbar a { min-width: 25%; }
}
@media (max-width: 480px) {
    .tsg-books { grid-template-columns: repeat(2, 1fr); }
    .tsg-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .tsg-digital { grid-template-columns: 1fr; }
}

/* 修复：老 CSS 的 .scroll 是 float:left（宽度 100% 时看不出，但 B 版板块排在它
   后面会被环绕挤成竖条），B 版区块全部清浮动。 */
.tsg-v2 .tsg-section,
.tsg-v2 .tsg-focus,
.tsg-v2 .tsg-stats,
.tsg-v2 .tsg-contact-bar,
.tsg-v2 .news {
    clear: both;
}

/* 修复 banner 被检索框遮挡（2026-09-18 发布后反馈）：
   老 CSS .list_banner 高度 300px（内页横幅尺寸），原图 1920x600，
   检索浮层 ~180px 盖掉大半。首页 banner 提到 520px，浮层只占下部。 */
.tsg-v2 .tsg-banner-wrap .list_banner {
    height: 520px;
}
.tsg-v2 .tsg-banner-wrap .list_banner img {
    min-height: 520px;
}
.tsg-v2 .tsg-hero {
    bottom: 48px;
}
@media (max-width: 981px) {
    .tsg-v2 .tsg-banner-wrap .list_banner,
    .tsg-v2 .tsg-banner-wrap .list_banner img {
        min-height: 0;
        height: 300px;
    }
}

/* 修复(2026-09-18)：栏目标题与 MORE>> 不同行（.span-first 是 div 块级，把右浮动的
   .span-three 挤到第二行；其余 13 个站同步修了各自家族的 new_file.css） */
.tsg-v2 .headline .span-first { display: inline-block; line-height: 34px; }

/* 检索浮层改半透明（2026-09-18 用户反馈"banner 被遮住"）：
   .72 太实盖住轮播图，降到 .42 让 banner 透出，模糊同步减轻。 */
.tsg-v2 .tsg-hero-main {
    background-color: rgba(16, 34, 64, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 去掉 A 版检索区的通栏渐变底（2026-09-18 用户确认）：桌面端浮层直接叠 banner，
   只留半透明面板；手机端检索区不叠图，渐变底保留。 */
.tsg-v2 .tsg-hero {
    background-image: none;
    box-shadow: none;
    border-radius: 0;
}
.tsg-v2 .tsg-hero::after {
    display: none;
}
@media (max-width: 981px) {
    .tsg-v2 .tsg-hero {
        background-image: linear-gradient(118deg, #005ABB 0%, #0072D2 58%, #2F99D0 100%);
        border-radius: var(--tsg-radius);
        overflow: hidden;
        box-shadow: var(--tsg-shadow);
    }
    .tsg-v2 .tsg-hero::after { display: block; }
}

/* 板块头重设计（2026-09-18 用户反馈"居中+黄线"太丑）：
   左侧蓝色竖条 + 左对齐标题 + 通栏细分隔线 + 右侧"更多"，深色看板内用浅色同构版。 */
.tsg-v2 .tsg-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.tsg-v2 .tsg-section-title::before {
    content: "";
    flex: none;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background-color: var(--tsg-accent, #1f5faa);
}
.tsg-v2 .tsg-section-title h2 {
    margin: 0;
    font-size: 21px;
    letter-spacing: 1px;
    color: #16305c;
}
.tsg-v2 .tsg-section-title .tsg-section-line {
    flex: 1;
    height: 1px;
    background-color: #e3e9f2;
}
.tsg-v2 .tsg-section-title .tsg-more {
    position: static;
    flex: none;
    font-size: 13px;
    color: #8a97ad;
}
.tsg-v2 .tsg-section-title .tsg-more:hover {
    color: var(--tsg-accent, #1f5faa);
}
/* 大数据深色看板：同构浅色版 */
.tsg-v2 .tsg-section-title.is-light::before { background-color: #3f79c7; }
.tsg-v2 .tsg-section-title.is-light h2 { color: #fff; }
.tsg-v2 .tsg-section-title.is-light .tsg-section-line { background-color: rgba(255, 255, 255, .18); }

/* 2026-09-18 用户反馈：
   1) 去掉导航与 banner 之间 15px 间隙（老 CSS .content { margin-top:15px }）；
   2) 板块区间距加大（34px → 56px），数字资源与上一个分区贴太近。 */
.tsg-v2.content { margin-top: 0; }
.tsg-v2 .tsg-section { margin-top: 56px; }

/* 2026-09-18 用户反馈：只有数字资源挤——新馆风采(.news)内部 .scroll 是 float:left，
   父容器高度塌陷、图片溢出压住下方间距。clearfix 让父容器包住浮动图片。 */
.tsg-v2 .news::after {
    content: "";
    display: block;
    clear: both;
}

/* 2026-09-18 根因修复（用户反馈"上方框框压下来了"）：.scroll 是 100% 宽的白色
   卡片（白底+阴影），float:left + 下一板块 clear:both 会吞掉下一板块的
   margin-top，卡片底边直接贴住"数字资源"标题；上一轮加 padding-bottom 只是
   把卡片内部撑高，白框反而压得更低。宽度本就 100%，浮动无意义，改正常流让
   margin 正常生效。 */
.tsg-v2 .scroll {
    float: none;
}

/* 2026-09-18 用户反馈：阅读页"上一篇/下一篇"与正文之间太挤（实测间距为 0，
   只剩 .paging-box 自带 1px 分隔线）。补正文与翻页区之间的留白。 */
.tsg-v2 .paging-box {
    margin-top: 36px;
    padding-top: 18px;
}