/* =============================================
   金豆AI英语家校通 · UI v2.0
   优化版样式表
   设计原则：儿童友好 · 触控优先 · WCAG AA
   兼容：老微信 X5 内核
   ============================================= */

/* ---- 全局重置与基础 ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin:0; padding:0;
  background:#FFFBEA;
  color:#2D2416;
  font-family:"PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.app {
  max-width:720px; margin:0 auto;
  padding:0 14px calc(28px + env(safe-area-inset-bottom, 0px));
  position:relative;
  overflow-x:hidden;
}

/* ---- 顶部品牌栏 ---- */
.topbar {
  background:linear-gradient(135deg,#FFB347,#FF8A00);
  border-radius:0 0 22px 22px;
  padding:12px 14px;
  box-shadow:0 6px 20px rgba(255,138,0,0.25);
  position:sticky;
  top:0;
  z-index:50;
}
.brand { display:flex; align-items:center; width:100%; gap:8px; }
.brand-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.brand-icon {
  width:40px; height:40px; flex-shrink:0;
  background:#FFF; color:#FF8A00;
  border-radius:50%;
  font-size:18px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,0.12);
}
.brand-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.brand-title { color:#FFF; font-size:16px; font-weight:800; letter-spacing:0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub { color:#FFF3DA; font-size:11px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.me {
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  transition:background 0.2s ease;
}
.me:active { background:rgba(255,255,255,0.3); }
.me-avatar {
  font-size:18px;
  line-height:1;
}
.me-info { display:flex; flex-direction:column; align-items:flex-end; }
.me-name { font-size:12px; color:#FFF; font-weight:700; white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }

/* 手机端适配 — 全部信息都保留显示 */
@media (max-width:600px) {
  .brand-sub { display:none; }
  .topbar-right { gap:6px; }
}
@media (max-width:480px) {
  .brand-icon { width:32px; height:32px; font-size:14px; }
  .brand-title { font-size:14px; }
  .role-label { font-size:11px; }
  .me { width:30px; height:30px; }
  .me-avatar { font-size:15px; }
  .topbar { padding:8px 10px; }
  .role-switcher { padding:4px 8px; gap:2px; }
  .role-arrow { font-size:8px; }
}
@media (max-width:380px) {
  .brand-title { font-size:13px; }
  .role-label { font-size:10px; }
  .role-switcher { padding:3px 6px; }
  .me { width:26px; height:26px; }
  .me-avatar { font-size:13px; }
  .brand-icon { width:28px; height:28px; }
}
@media (max-width:380px) {
  .brand-title { font-size:14px; }
  .role-switcher { padding:4px 6px; }
  .me-star { padding:3px 8px; font-size:12px; }
  .star-ico { font-size:14px; }
}

/* ---- Tab 导航（核心优化）- 5列等宽 flex ---- */
.tabs {
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  gap:6px;
  margin:14px 0 8px;
  padding:0 2px;
}
/* 首页隐藏 Tab 栏（避免与下方卡片重复） */
body.on-home #tabsStudent { display:none; }
body.on-home #tabsTeacher { display:none; }
body.on-home #tabsParent { display:none; }
.tab {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:8px 4px 6px;
  border:none; outline:none;
  background:#FFF8EC;
  color:#7A6035;
  font-size:13px;
  font-weight:700;
  border-radius:16px;
  box-shadow:0 2px 6px rgba(255,138,0,0.10);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  -webkit-user-select:none; user-select:none;
}
.tab .tab-icon {
  font-size:20px;
  line-height:1;
  margin-bottom:3px;
}
.tab .tab-label {
  font-size:11px;
  line-height:1.2;
}
.tab.active {
  background:#FF8A00;
  color:#FFF;
  box-shadow:0 4px 14px rgba(255,138,0,0.35);
}
.tab:active { opacity:0.85; }

/* ---- 页面容器 ---- */
.page { padding:6px 0 8px; display:none; }
.page[style*="display:block"],
.page[style*="display: block"] { display:block; }

/* ---- 首页 Hero（挪到页面下端）---- */
.hero {
  text-align:center;
  padding:18px 16px;
  background:#FFFBEA;
  border-radius:20px;
  margin-top:14px;
  border:1px dashed #FFE0B2;
}
.hero-badge {
  display:inline-block;
  margin:0 0 8px;
  padding:4px 14px;
  border-radius:999px;
  background:#FFF3E0;
  color:#D46500;
  font-weight:700;
  font-size:12px;
  border:1px solid #FFCC80;
}
.hero-title {
  font-size:20px; font-weight:800;
  color:#D46500;
  margin:0 0 4px;
  line-height:1.3;
}
.hero-sub {
  font-size:13px;
  color:#5C4A2E;
  margin:0 0 12px;
  line-height:1.5;
}
/* Hero 数据条 */
.hero-stats {
  display:flex;
  justify-content:space-around;
  gap:8px;
  padding-top:12px;
  border-top:1px dashed #FFE0B2;
  margin-top:4px;
}
.hero-stat {
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-stat-ico { font-size:20px; }
.hero-stat-num { font-size:18px; font-weight:800; color:#D46500; line-height:1; }
.hero-stat-lbl { font-size:11px; color:#7A6035; }

/* ---- 首页功能卡片 ---- */
.cards {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
  justify-content:center;
}
.card {
  flex:0 0 calc(50% - 6px);
  max-width:calc(50% - 6px);
  background:#FFF;
  border-radius:20px;
  padding:20px 10px 16px;
  box-shadow:0 6px 20px rgba(255,138,0,0.13);
  text-align:center;
  cursor:pointer;
  transition:opacity 0.2s ease, box-shadow 0.2s ease;
  border:1px solid rgba(255,138,0,0.06);
}
.card:active { opacity:0.85; box-shadow:0 3px 10px rgba(255,138,0,0.10); }
.card-ico {
  width:56px; height:56px;
  margin:0 auto 8px;
  border-radius:50%;
  background:#FFF0D6;
  color:#FF8A00;
  font-size:26px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.card-name { font-size:16px; font-weight:800; color:#2D2416; }
.card-desc { font-size:13px; color:#5C4A2E; margin-top:2px; }

/* ---- 星星榜按钮 ---- */
.home-board-btn {
  display:block;
  width:85%;
  margin:18px auto 0;
  padding:13px;
  background:linear-gradient(135deg,#FFB300,#FF8A00);
  color:#FFF;
  border:none;
  border-radius:999px;
  font-size:16px; font-weight:700;
  text-align:center;
  box-shadow:0 4px 14px rgba(255,138,0,0.3);
  cursor:pointer;
}
.home-board-btn:active { opacity:0.85; }
.home-tip {
  text-align:center;
  font-size:12px;
  color:#7A6035;
  margin-top:16px;
}

/* ---- 模块标题 ---- */
.module-title {
  font-size:18px; font-weight:800;
  color:#D46500;
  margin:10px 0 10px;
  text-align:center;
  line-height:1.3;
}

/* ---- 子标签（读一读的课文点读/单词认读） ---- */
.subtabs {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:0 0 12px;
}
.subtab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 20px;
  border:none; outline:none;
  background:#FFF8EC;
  color:#7A6035;
  font-size:14px; font-weight:700;
  border-radius:12px;
  cursor:pointer;
}
.subtab.active {
  background:#FF8A00;
  color:#FFF;
  box-shadow:0 3px 10px rgba(255,138,0,0.25);
}

/* ---- 读一读：中英对照条 ---- */
.reader { margin-top:4px; }
#readPair {
  margin:0 0 12px;
  padding:14px 16px;
  background:#FFFAF2;
  border:1px solid #FFE0B2;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(255,152,0,0.10);
  text-align:center;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#rpEn {
  font-size:18px; font-weight:700;
  color:#2D2416;
  line-height:1.4;
  word-break:break-all;
}
#rpCn {
  margin-top:4px;
  font-size:15px;
  color:#D46500;
  font-weight:600;
}

.pair-row {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  margin-bottom:6px;
  background:#FFFFFF;
  border:1px solid #FFE0B2;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s ease;
  text-align:left;
}
.pair-row:hover {
  background:#FFF3E0;
  border-color:#FFA726;
  transform:translateX(2px);
  box-shadow:0 2px 8px rgba(255,152,0,0.15);
}
.pair-en {
  font-size:14px;
  font-weight:600;
  color:#2D2416;
  line-height:1.4;
}
.pair-cn {
  font-size:13px;
  color:#D46500;
  font-weight:500;
  line-height:1.4;
}

/* ---- 翻页导航 ---- */
.page-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:12px 0;
}
.navbtn {
  border:none;
  background:#FFB300;
  color:#FFF;
  font-size:14px; font-weight:700;
  padding:9px 22px;
  border-radius:999px;
  min-height:40px;
  cursor:pointer;
}
.navbtn:active { opacity:0.85; }
.page-no {
  font-size:14px; font-weight:700;
  color:#5C4A2E;
  min-width:60px;
  text-align:center;
}

/* ---- 课本图片与热区 ---- */
.book-stage {
  position:relative;
  margin:0 auto;
  max-width:100%;
  background:#F5F0E6;
  border-radius:12px;
  overflow:hidden;
}
.page-img { display:block; width:100%; height:auto; }
.hot-layer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.hot {
  position:absolute;
  pointer-events:auto;
  cursor:pointer;
  border-radius:4px;
  background:rgba(66,165,245,0.07);
  border:1px solid rgba(66,165,245,0.15);
  transition:background 0.15s ease;
}
.hot.tap { background:rgba(255,138,0,0.25); }
.hot.title { border:1px dashed #42A5F5; }
.hot.title .t-badge { display:none; }
.hot.seg-read .seg-badge { display:none; }
  font-size:11px; border-radius:10px; padding:2px 8px;
  white-space:nowrap; pointer-events:none;
}

.read-tip {
  text-align:center;
  font-size:13px;
  color:#7A6035;
  margin-top:10px;
}
.reward-row { text-align:center; margin-top:10px; }
.reward-btn {
  border:none;
  background:linear-gradient(135deg,#FFB300,#FF8A00);
  color:#FFF;
  font-size:16px; font-weight:700;
  padding:12px 32px;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(255,180,0,0.3);
  cursor:pointer;
}
.reward-btn:active { opacity:0.85; }

/* ---- 单词认读网格 ---- */
.word-grid {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  padding:8px 0;
}
.word-card {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:80px;
  min-height:52px;
  padding:8px 16px;
  background:#FFF;
  border:2px solid #FFE0B2;
  border-radius:14px;
  font-size:16px; font-weight:700;
  color:#2D2416;
  box-shadow:0 3px 10px rgba(255,138,0,0.10);
  cursor:pointer;
  transition:opacity 0.2s ease, border-color 0.2s ease;
}
.word-card:active {
  opacity:0.8;
  border-color:#FF8A00;
  background:#FFF8EC;
}

/* ---- 拼一拼 ---- */
.pin-panel {
  background:#FFF;
  border-radius:20px;
  padding:22px 16px;
  box-shadow:0 6px 20px rgba(255,138,0,0.14);
  margin-top:8px;
}
.pin-top { text-align:center; }
.pin-progress {
  font-size:14px;
  color:#5C4A2E;
  margin-bottom:8px;
  font-weight:600;
}
.pin-target {
  font-size:28px; font-weight:800;
  color:#2D2416;
  letter-spacing:4px;
  margin:10px 0;
}
.pin-hint {
  font-size:14px;
  color:#5C4A2E;
  margin-bottom:14px;
  line-height:1.6;
}
.pin-answer {
  text-align:center;
  font-size:28px; font-weight:700;
  color:#D46500;
  letter-spacing:4px;
  min-height:40px;
  margin:10px 0;
}
.pin-letters { text-align:center; margin:14px 0; }
.pin-letter {
  display:inline-block;
  vertical-align:middle;
  width:52px; height:52px;
  margin:5px;
  border:none;
  background:#FFF0D6;
  color:#D46500;
  font-size:22px; font-weight:800;
  border-radius:14px;
  box-shadow:0 3px 8px rgba(255,138,0,0.18);
  cursor:pointer;
  line-height:52px;
  text-align:center;
  transition:opacity 0.15s ease;
}
.pin-letter:active { opacity:0.75; }
.pin-letter.used {
  background:#E8E0D0;
  color:#9A8A6A;
  box-shadow:none;
  opacity:0.6;
}
.pin-actions {
  text-align:center;
  margin:16px 0 8px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.pin-actions button {
  min-height:44px;
  padding:10px 20px;
  border-radius:999px;
  font-size:14px; font-weight:700;
  border:none;
  cursor:pointer;
}
.pin-actions .primary-btn {
  background:#FF8A00; color:#FFF;
  box-shadow:0 3px 10px rgba(255,138,0,0.25);
}
.pin-actions .secondary-btn {
  background:#FFF; color:#7A6035;
  border:2px solid #FFE0B2;
}
.pin-feedback {
  text-align:center;
  font-size:17px; font-weight:700;
  min-height:28px;
  margin-top:10px;
  color:#D46500;
  padding:8px;
  border-radius:10px;
}
.pin-feedback[style*="✅"] { background:#E8F5E9; color:#2E7D32; }

/* ---- 拍作业 ---- */
.hw-panel {
  background:#FFF;
  border-radius:20px;
  padding:20px 16px;
  box-shadow:0 6px 20px rgba(255,138,0,0.14);
  margin-top:8px;
}
.hw-identity {
  text-align:center;
  font-size:15px;
  color:#5C4A2E;
  margin-bottom:14px;
  font-weight:600;
}
.hw-change-btn {
  border:none;
  background:#FFF0D6;
  color:#D46500;
  padding:4px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  margin-left:8px;
  cursor:pointer;
}
.hw-counter {
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#2D2416;
  padding:12px;
  background:#FFF8EC;
  border-radius:14px;
  margin-bottom:12px;
}
.hw-photos {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  padding:10px;
  min-height:90px;
  background:#FAFAF5;
  border-radius:14px;
  margin-bottom:12px;
  border:2px dashed #FFE0B2;
}
.hw-thumb {
  position:relative;
  width:80px; height:80px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid #FFE0B2;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.hw-img { width:100%; height:100%; object-fit:cover; }
.hw-del {
  position:absolute; top:2px; right:2px;
  width:24px; height:24px;
  border:none;
  background:rgba(0,0,0,0.6);
  color:#FFF;
  border-radius:50%;
  font-size:14px;
  line-height:24px;
  padding:0; font-weight:700;
  cursor:pointer;
}
.hw-actions { text-align:center; margin:10px 0; }
.hw-actions .primary-btn {
  border:none;
  min-height:50px;
  padding:12px 32px;
  border-radius:999px;
  font-size:15px; font-weight:700;
  background:#FF8A00; color:#FFF;
  box-shadow:0 4px 14px rgba(255,138,0,0.3);
  cursor:pointer;
}
.hw-upload-btn {
  display:block;
  width:92%;
  margin:12px auto;
  padding:16px;
  background:linear-gradient(135deg,#FFB300,#FF8A00);
  color:#FFF;
  border:none;
  border-radius:999px;
  font-size:17px; font-weight:700;
  box-shadow:0 4px 14px rgba(255,180,0,0.35);
  cursor:pointer;
}
.hw-upload-btn:disabled {
  background:#D0C8B8;
  box-shadow:none;
  color:#9A8A6A;
  cursor:default;
}
.hw-preview { margin-top:8px; }
.hw-result {
  text-align:center;
  font-size:16px; font-weight:700;
  margin-top:14px;
  padding:14px;
  border-radius:14px;
}
.hw-result:contains('🎉') { background:#E8F5E9; color:#2E7D32; }

/* ---- 唱一唱（新增） ---- */
.song-list {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:4px 0;
}
.song-item {
  display:flex;
  align-items:center;
  gap:14px;
  background:#FFF;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 4px 14px rgba(255,138,0,0.12);
  border:1px solid rgba(255,138,0,0.06);
}
.song-btns {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.song-audio-btn {
  flex-shrink:0;
  width:48px; height:48px;
  border:none;
  background:#10B981;
  color:#FFF;
  border-radius:50%;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(16,185,129,0.3);
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.song-audio-btn:active { opacity:0.8; }
.song-audio-btn.playing {
  background:#2E7D32;
  box-shadow:0 3px 10px rgba(46,125,50,0.3);
}
.song-num {
  width:36px; height:36px;
  flex-shrink:0;
  background:#FFF0D6;
  color:#FF8A00;
  border-radius:50%;
  font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.song-info {
  flex:1;
  min-width:0;
}
.song-name {
  font-size:16px; font-weight:700;
  color:#2D2416;
  line-height:1.3;
}
.song-name-en {
  font-size:13px;
  color:#5C4A2E;
  margin-top:2px;
}
.song-play-btn {
  flex-shrink:0;
  width:48px; height:48px;
  border:none;
  background:#FF8A00;
  color:#FFF;
  border-radius:50%;
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(255,138,0,0.3);
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.song-play-btn:active { opacity:0.8; }
.song-play-btn.playing {
  background:#2E7D32;
  box-shadow:0 3px 10px rgba(46,125,50,0.3);
}

/* ---- 底部 Sheet 弹窗（新增BottomSheet） ---- */
.sheet-overlay {
  position:fixed;
  top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  z-index:999;
  display:none;
}
.sheet {
  position:fixed;
  bottom:0; left:0; width:100%;
  max-height:85vh;
  background:#FFF;
  border-radius:24px 24px 0 0;
  padding:24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:1000;
  box-shadow:0 -6px 30px rgba(0,0,0,0.15);
  overflow-y:auto;
  transform:translateY(0);
  transition:transform 0.3s ease;
}
.sheet-handle {
  width:40px; height:4px;
  background:#D0C8B8;
  border-radius:2px;
  margin:0 auto 16px;
}
.sheet-title {
  font-size:18px; font-weight:800;
  color:#2D2416;
  margin-bottom:16px;
  text-align:center;
}
.sheet-badge {
  display:inline-block;
  margin:0 auto 12px;
  padding:5px 14px;
  border-radius:999px;
  background:#FFF3E0;
  color:#D46500;
  font-weight:700;
  font-size:13px;
  border:1px solid #FFCC80;
}
.sheet .inp {
  display:block;
  width:100%;
  padding:12px 16px;
  border:2px solid #FFE0B2;
  border-radius:14px;
  font-size:16px;
  margin-bottom:12px;
  outline:none;
  background:#FFF;
  color:#2D2416;
}
.sheet .inp:focus {
  border-color:#FF8A00;
  box-shadow:0 0 0 3px rgba(255,138,0,0.12);
}
.sheet .submit-btn {
  display:block;
  width:100%;
  padding:14px;
  background:linear-gradient(135deg,#FFB300,#FF8A00);
  color:#FFF;
  border:none;
  border-radius:999px;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  min-height:50px;
}
.sheet .submit-btn:active { opacity:0.85; }

/* ---- 通用提示 ---- */
.tip {
  text-align:center;
  font-size:12px;
  color:#7A6035;
  margin-top:12px;
  line-height:1.5;
}

/* ---- 顶部栏右区（角色切换+用户） ---- */
.topbar-right {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* ---- 角色切换器 ---- */
.role-switcher {
  display:flex;
  align-items:center;
  gap:3px;
  background:rgba(255,255,255,0.2);
  padding:5px 10px;
  border-radius:999px;
  cursor:pointer;
  min-height:32px;
  transition:background 0.2s ease;
  flex-shrink:0;
}
.role-switcher:active { background:rgba(255,255,255,0.35); }
.role-icon { font-size:14px; line-height:1; }
.role-label { font-size:12px; font-weight:700; color:#FFF; white-space:nowrap; }
.role-arrow { font-size:9px; color:#FFF3DA; line-height:1; }

/* ---- 角色选择 Sheet 选项 ---- */
.role-option {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:8px;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.role-option:active { background:#FFF8EC; }
.role-option-icon {
  width:44px; height:44px;
  flex-shrink:0;
  background:#FFF0D6;
  border-radius:50%;
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.role-option-text { flex:1; min-width:0; }
.role-option-name { font-size:16px; font-weight:700; color:#2D2416; }
.role-option-desc { font-size:12px; color:#5C4A2E; margin-top:2px; }
.role-option-check {
  width:24px; height:24px;
  flex-shrink:0;
  border-radius:50%;
  background:#FFF0D6;
  color:#FF8A00;
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.role-option-check:empty { background:#E8E0D0; }

/* ---- 教师端/家长端：班级选择下拉 ---- */
.t-class-select { margin:0 0 12px; }
.t-class-select .inp { margin-bottom:0; }

/* ---- 教师端/家长端：统计卡片 ---- */
.t-stats {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.t-stat-card {
  flex:1;
  min-width:calc(50% - 10px);
  background:#FFF8EC;
  border-radius:14px;
  padding:14px 10px;
  text-align:center;
  border:1px solid #FFE0B2;
}
.t-stat-num {
  font-size:24px; font-weight:800;
  color:#D46500;
  line-height:1.2;
}
.t-stat-label {
  font-size:12px;
  color:#5C4A2E;
  margin-top:4px;
}

/* ---- 教师端：区块标题 ---- */
.t-section-title {
  font-size:15px;
  font-weight:700;
  color:#2D2416;
  margin:12px 0 8px;
  padding-left:4px;
}

/* ---- 教师端/家长端：空状态 ---- */
.t-empty {
  text-align:center;
  padding:28px 16px;
  background:#FAFAF5;
  border-radius:14px;
  border:2px dashed #D0C8B8;
  color:#7A6035;
  font-size:14px;
  line-height:1.6;
}

/* ---- 教师端：学生列表 ---- */
.t-student-list { display:flex; flex-direction:column; gap:8px; }
.t-student-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:#FFF;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(255,138,0,0.08);
  border:1px solid #FFF0D6;
}
.t-student-avatar {
  width:36px; height:36px;
  border-radius:50%;
  background:#FFF0D6;
  color:#FF8A00;
  font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.t-student-info { flex:1; min-width:0; }
.t-student-name { font-size:15px; font-weight:700; color:#2D2416; }
.t-student-class { font-size:12px; color:#5C4A2E; }
.t-student-stars {
  font-size:14px; font-weight:700;
  color:#FF8A00;
  flex-shrink:0;
}

/* ---- 教师端：作业列表 ---- */
.t-hw-list { display:flex; flex-direction:column; gap:10px; }
.t-hw-item {
  background:#FFF;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 2px 8px rgba(255,138,0,0.08);
  border:1px solid #FFF0D6;
}
.t-hw-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.t-hw-student { font-size:14px; font-weight:700; color:#2D2416; }
.t-hw-time { font-size:11px; color:#7A6035; }
.t-hw-class { font-size:11px; color:#5C4A2E; background:#FFF8EC; padding:1px 8px; border-radius:8px; }
.t-hw-photos {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.t-hw-photo {
  width:64px; height:64px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #E8E0D0;
}
.t-hw-photo img { width:100%; height:100%; object-fit:cover; }

/* ---- 教师端：星星榜 ---- */
.t-rank-list { display:flex; flex-direction:column; gap:6px; }
.t-rank-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#FFF;
  border-radius:12px;
  box-shadow:0 1px 6px rgba(255,138,0,0.06);
}
.t-rank-num {
  width:28px; height:28px;
  flex-shrink:0;
  border-radius:50%;
  background:#F1EFE8;
  color:#5F5E5A;
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.t-rank-item:nth-child(1) .t-rank-num { background:#FFD700; color:#7A5000; }
.t-rank-item:nth-child(2) .t-rank-num { background:#E8E0D0; color:#5C4A2E; }
.t-rank-item:nth-child(3) .t-rank-num { background:#FFF0D6; color:#8A5A20; }
.t-rank-name { flex:1; font-size:14px; font-weight:700; color:#2D2416; }
.t-rank-class { font-size:11px; color:#7A6035; margin-left:6px; }
.t-rank-stars { font-size:14px; font-weight:700; color:#FF8A00; }

/* ---- 教师端：学情分析 ---- */
.t-ana-section {
  background:#FFF;
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:0 2px 8px rgba(255,138,0,0.06);
  border:1px solid #FFF0D6;
}
.t-ana-label { font-size:13px; color:#5C4A2E; margin-bottom:6px; }
.t-ana-bar-bg {
  height:10px;
  background:#F1EFE8;
  border-radius:5px;
  overflow:hidden;
}
.t-ana-bar {
  height:100%;
  background:linear-gradient(90deg,#FFB300,#FF8A00);
  border-radius:5px;
  min-width:4px;
  transition:width 0.5s ease;
}
.t-ana-pct { font-size:13px; font-weight:700; color:#D46500; margin-top:4px; text-align:right; }

/* ---- 家长端：孩子信息 ---- */
.p-child-info {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background:#FFF;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(255,138,0,0.08);
  border:1px solid #FFF0D6;
  margin-bottom:14px;
}
.p-child-avatar {
  width:48px; height:48px;
  border-radius:50%;
  background:#FFF0D6;
  font-size:24px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.p-child-name { font-size:16px; font-weight:700; color:#2D2416; }
.p-child-class { font-size:12px; color:#5C4A2E; margin-top:2px; }

/* ---- 家长端：星星大数字 ---- */
.p-star-summary {
  text-align:center;
  padding:24px;
  background:linear-gradient(135deg,#FFFBEA,#FFF3E0);
  border-radius:16px;
  margin-bottom:12px;
}
.p-star-big { font-size:48px; font-weight:800; color:#FF8A00; line-height:1; }
.p-star-label { font-size:14px; color:#5C4A2E; margin-top:6px; }

/* ---- 家长端：每天动态 ---- */
.p-daily-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #F1EFE8;
}
.p-daily-icon { font-size:16px; flex-shrink:0; margin-top:2px; }
.p-daily-text { flex:1; font-size:13px; color:#2D2416; }
.p-daily-time { font-size:11px; color:#7A6035; flex-shrink:0; }

/* ---- 底部 ---- */
.footer {
  text-align:center;
  color:#7A6035;
  font-size:12px;
  margin-top:24px;
  padding-bottom:8px;
}

/* ---- 响应式 ---- */
/* 平板端 (480px+) */
@media (min-width:480px) {
  .app { padding-left:20px; padding-right:20px; }
  .brand-title { font-size:20px; }
  .hero-title { font-size:26px; }
  .card { flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px); padding:24px 16px 20px; }
  .tab { min-height:56px; padding:10px 8px 8px; }
  .tab .tab-icon { font-size:22px; }
  .tab .tab-label { font-size:12px; }
  .pin-letter { width:56px; height:56px; font-size:24px; line-height:56px; }
  .song-play-btn { width:52px; height:52px; font-size:22px; }
}

/* 大屏平板 (768px+) */
@media (min-width:768px) {
  .app { padding-left:28px; padding-right:28px; }
  .brand-title { font-size:22px; }
  .hero-title { font-size:28px; }
  .card { flex:0 0 calc(50% - 10px); max-width:calc(50% - 10px); }
  .card-ico { width:64px; height:64px; font-size:30px; }
  .pin-letter { width:60px; height:60px; font-size:26px; line-height:60px; }
}


/* mini translate card patch */
#pairList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}


/* ===== 简易版教材中英文翻译 ===== */
#pairList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.mini-translate-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 2px 6px;
  border-bottom:1px solid #E7C9A0;
  margin-bottom:4px;
}
.mini-translate-title span {
  font-size:15px;
  font-weight:700;
  color:#D46500;
}
.mini-translate-title small {
  font-size:12px;
  color:#9A7A4A;
}

.mini-pair-card {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  background:#FFFBEA;
  border:1px solid #F2E4CC;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.15s ease;
  text-align:left;
  width:100%;
  box-sizing:border-box;
  font-family:inherit;
  font-size:inherit;
  outline:none;
}
.mini-pair-card:active {
  background:#FFF3E0;
  border-color:#FFB347;
  transform:scale(0.99);
}
.mini-pair-card.active {
  background:#FFF3E0;
  border-color:#FF8A00;
  box-shadow:0 2px 8px rgba(255,138,0,0.15);
}

.mini-pair-main {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mini-pair-en {
  font-size:14px;
  font-weight:600;
  color:#2D2416;
  line-height:1.5;
}
.mini-pair-cn {
  font-size:13px;
  color:#D46500;
  line-height:1.4;
}
.mini-pair-empty {
  text-align:center;
  color:#9A7A4A;
  font-size:14px;
  padding:20px 0;
}
#pairCard{display:none;background:#FFF;border-top:3px solid #FF8A00;padding:14px 16px;margin:10px 0;border-radius:0 0 10px 10px;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.pair-card-en{font-size:16px;font-weight:700;color:#2D2416;line-height:1.6;margin-bottom:4px;}
.pair-card-cn{font-size:15px;font-weight:700;color:#D46500;line-height:1.5;}


/* ---- 工作台 4 子功能卡片（2x2 网格） ---- */
.wb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 12px;
}
.wb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 8px 12px;
  border: none; outline: none;
  background: #FFF8EC;
  color: #7A6035;
  font-size: 14px;
  font-weight: 700;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(255,138,0,0.10);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wb-card:active { transform: scale(0.97); opacity: 0.9; }
.wb-card.active {
  background: #FF8A00;
  color: #FFF;
  box-shadow: 0 4px 14px rgba(255,138,0,0.35);
}
.wb-card-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.wb-card-label {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}
.wb-pane { display: block; }
.wb-pane-inner { display: block; }

/* ---- 错题本卡片样式 ---- */
.t-errorbook-list { display: flex; flex-direction: column; gap: 8px; }
.t-errorbook-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: #FFF8EC;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(255,138,0,0.08);
}