:root{
  --bg:#FFF7E8;
  --paper:#FFFDF8;
  --card:#FFFFFF;
  --pri:#FF9F43;
  --pri-d:#F08A24;
  --pri-l:#FFE7CC;
  --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:'Andika','PingFang SC','Microsoft YaHei',sans-serif;
}

*,*::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;
  width:var(--tap);
  height:var(--tap);
  border-radius:50%;
  overflow:hidden;
  background:var(--pri-l);
  border:3px solid #fff;
  box-shadow:var(--shadow);
  transition:transform .15s;
}
.avatar-btn:active{transform:scale(.92)}
.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;
  min-width:var(--tap);
  height:var(--tap);
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  color:var(--text-2);
  font-size:14px;
  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)}

/* ========== 主视图 ========== */
#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 .2s,color .2s;
}
.tab-btn svg,.tab-btn .ico{width:24px;height:24px;font-size:22px;line-height:1}
.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,background .2s,box-shadow .2s;
}
.btn:active{transform:scale(.95)}
.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);transform:translateY(3px)}
.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(180px,1fr));
  gap:20px;
  padding:24px 0;
}

.learner-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 16px;
  min-height:200px;
  background:var(--card);
  border-radius:var(--r-lg);
  border:3px solid transparent;
  box-shadow:var(--shadow);
  font-size:20px;
  font-weight:700;
  text-align:center;
  transition:transform .15s,border-color .2s;
}
.learner-card:hover{border-color:var(--pri-l)}
.learner-card:active{transform:scale(.96);border-color:var(--pri)}

.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 .2s,color .2s;
}
.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 .2s;
}
.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 .2s;
}
.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 .4s;
}

.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(--pri);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}

.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 .2s;
}
.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 .2s,color .2s;
}
.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 .2s}
.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;border-top:1px dashed var(--line);padding:10px 14px 12px;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(--tts-l);color:var(--tts-d)}
.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-grow:1.25}
  .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:1 1 168px}
  .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:40px;height:40px;padding:0 9px}
}

/* ================= 第五轮：家长口令屏（原先整组样式缺失，退化成一行纯文本） ================= */
.parent-pin{
  width:100%;max-width:460px;margin:8px auto 24px;padding:28px 22px 24px;
  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:30px;margin-bottom:8px}
.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:18px 0 12px}
.pin-count{
  display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:4px 14px;
  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:20px;margin:4px 0 20px}
.pin-dot{
  display:block;flex:none;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--line);transition:background .16s,border-color .16s,transform .16s
}
.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,64px);
  gap:11px;width:min(100%,336px);margin:0 auto
}
.pin-key{
  appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:64px;
  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 .16s,border-color .16s
}
.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:16px 0 0;color:var(--text-3);font-size:13.5px;font-weight:700;line-height:1.45}
.pin-hint{min-height:24px;margin:14px 0 0;font-size:14px;line-height:1.5}
.pin-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.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:24px 16px 20px;border-radius:22px}
  .parent-pin>h2{font-size:27px}
  .pin-status{margin-top:15px}
  .pin-pad{grid-template-rows:repeat(4,62px);gap:10px}
  .pin-key{min-height:62px;border-radius:17px}
  .pin-foot .btn{flex-basis:120px}
}

/* 录音状态提示：不能只靠会消失的 toast，保存/失败结果要留在录音条里。 */
.rec-notice{
  flex:1 1 100%;width:100%;margin-top:2px;padding:8px 11px;border-radius:12px;
  background:var(--tts-l);color:var(--tts-d);font-size:13.5px;font-weight:800;line-height:1.45;text-align:center
}
.rec-notice.error{background:#FFE3E0;color:#B3261E}
.rec-notice.ok{background:var(--tts-l);color:var(--tts-d)}
.rec-bar .rec-notice{display:block}