body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.banner-copy {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.banner-copy.is-active {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .banner-copy,
    .banner-slide {
        transition: none !important;
    }

    .fade-up {
        opacity: 1;
        transform: none;
    }
}

/* 富文本正文：代码块、行内代码、视频、图注 */
.rich-content pre {
    margin: 1.2em 0;
    padding: 16px 18px;
    border-radius: .6rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.7;
}

.rich-content pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.rich-content code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--muted);
    color: var(--foreground);
    font-size: .9em;
    /* 长 URL 在窄屏不撑破容器 */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rich-content video {
    width: 100%;
    margin: 1.2em 0;
    border-radius: .6rem;
}

.rich-content figure {
    margin: 1.4em 0;
}

.rich-content figcaption {
    margin-top: .5em;
    color: var(--muted-foreground);
    font-size: .85em;
    text-align: center;
}

.rich-content h1 {
    margin: 1.6em 0 .8em;
    font-size: 1.75em;
    font-weight: 600;
    line-height: 1.4;
}

.rich-content h5,
.rich-content h6 {
    margin: 1.4em 0 .7em;
    font-weight: 600;
    line-height: 1.4;
}

/* 分享组件 */
.share-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.share-pill:hover {
    border-color: var(--primary);
    background: var(--accent);
    color: var(--primary);
}

/* 前台表单控件（评论、联系表单等，不能用后台的 admin-* 样式） */
.site-label {
    display: block;
    margin-bottom: 6px;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 500;
}

/* 防刷蜜罐：真人看不见，但不写 display:none —— 部分脚本会跳过隐藏元素 */
.site-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.site-input,
.site-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.site-textarea {
    resize: vertical;
}

.site-input:focus,
.site-textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.site-button:hover {
    background: #1d4ed8;
}

/* 正文图片：统一圆角与自适应，避免导入的长图撑破容器 */
.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: .6rem;
}

/* 案例图集：点击放大 */
.gallery-item {
    cursor: zoom-in;
}

/* 标签胶囊：颜色来自「标签管理」里为每个标签设置的颜色 */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--muted);
    color: var(--tag-color, var(--muted-foreground));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    transition: border-color .15s ease, background .15s ease;
}

.tag-chip:hover {
    border-color: var(--tag-color, var(--primary));
    background: var(--card);
}

.tag-chip.is-active {
    border-color: var(--tag-color, var(--primary));
    background: var(--card);
    font-weight: 600;
}

/* 正文标题锚点：跳转时给吸顶导航留出空间 */
.rich-content h2,
.rich-content h3 {
    scroll-margin-top: 96px;
}

/* 文章目录 */
.article-toc-link {
    display: block;
    padding: 5px 0 5px 12px;
    border-left: 2px solid transparent;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.5;
    transition: color .15s ease, border-color .15s ease;
}

/* ============ 深色模式适配 ============ */

/*
 * 隔行区块背景。
 * 浅色下用 --muted（比页面略深），深色下必须比 --card 更深，
 * 否则卡片（--card）会比区块暗，看起来像在区块上「挖了个洞」。
 */
.section-alt {
    background: var(--muted);
}

.dark .section-alt {
    background: #0b1120;
}

/* 主题切换按钮：浅色显示月亮、深色显示太阳 */
.theme-icon-dark {
    display: none;
}

.dark .theme-icon-dark {
    display: block;
}

.dark .theme-icon-light {
    display: none;
}

/* 语义化提示条（替换掉写死的浅色背景；内边距交给工具类，避免和 p-4 / p-8 打架） */
.notice,
.comment-notice {
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.comment-notice {
    margin-bottom: 16px;
    padding: 10px 14px;
}

.notice.is-ok,
.comment-notice.is-ok {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.notice.is-error,
.comment-notice.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* ===== 新闻详情页头部：面包屑 + 栏目胶囊 + 标题 + 元信息 ===== */
.article-hero {
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(1200px 280px at 10% -60%, rgba(37, 99, 235, .10), transparent 68%),
        var(--muted);
}

/* 深色下 --muted 比 --card 更亮，会显得像挖了一个洞 */
.dark .article-hero {
    background:
        radial-gradient(1200px 280px at 10% -60%, rgba(59, 130, 246, .18), transparent 68%),
        #0b1120;
}

.article-hero-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 18px 18px 22px;
}

/* 案例详情页正文是 max-w-5xl，头部跟着收窄才对得齐 */
.article-hero-inner.is-narrow {
    max-width: 64rem;
}

.article-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--muted-foreground);
    font-size: 12px;
    line-height: 1.6;
}

.article-crumb a {
    flex: 0 0 auto;
    color: inherit;
}

.article-crumb a:hover {
    color: var(--primary);
}

.article-crumb .crumb-sep {
    flex: 0 0 auto;
    opacity: .55;
}

