﻿/* ============================================================
   nlsh360 主题皮肤（Default 主题专属，独立于其它主题）
   说明：
     1. 本文件仅由 pages_template/Default/_Layout.cshtml 引用，
        不修改共享的 /pages/site/site.css，不影响 TemplateA / V1。
     2. 通过覆盖 :root 品牌变量，把现有 .site-* 体系重映射为蓝调，
        仅在本主题加载时生效。
     3. 首页各区块使用 .nlsh-* 命名空间，自包含、零外部依赖。
   ============================================================ */

:root {
    /* 品牌色：nlsh360 蓝 + 深蓝渐变 */
    --nlsh-brand: #008fcd;
    --nlsh-brand-2: #0b6fb8;
    --nlsh-deep: #0c2e6b;
    --nlsh-deep-2: #17449e;
    --nlsh-ink: #16233a;
    --nlsh-ink-soft: #5a6b82;
    --nlsh-line: #e6edf5;
    --nlsh-bg: #ffffff;
    --nlsh-bg-soft: #f3f8fc;
    --nlsh-radius: 6px;
    --nlsh-radius-sm: 4px;
    --nlsh-shadow: 0 10px 30px rgba(12, 46, 107, 0.08);
    --nlsh-shadow-hover: 0 18px 48px rgba(12, 46, 107, 0.16);
    --nlsh-container: 1300px;
    --nlsh-gradient: linear-gradient(120deg, #0C447C 0%, #185FA5 55%, #2E7FC0 100%);
    --nlsh-gradient-soft: linear-gradient(180deg, #f3f8fc 0%, #ffffff 100%);
}

/* 重映射共享 .site-* 体系的品牌色（仅 Default 主题加载本文件时生效） */
:root {
    --brand: var(--nlsh-brand);
    --brand-soft: #e8f4fb;
    --dark: var(--nlsh-deep);
    --ink: var(--nlsh-ink);
    --line: var(--nlsh-line);
    --bg-soft: var(--nlsh-bg-soft);
    --shadow: var(--nlsh-shadow);
    --shadow-hover: var(--nlsh-shadow-hover);
    --radius: var(--nlsh-radius);
    --container: var(--nlsh-container);
}

/* ---------- 头部导航：蓝调大气（桌面端精修，仅覆盖，不动 site.css） ---------- */
.site-body .site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cf-line);
    box-shadow: 0 1px 0 rgba(12, 46, 107, 0.04), 0 10px 30px rgba(12, 46, 107, 0.06);
}

    .site-body .site-header.is-scrolled {
        box-shadow: 0 1px 0 rgba(12, 46, 107, 0.05), 0 14px 36px rgba(12, 46, 107, 0.12);
    }

.site-body .site-header__inner {
    gap: 36px;
    height: 92px;
}

.site-body .site-logo {
    gap: 12px;
}

.site-body .site-logo__mark {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--nlsh-gradient);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 143, 205, 0.32);
}

.site-body .site-logo__text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--cf-ink);
}
/* 导航菜单：更舒展间距，营造“大气” */
.site-body .site-nav {
    gap: 2px;
}

.site-body .site-nav__link {
    position: relative;
    padding: 12px 18px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--nlsh-ink);
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

    .site-body .site-nav__link::after {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 7px;
        height: 3px;
        border-radius: 3px;
        background: var(--cf-brand);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .site-body .site-nav__link:hover {
        color: var(--cf-brand);
        background: var(--cf-brand-soft);
    }

        .site-body .site-nav__link:hover::after {
            transform: scaleX(0.5);
            opacity: 0.55;
        }

    .site-body .site-nav__link.is-active {
        color: var(--cf-brand);
        font-weight: 600;
    }

        .site-body .site-nav__link.is-active::after {
            transform: scaleX(1);
            opacity: 1;
        }
/* 桌面宽度收窄时导航分级收缩：菜单与右侧搜索栏不重合粘连（≥1025px 桌面域内） */
@media (max-width: 1380px) and (min-width: 1025px) {
    .site-body .site-header__inner {
        gap: 24px;
    }

    .site-body .site-nav__link {
        padding: 12px 15px;
    }

    .site-body .site-search input {
        width: 140px;
    }
}

@media (max-width: 1260px) and (min-width: 1025px) {
    .site-body .site-header__inner {
        gap: 16px;
    }

    .site-body .site-nav__link {
        padding: 12px 11px;
        font-size: 15px;
    }

    .site-body .site-search {
        padding: 0 6px 0 14px;
    }

        .site-body .site-search input {
            width: 116px;
            font-size: 13.5px;
        }
}

@media (max-width: 1170px) and (min-width: 1025px) {
    .site-body .site-header__inner {
        gap: 12px;
    }

    .site-body .site-logo__text {
        font-size: 18px;
    }

    .site-body .site-nav {
        gap: 0;
    }

    .site-body .site-nav__link {
        padding: 11px 9px;
        font-size: 14px;
    }

    .site-body .site-search {
        padding: 0 5px 0 12px;
    }

        .site-body .site-search input {
            width: 84px;
            font-size: 13px;
        }
}

@media (max-width: 1080px) and (min-width: 1025px) {
    .site-body .site-header__inner {
        gap: 8px;
    }

    .site-body .site-logo__text {
        font-size: 16px;
    }

    .site-body .site-nav__link {
        padding: 10px 7px;
        font-size: 13px;
    }

        .site-body .site-nav__link::after {
            left: 7px;
            right: 7px;
        }

    .site-body .site-search {
        padding: 0 4px;
    }

        .site-body .site-search input {
            display: none;
        }
}
/* 头部迷你搜索：与全站胶囊语言统一，精致不廉价 */
.site-body .site-search {
    height: 46px;
    padding: 0 7px 0 20px;
    gap: 6px;
    border: 1px solid var(--cf-line);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(12, 46, 107, 0.09);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .site-body .site-search:focus-within {
        border-color: var(--cf-brand);
        box-shadow: 0 4px 16px rgba(24, 95, 165, 0.14);
    }

    .site-body .site-search input {
        width: 120px;
        font-size: 14.5px;
        color: var(--cf-ink);
    }

        .site-body .site-search input::placeholder {
            color: var(--cf-sub);
        }

    .site-body .site-search button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--cf-brand);
        color: #fff;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .site-body .site-search button:hover {
            background: var(--cf-brand-strong);
            color: #fff;
            transform: translateY(-1px);
        }
/* 下拉菜单：精致卡片 */
.site-body .site-nav__menu {
    min-width: 184px;
    padding: 8px;
    border: 1px solid var(--cf-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(12, 46, 107, 0.16);
}

.site-body .site-nav__menu-link {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14.5px;
    color: var(--nlsh-ink-soft);
    transition: color 0.16s ease, background 0.16s ease;
}

    .site-body .site-nav__menu-link:hover {
        color: var(--cf-brand);
        background: var(--cf-brand-soft);
    }

/* ---------- 页脚：深蓝底，高端质感 ---------- */
.site-footer {
    background: var(--nlsh-deep);
    background-image: radial-gradient(1200px 400px at 80% -10%, rgba(0, 143, 205, 0.35), transparent 60%), radial-gradient(900px 400px at 0% 120%, rgba(23, 68, 158, 0.4), transparent 60%);
    color: #c9d6ea;
}

.site-footer__logo {
    color: #fff;
}

.site-footer__title {
    color: #fff;
}

.site-footer__desc {
    color: #aebfd8;
}

.site-footer__contact li {
    color: #c9d6ea;
}

.site-footer__links a {
    color: #c9d6ea;
}

    .site-footer__links a:hover {
        color: #fff;
    }

.site-footer__bar {
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #9fb1cd;
}

    .site-footer__bar a {
        color: #9fb1cd;
    }

        .site-footer__bar a:hover {
            color: #fff;
        }

.site-footer__icp {
    color: #9fb1cd;
}

/* ============================================================
   首页区块（.nlsh-* 命名空间，自包含）
   ============================================================ */

/* ---------- 首屏轮播 ---------- */
.site-body .nlsh-hero {
    position: relative;
    width: 100%;
}

.site-body .nlsh-hero__swiper {
    width: 100%;
    height: clamp(420px, 56vh, 640px);
}

.site-body .nlsh-hero__slide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .site-body .nlsh-hero__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.04);
        transition: transform 6s ease;
    }
/* 无 JS / 无轮播时的静态兜底幻灯片（深蓝渐变，与轮播视觉一致） */
.site-body .nlsh-hero__slide--empty {
    background: var(--nlsh-gradient);
    background-image: radial-gradient(1000px 500px at 85% 10%, rgba(0, 143, 205, 0.55), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(23, 68, 158, 0.6), transparent 60%);
}

.site-body .nlsh-hero__swiper .swiper-slide-active .nlsh-hero__slide img {
    transform: scale(1);
}
/* 用户要求：固定图片显示原图，不压渐变蒙层（2026-10-25） */
.site-body .nlsh-hero__slide::after {
    content: none;
}

.site-body .nlsh-hero__caption {
    position: absolute;
    z-index: 2;
    left: max(24px, calc((100% - var(--nlsh-container)) / 2 + 24px));
    bottom: 16%;
    max-width: 640px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}

    .site-body .nlsh-hero__caption h2 {
        font-size: clamp(28px, 4vw, 52px);
        font-weight: 800;
        line-height: 1.15;
        margin: 0 0 14px;
        letter-spacing: 1px;
        /* 超长标题截断，避免撑破首屏 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .site-body .nlsh-hero__caption p {
        font-size: clamp(15px, 1.4vw, 19px);
        margin: 0 0 22px;
        opacity: 0.92;
        font-weight: 400;
    }

.site-body .nlsh-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: 3px;
    background: #fff;
    color: var(--nlsh-deep);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .site-body .nlsh-hero__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
        color: var(--nlsh-deep);
    }

.site-body .nlsh-hero__cta--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

/* 轮播控件配色 */
.site-body .nlsh-hero__swiper .swiper-button-prev,
.site-body .nlsh-hero__swiper .swiper-button-next {
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

    .site-body .nlsh-hero__swiper .swiper-button-prev:hover,
    .site-body .nlsh-hero__swiper .swiper-button-next:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .site-body .nlsh-hero__swiper .swiper-button-prev::after,
    .site-body .nlsh-hero__swiper .swiper-button-next::after {
        font-size: 18px;
        font-weight: 700;
    }

.site-body .nlsh-hero__swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.55;
}

.site-body .nlsh-hero__swiper .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
    width: 26px;
    border-radius: 6px;
}

/* 无轮播时的静态首屏 */
.site-body .nlsh-hero--static {
    height: clamp(420px, 56vh, 640px);
    display: flex;
    align-items: center;
    background: var(--nlsh-gradient);
    background-image: radial-gradient(1000px 500px at 85% 10%, rgba(0, 143, 205, 0.55), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(23, 68, 158, 0.6), transparent 60%);
    color: #fff;
}

    .site-body .nlsh-hero--static .nlsh-hero__caption {
        position: static;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center;
    }

/* ---------- 通用区块 ---------- */
.site-body .nlsh-section {
    padding: clamp(56px, 7vw, 96px) 0;
}

.site-body .nlsh-section--soft {
    background: var(--nlsh-bg-soft);
}

.site-body .nlsh-container {
    width: min(100% - 48px, var(--nlsh-container));
    margin: 0 auto;
}

.site-body .nlsh-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 德语比中/英长 25~35%：左侧标题 + 右侧「Mehr anzeigen」按钮在 390 视口下会撑破容器
       （按钮是 flex:none 不收缩，标题是长单词也断不开）。允许换行后按钮掉到下一行，
       中文/英文宽度够，永远不触发，视觉零变化。 */
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.site-body .nlsh-sec-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nlsh-brand);
    margin-bottom: 10px;
}

.site-body .nlsh-sec-title {
    position: relative;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--nlsh-ink);
    margin: 0;
    padding-left: 18px;
    line-height: 1.2;
}

    .site-body .nlsh-sec-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8%;
        bottom: 8%;
        width: 6px;
        border-radius: 6px;
        background: var(--nlsh-gradient);
    }

.site-body .nlsh-sec-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cf-brand);
    text-decoration: none;
    padding: 10px 22px;
    border: 1px solid rgba(24, 95, 165, 0.28);
    border-radius: 3px;
    background: #fff;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

    .site-body .nlsh-sec-more:hover {
        background: var(--cf-brand);
        color: #fff;
        border-color: var(--cf-brand);
        box-shadow: 0 8px 20px rgba(24, 95, 165, 0.28);
        transform: translateY(-1px);
    }

/* ---------- 产品网格 ---------- */
.site-body .nlsh-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.site-body .nlsh-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--nlsh-shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

    .site-body .nlsh-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--nlsh-shadow-hover);
        border-color: rgba(0, 143, 205, 0.4);
    }

.site-body .nlsh-card__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-card__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.site-body .nlsh-card:hover .nlsh-card__cover img {
    transform: scale(1.08);
}
/* 视频卡片播放角标（所有视频统一跳同一地址，仅作视觉提示） */
.site-body .nlsh-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--nlsh-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.site-body .nlsh-card:hover .nlsh-card__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.site-body .nlsh-card__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.site-body .nlsh-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--nlsh-ink);
    margin: 0;
    line-height: 1.4;
    /* 超长标题截断 + 兜底换行，任意字数不撑破卡片 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-height: 2.8em;
}

.site-body .nlsh-card__desc {
    font-size: 13px;
    color: var(--nlsh-ink-soft);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.site-body .nlsh-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-body .nlsh-card__price {
    font-size: 18px;
    font-weight: 800;
    color: #c8331f;
}

.site-body .nlsh-card__tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--nlsh-brand);
    background: var(--brand-soft);
    padding: 3px 10px;
    border-radius: 3px;
}

/* ---------- 公司简介 ---------- */
.site-body .nlsh-about {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.site-body .nlsh-about__media {
    position: relative;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    box-shadow: var(--nlsh-shadow);
    aspect-ratio: 4 / 3;
}

    .site-body .nlsh-about__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .site-body .nlsh-about__media::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 6px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--nlsh-radius);
        pointer-events: none;
    }

.site-body .nlsh-about__body .nlsh-sec-title {
    margin-bottom: 18px;
}

