@font-face{
  font-family:'Andika';
  src:url('/fonts/andika-regular.de0274a8.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#FFF7E8;
  --paper:#FFFDF8;
  --card:#FFFFFF;
  --pri:#FF9F43;
  --pri-d:#F08A24;
  --pri-l:#FFE7CC;
  --cur-bg:#B54A00;
  --review-mark:#FFB3C6;
  --kid-a:#4D6FC1;
  --kid-a-bg:#E9EFFB;
  --kid-b:#8B5BB6;
  --kid-b-bg:#F3EBFA;
  --tts:#2EC4B6;
  --tts-d:#1FA89B;
  --tts-l:#D9F5F2;
  --yt:#FF7B2E;
  --yt-d:#E8641A;
  --text:#3D2C1E;
  --text-2:#7A6552;
  --text-3:#A8957F;
  --line:#F0E2CC;
  --danger:#F25C54;
  --ok:#3BB273;
  --star:#FFC531;
  --r:16px;
  --r-sm:10px;
  --r-lg:24px;
  --shadow:0 4px 14px rgba(61,44,30,.08);
  --shadow-lg:0 10px 30px rgba(61,44,30,.16);
  --topbar-h:60px;
  --tabbar-h:68px;
  --tap:44px;
  --font-zh:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font:'Andika','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
}

.english{font-weight:400;font-synthesis:none}
.chinese{font-family:var(--font-zh)}
.count{font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-variant-numeric:tabular-nums;font-weight:600}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

img,svg,video,iframe{max-width:100%;display:block}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

button{cursor:pointer;border:none;background:none;padding:0;touch-action:manipulation}

button:disabled{opacity:.45;cursor:not-allowed}

:focus-visible{outline:3px solid var(--tts);outline-offset:2px;border-radius:var(--r-sm)}

a{color:var(--pri-d)}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;color:var(--text)}

/* ========== 顶栏 ========== */
#topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--topbar-h);
  padding:0 16px;
  padding-top:env(safe-area-inset-top);
  background:rgba(255,247,232,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}

.avatar-btn{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--tap);
  height:var(--tap);
  padding:0;
  /* 秦岭四宝头像为圆角方盘本体，顶栏按钮同步改方盘形（原 50% 圆形会切掉盘角） */
  border-radius:26%;
  overflow:hidden;
  background:var(--pri-l);
  border:3px solid #fff;
  box-shadow:var(--shadow);
  transition:transform .15s;
}
.avatar-btn:active{transform:scale(.92)}
.top-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:24px;
  line-height:1;
}
.avatar-btn svg,.avatar-btn img{width:100%;height:100%}

.top-title{
  flex:1;
  min-width:0;
  font-size:20px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chan-badge{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  border:2px solid transparent;
}
.chan-badge.yt{background:var(--yt);color:#fff;border-color:var(--yt)}
.chan-badge.tts{background:#fff;color:var(--tts-d);border-color:var(--tts)}
.chan-badge.slow{background:var(--tts-l);color:var(--tts-d);border-color:var(--tts-l)}

#parentBtn{
  flex:none;
  width:var(--tap);
  min-width:var(--tap);
  height:var(--tap);
  padding:0;
  border-radius:50%;
  background:#fff;
  color:var(--text-2);
  font-size:20px;
  font-weight:700;
  border:2px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
#parentBtn:active{background:var(--pri-l)}
/* 家长区入口齿轮原图直入（2026-10-24 图标接入）：钮体 48px 圆钮几何不变，图 28px */
#parentBtn .parent-gear-img{width:28px;height:28px;border-radius:20%;display:block}

/* ========== 主视图 ========== */
#view{
  max-width:1200px;
  margin:0 auto;
  padding:16px 20px;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
}

/* ========== 底部标签栏 ========== */
#tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  justify-content:center;
  gap:4px;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:6px 8px env(safe-area-inset-bottom);
  background:#fff;
  border-top:2px solid var(--line);
  box-shadow:0 -4px 16px rgba(61,44,30,.06);
}

.tab-btn{
  flex:1;
  max-width:180px;
  min-height:var(--tap);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:var(--r);
  color:var(--text-3);
  font-size:15px;
  font-weight:700;
  transition:background .15s,color .15s;
}
.tab-btn svg,.tab-btn .ico{width:24px;height:24px;font-size:22px;line-height:1}
/* 底部导航图标原图直入（2026-10-24 图标接入）：方盘图 26px，border-radius 仅去原图四角白边 */
.tab-ico{display:inline-flex;flex:none}
.tab-ico-img{width:26px;height:26px;border-radius:20%;display:block}
.tab-btn:active{transform:scale(.96)}
.tab-btn.on{color:var(--pri-d);background:var(--pri-l)}

/* ========== Toast ========== */
.hidden{display:none!important}
.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px);
  z-index:300;
  transform:translateX(-50%);
  max-width:calc(100vw - 40px);
  padding:12px 22px;
  border-radius:999px;
  background:rgba(61,44,30,.92);
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-align:center;
  box-shadow:var(--shadow-lg);
  pointer-events:none;
  animation:toastIn .25s ease-out;
}

/* ========== 通用按钮 ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:48px;
  min-width:var(--tap);
  padding:0 22px;
  border-radius:999px;
  background:#fff;
  color:var(--text);
  border:2px solid var(--line);
  font-size:16px;
  font-weight:700;
  transition:transform .12s ease-out,background .15s,box-shadow .15s;
}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn:disabled{filter:grayscale(1)}
.btn.pri{
  background:var(--pri);
  border-color:var(--pri);
  color:#fff;
  box-shadow:0 4px 0 var(--pri-d);
}
.btn.pri:active{box-shadow:0 1px 0 var(--pri-d)}
.btn.ghost{background:transparent;border-color:var(--pri);color:var(--pri-d)}
.btn.ghost:active{background:var(--pri-l)}

.tag{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background:var(--pri-l);
  color:var(--pri-d);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

/* ========== 档案选择 ========== */
.learner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:14px 10px;
  padding:16px 0;
}

.learner-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 4px 8px;
  min-height:0;
  background:transparent;
  border-radius:var(--r-lg);
  border:none;
  box-shadow:none;
  font-size:14px;
  font-weight:700;
  text-align:center;
  transition:transform .15s;
}
.learner-card:hover{background:var(--pri-l)}
.learner-card:active{transform:scale(.94);background:var(--pri-l)}

.avatar-svg{
  width:110px;
  height:110px;
  border-radius:50%;
  overflow:hidden;
  background:var(--pri-l);
  border:4px solid #fff;
  box-shadow:0 0 0 3px var(--pri-l);
  flex:none;
}
.avatar-svg svg,.avatar-svg img{width:100%;height:100%;object-fit:cover}

/* ========== 首页 ========== */
.home-sec{margin-bottom:28px}
.home-sec>h2,.home-sec>h3{font-size:20px;display:flex;align-items:center;gap:8px}

.resume-card{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:20px;
  min-height:96px;
  background:linear-gradient(135deg,var(--pri) 0%,var(--yt) 100%);
  color:#fff;
  border-radius:var(--r-lg);
  box-shadow:0 6px 0 var(--pri-d),var(--shadow);
  text-align:left;
  font-size:18px;
  font-weight:700;
  transition:transform .12s;
}
button.resume-card:active,.resume-card[role=button]:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pri-d)}
.resume-card .ep-cover{width:120px;flex:none;border-radius:var(--r)}
.resume-card .btn{background:#fff;color:var(--pri-d);border-color:#fff}
.resume-card .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}

.rec-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rec-row>*{flex:0 0 220px;scroll-snap-align:start}

.stat-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:var(--tap);
  padding:6px 16px;
  margin:0 8px 8px 0;
  background:#fff;
  border-radius:999px;
  border:2px solid var(--line);
  font-weight:700;
  font-size:15px;
}
.stat-chip b,.stat-chip strong{color:var(--pri-d);font-size:18px}

.today-stars{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:14px 18px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow);
  font-size:28px;
  color:var(--star);
  line-height:1;
}
.today-stars span{display:inline-block;animation:pop .4s ease-out backwards}

/* ========== 集列表 ========== */
.type-tabs,.book-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  margin-bottom:14px;
  background:#fff;
  border-radius:999px;
  border:2px solid var(--line);
  overflow-x:auto;
}
.type-tab,.book-tabs>button{
  flex:1;
  min-height:var(--tap);
  padding:0 18px;
  border-radius:999px;
  font-weight:700;
  color:var(--text-2);
  white-space:nowrap;
  transition:background .15s,color .15s;
}
.type-tab.on,.book-tabs>button.on{background:var(--pri);color:#fff}

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.filter-bar select{
  min-height:var(--tap);
  padding:0 36px 0 14px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6552' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance:none;
  -webkit-appearance:none;
  font-weight:700;
  cursor:pointer;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:var(--tap);
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--line);
  color:var(--text-2);
  font-weight:700;
  font-size:15px;
  transition:all .15s;
}
.chip.on{background:var(--tts-l);border-color:var(--tts);color:var(--tts-d)}

.ep-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.ep-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  cursor:pointer;
  text-align:left;
  transition:transform .15s,box-shadow .15s;
}
.ep-card:hover{box-shadow:var(--shadow-lg)}
.ep-card:active{transform:scale(.97)}

.ep-cover{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--pri-l),var(--tts-l));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  overflow:hidden;
}
.ep-cover img{width:100%;height:100%;object-fit:cover}
.ep-cover .tag{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.92)}

.ep-card>h3,.ep-card .ep-title{font-size:16px;margin:10px 12px 4px;line-height:1.35}

.ep-stars{color:var(--star);font-size:16px;letter-spacing:1px;padding:0 12px;line-height:1.4}

.ep-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:4px 12px 10px;
  font-size:13px;
  color:var(--text-3);
}

.ep-prog{
  height:8px;
  margin:auto 12px 12px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
}
.ep-prog>i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--pri),var(--yt));
  border-radius:inherit;
  transition:width .15s;
}

.done-badge{
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border-radius:999px;
  background:var(--ok);
  color:#fff;
  font-weight:700;
  font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  animation:flipIn .5s ease-out;
}

/* ========== 集详情 ========== */
.sec-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  padding:12px 16px;
  margin-bottom:10px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s;
}
.sec-row:active{transform:scale(.98)}
.sec-row>:first-child{flex:1;min-width:0;font-weight:700}

/* ========== 播放器 ========== */
.player{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
  gap:20px;
  align-items:start;
}

.stage{display:flex;flex-direction:column;gap:14px;min-width:0}

.side{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  position:sticky;
  top:calc(var(--topbar-h) + 12px);
  max-height:calc(100vh - var(--topbar-h) - var(--tabbar-h) - 40px);
}

.yt-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.yt-wrap iframe,.yt-wrap video,.yt-wrap>div{position:absolute;inset:0;width:100%;height:100%;border:0}

.scene-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:20px;
  background:linear-gradient(160deg,var(--tts-l) 0%,var(--pri-l) 100%);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  font-size:16px;
  text-align:center;
  overflow:hidden;
}
.scene-card svg{max-height:70%}

.sent-zone{
  padding:22px 20px;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  text-align:center;
}

.sent-idx{
  display:inline-block;
  margin-bottom:8px;
  padding:2px 12px;
  border-radius:999px;
  background:var(--bg);
  color:var(--text-3);
  font-size:13px;
  font-weight:700;
}

.sent-big{
  font-size:30px;
  line-height:1.6;
  font-weight:700;
  word-break:break-word;
  margin:4px 0 8px;
}

