/* The app's styling: the top nav bar (logo left, links right), the admin
variant's two-column body (the fixed-width side menu left, the main content
flexing), and the brands page's listing table, per-row buttons, and add +
edit modals. Loaded by every page via the head partial (one source of
truth — both layout variants include it by constant name). */
  .top-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid #ccc; background: #f7f7f7; }
  .top-nav-logo { max-height: 60px; }
  .top-nav-links { display: flex; align-items: center; gap: 1rem; }
  .admin-body { display: flex; align-items: stretch; }
  .side-nav { flex: 0 0 160px; padding: 0.5rem 1rem; border-right: 1px solid #ccc; background: #f7f7f7; }
  .side-nav a { display: block; padding: 0.25rem 0; }
  .admin-body .content { flex: 1; }
  /* the brands page (the /admin/brands listing): the toolbar, the listing table, the per-row buttons, and the add + edit modals. */
  .brands-toolbar { margin: 0.5rem 0; }
  .brands-table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
  .brands-table th, .brands-table td { border: 1px solid #ccc; padding: 0.25rem 0.5rem; text-align: left; }
  .brands-table .brands-edit-btn, .brands-table .brands-delete-btn { margin-right: 0.25rem; }
  .brands-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(0, 0, 0, 0.3); }
  .brands-modal[hidden] { display: none; }
  .brands-modal form { background: #fff; border: 1px solid #ccc; padding: 1rem; width: 340px; max-width: 90vw; }
  .brands-modal label { display: block; margin: 0.5rem 0; }
  .brands-modal input { display: block; width: 100%; margin-top: 0.25rem; box-sizing: border-box; }