:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background: #f3f4f6;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f3f4f6; }
button, input { font: inherit; }
button { min-height: 2.5rem; padding: 0.5rem 0.9rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; cursor: pointer; }
button:hover { background: #f9fafb; }
.app-header { padding: 1rem 1.25rem; background: #1f2937; color: #fff; }
.app-header h1 { margin: 0; font-size: 1.5rem; }
.app-shell { width: min(100% - 2rem, 960px); margin: 0 auto; padding: 1.5rem 0; }
section { margin-bottom: 1rem; padding: 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
h2 { margin-top: 0; }
.search-form { display: grid; gap: 1rem; }
.search-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.search-fields label { display: grid; gap: 0.35rem; font-weight: 600; }
.search-fields input { width: 100%; min-height: 2.5rem; padding: 0.5rem 0.65rem; border: 1px solid #d1d5db; border-radius: 0.5rem; }
.search-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.barcode-scanner { display: grid; gap: 0.75rem; margin-top: 1rem; }
.barcode-scanner video { width: 100%; max-height: 320px; object-fit: cover; border-radius: 0.5rem; background: #111827; }
.status-message { min-height: 1.5rem; margin-top: 0.75rem; color: #6b7280; }
.search-results, .inventory-list { display: grid; gap: 0.75rem; }
.book-card { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; }
.book-card h3 { margin: 0 0 0.35rem; }
.book-card p { margin: 0.25rem 0; }
.book-source { font-size: 0.85rem; color: #6b7280; }
#inventory-sentinel { height: 1px; }
@media (max-width: 700px) { .search-fields { grid-template-columns: 1fr; } }

.inventory-confirmation { width: min(100% - 2rem, 480px); padding: 0; border: 0; border-radius: 0.75rem; }
.inventory-confirmation::backdrop { background: rgb(0 0 0 / 0.45); }
.confirmation-card { padding: 1.25rem; }
.confirmation-title { font-weight: 700; }
.quantity-control { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }
.quantity-control button { width: 3rem; font-size: 1.25rem; }
#confirmation-quantity { min-width: 2rem; text-align: center; font-size: 1.25rem; font-weight: 700; }
.confirmation-summary { display: grid; gap: 0.5rem; margin: 1rem 0; }
.confirmation-summary div { display: flex; justify-content: space-between; gap: 1rem; }
.confirmation-summary dt { color: #6b7280; }
.confirmation-summary dd { margin: 0; font-weight: 600; }
.confirmation-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }