/* ==========================================================================
   skin.css —— 自有皮肤层（不引用任何原站图片素材）
   加载顺序：index.css -> style_all.css -> skin.css，本文件做覆盖
   ========================================================================== */

:root {
    --brand:        #358FF0;
    --brand-dark:   #2B71C2;
    --brand-deep:   #2E58FF;
    --ink:          #1B2A4E;
    --ink-2:        #5A6B85;
    --line:         #E3EBF7;
    --bg-soft:      #F5F8FF;
}

/* --- 首屏 banner：去掉原站背景图，改纯 CSS 渐变 --- */
.banner-max {
    background-image: none !important;
    background: linear-gradient(165deg, #E9F1FF 0%, #F8FBFF 48%, #E3EEFF 100%) !important;
}

/* --- 缩略图统一圆角（图片内容已换成内联 SVG） --- */
.item-thumbnail img,
.computer-content .left ul li a.img img,
.posts-item .item-thumbnail img {
    border-radius: 8px;
    display: block;
}

.posts-item .item-thumbnail {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

/* --- 列表页缩略图与文字间距 --- */
.computer-content .left ul li a.img img {
    margin-bottom: 6px;
}

/* --- 平板：1200 定宽整体收边距 --- */
@media (max-width: 1240px) {
    .center {
        width: auto !important;
        max-width: 1200px;
        min-width: 0 !important;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

/* --- 手机：首屏简化，隐藏右侧产品示意图 --- */
@media (max-width: 776px) {
    .banner-max {
        height: auto !important;
        padding: 32px 0 40px;
    }

    .banner-max .computer-img-box {
        display: none;
    }

    .banner-max .download-all {
        position: static !important;
        margin-top: 24px;
    }

    .banner-max .banner_text_box .title span {
        font-size: 28px;
        line-height: 1.35;
    }

    .banner-max .trait ul {
        width: 100%;
        float: none;
    }
}

/* --- 标题后的原站徽标（位图带水印），直接隐藏 --- */
.zj_title {
    display: none !important;
}

/* --- 占位 SVG 的画框比例常与容器不一致，等比裁切避免图形/文字被压扁 --- */
.item-thumbnail img,
.posts-item .item-thumbnail img,
.computer-content .left ul li a.img img,
.news_info img,
.news-all img,
.specific-right_ img,
.detail-content img,
.article-content img {
    object-fit: cover;
}

/* --- 换位图带来的轻微锯齿：统一柔和渲染 --- */
img[src$=".svg"] {
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

/* --- 卡片缩略图：原站把图片框写死 252px，实际容器只有 231px，右侧被裁 21px --- */
.posts-item.card .item-thumbnail a,
.posts-item.card .item-thumbnail img {
    width: 100% !important;
    height: 100% !important;
}

/* --- 窄屏下 hero 文案绝对定位 left:0，会贴屏幕左缘，与顶栏 logo 不对齐 --- */
@media (max-width: 1240px) {
    .banner-max .banner_text_box,
    .banner-max .download-all {
        left: 16px;
        right: 16px;
    }
}

/* --- 列表页左右栏是 content-box，总宽 = 100% + 内边距，会顶出横向滚动条 --- */
.computer-content .left,
.computer-content .right {
    box-sizing: border-box;
}

/* --- 图文教程区：大图与缩略图保持等比，不再被横向拉宽 --- */
.system-news-list .top .img img,
.system-news-list .list .thumb img {
    object-fit: cover;
}

/* 大图与右侧列表贴在一起，补一点间距（65% + 35% 已撑满，这里把大图收窄再留 gap）。 */
.system-news-list .content-box .content .top {
    gap: 20px;
}

.system-news-list .content-box .content .top .img {
    width: 63%;
}

.system-news-list .content-box .content .top .list {
    width: 35%;
}

/* 右侧缩略列表：原站 thumb 写死 225px，在 420px 宽的栏里把标题挤成两行；
 * 这里缩到 150px、三条在 340px 高度里均分，标题最多两行。
 */
.system-news-list .content-box .content .top .list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.system-news-list .content-box .content .top .list li + li {
    margin-top: 0;
}

.system-news-list .content-box .content .top .list li a {
    align-items: flex-start;
    gap: 12px;
    padding: 0;
}

.system-news-list .content-box .content .top .list li a .thumb {
    border-radius: 4px;
    flex: 0 0 150px;
    height: 88px;
    overflow: hidden;
}

.system-news-list .content-box .content .top .list li a .thumb > img {
    height: 88px;
    object-fit: cover;
    width: 150px;
}

.system-news-list .content-box .content .top .list li a .info {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
}

.system-news-list .content-box .content .top .list li a .info span.title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.4;
    overflow: hidden;
    padding-bottom: 4px;
}

/* 大图标题条：原站只给 0.2 透明黑底，压在占位图文字上看不清，改成渐变压暗 */
.system-news-list .content-box .content .top .img a p {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* --- 「图文教程」标签胶囊：原站用带水印的位图做底，改纯 CSS 胶囊 ---
 * tab 数量由真实有文章的分类决定（可能少于静态站的 4 个），居中排列避免两端撑开。
 * 选中态用深蓝→青色渐变，白字对比度 >= 4.5:1（原 #358FF0 只有 3.3:1）。
 */
.system-news-list .system-news-list-tab {
    justify-content: center;
    gap: 32px;
}

.system-news-list .system-news-list-tab > li {
    background-image: none;
    background-color: #EAF2FF;
    border: 1px solid #E3EBF7;
    color: #4A5A78;
    box-shadow: 0 2px 10px rgba(53, 143, 240, 0.08);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.system-news-list .system-news-list-tab > li.active,
.system-news-list .system-news-list-tab > li:hover {
    background-image: linear-gradient(135deg, #1E6FD9 0%, #157F8F 100%);
    background-color: transparent;
    border-color: #1E6FD9;
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(30, 111, 217, 0.28);
}

/* --- 排行榜序号：原站 nth-child(1~3) 写了 font-size:0 + 带引号失效的 background-image，
 * 导致前三名序号完全空白，这里统一改成色块序号，前三名用暖色区分。
 */
.course-rank-box .list > li a .sort-ico,
.ranking-sytem li a .sort-ico,
#theme_1 .ranking-sytem li a .sort-ico,
.computer-content .right .course-rank-box .list > li a .sort-ico {
    background-image: none !important;
    background-color: #EAF2FF !important;
    border-radius: 6px;
    color: #5A6B85 !important;
    font-size: 13px !important;
    font-weight: 700;
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
    text-align: center;
    width: 24px;
}

.course-rank-box .list > li:nth-child(1) .sort-ico,
.ranking-sytem li:nth-child(1) .sort-ico,
.computer-content .right .course-rank-box .list > li:nth-child(1) a .sort-ico,
#theme_1 .ranking-sytem li:nth-child(1) a .sort-ico {
    background-color: #FF5A1F !important;
    color: #FFFFFF !important;
}

.course-rank-box .list > li:nth-child(2) .sort-ico,
.ranking-sytem li:nth-child(2) .sort-ico,
.computer-content .right .course-rank-box .list > li:nth-child(2) a .sort-ico,
#theme_1 .ranking-sytem li:nth-child(2) a .sort-ico {
    background-color: #F9A123 !important;
    color: #FFFFFF !important;
}

.course-rank-box .list > li:nth-child(3) .sort-ico,
.ranking-sytem li:nth-child(3) .sort-ico,
.computer-content .right .course-rank-box .list > li:nth-child(3) a .sort-ico,
#theme_1 .ranking-sytem li:nth-child(3) a .sort-ico {
    background-color: #358FF0 !important;
    color: #FFFFFF !important;
}

/* --- 详情页侧栏排行榜：「序号 + 标题 + 下载数」三栏对齐
 * 原站 p 是 width:100%，长标题会把序号挤到下一行，这里改成 flex 伸缩小标题省略。
 */
#theme_1 .ranking-sytem ul li a {
    gap: 8px;
    padding: 8px 0;
}

#theme_1 .ranking-sytem ul li a .sort-ico {
    flex: 0 0 24px;
}

#theme_1 .ranking-sytem ul li a p,
#theme_1 .ranking-sytem ul li a p.title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-right: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}

#theme_1 .ranking-sytem ul li a > span {
    color: #8794AC;
    flex: 0 0 auto;
    font-size: 12px;
}

/* --- 列表行：.computer-content ul 是 flex 容器，li 会按内容收缩，
 * 导致卡片只有内容宽（信息区被挤到换行），这里固定撑满一行。
 */
.computer-content .left > ul > li {
    box-sizing: border-box;
    width: 100%;
}

.computer-content .news_info .time {
    flex-wrap: wrap;
    height: auto;
    margin: 10px 0 0;
}

/* 列表行的价格靠右对齐，不和星级/时间/大小挤在一起换行
 * （原站 #theme_1 .left .time span + span 的 id 权重更高，必须加 !important）
 */
.computer-content .news_info .time .hl-price-line {
    margin-left: auto !important;
    margin-top: 0;
}

/* --- 文章页「关联软件」条：封面 img 带 width/height 属性，
 * 原站只给了 width:100px，高度就按属性 250px 撑高整条，这里补 height:auto。
 */
.computer-content .left .detail-box .relation-box > img {
    border-radius: 4px;
    height: auto;
    width: 100px;
}

/* --- 列表标题里的链接：原站给 .news_info a 固定了 width:550px / height:25px，
 * 标题链接需要自适应宽度，否则长标题会被提前截断。
 */
.computer-content .news_info h3 a {
    color: inherit;
    display: block;
    font-size: inherit;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}

/* --- 列表卡片星级：原站 `#theme_1 .left .time span + span { margin-left: 40px }`
 * 把星级内部 5 个 ★ 也当成兄弟 span 命中了，星星被撑开到 40px 间距（文章页关联软件条同样中招），
 * 这里用 !important 盖掉原站 id 权重，统一还原成紧凑行内。
 */
#theme_1 .left .time .star {
    align-items: center;
}

