/* ==========================================================================
   广场页通用样式（AIGC工具 / 模型 / 办公 / 培训 / 服务 / 联系）
   ========================================================================== */

/* ------------------------------- 页头 ---------------------------------- */
.plaza-hero {
  position: relative;
  padding: calc(var(--nav-h) + 4rem) 1rem 3rem;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 640px) {
  .plaza-hero { padding: calc(var(--nav-h) + 5rem) 1.5rem 3.5rem; }
}

.plaza-hero__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.08) 45%, transparent 70%);
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.plaza-hero__inner { position: relative; max-width: 56rem; margin: 0 auto; }

.plaza-hero__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  /* 【渐变字必须重做 —— 这是审计脚本测不到的一类问题】
     对比度脚本会跳过 -webkit-text-fill-color: transparent 的元素
     （技术上无法测），所以这类"渐变文字"永远显示 0 不达标，
     必须靠肉眼和截图验收。
     原来是 #60a5fa → #a78bfa → #22d3ee：
     这三个都是深色方案下"在黑底上发光"的霓虹色，
     亮度分别只有 0.36 / 0.31 / 0.55，
     压到 #f5f8fc（亮度 0.94）的浅底上，整句标题像褪了色。
     换成深蓝 → 靛紫 → 深青，两端对比度都在 5 以上，
     保留"科技渐变"的气质但能读清。 */
  background: linear-gradient(135deg, #1e40af, #5b21b6 55%, #0e7490);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (min-width: 640px) { .plaza-hero__title { font-size: 2.75rem; } }

.plaza-hero__sub {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 40rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .plaza-hero__sub { font-size: 1.0625rem; } }

.plaza-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.plaza-hero__count b {
  font-size: 2rem;
  font-weight: 800;
  /* 深色方案的 #60a5fa → #a78bfa（亮度 0.36 / 0.31）在浅底上看不清，
     换成 ink 深色端。这两处（.plaza-hero__count b / .plaza-hero__badge b）
     都是纯数字，必须清楚。 */
  background: linear-gradient(135deg, #1e40af, #5b21b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------- 标签页 -------------------------------- */
.plaza-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
}
.plaza-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.075);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.plaza-tab:hover { color: var(--text-primary); background: rgba(15, 23, 42, 0.075); }
.plaza-tab.is-active {
  color: var(--text-primary);
  background: linear-gradient(90deg, #2563eb, #9333ea);
  border-color: transparent;
}

/* ------------------------------- 卡片网格 ------------------------------ */
.plaza-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}
@media (min-width: 768px) { .plaza-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plaza-cards { grid-template-columns: repeat(3, 1fr); padding: 0 2rem 5rem; } }

/* 工具 / 办公 / 培训 产品卡 */
.pcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1.5rem;
  /* 与 --bg-card 保持一致。原来写死 rgba(17,24,39,0.6)，
     提亮底色后这些卡片会显得比周围暗一块，像没加载完。 */
  background: var(--bg-card);
  /* 描边加深 + 补阴影（理由同 .gcard）。去掉无效的 backdrop-filter。 */
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, transform 0.2s;
}
.pcard:hover { border-color: rgba(139, 92, 246, 0.32); transform: translateY(-2px); }

/* logo 与「名称 + 厂商」两行并排，改成 flex-start 让顶部对齐，
   否则厂商名换行时 logo 会上下漂 */
.pcard__head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }

/* 产品 logo 容器（56x56 / radius 12px）
   图标格固定为纯白底 —— 这是刻意的，不要换成主题变量。
   原因：多数 App 的 logo 图案本身是深色（Seamind / LibTV / seko / hailuo
   重着色后统一为 #1e293b），若容器跟随主题变深，深色图案会融进底色。
   实测对比度：深色图案在纯白底上 14.63:1，在生产深色卡片上仅 1.30:1。
   固定白底让同一份图片在深色/浅色两套主题下都清晰，无需维护两套资源。
   淡描边负责在浅色主题的白色卡片上勾出边界，避免图标格糊进卡片。 */
