/* ==========================================================
   鲲鹏AI · 全站设计系统（Design System）
   参考腾讯云 / 阿里云官网的排版与视觉规范，统一全站。

   设计原则（为什么原版有"AI 感"）：
   1. 字号阶梯混乱 —— 原站出现 19 种字号（11/12/12.5/13/13.5/14/14.5/15/15.5/16/17/18/19/20/21/22/24/26/30/34px）
      → 大厂只用 7 级：12 / 13 / 14 / 16 / 20 / 24 / 32
   2. 字重滥用 —— 700 用了 27 次、800 用了 5 次
      → 中文正文只用 400，标题 500/600，最多 600
   3. 彩色渐变图标块 —— 13 处 linear-gradient + 8 处 radial-gradient 做装饰底
      → 大厂用「单色 + 中性灰底」，颜色只出现在主色一处
   4. 阴影过重 —— 12 种不同阴影
      → 只保留 2 级：卡片常态 0 1px 2px，hover 0 6px 16px
   5. 圆角不统一 —— 14 种圆角值
      → 统一 4 / 8 / 12 / 9999 四档
   6. emoji 图标 —— ✂ ◐ ▣ 💡 🏮 等字符当图标
      → 换成 CSS 几何图形或单色线性符号
   ========================================================== */

:root {
  /* ---------- 品牌与中性色（大厂灰蓝体系） ---------- */
  --brand: #0052d9;              /* 腾讯云主蓝，比原 #1f76f3 更沉稳 */
  --brand-hover: #003cab;
  --brand-weak: #ecf2fe;
  --brand-border: #bed6fb;

  --ink-1: rgba(0, 0, 0, .9);    /* 标题 */
  --ink-2: rgba(0, 0, 0, .75);   /* 正文 */
  --ink-3: rgba(0, 0, 0, .56);   /* 次要 */
  --ink-4: rgba(0, 0, 0, .38);   /* 占位/禁用 */
  --line: #e7e9ec;
  --line-soft: #f0f1f3;
  --bg-page: #ffffff;
  --bg-sub: #f7f8fa;
  --bg-hover: #f4f5f7;

  /* ---------- 字号阶梯（7 级，全站唯一来源） ---------- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;

  /* ---------- 字重（中文只用 400/500/600） ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* ---------- 圆角（4 档） ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-full: 9999px;

  /* ---------- 阴影（2 级） ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-2: 0 6px 16px rgba(0, 0, 0, .08);

  /* ---------- 间距（8pt 网格） ---------- */
  --sp-section: 72px;

  /* 兼容旧变量名，避免全站改引用 */
  --blue: var(--brand);
  --blue-hover: var(--brand-hover);
  --text-main: var(--ink-1);
  --text-sub: var(--ink-3);
}

/* ==========================================================
   1. 基础排版
   ========================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-14);
  line-height: 1.75;              /* 中文正文标准行高 1.75 */
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum";   /* 数字等宽，大厂细节 */
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink-1);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: -.01em;         /* 大标题收紧字距 */
}

p { margin: 0; color: var(--ink-2); }

/* 数字强调：全站数字用等宽表格数字，视觉更整齐 */
b, strong, .num { font-variant-numeric: tabular-nums; }

/* ==========================================================
   2. 容器与栅格（大厂标准：1200 居中，间距 24）
   ========================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================
   3. 顶部导航（大厂做法：白底细边、hover 无位移、激活用色块不用下划线）
   ========================================================== */
.app-nav { gap: 4px; }

.app-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  font-weight: var(--fw-normal);
  color: var(--ink-2);
  transition: color .18s, background-color .18s;
}

.app-nav a:hover {
  color: var(--brand);
  background: transparent;
}

/* 激活态：品牌色文字 + 浅蓝底，不用下划线（更干净） */
.app-nav a.is-active {
  color: var(--brand);
  background: var(--brand-weak);
  font-weight: var(--fw-medium);
}

.app-nav a.is-active::after { content: none !important; }

