/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-23 前台内容样式（主题 Default 共用）] =====
   作用域：pages_template/{Theme}/Cms/*.cshtml 引用的公共样式表。
   设计原则：
     1. 只用 CSS 变量做主题令牌，换主题改这段变量即可，不必翻模板；
     2. 不依赖 Bootstrap（前台要独立于后台主题，后台升级不能影响落地页）；
     3. 正文排版按阅读舒适度定（行高 1.85、段距 1.2em、最大行宽 760px）。
   ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

:root {
    --cf-ink: #111827;
    --cf-sub: #6b7280;
    --cf-faint: #9ca3af;
    --cf-line: #e5e7eb;
    --cf-soft: #f8fafc;
    --cf-brand: #1d4ed8;
    --cf-brand-soft: #eff6ff;
    --cf-danger: #b91c1c;
    --cf-radius: 10px;
    --cf-wrap: 1120px;
    --cf-measure: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.cf-body {
    margin: 0;
    background: #fff;
    color: var(--cf-ink);
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

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

.cf-wrap {
    margin-top:1rem!important;
    max-width: var(--cf-wrap);
    margin: 0 auto;
    padding: 0 20px;
}

.cf-link { color: var(--cf-brand); text-decoration: none; }
.cf-link:hover { text-decoration: underline; }

/* ---------------- 页头 ---------------- */

.cf-header {
    border-bottom: 1px solid var(--cf-line);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.cf-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}

.cf-logo {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--cf-ink);
    text-decoration: none;
    white-space: nowrap;
}

.cf-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cf-nav::-webkit-scrollbar { display: none; }

.cf-nav a {
    color: var(--cf-sub);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.cf-nav a:hover,
.cf-nav a.is-active {
    color: var(--cf-ink);
    border-bottom-color: var(--cf-brand);
}

.cf-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cf-search input {
    width: 168px;
    padding: 7px 11px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--cf-ink);
}

.cf-search input:focus { border-color: var(--cf-brand); }

.cf-search button {
    padding: 7px 14px;
    border: 1px solid var(--cf-line);
    background: #fff;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    color: var(--cf-ink);
}

.cf-search button:hover { border-color: var(--cf-brand); color: var(--cf-brand); }

/* ---------------- 面包屑 ---------------- */

.cf-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--cf-faint);
    padding: 18px 0 0;
}

.cf-crumbs a { color: var(--cf-sub); text-decoration: none; }
.cf-crumbs a:hover { color: var(--cf-brand); }
.cf-crumbs span.sep { color: var(--cf-line); }

/* ---------------- 详情 ---------------- */

.cf-article { padding: 26px 0 64px; }

.cf-article__head { max-width: var(--cf-measure); }

.cf-article__title {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.32;
    margin: 8px 0 14px;
    letter-spacing: -.01em;
}

.cf-article__sub {
    font-size: 17px;
    color: var(--cf-sub);
    margin: 0 0 16px;
    line-height: 1.7;
}

.cf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13.5px;
    color: var(--cf-faint);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cf-line);
}

.cf-cover {
    margin: 26px 0 0;
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: var(--cf-soft);
}

.cf-cover img { display: block; width: 100%; }

.cf-prose {
    max-width: var(--cf-measure);
    margin: 30px 0 0;
    font-size: 16.5px;
    line-height: 1.85;
    color: #1f2937;
    overflow-wrap: break-word;
}

.cf-prose > *:first-child { margin-top: 0; }

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-09 SunEditor 内容样式接入的收口] =====
   正文容器同时带 .sun-editor-editable（前台引了 suneditor-contents.min.css），
   后台设的图片居中 / 表格 / 列表 / 缩进 / 图注到前台就一致了。
   但那份 CSS 是「编辑器画布」，会给容器自身写 font-family:Helvetica Neue / background:#fff /
   padding:16px —— .cf-prose 没声明过这三项，不压掉就会正文换字体、左右各多 16px、出现白底块。
   本文件是 Default / Template_1 共用的一份，两个模板同时生效；只作用于带 .sun-editor-editable 的容器。 ===== */