.pcard__logo {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* 等比铺满，不拉伸变形 */
.pcard__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 无 logo 资源时退化为首字标识（白底上用深字，保证可辨识） */
.pcard__logo-fallback {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  letter-spacing: 0;
}

.pcard__name { font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.pcard__en { font-size: 0.75rem; color: var(--text-muted); font-family: var(--mono, monospace); }

.pcard__vendor { font-size: 0.75rem; color: var(--text-secondary); }
.pcard__vendor span { color: var(--text-muted); }

/* 产品标语：卡片里最该被读到的一句，用主文字色和稍大的字重压住，
   和下面的正文拉开层次。原来没有这一层，标语混在描述里被埋掉了。 */
.pcard__slogan {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.pcard__desc {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 0.875rem;
}

/* 能力要点：代替原来那段「一句话堆完所有功能」的长描述。
   逐条列出来，读者可以直接扫，不用在一段话里找重点。 */
.pcard__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
}
.pcard__points li {
  position: relative;
  padding-left: 0.9375rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.pcard__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.6);
}

.pcard__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.25rem; }
.pcard__tag {
  font-size: 0.6875rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  color: var(--purple-ink);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.22);
  white-space: nowrap;
}

.pcard__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  /* 白字压蓝紫渐变。
     ★ 原来写的是 var(--text-primary)：深色主题下它是近白（对），
     但全站改浅色主题后该变量变成 #0d1526（近黑），压在渐变上对比度掉到 2:1 左右，
     按钮文字几乎看不清 —— office-plaza 与 tools-plaza 都受影响。
     实测白字在渐变两端分别为 5.17:1（#2563eb）与 4.90:1（#9333ea），均达 WCAG AA，
     且渐变主色是固定的，不再随主题变量漂移，所以直接写死白色。 */
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #9333ea);
  transition: opacity 0.18s;
}
.pcard__btn:hover { opacity: 0.88; }

/* 外链按钮：文字与箭头居中排列 */
.pcard__btn--ext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}
.pcard__btn-ext { width: 0.8125rem; height: 0.8125rem; flex: 0 0 auto; opacity: 0.9; }
.pcard__btn--ext:hover .pcard__btn-ext { opacity: 1; }

.pcard__btn--disabled {
  background: rgba(15, 23, 42, 0.05);
  /* 灰底上用中性深色，白字会看不见 —— 这条必须跟着背景一起覆盖 */
  color: var(--text-muted);
  pointer-events: none;
}

/* 说明：模型广场卡片样式已迁移到文件末尾「AI模型广场」区块，
   此处旧版 .mcard__price / .mcard__name / .mcard__unit 已移除，避免覆盖。 */

/* 培训卡的 COMING SOON 角标 */
.pcard--soon { position: relative; opacity: 0.72; }
.pcard__soon {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  white-space: nowrap;
}

/* --------------------------- 通用区块（特色/场景/路径） ---------------- */
.psec { padding: 3rem 0 4rem; }
.psec__inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .psec__inner { padding: 0 2rem; } }

.psec__head { text-align: center; margin-bottom: 2.5rem; }
.psec__title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
@media (min-width: 640px) { .psec__title { font-size: 1.75rem; } }
.psec__sub { font-size: 0.875rem; color: var(--text-secondary); }

/* 分组标题（按创作类型 / 按创作角色） */
.pgroup { margin-bottom: 2rem; }
.pgroup__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.pgroup__head::before {
  content: '';
  width: 3px;
  height: 0.875rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #3b82f6, #9333ea);
}

.ptile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .ptile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ptile-grid { grid-template-columns: repeat(3, 1fr); } }

.ptile {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.625rem;
  background: var(--bg-card);
  /* 白底描边太淡（合成对比度 1.11）看不见，加深并补一层轻阴影 */
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s;
}
.ptile:hover { border-color: rgba(139, 92, 246, 0.28); }
/* 磁贴图标：带渐变底色的圆角方块，与参考站一致 */
.ptile__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(147, 51, 234, 0.22));
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.ptile__name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.ptile__desc { font-size: 0.75rem; line-height: 1.7; color: var(--text-secondary); }
.ptile__tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-top: 0.5rem; }
.ptile__tag {
  font-size: 0.625rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 9999px;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.05);
  white-space: nowrap;
}

/* 带编号的步骤卡（培训路径 / 服务流程） */
.pstep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .pstep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pstep-grid { grid-template-columns: repeat(4, 1fr); } }

