/* ═══════════════════════════════════════════
   panel.css — 教师端样式
   ═══════════════════════════════════════════ */

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap; gap: 8px;
}
.panel-head .ph-left { display: flex; align-items: center; gap: 10px; }
.panel-head h1 {
  font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.panel-head .ph-sub { font-size: 0.72rem; color: var(--text-dim); }
.panel-head .ph-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Tabs ── */
.panel-tabs { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.panel-tab {
  padding: 8px 20px; border-radius: 20px; cursor: pointer; font-family: inherit;
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text); font-size: 0.85rem; font-weight: 600; transition: all 0.15s;
  position: relative;          /* pp150：待办红点要挂在右上角 */
}
.panel-tab:hover { border-color: rgba(255,255,255,0.2); }
.panel-tab.active {
  background: linear-gradient(135deg, var(--accent), #ff8c00);
  color: #1a1a2e; font-weight: 800; border-color: transparent;
}

/* ── pp150 待办红点（教师端）───────────────────────────────────────
   老师原话：「如果有未处理的私信或者留言条，可以在按钮上添加红点显示」。
   教师端是**浅色**主题（--bg #EAF6FF / --card-bg #FFF / --text #3B3557，见 app.css 的
   `[data-pp-theme]` 覆盖），所以：
     · 底色用正红 #F04438（不带透明 —— 半透明红压在浅底上会糊成粉色，看着像禁用）；
     · 外圈用 --bg 描一圈，跟页签底色断开，看着是「贴在角标上的徽章」而不是
       「页签边角变红了」；
     · 数字用白字，字号压到 10px／行高 17px，两位数（99+）也装得下。
   ⚠ 必须 position:absolute + z-index，否则会把页签文字挤歪一圈。 */
body .panel-tab > .pp-nav-dot {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: #F04438; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  font-family: inherit; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--bg, #EAF6FF), 0 1px 4px rgba(0,0,0,0.35);
  animation: pp-dot-pop 0.18s ease-out;
}
@keyframes pp-dot-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* 老师正在看的那一页（.active 是橙黄渐变），描边换成白色 —— 浅底描边压在橙黄上会发灰 */
body .panel-tab.active > .pp-nav-dot {
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,0.35);
}
@media (max-width: 560px) {
  body .panel-tab > .pp-nav-dot { top: -5px; right: -5px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
}

/* ── 概览卡片 ── */
.pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pp-card {
  background: var(--card-bg); border-radius: 14px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06); text-align: center;
}
.pp-card .num { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.pp-card .num.c2 { color: var(--accent2); }
.pp-card .num.c3 { color: var(--accent3); }
.pp-card .num.c4 { color: #b388ff; }
.pp-card .lbl { font-size: 0.7rem; color: var(--text-dim); margin-top: 3px; }

/* ── 工具条 ── */
.pp-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pp-toolbar .grow { flex: 1; }
.pp-toolbar .pp-input, .pp-toolbar .pp-select { width: auto; }

/* ── pp201：教师端「按我的档案筛选」说明条 ──────────────────────────────
   老师设了任教班级/学科之后，页面上必须有一句话说明「你现在看到的范围」——
   否则会以为学生丢了半个班、或者以为正确率算错了。学生数据 / 错题本共用。 */
.pp-scope-note {
  margin: 0 0 12px; padding: 9px 14px; border-radius: 10px;
  background: rgba(78,205,196,0.10);
  border: 1px solid rgba(78,205,196,0.28);
  font-size: 0.78rem; line-height: 1.6; color: var(--text);
}
.pp-scope-note b { color: var(--accent2); font-weight: 700; }
.pp-scope-note .pp-dim { color: var(--text-dim); }

/* ── 表格 ── */
.pp-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); }
.pp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 720px; }
.pp-table th {
  text-align: left; padding: 10px 12px; color: var(--text-dim); font-size: 0.72rem;
  font-weight: 700; background: rgba(255,255,255,0.03); white-space: nowrap;
}
.pp-table td { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.pp-table tr:hover td { background: rgba(255,255,255,0.02); }
.pp-table .rank-cell { font-weight: 800; color: var(--text-dim); width: 44px; }
.pp-table .rank-cell.top1 { color: #ffd700; }
.pp-table .rank-cell.top2 { color: #c0c0c0; }
.pp-table .rank-cell.top3 { color: #cd7f32; }
.pp-table .name-cell { font-weight: 700; }
.pp-table .name-cell .acc { font-weight: 400; color: var(--text-dim); font-size: 0.72rem; }
.pp-table .pts { color: var(--accent); font-weight: 800; }
.pp-table .subj-cell { font-size: 0.72rem; color: var(--text-dim); max-width: 180px; line-height: 1.5; }
.pp-table .actions-cell { white-space: nowrap; }
/* pp122：操作列只剩「👀 查看 / ✉️ 私信 / ⋯」三个短按钮（编辑/重置/删除收进菜单了），
   不用再为了 5 个按钮提前换行 —— 断点从 1100 收到 620，1024 的笔记本上按钮排成一行。 */
@media (max-width: 620px) {
  .pp-table .actions-cell { white-space: normal; }
  .pp-table .actions-cell .btn { margin-bottom: 3px; }
}
/* 「请实名」已提醒状态：绿色描边 + 浅绿底，一眼看出这行已经提醒过了（pp76） */
.btn-tiny.rn-on {
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.45);
  background: rgba(76, 175, 80, 0.12);
}
.btn-tiny.rn-on:hover { background: rgba(76, 175, 80, 0.22); }

/* pp90：孤儿存档行（有存档、账号记录已经没了）——
   浅色底用深色实值，别用 --text-dim（在浅色面板上会糊成一片看不见）。
   整行淡黄底 + 左侧橙色竖条，扫一眼就知道这几行要处理。 */
.pp-table tr.pp-orphan-row { background: rgba(255, 193, 7, 0.10); }
.pp-table tr.pp-orphan-row:hover { background: rgba(255, 193, 7, 0.18); }
.pp-table tr.pp-orphan-row > td:first-child { box-shadow: inset 3px 0 0 #E08A00; }
.pp-orphan-tag { color: #B26A00; font-weight: 700; }

/* ── 分页 ── */
.pp-pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }
.pp-pager .info { font-size: 0.78rem; color: var(--text-dim); }

/* ── 学科管理 ── */
.subject-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.subject-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
  background: var(--card-bg); border-radius: 14px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.subject-toolbar .st-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.subject-toolbar .st-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subject-toolbar h3 { font-size: 1rem; }

/* 开关 */
.pp-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.pp-switch .track {
  width: 40px; height: 22px; border-radius: 12px; background: rgba(255,255,255,0.12);
  position: relative; transition: background 0.2s;
}
.pp-switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #888; transition: all 0.2s;
}
.pp-switch.on .track { background: rgba(46,204,113,0.4); }
.pp-switch.on .track::after { left: 20px; background: var(--green); }
.pp-switch .sw-label { font-size: 0.78rem; font-weight: 600; }

/* 题干单元格 */
.q-text-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-badge { display: inline-block; font-size: 0.68rem; padding: 1px 8px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text-dim); }
.q-badge.right { background: rgba(46,204,113,0.12); color: var(--green); }
.q-badge.t-choice { background: rgba(78,205,196,0.14); color: var(--accent2); }
.q-badge.t-fill { background: rgba(255,215,0,0.14); color: var(--accent); }
.q-badge.t-short { background: rgba(189,16,224,0.16); color: #d980f0; }
.q-badge.grade { background: rgba(255,107,107,0.12); color: var(--accent3); }
.q-badge.grade.gen { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* 题库年级筛选条 */
.bank-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card-bg); border-radius: 12px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.06); margin-bottom: 12px;
}
.bank-filter .bf-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.bank-filter .bf-types { display: inline-flex; gap: 6px; margin-left: 4px; }
.bank-filter .grow { flex: 1; }
.bank-filter .bf-count { font-size: 0.74rem; color: var(--text-dim); }
/* 题库关键词搜索（pp81）—— 教师端面板是浅色底（kid-app.css 最后加载），
   所以输入框/清除按钮/高亮都用深色实值，别用 --text-dim 之类的暗色系变量 */
.bank-filter .bf-search-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 1 300px; min-width: 176px; }
.bank-filter .bf-search {
  width: 100%; padding: 7px 28px 7px 11px; font-size: 0.82rem;
  background: #FFFFFF; border: 1px solid #D6D3E8; border-radius: 9px; color: #2E2A45;
  outline: none;
}
.bank-filter .bf-search::placeholder { color: #948FAC; }
.bank-filter .bf-search:focus { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(255,138,61,0.14); }
.bank-filter .bf-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; line-height: 1; border: 0; border-radius: 50%;
  background: #ECEAF4; color: #55507A; font-size: 0.68rem; cursor: pointer;
}
.bank-filter .bf-clear:hover { background: #E0DDF0; color: #2E2A45; }
mark.qk { background: #FFE9A8; color: #6B4E00; padding: 0 1px; border-radius: 3px; }
.q-type-area { border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 12px; margin-top: 2px; }

/* 选项编辑器 */
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opt-row input[type="radio"] { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.opt-row .pp-input { flex: 1; }
.opt-row .opt-del {
  background: none; border: none; color: var(--accent3); cursor: pointer;
  font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; flex-shrink: 0;
}
.opt-row .opt-del:hover { background: rgba(255,107,107,0.12); }
.opt-hint { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 10px; }
.import-result { margin-top: 10px; font-size: 0.78rem; line-height: 1.7; max-height: 140px; overflow-y: auto; }
.import-result .ok { color: var(--green); }
.import-result .bad { color: var(--accent3); }

/* ── 设置页 ── */
.set-section {
  background: var(--card-bg); border-radius: 16px; padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.06); margin-bottom: 14px;
}
.set-section h3 { font-size: 0.95rem; margin-bottom: 12px; }
.set-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.set-inline label { font-size: 0.82rem; min-width: 110px; color: var(--text); font-weight: 600; }
.set-tip { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }

/* ── pp200：我的信息 → 任教班级选择（6 年级 × 10 班的小方块）────────────
   为什么不是多选框：60 个 <option> 的多选下拉要按住 Ctrl 点，老师十个有九个不知道；
   这里按年级分行、一行十个数字，点一下亮一个，选了几个一眼可见。
   ⚠ 教师面板是**暗色**主题（--card-bg #1a1a2e / 白字），别按学生端那套浅色写。 */
.me-cls-wrap { display: flex; flex-direction: column; gap: 5px; flex: 1 1 320px; min-width: 0; }
.me-cls-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.me-cls-grade { font-size: 0.74rem; color: var(--text-dim); width: 54px; flex: none; }
.me-cls {
  width: 30px; height: 25px; border-radius: 7px; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 0.74rem; font-weight: 700; line-height: 1;
  background: transparent; color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.me-cls:hover { border-color: rgba(255,255,255,0.36); color: var(--text); }
.me-cls.on {
  background: linear-gradient(135deg, var(--accent), #ff8c00);
  border-color: transparent; color: #1a1a2e;
}
/* pp223：任教班级对非管理员只读 —— 灰掉、不给手型，选中的仍然看得出来是哪几个班 */
.me-cls-ro, .me-cls:disabled {
  cursor: not-allowed; opacity: 0.45;
}
.me-cls-ro.on, .me-cls:disabled.on {
  opacity: 0.72;
  background: linear-gradient(135deg, #A9A2C4, #BDB6D2);
  color: #fff;
}
.me-cls-ro:hover, .me-cls:disabled:hover { border-color: rgba(255,255,255,0.14); color: var(--text-dim); }
.me-cls-ro.on:hover, .me-cls:disabled.on:hover { color: #fff; }

.set-bg-area {
  width: 100%; height: 110px; border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.set-bg-preview { width: 100%; height: 100%; object-fit: cover; }
.set-bg-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.8rem; }
.set-bg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.set-bg-presets-label { font-size: 0.76rem; color: var(--text-dim); margin: 14px 0 8px; }
.set-bg-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.set-bg-thumb {
  position: relative; padding: 0; background: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 10;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.set-bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-bg-thumb span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 3px;
  font-size: 0.68rem; font-weight: 700; color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,0.62));
}
.set-bg-thumb:hover { transform: translateY(-2px); }
.set-bg-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,179,0,0.35); }

.set-pet-section { margin-bottom: 6px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.15); }
.set-pet-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  cursor: pointer; user-select: none; transition: background 0.15s;
}
.set-pet-header:hover { background: rgba(255,255,255,0.04); }
.set-pet-header.open { background: rgba(255,255,255,0.03); }
.set-pet-emoji { font-size: 1.3rem; }
.set-pet-name { font-size: 0.85rem; font-weight: 600; flex: 1; }
.set-pet-badge { font-size: 0.65rem; color: var(--text-dim); background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 10px; }
.set-pet-arrow { font-size: 0.7rem; color: var(--text-dim); transition: transform 0.2s; }
.set-pet-header.open .set-pet-arrow { transform: rotate(180deg); }
.set-pet-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.set-pet-body.open { max-height: 420px; overflow-y: auto; }
.set-lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; padding: 8px 12px 12px; }
.set-lv-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(0,0,0,0.12); border-radius: 8px; padding: 6px;
}
.set-preview-sm { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; }
.set-preview-img { width: 100%; height: 100%; object-fit: contain; }
.set-preview-num { font-size: 0.6rem; color: var(--text-dim); }
.set-lv-label { font-size: 0.6rem; color: var(--text-dim); }
.set-lv-upload-btn {
  padding: 2px 8px; font-size: 0.65rem; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); cursor: pointer; font-family: inherit;
}
.set-lv-upload-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.set-lv-clear {
  background: none; border: none; color: var(--accent3); font-size: 0.6rem;
  cursor: pointer; padding: 1px 4px;
}
.set-lv-clear:hover { background: rgba(255,107,107,0.15); border-radius: 4px; }

