/*!
 * download-card.css — 下载卡片前台样式 v2（Halo 插件 download-card）
 * https://github.com/zqzld/halo-plugin-download-card
 *
 * ─────────────────────────────────────────────────────────────
 * v2 设计升级（2026-08-12）
 * ─────────────────────────────────────────────────────────────
 * 1. 设计令牌体系：色彩 / 圆角 / 阴影 / 间距 / 动效统一收敛为变量。
 * 2. 视觉层次：卡片渐变微光 + 分层阴影 + hover 抬升；图标块升级为
 *    「渐变底 + 白色图标 + 内高光」；线路按钮按类型分层——
 *    direct=品牌色实心主按钮（加深混合保证白字 ≥4.5:1），
 *    pan/link=品牌色幽灵按钮。
 * 3. 排版：标题 700 / 线路名 550，字距行距微调，建立节奏感。
 * 4. 微交互：悬停上浮、图标位移、复制成功 pop、折叠旋转，
 *    全部 0.14s~0.22s 缓动；进场使用「上浮淡入」，尊重降动效。
 * 5. 无障碍：正文 / 次要 / 提示三级文字对比度全部 ≥4.5:1；
 *    焦点双环；触控目标 ≥44px。
 *
 * 兼容性承诺（不变）
 * ─────────────────────────────────────────────────────────────
 * - HTML 契约零变更：类名 / data-* / 变量名与 v1 完全一致。
 * - 变量三层：head 注入全局量 → 卡片级派生量 → 调色板。
 * - 暗色三段式顺序不可颠倒：媒体查询 → 显式暗色类 → 显式亮色类。
 * - 主题冲突防御：重复类名提权；仅抑制主题外链箭头时用 !important。
 * - 图标 mask-image + currentColor，正文只留 22 字节 data-zdc-icon。
 */

/* ============================================================
 * 1. 设计令牌：卡片级变量与亮色调色板
 * ============================================================ */

.zdc-card {
  /* —— 1.1 承接 head 注入的全局量，全部带兜底值 —— */
  --zdc-a: var(--zdc-accent, #2e7d32);
  --zdc-r: var(--zdc-radius, 10px);
  --zdc-bh: var(--zdc-btn-h, 38px);
  --zdc-bf: var(--zdc-btn-fs, 14px);

  /* —— 1.2 派生量 —— */
  --zdc-r-sm: max(0px, calc(var(--zdc-r) - 4px));
  --zdc-gap: 8px;
  --zdc-pad: 16px;
  --zdc-brand: var(--zdc-a);

  /* —— 1.3 动效令牌 —— */
  --zdc-t-fast: 0.14s;
  --zdc-t-med: 0.22s;
  --zdc-ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* —— 1.4 亮色调色板（全部满足 WCAG AA）—— */
  --zdc-bg: #ffffff;
  --zdc-fill: #f4f6f9;
  --zdc-fill-h: #e9edf2;
  --zdc-fg: #1f2328;        /* 正文 15.6:1 */
  --zdc-fg-2: #57606a;      /* 次要 5.2:1  */
  --zdc-fg-3: #667085;      /* 提示 4.6:1  */
  --zdc-border: #d9dfe7;
  --zdc-border-soft: #e8edf2;
  --zdc-code-bg: #eef1f5;
  --zdc-code-fg: #1f2328;
  --zdc-shadow-c: rgba(16, 24, 40, 0.08);
  --zdc-shadow-c-2: rgba(16, 24, 40, 0.12);
  --zdc-ok: #1a7f37;
  --zdc-err: #cf222e;
  --zdc-ink: #ffffff;       /* 实心按钮文字 */

  /* —— 1.5 卡片风格预设（值的唯一真源；Java 侧只拼变量名）—— */
  --zdc-preset-outline-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--zdc-a) 5%, var(--zdc-bg)), var(--zdc-bg) 36%);
  --zdc-preset-outline-border: color-mix(in srgb, var(--zdc-a) 22%, var(--zdc-border));
  --zdc-preset-outline-shadow: 0 1px 2px var(--zdc-shadow-c), 0 8px 24px -14px var(--zdc-shadow-c-2);
  --zdc-preset-outline-backdrop: none;

  --zdc-preset-filled-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--zdc-a) 7%, var(--zdc-fill)), var(--zdc-fill) 34%);
  --zdc-preset-filled-border: var(--zdc-border-soft);
  --zdc-preset-filled-shadow: 0 1px 2px var(--zdc-shadow-c);
  --zdc-preset-filled-backdrop: none;

  --zdc-preset-glass-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--zdc-bg) 74%, transparent), color-mix(in srgb, var(--zdc-bg) 55%, transparent));
  --zdc-preset-glass-border: color-mix(in srgb, var(--zdc-fg) 14%, transparent);
  --zdc-preset-glass-shadow: 0 2px 4px var(--zdc-shadow-c), 0 18px 40px -18px var(--zdc-shadow-c-2);
  --zdc-preset-glass-backdrop: blur(14px) saturate(1.5);

  /* —— 1.6 当前生效风格（默认描边；head 注入 :not([data-style]) 可整体切换）—— */
  --zdc-surface: var(--zdc-preset-outline-surface);
  --zdc-border-c: var(--zdc-preset-outline-border);
  --zdc-shadow: var(--zdc-preset-outline-shadow);
  --zdc-backdrop: var(--zdc-preset-outline-backdrop);
  --zdc-shadow-hover:
    0 2px 4px var(--zdc-shadow-c),
    0 20px 44px -20px var(--zdc-shadow-c-2);
}