.pstep {
  padding: 1.25rem;
  border-radius: 0.625rem;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.pstep__icon { font-size: 1.25rem; margin-bottom: 0.5rem; }
.pstep__no {
  font-size: 0.6875rem;
  font-family: var(--mono, monospace);
  color: #818cf8;
  margin-bottom: 0.25rem;
}
.pstep__name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.pstep__desc { font-size: 0.75rem; line-height: 1.7; color: var(--text-secondary); }

/* 服务广场的分组大卡 */
.sgroup {
  border-radius: 0.75rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 1.5rem;
}
.sgroup__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
/* 分组图标：参考站为带渐变底色的圆角方块，纯 emoji 会显得发灰、不够醒目 */
.sgroup__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
  border: 1px solid rgba(15, 23, 42, 0.075);
}
.sgroup__name { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.sgroup__tag { font-size: 0.75rem; color: var(--text-secondary); }
.sgroup__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .sgroup__grid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------- 咨询合作 CTA ------------------------------ */
.pcta {
  max-width: 56rem;
  margin: 0 auto 5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(147, 51, 234, 0.12));
  border: 1px solid rgba(139, 92, 246, 0.22);
}
.pcta__icon { font-size: 2rem; margin-bottom: 1rem; }
.pcta__title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; }
.pcta__desc {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 42rem;
  margin: 0 auto 1.75rem;
}
.pcta__btn {
  display: inline-block;
  padding: 0.625rem 2rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  background: linear-gradient(90deg, #2563eb, #9333ea);
  transition: opacity 0.18s;
}
.pcta__btn:hover { opacity: 0.88; }

/* ------------------------------ 联系表单 ------------------------------- */
.cform {
  max-width: 48rem;
  margin: 0 auto 5rem;
  padding: 2rem;
  border-radius: 0.75rem;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(20px);
}
@media (min-width: 640px) { .cform { padding: 2.5rem; } }

.cform__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .cform__grid { grid-template-columns: repeat(2, 1fr); } }

.cform__field--full { grid-column: 1 / -1; }
.cform__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.cform__label .req { color: #f87171; margin-left: 0.125rem; }

.cform__checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cform__check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.075);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.cform__check input { position: absolute; opacity: 0; pointer-events: none; }
.cform__check.is-on {
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}

.cform textarea.input { min-height: 7rem; resize: vertical; }

