/* =============================================================================
   daxling-cms.css —— FastAdmin CMS 博客侧皮肤（设计方向 C：温暖人文 / Stripe Press 气质）
   -----------------------------------------------------------------------------
   定位
     · 只做「样式覆盖」，不动插件的 PHP 与模板逻辑 ⇒ 插件升级不受影响（零侵入）
     · 与 /public/assets/css/daxling.css 共用同一套设计令牌（--brand-* / --ink / --line
       / --radius / --sh-* / --ease），因此首页、内页、博客页视觉语言完全一致
     · 加载顺序：bootstrap.min.css → 插件 common.css → daxling.css → 本文件
       （本文件最后加载 ⇒ 只需同优先级即可反压插件样式）

   与旧版（.deprecated 前身）的关键差异
     · 顶部导航不再由插件 navbar 承担 —— 已换成全站统一的 .dx-header（见 patches/cms_layout.html）
       所以这里只做「清理插件遗留的 fixed-navbar 占位与基础样式」，不再重绘 navbar
     · daxling.css 里有全局重置 `ul, ol { padding:0; list-style:none }`，
       会误伤正文列表与面包屑 ⇒ 本文件在 .article-text / .breadcrumb 内显式还原

   ⚠ 改完本文件必须把 CMS layout 里引用的 ?v= 版本号加一，否则浏览器吃旧缓存
   ============================================================================= */

/* =============================================================================
   1. 设计令牌桥接
      正常情况下 daxling.css 已定义全部变量；这里给一份同值兜底，
      保证「万一 daxling.css 没加载」时博客页也不会变成裸样式（防御性）
   ============================================================================= */