/* 单卡覆盖：与 head 注入的 .zdc-card:not([data-style]) 互斥，天然不冲突 */
.zdc-card[data-style="outline"] {
  --zdc-surface: var(--zdc-preset-outline-surface);
  --zdc-border-c: var(--zdc-preset-outline-border);
  --zdc-shadow: var(--zdc-preset-outline-shadow);
  --zdc-backdrop: var(--zdc-preset-outline-backdrop);
}

.zdc-card[data-style="filled"] {
  --zdc-surface: var(--zdc-preset-filled-surface);
  --zdc-border-c: var(--zdc-preset-filled-border);
  --zdc-shadow: var(--zdc-preset-filled-shadow);
  --zdc-backdrop: var(--zdc-preset-filled-backdrop);
}

.zdc-card[data-style="glass"] {
  --zdc-surface: var(--zdc-preset-glass-surface);
  --zdc-border-c: var(--zdc-preset-glass-border);
  --zdc-shadow: var(--zdc-preset-glass-shadow);
  --zdc-backdrop: var(--zdc-preset-glass-backdrop);
}

/* ============================================================
 * 2. 暗色适配（三段式，顺序不可颠倒）
 * ============================================================ */

/* 2.1 系统偏好兜底 —— 必须写在显式类规则之前 */
@media (prefers-color-scheme: dark) {
  .zdc-card {
    --zdc-bg: #0d1117;
    --zdc-fill: #141a22;
    --zdc-fill-h: #1b222c;
    --zdc-fg: #e6edf3;
    --zdc-fg-2: #a8b1bb;    /* 次要 7.3:1 */
    --zdc-fg-3: #8b949e;    /* 提示 5.1:1 */
    --zdc-border: #323a45;
    --zdc-border-soft: #252d37;
    --zdc-code-bg: #1b2129;
    --zdc-code-fg: #e6edf3;
    --zdc-shadow-c: rgba(0, 0, 0, 0.5);
    --zdc-shadow-c-2: rgba(0, 0, 0, 0.6);
    --zdc-ok: #3fb950;
    --zdc-err: #f85149;
  }
}

/* 2.2 主题显式声明暗色 —— 覆盖系统偏好 */
html.dark .zdc-card,
html[data-theme="dark"] .zdc-card,
html[data-color-scheme="dark"] .zdc-card,
body.dark .zdc-card,
body[data-theme="dark"] .zdc-card,
.dark .zdc-card,
.color-scheme-dark .zdc-card,
[data-color-scheme="dark"] .zdc-card,
.zdc-card[data-zdc-scheme="dark"] {
  --zdc-bg: #0d1117;
  --zdc-fill: #141a22;
  --zdc-fill-h: #1b222c;
  --zdc-fg: #e6edf3;
  --zdc-fg-2: #a8b1bb;
  --zdc-fg-3: #8b949e;
  --zdc-border: #323a45;
  --zdc-border-soft: #252d37;
  --zdc-code-bg: #1b2129;
  --zdc-code-fg: #e6edf3;
  --zdc-shadow-c: rgba(0, 0, 0, 0.5);
  --zdc-shadow-c-2: rgba(0, 0, 0, 0.6);
  --zdc-ok: #3fb950;
  --zdc-err: #f85149;
}