.article-crumb .crumb-current {
    min-width: 0;
    overflow: hidden;
    color: var(--foreground);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article-cat {
    display: inline-flex;
    align-items: center;
    margin-right: .4em;
    padding: .18em .62em;
    border: 1px solid rgba(37, 99, 235, .24);
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: var(--cat, #2563eb);
    font-size: 12px;
    /* 跟随标题字号缩放（约为标题的一半），避免「小标签配大标题」的割裂感 */
    font-size: max(12px, .5em);
    font-weight: 600;
    letter-spacing: .02em;
    /* 把胶囊纵向中心对齐标题首行的文字中心（middle 会偏低约 4px） */
    vertical-align: .42em;
}

.article-cat:hover {
    border-color: var(--cat, #2563eb);
}

/* 栏目色跟随分类；不支持 color-mix 的浏览器用上面的蓝色兜底 */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .article-cat {
        border-color: color-mix(in srgb, var(--cat, #2563eb) 26%, transparent);
        background: color-mix(in srgb, var(--cat, #2563eb) 12%, transparent);
    }
}

/* 栏目胶囊与标题同行（胶囊在 <h1> 里、标题文字前面）。
 *
 * 注意两点，缺一不可：
 *   1) 不要把胶囊拎出来单独成行 —— 只有一个标签孤零零占一行，观感很尴尬；
 *   2) 标题绝对不能再加 text-wrap: balance（见下面 .article-title 的注释）——
 *      否则胶囊后面那行会被提前断掉，右边空一大截。
 */

.article-title {
    margin-top: 0;
    max-width: 62rem;
    color: var(--foreground);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    /* 长英文串（robots.txt、URL）只在实在放不下时才断开 */
    overflow-wrap: break-word;
    /* 不要用 text-wrap: balance！
     * 它是为了「各行等长」而主动把第一行提前断掉，效果就是标题右边空一截、
     * 下一行又特别短 —— 看着像少写了字。这里保持浏览器默认的贪心换行：
     * 一行能放多少放多少，放不下才折行。 */
    text-wrap: wrap;
}

/* 案例摘要：跟在标题下面，作为引文 */
.article-lead {
    margin-top: 12px;
    max-width: 46rem;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1.75;
}

.article-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-top: 14px;
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.article-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* 手机端用两列网格；桌面端一行陈列时，第二项起用圆点分隔 */
.article-meta > span + span::before {
    content: none;
}

.article-meta svg {
    flex: 0 0 auto;
    opacity: .85;
}

/* 头部已有留白，正文区收紧上边距 */
.article-main {
    padding-top: 22px;
}

@media (max-width: 639px) {
    /* 手机端面包屑只留「首页 / 新闻资讯」，标题交给 H1，避免同屏重复 */
    .article-crumb .crumb-current,
    .article-crumb .crumb-tail {
        display: none;
    }
}

@media (min-width: 640px) {
    .article-hero-inner {
        padding: 22px 24px 30px;
    }

    .article-title {
        font-size: 27px;
    }

    .article-lead {
        margin-top: 14px;
        font-size: 15px;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        margin-top: 16px;
        font-size: 13.5px;
    }

    .article-meta > span + span::before {
        width: 3px;
        height: 3px;
        margin-right: 3px;
        border-radius: 999px;
        background: currentColor;
        content: "";
        opacity: .45;
    }

    .article-main {
        padding-top: 30px;
    }
}

@media (min-width: 1024px) {
    .article-hero-inner {
        padding: 28px 32px 36px;
    }

    .article-title {
        font-size: 32px;
        line-height: 1.35;
        /* 宽屏给标题更多横向空间，栏目胶囊 + 标题尽量一行排下 */
        max-width: 62rem;
    }

    .article-main {
        padding-top: 34px;
    }
}

/* ===== 客户方案页：保密提示 + 防截屏水印 ===== */
.proposal-body {
    min-height: 100vh;
    background: var(--muted);
    color: var(--foreground);
}

.proposal-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.proposal-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
}

.proposal-topbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.proposal-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.proposal-topbar-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.proposal-topbar-meta {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 12px;
}

.proposal-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.proposal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--foreground);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.proposal-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.proposal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.proposal-badge.is-status {
    background: var(--muted);
    color: var(--muted-foreground);
}

.proposal-badge.is-protected {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}

.dark .proposal-badge.is-protected {
    background: rgba(34, 197, 94, .18);
    color: #4ade80;
}

.proposal-infobar {
    background: var(--primary);
    color: #fff;
}

.proposal-infobar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 13px;
}

.proposal-infobar-inner > span,
.proposal-infobar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.proposal-infobar-inner .is-strong {
    color: #fde68a;
    font-weight: 600;
}

.proposal-infobar-link {
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.proposal-infobar-link:hover {
    background: rgba(255, 255, 255, .28);
}

.proposal-stage {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.proposal-stage.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 90;
    max-width: none;
    overflow: auto;
    background: var(--muted);
}

.proposal-content {
    padding: 16px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.proposal-frame {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 420px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

/* 手机端：正文高度跟着视口走，尽量把屏幕让给方案 */
@media (max-width: 768px) {
    .proposal-frame {
        height: calc(100dvh - 210px);
        min-height: 360px;
        border-radius: 8px;
    }
}

/* 桌面版方案在手机上会被压扁 → 切到 1180px 宽并允许横向拖动 */
.proposal-content.is-wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.proposal-content.is-wide .proposal-frame {
    width: 1180px;
    max-width: none;
}

/* 全屏：只留方案正文，顶部工具条 / 蓝色信息条一律收起（退出靠右下角浮动按钮） */
body.is-fullscreen {
    display: block;
    height: 100vh;
    overflow: hidden;
}

body.is-fullscreen .proposal-topbar,
body.is-fullscreen .proposal-infobar,
body.is-fullscreen .proposal-footer-note {
    display: none;
}

body.is-fullscreen .proposal-stage {
    display: flex;
    flex-direction: column;
    /* 基础样式里的 margin:auto 会让 flex 子项取消拉伸、宽度塌成内容宽，这里必须显式铺满 */
    width: 100%;
    max-width: none;
    height: 100vh;
    margin: 0;
    padding: 10px;
}

body.is-fullscreen .proposal-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

body.is-fullscreen .proposal-frame,
body.is-fullscreen .proposal-media {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* iOS Safari 等不支持元素全屏的浏览器：用 CSS 全屏兜底 */
html.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    background: var(--muted);
}

/* 全屏按钮的两种文案：普通 / 全屏（前端不做 innerHTML 拼接，避免破坏图标）
   三个 span 都要 inline-flex，否则图标和文字在按钮里对不齐 */
.proposal-only-normal,
.proposal-only-full,
.proposal-only-wide,
.proposal-only-narrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.proposal-only-full,
.proposal-only-wide {
    display: none;
}

body.is-fullscreen .proposal-only-normal {
    display: none;
}

body.is-fullscreen .proposal-only-full {
    display: inline-flex;
}

html.is-wide-doc .proposal-only-narrow {
    display: none;
}

html.is-wide-doc .proposal-only-wide {
    display: inline-flex;
}

/* 全屏时始终浮一个「退出全屏」按钮 */
.proposal-exit-fs {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #0f172a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .4);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.proposal-exit-fs[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .proposal-exit-fs {
        right: 12px;
        bottom: 12px;
        padding: 12px 18px;
        font-size: 14px;
    }
}

.proposal-media {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    margin: 0 auto;
    border-radius: 12px;
}

/* 内嵌 HTML 方案（直接在后台粘贴源码时）的正文排版 */
.proposal-doc {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 6px 24px;
    color: var(--foreground);
    font-size: 15px;
    line-height: 1.9;
    word-break: break-word;
}

.proposal-doc > :first-child { margin-top: 0; }
.proposal-doc > :last-child { margin-bottom: 0; }

.proposal-doc h1,
.proposal-doc h2,
.proposal-doc h3,
.proposal-doc h4 {
    margin: 1.6em 0 .6em;
    color: var(--foreground);
    font-weight: 700;
    line-height: 1.35;
}

.proposal-doc h1 { font-size: 26px; }
.proposal-doc h2 {
    padding-left: 12px;
    border-left: 4px solid var(--primary);
    font-size: 21px;
}
.proposal-doc h3 { font-size: 17.5px; }
.proposal-doc h4 { font-size: 16px; }

.proposal-doc p { margin: .9em 0; }

.proposal-doc a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, .35);
}

.proposal-doc strong { font-weight: 650; }

.proposal-doc ul,
.proposal-doc ol {
    margin: .9em 0;
    padding-left: 1.4em;
}

.proposal-doc ul { list-style: disc; }
.proposal-doc ol { list-style: decimal; }
.proposal-doc li { margin: .35em 0; }

.proposal-doc blockquote {
    margin: 1.2em 0;
    padding: 12px 16px;
    border-left: 4px solid rgba(37, 99, 235, .35);
    border-radius: 0 10px 10px 0;
    background: rgba(37, 99, 235, .06);
    color: var(--muted-foreground);
}

.proposal-doc img {
    max-width: 100%;
    height: auto;
    margin: 1.2em auto;
    border-radius: 12px;
}

.proposal-doc table {
    width: 100%;
    margin: 1.2em 0;
    border-collapse: collapse;
    font-size: 14px;
}

.proposal-doc th,
.proposal-doc td {
    padding: 9px 12px;
    border: 1px solid rgba(148, 163, 184, .35);
    text-align: left;
}

.proposal-doc th {
    background: rgba(148, 163, 184, .12);
    font-weight: 650;
}

.proposal-doc hr {
    margin: 1.8em 0;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, .35);
}

.proposal-doc pre {
    margin: 1.2em 0;
    padding: 14px 16px;
    overflow: auto;
    border-radius: 12px;
    background: rgba(15, 23, 42, .06);
    font-size: 13px;
}

.proposal-doc code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .07);
    font-size: .92em;
}