.site-body .nlsh-about__body p {
    color: var(--nlsh-ink-soft);
    line-height: 1.9;
    font-size: 15px;
}
/* 公司简介为后台富文本（运营自行编辑），其中的图片必须自适应、不溢出、不变形 */
.site-body .nlsh-about__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nlsh-radius-sm);
    margin: 14px 0;
    box-shadow: var(--nlsh-shadow);
}

.site-body .nlsh-about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--nlsh-line);
}

.site-body .nlsh-stat__num {
    font-size: 30px;
    font-weight: 800;
    color: var(--nlsh-brand);
    line-height: 1;
}

.site-body .nlsh-stat__label {
    font-size: 13px;
    color: var(--nlsh-ink-soft);
    margin-top: 6px;
}

/* ---------- 应用场景 ---------- */
.site-body .nlsh-scene-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.site-body .nlsh-scene {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--nlsh-shadow);
}

    .site-body .nlsh-scene img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .site-body .nlsh-scene:hover img {
        transform: scale(1.08);
    }
    /* 用户要求：固定图片显示原图，不压渐变蒙层（2026-10-25） */
    .site-body .nlsh-scene::after {
        content: none;
    }

    .site-body .nlsh-scene span {
        position: absolute;
        z-index: 2;
        left: 18px;
        bottom: 16px;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.9);
    }

/* ---------- 博客（首页板块）：3 列编辑式卡片，图在上、文在下 ----------
   与产品卡刻意做得不一样：产品是「4:3 白盒 + 阴影」的商品格，博客去掉卡片容器，
   只留图片 + 文字，更像杂志版面 —— 首页连续出现两种相似的盒子会显得很平。
   数据与显隐由 home.js 的 renderBlogs() 负责：没有 blog 内容时整个 section 不显示。 */
.site-body .nlsh-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 30px;
}

.site-body .nlsh-blog {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.site-body .nlsh-blog__media {
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-blog__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.site-body .nlsh-blog:hover .nlsh-blog__media img {
    transform: scale(1.05);
}
/* 无封面不留白框：渐变底 + BLOG 字样，与栏目页 bl-card__media--empty 同一套观感 */
.site-body .nlsh-blog__media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef6fc 0%, #d9e9f7 100%);
    color: rgba(0, 143, 205, 0.55);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.site-body .nlsh-blog__title {
    margin: 0;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--nlsh-ink);
    transition: color 0.18s ease;
    /* 两行截断：标题长短不一时，不截断会把三张卡的作者行挤到不同高度 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-body .nlsh-blog:hover .nlsh-blog__title {
    color: var(--nlsh-brand);
}

.site-body .nlsh-blog__ex {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--nlsh-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-body .nlsh-blog__meta {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    color: #8b9aab;
}

/* 只有 2 篇时让两张卡各占一半：固定 3 列会在右侧留一个整格空白，视觉上像「掉了一张」。
   放在 min-width 里，手机端仍按 860/560 断点堆叠，不被覆盖。 */
@media (min-width: 861px) {
    .site-body .nlsh-blog-grid.is-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- 新闻动态：1 篇头条大卡 + 右侧紧凑列表（杂志式，层次感强） ---------- */
.site-body .nlsh-news {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    align-items: stretch;
}
/* 头条大卡 */
.site-body .nlsh-news__feature a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--nlsh-ink);
    transition: transform 0.25s var(--nlsh-ease), box-shadow 0.25s var(--nlsh-ease);
}

    .site-body .nlsh-news__feature a:hover {
        transform: translateY(-4px);
        box-shadow: var(--nlsh-shadow-hover);
    }

.site-body .nlsh-news__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--nlsh-bg-soft);
    overflow: hidden;
}

    .site-body .nlsh-news__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.site-body .nlsh-news__feature a:hover .nlsh-news__media img {
    transform: scale(1.05);
}

.site-body .nlsh-news__media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nlsh-gradient);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 6px;
}

.site-body .nlsh-news__feature-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px 24px;
}

.site-body .nlsh-news__flag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 3px;
    background: var(--cf-brand-soft);
    color: var(--cf-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.site-body .nlsh-news__feature-title {
    margin: 14px 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.site-body .nlsh-news__feature a:hover .nlsh-news__feature-title {
    color: var(--cf-brand);
}

.site-body .nlsh-news__feature-desc {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--nlsh-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.site-body .nlsh-news__feature-meta {
    margin-top: auto;
    padding-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cf-brand);
}
/* 右侧紧凑列表卡 */
.site-body .nlsh-news__side {
    background: #fff;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    padding: 6px 22px;
}

    .site-body .nlsh-news__side ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .site-body .nlsh-news__side li {
        flex: 1 1 auto;
        display: flex;
        border-bottom: 1px solid var(--nlsh-line);
    }

        .site-body .nlsh-news__side li:last-child {
            border-bottom: 0;
        }

    .site-body .nlsh-news__side a {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 15px 0;
        text-decoration: none;
        color: var(--nlsh-ink);
    }

.site-body .nlsh-news__date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 6px;
    background: var(--nlsh-bg-soft);
    font-weight: 800;
    color: var(--cf-brand);
    line-height: 1.15;
}

    .site-body .nlsh-news__date b {
        font-size: 20px;
    }

    .site-body .nlsh-news__date small {
        font-size: 11.5px;
        color: var(--nlsh-ink-soft);
        font-weight: 600;
    }

.site-body .nlsh-news__title {
    flex: 1;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.site-body .nlsh-news__side a:hover .nlsh-news__title {
    color: var(--cf-brand);
}

.site-body .nlsh-news__arrow {
    flex: none;
    font-size: 18px;
    color: var(--nlsh-line);
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-body .nlsh-news__side a:hover .nlsh-news__arrow {
    color: var(--cf-brand);
    transform: translateX(3px);
}

@media (max-width: 860px) {
    .site-body .nlsh-news {
        gap: 18px;
    }

    .site-body .nlsh-news__feature-body {
        padding: 18px 18px 20px;
    }

    .site-body .nlsh-news__feature-title {
        font-size: 18px;
    }

    .site-body .nlsh-news__side {
        padding: 4px 16px;
    }
}

/* ---------- 数据为空时的占位 ---------- */
.site-body .nlsh-empty {
    text-align: center;
    color: var(--nlsh-ink-soft);
    padding: 40px 0;
    font-size: 15px;
}

/* ---------- 响应 ---------- */
@media (max-width: 1080px) {
    .site-body .nlsh-prod-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-body .nlsh-scene-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .site-body .nlsh-about {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-prod-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-body .nlsh-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 22px;
    }

    .site-body .nlsh-news {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-hero__caption {
        left: 24px;
        right: 24px;
    }
}

@media (max-width: 560px) {
    .site-body .nlsh-prod-grid {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-blog-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .site-body .nlsh-scene-grid {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-about__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .site-body .nlsh-stat__num {
        font-size: 22px;
    }
}

/* ---------- 站点信息（Logo 图 / 二维码图，适配不同尺寸不拉伸，资源独立不影响其它主题） ---------- */
.site-body .site-logo__img {
    height: 52px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.site-footer__qr-box img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* ===== WORKBUDDYAI_UPDATE_B [SITE] [2026-10-24 链接配色兜底 + 无图封面占位] ===== */
/* 坑：共享的 site.css 里有 `.site-body a { color: inherit }`（特异度 0,1,1），
   会盖掉本文件里用「单个类名」（0,1,0）写的链接配色 —— 首屏「了解更多」按钮因此变成
   白字白底（背景 #fff + 文字继承 caption 的 #fff）几乎看不见。
   解决：给这些链接选择器补一个父级类，把特异度提到 0,2,0。 */
.site-body .nlsh-hero__cta {
    color: var(--nlsh-deep);
}

    .site-body .nlsh-hero__cta:hover {
        color: var(--nlsh-deep);
    }

.site-body .nlsh-hero__cta--ghost {
    color: #fff;
}

/* 运营没上传封面时，卡片封面占位要有「这是图位」的观感，而不是一块白板 */
.site-body .nlsh-card__cover:not(:has(img))::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 143, 205, 0.06) 0%, rgba(12, 46, 107, 0.04) 100%), repeating-linear-gradient(45deg, rgba(12, 46, 107, 0.05) 0 8px, transparent 8px 16px);
}

.site-body .nlsh-card__cover:not(:has(img))::before {
    content: "暂无封面";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-size: 13px;
    color: var(--nlsh-ink-soft);
    letter-spacing: 1px;
}
/* ===== WORKBUDDYAI_UPDATE_E [SITE] ===== */


/* ============================================================
   栏目详情页（Product / News / Gallery / Video / Download / Topic）
   说明：
     1. 这六套详情模板都复用 cms-front.css 里的 cf-* 语义类（正文、价格、附件、评论、面包屑），
        本文件只补「蓝调版式骨架」：两栏产品页、正文 + 侧栏新闻页、图集网格、视频舞台、下载列表、专题头图；
     2. 所有链接的文字颜色都带 .site-body 前缀 —— site.css 里有 `.site-body a { color: inherit }`，
        特异度比单个类高，不前缀会被它吃掉（按钮变白字白底，教训已在首页 CTA 上踩过一次）；
     3. 图片一律 object-fit，容器给定宽高比，保证任何尺寸的素材都不会把版式撑变形。
   ============================================================ */

.site-body .nlsh-detail {
    /* 2026-10-25 用户反馈：不要收窄居中，恢复容器通栏 */
    padding-top: clamp(18px, 3vw, 30px);
    padding-bottom: clamp(56px, 7vw, 92px);
}

    .site-body .nlsh-detail .cf-crumbs-row {
        margin: 0 0 16px;
    }

/* ---------- 通用标题区 ---------- */
.site-body .nlsh-detail__head {
    margin: 0 0 24px;
}

.site-body .nlsh-detail__title {
    margin: 12px 0 0;
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.26;
    font-weight: 800;
    color: var(--nlsh-ink);
    letter-spacing: -0.2px;
}

.site-body .nlsh-detail__sub {
    margin: 10px 0 0;
    font-size: clamp(14.5px, 1.4vw, 17px);
    line-height: 1.7;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.site-body .nlsh-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nlsh-brand);
    background: rgba(0, 143, 205, 0.1);
}

.site-body .nlsh-chip--ghost {
    color: var(--nlsh-ink-soft);
    background: var(--nlsh-bg-soft);
}

.site-body .nlsh-detail__lead {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-left: 4px solid var(--nlsh-brand);
    border-radius: 0 var(--nlsh-radius-sm) var(--nlsh-radius-sm) 0;
    background: var(--nlsh-bg-soft);
    font-size: 16px;
    line-height: 1.85;
    color: #33455e;
}

/* ---------- 产品详情：左图右信息 ---------- */
.site-body .nlsh-detail__top {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
}

.site-body .nlsh-detail__media {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    background: #fff;
    box-shadow: var(--nlsh-shadow);
}

    .site-body .nlsh-detail__media .cf-gallery {
        margin: 0;
    }

.site-body .nlsh-detail__cover {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--nlsh-radius-sm);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-detail__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.site-body .nlsh-detail__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--nlsh-ink-soft);
    background: linear-gradient(135deg, rgba(0, 143, 205, 0.06), rgba(12, 46, 107, 0.04)), repeating-linear-gradient(45deg, rgba(12, 46, 107, 0.05) 0 8px, transparent 8px 16px);
}

.site-body .nlsh-detail__info {
    min-width: 0;
}

.site-body .nlsh-detail__price {
    margin: 22px 0 0;
    padding: 16px 20px;
    border: 1px solid #ffe1e1;
    border-radius: var(--nlsh-radius-sm);
    background: linear-gradient(120deg, #fff7f7, #ffffff);
}

.site-body .nlsh-detail__unit {
    font-size: 14px;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-detail__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 18px 0 0;
    padding: 14px 18px;
    border-radius: var(--nlsh-radius-sm);
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-detail__facts div {
        display: flex;
        gap: 8px;
        font-size: 14px;
    }

    .site-body .nlsh-detail__facts dt {
        color: var(--nlsh-ink-soft);
    }

    .site-body .nlsh-detail__facts dd {
        margin: 0;
        font-weight: 600;
        color: var(--nlsh-ink);
    }

.site-body .nlsh-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

.site-body .nlsh-detail__cta {
    color: #fff;
    background: var(--nlsh-gradient);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(11, 111, 184, 0.26);
}

    .site-body .nlsh-detail__cta:hover {
        color: #fff;
        filter: none;
        transform: translateY(-1px);
    }

.site-body .nlsh-detail__body {
    margin-top: clamp(32px, 5vw, 56px);
}

    .site-body .nlsh-detail__body img {
        display: unset !important;
    }
/* ---------- 内容区块（规格 / 扩展字段 / 附件） ---------- */
.site-body .nlsh-block {
    margin: 38px 0 0;
}

.site-body .nlsh-block__title {
    position: relative;
    margin: 0 0 16px;
    padding-left: 14px;
    font-size: 19px;
    font-weight: 800;
    color: var(--nlsh-ink);
}

    .site-body .nlsh-block__title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 4px;
        border-radius: 4px;
        background: var(--nlsh-gradient);
    }

.site-body .nlsh-block__fields {
    margin: 0;
}

.site-body .nlsh-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.site-body .nlsh-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius-sm);
    background: #fff;
    color: var(--nlsh-ink);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .site-body .nlsh-file:hover {
        color: var(--nlsh-ink);
        border-color: var(--nlsh-brand);
        box-shadow: var(--nlsh-shadow);
        transform: translateY(-2px);
    }

.site-body .nlsh-file__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    background: var(--nlsh-gradient);
}

.site-body .nlsh-file__name {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-body .nlsh-file__size {
    flex: none;
    font-size: 12.5px;
    color: var(--nlsh-ink-soft);
}

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-05 附件下载次数] =====
   放在大小后面、用竖线分隔：两者都是「次要信息」，但一个是文件属性、一个是热度，
   混成一句「1.2 MB · 已下载 5 次」在窄屏上会被 name 的省略号挤掉后半句。 */