/* 2.3 主题显式声明亮色 —— 系统暗色但主题强制亮色时扳回来，必须排最后 */
html.light .zdc-card,
html[data-theme="light"] .zdc-card,
html[data-color-scheme="light"] .zdc-card,
body.light .zdc-card,
.color-scheme-light .zdc-card,
[data-color-scheme="light"] .zdc-card,
.zdc-card[data-zdc-scheme="light"] {
  --zdc-bg: #ffffff;
  --zdc-fill: #f4f6f9;
  --zdc-fill-h: #e9edf2;
  --zdc-fg: #1f2328;
  --zdc-fg-2: #57606a;
  --zdc-fg-3: #667085;
  --zdc-border: #d9dfe7;
  --zdc-border-soft: #e8edf2;
  --zdc-code-bg: #eef1f5;
  --zdc-code-fg: #1f2328;
  --zdc-shadow-c: rgba(16, 24, 40, 0.08);
  --zdc-shadow-c-2: rgba(16, 24, 40, 0.12);
  --zdc-ok: #1a7f37;
  --zdc-err: #cf222e;
}

/* ============================================================
 * 3. 卡片容器
 * ============================================================ */

.zdc-card {
  container-type: inline-size;
  container-name: zdc;

  box-sizing: border-box;
  /* 基础布局：左「图标+标题+描述」右「下载按钮+提取码」同一行；
     flex-wrap 在空间不足（侧边栏/窄屏）时自然换行，不挤压 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 1.5em 0;
  padding: var(--zdc-pad);
  border: 1px solid var(--zdc-border-c);
  border-radius: calc(var(--zdc-r) + 2px);
  background: var(--zdc-surface);
  box-shadow: var(--zdc-shadow);
  backdrop-filter: var(--zdc-backdrop);
  -webkit-backdrop-filter: var(--zdc-backdrop);
  color: var(--zdc-fg);
  font-size: var(--zdc-bf);
  line-height: 1.55;
  text-align: left;
  font-family: inherit;
  letter-spacing: normal;

  /* 顶部 1px 内高光：让卡片与背景分离，营造细腻层次 */
  border-top-color: color-mix(in srgb, var(--zdc-border-c) 82%, #ffffff 18%);

  transition:
    box-shadow var(--zdc-t-med) var(--zdc-ease),
    transform var(--zdc-t-med) var(--zdc-ease),
    border-color var(--zdc-t-med) var(--zdc-ease);

  /* 进场：上浮淡入。动画结束后恢复正常样式，hover 抬升不受影响 */
  animation: zdc-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes zdc-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 桌面端 hover：卡片位置固定（不位移），改用「阴影加深 + 边框品牌化 + 顶部高光」表达
 * 边框混入 fg 而非透明，保证浅色/白色主色下 hover 反馈依然可见 */
@media (hover: hover) and (pointer: fine) {
  .zdc-card:hover {
    transform: none;
    box-shadow: var(--zdc-shadow-hover, var(--zdc-shadow));
    border-color: color-mix(in srgb, var(--zdc-a) 42%, var(--zdc-fg));
    border-top-color: color-mix(in srgb, var(--zdc-a) 42%, var(--zdc-fg));
  }
}

.zdc-card *,
.zdc-card *::before,
.zdc-card *::after {
  box-sizing: border-box;
}

/* ============================================================
 * 4. 卡片头部
 * ============================================================ */

.zdc-card__head {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

/* 图标块：渐变底 + 自动对比度图标 + 内高光 + 品牌色光晕
 * 第二行 color: contrast-color() 按背景亮度自动取黑/白（浅色主色→黑图标）；
 * 不支持该函数的浏览器忽略此行，回退纯白图标（v1 行为）。 */
.zdc-card__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: var(--zdc-r-sm);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--zdc-a) 88%, #ffffff 12%),
    color-mix(in srgb, var(--zdc-a) 74%, #000000 26%) 100%
  );
  color: #ffffff;
  color: contrast-color(var(--zdc-a));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 10px -4px color-mix(in srgb, var(--zdc-a) 48%, transparent);
}

/* 图标为 <img>（iconType=url）时的例外形态：
 * ① 容器改白底 + 细边框 —— 透明 ICO（如部分站点 favicon）不会露出主题色渐变底；
 * ② 图片 contain 完整显示 —— cover 会裁掉透明图标四周的留白。
 */
.zdc-card__icon:not([data-zdc-icon]) {
  background: #ffffff;
  color: var(--zdc-a);
  box-shadow:
    inset 0 0 0 1px var(--zdc-border-soft),
    0 4px 10px -4px color-mix(in srgb, var(--zdc-a) 26%, transparent);
}
.zdc-card__icon > img,
img.zdc-card__icon {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  max-width: none;
  box-shadow: none;
}



.zdc-card__meta {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

.zdc-card .zdc-card__title.zdc-card__title {
  margin: 0;
  padding: 0;
  text-indent: 0;
  font-size: 1.0625em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--zdc-fg);
  word-break: break-word;
}

.zdc-card .zdc-card__desc.zdc-card__desc {
  margin: 2px 0 0;
  padding: 0;
  text-indent: 0;
  font-size: 0.9285em;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--zdc-fg-2);
  word-break: break-word;
  /* 描述过长时最多 2 行截断，保持与右侧按钮同高对齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zdc-card__title:empty,
.zdc-card__desc:empty {
  display: none;
}

/* ============================================================
 * 5. 线路网格（内在响应式，不依赖视口宽度）
 * ============================================================ */

/* 线路区：作为卡片右列，宽度由内容决定、靠右对齐；
   单链接方向下即「下载按钮 + 提取码/复制」并排 */
.zdc-card .zdc-card__routes.zdc-card__routes {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--zdc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zdc-card .zdc-card__routes.zdc-card__routes > li {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zdc-card .zdc-card__routes.zdc-card__routes > li::before,
.zdc-card .zdc-card__routes.zdc-card__routes > li::marker {
  content: none;
  display: none;
}

/* ============================================================
 * 6. 线路按钮（按类型分层）
 * ============================================================ */

.zdc-card .zdc-route.zdc-route {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

/* —— 6.1 基底：幽灵按钮（pan / link 默认）——
 * 品牌色微底 + 左侧内阴影指示条（不占用伪元素，规避主题抑制规则） */
.zdc-card .zdc-route__link.zdc-route__link {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: var(--zdc-bh);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--zdc-brand) 26%, var(--zdc-border));
  border-radius: var(--zdc-r-sm);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--zdc-brand) 9%, var(--zdc-bg)),
      color-mix(in srgb, var(--zdc-brand) 5%, var(--zdc-bg))
    );
  background-image: none;

  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zdc-brand) 60%, var(--zdc-fg)),
    0 1px 2px -1px var(--zdc-shadow-c);

  color: var(--zdc-fg);
  font-size: var(--zdc-bf);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  text-underline-offset: unset;

  transition:
    border-color var(--zdc-t-fast) var(--zdc-ease),
    background var(--zdc-t-fast) var(--zdc-ease),
    box-shadow var(--zdc-t-fast) var(--zdc-ease),
    transform var(--zdc-t-fast) var(--zdc-ease);
}

