/**
 * CMS前台样式
 */

/* 通用 */
:root {
    /* 全站强调色跟随导航栏：--brand-deep 由 TemplateEngine::brandVarsCss() 依据后台
       「页头设置 → 导航菜单」的预设背景/背景色派生后注入 :root；
       变量缺失（如导航菜单为空）时回落到改造前的默认蓝，外观不变 */
    --primary-color: var(--brand-deep, #0d6efd);
    --secondary-color: #6c757d;
}

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

/* ===== 全站背景图（由 TemplateEngine::renderBodyBackground 输出） ===== */
/* 背景图叠加层和遮罩层为内联样式，此处仅保留占位 */
body.has-body-bg {
    /* 确保内容区 z-index 在背景层之上 */
    position: relative;
}
/* 内容区卡片毛玻璃效果由 body.has-body-bg 配合内联 <style> 控制，见 TemplateEngine */

/* ===== 标题装饰样式 ===== */
/* 1. 小箭头 */
.module-title-arrow {
    position: relative;
}
.module-title-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--title-bg, #0d6efd);
}

/* 2. 双线底纹 */
.module-title-underline {
    position: relative;
}
.module-title-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--title-bg, #0d6efd);
    border-radius: 3px;
}
.module-title-underline::before {
    content: '';
    position: absolute;
    left: 10%;
    bottom: -5px;
    width: 80%;
    height: 1px;
    background: rgba(0,0,0,0.1);
}