.site-body .nlsh-file__dl {
    flex: none;
    font-size: 12.5px;
    color: var(--nlsh-ink-soft);
    padding-left: 10px;
    border-left: 1px solid var(--nlsh-line);
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */


/* 详情页里的视频块与图廊不要额外的外边距（父容器已经给了间距） */
.site-body .nlsh-detail .cf-video {
    margin: 0;
}

.site-body .nlsh-video .cf-video__frame {
    box-shadow: 0 14px 34px rgba(12, 46, 107, 0.2);
}

/* ---------- 新闻详情：正文 + 侧栏 ---------- */
.site-body .nlsh-detail__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(26px, 4vw, 48px);
    align-items: start;
}

.site-body .nlsh-article {
    min-width: 0;
}

.site-body .nlsh-article__head {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nlsh-line);
}

.site-body .nlsh-article__badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nlsh-brand);
    background: rgba(0, 143, 205, 0.1);
    text-decoration: none;
}

.site-body .nlsh-article__title {
    margin: 16px 0 0;
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.3;
    font-weight: 800;
    color: var(--nlsh-ink);
}

.site-body .nlsh-article__sub {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-article__cover {
    margin: 26px 0 0;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-article__cover img {
        display: block; /* width: 100%;*/
        height: auto;
        margin: 0 auto;
    }

.site-body .nlsh-article__lead {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-left: 4px solid var(--nlsh-brand);
    border-radius: 0 var(--nlsh-radius-sm) var(--nlsh-radius-sm) 0;
    background: var(--nlsh-bg-soft);
    font-size: 16px;
    line-height: 1.85;
    color: #33455e;
}

.site-body .nlsh-article .cf-prose {
    margin-top: 24px;
}

.site-body .nlsh-aside {
    /* 侧栏从「2 张卡」变成「4 张卡」后总高度超过一屏。
       原来用 sticky + 自身滚动，实际体验很差：滚动条不显眼，鼠标不在侧栏上滚不动，
       底部内容看起来像被砍断。改成普通流式布局 —— 侧栏跟着页面滚，一块都不会漏。 */
    position: static;
    display: grid;
    gap: 20px;
}

/* ---------- 侧栏：相关栏目 ---------- */
.site-body .nlsh-aside__cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

    .site-body .nlsh-aside__cats a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 12px;
        border: 1px solid var(--nlsh-line);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        font-weight: 600;
        color: var(--nlsh-ink);
        text-decoration: none;
        transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .site-body .nlsh-aside__cats a:hover {
            border-color: var(--nlsh-brand);
            color: var(--nlsh-brand);
            transform: translateX(2px);
        }

    .site-body .nlsh-aside__cats em {
        flex: none;
        padding: 1px 8px;
        border-radius: 3px;
        font-style: normal;
        font-size: 12px;
        font-weight: 600;
        color: var(--nlsh-ink-soft);
        background: var(--nlsh-bg-soft);
    }

/* ---------- 侧栏：推荐内容 ---------- */
.site-body .nlsh-aside__posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

    .site-body .nlsh-aside__posts a {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        color: var(--nlsh-ink);
        text-decoration: none;
    }

/* 缩略图固定 72×54：不同尺寸的封面都裁成同一块，列表才不会参差不齐 */
.site-body .nlsh-aside__thumb {
    flex: none;
    display: block;
    width: 72px;
    height: 54px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--nlsh-bg-soft);
}

.site-body .nlsh-aside__thumb--empty {
    background: repeating-linear-gradient(45deg, rgba(12, 46, 107, 0.06) 0 6px, transparent 6px 12px), var(--nlsh-bg-soft);
}

.site-body .nlsh-aside__post-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

    .site-body .nlsh-aside__post-body strong {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        /* 两行截断：标题长短不一时列表高度才稳定 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s ease;
    }

.site-body .nlsh-aside__posts a:hover strong {
    color: var(--nlsh-brand);
}

.site-body .nlsh-aside__post-body em {
    font-style: normal;
    font-size: 12px;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-aside__card {
    padding: 22px 22px 24px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    background: linear-gradient(160deg, #f3f8fc 0%, #ffffff 70%);
    box-shadow: var(--nlsh-shadow);
}

.site-body .nlsh-aside__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--nlsh-ink);
}

.site-body .nlsh-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

    .site-body .nlsh-aside__list li {
        display: grid;
        gap: 6px;
    }

    .site-body .nlsh-aside__list span {
        font-size: 12.5px;
        color: var(--nlsh-ink-soft);
    }

    .site-body .nlsh-aside__list strong {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--nlsh-ink);
    }

.site-body .nlsh-aside__cta {
    display: block;
    margin-top: 18px;
    text-align: center;
    color: #fff;
    background: var(--nlsh-gradient);
    border-color: transparent;
}

    .site-body .nlsh-aside__cta:hover {
        color: #fff;
        filter: none;
    }

.site-body .nlsh-aside__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nlsh-ink-soft);
    text-decoration: none;
}

    .site-body .nlsh-aside__back:hover {
        color: var(--nlsh-brand);
    }

/* ---------- 图集详情：大图网格（点击由 site.js 灯箱接管） ---------- */
.site-body .nlsh-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 26px 0 0;
}

.site-body .nlsh-gallery-grid__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--nlsh-radius-sm);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-gallery-grid__item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .site-body .nlsh-gallery-grid__item:hover img {
        transform: scale(1.05);
    }

/* 只有一张图：占满一整行但限宽，避免孤零零的小方块 */
.site-body .nlsh-gallery-grid--single {
    grid-template-columns: minmax(0, 860px);
}

.site-body .nlsh-gallery-grid__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 14px 12px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(transparent, rgba(12, 46, 107, 0.78));
}

/* ---------- 视频详情：播放舞台 ---------- */
/* 限宽居中：产品详情正文里视频不再拉满整行（2026-10-25 用户要求不要过于宽大） */
.site-body .nlsh-video-stage {
    margin: 4px 0 28px;
}
/* 2026-10-25 用户要求视频不要居中：恢复通栏，撤销 760 限宽 */

.site-body .nlsh-video-stage__cover {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    background: #0b1220;
}

    .site-body .nlsh-video-stage__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
    }

    .site-body .nlsh-video-stage__cover figcaption {
        position: absolute;
        inset: auto 0 0 0;
        padding: 44px 20px 16px;
        font-size: 13.5px;
        color: #fff;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
    }

.site-body .nlsh-video-stage__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--nlsh-radius);
    background: var(--nlsh-bg-soft);
    font-size: 14px;
    color: var(--nlsh-ink-soft);
}

/* ---------- 资料下载：下载列表 ---------- */
.site-body .nlsh-download {
    margin: 26px 0 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    background: var(--nlsh-gradient-soft);
}

.site-body .nlsh-download__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--nlsh-ink);
}

.site-body .nlsh-download__list {
    display: grid;
    gap: 12px;
}

