/* ============================================================================
 * restyle_home.css —— 练习首页（index.html, body.page-practice）呈现层重构
 * 重构线 B组 · 2026-08-31
 * 作用域：body.page-practice（首页三级选择器 + 跟读弹层）
 * 配色：主橙 #FF8C42（60%）/ 暖底 #FFF8F0、白底 #FFFFFF（30%）/ 青绿 #4ECDC4 点缀（10%）
 * 硬指标：主操作热区 ≥64px高/≥88px宽 · 学习英文词 ≥24px · 正文 ≥16px · 无 <14px 儿童可见文字
 *         卡片圆角 20px、柔和橙影 · 无红色否定态（反馈全暖色鼓励卡）· 动画 ≤3Hz · safe-area 适配
 * 说明：仅覆盖呈现，不改功能；旧规则带 !important 处以同选择器 + !important 压过并注明原因。
 * ========================================================================== */

/* ---------- 0. 页面基底（暖色米底，保证弹层/卡片对比） ---------- */
body.page-practice {
  --rs-orange: #FF8C42;
  --rs-orange-deep: #FF6B35;
  --rs-orange-soft: #FFE8D6;
  --rs-teal: #4ECDC4;
  --rs-teal-deep: #2FA99F;
  --rs-ink: #3D2B1F;          /* 深棕墨色，对比度 >7:1 */
  --rs-ink-2: #6B5D52;        /* 次级文字，对比度 ≥4.6:1 */
  --rs-card: #FFFFFF;
  --rs-bg: #FFF8F0;
  background: var(--rs-bg);
}

/* ---------- 1. 固定顶部：顶栏 + 三级选择器 + 进度条（大而清晰） ---------- */

/* 顶栏：加高，logo/标题大字 */
body.page-practice .practice-topbar-inner {
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  gap: 10px;
}
body.page-practice .practice-topbar-inner .ledou-logo { width: 38px; height: 38px; }
body.page-practice .practice-topbar-inner h1 {
  font-size: 22px;
  letter-spacing: 0.5px;
}
/* 换皮肤/会员入口：图标+文字胶囊，热区 ≥40px 高（辅助操作，48px 为目标上限内） */
body.page-practice .practice-topbar-inner .skin-btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  gap: 5px;
}
body.page-practice .practice-topbar-inner .skin-btn .skin-btn-icon { font-size: 18px; }

/* 选择器卡片化：整块白卡承托三级选择，圆角20柔和影 */
body.page-practice .practice-selector-area {
  padding: 10px 14px 8px;
}
/* 年级行：大胶囊，热区 ≥44px 高、字号 16px */
body.page-practice .practice-grade-row {
  gap: 10px;
  margin-bottom: 10px;
}
body.page-practice .practice-grade-row .grade-tab {
  padding: 12px 0;             /* 热区高度 ≥44px */
  min-height: 44px;
  font-size: 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--rs-ink-2);
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.12);
}
body.page-practice .practice-grade-row .grade-tab.active {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

/* 册别行：大卡块，热区 ≥48px 高、字号 16px；激活态统一主橙（原为蓝色，并入主色系） */
body.page-practice .practice-volume-row {
  gap: 10px;
  margin-bottom: 10px;
}
body.page-practice .practice-volume-row .volume-tab {
  padding: 13px 0;             /* 热区高度 ≥48px */
  min-height: 48px;
  font-size: 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--rs-ink-2);
  border: 2px solid #FFE8D6;
}
body.page-practice .practice-volume-row .volume-tab.active {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

/* 单元行：单元芯片加大，图标 40px、中文名 12px→保持紧凑但不小于 12px（横滑标签，非学习词） */
body.page-practice .practice-unit-row { gap: 8px; padding: 2px 2px 4px; }
body.page-practice .practice-unit-row .unit-chip {
  width: 66px;
  padding: 7px 4px 9px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.12);
  border: 2px solid transparent;
}
body.page-practice .practice-unit-row .unit-chip.active {
  border-color: var(--rs-orange);
  background: #FFF3E8;
}
body.page-practice .practice-unit-row .unit-chip .u-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--rs-ink-2);
}
body.page-practice .practice-unit-row .unit-chip .u-icon img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* 进度条行：标签/数字 ≥14px，进度条加高到 8px */
body.page-practice .practice-progress-inline {
  padding: 10px 16px 12px;
  gap: 10px;
  background: #fff;
}
body.page-practice .practice-progress-inline .pp-label {
  font-size: 14px;
  color: var(--rs-ink-2);
  font-weight: 700;
}
body.page-practice .practice-progress-inline .progress-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--rs-orange-soft);
}
body.page-practice .practice-progress-inline .pp-text {
  font-size: 14px;
  color: var(--rs-orange-deep);
  font-weight: 800;
}

