/* ============================================================
 * 家长端样式（parent-style.css）
 *
 * 2026-09-14 重做：清爽数据仪表盘风（白底 + 青绿强调色）。
 *
 * ⚠️ 这个文件在 ../css/style.css **之后**加载，那个文件是给孩子端的，
 *    有几条规则会顺带砸到家长端，最重要的是：
 *      css/style.css:21   html, body { height: 100% }  +  body { overflow: hidden }
 *    孩子端是「一屏一个视图」，滚动由内部容器负责，所以 body 锁死不滚；
 *    家长端是长页面，被这条一锁 —— 内容超出就再也滚不动（「滚动条没有、内容看不全」）。
 *    下面 html / body.parent-body 两条就是来覆盖它的，别删。
 * ============================================================ */

:root {
  --p-bg: #F4F7F9;
  --p-card: #FFFFFF;
  --p-ink: #16232E;
  --p-ink2: #46586A;
  --p-muted: #7C8B99;
  --p-line: #E3E9EF;
  --p-line-soft: #EFF4F7;
  --p-brand: #0E9F9F;
  --p-brand-dk: #0A7C7C;
  --p-brand-soft: #E4F5F5;
  --p-amber: #EFA22C;
  --p-good: #16A34A;
  --p-good-soft: #E6F7EC;
  --p-okay: #C2761A;
  --p-okay-soft: #FDF3E3;
  --p-low: #D93B3B;
  --p-low-soft: #FDECEC;
  --p-radius: 14px;
  --p-shadow: 0 1px 2px rgba(16, 35, 46, .05), 0 10px 26px -18px rgba(16, 35, 46, .26);
}

/* ---------- 关键：解开孩子端给的「锁死滚动」 ---------- */
html { height: auto; overflow-x: hidden; }
body.parent-body {
  height: auto;
  min-height: 100vh;
  overflow: visible;              /* 覆盖 style.css 的 overflow: hidden */
  margin: 0;
  padding: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: auto;             /* 孩子端设的是 manipulation，长页面要允许正常滚动 */
}

/* ==================== 未登录：全屏登录 / 选孩子 ==================== */
.parent-auth {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background:
    radial-gradient(820px 400px at 50% -120px, #D9F0F0 0%, rgba(217, 240, 240, 0) 70%),
    var(--p-bg);
  overflow-y: auto;
}
.parent-auth[hidden] { display: none; }

.parent-auth .auth-wrap {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
  padding: 34px 20px;
  overflow-y: auto;
}
.parent-auth .auth-card {
  margin: auto 0;
  width: min(420px, 100%);
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(16,35,46,.06), 0 24px 60px -32px rgba(16,35,46,.35);
  padding: 32px 28px 24px;
  text-align: center;
}
.parent-auth .auth-logo { font-size: 42px; line-height: 1; }
.parent-auth .auth-title { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: .5px; }
.parent-auth .auth-sub { margin-top: 6px; font-size: 13.5px; color: var(--p-muted); }

.parent-auth .auth-field { text-align: left; margin-bottom: 14px; }
.parent-auth .auth-field label { display: block; margin: 0 0 6px 2px; font-size: 12.5px; font-weight: 600; color: var(--p-ink2); }
.parent-auth .auth-field input {
  width: 100%; padding: 13px 15px; font-size: 16px;   /* 16px 是 iOS 不自动放大的下限 */
  color: var(--p-ink); background: #FAFCFD;
  border: 1.5px solid var(--p-line); border-radius: 11px;
  outline: none; font-family: inherit;
  transition: border-color .16s, box-shadow .16s, background .16s;
  -webkit-user-select: text; user-select: text;
}
.parent-auth .auth-field input:focus {
  border-color: var(--p-brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(14, 159, 159, .14);
}
.parent-auth .auth-field input::placeholder { color: #A9B7C2; }

.parent-auth .auth-err {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 11px;
  background: var(--p-low-soft); color: #B02C2C; font-size: 13px; text-align: left; line-height: 1.45;
}
.parent-auth .btn.btn-primary {
  background: var(--p-brand); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(14, 159, 159, .28);
}
.parent-auth .btn.btn-primary:active { background: var(--p-brand-dk); }
.parent-auth .btn.btn-primary:disabled { opacity: .6; box-shadow: none; }
.parent-auth .auth-submit { width: 100%; padding: 14px 0; font-size: 16px; border-radius: 11px; }

.parent-auth .child-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.parent-auth .child-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 1.5px solid var(--p-line); border-radius: 13px;
  padding: 13px 15px; transition: border-color .16s, background .16s, transform .1s;
}
.parent-auth .child-card:active { transform: scale(.985); border-color: var(--p-brand); background: var(--p-brand-soft); }
.parent-auth .cc-emoji { font-size: 30px; flex: none; }
.parent-auth .cc-body { flex: 1; min-width: 0; }
.parent-auth .cc-name { display: block; font-size: 16.5px; font-weight: 700; }
.parent-auth .cc-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--p-muted); }
.parent-auth .cc-go { flex: none; font-size: 13px; color: var(--p-brand-dk); font-weight: 600; }
.parent-auth .btn-link { font-size: 13px; color: var(--p-muted); text-decoration: underline; padding: 6px; }

