/* ===================== 课程引擎（M1 语音关） ===================== */

/* 路径页：继续学习卡 */
.course-continue {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, var(--accent) 0%, #d9480f 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  margin-bottom: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.course-continue.done {
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.cc-label { display: block; font-size: 12px; font-weight: 600; opacity: 0.85; }
.cc-title { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; }
.cc-due { display: block; font-size: 12px; opacity: 0.85; margin-top: 6px; }

/* 单元路径 */
.course-unit { margin-bottom: 22px; }
.cu-head { margin-bottom: 10px; }
.cu-title { font-size: 16px; font-weight: 700; display: block; }
.cu-sub { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.cu-path { display: flex; flex-direction: column; gap: 8px; }

/* 课节点（时间线） */
.course-node {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.course-node .cn-mark { font-size: 22px; flex-shrink: 0; }
.cn-body { display: flex; flex-direction: column; min-width: 0; }
.cn-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.cn-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.course-node.is-done { border-color: rgba(47, 158, 68, 0.35); }
.course-node.is-done .cn-title { color: var(--ok); }
.course-node.is-doing { border-color: var(--accent); }
.course-node.is-locked { opacity: 0.55; box-shadow: none; }

/* 上课流：头部 */
.flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.flow-head .btn { flex-shrink: 0; padding: 10px 12px; font-size: 13px; }
.fh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fh-title { font-size: 15px; font-weight: 700; }
.fh-step { font-size: 12px; color: var(--muted); }
.flow-ctrls { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.flow-ctrls .btn { min-width: 120px; }

/* 字母步骤（复用 pg-letter-card） */
#flowBody .pg-letter-card { margin-bottom: 10px; }

/* 音节表卡片 */
.syl-card { text-align: left; padding: 14px 16px; margin-bottom: 10px; gap: 8px; }
.syl-head { display: flex; align-items: baseline; gap: 10px; }
.syl-cons { font-size: 30px; font-weight: 800; color: var(--accent); }
.syl-note { font-size: 12px; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; }
.syl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.syl-chip {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.syl-chip:active { background: var(--accent-soft); color: var(--accent); }

/* 规则讲解卡 */
.rule-card { text-align: left; align-items: stretch; }
.rule-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.rule-tip p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.rule-mat { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* 认一认（学习态图卡） */
.look-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.look-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.look-card .pg-pick-emoji { font-size: 36px; }
.look-word { font-size: 15px; font-weight: 700; color: var(--accent); }
.look-zh { font-size: 11px; color: var(--muted); }
.look-grid-quiz .look-card:disabled { opacity: 0.55; }

/* 小练测验卡 */
.quiz-card { gap: 12px; }
.syl-quiz-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.syl-opt { font-size: 22px; font-weight: 700; padding: 16px 8px; }

/* 小结 / 过关卡 */
.done-card { min-height: 260px; }
.done-emoji { font-size: 64px; }
.big-finish { font-size: 17px; padding: 14px 24px; }

@media (min-width: 640px) {
  .look-grid { grid-template-columns: repeat(5, 1fr); }
  .cu-path { display: grid; grid-template-columns: 1fr 1fr; }
}