/* ==========================================================================
   downloader.css —— 视频下载器导航站专用组件
   --------------------------------------------------------------------------
   本站是"工具导航 + 评测 + 榜单"三合一的内容站，页面类型多但组件高度复用。
   与原 SAAS 站的分工：
     · style.css        页眉 / 页脚 / 面包屑 / 容器  —— 全站，不改
     · page.css         .pg-top / .pg-hero / .pg-sec / .pg-faq —— 信息页外壳
     · tools-hub.css    .th-*  工具列表页骨架
     · tool-detail.css  .td-*  工具详情页骨架（.td-vs 对比矩阵直接拿来用）
     · news-center.css  .nw-*  列表页（新闻 / 评测）
     · news.css         文章详情两栏布局
     · downloader.css   本文件，补上原站没有的东西：
                        速览表、平台入口、榜单表、筛选器、支持度徽章、
                        场景推荐卡、对比页、免责声明条

   色板延续 page.css 的浅紫体系，按钮一律走 --zs-btn-grad，
   不在本文件里写死品牌色，换色只需动 style.css 的两个变量。
   ========================================================================== */

:root{
    --dl-ink:      #170b33;   /* 主标题 */
    --dl-ink-2:    #2b1a4d;   /* 次级标题 */
    --dl-txt:      #4b4361;   /* 正文 */
    --dl-mute:     #6f6a80;   /* 辅助文字 */
    --dl-faint:    #908ba0;   /* 更弱的说明文字 */
    --dl-card:     #EFEAFC;   /* 卡片底 */
    --dl-card-2:   #E6DEFA;   /* hover 加深 */
    --dl-line:     #E1D9F6;   /* 描边 */
    --dl-panel:    #F6F2FE;   /* 大面积面板 */
    --dl-accent:   #7c3aed;   /* 强调 */
    --dl-accent-2: #6d28d9;   /* 强调 hover */

    /* 支持度三态。榜单、对比矩阵、规格表共用同一套语义色，
       全站只有这三种状态，不再各页自定义。 */
    --dl-yes-bg:   #eafaf1;  --dl-yes-fg:   #128a52;
    --dl-part-bg:  #fff5e6;  --dl-part-fg:  #b5730b;
    --dl-no-bg:    #f4f2f8;  --dl-no-fg:    #9b93ad;
}

/* ==========================================================================
   1. 首页 Hero
   --------------------------------------------------------------------------
   页眉在 body.zs-home 下是 absolute + 透明，压在 hero 上，
   所以这里的上内边距要把 80px 页眉让出来。
   ========================================================================== */
.dl-hero{
    position: relative;
    padding: 148px 0 76px 0;
    background-color: #0b0518;
    background-image:
        radial-gradient(62% 78% at 18% 8%,  rgba(43, 127, 255, .38) 0%, rgba(43, 127, 255, 0) 62%),
        radial-gradient(58% 72% at 86% 14%, rgba(195, 31, 209, .34) 0%, rgba(195, 31, 209, 0) 62%),
        linear-gradient(180deg, #120725 0%, #0b0518 58%, #0a0417 100%);
    overflow: clip;
}
/* 底部一条极淡的网格，把大面积深色撑住，避免看着发闷 */
.dl-hero::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 220px;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    pointer-events: none;
}
.dl-hero .zs-wp{
    position: relative;
    z-index: 2;
    text-align: center;
}
.dl-hero .dlh-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 16px;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #d8ccff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.dl-hero .dlh-eyebrow svg{
    display: block;
    width: 15px;
    height: 15px;
    color: #a78bfa;
}
.dl-hero .dlh-title{
    display: block;
    max-width: 1060px;
    margin: 22px auto 0 auto;
    font-size: 54px;
    line-height: 1.14;
    letter-spacing: -.024em;
    font-weight: 800;
    color: #FFFFFF;
}
.dl-hero .dlh-title em{
    background: linear-gradient(90deg, #7cc0ff 0%, #d98bff 52%, #ff9be8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dl-hero .dlh-sub{
    display: block;
    max-width: 840px;
    margin: 20px auto 0 auto;
    font-size: 18px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .72);
}
.dl-hero .dlh-sub strong{
    font-weight: 600;
    color: #FFFFFF;
}
/* 热搜词 */
.dl-hero .dlh-hot{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}
.dl-hero .dlh-hot a{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    transition: all .3s ease;
}
.dl-hero .dlh-hot a:hover{
    color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}
