/* 学习页：整屏沉浸。视频 + 跟随字幕为主角，底部操作条固定。
   竖屏（手机/平板竖放）：视频在上、跟随字幕在下；横屏（平板横放/电脑）：视频居中大图 + 画面内字幕 + 右侧跟随字幕 */
.st{position:fixed;inset:0;display:flex;flex-direction:column;background:#07080b;overflow:hidden}
.st-main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}

/* 顶部信息浮在视频上，播放时 3 秒无操作自动淡出 */
.st-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:4px;padding:calc(6px + env(safe-area-inset-top)) 8px 18px;background:linear-gradient(rgba(0,0,0,.75),transparent);transition:opacity var(--t-slow) var(--ease)}
.st-top .t{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.st-top .btn{background:rgba(0,0,0,.35);border-color:transparent;backdrop-filter:blur(6px)}
.st-top .btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.st.idle .st-top{opacity:0;pointer-events:none}
.st.idle{cursor:none}
.st-top .imm{display:none}

/* 视频区 */
.stage{position:relative;flex:none;background:#000;display:flex;align-items:center;justify-content:center}
.fv{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;overflow:hidden;background:#111}
.fv-scene{position:absolute;inset:-10%;background:radial-gradient(circle at 30% 40%,#7a5a3f 0,transparent 38%),radial-gradient(circle at 72% 58%,#2f5568 0,transparent 42%),radial-gradient(circle at 50% 90%,#3d2c4a 0,transparent 40%),linear-gradient(160deg,#2a2622,#121212);animation:pan 24s ease-in-out infinite alternate;animation-play-state:paused}
.st.playing .fv-scene{animation-play-state:running}
@keyframes pan{to{transform:translate(4%,-3%) scale(1.08)}}
.fv-flag{position:absolute;right:8px;bottom:8px;opacity:.85}
.fv-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:rgba(0,0,0,.55);text-align:center;padding:16px;transition:opacity var(--t-slow)}
.fv-state[hidden]{display:grid!important;opacity:0;pointer-events:none}
.fv-buf{position:absolute;inset:0;z-index:2;display:grid;place-items:center;align-content:center;gap:10px;pointer-events:none;background:rgba(0,0,0,.25);color:#e8e9ee;font-size:13px;text-shadow:0 1px 3px #000;animation:fadein .25s .35s ease both}
.fv-buf .spin{width:38px;height:38px}
.cap-ov{display:none;position:absolute;left:6%;right:6%;bottom:7%;text-align:center;pointer-events:auto}
.cap-ov .o{display:inline;font-family:var(--font-sub);font-size:clamp(20px,2.3vw,34px);line-height:1.45;font-weight:500;background:rgba(0,0,0,.55);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 10px;border-radius:6px}
.cap-ov .tr{margin-top:6px;font-size:clamp(15px,1.5vw,22px);color:#d9dce4;text-shadow:0 1px 3px #000}
.cap-ov .tr span:not(.tk){background:rgba(0,0,0,.45);padding:1px 8px;border-radius:5px}

/* 跟随字幕 */
.lyr{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.ly{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 0;-webkit-mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 40px),transparent)}
.ly::after{content:"";display:block;height:42%}
.line{position:relative;display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px 10px 14px;margin:2px 0;border-radius:12px;opacity:.42;transition:opacity var(--t-mid) var(--ease),background var(--t-mid)}
.line:hover{opacity:.75}
.line .o{font-family:var(--font-sub);font-size:17px;line-height:1.5}
.line .tr{font-family:var(--font-sub);font-size:14px;color:var(--muted);margin-top:2px}
.line .meta{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--dim);margin-bottom:2px}
.line.cur{opacity:1;background:var(--surface)}
.line.cur::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--accent)}
.line.cur .o{font-weight:500}
/* 句子收藏星标：当前句、悬停或已收藏时显示；触屏设备上始终显示 */
.line{padding-right:44px;cursor:pointer}
.lfav{position:absolute;top:6px;right:6px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--dim);opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.lfav:hover{background:var(--surface-3);color:var(--fg)}
.lfav:active{transform:scale(.9)}
.line.cur .lfav,.line:hover .lfav,.line:focus-within .lfav,.lfav:focus-visible{opacity:1}
.lfav[aria-pressed="true"]{opacity:1;color:var(--accent)}
@media (hover:none){.lfav{opacity:.7}}
.line .lp{display:none;font-size:12px;color:var(--accent-ink);margin-top:4px}
.line.cur .lp:not(:empty){display:block}
.ly.m-src .tr,.ly.m-tr .o{display:none}
.ly.m-tr .tr{font-size:17px;color:var(--fg)}
.pill{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:3;transition:all var(--t-mid) var(--ease);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.banner{margin:0 0 8px;padding:9px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;display:flex;gap:8px;align-items:center;animation:enter var(--t-slow) var(--ease) both}
.banner.warn{background:rgba(255,123,123,.12);color:var(--danger)}
/* 首次使用说明（只出现一次） */
.coach{position:relative;margin:0 0 10px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid rgba(242,184,75,.35);font-size:13px;animation:enter var(--t-slow) var(--ease) both}
.coach b{color:var(--accent-ink);font-size:13px}
.coach ul{margin:6px 0 10px;padding-left:18px;display:grid;gap:4px;color:var(--fg)}
.coach .tk.pub{pointer-events:none}

/* 底部固定操作条（采用 C 的拇指区布局） */
.dock{flex:none;z-index:7;background:var(--surface);border-top:1px solid var(--line);padding:6px 12px calc(8px + env(safe-area-inset-bottom))}
.scrub{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;max-width:860px;margin:0 auto}
.scrub input{flex:1;accent-color:var(--accent);height:22px}
.dock-row{display:grid;grid-template-areas:"main main" "l r";grid-template-columns:auto minmax(0,1fr);gap:6px 8px;max-width:860px;margin:2px auto 0;align-items:center}
.g-main{grid-area:main;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 64px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;max-width:460px;width:100%;justify-self:center}
.g-l{grid-area:l;display:flex;gap:6px;align-items:center}
.g-r{grid-area:r;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.g-main .btn{flex-direction:column;gap:0;min-height:50px;padding:0;font-size:11px;border-radius:14px;background:var(--surface-2);border:0}
.g-main .btn.play{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.g-main .btn.play .ic{width:30px;height:30px}
.g-main .btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.dock .mini{min-height:34px;padding:0 10px;font-size:12px;gap:4px}
.dock .seg button{min-height:32px;padding:0 9px;font-size:12px}
.dock select.mini{width:auto;border-radius:999px;background:var(--surface-2);border-color:var(--line)}
.kbd{display:none;text-align:center;font-size:11px;color:var(--dim);margin-top:4px}
/* 手机竖屏：右侧次要按钮（收藏句、词语、笔记、更多）改为“图标在上、小字在下”，一行放得下又看得懂；标题去掉资料库前缀 */
@media (max-width:599px){
  .st-top .t-lib{display:none}
  .g-l{gap:4px}
  .dock .seg button{padding:0 8px}
  .g-r{gap:2px}
  .g-r .btn.mini{flex-direction:column;gap:1px;min-width:38px;min-height:40px;padding:2px 3px;border:0;background:transparent;font-size:10px;line-height:1.15}
  .g-r .lbl{display:block;white-space:nowrap}
  .g-r .btn.mini[aria-pressed="true"]{color:var(--accent);background:transparent}
}
/* 很窄的手机（≤360）：压缩间距 */
@media (max-width:360px){
  .g-main{gap:5px;grid-template-columns:repeat(2,minmax(0,1fr)) 58px repeat(2,minmax(0,1fr))}
  .g-main .btn.play{width:58px;height:58px}
  .g-r .btn.mini{min-width:32px;padding:2px 1px}
  .dock .seg button{padding:0 6px}
  .dock select.mini{padding:0 6px}
}

/* 平板竖放：更大的字幕，操作条居中 */
@media (min-width:600px) and (orientation:portrait){
  .line .o{font-size:21px}.line .tr{font-size:16px}.ly.m-tr .tr{font-size:21px}
  .ly{padding:18px 28px 0}
  .g-main{max-width:520px}
}

/* 横屏（平板横放 / 电脑）：视频居中 + 画面字幕 + 右侧跟随字幕；可切沉浸（隐藏右栏） */
@media (orientation:landscape) and (min-width:900px){
  .st-main{flex-direction:row}
  .stage{flex:1;min-width:0;height:100%}
  .fv{height:auto;max-height:100%;width:100%;max-width:calc((100dvh - var(--dock-h,130px)) * 16 / 9)}
  .cap-ov{display:block}
  .lyr{flex:none;width:clamp(300px,30vw,420px);border-left:1px solid var(--line)}
  .ly{padding-top:58px}
  .st-top{right:clamp(300px,30vw,420px)}
  .st-top .imm{display:inline-flex}
  .st.immersive .lyr{display:none}
  .st.immersive .st-top{right:0}
  .dock-row{grid-template-areas:"l main r";grid-template-columns:1fr auto 1fr;max-width:1200px}
  .scrub{max-width:1200px}
  .g-main{width:auto;grid-template-columns:repeat(2,76px) 64px repeat(2,76px)}
  .kbd{display:block}
}
/* 手机横放：高度很小，操作条压成一行，图标不带文字 */
@media (orientation:landscape) and (max-height:500px){
  .st-main{flex-direction:row}
  .stage{flex:1;min-width:0;height:100%}
  .fv{width:auto;height:100%;max-width:100%}
  .cap-ov{display:block}.cap-ov .o{font-size:17px}.cap-ov .tr{font-size:13px}
  .lyr{flex:none;width:min(300px,38vw);border-left:1px solid var(--line)}
  .line .o{font-size:15px}.line .tr{font-size:12px}
  .st-top{right:min(300px,38vw);padding-top:4px}
  .dock{padding:2px 10px calc(4px + env(safe-area-inset-bottom))}
  .scrub input{height:16px}
  .dock-row{grid-template-areas:"l main r";grid-template-columns:1fr auto 1fr;max-width:none;margin:0}
  .g-main{grid-template-columns:repeat(2,44px) 46px repeat(2,44px);gap:6px}
  .g-main .btn{min-height:40px;font-size:0}.g-main .btn.play{width:46px;height:46px}
  .g-main .btn.play .ic{width:24px;height:24px}
  .dock .lbl{display:none}
}