/* ---------- 2. 视频引导区 ---------- */
/* 引导横幅：字号 14px（原12-13px），暖橙提示卡 */
body.page-practice .practice-guide-banner {
  margin: 10px 16px 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #B45309;             /* 深橙棕，对比度 ≥4.5:1 */
  background: linear-gradient(135deg, #FFF6E5, #FFE8CC);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.15);
}
/* 播放钮：热区 ≥64px（原60px） */
body.page-practice .video-play-btn {
  width: 68px;
  height: 68px;
  box-shadow: 0 6px 24px rgba(255, 107, 53, 0.3);
}
body.page-practice .video-play-triangle {
  border-left-width: 22px;
  border-top-width: 13px;
  border-bottom-width: 13px;
  border-left-color: var(--rs-orange-deep);
}
/* 投屏钮：padding 撑热区，图标不放大，字号 14px */
body.page-practice .cast-guide-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 20px;
}

/* ---------- 3. 跟读全屏弹层 ---------- */

/* 弹层顶栏：题号胶囊字号 16px（原13px），高度 ≥44px */
body.page-practice .practice-overlay-topbar {
  padding: 12px 16px;
}
body.page-practice .practice-overlay-topbar .session-progress {
  padding: 8px 22px;
  font-size: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep));
  box-shadow: 0 3px 10px rgba(78, 205, 196, 0.35);
}

/* 题目卡：圆角 20px、柔和橙影 */
body.page-practice .practice-card-overlay {
  margin: 14px 16px 8px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(255, 140, 66, 0.12);
}
body.page-practice .practice-card-overlay .sentence-box { padding: 20px 18px; }
/* 场景标签：≥14px 暖橙胶囊 */
body.page-practice .scene-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--rs-orange-deep);
  background: #FFF3E8;
  padding: 5px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}
/* 英文学习句：≥24px（硬指标，旧规则34px !important 保留其量级，统一字色/行高） */
body.page-practice #practiceCard .sentence {
  font-size: 32px !important;               /* 压旧 34px !important：矮屏更不易折行，仍 ≥24px */
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: var(--rs-ink) !important;
  margin-bottom: 6px !important;
}
/* 中文释义：≥16px（原15-16px），对比度 ≥4.5:1 */
body.page-practice #practiceCard .sentence-cn {
  font-size: 16px !important;
  color: var(--rs-ink-2) !important;
  margin-bottom: 12px !important;
}
/* 小提示/发音技巧：正文 ≥14px（原小字），暖色卡片 */
body.page-practice .tip-box,
body.page-practice .phonics-box {
  font-size: 14px;
  line-height: 1.6;
  color: var(--rs-ink-2);
  background: #FFF8F0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 8px;
}
body.page-practice .tip-box .tip-label,
body.page-practice .phonics-box .ph-label {
  font-weight: 800;
  color: #B45309;
  font-size: 14px;
}

/* 播放/慢放行：按钮热区 ≥56px（旧 #playBtn 68px 圆形达标；慢放 clamp(50-60) 提至 ≥56） */
body.page-practice #practiceCard .play-row { gap: 24px; margin: 14px 0 4px; }
body.page-practice #playBtn {
  width: 64px !important;
  height: 64px !important;
}
body.page-practice #playBtn .pb-icon { font-size: 26px !important; }
body.page-practice #playBtn .pb-label { font-size: 12px !important; }
body.page-practice #playSlowBtn {
  width: 56px !important;
  height: 56px !important;
}
body.page-practice #playSlowBtn .pb-icon { font-size: 24px !important; }
body.page-practice #playSlowBtn .pb-label { font-size: 12px !important; }

