/* ============================================================
   绘本动画 · 资产图看板 / 资产详情抽屉 / 从原书框选 / 制作风格(js/picbook-assets.js)
   pbk- 前缀,组件类再加 pbk-as-;基础件(按钮 / 输入框 / 徽标 / 抽屉 / 弹层)沿用 css/picbook.css
   断点沿用 1100 / 900 / 720 / 640;375 宽无横向滚动
   ============================================================ */

/* ── 看板 ── */
.pbk-as-board { display: flex; flex-direction: column; gap: 14px; }
.pbk-as-group { background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); border-radius: 12px; padding: 12px 14px; }
.pbk-as-ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pbk-as-ghead h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text, #23262e); }
.pbk-as-ghead .pbk-dim { font-size: 12px; }
.pbk-as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pbk-as-grid.sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pbk-as-card { position: relative; border: 1px solid var(--border, #e8e2d6); border-radius: 10px; background: var(--bg-warm, #faf7f2); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.pbk-as-card.sel { outline: 2px solid var(--primary, #c8791f); }
.pbk-as-card.flagged, .pbk-as-card.failed, .pbk-as-card.fail { border-color: #e5a29a; }
.pbk-as-card.running, .pbk-as-card.pending { border-style: dashed; }
.pbk-as-card.textonly { background: var(--bg-white, #fff); }
.pbk-as-sel { position: absolute; left: 8px; top: 8px; z-index: 2; background: rgba(255, 255, 255, .85); border-radius: 6px; padding: 2px 4px; line-height: 0; }
.pbk-as-sel input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.pbk-as-cardimg { cursor: pointer; }
.pbk-as-pair { position: relative; aspect-ratio: 16 / 10; background: #ece6dc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pbk-as-pair img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pbk-as-pair.nogen img { object-fit: cover; }
.pbk-as-flip { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: rgba(35, 38, 46, .72); color: #fff; border-radius: 999px; padding: 2px 6px; font-size: 11px; white-space: nowrap; }
.pbk-as-flip button { border: 0; background: transparent; color: #ddd; font-size: 11px; padding: 2px 6px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.pbk-as-flip button.on { background: #fff; color: #23262e; font-weight: 600; }
.pbk-as-flip b { font-weight: 400; }
.pbk-as-ph { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 64px; font-size: 12.5px; color: var(--text-hint, #9aa0ac); text-align: center; padding: 8px; box-sizing: border-box; }
.pbk-as-ph.big { min-height: 220px; font-size: 13.5px; }
.pbk-as-ph.run { color: var(--primary, #c8791f); }
.pbk-as-ph.bad { color: var(--danger, #d4483b); }
.pbk-as-ph.warn { color: #b26a00; }
.pbk-as-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; min-width: 0; }
.pbk-as-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-as-name b { font-size: 14px; cursor: pointer; }
.pbk-as-role { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--primary-light, #f6ecd9); color: var(--primary, #c8791f); white-space: nowrap; }
.pbk-as-role.main { background: #fde8c8; color: #9a5b00; }
.pbk-as-role.minor, .pbk-as-role.mute { background: #eceae6; color: var(--text-secondary, #6b7280); }
.pbk-as-role.lock { background: #e7eef9; color: #3b5ea8; }
.pbk-as-role.stale { background: #fff3d6; color: #b26a00; }
.pbk-as-role.teach { background: #e6f4ea; color: #2b7a3d; }
.pbk-as-qcl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbk-as-qc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #eceae6; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.pbk-as-qc.ok { background: #e6f4ea; color: #2b7a3d; }
.pbk-as-qc.warn { background: #fff3d6; color: #b26a00; }
.pbk-as-qc.bad { background: #fde3df; color: var(--danger, #d4483b); }
.pbk-as-qc.run { background: var(--primary-light, #f6ecd9); color: var(--primary, #c8791f); }
.pbk-as-issue { color: var(--danger, #d4483b); font-style: normal; font-size: 12px; }
.pbk-as-issue.warn { color: #b26a00; }
.pbk-as-views { display: flex; gap: 3px; flex-wrap: wrap; }
.pbk-as-views img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border, #e8e2d6); background: #fff; }
.pbk-as-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pbk-as-acts.wrap { margin-top: 6px; }
.pbk-as-tip { display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; background: var(--bg-warm, #faf7f2); border: 1px solid var(--border, #e8e2d6); }
.pbk-as-tip.bad { background: #fdf1ef; border-color: #f0c4bd; color: #8b2a21; }
.pbk-as-tip i { margin-top: 2px; }
.pbk-as-selbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff8ea; border: 1px solid #f1d7a8; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.pbk-as-selbar label { display: inline-flex; align-items: center; gap: 4px; }
.pbk-as-warn { color: var(--danger, #d4483b); }
.pbk-as-lineup { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.pbk-as-lineup > img { max-width: 420px; width: 100%; border-radius: 8px; border: 1px solid var(--border, #e8e2d6); background: #fff; }
.pbk-as-bars { display: flex; gap: 18px; align-items: flex-end; min-height: 160px; padding: 0 6px; }
.pbk-as-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 160px; width: 72px; }
.pbk-as-bar i { display: block; width: 26px; background: linear-gradient(180deg, var(--primary, #c8791f), #e4a85c); border-radius: 6px 6px 2px 2px; transition: height .12s; min-height: 6px; }
.pbk-as-bar b { font-size: 12px; font-weight: 600; }
.pbk-as-bar input[type=range] { width: 72px; }

/* ── 详情抽屉 ── */
.pbk-as-drawer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 8px; }
.pbk-as-drawer > section { min-width: 0; }
.pbk-as-dimg { grid-column: 1; }
.pbk-as-dver { grid-column: 2; grid-row: 1; }
.pbk-as-dset { grid-column: 1 / -1; border-top: 1px solid var(--border, #e8e2d6); padding-top: 10px; }
.pbk-as-drawer h5, .pbk-as-dev h5 { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbk-as-drawer h5 .pbk-switch { margin-left: auto; }
.pbk-as-vchips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.pbk-as-vchip { 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-as-vchip.on { background: var(--primary, #c8791f); border-color: var(--primary, #c8791f); color: #fff; }
.pbk-as-stage { background: #ece6dc; border-radius: 10px; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pbk-as-main { max-width: 100%; max-height: 380px; display: block; object-fit: contain; }
.pbk-as-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; padding: 6px; box-sizing: border-box; }
.pbk-as-cmp.sm { padding: 0; cursor: pointer; }
.pbk-as-cmp figure { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pbk-as-cmp img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.pbk-as-cmp figcaption { font-size: 11.5px; color: var(--text-secondary, #6b7280); text-align: center; }
.pbk-as-expr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; padding: 6px; box-sizing: border-box; }
.pbk-as-expr figure { margin: 0; }
.pbk-as-expr img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #fff; display: block; }
.pbk-as-expr figcaption { font-size: 11.5px; text-align: center; color: var(--text-secondary, #6b7280); }
.pbk-as-redraw { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pbk-as-redraw label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-secondary, #6b7280); }
.pbk-as-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pbk-as-ver { border: 1px solid var(--border, #e8e2d6); border-radius: 8px; padding: 5px; background: var(--bg-white, #fff); display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.pbk-as-ver.cur { border-color: var(--primary, #c8791f); box-shadow: 0 0 0 2px rgba(200, 121, 31, .15); }
.pbk-as-ver img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: #ece6dc; display: block; }
.pbk-as-vmeta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--text-secondary, #6b7280); }
.pbk-as-vmeta b { color: var(--primary, #c8791f); }
.pbk-as-vmeta .fa-star.on { color: #e0a800; }
.pbk-as-vacts { display: flex; gap: 3px; flex-wrap: wrap; }
.pbk-btn.xs { padding: 2px 7px; font-size: 11px; border-radius: 6px; }
.pbk-as-f { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; margin-bottom: 8px; }
.pbk-as-f > span { color: var(--text-secondary, #6b7280); font-size: 12px; }
.pbk-as-f .pbk-inp.sm { max-width: 120px; }
.pbk-as-flock { border: 1px dashed var(--border, #e8e2d6); border-radius: 10px; padding: 8px 10px 2px; margin-bottom: 8px; }
.pbk-as-flock h6 { margin: 0 0 6px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.pbk-as-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.pbk-as-color { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg-white, #fff); border: 1px solid var(--border, #e8e2d6); }
.pbk-as-color i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
.pbk-as-dev { margin-top: 12px; }
.pbk-as-crops { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pbk-as-crops figure { margin: 0; flex: 0 0 auto; width: 96px; text-align: center; }
.pbk-as-crops img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #e8e2d6); background: #fff; display: block; }
.pbk-as-crops figcaption { font-size: 11px; color: var(--text-secondary, #6b7280); margin-top: 2px; }
.pbk-as-dfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border, #e8e2d6); }

/* ── 从原书框选 ── */
.pbk-as-rpages { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; }
.pbk-as-rpages button { flex: 0 0 auto; border: 2px solid transparent; background: var(--bg-warm, #faf7f2); border-radius: 8px; padding: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit; }
.pbk-as-rpages button.has { border-color: var(--primary-light, #f6ecd9); }
.pbk-as-rpages button.on { border-color: var(--primary, #c8791f); }
.pbk-as-rpages img { width: 64px; height: 64px; object-fit: cover; border-radius: 5px; display: block; }
.pbk-as-rpages span { font-size: 11px; color: var(--text-secondary, #6b7280); }
.pbk-as-rcanvas { position: relative; user-select: none; -webkit-user-select: none; touch-action: none; cursor: crosshair; background: #ece6dc; border-radius: 10px; overflow: hidden; line-height: 0; }
.pbk-as-rcanvas img { width: 100%; max-height: 60vh; object-fit: contain; display: block; pointer-events: none; }
.pbk-as-rbox { position: absolute; border: 2px solid var(--primary, #c8791f); background: rgba(200, 121, 31, .18); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25); pointer-events: none; }
.pbk-as-rhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(35, 38, 46, .7); color: #fff; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; line-height: 1.4; pointer-events: none; }

/* ── 制作风格 ── */
.pbk-as-stylepage { display: flex; flex-direction: column; gap: 14px; }
.pbk-as-profile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; }
.pbk-as-profile > span { display: inline-flex; align-items: center; gap: 5px; }
.pbk-as-profile em { font-style: normal; color: var(--text-secondary, #6b7280); }
.pbk-as-profile.edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pbk-as-profile.edit label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-secondary, #6b7280); }
.pbk-as-profile.edit .pbk-row { grid-column: 1 / -1; }
.pbk-as-pal { display: inline-flex; gap: 3px; }
.pbk-as-pal b { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); display: inline-block; }
.pbk-as-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pbk-as-style { border: 2px solid var(--border, #e8e2d6); border-radius: 12px; background: var(--bg-white, #fff); padding: 6px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; color: var(--text, #23262e); min-width: 0; }
.pbk-as-style:hover { border-color: var(--primary-light, #f6ecd9); }
.pbk-as-style.on { border-color: var(--primary, #c8791f); box-shadow: 0 0 0 3px rgba(200, 121, 31, .14); }
.pbk-as-style img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: #ece6dc; display: block; }
.pbk-as-style .pbk-as-ph { aspect-ratio: 16 / 10; background: #ece6dc; border-radius: 8px; }
.pbk-as-style b { font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.pbk-as-style span { font-size: 12px; color: var(--text-secondary, #6b7280); line-height: 1.4; }
.pbk-as-style small { font-size: 11px; color: var(--text-hint, #9aa0ac); line-height: 1.4; }
.pbk-as-style .pbk-as-risk { color: #b26a00; }
.pbk-as-rec { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: var(--primary-light, #f6ecd9); color: var(--primary, #c8791f); font-weight: 600; }
.pbk-as-anchor { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 8px; border-radius: 10px; background: #e6f4ea; }
.pbk-as-anchor img { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.pbk-as-anchor b { display: block; font-size: 13px; color: #2b7a3d; }
.pbk-as-trials { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pbk-as-trial { border: 1px solid var(--border, #e8e2d6); border-radius: 10px; padding: 8px; background: var(--bg-warm, #faf7f2); display: flex; flex-direction: column; gap: 8px; }
.pbk-as-trial.on { border-color: #7bbf8a; }
.pbk-as-adapt { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff8ea; border: 1px solid #f1d7a8; font-size: 12.5px; line-height: 1.6; cursor: pointer; }
.pbk-as-adapt.ok { background: #e6f4ea; border-color: #bfe3c8; }
.pbk-as-adapt input { margin-top: 4px; }
.pbk-as-adapt u { text-decoration: none; font-weight: 600; }

/* ── 窄屏 ── */
@media (max-width: 900px) {
    .pbk-as-drawer { grid-template-columns: 1fr; }
    .pbk-as-dimg, .pbk-as-dver, .pbk-as-dset { grid-column: 1; grid-row: auto; }
    .pbk-as-lineup > img { max-width: 100%; }
}
@media (max-width: 640px) {
    .pbk-as-group { padding: 10px; border-radius: 10px; }
    .pbk-as-grid, .pbk-as-grid.sm { grid-template-columns: 1fr 1fr; }
    .pbk-as-styles { grid-template-columns: 1fr 1fr; }
    .pbk-as-trials { grid-template-columns: 1fr; }
    .pbk-as-expr { grid-template-columns: repeat(4, 1fr); }
    .pbk-as-vgrid { grid-template-columns: 1fr 1fr; }
    .pbk-as-bars { gap: 10px; }
    .pbk-as-bar { width: 56px; }
    .pbk-as-bar input[type=range] { width: 56px; }
    .pbk-as-acts .pbk-btn, .pbk-as-vacts .pbk-btn { min-height: 34px; }
    .pbk-as-selbar { position: static; }
}
@media (hover: none) {
    .pbk-as-dfoot .danger, .pbk-as-vacts .danger { display: inline-flex; }
}