/* 绘本动画 · 教育版(页面 #page-picbook)· 沿用 tokens.css 暗色放映室令牌;前缀 pbk-
 *   本文件:核心外框(顶栏 / 步骤条 / 作业条 / 提示条 / 页签 / 吸底条 / 抽屉 / 弹层)+ 通用小部件(按钮 / 输入 / 分段 / 表格 / 标签)
 *          + create(首页 / 新建 / 原文 / 清单 / 教学建议 / 校正弹层)+ edu(教育设置)
 *   G6 的资产 / 分镜 / 成片样式在 picbook-assets.css / picbook-story.css,可直接复用这里的通用小部件;同名的 .pbk-line / .pbk-teach / .pbk-top / .pbk-acts 都按容器限定
 *   断点沿用 U1 §2.1:1100 / 900 / 720 / 640;375px 宽度不出横向滚动 */
.pbk { position: relative; padding-bottom: 24px; color: var(--text); min-width: 0; }
.pbk.has-foot { padding-bottom: 96px; }
.pbk * { box-sizing: border-box; min-width: 0; }
.pbk [hidden] { display: none !important; }   /* 自己给了 display 的元素(菜单 / 画布 / 图片)用 hidden 属性藏起来时也要真的不显示 */
.pbk img { max-width: 100%; }
.pbk-dim { color: var(--text-hint); font-size: 12px; }
.pbk-grow { flex: 1 1 auto; }
.pbk-lnk { background: none; border: none; padding: 0; color: var(--accent-deep); cursor: pointer; font-size: 12.5px; text-decoration: none; }
.pbk-lnk:hover { text-decoration: underline; }
.pbk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-row.end { justify-content: flex-end; }
.pbk-row.center { justify-content: center; }
.pbk-lrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.pbk-lrow h3, .pbk-lrow h4 { margin: 0; color: var(--strong); font-size: 15px; }
.pbk-lrow h4 { font-size: 14px; }
.pbk-note { margin: 8px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); background: var(--bg-warm); border: 1px solid var(--border); }
.pbk-note.ok { color: var(--success); border-color: rgba(77, 191, 168, .35); }
.pbk-note.warn { color: var(--accent); border-color: rgba(232, 176, 75, .35); background: var(--primary-light); }
.pbk-note.err { color: var(--danger); border-color: rgba(224, 123, 99, .35); }
.pbk-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--bg-warm); border: 1px solid var(--border); color: var(--text-secondary); font-style: normal; white-space: nowrap; }
.pbk-tag.ok { color: var(--success); border-color: rgba(77, 191, 168, .35); }
.pbk-tag.gold { color: var(--accent); border-color: rgba(232, 176, 75, .4); background: var(--primary-light); }
.pbk-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-style: normal; font-weight: 700; color: #1a1206; }
.pbk-badge.red { background: var(--danger); color: #fff; }
.pbk-badge.yellow { background: var(--accent); }

/* 按钮 / 输入 / 分段 */
.pbk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-warm); color: var(--text); text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; min-height: 34px; }
.pbk-btn:hover { border-color: rgba(255, 255, 255, .2); color: var(--strong); }
.pbk-btn.primary { background: var(--gold-grad); color: #1a1206; border-color: transparent; font-weight: 700; }
.pbk-btn.primary:hover { filter: brightness(1.08); color: #1a1206; }
.pbk-btn.ghost { background: transparent; }
.pbk-btn.danger:hover { color: var(--danger); border-color: rgba(224, 123, 99, .45); }
.pbk-btn.sm { padding: 4px 10px; font-size: 12px; min-height: 28px; }
.pbk-btn.on { border-color: var(--accent); color: var(--accent); }
.pbk-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.pbk-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; }
.pbk-ic:hover { background: var(--bg-warm); color: var(--strong); border-color: var(--border); }
.pbk-ic.danger:hover { color: var(--danger); }
.pbk-ic[disabled] { opacity: .35; cursor: not-allowed; }
.pbk-ic.grip { cursor: grab; }
.pbk-inp, .pbk-sel { background: var(--bg-warm); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 13px; outline: none; min-width: 0; font-family: inherit; }
.pbk-inp:focus, .pbk-sel:focus { border-color: rgba(232, 176, 75, .55); }
.pbk-inp.sm, .pbk-sel.sm { padding: 5px 8px; font-size: 12.5px; }
.pbk-inp.xs, .pbk-sel.xs { padding: 3px 6px; font-size: 12px; width: auto; }
.pbk-inp.xs[type="number"] { width: 64px; }
.pbk-inp.grow { flex: 1 1 160px; }
.pbk-inp.mono { font-family: var(--font-mono); font-size: 12px; }
.pbk-inp.bad { border-color: var(--danger); }
textarea.pbk-inp { resize: vertical; line-height: 1.6; width: 100%; }
.pbk-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); margin: 8px 0; }
.pbk-field.sm { margin: 4px 0; }
.pbk-field .pbk-inp { width: 100%; }
.pbk-seg { display: inline-flex; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 9px; padding: 2px; flex-wrap: wrap; gap: 2px; }
.pbk-seg button { border: none; background: transparent; color: var(--text-secondary); padding: 5px 11px; border-radius: 7px; font-size: 12.5px; cursor: pointer; min-height: 30px; display: inline-flex; align-items: center; gap: 4px; }
.pbk-seg button:hover { color: var(--strong); }
.pbk-seg button.on { background: var(--primary-light); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(232, 176, 75, .3); font-weight: 600; }
.pbk-seg button[disabled] { opacity: .4; cursor: not-allowed; }
.pbk-seg button em { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 4px; background: rgba(224, 123, 99, .2); color: var(--danger); }
.pbk-chk { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; user-select: none; line-height: 1.5; }
.pbk-chk input { accent-color: var(--accent); margin-top: 3px; flex: 0 0 auto; }
.pbk-chk.sm { font-size: 12px; }
.pbk-chk.dis { opacity: .6; cursor: default; }
.pbk-chk.warn { color: var(--accent); }
.pbk-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.pbk-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.pbk-radio { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-warm); font-size: 12.5px; cursor: pointer; }
.pbk-radio.on { border-color: var(--accent); color: var(--accent); background: var(--primary-light); }
.pbk-radio input { accent-color: var(--accent); }
.pbk-radio i { color: var(--text-hint); }
.pbk-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.pbk-opt:last-child { border-bottom: none; }
.pbk-olab { flex: 0 0 72px; color: var(--text-secondary); font-size: 12.5px; }
.pbk-olab .req, .req { color: var(--danger); font-style: normal; }
.pbk-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.pbk-tbl th, .pbk-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.pbk-tbl td:last-child, .pbk-tbl th:last-child { text-align: right; white-space: nowrap; }
.pbk-tbl tr.opt td { color: var(--text-hint); }
.pbk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pbk-kpis > div { background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pbk-kpis em { font-style: normal; font-size: 11px; color: var(--text-hint); }
.pbk-kpis b { font-size: 16px; color: var(--strong); font-variant-numeric: tabular-nums; }
.pbk-sum { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--primary-light); margin: 8px 0; }
.pbk-sum b { color: var(--accent); font-size: 15px; }
.pbk-impact { margin: 8px 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--text); }
.pbk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.pbk-switch { flex-direction: row !important; align-items: center; gap: 8px !important; flex-wrap: wrap; }
.pbk-switch input { accent-color: var(--accent); }
.pbk-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.pbk-dl dt { color: var(--text-hint); }
.pbk-dl dd { margin: 0; color: var(--text); }
.pbk-bar { display: inline-block; flex: 0 0 120px; height: 6px; border-radius: 3px; background: var(--bg-warm); overflow: hidden; }
.pbk-bar u { display: block; height: 100%; background: var(--gold-grad); text-decoration: none; transition: width .4s; }
.pbk-empty { padding: 32px 12px; text-align: center; color: var(--text-hint); font-size: 13px; }
.pbk-empty.err { color: var(--danger); }
.pbk-picks { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.pbk-pick { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-warm); cursor: pointer; color: var(--text); }
.pbk-pick:hover, .pbk-pick.on { border-color: var(--accent); }
.pbk-pick b { color: var(--strong); font-size: 13.5px; }
.pbk-pick span { font-size: 12px; color: var(--text-hint); }

