/*
 * 站点主题与响应式覆盖样式
 * 加载顺序位于模板 CSS 之后，用于主题配色与移动端布局修正。
 * 原模板 CSS 保持不动，便于回滚。
 */

/* =====================================================================
 * 一、主题配色令牌（对标 http://47.122.116.85:8159/）
 *    深色 #1D191A 承载品牌区块，金色 #DB9334 只做强调，不铺大面积。
 * ===================================================================== */
:root {
    /* 品牌强调色：由橙红 #CB451B 改为金 #DB9334 */
    --color: #DB9334;
    --color-hover: #C5894D;
    --color-soft: #EDC8A3;
    /* 浅底上的可读金：#DB9334 对白 2.55:1 不达标，
       小字/链接用深一档，白底 5.17:1 满足 WCAG AA */
    --color-text: #9A6018;
    /* 金色底上的文字：深色保证对比度 */
    --color-on-accent: #1D191A;

    /* 文字色 */
    --fontcolortitle: #1D191A;
    --fontcolorintro: #312F30;
    --fontcolor-muted: #716B6C;

    /* 背景与边框 */
    --bg-dark: #1D191A;
    --bg-light: #F9F9F9;
    --bg-warm-light: #FBF3E8;
    --border-color: #E5E5E5;
    --border-soft: #C9BEC1;
}

/* =====================================================================
 * 二、深色区块
 * ===================================================================== */

/* 顶部欢迎条：金底 → 深底 + 金色文字 */
.head-top {
    background: var(--bg-dark);
}

.head-top .text,
.head-top .l-wrap,
.head-top a {
    color: var(--color);
}

/* 页脚：灰蓝 #32373B → 近黑 */
footer {
    background: var(--bg-dark);
    color: #FFF;
}

footer .copyright {
    border-top-color: #3A3436;
}

footer .copyright p,
footer .foot-nav .foot-item .foot-list a,
footer .foot-tel,
footer .foot-tel a {
    color: #FFF;
}

footer .foot-nav .foot-item .foot-title,
footer .foot-nav .foot-item .foot-list a {
    opacity: 1;
}

footer .foot-nav .foot-item .foot-title {
    color: #FFF;
}

/* =====================================================================
 * 三、浅色区块
 * ===================================================================== */

/* 首页案例区：暖白 #FFFBFA → 中性浅灰 */
.home-project {
    background: var(--bg-light);
}

/* 内页横幅底色 */
.banner-inner {
    background: var(--bg-light);
}

/* 表单下拉悬停底色：偏绿的 #F2FAEA → 金色系浅底 */
#feedbackForm .select-menu .select-menu-ul li:hover,
#feedbackForm .select-menu .select-menu-ul li:nth-child(2n),
#feedbackForm .select-menu .select-menu-ul li.select-this,
#feedbackForm .select-menu .select-menu-ul li.select-this:hover {
    background: var(--bg-warm-light) !important;
}

/* =====================================================================
 * 四、金色强调位的文字对比度修正
 *    金色底配白字对比度不足（约 2.4:1），统一改为深色文字。
 * ===================================================================== */

.head-list .item em,
.home-more,
.foot-info .foot-share ul a,
footer .copyright .gotop,
.compare-t,
.compare-inquire,
.compare-inquire:hover,
.rfixed-sc,
.bottom-btn .btn-item {
    background: var(--color);
    color: var(--color-on-accent);
}

footer .copyright .gotop em {
    color: var(--color-on-accent);
}

.home-more:hover {
    box-shadow: 1px 2px 10px rgba(219, 147, 52, 0.45);
}

/* 金色底的反向 hover：白底 + 深金文字，保证可读 */
.head-share ul a:hover {
    background: var(--color);
    color: var(--color-on-accent);
}

.foot-info .foot-share ul a:hover {
    background: #FFF;
    color: var(--color-hover);
}

/* =====================================================================
 * 五、残留硬编码颜色统一到令牌
 * ===================================================================== */

/* 首页轮播分页当前项 */
.home-banner .swiper-pagination-bullet-active {
    background-color: var(--color);
}