.proposal-doc pre code {
    padding: 0;
    background: none;
}

@media (max-width: 768px) {
    .proposal-doc {
        padding: 8px 2px 20px;
        font-size: 14.5px;
    }

    .proposal-doc h1 { font-size: 21px; }
    .proposal-doc h2 { font-size: 18px; }
    .proposal-doc h3 { font-size: 16px; }

    .proposal-doc table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.proposal-gate,
.proposal-state {
    max-width: 460px;
    margin: 7vh auto 0;
    padding: 32px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
    text-align: center;
}

/* 密码页 / 失效页：方案卡 + 公司信息卡竖向堆叠 */
.proposal-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    margin: 6vh auto 40px;
    padding: 0 16px;
}

.proposal-shell .proposal-gate {
    max-width: none;
    margin: 0;
}

.proposal-gate-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: 12px;
    background: rgba(245, 158, 11, .12);
    color: #b45309;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.proposal-gate-alert.is-error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .1);
    color: #b91c1c;
}

.dark .proposal-gate-alert {
    border-color: rgba(245, 158, 11, .45);
    background: rgba(245, 158, 11, .16);
    color: #fcd34d;
}

.dark .proposal-gate-alert.is-error {
    border-color: rgba(239, 68, 68, .45);
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
}

.proposal-gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.proposal-gate-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(148, 163, 184, .45);
    color: var(--muted-foreground);
    font-size: 12px;
}

.proposal-gate-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.proposal-gate-agree {
    margin-top: 10px;
    color: var(--muted-foreground);
    font-size: 11.5px;
    line-height: 1.7;
}

/* 公司信息卡：让客户一眼知道是谁在做，也能直接找到人 */
.proposal-company {
    padding: 22px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .1);
}

.proposal-company-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.proposal-company-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(37, 99, 235, .12);
    color: var(--primary);
}

.proposal-company-name {
    font-size: 15px;
    font-weight: 700;
}

.proposal-company-slogan {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.proposal-company-desc {
    margin-top: 14px;
    color: var(--muted-foreground);
    font-size: 12.5px;
    line-height: 1.85;
}

.proposal-company-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.proposal-company-features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    background: rgba(148, 163, 184, .12);
    color: var(--foreground);
    font-size: 12px;
}

.proposal-company-features li svg {
    color: var(--primary);
}

.proposal-company-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.proposal-company-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 12px;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.proposal-company-btn:hover {
    border-color: var(--primary);
}

.proposal-company-btn.is-primary {
    border-color: transparent;
    background: var(--primary);
    color: #fff;
}

.proposal-company-btn.is-primary:hover {
    filter: brightness(1.05);
}

.proposal-gate-icon,
.proposal-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(37, 99, 235, .12);
    color: var(--primary);
}

.proposal-gate-title,
.proposal-state-title {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 700;
}

.proposal-gate-text,
.proposal-state-text {
    margin-top: 10px;
    color: var(--muted-foreground);
    font-size: 13.5px;
    line-height: 1.8;
}

.proposal-gate-note,
.proposal-state-note {
    margin-top: 16px;
    color: var(--muted-foreground);
    font-size: 12px;
}

.proposal-footer-note {
    margin-top: 16px;
    color: var(--muted-foreground);
    font-size: 12px;
    text-align: center;
}

.proposal-compare-frame {
    display: block;
    width: 100%;
    height: 74vh;
    border: 0;
    background: #fff;
}

.proposal-confidential {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 40;
    width: max-content;
    max-width: min(720px, calc(100vw - 32px));
    margin: 0;
    padding: 10px 18px;
    transform: translateX(-50%);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 999px;
    background: rgba(255, 251, 235, .97);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    color: #b45309;
    font-size: 12.5px;
    text-align: center;
    transition: opacity .5s ease, transform .5s ease;
}

/* 3 秒后自动淡出，不挡着客户看方案 */
.proposal-confidential.is-hidden {
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
}

.dark .proposal-confidential {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(69, 45, 8, .95);
    color: #fcd34d;
}

@media (max-width: 768px) {
    .proposal-confidential {
        bottom: 12px;
        max-width: calc(100vw - 24px);
        padding: 9px 14px;
        border-radius: 14px;
        font-size: 12px;
        line-height: 1.6;
    }
}

.proposal-watermark {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0;
    padding: 24px;
    overflow: hidden;
    color: var(--foreground);
    pointer-events: none;
    user-select: none;
}

.proposal-watermark span {
    display: block;
    align-self: center;
    justify-self: center;
    white-space: nowrap;
    opacity: .09;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
    transform: rotate(-22deg);
}

/* 手机端两列会挤在一起，改一列 */
@media (max-width: 768px) {
    .proposal-watermark {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .proposal-watermark span {
        font-size: 10.5px;
    }
}

/* 打印：整页隐藏，只留一句版权提示 */
.proposal-print-notice {
    display: none;
    padding: 72px 24px;
    color: #b45309;
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
}

@media print {
    .proposal-body > *:not(.proposal-print-notice) {
        display: none !important;
    }

    .proposal-print-notice {
        display: block !important;
    }
}

/* ============================================================
   详情页（新闻 / 案例 / 服务）排版
   手机端重新设计：标题区提前、信息分组、长内容折叠或横滑
   ============================================================ */

/* ============================================================
   站内搜索页
   ============================================================ */

.search-hero {
    border-bottom: 1px solid var(--border);
    background: var(--muted);
}

/* 深色下 --muted 比卡片更亮，会像挖了个洞 */
.dark .search-hero {
    background: #0b1120;
}

.search-hero-inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 18px 26px;
}

@media (min-width: 640px) {
    .search-hero-inner {
        padding: 46px 24px 38px;
    }
}

.search-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.search-title {
    margin-top: 14px;
    color: var(--foreground);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .search-title {
        font-size: 28px;
    }
}

.search-sub {
    margin-top: 8px;
    color: var(--muted-foreground);
    font-size: 14px;
}

.search-sub b {
    color: var(--primary);
    font-weight: 600;
}

.search-box {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.search-input-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.search-input-wrap > svg {
    position: absolute;
    left: 14px;
    color: var(--muted-foreground);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--foreground);
    font-size: 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.search-submit {
    flex: 0 0 auto;
    padding: 0 26px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s ease;
}

.search-submit:hover {
    opacity: .9;
}

.search-hots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.search-hots-label {
    color: var(--muted-foreground);
    font-size: 13px;
}

/* 类型筛选 */
.search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.search-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.search-tab b {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
}

.search-tab:hover {
    color: var(--primary);
}

.search-tab.is-active {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* 结果卡片 */
.search-result {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.search-result:hover {
    border-color: var(--primary);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .35);
}

.search-result-thumb {
    flex: 0 0 120px;
    width: 120px;
    height: 84px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--muted);
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-thumb.is-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--primary);
}

