/* ==========================================================
   鲲鹏AI · 线性图标集（Icon System）
   替代原先的 emoji / 特殊符号（✂ ◐ ▣ 👤 🏮 💡 ✎ …）

   风格：大厂官网通用做法 —— 24×24 网格、1.75px 描边、
   圆头圆角、currentColor 继承、无填充。
   ========================================================== */

/* 隐藏 sprite 本体 */
.kp-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.kp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: inherit;
}
.kp-ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 图标容器：统一的浅底方块 ---------- */
.tool-card__ico,
.adv-ico,
.ai-tool__ico,
.cat-card__ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm, 8px);
  background: var(--brand-weak, #ecf2fe) !important;
  color: var(--brand, #0052d9) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 0; /* 抹掉字符图标 */
  background-image: none !important;
}

/* 深色区块里的图标：半透明白底 + 白图标 */
.section--dark .adv-ico {
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .82) !important;
}

/* 容器内 svg 尺寸 */
.tool-card__ico .kp-ico,
.adv-ico .kp-ico,
.ai-tool__ico .kp-ico,
.cat-card__ico .kp-ico {
  width: 22px;
  height: 22px;
}

/* ---------- 课程卡播放按钮：改为细描边圆形 ---------- */
.course-card__play,
.work-card__play {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(4px);
  transition: background-color .18s;
}
.course-card__play { width: 36px; height: 36px; }
.course-card:hover .course-card__play { background: rgba(0, 0, 0, .42); }

.work-card__play {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
}
.work-card:hover .work-card__play { background: rgba(255, 255, 255, .28); }

/* 播放三角改为 SVG 对齐 */
.course-card__play svg,
.work-card__play svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  stroke: none;
  margin-left: 2px;
}
.work-card__play svg { width: 18px; height: 18px; }

/* ---------- 学习路径箭头：细线箭头而非字符 ---------- */
.path-card::after {
  content: "";
  width: 16px;
  height: 1px;
  background: #d4d7dd;
  right: -17px;
  position: absolute;
  top: 50%;
}
.path-card::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-top: 1px solid #d4d7dd;
  border-right: 1px solid #d4d7dd;
  transform-origin: center;
  rotate: 45deg;
  z-index: 3;
}
.path-card:last-child::after,
.path-card:last-child::before { display: none; }

/* ==========================================================
   内联 SVG 图标（直接写在 HTML 里的，不带 .kp-ico 类）
   ========================================================== */
.adv-ico > svg,
.tool-card__ico > svg,
.ai-tool__ico > svg,
.cat-card__ico > svg,
.rel-card__ico > svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section--dark .adv-ico > svg { color: rgba(255, 255, 255, .82); }

/* AI 工具卡：顶部色条改单色 */
.ai-tool__ico { font-size: 0; }
.ai-tool__ico > svg { font-size: initial; }

/* 课程卡 / 作品卡播放三角 */
.course-card__play > svg,
.work-card__play > svg { display: block; }