.cf-prose.sun-editor-editable {
    font-family: inherit;
    padding: 0;
    background: transparent;
}
/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-11-09 区块内容（CmsBlock）的编辑器对齐] =====
   首页简介、页脚站名/简介这些区块同样是后台 SunEditor 产出的，后台里能插图片并对齐，
   前台不会 —— 原因和正文一样：.se-* 规则只定义在 .sun-editor-editable 作用域内。
   区块输出不额外包容器（模板版式依赖直接子元素结构），所以只补对齐依赖的几条，
   挂 .site-body 根类；带 .sun-editor-editable 的正文容器用 :not() 排除，互不覆盖。
   本文件 Default / Template_1 共用，两个模板同时生效。 ===== */
.site-body .se-component:not(.sun-editor-editable *) {
    display: flex; max-width: 100%; margin: 0 0 1em;
}
.site-body .se-component:not(.sun-editor-editable *) > figure {
    margin: 0; min-width: 0; max-width: 100%;
}
.site-body .__se__float-center:not(.sun-editor-editable *) { justify-content: center; }
.site-body .__se__float-center:not(.sun-editor-editable *) > figure { margin: auto; }
.site-body .__se__float-left:not(.sun-editor-editable *) { float: left; margin: 0 8px 8px 0; }
.site-body .__se__float-right:not(.sun-editor-editable *) { float: right; margin: 0 0 8px 8px; }
.site-body .se-component:not(.sun-editor-editable *) img,
.site-body .se-component:not(.sun-editor-editable *) iframe,
.site-body .se-component:not(.sun-editor-editable *) video {
    display: block; max-width: 100%; height: auto;
}
/* ===== WORKBUDDYAI_UPDATE_E ===== */
.cf-prose p { margin: 0 0 1.2em; }
.cf-prose h2 { font-size: 23px; line-height: 1.4; margin: 1.9em 0 .7em; }
.cf-prose h3 { font-size: 19px; line-height: 1.45; margin: 1.6em 0 .6em; }
.cf-prose h4 { font-size: 17px; margin: 1.4em 0 .5em; }
.cf-prose ul, .cf-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.cf-prose li { margin: .35em 0; }
.cf-prose a { color: var(--cf-brand); text-decoration: underline; text-underline-offset: 2px; }
.cf-prose img { border-radius: 8px; margin: 1.4em 0; }
.cf-prose blockquote {
    margin: 1.4em 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--cf-brand);
    color: var(--cf-sub);
    background: var(--cf-soft);
}
.cf-prose pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 16px 18px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}
.cf-prose code { font-size: .92em; }
.cf-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.cf-prose th, .cf-prose td { border: 1px solid var(--cf-line); padding: 9px 12px; text-align: left; }
.cf-prose th { background: var(--cf-soft); font-weight: 600; }

/* ---------------- 产品 ---------------- */

.cf-gallery { margin: 26px 0 0; }

.cf-gallery__main {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: var(--cf-soft);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-gallery__main img { width: 100%; height: 100%; object-fit: contain; }

.cf-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.cf-gallery__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--cf-soft);
    padding: 0;
}

.cf-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-gallery__thumb.is-active { border-color: var(--cf-brand); }

.cf-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 0;
}

.cf-price__now { font-size: 28px; font-weight: 700; color: var(--cf-danger); }
.cf-price__old { font-size: 15px; color: var(--cf-faint); text-decoration: line-through; }

.cf-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--cf-sub);
}

.cf-spec span {
    background: var(--cf-soft);
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    padding: 3px 11px;
}

/* ---------------- 扩展字段规格表 ---------------- */

/* 两列自适应：窄屏一列、宽屏两列。用 auto-fit 而不是固定列数，
   这样字段少的时候不会出现大片空白，字段多时也能自动铺开。 */
.cf-fields {
    margin: 28px 0 0;
    padding: 18px 20px;
    background: var(--cf-soft);
    border: 1px solid var(--cf-line);
    border-radius: 10px;
}

.cf-fields__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 26px;
    margin: 0;
}

.cf-fields__row {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    min-width: 0;
}

