/* ============================================================
   ui-v13.css — 阿粤助教 课程跟读播放器控制栏
   （原站该文件已 404 下线；此处按 index.html 内嵌视觉规范
     .func-row（品牌绿 52px 圆钮）补全 ctrl-two 结构按钮样式）
   ============================================================ */

/* ---------- 控制栏容器布局 ---------- */
#rdSentView .ctrl-two{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
}
#rdSentView .ctrl-two .row1{
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;
  gap:4px !important;
  padding:6px 8px 2px !important;
}
#rdSentView .ctrl-two .row2{
  display:flex !important;
  align-items:center !important;
  justify-content:space-evenly !important;
  gap:0 !important;
  padding:4px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important;
}

/* ---------- 工具按钮（row1 / 一排浅灰细字） ---------- */
#rdSentView .ctrl-two .row1 .b,
#rdSentView .ctrl-two .row2 .b{
  appearance:none !important;
  -webkit-appearance:none !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:10px !important;
  font-family:inherit !important;
  line-height:1 !important;
  color:#54605a !important;
  cursor:pointer !important;
}
/* row1 工具钮：横排 + 下方标题 */
#rdSentView .ctrl-two .row1 .b{
  flex:1 1 0 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  padding:6px 2px !important;
}
#rdSentView .ctrl-two .row1 .b:active{ background:#e7ecea !important; }
#rdSentView .ctrl-two .row1 .b .ic{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#6b7684 !important;
}
#rdSentView .ctrl-two .row1 .b .ic svg{ width:21px !important; height:21px !important; display:block !important; }
#rdSentView .ctrl-two .row1 .b .ic-mono{ font-size:12px !important; font-weight:800 !important; color:#54605a !important; }
#rdSentView .ctrl-two .row1 .b .ic-ab{ font-size:11px !important; font-weight:800 !important; letter-spacing:.3px !important; color:#6b7684 !important; }
#rdSentView .ctrl-two .row1 .b .lab{
  font-size:10px !important;
  color:#8a93a0 !important;
}
#rdSentView .ctrl-two .row1 .b.active .ic,
#rdSentView .ctrl-two .row1 .b.active .ic svg,
#rdSentView .ctrl-two .row1 .b.isset .ic{ color:#22a06b !important; stroke:#22a06b !important; }

/* ---------- 播放主圆钮（row2，品牌绿 52px） ---------- */
#rdSentView .ctrl-two .row2 .b{
  position:relative !important;
}
#rdSentView .ctrl-two .row2 .b.prev,
#rdSentView .ctrl-two .row2 .b.next,
#rdSentView .ctrl-two .row2 .b.blind,
#rdSentView .ctrl-two .row2 .b.drop{
  width:40px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex:0 0 auto !important;
}
#rdSentView .ctrl-two .row2 .b.prev svg,
#rdSentView .ctrl-two .row2 .b.next svg,
#rdSentView .ctrl-two .row2 .b.blind svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
}
#rdSentView .ctrl-two .row2 .b.play{
  width:54px !important;
  height:54px !important;
  padding:0 !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#rdSentView .ctrl-two .row2 .b.play svg{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  box-shadow:0 6px 16px rgba(34,160,107,.34) !important;
  transition:transform .12s ease !important;
}
#rdSentView .ctrl-two .row2 .b.play:active svg{ transform:scale(.92) !important; }
#rdSentView .ctrl-two .row2 .b.drop svg{ width:20px !important; height:20px !important; }

/* ---------- 播放态弱化（vw-playing 时上下句/播放瞬时降强调） ---------- */
#rdSentView.vw-playing .b.play,
#rdSentView.vw-playing .b.prev,
#rdSentView.vw-playing .b.next{ opacity:.45; filter:grayscale(.7); }

/* ---------- 进度条（视频进度 vpBar）+ 句子进度（vf-progress）样式 ---------- */
#rdSentView .video-progress{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  padding:2px 14px 4px !important;
}
#rdSentView .video-progress .time{
  font-size:11px !important;
  color:#6b7684 !important;
  font-variant-numeric:tabular-nums !important;
  min-width:34px !important;
}
#rdSentView .video-progress .bar-wrap{
  position:relative !important;
  flex:1 1 auto !important;
  height:4px !important;
  border-radius:99px !important;
  background:rgba(34,160,107,.18) !important;
  cursor:pointer !important;
}
#rdSentView .video-progress .bar-fill{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0% !important;
  border-radius:99px !important;
  background:#22a06b !important;
}
#rdSentView .video-progress .bar-thumb{
  position:absolute !important;
  top:50% !important;
  left:0% !important;
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:#22a06b !important;
  box-shadow:0 1px 4px rgba(0,0,0,.25) !important;
  transform:translate(-50%,-50%) !important;
}
/* 句子进度条（单句内播放） */
#rdSentView .vf-progress{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  padding:4px 14px 2px !important;
}
#rdSentView .vf-progress .vpt{
  font-size:11px !important;
  color:#6b7684 !important;
  font-variant-numeric:tabular-nums !important;
  min-width:34px !important;
}
#rdSentView .vf-progress .vf-track{
  position:relative !important;
  flex:1 1 auto !important;
  height:4px !important;
  border-radius:99px !important;
  background:rgba(34,160,107,.18) !important;
  cursor:pointer !important;
}
#rdSentView .vf-progress .vf-fill{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0% !important;
  border-radius:99px !important;
  background:#22a06b !important;
}
#rdSentView .vf-progress .vf-thumb{
  position:absolute !important;
  top:50% !important;
  left:0% !important;
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:#22a06b !important;
  box-shadow:0 1px 4px rgba(0,0,0,.25) !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}
/* 批次2：字幕三行切换条 */
#vfSubModeBar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;flex-wrap:wrap;
  background:var(--vf-bar-bg,rgba(255,255,255,.92));
  border-bottom:1px solid rgba(0,0,0,.06);
}
#vfSubModeBar button{
  border:1px solid rgba(34,160,107,.35);background:#fff;color:#3a5a4e;
  font-size:12px;line-height:1;padding:7px 12px;border-radius:999px;cursor:pointer;
  transition:all .16s ease;
}
#vfSubModeBar button.on{
  background:#22a06b;border-color:#22a06b;color:#fff;font-weight:600;
  box-shadow:0 2px 6px rgba(34,160,107,.35);
}