.search-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-type {
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.search-type.case {
    background: rgba(5, 150, 105, .12);
    color: #059669;
}

.search-type.news {
    background: rgba(124, 58, 237, .12);
    color: #7c3aed;
}

.search-meta {
    color: var(--muted-foreground);
    font-size: 12px;
}

.search-result-title {
    margin-top: 8px;
    color: var(--foreground);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.search-result:hover .search-result-title {
    color: var(--primary);
}

.search-result-desc {
    margin-top: 6px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.75;
}

.search-hit {
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(37, 99, 235, .14);
    color: var(--primary);
}

.dark .search-hit {
    background: rgba(96, 165, 250, .2);
    color: #93c5fd;
}

/* 空状态与推荐 */
.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 14px;
    text-align: center;
}

.search-empty > svg {
    color: var(--primary);
    opacity: .7;
}

.search-empty-sub {
    margin-top: 6px;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 600;
}

.search-suggest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.search-suggest a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 13px;
    transition: border-color .15s ease, color .15s ease;
}

.search-suggest a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 639px) {
    /* 手机端：顶部通栏文字过长时单行省略，避免撑高首屏 */
    .top-banner {
        overflow: hidden;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 手机端：头部收紧、热门标签缩小、类型 tab 单行横滑 */
    .search-hero-inner {
        padding: 22px 16px 20px;
    }

    .search-title {
        font-size: 20px;
    }

    .search-sub {
        font-size: 13px;
    }

    .search-box {
        gap: 8px;
        margin-top: 16px;
    }

    .search-submit {
        padding: 0 18px;
        font-size: 14px;
    }

    .search-hots {
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 14px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .search-hots::-webkit-scrollbar {
        display: none;
    }

    .search-hots-label {
        flex: 0 0 auto;
    }

    .search-hots .tag-chip {
        flex: 0 0 auto;
        padding: 4px 10px;
        font-size: 12px;
    }

    .search-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-bottom: 14px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .search-tab {
        flex: 0 0 auto;
        padding: 6px 13px;
        font-size: 13px;
    }

    /* 结果卡片：缩略图收小、标题与摘要各限两行，卡片高度整齐 */
    .search-result {
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        border-radius: 12px;
    }

    .search-result-thumb {
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
        border-radius: 8px;
    }

    .search-result-head {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .search-meta {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .search-result-title {
        display: -webkit-box;
        margin-top: 6px;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .search-result-desc {
        display: -webkit-box;
        margin-top: 4px;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.6;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .search-empty {
        padding: 32px 18px;
    }
}

/* iframe 嵌入页（模板中心）：给足高度，页面可以正常滚到页脚 */
.embed-frame {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 560px;
    border: 0;
    background: var(--card);
}

/* 栏目页头图（服务项目 / 客户案例 / 新闻资讯 / 关于我们 / 联系我们） */
.nav-banner-wrap {
    max-width: 1280px;
    margin: 16px auto 0;
}

.nav-banner {
    position: relative;
    height: 176px;
    overflow: hidden;
    border-radius: 16px;
    background: #e2e8f0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 10px 36px -12px rgba(15, 23, 42, .35);
}

.nav-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-banner-shade,
.nav-banner-shade-bottom {
    position: absolute;
    pointer-events: none;
}

.nav-banner-shade {
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0));
}

.nav-banner-shade-bottom {
    inset-inline: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}

.nav-banner-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.nav-banner-copy {
    position: absolute;
    bottom: 20px;
    left: 24px;
    z-index: 2;
    max-width: 72%;
    pointer-events: none;
}

.nav-banner-index {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
}

.nav-banner-index span {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, .6);
}

.nav-banner-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.nav-banner-sub {
    margin-top: 6px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    line-height: 1.7;
}

@media (min-width: 640px) {
    .nav-banner {
        height: 224px;
    }

    .nav-banner-copy {
        bottom: 28px;
        left: 36px;
    }

    .nav-banner-title {
        font-size: 24px;
    }

    .nav-banner-sub {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .nav-banner {
        height: 256px;
    }

    .nav-banner-title {
        font-size: 30px;
    }
}

/* 面包屑：手机端隐藏「首页」，只保留 父级 / 当前页，省一行高度 */
@media (max-width: 639px) {
    .detail-crumb .crumb-home,
    .detail-crumb .crumb-home-sep {
        display: none;
    }
}

/* 详情页正文容器留白（手机端收窄，换取阅读宽度） */
.detail-main {
    padding: 26px 18px 46px;
}

@media (min-width: 640px) {
    .detail-main {
        padding: 42px 24px 62px;
    }
}

@media (min-width: 1024px) {
    .detail-main {
        padding: 54px 32px 72px;
    }
}

/* 手机端把「正文 + 侧栏」的间距收紧 */
@media (max-width: 639px) {
    .layout-aside {
        gap: 24px;
    }
}

/* 详情页头图/标题区 */
.detail-hero {
    border-bottom: 1px solid var(--border);
    background: var(--muted);
}

/* 深色下 --muted 比 --card 更亮，会显得像挖了个洞 */
.dark .detail-hero {
    background: #0b1120;
}

.detail-hero-inner {
    padding: 20px 20px 22px;
}

.detail-hero-title {
    margin-top: 12px;
    color: var(--foreground);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.detail-hero-sub {
    margin-top: 12px;
    max-width: 46rem;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1.75;
}

/* 手机端把咨询入口提到标题下方，不再沉到页面最底部 */
.detail-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.hero-btn.is-solid {
    background: var(--primary);
    color: var(--primary-foreground);
}

.hero-btn.is-outline {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
}

@media (min-width: 640px) {
    .detail-hero-inner {
        padding: 42px 24px 46px;
    }

    .detail-hero-title {
        font-size: 28px;
    }

    .detail-hero-sub {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .detail-hero-inner {
        padding: 54px 32px 60px;
    }

    .detail-hero-title {
        font-size: 34px;
    }

    /* 桌面端这些操作交给右侧栏，头部保持干净 */
    .detail-hero-cta {
        display: none;
    }
}

/* 详情页元信息（作者 / 时间 / 阅读量）：手机端两列网格，桌面端一行 */
.detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
    margin-top: 16px;
    color: var(--muted-foreground);
    font-size: 13px;
}

.detail-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

@media (min-width: 640px) {
    .detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        font-size: 14px;
    }
}

/* 案例「项目信息」：手机端 2 列紧凑卡，桌面端 4 列 */
.detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    margin-top: 26px;
    padding: 18px 16px;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05);
}

.detail-facts .fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.detail-facts .fact-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--primary);
}

.detail-facts .fact-label {
    color: var(--muted-foreground);
    font-size: 12px;
}

.detail-facts .fact-value {
    margin-top: 2px;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .detail-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        padding: 24px;
    }
}

