@orcestr/ui 0.0.1

package/dist/styles/orcestr-ui.css

@@ -0,0 +1,4676 @@
+:root[data-oui-theme=light],
+.oui-root {
+  --oui-bg: #f8fafc;
+  --oui-panel: #ffffff;
+  --oui-panel-2: #f3f6fa;
+  --oui-control-bg: transparent;
+  --oui-control-hover-bg: rgb(15 23 42 / 6%);
+  --oui-border: rgb(15 23 42 / 8%);
+  --oui-border-strong: rgb(15 23 42 / 16%);
+  --oui-text: #111827;
+  --oui-muted: #6b7280;
+  --oui-soft: #eef3f8;
+  --oui-soft-hover: #e6edf5;
+  --oui-brand: #2563eb;
+  --oui-brand-strong: #1d4ed8;
+  --oui-brand-solid: #2563eb;
+  --oui-brand-solid-hover: #1d4ed8;
+  --oui-brand-soft: rgb(37 99 235 / 12%);
+  --oui-success: #0f9f6e;
+  --oui-success-soft: #e8f8f2;
+  --oui-warning: #bd7a00;
+  --oui-warning-soft: #fff6db;
+  --oui-danger: #dc2626;
+  --oui-danger-soft: rgb(220 38 38 / 12%);
+  --oui-info: #0876bd;
+  --oui-info-soft: #e7f4ff;
+  --oui-section-bg: #0f172a;
+  --oui-section-opacity: 0%;
+  --oui-section-nested-opacity: 0%;
+  --oui-section-shadow: 0 8px 26px rgb(15 23 42 / 8%);
+  --oui-section-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-opacity), transparent);
+  --oui-section-nested-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-nested-opacity), transparent);
+  --oui-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-opacity), var(--oui-bg));
+  --oui-section-solid-bg: var(--oui-bg);
+  --oui-section-nested-solid-bg: var(--oui-bg);
+  --oui-floating-bg: var(--oui-surface-bg);
+  --oui-pad-bg: #0f172a;
+  --oui-pad-opacity: 3.5%;
+  --oui-pad-hover-opacity: 5.5%;
+  --oui-skeleton-shimmer: rgb(255 255 255 / 18%);
+  --oui-shadow-sm: 0 2px 8px rgb(17 24 39 / 8%);
+  --oui-shadow-md: 0 16px 48px var(--oui-shadow-soft);
+  --oui-ring: 0 0 0 3px rgb(37 99 235 / 16%);
+  --oui-radius: 8px;
+  --oui-radius-sm: 6px;
+  --oui-radius-xl: 12px;
+  --oui-space-px: 1px;
+  --oui-space-xs: 4px;
+  --oui-space-sm: 8px;
+  --oui-space-md: 12px;
+  --oui-space-lg: 16px;
+  --oui-space-xl: 24px;
+  --oui-space-xxl: 32px;
+  --oui-space-section: 18px;
+  --oui-space-page: 28px;
+  --oui-breakpoint-compact: 560px;
+  --oui-breakpoint-tablet: 720px;
+  --oui-breakpoint-desktop: 1024px;
+  --oui-breakpoint-wide: 1440px;
+  --oui-state-hover-opacity: .065;
+  --oui-state-active-opacity: .1;
+  --oui-state-disabled-opacity: .56;
+  --oui-state-loading-opacity: .78;
+  --oui-state-selected-opacity: .15;
+  --oui-state-focus-ring-width: 3px;
+  --oui-panel-solid: #ffffff;
+  --oui-gray-3: #eef2f7;
+  --oui-gray-a3: rgb(15 23 42 / 6%);
+  --oui-gray-a4: rgb(15 23 42 / 8%);
+  --oui-gray-a5: rgb(15 23 42 / 12%);
+  --oui-gray-a8: rgb(15 23 42 / 18%);
+  --oui-shadow-soft: rgb(15 23 42 / 18%);
+  color: var(--oui-text);
+  background: var(--oui-bg);
+  min-height: 100%;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:root[data-oui-theme=dark],
+.oui-root[data-oui-theme=dark] {
+  --oui-bg: #111318;
+  --oui-panel: #171a21;
+  --oui-panel-2: #20242d;
+  --oui-control-bg: transparent;
+  --oui-control-hover-bg: rgb(255 255 255 / 6%);
+  --oui-border: rgb(255 255 255 / 8%);
+  --oui-border-strong: rgb(255 255 255 / 14%);
+  --oui-text: #f4f6f8;
+  --oui-muted: #9aa4b2;
+  --oui-soft: #223147;
+  --oui-soft-hover: #2b3b54;
+  --oui-brand: #6ea0ff;
+  --oui-brand-strong: #93b8ff;
+  --oui-brand-solid: #315fbe;
+  --oui-brand-solid-hover: #3b70d8;
+  --oui-brand-soft: rgb(110 160 255 / 16%);
+  --oui-success: #5fd3a1;
+  --oui-success-soft: #173a31;
+  --oui-warning: #f3c969;
+  --oui-warning-soft: #443516;
+  --oui-danger: #ff7b72;
+  --oui-danger-soft: rgb(255 123 114 / 14%);
+  --oui-info: #71c7ff;
+  --oui-info-soft: #173852;
+  --oui-section-bg: #ffffff;
+  --oui-section-opacity: 2%;
+  --oui-section-nested-opacity: 2%;
+  --oui-section-shadow: none;
+  --oui-section-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-opacity), transparent);
+  --oui-section-nested-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-nested-opacity), transparent);
+  --oui-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-opacity), var(--oui-bg));
+  --oui-section-solid-bg: rgb(22 24 29);
+  --oui-section-nested-solid-bg: rgb(27 29 34);
+  --oui-floating-bg: var(--oui-surface-bg);
+  --oui-pad-bg: #ffffff;
+  --oui-pad-opacity: 2%;
+  --oui-pad-hover-opacity: 4.5%;
+  --oui-skeleton-shimmer: rgb(255 255 255 / 8%);
+  --oui-shadow-sm: 0 2px 10px rgb(0 0 0 / 22%);
+  --oui-shadow-md: 0 16px 48px var(--oui-shadow-soft);
+  --oui-ring: 0 0 0 3px rgb(106 160 255 / 22%);
+  --oui-panel-solid: var(--oui-panel);
+  --oui-gray-3: #20242d;
+  --oui-gray-a3: rgb(255 255 255 / 5%);
+  --oui-gray-a4: rgb(255 255 255 / 8%);
+  --oui-gray-a5: rgb(255 255 255 / 11%);
+  --oui-gray-a8: rgb(255 255 255 / 16%);
+  --oui-shadow-soft: rgb(0 0 0 / 42%);
+}
+
+.oui-root *,
+.oui-root *::before,
+.oui-root *::after {
+  box-sizing: border-box;
+}
+
+.oui-box {
+  min-width: 0;
+}
+
+.oui-flex {
+  display: flex;
+  min-width: 0;
+}
+
+.oui-grid {
+  display: grid;
+  min-width: 0;
+}
+
+.oui-stack {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.oui-section {
+  min-width: 0;
+  border: 0;
+  border-radius: var(--oui-radius);
+  background: var(--oui-section-surface-bg, var(--oui-surface-bg));
+  box-shadow: var(--oui-section-shadow, none);
+}
+
+.oui-section .oui-section {
+  background: var(--oui-section-nested-surface-bg, var(--oui-section-surface-bg, var(--oui-surface-bg)));
+}
+
+.oui-text {
+  margin: 0;
+  color: var(--oui-text);
+}
+
+.oui-text-neutral {
+  color: var(--oui-text);
+}
+
+.oui-text-brand {
+  color: var(--oui-brand-strong);
+}
+
+.oui-text-success {
+  color: var(--oui-success);
+}
+
+.oui-text-warning {
+  color: var(--oui-warning);
+}
+
+.oui-text-danger {
+  color: var(--oui-danger);
+}
+
+.oui-text-info {
+  color: var(--oui-info);
+}
+
+.oui-muted {
+  color: var(--oui-muted);
+}
+
+.oui-app-shell {
+  height: 100vh;
+  min-height: 100vh;
+  overflow: hidden;
+  padding: var(--oui-app-shell-inset, 28px);
+  color: var(--oui-text);
+  background: var(--oui-bg);
+}
+
+.oui-app-shell-frame {
+  display: grid;
+  grid-template-columns: minmax(220px, var(--oui-app-shell-sidebar-width, 260px)) minmax(0, 1fr);
+  gap: 0;
+  height: calc(100vh - var(--oui-app-shell-inset, 28px) * 2);
+  min-height: 0;
+  max-width: var(--oui-app-shell-max-width, 1440px);
+  margin: 0 auto;
+}
+
+.oui-app-shell-main {
+  display: flex;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.oui-app-shell-sidebar-desktop {
+  min-width: 0;
+  min-height: 0;
+}
+
+.oui-app-shell-header {
+  position: relative;
+  z-index: 65;
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-bottom: 1px solid var(--oui-border);
+  background: var(--oui-bg);
+  padding: 8px 10px;
+}
+
+.oui-app-shell-header[data-visibility=mobile] {
+  display: none;
+}
+
+.oui-app-shell-header-title {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 760;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-shell-header-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-app-shell-sidebar {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  --oui-app-shell-sidebar-bg: var(--oui-section-surface-bg, var(--oui-panel));
+  --oui-app-shell-sidebar-highlight-bg: var(--oui-section-solid-bg, var(--oui-panel));
+  --oui-app-shell-sidebar-head-pad: 18px 18px 12px;
+  --oui-app-shell-sidebar-body-pad: 12px 8px 18px 18px;
+  --oui-app-shell-sidebar-footer-pad: 12px 18px 18px;
+  border: 0;
+  border-radius: var(--oui-radius);
+  background: var(--oui-app-shell-sidebar-bg);
+  box-shadow: var(--oui-section-shadow, none);
+  padding: 0;
+}
+
+.oui-app-shell-sidebar::before {
+  content: "";
+  display: none;
+}
+
+.oui-app-shell-sidebar > * {
+  position: relative;
+  z-index: 1;
+}
+
+.oui-app-shell-sidebar-head {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: var(--oui-app-shell-sidebar-head-pad);
+}
+
+.oui-app-shell-sidebar-head-main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-app-shell-sidebar-title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: 760;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-shell-sidebar-description {
+  margin: 0;
+}
+
+.oui-app-shell-sidebar .oui-app-shell-sidebar-close {
+  display: none;
+}
+
+.oui-app-shell-sidebar-separator {
+  margin: 0 18px;
+}
+
+.oui-app-shell-sidebar-scroll {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.oui-app-shell-sidebar-scroll > .oui-scroll-area-viewport {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.oui-app-shell-sidebar-body {
+  min-width: 0;
+  padding: var(--oui-app-shell-sidebar-body-pad);
+}
+
+.oui-app-shell-sidebar-footer {
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding: var(--oui-app-shell-sidebar-footer-pad);
+}
+
+.oui-app-shell-content-scroll {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+}
+
+.oui-app-shell-content-scroll > .oui-scroll-area-viewport {
+  height: 100%;
+  scroll-padding: 8px 28px 24px 22px;
+}
+
+.oui-app-shell-content {
+  display: flex;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 18px;
+  padding: 0 28px 24px 22px;
+}
+
+.oui-app-shell-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-app-shell-nav-item {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid transparent;
+  border-radius: var(--oui-radius-sm);
+  padding: 7px 9px;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.oui-app-shell-nav-item:hover,
+.oui-app-shell-nav-item:focus-visible {
+  background: var(--oui-control-hover-bg, var(--oui-soft));
+  outline: none;
+}
+
+.oui-app-shell-nav-item:focus-visible {
+  box-shadow: var(--oui-ring);
+}
+
+.oui-app-shell-nav-item[data-active=true] {
+  border-color: transparent;
+  color: var(--oui-brand-strong);
+  background: var(--oui-brand-soft);
+}
+
+.oui-app-shell-nav-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.oui-app-shell-nav-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.oui-app-shell-nav-text {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.oui-app-shell-nav-label {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-shell-nav-caption {
+  overflow: hidden;
+  color: var(--oui-muted);
+  font-size: 11px;
+  line-height: 0.95rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-shell-nav-badge {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  min-height: 18px;
+  border-radius: 999px;
+  padding: 0 6px;
+  color: var(--oui-brand-strong);
+  background: var(--oui-brand-soft);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.oui-page-title-block {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.oui-page-title-main {
+  min-width: 0;
+}
+
+.oui-page-title-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.oui-page-title {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 22px;
+  font-weight: 780;
+  letter-spacing: 0;
+  line-height: 1.15;
+}
+
+.oui-page-title-caption {
+  max-width: 760px;
+  margin: 5px 0 0;
+  color: var(--oui-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.oui-page-title-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 860px) {
+  .oui-app-shell {
+    padding: 0;
+  }
+  .oui-app-shell-frame {
+    width: 100%;
+    height: calc(100vh - 56px);
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
+    max-width: none;
+    margin: 0;
+  }
+  .oui-app-shell-header[data-visibility=mobile] {
+    display: flex;
+  }
+  .oui-app-shell-sidebar-desktop {
+    display: none;
+  }
+  .oui-app-shell-main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .oui-app-shell-sidebar-drawer-panel {
+    background: transparent;
+    border: 0;
+    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.28);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+  }
+  .oui-app-shell-sidebar-drawer-body {
+    display: flex;
+    min-height: 0;
+    padding: 0;
+  }
+  .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+    width: 100%;
+  }
+  .oui-app-shell-sidebar {
+    width: 100%;
+    height: 100vh;
+    max-height: none;
+    --oui-app-shell-sidebar-head-pad: 18px 16px 12px;
+    --oui-app-shell-sidebar-body-pad: 12px 16px 18px;
+    --oui-app-shell-sidebar-footer-pad: 12px 16px 18px;
+    border-radius: 0 12px 12px 0;
+    background: transparent;
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    box-shadow: none;
+  }
+  .oui-app-shell-sidebar-separator {
+    margin: 0 16px;
+  }
+  .oui-app-shell-sidebar::before {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: block;
+    background: color-mix(in srgb, var(--oui-panel) 20%, transparent);
+    backdrop-filter: blur(48px);
+    pointer-events: none;
+  }
+  .oui-app-shell-sidebar .oui-app-shell-sidebar-close {
+    display: inline-flex;
+  }
+  .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
+    scroll-padding: 12px 10px 18px;
+  }
+  .oui-app-shell-content {
+    padding: 12px 10px 18px;
+  }
+  .oui-page-title-block {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .oui-page-title-actions {
+    justify-content: flex-start;
+  }
+}
+.oui-button,
+.oui-icon-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--oui-button-radius, var(--oui-radius-sm, 6px));
+  font: inherit;
+  font-weight: var(--oui-button-font-weight, 650);
+  line-height: 1rem;
+  color: var(--oui-text);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;
+  appearance: none;
+  transform-origin: center center;
+  transition: background-color 240ms ease, border-color 240ms ease, color 220ms ease, box-shadow 240ms ease, transform 180ms ease, filter 180ms ease;
+}
+
+.oui-icon-button[data-round=true] {
+  border-radius: 999px;
+}
+
+.oui-button {
+  flex-shrink: 0;
+  min-width: max-content;
+}
+
+.oui-button[data-size="1"],
+.oui-icon-button[data-size="1"] {
+  min-height: 24px;
+  font-size: 12px;
+}
+
+.oui-button[data-size="1"] {
+  padding: 0 8px;
+}
+
+.oui-button[data-size="2"],
+.oui-icon-button[data-size="2"] {
+  min-height: 28px;
+  font-size: 13px;
+}
+
+.oui-button[data-size="2"] {
+  padding: 0 10px;
+}
+
+.oui-button[data-size="3"],
+.oui-icon-button[data-size="3"] {
+  min-height: 36px;
+  font-size: 14px;
+}
+
+.oui-button[data-size="3"] {
+  padding: 0 13px;
+}
+
+.oui-button[data-size="4"],
+.oui-icon-button[data-size="4"] {
+  min-height: 42px;
+  font-size: 15px;
+}
+
+.oui-button[data-size="4"] {
+  padding: 0 16px;
+}
+
+.oui-icon-button[data-size="1"] {
+  width: 24px;
+}
+
+.oui-icon-button[data-size="2"] {
+  width: 28px;
+}
+
+.oui-icon-button[data-size="3"] {
+  width: 36px;
+}
+
+.oui-icon-button[data-size="4"] {
+  width: 42px;
+}
+
+.oui-button-full {
+  width: 100%;
+  min-width: 0;
+}
+
+.oui-button-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1rem;
+  line-height: 1rem;
+}
+
+.oui-button:focus-visible,
+.oui-icon-button:focus-visible,
+.oui-text-field:focus-within,
+.oui-text-area:focus-within,
+.oui-listbox-item:focus-visible,
+.oui-menu-item:focus-visible,
+.oui-tabs-trigger:focus-visible,
+.oui-segmented-item:focus-visible {
+  outline: none;
+  box-shadow: var(--oui-ring);
+}
+
+.oui-button:disabled,
+.oui-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--oui-state-disabled-opacity, 0.56);
+}
+
+.oui-button[data-loading=true]:disabled,
+.oui-icon-button[data-loading=true]:disabled {
+  cursor: progress;
+  opacity: var(--oui-state-loading-opacity, 1);
+}
+
+.oui-button[data-variant=solid],
+.oui-icon-button[data-variant=solid] {
+  color: #ffffff;
+  background: var(--oui-brand-solid, var(--oui-brand));
+  border-color: var(--oui-brand-solid, var(--oui-brand));
+}
+
+.oui-button[data-variant=solid]:not(:disabled):hover,
+.oui-icon-button[data-variant=solid]:not(:disabled):hover {
+  background: var(--oui-brand-solid-hover, var(--oui-brand-strong));
+  border-color: var(--oui-brand-solid-hover, var(--oui-brand-strong));
+}
+
+.oui-button[data-variant=soft],
+.oui-icon-button[data-variant=soft] {
+  background: var(--oui-brand-soft);
+  border-color: transparent;
+  color: var(--oui-brand-strong);
+}
+
+.oui-button[data-variant=surface],
+.oui-icon-button[data-variant=surface] {
+  background: var(--oui-control-bg, transparent);
+  border-color: var(--oui-border);
+  box-shadow: none;
+}
+
+.oui-button[data-variant=pad],
+.oui-icon-button[data-variant=pad] {
+  background: color-mix(in srgb, var(--oui-pad-bg, var(--oui-section-bg)) var(--oui-pad-opacity, var(--oui-section-opacity)), transparent);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.oui-button[data-variant=outline],
+.oui-icon-button[data-variant=outline] {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--oui-border-strong) 42%, transparent);
+}
+
+.oui-button[data-variant=ghost],
+.oui-icon-button[data-variant=ghost] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.oui-button[data-variant=soft]:not(:disabled):hover,
+.oui-button[data-variant=surface]:not(:disabled):hover,
+.oui-button[data-variant=pad]:not(:disabled):hover,
+.oui-button[data-variant=outline]:not(:disabled):hover,
+.oui-button[data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-variant=surface]:not(:disabled):hover,
+.oui-icon-button[data-variant=pad]:not(:disabled):hover,
+.oui-icon-button[data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-variant=ghost]:not(:disabled):hover {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft-hover)));
+}
+
+.oui-button[data-variant=pad]:not(:disabled):hover,
+.oui-icon-button[data-variant=pad]:not(:disabled):hover {
+  background: color-mix(in srgb, var(--oui-pad-bg, var(--oui-section-bg)) var(--oui-pad-hover-opacity, var(--oui-section-nested-opacity)), transparent);
+}
+
+.oui-button[data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-variant=outline]:not(:disabled):hover {
+  border-color: color-mix(in srgb, var(--oui-border-strong) 62%, transparent);
+}
+
+.oui-button[data-tone=success],
+.oui-icon-button[data-tone=success] {
+  --oui-brand: var(--oui-success);
+  --oui-brand-strong: var(--oui-success);
+  --oui-brand-solid: var(--oui-success);
+  --oui-brand-solid-hover: var(--oui-success);
+  --oui-brand-soft: var(--oui-success-soft);
+}
+
+.oui-button[data-tone=warning],
+.oui-icon-button[data-tone=warning] {
+  --oui-brand: var(--oui-warning);
+  --oui-brand-strong: var(--oui-warning);
+  --oui-brand-solid: var(--oui-warning);
+  --oui-brand-solid-hover: var(--oui-warning);
+  --oui-brand-soft: var(--oui-warning-soft);
+}
+
+.oui-button[data-tone=info],
+.oui-icon-button[data-tone=info] {
+  --oui-brand: var(--oui-info);
+  --oui-brand-strong: var(--oui-info);
+  --oui-brand-solid: var(--oui-info);
+  --oui-brand-solid-hover: var(--oui-info);
+  --oui-brand-soft: var(--oui-info-soft);
+}
+
+.oui-button[data-tone=danger],
+.oui-icon-button[data-tone=danger] {
+  --oui-brand: var(--oui-danger);
+  --oui-brand-strong: var(--oui-danger);
+  --oui-brand-solid: var(--oui-danger);
+  --oui-brand-solid-hover: var(--oui-danger);
+  --oui-brand-soft: var(--oui-danger-soft);
+}
+
+.oui-button[data-tone=success][data-variant=solid],
+.oui-icon-button[data-tone=success][data-variant=solid] {
+  color: var(--oui-success);
+  background: var(--oui-success-soft);
+  border-color: transparent;
+}
+
+.oui-button[data-tone=success][data-variant=solid]:not(:disabled):hover,
+.oui-icon-button[data-tone=success][data-variant=solid]:not(:disabled):hover {
+  color: var(--oui-success);
+  background: color-mix(in srgb, var(--oui-success-soft) 68%, var(--oui-success) 32%);
+  border-color: transparent;
+}
+
+.oui-button[data-tone=success][data-variant=soft]:not(:disabled):hover,
+.oui-button[data-tone=success][data-variant=outline]:not(:disabled):hover,
+.oui-button[data-tone=success][data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-tone=success][data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-tone=success][data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-tone=success][data-variant=ghost]:not(:disabled):hover {
+  color: var(--oui-success);
+  background: color-mix(in srgb, var(--oui-success-soft) 74%, var(--oui-success) 26%);
+}
+
+.oui-button[data-tone=danger][data-variant=soft]:not(:disabled):hover,
+.oui-button[data-tone=danger][data-variant=outline]:not(:disabled):hover,
+.oui-button[data-tone=danger][data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-tone=danger][data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-tone=danger][data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-tone=danger][data-variant=ghost]:not(:disabled):hover {
+  color: var(--oui-danger);
+  background: color-mix(in srgb, var(--oui-danger-soft) 74%, var(--oui-danger) 26%);
+}
+
+.oui-button[data-tone=warning][data-variant=soft]:not(:disabled):hover,
+.oui-button[data-tone=warning][data-variant=outline]:not(:disabled):hover,
+.oui-button[data-tone=warning][data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-tone=warning][data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-tone=warning][data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-tone=warning][data-variant=ghost]:not(:disabled):hover {
+  color: var(--oui-warning);
+  background: color-mix(in srgb, var(--oui-warning-soft) 74%, var(--oui-warning) 26%);
+}
+
+.oui-button[data-tone=info][data-variant=soft]:not(:disabled):hover,
+.oui-button[data-tone=info][data-variant=outline]:not(:disabled):hover,
+.oui-button[data-tone=info][data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-tone=info][data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-tone=info][data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-tone=info][data-variant=ghost]:not(:disabled):hover {
+  color: var(--oui-info);
+  background: color-mix(in srgb, var(--oui-info-soft) 74%, var(--oui-info) 26%);
+}
+
+.oui-root[data-oui-theme=dark] .oui-button[data-tone=success]:not(:disabled):hover,
+.oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=success]:not(:disabled):hover {
+  color: color-mix(in srgb, var(--oui-success) 72%, white 28%);
+}
+
+.oui-root[data-oui-theme=dark] .oui-button[data-tone=danger]:not(:disabled):hover,
+.oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=danger]:not(:disabled):hover {
+  color: color-mix(in srgb, var(--oui-danger) 72%, white 28%);
+}
+
+.oui-root[data-oui-theme=dark] .oui-button[data-tone=warning]:not(:disabled):hover,
+.oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=warning]:not(:disabled):hover {
+  color: color-mix(in srgb, var(--oui-warning) 72%, white 28%);
+}
+
+.oui-root[data-oui-theme=dark] .oui-button[data-tone=info]:not(:disabled):hover,
+.oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=info]:not(:disabled):hover {
+  color: color-mix(in srgb, var(--oui-info) 72%, white 28%);
+}
+
+.oui-button-label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.oui-button[data-press-animation=none]:not(:disabled):active,
+.oui-icon-button[data-press-animation=none]:not(:disabled):active {
+  transform: none;
+  filter: none;
+}
+
+.oui-button[data-press-animation=translate]:not(:disabled):active,
+.oui-icon-button[data-press-animation=translate]:not(:disabled):active {
+  transform: translateY(1px);
+  filter: none;
+}
+
+.oui-button[data-press-animation=scale]:not(:disabled):active,
+.oui-icon-button[data-press-animation=scale]:not(:disabled):active {
+  transform: scale(0.965);
+  filter: none;
+}
+
+.oui-button[data-press-animation=soft]:not(:disabled):active,
+.oui-icon-button[data-press-animation=soft]:not(:disabled):active {
+  transform: none;
+  filter: brightness(0.92) saturate(1.04);
+  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.06);
+}
+
+.oui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.oui-badge[data-size="1"] {
+  height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+
+.oui-badge[data-size="2"] {
+  height: 22px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+.oui-badge[data-size="3"] {
+  height: 26px;
+  padding: 0 10px;
+  font-size: 13px;
+}
+
+.oui-badge[data-size="4"] {
+  height: 30px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+
+.oui-badge[data-tone=neutral] {
+  color: var(--oui-text);
+  background: var(--oui-soft);
+}
+
+.oui-badge[data-tone=brand] {
+  color: var(--oui-brand-strong);
+  background: var(--oui-brand-soft);
+}
+
+.oui-badge[data-tone=success] {
+  color: var(--oui-success);
+  background: var(--oui-success-soft);
+}
+
+.oui-badge[data-tone=warning] {
+  color: var(--oui-warning);
+  background: var(--oui-warning-soft);
+}
+
+.oui-badge[data-tone=danger] {
+  color: var(--oui-danger);
+  background: var(--oui-danger-soft);
+}
+
+.oui-badge[data-tone=info] {
+  color: var(--oui-info);
+  background: var(--oui-info-soft);
+}
+
+.oui-text-field,
+.oui-text-area {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  color: var(--oui-text);
+  background: var(--oui-control-bg, transparent);
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
+}
+
+.oui-text-field-full {
+  width: 100%;
+}
+
+.oui-text-field[data-size="1"] {
+  min-height: 24px;
+  padding: 0 7px;
+  font-size: 12px;
+}
+
+.oui-text-field[data-size="2"] {
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 13px;
+}
+
+.oui-text-field[data-size="3"] {
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.oui-text-field[data-size="4"] {
+  min-height: 40px;
+  padding: 0 12px;
+  font-size: 15px;
+}
+
+.oui-text-field[data-invalid=true],
+.oui-text-area[data-invalid=true] {
+  border-color: var(--oui-danger);
+}
+
+.oui-text-field[data-disabled=true] {
+  opacity: 0.62;
+  background: var(--oui-control-bg, transparent);
+}
+
+.oui-text-field-input,
+.oui-text-area textarea,
+.oui-text-area-input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+}
+
+.oui-text-field-input::placeholder,
+.oui-text-area textarea::placeholder,
+.oui-text-area-input::placeholder {
+  color: var(--oui-muted);
+}
+
+.oui-text-field-slot,
+.oui-text-field-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oui-muted);
+}
+
+.oui-text-field-clear {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.oui-text-field-clear:hover {
+  color: var(--oui-text);
+  background: var(--oui-control-hover-bg, var(--oui-soft));
+}
+
+.oui-text-area {
+  display: block;
+  width: 100%;
+  min-height: 90px;
+  padding: 9px 10px;
+  resize: vertical;
+}
+
+.oui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oui-field-gap, 6px);
+  min-width: 0;
+}
+
+.oui-field-label {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  color: var(--oui-text);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.oui-field-required,
+.oui-field-error {
+  color: var(--oui-danger);
+}
+
+.oui-field-helper {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+.oui-combobox-search-wrap .oui-text-field {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.oui-combobox-search-wrap .oui-text-field:hover,
+.oui-combobox-search-wrap .oui-text-field:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.oui-text-field,
+.oui-text-area {
+  background-clip: border-box;
+  background-color: var(--oui-control-bg, transparent);
+  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-radius: 6px;
+  box-shadow: none;
+  outline: none;
+  transition: border-color 280ms ease, background-color 180ms ease;
+}
+
+.oui-text-field:hover,
+.oui-text-area:hover {
+  border-color: var(--oui-gray-a8);
+}
+
+.oui-text-field:focus-within,
+.oui-text-field:has(.oui-text-field-input:focus),
+.oui-text-area:focus,
+.oui-text-area:focus-within {
+  border-color: var(--oui-brand);
+  box-shadow: none;
+  outline: none;
+}
+
+.oui-text-field-input,
+.oui-text-field-input:focus,
+.oui-text-area,
+.oui-text-area:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.oui-text-field-input[type=date] {
+  color: inherit;
+  color-scheme: light;
+  min-width: 0;
+}
+
+.oui-root[data-oui-theme=dark] .oui-text-field-input[type=date] {
+  color-scheme: dark;
+}
+
+.oui-text-field-input[type=date]::-webkit-datetime-edit {
+  color: inherit;
+}
+
+.oui-text-field-input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.oui-text-field[data-size="1"] {
+  min-height: 24px;
+  padding: 0 7px;
+  font-size: 12px;
+}
+
+.oui-text-field[data-size="2"] {
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 13px;
+}
+
+.oui-text-field[data-size="3"] {
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.oui-text-field[data-size="4"] {
+  min-height: 40px;
+  padding: 0 12px;
+  font-size: 15px;
+}
+
+.oui-text-area {
+  min-height: 88px;
+  padding: 8px 10px;
+  color: var(--oui-text);
+}
+
+.oui-text-field[data-invalid=true],
+.oui-text-area[data-invalid=true] {
+  border-color: var(--oui-danger);
+}
+
+.oui-text-field[data-disabled=true],
+.oui-text-area:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.oui-combobox-search-wrap .oui-text-field {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.oui-combobox-search-wrap .oui-text-field:hover,
+.oui-combobox-search-wrap .oui-text-field:focus-within {
+  border-color: transparent;
+}
+
+.oui-date-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 5px;
+  padding: 0;
+  color: var(--oui-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 140ms ease, color 140ms ease;
+}
+
+.oui-date-picker-trigger:hover,
+.oui-date-picker-trigger:focus-visible {
+  color: var(--oui-text);
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  outline: none;
+}
+
+.oui-date-picker-popover {
+  width: 292px;
+  padding: 0;
+}
+
+.oui-date-picker-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+
+.oui-date-picker-head {
+  display: grid;
+  grid-template-columns: 28px 1fr 28px;
+  align-items: center;
+  gap: 6px;
+}
+
+.oui-date-picker-head strong {
+  min-width: 0;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--oui-text);
+  text-transform: capitalize;
+}
+
+.oui-date-picker-weekdays,
+.oui-date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.oui-date-picker-weekdays span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  color: var(--oui-muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.oui-date-picker-day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 0;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+
+.oui-date-picker-day:hover:not(:disabled),
+.oui-date-picker-day:focus-visible {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  outline: none;
+}
+
+.oui-date-picker-day[data-outside=true] {
+  color: color-mix(in srgb, var(--oui-muted) 64%, transparent);
+}
+
+.oui-date-picker-day[data-today=true] {
+  border-color: var(--oui-border-strong);
+}
+
+.oui-date-picker-day[data-selected=true] {
+  border-color: var(--oui-brand);
+  color: var(--oui-brand-text);
+  background: var(--oui-brand-soft);
+  font-weight: 760;
+}
+
+.oui-date-picker-day:disabled {
+  color: color-mix(in srgb, var(--oui-muted) 42%, transparent);
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.oui-date-picker-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-top: 1px solid var(--oui-border);
+  padding-top: 10px;
+}
+
+.oui-stepper {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  width: fit-content;
+}
+
+.oui-stepper .oui-stepper-button,
+.oui-stepper .oui-stepper-field {
+  min-height: 30px;
+  box-shadow: none;
+}
+
+.oui-stepper .oui-stepper-button {
+  width: 32px;
+  min-width: 32px;
+  background-color: var(--oui-control-bg, transparent);
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  color: var(--oui-muted);
+}
+
+.oui-stepper .oui-stepper-button:hover:not(:disabled) {
+  border-color: var(--oui-gray-a8);
+  color: var(--oui-text);
+}
+
+.oui-stepper .oui-stepper-decrease {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.oui-stepper .oui-stepper-increase {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.oui-stepper .oui-stepper-field {
+  width: 86px !important;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.oui-stepper .oui-stepper-field:hover,
+.oui-stepper .oui-stepper-field:focus-within {
+  border-left: 0;
+  border-right: 0;
+}
+
+.oui-stepper .oui-stepper-field .oui-text-field-input {
+  text-align: center;
+}
+
+.oui-stepper .oui-stepper-button,
+.oui-stepper .oui-stepper-field {
+  position: relative;
+}
+
+.oui-stepper .oui-stepper-button {
+  z-index: 1;
+}
+
+.oui-stepper .oui-stepper-field {
+  z-index: 2;
+  margin-right: -1px;
+  margin-left: -1px;
+  border-right: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-left: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+}
+
+.oui-stepper .oui-stepper-field:hover {
+  border-right-color: var(--oui-gray-a8);
+  border-left-color: var(--oui-gray-a8);
+}
+
+.oui-stepper .oui-stepper-field:focus-within {
+  z-index: 3;
+  border-right-color: var(--oui-brand);
+  border-left-color: var(--oui-brand);
+}
+
+.oui-stepper {
+  --oui-stepper-border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+}
+
+.oui-stepper:hover {
+  --oui-stepper-border-color: var(--oui-gray-a8);
+}
+
+.oui-stepper:focus-within {
+  --oui-stepper-border-color: var(--oui-brand);
+}
+
+.oui-stepper .oui-stepper-button,
+.oui-stepper .oui-stepper-field {
+  border-color: var(--oui-stepper-border-color);
+}
+
+.oui-stepper .oui-stepper-button:hover:not(:disabled),
+.oui-stepper:focus-within .oui-stepper-button:hover:not(:disabled) {
+  border-color: var(--oui-stepper-border-color);
+}
+
+.oui-stepper .oui-stepper-field,
+.oui-stepper .oui-stepper-field:hover,
+.oui-stepper .oui-stepper-field:focus-within {
+  z-index: auto;
+  margin-right: 0;
+  margin-left: 0;
+  border-right: 0;
+  border-left: 0;
+}
+
+.oui-stepper:focus-within .oui-stepper-button,
+.oui-stepper:focus-within .oui-stepper-field {
+  border-color: var(--oui-brand);
+}
+
+.oui-field-addon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--oui-muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.oui-range-field {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-range-field-separator {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+@media (max-width: 560px) {
+  .oui-range-field {
+    grid-template-columns: 1fr;
+  }
+  .oui-range-field-separator {
+    display: none;
+  }
+}
+.oui-icon-text {
+  display: inline;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.oui-icon-text-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  margin: 0.12em 0.4em 0 0;
+  color: var(--oui-icon-text-icon-color, currentColor);
+  vertical-align: top;
+}
+
+.oui-icon-text-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.oui-icon-text-icon[data-tone=muted] {
+  --oui-icon-text-icon-color: var(--oui-muted);
+}
+
+.oui-icon-text-icon[data-tone=brand] {
+  --oui-icon-text-icon-color: var(--oui-brand-strong);
+}
+
+.oui-icon-text-icon[data-tone=success] {
+  --oui-icon-text-icon-color: var(--oui-success);
+}
+
+.oui-icon-text-icon[data-tone=warning] {
+  --oui-icon-text-icon-color: var(--oui-warning);
+}
+
+.oui-icon-text-icon[data-tone=danger] {
+  --oui-icon-text-icon-color: var(--oui-danger);
+}
+
+.oui-icon-text-icon[data-tone=info] {
+  --oui-icon-text-icon-color: var(--oui-info);
+}
+
+.oui-icon-text-icon[data-spin=true] svg {
+  animation: ouiSpin 900ms linear infinite;
+}
+
+.oui-state-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  container-type: inline-size;
+  min-width: 0;
+  min-height: 0;
+  align-items: start;
+  gap: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--oui-radius);
+  background: var(--oui-section-surface-bg);
+  font-size: 14px;
+  padding: 12px;
+}
+
+.oui-state-card[data-compact=true] {
+  gap: 8px;
+  padding: 9px;
+}
+
+.oui-state-card[data-tone=brand] {
+  background: var(--oui-brand-soft);
+}
+
+.oui-state-card[data-tone=success] {
+  background: var(--oui-success-soft);
+}
+
+.oui-state-card[data-tone=warning] {
+  background: var(--oui-warning-soft);
+}
+
+.oui-state-card[data-tone=danger] {
+  background: var(--oui-danger-soft);
+}
+
+.oui-state-card[data-tone=info] {
+  background: var(--oui-info-soft);
+}
+
+.oui-state-card-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.oui-state-card-body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-state-card-description {
+  display: block;
+  overflow-wrap: anywhere;
+  color: var(--oui-text);
+}
+
+.oui-state-card-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+@container (max-width: 260px) {
+  .oui-state-card {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .oui-state-card-action {
+    width: 100%;
+    justify-content: flex-start;
+    grid-column: 1;
+    grid-row: 2;
+  }
+}
+.oui-alert {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+  background: var(--oui-pad-bg);
+  padding: 10px 12px;
+  color: var(--oui-text);
+}
+
+.oui-alert[data-tone=success] {
+  border-color: color-mix(in srgb, var(--oui-success) 42%, var(--oui-border));
+  background: var(--oui-success-soft);
+}
+
+.oui-alert[data-tone=warning] {
+  border-color: color-mix(in srgb, var(--oui-warning) 42%, var(--oui-border));
+  background: var(--oui-warning-soft);
+}
+
+.oui-alert[data-tone=danger] {
+  border-color: color-mix(in srgb, var(--oui-danger) 42%, var(--oui-border));
+  background: var(--oui-danger-soft);
+}
+
+.oui-alert[data-tone=info] {
+  border-color: color-mix(in srgb, var(--oui-info) 42%, var(--oui-border));
+  background: var(--oui-info-soft);
+}
+
+.oui-alert-icon,
+.oui-alert-action {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.oui-alert-main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.oui-checkbox,
+.oui-radio,
+.oui-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--oui-text);
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.oui-checkbox input,
+.oui-radio input,
+.oui-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.oui-checkbox-box,
+.oui-radio-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  border: 1px solid var(--oui-border-strong);
+  background: var(--oui-control-bg, transparent);
+  color: #ffffff;
+  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.oui-checkbox-box {
+  border-radius: 5px;
+}
+
+.oui-radio-dot {
+  border-radius: 999px;
+}
+
+.oui-radio-dot::after {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: currentColor;
+  content: "";
+  transform: scale(0);
+  transition: transform 140ms ease;
+}
+
+.oui-checkbox[data-checked=true] .oui-checkbox-box,
+.oui-radio[data-checked=true] .oui-radio-dot {
+  border-color: var(--oui-brand);
+  background: var(--oui-brand);
+}
+
+.oui-radio[data-checked=true] .oui-radio-dot::after {
+  transform: scale(1);
+}
+
+.oui-checkbox:focus-within .oui-checkbox-box,
+.oui-radio:focus-within .oui-radio-dot,
+.oui-switch:focus-within .oui-switch-track {
+  box-shadow: var(--oui-ring);
+}
+
+.oui-checkbox[data-disabled=true],
+.oui-radio[data-disabled=true],
+.oui-switch[data-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.oui-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.oui-switch-track {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--oui-control-bg, transparent);
+  transition: background-color 140ms ease, box-shadow 140ms ease;
+}
+
+.oui-switch-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  transition: transform 160ms ease;
+}
+
+.oui-switch[data-checked=true] .oui-switch-track {
+  background: var(--oui-brand);
+}
+
+.oui-switch[data-checked=true] .oui-switch-thumb {
+  transform: translateX(18px);
+}
+
+.oui-segmented,
+.oui-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  width: fit-content;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-control-bg, transparent);
+  padding: 3px;
+}
+
+.oui-segmented-item,
+.oui-tabs-trigger {
+  border: 0;
+  border-radius: var(--oui-radius-sm);
+  padding: 7px 11px;
+  color: var(--oui-muted);
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+
+.oui-segmented-item[data-active=true],
+.oui-tabs-trigger[data-active=true] {
+  color: var(--oui-text);
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft)));
+  box-shadow: var(--oui-shadow-sm);
+}
+
+.oui-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-tabs-content {
+  min-width: 0;
+}
+
+.oui-button[data-variant=surface],
+.oui-icon-button[data-variant=surface],
+.oui-combobox-trigger {
+  background-color: var(--oui-control-bg, transparent);
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  box-shadow: none;
+  font-weight: 400;
+}
+
+.oui-button[data-variant=surface]:not(:disabled):hover,
+.oui-icon-button[data-variant=surface]:not(:disabled):hover,
+.oui-combobox-trigger:not(:disabled):hover {
+  border-color: var(--oui-gray-a8);
+  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
+}
+
+.oui-combobox-trigger[data-state=open],
+.oui-combobox-trigger[data-state=open]:hover {
+  border-color: var(--oui-brand);
+  box-shadow: none;
+}
+
+.oui-combobox-trigger .oui-button-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+}
+
+.oui-combobox-trigger-label,
+.oui-combobox-placeholder {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1rem;
+}
+
+.oui-combobox-placeholder {
+  color: var(--oui-muted);
+}
+
+.oui-combobox-trigger-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  color: var(--oui-muted);
+}
+
+.oui-combobox-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oui-muted);
+  transition: color 160ms ease;
+}
+
+.oui-combobox-clear:hover,
+.oui-combobox-clear:focus-visible {
+  color: var(--oui-text);
+  outline: none;
+}
+
+.oui-combobox-content,
+.oui-select-content {
+  min-width: 280px;
+  max-width: min(420px, 100vw - 24px);
+  padding: 0;
+  overflow: hidden;
+  color: var(--oui-text);
+  background: var(--oui-bg);
+}
+
+.oui-combobox-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 42px;
+  padding: 0 6px 4px;
+  border-bottom: 1px solid var(--oui-border);
+}
+
+.oui-combobox-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oui-gray-a8) transparent;
+}
+
+.oui-combobox-options,
+.oui-listbox.oui-combobox-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px;
+}
+
+.oui-combobox-option,
+.oui-listbox.oui-combobox-options .oui-listbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 180ms ease, color 180ms ease;
+}
+
+.oui-listbox.oui-combobox-options .oui-listbox-item {
+  padding: 6px 10px;
+}
+
+.oui-combobox-option-main {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-self: stretch;
+  padding: 6px 10px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.oui-combobox-option[data-selected=true],
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true] {
+  background: transparent;
+}
+
+.oui-combobox-option[data-selected=false]:hover,
+.oui-combobox-option[data-highlighted=true],
+.oui-listbox.oui-combobox-options .oui-listbox-item:hover,
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-highlighted=true] {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+}
+
+.oui-combobox-option[data-selected=true]:hover,
+.oui-combobox-option[data-selected=true][data-highlighted=true],
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+}
+
+.oui-combobox-option[data-selected=true],
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true] {
+  color: var(--oui-text);
+  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+}
+
+.oui-combobox-option[data-selected=true]:hover,
+.oui-combobox-option[data-selected=true][data-highlighted=true],
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
+.oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+}
+
+.oui-combobox-check {
+  flex: 0 0 auto;
+  margin-right: 10px;
+  color: var(--oui-brand-strong);
+}
+
+.oui-combobox-option-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  margin-right: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--oui-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
+}
+
+.oui-combobox-option:hover .oui-combobox-option-action,
+.oui-combobox-option:focus-within .oui-combobox-option-action {
+  opacity: 1;
+}
+
+.oui-combobox-option-action:hover,
+.oui-combobox-option-action:focus-visible {
+  background: var(--oui-gray-a4);
+  color: var(--oui-text);
+  outline: none;
+}
+
+.oui-entity-picker-option {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  align-items: center;
+  gap: 10px;
+}
+
+.oui-entity-picker-value {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-entity-option-main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.oui-entity-option-code {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--oui-text);
+  font-size: 13px;
+  font-weight: 720;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-entity-option-meta {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--oui-muted);
+  font-size: 12px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-entity-option-badge {
+  display: inline-flex;
+  min-width: 32px;
+  flex: 0 0 auto;
+  justify-content: center;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+  background: var(--oui-pad-bg);
+  color: var(--oui-muted);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 2px 6px;
+}
+
+.oui-combobox-empty,
+.oui-combobox-state,
+.oui-combobox-next-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px;
+  color: var(--oui-muted);
+  font-size: 14px;
+}
+
+.oui-combobox-sentinel {
+  width: 100%;
+  height: 1px;
+}
+
+.oui-combobox-search-wrap .oui-icon-button.oui-combobox-search-action {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  flex: 0 0 24px;
+  padding: 0;
+  line-height: 1;
+}
+
+.oui-multi-select-trigger .oui-button-label {
+  min-width: 0;
+}
+
+.oui-multi-select-option {
+  min-height: 34px;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 6px 8px;
+}
+
+.oui-multi-select-option .oui-combobox-option-main {
+  align-self: auto;
+  padding: 0;
+  line-height: 20px;
+}
+
+.oui-multi-select-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-radius: 4px;
+  color: #ffffff;
+  background: var(--oui-control-bg, transparent);
+}
+
+.oui-multi-select-check svg {
+  width: 13px;
+  height: 13px;
+}
+
+.oui-multi-select-option[data-selected=true] .oui-multi-select-check {
+  border-color: var(--oui-brand);
+  background: var(--oui-brand);
+}
+
+.oui-button.oui-combobox-trigger[data-variant=surface],
+.oui-button.oui-combobox-trigger {
+  background-color: var(--oui-control-bg, transparent);
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-radius: 6px;
+  box-shadow: none;
+  outline: none;
+  transition: border-color 280ms ease, background-color 180ms ease;
+}
+
+.oui-button.oui-combobox-trigger[data-variant=surface]:not(:disabled):hover,
+.oui-button.oui-combobox-trigger:not(:disabled):hover {
+  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  border-color: var(--oui-gray-a8);
+  box-shadow: none;
+}
+
+.oui-button.oui-combobox-trigger[data-state=open],
+.oui-button.oui-combobox-trigger[data-state=open]:focus,
+.oui-button.oui-combobox-trigger[data-state=open]:focus-visible,
+.oui-button.oui-combobox-trigger[data-state=open]:not(:disabled):hover {
+  background-color: var(--oui-control-bg, transparent);
+  border-color: var(--oui-brand);
+  box-shadow: none;
+  outline: none;
+}
+
+.oui-checkbox,
+.oui-radio,
+.oui-switch {
+  position: relative;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  color: var(--oui-text);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.oui-checkbox input,
+.oui-switch input,
+.oui-radio input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  outline: none;
+  pointer-events: none;
+  white-space: nowrap;
+  appearance: none;
+}
+
+.oui-checkbox-box,
+.oui-radio-dot {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  background: var(--oui-control-bg, transparent);
+  color: #ffffff;
+  box-shadow: none;
+  transition: background-color 180ms ease, border-color 220ms ease, color 180ms ease;
+}
+
+.oui-checkbox-box {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.oui-radio-dot {
+  border-radius: 999px;
+}
+
+.oui-checkbox-box svg {
+  opacity: 0;
+  transform: scale(0.72);
+  transition: opacity 140ms ease, transform 160ms ease;
+}
+
+.oui-checkbox:hover .oui-checkbox-box,
+.oui-radio:hover .oui-radio-dot {
+  border-color: var(--oui-gray-a8);
+}
+
+.oui-checkbox[data-checked=true] .oui-checkbox-box {
+  border-color: var(--oui-brand);
+  background: var(--oui-brand);
+}
+
+.oui-radio[data-checked=true] .oui-radio-dot {
+  border-color: var(--oui-brand);
+  background: var(--oui-brand);
+}
+
+.oui-checkbox[data-checked=true] .oui-checkbox-box svg {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.oui-checkbox:focus-within .oui-checkbox-box,
+.oui-radio:focus-within .oui-radio-dot,
+.oui-switch:focus-within .oui-switch-track {
+  border-color: var(--oui-brand);
+  box-shadow: none;
+}
+
+.oui-switch-track {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-radius: 999px;
+  background: var(--oui-control-bg, transparent);
+  box-shadow: none;
+  transition: background-color 180ms ease, border-color 220ms ease;
+}
+
+.oui-switch:hover .oui-switch-track {
+  border-color: var(--oui-gray-a8);
+}
+
+.oui-switch-thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--oui-text);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
+  transition: background-color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.oui-switch[data-checked=true] .oui-switch-track {
+  border-color: var(--oui-brand);
+  background: var(--oui-brand);
+}
+
+.oui-switch[data-checked=true] .oui-switch-thumb {
+  transform: translateX(16px);
+}
+
+:root[data-oui-theme=light] .oui-switch[data-checked=true] .oui-switch-thumb,
+.oui-root[data-oui-theme=light] .oui-switch[data-checked=true] .oui-switch-thumb {
+  background: #ffffff;
+}
+
+.oui-checkbox[data-disabled=true],
+.oui-switch[data-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.oui-collapse {
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.oui-collapse-content {
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.oui-collapse[data-state=open] .oui-collapse-content {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.oui-tabs {
+  gap: 12px;
+}
+
+.oui-tabs-shell {
+  position: relative;
+  min-width: 0;
+  margin-inline: -8px;
+  padding-inline: 8px;
+  overflow: visible;
+}
+
+.oui-tabs-list {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  gap: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 2px;
+  scrollbar-width: none;
+}
+
+.oui-tabs-list::-webkit-scrollbar {
+  display: none;
+}
+
+.oui-tabs-active-indicator,
+.oui-tabs-hover-indicator {
+  position: absolute;
+  border-radius: 6px;
+  pointer-events: none;
+  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1), height 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
+}
+
+.oui-tabs-active-indicator {
+  z-index: 0;
+  background: var(--oui-gray-a4);
+}
+
+.oui-tabs-hover-indicator {
+  z-index: 0;
+  background: var(--oui-gray-a3);
+  opacity: 0;
+}
+
+.oui-tabs-hover-indicator[data-visible=true] {
+  opacity: 1;
+}
+
+.oui-tabs-trigger {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  min-height: 34px;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 14px;
+  color: var(--oui-muted);
+  background: transparent;
+  box-shadow: none;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 240ms ease;
+}
+
+.oui-tabs-trigger:hover,
+.oui-tabs-trigger:focus-visible,
+.oui-tabs-trigger[data-active=true] {
+  color: var(--oui-text);
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
+.oui-tabs-trigger[data-active=true] {
+  font-weight: 500;
+}
+
+.oui-tabs-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--oui-muted);
+  transition: color 240ms ease;
+}
+
+.oui-tabs-trigger[data-active=true] .oui-tabs-trigger-icon {
+  color: var(--oui-brand);
+}
+
+.oui-tabs-trigger-label {
+  line-height: 1rem;
+}
+
+.oui-tabs-trigger-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  padding: 0 6px;
+  color: var(--oui-muted);
+  background: var(--oui-gray-a4);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.oui-tabs-content {
+  min-width: 0;
+}
+
+.oui-tabs-panel {
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.oui-overlay-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--oui-z-overlay, 1000);
+  pointer-events: none;
+}
+
+.oui-overlay-root > * {
+  pointer-events: auto;
+}
+
+.oui-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.oui-select > .oui-popover-trigger {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.oui-select-content,
+.oui-combobox-content {
+  min-width: 220px;
+}
+
+.oui-popover-trigger,
+.oui-tooltip-trigger {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.oui-popover-content,
+.oui-tooltip-content {
+  color: var(--oui-text);
+  background: var(--oui-floating-bg, var(--oui-bg));
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  box-shadow: var(--oui-shadow-md);
+  transform-origin: top center;
+  will-change: opacity, transform;
+}
+
+.oui-popover-content {
+  min-width: 180px;
+  padding: 6px;
+}
+
+.oui-popover-content[data-state=opening],
+.oui-tooltip-content[data-state=opening] {
+  animation: ouiOverlayIn 180ms ease forwards;
+}
+
+.oui-popover-content[data-state=closing],
+.oui-tooltip-content[data-state=closing] {
+  animation: ouiOverlayOut 180ms ease forwards;
+}
+
+.oui-tooltip-content {
+  max-width: 260px;
+  padding: 7px 9px;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.oui-listbox,
+.oui-menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.oui-listbox-item,
+.oui-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-width: 0;
+  min-height: 32px;
+  border: 0;
+  border-radius: var(--oui-radius-sm);
+  padding: 7px 9px;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+
+.oui-listbox-item:hover,
+.oui-listbox-item[data-highlighted=true],
+.oui-menu-item:hover,
+.oui-menu-item[data-highlighted=true] {
+  background: var(--oui-control-hover-bg, var(--oui-soft));
+}
+
+.oui-listbox-item[data-selected=true] {
+  color: var(--oui-text);
+  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+}
+
+.oui-listbox-item[data-selected=true]:hover,
+.oui-listbox-item[data-selected=true][data-highlighted=true] {
+  background: var(--oui-control-hover-bg, var(--oui-soft));
+}
+
+.oui-listbox-item:disabled,
+.oui-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.oui-menu-item[data-loading=true]:disabled {
+  cursor: progress;
+  opacity: 1;
+}
+
+.oui-command-palette {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-command-palette-search {
+  width: 100%;
+}
+
+.oui-command-palette-results {
+  display: flex;
+  max-height: min(48vh, 420px);
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  padding-right: 2px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+}
+
+.oui-command-palette-results::-webkit-scrollbar {
+  width: 8px;
+}
+
+.oui-command-palette-results::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.oui-command-palette-results::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-clip: content-box;
+}
+
+.oui-command-palette-collapse {
+  width: 100%;
+}
+
+.oui-command-palette-collapse > .oui-collapse-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-command-palette-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.oui-command-palette-group-title {
+  padding: 0 4px;
+  color: var(--oui-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.oui-command-palette-group-title[data-recent=true] {
+  color: var(--oui-brand-strong);
+}
+
+.oui-command-palette-items {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.oui-command-palette-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 46px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 220ms ease, border-color 220ms ease, color 180ms ease;
+}
+
+.oui-command-palette-item:hover,
+.oui-command-palette-item:focus-visible,
+.oui-command-palette-item[data-selected=true] {
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 42%, transparent);
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  outline: none;
+}
+
+.oui-command-palette-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.oui-command-palette-item-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--oui-muted);
+}
+
+.oui-command-palette-item[data-selected=true] .oui-command-palette-item-icon {
+  color: var(--oui-brand-strong);
+}
+
+.oui-command-palette-item-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.oui-command-palette-item-label {
+  overflow: hidden;
+  font-weight: 600;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-command-palette-item-description {
+  overflow: hidden;
+  color: var(--oui-muted);
+  font-size: 12px;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-command-palette-shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 22px;
+  flex: 0 0 auto;
+  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 36%, transparent);
+  border-radius: 5px;
+  padding: 0 6px;
+  color: var(--oui-muted);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.oui-command-palette-empty {
+  display: flex;
+  min-height: 92px;
+  align-items: center;
+  justify-content: center;
+  color: var(--oui-muted);
+  font-size: 14px;
+}
+
+.oui-menu {
+  min-width: 220px;
+}
+
+.oui-menu-icon {
+  display: inline-flex;
+  color: var(--oui-muted);
+}
+
+.oui-menu-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oui-menu-description {
+  display: block;
+  overflow: hidden;
+  color: var(--oui-muted);
+  font-size: 12px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-menu-shortcut {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 20px;
+  border: 1px solid var(--oui-border);
+  border-radius: 5px;
+  color: var(--oui-muted);
+  font-size: 11px;
+  font-weight: 650;
+  padding: 0 5px;
+}
+
+.oui-menu-item[data-tone=danger] {
+  color: var(--oui-danger);
+}
+
+.oui-menu-separator {
+  height: 1px;
+  margin: 5px 4px;
+  background: var(--oui-border);
+}
+
+.oui-menu-subitems {
+  margin-left: 12px;
+  padding-left: 8px;
+  border-left: 1px solid var(--oui-border);
+}
+
+.oui-context-menu-area {
+  position: relative;
+}
+
+.oui-context-menu-trigger {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.oui-context-menu-dot {
+  display: block;
+  width: 1px;
+  height: 1px;
+}
+
+.oui-modal-layer {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.oui-modal-content {
+  position: relative;
+  display: flex;
+  max-height: min(86vh, 860px);
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--oui-text);
+  background: var(--oui-panel);
+  border: 1px solid var(--oui-modal-border-color, var(--oui-border));
+  border-radius: var(--oui-modal-radius, 12px);
+  box-shadow: var(--oui-modal-shadow, var(--oui-shadow-md));
+  opacity: 0;
+  cursor: default;
+  filter: blur(14px);
+  transform: scale(0.82);
+  transform-origin: center;
+  will-change: opacity, transform, filter;
+}
+
+.oui-modal-content[data-animation=rise] {
+  filter: blur(0);
+  transform: scale(0.92) translateY(14px);
+}
+
+.oui-modal-content[data-animation=fade] {
+  filter: blur(0);
+  transform: scale(1);
+}
+
+.oui-modal-content[data-state=opening][data-animation=zoom-blur] {
+  animation: ouiModalZoomBlurIn var(--oui-modal-animation-duration, 380ms) var(--oui-modal-animation-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
+}
+
+.oui-modal-content[data-state=opening][data-animation=rise] {
+  animation: ouiModalRiseIn var(--oui-modal-animation-duration, 380ms) var(--oui-modal-animation-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
+}
+
+.oui-modal-content[data-state=opening][data-animation=fade] {
+  animation: ouiModalFadeIn var(--oui-modal-animation-duration, 380ms) var(--oui-modal-animation-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
+}
+
+.oui-modal-content[data-state=open] {
+  filter: blur(0);
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.oui-modal-content[data-state=closing][data-animation=zoom-blur] {
+  animation: ouiModalZoomBlurOut var(--oui-modal-animation-duration, 380ms) var(--oui-modal-animation-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
+}
+
+.oui-modal-content[data-state=closing][data-animation=rise] {
+  animation: ouiModalRiseOut var(--oui-modal-animation-duration, 380ms) ease forwards;
+}
+
+.oui-modal-content[data-state=closing][data-animation=fade] {
+  animation: ouiModalFadeOut var(--oui-modal-animation-duration, 380ms) ease forwards;
+}
+
+.oui-modal-header,
+.oui-modal-footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+}
+
+.oui-modal-header {
+  border-bottom: 1px solid var(--oui-border);
+}
+
+.oui-modal-footer {
+  align-items: center;
+  border-top: 1px solid var(--oui-border);
+}
+
+.oui-modal-title-wrap {
+  min-width: 0;
+}
+
+.oui-modal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 760;
+  letter-spacing: 0;
+}
+
+.oui-modal-description {
+  margin: 4px 0 0;
+  color: var(--oui-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.oui-modal-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+}
+
+.oui-toast-viewport {
+  position: fixed;
+  z-index: var(--oui-z-toast, 2147483000);
+  display: flex;
+  width: min(420px, 100vw - 24px);
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.oui-toast-viewport[data-position^=top] {
+  top: 20px;
+}
+
+.oui-toast-viewport[data-position^=bottom] {
+  bottom: 20px;
+}
+
+.oui-toast-viewport[data-position$=left] {
+  left: 20px;
+  align-items: flex-start;
+}
+
+.oui-toast-viewport[data-position$=right] {
+  right: 20px;
+  align-items: flex-end;
+}
+
+.oui-toast-viewport[data-position$=center] {
+  left: 50%;
+  align-items: center;
+  transform: translateX(-50%);
+}
+
+.oui-toast-frame {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  animation: ouiToastIn var(--oui-toast-animation-duration, 520ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  pointer-events: none;
+  will-change: filter, opacity, transform;
+}
+
+.oui-toast-backdrop {
+  position: absolute;
+  inset: -10px;
+  z-index: 0;
+  border-radius: 14px;
+  background: transparent;
+  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  pointer-events: none;
+}
+
+.oui-toast {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--oui-toast-custom-border-color, var(--oui-toast-border-color, var(--oui-border)));
+  border-radius: 8px;
+  width: 100%;
+  isolation: isolate;
+  overflow: visible;
+  padding: 11px 12px 12px;
+  color: var(--oui-text);
+  background: var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg)));
+  box-shadow: var(--oui-toast-shadow, 0 10px 26px rgba(0, 0, 0, 0.18));
+  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  transform-origin: var(--oui-toast-origin, center);
+  pointer-events: auto;
+}
+
+.oui-toast::after {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--oui-toast-tone-bg, transparent);
+  content: "";
+  pointer-events: none;
+}
+
+.oui-toast[data-clickable=true] {
+  cursor: pointer;
+}
+
+.oui-toast[data-clickable=true]:hover {
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-border) 78%, var(--oui-text)));
+  background: color-mix(in srgb, var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg))) 92%, var(--oui-text) 8%);
+}
+
+.oui-root[data-oui-theme=light] .oui-toast,
+:root[data-oui-theme=light] .oui-toast {
+  box-shadow: var(--oui-toast-shadow, 0 10px 24px rgba(15, 23, 42, 0.12));
+}
+
+.oui-toast-frame[data-position$=right] {
+  --oui-toast-enter-x: calc(100% + 32px);
+  --oui-toast-enter-y: 0;
+  --oui-toast-exit-x: calc(100% + 32px);
+  --oui-toast-exit-y: 0;
+  --oui-toast-origin: right center;
+}
+
+.oui-toast-frame[data-position$=left] {
+  --oui-toast-enter-x: calc(-100% - 32px);
+  --oui-toast-enter-y: 0;
+  --oui-toast-exit-x: calc(-100% - 32px);
+  --oui-toast-exit-y: 0;
+  --oui-toast-origin: left center;
+}
+
+.oui-toast-frame[data-position=top-center] {
+  --oui-toast-enter-x: 0;
+  --oui-toast-enter-y: calc(-100% - 32px);
+  --oui-toast-exit-x: 0;
+  --oui-toast-exit-y: calc(-100% - 32px);
+  --oui-toast-origin: top center;
+}
+
+.oui-toast-frame[data-position=bottom-center] {
+  --oui-toast-enter-x: 0;
+  --oui-toast-enter-y: calc(100% + 32px);
+  --oui-toast-exit-x: 0;
+  --oui-toast-exit-y: calc(100% + 32px);
+  --oui-toast-origin: bottom center;
+}
+
+.oui-toast-frame[data-state=closing] {
+  animation: ouiToastOut var(--oui-toast-exit-duration, 260ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.oui-toast-main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.oui-toast-title {
+  color: var(--oui-text);
+  font-size: 13px;
+  font-weight: 560;
+  line-height: 1.25;
+}
+
+.oui-toast-message {
+  color: var(--oui-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.oui-toast-action {
+  align-self: flex-start;
+}
+
+.oui-toast-close {
+  flex: 0 0 auto;
+}
+
+.oui-toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--oui-toast-progress-height, 1px);
+  background: var(--oui-toast-progress-color, var(--oui-brand-strong));
+  border-radius: 0 0 inherit inherit;
+  transform-origin: left center;
+  animation: ouiToastProgress var(--oui-toast-duration, 4200ms) linear forwards;
+  pointer-events: none;
+}
+
+.oui-toast[data-tone=success] {
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-success-soft) 34%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-success) 16%, var(--oui-border)));
+}
+
+.oui-toast[data-tone=success] .oui-toast-progress {
+  background: var(--oui-toast-progress-color, var(--oui-success));
+}
+
+.oui-toast[data-tone=warning] {
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-warning-soft) 32%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-warning) 18%, var(--oui-border)));
+}
+
+.oui-toast[data-tone=warning] .oui-toast-progress {
+  background: var(--oui-toast-progress-color, var(--oui-warning));
+}
+
+.oui-toast[data-tone=danger] {
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-danger-soft) 32%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-danger) 18%, var(--oui-border)));
+}
+
+.oui-toast[data-tone=danger] .oui-toast-progress {
+  background: var(--oui-toast-progress-color, var(--oui-danger));
+}
+
+.oui-toast[data-tone=info] {
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-info-soft) 30%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-info) 16%, var(--oui-border)));
+}
+
+.oui-toast[data-tone=info] .oui-toast-progress {
+  background: var(--oui-toast-progress-color, var(--oui-info));
+}
+
+.oui-popover-content,
+.oui-tooltip-content {
+  border-color: var(--oui-gray-a8);
+  background: var(--oui-floating-bg, var(--oui-bg));
+  box-shadow: var(--oui-shadow-md);
+}
+
+.oui-menu.oui-action-menu-content {
+  min-width: min(220px, 100vw - 24px);
+  max-width: min(360px, 100vw - 24px);
+  max-height: min(100vh - 16px, 520px);
+  padding: 4px;
+  overflow: visible;
+  border-radius: 10px;
+}
+
+.oui-menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-menu-row {
+  position: relative;
+}
+
+.oui-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 30px;
+  padding: 5px 8px;
+  border-radius: 8px;
+}
+
+.oui-menu-item-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.oui-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  color: var(--oui-muted);
+}
+
+.oui-menu-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-menu-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  color: var(--oui-muted);
+  cursor: help;
+}
+
+.oui-menu-info:hover,
+.oui-menu-info:focus-visible {
+  background: var(--oui-gray-a4);
+  color: var(--oui-text);
+  outline: none;
+}
+
+.oui-menu-separator {
+  height: 1px;
+  margin: 3px 2px;
+  background: var(--oui-gray-a5);
+}
+
+.oui-menu-sub-chevron {
+  flex: 0 0 auto;
+  color: var(--oui-muted);
+  transition: transform 140ms ease;
+}
+
+.oui-menu-item[data-submenu-state=open] .oui-menu-sub-chevron {
+  transform: rotate(90deg);
+}
+
+.oui-menu-subcontent {
+  position: absolute;
+  top: -4px;
+  left: calc(100% + 6px);
+  min-width: 220px;
+  max-width: min(360px, 100vw - 24px);
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.oui-menu-row:not(:hover) > .oui-menu-subcontent {
+  pointer-events: none;
+}
+
+.oui-menu-inline-subitems {
+  display: none;
+  padding-left: 18px;
+}
+
+.oui-menu-inline-subitems[data-state=open] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-menu-item[data-tone=danger] {
+  color: var(--oui-danger);
+}
+
+.oui-menu-item[data-tone=danger] .oui-menu-icon {
+  color: var(--oui-danger);
+}
+
+.oui-menu-item[data-tone=danger]:hover,
+.oui-menu-item[data-tone=danger]:focus-visible {
+  background: var(--oui-danger-soft);
+}
+
+.oui-context-menu-content {
+  position: fixed;
+  min-width: 220px;
+  padding: 4px;
+  border-radius: 10px;
+  z-index: 1000;
+}
+
+.oui-tooltip-content {
+  border-radius: 6px;
+  padding: 6px 8px;
+  color: var(--oui-text);
+  font-size: 12px;
+}
+
+.oui-combobox-content,
+.oui-select-content,
+.oui-popover-content.oui-combobox-content,
+.oui-popover-content.oui-select-content {
+  border-radius: 6px;
+}
+
+.oui-combobox-state {
+  display: flex;
+  min-height: 72px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px;
+  color: var(--oui-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.oui-button,
+.oui-icon-button,
+.oui-segmented-item,
+.oui-tabs-trigger,
+.oui-listbox-item,
+.oui-menu-item,
+.oui-combobox-option-main {
+  line-height: 1rem;
+}
+
+.oui-button-label,
+.oui-menu-label,
+.oui-combobox-trigger-label,
+.oui-combobox-placeholder {
+  min-height: 1rem;
+  line-height: 1rem;
+}
+
+.oui-popover-content,
+.oui-tooltip-content,
+.oui-menu.oui-action-menu-content,
+.oui-context-menu-content,
+.oui-combobox-content,
+.oui-select-content {
+  background: var(--oui-floating-bg, var(--oui-bg));
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+}
+
+.oui-combobox-content,
+.oui-select-content,
+.oui-popover-content.oui-combobox-content,
+.oui-popover-content.oui-select-content {
+  background: var(--oui-bg);
+}
+
+.oui-menu.oui-action-menu-content,
+.oui-context-menu-content,
+.oui-popover-content,
+.oui-tooltip-content {
+  border-radius: 6px;
+}
+
+.oui-menu-row {
+  position: relative;
+}
+
+.oui-menu-row:hover::after,
+.oui-menu-row:focus-within::after {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  width: 10px;
+  height: calc(100% + 8px);
+  content: "";
+}
+
+.oui-menu-subcontent {
+  left: calc(100% + 4px);
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-radius: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-4px) scale(0.98);
+  transform-origin: left top;
+  will-change: opacity, transform;
+}
+
+.oui-menu-subcontent[data-state=opening] {
+  animation: ouiSubmenuIn 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  pointer-events: auto;
+}
+
+.oui-menu-subcontent[data-state=open] {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.oui-menu-subcontent[data-state=closing] {
+  animation: ouiSubmenuOut 150ms ease forwards;
+  pointer-events: none;
+}
+
+.oui-drawer-layer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--oui-z-modal, 1000);
+  pointer-events: none;
+}
+
+.oui-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  padding: 0;
+  background: var(--oui-overlay-bg);
+  opacity: 0;
+  cursor: default;
+  pointer-events: auto;
+}
+
+.oui-drawer-backdrop[data-state=opening] {
+  animation: ouiDrawerBackdropIn var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease) forwards;
+}
+
+.oui-drawer-backdrop[data-state=open] {
+  opacity: 1;
+}
+
+.oui-drawer-backdrop[data-state=closing] {
+  animation: ouiDrawerBackdropOut var(--oui-drawer-duration, 260ms) ease forwards;
+}
+
+.oui-drawer-panel {
+  position: absolute;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--oui-text);
+  background: var(--oui-panel);
+  border: 1px solid var(--oui-border);
+  box-shadow: var(--oui-shadow-overlay);
+  pointer-events: auto;
+  will-change: transform;
+}
+
+.oui-drawer-panel[data-side=left],
+.oui-drawer-panel[data-side=right] {
+  top: 0;
+  bottom: 0;
+  width: var(--oui-drawer-size, min(86vw, 360px));
+  max-width: 100vw;
+}
+
+.oui-drawer-panel[data-side=left] {
+  left: 0;
+  border-left: 0;
+  border-radius: 0 var(--oui-radius-xl) var(--oui-radius-xl) 0;
+  transform: translateX(-105%);
+}
+
+.oui-drawer-panel[data-side=right] {
+  right: 0;
+  border-right: 0;
+  border-radius: var(--oui-radius-xl) 0 0 var(--oui-radius-xl);
+  transform: translateX(105%);
+}
+
+.oui-drawer-panel[data-side=top],
+.oui-drawer-panel[data-side=bottom] {
+  right: 0;
+  left: 0;
+  height: var(--oui-drawer-size, min(80vh, 420px));
+  max-height: 100vh;
+}
+
+.oui-drawer-panel[data-side=top] {
+  top: 0;
+  border-top: 0;
+  border-radius: 0 0 var(--oui-radius-xl) var(--oui-radius-xl);
+  transform: translateY(-105%);
+}
+
+.oui-drawer-panel[data-side=bottom] {
+  bottom: 0;
+  border-bottom: 0;
+  border-radius: var(--oui-radius-xl) var(--oui-radius-xl) 0 0;
+  transform: translateY(105%);
+}
+
+.oui-drawer-panel[data-state=opening],
+.oui-drawer-panel[data-state=open] {
+  transform: translate(0, 0);
+}
+
+.oui-drawer-panel[data-state=opening] {
+  transition: transform var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease);
+}
+
+.oui-drawer-panel[data-state=closing] {
+  transition: transform var(--oui-drawer-duration, 260ms) ease;
+}
+
+.oui-drawer-header,
+.oui-drawer-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 16px 18px;
+}
+
+.oui-drawer-header {
+  border-bottom: 1px solid var(--oui-border);
+}
+
+.oui-drawer-footer {
+  align-items: center;
+  border-top: 1px solid var(--oui-border);
+}
+
+.oui-drawer-title-wrap {
+  min-width: 0;
+}
+
+.oui-drawer-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 760;
+  letter-spacing: 0;
+  line-height: 1.18;
+}
+
+.oui-drawer-description {
+  margin: 4px 0 0;
+  color: var(--oui-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.oui-drawer-body {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 18px;
+}
+
+@media (max-width: 560px) {
+  .oui-drawer-panel[data-side=left],
+  .oui-drawer-panel[data-side=right] {
+    width: min(92vw, var(--oui-drawer-size, 360px));
+    border-radius: 0;
+  }
+  .oui-drawer-panel[data-side=top],
+  .oui-drawer-panel[data-side=bottom] {
+    height: min(88vh, var(--oui-drawer-size, 420px));
+    border-radius: 0;
+  }
+}
+@keyframes ouiDrawerBackdropIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ouiDrawerBackdropOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.oui-data-table-shell {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.oui-data-table-toolbar {
+  display: flex;
+  min-width: 0;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.oui-data-table-toolbar-content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.oui-data-table-toolbar-content > .oui-text-field {
+  flex: 1 1 240px;
+}
+
+.oui-data-table-toolbar-content > .oui-button {
+  flex: 0 0 auto;
+}
+
+.oui-data-table-wrap {
+  --oui-data-table-row-base-bg: var(--oui-data-table-bg, var(--oui-section-solid-bg, var(--oui-bg)));
+  width: 100%;
+  overflow: auto;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-data-table-row-base-bg);
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+}
+
+.oui-data-table-wrap:focus,
+.oui-data-table-wrap:focus-visible {
+  outline: none;
+}
+
+.oui-data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+  table-layout: fixed;
+}
+
+.oui-data-table th,
+.oui-data-table td {
+  padding: var(--oui-table-cell-padding-y, 10px) 12px;
+  border-bottom: 1px solid var(--oui-border);
+  vertical-align: middle;
+}
+
+.oui-data-table th {
+  position: sticky;
+  top: 0;
+  height: var(--oui-table-header-height, 42px);
+  z-index: var(--oui-z-sticky, 20);
+  color: var(--oui-muted);
+  background: color-mix(in srgb, var(--oui-panel) 94%, var(--oui-bg));
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.oui-data-table-header-cell {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.oui-data-table-header-content {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.oui-data-table-resize {
+  position: absolute;
+  top: 0;
+  right: -6px;
+  bottom: 0;
+  z-index: 2;
+  width: 12px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.oui-data-table-resize::after {
+  position: absolute;
+  top: 8px;
+  right: 5px;
+  bottom: 8px;
+  width: 2px;
+  border-radius: 999px;
+  background: transparent;
+  transition: background-color 140ms ease;
+  content: "";
+}
+
+.oui-data-table th:hover .oui-data-table-resize::after,
+.oui-data-table-resize:hover::after,
+.oui-data-table-resize:focus-visible::after,
+.oui-data-table th[data-resizing=true] .oui-data-table-resize::after {
+  background: color-mix(in srgb, var(--oui-brand) 70%, transparent);
+}
+
+.oui-data-table td {
+  color: var(--oui-text);
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table th[data-pinned=left],
+.oui-data-table td[data-pinned=left] {
+  position: sticky;
+  left: var(--oui-data-table-pinned-left-offset, 0px);
+  z-index: calc(var(--oui-z-sticky, 20) + 1);
+}
+
+.oui-data-table th[data-pinned=right],
+.oui-data-table td[data-pinned=right] {
+  position: sticky;
+  right: 0;
+  z-index: calc(var(--oui-z-sticky, 20) + 1);
+}
+
+.oui-data-table th[data-pinned=left],
+.oui-data-table th[data-pinned=right] {
+  background: color-mix(in srgb, var(--oui-panel) 94%, var(--oui-bg));
+}
+
+.oui-data-table td[data-pinned=left],
+.oui-data-table td[data-pinned=right] {
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table tbody tr {
+  --oui-data-table-row-bg: var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table tr[data-clickable=true] {
+  cursor: pointer;
+}
+
+.oui-data-table tbody tr[data-clickable=true]:hover {
+  --oui-data-table-row-bg: var(--oui-pad-hover-bg);
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table tbody tr[data-selected=true] {
+  --oui-data-table-row-bg: var(--oui-selected-bg);
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table tbody tr[data-selected=true]:hover {
+  --oui-data-table-row-bg: color-mix(in srgb, var(--oui-selected-bg) 82%, var(--oui-pad-hover-bg));
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table tbody tr[data-active=true] {
+  outline: 2px solid color-mix(in srgb, var(--oui-brand) 42%, transparent);
+  outline-offset: -2px;
+}
+
+.oui-data-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.oui-data-table-expand-cell {
+  width: 34px;
+  min-width: 34px;
+  max-width: 34px;
+  padding-inline: 0 !important;
+  text-align: center;
+}
+
+.oui-data-table-select-cell {
+  width: 42px;
+  min-width: 42px;
+  max-width: 42px;
+  padding-inline: 0 !important;
+  text-align: center;
+}
+
+.oui-data-table th.oui-data-table-expand-cell,
+.oui-data-table td.oui-data-table-expand-cell {
+  position: sticky;
+  left: 0;
+  z-index: calc(var(--oui-z-sticky, 20) + 2);
+}
+
+.oui-data-table th.oui-data-table-select-cell,
+.oui-data-table td.oui-data-table-select-cell {
+  position: sticky;
+  left: var(--oui-data-table-select-left-offset, 0px);
+  z-index: calc(var(--oui-z-sticky, 20) + 2);
+}
+
+.oui-data-table th.oui-data-table-expand-cell,
+.oui-data-table th.oui-data-table-select-cell {
+  background: color-mix(in srgb, var(--oui-panel) 94%, var(--oui-bg));
+}
+
+.oui-data-table td.oui-data-table-expand-cell,
+.oui-data-table td.oui-data-table-select-cell {
+  background: linear-gradient(var(--oui-data-table-row-bg), var(--oui-data-table-row-bg)), var(--oui-data-table-row-base-bg);
+}
+
+.oui-data-table-select-control {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.oui-data-table-select-cell .oui-checkbox {
+  justify-content: center;
+}
+
+.oui-data-table-sort {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  border-radius: var(--oui-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 0;
+  text-align: inherit;
+  transition: color 180ms ease;
+}
+
+.oui-data-table-sort-label {
+  display: inline-flex;
+  min-width: 0;
+  min-height: 24px;
+  align-items: center;
+  border-radius: var(--oui-radius-sm);
+  padding: 0 4px;
+  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
+}
+
+.oui-data-table-sort:hover .oui-data-table-sort-label {
+  background: color-mix(in srgb, var(--oui-pad-hover-bg) 72%, transparent);
+  color: var(--oui-text);
+}
+
+.oui-data-table-sort:focus-visible {
+  outline: none;
+}
+
+.oui-data-table-sort:focus-visible .oui-data-table-sort-label {
+  background: color-mix(in srgb, var(--oui-pad-hover-bg) 72%, transparent);
+  box-shadow: var(--oui-ring);
+}
+
+.oui-data-table-sort[data-active=true] {
+  color: var(--oui-brand-strong);
+}
+
+.oui-data-table-sort-placeholder {
+  width: 13px;
+  height: 13px;
+}
+
+.oui-data-table-expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: var(--oui-radius-sm);
+  background: transparent;
+  color: var(--oui-muted);
+  cursor: pointer;
+}
+
+.oui-data-table-expand:hover {
+  background: var(--oui-control-hover-bg);
+  color: var(--oui-text);
+}
+
+.oui-data-table-wrap::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.oui-data-table-wrap::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.oui-data-table-wrap::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-clip: content-box;
+}
+
+.oui-data-table-wrap::-webkit-scrollbar-thumb:hover {
+  background-color: var(--oui-border-strong);
+}
+
+.oui-data-table-group-row td {
+  background: var(--oui-pad-bg);
+  color: var(--oui-muted);
+  font-size: 12px;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.oui-data-table-expanded-row td {
+  background: var(--oui-section-nested-surface-bg);
+}
+
+.oui-data-table-message {
+  display: flex;
+  min-height: 112px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--oui-muted);
+  text-align: center;
+}
+
+.oui-data-table-next-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+.oui-data-table-column-settings {
+  width: min(320px, 100vw - 24px);
+}
+
+.oui-data-table-column-settings-head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 4px 8px;
+}
+
+.oui-data-table-settings-reset {
+  flex: 0 0 auto;
+}
+
+.oui-data-table-column-settings-list {
+  display: flex;
+  max-height: min(42vh, 360px);
+  flex-direction: column;
+  gap: 3px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.oui-data-table-column-settings-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-radius: var(--oui-radius-sm);
+  padding: 6px 8px;
+}
+
+.oui-data-table-column-settings-row:hover {
+  background: var(--oui-control-hover-bg);
+}
+
+.oui-data-table-column-toggle {
+  display: inline-flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 8px;
+  color: var(--oui-text);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.oui-data-table-column-toggle > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-data-table-column-settings-order {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 2px;
+}
+
+.oui-data-table-column-settings-order button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: var(--oui-radius-sm);
+  background: transparent;
+  color: var(--oui-muted);
+  cursor: pointer;
+}
+
+.oui-data-table-column-settings-order button:hover,
+.oui-data-table-column-settings-order button:focus-visible {
+  background: var(--oui-pad-hover-bg);
+  color: var(--oui-text);
+  outline: none;
+}
+
+.oui-data-table-column-settings-order button:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.oui-data-table-virtual-spacer td {
+  padding: 0;
+  border-bottom: 0;
+}
+
+.oui-data-table-sentinel td {
+  padding: 0;
+  border-bottom: 0;
+}
+
+.oui-scroll-area {
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.oui-scroll-area-viewport {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+}
+
+.oui-scroll-area-highlight-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: calc(var(--oui-z-sticky, 20) + 10);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.oui-scroll-area-highlight-overlay > .oui-highlight-top {
+  top: 0;
+}
+
+.oui-scroll-area-highlight-overlay > .oui-highlight-bottom {
+  bottom: 0;
+}
+
+.oui-scroll-area-viewport::-webkit-scrollbar,
+.oui-combobox-scroll::-webkit-scrollbar,
+.oui-modal-body::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.oui-scroll-area-viewport::-webkit-scrollbar-track,
+.oui-combobox-scroll::-webkit-scrollbar-track,
+.oui-modal-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.oui-scroll-area-viewport::-webkit-scrollbar-thumb,
+.oui-combobox-scroll::-webkit-scrollbar-thumb,
+.oui-modal-body::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-clip: content-box;
+}
+
+.oui-scroll-area-viewport::-webkit-scrollbar-thumb:hover,
+.oui-combobox-scroll::-webkit-scrollbar-thumb:hover,
+.oui-modal-body::-webkit-scrollbar-thumb:hover {
+  background-color: var(--oui-border-strong);
+}
+
+.oui-highlight {
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: var(--oui-highlight-height, 32px);
+  opacity: 1;
+  pointer-events: none;
+  transition: opacity 120ms linear;
+}
+
+.oui-highlight-top {
+  top: 0;
+  background: linear-gradient(to bottom, var(--oui-highlight-color, var(--oui-bg)) 0%, transparent 100%);
+}
+
+.oui-highlight-bottom {
+  bottom: 0;
+  background: linear-gradient(to top, var(--oui-highlight-color, var(--oui-bg)) 0%, transparent 100%);
+}
+
+.oui-separator {
+  flex: 0 0 auto;
+  background: var(--oui-border);
+}
+
+.oui-separator[data-orientation=horizontal] {
+  width: 100%;
+  height: 1px;
+}
+
+.oui-separator[data-orientation=vertical] {
+  width: 1px;
+  align-self: stretch;
+}
+
+.oui-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 999px;
+  animation: ouiSpin 700ms linear infinite;
+}
+
+.oui-spinner[data-size="1"] {
+  width: 12px;
+  height: 12px;
+}
+
+.oui-spinner[data-size="2"] {
+  width: 14px;
+  height: 14px;
+}
+
+.oui-spinner[data-size="4"] {
+  width: 20px;
+  height: 20px;
+}
+
+.oui-skeleton {
+  display: block;
+  min-height: 12px;
+  border-radius: var(--oui-radius-sm);
+  background: color-mix(in srgb, var(--oui-pad-bg, var(--oui-section-bg)) var(--oui-pad-opacity, var(--oui-section-opacity)), transparent);
+  overflow: hidden;
+  position: relative;
+}
+
+.oui-skeleton::after {
+  animation: ouiSkeleton 1500ms linear infinite;
+  background: linear-gradient(90deg, transparent 0%, var(--oui-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%, transparent 100%);
+  content: "";
+  inset: 0;
+  position: absolute;
+  transform: translateX(-100%);
+}
+
+.oui-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap;
+}
+
+.oui-status-badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;
+  background: var(--oui-soft);
+  color: var(--oui-text);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 5px 8px;
+}
+
+.oui-status-badge[data-tone=success] {
+  color: var(--oui-success);
+  background: var(--oui-success-soft);
+}
+
+.oui-status-badge[data-tone=warning] {
+  color: var(--oui-warning);
+  background: var(--oui-warning-soft);
+}
+
+.oui-status-badge[data-tone=danger] {
+  color: var(--oui-danger);
+  background: var(--oui-danger-soft);
+}
+
+.oui-status-badge[data-tone=info] {
+  color: var(--oui-info);
+  background: var(--oui-info-soft);
+}
+
+.oui-workflow-summary {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-workflow-summary .oui-badge strong {
+  font-weight: 800;
+}
+
+.oui-timeline {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-timeline-item {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 10px;
+}
+
+.oui-timeline-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  margin-top: 5px;
+  border-radius: 999px;
+  background: var(--oui-brand);
+  box-shadow: 0 0 0 4px var(--oui-brand-soft);
+  color: var(--oui-brand-strong);
+  font-size: 10px;
+}
+
+.oui-timeline-item[data-tone=success] .oui-timeline-marker {
+  background: var(--oui-success);
+  box-shadow: 0 0 0 4px var(--oui-success-soft);
+}
+
+.oui-timeline-item[data-tone=warning] .oui-timeline-marker {
+  background: var(--oui-warning);
+  box-shadow: 0 0 0 4px var(--oui-warning-soft);
+}
+
+.oui-timeline-item[data-tone=danger] .oui-timeline-marker {
+  background: var(--oui-danger);
+  box-shadow: 0 0 0 4px var(--oui-danger-soft);
+}
+
+.oui-timeline-item[data-tone=info] .oui-timeline-marker {
+  background: var(--oui-info);
+  box-shadow: 0 0 0 4px var(--oui-info-soft);
+}
+
+.oui-timeline-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.oui-timeline-time {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+.oui-pipeline {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.oui-pipeline > .oui-tooltip-trigger {
+  display: inline-flex;
+  min-width: var(--oui-pipeline-step-min-width, 130px);
+  flex: 1 1 140px;
+}
+
+.oui-pipeline-step {
+  appearance: none;
+  display: flex;
+  min-width: var(--oui-pipeline-step-min-width, 130px);
+  flex: 1 1 140px;
+  align-items: flex-start;
+  gap: 8px;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+  background: var(--oui-pad-bg);
+  color: var(--oui-text);
+  cursor: default;
+  font: inherit;
+  padding: 9px 10px;
+  text-align: left;
+}
+
+.oui-pipeline-step[data-clickable=true] {
+  cursor: pointer;
+}
+
+.oui-pipeline-step[data-clickable=true]:hover {
+  background: var(--oui-control-hover-bg);
+}
+
+.oui-pipeline-step:focus-visible {
+  outline: none;
+  box-shadow: var(--oui-ring);
+}
+
+.oui-pipeline-step:disabled {
+  opacity: 0.68;
+}
+
+.oui-pipeline-step[data-loading=true] {
+  cursor: progress;
+}
+
+.oui-pipeline-step[data-active=true] {
+  border-color: color-mix(in srgb, var(--oui-brand) 48%, var(--oui-border));
+  background: var(--oui-brand-soft);
+}
+
+.oui-pipeline-step[data-status=done] {
+  border-color: color-mix(in srgb, var(--oui-success) 42%, var(--oui-border));
+}
+
+.oui-pipeline-step[data-status=blocked] {
+  border-color: color-mix(in srgb, var(--oui-warning) 42%, var(--oui-border));
+}
+
+.oui-pipeline-step[data-status=error] {
+  border-color: color-mix(in srgb, var(--oui-danger) 42%, var(--oui-border));
+}
+
+.oui-pipeline-step[data-status=processing] .oui-pipeline-dot svg {
+  animation: ouiSpin 900ms linear infinite;
+}
+
+.oui-pipeline-dot {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--oui-soft);
+  color: var(--oui-muted);
+}
+
+.oui-pipeline-step[data-tone=success] .oui-pipeline-dot {
+  background: var(--oui-success-soft);
+  color: var(--oui-success);
+}
+
+.oui-pipeline-step[data-tone=warning] .oui-pipeline-dot {
+  background: var(--oui-warning-soft);
+  color: var(--oui-warning);
+}
+
+.oui-pipeline-step[data-tone=danger] .oui-pipeline-dot {
+  background: var(--oui-danger-soft);
+  color: var(--oui-danger);
+}
+
+.oui-pipeline-step[data-tone=info] .oui-pipeline-dot,
+.oui-pipeline-step[data-tone=brand] .oui-pipeline-dot {
+  background: var(--oui-brand-soft);
+  color: var(--oui-brand-strong);
+}
+
+.oui-pipeline-step-main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.oui-pipeline-label,
+.oui-pipeline-step-label {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.oui-pipeline-detail,
+.oui-pipeline-description,
+.oui-pipeline-step-description {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+.oui-pipeline-meta {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+.oui-pipeline-tooltip-wrap,
+.oui-lifecycle-action-tooltip-wrap {
+  display: inline-flex;
+  min-width: 0;
+  flex: 1 1 140px;
+}
+
+.oui-pipeline > .oui-tooltip-trigger > .oui-pipeline-tooltip-wrap {
+  flex: 1 1 auto;
+}
+
+.oui-pipeline-tooltip-wrap > .oui-pipeline-step {
+  width: 100%;
+  height: 100%;
+}
+
+.oui-lifecycle-panel {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-section-surface-bg);
+  padding: 12px;
+}
+
+.oui-lifecycle-panel-head,
+.oui-lifecycle-panel-actions {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.oui-lifecycle-reasons {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.oui-lifecycle-panel-actions {
+  justify-content: flex-end;
+}
+
+.oui-lifecycle-panel-head > span {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+@keyframes ouiOverlayIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes ouiOverlayOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98) translateY(-4px);
+  }
+}
+@keyframes ouiToastIn {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: translate3d(var(--oui-toast-enter-x, 0), var(--oui-toast-enter-y, 0), 0) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes ouiToastOut {
+  from {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(var(--oui-toast-exit-x, 0), var(--oui-toast-exit-y, 0), 0) scale(1);
+  }
+}
+@keyframes ouiToastProgress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes ouiSubmenuIn {
+  from {
+    opacity: 0;
+    transform: translateX(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes ouiSubmenuOut {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-3px) scale(0.985);
+  }
+}
+@keyframes ouiModalZoomBlurIn {
+  from {
+    filter: blur(14px);
+    opacity: 0;
+    transform: scale(0.82);
+  }
+  to {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ouiModalZoomBlurOut {
+  from {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    filter: blur(14px);
+    opacity: 0;
+    transform: scale(0.82);
+  }
+}
+@keyframes ouiModalRiseIn {
+  from {
+    filter: blur(0);
+    opacity: 0;
+    transform: scale(0.92) translateY(14px);
+  }
+  to {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes ouiModalRiseOut {
+  from {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    filter: blur(0);
+    opacity: 0;
+    transform: scale(0.94) translateY(10px);
+  }
+}
+@keyframes ouiModalFadeIn {
+  from {
+    filter: blur(0);
+    opacity: 0;
+    transform: scale(1);
+  }
+  to {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ouiModalFadeOut {
+  from {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    filter: blur(0);
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+@keyframes ouiFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--oui-overlay-opacity, 1);
+  }
+}
+@keyframes ouiFadeOut {
+  from {
+    opacity: var(--oui-overlay-opacity, 1);
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes ouiSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ouiSkeleton {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}