.zdc-card .zdc-route__link.zdc-route__link:hover {
  border-color: color-mix(in srgb, var(--zdc-brand) 55%, var(--zdc-fg));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zdc-brand) 14%, var(--zdc-bg)),
    color-mix(in srgb, var(--zdc-brand) 8%, var(--zdc-bg))
  );
  box-shadow:
    inset 3px 0 0 var(--zdc-brand),
    0 2px 6px -2px color-mix(in srgb, var(--zdc-brand) 35%, transparent);
  text-decoration: none;
}

.zdc-card .zdc-route__link.zdc-route__link:active {
  box-shadow:
    inset 3px 0 0 var(--zdc-brand),
    inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* —— 6.2 direct：品牌色实心主按钮 ——
 * 背景 = 品牌色加深 18%（--zdc-brand-ink）；文字用 contrast-color() 自动取黑/白，
 * 无论主色是深绿还是纯白，文字与背景都不会融合。 */
.zdc-route--direct .zdc-route__link {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zdc-brand-ink, var(--zdc-brand)) 88%, #ffffff 12%),
    var(--zdc-brand-ink, var(--zdc-brand))
  );
  color: #ffffff;
  color: contrast-color(var(--zdc-brand-ink, var(--zdc-brand)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 4px 12px -4px color-mix(in srgb, var(--zdc-brand) 55%, transparent);
}

.zdc-route--direct .zdc-route__link:hover {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zdc-brand-ink, var(--zdc-brand)) 94%, #ffffff 6%),
    color-mix(in srgb, var(--zdc-brand-ink, var(--zdc-brand)) 94%, #000000 6%)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 6px 16px -6px color-mix(in srgb, var(--zdc-brand) 60%, transparent);
}

.zdc-route--direct .zdc-route__link:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.24);
}

