@proveanything/smartlinks-utils-ui 0.7.5 → 0.7.7

package/dist/components/RecordsAdmin/index.js

@@ -1,4 +1,4 @@
-import { styleInject } from '../../chunk-RBKJ4LZG.js';
+import { styleInject } from '../../chunk-B34MMOND.js';
 import { FacetRuleEditor } from '../../chunk-JMCV6FOW.js';
 import { useFacets } from '../../chunk-4LHF5JB7.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
@@ -2707,7 +2707,7 @@ function RecordEditor({
   const SaveIcon = actionIcons?.save;
   const DiscardIcon = actionIcons?.discard;
   const DeleteIcon = actionIcons?.delete;
-  const sourceLabel = ctx.source === "inherited" ? "Inherited" : null;
+  const showInherited = ctx.source === "inherited";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs(
       "header",
@@ -2715,46 +2715,43 @@ function RecordEditor({
         className: "sticky top-0 z-40 px-5 py-3 border-b flex items-start justify-between gap-3",
         style: { borderColor: "hsl(var(--ra-border))", background: "hsl(var(--ra-surface))" },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            headerLabel ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "text-sm font-medium truncate",
-                  style: { color: "hsl(var(--ra-text))" },
-                  title: headerLabel,
-                  children: headerLabel
-                }
-              ),
-              headerSubtitle && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "text-xs truncate",
-                  style: { color: "hsl(var(--ra-muted-text))" },
-                  title: headerSubtitle,
-                  children: headerSubtitle
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope }),
-            (sourceLabel || ctx.isDirty) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-1", children: [
-              sourceLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(StatusDot, { source: ctx.source }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide", style: { color: "hsl(var(--ra-muted-text))" }, children: sourceLabel })
-              ] }),
-              ctx.isDirty && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: `flex items-center gap-1 text-[10px] uppercase tracking-wide ${sourceLabel ? "ml-2" : ""}`,
-                  style: { color: "hsl(var(--ra-accent))" },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "ra-status-dot ra-status-shared", "aria-hidden": "true" }),
-                    i18n.unsavedBadge ?? "Unsaved"
-                  ]
-                }
-              )
-            ] })
-          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: headerLabel ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-sm font-medium truncate",
+                style: { color: "hsl(var(--ra-text))" },
+                title: headerLabel,
+                children: headerLabel
+              }
+            ),
+            headerSubtitle && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-xs truncate",
+                style: { color: "hsl(var(--ra-muted-text))" },
+                title: headerSubtitle,
+                children: headerSubtitle
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(ScopeBreadcrumb, { scope: ctx.scope }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 shrink-0", children: [
+            showInherited && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded mt-0.5",
+                style: {
+                  color: "hsl(var(--ra-muted-text))",
+                  background: "hsl(var(--ra-muted) / 0.5)",
+                  border: "1px solid hsl(var(--ra-border) / 0.6)"
+                },
+                title: "This record is inherited from a parent scope",
+                children: [
+                  /* @__PURE__ */ jsx(StatusDot, { source: ctx.source }),
+                  "Inherited"
+                ]
+              }
+            ),
             headerMeta && /* @__PURE__ */ jsx(
               "code",
               {
@@ -3559,59 +3556,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,
@@ -3626,6 +3633,7 @@ function ItemListView({
   renderItemCard,
   renderItemEmpty,
   itemColumns,
+  cardSize = "md",
   i18n
 }) {
   const newLabel = i18n.newItem.includes("{noun}") ? i18n.newItem.replace("{noun}", itemNoun) : i18n.newItem;
@@ -3708,6 +3716,7 @@ function ItemListView({
         selectedId: ctx.selectedId,
         ctx,
         renderCard: renderItemCard,
+        cardSize,
         i18n
       }
     );
@@ -4296,8 +4305,12 @@ var UnsavedTray = ({
     }
     return Array.from(byBucket.values()).sort((a, b) => a.order - b.order);
   }, [drafts]);
-  const total = uniqueDrafts.length;
-  const errors = uniqueDrafts.filter((d) => d.status === "error").length;
+  const liveDrafts = useMemo(
+    () => uniqueDrafts.filter((d) => d.status !== "saved"),
+    [uniqueDrafts]
+  );
+  const total = liveDrafts.length;
+  const errors = liveDrafts.filter((d) => d.status === "error").length;
   const isSingle = total === 1;
   useEffect(() => {
     if (!open) return;
@@ -4308,7 +4321,7 @@ var UnsavedTray = ({
     return () => window.removeEventListener("mousedown", onDoc);
   }, [open]);
   if (total === 0) return null;
-  const countLabel = isSingle ? uniqueDrafts[0].label || "this record" : countTemplate.replace("{n}", String(total));
+  const countLabel = isSingle ? liveDrafts[0].label || "this record" : countTemplate.replace("{n}", String(total));
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4378,7 +4391,7 @@ var UnsavedTray = ({
             }
           )
         ] }),
-        open && !isSingle && /* @__PURE__ */ jsx("div", { className: "ra-unsaved-popover", role: "menu", children: uniqueDrafts.map((d) => /* @__PURE__ */ jsxs(
+        open && !isSingle && /* @__PURE__ */ jsx("div", { className: "ra-unsaved-popover", role: "menu", children: liveDrafts.map((d) => /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -4683,7 +4696,7 @@ 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__";
@@ -4692,6 +4705,10 @@ 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 coerceDraftItemId = (generateItemId) => {
+  const candidate = generateItemId ? generateItemId() : mintDraftItemId();
+  return isDraftId(candidate) ? candidate : `draft:${candidate}`;
+};
 var productItemToSummary = (p) => {
   const ref = buildRef({ productId: p.id });
   return {
@@ -4771,6 +4788,7 @@ function RecordsAdminShellInner(props) {
     renderItemList,
     renderItemCard,
     renderItemEmpty,
+    itemCardSize = "md",
     collectionRailMode = "siblings",
     // Deep linking
     deepLink,
@@ -5412,7 +5430,7 @@ function RecordsAdminShellInner(props) {
   const onItemCreate = useCallback(() => {
     if (!isCollection) return;
     void runWithGuard(() => {
-      const id = generateItemId ? generateItemId() : mintDraftItemId();
+      const id = coerceDraftItemId(generateItemId);
       setSelectedItemId(id);
       onTelemetry?.({ type: "item.create", recordType, scopeRef: baseScopeRef });
       deepLinkState.emit({ recordId: null, scope: baseScopeRef || null }, "record.open");
@@ -5675,7 +5693,7 @@ function RecordsAdminShellInner(props) {
   }, []);
   const onRuleWizardCreateItem = useCallback(() => {
     if (!isCollection) return;
-    const id = generateItemId ? generateItemId() : mintDraftItemId();
+    const id = coerceDraftItemId(generateItemId);
     setSelectedItemId(id);
   }, [isCollection, generateItemId]);
   const hasGlobalRecord = useMemo(
@@ -5860,7 +5878,7 @@ function RecordsAdminShellInner(props) {
               onShowIntro: undismiss
             }
           ) : null,
-          dirtyStrategy === "keep" && (dirtyDrafts.length > 0 || editorCtx.isDirty) && /* @__PURE__ */ jsx(
+          dirtyStrategy === "keep" && (dirtyDrafts.some((d) => d.status !== "saved") || editorCtx.isDirty) && /* @__PURE__ */ jsx(
             UnsavedTray,
             {
               drafts: dirtyDrafts,
@@ -6167,6 +6185,7 @@ function RecordsAdminShellInner(props) {
                     renderItemCard,
                     renderItemEmpty,
                     itemColumns,
+                    cardSize: itemCardSize,
                     i18n
                   }
                 ),