add admin UX polish: nav grouping, inline settings, real preview data

- sidebar nav grouped under Shop/Content/Settings section headers with
  subtle uppercase labels (#105)
- custom page settings now show inline in a collapsible panel within the
  editor instead of navigating away to a separate page (#107)
- admin editor preview loads real products and categories from the DB,
  falling back to PreviewData only on fresh installs (#108)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -94,6 +94,22 @@
 
 /* ── Sidebar nav ── */
 
+.admin-nav-group {
+  & + & {
+    margin-top: 0.75rem;
+  }
+}
+
+.admin-nav-heading {
+  display: block;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in oklch, var(--t-text-primary) 45%, transparent);
+}
+
 .admin-nav {
   list-style: none;
   padding: 0;
@@ -171,6 +187,10 @@
   &:hover { background-color: var(--t-surface-sunken); opacity: 1; }
 }
 
+.admin-btn-active {
+  background-color: var(--t-surface-sunken);
+}
+
 .admin-btn-outline {
   background: none;
   color: inherit;
@@ -1282,6 +1302,39 @@
   color: var(--t-text-secondary);
 }
 
+/* Inline page settings panel */
+
+.page-settings-panel {
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--t-border-default);
+  border-radius: 0.5rem;
+  background: var(--t-surface-sunken);
+}
+
+.page-settings-fields {
+  display: grid;
+  gap: 0.75rem;
+
+  @media (min-width: 40em) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.page-settings-row {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.page-settings-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--t-border-default);
+}
+
 /* Page editor split layout */
 
 .page-editor-container {