#theme_1 .hl-stars > span,
#theme_1 .hl-stars > span + span {
    display: inline;
    margin-left: 0 !important;
}

/* --- 软件库分类标签：原站选中态右下角盖了一枚绿色对勾位图（dagou_002.svg），
 * 和蓝色边框撞色，这里改成浅蓝底 + 主色边框，并去掉那枚对勾。
 */
#theme_1 .nav-2 .nav-text a:hover,
#theme_1 .nav-2 .nav-text a.active {
    background-image: none;
    background-color: #EAF2FF;
    border-color: #1E6FD9;
    color: #1E6FD9;
}

/* --- 页脚原来是 float:left，父级 body 高度算不到 footer（body 比 footer 短 400px），
 * 改成普通块级并清浮动，避免后续内容被浮动的页脚推乱。
 */
.footer {
    clear: both;
    float: none;
    /* 内容区下沿几乎贴着页脚（首页图文教程区只差 5px），补一点呼吸空间。 */
    margin-top: 40px;
}

/* --- 文章页「关联软件」条的星级：`.add-info span { display:flex }` 是后代选择器，
 * 把星级内部每个 ★ 也变成 flex item，五颗星被拉成一行散开；强制回到紧凑行内。
 */
.computer-content .left .detail-box .relation-box .add-info .hl-stars {
    display: inline-block !important;
    flex: 0 0 auto;
    letter-spacing: 0;
    margin-left: 2px;
}