:root {
    --dx-brand-1: var(--brand-1, #0ea5e9);
    --dx-brand-2: var(--brand-2, #10b981);
    --dx-grad: var(--brand-grad, linear-gradient(135deg, #0ea5e9 0%, #10b981 100%));
    --dx-grad-soft: var(--brand-grad-soft, linear-gradient(135deg, #0ea5e91a, #10b9811a));
    --dx-bg: var(--bg, #f5f8fc);
    --dx-surface: var(--surface, #ffffff);
    --dx-surface-2: var(--surface-2, #f8fafd);
    --dx-ink: var(--ink, #0f172a);
    --dx-ink-2: var(--ink-2, #475569);
    --dx-muted: var(--muted, #94a3b8);
    --dx-line: var(--line, #e6edf6);
    --dx-line-strong: var(--line-strong, #d8e3f1);
    --dx-radius: var(--radius, 18px);
    --dx-radius-s: var(--radius-s, 12px);
    --dx-radius-pill: var(--radius-pill, 999px);
    --dx-sh-1: var(--sh-1, 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04));
    --dx-sh-2: var(--sh-2, 0 2px 4px -2px rgba(15, 23, 42, .06), 0 10px 24px -12px rgba(15, 23, 42, .14));
    --dx-sh-3: var(--sh-3, 0 4px 8px -4px rgba(15, 23, 42, .06), 0 24px 48px -20px rgba(15, 23, 42, .22));
    --dx-t: var(--t, .24s cubic-bezier(.22, .61, .36, 1));
    --dx-wrap: var(--wrap, 1240px);
}

/* =============================================================================
   2. 页面基底
   ============================================================================= */
body.group-page {
    background: var(--dx-bg);
    color: var(--dx-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 插件 common.css 为「固定顶栏」预留了 body padding，统一头部改为 sticky 后必须清零 */
    padding-top: 0 !important;
}

body.group-page a { color: var(--dx-ink); transition: color var(--dx-t); }
body.group-page a:hover { color: var(--dx-brand-1); text-decoration: none; }

/* 插件遗留的头部占位（换用统一 .dx-header 后不再需要，彻底收起，避免多出一条空白）
   注意：这里只针对「本插件 layout 里已移除」的旧结构做兜底，
   万一将来模板被升级脚本以外的方式还原，也不会出现两条导航叠在一起。 */
body.group-page > .header { display: none !important; }

/* =============================================================================
   3. 版心对齐
      统一头部用 .dx-wrap(max-width:1240px / padding 24px)，博客主体用 Bootstrap .container
      （默认 1170px）⇒ 两者左右不对齐。这里把 .container 拉到同一版心。
   ============================================================================= */
.group-page .container {
    width: auto;
    max-width: var(--dx-wrap);
    padding-left: 24px;
    padding-right: 24px;
}

/* 主体上下的呼吸感（插件原来靠 body padding-top 撑，现在由这里接管） */
.group-page .main-content { display: block; padding: 26px 0 8px; }

#content-container { padding-top: 4px; padding-bottom: 56px; }
#content-container .row { margin-left: -13px; margin-right: -13px; }
#content-container .row > [class*="col-"] { padding-left: 13px; padding-right: 13px; }

/* =============================================================================
   4. 焦点轮播 / 幻灯片
   ============================================================================= */
.carousel-focus {
    border-radius: var(--dx-radius);
    overflow: hidden;
    box-shadow: var(--dx-sh-2);
    margin-bottom: 24px;
    background: var(--dx-surface);
}
.carousel-focus .carousel-img {
    height: 320px;
    background-size: cover;
    background-position: center;
}
.carousel-focus .carousel-caption {
    background: linear-gradient(transparent, rgba(8, 20, 38, .78));
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 24px 20px;
    text-align: left;
}
.carousel-focus .carousel-caption h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.carousel-focus .carousel-indicators { bottom: 12px; }
.carousel-focus .carousel-indicators li {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border-radius: var(--dx-radius-pill);
    background: rgba(255, 255, 255, .5);
    border: 0;
}
.carousel-focus .carousel-indicators .active { background: #fff; width: 22px; }

/* =============================================================================
   5. 文章列表卡片
   -----------------------------------------------------------------------------
   坑 1（实测）：插件 common.css 有 `.article-list .article-item{padding:20px 0}`
        （优先级 0,2,0），会压过单类选择器 `.article-item{padding:18px 20px}`（0,1,0），
        把左右内边距清零 ⇒ 标题/图片/标签全部贴住卡片边框。
        ⇒ 覆盖时必须带 `.article-list` 前缀，保证同优先级且靠后加载。
   ============================================================================= */
.article-list .article-item,
.article-item {
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--dx-sh-1);
    transition: transform var(--dx-t), box-shadow var(--dx-t), border-color var(--dx-t);
}
.article-item:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 165, 233, .32);
    box-shadow: var(--dx-sh-3);
}
.article-item .media-left { padding-right: 18px; }
.article-item .media-left img,
.article-item .embed-responsive {
    border-radius: var(--dx-radius-s);
    overflow: hidden;
    background: var(--dx-surface-2);
}
/* 仅「左侧缩略图」固定宽度；图集(gallery)里的图片必须随列宽自适应，
   否则被锁成 180px 后会撑破列、与相邻图挤在一起并溢出卡片右边界。 */
.article-item .media-left .embed-responsive { width: 180px; }
.article-item .media-body { width: auto; }

.article-title {
    margin: 0 0 9px;
    font-size: 18.5px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
}
.article-title a { color: var(--dx-ink); }
.article-title a:hover { color: var(--dx-brand-1); }

.article-intro {
    color: var(--dx-ink-2);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-tag, .metas-body { color: var(--dx-muted); font-size: 12.8px; }

/* 标签胶囊
   坑 2（实测）：插件 `.tag{height:24px;line-height:24px}` 与本文件的 padding/line-height
        叠加后，24px 固定高度装不下 22.8px 行高，内容盒仅 20px（scrollHeight 25 > clientHeight 24），
        文字溢出胶囊底色 1~2px —— 视觉上就是「文字和底色/阴影对不齐」。
        ⇒ 高度交给 padding + line-height 决定，并用 inline-flex 垂直居中。 */
.article-tag .tag, .tag {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 5px 12px;
    margin: 0 6px 6px 0;
    background: var(--dx-surface-2);
    color: #47637f;
    border: 0;
    border-radius: var(--dx-radius-pill);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    vertical-align: middle;
    overflow: visible;
    transition: background var(--dx-t), color var(--dx-t);
}
.article-tag .tag:hover, .tag:hover { background: var(--dx-grad); color: #fff; }
.tag-primary { background: rgba(14, 165, 233, .12); color: var(--dx-brand-1); }

/* 标签行整体垂直居中
   坑 3（实测）：插件给每个 span 加了 margin:0 8px 且父级行高不统一 ⇒ 高低不齐。
   坑 4：.tag 自带 margin-bottom:6px，在 flex 容器里 align-items:center 会按「含外边距」居中，
        把胶囊整体上顶 3px（实测胶囊中线 901.9 vs 同行文字 904.9）⇒ 列表内归零，间距交给 gap。 */
.article-list .article-item .article-tag {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    line-height: 1.6;
    margin-top: 13px;
}
.article-list .article-item .article-tag > span { margin: 0; }
.article-list .article-item .article-tag .tag { margin: 0; }
.article-tag .fa { margin-right: 4px; opacity: .75; }
.link-dark { color: var(--dx-muted); }
.link-dark:hover { color: var(--dx-brand-1); }

/* =============================================================================
   6. 图集型文章
   -----------------------------------------------------------------------------
   坑 5：插件 `.article-list .gallery-article .row{margin:0 -10px}`（0,3,0）与
        `#content-container .row{margin-left/right:-12px}`（1,1,0）都会压过
        `.gallery-article .row{margin:0 -5px}`（0,2,0）。负边距大于列内边距的「回收量」，
        图片组整体向外溢出并贴到卡片边框。
        ⇒ 用 !important 锁定「负边距 = 列内边距」，两侧才会正好对齐文字。
   最终：图片外缘与标题/正文左对齐（= 卡片内边距 22px），图片之间 16px 间距。
   ============================================================================= */
.article-list .gallery-article .row,
.gallery-article .row { margin: 0 -8px !important; }
.article-list .gallery-article .row > [class*="col-"],
.gallery-article .row > [class*="col-"] { padding: 0 8px 14px !important; }
.gallery-article .embed-responsive { border-radius: var(--dx-radius-s); }
.gallery-article .article-title { margin-bottom: 12px; }

@media (max-width: 767px) {
    .article-list .gallery-article .row,
    .gallery-article .row { margin: 0 -5px !important; }
    .article-list .gallery-article .row > [class*="col-"],
    .gallery-article .row > [class*="col-"] { padding: 0 5px 12px !important; }
}

/* 图集「自适应等分」（同样不碰插件模板）
   坑 6：模板里列名写死 col-sm-3（4 列网格），只有 3 张图时只占 75%，右侧空 25%。
        不改模板的解法：≥768px 把这一行改成 flex，列宽交给 flex 均分。
   效果：3 张 → 各 1/3；4 张 → 各 1/4；2 张 → 各 1/3（max-width 封顶，避免单图过大）。
   移动端保持插件原生的 col-xs-6（每行 2 张）。 */
@media (min-width: 768px) {
    .article-list .gallery-article .row,
    .gallery-article .row { display: flex; flex-wrap: wrap; }
    /* Bootstrap 3 的 clearfix 伪元素在 flex 容器里会变成 flex 项，关掉 */
    .article-list .gallery-article .row::before,
    .article-list .gallery-article .row::after,
    .gallery-article .row::before,
    .gallery-article .row::after { display: none !important; }
    .article-list .gallery-article .row > [class*="col-"],
    .gallery-article .row > [class*="col-"] {
        width: auto !important;
        max-width: 33.3333% !important;
        flex: 1 1 0 !important;
        float: none !important;
    }
}

/* =============================================================================
   7. 侧边栏面板
   ============================================================================= */
.panel {
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius);
    box-shadow: var(--dx-sh-1);
    margin-bottom: 16px;
    overflow: hidden;
}
.panel-default > .panel-heading,
.panel .panel-heading {
    position: relative;
    background: var(--dx-surface);
    border-bottom: 1px solid var(--dx-line);
    padding: 14px 20px;
}
.panel .panel-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dx-grad);
}
.panel-title { font-size: 15px; font-weight: 700; color: var(--dx-ink); letter-spacing: -.01em; }
.panel-body { padding: 14px 20px; }
.panel-blockimg img { border-radius: var(--dx-radius-s); }

.sidebar .list-unstyled li,
.panel-body ul li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--dx-line);
    font-size: 14px;
}
.sidebar .list-unstyled li:last-child,
.panel-body ul li:last-child { border-bottom: 0; }

.media-number { counter-increment: rank; }
.media-number .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin-right: 9px;
    border-radius: 7px;
    background: var(--dx-surface-2);
    color: #7c8ea3;
    font-size: 12px;
    font-weight: 700;
}
.media-number:nth-of-type(-n+3) .num { background: var(--dx-grad); color: #fff; }

/* =============================================================================
   8. 分页
   ============================================================================= */
.pager { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pager li { margin: 0; }
.pager li > a,
.pager li > span {
    display: inline-block;
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius-pill);
    padding: 7px 17px;
    background: var(--dx-surface);
    color: var(--dx-ink-2);
    font-size: 14px;
    transition: all var(--dx-t);
}
.pager li > a:hover {
    border-color: var(--dx-brand-1);
    color: var(--dx-brand-1);
    background: #f4fbff;
}
.pager li.active > span,
.pager .active > a {
    background: var(--dx-grad);
    border-color: transparent;
    color: #fff;
}
.pagination > li > a,
.pagination > li > span {
    border-color: var(--dx-line);
    color: var(--dx-ink-2);
    margin: 0 3px;
    border-radius: 9px;
}
.pagination > .active > a { background: var(--dx-grad); border-color: transparent; }
.pagination > li > a:hover { border-color: var(--dx-brand-1); color: var(--dx-brand-1); }

/* =============================================================================
   9. 详情页
   ============================================================================= */
.article-content.panel { border-radius: var(--dx-radius); }
.article-content .panel-heading { background: var(--dx-surface); padding: 13px 24px; }
.article-content .panel-heading::before { top: 12px; bottom: 12px; }

/* 面包屑 —— daxling.css 的全局 `ol{padding:0;list-style:none}` 会打乱它，这里还原 */
.article-content .breadcrumb,
.group-page .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--dx-muted);
    list-style: none;
}
.article-content .breadcrumb > li + li::before { content: "/"; padding: 0 7px; color: var(--dx-line-strong); }
.article-content .breadcrumb a,
.group-page .breadcrumb a { color: var(--dx-muted); }
.article-content .breadcrumb a:hover,
.group-page .breadcrumb a:hover { color: var(--dx-brand-1); }
.article-content .panel-body { padding: 26px 28px 32px; }

.article-metas { border-bottom: 1px solid var(--dx-line); padding-bottom: 18px; margin-bottom: 22px; }
.metas-title {
    margin: 0 0 15px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -.02em;
    color: var(--dx-ink);
}
.metas-body { display: flex; flex-wrap: wrap; gap: 18px; }
.metas-body span { color: var(--dx-muted); font-size: 13px; }
.metas-body .fa { color: var(--dx-brand-1); margin-right: 5px; }

/* ---- 正文排版（.dx-rich 的同源版本，供插件模板复用） ---- */
.article-text {
    font-size: 15.6px;
    line-height: 1.95;
    color: #24354a;
    word-wrap: break-word;
}
.article-text > p:first-child { margin-top: 0; }
.article-text p { margin: 0 0 17px; }
.article-text h2,
.article-text h3,
.article-text h4 {
    margin: 34px 0 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--dx-ink);
    padding-left: 13px;
    border-left: 3px solid var(--dx-brand-1);
}
.article-text h2 { font-size: 21px; }
.article-text h3 { font-size: 18px; }
.article-text h4 { font-size: 16px; }
.article-text img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
    border-radius: var(--dx-radius-s);
    box-shadow: var(--dx-sh-2);
}
.article-text img.dx-img { width: 100%; }
.article-text blockquote {
    margin: 18px 0;
    padding: 14px 19px;
    background: var(--dx-surface-2);
    border-left: 3px solid var(--dx-brand-1);
    border-radius: 0 var(--dx-radius-s) var(--dx-radius-s) 0;
    color: var(--dx-ink-2);
    font-size: 14.6px;
}
.article-text pre {
    padding: 16px 18px;
    background: #0b1a2e;
    color: #cfe3ff;
    border: 0;
    border-radius: var(--dx-radius-s);
    overflow: auto;
    font-size: 13.2px;
    line-height: 1.72;
}
.article-text code {
    padding: 2px 6px;
    background: #0ea5e912;
    color: #be185d;
    border-radius: 5px;
    font-size: .9em;
}
.article-text pre code { background: transparent; color: inherit; padding: 0; }
/* 还原被全局重置吃掉的列表样式 */
.article-text ul, .article-text ol { margin: 0 0 17px; padding-left: 24px; }
.article-text ul { list-style: disc; }
.article-text ol { list-style: decimal; }
.article-text li { margin-bottom: 7px; }
.article-text li::marker { color: var(--dx-brand-1); }
.article-text a {
    color: var(--dx-brand-1);
    border-bottom: 1px solid rgba(14, 165, 233, .3);
}
.article-text a:hover { border-bottom-color: var(--dx-brand-1); }
.article-text table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.article-text table th,
.article-text table td { padding: 10px 13px; border: 1px solid var(--dx-line); }
.article-text table th { background: var(--dx-surface-2); font-weight: 600; }
.article-text hr { border: 0; border-top: 1px solid var(--dx-line); margin: 28px 0; }

/* 视频容器（由导入脚本生成的 .dx-video 包裹） */
.dx-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 18px 0;
    border-radius: var(--dx-radius-s);
    overflow: hidden;
    background: #000;
    box-shadow: var(--dx-sh-2);
}
.dx-video iframe, .dx-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 文章底部：标签 / 上下篇 / 相关推荐 */
.article-tags, .article-related, .article-prevnext { margin-top: 26px; }
.article-prevnext { display: flex; flex-wrap: wrap; gap: 10px; }
.article-prevnext a {
    flex: 1 1 240px;
    padding: 12px 16px;
    background: var(--dx-surface-2);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius-s);
    font-size: 14px;
    color: var(--dx-ink-2);
    transition: all var(--dx-t);
}
.article-prevnext a:hover {
    border-color: var(--dx-brand-1);
    color: var(--dx-brand-1);
    background: #f4fbff;
}

/* 评论区 */
.comment .media { border-top: 1px solid var(--dx-line); padding-top: 14px; margin-top: 14px; }
.comment .media-heading { font-size: 14px; font-weight: 600; }

/* 顺手：插件表单控件与统一皮肤对齐（留言、搜索等） */
.group-page .form-control {
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius-s);
    box-shadow: none;
    transition: border-color var(--dx-t), box-shadow var(--dx-t);
}
.group-page .form-control:focus {
    border-color: var(--dx-brand-1);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .13);
}
.group-page .btn {
    border-radius: var(--dx-radius-pill);
    border: 0;
    transition: transform var(--dx-t), box-shadow var(--dx-t), opacity var(--dx-t);
}
.group-page .btn-primary {
    background: var(--dx-grad);
    color: #fff;
    -webkit-text-fill-color: #fff; /* 坑：-webkit-text-fill-color 会继承并压过 color */
}
.group-page .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--dx-sh-2); opacity: .95; }