/* ==========================================================
   4. 区块标题（统一 sec-title 体系）
   ========================================================== */
.section { padding: var(--sp-section) 0; }
.section--gray { background: var(--bg-sub); }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.sec-title {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink-1);
  margin: 0;
}

.sec-desc {
  font-size: var(--fs-14);
  color: var(--ink-3);
}

.sec-more {
  font-size: var(--fs-14);
  color: var(--ink-3);
  transition: color .18s;
}
.sec-more:hover { color: var(--brand); }

.section--dark .sec-title { color: #fff; }

/* ==========================================================
   5. 按钮（大厂：直角偏圆、中等高度、hover 加深不加位移）
   ========================================================== */
.btn {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--brand);
  border-color: var(--brand-border);
}

/* ==========================================================
   6. 卡片体系（统一：白底 / 1px 边 / 8px 圆角 / 轻阴影 / hover 微抬）
   ========================================================== */
.ai-tool,
.cat-card,
.tool-card,
.path-card,
.loop-step,
.link-course,
.rel-card,
.res-card,
.ws-card,
.c-sec-card,
.side-card,
.adv-card,
.checkin-card,
.feedback-card {
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}

.ai-tool,
.cat-card,
.tool-card,
.path-card,
.loop-step,
.link-course {
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ai-tool:hover,
.cat-card:hover,
.tool-card:hover,
.path-card:hover,
.link-course:hover {
  border-color: var(--brand-border);
  box-shadow: var(--sh-2) !important;
  transform: translateY(-2px);
}

/* ==========================================================
   7. 去除高饱和渐变装饰（AI 感最大来源）
   ========================================================== */
/* 卡片顶部彩条 → 改为品牌色细条 */
.ai-tool__bar,
.cat-card__ico,
.tool-card__ico,
.adv-ico,
.ai-tool__ico,
.logo-mark {
  background-image: none !important;
}

/* 图标容器改为浅灰底 + 品牌色字符 */
.ai-tool__ico,
.cat-card__ico,
.tool-card__ico,
.adv-ico {
  background: var(--brand-weak) !important;
  color: var(--brand) !important;
  border-radius: var(--r-sm) !important;
  font-weight: var(--fw-bold);
}

/* AI 工具卡顶部条与图标底：统一品牌色，不做多色轮换
   （原设计按 nth-child 换青/橙三色，是"AI 生成感"的典型特征） */
.ai-tool__bar {
  background: var(--brand) !important;
  opacity: .85;
}
.ai-tool__ico {
  background: var(--brand-weak) !important;
  color: var(--brand) !important;
}
/* 悬停时才给一点强调色，避免整页五颜六色 */
.ai-tool:hover .ai-tool__bar { opacity: 1; }

/* 统计数字：去掉渐变文字（-webkit-text-fill-color:transparent 会掉色） */
.tool-hero__stat b {
  background: none !important;
  -webkit-text-fill-color: var(--ink-1) !important;
  color: var(--ink-1) !important;
  font-weight: var(--fw-bold) !important;
}

/* 深色区块的径向光晕 → 压到几乎不可见 */
.hero::before,
.cta::before {
  background:
    radial-gradient(ellipse 60% 80% at 20% 10%, rgba(0, 82, 217, .18), transparent 62%) !important;
}

/* ==========================================================
   8. 字重收敛：正文范围内一律 400
   ========================================================== */
.stat-item b,
.path-card__step,
.loop-step b,
.cta h2,
.hero-slide h2 {
  font-weight: var(--fw-bold) !important;
}

.stat-item b { font-size: var(--fs-32); color: var(--ink-1); }
.path-card__step { font-size: var(--fs-24); color: #c9cdd4; }
.loop-step b { font-size: var(--fs-24); color: #c9cdd4; }

/* 强调性小标签：600 → 500 */
.course-card__tag,
.work-card__tag,
.tool-card__cat,
.course-card__meta em,
.ai-tool__cat {
  font-weight: var(--fw-medium) !important;
}

/* ==========================================================
   9. Hero 区（大厂：标题收字号、副标题提层级）
   ========================================================== */
/* Hero：深色底 + 轮播卡。
   注意：不要写 `background: transparent` —— CSS 简写会重置 background-image，
   把 HTML/JS 上的内联渐变一起清掉，导致深底上出现黑字（看不见文字）。 */
.hero { padding: 72px 0 56px; background: #0d1117; }

.hero-slide {
  padding: 44px 48px;
  border-radius: var(--r-md);
  min-height: 240px;
  /* 只兜底底色，不覆盖内联渐变 */
  background-color: #0b2a63;
}
.hero-slide::after { display: none; }

/* 兜底：万一某张 slide 没写内联渐变，也不至于白底黑字 */
.hero-slide { color: #fff; }
.hero-slide h2 { color: #fff; }
.hero-slide p { color: rgba(255, 255, 255, .82); }
.hero-slide h2 {
  font-size: var(--fs-32);
  line-height: 1.4;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.hero-slide p {
  font-size: var(--fs-16);
  line-height: 1.85;
  opacity: .82;
  margin-bottom: 28px;
  max-width: 640px;
}
.hero-tag {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, .82);
}
.hero-btn {
  height: 44px;
  padding: 0 28px;
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  transition: background-color .18s;
}
.hero-btn:hover { transform: none; box-shadow: none; background: #f2f4f7; }

/* 数据条 */
.stats-row { padding: 28px 0; }
.stat-item span { font-size: var(--fs-13); color: var(--ink-3); }

/* CTA */
.cta { padding: 64px 0; background: #0d1117; }
.cta h2 { font-size: var(--fs-32); line-height: 1.4; letter-spacing: -.02em; }
.cta p {
  font-size: var(--fs-16);
  line-height: 1.8;
  opacity: .75;
  margin-bottom: 28px;
}
.btn--lg {
  height: 44px;
  padding: 0 28px;
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}

/* ==========================================================
   10. AI获客工具页（tools.css 收敛）
   ========================================================== */
.tool-hero {
  padding: 64px 0 56px;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
}

.tool-hero h1 {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.tool-hero .lead {
  margin-top: 16px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 880px;
}

.tool-hero__stats { margin-top: 32px; gap: 16px; }

.tool-hero__stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 20px;
  min-width: 128px;
}
.tool-hero__stat b { font-size: var(--fs-24); }
.tool-hero__stat span { font-size: var(--fs-12); color: var(--ink-3); }

.ai-tool { padding: 28px 24px 24px; }
.ai-tool__name {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  margin: 12px 0 8px;
}
.ai-tool__tagline {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  line-height: 1.7;
}
.ai-tool__desc {
  margin-top: 10px;
  font-size: var(--fs-13);
  line-height: 1.85;
  color: var(--ink-3);
}
.ai-tool__stat {
  background: var(--bg-sub);
  border-radius: var(--r-xs);
  padding: 10px 8px;
}
.ai-tool__stat b { font-size: var(--fs-16); font-weight: var(--fw-bold); }
.ai-tool__stat span { font-size: var(--fs-12); color: var(--ink-3); }
.ai-tool__course {
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin-top: 16px;
  font-size: var(--fs-12);
}
.ai-tool__go {
  margin-top: 12px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--brand);
}

.link-course { padding: 18px 20px; }
.link-course h4 { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.link-course p { margin-top: 6px; font-size: var(--fs-13); color: var(--ink-3); }
.link-course__go { color: #c4c9d1; font-size: var(--fs-16); }

.loop-step { padding: 24px; }
.loop-step h4 { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.loop-step p { margin-top: 10px; font-size: var(--fs-13); line-height: 1.85; color: var(--ink-3); }

/* ==========================================================
   11. 学习路径 / 工具卡 / 作品
   ========================================================== */
.path-grid { gap: 16px; }
.path-card { padding: 24px 22px; }
.path-card h3 { font-size: var(--fs-16); font-weight: var(--fw-medium); margin: 0 0 10px; }
.path-card p { font-size: var(--fs-13); line-height: 1.8; color: var(--ink-3); }
.path-card__hours { font-size: var(--fs-12); color: var(--brand); font-weight: var(--fw-normal); }
.path-card::after { color: #d4d7dd; font-size: var(--fs-14); }

.tool-card { padding: 20px 20px; }
.tool-card h4 { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.tool-card p { font-size: var(--fs-13); line-height: 1.75; color: var(--ink-3); }
.tool-card__cat { margin-top: 12px; }

.course-card__name { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.course-card__sub { font-size: var(--fs-13); }
.course-card__meta { font-size: var(--fs-12); color: var(--ink-3); }

.work-card { border-radius: var(--r-sm) !important; }
.work-card__title { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.work-card__meta { font-size: var(--fs-12); color: var(--ink-3); }

.filter-chip {
  padding: 6px 14px;
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
  transition: color .18s, background-color .18s, border-color .18s;
}
.filter-chip:hover { background: var(--bg-hover); color: var(--ink-1); }
.filter-chip.is-active {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
  font-weight: var(--fw-medium);
}

/* ==========================================================
   12. 深色区块文字层级
   ========================================================== */
.section--dark { background: #0d1117; }
.section--dark .adv-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
}
.section--dark .adv-card h3 { font-size: var(--fs-16); font-weight: var(--fw-medium); color: #fff; }
.section--dark .adv-card p { font-size: var(--fs-13); line-height: 1.8; color: rgba(255, 255, 255, .55); }

/* ==========================================================
   13. 通用文本微调
   ========================================================== */
.sec-more::after { content: " ›"; }
.path-card__step,
.loop-step b { letter-spacing: -.02em; }

/* 链接下划线：文字链接 hover 时才出现 */
a[data-toast],
.app-header-user-name { transition: color .18s; }

/* ==========================================================
   14. 响应式
   ========================================================== */
@media (max-width: 1280px) {
  :root { --sp-section: 64px; }
}

@media (max-width: 1024px) {
  :root { --sp-section: 56px; }
  .sec-title { font-size: 26px; }
  .hero-slide h2,
  .cta h2,
  .tool-hero h1 { font-size: 26px; }
}

@media (max-width: 768px) {
  :root { --sp-section: 44px; }

  body { font-size: var(--fs-14); }

  .container { padding: 0 16px; }

  .sec-head { margin-bottom: 24px; }
  .sec-title { font-size: 22px; }
  .sec-desc { font-size: var(--fs-13); }

  .hero { padding: 44px 0 32px; }
  .hero-slide h2,
  .cta h2,
  .tool-hero h1 { font-size: 22px; letter-spacing: -.01em; }
  .hero-slide p,
  .cta p,
  .tool-hero .lead { font-size: var(--fs-14); line-height: 1.8; }

  .cta { padding: 44px 0; }
  .tool-hero { padding: 40px 0 36px; }
  .tool-hero__stats { gap: 10px; margin-top: 24px; }
  .tool-hero__stat { flex: 1 1 calc(33% - 10px); min-width: 0; padding: 10px 8px; }
  .tool-hero__stat b { font-size: var(--fs-20); }
  .tool-hero__stat span { font-size: 11px; }

  .stat-item b { font-size: var(--fs-24); }
  .stats-row { padding: 22px 0; }

  .ai-tool { padding: 22px 20px 20px; }
  .ai-tool__name { font-size: var(--fs-16); }

  .btn, .btn--lg { height: 40px; }
  .hero-btn { height: 40px; padding: 0 22px; }
}

/* ==========================================================
   15. 课程中心（center.css 收敛）
   ========================================================== */
.c-center-layout { background: var(--bg-sub); }

.c-center-side {
  border-right: 1px solid var(--line);
  padding: 24px 0 32px;
}

.side-group__label {
  font-size: var(--fs-12);
  color: var(--ink-4);
  letter-spacing: .08em;
  text-transform: none;
}

.side-item {
  padding: 10px 20px;
  font-size: var(--fs-14);
  color: var(--ink-2);
  transition: background-color .18s, color .18s;
}
.side-item:hover { background: var(--bg-hover); color: var(--ink-1); }

.side-item.is-active {
  background: var(--brand-weak);
  color: var(--brand);
  font-weight: var(--fw-medium);
}
.side-item.is-active::before { background: var(--brand); width: 3px; }

.side-tool {
  background: var(--bg-sub);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.side-tool:hover { background: var(--bg-hover); border-color: var(--line); }
.side-tool__name { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-1); }
.side-tool__desc { font-size: 11px; color: var(--ink-4); }

/* 签到卡：去掉彩虹渐变 */
.side-card {
  background: var(--brand);
  border-radius: var(--r-sm);
}
.side-card__title { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.side-card__desc { font-size: var(--fs-12); opacity: .8; line-height: 1.7; }
.btn--block {
  background: #fff;
  color: var(--brand);
  height: 34px;
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}
.btn--block:hover { background: var(--brand-weak); color: var(--brand); }

.side-links a { font-size: var(--fs-12); color: var(--ink-4); }
.side-links a:hover { color: var(--brand); }

.c-center-main { padding: 32px 32px 56px; }

/* 课程中心区块标题 */
.c-sec { margin-bottom: 48px; }
.c-sec__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--ink-1);
  margin: 0 0 10px;
}
.c-sec__desc {
  font-size: var(--fs-14);
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 820px;
}

/* 关联卡 */
.rel-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm) !important;
  padding: 20px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.rel-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--sh-2) !important;
  transform: translateY(-2px);
}
.rel-card__name {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--ink-1);
}
.rel-card__sub { font-size: var(--fs-13); color: var(--ink-3); margin: 6px 0 10px; }
.rel-card__meta { font-size: var(--fs-12); color: var(--ink-4); }

/* 三步闭环 */
.loop-step {
  background: #fff;
  border: 1px solid var(--line);
}

/* ==========================================================
   16. 学习页 / 课程页
   ========================================================== */
.course-hero {
  padding: 56px 0 48px;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
}
.course-hero h1 {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.course-hero .lead,
.course-hero__desc {
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--ink-3);
}
.outline-head h3 { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.faq-item h3 { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.c-course-cta h2 { font-size: var(--fs-24); font-weight: var(--fw-bold); }

/* 侧栏目录面板 */
.course-view-right {
  background: #fff;
  border-left: 1px solid var(--line);
}

/* ==========================================================
   17. 页脚（大厂：浅底、层级分明、链接克制）
   注意：页脚实际 class 前缀是 c-footer，不是 app-footer
   ========================================================== */
.app-footer {
  margin-top: var(--sp-section);
  background: var(--bg-sub);
  border-top: 1px solid var(--line);
}

.c-footer { border-top: 0; }
.c-footer-main { background: var(--bg-sub); }
.c-footer-main-content { padding: 40px 0 8px; }

.c-top {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0 0 32px;
}
.c-top .logo { width: 120px; flex-shrink: 0; }
.c-top p {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 520px;
}

.c-line { background: var(--line); }

.c-center {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 0 40px;
}
.c-center-left p {
  margin: 0 0 8px;
  font-size: var(--fs-13);
  line-height: 1.9;
  color: var(--ink-3);
}
.c-center-left a { color: var(--ink-2); transition: color .18s; }
.c-center-left a:hover { color: var(--brand); }

.c-center-right { text-align: left; }
.c-center-right .qr {
  width: 96px;
  height: 96px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 6px;
  background: #fff;
}
.c-center-right p { margin: 0; font-size: var(--fs-12); color: var(--ink-3); }

.beian {
  text-align: center;
  padding: 16px 0;
  font-size: var(--fs-12);
  color: var(--ink-4);
}
.beian .caseNumber { color: var(--ink-4); display: inline-flex; align-items: center; gap: 6px; }
.beian .icon { width: 14px; }

@media (max-width: 768px) {
  .c-top { flex-direction: column; gap: 20px; padding-bottom: 24px; }
  .c-center { flex-direction: column; gap: 28px; padding: 24px 0 32px; }
}

/* ==========================================================
   18. 焦点可达性（大厂必备：键盘导航有清晰焦点环）
   ========================================================== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ==========================================================
   19. 文本选择（细节品质）
   ========================================================== */
::selection {
  background: rgba(0, 82, 217, .12);
  color: var(--ink-1);
}

/* ==========================================================
   20. 手机号校验状态（严格校验的视觉反馈）
   ========================================================== */
#regPhone {
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}

/* 格式正确 */
#regPhone.is-valid {
  border-color: #0a7c4a;
  background: #f6fdf9;
}
#regPhone.is-valid:focus {
  border-color: #0a7c4a;
  box-shadow: 0 0 0 3px rgba(10, 124, 74, .12);
}

/* 满 11 位但无效 */
#regPhone.is-error {
  border-color: #d54941;
  background: #fff8f7;
}
#regPhone.is-error:focus {
  border-color: #d54941;
  box-shadow: 0 0 0 3px rgba(213, 73, 65, .12);
}

/* 无效时轻微抖动，提示"这里填错了" */
#regPhone.is-shake {
  animation: kpShake .4s cubic-bezier(.36, .07, .19, .97);
}
@keyframes kpShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* 号码未通过校验时提交按钮置灰（不可点） */
#btnDoRegister:disabled {
  background: #c4c9d1;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}
#btnDoRegister:disabled:hover { background: #c4c9d1; }

/* 提示区：固定最小高度，避免弹窗高度跳动 */
#regTip {
  min-height: 18px;
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* ==========================================================
   21. 彩虹渐变全面收敛
   原站用 13 处 linear-gradient 给每个卡片上不同颜色，
   是"AI 生成感"的主要来源。大厂做法：颜色只在品牌色一处出现，
   卡片用中性灰底，靠留白与边框分层。
   ========================================================== */

/* 作品卡缩略图：统一中性深灰，不再每张一个颜色 */
.work-card__thumb {
  background: #1f2329 !important;
  background-image: none !important;
  position: relative;
}
.work-card:nth-child(3n+2) .work-card__thumb { background: #262b33 !important; }
.work-card:nth-child(3n+3) .work-card__thumb { background: #2b313a !important; }

/* AI 小工具卡：浅灰底 */
.tool-card {
  background: #fff;
  border: 1px solid var(--line);
}
.tool-card__ico {
  background: var(--brand-weak) !important;
  color: var(--brand) !important;
}

/* 工具卡顶部彩条（若有）：单色 */
.tool-card::before,
.ai-tool::before { background-image: none !important; }

/* 学习路径卡：白底（不是透明，避免露出灰区块底色） */
.path-card { background: #fff; }
/* 优势卡在深色区块里，保持半透明白（见第 12 节），此处不要覆盖 */

/* Hero 装饰线稿：降低存在感 */
.hero-deco { opacity: .1; }

/* 全局兜底：禁止内联彩色渐变卡底
   （覆盖 style.css / home.css 里的历史规则） */
.cat-card,
.rel-card,
.link-course,
.loop-step,
.ws-card {
  background-image: none !important;
}

/* ==========================================================
   22. 移动端栅格兜底（兜住所有多列布局）
   历史问题：home.css 的多列栅格（path-grid 5 列 / tool-grid 5 列等）
   在窄屏下没有被完全覆盖 → 横向溢出，内容被裁切。
   本段在 900px 与 768px 两个断点统一回落单列/双列，
   因为 design.css 最后加载，这里的规则优先级最高。
   ========================================================== */
@media (max-width: 900px) {
  .adv-grid,
  .cat-grid,
  .course-grid,
  .path-grid,
  .tool-grid,
  .work-grid,
  .stats-row,
  .ai-tool-grid,
  .link-course-list,
  .loop-steps,
  .rel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5 列的学习路径在平板上 2 列即可，手机再单列 */
  .path-grid { gap: 12px; }
}

/* 覆盖内联双列（内联优先级高于 CSS，只能用 !important） */
@media (max-width: 900px) {
  [class*="loop-steps"][style*="grid-template-columns"],
  [class*="link-course-list"][style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* 手机一律单列 */
  .adv-grid,
  .cat-grid,
  .course-grid,
  .path-grid,
  .tool-grid,
  .work-grid,
  .ai-tool-grid,
  .link-course-list,
  .loop-steps,
  .rel-grid {
    grid-template-columns: 1fr !important;
  }

  [class*="loop-steps"][style*="grid-template-columns"],
  [class*="link-course-list"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 数据条：2×2 排布，不横排 */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 0;
    padding: 20px 0;
  }
  .stat-item { padding: 12px 0; }
  /* 去掉竖线分隔（网格布局下会错位） */
  .stat-item + .stat-item { border-left: 0; }
  .stat-item:nth-child(even) { border-left: 1px solid var(--line); }
  .stat-item b { font-size: var(--fs-24); }
  .stat-item span { font-size: var(--fs-12); }

  /* Hero 轮播：窄屏减内边距，避免文字被挤 */
  .hero-slide {
    padding: 28px 22px;
    min-height: 200px;
    border-radius: var(--r-sm);
  }
  .hero-slide p { margin-bottom: 22px; }
  /* 装饰线稿在窄屏会压到文字，直接隐藏 */
  .hero-deco { display: none; }

  /* 区块标题与描述改为上下排（原来一行挤） */
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sec-more { order: -1; }

  /* 路径卡的箭头在单列下无意义 */
  .path-card::after,
  .path-card::before { display: none; }

  /* 顶栏在手机上只留 logo 与登录 */
  .app-header { padding: 0 14px; gap: 10px; }
}

/* 超窄屏（iPhone SE 等） */
@media (max-width: 375px) {
  .container { padding: 0 12px; }
  .sec-title { font-size: 20px; }
  .hero-slide h2,
  .cta h2,
  .tool-hero h1 { font-size: 20px; }
  .stat-item b { font-size: 20px; }
}

/* ==========================================================
   23. 移动端底栏最终校准
   mobile.css 里是 height:56px / font-size:18px，
   这里对齐为设计系统的 54px + SVG 图标 21px。
   ========================================================== */
@media (max-width: 900px) {
  .mobile-nav__in { height: 54px; }
  .mobile-nav a {
    height: 54px;
    gap: 2px;
    font-size: var(--fs-12);
  }
  .mobile-nav a > i {
    width: 21px;
    height: 21px;
    font-size: 0;
    line-height: 0;
  }
  .mobile-nav a > i > svg {
    width: 21px;
    height: 21px;
    display: block;
  }
  .mobile-nav a span {
    font-size: var(--fs-12);
    line-height: 1.3;
  }
}

/* ==========================================================
   24. 横向溢出终极兜底
   style.css 里 .container 是固定 width:1200px；
   mobile.css 虽然在 900px 断点里写了 width:auto，
   但 design.css 用了 width:100% + max-width，
   两者的 min-width/width 组合在部分浏览器下仍会算出超宽。
   这里统一用 !important 锁死，并兜住所有可能的溢出源。
   ========================================================== */
@media (max-width: 1240px) {
  .container {
    width: 100% !important;
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 900px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 375px) {
  .container { padding-left: 12px; padding-right: 12px; }
}

/* 任何元素都不允许把页面撑宽（保留已有的固定宽度元素例外） */
@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 分栏工作台（课程中心/学习页）在窄屏改单列 */
  .c-center-layout,
  .c-course-view,
  .p-course-detail-top { max-width: 100%; }

  /* 长英文/URL 强制换行，避免撑宽 */
  h1, h2, h3, h4, p, span, a, td, th, li, div, label, button {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 代码/技术类文本尤其需要 */
  code, pre, .code, .mono { word-break: break-all; }
}