/*!
 * auok-link-card.css — 超级链接卡片前台样式
 * 新写入 class 为 alc-*；同时认旧文章 zdc-*。
 * 默认强调色 #1F6F8B。契约见 docs/CONTRACT.md。
 */

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

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

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

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

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

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

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

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

  /* —— 1.6 当前生效风格（默认描边；head 注入 :not([data-style]) 可整体切换）—— */
  --alc-surface: var(--alc-preset-outline-surface);
  --alc-border-c: var(--alc-preset-outline-border);
  --alc-shadow: var(--alc-preset-outline-shadow);
  --alc-backdrop: var(--alc-preset-outline-backdrop);
  --alc-shadow-hover:
    0 2px 4px var(--alc-shadow-c),
    0 20px 44px -20px var(--alc-shadow-c-2);
  /* 悬浮边框：优先用设置色；未注入时用主题色与卡片边框混合，绝不混入正文色（那会变成黑边） */
  --alc-hover-border-fallback: color-mix(in srgb, var(--alc-a) 62%, var(--alc-border));
  /* 复制色：填充用设置色本身；边沿只掺一点黑，勾出轮廓 */
  --alc-copy-ok: var(--alc-copy-ok-color, var(--alc-a));
  --alc-copy-ok-edge: color-mix(in srgb, var(--alc-copy-ok) 86%, #000000 14%);
  --alc-copy-ok-shade: color-mix(in srgb, var(--alc-copy-ok) 88%, #000000 12%);
}

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

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

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

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

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

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

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

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

:is(.alc-card, .zdc-card) {
  container-type: inline-size;
  container-name: alc;

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

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

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

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

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

/* 桌面端 hover：卡片位置固定（不位移），阴影加深 + 边框改成设置色（默认主题色） */
@media (hover: hover) and (pointer: fine) {
  :is(.alc-card, .zdc-card):hover {
    transform: none;
    box-shadow: var(--alc-shadow-hover, var(--alc-shadow));
    border-color: var(--alc-hover-border, var(--alc-hover-border-fallback));
    border-top-color: var(--alc-hover-border, var(--alc-hover-border-fallback));
  }
}

:is(.alc-card, .zdc-card) *,
:is(.alc-card, .zdc-card) *::before,
:is(.alc-card, .zdc-card) *::after {
  box-sizing: border-box;
}

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

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

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

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



:is(.alc-card__meta, .zdc-card__meta) {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

/* 标题是伪装成标题的加粗文字（span），不是 h1–h6。
 * 旧文章若仍是 h3，这里用 all:unset + 杀掉伪元素，挡住主题的标题装饰条。 */
:is(.alc-card, .zdc-card) :is(.alc-card__title, .zdc-card__title):is(.alc-card__title, .zdc-card__title) {
  all: unset;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-indent: 0;
  font-size: 1.0625em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--alc-fg);
  word-break: break-word;
}

:is(.alc-card, .zdc-card) :is(.alc-card__title, .zdc-card__title)::before,
:is(.alc-card, .zdc-card) :is(.alc-card__title, .zdc-card__title)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

:is(.alc-card, .zdc-card) :is(.alc-card__desc, .zdc-card__desc):is(.alc-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(--alc-fg-2);
  word-break: break-word;
  /* 描述过长时最多 2 行截断，保持与右侧按钮同高对齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:is(.alc-card, .zdc-card) :is(.alc-card__title, .zdc-card__title):empty,
:is(.alc-card, .zdc-card) :is(.alc-card__desc, .zdc-card__desc):empty {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* —— 6.2 direct：品牌色实心主按钮 ——
 * 背景 = 品牌色加深 18%（--alc-brand-ink）；文字用 contrast-color() 自动取黑/白，
 * 无论主色是深绿还是纯白，文字与背景都不会融合。 */
:is(.alc-route--direct, .zdc-route--direct) :is(.alc-route__link, .zdc-route__link) {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--alc-brand-ink, var(--alc-brand)) 88%, #ffffff 12%),
    var(--alc-brand-ink, var(--alc-brand))
  );
  color: #ffffff;
  color: contrast-color(var(--alc-brand-ink, var(--alc-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(--alc-brand) 55%, transparent);
}

:is(.alc-route--direct, .zdc-route--direct) :is(.alc-route__link, .zdc-route__link):hover {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--alc-brand-ink, var(--alc-brand)) 94%, #ffffff 6%),
    color-mix(in srgb, var(--alc-brand-ink, var(--alc-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(--alc-brand) 60%, transparent);
}

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

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

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

:is(.alc-route__body, .zdc-route__body) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

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

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

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

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

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

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

:is(.alc-card, .zdc-card) :is(.alc-route__code-value, .zdc-route__code-value):is(.alc-route__code-value, .zdc-route__code-value) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--alc-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> 加的反引号伪元素 */
:is(.alc-card, .zdc-card) :is(.alc-route__code-value, .zdc-route__code-value)::before,
:is(.alc-card, .zdc-card) :is(.alc-route__code-value, .zdc-route__code-value)::after {
  content: none !important;
}

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

:is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is(.alc-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(--alc-bh) - 8px);
  min-height: 28px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--alc-copy-ok-edge);
  border-radius: 999px;
  background: var(--alc-copy-ok);
  color: #ffffff;

  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.16),
    inset 0 -1px 0 var(--alc-copy-ok-shade),
    0 2px 6px -2px color-mix(in srgb, var(--alc-copy-ok) 40%, transparent);

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

:is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is(.alc-route__copy, .zdc-route__copy):hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 var(--alc-copy-ok-shade),
    0 4px 10px -3px color-mix(in srgb, var(--alc-copy-ok) 50%, transparent);
}

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

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

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

/* 成功：填充仍是设置色；边框保持浅暗边，不要整块掺黑 */
:is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is(.alc-route__copy, .zdc-route__copy):is([data-alc-state="ok"], [data-zdc-state="ok"]) {
  background: var(--alc-copy-ok) !important;
  border-color: var(--alc-copy-ok-edge);
  color: #fff;
  animation: alc-pop 0.3s var(--alc-ease);
}
:is(.alc-route__copy, .zdc-route__copy):is([data-alc-state="ok"], [data-zdc-state="ok"])::before {
  -webkit-mask-image: var(--alc-i-check);
  mask-image: var(--alc-i-check);
}

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

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


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

:is(.alc-card__live, .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. 焦点可见性（品牌色双环）
 * ============================================================ */

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

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

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

  :is(.alc-card__icon, .zdc-card__icon) {
    width: 30px;
    height: 30px;
  }

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

  :is(.alc-card__routes, .zdc-card__routes) > li {
    flex: 1 1 auto;
  }

  :is(.alc-route__code, .zdc-route__code) {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  :is(.alc-route__code-label, .zdc-route__code-label) {
    display: none;
  }
}

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

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

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

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

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

  :is(.alc-card, .zdc-card):hover {
    transform: none;
  }
}

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

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

  :is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is(.alc-route__copy, .zdc-route__copy) {
    display: none;
  }

  /* 打印时把真实地址展开，纸质版仍可用 */
  :is(.alc-card, .zdc-card) :is(.alc-route__link, .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），
 *     不搬运任何厂商商标；服务商之间靠品牌色 + 名称文字区分。
 * ============================================================ */

:is(.alc-card, .zdc-card) :is([data-alc-icon], [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(--alc-i, var(--alc-i-package));
  mask-image: var(--alc-i, var(--alc-i-package));
}

:is(.alc-card, .zdc-card) {
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
  --alc-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");
}

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

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

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

/* 传送阵 / 线路按钮配色统一为主色（--alc-a），不随服务商变化 */

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

:is(.alc-toast, .zdc-toast) {
  /* Toast 挂在 body 上，不在 :is(.alc-card, .zdc-card) 作用域内：图标变量与主题色变量均需自带，
     否则取不到 head 注入的 --alc-accent（--alc-a 只在 :is(.alc-card, .zdc-card) 内定义） */
  --alc-a: var(--alc-accent, #1F6F8B);
  --alc-copy-ok: var(--alc-copy-ok-color, var(--alc-a));
  --alc-copy-ok-edge: color-mix(in srgb, var(--alc-copy-ok) 86%, #000000 14%);
  --alc-copy-ok-shade: color-mix(in srgb, var(--alc-copy-ok) 88%, #000000 12%);
  --alc-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --alc-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(--alc-ease),
    transform 0.22s var(--alc-ease),
    visibility 0s linear 0.22s;
}

/* 语义图标：成功 ✓ / 失败 ✗ */
:is(.alc-toast, .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(--alc-i-check);
  mask-image: var(--alc-i-check);
}

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

:is(.alc-toast, .zdc-toast):is([data-alc-tone="ok"], [data-zdc-tone="ok"]) {
  background: var(--alc-copy-ok) !important;
  border-color: var(--alc-copy-ok-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 var(--alc-copy-ok-shade),
    0 12px 32px -10px rgba(0, 0, 0, 0.28);
}

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

:is(.alc-toast, .zdc-toast):is([data-alc-tone="fail"], [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) {
  :is(.alc-toast, .zdc-toast) {
    transition-duration: 0.01ms;
    transform: translateX(-50%);
  }

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

@media print {
  :is(.alc-toast, .zdc-toast) {
    display: none;
  }
}

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

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

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

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

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

  :is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is(.alc-route__copy, .zdc-route__copy) {
    background: var(--alc-copy-ok, var(--alc-a));
    border-color: rgba(0, 0, 0, 0.16);
  }

  :is(.alc-card, .zdc-card) :is(.alc-route__copy, .zdc-route__copy):is([data-alc-state="ok"], [data-zdc-state="ok"]) {
    background: var(--alc-copy-ok, var(--alc-a));
    border-color: rgba(0, 0, 0, 0.16);
  }

  :is(.alc-toast, .zdc-toast):is([data-alc-tone="ok"], [data-zdc-tone="ok"]) {
    background: var(--alc-copy-ok, var(--alc-a));
    border-color: rgba(0, 0, 0, 0.16);
  }

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