/* 首页 / 关于页的强调文字 #080808 */
.home-about .color,
.company-about-wrap .color {
    color: var(--fontcolortitle);
}

/* 产品描述小标题 #FF511F */
.ab-border-orange {
    border-color: var(--color) !important;
}

.ab-orange {
    color: var(--color) !important;
}

/* 价格与角标 #D4322C */
.item-price {
    color: var(--color);
}

.rfixed-scnum {
    background: var(--color);
    color: var(--color-on-accent);
}

/* 关于页 logo 背景 */
.company-logo:after {
    background: var(--bg-light);
}

/* 搜索按钮 hover：灰 → 浅金 */
.search-input .search-btn:hover {
    background: var(--bg-warm-light);
}

/* =====================================================================
 * 七、留言/询盘组件（guestbook.css 内的硬编码橙红）
 * ===================================================================== */

.content-wrap.form .ch_form_wrap .title {
    background: var(--color);
    color: var(--color-on-accent);
}

.content-wrap.form .ch_form_wrap ul input,
.content-wrap.form .ch_form_wrap ul textarea {
    border-left-color: var(--color);
}

.content-wrap.form .ch_form_wrap .item_submit input {
    background: var(--color);
    color: var(--color-on-accent);
}

.content-wrap.form .ch_form_wrap .item_submit input:hover {
    background: var(--color-hover);
    color: #FFF;
}

.content-wrap.form .ch_form_wrap .Validform_error {
    border-left-color: var(--color) !important;
}

.ab_message .message-header {
    background-color: var(--color);
    color: var(--color-on-accent);
}

.ab_message .ab_input .ab_input-submit {
    background-color: var(--color);
    color: var(--color-on-accent);
}

.ab_message .ab_input .ab_input-submit:hover {
    background-color: var(--color-hover);
    color: #FFF;
}

/* =====================================================================
 * 八、浅底上的金色文字改用可读金
 *    --color（#DB9334）仅用于深底文字与色块；浅底小字用 --color-text。
 * ===================================================================== */

.head-list .item .info span,
.head-list .item .info a:hover,
.nav-ul > li:hover > a,
.nav-ul > li:hover > em,
.nav-ul > li > a.inmenu_1,
.nav-ul > li .submenu > li:hover,
.nav-ul > li .submenu > li:hover > a,
.nav-ul > li .submenu > li:hover ul a:hover,
.head-nav .nav-ul > li.cur > a,
.head-nav .nav-ul > li.cur em,
.head-search button em,
.search-input .search-btn em,
.home-des,
.banner-inner .banner-content .banner-breadcrumbs a:hover,
.sidebar-item.category .sidebar-cate > li > a:hover,
.sidebar-item.category .sidebar-cate > li.active > a,
.sidebar-item.category .sidebar-cate > li.active > em,
.sidebar-item.category .sidebar-cate > li ul li.active,
.newslist .newsitem:hover .news-info .news-title a,
.newslist .newsitem:hover .news-info .news-btn {
    color: var(--color-text);
}

/* 白底上的金色按钮文字 */
.foot-info .foot-share ul a:hover {
    background: #FFF;
    color: var(--color-text);
}

/* 产品描述小标题（浅底） */
.ab-orange {
    color: var(--color-text) !important;
}

/* 价格 */
.item-price {
    color: var(--color-text);
}

/* 导航下拉悬停：浅底，保持可读 */
.nav-ul > li .submenu > li:hover ul a:hover {
    color: var(--color-text);
}

/* =====================================================================
 * 九、所有金色底统一配深色文字（#1D191A 对金 6.83:1，满足 AA）
 *    白字配金仅 2.55:1，不可用。
 * ===================================================================== */