.w{
  position:relative;
  display:inline-block;
  padding:0 4px;
  margin:0 1px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.w:hover{background:var(--bg)}
.w.done{color:var(--text-3)}
.w.cur{background:var(--cur-bg);color:#fff}
.w.faved::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--star);
}
.w.faved{text-decoration:underline dotted var(--star);text-decoration-thickness:3px;text-underline-offset:8px}
.w.badw{background:var(--review-mark)}
.w.badw.cur{background:var(--cur-bg);color:#fff}

.sent-zh{font-size:17px;color:var(--text-2);line-height:1.5}

.ctrl-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

.cbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--bg);
  color:var(--text);
  font-size:22px;
  border:2px solid var(--line);
  transition:transform .12s,background .15s;
}
.cbtn:active{transform:scale(.9)}
.cbtn svg{width:24px;height:24px}
.cbtn.main{
  width:72px;
  height:72px;
  font-size:30px;
  background:var(--pri);
  border-color:var(--pri);
  color:#fff;
  box-shadow:0 5px 0 var(--pri-d);
}
.cbtn.main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pri-d)}
.cbtn.main svg{width:32px;height:32px}
.cbtn.on{background:var(--tts);border-color:var(--tts);color:#fff}

.seg{
  display:inline-flex;
  padding:4px;
  background:var(--bg);
  border-radius:999px;
  border:2px solid var(--line);
}
.seg>button{
  min-width:var(--tap);
  min-height:40px;
  padding:0 12px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  color:var(--text-2);
  transition:background .15s,color .15s;
}
.seg>button.on{background:var(--tts);color:#fff}

/* 录音卡：录音条与 AI 点评区同属一张卡，结果原地出现在录音键下方。 */
.rec-card{
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.rec-card .rec-bar{
  background:transparent;
  box-shadow:none;
  border-radius:0;
}

.rec-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  padding:14px;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

.rec-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--danger);
  color:#fff;
  font-size:30px;
  box-shadow:0 5px 0 #C9443D;
  transition:transform .12s;
}
.rec-btn svg{width:32px;height:32px}
.rec-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #C9443D}
.rec-btn.recording{
  background:#E53935;
  box-shadow:0 0 0 0 rgba(229,57,53,.55);
  animation:pulse 1.2s ease-in-out infinite;
}

.cmp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:52px;
  padding:0 18px;
  border-radius:999px;
  background:var(--tts-l);
  color:var(--tts-d);
  border:2px solid var(--tts);
  font-weight:700;
}
.cmp-btn:active{transform:scale(.95)}

.hist-dots{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hist-dots .mine-btn{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:var(--pri-l);
  color:var(--pri-d);
  border:2px solid var(--pri);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.hist-dots .mine-btn:active{transform:scale(.95)}

.sent-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:8px;
  -webkit-overflow-scrolling:touch;
}

.srow{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 10px;
  border-radius:var(--r);
  cursor:pointer;
  border:2px solid transparent;
  transition:background .15s;
}
.srow+.srow{margin-top:2px}
.srow:hover{background:var(--bg)}
.srow.cur{background:var(--pri-l);border-color:var(--pri)}
.srow .txt,.srow>span:not(.st-ico){flex:1;min-width:0;font-size:15px;line-height:1.4}

.st-ico{
  flex:none;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--bg);
  font-size:15px;
  color:var(--text-3);
}
.srow.cur .st-ico{background:var(--pri);color:#fff}
}

/* ========== 移动端布局（≤860px 单列：视频全宽在上，句子与控制在下） ========== */
@media (max-width: 860px){
  .player{grid-template-columns:minmax(0,1fr);gap:14px}
  .side{position:static;max-height:none}
  .yt-wrap{width:100%}
  .badge-line{flex-wrap:wrap}
}

/* ================= 第二轮改造追加（形态对标 + AI 点评） ================= */
.simple-hide{display:none!important}
/* ===== 追加：播放页单列一屏到底 ===== */
.player{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:880px;margin:0 auto;height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 16px)}
.stage{flex:none}
.sent-list-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.sent-list-wrap .seg{align-self:center}
.sent-list{flex:1;min-height:100px}

