/* 家庭陪伴 · 移动端优先样式（信任蓝主色） */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #F3F6FB;
  color: #1A1B1C;
}
#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 24px rgba(47,107,255,0.06);
}
.page { flex: 1; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 16px;
  font-size: 18px; font-weight: 600;
  min-height: 56px; width: 100%;
  cursor: pointer; user-select: none;
  transition: transform .06s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: #2F6BFF; color: #fff; }
.btn-secondary { background: #EAF0FF; color: #2F6BFF; }
.btn-lg { min-height: 64px; font-size: 19px; margin-bottom: 16px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #EEF1F6;
  position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-size: 18px; font-weight: 700; }
.topbar-right { font-size: 14px; color: #6B7280; }
.btn-back {
  background: #F3F6FB; border: none; border-radius: 10px;
  width: 36px; height: 36px; font-size: 18px; color: #4B5563; cursor: pointer;
}

/* ---------- P1 启动页 ---------- */
#page-launch { justify-content: center; align-items: center; padding: 32px 24px; background: linear-gradient(160deg,#EAF0FF 0%, #F7FAFF 55%, #FFFFFF 100%); }
.launch-inner { width: 100%; text-align: center; }
.launch-logo { font-size: 56px; margin-bottom: 12px; }
.launch-title { font-size: 30px; font-weight: 800; color: #2F6BFF; margin-bottom: 6px; }
.launch-sub { font-size: 15px; color: #6B7280; margin-bottom: 40px; }
.launch-actions { margin-bottom: 20px; }
.remember { font-size: 14px; color: #6B7280; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- P2 管理首页 ---------- */
.home-body { padding: 20px 16px; flex: 1; }
.card { background: #fff; border: 1px solid #EEF1F6; border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.progress-card { box-shadow: 0 4px 16px rgba(47,107,255,0.08); }
.progress-main { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.progress-bar { height: 8px; background: #EDF1F8; border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.progress-fill { height: 100%; background: #2F6BFF; border-radius: 99px; transition: width .3s ease; }
.progress-sub { font-size: 13px; color: #6B7280; line-height: 1.7; }
.hint { font-size: 13px; color: #9CA3AF; text-align: center; margin-top: 24px; }

/* ---------- P3 录音采集页 ---------- */
.record-body { padding: 14px 12px 24px; flex: 1; display: flex; flex-direction: column; }
.card.compact { padding: 12px 14px; margin-bottom: 12px; }
.scene-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.scene-tab {
  flex: 1; min-width: 72px;
  background: #F3F6FB; border: 1px solid #E5EAF3; border-radius: 12px;
  padding: 8px 6px; text-align: center; cursor: pointer;
  font-size: 13px; color: #4B5563;
}
.scene-tab .tab-name { font-weight: 700; display: block; }
.scene-tab .tab-count { font-size: 12px; color: #6B7280; }
.scene-tab.active { background: #EAF0FF; border-color: #2F6BFF; color: #2F6BFF; }
.scene-tab.done { background: #E8F7EF; border-color: #16A34A; color: #16A34A; }
.scene-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #6B7280; margin-bottom: 8px;
}
.switch-label { display: inline-flex; align-items: center; gap: 4px; }
.sentence-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
.sentence-row {
  background: #fff; border: 1px solid #EEF1F6; border-radius: 14px;
  padding: 12px; margin-bottom: 8px;
}
.sentence-row.recorded { border-color: #D9F0E3; }
.sentence-row .s-line { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.s-row-seq { font-size: 13px; font-weight: 700; color: #9CA3AF; min-width: 34px; }
.s-row-text { font-size: 15px; line-height: 1.5; flex: 1; }
.s-row-status { font-size: 12px; color: #6B7280; white-space: nowrap; }
.s-row-status .ok { color: #16A34A; }
.s-row-status .fail { color: #DC2626; }
.s-row-btns { display: flex; gap: 8px; }
.s-btn {
  flex: 1; min-height: 40px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.s-btn-record { background: #2F6BFF; color: #fff; }
.s-btn-replay { background: #F3F6FB; color: #4B5563; }
.s-btn-rerecord { background: #FFF4E6; color: #B45309; }
.s-btn-cancel { background: #FEE2E2; color: #DC2626; }
.s-btn-save { background: #E8F7EF; color: #16A34A; }

/* 就地录音条 */
.inline-recorder { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #E5EAF3; }
.rec-row { display: flex; align-items: center; gap: 10px; }
.rec-circle {
  width: 80px; height: 80px; border-radius: 50%;
  background: #2F6BFF; color: #fff;
  font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rec-circle.recording { background: #DC2626; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }
.rec-info { flex: 1; font-size: 14px; color: #4B5563; line-height: 1.6; }
.rec-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- P4 测试对话页 ---------- */
.test-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px 14px; background: #F8FAFF; }
.chat-item { display: flex; margin-bottom: 12px; }
.chat-item.ai { justify-content: flex-start; }
.chat-item.user { justify-content: flex-end; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.bubble.ai { background: #FFFFFF; border: 1px solid #E5EAF3; border-top-left-radius: 4px; }
.bubble.user { background: #2F6BFF; color: #fff; border-top-right-radius: 4px; }
.bubble .b-meta { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
.bubble.user .b-meta { color: rgba(255,255,255,0.8); }
.bubble .b-tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: #EAF0FF; color: #2F6BFF; margin-right: 6px; }
.bubble .b-tag.warn { background: #FFF4E6; color: #B45309; }
.test-input { padding: 14px; border-top: 1px solid #EEF1F6; background: #fff; }
.test-tip { font-size: 13px; color: #6B7280; text-align: center; margin-bottom: 10px; }
.btn-talk {
  min-height: 64px; border-radius: 99px; background: #2F6BFF; color: #fff;
  font-size: 18px; font-weight: 700; touch-action: none;
}
.btn-talk.listening { background: #DC2626; }
.card-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.phrase-card {
  background: #F3F6FB; border: 1px solid #E5EAF3; border-radius: 99px;
  padding: 10px 16px; font-size: 15px; color: #4B5563; cursor: pointer;
}

/* 状态提示 */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(17,24,39,0.88); color: #fff;
  padding: 10px 18px; border-radius: 99px; font-size: 14px;
  z-index: 999; max-width: 80vw; text-align: center;
}