/* hero */
.pbk-hero { display: flex; flex-direction: column; align-items: center; position: relative; }
.pbk-hero.sm h1 { font-size: 20px; margin-bottom: 0; }
.pbk-hero.sm { margin: 6px auto 0; }
.pbk-hero-act { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }

/* 顶栏 */
.pbk > .pbk-top, .pbk #pbk-top .pbk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-top: 10px; border-radius: 14px; background: var(--bg-white); border: 1px solid var(--border); box-shadow: var(--shadow-console); position: relative; }
.pbk-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 13px; padding: 6px 8px; border-radius: 8px; }
.pbk-back:hover { color: var(--strong); background: var(--bg-warm); }
.pbk-ttl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pbk-ttl b { color: var(--strong); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.pbk-disp { font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.pbk-disp.run { color: var(--accent); border-color: rgba(232, 176, 75, .4); background: var(--primary-light); }
.pbk-disp.wait { color: #e8b04b; border-color: rgba(232, 176, 75, .55); }
.pbk-disp.ok { color: var(--success); border-color: rgba(77, 191, 168, .4); }
.pbk-disp.err { color: var(--danger); border-color: rgba(224, 123, 99, .4); }
.pbk-disp.old { color: var(--text-hint); }
.pbk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pbk-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-warm); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.pbk-chip.lnk { cursor: pointer; color: var(--accent-deep); }
button.pbk-chip { cursor: pointer; }
.pbk-chip.on { color: var(--accent); border-color: rgba(232, 176, 75, .5); background: var(--primary-light); }
.pbk-cost { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text); font-size: 12.5px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbk-cost:hover { border-color: var(--accent); }
.pbk-more { position: relative; }
.pbk-menu { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 170px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; }
.pbk-menu button { background: transparent; border: none; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.pbk-menu button:hover { background: var(--bg-warm); }
.pbk-menu button.danger { color: var(--danger); }

/* 步骤条 */
.pbk-steps { display: flex; align-items: stretch; gap: 0; margin-top: 10px; overflow-x: auto; padding: 2px; }
.pbk-sep { flex: 1 0 8px; max-width: 28px; height: 1px; align-self: center; background: var(--border); }
.pbk-step { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-white); color: var(--text-secondary); cursor: pointer; text-align: left; min-width: 0; overflow: hidden; }
.pbk-step[disabled] { cursor: not-allowed; opacity: .55; }
.pbk-step em { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; background: var(--bg-warm); border: 1px solid var(--border); }
.pbk-step span { display: flex; flex-direction: column; min-width: 0; }
.pbk-step b { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbk-step i { font-style: normal; font-size: 11px; color: var(--text-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbk-step u { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold-grad); text-decoration: none; }
.pbk-step.cur { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(232, 176, 75, .35); }
.pbk-step.done em { background: rgba(77, 191, 168, .18); color: var(--success); border-color: transparent; }
.pbk-step.running em, .pbk-step.queued em { color: var(--accent); border-color: var(--accent); }
.pbk-step.review em { background: var(--accent); color: #1a1206; border-color: transparent; }
.pbk-step.review i { color: var(--accent); }
.pbk-step.stale { border-color: rgba(232, 176, 75, .55); }
.pbk-step.stale i { color: var(--accent); }
.pbk-step.error em, .pbk-step.interrupted em { background: rgba(224, 123, 99, .2); color: var(--danger); border-color: transparent; }
.pbk-step.error i, .pbk-step.interrupted i { color: var(--danger); }
.pbk-step.off { opacity: .35; }
.pbk-steps-sel { display: none; margin-top: 10px; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.pbk-steps-sel select { flex: 1; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 8px; }

/* 作业条 / 提示条 / 页签 */
.pbk-job { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--primary-light); border: 1px solid rgba(232, 176, 75, .3); font-size: 13px; color: var(--text); }
.pbk-job > i { color: var(--accent); }
.pbk-job.q { background: var(--bg-warm); border-color: var(--border); }
.pbk-job.err { background: rgba(224, 123, 99, .1); border-color: rgba(224, 123, 99, .35); }
.pbk-job.err > i { color: var(--danger); }
.pbk-job.sub { background: transparent; border-style: dashed; color: var(--text-secondary); padding: 5px 12px; }
.pbk-job-l { flex: 1 1 200px; }
.pbk-warn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--primary-light); border: 1px solid rgba(232, 176, 75, .35); color: var(--text); }
.pbk-warn > i { color: var(--accent); }
.pbk-warn.red { background: rgba(224, 123, 99, .1); border-color: rgba(224, 123, 99, .35); }
.pbk-warn.red > i { color: var(--danger); }
.pbk-warn span { flex: 1 1 200px; }
.pbk-warn em { font-style: normal; color: var(--text-hint); margin-left: 6px; }
.pbk-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 14px 0 12px; overflow-x: auto; }
.pbk-tab { position: relative; background: transparent; border: none; cursor: pointer; padding: 10px 2px; font-size: 14px; font-weight: 500; color: var(--text-hint); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pbk-tab:hover { color: var(--text); }
.pbk-tab.on { color: var(--strong); font-weight: 800; }
.pbk-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.pbk-tab em { font-style: normal; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #1a1206; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* 主区 */
#pbk-main { margin-top: 12px; }
.pbk-view { min-width: 0; }

/* 吸底条 */
.pbk .pbk-foot { position: fixed; left: var(--sidebar-w, 220px); right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--bg-white); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
body.sidebar-collapsed .pbk .pbk-foot, body.nav-collapsed .pbk .pbk-foot { left: 0; }
.pbk-check { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.pbk-check i { color: var(--text-hint); font-style: normal; }
.pbk-check span.w { color: var(--accent); }
.pbk-check-n { display: none; font-size: 12px; color: var(--accent); }
.pbk-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 240px; font-size: 13px; color: var(--text); }
.pbk-next b { color: var(--strong); }
.pbk-costb { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--primary-light); color: var(--accent); border: 1px solid rgba(232, 176, 75, .35); white-space: nowrap; }
.pbk-costb.free { color: var(--success); background: rgba(77, 191, 168, .12); border-color: rgba(77, 191, 168, .3); }
.pbk .pbk-foot .pbk-acts { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* 抽屉 / 弹层 */
.pbk-drawer { position: fixed; inset: 0; z-index: 1200; }
.pbk-dbg, .pbk-mbg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pbk-dpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; background: var(--bg-white); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.pbk-drawer.fresh .pbk-dpanel { animation: pbkSlide .22s ease-out; }
@keyframes pbkSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pbk-dbody { flex: 1; overflow: auto; padding: 16px 18px 24px; }
.pbk-x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-warm); color: var(--text-secondary); cursor: pointer; }
.pbk-x:hover { color: var(--strong); }
.pbk-dhead, .pbk-mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-right: 36px; flex-wrap: wrap; }
.pbk-dhead b, .pbk-mhead b { color: var(--strong); font-size: 16px; }
.pbk-dhead i, .pbk-mhead i { color: var(--accent); }
.pbk-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pbk-mbox { position: relative; width: 560px; max-width: 100%; max-height: 92vh; overflow: auto; background: var(--bg-white); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px; }
.pbk-modal.sm .pbk-mbox { width: 440px; }
.pbk-modal-quad .pbk-mbox { width: 820px; }
.pbk-off { padding: 60px 16px; text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pbk-off i { font-size: 36px; color: var(--text-hint); }
.pbk-off h3 { margin: 0; color: var(--strong); }
.pbk-off p { margin: 0; max-width: 520px; line-height: 1.7; }

/* ───── 首页 ───── */
.pbk-newcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; margin-top: 10px; border-radius: 16px; border: 2px dashed rgba(232, 176, 75, .45); background: var(--bg-white); cursor: pointer; color: var(--text-secondary); text-align: center; }
.pbk-newcard:hover, .pbk-newcard.over { border-color: var(--accent); background: var(--primary-light); }
.pbk-newcard i { font-size: 28px; color: var(--accent); }
.pbk-newcard b { color: var(--strong); font-size: 15px; }
.pbk-newcard span { font-size: 12px; color: var(--text-hint); }
.pbk-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pbk-flt { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.pbk-flt.on { color: var(--accent); border-color: rgba(232, 176, 75, .5); background: var(--primary-light); }
.pbk-flt em { font-style: normal; font-size: 11px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #1a1206; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.pbk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pbk-card { display: flex; gap: 12px; padding: 10px; border-radius: 14px; background: var(--bg-white); border: 1px solid var(--border); min-width: 0; }
.pbk-card.legacy { border-style: dashed; }
.pbk-cover { position: relative; flex: 0 0 120px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-warm); display: flex; align-items: center; justify-content: center; color: var(--text-hint); cursor: pointer; }
.pbk-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbk-cover .pbk-tag { position: absolute; left: 6px; top: 6px; }
.pbk-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pbk-ctitle { color: var(--strong); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbk-cmeta { font-size: 12px; color: var(--text-hint); }
.pbk-cstat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pbk-cstat em { font-style: normal; color: var(--text-hint); }
.pbk-cacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pbk-empty-home { padding: 30px 16px; text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pbk-empty-home i { font-size: 30px; color: var(--text-hint); }
.pbk-empty-home ol { text-align: left; margin: 6px 0; padding-left: 20px; line-height: 1.9; }

/* ───── 新建 ───── */
.pbk-new { display: grid; grid-template-columns: 62fr 38fr; gap: 16px; align-items: start; }
.pbk-new-l, .pbk-new-r { min-width: 0; }
.pbk-settings { position: sticky; top: 8px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 14px; padding: 6px 14px; max-height: calc(100vh - 140px); overflow: auto; }
.pbk-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border-radius: 14px; border: 2px dashed var(--border); background: var(--bg-white); cursor: pointer; text-align: center; color: var(--text-secondary); }
.pbk-drop:hover, .pbk-drop.over { border-color: var(--accent); background: var(--primary-light); }
.pbk-drop i { font-size: 24px; color: var(--accent); }
.pbk-drop b { color: var(--strong); }
.pbk-drop span { font-size: 12px; color: var(--text-hint); }
.pbk-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.pbk-pg { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); min-width: 0; }
.pbk-pg.merged { opacity: .7; border-style: dashed; }
.pbk-pg.err { border-color: rgba(224, 123, 99, .45); }
.pbk-pg.dragging { opacity: .5; }
.pbk-pg.over { border-color: var(--accent); }
.pbk-pgthumb { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--bg-warm); display: flex; align-items: center; justify-content: center; color: var(--text-hint); }
.pbk-pgthumb img { width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--rot, 0deg)); }
.pbk-pgpct { position: absolute; inset: auto 0 0 0; padding: 3px; font-size: 11px; text-align: center; background: rgba(0, 0, 0, .6); color: #fff; }
.pbk-pgok { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(77, 191, 168, .9); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.pbk-anim { position: absolute; left: 6px; bottom: 6px; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pbk-pglab { display: flex; flex-direction: column; min-width: 0; }
.pbk-pglab b { font-size: 13px; color: var(--strong); }
.pbk-pglab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbk-pghint { font-size: 11.5px; color: var(--accent); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pbk-pghint.red { color: var(--danger); }
.pbk-pgacts { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.pbk-pgacts .pbk-ic { width: 28px; height: 28px; }
.pbk-stylepick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-stylepick img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; }
.pbk-stylepick > i { width: 64px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-warm); color: var(--text-hint); }
.pbk-stylepick b { color: var(--strong); font-size: 13px; }
.pbk-adv summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); padding: 8px 0; }
.pbk-newfoot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--bg-white); border: 1px solid var(--border); }
.pbk-newest { flex: 1 1 260px; font-size: 13px; color: var(--text-secondary); }
.pbk-newest b { color: var(--strong); }
.pbk-errs { margin: 6px 0 0; padding-left: 18px; color: var(--danger); font-size: 12.5px; line-height: 1.7; }
.pbk-newfoot .pbk-acts { display: flex; gap: 8px; margin-left: auto; }

