@refineui/react 0.0.1

package/refineui.css

@@ -0,0 +1,2275 @@
+/* RefineUI base styles — hover, focus, active */
+/* Import: import "@refineui/react/refineui.css" */
+/* Foundation: https://www.figma.com/design/GOLyxZSkzbRIuMNBvxeqr3/Pelagornis-RefineUI-Foundation */
+
+/* @refineui/tokens — single source for palette, spacing, radius, etc. */
+/* Vite can break `@refineui/tokens/...` when resolving via index.mjs; sibling packages use a relative import */
+@import "../tokens/dist/css-variables.css";
+@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
+
+:root {
+  --refineui-focus-color: var(--refineui-color-primary-black);
+  --refineui-focus-offset: var(--refineui-spacing-size-xxx-small);
+  --refineui-bg: var(--refineui-color-neutral-white);
+  --refineui-text: var(--refineui-color-primary-black);
+  --refineui-border: var(--refineui-color-neutral-300);
+  --refineui-placeholder: var(--refineui-color-neutral-450);
+  --refineui-btn-primary-hover: var(--refineui-color-alias-background-brand-hover);
+  --refineui-btn-primary-pressed: var(--refineui-color-alias-background-brand-active);
+}
+
+/* Dark mode — supports data-theme or .dark on ancestor */
+[data-theme="dark"], .dark {
+  --refineui-focus-color: var(--refineui-color-neutral-white);
+  --refineui-bg: var(--refineui-color-neutral-900);
+  --refineui-text: var(--refineui-color-neutral-250);
+  --refineui-border: var(--refineui-color-neutral-700);
+  --refineui-placeholder: var(--refineui-color-neutral-550);
+  --refineui-btn-primary-hover: var(--refineui-color-alias-background-brand-hover);
+  --refineui-btn-primary-pressed: var(--refineui-color-alias-background-brand-active);
+  --refineui-btn-danger-hover: var(--refineui-color-red-500);
+}
+
+/* Avatars stack — Web Kit Avater Stack `69:3008` (`--avatar-stack-overlap` = foundation step vars) */
+[data-refineui="avatars"][data-layout="stack"] {
+  padding-right: var(--avatar-stack-overlap, var(--refineui-size-foundation-size-60));
+}
+[data-refineui="avatars"][data-layout="stack"] > *:not(:first-child) {
+  margin-left: calc(-1 * var(--avatar-stack-overlap, var(--refineui-size-foundation-size-60)));
+}
+
+/* Button & button-like */
+[data-refineui="button"] {
+  transition:
+    opacity var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast),
+    border-color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+[data-refineui="switch"],
+[data-refineui="pagination"],
+[data-refineui="accordion-trigger"],
+[data-refineui="menu-item"],
+[data-refineui="tree-item-trigger"],
+[data-refineui="command-item"],
+[data-refineui="segmented-control-item"],
+[data-refineui="tab"],
+[data-refineui="calendar-nav"],
+[data-refineui="chip-remove"],
+[data-refineui="search-field-clear"] {
+  transition:
+    opacity var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+[data-refineui="dropdown-item"] {
+  transition:
+    background-color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+[data-refineui="select-item"] {
+  transition:
+    background-color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+/* List rows — Sidebar link plate (primary hover / active) */
+[data-refineui="dropdown-item"][data-selected="true"]:not(:disabled) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="dropdown-item"][data-state="selected"]:not(:disabled) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="select-item"][data-selected="true"]:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  border-color: transparent;
+}
+[data-refineui="dropdown-item"]:not(:disabled):hover:not(:active),
+[data-refineui="dropdown-menu"] [data-refineui="dropdown-item"]:not(:disabled):focus {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="select-item"]:not([aria-disabled="true"]):hover:not(:active),
+[data-refineui="select-menu"] [data-refineui="select-item"]:not([aria-disabled="true"]):not(:active):focus {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="dropdown-item"]:not(:disabled):active,
+[data-refineui="dropdown-item"][data-state="pressed"]:not(:disabled),
+[data-refineui="dropdown-item"][data-state="pressed"]:not(:disabled):hover,
+[data-refineui="dropdown-item"][data-selected="true"]:not(:disabled):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="select-item"]:not([aria-disabled="true"]):active,
+[data-refineui="select-item"][data-selected="true"]:not([aria-disabled="true"]):active,
+[data-refineui="select-item"][data-state="pressed"]:not([aria-disabled="true"]),
+[data-refineui="select-item"][data-state="pressed"]:not([aria-disabled="true"]):hover,
+[data-refineui="select-item"][data-state="pressed"][data-selected="true"]:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="select-item"][data-state="hover"]:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="select-item"][data-state="selected"]:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  border-color: transparent;
+}
+[data-refineui="select-item"][data-selected="true"]:focus-visible,
+[data-refineui="select-item"][data-state="selected"]:focus-visible {
+  outline: none;
+}
+/* State=Disabled `1144:2423` — background surfaceDisabled + text foregroundDisabled */
+[data-refineui="select-item"][aria-disabled="true"] {
+  background-color: var(--refineui-color-alias-background-surface-disabled) !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  transform: none !important;
+}
+[data-refineui="select-item"][aria-disabled="true"] [data-refineui-select-item-text] {
+  color: inherit;
+}
+
+[data-refineui="dropdown-menu"][data-side="bottom"] {
+  transform-origin: top center;
+  animation: refineui-dropdown-menu-enter-bottom var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
+}
+[data-refineui="select-menu"][data-side="bottom"] {
+  transform-origin: top center;
+  animation: refineui-dropdown-menu-enter-bottom var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
+}
+[data-refineui="dropdown-menu"][data-side="top"] {
+  transform-origin: bottom center;
+  animation: refineui-dropdown-menu-enter-top var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
+}
+[data-refineui="select-menu"][data-side="top"] {
+  transform-origin: bottom center;
+  animation: refineui-dropdown-menu-enter-top var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard) both;
+}
+@keyframes refineui-dropdown-menu-enter-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes refineui-dropdown-menu-enter-top {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="dropdown-menu"],
+  [data-refineui="select-menu"] {
+    animation: none !important;
+  }
+}
+[data-refineui="calendar-day"] {
+  transition:
+    background-color var(--refineui-motion-duration-fast),
+    border-color var(--refineui-motion-duration-fast),
+    color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+/* Calendar caption selects — ghost plate (header chrome, not form-field outline) */
+[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header]:not(:disabled):hover:not(:active),
+[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header][data-state="open"]:not(:disabled) {
+  background-color: var(--refineui-color-alias-background-primary-hover);
+  color: var(--refineui-color-alias-foreground-primary-hover);
+}
+[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header]:not(:disabled):active,
+[data-refineui="calendar"] [data-refineui="select-trigger"][data-calendar-header][data-state="open"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-primary-active);
+  color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="calendar-nav"]:hover,
+[data-refineui="chip-remove"]:hover {
+  opacity: 0.9;
+}
+
+/* Accordion — Web Kit `54:146`: pressed only (no hover) + unified open item shell */
+[data-refineui="accordion-trigger"]:active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  transform: scale(var(--refineui-motion-scale-press));
+}
+[data-refineui="accordion-item"][data-state="open"] [data-refineui="accordion-trigger"] {
+  background-color: transparent;
+}
+[data-refineui="accordion-item"][data-state="open"] [data-refineui="accordion-trigger"]:active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  transform: scale(var(--refineui-motion-scale-press));
+}
+
+/* Alert — host radius `roundedXLarge` (Foundation). Do not rely on Tailwind `rounded-*`. */
+[data-refineui="alert"] {
+  border-radius: var(--refineui-radius-rounded-x-large);
+}
+
+/* Switch — Web Kit `270:3057` · color feedback (alias tokens only) */
+[data-refineui="switch"][data-checked="false"]:not(:disabled):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-surface-selected) !important;
+}
+[data-refineui="switch"][data-checked="false"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-brand-subtle) !important;
+}
+[data-refineui="switch"][data-checked="true"]:not(:disabled):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-brand-hover) !important;
+}
+[data-refineui="switch"][data-checked="true"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-brand-active) !important;
+}
+[data-refineui="switch"]:focus-visible:not(:disabled) {
+  outline: 2px solid var(--refineui-color-alias-border-focus);
+  outline-offset: var(--refineui-spacing-size-xxx-small);
+}
+
+/* Thumb travel — logical: flip translateX under dir=rtl */
+[data-refineui="switch"] > span {
+  transform: translateX(0);
+}
+[data-refineui="switch"][data-checked="true"] > span {
+  transform: translateX(var(--refineui-size-switch-thumb));
+}
+[dir="rtl"] [data-refineui="switch"][data-checked="true"] > span {
+  transform: translateX(calc(-1 * var(--refineui-size-switch-thumb)));
+}
+
+/* Table — header rail · inset rows · selected matches Menu/Dropdown (no brand mark) */
+[data-refineui="table"] table {
+  border-collapse: separate;
+  border-spacing: 0 var(--refineui-spacing-size-xx-small);
+}
+
+/* Chrome strips — header + footer share surface language */
+[data-refineui="table"] thead th,
+[data-refineui="table"] tfoot td {
+  background-color: var(--refineui-color-alias-background-surface-active);
+}
+[data-refineui="table"] thead th:first-child,
+[data-refineui="table"] tfoot td:first-child {
+  border-start-start-radius: var(--refineui-radius-rounded-large);
+  border-end-start-radius: var(--refineui-radius-rounded-large);
+}
+[data-refineui="table"] thead th:last-child,
+[data-refineui="table"] tfoot td:last-child {
+  border-start-end-radius: var(--refineui-radius-rounded-large);
+  border-end-end-radius: var(--refineui-radius-rounded-large);
+}
+
+/* Header labels — quieter than body, same strip as footer */
+[data-refineui="table"] thead th {
+  color: var(--refineui-color-alias-foreground-tertiary);
+  box-shadow: inset 0 calc(-1 * var(--refineui-stroke-width-thin)) 0 0
+    var(--refineui-color-alias-border-subtle);
+}
+
+/* Footer values — secondary emphasis on the same strip */
+[data-refineui="table"] tfoot td {
+  font-weight: 500;
+  color: var(--refineui-color-alias-foreground-secondary);
+}
+
+/* Inset hover — Menu / Dropdown `surfaceHover` */
+[data-refineui="table"] tbody [data-refineui="table-row"]:not([data-state="selected"]):hover > * {
+  background-color: var(--refineui-color-alias-background-surface-hover);
+}
+[data-refineui="table"] tbody [data-refineui="table-row"]:not([data-state="selected"]):hover > *:first-child {
+  border-start-start-radius: var(--refineui-radius-rounded-large);
+  border-end-start-radius: var(--refineui-radius-rounded-large);
+}
+[data-refineui="table"] tbody [data-refineui="table-row"]:not([data-state="selected"]):hover > *:last-child {
+  border-start-end-radius: var(--refineui-radius-rounded-large);
+  border-end-end-radius: var(--refineui-radius-rounded-large);
+}
+
+/* Selected — Menu / Dropdown `surfaceSelected`, no leading brand bar */
+[data-refineui="table"] tbody [data-refineui="table-row"][data-state="selected"] > * {
+  background-color: var(--refineui-color-alias-background-surface-selected);
+}
+[data-refineui="table"] tbody [data-refineui="table-row"][data-state="selected"] > *:first-child {
+  border-start-start-radius: var(--refineui-radius-rounded-large);
+  border-end-start-radius: var(--refineui-radius-rounded-large);
+}
+[data-refineui="table"] tbody [data-refineui="table-row"][data-state="selected"] > *:last-child {
+  border-start-end-radius: var(--refineui-radius-rounded-large);
+  border-end-end-radius: var(--refineui-radius-rounded-large);
+}
+
+/* Segmented Control — sliding brand indicator */
+
+/* Overflowing options stay reachable by drag/keyboard without native scrollbar chrome inside the pill. */
+[data-refineui="segmented-control"] {
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+[data-refineui="segmented-control"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-refineui="segmented-control-indicator"] {
+  transition: none;
+  display: block;
+}
+[data-refineui="segmented-control-indicator"][data-ready="true"] {
+  transition:
+    transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
+}
+
+[data-refineui="segmented-control"] [data-refineui="segmented-control-item"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
+  color: var(--refineui-color-alias-foreground-primary);
+  background-color: transparent;
+}
+[data-refineui="segmented-control"] [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
+  color: var(--refineui-color-alias-foreground-on-brand);
+  background-color: transparent;
+}
+[data-refineui="segmented-control"]:has(
+  [data-refineui="segmented-control-item"][data-selected="true"]:not(:disabled):hover
+) [data-refineui="segmented-control-indicator"] {
+  background-color: var(--refineui-color-alias-background-brand-hover);
+}
+[data-refineui="segmented-control-item"]:active {
+  transform: none;
+}
+
+/* Tabs — underline track, sliding brand indicator */
+[data-refineui="tabs-indicator"] {
+  transition: none;
+  display: block;
+}
+[data-refineui="tabs-indicator"][data-ready="true"] {
+  transition:
+    transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
+}
+[data-refineui="tab"]:not(:disabled):not([aria-disabled="true"]):not([data-selected="true"]):hover {
+  color: var(--refineui-color-alias-foreground-primary-hover);
+}
+[data-refineui="tab"][data-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
+  color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="tabs"]:has(
+  [data-refineui="tab"][data-selected="true"]:not(:disabled):hover
+) [data-refineui="tabs-indicator"] {
+  background-color: var(--refineui-color-alias-background-brand-hover);
+}
+[data-refineui="tab"]:active {
+  transform: none;
+}
+/* Calendar / Day — Web Kit `Calendar / Day` (`639:7052`) */
+[data-refineui="calendar-day"]:not([disabled]):not([data-inactive="true"]):not([data-selected]):not([data-range-middle]):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="calendar-day"]:not([disabled]):not([data-inactive="true"]):not([data-selected]):not([data-range-middle]):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="calendar-day"][data-range-middle]:not([disabled]):not([data-inactive="true"]):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="calendar-day"][data-range-middle]:not([disabled]):not([data-inactive="true"]):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+/* Selected / Day — selection uses fixed rest only; no hover/pressed background (Web Kit) */
+/* Stepper — markers share Calendar day cell selection; upcoming uses primary hover/active */
+[data-refineui="stepper-item"]:not([data-disabled="true"])
+  [data-refineui="stepper-indicator"][data-state="upcoming"]:active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  border-color: var(--refineui-color-alias-border-strong) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+/* Pagination — Web Kit `558:1989` · `Pagination / Item` `570:2332` */
+[data-refineui="pagination"]:not([data-ellipsis="true"]):not(:disabled):not(:focus):hover {
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
+  border-color: var(--refineui-color-alias-border-hover) !important;
+}
+[data-refineui="pagination"][data-page="true"][data-selected="true"] {
+  border-width: var(--refineui-stroke-width-thick);
+  border-color: var(--refineui-color-alias-border-focus);
+  background-color: var(--refineui-color-alias-background-surface-selected);
+  color: var(--refineui-color-alias-foreground-primary);
+  font-weight: 600;
+}
+[data-refineui="pagination"]:not([data-ellipsis="true"]):focus-visible {
+  border-color: var(--refineui-color-alias-border-focus) !important;
+  box-shadow: 0 0 0 0.5px var(--refineui-color-alias-border-focus);
+}
+[data-refineui="pagination"]:disabled {
+  background-color: var(--refineui-color-alias-background-surface-disabled) !important;
+  border-color: var(--refineui-color-alias-border-disabled) !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  cursor: not-allowed;
+  opacity: 1;
+  transform: none;
+}
+/* Button — Web Kit `79:3304` — Hover: `:hover:not(:active)`; Pressed: `:active` only (no overlap) */
+[data-refineui="button"][data-variant="primary"]:not([data-inactive="true"]):hover:not(:active) {
+  background-color: var(--refineui-btn-primary-hover) !important;
+}
+[data-refineui="button"][data-variant="primary"]:not([data-inactive="true"]):active {
+  background-color: var(--refineui-btn-primary-pressed) !important;
+}
+[data-refineui="button"][data-variant="secondary"]:not([data-inactive="true"]):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
+  border-color: var(--refineui-color-alias-border-strong) !important;
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="button"][data-variant="secondary"]:not([data-inactive="true"]):active {
+  background-color: var(--refineui-color-alias-background-surface-active) !important;
+  border-color: var(--refineui-color-alias-border-strong) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="button"][data-variant="outline"]:not([data-inactive="true"]):hover:not(:active) {
+  border-color: var(--refineui-color-alias-border-strong) !important;
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="button"][data-variant="outline"]:not([data-inactive="true"]):active {
+  border-color: var(--refineui-color-alias-border-strong) !important;
+}
+[data-refineui="button"][data-variant="ghost"]:not([data-inactive="true"]):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="button"][data-variant="ghost"]:not([data-inactive="true"]):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+
+/* Button — inactive / disabled (`data-inactive` — native disabled or aria-disabled) */
+[data-refineui="button"][data-inactive="true"] {
+  opacity: 1;
+  transform: none !important;
+}
+[data-refineui="button"][data-variant="primary"][data-inactive="true"] {
+  background-color: var(--refineui-color-alias-background-brand-disabled) !important;
+  border-color: transparent !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+[data-refineui="button"][data-variant="secondary"][data-inactive="true"] {
+  background-color: var(--refineui-color-alias-background-surface-disabled) !important;
+  border-color: var(--refineui-color-alias-border-disabled) !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+[data-refineui="button"][data-variant="outline"][data-inactive="true"] {
+  background-color: transparent !important;
+  border-color: var(--refineui-color-alias-border-disabled) !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+[data-refineui="button"][data-variant="ghost"][data-inactive="true"] {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+
+[data-refineui="button"]:not([data-inactive="true"]):active,
+[data-refineui="pagination"][data-page="true"]:not(:disabled):active,
+[data-refineui="pagination"]:not(:disabled):active,
+[data-refineui="dropdown-item"]:not(:disabled):active,
+[data-refineui="select-item"]:not([aria-disabled="true"]):active,
+[data-refineui="menu-item"]:not(:disabled):active,
+[data-refineui="command-item"]:not(:disabled):active,
+[data-refineui="calendar-nav"]:active,
+[data-refineui="calendar-day"]:active,
+[data-refineui="chip-remove"]:active {
+  transform: scale(var(--refineui-motion-scale-press));
+}
+/* `data-state="pressed"` — div options (`select-item`) can drop scale with `:active` alone; mirror here */
+[data-refineui="dropdown-item"][data-state="pressed"]:not(:disabled),
+[data-refineui="select-item"][data-state="pressed"]:not([aria-disabled="true"]),
+[data-refineui="menu-item"][data-state="pressed"]:not(:disabled),
+[data-refineui="command-item"][data-state="pressed"]:not(:disabled) {
+  transform: scale(var(--refineui-motion-scale-press));
+}
+[data-refineui="button"]:focus-visible,
+[data-refineui="pagination"][data-page="true"]:focus-visible,
+[data-refineui="pagination"]:focus-visible,
+[data-refineui="accordion-trigger"]:focus-visible,
+[data-refineui="select-item"]:focus:not(:focus-visible) {
+  outline: none;
+}
+[data-refineui="dropdown-item"]:focus-visible,
+[data-refineui="select-item"]:focus-visible,
+[data-refineui="menu-item"]:focus-visible,
+[data-refineui="command-item"]:focus-visible,
+[data-refineui="segmented-control-item"]:focus-visible,
+[data-refineui="tab"]:focus-visible,
+[data-refineui="calendar-nav"]:focus-visible,
+[data-refineui="calendar-day"]:focus-visible,
+[data-refineui="chip-remove"]:focus-visible,
+[data-refineui="drawer-close"]:focus-visible,
+[data-refineui="search-field-clear"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+/* Segmented Control: inset focus — outline is not clipped by track overflow */
+[data-refineui="segmented-control"] [data-refineui="segmented-control-item"]:focus-visible {
+  outline: none;
+  outline-offset: 0;
+}
+[data-refineui="segmented-control"] [data-refineui="segmented-control-item"]:not([data-selected="true"]):focus-visible {
+  box-shadow: inset 0 0 0 var(--refineui-stroke-width-thick) var(--refineui-color-alias-border-focus);
+}
+[data-refineui="segmented-control"] [data-refineui="segmented-control-item"][data-selected="true"]:focus-visible {
+  box-shadow: none;
+}
+
+/* Tree / Item — Sidebar link plate (see list rows above) */
+[data-refineui="tree-item-trigger"] {
+  border-radius: var(--refineui-radius-rounded-large);
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="tree-item-trigger"]:not([data-disabled="true"]):hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="tree-item-trigger"][data-selected="true"] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="tree-item-trigger"][data-selected="true"]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="tree-item-trigger"]:not([data-disabled="true"]):active,
+[data-refineui="tree-item-trigger"][data-selected="true"]:active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="tree-item-trigger"]:not([data-disabled="true"]):focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+[data-refineui="tree-item-trigger"][data-disabled="true"] {
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* Menu / Item — Sidebar link plate */
+[data-refineui="menu-item"][data-state="hover"] {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="menu-item"][data-state="pressed"] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="menu-item"][data-state="active"] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="menu-item"][data-state="disabled"] {
+  background-color: transparent !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+[data-refineui="menu-item"][data-state="default"]:not(:disabled):hover {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="menu-item"][data-state="default"]:not(:disabled):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+
+/* Command / Item — Sidebar link plate */
+[data-refineui="command-item"][data-state="hover"],
+[data-refineui="command-item"][data-selected="true"]:not(:disabled):not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="command-item"][data-state="pressed"],
+[data-refineui="command-item"][data-state="active"]:not(:disabled):active,
+[data-refineui="command-item"][data-selected="true"]:not(:disabled):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="command-item"][data-state="active"]:not(:disabled):not(:active) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="command-item"][data-state="disabled"],
+[data-refineui="command-item"]:disabled {
+  background-color: transparent !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+[data-refineui="command-item"][data-state="default"]:not(:disabled):hover {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="command-item"][data-state="default"]:not(:disabled):active,
+[data-refineui="command-item"]:not(:disabled):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+
+@keyframes refineui-menu-popover-enter {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--refineui-motion-distance-float))) scale(var(--refineui-motion-scale-press));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes refineui-menu-popover-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--refineui-motion-distance-float))) scale(var(--refineui-motion-scale-press));
+  }
+}
+
+[data-refineui="menu-popover"][data-state="open"] {
+  transform-origin: top left;
+  animation: refineui-menu-popover-enter var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
+}
+[data-refineui="menu-popover"][data-state="closed"] {
+  transform-origin: top left;
+  pointer-events: none;
+  animation: refineui-menu-popover-exit var(--refineui-motion-duration-normal) var(--refineui-motion-easing-standard);
+}
+/* Ensure portaled panel paints above Starlight content (inline z-index is the source of truth) */
+[data-refineui="menu-popover"] {
+  z-index: var(--refineui-z-messages);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="menu-popover"] {
+    animation: none;
+  }
+}
+
+@keyframes refineui-menu-submenu-enter-right {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--refineui-motion-distance-float)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes refineui-menu-submenu-enter-left {
+  from {
+    opacity: 0;
+    transform: translateX(var(--refineui-motion-distance-float));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+[data-refineui="menu"][data-submenu="true"][data-state="open"] {
+  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard) both;
+}
+[data-refineui="menu"][data-submenu="true"][data-state="open"][data-side="left"] {
+  transform-origin: right center;
+  animation-name: refineui-menu-submenu-enter-left;
+}
+[data-refineui="menu"][data-submenu="true"][data-state="open"][data-side="right"] {
+  transform-origin: left center;
+  animation-name: refineui-menu-submenu-enter-right;
+}
+
+[data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"] {
+  animation: refineui-menu-submenu-enter-right var(--refineui-motion-duration-fast) var(--refineui-motion-easing-standard) both;
+}
+[data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"][data-side="left"] {
+  transform-origin: right center;
+  animation-name: refineui-menu-submenu-enter-left;
+}
+[data-refineui="dropdown-menu"][data-submenu="true"][data-state="open"][data-side="right"] {
+  transform-origin: left center;
+  animation-name: refineui-menu-submenu-enter-right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="menu"][data-submenu="true"],
+  [data-refineui="dropdown-menu"][data-submenu="true"] {
+    animation: none;
+  }
+}
+
+/* Spin Button — Web Kit `561:2067` (focus ring unified on root border) */
+[data-refineui="spinbutton"] {
+  transition: border-color var(--refineui-motion-duration-fast), background-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="spinbutton"]:focus-within:not([data-disabled="true"]) {
+  border-color: var(--refineui-color-alias-border-focus) !important;
+}
+
+/* Spin Button / Stepper — default · hover · pressed · disabled (icons: currentColor) */
+[data-refineui="spinbutton-step"] {
+  transition: background-color var(--refineui-motion-duration-fast), color var(--refineui-motion-duration-fast),
+    opacity var(--refineui-motion-duration-fast);
+}
+[data-refineui="spinbutton-step"]:not(:disabled) {
+  background-color: var(--refineui-color-alias-background-primary) !important;
+  color: var(--refineui-color-alias-foreground-secondary) !important;
+  opacity: 1;
+}
+[data-refineui="spinbutton-step"]:not(:disabled):hover {
+  background-color: var(--refineui-color-alias-background-surface-hover) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="spinbutton-step"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-surface-active) !important;
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="spinbutton-step"]:disabled {
+  background-color: var(--refineui-color-alias-background-surface-disabled) !important;
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* Focus ring on root `[data-refineui="spinbutton"]:focus-within` — steps drop native ring */
+[data-refineui="spinbutton-step"]:focus-visible {
+  outline: none;
+}
+
+/* Spin Button: no layout scale on press (exempt from shared button :active scale) */
+[data-refineui="spinbutton"]:active,
+[data-refineui="spinbutton-step"]:active {
+  transform: none !important;
+}
+
+/* Base typography — Inter (Foundation font) */
+[data-refineui] {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* Textarea, Input — Web Kit form controls */
+[data-refineui="textarea"],
+[data-refineui="input"] {
+  transition: border-color var(--refineui-motion-duration-fast), box-shadow var(--refineui-motion-duration-fast);
+}
+[data-refineui="textarea"]:not(:disabled):not(:focus):hover:not([data-error="true"]):not([data-success="true"]),
+[data-refineui="input"]:not(:disabled):not(:focus):hover:not([data-error="true"]):not([data-success="true"]) {
+  border-color: var(--refineui-color-alias-border-hover);
+}
+[data-refineui="textarea"]:focus:not(:disabled):not([data-error="true"]):not([data-success="true"]),
+[data-refineui="input"]:focus:not(:disabled):not([data-error="true"]):not([data-success="true"]) {
+  border-color: var(--refineui-color-alias-border-focus) !important;
+  box-shadow: 0 0 0 0.5px var(--refineui-color-alias-border-focus);
+}
+[data-refineui="textarea"][data-error="true"]:focus:not(:disabled),
+[data-refineui="input"][data-error="true"]:focus:not(:disabled) {
+  border-color: var(--refineui-color-alias-background-error-hover) !important;
+  box-shadow: 0 0 0 0.5px var(--refineui-color-alias-background-error-hover);
+}
+[data-refineui="textarea"][data-success="true"]:focus:not(:disabled),
+[data-refineui="input"][data-success="true"]:focus:not(:disabled) {
+  border-color: var(--refineui-color-alias-background-success-hover) !important;
+  box-shadow: 0 0 0 0.5px var(--refineui-color-alias-background-success-hover);
+}
+
+/* Select trigger — Navigation Menu hover / press / open plate; hairline field chrome */
+[data-refineui="select-trigger"]:not([data-appearance="plain"]) {
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast),
+    border-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="select-trigger"]:not([data-appearance="plain"]):not(:disabled):hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="select-trigger"]:not([data-appearance="plain"]):not(:disabled):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="select-trigger"]:not([data-appearance="plain"])[data-state="open"]:not(:disabled) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="select-trigger"]:not([data-appearance="plain"])[data-state="open"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="select-trigger"]:not([data-appearance="plain"]):focus-visible:not(:disabled) {
+  outline: none;
+  color: var(--refineui-color-alias-foreground-primary-hover);
+  background-color: var(--refineui-color-alias-background-primary-hover);
+}
+[data-refineui="input-otp-slot"] {
+  transition:
+    background-color var(--refineui-motion-duration-fast),
+    border-color var(--refineui-motion-duration-fast);
+  caret-color: var(--refineui-color-alias-foreground-primary);
+}
+/* OTP digit typography — CSS vars (not Tailwind @utility; runtime-resolved classes are tree-shaken) */
+[data-refineui="input-otp"][data-size="sm"] [data-refineui="input-otp-slot"] {
+  font-family: var(--refineui-typography-sub-title-1-font-family);
+  font-size: var(--refineui-typography-sub-title-1-font-size);
+  font-weight: var(--refineui-typography-sub-title-1-font-weight);
+  line-height: var(--refineui-typography-sub-title-1-line-height);
+}
+[data-refineui="input-otp"][data-size="md"] [data-refineui="input-otp-slot"] {
+  font-family: var(--refineui-typography-title-3-font-family);
+  font-size: var(--refineui-typography-title-3-font-size);
+  font-weight: var(--refineui-typography-title-3-font-weight);
+  line-height: var(--refineui-typography-title-3-line-height);
+}
+[data-refineui="input-otp"][data-size="lg"] [data-refineui="input-otp-slot"] {
+  font-family: var(--refineui-typography-title-2-font-family);
+  font-size: var(--refineui-typography-title-2-font-size);
+  font-weight: var(--refineui-typography-title-2-font-weight);
+  line-height: var(--refineui-typography-title-2-line-height);
+}
+/* Hover: slightly lighter plate */
+[data-refineui="input-otp"]:not([data-disabled="true"]) [data-refineui="input-otp-slot"]:not(:disabled):not(:focus):hover,
+[data-refineui="search-field"]:not([data-appearance="plain"]):not([data-disabled="true"]):not(:focus-within):hover {
+  background-color: var(--refineui-color-alias-background-surface-active);
+}
+/* Focus: keep soft plate; thin border only — OTP slot & Search Field share one rule */
+[data-refineui="input-otp-slot"]:focus:not(:disabled),
+[data-refineui="search-field"]:not([data-appearance="plain"]):not([data-disabled="true"]):focus-within {
+  border-color: var(--refineui-color-alias-border-default);
+}
+
+/* Search Field — rest plate is Tailwind class only (same as OTP slot); hover/focus above */
+[data-refineui="search-field"] {
+  caret-color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="search-field"][data-disabled="true"]:not([data-appearance="plain"]) {
+  cursor: not-allowed;
+  background-color: var(--refineui-color-alias-background-surface-disabled);
+  border-color: var(--refineui-color-alias-border-disabled);
+}
+[data-refineui="search-field"][data-disabled="true"] {
+  cursor: not-allowed;
+}
+[data-refineui="search-field-input"]::-webkit-search-decoration,
+[data-refineui="search-field-input"]::-webkit-search-cancel-button,
+[data-refineui="search-field-input"]::-webkit-search-results-button,
+[data-refineui="search-field-input"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+[data-refineui="search-field-clear"]:not(:disabled):hover {
+  color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="search-field"]:active,
+[data-refineui="search-field-clear"]:active {
+  transform: none !important;
+}
+[data-refineui="input"]::placeholder,
+[data-refineui="textarea"]::placeholder,
+[data-refineui="search-field-input"]::placeholder {
+  color: var(--refineui-color-alias-foreground-placeholder);
+}
+[data-refineui="input"]:disabled,
+[data-refineui="textarea"]:disabled,
+[data-refineui="select-trigger"]:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Toast — Sonner-like `<ol>/<li>` stack + expand full vertical stack on `ol` hover (card spec Web Kit `548:655`) */
+[data-refineui="toaster"] {
+  --refineui-toaster-inset: var(--refineui-spacing-size-large);
+  --refineui-toaster-inset-top: calc(
+    var(--refineui-spacing-size-xxx-large) + var(--refineui-spacing-size-large)
+  );
+  --refineui-toaster-safe-top: env(safe-area-inset-top, 0px);
+  --refineui-toaster-safe-right: env(safe-area-inset-right, 0px);
+  --refineui-toaster-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --refineui-toaster-safe-left: env(safe-area-inset-left, 0px);
+  --refineui-toast-slide-in-y: -100%;
+  --refineui-toast-slide-out-y: -100%;
+  position: fixed;
+  /* fixed width uses viewport; notch sides via env + inset */
+  width: min(
+    calc(
+      100% - var(--refineui-toaster-safe-left) - var(--refineui-toaster-safe-right) - 2 * var(--refineui-toaster-inset)
+    ),
+    var(--refineui-size-toast-max-width)
+  );
+  max-width: var(--refineui-size-toast-max-width);
+  inset-inline: 0;
+  top: calc(var(--refineui-toaster-inset-top) + var(--refineui-toaster-safe-top));
+  margin-inline: auto;
+  z-index: var(--refineui-z-messages);
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  padding: 0;
+  pointer-events: none;
+  /* avoid zero height when children are `position:absolute` — hover hit area from collapsed/expanded stack height */
+  min-height: var(--refineui-toast-collapsed-stack-height, var(--refineui-toast-front-height, 0px));
+  transition: min-height var(--refineui-motion-duration-panel) var(--refineui-motion-easing-emphasized);
+}
+
+@media (max-width: 480px) {
+  [data-refineui="toaster"] {
+    --refineui-toaster-inset: var(--refineui-spacing-size-medium);
+    --refineui-toaster-inset-top: var(--refineui-spacing-size-xxx-large);
+  }
+}
+
+/*
+ * With `pointer-events: none` on `ol`, pointer passes through gaps to the page and `ol:hover` collapses.
+ * Transparent hit layer uses `pointer-events: auto` to keep hover across gaps (z-index below `li`).
+ */
+[data-refineui="toaster"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: auto;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-refineui="toaster"]:hover {
+    min-height: var(--refineui-toast-expanded-stack-height, var(--refineui-toast-collapsed-stack-height, 0px));
+  }
+}
+
+[data-refineui="toast-item"] {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  bottom: auto;
+  display: flex;
+  justify-content: center;
+  overflow: visible;
+  pointer-events: auto;
+  transform: translateY(var(--refineui-toast-offset-collapsed, 0px));
+  transition: transform var(--refineui-motion-duration-panel) var(--refineui-motion-easing-emphasized), height var(--refineui-motion-duration-panel) var(--refineui-motion-easing-emphasized);
+  z-index: var(--refineui-toast-z-index, 100);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-refineui="toaster"]:hover [data-refineui="toast-item"] {
+    transform: translateY(var(--refineui-toast-offset-expanded, 0px));
+  }
+}
+
+/*
+ * Keep stack scale/opacity on the outer wrapper only.
+ * `position:absolute; inset:0` on the card pulls it out of flow with absolute `li` → zero height and broken layout.
+ */
+[data-refineui="toast-scale-layer"] {
+  --refineui-toast-stack-opacity-step: 0.12;
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+  transform: scale(calc(1 - (var(--refineui-toast-stack-index, 0) * 0.018)));
+  transform-origin: top center;
+  opacity: calc(1 - (var(--refineui-toast-stack-index, 0) * var(--refineui-toast-stack-opacity-step)));
+  transition: transform var(--refineui-motion-duration-panel) var(--refineui-motion-easing-emphasized), opacity var(--refineui-motion-duration-slow) var(--refineui-motion-easing-ease-in-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-refineui="toaster"]:hover [data-refineui="toast-scale-layer"] {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Mobile/touch: no hover expand → always expanded vertical spacing + full scale (later, more specific rules) */
+@media (hover: none), (pointer: coarse) {
+  [data-refineui="toaster"] {
+    min-height: var(--refineui-toast-expanded-stack-height, var(--refineui-toast-collapsed-stack-height, 0px));
+  }
+
+  [data-refineui="toaster"] [data-refineui="toast-item"] {
+    transform: translateY(var(--refineui-toast-offset-expanded, 0px));
+  }
+
+  [data-refineui="toaster"] [data-refineui="toast-scale-layer"] {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+[data-refineui="toast"] {
+  --refineui-toast-swipe-x: 0px;
+  --refineui-toast-swipe-y: 0px;
+  --refineui-toast-motion-duration: var(--refineui-motion-duration-toast-enter);
+  --refineui-toast-motion-easing: var(--refineui-motion-easing-emphasized);
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: color-mix(
+    in srgb,
+    var(--refineui-color-alias-surface-popover) 82%,
+    transparent
+  );
+  backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
+  -webkit-backdrop-filter: blur(var(--refineui-spacing-size-xxx-large));
+  box-shadow: var(--refineui-elevation-8);
+  touch-action: none;
+  cursor: grab;
+  transform: translate3d(var(--refineui-toast-swipe-x), var(--refineui-toast-swipe-y), 0);
+  transition:
+    opacity var(--refineui-toast-motion-duration) var(--refineui-toast-motion-easing),
+    transform var(--refineui-toast-motion-duration) var(--refineui-toast-motion-easing);
+  will-change: transform, opacity;
+  user-select: none;
+}
+
+[data-refineui="toast-icon"] {
+  color: var(--refineui-color-alias-foreground-primary);
+}
+
+[data-refineui="toast"][data-variant="success"] [data-refineui="toast-icon"] {
+  color: var(--refineui-color-alias-foreground-success);
+}
+
+[data-refineui="toast"][data-variant="error"] [data-refineui="toast-icon"] {
+  color: var(--refineui-color-alias-foreground-error);
+}
+
+[data-refineui="toast"][data-variant="warning"] [data-refineui="toast-icon"] {
+  color: var(--refineui-color-alias-foreground-warning);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  [data-refineui="toast"] {
+    background-color: var(--refineui-color-alias-surface-popover);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="dialog"] > [role="presentation"],
+  [data-refineui="drawer"] > [role="presentation"] {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+/* Dialog / Drawer scrim — tint (`surfaceOverlay`) + light blur (keep behind content readable) */
+[data-refineui="dialog"] > [role="presentation"],
+[data-refineui="drawer"] > [role="presentation"] {
+  backdrop-filter: blur(var(--refineui-spacing-size-xxx-small));
+  -webkit-backdrop-filter: blur(var(--refineui-spacing-size-xxx-small));
+}
+
+[data-refineui="toast"][data-swiping="true"] {
+  cursor: grabbing;
+  transition: none;
+}
+
+[data-refineui="toast"][data-swipe-out="left"] {
+  --refineui-toast-swipe-x: -120%;
+  opacity: 0;
+}
+
+[data-refineui="toast"][data-swipe-out="right"] {
+  --refineui-toast-swipe-x: 120%;
+  opacity: 0;
+}
+
+[data-refineui="toast"][data-swipe-out="top"] {
+  --refineui-toast-swipe-y: -120%;
+  opacity: 0;
+}
+
+[data-refineui="toast"][data-swipe-out="bottom"] {
+  --refineui-toast-swipe-y: 120%;
+  opacity: 0;
+}
+
+/* Enter: slide in from off-edge → rest. Leave (non-swipe): slide back out the same way. */
+[data-refineui="toast"][data-stack-state="entering"] {
+  opacity: 0;
+  transform: translate3d(
+    var(--refineui-toast-swipe-x, 0px),
+    var(--refineui-toast-slide-in-y, -100%),
+    0
+  );
+}
+
+[data-refineui="toast"][data-stack-state="leaving"]:not([data-swipe-out]) {
+  --refineui-toast-motion-duration: var(--refineui-motion-duration-toast-leave);
+  --refineui-toast-motion-easing: var(--refineui-motion-easing-standard);
+  opacity: 0;
+  transform: translate3d(
+    var(--refineui-toast-swipe-x, 0px),
+    var(--refineui-toast-slide-out-y, -100%),
+    0
+  );
+}
+
+[data-refineui="toast"][data-swipe-out] {
+  --refineui-toast-motion-duration: var(--refineui-motion-duration-toast-leave);
+  --refineui-toast-motion-easing: var(--refineui-motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="toaster"],
+  [data-refineui="toast-item"],
+  [data-refineui="toast-scale-layer"],
+  [data-refineui="toast"] {
+    transition-duration: var(--refineui-motion-duration-instant);
+  }
+
+  [data-refineui="toast"][data-stack-state="entering"],
+  [data-refineui="toast"][data-stack-state="leaving"]:not([data-swipe-out]) {
+    transform: none;
+  }
+}
+
+/* Skeleton — solid wash + opacity pulse (shadcn/MUI-style; not sliding shimmer) */
+@keyframes refineui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--refineui-opacity-disabled);
+  }
+}
+[data-refineui="skeleton"] {
+  background-color: var(--refineui-color-alias-background-surface-selected);
+  animation: refineui-skeleton-pulse var(--refineui-motion-duration-skeleton) var(--refineui-motion-easing-ease-in-out) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="skeleton"] {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Carousel — stage drag + control focus (nav lives below slides) */
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="carousel-track"][data-animated="true"] {
+    transition: none !important;
+  }
+}
+[data-refineui="carousel-viewport"] {
+  touch-action: pan-y;
+}
+[data-refineui="carousel-viewport"][data-dragging="true"] {
+  cursor: grabbing;
+}
+[data-refineui="carousel-indicator-thumb"] {
+  transition: none;
+}
+[data-refineui="carousel-indicator-thumb"][data-ready="true"] {
+  transition: transform var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized),
+    width var(--refineui-motion-duration-medium) var(--refineui-motion-easing-emphasized);
+}
+[data-refineui="carousel-nav"]:focus-visible,
+[data-refineui="carousel-indicator"]:focus-visible,
+[data-refineui="carousel"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+
+/* Spinner — Web Kit COMPONENT_SET `Spinner` `550:3669` */
+@keyframes refineui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+[data-refineui="spinner"] {
+  flex-shrink: 0;
+  animation: refineui-spin var(--refineui-motion-duration-spinner) var(--refineui-motion-easing-linear) infinite;
+}
+
+/* Checkbox — Web Kit `327:2539` (MCP: Default/Hover/Pressed/Focused/Disabled × checked/unchecked) */
+[data-refineui="checkbox"] {
+  box-sizing: border-box;
+  width: var(--refineui-size-control-checkbox, 20px);
+  height: var(--refineui-size-control-checkbox, 20px);
+  min-width: var(--refineui-size-control-checkbox, 20px);
+  min-height: var(--refineui-size-control-checkbox, 20px);
+  border: 1px solid var(--refineui-color-alias-border-default);
+  border-radius: 4px;
+  background-color: var(--refineui-color-alias-background-primary);
+  transition: background-color var(--refineui-motion-duration-fast), border-color var(--refineui-motion-duration-fast), border-width var(--refineui-motion-duration-fast);
+}
+[data-refineui="checkbox"][data-variant="circular"] {
+  border-radius: 9999px;
+}
+/* Unchecked — Hover: border subtle; Pressed: border strong */
+label:hover:not(:active) [data-refineui="checkbox"][data-checked="false"]:not([data-disabled="true"]) {
+  border-color: var(--refineui-color-alias-border-subtle);
+}
+label:active [data-refineui="checkbox"][data-checked="false"]:not([data-disabled="true"]) {
+  border-color: var(--refineui-color-alias-border-strong);
+}
+/* Checked — Default brand; Hover brandHover; Pressed brandActive */
+[data-refineui="checkbox"][data-checked="true"]:not([data-disabled="true"]) {
+  background-color: var(--refineui-color-alias-background-brand);
+  border-color: var(--refineui-color-alias-background-brand);
+}
+label:hover:not(:active) [data-refineui="checkbox"][data-checked="true"]:not([data-disabled="true"]) {
+  background-color: var(--refineui-color-alias-background-brand-hover);
+  border-color: var(--refineui-color-alias-background-brand-hover);
+}
+label:active [data-refineui="checkbox"][data-checked="true"]:not([data-disabled="true"]) {
+  background-color: var(--refineui-color-alias-background-brand-active);
+  border-color: var(--refineui-color-alias-background-brand-active);
+}
+/* Focused (Figma `state: Focused`) — `focus-within` covers hidden input + flaky `:focus-visible` */
+label:focus-within:not(:active) [data-refineui="checkbox"]:not([data-disabled="true"]) {
+  outline: none;
+  border-width: 2px;
+  border-color: var(--refineui-color-alias-border-strong);
+  border-style: solid;
+  background-color: var(--refineui-color-alias-background-primary);
+}
+label:focus-within:not(:active) [data-refineui="checkbox"][data-checked="true"]:not([data-disabled="true"]) {
+  background-color: var(--refineui-color-alias-background-brand-active);
+  border-color: var(--refineui-color-alias-border-focus);
+}
+[data-refineui="checkbox"][data-disabled="true"][data-checked="false"] {
+  background-color: var(--refineui-color-alias-background-primary-hover);
+  border-color: var(--refineui-color-alias-border-disabled);
+}
+[data-refineui="checkbox"][data-disabled="true"][data-checked="true"] {
+  background-color: var(--refineui-color-alias-background-surface-selected);
+  border-color: var(--refineui-color-alias-background-surface-selected);
+}
+
+/* Radio — Web Kit `397:1001` (`Radio` row) + `Radio / Input` 20px circle — MCP aliases only */
+[data-refineui="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-grid;
+  place-content: center;
+  width: var(--refineui-size-control-checkbox-radio, 20px);
+  height: var(--refineui-size-control-checkbox-radio, 20px);
+  min-width: var(--refineui-size-control-checkbox-radio, 20px);
+  min-height: var(--refineui-size-control-checkbox-radio, 20px);
+  margin: 0;
+  flex-shrink: 0;
+  border: 1px solid var(--refineui-color-alias-border-default);
+  border-radius: 9999px;
+  background-color: var(--refineui-color-alias-background-primary);
+  box-shadow: none;
+  transition: border-color var(--refineui-motion-duration-fast), background-color var(--refineui-motion-duration-fast), box-shadow var(--refineui-motion-duration-fast), opacity var(--refineui-motion-duration-fast);
+}
+[data-refineui="radio"]::after {
+  content: "";
+  width: var(--refineui-spacing-size-medium);
+  height: var(--refineui-spacing-size-medium);
+  border-radius: 9999px;
+  background-color: var(--refineui-color-alias-background-primary);
+  transform: scale(0);
+  transition: transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
+}
+[data-refineui="radio"]:not(:disabled):not(:checked):focus,
+[data-refineui="radio"]:not(:disabled):not(:checked):focus-visible {
+  outline: none;
+  border-color: var(--refineui-color-alias-border-default);
+  box-shadow: 0 0 0 2px var(--refineui-color-alias-border-strong);
+}
+[data-refineui="radio"]:not(:disabled):checked {
+  border-color: var(--refineui-color-alias-foreground-primary);
+  background-color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="radio"]:not(:disabled):checked::after {
+  transform: scale(1);
+}
+[data-refineui="radio"]:not(:disabled):checked:focus,
+[data-refineui="radio"]:not(:disabled):checked:focus-visible {
+  outline: none;
+  border-color: var(--refineui-color-alias-foreground-primary);
+  box-shadow: 0 0 0 2px var(--refineui-color-alias-border-strong);
+}
+[data-refineui="radio"]:disabled:not(:checked) {
+  cursor: not-allowed;
+  background-color: var(--refineui-color-alias-background-primary);
+  border-color: var(--refineui-color-alias-border-disabled);
+  opacity: 1;
+}
+[data-refineui="radio"]:disabled:checked {
+  cursor: not-allowed;
+  background-color: var(--refineui-color-alias-foreground-disabled);
+  border-color: var(--refineui-color-alias-foreground-disabled);
+}
+[data-refineui="radio"]:disabled:checked::after {
+  transform: scale(1);
+}
+[data-refineui="radio"]:disabled {
+  cursor: not-allowed;
+}
+
+/* Link — Web Kit `226:158` (Default / Hover / Focus / Pressed / Disabled) */
+a[data-refineui="link"] {
+  transition: color var(--refineui-motion-duration-fast) ease, text-decoration-color var(--refineui-motion-duration-fast) ease;
+}
+a[data-refineui="link"]:not(.page-btn):not(.page-btn-primary):not(.page-github-btn) {
+  color: var(--refineui-color-alias-foreground-link) !important;
+  text-decoration: none;
+}
+a[data-refineui="link"]:visited:not([aria-disabled="true"]):not(.page-btn):not(.page-btn-primary):not(.page-github-btn) {
+  color: var(--refineui-color-alias-foreground-link-visited) !important;
+}
+a[data-refineui="link"]:hover:not([aria-disabled="true"]):not(.page-btn):not(.page-btn-primary):not(.page-github-btn) {
+  color: var(--refineui-color-alias-foreground-link-hover) !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+a[data-refineui="link"]:focus-visible:not([aria-disabled="true"]):not(.page-btn):not(.page-btn-primary):not(.page-github-btn) {
+  color: var(--refineui-color-alias-foreground-link-active) !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+a[data-refineui="link"]:active:not([aria-disabled="true"]):not(.page-btn):not(.page-btn-primary):not(.page-github-btn) {
+  color: var(--refineui-color-alias-foreground-link-visited) !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+a[data-refineui="link"][aria-disabled="true"] {
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  text-decoration: none !important;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+a[data-refineui="link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+
+/* Breadcrumb — Web Kit `283:688` (Figma Breadcrumb / BreadcrumbItem) */
+[data-refineui="breadcrumb-link"],
+[data-refineui="breadcrumb-ellipsis"] {
+  box-sizing: border-box;
+  min-height: var(--refineui-size-button-min-height-sm);
+  border-radius: var(--refineui-radius-rounded-large);
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="breadcrumb-link"]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="breadcrumb-link"][data-current]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="breadcrumb-link"]:active,
+[data-refineui="breadcrumb-link"][data-state="pressed"] {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="breadcrumb-link"][data-current]:active,
+[data-refineui="breadcrumb-link"][data-current][data-state="pressed"] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="breadcrumb-link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+
+[data-refineui="breadcrumb-page"] {
+  cursor: default;
+}
+
+/* Footer — token-based composition (no Web Kit COMPONENT_SET) */
+[data-refineui="footer-nav"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--refineui-size-foundation-size-2000), 1fr)
+  );
+}
+
+/**
+ * Meta row: social (start) | brand/copyright (center) | locale (end).
+ * Brand stays optically centered when locale (or social) is omitted.
+ */
+@media (min-width: 48rem) {
+  [data-refineui="footer-meta"] {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    justify-items: stretch;
+    gap: var(--refineui-spacing-size-x-large);
+  }
+
+  [data-refineui="footer-social"] {
+    grid-column: 1;
+    justify-self: start;
+    justify-content: flex-start;
+  }
+
+  [data-refineui="footer-brand"] {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  [data-refineui="footer-meta-end"] {
+    grid-column: 3;
+    justify-self: end;
+  }
+}
+
+[data-refineui="footer-link"]:hover:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="footer-link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+[data-refineui="footer-link"][aria-disabled="true"] {
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+[data-refineui="footer-social"] [data-refineui="footer-link"] {
+  width: var(--refineui-size-foundation-size-240);
+  height: var(--refineui-size-foundation-size-240);
+}
+[data-refineui="footer-social"] [data-refineui="footer-link"] svg {
+  display: block;
+  width: var(--refineui-size-foundation-size-160);
+  height: var(--refineui-size-foundation-size-160);
+}
+[data-refineui="footer-social"] [data-refineui="footer-link"]:hover:not([aria-disabled="true"]) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+[data-refineui="footer-social"] [data-refineui="footer-link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+[data-refineui="footer-locale"] [data-refineui="footer-link"]:hover:not([aria-disabled="true"]),
+[data-refineui="footer-locale"] [data-refineui="footer-link"][aria-current] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+}
+
+[data-refineui="footer-locale"] [data-refineui="select-trigger"] {
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast),
+    border-color var(--refineui-motion-duration-fast),
+    transform var(--refineui-motion-duration-fast);
+}
+[data-refineui="footer-locale"] [data-refineui-select-trigger-value] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--refineui-spacing-size-xx-small);
+}
+/* Match Button outline hover / pressed / open */
+[data-refineui="footer-locale"] [data-refineui="select-trigger"]:not(:disabled):hover:not(:active),
+[data-refineui="footer-locale"] [data-refineui="select-trigger"][data-state="open"]:not(:disabled) {
+  border-color: var(--refineui-color-alias-border-strong);
+  color: var(--refineui-color-alias-foreground-primary-hover);
+}
+[data-refineui="footer-locale"] [data-refineui="select-trigger"]:not(:disabled):active {
+  border-color: var(--refineui-color-alias-border-strong);
+  color: var(--refineui-color-alias-foreground-primary);
+}
+[data-refineui="footer-locale"] [data-refineui="select-trigger"]:focus:not(:disabled) {
+  outline: none;
+}
+[data-refineui="footer-locale"] [data-refineui="select-trigger"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+
+/* Sidebar — token-based composition (no Web Kit COMPONENT_SET) */
+[data-refineui="sidebar-link"] {
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="sidebar-link"]:not([aria-disabled="true"]):hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="sidebar-link"][data-active] {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="sidebar-link"][data-active]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+[data-refineui="sidebar-link"]:not([aria-disabled="true"]):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="sidebar-link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+[data-refineui="sidebar-link"][aria-disabled="true"] {
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-refineui="sidebar-peek-surface"] {
+  --refineui-sidebar-peek-float-gap: var(--refineui-size-foundation-size-120);
+  --refineui-sidebar-peek-float-inset-block: var(--refineui-spacing-size-small);
+  --refineui-sidebar-peek-hit-slop: var(--refineui-spacing-size-x-small);
+  --refineui-sidebar-peek-panel-width: min(22rem, 36vw);
+
+  z-index: var(--refineui-z-floating);
+  box-sizing: border-box;
+  padding: var(--refineui-sidebar-peek-hit-slop);
+  pointer-events: none;
+  inset-block: calc(
+    var(--refineui-sidebar-peek-float-inset-block) - var(--refineui-sidebar-peek-hit-slop)
+  );
+  inset-inline-start: calc(
+    var(--refineui-sidebar-peek-float-gap) - var(--refineui-sidebar-peek-hit-slop)
+  );
+  width: calc(
+    var(--refineui-sidebar-peek-panel-width) + (2 * var(--refineui-sidebar-peek-hit-slop))
+  );
+  visibility: hidden;
+  transform: translateX(
+    calc(-100% - var(--refineui-sidebar-peek-float-gap) + var(--refineui-sidebar-peek-hit-slop))
+  );
+  transition:
+    transform var(--refineui-motion-duration-overlay) var(--refineui-motion-easing-standard),
+    visibility 0s linear var(--refineui-motion-duration-overlay);
+}
+
+[data-refineui="sidebar-peek-edge"][data-sidebar-peek-edge-suspended] {
+  pointer-events: none;
+}
+
+[data-refineui="sidebar-peek-surface"][data-sidebar-peek-mode="viewport"] {
+  inset-block: auto;
+  top: calc(
+    var(--refineui-sidebar-peek-viewport-offset, 0px) + var(--refineui-sidebar-peek-float-inset-block) -
+      var(--refineui-sidebar-peek-hit-slop)
+  );
+  bottom: calc(var(--refineui-sidebar-peek-float-inset-block) - var(--refineui-sidebar-peek-hit-slop));
+}
+
+[data-refineui="sidebar-peek-surface"][data-sidebar-peek-panel-open] {
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateX(0);
+  transition:
+    transform var(--refineui-motion-duration-overlay) var(--refineui-motion-easing-standard),
+    visibility 0s linear 0s;
+}
+
+[data-refineui="sidebar-peek-panel"] {
+  height: 100%;
+  width: 100%;
+  pointer-events: auto;
+  border: var(--refineui-stroke-width-thin) solid var(--refineui-color-alias-border-default);
+  border-radius: var(--refineui-radius-rounded-xx-large);
+  background: var(--refineui-color-alias-background-primary);
+  box-shadow: var(--refineui-elevation-16);
+  overflow: hidden;
+  transition: box-shadow var(--refineui-motion-duration-overlay) var(--refineui-motion-easing-standard);
+}
+
+[data-refineui="sidebar-peek-surface"][data-sidebar-peek-panel-open] [data-refineui="sidebar-peek-panel"] {
+  box-shadow: var(--refineui-elevation-24);
+}
+
+[data-refineui="sidebar-peek-panel"] [data-refineui="sidebar"] {
+  height: 100%;
+  border-inline-end: none;
+  border-radius: inherit;
+  background: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-refineui="sidebar-peek-surface"],
+  [data-refineui="sidebar-peek-panel"] {
+    transition: none !important;
+  }
+}
+
+/* Navigation Menu — top-level hover plate; content rows = Menu item */
+[data-refineui="navigation-menu-trigger"],
+[data-refineui="navigation-menu-list"] > [data-refineui="navigation-menu-item"] > [data-refineui="navigation-menu-link"] {
+  transition:
+    color var(--refineui-motion-duration-fast),
+    background-color var(--refineui-motion-duration-fast);
+}
+/* Top-level hover: primary hover plate */
+[data-refineui="navigation-menu-trigger"]:not(:disabled):hover:not(:active),
+[data-refineui="navigation-menu-list"] > [data-refineui="navigation-menu-item"] > [data-refineui="navigation-menu-link"]:not([aria-disabled="true"]):hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="navigation-menu-list"] > [data-refineui="navigation-menu-item"] > [data-refineui="navigation-menu-link"][data-active]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+}
+/* Top-level press */
+[data-refineui="navigation-menu-trigger"]:not(:disabled):active,
+[data-refineui="navigation-menu-list"] > [data-refineui="navigation-menu-item"] > [data-refineui="navigation-menu-link"]:not([aria-disabled="true"]):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+/* Open trigger: same plate language as hover */
+[data-refineui="navigation-menu-trigger"][data-state="open"]:not(:disabled) {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="navigation-menu-trigger"][data-state="open"]:not(:disabled):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="navigation-menu-trigger"]:focus-visible,
+[data-refineui="navigation-menu-link"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+/* Hide legacy underline indicator */
+[data-refineui="navigation-menu-indicator"] {
+  display: none !important;
+}
+/* Content links: Sidebar link plate */
+[data-refineui="navigation-menu-content"] [data-refineui="navigation-menu-link"]:not([aria-disabled="true"]):hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="navigation-menu-content"] [data-refineui="navigation-menu-link"]:not([aria-disabled="true"]):active {
+  color: var(--refineui-color-alias-foreground-primary) !important;
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="navigation-menu-content"][data-state="open"] {
+  opacity: 1;
+}
+[data-refineui="navigation-menu-content"][data-state="closed"] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-refineui="navigation-menu-content"] {
+  transition: opacity var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
+}
+
+/* Breadcrumb ellipsis — Web Kit pressed (BreadcrumbItem Ellipsis, same tone as links) */
+[data-refineui="breadcrumb-ellipsis"] {
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  appearance: none;
+}
+[data-refineui="breadcrumb-ellipsis"]:hover:not(:active) {
+  color: var(--refineui-color-alias-foreground-primary-hover) !important;
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="breadcrumb-ellipsis"]:active,
+[data-refineui="breadcrumb-ellipsis"][data-state="pressed"] {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="breadcrumb-ellipsis"]:focus-visible {
+  outline: 2px solid var(--refineui-focus-color);
+  outline-offset: var(--refineui-focus-offset);
+}
+
+/* Card — Web Kit COMPONENT_SET `Card` `394:865` (State: Default / Hover / Pressed / Disabled); Header px `sizeXLarge` py `sizeLarge`, Footer px `sizeXLarge` py `sizeMedium`, elevated = Shadow 4 (no stroke), outlined = thin border, radius `roundedXXLarge` */
+[data-refineui="card"] {
+  /* Token radius on the host — do not rely only on Tailwind `rounded-*` (theme indirection can drop corners) */
+  border-radius: var(--refineui-radius-rounded-xx-large);
+  overflow: hidden;
+  transition: background-color var(--refineui-motion-duration-fast), border-color var(--refineui-motion-duration-fast), box-shadow var(--refineui-motion-duration-fast);
+}
+/* Selected — inset ring so `overflow: hidden` still clips children to `roundedXXLarge` without squaring the card */
+[data-refineui="card"][data-selected="true"] {
+  box-shadow: inset 0 0 0 var(--refineui-stroke-width-thick) var(--refineui-color-alias-border-focus);
+}
+[data-refineui="card"][data-variant="elevated"][data-selected="true"] {
+  box-shadow:
+    var(--refineui-elevation-4),
+    inset 0 0 0 var(--refineui-stroke-width-thick) var(--refineui-color-alias-border-focus);
+}
+[data-refineui="card"][data-interactive="true"]:not([data-disabled="true"]):not([aria-disabled="true"]):hover:not(:active) {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="card"][data-variant="outlined"][data-interactive="true"]:not([data-disabled="true"]):not([aria-disabled="true"]):hover:not(:active) {
+  border-color: var(--refineui-color-alias-border-default) !important;
+}
+[data-refineui="card"][data-interactive="true"]:not([data-disabled="true"]):not([aria-disabled="true"]):active {
+  background-color: var(--refineui-color-alias-background-surface-selected) !important;
+}
+[data-refineui="card"][data-variant="outlined"][data-interactive="true"]:not([data-disabled="true"]):not([aria-disabled="true"]):active {
+  border-color: var(--refineui-color-alias-border-strong) !important;
+}
+[data-refineui="card"][data-disabled="true"],
+[data-refineui="card"][aria-disabled="true"] {
+  background-color: var(--refineui-color-alias-background-surface-disabled) !important;
+}
+[data-refineui="card"][data-variant="outlined"][data-disabled="true"],
+[data-refineui="card"][data-variant="outlined"][aria-disabled="true"] {
+  border-color: var(--refineui-color-alias-border-disabled) !important;
+}
+[data-refineui="card"][data-disabled="true"] [data-refineui="card-title"],
+[data-refineui="card"][aria-disabled="true"] [data-refineui="card-title"],
+[data-refineui="card"][data-disabled="true"] [data-refineui="card-description"],
+[data-refineui="card"][aria-disabled="true"] [data-refineui="card-description"],
+[data-refineui="card"][data-disabled="true"] [data-refineui="card-content"],
+[data-refineui="card"][aria-disabled="true"] [data-refineui="card-content"] {
+  color: var(--refineui-color-alias-foreground-disabled) !important;
+}
+
+/* Badge — Web Kit hover/pressed (Figma Badge; Foundation palette) */
+[data-refineui="badge"] {
+  transition: background-color var(--refineui-motion-duration-fast), border-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="badge"][data-variant="default"]:hover {
+  background-color: var(--refineui-color-alias-background-brand-hover) !important;
+}
+[data-refineui="badge"][data-variant="default"]:active {
+  background-color: var(--refineui-color-alias-background-brand-active) !important;
+}
+[data-refineui="badge"][data-variant="neutral"]:hover {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="badge"][data-variant="neutral"]:active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="badge"][data-variant="outline"]:active {
+  border-color: var(--refineui-color-alias-border-strong) !important;
+}
+[data-refineui="badge"][data-variant="success"]:hover {
+  background-color: var(--refineui-color-alias-background-success-hover) !important;
+}
+[data-refineui="badge"][data-variant="success"]:active {
+  background-color: var(--refineui-color-alias-background-success-subtle) !important;
+}
+[data-refineui="badge"][data-variant="warning"]:hover {
+  background-color: var(--refineui-color-alias-background-warning-hover) !important;
+}
+[data-refineui="badge"][data-variant="warning"]:active {
+  background-color: var(--refineui-color-alias-background-warning-subtle) !important;
+}
+[data-refineui="badge"][data-variant="danger"]:hover {
+  background-color: var(--refineui-color-alias-background-error-hover) !important;
+}
+[data-refineui="badge"][data-variant="danger"]:active {
+  background-color: var(--refineui-color-alias-background-error-subtle) !important;
+}
+
+/* Chip / Tag — Web Kit COMPONENT_SET `Tag` `574:6578` */
+[data-refineui="chip"] {
+  transition: background-color var(--refineui-motion-duration-fast), border-color var(--refineui-motion-duration-fast);
+}
+[data-refineui="chip"][data-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+[data-refineui="chip"][data-variant="filled"]:not([data-disabled]):hover {
+  background-color: var(--refineui-color-alias-background-brand-hover) !important;
+}
+[data-refineui="chip"][data-variant="filled"]:not([data-disabled]):active {
+  background-color: var(--refineui-color-alias-background-brand-active) !important;
+}
+[data-refineui="chip"][data-variant="default"]:not([data-disabled]):hover {
+  background-color: var(--refineui-color-alias-background-primary-hover) !important;
+}
+[data-refineui="chip"][data-variant="default"]:not([data-disabled]):active {
+  background-color: var(--refineui-color-alias-background-primary-active) !important;
+}
+[data-refineui="chip"][data-variant="outline"]:not([data-disabled]):hover {
+  border-color: var(--refineui-color-alias-border-hover) !important;
+}
+[data-refineui="chip"][data-variant="outline"]:not([data-disabled]):active {
+  border-color: var(--refineui-color-alias-border-focus) !important;
+}
+
+/* Slider — Web Kit `526:1556` + Slider/Item (alias colors only; sm/md) */
+/* Slider — pill rail + surface thumb; motion tokens for hover/press */
+[data-refineui="slider"] {
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none !important;
+  background: transparent;
+  box-sizing: border-box;
+  touch-action: none;
+  cursor: grab;
+  --refineui-slider-rail: var(--refineui-color-alias-background-brand-subtle);
+  --refineui-slider-fill-color: var(--refineui-color-alias-background-brand);
+  --refineui-slider-thumb-size: var(--refineui-size-foundation-size-200);
+}
+[data-refineui="slider"]:not(:disabled):active {
+  cursor: grabbing;
+}
+[data-refineui="slider"]:disabled {
+  --refineui-slider-rail: var(--refineui-color-alias-background-surface-disabled);
+  --refineui-slider-fill-color: var(--refineui-color-alias-foreground-disabled);
+  cursor: not-allowed;
+}
+[data-refineui="slider"]:focus {
+  outline: none !important;
+}
+[data-refineui="slider"][data-size="md"]::-webkit-slider-runnable-track {
+  height: var(--refineui-size-slider-track-height-md);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: linear-gradient(
+    to right,
+    var(--refineui-slider-fill-color) 0%,
+    var(--refineui-slider-fill-color) var(--refineui-slider-fill, 0%),
+    var(--refineui-slider-rail) var(--refineui-slider-fill, 0%),
+    var(--refineui-slider-rail) 100%
+  );
+}
+[data-refineui="slider"][data-size="sm"]::-webkit-slider-runnable-track {
+  height: var(--refineui-size-slider-track-height-sm);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: linear-gradient(
+    to right,
+    var(--refineui-slider-fill-color) 0%,
+    var(--refineui-slider-fill-color) var(--refineui-slider-fill, 0%),
+    var(--refineui-slider-rail) var(--refineui-slider-fill, 0%),
+    var(--refineui-slider-rail) 100%
+  );
+}
+[data-refineui="slider"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: var(--refineui-slider-thumb-size);
+  height: var(--refineui-slider-thumb-size);
+  border-radius: var(--refineui-radius-rounded-circle);
+  border: var(--refineui-stroke-width-thin) solid var(--refineui-color-alias-border-default);
+  background-color: var(--refineui-color-alias-background-primary);
+  box-shadow: var(--refineui-elevation-2lighter);
+  cursor: inherit;
+  transition:
+    transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    box-shadow var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    border-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    background-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
+}
+[data-refineui="slider"][data-size="md"]::-webkit-slider-thumb {
+  margin-top: calc(
+    (var(--refineui-slider-thumb-size) - var(--refineui-size-slider-track-height-md)) / -2
+  );
+}
+[data-refineui="slider"][data-size="sm"]::-webkit-slider-thumb {
+  margin-top: calc(
+    (var(--refineui-slider-thumb-size) - var(--refineui-size-slider-track-height-sm)) / -2
+  );
+}
+[data-refineui="slider"]:not(:disabled)::-webkit-slider-thumb:hover {
+  border-color: var(--refineui-color-alias-border-strong);
+  box-shadow: var(--refineui-elevation-2);
+  transform: scale(var(--refineui-motion-scale-hover-grow));
+}
+[data-refineui="slider"]:not(:disabled):active::-webkit-slider-thumb {
+  border-color: var(--refineui-color-alias-border-strong);
+  box-shadow: var(--refineui-elevation-2lighter);
+  transform: scale(var(--refineui-motion-scale-press));
+}
+[data-refineui="slider"]:focus-visible:not(:disabled)::-webkit-slider-thumb {
+  border-color: var(--refineui-color-alias-border-focus);
+  box-shadow:
+    0 0 0 var(--refineui-stroke-width-thick) var(--refineui-color-alias-border-focus),
+    var(--refineui-elevation-2lighter);
+}
+[data-refineui="slider"]:disabled::-webkit-slider-thumb {
+  background-color: var(--refineui-color-alias-background-surface-disabled);
+  border-color: var(--refineui-color-alias-border-disabled);
+  box-shadow: none;
+  transform: none;
+  cursor: not-allowed;
+}
+[data-refineui="slider"][data-size="md"]::-moz-range-track {
+  height: var(--refineui-size-slider-track-height-md);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: var(--refineui-slider-rail);
+}
+[data-refineui="slider"][data-size="md"]::-moz-range-progress {
+  height: var(--refineui-size-slider-track-height-md);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: var(--refineui-slider-fill-color);
+}
+[data-refineui="slider"][data-size="sm"]::-moz-range-track {
+  height: var(--refineui-size-slider-track-height-sm);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: var(--refineui-slider-rail);
+}
+[data-refineui="slider"][data-size="sm"]::-moz-range-progress {
+  height: var(--refineui-size-slider-track-height-sm);
+  border-radius: var(--refineui-radius-rounded-circle);
+  background: var(--refineui-slider-fill-color);
+}
+[data-refineui="slider"]::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--refineui-slider-thumb-size);
+  height: var(--refineui-slider-thumb-size);
+  border-radius: var(--refineui-radius-rounded-circle);
+  border: var(--refineui-stroke-width-thin) solid var(--refineui-color-alias-border-default);
+  background-color: var(--refineui-color-alias-background-primary);
+  box-shadow: var(--refineui-elevation-2lighter);
+  cursor: inherit;
+  transition:
+    transform var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    box-shadow var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    border-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out),
+    background-color var(--refineui-motion-duration-fast) var(--refineui-motion-easing-ease-out);
+}
+[data-refineui="slider"]:not(:disabled)::-moz-range-thumb:hover {
+  border-color: var(--refineui-color-alias-border-strong);
+  box-shadow: var(--refineui-elevation-2);
+  transform: scale(var(--refineui-motion-scale-hover-grow));
+}
+[data-refineui="slider"]:not(:disabled):active::-moz-range-thumb {
+  border-color: var(--refineui-color-alias-border-strong);
+  box-shadow: var(--refineui-elevation-2lighter);
+  transform: scale(var(--refineui-motion-scale-press));
+}
+[data-refineui="slider"]:focus-visible:not(:disabled)::-moz-range-thumb {
+  border-color: var(--refineui-color-alias-border-focus);
+  box-shadow:
+    0 0 0 var(--refineui-stroke-width-thick) var(--refineui-color-alias-border-focus),
+    var(--refineui-elevation-2lighter);
+}
+[data-refineui="slider"]:disabled::-moz-range-thumb {
+  background-color: var(--refineui-color-alias-background-surface-disabled);
+  border-color: var(--refineui-color-alias-border-disabled);
+  box-shadow: none;
+  transform: none;
+  cursor: not-allowed;
+}
+
+/**
+ * ScrollArea — overlay scrollbar (does not steal viewport width/height).
+ * Rails float over the viewport; show/hide is opacity-only so docs/shell
+ * content does not shift when the bar appears.
+ */
+[data-refineui="scroll-area"] {
+  position: relative;
+}
+/* Horizontal-only: size viewport to content (no fixed parent height). */
+[data-refineui="scroll-area"]:has(
+    > [data-refineui="scroll-area-scrollbar"][data-orientation="horizontal"]
+  ):not(
+    :has(> [data-refineui="scroll-area-scrollbar"][data-orientation="vertical"])
+  )
+  > [data-refineui="scroll-area-viewport"] {
+  height: auto;
+}
+[data-refineui="scroll-area-viewport"] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+[data-refineui="scroll-area-viewport"]::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+[data-refineui="scroll-area-scrollbar"][data-orientation="vertical"] {
+  position: absolute;
+  inset-block: var(--refineui-spacing-size-xxx-small);
+  inset-inline-end: var(--refineui-spacing-size-xxx-small);
+  width: var(--refineui-spacing-size-medium);
+  overflow: hidden;
+}
+[data-refineui="scroll-area-scrollbar"][data-orientation="horizontal"] {
+  position: absolute;
+  inset-inline: var(--refineui-spacing-size-xxx-small);
+  inset-block-end: var(--refineui-spacing-size-xxx-small);
+  height: var(--refineui-spacing-size-medium);
+  overflow: hidden;
+}
+[data-refineui="scroll-area-track"] {
+  background-color: var(--refineui-color-alias-background-surface-selected);
+  border-radius: var(--refineui-radius-rounded-circle);
+}
+[data-refineui="scroll-area-thumb"][data-orientation="vertical"] {
+  left: 0;
+  width: 100%;
+}
+[data-refineui="scroll-area-thumb"][data-orientation="horizontal"] {
+  top: 0;
+  height: 100%;
+}
+[data-refineui="scroll-area-scrollbar"][data-state="hidden"] {
+  pointer-events: none;
+  opacity: 0;
+}
+[data-refineui="scroll-area-scrollbar"][data-visibility="always"][data-state="visible"] {
+  opacity: 1;
+}
+[data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-refineui="scroll-area"]:hover
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="scroll-area"]:focus-within
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="scroll-area"][data-scrolling]
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="scroll-area"][data-interacting]
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"][data-active="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+/**
+ * Select menu is focused while open and may auto-scroll to the selected item,
+ * so the shared hover ScrollArea would stay visible. Reveal on pointer hover
+ * (and thumb drag) only.
+ */
+[data-refineui="select-menu"]
+  [data-refineui="scroll-area"]:focus-within
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="select-menu"]
+  [data-refineui="scroll-area"][data-scrolling]
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-refineui="select-menu"]
+  [data-refineui="scroll-area"]:hover
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"],
+[data-refineui="select-menu"]
+  [data-refineui="scroll-area"][data-interacting]
+  > [data-refineui="scroll-area-scrollbar"][data-visibility="hover"][data-state="visible"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Command list — fixed height shell so ScrollArea viewport can scroll */
+[data-refineui="command-list"] {
+  height: min(60vh, var(--refineui-size-foundation-size-3200));
+  max-height: min(60vh, var(--refineui-size-foundation-size-3200));
+  overflow: hidden;
+}
+[data-refineui="command-list"] > [data-refineui="scroll-area"] {
+  height: 100%;
+  min-height: 0;
+}
+
+/* Chart — enter motion + hover / selected */
+[data-refineui="chart-bar"] {
+  transform-box: fill-box;
+  transform-origin: bottom center;
+  animation: refineui-chart-bar-enter var(--refineui-motion-duration-panel)
+    var(--refineui-motion-easing-emphasized) both;
+  transition: opacity var(--refineui-motion-duration-fast)
+    var(--refineui-motion-easing-ease-out);
+}
+[data-refineui="chart-plot-frame"][data-hover] [data-refineui="chart-bar"][data-state="default"] {
+  opacity: var(--refineui-opacity-disabled);
+}
+[data-refineui="chart-bar"][data-state="hover"],
+[data-refineui="chart-bar"][data-state="selected"] {
+  opacity: var(--refineui-opacity-full);
+}
+[data-refineui="chart-bar-track"] {
+  pointer-events: none;
+}
+[data-refineui="chart-line-stroke"] {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: refineui-chart-line-enter var(--refineui-motion-duration-panel)
+    var(--refineui-motion-easing-emphasized) both;
+}
+[data-refineui="chart-line-area"] {
+  animation: refineui-chart-point-enter var(--refineui-motion-duration-panel)
+    var(--refineui-motion-easing-emphasized) both;
+}
+[data-refineui="chart-point"] {
+  animation: refineui-chart-point-enter var(--refineui-motion-duration-fast)
+    var(--refineui-motion-easing-emphasized) both;
+}
+
+@keyframes refineui-chart-bar-enter {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+@keyframes refineui-chart-line-enter {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes refineui-chart-point-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * Environment — Forced colors (Windows High Contrast / forced-colors: active)
+ * Declared in Component Spec: states.environment includes "forced-colors"
+ * System colors only — theme semantic aliases are remapped/unreliable here.
+ */
+@media (forced-colors: active) {
+  [data-refineui="button"]:focus-visible,
+  [data-refineui="accordion-trigger"]:focus-visible,
+  [data-refineui="select-trigger"]:focus-visible,
+  [data-refineui="navigation-menu-trigger"]:focus-visible,
+  [data-refineui="tree-item-trigger"]:focus-visible,
+  [data-refineui="tab"]:focus-visible,
+  [data-refineui="switch"]:focus-visible,
+  [data-refineui="link"]:focus-visible,
+  [data-refineui="pagination"]:focus-visible,
+  [data-refineui="chip-remove"]:focus-visible,
+  [data-refineui="carousel"]:focus-visible,
+  [data-refineui="carousel-nav"]:focus-visible,
+  [data-refineui="segmented-control-item"]:focus-visible,
+  [data-refineui="menu-item"]:focus-visible,
+  [data-refineui="dropdown-item"]:focus-visible,
+  [data-refineui="command-item"]:focus-visible,
+  [data-refineui="calendar-day"]:focus-visible,
+  [data-refineui="sidebar-link"]:focus-visible,
+  [data-refineui="breadcrumb-link"]:focus-visible,
+  [data-refineui="footer-link"]:focus-visible,
+  [data-refineui="search-field-clear"]:focus-visible,
+  [data-refineui="spinbutton-step"]:focus-visible,
+  [data-refineui="radio"]:focus-visible,
+  [data-refineui="slider"]:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: var(--refineui-focus-offset);
+  }
+
+  [data-refineui="button"],
+  [data-refineui="select-trigger"],
+  [data-refineui="chip"],
+  [data-refineui="segmented-control"],
+  [data-refineui="segmented-control-item"],
+  [data-refineui="tab"],
+  [data-refineui="switch"],
+  [data-refineui="breadcrumb"],
+  [data-refineui="calendar"],
+  [data-refineui="checkbox"],
+  [data-refineui="footer"],
+  [data-refineui="progress-stepper"],
+  [data-refineui="scroll-area"],
+  [data-refineui="search-field"],
+  [data-refineui="sidebar"],
+  [data-refineui="spinbutton"],
+  [data-refineui="stepper"],
+  [data-refineui="popover"],
+  [data-refineui="badge"],
+  [data-refineui="input"],
+  [data-refineui="textarea"],
+  [data-refineui="toast"],
+  [data-refineui="link"] {
+    border-color: ButtonBorder;
+  }
+
+  [data-refineui="alert"],
+  [data-refineui="card"],
+  [data-refineui="toast"],
+  [data-refineui="popover"],
+  [data-refineui="drawer"],
+  [data-refineui="tooltip"],
+  [data-refineui="menu"],
+  [data-refineui="dropdown-menu"],
+  [data-refineui="select-menu"],
+  [data-refineui="command"],
+  [data-refineui="dialog"] {
+    border-color: CanvasText;
+  }
+
+  [data-refineui="toast"] {
+    background-color: Canvas;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="dialog"] > [role="presentation"],
+  [data-refineui="drawer"] > [role="presentation"] {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="toast-icon"] {
+    color: ButtonText;
+    forced-color-adjust: none;
+  }
+
+  [data-refineui="dialog"],
+  [data-refineui="drawer"],
+  [data-refineui="popover"] {
+    border: var(--refineui-stroke-width-thin) solid CanvasText;
+  }
+
+  [data-refineui="popover"]:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: var(--refineui-focus-offset);
+  }
+}
+
+/*
+ * Environment — Prefers contrast
+ * Declared in Component Spec: states.environment includes "prefers-contrast"
+ * Strengthen borders for interactive surfaces; theme aliases stay valid here.
+ */
+@media (prefers-contrast: more) {
+  [data-refineui="button"],
+  [data-refineui="select-trigger"],
+  [data-refineui="accordion-trigger"],
+  [data-refineui="dialog"],
+  [data-refineui="drawer"],
+  [data-refineui="alert"],
+  [data-refineui="input"],
+  [data-refineui="textarea"],
+  [data-refineui="checkbox"],
+  [data-refineui="radio"],
+  [data-refineui="switch"],
+  [data-refineui="tab"],
+  [data-refineui="badge"],
+  [data-refineui="toast"],
+  [data-refineui="chip"],
+  [data-refineui="segmented-control"],
+  [data-refineui="segmented-control-item"] {
+    border-width: var(--refineui-stroke-width-thick);
+  }
+
+  [data-refineui="toast"] {
+    border-style: solid;
+    border-color: var(--refineui-color-alias-border-default);
+    background-color: var(--refineui-color-alias-surface-popover);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="dialog"] > [role="presentation"],
+  [data-refineui="drawer"] > [role="presentation"] {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-refineui="link"],
+  [data-refineui="breadcrumb-link"],
+  [data-refineui="sidebar-link"] {
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.12em;
+  }
+}
+
+/*
+ * Layout — RTL
+ * Spec: layout.direction=logical, layout.rtl=true (+ states.environment "dir")
+ * Components use logical Tailwind / CSS properties; document dir="rtl" flips automatically.
+ * Doctor layout-contract rejects physical left/right utilities in pilot components.
+ */