.cform__submit {
  display: block;
  margin: 1.75rem auto 0;
  padding: 0.6875rem 3rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  background: linear-gradient(90deg, #2563eb, #9333ea);
  border: none;
  cursor: pointer;
  transition: opacity 0.18s;
}
.cform__submit:hover { opacity: 0.88; }
/* ==========================================================================
   参考站 zaai.world 对齐组件（tag / glass-card / 彩色渐变块 / 区块标题）
   数值均来自 Playwright 对参考站的计算样式实测
   ========================================================================== */

/* --- 标签：6 色，12px / 500 / 圆角9999 / 内边距 2px 10px / 无边框 ---
   【注意：这里是单横线 .tag-blue，与 theme.css 的双横线 .tag--blue
     是两套并存的同名配色，之前只改了 theme.css 那一套，漏了这里，
     所以广场页的标签仍然是"深底用的浅色字"，在浅底上糊成一片
     （实测 tag-cyan 只有 1.65、tag-amber 1.54）。
     这里统一改成引用 --*-ink 变量，以后换色只改 theme.css 一处。 */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.tag-blue   { color: var(--blue-ink);   background: rgba(37, 99, 235, 0.10); }
.tag-cyan   { color: var(--cyan-ink);   background: rgba(8, 145, 178, 0.10); }
.tag-purple { color: var(--purple-ink); background: rgba(124, 58, 237, 0.10); }
.tag-pink   { color: #9d174d;           background: rgba(219, 39, 119, 0.10); }
.tag-green  { color: var(--green-ink);  background: rgba(5, 150, 105, 0.10); }
.tag-amber  { color: var(--amber-ink);  background: rgba(180, 83, 9, 0.10); }

/* --- 玻璃卡：rgba(17,24,39,.6) / radius 16px / padding 32px --- */
.gcard {
  position: relative;               /* 作为 .soon-mask 的定位容器，缺失会导致遮罩盖满全屏 */
  background: var(--bg-card);
  border-radius: 16px;
  padding: 2rem;
  /* 【浅色方案的卡片必须靠阴影立起来】
     这些卡片原来只有 border、没有 box-shadow —— 因为深色底上
     "白 6% 的描边"就足够勾出边界了，不需要阴影。
     浅色底上反过来：白卡 + 白底，描边合成后对比度只有 1.13，
     肉眼完全看不见（实测 89 条边框里 89 条不可见），
     卡片边缘就彻底消失了。
     解法是两条腿走路：
       ① 把描边加深到 --border-strong（0.14），勉强勾出边界；
       ② 补一层冷色阴影，让卡片真正"浮"起来 —— 这是浅色界面的关键，
          没有阴影的白卡在白底上就是一滩平面。 */
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gcard--hover:hover {
  border-color: rgba(139, 92, 246, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.35);
}

/* --- 彩色渐变图标块：56x56 / radius 12px / 3xl emoji --- */
.gicon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  line-height: 1;
  flex-shrink: 0;
}
.grad-red-orange   { background: linear-gradient(to bottom right, #ef4444, #f97316); }
.grad-blue-cyan    { background: linear-gradient(to bottom right, #3b82f6, #06b6d4); }
.grad-purple-pink  { background: linear-gradient(to bottom right, #a855f7, #ec4899); }
.grad-amber-orange { background: linear-gradient(to bottom right, #f59e0b, #f97316); }
.grad-cyan-blue    { background: linear-gradient(to bottom right, #06b6d4, #3b82f6); }
.grad-blue-indigo  { background: linear-gradient(to bottom right, #3b82f6, #6366f1); }
.grad-emerald-teal { background: linear-gradient(to bottom right, #059669, #14b8a6); }

/* --- 分组头：图标 + 标题 + 副标签 --- */
.ghead { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ghead__name { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.ghead__sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; line-height: 1.4; }

/* --- 内嵌服务项：border rgba(15, 23, 42, 0.06) / bg rgba(15, 23, 42, 0.03) / radius 12px / p-4 --- */
.gitem {
  border-radius: 0.75rem;
  /* 这是个"浅灰内嵌块"：底色 0.03 + 边框 0.06 叠在白卡上，
     合成后与卡片只差 1.0，等于完全不存在。
     浅色方案里这类嵌套块必须把两个值都抬上来才看得出层次。 */
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.045);
  padding: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gitem--hover:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.25);
}
.gitem__title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.gitem__desc { font-size: 0.875rem; line-height: 1.625; color: var(--text-secondary); }
.gitem__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* 单卡锁定：.soon-mask 是 position:absolute; inset:0，
   需要一个定位上下文，否则会盖住整个页面。
   .gcard 早已是 relative，.gitem 原先不是，这里补上。 */
.gitem--soon { position: relative; }

/* 小卡片上的遮罩：
   原来整组遮罩的锁图标是 3.5rem 居中大圆，放进高约 12rem 的子卡里会顶满、
   把服务名正好盖住 —— 服务名恰恰是唯一必须读到的信息。
   现在锁已改为右下角 1.75rem 角标（见 .soon-mask__lock），
   这里只需要把圆角对齐子卡、并把角标再缩一档即可。 */
.soon-mask--item { border-radius: 0.75rem; }
.soon-mask--item .soon-mask__lock { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
.soon-mask--item .soon-mask__text { font-size: 0.6875rem; right: 2.375rem; bottom: 0.8125rem; }
.soon-mask--item .soon-mask__badge { top: 0.75rem; right: 0.75rem; }

/* 锁定卡片的图标+名称浮在遮罩之上。
   仍然保留这个层级，但目的变了：模糊只有 3px，标题其实已经可读；
   提到 11 层是为了「绝对确保」标题不受底色发白影响 —— 它是锁定卡里
   唯一必须清楚的信息（用户得知道被锁的是什么）。
   注意锁角标在遮罩内部（z-index 10），角标位于右下角、
   标题位于左上，两者不重叠，不需要再调层级。 */
.gitem__head--above {
  position: relative;
  z-index: 11;
}

/* --- 小号渐变按钮（服务项「了解详情」）--- */
.gbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
  transition: opacity 0.18s;
}
.gbtn:hover { opacity: 0.9; }
.gbtn--cyan-blue   { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
.gbtn--purple-pink { background: linear-gradient(90deg, #a855f7, #ec4899); }

/* --- 区块标题（36px / 700 / letter-spacing 3.6px，参考站 .section-title）--- */
.psec__title--ref {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.11;
  color: var(--text-primary);
}

/* --- 服务网格：2 列，云服务跨 2 列 --- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-span2 { grid-column: 1 / -1; }

/* --- 培训卡：顶部 4px 渐变条 + 内容区 --- */
.trcard {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.trcard--hover:hover {
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -14px rgba(59, 130, 246, 0.4);
}
.trcard__bar { height: 4px; flex-shrink: 0; }
.trcard__body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
@media (max-width: 639px) { .trcard__body { padding: 1.5rem; } }

.trcard__name { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.trcard__sub { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.125rem; }
.trcard__desc { font-size: 0.875rem; line-height: 1.625; color: var(--text-secondary); margin-bottom: 1.25rem; }

/* 培训卡图标带外发光 */
.trcard .gicon { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5); }

/* --- COMING SOON 遮罩 ---
   【设计目标已改变：从「盖住」改成「透出」】

   原来的做法是 18px 强模糊 + 86% 不透明底，把底层内容彻底打散成色块。
   问题是：用户只看到一块写着「即将上线」的白板，完全不知道锁的是什么 ——
   而锁定态的信息价值恰恰在于「让人看见这里有什么、以后能买什么」。
   看不见内容的锁，等于把商品藏在柜子里还挂把锁，只剩挫败感。

   【为什么不能用 blur，哪怕只有 3px】
   实测过 blur(3px)：20px 的课程名糊成一片、14px 的简介完全读不出来，
   连「AIGC应用工程师」都认不出。blur 是按像素半径做卷积，
   12px 的字承受 3px 半径就直接失去字形结构了。
   而降低模糊到 1px 又几乎看不出效果，等于白加。

   所以这里**完全不用 blur**，改用下面三件事表达「锁定」：
     1) saturate(55%) 降饱和 —— 彩色图标、渐变按钮、标签统统褪成灰调。
        saturate 只改颜色不改几何，文字保持完全锐利可读。
     2) 半透明白纱 0.34 —— 整块发白，和旁边正常卡一眼能分开，
        但不会把文字洗掉。
     3) 虚线内描边 + 角标 —— 明确的「这块被围起来锁住了」视觉语言，
        不依赖文字，弱视用户也能从形状上分辨。

   交互的彻底锁死由 CSS 的 .is-locked 与 JS 的 lockRegion() 负责，
   与视觉表达完全解耦 —— 改成多清晰都不影响「点不到」。 */
.soon-mask {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* 只降饱和 + 极轻微提亮，绝不模糊：文字必须保持清晰可读。
     saturate 0.55 → 0.42：0.55 时绿色图标还留着明显色相，
     和旁边正常卡的差别不够一眼可辨；0.42 时基本退成灰调，
     「这张和别的不一样」的直觉更强，而文字是深灰不受影响（仍清晰）。 */
  backdrop-filter: saturate(42%) brightness(1.01);
  -webkit-backdrop-filter: saturate(42%) brightness(1.01);
  /* 半透明白纱：0.86（看不见内容）→ 0.36（能读但明显发白） */
  background: rgba(248, 250, 253, 0.36);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  /* 虚线内框：用形状表达「被围起来/被锁住」，不完全依赖文字和色彩 ——
     这样即使色觉障碍用户也能看出这不是普通卡片。
     用 outline + outline-offset 而不是 box-shadow:inset：
       · box-shadow 在 rounded 容器里会被裁成四角有缺口的弧线，不够规整
       · outline 会跟随圆角自动收缩（现代浏览器），线宽也更稳定，
         且不占用盒模型空间（不会把内容挤动 1px）。 */
  outline: 2px dashed rgba(100, 116, 139, 0.32);
  outline-offset: -8px;
  border-radius: inherit;
  /* 遮罩自己吞掉所有鼠标事件 —— 挡住下层，同时不把点击透传给父级。
     注意这里不能用 pointer-events:none，否则点击会穿透到下面的按钮。 */
  cursor: not-allowed;
  user-select: none;
}

/* 遮罩内的锁形徽章：改成小尺寸贴在右下角，
   不再占据卡片正中 —— 正中放一个大锁会把课程名正好盖住，
   而课程名是这张卡唯一必须让人读到的东西。
   锁 + 文案合成一枚"角标"，信息层级让位于内容。 */
.soon-mask__lock {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.055);
  border: 1px solid rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
}
.soon-mask__text {
  position: absolute;
  right: 2.75rem;
  bottom: 0.9375rem;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  white-space: nowrap;
}
.soon-mask__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--amber-ink);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  /* 徽章在遮罩之上但需要自己接收鼠标事件的语义是「说明」，
     不接收 —— 遮罩统一接管（见 .soon-mask 的 cursor）。 */
  pointer-events: none;
  /* 白纱是 0.36 半透明的，徽章如果直接压在卡片标题上会互相干扰；
     加一层不透明底（与卡片同色系）让徽章自成一块，不与底层文字糊在一起。 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}

/* 窄屏下的徽章：375px 时卡片宽 343，标题「AIGC应用工程师」正好排到右上角，
   与 top:1rem / right:1rem 的徽章重叠（实测截图里两个文字压在一起）。
   把徽章缩一档并贴到最右上，同时给卡片标题预留右侧空间 —— 
   只缩徽章不够，因为标题是 20px 的大字，占位本身就宽。 */
@media (max-width: 479px) {
  .soon-mask__badge {
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.1875rem 0.5rem;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}

/* ==========================================================================
   锁定态：看得见，但点不到也聚焦不到
   ==========================================================================

   【为什么单靠遮罩不够】
   遮罩只挡「鼠标点击」。实测（playwright 探针）发现：
     · 鼠标点「了解详情」→ 命中的是 DIV.soon-mask，确实跳不了 ✅
     · 但按 Tab 键 → 焦点照样进得去底层 <a>，label 会显示「了解详情」，
       回车就直接跳到 /course/aigc 了 ❌
   也就是说锁定只是在视觉上成立，键盘用户和读屏用户完全不受限制。

   【三条一起做才算真锁住】
     1) pointer-events:none —— 鼠标穿透不了（这是兜底，主遮挡靠 .soon-mask）
     2) tabindex="-1" —— 退出 Tab 焦点序列（由 JS 的 _lockable 统一设置，
        纯 CSS 做不到；CSS 的 visibility/display 会把内容一起隐藏，不可用）
     3) aria-disabled + aria-label —— 读屏用户听到「暂未开放」，而不是
        「了解详情，链接」，避免把人引到一个注定失败的操作上

   【为什么不用 <button disabled> 替换 <a>】
   那样确实天然不可聚焦，但要改渲染逻辑与 href，且 `disabled` 按钮不参与
   布局流时样式会变；用 tabindex="-1" + aria-disabled 是链接场景的标准做法
   （WAI-ARIA 对「禁用链接」的推荐写法就是 aria-disabled）。

   【关键：内容必须仍然可见】
   这里绝不能写 opacity:0 / visibility:hidden / display:none ——
   需求是「能看到后面锁上的东西是什么，但点不到」。
   所以只摘掉交互能力，不动可见性。 */
.soon-mask,
.soon-mask * {
  pointer-events: auto;      /* 遮罩自身接管全部鼠标事件 */
}
/* 被锁定容器内的可交互元素：鼠标事件全部作废。
   用 :is() 一次覆盖链接与按钮，避免漏掉将来新加的控件类型。 */
.is-locked :is(a, button, input, select, textarea, [tabindex]),
.is-locked [data-locked-ctl] {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
/* 锁定容器本身也给出「不可操作」的光标提示 ——
   否则用户把鼠标移到卡片空白处看到的还是普通箭头，
   会怀疑「是不是只有按钮不能点，卡片能点」。 */
.is-locked { cursor: not-allowed; }

/* 锁定容器内的悬停效果一律压掉：
   卡片上浮、边框变色、按钮变亮这些都是「可操作」的暗示，
   留着会让人以为能点。 */
.is-locked:hover { transform: none !important; }
.is-locked :is(a, button):hover { opacity: 1 !important; }

/* 锁定容器内的焦点圈：即便有残留焦点（比如浏览器恢复表单状态），
   也不显示焦点环，避免误导。 */
.is-locked :is(a, button):focus,
.is-locked :is(a, button):focus-visible { outline: none !important; }

/* --- 大号渐变按钮（培训卡「了解详情」）--- */
.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
  transition: opacity 0.18s;
}
.tbtn:hover { opacity: 0.9; }
.tbtn svg { width: 1rem; height: 1rem; }
.tbtn--blue-cyan    { background: linear-gradient(90deg, #2563eb, #06b6d4); }
.tbtn--purple-pink  { background: linear-gradient(90deg, #9333ea, #ec4899); }
.tbtn--emerald-teal { background: linear-gradient(90deg, #059669, #14b8a6); }
.tbtn--amber-orange { background: linear-gradient(90deg, #d97706, #f97316); }

/* --- 流程步骤卡（服务流程）--- */
.pstep--ref {
  position: relative;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s;
}
.pstep--ref:hover { border-color: rgba(139, 92, 246, 0.3); transform: translateY(-2px); }
.pstep--ref .pstep__icon { font-size: 1.75rem; line-height: 1; margin-bottom: 0.75rem; }
.pstep__no--ref { font-size: 0.75rem; font-weight: 700; color: var(--blue-ink); letter-spacing: 0.05em; }
.pstep__name--ref { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0.25rem 0 0.5rem; }
.pstep__desc--ref { font-size: 0.8125rem; line-height: 1.7; color: var(--text-secondary); }

/* ==========================================================================
   AI模型广场（对齐参考站 zaai.world/model-plaza）
   卡片实测：w=389 h=330 bg=rgba(17,24,39,0.6) radius=16px padding=24px
   网格：md 两列 / lg 三列，gap 24px
   ========================================================================== */

/* --- 网格 --- */
.mdl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem 6rem;
}
@media (min-width: 768px)  { .mdl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mdl-grid { grid-template-columns: repeat(3, 1fr); padding: 0 2rem 6rem; } }

/* --- 筛选按钮组（8 个：全部 + 7 厂商）--- */
.mdl-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
@media (min-width: 640px) { .mdl-filter { gap: 0.75rem; } }

.mdl-filter__btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.mdl-filter__btn:hover { color: var(--text-primary); border-color: rgba(59, 130, 246, 0.3); }
.mdl-filter__btn.is-active {
  color: var(--text-primary);
  background: linear-gradient(90deg, #2563eb, #9333ea);
  border-color: transparent;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
}

/* --- 模型卡 --- */
.mcard {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 1.5rem;
  background: var(--bg-card);
  /* 同 .gcard：描边加深 + 补阴影，否则白卡在白底上没有边界 */
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  /* backdrop-filter 在实色底上没有任何效果（背后没有任何东西可模糊），
     但会让浏览器额外建一个合成层、拖慢长列表滚动。
     实测模型广场一屏 89 张卡片都挂了这个属性。去掉。 */
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.mcard:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(37, 99, 235, 0.25);
}

/* 卡头：厂商 logo 左，价格 tag 右 */
.mcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* 模型厂商 logo
   同样固定白底 —— 理由见 .pcard__logo 上方注释。
   模型广场的厂商标（deepseek / qwen / zhipu / kling / moonshot）多为深色图案，
   跟随主题变深会直接融进深色卡片，故统一垫白底。 */
.mcard__logo {
  height: 2.25rem;          /* 参考站 h-9 = 36px */
  width: auto;
  max-width: 120px;         /* 参考站 max-w-[120px] */
  object-fit: contain;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: 0.5rem;
  padding: 0.28rem 0.4rem;
  box-sizing: border-box;   /* 用 border-box，padding 从 36px 内扣，不撑高卡头 */
}
.mcard__price {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 2px 10px;
  border-radius: 9999px;
  /* 同样是深色方案留下的浅蓝 #60a5fa（在浅底上 2.27），换 ink 色 */
  color: var(--blue-ink);
  background: rgba(37, 99, 235, 0.10);
}

/* 模型名 */
.mcard__name {
  font-size: 1.125rem;      /* 参考站 text-lg = 18px */
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 0.25rem;
  word-break: break-all;
}

/* 输出价 · 计价单位 行 */
.mcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.mcard__meta span { font-size: 0.75rem; color: var(--text-muted); }
.mcard__meta .dot { color: var(--text-faint); }

/* 描述：最多 3 行（参考站 line-clamp-3） */
.mcard__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.3125rem;    /* 3 行高度，保证同排卡片对齐 */
}

/* 能力标签组 */
.mcard__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

/* 快速体验按钮 */
.mcard__foot { margin-top: auto; }
.mcard__btn {
  display: block;
  width: 100%;
  padding: 0.625rem 0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  /* 【渐变底上的文字必须是白色】
     这里原来是 --text-primary，深色方案下它是近白色所以没问题；
     换成浅色方案后这个变量变成深墨 rgb(13,21,38)，
     压在 #2563eb→#9333ea 的渐变上对比度只有 1.6 左右，按钮字基本糊了。
     凡是 background 是彩色/渐变的，color 一律不能跟主题变量走。 */
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #9333ea);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
  transition: background 0.18s, opacity 0.18s;
}
.mcard__btn:hover { background: linear-gradient(90deg, #3b82f6, #a855f7); }

/* 未登录态按钮
   仍然可点，但视觉降级为「次要操作」，点击后引导登录而不是直接跳去外部站点。
   这样既让访客一眼看出这里需要账号，又不会给人「按钮坏了」的感觉。 */
.mcard__btn--locked {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: none;
}
.mcard__btn--locked:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.09);
  border-color: rgba(59, 130, 246, 0.4);
}

/* 停用态按钮：功能整体关闭时使用（当前「快速体验」就是这个状态）
   与 --locked 的区别：那个还能点，这个真的点不了。
   所以要三件事一起做，缺一个就会出现「看着灰、实际能点」的假象：
     1) 视觉：降到接近卡片底色，文字弱化，不再有渐变和投影
     2) 交互：cursor 用 not-allowed，悬停不给任何高亮反馈
     3) 语义：配合 <button disabled>，浏览器自动屏蔽点击、移出 Tab 焦点顺序 */
.mcard__btn--off {
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.04);
  /* 边框加深：这是"不可用"态的按钮，本来就该显得弱，
     但 0.075 合成后只有 1.0，等于没有边框，
     看起来像一块什么都没有的空白而不是一个禁用的按钮。 */
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: none;
  cursor: not-allowed;
  user-select: none;
}
/* 显式压掉悬停样式：万一同区块里还有 :hover 规则命中，禁用态也不能变亮 */
.mcard__btn--off:hover {
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.04);
  /* 这里原本把 border-color 压回 0.075，等于把上面刚加深的边框又覆盖掉，
     禁用态的按钮框在浅底上还是看不见。与基础值保持一致。 */
  border-color: rgba(15, 23, 42, 0.16);
}
/* 禁用按钮不该出现焦点圈（它本来也进不了 Tab 序列，这里防的是程序化 focus） */
.mcard__btn--off:focus-visible { outline: none; }

/* 键盘操作时按钮也是 <button>，保留统一焦点圈 */
.mcard__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 空态 */
.mdl-empty {
  grid-column: 1 / -1;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Hero 统计徽标（已合作模型 43 个国内模型）*/
.plaza-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.075);
  background: rgba(15, 23, 42, 0.04);
}
.plaza-hero__badge span { font-size: 0.875rem; color: var(--text-secondary); }
.plaza-hero__badge b {
  font-size: 0.875rem;
  font-weight: 700;
  /* 深色方案的 #60a5fa → #a78bfa（亮度 0.36 / 0.31）在浅底上看不清，
     换成 ink 深色端。这两处（.plaza-hero__count b / .plaza-hero__badge b）
     都是纯数字，必须清楚。 */
  background: linear-gradient(135deg, #1e40af, #5b21b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 筛选按钮上的数量徽标（仅本站增强，参考站无）*/
.mdl-filter__n {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.55;
}
.mdl-filter__btn.is-active .mdl-filter__n { opacity: 0.8; }