/* 服务「实施流程」：手机端竖向时间线，桌面端卡片网格 */
.service-flow {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 22px;
    padding-left: 44px;
}

.service-flow::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 16px;
    width: 1px;
    background: var(--border);
}

.service-flow > li {
    position: relative;
}

.service-flow .flow-no {
    position: absolute;
    top: 0;
    left: -44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.service-flow .flow-title {
    color: var(--foreground);
    font-size: 15px;
    font-weight: 600;
}

.service-flow .flow-desc {
    margin-top: 6px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.75;
}

@media (min-width: 640px) {
    .service-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        padding-left: 0;
    }

    .service-flow::before {
        display: none;
    }

    .service-flow > li {
        padding: 18px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
    }

    .service-flow .flow-no {
        position: static;
        width: 36px;
        height: 36px;
        margin-bottom: 12px;
        font-size: 13px;
    }
}

@media (min-width: 1024px) {
    .service-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 服务「套餐与报价」：手机端横向滑动，避免 3 张大卡纵向叠加拉长页面 */
.tier-scroller {
    display: grid;
    gap: 20px;
}

@media (max-width: 767px) {
    .tier-scroller {
        display: flex;
        gap: 12px;
        margin: 0 -18px;
        padding: 4px 18px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .tier-scroller > * {
        flex: 0 0 76%;
        scroll-snap-align: start;
    }
}

@media (min-width: 768px) {
    .tier-scroller {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tier-scroller {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 手机端横向滑动提示（卡片被裁切时告诉用户「可以滑」） */
.tier-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--muted-foreground);
    font-size: 12px;
}

@media (min-width: 768px) {
    .tier-hint {
        display: none;
    }
}

/* 横向滑动列表（其他服务等） */
.detail-scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.detail-scroller > * {
    flex: 0 0 auto;
}

/* 关联内容卡片：手机端缩成「缩略图 + 标题」的紧凑行，桌面端恢复卡片 */
.related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.related-card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05);
}

.related-thumb {
    flex: 0 0 108px;
    width: 108px;
    height: 82px;
    overflow: hidden;
    background: var(--muted);
}

.related-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 14px;
}

@media (min-width: 640px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .related-card {
        display: block;
    }

    .related-thumb {
        flex: none;
        width: 100%;
        height: 144px;
    }

    .related-body {
        display: block;
        padding: 16px;
    }
}

@media (min-width: 1024px) {
    .related-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 没有封面图时的占位，避免整块灰底显得像图裂了 */
.cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(37, 99, 235, .03));
    color: var(--primary);
}

.dark .cover-fallback {
    background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .04));
}

/* 手机端正文：字号与行距更利于长文阅读，表格可横滑不挤压 */
@media (max-width: 639px) {
    .article-body {
        font-size: 16px;
        line-height: 1.95;
    }

    .rich-content h2 {
        font-size: 1.25em;
        margin-top: 1.5em;
    }

    .rich-content h3 {
        font-size: 1.12em;
    }

    .rich-content table {
        font-size: 13px;
    }

    .rich-content th,
    .rich-content td {
        min-width: 94px;
        padding: 8px 10px;
    }

    .rich-content pre {
        padding: 14px;
        font-size: 12.5px;
    }
}

/* site.css 编译产物里缺的间距工具类 */
.h-3\.5 {
    height: .875rem;
}

.w-3\.5 {
    width: .875rem;
}

/* site.css 编译产物里缺失的其它工具类（补全后这些排版才真正生效） */
.pt-10 {
    padding-top: 2.5rem;
}

.pt-14 {
    padding-top: 3.5rem;
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.max-w-xs {
    max-width: 20rem;
}

.opacity-25 {
    opacity: .25;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted-foreground\/80 {
    color: var(--muted-foreground);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .text-muted-foreground\/80 {
        color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
    }
}

.bg-cyan-300\/40 {
    background-color: rgba(103, 232, 249, .4);
}

.border-white\/50 {
    border-color: rgba(255, 255, 255, .5);
}

@media (min-width: 640px) {
    .sm\:gap-4 {
        gap: 1rem;
    }

    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ============================================================
   服务详情页（蓝色渐变头图 + 分块标题 + 侧栏咨询卡）
   对齐线上 www.aiyunkeji.com/services/* 的视觉
   ============================================================ */

.svc-hero {
    position: relative;
    overflow: hidden;
    background: #2563eb;
    background: linear-gradient(
        to bottom right,
        var(--primary),
        color-mix(in srgb, var(--primary) 88%, #fff) 50%,
        color-mix(in srgb, var(--primary) 72%, #fff)
    );
}

.svc-hero-glow {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    filter: blur(48px);
    pointer-events: none;
}

.svc-hero-glow-1 {
    top: -96px;
    right: -96px;
    width: 384px;
    height: 384px;
}

.svc-hero-glow-2 {
    bottom: -128px;
    left: -128px;
    width: 420px;
    height: 420px;
}

.svc-hero-inner {
    position: relative;
    max-width: 1152px;
    margin: 0 auto;
    padding: 28px 20px 36px;
}

.svc-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    overflow: hidden;
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    white-space: nowrap;
}

.svc-crumb a {
    flex: 0 0 auto;
    transition: color .15s ease;
}

.svc-crumb a:hover {
    color: #fff;
}

.svc-crumb svg {
    flex: 0 0 auto;
}

.svc-crumb .svc-crumb-current {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    text-overflow: ellipsis;
}

.svc-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.svc-hero-main {
    min-width: 0;
    flex: 1 1 auto;
}

.svc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-weight: 500;
}

.svc-hero-title {
    margin-bottom: 16px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.svc-hero-lead {
    margin-bottom: 20px;
    max-width: 36rem;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.7;
}

.svc-hero-desc {
    margin-bottom: 30px;
    max-width: 36rem;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.8;
}

.svc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .15s ease, background .15s ease;
}

.svc-btn.is-light {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .12);
}

.svc-btn.is-light:hover {
    opacity: .9;
}

.svc-btn.is-ghost {
    border: 2px solid rgba(255, 255, 255, .32);
    color: #fff;
}

.svc-btn.is-ghost:hover {
    background: rgba(255, 255, 255, .1);
}

.svc-hero-aside {
    display: none;
}

@media (min-width: 768px) {
    .svc-hero-inner {
        padding: 48px 24px 64px;
    }

    .svc-hero-grid {
        flex-direction: row;
        gap: 48px;
    }

    .svc-hero-title {
        font-size: 36px;
    }

    .svc-hero-lead {
        font-size: 19px;
    }

    .svc-hero-aside {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .svc-hero-title {
        font-size: 44px;
    }
}

.svc-hero-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.svc-hero-price {
    min-width: 200px;
    padding: 18px 32px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    text-align: center;
}

.svc-hero-price-label {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
}

.svc-hero-price-value {
    margin-top: 2px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

/* 详情页分块标题 */
.svc-block {
    margin-top: 48px;
}

.svc-block-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.svc-block-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--primary);
}

.svc-block-head h2 {
    color: var(--foreground);
    font-size: 20px;
    font-weight: 700;
}

/* 服务特色 */
.svc-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.svc-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.svc-feature:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.svc-feature-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--primary);
}