/* ── pp77 配图上传规范指引 ──
   ⚠ 教师端是浅色主题：文字必须用深色实值，别用 --text-dim / 浅绿色，
     否则白底上几乎看不见（踩过一次）。 */
.set-pet-guide {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 8px 0 12px; padding: 12px 14px;
  background: #f2faf2;
  border: 1px solid #bfe0c0;
  border-radius: 10px;
}
.set-pet-guide-fig {
  flex: none; position: relative;
  width: 92px; height: 92px;
  border: 1px solid #c3b89f; border-radius: 8px;
  /* 棋盘格＝透明背景，示意「背景要抠干净」 */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8e4d8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e4d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e4d8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e4d8 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.set-pet-guide-safe {
  position: absolute; inset: 8%;
  border: 1px dashed #2e7d32; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,125,50,0.1);
}
.set-pet-guide-safe span {
  font-size: 0.7rem; font-weight: 700; color: #1b5e20;
  background: rgba(255,255,255,0.94); padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(46,125,50,0.35);
}
.set-pet-guide-txt { flex: 1; min-width: 0; font-size: 0.76rem; line-height: 1.75; color: #4a4a3c; }
.set-pet-guide-txt > b { display: block; margin-bottom: 5px; font-size: 0.82rem; color: #2e7d32; }
.set-pet-guide-txt ul { margin: 0; padding-left: 1.1em; }
.set-pet-guide-txt li { margin-bottom: 3px; }
.set-pet-guide-txt li em { font-style: normal; font-weight: 700; color: #1b5e20; }
.set-pet-guide-auto {
  margin: 9px 0 0; padding: 7px 10px; font-size: 0.73rem;
  color: #33691e; background: #e8f5e9; border-left: 3px solid #7cb342; border-radius: 4px;
}
.set-pet-guide-auto b { color: #1b5e20; }
@media (max-width: 560px) {
  .set-pet-guide { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-pet-guide-fig { width: 74px; height: 74px; align-self: center; }
  .set-pet-guide-txt { font-size: 0.74rem; }
}

/* 批量建号结果 */
.create-result { margin-top: 12px; font-size: 0.8rem; line-height: 1.8; max-height: 160px; overflow-y: auto; }
.create-result .ok { color: var(--green); }
.create-result .bad { color: var(--accent3); }

/* ═══════════════ 批量建号 · Excel 导入（pp202）═══════════════
   教师端是浅色主题（--card-bg #FFF / --text #3B3557），这里全部按浅色写，
   边框用 rgba(120,110,170,…) —— 照抄暗色的 rgba(255,255,255,…) 等于看不见。 */
.bc-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; font-size: 0.76rem; color: var(--text-dim); }
.bc-steps span { display: inline-flex; align-items: center; gap: 6px; }
.bc-steps b {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(120,110,170,0.14); color: var(--text);
  align-items: center; justify-content: center; font-size: 0.7rem;
}
.bc-steps i { font-style: normal; opacity: 0.5; }
.bc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bc-tools .grow { flex: 1; }
.bc-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-dim); }
.bc-lab .pp-input-sm { width: 112px; }
.bc-preview { margin-top: 10px; }
.bc-empty {
  font-size: 0.78rem; color: var(--text-dim); padding: 18px 10px; text-align: center;
  border: 1px dashed rgba(120,110,170,0.3); border-radius: 12px;
}
.bc-sum { font-size: 0.78rem; margin-bottom: 6px; color: var(--text-dim); }
.bc-sum .ok { color: #2E7D32; }
.bc-sum .bad { color: #C2185B; }
.bc-wrap { max-height: 300px; overflow-y: auto; border-color: rgba(120,110,170,0.18); }
.bc-table { min-width: 0; font-size: 0.78rem; }
.bc-table td, .bc-table th { white-space: nowrap; padding: 8px 10px; }
/* .pp-table 的表头/分隔线是按暗色（rgba 白）写的，浅色底上等于看不见 —— 这里显式补一份 */
.bc-table th { color: #4A4460; background: rgba(120,110,170,0.08); }
.bc-table td { border-top: 1px solid rgba(120,110,170,0.14); }
.bc-table tr:hover td { background: rgba(120,110,170,0.05); }
.bc-table .bc-acc { font-family: ui-monospace, Consolas, monospace; font-size: 0.76rem; }
.bc-table .bc-issue { white-space: normal; font-size: 0.72rem; color: var(--text-dim); min-width: 150px; }
.bc-table tr.bc-bad td { background: rgba(233,30,99,0.07); }
.bc-table tr.bc-bad .bc-issue { color: #C2185B; }
.bc-table tr.bc-done td { background: rgba(76,175,80,0.09); }
.bc-table tr.bc-done .bc-issue { color: #2E7D32; }
.bc-dash { opacity: 0.45; }
.bc-okmark { color: #2E7D32; }

/* ═══════════════════ 教学开放范围（题库页） ═══════════════════ */
.scope-card {
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.scope-card.on { border-color: rgba(78,205,196,0.45); }
.scope-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(255,255,255,0.03); flex-wrap: wrap;
}
.scope-title { font-size: 0.86rem; font-weight: 700; }
.scope-sum { font-size: 0.76rem; color: var(--text-dim); }
.scope-card.on .scope-sum { color: var(--accent2); }
.scope-head #scope-toggle { margin-left: auto; }
.scope-body { padding: 6px 14px 12px; }
.scope-tip { font-size: 0.76rem; color: var(--text-dim); line-height: 1.7; margin: 6px 0 10px; }
.scope-tip b { color: var(--accent); }

/* ── pp151：开放范围的「保存到」多选班级 ─────────────────────────────
   老师原话：「设置题库开放的时候可不可以多选班级统一修改」。
   ⚠ 这里**不能**照抄 .class-chip：它用的是 rgba(255,255,255,.05) 的底 + 白描边，
     教师端是白底（--card-bg #FFF），照抄过来等于一条看不见的边框。 */
.scope-apply { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.scope-apply .sa-lbl { font-size: 0.76rem; font-weight: 700; color: var(--text-dim); margin-right: 2px; }
body .scope-chip {
  font-family: inherit; cursor: pointer; padding: 3px 11px; border-radius: 14px;
  border: 1px solid rgba(120,110,170,0.28); background: #fff;
  font-size: 0.75rem; font-weight: 600; color: var(--text); transition: all 0.15s;
}
body .scope-chip:hover { border-color: #FFB300; }
body .scope-chip.active {
  background: linear-gradient(135deg, var(--accent), #ff8c00);
  color: #4A3200; border-color: transparent; font-weight: 800;
}
.scope-apply #scope-clear { margin-left: 4px; }
.sa-tip { font-size: 0.74rem; color: #8A5A00; line-height: 1.6; margin: 2px 0 6px; }
.sa-tip b { color: #C0392B; }
.scope-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.scope-row .sr-label { font-size: 0.76rem; color: var(--text-dim); font-weight: 600; }
.scope-units { display: flex; flex-direction: column; gap: 8px; }
.scope-unit { background: rgba(0,0,0,0.14); border-radius: 10px; padding: 8px 10px; }
.scope-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; cursor: pointer; user-select: none;
}
.scope-chk input { accent-color: var(--accent2); cursor: pointer; width: 14px; height: 14px; }
.scope-unit-head { font-size: 0.82rem; }
.scope-unit-head b { color: var(--text); }
.su-cnt { font-size: 0.68rem; color: var(--text-dim); margin-left: 6px; }
.scope-lessons {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 9px 0 0 20px; padding-left: 10px;
  border-left: 2px solid rgba(255,255,255,0.07);
}
.sl-cnt { font-size: 0.66rem; color: var(--text-dim); margin-left: 3px; }
.scope-note { font-size: 0.72rem; color: var(--text-dim); margin-top: 9px; }
.scope-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.scope-actions .grow { flex: 1 1 auto; }

/* 年级块（pp79）：三上第 1 课和五上第 1 课是两门不同的课，
   界面必须按年级分开，否则两个年级的同一单元号会并成一组。 */
.scope-gblk {
  border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--accent2);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 10px;
}
.scope-gblk:last-of-type { margin-bottom: 0; }
.scope-gblk.off { opacity: 0.55; border-left-color: var(--text-dim); }
.scope-ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.scope-ghead .grow { flex: 1 1 auto; }
.scope-gchk b { font-size: 0.86rem; color: var(--text); }
.sg-cnt { font-size: 0.72rem; color: var(--text-dim); }
.scope-gblk .scope-units { gap: 6px; }
.scope-gblk .scope-unit { background: rgba(0,0,0,0.10); }

/* ═══════════════════ 题目配图 + 批量导入工具 ═══════════════════ */
.q-badge.unit { background: rgba(78,205,196,0.10); color: var(--accent2); }
.q-thumb-link { display: inline-block; line-height: 0; }
.q-thumb {
  width: 44px; height: 32px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14); background: #fff; transition: transform 0.12s;
}
.q-thumb:hover { transform: scale(1.6); }

/* 添加 / 编辑题目弹窗里的配图区 */
.q-img-edit { display: flex; gap: 12px; align-items: flex-start; }
.q-img-preview {
  width: 150px; height: 100px; border-radius: 10px; flex: 0 0 auto;
  border: 1px dashed rgba(255,255,255,0.16); background: rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.q-img-preview img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.q-img-btns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* 添加 / 编辑题目弹窗里的干扰项（选择题错误选项） */
.alt-inputs { display: flex; flex-direction: column; gap: 6px; }
.alt-inputs .pp-input { width: 100%; }
.alt-tip { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }
.alts-note { font-size: 0.68rem; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }
/* 图片选项题提示条：答案/干扰项里是图片地址，提醒老师别手改 */
.q-pic-note {
  margin: 4px 0 10px; padding: 9px 11px; border-radius: 10px;
  background: #FFF8E1; border: 1px solid #F0DFA8; border-left: 3px solid #E0B84C;
  font-size: 0.76rem; line-height: 1.7; color: #6B4E00;
}

/* 批量导入弹窗里的工具行 */
.im-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.im-tpl { text-decoration: none; }

/* ═══════════════════ 分班题库（班级范围） ═══════════════════ */
.class-chips {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -6px 0 14px;
  max-height: 132px; overflow-y: auto; padding: 2px;
}
.class-chips .cc-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.class-chip {
  font-family: inherit; cursor: pointer; padding: 4px 13px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  font-size: 0.78rem; font-weight: 600; color: var(--text); transition: all 0.15s;
}
.class-chip:hover { border-color: var(--accent2); }
.class-chip.active {
  background: linear-gradient(135deg, var(--accent), #ff8c00);
  color: #1a1a2e; border-color: transparent; font-weight: 800;
}
.bank-scope-tag {
  margin-left: 8px; padding: 2px 9px; border-radius: 8px; font-size: 0.68rem;
  font-weight: 600; vertical-align: middle;
  background: rgba(255,255,255,0.08); color: var(--text-dim);
}
.bank-scope-tag.cls { background: rgba(255,215,0,0.16); color: var(--accent); }
.bank-scope-note {
  margin-bottom: 12px; padding: 9px 13px; border-radius: 12px; font-size: 0.78rem;
  line-height: 1.5; color: var(--text);
  background: rgba(255,215,0,0.09); border: 1px solid rgba(255,215,0,0.22);
}

/* ═══ 打卡统计页 ═══ */
.stat-sec-title {
  font-size: 0.92rem; font-weight: 700; margin: 18px 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.stat-rule-tip {
  font-size: 0.7rem; font-weight: 400; color: var(--text-dim);
  background: rgba(255,255,255,0.05); padding: 2px 9px; border-radius: 8px;
}

/* 近 7 日趋势弹窗里的迷你条形图 */
.trend-bar {
  display: inline-block; width: 74px; height: 9px; vertical-align: middle;
  background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; margin-right: 7px;
}
.trend-bar > i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}

/* 按班级游戏规则：已配置班级列表 */
.set-cr-list {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.set-cr-list .set-inline { padding: 3px 0; }

/* ═══ 班级排名页 ═══ */
.rank-toolbar { flex-wrap: wrap; row-gap: 8px; }
.rank-sort-label { font-size: 0.76rem; color: var(--text-dim); font-weight: 600; }
.rank-sorts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rank-sort {
  font-family: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 12px; white-space: nowrap;
  border: 2px solid var(--kid-line, rgba(120,110,170,0.22));
  background: var(--card-bg, #fff); color: var(--text, #3B3557);
  transition: all 0.15s;
}
.rank-sort:hover { border-color: var(--accent2); }
.rank-sort.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #4ECDC4, #35B2A8);
  box-shadow: 0 4px 12px rgba(78,205,196,0.28);
}

/* 班级行可点开班内排名 */
.rank-table .rank-row { cursor: pointer; }
.rank-table .rank-row.expanded td { background: rgba(78,205,196,0.07); }
.rank-table .rank-row .btn { white-space: nowrap; }

/* 班内排名明细（展开行） */
.rank-detail > td { padding: 4px 12px 14px !important; border-top: none !important; }
.rank-detail-head { font-size: 0.8rem; font-weight: 700; margin: 4px 0 8px; color: var(--text); }
.rank-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 6px;
}
.rank-mini {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  padding: 7px 11px; border-radius: 11px; font-size: 0.78rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kid-line, rgba(120,110,170,0.18));
}
.rank-mini.top1 { background: #FFF7DF; border-color: #FFD98A; }
.rank-mini.top2 { background: #F6F6FA; border-color: #DCDCE8; }
.rank-mini.top3 { background: #FDF3E7; border-color: #E8C9A6; }
.rank-mini .rm-rank { font-weight: 800; color: var(--text-dim); min-width: 22px; flex: 0 0 auto; }
.rank-mini .rm-name {
  flex: 1 1 auto; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-mini .rm-stat { color: var(--accent); font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.rank-mini .rm-stat.rm-dim { color: var(--accent2); }
.rank-mini .rm-badge {
  font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 8px;
  background: rgba(120,110,170,0.14); color: var(--text-dim); white-space: nowrap; flex: 0 0 auto;
}
.rank-mini .rm-badge.ok { background: rgba(88,214,141,0.22); color: #2E9E63; }
.rank-tip { font-size: 0.72rem; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }

@media (max-width: 640px) {
  .rank-sorts { width: 100%; }
  .rank-detail-grid { grid-template-columns: 1fr; }
}

/* 班内排名可点击 → 只读查看该学生的乐园（pp34） */
.rank-mini[data-view] { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.rank-mini[data-view]:hover {
  border-color: #6C63C8; box-shadow: 0 2px 10px rgba(108,99,200,0.18); transform: translateY(-1px);
}
.rank-mini[data-view]::after { content: '👀'; font-size: 0.8rem; opacity: 0.45; flex: 0 0 auto; }
.rank-mini[data-view]:hover::after { opacity: 1; }

/* ── 错题本页签（教师端）──
   ⚠ ../kid-app.css 是最终覆盖层，新样式一律加 body 前缀把权重提到 (0,2,1) 以上 ── */
body .q-badge.wrong { background: rgba(231,76,60,0.14); color: #ff8a7a; }
body .wb-hot-table td { vertical-align: top; }
body .wb-q-cell { min-width: 220px; max-width: 380px; line-height: 1.55; }
body .wb-a-cell { color: var(--green); font-weight: 700; min-width: 90px; }
/* pp149：孩子当时写的原文（判分冤案取证用）→ 红色，跟正确答案并排一眼对比 */
body .wb-mine-cell { color: #ff9a8a; font-weight: 700; min-width: 90px; max-width: 200px; word-break: break-all; }
body .wb-day-row td {
  background: rgba(78,205,196,0.08); color: var(--accent2);
  font-weight: 700; letter-spacing: 0.02em;
}

/* ── 每周排名（pp50）── */
body .wk-weekbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body .wk-week {
  font-family: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  border: 2px solid var(--kid-line, rgba(120,110,170,0.22));
  background: var(--card-bg, #fff); color: var(--text, #3B3557);
  transition: all 0.15s;
}
body .wk-week:hover { border-color: #F5C518; }
body .wk-week.active {
  border-color: transparent; color: #6b4e00;
  background: linear-gradient(135deg, #FFE066, #FFC933);
  box-shadow: 0 4px 12px rgba(245,185,62,0.28);
}
/* ── 每周奖励编辑器（教师端是浅色主题：一律用暖棕系文字，别写浅金） ── */
body .wk-prize-box {
  padding: 12px 14px; border-radius: 14px; margin-bottom: 8px;
  background: linear-gradient(180deg, #FFFDF5, #FFF8E1);
  border: 2px dashed #FFD98A;
  transition: box-shadow .15s, border-color .15s;
}
body .wk-prize-box.dirty { border-color: #F5A623; box-shadow: 0 0 0 3px rgba(245,166,35,.16); }
body .wk-prize-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
body .wk-prize-ico { font-size: 1.05rem; }
body .wk-prize-title { font-size: 0.86rem; font-weight: 800; color: #B8860B; }
body .wk-prize-sub { font-size: 0.72rem; color: #8A7A5A; }
body .wk-prize-rows { display: flex; flex-direction: column; gap: 8px; }
body .wk-prize-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px;
  background: #fff; border: 1px solid #F3E3BE;
}
body .wk-prize-rank {
  flex: 0 0 auto; font-size: 0.76rem; font-weight: 800; color: #7A5C00;
  background: linear-gradient(135deg, #FFF0C2, #FFE39B);
  border: 1px solid #F0CE7A; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
body .wk-prize-row .pp-input { flex: 1; min-width: 190px; }
body .wk-prize-thumb {
  width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover;
  border-radius: 9px; border: 1px solid #F0CE7A; background: #fff; cursor: zoom-in;
}
body .wk-prize-nothumb {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: #BCA98A;
  border: 1px dashed #E8D5AE; border-radius: 9px; background: #FFFDF8;
}
body .wk-prize-who { font-size: 0.72rem; color: #8A7A5A; white-space: nowrap; }
body .wk-prize-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
body .wk-prize-count { font-size: 0.72rem; color: #B8860B; font-weight: 700; }
/* 「撤销修改」「● 未保存」常驻 DOM，只有编辑器处于 dirty 时才显示（打字不重渲染 → 不丢焦点） */
body .wk-prize-box .wk-prize-reset, body .wk-prize-box .wk-prize-dirty { display: none; }
body .wk-prize-box.dirty .wk-prize-reset { display: inline-flex; }
body .wk-prize-box.dirty .wk-prize-dirty { display: inline; color: #E07B00; }
/* 教师端点奖品缩略图放大 */
body .pp-img-zoom {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
body .pp-img-zoom img { max-width: 92vw; max-height: 88vh; border-radius: 10px; background: #fff; }
body .wk-table .wk-pts { font-size: 0.9rem; }
body .wk-table .wk-pts.zero { color: var(--text-dim); font-weight: 600; }
body .wk-table tr.wk-top1 td { background: #FFFBE6; }
body .wk-gift { font-size: 0.85rem; }

/* ── 每周排名：按年级分块（名次在年级内评） ──
   教师端浅色主题：用 neutral 灰紫 + 暖棕点缀，别写浅金 */
body .wk-grade-block { margin-bottom: 18px; }
body .wk-grade-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; margin-bottom: 8px; border-radius: 10px;
  background: linear-gradient(90deg, #F4F0FF, #FAF7FF);
  border-left: 4px solid #8B7BD8;
}
body .wk-grade-name { font-size: 0.94rem; font-weight: 800; color: #4B3F86; }
body .wk-grade-stat { font-size: 0.76rem; color: #6E6688; }
body .wk-grade-stat b { color: #4B3F86; }
body .wk-grade-cnt { font-size: 0.72rem; color: #8A7A5A; background: #fff; border: 1px solid #E4DCF7; border-radius: 999px; padding: 1px 9px; }
body .wk-prize-box .wk-prize-who { flex: 1 1 100%; }

/* ── 奖品库（pp109）：每行「📚 库」展开的面板 ──
   教师端浅色主题，沿用奖品编辑器的暖棕系；网格自适应，窄屏自动落成 2 列。
   ⚠ 面板底色必须是不透明实值（#FFFBEF）—— 面板压在白色卡片上，半透明会看穿。 */
body .wk-prize-item { display: flex; flex-direction: column; }
body .wk-prize-item.libopen .wk-prize-row {
  border-color: #E0B96A;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px rgba(245,166,35,.12);
}
body .wk-lib-n {
  display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 800; color: #7A5C00; background: #FFE9B0;
}
body .wk-lib-hint { color: #B8860B; font-weight: 800; }
body .wk-lib {
  padding: 8px 10px 10px; border-radius: 0 0 10px 10px;
  background: #FFFBEF; border: 1px solid #E0B96A; border-top: none;
}
body .wk-lib-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.72rem; font-weight: 700; color: #7A5C00; margin-bottom: 8px;
}
body .wk-lib-cnt { font-size: 0.68rem; color: #8A7A5A; font-weight: 600; }
body .wk-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px;
  max-height: 262px; overflow-y: auto; padding-right: 2px;
}
body .wk-lib-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: #fff; border: 1px solid #F3E3BE;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
body .wk-lib-item:hover { border-color: #E0B96A; box-shadow: 0 2px 8px rgba(200,147,58,.18); }
body .wk-lib-item:active { transform: scale(.98); }
body .wk-lib-thumb {
  width: 34px; height: 34px; flex: 0 0 auto; object-fit: cover;
  border-radius: 7px; border: 1px solid #F0CE7A; background: #fff;
}
body .wk-lib-nothumb {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.56rem; color: #BCA98A;
  border: 1px dashed #E8D5AE; border-radius: 7px; background: #FFFDF8;
}
body .wk-lib-tx {
  flex: 1; min-width: 0; font-size: 0.73rem; color: #4A3D22; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
body .wk-lib-tx i { color: #BCA98A; font-style: normal; }
body .wk-lib-del {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  border-radius: 50%; border: 1px solid #E8D5AE; background: #fff;
  color: #B08A4A; font-size: 0.62rem; cursor: pointer;
}
body .wk-lib-del:hover { background: #FDECEC; border-color: #E5A0A0; color: #C0392B; }
body .wk-lib-empty { font-size: 0.72rem; color: #8A7A5A; }

/* ── 每周奖励：按年级分套的页签（pp58） ──
   教师端浅色主题：没选中的用白底 + 浅棕边，选中的用暖棕渐变实心 */
body .wk-prize-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dashed #F0DFB8;
}
body .wk-prize-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-size: 0.76rem; font-weight: 700; color: #7A5C00;
  background: #fff; border: 1px solid #EAD9B4;
  transition: background .15s, border-color .15s, color .15s;
}
body .wk-prize-tab:hover { border-color: #E0B96A; background: #FFFBEF; }
body .wk-prize-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #C8933A, #A9741F);
  box-shadow: 0 3px 9px rgba(169,116,31,0.24);
}
body .wk-prize-tab.dirty { border-style: dashed; border-color: #F5A623; }
body .wk-prize-tab.active.dirty { border-style: solid; border-color: #FFD98A; }
body .wk-prize-dot { font-size: 0.6rem; color: #E07B00; line-height: 1; }
body .wk-prize-tab.active .wk-prize-dot { color: #FFE9B0; }
body .wk-prize-fallback {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 6px 10px; border-radius: 9px;
  font-size: 0.73rem; color: #6E6688;
  background: #F6F3FF; border: 1px dashed #D9D0F2;
}

/* ── 留言条（pp70）：学生给本年级同学和老师留的言 ──
   ⚠ kid-app.css 是最终覆盖层，面板是**浅色**的：白卡片 + kid-line 描边 + #3B3557 字。
      别用 rgba(255,255,255,.0x) 做面，白底上看不见。 */
.nw-list { display: flex; flex-direction: column; gap: 14px; }
/* 类型筛选提示（pp72）：只在筛了日常/奖品时出现 */
.nw-filter-note {
  margin-bottom: 12px; padding: 8px 12px; border-radius: 10px;
  background: #FFF7DF; border: 1px solid #FFD98A; color: #8A6D1F;
  font-size: 0.78rem; font-weight: 700;
}
.nw-day { display: flex; flex-direction: column; gap: 8px; }
.nw-day-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.84rem; font-weight: 800; color: #2FA98C;
  padding-bottom: 4px; border-bottom: 2px solid rgba(120,110,170,.16);
}
.nw-day-n { font-size: 0.7rem; font-weight: 600; color: #A79EBE; }
.nw-item {
  background: #fff; border: 2px solid rgba(120,110,170,.18);
  border-radius: 13px; padding: 10px 12px;
}
.nw-item-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nw-av { font-size: 1rem; line-height: 1; }
.nw-nm { font-size: 0.86rem; font-weight: 800; color: #3B3557; }
.nw-cls { font-size: 0.72rem; color: #8E86A6; }
.nw-kd {
  padding: 1px 7px; border-radius: 9px; font-size: 0.68rem; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent;
}
.nw-kd.daily { background: #EAFBF9; color: #2FA98C; border-color: rgba(78,205,196,.45); }
.nw-kd.prize { background: #FFF3D6; color: #C67C00; border-color: #F5D08A; }
.nw-tm { font-size: 0.7rem; color: #A79EBE; }
.nw-del { margin-left: auto; }
.nw-tx {
  margin-top: 7px; font-size: 0.88rem; line-height: 1.7; color: #3B3557;
  white-space: pre-wrap; word-break: break-word;
}
.nw-tip { margin-top: 12px; font-size: 0.72rem; color: #8E86A6; text-align: center; line-height: 1.7; }

/* ── 留言审核（pp73）──
   ⚠ 面板是浅色底：状态色一律「深字 + 浅底 + 描边」，别用纯白或浅金（看不见）。 */
/* 顶部待办提醒：还有没审的留言时压在统计卡下面 */
.nw-review-note {
  margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px;
  background: #FFF4E5; border: 1px solid #F5C27A; color: #A85B00;
  font-size: 0.8rem; font-weight: 700; line-height: 1.6;
}
.nw-review-note b { font-size: 0.95rem; }

/* pp221：留言墙按任教班级隔离 —— 顶部一条常驻说明（不是警告色，是"口径说明"）。
   老师看到的人数比别的老师少时，得有个明面上的理由，否则会以为后台丢数据。 */
.nw-scope {
  margin: -4px 0 12px; padding: 7px 12px; border-radius: 10px;
  background: #EFF3FB; border: 1px solid #C9D8F0; color: #35507A;
  font-size: 0.78rem; line-height: 1.6;
}
.nw-scope b { color: #2A4066; }
.nw-scope .pp-dim { color: #7B8AA6; }

/* 每条留言的状态徽章 */
.nw-st {
  padding: 1px 7px; border-radius: 9px; font-size: 0.66rem; font-weight: 800;
  white-space: nowrap; border: 1px solid transparent;
}
.nw-st.s-pending { background: #F0EEFA; color: #6B6386; border-color: rgba(120,110,170,.28); }
.nw-st.s-ok { background: #E7F9EE; color: #2E9E63; border-color: rgba(88,214,141,.55); }
.nw-st.s-rejected { background: #FFECEC; color: #C0392B; border-color: #F0A6A6; }

/* 待审＝虚线圈（一眼看出还没放行）；未通过＝红边红底（要跟学生谈的那几条） */
.nw-item.s-pending { border-style: dashed; }
.nw-item.s-rejected { border-color: #F3C2C2; background: #FFF8F8; }
.nw-why {
  margin-top: 7px; padding: 5px 9px; border-radius: 9px;
  background: #FFF0F0; color: #A83A2E; font-size: 0.78rem; line-height: 1.6;
}

/* 操作行（通过 / 不通过 / 删除） */
.nw-acts { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* 记录与禁言台账 */
.nw-judge {
  margin-top: 14px; padding: 10px 12px; border-radius: 13px;
  background: #FFF8F8; border: 1px solid #F3C2C2;
}
.nw-judge-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 0.82rem; font-weight: 800; color: #A83A2E;
}
.nw-judge-head span { font-size: 0.7rem; font-weight: 600; color: #B98A8A; }
.nw-jrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px dashed rgba(168,58,46,.18);
}
.nw-judge-head + .nw-jrow { border-top: 0; }
.nw-jnm { font-size: 0.82rem; font-weight: 800; color: #3B3557; }
.nw-jg { margin-left: 5px; font-size: 0.68rem; font-weight: 600; color: #8E86A6; }
.nw-jst {
  padding: 1px 7px; border-radius: 9px; font-size: 0.66rem; font-weight: 800;
  white-space: nowrap; border: 1px solid transparent;
}
.nw-jst.warn { background: #FFF3D6; color: #C67C00; border-color: #F5D08A; }
.nw-jst.ban { background: #FFECEC; color: #C0392B; border-color: #F0A6A6; }
.nw-jnote {
  flex: 1 1 90px; min-width: 0; font-size: 0.72rem; color: #B98A8A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 出题形态提示（pp71）：只能出选择题 / 不出填空 ──
   ⚠ kid-app.css 里 .q-badge 是浅色（#F1EDFF 底），这里用「类叠加」提权重把颜色盖过去。 */
.q-badge.only-choice, .q-badge.no-fill { margin-left: 6px; border: 1px solid transparent; white-space: nowrap; }
.q-badge.only-choice { background: #EAFBF9; color: #2FA98C; border-color: rgba(78,205,196,.45); }
.q-badge.no-fill { background: #FFF3D6; color: #C67C00; border-color: #F5D08A; }

/* ══ 留言回复 / 老师留言（pp77）═════════════════════════════════════ */

/* 老师留言写字区（点「✍️ 老师留言」展开，默认收起） */
.nw-writebox {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 14px;
  background: #F6F4FF; border: 1px solid rgba(124,108,240,.34);
}
.nw-write-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 0.76rem; font-weight: 800; color: #5B45C9; margin-bottom: 8px;
}
.nw-write-input {
  width: 100%; resize: vertical; font-family: inherit; font-size: 0.86rem; line-height: 1.6;
  padding: 8px 10px; border-radius: 11px; color: #3B3557; background: #fff;
  border: 2px solid rgba(124,108,240,.28);
}
.nw-write-input:focus { outline: none; border-color: #7C6CF0; }
.nw-write-input::placeholder { color: #A79EBE; }
.nw-write-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nw-write-cnt { font-size: 0.72rem; color: #8E86A6; margin-right: auto; }

/* 老师发的留言 / 回复：浅紫，跟学生的一眼分开 */
.nw-item.by-teacher { background: #F8F6FF; border-color: rgba(124,108,240,.34); }
.nw-kd.teacher { background: #EFEBFF; color: #5B45C9; border-color: rgba(124,108,240,.42); }

/* 一条留言下面的回复 */
.nw-reps {
  margin-top: 9px; padding: 8px 9px 3px; border-radius: 11px;
  background: #FBFAFF; border: 1px dashed rgba(120,110,170,.28);
}
.nw-reps-head {
  font-size: 0.72rem; font-weight: 800; color: #8E86A6; margin-bottom: 6px;
}
.nw-rep { padding: 6px 0 8px; border-top: 1px solid rgba(120,110,170,.14); }
.nw-rep:first-of-type { border-top: none; }
.nw-rep.p-pending { background: #FFFCF3; border-radius: 9px; padding-left: 7px; padding-right: 7px; }
.nw-rep.p-rejected { background: #FFF8F8; border-radius: 9px; padding-left: 7px; padding-right: 7px; }
.nw-rep.p-teacher { background: #F4F1FF; border-radius: 9px; padding-left: 7px; padding-right: 7px; }
.nw-rep-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* pp111：这条回复在接谁的话 —— 老师审核时先看清「他在回谁」 */
.nw-rep-to {
  display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 7px;
  font-size: 0.68rem; font-weight: 800; color: #1F6FA8;
  background: #EAF4FF; border: 1px solid rgba(31,111,168,.24);
}
.nw-rep-tx {
  margin-top: 4px; font-size: 0.82rem; line-height: 1.6; color: #3B3557;
  white-space: pre-wrap; word-break: break-word;
}
.nw-rep-acts { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.nw-rep-acts .btn { flex: 0 0 auto; }

/* ── pp85：教师端留言附图 + 「上周获奖同学」编辑器 ─────────────────────
   ⚠ 教师面板是**浅色**底（kid-app.css 最后加载）→ 一律深棕/深紫字 + 白/暖黄底。 */

/* 留言列表里的附图（审核时也能看到学生发的照片） */
.nw-img {
  display: block; margin-top: 7px;
  max-width: 100%; max-height: 240px; width: auto; height: auto;
  border-radius: 10px; border: 1px solid rgba(120,110,170,.22);
  background: #fff; object-fit: contain; cursor: zoom-in;
}
/* pp199：回复里的附图（比留言本身小一号，免得一屏全是图） */
.nw-rep-img {
  display: block; margin-top: 5px;
  max-width: 100%; max-height: 180px; width: auto; height: auto;
  border-radius: 9px; border: 1px solid rgba(120,110,170,.22);
  background: #fff; object-fit: contain; cursor: zoom-in;
}

/* 老师留言写字区里的「📷 配图」 */
.nw-write-att { display: inline-flex; align-items: center; gap: 6px; }
.nw-write-att .nw-write-thumb {
  width: 34px; height: 34px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(120,110,170,.24); background: #fff; cursor: zoom-in;
}

/* ── 上周获奖同学编辑器（pp92：名单自动生成，老师只传照片）──
   ⚠ 教师面板是**浅色底**，这里全部用深色实值（#8A6A17 / #6B4E00 / #A07C2A），
     别用 --text-dim —— 那是给深色底准备的，浅底上会糊成一片看不见。 */
body .wk-honor-box {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #FFFDF5, #FFF8E1);
  border: 2px solid #FFDFA0;
}
body .wk-honor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
body .wk-honor-ico { font-size: 1.05rem; }
body .wk-honor-title { font-size: 0.86rem; font-weight: 800; color: #B8860B; }
body .wk-honor-week {
  margin-left: auto; font-size: 0.7rem; font-weight: 700; color: #6B4E00;
  background: #FFF0C8; border: 1px solid #F0CE7A; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap;
}
body .wk-honor-sub {
  font-size: 0.72rem; color: #8A7A5A; line-height: 1.7; margin-bottom: 10px;
}
body .wk-honor-sub b { color: #8A6D1F; }
body .wk-honor-empty {
  font-size: 0.74rem; color: #6B4E00; line-height: 1.7;
  padding: 10px 12px; border-radius: 10px;
  background: #FFF6DC; border: 1px dashed #E8D5AE;
}
/* 年级分组 */
body .wk-honor-g { margin-top: 10px; }
body .wk-honor-ghead {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 6px;
}
body .wk-honor-gname { font-size: 0.78rem; font-weight: 800; color: #6B4E00; }
body .wk-honor-gstat {
  font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 1px 9px;
  white-space: nowrap;
}
body .wk-honor-gstat.todo { color: #B23B00; background: #FFE7D6; border: 1px solid #FFC4A0; }
body .wk-honor-gstat.done { color: #1B6B32; background: #E8F7EC; border: 1px solid #B5E3C2; }
/* 一个人一行 */
body .wk-honor-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid #F3E3BE;
}
body .wk-honor-row:last-child { margin-bottom: 0; }
body .wk-honor-row.todo { background: #FFFDF6; border-style: dashed; border-color: #E4CFA2; }
/* 把「传照片」按钮顶到最右（.grow 只在特定父容器里生效，这里得自己声明） */
body .wk-honor-row > .grow { flex: 1 1 auto; min-width: 0; }
body .wk-honor-medal { flex: 0 0 auto; font-size: 1rem; font-weight: 800; color: #A07C2A; min-width: 26px; text-align: center; }
body .wk-honor-thumb {
  width: 46px; height: 46px; flex: 0 0 auto; object-fit: cover;
  border-radius: 10px; border: 1px solid #F0CE7A; background: #fff; cursor: zoom-in;
}
body .wk-honor-nothumb {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.6rem; line-height: 1.3; color: #A08250;
  border: 1px dashed #E8D5AE; border-radius: 10px; background: #FFFDF8;
}
body .wk-honor-who { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
body .wk-honor-nm { font-size: 0.82rem; font-weight: 800; color: #3A2E12; }
body .wk-honor-meta { font-size: 0.68rem; color: #8A7A5A; }
body .wk-honor-prize {
  font-size: 0.7rem; font-weight: 700; color: #6B4E00;
  background: #FFF6DC; border: 1px solid #F0CE7A; border-radius: 8px;
  padding: 2px 8px; max-width: 240px;
}
/* pp105：行内奖品小图（快照）—— 一眼看出「当时那份奖品长什么样」 */
body .wk-honor-pthumb {
  width: 26px; height: 26px; flex: 0 0 auto; object-fit: cover;
  border-radius: 6px; border: 1px solid #F0CE7A; background: #fff; cursor: zoom-in;
}
body .wk-honor-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
body .wk-honor-count { font-size: 0.72rem; color: #8A6A17; font-weight: 700; }

@media (max-width: 620px) {
  body .wk-honor-who { flex: 1 1 90px; }
  body .wk-honor-prize { flex: 1 1 100%; max-width: none; }
}

/* pp116：学生数据行的「✉️ 私信」按钮 —— 学生发来悄悄话没读时标红（●N 由 JS 填） */
.pm-row-btn.has-unread {
  color: #B23A2E; background: #FFF0EC; border-color: rgba(214,90,74,0.5); font-weight: 800;
}
.pm-row-btn.has-unread:hover { background: #FFE2DB; }

/* ═══════════════════════════════════════════════════════════════
   pp121 · 教师端「道具卡花费」列（学生数据 / 班级排名 / 导出 CSV）
   ⚠ 只是展示：花销记在存档 spentPoints 里，**不减总积分、不影响任何排名口径**。
   0 值走 dim-zero 灰显 —— 一个班十几行全是「0」会抢掉真正有数据的行。
   ═══════════════════════════════════════════════════════════════ */
.pp-card .num.c5 { color: #f0a33c; }
.pp-table td.dim-zero { color: var(--text-dim); font-weight: 400; opacity: 0.55; }
.rank-mini .rm-stat.rm-spent { color: #E08A00; }

/* pp121：班内小卡多了「🎴 花费」一个 chip 后，nowrap 会把学生名字挤成「UI…」
   → 允许换行（只在这行真的放不下时才换，放得下时外观不变）。 */
.rank-mini { flex-wrap: wrap; row-gap: 3px; }

/* ═══════════════════════════════════════════════════════════════
   pp122 · 教师端两级导航 + 概览卡瘦身
   为什么改：
     · 原来 8 个标签平铺（数据/排名/统计/内容/设置混在一层），1440 宽刚好塞满、
       1024 宽就换行；现在 5 个一级栏目 + 右侧子页胶囊。
     · 每页 4~7 张 KPI 大卡（数字 1.4rem、内边距 14/16）把内容压到屏幕折线以下，
       学生数据页光卡片就吃掉 ~90px。卡缩一号、留白收紧，页面立刻松下来。
   ═══════════════════════════════════════════════════════════════ */
.panel-tabs { align-items: center; gap: 6px; margin: 12px 0 10px; }
.panel-tab { padding: 7px 16px; font-size: 0.82rem; }
/* 有子页的栏目被选中时用「淡底 + 描边」，而不是实心橙 —— 实心橙留给当前**子页**，
   一层只能有一个最重的焦点（不然两排都是亮的，看不出自己在哪一页）。
   ⚠ 字色用深棕橙 #8A5A00：主题的 --accent 是 #FFB300，直接当 12px 正文字用对比度只有 ~1.9:1，
      浅底上看着像灰色的（pp123 连同菜单一起提对比度）。 */
.panel-tab.on {
  background: rgba(255,179,0,0.16); color: #8A5A00;
  border-color: rgba(255,179,0,0.48);
}
/* 子页胶囊：贴在右端，视觉上明确「从属」于当前栏目（小一号、灰字）
   ⚠ 底色不能用 rgba(255,255,255,.05)：教师端是白底，白 5% = 看不见，胶囊会像三个裸字 */
.panel-subtabs {
  display: flex; gap: 2px; margin-left: auto;
  background: rgba(120,110,170,0.08); border-radius: 18px; padding: 3px;
  border: 1px solid rgba(120,110,170,0.22);
}
.panel-subtab {
  padding: 5px 13px; border-radius: 15px; cursor: pointer; font-family: inherit;
  background: transparent; border: none; color: #6B6386;
  font-size: 0.78rem; font-weight: 600; transition: all 0.15s; white-space: nowrap;
}
.panel-subtab:hover { color: #3B3557; background: rgba(120,110,170,0.10); }
/* 当前子页：白底 + 深棕橙字（不用 --accent：#FFB300 在白底上只有 ~1.9:1） */
.panel-subtab.active {
  background: #FFFFFF; color: #8A5A00; font-weight: 800;
  box-shadow: 0 1px 4px rgba(59,53,87,0.14);
}
@media (max-width: 760px) {
  /* 窄屏：子页胶囊换到一级标签下面一行，两边都撑满 */
  .panel-tabs { gap: 4px; }
  .panel-subtabs { margin-left: 0; flex: 1 1 100%; justify-content: flex-start; }
}

/* 概览卡缩一号（原 padding 14/16、数字 1.4rem）
   ⚠ 只留 3 张卡的页面（学生数据）用 1fr 会把每张拉到 300px 宽、数字孤零零居中，
     所以给卡片封顶 168px 并左对齐；auto-fit 会把多余的空轨道塌掉，不会留缝。 */
.pp-card { padding: 9px 12px; border-radius: 12px; }
.pp-card .num { font-size: 1.15rem; }
.pp-card .lbl { font-size: 0.66rem; margin-top: 1px; }
.pp-cards { gap: 8px; margin-bottom: 10px; grid-template-columns: repeat(auto-fit, minmax(112px, 152px)); justify-content: start; }

/* ═══ pp122：操作列「⋯」菜单 + 实名小标签 ═══════════════════════════
   菜单用 fixed + 遮罩：表格容器有 overflow，放单元格里会被裁。
   ⚠⚠ 配色必须用**浅色实值**，不能用 var(--text) + 深色底：
     教师端最后加载的 ../kid-app.css 把 --card-bg 覆盖成 #FFFFFF、--text 覆盖成 #3B3557，
     我当时按深色主题写了 background:#2b2b40 + color:var(--text) → 深底深字，对比度约 1.6:1，
     点开菜单几乎什么都看不见（pp123 修）。深色实值这套在 panel 里一律别用。 */
.row-menu-mask { position: fixed; inset: 0; z-index: 9998; background: rgba(59,53,87,0.10); }
.row-menu {
  position: fixed; z-index: 9999; min-width: 150px; padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  background: #FFFFFF; border: 1px solid rgba(120,110,170,0.30);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(59,53,87,0.22);
}
.row-menu button {
  text-align: left; padding: 9px 12px; border: none; border-radius: 8px;
  background: transparent; color: #3B3557; font-family: inherit;
  font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.row-menu button:hover { background: #F3F0FA; }
.row-menu button.danger { color: #C62828; }
.row-menu button.danger:hover { background: #FDECEC; }
/* 「⋯」本身也得看得清：加粗 + 实色，别用默认的淡字 */
.row-more-btn {
  padding-left: 11px; padding-right: 11px; font-weight: 800; letter-spacing: 1.5px;
  font-size: 1rem; line-height: 1; color: #3B3557;
}
/* 实名小标签：0.66rem + 0.72 透明在浅底上太糊，收到 0.7rem / 0.85 */
.rn-chip { margin-top: 3px; font-size: 0.7rem; padding: 1px 7px; opacity: 0.85; color: #6B6288; }
.rn-chip:hover { opacity: 1; }
.rn-chip.rn-on { color: #2E7D32; border-color: rgba(46,125,50,0.4); opacity: 1; }

/* pp122：短字段不再折行 —— 1024 宽下「三年级9班」会断成两行、「2026-10-19」会断成
   「2026-10- / 19」，一行表格被撑成两行高，整张表看起来像坏掉。
   表格自己要更宽就让 .pp-table-wrap 横滑（本来就有 overflow-x:auto）。 */
.pp-table td { white-space: nowrap; }
.pp-table .subj-cell { white-space: normal; }
@media (max-width: 1100px) {
  .pp-table td, .pp-table th { padding-left: 8px; padding-right: 8px; }
}

/* ═══════════════════════════════════════════
   pp130 教师端「✉️ 私信」集中页
   老师原话：私信我时要一个个翻学生数据页，太麻烦。
   ⚠ 颜色全部跟着教师端主题变量走（panel.css 通篇用 rgba(255,255,255,.06) 的边框，
    说明这里本来就是深色底）—— 别再写死浅色，会把一屏白块糊在深色面板上。
   ═══════════════════════════════════════════ */
.pm-inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.pm-inbox-title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.pm-inbox-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); margin-left: 8px; }
.pm-inbox-sum { color: #FF8A8A; }

.pm-inbox-list { display: flex; flex-direction: column; gap: 8px; }
.pm-inbox-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pm-inbox-row:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.pm-inbox-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm-inbox-row.has-unread { border-color: rgba(255,179,0,0.55); background: rgba(255,179,0,0.08); }

.pm-inbox-av {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.pm-inbox-av .av-img, .pm-inbox-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.pm-inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-inbox-nm {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 800; color: var(--text);
}
.pm-inbox-cls {
  font-style: normal; font-size: 0.68rem; font-weight: 600;
  color: var(--text-dim); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 0 5px;
}
.pm-inbox-badge {
  font-size: 0.66rem; font-weight: 800; color: #fff;
  background: #FF5B5B; border-radius: 9px; padding: 1px 6px; line-height: 1.5;
}
.pm-inbox-pv {
  font-size: 0.76rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-inbox-pv em { font-style: normal; color: rgba(255,255,255,0.45); }
/* pp194：私信正文命中时预览前面那个小放大镜（搜「那句话是谁说的」靠它指路） */
.pm-inbox-kw { font-weight: 800; color: #7C6BB0; margin-right: 3px; }
.ti-side .pm-inbox-kw { color: #8B78C9; }
.pm-inbox-tm { font-size: 0.68rem; color: var(--text-dim); flex: 0 0 auto; opacity: .8; }

.pm-inbox-empty {
  padding: 26px 16px; text-align: center; line-height: 1.9;
  font-size: 0.82rem; color: var(--text-dim);
  background: rgba(255,255,255,0.03); border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.1);
}
.pm-inbox-empty b { color: var(--text); }

/* ── pp131 同学之间待审核的私信（排在私信页最上面） ── */
.pmx-pend {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,179,0,0.06); border: 1px solid rgba(255,179,0,0.35);
}
.pmx-pend-head {
  font-size: 0.9rem; font-weight: 800; color: var(--text);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.pmx-pend-head b { color: #FFC53D; font-size: 1.05rem; }
.pmx-pend-tip { font-size: 0.7rem; font-weight: 500; color: var(--text-dim); }
.pmx-pend-list { display: flex; flex-direction: column; gap: 8px; }
.pmx-pend-row {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.07);
}
.pmx-pend-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-dim); margin-bottom: 4px;
}
.pmx-pend-meta b { color: var(--text); font-size: 0.84rem; }
.pmx-arrow { opacity: .55; }
.pmx-when { margin-left: auto; font-size: 0.68rem; opacity: .75; }
.pmx-pend-tx {
  font-size: 0.84rem; line-height: 1.55; color: var(--text);
  margin-bottom: 8px; word-break: break-word;
}
.pmx-pend-img { color: #7B7391; }
.pmx-pend-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── pp161：待审核改成「一对人一行」（点开是两人的完整对话）─────────────
   老师原话：「我希望我审核学生私信的时候是能看到两个人的对话框，而不是只审核一条」。
   ⚠ 这一块颜色全部写死成浅色卡片 + 深色字（#3B3557）：老师点开是扫一眼就判断，
     用半透明叠色在浅底上会糊、在深底上会发灰，两边都不清楚。 */
.pmx-pend-row.pmx-pend-grp {
  background: #FFFDF5; border-color: #F3DFA8; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s;
}
.pmx-pend-row.pmx-pend-grp:hover { background: #FFF8E6; border-color: #E9C86A; }
.pmx-pend-row.pmx-pend-grp:focus-visible { outline: 2px solid #FFB300; outline-offset: 2px; }
.pmx-pend-grp .pmx-pend-meta { color: #8E7B4A; }
.pmx-pend-grp .pmx-pend-meta b { color: #3B3557; }
.pmx-pend-n {
  font-size: 0.68rem; font-weight: 800; color: #9A6B00;
  background: #FFEFC4; border-radius: 8px; padding: 1px 7px;
}
.pmx-pend-grp .pmx-pend-tx { color: #4A4460; margin-bottom: 0; }
.pmx-pend-who { font-style: normal; font-weight: 700; color: #6C5CE7; }

/* 对话式审核弹窗：待审那条的气泡（黄）+ 就地按钮 */
.pmx-rv-tip {
  font-size: 0.76rem; line-height: 1.6; color: #6B6486;
  margin: 0 0 10px; padding: 0 2px;
}
.pmx-rv-hl, .pmx-rv-n { color: #B26A00; font-weight: 800; }
.pmx-th-msg.pmx-rv-pend .pmx-th-bub {
  background: #FFF8E1; border-color: #F5C451;
  box-shadow: 0 0 0 2px rgba(245, 196, 81, 0.22);
}
.pmx-rv-acts {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed rgba(178, 106, 0, 0.25);
}
.pmx-rv-tag {
  font-size: 0.68rem; font-weight: 800; color: #B26A00;
  background: #FFF1CC; border-radius: 8px; padding: 2px 8px;
}
/* pp182：学生付费免审核的那条 —— 打个紫标，让老师一眼挑出来重点看 */
.pmx-free-hl { color: #7D3C98; font-weight: 800; }
.pmx-free-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px;
  font-size: 0.62rem; font-weight: 800; color: #6C2D8F;
  background: #F3E8FB; border: 1px solid rgba(125, 60, 152, 0.3);
  vertical-align: middle;
}
.pmx-rv-empty {
  font-size: 0.8rem; color: #8E86A6; text-align: center; padding: 22px 0;
}
.pmx-th-img-bad { font-size: 0.76rem; color: #A79EBE; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   pp167 · 教师端「✉️ 私信」＝两栏工作台（左：师生私信 / 右：同学私信审核）
   老师原话：「能不能把教师私信和同学间审核也搞成微信对话框一样？可以快速切换，
              并且左边是教师私信，右边是学生间私信审核」。
   ⚠ 颜色一律写死浅色卡片 + 深色字：这一页在浅色面板里，半透明叠色压上去会糊成一片。
   ⚠ 宽屏＝两栏并列（每栏都是「列表 + 对话」）；≤1100px 只显示一栏（顶部切换）。
   ═══════════════════════════════════════════════════════════════════════════ */
.ti { display: flex; flex-direction: column; gap: 10px; }

/* ── 顶部两栏切换 / 计数 ── */
.ti-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ti-tab {
  font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; color: #6B6486; border: 1px solid #E4DCF4;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s;
}
.ti-tab:hover { background: #F8F5FF; border-color: #D3C8F2; }
.ti-tab.on { background: #F1ECFF; color: #4B3F86; border-color: #C9BCF0; }
.ti-tab .ti-n {
  min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #F04438; color: #fff;
  font-size: 0.66rem; font-weight: 800; line-height: 17px; text-align: center;
}
.ti-tab .ti-n-warn { background: #FF9500; }
.ti-tabs-tip { font-size: 0.7rem; color: #8E86A6; }

/* pp223：任教班隔离说明条（只在真的收窄了范围时才渲染） */
.ti-scope {
  margin: 8px 0 10px; padding: 7px 12px; border-radius: 10px;
  background: #EFF3FB; border: 1px solid #C9D8F0; color: #35507A;
  font-size: 0.78rem; line-height: 1.6;
}
.ti-scope .pp-dim { color: #7B8AA6; }

/* ── 两栏 ── */
.ti-wrap { display: flex; gap: 12px; height: min(72vh, 620px); min-height: 380px; }
.ti-pane {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: row;
  background: #fff; border: 1px solid #E7E2F5; border-radius: 16px; overflow: hidden;
}

/* 栏内左侧：会话列表 */
.ti-side {
  flex: 0 0 210px; min-width: 0; display: flex; flex-direction: column;
  background: #FCFAFF; border-right: 1px solid #F1EDFB;
}
.ti-side-top {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-bottom: 1px solid #F1EDFB;
}
.ti-side-chips { gap: 6px; }
.ti-q {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 0.76rem; color: #3B3557; background: #fff;
  border: 1px solid #E4DCF4; border-radius: 10px; padding: 6px 9px;
}
.ti-q:focus { outline: none; border-color: #B9A6EE; box-shadow: 0 0 0 3px rgba(150,120,240,.14); }
.ti-reload {
  flex: none; font: inherit; font-size: 0.8rem; cursor: pointer;
  background: #fff; border: 1px solid #E4DCF4; border-radius: 10px; padding: 5px 8px; color: #6B6486;
}
.ti-reload:hover { background: #F8F5FF; }
.ti-chip {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer;
  padding: 6px 8px; border-radius: 10px; background: #fff; color: #6B6486;
  border: 1px solid #E4DCF4; -webkit-tap-highlight-color: transparent;
}
.ti-chip:hover { background: #F8F5FF; }
.ti-chip.on { background: #F1ECFF; color: #4B3F86; border-color: #C9BCF0; }

.ti-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.ti-list-cap { font-size: 0.66rem; color: #8E86A6; padding: 0 2px 2px; }

/* pp229：同学私信「一键通过」—— 待审核列表顶部的批量条。
   ⚠ 竖排：侧栏只有 ~200px，横排会把按钮挤到第二行还占不满；
      下面每组那一行本来就是「整行按钮」，这里跟着排成通栏更好点、也不容易点歪。 */
.ti-bulk {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 6px 8px; margin-bottom: 2px; border-radius: 10px;
  background: #FFFCF2; border: 1px solid #F5D48A;
}
.ti-bulk-t { font-size: 0.68rem; color: #8A6D2F; }
.ti-bulk-t b { font-size: 0.8rem; color: #C0392B; }
.ti-bulk-ok { width: 100%; white-space: nowrap; }
.ti-bulk-ok:disabled { opacity: .5; cursor: default; }
.pmx-all-ok { margin-left: 6px; white-space: nowrap; }
/* pp229：同学私信对话头原来是个纯块级 div（里面三样靠 inline 挤一行，
   .ti-chat-title 的 flex:1 / 省略号其实一直没生效）。加了「全部通过」按钮以后
   必须显式排成 flex 行：标题吃满剩余宽度并超长省略，按钮靠右不被挤走。 */
.ti-chat .pmx-th-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ti-chat .pmx-th-head .pmx-th-cnt { margin-left: 0; }

/* 栏内左侧行：把整页宽的行压缩成窄列的样式（类名不变，测试还能按老选择器找） */
.ti-side .pm-inbox-row {
  flex-wrap: wrap; align-items: flex-start; gap: 6px;
  padding: 7px 8px; border-radius: 10px;
  background: #fff; border: 1px solid #EFEBFA;
}
.ti-side .pm-inbox-row:hover { background: #F8F5FF; border-color: #D9CFF5; }
.ti-side .pm-inbox-row.has-unread { background: #FFFCF2; border-color: #F5D48A; }
.ti-side .pm-inbox-row.on { background: #F4EFFF; border-color: #B9A6EE; box-shadow: 0 0 0 2px rgba(150,120,240,.12); }
.ti-side .pm-inbox-av { width: 28px; height: 28px; font-size: 16px; background: #F2EEF9; }
.ti-side .pm-inbox-main { gap: 1px; }
.ti-side .pm-inbox-nm { font-size: 0.78rem; gap: 4px; }
.ti-side .pm-inbox-cls { font-size: 0.62rem; border-color: #E4DCF4; color: #8E86A6; }
.ti-side .pm-inbox-pv { font-size: 0.7rem; color: #8E86A6; }
.ti-side .pm-inbox-tm { font-size: 0.62rem; color: #A79EBE; }

/* 待审核分组行 / 已送达行：窄列里也要点得开 */
.ti-side .pmx-pend-row { padding: 8px 9px; border-radius: 10px; }
.ti-side .pmx-pend-grp.on { box-shadow: 0 0 0 2px rgba(255,179,0,.35); }
.ti-side .pmx-pend-meta { font-size: 0.72rem; gap: 4px; }
.ti-side .pmx-pend-meta b { font-size: 0.78rem; }
.ti-side .pmx-pend-tx { font-size: 0.72rem; margin-bottom: 6px; }
.ti-side .pmx-pend-acts { display: block; }
.ti-side .pmx-pend-acts .btn { width: 100%; }
.ti-side .pmx-th-row { padding: 8px 9px; border-radius: 10px; gap: 4px; }
.ti-side .pmx-th-nm { font-size: 0.76rem; }
.ti-side .pmx-th-pv { flex: 1 1 100%; font-size: 0.7rem; }
.ti-side .pmx-th-meta { font-size: 0.64rem; }
.ti-side .pmx-th-row.on { background: #F4EFFF; border-color: #B9A6EE; }

/* 栏内右侧：对话 */
.ti-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px; }
/* 栏比弹窗窄，气泡可以放宽一点、审核按钮收紧一点，别让「通过/不通过」被挤成两行 */
.ti-chat .pmx-th-bub { max-width: 86%; }
.ti-chat .pmx-rv-acts { gap: 6px; margin-top: 6px; padding-top: 6px; }
.ti-chat .pmx-rv-acts .btn { padding: 2px 8px; font-size: 0.7rem; }
.ti-chat .pmx-rv-tip { font-size: 0.72rem; margin-bottom: 8px; }
.ti-chat-head { gap: 8px; }
.ti-chat-head .pm-title,
.ti-chat-title {
  flex: 1 1 auto; min-width: 0; font-size: 0.9rem; font-weight: 800; color: #3B3557;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-chat-title em { font-style: normal; color: #A79EBE; margin: 0 3px; }
/* 「只有 TA 自己能看见」这类小提示很吃宽度，窄一点的两栏里就别占位了 */
.ti-chat-tip { display: none; font-size: 0.68rem; color: #A79EBE; flex: none; }
@media (min-width: 1500px) { .ti-chat-tip { display: inline; } }
.ti-cls { font-style: normal; font-size: 0.72rem; font-weight: 600; color: #8E86A6; }
.ti-back {
  display: none; flex: none; font: inherit; font-size: 1rem; line-height: 1;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  background: #F4F1FF; color: #6C5CE7; border: 1px solid #E0D8F8;
}
/* ⚠ .pmx-th-list 自带 max-height（给弹窗用的），在栏里必须放开，
   否则窄屏会被它顶出容器，底部的「已送到 N 条」跑到列表外面去。 */
.ti-msgs { flex: 1 1 auto; min-height: 0; max-height: none; }
.ti-write { flex: none; }
.ti-loading { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #8E86A6; }

/* 引导态 / 空态 */
.ti-guide {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px 16px; text-align: center;
}
.ti-guide-ic { font-size: 1.9rem; line-height: 1; }
.ti-guide-t { font-size: 0.86rem; font-weight: 800; color: #3B3557; }
.ti-guide-s { font-size: 0.74rem; line-height: 1.6; color: #8E86A6; max-width: 300px; }
.ti-empty {
  padding: 22px 12px; text-align: center; line-height: 1.85;
  font-size: 0.76rem; color: #8E86A6;
  background: #FCFAFF; border-radius: 12px; border: 1px dashed #E4DCF4;
}
.ti-empty b { color: #3B3557; }
.ti-img-bad { display: block; font-size: 0.72rem; color: #A79EBE; margin-top: 5px; }

/* ── 窄屏：只显示一栏（顶部切换），再窄就「列表 ⇄ 对话」翻转 ── */
@media (max-width: 1100px) {
  .ti-wrap { flex-direction: column; height: auto; }
  .ti[data-tab="pm"] .ti-peer { display: none; }
  .ti[data-tab="peer"] .ti-pm { display: none; }
  /* ⚠ 这里必须 flex:0 0 auto —— 容器高度是 auto，光写 height 会被 flex-basis:0 压扁 */
  .ti-pane { flex: 0 0 auto; height: min(72vh, 560px); }
  .ti-tabs-tip { display: none; }
}
@media (min-width: 1101px) {
  .ti-tab { cursor: default; }
}
@media (max-width: 760px) {
  .ti-side { flex-basis: 180px; }
  .ti-pane.chatting .ti-side { display: none; }
  .ti-pane:not(.chatting) .ti-chat { display: none; }
  .ti-back { display: inline-flex; align-items: center; justify-content: center; }
}

/* ── pp168：留言条「先用缓存出画面、后台悄悄刷新」时顶上那行小字 ── */
.nw-live-hint {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; color: #9A6B00;
  background: #FFF6DC; border: 1px solid #F3DFA8;
}

/* ═══ pp160 · 题数 × 时长可行性预估（教师端基础设置）═══
   体验报告实测的 P0：每日 20 题 + 每天 25 分钟 → 学生做不完。
   这里不改任何规则值，只在两个输入框下面把「按经验每小时能做几题」算给他看。 */
.set-est {
  margin: 4px 0 10px 0; padding: 8px 12px; border-radius: 10px;
  font-size: 0.82rem; line-height: 1.55;
  background: #F5F2FF; border: 1px solid #E4DEFA; color: #5B5478;
}
.set-est:empty { display: none; }
.set-est.ok { background: #EFF8F2; border-color: #CFE9DA; color: #2C6A4C; }
.set-est.warn { background: #FFF6E3; border-color: #F3DDA8; color: #8A5B00; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   pp190 · 每周排名里的「💬 私信」—— 老师问孩子想要什么礼物
   列很窄（只放一颗按钮），表格右边缘不额外撑宽。
   ═══════════════════════════════════════════════════════════════════ */
body .wk-pm-th { width: 56px; text-align: center; }
body .wk-pm-td { text-align: center; padding-left: 4px; padding-right: 8px; }
body .wk-pm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; line-height: 1;
  cursor: pointer;
  /* ⚠ 底色给白、描边给中蓝：排名表每行都有淡色底（前三名还是金/银/铜），
     按钮若也用淡蓝底就跟行底糊在一起。图标走 currentColor（SVG），
     不受 emoji 字体配色影响。 */
  background: #fff; color: #2C6EA8;
  border: 1px solid #B7D3EC; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(43, 84, 124, .10);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
body .wk-pm svg { display: block; width: 17px; height: 17px; }
body .wk-pm-ico svg { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
body .wk-pm:hover { background: #EAF3FF; border-color: #7FB3DC; color: #1B5A8F; }
body .wk-pm:focus-visible { outline: 2px solid #7FB3DC; outline-offset: 2px; }
body .wk-pm:active { transform: scale(.94); }
body .wk-pm-tip { margin: 8px 0 0; }

/* 私信小弹窗（浅色主题） */
.wk-pm-mask {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(28,26,48,.42);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wk-pm-box {
  width: 100%; max-width: 460px;
  background: var(--card-bg, #fff); color: var(--text, #3B3557);
  border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: 0 18px 46px rgba(24,22,44,.28);
  display: flex; flex-direction: column; gap: 10px;
}
.wk-pm-hd { display: flex; align-items: center; gap: 8px; }
.wk-pm-title { flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 800; }
.wk-pm-title b { color: var(--accent2, #3B82C4); }
.wk-pm-title i { font-style: normal; font-size: 0.76rem; font-weight: 600; color: var(--text-dim, #8A94A6); margin-left: 4px; }
.wk-pm-x {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--kid-line, rgba(120,110,170,.22));
  background: transparent; color: var(--text-dim, #6E7A8A); font-size: 0.9rem; line-height: 1;
}
.wk-pm-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 92px;
  font-family: inherit; font-size: 0.9rem; line-height: 1.6;
  color: var(--text, #3B3557); background: #FBFCFE;
  border: 1.5px solid var(--kid-line, rgba(120,110,170,.22)); border-radius: 12px;
  padding: 9px 11px;
}
.wk-pm-text:focus { outline: none; border-color: var(--accent2, #3B82C4); background: #fff; }
.wk-pm-ft { display: flex; align-items: center; gap: 10px; }
.wk-pm-hint { flex: 1; min-width: 0; font-size: 0.72rem; color: var(--text-dim, #8A94A6); font-weight: 600; line-height: 1.5; }
.wk-pm-send { flex: none; min-width: 92px; }
/* pp199：私信弹窗里的「添加图片」行 */
.wk-pm-att { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -2px; }
.wk-pm-att-btn { flex: none; }
.wk-pm-att-thumb {
  width: 46px; height: 46px; object-fit: cover; border-radius: 10px; cursor: zoom-in;
  border: 1px solid var(--kid-line, rgba(120,110,170,.26)); background: #fff;
}
@media (max-width: 420px) {
  .wk-pm-hint { display: none; }
  .wk-pm-send { width: 100%; }
  .wk-pm-ft { flex-direction: column; align-items: stretch; }
}

/* ══ pp196 形象管理（教师端）════════════════════════════════════════
   教师端是**浅色**主题（--card-bg #FFF / --text #3B3557），所以这里全部按浅色写，
   别用 rgba(255,255,255,...) 那种暗色主题的描边 —— 在浅底上完全看不见（pp195 踩过）。 */
.avm-head { margin-bottom: 10px; }
.avm-hint {
  font-size: 0.78rem; line-height: 1.65; color: var(--text-dim, #6E7A8A);
  background: #F4F7FC; border: 1px solid rgba(120,110,170,.16); border-radius: 12px;
  padding: 9px 12px;
}
.avm-hint b { color: var(--text, #3B3557); font-weight: 800; }
.avm-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.avm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 700; color: #46506A;
  background: #fff; border: 1.5px solid var(--avm-c, #7A8794); border-radius: 999px;
  padding: 3px 10px;
}
.avm-chip b { color: var(--avm-c, #7A8794); font-weight: 900; }
.avm-warn { font-size: 0.74rem; font-weight: 700; color: #C2410C; }

.avm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 10px; }

.avm-list { display: flex; flex-direction: column; gap: 6px; }
.avm-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg, #fff); border: 1px solid rgba(120,110,170,.14);
  border-radius: 14px; padding: 8px 12px;
}
.avm-pics { display: flex; gap: 4px; flex: none; }
.avm-pic {
  width: 46px; height: 60px; object-fit: contain; display: block;
  background: #F7F9FC; border-radius: 8px;
}
.avm-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avm-name b { font-size: 0.9rem; color: var(--text, #3B3557); font-weight: 800; }
.avm-name span { font-size: 0.72rem; color: var(--text-dim, #8A94A6); font-weight: 600; }
.avm-back {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px;
  background: #FFF4E5; color: #B45309; font-weight: 800;
}
.avm-tiers { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.avm-t {
  font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  padding: 5px 10px; border-radius: 10px; line-height: 1.2;
  color: #6B7385; background: #F7F9FC; border: 1.5px solid rgba(120,110,170,.2);
  transition: all .12s;
}
.avm-t b { font-weight: 900; }
.avm-t:hover { border-color: var(--avm-c, #7A8794); color: #3B3557; }
.avm-t.is-on {
  color: #fff; background: var(--avm-c, #7A8794); border-color: var(--avm-c, #7A8794);
  box-shadow: 0 2px 8px rgba(59,53,87,.18);
}
@media (max-width: 620px) {
  .avm-row { flex-wrap: wrap; }
  .avm-tiers { width: 100%; justify-content: flex-start; padding-left: 0; }
  .avm-pic { width: 40px; height: 52px; }
}

/* ══════════════════════════════════════════════════════════════════════
   pp216 排名统计：三页合并成一页
     「🏆 班级排名 / 📆 每周排名 / 📅 在线统计」→「🏆 排名统计」+
     「🎁 奖励设置」。排名页只有两组轴（时间 今日/本周/累计 × 对象 按班/按学生）
     和一张表；奖品配置拆到奖励页。

   ⚠ 教师端是**浅色**主题（--bg #EAF6FF / --card-bg #FFF / --text #3B3557），
     这里一律写实色或浅色系变量。别抄 .rank-mini 那种
     rgba(255,255,255,.05) 的深底写法 —— 在浅色面板上等于没画。
   ⚠ 前缀一律加 body，把权重提到 (0,2,1) 以上（kid-app.css 是最终覆盖层）。
   ══════════════════════════════════════════════════════════════════════ */
body .rk-bar, body .rk-bar2, body .rk-bar3 {
  gap: 8px; align-items: center; flex-wrap: wrap;
}
body .rk-bar3 { margin-top: -2px; }
body .rk-seg-label {
  font-size: 0.74rem; font-weight: 800; color: #8A94A6; letter-spacing: 0.04em;
}
body .rk-segs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
body .rk-seg-btn {
  font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  padding: 6px 13px; border-radius: 12px; white-space: nowrap; line-height: 1.3;
  border: 2px solid rgba(120,110,170,0.22); background: #fff; color: #3B3557;
  transition: all 0.15s;
}
body .rk-seg-btn:hover { border-color: #6C63C8; }
body .rk-seg-btn.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #6C63C8, #5A51B8);
  box-shadow: 0 4px 12px rgba(108,99,200,0.26);
}
body .rk-range-txt { font-size: 0.74rem; font-weight: 600; color: #6B6288; line-height: 1.5; }
body .rk-range-txt b { color: #3B3557; font-weight: 800; }
body .rk-date { width: auto; }
body .rk-flt { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body .rk-flt-btn { display: none; }
body .rk-mini-note {
  font-size: 0.74rem; font-weight: 600; color: #8A94A6;
  margin: -2px 0 12px; line-height: 1.5;
}
body .rk-total-tip { margin-top: 14px; }
body .rk-prize-intro { margin-bottom: 12px; }
body .rk-prize-sec { margin: 18px 0 10px; }

/* ── 表格骨架 ── */
/* ⚠ .pp-table 默认 min-width:720px（老页面靠横滑兜底）。合并后的排名表在手机上只剩
   3 列，再套 720 就会被硬撑出 372px 的横向滚动 —— 那正是这次要修的病。 */
body .rk-table { min-width: 0; }
body .rk-table .rk-th-rank { width: 56px; }
body .rk-table .rk-th-pts { min-width: 86px; }
body .rk-table .rk-th-btn { width: 100px; }
body .rk-only-sm { display: none; }

/* ── 学生行：点开看全部数字 ── */
body .rk-srow { cursor: pointer; }
body .rk-srow:hover td { background: #F7FBFF; }
body .rk-more > td {
  padding: 4px 12px 14px !important; border-top: none !important; background: #F7FBFF;
}
body .rk-more-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 6px;
}
body .rk-chip {
  display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  font-size: 0.76rem; font-weight: 600; color: #6B6288; line-height: 1.35;
  background: #fff; border: 1px solid rgba(120,110,170,0.16);
  border-radius: 10px; padding: 6px 10px;
}
body .rk-chip i { font-style: normal; }
body .rk-chip b { color: #3B3557; font-weight: 800; }
body .rk-chip em { font-style: normal; font-size: 0.68rem; color: #A0A8B8; }
/* 桌面上「答题 / 答对 / 在线」已经是表格的列了，展开行里不再抄一遍；
   手机上这几列被 .rk-hide-sm 藏掉，才轮到它们出场。 */
body .rk-dup { display: none; }
body .rk-chip-btn {
  gap: 8px; background: transparent; border: none; padding: 0; align-items: center;
  grid-column: 1 / -1;      /* 「近 7 日 / 看乐园」独占一整行，别挤在 146px 的格子里折成两行 */
}
body .rk-chip-btn .btn { white-space: nowrap; }
body .rk-table .rk-exp-txt { white-space: nowrap; }

/* ── 窄屏（手机）：表头只留 名次 / 名字 / 积分，其余收进点开的明细行 ──
     ⚠ 用 !important 是因为 .pp-table td 有 white-space 等一堆具体规则，
       display 被别的选择器抢回去的话「精简」就白做了。 */
@media (max-width: 620px) {
  body .rk-hide-sm { display: none !important; }
  body .rk-only-sm { display: table-cell; }
  body .rk-seg-label { display: none; }
  body .rk-seg-btn { padding: 5px 10px; font-size: 0.75rem; }
  body .rk-exp { padding: 2px 7px; }
  body .rk-exp-txt { display: none; }
  body .rk-exp::after { content: '▸'; font-size: 0.92rem; line-height: 1; }
  body .rank-row.expanded .rk-exp::after { content: '▾'; }
  body .rk-flt-btn { display: inline-flex; }
  body .rk-flt { display: none; }
  body .rk-flt.open { display: flex; }
  body .rk-range-txt { white-space: normal; }
  body .rk-desc { display: none; }   /* 「存档累计值」这种说明文字在手机上纯占地方 */
  body .rk-dup { display: inline-flex; }
  body .rk-more-grid { grid-template-columns: 1fr 1fr; }
  body .rk-table .rk-th-btn { width: 42px; }
  body .rk-table .rk-th-rank { width: 46px; }
  body .rk-chev-th, body .rk-chev {
    width: 22px; text-align: center; color: #A0A8B8; font-size: 0.8rem; padding-left: 0;
  }
  body .rank-sorts { width: 100%; }
  body .rk-total-tip, body .rk-mini-note { font-size: 0.72rem; }
  body .wk-grade-head { flex-wrap: wrap; row-gap: 4px; }
  body .wk-grade-stat { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════════════
   pp219 · 教师账号页（只有管理员看得到）
   ⚠ 教师端是**浅色**主题（--card-bg #FFF / --text #3B3557），
     所有规则都挂 body 前缀，否则会被 kid-app.css 的后续覆盖层吃掉。
   ⚠ 不套 .pp-table：它自带 min-width:720px，手机上一进来就横向滚动
     （pp216 就是被这一条坑的），账号行本来就两行文字，用 flex 更稳。
   ══════════════════════════════════════════════════════════════════ */
body .tu-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
body .tu-head h3 { margin: 0 0 4px; font-size: 1.02rem; }
body .tu-lead { font-size: 0.8rem; line-height: 1.55; max-width: 720px; }

body .tu-list { display: flex; flex-direction: column; gap: 8px; }
body .tu-row {
  background: var(--card-bg); border: 1px solid rgba(59,53,87,0.10);
  border-radius: 12px; padding: 10px 14px;
}
body .tu-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body .tu-name { font-weight: 800; color: var(--text); font-size: 0.94rem; }
body .tu-acc {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem;
  color: #5B5478; background: #F1F3FA; border-radius: 6px; padding: 1px 7px;
}
body .tu-line2 {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 5px;
  font-size: 0.78rem; color: #5B5478;
}
body .tu-none { color: #9AA1B2; }

body .tu-tag {
  font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 1px 8px;
  background: #EEF1F7; color: #6B7280; border: 1px solid rgba(59,53,87,0.08);
}
body .tu-tag-main { background: #FFF2DC; color: #B4760B; border-color: #F2D6A8; }
body .tu-tag-sub  { background: #EAF3FC; color: #2F6FA8; border-color: #C9DFF3; }
body .tu-tag-me   { background: #EAF7EE; color: #2E7D4F; border-color: #C6E6D3; }

/* ── 新建弹窗 ── */
body .tu-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
body .tu-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .tu-f > label:first-child {
  width: 76px; flex: none; font-size: 0.84rem; font-weight: 700; color: var(--text);
}
body .tu-f > label:first-child i { color: #E5484D; font-style: normal; }
body .tu-f-top { align-items: flex-start; }
body .tu-f-top > label:first-child { padding-top: 6px; }
body .tu-f .pp-input { width: 240px; }
body .tu-hint { font-size: 0.74rem; }
body .tu-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.84rem; cursor: pointer;
}
body .tu-check input { width: 16px; height: 16px; accent-color: #6C63C8; }

/* ── pp220：行内操作（编辑 / 重置密码 / 删除）+ 头部两个按钮 ── */
body .tu-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
body .tu-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
body .tu-act {
  font-size: 0.74rem; font-weight: 700; line-height: 1.5;
  padding: 3px 10px; border-radius: 8px; cursor: pointer;
  background: #F4F6FB; color: #3B3557;
  border: 1px solid rgba(59,53,87,0.12);
}
body .tu-act:hover { background: #EAEDF7; }
body .tu-act:active { transform: translateY(1px); }
body .tu-act-del { background: #FDF1F1; color: #C0322F; border-color: #F0C9C8; }
body .tu-act-del:hover { background: #FBE4E3; }
/* 只读输入框（编辑态登录账号）：灰底 + 禁手，让人一眼看出「这儿改不了」 */
body .tu-f .pp-input.tu-ro {
  background: #F1F3FA; color: #6B7280; cursor: not-allowed;
  border-color: rgba(59,53,87,0.10);
}
body .tu-ro-note { font-size: 0.78rem; line-height: 1.55; max-width: 460px; }

@media (max-width: 620px) {
  body .tu-f { align-items: flex-start; }
  body .tu-f > label:first-child { width: 100%; }
  body .tu-f .pp-input { width: 100%; }
  body .tu-line2 { gap: 8px; }
  /* 手机上按钮跟名字挤一行会换行成三排 —— 让操作区独占一行、靠右 */
  body .tu-acts { width: 100%; margin-left: 0; margin-top: 6px; }
  body .tu-act { flex: 1 1 auto; text-align: center; }
}