/* 三个数字指标 */
.dl-hero .dlh-stat{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 46px auto 0 auto;
    max-width: 820px;
}
.dl-hero .dlh-stat li{
    flex: 1 1 0;
    min-width: 150px;
    padding: 0 26px;
    text-align: center;
}
.dl-hero .dlh-stat li + li{
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.dl-hero .dlh-stat strong{
    display: block;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF;
}
.dl-hero .dlh-stat span{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
}

/* ==========================================================================
   2. 通用区块外壳与标题
   ========================================================================== */
.dl-sec{
    display: block;
    padding: 76px 0 0 0;
}
.dl-sec[id]{
    scroll-margin-top: 108px;
}
.dl-sec.is-tint{
    margin-top: 76px;
    padding: 72px 0 76px 0;
    background: var(--dl-panel);
}
/* 末尾板块到页脚的留白收到原来的 60%（84 -> 50）。首页不走这条（它收尾用的是
   .zs-cta），所以只影响内页。 */
.dl-sec.is-last{
    padding-bottom: 50px;
}
.dl-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 34px;
}
.dl-head .dlh-tx{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 880px;
}
.dl-head .dl-h2{
    display: block;
    margin: 0;
    font-size: 38px;
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-head .dl-desc{
    display: block;
    margin: 14px 0 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--dl-mute);
}
.dl-head .dl-desc a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-head .dl-desc a:hover{
    text-decoration: underline !important;
}
/* 右上"查看全部" */
.dl-head .dl-all{
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border-radius: 21px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dl-accent-2);
    background: var(--dl-card);
    transition: all .3s ease;
}
.dl-head .dl-all svg{
    display: block;
    width: 17px;
    height: 17px;
    transition: transform .3s ease;
}
.dl-head .dl-all:hover{
    color: #FFFFFF;
    background: var(--dl-accent);
}
.dl-head .dl-all:hover svg{
    transform: translateX(3px);
}
/* 居中标题变体 */
.dl-head.is-center{
    display: block;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.dl-head.is-center .dlh-tx{
    max-width: none;
}
.dl-head.is-center .dl-desc{
    margin-left: auto;
    margin-right: auto;
}
/* is-endlink：居中标题 + 右对齐文字链的组合（首页 TOP 10 用）。
   .dl-head.is-center 本身限宽 900px 并居中，链接的 margin-left:auto 只能推到
   那 900px 的右边缘，离内容区右边还差一截。这里把限宽从容器移到 .dlh-tx：
   容器铺满 .zs-wp，文字仍在 900px 内居中，链接就能贴到内容区右边缘。 */
.dl-head.is-center.is-endlink{
    max-width: none;
}
.dl-head.is-center.is-endlink .dlh-tx{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 居中版里的"查看全部"是个文字链，不是胶囊按钮：标题和描述居中，链接靠右。
   父级是 display:block + text-align:center，所以这里把它改成 fit-content 宽度的
   flex，再用 margin-left:auto 推到右边缘 —— 这样不受父级 text-align 影响。
   去掉胶囊的高度/内边距/圆角/底色，只留品牌色文字 + 箭头，加一条下划线。 */
.dl-head.is-center .dl-all{
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    margin: 20px 0 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
/* 基础态的 .dl-head .dl-all:hover 会把文字刷成白色（因为原本 hover 是填深色底
   的胶囊）。这里底色已经透明，必须把 color 显式压回品牌色，否则白字白底看不见。 */
.dl-head.is-center .dl-all:hover{
    color: var(--dl-accent);
    background: transparent;
    text-decoration: underline;
}

/* ==========================================================================
   3. 支持度徽章 / 标签胶囊
   --------------------------------------------------------------------------
   全站唯一的"是 / 部分 / 否"表达方式。表格里只放徽章不放 emoji，
   因为 ✅❌ 在 Windows 与 macOS 的字形宽度差一大截，列宽会跳。
   ========================================================================== */
.dl-yes, .dl-part, .dl-no{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 26px;
    height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.dl-yes  svg, .dl-part svg, .dl-no svg{
    display: block;
    width: 14px;
    height: 14px;
}
.dl-yes { background: var(--dl-yes-bg);  color: var(--dl-yes-fg); }
.dl-part{ background: var(--dl-part-bg); color: var(--dl-part-fg); }
.dl-no  { background: var(--dl-no-bg);   color: var(--dl-no-fg); }

/* 图例（.dl-legend）已从全站表格上方移除。徽章的语义现在挂在每个徽章自己的
   role="img" + aria-label 上，不再依赖表格外的一段说明文字。 */

/* 标签胶囊：价格 / 使用方式 / 功能 */
.dl-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dl-accent-2);
    background: var(--dl-card);
}
.dl-pill svg{
    display: block;
    width: 13px;
    height: 13px;
}
.dl-pill.is-free   { background: #eafaf1; color: #128a52; }
.dl-pill.is-freemium{ background: #e8f1ff; color: #1f5fd0; }
.dl-pill.is-paid   { background: #fff2f6; color: #c2185b; }
.dl-pill.is-open   { background: #edfbf7; color: #0f8a72; }
.dl-pill.is-batch  { background: #f3eefe; color: #6d28d9; }
.dl-pill.is-warn   { background: var(--dl-part-bg); color: var(--dl-part-fg); }

/* 评分 */
.dl-score{
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--dl-ink);
}
.dl-score b{
    font-size: 19px;
    font-weight: 800;
}
.dl-score span{
    font-size: 12px;
    font-weight: 600;
    color: var(--dl-faint);
}
/* 评分条 */
.dl-bar{
    display: block;
    width: 84px;
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
    background: #ece7f8;
    overflow: hidden;
}
.dl-bar i{
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--zs-btn-grad);
}

/* ==========================================================================
   4. 数据表（TOP10 速览 / 榜单 / 规格）
   --------------------------------------------------------------------------
   列很多，窄屏一定会溢出。外层 .dl-tw 负责横向滚动，
   并且是 tabindex=0 的 region，键盘用户能滚。
   ========================================================================== */
.dl-tw{
    display: block;
    width: 100%;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    box-shadow: 0 24px 54px -40px rgba(76, 29, 149, .5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dl-tw:focus-visible{
    outline: 2px solid var(--dl-accent);
    outline-offset: 2px;
}
.dl-table{
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 15px;
}
/* 900 这个地板是给榜单 / 对比页那种 7-9 列矩阵准备的，让它们宁可横向滚
   也不把单元格挤扁。但文章正文和政策页里的表格通常只有 3 列，套上同一个
   地板就会在正文列（比外层窄得多）里恒定溢出，挂出一条没必要的滚动条。
   这里按容器放开地板：放得下就铺满，真放不下仍由 .dl-tw 滚动。 */
.dla-body .dl-table,
.lg-body .dl-table{
    min-width: 0;
}
.dl-table caption{
    /* 下内边距让说明文字和表头色带分开，不再挤成两条紧贴的横条 */
    padding: 18px 22px 14px 22px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: var(--dl-mute);
}
.dl-table thead th{
    padding: 15px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: #5a5170;
    background: var(--dl-panel);
    border-bottom: 1px solid var(--dl-line);
}
/* 表头不再自己画圆角。原来给首尾单元格加 17px，是假设 thead 紧贴 .dl-tw 顶边，
   两个圆角能重合成一个。但全站 107 张表都带 <caption>，caption 占住了顶部，
   thead 落在盒子中间，那圈圆角就变成了第二层圆角，视觉上多出一道弧线。
   外层 .dl-tw 已有 18px 圆角，且 overflow-x:auto 会让 overflow-y 计算为 auto，
   盒子本身就按圆角裁切，所以无 caption 的场景也不需要这里补。 */
.dl-table tbody th,
.dl-table tbody td{
    padding: 16px;
    line-height: 1.6;
    vertical-align: middle;
    text-align: left;
    color: var(--dl-txt);
    border-bottom: 1px solid #f1edfa;
}
.dl-table tbody tr:last-child th,
.dl-table tbody tr:last-child td{
    border-bottom: 0;
}
.dl-table tbody tr:hover td,
.dl-table tbody tr:hover th{
    background: #faf8ff;
}
/* 排名格 */
.dl-table .dlt-rank{
    width: 62px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--dl-faint);
}
.dl-table tbody tr:nth-child(1) .dlt-rank{ color: #b8860b; }
.dl-table tbody tr:nth-child(2) .dlt-rank{ color: #7d8491; }
.dl-table tbody tr:nth-child(3) .dlt-rank{ color: #a2643c; }
/* 品牌格 */
.dl-table .dlt-brand{
    min-width: 200px;
}
.dl-table .dlt-brand a{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-table .dlt-brand a:hover{
    color: var(--dl-accent-2);
}
.dl-table .dlt-brand small{
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dl-faint);
}
.dl-table .dlt-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dl-table .dlt-c{ text-align: center; }
/* 行内"详情"按钮 */
.dl-table .dlt-go{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dl-accent-2);
    background: var(--dl-card);
    transition: all .3s ease;
}
.dl-table .dlt-go svg{
    display: block;
    width: 14px;
    height: 14px;
}
.dl-table .dlt-go:hover{
    color: #FFFFFF;
    background: var(--dl-accent);
}
/* 表下说明 */
.dl-tnote{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dl-mute);
}
.dl-tnote svg{
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: #a78bfa;
}
.dl-tnote a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-tnote a:hover{
    text-decoration: underline !important;
}

/* ==========================================================================
   5. 平台快捷入口
   ========================================================================== */
.dl-plat{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.dl-plat li{
    display: block;
}
.dl-plat a{
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--dl-card);
    border: 1px solid transparent;
    transition: all .3s ease;
}
.dl-plat a:hover{
    background: #FFFFFF;
    border-color: var(--dl-line);
    box-shadow: 0 20px 40px -28px rgba(76, 29, 149, .5);
    transform: translateY(-2px);
}
.dl-plat .dlp-ico{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #FFFFFF;
    background: #6d28d9;
}
.dl-plat .dlp-ico svg{
    display: block;
    width: 24px;
    height: 24px;
}
/* 各平台品牌色。图标是单色 SVG，靠底色区分，不引第三方图标包。 */
.dl-plat .is-youtube    .dlp-ico{ background: #FF0033; }
.dl-plat .is-tiktok     .dlp-ico{ background: #0b0518; }
.dl-plat .is-instagram  .dlp-ico{ background: linear-gradient(135deg,#f9ce34 0%,#ee2a7b 52%,#6228d7 100%); }
.dl-plat .is-pinterest  .dlp-ico{ background: #E60023; }
.dl-plat .is-x          .dlp-ico{ background: #16181c; }
.dl-plat .is-facebook   .dlp-ico{ background: #1877F2; }
.dl-plat .is-vimeo      .dlp-ico{ background: #1AB7EA; }
.dl-plat .is-bilibili   .dlp-ico{ background: #00A1D6; }
.dl-plat .is-vk         .dlp-ico{ background: #0077FF; }
.dl-plat .is-dailymotion .dlp-ico{ background: #0066DC; }
.dl-plat .dlp-tx{
    flex: 1 1 auto;
    min-width: 0;
}
.dl-plat .dlp-n{
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dl-ink);
}
.dl-plat .dlp-d{
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dl-mute);
}

/* ==========================================================================
   6. 榜单入口卡
   ========================================================================== */
.dl-rankcard{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.dl-rankcard li{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px 26px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: all .3s ease;
    overflow: hidden;
}
.dl-rankcard li::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--zs-btn-grad);
    opacity: 0;
    transition: opacity .3s ease;
}
.dl-rankcard li:hover{
    box-shadow: 0 26px 52px -34px rgba(76, 29, 149, .55);
    transform: translateY(-3px);
}
.dl-rankcard li:hover::before{
    opacity: 1;
}
.dl-rankcard .dlr-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.dl-rankcard .dlr-ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--dl-accent);
    background: var(--dl-card);
}
.dl-rankcard .dlr-ico svg{
    display: block;
    width: 25px;
    height: 25px;
}
.dl-rankcard .dlr-n{
    font-size: 13px;
    font-weight: 700;
    color: var(--dl-faint);
}
.dl-rankcard h3{
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-rankcard h3 a{
    color: inherit;
}
.dl-rankcard h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
}
.dl-rankcard li:hover h3{
    color: var(--dl-accent-2);
}
.dl-rankcard .dlr-d{
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dl-mute);
}
/* 卡内前三名预览 */
.dl-rankcard .dlr-top3{
    margin: 16px 0 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--dl-line);
}
.dl-rankcard .dlr-top3 li{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    color: var(--dl-txt);
    transform: none;
    box-shadow: none;
    overflow: visible;
}
.dl-rankcard .dlr-top3 li::before{
    display: none;
}
.dl-rankcard .dlr-top3 li + li{
    margin-top: 8px;
}
/* 序号原来是金/银/铜三色（#b8860b / #7d8491 / #a2643c），和全站的蓝紫体系
   完全不搭，像贴了三枚奖牌。改成品牌色的三级递减：第一名用主渐变，
   二三名同色系降饱和，靠深浅表示顺序而不是换色系。 */
.dl-rankcard .dlr-top3 i{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    color: #FFFFFF;
    background: #c4b5e8;
}
.dl-rankcard .dlr-top3 li:nth-child(1) i{
    background: var(--zs-btn-grad);
    box-shadow: 0 4px 10px -4px rgba(124, 58, 237, .55);
}
.dl-rankcard .dlr-top3 li:nth-child(2) i{ background: #7c3aed; }
.dl-rankcard .dlr-top3 li:nth-child(3) i{ background: #a78bfa; }
/* 工具名原来是 14px/400 的正文灰，在卡片里几乎读不出是"前三名"。
   提到 600，颜色换成标题色，第一名再加重一档。 */
.dl-rankcard .dlr-top3 li{
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dl-ink-2);
}
.dl-rankcard .dlr-top3 li:nth-child(1){
    font-weight: 700;
    color: var(--dl-ink);
}

/* ==========================================================================
   7. 工具卡片（工具列表 / 平台专题 / 相关推荐）
   --------------------------------------------------------------------------
   比 tools-hub.css 的 .th-card 信息密度高：要同时放平台、方式、价格、
   批量、评分五组元数据，所以单独一套而不是去覆盖 .th-card。
   ========================================================================== */
.dl-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.dl-grid.is-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-grid.is-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dl-tool{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: all .3s ease;
}
.dl-tool:hover{
    border-color: rgba(124, 58, 237, .34);
    box-shadow: 0 26px 52px -34px rgba(76, 29, 149, .55);
    transform: translateY(-3px);
}
.dl-tool .dlt-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
/* 品牌首字母方块，代替真实 logo，不引外链图片 */
.dl-tool .dlt-logo{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF;
    background: #6d28d9;
}
.dl-grid > .dl-tool:nth-child(6n+1) .dlt-logo{ background: #2B7FFF; }
.dl-grid > .dl-tool:nth-child(6n+2) .dlt-logo{ background: #A435F0; }
.dl-grid > .dl-tool:nth-child(6n+3) .dlt-logo{ background: #C31FD1; }
.dl-grid > .dl-tool:nth-child(6n+4) .dlt-logo{ background: #4f46e5; }
.dl-grid > .dl-tool:nth-child(6n+5) .dlt-logo{ background: #0f8a72; }
.dl-grid > .dl-tool:nth-child(6n+6) .dlt-logo{ background: #d9480f; }
.dl-tool .dlt-sc{
    flex: none;
    text-align: right;
}
.dl-tool h3{
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-tool h3 a{
    color: inherit;
}
.dl-tool h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.dl-tool:hover h3{
    color: var(--dl-accent-2);
}
.dl-tool .dlt-kind{
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dl-faint);
}
.dl-tool .dlt-d{
    margin: 12px 0 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--dl-txt);
}
/* 元数据行 */
.dl-tool .dlt-meta{
    margin: 16px 0 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--dl-line);
}
.dl-tool .dlt-meta li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dl-txt);
}
.dl-tool .dlt-meta li + li{
    margin-top: 9px;
}
.dl-tool .dlt-meta b{
    flex: none;
    width: 56px;
    font-weight: 600;
    color: var(--dl-faint);
}
.dl-tool .dlt-meta span{
    flex: 1 1 auto;
    min-width: 0;
}
.dl-tool .dlt-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0 0;
}
.dl-tool .dlt-act{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}
.dl-tool .dlt-btn{
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}
.dl-tool .dlt-btn svg{
    display: block;
    width: 15px;
    height: 15px;
}
.dl-tool .dlt-btn.is-main{
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-tool .dlt-btn.is-main:hover{
    background: var(--zs-btn-grad-hover);
}
.dl-tool .dlt-btn.is-sub{
    color: var(--dl-accent-2);
    background: var(--dl-card);
}
.dl-tool .dlt-btn.is-sub:hover{
    color: #FFFFFF;
    background: var(--dl-accent);
}

/* ==========================================================================
   8. 筛选器（工具列表 / 榜单共用）
   --------------------------------------------------------------------------
   纯前端筛选：每个按钮带 data-k（维度）和 data-v（值），
   由 downloader.js 读卡片上的 data-* 做与逻辑过滤。
   ========================================================================== */
.dl-filter{
    display: block;
    padding: 24px 26px;
    border-radius: 20px;
    background: var(--dl-panel);
    border: 1px solid var(--dl-line);
}
.dl-filter .dlf-row{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.dl-filter .dlf-row + .dlf-row{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--dl-line);
}
/* 维度名一行放下，不要折行：92px 正好卡在 "Content type" / "Video sites" 的
   临界点上，14px/700 下会被挤到第二行，顺带把右边整行的胶囊往下带。
   加 nowrap 兜底，以后再加长一点的维度名也不会突然折。 */
.dl-filter .dlf-k{
    flex: none;
    width: 116px;
    padding-top: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--dl-ink-2);
}
.dl-filter .dlf-v{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* 胶囊本体。平台详情页的平台切换条用的是 <a>（跳到另一个页面，不是前端筛选），
   外观要和筛选按钮一模一样，所以两者共用这组声明，不另抄一份。
   .dlf-v a 的特异性 0,2,1 压得住全站的 a:hover{color:#0695FF}。

   字号必须写成 16px/1.5/400，不能写 14px/500：style.css 有一条全站的
   `select,textarea,button{ font: 16px/1.5 var(--zs-font) !important }`，
   <button> 的字号字重行高全被它锁死，component 里怎么写都无效；而 <a> 不受
   这条规则管。两种标签要长得一样，只能把 <a> 对齐到 <button> 的实际渲染值。
   同理 .on 不能加 font-weight:600 —— 按钮做不到，加了就只有平台那一行变粗。 */
.dl-filter button,
.dl-filter .dlf-v a{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--dl-line);
    border-radius: 17px;
    font-family: var(--zs-font);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--dl-txt);
    background: #FFFFFF;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .25s ease;
}
.dl-filter button:hover,
.dl-filter .dlf-v a:hover{
    color: var(--dl-accent-2);
    border-color: rgba(124, 58, 237, .4);
}
.dl-filter button.on,
.dl-filter .dlf-v a.on{
    color: #FFFFFF;
    border-color: transparent;
    background: var(--zs-btn-grad);
}
.dl-filter button.on:hover,
.dl-filter .dlf-v a.on:hover{
    color: #FFFFFF;
    border-color: transparent;
    background: var(--zs-btn-grad-hover);
}
.dl-filter button i{
    font-size: 12px;
    opacity: .75;
}

/* 结果计数 + 重置 */
.dl-fbar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 20px 0;
}
.dl-fbar .dlfb-n{
    font-size: 15px;
    color: var(--dl-mute);
}
.dl-fbar .dlfb-n b{
    font-size: 19px;
    font-weight: 800;
    color: var(--dl-ink);
}
.dl-fbar .dlfb-act{
    display: flex;
    align-items: center;
    gap: 10px;
}
.dl-fbar .dlfb-reset{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--dl-line);
    border-radius: 17px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dl-mute);
    background: #FFFFFF;
    cursor: pointer;
    transition: all .25s ease;
}
.dl-fbar .dlfb-reset:hover{
    color: var(--dl-accent-2);
    border-color: rgba(124, 58, 237, .4);
}
.dl-fbar .dlfb-reset svg{
    display: block;
    width: 15px;
    height: 15px;
}
/* 排序下拉 */
.dl-fbar select{
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--dl-line);
    border-radius: 17px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dl-txt);
    background: #FFFFFF;
    cursor: pointer;
}
/* 空结果 */
.dl-empty{
    display: none;
    padding: 56px 24px;
    text-align: center;
    border-radius: 20px;
    background: var(--dl-panel);
    border: 1px dashed var(--dl-line);
}
.dl-empty.show{
    display: block;
}
.dl-empty svg{
    width: 42px;
    height: 42px;
    color: #c4b5e8;
}
.dl-empty strong{
    display: block;
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-empty p{
    margin: 8px 0 0 0;
    font-size: 15px;
    color: var(--dl-mute);
}

/* ==========================================================================
   9. 内页页头（工具列表 / 榜单 / 平台 / 评测 列表页共用）
   --------------------------------------------------------------------------
   与 page.css 的 .pg-top 同族，但这里把面包屑做进同一层渐变里，
   并支持右侧放一块"本页要点"的统计。
   ========================================================================== */
.dl-top{
    position: relative;
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg,
        #e4d7fb 0%, #e9dffc 22%, #eee7fc 46%, #f5f1fd 74%, #FFFFFF 100%);
    overflow: clip;
}
.dl-top::before,
.dl-top::after{
    content: "";
    position: absolute;
    top: -55%;
    width: 62%;
    height: 190%;
    pointer-events: none;
}
.dl-top::before{
    left: -18%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(43,127,255,.11) 0%, rgba(43,127,255,0) 72%);
}
.dl-top::after{
    right: -18%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(195,31,209,.12) 0%, rgba(195,31,209,0) 72%);
}
.dl-top .path,
.dl-top .dl-phead{
    position: relative;
    z-index: 2;
    background: transparent;
}
.dl-phead{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding: 34px 0 58px 0;
}
.dl-phead .dlp-tx{
    flex: 1 1 auto;
    min-width: 0;
}
/* 右侧统计块（.dlp-fig）在几个栏目页上已经去掉了。.dl-phead 是
   justify-content:space-between 的 flex，只剩一个子元素时它会独占整行，
   48px 的标题拉到 1600px 宽读起来很累。这里给只有文案的那种 hero 限一个
   读起来舒服的行宽，仍然靠左，和下方板块的左边界对齐。 */
/* 1080 / 920 对 48px 的 h1 太窄了，新闻详情页那种长标题会折到三行。内容区本身
   有 1600px，放宽到和 is-tight / is-center 两个变体相同的 1340 / 1180，
   三种 hero 行宽从此一致。 */
.dl-phead .dlp-tx:only-child{
    max-width: 1340px;
}
.dl-phead .dlp-tx:only-child .dl-lead{
    max-width: 1180px;
}
@media only screen and (max-width: 1440px){
    .dl-phead .dlp-tx:only-child{ max-width: 1120px; }
    .dl-phead .dlp-tx:only-child .dl-lead{ max-width: 1000px; }
}
/* 紧凑版 hero（12 个平台详情页）：右侧统计块去掉后 hero 只剩文案，把下边距收
   一半，并让紧接着的第一段正文（.dl-sec.is-lead）把上边距也收掉，这样标题、导语
   和下面那段技术说明落在同一屏里，读起来是一块而不是两块。
   58 + 76 = 134px 收到 30 + 28 = 58px：h2 是 30px 字号，上方留 58px 正好是一个
   正常的段落间距，不会挤。行宽同时放宽，少折行也等于少占垂直空间。 */
.dl-phead.is-tight{
    padding-bottom: 30px;
}
.dl-phead.is-tight .dlp-tx,
.dl-phead.is-tight .dlp-tx:only-child{
    max-width: 1340px;
}
.dl-phead.is-tight .dlp-tx .dl-lead,
.dl-phead.is-tight .dlp-tx:only-child .dl-lead{
    max-width: 1180px;
}
.dl-sec.is-lead{
    padding-top: 28px;
}
/* Show more 按钮到下一个板块标题之间收到原来的 75%：
   原来是 .dl-art 的 40px 下内边距 + 下个 .dl-sec 的 76px 上内边距 = 116px，
   改成 24 + 63 = 87px。两边各收一点，而不是把一边压到 0。 */
.dl-sec.is-lead .dl-art{
    padding-bottom: 24px;
}
.dl-sec.is-lead + .dl-sec{
    padding-top: 63px;
}
@media only screen and (max-width: 1440px){
    .dl-phead.is-tight .dlp-tx,
    .dl-phead.is-tight .dlp-tx:only-child{ max-width: 1120px; }
    .dl-phead.is-tight .dlp-tx .dl-lead,
    .dl-phead.is-tight .dlp-tx:only-child .dl-lead{ max-width: 1000px; }
}
@media only screen and (max-width: 767px){
    .dl-phead.is-tight{ padding-bottom: 22px; }
    .dl-sec.is-lead{ padding-top: 20px; }
}

/* 居中版 hero（栏目页 + 标签页）：没有右侧统计块，标题和导语居中。行宽比靠左那
   版放宽，不然大标题两三个词就折行；但仍然限住，全宽 1600px 的正文太难读。 */
.dl-phead.is-center .dlp-tx,
.dl-phead.is-center .dlp-tx:only-child{
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.dl-phead.is-center .dlp-tx .dl-lead,
.dl-phead.is-center .dlp-tx:only-child .dl-lead{
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 1440px){
    .dl-phead.is-center .dlp-tx,
    .dl-phead.is-center .dlp-tx:only-child{ max-width: 1120px; }
    .dl-phead.is-center .dlp-tx .dl-lead,
    .dl-phead.is-center .dlp-tx:only-child .dl-lead{ max-width: 1000px; }
}
.dl-phead .dl-h1{
    display: block;
    margin: 0;
    font-size: 48px;
    line-height: 1.16;
    letter-spacing: -.024em;
    font-weight: 800;
    color: var(--dl-ink);
}
/* .dl-h1 里的 <em> 用站内统一的按钮渐变做强调，和首页 banner 标题、
   tools/news 两个 hero 的 em 是同一套写法（--zs-btn-grad + background-clip）。
   color 是兜底：不支持 background-clip:text 的浏览器会显示这个纯色。 */
.dl-phead .dl-h1 em{
    font-style: normal;
    background: var(--zs-btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: #7c3aed;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .dl-phead .dl-h1 em{
        -webkit-text-fill-color: transparent;
    }
}
.dl-phead .dl-lead{
    display: block;
    max-width: 880px;
    margin: 18px 0 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--dl-txt);
}
.dl-phead .dl-lead strong{
    font-weight: 600;
    color: var(--dl-ink-2);
}
.dl-phead .dl-lead a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-phead .dl-lead a:hover{
    text-decoration: underline !important;
}
/* 页头小胶囊（更新时间 / 收录数量） */
.dl-phead .dl-tip{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.dl-phead .dl-tip li{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dl-txt);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
}
.dl-phead .dl-tip svg{
    display: block;
    width: 15px;
    height: 15px;
    color: var(--dl-accent);
}
/* 页头右侧统计块 */
.dl-phead .dlp-fig{
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 320px;
}
.dl-phead .dlp-fig li{
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .95);
}
.dl-phead .dlp-fig strong{
    display: block;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dl-ink);
}
.dl-phead .dlp-fig span{
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--dl-mute);
}

/* 页头下方的维度切换（榜单维度 / 评测分类）
   粘顶：往下滚时这条一直贴在页眉底下，长表格滚到一半也能直接换榜单。
   top 用 80px = 页眉高度；页眉滚动后会变成 fixed（.zs-header.show），所以这条
   必须正好让开它，否则会被盖住。z-index 压在表头之上、页眉之下（页眉 99999）。
   加 background + 阴影，滚过内容时不会透出下面的文字。 */
.dl-subnav{
    position: sticky;
    top: 80px;
    z-index: 21;
    border-bottom: 1px solid var(--dl-line);
    background: #FFFFFF;
    box-shadow: 0 6px 18px -14px rgba(76, 29, 149, .45);
}
.dl-subnav .zs-wp{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 34px;
}
.dl-subnav a{
    position: relative;
    display: block;
    padding: 16px 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dl-txt);
    white-space: nowrap;
    transition: color .3s ease;
}
.dl-subnav a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--zs-btn-grad);
    transform: scaleX(0);
    transition: transform .3s ease;
}
.dl-subnav a:hover{ color: var(--dl-accent-2); }
.dl-subnav a:hover::after{ transform: scaleX(1); }
.dl-subnav a.on{
    color: var(--dl-ink);
    font-weight: 600;
}
.dl-subnav a.on::after{ transform: scaleX(1); }

/* ==========================================================================
   10. 评测 / 场景推荐卡
   ========================================================================== */
.dl-revcard{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: all .3s ease;
}
.dl-revcard:hover{
    border-color: rgba(124, 58, 237, .34);
    box-shadow: 0 26px 52px -34px rgba(76, 29, 149, .55);
    transform: translateY(-3px);
}
.dl-revcard .dlv-kind{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 26px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--dl-accent-2);
    background: var(--dl-card);
}
.dl-revcard .dlv-kind svg{
    display: block;
    width: 13px;
    height: 13px;
}
.dl-revcard .dlv-kind.is-vs{ background: #e8f1ff; color: #1f5fd0; }
.dl-revcard .dlv-kind.is-best{ background: #eafaf1; color: #128a52; }
.dl-revcard h3{
    margin: 14px 0 0 0;
    font-size: 21px;
    line-height: 1.38;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dl-ink);
}
.dl-revcard h3 a{ color: inherit; }
.dl-revcard h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
}
.dl-revcard:hover h3{ color: var(--dl-accent-2); }
.dl-revcard .dlv-d{
    margin: 12px 0 0 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--dl-txt);
}
/* 对比双方 */
.dl-revcard .dlv-pair{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--dl-panel);
}
.dl-revcard .dlv-pair b{
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--dl-ink-2);
    text-align: center;
}
.dl-revcard .dlv-pair i{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-revcard .dlv-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 13px;
    color: var(--dl-faint);
}
.dl-revcard .dlv-foot time{ white-space: nowrap; }
.dl-revcard .dlv-go{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-revcard .dlv-go svg{
    display: block;
    width: 15px;
    height: 15px;
    transition: transform .3s ease;
}
.dl-revcard:hover .dlv-go svg{ transform: translateX(3px); }

/* ==========================================================================
   11. 文章页（对比评测 / 场景推荐 / 新闻详情）
   --------------------------------------------------------------------------
   左目录 + 右正文。目录用 position:sticky，判定线与 main.js 里的
   scrollspy 对齐（106px = 页眉 80 + 余量）。
   ========================================================================== */
/* 这一块不再自己收窄 + 居中。以前是 max-width:1320px;margin:0 auto，结果
   同一页里 .dl-phead 铺满 .zs-wp 内宽（1600），而正文块只有 1320 并居中，
   左右各多缩进 140px —— H1 和左侧目录对不齐，和首页的内容带也不齐。
   宽度统一交给外层 .zs-wp，右侧留白由 .dla-body 的上限控制，
   和 .td-sec .dl-art 的做法保持一致。 */
.dl-art{
    display: flex;
    align-items: flex-start;
    gap: 48px;
    max-width: none;
    padding: 46px 0 40px 0;
}
.dl-art .dla-toc{
    position: sticky;
    top: 106px;
    flex: none;
    /* 264px 的 150%。加宽后小节标题基本能一行放完，不再折行。
       .dla-body 是 flex:1 1 auto + min-width:0，会自动让出这 132px。 */
    width: 396px;
    max-width: 396px;
    padding: 22px;
    border-radius: 18px;
    background: var(--dl-panel);
    border: 1px solid var(--dl-line);
}
.dl-art .dla-toc strong{
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dl-faint);
}
.dl-art .dla-toc a{
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dl-txt);
    transition: all .25s ease;
}
.dl-art .dla-toc a:hover{
    color: var(--dl-accent-2);
    background: #FFFFFF;
}
.dl-art .dla-toc a.on{
    font-weight: 600;
    color: #FFFFFF;
    background: var(--dl-accent);
}
/* 不设上限：有目录时吃掉目录之外的全部宽度，没目录时（about 页这类单栏用法）
   直接铺满 .zs-wp。之前给过 1040 的上限，结果左边对齐了但右边空一大块。 */