.svc-feature h3 {
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

.svc-feature p {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 12px;
}

@media (min-width: 640px) {
    .svc-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* 侧栏咨询卡 / 其他服务 */
.svc-side-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05);
}

.svc-side-card + .svc-side-card {
    margin-top: 20px;
}

.svc-side-card h3 {
    color: var(--foreground);
    font-size: 16px;
    font-weight: 700;
}

.svc-side-sub {
    margin-top: 4px;
    margin-bottom: 20px;
    color: var(--muted-foreground);
    font-size: 14px;
}

.svc-side-price {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    background: var(--accent);
}

.svc-side-price span {
    color: var(--primary);
    font-size: 24px;
    font-weight: 700;
}

.svc-side-actions {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.svc-side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .15s ease, background .15s ease;
}

.svc-side-btn.is-solid {
    background: var(--primary);
    color: var(--primary-foreground);
}

.svc-side-btn.is-solid:hover {
    opacity: .9;
}

.svc-side-btn.is-outline {
    border: 1px solid var(--border);
    color: var(--foreground);
}

.svc-side-btn.is-outline:hover {
    background: var(--muted);
}

.svc-side-trust {
    display: grid;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.svc-side-trust p {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.5;
}

.svc-side-trust svg {
    flex: 0 0 auto;
    color: var(--primary);
}

.svc-side-others {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.svc-side-others a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    transition: background .15s ease;
}

.svc-side-others a:hover {
    background: var(--muted);
}

.svc-side-other-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--primary);
}

.svc-side-others strong {
    display: block;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
}

.svc-side-others a:hover strong {
    color: var(--primary);
}

.svc-side-others em {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: 12px;
    font-style: normal;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 详情页底部「返回列表」：居中胶囊按钮 */
.detail-back {
    display: flex;
    justify-content: center;
    margin: 36px 0 8px;
}

.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.detail-back-btn:hover {
    background: var(--accent);
    color: var(--foreground);
}

/* ============================================================
   案例详情页：项目详情卡片 / 感兴趣 CTA / 上一篇下一篇
   ============================================================ */

.case-panel {
    padding: 28px 24px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05);
}

.case-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--foreground);
    font-size: 18px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .case-panel {
        padding: 32px;
    }
}

.case-interest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding: 24px;
    border-radius: 14px;
    background: var(--accent);
    text-align: center;
}

.case-interest h3 {
    color: var(--foreground);
    font-size: 16px;
    font-weight: 600;
}

.case-interest p {
    margin-top: 4px;
    color: var(--muted-foreground);
    font-size: 14px;
}

.case-interest-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 500;
}

.case-interest-btn:hover {
    opacity: .9;
}

@media (min-width: 640px) {
    .case-interest {
        flex-direction: row;
        text-align: left;
    }
}

.case-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.case-pager a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05);
    transition: box-shadow .2s ease;
}

.case-pager a:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .08);
}

.case-pager-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--muted);
    color: var(--muted-foreground);
}

.case-pager a:hover .case-pager-icon {
    background: var(--accent);
    color: var(--primary);
}

.case-pager-label {
    color: var(--muted-foreground);
    font-size: 12px;
}

.case-pager-title {
    margin-top: 2px;
    overflow: hidden;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-pager a:hover .case-pager-title {
    color: var(--primary);
}

@media (min-width: 768px) {
    .case-pager {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-pager a.case-pager-next {
        flex-direction: row-reverse;
        text-align: right;
    }
}

/* 分享行 */
.detail-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* ============================================================
   法律页面（隐私政策 / 服务条款）
   ============================================================ */

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 12px;
    color: var(--muted-foreground);
    font-size: 13px;
}

.legal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legal-toc {
    margin-top: 34px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.legal-toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 700;
}

.legal-toc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 32px;
}

.legal-toc-grid a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--muted-foreground);
    font-size: 14px;
    transition: color .15s ease;
}

.legal-toc-grid a:hover {
    color: var(--primary);
}

.legal-toc-grid b {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

@media (min-width: 640px) {
    .legal-toc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.legal-section {
    margin-top: 40px;
    scroll-margin-top: 96px;
}

.legal-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.legal-section-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--primary);
}

.legal-section-head h2 {
    color: var(--foreground);
    font-size: 18px;
    font-weight: 700;
}

.legal-body {
    color: var(--muted-foreground);
    font-size: 15px;
    line-height: 1.9;
}

.legal-body p + p {
    margin-top: 10px;
}

.legal-body strong {
    color: var(--foreground);
    font-weight: 600;
}

.legal-body ul {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.legal-body li {
    margin: 6px 0;
}

.legal-sub {
    margin-top: 18px;
}

.legal-sub h3 {
    margin-bottom: 6px;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 600;
}

.legal-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    background: var(--accent);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.8;
}

/* ============================================================
   网站地图
   ============================================================ */

.sitemap-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding: 26px 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--primary) 10%, var(--card)),
        var(--card) 60%
    );
}

.sitemap-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sitemap-hero-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 10px 20px -8px rgba(37, 99, 235, .6);
}

.sitemap-hero h1 {
    color: var(--foreground);
    font-size: 24px;
    font-weight: 700;
}

.sitemap-hero p {
    margin-top: 6px;
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1.7;
}

.sitemap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.sitemap-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 13px;
}

.sitemap-stat b {
    color: var(--foreground);
    font-weight: 600;
}

.sitemap-stat svg {
    color: var(--primary);
}

.sitemap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 36px;
}

@media (min-width: 1024px) {
    .sitemap-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sitemap-card.is-wide {
        grid-column: span 2;
    }
}

.sitemap-card {
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.sitemap-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sitemap-card-head p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 700;
}

.sitemap-card-head p svg {
    color: var(--primary);
}

.sitemap-card-head span {
    color: var(--muted-foreground);
    font-size: 12px;
}

.sitemap-links {
    display: grid;
    gap: 2px;
}

.sitemap-links.is-2col {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .sitemap-links.is-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 20px;
    }
}

.sitemap-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    color: var(--muted-foreground);
    font-size: 14px;
    transition: color .15s ease;
}

.sitemap-links a:hover {
    color: var(--primary);
}

.sitemap-links a svg {
    flex: 0 0 auto;
    opacity: .55;
}

.sitemap-links a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice.is-warn {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.dark .notice.is-ok,
.dark .comment-notice.is-ok {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .12);
    color: #86efac;
}

.dark .notice.is-error,
.dark .comment-notice.is-error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
}

.dark .notice.is-warn {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #fcd34d;
}

.dark .like-button.is-done,
.dark .icon-action.is-done,
.dark .icon-action.is-copied {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .15);
    color: #86efac;
}

.dark .site-toast {
    background: rgba(248, 250, 252, .94);
    color: #0f172a;
}

.dark .article-body {
    color: #cbd5e1;
}

.dark .rich-content pre {
    border: 1px solid var(--border);
    background: #020617;
}

