/* ============================================================
   绘本动画 · 分镜 / 生成 / 开拍确认(js/picbook-story.js,pbk-st-)+ 成片 / 导出 / 旧版 / 课堂播放(js/picbook-film.js,pbk-fm- / pbk-cr-)
   pbk- 前缀;基础件沿用 css/picbook.css;断点 1100 / 900 / 720 / 640;375 宽无横向滚动
   ============================================================ */

/* ── ⑤ 分镜 ── */
.pbk-st-board, .pbk-st-make { display: flex; flex-direction: column; gap: 12px; }
.pbk-st-rhythm { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); }
.pbk-st-rhythm.ok { background: #e6f4ea; border-color: #bfe3c8; color: #2b7a3d; }
.pbk-st-rhythm.warn { background: #fff3d6; border-color: #f1d7a8; color: #8a5200; }
.pbk-st-rhythm.bad { background: #fde3df; border-color: #f0c4bd; color: #8b2a21; }
.pbk-st-rhythm b { margin-left: auto; }
.pbk-st-tip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); }
.pbk-st-tip.warn { background: #fff8ea; border-color: #f1d7a8; color: #8a5200; }
.pbk-st-tip.bad { background: #fdf1ef; border-color: #f0c4bd; color: #8b2a21; }
.pbk-st-tip i { margin-top: 2px; }
.pbk-st-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pbk-st-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border, #e8e2d6); background: var(--bg-white, #fff); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text-secondary, #6b7280); font-family: inherit; }
.pbk-st-chip em { font-style: normal; font-weight: 700; }
.pbk-st-chip.warn { border-color: #f1d7a8; color: #8a5200; background: #fff8ea; }
.pbk-st-chip.bad { border-color: #f0c4bd; color: #8b2a21; background: #fdf1ef; }
.pbk-st-chip.on { outline: 2px solid var(--primary, #c8791f); }
.pbk-st-pages { display: flex; flex-direction: column; gap: 12px; }
.pbk-st-page { background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); border-radius: 12px; padding: 10px 12px; }
.pbk-st-page.head, .pbk-st-page.tail { background: var(--bg-warm, #faf7f2); }
.pbk-st-phead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.pbk-st-phead > img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #e8e2d6); }
.pbk-st-phead b { font-size: 14px; }
.pbk-st-ptext { color: var(--text-secondary, #6b7280); font-size: 12.5px; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbk-st-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pbk-st-shots.after { margin-top: 8px; }
.pbk-st-shot { border: 1px solid var(--border, #e8e2d6); border-radius: 10px; padding: 8px 10px; background: var(--bg-warm, #faf7f2); display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; min-width: 0; }
.pbk-st-shot.dim { opacity: .4; }
.pbk-st-shot.card { background: #f3f1fb; border-color: #d9d3f3; }
.pbk-st-shot.p-page_master { border-left: 3px solid var(--primary, #c8791f); }
.pbk-st-shead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-st-shead b { font-size: 13px; }
.pbk-st-shead .pbk-btn { margin-left: auto; }
.pbk-st-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eceae6; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.pbk-st-tag.warn { background: #fff3d6; color: #b26a00; }
.pbk-st-tag.free { background: #e6f4ea; color: #2b7a3d; }
.pbk-st-tag.card { background: #e4dff7; color: #4b3f9e; }
.pbk-st-tag.teach { background: #e6f4ea; color: #2b7a3d; }
.pbk-st-tag.mute { background: #eceae6; color: var(--text-hint, #9aa0ac); }
.pbk-st-tag.master { position: absolute; left: 6px; top: 6px; background: rgba(200, 121, 31, .9); color: #fff; }
.pbk-st-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text-secondary, #6b7280); font-size: 12px; }
.pbk-st-text { color: var(--text, #23262e); }
.pbk-st-fae { display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary, #6b7280); font-size: 12px; line-height: 1.5; }
.pbk-st-lints { display: flex; flex-direction: column; gap: 4px; }
.pbk-st-lint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.pbk-st-lint.bad { background: #fdf1ef; color: #8b2a21; }
.pbk-st-lint.warn { background: #fff8ea; color: #8a5200; }
.pbk-st-cardbody { display: flex; gap: 10px; align-items: flex-start; }
.pbk-st-cardbody img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #ece6dc; }
.pbk-st-cardbody .pbk-st-ph { width: 128px; aspect-ratio: 16 / 9; flex: 0 0 auto; }
.pbk-st-ph { display: flex; align-items: center; justify-content: center; gap: 6px; background: #ece6dc; border-radius: 6px; color: var(--text-hint, #9aa0ac); font-size: 12px; text-align: center; padding: 8px; box-sizing: border-box; min-height: 56px; line-height: 1.4; }
.pbk-st-ph.run { color: var(--primary, #c8791f); }
.pbk-st-ph.bad { color: var(--danger, #d4483b); }
.pbk-st-ph.relay { background: #eef1f7; color: #3b5ea8; }
.pbk-st-sacts { display: flex; gap: 5px; flex-wrap: wrap; }
/* 静帧预演 */
.pbk-st-anim { background: #1d1b19; border-radius: 12px; padding: 10px; color: #eee; }
.pbk-st-animstage { position: relative; aspect-ratio: 16 / 9; max-height: 60vh; overflow: hidden; border-radius: 8px; background: #000; display: flex; align-items: center; justify-content: center; }
.pbk-st-animstage img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: center; }
.pbk-st-animstage img.push { animation: pbk-st-push 8s linear forwards; }
@keyframes pbk-st-push { from { transform: scale(1); } to { transform: scale(1.06); } }
.pbk-st-animcap { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); max-width: 90%; background: rgba(0, 0, 0, .55); color: #fff; font-size: clamp(13px, 2.2vw, 22px); padding: 4px 14px; border-radius: 8px; text-align: center; line-height: 1.5; }
.pbk-st-animstage .pbk-st-tag.card { position: absolute; left: 10px; top: 10px; }
.pbk-st-ai { position: absolute; right: 10px; top: 10px; font-size: 11px; color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .4); padding: 1px 7px; border-radius: 999px; }
.pbk-st-animbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.pbk-st-animbar input[type=range] { flex: 1 1 160px; }
.pbk-st-animbar .pbk-btn { background: #2a2825; color: #eee; border-color: #3b3835; }
.pbk-st-animbar .pbk-chk { color: #ddd; }

/* ── 镜头编辑抽屉 ── */
.pbk-st-edit { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 12.5px; }
.pbk-st-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pbk-st-f > span { font-size: 12px; color: var(--text-secondary, #6b7280); }
.pbk-st-f textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.pbk-st-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.pbk-st-stage { display: flex; flex-direction: column; gap: 6px; }
.pbk-st-stitem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); }
.pbk-st-stitem b { min-width: 48px; }
.pbk-st-stitem .pbk-inp.sm { width: 110px; }
.pbk-st-props { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pbk-st-prop { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 9px; border-radius: 999px; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); }
.pbk-st-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.pbk-st-slots figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; }
.pbk-st-slots img, .pbk-st-slots i { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #e8e2d6); background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; color: var(--text-hint, #9aa0ac); }
.pbk-st-slots figcaption { font-size: 10.5px; color: var(--text-secondary, #6b7280); text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbk-st-slots.sm figure { width: 44px; }
.pbk-st-slots.sm img, .pbk-st-slots.sm i { width: 44px; height: 30px; }
.pbk-st-refsedit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 8px; background: var(--bg-warm, #faf7f2); }
.pbk-st-refsedit label { display: flex; align-items: center; gap: 8px; }
.pbk-st-dfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #e8e2d6); }

/* ── ⑥ 生成 ── */
.pbk-tabs.sub { margin: 0; }
.pbk-st-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.pbk-st-need { background: #fff8ea; border: 1px solid #f1d7a8; border-radius: 12px; padding: 10px 12px; }
.pbk-st-needs { display: flex; gap: 8px; flex-wrap: wrap; }
.pbk-st-needitem { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #f1d7a8; font-size: 12px; }
.pbk-st-needitem em { font-style: normal; color: var(--text-secondary, #6b7280); }
.pbk-st-kfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pbk-st-kf { border: 1px solid var(--border, #e8e2d6); border-radius: 10px; background: var(--bg-warm, #faf7f2); display: flex; flex-direction: column; gap: 5px; padding: 6px; font-size: 12px; min-width: 0; }
.pbk-st-kf.flagged, .pbk-st-kf.bad { border-color: #e5a29a; background: #fdf6f5; }
.pbk-st-kf.run { border-style: dashed; }
.pbk-st-kf.card { background: #f3f1fb; border-color: #d9d3f3; }
.pbk-st-kfimg { position: relative; aspect-ratio: 16 / 9; background: #ece6dc; border-radius: 7px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pbk-st-kfimg img, .pbk-st-kf > img, .pbk-st-vc > img, .pbk-st-vc > video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 7px; background: #ece6dc; }
.pbk-st-kfimg .pbk-st-ph { width: 100%; height: 100%; border-radius: 0; }
.pbk-st-kfmeta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pbk-st-kfmeta b { font-size: 12.5px; }
.pbk-st-qc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eceae6; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.pbk-st-qc.ok { background: #e6f4ea; color: #2b7a3d; }
.pbk-st-qc.warn { background: #fff3d6; color: #b26a00; }
.pbk-st-qc.bad { background: #fde3df; color: var(--danger, #d4483b); }
.pbk-st-qc.run { background: var(--primary-light, #f6ecd9); color: var(--primary, #c8791f); }
.pbk-st-qc.free { background: #e6f4ea; color: #2b7a3d; }
.pbk-st-issue { font-size: 12px; line-height: 1.4; color: #8a5200; }
.pbk-st-issue.bad { color: #8b2a21; }
.pbk-st-issue em { font-style: normal; color: var(--text-secondary, #6b7280); }
.pbk-st-cands { display: flex; gap: 6px; }
.pbk-st-cands button { position: relative; border: 2px solid var(--border, #e8e2d6); background: #fff; border-radius: 7px; padding: 0; width: 64px; height: 40px; overflow: hidden; cursor: pointer; }
.pbk-st-cands button.on { border-color: var(--primary, #c8791f); }
.pbk-st-cands img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbk-st-cands em { position: absolute; left: 3px; top: 1px; font-style: normal; font-weight: 700; font-size: 11px; color: #fff; text-shadow: 0 0 3px #000; }
.pbk-st-vrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.pbk-st-vc { position: relative; width: 200px; border: 1px solid var(--border, #e8e2d6); border-radius: 10px; background: var(--bg-warm, #faf7f2); padding: 6px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; min-width: 0; }
.pbk-st-vc.ok { border-color: #bfe3c8; }
.pbk-st-vc.bad { border-color: #e5a29a; background: #fdf6f5; }
.pbk-st-vc.run { border-style: dashed; }
.pbk-st-vc.card { background: #f3f1fb; border-color: #d9d3f3; }
.pbk-st-relay { display: flex; align-items: center; color: #3b5ea8; font-size: 16px; }
.pbk-st-sample { background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); border-radius: 12px; padding: 10px 12px; }
.pbk-st-player { display: flex; flex-direction: column; gap: 8px; }
.pbk-st-player video { width: 100%; max-height: 50vh; background: #000; border-radius: 10px; }
.pbk-st-sampleseq { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pbk-st-sampleseq button { border: 1px solid var(--border, #e8e2d6); background: var(--bg-white, #fff); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.pbk-st-sampleseq button.on { border-color: var(--primary, #c8791f); color: var(--primary, #c8791f); }
.pbk-st-sampleseq button.off { opacity: .5; }

/* ── 开拍确认框 ── */
.pbk-st-quote { display: flex; flex-direction: column; gap: 8px; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); margin: 8px 0; }
.pbk-st-qline b { font-size: 14px; }
.pbk-st-quote .pbk-chk, .pbk-st-quote .pbk-row { font-size: 12.5px; }

/* ── ⑦ 成片 ── */
.pbk-fm { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; }
.pbk-fm-player { grid-column: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pbk-fm-side { grid-column: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pbk-fm-export, .pbk-fm-autolog { grid-column: 1 / -1; }
.pbk-fm-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.pbk-fm-video video { width: 100%; height: 100%; display: block; }
.pbk-fm-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #ccc; font-size: 13px; text-align: center; padding: 20px; }
.pbk-fm-ph:has(.pbk-fm-fail) { flex-direction: column; padding: 16px; text-align: center; }
.pbk-fm-fail { color: #ffb4a8; max-width: 88%; font-size: 13.5px; line-height: 1.6; }   /* 成片没合成出来(黑底播放区,文案审计 #41) */
.pbk-fm-wait { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12.5px; padding: 6px 12px; }
.pbk-fm-ticks { position: relative; height: 14px; margin: 2px 6px 0; }
.pbk-fm-ticks button { position: absolute; top: 0; transform: translateX(-50%); width: 14px; height: 14px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.pbk-fm-ticks button i { display: block; width: 8px; height: 8px; margin: 3px auto; border-radius: 50%; background: var(--text-hint, #9aa0ac); }
.pbk-fm-ticks .k-page i { background: var(--primary, #c8791f); }
.pbk-fm-ticks .k-pause i, .pbk-fm-ticks .k-quiz i, .pbk-fm-ticks .k-guess i { background: #7b61d6; border-radius: 2px; }
.pbk-fm-ticks .k-credits i, .pbk-fm-ticks .k-end i, .pbk-fm-ticks .k-words i { background: #4a7a53; }
.pbk-fm-chapters { font-size: 12px; color: var(--text-secondary, #6b7280); line-height: 1.5; }
.pbk-fm-which { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.pbk-fm-which > button { border: 1px solid var(--border, #e8e2d6); background: var(--bg-white, #fff); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--text, #23262e); }
.pbk-fm-which > button.on { background: var(--primary, #c8791f); border-color: var(--primary, #c8791f); color: #fff; }
.pbk-fm-which > button:disabled { opacity: .5; cursor: not-allowed; }
.pbk-fm-which em { font-style: normal; font-size: 11px; opacity: .8; }
.pbk-fm-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eceae6; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.pbk-fm-tag.ok { background: #e6f4ea; color: #2b7a3d; }
.pbk-fm-tag.warn { background: #fff3d6; color: #b26a00; }
.pbk-fm-tag.bad { background: #fde3df; color: var(--danger, #d4483b); }
.pbk-fm-tag.run { background: var(--primary-light, #f6ecd9); color: var(--primary, #c8791f); }
.pbk-fm-tag.mute { background: #eceae6; color: var(--text-hint, #9aa0ac); }
.pbk-fm-check, .pbk-fm-export, .pbk-fm-autolog { background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); border-radius: 12px; padding: 10px 12px; }
.pbk-fm-check h4, .pbk-fm-export h4, .pbk-fm-autolog h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-fm-check ul, .pbk-fm-qcl, .pbk-fm-autolog ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.pbk-fm-check li, .pbk-fm-qcl li, .pbk-fm-autolog li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-fm-check li i, .pbk-fm-qcl li i { width: 16px; text-align: center; }
.pbk-fm-check li.ok i, .pbk-fm-qcl li.ok i { color: #2b7a3d; }
.pbk-fm-check li.warn i, .pbk-fm-qcl li.warn i { color: #b26a00; }
.pbk-fm-check li.bad i, .pbk-fm-qcl li.bad i { color: var(--danger, #d4483b); }
.pbk-fm-check li.mute i, .pbk-fm-qcl li.mute i { color: var(--text-hint, #9aa0ac); }
.pbk-fm-check li span, .pbk-fm-qcl li span { color: var(--text-secondary, #6b7280); }
.pbk-fm-qcl li em { font-style: normal; color: var(--text-hint, #9aa0ac); font-size: 12px; }
.pbk-fm-acts { display: flex; flex-direction: column; gap: 6px; }
.pbk-fm-acts .pbk-btn { justify-content: center; }
.pbk-fm-tip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); margin-bottom: 8px; }
.pbk-fm-tip.warn { background: #fff8ea; border-color: #f1d7a8; color: #8a5200; }
.pbk-fm-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pbk-fm-kinds.col { grid-template-columns: 1fr; }
.pbk-fm-kind { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "c t l" "c s l"; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border, #e8e2d6); background: var(--bg-warm, #faf7f2); font-size: 12.5px; cursor: pointer; }
.pbk-fm-kind input { grid-area: c; width: 16px; height: 16px; margin: 0; }
.pbk-fm-kind b { grid-area: t; font-weight: 600; }
.pbk-fm-kind .pbk-dim { grid-area: s; font-size: 11.5px; }
.pbk-fm-kind .pbk-lnk { grid-area: l; }
.pbk-fm-kind.done { border-color: #bfe3c8; }
.pbk-fm-kind.error { border-color: #e5a29a; }
.pbk-fm-autolog li b { color: var(--primary, #c8791f); }
.pbk-fm-rr { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; font-size: 13px; }
.pbk-fm-f { display: flex; flex-direction: column; gap: 4px; }
.pbk-fm-f > span { font-size: 12px; color: var(--text-secondary, #6b7280); }
.pbk-fm-f input[type=range] { flex: 1; min-width: 120px; }
.pbk-fm-f .pbk-inp.sm { width: 64px; }

/* ── 旧版视图 ── */
.pbk-fm-legacy { display: flex; flex-direction: column; gap: 12px; }
.pbk-fm-ybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: #fff8ea; border: 1px solid #f1d7a8; color: #6b4a00; font-size: 12.5px; line-height: 1.6; }
.pbk-fm-ybar span { flex: 1 1 320px; }
.pbk-fm-lsteps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pbk-fm-lsteps button { border: 1px solid var(--border, #e8e2d6); background: var(--bg-white, #fff); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--text, #23262e); }
.pbk-fm-lsteps button.on { background: var(--primary, #c8791f); border-color: var(--primary, #c8791f); color: #fff; }
.pbk-fm-lsteps button.off { opacity: .4; }
.pbk-fm-lshots { display: flex; flex-direction: column; gap: 10px; }
.pbk-fm-lnote { font-size: 12.5px; color: var(--text-secondary, #6b7280); line-height: 1.6; }
.pbk-fm-lshot { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 12px; background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); }
.pbk-fm-lmedia img, .pbk-fm-lmedia video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #ece6dc; display: block; }
.pbk-fm-lmedia .pbk-fm-ph { position: static; aspect-ratio: 16 / 9; background: #ece6dc; border-radius: 8px; color: var(--text-hint, #9aa0ac); }
.pbk-fm-lbody { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 0; }
.pbk-fm-lhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-fm-lhead b { font-size: 13.5px; }
.pbk-fm-lbody textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* ── 课堂播放(全屏黑底、控制条自动隐藏、周边常显「AI 生成」) ── */
.pbk-modal.modal-classroom .pbk-mbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; background: #000; padding: 0; }
.pbk-modal.modal-classroom .pbk-mbody { height: 100%; padding: 0; }
.pbk-modal.modal-classroom .pbk-x { display: none; }
.pbk-cr { position: relative; width: 100%; height: 100%; background: #000; color: #fff; display: flex; flex-direction: column; }
.pbk-cr-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pbk-cr-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.pbk-cr-stage.black video, .pbk-cr-stage.black .pbk-cr-card { visibility: hidden; }
.pbk-cr-ai { position: absolute; right: 14px; top: 12px; font-size: 12px; color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .45); padding: 2px 9px; border-radius: 999px; letter-spacing: .5px; }
.pbk-cr-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(12, 10, 8, .88); text-align: center; padding: 6vh 8vw; }
.pbk-cr-card[hidden] { display: none; }
.pbk-cr-card b { font-size: clamp(28px, 5.2vw, 64px); line-height: 1.5; font-weight: 700; font-family: "LXGW WenKai GB", "KaiTi", "STKaiti", serif; }
.pbk-cr-card span { font-size: clamp(14px, 1.8vw, 20px); color: #ddd; }
.pbk-cr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: rgba(20, 18, 16, .92); font-size: 12px; transition: opacity .3s; }
.pbk-cr-bar.hide { opacity: 0; pointer-events: none; }
.pbk-cr-bar .pbk-btn { background: #2a2825; color: #eee; border-color: #3b3835; }
.pbk-cr-time { font-variant-numeric: tabular-nums; min-width: 84px; }
.pbk-cr-help { flex: 1; color: #bbb; text-align: center; }

/* ── 窄屏 ── */
@media (max-width: 1100px) {
    .pbk-fm { grid-template-columns: 1fr; }
    .pbk-fm-player, .pbk-fm-side { grid-column: 1; }
}
@media (max-width: 900px) {
    .pbk-st-grid3 { grid-template-columns: 1fr 1fr; }
    .pbk-st-shots { grid-template-columns: 1fr; }
    .pbk-fm-lshot { grid-template-columns: 1fr; }
    .pbk-cr-help { display: none; }
}
@media (max-width: 640px) {
    .pbk-st-grid3 { grid-template-columns: 1fr; }
    .pbk-st-kfgrid { grid-template-columns: 1fr 1fr; }
    .pbk-st-vc { width: calc(50% - 4px); }
    .pbk-st-page { padding: 8px 10px; }
    .pbk-st-phead > img { display: none; }
    .pbk-st-chips .pbk-st-chip { min-height: 30px; }
    .pbk-st-sacts .pbk-btn, .pbk-st-dfoot .pbk-btn, .pbk-fm-acts .pbk-btn { min-height: 34px; }
    .pbk-fm-kinds { grid-template-columns: 1fr; }
    .pbk-fm-nophone { display: none !important; }
    .pbk-cr-help { display: none; }
}
@media (pointer: coarse) and (max-width: 900px) {
    .pbk-fm-nophone { display: none !important; }
}

/* 2026-10-13 卡片简化:白话说明 + 主操作 + 「更多」 */
.pbk-st-guide { font-size: 12px; line-height: 1.45; color: var(--text-secondary, #6b7280); background: rgba(232, 176, 75, .10); border-radius: 6px; padding: 5px 8px; }
.pbk-st-more { flex-basis: 100%; }
.pbk-st-more > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary, #6b7280); list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; }
.pbk-st-more > summary::-webkit-details-marker { display: none; }
.pbk-st-more > summary::after { content: '▾'; font-size: 10px; }
.pbk-st-more[open] > summary::after { content: '▴'; }
.pbk-st-morebody { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.pbk-st-moreh { flex-basis: 100%; font-size: 11px; color: var(--text-secondary, #6b7280); }