/* =============================================================================
   10. 右侧浮动按钮（插件自带结构，这里只换成方向 C 的观感）
   ============================================================================= */
#floatbtn { right: 18px; }
#floatbtn > a,
#floatbtn .floatbtn-item {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    box-shadow: var(--dx-sh-2);
    color: var(--dx-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dx-t);
}
#floatbtn > a:hover,
#floatbtn .floatbtn-item:hover {
    background: var(--dx-grad);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--dx-sh-3);
}
#floatbtn .iconfont { font-size: 18px; }
#floatbtn em {
    display: none; /* 方向 C 走「图标按钮」风格，去掉插件那两行竖排小字 */
}
#floatbtn .floatbtn-wrapper {
    border-radius: var(--dx-radius-s);
    border: 1px solid var(--dx-line);
    box-shadow: var(--dx-sh-3);
    background: var(--dx-surface);
}

/* =============================================================================
   10.5 深色底区域修正（页脚）★ 关键修复
   -----------------------------------------------------------------------------
   问题：本文件第 64 行写了 `body.group-page a { color: var(--dx-ink) }`，
        专指度 (0,1,2)，与 daxling.css 里 `.dx-footer ul a { color:#93a6c2 }`
        完全相同；而本文件**后加载** ⇒ 同分同权重时后者胜出，
        页脚 13 条链接被染成近黑 #0f172a，落在 #0b1a2e 深蓝底上
        对比度只有 1.02:1 —— 也就是「页脚完全看不到字」。
   修法：不改动那条全局规则（它负责浅色内容区的链接配色），
        而是在这里用更高专指度（0,2,x / 0,3,x）把深色区显式拉回浅色。
        -webkit-text-fill-color 必须一起写：它继承且优先级高于 color，
        只写 color 在部分链路里仍会显黑（见工作区记忆第 22 条）。
   ============================================================================= */