/* 录音卡：圆角20、柔和影 */
body.page-practice .practice-mic-card {
  margin: 0 16px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(255, 140, 66, 0.12);
}
body.page-practice .practice-mic-card .mic-section { padding: 22px 16px; }
/* 主麦克风钮：热区 ≥88px 圆形（旧76px，主操作加大） */
body.page-practice #micBtn {
  width: 88px !important;
  height: 88px !important;
  font-size: 38px !important;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep)) !important;
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.4), inset 0 2px 0 rgba(255,255,255,0.35) !important;
  border: 4px solid #fff !important;
}
/* 录音提示：≥14px */
body.page-practice .practice-mic-card .mic-hint {
  font-size: 15px;
  font-weight: 600;
  color: var(--rs-ink-2);
}
/* 反馈区文字：≥14px（原12-13px 多处，统一提到可读线） */
body.page-practice .feedback { padding: 0 16px 16px; }
body.page-practice .feedback-msg { font-size: 15px; line-height: 1.5; color: var(--rs-ink); }
body.page-practice .score-num { font-size: 26px; color: var(--rs-orange-deep); font-weight: 800; }
body.page-practice .stars { font-size: 24px; letter-spacing: 2px; }
/* 回听录音钮：热区 ≥44px，字号 14px */
body.page-practice .replay-voice,
body.page-practice #practiceCard .replay-voice {
  min-height: 44px;
  padding: 10px 20px !important;
  font-size: 14px !important;
  border-radius: 22px !important;
  background: #FFF3E8;
  color: var(--rs-orange-deep);
  font-weight: 700;
  border: none;
}
/* 逐词发音区：≥14px（原12px / 小屏11px） */
body.page-practice .word-result { font-size: 14px; line-height: 1.5; }
body.page-practice .word-result-title { font-size: 14px; font-weight: 800; color: var(--rs-ink); }
body.page-practice .word-chip { font-size: 15px; font-weight: 700; }
body.page-practice .corr-item,
body.page-practice .corr-detail-item { font-size: 14px; line-height: 1.5; }
body.page-practice .corr-detail-hint { font-size: 14px; }