/* ───── 原文与朗读 ───── */
.pbk-safety { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; border: 1px solid var(--border); background: var(--bg-warm); }
.pbk-safety.ok { color: var(--success); border-color: rgba(77, 191, 168, .35); }
.pbk-safety.warn { color: var(--text); background: var(--primary-light); border-color: rgba(232, 176, 75, .35); }
.pbk-safety.warn > i { color: var(--accent); }
.pbk-safety.block { color: var(--danger); background: rgba(224, 123, 99, .1); border-color: rgba(224, 123, 99, .4); }
.pbk-safety span { flex: 1 1 200px; }
.pbk-progress { padding: 10px 12px; border-radius: 10px; background: var(--bg-white); border: 1px solid var(--border); margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pbk-progress .pbk-bar { flex: 0 0 auto; width: 100%; }
.pbk-subs { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.pbk-text3 { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.pbk-plist { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 8px; }
.pbk-plist .pbk-flt { align-self: flex-start; margin-bottom: 4px; }
.pbk-pitem { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; text-align: left; min-height: 34px; }
.pbk-pitem:hover { background: var(--bg-warm); }
.pbk-pitem.cur { background: var(--bg-white); border-color: var(--accent); }
.pbk-pitem em { font-style: normal; margin-left: auto; font-size: 11px; color: var(--text-hint); }
.pbk-pitem .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--text-hint); }
.pbk-pitem .dot.ok { background: var(--success); }
.pbk-pitem .dot.doubt { background: var(--accent); }
.pbk-pitem .dot.todo { background: transparent; border: 2px solid var(--text-hint); }
.pbk-pitem .dot.error, .pbk-pitem .dot.photo { background: var(--danger); }
.pbk-pitem .dot.skip { background: transparent; border: 2px dashed var(--text-hint); }
.pbk-pitem .dot.wait { background: var(--accent); opacity: .5; }
.pbk-pimg { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; }
.pbk-pimg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--strong); }
.pbk-pimg-b { position: relative; border-radius: 10px; overflow: hidden; background: var(--bg-warm); border: 1px solid var(--border); min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--text-hint); }
.pbk-pimg-b img { display: block; width: 100%; height: auto; }
.pbk-box { position: absolute; border: 2px solid rgba(232, 176, 75, .8); border-radius: 3px; pointer-events: auto; }
.pbk-box.text { border-color: rgba(77, 191, 168, .85); border-style: dashed; }
.pbk-box.prop { border-color: rgba(224, 123, 99, .85); }
.pbk-ledger { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); }
.pbk-ledger .pbk-lrow { margin: 0 0 4px; }
.pbk-lines { display: flex; flex-direction: column; gap: 10px; }
.pbk-text .pbk-line { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; background: var(--bg-warm); border: 1px solid var(--border); }
.pbk-lhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-lhead em { font-style: normal; font-size: 11px; color: var(--text-hint); width: 18px; }
.pbk-ltext { width: 100%; resize: vertical; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--strong); font-size: 15px; line-height: 1.7; padding: 4px 6px; font-family: inherit; outline: none; }
.pbk-ltext:focus { border-color: rgba(232, 176, 75, .55); background: var(--bg-white); }
.pbk-lmenu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 4px; border-top: 1px dashed var(--border); }
.pbk-lwarn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; background: var(--primary-light); border: 1px solid rgba(232, 176, 75, .3); color: var(--text); }
.pbk-lwarn > i { color: var(--accent); }
.pbk-lwarn.ok { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.pbk-lwarn.ok > i { color: var(--success); }
.pbk-lwarn span { flex: 1 1 160px; }
.pbk-lwarn em { font-style: normal; color: var(--text-hint); margin-left: 6px; }
.pbk-lwarn em.red { color: var(--danger); }
.pbk-lwarn mark { background: rgba(232, 176, 75, .45); color: var(--strong); padding: 0 2px; border-radius: 3px; }
.pbk-lwarn .pbk-btn.on { border-color: var(--accent); color: var(--accent); }
.pbk-prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); padding-top: 6px; border-top: 1px dashed var(--border); }