body.group-page .dx-footer { color: #93a6c2; }
body.group-page .dx-footer-brand > p { color: #93a6c2; -webkit-text-fill-color: #93a6c2; }
body.group-page .dx-footer h4 { color: #fff; -webkit-text-fill-color: #fff; }
body.group-page .dx-footer ul a,
body.group-page .dx-footer .dx-hero-chips > a {
    color: #93a6c2;
    -webkit-text-fill-color: #93a6c2;
}
body.group-page .dx-footer ul a:hover,
body.group-page .dx-footer .dx-hero-chips > a:hover {
    color: #7dd3fc;
    -webkit-text-fill-color: #7dd3fc;
}
body.group-page .dx-footer .dx-hero-chips > a:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .32);
}
body.group-page .dx-footer-bottom,
body.group-page .dx-footer-bottom span,
body.group-page .dx-footer-bottom a {
    color: #7e90ab;
    -webkit-text-fill-color: #7e90ab;
}

/* =============================================================================
   10.6 热门标签：底色框「紧贴」文字 ★ 2026-09-17 二次修正
   -----------------------------------------------------------------------------
   ⚠️ 第一版走错了方向：把胶囊做成「等宽格子 + 文字居中」，
      实测 30 个胶囊一律 110.7px，而文字宽度从 23.4px（Mac）到 92.7px 不等
      ⇒ 短词（Mac/PC/南孚/字体/投资/电池）的底色框左右各空 42px，
        长词（HTTP/REST服务测试）左右只剩 9px 就顶到边框
        —— 用户要的是「文字和底色框对齐」，即底色框随文字收缩，不是框与框对齐。
   正解：网格只负责「排布整齐」，胶囊靠 justify-self:start 按 max-content 收缩，
        底色框 = 文字宽 + 左右各 11px，一行行的左起点仍然对齐（三列齐头）。
        超长词由 max-width:100% 兜底 + 内部 span 省略号，不会撑破格子。
   ============================================================================= */
.hot-tags .tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}
.hot-tags .tags > a.tag {
    /* ★ 关键两行：start ⇒ 胶囊收缩到文字宽度；max-width ⇒ 超长词不撑破列 */
    justify-self: start;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    min-width: 0;
    padding: 0 11px;
    margin: 0;
    border-radius: var(--dx-radius-pill);
    background: var(--dx-surface-2);
    color: #47637f;
    -webkit-text-fill-color: #47637f;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}
.hot-tags .tags > a.tag > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hot-tags .tags > a.tag:hover {
    background: var(--dx-grad);
    color: #fff;
    -webkit-text-fill-color: #fff;
}
@media (max-width: 991px) {
    .hot-tags .tags { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .hot-tags .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   10.7 面板标题栏 + 栏目筛选条（.dx-catbar）★ 2026-09-17 二次修正
   -----------------------------------------------------------------------------
   ⚠️ 第一版的坑（实测数据）：把筛选条塞进 <h3 class="panel-title"> 里做横向滚动，
      结果 `.more` 的宽度是 1157.6px，而标题栏只有 714px ——
      `margin-left:auto` 把它推到右边、向左溢出 442px，
      外面又被 `.panel{overflow:hidden}` 从左边裁掉
      ⇒ 头几个栏目看不见（第一个只剩半截），「更多」被挤到面板边缘外，点不到。
      另外 <div> 放 <h3> 里本身就是非法嵌套。
   正解：① 模板把筛选条挪出 <h3>，改成独立的 `.dx-catbar`，放在 panel-heading 之下；
        ② 让它**换行**而不是横向滚动 —— 12 个栏目分 2~3 行全部展示，永不溢出；
        ③ 末尾「更多 →」跟着自然流排，不再贴边。
   ============================================================================= */
.group-page .panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 30px;
}
.group-page .panel-title > span { flex: 0 0 auto; }
/* 图集面板右上角的「查看更多」靠右 */
.group-page .panel-title .more {
    min-width: 0;
    margin-left: auto;
}

/* ---- 栏目筛选条（全新独立组件） ---- */
.panel .dx-catbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--dx-line);
    /* ⚠️ 底色必须用 var(--dx-surface)（白）：胶囊用 --dx-surface-2 = #f8fafd，
       底条若也取近似浅色（如 #f7fbff）两者几乎同色，胶囊就「消失」了（实测踩过）。 */
    background: var(--dx-surface);
}
.panel .dx-catbar > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 压过 `7. 侧边栏面板` 里 `.panel-body ul li` 的下划线与纵向内边距 */
.panel .dx-catbar > ul > li,
.panel .dx-catbar > ul > li:last-child {
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
    font-size: inherit;
}
.panel .dx-catbar > ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--dx-radius-pill);
    background: var(--dx-surface-2);
    color: var(--dx-ink-2);
    -webkit-text-fill-color: var(--dx-ink-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--dx-t), color var(--dx-t);
}
.panel .dx-catbar > ul > li > a:hover {
    background: var(--dx-grad);
    color: #fff;
    -webkit-text-fill-color: #fff;
}
/* 末尾「更多 →」：只留文字，弱化存在感但恒定可点 */
.panel .dx-catbar > ul > li.dx-cat-more > a,
.panel .dx-catbar > ul > li.dx-cat-more > a:hover {
    padding: 0 6px;
    background: transparent;
    color: var(--dx-brand-1);
    -webkit-text-fill-color: var(--dx-brand-1);
    font-weight: 600;
}
@media (max-width: 767px) {
    .panel .dx-catbar { padding: 10px 14px; }
    .panel .dx-catbar > ul { gap: 6px; }
    .panel .dx-catbar > ul > li > a { height: 25px; padding: 0 9px; }
}