.dl-art .dla-body{
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
/* 正文排版 */
.dla-body h2{
    margin: 46px 0 0 0;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--dl-ink);
    scroll-margin-top: 110px;
}
.dla-body h2:first-child{ margin-top: 0; }

/* --------------------------------------------------------------------------
   长正文折叠（平台详情页开头那段技术说明）
   --------------------------------------------------------------------------
   用 max-height + overflow 裁切，正文原封不动留在 HTML 里，爬虫读到的还是全文，
   不存在隐藏内容的问题。而且默认是展开状态：.is-clip 由 JS 在加载后加上，
   没有 JS（或 JS 失败）时用户看到的是完整内容，不会被永久截断。
   -------------------------------------------------------------------------- */
.dla-clip{
    position: relative;
}
/* 内容被挪进 .dla-clip 后，原来的 .dla-body h2:first-child 不再命中 */
.dla-clip > *:first-child{
    margin-top: 0;
}
.dla-clip.is-clip{
    max-height: 250px;
    overflow: hidden;
}
/* 底部渐隐，让截断看起来是有意为之，而不是被切了一刀 */
.dla-clip.is-clip::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 82%);
}
/* 字号写死 16px/1.5/400：style.css 里 select,textarea,button 的 font 是
   !important 的，component 改不动，只能对齐它的实际渲染值 */