.head-list .item em,
.head-share ul a:hover,
.home-more,
.foot-info .foot-share ul a,
.compare-t,
.compare-inquire,
.compare-inquire:hover,
.rfixed-sc,
.home-about .about-img .about-icon,
.home-project .swiper .project-button-next,
.home-project .swiper .project-button-prev,
.news-list .news-item .news-img .news-date,
.sidebar-item.search .sidebar-search .search-btn,
.page-num-current,
.page-num-current a,
#feedbackForm .send-btn,
.prodetails-info .prodetails-btnlist .addToCart.added,
.product-cateitem:hover .cate-info,
#tagTabs .tagItem.current,
.newslist .newsitem:hover .news-info .news-btn,
.page-video .video-button-next,
.page-video .video-button-prev,
.page-faq .wrapper .pagefaq-list .item.open .link,
.contact-list .contact-item em,
.download-list li .download-btn,
.faqs-list li .project-info.open .project-name,
.inquiry-prolist .inquiry-pro-item .pro-item-del {
    background-color: var(--color);
    color: var(--color-on-accent);
}

/* 金色按钮上的图标同色 */
.head-list .item em .iconfont,
.home-more em,
.foot-info .foot-share ul a .iconfont,
.contact-list .contact-item em .iconfont,
.download-list li .download-btn i,
#feedbackForm .send-btn .iconfont {
    color: inherit;
}

/* 首页「Why Choose Us」350px 金色大色带 → 深色区块
   （金色只做点缀，不做大面积背景；白字配深底 17.41:1） */
.home-choose::before {
    background: var(--bg-dark);
}

.home-choose .home-des {
    color: var(--color);
}

.home-choose .home-title {
    color: #FFF;
}

/* 首页轮播日期角标等小面积金色块，保持深字 */
.news-list .news-item .news-img .news-date {
    color: var(--color-on-accent);
}

/* =====================================================================
 * 十、页面底色
 *    原模板 html/body 为透明背景，靠浏览器默认白底；
 *    在深色模式浏览器下会渲染为黑，这里显式声明。
 * ===================================================================== */

html,
body {
    background-color: #FFFFFF;
}

/* 深色区块延展到全宽，避免与白底之间出现断层 */
.home-choose {
    background-color: transparent;
}

/* 详情页标签当前项：金色底必须配深色文字（content.css 的规则优先级更高） */
#tagTabs .tagItem.current,
#tagTabs .tagItem.current:hover {
    background: var(--color) !important;
    color: var(--color-on-accent) !important;
}

/* 底部悬浮按钮：容器用深色，按钮块用金色 + 深色文字 */
.bottom-btn {
    background: var(--bg-dark);
}

.bottom-btn .btn-item a,
.bottom-btn .btn-item div,
.bottom-btn .btn-item em,
.bottom-btn .btn-item i,
.bottom-btn .btn-item p {
    color: var(--color-on-accent);
}

.pagelink .pagelink-item,
.pagelink .pagelink-item .pagelink-info a,
.pagelink .pagelink-item .pagelink-info p {
    color: var(--color-on-accent);
}

.pagelink .pagelink-item .pagelink-info a:hover {
    color: var(--color-on-accent);
}

/* =====================================================================
 * 十一、板块明暗交替（对标 8159 首页节奏）
 *    深 → 白 → 深 → 白 → 深 → 白 → 深
 *    hero(深) | choose(白) | about(深) | project(白) | product(深) | news(白) | footer(深)
 * ===================================================================== */

/* ---- 1. Why Choose Us：白底 ---- */
.home-choose {
    background: #FFFFFF;
}

/* 原模板用 350px 金色大色带做背景，改为素白后去掉 */
.home-choose::before {
    display: none;
}

.home-choose .home-des {
    color: var(--color-text);
}

.home-choose .home-title {
    color: var(--fontcolortitle);
}

/* 白底 + 白卡片需要描边来区分层次 */
.home-choose .choose-item {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px rgba(29, 25, 26, 0.06);
}

.home-choose .choose-item:hover {
    border-color: var(--color);
}

/* ---- 2. ABOUT US：深底 ---- */
.home-about {
    background: var(--bg-dark);
}

.home-about .home-title {
    color: #FFFFFF;
}

.home-about .home-des {
    color: var(--color);
}