.site-body .nlsh-download__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius-sm);
    background: #fff;
    color: var(--nlsh-ink);
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(12, 46, 107, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .site-body .nlsh-download__item:hover {
        color: var(--nlsh-ink);
        border-color: var(--nlsh-brand);
        box-shadow: var(--nlsh-shadow-hover);
        transform: translateY(-2px);
    }

.site-body .nlsh-download__ext {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    background: var(--nlsh-gradient);
}

.site-body .nlsh-download__meta {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

    .site-body .nlsh-download__meta strong {
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-body .nlsh-download__meta em {
        font-style: normal;
        font-size: 12.5px;
        color: var(--nlsh-ink-soft);
    }

.site-body .nlsh-download__btn {
    flex: none;
    padding: 8px 18px;
    border-radius: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--nlsh-gradient);
}

/* ---------- 专题详情：头图压标题 ---------- */
.site-body .nlsh-topic-hero {
    position: relative;
    margin: 6px 0 26px;
    min-height: 220px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--nlsh-radius);
    background: var(--nlsh-gradient);
}

.site-body .nlsh-topic-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* 用户要求：固定图片显示原图，不压渐变蒙层（2026-10-25） */
.site-body .nlsh-topic-hero::after {
    content: none;
}

.site-body .nlsh-topic-hero__body {
    position: relative;
    z-index: 1;
    padding: clamp(30px, 5vw, 56px) clamp(22px, 4vw, 48px);
}

.site-body .nlsh-topic-hero__badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.site-body .nlsh-topic-hero__title {
    margin: 14px 0 0;
    font-size: clamp(24px, 3.6vw, 40px);
    line-height: 1.24;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}

.site-body .nlsh-topic-hero__sub {
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.site-body .nlsh-topic-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .site-body .nlsh-detail__top {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-detail__cols {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-aside {
        gap: 14px;
    }

    .site-body .nlsh-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-body .nlsh-detail__media {
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .site-body .nlsh-gallery-grid {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-detail__actions {
        flex-direction: column;
        align-items: stretch;
    }

        .site-body .nlsh-detail__actions .cf-btn {
            text-align: center;
        }

    .site-body .nlsh-files {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-download__item {
        flex-wrap: wrap;
    }

    .site-body .nlsh-download__btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   单页（关于我们 / 联系我们 / 隐私政策 …，模板 Page/Detail）
   说明：
     1. 单页是纯「读」型页面：窄栏 + 大标题 + 正文，不放侧栏也不放评论；
     2. 限宽 840px 是行宽考量，正文每行 60~80 字符最容易读，超过 90 字符
        眼睛回行容易串行（中文单页尤其明显）；
     3. 正文链接要带 .site-body 前缀：site.css 的 `.site-body a { color: inherit }`
        特异度更高，不前缀的话链接和正文同色，等于没有链接。
   ============================================================ */

.site-body .nlsh-detail--page {
    padding-bottom: clamp(48px, 6vw, 88px);
}

.site-body .nlsh-page {
    max-width: 840px;
    margin: 0 auto;
}

.site-body .nlsh-page__head {
    padding: 0 0 22px;
    border-bottom: 1px solid var(--nlsh-line);
}

.site-body .nlsh-page__title {
    margin: 10px 0 0;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.24;
    font-weight: 800;
    color: var(--nlsh-ink);
    letter-spacing: -0.2px;
}

.site-body .nlsh-page__sub {
    margin: 12px 0 0;
    font-size: clamp(15px, 1.5vw, 17.5px);
    line-height: 1.7;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-page__cover {
    margin: 28px 0 0;
    border-radius: var(--nlsh-radius);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    /* 封面图给固定宽高比 + cover：运营传任意尺寸都不撑坏版式 */
    .site-body .nlsh-page__cover img {
        display: block;
        width: 100%;
        aspect-ratio: 21 / 9;
        object-fit: cover;
    }

.site-body .nlsh-page__lead {
    margin: 26px 0 0;
    padding: 16px 20px;
    border-left: 4px solid var(--nlsh-brand);
    border-radius: 0 var(--nlsh-radius-sm) var(--nlsh-radius-sm) 0;
    background: var(--nlsh-bg-soft);
    font-size: 16px;
    line-height: 1.85;
    color: #33455e;
}

.site-body .nlsh-page__empty {
    margin: 28px 0 0;
    padding: 28px;
    border: 1px dashed var(--nlsh-line);
    border-radius: var(--nlsh-radius-sm);
    text-align: center;
    font-size: 14.5px;
    color: var(--nlsh-ink-soft);
}

/* 正文在单页里可以比列表页更宽松一点 */
.site-body .nlsh-page .cf-prose {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.9;
    color: #33455e;
}

    .site-body .nlsh-page .cf-prose a {
        color: var(--nlsh-brand);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .site-body .nlsh-page .cf-prose a:hover {
            color: var(--nlsh-brand-deep, #0b6fb8);
        }

    .site-body .nlsh-page .cf-prose img {
        max-width: 100%;
        height: auto;
        border-radius: var(--nlsh-radius-sm);
    }

@media (max-width: 600px) {
    .site-body .nlsh-page__cover img {
        aspect-ratio: 16 / 10;
    }

    .site-body .nlsh-page .cf-prose {
        font-size: 15.5px;
    }
}

/* ============================================================
   WORKBUDDYAI_UPDATE_B [SITE] [2026-10-25 CMS 前台 UI 重设计 · 高级扁平版 v2]
   说明：
     1. 主题级覆盖层：nlsh360.css 在 cms-front.css / site.css 之后加载，
        同名规则天然覆盖，底层文件一行不改、其它主题零影响；
     2. 设计语言（用户确认）：高级扁平企业风 —— 品牌亮蓝 #185FA5 +
        深藏青 #042C53，全面去廉价渐变；细边框卡片(1px/16px 圆角)、
        常态无阴影、hover 才浮起；3 列栅格；1200px 定宽容器；
     3. 间距节奏 8pt：标题区→内容 28px，内容→分页 44px，页脚列距 48px；
     4. 所有链接/文字颜色选择器带 .site-body 前缀（site.css 的
        `.site-body a { color: inherit }` 特异度更高，不前缀会被吃掉）；
     5. 字号：正文 16px/1.9，卡片标题 16px/600，区块标题 26px/600，
        辅助 12.5~13.5px。
   ============================================================ */

/* ---------- 0. 设计令牌 ---------- */
:root {
    --cf-brand: #185FA5;
    --cf-brand-strong: #0C447C;
    --cf-brand-soft: #E6F1FB;
    --cf-line: #E3EAF2;
    --cf-soft: #F5F8FB;
    --cf-sub: #55677E;
    --cf-faint: #8595A8;
    --cf-ink: #16273E;
    --cf-danger: #C9403F;
    --cf-radius: 6px;
    --nlsh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nlsh-ring: 0 0 0 4px rgba(24, 95, 165, 0.12);
    --nlsh-shadow-hover: 0 12px 28px rgba(12, 46, 107, 0.10);
    --nlsh-navy: #042C53;
    --nlsh-navy-deep: #03203C;
    --nlsh-navy-text: #85B7EB;
}

/* ---------- 1. 容器定宽 1200（内容区不拉伸，两侧呼吸留白） ---------- */
.site-body .site-container {
    max-width: var(--nlsh-container);
}

/* ---------- 2. 列表页标题头：标题左、计数右，一条细分隔线 ----------
   注意：栏目页容器类是 .site-list（site.css 无定义），不是 .cf-list ——
   上下 padding 必须挂在 .site-list 上，否则标题贴导航、分页贴页脚 */
.site-body .cf-list,
.site-body .site-list {
    padding-top: 40px;
    padding-bottom: 80px;
}

.site-body .cf-list__head {
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cf-line);
}

    /* 品牌色短段压在细分隔线上，替代旧渐变通栏线 */
    .site-body .cf-list__head::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 56px;
        height: 3px;
        border-radius: 3px;
        background: var(--cf-brand);
    }

    /* 内部匿名 div 结构 17 个列表页完全一致（已逐一核对），基线对齐重排 */
    .site-body .cf-list__head > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .site-body .cf-list__head .site-section__title {
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--cf-ink);
    }

    /* 标题自身的 44px 短线去掉（site.css 遗留），分隔线短段由 head::after 统一负责 */
    .site-body .cf-list__head .site-section__title {
        padding-bottom: 0;
    }

        .site-body .cf-list__head .site-section__title::after {
            content: none;
        }

/* 计数从「胶囊」降级为基线对齐的纯文字，不再抢视觉 */
.site-body .cf-list__count {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cf-faint);
    font-size: 13px;
    font-weight: 400;
}

.site-body .cf-column__intro {
    color: var(--cf-sub);
}

/* ---------- 3. 图文卡片：细边框 + 16px 圆角，hover 才浮起 ---------- */
.site-body .cf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.site-body .cf-card {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    transition: transform 0.25s var(--nlsh-ease), box-shadow 0.25s var(--nlsh-ease), border-color 0.25s var(--nlsh-ease);
}

    .site-body .cf-card:hover {
        transform: translateY(-4px);
        border-color: rgba(24, 95, 165, 0.45);
        box-shadow: var(--nlsh-shadow-hover);
    }

/* 封面统一 4:3，去渐变遮罩，hover 仅轻微缩放 */
.site-body .cf-card__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cf-brand-soft);
    overflow: hidden;
}

    .site-body .cf-card__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s var(--nlsh-ease);
    }

.site-body .cf-card:hover .cf-card__cover img {
    transform: scale(1.05);
}

.site-body .cf-card:hover .cf-card__cover::after {
    content: none;
}

/* 无图占位：浅蓝底 + 品牌圆形徽标（markup 见 _ArticleList.cshtml） */
.site-body .cf-card__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-body .cf-card__cover-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.site-body .cf-card__cover-badge-letter {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--cf-brand);
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-body .cf-card__cover-badge-type {
    font-size: 12px;
    letter-spacing: 0.15em;
    color: rgba(24, 95, 165, 0.65);
    text-transform: uppercase;
}

/* 摘要统一 2 行截断，卡片高度齐平 */
.site-body .cf-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-body .cf-card__body {
    padding: 16px 18px 18px;
    gap: 8px;
}

.site-body .cf-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--cf-ink);
    transition: color 0.2s ease;
}

.site-body .cf-card:hover .cf-card__title {
    color: var(--cf-brand);
}

.site-body .cf-card__summary {
    color: var(--cf-sub);
    font-size: 13.5px;
    line-height: 1.7;
}

.site-body .cf-card__foot {
    color: var(--cf-faint);
    font-size: 12.5px;
    padding-top: 10px;
}

.site-body .cf-card__price {
    color: var(--cf-danger);
    font-weight: 600;
    font-size: 16px;
}

/* ---------- 4. 徽章 / 标签：浅蓝底深蓝字，方形圆角 ---------- */
.site-body .cf-badge {
    padding: 2px 9px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.site-body .cf-badge--top {
    background: var(--cf-brand-soft);
    color: var(--cf-brand);
}

.site-body .cf-tag {
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 3px;
    color: var(--cf-sub);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .site-body .cf-tag:hover {
        background: var(--cf-brand-soft);
        border-color: rgba(24, 95, 165, 0.35);
        color: var(--cf-brand);
        transform: none;
        box-shadow: none;
    }

/* ---------- 5. 文字列表 ---------- */
.site-body .cf-text-list {
    margin-top: 28px;
}

.site-body .cf-text-list__item {
    border-bottom-color: var(--cf-line);
}

    .site-body .cf-text-list__item:first-child {
        border-top-color: var(--cf-line);
    }

.site-body .cf-text-list__link {
    padding: 18px 14px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

    .site-body .cf-text-list__link:hover {
        background: var(--cf-soft);
    }

.site-body .cf-text-list__title {
    color: var(--cf-ink);
    font-weight: 600;
    font-size: 15.5px;
}

.site-body .cf-text-list__link:hover .cf-text-list__title {
    color: var(--cf-brand);
}

.site-body .cf-text-list__summary {
    color: var(--cf-sub);
    margin-top: 12px;
}

.site-body .cf-text-list__meta {
    color: var(--cf-faint);
}

    .site-body .cf-text-list__meta time {
        padding: 0;
        border-radius: 0;
        background: transparent;
        font-style: normal;
        font-variant-numeric: tabular-nums;
    }

/* ---------- 6. 面包屑：调回原生样式（cms-front.css 原样，不做主题覆盖） ---------- */

/* ---------- 7. 分页：圆角矩形组，当前页实心亮蓝 ---------- */
.site-body .cf-pager {
    margin-top: 44px;
    gap: 8px;
}

    .site-body .cf-pager a,
    .site-body .cf-pager span {
        min-width: 40px;
        height: 40px;
        padding: 0 14px;
        border-radius: 3px;
        border: 1px solid var(--cf-line);
        background: #fff;
        color: var(--cf-sub);
        font-size: 14px;
        font-weight: 500;
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

        .site-body .cf-pager a:hover {
            border-color: var(--cf-brand);
            color: var(--cf-brand);
            background: var(--cf-brand-soft);
            transform: none;
            box-shadow: none;
        }

    .site-body .cf-pager .is-active {
        background: var(--cf-brand);
        border-color: var(--cf-brand);
        color: #fff;
        box-shadow: none;
    }

    .site-body .cf-pager .is-disabled {
        color: #B8C4D4;
        background: transparent;
        border-color: var(--cf-line);
    }

/* ---------- 8. 按钮：实心亮蓝，去渐变 ---------- */
.site-body .cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 26px;
    border: 0;
    border-radius: 3px;
    background: var(--cf-brand);
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s var(--nlsh-ease);
}

    .site-body .cf-btn:hover {
        background: var(--cf-brand-strong);
        color: #fff;
        transform: translateY(-1px);
    }

.site-body .cf-btn--ghost {
    background: #fff;
    color: var(--cf-ink);
    border: 1px solid var(--cf-line);
}

    .site-body .cf-btn--ghost:hover {
        color: var(--cf-brand);
        border-color: var(--cf-brand);
        background: var(--cf-brand-soft);
    }

/* ---------- 9. 正文排版 ---------- */
.site-body .cf-prose {
    font-size: 16px;
    line-height: 1.9;
    color: #33415A;
}

    .site-body .cf-prose h2,
    .site-body .cf-prose h3 {
        position: relative;
        padding-left: 15px;
        font-weight: 600;
        color: var(--cf-ink);
    }

    .site-body .cf-prose h2 {
        font-size: 21px;
        margin: 2em 0 0.7em;
    }

    .site-body .cf-prose h3 {
        font-size: 18px;
        margin: 1.7em 0 0.6em;
    }

        .site-body .cf-prose h2::before,
        .site-body .cf-prose h3::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.3em;
            bottom: 0.3em;
            width: 4px;
            border-radius: 4px;
            background: var(--cf-brand);
        }

    .site-body .cf-prose a {
        color: var(--cf-brand);
        text-decoration-color: rgba(24, 95, 165, 0.4);
    }

        .site-body .cf-prose a:hover {
            color: var(--cf-brand-strong);
        }

    .site-body .cf-prose img {
        border-radius: 6px;
        box-shadow: none;
    }

    .site-body .cf-prose blockquote {
        margin: 1.5em 0;
        padding: 14px 20px;
        border-left: 4px solid var(--cf-brand);
        border-radius: 0 6px 6px 0;
        background: var(--cf-soft);
        color: #33415A;
    }

    .site-body .cf-prose pre {
        border-radius: 6px;
    }

    .site-body .cf-prose th {
        background: var(--cf-soft);
    }

    .site-body .cf-prose th, .site-body .cf-prose td {
        border-color: var(--cf-line);
    }

/* ---------- 10. 表单：扁平焦点环 ---------- */
.site-body .cf-form input[type="text"],
.site-body .cf-form input[type="email"],
.site-body .cf-form textarea,
.site-body .nlsh-field input,
.site-body .nlsh-field select,
.site-body .nlsh-field textarea {
    border: 1px solid var(--cf-line);
    border-radius: 4px;
    background: #fff;
    color: var(--cf-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .site-body .cf-form input:focus,
    .site-body .cf-form textarea:focus,
    .site-body .nlsh-field input:focus,
    .site-body .nlsh-field select:focus,
    .site-body .nlsh-field textarea:focus {
        border-color: var(--cf-brand);
        box-shadow: var(--nlsh-ring);
        outline: none;
    }

    .site-body .cf-form input::placeholder,
    .site-body .cf-form textarea::placeholder,
    .site-body .nlsh-field input::placeholder,
    .site-body .nlsh-field textarea::placeholder {
        color: var(--cf-faint);
    }

/* 询价卡：白卡 + 顶部 4px 实心品牌条，去阴影 */
.site-body .nlsh-inquiry {
    /* margin:0 auto;*/
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    box-shadow: none;
    overflow: hidden;
    position: relative;
    padding-top: 26px;
    margin-top: 48px;
}

    .site-body .nlsh-inquiry::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--cf-brand);
    }

.site-body .nlsh-inquiry__title {
    font-weight: 600;
    color: var(--cf-ink);
}

.site-body .nlsh-inquiry__sub {
    color: var(--cf-sub);
}

.site-body .nlsh-inquiry__submit {
    min-height: 44px;
    padding: 10px 32px;
    border-radius: 3px;
    background: var(--cf-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s var(--nlsh-ease);
}

    .site-body .nlsh-inquiry__submit:hover {
        background: var(--cf-brand-strong);
        transform: translateY(-1px);
    }

    .site-body .nlsh-inquiry__submit:focus-visible {
        outline: none;
        box-shadow: var(--nlsh-ring);
    }

/* ---------- 11. 评论 ---------- */
.site-body .cf-comments {
    margin-top: 48px;
}

.site-body .cf-comments__title {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: var(--cf-ink);
    padding-bottom: 12px;
    border-bottom-color: var(--cf-line);
}

    .site-body .cf-comments__title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 40px;
        height: 3px;
        border-radius: 3px;
        background: var(--cf-brand);
    }

.site-body .cf-comment {
    border-bottom: 1px solid var(--cf-line);
}

.site-body .cf-comment__name {
    color: var(--cf-ink);
    font-weight: 600;
}

.site-body .cf-comment__badge {
    border-radius: 6px;
    background: var(--cf-brand-soft);
    color: var(--cf-brand);
    font-weight: 500;
}

.site-body .cf-comment__children {
    border-left-color: var(--cf-line);
}

/* 评论区节奏：标题下划线→提示/列表→表单 留出清晰呼吸，避免粘连 */
.site-body .cf-comments__title {
    margin-bottom: 18px;
}

.site-body .cf-empty__hint {
    margin: 0 0 4px;
    font-size: 14px;
}

.site-body .cf-form {
    margin-top: 24px;
}

.site-body .cf-form__row {
    gap: 14px;
    margin-bottom: 14px;
}

.site-body .cf-comment {
    padding: 16px 0;
}

.site-body .cf-comment__head {
    margin-bottom: 8px;
}

/* ---------- 12. 空态 / 锁定 / 提示条 ---------- */
.site-body .cf-empty {
    padding: 64px 24px;
    border: 1px dashed var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-soft);
}

.site-body .cf-empty__title {
    font-weight: 600;
    color: var(--cf-ink);
}

.site-body .cf-empty__hint {
    color: var(--cf-sub);
}

.site-body .cf-lock {
    border-radius: var(--cf-radius);
    border-color: var(--cf-line);
    box-shadow: none;
    background: #fff;
}

.site-body .cf-lock__title {
    font-weight: 600;
    color: var(--cf-ink);
}

.site-body .cf-notice {
    border-radius: 6px;
    background: var(--cf-brand-soft);
    border-color: rgba(24, 95, 165, 0.2);
    color: var(--cf-brand-strong);
}

/* ---------- 13. 详情页信息区 ---------- */
/* 规格参数：正文区块（与图文详情并列，2026-10-25 从右栏移回），斑马纹卡片表 */
.site-body .nlsh-detail__spec .cf-fields__list {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: #fff;
}

.site-body .nlsh-detail__spec .cf-fields__row {
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr);
    gap: 2px 12px;
    padding: 10px 14px;
    align-items: baseline;
    background: #F7F9FC;
}

    .site-body .nlsh-detail__spec .cf-fields__row:nth-child(even) {
        background: #fff;
    }

.site-body .nlsh-detail__spec .cf-fields__label {
    color: var(--cf-sub);
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
}

    .site-body .nlsh-detail__spec .cf-fields__label::after {
        content: "";
    }

.site-body .nlsh-detail__spec .cf-fields__value {
    color: var(--cf-ink);
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.site-body .cf-price__now {
    color: var(--cf-danger);
}

.site-body .nlsh-detail__price {
    border: 1px solid #F3D9D9;
    border-radius: 6px;
    background: #FDF7F7;
}

.site-body .cf-fields__row {
    font-size: 14.5px;
}

.site-body .cf-fields__label {
    color: var(--cf-sub);
}

.site-body .cf-fields__value {
    color: var(--cf-ink);
}

.site-body .cf-spec span {
    background: var(--cf-soft);
    border-color: var(--cf-line);
    color: var(--cf-sub);
}

.site-body .nlsh-detail .cf-crumbs-row {
    margin-bottom: 16px;
}

/* ---------- 14. 排序胶囊 ---------- */
.site-body .cf-sorts a {
    border: 1px solid var(--cf-line);
    background: #fff;
    color: var(--cf-sub);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

    .site-body .cf-sorts a:hover {
        border-color: var(--cf-brand);
        color: var(--cf-brand);
    }

    .site-body .cf-sorts a.is-active {
        background: var(--cf-brand);
        border-color: var(--cf-brand);
        color: #fff;
        box-shadow: none;
    }

.site-body .cf-tags {
    margin-top: 28px;
}

.site-body a:focus-visible,
.site-body button:focus-visible {
    outline: 3px solid rgba(24, 95, 165, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 15. 导航激活态：实心品牌蓝胶囊，成视觉重心，去渐变 ---------- */
.site-body .site-nav__link.is-active {
    color: #fff;
    background: var(--cf-brand);
    font-weight: 600;
}

    .site-body .site-nav__link.is-active:hover {
        color: #fff;
        background: var(--cf-brand-strong);
    }

    .site-body .site-nav__link.is-active::after {
        display: none;
    }

/* ---------- 16. 页脚：深藏青扁平大块，行距 2.2 ----------
   注意：site.css 有 `.site-body h3/p { margin: 0 }`（特异度 类+元素），
   单类选择器的 margin 会被它清零 —— 本段全部加 .site-body 前缀提权 */
.site-body .site-footer {
    background: var(--nlsh-navy);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #0C447C 0%, #185FA5 45%, #2E7FC0 100%) 1;
}

/* 栅格比例仅桌面端生效；≤1024 交给 site.css 响应式断点（2 列 / 1 列），避免手机端挤成 4 列 */
.site-body .site-footer__grid {
    gap: 44px;
    padding-top: 72px;
    padding-bottom: 60px;
}

@media (min-width: 1025px) {
    .site-body .site-footer__grid {
        grid-template-columns: 1.6fr 0.9fr 1.1fr 1fr;
    }
}

/* 字体分级：品牌名最大 > 栏目标题次之 > 正文柔和 */
.site-body .site-footer__logo {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
}

.site-body .site-footer__desc {
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.95;
    margin-top: 16px;
    font-size: 13.5px;
    max-width: 340px;
}

.site-body .site-footer__title {
    position: relative;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 22px;
    padding-bottom: 12px;
}

    .site-body .site-footer__title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, #2E7FC0, rgba(46, 127, 192, 0));
    }

.site-body .site-footer__col--brand .site-footer__title {
    margin-top: 34px;
}

.site-body .site-footer__links {
    line-height: 2.35;
    font-size: 13.5px;
}

    .site-body .site-footer__links a {
        color: rgba(255, 255, 255, 0.58);
        display: inline-block;
        transition: color 0.18s ease, transform 0.18s ease;
    }

        .site-body .site-footer__links a:hover {
            color: #fff;
            transform: translateX(4px);
        }

.site-body .site-footer__contact {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.58);
    line-height: 2.35;
    font-size: 13.5px;
}

    .site-body .site-footer__contact li strong {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
    }

.site-body .site-footer__hours {
    color: rgba(255, 255, 255, 0.45);
    margin-top: 18px;
    font-size: 12.5px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* 二维码：说明文字作标题下注，二维码横向并排白卡 + 微投影 */
.site-body .site-footer__qr-tip {
    color: var(--nlsh-navy-text);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}

.site-body .site-footer__qr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.site-body .site-footer__qr-item {
    margin: 0;
}

.site-body .site-footer__qr-box {
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    width: 104px;
    line-height: 0;
    box-shadow: 0 6px 18px rgba(2, 18, 38, 0.22);
    transition: transform 0.2s var(--nlsh-ease), box-shadow 0.2s var(--nlsh-ease);
}

    .site-body .site-footer__qr-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(2, 18, 38, 0.3);
    }

    .site-body .site-footer__qr-box img {
        width: 84px;
        height: 84px;
        border-radius: 4px;
        object-fit: contain;
    }

.site-body .site-footer__bar {
    background: var(--nlsh-navy-deep);
}

.site-footer__bar {
    padding-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
}

.site-body .site-footer__bar,
.site-body .site-footer__bar a {
    color: rgba(133, 183, 235, 0.72);
    font-size: 12.5px;
    letter-spacing: 0.4px;
    line-height: 1.8;
}

    .site-body .site-footer__bar a:hover {
        color: #fff;
    }

/* 版权栏重排：Copyright + ICP 归左组（细分隔线），右侧链接 margin-left:auto 靠右 */
.site-body .site-footer__bar-inner {
    justify-content: flex-start;
}

    .site-body .site-footer__bar-inner > span:first-child {
        display: inline-flex;
        align-items: center;
    }

        .site-body .site-footer__bar-inner > span:first-child::after {
            /* content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 20px;
    background: rgba(255, 255, 255, 0.18);*/
        }

.site-body .site-footer__bar-right {
    margin-left: auto;
}

@media (max-width: 820px) {
    .site-body .site-footer__bar-inner {
        justify-content: flex-start;
    }

        .site-body .site-footer__bar-inner > span:first-child::after {
            display: none;
        }

    .site-body .site-footer__bar-right {
        margin-left: 0;
    }
}

/* 回到顶部：品牌蓝圆钮，替换默认深色 */
.site-body .site-totop {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cf-brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(12, 46, 107, 0.25);
    transition: background 0.2s ease, transform 0.2s var(--nlsh-ease);
}

    .site-body .site-totop:hover {
        background: var(--cf-brand-strong);
        transform: translateY(-2px);
    }

/* ===== WORKBUDDYAI_UPDATE_B [CMS前台] [2026-10-29 右下角悬浮在线客服按钮：原创内联SVG无版权，翠绿渐变与蓝色"回到顶部"区分，48px 与 totop 协调，轻微浮动，新标签打开 /member/chat] ===== */
.site-body .site-chat {
    position: fixed;
    right: 20px;
    bottom: 84px; /* 叠在「回到顶部」(bottom:24px) 上方，错开不重叠 */
    z-index: 75; /* 高于 totop(70)，低于模态框 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1FB85A 0%, #0EA64B 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(14, 166, 75, 0.32);
    text-decoration: none;
    animation: site-chat-float 2.8s ease-in-out infinite; /* 轻微上下浮动（呼吸感） */
}

    .site-body .site-chat:hover {
        background: linear-gradient(135deg, #25C864 0%, #11B255 100%);
        box-shadow: 0 12px 30px rgba(14, 166, 75, 0.44);
    }

    .site-body .site-chat:focus-visible {
        outline: 3px solid rgba(31, 184, 90, 0.6);
        outline-offset: 3px;
    }

.site-body .site-chat__icon {
    width: 27px;
    height: 27px;
    display: block;
}

/* hover / 聚焦时显示的「在线客服」文字气泡 */
.site-body .site-chat__bubble {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #0EA64B;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

    .site-body .site-chat__bubble::after {
        content: "";
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: #0EA64B;
    }

.site-body .site-chat:hover .site-chat__bubble,
.site-body .site-chat:focus-visible .site-chat__bubble {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .site-body .site-chat {
        animation: none;
    }
}

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

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

@media (max-width: 768px) {
    .site-body .site-chat {
        right: 14px;
        bottom: 70px;
        width: 44px;
        height: 44px;
    }

    .site-body .site-chat__icon {
        width: 25px;
        height: 25px;
    }

    .site-chat__bubble {
        display: none;
    }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS前台] ===== */

/* ---------- 16.5 详情页统一头部（原「单页 Hero」扩展为全栏目共用） ---------- */
/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-05 九个详情模板共用一套头部] =====
   原来 nlsh-page-hero 只给单页用，新闻/图集/下载/视频/博客各有各的标题区，
   同一个人点开两个栏目会看到两套字号与留白。现在统一到 .nlsh-detail-hero，
   视觉完全沿用单页那一版（浅蓝渐变 + 下边框 + 52/46 内边距），
   .nlsh-page-hero 保留给旧模板与联系页复用，两条选择器共享同一组规则。 */
.site-body .nlsh-page-hero,
.site-body .nlsh-detail-hero {
    background: linear-gradient(180deg, #EAF3FC 0%, #F5F8FB 100%);
    border-bottom: 1px solid var(--cf-line);
    padding: 52px 0 46px;
}

    /* 标题与导航间的留白（防止粘连）：Hero 自带顶部内边距，导航不再贴标题 */
    .site-body .nlsh-page-hero .cf-crumbs-row,
    .site-body .nlsh-detail-hero .cf-crumbs-row {
        margin-bottom: 18px;
    }

.site-body .nlsh-page-hero__title,
.site-body .nlsh-detail-hero__title {
    margin: 0;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: var(--nlsh-navy);
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.site-body .nlsh-page-hero__sub,
.site-body .nlsh-detail-hero__sub {
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--cf-sub);
}

.site-body .nlsh-page-hero__meta,
.site-body .nlsh-detail-hero__meta {
    margin-top: 14px;
    font-size: 13px;
    color: var(--cf-faint);
}

    /* 元信息之间用细竖线分隔：原来各模板有的用 ·、有的用空格，统一成竖线 */
    .site-body .nlsh-detail-hero__meta > span + span::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 11px;
        margin: 0 10px;
        background: var(--cf-line);
        vertical-align: -1px;
    }

/* 标题上方的小标签（分类 / 内容类型 / 系列） */
.site-body .nlsh-detail-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.site-body .nlsh-detail-hero__badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cf-brand);
    background: #fff;
    border: 1px solid rgba(12, 46, 107, 0.14);
    border-radius: 999px;
    text-decoration: none;
}

.site-body a.nlsh-detail-hero__badge:hover {
    background: var(--cf-brand);
    border-color: var(--cf-brand);
    color: #fff;
}

/* 专题封面：头部统一后从前压式头图改为正文首图，保留通栏大图的存在感 */
.site-body .nlsh-topic-cover {
    margin: 0 0 28px;
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: #eef2f7;
}

    .site-body .nlsh-topic-cover img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 440px;
        object-fit: cover;
    }
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* 内容卡：白底细边框，1400 容器下放宽到 1120 居中 */
.site-body .nlsh-detail--page {
    padding-top: 44px;
    padding-bottom: 76px;
}

.site-body .nlsh-page-card {
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 48px 52px;
    max-width: 1120px;
    margin: 0 auto;
    box-shadow: 0 8px 30px rgba(12, 46, 107, 0.05);
}

/* 正文行宽随容器放宽（760 → 900，中文约 55 字/行仍在舒适区） */
.site-body .cf-prose {
    max-width: 900px;
}

.site-body .cf-article__head {
    max-width: 900px;
}

/* 卡片内正文排版（覆盖 cms-front 基础样式，确保层级与留白统一） */
.site-body .nlsh-page-card .cf-prose {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.95;
    color: #33455e;
}

    .site-body .nlsh-page-card .cf-prose > :first-child {
        margin-top: 0;
    }

    .site-body .nlsh-page-card .cf-prose p {
        margin-top: 16px;
    }

    .site-body .nlsh-page-card .cf-prose h2 {
        margin-top: 32px;
        font-size: 20px;
        font-weight: 700;
        color: var(--nlsh-navy);
    }

    .site-body .nlsh-page-card .cf-prose h3 {
        margin-top: 26px;
        font-size: 17px;
        font-weight: 600;
        color: #20324c;
    }

    .site-body .nlsh-page-card .cf-prose img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        margin-top: 20px;
    }

    .site-body .nlsh-page-card .cf-prose a {
        color: var(--cf-brand);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .site-body .nlsh-page-card .cf-prose a:hover {
            color: var(--cf-brand-strong);
        }

.site-body .nlsh-page-card .nlsh-page__cover {
    margin-top: 24px;
}

/* ---------- 联系我们页（Pages/Contact 正文模板） ---------- */
/* 联系方式列表：标签 + 值两栏，卡片内与正文同宽 */
.site-body .nlsh-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-body .nlsh-contact__item {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--cf-line);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--nlsh-ink);
}

    .site-body .nlsh-contact__item:first-child {
        padding-top: 0;
    }

