:root { --fb-bg:#f5f6f8; --fb-card:#fff; --fb-muted:#6c757d; }
body { background:var(--fb-bg); color:#212529; }
.navbar-brand { letter-spacing:.02em; }
.page-title { font-size:1.75rem; font-weight:700; }
.card { border:0; box-shadow:0 2px 14px rgba(0,0,0,.045); }
.metric { font-size:2rem; font-weight:700; line-height:1; }
.book-card .progress { height:7px; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.photo-card { overflow:hidden; }
.photo-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#e9ecef; }
.page-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:1rem; }
.page-tile { aspect-ratio:148/210; background:#fff; border:1px solid #dee2e6; border-radius:.45rem; position:relative; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.page-tile .page-no { position:absolute; left:.45rem; top:.35rem; font-size:.75rem; color:#6c757d; }
.drop-zone { border:2px dashed #adb5bd; border-radius:.75rem; padding:2rem; text-align:center; background:#fff; transition:.2s ease; cursor:pointer; }
.drop-zone.dragover { border-color:#212529; background:#f8f9fa; }
.small-muted { color:var(--fb-muted); font-size:.9rem; }