/* ===== 控制条 ===== */
.ctrl-bar{justify-content:space-between;padding:12px 10px;gap:4px;flex-wrap:nowrap}
.cbtn2{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.cbtn2 .cb-ico{width:52px;height:52px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--text);transition:transform .12s,background .15s}
.cbtn2:active .cb-ico{transform:scale(.92)}
.cbtn2 .cb-lbl{font-size:12px;color:var(--text-2);font-weight:700;line-height:1}
.cbtn2.main .cb-ico{width:70px;height:70px;font-size:29px;background:#2F7CF6;border-color:#2F7CF6;color:#fff;box-shadow:0 5px 0 #1B5FD0}
.cbtn2.on .cb-ico{background:#2F7CF6;border-color:#2F7CF6;color:#fff}
.seg-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== 大字卡收藏星 / 点词橙色 ===== */
.sent-zone{position:relative}
.sent-fav{position:absolute;top:8px;right:10px;width:44px;height:44px;background:none;border:0;font-size:25px;color:var(--star);cursor:pointer;z-index:2}
.w.picked{background:#FF8A3D;color:#fff}
.sent-list .w.picked{background:#FF8A3D;color:#fff}

/* ===== 句子卡三段式 ===== */
.srow{display:block;padding:12px 12px 8px;border:2px solid transparent}
.srow.cur{background:#FFF6DE;box-shadow:inset 0 3px 0 var(--star);border-color:#F5D98B}
.sr-main{display:flex;gap:8px;align-items:flex-start}
.srow .s-no{flex:none;color:var(--text-3);font-weight:700;font-size:14px;line-height:1.5;min-width:20px;text-align:right}
.srow .s-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srow .s-en{font-weight:700;font-size:16px;line-height:1.55;color:var(--text)}
.srow .s-en .w{padding:0 2px;margin:0}
.srow .s-zh{color:var(--text-3);font-size:13px;line-height:1.45}
.sr-sep{height:1px;background:var(--line);margin:10px 0 4px}
.sr-acts{display:flex;gap:4px}
.sr-act{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 10px;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer}
.sr-act:active{background:var(--bg)}
.sr-fav.on{color:var(--danger)}

/* 简版数字格 */
.sent-list .sbox{width:52px;height:52px;margin:4px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:18px;font-weight:700;color:var(--text)}
.sbox.cur{background:var(--pri-l);border-color:var(--pri)}
.sbox.done{background:var(--tts-l);border-color:var(--tts);color:var(--tts-d)}
.sbox.listened{border-color:var(--tts)}

/* ===== 词条卡（居中弹窗） ===== */
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.modal-mask{position:fixed;inset:0;background:rgba(38,26,14,.48);display:flex;align-items:center;justify-content:center;padding:18px;z-index:80}
.word-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(94vw,430px);max-height:86dvh;overflow-y:auto;padding:20px 18px;animation:pop .25s ease-out}
.wc-top{display:flex;align-items:center;gap:8px}
.wc-star{width:44px;height:44px;border:0;background:none;font-size:25px;color:var(--text-3);cursor:pointer;flex:none}
.wc-star.on{color:var(--star)}
.wc-head{flex:1;min-width:0;font-size:30px;font-weight:800;line-height:1.15;word-break:break-word}
.wc-say{width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--bg);font-size:21px;cursor:pointer;flex:none}
.wc-x{width:44px;height:44px;border:0;background:none;font-size:19px;color:var(--text-3);cursor:pointer;flex:none}
.wc-ipas{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.wc-ipa{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border:0;border-radius:999px;background:#E3F0FF;color:#1663C7;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.wc-pos{display:inline-block;margin-top:10px;padding:2px 9px;border-radius:6px;background:var(--bg);color:var(--text-2);font-size:12px;font-weight:700}
.wc-zh{font-size:19px;font-weight:800;margin-top:10px;line-height:1.4}
.wc-endef{color:var(--text-3);font-size:14px;line-height:1.5;margin-top:6px}
.wc-ex{margin-top:14px;padding:12px;border-radius:var(--r);background:var(--bg)}
.wc-ex-en{font-weight:700;line-height:1.5}
.wc-ex-zh{color:var(--text-2);font-size:13.5px;margin-top:3px;line-height:1.45}
.wc-hint{color:var(--text-2);margin-top:12px;line-height:1.5}
.wc-actions{display:flex;gap:10px;margin-top:18px}
.wc-copy{flex:1;min-height:48px;border-radius:999px;border:2px solid var(--pri);background:#fff;color:var(--pri-d);font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.wc-fav{flex:1.4;min-height:48px;border-radius:999px;border:2px solid var(--pri);background:var(--pri);color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.wc-fav.on{background:#fff;color:var(--pri-d)}
.wc-close{min-height:48px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--text-2);font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;padding:0 18px}

/* 简版词卡 */
.word-card.simple{text-align:center}
.wc-big{font-size:38px;font-weight:800}
.wc-emoji{font-size:52px;margin:8px 0}
.wc-say.big{width:76px;height:76px;font-size:32px}
.word-card.simple .wc-zh{font-size:21px}
.word-card.simple .wc-actions{justify-content:center}
.word-card.simple .wc-fav,.word-card.simple .wc-close{flex:none;padding:0 22px}

/* ===== AI 点评区（录音卡内、紧邻录音键） ===== */
#assessBox{background:transparent;padding:2px 12px 10px;display:flex;flex-direction:column;gap:8px;align-items:center}
#assessBox:empty{display:none}
#assessBtn{min-height:44px;padding:0 20px;border-radius:999px;border:2px solid var(--star);background:#FFF6DE;color:#9A6B00;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
#assessBtn:disabled{opacity:.6}
.assess-stars{font-size:34px;letter-spacing:2px;line-height:1.15;text-align:center}
.assess-stars .a-star{display:inline-block}
.assess-stars .a-star.on{color:var(--star);animation:assess-pop .38s ease-out both}
.assess-stars .a-star.off{color:var(--line)}
@keyframes assess-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.28);opacity:1}100%{transform:scale(1);opacity:1}}
.assess-pending{text-align:center;color:var(--text-2);font-weight:700;font-size:15px;animation:assess-pulse 1.2s ease-in-out infinite}
@keyframes assess-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.assess-err{text-align:center;color:var(--danger);font-size:14px;line-height:1.5}
.assess-enc{text-align:center;color:var(--text-2)}
.assess-bad{text-align:center;color:var(--text-2);font-size:14px;line-height:1.6}
.assess-word{margin:0 2px;padding:4px 12px;border-radius:999px;border:2px solid var(--pri);background:var(--pri-l);color:var(--pri-d);font-weight:800;cursor:pointer;font-family:inherit}

/* ===== 简版句子卡（动态字幕面板：完整句子＋跟读状态） ===== */
.sent-panel-note{font-size:11.5px;color:var(--text-3);font-weight:600}
.sent-list .scard{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0;padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:#fff;font-family:inherit;cursor:pointer;text-align:left}
.sent-list .scard .sc-no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pri-l);color:var(--pri-d);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.sent-list .scard .sc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sent-list .scard .sc-en{font-size:19px;font-weight:700;line-height:1.3;color:var(--text)}
.sent-list .scard .sc-zh{font-size:14px;line-height:1.3;color:var(--text-2)}
.sent-list .scard .sc-ico{flex:none;font-size:14px;color:var(--text-3)}
.sent-list .scard.listened .sc-ico{color:var(--tts)}
.sent-list .scard.done .sc-ico{color:var(--tts-d)}
.sent-list .scard.cur{background:#FFF6DE;border-color:#F5D98B;box-shadow:inset 0 3px 0 var(--star)}
.sent-list .scard.cur .sc-no{background:var(--pri);color:#fff}

/* ===== 集列表卡补齐 ===== */
.ep-cover{aspect-ratio:16/9}
.ep-dur{position:absolute;left:8px;bottom:8px;background:rgba(30,20,10,.68);color:#fff;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px}
.ep-trow{display:flex;align-items:flex-start;gap:8px;padding:0 12px}
.ep-card .ep-title{flex:1;min-width:0;margin:10px 0 2px}
.ep-trow .ep-stars{padding:10px 0 0;color:var(--star)}
.ep-sub{padding:0 12px;color:var(--text-3);font-size:13px;line-height:1.35}
.ep-tags{display:flex;gap:6px;flex-wrap:wrap;padding:7px 12px 0}
.ep-tags .tag{position:static}
.tag.alt{background:var(--pri-l);color:var(--text);border:1px solid var(--line)}
.ep-prog{overflow:hidden}
.ep-prog-bar{height:100%;background:var(--tts);border-radius:999px}
.ai-note{font-size:13px;line-height:1.5}

/* ===== 小屏微调 ===== */
@media (max-width:480px){
.cbtn2 .cb-ico{width:46px;height:46px;font-size:19px}
.cbtn2.main .cb-ico{width:62px;height:62px;font-size:26px}
.sent-big{font-size:26px}
}

/* ================= 第三轮移动端紧凑布局（对标 mcxue） ================= */
/* 动态字幕面板：标题、模式/字幕/筛选胶囊与句子列表同属一个区块。 */
.sent-list-wrap{gap:0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.sent-panel-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:10px 12px 8px;border-bottom:1px solid var(--line);background:#fff}
.sent-panel-title{font-size:15px;font-weight:800;line-height:1.2;color:var(--text)}
.sent-panel-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.sent-panel-head>.seg{flex:none}
.sent-list{background:transparent;border-radius:0;box-shadow:none}
.yt-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yt-tools .btn.small{min-height:36px;padding:0 14px;font-size:13px;border-width:1px}
.big-rec{flex:none;width:72px;height:72px;border-radius:50%;background:var(--danger);color:#fff;font-size:30px;box-shadow:0 5px 0 #C9443D;display:inline-flex;align-items:center;justify-content:center}
.big-rec:active{transform:translateY(3px);box-shadow:0 2px 0 #C9443D}
.big-rec.recording{background:#E53935;animation:pulse 1.2s ease-in-out infinite}

@media (max-width:860px){
  #view{padding:8px 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px)}
  .player{gap:4px;height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 8px)}
  .player>.stage{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:24;background:var(--bg);gap:3px;padding-bottom:2px}
  .yt-wrap{border-radius:18px}
  .yt-tools{gap:6px;flex-wrap:nowrap;min-height:26px}
  .yt-tools .btn.small{min-height:24px;padding:0 9px;font-size:11px;border-width:1px;white-space:nowrap}

  /* 视频下方唯一控制条：约 60px、六钮同排、钮面只放符号/短字。 */
  .ctrl-bar{min-height:60px;padding:5px 8px;gap:2px;border-radius:18px;justify-content:space-between}
  .cbtn2{width:44px;height:50px;justify-content:center;gap:0}
  .cbtn2 .cb-ico{width:40px;height:40px;font-size:17px;border-width:1.5px}
  .cbtn2.main{width:50px}
  .cbtn2.main .cb-ico{width:50px;height:50px;font-size:23px;box-shadow:0 3px 0 #1B5FD0}
  .cbtn2 .cb-lbl{display:none}
  #btnAB .cb-ico{font-size:16px;font-weight:800}
  #btnSpeed .cb-ico{font-size:11px;font-weight:800;white-space:nowrap}
  #btnLoop .cb-ico{font-size:15px;font-weight:800}

  /* 当前句大卡压缩，保证英、中完整落在首屏。 */
  .sent-zone{padding:7px 12px 8px;border-radius:18px}
  .sent-idx{font-size:10.5px;line-height:1.25;margin-bottom:2px;padding:0 7px}
  .sent-big{font-size:22px;line-height:1.26;margin:1px 0 3px}
  .sent-zh{font-size:13.5px;line-height:1.3}
  .sent-fav{width:36px;height:36px;top:4px;right:6px;font-size:21px}
  .player.simple-mode .sent-big{font-size:24px}

  /* 录音条改成单行紧凑条，避免把句子列表顶出首屏。 */
  .rec-bar{gap:8px;padding:5px 7px;border-radius:18px;flex-wrap:nowrap}
  .rec-bar .btn{min-height:38px;min-width:0;padding:0 9px;font-size:13px;flex:1 1 0;white-space:nowrap}
  .rec-bar #cmpBtn{flex:0 1 auto}
  .rec-bar .hint{display:none}
  .rec-bar .hist-dots{flex:0 1 auto;overflow:hidden}
  .hist-dots .mine-btn{min-height:32px;padding:0 8px;font-size:12px;white-space:nowrap}
  .big-rec{width:54px;height:54px;font-size:24px;box-shadow:0 3px 0 #C9443D}
  #assessBox{padding:8px 10px;border-radius:18px}
  #assessBtn{min-height:38px;padding:0 16px;font-size:14px}

  /* 动态字幕标题行：胶囊直接进入面板头，不再各占一整行。 */
  .sent-panel-head{gap:2px 4px;padding:4px 6px}
  .sent-panel-title{font-size:13px}
  .sent-panel-tools{display:contents}
  .sent-panel-head .seg{padding:1px;border-width:1px}
  .sent-panel-head .seg>button{min-width:0;min-height:21px;padding:0 4px;font-size:10px;border-radius:999px}

  /* 句子卡压缩：当前卡完整、下一卡能在首屏露头。 */
  .sent-list{padding:5px}
  .srow{padding:6px 8px 4px;border-radius:14px}
  .sr-main{gap:5px}
  .srow .s-no{min-width:16px;font-size:12px;line-height:1.3}
  .srow .st-ico{width:20px;height:20px;font-size:11px}
  .srow .s-en{font-size:14.5px;line-height:1.28}
  .srow .s-zh{font-size:12px;line-height:1.25}
  .sr-sep{margin:4px 0 1px}
  .sr-acts{gap:2px}
  .sr-act{min-height:25px;padding:1px 6px;font-size:11.5px;border-radius:7px}
  .sent-list .sbox{width:44px;height:44px;margin:3px;font-size:16px}
}

@media (max-width:380px){
  #view{padding-left:14px;padding-right:14px}
  .cbtn2{width:40px}
  .cbtn2 .cb-ico{width:37px;height:37px}
  .cbtn2.main{width:47px}
  .cbtn2.main .cb-ico{width:47px;height:47px}
  .sent-big{font-size:21px}
}

/* ================= 第四轮：巨字修复 + 顶栏图标钮 + TTS 紧凑舞台条 + 录音条流式 + 课本版式 ================= */
/* 通用确认弹层（原误用 .scene-card 导致 64px 巨字）：与词条卡同规格的正常弹层。 */
.modal-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(94vw,430px);max-height:86dvh;overflow-y:auto;padding:22px 18px;text-align:center;font-size:16px;animation:pop .25s ease-out}
.modal-card p{font-size:16.5px;line-height:1.55;margin:0 0 16px}
.modal-card .badge-line{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-card .btn{min-width:110px}

/* 顶栏图标钮组（视频集）：YouTube 打开 / 通道切换，不占正文行。 */
.yt-top-btns{display:inline-flex;align-items:center;gap:6px;flex:none}
.top-ico-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none;font-family:inherit}
.top-ico-btn:active{transform:scale(.92);background:var(--pri-l)}

/* TTS 舞台条：原声不可用/切示范音时，舞台塌缩成一条紧凑状态条（不再 16:9 巨字墙）。 */
.yt-note{display:flex;align-items:center;gap:10px;background:rgba(255,251,240,.97);border-radius:14px;box-shadow:var(--shadow);padding:8px 12px;font-size:15px}
.yt-wrap>div.yt-note{position:absolute;inset:auto;left:8px;right:8px;bottom:8px;height:auto;z-index:5}
.yt-note-ico{font-size:20px;flex:none;line-height:1}
.yt-note-text{flex:1;min-width:0;margin:0;font-weight:700;line-height:1.35;text-align:left}
.yt-note-btn{flex:none;min-height:36px;padding:0 14px;font-size:13.5px}
.stage.tts-mode .yt-wrap{aspect-ratio:auto;height:auto;background:linear-gradient(160deg,var(--tts-l) 0%,var(--pri-l) 100%);overflow:visible}
.stage.tts-mode .yt-wrap>div.yt-note{position:static;inset:auto}
.stage.tts-mode .yt-note{background:transparent;box-shadow:none;border-radius:0;padding:10px 14px}

/* 播放页区块防压叠：固定区块不许被 flex 压缩，列表独自吸收剩余高度。 */
.player>.ctrl-bar,.player>.sent-zone,.player>.rec-card{flex:none}
.sent-zone{overflow:visible}
.sent-idx{position:relative;z-index:1}

/* 录音条流式布局：录音胶囊自成一行换行排列，任何录音数下不横向溢出、不重叠。 */
.rec-bar .hist-dots:has(.mine-btn){flex:1 1 100%;justify-content:center;overflow:visible}
.hist-dots .mine-btn{flex:none}

/* 课本/台词卡（无视频）版式：没有视频，本应更宽松——拉开区块间距与层级。 */
.player.text-mode{gap:14px}
.player.text-mode .sent-zone{padding:18px 18px 16px}
.player.text-mode .sent-idx{font-size:12.5px;padding:2px 11px;margin-bottom:9px}
.player.text-mode .sent-big{font-size:31px}
.player.text-mode .rec-bar{padding:14px}

@media (max-width:860px){
  /* 录音条改流式：跟读键＋对比听一行放不下就自然换行，胶囊第二行流式排列。 */
  .rec-bar{flex-wrap:wrap;gap:8px;padding:8px}
  .rec-bar .btn{flex:1 1 148px;min-width:0;white-space:normal;min-height:40px}
  .rec-bar #cmpBtn{flex:0 1 auto}
  .rec-bar .big-rec{flex:none}
  .hist-dots .mine-btn{min-height:34px}

  /* 课本模式移动端：间距层级拉开，杜绝贴边/压叠。 */
  .player.text-mode{gap:10px}
  .player.text-mode .sent-zone{padding:15px 15px 13px}
  .player.text-mode .sent-idx{font-size:12px;padding:2px 10px;margin-bottom:8px}
  .player.text-mode .sent-big{font-size:24px;line-height:1.38;margin:2px 0 5px}
  .player.text-mode .sent-zh{font-size:15px;line-height:1.45}
  .player.text-mode .rec-bar{padding:10px}
  .player.text-mode .sent-panel-head{gap:6px 8px;padding:10px 10px 8px}
  .player.text-mode .sent-panel-title{font-size:14.5px}
  .player.text-mode .sent-panel-head .seg>button{min-height:26px;padding:0 8px;font-size:11.5px}
  .player.text-mode .srow{padding:9px 10px 7px}
  .player.text-mode .srow .s-en{font-size:15.5px;line-height:1.4}
  .player.text-mode .srow .s-zh{font-size:12.5px}
}

@media (max-width:380px){
  .player.text-mode .sent-big{font-size:23px}
}

/* 顶栏带视频图标钮时整体收紧，保证标题不被挤成省略号（小屏）。 */
@media (max-width:480px){
  #topbar:has(#ytTopBtns){gap:8px;padding:0 12px}
  #topbar:has(#ytTopBtns) .top-ico-btn{width:37px;height:37px}
  #topbar:has(#ytTopBtns) .chan-badge{padding:0 8px;font-size:12px;height:28px}
  #topbar:has(#ytTopBtns) .top-title{font-size:19px}
  #topbar:has(#ytTopBtns) #parentBtn{min-width:44px;width:44px;height:44px;padding:0}
}

/* ================= 第五轮：家长口令屏（原先整组样式缺失，退化成一行纯文本） ================= */
.parent-pin{
  width:100%;max-width:460px;margin:8px auto 24px;padding:20px 20px 16px;
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);text-align:center
}
.parent-pin>h2{font-size:27px;margin-bottom:6px}
.parent-pin>p.muted{margin:0;color:var(--text-2);font-size:15px;line-height:1.55}
.parent-pin .muted{color:var(--text-2)}
.pin-status{display:flex;justify-content:center;margin:10px 0 6px}
.pin-count{
  display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:2px 12px;
  border-radius:999px;background:var(--pri-l);color:var(--pri-d);font-size:14px;font-weight:800;line-height:1.3
}
.parent-pin.is-busy .pin-count{background:var(--tts-l);color:var(--tts-d)}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:16px;min-height:18px;margin:2px 0 12px}
.pin-dot{
  display:block;flex:none;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--line);transition:background .15s,border-color .15s,transform .15s
}
.pin-dot.on{background:var(--pri);border-color:var(--pri);transform:scale(1.08)}
.pin-dots.shake{animation:pinShake .45s ease}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pin-pad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,58px);
  gap:10px;width:min(100%,336px);margin:0 auto
}
.pin-key{
  appearance:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:58px;
  padding:8px;border:2px solid var(--line);border-radius:19px;background:#fff;color:var(--text);
  box-shadow:0 3px 0 var(--line);font-size:26px;font-weight:800;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s,background .15s,border-color .15s
}
.pin-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line);background:var(--pri-l);border-color:var(--pri)}
.pin-key.pin-tool{background:var(--bg);color:var(--pri-d);font-size:17px}
.pin-key.pin-tool[data-k="del"]{font-size:25px}
.pin-blank{display:block;background:transparent;border:0;box-shadow:none}
.parent-pin.is-busy .pin-key{opacity:.72}
.pin-flow-hint{margin:10px 0 0;color:var(--text-3);font-size:13.5px;font-weight:700;line-height:1.45}
.pin-hint{min-height:22px;margin:10px 0 0;font-size:14px;line-height:1.5}
.pin-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pin-foot .btn{flex:1 1 130px;max-width:190px}
.pin-success{padding-top:34px;padding-bottom:34px}
.pin-success-icon{
  width:66px;height:66px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--tts-l);color:var(--tts-d);font-size:36px;font-weight:900;line-height:1
}
.pin-success-btn{margin-top:18px;min-width:180px}
.math-q{
  margin:22px 0 14px;padding:16px 12px;border:2px solid var(--line);border-radius:var(--r);
  background:var(--bg);font-size:30px;font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums
}
.math-in{
  display:block;width:100%;min-height:58px;padding:10px 14px;border:2px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--text);font-size:24px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums
}
.math-in:focus{border-color:var(--pri);outline:3px solid rgba(255,159,67,.2);outline-offset:2px}
.math-hint{margin-top:12px}
@media (max-width:480px){
  .parent-pin{margin-top:4px;padding:18px 14px 14px;border-radius:22px}
  .parent-pin>h2{font-size:25px}
  .pin-status{margin-top:8px}
  .pin-pad{grid-template-rows:repeat(4,58px);gap:9px}
  .pin-key{min-height:58px;border-radius:17px}
  .pin-foot .btn{flex-basis:120px}
}

