/* ============== iOS 风格 SVG 图标 ============== */
.icon { width: 24px; height: 24px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
/* 在按钮中使用图标时的对齐 */
button .icon { vertical-align: -0.25em; }
/* 导航图标特殊尺寸 */
.nav-icon .icon { width: 24px; height: 24px; }

/* ============== 主题（腾讯云蓝 + 橙色 banner 辅色）============== */
:root {
  --primary: #0052D9;
  --primary-hover: #366EF4;
  --primary-light: #ECF2FE;
  --primary-soft: #F2F7FF;
  --accent: #FF7A45;
  --accent-light: #FFE8DC;
  --success: #2BA471;
  --success-light: #E8F7F0;
  --warning: #E37318;
  --error: #D54941;
  --bg: #F3F3F3;
  --bg-card: #FFFFFF;
  --bg-sub: #FAFAFB;
  --text: #1A1A1A;
  --text-sub: rgba(0,0,0,0.60);
  --text-mute: rgba(0,0,0,0.38);
  --border: #E7E7E7;
  --border-strong: #DCDCDC;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,82,217,0.10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --nav-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }

#app { max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--bg); position: relative; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

#main-content { padding: 0 0 20px; }

/* ============== 顶部 Header ============== */
.app-header { display: none; } /* 新版由页面自己渲染 banner */

/* ============== 底部导航 ============== */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--border); display: flex; align-items: stretch; justify-content: space-around; z-index: 100;
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-mute); font-size: 11px; cursor: pointer; position: relative; }
.nav-item.active { color: var(--primary); font-weight: 700; }
.nav-item.active::before { content: ''; position: absolute; top: 4px; width: 42px; height: 26px; border-radius: 999px; background: var(--primary-soft); z-index: -1; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon .icon { width: 22px; height: 22px; }
.nav-label { font-size: 11px; }

/* ============== 通用 ============== */
.section { padding: 12px 14px; }
.section-title { padding: 14px 14px 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px; }
.empty-tip { text-align: center; color: var(--text-mute); padding: 40px 16px; font-size: 13px; }
.back { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-sub); }
.back .icon { width: 22px; height: 22px; }
.back:active { background: rgba(0,0,0,0.04); }

/* ============== 首页（截图 1）============== */
.home-page { padding: 0; }
.home-banner {
  margin: 0; padding: 20px 18px 50px; color: #fff; position: relative; overflow: hidden;
}
.home-banner::after { content: ''; position: absolute; right: -30px; bottom: -10px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%); }
.hb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hb-avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.28); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.hb-name { font-size: 14px; font-weight: 600; flex: 1; }
.hb-streak { font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 999px; }
.hb-info { font-size: 12px; line-height: 1.6; opacity: 0.95; max-width: 70%; }
.hb-cap { position: absolute; right: 18px; top: 18px; opacity: 0.85; }
.hb-cap .icon { width: 50px; height: 50px; }