.site-body .nlsh-contact__label {
    flex: none;
    min-width: 88px;
    color: var(--nlsh-ink-soft);
}

.site-body .nlsh-contact__value {
    word-break: break-all;
}

/* 二维码区块 */
.site-body .nlsh-contact__qr {
    margin-top: 32px;
}

.site-body .nlsh-contact__qr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

.site-body .nlsh-contact__qr-item {
    margin: 0;
    width: 140px;
}

    .site-body .nlsh-contact__qr-item img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--cf-line);
        border-radius: 6px;
    }

/* 咨询表单入口：与详情页 CTA 一致，独立成块留白 */
.site-body .nlsh-contact__cta {
    margin-top: 34px;
}

/* ---------- 17. 响应式 ---------- */
@media (max-width: 1024px) {
    .site-body .cf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 移动端恢复搜索框：窄屏放不下整条输入框，只保留图标按钮，避免“搜索框消失”；
       去掉白底/描边，避免顶部出现突兀的白色方块 */
    .site-body .site-search {
        display: flex;
        height: 40px;
        padding: 0;
        gap: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

        .site-body .site-search input {
            display: none;
        }

        .site-body .site-search button {
            width: 38px;
            height: 38px;
            background: var(--cf-brand);
            color: #fff;
            border-radius: 50%;
        }

            .site-body .site-search button:hover {
                background: var(--cf-brand-strong);
                color: #fff;
            }
}

@media (max-width: 720px) {
    .site-body .cf-list,
    .site-body .site-list {
        padding-top: 28px;
        padding-bottom: 60px;
    }

    .site-body .cf-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .site-body .cf-card__body {
        padding: 14px 16px 16px;
    }

    .site-body .cf-card__title {
        font-size: 15.5px;
    }

    .site-body .cf-list__head .site-section__title {
        font-size: 22px;
    }

    .site-body .cf-text-list__link {
        padding: 16px 10px;
    }

    .site-body .cf-pager a, .site-body .cf-pager span {
        min-width: 36px;
        height: 36px;
    }

    .site-body .cf-prose {
        font-size: 15.5px;
        line-height: 1.85;
    }

        .site-body .cf-prose h2 {
            font-size: 19px;
        }

        .site-body .cf-prose h3 {
            font-size: 17px;
        }

    .site-body .cf-pager, .site-body .cf-comments, .site-body .nlsh-inquiry {
        margin-top: 36px;
    }

    .site-body .nlsh-detail .cf-crumbs-row {
        margin-bottom: 18px;
    }

    .site-footer__grid {
        gap: 32px;
    }

    .site-body .nlsh-page-hero,
    .site-body .nlsh-detail-hero {
        padding: 34px 0 30px;
    }

    .site-body .nlsh-page-hero__title,
    .site-body .nlsh-detail-hero__title {
        font-size: 24px;
    }

    .site-body .nlsh-page-card {
        padding: 24px;
        border-radius: 6px;
    }

    .site-body .nlsh-detail--page {
        padding-top: 28px;
        padding-bottom: 52px;
    }
}

/* ---------- 18. 手机端导航重设计：全屏品牌遮罩菜单（大气 / 专业） ---------- */
/* 设计要点：吸顶白底更扎实、Logo 品牌渐变放大、汉堡圆角方块品牌色线条；
   展开时整屏深蓝渐变遮罩 + 白色大字号菜单 + 发丝分隔线 + 激活高亮，
   远比普通“顶部落下白面板”更高级、更聚焦。仅覆盖，不动 site.css、不动 JS。 */
@media (max-width: 820px) {
    /* 顶栏：更扎实的白底 + 清晰底边 + 轻微投影 */
    .site-body .site-header {
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--nlsh-line);
        box-shadow: 0 2px 16px rgba(12, 46, 107, 0.06);
        /* 去掉 backdrop-filter：否则它会成为 fixed 抽屉的包含块，
           导致全屏菜单只覆盖到顶栏范围而盖不住整屏。 */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

        .site-body .site-header.is-scrolled {
            box-shadow: 0 8px 28px rgba(12, 46, 107, 0.12);
        }

    .site-body .site-header__inner {
        height: 66px;
        gap: 12px;
    }

    /* Logo：略放大，品牌渐变更突出 */
    .site-body .site-logo__mark {
        width: 38px;
        height: 38px;
        border-radius: 5px;
        background: var(--nlsh-gradient);
        font-size: 18px;
    }

    .site-body .site-logo__text {
        font-size: 19px;
        letter-spacing: 0.3px;
    }

    /* 汉堡按钮：圆角方块 + 品牌色线条，44px 舒适触达；置顶确保可点关闭 */
    .site-body .site-burger {
        position: relative;
        z-index: 90;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0 11px;
        gap: 5px;
        border: 1px solid var(--nlsh-line);
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(12, 46, 107, 0.06);
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .site-body .site-burger span {
            height: 2.5px;
            border-radius: 2px;
            background: var(--nlsh-deep-2);
            transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
        }

        .site-body .site-burger.is-open {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.45);
        }

            .site-body .site-burger.is-open span {
                background: #fff;
            }

    /* 抽屉：收起态（绝对定位在顶栏下方，透明不可点）；展开态变全屏品牌遮罩 */
    .site-body .site-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 0;
        padding: 0 18px;
        background: #fff;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 24px 48px rgba(12, 46, 107, 0.16);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
        z-index: 80;
    }

        .site-body .site-nav.is-open {
            position: fixed;
            inset: 0;
            max-height: 100vh;
            padding: 74px 22px 44px;
            background: linear-gradient(160deg, #0c2e6b 0%, #0b6fb8 58%, #008fcd 100%);
            border-radius: 0;
            box-shadow: none;
            overflow-y: auto;
            opacity: 1;
            visibility: visible;
            transform: none;
            pointer-events: auto;
        }
            /* 顶部品牌眉标 + 底部收尾细线，平衡构图、避免大块留白 */
            .site-body .site-nav.is-open::before {
                content: "MENU";
                display: block;
                margin: 0 4px 18px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 4px;
                color: rgba(255, 255, 255, 0.55);
            }

            .site-body .site-nav.is-open::after {
                content: "";
                display: block;
                height: 1px;
                margin: 28px 4px 0;
                background: rgba(255, 255, 255, 0.12);
            }

    /* 菜单项：全屏态为白色大字号 + 发丝分隔线 */
    .site-body .site-nav__link {
        position: relative;
        padding: 17px 4px;
        border-radius: 3px;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.92);
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        transition: color 0.18s ease, background 0.18s ease, padding 0.18s ease;
    }

        .site-body .site-nav__link:last-child {
            border-bottom: 0;
        }

        .site-body .site-nav__link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.10);
            padding-left: 10px;
            width: 100%;
        }

        .site-body .site-nav__link.is-active {
            color: #fff;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.10);
            box-shadow: inset 4px 0 0 0 #fff;
            width: 100%;
        }

            .site-body .site-nav__link.is-active::after {
                display: none;
            }

    /* 带子菜单的组：主标题复用 link，子菜单平铺并缩进分层 */
    .site-body .site-nav__group {
        display: block;
    }

    .site-body .site-nav__item {
        display: inline-block;
    }

    .site-body .site-nav__caret {
        display: none;
    }

    .site-body .site-nav__menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: 0;
        border-left: 2px solid rgba(255, 255, 255, 0.35);
        margin: 2px 0 10px 6px;
        padding: 2px 0 2px 12px;
        min-width: 0;
        background: transparent;
    }

    .site-body .site-nav__menu-link {
        display: block;
        padding: 10px 4px;
        border-radius: 4px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.72);
        transition: color 0.16s ease, background 0.16s ease;
    }

        .site-body .site-nav__menu-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.10);
        }

    /* 搜索条：移动端满宽、紧凑（与胶囊条一致，仅调尺寸） */
    .site-body .cf-search-form {
        max-width: 100%;
        margin: 14px 0 24px;
    }

        .site-body .cf-search-form input {
            height: 46px;
            font-size: 15px;
        }

        .site-body .cf-search-form button {
            height: 46px;
            padding: 0 24px;
        }
}
/* ===== WORKBUDDYAI_UPDATE_E [SITE] ===== */