/* ───── 清单 ───── */
.pbk-conflict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--primary-light); border: 1px solid rgba(232, 176, 75, .4); margin-bottom: 10px; font-size: 13px; }
.pbk-conflict > i { color: var(--accent); font-size: 18px; }
.pbk-conflict b { color: var(--strong); display: block; }
.pbk-conflict b em { font-style: normal; color: var(--text-hint); font-weight: 400; margin-left: 4px; }
.pbk-crops2 { display: flex; gap: 6px; margin: 6px 0; }
.pbk-crops2 img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--bg-warm); }
.pbk-ctabs { display: none; margin-bottom: 10px; }
.pbk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pbk-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pbk-colh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pbk-colh b { color: var(--strong); font-size: 14px; }
.pbk-acard { display: flex; flex-direction: column; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); overflow: hidden; }
.pbk-crop { position: relative; aspect-ratio: 4 / 3; background: var(--bg-warm); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-hint); font-size: 24px; }
.pbk-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pbk-crop .pbk-ic { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .5); color: #fff; }
.pbk-crop .pbk-ic.l { left: 6px; }
.pbk-crop .pbk-ic.r { right: 6px; }
.pbk-crop em { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: #fff; }
.pbk-abody { display: flex; flex-direction: column; gap: 5px; padding: 10px; font-size: 12.5px; }
.pbk-ahead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-ahead b { color: var(--strong); font-size: 15px; }
.pbk-lock summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); padding: 4px 0; }
.pbk-lock dl { display: grid; grid-template-columns: 56px 1fr; gap: 4px 8px; margin: 4px 0; font-size: 12.5px; }
.pbk-lock dt { color: var(--text-hint); }
.pbk-lock dd { margin: 0; color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pbk-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .25); vertical-align: -2px; margin-right: 2px; }
.pbk-lay { display: grid; grid-template-columns: 36px 1fr; gap: 2px 8px; margin: 2px 0; font-size: 12px; }
.pbk-lay dt { color: var(--text-hint); }
.pbk-lay dd { margin: 0; color: var(--text); }
.pbk-aacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pbk-textonly { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.pbk-tochip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pbk-tochip b { color: var(--strong); }

/* ───── 教学建议 ───── */
.pbk-teach .pbk-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pbk-teach section { padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); font-size: 13px; }
.pbk-teach h4 { margin: 0 0 6px; font-size: 13px; color: var(--accent); }
.pbk-teach ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.pbk-words { display: flex; gap: 6px; flex-wrap: wrap; }
.pbk-words span { padding: 3px 9px; border-radius: 999px; background: var(--primary-light); color: var(--accent); font-size: 13px; }

