/* 颢雯学堂 —— 明亮活泼、大字大按钮、手机优先 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background-color: #fff6e5;
  background-image: radial-gradient(#f3ddae 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  color: #33302a;
  font-size: 17px;
  line-height: 1.55;
}
.hidden { display: none !important; }

/* 顶栏 */
#topbar { background: #fff; border-bottom: 3px solid #ffd98a; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 860px; margin: 0 auto; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-title { font-size: 18px; font-weight: 800; color: #b3620a; }
#identity-bar { max-width: 860px; margin: 0 auto; padding: 0 14px 8px; font-size: 13px; color: #8a6d3b; }
#account-bar { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#account-bar .who { color: #666; }
button.small { min-height: 34px; padding: 4px 10px; font-size: 14px; border-radius: 10px; }

main { max-width: 860px; margin: 0 auto; padding: 16px 14px 30px; }
#footer { text-align: center; color: #a08b62; font-size: 14px; padding: 16px 10px 30px; }

/* 通用卡片与按钮 */
.card { background: #fff; border: 2px solid #f0dfba; border-radius: 18px; padding: 18px; margin-bottom: 16px; box-shadow: 0 3px 0 #f0dfba; }
.card h2 { margin: 0 0 10px; font-size: 21px; }
.card h3 { margin: 14px 0 8px; font-size: 18px; }
button {
  font-family: inherit; cursor: pointer; border: none; border-radius: 14px;
  min-height: 52px; padding: 10px 18px; font-size: 18px; font-weight: 700;
  background: #22a06b; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
button:active { transform: translateY(2px); box-shadow: none; }
button.secondary { background: #fff; color: #444; border: 2px solid #d9c9a3; box-shadow: none; }
button.warn { background: #e2574c; }
button.blue { background: #4a7de0; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea {
  font-family: inherit; font-size: 18px; padding: 12px; border: 2px solid #d9c9a3;
  border-radius: 12px; width: 100%; background: #fffdf7; color: #33302a;
}
label { display: block; font-weight: 700; margin: 12px 0 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }
.muted { color: #8a7c5f; font-size: 15px; }
.error { color: #c0392b; font-weight: 700; min-height: 24px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { background: #fff; color: #666; border: 2px solid #e4d5ae; box-shadow: none; min-height: 44px; font-size: 16px; }
.tabs button.on { background: #ffb92e; color: #5c3d00; border-color: #ffb92e; }
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: rgba(40,35,25,.92); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 16px; z-index: 99; max-width: 88vw; text-align: center;
}

/* 登录 */
.login-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.login-tabs button { flex: 1; background: #fff; color: #666; border: 2px solid #e4d5ae; box-shadow: none; }
.login-tabs button.on { background: #22a06b; color: #fff; border-color: #22a06b; }
.demo-note { background: #fff8e6; border: 2px dashed #e8cf8f; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #7a6435; margin-top: 14px; line-height: 1.7; }

/* 学生首页 */
.star-banner {
  background: linear-gradient(135deg, #ffb92e, #ff8a3d); color: #fff; border-radius: 18px;
  padding: 18px; margin-bottom: 16px; font-size: 22px; font-weight: 800; text-align: center;
  box-shadow: 0 4px 0 rgba(180,100,0,.35);
}
.star-banner .big-num { font-size: 40px; }
.hw-item { border: 2px solid #eee0bd; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fffdf7; }
.hw-item .hw-title { font-weight: 800; font-size: 18px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.badge.none { background: #eee; color: #777; }
.badge.submitted { background: #dbeafe; color: #2456a6; }
.badge.commented { background: #d9f5e3; color: #157347; }
.badge.returned { background: #ffe1de; color: #b3372c; }
.teacher-comment { background: #fff8e6; border-radius: 10px; padding: 8px 12px; margin-top: 8px; font-size: 15px; }
.video-grid, .section-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .video-grid, .section-grid { grid-template-columns: 1fr 1fr; } }
.video-card video { width: 100%; border-radius: 12px; background: #000; }
.video-card .v-title { font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.section-btn { text-align: left; color: #fff; border-radius: 18px; padding: 18px; min-height: 96px; }
.section-btn .s-name { font-size: 22px; font-weight: 800; display: block; }
.section-btn .s-sub { font-size: 15px; opacity: .92; }
.sec-add { background: #ef6c4a; } .sec-price { background: #1f9e8f; }
.sec-road { background: #4a7de0; } .sec-mixed { background: #8e5fc0; }
.sec-u5l1 { background: #2e8b57; }
.sec-u5l2 { background: #d9771a; }
.sec-u5l3 { background: #2e8b57; }
.sec-u5l4 { background: #7c4da0; }
.sec-u6l1 { background: #2f7fa3; }
.sec-u6l2 { background: #c2571b; }
.sec-u6l3 { background: #2e7d5b; }
.sec-u6l4 { background: #7c4da0; }
.sec-u1l1 { background: #2f7fa3; }
.sec-u1l2 { background: #c2571b; }
.sec-u1l3 { background: #2e7d5b; }
.sec-u1l4 { background: #7c4da0; }
.sec-u1l5 { background: #b23a48; }
.sec-u2l1 { background: #2f7fa3; }
.sec-u2l2 { background: #c2571b; }
.sec-u2l3 { background: #2e7d5b; }
.sec-u2l4 { background: #7c4da0; }
.sec-u3l1 { background: #2f7fa3; }
.sec-u3l2 { background: #c2571b; }
.sec-u3l3 { background: #2e7d5b; }
.sec-u3l4 { background: #7c4da0; }
.sec-u3l5 { background: #b23a48; }
.sec-u7l1 { background: #0f5e68; }

/* 做题 */
.quiz-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 800; }
.progress-track { flex: 1; height: 14px; background: #f1e3c2; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: #ffb92e; border-radius: 999px; transition: width .3s; }
.quiz-source { font-size: 14px; color: #a08b62; margin-bottom: 10px; }
.q-text { font-size: 22px; font-weight: 700; line-height: 1.6; margin: 8px 0 16px; }
.q-input-row { display: flex; gap: 10px; align-items: stretch; }
.q-input-row input { font-size: 24px; text-align: center; font-weight: 800; }
.q-input-row .unit { align-self: center; font-size: 20px; font-weight: 700; white-space: nowrap; }
.choice-btn { display: block; width: 100%; text-align: left; margin-bottom: 12px; background: #fff; color: #33302a; border: 3px solid #e4d5ae; box-shadow: none; font-size: 21px; min-height: 60px; }
.choice-btn.picked-wrong { border-color: #e2574c; background: #ffe1de; }
.choice-btn.picked-right { border-color: #22a06b; background: #d9f5e3; }
.feedback { border-radius: 14px; padding: 14px; margin: 14px 0; font-size: 17px; }
.feedback.hint { background: #fff3cd; border: 2px solid #ffdf8a; }
.feedback.good { background: #d9f5e3; border: 2px solid #8fd6ae; }
.feedback.explain { background: #fdeceb; border: 2px solid #f3b3ae; }

/* 成绩卡 */
.result-card { text-align: center; }
.source-badge { background: #fdf3da; border: 2px solid #ecd9a0; border-radius: 12px; padding: 10px; margin-bottom: 14px; font-size: 15px; color: #7a6435; }
.source-badge .sb-module { font-weight: 800; font-size: 17px; margin-top: 2px; }
.result-nums { display: flex; gap: 12px; margin: 14px 0; }
.result-nums .num-box { flex: 1; background: #fff8e6; border: 2px solid #f0dfba; border-radius: 14px; padding: 12px; }
.result-nums .n { font-size: 34px; font-weight: 800; }
.result-nums .t { font-size: 14px; color: #8a7c5f; }

/* 老师 / 管理员表格 */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { border-bottom: 1px solid #eee0bd; padding: 8px 6px; text-align: left; vertical-align: top; }
th { color: #8a7c5f; font-size: 13px; }
.sub-item { border: 2px solid #eee0bd; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: #fffdf7; }
.star-picker { display: flex; gap: 4px; font-size: 30px; margin: 6px 0; }
.star-picker span { cursor: pointer; color: #ddd; line-height: 1; }
.star-picker span.lit { color: #ffb92e; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip { background: #eef6ff; border: 2px solid #bcd6f5; color: #2456a6; border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer; min-height: 36px; font-weight: 600; }
select.class-switch { font-size: 19px; font-weight: 800; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-box { background: #fff8e6; border: 2px solid #f0dfba; border-radius: 14px; padding: 12px; text-align: center; }
.stat-box .n { font-size: 30px; font-weight: 800; }
.stat-box .t { font-size: 13px; color: #8a7c5f; }
details.teacher-block { border: 2px solid #eee0bd; border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; background: #fffdf7; }
details.teacher-block summary { font-weight: 800; font-size: 17px; cursor: pointer; }

/* v2：注册框 / 班级切换 / 标签 */
.reg-box { border: 2px dashed #bcd6f5; background: #f4f9ff; border-radius: 14px; padding: 14px; margin-top: 16px; }
.reg-box .reg-title { font-weight: 800; font-size: 17px; }
.class-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.class-chip { background: #fff; color: #55503f; border: 2px solid #e4d5ae; box-shadow: none; min-height: 52px; font-size: 16px; text-align: left; }
.class-chip .chip-sub { display: block; font-size: 13px; font-weight: 600; color: #8a7c5f; }
.class-chip.on { background: #22a06b; border-color: #22a06b; color: #fff; }
.class-chip.on .chip-sub { color: #dff5e9; }
.join-row { align-items: stretch; margin-top: 10px; }
.tag { display: inline-block; background: #fdf3da; border: 1.5px solid #ecd9a0; color: #7a6435; border-radius: 999px; padding: 0 9px; font-size: 13px; font-weight: 700; vertical-align: middle; }
.empty-state { font-size: 18px; font-weight: 700; color: #8a7c5f; text-align: center; padding: 18px 6px; }

/* v2：总览美化（渐变统计盒 / 卡片阴影 / 条纹表格 / 嵌套展开） */
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.overview-card { box-shadow: 0 6px 18px rgba(179, 98, 10, .12), 0 3px 0 #f0dfba; }
.stat-box { border: none; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.13); }
.stat-box .t { color: rgba(255,255,255,.88); }
.stat-box .s-icon { font-size: 24px; line-height: 1.1; }
.stat-box.g-green { background: linear-gradient(135deg, #22a06b, #5cc48a); }
.stat-box.g-blue { background: linear-gradient(135deg, #4a7de0, #7ba5ef); }
.stat-box.g-orange { background: linear-gradient(135deg, #ff8a3d, #ffb92e); }
.stat-box.g-purple { background: linear-gradient(135deg, #8e5fc0, #b28ede); }
.stat-box.g-teal { background: linear-gradient(135deg, #1f9e8f, #4cc2b4); }
.stat-box.g-pink { background: linear-gradient(135deg, #e56aa0, #f293bd); }
.role-badge { display: inline-block; background: linear-gradient(135deg, #8e5fc0, #b28ede); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 800; margin-left: 8px; vertical-align: middle; }
details.teacher-block { box-shadow: 0 2px 6px rgba(0,0,0,.05); }
details.class-block { border: 1.5px solid #f0dfba; border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: #fff; }
details.class-block summary { font-weight: 700; font-size: 16px; cursor: pointer; }
table.striped tbody tr:nth-child(even) td, table.striped tr:nth-child(even) td { background: #fff8e6; }

/* v3：学校标签与学校筛选 */
.tag-school { background: #eef6ff; border-color: #bcd6f5; color: #2456a6; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.filter-chip { background: #fff; color: #666; border: 2px solid #e4d5ae; border-radius: 999px; box-shadow: none; min-height: 40px; padding: 6px 16px; font-size: 15px; }
.filter-chip.on { background: #4a7de0; border-color: #4a7de0; color: #fff; }

/* v4：视频播放卡与游客提示 */
.video-slot { min-height: 54px; display: flex; align-items: center; }
.video-slot video { width: 100%; border-radius: 12px; background: #000; }
.guest-tip { background: #eef6ff; border: 2px solid #bcd6f5; color: #2456a6; border-radius: 12px; padding: 10px 12px; font-weight: 700; }

/* v4：⋯ 折叠菜单与删除确认弹窗 */
.kebab { position: relative; display: inline-block; }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 2px solid #e4d5ae; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(60, 45, 10, .18); padding: 6px; min-width: 168px;
}
.kebab-menu button {
  display: block; width: 100%; text-align: left; background: none; color: #33302a;
  box-shadow: none; min-height: 42px; padding: 8px 12px; font-size: 15px; font-weight: 600; border-radius: 8px;
}
.kebab-menu button:hover { background: #fff6e5; }
.kebab-menu button.danger { color: #c0392b; }
.kebab-menu button.danger:hover { background: #fdeceb; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; padding: 16px;
  background: rgba(40, 35, 25, .45); display: flex; align-items: center; justify-content: center;
}
.modal-card { background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 430px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.del-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; }

/* v4：总览海边主题（只作用于 .sea-wrap 内的管理员/校长总览，清爽海岛风） */
.sea-wrap {
  border-radius: 22px; padding: 18px 14px 24px;
  background: linear-gradient(180deg,
    #cdeffb 0%, #a5e0f5 18%, #6fc6e8 38%,
    #3ea9cf 58%, #2b93bd 74%, #8fd0dd 84%,
    #f7e3ae 92%, #f2d492 100%);
  box-shadow: 0 10px 28px rgba(18, 92, 128, .20);
}
.sea-wrap .card {
  background: rgba(255, 255, 255, .90);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-color: rgba(255, 255, 255, .75);
  box-shadow: 0 5px 16px rgba(13, 80, 112, .14);
}
.sea-wrap h2, .sea-wrap h3 { color: #075e75; }
.sea-wrap .muted { color: #3d7186; }
.sea-wrap .error { color: #b3372c; }
.sea-wrap .sea-wave { display: block; width: 100%; height: 32px; margin: 2px 0 10px; }
.sea-wrap .stat-box { border: none; color: #fff; box-shadow: 0 4px 10px rgba(7, 60, 84, .22); }
.sea-wrap .stat-box.g-green { background: linear-gradient(135deg, #0e9594, #3ec6a7); }
.sea-wrap .stat-box.g-blue { background: linear-gradient(135deg, #1b7fbd, #54b6ec); }
.sea-wrap .stat-box.g-orange { background: linear-gradient(135deg, #ff9a5a, #ffc46b); }
.sea-wrap .stat-box.g-purple { background: linear-gradient(135deg, #4a7fc9, #7fb2e8); }
.sea-wrap .stat-box.g-teal { background: linear-gradient(135deg, #0795b8, #3ec6d8); }
.sea-wrap .stat-box.g-pink { background: linear-gradient(135deg, #ff8f6b, #ffb08a); }
.sea-wrap .role-badge { background: linear-gradient(135deg, #0b7ea4, #35b6d9); }
.sea-wrap .tag { background: #e6f7fd; border-color: #a8dcf0; color: #075e75; }
.sea-wrap .tag-school { background: #e0f4fd; border-color: #9fd8ef; color: #0b6e8f; }
.sea-wrap .filter-chip { border-color: #a8dcf0; color: #0b6e8f; }
.sea-wrap .filter-chip.on { background: #0b7ea4; border-color: #0b7ea4; color: #fff; }
.sea-wrap details.teacher-block, .sea-wrap details.class-block {
  background: rgba(255, 255, 255, .94); border-color: #bfe6f2;
  box-shadow: 0 2px 8px rgba(13, 80, 112, .10);
}
.sea-wrap .hw-item { background: rgba(255, 255, 255, .85); border-color: #cdeef8; }
.sea-wrap table.striped tbody tr:nth-child(even) td, .sea-wrap table.striped tr:nth-child(even) td { background: #eaf8fd; }
.sea-wrap th { color: #3d7186; }
.sea-wrap th, .sea-wrap td { border-bottom-color: #d8f0f8; }

/* v14：老师端新版（班级卡片首页 + 点开式建班表单 + 详情数据条 + 深青主按钮） */
button.teal { background: linear-gradient(135deg, #0a6e82, #014554); }
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.home-head h2 { margin: 0 0 4px; }
.class-card-head { display: flex; align-items: center; gap: 8px; }
.class-card-name { font-size: 20px; font-weight: 800; margin-right: auto; }
.badge.open { background: #d9f5e3; color: #157347; }
.badge.closed { background: #eee; color: #777; }
.class-card-meta { margin: 8px 0 12px; }
.class-card-meta b { color: #b3620a; }
.enter-btn { width: 100%; }
.class-code-big { font-size: 20px; color: #b3620a; }
.detail-stats { margin-top: 14px; }
@media (min-width: 640px) { .stat-grid.detail-stats { grid-template-columns: repeat(4, 1fr); } }

/* v15：学生端新版（底部四菜单 / 欢迎卡 / 课程卡 / 一课一页 / 读题按钮） */
.student-content { padding-bottom: 92px; }
.student-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 2px solid #f0dfba;
  display: flex; justify-content: center;
  box-shadow: 0 -4px 14px rgba(120, 85, 10, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.stab {
  flex: 1; max-width: 215px; background: none; box-shadow: none; color: #8a7c5f;
  min-height: 60px; border-radius: 0; font-size: 14px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; position: relative; padding: 6px 0;
}
.stab .stab-icon { font-size: 22px; line-height: 1.15; }
.stab.on { color: #014554; }
.stab-dot { position: absolute; top: 8px; right: calc(50% - 22px); width: 10px; height: 10px; border-radius: 50%; background: #e2574c; }
.welcome-card { background: linear-gradient(135deg, #0a6e82, #014554); color: #fff; border: none; box-shadow: 0 4px 0 rgba(1, 45, 54, .35); }
.welcome-main { display: flex; align-items: center; gap: 12px; }
.welcome-text { flex: 1; }
.welcome-hi { font-size: 21px; font-weight: 800; }
.welcome-sub { font-size: 15px; opacity: .92; margin-top: 4px; }
.streak-box { background: rgba(255, 255, 255, .16); border-radius: 14px; padding: 10px 14px; text-align: center; }
.streak-n { font-size: 26px; font-weight: 800; white-space: nowrap; }
.streak-t { font-size: 12px; opacity: .9; }
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.course-card {
  background: #fff; border: 2px solid #f0dfba; border-radius: 16px; padding: 0;
  overflow: hidden; text-align: left; box-shadow: 0 3px 0 #f0dfba;
  display: flex; flex-direction: column; color: #33302a; font-weight: 600; min-height: 0;
}
.course-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.course-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.course-name { font-size: 17px; font-weight: 800; }
.course-sub { font-size: 14px; color: #8a7c5f; }
.course-meta { font-size: 13px; color: #0a6e82; font-weight: 700; }
.course-card.mixed-card { background: linear-gradient(135deg, #8e5fc0, #b28ede); border: none; color: #fff; }
.mixed-cover { font-size: 44px; text-align: center; padding: 20px 0 8px; }
.course-card.mixed-card .course-sub { color: rgba(255, 255, 255, .92); }
.course-card.mixed-card .course-meta { color: #fff; }
.course-card.coming { opacity: .8; box-shadow: none; cursor: default; }
.coming-cover { aspect-ratio: 16 / 9; background: repeating-linear-gradient(45deg, #f4ecd8, #f4ecd8 12px, #eee1c4 12px, #eee1c4 24px); display: flex; align-items: center; justify-content: center; font-size: 38px; }
.lesson-cover { position: relative; border-radius: 14px; overflow: hidden; background: #000; line-height: 0; }
.lesson-cover img { width: 100%; display: block; }
.lesson-cover video { width: 100%; display: block; }
.play-overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; min-height: 84px; border-radius: 50%;
  font-size: 32px; padding: 0 0 0 6px;
  background: rgba(1, 69, 84, .88); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.play-overlay:active { transform: translate(-50%, -50%) scale(.96); }
.q-text-row { display: flex; align-items: flex-start; gap: 10px; }
.q-text-row .q-text { flex: 1; }
.speak-btn {
  flex: 0 0 auto; width: 52px; height: 52px; min-height: 52px; border-radius: 50%;
  font-size: 24px; padding: 0; background: #ffb92e; box-shadow: 0 3px 0 rgba(180, 100, 0, .35);
}

/* ================= v16 英语课：跟读对话 + 单词卡 ================= */
.sec-eng { background: #e8873a; }
.eng-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; font-size: 46px; }
.eng-hero { display: flex; gap: 14px; align-items: center; border-radius: 14px; padding: 18px; }
.eng-hero-emoji { font-size: 52px; line-height: 1; }
.dlg-line { border: 1.5px solid #eee3d3; border-radius: 12px; padding: 12px; margin-top: 10px; background: #fffdf9; }
.dlg-line.playing { border-color: #e8873a; background: #fff3e2; }
.dlg-sp { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; color: #fff; }
.dlg-sp.sp-a { background: #4a7de0; }
.dlg-sp.sp-b { background: #e86a92; }
.dlg-en { font-size: 19px; font-weight: 700; margin-top: 7px; line-height: 1.45; }
.dlg-cn { color: #8a7c5f; font-size: 14px; margin-top: 2px; }
.dlg-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.dlg-done.on { background: #1f9e8f; color: #fff; }
button.recording { background: #e04a4a; color: #fff; }
.word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 单词卡：图文分家——照片区在上（4:3、人脸锚点裁切），文字区在下（卡面实色、深色字）。
 * 显式写 color/background 覆盖全局 button 的白字绿底，否则 .w-en 会继承 color:#fff 看不见 */
.word-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 14px; background: #fffdf7; border: 2px solid #f0dfba; box-shadow: 0 2px 6px rgba(122, 90, 23, .12); cursor: pointer; font: inherit; color: #33302a; }
.word-card .w-emoji { font-size: 38px; line-height: 1.2; padding: 16px 8px 0; text-align: center; }
.word-card .w-photo { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.word-card .w-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.word-card .w-text { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; }
.word-card .w-en { font-size: 20px; font-weight: 800; color: #014554; }
.word-card .w-cn { font-size: 14px; color: #6f6152; visibility: hidden; }
.word-card.flipped { background: #eefaf5; border-color: #9fd8c9; }
.word-card.flipped .w-cn { visibility: visible; color: #2e6b5e; }
.word-card .w-tip { font-size: 11px; color: #a5936f; }

/* ================= v17 课程按单元分组 ================= */
/* 单元分段标题（学生课程页「全部」视图 / 总览目录共用） */
.unit-head { font-size: 17px; font-weight: 800; color: #7a5a17; margin: 18px 0 10px; }
.unit-head .tag { margin-left: 2px; }
.unit-filter { margin: 2px 0 6px; }
/* 老师发布作业：分组单选列表 */
.hw-picker { border: 2px solid #f0dfba; border-radius: 14px; overflow: hidden; background: #fffdf7; }
.unit-group-title { background: #fdf3da; color: #7a5a17; font-weight: 800; font-size: 15px; padding: 8px 14px; border-top: 2px solid #f0dfba; }
.unit-group:first-child .unit-group-title { border-top: none; }
.pack-opt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px 12px 28px; font-weight: 600; font-size: 17px; cursor: pointer; border-top: 1px solid #f6ecd2; background: #fffdf7; }
.pack-opt input { width: auto; flex: 0 0 auto; transform: scale(1.25); accent-color: #014554; }
.pack-opt:has(input:checked) { background: #eefaf5; }
.hw-echo { background: #eef6ff; border: 2px solid #bcd6f5; color: #2456a6; border-radius: 12px; padding: 10px 12px; font-size: 16px; margin: 10px 0 12px; }
.sea-wrap .unit-head { color: #075e75; }

/* ================= v20 点评两级页 ================= */
.stat-box.clickable { cursor: pointer; }
.stat-box.clickable:active { transform: translateY(2px); }
/* 作业列表卡 */
.hw-grade-head { display: flex; align-items: flex-start; gap: 8px; }
.hw-grade-title { font-weight: 800; font-size: 18px; flex: 1; }
.hw-grade-meta { margin-top: 6px; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.pending-badge { background: #ffe1de; color: #b3372c; margin-left: 0; }
/* 批改页：进度条 + 页签 + 折叠行 */
.grade-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-weight: 700; }
.grade-progress .progress-track { flex: 1; }
.grade-progress .progress-fill { display: block; }
.grade-tabs { margin-top: 12px; }
.grade-row-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.grade-row-head .gr-name { display: flex; align-items: center; }
.grade-row-head .gr-meta { margin-left: auto; text-align: right; }
.gr-arrow { color: #b8a888; font-weight: 800; flex: 0 0 auto; }
.grade-panel { border-top: 1.5px dashed #eee0bd; margin-top: 10px; padding-top: 10px; }
.grade-miss-row { display: flex; align-items: center; gap: 6px; }

/* ================= v21 英语新题型（listen / speak） ================= */
/* 听力题：播放区 + 大播放按钮 */
.listen-zone { background: #eef6ff; border: 2px solid #bcd6f5; border-radius: 14px; padding: 14px; margin-bottom: 14px; text-align: center; }
.listen-play { font-size: 20px; width: 100%; min-height: 58px; }
/* 跟读/问答题：要读的英文大字 + 录音区 */
.speak-prompt { font-size: 26px; font-weight: 800; line-height: 1.5; background: #fff8ec; border: 2px solid #f0dfbe; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.rec-zone { margin-top: 12px; }
button.recording { animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
/* 英语视频样板课的视频位占位封面 */
.eng-video-ph { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
/* 老师批改展开区：口头作业块 */
.speak-block { background: #f4fbff; border: 2px solid #cfe8f5; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.speak-block-title { font-weight: 800; margin-bottom: 8px; }
.speak-row { padding: 8px 0; border-top: 1px dashed #d7ecf7; }
.speak-row:first-of-type { border-top: none; }
/* v23：口头作业机器评分（老师端摘要 + 学生端弱词 + 班级分数墙） */
.speak-meta { margin-top: 4px; }
.speak-score { color: #0a7d4f; font-size: 17px; }
.speak-weak { margin-top: 4px; color: #8a6d1a; }
.weak-chip { background: #fff7e0; border-color: #ecd28f; color: #8a6d1a; cursor: default; min-height: 0; padding: 2px 10px; }
/* v24：评分全维度展示——学生端总分大号标红、三项参考分小字、逐词分三色 chips（学生/老师共用色标） */
.speak-total { font-size: 42px; font-weight: 800; color: #d92d20; line-height: 1.2; }
.speak-refs { margin-top: 6px; font-size: 14px; color: #5b7183; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ws-chip { cursor: default; min-height: 0; padding: 3px 10px; font-size: 14px; }
.ws-good { background: #e7f8ee; border-color: #9adbb2; color: #0a7d4f; }
.ws-mid { background: #fff7e0; border-color: #ecd28f; color: #8a6d1a; }
.ws-bad { background: #fdeceb; border-color: #f5b3ae; color: #c0271b; }
.score-wall { background: #fffaf0; border: 2px solid #f0dfae; border-radius: 12px; padding: 12px; margin-top: 14px; text-align: left; }
.score-wall h3 { margin: 0 0 8px; text-align: center; }
.wall-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-top: 1px dashed #ecd9a0; }
.wall-row:first-of-type { border-top: none; }
.wall-row.mine { background: #eafaf1; border-radius: 8px; font-weight: 700; }
.wall-rank { width: 26px; text-align: center; font-weight: 800; color: #b8890c; }
.wall-name { flex: 1; }
.wall-star { color: #b8890c; font-size: 13px; font-weight: 700; }
.wall-score { font-weight: 800; color: #0a7d4f; }
.speak-q { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.5; }

/* v35 课程管理页（管理员/校长总览）＋册次切换行 */
.volume-filter { margin: 2px 0 10px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 8px 0 12px; }
.catalog-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #33505c; margin: 0; }
.catalog-filters select, .catalog-filters input { min-width: 112px; }
.catalog-summary { font-weight: 700; color: #014554; padding-bottom: 9px; }
.state-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.state-badge.st-on { background: #e2f4e4; color: #20713a; }
.state-badge.st-off { background: #fde8e4; color: #b23a2a; }
.state-badge.st-arch { background: #e8ecee; color: #5c6b72; }
.catalog-table td { vertical-align: middle; }