/* ---------- 19. 搜索页搜索框（一体化胶囊搜索条，仅主题层覆盖，不动 site.css / cms-front.css） ---------- */
/* 设计：白底胶囊 + 细边框 + 柔和阴影，输入框无边框内嵌、左侧放大镜图标，品牌蓝按钮嵌入右侧；
   聚焦时整体高亮。复用 .cf-btn 的圆角语言，与全站扁平企业风一致。 */
.site-body .cf-search-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 600px;
    margin: 18px 0 30px;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(12, 46, 107, 0.06);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .site-body .cf-search-form:focus-within {
        border-color: var(--cf-brand);
        box-shadow: 0 4px 20px rgba(24, 95, 165, 0.16);
    }

    .site-body .cf-search-form input {
        flex: 1 1 auto;
        min-width: 0;
        height: 50px;
        padding: 0 20px 0 46px;
        border: 0;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa7b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 16px center;
        background-size: 19px 19px;
        color: var(--cf-ink);
        font-size: 15px;
        outline: none;
    }

        .site-body .cf-search-form input::placeholder {
            color: var(--cf-sub);
        }

    .site-body .cf-search-form button {
        flex: 0 0 auto;
        height: 50px;
        margin: 3px;
        padding: 0 26px;
        border: 0;
        border-radius: 3px;
        background: var(--cf-brand);
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .site-body .cf-search-form button:hover {
            background: var(--cf-brand-strong);
            transform: translateY(-1px);
        }

        .site-body .cf-search-form button:active {
            transform: translateY(0);
        }

/* ---------- 20. 内页顶部 Banner：引用「分类页顶部(Category)」轮播图 ---------- */
.site-body .cf-pbanner {
    width: 100%;
    overflow: hidden;
}

.site-body .cf-pbanner__swiper {
    width: 100%;
    height: 220px;
}

.site-body .cf-pbanner__slide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .site-body .cf-pbanner__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* 用户要求：固定图片显示原图，不压渐变蒙层（2026-10-25） */
    .site-body .cf-pbanner__slide::after {
        content: none;
    }

.site-body .cf-pbanner__caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: max(24px, calc((100% - var(--nlsh-container)) / 2 + 24px));
    z-index: 2;
    color: #fff;
    max-width: 70%;
}

    .site-body .cf-pbanner__caption h2 {
        margin: 0;
        font-size: clamp(24px, 2.6vw, 32px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.02em;
        text-shadow: 0 2px 14px rgba(8, 28, 66, 0.55);
    }

    .site-body .cf-pbanner__caption p {
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: 0.04em;
        opacity: 0.9;
        text-shadow: 0 1px 8px rgba(8, 28, 66, 0.5);
    }
/* 静态兜底幻灯片：无轮播数据时显示品牌渐变 + 当前页标题 */
.site-body .cf-pbanner__slide--fallback {
    display: flex;
    align-items: center;
    background: var(--nlsh-gradient);
    background-image: radial-gradient(900px 400px at 85% 15%, rgba(0, 143, 205, 0.5), transparent 60%), radial-gradient(800px 400px at 8% 115%, rgba(23, 68, 158, 0.55), transparent 60%);
}

    .site-body .cf-pbanner__slide--fallback::after {
        content: none;
    }

.site-body .cf-pbanner__title {
    margin: 0;
    padding-left: max(24px, calc((100% - var(--nlsh-container)) / 2 + 24px));
    color: #fff;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 14px rgba(8, 28, 66, 0.45);
}
/* 分页圆点（有数据时显示） */
.site-body .cf-pbanner .swiper-pagination {
    z-index: 3;
}

.site-body .cf-pbanner .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.45;
}

.site-body .cf-pbanner .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 768px) {
    .site-body .cf-pbanner__swiper {
        height: 140px;
    }

    .site-body .cf-pbanner__caption {
        left: 24px;
        max-width: 88%;
    }

        .site-body .cf-pbanner__caption h2 {
            font-size: 20px;
        }

        .site-body .cf-pbanner__caption p {
            font-size: 13px;
            margin-top: 8px;
        }

    .site-body .cf-pbanner__title {
        padding-left: 24px;
        font-size: 20px;
    }
}

/* ---------- 21. 图片灯箱：详情/正文图片点击放大（2026-10-25） ---------- */
/* 注意：灯箱节点挂在 body 下（不在 .site-body 内），故不加前缀 */
.site-body .nlsh-detail img,
.site-body .cf-prose img {
    cursor: zoom-in;
}

.nlsh-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(6, 18, 38, 0.88);
}

    .nlsh-lightbox.is-open {
        display: flex;
    }

    .nlsh-lightbox img {
        max-width: 92vw;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
        cursor: zoom-out;
    }

.nlsh-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .nlsh-lightbox__close:hover {
        background: rgba(255, 255, 255, 0.3);
    }

body.nlsh-lightbox-lock {
    overflow: hidden;
}

/* ---------- 22. 详情双栏：主内容 + 右栏推荐商品（2026-10-25） ---------- */
.site-body .nlsh-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: start;
}

.site-body .nlsh-detail__main {
    min-width: 0;
}

.site-body .nlsh-detail__aside {
    position: sticky;
    top: 104px;
    padding: 20px 18px 18px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius);
    background: #fff;
    box-shadow: var(--nlsh-shadow);
}

.site-body .nlsh-detail__aside-title {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--nlsh-navy);
    border-bottom: 1px solid var(--nlsh-line);
}

    .site-body .nlsh-detail__aside-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 40px;
        height: 2px;
        background: var(--nlsh-gradient);
    }

.site-body .nlsh-reco {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-body .nlsh-reco__item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

    .site-body .nlsh-reco__item + .nlsh-reco__item {
        border-top: 1px dashed var(--nlsh-line);
    }

.site-body .nlsh-reco__thumb {
    width: 76px;
    height: 76px;
    border-radius: var(--nlsh-radius-sm);
    overflow: hidden;
    background: var(--nlsh-bg-soft);
}

    .site-body .nlsh-reco__thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.site-body .nlsh-reco__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--nlsh-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.18s ease;
}

.site-body .nlsh-reco__item:hover .nlsh-reco__name {
    color: var(--nlsh-brand);
}

.site-body .nlsh-reco__price {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cf-danger);
}
/* 窄屏：推荐栏落到正文下方 */
@media (max-width: 1080px) {
    .site-body .nlsh-detail__layout {
        grid-template-columns: 1fr;
    }

    .site-body .nlsh-detail__aside {
        position: static;
    }
}

/* ---------- 23. 详情右栏：相关栏目列表（2026-10-25） ---------- */
.site-body .nlsh-detail__aside-nav {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nlsh-line);
}
/* 推荐商品块隐藏时，栏目块顶格不加分隔 */
.site-body .nlsh-detail__aside-nav--solo {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.site-body .nlsh-reco-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .site-body .nlsh-reco-cats li + li {
        border-top: 1px dashed var(--nlsh-line);
    }

.site-body .nlsh-reco-cats__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px;
    font-size: 14px;
    color: var(--nlsh-ink);
    transition: color 0.18s ease;
}

    .site-body .nlsh-reco-cats__link:hover {
        color: var(--nlsh-brand);
    }

.site-body .nlsh-reco-cats__count {
    flex: 0 0 auto;
    min-width: 24px;
    text-align: center;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--nlsh-ink-soft);
    background: var(--nlsh-bg-soft);
    border-radius: 3px;
}

/* ============================================================
   博客（Blog）：编辑部式版式（2026-10-28 整体重写）
   参考主流英文博客（Ghost Casper / Medium / Stripe Blog）的排版规范：
     · 正文单栏居中，行长 44rem（≈704px，18px 字号下约 65~70 个西文字符）；
     · 版式靠「留白 + 字号阶梯」建立层次，不靠边框和色块；
     · 卡片、特稿、系列统一 16:10 封面比例，图片一律 object-fit:cover（不再拉伸变形）；
     · 所有纵向间距走同一套节奏（--bl-gap / --bl-gap-lg），避免元素互相粘连。
   命名前缀 bl-，与 nlsh-（首页）、cf-（CMS 共用）区分。
   两个主题各有一份完全相同的副本，改样式请两处同步（本文件即唯一源）。
   ============================================================ */

