.bfb-wrap{ margin:12px auto; background:#fff; font-family: Arial, sans-serif; }
.bfb-toolbar{ display:flex; justify-content:space-between; align-items:center; padding:8px; border-bottom:1px solid #eee; background:#fff; }
.bfb-btn{ padding:6px 8px; border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer; }
.bfb-viewer{ padding:12px; background:#fafafa; min-height:480px; position:relative; }
.bfb-spread{ display:flex; gap:12px; justify-content:center; align-items:flex-start; }
.bfb-page{ width:420px; min-height:560px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.06); border-radius:4px; overflow:hidden; display:flex; justify-content:center; align-items:center; }
.bfb-thumbs,.bfb-outline{ position:absolute; top:60px; max-height:60%; overflow:auto; background:#fff; border:1px solid #e6e6e6; padding:6px; display:none; z-index:50; }
.bfb-thumbs{ left:10px; width:110px; }
.bfb-outline{ right:10px; width:180px; }
.bfb-status{ padding:8px; color:#333; }
@media (max-width:800px){ .bfb-spread{ flex-direction:column; } .bfb-page{ width:92%; } .bfb-thumbs,.bfb-outline{ display:none; } }