.dla-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    margin-top: 18px;
    padding: 0 18px;
    border: 1px solid var(--dl-line);
    border-radius: 19px;
    background: #FFFFFF;
    font-family: var(--zs-font);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--dl-accent-2);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.dla-more:hover{
    border-color: rgba(124, 58, 237, .4);
    background: #faf7ff;
}
.dla-more svg{
    display: block;
    width: 16px;
    height: 16px;
    transition: transform .25s ease;
}
.dla-more[aria-expanded="true"] svg{
    transform: rotate(180deg);
}
.dla-more[hidden]{
    display: none;
}
@media only screen and (max-width: 767px){
    .dla-clip.is-clip{ max-height: 210px; }
    .dla-clip.is-clip::after{ height: 80px; }
    .dla-more{ margin-top: 14px; }
}
.dla-body h3{
    margin: 30px 0 0 0;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--dl-ink-2);
}
.dla-body p{
    margin: 15px 0 0 0;
    font-size: 16px;
    line-height: 1.85;
    color: var(--dl-txt);
}
.dla-body p strong{
    font-weight: 600;
    color: var(--dl-ink-2);
}
.dla-body a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dla-body a:hover{ text-decoration: underline !important; }
.dla-body ul,
.dla-body ol{
    margin: 15px 0 0 0;
    padding: 0;
}
.dla-body ul li{
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--dl-txt);
}
.dla-body ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
}
.dla-body ol{
    counter-reset: dla;
}
.dla-body ol li{
    position: relative;
    counter-increment: dla;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--dl-txt);
}
.dla-body ol li::before{
    content: counter(dla);
    position: absolute;
    left: 0;
    top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dla-body .dl-tw{
    margin-top: 22px;
}
.dla-body figure{
    margin: 24px 0 0 0;
}
.dla-body figcaption{
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dl-faint);
}