/* 反馈弹卡（重点练习/跟读示范/合并提示）：暖色鼓励卡，无红/绿否定色 */
body.page-practice .focus-card {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border: 2px solid #FFD54F;
  border-radius: 16px;
  padding: 12px;
  margin: 8px 0;
}
body.page-practice .fc-header { font-size: 14px; font-weight: 800; color: #B45309; }
body.page-practice .fc-word { font-size: 24px !important; font-weight: 800; color: var(--rs-orange-deep); }
body.page-practice .fc-ipa { font-size: 14px; color: var(--rs-ink-2); }
body.page-practice .fc-tip { font-size: 14px !important; line-height: 1.5; color: var(--rs-ink-2); }
body.page-practice .fc-play-btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
}
body.page-practice .demo-card {
  background: linear-gradient(135deg, #FFF3E8, #FFE8D6);   /* 原绿色卡 → 暖橙卡，统一主色系 */
  border: 2px solid #FFD0A8;
  border-radius: 16px;
  padding: 12px;
  margin: 8px 0;
}
body.page-practice .dc-header { font-size: 14px; font-weight: 800; color: #B45309; }
body.page-practice .dc-text { font-size: 18px !important; font-weight: 800; color: var(--rs-ink); line-height: 1.4; }
body.page-practice .dc-play {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep));  /* 正常播放：青绿辅助色 */
}
body.page-practice .dc-play.dc-slow {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep)); /* 慢放：主橙 */
}
body.page-practice .pooled-tips {
  font-size: 14px !important;
  padding: 8px 14px;
  color: var(--rs-ink-2);
  background: #FFF8F0;
  border-radius: 12px;
  line-height: 1.5;
}
/* 点评回听钮：≥14px/44px */
body.page-practice .replay-comment {
  font-size: 15px;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: 22px;
  background: linear-gradient(135deg, #E0F7F4, #C8F0EB);
  color: var(--rs-teal-deep);
  border: 1px solid #9FE3DB;
}

/* 五档反馈 tier 卡：全部暖色鼓励基调（去冷色/粉紫杂色，统一暖色系，无红） */
body.page-practice .feedback.tier-celebrate  { background: #FFF6E5 !important; border-color: #FFD54F !important; }
body.page-practice .feedback.tier-encourage  { background: #E8F8F6 !important; border-color: var(--rs-teal) !important; }
body.page-practice .feedback.tier-challenge  { background: #FFF8E1 !important; border-color: #FFB74D !important; }
body.page-practice .feedback.tier-demonstrate{ background: #FFF3E8 !important; border-color: #FFB088 !important; }
body.page-practice .feedback.tier-protect    { background: #FFF1E8 !important; border-color: #FFC4A3 !important; }

/* 本局总结钮：≥56px 高、字号 16px；紫色 → 青绿辅助色（并入 ≤3 主色体系） */
body.page-practice .session-summary-btn {
  margin: 12px 16px 0;
  padding: 16px;
  min-height: 56px;
  border-radius: 18px;
  font-size: 16px;
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep));
  box-shadow: 0 6px 18px rgba(78, 205, 196, 0.4);
}
body.page-practice .ssu-badge {
  background: var(--rs-orange-deep);   /* 原红色角标 → 主橙 */
  font-size: 10px;
  padding: 2px 8px;
}

/* 底部操作栏：主/次按钮 ≥56px 高、字号 16px（硬指标），间距 ≥10px */
body.page-practice .practice-actions-overlay {
  gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
body.page-practice .practice-actions-overlay .btn {
  min-height: 56px;
  padding: 14px;
  border-radius: 28px;
  font-size: 16px;
}
body.page-practice .practice-actions-overlay .btn-outline {
  border: 2.5px solid var(--rs-orange);
  color: var(--rs-orange-deep);
  background: #fff;
}
body.page-practice .practice-actions-overlay .btn-primary {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  box-shadow: 0 5px 16px rgba(255, 107, 53, 0.4);
}
/* “再练一组”复用青绿，与“下一题”主橙区分但非破坏性红 */
body.page-practice .practice-actions-overlay .btn-primary.btn-replay {
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep));
  box-shadow: 0 5px 16px rgba(78, 205, 196, 0.4);
}

/* 投屏指引弹窗：正文 ≥14px，关闭钮热区 ≥44px */
body.page-practice .cast-guide-header { font-size: 18px; padding: 18px 22px; }
body.page-practice .cast-guide-close {
  min-width: 44px;
  min-height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-practice .cast-guide-tip { font-size: 15px; line-height: 1.6; }
body.page-practice .cast-platform-title { font-size: 16px; }
body.page-practice .cast-platform-content li { font-size: 14px; line-height: 1.7; }
body.page-practice .cast-guide-note { font-size: 14px; line-height: 1.6; color: var(--rs-ink-2); }

/* ---------- 4. 空态/加载态：≥14px（无裸图标、对比度够） ---------- */
body.page-practice .ld-text { font-size: 15px; color: #B45309; }

/* ---------- 5. 矮屏/小屏适配（375px 优先，等比缩放但不破硬指标） ---------- */
@media (max-height: 700px) {
  body.page-practice #practiceCard .sentence { font-size: 28px !important; }
  body.page-practice #micBtn { width: 76px !important; height: 76px !important; font-size: 32px !important; }
  body.page-practice #playBtn { width: 56px !important; height: 56px !important; }
  body.page-practice #playSlowBtn { width: 56px !important; height: 56px !important; }
  body.page-practice .practice-mic-card .mic-section { padding: 14px 16px; }
}
@media (max-height: 640px) {
  body.page-practice #practiceCard .sentence { font-size: 25px !important; }
  body.page-practice .fc-word { font-size: 22px !important; }
  body.page-practice .practice-actions-overlay .btn { min-height: 52px; font-size: 15px; }
}
@media (max-width: 360px) {
  body.page-practice .practice-grade-row .grade-tab { font-size: 15px; padding: 11px 0; }
  body.page-practice .practice-unit-row .unit-chip { width: 60px; }
}