.computer-content .left .detail-box .relation-box .add-info .hl-stars span {
    display: inline !important;
    margin-left: 0 !important;
}

/* --- 列表缩略图：容器是 240x180，而占位图与封面尺寸是 400x250，
 * 直接写死宽高会把图片拉变形，改成裁切显示；
 * 高度再显式 !important 一次，防止 .img-responsive 的 height:auto 把卡片撑高。
 */
.computer-content .left > ul > li .img img {
    height: 180px !important;
    width: 240px !important;
    object-fit: cover;
    object-position: center;
}

/* 图片是行内基线排版，a.img 会比图片高 6px，清掉行高让卡片贴合。 */
.computer-content .left > ul > li .img {
    font-size: 0;
    line-height: 0;
}

/* --- 独立页面正文（产品介绍 / 一键装系统 / U 盘装系统）：
 * 静态站只给了 h2 与 p 的样式，h3 和列表在正文里没有排版，这里补齐。
 */
.computer-content .left .detail-box .content h3 {
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    padding: 18px 0 8px;
}

.computer-content .left .detail-box .content h4 {
    color: #333333;
    font-size: 17px;
    font-weight: 700;
    padding: 12px 0 6px;
}

.computer-content .left .detail-box .content ul,
.computer-content .left .detail-box .content ol {
    margin: 6px 0 14px;
    padding-left: 26px;
}