.site-body {
    /* 阅读列宽：44rem 是 18px 字号下约 65~70 字符的舒适行长 */
    --bl-measure: 44rem;
    /* 列表类页面的内容宽度：比 1300 的站宽窄，避免卡片被拉开成一条 */
    --bl-wide: 1080px;
    /* 节奏基准：普通块间距 / 大块间距 */
    --bl-gap: 2.25rem;
    --bl-gap-lg: 3.5rem;
    --bl-ink: var(--nlsh-ink);
    --bl-sub: var(--nlsh-ink-soft);
    --bl-line: var(--nlsh-line);
    --bl-soft: var(--nlsh-bg-soft);
    --bl-brand: var(--nlsh-brand);
    --bl-mute: #8b9aab;
}

    /* ---------- 1. 页面骨架 ---------- */

    .site-body .bl-page {
        max-width: var(--bl-wide);
        margin: 0 auto;
        /* 博客页不显示站内横幅，这里承担「顶部留白」：没有这一截，标题会顶到导航下沿 */
        padding: 60px 0 96px;
    }

    /* 列表页头部：左对齐大字，底线收尾（与站内其它栏目页保持同一套观感） */
    .site-body .bl-masthead {
        padding-bottom: 30px;
        margin-bottom: 48px;
        border-bottom: 1px solid var(--bl-line);
    }

    .site-body .bl-masthead__kicker {
        margin: 0 0 14px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--bl-brand);
    }

    .site-body .bl-masthead__title {
        margin: 0;
        font-size: clamp(30px, 4vw, 44px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--bl-ink);
    }

    .site-body .bl-masthead__lede {
        margin: 18px 0 0;
        max-width: 38rem;
        font-size: 17px;
        line-height: 1.8;
        color: var(--bl-sub);
    }

    .site-body .bl-masthead__meta {
        margin: 20px 0 0;
        font-size: 13.5px;
        color: var(--bl-mute);
    }

    /* ---------- 2. 通用小件：分类眉标 / 作者署名行 ---------- */

    .site-body .bl-eyebrow {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bl-brand);
        text-decoration: none;
    }

    .site-body .bl-byline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        font-size: 13.5px;
        line-height: 1.4;
        color: var(--bl-sub);
    }

    .site-body .bl-byline__author {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 600;
        color: var(--bl-ink);
        text-decoration: none;
    }

        .site-body .bl-byline__author:hover {
            color: var(--bl-brand);
        }

    .site-body .bl-byline__avatar {
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--bl-soft);
        flex: 0 0 auto;
    }

    .site-body .bl-byline__initial {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(0, 143, 205, .12);
        color: var(--bl-brand);
        font-size: 12px;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .site-body .bl-byline__sep {
        color: #c3cedb;
        font-size: 13px;
    }

    /* ---------- 3. 特稿（首页首篇）---------- */

    .site-body .bl-featured {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 52px);
        align-items: center;
        text-decoration: none;
        color: inherit;
    }

    .site-body .bl-featured__media {
        position: relative;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bl-soft);
    }

        .site-body .bl-featured__media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .55s ease;
        }

    .site-body .bl-featured:hover .bl-featured__media img {
        transform: scale(1.035);
    }

    .site-body .bl-featured__body {
        min-width: 0;
    }

    .site-body .bl-featured__title {
        margin: 16px 0 0;
        font-size: clamp(23px, 2.5vw, 32px);
        line-height: 1.28;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--bl-ink);
        transition: color .18s ease;
    }

    .site-body .bl-featured:hover .bl-featured__title {
        color: var(--bl-brand);
    }

    .site-body .bl-featured__ex {
        margin: 14px 0 0;
        font-size: 16.5px;
        line-height: 1.75;
        color: var(--bl-sub);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .site-body .bl-featured__foot {
        margin-top: 24px;
    }

    /* ---------- 4. 分区标题 ---------- */

    .site-body .bl-section {
        margin-top: var(--bl-gap-lg);
    }

    .site-body .bl-section__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px 16px;
        padding-bottom: 16px;
        margin-bottom: 34px;
        border-bottom: 1px solid var(--bl-line);
    }

    .site-body .bl-section__title {
        margin: 0;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bl-ink);
    }

    .site-body .bl-section__link {
        font-size: 14px;
        font-weight: 600;
        color: var(--bl-brand);
        text-decoration: none;
    }

        .site-body .bl-section__link:hover {
            text-decoration: underline;
        }

    /* ---------- 5. 卡片网格 ---------- */

    .site-body .bl-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px 34px;
    }

    .site-body .bl-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        text-decoration: none;
        color: inherit;
    }

    .site-body .bl-card__media {
        position: relative;
        aspect-ratio: 16 / 10;
        border-radius: 12px;
        overflow: hidden;
        background: var(--bl-soft);
        margin-bottom: 18px;
    }

        .site-body .bl-card__media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

    .site-body .bl-card:hover .bl-card__media img {
        transform: scale(1.04);
    }

    /* 无封面时不留白框：渐变底 + 分类名，和「有图」保持同一比例 */
    .site-body .bl-card__media--empty,
    .site-body .bl-featured__media--empty,
    .site-body .bl-series-hero__cover--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        background: linear-gradient(135deg, #eef6fc 0%, #d9e9f7 100%);
        color: rgba(0, 143, 205, .6);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        text-align: center;
    }

    .site-body .bl-card__eyebrow {
        margin-bottom: 10px;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--bl-brand);
    }

    .site-body .bl-card__title {
        margin: 0;
        font-size: 19px;
        line-height: 1.45;
        font-weight: 700;
        color: var(--bl-ink);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color .18s ease;
    }

    .site-body .bl-card:hover .bl-card__title {
        color: var(--bl-brand);
    }

    .site-body .bl-card__ex {
        margin: 10px 0 0;
        font-size: 14.5px;
        line-height: 1.72;
        color: var(--bl-sub);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .site-body .bl-card__foot {
        margin-top: auto;
        padding-top: 16px;
        font-size: 13px;
        color: var(--bl-mute);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    /* ---------- 6. 编号行列表（系列页）---------- */

    /* 不加顶线：系列页头部已有 border-bottom，再叠一条就成了 64px 内的双线 */
    .site-body .bl-rows {
    }

    .site-body .bl-row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
        padding: 24px 0;
        border-bottom: 1px solid var(--bl-line);
        text-decoration: none;
        color: inherit;
    }

    .site-body .bl-row__no {
        padding-top: 3px;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: .08em;
        font-variant-numeric: tabular-nums;
        color: var(--bl-brand);
    }

    .site-body .bl-row__body {
        min-width: 0;
    }

    .site-body .bl-row__title {
        display: block;
        font-size: 18.5px;
        line-height: 1.5;
        font-weight: 700;
        color: var(--bl-ink);
        transition: color .18s ease;
    }

    .site-body .bl-row:hover .bl-row__title {
        color: var(--bl-brand);
    }

    .site-body .bl-row__ex {
        display: block;
        margin-top: 8px;
        font-size: 14.5px;
        line-height: 1.72;
        color: var(--bl-sub);
    }

    .site-body .bl-row__date {
        padding-top: 5px;
        font-size: 13.5px;
        color: var(--bl-mute);
        white-space: nowrap;
    }

    /* ---------- 7. 空态 / 分页 ---------- */

    .site-body .bl-empty {
        padding: 72px 0;
        text-align: center;
        color: var(--bl-sub);
        font-size: 15px;
        line-height: 1.8;
    }

    .site-body .bl-empty__title {
        margin: 0 0 10px;
        font-size: 19px;
        font-weight: 700;
        color: var(--bl-ink);
    }

    /* 分页条样式复用 cms-front.css 的 .cf-pager，这里只补间距 */
    .site-body .bl-page .cf-pager {
        margin-top: 64px;
    }

    /* ---------- 8. 文章页（单栏居中）---------- */

    .site-body .bl-article {
        /* 整页一处居中：面包屑、正文、分享、作者卡全部落在同一列里 */
        max-width: var(--bl-measure);
        /* 栅格子项的 min-width 默认是 auto（= 内容的 min-content），
       390px 手机上会被富文本里的宽元素顶出去，整页横向滚动。必须显式归零。 */
        min-width: 0;
        /* 不能写 margin: 0 auto —— 栅格里 auto 外边距会取消 stretch，
       宽度退化成 fit-content（= max(min-content, 可用宽度)），
       手机上就被面包屑撑到 431px，整页横向滚动。居中由栅格的 justify-content 负责。 */
        margin: 0;
        padding: 56px 0 104px;
    }

        .site-body .bl-article .cf-crumbs-row {
            margin: 0 0 40px;
            font-size: 13.5px;
        }

    .site-body .bl-article__eyebrow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        margin-bottom: 18px;
    }

        .site-body .bl-article__eyebrow a {
            color: var(--bl-brand);
            text-decoration: none;
        }

            .site-body .bl-article__eyebrow a:hover {
                text-decoration: underline;
            }

    .site-body .bl-article__sep {
        color: #d4dde7;
        font-size: 13px;
        letter-spacing: 0;
    }

    .site-body .bl-article__title {
        margin: 0;
        font-size: clamp(28px, 4.6vw, 44px);
        line-height: 1.18;
        font-weight: 800;
        letter-spacing: -.022em;
        color: var(--bl-ink);
    }

    .site-body .bl-article__sub {
        margin: 20px 0 0;
        font-size: 19px;
        line-height: 1.68;
        color: var(--bl-sub);
    }

    .site-body .bl-article__byline {
        margin-top: 30px;
        padding-top: 24px;
        border-top: 1px solid var(--bl-line);
    }

        .site-body .bl-article__byline .bl-byline {
            font-size: 14px;
        }

        .site-body .bl-article__byline .bl-byline__avatar,
        .site-body .bl-article__byline .bl-byline__initial {
            width: 34px;
            height: 34px;
            font-size: 13.5px;
        }

    .site-body .bl-article__cover {
        margin: var(--bl-gap) 0 0;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bl-soft);
    }

        .site-body .bl-article__cover img {
            display: block;
            width: 100%;
            height: auto;
        }

    .site-body .bl-article__lead {
        margin: var(--bl-gap) 0 0;
        font-size: 19px;
        line-height: 1.78;
        color: #2c3e54;
    }

    /* ---------- 9. 正文排版 ---------- */

    .site-body .bl-prose {
        max-width: none;
        margin: 36px 0 0;
        font-size: 18px;
        line-height: 1.85;
        color: #243447;
    }

        .site-body .bl-prose p {
            margin: 0 0 1.5em;
        }

        .site-body .bl-prose h2 {
            margin: 2.1em 0 .65em;
            font-size: 26px;
            line-height: 1.35;
            font-weight: 800;
            letter-spacing: -.01em;
            color: var(--bl-ink);
        }

        .site-body .bl-prose h3 {
            margin: 1.9em 0 .55em;
            font-size: 21px;
            line-height: 1.42;
            font-weight: 700;
            color: var(--bl-ink);
        }

        .site-body .bl-prose h4 {
            margin: 1.7em 0 .5em;
            font-size: 18px;
            font-weight: 700;
            color: var(--bl-ink);
        }

        .site-body .bl-prose img {
            border-radius: 12px;
            margin: 2em 0;
        }

        .site-body .bl-prose figure {
            margin: 2em 0;
        }

        .site-body .bl-prose figcaption {
            margin-top: 12px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--bl-mute);
            text-align: center;
        }

        .site-body .bl-prose blockquote {
            margin: 2em 0;
            padding: 2px 0 2px 22px;
            border-left: 3px solid var(--bl-brand);
            background: none;
            color: #33455e;
            font-size: 19px;
            line-height: 1.75;
        }

            .site-body .bl-prose blockquote p:last-child {
                margin-bottom: 0;
            }

        .site-body .bl-prose ul,
        .site-body .bl-prose ol {
            margin: 0 0 1.5em;
            padding-left: 1.35em;
        }

        .site-body .bl-prose li {
            margin: .45em 0;
        }

        .site-body .bl-prose a {
            color: var(--bl-brand);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .site-body .bl-prose hr {
            height: 0;
            margin: 3em 0;
            border: 0;
            border-top: 1px solid var(--bl-line);
        }

        .site-body .bl-prose table {
            margin: 2em 0;
            font-size: 16px;
        }

        .site-body .bl-prose pre {
            margin: 2em 0;
            border-radius: 12px;
            font-size: 15px;
        }

        .site-body .bl-prose iframe,
        .site-body .bl-prose video {
            max-width: 100%;
            border-radius: 12px;
        }

    /* ---------- 10. 文末区块（附件 / 标签 / 分享 / 系列 / 作者 / 页脚）---------- */

    .site-body .bl-block {
        margin-top: var(--bl-gap-lg);
    }

    .site-body .bl-block__title {
        margin: 0 0 18px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bl-sub);
    }

    /* 分享条：文章的「读完线」，只留上边一条细线，不再做成独立卡片 */
    .site-body .bl-article .cf-share {
        margin: var(--bl-gap-lg) 0 0;
        padding: 24px 0 0;
        border-top: 1px solid var(--bl-line);
        border-bottom: 0;
    }

    /* 系列导航 */
    .site-body .bl-series-nav {
        margin-top: var(--bl-gap-lg);
        padding-top: 26px;
        border-top: 1px solid var(--bl-line);
    }

    .site-body .bl-series-nav__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px 14px;
    }

    .site-body .bl-series-nav__label {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bl-brand);
    }

    .site-body .bl-series-nav__title {
        font-size: 17px;
        font-weight: 700;
        color: var(--bl-ink);
        text-decoration: none;
    }

        .site-body .bl-series-nav__title:hover {
            color: var(--bl-brand);
        }

    .site-body .bl-series-nav__progress {
        font-size: 13.5px;
        color: var(--bl-mute);
    }

    .site-body .bl-series-nav__pager {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin-top: 18px;
    }

    .site-body .bl-series-nav__item {
        display: block;
        padding: 16px 18px;
        border: 1px solid var(--bl-line);
        border-radius: 12px;
        text-decoration: none;
        transition: border-color .18s ease;
    }

        .site-body .bl-series-nav__item:hover {
            border-color: var(--bl-brand);
        }

    .site-body .bl-series-nav__dir {
        display: block;
        font-size: 13px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--bl-mute);
    }

    .site-body .bl-series-nav__item strong {
        display: block;
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.55;
        font-weight: 600;
        color: var(--bl-ink);
    }

    .site-body .bl-series-nav__item:hover strong {
        color: var(--bl-brand);
    }

    /* 作者卡（文末 / 作者页共用同一份 Partial） */
    .site-body .bl-author {
        display: flex;
        gap: 20px;
        padding: 28px;
        border: 1px solid var(--bl-line);
        border-radius: 16px;
        background: var(--bl-soft);
    }

    .site-body .bl-author__avatar {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--bl-line);
        text-decoration: none;
    }

        .site-body .bl-author__avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .site-body .bl-author__initial {
        font-size: 22px;
        font-weight: 700;
        color: var(--bl-brand);
    }

    .site-body .bl-author__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-body .bl-author__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 12px;
    }

    .site-body .bl-author__name {
        font-size: 17px;
        font-weight: 700;
        color: var(--bl-ink);
        text-decoration: none;
    }

        .site-body .bl-author__name:hover {
            color: var(--bl-brand);
        }

    .site-body .bl-author__count {
        font-size: 13.5px;
        color: var(--bl-mute);
    }

    .site-body .bl-author__bio {
        margin: 10px 0 0;
        font-size: 15px;
        line-height: 1.75;
        color: var(--bl-sub);
    }

    .site-body .bl-author__links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin-top: 12px;
        font-size: 13.5px;
    }

        .site-body .bl-author__links a {
            font-weight: 600;
            color: var(--bl-brand);
            text-decoration: none;
        }

    /* 页脚：版权 + 返回 */
    .site-body .bl-article__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: var(--bl-gap-lg);
        padding-top: 22px;
        border-top: 1px solid var(--bl-line);
    }

    .site-body .bl-article__copyright {
        flex: 1 1 260px;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--bl-mute);
    }

        .site-body .bl-article__copyright a {
            color: var(--bl-brand);
            text-decoration: none;
        }

    .site-body .bl-article__back {
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 600;
        color: var(--bl-brand);
        text-decoration: none;
    }

        .site-body .bl-article__back:hover {
            text-decoration: underline;
        }

    /* ---------- 11. 阅读进度条 ---------- */

    .site-body .bl-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: 3px;
        background: transparent;
        pointer-events: none;
    }

    .site-body .bl-progress__bar {
        width: 0;
        height: 100%;
        background: var(--bl-brand);
        transition: width .12s linear;
    }

    /* ---------- 12. 系列页头部 ---------- */

    .site-body .bl-series-hero {
        display: grid;
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 48px);
        align-items: center;
        padding-bottom: 40px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--bl-line);
    }

    /* 没有封面时不要留一条空轨道 */
    .site-body .bl-series-hero--text {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-body .bl-series-hero__cover {
        position: relative;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bl-soft);
    }

        .site-body .bl-series-hero__cover img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .site-body .bl-series-hero__label {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--bl-brand);
    }

    .site-body .bl-series-hero__title {
        margin: 14px 0 0;
        font-size: clamp(26px, 3.4vw, 38px);
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--bl-ink);
    }

    .site-body .bl-series-hero__sub {
        margin: 14px 0 0;
        font-size: 16.5px;
        line-height: 1.7;
        color: var(--bl-sub);
    }

    .site-body .bl-series-hero__desc {
        margin: 12px 0 0;
        max-width: 52ch;
        font-size: 15px;
        line-height: 1.78;
        color: var(--bl-sub);
    }

    .site-body .bl-series-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        margin-top: 20px;
        font-size: 14px;
        color: var(--bl-sub);
    }

        .site-body .bl-series-hero__meta a {
            font-weight: 600;
            color: var(--bl-brand);
            text-decoration: none;
        }

    /* ---------- 13. 作者页头部 ---------- */

    .site-body .bl-author-hero {
        padding-bottom: 40px;
        margin-bottom: 48px;
        border-bottom: 1px solid var(--bl-line);
    }

    .site-body .bl-author-hero__top {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .site-body .bl-author-hero__avatar {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 96px;
        height: 96px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--bl-soft);
        border: 1px solid var(--bl-line);
    }

        .site-body .bl-author-hero__avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .site-body .bl-author-hero__initial {
        font-size: 34px;
        font-weight: 700;
        color: var(--bl-brand);
    }

    .site-body .bl-author-hero__title {
        margin: 0;
        font-size: clamp(26px, 3.4vw, 38px);
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--bl-ink);
    }

    .site-body .bl-author-hero__bio {
        margin: 14px 0 0;
        max-width: 46rem;
        font-size: 16.5px;
        line-height: 1.8;
        color: var(--bl-sub);
    }

    .site-body .bl-author-hero__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 18px;
        margin-top: 18px;
        font-size: 14px;
        color: var(--bl-mute);
    }

        .site-body .bl-author-hero__meta a {
            font-weight: 600;
            color: var(--bl-brand);
            text-decoration: none;
        }