/* =============================================================================
   10.8 文字层次（与主站 daxling.css 第 15.5 节同一套标尺）★ 2026-09-17 新增
   -----------------------------------------------------------------------------
     ① 面板/模块名  .panel-title     15px   / 700  ← 最上层
     ② 卡片标题     .article-title   17.5px / 650  ← 原 18.5/700，降半档让层级靠上
     ③ 正文摘要     .article-intro   13.5px / 400  ← 原 14px，略降、不加粗
     ④ 辅助信息     .article-tag     12.5px / 400  ← 原 12.8px，更小更淡
   只做 0.5~1px 级微调，其余靠字重与颜色分层。
   ============================================================================= */
.group-page .panel-title { font-size: 15px; font-weight: 700; }
.group-page .article-title { font-size: 17.5px; font-weight: 650; }
.group-page .article-intro { font-size: 13.5px; font-weight: 400; }
.group-page .article-tag { font-size: 12.5px; font-weight: 400; }
/* 首页「热门图集」的小标题 */
.group-page .related-article h5 {
    margin-top: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}
/* 侧栏条目（最新更新 / 推荐资讯）：比正文小一档，行距收紧，密度更舒服 */
.group-page .lasest-update .list-unstyled > li > a.link-dark,
.group-page .media-body a {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
}