/* 3. 标签页顶条 */
.module-title-left-border {
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px 10px 16px !important;
    box-shadow: 0 -3px 0 0 var(--title-bg, #0d6efd) inset;
}

/* 4. 渐变色 */
.module-title-gradient {
    background: linear-gradient(135deg, var(--title-bg, #0d6efd), #667eea) !important;
    color: #fff !important;
}

/* 5. 发光边框 */
.module-title-badge {
    border-radius: 8px !important;
    padding: 6px 18px !important;
    border: 2px solid var(--title-bg, #0d6efd) !important;
    background: transparent !important;
    color: var(--title-bg, #0d6efd) !important;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}

/* ===== 模块外观预设样式（后台卡片选择器）===== */
/* 1. 圆角卡片 - 列表模块 */
.card-rounded {
    border-radius: 12px !important;
    overflow: hidden;
}

/* 2. 卡片阴影 - 列表模块 */
.card-shadow {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 3. 图片圆角 - 媒体模块 */
.img-rounded img,
.img-rounded video {
    border-radius: 12px !important;
}

/* 4. 遮罩层 - Banner模块 */
.banner-overlay {
    position: relative;
}
.banner-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

/* 5. 滚动画廊 - 图片滚动模块 */
.scroll-gallery {
    padding: 4px 0;
}
.scroll-gallery .scroll-track {
    border-radius: 8px;
    gap: 16px;
}

/* 6. 图标放大 - 图标导航模块 */
.icon-hover-zoom .icon-item {
    transition: transform 0.25s ease;
}
.icon-hover-zoom .icon-item:hover {
    transform: scale(1.15);
}

/* 7. 打字机文本 - 内容模块 */
.typewriter {
    max-width: 72ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.9;
    font-size: 16px;
}

/* 8. 标签页顶条 - Tab/内容模块 */
.card-tabtop {
    border-top: 3px solid var(--primary-color, #0d6efd) !important;
}

/* 9. 悬停上浮 - 通用 */
.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* 10. 毛玻璃 - 通用 */
.card-glass {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 11. 分割线 - 通用 */
.card-divider {
    border-top: 1px solid #e9ecef !important;
}

/* 导航 - 由TemplateEngine.php内联样式控制，此处仅保留通用样式 */
.navbar-brand { font-weight: 700; font-size: 1.3rem; }
.navbar .dropdown-menu { border: none; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 8px; }

/* 模块通用 */
.module-banner, .module-carousel, .module-mid-banner { margin-bottom: 0; }
.module-articles .card { transition: transform 0.2s; border: 1px solid #e9ecef; }
.module-articles .card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-card { transition: transform 0.2s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* 文章内容 */
.article-content { line-height: 1.8; font-size: 16px; color: #333; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.article-content video { max-width: 400px; width: 100%; display: block; margin: 0 auto; border-radius: 4px; }
/* 编辑器图片包裹层：防止旧数据中文字落入图片容器出现50%宽度异常 */
.article-content .cms-media-resizable { display:block; max-width:100% !important; width:auto !important; margin:10px 0; }
.article-content .cms-media-resizable img { width:100% !important; margin:0; }
/* 编辑器视频包裹层 */
.article-content .cms-video-figure { max-width:100% !important; margin:12px auto; }
.article-content p { margin-bottom: 1em; }
.article-content h2, .article-content h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
.article-content blockquote { border-left: 4px solid var(--primary-color); padding: 10px 20px; margin: 15px 0; background: #f8f9fa; }
.article-content pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 8px; overflow-x: auto; }
.article-content code { background: #f1f3f5; color: #e83e8c; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.article-content pre code { background: transparent; color: inherit; padding: 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.article-content table th, .article-content table td { border: 1px solid #dee2e6; padding: 8px 12px; }
.article-content table th { background: #f8f9fa; }

/* 文章工具栏（字号 + 听文章 + 微信分享） */
.article-toolbar { gap: 1rem; }
.fontsize-bar { font-size: 13px; color: #999; letter-spacing: 0.5px; }
.fontsize-link {
    color: #6c757d !important;
    text-decoration: none;
    padding: 2px 4px;
    transition: color 0.15s;
}
.fontsize-link:hover { color: var(--primary-color) !important; }
.fontsize-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
}
.toolbar-link {
    color: #6c757d !important;
    font-size: 13px;
    transition: color 0.15s;
}
.toolbar-link:hover { color: var(--primary-color) !important; }

/* 宽屏视频比例 */
.ratio-21x9 { --bs-aspect-ratio: 42.85%; }
/* 竖屏视频比例（手机拍摄） */
.ratio-9x16 { --bs-aspect-ratio: 177.78%; }

/* 面包屑 */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 1rem; }

/* 页脚 */
footer { font-size: 14px; }
footer a { text-decoration: none; }
.footer-divider-top { max-width: 1380px; margin: 0 auto; }
/* 页脚二维码布局微调 */
.footer-text-left { padding-left: 60px; }
.footer-qr-right { padding-right: 60px; }
/* 页脚二维码响应式 */
@media (max-width: 767.98px) {
    .footer-text-left { text-align: center !important; margin-bottom: 12px; }
    .footer-qr-right { justify-content: center !important; }
    .footer-qr-img { max-width: 80px !important; max-height: 80px !important; }
}

/* 回到顶部按钮样式已移除：功能并入右侧悬浮按钮（TemplateEngine::renderRightFloatNav 内联样式，配色跟随导航栏） */

/* ===== 头部背景图（全宽包裹层，Banner 沉底叠加，上部露出背景）===== */
.header-bg-section {
    width: 100%;
    /* 底部 + 左右渐变由内联 div 处理，70% 高度 + 8 段色阶确保无可见过渡线 */
}
/* Banner/头条/幻灯/导航搜索/DIY容器：提升层叠到背景图之上，固有色覆盖背景 */
.header-banner,
.headline-wrap,
.slideshow-notice-wrap,
.site-main-nav,
.site-nav-search-wrap,
.diy-render {
    position: relative;
    z-index: 1;
}
/* 主导航层叠需高于后续同级模块：展开的下拉菜单要盖住下方内容，
   否则被同层后置模块遮挡，表现为下拉"点不开" */
.site-main-nav { z-index: 1020; }
/* 移动端缩小背景高度 */
@media (max-width: 768px) {
    .header-bg-section {
        height: 250px !important;
    }
    .header-bg-image {
        height: 250px !important;
    }
    /* 移动端左右渐变稍窄 */
    .header-bg-fade-left,
    .header-bg-fade-right {
        width: 10% !important;
    }
}

/* 全局容器宽度统一为1380px */
.container {
    max-width: 1380px;
}

/* DIY布局前台样式 */
.diy-render {
    display: flow-root; /* 创建BFC隔离上下文，防止与导航栏/页脚边距重叠 */
}
.diy-render-row {
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    overflow: hidden; /* 裁剪Bootstrap row负边距溢出，防止覆盖相邻元素边距 */
}
.diy-render-col {
    min-height: 1px;
}
/* DIY模块标题样式调整 */
.diy-render h3.mb-4 {
    margin-bottom: 8px !important;
    margin-top: 8px !important;
}

/* 听文章播放器 */
.tts-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 1000;
    padding: 0;
}
.tts-player-inner {
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
}
.tts-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tts-btn-play {
    background: var(--primary-color);
    color: #fff;
}
.tts-btn-play:hover { background: #0b5ed7; }
.tts-btn-stop {
    background: #f8f9fa;
    color: #dc3545;
    font-size: 14px;
}
.tts-btn-stop:hover { background: #e9ecef; }
.tts-btn-close {
    background: transparent;
    color: #6c757d;
    font-size: 16px;
}
.tts-btn-close:hover { background: #f1f3f5; color: #333; }
.tts-progress {
    flex: 1;
    min-width: 0;
}
.tts-status {
    font-size: 13px;
    color: #495057;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tts-bar {
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}
.tts-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #0dcaf0);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s;
}
.tts-speed {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.tts-speed-btn {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tts-speed-btn:hover { background: #f8f9fa; border-color: #adb5bd; }
.tts-speed-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
/* 朗读高亮 */
.tts-highlight {
    background: #fff3cd !important;
    border-radius: 6px;
    padding: 8px 12px !important;
    transition: background 0.3s;
    box-shadow: 0 0 0 3px rgba(255,193,7,0.3);
}

/* 微信分享弹窗 */
.wechat-share-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wechat-share-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-width: 320px;
    width: 90%;
}
.wechat-share-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}
.wechat-share-title::before {
    content: '\F3E4';
    font-family: 'bootstrap-icons';
    color: #07c160;
    margin-right: 8px;
    font-size: 22px;
    vertical-align: middle;
}
.wechat-share-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.wechat-share-qr img {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.wechat-share-tip {
    font-size: 13px;
    color: #999;
}
.wechat-share-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.wechat-share-close:hover { color: #333; }

/* 微信分享按钮图标 */
#btnWechatShare {
    color: #07c160;
}
#btnWechatShare:hover {
    color: #06ad56;
}

/* 友情链接容器（页脚上方） */
.friendlinks-bar {
    padding: 20px 0;
    /* 底边改品牌淡色（2026-09-23，原为 rgba(0,0,0,0.06) 灰线，与主题色不呼应） */
    border-bottom: 1px solid var(--brand-line, rgba(0,0,0,0.06));
}
.friendlinks-inner {
    padding: 0 20px;
}
/* 左侧内边距：让标题（及链接行）左缘与上方同列模块标题粗线对齐（2026-09-23 用户要求）
   值由渲染层注入 --fl-pad-left（后台「友链设置 → 左侧内边距」，默认 43 = 模块列 4 + 模块内边距 38 + .mt-head 16）；
   .friendlinks-style-dropdown（下拉分类式）保持原有内边距、不参与对齐 */
.friendlinks-bar:not(.friendlinks-style-dropdown) .friendlinks-inner {
    padding-left: var(--fl-pad-left, 43px);
}
/* .friendlinks-title 已废弃（2026-09-23）：友链标题改用站内统一标题栏 .mt-head（Helper::module_title_head()），
   渲染层不再输出该类，故移除本块与各样式下的 text-align 共 4 条规则 */
.friendlinks-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.friendlinks-item {
    text-decoration: none;
    transition: opacity 0.2s, color 0.2s;
    font-size: 14px;
    color: var(--fl-text, #6c757d);   /* 文字色由渲染层注入的 --fl-text 决定（后台「友链设置 → 文字颜色」） */
}
/* hover 改用主题色（2026-09-23，原为仅降透明度 opacity:.7）——与站内列表行 hover 品牌深色口径一致 */
.friendlinks-item:hover { color: var(--brand-deep, #0d6efd); }
.friendlinks-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}
.friendlinks-name { vertical-align: middle; }

/* 样式1：文字横排（链接行左对齐，2026-09-23 用户要求：与左对齐的标题同侧）
   padding-left:16px 使条目盒左缘与标题粗线左缘对齐（36px = 容器 .friendlinks-inner 20 + 16），
   条目文字 36+12 恰好与标题文字 36+12（.mt-title-text 的 padding）对齐——与站内模块「符号框对齐粗线」口径一致 */
.friendlinks-style-text .friendlinks-list { gap: 0; justify-content: flex-start; padding-left: 16px; }
.friendlinks-style-text .friendlinks-item { padding: 4px 12px; }
.friendlinks-style-text .friendlinks-item + .friendlinks-item::before {
    content: '|';
    display: inline-block;
    position: relative;
    left: -12px;
    opacity: 0.25;
    pointer-events: none;
}

/* 样式2：Logo横排（链接行左对齐，2026-09-23；padding-left:16px 使方块左缘对齐标题粗线） */
.friendlinks-style-logo .friendlinks-list { gap: 16px; justify-content: flex-start; padding-left: 16px; }
.friendlinks-style-logo .friendlinks-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(0,0,0,0.03);
    transition: background 0.2s, box-shadow 0.2s;
}
.friendlinks-style-logo .friendlinks-item:hover {
    background: rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.friendlinks-style-logo .friendlinks-logo { height: 28px; }

/* 样式3：卡片式（链接行左对齐，2026-09-23；padding-left:16px 使卡片左缘对齐标题粗线） */
.friendlinks-style-card .friendlinks-list { gap: 10px; justify-content: flex-start; padding-left: 16px; }
.friendlinks-style-card .friendlinks-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
}
.friendlinks-style-card .friendlinks-item:hover {
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.friendlinks-style-card .friendlinks-logo { height: 22px; }

/* 样式4：下拉分类式（参考rd.qyxgov.cn底部相关网站） */
.friendlinks-style-dropdown .friendlinks-dropdown-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.friendlinks-style-dropdown .friendlinks-dropdown-title {
    background: #e74c3c;
    color: #fff;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 4px;
    line-height: 1.4;
}
.friendlinks-style-dropdown .friendlinks-dropdown-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}
.friendlinks-style-dropdown .friendlinks-dropdown-item {
    position: relative;
}
.friendlinks-style-dropdown .friendlinks-dropbtn {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 8px 32px 8px 14px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s;
    min-width: 140px;
    text-align: left;
}
.friendlinks-style-dropdown .friendlinks-dropbtn:hover,
.friendlinks-style-dropdown .friendlinks-dropdown-item:hover .friendlinks-dropbtn {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #f8f9ff;
}
.friendlinks-style-dropdown .friendlinks-dropbtn i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.2s;
}
.friendlinks-style-dropdown .friendlinks-dropdown-item:hover .friendlinks-dropbtn i {
    transform: translateY(-50%) rotate(180deg);
}
.friendlinks-style-dropdown .friendlinks-dropcontent {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 100;
    padding: 8px 0;
}
.friendlinks-style-dropdown .friendlinks-dropdown-item:hover .friendlinks-dropcontent {
    display: block;
}
.friendlinks-style-dropdown .friendlinks-dropitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: #495057;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.friendlinks-style-dropdown .friendlinks-dropitem:hover {
    background: #f0f7ff;
    color: #0d6efd;
    text-decoration: none;
}
.friendlinks-style-dropdown .friendlinks-droplogo {
    height: 16px;
    width: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 响应式 */
@media (max-width: 768px) {
    .module-articles .col-md-6 { margin-bottom: 10px; }
    /* 友情链接移动端 */
    .friendlinks-inner { padding: 0 12px; }
    .friendlinks-bar { padding: 16px 0; }
    .friendlinks-style-logo .friendlinks-item,
    .friendlinks-style-card .friendlinks-item { padding: 5px 10px; font-size: 13px; }
    /* DIY布局移动端自适应：多列堆叠 */
    .diy-render-row {
        flex-direction: column !important;
    }
    .diy-render-col {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* TTS播放器移动端 */
    .tts-player-inner {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
    }
    .tts-speed { order: 3; }
    .tts-progress { order: 2; flex-basis: 100%; }
    .tts-speed-btn { padding: 3px 6px; font-size: 10px; }
}

/* Hover utility classes (replaces inline onmouseover/onmouseout) */
.hover-underline:hover { text-decoration: underline !important; }
.hover-shadow-lg:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
/* Link hover effects */
a[class*="hover-"] { transition: all 0.2s ease; }
/* DIY float button hover */
#diy-float-btn:hover { transform: scale(1.1) !important; }
/* Category card hover */
.cat-card-hover:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 28px rgba(0,0,0,0.12), 0 18px 48px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.5) !important;
}
/* Card button hover (colors via CSS custom properties) */
.cat-card-btn:hover {
    background: var(--btn-hover) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}
/* 幻灯公告列表（Tab 公告栏）：字号 / 行高 / 内边距 / 前缀图标 / 分隔线全部由模块内联样式表消费
 * 后台「幻灯设置 → 列表与 Tab 样式」输出的 --ss-* 变量控制（2026-09-23 起）：
 * 原先此处用 !important 强制「标题 16px、上下 8px 内边距」，会压掉后台设置，故移除，避免两处打架 */
/* Product list item hover */
.prod-hover-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; }

/* ===== 分类页/文章页 左侧分类导航共用样式 ===== */
/* 强调色统一消费导航栏派生变量（--brand-*，见 TemplateEngine::brandVarsCss）：
   后台改「导航栏设置」即这三处跟随变化；变量缺失时各自回落到改造前的蓝色/灰色 */
/* 侧边栏顶级标题链接：点击跳转对应分类页（与子分类项交互一致） */
.cat-sidebar-title { color: #333; text-decoration: none; transition: color .2s; }
.cat-sidebar-title:hover { color: var(--brand-deep, #0d6efd); }
/* 左侧导航 hover 效果（缩进跟随 --indent 变量，各级分类悬停/选中不跳位） */
.cat-sidebar-link:hover {
    background: var(--brand-soft-hover, rgba(13,110,253,0.04));
    color: var(--brand-deep, #0d6efd) !important;
    padding-left: calc(var(--indent, 20px) + 4px) !important;
}
.cat-sidebar-link.active {
    background: var(--brand-soft, rgba(13,110,253,0.08));
    color: var(--brand-deep, #0d6efd) !important;
    font-weight: 600;
    border-left: 3px solid var(--brand-color, #0d6efd);
    padding-left: calc(var(--indent, 20px) - 3px) !important;
}
/* 文章列表项左侧箭头 */
.cat-article-arrow { color: var(--brand-color, #0d6efd); margin-right: 4px; }
/* 文章列表项 hover：保持中性色，避免长列表整体泛品牌色 */
.list-group-item-action:hover { background-color: #fbfcfe; }

/* ===== 分类页/搜索页文章列表容器：统一圆角与边框（覆盖 Bootstrap 默认圆角与 #dee2e6） ===== */
.list-group { border-radius: var(--nav-radius, 8px); overflow: hidden; }
.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0; }
.list-group-item { border-color: #e9ecef; }
.list-group-item + .list-group-item { border-top-color: #f2f4f7; }
/* 列表内次要文字（发布时间等）：降噪并对齐数字宽度，避免逐行抖动 */
.list-group-item .text-muted { color: #98a2b3 !important; font-variant-numeric: tabular-nums; }

/* ===== 前台分页：跟随导航栏品牌色与圆角 =====
   Paginator 输出的结构与后台共用（log.php/article.php），故不改 Paginator.php，
   仅在前台样式覆盖；后台走 admin.css 不受影响 */
/* 与上方文章列表拉开间距：Bootstrap 的 .pagination 与 .list-group 默认都没有外边距，
   两者相邻时会紧贴在一起（统计行同样贴近页码，一并给出行距） */
.pagination { margin: 24px 0 0; }
.pagination .page-link {
    color: #4b5563;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--nav-radius, 6px);
    margin: 0 2px;
    padding: 6px 11px;
    transition: color .2s, background .2s, border-color .2s;
}
.pagination .page-link:hover {
    color: var(--brand-deep, #0d6efd);
    background: var(--brand-soft-hover, rgba(13,110,253,0.04));
    border-color: var(--brand-color, #0d6efd);
}
.pagination .page-item.active .page-link {
    color: var(--brand-on, #fff);
    background: var(--brand-deep, #0d6efd);
    border-color: var(--brand-deep, #0d6efd);
}
.pagination .page-item.disabled .page-link {
    color: #c1c7cf;
    background: #fbfbfc;
    border-color: #eef0f3;
}
/* 分页统计行（共 N 条记录，第 x/y 页）
   注意：Paginator 输出为 <nav><ul class="pagination">…</ul></nav><p>…</p>，
   统计行是 <nav> 的兄弟节点、而非 .pagination 的兄弟，故必须用 `nav + p` 匹配
   （写成 `.pagination + p` 永远不会命中，样式会静默失效） */
nav + p.text-center { color: #98a2b3 !important; font-size: 13px; margin: 8px 0 4px; }
/* 移动端响应式：左右布局改上下堆叠 */
@media (max-width: 768px) {
    .cat-layout-wrapper { flex-direction: column !important; }
    .cat-sidebar { flex: 1 1 auto !important; min-width: 100% !important; }
    .cat-sidebar-inner { max-height: 300px; overflow-y: auto; }
}

/* ===== 面包屑链接：去下划线，颜色与当前项灰色统一，悬停高亮 ===== */
.breadcrumb-item a { color: #6c757d; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--brand-deep, #0d6efd); }