/* ---------- 14. 断点 ---------- */

@media (max-width: 1040px) {
    .site-body .bl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .site-body .bl-page {
        padding: 32px 0 64px;
    }

    .site-body .bl-featured {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .site-body .bl-series-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .site-body .bl-masthead {
        margin-bottom: 36px;
    }
}

@media (max-width: 660px) {
    .site-body .bl-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .site-body .bl-card__media {
        margin-bottom: 14px;
    }

    .site-body .bl-prose {
        font-size: 17px;
        line-height: 1.82;
    }

    .site-body .bl-article {
        padding: 28px 0 64px;
    }

        .site-body .bl-article .cf-crumbs-row {
            margin-bottom: 28px;
        }

    .site-body .bl-article__sub {
        font-size: 17px;
    }

    .site-body .bl-article__lead {
        font-size: 17px;
    }

    .site-body .bl-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 16px;
    }

    .site-body .bl-row__date {
        display: none;
    }

    .site-body .bl-author {
        flex-direction: column;
        gap: 16px;
        padding: 22px;
    }

    .site-body .bl-author-hero__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .site-body .bl-author-hero__avatar {
        width: 76px;
        height: 76px;
    }

    .site-body .bl-page .cf-pager {
        margin-top: 48px;
    }
}

/* ---------- 15. 文章页布局：正文 + 左侧栏 ---------- */
/* 为什么左侧栏在 ≥1200px 出现：
   正文固定 704，左右两条空轨用 1fr 平分余量（宽屏约 216，1280 屏约 206），
   正文因此永远落在视口正中；再窄下去两条轨道会被压到 150 以内，
   侧栏标题频繁折行，不如把同一块内容顺移到文末。 */

.site-body .bl-article-layout {
    display: grid;
    /* 窄屏：单列；正文在上，侧栏顺移到文末 */
    grid-template-columns: minmax(0, var(--bl-measure));
    justify-content: center;
    align-items: start;
}

    .site-body .bl-article-layout .bl-article {
        order: 1;
        grid-column: 1;
    }

.site-body .bl-rail-gap {
    display: none;
}

.site-body .bl-rail {
    order: 2;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--bl-line);
}

.site-body .bl-rail__block + .bl-rail__block {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--bl-line);
}

.site-body .bl-rail__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bl-sub);
}

.site-body .bl-rail {
    min-width: 0;
}

.site-body .bl-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-body .bl-rail__author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
}

.site-body .bl-rail__author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bl-soft);
}

.site-body .bl-rail__author-avatar--text {
    background: rgba(0, 143, 205, .12);
    color: var(--bl-brand);
    font-size: 12px;
    font-weight: 700;
}

.site-body .bl-rail__author-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--bl-ink);
}

.site-body .bl-rail__author:hover .bl-rail__author-name {
    color: var(--bl-brand);
}

.site-body .bl-rail__item {
    display: block;
    padding: 7px 0;
    text-decoration: none;
}

.site-body .bl-rail__item-title {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--bl-ink);
}

.site-body .bl-rail__item:hover .bl-rail__item-title {
    color: var(--bl-brand);
}

.site-body .bl-rail__item-meta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--bl-mute);
}

/* 平板：文末的侧栏摊成多列，别拉成一条长列表 */
@media (min-width: 720px) and (max-width: 1199px) {
    .site-body .bl-rail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 32px;
    }

    .site-body .bl-rail__block + .bl-rail__block {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* 宽屏：左栏吸顶 + 右侧等宽空轨，正文严格居中
   —— 左右轨道用 1fr 而不是死写 216px：容器内容宽随视口变化（1300 视口只有 1216），
      死写三轨 216+704+216+80 = 1216 在 1280 这类屏上放不下，
      要么溢出、要么只能把断点抬到 1300 以上（1280 笔记本就永远看不到左栏）。
      1fr 让两条空轨自动平分余量：1440 上仍是 216，1280 上收成 206，正文始终居中。 */
@media (min-width: 1200px) {
    .site-body .bl-article-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--bl-measure)) minmax(0, 1fr);
        column-gap: 40px;
    }

        /* 三个元素必须显式钉在同一行：只写 grid-column 时，自动排列是「稀疏」的，
       一旦 order 把侧栏排到前面，正文就会因为游标已经越过而掉到第二行（页顶空出半屏）。 */
        .site-body .bl-article-layout .bl-article {
            grid-column: 2;
            grid-row: 1;
        }

    .site-body .bl-rail {
        display: block;
        order: 0;
        grid-column: 1;
        grid-row: 1;
        max-width: 216px;
        margin: 0;
        padding: 56px 0 0;
        border-top: 0;
        position: sticky;
        /* 92px 是吸顶导航高度，留 20px 呼吸 */
        top: 112px;
    }

    .site-body .bl-rail-gap {
        display: block;
        grid-column: 3;
        grid-row: 1;
    }
}

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-05 话题聚合列表] =====
   一条内容一张卡：标题 + 推荐语。用 grid + auto-fill 而不是固定列数 ——
   聚合条目数量由运营决定（0~50），列数写死会在条目少时留下大片空白。 */
.site-body .nlsh-topic-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.site-body .nlsh-topic-item__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius-sm);
    background: #fff;
    color: var(--nlsh-ink);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-body a.nlsh-topic-item__link:hover {
    border-color: var(--nlsh-brand);
    box-shadow: var(--nlsh-shadow);
    transform: translateY(-2px);
    color: var(--nlsh-ink);
}

.site-body .nlsh-topic-item__title {
    font-weight: 600;
    line-height: 1.5;
}

.site-body .nlsh-topic-item__note {
    font-size: 0.875rem;
    color: var(--nlsh-muted, #6b7280);
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .site-body .nlsh-topic-items {
        grid-template-columns: 1fr;
    }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-05 话题聚合分页] =====
   scroll-margin-top：翻页后 JS 会 scrollIntoView，不给固定头留位置的话列表标题会被压在导航底下。 */
.site-body .nlsh-topic-items {
    scroll-margin-top: 104px;
}

.site-body .nlsh-topic-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.site-body .nlsh-topic-pager__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--nlsh-line);
    border-radius: var(--nlsh-radius-sm);
    background: #fff;
    color: var(--nlsh-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

    .site-body .nlsh-topic-pager__btn:hover:not(:disabled) {
        border-color: var(--nlsh-brand);
        color: var(--nlsh-brand);
    }

    .site-body .nlsh-topic-pager__btn.is-current {
        border-color: var(--nlsh-brand);
        background: var(--nlsh-brand);
        color: #fff;
        cursor: default;
    }

    .site-body .nlsh-topic-pager__btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

@media (max-width: 575.98px) {
    .site-body .nlsh-topic-pager__btn {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 13px;
    }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [SITE] [2026-11-07 nlsh360 可读性 / 字阶 / 可访问性升级层] =====
   定位：中文政务 / 严肃类站点。保留既有深蓝配色与 --nlsh-radius 圆角体系，
   不引入暖金、不引入西文 measure 行宽，不改任何结构尺寸。
   只做 4 件可量化的事：
     ① 可见文字字号下限 12px；② 长文本行高统一到 1.7；
     ③ 次要灰蓝字 --cf-faint 由 3.06:1 提到 5.28:1（WCAG AA）；
     ④ 补焦点可见、触控目标 >=44px、窄屏不溢出、尊重 reduced-motion。
   全部是末尾覆盖式规则；删除本段即 100% 回退到 2026-11-06 版本。
   ================================================================================ */

.site-body {
    --nlsh-fs-caption: 12px;
    --nlsh-lh-body: 1.7;
    --nlsh-lh-compact: 1.5;
    /* #8595A8 在白底仅 3.06:1 / 浅底 2.86:1，达不到 AA 正文标准 */
    --cf-faint: #5d6d82;
    /* clip 不创建滚动容器，不会破坏吸顶导航（hidden 会） */
    overflow-x: clip;
}

    /* 1. 字号下限：新闻日期 11.5px、附件 / 下载徽章 11px */
    .site-body .nlsh-news__date small {
        font-size: var(--nlsh-fs-caption);
        line-height: var(--nlsh-lh-compact);
    }

    .site-body .nlsh-file__icon,
    .site-body .nlsh-download__ext {
        font-size: var(--nlsh-fs-caption);
        letter-spacing: .2px;
    }

    /* 2. 字阶：长文本统一 1.7 行高；标题沿用原值，紧凑列表不动 */
    .site-body .nlsh-about__body p,
    .site-body .nlsh-card__desc,
    .site-body .nlsh-news__desc,
    .site-body .site-footer__desc,
    .site-body .cf-column__intro,
    .site-body .cf-text-list__summary {
        line-height: var(--nlsh-lh-body);
    }

    /* 3. 中文标点 / 超长英文型号不撑破卡片与标题 */
    .site-body .nlsh-card__title,
    .site-body .nlsh-card__desc,
    .site-body .nlsh-news__title,
    .site-body .nlsh-sec-title {
        overflow-wrap: anywhere;
        text-wrap: pretty;
    }

    .site-body img {
        max-width: 100%;
        height: auto;
    }

    /* 4a. 焦点可见：原 .cf-search-form input 是唯一「裸 outline:none 且无 ring」的元素 */
    .site-body .cf-search-form input:focus-visible,
    .site-body .nlsh-field input:focus-visible,
    .site-body .nlsh-field select:focus-visible,
    .site-body .nlsh-field textarea:focus-visible {
        outline: 2px solid var(--nlsh-brand-2);
        outline-offset: 2px;
    }
    /* 低特异度全局兜底：:where() 为 0，已有更具体的 :focus-visible 规则优先 */
    .site-body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid var(--nlsh-brand-2);
        outline-offset: 2px;
    }

    /* 4b. 触控目标：WCAG 2.5.8 下限 24px，这里按移动端易用性提到 44px */
    .site-body .site-topbar__item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .site-body .site-search button,
    .site-body .site-nav__caret {
        min-width: 44px;
        min-height: 44px;
    }

@media (max-width: 860px) {
    .site-body .site-nav__link {
        /*        min-height: 44px; */
    }
}

/* 4c. 动效尊重系统偏好（原有 reduced-motion 只覆盖了少数动画） */
@media (prefers-reduced-motion: reduce) {
    .site-body *,
    .site-body *::before,
    .site-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ===== WORKBUDDYAI_UPDATE_E [SITE] ===== */