.cf-fields__label {
    flex: 0 0 auto;
    color: var(--cf-sub);
    white-space: nowrap;
}

.cf-fields__label::after {
    content: "：";
}

.cf-fields__value {
    margin: 0;
    color: var(--cf-ink);
    word-break: break-word;
    min-width: 0;
}

/* ---------------- 标签 / 附件 ---------------- */

.cf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }

.cf-tag {
    font-size: 13px;
    color: var(--cf-sub);
    background: var(--cf-soft);
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    padding: 4px 12px;
    text-decoration: none;
}

.cf-tag:hover { color: var(--cf-brand); border-color: var(--cf-brand); }

.cf-files { margin: 30px 0 0; }

.cf-files__title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }

.cf-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--cf-line);
    border-radius: 8px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--cf-ink);
    font-size: 14.5px;
}

.cf-file:hover { border-color: var(--cf-brand); background: var(--cf-brand-soft); }
.cf-file__size { margin-left: auto; color: var(--cf-faint); font-size: 13px; white-space: nowrap; }

/* ---------------- 锁定（预览壳） ---------------- */

.cf-lock {
    margin: 30px 0 0;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: linear-gradient(180deg, #fff 0%, var(--cf-soft) 100%);
    padding: 34px 28px;
    text-align: center;
    max-width: var(--cf-measure);
}

.cf-lock__title { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.cf-lock__hint { color: var(--cf-sub); font-size: 14.5px; margin: 0 0 18px; }

.cf-btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 8px;
    background: var(--cf-brand);
    color: #fff;
    text-decoration: none;
    font-size: 14.5px;
    border: 1px solid var(--cf-brand);
    cursor: pointer;
}

.cf-btn:hover { filter: brightness(1.08); }

.cf-btn--ghost {
    background: #fff;
    color: var(--cf-ink);
    border-color: var(--cf-line);
}

/* ---------------- 评论 ---------------- */

.cf-comments { margin: 46px 0 0; max-width: var(--cf-measure); }

.cf-comments__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cf-line);
}

.cf-comment {
    padding: 14px 0;
    border-bottom: 1px dashed var(--cf-line);
}

.cf-comment__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--cf-faint);
    margin-bottom: 6px;
}

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

.cf-comment__badge {
    font-size: 11.5px;
    color: var(--cf-brand);
    background: var(--cf-brand-soft);
    border-radius: 4px;
    padding: 1px 6px;
}

.cf-comment__body { font-size: 15px; color: #1f2937; white-space: pre-wrap; overflow-wrap: break-word; }

.cf-comment__children { margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--cf-line); }

.cf-notice {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    background: var(--cf-brand-soft);
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
}

.cf-notice--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.cf-form { margin: 22px 0 0; }

.cf-form__row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form textarea {
    width: 100%;
    border: 1px solid var(--cf-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--cf-ink);
}

.cf-form input:focus, .cf-form textarea:focus { border-color: var(--cf-brand); }
.cf-form textarea { min-height: 108px; resize: vertical; }
.cf-form__row > * { flex: 1 1 220px; }

/* 蜜罐字段：视觉与语义上都藏起来（display:none 会被部分机器人识别，这里用绝对定位移出视口） */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-24 视频 facade 与图集网格样式（此前只有 HTML 没有样式）] =====
   背景：/Pages/Cms/Article.cshtml 与各栏目详情模板输出的 .cf-video 是「封面 + 播放按钮」的门面，
   点一下才由 site.js 换成真正的 video/iframe（一个页面嵌多个第三方播放器会拖死首屏）。
   但 .cf-video 系列类一直没写样式 —— 结果是一张原尺寸大图加一个飘走的 SVG，看不出能点。
   放进 cms-front.css 而不是某个主题里：这两块属于「CMS 内容区」的通用语义，换主题也要有。 */

.cf-video { margin: 26px 0 0; }

.cf-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: #0b1220;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.cf-video__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: opacity 0.25s ease, transform 0.4s ease;
}

.cf-video__frame:hover img { opacity: 1; transform: scale(1.02); }