/* ───── 已建书的 step1 ───── */
.pbk-step1 .pbk-pg.done .pbk-pgthumb img { transform: none; }

/* ───── 校正弹层 ───── */
.pbk-quad { margin: 8px 0; }
.pbk-qstage { width: 100%; padding: 14px; background: #000; border-radius: 10px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.pbk-qwrap { position: relative; display: inline-block; max-width: 100%; min-width: 60%; min-height: 80px; line-height: 0; }   /* 图还没加载时也给手柄一个有大小的舞台 */
.pbk-qwrap img, .pbk-qwrap canvas { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; }
.pbk-qsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pbk-qsvg polygon { fill: rgba(232, 176, 75, .18); stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pbk-qsvg line.spine { stroke: #4dbfa8; stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.pbk-qh { fill: rgba(232, 176, 75, .9); stroke: #fff; stroke-width: 2; cursor: grab; vector-effect: non-scaling-stroke; }
.pbk-qh.spine { fill: rgba(77, 191, 168, .9); }

/* ───── 教育设置 ───── */
.pbk-edu.in-page .pbk-ebody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pbk-esec { padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); font-size: 13px; min-width: 0; }
.pbk-edu.in-drawer .pbk-esec { margin-bottom: 10px; }
.pbk-esec h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-esec h4 i { color: var(--accent); }
.pbk-esec .pbk-opt { padding: 6px 0; }
.pbk-qgrp { margin-top: 8px; }
.pbk-qgrp .pbk-lrow { margin: 6px 0; }
.pbk-q { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-warm); margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.pbk-q.focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 176, 75, .3); }
.pbk-qrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-qrow b { color: var(--strong); }
.pbk-qerr { color: var(--danger); font-size: 12px; }
.pbk-qopts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-left: 24px; }
.pbk-qopt { display: inline-flex; align-items: center; gap: 4px; }
.pbk-chips-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.pbk-credit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.pbk-efoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0, 0, 0, .25); font-size: 13px; }
.pbk-efoot-l { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.pbk-efoot-l b { color: var(--strong); }
.pbk-efoot .pbk-impact { margin: 0; }
.pbk-efoot .pbk-note { margin: 0; }
.pbk-edu.in-drawer .pbk-efoot { margin: 0 -18px -24px; border-radius: 0; }

/* ───── 窄屏(1100 / 900 / 720 / 640) ───── */
@media (max-width: 1100px) {
    .pbk-text3 { grid-template-columns: 1fr; }
    .pbk-plist { position: static; flex-direction: row; flex-wrap: wrap; }
    .pbk-plist .pbk-flt { margin: 0; }
    .pbk-pitem { padding: 5px 8px; }
    .pbk-pimg { position: static; }
    .pbk-dpanel { width: 100%; }
    .pbk-edu.in-page .pbk-ebody { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .pbk-steps { display: none; }
    .pbk-steps-sel { display: flex; }
    .pbk-ctabs { display: inline-flex; }
    .pbk-cols { grid-template-columns: 1fr; }
    .pbk-cols .pbk-col { display: none; }
    .pbk-cols[data-col="character"] .pbk-col[data-k="character"], .pbk-cols[data-col="scene"] .pbk-col[data-k="scene"], .pbk-cols[data-col="prop"] .pbk-col[data-k="prop"] { display: flex; }
    .pbk-new { grid-template-columns: 1fr; }
    .pbk-settings { position: static; max-height: none; }
    .pbk .pbk-foot { left: 0; }
    .pbk-ttl b { max-width: 50vw; }
}
@media (max-width: 720px) {
    .pbk-hero-act { position: static; transform: none; margin-top: 6px; }
    .pbk-cards { grid-template-columns: 1fr; }
    .pbk-mbox { padding: 14px; }
    .pbk-dbody { padding: 14px; }
    .pbk-edu.in-drawer .pbk-efoot { margin: 0 -14px -14px; }
    .pbk-olab { flex-basis: 100%; }
    .pbk-ic.danger, .pbk-btn.danger { opacity: 1; }
}
@media (max-width: 640px) {
    .pbk .pbk-foot { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
    .pbk-check { display: none; }
    .pbk-check-n { display: inline-flex; flex: 0 0 auto; }
    .pbk-next { flex: 1 1 0; min-width: 0; }
    .pbk-next .pbk-next-l, .pbk-next b, .pbk-next .pbk-dim { display: none; }
    .pbk-costb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
    .pbk .pbk-foot .pbk-acts { margin-left: auto; flex: 0 0 auto; }
    .pbk .pbk-foot .pbk-acts .pbk-btn:not(.primary) { display: none; }
    .pbk .pbk-foot .pbk-acts .pbk-btn.primary { padding: 7px 12px; }
    .pbk-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pbk-pg .grip { display: none; }
    .pbk-card { flex-direction: column; }
    .pbk-cover { flex-basis: auto; width: 100%; }
    .pbk-ttl b { max-width: 42vw; font-size: 14px; }
    .pbk-cost { font-size: 11.5px; padding: 4px 9px; }
    .pbk-credit { grid-template-columns: 1fr; }
    .pbk-kpis { grid-template-columns: 1fr 1fr; }
    /* 点击区 ≥ 34px(spec §2.12):按钮、下拉、文字链接一律加高;步骤条按钮本身就够高 */
    .pbk-ic { width: 34px; height: 34px; }
    .pbk button:not(.pbk-step), .pbk select, .pbk .pbk-lnk, .pbk .pbk-flt, .pbk .pbk-chip.lnk, .pbk .pbk-seg button, .pbk .pbk-radio { min-height: 34px; }
    .pbk .pbk-lnk, .pbk .pbk-chip.lnk { display: inline-flex; align-items: center; }
    .pbk-sel.xs, .pbk-inp.xs { padding-top: 6px; padding-bottom: 6px; }
}
@media (pointer: coarse) {
    .pbk-ic, .pbk-btn.sm, .pbk-pitem, .pbk-flt, .pbk-seg button { min-height: 34px; }
    .pbk-ic.grip { display: none; }
}