/* 页脚：两种主题下都保持深色，不能用 bg-foreground（深色模式下它会变成近白色） */
.site-footer {
    background: #0f172a;
}

.dark .site-footer {
    border-top: 1px solid var(--border);
    background: #0b1120;
}

/* ============ Cookie 提示条 ============ */

.cookie-consent {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    padding: 0 16px 16px;
    /* 容器铺满整宽，但不能挡住两侧内容的点击 */
    pointer-events: none;
}

.cookie-consent-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    pointer-events: auto;
}

.cookie-consent-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.cookie-consent-body {
    flex: 1;
    min-width: 0;
}

.cookie-consent-title {
    margin: 0 0 2px;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
}

.cookie-consent-text {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.7;
}

.cookie-consent-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.cookie-consent-learn {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--muted-foreground);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.cookie-consent-learn:hover {
    color: var(--primary);
    background: var(--muted);
}

.cookie-consent-accept {
    padding: 9px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cookie-consent-accept:hover {
    filter: brightness(1.06);
}

/* 提示条出现时，把右下角浮动按钮和左下角悬浮广告整体抬上去，避免互相压住 */
body.has-cookie-banner .customer-dock,
body.has-cookie-banner .float-banner {
    bottom: calc(24px + var(--cookie-banner-h, 0px));
    transition: bottom .25s ease;
}

@media (max-width: 720px) {
    .cookie-consent {
        padding: 0 10px 10px;
    }

    .cookie-consent-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px;
    }

    .cookie-consent-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .cookie-consent-text {
        font-size: 12.5px;
        line-height: 1.65;
    }

    /* 按钮整行铺开，拇指够得着，也不至于把文案挤成一列 */
    .cookie-consent-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .cookie-consent-accept {
        flex: 1;
        text-align: center;
    }
}

/* ============ 页脚新媒体：默认图标，悬停弹二维码 ============ */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-social-item {
    position: relative;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    transition: background-color .2s ease;
}

.footer-social-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.footer-social-icon svg {
    width: 16px;
    height: 16px;
    color: #cbd5e1;
}

.footer-social-item:focus-within .footer-social-icon {
    background: var(--primary, #2563eb);
}

/* hover 只在真的支持悬停的设备上生效：触屏浏览器会在手指抬起后
   保留一个「合成 hover」，不限定的话点开过的图标会一直高亮。 */
@media (hover: hover) {
    .footer-social-item:hover .footer-social-icon {
        background: var(--primary, #2563eb);
    }
}

.footer-social-qr {
    position: absolute;
    bottom: 40px;
    left: 50%;
    z-index: 40;
    display: none;
    /* 必须写死宽度：绝对定位 + 全局 img{max-width:100%} 会把内容压成几像素宽 */
    width: 138px;
    padding: 8px;
    border-radius: 10px;
    /* 二维码固定用白底：深色卡片上扫描识别率会掉 */
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .32);
    transform: translateX(-50%);
}

/* 小三角，指向下面的图标 */
.footer-social-qr::after {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    content: '';
    transform: translateX(-50%) rotate(45deg);
}

.footer-social-qr img {
    display: block;
    width: 120px;
    max-width: none;
    height: 120px;
    border-radius: 4px;
    object-fit: contain;
}

.footer-social-item:focus-within .footer-social-qr {
    display: block;
}

@media (hover: hover) {
    .footer-social-item:hover .footer-social-qr {
        display: block;
    }
}

/* 触屏设备：由 site.js 在第一次点击时加上 is-open */
.footer-social-item.is-open .footer-social-qr {
    display: block;
}

/* 窄屏时二维码改成固定宽度，避免贴着屏幕边缘被裁 */
@media (max-width: 480px) {
    .footer-social-qr {
        width: 122px;
        left: 0;
        transform: none;
    }

    .footer-social-qr::after {
        left: 16px;
    }

    .footer-social-qr img {
        width: 104px;
        max-width: none;
        height: 104px;
    }
}

/* 深色模式 logo：浅色用黑色版、深色用白色版 */
.theme-logo-dark {
    display: none;
}

/* ============ 右下角浮动按钮 ============ */

/* 返回顶部：与线上一致用绿色，和蓝色的在线客服区分开 */
.back-to-top {
    /* 和客服按钮统一成「白卡片 + 主题色图标」，与站内卡片语言一致 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.back-to-top:hover {
    transform: scale(1.06);
    border-color: var(--primary);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .2);
}

/* 在线客服面板：内嵌微信客服聊天 */
.customer-panel {
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 2rem));
    max-height: min(640px, calc(100vh - 8rem));
    overflow: hidden;
    /* 外观写在这里，不能只靠工具类：面板一旦没有背景，页面内容会直接透过来 */
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 24px 64px rgba(2, 6, 23, .3);
}

/* 头尾固定高度，绝不参与收缩，避免被聊天区挤掉 */
.customer-head,
.customer-foot {
    flex: 0 0 auto;
    background: var(--card);
}

/* 聊天区吃掉剩余空间；min-height 放小，窗口矮的时候让它先缩 */
.customer-chat {
    flex: 1 1 auto;
    height: min(500px, 54vh);
    min-height: 180px;
}

/* 头部：标题 + 关闭按钮（大点击区，手机上也好按） */
.customer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--border);
}

.customer-close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.customer-close:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.customer-foot {
    padding: 12px;
    border-top: 1px solid var(--border);
}

.customer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--primary);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.customer-toggle:hover {
    transform: scale(1.06);
    border-color: var(--primary);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .2);
}

/* 窄屏：贴边铺开，保证聊天区域不被挤扁 */
@media (max-width: 480px) {
    .customer-dock {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .customer-panel {
        width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 6rem);
    }

    .customer-chat {
        height: 50vh;
        min-height: 160px;
    }
}

/* 发展历程时间线 */
.timeline {
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-left: 42px;
    padding-bottom: 22px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    border: 4px solid var(--background);
    border-radius: 999px;
    background: var(--primary);
}

.timeline-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.dark .timeline-card {
    box-shadow: none;
}