.cf-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    color: var(--cf-brand);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    pointer-events: none;
}

.cf-video__play svg { margin-left: 3px; }
.cf-video__frame:hover .cf-video__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

.cf-video__hint { margin: 8px 0 0; font-size: 13.5px; color: var(--cf-sub); }

/* 播放器已经挂上（site.js 把 facade 换成 video/iframe）后，「点击封面播放」就没有意义了，收起来 */
.cf-video:has(.site-video__player) .cf-video__hint { display: none; }

/* site.js 把 facade 替换成播放器后，播放器直接挂在 .cf-video 里，这里兜住尺寸 */
.cf-video .site-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--cf-radius);
    background: #000;
}

/* ---------------- 图集网格（BaseKind = Gallery 的主图组） ---------------- */

.cf-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 24px 0 0;
}

.cf-gallery-grid__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cf-soft);
}

.cf-gallery-grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.cf-gallery-grid__item:hover img { transform: scale(1.04); }

@media (max-width: 720px) {
    .cf-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .cf-video__play { width: 52px; height: 52px; }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ---------------- 列表 ---------------- */

.cf-list { padding: 24px 0 64px; }

.cf-list__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cf-line);
}

.cf-list__title { font-size: clamp(22px, 2.6vw, 30px); margin: 0; line-height: 1.35; }
.cf-list__count { font-size: 13.5px; color: var(--cf-faint); }

.cf-sorts { display: flex; gap: 8px; }

.cf-sorts a {
    font-size: 13.5px;
    color: var(--cf-sub);
    text-decoration: none;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    padding: 4px 12px;
}

.cf-sorts a.is-active { color: var(--cf-brand); border-color: var(--cf-brand); background: var(--cf-brand-soft); }

/* ---------------- 文字列表（通用列表页 Text 布局） ---------------- */

.cf-text-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.cf-text-list__item {
    border-bottom: 1px solid var(--cf-line);
}

.cf-text-list__item:first-child {
    border-top: 1px solid var(--cf-line);
}

.cf-text-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 4px;
    text-decoration: none;
    color: inherit;
    transition: color .15s ease;
}

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

.cf-text-list__main {
    flex: 1;
    min-width: 0;
}

.cf-text-list__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    color: var(--cf-ink);
    transition: color .15s ease;
}

.cf-text-list__summary {
    font-size: 14px;
    color: var(--cf-sub);
    line-height: 1.6;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-text-list__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--cf-faint);
}

.cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 24px;
    margin: 26px 0 0;
}

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

.cf-card:hover { border-color: #c7d2fe; transform: translateY(-2px); }

.cf-card__cover {
    aspect-ratio: 16 / 9;
    background: var(--cf-soft);
    overflow: hidden;
}

.cf-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-card__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-faint);
    font-size: 13px;
}

.cf-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.cf-card__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-card__summary {
    font-size: 14px;
    color: var(--cf-sub);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 12.5px;
    color: var(--cf-faint);
}

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

.cf-badge {
    font-size: 11.5px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--cf-brand-soft);
    color: var(--cf-brand);
}

.cf-badge--lock { background: #fef3c7; color: #92400e; }
.cf-badge--top { background: #fee2e2; color: var(--cf-danger); }

/* ---------------- 分页 ---------------- */

.cf-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 0;
    flex-wrap: wrap;
}

.cf-pager a, .cf-pager span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cf-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--cf-sub);
    text-decoration: none;
}

.cf-pager a:hover { border-color: var(--cf-brand); color: var(--cf-brand); }
.cf-pager .is-active { background: var(--cf-brand); border-color: var(--cf-brand); color: #fff; }
.cf-pager .is-disabled { color: var(--cf-line); pointer-events: none; }

/* ---------------- 空态 / 404 ---------------- */

.cf-empty {
    text-align: center;
    padding: 72px 20px;
    color: var(--cf-faint);
}

.cf-empty__title { font-size: 20px; color: var(--cf-ink); margin: 0 0 10px; }
.cf-empty__hint { margin: 0 0 22px; }

/* ---------------- 页脚 ---------------- */

.cf-footer {
    border-top: 1px solid var(--cf-line);
    margin-top: 40px;
    padding: 28px 0 40px;
    font-size: 13px;
    color: var(--cf-faint);
}

.cf-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
}