/* direct 按钮内图标与文字继承按钮前景色（自动对比度结果） */
.zdc-route--direct .zdc-route__icon,
.zdc-route--direct .zdc-route__name {
  color: inherit;
}

/* —— 6.3 图标与文字 —— */
.zdc-route__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--zdc-brand);
  background-color: currentColor;
  /* 下载图标：mask 裁剪出图形（缺省 mask 会显示为纯色块） */
  -webkit-mask: var(--zdc-i, var(--zdc-i-link)) no-repeat center / contain;
  mask: var(--zdc-i, var(--zdc-i-link)) no-repeat center / contain;
  transition: transform var(--zdc-t-fast) var(--zdc-ease);
}

.zdc-route__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.zdc-route__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--zdc-fg);
  font-weight: 550;
  letter-spacing: 0.005em;
}

/* 悬停时图标轻微右移，给予"可前往"的指向感 */
.zdc-card .zdc-route__link:hover .zdc-route__icon {
  transform: translateX(2px);
}

/* 主题常给外链追加 ↗ 角标，这里是全文件唯一允许 !important 的地方 */
.zdc-card .zdc-route__link::after,
.zdc-card .zdc-route__link::before,
.zdc-card .zdc-route__link > span::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
 * 7. 提取码（胶囊 + 等宽数字）
 * ============================================================ */

.zdc-route__code {
  /* order:-1 让提取码始终显示在最左（即使旧卡片 DOM 顺序为「按钮在前」也能兼容） */
  order: -1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--zdc-bh);
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--zdc-border);
  border-radius: 999px;
  background: var(--zdc-code-bg);
  transition: border-color var(--zdc-t-fast) var(--zdc-ease),
    box-shadow var(--zdc-t-fast) var(--zdc-ease);
}

.zdc-route__code:hover {
  border-color: color-mix(in srgb, var(--zdc-a) 40%, var(--zdc-border));
  box-shadow: 0 2px 8px -3px var(--zdc-shadow-c-2);
}

.zdc-route__code-label {
  font-size: 0.7857em;
  color: var(--zdc-fg-3);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.zdc-card .zdc-route__code-value.zdc-route__code-value {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--zdc-code-fg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.9285em;
  font-weight: 650;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 单击即全选，插件停用后也能快速手动复制 */
  user-select: all;
  -webkit-user-select: all;
}

/* 抹掉部分主题给 <code> 加的反引号伪元素 */
.zdc-card .zdc-route__code-value::before,
.zdc-card .zdc-route__code-value::after {
  content: none !important;
}

/* ============================================================
 * 8. 复制按钮（胶囊 + 图标 + 状态反馈）
 * ============================================================ */

.zdc-card .zdc-route__copy.zdc-route__copy {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;

  height: calc(var(--zdc-bh) - 8px);
  min-height: 28px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zdc-a) 92%, #ffffff 8%),
    var(--zdc-a)
  );
  color: #ffffff;
  color: contrast-color(var(--zdc-a));

  font-family: inherit;
  font-size: 0.8571em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 6px -2px color-mix(in srgb, var(--zdc-a) 45%, transparent);

  transition:
    filter var(--zdc-t-fast) var(--zdc-ease),
    background-color var(--zdc-t-fast) var(--zdc-ease),
    box-shadow var(--zdc-t-fast) var(--zdc-ease);
}