.timeline-year {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.dark .theme-logo-dark {
    display: block;
}

.dark .theme-logo-light {
    display: none;
}


.article-toc-link:hover {
    color: var(--primary);
}

.article-toc-link.is-active {
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 500;
}

.article-toc-link.is-sub {
    padding-left: 24px;
    font-size: 12px;
}

/* ============================================================
   补全 site.css 编译产物里缺失的工具类
   （Tailwind 扫描时没生成任意值类名，导致多处「两栏布局」静默退化成单栏）
   ============================================================ */

/* 主内容 + 侧栏（详情页、关于、联系、服务详情等） */
.layout-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

/* 主内容 2 份 + 侧栏 1 份（新闻列表页） */
.layout-main-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

@media (min-width: 1024px) {
    .layout-aside {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 48px;
    }

    .layout-main-side {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 40px;
    }
}

/* ===== 新闻列表页：手机端排版 ===== */

/* 手机/平板：把侧栏里的「搜索文章」提到列表上方。
   右栏用 display:contents「拆开」，让搜索框和其余模块直接参与外层 grid 排序，
   桌面端（≥1024px）保持原来的右栏顺序不动。 */
@media (max-width: 1023px) {
    .layout-main-side {
        gap: 20px;
    }

    .layout-main-side > .side-aside {
        display: contents;
    }

    .layout-main-side > .side-aside > .side-search {
        order: 0;
    }

    .layout-main-side > .side-main {
        order: 1;
    }

    .layout-main-side > .side-aside > .side-rest {
        order: 2;
        /* space-y-6 会给它 24px 上边距，叠上栅格间距太空 */
        margin-top: 0;
    }
}

/* 7 个分类胶囊在 390px 下会折成 3+3+1 三行、末行只挂一个，
   改成单行横向滚动，两侧出血对齐到屏幕边缘。 */
@media (max-width: 639px) {
    .news-cat-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        margin-inline: -24px;
        padding-inline: 24px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .news-cat-bar::-webkit-scrollbar {
        display: none;
    }

    .news-cat-bar > a {
        flex: 0 0 auto;
    }
}

/* 详情页侧栏：吸顶时避开固定头部 */
.sticky-aside {
    position: sticky;
    top: 84px;
}

/* 目录滚动区 */
.toc-scroll {
    max-height: min(58vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 补全缺失的标准/任意值工具类 */
.col-span-full {
    grid-column: 1 / -1;
}

.max-h-52 {
    max-height: 13rem;
}

.max-h-\[88vh\] {
    max-height: 88vh;
}

.z-\[60\] {
    z-index: 60;
}

.z-\[75\] {
    z-index: 75;
}

.z-\[80\] {
    z-index: 80;
}

.w-\[min\(420px\,calc\(100vw-2\.5rem\)\)\] {
    width: min(420px, calc(100vw - 2.5rem));
}

.left-5 {
    left: 1.25rem;
}

.mt-7 {
    margin-top: 1.75rem;
}

.resize-y {
    resize: vertical;
}

.bg-black\/55 {
    background-color: rgba(0, 0, 0, .55);
}

.hover\:scale-\[1\.03\]:hover {
    transform: scale(1.03);
}

.group:hover .group-hover\:rotate-180 {
    transform: rotate(180deg);
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

details[open] .group-open\:rotate-180,
.group[open] .group-open\:rotate-180 {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* 详情页正文：控制阅读宽度并让图片自适应 */
.article-body {
    min-width: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #334155;
}

/* 编辑器里带过来的内联颜色在深色模式下会变成「黑字黑底」，统一交还给主题色 */
.dark .article-body [style*="color"] {
    color: inherit !important;
}

/* 点赞按钮（异步提交，不刷新页面） */
.like-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 10px;
    background: var(--accent);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* 详情页图标操作条（点赞 / 分享） */
.article-icon-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.icon-action:hover {
    border-color: var(--primary);
    background: var(--accent);
    color: var(--primary);
}

.icon-action.is-copied {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #15803d;
}

.icon-action.is-done {
    border-color: rgba(21, 128, 61, .25);
    background: #dcfce7;
    color: #15803d;
    cursor: default;
}

/* 轻提示（复制链接等操作反馈） */
.site-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 90;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .88);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

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

.like-button:hover {
    background: rgba(37, 99, 235, .16);
}

.like-button.is-done {
    border-color: rgba(21, 128, 61, .22);
    background: #dcfce7;
    color: #15803d;
    cursor: default;
}

/* 表单提交提示条 */
.comment-notice {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.comment-notice.is-ok {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.comment-notice.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* ============================================================
   前台新闻评论：官方回复 / 置顶标识
   ============================================================ */
.comment-pin {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
}

.dark .comment-pin {
    background: rgba(245, 158, 11, .2);
    color: #fcd34d;
}

/* 站长回复：绿色左边框，和访客评论明显区分 */
.comment-official {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid #16a34a;
    border-radius: 0 10px 10px 0;
    background: rgba(22, 163, 74, .08);
}

.comment-official-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
}

.comment-official-time {
    color: var(--muted-foreground);
    font-weight: 400;
}

.comment-official-body {
    margin-top: 6px;
    color: var(--foreground);
    font-size: 13.5px;
    line-height: 1.85;
    white-space: pre-wrap;
}

.dark .comment-official {
    background: rgba(22, 163, 74, .16);
}

.dark .comment-official-head {
    color: #4ade80;
}

/* ============================================================
   法律页面：富文本正文的排版（原来只有 .legal-sub h3，现在正文是富文本）
   ============================================================ */
.legal-body h3 {
    margin: 18px 0 6px;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 600;
}

.legal-body h4 {
    margin: 14px 0 6px;
    color: var(--foreground);
    font-size: 14.5px;
    font-weight: 600;
}

.legal-body h3:first-child,
.legal-body h4:first-child,
.legal-body p:first-child {
    margin-top: 0;
}

.legal-body ol {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: decimal;
}

.legal-body blockquote {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    background: var(--accent);
    color: var(--foreground);
    font-size: 14px;
}

.legal-body a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, .35);
}

.legal-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
    border-radius: 10px;
}

.legal-body table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-body th,
.legal-body td {
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, .35);
    text-align: left;
}

.legal-body hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, .35);
}

.legal-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .07);
    font-size: .92em;
}

/* 法律正文是整篇一个编辑器，给足高度，别让人在小框里改长文档 */
.pc-legal-body .rich-editor-content {
    min-height: 560px;
}

/* ============================================================
   滚动文字（公告条）：顶部 / 底部 —— 内容来自后台「广告位」的 HTML
   ============================================================ */
.marquee-bar {
    position: relative;
    z-index: 20;
    overflow: hidden;
    border-bottom: 1px solid rgba(37, 99, 235, .18);
    background: rgba(37, 99, 235, .08);
    color: var(--foreground);
    font-size: 13.5px;
}

.marquee-bar.is-bottom {
    border-top: 1px solid rgba(37, 99, 235, .18);
    border-bottom: 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    /* 两段一模一样的内容，-50% 正好回到起点 → 无缝循环 */
    animation: marquee-scroll 32s linear infinite;
}

.marquee-group {
    display: flex;
    flex: 0 0 auto;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* 左右各 28px：组内相邻间距和跨组间距一致，滚动到接缝处不会顿一下 */
    padding: 10px 28px;
    white-space: nowrap;
}

.marquee-bar a {
    color: inherit;
    text-decoration: none;
}

.marquee-bar a:hover {
    color: var(--primary);
}

.marquee-bar strong,
.marquee-bar b {
    color: var(--primary);
    font-weight: 600;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 悬停暂停，方便看清并点击里面的链接 */
.marquee-bar:hover .marquee-track {
    animation-play-state: paused;
}

@media (max-width: 640px) {
    .marquee-bar {
        font-size: 12.5px;
    }

    .marquee-item {
        padding: 9px 20px;
    }
}

/* 用户在系统里关掉动画时：不滚动，老老实实居中显示 */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        width: 100%;
        justify-content: center;
        animation: none;
    }

    .marquee-group + .marquee-group {
        display: none;
    }
}