.cf-footer a { color: var(--cf-sub); text-decoration: none; }
.cf-footer a:hover { color: var(--cf-brand); }

/* ---------------- 响应式 ---------------- */

@media (max-width: 720px) {
    .cf-header__inner { gap: 12px; min-height: 56px; }
    .cf-nav { gap: 16px; }
    .cf-search input { width: 120px; }
    .cf-grid { grid-template-columns: 1fr; gap: 18px; }
    .cf-text-list__link { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cf-text-list__meta { width: 100%; }
    .cf-prose { font-size: 16px; }
    .cf-lock { padding: 26px 18px; }
    .cf-article { padding-bottom: 44px; }
}

@media print {
    .cf-header, .cf-footer, .cf-comments, .cf-pager, .cf-sorts { display: none !important; }
}

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-24 留言 / 询价表单样式] =====
   背景：产品详情模板早就渲染了 Shared/Cms/_InquiryForm.cshtml，但 .nlsh-inquiry 系列类一直没样式，
   结果是标签、输入框、按钮全挤成一列裸元素。放 cms-front.css 而不是主题里：
   询价是 CMS 内容区的通用语义，换主题也该有样式。变量沿用上面的 --cf-* 那套。 */

.nlsh-inquiry {
    margin: 46px 0 0;
    padding: 26px 24px;
    max-width: var(--cf-measure);
    background: var(--cf-soft);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
}

.nlsh-inquiry__title { margin: 0 0 8px; font-size: 19px; color: var(--cf-ink); }

.nlsh-inquiry__sub { margin: 0 0 18px; font-size: 13.5px; color: var(--cf-sub); }

/* 必填星号：用 <i class="req"> 而非 <span>，避免被全局 span 规则额外加样式 */
.req { color: var(--cf-danger); font-style: normal; }

.nlsh-inquiry__notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.nlsh-inquiry__notice--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.nlsh-inquiry__notice--fail { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.nlsh-inquiry__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.nlsh-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: var(--cf-sub);
}

.nlsh-field--full { grid-column: 1 / -1; }

.nlsh-field input,
.nlsh-field select,
.nlsh-field textarea {
    width: 100%;
    border: 1px solid var(--cf-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    color: var(--cf-ink);
    outline: none;
}

.nlsh-field input:focus,
.nlsh-field select:focus,
.nlsh-field textarea:focus {
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.nlsh-field textarea { min-height: 110px; resize: vertical; }

.nlsh-inquiry__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.nlsh-inquiry__submit {
    background: var(--cf-brand);
    border-color: transparent;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.nlsh-inquiry__tip { margin: 0; font-size: 12.5px; color: var(--cf-faint); }

@media (max-width: 720px) {
    .nlsh-inquiry { padding: 20px 16px; }
    .nlsh-inquiry__grid { grid-template-columns: 1fr; }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-24 询价弹窗（Bootstrap modal）] =====
   前台已引 bootstrap.bundle.min.js，弹窗直接用官方组件：
   遮罩、焦点陷阱、ESC 关闭、滚动锁全由 Bootstrap 负责，这里只做品牌化的外观覆盖。 */

.nlsh-inquiry-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
}

.nlsh-inquiry-modal .modal-header { align-items: flex-start; border-bottom: 1px solid var(--cf-line); }

.nlsh-inquiry-modal .modal-title { font-size: 19px; color: var(--cf-ink); }

/* 弹窗内不再需要「卡片外壳」：底色与内边距由 modal-content / modal-body 提供 */
.nlsh-inquiry-modal .nlsh-inquiry {
    margin: 0;
    padding: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 主题的弹窗内边距规则会压到 .25em，这里显式加厚一点，表单才不贴边 */
.nlsh-inquiry-modal .modal-body { padding: 18px 20px 20px !important; }
.nlsh-inquiry-modal .modal-header { padding: 16px 20px 12px; }

.nlsh-inquiry__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

@media (max-width: 720px) {
    .nlsh-inquiry-modal .modal-body { padding: 14px 14px 16px !important; }
    .nlsh-inquiry__grid { grid-template-columns: 1fr; }
}

/* 产品正文里的视频块：.cf-video 自带 26px 上边距，套在 .nlsh-block 里会与标题间距叠加 */
.nlsh-block--video .cf-video { margin-top: 0; }
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-24 通用栏目首页的分类简介] =====
   /page/index 在标题下渲染后台分类的 Description，列表页（/page/list）不渲染。
   限宽是为了长简介在大屏上不会一行跨到 1400px 以上，读起来太累。 */
.cf-column__intro {
    margin: 6px 0 0;
    max-width: 880px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--cf-sub);
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-28 详情页社媒分享条（cf-share / cf-share-qr）] =====
   设计说明：
   ① 按钮是「品牌色圆点 + 文字」而不是品牌 logo —— 一是不引外部图标资源，二是不误用商标图形；
      品牌色通过 --share-brand 内联下发（见 cms-share.js），这里只管状态与排布。
   ② 尺寸按 32px 高度、可点面积 32px，触摸端单独放大到 40px（移动端手指精度不够）。
   ③ 与正文的关系：作为内容块之间的「分隔条」，上下各 1px 线，视觉上不抢正文。 */
.cf-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: 28px 0;
    padding: 14px 0;
    border-top: 1px solid var(--cf-line);
    border-bottom: 1px solid var(--cf-line);
}

