/* ============================================================
   粤语发音体检 V2 · style.css
   沿用 MVP 视觉（紫渐变 / 白卡片 / 圆角），新增视图切换、
   模态框、历史对比（双雷达叠加 / Δ差异）样式
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang HK', 'Noto Sans HK', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 16px;
}

/* 移动端优先：卡片容器居中 */
.container { max-width: 480px; margin: 0 auto; }

.header { text-align: center; color: white; padding: 20px 0 8px; }
.header h1 { font-size: 26px; margin-bottom: 4px; }
.header p { font-size: 14px; opacity: .85; }
.badge {
  display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  padding: 3px 10px; border-radius: 20px; font-size: 12px; margin-top: 8px;
}

.card {
  background: white; border-radius: 16px; padding: 18px; margin-top: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

/* ---------- 视图切换 ---------- */
.view { display: none; }

/* ---------- 欢迎页 ---------- */
.welcome-card { text-align: center; padding: 36px 22px 30px; }
.welcome-icon { font-size: 58px; margin-bottom: 12px; }
.welcome-card h2 { font-size: 22px; color: #333; margin-bottom: 8px; }
.welcome-card p { font-size: 14px; color: #888; line-height: 1.7; }
.user-progress {
  text-align: center; font-size: 14px; font-weight: 600; color: #5a3d9e;
  background: #f3eefe; border-radius: 10px; padding: 8px 10px; margin: 10px 0 2px;
}

/* ---------- 昵称模态框 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
}
.modal.show { display: flex; }
.modal-mask { position: absolute; inset: 0; background: rgba(20,20,40,.55); }
.modal-card {
  position: relative; background: white; border-radius: 16px; padding: 26px 20px 20px;
  width: 300px; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center;
}
.modal-card h3 { font-size: 18px; color: #333; margin-bottom: 14px; }
.modal-card input {
  width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px;
  font-size: 15px; outline: none; text-align: center; margin-bottom: 14px;
}
.modal-card input:focus { border-color: #667eea; }

/* ---------- 测试字 ---------- */
.char-row {
  display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; gap: 10px;
}
.char-row:last-child { border-bottom: none; }
.char-box {
  width: 52px; height: 52px; border-radius: 12px; background: #f3eefe; display: flex;
  align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #5a3d9e; flex-shrink: 0;
}
.char-info { flex: 1; min-width: 0; }
.char-jyutping { font-size: 12px; color: #888; }
.char-status { font-size: 13px; font-weight: 600; margin-top: 2px; }
.status-wait { color: #aaa; }
.status-ready { color: #667eea; }
.status-ok { color: #22c55e; }
.status-bad { color: #ef4444; }
.char-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- 按钮 ---------- */
.btn {
  border: none; border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer;
  transition: all .15s; font-weight: 600;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-listen { background: #eef2ff; color: #667eea; }
.btn-speak { background: #667eea; color: white; }
.btn-speak.recording { background: #ef4444; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.btn-outline {
  width: 100%; background: #fff; border: 2px solid #667eea; color: #667eea;
  padding: 11px; font-size: 15px; border-radius: 12px; margin-top: 10px; cursor: pointer; font-weight: 700;
}
.btn-outline:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary {
  width: 100%; background: linear-gradient(90deg, #667eea, #764ba2); color: white; padding: 13px; font-size: 16px;
  border: none; border-radius: 12px; margin-top: 12px; cursor: pointer; font-weight: 700;
}
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 进度条 ---------- */
.progress-wrap { margin: 14px 0 4px; }
.progress-track { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); width: 0%; transition: width .4s; border-radius: 4px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-top: 6px; }

/* ---------- 结果区 ---------- */
.radar-wrap { display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.radar-total {
  text-align: center; font-size: 44px; font-weight: 800; color: #5a3d9e; line-height: 1.1;
}
.radar-sub { font-size: 13px; color: #888; }
.dim-list { margin-top: 10px; }
.dim-row { display: flex; align-items: center; margin: 7px 0; gap: 8px; }
.dim-name { width: 60px; font-size: 13px; color: #555; flex-shrink: 0; }
.dim-bar { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.dim-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #667eea, #764ba2); width: 0%; transition: width .6s; }
.dim-score { width: 32px; text-align: right; font-size: 13px; font-weight: 700; color: #5a3d9e; }
.mistake-list { margin-top: 12px; }
.mistake-item { font-size: 13px; color: #ef4444; padding: 5px 0; border-bottom: 1px dashed #fee; }
.mistake-item:last-child { border-bottom: none; }
.suggestion {
  margin-top: 12px; background: #f0fdf4; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #166534;
}

/* ---------- 历史对比视图 ---------- */
.history-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.history-header h3 { font-size: 17px; color: #333; }
.compare-wrap { text-align: center; }
.hist-meta { font-size: 12px; color: #888; margin-top: 4px; }
.history-single { text-align: center; }
.hist-date { font-size: 13px; color: #666; margin-top: 6px; }

/* Δ 差异 */
.delta-list { margin-top: 12px; border-top: 1px solid #f0f0f0; padding-top: 8px; }
.delta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; color: #555;
}
.delta-row.total { font-weight: 700; color: #333; font-size: 14px; }
.delta-val { font-weight: 700; min-width: 44px; text-align: right; }
.delta-val.up { color: #22c55e; }
.delta-val.down { color: #ef4444; }
.delta-val.flat { color: #999; }

/* 错误音变化 */
.diff-list { margin-top: 10px; }
.diff-title { font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
.diff-title.ok { color: #22c55e; }
.diff-title.bad { color: #ef4444; }
.diff-item { font-size: 13px; padding: 4px 0; }
.diff-item.ok { color: #166534; }
.diff-item.bad { color: #ef4444; }
.diff-none { font-size: 13px; color: #999; text-align: center; padding: 10px 0; }

.empty { text-align: center; color: #999; font-size: 14px; padding: 30px 10px; line-height: 1.9; }
.loading { text-align: center; color: #999; padding: 30px; }

/* ---------- Toast / 注脚 ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(30,30,40,.92); color: white; padding: 10px 18px; border-radius: 24px; font-size: 13px;
  transition: transform .3s; z-index: 99; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.note { font-size: 11px; color: #999; text-align: center; margin-top: 10px; line-height: 1.5; }