/* =============================================================================
   11. 响应式
   ============================================================================= */
@media (max-width: 991px) {
    .metas-title { font-size: 23px; }
    .article-content .panel-body { padding: 22px 20px 26px; }
    .carousel-focus .carousel-img { height: 210px; }
    .article-item .media-left .embed-responsive { width: 130px; }
    .sidebar { margin-top: 20px; }
}

@media (max-width: 767px) {
    body.group-page { font-size: 14.6px; }
    .group-page .main-content { padding-top: 16px; }
    .group-page .container { padding-left: 18px; padding-right: 18px; }
    #content-container { padding-bottom: 40px; }
    .article-list .article-item, .article-item { padding: 16px 17px; border-radius: var(--dx-radius-s); }
    .article-title { font-size: 16.5px; }
    .article-item .media-left { padding-right: 12px; }
    .article-item .media-left .embed-responsive { width: 104px; }
    .metas-title { font-size: 21px; }
    .article-text { font-size: 15px; line-height: 1.88; }
    .dx-video { border-radius: var(--dx-radius-s); }
}

/* =============================================================================
   12. 清理 CMS 插件自带的「演示数据」占位块
   -----------------------------------------------------------------------------
   背景：CMS 插件 testdata 里预置了若干演示区块与演示表单数据，装好后会直接
   呈现在前台，观感很差：
     · 焦点图   indexfocus   → /assets/addons/cms/img/650x270.png（图上就印着 650×270）
     · 边栏广告 sidebarad1-3 → /assets/addons/cms/img/720x300.png
     · 热门导航 cms_navigation 中 8 条演示记录 → /assets/addons/cms/img/140x50.png 空白占位
   处理：用 :has() 精确识别「含有占位图的容器」并整块隐藏。
   这样是**条件隐藏**——后台一旦换成真实图片/真实数据，条件不再成立，区块自动恢复显示，
   不会误伤正常内容，也不需要改插件模板或直接删数据。
   ============================================================================= */