/* 录音状态提示：不能只靠会消失的 toast，保存/失败结果要留在录音条里。 */
.rec-status{
  font-size:13px;line-height:1.35;text-align:center;
  color:var(--text-2);padding:2px 12px 0;
}
.rec-status.ok{color:var(--tts-d)}
.rec-status.error{color:#B3261E}
#recStatus:empty{display:none}

/* ==== 轻量用户体系（2026-10-23） ==== */
.learner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 10px;
  padding: 16px 0;
}

button.learner-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 0;
  padding: 10px 4px 8px;
  border: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.learner-avatar {
  display: block;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  margin: 0 auto;
  border-radius: 22%;
  overflow: hidden;
  background-color: #E7F5FF;
  flex: none;
}

.learner-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* 秦岭四宝为原图直入（img），与 svg 同盒模型；圆角与图中方盘弧度对齐 */
.learner-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 18%;
}

.learner-name {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.learner-grade {
  margin-top: 0;
  color: #6b7280;
  font-size: 11px;
}

.legacy-zone {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed #e5c46b;
  border-radius: 16px;
  background: #fff9e8;
}

.legacy-zone h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.legacy-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.legacy-card + .legacy-card {
  margin-top: 8px;
}

.legacy-name {
  font-size: 15px;
  font-weight: 700;
  flex: none;
}

.legacy-card p.muted {
  font-size: 12px;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.legacy-card [data-act="claim"] {
  width: auto;
  min-height: 40px;
  padding: 8px 14px;
  flex: none;
}

[data-act="claim"],
.pf-next,
.pf-create-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--pri);
  border-radius: 12px;
  background: var(--pri);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.profile-new-btn {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
}

.profile-create section {
  box-sizing: border-box;
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.pf-step {
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 13px;
}

.pf-name-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 18px;
}

.pf-err {
  min-height: 22px;
  margin: 8px 0;
  color: #c62828;
  font-size: 14px;
  line-height: 1.5;
}

.pf-next,
.pf-create-btn {
  display: block;
  margin-top: 16px;
}

.pf-back {
  min-width: 44px;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--pri-d);
  font: inherit;
  cursor: pointer;
}

.pf-grades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pf-grades button {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font: inherit;
  cursor: pointer;
}

.pf-grades button.on {
  border-color: var(--pri);
  background: var(--pri);
  color: #fff;
  font-weight: 700;
}

.pf-grade-note {
  margin: 12px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

.pf-avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pf-avatars button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 68px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.pf-avatars button.on {
  border-color: var(--pri);
  background: var(--pri-l);
}

.pf-avatars button svg {
  display: block;
  width: 48px;
  height: 48px;
}

.pf-avatars button img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 18%;
}

.pf-confirm {
  text-align: center;
}

.profile-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.profile-pin .pin-key {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.pin-status-text {
  min-height: 24px;
  color: var(--pri-d);
  font-size: 14px;
  line-height: 1.6;
}

.profile-pin.locked .pin-key {
  opacity: .45;
}

.profile-pin.shake {
  animation: pinShake .45s ease;
}

.pin-forgot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pri-d);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.profile-forgot {
  box-sizing: border-box;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
  line-height: 1.6;
}

.profile-forgot button {
  min-width: 44px;
  min-height: 44px;
}

/* PIN 页一屏收紧（2026-10-23）：去掉标题/说明的默认边距叠加，忘记区压缩，
   使孩子 PIN 页底部忘记区也落在底栏上沿之上 */
.profile-pin h2,
.profile-pin p {
  margin: 0;
}

.profile-forgot {
  margin-top: 10px;
  padding: 12px;
  line-height: 1.5;
}

.profile-forgot h3 {
  margin: 0 0 2px;
}

.profile-forgot p {
  margin: 0 0 6px;
}

.profile-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: 20px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}

.profile-panel button[data-act] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
}

/* 换头像（2026-10-24）：面板头像点按入口需挣脱上面的块级按钮样式（同特异性、后置覆盖） */
.profile-panel button.avatar-tap {
  width: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 22%;
}

.avatar-picker h3 {
  margin: 0;
  font-size: 19px;
}

.avatar-picker .pf-avatars {
  margin-top: 14px;
}

.avatar-picker-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* 「我的」页档案卡（2026-10-24 头像可换入口） */
.my-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.my-profile-card .learner-avatar {
  margin: 0;
}

.my-avatar-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 22%;
  flex: none;
}

.my-profile-info {
  flex: 1;
  min-width: 0;
}