.zdc-card .zdc-route__copy.zdc-route__copy:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 4px 10px -3px color-mix(in srgb, var(--zdc-a) 55%, transparent);
}

.zdc-card .zdc-route__copy.zdc-route__copy:active {
  filter: brightness(0.94);
}

/* 脚本尚未接管（或被停用）时的降级形态：提示用户手动选中 */
.zdc-card .zdc-route__copy.zdc-route__copy:not([data-zdc-ready]) {
  background: transparent;
  border-color: var(--zdc-border);
  color: var(--zdc-fg-2);
  box-shadow: none;
  cursor: default;
}
.zdc-card .zdc-route__copy.zdc-route__copy:not([data-zdc-ready]):hover {
  transform: none;
  filter: none;
}

.zdc-route__copy::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--zdc-i-copy) no-repeat center / contain;
  mask: var(--zdc-i-copy) no-repeat center / contain;
}

/* 成功：跟随主题色 + 打勾 + 轻微 pop（与 Toast 成功色调一致） */
.zdc-card .zdc-route__copy[data-zdc-state="ok"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zdc-a) 88%, #ffffff 12%),
    color-mix(in srgb, var(--zdc-a) 72%, #000000 28%)
  );
  border-color: transparent;
  color: #fff;
  animation: zdc-pop 0.3s var(--zdc-ease);
}
.zdc-route__copy[data-zdc-state="ok"]::before {
  -webkit-mask-image: var(--zdc-i-check);
  mask-image: var(--zdc-i-check);
}

/* 失败：变红 */
.zdc-card .zdc-route__copy[data-zdc-state="fail"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--zdc-err) 90%, #ffffff 10%), var(--zdc-err));
  border-color: transparent;
  color: #fff;
  animation: zdc-pop 0.3s var(--zdc-ease);
}

@keyframes zdc-pop {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}


/* ============================================================
 * 10. 无障碍播报区
 * ============================================================ */

.zdc-card__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * 11. 焦点可见性（品牌色双环）
 * ============================================================ */

.zdc-card a:focus-visible,
.zdc-card button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--zdc-bg), 0 0 0 4px color-mix(in srgb, var(--zdc-a) 75%, transparent);
}

/* ============================================================
 * 12. 窄屏适配
 *     基础布局即「左信息 + 右按钮」横向一行（flex），无需容器查询；
 *     此处仅对视口 ≤460px 的紧凑场景做微调。
 * ============================================================ */

@media (max-width: 460px) {
  .zdc-card {
    --zdc-pad: 12px;
    gap: 10px 12px;
  }

  .zdc-card__icon {
    width: 30px;
    height: 30px;
  }

  /* 空间不足时按钮行占满整行（标题在上、按钮在下） */
  .zdc-card__routes {
    flex: 1 1 100%;
  }

  .zdc-card__routes > li {
    flex: 1 1 auto;
  }

  .zdc-route__code {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .zdc-route__code-label {
    display: none;
  }
}

/* 移动端触控目标不小于 44px */
@media (pointer: coarse) {
  .zdc-card {
    --zdc-bh: max(44px, var(--zdc-btn-h, 38px));
  }

  /* 触屏不启用卡片 hover 抬升（避免粘滞感） */
  .zdc-card:hover {
    transform: none;
  }
}

/* ============================================================
 * 13. 降低动效
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .zdc-card {
    animation: none;
  }

  .zdc-card *,
  .zdc-card *::before,
  .zdc-card *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .zdc-card:hover {
    transform: none;
  }
}

/* ============================================================
 * 14. 打印
 * ============================================================ */

@media print {
  .zdc-card {
    break-inside: avoid;
    border: 1px solid #999;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
  }

  .zdc-card .zdc-route__copy.zdc-route__copy {
    display: none;
  }

  /* 打印时把真实地址展开，纸质版仍可用 */
  .zdc-card .zdc-route__link::after {
    content: " (" attr(href) ")" !important;
    display: inline !important;
    font-size: 11px;
    color: #555;
    word-break: break-all;
  }
}

/* ============================================================
 * 15. 图标：mask-image + currentColor
 *     全部为自绘几何图形（monoline，24×24，stroke-width 2），
 *     不搬运任何厂商商标；服务商之间靠品牌色 + 名称文字区分。
 * ============================================================ */

.zdc-card [data-zdc-icon] {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--zdc-i, var(--zdc-i-package));
  mask-image: var(--zdc-i, var(--zdc-i-package));
}

