@proveanything/smartlinks-utils-ui 0.4.2 → 0.6.1

package/dist/components/RecordsAdmin/index.js

@@ -2,8 +2,8 @@ import { styleInject } from '../../chunk-HXJLROC2.js';
 import { FacetRuleEditor } from '../../chunk-JMCV6FOW.js';
 import { useFacets } from '../../chunk-4LHF5JB7.js';
 import { cn } from '../../chunk-L7FQ52F5.js';
-import { listRecords, getRecordByRef, parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, upsertRecord, deleteRecord } from '../../chunk-76Y4UTYQ.js';
-export { bulkDelete, bulkUpsert, deleteRecord, getRecordByRef, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-76Y4UTYQ.js';
+import { listRecords, parsedRefToTarget, parsedRefToScope, matchRecords, scopesEqual, getRecordById, updateRecord, upsertRecord, removeRecord } from '../../chunk-WB775Z2I.js';
+export { bulkDelete, bulkUpsert, getRecordById, listRecords, matchRecords, parsedRefToScope, parsedRefToTarget, removeRecord, restoreRecord, scopesEqual, upsertRecord } from '../../chunk-WB775Z2I.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext, createElement } from 'react';
 import { ChevronDown, Database, Lightbulb, SearchX, Inbox, LayoutGrid, Eye, MoreHorizontal, Download, Upload, Trash2, Copy, Pencil, Plus, CircleDashed, ArrowDownLeft, CheckCircle2, SlidersHorizontal, Globe, Tag, Boxes, Layers, Package, Rows3, List, ChevronRight, Eraser, ClipboardPaste, Box, X, Image, Table, ArrowLeft, ChevronLeft, AlertTriangle, Info, HelpCircle, Search, CornerDownLeft, Circle, AlertCircle, Undo2, Save, Target, Settings2 } from 'lucide-react';
 import { useQueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query';
@@ -138,7 +138,7 @@ var ALL_ITEM_VIEWS = ["table", "cards", "gallery"];
 
 // src/components/RecordsAdmin/types/deepLink.ts
 var DEFAULT_DEEP_LINK_PARAM_NAMES = {
-  item: "item",
+  recordId: "recordId",
   scope: "scope",
   view: "view"
 };
@@ -150,11 +150,7 @@ var KIND_KEYS = {
   variant: "variantId",
   batch: "batchId",
   proof: "proofId",
-  collection: "collectionId",
-  // `rule` records carry an opaque id under the `rule:` prefix; we expose
-  // the id via `productId`-equivalent slot to keep ParsedRef flat. Resolved
-  // refs use the `ruleId` field (added below) so callers can disambiguate.
-  rule: "ruleId"
+  collection: "collectionId"
 };
 var parseRef = (raw) => {
   const parsed = { kind: "collection", raw };
@@ -174,11 +170,9 @@ var parseRef = (raw) => {
       } else {
         parsed.facetId = id;
       }
-    } else if (k === "item") {
-      parsed.itemId = id;
-      continue;
     } else if (k in KIND_KEYS) {
-      parsed[KIND_KEYS[k]] = id;
+      const slot = KIND_KEYS[k];
+      parsed[slot] = id;
     }
     if (k !== "collection") kind = k;
   }
@@ -194,7 +188,6 @@ var buildRef = (a) => {
   if (a.variantId) parts.push(`variant:${a.variantId}`);
   if (a.batchId) parts.push(`batch:${a.batchId}`);
   if (a.proofId) parts.push(`proof:${a.proofId}`);
-  if (a.itemId) parts.push(`item:${a.itemId}`);
   return parts.join("/");
 };
 var resolutionChain = (target, supportedScopes) => {
@@ -216,35 +209,26 @@ var resolutionChain = (target, supportedScopes) => {
   }
   return Array.from(new Set(chain));
 };
-var splitItemRef = (raw) => {
-  if (!raw) return { scopeRef: "" };
-  const segs = raw.split("/").filter(Boolean);
-  const last = segs[segs.length - 1];
-  if (last && last.startsWith("item:")) {
-    return { scopeRef: segs.slice(0, -1).join("/"), itemId: last.slice("item:".length) };
-  }
-  return { scopeRef: raw };
-};
-var buildItemRef = (scopeRef, itemId) => {
-  return scopeRef ? `${scopeRef}/item:${itemId}` : `item:${itemId}`;
-};
 var defaultClassify = (r) => {
   if (!r.data) return "empty";
   const keys = Object.keys(r.data);
   if (keys.length === 0) return "empty";
   return "configured";
 };
-var matchesScope = (kind, rec, p) => {
-  const hasRule = !!rec.facetRule || (rec.ref ?? "").startsWith("rule:");
+var matchesScope = (kind, rec, _p) => {
+  const hasRule = !!rec.facetRule;
   if (kind === "rule") return hasRule;
   if (hasRule) return false;
+  const productId = rec.productId ?? void 0;
+  const variantId = rec.variantId ?? void 0;
+  const batchId = rec.batchId ?? void 0;
+  const proofId = rec.proofId ?? void 0;
   if (kind === "collection") {
-    return !p.productId && !p.facetId && !p.variantId && !p.batchId && !p.proofId;
+    return !productId && !variantId && !batchId && !proofId;
   }
-  if (kind === "product") return !!p.productId && !p.variantId && !p.batchId;
-  if (kind === "facet") return !!p.facetId;
-  if (kind === "variant") return !!p.variantId;
-  if (kind === "batch") return !!p.batchId;
+  if (kind === "product") return !!productId && !variantId && !batchId;
+  if (kind === "variant") return !!variantId;
+  if (kind === "batch") return !!batchId;
   return false;
 };
 var matchesContext = (p, ctx) => {
@@ -256,10 +240,22 @@ var matchesContext = (p, ctx) => {
 };
 var toSummary = (rec) => {
   const ref = rec.ref ?? "";
-  const scope = parseRef(ref);
+  const productId = rec.productId ?? void 0;
+  const variantId = rec.variantId ?? void 0;
+  const batchId = rec.batchId ?? void 0;
+  const proofId = rec.proofId ?? void 0;
+  const scope = {
+    kind: batchId ? "batch" : variantId ? "variant" : productId ? "product" : "collection",
+    raw: ref,
+    productId,
+    variantId,
+    batchId,
+    proofId
+  };
   const facetRule = rec.facetRule ?? null;
+  if (facetRule) scope.kind = "rule";
   const ruleLabel = facetRule && facetRule.all && facetRule.all.length > 0 ? facetRule.all.length === 1 ? "Rule \xB7 1 facet" : `Rule \xB7 ${facetRule.all.length} facets` : null;
-  const fallbackLabel = scope.batchId ?? scope.variantId ?? scope.productId ?? scope.facetValue ?? scope.facetId ?? ruleLabel ?? (ref.startsWith("rule:") ? "Rule-targeted record" : ref || "Global record");
+  const fallbackLabel = scope.batchId ?? scope.variantId ?? scope.productId ?? ruleLabel ?? (ref || "Global record");
   return {
     id: rec.id,
     ref,
@@ -365,57 +361,65 @@ var useRecordList = (args) => {
 
 // src/components/RecordsAdmin/data/resolveRecord.ts
 var resolveRecord = async (args) => {
-  if (args.target.kind === "rule" && args.target.raw) {
-    const rec = await getRecordByRef(args.ctx, args.target.raw).catch(() => null);
-    if (!rec) return { data: null, source: "empty" };
-    const recFacetRule = rec.facetRule ?? null;
-    return {
-      data: rec.data,
-      source: "self",
-      sourceRef: rec.ref ?? args.target.raw,
-      facetRule: recFacetRule
-    };
-  }
   const target = parsedRefToTarget(args.target);
   const editingScope = parsedRefToScope(args.target);
   const result = await matchRecords(args.ctx, target, { strategy: "all" }).catch(() => null);
-  const records = result?.records ?? [];
+  const entries = result?.data ?? [];
   console.info("[RecordsAdmin/resolveRecord]", {
     editingScope,
     target,
-    matchCount: records.length,
-    winnerScope: records[0]?.record?.scope,
-    winnerRef: records[0]?.record?.ref
+    matchCount: entries.length,
+    winnerAnchors: entries[0] && {
+      productId: entries[0].productId,
+      variantId: entries[0].variantId,
+      batchId: entries[0].batchId,
+      proofId: entries[0].proofId
+    },
+    winnerRef: entries[0]?.ref
   });
-  if (records.length === 0) {
+  if (entries.length === 0) {
     return { data: null, source: "empty" };
   }
-  const winnerEntry = records[0];
-  const winner = winnerEntry.record;
-  const winnerIsSelf = scopesEqual(winner.scope, editingScope);
+  const winner = entries[0];
+  const winnerIsSelf = scopesEqual(
+    {
+      productId: winner.productId,
+      variantId: winner.variantId,
+      batchId: winner.batchId,
+      proofId: winner.proofId
+    },
+    editingScope
+  );
   console.info("[RecordsAdmin/resolveRecord] classification", {
     winnerIsSelf,
-    winnerScope: winner.scope,
+    winnerAnchors: {
+      productId: winner.productId,
+      variantId: winner.variantId,
+      batchId: winner.batchId,
+      proofId: winner.proofId
+    },
     editingScope
   });
   if (winnerIsSelf) {
-    const parent = records[1]?.record;
+    const parent = entries[1];
     return {
       data: winner.data,
       source: "self",
       sourceRef: winner.ref ?? void 0,
+      recordId: winner.id,
       parentValue: args.withParent && parent ? parent.data : void 0,
-      matchedAt: winnerEntry.matchedAt,
-      matchedRule: winnerEntry.matchedRule
+      matchedAt: winner.matchedAt,
+      matchedRule: winner.matchedRule
     };
   }
   return {
     data: winner.data,
     source: "inherited",
     sourceRef: winner.ref ?? void 0,
+    recordId: winner.id,
     parentValue: args.withParent ? winner.data : void 0,
-    matchedAt: winnerEntry.matchedAt,
-    matchedRule: winnerEntry.matchedRule
+    matchedAt: winner.matchedAt,
+    matchedRule: winner.matchedRule
   };
 };
 
@@ -433,7 +437,7 @@ var resolvedRecordQueryKey = (args) => [
   args.facetId ?? null,
   args.facetValue ?? null,
   args.proofId ?? null,
-  args.ref ?? null,
+  args.recordId ?? null,
   args.withParent ?? true
 ];
 function useResolvedRecord(args) {
@@ -448,7 +452,7 @@ function useResolvedRecord(args) {
     facetId,
     facetValue,
     proofId,
-    ref,
+    recordId,
     supportedScopes = DEFAULT_SCOPES,
     enabled = true,
     withParent = true
@@ -464,19 +468,35 @@ function useResolvedRecord(args) {
       facetId,
       facetValue,
       proofId,
-      ref,
+      recordId,
       withParent
     }),
     enabled: enabled && !!collectionId && !!appId,
     staleTime: 15e3,
     queryFn: async () => {
-      const target = ref ? parseRef(ref) : parseRef("");
-      target.productId = productId;
-      target.variantId = variantId;
-      target.batchId = batchId;
-      target.facetId = facetId;
-      target.facetValue = facetValue;
-      target.proofId = proofId;
+      if (recordId) {
+        const rec = await getRecordById({ SL, collectionId, appId, recordType }, recordId);
+        if (!rec) return { data: null, source: "empty" };
+        const recFacetRule = rec.facetRule ?? null;
+        return {
+          data: rec.data,
+          source: "self",
+          sourceRef: rec.ref ?? void 0,
+          recordId: rec.id,
+          facetRule: recFacetRule
+        };
+      }
+      const target = {
+        kind: batchId ? "batch" : variantId ? "variant" : productId ? "product" : facetId ? "facet" : "collection",
+        raw: "",
+        collectionId,
+        productId,
+        variantId,
+        batchId,
+        facetId,
+        facetValue,
+        proofId
+      };
       return resolveRecord({
         ctx: { SL, collectionId, appId, recordType },
         target,
@@ -527,8 +547,8 @@ function useRulePreview(args) {
     })
   });
   return {
-    totalMatches: query.data?.totalMatches ?? null,
-    sampleProductIds: query.data?.sampleProductIds ?? [],
+    totalMatches: query.data?.total ?? null,
+    sampleProductIds: (query.data?.matchingProducts ?? []).map((p) => p.productId),
     isLoading: query.isFetching,
     isStale: rule !== debouncedRule,
     error: query.error ?? null
@@ -594,7 +614,10 @@ function useRecordEditor(args) {
   }, [scope.raw, resolved.source, resolved.sourceRef]);
   const isDirty = !isEqual(value, savedSnapshot) || !isEqual(facetRule, savedFacetRule);
   const save = useCallback(async () => {
-    if (!scope.raw) return;
+    const anchors = parsedRefToScope(scope);
+    const hasAnchors = !!(anchors.productId || anchors.variantId || anchors.batchId || anchors.proofId);
+    const hasRule = !!(facetRule && facetRule.all && facetRule.all.length > 0);
+    if (!hasAnchors && !hasRule && !scope.raw) return;
     const previousSnapshot = savedSnapshot;
     const previousRuleSnapshot = savedFacetRule;
     resolved.source;
@@ -608,7 +631,7 @@ function useRecordEditor(args) {
       facetId: scope.facetId,
       facetValue: scope.facetValue,
       proofId: scope.proofId,
-      ref: scope.raw,
+      recordId: resolved.recordId,
       withParent: true
     });
     const previousCache = queryClient.getQueryData(cacheKey);
@@ -621,15 +644,26 @@ function useRecordEditor(args) {
       data: value,
       source: "self",
       sourceRef: scope.raw,
+      recordId: resolved.recordId,
       parentValue: previousCache?.parentValue ?? resolved.parentValue
     });
     try {
-      await upsertRecord(ctx, {
-        ref: scope.raw,
-        scope: parsedRefToScope(scope),
-        data: value,
-        facetRule
-      });
+      if (resolved.recordId && resolved.source === "self") {
+        await updateRecord(ctx, resolved.recordId, {
+          data: value,
+          facetRule
+        });
+      } else {
+        await upsertRecord(ctx, {
+          // External ref only when the underlying scope already carries
+          // one (e.g. rule:{id} for an existing rule record). Empty for
+          // anchor-only writes — server addresses by anchors.
+          ref: scope.kind === "rule" && scope.raw ? scope.raw : void 0,
+          scope: anchors,
+          data: value,
+          facetRule
+        });
+      }
       onSaved?.();
     } catch (err) {
       setSavedSnapshot(previousSnapshot);
@@ -646,16 +680,17 @@ function useRecordEditor(args) {
     } finally {
       setIsSaving(false);
     }
-  }, [scope.raw, value, savedSnapshot, facetRule, savedFacetRule, resolved.source, resolved.parentValue]);
+  }, [scope.raw, value, savedSnapshot, facetRule, savedFacetRule, resolved.source, resolved.parentValue, resolved.recordId]);
   const reset = useCallback(() => {
     setValue(savedSnapshot);
     setFacetRule(savedFacetRule);
   }, [savedSnapshot, savedFacetRule]);
   const remove = useCallback(async () => {
-    if (resolved.source !== "self" || !scope.raw) return;
-    await deleteRecord(ctx, scope.raw);
+    if (resolved.source !== "self") return;
+    if (!resolved.recordId) return;
+    await removeRecord(ctx, resolved.recordId);
     onDeleted?.();
-  }, [resolved.source, scope.raw]);
+  }, [resolved.source, resolved.recordId]);
   const effectiveSource = optimisticSource ?? resolved.source;
   const isRuleScope = scope.kind === "rule";
   const ruleValid = !isRuleScope || isFacetRuleValid(facetRule);
@@ -1649,9 +1684,11 @@ var DefaultRecordRow = ({ record, ctx, compact = false }) => {
 };
 var RecordList = ({
   items,
-  selectedRef,
+  selectedId,
+  selectedAnchorKey,
   onSelect,
-  dirtyRef,
+  dirtyId,
+  dirtyAnchorKey,
   presentation = "list",
   renderListRow,
   groupBy,
@@ -1659,10 +1696,14 @@ var RecordList = ({
 }) => {
   const buildCtx = (item) => {
     const cb = rowClipboard ? rowClipboard(item) : null;
+    const idMatch = selectedId != null && item.id != null && item.id === selectedId;
+    const anchorMatch = selectedAnchorKey != null && item.ref === selectedAnchorKey;
+    const dirtyIdMatch = dirtyId != null && item.id != null && item.id === dirtyId;
+    const dirtyAnchorMatch = dirtyAnchorKey != null && item.ref === dirtyAnchorKey;
     return {
-      selected: item.ref === selectedRef,
+      selected: idMatch || anchorMatch,
       onSelect: () => onSelect(item),
-      isDirty: !!dirtyRef && item.ref === dirtyRef,
+      isDirty: dirtyIdMatch || dirtyAnchorMatch,
       ...cb ?? {}
     };
   };
@@ -1684,7 +1725,7 @@ var RecordList = ({
     const compact = presentation === "compact";
     return /* @__PURE__ */ jsx("ul", { children: rows.map((item) => {
       const ctx = buildCtx(item);
-      return /* @__PURE__ */ jsx("li", { children: renderListRow ? renderListRow(item, ctx) : /* @__PURE__ */ jsx(DefaultRecordRow, { record: item, ctx, compact }) }, item.ref);
+      return /* @__PURE__ */ jsx("li", { children: renderListRow ? renderListRow(item, ctx) : /* @__PURE__ */ jsx(DefaultRecordRow, { record: item, ctx, compact }) }, item.id ?? item.ref);
     }) });
   };
   if (groups) {
@@ -2048,12 +2089,18 @@ function useItemViewPref(args) {
 var QK_BASE2 = ["records-admin", "collection-items"];
 var defaultToSummary = (rec, base) => {
   const data = rec.data;
+  const display = data?.display ?? void 0;
   if (!data) return base;
-  const label = data.title ?? data.name ?? data.label ?? data.question ?? base.label;
-  const subtitle = data.subtitle ?? data.summary ?? data.description ?? base.subtitle;
-  const thumbnail = data.thumbnail ?? data.image ?? data.cover ?? base.thumbnail;
+  const label = data.title ?? display?.title ?? data.name ?? data.label ?? data.question ?? data.slug ?? base.label;
+  const subtitle = data.subtitle ?? data.summary ?? display?.description ?? data.description ?? base.subtitle;
+  const thumbnail = data.thumbnail ?? data.image ?? data.cover ?? data.home_image_url ?? base.thumbnail;
   return { ...base, label, subtitle, thumbnail };
 };
+var recordMatchesScope = (rec, scope) => {
+  const facetRule = rec.facetRule ?? null;
+  if (facetRule) return false;
+  return (rec.productId ?? void 0) === scope.productId && (rec.variantId ?? void 0) === scope.variantId && (rec.batchId ?? void 0) === scope.batchId && (rec.proofId ?? void 0) === scope.proofId;
+};
 function useCollectionItems(args) {
   const {
     ctx,
@@ -2064,7 +2111,6 @@ function useCollectionItems(args) {
   } = args;
   const queryClient = useQueryClient();
   const scopeRef = scope?.raw ?? "";
-  const refPrefix = scopeRef ? `${scopeRef}/item:` : "item:";
   const queryKey = useMemo(
     () => [...QK_BASE2, ctx.collectionId, ctx.appId, ctx.recordType, scopeRef],
     [ctx.collectionId, ctx.appId, ctx.recordType, scopeRef]
@@ -2077,8 +2123,7 @@ function useCollectionItems(args) {
       const offset = pageParam;
       const { data, total, hasMore } = await listRecords(ctx, {
         limit: pageSize,
-        offset,
-        refPrefix
+        offset
       });
       return { data, total, hasMore, nextOffset: offset + data.length };
     },
@@ -2086,25 +2131,26 @@ function useCollectionItems(args) {
     staleTime: 15e3
   });
   const items = useMemo(() => {
+    if (!scope) return [];
     const all = query.data?.pages.flatMap((p) => p.data) ?? [];
-    return all.map((rec) => {
+    const relevant = all.filter((rec) => recordMatchesScope(rec, scope));
+    return relevant.map((rec) => {
       const ref = rec.ref ?? "";
       const parsed = parseRef(ref);
-      const { itemId } = splitItemRef(ref);
-      if (!itemId) return null;
+      const stableItemId = rec.id;
       const base = {
         id: rec.id,
         ref,
         scope: parsed,
         data: rec.data ?? null,
         status: rec.data ? "configured" : "empty",
-        label: itemId,
+        label: stableItemId,
         updatedAt: rec.updatedAt,
-        itemId
+        itemId: stableItemId
       };
       return toSummary2(rec, base);
     }).filter((x) => x !== null);
-  }, [query.data, toSummary2]);
+  }, [query.data, toSummary2, scope]);
   const refetch = useCallback(() => {
     queryClient.invalidateQueries({ queryKey });
   }, [queryClient, queryKey]);
@@ -2146,7 +2192,7 @@ var createDefaultDeepLinkAdapter = (paramNames) => ({
     if (typeof window === "undefined") return {};
     const params = new URLSearchParams(getQueryString(window.location));
     return {
-      item: params.get(paramNames.item),
+      recordId: params.get(paramNames.recordId),
       scope: params.get(paramNames.scope),
       view: params.get(paramNames.view)
     };
@@ -2158,7 +2204,7 @@ var createDefaultDeepLinkAdapter = (paramNames) => ({
       if (value == null || value === "") params.delete(key);
       else params.set(key, value);
     };
-    if ("item" in partial) apply(paramNames.item, partial.item);
+    if ("recordId" in partial) apply(paramNames.recordId, partial.recordId);
     if ("scope" in partial) apply(paramNames.scope, partial.scope);
     if ("view" in partial) apply(paramNames.view, partial.view);
     const nextUrl = buildUrl(window.location, params.toString());
@@ -2178,7 +2224,7 @@ var createDefaultDeepLinkAdapter = (paramNames) => ({
 });
 
 // src/components/RecordsAdmin/hooks/useDeepLinkState.ts
-var SMART_PUSH = ["item.open", "item.close", "scope"];
+var SMART_PUSH = ["record.open", "record.close", "scope"];
 var classify = (mode, kind) => {
   if (mode === "push") return "push";
   if (mode === "replace") return "replace";
@@ -3831,19 +3877,10 @@ 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  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.65rem 0.9rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-accent) / 0.12);\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.08),\n      hsl(var(--ra-accent) / 0.02) 60%,\n      hsl(var(--ra-surface)) 100%);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: calc(var(--ra-radius) * 0.9);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.18);\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: var(--ra-display-weight);\n  font-size: 1rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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[data-density=compact] .ra-header {\n  padding: 0.75rem 1rem;\n}\n.ra-shell[data-density=compact] .ra-header-icon {\n  width: 2.25rem;\n  height: 2.25rem;\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  gap: 0.85rem;\n  padding: 0.9rem 1rem;\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  margin-bottom: 1rem;\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: 2rem;\n  height: 2rem;\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.875rem;\n  color: hsl(var(--ra-text));\n  margin: 0 0 0.2rem 0;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.45;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.6rem;\n  height: 1.6rem;\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}\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}\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-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  gap: 0.35rem;\n  padding: 0.3rem 0.6rem;\n  font-size: 0.7rem;\n  font-weight: 500;\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.85rem;\n  height: 0.85rem;\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");
-var TOP_LEVEL_SCOPES = ["rule", "collection", "product"];
+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  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.65rem 0.9rem;\n  border-radius: var(--ra-radius);\n  border: 1px solid hsl(var(--ra-accent) / 0.12);\n  background:\n    linear-gradient(\n      135deg,\n      hsl(var(--ra-accent) / 0.08),\n      hsl(var(--ra-accent) / 0.02) 60%,\n      hsl(var(--ra-surface)) 100%);\n  box-shadow: var(--ra-card-shadow);\n}\n.ra-shell .ra-header__main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n.ra-shell .ra-header-aside {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.ra-shell .ra-header-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: calc(var(--ra-radius) * 0.9);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: hsl(var(--ra-accent) / 0.12);\n  color: hsl(var(--ra-accent));\n  border: 1px solid hsl(var(--ra-accent) / 0.18);\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: var(--ra-display-weight);\n  font-size: 1rem;\n  line-height: 1.2;\n  color: hsl(var(--ra-text));\n  letter-spacing: -0.01em;\n  margin: 0;\n}\n.ra-shell .ra-header-subtitle {\n  font-size: 0.75rem;\n  color: hsl(var(--ra-muted-text));\n  margin-top: 0.125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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[data-density=compact] .ra-header {\n  padding: 0.75rem 1rem;\n}\n.ra-shell[data-density=compact] .ra-header-icon {\n  width: 2.25rem;\n  height: 2.25rem;\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  gap: 0.85rem;\n  padding: 0.9rem 1rem;\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: 2rem;\n  height: 2rem;\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.875rem;\n  color: hsl(var(--ra-text));\n  margin: 0 0 0.2rem 0;\n}\n.ra-shell .ra-intro-text {\n  font-size: 0.8125rem;\n  color: hsl(var(--ra-text) / 0.85);\n  line-height: 1.45;\n}\n.ra-shell .ra-intro-dismiss {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  width: 1.6rem;\n  height: 1.6rem;\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}\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}\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-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  gap: 0.35rem;\n  padding: 0.3rem 0.6rem;\n  font-size: 0.7rem;\n  font-weight: 500;\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.85rem;\n  height: 0.85rem;\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");
+var TOP_LEVEL_SCOPES = ["collection", "rule", "product"];
 var WARNED_FACET_DEPRECATED = false;
-var defaultItemId = () => {
-  const time = Date.now().toString(36);
-  const rand = Math.random().toString(36).slice(2, 8);
-  return `${time}${rand}`;
-};
-var newRuleId = () => {
-  const time = Date.now().toString(36);
-  const rand = Math.random().toString(36).slice(2, 10);
-  return `${time}${rand}`;
-};
+var DRAFT_ID = "__draft__";
 var productItemToSummary = (p) => {
   const ref = buildRef({ productId: p.id });
   return {
@@ -3962,15 +3999,27 @@ function RecordsAdminShell(props) {
     deepLinkState.emit({ view: next }, "view");
   }, [onTelemetry, recordType, itemView, setItemView, deepLinkState]);
   const [selectedItemId, setSelectedItemId] = useState(null);
+  const [pendingDeepLinkRecordId, setPendingDeepLinkRecordId] = useState(null);
   const ctx = useMemo(
     () => ({ SL, collectionId, appId, recordType }),
     [SL, collectionId, appId, recordType]
   );
   const probe = useScopeProbe({ SL, collectionId });
-  const topLevelScopes = useMemo(
-    () => TOP_LEVEL_SCOPES.filter((s) => requestedScopes.includes(s)),
-    [requestedScopes]
-  );
+  const topLevelScopes = useMemo(() => {
+    const requested = requestedScopes ?? [];
+    if (requested.length > 0) {
+      const seen = /* @__PURE__ */ new Set();
+      const ordered = [];
+      for (const s of requested) {
+        if (!TOP_LEVEL_SCOPES.includes(s)) continue;
+        if (seen.has(s)) continue;
+        seen.add(s);
+        ordered.push(s);
+      }
+      return ordered;
+    }
+    return [...TOP_LEVEL_SCOPES];
+  }, [requestedScopes]);
   useEffect(() => {
     if (requestedScopes.includes("facet") && !WARNED_FACET_DEPRECATED) {
       WARNED_FACET_DEPRECATED = true;
@@ -3990,8 +4039,6 @@ function RecordsAdminShell(props) {
   const initialScope = useMemo(() => {
     if (contextScope?.productId && topLevelScopes.includes("product")) return "product";
     if (defaultScope && topLevelScopes.includes(defaultScope)) return defaultScope;
-    if (topLevelScopes.includes("rule")) return "rule";
-    if (topLevelScopes.includes("collection")) return "collection";
     return topLevelScopes[0] ?? "product";
   }, [contextScope?.productId, defaultScope, topLevelScopes]);
   const [activeScope, setActiveScope] = useState(initialScope);
@@ -4002,7 +4049,8 @@ function RecordsAdminShell(props) {
   const [filter, setFilter] = useState("all");
   const [ruleFilters, setRuleFilters] = useState(EMPTY_RULE_FILTERS);
   const [facetBrowseFilter, setFacetBrowseFilter] = useState(null);
-  const [selectedFacetRef, setSelectedFacetRef] = useState();
+  const [selectedRecordId, setSelectedRecordId] = useState(null);
+  const [draftKind, setDraftKind] = useState(null);
   const [selectedProductId, setSelectedProductId] = useState(
     contextScope?.productId
   );
@@ -4082,25 +4130,35 @@ function RecordsAdminShell(props) {
   }, [activeScope, selectedProductId, productBrowse.items]);
   useEffect(() => {
     if (activeScope !== "rule" && activeScope !== "collection") return;
-    if (selectedFacetRef !== void 0) return;
+    if (selectedRecordId !== null) return;
     if (activeScope === "collection" && cardinality === "collection") {
-      setSelectedFacetRef("");
       return;
     }
     const first = recordList.items[0];
-    if (first) setSelectedFacetRef(first.ref);
-  }, [activeScope, selectedFacetRef, recordList.items, cardinality]);
+    if (first?.id) setSelectedRecordId(first.id);
+  }, [activeScope, selectedRecordId, recordList.items, cardinality]);
   useEffect(() => {
     setSearch("");
     setFilter("all");
     setRuleFilters(EMPTY_RULE_FILTERS);
     setFacetBrowseFilter(null);
-    setSelectedFacetRef(void 0);
+    setSelectedRecordId(null);
+    setDraftKind(null);
   }, [activeScope]);
   const editingScope = useMemo(() => {
     if (activeScope === "rule" || activeScope === "collection") {
-      if (selectedFacetRef === void 0) return null;
-      return parseRef(selectedFacetRef);
+      if (selectedRecordId === null) {
+        if (activeScope === "collection" && cardinality === "collection") {
+          return parseRef("");
+        }
+        return null;
+      }
+      if (selectedRecordId === DRAFT_ID) {
+        return parseRef("");
+      }
+      const hit = recordList.items.find((it) => it.id === selectedRecordId);
+      if (!hit) return null;
+      return hit.scope;
     }
     if (!selectedProductId) return null;
     if (drillTab === "variant") {
@@ -4112,19 +4170,9 @@ function RecordsAdminShell(props) {
       return parseRef(buildRef({ productId: selectedProductId, batchId: selectedBatchId }));
     }
     return parseRef(buildRef({ productId: selectedProductId }));
-  }, [activeScope, selectedFacetRef, selectedProductId, drillTab, selectedVariantId, selectedBatchId]);
+  }, [activeScope, cardinality, selectedRecordId, recordList.items, selectedProductId, drillTab, selectedVariantId, selectedBatchId]);
   const isCollection = cardinality === "collection";
-  const editingItemRef = useMemo(() => {
-    if (!isCollection) return null;
-    if (!selectedItemId) return null;
-    const baseRef = editingScope?.raw ?? "";
-    return buildItemRef(baseRef, selectedItemId);
-  }, [isCollection, selectedItemId, editingScope]);
-  const editingTargetScope = useMemo(() => {
-    if (!isCollection) return editingScope;
-    if (!editingItemRef) return null;
-    return parseRef(editingItemRef);
-  }, [isCollection, editingScope, editingItemRef]);
+  const editingTargetScope = editingScope;
   const skipNextItemResetRef = useRef(false);
   useEffect(() => {
     if (skipNextItemResetRef.current) {
@@ -4141,20 +4189,19 @@ function RecordsAdminShell(props) {
   useEffect(() => {
     if (!deepLinkState.enabled) return;
     if (selectedItemId) return;
-    deepLinkState.emit({ scope: editingScope?.raw ?? null, item: null }, "scope");
+    deepLinkState.emit({ scope: editingScope?.raw ?? null, recordId: null }, "scope");
     lastAppliedDLRef.current = `${""}|${editingScope?.raw ?? ""}|${itemView}`;
   }, [deepLinkState.enabled, editingScope?.raw, selectedItemId, itemView]);
   useEffect(() => {
     if (!deepLinkState.enabled) return;
-    const { item, scope, view } = deepLinkState.urlState;
-    const sig = `${item ?? ""}|${scope ?? ""}|${view ?? ""}`;
+    const { recordId, scope, view } = deepLinkState.urlState;
+    const sig = `${recordId ?? ""}|${scope ?? ""}|${view ?? ""}`;
     if (sig === lastAppliedDLRef.current) return;
     lastAppliedDLRef.current = sig;
     if (view && itemViews.includes(view) && view !== itemView) {
       setItemView(view);
     }
-    const railRef = item ? item.includes("item:") ? item.slice(0, item.lastIndexOf("item:")).replace(/\/$/, "") : "" : scope ?? "";
-    const itemId = item ? item.includes("item:") ? item.slice(item.lastIndexOf("item:") + "item:".length) : item : null;
+    const railRef = scope ?? "";
     const parsed = railRef ? parseRef(railRef) : null;
     if (parsed?.productId) {
       if (activeScope !== "product") setActiveScope("product");
@@ -4168,16 +4215,12 @@ function RecordsAdminShell(props) {
       if (parsed.facetValue) {
         setFacetBrowseFilter({ facetKey: parsed.facetId, facetValue: parsed.facetValue });
       }
-      if (selectedFacetRef !== void 0) setSelectedFacetRef(void 0);
+      if (selectedRecordId !== null) setSelectedRecordId(null);
     } else {
-      if (selectedFacetRef) setSelectedFacetRef(void 0);
-    }
-    if (itemId !== selectedItemId) {
-      if (railRef && railRef !== editingScope?.raw) {
-        skipNextItemResetRef.current = true;
-      }
-      setSelectedItemId(itemId);
+      if (selectedRecordId !== null) setSelectedRecordId(null);
     }
+    setPendingDeepLinkRecordId(recordId ?? null);
+    if (!recordId && selectedItemId !== null) setSelectedItemId(null);
   }, [deepLinkState.enabled, deepLinkState.urlState]);
   const supportedForResolution = useMemo(() => requestedScopes, [requestedScopes]);
   const resolved = useResolvedRecord({
@@ -4190,7 +4233,12 @@ function RecordsAdminShell(props) {
     batchId: editingTargetScope?.batchId,
     facetId: editingTargetScope?.facetId,
     facetValue: editingTargetScope?.facetValue,
-    ref: editingTargetScope?.raw,
+    // Id-primary path: when the user has selected a saved record by UUID
+    // (records-driven tabs, deep-link by `?recordId=`), bypass the
+    // inheritance chain and load that exact row. Drafts (`DRAFT_ID`) and
+    // pinned-anchor tabs (Products) leave `recordId` undefined so the
+    // resolver runs `match()` against the anchors above.
+    recordId: selectedRecordId && selectedRecordId !== DRAFT_ID ? selectedRecordId : void 0,
     supportedScopes: supportedForResolution,
     enabled: !!editingTargetScope
   });
@@ -4318,8 +4366,8 @@ function RecordsAdminShell(props) {
     const sourceValue = onCopyOverride ? onCopyOverride({ value: editorCtx.value, scope: editingScope }) : cloneValue(editorCtx.value);
     clipboard.set({
       value: sourceValue,
-      sourceScope: editingScope.kind,
-      sourceRef: editingScope.raw,
+      sourceScope: editingScope,
+      sourceRecordId: resolved.recordId,
       sourceLabel: editorHeaderLabel
     });
     onTelemetry?.({ type: "clipboard.copy", recordType, sourceRef: editingScope.raw });
@@ -4340,10 +4388,7 @@ function RecordsAdminShell(props) {
   ]);
   const pasteCurrent = useCallback(async () => {
     if (!enableClipboard || !editingScope || !clipboard.entry) return;
-    const compat = checkPasteCompatibility(
-      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
-      editingScope
-    );
+    const compat = checkPasteCompatibility(clipboard.entry.sourceScope, editingScope);
     if (compat.status === "denied") {
       setClipboardNotice({ message: compat.reason ?? "Paste not allowed here", variant: "paste" });
       return;
@@ -4370,7 +4415,7 @@ function RecordsAdminShell(props) {
       });
       if (!ok) return;
     }
-    const sourceParsed = { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef };
+    const sourceParsed = clipboard.entry.sourceScope;
     const transformed = onPasteOverride ? onPasteOverride(
       { value: clipboard.entry.value, sourceScope: sourceParsed },
       { scope: editingScope, currentValue: editorCtx.value ?? null }
@@ -4380,12 +4425,12 @@ function RecordsAdminShell(props) {
     onTelemetry?.({
       type: "clipboard.paste",
       recordType,
-      sourceRef: clipboard.entry.sourceRef,
+      sourceRef: clipboard.entry.sourceScope.raw,
       destinationRef: editingScope.raw,
       replaced: willReplace
     });
     setClipboardNotice({
-      message: i18n.pasteToast.replace("{name}", clipboard.entry.sourceLabel ?? clipboard.entry.sourceRef),
+      message: i18n.pasteToast.replace("{name}", clipboard.entry.sourceLabel ?? clipboard.entry.sourceScope.raw),
       variant: "paste"
     });
   }, [
@@ -4409,11 +4454,10 @@ function RecordsAdminShell(props) {
   ]);
   const editorPasteCompat = useMemo(() => {
     if (!enableClipboard || !clipboard.entry || !editingScope) return null;
-    if (clipboard.entry.sourceRef === editingScope.raw) return { status: "denied" };
-    return checkPasteCompatibility(
-      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
-      editingScope
-    );
+    const sameRecord = clipboard.entry.sourceRecordId && resolved.recordId && clipboard.entry.sourceRecordId === resolved.recordId;
+    const sameAnchor = !clipboard.entry.sourceRecordId && clipboard.entry.sourceScope.raw === editingScope.raw;
+    if (sameRecord || sameAnchor) return { status: "denied" };
+    return checkPasteCompatibility(clipboard.entry.sourceScope, editingScope);
   }, [enableClipboard, clipboard.entry, editingScope]);
   const editorClipboard = enableClipboard && editingScope ? {
     onCopy: copyCurrent,
@@ -4425,31 +4469,30 @@ function RecordsAdminShell(props) {
     pasteSourceLabel: clipboard.entry?.sourceLabel,
     pasteWillReplace: resolved.source === "self" && !!clipboard.entry
   } : void 0;
-  const [pendingPasteRef, setPendingPasteRef] = useState(null);
+  const [pendingPasteTarget, setPendingPasteTarget] = useState(null);
   useEffect(() => {
-    if (!pendingPasteRef) return;
-    if (!editingScope || editingScope.raw !== pendingPasteRef) return;
+    if (!pendingPasteTarget) return;
+    if (!editingScope) return;
+    const matched = pendingPasteTarget.kind === "record" ? selectedRecordId === pendingPasteTarget.recordId : editingScope.raw === pendingPasteTarget.ref;
+    if (!matched) return;
     const t = window.setTimeout(() => {
-      setPendingPasteRef(null);
+      setPendingPasteTarget(null);
       void pasteCurrent();
     }, 0);
     return () => window.clearTimeout(t);
-  }, [pendingPasteRef, editingScope, pasteCurrent]);
+  }, [pendingPasteTarget, editingScope, selectedRecordId, pasteCurrent]);
   const rowClipboard = enableClipboard ? (record) => {
     const summaryHasData = record.data != null;
     const sourceParsed = record.scope;
-    const compat = clipboard.entry ? checkPasteCompatibility(
-      { kind: clipboard.entry.sourceScope, raw: clipboard.entry.sourceRef },
-      sourceParsed
-    ) : null;
-    const sameRef = clipboard.entry?.sourceRef === record.ref;
+    const compat = clipboard.entry ? checkPasteCompatibility(clipboard.entry.sourceScope, sourceParsed) : null;
+    const sameTarget = clipboard.entry ? clipboard.entry.sourceRecordId && record.id ? clipboard.entry.sourceRecordId === record.id : clipboard.entry.sourceScope.raw === record.ref : false;
     return {
       onCopy: summaryHasData ? () => {
         const value = onCopyOverride ? onCopyOverride({ value: record.data, scope: sourceParsed }) : cloneValue(record.data);
         clipboard.set({
           value,
-          sourceScope: sourceParsed.kind,
-          sourceRef: record.ref,
+          sourceScope: sourceParsed,
+          sourceRecordId: record.id ?? void 0,
           sourceLabel: record.label
         });
         onTelemetry?.({ type: "clipboard.copy", recordType, sourceRef: record.ref });
@@ -4460,9 +4503,11 @@ function RecordsAdminShell(props) {
       } : void 0,
       onPaste: () => {
         onLeftSelectRef.current?.(record);
-        setPendingPasteRef(record.ref);
+        setPendingPasteTarget(
+          record.id ? { kind: "record", recordId: record.id } : { kind: "anchor", ref: record.ref }
+        );
       },
-      canPaste: !!clipboard.entry && !sameRef && compat?.status !== "denied",
+      canPaste: !!clipboard.entry && !sameTarget && compat?.status !== "denied",
       pasteWillReplace: record.status === "configured",
       clipboardSourceLabel: clipboard.entry?.sourceLabel
     };
@@ -4471,6 +4516,7 @@ function RecordsAdminShell(props) {
   const baseScopeRef = editingScope?.raw ?? "";
   const itemNounLabel = itemNoun || "item";
   const buildItemUrlValue = useCallback((id) => {
+    if (!baseScopeRef && id.startsWith("item:")) return id;
     return baseScopeRef ? `${baseScopeRef}/item:${id}` : id;
   }, [baseScopeRef]);
   const onItemOpen = useCallback((itemId) => {
@@ -4478,31 +4524,31 @@ function RecordsAdminShell(props) {
     void runWithGuard(() => {
       setSelectedItemId(itemId);
       onTelemetry?.({ type: "item.open", recordType, scopeRef: baseScopeRef, itemId });
-      deepLinkState.emit({ item: buildItemUrlValue(itemId) }, "item.open");
+      deepLinkState.emit({ recordId: itemId, scope: baseScopeRef || null }, "record.open");
     });
   }, [isCollection, runWithGuard, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
   const onItemCreate = useCallback(() => {
     if (!isCollection) return;
     void runWithGuard(() => {
-      const id = generateItemId ? generateItemId() : defaultItemId();
+      const id = generateItemId ? generateItemId() : DRAFT_ID;
       setSelectedItemId(id);
       onTelemetry?.({ type: "item.create", recordType, scopeRef: baseScopeRef });
-      deepLinkState.emit({ item: buildItemUrlValue(id) }, "item.open");
+      deepLinkState.emit({ recordId: null, scope: baseScopeRef || null }, "record.open");
     });
   }, [isCollection, runWithGuard, generateItemId, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
   const onItemDelete = useCallback(async (itemId) => {
     if (!isCollection) return;
-    const ref = buildItemRef(baseScopeRef, itemId);
+    if (itemId === DRAFT_ID) return;
     if (onBeforeDelete) {
-      const ok = await onBeforeDelete(parseRef(ref));
+      const ok = await onBeforeDelete(editingScope ?? parseRef(""));
       if (!ok) return;
     }
     try {
-      const { deleteRecord: deleteRecord2 } = await import('../../records-AUJWCB7Q.js');
-      await deleteRecord2(ctx, ref);
+      const { removeRecord: removeRecord2 } = await import('../../records-JWS6LKJ2.js');
+      await removeRecord2(ctx, itemId);
       onTelemetry?.({ type: "item.delete", recordType, scopeRef: baseScopeRef, itemId });
       if (selectedItemId === itemId) setSelectedItemId(null);
-      if (selectedItemId === itemId) deepLinkState.emit({ item: null }, "item.close");
+      if (selectedItemId === itemId) deepLinkState.emit({ recordId: null }, "record.close");
       collectionItems.refetch();
     } catch (err) {
       console.error("[RecordsAdminShell] item delete failed", err);
@@ -4537,14 +4583,14 @@ function RecordsAdminShell(props) {
   const onItemBack = useCallback(() => {
     void runWithGuard(() => {
       setSelectedItemId(null);
-      deepLinkState.emit({ item: null }, "item.close");
+      deepLinkState.emit({ recordId: null }, "record.close");
     });
   }, [runWithGuard, deepLinkState]);
   const stepToItem = useCallback((id) => {
     void runWithGuard(() => {
       setSelectedItemId(id);
       onTelemetry?.({ type: "item.open", recordType, scopeRef: baseScopeRef, itemId: id });
-      deepLinkState.emit({ item: buildItemUrlValue(id) }, "item.step");
+      deepLinkState.emit({ recordId: id, scope: baseScopeRef || null }, "record.step");
     });
   }, [runWithGuard, onTelemetry, recordType, baseScopeRef, deepLinkState, buildItemUrlValue]);
   const onItemPrev = useCallback(() => {
@@ -4717,21 +4763,21 @@ function RecordsAdminShell(props) {
   const isRecordsTab = isRuleTab || isGlobalTab;
   const onCreateRule = useCallback(() => {
     void runWithGuard(() => {
-      const id = newRuleId();
-      const ref = `rule:${id}`;
       if (activeScope !== "rule") setActiveScope("rule");
-      setSelectedFacetRef(ref);
+      setSelectedRecordId(DRAFT_ID);
+      setDraftKind("rule");
     });
   }, [runWithGuard, activeScope]);
   const hasGlobalRecord = useMemo(
-    () => recordList.items.some((it) => !it.scope.productId && !it.scope.facetId && !it.scope.variantId && !it.scope.batchId && !it.scope.proofId && !it.scope.itemId && !it.ref.startsWith("item:") && !it.ref.includes("/item:")),
+    () => recordList.items.some((it) => !it.scope.productId && !it.scope.facetId && !it.scope.variantId && !it.scope.batchId && !it.scope.proofId),
     [recordList.items]
   );
   const showCreateGlobal = isGlobalTab && !isCollection && !hasGlobalRecord;
   const onCreateGlobal = useCallback(() => {
     void runWithGuard(() => {
       if (activeScope !== "collection") setActiveScope("collection");
-      setSelectedFacetRef("");
+      setSelectedRecordId(DRAFT_ID);
+      setDraftKind("global");
     });
   }, [runWithGuard, activeScope]);
   const filteredRuleItems = useMemo(
@@ -4773,26 +4819,25 @@ function RecordsAdminShell(props) {
     }
     return Array.from(byKey.values());
   }, [facetBrowse.items]);
-  const stripItemRecords = useCallback(
-    (items) => items.filter((it) => !it.scope.itemId && !it.ref.startsWith("item:") && !it.ref.includes("/item:")),
-    []
-  );
   const collectionGlobalAllRow = useMemo(
     () => ({
       id: null,
       ref: "",
       scope: parseRef(""),
       data: null,
-      status: "configured",
+      status: "empty",
       label: i18n.itemsAllLabel,
       subtitle: collectionItems.items.length ? `${collectionItems.items.length} ${itemNoun}${collectionItems.items.length === 1 ? "" : "s"}` : void 0
     }),
     [i18n.itemsAllLabel, collectionItems.items.length, itemNoun]
   );
-  const leftItems = isProductTab ? productListItems : isRuleTab ? applyFacetBrowseFilter(isCollection ? stripItemRecords(filteredRuleItems) : filteredRuleItems) : isGlobalTab && isCollection ? [collectionGlobalAllRow] : isRecordsTab ? applyFacetBrowseFilter(isCollection ? stripItemRecords(recordList.items) : recordList.items) : [];
+  const leftItems = isProductTab ? productListItems : isRuleTab ? applyFacetBrowseFilter(filteredRuleItems) : isGlobalTab && isCollection ? [collectionGlobalAllRow] : isRecordsTab ? applyFacetBrowseFilter(recordList.items) : [];
   const leftLoading = isProductTab ? !productPinned && productBrowse.isLoading : isRecordsTab ? recordList.isLoading || probe.isLoading : false;
   const leftError = isProductTab ? productBrowse.error : isRecordsTab ? recordList.error : null;
-  const leftSelectedRef = isProductTab ? selectedProductId ? buildRef({ productId: selectedProductId }) : void 0 : selectedFacetRef;
+  const leftSelectedId = isProductTab ? void 0 : selectedRecordId && selectedRecordId !== DRAFT_ID ? selectedRecordId : void 0;
+  const leftSelectedAnchorKey = isProductTab ? selectedProductId ? buildRef({ productId: selectedProductId }) : void 0 : void 0;
+  const dirtyId = !editorCtx.isDirty ? void 0 : selectedRecordId && selectedRecordId !== DRAFT_ID ? selectedRecordId : void 0;
+  const dirtyAnchorKey = !editorCtx.isDirty ? void 0 : isProductTab ? editingScope?.raw : void 0;
   const onLeftSelect = (item) => {
     void runWithGuard(() => {
       if (isProductTab) {
@@ -4801,7 +4846,8 @@ function RecordsAdminShell(props) {
         setSelectedBatchId(void 0);
         setDrillTab("product");
       } else {
-        setSelectedFacetRef(item.ref);
+        setSelectedRecordId(item.id ?? null);
+        setDraftKind(null);
       }
     });
   };
@@ -5056,9 +5102,11 @@ function RecordsAdminShell(props) {
                       RecordList,
                       {
                         items: leftItems,
-                        selectedRef: leftSelectedRef,
+                        selectedId: leftSelectedId,
+                        selectedAnchorKey: leftSelectedAnchorKey,
                         onSelect: onLeftSelect,
-                        dirtyRef: editorCtx.isDirty ? editingScope?.raw : void 0,
+                        dirtyId,
+                        dirtyAnchorKey,
                         presentation: effectivePresentation,
                         renderListRow,
                         groupBy: effectiveGroupBy,
@@ -5151,7 +5199,7 @@ var RecordBrowser = ({
   scopes,
   activeScope,
   onActiveScopeChange,
-  selectedRef,
+  selectedId,
   onSelectRef,
   items,
   counts,
@@ -5194,7 +5242,7 @@ var RecordBrowser = ({
       !isLoading && error && /* @__PURE__ */ jsx(ErrorState, { error }),
       !isLoading && !error && items.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: i18n.noResults, body: search ? void 0 : i18n.emptyBody }),
       !isLoading && !error && items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(RecordList, { items, selectedRef, onSelect: onSelectRef }),
+        /* @__PURE__ */ jsx(RecordList, { items, selectedId, onSelect: onSelectRef }),
         hasNextPage && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5459,16 +5507,13 @@ function useCollectedRecords(args) {
       target.facetValue = facetValue;
       const ctx = { SL, collectionId, appId, recordType };
       const result = await matchRecords(ctx, parsedRefToTarget(target), { strategy: "all" }).catch(() => null);
-      const records = result?.records ?? [];
-      const baseList = records.map((entry, i) => {
-        const rec = entry.record;
-        return {
-          ref: rec.ref ?? "",
-          scope: parseRef(rec.ref ?? ""),
-          data: rec.data,
-          depth: i
-        };
-      });
+      const entries = result?.data ?? [];
+      const baseList = entries.map((entry, i) => ({
+        ref: entry.ref ?? "",
+        scope: parseRef(entry.ref ?? ""),
+        data: entry.data,
+        depth: i
+      }));
       const sortKind = sort?.kind ?? "specificity";
       const direction = sort?.direction ?? (sortKind === "specificity" ? "desc" : "asc");
       const sign = direction === "desc" ? -1 : 1;
@@ -5551,11 +5596,11 @@ function useMergedRecord(args) {
       target.facetValue = facetValue;
       const ctx = { SL, collectionId, appId, recordType };
       const result = await matchRecords(ctx, parsedRefToTarget(target), { strategy: "all" }).catch(() => null);
-      const records = result?.records ?? [];
-      if (records.length === 0) return { data: null, provenance: {}, layers: [] };
-      const present = records.map((entry) => ({
-        ref: entry.record.ref ?? "",
-        data: entry.record.data
+      const entries = result?.data ?? [];
+      if (entries.length === 0) return { data: null, provenance: {}, layers: [] };
+      const present = entries.map((entry) => ({
+        ref: entry.ref ?? "",
+        data: entry.data
       }));
       const ordered = [...present].reverse();
       let merged = null;
@@ -5578,6 +5623,6 @@ function useMergedRecord(args) {
   };
 }
 
-export { ALL_ITEM_VIEWS, ALL_PRESENTATIONS, BatchList, BulkActionsMenu, DEFAULT_DEEP_LINK_PARAM_NAMES, DEFAULT_I18N, DEFAULT_ICONS, DefaultItemCards, DefaultItemTable, DefaultRecordCard, DefaultRecordRow, DeleteButton, DrawerPreview, EditorItemNav, EmptyState, ErrorState, FacetList, InheritanceMarker, InheritanceProvider, InlinePreview, IntroCard, ItemListView, ItemViewSwitcher, LoadingState, PresentationSwitcher, PreviewScopePicker, PreviewToggleButton, ProductDrillDown, ProductList, RecordBrowser, RecordEditor, RecordList, RecordsAdminShell, ResolvedPreview, ScopeBreadcrumb, ScopeTabs, SiblingRail, SidePreview, StatusDot, StatusFilterPills, StatusIcon, TabbedPreview, UtilityRow, VariantList, buildItemRef, buildRef, checkPasteCompatibility, cloneValue, createDefaultDeepLinkAdapter, downloadBlob, exportCsv, importCsv, mergeIcons, parseRef, pickHeaderIcon, resolutionChain, resolveRecord, splitItemRef, statusToneLabel, useCollectedRecords, useCollectionItems, useDeepLinkState, useDirtyNavigation, useFacetBrowse, useIntroDismissed, useItemViewPref, useMergedRecord, usePresentationPref, useProductBrowse, useProductChildren, useRecordClipboard, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
+export { ALL_ITEM_VIEWS, ALL_PRESENTATIONS, BatchList, BulkActionsMenu, DEFAULT_DEEP_LINK_PARAM_NAMES, DEFAULT_I18N, DEFAULT_ICONS, DefaultItemCards, DefaultItemTable, DefaultRecordCard, DefaultRecordRow, DeleteButton, DrawerPreview, EditorItemNav, EmptyState, ErrorState, FacetList, InheritanceMarker, InheritanceProvider, InlinePreview, IntroCard, ItemListView, ItemViewSwitcher, LoadingState, PresentationSwitcher, PreviewScopePicker, PreviewToggleButton, ProductDrillDown, ProductList, RecordBrowser, RecordEditor, RecordList, RecordsAdminShell, ResolvedPreview, ScopeBreadcrumb, ScopeTabs, SiblingRail, SidePreview, StatusDot, StatusFilterPills, StatusIcon, TabbedPreview, UtilityRow, VariantList, buildRef, checkPasteCompatibility, cloneValue, createDefaultDeepLinkAdapter, downloadBlob, exportCsv, importCsv, mergeIcons, parseRef, pickHeaderIcon, resolutionChain, resolveRecord, statusToneLabel, useCollectedRecords, useCollectionItems, useDeepLinkState, useDirtyNavigation, useFacetBrowse, useIntroDismissed, useItemViewPref, useMergedRecord, usePresentationPref, useProductBrowse, useProductChildren, useRecordClipboard, useRecordEditor, useRecordList, useResolveAllRecords, useResolvedRecord, useRulePreview, useScopeProbe, useUnsavedGuard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map