* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Chalkboard SE', 'Comic Sans MS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(160deg, #FFF7E8 0%, #E8F6FF 55%, #F3E8FF 100%);
  min-height: 100vh;
  color: #37474F;
}

#app { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }

/* ---------- 首页 ---------- */
.home-head { text-align: center; padding: 22px 0 10px; }
.home-head h1 { font-size: 34px; letter-spacing: 2px; }
.home-head p { color: #78909C; margin-top: 6px; font-size: 15px; }

.level-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.level-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 22px; padding: 16px 20px;
  border: 3px solid var(--lc);
  box-shadow: 0 6px 0 var(--lc);
  cursor: pointer; transition: transform .12s;
}
.level-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lc); }
.level-emoji { font-size: 44px; }
.level-info { flex: 1; }
.level-title { font-size: 22px; font-weight: 700; }
.level-sub { font-size: 13px; color: #90A4AE; margin: 2px 0 8px; }
.pbar { height: 10px; background: #ECEFF1; border-radius: 6px; overflow: hidden; }
.pbar-fill { height: 100%; background: var(--lc); border-radius: 6px; transition: width .4s; }
.level-pct { font-size: 12px; color: #90A4AE; margin-top: 4px; }

/* ---------- 今日课程卡 ---------- */
.today-card {
  display: flex; align-items: center; gap: 16px;
  margin-top: 6px; padding: 18px 20px;
  background: linear-gradient(135deg, #fff 60%, color-mix(in srgb, var(--lc) 18%, #fff));
  border-radius: 24px; border: 3px solid var(--lc);
  box-shadow: 0 7px 0 var(--lc);
  cursor: pointer; transition: transform .12s;
}
.today-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lc); }
.today-emoji {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--lc); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800;
}
.today-info { flex: 1; }
.today-tag { font-size: 12px; color: #90A4AE; }
.today-title { font-size: 24px; font-weight: 800; margin: 2px 0; }
.today-sub { font-size: 13px; color: #78909C; }
.today-pct { font-size: 13px; color: #FFA000; margin-top: 4px; font-weight: 700; }
.today-go { font-size: 28px; color: var(--lc); font-weight: 800; }

.section-label { margin: 26px 0 10px; font-size: 16px; font-weight: 700; color: #78909C; }

.home-foot { text-align: center; margin-top: 28px; }
.home-foot .warn { color: #E65100; font-size: 14px; margin-bottom: 12px; }
.reset-btn {
  background: none; border: 1px solid #CFD8DC; color: #90A4AE;
  border-radius: 10px; padding: 6px 14px; font-size: 12px; cursor: pointer;
}

/* ---------- 二级页头 ---------- */
.sub-head { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.sub-head h2 { font-size: 24px; }
.sub-head p { font-size: 13px; color: #90A4AE; }
.back-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--lc, #90A4AE); background: #fff;
  font-size: 22px; color: #37474F; cursor: pointer; flex-shrink: 0;
}

/* ---------- 单元列表 ---------- */
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.unit-card {
  background: #fff; border-radius: 18px; padding: 18px 14px; text-align: center;
  border: 3px solid var(--lc); box-shadow: 0 5px 0 var(--lc);
  cursor: pointer; transition: transform .12s;
}
.unit-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--lc); }
.unit-name { font-size: 21px; font-weight: 700; }
.unit-count { font-size: 13px; color: #90A4AE; margin-top: 6px; }
.sent-card { grid-column: 1 / -1; background: #FFFDE7; }

/* ---------- 练习卡片 ---------- */
.tip {
  background: #FFF9C4; border-radius: 14px; padding: 10px 16px;
  font-size: 14px; color: #795548; margin-bottom: 12px;
}
.card {
  background: #fff; border-radius: 26px; padding: 26px 20px 22px;
  border: 3px solid var(--lc); box-shadow: 0 7px 0 var(--lc);
  text-align: center;
}
.card-emoji { font-size: 64px; min-height: 74px; }

.word { margin: 10px 0 4px; }
.gp {
  display: inline-block; font-size: 56px; font-weight: 800;
  color: #455A64; padding: 0 3px; letter-spacing: 1px;
}
.gp.hl { color: var(--lc); text-decoration: underline; text-underline-offset: 8px; }
.gp.whole { color: var(--lc); }

.sentence { margin: 14px 0 6px; font-size: 30px; font-weight: 700; line-height: 1.6; }
.sw { padding: 2px 4px; border-radius: 8px; }
.sw.ok { color: #2E7D32; background: #E8F5E9; }
.sw.miss { color: #C62828; background: #FFEBEE; }

.stars { font-size: 30px; color: #FFC107; letter-spacing: 6px; margin: 8px 0 14px; min-height: 38px; }
.stars.pop { animation: pop .5s; }
@keyframes pop { 40% { transform: scale(1.35); } }

.btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.act-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 96px; padding: 14px 0 10px;
  font-size: 30px; background: #F5F7FA; border: 2px solid #CFD8DC;
  border-radius: 18px; cursor: pointer; transition: transform .1s;
  font-family: inherit;
}
.act-btn span { font-size: 14px; color: #607D8B; }
.act-btn:active { transform: scale(0.93); }
.act-btn.mic { background: #FFF3F3; border-color: #FFAB91; }
.act-btn.mic.listening { animation: pulse 1s infinite; background: #FFE0E0; border-color: #FF7043; }
@keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,112,67,.15); } }

.feedback { min-height: 30px; margin-top: 14px; font-size: 17px; font-weight: 600; }
.feedback.good { color: #2E7D32; }
.feedback.bad { color: #E65100; }

/* ---------- 底部导航 ---------- */
.nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 8px; }
.nav-btn {
  background: #fff; border: 2px solid #B0BEC5; border-radius: 14px;
  padding: 12px 16px; font-size: 16px; font-weight: 700; color: #546E7A;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.nav-btn:disabled { opacity: .35; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #CFD8DC; }
.dot.done { background: #FFC107; }
.dot.cur { outline: 3px solid #90CAF9; }

/* ---------- 礼花 ---------- */
.confetti {
  position: fixed; top: -30px; z-index: 99; pointer-events: none;
  animation: fall 1.6s ease-in forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(360deg); opacity: .6; }
}

@media (max-width: 420px) {
  .gp { font-size: 44px; }
  .sentence { font-size: 24px; }
  .act-btn { width: 86px; }
}