.zdc-card {
  --zdc-i-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
  --zdc-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
  --zdc-i-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19a4.5 4.5 0 0 0 .5-8.97A6 6 0 0 0 6.2 9.2 4.5 4.5 0 0 0 6.5 19z'/%3E%3C/svg%3E");
  --zdc-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --zdc-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
  --zdc-i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4.5l2 3H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");
  --zdc-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
  --zdc-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='m21 16-4.5-4.5L7 20'/%3E%3C/svg%3E");
  --zdc-i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3z'/%3E%3C/svg%3E");
  --zdc-i-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
  --zdc-i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3Cpath d='m16 6 6 6-6 6'/%3E%3C/svg%3E");
  --zdc-i-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  --zdc-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  --zdc-i-game: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10a5 5 0 0 1 5 5v1a4 4 0 0 1-7 2.6L13 16h-2l-2 .6A4 4 0 0 1 2 14v-1a5 5 0 0 1 5-5z'/%3E%3Cpath d='M7 11v3'/%3E%3Cpath d='M5.5 12.5h3'/%3E%3Ccircle cx='16.5' cy='12' r='.6' fill='%23000'/%3E%3Ccircle cx='18.5' cy='14' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --zdc-i-font: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 10 4l6 16'/%3E%3Cpath d='M6.5 14h7'/%3E%3Cpath d='M18 20h3'/%3E%3C/svg%3E");
  --zdc-i-plugin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v3a2 2 0 0 0 4 0V3h5a1 1 0 0 1 1 1v5h-3a2 2 0 0 0 0 4h3v5a1 1 0 0 1-1 1h-5v-3a2 2 0 0 0-4 0v3H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --zdc-i-disk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m16.5 7.5-3 3'/%3E%3C/svg%3E");
  --zdc-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  --zdc-i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --zdc-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 7'/%3E%3C/svg%3E");
}

/* 资源图标（卡片头部） */
.zdc-card__icon[data-zdc-icon="package"] { --zdc-i: var(--zdc-i-package); }
.zdc-card__icon[data-zdc-icon="download"] { --zdc-i: var(--zdc-i-download); }
.zdc-card__icon[data-zdc-icon="cloud"] { --zdc-i: var(--zdc-i-cloud); }
.zdc-card__icon[data-zdc-icon="folder"] { --zdc-i: var(--zdc-i-folder); }
.zdc-card__icon[data-zdc-icon="file"] { --zdc-i: var(--zdc-i-file); }
.zdc-card__icon[data-zdc-icon="image"] { --zdc-i: var(--zdc-i-image); }
.zdc-card__icon[data-zdc-icon="video"] { --zdc-i: var(--zdc-i-video); }
.zdc-card__icon[data-zdc-icon="music"] { --zdc-i: var(--zdc-i-music); }
.zdc-card__icon[data-zdc-icon="code"] { --zdc-i: var(--zdc-i-code); }
.zdc-card__icon[data-zdc-icon="app"] { --zdc-i: var(--zdc-i-app); }
.zdc-card__icon[data-zdc-icon="book"] { --zdc-i: var(--zdc-i-book); }
.zdc-card__icon[data-zdc-icon="game"] { --zdc-i: var(--zdc-i-game); }
.zdc-card__icon[data-zdc-icon="font"] { --zdc-i: var(--zdc-i-font); }
.zdc-card__icon[data-zdc-icon="plugin"] { --zdc-i: var(--zdc-i-plugin); }
.zdc-card__icon[data-zdc-icon="disk"] { --zdc-i: var(--zdc-i-disk); }
.zdc-card__icon[data-zdc-icon="shield"] { --zdc-i: var(--zdc-i-shield); }

