aktion-runtime 0.5.0

package/dist/types/theme/styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Single CSS bundle for the shadow root. Uses CSS custom properties so that
+ * theme switches at the host element propagate without re-rendering.
+ *
+ * Built-in themes additionally hook into `:host([data-rui-theme="..."])`
+ * overrides so that themes can change layout, fonts, animations, etc., not
+ * only color tokens.
+ */
+export declare const componentStyles = "\n:host {\n  display: block;\n  box-sizing: border-box;\n  color: var(--rui-color-text);\n  background: var(--rui-host-bg, var(--rui-color-bg));\n  font-family: var(--rui-font-family);\n  font-weight: var(--rui-font-weight-body);\n  line-height: var(--rui-line-height-body);\n  font-size: var(--rui-font-size-base);\n  /* Surface & semantic */\n  --rui-color-bg: #ffffff;\n  --rui-color-bg-subtle: #f8fafc;\n  --rui-color-surface: #ffffff;\n  --rui-color-surface-muted: #f1f5f9;\n  --rui-color-border: #e2e8f0;\n  --rui-color-border-subtle: rgba(15, 23, 42, 0.08);\n  --rui-color-text: #0f172a;\n  --rui-color-text-muted: #475569;\n  --rui-color-primary: #6366f1;\n  --rui-color-primary-hover: #4f46e5;\n  --rui-color-primary-text: #ffffff;\n  --rui-color-accent: #6366f1;\n  --rui-color-accent-hover: #4f46e5;\n  --rui-color-accent-text: #ffffff;\n  --rui-color-focus-ring: #6366f1;\n  --rui-color-success: #10b981;\n  --rui-color-warning: #f59e0b;\n  --rui-color-danger: #ef4444;\n  --rui-color-info: #06b6d4;\n  /* Typography */\n  --rui-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  --rui-font-family-heading: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  --rui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  --rui-font-size-base: 14px;\n  --rui-font-size-sm: 12px;\n  --rui-font-size-lg: 16px;\n  --rui-font-size-heading: 16px;\n  --rui-font-size-title: 22px;\n  --rui-font-weight-body: 400;\n  --rui-font-weight-heading: 700;\n  --rui-line-height-body: 1.5;\n  --rui-line-height-heading: 1.2;\n  --rui-letter-spacing-heading: 0;\n  --rui-heading-text-transform: none;\n  /* Shape */\n  --rui-radius-xs: 4px;\n  --rui-radius-sm: 6px;\n  --rui-radius-md: 10px;\n  --rui-radius-lg: 16px;\n  --rui-radius-pill: 999px;\n  --rui-radius-button: 6px;\n  --rui-radius-input: 6px;\n  --rui-border-width: 1px;\n  --rui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);\n  --rui-shadow-md: 0 6px 24px rgba(15, 23, 42, 0.08);\n  --rui-shadow-lg: 0 18px 60px rgba(15, 23, 42, 0.12);\n  /* Spacing */\n  --rui-spacing-xs: 4px;\n  --rui-spacing-s: 8px;\n  --rui-spacing-m: 12px;\n  --rui-spacing-l: 20px;\n  --rui-spacing-xl: 32px;\n  /* Buttons */\n  --rui-button-font-weight: 600;\n  --rui-button-text-transform: none;\n  --rui-button-letter-spacing: 0;\n  --rui-button-padding-y: 8px;\n  --rui-button-padding-x: 14px;\n  /* Motion */\n  --rui-transition-duration: 120ms;\n}\n\n* { box-sizing: border-box; }\nbutton { font-family: inherit; font-size: inherit; cursor: pointer; }\ninput, textarea, select, button { color: inherit; font-family: inherit; }\n\n/* Font Awesome icon wrapper used by Icon(...) and every icon-typed prop.\n   The element is given Font Awesome's own classes (fa-solid, fa-house, etc.)\n   so the FA stylesheet does the glyph rendering; .rui-icon only handles\n   sizing + alignment. */\n.rui-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.rui-icon[data-icon-size=\"xs\"] { font-size: 10px; }\n.rui-icon[data-icon-size=\"sm\"] { font-size: 12px; }\n.rui-icon[data-icon-size=\"md\"] { font-size: 14px; }\n.rui-icon[data-icon-size=\"lg\"] { font-size: 18px; }\n.rui-icon[data-icon-size=\"xl\"] { font-size: 24px; }\n\n/* Additional attributes: render the host with no background so it inherits the parent\n   container's color. Useful when embedding inside a themed page where the\n   surrounding chrome already carries the background. The internal cards\n   keep their own surface colors so the UI stays legible. */\n:host([transparent]),\n:host([transparent=\"true\"]) {\n  background: transparent;\n}\n\n.rui-root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n}\n\n.rui-error-banner {\n  border: 1px solid var(--rui-color-danger);\n  background: color-mix(in srgb, var(--rui-color-danger) 8%, transparent);\n  color: var(--rui-color-danger);\n  border-radius: var(--rui-radius-md);\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  font-size: 13px;\n  margin-bottom: var(--rui-spacing-s);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.rui-error-banner[hidden] { display: none; }\n.rui-error-banner ul { margin: 0; padding-left: 18px; }\n\n/* Stack */\n.rui-stack {\n  display: flex;\n  gap: var(--rui-spacing-m);\n}\n.rui-stack[data-direction=\"row\"] { flex-direction: row; }\n.rui-stack[data-direction=\"column\"] { flex-direction: column; }\n.rui-stack[data-gap=\"xs\"] { gap: var(--rui-spacing-xs); }\n.rui-stack[data-gap=\"s\"] { gap: var(--rui-spacing-s); }\n.rui-stack[data-gap=\"m\"] { gap: var(--rui-spacing-m); }\n.rui-stack[data-gap=\"l\"] { gap: var(--rui-spacing-l); }\n.rui-stack[data-gap=\"xl\"] { gap: var(--rui-spacing-xl); }\n.rui-stack[data-align=\"start\"] { align-items: flex-start; }\n.rui-stack[data-align=\"center\"] { align-items: center; }\n.rui-stack[data-align=\"end\"] { align-items: flex-end; }\n.rui-stack[data-align=\"stretch\"] { align-items: stretch; }\n.rui-stack[data-justify=\"start\"] { justify-content: flex-start; }\n.rui-stack[data-justify=\"center\"] { justify-content: center; }\n.rui-stack[data-justify=\"end\"] { justify-content: flex-end; }\n.rui-stack[data-justify=\"between\"] { justify-content: space-between; }\n.rui-stack[data-justify=\"around\"] { justify-content: space-around; }\n.rui-stack[data-justify=\"evenly\"] { justify-content: space-evenly; }\n.rui-stack[data-align-content=\"start\"] { align-content: flex-start; }\n.rui-stack[data-align-content=\"center\"] { align-content: center; }\n.rui-stack[data-align-content=\"end\"] { align-content: flex-end; }\n.rui-stack[data-align-content=\"between\"] { align-content: space-between; }\n.rui-stack[data-align-content=\"around\"] { align-content: space-around; }\n.rui-stack[data-align-content=\"stretch\"] { align-content: stretch; }\n.rui-stack[data-wrap=\"true\"] { flex-wrap: wrap; }\n.rui-stack[data-inline=\"true\"] { display: inline-flex; }\n.rui-stack[data-direction=\"row-reverse\"] { flex-direction: row-reverse; }\n.rui-stack[data-direction=\"column-reverse\"] { flex-direction: column-reverse; }\n.rui-stack[data-padding=\"xs\"] { padding: var(--rui-spacing-xs); }\n.rui-stack[data-padding=\"s\"] { padding: var(--rui-spacing-s); }\n.rui-stack[data-padding=\"m\"] { padding: var(--rui-spacing-m); }\n.rui-stack[data-padding=\"l\"] { padding: var(--rui-spacing-l); }\n.rui-stack[data-padding=\"xl\"] { padding: var(--rui-spacing-xl); }\n.rui-stack[data-direction=\"row\"][data-uniform=\"true\"] > *:not(.rui-stack-item) { flex: 1 1 auto; min-width: 0; }\n.rui-stack[data-direction=\"row-reverse\"][data-uniform=\"true\"] > *:not(.rui-stack-item) { flex: 1 1 auto; min-width: 0; }\n/* Compact inline pills should hug their content, even inside a row Stack\n   that flex-grows its children. Without this they get stretched to fill the\n   leftover space and look like full-width banners. */\n.rui-stack[data-direction=\"row\"] > .rui-tag,\n.rui-stack[data-direction=\"row\"] > .rui-badge,\n.rui-stack[data-direction=\"row\"] > .rui-status-dot,\n.rui-stack[data-direction=\"row\"] > .rui-kbd-group,\n.rui-stack[data-direction=\"row\"] > .rui-icon,\n.rui-stack[data-direction=\"row\"] > .rui-rating,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-tag,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-badge,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-status-dot,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-kbd-group,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-icon,\n.rui-stack[data-direction=\"row-reverse\"] > .rui-rating { flex: 0 0 auto; }\n\n/* StackItem \u2014 per-child flex control inside Stack */\n.rui-stack-item { min-width: 0; }\n.rui-stack-item[data-grow=\"0\"] { flex-grow: 0; }\n.rui-stack-item[data-grow=\"1\"] { flex-grow: 1; }\n.rui-stack-item[data-shrink=\"0\"] { flex-shrink: 0; }\n.rui-stack-item[data-shrink=\"1\"] { flex-shrink: 1; }\n.rui-stack-item[data-basis=\"auto\"] { flex-basis: auto; }\n.rui-stack-item[data-basis=\"0\"] { flex-basis: 0; }\n.rui-stack-item[data-align-self=\"start\"] { align-self: flex-start; }\n.rui-stack-item[data-align-self=\"center\"] { align-self: center; }\n.rui-stack-item[data-align-self=\"end\"] { align-self: flex-end; }\n.rui-stack-item[data-align-self=\"stretch\"] { align-self: stretch; }\n\n/* Section */\n.rui-section { display: flex; flex-direction: column; gap: var(--rui-spacing-s); }\n.rui-section-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: var(--rui-font-size-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n  color: var(--rui-color-text);\n}\n\n/* Card */\n.rui-card {\n  background: var(--rui-color-surface);\n  border: var(--rui-border-width) solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  padding: var(--rui-spacing-l);\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  box-shadow: var(--rui-shadow-sm);\n}\n.rui-card[data-variant=\"elevated\"] { box-shadow: var(--rui-shadow-md); }\n.rui-card[data-variant=\"outlined\"] { box-shadow: none; }\n.rui-card-header { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-card-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: var(--rui-font-size-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n}\n.rui-card-subtitle { margin: 0; color: var(--rui-color-text-muted); font-size: 13px; }\n.rui-card-body { display: flex; flex-direction: column; gap: var(--rui-spacing-m); }\n.rui-card-footer { display: flex; gap: var(--rui-spacing-s); justify-content: flex-end; flex-wrap: wrap; }\n\n/* Header */\n.rui-header { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-header-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: var(--rui-font-size-title);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n}\n.rui-header-subtitle { margin: 0; color: var(--rui-color-text-muted); font-size: 14px; }\n\n/* Text */\n.rui-text { display: inline; }\n.rui-text[data-variant=\"small\"] { font-size: var(--rui-font-size-sm); color: var(--rui-color-text-muted); }\n.rui-text[data-variant=\"small-heavy\"] { font-size: var(--rui-font-size-sm); font-weight: 600; }\n.rui-text[data-variant=\"body\"] { font-size: var(--rui-font-size-base); }\n.rui-text[data-variant=\"body-heavy\"] { font-size: var(--rui-font-size-base); font-weight: 600; }\n.rui-text[data-variant=\"large\"] { font-size: 18px; }\n.rui-text[data-variant=\"large-heavy\"] {\n  font-size: var(--rui-font-size-title);\n  font-family: var(--rui-font-family-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n  display: block;\n}\n.rui-text[data-variant=\"heading\"] {\n  font-size: 20px;\n  font-family: var(--rui-font-family-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n  display: block;\n}\n.rui-text[data-variant=\"title\"] {\n  font-size: calc(var(--rui-font-size-title) + 6px);\n  font-family: var(--rui-font-family-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n  display: block;\n}\n.rui-text[data-color=\"muted\"] { color: var(--rui-color-text-muted); }\n.rui-text[data-color=\"primary\"] { color: var(--rui-color-primary); }\n.rui-text[data-color=\"success\"] { color: var(--rui-color-success); }\n.rui-text[data-color=\"warning\"] { color: var(--rui-color-warning); }\n.rui-text[data-color=\"danger\"] { color: var(--rui-color-danger); }\n\n/* Image */\n.rui-image { margin: 0; display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-image img { max-width: 100%; height: auto; border-radius: var(--rui-radius-md); display: block; }\n.rui-image-caption { color: var(--rui-color-text-muted); font-size: 12px; }\n\n/* Link */\n.rui-link {\n  color: var(--rui-color-accent);\n  text-decoration: none;\n  font-weight: 500;\n  word-break: break-word;\n  transition: color var(--rui-transition-duration) ease;\n}\n.rui-link:hover { color: var(--rui-color-accent-hover); text-decoration: underline; }\n\n/* Routing \u2014 NavLink anchor + Routes outlet. NavLink is a hash-aware anchor\n   that reflects the current route via data-active=\"true\". Routes wraps\n   the matched page so themes can target it without leaking styles into\n   surrounding content. */\n.rui-routes {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  width: 100%;\n}\n.rui-route { display: contents; }\n.rui-nav-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: var(--rui-radius-sm);\n  font-weight: 500;\n  color: var(--rui-color-text);\n  text-decoration: none;\n  background: transparent;\n  border: 1px solid transparent;\n  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;\n}\n.rui-nav-link:hover {\n  background: var(--rui-color-surface-muted);\n  text-decoration: none;\n}\n.rui-nav-link[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 28%, transparent);\n}\n.rui-nav-link[data-variant=\"primary\"] {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n}\n.rui-nav-link[data-variant=\"primary\"]:hover { background: var(--rui-color-primary-hover); }\n.rui-nav-link[data-variant=\"primary\"][data-active=\"true\"] {\n  background: var(--rui-color-primary-hover);\n  border-color: transparent;\n}\n.rui-nav-link[data-variant=\"ghost\"] {\n  background: transparent;\n}\n.rui-nav-link[data-variant=\"ghost\"]:hover {\n  background: var(--rui-color-surface-muted);\n}\n.rui-nav-link[data-variant=\"pill\"] {\n  border-radius: 999px;\n  padding: 6px 14px;\n  background: var(--rui-color-surface-muted);\n}\n.rui-nav-link[data-variant=\"pill\"][data-active=\"true\"] {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  border-color: transparent;\n}\n.rui-nav-link[data-routes-enabled=\"false\"] { opacity: 0.6; }\n.rui-nav-link-icon { display: inline-flex; align-items: center; }\n\n/* Badge & Tag */\n.rui-badge-icon {\n  margin-right: 4px;\n}\n.rui-badge-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rui-spacing-xs);\n}\n\n.rui-badge {\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--rui-radius-pill);\n  padding: 2px 10px;\n  font-size: 12px;\n  font-weight: 600;\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text);\n}\n.rui-badge[data-variant=\"primary\"] { background: var(--rui-color-primary); color: var(--rui-color-primary-text); }\n.rui-badge[data-variant=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 18%, transparent); color: var(--rui-color-success); }\n.rui-badge[data-variant=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 18%, transparent); color: var(--rui-color-warning); }\n.rui-badge[data-variant=\"danger\"] { background: color-mix(in srgb, var(--rui-color-danger) 18%, transparent); color: var(--rui-color-danger); }\n.rui-badge[data-variant=\"info\"] { background: color-mix(in srgb, var(--rui-color-info) 18%, transparent); color: var(--rui-color-info); }\n\n.rui-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  border-radius: var(--rui-radius-pill);\n  padding: 2px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--rui-color-surface-muted);\n  border: 1px solid var(--rui-color-border-subtle);\n}\n.rui-tag[data-size=\"sm\"] { font-size: 11px; padding: 1px 8px; }\n.rui-tag[data-size=\"lg\"] { font-size: 14px; padding: 4px 12px; }\n.rui-tag[data-variant=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 16%, transparent); color: var(--rui-color-success); border-color: transparent; }\n.rui-tag[data-variant=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 16%, transparent); color: var(--rui-color-warning); border-color: transparent; }\n.rui-tag[data-variant=\"danger\"] { background: color-mix(in srgb, var(--rui-color-danger) 16%, transparent); color: var(--rui-color-danger); border-color: transparent; }\n.rui-tag[data-variant=\"primary\"] { background: color-mix(in srgb, var(--rui-color-primary) 16%, transparent); color: var(--rui-color-primary); border-color: transparent; }\n\n/* Alert */\n.rui-alert {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  border: 1px solid var(--rui-color-border);\n}\n.rui-alert-title { font-weight: 600; }\n.rui-alert[data-variant=\"info\"] { background: color-mix(in srgb, var(--rui-color-info) 12%, transparent); border-color: transparent; color: var(--rui-color-info); }\n.rui-alert[data-variant=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 12%, transparent); border-color: transparent; color: var(--rui-color-success); }\n.rui-alert[data-variant=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 12%, transparent); border-color: transparent; color: var(--rui-color-warning); }\n.rui-alert[data-variant=\"danger\"] { background: color-mix(in srgb, var(--rui-color-danger) 12%, transparent); border-color: transparent; color: var(--rui-color-danger); }\n\n/* Skeleton */\n.rui-skeleton { display: flex; flex-direction: column; gap: 6px; }\n.rui-skeleton-line {\n  background: linear-gradient(90deg, var(--rui-color-surface-muted) 0%, color-mix(in srgb, var(--rui-color-surface-muted) 60%, var(--rui-color-bg)) 50%, var(--rui-color-surface-muted) 100%);\n  background-size: 200% 100%;\n  animation: rui-skeleton-shimmer 1.4s ease infinite;\n  border-radius: var(--rui-radius-sm);\n}\n@keyframes rui-skeleton-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* Markdown */\n.rui-markdown { display: flex; flex-direction: column; gap: var(--rui-spacing-s); word-break: break-word; }\n.rui-markdown p { margin: 0; }\n.rui-markdown ul { margin: 0; padding-left: var(--rui-spacing-l); }\n.rui-markdown code {\n  background: var(--rui-color-surface-muted);\n  border-radius: 4px;\n  padding: 0 4px;\n  font-family: var(--rui-font-family-mono);\n  font-size: 0.92em;\n}\n\n/* Divider */\n.rui-divider { border: none; height: var(--rui-border-width); background: var(--rui-color-border); margin: var(--rui-spacing-s) 0; }\n.rui-divider-with-label {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  height: auto;\n  background: none;\n}\n.rui-divider-line { flex: 1; height: var(--rui-border-width); background: var(--rui-color-border); }\n.rui-divider-label { color: var(--rui-color-text-muted); font-size: 12px; }\n\n/* Separator */\n.rui-separator {\n  background: var(--rui-color-border);\n  flex-shrink: 0;\n}\n.rui-separator[data-orientation=\"horizontal\"] {\n  width: 100%;\n  height: var(--rui-border-width);\n  margin: var(--rui-spacing-s) 0;\n}\n.rui-separator[data-orientation=\"vertical\"] {\n  width: var(--rui-border-width);\n  height: auto;\n  align-self: stretch;\n  margin: 0 var(--rui-spacing-s);\n}\n\n/* Steps */\n.rui-steps {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  counter-reset: rui-steps;\n}\n.rui-steps-item {\n  position: relative;\n  padding-left: 44px;\n  counter-increment: rui-steps;\n}\n.rui-steps-item::before {\n  content: counter(rui-steps);\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 28px;\n  height: 28px;\n  border-radius: 999px;\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 13px;\n}\n.rui-steps-title { font-weight: 600; line-height: 28px; }\n.rui-steps-details { color: var(--rui-color-text-muted); font-size: 13px; margin-top: 2px; }\n\n/* TagBlock */\n.rui-tag-block {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rui-spacing-xs);\n}\n\n/* Callout */\n.rui-callout {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n}\n.rui-callout-icon {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 999px;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 13px;\n  background: var(--rui-color-info);\n  color: #ffffff;\n}\n.rui-callout-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n.rui-callout-title { font-weight: 600; }\n.rui-callout-description { color: var(--rui-color-text-muted); font-size: 13px; }\n.rui-callout[data-variant=\"info\"] { background: color-mix(in srgb, var(--rui-color-info) 8%, var(--rui-color-surface)); border-color: color-mix(in srgb, var(--rui-color-info) 30%, transparent); }\n.rui-callout[data-variant=\"info\"] .rui-callout-icon { background: var(--rui-color-info); }\n.rui-callout[data-variant=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 8%, var(--rui-color-surface)); border-color: color-mix(in srgb, var(--rui-color-success) 30%, transparent); }\n.rui-callout[data-variant=\"success\"] .rui-callout-icon { background: var(--rui-color-success); }\n.rui-callout[data-variant=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 10%, var(--rui-color-surface)); border-color: color-mix(in srgb, var(--rui-color-warning) 32%, transparent); }\n.rui-callout[data-variant=\"warning\"] .rui-callout-icon { background: var(--rui-color-warning); }\n.rui-callout[data-variant=\"danger\"], .rui-callout[data-variant=\"error\"] {\n  background: color-mix(in srgb, var(--rui-color-danger) 8%, var(--rui-color-surface));\n  border-color: color-mix(in srgb, var(--rui-color-danger) 32%, transparent);\n}\n.rui-callout[data-variant=\"danger\"] .rui-callout-icon, .rui-callout[data-variant=\"error\"] .rui-callout-icon {\n  background: var(--rui-color-danger);\n}\n.rui-callout[data-variant=\"neutral\"] .rui-callout-icon {\n  background: var(--rui-color-text-muted);\n}\n\n/* CodeBlock */\n.rui-code-block {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface-muted);\n  overflow: hidden;\n  font-size: 13px;\n}\n.rui-code-block-language {\n  font-family: var(--rui-font-family-mono);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--rui-color-text-muted);\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--rui-color-border-subtle);\n}\n.rui-code-block-pre {\n  margin: 0;\n  padding: var(--rui-spacing-m);\n  font-family: var(--rui-font-family-mono);\n  white-space: pre;\n  overflow-x: auto;\n  color: var(--rui-color-text);\n}\n\n/* CheckBoxGroup */\n.rui-checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n}\n.rui-checkbox-group .rui-checkbox-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-s);\n  border: 1px solid var(--rui-color-border-subtle);\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-surface);\n  cursor: pointer;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n.rui-checkbox-group .rui-checkbox-item:hover {\n  border-color: var(--rui-color-border);\n  background: var(--rui-color-surface-muted);\n}\n.rui-checkbox-item-text { display: flex; flex-direction: column; gap: 2px; }\n.rui-checkbox-item-label { font-weight: 500; font-size: 13px; }\n.rui-checkbox-item-description { color: var(--rui-color-text-muted); font-size: 12px; }\n\n/* Tabs */\n.rui-tabs { display: flex; flex-direction: column; gap: var(--rui-spacing-m); }\n.rui-tab-list {\n  display: flex;\n  gap: var(--rui-spacing-xs);\n  border-bottom: 1px solid var(--rui-color-border);\n  flex-wrap: wrap;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n.rui-tab-trigger {\n  border: none;\n  background: transparent;\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  font-weight: 500;\n  color: var(--rui-color-text-muted);\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color 150ms ease, border-color 150ms ease;\n  white-space: nowrap;\n}\n.rui-tab-trigger:hover { color: var(--rui-color-text); }\n.rui-tab-trigger[aria-selected=\"true\"] {\n  color: var(--rui-color-primary);\n  border-bottom-color: var(--rui-color-primary);\n}\n.rui-tab-panels { display: block; }\n.rui-tab-content { display: flex; flex-direction: column; gap: var(--rui-spacing-m); }\n.rui-tab-content[data-active=\"false\"] { display: none; }\n\n/* Accordion */\n.rui-accordion { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-accordion-item {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  overflow: hidden;\n}\n.rui-accordion-trigger {\n  cursor: pointer;\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  font-weight: 600;\n  list-style: none;\n}\n.rui-accordion-body { padding: 0 var(--rui-spacing-m) var(--rui-spacing-m); }\n\n/* Modal */\n.rui-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 23, 42, 0.45);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: var(--rui-spacing-l);\n  z-index: 50;\n}\n.rui-modal-overlay[data-open=\"true\"] { display: flex; }\n.rui-modal {\n  background: var(--rui-color-surface);\n  border-radius: var(--rui-radius-lg);\n  box-shadow: var(--rui-shadow-md);\n  max-width: 480px;\n  width: 100%;\n  padding: var(--rui-spacing-l);\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  max-height: calc(100vh - 2 * var(--rui-spacing-l));\n  overflow-y: auto;\n}\n.rui-modal-header { display: flex;justify-content: space-between; }\n.rui-modal-title { margin: 0; font-size: 18px; }\n.rui-modal-close { background: none; border: none; padding: 5px; margin: 0; cursor: pointer; font-size: 18px; color: var(--rui-color-primary); }\n\n/* Forms */\n.rui-form { display: flex; flex-direction: column; gap: var(--rui-spacing-m); }\n.rui-form-control { display: flex; flex-direction: column; gap: 4px; }\n.rui-form-label { font-size: 13px; font-weight: 600; color: var(--rui-color-text); }\n.rui-form-hint { font-size: 12px; color: var(--rui-color-text-muted); margin: 0; }\n.rui-form-actions {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  justify-content: flex-end;\n  margin-top: var(--rui-spacing-s);\n  flex-wrap: wrap;\n}\n\n.rui-input, .rui-select, .rui-textarea {\n  width: 100%;\n  border: var(--rui-border-width) solid var(--rui-color-border);\n  border-radius: var(--rui-radius-input);\n  padding: 8px 12px;\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  font: inherit;\n  transition: border-color var(--rui-transition-duration) ease, box-shadow var(--rui-transition-duration) ease;\n}\n.rui-input:focus, .rui-select:focus, .rui-textarea:focus {\n  outline: none;\n  border-color: var(--rui-color-focus-ring);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-focus-ring) 22%, transparent);\n}\n.rui-textarea { min-height: 80px; resize: vertical; }\n\n.rui-checkbox, .rui-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  cursor: pointer;\n  font-size: 14px;\n}\n.rui-radio-group { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n\n.rui-button {\n  border: var(--rui-border-width) solid transparent;\n  border-radius: var(--rui-radius-button);\n  padding: var(--rui-button-padding-y) var(--rui-button-padding-x);\n  font-weight: var(--rui-button-font-weight);\n  letter-spacing: var(--rui-button-letter-spacing);\n  text-transform: var(--rui-button-text-transform);\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  transition: background var(--rui-transition-duration) ease, border-color var(--rui-transition-duration) ease, transform var(--rui-transition-duration) ease, box-shadow var(--rui-transition-duration) ease;\n}\n.rui-button-icon {\n  margin-right: 4px;\n}\n.rui-button:hover:not(:disabled) { background: var(--rui-color-primary-hover); }\n.rui-button:disabled { opacity: 0.5; cursor: not-allowed; }\n.rui-button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-focus-ring) 35%, transparent);\n}\n.rui-button[data-variant=\"secondary\"] { background: var(--rui-color-surface); color: var(--rui-color-text); border-color: var(--rui-color-border); }\n.rui-button[data-variant=\"secondary\"]:hover:not(:disabled) { background: var(--rui-color-surface-muted); }\n.rui-button[data-variant=\"ghost\"] { background: transparent; color: var(--rui-color-text); }\n.rui-button[data-variant=\"ghost\"]:hover:not(:disabled) { background: var(--rui-color-surface-muted); }\n.rui-button[data-variant=\"danger\"] { background: var(--rui-color-danger); color: #fff; }\n.rui-button[data-variant=\"danger\"]:hover:not(:disabled) { background: color-mix(in srgb, var(--rui-color-danger) 80%, black); }\n.rui-button[data-size=\"xs\"] { padding: calc(var(--rui-button-padding-y) * 0.45) calc(var(--rui-button-padding-x) * 0.6); font-size: 11px; }\n.rui-button[data-size=\"sm\"],\n.rui-button[data-size=\"small\"] { padding: calc(var(--rui-button-padding-y) * 0.55) calc(var(--rui-button-padding-x) * 0.7); font-size: var(--rui-font-size-sm); }\n.rui-button[data-size=\"lg\"],\n.rui-button[data-size=\"large\"] { padding: calc(var(--rui-button-padding-y) * 1.4) calc(var(--rui-button-padding-x) * 1.3); font-size: var(--rui-font-size-lg); }\n.rui-button[data-size=\"xl\"] { padding: calc(var(--rui-button-padding-y) * 1.6) calc(var(--rui-button-padding-x) * 1.5); font-size: var(--rui-font-size-lg); }\n.rui-button[data-full-width=\"true\"] { width: 100%; }\n.rui-button[data-icon-only=\"true\"] .rui-button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }\n.rui-button[data-icon-position=\"trailing\"] .rui-button-icon { margin-right: 0; margin-left: 4px; order: 2; }\n.rui-button[data-loading=\"true\"] { pointer-events: none; }\n.rui-button-spinner { margin-right: 4px; }\n.rui-button[data-icon-position=\"trailing\"] .rui-button-spinner { margin-right: 0; margin-left: 4px; }\n\n.rui-buttons {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n}\n.rui-buttons[data-direction=\"column\"] { flex-direction: column; align-items: stretch; }\n.rui-buttons[data-direction=\"column\"] > .rui-button { width: 100%; }\n\n/* Table \u2014 wrapper provides horizontal scroll when columns overflow the\n   viewport so tables stay readable on phones and tablets. */\n.rui-table-wrapper {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  max-width: 100%;\n}\n.rui-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n  min-width: max-content;\n}\n.rui-table-caption {\n  text-align: left;\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  font-weight: 600;\n  color: var(--rui-color-text-muted);\n}\n.rui-table th, .rui-table td {\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  text-align: left;\n  border-bottom: 1px solid var(--rui-color-border);\n  white-space: nowrap;\n}\n.rui-table th {\n  background: var(--rui-color-bg-subtle);\n  font-weight: 600;\n  position: sticky;\n  top: 0;\n}\n.rui-table td[data-format=\"number\"], .rui-table td[data-format=\"currency\"] {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.rui-table tbody tr:last-child td { border-bottom: none; }\n.rui-table-empty {\n  text-align: center;\n  color: var(--rui-color-text-muted);\n  padding: var(--rui-spacing-l) !important;\n  white-space: normal;\n}\n\n/* List */\n.rui-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--rui-spacing-s); }\n.rui-list-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-s);\n  border-radius: var(--rui-radius-sm);\n  border: 1px solid var(--rui-color-border-subtle);\n  background: var(--rui-color-surface);\n}\n.rui-list-icon { font-size: 20px; }\n.rui-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.rui-list-title { font-weight: 600; }\n.rui-list-description { color: var(--rui-color-text-muted); font-size: 13px; }\n\n/* StatCard */\n.rui-stat-card {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  padding: var(--rui-spacing-l);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 140px;\n}\n.rui-stat-label-row { display: flex; align-items: center; gap: 6px; }\n.rui-stat-icon {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  color: var(--rui-color-primary);\n  font-size: 16px;\n}\n.rui-stat-label { color: var(--rui-color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }\n.rui-stat-value {\n  font-family: var(--rui-font-family-heading);\n  font-size: 24px;\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n}\n.rui-stat-trend { font-size: 12px; font-weight: 600; }\n.rui-stat-trend[data-trend=\"up\"] { color: var(--rui-color-success); }\n.rui-stat-trend[data-trend=\"down\"] { color: var(--rui-color-danger); }\n\n/* Charts */\n.rui-chart {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-m);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n}\n.rui-chart-title { font-weight: 600; font-size: 14px; }\n.rui-chart-svg { width: 100%; height: auto; max-height: 240px; }\n.rui-chart-svg text { fill: var(--rui-color-text-muted); font-size: 12px; font-family: var(--rui-font-family); }\n.rui-chart-tick { font-size: 10px; }\n.rui-chart-legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rui-spacing-s);\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.rui-chart-legend-swatch { width: 10px; height: 10px; border-radius: 999px; }\n\n/* Chat blocks */\n.rui-section-block {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n}\n.rui-section-block-title { margin: 0; font-size: 16px; font-weight: 600; }\n.rui-section-block-description { margin: 0; color: var(--rui-color-text-muted); font-size: 13px; }\n.rui-list-block { margin: 0; padding-left: var(--rui-spacing-l); }\n.rui-list-block li { margin-bottom: 4px; }\n\n.rui-follow-up { display: flex; flex-direction: column; gap: var(--rui-spacing-s); margin-top: var(--rui-spacing-m); }\n.rui-follow-up-title { font-size: 12px; color: var(--rui-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }\n.rui-follow-up-list { display: flex; flex-wrap: wrap; gap: var(--rui-spacing-s); }\n.rui-follow-up-button {\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  border-radius: 999px;\n  padding: 6px 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 120ms ease;\n  font-family: inherit;\n}\n.rui-follow-up-button:hover { background: var(--rui-color-surface-muted); }\n.rui-action-link {\n  color: var(--rui-color-primary);\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n/* ========================================================================\n   New primitives (shadcn parity): Avatar, AvatarGroup, Progress, Switch,\n   Toggle, ToggleGroup, Tooltip, HoverCard, Kbd, Breadcrumb, Pagination,\n   Sheet, AspectRatio, ScrollArea, Grid.\n   ======================================================================== */\n\n/* Grid \u2014 responsive CSS grid. Auto-fit fallback when no fixed column count. */\n.rui-grid {\n  display: grid;\n  gap: var(--rui-spacing-m);\n  grid-template-columns: repeat(auto-fit, minmax(var(--rui-grid-min-item, 220px), 1fr));\n  width: 100%;\n}\n.rui-grid[data-columns=\"1\"] { grid-template-columns: 1fr; }\n.rui-grid[data-columns=\"2\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"4\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"5\"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"6\"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"7\"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"8\"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"9\"] { grid-template-columns: repeat(9, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"10\"] { grid-template-columns: repeat(10, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"11\"] { grid-template-columns: repeat(11, minmax(0, 1fr)); }\n.rui-grid[data-columns=\"12\"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }\n.rui-grid[data-gap=\"xs\"] { gap: var(--rui-spacing-xs); }\n.rui-grid[data-gap=\"s\"] { gap: var(--rui-spacing-s); }\n.rui-grid[data-gap=\"m\"] { gap: var(--rui-spacing-m); }\n.rui-grid[data-gap=\"l\"] { gap: var(--rui-spacing-l); }\n.rui-grid[data-gap=\"xl\"] { gap: var(--rui-spacing-xl); }\n\n/* Responsive prop maps for Grid columns/gap and Stack direction/gap.\n * Components set --rui-grid-cols-{bp} / --rui-stack-dir-{bp} CSS vars for\n * each requested breakpoint; the cascade picks the most specific value\n * via mobile-first min-width media queries. */\n.rui-grid[data-responsive-cols] {\n  grid-template-columns: repeat(var(--rui-grid-cols-base, 1), minmax(0, 1fr));\n}\n.rui-grid[data-responsive-gap] {\n  gap: var(--rui-grid-gap-base, var(--rui-spacing-m));\n}\n.rui-stack[data-responsive-dir] {\n  flex-direction: var(--rui-stack-dir-base, column);\n}\n.rui-stack[data-responsive-gap] {\n  gap: var(--rui-stack-gap-base, var(--rui-spacing-m));\n}\n.rui-stack[data-responsive-align] {\n  align-items: var(--rui-stack-align-base, stretch);\n}\n.rui-stack[data-responsive-justify] {\n  justify-content: var(--rui-stack-justify-base, flex-start);\n}\n.rui-stack[data-responsive-padding] {\n  padding: var(--rui-stack-padding-base, 0);\n}\n@media (min-width: 640px) {\n  .rui-grid[data-responsive-cols] {\n    grid-template-columns: repeat(var(--rui-grid-cols-sm, var(--rui-grid-cols-base, 1)), minmax(0, 1fr));\n  }\n  .rui-grid[data-responsive-gap] {\n    gap: var(--rui-grid-gap-sm, var(--rui-grid-gap-base, var(--rui-spacing-m)));\n  }\n  .rui-stack[data-responsive-dir] {\n    flex-direction: var(--rui-stack-dir-sm, var(--rui-stack-dir-base, column));\n  }\n  .rui-stack[data-responsive-gap] {\n    gap: var(--rui-stack-gap-sm, var(--rui-stack-gap-base, var(--rui-spacing-m)));\n  }\n  .rui-stack[data-responsive-align] {\n    align-items: var(--rui-stack-align-sm, var(--rui-stack-align-base, stretch));\n  }\n  .rui-stack[data-responsive-justify] {\n    justify-content: var(--rui-stack-justify-sm, var(--rui-stack-justify-base, flex-start));\n  }\n  .rui-stack[data-responsive-padding] {\n    padding: var(--rui-stack-padding-sm, var(--rui-stack-padding-base, 0));\n  }\n}\n@media (min-width: 768px) {\n  .rui-grid[data-responsive-cols] {\n    grid-template-columns: repeat(var(--rui-grid-cols-md, var(--rui-grid-cols-sm, var(--rui-grid-cols-base, 1))), minmax(0, 1fr));\n  }\n  .rui-grid[data-responsive-gap] {\n    gap: var(--rui-grid-gap-md, var(--rui-grid-gap-sm, var(--rui-grid-gap-base, var(--rui-spacing-m))));\n  }\n  .rui-stack[data-responsive-dir] {\n    flex-direction: var(--rui-stack-dir-md, var(--rui-stack-dir-sm, var(--rui-stack-dir-base, column)));\n  }\n  .rui-stack[data-responsive-gap] {\n    gap: var(--rui-stack-gap-md, var(--rui-stack-gap-sm, var(--rui-stack-gap-base, var(--rui-spacing-m))));\n  }\n  .rui-stack[data-responsive-align] {\n    align-items: var(--rui-stack-align-md, var(--rui-stack-align-sm, var(--rui-stack-align-base, stretch)));\n  }\n  .rui-stack[data-responsive-justify] {\n    justify-content: var(--rui-stack-justify-md, var(--rui-stack-justify-sm, var(--rui-stack-justify-base, flex-start)));\n  }\n  .rui-stack[data-responsive-padding] {\n    padding: var(--rui-stack-padding-md, var(--rui-stack-padding-sm, var(--rui-stack-padding-base, 0)));\n  }\n}\n@media (min-width: 1024px) {\n  .rui-grid[data-responsive-cols] {\n    grid-template-columns: repeat(var(--rui-grid-cols-lg, var(--rui-grid-cols-md, var(--rui-grid-cols-sm, var(--rui-grid-cols-base, 1)))), minmax(0, 1fr));\n  }\n  .rui-grid[data-responsive-gap] {\n    gap: var(--rui-grid-gap-lg, var(--rui-grid-gap-md, var(--rui-grid-gap-sm, var(--rui-grid-gap-base, var(--rui-spacing-m)))));\n  }\n  .rui-stack[data-responsive-dir] {\n    flex-direction: var(--rui-stack-dir-lg, var(--rui-stack-dir-md, var(--rui-stack-dir-sm, var(--rui-stack-dir-base, column))));\n  }\n  .rui-stack[data-responsive-gap] {\n    gap: var(--rui-stack-gap-lg, var(--rui-stack-gap-md, var(--rui-stack-gap-sm, var(--rui-stack-gap-base, var(--rui-spacing-m)))));\n  }\n  .rui-stack[data-responsive-align] {\n    align-items: var(--rui-stack-align-lg, var(--rui-stack-align-md, var(--rui-stack-align-sm, var(--rui-stack-align-base, stretch))));\n  }\n  .rui-stack[data-responsive-justify] {\n    justify-content: var(--rui-stack-justify-lg, var(--rui-stack-justify-md, var(--rui-stack-justify-sm, var(--rui-stack-justify-base, flex-start))));\n  }\n  .rui-stack[data-responsive-padding] {\n    padding: var(--rui-stack-padding-lg, var(--rui-stack-padding-md, var(--rui-stack-padding-sm, var(--rui-stack-padding-base, 0))));\n  }\n}\n@media (min-width: 1280px) {\n  .rui-grid[data-responsive-cols] {\n    grid-template-columns: repeat(var(--rui-grid-cols-xl, var(--rui-grid-cols-lg, var(--rui-grid-cols-md, var(--rui-grid-cols-sm, var(--rui-grid-cols-base, 1))))), minmax(0, 1fr));\n  }\n  .rui-grid[data-responsive-gap] {\n    gap: var(--rui-grid-gap-xl, var(--rui-grid-gap-lg, var(--rui-grid-gap-md, var(--rui-grid-gap-sm, var(--rui-grid-gap-base, var(--rui-spacing-m))))));\n  }\n  .rui-stack[data-responsive-dir] {\n    flex-direction: var(--rui-stack-dir-xl, var(--rui-stack-dir-lg, var(--rui-stack-dir-md, var(--rui-stack-dir-sm, var(--rui-stack-dir-base, column)))));\n  }\n  .rui-stack[data-responsive-gap] {\n    gap: var(--rui-stack-gap-xl, var(--rui-stack-gap-lg, var(--rui-stack-gap-md, var(--rui-stack-gap-sm, var(--rui-stack-gap-base, var(--rui-spacing-m))))));\n  }\n  .rui-stack[data-responsive-align] {\n    align-items: var(--rui-stack-align-xl, var(--rui-stack-align-lg, var(--rui-stack-align-md, var(--rui-stack-align-sm, var(--rui-stack-align-base, stretch)))));\n  }\n  .rui-stack[data-responsive-justify] {\n    justify-content: var(--rui-stack-justify-xl, var(--rui-stack-justify-lg, var(--rui-stack-justify-md, var(--rui-stack-justify-sm, var(--rui-stack-justify-base, flex-start)))));\n  }\n  .rui-stack[data-responsive-padding] {\n    padding: var(--rui-stack-padding-xl, var(--rui-stack-padding-lg, var(--rui-stack-padding-md, var(--rui-stack-padding-sm, var(--rui-stack-padding-base, 0)))));\n  }\n}\n\n/* Grid \u2014 12-column mode + GridItem spans */\n.rui-grid[data-grid-mode=\"12\"] {\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.rui-grid[data-grid-mode=\"12\"][data-min-child-width] {\n  grid-template-columns: repeat(12, minmax(var(--rui-grid-min-child, 0), 1fr));\n}\n.rui-grid[data-columns][data-min-child-width]:not([data-grid-mode=\"12\"]) {\n  grid-template-columns: repeat(var(--rui-grid-col-count, 1), minmax(var(--rui-grid-min-child, 220px), 1fr));\n}\n.rui-grid[data-columns=\"1\"][data-min-child-width] { --rui-grid-col-count: 1; }\n.rui-grid[data-columns=\"2\"][data-min-child-width] { --rui-grid-col-count: 2; }\n.rui-grid[data-columns=\"3\"][data-min-child-width] { --rui-grid-col-count: 3; }\n.rui-grid[data-columns=\"4\"][data-min-child-width] { --rui-grid-col-count: 4; }\n.rui-grid[data-columns=\"5\"][data-min-child-width] { --rui-grid-col-count: 5; }\n.rui-grid[data-columns=\"6\"][data-min-child-width] { --rui-grid-col-count: 6; }\n.rui-grid[data-columns=\"7\"][data-min-child-width] { --rui-grid-col-count: 7; }\n.rui-grid[data-columns=\"8\"][data-min-child-width] { --rui-grid-col-count: 8; }\n.rui-grid[data-columns=\"9\"][data-min-child-width] { --rui-grid-col-count: 9; }\n.rui-grid[data-columns=\"10\"][data-min-child-width] { --rui-grid-col-count: 10; }\n.rui-grid[data-columns=\"11\"][data-min-child-width] { --rui-grid-col-count: 11; }\n.rui-grid[data-columns=\"12\"][data-min-child-width] { --rui-grid-col-count: 12; }\n.rui-grid[data-row-gap=\"xs\"] { row-gap: var(--rui-spacing-xs); }\n.rui-grid[data-row-gap=\"s\"] { row-gap: var(--rui-spacing-s); }\n.rui-grid[data-row-gap=\"m\"] { row-gap: var(--rui-spacing-m); }\n.rui-grid[data-row-gap=\"l\"] { row-gap: var(--rui-spacing-l); }\n.rui-grid[data-row-gap=\"xl\"] { row-gap: var(--rui-spacing-xl); }\n.rui-grid[data-column-gap=\"xs\"] { column-gap: var(--rui-spacing-xs); }\n.rui-grid[data-column-gap=\"s\"] { column-gap: var(--rui-spacing-s); }\n.rui-grid[data-column-gap=\"m\"] { column-gap: var(--rui-spacing-m); }\n.rui-grid[data-column-gap=\"l\"] { column-gap: var(--rui-spacing-l); }\n.rui-grid[data-column-gap=\"xl\"] { column-gap: var(--rui-spacing-xl); }\n.rui-grid[data-align-items=\"start\"] { align-items: start; }\n.rui-grid[data-align-items=\"center\"] { align-items: center; }\n.rui-grid[data-align-items=\"end\"] { align-items: end; }\n.rui-grid[data-align-items=\"stretch\"] { align-items: stretch; }\n.rui-grid[data-justify-items=\"start\"] { justify-items: start; }\n.rui-grid[data-justify-items=\"center\"] { justify-items: center; }\n.rui-grid[data-justify-items=\"end\"] { justify-items: end; }\n.rui-grid[data-justify-items=\"stretch\"] { justify-items: stretch; }\n.rui-grid[data-dense=\"true\"] { grid-auto-flow: dense; }\n.rui-grid-item {\n  grid-column: span var(--rui-grid-item-span, 1);\n  min-width: 0;\n}\n.rui-grid-item[data-offset] {\n  grid-column-start: calc(var(--rui-grid-item-offset, 0) + 1);\n  grid-column-end: span var(--rui-grid-item-span, 1);\n}\n.rui-grid-item[data-responsive-span] {\n  grid-column: span var(--rui-grid-item-span-base, var(--rui-grid-item-span, 1));\n}\n@media (min-width: 640px) {\n  .rui-grid-item[data-responsive-span] {\n    grid-column: span var(--rui-grid-item-span-sm, var(--rui-grid-item-span-base, var(--rui-grid-item-span, 1)));\n  }\n}\n@media (min-width: 768px) {\n  .rui-grid-item[data-responsive-span] {\n    grid-column: span var(--rui-grid-item-span-md, var(--rui-grid-item-span-sm, var(--rui-grid-item-span-base, var(--rui-grid-item-span, 1))));\n  }\n}\n@media (min-width: 1024px) {\n  .rui-grid-item[data-responsive-span] {\n    grid-column: span var(--rui-grid-item-span-lg, var(--rui-grid-item-span-md, var(--rui-grid-item-span-sm, var(--rui-grid-item-span-base, var(--rui-grid-item-span, 1)))));\n  }\n}\n@media (min-width: 1280px) {\n  .rui-grid-item[data-responsive-span] {\n    grid-column: span var(--rui-grid-item-span-xl, var(--rui-grid-item-span-lg, var(--rui-grid-item-span-md, var(--rui-grid-item-span-sm, var(--rui-grid-item-span-base, var(--rui-grid-item-span, 1))))));\n  }\n}\n\n/* Box \u2014 spacing / surface wrapper */\n.rui-box { box-sizing: border-box; }\n.rui-box[data-padding=\"xs\"] { padding: var(--rui-spacing-xs); }\n.rui-box[data-padding=\"s\"] { padding: var(--rui-spacing-s); }\n.rui-box[data-padding=\"m\"] { padding: var(--rui-spacing-m); }\n.rui-box[data-padding=\"l\"] { padding: var(--rui-spacing-l); }\n.rui-box[data-padding=\"xl\"] { padding: var(--rui-spacing-xl); }\n.rui-box[data-margin=\"xs\"] { margin: var(--rui-spacing-xs); }\n.rui-box[data-margin=\"s\"] { margin: var(--rui-spacing-s); }\n.rui-box[data-margin=\"m\"] { margin: var(--rui-spacing-m); }\n.rui-box[data-margin=\"l\"] { margin: var(--rui-spacing-l); }\n.rui-box[data-margin=\"xl\"] { margin: var(--rui-spacing-xl); }\n.rui-box[data-border=\"subtle\"] { border: 1px solid color-mix(in srgb, var(--rui-color-border) 60%, transparent); border-radius: var(--rui-radius-md); }\n.rui-box[data-border=\"default\"] { border: 1px solid var(--rui-color-border); border-radius: var(--rui-radius-md); }\n.rui-box[data-background=\"surface\"] { background: var(--rui-color-surface); }\n.rui-box[data-background=\"muted\"] { background: var(--rui-color-surface-muted); }\n.rui-box[data-background=\"primary\"] { background: color-mix(in srgb, var(--rui-color-primary) 10%, var(--rui-color-surface)); }\n.rui-box[data-background=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 10%, var(--rui-color-surface)); }\n.rui-box[data-background=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 12%, var(--rui-color-surface)); }\n.rui-box[data-background=\"danger\"] { background: color-mix(in srgb, var(--rui-color-danger) 10%, var(--rui-color-surface)); }\n.rui-box[data-background=\"info\"] { background: color-mix(in srgb, var(--rui-color-info) 10%, var(--rui-color-surface)); }\n.rui-box[data-responsive-padding] { padding: var(--rui-box-padding-base, 0); }\n.rui-box[data-responsive-margin] { margin: var(--rui-box-margin-base, 0); }\n@media (min-width: 640px) {\n  .rui-box[data-responsive-padding] { padding: var(--rui-box-padding-sm, var(--rui-box-padding-base, 0)); }\n  .rui-box[data-responsive-margin] { margin: var(--rui-box-margin-sm, var(--rui-box-margin-base, 0)); }\n}\n@media (min-width: 768px) {\n  .rui-box[data-responsive-padding] { padding: var(--rui-box-padding-md, var(--rui-box-padding-sm, var(--rui-box-padding-base, 0))); }\n  .rui-box[data-responsive-margin] { margin: var(--rui-box-margin-md, var(--rui-box-margin-sm, var(--rui-box-margin-base, 0))); }\n}\n@media (min-width: 1024px) {\n  .rui-box[data-responsive-padding] { padding: var(--rui-box-padding-lg, var(--rui-box-padding-md, var(--rui-box-padding-sm, var(--rui-box-padding-base, 0)))); }\n  .rui-box[data-responsive-margin] { margin: var(--rui-box-margin-lg, var(--rui-box-margin-md, var(--rui-box-margin-sm, var(--rui-box-margin-base, 0)))); }\n}\n@media (min-width: 1280px) {\n  .rui-box[data-responsive-padding] { padding: var(--rui-box-padding-xl, var(--rui-box-padding-lg, var(--rui-box-padding-md, var(--rui-box-padding-sm, var(--rui-box-padding-base, 0))))); }\n  .rui-box[data-responsive-margin] { margin: var(--rui-box-margin-xl, var(--rui-box-margin-lg, var(--rui-box-margin-md, var(--rui-box-margin-sm, var(--rui-box-margin-base, 0))))); }\n}\n\n/* AspectRatio */\n.rui-aspect-ratio {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface-muted);\n}\n.rui-aspect-ratio > * {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n\n/* ScrollArea */\n.rui-scroll-area {\n  overflow: auto;\n  border-radius: var(--rui-radius-sm);\n  scrollbar-width: thin;\n  scrollbar-color: var(--rui-color-border) transparent;\n}\n.rui-scroll-area[data-direction=\"vertical\"] { overflow-x: hidden; }\n.rui-scroll-area[data-direction=\"horizontal\"] { overflow-y: hidden; }\n.rui-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }\n.rui-scroll-area::-webkit-scrollbar-thumb {\n  background: var(--rui-color-border);\n  border-radius: 999px;\n}\n.rui-scroll-area::-webkit-scrollbar-track { background: transparent; }\n\n/* Avatar */\n.rui-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text);\n  font-weight: 600;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n  user-select: none;\n}\n.rui-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rui-avatar-fallback {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--rui-color-primary) 14%, var(--rui-color-surface-muted)),\n    color-mix(in srgb, var(--rui-color-primary) 30%, var(--rui-color-surface-muted)));\n  color: color-mix(in srgb, var(--rui-color-primary) 90%, var(--rui-color-text));\n}\n.rui-avatar[data-size=\"sm\"] { width: 24px; height: 24px; font-size: 10px; }\n.rui-avatar[data-size=\"md\"] { width: 36px; height: 36px; font-size: 13px; }\n.rui-avatar[data-size=\"lg\"] { width: 52px; height: 52px; font-size: 18px; }\n.rui-avatar[data-size=\"xl\"] { width: 72px; height: 72px; font-size: 22px; }\n.rui-avatar-status {\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  width: 25%;\n  height: 25%;\n  min-width: 8px;\n  min-height: 8px;\n  border-radius: 999px;\n  border: 2px solid var(--rui-color-surface);\n  background: var(--rui-color-text-muted);\n}\n.rui-avatar-status[data-status=\"online\"] { background: var(--rui-color-success); }\n.rui-avatar-status[data-status=\"busy\"] { background: var(--rui-color-danger); }\n.rui-avatar-status[data-status=\"away\"] { background: var(--rui-color-warning); }\n.rui-avatar-status[data-status=\"offline\"] { background: var(--rui-color-text-muted); }\n\n/* AvatarGroup \u2014 overlapping pile with ring border. */\n.rui-avatar-group {\n  display: inline-flex;\n  align-items: center;\n}\n.rui-avatar-group > .rui-avatar {\n  border: 2px solid var(--rui-color-surface);\n  margin-left: -8px;\n}\n.rui-avatar-group > .rui-avatar:first-child { margin-left: 0; }\n.rui-avatar-group[data-size=\"sm\"] > .rui-avatar { margin-left: -6px; }\n.rui-avatar-group[data-size=\"lg\"] > .rui-avatar { margin-left: -12px; }\n.rui-avatar-overflow .rui-avatar-fallback {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text-muted);\n}\n\n/* Progress */\n.rui-progress {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 100%;\n}\n.rui-progress-head {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-progress-label { font-weight: 500; }\n.rui-progress-value { font-variant-numeric: tabular-nums; }\n.rui-progress-track {\n  width: 100%;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--rui-color-surface-muted);\n  overflow: hidden;\n}\n.rui-progress-bar {\n  height: 100%;\n  background: var(--rui-color-primary);\n  border-radius: inherit;\n  transition: width 220ms ease;\n}\n.rui-progress[data-tone=\"success\"] .rui-progress-bar { background: var(--rui-color-success); }\n.rui-progress[data-tone=\"warning\"] .rui-progress-bar { background: var(--rui-color-warning); }\n.rui-progress[data-tone=\"danger\"] .rui-progress-bar { background: var(--rui-color-danger); }\n.rui-progress[data-tone=\"info\"] .rui-progress-bar { background: var(--rui-color-info); }\n.rui-progress-track[data-indeterminate=\"true\"] .rui-progress-bar {\n  width: 40%;\n  animation: rui-progress-indeterminate 1.4s ease-in-out infinite;\n}\n@keyframes rui-progress-indeterminate {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(250%); }\n}\n\n/* Switch */\n.rui-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  cursor: pointer;\n  user-select: none;\n}\n.rui-switch[data-disabled=\"true\"] { opacity: 0.5; cursor: not-allowed; }\n.rui-switch-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n}\n.rui-switch-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--rui-color-surface-muted);\n  border: 1px solid var(--rui-color-border);\n  position: relative;\n  transition: background 160ms ease, border-color 160ms ease;\n  flex-shrink: 0;\n}\n.rui-switch-thumb {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 16px;\n  height: 16px;\n  background: var(--rui-color-surface);\n  border-radius: 999px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);\n  transition: transform 180ms cubic-bezier(0.5, 0.05, 0.5, 1.2);\n}\n.rui-switch-input:checked + .rui-switch-track {\n  background: var(--rui-color-primary);\n  border-color: var(--rui-color-primary);\n}\n.rui-switch-input:checked + .rui-switch-track .rui-switch-thumb { transform: translateX(16px); }\n.rui-switch-input:focus-visible + .rui-switch-track {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 25%, transparent);\n}\n.rui-switch-meta { display: flex; flex-direction: column; gap: 2px; }\n.rui-switch-label { font-weight: 500; font-size: 14px; }\n.rui-switch-description { font-size: 12px; color: var(--rui-color-text-muted); }\n\n/* Toggle (single + group) */\n.rui-toggle {\n  border: 1px solid transparent;\n  border-radius: var(--rui-radius-sm);\n  background: transparent;\n  color: var(--rui-color-text);\n  padding: 6px 12px;\n  font: inherit;\n  font-weight: 500;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;\n}\n.rui-toggle[data-size=\"sm\"] { padding: 4px 8px; font-size: 12px; }\n.rui-toggle[data-size=\"lg\"] { padding: 9px 16px; font-size: 15px; }\n.rui-toggle[data-variant=\"outline\"] {\n  border-color: var(--rui-color-border);\n  background: var(--rui-color-surface);\n}\n.rui-toggle[data-variant=\"ghost\"] { background: transparent; }\n.rui-toggle:hover:not([data-state=\"on\"]) { background: var(--rui-color-surface-muted); }\n.rui-toggle[data-state=\"on\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 32%, transparent);\n}\n.rui-toggle-icon { display: inline-flex; align-items: center; }\n.rui-toggle-group {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 0;\n  border-radius: var(--rui-radius-sm);\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  padding: 2px;\n}\n.rui-toggle-group .rui-toggle {\n  border: none;\n  border-radius: calc(var(--rui-radius-sm) - 2px);\n  background: transparent;\n}\n.rui-toggle-group .rui-toggle[data-state=\"on\"] {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-primary);\n}\n\n/* Tooltip \u2014 CSS-only hover/focus reveal. */\n.rui-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n}\n.rui-tooltip-trigger { display: contents; }\n.rui-tooltip-content {\n  position: absolute;\n  padding: 4px 8px;\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-text);\n  color: var(--rui-color-bg);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  max-width: 240px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 140ms ease, transform 140ms ease;\n  z-index: 30;\n  box-shadow: var(--rui-shadow-sm);\n}\n.rui-tooltip[data-side=\"top\"] .rui-tooltip-content { bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); }\n.rui-tooltip[data-side=\"bottom\"] .rui-tooltip-content { top: calc(100% + 6px); left: 50%; transform: translate(-50%, -4px); }\n.rui-tooltip[data-side=\"left\"] .rui-tooltip-content { right: calc(100% + 6px); top: 50%; transform: translate(4px, -50%); }\n.rui-tooltip[data-side=\"right\"] .rui-tooltip-content { left: calc(100% + 6px); top: 50%; transform: translate(-4px, -50%); }\n.rui-tooltip:hover .rui-tooltip-content,\n.rui-tooltip:focus-visible .rui-tooltip-content,\n.rui-tooltip:focus-within .rui-tooltip-content {\n  opacity: 1;\n  transform: translate(0, 0);\n}\n.rui-tooltip[data-side=\"top\"]:hover .rui-tooltip-content { transform: translate(-50%, 0); }\n.rui-tooltip[data-side=\"bottom\"]:hover .rui-tooltip-content { transform: translate(-50%, 0); }\n.rui-tooltip[data-side=\"left\"]:hover .rui-tooltip-content { transform: translate(0, -50%); }\n.rui-tooltip[data-side=\"right\"]:hover .rui-tooltip-content { transform: translate(0, -50%); }\n\n/* HoverCard */\n.rui-hover-card {\n  position: relative;\n  display: inline-flex;\n  outline: none;\n}\n.rui-hover-card-trigger { display: contents; }\n.rui-hover-card-content {\n  position: absolute;\n  min-width: 240px;\n  max-width: 320px;\n  padding: var(--rui-spacing-m);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  box-shadow: var(--rui-shadow-md);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 160ms ease, transform 160ms ease;\n  z-index: 25;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n}\n.rui-hover-card[data-side=\"bottom\"] .rui-hover-card-content { top: calc(100% + 6px); left: 0; transform: translateY(-4px); }\n.rui-hover-card[data-side=\"top\"] .rui-hover-card-content { bottom: calc(100% + 6px); left: 0; transform: translateY(4px); }\n.rui-hover-card[data-side=\"left\"] .rui-hover-card-content { right: calc(100% + 6px); top: 0; transform: translateX(4px); }\n.rui-hover-card[data-side=\"right\"] .rui-hover-card-content { left: calc(100% + 6px); top: 0; transform: translateX(-4px); }\n.rui-hover-card:hover .rui-hover-card-content,\n.rui-hover-card:focus-visible .rui-hover-card-content,\n.rui-hover-card:focus-within .rui-hover-card-content,\n.rui-hover-card[data-open=\"true\"] .rui-hover-card-content {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(0, 0);\n}\n\n/* Kbd */\n.rui-kbd-group { display: inline-flex; align-items: center; gap: 4px; }\n.rui-kbd {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--rui-color-surface-muted);\n  border: 1px solid var(--rui-color-border);\n  border-bottom-width: 2px;\n  font-family: var(--rui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n  line-height: 1.2;\n  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.04);\n}\n.rui-kbd-group[data-size=\"sm\"] .rui-kbd { padding: 1px 4px; font-size: 10px; }\n.rui-kbd-sep { color: var(--rui-color-text-muted); font-size: 10px; }\n\n/* Breadcrumb */\n.rui-breadcrumb { display: flex; }\n.rui-breadcrumb-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n}\n.rui-breadcrumb-item { display: inline-flex; align-items: center; }\n.rui-breadcrumb-separator { color: var(--rui-color-border); }\n.rui-breadcrumb-link {\n  color: var(--rui-color-text-muted);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.rui-breadcrumb-link:hover { color: var(--rui-color-primary); text-decoration: underline; }\n.rui-breadcrumb-current {\n  color: var(--rui-color-text);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Pagination */\n.rui-pagination {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: var(--rui-radius-sm);\n}\n.rui-pagination-button {\n  min-width: 32px;\n  height: 32px;\n  border-radius: var(--rui-radius-sm);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--rui-color-text);\n  font: inherit;\n  font-weight: 500;\n  font-size: 13px;\n  padding: 0 8px;\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n.rui-pagination-button:hover:not([disabled]):not([data-active=\"true\"]) {\n  background: var(--rui-color-surface-muted);\n}\n.rui-pagination-button[data-active=\"true\"] {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  border-color: var(--rui-color-primary);\n}\n.rui-pagination-button:disabled { opacity: 0.45; cursor: not-allowed; }\n.rui-pagination-ellipsis {\n  min-width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n}\n\n/* Sheet \u2014 side drawer overlay. */\n.rui-sheet-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 23, 42, 0.40);\n  display: flex;\n  z-index: 50;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease;\n}\n.rui-sheet-overlay[data-side=\"right\"] { justify-content: flex-end; }\n.rui-sheet-overlay[data-side=\"left\"] { justify-content: flex-start; }\n.rui-sheet-overlay[data-side=\"top\"],\n.rui-sheet-overlay[data-side=\"bottom\"] { flex-direction: column; }\n.rui-sheet-overlay[data-side=\"bottom\"] { justify-content: flex-end; }\n.rui-sheet-overlay[data-open=\"true\"] {\n  opacity: 1;\n  pointer-events: auto;\n}\n.rui-sheet {\n  background: var(--rui-color-surface);\n  display: flex;\n  flex-direction: column;\n  width: min(420px, 100vw);\n  height: 100%;\n  box-shadow: var(--rui-shadow-md);\n  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.rui-sheet[data-side=\"right\"] { transform: translateX(100%); }\n.rui-sheet[data-side=\"left\"] { transform: translateX(-100%); }\n.rui-sheet[data-side=\"top\"] { width: 100%; height: auto; max-height: 80vh; transform: translateY(-100%); }\n.rui-sheet[data-side=\"bottom\"] { width: 100%; height: auto; max-height: 80vh; transform: translateY(100%); }\n.rui-sheet-overlay[data-open=\"true\"] .rui-sheet { transform: translate(0, 0); }\n.rui-sheet-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--rui-spacing-l);\n  border-bottom: 1px solid var(--rui-color-border);\n}\n.rui-sheet-title { margin: 0; font-size: 16px; font-weight: 600; }\n.rui-sheet-close {\n  background: transparent;\n  border: none;\n  font-size: 22px;\n  line-height: 1;\n  color: var(--rui-color-text-muted);\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: var(--rui-radius-sm);\n}\n.rui-sheet-close:hover { background: var(--rui-color-surface-muted); }\n.rui-sheet-body {\n  padding: var(--rui-spacing-l);\n  overflow-y: auto;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n}\n.rui-sheet-footer {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  justify-content: flex-end;\n  padding: var(--rui-spacing-l);\n  border-top: 1px solid var(--rui-color-border);\n}\n\n/* ========================================================================\n   Pattern composites: Hero, PageHeader, MetricGrid, EmptyState, Timeline,\n   FeatureGrid, Testimonial, ProfileCard, Comment, Banner, KanbanBoard.\n   ======================================================================== */\n\n.rui-pattern-actions {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n}\n\n/* Hero */\n.rui-hero {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--rui-spacing-l);\n  align-items: center;\n  padding: clamp(28px, 4vw, 56px);\n  border-radius: var(--rui-radius-lg);\n  background:\n    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--rui-color-primary) 18%, transparent), transparent 60%),\n    radial-gradient(50% 50% at 100% 100%, color-mix(in srgb, var(--rui-color-info) 18%, transparent), transparent 60%),\n    var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  overflow: hidden;\n}\n.rui-hero[data-has-image=\"true\"] { grid-template-columns: 1.2fr 1fr; }\n.rui-hero[data-tone=\"success\"] { background:\n    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--rui-color-success) 18%, transparent), transparent 60%),\n    var(--rui-color-surface); }\n.rui-hero[data-tone=\"warning\"] { background:\n    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--rui-color-warning) 22%, transparent), transparent 60%),\n    var(--rui-color-surface); }\n.rui-hero[data-tone=\"danger\"] { background:\n    radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--rui-color-danger) 18%, transparent), transparent 60%),\n    var(--rui-color-surface); }\n.rui-hero-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  align-items: flex-start;\n  min-width: 0;\n}\n.rui-hero-eyebrow {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--rui-color-primary);\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n}\n.rui-hero-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: clamp(28px, 3.4vw, 44px);\n  font-weight: calc(var(--rui-font-weight-heading) + 100);\n  line-height: 1.05;\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n}\n.rui-hero-subtitle {\n  margin: 0;\n  font-size: clamp(15px, 1.4vw, 17px);\n  color: var(--rui-color-text-muted);\n  max-width: 60ch;\n  line-height: 1.5;\n}\n.rui-hero-highlights { display: flex; flex-wrap: wrap; gap: 8px; }\n.rui-hero-highlight {\n  font-size: 12px;\n  font-weight: 600;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  color: var(--rui-color-text);\n}\n.rui-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--rui-spacing-s); margin-top: 4px; }\n.rui-hero-media {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 0;\n}\n.rui-hero-media img {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n}\n\n/* PageHeader */\n.rui-page-header {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-bottom: var(--rui-spacing-m);\n  border-bottom: var(--rui-border-width) solid var(--rui-color-border);\n}\n.rui-page-header-breadcrumbs {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-page-header-crumb-sep { color: var(--rui-color-border); }\n.rui-page-header-crumb { color: var(--rui-color-text-muted); }\n.rui-page-header-crumb:last-child { color: var(--rui-color-text); font-weight: 600; }\n.rui-page-header-title-row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-m);\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n.rui-page-header-title-block { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }\n.rui-page-header-title-line {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n}\n.rui-page-header-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: clamp(20px, 2vw, calc(var(--rui-font-size-title) + 4px));\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n}\n.rui-page-header-subtitle {\n  margin: 0;\n  color: var(--rui-color-text-muted);\n  font-size: 14px;\n  max-width: 70ch;\n}\n.rui-page-header-actions { gap: var(--rui-spacing-s); flex-wrap: wrap; }\n\n/* MetricGrid */\n.rui-metric-grid {\n  display: grid;\n  gap: var(--rui-spacing-m);\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.rui-metric-grid[data-columns=\"1\"] { grid-template-columns: 1fr; }\n.rui-metric-grid[data-columns=\"2\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.rui-metric-grid[data-columns=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n.rui-metric-grid[data-columns=\"4\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.rui-metric-grid[data-columns=\"5\"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }\n.rui-metric-grid[data-columns=\"6\"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n\n/* EmptyState */\n.rui-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  text-align: center;\n  padding: clamp(24px, 5vw, 56px) var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  border: 1px dashed var(--rui-color-border);\n  background: var(--rui-color-bg-subtle);\n}\n.rui-empty-state-icon {\n  font-size: 40px;\n  line-height: 1;\n  width: 72px;\n  height: 72px;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n}\n.rui-empty-state-title { margin: 0; font-size: 16px; font-weight: 600; }\n.rui-empty-state-description {\n  margin: 0;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n  max-width: 48ch;\n}\n.rui-empty-state-action { margin-top: var(--rui-spacing-s); }\n\n/* Timeline */\n.rui-timeline {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  position: relative;\n}\n.rui-timeline-item {\n  display: grid;\n  grid-template-columns: 32px 1fr;\n  gap: var(--rui-spacing-s);\n  position: relative;\n}\n.rui-timeline-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: 15px;\n  top: 32px;\n  bottom: -16px;\n  width: 2px;\n  background: var(--rui-color-border);\n}\n.rui-timeline-marker {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  background: var(--rui-color-surface);\n  border: 2px solid var(--rui-color-border);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--rui-color-text);\n  flex-shrink: 0;\n}\n.rui-timeline-item[data-tone=\"primary\"] .rui-timeline-marker { border-color: var(--rui-color-primary); color: var(--rui-color-primary); }\n.rui-timeline-item[data-tone=\"success\"] .rui-timeline-marker { border-color: var(--rui-color-success); color: var(--rui-color-success); }\n.rui-timeline-item[data-tone=\"warning\"] .rui-timeline-marker { border-color: var(--rui-color-warning); color: var(--rui-color-warning); }\n.rui-timeline-item[data-tone=\"danger\"] .rui-timeline-marker { border-color: var(--rui-color-danger); color: var(--rui-color-danger); }\n.rui-timeline-item[data-tone=\"info\"] .rui-timeline-marker { border-color: var(--rui-color-info); color: var(--rui-color-info); }\n.rui-timeline-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }\n.rui-timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.rui-timeline-title { font-weight: 600; }\n.rui-timeline-time {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n.rui-timeline-description { color: var(--rui-color-text-muted); font-size: 13px; }\n\n/* FeatureGrid */\n.rui-feature-grid {\n  display: grid;\n  gap: var(--rui-spacing-l);\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n.rui-feature-grid[data-columns=\"1\"] { grid-template-columns: 1fr; }\n.rui-feature-grid[data-columns=\"2\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.rui-feature-grid[data-columns=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n.rui-feature-grid[data-columns=\"4\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.rui-feature-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;\n}\n.rui-feature-item:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--rui-shadow-md);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 28%, var(--rui-color-border));\n}\n.rui-feature-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--rui-radius-md);\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  font-size: 22px;\n  margin-bottom: var(--rui-spacing-s);\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n}\n.rui-feature-item[data-tone=\"success\"] .rui-feature-icon { background: color-mix(in srgb, var(--rui-color-success) 14%, transparent); color: var(--rui-color-success); }\n.rui-feature-item[data-tone=\"warning\"] .rui-feature-icon { background: color-mix(in srgb, var(--rui-color-warning) 14%, transparent); color: var(--rui-color-warning); }\n.rui-feature-item[data-tone=\"danger\"] .rui-feature-icon { background: color-mix(in srgb, var(--rui-color-danger) 14%, transparent); color: var(--rui-color-danger); }\n.rui-feature-item[data-tone=\"info\"] .rui-feature-icon { background: color-mix(in srgb, var(--rui-color-info) 14%, transparent); color: var(--rui-color-info); }\n.rui-feature-title { margin: 0; font-size: 16px; font-weight: 600; }\n.rui-feature-description { margin: 0; color: var(--rui-color-text-muted); font-size: 13px; line-height: 1.5; }\n\n/* Testimonial */\n.rui-testimonial {\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  position: relative;\n}\n.rui-testimonial::before {\n  content: \"\u201C\";\n  position: absolute;\n  top: -8px;\n  left: var(--rui-spacing-m);\n  font-size: 64px;\n  line-height: 1;\n  color: color-mix(in srgb, var(--rui-color-primary) 28%, transparent);\n  font-family: Georgia, serif;\n}\n.rui-testimonial-rating { color: var(--rui-color-warning); letter-spacing: 1px; }\n.rui-testimonial-quote {\n  margin: 0;\n  font-size: 15px;\n  line-height: 1.6;\n  color: var(--rui-color-text);\n}\n.rui-testimonial-author {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n}\n.rui-testimonial-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; }\n.rui-testimonial-meta { display: flex; flex-direction: column; }\n.rui-testimonial-name { font-weight: 600; font-size: 14px; }\n.rui-testimonial-role { font-size: 12px; color: var(--rui-color-text-muted); }\n\n/* ProfileCard */\n.rui-profile-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n}\n.rui-profile-card-header { display: flex; align-items: center; gap: var(--rui-spacing-m); }\n.rui-profile-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.rui-profile-card-name { margin: 0; font-size: 16px; font-weight: 600; }\n.rui-profile-card-role { margin: 0; font-size: 13px; color: var(--rui-color-text-muted); }\n.rui-profile-card-bio { margin: 0; color: var(--rui-color-text); font-size: 13px; line-height: 1.5; }\n.rui-profile-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }\n.rui-profile-card-actions { gap: var(--rui-spacing-s); }\n\n/* Comment */\n.rui-comment {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-s) 0;\n}\n.rui-comment-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n  background: var(--rui-color-bg-subtle);\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  border-radius: var(--rui-radius-md);\n  border: 1px solid var(--rui-color-border-subtle);\n}\n.rui-comment-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }\n.rui-comment-author { font-weight: 600; font-size: 13px; }\n.rui-comment-time { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-comment-content { font-size: 14px; color: var(--rui-color-text); line-height: 1.5; }\n.rui-comment-actions { gap: var(--rui-spacing-xs); margin-top: 4px; }\n\n/* Banner */\n.rui-banner {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-s) var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--rui-color-primary) 18%, var(--rui-color-surface)),\n    color-mix(in srgb, var(--rui-color-info) 12%, var(--rui-color-surface)));\n  border: 1px solid color-mix(in srgb, var(--rui-color-primary) 28%, var(--rui-color-border));\n  color: var(--rui-color-text);\n}\n.rui-banner[data-tone=\"success\"] {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--rui-color-success) 18%, var(--rui-color-surface)), var(--rui-color-surface));\n  border-color: color-mix(in srgb, var(--rui-color-success) 28%, var(--rui-color-border));\n}\n.rui-banner[data-tone=\"warning\"] {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--rui-color-warning) 18%, var(--rui-color-surface)), var(--rui-color-surface));\n  border-color: color-mix(in srgb, var(--rui-color-warning) 32%, var(--rui-color-border));\n}\n.rui-banner[data-tone=\"danger\"] {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--rui-color-danger) 18%, var(--rui-color-surface)), var(--rui-color-surface));\n  border-color: color-mix(in srgb, var(--rui-color-danger) 32%, var(--rui-color-border));\n}\n.rui-banner-icon {\n  font-size: 22px;\n  flex-shrink: 0;\n}\n.rui-banner-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n.rui-banner-title { font-size: 14px; }\n.rui-banner-message { font-size: 13px; color: var(--rui-color-text-muted); }\n.rui-banner-action { flex-shrink: 0; }\n\n/* Kanban */\n.rui-kanban-board {\n  display: flex;\n  gap: var(--rui-spacing-m);\n  overflow-x: auto;\n  padding-bottom: var(--rui-spacing-s);\n  -webkit-overflow-scrolling: touch;\n}\n.rui-kanban-column {\n  flex: 0 0 280px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-m);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-bg-subtle);\n  border: 1px solid var(--rui-color-border);\n  min-width: 0;\n}\n.rui-kanban-column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.rui-kanban-column-title { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rui-color-text); }\n.rui-kanban-column-count {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  color: var(--rui-color-text-muted);\n}\n.rui-kanban-column[data-tone=\"primary\"] .rui-kanban-column-title { color: var(--rui-color-primary); }\n.rui-kanban-column[data-tone=\"success\"] .rui-kanban-column-title { color: var(--rui-color-success); }\n.rui-kanban-column[data-tone=\"warning\"] .rui-kanban-column-title { color: var(--rui-color-warning); }\n.rui-kanban-column[data-tone=\"danger\"] .rui-kanban-column-title { color: var(--rui-color-danger); }\n.rui-kanban-column-body { display: flex; flex-direction: column; gap: var(--rui-spacing-s); }\n.rui-kanban-column-empty {\n  text-align: center;\n  padding: var(--rui-spacing-m);\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  border: 1px dashed var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n}\n.rui-kanban-card {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  box-shadow: var(--rui-shadow-sm);\n}\n.rui-kanban-card[role=\"button\"] {\n  cursor: pointer;\n  transition: transform 120ms ease, box-shadow 160ms ease;\n}\n.rui-kanban-card[role=\"button\"]:hover { transform: translateY(-1px); box-shadow: var(--rui-shadow-md); }\n.rui-kanban-card-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }\n.rui-kanban-card-icon { font-size: 14px; }\n.rui-kanban-card-description { margin: 0; color: var(--rui-color-text-muted); font-size: 12px; line-height: 1.4; }\n.rui-kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }\n.rui-kanban-card-footer { display: flex; align-items: center; gap: 6px; margin-top: 4px; }\n.rui-kanban-card-assignee { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-kanban-card[data-tone=\"primary\"] { border-left: 3px solid var(--rui-color-primary); }\n.rui-kanban-card[data-tone=\"success\"] { border-left: 3px solid var(--rui-color-success); }\n.rui-kanban-card[data-tone=\"warning\"] { border-left: 3px solid var(--rui-color-warning); }\n.rui-kanban-card[data-tone=\"danger\"] { border-left: 3px solid var(--rui-color-danger); }\n.rui-kanban-card[data-tone=\"info\"] { border-left: 3px solid var(--rui-color-info); }\n\n/* SectionHeader */\n.rui-section-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--rui-spacing-m);\n  flex-wrap: wrap;\n  padding-bottom: var(--rui-spacing-s);\n  border-bottom: 1px solid var(--rui-color-border-subtle);\n  margin-bottom: var(--rui-spacing-s);\n}\n.rui-section-header-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }\n.rui-section-header-eyebrow {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-weight: 600;\n  color: var(--rui-color-primary);\n}\n.rui-section-header-title-line {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n}\n.rui-section-header-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: var(--rui-font-size-heading);\n  font-weight: var(--rui-font-weight-heading);\n  line-height: var(--rui-line-height-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n}\n.rui-section-header-subtitle {\n  margin: 0;\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n  max-width: 70ch;\n}\n.rui-section-header-actions {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n\n/* Toolbar */\n.rui-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-m);\n  flex-wrap: wrap;\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-bg-subtle);\n  border: 1px solid var(--rui-color-border);\n}\n.rui-toolbar-side {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.rui-toolbar-left { flex: 1 1 auto; }\n.rui-toolbar-right { flex-shrink: 0; }\n.rui-toolbar .rui-form-control { gap: 4px; }\n.rui-toolbar .rui-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rui-color-text-muted); }\n.rui-toolbar .rui-input,\n.rui-toolbar .rui-select { min-width: 160px; }\n\n/* Sidebar + AppShell */\n.rui-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-m);\n  width: 240px;\n  flex-shrink: 0;\n  background: var(--rui-color-bg-subtle);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  align-self: stretch;\n}\n.rui-sidebar-header { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--rui-spacing-s); border-bottom: 1px solid var(--rui-color-border-subtle); }\n.rui-sidebar-brand { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--rui-color-text); }\n.rui-sidebar-tagline { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-sidebar-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }\n.rui-sidebar-section { display: flex; flex-direction: column; gap: 2px; margin-top: var(--rui-spacing-s); }\n.rui-sidebar-section:first-child { margin-top: 0; }\n.rui-sidebar-section-label {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-weight: 600;\n  color: var(--rui-color-text-muted);\n  padding: 0 var(--rui-spacing-s);\n  margin-bottom: 4px;\n}\n.rui-sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-xs) var(--rui-spacing-s);\n  border-radius: var(--rui-radius-sm);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--rui-color-text);\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;\n  width: 100%;\n}\n.rui-sidebar-item:hover {\n  background: var(--rui-color-surface);\n  color: var(--rui-color-primary);\n}\n.rui-sidebar-item[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 32%, transparent);\n}\n.rui-sidebar-item-icon { font-size: 14px; width: 18px; text-align: center; }\n.rui-sidebar-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.rui-sidebar-item-badge {\n  font-size: 11px;\n  padding: 1px 7px;\n  border-radius: 999px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  color: var(--rui-color-text-muted);\n  font-weight: 600;\n}\n.rui-sidebar-item[data-active=\"true\"] .rui-sidebar-item-badge {\n  background: color-mix(in srgb, var(--rui-color-primary) 22%, var(--rui-color-surface));\n  color: var(--rui-color-primary);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 40%, transparent);\n}\n.rui-sidebar-footer {\n  padding-top: var(--rui-spacing-s);\n  border-top: 1px solid var(--rui-color-border-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n}\n\n.rui-app-shell {\n  display: flex;\n  gap: var(--rui-spacing-l);\n  align-items: stretch;\n  min-height: 0;\n}\n.rui-app-shell-main {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-l);\n}\n.rui-app-shell-topbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n}\n.rui-app-shell-content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-l);\n}\n\n/* SplitView */\n.rui-split-view {\n  display: grid;\n  grid-template-columns: var(--rui-split-primary, 320px) 1fr;\n  gap: var(--rui-spacing-l);\n  align-items: stretch;\n  min-width: 0;\n}\n.rui-split-view-primary,\n.rui-split-view-detail {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-m);\n  min-width: 0;\n}\n\n/* DescriptionList */\n.rui-description-list {\n  display: grid;\n  gap: var(--rui-spacing-s) var(--rui-spacing-l);\n  grid-template-columns: 1fr;\n  margin: 0;\n  padding: var(--rui-spacing-m) 0;\n}\n.rui-description-list[data-columns=\"2\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.rui-description-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: var(--rui-spacing-s) 0;\n  border-bottom: 1px dashed var(--rui-color-border-subtle);\n}\n.rui-description-label {\n  margin: 0;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-weight: 600;\n  color: var(--rui-color-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.rui-description-icon { font-size: 13px; }\n.rui-description-value {\n  margin: 0;\n  font-size: 14px;\n  color: var(--rui-color-text);\n  font-weight: 500;\n  word-break: break-word;\n}\n\n/* StatusDot */\n.rui-status-dot {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-status-dot-marker {\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--rui-color-text-muted);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-text-muted) 18%, transparent);\n}\n.rui-status-dot[data-tone=\"primary\"] .rui-status-dot-marker { background: var(--rui-color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-primary) 20%, transparent); }\n.rui-status-dot[data-tone=\"success\"] .rui-status-dot-marker { background: var(--rui-color-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-success) 22%, transparent); }\n.rui-status-dot[data-tone=\"warning\"] .rui-status-dot-marker { background: var(--rui-color-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-warning) 22%, transparent); }\n.rui-status-dot[data-tone=\"danger\"] .rui-status-dot-marker { background: var(--rui-color-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-danger) 22%, transparent); }\n.rui-status-dot[data-tone=\"info\"] .rui-status-dot-marker { background: var(--rui-color-info); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rui-color-info) 22%, transparent); }\n.rui-status-dot-label { color: var(--rui-color-text); font-weight: 500; }\n.rui-status-dot[data-pulse=\"true\"] .rui-status-dot-marker {\n  animation: rui-status-dot-pulse 1600ms ease-in-out infinite;\n}\n@keyframes rui-status-dot-pulse {\n  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent); }\n  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent); }\n}\n\n/* Pricing */\n.rui-pricing-table {\n  display: grid;\n  gap: var(--rui-spacing-l);\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  align-items: stretch;\n}\n.rui-pricing-table[data-columns=\"1\"] { grid-template-columns: 1fr; }\n.rui-pricing-table[data-columns=\"2\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.rui-pricing-table[data-columns=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n.rui-pricing-table[data-columns=\"4\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n\n.rui-pricing-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-l);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;\n}\n.rui-pricing-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--rui-shadow-md);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 22%, var(--rui-color-border));\n}\n.rui-pricing-card[data-featured=\"true\"] {\n  border-color: color-mix(in srgb, var(--rui-color-primary) 48%, transparent);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rui-color-primary) 24%, transparent), var(--rui-shadow-md);\n  background: linear-gradient(180deg, color-mix(in srgb, var(--rui-color-primary) 6%, var(--rui-color-surface)) 0%, var(--rui-color-surface) 70%);\n}\n.rui-pricing-card-badge {\n  position: absolute;\n  top: -10px;\n  right: var(--rui-spacing-l);\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  box-shadow: var(--rui-shadow-sm);\n}\n.rui-pricing-card-plan {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n}\n.rui-pricing-card-description { margin: 0; font-size: 13px; color: var(--rui-color-text-muted); line-height: 1.5; }\n.rui-pricing-card-price-row {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  padding: var(--rui-spacing-s) 0;\n}\n.rui-pricing-card-price {\n  font-size: clamp(28px, 3.4vw, 36px);\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  color: var(--rui-color-text);\n}\n.rui-pricing-card-period { font-size: 13px; color: var(--rui-color-text-muted); }\n.rui-pricing-card-features {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1 1 auto;\n}\n.rui-pricing-card-feature {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--rui-color-text);\n}\n.rui-pricing-card-check {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-success) 18%, transparent);\n  color: var(--rui-color-success);\n  font-size: 15px;\n  font-weight: 700;\n  flex-shrink: 0;\n  margin-top: 1px;\n}\n.rui-pricing-card-action {\n  margin-top: var(--rui-spacing-s);\n  display: flex;\n}\n.rui-pricing-card-action .rui-button { width: 100%; }\n\n/* ========================================================================\n   Richer composition primitives\n   Cover \u00B7 MediaCard \u00B7 Stats \u00B7 Tile \u00B7 Notification \u00B7 PersonChip \u00B7\n   Container \u00B7 Spacer \u00B7 Quote \u00B7 Note \u00B7 Rating \u00B7 ProgressRing \u00B7 ChatBubble \u00B7\n   SearchBar\n   ======================================================================== */\n\n/* Container */\n.rui-container {\n  width: 100%;\n}\n.rui-container[data-size=\"sm\"]  { max-width: 640px; }\n.rui-container[data-size=\"md\"]  { max-width: 820px; }\n.rui-container[data-size=\"lg\"]  { max-width: 1040px; }\n.rui-container[data-size=\"xl\"]  { max-width: 1280px; }\n.rui-container[data-size=\"full\"] { max-width: 100%; }\n.rui-container[data-padding=\"none\"] { padding-left: 0; padding-right: 0; }\n.rui-container[data-padding=\"s\"]  { padding-left: var(--rui-spacing-s); padding-right: var(--rui-spacing-s); }\n.rui-container[data-padding=\"m\"]  { padding-left: var(--rui-spacing-m); padding-right: var(--rui-spacing-m); }\n.rui-container[data-padding=\"l\"]  { padding-left: var(--rui-spacing-l); padding-right: var(--rui-spacing-l); }\n\n/* Spacer */\n.rui-spacer { display: block; }\n.rui-spacer[data-flex=\"true\"] { flex: 1 1 auto; }\n.rui-spacer[data-size=\"xs\"] { min-width: var(--rui-spacing-xs); min-height: var(--rui-spacing-xs); }\n.rui-spacer[data-size=\"s\"]  { min-width: var(--rui-spacing-s);  min-height: var(--rui-spacing-s); }\n.rui-spacer[data-size=\"m\"]  { min-width: var(--rui-spacing-m);  min-height: var(--rui-spacing-m); }\n.rui-spacer[data-size=\"l\"]  { min-width: var(--rui-spacing-l);  min-height: var(--rui-spacing-l); }\n.rui-spacer[data-size=\"xl\"] { min-width: var(--rui-spacing-xl); min-height: var(--rui-spacing-xl); }\n\n/* Cover */\n.rui-cover {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  border-radius: var(--rui-radius-lg);\n  padding: var(--rui-spacing-xl) var(--rui-spacing-xl);\n  color: #ffffff;\n  overflow: hidden;\n  background-size: cover;\n  background-position: center;\n  background-color: color-mix(in srgb, var(--rui-color-primary) 20%, #0f172a);\n  box-shadow: var(--rui-shadow-md);\n}\n.rui-cover-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  max-width: 720px;\n  z-index: 1;\n}\n.rui-cover-eyebrow {\n  display: inline-flex;\n  align-self: flex-start;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.16);\n  border: 1px solid rgba(255, 255, 255, 0.24);\n  backdrop-filter: blur(6px);\n}\n.rui-cover-title {\n  margin: 0;\n  font-family: var(--rui-font-family-heading);\n  font-size: clamp(24px, 3.5vw, 36px);\n  font-weight: var(--rui-font-weight-heading);\n  letter-spacing: var(--rui-letter-spacing-heading);\n  text-transform: var(--rui-heading-text-transform);\n  line-height: 1.15;\n  text-shadow: 0 4px 16px rgba(15, 23, 42, 0.35);\n}\n.rui-cover-subtitle {\n  margin: 0;\n  font-size: 15px;\n  color: rgba(255, 255, 255, 0.92);\n  max-width: 640px;\n  line-height: 1.55;\n}\n.rui-cover-caption {\n  margin: 0;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.82);\n}\n.rui-cover-actions { margin-top: var(--rui-spacing-s); }\n.rui-cover[data-tone=\"success\"] { background-color: color-mix(in srgb, var(--rui-color-success) 18%, #022c22); }\n.rui-cover[data-tone=\"warning\"] { background-color: color-mix(in srgb, var(--rui-color-warning) 18%, #1f1404); }\n.rui-cover[data-tone=\"danger\"]  { background-color: color-mix(in srgb, var(--rui-color-danger)  18%, #1f0606); }\n.rui-cover[data-tone=\"info\"]    { background-color: color-mix(in srgb, var(--rui-color-info)    18%, #03242a); }\n.rui-cover[data-tone=\"default\"] { background-color: #0f172a; }\n\n/* MediaCard */\n.rui-media-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  overflow: hidden;\n  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;\n}\n.rui-media-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--rui-shadow-md);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 20%, var(--rui-color-border));\n}\n.rui-media-card-media {\n  position: relative;\n  width: 100%;\n  background: color-mix(in srgb, var(--rui-color-text) 6%, var(--rui-color-surface-muted));\n  overflow: hidden;\n}\n.rui-media-card-media img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.rui-media-card-media-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n}\n.rui-media-card-placeholder { font-size: clamp(32px, 4vw, 48px); opacity: 0.55; }\n.rui-media-card-badge {\n  position: absolute;\n  top: var(--rui-spacing-s);\n  left: var(--rui-spacing-s);\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: rgba(15, 23, 42, 0.72);\n  color: #ffffff;\n  backdrop-filter: blur(6px);\n}\n.rui-media-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l) var(--rui-spacing-l);\n}\n.rui-media-card-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--rui-color-text);\n}\n.rui-media-card-description {\n  margin: 0;\n  font-size: 13.5px;\n  color: var(--rui-color-text-muted);\n  line-height: 1.55;\n}\n.rui-media-card-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.rui-media-card-meta {\n  margin: 0;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  border-top: 1px solid var(--rui-color-border-subtle);\n  padding-top: var(--rui-spacing-s);\n}\n.rui-media-card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rui-spacing-s);\n  margin-top: var(--rui-spacing-xs);\n}\n.rui-media-card[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  align-items: stretch;\n}\n.rui-media-card[data-orientation=\"horizontal\"] .rui-media-card-media {\n  width: 38%;\n  max-width: 280px;\n  min-height: 100%;\n}\n.rui-media-card[data-orientation=\"horizontal\"] .rui-media-card-body { flex: 1 1 auto; }\n\n/* Stats */\n.rui-stats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rui-spacing-l);\n  padding: var(--rui-spacing-m) 0;\n}\n.rui-stats[data-align=\"center\"] { justify-content: center; }\n.rui-stats[data-align=\"end\"]    { justify-content: flex-end; }\n.rui-stats-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 96px;\n  padding: 0 var(--rui-spacing-m);\n  border-left: 1px solid var(--rui-color-border-subtle);\n}\n.rui-stats-item:first-child { padding-left: 0; border-left: none; }\n.rui-stats-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-weight: 600;\n  color: var(--rui-color-text-muted);\n}\n.rui-stats-value {\n  font-size: 22px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--rui-color-text);\n}\n.rui-stats-hint {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-stats-item[data-tone=\"primary\"] .rui-stats-value { color: var(--rui-color-primary); }\n.rui-stats-item[data-tone=\"success\"] .rui-stats-value { color: var(--rui-color-success); }\n.rui-stats-item[data-tone=\"warning\"] .rui-stats-value { color: var(--rui-color-warning); }\n.rui-stats-item[data-tone=\"danger\"]  .rui-stats-value { color: var(--rui-color-danger); }\n.rui-stats-item[data-tone=\"info\"]    .rui-stats-value { color: var(--rui-color-info); }\n\n/* Tile */\n.rui-tile {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  text-align: left;\n  color: inherit;\n  font: inherit;\n  cursor: default;\n  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\nbutton.rui-tile { cursor: pointer; }\nbutton.rui-tile:hover,\n.rui-tile:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--rui-shadow-sm);\n  border-color: color-mix(in srgb, var(--rui-color-primary) 18%, var(--rui-color-border));\n}\n.rui-tile-icon {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  border-radius: var(--rui-radius-md);\n  background: color-mix(in srgb, var(--rui-color-primary) 12%, var(--rui-color-surface-muted));\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.rui-tile-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.rui-tile-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-tile-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--rui-color-text);\n}\n.rui-tile-description {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  line-height: 1.45;\n}\n.rui-tile[data-tone=\"primary\"] .rui-tile-icon { background: color-mix(in srgb, var(--rui-color-primary) 18%, transparent); color: var(--rui-color-primary); }\n.rui-tile[data-tone=\"success\"] .rui-tile-icon { background: color-mix(in srgb, var(--rui-color-success) 18%, transparent); color: var(--rui-color-success); }\n.rui-tile[data-tone=\"warning\"] .rui-tile-icon { background: color-mix(in srgb, var(--rui-color-warning) 18%, transparent); color: var(--rui-color-warning); }\n.rui-tile[data-tone=\"danger\"]  .rui-tile-icon { background: color-mix(in srgb, var(--rui-color-danger)  18%, transparent); color: var(--rui-color-danger); }\n.rui-tile[data-tone=\"info\"]    .rui-tile-icon { background: color-mix(in srgb, var(--rui-color-info)    18%, transparent); color: var(--rui-color-info); }\n\n/* Notification */\n.rui-notification {\n  display: flex;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  position: relative;\n}\n.rui-notification[data-unread=\"true\"]::before {\n  content: \"\";\n  position: absolute;\n  top: var(--rui-spacing-m);\n  left: -1px;\n  width: 3px;\n  height: 24px;\n  background: var(--rui-color-primary);\n  border-radius: 999px;\n}\n.rui-notification[data-tone=\"success\"][data-unread=\"true\"]::before { background: var(--rui-color-success); }\n.rui-notification[data-tone=\"warning\"][data-unread=\"true\"]::before { background: var(--rui-color-warning); }\n.rui-notification[data-tone=\"danger\"][data-unread=\"true\"]::before  { background: var(--rui-color-danger); }\n.rui-notification[data-tone=\"info\"][data-unread=\"true\"]::before    { background: var(--rui-color-info); }\n.rui-notification-icon {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-primary) 12%, var(--rui-color-surface-muted));\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.rui-notification[data-tone=\"success\"] .rui-notification-icon { background: color-mix(in srgb, var(--rui-color-success) 18%, transparent); color: var(--rui-color-success); }\n.rui-notification[data-tone=\"warning\"] .rui-notification-icon { background: color-mix(in srgb, var(--rui-color-warning) 18%, transparent); color: var(--rui-color-warning); }\n.rui-notification[data-tone=\"danger\"]  .rui-notification-icon { background: color-mix(in srgb, var(--rui-color-danger)  18%, transparent); color: var(--rui-color-danger); }\n.rui-notification[data-tone=\"info\"]    .rui-notification-icon { background: color-mix(in srgb, var(--rui-color-info)    18%, transparent); color: var(--rui-color-info); }\n.rui-notification-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.rui-notification-head {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--rui-spacing-s);\n  align-items: baseline;\n}\n.rui-notification-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-notification-time {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  flex-shrink: 0;\n}\n.rui-notification-message {\n  margin: 0;\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n  line-height: 1.5;\n}\n.rui-notification-actions {\n  display: flex;\n  gap: var(--rui-spacing-s);\n  flex-wrap: wrap;\n  margin-top: var(--rui-spacing-xs);\n}\n\n/* PersonChip */\n.rui-person-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  padding: 4px 8px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  border-radius: var(--rui-radius-md);\n}\nbutton.rui-person-chip {\n  cursor: pointer;\n  transition: background 140ms ease;\n}\nbutton.rui-person-chip:hover { background: color-mix(in srgb, var(--rui-color-primary) 8%, transparent); }\n.rui-person-chip-avatar { position: relative; display: inline-flex; }\n.rui-person-chip-status {\n  position: absolute;\n  bottom: -1px;\n  right: -1px;\n  width: 9px;\n  height: 9px;\n  border-radius: 999px;\n  border: 2px solid var(--rui-color-surface);\n}\n.rui-person-chip-status[data-status=\"online\"]  { background: var(--rui-color-success); }\n.rui-person-chip-status[data-status=\"busy\"]    { background: var(--rui-color-danger); }\n.rui-person-chip-status[data-status=\"away\"]    { background: var(--rui-color-warning); }\n.rui-person-chip-status[data-status=\"offline\"] { background: var(--rui-color-text-muted); }\n.rui-person-chip-meta {\n  display: flex;\n  flex-direction: column;\n  line-height: 1.25;\n  min-width: 0;\n}\n.rui-person-chip-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.rui-person-chip-role {\n  font-size: 11.5px;\n  color: var(--rui-color-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.rui-person-chip[data-size=\"sm\"] .rui-person-chip-name { font-size: 12px; }\n.rui-person-chip[data-size=\"sm\"] .rui-person-chip-role { font-size: 11px; }\n.rui-person-chip[data-size=\"lg\"] .rui-person-chip-name { font-size: 14px; }\n.rui-person-chip[data-size=\"lg\"] .rui-person-chip-role { font-size: 12px; }\n\n/* Quote */\n.rui-quote {\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  border-left: 3px solid color-mix(in srgb, var(--rui-color-primary) 60%, transparent);\n  background: color-mix(in srgb, var(--rui-color-primary) 4%, var(--rui-color-surface));\n  border-radius: 0 var(--rui-radius-md) var(--rui-radius-md) 0;\n}\n.rui-quote-text {\n  margin: 0;\n  font-size: 15px;\n  line-height: 1.55;\n  font-style: italic;\n  color: var(--rui-color-text);\n}\n.rui-quote-text::before { content: \"\u201C\"; margin-right: 2px; opacity: 0.55; }\n.rui-quote-text::after  { content: \"\u201D\"; margin-left: 2px; opacity: 0.55; }\n.rui-quote-cite {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  font-style: normal;\n}\n.rui-quote[data-tone=\"success\"] { border-left-color: color-mix(in srgb, var(--rui-color-success) 60%, transparent); background: color-mix(in srgb, var(--rui-color-success) 4%, var(--rui-color-surface)); }\n.rui-quote[data-tone=\"warning\"] { border-left-color: color-mix(in srgb, var(--rui-color-warning) 60%, transparent); background: color-mix(in srgb, var(--rui-color-warning) 4%, var(--rui-color-surface)); }\n.rui-quote[data-tone=\"danger\"]  { border-left-color: color-mix(in srgb, var(--rui-color-danger)  60%, transparent); background: color-mix(in srgb, var(--rui-color-danger)  4%, var(--rui-color-surface)); }\n.rui-quote[data-tone=\"info\"]    { border-left-color: color-mix(in srgb, var(--rui-color-info)    60%, transparent); background: color-mix(in srgb, var(--rui-color-info)    4%, var(--rui-color-surface)); }\n\n/* Note */\n.rui-note {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-s);\n  padding: 8px var(--rui-spacing-m);\n  border-radius: var(--rui-radius-md);\n  background: color-mix(in srgb, var(--rui-color-info) 10%, var(--rui-color-surface-muted));\n  border: 1px solid color-mix(in srgb, var(--rui-color-info) 22%, transparent);\n}\n.rui-note-icon {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-info) 28%, transparent);\n  color: var(--rui-color-info);\n  font-size: 11px;\n  font-weight: 700;\n  flex-shrink: 0;\n  margin-top: 1px;\n}\n.rui-note-text { margin: 0; font-size: 13px; color: var(--rui-color-text); line-height: 1.5; }\n.rui-note[data-tone=\"success\"] { background: color-mix(in srgb, var(--rui-color-success) 10%, var(--rui-color-surface-muted)); border-color: color-mix(in srgb, var(--rui-color-success) 22%, transparent); }\n.rui-note[data-tone=\"success\"] .rui-note-icon { background: color-mix(in srgb, var(--rui-color-success) 28%, transparent); color: var(--rui-color-success); }\n.rui-note[data-tone=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning) 10%, var(--rui-color-surface-muted)); border-color: color-mix(in srgb, var(--rui-color-warning) 22%, transparent); }\n.rui-note[data-tone=\"warning\"] .rui-note-icon { background: color-mix(in srgb, var(--rui-color-warning) 28%, transparent); color: var(--rui-color-warning); }\n.rui-note[data-tone=\"danger\"]  { background: color-mix(in srgb, var(--rui-color-danger)  10%, var(--rui-color-surface-muted)); border-color: color-mix(in srgb, var(--rui-color-danger)  22%, transparent); }\n.rui-note[data-tone=\"danger\"]  .rui-note-icon { background: color-mix(in srgb, var(--rui-color-danger)  28%, transparent); color: var(--rui-color-danger); }\n.rui-note[data-tone=\"tip\"]     { background: color-mix(in srgb, var(--rui-color-primary) 8%,  var(--rui-color-surface-muted)); border-color: color-mix(in srgb, var(--rui-color-primary) 22%, transparent); }\n.rui-note[data-tone=\"tip\"]     .rui-note-icon { background: color-mix(in srgb, var(--rui-color-primary) 28%, transparent); color: var(--rui-color-primary); }\n.rui-note[data-tone=\"default\"] { background: var(--rui-color-surface-muted); border-color: var(--rui-color-border); }\n.rui-note[data-tone=\"default\"] .rui-note-icon { background: color-mix(in srgb, var(--rui-color-text-muted) 22%, transparent); color: var(--rui-color-text-muted); }\n\n/* Rating */\n.rui-rating {\n  display: inline-flex !important;\n  align-items: center;\n  gap: 6px;\n}\n.rui-rating-stars { display: inline-flex !important; gap: 2px; }\n.rui-rating-star {\n  background: transparent;\n  border: none;\n  padding: 0;\n  font-size: 16px;\n  line-height: 1;\n  color: color-mix(in srgb, var(--rui-color-text-muted) 40%, transparent);\n  cursor: default;\n  /*\n   * Intentionally NO font-family declaration. Font Awesome fa-solid /\n   * fa-regular classes are co-applied to this element and they set the\n   * glyph font at specificity 0,1,0. The theme stylesheet ships through\n   * adoptedStyleSheets, which the CSSOM spec cascades AFTER declared\n   * stylesheets, so any same-specificity font-family declared here would\n   * win the tie-break and prevent the FA ::before glyph from rendering\n   * (the \"horizontal stripes instead of stars\" regression).\n   */\n}\n.rui-rating-star[data-fill=\"full\"],\n.rui-rating-star[data-fill=\"half\"] { color: var(--rui-color-warning); }\n.rui-rating[data-interactive=\"true\"] .rui-rating-star { cursor: pointer; }\n.rui-rating[data-size=\"sm\"] .rui-rating-star { font-size: 13px; }\n.rui-rating[data-size=\"lg\"] .rui-rating-star { font-size: 20px; }\n.rui-rating-label { font-size: 13px; color: var(--rui-color-text); font-weight: 600; }\n.rui-rating-count { font-size: 12px; color: var(--rui-color-text-muted); }\n\n/* ProgressRing */\n.rui-progress-ring {\n  display: inline-flex !important;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--rui-spacing-xs);\n}\n.rui-progress-ring-wrap {\n  position: relative;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n}\n.rui-progress-ring-svg { transform: rotate(-90deg); }\n.rui-progress-ring-track { stroke: var(--rui-color-border); }\n.rui-progress-ring-bar { stroke: var(--rui-color-primary); transition: stroke-dashoffset 360ms ease; }\n.rui-progress-ring[data-tone=\"success\"] .rui-progress-ring-bar { stroke: var(--rui-color-success); }\n.rui-progress-ring[data-tone=\"warning\"] .rui-progress-ring-bar { stroke: var(--rui-color-warning); }\n.rui-progress-ring[data-tone=\"danger\"]  .rui-progress-ring-bar { stroke: var(--rui-color-danger); }\n.rui-progress-ring[data-tone=\"info\"]    .rui-progress-ring-bar { stroke: var(--rui-color-info); }\n.rui-progress-ring-value {\n  position: absolute;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--rui-color-text);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.rui-progress-ring[data-size=\"sm\"] .rui-progress-ring-value { font-size: 13px; }\n.rui-progress-ring[data-size=\"lg\"] .rui-progress-ring-value { font-size: 20px; }\n.rui-progress-ring-icon { font-size: 1.6em; }\n.rui-progress-ring[data-tone=\"primary\"] .rui-progress-ring-icon { color: var(--rui-color-primary); }\n.rui-progress-ring[data-tone=\"success\"] .rui-progress-ring-icon { color: var(--rui-color-success); }\n.rui-progress-ring[data-tone=\"warning\"] .rui-progress-ring-icon { color: var(--rui-color-warning); }\n.rui-progress-ring[data-tone=\"danger\"]  .rui-progress-ring-icon { color: var(--rui-color-danger); }\n.rui-progress-ring[data-tone=\"info\"]    .rui-progress-ring-icon { color: var(--rui-color-info); }\n.rui-progress-ring-caption {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n}\n.rui-progress-ring[data-indeterminate=\"true\"] .rui-progress-ring-bar {\n  animation: rui-progress-ring-spin 1400ms linear infinite;\n  transform-origin: center;\n}\n@keyframes rui-progress-ring-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n.rui-progress-ring[data-indeterminate=\"true\"] .rui-progress-ring-svg {\n  animation: rui-progress-ring-rotate 1600ms linear infinite;\n}\n@keyframes rui-progress-ring-rotate {\n  from { transform: rotate(-90deg); }\n  to   { transform: rotate(270deg); }\n}\n\n/* ChatBubble */\n.rui-chat-bubble {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--rui-spacing-s);\n  max-width: 100%;\n}\n.rui-chat-bubble[data-from=\"me\"] { justify-content: flex-end; }\n.rui-chat-bubble-avatar {\n  display: inline-flex !important;\n  width: 28px;\n  height: 28px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, var(--rui-color-surface-muted));\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.rui-chat-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rui-chat-bubble-fallback { font-size: 11px; font-weight: 700; color: var(--rui-color-primary); }\n.rui-chat-bubble-bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px var(--rui-spacing-m);\n  border-radius: 16px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  max-width: min(72ch, 100%);\n}\n.rui-chat-bubble[data-from=\"me\"] .rui-chat-bubble-bubble {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, var(--rui-color-surface));\n  border-color: color-mix(in srgb, var(--rui-color-primary) 24%, var(--rui-color-border));\n  color: var(--rui-color-text);\n}\n.rui-chat-bubble[data-from=\"system\"] .rui-chat-bubble-bubble {\n  background: var(--rui-color-surface-muted);\n  font-style: italic;\n}\n.rui-chat-bubble-head {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.rui-chat-bubble-author {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-chat-bubble-time {\n  font-size: 11px;\n  color: var(--rui-color-text-muted);\n}\n.rui-chat-bubble-body {\n  margin: 0;\n  font-size: 13.5px;\n  color: var(--rui-color-text);\n  line-height: 1.5;\n  white-space: pre-wrap;\n}\n.rui-chat-bubble-status {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n  align-self: flex-end;\n}\n.rui-chat-bubble-status[data-status=\"error\"] { color: var(--rui-color-danger); }\n.rui-chat-bubble-status[data-status=\"read\"]  { color: var(--rui-color-success); }\n\n/* SearchBar */\n.rui-search-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  padding: 6px 10px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n.rui-search-bar:focus-within {\n  border-color: var(--rui-color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n}\n.rui-search-bar-icon {\n  display: inline-flex;\n  font-size: 14px;\n  color: var(--rui-color-text-muted);\n  flex-shrink: 0;\n}\n.rui-search-bar-input {\n  flex: 1 1 auto;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 13.5px;\n  padding: 4px 0;\n}\n.rui-search-bar-input::placeholder { color: var(--rui-color-text-muted); }\n.rui-search-bar-input::-webkit-search-cancel-button { -webkit-appearance: none; }\n.rui-search-bar-shortcut {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--rui-font-family);\n  font-size: 11px;\n  color: var(--rui-color-text-muted);\n  padding: 2px 6px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: 6px;\n  background: var(--rui-color-surface-muted);\n  flex-shrink: 0;\n}\n.rui-search-bar-submit {\n  border: none;\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 600;\n  padding: 6px 12px;\n  border-radius: var(--rui-radius-sm);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.rui-search-bar-submit:hover { background: var(--rui-color-primary-hover); }\n\n/* ========================================================================\n   Responsive \u2014 phones & small tablets.\n   The library targets phone-first layouts: stacks, table wrappers, and form\n   action rows are most likely to overflow, so we relax their sizing here.\n   ======================================================================== */\n\n@media (max-width: 720px) {\n  :host {\n    font-size: 14px;\n    --rui-spacing-l: 16px;\n    --rui-spacing-xl: 24px;\n  }\n  .rui-card { padding: var(--rui-spacing-m); }\n  .rui-stat-card { padding: var(--rui-spacing-m); min-width: 120px; }\n  .rui-stat-value { font-size: 20px; }\n  .rui-text[data-variant=\"title\"] { font-size: 24px; }\n  .rui-text[data-variant=\"large-heavy\"] { font-size: 18px; }\n  .rui-header-title { font-size: 20px; }\n  .rui-callout, .rui-alert { padding: var(--rui-spacing-s) var(--rui-spacing-m); }\n  .rui-modal { padding: var(--rui-spacing-m); border-radius: var(--rui-radius-md); }\n  .rui-modal-overlay { padding: var(--rui-spacing-s); }\n  .rui-form-actions { justify-content: stretch; }\n  .rui-form-actions .rui-button,\n  .rui-form-actions .rui-buttons { flex: 1 1 auto; }\n  .rui-buttons[data-direction=\"row\"] .rui-button { flex: 1 1 auto; }\n  /* Row stacks collapse to columns on phones unless the author opted into\n     wrapping (a horizontal scroll list, etc.) \u2014 wrap=true keeps the row\n     layout because the user explicitly asked for it. */\n  .rui-stack[data-direction=\"row\"]:not([data-wrap=\"true\"]),\n  .rui-stack[data-direction=\"row-reverse\"]:not([data-wrap=\"true\"]) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  /* Hero collapses to a single column so the title stays readable. */\n  .rui-hero[data-has-image=\"true\"] { grid-template-columns: 1fr; }\n  .rui-hero-media { justify-content: center; }\n  .rui-page-header-title-row { flex-direction: column; }\n  .rui-page-header-actions { width: 100%; }\n  .rui-sheet { width: 100vw; }\n  /* App shell + split view collapse to single column on phones. */\n  .rui-app-shell { flex-direction: column; }\n  .rui-sidebar { width: 100%; }\n  .rui-split-view { grid-template-columns: 1fr; }\n  .rui-description-list[data-columns=\"2\"] { grid-template-columns: 1fr; }\n  .rui-toolbar { padding: var(--rui-spacing-s); }\n  .rui-toolbar .rui-input,\n  .rui-toolbar .rui-select { min-width: 0; flex: 1 1 100%; }\n  .rui-section-header { flex-direction: column; }\n  .rui-section-header-actions { width: 100%; }\n  /* Richer composition primitives shrink/wrap on phones. */\n  .rui-cover { padding: var(--rui-spacing-l); border-radius: var(--rui-radius-md); }\n  .rui-media-card[data-orientation=\"horizontal\"] {\n    flex-direction: column;\n  }\n  .rui-media-card[data-orientation=\"horizontal\"] .rui-media-card-media {\n    width: 100%;\n    max-width: 100%;\n  }\n  .rui-stats { gap: var(--rui-spacing-m); }\n  .rui-stats-item { padding: 0; border-left: none; padding-bottom: var(--rui-spacing-s); }\n  .rui-notification { padding: var(--rui-spacing-s) var(--rui-spacing-m); }\n  .rui-notification-head { flex-direction: column; align-items: flex-start; gap: 2px; }\n  .rui-search-bar-shortcut { display: none; }\n  .rui-chat-bubble-bubble { max-width: 86%; }\n}\n\n@media (max-width: 480px) {\n  :host { font-size: 13.5px; }\n  .rui-card { padding: var(--rui-spacing-m); }\n  .rui-card-footer { justify-content: stretch; }\n  .rui-card-footer .rui-button { flex: 1 1 auto; }\n  .rui-tab-trigger { padding: var(--rui-spacing-xs) var(--rui-spacing-s); font-size: 13px; }\n  .rui-stat-card { width: 100%; }\n}\n\n/* ========================================================================\n   Theme-specific overrides.\n   The host carries data-rui-theme so themes can change layout, fonts,\n   shadows, and animations on top of their token map.\n   ======================================================================== */\n\n/* Neon \u2014 subtle scanlines on cards, glowing focus rings, animated primary\n   buttons, sharper typography. */\n:host([data-rui-theme=\"neon\"]) {\n  letter-spacing: 0.01em;\n  background:\n    radial-gradient(60vw 60vw at 110% -10%, rgba(236, 72, 153, 0.18), transparent 60%),\n    radial-gradient(50vw 50vw at -10% 110%, rgba(34, 211, 238, 0.18), transparent 60%),\n    var(--rui-color-bg);\n}\n:host([data-rui-theme=\"neon\"][transparent]),\n:host([data-rui-theme=\"neon\"][transparent=\"true\"]) {\n  background: transparent;\n}\n:host([data-rui-theme=\"neon\"]) .rui-card,\n:host([data-rui-theme=\"neon\"]) .rui-stat-card,\n:host([data-rui-theme=\"neon\"]) .rui-callout,\n:host([data-rui-theme=\"neon\"]) .rui-chart {\n  background:\n    linear-gradient(180deg, rgba(236, 72, 153, 0.04), rgba(34, 211, 238, 0.04)),\n    var(--rui-color-surface);\n  border-color: rgba(236, 72, 153, 0.35);\n  box-shadow: var(--rui-shadow-sm);\n  position: relative;\n}\n:host([data-rui-theme=\"neon\"]) .rui-card::before,\n:host([data-rui-theme=\"neon\"]) .rui-stat-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  border-radius: inherit;\n  background: linear-gradient(transparent 96%, rgba(236, 72, 153, 0.08) 96%);\n  background-size: 100% 4px;\n  opacity: 0.45;\n}\n:host([data-rui-theme=\"neon\"]) .rui-card-title,\n:host([data-rui-theme=\"neon\"]) .rui-section-title,\n:host([data-rui-theme=\"neon\"]) .rui-header-title,\n:host([data-rui-theme=\"neon\"]) .rui-text[data-variant=\"title\"],\n:host([data-rui-theme=\"neon\"]) .rui-text[data-variant=\"heading\"],\n:host([data-rui-theme=\"neon\"]) .rui-text[data-variant=\"large-heavy\"] {\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n:host([data-rui-theme=\"neon\"]) .rui-button {\n  background: linear-gradient(135deg, #ec4899, #22d3ee);\n  color: #05060f;\n  border: 1px solid rgba(236, 72, 153, 0.6);\n  box-shadow: 0 0 18px rgba(236, 72, 153, 0.45);\n}\n:host([data-rui-theme=\"neon\"]) .rui-button:hover:not(:disabled) {\n  background: linear-gradient(135deg, #f472b6, #67e8f9);\n  box-shadow: 0 0 24px rgba(34, 211, 238, 0.55);\n  transform: translateY(-1px);\n}\n:host([data-rui-theme=\"neon\"]) .rui-button[data-variant=\"secondary\"] {\n  background: rgba(236, 72, 153, 0.08);\n  color: var(--rui-color-text);\n  border-color: rgba(236, 72, 153, 0.45);\n  box-shadow: none;\n}\n:host([data-rui-theme=\"neon\"]) .rui-button[data-variant=\"ghost\"] {\n  background: transparent;\n  border-color: rgba(34, 211, 238, 0.4);\n  color: var(--rui-color-text);\n  box-shadow: none;\n}\n:host([data-rui-theme=\"neon\"]) .rui-input:focus,\n:host([data-rui-theme=\"neon\"]) .rui-textarea:focus,\n:host([data-rui-theme=\"neon\"]) .rui-select:focus {\n  box-shadow: 0 0 0 1px var(--rui-color-primary), 0 0 18px rgba(236, 72, 153, 0.45);\n}\n:host([data-rui-theme=\"neon\"]) .rui-tab-trigger[aria-selected=\"true\"] {\n  text-shadow: 0 0 12px rgba(236, 72, 153, 0.55);\n}\n:host([data-rui-theme=\"neon\"]) .rui-table th {\n  background: rgba(236, 72, 153, 0.08);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-size: 12px;\n}\n:host([data-rui-theme=\"neon\"]) .rui-follow-up-button {\n  background: rgba(34, 211, 238, 0.06);\n  border-color: rgba(34, 211, 238, 0.4);\n}\n:host([data-rui-theme=\"neon\"]) .rui-follow-up-button:hover {\n  background: rgba(236, 72, 153, 0.15);\n  border-color: rgba(236, 72, 153, 0.65);\n  box-shadow: 0 0 18px rgba(236, 72, 153, 0.35);\n}\n\n/* Pastel \u2014 friendly, super-rounded everything, soft drop-shadows, cards\n   subtly lift on hover, gentle pop animation when buttons are pressed. */\n:host([data-rui-theme=\"pastel\"]) {\n  background:\n    radial-gradient(80vw 60vw at 100% 0%, rgba(167, 139, 250, 0.18), transparent 60%),\n    radial-gradient(70vw 50vw at 0% 100%, rgba(94, 234, 212, 0.18), transparent 60%),\n    var(--rui-color-bg);\n}\n:host([data-rui-theme=\"pastel\"][transparent]),\n:host([data-rui-theme=\"pastel\"][transparent=\"true\"]) {\n  background: transparent;\n}\n:host([data-rui-theme=\"pastel\"]) .rui-card,\n:host([data-rui-theme=\"pastel\"]) .rui-stat-card,\n:host([data-rui-theme=\"pastel\"]) .rui-chart,\n:host([data-rui-theme=\"pastel\"]) .rui-callout {\n  border-color: var(--rui-color-border);\n  transition: transform 220ms ease, box-shadow 220ms ease;\n}\n:host([data-rui-theme=\"pastel\"]) .rui-card:hover,\n:host([data-rui-theme=\"pastel\"]) .rui-stat-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--rui-shadow-md);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-card-title,\n:host([data-rui-theme=\"pastel\"]) .rui-section-title,\n:host([data-rui-theme=\"pastel\"]) .rui-header-title,\n:host([data-rui-theme=\"pastel\"]) .rui-text[data-variant=\"title\"],\n:host([data-rui-theme=\"pastel\"]) .rui-text[data-variant=\"heading\"] {\n  font-weight: 700;\n  background: linear-gradient(135deg, #8b5cf6, #f9a8d4);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n:host([data-rui-theme=\"pastel\"]) .rui-button {\n  background: linear-gradient(135deg, #a78bfa, #f9a8d4);\n  border-radius: 999px;\n  padding: 10px 18px;\n  box-shadow: 0 6px 16px rgba(167, 139, 250, 0.28);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-button:hover:not(:disabled) {\n  transform: translateY(-1px) scale(1.02);\n  box-shadow: 0 10px 22px rgba(167, 139, 250, 0.36);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-button:active:not(:disabled) {\n  transform: scale(0.98);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-button[data-variant=\"secondary\"] {\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.12);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-button[data-variant=\"ghost\"] {\n  background: transparent;\n  border-color: var(--rui-color-border);\n  color: var(--rui-color-text);\n  box-shadow: none;\n}\n:host([data-rui-theme=\"pastel\"]) .rui-input,\n:host([data-rui-theme=\"pastel\"]) .rui-select,\n:host([data-rui-theme=\"pastel\"]) .rui-textarea {\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-tab-list { border-bottom-color: var(--rui-color-border); }\n:host([data-rui-theme=\"pastel\"]) .rui-tab-trigger[aria-selected=\"true\"] {\n  background: rgba(167, 139, 250, 0.10);\n  border-radius: var(--rui-radius-md) var(--rui-radius-md) 0 0;\n}\n:host([data-rui-theme=\"pastel\"]) .rui-badge[data-variant=\"primary\"] {\n  background: linear-gradient(135deg, #a78bfa, #f9a8d4);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-follow-up-button {\n  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(249, 168, 212, 0.10));\n  border-color: var(--rui-color-border);\n}\n:host([data-rui-theme=\"pastel\"]) .rui-follow-up-button:hover {\n  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(249, 168, 212, 0.22));\n  transform: translateY(-1px);\n}\n\n/* Glass \u2014 frosted translucent surfaces over a vivid gradient backdrop.\n   Cards use real backdrop-filter blur so they pick up whatever sits behind\n   the host. Buttons get a soft inner highlight. */\n:host([data-rui-theme=\"glass\"]) {\n  background:\n    radial-gradient(60vw 60vw at 0% 0%, rgba(96, 165, 250, 0.45), transparent 60%),\n    radial-gradient(50vw 50vw at 100% 0%, rgba(167, 139, 250, 0.40), transparent 55%),\n    radial-gradient(70vw 60vw at 50% 110%, rgba(34, 211, 238, 0.30), transparent 60%),\n    linear-gradient(135deg, #0b132b 0%, #1a2454 60%, #1f3a8a 100%);\n  background-attachment: local;\n}\n:host([data-rui-theme=\"glass\"][transparent]),\n:host([data-rui-theme=\"glass\"][transparent=\"true\"]) {\n  background: transparent;\n}\n:host([data-rui-theme=\"glass\"]) .rui-card,\n:host([data-rui-theme=\"glass\"]) .rui-stat-card,\n:host([data-rui-theme=\"glass\"]) .rui-callout,\n:host([data-rui-theme=\"glass\"]) .rui-chart,\n:host([data-rui-theme=\"glass\"]) .rui-table-wrapper,\n:host([data-rui-theme=\"glass\"]) .rui-accordion-item,\n:host([data-rui-theme=\"glass\"]) .rui-list-item,\n:host([data-rui-theme=\"glass\"]) .rui-modal,\n:host([data-rui-theme=\"glass\"]) .rui-code-block {\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));\n  backdrop-filter: blur(18px) saturate(140%);\n  -webkit-backdrop-filter: blur(18px) saturate(140%);\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  box-shadow:\n    0 18px 50px rgba(7, 14, 33, 0.45),\n    inset 0 1px 0 rgba(255, 255, 255, 0.10);\n}\n:host([data-rui-theme=\"glass\"]) .rui-input,\n:host([data-rui-theme=\"glass\"]) .rui-select,\n:host([data-rui-theme=\"glass\"]) .rui-textarea {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(255, 255, 255, 0.18);\n  color: var(--rui-color-text);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n:host([data-rui-theme=\"glass\"]) .rui-input::placeholder,\n:host([data-rui-theme=\"glass\"]) .rui-textarea::placeholder { color: rgba(241, 245, 255, 0.45); }\n:host([data-rui-theme=\"glass\"]) .rui-input:focus,\n:host([data-rui-theme=\"glass\"]) .rui-select:focus,\n:host([data-rui-theme=\"glass\"]) .rui-textarea:focus {\n  border-color: rgba(96, 165, 250, 0.85);\n  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.20);\n  background: rgba(255, 255, 255, 0.14);\n}\n:host([data-rui-theme=\"glass\"]) .rui-button {\n  background: linear-gradient(135deg, #60a5fa, #22d3ee);\n  color: #0b132b;\n  border: 1px solid rgba(255, 255, 255, 0.30);\n  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);\n}\n:host([data-rui-theme=\"glass\"]) .rui-button:hover:not(:disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 14px 30px rgba(34, 211, 238, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.50);\n}\n:host([data-rui-theme=\"glass\"]) .rui-button[data-variant=\"secondary\"] {\n  background: rgba(255, 255, 255, 0.10);\n  color: var(--rui-color-text);\n  border-color: rgba(255, 255, 255, 0.25);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);\n}\n:host([data-rui-theme=\"glass\"]) .rui-button[data-variant=\"ghost\"] {\n  background: transparent;\n  color: var(--rui-color-text);\n  border-color: rgba(255, 255, 255, 0.20);\n  box-shadow: none;\n}\n:host([data-rui-theme=\"glass\"]) .rui-card-title,\n:host([data-rui-theme=\"glass\"]) .rui-section-title,\n:host([data-rui-theme=\"glass\"]) .rui-header-title,\n:host([data-rui-theme=\"glass\"]) .rui-text[data-variant=\"title\"],\n:host([data-rui-theme=\"glass\"]) .rui-text[data-variant=\"heading\"] {\n  background: linear-gradient(135deg, #ffffff, #c7d2fe 60%, #a5f3fc);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  letter-spacing: -0.01em;\n}\n:host([data-rui-theme=\"glass\"]) .rui-tab-list { border-bottom-color: rgba(255, 255, 255, 0.15); }\n:host([data-rui-theme=\"glass\"]) .rui-tab-trigger { color: rgba(241, 245, 255, 0.65); }\n:host([data-rui-theme=\"glass\"]) .rui-tab-trigger:hover { color: #ffffff; }\n:host([data-rui-theme=\"glass\"]) .rui-tab-trigger[aria-selected=\"true\"] {\n  color: #ffffff;\n  border-bottom-color: #60a5fa;\n}\n:host([data-rui-theme=\"glass\"]) .rui-table th {\n  background: rgba(255, 255, 255, 0.08);\n  border-bottom-color: rgba(255, 255, 255, 0.15);\n}\n:host([data-rui-theme=\"glass\"]) .rui-table td { border-bottom-color: rgba(255, 255, 255, 0.10); }\n:host([data-rui-theme=\"glass\"]) .rui-follow-up-button {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(255, 255, 255, 0.20);\n  color: var(--rui-color-text);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n:host([data-rui-theme=\"glass\"]) .rui-follow-up-button:hover {\n  background: rgba(255, 255, 255, 0.14);\n  border-color: rgba(96, 165, 250, 0.55);\n  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.20);\n}\n:host([data-rui-theme=\"glass\"]) .rui-skeleton-line {\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.08) 100%);\n  background-size: 200% 100%;\n}\n:host([data-rui-theme=\"glass\"]) .rui-divider { background: rgba(255, 255, 255, 0.15); }\n:host([data-rui-theme=\"glass\"]) .rui-separator { background: rgba(255, 255, 255, 0.15); }\n\n/* Brutalist \u2014 chunky borders, hard offset shadows, no gradients, all-caps\n   display type. The aesthetic only works with sharp geometry, so we override\n   the radii on every container in case the user passes a custom token map. */\n:host([data-rui-theme=\"brutalist\"]) {\n  background:\n    repeating-linear-gradient(\n      45deg,\n      transparent 0,\n      transparent 22px,\n      rgba(10, 10, 10, 0.04) 22px,\n      rgba(10, 10, 10, 0.04) 24px\n    ),\n    var(--rui-color-bg);\n  font-weight: 500;\n}\n:host([data-rui-theme=\"brutalist\"][transparent]),\n:host([data-rui-theme=\"brutalist\"][transparent=\"true\"]) {\n  background: transparent;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-card,\n:host([data-rui-theme=\"brutalist\"]) .rui-stat-card,\n:host([data-rui-theme=\"brutalist\"]) .rui-chart,\n:host([data-rui-theme=\"brutalist\"]) .rui-callout,\n:host([data-rui-theme=\"brutalist\"]) .rui-table-wrapper,\n:host([data-rui-theme=\"brutalist\"]) .rui-accordion-item,\n:host([data-rui-theme=\"brutalist\"]) .rui-list-item,\n:host([data-rui-theme=\"brutalist\"]) .rui-modal,\n:host([data-rui-theme=\"brutalist\"]) .rui-code-block {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  box-shadow: 6px 6px 0 0 #0a0a0a;\n  background: var(--rui-color-surface);\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-card[data-variant=\"elevated\"] { box-shadow: 8px 8px 0 0 #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-card[data-variant=\"outlined\"] { box-shadow: 3px 3px 0 0 #0a0a0a; }\n\n:host([data-rui-theme=\"brutalist\"]) .rui-card-title,\n:host([data-rui-theme=\"brutalist\"]) .rui-section-title,\n:host([data-rui-theme=\"brutalist\"]) .rui-header-title,\n:host([data-rui-theme=\"brutalist\"]) .rui-text[data-variant=\"title\"],\n:host([data-rui-theme=\"brutalist\"]) .rui-text[data-variant=\"heading\"],\n:host([data-rui-theme=\"brutalist\"]) .rui-text[data-variant=\"large-heavy\"] {\n  text-transform: uppercase;\n  letter-spacing: -0.01em;\n  font-weight: 800;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-button {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  box-shadow: 4px 4px 0 0 #0a0a0a;\n  transition: transform 80ms ease, box-shadow 80ms ease;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-button:hover:not(:disabled) {\n  transform: translate(-1px, -1px);\n  box-shadow: 5px 5px 0 0 #0a0a0a;\n  background: var(--rui-color-primary);\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-button:active:not(:disabled) {\n  transform: translate(2px, 2px);\n  box-shadow: 1px 1px 0 0 #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-button[data-variant=\"secondary\"] {\n  background: #ffffff;\n  color: #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-button[data-variant=\"ghost\"] {\n  background: var(--rui-color-bg);\n  color: #0a0a0a;\n  box-shadow: 3px 3px 0 0 #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-button[data-variant=\"danger\"] {\n  background: var(--rui-color-danger);\n  color: #ffffff;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-input,\n:host([data-rui-theme=\"brutalist\"]) .rui-select,\n:host([data-rui-theme=\"brutalist\"]) .rui-textarea {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  background: #ffffff;\n  font-weight: 500;\n  box-shadow: 3px 3px 0 0 #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-input:focus,\n:host([data-rui-theme=\"brutalist\"]) .rui-select:focus,\n:host([data-rui-theme=\"brutalist\"]) .rui-textarea:focus {\n  border-color: var(--rui-color-primary);\n  box-shadow: 3px 3px 0 0 var(--rui-color-primary);\n  outline: none;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-tag,\n:host([data-rui-theme=\"brutalist\"]) .rui-badge {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  background: var(--rui-color-warning);\n  color: #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-badge[data-variant=\"primary\"] {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-badge[data-variant=\"success\"] { background: var(--rui-color-success); color: #ffffff; }\n:host([data-rui-theme=\"brutalist\"]) .rui-badge[data-variant=\"warning\"] { background: var(--rui-color-warning); color: #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-badge[data-variant=\"danger\"] { background: var(--rui-color-danger); color: #ffffff; }\n\n:host([data-rui-theme=\"brutalist\"]) .rui-tab-list { border-bottom: 2px solid #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-tab-trigger {\n  border: 2px solid transparent;\n  border-bottom: none;\n  margin-bottom: -2px;\n  text-transform: uppercase;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-tab-trigger[aria-selected=\"true\"] {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n  border-color: #0a0a0a;\n  border-bottom-color: var(--rui-color-primary);\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-table th {\n  background: #0a0a0a;\n  color: #fef9c3;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  font-weight: 800;\n  border-bottom: 2px solid #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-table td { border-bottom: 1px solid #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-table-caption {\n  background: var(--rui-color-warning);\n  color: #0a0a0a;\n  font-weight: 800;\n  text-transform: uppercase;\n  border-bottom: 2px solid #0a0a0a;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-follow-up-button {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  background: var(--rui-color-warning);\n  color: #0a0a0a;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  box-shadow: 3px 3px 0 0 #0a0a0a;\n}\n:host([data-rui-theme=\"brutalist\"]) .rui-follow-up-button:hover {\n  transform: translate(-1px, -1px);\n  box-shadow: 4px 4px 0 0 #0a0a0a;\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text);\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-divider,\n:host([data-rui-theme=\"brutalist\"]) .rui-separator { background: #0a0a0a; height: 2px; }\n:host([data-rui-theme=\"brutalist\"]) .rui-separator[data-orientation=\"vertical\"] { width: 2px; height: auto; }\n\n:host([data-rui-theme=\"brutalist\"]) .rui-callout[data-variant=\"info\"] { background: #bfdbfe; color: #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-callout[data-variant=\"success\"] { background: #bbf7d0; color: #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-callout[data-variant=\"warning\"] { background: var(--rui-color-warning); color: #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-callout[data-variant=\"danger\"],\n:host([data-rui-theme=\"brutalist\"]) .rui-callout[data-variant=\"error\"] { background: #fecaca; color: #0a0a0a; }\n:host([data-rui-theme=\"brutalist\"]) .rui-callout-icon {\n  border: 2px solid #0a0a0a;\n  border-radius: 0;\n  width: 26px;\n  height: 26px;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-stat-value { font-weight: 900; }\n:host([data-rui-theme=\"brutalist\"]) .rui-stat-label { font-weight: 800; color: #0a0a0a; }\n\n:host([data-rui-theme=\"brutalist\"]) .rui-steps-item::before {\n  border-radius: 0;\n  border: 2px solid #0a0a0a;\n  background: var(--rui-color-warning);\n  color: #0a0a0a;\n  font-weight: 900;\n}\n\n:host([data-rui-theme=\"brutalist\"]) .rui-link {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 3px;\n  font-weight: 700;\n}\n\n/* Skyline \u2014 enterprise cloud-console look. Calm navy + cyan, crisp 1px\n   borders, small radii, accent strip on primary cards, animated underline\n   on tabs. Designed to look at home in an admin dashboard. */\n:host([data-rui-theme=\"skyline\"]) {\n  background:\n    linear-gradient(180deg, #eff2f7 0%, #e6ecf3 100%);\n  font-feature-settings: \"ss01\", \"cv11\";\n}\n:host([data-rui-theme=\"skyline\"][transparent]),\n:host([data-rui-theme=\"skyline\"][transparent=\"true\"]) {\n  background: transparent;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-card,\n:host([data-rui-theme=\"skyline\"]) .rui-stat-card,\n:host([data-rui-theme=\"skyline\"]) .rui-callout,\n:host([data-rui-theme=\"skyline\"]) .rui-chart,\n:host([data-rui-theme=\"skyline\"]) .rui-table-wrapper,\n:host([data-rui-theme=\"skyline\"]) .rui-accordion-item,\n:host([data-rui-theme=\"skyline\"]) .rui-list-item,\n:host([data-rui-theme=\"skyline\"]) .rui-modal,\n:host([data-rui-theme=\"skyline\"]) .rui-code-block {\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  box-shadow: var(--rui-shadow-sm);\n  transition: border-color 160ms ease, box-shadow 200ms ease, transform 160ms ease;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-card:hover {\n  border-color: color-mix(in srgb, var(--rui-color-primary) 28%, var(--rui-color-border));\n  box-shadow: var(--rui-shadow-md);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-card[data-variant=\"elevated\"] {\n  position: relative;\n  overflow: hidden;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-card[data-variant=\"elevated\"]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(180deg, var(--rui-color-primary), var(--rui-color-info));\n}\n:host([data-rui-theme=\"skyline\"]) .rui-card-title,\n:host([data-rui-theme=\"skyline\"]) .rui-section-title,\n:host([data-rui-theme=\"skyline\"]) .rui-header-title,\n:host([data-rui-theme=\"skyline\"]) .rui-text[data-variant=\"title\"],\n:host([data-rui-theme=\"skyline\"]) .rui-text[data-variant=\"heading\"],\n:host([data-rui-theme=\"skyline\"]) .rui-text[data-variant=\"large-heavy\"] {\n  color: var(--rui-color-primary);\n  letter-spacing: -0.01em;\n  font-weight: 600;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button {\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-primary);\n  font-weight: 500;\n  letter-spacing: 0.01em;\n  box-shadow: 0 1px 0 rgba(13, 27, 58, 0.06);\n  transition: background 140ms ease, transform 80ms ease, box-shadow 160ms ease;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button:hover:not(:disabled) {\n  background: var(--rui-color-primary-hover);\n  box-shadow: 0 4px 10px rgba(0, 53, 128, 0.18);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button:active:not(:disabled) {\n  transform: translateY(1px);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button[data-variant=\"secondary\"] {\n  background: var(--rui-color-surface);\n  color: var(--rui-color-primary);\n  border: 1px solid var(--rui-color-primary);\n  box-shadow: none;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button[data-variant=\"secondary\"]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--rui-color-primary) 6%, var(--rui-color-surface));\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button[data-variant=\"ghost\"] {\n  background: transparent;\n  color: var(--rui-color-primary);\n  border-color: transparent;\n  box-shadow: none;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-button[data-variant=\"ghost\"]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--rui-color-primary) 8%, transparent);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-input,\n:host([data-rui-theme=\"skyline\"]) .rui-select,\n:host([data-rui-theme=\"skyline\"]) .rui-textarea {\n  background: var(--rui-color-surface);\n  border-color: var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n  transition: border-color 140ms ease, box-shadow 160ms ease;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-input:focus,\n:host([data-rui-theme=\"skyline\"]) .rui-select:focus,\n:host([data-rui-theme=\"skyline\"]) .rui-textarea:focus {\n  border-color: var(--rui-color-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-info) 22%, transparent);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tab-list {\n  border-bottom-color: var(--rui-color-border);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tab-trigger {\n  font-weight: 500;\n  color: var(--rui-color-text-muted);\n  border-bottom-width: 2px;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tab-trigger:hover {\n  color: var(--rui-color-primary);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tab-trigger[aria-selected=\"true\"] {\n  color: var(--rui-color-info);\n  border-bottom-color: var(--rui-color-info);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-table th {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text-muted);\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  border-bottom-color: var(--rui-color-border);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-table td {\n  border-bottom-color: var(--rui-color-border-subtle);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-table tbody tr:hover td {\n  background: color-mix(in srgb, var(--rui-color-info) 5%, transparent);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tag,\n:host([data-rui-theme=\"skyline\"]) .rui-badge {\n  border-radius: 999px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-tag::before {\n  content: \"\";\n  width: 6px;\n  height: 6px;\n  border-radius: 999px;\n  background: currentColor;\n  display: inline-block;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-badge[data-variant=\"primary\"] {\n  background: color-mix(in srgb, var(--rui-color-info) 14%, transparent);\n  color: var(--rui-color-info);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-stat-value {\n  color: var(--rui-color-primary);\n  font-weight: 700;\n  letter-spacing: -0.02em;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-stat-label {\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-callout[data-variant=\"info\"] .rui-callout-icon,\n:host([data-rui-theme=\"skyline\"]) .rui-callout[data-variant=\"success\"] .rui-callout-icon,\n:host([data-rui-theme=\"skyline\"]) .rui-callout[data-variant=\"warning\"] .rui-callout-icon,\n:host([data-rui-theme=\"skyline\"]) .rui-callout[data-variant=\"danger\"] .rui-callout-icon,\n:host([data-rui-theme=\"skyline\"]) .rui-callout[data-variant=\"error\"] .rui-callout-icon {\n  border-radius: 999px;\n  width: 20px;\n  height: 20px;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-link {\n  color: var(--rui-color-info);\n  font-weight: 500;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-follow-up-button {\n  background: var(--rui-color-surface);\n  border-color: var(--rui-color-border);\n  color: var(--rui-color-primary);\n  font-weight: 500;\n  border-radius: var(--rui-radius-sm);\n  transition: background 140ms ease, border-color 140ms ease;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-follow-up-button:hover {\n  background: color-mix(in srgb, var(--rui-color-info) 8%, var(--rui-color-surface));\n  border-color: var(--rui-color-info);\n  color: var(--rui-color-info);\n}\n:host([data-rui-theme=\"skyline\"]) .rui-steps-item::before {\n  background: var(--rui-color-surface);\n  color: var(--rui-color-primary);\n  border: 1px solid var(--rui-color-primary);\n  font-weight: 600;\n}\n:host([data-rui-theme=\"skyline\"]) .rui-divider,\n:host([data-rui-theme=\"skyline\"]) .rui-separator {\n  background: var(--rui-color-border);\n}\n\n/* ----------------------------------------------------------------------- */\n/* DropdownMenu / MenuItem / MenuSeparator / MenuLabel                     */\n/* ----------------------------------------------------------------------- */\n.rui-dropdown-menu {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n}\n.rui-dropdown-menu-trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  border-radius: var(--rui-radius-sm);\n}\n.rui-dropdown-menu-trigger:focus-visible,\n.rui-dropdown-menu-trigger:focus-within {\n  outline: 2px solid color-mix(in srgb, var(--rui-color-primary) 60%, transparent);\n  outline-offset: 2px;\n}\n.rui-dropdown-menu-trigger[data-state=\"open\"] { z-index: 41; }\n.rui-dropdown-menu-content {\n  position: absolute;\n  z-index: 40;\n  min-width: 200px;\n  padding: 6px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  display: none;\n  flex-direction: column;\n  gap: 2px;\n}\n.rui-dropdown-menu[data-open=\"true\"] > .rui-dropdown-menu-content { display: flex; }\n.rui-dropdown-menu[data-side=\"bottom\"] > .rui-dropdown-menu-content {\n  top: calc(100% + 6px);\n}\n.rui-dropdown-menu[data-side=\"top\"] > .rui-dropdown-menu-content {\n  bottom: calc(100% + 6px);\n}\n.rui-dropdown-menu[data-side=\"right\"] > .rui-dropdown-menu-content {\n  left: calc(100% + 6px);\n  top: 0;\n}\n.rui-dropdown-menu[data-side=\"left\"] > .rui-dropdown-menu-content {\n  right: calc(100% + 6px);\n  top: 0;\n}\n.rui-dropdown-menu[data-align=\"start\"][data-side=\"bottom\"] > .rui-dropdown-menu-content,\n.rui-dropdown-menu[data-align=\"start\"][data-side=\"top\"] > .rui-dropdown-menu-content { left: 0; }\n.rui-dropdown-menu[data-align=\"center\"][data-side=\"bottom\"] > .rui-dropdown-menu-content,\n.rui-dropdown-menu[data-align=\"center\"][data-side=\"top\"] > .rui-dropdown-menu-content {\n  left: 50%; transform: translateX(-50%);\n}\n.rui-dropdown-menu[data-align=\"end\"][data-side=\"bottom\"] > .rui-dropdown-menu-content,\n.rui-dropdown-menu[data-align=\"end\"][data-side=\"top\"] > .rui-dropdown-menu-content { right: 0; }\n.rui-menu-item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  padding: 6px 10px;\n  border-radius: var(--rui-radius-sm);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-size: 13px;\n  line-height: 1.2;\n}\n.rui-menu-item:hover:not(:disabled),\n.rui-menu-item:focus-visible {\n  background: var(--rui-color-surface-muted);\n  outline: none;\n}\n.rui-menu-item:disabled { opacity: 0.55; cursor: not-allowed; }\n.rui-menu-item[data-variant=\"danger\"] { color: var(--rui-color-danger); }\n.rui-menu-item[data-variant=\"danger\"]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--rui-color-danger) 12%, transparent);\n}\n.rui-menu-item-icon { width: 14px; display: inline-flex; justify-content: center; }\n.rui-menu-item-label { flex: 1; min-width: 0; }\n.rui-menu-item-shortcut {\n  font-size: 11px;\n  color: var(--rui-color-text-muted);\n  font-family: var(--rui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n}\n.rui-menu-separator {\n  height: 1px;\n  background: var(--rui-color-border-subtle);\n  margin: 4px 0;\n}\n.rui-menu-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n  padding: 6px 10px 4px;\n}\n\n/* ----------------------------------------------------------------------- */\n/* Popover                                                                 */\n/* ----------------------------------------------------------------------- */\n.rui-popover {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n}\n.rui-popover-trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  border-radius: var(--rui-radius-sm);\n}\n.rui-popover-trigger:focus-visible,\n.rui-popover-trigger:focus-within {\n  outline: 2px solid color-mix(in srgb, var(--rui-color-primary) 60%, transparent);\n  outline-offset: 2px;\n}\n.rui-popover-trigger[data-state=\"open\"] { z-index: 41; }\n.rui-popover-content {\n  position: absolute;\n  z-index: 40;\n  width: 280px;\n  max-width: min(360px, calc(100vw - 32px));\n  padding: var(--rui-spacing-m);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  display: none;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  animation: rui-popover-in 140ms ease-out;\n}\n.rui-popover[data-open=\"true\"] > .rui-popover-content { display: flex; }\n.rui-popover[data-side=\"bottom\"] > .rui-popover-content { top: calc(100% + 8px); }\n.rui-popover[data-side=\"top\"] > .rui-popover-content { bottom: calc(100% + 8px); }\n.rui-popover[data-side=\"right\"] > .rui-popover-content { left: calc(100% + 8px); top: 0; }\n.rui-popover[data-side=\"left\"] > .rui-popover-content { right: calc(100% + 8px); top: 0; }\n.rui-popover[data-align=\"start\"][data-side=\"bottom\"] > .rui-popover-content,\n.rui-popover[data-align=\"start\"][data-side=\"top\"] > .rui-popover-content { left: 0; }\n.rui-popover[data-align=\"center\"][data-side=\"bottom\"] > .rui-popover-content,\n.rui-popover[data-align=\"center\"][data-side=\"top\"] > .rui-popover-content {\n  left: 50%; transform: translateX(-50%);\n}\n.rui-popover[data-align=\"end\"][data-side=\"bottom\"] > .rui-popover-content,\n.rui-popover[data-align=\"end\"][data-side=\"top\"] > .rui-popover-content { right: 0; }\n.rui-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-s);\n  margin: calc(var(--rui-spacing-xs) * -1) calc(var(--rui-spacing-xs) * -1) 0;\n}\n.rui-popover-title {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--rui-color-text);\n}\n.rui-popover-title-spacer { display: block; flex: 1; }\n.rui-popover-close {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: var(--rui-color-text-muted);\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--rui-radius-sm);\n  font-size: 18px;\n  line-height: 1;\n  transition: background 150ms ease, color 150ms ease;\n}\n.rui-popover-close:hover {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text);\n}\n.rui-popover-close:focus-visible {\n  outline: 2px solid color-mix(in srgb, var(--rui-color-primary) 60%, transparent);\n  outline-offset: 1px;\n}\n@keyframes rui-popover-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.rui-popover[data-side=\"top\"] > .rui-popover-content { animation-name: rui-popover-in-up; }\n@keyframes rui-popover-in-up {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ----------------------------------------------------------------------- */\n/* Toast / Toasts                                                          */\n/* ----------------------------------------------------------------------- */\n.rui-toasts {\n  position: fixed;\n  z-index: 60;\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n  pointer-events: none;\n  max-width: min(360px, calc(100% - 32px));\n}\n.rui-toasts > * { pointer-events: auto; }\n.rui-toasts[data-position=\"top-right\"] { top: 16px; right: 16px; align-items: flex-end; }\n.rui-toasts[data-position=\"top-left\"] { top: 16px; left: 16px; align-items: flex-start; }\n.rui-toasts[data-position=\"top-center\"] { top: 16px; left: 50%; transform: translateX(-50%); align-items: center; }\n.rui-toasts[data-position=\"bottom-right\"] { bottom: 16px; right: 16px; align-items: flex-end; flex-direction: column-reverse; }\n.rui-toasts[data-position=\"bottom-left\"] { bottom: 16px; left: 16px; align-items: flex-start; flex-direction: column-reverse; }\n.rui-toasts[data-position=\"bottom-center\"] { bottom: 16px; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }\n.rui-toast {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--rui-spacing-s);\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  min-width: 240px;\n  animation: rui-toast-in 200ms ease-out;\n  transition: opacity 180ms ease, transform 180ms ease;\n}\n.rui-toast.is-dismissed {\n  opacity: 0;\n  transform: translateX(12px);\n  pointer-events: none;\n}\n.rui-toasts[data-position^=\"top-left\"] .rui-toast.is-dismissed,\n.rui-toasts[data-position=\"bottom-left\"] .rui-toast.is-dismissed {\n  transform: translateX(-12px);\n}\n.rui-toast-placeholder { display: none !important; }\n.rui-toast-icon {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 999px;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  color: #ffffff;\n  background: var(--rui-color-text-muted);\n}\n.rui-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n.rui-toast-title { font-weight: 600; font-size: 13px; }\n.rui-toast-message { color: var(--rui-color-text-muted); font-size: 12px; line-height: 1.45; }\n.rui-toast-action { margin-top: 6px; }\n.rui-toast-close {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font-size: 18px;\n  line-height: 1;\n  color: var(--rui-color-text-muted);\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--rui-radius-sm);\n  margin: -2px -4px -2px 0;\n  transition: background 150ms ease, color 150ms ease;\n}\n.rui-toast-close:hover {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text);\n}\n.rui-toast-close:focus-visible {\n  outline: 2px solid color-mix(in srgb, var(--rui-color-primary) 60%, transparent);\n  outline-offset: 1px;\n}\n.rui-toast[data-tone=\"primary\"] .rui-toast-icon { background: var(--rui-color-primary); }\n.rui-toast[data-tone=\"success\"] .rui-toast-icon { background: var(--rui-color-success); }\n.rui-toast[data-tone=\"warning\"] .rui-toast-icon { background: var(--rui-color-warning); }\n.rui-toast[data-tone=\"danger\"] .rui-toast-icon { background: var(--rui-color-danger); }\n.rui-toast[data-tone=\"info\"] .rui-toast-icon { background: var(--rui-color-info); }\n.rui-toast[data-tone=\"success\"] { border-color: color-mix(in srgb, var(--rui-color-success) 36%, transparent); }\n.rui-toast[data-tone=\"warning\"] { border-color: color-mix(in srgb, var(--rui-color-warning) 36%, transparent); }\n.rui-toast[data-tone=\"danger\"] { border-color: color-mix(in srgb, var(--rui-color-danger) 36%, transparent); }\n.rui-toast[data-tone=\"info\"] { border-color: color-mix(in srgb, var(--rui-color-info) 36%, transparent); }\n@keyframes rui-toast-in {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ----------------------------------------------------------------------- */\n/* Slider                                                                  */\n/* ----------------------------------------------------------------------- */\n.rui-slider { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-slider-head { display: flex; justify-content: space-between; align-items: center; }\n.rui-slider-label { font-size: 13px; color: var(--rui-color-text); }\n.rui-slider-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--rui-color-primary);\n  font-variant-numeric: tabular-nums;\n}\n.rui-slider-input {\n  appearance: none;\n  width: 100%;\n  height: 6px;\n  background: var(--rui-color-surface-muted);\n  border-radius: 999px;\n  outline: none;\n  cursor: pointer;\n}\n.rui-slider[data-disabled=\"true\"] .rui-slider-input { opacity: 0.55; cursor: not-allowed; }\n.rui-slider-input::-webkit-slider-thumb {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: var(--rui-color-primary);\n  border: 2px solid var(--rui-color-surface);\n  box-shadow: var(--rui-shadow-sm);\n  cursor: pointer;\n}\n.rui-slider-input::-moz-range-thumb {\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: var(--rui-color-primary);\n  border: 2px solid var(--rui-color-surface);\n  box-shadow: var(--rui-shadow-sm);\n  cursor: pointer;\n}\n.rui-slider-input:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 30%, transparent);\n}\n.rui-slider-input:focus-visible::-moz-range-thumb {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 30%, transparent);\n}\n\n/* ----------------------------------------------------------------------- */\n/* NumberInput                                                             */\n/* ----------------------------------------------------------------------- */\n.rui-number-input {\n  display: flex;\n  align-items: stretch;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-surface);\n  overflow: hidden;\n  transition: border-color 150ms ease, box-shadow 150ms ease;\n}\n.rui-number-input:focus-within {\n  border-color: var(--rui-color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n}\n.rui-number-input-button {\n  appearance: none;\n  border: none;\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text);\n  flex: 0 0 auto;\n  width: 38px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 600;\n  cursor: pointer;\n  line-height: 1;\n  transition: background 150ms ease, color 150ms ease;\n}\n.rui-number-input-button[data-direction=\"down\"] {\n  border-right: 1px solid var(--rui-color-border);\n}\n.rui-number-input-button[data-direction=\"up\"] {\n  border-left: 1px solid var(--rui-color-border);\n}\n.rui-number-input-button:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--rui-color-primary) 10%, var(--rui-color-surface-muted));\n  color: var(--rui-color-primary);\n}\n.rui-number-input-button:active:not(:disabled) {\n  background: color-mix(in srgb, var(--rui-color-primary) 18%, var(--rui-color-surface-muted));\n}\n.rui-number-input-button:disabled { opacity: 0.5; cursor: not-allowed; }\n.rui-number-input-field {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 8px 12px;\n  color: inherit;\n  font: inherit;\n  flex: 1 1 auto;\n  min-width: 0;\n  width: auto;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.rui-number-input-field:focus { outline: none; }\n.rui-number-input-field::-webkit-outer-spin-button,\n.rui-number-input-field::-webkit-inner-spin-button { appearance: none; margin: 0; }\n.rui-number-input[data-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* ----------------------------------------------------------------------- */\n/* DatePicker                                                              */\n/* ----------------------------------------------------------------------- */\n.rui-date-picker { display: flex; flex-direction: column; gap: var(--rui-spacing-xs); }\n.rui-date-picker-label { font-size: 13px; color: var(--rui-color-text); }\n.rui-date-picker-input {\n  appearance: none;\n  padding: 8px 12px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-surface);\n  color: inherit;\n  font: inherit;\n  font-size: 13px;\n}\n.rui-date-picker-input:focus {\n  outline: none;\n  border-color: var(--rui-color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n}\n\n/* ----------------------------------------------------------------------- */\n/* FileUpload                                                              */\n/* ----------------------------------------------------------------------- */\n.rui-file-upload {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s);\n}\n.rui-file-upload-dropzone {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-m);\n  padding: var(--rui-spacing-m) var(--rui-spacing-l);\n  border: 1.5px dashed var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-bg-subtle);\n  cursor: pointer;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n.rui-file-upload-dropzone:hover {\n  border-color: var(--rui-color-primary);\n  background: color-mix(in srgb, var(--rui-color-primary) 5%, var(--rui-color-bg-subtle));\n}\n.rui-file-upload[data-disabled=\"true\"] { opacity: 0.55; }\n.rui-file-upload[data-disabled=\"true\"] .rui-file-upload-dropzone { cursor: not-allowed; }\n.rui-file-upload-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  font-size: 14px;\n}\n.rui-file-upload-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }\n.rui-file-upload-label { font-weight: 600; font-size: 13px; }\n.rui-file-upload-hint { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-file-upload-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.rui-file-upload-preview {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-xs, 4px);\n  padding: var(--rui-spacing-s) var(--rui-spacing-m);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  background: var(--rui-color-surface, var(--rui-color-bg-subtle));\n}\n.rui-file-upload-preview-item {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n}\n.rui-file-upload-thumbnail {\n  width: 56px;\n  height: 56px;\n  object-fit: cover;\n  border-radius: var(--rui-radius-sm);\n  border: 1px solid var(--rui-color-border);\n  flex-shrink: 0;\n}\n.rui-file-upload-filename {\n  font-size: 12.5px;\n  color: var(--rui-color-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n/* ----------------------------------------------------------------------- */\n/* Combobox                                                                */\n/* ----------------------------------------------------------------------- */\n.rui-combobox {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 200px;\n}\n.rui-combobox[data-disabled=\"true\"] { opacity: 0.55; }\n.rui-combobox-trigger {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-s);\n  padding: 8px 12px;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n  color: inherit;\n  font: inherit;\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n}\n.rui-combobox-trigger:focus-visible,\n.rui-combobox[data-open=\"true\"] .rui-combobox-trigger {\n  outline: none;\n  border-color: var(--rui-color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n}\n.rui-combobox-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.rui-combobox-value[data-placeholder=\"true\"] { color: var(--rui-color-text-muted); }\n.rui-combobox-chevron { color: var(--rui-color-text-muted); font-size: 11px; }\n.rui-combobox-panel {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  right: 0;\n  z-index: 40;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  display: none;\n  flex-direction: column;\n  padding: 6px;\n  gap: 4px;\n  max-height: 280px;\n}\n.rui-combobox[data-open=\"true\"] .rui-combobox-panel { display: flex; }\n.rui-combobox-filter {\n  appearance: none;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm);\n  padding: 6px 10px;\n  font: inherit;\n  font-size: 13px;\n  background: var(--rui-color-bg-subtle);\n}\n.rui-combobox-filter:focus {\n  outline: none;\n  border-color: var(--rui-color-primary);\n}\n.rui-combobox-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }\n.rui-combobox-option {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  padding: 6px 10px;\n  border-radius: var(--rui-radius-sm);\n  cursor: pointer;\n  font-size: 13px;\n}\n.rui-combobox-option:hover { background: var(--rui-color-surface-muted); }\n.rui-combobox-option[aria-selected=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  font-weight: 600;\n}\n.rui-combobox-empty {\n  padding: 12px;\n  color: var(--rui-color-text-muted);\n  font-size: 12px;\n  text-align: center;\n}\n\n/* ----------------------------------------------------------------------- */\n/* Tree / TreeNode                                                         */\n/* ----------------------------------------------------------------------- */\n.rui-tree {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n}\n.rui-tree-node {\n  display: flex;\n  flex-direction: column;\n}\n.rui-tree-node-summary {\n  list-style: none;\n  cursor: pointer;\n  display: block;\n}\n.rui-tree-node-summary::-webkit-details-marker { display: none; }\n.rui-tree-node-row {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-xs);\n  width: 100%;\n  padding: 4px 6px;\n  border-radius: var(--rui-radius-sm);\n  cursor: pointer;\n  text-align: left;\n}\n.rui-tree-node-row:hover { background: var(--rui-color-surface-muted); }\n.rui-tree-node-row[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  font-weight: 600;\n}\n.rui-tree-node-chevron {\n  font-size: 10px;\n  color: var(--rui-color-text-muted);\n  width: 14px;\n  display: inline-flex;\n  justify-content: center;\n  transition: transform 150ms ease;\n}\n.rui-tree-node[open] > .rui-tree-node-summary .rui-tree-node-chevron {\n  transform: rotate(90deg);\n}\n.rui-tree-node-chevron-spacer { width: 14px; }\n.rui-tree-node-icon { color: var(--rui-color-text-muted); font-size: 12px; }\n.rui-tree-node-row[data-active=\"true\"] .rui-tree-node-icon { color: var(--rui-color-primary); }\n.rui-tree-node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.rui-tree-node-badge {\n  background: var(--rui-color-surface-muted);\n  color: var(--rui-color-text-muted);\n  border-radius: 999px;\n  padding: 1px 8px;\n  font-size: 11px;\n  font-weight: 600;\n}\n.rui-tree-node-children {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: 16px;\n  border-left: 1px solid var(--rui-color-border-subtle);\n  margin-left: 8px;\n  margin-top: 2px;\n}\n\n/* ----------------------------------------------------------------------- */\n/* Navbar / NavbarItem                                                     */\n/* ----------------------------------------------------------------------- */\n.rui-navbar {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-l);\n  padding: var(--rui-spacing-s) var(--rui-spacing-l);\n  background: var(--rui-color-surface);\n  border-bottom: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md) var(--rui-radius-md) 0 0;\n}\n.rui-navbar[data-sticky=\"true\"] {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  backdrop-filter: blur(8px);\n  background: color-mix(in srgb, var(--rui-color-surface) 92%, transparent);\n}\n.rui-navbar[data-variant=\"transparent\"] {\n  background: transparent;\n  border-bottom-color: transparent;\n}\n.rui-navbar-brand {\n  font-weight: 700;\n  font-size: 15px;\n  color: var(--rui-color-text);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n}\n.rui-navbar-items {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex: 1;\n  flex-wrap: wrap;\n}\n.rui-navbar-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s);\n  margin-left: auto;\n}\n.rui-navbar-item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: var(--rui-color-text);\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: var(--rui-radius-sm);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 150ms ease, color 150ms ease;\n}\n.rui-navbar-item:hover { background: var(--rui-color-surface-muted); }\n.rui-navbar-item[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n}\n.rui-navbar-item-icon { display: inline-flex; }\n\n/* Compact layout shifts for narrow viewports */\n@media (max-width: 640px) {\n  .rui-navbar { flex-wrap: wrap; gap: var(--rui-spacing-s); }\n  .rui-navbar-items { width: 100%; }\n}\n\n/* ------------------------------------------------------------------------- *\n * New / refined component styles \u2014 wave introduced by components_suggestions.md\n * ------------------------------------------------------------------------- */\n\n/* Spinner --------------------------------------------------------------- */\n.rui-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-xs, 4px);\n  vertical-align: middle;\n}\n.rui-spinner-ring {\n  width: 16px;\n  height: 16px;\n  border-radius: 999px;\n  border: 2px solid color-mix(in srgb, var(--rui-color-primary) 25%, transparent);\n  border-top-color: var(--rui-color-primary);\n  animation: rui-spinner-rotate 0.8s linear infinite;\n}\n.rui-spinner[data-size=\"xs\"] .rui-spinner-ring { width: 10px; height: 10px; border-width: 1.5px; }\n.rui-spinner[data-size=\"sm\"] .rui-spinner-ring { width: 14px; height: 14px; }\n.rui-spinner[data-size=\"md\"] .rui-spinner-ring { width: 16px; height: 16px; }\n.rui-spinner[data-size=\"lg\"] .rui-spinner-ring { width: 22px; height: 22px; border-width: 2.5px; }\n.rui-spinner[data-size=\"xl\"] .rui-spinner-ring { width: 32px; height: 32px; border-width: 3px; }\n.rui-spinner[data-tone=\"success\"] .rui-spinner-ring { border-top-color: var(--rui-color-success); border-color: color-mix(in srgb, var(--rui-color-success) 25%, transparent); border-top-color: var(--rui-color-success); }\n.rui-spinner[data-tone=\"warning\"] .rui-spinner-ring { border-color: color-mix(in srgb, var(--rui-color-warning) 25%, transparent); border-top-color: var(--rui-color-warning); }\n.rui-spinner[data-tone=\"danger\"] .rui-spinner-ring { border-color: color-mix(in srgb, var(--rui-color-danger) 25%, transparent); border-top-color: var(--rui-color-danger); }\n.rui-spinner[data-tone=\"info\"] .rui-spinner-ring { border-color: color-mix(in srgb, var(--rui-color-info) 25%, transparent); border-top-color: var(--rui-color-info); }\n.rui-spinner-label { font-size: 0.875rem; color: var(--rui-color-text-muted); }\n@keyframes rui-spinner-rotate { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .rui-spinner-ring { animation-duration: 2s; }\n}\n\n/* Sparkline ------------------------------------------------------------ */\n.rui-sparkline {\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--rui-color-primary);\n}\n.rui-sparkline-line {\n  stroke: currentColor;\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  fill: none;\n}\n.rui-sparkline-area {\n  fill: color-mix(in srgb, currentColor 16%, transparent);\n}\n.rui-sparkline[data-tone=\"success\"] { color: var(--rui-color-success); }\n.rui-sparkline[data-tone=\"warning\"] { color: var(--rui-color-warning); }\n.rui-sparkline[data-tone=\"danger\"] { color: var(--rui-color-danger); }\n.rui-sparkline[data-tone=\"info\"] { color: var(--rui-color-info); }\n.rui-sparkline-wrap { display: inline-flex; align-items: center; }\n\n.rui-stat-spark { margin-top: var(--rui-spacing-xs, 4px); }\n.rui-stats-value-row {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-spacing-s, 8px);\n}\n.rui-stat-card[data-tone=\"success\"] .rui-stat-value { color: var(--rui-color-success); }\n.rui-stat-card[data-tone=\"warning\"] .rui-stat-value { color: var(--rui-color-warning); }\n.rui-stat-card[data-tone=\"danger\"] .rui-stat-value { color: var(--rui-color-danger); }\n\n/* MultiSelect ---------------------------------------------------------- */\n.rui-multiselect {\n  position: relative;\n  width: 100%;\n  font-size: 0.875rem;\n}\n.rui-multiselect-trigger {\n  width: 100%;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-s, 8px);\n  padding: 6px var(--rui-spacing-s, 8px);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n}\n.rui-multiselect-trigger:focus-visible {\n  outline: 2px solid var(--rui-color-primary);\n  outline-offset: 1px;\n}\n.rui-multiselect[data-disabled=\"true\"] .rui-multiselect-trigger {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.rui-multiselect-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n.rui-multiselect-placeholder { color: var(--rui-color-text-muted); }\n.rui-multiselect-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, transparent);\n  color: var(--rui-color-primary);\n  border-radius: var(--rui-radius-sm, 6px);\n  font-size: 0.8125rem;\n}\n.rui-multiselect-chip-remove {\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font-size: 1rem;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0 2px;\n  border-radius: 4px;\n}\n.rui-multiselect-chip-remove:hover { background: color-mix(in srgb, currentColor 18%, transparent); }\n.rui-multiselect-chevron {\n  flex-shrink: 0;\n  color: var(--rui-color-text-muted);\n  transition: transform 0.15s ease;\n}\n.rui-multiselect[data-open=\"true\"] .rui-multiselect-chevron { transform: rotate(180deg); }\n.rui-multiselect-panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  z-index: 30;\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  box-shadow: var(--rui-shadow-md);\n  padding: var(--rui-spacing-xs, 4px);\n}\n.rui-multiselect[data-open=\"true\"] .rui-multiselect-panel { display: block; }\n.rui-multiselect-filter {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm, 6px);\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  font: inherit;\n  margin-bottom: 4px;\n}\n.rui-multiselect-list {\n  max-height: 220px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n.rui-multiselect-option {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s, 8px);\n  padding: 6px var(--rui-spacing-s, 8px);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  color: var(--rui-color-text);\n  font: inherit;\n  text-align: left;\n  border-radius: var(--rui-radius-sm, 6px);\n}\n.rui-multiselect-option:hover:not(:disabled) { background: var(--rui-color-surface-muted); }\n.rui-multiselect-option[data-selected=\"true\"] {\n  color: var(--rui-color-primary);\n  font-weight: 600;\n}\n.rui-multiselect-option:disabled { opacity: 0.4; cursor: not-allowed; }\n.rui-multiselect-option-check {\n  width: 16px;\n  height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--rui-color-border);\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n.rui-multiselect-option[data-selected=\"true\"] .rui-multiselect-option-check {\n  background: var(--rui-color-primary);\n  border-color: var(--rui-color-primary);\n  color: var(--rui-color-on-primary, #fff);\n}\n.rui-multiselect-empty {\n  padding: 12px;\n  color: var(--rui-color-text-muted);\n  text-align: center;\n  font-size: 0.875rem;\n}\n\n/* DateRangePicker ------------------------------------------------------ */\n.rui-date-range-picker { display: flex; flex-direction: column; gap: 4px; }\n.rui-date-range-picker-label {\n  font-size: 0.875rem;\n  color: var(--rui-color-text-muted);\n}\n.rui-date-range-picker-row {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s, 8px);\n}\n.rui-date-range-picker-input {\n  flex: 1;\n  min-width: 0;\n  padding: 8px var(--rui-spacing-s, 8px);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  font: inherit;\n}\n.rui-date-range-picker-input:focus-visible {\n  outline: 2px solid var(--rui-color-primary);\n  outline-offset: 1px;\n}\n.rui-date-range-picker-separator { color: var(--rui-color-text-muted); }\n\n/* SegmentedControl ----------------------------------------------------- */\n.rui-segmented-control {\n  display: inline-flex;\n  background: var(--rui-color-surface-muted);\n  padding: 3px;\n  border-radius: var(--rui-radius-md, 8px);\n  border: 1px solid var(--rui-color-border);\n  gap: 2px;\n}\n.rui-segmented-control-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px var(--rui-spacing-s, 10px);\n  background: transparent;\n  border: 0;\n  border-radius: var(--rui-radius-sm, 6px);\n  color: var(--rui-color-text-muted);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.rui-segmented-control-option:hover { color: var(--rui-color-text); }\n.rui-segmented-control-option[data-active=\"true\"] {\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  box-shadow: var(--rui-shadow-sm);\n}\n.rui-segmented-control[data-size=\"sm\"] .rui-segmented-control-option { padding: 2px 8px; font-size: 0.75rem; }\n.rui-segmented-control[data-size=\"lg\"] .rui-segmented-control-option { padding: 6px 14px; font-size: 0.9375rem; }\n\n/* Toolbar center slot -------------------------------------------------- */\n.rui-toolbar-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--rui-spacing-s, 8px);\n  flex: 1;\n  flex-wrap: wrap;\n}\n.rui-toolbar[data-has-center=\"true\"] .rui-toolbar-left,\n.rui-toolbar[data-has-center=\"true\"] .rui-toolbar-right { flex: 0 1 auto; }\n\n/* EmptyState multi-action + illustration ------------------------------- */\n.rui-empty-state-actions {\n  display: flex;\n  gap: var(--rui-spacing-s, 8px);\n  margin-top: var(--rui-spacing-m, 12px);\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.rui-empty-state-illustration {\n  max-width: 240px;\n  width: 100%;\n  height: auto;\n  display: block;\n  margin: 0 auto var(--rui-spacing-m, 12px);\n}\n\n/* Modal size + footer -------------------------------------------------- */\n.rui-modal[data-size=\"sm\"] { max-width: 360px; }\n.rui-modal[data-size=\"md\"] { max-width: 520px; }\n.rui-modal[data-size=\"lg\"] { max-width: 760px; }\n.rui-modal[data-size=\"xl\"] { max-width: 960px; }\n.rui-modal[data-size=\"full\"] { max-width: 96vw; width: 96vw; }\n.rui-modal-footer {\n  display: flex;\n  gap: var(--rui-spacing-s, 8px);\n  padding: var(--rui-spacing-m, 12px) var(--rui-spacing-l, 16px);\n  border-top: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n/* Tabs trigger icon + badge ------------------------------------------- */\n.rui-tab-trigger-icon { display: inline-flex; align-items: center; margin-right: 4px; }\n.rui-tab-trigger-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  margin-left: 4px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n  color: var(--rui-color-primary);\n  font-size: 0.6875rem;\n  font-weight: 600;\n}\n.rui-tabs[data-orientation=\"vertical\"] {\n  display: flex;\n  gap: var(--rui-spacing-m, 12px);\n}\n.rui-tabs[data-orientation=\"vertical\"] .rui-tab-list {\n  flex-direction: column;\n  border-bottom: 0;\n  border-right: 1px solid var(--rui-color-border);\n  padding-right: var(--rui-spacing-s, 8px);\n  min-width: 140px;\n}\n.rui-tabs[data-orientation=\"vertical\"] .rui-tab-trigger {\n  justify-content: flex-start;\n  text-align: left;\n}\n.rui-tabs[data-orientation=\"vertical\"] .rui-tab-panels { flex: 1; }\n\n/* Progress segmented + buffered --------------------------------------- */\n.rui-progress-segments {\n  display: flex;\n  gap: 4px;\n}\n.rui-progress-segment {\n  flex: 1;\n  height: 8px;\n  border-radius: 4px;\n  background: var(--rui-color-surface-muted);\n  border: 1px solid var(--rui-color-border);\n}\n.rui-progress-segment[data-filled=\"true\"] {\n  background: var(--rui-color-primary);\n  border-color: var(--rui-color-primary);\n}\n.rui-progress[data-tone=\"success\"] .rui-progress-segment[data-filled=\"true\"] { background: var(--rui-color-success); border-color: var(--rui-color-success); }\n.rui-progress[data-tone=\"warning\"] .rui-progress-segment[data-filled=\"true\"] { background: var(--rui-color-warning); border-color: var(--rui-color-warning); }\n.rui-progress[data-tone=\"danger\"] .rui-progress-segment[data-filled=\"true\"] { background: var(--rui-color-danger); border-color: var(--rui-color-danger); }\n.rui-progress-buffer {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--rui-color-primary) 22%, transparent);\n  border-radius: inherit;\n}\n.rui-progress-track { position: relative; overflow: hidden; }\n\n/* CodeBlock copy + line gutter + highlight ----------------------------- */\n.rui-code-block-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--rui-spacing-s, 8px);\n  padding: 4px 8px;\n  background: var(--rui-color-surface-muted);\n  border-bottom: 1px solid var(--rui-color-border);\n  border-top-left-radius: var(--rui-radius-md, 8px);\n  border-top-right-radius: var(--rui-radius-md, 8px);\n  font-size: 0.75rem;\n  color: var(--rui-color-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.rui-code-block-copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--rui-color-text-muted);\n  padding: 2px 6px;\n  border-radius: var(--rui-radius-sm, 6px);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.75rem;\n  text-transform: none;\n  letter-spacing: 0;\n}\n.rui-code-block-copy:hover {\n  background: var(--rui-color-surface);\n  border-color: var(--rui-color-border);\n  color: var(--rui-color-text);\n}\n.rui-code-block-pre[data-line-numbers=\"true\"] {\n  counter-reset: rui-codeline;\n}\n.rui-code-block-line {\n  display: flex;\n  gap: var(--rui-spacing-s, 8px);\n  padding: 0 var(--rui-spacing-s, 8px);\n}\n.rui-code-block-line[data-highlight=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 10%, transparent);\n}\n.rui-code-block-gutter {\n  flex-shrink: 0;\n  color: var(--rui-color-text-muted);\n  user-select: none;\n  min-width: 2ch;\n  text-align: right;\n}\n.rui-code-block-code { white-space: pre; }\n\n/* Skeleton variants ---------------------------------------------------- */\n.rui-skeleton[data-variant=\"card\"],\n.rui-skeleton[data-variant=\"image\"],\n.rui-skeleton[data-variant=\"avatar\"],\n.rui-skeleton[data-variant=\"table-row\"] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-spacing-s, 8px);\n}\n.rui-skeleton-shape {\n  background: linear-gradient(90deg, var(--rui-color-surface-muted) 25%, var(--rui-color-surface) 37%, var(--rui-color-surface-muted) 63%);\n  background-size: 400% 100%;\n  animation: rui-skeleton-shimmer 1.4s ease-in-out infinite;\n}\n.rui-skeleton-shape[data-shape=\"circle\"] { border-radius: 999px; }\n.rui-skeleton-shape[data-shape=\"rect\"] { border-radius: var(--rui-radius-md, 8px); }\n.rui-skeleton-row { display: flex; gap: var(--rui-spacing-s, 8px); }\n@keyframes rui-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }\n@media (prefers-reduced-motion: reduce) {\n  .rui-skeleton-shape, .rui-skeleton-line { animation-duration: 3s; }\n}\n\n/* Image fit + placeholder --------------------------------------------- */\n.rui-image[data-fit=\"contain\"] img { object-fit: contain; }\n.rui-image[data-fit=\"cover\"] img { object-fit: cover; }\n.rui-image[data-fit=\"fill\"] img { object-fit: fill; }\n.rui-image[data-fit=\"none\"] img { object-fit: none; }\n.rui-image[data-fit=\"scale-down\"] img { object-fit: scale-down; }\n.rui-image-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 80px;\n  background: var(--rui-color-surface-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n  border-radius: inherit;\n}\n.rui-image-fallback-icon { font-size: 1.5rem; opacity: 0.6; }\n.rui-image-fallback-text { font-size: 0.8125rem; opacity: 0.8; }\n\n/* Table density + sticky ---------------------------------------------- */\n.rui-table-wrapper[data-density=\"compact\"] td,\n.rui-table-wrapper[data-density=\"compact\"] th { padding: 4px 8px; }\n.rui-table-wrapper[data-striped=\"true\"] tbody tr:nth-child(even) td {\n  background: var(--rui-color-surface-muted);\n}\n.rui-table-wrapper[data-sticky=\"true\"] {\n  position: relative;\n  overflow: auto;\n  max-height: 60vh;\n}\n.rui-table-wrapper[data-sticky=\"true\"] thead th {\n  position: sticky;\n  top: 0;\n  background: var(--rui-color-surface);\n  z-index: 1;\n}\n.rui-table td[data-align=\"center\"], .rui-table th[data-align=\"center\"] { text-align: center; }\n.rui-table td[data-align=\"right\"], .rui-table th[data-align=\"right\"] { text-align: right; }\n.rui-table td[data-align=\"left\"], .rui-table th[data-align=\"left\"] { text-align: left; }\n\n/* Pagination summary + per-page selector ------------------------------ */\n.rui-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-m, 12px);\n  flex-wrap: wrap;\n}\n.rui-pagination-summary {\n  color: var(--rui-color-text-muted);\n  font-size: 0.875rem;\n}\n.rui-pagination-buttons { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap; }\n.rui-pagination-current {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--rui-spacing-s, 8px);\n  color: var(--rui-color-text-muted);\n  font-size: 0.875rem;\n}\n.rui-pagination-per-page {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.875rem;\n  color: var(--rui-color-text-muted);\n}\n.rui-pagination-per-page-select {\n  padding: 4px 6px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-sm, 6px);\n  background: var(--rui-color-surface);\n  color: var(--rui-color-text);\n  font: inherit;\n}\n\n/* Markdown rich rendering --------------------------------------------- */\n.rui-markdown h1.rui-markdown-h1,\n.rui-markdown h2.rui-markdown-h2,\n.rui-markdown h3.rui-markdown-h3 {\n  margin: 0.6em 0 0.3em;\n  font-weight: 600;\n  line-height: 1.25;\n}\n.rui-markdown h1.rui-markdown-h1 { font-size: 1.5rem; }\n.rui-markdown h2.rui-markdown-h2 { font-size: 1.25rem; }\n.rui-markdown h3.rui-markdown-h3 { font-size: 1.0625rem; }\n.rui-markdown .rui-markdown-quote {\n  border-left: 3px solid var(--rui-color-primary);\n  padding: 0 var(--rui-spacing-m, 12px);\n  color: var(--rui-color-text-muted);\n  font-style: italic;\n  margin: var(--rui-spacing-s, 8px) 0;\n}\n.rui-markdown .rui-markdown-code {\n  background: var(--rui-color-surface-muted);\n  padding: var(--rui-spacing-s, 8px) var(--rui-spacing-m, 12px);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow-x: auto;\n  font-size: 0.8125rem;\n  margin: var(--rui-spacing-s, 8px) 0;\n}\n.rui-markdown .rui-markdown-image {\n  max-width: 100%;\n  height: auto;\n  display: block;\n  margin: var(--rui-spacing-s, 8px) 0;\n  border-radius: var(--rui-radius-md, 8px);\n}\n.rui-markdown ol, .rui-markdown ul { padding-left: 1.5em; margin: 0.25em 0; }\n\n/* Separator with label ------------------------------------------------ */\n.rui-separator-with-label {\n  display: flex;\n  align-items: center;\n  gap: var(--rui-spacing-s, 8px);\n  height: auto;\n  width: 100%;\n  /* The line lives in the inner spans, not on the container. */\n  background: transparent;\n}\n.rui-separator-with-label[data-orientation=\"horizontal\"] { height: auto; }\n.rui-separator-with-label .rui-separator-line {\n  flex: 1;\n  height: 1px;\n  background: var(--rui-color-border);\n}\n.rui-separator-with-label .rui-separator-label {\n  color: var(--rui-color-text-muted);\n  font-size: 0.8125rem;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  flex-shrink: 0;\n}\n\n/* Standalone Toast positioning ---------------------------------------- */\n.rui-toast-standalone {\n  position: fixed;\n  z-index: 1000;\n  max-width: 360px;\n}\n.rui-toast-standalone[data-position=\"top-right\"]    { top: 20px; right: 20px; }\n.rui-toast-standalone[data-position=\"top-left\"]     { top: 20px; left: 20px; }\n.rui-toast-standalone[data-position=\"top-center\"]   { top: 20px; left: 50%; transform: translateX(-50%); }\n.rui-toast-standalone[data-position=\"bottom-right\"] { bottom: 20px; right: 20px; }\n.rui-toast-standalone[data-position=\"bottom-left\"]  { bottom: 20px; left: 20px; }\n.rui-toast-standalone[data-position=\"bottom-center\"]{ bottom: 20px; left: 50%; transform: translateX(-50%); }\n\n/* Rating half-step / custom icons ------------------------------------- */\n.rui-rating[data-half-step=\"true\"] .rui-rating-star { cursor: crosshair; }\n.rui-rating-star[data-fill=\"half\"] {\n  background: linear-gradient(90deg, var(--rui-color-primary) 50%, var(--rui-color-border) 50%);\n  -webkit-background-clip: text;\n  background-clip: text;\n}\n\n/* Steps active state -------------------------------------------------- */\n.rui-steps-item[data-active=\"true\"] {\n  font-weight: 600;\n}\n.rui-steps-item[data-active=\"true\"]::marker {\n  color: var(--rui-color-primary);\n}\n\n/* ====================================================================== */\n/* Advanced components (DataGrid, CalendarView, Carousel, Media, ...)    */\n/* ====================================================================== */\n\n/* DataGrid ------------------------------------------------------------ */\n.rui-data-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n.rui-data-grid-bulk {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  align-items: center;\n  padding: 10px 14px;\n  background: color-mix(in srgb, var(--rui-color-primary) 8%, var(--rui-color-surface, #fff));\n  border: 1px solid color-mix(in srgb, var(--rui-color-primary) 25%, var(--rui-color-border));\n  border-radius: var(--rui-radius-md, 8px);\n  font-size: 13px;\n}\n.rui-data-grid-bulk-count {\n  font-weight: 600;\n  color: var(--rui-color-primary);\n}\n.rui-data-grid-bulk-tools {\n  margin-left: auto;\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.rui-data-grid-scroll {\n  position: relative;\n  overflow: auto;\n  max-width: 100%;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-data-grid-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: 14px;\n}\n.rui-data-grid-caption {\n  text-align: left;\n  caption-side: top;\n  padding: 12px 14px 8px;\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--rui-color-text);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-data-grid-table thead th {\n  position: sticky;\n  top: 0;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 4%, var(--rui-color-surface, #fff)));\n  z-index: 2;\n  text-align: left;\n  font-weight: 600;\n  font-size: 12.5px;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  color: var(--rui-color-text-muted);\n  border-bottom: 1px solid var(--rui-color-border);\n  padding: 10px 12px;\n  white-space: nowrap;\n}\n.rui-data-grid-table thead th[data-align=\"right\"] { text-align: right; }\n.rui-data-grid-table thead th[data-align=\"center\"] { text-align: center; }\n.rui-data-grid-table thead th[data-active=\"true\"] { color: var(--rui-color-primary); }\n.rui-data-grid[data-sticky-first=\"true\"] tbody td:first-child,\n.rui-data-grid[data-sticky-first=\"true\"] thead th:first-child {\n  position: sticky;\n  left: 0;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  z-index: 3;\n  box-shadow: 1px 0 0 var(--rui-color-border);\n}\n.rui-data-grid[data-sticky-first=\"true\"] thead th:first-child { z-index: 4; }\n.rui-data-grid[data-sticky-header=\"false\"] thead th { position: static; }\n.rui-data-grid-cell-select {\n  width: 36px;\n  padding-left: 12px;\n  padding-right: 4px;\n}\n.rui-data-grid-checkbox {\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n  accent-color: var(--rui-color-primary);\n}\n.rui-data-grid-table tbody td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--rui-color-border);\n  vertical-align: middle;\n  color: var(--rui-color-text);\n}\n.rui-data-grid[data-density=\"compact\"] .rui-data-grid-table thead th,\n.rui-data-grid[data-density=\"compact\"] .rui-data-grid-table tbody td { padding: 6px 10px; }\n.rui-data-grid-table tbody td[data-align=\"right\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.rui-data-grid-table tbody td[data-align=\"center\"] { text-align: center; }\n.rui-data-grid-table tbody td[data-format=\"number\"],\n.rui-data-grid-table tbody td[data-format=\"currency\"] { font-variant-numeric: tabular-nums; }\n.rui-data-grid-table tbody tr:last-child td { border-bottom: none; }\n.rui-data-grid[data-striped=\"true\"] tbody tr:nth-child(even) td {\n  background: color-mix(in srgb, var(--rui-color-text) 2%, transparent);\n}\n.rui-data-grid-table tbody tr[data-selected=\"true\"] td {\n  background: color-mix(in srgb, var(--rui-color-primary) 10%, transparent);\n}\n.rui-data-grid-table tbody tr[data-clickable=\"true\"] { cursor: pointer; }\n.rui-data-grid-table tbody tr[data-clickable=\"true\"]:hover td {\n  background: color-mix(in srgb, var(--rui-color-text) 4%, transparent);\n}\n.rui-data-grid-sort {\n  background: none;\n  border: 0;\n  font: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  color: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n}\n.rui-data-grid-sort:hover { color: var(--rui-color-primary); }\n.rui-data-grid-sort-icon {\n  font-size: 11px;\n  opacity: 0.55;\n}\nth[data-active=\"true\"] .rui-data-grid-sort-icon { opacity: 1; }\n.rui-data-grid-filter-row td {\n  padding: 6px 10px 10px;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 2%, var(--rui-color-surface, #fff)));\n  border-bottom: 1px solid var(--rui-color-border);\n}\n.rui-data-grid-filter {\n  width: 100%;\n  font-size: 12px;\n  padding: 5px 10px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: 999px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  outline: none;\n}\n.rui-data-grid-filter:focus { border-color: var(--rui-color-primary); }\n.rui-data-grid-empty {\n  text-align: center;\n  padding: 36px 16px;\n  color: var(--rui-color-text-muted);\n  font-size: 14px;\n}\n.rui-data-grid-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  padding: 2px 4px;\n  font-size: 13px;\n}\n.rui-data-grid-footer-summary { color: var(--rui-color-text-muted); }\n.rui-data-grid-footer-buttons {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.rui-data-grid-page-button {\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  padding: 4px 10px;\n  border-radius: 6px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 12.5px;\n}\n.rui-data-grid-page-button:hover:not([disabled]) { border-color: var(--rui-color-primary); color: var(--rui-color-primary); }\n.rui-data-grid-page-button[disabled] { opacity: 0.45; cursor: not-allowed; }\n.rui-data-grid-page-current {\n  min-width: 56px;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  color: var(--rui-color-text-muted);\n}\n\n/* CalendarView -------------------------------------------------------- */\n.rui-calendar {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 100%;\n}\n.rui-calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 0 4px;\n}\n.rui-calendar-title {\n  font-weight: 700;\n  font-size: 15px;\n  color: var(--rui-color-text);\n}\n.rui-calendar-weekrow {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 1px;\n  padding: 0 1px;\n}\n.rui-calendar-weekday {\n  padding: 6px 8px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n  text-align: left;\n}\n.rui-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 1px;\n  background: var(--rui-color-border);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n}\n.rui-calendar[data-view=\"week\"] .rui-calendar-grid { grid-template-rows: minmax(120px, 1fr); }\n.rui-calendar-day {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  min-height: 88px;\n  padding: 6px;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font: inherit;\n  cursor: pointer;\n  border: 0;\n  color: inherit;\n  transition: background 120ms ease;\n}\n.rui-calendar-day:hover {\n  background: color-mix(in srgb, var(--rui-color-primary) 6%, var(--rui-color-surface, var(--rui-color-bg)));\n}\n.rui-calendar-day[data-in-month=\"false\"] {\n  color: var(--rui-color-text-muted);\n  background: color-mix(in srgb, var(--rui-color-text) 2%, var(--rui-color-surface, var(--rui-color-bg)));\n}\n.rui-calendar-day[data-today=\"true\"] { box-shadow: inset 0 0 0 2px var(--rui-color-primary); }\n.rui-calendar-day[data-selected=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 18%, var(--rui-color-surface, var(--rui-color-bg)));\n}\n.rui-calendar-daynumber {\n  font-weight: 700;\n  font-size: 13px;\n  align-self: flex-start;\n}\n.rui-calendar-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow: hidden;\n}\n.rui-calendar-event {\n  display: block;\n  font-size: 11px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--rui-color-primary) 18%, transparent);\n  color: var(--rui-color-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: left;\n}\n.rui-calendar-event[data-tone=\"success\"] { background: color-mix(in srgb, var(--rui-color-success, #10b981) 18%, transparent); color: var(--rui-color-success, #10b981); }\n.rui-calendar-event[data-tone=\"warning\"] { background: color-mix(in srgb, var(--rui-color-warning, #f59e0b) 18%, transparent); color: var(--rui-color-warning, #f59e0b); }\n.rui-calendar-event[data-tone=\"danger\"] { background: color-mix(in srgb, var(--rui-color-danger, #ef4444) 18%, transparent); color: var(--rui-color-danger, #ef4444); }\n.rui-calendar-event[data-tone=\"info\"] { background: color-mix(in srgb, var(--rui-color-info, #06b6d4) 18%, transparent); color: var(--rui-color-info, #06b6d4); }\n.rui-calendar-event-more { font-size: 11px; color: var(--rui-color-text-muted); padding: 0 2px; }\n\n/* ActivityLog / AuditTrail ------------------------------------------- */\n.rui-activity-log,\n.rui-audit-trail {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.rui-activity-log-item,\n.rui-audit-trail-item {\n  display: grid;\n  grid-template-columns: 32px 1fr;\n  gap: 12px;\n  align-items: flex-start;\n  position: relative;\n}\n.rui-activity-log-item:not(:last-child)::before,\n.rui-audit-trail-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  left: 15px;\n  top: 32px;\n  bottom: -12px;\n  width: 2px;\n  background: var(--rui-color-border);\n}\n.rui-activity-log-marker,\n.rui-audit-trail-marker {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  border: 1px solid var(--rui-color-border);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n  position: relative;\n  z-index: 1;\n}\n.rui-activity-log-item[data-tone=\"primary\"] .rui-activity-log-marker,\n.rui-audit-trail-item[data-tone=\"primary\"] .rui-audit-trail-marker { color: var(--rui-color-primary); border-color: color-mix(in srgb, var(--rui-color-primary) 35%, var(--rui-color-border)); }\n.rui-activity-log-item[data-tone=\"success\"] .rui-activity-log-marker,\n.rui-audit-trail-item[data-tone=\"success\"] .rui-audit-trail-marker { color: var(--rui-color-success, #10b981); border-color: color-mix(in srgb, var(--rui-color-success, #10b981) 35%, var(--rui-color-border)); }\n.rui-activity-log-item[data-tone=\"warning\"] .rui-activity-log-marker,\n.rui-audit-trail-item[data-tone=\"warning\"] .rui-audit-trail-marker { color: var(--rui-color-warning, #f59e0b); border-color: color-mix(in srgb, var(--rui-color-warning, #f59e0b) 35%, var(--rui-color-border)); }\n.rui-activity-log-item[data-tone=\"danger\"] .rui-activity-log-marker,\n.rui-audit-trail-item[data-tone=\"danger\"] .rui-audit-trail-marker { color: var(--rui-color-danger, #ef4444); border-color: color-mix(in srgb, var(--rui-color-danger, #ef4444) 35%, var(--rui-color-border)); }\n.rui-activity-log-body,\n.rui-audit-trail-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding-top: 4px;\n}\n.rui-activity-log-head,\n.rui-audit-trail-head {\n  display: flex;\n  gap: 6px;\n  align-items: baseline;\n  flex-wrap: wrap;\n}\n.rui-activity-log-actor,\n.rui-audit-trail-actor {\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-activity-log-title,\n.rui-audit-trail-title {\n  color: var(--rui-color-text);\n}\n.rui-activity-log-time,\n.rui-audit-trail-time {\n  color: var(--rui-color-text-muted);\n  font-size: 12px;\n  margin-left: auto;\n  white-space: nowrap;\n}\n.rui-activity-log-description,\n.rui-audit-trail-description {\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n  margin: 0;\n}\n.rui-audit-trail-meta {\n  font-family: var(--rui-font-family-mono, ui-monospace, SFMono-Regular, monospace);\n  font-size: 11.5px;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  padding: 3px 6px;\n  border-radius: 4px;\n  display: inline-block;\n  color: var(--rui-color-text-muted);\n  align-self: flex-start;\n}\n\n/* ComparisonTable ---------------------------------------------------- */\n.rui-comparison-table {\n  width: 100%;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-comparison-table table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: 14px;\n}\n.rui-comparison-table th,\n.rui-comparison-table td {\n  padding: 12px 14px;\n  text-align: left;\n  border-bottom: 1px solid var(--rui-color-border);\n  vertical-align: middle;\n}\n.rui-comparison-table tr:last-child td { border-bottom: none; }\n.rui-comparison-table thead th {\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 4%, var(--rui-color-surface, #fff)));\n  font-weight: 700;\n  color: var(--rui-color-text);\n}\n.rui-comparison-table thead th[data-highlight=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 14%, var(--rui-color-surface, #fff));\n  color: var(--rui-color-primary);\n}\n.rui-comparison-table tbody td[data-highlight=\"true\"] {\n  background: color-mix(in srgb, var(--rui-color-primary) 6%, var(--rui-color-surface, #fff));\n}\n.rui-comparison-table-feature {\n  font-weight: 600;\n  width: 36%;\n  color: var(--rui-color-text);\n}\n.rui-comparison-table-feature-label { font-weight: 600; }\n.rui-comparison-table-feature-hint {\n  display: block;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  margin-top: 2px;\n  font-weight: 400;\n}\n.rui-comparison-table-group td {\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-comparison-yes { color: var(--rui-color-success, #10b981); font-size: 18px; }\n.rui-comparison-no { color: var(--rui-color-text-muted); font-size: 18px; }\n\n/* InfiniteList ------------------------------------------------------- */\n.rui-infinite-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rui-infinite-list-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.rui-infinite-list-sentinel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  padding: 16px;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n}\n.rui-infinite-list-spin {\n  animation: rui-spin 0.9s linear infinite;\n}\n@keyframes rui-spin { to { transform: rotate(360deg); } }\n.rui-infinite-list-load-more {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  color: inherit;\n  padding: 6px 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 13px;\n}\n.rui-infinite-list-load-more:hover { border-color: var(--rui-color-primary); color: var(--rui-color-primary); }\n\n/* Media: Video / Audio ---------------------------------------------- */\n.rui-video-player {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 0;\n}\n.rui-video-player-frame {\n  position: relative;\n  width: 100%;\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  background: #000;\n}\n.rui-video-player-video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  outline: none;\n}\n.rui-video-player-caption {\n  margin: 0;\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n}\n.rui-audio-player {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 14px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-audio-player-meta {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n.rui-audio-player-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--rui-color-primary) 12%, transparent);\n  color: var(--rui-color-primary);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n}\n.rui-audio-player-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.rui-audio-player-title {\n  font-weight: 600;\n  font-size: 14px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.rui-audio-player-artist {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-audio-player-audio {\n  flex: 1;\n  min-width: 0;\n  height: 36px;\n}\n\n/* Carousel / Gallery / Lightbox ------------------------------------- */\n.rui-carousel {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.rui-carousel-frame {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n}\n.rui-carousel-track {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.4s ease;\n  will-change: transform;\n}\n.rui-carousel-slide {\n  flex: 0 0 100%;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n}\n.rui-carousel-slide img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.rui-carousel-figure {\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.rui-carousel-figure img,\n.rui-carousel-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.rui-carousel-caption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 14px 18px;\n  font-size: 14px;\n  color: #fff;\n  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);\n  margin: 0;\n}\n.rui-carousel-arrow {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: 0;\n  background: rgba(0, 0, 0, 0.55);\n  color: #fff;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  z-index: 1;\n}\n.rui-carousel-arrow:hover { background: rgba(0, 0, 0, 0.75); }\n.rui-carousel-arrow[data-direction=\"prev\"] { left: 12px; }\n.rui-carousel-arrow[data-direction=\"next\"] { right: 12px; }\n.rui-carousel-dots {\n  display: flex;\n  justify-content: center;\n  gap: 6px;\n}\n.rui-carousel-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--rui-color-border);\n  border: 0;\n  cursor: pointer;\n  padding: 0;\n  transition: background 120ms ease, transform 120ms ease;\n}\n.rui-carousel-dot[data-active=\"true\"] {\n  background: var(--rui-color-primary);\n  transform: scale(1.3);\n}\n\n.rui-gallery {\n  display: grid;\n  grid-template-columns: repeat(var(--rui-gallery-columns, 4), minmax(0, 1fr));\n  gap: 8px;\n}\n.rui-gallery[data-columns=\"1\"] { --rui-gallery-columns: 1; }\n.rui-gallery[data-columns=\"2\"] { --rui-gallery-columns: 2; }\n.rui-gallery[data-columns=\"3\"] { --rui-gallery-columns: 3; }\n.rui-gallery[data-columns=\"4\"] { --rui-gallery-columns: 4; }\n.rui-gallery[data-columns=\"5\"] { --rui-gallery-columns: 5; }\n.rui-gallery[data-columns=\"6\"] { --rui-gallery-columns: 6; }\n@media (max-width: 720px) {\n  .rui-gallery { grid-template-columns: repeat(min(var(--rui-gallery-columns, 3), 2), 1fr); }\n}\n.rui-gallery-tile {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  border: 1px solid var(--rui-color-border);\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  transition: transform 160ms ease, border-color 160ms ease;\n}\n.rui-gallery-tile:hover { transform: scale(1.02); border-color: var(--rui-color-primary); }\n.rui-gallery-tile img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.rui-gallery-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 28px;\n  color: var(--rui-color-text-muted);\n}\n.rui-gallery-caption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n  color: #fff;\n  font-size: 12px;\n  padding: 16px 10px 8px;\n  text-align: left;\n  pointer-events: none;\n}\n\n.rui-lightbox-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.85);\n  z-index: 9999;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  backdrop-filter: blur(4px);\n}\n.rui-lightbox-overlay[data-open=\"true\"] { display: flex; }\n.rui-lightbox {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n}\n.rui-lightbox-image-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 90vw;\n  max-height: 75vh;\n}\n.rui-lightbox-image-wrap img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: 6px;\n}\n.rui-lightbox-arrow,\n.rui-lightbox-close {\n  position: absolute;\n  background: rgba(255, 255, 255, 0.15);\n  color: #fff;\n  border: 0;\n  border-radius: 50%;\n  width: 44px;\n  height: 44px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 22px;\n  transition: background 120ms ease;\n}\n.rui-lightbox-arrow:hover,\n.rui-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }\n.rui-lightbox-arrow[data-direction=\"prev\"] { left: 24px; top: 50%; transform: translateY(-50%); }\n.rui-lightbox-arrow[data-direction=\"next\"] { right: 24px; top: 50%; transform: translateY(-50%); }\n.rui-lightbox-close { right: 24px; top: 24px; }\n.rui-lightbox-caption {\n  color: #fff;\n  text-align: center;\n  font-size: 14px;\n}\n.rui-lightbox-counter {\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Map --------------------------------------------------------------- */\n.rui-map {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin: 0;\n}\n.rui-map-frame {\n  width: 100%;\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  position: relative;\n}\n.rui-map-iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.rui-map-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n}\n.rui-map-markers {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.rui-map-marker {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: 999px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  font-size: 12px;\n}\n.rui-map-marker-icon { color: var(--rui-color-primary); }\n.rui-map-caption {\n  margin: 0;\n  font-size: 12.5px;\n  color: var(--rui-color-text-muted);\n}\n\n/* Editors: RichTextEditor / CodeEditor ----------------------------- */\n.rui-rich-text {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  display: flex;\n  flex-direction: column;\n}\n.rui-rich-text[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-rich-text-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: 6px 8px;\n  border-bottom: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 4%, var(--rui-color-surface, #fff)));\n}\n.rui-rich-text-tool {\n  background: transparent;\n  border: 0;\n  border-radius: 4px;\n  width: 30px;\n  height: 30px;\n  cursor: pointer;\n  color: var(--rui-color-text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  transition: background 120ms ease, color 120ms ease;\n}\n.rui-rich-text-tool:hover { background: color-mix(in srgb, var(--rui-color-text) 8%, transparent); color: var(--rui-color-text); }\n.rui-rich-text-content {\n  padding: 14px 16px;\n  outline: 0;\n  font: inherit;\n  color: inherit;\n  overflow-y: auto;\n  position: relative;\n}\n.rui-rich-text-content[data-empty=\"true\"]::before {\n  content: attr(data-placeholder);\n  color: var(--rui-color-text-muted);\n  pointer-events: none;\n  position: absolute;\n  top: 14px;\n  left: 16px;\n}\n.rui-rich-text-content > :first-child { margin-top: 0; }\n.rui-rich-text-content > :last-child { margin-bottom: 0; }\n.rui-rich-text-content :is(h1,h2,h3) { margin: 0.6em 0 0.4em; line-height: 1.25; }\n.rui-rich-text-content h2 { font-size: 18px; font-weight: 700; }\n.rui-rich-text-content h3 { font-size: 16px; font-weight: 700; }\n.rui-rich-text-content p { margin: 0 0 0.6em; line-height: 1.55; }\n.rui-rich-text-content blockquote {\n  border-left: 3px solid var(--rui-color-border);\n  margin: 0.5em 0;\n  padding-left: 12px;\n  color: var(--rui-color-text-muted);\n}\n.rui-rich-text-content :is(ul, ol) { padding-left: 20px; margin: 0 0 0.6em; }\n\n.rui-code-editor {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  font-family: var(--rui-font-family-mono, ui-monospace, SFMono-Regular, monospace);\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n}\n.rui-code-editor-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 4%, var(--rui-color-surface, #fff)));\n  border-bottom: 1px solid var(--rui-color-border);\n}\n.rui-code-editor-language {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--rui-color-text-muted);\n}\n.rui-code-editor-body {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n.rui-code-editor[data-gutter=\"false\"] .rui-code-editor-body { grid-template-columns: 1fr; }\n.rui-code-editor-gutter {\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 3%, var(--rui-color-surface, #fff)));\n  color: var(--rui-color-text-muted);\n  padding: 12px 10px;\n  text-align: right;\n  user-select: none;\n  border-right: 1px solid var(--rui-color-border);\n  line-height: 1.6;\n  font-size: 12px;\n  display: flex;\n  flex-direction: column;\n}\n.rui-code-editor-line { display: block; min-width: 24px; }\n.rui-code-editor-textarea {\n  padding: 12px 14px;\n  border: 0;\n  outline: 0;\n  resize: vertical;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1.6;\n  white-space: pre;\n  overflow-x: auto;\n}\n\n/* ContextMenu / ColorPicker / PinInput etc ------------------------ */\n.rui-context-menu {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.rui-context-menu-target {\n  display: block;\n  width: 100%;\n}\n.rui-context-menu-pop {\n  position: absolute;\n  z-index: 50;\n  min-width: 200px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  box-shadow: var(--rui-shadow-md, 0 12px 32px rgba(0, 0, 0, 0.18));\n  padding: 4px;\n  display: none;\n  flex-direction: column;\n  gap: 1px;\n}\n.rui-context-menu-pop[data-open=\"true\"] { display: flex; }\n.rui-context-menu-pop .rui-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-radius: 6px;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n}\n.rui-context-menu-pop .rui-menu-item:hover { background: color-mix(in srgb, var(--rui-color-text) 6%, transparent); }\n.rui-context-menu-pop .rui-menu-item[data-variant=\"danger\"] { color: var(--rui-color-danger, #ef4444); }\n.rui-context-menu-pop .rui-menu-item[disabled] { opacity: 0.5; cursor: not-allowed; }\n.rui-context-menu-pop .rui-menu-item-icon { color: var(--rui-color-text-muted); width: 16px; text-align: center; }\n.rui-context-menu-pop .rui-menu-item-shortcut {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--rui-color-text-muted);\n  font-family: var(--rui-font-family-mono, monospace);\n}\n.rui-context-menu-pop .rui-menu-separator {\n  height: 1px;\n  background: var(--rui-color-border);\n  margin: 4px 0;\n}\n\n.rui-color-picker {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rui-color-picker[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-color-picker-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-color-picker-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.rui-color-picker-color {\n  width: 40px;\n  height: 36px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: 8px;\n  padding: 2px;\n  cursor: pointer;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-color-picker-hex {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  font-family: var(--rui-font-family-mono, monospace);\n  font-size: 13px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n}\n.rui-color-picker-hex:focus { outline: none; border-color: var(--rui-color-primary); }\n.rui-color-picker-swatches {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.rui-color-picker-swatch {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid var(--rui-color-border);\n  cursor: pointer;\n  padding: 0;\n  transition: transform 120ms ease, border-color 120ms ease;\n}\n.rui-color-picker-swatch:hover { transform: scale(1.1); }\n.rui-color-picker-swatch[data-active=\"true\"] { border-color: var(--rui-color-text); transform: scale(1.15); }\n\n.rui-pin-input {\n  display: inline-flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.rui-pin-input[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-pin-input-slot {\n  width: 44px;\n  height: 52px;\n  text-align: center;\n  font-size: 20px;\n  font-weight: 600;\n  font-family: var(--rui-font-family-mono, monospace);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  outline: none;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.rui-pin-input-slot:focus {\n  border-color: var(--rui-color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-color-primary) 22%, transparent);\n}\n\n.rui-password-input {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.rui-password-input[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-password-input-row {\n  position: relative;\n}\n.rui-password-input-field {\n  width: 100%;\n  padding: 8px 40px 8px 12px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  outline: none;\n}\n.rui-password-input-field:focus { border-color: var(--rui-color-primary); }\n.rui-password-input-toggle {\n  position: absolute;\n  right: 6px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  color: var(--rui-color-text-muted);\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.rui-password-input-toggle:hover { color: var(--rui-color-text); }\n.rui-password-input-strength-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.rui-password-input-strength {\n  display: flex;\n  gap: 4px;\n  flex: 1;\n}\n.rui-password-input-strength-bar {\n  flex: 1;\n  height: 4px;\n  background: var(--rui-color-border);\n  border-radius: 2px;\n}\n.rui-password-input-strength[data-score=\"1\"] .rui-password-input-strength-bar[data-filled=\"true\"] { background: var(--rui-color-danger, #ef4444); }\n.rui-password-input-strength[data-score=\"2\"] .rui-password-input-strength-bar[data-filled=\"true\"] { background: var(--rui-color-warning, #f59e0b); }\n.rui-password-input-strength[data-score=\"3\"] .rui-password-input-strength-bar[data-filled=\"true\"] { background: color-mix(in srgb, var(--rui-color-success, #10b981) 70%, var(--rui-color-warning, #f59e0b)); }\n.rui-password-input-strength[data-score=\"4\"] .rui-password-input-strength-bar[data-filled=\"true\"] { background: var(--rui-color-success, #10b981); }\n.rui-password-input-strength-label {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  min-width: 60px;\n  text-align: right;\n}\n\n.rui-tag-input {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 8px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  min-height: 40px;\n}\n.rui-tag-input[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-tag-input:focus-within { border-color: var(--rui-color-primary); }\n.rui-tag-input-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: color-mix(in srgb, var(--rui-color-primary) 12%, transparent);\n  color: var(--rui-color-primary);\n  padding: 3px 4px 3px 10px;\n  border-radius: 999px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.rui-tag-input-remove {\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  color: inherit;\n  font-size: 14px;\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.rui-tag-input-remove:hover { background: color-mix(in srgb, currentColor 20%, transparent); }\n.rui-tag-input-field {\n  flex: 1;\n  min-width: 100px;\n  border: 0;\n  outline: 0;\n  font: inherit;\n  background: transparent;\n  color: inherit;\n  padding: 4px 6px;\n}\n\n.rui-mention-input {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.rui-mention-input[data-disabled=\"true\"] { opacity: 0.6; }\n.rui-mention-input-field {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  resize: vertical;\n  outline: none;\n}\n.rui-mention-input-field:focus { border-color: var(--rui-color-primary); }\n.rui-mention-input-suggestions {\n  position: absolute;\n  z-index: 50;\n  left: 0;\n  right: 0;\n  top: 100%;\n  margin-top: 4px;\n  min-width: 220px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  box-shadow: var(--rui-shadow-md, 0 12px 32px rgba(0, 0, 0, 0.18));\n  padding: 4px;\n  display: none;\n  flex-direction: column;\n  gap: 1px;\n  max-height: 220px;\n  overflow: auto;\n}\n.rui-mention-input-suggestions[data-open=\"true\"] { display: flex; }\n.rui-mention-input-option {\n  background: transparent;\n  border: 0;\n  text-align: left;\n  padding: 8px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  font-size: 13px;\n}\n.rui-mention-input-option:hover { background: color-mix(in srgb, var(--rui-color-text) 6%, transparent); }\n\n/* Time / DateTime / Masked input ---------------------------------- */\n.rui-time-picker,\n.rui-datetime-picker {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.rui-time-picker-label,\n.rui-datetime-picker-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--rui-color-text);\n}\n.rui-time-picker-input,\n.rui-datetime-picker-input,\n.rui-masked-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  outline: none;\n}\n.rui-time-picker-input:focus,\n.rui-datetime-picker-input:focus,\n.rui-masked-input:focus { border-color: var(--rui-color-primary); }\n\n/* FormSection / FieldSet / ValidationSummary --------------------- */\n.rui-form-section {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.rui-form-section-header {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.rui-form-section-label {\n  font-weight: 700;\n  font-size: 15px;\n  margin: 0;\n  color: var(--rui-color-text);\n}\n.rui-form-section-helper {\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n  margin: 0;\n}\n.rui-form-section-body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.rui-fieldset {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  padding: 12px 16px 16px;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-fieldset-legend {\n  font-weight: 700;\n  padding: 0 6px;\n  font-size: 13px;\n  color: var(--rui-color-text);\n}\n.rui-fieldset-helper {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  margin: 0;\n}\n.rui-validation-summary {\n  padding: 14px 16px;\n  border: 1px solid color-mix(in srgb, var(--rui-color-danger, #ef4444) 30%, var(--rui-color-border));\n  border-radius: var(--rui-radius-md, 8px);\n  background: color-mix(in srgb, var(--rui-color-danger, #ef4444) 8%, var(--rui-color-surface, var(--rui-color-bg)));\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rui-validation-summary[data-tone=\"warning\"] {\n  border-color: color-mix(in srgb, var(--rui-color-warning, #f59e0b) 30%, var(--rui-color-border));\n  background: color-mix(in srgb, var(--rui-color-warning, #f59e0b) 8%, var(--rui-color-surface, var(--rui-color-bg)));\n}\n.rui-validation-summary-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 700;\n  font-size: 14px;\n  color: var(--rui-color-danger, #ef4444);\n}\n.rui-validation-summary[data-tone=\"warning\"] .rui-validation-summary-title { color: var(--rui-color-warning, #f59e0b); }\n.rui-validation-summary-icon { font-size: 16px; }\n.rui-validation-summary-list {\n  margin: 0;\n  padding-left: 22px;\n  color: var(--rui-color-text);\n  font-size: 13.5px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n/* MultiStepForm ------------------------------------------------ */\n.rui-multi-step-form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.rui-multi-step-form-steps {\n  display: flex;\n  gap: 0;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 3%, var(--rui-color-surface, #fff)));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n}\n.rui-multi-step-form-steps .rui-steps-item {\n  flex: 1;\n  padding: 12px 16px 12px 52px;\n  border-right: 1px solid var(--rui-color-border);\n  position: relative;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n}\n.rui-multi-step-form-steps .rui-steps-item:last-child { border-right: none; }\n.rui-multi-step-form-steps .rui-steps-item::before {\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--rui-color-text) 12%, transparent);\n  color: var(--rui-color-text-muted);\n}\n.rui-multi-step-form-steps .rui-steps-item[data-active=\"true\"]::before {\n  background: var(--rui-color-primary);\n  color: var(--rui-color-primary-text, #fff);\n}\n.rui-multi-step-form-steps .rui-steps-item[data-complete=\"true\"]::before {\n  background: var(--rui-color-success, #10b981);\n  color: #fff;\n}\n.rui-multi-step-form-steps .rui-steps-item .rui-steps-title {\n  font-weight: 700;\n  color: inherit;\n  margin: 0;\n  line-height: 1.2;\n}\n.rui-multi-step-form-steps .rui-steps-item .rui-steps-details {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  margin-top: 2px;\n}\n.rui-multi-step-form-steps .rui-steps-item[data-active=\"true\"] {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  color: var(--rui-color-primary);\n}\n.rui-multi-step-form-steps .rui-steps-item[data-complete=\"true\"] {\n  color: var(--rui-color-success, #10b981);\n}\n.rui-multi-step-form-steps .rui-steps-item[data-complete=\"true\"] .rui-steps-title::before {\n  content: \"\u2713 \";\n  margin-right: 2px;\n}\n.rui-multi-step-form-body {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.rui-multi-step-form-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  padding-top: 8px;\n  border-top: 1px solid var(--rui-color-border);\n}\n.rui-multi-step-form-progress {\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Advanced charts (Area/Gauge/Heatmap/Radar/Scatter/Histogram) -- */\n.rui-chart { display: flex; flex-direction: column; gap: 10px; width: 100%; }\n.rui-chart-title { font-size: 13px; font-weight: 600; color: var(--rui-color-text); }\n.rui-chart-svg { display: block; width: 100%; height: auto; }\n.rui-chart-label { font-size: 11px; fill: var(--rui-color-text-muted, #64748b); }\n.rui-chart-tick { font-size: 10.5px; fill: var(--rui-color-text-muted, #64748b); }\n.rui-chart-empty {\n  padding: 24px;\n  text-align: center;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n}\n.rui-chart-legend {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n  font-size: 12.5px;\n  color: var(--rui-color-text-muted);\n}\n.rui-chart-legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.rui-chart-legend-swatch {\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n  display: inline-block;\n}\n\n.rui-area-chart,\n.rui-radar-chart,\n.rui-scatter-chart,\n.rui-histogram { width: 100%; }\n\n.rui-gauge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 4px;\n}\n.rui-gauge[data-size=\"sm\"] svg { max-width: 140px; }\n.rui-gauge[data-size=\"md\"] svg { max-width: 180px; }\n.rui-gauge[data-size=\"lg\"] svg { max-width: 220px; }\n.rui-gauge-arc {\n  transition: stroke-dasharray 400ms ease;\n}\n.rui-gauge-value {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--rui-color-text);\n  margin-top: -6px;\n}\n.rui-gauge[data-tone=\"primary\"] .rui-gauge-value { color: var(--rui-color-primary); }\n.rui-gauge[data-tone=\"success\"] .rui-gauge-value { color: var(--rui-color-success, #10b981); }\n.rui-gauge[data-tone=\"warning\"] .rui-gauge-value { color: var(--rui-color-warning, #f59e0b); }\n.rui-gauge[data-tone=\"danger\"] .rui-gauge-value { color: var(--rui-color-danger, #ef4444); }\n.rui-gauge[data-tone=\"info\"] .rui-gauge-value { color: var(--rui-color-info, #06b6d4); }\n.rui-gauge-caption {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n}\n\n.rui-heatmap { display: flex; flex-direction: column; gap: 8px; width: 100%; }\n.rui-heatmap-table {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.rui-heatmap-row {\n  display: grid;\n  grid-template-columns: 56px repeat(var(--rui-heatmap-cols, 7), minmax(0, 1fr));\n  gap: 4px;\n}\n.rui-heatmap-row-header { font-size: 11px; color: var(--rui-color-text-muted); }\n.rui-heatmap-cell {\n  padding: 8px 6px;\n  border-radius: 4px;\n  text-align: center;\n  font-size: 12px;\n  font-weight: 600;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 3%, var(--rui-color-surface, #fff)));\n  color: var(--rui-color-text);\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.rui-heatmap-xlabel,\n.rui-heatmap-ylabel {\n  background: transparent;\n  color: var(--rui-color-text-muted);\n  font-weight: 500;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.rui-heatmap-ylabel { justify-content: flex-start; padding-left: 0; }\n.rui-heatmap-corner { background: transparent; }\n\n/* Patterns: state cards, tour/spotlight, inbox, onboarding ----- */\n.rui-loading-state,\n.rui-error-state,\n.rui-success-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 12px;\n  padding: 40px 24px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n}\n.rui-loading-state .rui-spinner { font-size: 32px; }\n.rui-error-state-icon { color: var(--rui-color-danger, #ef4444); font-size: 36px; }\n.rui-success-state-icon { color: var(--rui-color-success, #10b981); font-size: 36px; }\n.rui-loading-state-title,\n.rui-error-state-title,\n.rui-success-state-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--rui-color-text); }\n.rui-loading-state-description,\n.rui-error-state-description,\n.rui-success-state-description { color: var(--rui-color-text-muted); margin: 0; max-width: 36em; line-height: 1.55; }\n.rui-loading-state-actions,\n.rui-error-state-actions,\n.rui-success-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }\n\n.rui-onboarding-checklist {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.rui-onboarding-checklist-header {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.rui-onboarding-checklist-title {\n  font-size: 15px;\n  font-weight: 700;\n  margin: 0;\n  color: var(--rui-color-text);\n}\n.rui-onboarding-checklist-subtitle {\n  margin: 0;\n  font-size: 13px;\n  color: var(--rui-color-text-muted);\n}\n.rui-onboarding-checklist-progress {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n}\n.rui-onboarding-checklist-bar {\n  flex: 1;\n  height: 6px;\n  background: var(--rui-color-border);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.rui-onboarding-checklist-fill {\n  height: 100%;\n  background: var(--rui-color-primary);\n  transition: width 240ms ease;\n}\n.rui-onboarding-checklist-meta {\n  font-size: 12px;\n  color: var(--rui-color-text-muted);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.rui-onboarding-checklist-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rui-onboarding-checklist-item {\n  display: grid;\n  grid-template-columns: 28px 1fr auto;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  transition: border-color 120ms ease;\n}\n.rui-onboarding-checklist-item:hover { border-color: color-mix(in srgb, var(--rui-color-primary) 30%, var(--rui-color-border)); }\n.rui-onboarding-checklist-item[data-done=\"true\"] .rui-onboarding-checklist-item-title {\n  text-decoration: line-through;\n  color: var(--rui-color-text-muted);\n}\n.rui-onboarding-checklist-marker {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rui-color-text-muted);\n  font-size: 14px;\n}\n.rui-onboarding-checklist-item[data-done=\"true\"] .rui-onboarding-checklist-marker {\n  background: var(--rui-color-success, #10b981);\n  color: #fff;\n}\n.rui-onboarding-checklist-marker-icon { font-size: 14px; }\n.rui-onboarding-checklist-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.rui-onboarding-checklist-item-title { font-weight: 600; font-size: 14px; color: var(--rui-color-text); }\n.rui-onboarding-checklist-item-description { font-size: 12.5px; color: var(--rui-color-text-muted); margin: 0; }\n\n.rui-inbox-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.rui-inbox-panel-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.rui-inbox-panel-mark-all {\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  color: var(--rui-color-primary);\n  font: inherit;\n  font-size: 13px;\n  padding: 0;\n}\n.rui-inbox-panel-mark-all:hover { text-decoration: underline; }\n.rui-inbox-panel-empty {\n  padding: 28px;\n  text-align: center;\n  color: var(--rui-color-text-muted);\n  font-size: 13px;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 3%, var(--rui-color-surface, #fff)));\n  border-radius: var(--rui-radius-md, 8px);\n}\n.rui-inbox-panel-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rui-inbox-panel-group-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-text-muted);\n}\n.rui-inbox-panel-group-count {\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 5%, var(--rui-color-surface, #fff)));\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Tour overlay + Spotlight overlay -------------------------------- */\n.rui-tour {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  z-index: 9100;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.rui-tour[data-open=\"true\"] { display: flex; }\n.rui-tour-card {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  padding: 24px;\n  box-shadow: var(--rui-shadow-md, 0 16px 40px rgba(0, 0, 0, 0.28));\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-width: 460px;\n  width: 100%;\n}\n.rui-tour-step {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--rui-color-primary);\n}\n.rui-tour-title {\n  font-size: 18px;\n  font-weight: 700;\n  margin: 0;\n  color: var(--rui-color-text);\n}\n.rui-tour-description {\n  font-size: 14px;\n  color: var(--rui-color-text-muted);\n  line-height: 1.55;\n  margin: 0;\n}\n.rui-tour-target {\n  font-family: var(--rui-font-family-mono, monospace);\n  font-size: 12px;\n  padding: 6px 10px;\n  background: var(--rui-color-surface-muted, color-mix(in srgb, var(--rui-color-text) 4%, var(--rui-color-surface, #fff)));\n  border-radius: 6px;\n  color: var(--rui-color-text-muted);\n  align-self: flex-start;\n}\n.rui-tour-footer {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  margin-top: 8px;\n  padding-top: 12px;\n  border-top: 1px solid var(--rui-color-border);\n}\n.rui-tour-footer > .rui-button:first-child { margin-right: auto; }\n\n.rui-spotlight {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9000;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.rui-spotlight[data-open=\"true\"] { display: flex; }\n.rui-spotlight-card {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  padding: 22px 24px;\n  box-shadow: var(--rui-shadow-md, 0 16px 40px rgba(0, 0, 0, 0.28));\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  max-width: 420px;\n  width: 100%;\n}\n.rui-spotlight-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--rui-color-text); }\n.rui-spotlight-description { font-size: 13.5px; color: var(--rui-color-text-muted); margin: 0; line-height: 1.55; }\n.rui-spotlight-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }\n\n/* Sticky / ResizablePanels / MasonryGrid / TopBar -------------- */\n.rui-sticky {\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-resizable-panels {\n  display: grid;\n  grid-template-columns: var(--rui-resizable-primary, 40%) 6px 1fr;\n  gap: 0;\n  min-height: 280px;\n  width: 100%;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n}\n.rui-resizable-panel {\n  overflow: auto;\n  min-width: var(--rui-resizable-min, 240px);\n  padding: 12px;\n}\n.rui-resizable-panel-secondary {\n  border-left: 0;\n}\n.rui-resizable-divider {\n  cursor: col-resize;\n  background: var(--rui-color-border);\n  width: 6px;\n  position: relative;\n  transition: background 120ms ease;\n}\n.rui-resizable-divider::after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 2px;\n  height: 32px;\n  border-radius: 2px;\n  background: var(--rui-color-text-muted);\n  opacity: 0.5;\n}\n.rui-resizable-divider:hover,\n.rui-resizable-divider:focus-visible { background: var(--rui-color-primary); outline: none; }\n\n.rui-masonry-grid {\n  column-count: var(--rui-masonry-columns, 3);\n  column-gap: 12px;\n}\n.rui-masonry-grid[data-columns=\"1\"] { --rui-masonry-columns: 1; }\n.rui-masonry-grid[data-columns=\"2\"] { --rui-masonry-columns: 2; }\n.rui-masonry-grid[data-columns=\"3\"] { --rui-masonry-columns: 3; }\n.rui-masonry-grid[data-columns=\"4\"] { --rui-masonry-columns: 4; }\n.rui-masonry-grid[data-columns=\"5\"] { --rui-masonry-columns: 5; }\n.rui-masonry-grid[data-columns=\"6\"] { --rui-masonry-columns: 6; }\n.rui-masonry-grid[data-gap=\"xs\"] { column-gap: 4px; }\n.rui-masonry-grid[data-gap=\"s\"] { column-gap: 8px; }\n.rui-masonry-grid[data-gap=\"m\"] { column-gap: 12px; }\n.rui-masonry-grid[data-gap=\"l\"] { column-gap: 16px; }\n.rui-masonry-grid[data-gap=\"xl\"] { column-gap: 24px; }\n.rui-masonry-grid > * {\n  display: inline-block;\n  width: 100%;\n  break-inside: avoid;\n  margin-bottom: 12px;\n}\n@media (max-width: 720px) {\n  .rui-masonry-grid { column-count: min(var(--rui-masonry-columns, 3), 2); }\n}\n\n.rui-topbar {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 16px;\n  background: var(--rui-color-surface, var(--rui-color-bg));\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  flex-wrap: wrap;\n}\n.rui-topbar[data-sticky=\"true\"] { position: sticky; top: 0; z-index: 30; border-radius: 0; border-left: 0; border-right: 0; }\n.rui-topbar-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.rui-topbar-title-block { display: flex; flex-direction: column; gap: 2px; }\n.rui-topbar-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--rui-color-text); }\n.rui-topbar-subtitle { margin: 0; font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-topbar-center { flex: 1; min-width: 200px; justify-content: center; }\n.rui-topbar-right { margin-left: auto; }\n\n/* AppShell collapsible / mobile drawer ------------------------ */\n.rui-app-shell-scrim {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 40;\n  display: none;\n}\n.rui-app-shell-toggle {\n  background: transparent;\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md, 8px);\n  padding: 4px 10px;\n  cursor: pointer;\n  color: inherit;\n  display: none;\n  align-items: center;\n  justify-content: center;\n}\n@media (max-width: 720px) {\n  .rui-app-shell[data-collapsible=\"true\"] .rui-app-shell-sidebar {\n    position: fixed;\n    inset: 0 auto 0 0;\n    z-index: 50;\n    transform: translateX(-100%);\n    transition: transform 0.25s ease;\n  }\n  .rui-app-shell[data-collapsible=\"true\"][data-sidebar-open=\"true\"] .rui-app-shell-sidebar {\n    transform: translateX(0);\n  }\n  .rui-app-shell[data-collapsible=\"true\"][data-sidebar-open=\"true\"] .rui-app-shell-scrim {\n    display: block;\n  }\n  .rui-app-shell[data-collapsible=\"true\"] .rui-app-shell-toggle {\n    display: inline-flex;\n  }\n}\n\n/* Collapsed Sidebar (icon rail) ------------------------------ */\n.rui-sidebar[data-collapsed=\"true\"] { width: 64px; }\n.rui-sidebar[data-collapsed=\"true\"] .rui-sidebar-tagline,\n.rui-sidebar[data-collapsed=\"true\"] .rui-sidebar-section-label,\n.rui-sidebar[data-collapsed=\"true\"] .rui-sidebar-item-label,\n.rui-sidebar[data-collapsed=\"true\"] .rui-sidebar-item-badge { display: none; }\n.rui-sidebar[data-collapsed=\"true\"] .rui-sidebar-item { justify-content: center; }\n\n/* New components (Tier 1\u20133) ----------------------------------- */\n.rui-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--rui-border-width) solid transparent;\n  border-radius: var(--rui-radius-button);\n  background: transparent;\n  color: var(--rui-color-text);\n  cursor: pointer;\n  padding: 6px;\n}\n.rui-icon-button:hover:not(:disabled) { background: var(--rui-color-surface-muted); }\n.rui-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }\n.rui-icon-button[data-variant=\"primary\"] { background: var(--rui-color-primary); color: var(--rui-color-primary-text); }\n.rui-icon-button[data-size=\"sm\"] { padding: 4px; }\n.rui-icon-button[data-size=\"lg\"] { padding: 10px; }\n\n.rui-command-palette[data-open=\"false\"] { display: none; }\n.rui-command-palette-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 80;\n}\n.rui-command-palette-panel {\n  position: fixed;\n  top: 12%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: min(560px, calc(100vw - 32px));\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  z-index: 81;\n  overflow: hidden;\n}\n.rui-command-palette-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--rui-color-border);\n}\n.rui-command-palette-input { flex: 1; border: 0; background: transparent; font: inherit; outline: none; }\n.rui-command-palette-shortcut { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-command-palette-list { max-height: 320px; overflow: auto; padding: 6px; }\n.rui-command-palette-group {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--rui-color-text-muted);\n  padding: 8px 8px 4px;\n}\n.rui-command-palette-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  border-radius: var(--rui-radius-sm);\n  padding: 8px 10px;\n  text-align: left;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n}\n.rui-command-palette-item:hover { background: var(--rui-color-surface-muted); }\n.rui-command-palette-item-kbd { font-size: 11px; color: var(--rui-color-text-muted); }\n.rui-command-palette-empty { padding: 16px; text-align: center; color: var(--rui-color-text-muted); }\n\n.rui-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.rui-filter-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }\n.rui-filter-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--rui-color-primary) 12%, transparent);\n  border: 1px solid var(--rui-color-border);\n  font-size: 13px;\n}\n.rui-filter-chip-remove {\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  padding: 0 2px;\n  color: var(--rui-color-text-muted);\n}\n.rui-filter-chips-clear {\n  border: 0;\n  background: transparent;\n  color: var(--rui-color-primary);\n  cursor: pointer;\n  font-size: 13px;\n}\n\n.rui-field-repeater { display: flex; flex-direction: column; gap: 12px; }\n.rui-field-repeater-row {\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  padding: 12px;\n  background: var(--rui-color-surface);\n}\n.rui-field-repeater-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 10px;\n}\n.rui-field-repeater-label { display: block; font-size: 12px; color: var(--rui-color-text-muted); margin-bottom: 4px; }\n.rui-field-repeater-remove { margin-top: 8px; }\n\n.rui-virtual-list-scroller { position: relative; overflow: auto; border: 1px solid var(--rui-color-border); border-radius: var(--rui-radius-md); }\n.rui-virtual-list-item {\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--rui-color-border);\n  box-sizing: border-box;\n}\n\n.rui-query-builder { display: flex; flex-direction: column; gap: 8px; }\n.rui-query-builder-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.rui-query-builder-remove,\n.rui-query-builder-add {\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  border-radius: var(--rui-radius-sm);\n  padding: 6px 10px;\n  cursor: pointer;\n}\n\n.rui-diff-viewer { border: 1px solid var(--rui-color-border); border-radius: var(--rui-radius-md); overflow: hidden; font-family: var(--rui-font-family-mono, monospace); font-size: 12px; }\n.rui-diff-viewer-panes { display: grid; grid-template-columns: 1fr 1fr; }\n.rui-diff-viewer-pane { margin: 0; padding: 12px; overflow: auto; max-height: 320px; }\n.rui-diff-viewer-left { border-right: 1px solid var(--rui-color-border); background: color-mix(in srgb, var(--rui-color-danger) 6%, var(--rui-color-surface)); }\n.rui-diff-viewer-right { background: color-mix(in srgb, var(--rui-color-success) 6%, var(--rui-color-surface)); }\n.rui-diff-viewer-unified { margin: 0; padding: 12px; max-height: 320px; overflow: auto; }\n.rui-diff-line-add { background: color-mix(in srgb, var(--rui-color-success) 12%, transparent); }\n.rui-diff-line-remove { background: color-mix(in srgb, var(--rui-color-danger) 12%, transparent); }\n\n.rui-json-tree { font-family: var(--rui-font-family-mono, monospace); font-size: 12px; }\n.rui-json-tree-toggle {\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--rui-color-text);\n  padding: 2px 0;\n}\n.rui-json-tree-children[data-open=\"false\"] { display: none; }\n.rui-json-tree-row { padding-left: 12px; }\n.rui-json-tree-key { color: var(--rui-color-primary); }\n.rui-json-tree-leaf { color: var(--rui-color-text-muted); }\n\n.rui-gantt { border: 1px solid var(--rui-color-border); border-radius: var(--rui-radius-md); overflow: hidden; }\n.rui-gantt-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rui-color-border); }\n.rui-gantt-label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.rui-gantt-bars { position: relative; height: 24px; background: var(--rui-color-surface-muted); border-radius: var(--rui-radius-sm); }\n.rui-gantt-bar {\n  position: absolute;\n  top: 4px;\n  height: 16px;\n  border-radius: var(--rui-radius-sm);\n  background: var(--rui-color-primary);\n  overflow: hidden;\n}\n.rui-gantt-bar-progress { height: 100%; background: color-mix(in srgb, #000 25%, var(--rui-color-primary)); }\n\n.rui-truncate-text { margin: 0; }\n.rui-truncate-toggle {\n  border: 0;\n  background: transparent;\n  color: var(--rui-color-primary);\n  cursor: pointer;\n  padding: 4px 0;\n  font-size: 13px;\n}\n\n.rui-inline-edit { display: inline-flex; flex-direction: column; gap: 4px; }\n.rui-inline-edit-display {\n  border: 1px dashed var(--rui-color-border);\n  background: transparent;\n  border-radius: var(--rui-radius-sm);\n  padding: 4px 8px;\n  cursor: text;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n}\n.rui-inline-edit-input { display: none; }\n.rui-inline-edit[data-editing=\"true\"] .rui-inline-edit-display { display: none; }\n.rui-inline-edit[data-editing=\"true\"] .rui-inline-edit-input { display: block; }\n\n.rui-notification-bell { position: relative; display: inline-block; width: 30px; }\n.rui-notification-bell-trigger {\n  position: relative;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  padding: 6px;\n  color: inherit;\n}\n.rui-notification-bell-badge {\n  position: absolute;\n  top: 0;\n  right: 0;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 999px;\n  background: var(--rui-color-danger);\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.rui-notification-bell-panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  width: min(320px, 80vw);\n  background: var(--rui-color-surface);\n  border: 1px solid var(--rui-color-border);\n  border-radius: var(--rui-radius-md);\n  box-shadow: var(--rui-shadow-md);\n  z-index: 40;\n  max-height: 360px;\n  overflow: auto;\n}\n.rui-notification-bell[data-open=\"true\"] .rui-notification-bell-panel { display: block; }\n.rui-notification-bell-item {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--rui-color-border);\n}\n.rui-notification-bell-item-title { font-weight: 600; font-size: 13px; }\n.rui-notification-bell-item-message,\n.rui-notification-bell-item-time { font-size: 12px; color: var(--rui-color-text-muted); }\n.rui-notification-bell-empty { padding: 16px; text-align: center; color: var(--rui-color-text-muted); }\n.rui-select-searchable { width: 100%; }\n\n/* Lightbox thumbnail ------------------------------------------------- */\n.rui-lightbox-thumb {\n  display: inline-block;\n  padding: 0;\n  border: 1px solid var(--rui-color-border);\n  background: var(--rui-color-surface);\n  border-radius: var(--rui-radius-md, 8px);\n  overflow: hidden;\n  cursor: zoom-in;\n  max-width: 240px;\n}\n.rui-lightbox-thumb img { display: block; width: 100%; height: auto; }\n.rui-lightbox-thumb:hover { border-color: var(--rui-color-primary); }\n";