/* 焦点图：仍是 650x270 演示图 → 隐藏整个轮播容器 */
.swiper-container.index-focus:has(.carousel-img[style*="650x270"]),
.swiper-container.index-focus:has(img[src*="650x270"]) {
    display: none !important;
}

/* 边栏广告：仍是 720x300 演示图 → 隐藏空广告面板 */
.panel-blockimg:has(img[src*="720x300"]),
.panel-blockimg:has([style*="720x300"]) {
    display: none !important;
}

/* 热门导航 / 友情链接：仍是 140x50 演示占位图 → 隐藏整个演示面板 */
.container.hidden-xs:has(.list-partner img[src*="140x50"]),
.container.hidden-xs:has(.list-partner img[src*="650x270"]) {
    display: none !important;
}

/* 公网访问时指向内网专有地址的条目（配合 daxling.js 的 initLinkResolve） */
.dx-unreachable {
    display: none !important;
}

/* =============================================================================
   11. 图集（model=2）卡片与详情  ★ 2026-09-17 新增
   -----------------------------------------------------------------------------
   背景：/cms/gallery.html 原来 3 个子栏目全空、标题下没有一句人话。
   现在补了两处「信息」：
     · common/item_product.html  卡片标题下加一行简介 → 本节的 .desc
     · show_product.html         详情正文去掉 ispaid 门槛 → 本节的 .dx-detail-body
   要点：简介锁「两行」高度，否则 1 行 / 2 行的卡片会不等高、操作条错位
        （与首页精选技术卡片同一个坑，见通用陷阱）。
   ============================================================================= */

