/**
 * 专项任务图标 · .task-card-icon
 *
 * 设计稿锚点（与稿校验、后续换图标在同一节点导出）：
 * · 图标资源总表：https://www.figma.com/design/asz4Skzrk3wJecXDCoBSkS/Aboat-Design--new-?node-id=11-490
 * · 32 圆底 + 专项色：https://www.figma.com/design/asz4Skzrk3wJecXDCoBSkS/Aboat-Design--new-?node-id=14933-4904
 *
 * 矢量资产（18×18 viewBox · stroke 1.5 · 描边 currentColor，由专项色 token 着色）：
 * · 阅读 book-02 · 写作 pencil-02 · 口语 message-text-01 · 听力 headphones · 综合 atom
 */
.task-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.task-card-icon img,
.task-card-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.task-card-icon svg {
  stroke-width: 1.5;
}

.task-card-icon.writing svg {
  color: var(--color-writing-5);
}

.task-card-icon.reading svg {
  color: var(--color-reading-5);
}

.task-card-icon.speaking svg {
  color: var(--color-speaking-5);
}

.task-card-icon.listening svg {
  color: var(--color-listening-5);
}

.task-card-icon.comprehensive svg {
  color: var(--color-comprehensive-5);
}

.task-card-icon.writing {
  background: var(--color-writing-1);
}

.task-card-icon.reading {
  background: var(--color-reading-1);
}

.task-card-icon.speaking {
  background: var(--color-speaking-1);
}

.task-card-icon.listening {
  background: var(--color-listening-1);
}

.task-card-icon.comprehensive {
  background: var(--color-comprehensive-1);
}