.my-profile-name {
  font-size: 19px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.band-fallback-note {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff9e8;
  color: #795b20;
  font-size: 14px;
  line-height: 1.6;
}

.parent-profiles .profile-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.profile-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-acts .btn {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
}

.claim-check {
  box-sizing: border-box;
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  line-height: 1.6;
}

.claim-check button {
  min-width: 44px;
  min-height: 44px;
}

.profile-exit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.profile-exit button,
.profile-exit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.profile-exit small {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

.profile-empty {
  padding: 32px 16px;
  color: #6b7280;
  text-align: center;
  line-height: 1.6;
}

.profile-pin-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 0;
  text-align: center;
}

.profile-pin-identity .learner-avatar {
  width: 64px;
  height: 64px;
  padding: 5px;
}

.profile-pin-identity svg {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-pin-identity .learner-name {
  font-size: 16px;
  font-weight: 700;
}

button.learner-card:focus-visible,
.profile-new-btn:focus-visible,
[data-act="claim"]:focus-visible,
.profile-create button:focus-visible,
.pf-name-input:focus-visible,
.profile-pin .pin-key:focus-visible,
.pin-forgot:focus-visible,
.profile-forgot button:focus-visible,
.profile-panel button[data-act]:focus-visible,
.profile-acts .btn:focus-visible,
.claim-check button:focus-visible,
.profile-exit button:focus-visible,
.profile-exit a:focus-visible {
  outline: 3px solid var(--pri-d);
  outline-offset: 3px;
}

/* ================= 第六轮：全站 chip 组紧凑化（治「排版性换行」） ================= */
/* 口径：固定组（分段/筛选）390px 一行排下；变长组（点评筹片等）先按紧凑规格争取一行，
   真放不下才紧凑行距整齐换行。全站 chip 统一紧凑规格：字号 13–14px、内边距收敛、高 32–36px。 */

/* 目录星级筛选 chip：44px 胖规格 → 紧凑 */
.chip{min-height:34px;padding:0 11px;font-size:13.5px}
/* 目录筛选条的下拉同步收紧（与 chip 同高对齐） */
.filter-bar{gap:6px}
.filter-bar select{min-height:34px;padding:0 30px 0 12px;font-size:13.5px}
/* 首页/本子统计与成就 chip：44px → 36px */
.stat-chip{min-height:36px;padding:5px 13px;font-size:14px;margin:0 6px 6px 0}
.stat-chip b,.stat-chip strong{font-size:16px}
/* 录音药丸：审计实测移动端既有规格（32px/12px）下 3 颗一行 34px 已合规，规格不动，仅组间距微收 */
.hist-dots{gap:7px}

/* 点评卡：标签与问题词筹片改同一 flex 行起排，筹片收紧凑规格，典型三词一行排下 */
#assessBox{padding:2px 12px 10px;gap:6px}
.assess-bad{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:13px;line-height:1.35}
.assess-word{margin:0;padding:2px 9px;font-size:13px;line-height:1.3}

@media (max-width:860px){
  /* 播放页动态字幕工具条：full 模式去掉「动态字幕」标题（seg 自带语义），三组同排一行。
     text-mode 的加胖覆盖（26px/11.5px）在此一并收敛到同一紧凑规格。 */
  .sent-panel-head,.player.text-mode .sent-panel-head{flex-wrap:nowrap;gap:5px;padding:5px 6px}
  .player:not(.simple-mode) .sent-panel-title{display:none}
  .sent-panel-head .seg{padding:1px;border-width:1px;flex:none}
  .sent-panel-head .seg>button,.player.text-mode .sent-panel-head .seg>button{min-width:0;min-height:24px;padding:0 4px;font-size:10.5px;border-radius:999px;white-space:nowrap}
  /* 录音条上下再收一点，与工具条一起把控制区总高降下来 */
  .rec-bar{padding:6px 8px}
}

/* ================= 第七轮：动态字幕行结构重做（设置行图标化＋筛选归位列表头） ================= */
/* 拆分关注点：播放/字幕设置独立成行——segMode 图标＋短标签、segSub 配字幕图标＋短字，
   两组之间留 20px 明确间隔、不贴边；句子筛选（全部/未跟读/已收藏）离开设置行，
   归到句子列表头部做小号文字页签（下划线示选中）。第六轮「三组硬挤一排」口径作废。 */
.sent-set-row{display:flex;align-items:center;gap:20px;padding:0 6px}
.sent-set-row .seg{padding:3px;flex:none;background:#fff}
.sent-set-row .seg>button{display:inline-flex;align-items:center;gap:5px;min-width:0;min-height:26px;padding:0 8px;font-size:12px;border-radius:999px;white-space:nowrap}
.sent-set-row .seg-ic{display:inline-flex;flex:none;line-height:0}
.set-sub{display:flex;align-items:center;gap:7px;flex:none}
.set-cap{display:inline-flex;flex:none;line-height:0;color:var(--text-3)}
.sent-filter-tabs{display:flex;align-items:center;gap:16px;margin-left:auto;flex:none}
.sent-filter-tabs>button{padding:3px 1px 5px;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--text-3);border-bottom:2.5px solid transparent;white-space:nowrap}
.sent-filter-tabs>button.on{color:var(--tts-d);border-bottom-color:var(--tts)}

@media (max-width:860px){
  /* 覆盖第六轮：full 模式标题不再隐藏，面板头只剩标题（＋简版说明）与筛选页签 */
  .player:not(.simple-mode) .sent-panel-title{display:block}
  .sent-panel-head,.player.text-mode .sent-panel-head{flex-wrap:nowrap;gap:8px;padding:5px 14px 4px}
  .sent-panel-title,.player.text-mode .sent-panel-title{font-size:14px}
}

/* ================= 第八轮：全站压盖专项（用户 2026-10-24 真机截图立项） ================= */
/* 根因一：PIN 类页面内容高固定（孩子 PIN 静止内容底 750px），此前只在 390×844 一档验过，
   矮视口（浏览器工具栏展开、横屏、矮屏机）下最后一行被固定底栏压盖。
   正解：PIN 骨架随可用高度分档压缩（键盘行高/头像/间距），不删内容；
   家长 PIN 仅在 ≤740 档压键盘（844 基线 58px 大键不动，pin 自测口径不回退）。 */
/* 根因二：播放器写死 height（一屏布局靠列表内滚），舞台块 flex:none＋句子列表 min-height:100px，
   矮视口/视频集/点评态下舞台超高，列表被挤出播放器盒、末段被底栏压盖或被 wrap 裁掉。
   注意：不能简单把 .player 改 min-height——不定高 flex 容器里列表会按内容全展开（实测盒高 1545px，
   一屏设计与内滚全毁）。正解是分流：装得下的常态保持定高＋内滚；装不下的组合（视频集、
   点评已出、矮屏横屏）切流式布局——盒高自适应、列表给定高、整页滚动接管（底部留白保末行可达）。 */

@media (max-height:870px){
  /* 第一档：孩子/向导/重置 PIN（.profile-pin）先行收紧，844 基线家长键盘不受影响 */
  .profile-pin .pin-pad{grid-template-rows:repeat(4,50px)}
  .profile-pin-identity .learner-avatar{width:52px;height:52px}
  .profile-pin{gap:6px}
  .profile-pin .pin-dots{margin-bottom:8px}
  .profile-forgot{margin-top:6px;padding:10px 12px}
  .pf-back{margin-top:6px}
}
@media (max-height:740px){
  /* 第二档：孩子 PIN 再压一档；家长 PIN 键盘开始压缩（验证屏 664 档靠此档＋第三档过关） */
  .profile-pin .pin-pad{grid-template-rows:repeat(4,44px)}
  .profile-pin .pin-key{min-height:40px}
  .parent-pin .pin-pad{grid-template-rows:repeat(4,50px)}
  .parent-pin .pin-key{min-height:44px}
  .profile-pin-identity .learner-avatar{width:40px;height:40px}
  .profile-pin h2{font-size:20px}
  .profile-pin .pin-status-text{min-height:18px}
  .profile-pin .pin-dots{margin-bottom:6px}
  .profile-pin .pin-dot{width:14px;height:14px}
  .profile-forgot{padding:8px 10px}
  .profile-forgot p{margin-bottom:3px}
}
@media (max-height:680px){
  /* 第三档：身份区改横排小头像（不删身份信息），键盘到 40px 下限，家长键盘到 44px */
  .profile-pin .pin-pad{grid-template-rows:repeat(4,40px)}
  .parent-pin .pin-pad{grid-template-rows:repeat(4,44px)}
  .profile-pin-identity{flex-direction:row;justify-content:center;gap:8px}
  .profile-pin-identity .learner-avatar{width:28px;height:28px;padding:2px;margin:0}
  .profile-pin-identity .learner-name{margin:0}
  .profile-pin{gap:4px}
  .pf-back{margin-top:2px;min-height:40px}
  .profile-forgot{padding:6px 10px}
}
@media (max-width:860px) and (max-height:700px){
  /* 矮屏（含横屏）播放器：舞台不再吸顶，避免吸顶舞台压住列表 */
  .player>.stage{position:static}
}
@media (max-width:860px) and (max-height:760px){
  /* 播放器分流（矮屏）：视频集（无 text-mode）与点评已渲染（#assessResult 非空）时舞台必然超高，
     切流式布局——盒高自适应（下限仍为一屏高）、列表定高内滚、整页滚动接管。
     注：判据不能用 #assessBox:empty——该盒一创建即恒含点评按钮子元素。
     装得下的常态（课本集未点评、较高屏的视频集未点评）保持原定高＋内滚一屏布局，不动。 */
  .player:not(.text-mode),.player:has(#assessResult:not(:empty)){
    height:auto;min-height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 8px)}
  .player:not(.text-mode) .sent-list-wrap,.player:has(#assessResult:not(:empty)) .sent-list-wrap{flex:none}
  .player:not(.text-mode) .sent-list,.player:has(#assessResult:not(:empty)) .sent-list{flex:none;height:36dvh}
}
@media (max-width:860px) and (min-height:761px){
  /* 较高屏：只有视频集＋点评（舞台最高组合）装不下，单独切流式 */
  .player:not(.text-mode):has(#assessResult:not(:empty)){
    height:auto;min-height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 8px)}
  .player:not(.text-mode):has(#assessResult:not(:empty)) .sent-list-wrap{flex:none}
  .player:not(.text-mode):has(#assessResult:not(:empty)) .sent-list{flex:none;height:36dvh}
}
@media (max-width:860px) and (max-height:560px){
  /* 横屏/极矮屏：所有播放器一律流式（定高盒必然装不下舞台＋列表下限） */
  .player{height:auto;min-height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 8px)}
  .sent-list-wrap{flex:none}
  .sent-list{flex:none;height:36dvh}
}

/* ================= 第九轮：美化批第二批（目录／档案门） ================= */
/* 依据视觉设计稿 §2/§6 与 §10 目录与档案门清单（按任务表顺序作为第二批实施）。
   识别色只落四处：顶栏头像描边/底色、档案瓦片底色、（继续学习）进度条、继续学习卡描边。
   注意：.resume-card 类名同时被弹窗（#modalRoot）复用，本轮横卡样式一律以 #view 限定，
   弹窗外观与行为不动。 */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 识别色点位 1：顶栏头像描边与底色 --- */
.avatar-btn.kid-a{background:var(--kid-a-bg);border-color:var(--kid-a)}
.avatar-btn.kid-b{background:var(--kid-b-bg);border-color:var(--kid-b)}

/* --- 识别色点位 2：档案瓦片底色（PIN 身份区同瓦片语言） --- */
.learner-card.kid-a .learner-avatar,
.profile-pin-identity.kid-a .learner-avatar{background-color:var(--kid-a-bg)}
.learner-card.kid-b .learner-avatar,
.profile-pin-identity.kid-b .learner-avatar{background-color:var(--kid-b-bg)}

/* --- §6.1 继续学习横卡（整宽白卡；识别色点位 3 进度条、点位 4 描边） --- */
#view .resume-card{
  background:#fff;
  color:var(--text);
  border:2px solid var(--kid-a);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:16px;
  min-height:128px;
  gap:14px;
  font-size:16px;
  font-weight:400;
  text-align:left;
}
#view .resume-card.kid-b{border-color:var(--kid-b)}
#view .resume-card:active{transform:scale(.98);box-shadow:var(--shadow)}
#view .resume-card .btn.pri{background:var(--pri);color:var(--text);border-color:var(--pri-d)}
.resume-cover{width:64px;height:64px;border-radius:16px;overflow:hidden;flex:none;background:var(--pri-l)}
.resume-cover img{width:100%;height:100%;object-fit:cover}
.resume-info{flex:1;min-width:0;display:flex;flex-direction:column}
.resume-title{font-size:18px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resume-sub{font-size:14px;color:var(--text-2);margin-top:2px}
.resume-prog{display:block;height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:8px}
.resume-prog>i{display:block;height:100%;background:var(--kid-a);border-radius:inherit}
.kid-b .resume-prog>i{background:var(--kid-b)}
.resume-go{flex:none;min-width:72px;min-height:48px}

/* --- §6.2 三类分组图标墙 --- */
.cat-group{margin-bottom:28px}
.cat-group-title{font-size:22px;line-height:1.45;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.cat-group-title .cat-ico{width:30px;height:30px;border-radius:20%;display:block;flex:none}
.cat-wall{display:grid;grid-template-columns:repeat(3,88px);justify-content:center;gap:24px 16px}
.cat-wall .empty{grid-column:1/-1;color:var(--text-2);font-size:14px;text-align:center;padding:12px 0}
.find-more{margin-top:4px}
.find-more .filter-bar{margin-bottom:0}

/* 集封面组件：方块＋下方两行字（首页推荐行与目录墙共用） */
.ep-card{background:transparent;box-shadow:none;border-radius:0;overflow:visible;align-items:center;padding:0;text-align:center}
.ep-card:hover{box-shadow:none}
.ep-card:active{transform:none}
.ep-card:active .ep-cover{transform:scale(.97)}
.ep-card .ep-cover{width:88px;height:88px;aspect-ratio:auto;border-radius:22px;flex:none;transition:transform .12s ease-out}
.ep-tname{align-self:stretch;font-size:16px;font-weight:700;line-height:1.35;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);text-align:center}
.ep-tmeta{font-size:12px;line-height:1.5;margin-top:2px;color:var(--text-2);white-space:nowrap;text-align:center}
.ep-tstars{color:var(--star)}
.rec-row>.ep-card{flex:none}

/* --- §6.3 完成星章：封面右上角斜盖（32px、−12°、不透明度 0.85、向外溢出 8px） --- */
.ep-stamp{position:absolute;top:-8px;right:-8px;width:32px;height:32px;transform:rotate(-12deg);opacity:.85;pointer-events:none;z-index:2}
.ep-stamp svg{display:block;filter:drop-shadow(0 2px 3px rgba(61,44,30,.28))}

@media (min-width:481px) and (max-width:639px){
  .cat-wall{grid-template-columns:repeat(4,88px)}
}
@media (min-width:640px) and (max-width:860px){
  .cat-wall{grid-template-columns:repeat(5,104px);gap:28px 20px}
  .ep-card .ep-cover{width:104px;height:104px;border-radius:26px}
}
@media (min-width:861px){
  .cat-wall{grid-template-columns:repeat(6,112px);gap:28px 24px}
  .ep-card .ep-cover{width:112px;height:112px;border-radius:28px}
}

/* ================= 第十轮：美化批第三批（播放页） ================= */
/* 依据视觉设计稿 §5/§5.1/§5.2–§5.5/§9 与 §10「播放页」清单（按任务表顺序作为第三批实施）。
   结构自上而下：舞台（仅视频集）→细进度条→大字卡→圆钮组→次级小条→录音卡→句子列表。
   播放页不再写死一屏高：内容按规格尺寸排布，短视口整页滚动（§9：禁止为塞一屏压字号）。
   本轮只改呈现：DOM 顺序与挂载点在 player.js 模板层调整，播放/录音/点评状态机不动。 */

.player{height:auto;min-height:0;gap:12px;align-items:stretch}

/* --- 细进度条（替代「第 x/y 句」计数） --- */
.pbar{height:4px;border-radius:999px;background:#FFE7CC;overflow:hidden;flex:none;margin-bottom:-4px}
.pbar-fill{display:block;height:100%;width:0;background:var(--pri);border-radius:inherit;transition:width .15s ease}

/* --- 大字卡 --- */
.player .sent-zone,.player.text-mode .sent-zone{
  background:var(--paper);border-radius:24px;padding:0 20px 20px;
  min-height:240px;display:flex;flex-direction:column;text-align:center;
}
.sz-tools{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between}
.sz-mid{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column}
.player .sent-idx,.player.text-mode .sent-idx{
  display:inline-block;margin:0;padding:0;background:transparent;border-radius:0;
  font-size:13px;font-weight:700;color:var(--text-3);
}
.player .sent-fav{
  position:static;width:44px;height:44px;flex:none;
  font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{
  font-size:32px;line-height:1.4;font-weight:700;margin:0;word-break:break-word;
}
.player .sent-zh,.player.text-mode .sent-zh{font-size:18px;line-height:1.5;margin-top:12px;color:var(--text-2)}

/* --- 词标记共存（§5.3）：背景只许一层，.cur 优先；收藏为星黄实线下划线 --- */
.player .w{border-radius:4px}
.player .w.faved{text-decoration:underline solid var(--star);text-decoration-thickness:3px;text-underline-offset:6px}
.player .w.faved::after{display:none}
.player .w.cur.faved{text-decoration-color:#fff}

/* --- 圆钮组：示范钮 64px（浅橙底深橙标）＋录音键 76px（主橙实底白麦克风） --- */
.cluster{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px;flex:none}
.demo-btn{
  width:64px;height:64px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--pri-l);color:var(--pri-d);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease;
}
.demo-btn .cb-ico{font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.demo-btn:active{transform:scale(.95)}
.rec-main{display:flex;align-items:center;justify-content:center;flex:none}
.rec-main-btn{
  width:76px;height:76px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--pri);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 var(--pri-d);
  transition:transform .12s ease;
}
.rec-main-btn:active{transform:scale(.95)}
/* 录音键麦克风原图直入（2026-10-24 图标接入）：img 自裁圆盘，不用 overflow:hidden 以免裁掉录音脉冲环伪元素 */
.rec-main-btn .rec-mic-img,.big-rec .rec-mic-img{width:100%;height:100%;border-radius:50%;display:block}
.rec-main-btn,.rec-main .big-rec{padding:0}
.rec-main-btn.recording{background:var(--danger);box-shadow:0 5px 0 #C9443D}
.rec-main .big-rec{width:76px;height:76px;font-size:30px;box-shadow:0 5px 0 #C9443D}

/* --- 次级小条：白色卡面，收纳上一句/下一句/AB/语速/循环与设置行 --- */
.strip{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:8px 10px;display:flex;flex-direction:column;gap:4px;flex:none}
.strip-tp{display:flex;align-items:flex-start;justify-content:space-between;gap:2px}
.player .strip .cbtn2{flex:1}
.player .strip .cbtn2 .cb-ico{width:44px;height:44px;font-size:18px;border-width:2px}
.player .strip .cbtn2 .cb-lbl{display:block;font-size:11px}
.player .strip .cbtn2.main .cb-ico{width:44px;height:44px;font-size:18px;background:var(--bg);border-color:var(--line);color:var(--text);box-shadow:none}
.strip .sent-set-row{padding:0 2px}
.strip .sent-set-row .seg{background:var(--bg)}

/* --- 录音卡：对比听/历史胶囊/提示＋点评槽位 --- */
.player .rec-card{border-radius:24px;min-height:96px;overflow:visible}
.player .rec-bar{padding:8px 14px;gap:4px;justify-content:center}
.player #assessBox{padding:0 12px 8px;gap:4px}
#assessBtn{min-height:40px}
.player .hist-dots .mine-btn{min-height:44px}
#assessResult .assess-stars{height:56px;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0}

/* --- 视频舞台：圆角 16px；动态字幕条在舞台底部内侧（内缩 12px） --- */
.player .yt-wrap{border-radius:16px}
.yt-wrap>div.yt-note{left:12px;right:12px;bottom:12px;width:auto;height:auto}

/* --- 句子列表：入口条／抽屉／右栏 --- */
.sent-list-wrap{background:transparent;box-shadow:none;border-radius:0;overflow:visible;display:block;flex:none}
.list-entry{
  display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;
  padding:0 16px;background:#fff;border-radius:16px;box-shadow:var(--shadow);
  font-size:15px;font-weight:800;color:var(--text);cursor:pointer;font-family:inherit;
}
.list-entry .le-arrow{color:var(--text-3);font-size:13px}
.sheet-close{
  width:44px;height:44px;flex:none;margin-left:4px;border:0;background:none;cursor:pointer;
  font-size:15px;color:var(--text-2);display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.player .sent-sheet .sent-list{flex:1 1 auto;height:auto;min-height:0}
.player:has(#assessResult:not(:empty)) .sent-sheet .sent-list{height:auto}

@media (max-width:860px){
  .player:not(.simple-mode) .sent-sheet{display:none}
  .player:not(.simple-mode) .sent-list-wrap.open .sent-sheet{
    display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;height:50dvh;z-index:70;
    background:#fff;border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);overflow:hidden;
  }
  .player:not(.simple-mode) .sent-list-wrap.open::before{content:"";position:fixed;inset:0;background:rgba(38,26,14,.35);z-index:69}
  .player:not(.simple-mode) .sent-list-wrap.open .sent-list{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

@media (min-width:481px) and (max-width:860px){
  .player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{font-size:36px}
  .player .sent-zh,.player.text-mode .sent-zh{font-size:20px}
  .demo-btn{width:80px;height:80px}
  .rec-main-btn,.rec-main .big-rec{width:96px;height:96px}
  .cluster{gap:24px}
}

@media (min-width:861px){
  .player:not(.simple-mode){
    display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);
    grid-template-rows:repeat(8,auto);column-gap:24px;row-gap:12px;
    max-width:1200px;align-items:start;
  }
  .player:not(.simple-mode)>*{grid-column:1;min-width:0}
  .player:not(.simple-mode)>.sent-list-wrap{
    grid-column:2;grid-row:1/-1;position:sticky;top:calc(var(--topbar-h) + 12px);
    height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 24px);
    display:flex;flex-direction:column;
  }
  .player:not(.simple-mode) .list-entry{display:none}
  .player:not(.simple-mode) .sent-sheet{
    display:flex;flex-direction:column;flex:1;min-height:0;
    background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
  }
  .player:not(.simple-mode) .sent-sheet .sent-list{overflow-y:auto}
  .sheet-close{display:none}
  .player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{font-size:40px}
  .player .sent-zh,.player.text-mode .sent-zh{font-size:22px}
  .demo-btn{width:88px;height:88px}
  .rec-main-btn,.rec-main .big-rec{width:104px;height:104px}
  .cluster{gap:28px}
}

/* --- 第十一轮（第三批回归修正）：抽屉/双栏只限完整播放页（.player:not(.simple-mode)）；
   简版（集详情内嵌句单）保持常显内嵌列表：不显示列表入口条与关闭钮，
   面板头维持紧凑高（≤36px 口径）。 seg 钮内边距 10→8px 使设置行内容占宽回到 ≤92%。 */
.player.simple-mode .list-entry{display:none}
.player.simple-mode .sheet-close{display:none}
.player.simple-mode .sent-list-wrap{background:#fff;box-shadow:var(--shadow);border-radius:24px;overflow:hidden}

/* ================= 第十二轮：美化批第四批（家长区灰白化／动效三件收尾） =================
   规格：视觉设计稿 §4（家长区）＋§7（动效仅三件）＋§8.4（加载）＋§10 第四批断言。
   家长区一律以 body[data-area="parent"] 作用域覆盖（go('parent') 时由 app.js 打标，
   离开即摘除），孩子区零渗入；共享外壳（顶栏/底栏/弹窗/Toast）在家长区内随作用域转中性，
   往返由 selftest-batch4 的隔离往返断言守住。 */

/* ---------- §7 总则：禁平滑自动滚动（覆盖 html{scroll-behavior:smooth}） ---------- */
html{scroll-behavior:auto}

/* ---------- §4.1 家长区 token 覆盖（仅作用于家长区根作用域） ---------- */
body[data-area="parent"]{
  --bg:#F3F4F6;
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --line:#DDE1E6;
  --text:#252A31;
  --text-2:#4B5563;
  --text-3:#667085;
  --pri:#374151;
  --pri-d:#1F2937;
  --on-pri:#FFFFFF;
  --row-alt:#F8F9FB;
  --pri-l:#E8EAED; /* §4.1 结论句扩展：浅橙面色同属「主橙系面色」，家长区不用，换中性浅灰 */
  --shadow:0 4px 14px rgba(37,42,49,.07);
  --shadow-lg:0 10px 30px rgba(37,42,49,.16);
}

/* ---------- §4.4 顶栏信号：家长区转白，孩子头像识别色环中立化 ---------- */
body[data-area="parent"] #topbar{background:rgba(255,255,255,.96);border-bottom-color:var(--line)}
body[data-area="parent"] .avatar-btn{background:#EEF0F3;border-color:#E5E7EB;box-shadow:none}
body[data-area="parent"] #parentBtn{background:#fff;border-color:var(--line);color:var(--text-2)}
body[data-area="parent"] .tab-btn.on{background:#E5E7EB;color:var(--text)}
#parentBtn.as-back{
  width:auto;min-width:var(--tap);height:var(--tap);padding:0 14px;border-radius:999px;
  font-size:14px;font-weight:700;white-space:nowrap;
}
body[data-area="parent"] .tab-btn.on .tab-ico{filter:grayscale(.4)}

/* ---------- §4.2 家长区密度：卡片化分区、字段行、开关、下拉 ---------- */
body[data-area="parent"] .parent-wrap{max-width:960px;margin:0 auto}
body[data-area="parent"] .parent-wrap>h2{font-size:20px;line-height:30px;margin:4px 0 12px}
body[data-area="parent"] .parent-sec{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin:0 0 12px;box-shadow:none;
}
body[data-area="parent"] .parent-sec>h3{font-size:18px;line-height:28px;margin:0 0 8px}
body[data-area="parent"] .parent-sec .muted{color:var(--text-2);font-size:14px;line-height:22px}
body[data-area="parent"] .ai-note{font-size:14px;line-height:22px}
body[data-area="parent"] div.kv-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:6px 0;border-bottom:1px solid var(--row-alt);
}
body[data-area="parent"] div.kv-row:last-child{border-bottom:0}
body[data-area="parent"] div.kv-row>span:first-child{color:var(--text-2);font-size:14px;line-height:22px}
body[data-area="parent"] .kv-row.warn>span{color:#B3261E;font-weight:700}
body[data-area="parent"] .learner-sub{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
body[data-area="parent"] .learner-sub>h4{font-size:16px;line-height:24px;margin:0 0 4px}
body[data-area="parent"] .profile-row{border-bottom:1px solid var(--line);padding:6px 0 10px;margin-bottom:6px}
body[data-area="parent"] .profile-row:last-child{border-bottom:0;margin-bottom:0}
body[data-area="parent"] select{
  min-height:44px;padding:6px 10px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--text);font-size:14px;max-width:60vw;
}
body[data-area="parent"] .parent-foot{margin:4px 0 8px}
body[data-area="parent"] .parent-foot .btn{width:100%}
/* 开关：44px 热区，轨与钮中性灰，开态用家长区主色深灰（§4.1 --pri 覆盖后自动生效） */
body[data-area="parent"] .switch{position:relative;display:inline-flex;align-items:center;min-width:44px;min-height:44px;cursor:pointer}
body[data-area="parent"] .switch input{position:absolute;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}
body[data-area="parent"] .switch input+span{
  flex:none;width:46px;height:26px;border-radius:999px;background:#D4D8DE;position:relative;
  transition:background .15s;
}
body[data-area="parent"] .switch input+span::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(37,42,49,.3);transition:left .15s;
}
body[data-area="parent"] .switch input:checked+span{background:var(--pri)}
body[data-area="parent"] .switch input:checked+span::after{left:23px}
body[data-area="parent"] .switch input:focus-visible+span{outline:3px solid var(--tts);outline-offset:2px}
/* 家长区弹窗（确认卡/改名卡挂在 #modalRoot，随 body 作用域转中性） */
body[data-area="parent"] .resume-card{background:#fff;color:var(--text);box-shadow:var(--shadow-lg)}
body[data-area="parent"] .resume-card .btn.ghost{background:transparent;color:var(--text-2);border-color:var(--line)}
body[data-area="parent"] .resume-card .btn.pri{background:var(--pri);color:#fff;border-color:var(--pri)}

/* ---------- §9 家长表格响应式：≤480 信息卡／481–860 容器横滚＋首列固定／≥861 完整表格 ---------- */
body[data-area="parent"] .stat-table{
  width:100%;border-collapse:collapse;font-size:14px;line-height:22px;color:var(--text);
}
body[data-area="parent"] .stat-table th{
  text-align:left;font-weight:700;color:var(--text-2);padding:10px 12px;
  border-bottom:2px solid var(--line);white-space:nowrap;background:var(--card);
}
body[data-area="parent"] .stat-table td{
  padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle;
}
body[data-area="parent"] .stat-table tbody tr:nth-child(even){background:var(--row-alt)}
body[data-area="parent"] .stat-table td:first-child{font-weight:700}
@media (min-width:481px){
  body[data-area="parent"] .ptable{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body[data-area="parent"] .stat-table td{padding:15px 12px} /* 行高 ≥52px */
  body[data-area="parent"] .stat-table td:not(:first-child){text-align:right}
  body[data-area="parent"] .stat-table th:not(:first-child){text-align:right}
  body[data-area="parent"] .assess-table td:nth-child(2){text-align:left} /* 句子列左对齐 */
  body[data-area="parent"] .assess-table th:nth-child(2){text-align:left}
}
@media (min-width:481px) and (max-width:860px){
  body[data-area="parent"] .stat-table th:first-child,
  body[data-area="parent"] .stat-table td:first-child{
    position:sticky;left:0;background:var(--card);z-index:1;
  }
  body[data-area="parent"] .stat-table tbody tr:nth-child(even) td:first-child{background:var(--row-alt)}
}
@media (min-width:861px){
  body[data-area="parent"] .ptable{overflow:visible}
  body[data-area="parent"] .stat-table td{padding:13px 12px} /* 13×2＋行高 22＋边线 ≥48px 行高（§9） */
  body[data-area="parent"] .parent-sec{padding:20px}
  body[data-area="parent"] .parent-sec{margin-bottom:16px}
}
@media (max-width:480px){
  /* 信息卡：表头隐藏，每格以 data-l 作字段名、值右置，逐条成卡 */
  body[data-area="parent"] .ptable{overflow:visible}
  body[data-area="parent"] .stat-table,
  body[data-area="parent"] .stat-table tbody,
  body[data-area="parent"] .stat-table tr,
  body[data-area="parent"] .stat-table td{display:block;width:100%}
  body[data-area="parent"] .stat-table thead{display:none}
  body[data-area="parent"] .stat-table tr{
    padding:8px 0;border-bottom:1px solid var(--line);background:transparent;
  }
  body[data-area="parent"] .stat-table tr:last-child{border-bottom:0}
  body[data-area="parent"] .stat-table tbody tr:nth-child(even){background:var(--row-alt)}
  body[data-area="parent"] .stat-table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:5px 12px;border-bottom:0;min-height:32px;text-align:right;
  }
  body[data-area="parent"] .stat-table td::before{
    content:attr(data-l);flex:none;color:var(--text-2);font-weight:700;text-align:left;
  }
  body[data-area="parent"] .stat-table td:first-child{font-size:15px}
}

/* ---------- §7 动效一：录音声波脉冲（两环、1200ms、第二环延迟 600ms、扩散 12px） ----------
   存量 .recording 的 animation:pulse 引用的是从未定义过的 keyframes（死声明），本轮正式化：
   环只挂 .recording，状态一退环即消失（下一次绘制无环）。按钮本体不缩放。 */
.big-rec.recording{animation:none}
.rec-btn.recording{animation:none}
.rec-main-btn.recording,.big-rec.recording{position:relative}
.rec-main-btn.recording::before,.rec-main-btn.recording::after,
.big-rec.recording::before,.big-rec.recording::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:3px solid var(--pri);opacity:0;
  animation:recRing 1200ms cubic-bezier(0.2,0,0.4,1) infinite;
}
.rec-main-btn.recording::after,.big-rec.recording::after{animation-delay:600ms}
@keyframes recRing{
  0%{inset:0;opacity:.28}
  100%{inset:-12px;opacity:0}
}

/* ---------- §7 动效二：点评星星逐颗亮（单颗 240ms、间隔 100ms、缩放 .85→1.08→1、只播一次） ----------
   「只播一次」由 recorder.js 控制：仅全新结果落盘后的首次渲染带 .anim，
   之后任何重渲染（含切句回来）都是无 .anim 的静态星。旧 assess-pop 作废。 */
.assess-stars .a-star.on{animation:none}
.assess-stars .a-star.on.anim{animation:starIn 240ms cubic-bezier(0.2,0.8,0.2,1) both}
@keyframes starIn{
  0%{transform:scale(.85);opacity:.3}
  55%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ---------- §7 动效三：完成星章落下（总 480ms：0–300 落、300–390 回弹 3px、390–480 停稳） ----------
   「仅本次首次完成触发」由 home.js 控制：player 完成瞬间经 window.__freshStamps 武装，
   epCard 首次渲染该集时消费并加 .stamp-in，之后渲染均为静态星章。 */
.ep-stamp.stamp-in{animation:stampIn 480ms both}
@keyframes stampIn{
  0%{transform:translateY(-20px) rotate(-12deg);animation-timing-function:cubic-bezier(0.2,0.7,0.3,1)}
  62.5%{transform:translateY(0) rotate(-12deg);animation-timing-function:ease-out}
  81.25%{transform:translateY(-3px) rotate(-12deg)}
  100%{transform:translateY(0) rotate(-12deg)}
}

/* ---------- §7 总则＋§8.4：存量入场/循环动画清零（静态呈现） ---------- */
.toast{animation:none}
.word-card{animation:none}
.modal-card{animation:none}
.today-stars span{animation:none}
.done-badge{animation:none}
.assess-pending{animation:none} /* 点评中：静态文字，无脉冲无转圈（§8.4） */

/* ---------- §7 reduced-motion 降级：三件动效全部静态替代 ---------- */
@media (prefers-reduced-motion: reduce){
  .rec-main-btn.recording::before,.big-rec.recording::before{
    animation:none;inset:-8px;opacity:.45; /* 静态橙色外环，不扩散不闪烁 */
  }
  .rec-main-btn.recording::after,.big-rec.recording::after{animation:none;opacity:0}
  .assess-stars .a-star.on.anim{animation:none}
  .ep-stamp.stamp-in{animation:none}
  .pin-dots.shake{animation:none}
  /* §8.2：按压取消缩放，改即时浅橙底色 */
  .btn:active,.avatar-btn:active,.sec-row:active,.rec-main-btn:active,.demo-btn:active,
  .big-rec:active,.rec-btn:active,.pin-key:active,#view .resume-card:active,
  button.resume-card:active{transform:none}
  .btn:active{background:var(--pri-l)}
}

/* ===== 第十三轮：点评移入句子卡片 ===== */
.sent-assess{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.sent-assess:empty{display:none}
.sent-assess #assessResult .assess-stars{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0}
.sent-assess .assess-enc{margin-top:0}
.sent-assess .assess-bad{margin-top:0}


/* === polish 2026-11-04 === */
/* unslop polish overlay — scratch only */
:root{
  --r:16px; --r-ctl:10px; --r-tag:6px; --line-strong:#A8865C;
  --shadow:0 2px 10px rgba(61,44,30,.07);
}
body,button,input,select,textarea{font-weight:400}
h1,h2,h3,.top-title,.ep-title,.btn.pri,.type-tab,.tab-btn,.seg>button,
.cbtn,.cbtn2,.cb-lbl,.chip,.count,.learner-name,.my-profile-name{font-weight:600!important}

/* selected: dark text, no white-on-pri/tts */
.type-tab.on,.book-tabs>button.on,
.chip.on,.seg>button.on,.cbtn.on,.cbtn2.on{
  background:var(--pri-l)!important;
  color:var(--text)!important;
  border:1.5px solid var(--line-strong)!important;
  box-shadow:none!important;
}
/* teal ONLY for demo audio */
/* teal only for TTS channel badge / TTS-labeled chips — NOT the play demo button */
.chan-badge.tts,.tts-chip{
  background:var(--tts)!important;
  color:var(--text)!important;
  border-color:var(--tts-d)!important;
}
.cluster .demo-btn,#btnPlay.demo-btn{
  background:var(--pri)!important;
  color:var(--text)!important;
  border:0!important;
  box-shadow:none!important;
}
/* primary CTA orange + dark text */
.btn.pri,#view .btn.pri{
  background:var(--pri)!important;
  color:var(--text)!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:var(--r-ctl)!important;
  font-weight:600!important;
}

/* radius tiers — not everything pill */
.seg{border-radius:var(--r-ctl)!important;padding:3px!important}
.seg>button{border-radius:var(--r-tag)!important;font-weight:600!important;font-size:13px!important}
.type-tabs,.book-tabs{border-radius:var(--r-ctl)!important}
.type-tab,.book-tabs>button{border-radius:var(--r-tag)!important;font-size:13px!important}
.chip,.tag,.ep-tag{border-radius:var(--r-tag)!important}
.card,.home-card,.ep-card,.rec-card,.sent-zone,.sec-row{border-radius:var(--r)!important}
.cbtn2,.cbtn,.rd-ib{border-radius:var(--r-ctl)!important}
.tab-btn{border-radius:var(--r-ctl)!important;font-weight:600!important;font-size:12px!important;flex-direction:column;gap:2px}
.tab-btn.on{background:transparent!important;color:var(--pri)!important;outline:1.5px solid var(--line-strong);outline-offset:2px}
.tab-ico-img{width:24px;height:24px;border-radius:0!important;filter:none}
.tab-btn:not(.on) .tab-ico-img{opacity:.85}
.cb-lbl{font-size:12px!important;font-weight:500!important;color:var(--text-2)}

/* kill two-hue gradients */
.stage.tts-mode .yt-wrap,.ep-head,.ep-cover-wrap,[style*="gradient"]{
  background-image:none!important;
}
.ep-head{
  background:var(--pri-l)!important;
  border-radius:var(--r)!important;
}

/* no hard offset shadows except record */
.cbtn.main:not(.rec-main-btn):not(#recMain button),
.btn.pri{box-shadow:none!important}
#recMain .big-rec,#recMain button.rec-main-btn,.rec-main .big-rec{
  background:var(--danger)!important;
  color:#fff!important; /* record: keep white on red for brand; text contrast ~3.3 graphical */
  box-shadow:0 5px 0 #C9443D!important;
}

/* greeting one line */
.home-sec h2.polish-greet{font-size:22px;font-weight:600;margin:0;color:var(--text);line-height:1.3}
.home-sec h2.polish-greet + small{display:none!important}
.home-sec.polish-greet-wrap{margin-bottom:8px}

/* illustrated stars */
.ep-tstars,.ep-stars,.polish-stars{letter-spacing:2px}
.polish-star{
  display:inline-block;width:16px;height:16px;vertical-align:-2px;
  background:url('/img/ui-polish/star-filled.de0274a8.webp') center/contain no-repeat;
}
.polish-star.empty{background-image:url('/img/ui-polish/star-empty.de0274a8.webp');opacity:.55}

/* mascot avatar */
.avatar-btn .top-avatar img.avatar,
.avatar-btn img.avatar{
  object-fit:cover;border-radius:22%;
}
.avatar-btn{border-radius:22%!important;overflow:hidden}

/* today stats chips quieter */
.today-stats .pill,.today-row button,.home-sec .pill{
  border-radius:var(--r-ctl)!important;
  background:var(--card)!important;
  color:var(--text)!important;
  border:1.5px solid var(--line)!important;
  box-shadow:none!important;
}

/* strip icon buttons */
.strip .cbtn2 .cb-ico{font-size:0!important;line-height:0}
.strip .cbtn2 .cb-ico::before{
  content:'';display:block;width:22px;height:22px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
#btnPrev .cb-ico::before{background-image:url('/img/ui-polish/chev-l.de0274a8.webp')}
#btnNext .cb-ico::before{background-image:url('/img/ui-polish/chev-r.de0274a8.webp')}
#btnAB .cb-ico::before{background-image:url('/img/ui-polish/repeat.de0274a8.webp')}
#btnSpeed .cb-ico::before{background-image:url('/img/ui-polish/gauge.de0274a8.webp')}
#btnLoop .cb-ico::before{background-image:url('/img/ui-polish/more.de0274a8.webp')}
#btnLoop.on .cb-ico::before{background-image:url('/img/ui-polish/more-on.de0274a8.webp')}

/* cover broken img hide */

.ep-head{position:relative;min-height:140px;overflow:hidden}
.ep-head::after{
  content:'';position:absolute;right:10px;bottom:8px;width:64px;height:64px;
  background:url('/img/ui-polish/mascot-header.de0274a8.webp') center/contain no-repeat;
  pointer-events:none;opacity:.9;z-index:1;
}
/* hide broken cover img glyph */
/* covers visible */
.ep-head h2,.ep-head .ep-en,.ep-head .ep-stars,.ep-head .ep-meta{position:relative;z-index:2;color:var(--text)!important}
.ep-head h2{font-size:22px;font-weight:600;margin:12px 16px 4px;max-width:62%;padding-right:84px}
.ep-head .ep-en{display:block;margin:0 16px 8px;color:var(--text-2)!important}
.ep-head .ep-stars{margin:0 16px 8px}
/* demo play button stays orange accent (primary play), record red — demo-btn is play exemplar */
.demo-btn{background:var(--pri)!important;color:var(--text)!important;border-radius:50%!important;box-shadow:none!important}
.chan-badge.tts{background:var(--tts)!important;color:var(--text)!important;border-radius:var(--r-ctl)!important;font-weight:600!important}


/* sentence fav star — picture-book */
.sent-fav,.player .sent-fav{
  font-size:0!important;color:transparent!important;
  background:url('/img/ui-polish/star-empty.de0274a8.webp') center/22px 22px no-repeat!important;
}
.sent-fav.on,.player .sent-fav.on{
  background-image:url('/img/ui-polish/star-filled.de0274a8.webp')!important;
}



/* === 播放页整体重排 2026-11-04c（提案）===
   结构：视频 16:9 → 句子卡（工具行＝AB/语速/循环/收藏，合并原孤立星行）→ 播放设置行 → 对比听 → 句子列表；
   示范/录音/上一句/下一句收进底栏上方的固定操作坞，拇指区、不随内容被挤出屏幕。不靠缩字号。 */
.ico{width:22px;height:22px;display:block;flex:none}
.tab-svg{width:24px;height:24px}
.gear-svg{width:22px;height:22px;color:var(--text)}
#parentBtn .parent-gear-img{display:none}

/* 视频：始终 16:9，不裁不压 */
.player .yt-wrap{aspect-ratio:16/9;width:100%;height:auto;max-height:none}

/* 句子卡 */
.player .sent-zone,.player.text-mode .sent-zone{min-height:0;padding:4px 16px 14px;border-radius:16px}
.player .sz-tools{height:40px;margin:0 -8px 2px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.player .sent-idx{font-size:13px;font-weight:600;color:var(--text-2);padding-left:8px}
.sz-acts{display:flex;align-items:center;gap:2px;margin-left:auto}
.sz-acts .cbtn2{width:44px;height:40px;justify-content:center;gap:0;color:var(--text-2)}
.sz-acts .cbtn2 .cb-ico{width:auto;height:auto;background:none!important;border:0!important;box-shadow:none!important;color:inherit;font-size:13px;font-weight:600;line-height:1}
.sz-acts .cbtn2 .cb-ico::before{display:none!important}
.sz-acts .cbtn2 .cb-lbl{display:none}
.sz-acts #btnSpeed .cb-ico{min-width:40px;height:26px;padding:0 6px;border:1.5px solid var(--line)!important;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.sz-acts .cbtn2.on{color:var(--pri-d)}
.sz-acts .cbtn2.on .cb-ico{background:var(--pri-l)!important;border-radius:6px;padding:3px}
.sz-acts .ico{width:22px;height:22px}
.player .sent-fav,.sent-fav{position:static!important;width:44px;height:40px;background:none!important;border:0;color:var(--text-2)!important;display:flex;align-items:center;justify-content:center;font-size:0}
.sent-fav .ico{width:24px;height:24px}
.sent-fav.on{color:#E0A100!important}
.sent-fav.on .ico{fill:var(--star)}
.player .sz-mid{margin:0}
.player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{font-size:26px;line-height:1.3;font-weight:600}
.player .sent-zh,.player.text-mode .sent-zh{margin-top:6px;font-size:15px;line-height:1.5}
/* 打分：星星与鼓励语并一行，问题词一行 */
.sent-assess{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);gap:6px}
.assess-head{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.sent-assess #assessResult .assess-stars{height:auto;gap:2px}
.sent-assess #assessResult .assess-stars .a-star{font-size:22px;line-height:1}
.sent-assess .assess-enc{font-size:13px;line-height:1.4;margin:0;color:var(--text-2)}
.sent-assess .assess-enc small{font-size:inherit}
.sent-assess .assess-bad{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:13px;margin-top:4px;color:var(--text-2)}
.sent-assess .assess-bad .assess-word{min-height:32px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:600;line-height:1;color:#B54A00;background:var(--pri-l);border:0}

/* 原小条只剩播放设置行：去卡片外框，安静地放在卡片下面 */
.player .strip{background:none;box-shadow:none;padding:0 2px;border-radius:0}
.player .strip .sent-set-row .seg{background:var(--card)}

/* 播放按钮族的 svg 尺寸 */
.demo-btn .cb-ico .ico{width:24px;height:24px}
.rec-mic-svg{width:30px;height:30px;color:#fff}
#cmpBtn .ico,.mine-btn .ico,.sr-play .ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}
.list-entry .le-arrow .ico,.sheet-close .ico{width:18px;height:18px}

/* 操作坞：手机/小平板（列表抽屉形态）固定在底栏上方 */
@media (max-width:860px){
  .player{padding-bottom:84px}
  .player .cluster.dock{
    position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));z-index:55;
    height:76px;margin:0;padding:0 24px;gap:0;
    display:flex;align-items:center;justify-content:space-between;
    background:var(--bg);border-top:1px solid var(--line);
  }
  .dock .cbtn2{width:56px;height:56px;justify-content:center;gap:0}
  .dock .cbtn2 .cb-ico{width:48px;height:48px;background:var(--card);border:1.5px solid var(--line);color:var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center}
  .dock .cbtn2 .cb-ico::before{display:none!important}
  .dock .cbtn2 .cb-lbl{display:none}
  .dock .demo-btn{width:56px;height:56px}
  .dock .rec-main .big-rec,.dock #recMain .big-rec,.dock .rec-main-btn{width:64px!important;height:64px!important;box-shadow:0 3px 0 #C9443D!important}
  .dock .rec-main{margin:0 -8px}
}
@media (max-width:860px) and (max-height:700px){
  .player .sent-big,.player.text-mode .sent-big{font-size:24px}
}
/* 2c：星星进工具行左侧；卡内一行鼓励语＋问题词；空录音卡不留空高 */
.sz-score{display:flex;align-items:center;min-width:0;padding-left:4px}
.sz-score .assess-stars{display:flex;gap:1px;font-size:20px;line-height:1;letter-spacing:0;height:auto!important}
.sz-score .a-star.on{color:var(--star)}
.sz-score .a-star.off{color:var(--line)}
.player .sent-zone,.player.text-mode .sent-zone{padding-top:0}
.sent-assess{margin-top:6px;padding-top:6px}
.assess-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;font-size:13px;color:var(--text-2);line-height:1.4}
.assess-line .assess-enc{font-size:13px}
.assess-line .assess-bad{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.assess-line .assess-word{min-height:30px;padding:0 10px;border-radius:6px;font-size:14px;font-weight:600;line-height:1;color:#B54A00;background:var(--pri-l);border:0}
.player .rec-card{min-height:0;border-radius:16px}
.player{gap:8px}
/* 详情页：封面缩成左侧方图，信息在右；主按钮通栏、紧跟信息 */
@media (max-width:860px){
  .ep-head{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;min-height:0;padding:14px;border-radius:16px}
  .ep-head::after{display:none!important}
  .ep-head img.ep-cover{grid-row:1 / span 5;width:104px;height:104px;object-fit:cover;border-radius:12px;margin:0;aspect-ratio:1}
  .ep-head h2{margin:0!important;max-width:none!important;padding:0!important;font-size:20px!important;line-height:1.3;overflow-wrap:break-word}
  .ep-head .ep-en,.ep-head .ep-stars{margin:0!important}
  .ep-head .ep-meta{margin:0;font-size:13px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:2px 10px}
  .ep-head .ep-tags{margin:0;grid-column:2}
  .ep-actions{margin:12px 0}
  .ep-actions .btn.pri{width:100%;min-height:48px;font-size:17px}
  .player .yt-wrap{max-width:100%}
}
@media (max-width:860px) and (max-height:700px){
  .player .yt-wrap{width:min(100%, 292px);margin-inline:auto}
}
@media (max-width:860px){.ep-head .ep-tags,.ep-head .ep-stars{padding:0!important;margin:0!important}}
@media (max-width:860px) and (max-height:660px){.player .yt-wrap{width:min(100%, 256px)}.player .sent-zone,.player.text-mode .sent-zone{padding-bottom:10px}}
/* 首页：今日推荐三张等宽排满一行，不再被右边裁掉 */
.rec-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;padding:4px 0 8px}
.rec-row>.ep-card{min-width:0}
.rec-row .ep-card .ep-cover{width:100%;height:auto;aspect-ratio:1;border-radius:16px}
.rec-row .ep-tname{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.resume-sec .resume-card{width:100%}
/* 我的：课本进度按册折叠 */
.book-fold{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:8px;overflow:hidden}
.book-sum{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;cursor:pointer}
.book-sum::-webkit-details-marker{display:none}
.book-name{font-weight:600;font-size:15px;color:var(--text);flex:none}
.book-stat{font-size:13px;color:var(--text-2);margin-left:auto;text-align:right}
.book-chev{width:18px;height:18px;color:var(--text-2);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.book-fold[open] .book-chev{transform:rotate(180deg)}
.book-body{padding:0 12px 8px;border-top:1px solid var(--line)}
.book-body .kv-row{font-size:14px}

/* 2d：回归对齐——图标不吃点击；工具行 44 高；卡左右 20；高屏保留 28px 大字与 64/76 圆钮；桌面不受手机字号影响 */
.ico{pointer-events:none}
.player .sent-zone,.player.text-mode .sent-zone{padding-left:20px;padding-right:20px}
.player .sz-tools{height:44px;margin:0 -12px 0}
.sz-acts .cbtn2,.player .sent-fav,.sent-fav{height:44px!important}
.assess-line .assess-word{min-height:28px;font-size:13px;padding:0 9px}
@media (min-width:861px){
  .player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{font-size:40px;line-height:1.35}
}
@media (max-width:860px) and (min-height:701px){
  .player .sent-big,.player.text-mode .sent-big,.player.simple-mode .sent-big{font-size:28px;line-height:1.32}
  .player{padding-bottom:100px}
  .player .cluster.dock{height:92px}
  .dock .demo-btn{width:64px!important;height:64px!important}
  .dock .rec-main .big-rec,.dock #recMain .big-rec,.dock .rec-main-btn{width:76px!important;height:76px!important}
}
@media (max-width:860px){
  .player .cluster.dock{display:grid;grid-template-columns:1fr auto auto 1fr;column-gap:20px;justify-content:stretch}
  .dock #btnPrev{justify-self:start}
  .dock #btnNext{justify-self:end}
  .dock .rec-main{margin:0}
}
.sent-assess .assess-line .assess-bad .assess-word{min-height:28px;font-size:13px;padding:0 9px;border-radius:6px}
.book-body .kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}.book-body .kv-row:last-child{border-bottom:0}.book-body .kv-row>span:last-child{color:var(--text-2);font-size:13px;flex:none}