.current-tb { margin: -34px 14px 12px; padding: 14px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); position: relative; z-index: 2; }
.ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ct-bell { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.ct-bell .icon { width: 20px; height: 20px; }
.ct-title { flex: 1; font-weight: 700; font-size: 15px; }
.ct-more { font-size: 12px; color: var(--accent); }
.ct-body { display: flex; gap: 12px; align-items: center; }
.ct-cover {
  width: 64px; height: 80px; border-radius: 6px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.ct-info { flex: 1; }
.ct-name { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ct-listen { background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; border: none; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; }

.unit-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.unit-card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); cursor: pointer; }
.uc-head { display: flex; align-items: center; gap: 8px; }
.uc-no { font-size: 14px; font-weight: 800; color: var(--primary); }
.uc-title { flex: 1; font-weight: 700; font-size: 16px; }
.uc-arrow { color: var(--text-mute); display: inline-flex; align-items: center; }
.uc-arrow .icon { width: 18px; height: 18px; }
.uc-tabs { display: flex; gap: 10px; margin-top: 12px; }
.uc-tabs .ut {
  flex: 1; text-align: center; padding: 9px 0 9px; border-radius: 10px;
  background: #fff; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid currentColor; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform .06s, background .15s, box-shadow .15s;
}
.uc-tabs .ut .icon { width: 18px; height: 18px; }
.uc-tabs .ut-words { color: #3B82F6; border-color: #BFDBFE; background: linear-gradient(180deg,#F0F7FF,#E6F0FE); }
.uc-tabs .ut-text { color: #6366F1; border-color: #D7D7FB; background: linear-gradient(180deg,#F4F4FF,#ECECFD); }
.uc-tabs .ut-dialogue { color: #10B981; border-color: #A7F3D0; background: linear-gradient(180deg,#F0FDF6,#E6FAF2); }
.uc-tabs .ut:active { transform: scale(0.97); filter: brightness(0.96); }


.home-footer { text-align: center; color: var(--text-mute); font-size: 11px; padding: 16px 0 8px; }

/* ============== 教材选择页（截图 9）============== */
.tb-page { padding: 0; }
.tb-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--border); }
.tb-title { font-weight: 700; font-size: 16px; }
.tb-body { display: flex; min-height: calc(100vh - 56px - 56px); }
.tb-grades { width: 96px; background: var(--bg-sub); padding: 8px 0; }
.tb-grade { padding: 14px 12px; font-size: 14px; color: var(--text-sub); text-align: center; cursor: pointer; }
.tb-grade.active { background: #fff; color: var(--primary); font-weight: 700; border-left: 3px solid var(--primary); }
.tb-list { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tb-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow-sm); cursor: pointer; position: relative; }
.tb-card.placeholder { opacity: 0.7; }
.tb-cover { width: 56px; height: 72px; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.tb-info { flex: 1; font-size: 12px; color: var(--text-sub); line-height: 1.7; }
.tb-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tb-soon { position: absolute; right: 12px; bottom: 12px; background: var(--accent-light); color: var(--accent); padding: 3px 8px; border-radius: 4px; font-size: 11px; }

/* ============== Unit 详情 ============== */
.unit-detail { padding: 0 0 100px; }
.ud-header { padding: 8px 14px 12px; display: flex; gap: 8px; align-items: flex-start; background: #fff; }
.ud-titles { flex: 1; }
.ud-no { font-size: 12px; color: var(--text-sub); }
.ud-title { font-size: 18px; font-weight: 700; }
.ud-sub { font-size: 13px; color: var(--text-sub); }
.ud-bq { margin: 0 14px 12px; padding: 12px 14px; background: linear-gradient(135deg, #ECF2FE, #F2F7FF); border-left: 3px solid var(--primary); border-radius: 8px; color: var(--primary); font-size: 14px; line-height: 1.6; }
.ud-bq span { color: var(--text-sub); font-size: 12px; }

.ud-tabs { display: flex; gap: 24px; padding: 0 14px; border-bottom: 1px solid var(--border); background: #fff; }
.ud-tab { padding: 12px 4px; font-size: 14px; color: var(--text-sub); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ud-tab .icon { width: 18px; height: 18px; }
.ud-tab.active { font-weight: 700; }
.ud-tab-words.active { color: #3B82F6; border-bottom-color: #3B82F6; }
.ud-tab-text.active { color: #6366F1; border-bottom-color: #6366F1; }
.ud-tab-dialogue.active { color: #10B981; border-bottom-color: #10B981; }

.ud-body { padding: 12px 14px; }

/* ----- 单词列表 ----- */
.word-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius-md); overflow: hidden; }
.word-row { background: #fff; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.word-row:active { background: var(--bg-sub); }
.wr-en { flex: 1; font-weight: 700; font-size: 16px; min-width: 0; }
.wr-phonetic { flex: 0 0 auto; color: var(--text-mute); font-size: 12px; min-width: 90px; }
.wr-cn { flex: 0 0 auto; color: var(--text-sub); font-size: 13px; min-width: 110px; text-align: right; }
.wr-play { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.wr-play .icon { width: 16px; height: 16px; }

/* ----- 课文列表 ----- */
.text-list { display: flex; flex-direction: column; gap: 10px; }
.text-row { background: #fff; border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); cursor: pointer; }
.tr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tr-type { font-size: 11px; color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.tr-title { font-weight: 700; font-size: 15px; }
.tr-cn { color: var(--text-sub); font-size: 13px; }
.tr-meta { color: var(--text-mute); font-size: 12px; margin-top: 6px; }

/* ----- 对话列表 ----- */
.dialogue-list { background: #fff; border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); }
.dl-head { margin-bottom: 12px; }
.dl-title { font-size: 12px; color: var(--primary); font-weight: 700; }
.dl-name { font-size: 16px; font-weight: 700; }
.dl-cn { font-size: 13px; color: var(--text-sub); }
.dl-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.dl-btn { flex: 1; padding: 12px; border: 1px solid var(--primary); border-radius: 8px; color: var(--primary); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.dl-btn:active { transform: scale(0.97); }
.dl-btn.primary { background: var(--primary); color: #fff; }
.dl-preview { padding-top: 10px; border-top: 1px dashed var(--border); }
.dl-prev-row { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; border-radius: 6px; }
.dl-prev-row:active { background: rgba(0, 82, 217, 0.06); }
.dl-prev-row .sp { color: var(--primary); font-weight: 600; min-width: 70px; }
.dl-prev-row .en { flex: 1; color: var(--text); }
.dl-prev-row .pp { color: var(--primary); opacity: 0.7; }
.dl-more { text-align: center; color: var(--text-mute); font-size: 12px; padding: 6px 0 0; }

/* ============== 练习页（公共）============== */
.practice-page { padding: 0 0 100px; min-height: 100vh; background: var(--bg); }
.pp-header { position: sticky; top: 0; z-index: 10; background: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.pp-title { flex: 1; font-weight: 700; font-size: 15px; }
.pp-actions { display: flex; gap: 8px; }
.pp-translate, .pp-mode-btn { padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.pp-mode-btn { background: var(--bg-sub); color: var(--text-sub); }
.pp-bottom {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; background: #fff; border-top: 1px solid var(--border);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; z-index: 30;
}

/* ----- 单词练习 ----- */
.wp-tabs { display: flex; gap: 8px; padding: 10px 14px 0; }
.wp-tab { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-sub); }
.wp-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.wp-hint-row { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.wp-hint-toggle { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 12px; color: var(--text-sub); }
.wp-hint-toggle.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.wp-hint-content { margin-top: 12px; }
.wp-hint { color: var(--text-mute); font-size: 13px; margin-top: 12px; }
.dw { display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 4px; font-size: 18px; }
.dw.ok { color: #2BA471; background: #E8F8F0; }
.dw.wrong { color: #D54941; background: #FDECEC; text-decoration: line-through; }
.wp-card { background: #fff; margin: 14px; padding: 40px 20px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); }
.wp-en { font-size: 32px; font-weight: 700; letter-spacing: 0.5px; }
.wp-en.masked { color: transparent; background: linear-gradient(135deg, #ddd, #f0f0f0); border-radius: 6px; user-select: none; }
.wp-phonetic { color: var(--text-mute); font-size: 14px; margin-top: 8px; }
.wp-cn { margin-top: 14px; font-size: 15px; color: var(--text-sub); }
.wp-pos { color: var(--text-mute); font-style: italic; }
.wp-play { flex: 1; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; padding: 12px; border-radius: 999px; font-weight: 700; }
.wp-nav { display: flex; gap: 8px; align-items: center; }
.wp-nav button { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-sub); }
.wp-nav button:disabled { opacity: 0.4; }
.wp-progress { font-size: 12px; color: var(--text-mute); flex: 1; text-align: center; }
.wp-recbar { display: flex; align-items: center; gap: 12px; }
.wp-counter { font-size: 12px; color: var(--text-sub); flex: 1; }
.wp-counter span { color: var(--accent); font-weight: 700; }
.wp-mic, .dp-mic, .tp-mic { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(255,122,69,0.4); flex-shrink: 0; }
.wp-mic .icon, .dp-mic .icon, .tp-mic .icon { width: 26px; height: 26px; }
.wp-mic.recording, .dp-mic.recording, .tp-mic.recording { background: linear-gradient(135deg, #D54941, #E37318); animation: pulse 1s ease-in-out infinite; }
.wp-next { padding: 12px 18px; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.wp-next:active { transform: scale(0.97); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.wp-timer, .tp-timer { font-size: 13px; color: var(--text-sub); }
.wp-timer span, .tp-timer span { font-weight: 700; color: var(--accent); }
.wp-submit { padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-sub); font-size: 13px; }
.wp-submit { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* 听写：中文提示 + 键盘输入 */
.wp-dictate { margin: 0 14px 14px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; }
.wp-dictate-cn { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.wp-input { width: 100%; padding: 12px 14px; font-size: 18px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; }
.wp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.wp-dictate-result { margin-top: 10px; font-size: 14px; }
.wp-dict-ok { color: var(--success); font-weight: 700; }
.wp-dict-no { color: var(--error); }
.wp-dict-no b { color: var(--text); }

/* 单词读模式：可点列表（点哪个读哪个） */
.nav-item { cursor: pointer; }
.nav-item:active { background: rgba(0,0,0,0.04); }
.wp-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wp-item { background: #fff; padding: 14px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 12px; }
.wp-item.flash { background: var(--primary-soft); }
.wp-item-en { font-size: 22px; font-weight: 700; color: var(--text); }
.wp-item-ph { font-size: 13px; color: var(--text-mute); }
.wp-item-cn { font-size: 13px; color: var(--text-sub); flex: 1; min-width: 0; }
.wp-item-cn .wp-pos { color: var(--text-mute); font-style: italic; margin-right: 2px; }
.wp-item-play { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.wp-item-play .icon { width: 20px; height: 20px; }
.wp-item-play:active { background: var(--primary); color: #fff; }
.wp-tip-sm { font-size: 12px; color: var(--text-mute); text-align: center; padding: 4px 0; }

/* ----- 课文练习 ----- */
.tp-lines { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.tp-line { background: #fff; padding: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); position: relative; }
.tp-line-r { display: flex; align-items: flex-start; gap: 8px; padding-right: 56px; }
.tp-line-r .tp-en, .tp-line-r .tp-cn { flex: 1; min-width: 0; }
.tp-line-play { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 8px rgba(255,122,69,0.35); border: none; }
.tp-line-play .icon { width: 16px; height: 16px; }
.tp-line-play:active { transform: translateY(-50%) scale(0.95); }
.tp-en { font-size: 16px; line-height: 1.7; color: var(--text); }
/* 背模式：英文按词遮罩（首末词可见，中间词渲染为灰色色块占位） */
.tp-en-masked { display: inline; line-height: 2; }
.tp-mw { display: inline-block; padding: 0 2px; border-radius: 4px; vertical-align: baseline; }
.tp-mw.visible { color: var(--text); }
.tp-mw.masked { background: linear-gradient(90deg, #d8dde6 0%, #e8ecf2 50%, #d8dde6 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite; color: transparent; min-width: 3em; text-align: center; user-select: none; }
/* 背模式：完全遮罩的文本 */
.tp-en-hidden { color: #c5cbd6; letter-spacing: 2px; user-select: none; }
.tp-cn-hidden { color: #d0d5de; letter-spacing: 2px; user-select: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.tp-cn-show { font-size: 14px; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-weight: 500; }
/* 背模式语言切换按钮 */
.pp-lang-toggle { padding: 7px 14px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; border: 1px solid var(--primary); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tp-line.flash { background: var(--primary-soft); }
.tp-cn { font-size: 13px; color: var(--text-sub); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.tp-play-all { flex: 1; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; padding: 12px; border-radius: 999px; font-weight: 700; }
.tp-recbar { display: flex; align-items: center; gap: 12px; }

/* 参考系统式：≡ 侧边菜单按钮 */
.pp-side { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-sub); background: transparent; border: none; }
.pp-side .icon { width: 22px; height: 22px; }
.pp-side:active { color: var(--primary); }
/* 参考系统式：顶部 ▶播放全文 按钮（橙圆 + 播放 + 文字） */
.pp-play-all { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; font-weight: 700; font-size: 13px; border: none; box-shadow: 0 2px 8px rgba(255,122,69,0.3); }
.pp-pa-icon { display: inline-flex; align-items: center; }
.pp-pa-icon .icon { width: 14px; height: 14px; }
.pp-pa-text { }

/* 参考系统式：≡ 侧边抽屉 */
.tp-side-drawer { position: fixed; inset: 0; z-index: 999; }
.tp-side-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.tp-side-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 78%; max-width: 320px; background: #fff; padding: 16px 0 16px 0; box-shadow: 2px 0 12px rgba(0,0,0,0.12); overflow-y: auto; }
.tp-side-title { font-size: 14px; font-weight: 700; padding: 8px 20px; color: var(--text); border-bottom: 1px solid var(--border); }
.tp-side-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border-light); cursor: pointer; }
.tp-side-item:active { background: var(--primary-soft); }
.tp-side-item.active { color: var(--primary); font-weight: 700; }
.tp-side-meta { font-size: 12px; color: var(--text-mute); }
.tp-side-hint { padding: 12px 20px; font-size: 12px; color: var(--text-mute); border-top: 1px solid var(--border); margin-top: 8px; }

/* 背模式录音底部 */
.tp-rec-col-recite { gap: 8px; }
.tp-recbar-recite { gap: 10px; }
.tp-rec-tips { flex: 1; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; position: relative; }
.tp-rec-tips-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: tpPulse 1.4s infinite; }
@keyframes tpPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.tp-rec-timer { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); font-weight: 700; flex-shrink: 0; min-width: 90px; justify-content: center; }
.tp-rec-timer-icon { display: inline-flex; align-items: center; }
.tp-rec-timer-icon .icon { width: 16px; height: 16px; }
.tp-rec-timer-text { color: var(--accent); }
.tp-rec-timer.recording { background: #FFF1EC; border-color: var(--accent); }
.tp-rec-timer.recording .tp-rec-timer-icon { color: var(--error); animation: tpPulse 1s infinite; }
.tp-hint { font-size: 12px; color: var(--text-mute); flex: 1; }

/* 课文模式切换（读 / 跟读 / 背）—— 醒目分段按钮 */
.tp-tabs { display: flex; gap: 8px; padding: 10px 14px 0; }
.tp-tab { flex: 1; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--text-sub); text-align: center; }
.tp-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(0,82,217,0.25); }

/* 参考系统式：顶部章节切换 chips */
.tp-secs { display: flex; gap: 8px; padding: 10px 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tp-sec-chip { flex-shrink: 0; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text-sub); font-size: 13px; font-weight: 600; }
.tp-sec-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 参考系统式：底部固定栏（进度 + 播放全文 + 🎤 + 提交成绩） */
.tp-counter { font-size: 12px; color: var(--text-sub); flex-shrink: 0; }
.tp-counter span { color: var(--accent); font-weight: 700; }
.tp-submit { padding: 12px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; border: none; }
.tp-submit:disabled { background: #c9d4e8; color: #fff; }
.tp-extra { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tp-switch { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-sub); font-size: 12px; font-weight: 600; }
.tp-result-card.info { border-color: var(--primary); background: var(--primary-soft); }
.tp-result-tip { font-size: 12px; color: var(--primary); margin-top: 4px; }

/* 跟读模式 */
.tp-follow { padding: 14px; }
.tp-follow-progress { font-size: 13px; color: var(--text-sub); margin-bottom: 10px; }
.tp-follow-progress b { color: var(--primary); font-size: 16px; }
.tp-follow-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; border: 2px solid transparent; }
.tp-follow-card.passed { border-color: var(--success); }
.tp-follow-speaker { font-size: 12px; color: var(--text-mute); margin-bottom: 6px; }
.tp-follow-en { font-size: 17px; line-height: 1.8; color: var(--text); }
.tp-follow-cn { font-size: 13px; color: var(--text-sub); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.tp-follow-heard { font-size: 12px; color: var(--text-sub); margin-top: 8px; background: var(--primary-soft); border-radius: 8px; padding: 6px 10px; }
.tp-follow-nav { display: flex; gap: 10px; margin-top: 14px; }
.tp-follow-prev, .tp-follow-next { flex: 1; padding: 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-weight: 600; font-size: 14px; color: var(--text); }
.tp-follow-next { background: var(--primary); border-color: var(--primary); color: #fff; }
.tp-follow-prev:disabled, .tp-follow-next:disabled { opacity: 0.35; }
.tp-follow-tip { font-size: 12px; color: var(--text-mute); flex: 1; line-height: 1.5; }
.tp-follow-play { padding: 10px 14px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 13px; flex-shrink: 0; }

/* 跟读词级高亮：命中不标，未命中标红 */
.hw.ok { color: var(--success); font-weight: 700; }
.hw.wrong { color: var(--error); font-weight: 700; }

/* 背诵结果 */
.tp-rec-col { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tp-result { width: 100%; }
.tp-result-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.tp-result-card.good { border-color: var(--success); background: var(--success-light); }
.tp-result-card.bad { border-color: var(--error); background: #FDECEC; }
.tp-result-score { font-size: 14px; font-weight: 700; }
.tp-result-score b { color: var(--success); font-size: 20px; }
.tp-result-card.bad .tp-result-score b { color: var(--error); }
.tp-result-rec { font-size: 13px; color: var(--text-sub); margin-top: 6px; word-break: break-all; }

/* 随身听 */
.ls-chips { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 0; }
.ls-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-sub); }
.ls-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.ls-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ls-line { background: #fff; padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 2px solid transparent; }
.ls-line.current { border-color: var(--primary); background: var(--primary-soft); }
.ls-en { font-size: 15px; line-height: 1.6; color: var(--text); }
.ls-cn { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.ls-bottom { display: flex; gap: 10px; align-items: center; }
.ls-prev, .ls-next { padding: 12px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-sub); }
.ls-play { flex: 1; padding: 13px; border-radius: 999px; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }

/* ----- 对话练习 ----- */
.dp-page {}
.role-list { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.role-item { background: #fff; padding: 14px 16px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); cursor: pointer; }
.role-item input { width: 18px; height: 18px; accent-color: var(--primary); }
.role-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.role-name { font-size: 15px; font-weight: 600; }
.role-confirm { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 56px); max-width: 424px; background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; padding: 14px; border-radius: 999px; font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }

.dp-active .pp-bottom { gap: 12px; }
.dl-bubbles { padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 60vh; }
.bubble-row { display: flex; flex-direction: column; max-width: 78%; }
.bubble-row.left { align-self: flex-start; }
.bubble-row.right { align-self: flex-end; align-items: flex-end; }
.bubble-name { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; padding: 0 6px; }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; word-break: break-word; }
.bubble.system { background: #fff; color: var(--text); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.bubble.user { background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; border-bottom-right-radius: 4px; }
.bubble.masked { color: transparent; background: linear-gradient(90deg, #FFE0CE 0%, #FFD0B6 50%, #FFE0CE 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite; }
.bubble-cn { font-size: 12px; color: var(--text-sub); margin-top: 4px; padding: 0 6px; }
.bubble-row.current .bubble { box-shadow: 0 0 0 2px var(--primary-light), var(--shadow-sm); }
.dp-hint { flex: 1; font-size: 13px; color: var(--text-sub); }
.dp-hint b { color: var(--accent); font-weight: 600; }

/* ============== 个人中心 ============== */
.profile-page { padding: 0; }
.prof-card { margin: 14px; padding: 20px; background: linear-gradient(135deg, var(--primary), #366EF4); color: #fff; border-radius: var(--radius-md); display: flex; align-items: center; gap: 14px; }
.prof-av { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.prof-name { font-size: 18px; font-weight: 700; }
.prof-grade { font-size: 13px; opacity: 0.85; margin-top: 4px; }
.settings { margin: 0 14px; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.set-row { padding: 14px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); font-size: 14px; }
.set-row:last-child { border-bottom: none; }
.set-row:active { background: var(--bg-sub); }
.about { text-align: center; color: var(--text-mute); font-size: 12px; padding: 30px 16px; line-height: 1.7; }
.rec-item { display: flex; gap: 10px; padding: 12px; background: #fff; border-radius: var(--radius-md); margin-bottom: 8px; box-shadow: var(--shadow-sm); align-items: center; }
.rec-item .badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.rec-item .badge.good { background: var(--success); }
.rec-item .badge.mid { background: var(--warning); }
.rec-item .badge.low { background: var(--error); }
.rec-item .info { flex: 1; min-width: 0; }
.rec-item .t1 { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item .t2 { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.rec-item .time { font-size: 11px; color: var(--text-mute); }

/* ============== 模态框 ============== */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-box { background: #fff; border-radius: var(--radius-md); padding: 22px 20px; width: 100%; max-width: 340px; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; line-height: 1.6; }
.modal-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 15px; outline: none; }
.modal-input:focus { border-color: var(--primary); }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.mbtn { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: #fff; }
.mbtn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============== Toast ============== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: rgba(0,0,0,0.85); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 300; opacity: 0; transition: opacity 0.2s, transform 0.2s; max-width: 80%; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ============== 底部备案号（ICP 必备） ============== */
.site-footer { text-align: center; padding: 14px 12px 10px; }
.site-footer .beian-link { color: var(--text-mute); font-size: 12px; text-decoration: none; letter-spacing: 0.3px; }
.site-footer .beian-link:active { color: var(--primary); }

/* ============== 内容编辑（教师后台） ============== */
.editor-page { padding-bottom: 30px; }
.ed-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--border); }
.ed-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; }
.ed-save { padding: 8px 14px; border: none; border-radius: 8px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; }
.ed-save:disabled { opacity: 0.6; }


.ed-controls { display: flex; gap: 10px; padding: 12px; flex-wrap: wrap; }
.ed-ctl { display: flex; flex-direction: column; font-size: 12px; color: var(--text-sub); gap: 4px; flex: 1; min-width: 140px; }
.ed-ctl select { padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; background: #fff; }
.ed-tabs { display: flex; border-bottom: 1px solid var(--border); }
.ed-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 15px; color: var(--text-sub); cursor: pointer; border-bottom: 2px solid transparent; }
.ed-tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.ed-body { padding: 12px; }
.ed-words, .ed-text { display: flex; flex-direction: column; gap: 10px; }
.ed-word-row, .ed-line-row { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; position: relative; }
.ed-line-row { margin-top: 8px; }
.ed-idx { position: absolute; top: 8px; right: 10px; font-size: 12px; color: #bbb; }
.ed-in { width: 100%; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; background: #fff; margin-bottom: 6px; }
.ed-in:focus { border-color: var(--primary); }
.ed-in.sp { font-size: 13px; background: #f6f8fc; }
.ed-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ed-mini { min-width: 30px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; font-size: 13px; cursor: pointer; }
.ed-mini:disabled { opacity: 0.35; cursor: default; }
.ed-mini.del { color: #e34d59; border-color: #f3c2c6; }
.ed-add { padding: 10px; border: 1px dashed var(--primary); border-radius: 10px; background: #f3f8ff; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.ed-add.small { font-size: 13px; padding: 7px; margin-top: 6px; }
.ed-sec { background: #fafbff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.ed-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ed-sec-type { font-size: 13px; font-weight: 700; color: var(--primary); }
.ed-empty { text-align: center; color: #999; font-size: 13px; padding: 16px; }
.mbtn.ghost { background: #fff; color: var(--text-sub); border: 1px solid var(--border-strong); }

/* ============== 今日 / 进度 统计组件 ============== */
/* 顶部三项统计 */
.stats-card { display: flex; margin: -34px 14px 12px; padding: 16px 10px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); position: relative; z-index: 2; }
.stat { flex: 1; text-align: center; position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background: var(--border); }
.stat-num { font-size: 24px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.stat-lbl { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* 今日：未打卡鼓励卡 */
.enc-card { margin: 0 14px 12px; text-align: center; padding: 28px 18px; }
.enc-emoji { font-size: 40px; }
.enc-title { font-size: 17px; font-weight: 700; margin: 10px 0 6px; }
.enc-sub { font-size: 13px; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; }
.enc-btn { background: linear-gradient(135deg, #FF7A45, #FF9F66); color: #fff; padding: 10px 28px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(255,122,69,0.3); }

/* 今日：打卡明细 */
.tk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.tk-item { background: var(--bg-sub); border-radius: 10px; padding: 12px 14px; }
.tk-top { display: flex; justify-content: space-between; align-items: baseline; }
.tk-unit { font-weight: 700; font-size: 14px; color: var(--text); }
.tk-time { font-size: 12px; color: var(--text-mute); flex-shrink: 0; margin-left: 8px; }
.tk-sec { font-size: 13px; color: var(--text-sub); margin-top: 3px; }
.tk-type { font-size: 11px; color: var(--primary); background: var(--primary-light); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.tk-bottom { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tk-modes { flex: 1; font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-badge { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 13px; flex-shrink: 0; }
.tk-badge.good { background: var(--success); }
.tk-badge.mid { background: var(--warning); }
.tk-badge.low { background: var(--error); }
.tk-count { font-size: 12px; color: var(--text-mute); flex-shrink: 0; }

/* 进度：7 天日历 */
.cal-card { margin: 0 14px 12px; }
.cal-row { display: flex; justify-content: space-between; gap: 4px; }
.cal-cell { flex: 1; text-align: center; padding: 8px 0; border-radius: 8px; background: var(--bg-sub); }
.cal-cell.done { background: var(--primary-soft); }
.cal-wk { font-size: 11px; color: var(--text-mute); margin-bottom: 4px; }
.cal-dot { font-size: 15px; font-weight: 800; color: var(--text-mute); }
.cal-cell.done .cal-dot { color: var(--primary); font-size: 14px; font-weight: 700; }

/* 进度：单元进度 */
.up-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.up-item { border-top: 1px dashed var(--border); padding-top: 12px; }
.up-item:first-child { border-top: none; padding-top: 0; }
.up-head { display: flex; justify-content: space-between; align-items: baseline; }
.up-unit { font-weight: 700; font-size: 14px; color: var(--text); }
.up-meta { font-size: 12px; color: var(--text-sub); flex-shrink: 0; margin-left: 8px; }
.up-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.up-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 600; }
.up-pill.good { background: var(--success); }
.up-pill.mid { background: var(--warning); }
.up-pill.low { background: var(--error); }
.up-none { font-size: 12px; color: var(--text-mute); }