#shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* Smaller cards on mobile to fit 6 visible per screen and 16 per page */
@media (max-width: 680px){
  #shelves{ grid-template-columns:repeat(3, 1fr); gap:6px; }
  .book-card .meta{ padding:4px 6px; min-height:32px; }
  .book-card .title{ font-size:11px; -webkit-line-clamp:2; }
  .book-card .authors{ font-size:10px; }
}
.book-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.book-card img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--image-bg)}
.book-card .meta{padding:8px 10px;min-height:56px}
.book-card .title{font-size:14px;line-height:1.3;font-weight:600;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-card .authors{font-size:12px;line-height:1.2;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-state{opacity:.7;text-align:center;padding:36px;border:1px dashed var(--border);border-radius:10px}

/* Ensure shelves grid fills the available height and cards scale nicely */
#shelves{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-content:start; }
/* Series label inside card */
.book-card .series{ font-size:11px; color: var(--muted); margin: -2px 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Series divider: subtle spacing and dot leader */
#shelves .series-divider{ grid-column: 1 / -1; display:flex; align-items:center; gap:8px; opacity:0.7; margin:8px 2px; }
#shelves .series-divider .dot{ width:4px; height:4px; background:var(--border); border-radius:50%; box-shadow: 8px 0 0 var(--border), 16px 0 0 var(--border); }
#shelves .series-divider .label{ font-size:12px; color: var(--muted); }

/* Decorative series divider aligns better within grid rows on small screens */
@media (max-width: 520px){
  #shelves .series-divider{ margin:6px 0; }
}

/* Final mobile override: ensure 3 columns so ~6 books are visible */
@media (max-width: 680px){
  #shelves{ grid-template-columns: repeat(3, 1fr) !important; gap:6px !important; }
  .book-card .meta{ padding:4px 6px; min-height:32px; }
  .book-card .title{ font-size:11px; -webkit-line-clamp:2; }
  .book-card .authors{ font-size:10px; }
}