/* 加入书架设置页（O-16）样式：左侧配置（弹窗设置 + 自动加入阈值 + 版本历史） + 右侧实时预览。
   styles.css 已超行数上限（棘轮只许缩小），新样式不写进 styles.css（先例 ops-recharge.css / ops-activity.css）。
   用户 2026-09-22 飞书需求；结构见 docs/产品规格.md §9.9。类名统一 .oc .bs-*，复用 .oc-card / .fld 体系。 */

/* 页头右侧：未保存标记 + 当前版本 */
.oc .bs-head-actions { display: flex; align-items: center; gap: 8px; }
.oc .bs-dirty { font-size: 11px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 3px 8px; }
.oc .bs-version { font-size: 11px; color: #64748b; }

/* 诚实边界提示条（配置已保存 · 前台待接线）与未装载/失败空态 */
.oc .bs-note { padding: 14px 16px; margin-bottom: 12px; font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; line-height: 1.7; }
.oc .bs-gap { padding: 14px 16px; margin-bottom: 12px; font-size: 12.5px; color: #6b7280; background: #fff; border: 1px solid #eef0f3; border-radius: 8px; line-height: 1.7; }

/* 双栏：左配置 + 右实时预览 */
.oc .bs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .oc .bs-layout { grid-template-columns: minmax(0, 1fr); } }
.oc .bs-config { min-width: 0; }
.oc .bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 12px 14px; }
@media (max-width: 720px) { .oc .bs-grid { grid-template-columns: minmax(0, 1fr); } }
.oc .bs-grid .fld-wide { grid-column: 1 / -1; }

/* 区块开关（弹窗设置 / 自动加入书架） */
.oc .bs-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11.5px; color: #475569; cursor: pointer; }
.oc .bs-switch input { width: 14px; height: 14px; accent-color: #0891b2; cursor: pointer; }

.oc .bs-hint { padding: 0 14px 10px; font-size: 11px; color: #94a3b8; }
.oc .bs-err { padding: 0 14px 12px; font-size: 11.5px; color: #b91c1c; }

/* 版本历史 */
.oc .bs-history { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.oc .bs-history-row { display: grid; grid-template-columns: 52px 120px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 8px; border: 1px solid #eef0f4; border-radius: 6px; background: #fafbfc; font-size: 11.5px; }
.oc .bs-hv { font-weight: 700; color: #0f766e; }
.oc .bs-ho { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc .bs-hr { color: #64748b; }

/* 右栏实时预览：只用本页配置渲染，不代表线上已生效 */
.oc .bs-preview { position: sticky; top: 72px; }
.oc .bs-preview-title { font-size: 12px; font-weight: 700; color: #6b7280; letter-spacing: .5px; margin-bottom: 10px; }
.oc .bs-preview-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #64748b; line-height: 1.7; }
.oc .bs-phone { max-width: 300px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #4338ca, #7c3aed); color: #fff; box-shadow: 0 10px 30px rgba(67, 56, 202, .25); }
.oc .bs-phone-bar { text-align: center; padding: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; background: rgba(255, 255, 255, .12); }
.oc .bs-phone-body { position: relative; padding: 18px 16px 24px; min-height: 210px; }
.oc .bs-book { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oc .bs-book-cover { width: 96px; height: 128px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .16); }
.oc .bs-book-empty { display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255, 255, 255, .7); border: 1px dashed rgba(255, 255, 255, .35); }
.oc .bs-book-title { font-size: 12.5px; font-weight: 600; text-align: center; }

/* 推荐弹窗预览 */
.oc .bs-popup { margin-top: 16px; padding: 12px; border-radius: 10px; background: #fff; color: #1f2937; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); }
.oc .bs-popup-off { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); text-align: center; font-size: 11.5px; box-shadow: none; }
.oc .bs-popup-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.oc .bs-popup-content { font-size: 11.5px; color: #4b5563; line-height: 1.7; }
.oc .bs-popup-btns { display: flex; gap: 8px; margin-top: 12px; }
.oc .bs-popup-primary { flex: 1; text-align: center; padding: 7px; border-radius: 7px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; font-size: 12px; font-weight: 700; }
.oc .bs-popup-secondary { flex: 1; text-align: center; padding: 7px; border-radius: 7px; background: #f1f5f9; color: #475569; font-size: 12px; }

/* 底部动作条 */
/* 页脚「取消 / 保存配置」：本页页脚是页面最后一个元素、又右对齐 ⇒ 滚到底时正好落在右下角，
   而右下角是标注/验收两颗固定开关的固定位置（.anno-toggle bottom:18 / .acc-toggle bottom:62 /
   .acc-legend bottom:104，见 styles.css「研发自查工具」节，用户要求入口不得收掉）。
   这里给页脚留出底部空隙，滚到底时按钮仍在开关之上，标注时点得到（2026-09-22 冒烟实测被盖住）。 */
.oc .bs-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 4px 0 112px; }