.cf-share.is-center { justify-content: center; }

.cf-share.is-end { justify-content: flex-end; }

.cf-share__label {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--cf-sub);
    letter-spacing: .02em;
}

.cf-share__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.cf-share__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .7rem;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cf-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}

.cf-share__btn:hover,
.cf-share__btn:focus-visible {
    border-color: var(--share-brand, var(--cf-brand));
    color: var(--share-brand, var(--cf-brand));
    background: #fff;
    transform: translateY(-1px);
}

.cf-share__btn:focus-visible {
    outline: 2px solid var(--share-brand, var(--cf-brand));
    outline-offset: 2px;
}

.cf-share__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--share-brand, var(--cf-brand));
    flex: 0 0 auto;
}

.cf-share__text { white-space: nowrap; }

/* 复制成功的轻提示：固定底部居中，不打断阅读 */
.cf-share__toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 60;
    transform: translate(-50%, 12px);
    padding: .55rem 1rem;
    border-radius: 8px;
    background: rgba(17, 24, 39, .92);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.cf-share__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 微信二维码弹层 ---------- */
.cf-share-qr {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
}

.cf-share-qr.is-open { display: block; }

.cf-share-qr__mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.cf-share-qr__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(300px, calc(100vw - 40px));
    padding: 22px 20px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
    text-align: center;
}

.cf-share-qr__close {
    position: absolute;
    right: 8px;
    top: 6px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cf-sub);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cf-share-qr__close:hover { background: var(--cf-soft); color: var(--cf-ink); }

.cf-share-qr__canvas {
    display: block;
    margin: 6px auto 0;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.cf-share-qr__hint {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--cf-ink);
}

.cf-share-qr__url {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--cf-faint);
    word-break: break-all;
}

@media (max-width: 640px) {
    .cf-share { gap: .5rem; }
    .cf-share__btn { height: 40px; padding: 0 .85rem; font-size: 13.5px; }
}
/* ==================== 常见问题（FAQ） ==================== */
/* 与 JSON-LD 的 FAQPage 一一对应：结构化数据声明了问答，页面就必须能看到同样的问答 */

.cf-faq {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cf-line);
}

.cf-faq__title {
    font-size: 1.125rem;
    font-weight: 700 !important;
    color: var(--cf-ink) !important;
    margin: 0 0 0.8rem !important;
    line-height: 1.4 !important;
}

.cf-faq__item {
    margin-bottom: 1.1rem;
}

.cf-faq__item:last-child {
    margin-bottom: 0;
}