/* 线路按钮图标：统一为「下载」图标 —— 下载资源、官网首页等均可使用，
   服务商靠品牌色与名称文字区分；资源类型辨识交由卡片头部图标承担 */
.zdc-route__icon { --zdc-i: var(--zdc-i-link); }

/* ============================================================
 * 16. 服务商品牌色
 *     关闭「使用品牌色」时，head 会注入 .zdc-card .zdc-route.zdc-route
 *     的 --zdc-brand 覆盖（权重 0,3,0）压过下面这些 (0,2,0) 规则。
 *     --zdc-brand-ink：实心按钮用色 = 品牌色加深 18%，保证白字 ≥4.5:1
 * ============================================================ */

/* 前往访问按钮配色统一为主色（--zdc-a），不随服务商变化 */

/* 暗色下过深的品牌色需要提亮，否则边框与文字几乎不可见 */
/* ============================================================
 * 17. 复制反馈 Toast（挂在 body 上，不在 .zdc-card 作用域内）
 *     玻璃质感 + 语义色 + 上浮进场
 * ============================================================ */

.zdc-toast {
  /* Toast 挂在 body 上，不在 .zdc-card 作用域内：图标变量与主题色变量均需自带，
     否则取不到 head 注入的 --zdc-accent（--zdc-a 只在 .zdc-card 内定义） */
  --zdc-a: var(--zdc-accent, #2e7d32);
  --zdc-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 7'/%3E%3C/svg%3E");

  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 2147483000;
  transform: translateX(-50%) translateY(14px);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(90vw, 420px);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(24, 28, 34, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.4);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s var(--zdc-ease),
    transform 0.22s var(--zdc-ease),
    visibility 0s linear 0.22s;
}

/* 语义图标：成功 ✓ / 失败 ✗ */
.zdc-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--zdc-i-check);
  mask-image: var(--zdc-i-check);
}

.zdc-toast[data-zdc-show="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.22s var(--zdc-ease),
    transform 0.22s var(--zdc-ease),
    visibility 0s;
}

.zdc-toast[data-zdc-tone="ok"] {
  /* 成功色调跟随主题色（主题色加深保证白字对比度）；失败保持语义红 */
  background: color-mix(in srgb, var(--zdc-a) 62%, #000000 38%);
}

.zdc-toast[data-zdc-tone="fail"] {
  background: rgba(178, 34, 44, 0.92);
}

.zdc-toast[data-zdc-tone="fail"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .zdc-toast {
    transition-duration: 0.01ms;
    transform: translateX(-50%);
  }

  .zdc-toast[data-zdc-show="true"] {
    transform: translateX(-50%);
  }
}

@media print {
  .zdc-toast {
    display: none;
  }
}

/* ============================================================
 * 18. color-mix 不支持时的兜底（Firefox < 113 / Safari < 16.2）
 * ============================================================ */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .zdc-card {
    --zdc-preset-outline-surface: var(--zdc-bg);
    --zdc-preset-filled-surface: var(--zdc-fill);
    --zdc-preset-glass-surface: var(--zdc-fill);
    --zdc-preset-outline-border: var(--zdc-border);
  }

  .zdc-card .zdc-route__link.zdc-route__link {
    border-color: var(--zdc-border);
    background: var(--zdc-fill);
    box-shadow: none;
  }

  .zdc-card .zdc-route__link.zdc-route__link:hover {
    border-color: var(--zdc-brand);
    background: var(--zdc-fill-h);
  }

  .zdc-route--direct .zdc-route__link {
    background: var(--zdc-brand-ink, var(--zdc-brand));
  }

  .zdc-card .zdc-route__copy.zdc-route__copy {
    background: var(--zdc-a);
  }

  .zdc-card a:focus-visible,
  .zdc-card button:focus-visible {
    box-shadow: 0 0 0 2px var(--zdc-bg), 0 0 0 4px var(--zdc-a);
  }
}