/* 一句话结论块：放在文章最前，方便被精选摘要抓取 */
.dl-verdict{
    position: relative;
    display: block;
    margin: 0 0 34px 0;
    padding: 24px 26px 24px 30px;
    border-radius: 18px;
    background: var(--dl-panel);
    border: 1px solid var(--dl-line);
    overflow: hidden;
}
.dl-verdict::before{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--zs-btn-grad);
}
.dl-verdict .dlvd-k{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dl-accent-2);
}
.dl-verdict .dlvd-k svg{
    display: block;
    width: 15px;
    height: 15px;
}
.dl-verdict p{
    margin: 10px 0 0 0;
    font-size: 18px;
    line-height: 1.72;
    font-weight: 500;
    color: var(--dl-ink-2);
}
.dl-verdict p strong{
    font-weight: 700;
    color: var(--dl-ink);
}

/* 优缺点双列 */
.dl-pc{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}
.dl-pc > div{
    padding: 22px;
    border-radius: 16px;
    border: 1px solid var(--dl-line);
}
.dl-pc .dlpc-pro{ background: #f3fbf7; border-color: #d6f0e4; }
.dl-pc .dlpc-con{ background: #fff8f4; border-color: #f7e2d4; }
.dl-pc strong{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-pc strong svg{
    display: block;
    width: 18px;
    height: 18px;
}
.dl-pc .dlpc-pro strong svg{ color: var(--dl-yes-fg); }
.dl-pc .dlpc-con strong svg{ color: #d9480f; }
.dl-pc ul{
    margin: 14px 0 0 0;
}
.dl-pc li{
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.7;
}
.dl-pc .dlpc-pro li::before{ background: #3ec98a; }
.dl-pc .dlpc-con li::before{ background: #f0915d; }

/* 场景推荐里的"第 N 名"卡 */
.dl-pick{
    position: relative;
    margin-top: 24px;
    padding: 26px 26px 26px 30px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
}
.dl-pick .dlpk-top{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.dl-pick .dlpk-n{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-pick .dlpk-tx{
    flex: 1 1 auto;
    min-width: 0;
}
.dl-pick h3{
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-pick h3 a{ color: inherit; }
.dl-pick h3 a:hover{ color: var(--dl-accent-2); }
.dl-pick .dlpk-why{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-pick .dlpk-sc{
    flex: none;
    text-align: right;
}
.dl-pick .dlpk-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

/* ==========================================================================
   12. 轻量对比页
   ========================================================================== */
.dl-vshead{
    display: grid;
    grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr);
    align-items: stretch;
    gap: 0;
    margin-bottom: 30px;
}
.dl-vshead .dlvs-side{
    padding: 26px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    text-align: center;
}
.dl-vshead .dlvs-mid{
    display: flex;
    align-items: center;
    justify-content: center;
}
.dl-vshead .dlvs-mid span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
    box-shadow: 0 14px 30px -16px rgba(124, 58, 237, .7);
}
.dl-vshead .dlvs-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    background: #2B7FFF;
}
.dl-vshead .dlvs-side:last-child .dlvs-logo{ background: #C31FD1; }
.dl-vshead h2{
    margin: 14px 0 0 0;
    font-size: 24px;
    line-height: 1.32;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-vshead h2 a{ color: inherit; }
.dl-vshead h2 a:hover{ color: var(--dl-accent-2); }
.dl-vshead .dlvs-k{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dl-faint);
}
.dl-vshead .dlvs-d{
    margin: 12px 0 0 0;
    font-size: 14px;
    line-height: 1.72;
    color: var(--dl-txt);
}
.dl-vshead .dlvs-pills{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
/* 对比表里高亮胜出方 */
.dl-table td.is-win{
    background: #f6f2ff;
}
.dl-table td.is-win::after{
    content: "更优";
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    color: #FFFFFF;
    background: var(--dl-accent);
}

/* ==========================================================================
   13. 平台专题
   ========================================================================== */
.dl-pfgrid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.dl-pfcard{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: all .3s ease;
}
.dl-pfcard:hover{
    border-color: rgba(124, 58, 237, .34);
    box-shadow: 0 26px 52px -34px rgba(76, 29, 149, .55);
    transform: translateY(-3px);
}
/* 平台图标方块。标签页的推荐卡（.dl-reccard）用的是同一套，所以品牌色规则两边
   共用一份，不另抄一遍，免得以后改了色号只改到一处。 */
.dl-pfcard .dlpf-ico,
.dl-reccard .dlpf-ico{
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #FFFFFF;
    background: #6d28d9;
}
.dl-pfcard .dlpf-ico svg,
.dl-reccard .dlpf-ico svg{
    display: block;
    width: 27px;
    height: 27px;
}
.dl-pfcard.is-youtube     .dlpf-ico,
.dl-reccard.is-youtube    .dlpf-ico{ background: #FF0033; }
.dl-pfcard.is-tiktok      .dlpf-ico,
.dl-reccard.is-tiktok     .dlpf-ico{ background: #0b0518; }
.dl-pfcard.is-instagram   .dlpf-ico,
.dl-reccard.is-instagram  .dlpf-ico{ background: linear-gradient(135deg,#f9ce34 0%,#ee2a7b 52%,#6228d7 100%); }
.dl-pfcard.is-pinterest   .dlpf-ico,
.dl-reccard.is-pinterest  .dlpf-ico{ background: #E60023; }
.dl-pfcard.is-x           .dlpf-ico,
.dl-reccard.is-x          .dlpf-ico{ background: #16181c; }
.dl-pfcard.is-facebook    .dlpf-ico,
.dl-reccard.is-facebook   .dlpf-ico{ background: #1877F2; }
.dl-pfcard.is-linkedin    .dlpf-ico,
.dl-reccard.is-linkedin   .dlpf-ico{ background: #0A66C2; }
.dl-pfcard.is-reddit      .dlpf-ico,
.dl-reccard.is-reddit     .dlpf-ico{ background: #FF4500; }
.dl-pfcard.is-vimeo       .dlpf-ico,
.dl-reccard.is-vimeo      .dlpf-ico{ background: #1AB7EA; }
.dl-pfcard.is-bilibili    .dlpf-ico,
.dl-reccard.is-bilibili   .dlpf-ico{ background: #00A1D6; }
.dl-pfcard.is-vk          .dlpf-ico,
.dl-reccard.is-vk         .dlpf-ico{ background: #0077FF; }
.dl-pfcard.is-dailymotion .dlpf-ico,
.dl-reccard.is-dailymotion .dlpf-ico{ background: #0066DC; }
.dl-pfcard h3{
    margin: 16px 0 0 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-pfcard h3 a{ color: inherit; }
.dl-pfcard h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
}
.dl-pfcard:hover h3{ color: var(--dl-accent-2); }
.dl-pfcard .dlpf-d{
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 1.72;
    color: var(--dl-mute);
}
.dl-pfcard .dlpf-m{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--dl-line);
}

/* 平台详情页：按方式分组的小分区 */
.dl-group{
    display: block;
    margin-top: 26px;
    padding: 24px 26px;
    border-radius: 20px;
    background: var(--dl-panel);
    border: 1px solid var(--dl-line);
}
.dl-group .dlg-h{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.dl-group .dlg-ico{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--dl-accent);
    background: #FFFFFF;
}
.dl-group .dlg-ico svg{
    display: block;
    width: 22px;
    height: 22px;
}
.dl-group h3{
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-group .dlg-n{
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--dl-faint);
}
.dl-group .dlg-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.dl-group .dlg-list a{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 13px;
    background: #FFFFFF;
    border: 1px solid transparent;
    transition: all .3s ease;
}
.dl-group .dlg-list a:hover{
    border-color: rgba(124, 58, 237, .34);
    box-shadow: 0 16px 34px -26px rgba(76, 29, 149, .5);
}
.dl-group .dlg-list i{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #FFFFFF;
    background: #6d28d9;
}
.dl-group .dlg-list b{
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dl-ink);
}
.dl-group .dlg-list small{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--dl-faint);
}

/* ==========================================================================
   14. 免责声明条 + 全站 CTA
   --------------------------------------------------------------------------
   免责声明每页页脚上方都要有，这是内容站的合规要求。
   ========================================================================== */
.dl-note{
    display: block;
    margin-top: 76px;
    padding: 26px 0;
    background: #f4f1fb;
    border-top: 1px solid var(--dl-line);
}
.dl-note .zs-wp{
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.dl-note .dln-ico{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--dl-accent);
    background: #FFFFFF;
}
.dl-note .dln-ico svg{
    display: block;
    width: 20px;
    height: 20px;
}
.dl-note .dln-tx{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--dl-mute);
}
.dl-note .dln-tx strong{
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dl-ink-2);
}
.dl-note .dln-tx a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-note .dln-tx a:hover{
    text-decoration: underline !important;
}

.dl-cta{
    display: block;
    padding: 76px 0 0 0;
}
.dl-cta .dlc-box{
    position: relative;
    padding: 54px 48px;
    border-radius: 28px;
    text-align: center;
    background-color: #0b0518;
    background-image:
        radial-gradient(60% 80% at 16% 10%, rgba(43,127,255,.42) 0%, rgba(43,127,255,0) 62%),
        radial-gradient(58% 76% at 84% 16%, rgba(195,31,209,.38) 0%, rgba(195,31,209,0) 62%);
    overflow: hidden;
}
.dl-cta .dlc-box h2{
    margin: 0;
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #FFFFFF;
}
.dl-cta .dlc-box h2 em{
    background: linear-gradient(90deg, #7cc0ff 0%, #d98bff 52%, #ff9be8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dl-cta .dlc-box p{
    max-width: 700px;
    margin: 16px auto 0 auto;
    font-size: 17px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .7);
}
.dl-cta .dlc-btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}
.dl-cta .dlc-btn a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    transition: all .3s ease;
}
.dl-cta .dlc-btn a svg{
    display: block;
    width: 17px;
    height: 17px;
}
.dl-cta .dlc-btn .is-solid{
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-cta .dlc-btn .is-solid:hover{
    background: var(--zs-btn-grad-hover);
}
.dl-cta .dlc-btn .is-ghost{
    color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .24);
}
.dl-cta .dlc-btn .is-ghost:hover{
    background: rgba(255, 255, 255, .2);
}

/* ==========================================================================
   15. FAQ（本站版，与 page.css 的 .pg-faq 同构，只是配色对齐白底区）
   ========================================================================== */
.dl-faq details{
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--dl-line);
    border-radius: 16px;
    background: #FFFFFF;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.dl-faq details[open]{
    border-color: rgba(124, 58, 237, .32);
    box-shadow: 0 16px 34px -28px rgba(76, 29, 149, .45);
}
.dl-faq summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 24px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dl-ink);
    cursor: pointer;
    list-style: none;
}
.dl-faq summary::-webkit-details-marker{ display: none; }
.dl-faq summary::after{
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background-color: var(--dl-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.dl-faq details[open] summary::after{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}
.dl-faq summary:hover{ color: var(--dl-accent-2); }
.dl-faq .dlq-a{
    display: block;
    padding: 0 24px 22px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--dl-txt);
}
.dl-faq .dlq-a p{ margin: 0 0 12px 0; }
.dl-faq .dlq-a p:last-child{ margin-bottom: 0; }
.dl-faq .dlq-a ul{ margin: 0 0 12px 0; }
.dl-faq .dlq-a li{
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.dl-faq .dlq-a li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
}
.dl-faq .dlq-a a{
    font-weight: 600;
    color: var(--dl-accent-2);
}
.dl-faq .dlq-a a:hover{ text-decoration: underline !important; }

/* ==========================================================================
   16. 内链区（每页底部的"相关内容"）
   ========================================================================== */
.dl-link{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.dl-link > li{
    padding: 22px 24px;
    border-radius: 18px;
    background: var(--dl-card);
}
.dl-link h3{
    margin: 0 0 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-link ul li{
    margin-bottom: 9px;
}
.dl-link ul a{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dl-txt);
    transition: color .25s ease;
}
.dl-link ul a:hover{
    color: var(--dl-accent-2);
    text-decoration: underline !important;
}

/* 分页器 */
.dl-pager{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
}
/* button 一并纳入：JS 驱动的那个分页器用的是 <button>（它们是操作控件，
   不是链接，语义上该用 button），外观要和静态分页完全一致。
   font/appearance 必须显式重置，否则浏览器默认按钮样式会盖过来。 */
.dl-pager a,
.dl-pager span,
.dl-pager button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    color: var(--dl-txt);
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: all .25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.dl-pager button{
    cursor: pointer;
}
.dl-pager a:hover,
.dl-pager button:hover:not(:disabled):not(.cur){
    color: var(--dl-accent-2);
    border-color: rgba(124, 58, 237, .4);
}
.dl-pager .cur{
    color: #FFFFFF;
    border-color: transparent;
    background: var(--zs-btn-grad);
}
.dl-pager .gap{
    border: 0;
    background: transparent;
    color: var(--dl-faint);
}
.dl-pager .disabled,
.dl-pager button:disabled{
    opacity: .45;
    pointer-events: none;
}
.dl-pager svg{
    display: block;
    width: 16px;
    height: 16px;
}
/* 页码容器，仅用于把数字按钮排成一排 */
.dl-pager .dlpg-nums{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dl-pager[hidden]{
    display: none;
}
/* 后台分页标签 {$page|raw} 输出的是 ul.pagination > li > a/span，
   当前页是 li.active、不可点是 li.disabled。
   这里只把列表排成一行并映射当前页样式，按钮外观沿用上面的 .dl-pager a / span。 */
.dl-pager .pagination{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dl-pager .pagination li{
    display: block;
    margin: 0;
    padding: 0;
}
.dl-pager .pagination .active span{
    color: #FFFFFF;
    border-color: transparent;
    background: var(--zs-btn-grad);
}
/* 翻页靠给 li 加 hidden 实现，但卡片自己声明了 display:flex，优先级高过浏览器
   默认的 [hidden]{display:none}，所以必须在这里显式压回去，否则点了页码没反应 */
.dl-grid > li[hidden]{
    display: none;
}

/* 纯装饰用的 sr-only（style.css 里已有一份，这里兼容单独引用本文件的页面） */
.dl-only{
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   17. 响应式
   --------------------------------------------------------------------------
   断点与 style.css 对齐：1440 / 1280 / 1200 / 1023 / 767。
   ========================================================================== */
@media screen and (max-width: 1440px){
    .dl-hero{ padding: 132px 0 66px 0; }
    .dl-hero .dlh-title{ font-size: 46px; }
    .dl-phead .dl-h1{ font-size: 42px; }
    .dl-head .dl-h2{ font-size: 33px; }
    .dl-plat{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
    .dl-pfgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 1280px){
    .dl-hero .dlh-title{ font-size: 42px; }
    .dl-sec{ padding-top: 62px; }
    .dl-art{ gap: 34px; }
    .dl-art .dla-toc{ width: 348px; max-width: 348px; }
    .dl-link{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1200px){
    .dl-hero{ padding: 116px 0 58px 0; }
    .dl-hero .dlh-title{ font-size: 38px; }
    .dl-hero .dlh-sub{ font-size: 17px; }
    .dl-phead{
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        padding-bottom: 46px;
    }
    .dl-phead .dl-h1{ font-size: 36px; }
    .dl-phead .dlp-fig{ width: 100%; grid-template-columns: repeat(4, minmax(0,1fr)); }
    .dl-plat{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dl-grid,
    .dl-rankcard{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-grid.is-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-pfgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-group .dlg-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 目录在这个宽度下横过来贴顶，比继续挤正文强 */
    .dl-art{ display: block; padding-top: 34px; }
    .dl-art .dla-toc{
        position: static;
        width: auto;
        margin-bottom: 26px;
    }
    .dl-art .dla-toc > div{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dl-art .dla-body{ max-width: none; }
}
@media screen and (max-width: 1023px){
    .dl-head{
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .dl-head .dl-h2{ font-size: 29px; }
    .dl-filter .dlf-row{ flex-direction: column; gap: 10px; }
    .dl-filter .dlf-k{ width: auto; padding-top: 0; }
    .dl-vshead{ grid-template-columns: 1fr; gap: 14px; }
    .dl-vshead .dlvs-mid{ padding: 4px 0; }
    .dl-pc{ grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px){
    .dl-hero{ padding: 104px 0 48px 0; }
    .dl-hero .dlh-title{ font-size: 30px; }
    .dl-hero .dlh-sub{ font-size: 15px; }
    .dl-hero .dlh-stat{ margin-top: 32px; }
    .dl-hero .dlh-stat li{
        flex: 1 1 100%;
        padding: 14px 0;
    }
    .dl-hero .dlh-stat li + li{
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }
    .dl-hero .dlh-stat strong{ font-size: 28px; }

    .dl-sec{ padding-top: 46px; }
    .dl-sec.is-tint{ margin-top: 46px; padding: 44px 0 46px 0; }
    .dl-sec.is-last{ padding-bottom: 30px; }
    .dl-head{ margin-bottom: 24px; }
    .dl-head .dl-h2{ font-size: 25px; }
    .dl-head .dl-desc{ font-size: 15px; }

    .dl-phead{ padding: 24px 0 36px 0; }
    .dl-phead .dl-h1{ font-size: 29px; }
    .dl-phead .dl-lead{ font-size: 15px; }
    .dl-phead .dlp-fig{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dl-phead .dlp-fig strong{ font-size: 22px; }

    .dl-subnav .zs-wp{
        gap: 0 22px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .dl-subnav a{ font-size: 14px; padding: 13px 2px; }

    .dl-plat,
    .dl-grid,
    .dl-grid.is-2,
    .dl-grid.is-4,
    .dl-rankcard,
    .dl-pfgrid,
    .dl-link,
    .dl-group .dlg-list{ grid-template-columns: 1fr; }

    .dl-tool{ padding: 20px; }
    .dl-tool h3{ font-size: 17px; }
    .dl-revcard{ padding: 20px; }
    .dl-revcard h3{ font-size: 18px; }
    .dl-pick{ padding: 20px; }
    .dl-pick .dlpk-top{ flex-wrap: wrap; }
    .dl-pick h3{ font-size: 19px; }

    .dl-table{ font-size: 14px; min-width: 760px; }
    .dl-table thead th,
    .dl-table tbody th,
    .dl-table tbody td{ padding: 12px 13px; }

    .dla-body h2{ font-size: 24px; margin-top: 34px; }
    .dla-body h3{ font-size: 18px; }
    .dla-body p,
    .dla-body ul li,
    .dla-body ol li{ font-size: 15px; }
    .dl-verdict{ padding: 20px 20px 20px 24px; }
    .dl-verdict p{ font-size: 16px; }

    .dl-cta{ padding-top: 46px; }
    .dl-cta .dlc-box{ padding: 34px 22px; border-radius: 20px; }
    .dl-cta .dlc-box h2{ font-size: 25px; }
    .dl-cta .dlc-box p{ font-size: 15px; }
    .dl-cta .dlc-btn a{ width: 100%; justify-content: center; }

    .dl-note{ margin-top: 46px; }
    .dl-note .zs-wp{ gap: 12px; }
    .dl-pager{ margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   免责声明的两种落位
   --------------------------------------------------------------------------
   1) 独立条（.dl-note）：白底内容区末尾用，浅紫底 + 上分隔线。
   2) 页脚内（.dl-note.is-foot）：放在 .foot-copyright 之前。
      首页那条 .zs-cta -> .zs-footer 是靠 margin-top:-52px 叠压出来的，
      中间再插一个独立区块会把这个叠压效果顶开，所以声明改放进页脚内部。
      页脚是纯黑底，配色整套反过来。
   -------------------------------------------------------------------------- */
.dl-note + .zs-footer{
    margin-top: 0;
}
.dl-note.is-foot{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 22px var(--zs-gutter) 26px var(--zs-gutter);
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.dl-note.is-foot .dln-ico{
    color: #c4b5fd;
    background: rgba(255, 255, 255, .08);
}
.dl-note.is-foot .dln-tx{
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .5);
}
.dl-note.is-foot .dln-tx strong{
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}
.dl-note.is-foot .dln-tx a{
    color: #c4b5fd;
}
@media only screen and (max-width: 767px){
    .dl-note.is-foot{
        gap: 12px;
        padding-top: 18px;
        padding-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   正文里的行内代码
   --------------------------------------------------------------------------
   工具详情页会出现命令行参数（yt-dlp -f ...）。等宽字体单独指定，
   不走 --zs-font：Inter 的数字和连字符在参数里容易看错。
   -------------------------------------------------------------------------- */
.dla-body code,
.dlq-a code,
.tdq-a code,
.dl-faq code,
.td-faq code{
    padding: 2px 7px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    font-size: .89em;
    white-space: nowrap;
    color: #5b21b6;
    background: #f1ecfd;
    border: 1px solid #e3daf9;
}
/* 长命令允许折行，否则窄屏会把表格顶宽 */
.dla-body p code{
    white-space: normal;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   工具详情页复用 .dl-art 的排版，但它是单栏（没有左目录），
   所以把 flex 关掉、宽度放开。
   -------------------------------------------------------------------------- */
.td-sec .dl-art{
    display: block;
    max-width: none;
    padding: 0;
}
.td-sec .dl-art .dla-body{
    max-width: none;
}
.td-sec .dl-art .dla-body h3:first-child{
    margin-top: 0;
}

/* ==========================================================================
   Home platform carousel: swap the stock photos for a tinted tile + platform
   glyph. Reuses the card's own --tc-rgb so the palette stays identical to the
   original design; only the meaningless photography is gone.
   ========================================================================== */
.zs-tcard.is-plat .tc-pic{
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(118% 82% at 50% 4%,
            rgba(var(--tc-rgb), .62) 0%,
            rgba(var(--tc-rgb), .18) 54%,
            rgba(20, 13, 44, 0) 78%),
        #140d2c;
}
.zs-tcard.is-plat .tc-pic svg{
    display: block;
    width: 36%;
    height: auto;
    margin-bottom: 16%;
    color: #FFFFFF;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .34));
    transition: transform .6s ease;
}
.zs-tcard.is-plat:hover .tc-pic svg,
.zs-tcard.is-plat:focus-visible .tc-pic svg{
    transform: scale(1.08);
}
@media only screen and (max-width: 767px){
    .zs-tcard.is-plat .tc-pic svg{ width: 42%; }
}

/* ==========================================================================
   Home platform carousel, take 2
   Titles now read "<Platform> video downloaders", which is far longer than the
   bare platform name, so they wrapped to two lines and knocked the card layout
   out of alignment. Force one line and step the size down per breakpoint; the
   ellipsis is only a safety net for a font fallback that measures wider.
   Longest string is "Dailymotion video downloaders" at 29 characters, and the
   tightest card gives it about 213px of room around the 640px mark.
   ========================================================================== */
.zs-tcard.is-plat .tc-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
}
/* The blurb is hidden until hover now, rather than showing two lines by default. */
.zs-tcard.is-plat .tc-desc{
    padding-top: 0;
    max-height: 0;
    opacity: 0;
    transition: max-height .42s cubic-bezier(.22, .61, .36, 1),
                opacity .3s ease,
                padding-top .42s cubic-bezier(.22, .61, .36, 1);
}
.zs-tcard.is-plat:hover .tc-desc,
.zs-tcard.is-plat:focus-visible .tc-desc{
    padding-top: 8px;
    max-height: calc(1.6em * 6 + 8px);
    opacity: 1;
}
@media screen and (max-width: 1280px){
    .zs-tcard.is-plat .tc-title{ font-size: 16px; }
}
@media screen and (max-width: 1023px){
    .zs-tcard.is-plat .tc-title{ font-size: 14px; }
}
@media only screen and (max-width: 767px){
    .zs-tcard.is-plat .tc-title{ font-size: 13px; }
}

/* ==========================================================================
   Footer disclaimer: the "Heads up" lead-in is gone, so there is only one text
   block left and the shield should sit centred against it instead of pinned to
   the first line.
   ========================================================================== */
.dl-note.is-foot{
    align-items: center;
}

/* ==========================================================================
   Footer platform icons
   style.css draws these with mask-image on the <a>, which leaves no element to
   hang an accessible name on. Switching to inline SVG lets every icon carry its
   own label, so the mask has to be switched off and the colour moved to `color`
   for currentColor to pick up.
   ========================================================================== */
.zs-footer .foot-share li a{
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    color: rgba(255, 255, 255, .78);
    transition: color .3s ease;
}
.zs-footer .foot-share li a:hover{
    background-color: transparent;
    color: #FFFFFF;
}
.zs-footer .foot-share li a svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ==========================================================================
   Tool cards: unify the badge glyph, drop two rows
   --------------------------------------------------------------------------
   1. .dlt-logo used to print a two-letter abbreviation (yt / 4K / St ...). The
      six-colour rotation from :nth-child(6n+k) stays; only the glyph changes,
      so one rule covers all 20 cards on every page instead of editing markup.
   2. .dlt-kind ("CLI - open source") is redundant with the pills underneath.
   3. The third .dlt-meta row is Bulk, verified as position 3 on all 20 cards,
      and it repeats what the Bulk pill already says.
   ========================================================================== */
.dl-tool .dlt-logo{
    /* kills the abbreviation without touching the HTML; the span is already
       aria-hidden, so nothing is lost for screen readers */
    font-size: 0;
}
.dl-tool .dlt-logo::after{
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/icon-dl-glyph.svg) no-repeat center center;
    background-size: 26px 26px;
}
.dl-tool .dlt-kind{
    display: none;
}
.dl-tool .dlt-meta li:nth-child(3){
    display: none;
}

/* ==========================================================================
   platform.html cards: hide the "N free / N do bulk" pills.
   The "N ways / N tools" row below them is gone from the markup as well, so
   there is nothing left to separate and the dashed divider goes with it.
   A card is now just icon, title, blurb.
   ========================================================================== */
.dl-pfcard .dlpf-m{
    display: none;
}

/* ==========================================================================
   Tag index (tags.html)
   Pill-shaped links with a count, wrapped into rows. Reuses the site tokens so
   it needs no new colours: border from --dl-line, hover fill from --zs-btn-grad.
   ========================================================================== */
.dl-taglist{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dl-taglist > li{
    display: block;
    margin: 0;
    padding: 0;
}
.dl-taglist a{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid var(--dl-line);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dl-ink);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.dl-taglist a:hover{
    border-color: transparent;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
    transform: translateY(-2px);
}
@media only screen and (max-width: 767px){
    .dl-taglist{ gap: 8px; }
    .dl-taglist a{ padding: 9px 14px; font-size: 13.5px; }
}

/* ==========================================================================
   Mobile tap targets
   The footer platform icons render at 24px with an 8px gap below 767px, which
   Lighthouse flags as "tap targets are too close". The icon keeps its size --
   the <a> just gets padding so the hit area grows, and the row gets more gap.
   Desktop is untouched: this only applies below 767px.
   ========================================================================== */
@media only screen and (max-width: 767px){
    .zs-footer .foot-share{
        gap: 16px;
    }
    .zs-footer .foot-share li{
        width: 28px;
        height: 28px;
    }
    .zs-footer .foot-share li a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .zs-footer .foot-share li a svg{
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   文章末尾：标签 + 上一篇 / 下一篇
   --------------------------------------------------------------------------
   放在 .dla-body 之后、仍在 .dl-art 右栏内，所以左侧目录的粘性定位不受影响。
   ========================================================================== */
.dla-foot{
    display: block;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--dl-line);
}
.dla-foot .dlaf-tags{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 26px 0;
    padding: 0;
    list-style: none;
}
/* 这个 ul 在 .dla-body 内部，会吃到 .dla-body ul li::before 的圆点装饰，
   胶囊之间冒出一串小圆点。正文列表需要那个点，标签行不需要。 */
.dla-foot .dlaf-tags li{
    margin: 0;
    padding: 0;
}
.dla-foot .dlaf-tags li::before{
    content: none;
    display: none;
}
.dla-foot .dlaf-tags a{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dl-txt);
    background: var(--dl-panel);
    border: 1px solid var(--dl-line);
    transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.dla-foot .dlaf-tags a:hover{
    color: #FFFFFF;
    border-color: transparent;
    background: var(--zs-btn-grad);
}
/* 上一篇 / 下一篇：整行不再是链接，只有标题可点；不要卡片框，两行都靠左。
   每行是「方向标签 + 标题」，上一篇一行、下一篇换行。
   两行之间原来有一条分隔线，把这一组本该是一体的导航切成了两半，看着像两个
   互不相干的区块。改成整组上方一条线（和标签行分开），行与行之间只留间距；
   方向标签给固定宽度，两行的标题起点因此对齐成一列。 */
.dla-foot .dlaf-nav{
    display: block;
    padding-top: 18px;
    border-top: 1px solid var(--dl-line);
}
.dla-foot .dlaf-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    padding: 7px 0;
    text-align: left;
}
.dla-foot .dlaf-row .dlaf-dir{
    flex: none;
    width: 74px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dl-accent-2);
}
.dla-foot .dlaf-row a{
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dl-ink);
    transition: color .22s ease;
}
.dla-foot .dlaf-row a:hover{
    color: var(--dl-accent-2);
    text-decoration: underline !important;
}
/* 上一篇 / 下一篇各占一整行：标题往往有十几个词，并排两列会被压成
   每行两三个字的窄条。单列排下来标题一行放得下，也更好点。 */
@media only screen and (max-width:767px){
    .dla-foot{
        margin-top: 30px;
        padding-top: 22px;
    }
}

/* ==========================================================================
   标签页：聚合内容卡（.dl-tgcard）+ 推荐下载器卡（.dl-reccard）
   --------------------------------------------------------------------------
   版式参考了那种"卡片 + 左上角小标签 + 底部双按钮"的写法，但配色、圆角、
   投影全部沿用站内既有的 token，没有引入任何新色值。
   ========================================================================== */

/* 标题走品牌渐变，对应参考图里那个彩色标题 */
.dl-head .dl-h2.is-grad{
    background: var(--zs-btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: #7c3aed;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .dl-head .dl-h2.is-grad{
        -webkit-text-fill-color: transparent;
    }
}
/* 实心胶囊版的 "View all"，替代默认的浅底箭头按钮 */
.dl-head .dl-all.is-solid{
    height: 44px;
    padding: 0 26px;
    border-radius: 22px;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-head .dl-all.is-solid:hover{
    color: #FFFFFF;
    background: var(--zs-btn-grad-hover);
}

/* 顶部标签云：胶囊给得松一点，便于扫视 */
.dl-taglist.is-cloud{
    gap: 10px;
}
.dl-taglist.is-cloud a{
    font-size: 14.5px;
}

/* ------------------------------------------------------------ 聚合内容卡 */
.dl-tgcard{
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px 22px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dl-tgcard:hover{
    border-color: rgba(124, 58, 237, .3);
    box-shadow: 0 24px 46px -32px rgba(76, 29, 149, .5);
    transform: translateY(-3px);
}
/* 左上角胶囊现在放的是栏目名（Downloaders / Rankings / ...），不是计数 */
.dl-tgcard .dltg-kind{
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
/* 这个板块没有 h2 标题行，卡片标题本身就是 h2，免得从 h1 直接跳到 h3 */
.dl-tgcard h2{
    margin: 14px 0 0 0;
    font-size: 19px;
    line-height: 1.38;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-tgcard .dltg-d{
    margin: 9px 0 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--dl-mute);
}

/* --------------------------------------------------------- 推荐下载器卡 */
.dl-reccard{
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px 22px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--dl-line);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dl-reccard:hover{
    border-color: rgba(124, 58, 237, .3);
    box-shadow: 0 24px 46px -32px rgba(76, 29, 149, .5);
    transform: translateY(-3px);
}
.dl-reccard h3{
    margin: 14px 0 0 0;
    font-size: 19px;
    line-height: 1.38;
    font-weight: 700;
    color: var(--dl-ink);
}
.dl-reccard h3 a{ color: inherit; }
.dl-reccard:hover h3 a{ color: var(--dl-accent-2); }
.dl-reccard .dlrc-d{
    margin: 9px 0 18px 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--dl-mute);
}
.dl-reccard .dlrc-act{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.dl-reccard .dlrc-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    font-size: 14.5px;
    font-weight: 600;
    transition: color .22s ease, background .22s ease, border-color .22s ease;
}
.dl-reccard .dlrc-btn.is-solid{
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.dl-reccard .dlrc-btn.is-solid:hover{
    color: #FFFFFF;
    background: var(--zs-btn-grad-hover);
}

@media only screen and (max-width:767px){
    .dl-tgcard,
    .dl-reccard{
        padding: 20px 18px 16px 18px;
    }
    .dl-tgcard h2,
    .dl-reccard h3{
        font-size: 17.5px;
    }
    .dl-head .dl-all.is-solid{
        height: 40px;
        padding: 0 20px;
    }
    .dl-reccard .dlrc-btn{
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Mobile tap targets
   --------------------------------------------------------------------------
   Google 的移动可用性检查（Lighthouse "Tap targets are not sized
   appropriately"）要求可点元素有 ~48px 的热区、彼此间隔 ≥8px。站内有一批
   控件只有 20~40px，手机上很容易点偏。

   这里统一把热区提到 44~48px，做法是「撑盒子、不放大图形」：容器加高加宽并用
   flex 居中，里面的图标/文字尺寸不动，所以桌面视觉完全不受影响——整块都在
   max-width:767px 里。

   downloader.css 在 66/67 个页面里是最后加载的样式表，所以放这里就能压住
   style.css / index.css / tool-detail.css / news-center.css 的同名规则，
   不需要去每个文件里各改一遍。
   ========================================================================== */
@media only screen and (max-width: 767px){
    /* 汉堡菜单：原来是 20x18 的纯背景图，热区比图标本身还小。
       改成 44x44 的盒子，背景图按 20x18 居中绘制，视觉不变。 */
    .icon-menu{
        top: 6px;
        width: 44px;
        height: 44px;
        background-size: 20px 18px;
        background-position: center center;
    }
    .icon-close{
        min-width: 44px;
        min-height: 44px;
    }

    /* 页脚社交图标：28px 盒子 + 16px 间隔 -> 44px 盒子，图标仍是 24px。
       负外边距把多出来的内边距吃掉，这一排的视觉位置和间距保持原样。 */
    .zs-footer .foot-share{
        gap: 4px;
        margin-left: -10px;
    }
    .zs-footer .foot-share li{
        width: 44px;
        height: 44px;
    }
    .zs-footer .foot-share li a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .zs-footer .foot-share li a svg{
        width: 24px;
        height: 24px;
    }
    /* 页眉右上角的 CTA */
    .zs-header .rightbox .ico-contact a{
        height: 44px;
    }

    /* 筛选胶囊：一行里并排很多个，热区不够最容易点错邻居 */
    .dl-filter button,
    .dl-filter .dlf-v a{
        height: 44px;
        padding: 0 17px;
    }
    .dl-fbar select{
        height: 44px;
    }

    /* 翻页控件 */
    .dl-pager a,
    .dl-pager span,
    .dl-pager button{
        min-width: 44px;
        height: 44px;
    }
    .nw-pager a{
        min-width: 44px;
        height: 44px;
    }

    /* 文末标签胶囊 */
    .dla-foot .dlaf-tags a{
        height: 44px;
        padding: 0 16px;
    }
    /* 折叠正文的展开按钮 */
    .dla-more{
        height: 44px;
    }

    /* 工具详情页的粘性小节导航 */
    .td-tabs a{
        height: 44px;
    }

    /* 首页：banner 的两个 CTA、12 个平台图标、平台轮播的左右翻页 */
    .zs-homebanner .text .btn a{
        height: 44px;
    }
    .zs-homebanner .text .hb-plat a{
        width: 44px;
        height: 44px;
    }
    .zs-tools-nav button{
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   compare_detail.html VS head: the badge uses the same download glyph as the
   .dlt-logo tool cards instead of a two-letter abbreviation. The blue/magenta
   colors for the two sides stay the same.
   ========================================================================== */
.dl-vshead .dlvs-logo::after{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/icon-dl-glyph.svg) no-repeat center center;
    background-size: 30px 30px;
}