/* ========== BOOKS PAGE ========== */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.book-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.2s;
}
.book-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.book-emoji { font-size: 36px; margin-bottom: 12px; }
.book-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.book-author { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.book-progress-bar {
  height: 4px; background: var(--surface3); border-radius: 2px;
  overflow: hidden; margin-bottom: 8px;
}
.book-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.book-progress-text { font-size: 11px; color: var(--text-dim); }
.book-status-chip {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; margin-top: 8px;
}
.book-status-chip.reading { background: var(--primary-dim); color: var(--primary); }
.book-status-chip.completed { background: var(--success-dim); color: var(--success); }
.book-status-chip.queued { background: rgba(107,114,128,0.15); color: var(--text-dim); }

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .books-grid { grid-template-columns: 1fr; gap: 12px; }
  .book-card { padding: 16px; }
  .book-emoji { font-size: 30px; }
  .book-title { font-size: 14px; }
}