.home-about .about-content,
.home-about .about-content p,
.home-about .about-info .about-content {
    color: rgba(255, 255, 255, 0.82);
}

.home-about .about-content a {
    color: var(--color);
}

/* 深底上的金色统计块保持深色文字 */
.home-about .about-icon span,
.home-about .about-icon p {
    color: var(--color-on-accent);
}

/* ---- 3. CASE：白底 ---- */
.home-project {
    background: #FFFFFF;
}

.home-project .home-des {
    color: var(--color-text);
}

.home-project .home-title {
    color: var(--fontcolortitle);
}

/* ---- 4. PRODUCTS：深底 ---- */
.home-product {
    background: var(--bg-dark);
}

.home-product .home-title {
    color: #FFFFFF;
}

.home-product .home-des {
    color: var(--color);
}

.home-product .index-pro .pro-item {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.home-product .index-pro .pro-item:hover {
    border-color: var(--color) !important;
}

.home-product .pro-title,
.home-product .pro-title a,
.home-product .pro-info .pro-title,
.home-product .pro-info .pro-title a {
    color: #FFFFFF;
}

.home-product .pro-item:hover .pro-title,
.home-product .pro-item:hover .pro-title a {
    color: var(--color);
}

.home-product .pro-btn {
    color: var(--color);
}

/* ---- 5. NEWS：白底（保持），仅统一描边 ---- */
.home-news .home-des {
    color: var(--color-text);
}

.home-news .home-title {
    color: var(--fontcolortitle);
}

/* ---- 6. 区块之间的细分隔线，强化明暗切换的收口 ---- */
.home-choose,
.home-about,
.home-project,
.home-product,
.home-news {
    position: relative;
}

/* =====================================================================
 * 十二、内页明暗层级（对标 8159 内页）
 *    深导航 → 白内容区 → 深页脚
 * ===================================================================== */

/* 内页横幅：浅灰底 + 深色标题，与白色内容区区分层次 */
.banner-inner {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.banner-inner .banner-content .banner-title-h1 {
    color: var(--fontcolortitle);
}

.banner-inner .banner-content .banner-breadcrumbs,
.banner-inner .banner-content .banner-breadcrumbs a {
    color: var(--fontcolor-muted);
}

.banner-inner .banner-content .banner-breadcrumbs a:hover {
    color: var(--color-text);
}

/* 内容区统一白底 */
.common-main {
    background: #FFFFFF;
}

/* 侧栏卡片：白底 + 描边，避免与白内容区糊在一起 */
.sidebar-item {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.sidebar-item .sidebar-title {
    color: var(--fontcolortitle);
}

.sidebar-item.category .sidebar-cate > li {
    border-bottom-color: var(--border-color);
}

/* 侧栏产品条目分隔 */
.sidebar-item.recommended .sidebar-prolist > li {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-item.recommended .sidebar-prolist > li:last-child {
    border-bottom: none;
}

/* 产品/案例卡片描边 */
.pro-list.list1 > li {
    border-color: var(--border-color);
}

.pro-list.list1 > li:hover {
    border-color: var(--color);
}

/* 新闻列表卡片 */
.newslist .newsitem {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.newslist .newsitem:hover {
    border-color: var(--color);
    box-shadow: 0 4px 14px rgba(29, 25, 26, 0.08);
}

.newslist .newsitem .news-info .news-title a {
    color: var(--fontcolortitle);
}

/* 详情页正文容器 */
.page-box-shadow {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: none;
}

.newscontent-title,
.prodetails-name {
    color: var(--fontcolortitle);
}

.newscontent-details,
.newscontent-details article,
.prodetails-content,
.tagContent {
    color: var(--fontcolorintro);
}

/* 下载/FAQ 条目 */
.download-list li,
.project-list > li,
.faqs-list li {
    border-color: var(--border-color);
}

/* 分页：白底 + 金色当前项 */
.pagination .page-item,
.pagination .page-num {
    border-color: var(--border-color);
    color: var(--fontcolorintro);
}

.pagination .page-num-current {
    background-color: var(--color);
    border-color: var(--color);
    color: var(--color-on-accent);
}

/* =====================================================================
 * 六、响应式修正（移动端）
 * ===================================================================== */

/* 新闻/案例列表：移动端改为单列，避免列表图片撑破视口 */
@media (max-width: 768px) {
    .newslist.list1 .newsitem,
    .newslist.list0 .newsitem {
        display: block;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .newslist .newsitem .news-img {
        width: 100% !important;
        height: auto !important;
    }

    .newslist .newsitem .news-img a {
        display: block;
    }

    .newslist .newsitem .news-img img,
    .newslist .newsitem .news-img img.lazy {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        position: static !important;
        transform: none !important;
    }

    /* 产品列表：两列在小屏易挤压，改为单列 */
    .pro-list.list1 li {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* 侧栏在移动端置于内容之后，避免先出现大段导航 */
    .page-container {
        display: block;
    }

    .page-container .sidebar {
        width: 100% !important;
        margin-top: 20px;
    }

    .page-container .page-main {
        width: 100% !important;
    }

    /* 详情页图集缩略图 */
    .prodetails-top {
        display: block;
    }

    .prodetails-top .preview-container,
    .prodetails-top .prodetails-info {
        width: 100% !important;
    }
}

/* 兜底：任何图片都不应超过容器宽度 */
img {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* 移动端一切媒体元素都以容器为上限，禁止撑破视口 */
    img,
    img.lazy,
    .newslist img,
    .pro-list img,
    .prodetails-content img {
        max-width: 100% !important;
    }

    .newslist .newsitem,
    .newslist .newsitem .news-img,
    .newslist .newsitem .news-img a {
        max-width: 100% !important;
        overflow: hidden;
    }
}

/* ===== 通用单页（VR Factory 等占位页） ===== */
.single-main .single-article {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.single-main .single-content {
    color: var(--fontcolorintro);
    font-size: var(--fontintro);
    line-height: 1.8;
    margin-top: 24px;
    text-align: left;
}

.single-main .single-content p {
    margin-bottom: 16px;
}

.single-main .single-content a {
    color: var(--color-text);
    text-decoration: underline;
}

.single-main .single-content a:hover {
    color: var(--color);
}

@media (max-width: 768px) {
    .single-main .single-article {
        text-align: left;
    }
}

/* ===== 产品详情视频 ===== */
.prodetails-video {
    margin-bottom: 24px;
}

.prodetails-video video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #000;
    border-radius: 4px;
}

/* ===== 联系页经销商网络图 ===== */
.contact-map {
    margin-bottom: 30px;
    text-align: center;
}

.contact-map img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .contact-map {
        margin-bottom: 20px;
    }
}

/* =====================================================================
 * 十二、首页轮播高度统一
 * ===================================================================== */

/* 两张轮播图原始比例不同（16:9 与 1.4:1），高度随图片浮动；
 * 统一锁定为 16:9，超高部分居中裁切（object-fit: cover）。
 * 注意：PC / 移动两套轮播同时存在于 DOM，仅对当前可见的一套生效，
 * 避免隐藏套的空 slide 被撑出占位高度 */
@media (min-width: 769px) {
    .home-banner .mySwiper:not(.swiper-mobile) .swiper-slide {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .home-banner .mySwiper:not(.swiper-mobile) .pcimg {
        display: block;
        height: 100%;
    }

    .home-banner .mySwiper:not(.swiper-mobile) .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* 小屏上 16:9 过矮，改 4:3 保证标语文字有空间 */
@media (max-width: 768px) {
    .home-banner .mySwiper.swiper-mobile .swiper-slide {
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .home-banner .mySwiper.swiper-mobile .mobimg {
        display: block;
        height: 100%;
    }

    .home-banner .mySwiper.swiper-mobile .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* =====================================================================
 * 十三、导航栏语言切换
 * ===================================================================== */

/* PC 头部：与社交按钮并排 */
.head-share .lang-pc {
    display: inline-flex;
    align-items: center;
}

.head-share .lang-pc .lang-switch {
    color: var(--fontcolortitle, #222);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 2px;
    display: inline-block;
}

.head-share .lang-pc .lang-switch:hover {
    color: var(--color);
}

.head-share .lang-pc .lang-cur {
    color: var(--color);
    border-bottom: 2px solid var(--color);
}

.head-share .lang-pc .lang-sep {
    color: #BBB;
    font-size: 12px;
    margin: 0 3px;
    font-style: normal;
}

/* 移动端：汉堡菜单导航首项 */
.nav-ul .lang-m {
    display: none;
}

.nav-ul .lang-m a {
    color: var(--fontcolortitle, #222);
    font-size: 14px;
    padding: 0 2px;
}

.nav-ul .lang-m a.lang-cur {
    color: var(--color);
}

.nav-ul .lang-m em {
    color: #CCC;
    font-style: normal;
    margin: 0 6px;
}

@media (max-width: 768px) {
    .head-share .lang-pc {
        display: none;
    }

    .nav-ul .lang-m {
        display: inline-block;
    }
}

/* =====================================================================
 * 十四、右侧悬浮工具栏垂直居中
 * ===================================================================== */

/* 原 style.css 为 top:40%，视觉偏上且易与头部元素重叠，改为正中 */
#ab-mkf {
    top: 50%;
}

/* =====================================================================
 * 十五、隐藏首页 ABOUT US 左侧厂区面积角标
 * ===================================================================== */

.home-about .about-img .about-icon {
    display: none;
}

/* =====================================================================
 * 十六、首页案例展示图片尺寸统一
 * ===================================================================== */

/* 各案例图片比例不一，统一为 1:1 居中裁切（原模板 max-height 截断导致大小不一） */
.home-project .swiper .swiper-slide {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-height: none;
}

.home-project .swiper .swiper-slide .lazy-wrap {
    display: block;
    height: 100%;
}

.home-project .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =====================================================================
 * 十七、内页 banner 移动端适配
 * ===================================================================== */

/* 原模板在 ≤768px 隐藏内页 banner，改为短高度居中裁切展示 */
@media (max-width: 768px) {
    .banner-inner img.innerbanners {
        display: block;
        width: 100%;
        height: 160px;
        object-fit: cover;
        object-position: center;
    }
}

/* =====================================================================
 * 十八、产品列表图片布局修正
 * ===================================================================== */

/* 修正 list.css:418：1025-1280px 视口下图片区固定 250px 导致卡片内留白，改随卡片自适应 */
@media (max-width: 1280px) {
    .pro-list.list1 li .pro-img {
        width: auto;
    }
}

/* =====================================================================
 * 十九、资料下载页文件徽标与元信息
 * ===================================================================== */

/* 文件类型徽标：PDF 金色文档卡 / 视频深色播放卡，替代单调的占位图标 */
.download-list li .dl-badge {
    width: 76px;
    height: 92px;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFF;
    overflow: hidden;
}

/* 折角效果 */
.download-list li .dl-badge::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 14px 14px 0;
    border-style: solid;
    border-color: #FFF #FFF rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.18);
    border-radius: 0 0 0 8px;
}

.download-list li .dl-badge-pdf {
    background: linear-gradient(135deg, #E8A94F 0%, var(--color) 60%);
}

.download-list li .dl-badge-mp4,
.download-list li .dl-badge-video {
    background: linear-gradient(135deg, #3A3A3E 0%, var(--bg-dark) 70%);
}

.download-list li .dl-badge-ext {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 10px;
}

.download-list li .dl-badge-icon {
    font-size: 22px;
    margin-top: 6px;
    opacity: 0.9;
}

.download-list li .dl-badge-mp4 .dl-badge-icon {
    color: var(--color);
}

/* 文件元信息：格式 · 大小 */
.download-list li .download-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .download-list li .dl-badge {
        width: 58px;
        height: 72px;
    }

    .download-list li .dl-badge-ext {
        font-size: 13px;
    }

    .download-list li .dl-badge-icon {
        font-size: 17px;
    }
}