/* --- 卡片简介 --- */
.product-item .card .title .desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.62;
    color: #64748b;
    /* 锁两行：任何标题长短下卡片都一样高 */
    min-height: 40.5px;
    min-height: 2lh;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 卡片整体：白底 + 细边框，hover 时轻微抬起（插件原本只有边框变色） */
.product-item .card {
    border-radius: var(--radius-s, 12px);
    border: 1px solid var(--line, #e6edf6);
    box-shadow: var(--sh-1, 0 1px 2px rgba(15, 23, 42, .04));
    transition: transform var(--t-fast, .18s), box-shadow var(--t-fast, .18s), border-color var(--t-fast, .18s);
}
.product-item .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-3, 0 24px 48px -20px rgba(15, 23, 42, .22));
    border-color: var(--line-strong, #d8e3f1);
}
.product-item .card .thumb .embed-responsive img { border-radius: 8px; }

/* --- 详情页正文（免费内容） --- */
.dx-detail-body { font-size: 15px; line-height: 1.85; color: var(--ink-2, #475569); }
.dx-detail-body > p:first-child { margin-top: 0; }
.dx-detail-body p { margin: 0 0 14px; }
.dx-detail-body ul { margin: 0 0 14px; padding-left: 20px; }
.dx-detail-body li { margin-bottom: 6px; }
.dx-detail-body strong { color: var(--ink, #0f172a); }

@media (max-width: 768px) {
    .product-item .card .title .desc { font-size: 12px; min-height: 39px; min-height: 2lh; }
}

/* =============================================================================
   12. 热门图集标题被「写死高度」裁掉下半截  ★ 2026-09-17 修复
   -----------------------------------------------------------------------------
   现象：CMS 首页「热门图集」四张卡的标题看着像只显示了一半。
   实测（1440px 视口）：
     插件 common.css  .index-gallary h5 { height: 15px; overflow: hidden }
     但实际字号 13.5px、行高 20.25px，文字行盒需要 18px
     → scrollHeight 20 > clientHeight 15，文字底部越出 4.1px，汉字下缘被削掉
   注意：这条规则是「通用陷阱 32」的翻版 —— 开关/覆盖样式一律先查插件里的
        固定 height / overflow:hidden / !important，否则写了也白写。
   修法：让高度回到自适应（height:auto），单行省略改用 block + nowrap + ellipsis
        （-webkit-box 的 line-clamp 在固定高度下也会参与裁切）。
   特异度：插件是 (0,1,1)，这里用 (0,2,1)，不依赖加载顺序、也不动 !important。
   ============================================================================= */
.index-gallary .related-article h5,
.index-gallary .panel-body h5,
.panel-body .related-article h5 {
    height: auto;
    min-height: 20px;
    line-height: 1.5;
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0 0;
}
/* 移动端两列时标题更窄，字号略降一档，避免全被省略号吃掉 */
@media (max-width: 768px) {
    .index-gallary .related-article h5 { font-size: 12.5px; min-height: 19px; }
}