/* ==================== 顶栏 ==================== */
.parent-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 22px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--p-line);
}
.parent-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ph-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--p-brand-soft); color: var(--p-brand-dk);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.parent-head h1 { font-size: 16.5px; font-weight: 700; margin: 0; letter-spacing: .2px; }
.parent-sub { font-size: 12.5px; color: var(--p-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.parent-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.parent-link-app {
  font-size: 13px; color: var(--p-ink2); background: #fff;
  border: 1px solid var(--p-line); padding: 7px 12px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.parent-link-app:hover { background: var(--p-brand-soft); color: var(--p-brand-dk); border-color: #BFE4E4; }
.parent-link-app.admin { color: #5A47D6; border-color: #D9D3FB; background: #F4F2FE; }
.parent-link-app.admin:hover { background: #ECE8FE; color: #4A38C4; }
.parent-btn-quiet {
  font-size: 13px; color: var(--p-muted); padding: 7px 11px; border-radius: 9px;
  border: 1px solid transparent; transition: background .14s, color .14s;
}
.parent-btn-quiet:hover { background: var(--p-line-soft); color: var(--p-ink2); }

/* ==================== Tab ==================== */
.parent-tabs {
  display: flex; gap: 4px;
  padding: 9px 22px 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--p-line);
  position: sticky; top: 65px; z-index: 29;
  overflow-x: auto;
}
.ptab {
  font-size: 14.5px; color: var(--p-ink2);
  padding: 10px 15px 12px; border-radius: 9px 9px 0 0;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}
.ptab:hover { background: var(--p-line-soft); }
.ptab.active { color: var(--p-brand-dk); font-weight: 700; border-bottom-color: var(--p-brand); }

/* ==================== 主体 ==================== */
.parent-main {
  max-width: 1020px;
  margin: 0 auto;
  padding: 22px 22px 56px;
}

.psection { margin-bottom: 26px; }
.psection > h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.psection > h3 { font-size: 14px; font-weight: 700; color: var(--p-ink2); margin: 24px 0 11px; }
.phint { font-size: 12.5px; color: var(--p-muted); line-height: 1.6; margin: 0 0 14px; }

.panel {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
  padding: 16px 18px; margin-bottom: 16px;
}
.panel-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.panel-hd h3 { font-size: 14.5px; font-weight: 700; margin: 0; }
.panel-hd .phint { margin: 0 0 0 auto; }

/* ==================== KPI 卡 ==================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; margin-bottom: 16px; }
.kpi {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
  padding: 14px 15px;
}
.kpi .k { font-size: 12px; color: var(--p-muted); font-weight: 600; }
.kpi .v { font-size: 25px; font-weight: 700; line-height: 1.05; margin: 6px 0 3px; letter-spacing: -.4px; }
.kpi .s { font-size: 11.5px; color: var(--p-muted); }
.kpi.brand .v { color: var(--p-brand-dk); }
.kpi.good .v { color: var(--p-good); }
.kpi.warn .v { color: var(--p-okay); }

/* ==================== 趋势柱状图 ==================== */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 168px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.chart .bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart .bar {
  width: min(100%, 26px); display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 4px 4px 2px 2px; overflow: hidden; background: var(--p-line-soft);
}
.chart .bar-s { background: var(--p-brand); width: 100%; }
.chart .bar-q { background: var(--p-amber); width: 100%; }
.chart .col-lbl { font-size: 9.5px; color: var(--p-muted); margin-top: 6px; white-space: nowrap; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--p-muted); margin-top: 12px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; }

/* ==================== 排行 / 薄弱条 ==================== */
.rank-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; }
.rank-name {
  font-size: 14px; font-weight: 600; min-width: 2.6em; max-width: 34%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-bar { flex: 1; height: 8px; background: var(--p-line-soft); border-radius: 5px; overflow: hidden; }
.rank-bar span { display: block; height: 100%; border-radius: 5px; background: var(--p-brand); }
.rank-bar span.low { background: var(--p-low); }
.rank-bar span.okay { background: var(--p-amber); }
.rank-v { font-size: 12.5px; color: var(--p-ink2); width: 56px; text-align: right;
  flex: none; font-variant-numeric: tabular-nums; }

/* ==================== 记录页筛选栏 ==================== */
.filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
  padding: 11px 13px; margin-bottom: 16px;
}
.seg { display: flex; gap: 2px; padding: 3px; background: #E9EFF3; border-radius: 10px; }
.seg button { font-size: 13px; padding: 6px 13px; border-radius: 8px; color: var(--p-ink2); }
.seg button.on { background: #fff; color: var(--p-brand-dk); font-weight: 600; box-shadow: 0 1px 3px rgba(16,35,46,.1); }
.filterbar input[type="date"],
.filterbar input[type="search"] {
  font-family: inherit; font-size: 13.5px; color: var(--p-ink);
  padding: 8px 11px; border: 1.5px solid var(--p-line); border-radius: 9px;
  background: #FAFCFD; outline: none;
}
.filterbar input[type="search"] { flex: 1; min-width: 130px; }
.filterbar input:focus { border-color: var(--p-brand); background: #fff; box-shadow: 0 0 0 3px rgba(14,159,159,.12); }
.filter-note { font-size: 12.5px; color: var(--p-muted); margin: -8px 0 14px 2px; }

/* ==================== 记录时间轴 ==================== */
.tl-day {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-radius); box-shadow: var(--p-shadow);
  margin-bottom: 13px; overflow: hidden;
}
.tl-hd {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 13px 17px; border-bottom: 1px solid var(--p-line-soft);
  background: linear-gradient(180deg, #FBFDFE, #FFFFFF);
}
.tl-date { font-size: 14.5px; font-weight: 700; }
.tl-wd { font-size: 12px; color: var(--p-muted); }
.tl-today {
  font-size: 11px; font-weight: 700; color: var(--p-brand-dk);
  background: var(--p-brand-soft); padding: 3px 8px; border-radius: 6px;
}
.tl-meta { margin-left: auto; font-size: 12.5px; color: var(--p-muted); text-align: right; }
.tl-body { padding: 14px 17px 16px; }
.tl-sub { font-size: 11.5px; font-weight: 700; color: var(--p-muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 0 0 9px; }

/* 同一天卡片里每段小标题（读过的句子 / 闯关练习）之间留出间距 */
.tl-body > * + .tl-sub { margin-top: 16px; }

/* ==================== 易错音（2026-09-20）====================
   一行一个音：名字 + 占比条 + 次数。条宽就是错误率，家长不用自己算。 */
.phoneme-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--p-line-soft);
}
.phoneme-row:first-of-type { border-top: none; }
.phoneme-name {
  flex: none; min-width: 44px;
  font-size: 14px; font-weight: 700; color: var(--p-ink);
  font-variant-numeric: tabular-nums;
}
.phoneme-bar {
  flex: 1; height: 8px; border-radius: 5px; overflow: hidden;
  background: var(--p-line-soft);
}
.phoneme-bar > i {
  display: block; height: 100%; border-radius: 5px;
  background: var(--p-low);
}
.phoneme-num { flex: none; font-size: 11.5px; color: var(--p-muted); }

/* ==================== 句行：一句 + 它的录音 ====================
   2026-09-14：「读过的句子」和「录音回放」合成同一行。
   一条录音本来就是某一句的朗读，分成两段并列就是让家长自己做连线题。
   一行里：左 ▶（这一句的录音）· 中 句子原文 + 时间 · 右 成绩。 */
.sr-list { display: flex; flex-direction: column; }
.sr-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-top: 1px solid var(--p-line-soft);
}
.sr-list .sr-row:first-child { border-top: none; padding-top: 2px; }
.sr-body { flex: 1; min-width: 0; }
.sr-text { font-size: 15px; font-weight: 600; line-height: 1.45; word-break: break-word; }
.sr-meta { font-size: 11.5px; color: var(--p-muted); margin-top: 3px; }
.sr-score {
  flex: none; min-width: 44px; text-align: right;
  font-size: 16.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sr-score.t-best { color: var(--p-good); }
.sr-score.t-good { color: #2C7A4B; }
.sr-score.t-okay { color: var(--p-okay); }
.sr-score.t-low  { color: var(--p-low); }
.sr-score.t-bad,
.sr-score.t-none { color: var(--p-muted); font-weight: 600; }

/* 成绩来自别的设备、本机没这条录音时的占位 —— 保留左列占位，整列才对得齐 */
.rec-none {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #B7C4CD; background: #F1F5F8;
  border: 1px dashed var(--p-line);
}

/* 同一句录了多次：按时间正序列出「第 N 次」，一眼看出从读不顺到读顺 */
.tk-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tk-btn {
  font-size: 11.5px; padding: 4px 9px; border-radius: 7px;
  background: #F6F9FB; border: 1px solid var(--p-line); color: var(--p-ink2);
  font-variant-numeric: tabular-nums;
  transition: background .14s, border-color .14s, color .14s;
}
.tk-btn:hover { background: var(--p-brand-soft); border-color: #BFE4E4; color: var(--p-brand-dk); }
.tk-btn:disabled { opacity: .5; }

/* 闯关行 */
.quiz-row {
  display: flex; align-items: center; gap: 11px;
  background: #FBFDFE; border: 1px solid var(--p-line);
  border-radius: 11px; padding: 11px 14px; margin-bottom: 8px;
  cursor: pointer; transition: background .14s, border-color .14s;
}
.quiz-row:hover { background: var(--p-brand-soft); border-color: #BFE4E4; }
.quiz-row .qr-book { font-size: 13.5px; font-weight: 600; }
.quiz-row .qr-time { font-size: 11.5px; color: var(--p-muted); margin-left: auto; }
.quiz-score { font-size: 15px; font-weight: 700; color: var(--p-brand-dk); font-variant-numeric: tabular-nums; }
.quiz-detail {
  display: none; font-size: 12.5px; color: var(--p-ink2);
  background: #FBFDFE; border: 1px dashed var(--p-line);
  border-radius: 10px; padding: 11px 14px; margin: -3px 0 10px;
  line-height: 1.7;
}
.quiz-detail.open { display: block; }
.quiz-q .ok { color: var(--p-good); font-weight: 600; }
.quiz-q .no { color: var(--p-low); font-weight: 600; }

/* ==================== 回放按钮 ====================
   2026-09-14：「录音」不再单独成页，回放直接落在「记录」里句行的左端（.sr-row），
   所以这里只剩按钮本身的样式；一天一卡的 .rec-day / 一条一条的 .rec-item 都删了。 */
.rec-play {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--p-brand); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, transform .1s;
}
.rec-play:hover { background: var(--p-brand-dk); }
.rec-play:active { transform: scale(.94); }
.rec-play:disabled { opacity: .5; }

/* ==================== 薄弱 ==================== */
.weak-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 8px;
  box-shadow: var(--p-shadow);
}
.weak-word { font-size: 18px; font-weight: 700; }
.weak-meta { font-size: 11.5px; color: var(--p-muted); margin-top: 3px; }
.weak-score { font-size: 15px; font-weight: 700; min-width: 62px; text-align: right; white-space: nowrap; }

/* ---- 逐字批注：读错的字 / 词 ----
   数据来自云端 SOE 的逐字明细，档位判定只在 js/score.js 的 charState 一处，
   这里只负责画出来，别在本文件重写阈值。 */
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 5px 10px 6px; border-radius: 10px;
  background: var(--p-low-soft); border: 1px solid #F7D6D6;
  color: var(--p-low); font-size: 17px; font-weight: 700;
}
.cchip i {
  font-style: normal; font-size: 11px; font-weight: 600;
  color: var(--p-muted); font-variant-numeric: tabular-nums;
}
/* 全是漏读（没读出声）的字换暖色，和「读错」区分开 */
.cchip[data-sc="miss"] { background: var(--p-okay-soft); border-color: #F5E2C1; color: var(--p-okay); }
/* 「只错声调」的字（2026-09-22）：孩子**是认得这个字的**，只是调没拿准。
   单独一档紫色，别和「读错」的红色混在一起 —— 混了家长会把复习重点放错地方。 */
.cchip[data-sc="tone"] { background: #EFE8F8; border-color: #DCCFF0; color: #6B4FA0; }
/* 词胶囊：连着几个字一起读错，字号小一档免得抢戏 */
.cchip.word { font-size: 14.5px; font-weight: 600; border-radius: 8px; padding: 4px 9px 5px; }
.cchip-note { margin: 14px 0 0; font-size: 11.5px; color: var(--p-muted); line-height: 1.65; }

/* 句子里的问题字。读错 = 实线，漏读 = 虚线，颜色跟胶囊一致 */
.wch { border-bottom: 2px solid currentColor; }
.wch[data-sc="bad"] { color: var(--p-low); }
.wch[data-sc="miss"] { color: var(--p-okay); border-bottom-style: dashed; }

/* 标红图例（跟着统计块一起出现） */
.wch-legend { display: flex; gap: 16px; margin: 14px 0 0; font-size: 11.5px; color: var(--p-ink2); }
.wch-legend span { display: inline-flex; align-items: center; }
.wch-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; }
.wch-legend i[data-sc="bad"] { background: var(--p-low); }
.wch-legend i[data-sc="miss"] { background: transparent; border: 2px dashed var(--p-okay); }

/* ==================== 最近活动 ==================== */
.act-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--p-line-soft); }
.act-row:first-child { border-top: none; }
.act-ico {
  width: 28px; height: 28px; border-radius: 9px; flex: none; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-brand-soft); color: var(--p-brand-dk);
}
.act-ico.quiz { background: var(--p-okay-soft); color: var(--p-okay); }
.act-txt { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-txt b { font-weight: 600; }
.act-txt span { color: var(--p-muted); font-size: 11.5px; margin-left: 7px; }
.act-score { font-size: 13px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.act-score.good { color: var(--p-good); }
.act-score.okay { color: var(--p-okay); }
.act-score.low { color: var(--p-low); }

/* ==================== 空态 / 页脚 ==================== */
.empty { text-align: center; padding: 40px 20px; color: var(--p-muted); font-size: 13.5px; }
.empty-emoji { font-size: 40px; margin-bottom: 12px; }
.empty-inline { padding: 18px; text-align: center; color: var(--p-muted); font-size: 13px; }

.parent-foot {
  border-top: 1px solid var(--p-line); background: #fff;
  padding: 20px 22px 30px; text-align: center;
}
.parent-foot small { font-size: 11.5px; color: var(--p-muted); line-height: 1.7; display: block; }
.parent-foot .foot-links { margin-top: 10px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==================== 识字页（2026-09-22）====================
   定位后半段（拼音解码 → 自然识字）的展示层。配色沿用家长端的良/中/差三档，
   跟「薄弱字词」页的语义一致：绿=已掌握、琥珀=还靠辅助、红=要重点练。 */
.lit-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 14px 0 16px; }
.lit-num {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-radius); padding: 15px 10px; text-align: center;
  box-shadow: var(--p-shadow);
}
.lit-num .ln-v { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.lit-num .ln-k { font-size: 13.5px; font-weight: 700; margin-top: 7px; }
.lit-num .ln-h { font-size: 11.5px; color: var(--p-muted); margin-top: 3px; line-height: 1.5; }
.lit-num.good .ln-v  { color: var(--p-good); }
.lit-num.amber .ln-v { color: var(--p-okay); }
.lit-num.low .ln-v   { color: var(--p-low); }

/* 掌握进度条：起点必须保证「认得的字越多、条越长」这一眼就懂 */
.lit-bar { height: 12px; border-radius: 999px; background: #EAF0F4; overflow: hidden; margin: 4px 0 9px; }
.lit-bar i {
  display: block; height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, #4FBF7A, var(--p-good));
  transition: width .45s ease;
}
.lit-barmeta { font-size: 12.5px; color: var(--p-muted); line-height: 1.9; }
.lit-barmeta b { color: var(--p-ink); font-size: 14px; }
.lit-more {
  margin-left: 10px; background: none; border: 0; padding: 0;
  color: var(--p-brand); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lit-more:hover { text-decoration: underline; }

.lit-big { font-size: 22px; font-weight: 700; color: var(--p-ink); }
.lit-big b { font-size: 38px; color: var(--p-good); margin-right: 4px; letter-spacing: -.5px; }

/* 字卡：字 + 拼音 + 一行依据。依据写的是**为什么**被判成这一档，
   家长看到「看拼音还错 3」才知道该怎么陪练，光看到一个红字没用。 */
.lit-chars { display: flex; flex-wrap: wrap; gap: 8px; }
.lit-ch {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: 11px;
  background: #F5F8FA; border: 1px solid var(--p-line);
}
.lit-ch b { font-size: 21px; font-weight: 700; line-height: 1; }
.lit-ch i { font-size: 11.5px; font-style: normal; color: var(--p-muted); }
.lit-ch em { font-size: 11px; font-style: normal; color: var(--p-muted); }
.lit-ch.good  { background: rgba(22, 163, 74, .09);  border-color: rgba(22, 163, 74, .32); }
.lit-ch.amber { background: rgba(239, 162, 44, .12); border-color: rgba(239, 162, 44, .38); }
.lit-ch.low   { background: rgba(217, 59, 59, .08);  border-color: rgba(217, 59, 59, .30); }
.lit-ch.good b  { color: var(--p-good); }
.lit-ch.amber b { color: var(--p-okay); }
.lit-ch.low b   { color: var(--p-low); }

/* ==================== 认字小测（2026-09-23）====================
   答题时是「一屏一个字」：字号必须大到家长把屏幕递到孩子面前就能看清，
   按钮必须大到不用瞄准。这里是手机上最容易被做坏的一页。 */
.test-wrap { max-width: 560px; margin: 0 auto; }
.test-bar { height: 8px; border-radius: 999px; background: #EAF0F4; overflow: hidden; }
.test-bar i { display: block; height: 100%; background: var(--p-brand); border-radius: 999px; transition: width .2s; }
.test-meta { font-size: 12.5px; color: var(--p-muted); margin: 9px 0 4px; text-align: center; }
.test-char {
  font-size: 128px; font-weight: 700; line-height: 1.25; text-align: center;
  color: var(--p-ink); margin: 18px 0 6px; letter-spacing: 2px;
  /* 故意不给任何拼音 / 笔画 / 组词提示 —— 小测要的就是「脱离拼音之后他还认不认」 */
}
.test-ask { text-align: center; font-size: 14px; color: var(--p-ink2); margin-bottom: 22px; }
.test-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.test-btn {
  border: 1.5px solid var(--p-line); border-radius: 14px; background: #fff;
  padding: 20px 10px; font-size: 17px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: transform .06s, background .15s, border-color .15s;
}
.test-btn:active { transform: scale(.97); }
.test-btn.bad  { color: var(--p-low); }
.test-btn.good { color: var(--p-good); }
.test-btn.bad:hover  { background: var(--p-low-soft);  border-color: rgba(217, 59, 59, .35); }
.test-btn.good:hover { background: var(--p-good-soft); border-color: rgba(22, 163, 74, .35); }
.test-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.test-foot .phint { margin: 0 0 0 auto; }
.test-link { background: none; border: 0; font-family: inherit; font-size: 13px; color: var(--p-muted); text-decoration: underline; cursor: pointer; padding: 6px; }
.test-link:hover { color: var(--p-ink2); }
/* 主行动按钮：不依赖 ../css/style.css 的全局 .btn（家长端只在 auth 面板里用到过它），
   自带一份，免得哪天全局样式改了这里变成裸按钮。 */
.test-go {
  background: var(--p-brand); color: #fff; border: 0; border-radius: 12px;
  padding: 14px 26px; font-size: 15.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 2px 8px rgba(14, 159, 159, .25);
}
.test-go:active { background: var(--p-brand-dk); transform: scale(.985); }

.test-grow { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.tg-name { font-size: 12.5px; font-weight: 700; width: 72px; flex: none; }
.tg-name.good  { color: var(--p-good); }
.tg-name.amber { color: var(--p-okay); }
.tg-name.low   { color: var(--p-low); }
.tg-name.fresh { color: var(--p-muted); }
.tg-bar { flex: 1; height: 10px; border-radius: 999px; background: #EAF0F4; overflow: hidden; }
.tg-bar i { display: block; height: 100%; background: var(--p-brand); border-radius: 999px; }
.tg-num { font-size: 12.5px; color: var(--p-ink2); width: 48px; text-align: right; flex: none; }

.th-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--p-line-soft); font-size: 13px; }
.th-row:last-child { border-bottom: 0; }
.th-when { color: var(--p-muted); flex: 1; }
.th-score { font-weight: 700; color: var(--p-ink); }
.th-pct { width: 52px; text-align: right; font-weight: 700; }
.th-pct.good  { color: var(--p-good); }
.th-pct.amber { color: var(--p-okay); }
.th-pct.low   { color: var(--p-low); }

/* ==================== 响应式 ==================== */
@media (max-width: 720px) {
  .parent-head { padding: 12px 14px; gap: 10px; }
  .parent-head h1 { font-size: 15px; }
  .parent-sub { max-width: 58vw; }
  .parent-tabs { padding: 8px 14px 0; top: 62px; }
  .ptab { padding: 9px 12px 11px; font-size: 14px; }
  .parent-main { padding: 16px 14px 44px; }
  .panel { padding: 14px 15px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .chart { height: 140px; }
  .tl-meta { margin-left: 0; width: 100%; text-align: left; }
  .rank-name { max-width: 30%; }
  .who-hide { display: none; }
  /* 识字页：手机上三列会挤，缩字号、隐掉那行解释（标题本身已经说清了） */
  .lit-num { padding: 12px 6px; }
  .lit-num .ln-v { font-size: 26px; }
  .lit-num .ln-k { font-size: 12.5px; }
  .lit-num .ln-h { display: none; }
  .lit-ch em { display: none; }
  /* 小测页：128px 在手机上会顶到边，降到 96px（仍然远大于正文） */
  .test-char { font-size: 96px; }
  .test-btn { padding: 17px 8px; font-size: 16px; }
  .test-foot .phint { display: none; }
}