.cf-faq__q {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cf-ink);
    margin: 0 0 .3rem;
    line-height: 1.6;
}

.cf-faq__a {
    font-size: .9375rem;
    line-height: 1.85;
    color: var(--cf-sub);
    /* 答案里可能有换行，保留出来；不能靠 <br> 因为是纯文本录入 */
    white-space: pre-wrap;
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-30 详情页语言切换条（挂在面包屑行右端）] ===== */
/* 只有「这篇内容有译文」时 _LanguageSwitch.cshtml 才输出这个节点，其它页面不存在。
   位置见 _Breadcrumbs.cshtml：与面包屑同一行、靠右。这属于「读正文之前的导航区」，
   访客扫标题前一定会看到；不单独占一条横带，所以不额外占高度，
   也不会像早先那样在 Banner 与正文之间飘出一条来历不明的空白。 */

/* 面包屑 + 语言条的一行。原来 .cf-crumbs 自己的 18px 顶距挪到这一层，
   两个子项才能垂直居中对齐（否则语言条会被顶上 18px 的留白推下去）。 */
.cf-crumbs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 行间距给到 10px：窄屏语言条换行后与面包屑是两行 13px 小字，8px 会显得黏 */
    gap: .6rem .9rem;
    /* 顶距在行上（原来在 .cf-crumbs 上）。底距不写死：各详情模板自己的节奏
       （nlsh360.css 里 .nlsh-detail 16/18px、.bl-article 40/28px、.nlsh-page-hero 18px）
       已经迁到 .cf-crumbs-row 上，这里再加会和它叠加成双倍。 */
    padding: 18px 0 0;
}

/* 🔴 关键：面包屑自己的上下间距必须清零。
   各模板原来给 .cf-crumbs 挂了 margin-bottom（博客 PC 40px、窄屏 28px）——
   在 flex 行里 align-items:center 会连同这段 margin 一起参与居中，
   语言条被硬生生往下推 20px/14px，直接压到下面那行 badge 上。
   间距交给行（.cf-crumbs-row）统一管，两个子项才能真正对齐。 */
.cf-crumbs-row .cf-crumbs {
    padding: 0;
    margin: 0;
}

.cf-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    /* 面包屑很长时也要把语言条顶到右端 */
    margin-left: auto;
    font-size: .8125rem;
    line-height: 1.6;
}

.cf-lang__label {
    color: var(--cf-faint);
    margin-right: .1rem;
}

.cf-lang__item {
    padding: .1rem .58rem;
    border-radius: 999px;
    border: 1px solid var(--cf-line);
    color: var(--cf-sub);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}

.cf-lang__item:hover {
    border-color: var(--cf-brand);
    color: var(--cf-brand);
    background: var(--cf-brand-soft);
}

/* 当前语言：实心且不可点 —— 一眼看出「现在就是这种语言」，也避免「点了没反应」 */
.cf-lang__item.is-active {
    border-color: var(--cf-brand);
    background: var(--cf-brand);
    color: #fff;
    font-weight: 600;
}

/* 窄屏：面包屑与语言条只能各占一行时，语言条改成左对齐 —— 换行后还硬靠右会显得散 */
@media (max-width: 640px) {
    .cf-lang {
        margin-left: 0;
    }
}
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */

/* ===== WORKBUDDYAI_UPDATE_B [CMS] [2026-10-30 语言切换条：撤出顶部信息条] ===== */
/* 这里曾有一整套 .site-topbar .cf-lang 反色样式（白实心胶囊 / 半透明白边框）。
   那一版把切换条塞进深蓝 topbar，与「会员中心 / 退出」同一行 —— 位置上确实整站统一，
   但字号被压到 12px、贴在最边上，访客根本不会注意到还有个语言切换，等于没有。
   现在它跟着面包屑走（见上面的 .cf-crumbs-row），这一组整段删除。
   如果哪天又想在 topbar 放一份，请重新写样式，别直接沿用旧值（深底/浅底不通用）。 */
/* ===== WORKBUDDYAI_UPDATE_E [CMS] ===== */