.computer-content .left .detail-box .content ul li {
    list-style: disc outside;
}

.computer-content .left .detail-box .content ol li {
    list-style: decimal outside;
}

.computer-content .left .detail-box .content li {
    color: #666666;
    font-size: 16px;
    line-height: 28px;
}

/* ==========================================================================
   移动端适配（<= 900px）
   原站的布局大量写死像素：.center 1200、.tab-left 890、.tab-right 280、
   .news_info a 550、.item-thumbnail a 252x164，窄屏下不是溢出就是被挤成一字一行。
   这里统一改成百分比 + 换行，桌面端不受影响。
   ========================================================================== */
@media (max-width: 900px) {

    /* --- 全局容器：原站 .center 写死 1200px 定宽，窄屏下把整页撑出横向滚动。
     * 这里强制满宽 + border-box，内部百分比宽度才以屏宽为基准。
     */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .center {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
    }

    /* --- 顶栏：logo 独占一行，导航改成可横滑的一条 --- */
    .head {
        padding: 8px 0 0;
    }

    /* 手机上不做吸顶：两行导航吸顶会占掉近 1/5 屏幕，滚动时遮挡内容更严重。 */
    .head.scroll_menu {
        position: static !important;
    }

    .head .center {
        flex-wrap: wrap;
        padding-left: 12px;
        padding-right: 12px;
        row-gap: 2px;
    }

    .head .logo img {
        height: 30px;
    }

    /* logo 右侧的推广气泡是绝对定位在 205px 处，手机上会压到导航。 */
    .head .logo .tips {
        display: none !important;
    }

    .head ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0 8px;
        width: 100%;
        scrollbar-width: none;
    }

    .head ul::-webkit-scrollbar {
        display: none;
    }

    .head ul li {
        flex: 0 0 auto;
        margin-left: 22px;
    }

    .head ul li a {
        font-size: 15px;
        white-space: nowrap;
    }

    .head ul li.on a::after,
    .head ul li a:hover:after {
        bottom: -6px;
    }

    .head ul li.on a::after {
        left: 0;
        width: 100%;
    }

    /* --- 首屏：文案与按钮回到文档流，电脑示意图隐藏 --- */
    .banner-max {
        height: auto !important;
        padding: 96px 0 28px;
        background-size: auto 100% !important;
    }

    .banner-max .center {
        height: auto !important;
    }

    .banner-max .banner_text_box,
    .banner_text_box {
        left: auto !important;
        margin-top: 0 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
    }

    .banner_text_box .title {
        font-size: 26px;
        line-height: 1.35;
    }

    .banner_text_box .title > i {
        display: none;
    }

    .banner-max .computer-img-box {
        display: none !important;
    }

    .banner-max .trait ul {
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    /* 原站 trait li 是 ul 内的 50% 两列（桌面 3 栏 x 2 项），手机上每栏只剩 170px，
     * 中文长句会被拆成 “支持安装Win7/” + “/Win11 系统” 这种断行。
     */
    .banner_text_box .trait li {
        font-size: 14px;
        line-height: 30px;
        width: 100%;
    }

    .banner-max .download-all {
        bottom: auto !important;
        left: auto !important;
        margin-top: 18px;
        position: static !important;
    }

    .banner-max .download-all .info .info-item {
        margin-right: 0;
        width: 100%;
    }

    /* --- 首页「最新发布」：四列改两列，缩略图按比例撑开 --- */
    .posts-row .title {
        margin-bottom: 18px;
    }

    .posts-row .title > span {
        font-size: 20px;
    }

    /* 标题两侧的装饰位图留了 40px 摆位，窄屏会压字。 */
    .posts-row .title > span:before,
    .posts-row .title > span:after {
        display: none;
    }

    /* 卡片是 inline-block、宽度靠 calc，两个 50% 加上元素间的空白字符就放不下，
     * 结果全部折行成单列；改用 flex 容器后宽度不受空白影响。
     */
    .posts-row .center {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .posts-row .title {
        flex: 0 0 100%;
        width: 100%;
    }

    .posts-row .new_more {
        position: absolute;
        right: 12px;
        top: 4px;
    }

    .posts-row .new_more a {
        margin-right: 0;
    }

    .posts-row .posts-item.card {
        flex: 0 0 calc(50% - 12px);
        /* flex item 默认 min-width:auto，会被封面图的固有宽度（400px）撞开，
         * 结果是第二张卡片比第一张宽、溢出屏幕。
         */
        min-width: 0;
        margin: 6px;
        padding: 8px;
        width: calc(50% - 12px);
    }

    .posts-item.card .item-thumbnail a {
        height: auto !important;
        width: 100% !important;
    }

    .posts-item.card .item-thumbnail img {
        aspect-ratio: 3 / 2;
        height: auto !important;
    }

    .posts-item .item-heading {
        font-size: 13px;
        min-height: 0;
    }

    /* --- 首页图文教程：大图与缩略列表上下堆叠 --- */
    .system-news-list .system-news-list-tab {
        flex-wrap: wrap;
        gap: 10px;
    }

    .system-news-list .system-news-list-tab > li {
        font-size: 14px;
        padding: 6px 14px;
    }

    .system-news-list .content-box .content .top {
        flex-direction: column;
        gap: 12px;
    }

    .system-news-list .content-box .content .top .img,
    .system-news-list .content-box .content .top .list {
        min-width: 0;
        width: 100% !important;
    }

    .system-news-list .content-box .content .top .img {
        height: auto !important;
    }

    .system-news-list .content-box .content .top .img img {
        aspect-ratio: 16 / 9;
        height: auto !important;
        width: 100% !important;
    }

    .system-news-list .content-box .content .top .list {
        gap: 10px;
        height: auto !important;
        justify-content: flex-start;
    }

    .system-news-list .content-box .content .top .list li a .thumb {
        flex: 0 0 108px;
        height: 68px;
    }

    .system-news-list .content-box .content .top .list li a .thumb > img {
        height: 68px;
        width: 108px;
    }

    /* --- 软件库分类标签：改成横向滑动，不再两端撑开 --- */
    #theme_1 .nav-2 {
        overflow: visible;
    }

    #theme_1 .nav-2 .nav-text {
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    #theme_1 .nav-2 .nav-text::-webkit-scrollbar {
        display: none;
    }

    #theme_1 .nav-2 .nav-text a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* --- 文章列表顶部分类胶囊：原站 a 左右各 50px 内边距，三个就撑爆一行，
     * flex 压缩后中文被挤成竖排。改成横滑 + 紧凑内边距。
     */
    .online-tab-box {
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
        scrollbar-width: none;
    }

    .online-tab-box::-webkit-scrollbar {
        display: none;
    }

    .online-tab-box a {
        flex: 0 0 auto;
        font-size: 15px;
        padding: 8px 18px;
        white-space: nowrap;
    }

    .online-tab-box a + a {
        margin-left: 0;
    }

    /* --- 列表页：左右栏上下堆叠，行卡片图片在上文字在下 --- */
    .computer-content {
        flex-direction: column;
    }

    .computer-content .left,
    .computer-content .right {
        padding: 10px !important;
        width: 100% !important;
    }

    .computer-content .right {
        margin-top: 14px;
    }

    /* 卡片行是 flex 两列（宽图 240 + 文字），窄屏下文字区只剩几十像素，
     * 所以改成块级堆叠：图片在上、信息在下。
     */
    .computer-content .left > ul > li {
        display: block;
        padding: 10px;
    }

    .computer-content .left > ul > li .img {
        display: block;
        min-width: 0;
        width: 100%;
    }

    /* 满宽后 16:10 的图会撑到 250+ 高，一张卡片就占掉半屏，压到 190。 */
    .computer-content .left > ul > li .img img {
        height: 190px !important;
        object-fit: cover;
        width: 100% !important;
    }

    .computer-content .news_info {
        margin-top: 10px;
        padding-left: 0 !important;
    }

    /* .news_info a 写死 550px，父级只剩几十像素时文字被压成一字一列。 */
    .computer-content .news_info a {
        height: auto !important;
        width: auto !important;
    }

    .computer-content .news_info h3 {
        font-size: 16px;
        height: auto;
        line-height: 1.45;
        white-space: normal;
    }

    .computer-content .news_info .time {
        gap: 4px 12px;
        height: auto !important;
        margin: 8px 0 0;
    }

    .computer-content .news_info .time .hl-price-line {
        margin-left: 0 !important;
    }

    .computer-content .news_info p,
    .computer-content .news_info p.description {
        height: auto !important;
        line-height: 1.7;
        margin: 8px 0 0;
    }

    /* 日期行是 absolute 贴底，手机上内容高度不固定，改回普通流。 */
    .computer-content .news_info .foot {
        padding: 8px 0 0;
        position: static !important;
    }

    /* --- 详情页：信息面板与正文整宽 --- */
    .main.mt-90 {
        margin-top: 104px !important;
    }

    .main .content .tab-head h1 {
        font-size: 20px;
        line-height: 1.4;
        padding: 12px !important;
    }

    .main .content .tab-head .specific .specific-left .specific-all {
        flex-direction: column;
    }

    .main .content .tab-head .specific .specific-left .specific-all .specific-text {
        margin-top: 12px;
        width: 100% !important;
    }

    /* 信息面板原站是 580px 内两列，窄屏后每项只剩 150px，「安全监测：」这类
     * 四字标签会被拆成两行，右侧图标行也会溢出。
     */
    .main .content .tab-head .specific .specific-left .specific-all .specific-text .item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 50%;
    }

    .main .content .tab-head .specific .specific-left .specific-all .specific-text .testing {
        flex-wrap: wrap;
        width: 100%;
    }

    .main .content .news-all {
        flex-direction: column;
    }

    .main .content .news-all .tab-left,
    .main .content .news-all .tab-left .container-tab {
        width: 100% !important;
    }

    .main .content .news-all .tab-right {
        margin-top: 16px;
        width: 100% !important;
    }

    /* 正文里的图片、表格、代码块都可能宽于屏宽。 */
    .news-text img,
    .computer-content .left .detail-box .content img {
        height: auto;
        max-width: 100%;
    }

    .news-text table,
    .computer-content .left .detail-box .content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .news-text pre,
    .computer-content .left .detail-box .content pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* --- 面包屑：长标题会顶出屏幕 --- */
    .seat {
        line-height: 1.7;
        white-space: normal;
        word-break: break-all;
    }

    /* --- 页脚：多列改单列 --- */
    .footer .center {
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer .footer-content .footer-about dd {
        font-size: 14px;
        line-height: 26px;
    }

    .footer .footer-content .box {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .footer .footer-content .footer-qrcode {
        gap: 32px;
        justify-content: flex-start;
        width: auto !important;
    }

    .footer .copyright {
        font-size: 13px;
        line-height: 24px;
        word-break: break-all;
    }
}