@proveanything/smartlinks-utils-ui 0.7.4 → 0.7.6

package/dist/components/RecordsAdmin/index.d.ts

@@ -626,6 +626,13 @@ interface ItemViewContext {
 }
 interface ItemSlotContext extends ItemViewContext {
     selected: boolean;
+    /**
+     * Open this specific item in the editor. Equivalent to
+     * `() => ctx.onOpen(itemId)` — provided so host card renderers can attach
+     * the open handler to nested elements (e.g. an internal "view" arrow)
+     * without having to remember the item id or fight click-bubbling.
+     */
+    onSelect: () => void;
 }
 interface RecordsAdminShellProps<TData = unknown> {
     SL: SmartLinksSDK;
@@ -727,6 +734,14 @@ interface RecordsAdminShellProps<TData = unknown> {
     csvSchema?: CsvSchema<TData>;
     classify?: (record: RecordSummary<TData>) => RecordStatus;
     defaultData?: () => TData;
+    /**
+     * Optional derivation for the label that represents an in-flight draft
+     * in the unsaved-changes tray. Receives the editor's current value and
+     * its scope; return a short, human-readable title (or `undefined` to
+     * defer to the built-in heuristic). Useful when your record shape nests
+     * the title under a custom key the heuristic doesn't know about.
+     */
+    deriveDraftLabel?: (value: TData, scope: ParsedRef) => string | undefined;
     /**
      * Which layouts the rail offers. Default `['list']`. When more than one is
      * supplied, a switcher appears above the list and the choice persists
@@ -794,6 +809,17 @@ interface RecordsAdminShellProps<TData = unknown> {
      * back to a styled built-in card when omitted.
      */
     renderItemCard?: (record: RecordSummary<TData>, ctx: ItemSlotContext) => ReactNode;
+    /**
+     * Visual density of the built-in `cards` / `gallery` item views.
+     * - `'sm'` — tight: ~180px (cards) / ~240px (gallery) min column width.
+     * - `'md'` *(default)* — comfortable: ~240px / ~320px.
+     * - `'lg'` — spacious: ~320px / ~420px, suits hero-style imagery.
+     *
+     * Hosts that need exact pixel control can override the underlying
+     * `--ra-item-card-min` / `--ra-item-gallery-min` CSS custom properties
+     * on `.ra-shell` instead.
+     */
+    itemCardSize?: 'sm' | 'md' | 'lg';
     /**
      * Custom empty state when a scope has no items yet. Falls back to a
      * styled built-in empty state with a "+ New {noun}" CTA.
@@ -1566,6 +1592,15 @@ interface UseRecordEditorArgs<T> {
      * back a concrete `recordId`.
      */
     createMode?: boolean;
+    /**
+     * Optional host-supplied derivation for the label this editor registers
+     * with the unsaved-changes tray. Receives the in-flight value and the
+     * scope; should return a short, human-readable title. When omitted (or
+     * when it returns `undefined`), the hook falls back to a built-in heuristic
+     * that scans common title-shaped fields (`title`, `display.title`,
+     * `name`, `label`, `heading`, `question`, `slug`).
+     */
+    deriveDraftLabel?: (value: T, scope: ParsedRef) => string | undefined;
 }
 declare function useRecordEditor<T>(args: UseRecordEditorArgs<T>): EditorContext<T>;
 
@@ -2086,9 +2121,11 @@ interface Props$5<T> {
     renderItemCard?: (record: RecordSummary<T>, ctx: ItemSlotContext) => ReactNode;
     renderItemEmpty?: (ctx: ItemViewContext) => ReactNode;
     itemColumns?: ItemColumn<T>[];
+    /** Card density for cards/gallery views. */
+    cardSize?: 'sm' | 'md' | 'lg';
     i18n: RecordsAdminI18n;
 }
-declare function ItemListView<T>({ items, isLoading, error, ctx, itemNoun, view, views, onViewChange, renderItemList, renderItemCard, renderItemEmpty, itemColumns, i18n, }: Props$5<T>): react_jsx_runtime.JSX.Element;
+declare function ItemListView<T>({ items, isLoading, error, ctx, itemNoun, view, views, onViewChange, renderItemList, renderItemCard, renderItemEmpty, itemColumns, cardSize, i18n, }: Props$5<T>): react_jsx_runtime.JSX.Element;
 
 interface Props$4 {
     options: ItemView[];
@@ -2114,9 +2151,10 @@ interface Props$2<T> {
     selectedId?: string;
     ctx: ItemViewContext;
     renderCard?: (record: RecordSummary<T>, slotCtx: ItemSlotContext) => ReactNode;
+    cardSize?: 'sm' | 'md' | 'lg';
     i18n: Pick<RecordsAdminI18n, 'delete'>;
 }
-declare function DefaultItemCards<T>({ items, variant, selectedId, ctx, renderCard, i18n, }: Props$2<T>): react_jsx_runtime.JSX.Element;
+declare function DefaultItemCards<T>({ items, variant, selectedId, ctx, renderCard, cardSize, i18n, }: Props$2<T>): react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     /** Friendly name of the item being edited (mostly for screen readers). */

package/dist/components/RecordsAdmin/index.js

@@ -692,7 +692,8 @@ function useRecordEditor(args) {
     onSaveError,
     reseed = "always",
     initialFacetRule = null,
-    createMode = false
+    createMode = false,
+    deriveDraftLabel
   } = args;
   const queryClient = useQueryClient();
   const draftStore = useDirtyDraftStore();
@@ -857,11 +858,29 @@ function useRecordEditor(args) {
     const anchors = parsedRefToScope(scope);
     const saveKind = resolved.recordId && resolved.source === "self" ? "update" : createMode ? "create" : "upsert";
     const deriveLabel = () => {
+      if (deriveDraftLabel) {
+        try {
+          const custom = deriveDraftLabel(value, scope);
+          if (typeof custom === "string" && custom.trim()) return custom.trim();
+        } catch {
+        }
+      }
+      const KEYS = ["title", "name", "label", "heading", "question", "slug"];
+      const pickString = (obj) => {
+        if (!obj || typeof obj !== "object") return void 0;
+        for (const key of KEYS) {
+          const raw = obj[key];
+          if (typeof raw === "string" && raw.trim()) return raw.trim();
+        }
+        return void 0;
+      };
       const v = value;
+      const top = pickString(v);
+      if (top) return top;
       if (v && typeof v === "object") {
-        for (const key of ["title", "name", "label", "heading", "question"]) {
-          const raw = v[key];
-          if (typeof raw === "string" && raw.trim()) return raw.trim();
+        for (const wrapper of ["display", "content", "meta", "data"]) {
+          const nested = pickString(v[wrapper]);
+          if (nested) return nested;
         }
       }
       if (scope.raw?.startsWith("item:")) return "Untitled item";
@@ -3540,59 +3559,69 @@ function DefaultItemCards({
   selectedId,
   ctx,
   renderCard,
+  cardSize = "md",
   i18n
 }) {
   const isGallery = variant === "gallery";
-  return /* @__PURE__ */ jsx("div", { className: isGallery ? "ra-item-gallery" : "ra-item-cards", children: items.map((item) => {
-    const id = item.itemId ?? "";
-    const slotCtx = {
-      ...ctx,
-      selected: selectedId === id
-    };
-    if (renderCard) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          onClick: () => ctx.onOpen(id),
-          className: "ra-item-card-wrap",
-          "data-selected": slotCtx.selected,
-          children: renderCard(item, slotCtx)
-        },
-        item.ref
-      );
-    }
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => ctx.onOpen(id),
-        className: `ra-item-card ${isGallery ? "ra-item-card--gallery" : ""}`,
-        "data-selected": slotCtx.selected,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: `ra-item-card-thumb ${isGallery ? "ra-item-card-thumb--gallery" : ""}`, children: item.thumbnail ? /* @__PURE__ */ jsx("img", { src: item.thumbnail, alt: "", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { className: "ra-item-card-initials", children: initials(item.label) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ra-item-card-body", children: [
-            /* @__PURE__ */ jsx("div", { className: "ra-item-card-title", children: item.label }),
-            item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-item-card-sub", children: item.subtitle })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: isGallery ? "ra-item-gallery" : "ra-item-cards",
+      "data-card-size": cardSize,
+      children: items.map((item) => {
+        const id = item.itemId ?? "";
+        const open = () => ctx.onOpen(id);
+        const slotCtx = {
+          ...ctx,
+          selected: selectedId === id,
+          onSelect: open
+        };
+        if (renderCard) {
+          return /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              className: "ra-row-action ra-item-card-delete",
-              "data-tone": "danger",
-              onClick: (e) => {
-                e.stopPropagation();
-                ctx.onDelete(id);
-              },
-              "aria-label": i18n.delete,
-              children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
-            }
-          )
-        ]
-      },
-      item.ref
-    );
-  }) });
+              onClick: open,
+              className: "ra-item-card-wrap",
+              "data-selected": slotCtx.selected,
+              children: renderCard(item, slotCtx)
+            },
+            item.ref
+          );
+        }
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: open,
+            className: `ra-item-card ${isGallery ? "ra-item-card--gallery" : ""}`,
+            "data-selected": slotCtx.selected,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `ra-item-card-thumb ${isGallery ? "ra-item-card-thumb--gallery" : ""}`, children: item.thumbnail ? /* @__PURE__ */ jsx("img", { src: item.thumbnail, alt: "", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { className: "ra-item-card-initials", children: initials(item.label) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "ra-item-card-body", children: [
+                /* @__PURE__ */ jsx("div", { className: "ra-item-card-title", children: item.label }),
+                item.subtitle && /* @__PURE__ */ jsx("div", { className: "ra-item-card-sub", children: item.subtitle })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ra-row-action ra-item-card-delete",
+                  "data-tone": "danger",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    ctx.onDelete(id);
+                  },
+                  "aria-label": i18n.delete,
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ]
+          },
+          item.ref
+        );
+      })
+    }
+  );
 }
 function ItemListView({
   items,
@@ -3607,6 +3636,7 @@ function ItemListView({
   renderItemCard,
   renderItemEmpty,
   itemColumns,
+  cardSize = "md",
   i18n
 }) {
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
@@ -3689,6 +3719,7 @@ function ItemListView({
         selectedId: ctx.selectedId,
         ctx,
         renderCard: renderItemCard,
+        cardSize,
         i18n
       }
     );
@@ -4664,10 +4695,15 @@ var downloadBlob = (blob, filename) => {
 styleInject(':root {\n  --ra-status-own: var(--ra-emerald, 142 71% 45%);\n  --ra-status-shared: var(--ra-amber, 38 92% 50%);\n  --ra-status-missing: var(--muted-foreground, 220 9% 46%);\n  --ra-accent: var(--primary, 222 47% 11%);\n  --ra-surface: var(--card, 0 0% 100%);\n  --ra-border: var(--border, 220 13% 91%);\n  --ra-text: var(--foreground, 222 47% 11%);\n  --ra-muted: var(--muted, 220 14% 96%);\n  --ra-muted-text: var(--muted-foreground, 220 9% 46%);\n  --ra-radius: var(--radius, 0.625rem);\n  --ra-dot-size: 0.5rem;\n  --ra-page-bg: var(--background, 220 14% 98%);\n  --ra-card-shadow: 0 1px 2px hsl(var(--ra-accent) / 0.04), 0 4px 12px hsl(var(--ra-accent) / 0.05);\n  --ra-card-shadow-hover: 0 2px 4px hsl(var(--ra-accent) / 0.06), 0 8px 24px hsl(var(--ra-accent) / 0.08);\n  --ra-row-hover: hsl(var(--ra-accent) / 0.05);\n  --ra-row-active-bg: hsl(var(--ra-accent) / 0.10);\n  --ra-row-active-bd: hsl(var(--ra-accent) / 0.45);\n  --ra-focus-ring: hsl(var(--ra-accent) / 0.35);\n  --ra-font-display: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));\n  --ra-font-ui: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n  --ra-title-weight: 600;\n  --ra-display-weight: 700;\n  --ra-info: var(--ra-blue, 214 95% 55%);\n  --ra-success: var(--ra-emerald, 142 71% 45%);\n  --ra-warning: var(--ra-amber, 38 92% 50%);\n  --ra-danger: var(--destructive, 0 72% 51%);\n}\n:root {\n  --sl-control-bg: var(--muted, 220 14% 96%);\n  --sl-control-fg: var(--muted-foreground, 220 9% 40%);\n  --sl-control-border: var(--border, 220 13% 88%);\n  --sl-control-active-bg: var(--primary, 222 47% 11%);\n  --sl-control-active-fg: var(--primary-foreground, 0 0% 100%);\n  --sl-control-active-bd: var(--primary, 222 47% 11%);\n  --sl-control-hover-bg: var(--sl-control-active-bg, 222 47% 11%);\n  --sl-control-hover-fg: var(--foreground, 222 47% 11%);\n  --sl-control-focus-ring: var(--sl-control-active-bg, 222 47% 11%);\n  --sl-control-radius: var(--radius, 0.5rem);\n  --sl-control-weight: 500;\n  --sl-control-active-weight: 600;\n}\n.ra-status-dot {\n  display: inline-block;\n  width: var(--ra-dot-size);\n  height: var(--ra-dot-size);\n  border-radius: 9999px;\n  flex-shrink: 0;\n}\n.ra-status-own {\n  background: hsl(var(--ra-status-own));\n}\n.ra-status-shared {\n  background: hsl(var(--ra-status-shared));\n}\n.ra-status-missing {\n  background: hsl(var(--ra-status-missing) / 0.4);\n  border: 1px solid hsl(var(--ra-status-missing) / 0.6);\n}\n.ra-row-active {\n  background: var(--ra-row-active-bg);\n  border-color: var(--ra-row-active-bd) !important;\n}\n');
 
 // src/components/RecordsAdmin/shell/shell.css
-styleInject(".ra-shell {\n  color: hsl(var(--ra-text));\n  background: hsl(var(--ra-page-bg));\n  font-family: var(--ra-font-ui);\n}\n.ra-shell *,\n.ra-shell *::before,\n.ra-shell *::after {\n  box-sizing: border-box;\n}\n.ra-shell .ra-card {\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-card-hover {\n  transition:\n    box-shadow .18s ease,\n    transform .18s ease,\n    border-color .18s ease;\n}\n.ra-shell .ra-card-hover:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-display {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-title {\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n  border-radius: calc(var(--ra-radius) * 0.6);\n}\n.ra-shell .ra-header {\n  display: block;\n  width: 100%;\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  background: transparent;\n  color: hsl(var(--ra-text));\n  border: 0;\n  padding: 0;\n  margin-top: 0.1rem;\n}\n.ra-shell .ra-header-icon > svg {\n  width: 1.05rem;\n  height: 1.05rem;\n}\n.ra-shell .ra-header-text {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-header-title {\n  font-family: var(--ra-font-display);\n  font-weight: 700;\n  font-size: 1.2rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.015em;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.1rem;\n  line-height: 1.3;\n}\n.ra-shell .ra-header-stats {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n  padding: 0.15rem 0.4rem;\n  border-radius: calc(var(--ra-radius) * 0.75);\n  background: hsl(var(--ra-surface) / 0.7);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-header-stats--titled {\n  flex-direction: column;\n  align-items: stretch;\n  padding: 0.4rem 0.55rem;\n  gap: 0.3rem;\n}\n.ra-shell .ra-header-stats .ra-stats-items {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n}\n.ra-shell .ra-header-stats .ra-stats-heading {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon {\n  display: inline-flex;\n  align-items: center;\n  color: hsl(var(--ra-text));\n  opacity: 0.75;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon > svg {\n  width: 0.85rem;\n  height: 0.85rem;\n}\n.ra-shell .ra-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.15rem 0.45rem;\n  min-width: 2.5rem;\n}\n.ra-shell .ra-stat-value {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n  line-height: 1;\n}\n.ra-shell .ra-stat-label {\n  font-size: 0.6rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-stat-divider {\n  width: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-tabs {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: hsl(var(--sl-control-bg));\n  border-radius: var(--sl-control-radius);\n  border: 1px solid hsl(var(--sl-control-border));\n}\n.ra-shell .ra-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 0.7rem;\n  border-radius: calc(var(--sl-control-radius) - 2px);\n  font-size: 0.78rem;\n  font-weight: var(--sl-control-weight);\n  color: hsl(var(--sl-control-fg));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    color .15s ease,\n    transform .15s ease;\n  white-space: nowrap;\n}\n.ra-shell .ra-tab:hover {\n  background: hsl(var(--sl-control-hover-bg) / 0.10);\n  color: hsl(var(--sl-control-hover-fg));\n}\n.ra-shell .ra-tab:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--sl-control-focus-ring) / 0.45);\n}\n.ra-shell .ra-tab[aria-selected=true] {\n  background: hsl(var(--sl-control-active-bg));\n  color: hsl(var(--sl-control-active-fg));\n  border-color: hsl(var(--sl-control-active-bd));\n  font-weight: var(--sl-control-active-weight);\n  box-shadow: 0 1px 2px hsl(var(--sl-control-active-bg) / 0.25);\n}\n.ra-shell .ra-tab[aria-selected=true]:hover {\n  background: hsl(var(--sl-control-active-bg) / 0.92);\n  color: hsl(var(--sl-control-active-fg));\n}\n.ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {\n  color: hsl(var(--sl-control-active-fg));\n}\n.ra-shell .ra-tab[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-tab-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  padding: 0 0.35rem;\n  height: 1.1rem;\n  border-radius: 999px;\n  background: hsl(var(--sl-control-active-fg) / 0.20);\n  color: hsl(var(--sl-control-active-fg));\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n}\n.ra-shell .ra-tab[aria-selected=false] .ra-tab-count {\n  background: hsl(var(--sl-control-fg) / 0.15);\n  color: hsl(var(--sl-control-fg));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.4rem;\n}\n.ra-shell .ra-row {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  text-align: left;\n  padding: 0.45rem 0.75rem;\n  border-left: 3px solid transparent;\n  background: transparent;\n  border-bottom: 1px solid transparent;\n  transition: background .12s ease, border-color .12s ease;\n  cursor: pointer;\n  color: hsl(var(--ra-text));\n  font-family: inherit;\n}\n.ra-shell .ra-row + .ra-row {\n  border-top: 1px solid hsl(var(--ra-border) / 0.6);\n}\n.ra-shell .ra-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n  border-left-color: var(--ra-row-active-bd);\n}\n.ra-shell .ra-row-compact {\n  padding-block: 0.3rem;\n}\n.ra-shell .ra-row-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-icon {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-row-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.8125rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-sub {\n  font-size: 0.6875rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.05rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-rule-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.2rem;\n  margin-top: 0.2rem;\n}\n.ra-shell .ra-rule-chip {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  padding: 0.05rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 500;\n  line-height: 1.4;\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.20);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-rule-chip-more {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-shell[data-density=compact] .ra-row-rule-chips {\n  margin-top: 0.15rem;\n  gap: 0.15rem;\n}\n.ra-shell[data-density=compact] .ra-rule-chip {\n  font-size: 0.6rem;\n  padding: 0.02rem 0.35rem;\n}\n.ra-shell .ra-rule-filters {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3rem;\n}\n.ra-shell .ra-rule-filters-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n.ra-shell .ra-rule-filter-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.65rem;\n  font-weight: 500;\n  line-height: 1.4;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  cursor: pointer;\n  transition:\n    background .12s ease,\n    color .12s ease,\n    border-color .12s ease;\n  max-width: 100%;\n}\n.ra-shell .ra-rule-filter-chip:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n  border-color: hsl(var(--ra-accent) / 0.25);\n}\n.ra-shell .ra-rule-filter-chip[data-active=true] {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n  border-color: hsl(var(--ra-accent) / 0.40);\n}\n.ra-shell .ra-rule-filter-chip[data-tone=complexity][data-active=true] {\n  background: hsl(var(--ra-info) / 0.15);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.40);\n}\n.ra-shell .ra-rule-filter-chip-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 9rem;\n}\n.ra-shell .ra-rule-filter-chip-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.1rem;\n  height: 1rem;\n  padding: 0 0.3rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.6rem;\n  font-weight: 600;\n}\n.ra-shell .ra-rule-filter-chip[data-active=true] .ra-rule-filter-chip-count {\n  background: hsl(var(--ra-accent) / 0.18);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-rule-filter-clear {\n  align-self: flex-start;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.65rem;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-style: dotted;\n}\n.ra-shell .ra-rule-filter-clear:hover {\n  color: hsl(var(--ra-text));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.3rem;\n  gap: 0.45rem;\n}\n.ra-shell[data-density=compact] .ra-row-title {\n  font-size: 0.78125rem;\n}\n.ra-shell .ra-row-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-row:hover .ra-row-actions,\n.ra-shell .ra-row:focus-within .ra-row-actions {\n  opacity: 1;\n}\n.ra-shell .ra-row-action {\n  width: 1.6rem;\n  height: 1.6rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .15s ease, color .15s ease;\n}\n.ra-shell .ra-row-action:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-action[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.12);\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  white-space: nowrap;\n  max-width: 14rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-chip[data-tone=success] {\n  background: hsl(var(--ra-success) / 0.12);\n  color: hsl(var(--ra-success));\n  border-color: hsl(var(--ra-success) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=warning] {\n  background: hsl(var(--ra-warning) / 0.14);\n  color: hsl(var(--ra-warning));\n  border-color: hsl(var(--ra-warning) / 0.35);\n}\n.ra-shell .ra-chip[data-tone=info] {\n  background: hsl(var(--ra-info) / 0.10);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=danger] {\n  background: hsl(var(--ra-danger) / 0.10);\n  color: hsl(var(--ra-danger));\n  border-color: hsl(var(--ra-danger) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=muted] {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-style: dashed;\n}\n.ra-shell .ra-group {\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-group:last-child {\n  border-bottom: 0;\n}\n.ra-shell .ra-group-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.6);\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-group-summary:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-group-summary .ra-group-chevron {\n  transition: transform .15s ease;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-chevron {\n  transform: rotate(-90deg);\n}\n.ra-shell .ra-group-name {\n  flex: 1;\n  text-align: left;\n}\n.ra-shell .ra-group-count {\n  font-size: 0.65rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.4rem;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-body {\n  display: none;\n}\n.ra-shell .ra-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 2.5rem 1.5rem;\n  gap: 0.75rem;\n}\n.ra-shell .ra-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.25rem;\n  height: 3.25rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.08);\n  color: hsl(var(--ra-accent));\n  margin-bottom: 0.25rem;\n}\n.ra-shell .ra-empty-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-empty-body {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-muted-text));\n  max-width: 22rem;\n  line-height: 1.45;\n}\n.ra-shell .ra-empty-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.ra-shell .ra-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.45rem 0.85rem;\n  border-radius: calc(var(--ra-radius) * 0.7);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    border-color .15s ease,\n    box-shadow .15s ease,\n    transform .1s ease;\n}\n.ra-shell .ra-btn:hover {\n  background: hsl(var(--ra-muted));\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-btn:active {\n  transform: translateY(1px);\n}\n.ra-shell .ra-btn[data-variant=primary] {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-surface));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-btn[data-variant=primary]:hover {\n  background: hsl(var(--ra-accent) / 0.92);\n}\n.ra-shell .ra-btn[data-variant=ghost] {\n  background: transparent;\n  border-color: transparent;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-btn[data-variant=ghost]:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-btn[data-variant=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-btn[data-variant=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n  border-color: hsl(var(--ra-danger) / 0.40);\n}\n.ra-shell .ra-intro {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  padding: 0.4rem 2rem 0.4rem 0.5rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-info) / 0.30);\n  background: hsl(var(--ra-info) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=success] {\n  border-color: hsl(var(--ra-success) / 0.30);\n  background: hsl(var(--ra-success) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=warning] {\n  border-color: hsl(var(--ra-warning) / 0.35);\n  background: hsl(var(--ra-warning) / 0.10);\n}\n.ra-shell .ra-intro-icon {\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-info) / 0.18);\n  color: hsl(var(--ra-info));\n}\n.ra-shell .ra-intro[data-tone=success] .ra-intro-icon {\n  background: hsl(var(--ra-success) / 0.18);\n  color: hsl(var(--ra-success));\n}\n.ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {\n  background: hsl(var(--ra-warning) / 0.20);\n  color: hsl(var(--ra-warning));\n}\n.ra-shell .ra-intro-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-intro-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-title-weight);\n  font-size: 0.8rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  line-height: 1.2;\n  display: inline;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.35;\n  display: inline;\n  margin-left: 0.4rem;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 50%;\n  right: 0.35rem;\n  transform: translateY(-50%);\n  width: 1.4rem;\n  height: 1.4rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 0;\n  color: hsl(var(--ra-muted-text));\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n}\n.ra-shell .ra-intro-dismiss:hover {\n  background: hsl(var(--ra-text) / 0.06);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-bulk-menu {\n  min-width: 12rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow-hover);\n  padding: 0.3rem;\n  z-index: 60;\n}\n.ra-shell .ra-bulk-item {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  padding: 0.45rem 0.6rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-bulk-item:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-bulk-item[data-tone=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-bulk-item[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n}\n.ra-shell .ra-bulk-divider {\n  height: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-preview-rail {\n  background: hsl(var(--ra-surface));\n  border-left: 1px solid hsl(var(--ra-border));\n  box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ra-shell .ra-preview-rail-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background:\n    linear-gradient(\n      180deg,\n      hsl(var(--ra-surface)) 0%,\n      hsl(var(--ra-surface) / 0.92) 100%);\n  border-bottom: 1px solid hsl(var(--ra-border));\n  backdrop-filter: blur(6px);\n}\n.ra-shell .ra-preview-rail-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-preview-rail-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n}\n.ra-confirm-root {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: transparent;\n}\n.ra-confirm-root .ra-confirm-backdrop {\n  position: absolute;\n  inset: 0;\n  background: hsl(0 0% 0% / 0.45);\n  backdrop-filter: blur(2px);\n  animation: ra-confirm-fade .12s ease-out;\n}\n.ra-confirm-root .ra-confirm-card {\n  position: relative;\n  width: min(440px, 100%);\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08), 0 24px 48px -12px hsl(0 0% 0% / 0.32);\n  padding: 1.25rem;\n  animation: ra-confirm-pop .14s ease-out;\n}\n.ra-confirm-root .ra-confirm-header {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin-bottom: 0.5rem;\n}\n.ra-confirm-root .ra-confirm-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.12);\n  color: hsl(var(--ra-warning, 38 92% 50%));\n}\n.ra-confirm-root .ra-confirm-title {\n  font-family: var(--ra-font-display);\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n}\n.ra-confirm-root .ra-confirm-body {\n  font-size: 0.875rem;\n  color: hsl(var(--ra-muted-text));\n  margin: 0 0 1.1rem;\n  line-height: 1.45;\n}\n.ra-confirm-root .ra-confirm-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.ra-confirm-root .ra-confirm-btn {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.45rem 0.85rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease;\n}\n.ra-confirm-root .ra-confirm-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-confirm-root .ra-confirm-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-confirm-root .ra-confirm-btn-ghost:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-confirm-root .ra-confirm-btn-danger {\n  background: transparent;\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  border-color: hsl(var(--ra-danger, 0 72% 51%) / 0.45);\n}\n.ra-confirm-root .ra-confirm-btn-danger:hover {\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);\n  border-color: hsl(var(--ra-danger, 0 72% 51%));\n}\n.ra-confirm-root .ra-confirm-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-confirm-root .ra-confirm-btn-primary:hover {\n  filter: brightness(0.95);\n}\n@keyframes ra-confirm-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes ra-confirm-pop {\n  from {\n    opacity: 0;\n    transform: translateY(4px) scale(.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ra-shell .ra-unsaved-banner {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);\n  border-radius: var(--ra-radius);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  animation: ra-unsaved-slide .14s ease-out;\n}\n.ra-shell .ra-unsaved-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-warning, 38 92% 50%));\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ra-shell .ra-unsaved-context {\n  color: hsl(var(--ra-muted-text));\n  font-weight: 400;\n}\n.ra-shell .ra-unsaved-error {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  font-weight: 500;\n}\n.ra-shell .ra-unsaved-actions {\n  display: inline-flex;\n  gap: 0.4rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.3rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease,\n    opacity .12s ease;\n}\n.ra-shell .ra-unsaved-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-unsaved-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-shell .ra-unsaved-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-shell .ra-unsaved-btn-ghost:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-unsaved-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-unsaved-btn-primary:hover:not(:disabled) {\n  filter: brightness(0.95);\n}\n@keyframes ra-unsaved-slide {\n  from {\n    opacity: 0;\n    transform: translateY(-3px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ra-shell .ra-clipboard-toast {\n  position: fixed;\n  bottom: 1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 90;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  max-width: min(28rem, calc(100vw - 2rem));\n  padding: 0.55rem 0.85rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-text));\n  color: hsl(var(--ra-surface));\n  font-size: 0.75rem;\n  line-height: 1;\n  box-shadow: 0 8px 24px -10px hsl(0 0% 0% / 0.45);\n  animation: ra-clipboard-pop 0.18s ease-out both;\n  pointer-events: none;\n}\n@keyframes ra-clipboard-pop {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 6px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n.ra-shell .ra-row-menu-wrap {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.25rem;\n}\n.ra-shell .ra-row-menu-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 0.35rem;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  opacity: 0;\n  transition:\n    opacity .15s ease,\n    background .15s ease,\n    color .15s ease;\n  border: 1px solid transparent;\n}\n.ra-shell .ra-row:hover .ra-row-menu-trigger,\n.ra-shell .ra-card-hover:hover .ra-row-menu-trigger,\n.ra-shell .ra-row-menu-trigger:focus-visible,\n.ra-shell .ra-row-menu-trigger[aria-expanded=true] {\n  opacity: 1;\n}\n.ra-shell .ra-row-menu-trigger:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-menu {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 4px);\n  z-index: 50;\n  min-width: 11rem;\n  padding: 0.25rem;\n  border-radius: 0.5rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  box-shadow: 0 12px 28px -10px hsl(0 0% 0% / 0.25);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n.ra-shell .ra-row-menu-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.35rem;\n  font-size: 0.75rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  text-align: left;\n  width: 100%;\n  cursor: pointer;\n}\n.ra-shell .ra-row-menu-item:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-row-menu-item:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ra-shell .ra-item-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-item-list-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem 1.25rem 1.5rem;\n}\n.ra-shell .ra-item-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 0.75rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-toolbar-title {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-toolbar-count {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.45rem;\n}\n.ra-shell .ra-item-toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-item-table-wrap {\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  background: hsl(var(--ra-surface));\n  overflow: hidden;\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-item-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-table thead th {\n  text-align: left;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  padding: 0.65rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.55);\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-item-table tbody td {\n  padding: 0.65rem 0.85rem;\n  border-bottom: 1px solid hsl(var(--ra-border) / 0.7);\n  vertical-align: middle;\n}\n.ra-shell .ra-item-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ra-shell .ra-item-row {\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-item-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-item-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n}\n.ra-shell .ra-item-row-title {\n  font-weight: var(--ra-title-weight);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-row-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-item-row-meta {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-item-row-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n.ra-shell .ra-item-row-actions .ra-row-action + .ra-row-action {\n  margin-left: 0.15rem;\n}\n.ra-shell .ra-item-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 0.85rem;\n}\n.ra-shell .ra-item-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 1rem;\n}\n.ra-shell .ra-item-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  text-align: left;\n  padding: 0;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    box-shadow .18s ease,\n    transform .12s ease,\n    border-color .15s ease;\n  box-shadow: var(--ra-card-shadow);\n  font-family: inherit;\n  color: inherit;\n}\n.ra-shell .ra-item-card:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n  border-color: hsl(var(--ra-accent) / 0.30);\n}\n.ra-shell .ra-item-card[data-selected=true] {\n  border-color: hsl(var(--ra-accent) / 0.55);\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-item-card-thumb {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.12),\n      hsl(var(--ra-accent) / 0.04));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-accent));\n  overflow: hidden;\n}\n.ra-shell .ra-item-card-thumb--gallery {\n  aspect-ratio: 16 / 9;\n}\n.ra-shell .ra-item-card-thumb img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ra-shell .ra-item-card-initials {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1.5rem;\n  letter-spacing: 0.02em;\n}\n.ra-shell .ra-item-card-body {\n  padding: 0.65rem 0.8rem 0.85rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-card-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.85rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-item-card-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-item-card-delete {\n  position: absolute;\n  top: 0.4rem;\n  right: 0.4rem;\n  background: hsl(var(--ra-surface) / 0.85);\n  backdrop-filter: blur(4px);\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-item-card:hover .ra-item-card-delete,\n.ra-shell .ra-item-card:focus-within .ra-item-card-delete {\n  opacity: 1;\n}\n.ra-shell .ra-item-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-nav-position {\n  font-size: 0.72rem;\n  color: hsl(var(--ra-muted-text));\n  font-variant-numeric: tabular-nums;\n}\n.ra-shell .ra-item-nav-arrows {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n}\n.ra-shell .ra-item-nav-arrows .ra-row-action[disabled] {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.ra-shell .ra-sibling-rail {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-sibling-back {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.6rem 0.85rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted) / 0.5);\n  border: 0;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-sibling-back:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-sibling-heading {\n  padding: 0.6rem 0.85rem 0.4rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-sibling-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n.ra-shell .ra-sibling-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ra-shell .ra-status-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: 9999px;\n}\n.ra-shell .ra-status-icon > svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.ra-shell .ra-status-icon--own {\n  color: hsl(var(--ra-status-own));\n}\n.ra-shell .ra-status-icon--shared {\n  color: hsl(var(--ra-status-shared));\n}\n.ra-shell .ra-status-icon--missing {\n  color: hsl(var(--ra-status-missing) / 0.7);\n}\n.ra-shell .ra-row-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-row-scope {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: calc(var(--ra-radius) * 0.5);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.55;\n  transition:\n    opacity .12s ease,\n    color .12s ease,\n    background .12s ease;\n}\n.ra-shell .ra-row:hover .ra-row-scope {\n  opacity: 0.85;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-scope {\n  opacity: 1;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row[data-tone=own] .ra-row-sub {\n  color: hsl(var(--ra-status-own));\n}\n.ra-shell .ra-row[data-tone=shared] .ra-row-sub {\n  color: hsl(var(--ra-status-shared));\n}\n.ra-shell .ra-row[data-selected=true] {\n  background:\n    linear-gradient(\n      90deg,\n      hsl(var(--ra-accent) / 0.10) 0%,\n      hsl(var(--ra-accent) / 0.04) 100%);\n  border-left-width: 3px;\n  border-left-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-dirty-pip {\n  display: inline-block;\n  width: 0.45rem;\n  height: 0.45rem;\n  border-radius: 9999px;\n  background: hsl(var(--ra-warning));\n  box-shadow: 0 0 0 2px hsl(var(--ra-warning) / 0.18);\n  flex-shrink: 0;\n}\n.ra-shell .ra-error-pip {\n  display: inline-block;\n  width: 0.45rem;\n  height: 0.45rem;\n  border-radius: 9999px;\n  background: hsl(var(--ra-danger, 0 72% 51%));\n  box-shadow: 0 0 0 2px hsl(var(--ra-danger, 0 72% 51%) / 0.22);\n  flex-shrink: 0;\n}\n.ra-shell .ra-group-summary {\n  background: transparent;\n}\n.ra-shell {\n  position: relative;\n}\n.ra-shell .ra-help-float {\n  position: absolute;\n  top: 0.65rem;\n  right: 0.85rem;\n  z-index: 5;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.6rem;\n  height: 1.6rem;\n  padding: 0;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface) / 0.85);\n  backdrop-filter: blur(6px);\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  cursor: pointer;\n  transition:\n    color .12s ease,\n    background .12s ease,\n    border-color .12s ease;\n}\n.ra-shell .ra-help-float:hover {\n  color: hsl(var(--ra-accent));\n  border-color: hsl(var(--ra-accent) / 0.4);\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-help-float svg {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.ra-shell .ra-help-float > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.ra-shell .ra-preview-reopen {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  z-index: 4;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  padding: 0.65rem 0.45rem;\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-right: 0;\n  border-radius: calc(var(--ra-radius) * 0.85) 0 0 calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow);\n  cursor: pointer;\n  transition:\n    color .12s ease,\n    background .12s ease,\n    padding-right .15s ease;\n  writing-mode: vertical-rl;\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.ra-shell .ra-preview-reopen:hover {\n  color: hsl(var(--ra-accent));\n  background: hsl(var(--ra-accent) / 0.04);\n  padding-right: 0.6rem;\n}\n.ra-shell .ra-preview-reopen svg {\n  width: 0.85rem;\n  height: 0.85rem;\n  writing-mode: horizontal-tb;\n}\n.ra-shell .ra-unsaved-tray {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);\n  border-radius: var(--ra-radius);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  animation: ra-unsaved-slide .14s ease-out;\n}\n.ra-shell .ra-unsaved-count {\n  flex: 1;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.4rem;\n  margin: -0.15rem -0.4rem;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  border-radius: calc(var(--ra-radius) - 4px);\n}\n.ra-shell .ra-unsaved-count:hover {\n  background: hsl(var(--ra-muted) / 0.6);\n}\n.ra-shell .ra-unsaved-error-chip {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid hsl(var(--ra-danger, 0 72% 51%) / 0.35);\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  border-radius: 999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  cursor: pointer;\n}\n.ra-shell .ra-unsaved-error-chip:hover {\n  filter: brightness(0.97);\n}\n.ra-shell .ra-unsaved-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 60;\n  min-width: 18rem;\n  max-height: 18rem;\n  overflow: auto;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 12px 30px -10px hsl(0 0% 0% / 0.25);\n  padding: 0.3rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n}\n.ra-shell .ra-unsaved-popover-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.4rem 0.55rem;\n  background: transparent;\n  border: 0;\n  border-radius: calc(var(--ra-radius) - 2px);\n  cursor: pointer;\n  text-align: left;\n  font: inherit;\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-unsaved-popover-row:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-unsaved-popover-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-popover-label {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 0.8125rem;\n}\n.ra-shell .ra-unsaved-popover-ctx {\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.7rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.ra-shell .ra-unsaved-popover-err {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.7rem;\n  font-weight: 500;\n}\n.ra-saveall-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  background: hsl(0 0% 0% / 0.45);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  animation: ra-confirm-fade .12s ease-out;\n}\n.ra-saveall-card {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 24px 48px -16px hsl(0 0% 0% / 0.45);\n  width: min(28rem, 100%);\n  max-height: min(80vh, 36rem);\n  display: flex;\n  flex-direction: column;\n  animation: ra-confirm-pop .14s ease-out;\n}\n.ra-saveall-header {\n  padding: 1rem 1rem 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.ra-saveall-title {\n  font-weight: 600;\n  font-size: 0.95rem;\n}\n.ra-saveall-progress {\n  height: 4px;\n  background: hsl(var(--ra-muted));\n  border-radius: 999px;\n  overflow: hidden;\n}\n.ra-saveall-progress-bar {\n  height: 100%;\n  background: hsl(var(--ra-accent));\n  transition: width .2s ease;\n}\n.ra-saveall-counter {\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.75rem;\n  font-variant-numeric: tabular-nums;\n}\n.ra-saveall-list {\n  list-style: none;\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  overflow: auto;\n  flex: 1;\n}\n.ra-saveall-row {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.45rem 0.5rem;\n  border-radius: calc(var(--ra-radius) - 4px);\n  font-size: 0.8125rem;\n}\n.ra-saveall-row[data-status=saving] {\n  background: hsl(var(--ra-accent) / 0.06);\n}\n.ra-saveall-row[data-status=saved] {\n  color: hsl(var(--ra-muted-text));\n}\n.ra-saveall-row[data-status=error] {\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.06);\n}\n.ra-saveall-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-saveall-row[data-status=saved] .ra-saveall-icon {\n  color: hsl(var(--ra-success, 142 71% 45%));\n}\n.ra-saveall-row[data-status=saving] .ra-saveall-icon {\n  color: hsl(var(--ra-accent));\n}\n.ra-saveall-row[data-status=error] .ra-saveall-icon {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n}\n.ra-saveall-label {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-saveall-err {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.7rem;\n  max-width: 12rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-saveall-actions {\n  padding: 0.75rem 1rem 1rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.4rem;\n  border-top: 1px solid hsl(var(--ra-border));\n}\n.ra-spin {\n  animation: ra-spin 1s linear infinite;\n}\n@keyframes ra-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+styleInject(".ra-shell {\n  color: hsl(var(--ra-text));\n  background: hsl(var(--ra-page-bg));\n  font-family: var(--ra-font-ui);\n}\n.ra-shell *,\n.ra-shell *::before,\n.ra-shell *::after {\n  box-sizing: border-box;\n}\n.ra-shell .ra-card {\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-card-hover {\n  transition:\n    box-shadow .18s ease,\n    transform .18s ease,\n    border-color .18s ease;\n}\n.ra-shell .ra-card-hover:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-display {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-title {\n  font-weight: var(--ra-title-weight);\n}\n.ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n  border-radius: calc(var(--ra-radius) * 0.6);\n}\n.ra-shell .ra-header {\n  display: block;\n  width: 100%;\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  background: transparent;\n  color: hsl(var(--ra-text));\n  border: 0;\n  padding: 0;\n  margin-top: 0.1rem;\n}\n.ra-shell .ra-header-icon > svg {\n  width: 1.05rem;\n  height: 1.05rem;\n}\n.ra-shell .ra-header-text {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-header-title {\n  font-family: var(--ra-font-display);\n  font-weight: 700;\n  font-size: 1.2rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.015em;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.1rem;\n  line-height: 1.3;\n}\n.ra-shell .ra-header-stats {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n  padding: 0.15rem 0.4rem;\n  border-radius: calc(var(--ra-radius) * 0.75);\n  background: hsl(var(--ra-surface) / 0.7);\n  border: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-header-stats--titled {\n  flex-direction: column;\n  align-items: stretch;\n  padding: 0.4rem 0.55rem;\n  gap: 0.3rem;\n}\n.ra-shell .ra-header-stats .ra-stats-items {\n  display: flex;\n  align-items: stretch;\n  gap: 0.15rem;\n}\n.ra-shell .ra-header-stats .ra-stats-heading {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon {\n  display: inline-flex;\n  align-items: center;\n  color: hsl(var(--ra-text));\n  opacity: 0.75;\n}\n.ra-shell .ra-header-stats .ra-stats-heading-icon > svg {\n  width: 0.85rem;\n  height: 0.85rem;\n}\n.ra-shell .ra-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.15rem 0.45rem;\n  min-width: 2.5rem;\n}\n.ra-shell .ra-stat-value {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n  line-height: 1;\n}\n.ra-shell .ra-stat-label {\n  font-size: 0.6rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-stat-divider {\n  width: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ra-shell .ra-tabs {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  background: hsl(var(--sl-control-bg));\n  border-radius: var(--sl-control-radius);\n  border: 1px solid hsl(var(--sl-control-border));\n}\n.ra-shell .ra-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 0.7rem;\n  border-radius: calc(var(--sl-control-radius) - 2px);\n  font-size: 0.78rem;\n  font-weight: var(--sl-control-weight);\n  color: hsl(var(--sl-control-fg));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    color .15s ease,\n    transform .15s ease;\n  white-space: nowrap;\n}\n.ra-shell .ra-tab:hover {\n  background: hsl(var(--sl-control-hover-bg) / 0.10);\n  color: hsl(var(--sl-control-hover-fg));\n}\n.ra-shell .ra-tab:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px hsl(var(--sl-control-focus-ring) / 0.45);\n}\n.ra-shell .ra-tab[aria-selected=true] {\n  background: hsl(var(--sl-control-active-bg));\n  color: hsl(var(--sl-control-active-fg));\n  border-color: hsl(var(--sl-control-active-bd));\n  font-weight: var(--sl-control-active-weight);\n  box-shadow: 0 1px 2px hsl(var(--sl-control-active-bg) / 0.25);\n}\n.ra-shell .ra-tab[aria-selected=true]:hover {\n  background: hsl(var(--sl-control-active-bg) / 0.92);\n  color: hsl(var(--sl-control-active-fg));\n}\n.ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {\n  color: hsl(var(--sl-control-active-fg));\n}\n.ra-shell .ra-tab[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-tab-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  padding: 0 0.35rem;\n  height: 1.1rem;\n  border-radius: 999px;\n  background: hsl(var(--sl-control-active-fg) / 0.20);\n  color: hsl(var(--sl-control-active-fg));\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n}\n.ra-shell .ra-tab[aria-selected=false] .ra-tab-count {\n  background: hsl(var(--sl-control-fg) / 0.15);\n  color: hsl(var(--sl-control-fg));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.4rem;\n}\n.ra-shell .ra-row {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  text-align: left;\n  padding: 0.45rem 0.75rem;\n  border-left: 3px solid transparent;\n  background: transparent;\n  border-bottom: 1px solid transparent;\n  transition: background .12s ease, border-color .12s ease;\n  cursor: pointer;\n  color: hsl(var(--ra-text));\n  font-family: inherit;\n}\n.ra-shell .ra-row + .ra-row {\n  border-top: 1px solid hsl(var(--ra-border) / 0.6);\n}\n.ra-shell .ra-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n  border-left-color: var(--ra-row-active-bd);\n}\n.ra-shell .ra-row-compact {\n  padding-block: 0.3rem;\n}\n.ra-shell .ra-row-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-icon {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-row-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.8125rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-sub {\n  font-size: 0.6875rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.05rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-row-rule-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.2rem;\n  margin-top: 0.2rem;\n}\n.ra-shell .ra-rule-chip {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  padding: 0.05rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 500;\n  line-height: 1.4;\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.20);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-rule-chip-more {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-shell[data-density=compact] .ra-row-rule-chips {\n  margin-top: 0.15rem;\n  gap: 0.15rem;\n}\n.ra-shell[data-density=compact] .ra-rule-chip {\n  font-size: 0.6rem;\n  padding: 0.02rem 0.35rem;\n}\n.ra-shell .ra-rule-filters {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3rem;\n}\n.ra-shell .ra-rule-filters-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n.ra-shell .ra-rule-filter-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.65rem;\n  font-weight: 500;\n  line-height: 1.4;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  cursor: pointer;\n  transition:\n    background .12s ease,\n    color .12s ease,\n    border-color .12s ease;\n  max-width: 100%;\n}\n.ra-shell .ra-rule-filter-chip:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n  border-color: hsl(var(--ra-accent) / 0.25);\n}\n.ra-shell .ra-rule-filter-chip[data-active=true] {\n  background: hsl(var(--ra-accent) / 0.15);\n  color: hsl(var(--ra-accent));\n  border-color: hsl(var(--ra-accent) / 0.40);\n}\n.ra-shell .ra-rule-filter-chip[data-tone=complexity][data-active=true] {\n  background: hsl(var(--ra-info) / 0.15);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.40);\n}\n.ra-shell .ra-rule-filter-chip-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 9rem;\n}\n.ra-shell .ra-rule-filter-chip-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.1rem;\n  height: 1rem;\n  padding: 0 0.3rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.6rem;\n  font-weight: 600;\n}\n.ra-shell .ra-rule-filter-chip[data-active=true] .ra-rule-filter-chip-count {\n  background: hsl(var(--ra-accent) / 0.18);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-rule-filter-clear {\n  align-self: flex-start;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.65rem;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-style: dotted;\n}\n.ra-shell .ra-rule-filter-clear:hover {\n  color: hsl(var(--ra-text));\n}\n.ra-shell[data-density=compact] .ra-row {\n  padding-block: 0.3rem;\n  gap: 0.45rem;\n}\n.ra-shell[data-density=compact] .ra-row-title {\n  font-size: 0.78125rem;\n}\n.ra-shell .ra-row-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-row:hover .ra-row-actions,\n.ra-shell .ra-row:focus-within .ra-row-actions {\n  opacity: 1;\n}\n.ra-shell .ra-row-action {\n  width: 1.6rem;\n  height: 1.6rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .15s ease, color .15s ease;\n}\n.ra-shell .ra-row-action:hover {\n  background: hsl(var(--ra-accent) / 0.10);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-action[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.12);\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.5rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  white-space: nowrap;\n  max-width: 14rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-chip[data-tone=success] {\n  background: hsl(var(--ra-success) / 0.12);\n  color: hsl(var(--ra-success));\n  border-color: hsl(var(--ra-success) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=warning] {\n  background: hsl(var(--ra-warning) / 0.14);\n  color: hsl(var(--ra-warning));\n  border-color: hsl(var(--ra-warning) / 0.35);\n}\n.ra-shell .ra-chip[data-tone=info] {\n  background: hsl(var(--ra-info) / 0.10);\n  color: hsl(var(--ra-info));\n  border-color: hsl(var(--ra-info) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=danger] {\n  background: hsl(var(--ra-danger) / 0.10);\n  color: hsl(var(--ra-danger));\n  border-color: hsl(var(--ra-danger) / 0.30);\n}\n.ra-shell .ra-chip[data-tone=muted] {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-style: dashed;\n}\n.ra-shell .ra-group {\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-group:last-child {\n  border-bottom: 0;\n}\n.ra-shell .ra-group-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.6);\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  border: 0;\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-group-summary:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-group-summary .ra-group-chevron {\n  transition: transform .15s ease;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-chevron {\n  transform: rotate(-90deg);\n}\n.ra-shell .ra-group-name {\n  flex: 1;\n  text-align: left;\n}\n.ra-shell .ra-group-count {\n  font-size: 0.65rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.4rem;\n}\n.ra-shell .ra-group[data-open=false] .ra-group-body {\n  display: none;\n}\n.ra-shell .ra-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 2.5rem 1.5rem;\n  gap: 0.75rem;\n}\n.ra-shell .ra-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.25rem;\n  height: 3.25rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-accent) / 0.08);\n  color: hsl(var(--ra-accent));\n  margin-bottom: 0.25rem;\n}\n.ra-shell .ra-empty-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  letter-spacing: -0.01em;\n}\n.ra-shell .ra-empty-body {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-muted-text));\n  max-width: 22rem;\n  line-height: 1.45;\n}\n.ra-shell .ra-empty-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.ra-shell .ra-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.45rem 0.85rem;\n  border-radius: calc(var(--ra-radius) * 0.7);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  cursor: pointer;\n  transition:\n    background .15s ease,\n    border-color .15s ease,\n    box-shadow .15s ease,\n    transform .1s ease;\n}\n.ra-shell .ra-btn:hover {\n  background: hsl(var(--ra-muted));\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-btn:active {\n  transform: translateY(1px);\n}\n.ra-shell .ra-btn[data-variant=primary] {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-surface));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-btn[data-variant=primary]:hover {\n  background: hsl(var(--ra-accent) / 0.92);\n}\n.ra-shell .ra-btn[data-variant=ghost] {\n  background: transparent;\n  border-color: transparent;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-btn[data-variant=ghost]:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-btn[data-variant=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-btn[data-variant=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n  border-color: hsl(var(--ra-danger) / 0.40);\n}\n.ra-shell .ra-intro {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  padding: 0.4rem 2rem 0.4rem 0.5rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-info) / 0.30);\n  background: hsl(var(--ra-info) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=success] {\n  border-color: hsl(var(--ra-success) / 0.30);\n  background: hsl(var(--ra-success) / 0.08);\n}\n.ra-shell .ra-intro[data-tone=warning] {\n  border-color: hsl(var(--ra-warning) / 0.35);\n  background: hsl(var(--ra-warning) / 0.10);\n}\n.ra-shell .ra-intro-icon {\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-info) / 0.18);\n  color: hsl(var(--ra-info));\n}\n.ra-shell .ra-intro[data-tone=success] .ra-intro-icon {\n  background: hsl(var(--ra-success) / 0.18);\n  color: hsl(var(--ra-success));\n}\n.ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {\n  background: hsl(var(--ra-warning) / 0.20);\n  color: hsl(var(--ra-warning));\n}\n.ra-shell .ra-intro-body {\n  flex: 1;\n  min-width: 0;\n}\n.ra-shell .ra-intro-title {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-title-weight);\n  font-size: 0.8rem;\n  color: hsl(var(--ra-text));\n  margin: 0;\n  line-height: 1.2;\n  display: inline;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.35;\n  display: inline;\n  margin-left: 0.4rem;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 50%;\n  right: 0.35rem;\n  transform: translateY(-50%);\n  width: 1.4rem;\n  height: 1.4rem;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 0;\n  color: hsl(var(--ra-muted-text));\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n}\n.ra-shell .ra-intro-dismiss:hover {\n  background: hsl(var(--ra-text) / 0.06);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-bulk-menu {\n  min-width: 12rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow-hover);\n  padding: 0.3rem;\n  z-index: 60;\n}\n.ra-shell .ra-bulk-item {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  width: 100%;\n  padding: 0.45rem 0.6rem;\n  border-radius: calc(var(--ra-radius) * 0.6);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-bulk-item:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-bulk-item[data-tone=danger] {\n  color: hsl(var(--ra-danger));\n}\n.ra-shell .ra-bulk-item[data-tone=danger]:hover {\n  background: hsl(var(--ra-danger) / 0.10);\n}\n.ra-shell .ra-bulk-divider {\n  height: 1px;\n  background: hsl(var(--ra-border));\n  margin: 0.25rem 0;\n}\n.ra-shell .ra-preview-rail {\n  background: hsl(var(--ra-surface));\n  border-left: 1px solid hsl(var(--ra-border));\n  box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ra-shell .ra-preview-rail-header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background:\n    linear-gradient(\n      180deg,\n      hsl(var(--ra-surface)) 0%,\n      hsl(var(--ra-surface) / 0.92) 100%);\n  border-bottom: 1px solid hsl(var(--ra-border));\n  backdrop-filter: blur(6px);\n}\n.ra-shell .ra-preview-rail-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-preview-rail-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n}\n.ra-confirm-root {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: transparent;\n}\n.ra-confirm-root .ra-confirm-backdrop {\n  position: absolute;\n  inset: 0;\n  background: hsl(0 0% 0% / 0.45);\n  backdrop-filter: blur(2px);\n  animation: ra-confirm-fade .12s ease-out;\n}\n.ra-confirm-root .ra-confirm-card {\n  position: relative;\n  width: min(440px, 100%);\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08), 0 24px 48px -12px hsl(0 0% 0% / 0.32);\n  padding: 1.25rem;\n  animation: ra-confirm-pop .14s ease-out;\n}\n.ra-confirm-root .ra-confirm-header {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin-bottom: 0.5rem;\n}\n.ra-confirm-root .ra-confirm-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.12);\n  color: hsl(var(--ra-warning, 38 92% 50%));\n}\n.ra-confirm-root .ra-confirm-title {\n  font-family: var(--ra-font-display);\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n}\n.ra-confirm-root .ra-confirm-body {\n  font-size: 0.875rem;\n  color: hsl(var(--ra-muted-text));\n  margin: 0 0 1.1rem;\n  line-height: 1.45;\n}\n.ra-confirm-root .ra-confirm-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.ra-confirm-root .ra-confirm-btn {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.45rem 0.85rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease;\n}\n.ra-confirm-root .ra-confirm-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-confirm-root .ra-confirm-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-confirm-root .ra-confirm-btn-ghost:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-confirm-root .ra-confirm-btn-danger {\n  background: transparent;\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  border-color: hsl(var(--ra-danger, 0 72% 51%) / 0.45);\n}\n.ra-confirm-root .ra-confirm-btn-danger:hover {\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);\n  border-color: hsl(var(--ra-danger, 0 72% 51%));\n}\n.ra-confirm-root .ra-confirm-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-confirm-root .ra-confirm-btn-primary:hover {\n  filter: brightness(0.95);\n}\n@keyframes ra-confirm-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes ra-confirm-pop {\n  from {\n    opacity: 0;\n    transform: translateY(4px) scale(.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ra-shell .ra-unsaved-banner {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);\n  border-radius: var(--ra-radius);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  animation: ra-unsaved-slide .14s ease-out;\n}\n.ra-shell .ra-unsaved-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-warning, 38 92% 50%));\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ra-shell .ra-unsaved-context {\n  color: hsl(var(--ra-muted-text));\n  font-weight: 400;\n}\n.ra-shell .ra-unsaved-error {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  font-weight: 500;\n}\n.ra-shell .ra-unsaved-actions {\n  display: inline-flex;\n  gap: 0.4rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--ra-radius) - 2px);\n  padding: 0.3rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background-color .12s ease,\n    border-color .12s ease,\n    color .12s ease,\n    opacity .12s ease;\n}\n.ra-shell .ra-unsaved-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ra-shell .ra-unsaved-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--ra-focus-ring);\n}\n.ra-shell .ra-unsaved-btn-ghost {\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  border-color: hsl(var(--ra-border));\n}\n.ra-shell .ra-unsaved-btn-ghost:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-unsaved-btn-primary {\n  background: hsl(var(--ra-accent));\n  color: hsl(var(--ra-accent-fg, 0 0% 100%));\n  border-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-unsaved-btn-primary:hover:not(:disabled) {\n  filter: brightness(0.95);\n}\n@keyframes ra-unsaved-slide {\n  from {\n    opacity: 0;\n    transform: translateY(-3px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ra-shell .ra-clipboard-toast {\n  position: fixed;\n  bottom: 1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 90;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  max-width: min(28rem, calc(100vw - 2rem));\n  padding: 0.55rem 0.85rem;\n  border-radius: 999px;\n  background: hsl(var(--ra-text));\n  color: hsl(var(--ra-surface));\n  font-size: 0.75rem;\n  line-height: 1;\n  box-shadow: 0 8px 24px -10px hsl(0 0% 0% / 0.45);\n  animation: ra-clipboard-pop 0.18s ease-out both;\n  pointer-events: none;\n}\n@keyframes ra-clipboard-pop {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 6px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n.ra-shell .ra-row-menu-wrap {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.25rem;\n}\n.ra-shell .ra-row-menu-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 0.35rem;\n  background: transparent;\n  color: hsl(var(--ra-muted-text));\n  opacity: 0;\n  transition:\n    opacity .15s ease,\n    background .15s ease,\n    color .15s ease;\n  border: 1px solid transparent;\n}\n.ra-shell .ra-row:hover .ra-row-menu-trigger,\n.ra-shell .ra-card-hover:hover .ra-row-menu-trigger,\n.ra-shell .ra-row-menu-trigger:focus-visible,\n.ra-shell .ra-row-menu-trigger[aria-expanded=true] {\n  opacity: 1;\n}\n.ra-shell .ra-row-menu-trigger:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-row-menu {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 4px);\n  z-index: 50;\n  min-width: 11rem;\n  padding: 0.25rem;\n  border-radius: 0.5rem;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  box-shadow: 0 12px 28px -10px hsl(0 0% 0% / 0.25);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n.ra-shell .ra-row-menu-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.35rem;\n  font-size: 0.75rem;\n  color: hsl(var(--ra-text));\n  background: transparent;\n  border: 0;\n  text-align: left;\n  width: 100%;\n  cursor: pointer;\n}\n.ra-shell .ra-row-menu-item:hover:not(:disabled) {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-row-menu-item:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ra-shell .ra-item-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-item-list-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem 1.25rem 1.5rem;\n}\n.ra-shell .ra-item-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 0.75rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-toolbar-title {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-toolbar-count {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  padding: 0.05rem 0.45rem;\n}\n.ra-shell .ra-item-toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-item-table-wrap {\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  background: hsl(var(--ra-surface));\n  overflow: hidden;\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-item-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-table thead th {\n  text-align: left;\n  font-size: 0.7rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: hsl(var(--ra-muted-text));\n  padding: 0.65rem 0.85rem;\n  background: hsl(var(--ra-muted) / 0.55);\n  border-bottom: 1px solid hsl(var(--ra-border));\n}\n.ra-shell .ra-item-table tbody td {\n  padding: 0.65rem 0.85rem;\n  border-bottom: 1px solid hsl(var(--ra-border) / 0.7);\n  vertical-align: middle;\n}\n.ra-shell .ra-item-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ra-shell .ra-item-row {\n  cursor: pointer;\n  transition: background .12s ease;\n}\n.ra-shell .ra-item-row:hover {\n  background: var(--ra-row-hover);\n}\n.ra-shell .ra-item-row[data-selected=true] {\n  background: var(--ra-row-active-bg);\n}\n.ra-shell .ra-item-row-title {\n  font-weight: var(--ra-title-weight);\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-item-row-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n}\n.ra-shell .ra-item-row-meta {\n  font-size: 0.78rem;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-item-row-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n.ra-shell .ra-item-row-actions .ra-row-action + .ra-row-action {\n  margin-left: 0.15rem;\n}\n.ra-shell .ra-item-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--ra-item-card-min, 240px), 1fr));\n  gap: 0.85rem;\n}\n.ra-shell .ra-item-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--ra-item-gallery-min, 320px), 1fr));\n  gap: 1rem;\n}\n.ra-shell .ra-item-cards[data-card-size=sm] {\n  --ra-item-card-min: 180px;\n}\n.ra-shell .ra-item-cards[data-card-size=md] {\n  --ra-item-card-min: 240px;\n}\n.ra-shell .ra-item-cards[data-card-size=lg] {\n  --ra-item-card-min: 320px;\n  gap: 1rem;\n}\n.ra-shell .ra-item-gallery[data-card-size=sm] {\n  --ra-item-gallery-min: 240px;\n}\n.ra-shell .ra-item-gallery[data-card-size=md] {\n  --ra-item-gallery-min: 320px;\n}\n.ra-shell .ra-item-gallery[data-card-size=lg] {\n  --ra-item-gallery-min: 420px;\n  gap: 1.25rem;\n}\n.ra-shell .ra-item-cards[data-card-size=lg] .ra-item-card-title,\n.ra-shell .ra-item-gallery[data-card-size=lg] .ra-item-card-title {\n  font-size: 0.95rem;\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n.ra-shell .ra-item-cards[data-card-size=lg] .ra-item-card-body,\n.ra-shell .ra-item-gallery[data-card-size=lg] .ra-item-card-body {\n  padding: 0.85rem 1rem 1rem;\n}\n.ra-shell .ra-item-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  text-align: left;\n  padding: 0;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    box-shadow .18s ease,\n    transform .12s ease,\n    border-color .15s ease;\n  box-shadow: var(--ra-card-shadow);\n  font-family: inherit;\n  color: inherit;\n}\n.ra-shell .ra-item-card:hover {\n  box-shadow: var(--ra-card-shadow-hover);\n  border-color: hsl(var(--ra-accent) / 0.30);\n}\n.ra-shell .ra-item-card[data-selected=true] {\n  border-color: hsl(var(--ra-accent) / 0.55);\n  box-shadow: var(--ra-card-shadow-hover);\n}\n.ra-shell .ra-item-card-thumb {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.12),\n      hsl(var(--ra-accent) / 0.04));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--ra-accent));\n  overflow: hidden;\n}\n.ra-shell .ra-item-card-thumb--gallery {\n  aspect-ratio: 16 / 9;\n}\n.ra-shell .ra-item-card-thumb img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ra-shell .ra-item-card-initials {\n  font-family: var(--ra-font-display);\n  font-weight: var(--ra-display-weight);\n  font-size: 1.5rem;\n  letter-spacing: 0.02em;\n}\n.ra-shell .ra-item-card-body {\n  padding: 0.65rem 0.8rem 0.85rem;\n  min-width: 0;\n}\n.ra-shell .ra-item-card-title {\n  font-weight: var(--ra-title-weight);\n  font-size: 0.85rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-item-card-sub {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.15rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-shell .ra-item-card-delete {\n  position: absolute;\n  top: 0.4rem;\n  right: 0.4rem;\n  background: hsl(var(--ra-surface) / 0.85);\n  backdrop-filter: blur(4px);\n  opacity: 0;\n  transition: opacity .15s ease;\n}\n.ra-shell .ra-item-card:hover .ra-item-card-delete,\n.ra-shell .ra-item-card:focus-within .ra-item-card-delete {\n  opacity: 1;\n}\n.ra-shell .ra-item-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 1.25rem;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-item-nav-position {\n  font-size: 0.72rem;\n  color: hsl(var(--ra-muted-text));\n  font-variant-numeric: tabular-nums;\n}\n.ra-shell .ra-item-nav-arrows {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n}\n.ra-shell .ra-item-nav-arrows .ra-row-action[disabled] {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.ra-shell .ra-sibling-rail {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n.ra-shell .ra-sibling-back {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.6rem 0.85rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-muted) / 0.5);\n  border: 0;\n  border-bottom: 1px solid hsl(var(--ra-border));\n  cursor: pointer;\n  text-align: left;\n  transition: background .12s ease, color .12s ease;\n}\n.ra-shell .ra-sibling-back:hover {\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-sibling-heading {\n  padding: 0.6rem 0.85rem 0.4rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-shell .ra-sibling-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n.ra-shell .ra-sibling-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ra-shell .ra-status-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: 9999px;\n}\n.ra-shell .ra-status-icon > svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.ra-shell .ra-status-icon--own {\n  color: hsl(var(--ra-status-own));\n}\n.ra-shell .ra-status-icon--shared {\n  color: hsl(var(--ra-status-shared));\n}\n.ra-shell .ra-status-icon--missing {\n  color: hsl(var(--ra-status-missing) / 0.7);\n}\n.ra-shell .ra-row-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-row-scope {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: calc(var(--ra-radius) * 0.5);\n  background: hsl(var(--ra-muted));\n  color: hsl(var(--ra-muted-text));\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.55;\n  transition:\n    opacity .12s ease,\n    color .12s ease,\n    background .12s ease;\n}\n.ra-shell .ra-row:hover .ra-row-scope {\n  opacity: 0.85;\n}\n.ra-shell .ra-row[data-selected=true] .ra-row-scope {\n  opacity: 1;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-row[data-tone=own] .ra-row-sub {\n  color: hsl(var(--ra-status-own));\n}\n.ra-shell .ra-row[data-tone=shared] .ra-row-sub {\n  color: hsl(var(--ra-status-shared));\n}\n.ra-shell .ra-row[data-selected=true] {\n  background:\n    linear-gradient(\n      90deg,\n      hsl(var(--ra-accent) / 0.10) 0%,\n      hsl(var(--ra-accent) / 0.04) 100%);\n  border-left-width: 3px;\n  border-left-color: hsl(var(--ra-accent));\n}\n.ra-shell .ra-dirty-pip {\n  display: inline-block;\n  width: 0.45rem;\n  height: 0.45rem;\n  border-radius: 9999px;\n  background: hsl(var(--ra-warning));\n  box-shadow: 0 0 0 2px hsl(var(--ra-warning) / 0.18);\n  flex-shrink: 0;\n}\n.ra-shell .ra-error-pip {\n  display: inline-block;\n  width: 0.45rem;\n  height: 0.45rem;\n  border-radius: 9999px;\n  background: hsl(var(--ra-danger, 0 72% 51%));\n  box-shadow: 0 0 0 2px hsl(var(--ra-danger, 0 72% 51%) / 0.22);\n  flex-shrink: 0;\n}\n.ra-shell .ra-group-summary {\n  background: transparent;\n}\n.ra-shell {\n  position: relative;\n}\n.ra-shell .ra-help-float {\n  position: absolute;\n  top: 0.65rem;\n  right: 0.85rem;\n  z-index: 5;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.6rem;\n  height: 1.6rem;\n  padding: 0;\n  color: hsl(var(--ra-muted-text));\n  background: hsl(var(--ra-surface) / 0.85);\n  backdrop-filter: blur(6px);\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: 999px;\n  cursor: pointer;\n  transition:\n    color .12s ease,\n    background .12s ease,\n    border-color .12s ease;\n}\n.ra-shell .ra-help-float:hover {\n  color: hsl(var(--ra-accent));\n  border-color: hsl(var(--ra-accent) / 0.4);\n  background: hsl(var(--ra-surface));\n}\n.ra-shell .ra-help-float svg {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.ra-shell .ra-help-float > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.ra-shell .ra-preview-reopen {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  z-index: 4;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  padding: 0.65rem 0.45rem;\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-muted-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-right: 0;\n  border-radius: calc(var(--ra-radius) * 0.85) 0 0 calc(var(--ra-radius) * 0.85);\n  box-shadow: var(--ra-card-shadow);\n  cursor: pointer;\n  transition:\n    color .12s ease,\n    background .12s ease,\n    padding-right .15s ease;\n  writing-mode: vertical-rl;\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.ra-shell .ra-preview-reopen:hover {\n  color: hsl(var(--ra-accent));\n  background: hsl(var(--ra-accent) / 0.04);\n  padding-right: 0.6rem;\n}\n.ra-shell .ra-preview-reopen svg {\n  width: 0.85rem;\n  height: 0.85rem;\n  writing-mode: horizontal-tb;\n}\n.ra-shell .ra-unsaved-tray {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);\n  background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);\n  border-radius: var(--ra-radius);\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text));\n  animation: ra-unsaved-slide .14s ease-out;\n}\n.ra-shell .ra-unsaved-count {\n  flex: 1;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.15rem 0.4rem;\n  margin: -0.15rem -0.4rem;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  border-radius: calc(var(--ra-radius) - 4px);\n}\n.ra-shell .ra-unsaved-count:hover {\n  background: hsl(var(--ra-muted) / 0.6);\n}\n.ra-shell .ra-unsaved-error-chip {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid hsl(var(--ra-danger, 0 72% 51%) / 0.35);\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  border-radius: 999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  cursor: pointer;\n}\n.ra-shell .ra-unsaved-error-chip:hover {\n  filter: brightness(0.97);\n}\n.ra-shell .ra-unsaved-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 60;\n  min-width: 18rem;\n  max-height: 18rem;\n  overflow: auto;\n  background: hsl(var(--ra-surface));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 12px 30px -10px hsl(0 0% 0% / 0.25);\n  padding: 0.3rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n}\n.ra-shell .ra-unsaved-popover-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.4rem 0.55rem;\n  background: transparent;\n  border: 0;\n  border-radius: calc(var(--ra-radius) - 2px);\n  cursor: pointer;\n  text-align: left;\n  font: inherit;\n  color: hsl(var(--ra-text));\n}\n.ra-shell .ra-unsaved-popover-row:hover {\n  background: hsl(var(--ra-muted));\n}\n.ra-shell .ra-unsaved-popover-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  flex-shrink: 0;\n}\n.ra-shell .ra-unsaved-popover-label {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 0.8125rem;\n}\n.ra-shell .ra-unsaved-popover-ctx {\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.7rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.ra-shell .ra-unsaved-popover-err {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.7rem;\n  font-weight: 500;\n}\n.ra-saveall-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  background: hsl(0 0% 0% / 0.45);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  animation: ra-confirm-fade .12s ease-out;\n}\n.ra-saveall-card {\n  background: hsl(var(--ra-surface));\n  color: hsl(var(--ra-text));\n  border: 1px solid hsl(var(--ra-border));\n  border-radius: var(--ra-radius);\n  box-shadow: 0 24px 48px -16px hsl(0 0% 0% / 0.45);\n  width: min(28rem, 100%);\n  max-height: min(80vh, 36rem);\n  display: flex;\n  flex-direction: column;\n  animation: ra-confirm-pop .14s ease-out;\n}\n.ra-saveall-header {\n  padding: 1rem 1rem 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.ra-saveall-title {\n  font-weight: 600;\n  font-size: 0.95rem;\n}\n.ra-saveall-progress {\n  height: 4px;\n  background: hsl(var(--ra-muted));\n  border-radius: 999px;\n  overflow: hidden;\n}\n.ra-saveall-progress-bar {\n  height: 100%;\n  background: hsl(var(--ra-accent));\n  transition: width .2s ease;\n}\n.ra-saveall-counter {\n  color: hsl(var(--ra-muted-text));\n  font-size: 0.75rem;\n  font-variant-numeric: tabular-nums;\n}\n.ra-saveall-list {\n  list-style: none;\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  overflow: auto;\n  flex: 1;\n}\n.ra-saveall-row {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.45rem 0.5rem;\n  border-radius: calc(var(--ra-radius) - 4px);\n  font-size: 0.8125rem;\n}\n.ra-saveall-row[data-status=saving] {\n  background: hsl(var(--ra-accent) / 0.06);\n}\n.ra-saveall-row[data-status=saved] {\n  color: hsl(var(--ra-muted-text));\n}\n.ra-saveall-row[data-status=error] {\n  background: hsl(var(--ra-danger, 0 72% 51%) / 0.06);\n}\n.ra-saveall-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: hsl(var(--ra-muted-text));\n}\n.ra-saveall-row[data-status=saved] .ra-saveall-icon {\n  color: hsl(var(--ra-success, 142 71% 45%));\n}\n.ra-saveall-row[data-status=saving] .ra-saveall-icon {\n  color: hsl(var(--ra-accent));\n}\n.ra-saveall-row[data-status=error] .ra-saveall-icon {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n}\n.ra-saveall-label {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-saveall-err {\n  color: hsl(var(--ra-danger, 0 72% 51%));\n  font-size: 0.7rem;\n  max-width: 12rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ra-saveall-actions {\n  padding: 0.75rem 1rem 1rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.4rem;\n  border-top: 1px solid hsl(var(--ra-border));\n}\n.ra-spin {\n  animation: ra-spin 1s linear infinite;\n}\n@keyframes ra-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
 var TOP_LEVEL_SCOPES = ["collection", "rule", "product"];
 var WARNED_FACET_DEPRECATED = false;
 var DRAFT_ID = "__draft__";
+var isDraftId = (id) => !!id && (id === DRAFT_ID || id.startsWith("draft:"));
+var mintDraftItemId = () => {
+  const rand = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `draft:${rand}`;
+};
 var productItemToSummary = (p) => {
   const ref = buildRef({ productId: p.id });
   return {
@@ -4747,9 +4783,11 @@ function RecordsAdminShellInner(props) {
     renderItemList,
     renderItemCard,
     renderItemEmpty,
+    itemCardSize = "md",
     collectionRailMode = "siblings",
     // Deep linking
-    deepLink
+    deepLink,
+    deriveDraftLabel
   } = props;
   const i18n = { ...DEFAULT_I18N, ...i18nOverride ?? {} };
   const icons = useMemo(() => mergeIcons(iconsOverride), [iconsOverride]);
@@ -5060,7 +5098,7 @@ function RecordsAdminShellInner(props) {
     // fall back to anchor-based `match()` at the collection root and the
     // editor would mount against `null` data — surfacing as the host's
     // "Select a {noun} from the list to edit" placeholder.
-    recordId: isCollection && selectedItemId && selectedItemId !== DRAFT_ID ? selectedItemId : selectedRecordId && selectedRecordId !== DRAFT_ID ? selectedRecordId : void 0,
+    recordId: isCollection && selectedItemId && !isDraftId(selectedItemId) ? selectedItemId : selectedRecordId && !isDraftId(selectedRecordId) ? selectedRecordId : void 0,
     supportedScopes: supportedForResolution,
     enabled: !!editingTargetScope
   });
@@ -5115,7 +5153,8 @@ function RecordsAdminShellInner(props) {
         setSelectedBatchId(void 0);
       }
       refetchAll();
-    }
+    },
+    deriveDraftLabel
   });
   useUnsavedGuard({
     isDirty: editorCtx.isDirty,
@@ -5386,7 +5425,7 @@ function RecordsAdminShellInner(props) {
   const onItemCreate = useCallback(() => {
     if (!isCollection) return;
     void runWithGuard(() => {
-      const id = generateItemId ? generateItemId() : DRAFT_ID;
+      const id = generateItemId ? generateItemId() : mintDraftItemId();
       setSelectedItemId(id);
       onTelemetry?.({ type: "item.create", recordType, scopeRef: baseScopeRef });
       deepLinkState.emit({ recordId: null, scope: baseScopeRef || null }, "record.open");
@@ -5394,7 +5433,7 @@ function RecordsAdminShellInner(props) {
   }, [isCollection, runWithGuard, generateItemId, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
   const onItemDelete = useCallback(async (itemId) => {
     if (!isCollection) return;
-    if (itemId === DRAFT_ID) return;
+    if (isDraftId(itemId)) return;
     if (onBeforeDelete) {
       const ok = await onBeforeDelete(editingScope ?? parseRef(""));
       if (!ok) return;
@@ -5475,7 +5514,7 @@ function RecordsAdminShellInner(props) {
         i18n: { previewAs: i18n.previewAs, previewAsDefault: i18n.previewAsDefault }
       }
     ) : null;
-    const itemNav = isCollection && selectedItemId && itemPosition ? /* @__PURE__ */ jsx(
+    const itemNav = isCollection && selectedItemId && itemPosition && ruleWizardStep === null ? /* @__PURE__ */ jsx(
       EditorItemNav,
       {
         label: editorHeaderLabel,
@@ -5649,7 +5688,7 @@ function RecordsAdminShellInner(props) {
   }, []);
   const onRuleWizardCreateItem = useCallback(() => {
     if (!isCollection) return;
-    const id = generateItemId ? generateItemId() : DRAFT_ID;
+    const id = generateItemId ? generateItemId() : mintDraftItemId();
     setSelectedItemId(id);
   }, [isCollection, generateItemId]);
   const hasGlobalRecord = useMemo(
@@ -5899,7 +5938,7 @@ function RecordsAdminShellInner(props) {
             className: "flex-1 grid border-t overflow-hidden",
             style: { gridTemplateColumns: "minmax(260px, 320px) 1fr", borderColor: "hsl(var(--ra-border))", marginTop: "0.75rem" },
             children: [
-              /* @__PURE__ */ jsx("aside", { className: "border-r overflow-hidden flex flex-col", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: isCollection && selectedItemId && collectionRailMode === "siblings" ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("aside", { className: "border-r overflow-hidden flex flex-col", style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" }, children: isCollection && selectedItemId && collectionRailMode === "siblings" && ruleWizardStep === null ? /* @__PURE__ */ jsx(
                 SiblingRail,
                 {
                   items: collectionItems.items,
@@ -6141,6 +6180,7 @@ function RecordsAdminShellInner(props) {
                     renderItemCard,
                     renderItemEmpty,
                     itemColumns,
+                    cardSize: itemCardSize,
                     i18n
                   }
                 ),