:root {
  color-scheme: light;
  /* Calm typography and rhythm */
  --oui-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --oui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --oui-font-size-2xs: .6875rem;
  --oui-font-size-xs: .75rem;
  --oui-font-size-sm: .875rem;
  --oui-font-size-md: 1rem;
  --oui-font-size-lg: 1.125rem;
  --oui-font-size-xl: 1.25rem;
  --oui-font-size-2xl: 1.5rem;
  --oui-font-size-3xl: 1.875rem;
  --oui-font-size-4xl: 2.25rem;
  --oui-line-tight: 1.15;
  --oui-line-body: 1.6;
  --oui-weight-regular: 400;
  --oui-weight-medium: 500;
  --oui-weight-semibold: 600;
  --oui-weight-bold: 700;
  --oui-space-3xs: .125rem;
  --oui-space-2xs: .25rem;
  --oui-space-xs: .5rem;
  --oui-space-sm: .75rem;
  --oui-space-md: 1rem;
  --oui-space-lg: 1.5rem;
  --oui-space-xl: 2rem;
  --oui-space-2xl: 3rem;
  --oui-space-3xl: 4rem;
  --oui-size-icon-sm: 1rem;
  --oui-size-icon-md: 1.25rem;
  --oui-size-control-sm: 2.125rem;
  --oui-size-control-md: 2.5rem;
  --oui-size-control-lg: 2.875rem;
  --oui-size-hit: 2.5rem;
  --oui-radius-xs: .3125rem;
  --oui-radius-sm: .5rem;
  --oui-radius-md: .6875rem;
  --oui-radius-lg: .9375rem;
  --oui-radius-xl: 1.1875rem;
  --oui-radius-full: 999rem;
  --oui-border-thin: .0625rem;
  --oui-shadow-xs: 0 .0625rem .125rem rgb(15 23 42 / .04), 0 .0625rem .0625rem rgb(15 23 42 / .02);
  --oui-shadow-sm: 0 .125rem .375rem rgb(15 23 42 / .06), 0 .0625rem .125rem rgb(15 23 42 / .03);
  --oui-shadow-md: 0 .75rem 1.5rem rgb(15 23 42 / .08), 0 .25rem .5rem rgb(15 23 42 / .04);
  --oui-shadow-lg: 0 1.25rem 2.5rem rgb(15 23 42 / .12), 0 .5rem 1rem rgb(15 23 42 / .06);
  --oui-shadow-inset: inset 0 .0625rem 0 rgb(255 255 255 / .78);
  --oui-control-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .68);
  --oui-opacity-disabled: .56;
  --oui-z-sticky: 20;
  --oui-z-dropdown: 40;
  --oui-z-overlay: 60;
  --oui-z-modal: 70;
  --oui-z-toast: 80;
  --oui-z-tooltip: 90;
  --oui-motion-fast: 120ms;
  --oui-motion-base: 160ms;
  --oui-motion-slow: 220ms;
  --oui-ease: cubic-bezier(.2,.8,.2,1);
  --oui-break-md: 48rem;
  --oui-break-lg: 64rem;
  --oui-container: 90rem;
  /* Elegant neutrals with a restrained cool accent */
  --oui-neutral-0: #fff;
  --oui-neutral-50: #f8f9fb;
  --oui-neutral-100: #f2f4f6;
  --oui-neutral-200: #e7ebef;
  --oui-neutral-300: #d6dde4;
  --oui-neutral-400: #a4afbb;
  --oui-neutral-500: #778392;
  --oui-neutral-600: #586475;
  --oui-neutral-700: #404b59;
  --oui-neutral-800: #2a333d;
  --oui-neutral-900: #1b2229;
  --oui-neutral-950: #11161b;
  --oui-brand-50: #f5f8fb;
  --oui-brand-100: #eaf0f6;
  --oui-brand-200: #dae4ee;
  --oui-brand-300: #c3d1df;
  --oui-brand-400: #9fb4c8;
  --oui-brand-500: #7793ad;
  --oui-brand-600: #526f8a;
  --oui-brand-700: #3d566d;
  --oui-brand-800: #2f4559;
  --oui-success: #2f6b43;
  --oui-success-soft: #e8f4ec;
  --oui-warning: #8b6535;
  --oui-warning-soft: #f7efe3;
  --oui-danger: #9b4b4b;
  --oui-danger-soft: #faecec;
  --oui-info: #40648a;
  --oui-info-soft: #eaf1f8;
  --oui-bg-canvas: #f5f6f8;
  --oui-bg-muted: #f9fafb;
  --oui-bg-subtle: #f2f4f6;
  --oui-bg-surface: #fff;
  --oui-bg-elevated: #fcfcfd;
  --oui-bg-overlay: rgb(17 24 39 / .32);
  --oui-text-primary: #171c22;
  --oui-text-secondary: #4b5968;
  --oui-text-muted: #6b7785;
  --oui-text-inverse: #fff;
  --oui-link: var(--oui-brand-700);
  --oui-border: #e4e8ee;
  --oui-border-strong: #d3dbe4;
  --oui-border-focus: color-mix(in srgb, var(--oui-brand-400) 58%, white);
  --oui-ring: rgb(82 111 138 / .16);
  --oui-selection: rgb(119 147 173 / .18);
  --oui-primary-bg: #171a20;
  --oui-primary-bg-hover: #1d2128;
  --oui-primary-bg-active: #13161c;
  --oui-primary-border: #222834;
  --oui-primary-foreground: #fbfcfe;
  --oui-chart-1: #526f8a;
  --oui-chart-2: #5e7c75;
  --oui-chart-3: #9d7951;
  --oui-chart-4: #766587;
  --oui-chart-5: #9a6174;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --oui-bg-canvas: #0f1318;
  --oui-bg-muted: #131920;
  --oui-bg-subtle: #1a2129;
  --oui-bg-surface: #141a21;
  --oui-bg-elevated: #1a2028;
  --oui-bg-overlay: rgb(4 7 12 / .64);
  --oui-text-primary: #edf2f7;
  --oui-text-secondary: #c7d0da;
  --oui-text-muted: #95a3b2;
  --oui-link: #cbd8e8;
  --oui-border: #27303a;
  --oui-border-strong: #384351;
  --oui-border-focus: color-mix(in srgb, var(--oui-brand-400) 52%, black);
  --oui-ring: rgb(119 147 173 / .24);
  --oui-success-soft: rgb(47 107 67 / .2);
  --oui-warning-soft: rgb(139 101 53 / .22);
  --oui-danger-soft: rgb(155 75 75 / .2);
  --oui-info-soft: rgb(64 100 138 / .22);
  --oui-primary-bg: #eef2f6;
  --oui-primary-bg-hover: #fff;
  --oui-primary-bg-active: #e4eaf1;
  --oui-primary-border: #f3f7fa;
  --oui-primary-foreground: #101419;
  --oui-shadow-xs: 0 .0625rem .125rem rgb(0 0 0 / .24), 0 .0625rem .0625rem rgb(0 0 0 / .16);
  --oui-shadow-sm: 0 .25rem .75rem rgb(0 0 0 / .24), 0 .125rem .25rem rgb(0 0 0 / .16);
  --oui-shadow-md: 0 1rem 2rem rgb(0 0 0 / .34), 0 .5rem 1rem rgb(0 0 0 / .22);
  --oui-shadow-lg: 0 1.5rem 3rem rgb(0 0 0 / .42), 0 .75rem 1.5rem rgb(0 0 0 / .28);
  --oui-shadow-inset: inset 0 .0625rem 0 rgb(255 255 255 / .04);
  --oui-control-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .04);
}
*,:before,:after { box-sizing: border-box; }
html { font-family: var(--oui-font-sans); font-size: 100%; line-height: var(--oui-line-body); text-size-adjust: 100%; scroll-behavior: smooth; }
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol { margin: 0; }
body { min-height: 100vh; background: var(--oui-bg-canvas); color: var(--oui-text-primary); font-size: var(--oui-font-size-md); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img,picture,svg,canvas,video { display: block; max-inline-size: 100%; block-size: auto; }
input,button,textarea,select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; }
button,[role="button"] { cursor: pointer; }
button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"] { cursor: not-allowed; }
ul,ol { padding: 0; list-style: none; }
a { color: var(--oui-link); text-decoration: none; text-underline-offset: .18em; }
a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--oui-link) 40%, transparent); }
table { inline-size: 100%; border-collapse: collapse; }
::selection { background: var(--oui-selection); }
::placeholder { color: color-mix(in srgb, var(--oui-text-muted) 72%, transparent); }
[hidden] { display: none !important; }
:where(button,a,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible { outline: none; box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-sr-only { position: absolute; inline-size: .0625rem; block-size: .0625rem; margin: -.0625rem; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.oui-container { inline-size: min(100% - 2rem, var(--oui-container)); margin-inline: auto; padding-block: var(--container-pad-block, 0); }
.oui-stack { display: grid; gap: var(--stack-space, var(--oui-space-md)); }
.oui-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inline-space, var(--oui-space-sm)); }
.oui-cluster { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cluster-space, var(--oui-space-sm)); }
.oui-grid { display: grid; gap: var(--grid-gap, var(--oui-space-lg)); }
.oui-grid[data-columns="2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.oui-grid[data-columns="3"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.oui-shell,.oui-card,.oui-panel,.oui-surface,.oui-doc-card,.oui-doc-callout,.oui-foundation-card { background: var(--oui-bg-surface); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-card,.oui-panel,.oui-surface,.oui-foundation-card { padding: clamp(var(--oui-space-md), 1.8vw, var(--oui-space-lg)); }
.oui-panel { background: var(--oui-bg-elevated); }
.oui-heading-1,.oui-heading-2,.oui-heading-3,.oui-heading-4,.oui-heading-5,.oui-heading-6,.oui-title-4,.oui-title-5,.oui-title-6 { color: var(--oui-text-primary); line-height: 1.15; font-weight: var(--oui-weight-semibold); letter-spacing: -.03em; }
.oui-heading-1 { font-size: clamp(var(--oui-font-size-3xl), 4vw, var(--oui-font-size-4xl)); }
.oui-heading-2 { font-size: clamp(var(--oui-font-size-2xl), 3vw, var(--oui-font-size-3xl)); }
.oui-heading-3 { font-size: clamp(var(--oui-font-size-xl), 2.2vw, var(--oui-font-size-2xl)); }
.oui-heading-4,.oui-title-4 { font-size: var(--oui-font-size-xl); }
.oui-heading-5,.oui-title-5 { font-size: var(--oui-font-size-lg); }
.oui-heading-6,.oui-title-6 { font-size: var(--oui-font-size-md); line-height: 1.3; }
.oui-text-sm { font-size: var(--oui-font-size-sm); line-height: 1.5; }
.oui-text-xs { font-size: var(--oui-font-size-xs); line-height: 1.45; }
.oui-text-muted { color: var(--oui-text-muted); }
.oui-code,code,kbd,pre { font-family: var(--oui-font-mono); }
.oui-code,kbd { padding: .125rem .375rem; border-radius: var(--oui-radius-sm); background: var(--oui-bg-subtle); border: var(--oui-border-thin) solid var(--oui-border); font-size: var(--oui-font-size-xs); }
pre.oui-code-block { padding: var(--oui-space-md); overflow: auto; border-radius: var(--oui-radius-lg); background: var(--oui-neutral-950); color: var(--oui-neutral-100); border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-neutral-950) 82%, white); box-shadow: var(--oui-shadow-xs); }
/* Refined controls share one quiet surface language */
.oui-button,.oui-segment,.oui-tab,.oui-menu__item,.oui-pagination__link,.oui-stepper__item,.oui-chip,.oui-pill,.oui-status,.oui-badge,.oui-nav-item,.oui-bottom-nav__item,.oui-view-switcher__button,.oui-button-group,.oui-fab,.oui-icon-button,.oui-close-button,.oui-back-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--oui-space-xs); min-block-size: var(--oui-size-hit); padding-inline: var(--oui-space-md); border-radius: var(--oui-radius-md); border: var(--oui-border-thin) solid transparent; transition: background-color var(--oui-motion-base) var(--oui-ease), border-color var(--oui-motion-base) var(--oui-ease), color var(--oui-motion-base) var(--oui-ease), box-shadow var(--oui-motion-base) var(--oui-ease), transform var(--oui-motion-fast) var(--oui-ease); white-space: nowrap; font-weight: var(--oui-weight-medium); line-height: 1; }
.oui-button:hover,.oui-segment:hover,.oui-tab:hover,.oui-menu__item:hover,.oui-pagination__link:hover,.oui-chip:hover,.oui-pill:hover,.oui-nav-item:hover,.oui-view-switcher__button:hover,.oui-back-button:hover,.oui-close-button:hover,.oui-icon-button:hover { text-decoration: none; background: var(--oui-bg-subtle); border-color: color-mix(in srgb, var(--oui-border) 72%, var(--oui-border-strong) 28%); }
.oui-button:active,.oui-segment:active,.oui-tab:active,.oui-menu__item:active,.oui-pagination__link:active,.oui-chip:active,.oui-pill:active,.oui-nav-item:active,.oui-view-switcher__button:active,.oui-icon-button:active { transform: translateY(.03125rem); }
.oui-button[data-size="sm"],.oui-chip[data-size="sm"],.oui-pill[data-size="sm"],.oui-badge[data-size="sm"],.oui-back-button[data-size="sm"] { min-block-size: var(--oui-size-control-sm); padding-inline: var(--oui-space-sm); font-size: var(--oui-font-size-sm); }
.oui-button[data-size="lg"],.oui-chip[data-size="lg"],.oui-pill[data-size="lg"],.oui-back-button[data-size="lg"],.oui-fab[data-size="lg"] { min-block-size: var(--oui-size-control-lg); padding-inline: var(--oui-space-lg); font-size: var(--oui-font-size-lg); }
.oui-button[data-variant="primary"],.oui-fab,.oui-back-button[data-variant="primary"] { background: var(--oui-primary-bg); color: var(--oui-primary-foreground); border-color: var(--oui-primary-border); box-shadow: var(--oui-shadow-sm); }
.oui-button[data-variant="primary"]:hover,.oui-fab:hover { background: var(--oui-primary-bg-hover); border-color: color-mix(in srgb, var(--oui-primary-border) 80%, white 20%); }
.oui-button[data-variant="primary"]:active,.oui-fab:active { background: var(--oui-primary-bg-active); }
.oui-button[data-variant="secondary"],.oui-button-group,.oui-segment,.oui-tab,.oui-pagination__link,.oui-nav-item,.oui-view-switcher__button,.oui-back-button,.oui-close-button,.oui-icon-button,.oui-menu__item,.oui-stepper__item { background: var(--oui-bg-surface); border-color: var(--oui-border); color: var(--oui-text-primary); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-button[data-variant="ghost"],.oui-chip,.oui-pill,.oui-badge,.oui-bottom-nav__item { background: transparent; border-color: transparent; color: var(--oui-text-secondary); box-shadow: none; }
.oui-icon-button[data-variant="ghost"],.oui-close-button[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--oui-text-secondary); box-shadow: none; }
.oui-button[data-variant="danger"],.oui-alert[data-tone="danger"],.oui-status[data-tone="danger"],.oui-badge[data-tone="danger"] { background: var(--oui-danger-soft); color: var(--oui-danger); border-color: color-mix(in srgb, var(--oui-danger) 18%, white 82%); }
.oui-button[data-variant="success"],.oui-status[data-tone="success"],.oui-badge[data-tone="success"] { background: var(--oui-success-soft); color: var(--oui-success); border-color: color-mix(in srgb, var(--oui-success) 18%, white 82%); }
.oui-button[data-variant="warning"],.oui-status[data-tone="warning"],.oui-badge[data-tone="warning"] { background: var(--oui-warning-soft); color: var(--oui-warning); border-color: color-mix(in srgb, var(--oui-warning) 18%, white 82%); }
.oui-button[data-variant="info"],.oui-status[data-tone="info"],.oui-badge[data-tone="info"] { background: var(--oui-info-soft); color: var(--oui-info); border-color: color-mix(in srgb, var(--oui-info) 18%, white 82%); }
.oui-button[disabled],.oui-button.is-disabled,.oui-chip[aria-disabled="true"],.oui-pill[aria-disabled="true"],.oui-input:disabled,.oui-select:disabled,.oui-textarea:disabled,.oui-field[data-state="disabled"] { opacity: var(--oui-opacity-disabled); box-shadow: none; }
.oui-button.is-loading,.oui-button[aria-busy="true"] { pointer-events: none; }
.oui-button__spinner,.oui-spinner { inline-size: 1em; block-size: 1em; border-radius: var(--oui-radius-full); border: .125em solid color-mix(in srgb, currentColor 25%, transparent); border-block-start-color: currentColor; animation: oui-spin .9s linear infinite; }
.oui-button__spinner[hidden] { display: none !important; }
.oui-button.is-loading .oui-button__spinner,.oui-button[aria-busy="true"] .oui-button__spinner { display: inline-block !important; }
.oui-icon-button,.oui-close-button,.oui-fab { inline-size: var(--oui-size-hit); min-inline-size: var(--oui-size-hit); padding-inline: 0; }
.oui-fab { border-radius: var(--oui-radius-full); }
.oui-fab[data-extended="true"] { inline-size: auto; min-inline-size: 0; padding-inline: var(--oui-space-sm) var(--oui-space-md); }
.oui-fab[data-extended="true"] .oui-leading { display: inline-grid; place-items: center; inline-size: 1rem; block-size: 1rem; }
.oui-fab[data-extended="true"] .oui-leading .oui-svg-icon { inline-size: 1rem; block-size: 1rem; }
.oui-fab[data-extended="true"][data-size="lg"] { padding-inline: var(--oui-space-md) var(--oui-space-lg); }
.oui-fab[data-extended="true"][data-size="lg"] .oui-leading { inline-size: 1.125rem; block-size: 1.125rem; }
.oui-fab[data-extended="true"][data-size="lg"] .oui-leading .oui-svg-icon { inline-size: 1.125rem; block-size: 1.125rem; }
.oui-button-group { position: relative; display: inline-flex; padding: var(--oui-space-3xs); gap: var(--oui-space-3xs); background: var(--oui-bg-muted); border-color: var(--oui-border); border-radius: calc(var(--oui-radius-md) + .125rem); }
.oui-button-group > * { border-radius: calc(var(--oui-radius-md) - .125rem); }
.oui-button-group > .oui-button[data-variant="secondary"],.oui-button-group > .oui-icon-button,.oui-button-group > .oui-close-button,.oui-button-group > .oui-back-button { box-shadow: none; }
@keyframes oui-spin { to { transform: rotate(1turn); } }
.oui-field,.oui-form-group,.oui-form-section,.oui-fieldset,.oui-search-result,.oui-comment-box,.oui-note-panel,.oui-record-panel,.oui-key-value,.oui-description-list,.oui-kv-list { display: grid; gap: var(--oui-space-xs); }
.oui-label,.oui-field legend { font-size: var(--oui-font-size-sm); line-height: 1.4; font-weight: var(--oui-weight-medium); color: var(--oui-text-secondary); }
.oui-required { color: var(--oui-danger); }
.oui-helper,.oui-field__meta,.oui-caption,.oui-inline-validation,.oui-error,.oui-readonly-note,.oui-disabled-note { font-size: var(--oui-font-size-xs); line-height: 1.45; }
.oui-helper,.oui-field__meta,.oui-caption,.oui-readonly-note,.oui-disabled-note { color: var(--oui-text-muted); }
.oui-error,.oui-inline-validation[data-tone="danger"] { color: var(--oui-danger); }
.oui-inline-validation[data-tone="success"] { color: var(--oui-success); }
.oui-control,.oui-input,.oui-textarea,.oui-select,.oui-select-trigger,.oui-copy-field,.oui-tag-input,.oui-upload,.oui-dropzone,.oui-search,.oui-filter-bar,.oui-search-filter-header,.oui-advanced-filter,.oui-quick-edit,.oui-summary-row,.oui-dropdown-row,.oui-readonly-field,.oui-disabled-field { inline-size: 100%; border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-md); background: var(--oui-bg-surface); color: var(--oui-text-primary); box-shadow: var(--oui-control-shadow); transition: border-color var(--oui-motion-base) var(--oui-ease), box-shadow var(--oui-motion-base) var(--oui-ease), background-color var(--oui-motion-base) var(--oui-ease); }
.oui-input,.oui-select,.oui-select-trigger,.oui-search,.oui-copy-field,.oui-dropdown-row,.oui-readonly-field,.oui-disabled-field { min-block-size: var(--oui-size-control-md); padding-inline: var(--oui-space-md); }
.oui-textarea,.oui-upload,.oui-dropzone,.oui-search-filter-header,.oui-advanced-filter,.oui-quick-edit,.oui-summary-row { padding: var(--oui-space-md); }
.oui-textarea { min-block-size: 7rem; resize: vertical; }
.oui-input[data-size="sm"],.oui-select[data-size="sm"],.oui-select-trigger[data-size="sm"] { min-block-size: var(--oui-size-control-sm); }
.oui-input[data-size="lg"],.oui-select[data-size="lg"],.oui-select-trigger[data-size="lg"] { min-block-size: var(--oui-size-control-lg); }
.oui-input:hover,.oui-select:hover,.oui-textarea:hover,.oui-select-trigger:hover,.oui-search:hover,.oui-copy-field:hover,.oui-tag-input:hover,.oui-upload:hover,.oui-dropzone:hover,.oui-dropdown-row:hover { border-color: var(--oui-border-strong); background: var(--oui-bg-elevated); }
.oui-input:focus,.oui-select:focus,.oui-textarea:focus,.oui-tag-input:focus-within,.oui-search:focus-within,.oui-copy-field:focus-within,.oui-select-trigger:focus-visible,.oui-upload:focus-within,.oui-dropzone:focus-within { border-color: var(--oui-border-focus); background: var(--oui-bg-surface); box-shadow: var(--oui-control-shadow), 0 0 0 .2rem var(--oui-ring); }
.oui-input[readonly],.oui-readonly-field { background: var(--oui-bg-muted); color: var(--oui-text-secondary); box-shadow: none; }
.oui-input[aria-invalid="true"],.oui-textarea[aria-invalid="true"],.oui-select[aria-invalid="true"],.oui-field[data-state="invalid"] .oui-input,.oui-field[data-state="invalid"] .oui-textarea,.oui-field[data-state="invalid"] .oui-select { border-color: color-mix(in srgb, var(--oui-danger) 38%, white 62%); box-shadow: var(--oui-control-shadow), 0 0 0 .2rem color-mix(in srgb, var(--oui-danger) 12%, transparent); }
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}
.oui-input-group,.oui-search,.oui-copy-field,.oui-select-row,.oui-dropdown-row,.oui-prefix-suffix,.oui-inline-form-actions { display: flex; align-items: center; gap: var(--oui-space-sm); }
.oui-input-group>.oui-input,.oui-search>.oui-input,.oui-copy-field>.oui-input,.oui-prefix-suffix>.oui-input { border: 0; box-shadow: none; background: transparent; padding-inline: 0; }
.oui-prefix,.oui-suffix,.oui-leading,.oui-trailing,.oui-icon,.oui-status-dot,.oui-mini-indicator,.oui-notification-dot,.oui-shortcut { flex: none; }
.oui-icon,.oui-status-dot,.oui-mini-indicator,.oui-notification-dot { inline-size: var(--oui-size-icon-md); block-size: var(--oui-size-icon-md); border-radius: var(--oui-radius-full); display: inline-grid; place-items: center; }
.oui-status-dot,.oui-mini-indicator { background: var(--oui-brand-500); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--oui-brand-100) 65%, transparent); }
.oui-notification-dot { inline-size: .5rem; block-size: .5rem; background: var(--oui-danger); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--oui-danger-soft) 88%, transparent); }
.oui-choice,.oui-radio,.oui-checkbox,.oui-filter-option,.oui-selectable-row { display: flex; align-items: center; gap: var(--oui-space-sm); font-size: var(--oui-font-size-sm); }
.oui-choice input,.oui-radio input,.oui-checkbox input,.oui-range,input[type="checkbox"],input[type="radio"],input[type="range"] { accent-color: var(--oui-brand-600); }
.oui-switch { display: inline-flex; align-items: center; gap: var(--oui-space-sm); }
.oui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.oui-switch__track { position: relative; inline-size: 2.5rem; block-size: 1.375rem; border-radius: var(--oui-radius-full); background: var(--oui-bg-subtle); border: var(--oui-border-thin) solid var(--oui-border-strong); box-shadow: var(--oui-control-shadow); transition: background-color var(--oui-motion-base) var(--oui-ease), border-color var(--oui-motion-base) var(--oui-ease); }
.oui-switch__track:after { content: ""; position: absolute; inset-block-start: .0625rem; inset-inline-start: .0625rem; inline-size: 1.125rem; block-size: 1.125rem; border-radius: var(--oui-radius-full); background: var(--oui-bg-surface); box-shadow: var(--oui-shadow-xs); transition: transform var(--oui-motion-base) var(--oui-ease); }
.oui-switch input:checked + .oui-switch__track { background: var(--oui-brand-500); border-color: var(--oui-brand-400); }
.oui-switch input:checked + .oui-switch__track:after { transform: translateX(1.0625rem); }
.oui-chip,.oui-pill,.oui-badge,.oui-status,.oui-shortcut { min-block-size: 1.875rem; padding-inline: var(--oui-space-sm); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-full); background: var(--oui-bg-elevated); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-medium); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-chip.is-active,.oui-pill.is-active,.oui-badge.is-active,.oui-status.is-active,.oui-segment.is-active,.oui-tab[aria-selected="true"],.oui-view-switcher__button.is-active,.oui-nav-item.is-active,.oui-bottom-nav__item.is-active,.oui-pagination__link[aria-current="page"],.oui-stepper__item.is-active,.oui-button.is-active,.oui-icon-button.is-active,.oui-back-button.is-active,.oui-close-button.is-active { background: color-mix(in srgb, var(--oui-brand-50) 76%, var(--oui-bg-surface)); border-color: color-mix(in srgb, var(--oui-brand-300) 58%, var(--oui-border) 42%); color: var(--oui-brand-700); box-shadow: var(--oui-shadow-xs), inset 0 .0625rem 0 color-mix(in srgb, white 82%, transparent); }
.oui-filter-bar,.oui-applied-filters,.oui-chip-group,.oui-pill-filters,.oui-status-pill-set,.oui-avatar-group,.oui-legend,.oui-toolbar,.oui-subnav,.oui-button-row,.oui-bottom-nav,.oui-pill-row,.oui-state-row,.oui-action-row,.oui-form-row,.oui-view-switcher,.oui-recent-searches,.oui-saved-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oui-space-sm); }
.oui-toolbar,.oui-subnav,.oui-bottom-nav,.oui-navbar,.oui-sidebar { padding: calc(var(--oui-space-sm) - .0625rem); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); background: var(--oui-bg-elevated); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-navbar,.oui-search-filter-header,.oui-section-header,.oui-page-header,.oui-kpi-row,.oui-metric-strip,.oui-filter-summary,.oui-sticky-bar,.oui-batch-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--oui-space-sm); }
.oui-page-header,.oui-sticky-bar,.oui-batch-bar { padding: clamp(var(--oui-space-md), 2vw, var(--oui-space-lg)); background: var(--oui-bg-elevated); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-sm), var(--oui-shadow-inset); }
.oui-sticky-bar,.oui-batch-bar,.oui-sticky-submit { position: sticky; inset-block-end: var(--oui-space-md); z-index: var(--oui-z-sticky); box-shadow: var(--oui-shadow-md); }
.oui-sidebar { display: grid; gap: var(--oui-space-xs); inline-size: min(100%, 16rem); }
.oui-tabs { display: grid; gap: var(--oui-space-md); }
.oui-tablist,.oui-stepper,.oui-pagination,.oui-breadcrumb,.oui-menu,.oui-list-group,.oui-segmented,.oui-menu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oui-space-xs); }
.oui-breadcrumb li + li:before { content: "/"; margin-inline: var(--oui-space-xs); color: var(--oui-text-muted); }
.oui-divider { inline-size: 100%; block-size: var(--oui-border-thin); background: var(--oui-border); }
.oui-divider[data-direction="vertical"] { inline-size: var(--oui-border-thin); block-size: 100%; min-block-size: 2rem; }
.oui-accordion,.oui-collapsible,.oui-timeline,.oui-status-timeline,.oui-activity-feed,.oui-activity-log,.oui-audit-list,.oui-search-suggestions,.oui-search-results,.oui-attachment-list,.oui-comment-thread { display: grid; gap: var(--oui-space-sm); }
.oui-accordion__item,.oui-collapsible__item,.oui-list-group,.oui-key-value,.oui-description-list,.oui-kv-list,.oui-search-result,.oui-search-suggestion,.oui-dropdown-row,.oui-record-row,.oui-attachment,.oui-comment,.oui-notes-panel,.oui-note-panel,.oui-filter-preset,.oui-menu-row,.oui-admin-row,.oui-record-details,.oui-quick-edit,.oui-confirmation,.oui-destructive,.oui-comment-box,.oui-bulk-select-header { border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); background: var(--oui-bg-surface); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-accordion__trigger,.oui-collapsible__trigger,summary.oui-summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--oui-space-sm); inline-size: 100%; padding: var(--oui-space-md) calc(var(--oui-space-md) + 1.75rem) var(--oui-space-md) calc(var(--oui-space-md) + .125rem); font-weight: var(--oui-weight-medium); }
.oui-accordion__trigger::before,.oui-accordion__trigger::after,
.oui-collapsible__trigger::before,.oui-collapsible__trigger::after,
summary.oui-summary::before,summary.oui-summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--oui-space-md);
  inset-block-start: 50%;
  inline-size: .75rem;
  block-size: .09375rem;
  border-radius: var(--oui-radius-full);
  background: currentColor;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform var(--oui-motion-base) var(--oui-ease), opacity var(--oui-motion-base) var(--oui-ease);
}
.oui-accordion__trigger::after,
.oui-collapsible__trigger::after,
summary.oui-summary::after {
  transform: translateY(-50%) rotate(90deg);
}
.oui-accordion__trigger[aria-expanded="true"]::after,
.oui-collapsible__trigger[aria-expanded="true"]::after,
summary.oui-summary[aria-expanded="true"]::after,
details[open] > summary.oui-summary::after {
  opacity: 0;
  transform: translateY(-50%) rotate(90deg) scaleX(.4);
}
.oui-accordion__panel,.oui-collapsible__content { padding: 0 var(--oui-space-md) var(--oui-space-md); color: var(--oui-text-secondary); }
.oui-menu,.oui-dropdown,.oui-context-menu,.oui-popover__surface,.oui-drawer__panel,.oui-modal__dialog,.oui-command { background: var(--oui-bg-elevated); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-md), var(--oui-shadow-inset); }
.oui-menu,.oui-dropdown,.oui-context-menu,.oui-popover__surface,.oui-command { padding: var(--oui-space-2xs); }
.oui-menu,.oui-dropdown,.oui-context-menu { min-inline-size: 12rem; display: grid; gap: var(--oui-space-2xs); }
.oui-menu--plain { padding: 0; border: 0; box-shadow: none; background: transparent; }
.oui-menu__item { justify-content: flex-start; inline-size: 100%; min-block-size: 2.375rem; padding-inline: var(--oui-space-sm); border-radius: calc(var(--oui-radius-md) - .125rem); }
.oui-menu__submenu-anchor { position: relative; }
.oui-menu__submenu-trigger { justify-content: space-between; }
.oui-dropdown.oui-menu__submenu {
  inset-block-start: calc(var(--oui-space-2xs) * -1);
  inset-inline-start: auto;
  inset-inline-end: calc(100% - .125rem);
  min-inline-size: 0;
  inline-size: var(--oui-filter-select-menu-width, 12rem);
  max-inline-size: min(var(--oui-filter-select-menu-width, 12rem), calc(100vw - 2rem));
  opacity: 0;
  pointer-events: none;
  transform: translateX(-.125rem);
  transition: opacity var(--oui-motion-fast) var(--oui-ease), transform var(--oui-motion-fast) var(--oui-ease);
}
.oui-menu__submenu-anchor:is(:hover,:focus-within) > .oui-menu__submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.oui-menu__submenu-anchor::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(100% - var(--oui-space-sm));
  inline-size: calc(var(--oui-space-sm) + .25rem);
}
.oui-menu-divider { block-size: 1px; margin: var(--oui-space-2xs) 0; background: color-mix(in srgb, var(--oui-border) 82%, transparent); }
.oui-menu-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--oui-space-sm); align-items: center; inline-size: 100%; padding: var(--oui-space-sm); color: var(--oui-text-primary); text-decoration: none; }
.oui-menu-profile:hover,.oui-menu-profile:focus-visible { text-decoration: none; }
.oui-menu-profile__avatar { display: inline-grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; border-radius: var(--oui-radius-full); color: var(--oui-primary-foreground); background: linear-gradient(135deg, var(--oui-chart-1), color-mix(in srgb, var(--oui-chart-2) 68%, var(--oui-chart-1))); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-semibold); letter-spacing: .02em; }
.oui-menu-profile__body { display: grid; gap: .125rem; min-inline-size: 0; }
.oui-menu-profile__body strong,.oui-menu-profile__body span,.oui-menu-profile__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oui-menu-profile__body strong { font-size: var(--oui-font-size-sm); line-height: 1.2; }
.oui-menu-profile__body span { color: var(--oui-text-secondary); font-size: var(--oui-font-size-xs); line-height: 1.2; }
.oui-menu-profile__body small { color: var(--oui-text-muted); font-size: var(--oui-font-size-2xs); line-height: 1.2; }
.oui-dropdown,.oui-context-menu,.oui-popover__surface { position: absolute; z-index: var(--oui-z-dropdown); }
.oui-dropdown--static { position: static; }
.oui-popover-anchor,.oui-dropdown-anchor,.oui-context-anchor,.oui-tooltip-anchor { position: relative; }
.oui-popover__surface,.oui-dropdown { inset-block-start: calc(100% + var(--oui-space-xs)); inset-inline-start: 0; }
.oui-popover__surface { inline-size: min(100vw - 2rem, 18rem); }
.oui-tooltip { position: absolute; inset-block-end: calc(100% + var(--oui-space-xs)); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--oui-z-tooltip); padding: var(--oui-space-xs) var(--oui-space-sm); border-radius: var(--oui-radius-sm); background: var(--oui-neutral-950); color: var(--oui-neutral-0); font-size: var(--oui-font-size-xs); border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-neutral-950) 82%, white); box-shadow: var(--oui-shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--oui-motion-fast) var(--oui-ease); }
.oui-tooltip-anchor:hover .oui-tooltip,.oui-tooltip-anchor:focus-within .oui-tooltip,.oui-tooltip.is-visible { opacity: 1; }
.oui-overlay,.oui-modal-root,.oui-drawer-root,.oui-loading-overlay { position: fixed; inset: 0; z-index: var(--oui-z-overlay); }
.oui-overlay,.oui-modal-root,.oui-drawer-root { display: grid; place-items: center; padding: var(--oui-space-lg); background: var(--oui-bg-overlay); }
.oui-modal__dialog,.oui-command { inline-size: min(100%, 36rem); max-block-size: min(80vh, 42rem); overflow: auto; padding: clamp(var(--oui-space-md), 2vw, var(--oui-space-lg)); }
.oui-drawer-root { align-items: stretch; justify-items: end; padding: 0; }
.oui-drawer__panel { inline-size: min(100%, 24rem); block-size: 100%; padding: var(--oui-space-lg); border-radius: var(--oui-radius-xl) 0 0 var(--oui-radius-xl); }
.oui-drawer-root[data-side="left"] { justify-items: start; }
.oui-drawer-root[data-side="left"] .oui-drawer__panel { border-radius: 0 var(--oui-radius-xl) var(--oui-radius-xl) 0; }
.oui-drawer-root[data-side="bottom"] { align-items: end; justify-items: stretch; padding: 0; }
.oui-drawer-root[data-side="bottom"] .oui-drawer__panel { inline-size: 100%; max-inline-size: 100%; block-size: auto; max-block-size: min(85vh, 34rem); padding: var(--oui-space-sm) var(--oui-space-md) calc(var(--oui-space-md) + env(safe-area-inset-bottom)); border-radius: var(--oui-radius-xl) var(--oui-radius-xl) 0 0; }
.oui-sheet-handle { inline-size: 3rem; block-size: .3125rem; margin-inline: auto; border-radius: var(--oui-radius-full); background: color-mix(in srgb, var(--oui-text-muted) 26%, transparent); }
.oui-action-sheet { display: grid; gap: var(--oui-space-2xs); }
.oui-action-sheet__option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--oui-space-sm); align-items: center; inline-size: 100%; padding: var(--oui-space-sm) 0; text-align: start; }
.oui-action-sheet__option + .oui-action-sheet__option { border-block-start: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent); }
.oui-action-sheet__meta { display: grid; gap: .1875rem; min-inline-size: 0; }
.oui-action-sheet__meta strong,.oui-action-sheet__meta span { display: block; }
.oui-action-sheet__meta strong { color: var(--oui-text-primary); font-size: var(--oui-font-size-sm); font-weight: var(--oui-weight-semibold); line-height: 1.2; }
.oui-action-sheet__meta span { color: var(--oui-text-secondary); font-size: var(--oui-font-size-xs); line-height: 1.35; }
.oui-action-sheet__badge { display: inline-grid; place-items: center; inline-size: 1.875rem; block-size: 1.875rem; color: var(--oui-text-muted); border-radius: var(--oui-radius-full); background: color-mix(in srgb, var(--oui-bg-subtle) 72%, transparent); }
.oui-action-sheet__badge .oui-leading { display: inline-grid; place-items: center; inline-size: 1rem; block-size: 1rem; }
.oui-action-sheet__badge .oui-svg-icon { inline-size: .9375rem; block-size: .9375rem; }
.oui-action-sheet__action { justify-self: end; pointer-events: none; }
.oui-command { display: grid; gap: var(--oui-space-sm); }
.oui-backdrop { min-block-size: 8rem; border-radius: var(--oui-radius-lg); background: var(--oui-bg-overlay); }
.oui-alert,.oui-empty,.oui-state,.oui-chart-state,.oui-confirmation,.oui-destructive { display: grid; gap: var(--oui-space-sm); padding: var(--oui-space-md); border-radius: var(--oui-radius-lg); border: var(--oui-border-thin) solid var(--oui-border); background: var(--oui-bg-elevated); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-alert[data-tone="success"],.oui-state[data-tone="success"],.oui-chart-state[data-tone="success"] { background: var(--oui-success-soft); color: var(--oui-success); }
.oui-alert[data-tone="warning"],.oui-state[data-tone="warning"],.oui-chart-state[data-tone="warning"] { background: var(--oui-warning-soft); color: var(--oui-warning); }
.oui-alert[data-tone="danger"],.oui-state[data-tone="danger"],.oui-chart-state[data-tone="danger"],.oui-destructive { background: var(--oui-danger-soft); color: var(--oui-danger); }
.oui-alert[data-tone="info"],.oui-state[data-tone="info"],.oui-chart-state[data-tone="info"],.oui-confirmation { background: var(--oui-info-soft); color: var(--oui-info); }
.oui-toast-region { position: fixed; inset-inline-end: var(--oui-space-lg); inset-block-end: var(--oui-space-lg); z-index: var(--oui-z-toast); display: grid; gap: var(--oui-space-sm); inline-size: min(100% - 2rem, 20rem); }
.oui-toast { display: flex; align-items: flex-start; gap: var(--oui-space-sm); padding: var(--oui-space-md); border-radius: var(--oui-radius-lg); background: var(--oui-bg-elevated); border: var(--oui-border-thin) solid var(--oui-border); box-shadow: var(--oui-shadow-md), var(--oui-shadow-inset); animation: oui-toast-in var(--oui-motion-base) var(--oui-ease); transition: opacity 220ms var(--oui-ease), transform 220ms var(--oui-ease); }
@keyframes oui-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
.oui-skeleton { position: relative; overflow: hidden; min-block-size: var(--skeleton-block-size, 1rem); border-radius: var(--oui-radius-sm); background: linear-gradient(90deg, var(--oui-bg-subtle), color-mix(in srgb, var(--oui-bg-subtle) 70%, white), var(--oui-bg-subtle)); background-size: 200% 100%; animation: oui-shimmer 1.2s linear infinite; }
@keyframes oui-shimmer { to { background-position: -200% 0; } }
.oui-progress,.oui-chart-bar,.oui-step-progress { display: grid; gap: var(--oui-space-xs); }
.oui-progress__track,.oui-chart-bars,.oui-sparkline,.oui-range-track { border-radius: var(--oui-radius-full); background: var(--oui-bg-subtle); }
.oui-progress__track { overflow: hidden; block-size: .625rem; }
.oui-progress__value { inline-size: var(--progress, 50%); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--oui-brand-500), var(--oui-brand-700)); }
.oui-stepper__item { position: relative; }
.oui-stepper__item:after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(-1 * var(--oui-space-sm)); inline-size: var(--oui-space-sm); block-size: var(--oui-border-thin); background: var(--oui-border); }
.oui-stepper__item:last-child:after { display: none; }
.oui-timeline__item,.oui-activity-item,.oui-activity-log__item,.oui-audit-row,.oui-comment,.oui-attachment { display: grid; gap: var(--oui-space-xs); padding-inline-start: var(--oui-space-lg); position: relative; }
.oui-timeline__item:before,.oui-activity-item:before,.oui-activity-log__item:before,.oui-audit-row:before,.oui-comment:before,.oui-attachment:before { content: ""; position: absolute; inset-inline-start: .375rem; inset-block-start: .375rem; inline-size: .5rem; block-size: .5rem; border-radius: var(--oui-radius-full); background: var(--oui-brand-600); }
.oui-data-cards,.oui-stats-cards,.oui-metric-tiles,.oui-dashboard-stats,.oui-kpi-row,.oui-docs__overview { display: grid; gap: var(--oui-space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.oui-stat-card,.oui-metric-tile,.oui-dashboard-stat,.oui-data-card { display: grid; gap: var(--oui-space-sm); padding: clamp(var(--oui-space-md), 1.6vw, var(--oui-space-lg)); border-radius: var(--oui-radius-lg); background: var(--oui-bg-surface); border: var(--oui-border-thin) solid var(--oui-border); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-stat-card strong,.oui-metric-tile strong,.oui-dashboard-stat strong,.oui-data-card strong { font-size: clamp(var(--oui-font-size-lg), 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.03em; }
.oui-table-wrap,.oui-scroll-area,.oui-horizontal-scroller { overflow: auto; border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); background: var(--oui-bg-surface); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); }
.oui-table { min-inline-size: 40rem; }
.oui-table th,.oui-table td { padding: .8125rem var(--oui-space-md); text-align: start; border-block-end: var(--oui-border-thin) solid var(--oui-border); font-size: var(--oui-font-size-sm); }
.oui-table th { color: var(--oui-text-muted); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-semibold); background: color-mix(in srgb, var(--oui-bg-muted) 94%, var(--oui-bg-surface)); }
.oui-table[data-density="dense"] th,.oui-table[data-density="dense"] td { padding-block: var(--oui-space-xs); }
.oui-table tbody tr { transition: background-color var(--oui-motion-fast) var(--oui-ease), box-shadow var(--oui-motion-fast) var(--oui-ease); }
.oui-table[data-zebra="true"] tbody tr:nth-child(even) { background: color-mix(in srgb, var(--oui-bg-muted) 58%, transparent); }
.oui-table tbody tr:hover { background: color-mix(in srgb, var(--oui-bg-subtle) 82%, var(--oui-bg-surface)); }
.oui-table tbody tr:focus-within { background: color-mix(in srgb, var(--oui-brand-50) 52%, var(--oui-bg-surface)); }
.oui-table tbody tr.is-selected { background: color-mix(in srgb, var(--oui-brand-50) 62%, var(--oui-bg-surface)); }
.oui-table th[aria-sort] { cursor: pointer; user-select: none; }
.oui-table th[aria-sort="ascending"]:after { content: " ↑"; }
.oui-table th[aria-sort="descending"]:after { content: " ↓"; }
.oui-sticky-table-header thead th,.oui-table thead.is-sticky th { position: sticky; inset-block-start: 0; z-index: var(--oui-z-sticky); box-shadow: inset 0 -.0625rem 0 var(--oui-border); }
.oui-key-value,.oui-description-list,.oui-kv-list { overflow: hidden; }
.oui-key-value__row,.oui-description-list__row,.oui-kv-list__row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--oui-space-sm); padding: var(--oui-space-sm) var(--oui-space-md); border-block-end: var(--oui-border-thin) solid var(--oui-border); }
.oui-key-value__row:last-child,.oui-description-list__row:last-child,.oui-kv-list__row:last-child,.oui-list-group__item:last-child { border-block-end: 0; }
.oui-list-group__item { padding: var(--oui-space-sm) var(--oui-space-md); border-block-end: var(--oui-border-thin) solid var(--oui-border); }
.oui-avatar,.oui-avatar__fallback { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--oui-radius-full); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--oui-brand-100) 75%, white 25%); color: var(--oui-brand-700); font-weight: var(--oui-weight-semibold); }
.oui-avatar-group > * + * { margin-inline-start: -.625rem; border: .125rem solid var(--oui-bg-surface); }
.oui-badge-counter { min-inline-size: 1.5rem; padding-inline: var(--oui-space-xs); min-block-size: 1.5rem; }
.oui-upload,.oui-dropzone,.oui-loading-overlay,.oui-image-placeholder,.oui-chart,.oui-calendar,.oui-resizable-panel,.oui-empty,.oui-chart-state,.oui-attachment-list,.oui-profile-summary { display: grid; gap: var(--oui-space-sm); place-items: center; min-block-size: 10rem; text-align: center; color: var(--oui-text-secondary); }
.oui-dropzone { border-style: dashed; background: var(--oui-bg-muted); }
.oui-calendar,.oui-chart,.oui-image-placeholder,.oui-resizable-panel { border: var(--oui-border-thin) dashed var(--oui-border-strong); background: var(--oui-bg-muted); }
.oui-chart { min-block-size: 14rem; padding: var(--oui-space-lg); }
.oui-chart-bars,.oui-sparkline { inline-size: 100%; min-block-size: 7rem; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--oui-space-xs); padding: var(--oui-space-sm); }
.oui-chart-bars > span,.oui-sparkline > span { inline-size: 100%; max-inline-size: 1.5rem; block-size: var(--bar-size, 50%); border-radius: var(--oui-radius-sm) var(--oui-radius-sm) 0 0; background: linear-gradient(180deg, var(--oui-chart-1), var(--oui-chart-2)); }
.oui-sparkline { min-block-size: 4rem; }
.oui-sparkline > span { max-inline-size: .625rem; }
.oui-legend__item { display: inline-flex; align-items: center; gap: var(--oui-space-xs); font-size: var(--oui-font-size-sm); color: var(--oui-text-secondary); }
.oui-legend__swatch { inline-size: .75rem; block-size: .75rem; border-radius: var(--oui-radius-full); background: var(--swatch, var(--oui-chart-1)); }
.oui-horizontal-scroller { display: flex; gap: var(--oui-space-sm); padding: var(--oui-space-sm); }
.oui-horizontal-scroller > * { flex: 0 0 auto; inline-size: min(100%, 14rem); }
.oui-scroll-area { max-block-size: 14rem; padding: var(--oui-space-sm); }
.oui-loading-overlay { background: rgb(255 255 255 / .74); }
html[data-theme="dark"] .oui-loading-overlay { background: rgb(10 12 16 / .72); }
.oui-resizable-panel { resize: horizontal; overflow: auto; min-inline-size: 12rem; max-inline-size: 100%; padding: var(--oui-space-lg); }
.oui-docs { background: linear-gradient(180deg, var(--oui-bg-canvas), color-mix(in srgb, var(--oui-bg-muted) 36%, var(--oui-bg-canvas))); }
.oui-docs__layout { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--oui-space-xl); align-items: start; }
.oui-docs__sidebar { position: sticky; inset-block-start: var(--oui-space-lg); display: grid; gap: var(--oui-space-sm); padding: var(--oui-space-md); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-xl); background: color-mix(in srgb, var(--oui-bg-surface) 96%, transparent); box-shadow: var(--oui-shadow-xs), var(--oui-shadow-inset); max-block-size: calc(100vh - 2rem); overflow: auto; }
.oui-docs__content,.oui-docs__meta,.oui-doc-card__meta,.oui-doc-foundations,.oui-doc-section,.oui-doc-section__header { display: grid; gap: var(--oui-space-lg); }
.oui-docs__hero { display: grid; gap: var(--oui-space-lg); padding: clamp(var(--oui-space-lg), 3vw, var(--oui-space-xl)); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-xl); background: radial-gradient(circle at top right, color-mix(in srgb, var(--oui-brand-100) 28%, transparent), transparent 42%), var(--oui-bg-surface); box-shadow: var(--oui-shadow-sm), var(--oui-shadow-inset); }
.oui-doc-nav__link { display: block; padding: var(--oui-space-xs) var(--oui-space-sm); border-radius: var(--oui-radius-md); color: var(--oui-text-secondary); }
.oui-doc-nav__link:hover,.oui-doc-nav__link.is-active { background: var(--oui-bg-subtle); color: var(--oui-text-primary); text-decoration: none; }
.oui-doc-section__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--oui-space-lg); }
.oui-doc-card { display: grid; gap: var(--oui-space-md); padding: var(--oui-space-md); }
.oui-doc-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--oui-space-sm); }
.oui-doc-card__preview { display: grid; gap: var(--oui-space-sm); align-content: start; min-block-size: 10rem; padding: var(--oui-space-md); border: var(--oui-border-thin) solid var(--oui-border); border-radius: var(--oui-radius-lg); background: color-mix(in srgb, var(--oui-bg-muted) 88%, var(--oui-bg-surface)); box-shadow: inset 0 .0625rem 0 color-mix(in srgb, white 82%, transparent); }
.oui-doc-card[hidden] { display: none !important; }
.oui-foundation-card ul { display: grid; gap: var(--oui-space-xs); }
.oui-foundation-card li { font-size: var(--oui-font-size-sm); color: var(--oui-text-secondary); }
/* Dense light component-board skin: shadcn-like structure with ordnryUI light tokens. */
:root {
  --oui-radius-md: .625rem;
  --oui-radius-lg: .75rem;
  --oui-radius-xl: .875rem;
  --oui-size-control-sm: 1.875rem;
  --oui-size-control-md: 2.25rem;
  --oui-size-control-lg: 2.5rem;
  --oui-size-hit: 2.25rem;
  --oui-container: 96rem;
  --oui-shadow-xs: 0 .0625rem .125rem rgb(15 23 42 / .035);
  --oui-shadow-sm: 0 .25rem .75rem rgb(15 23 42 / .055), 0 .0625rem .125rem rgb(15 23 42 / .035);
  --oui-shadow-md: 0 .75rem 1.5rem rgb(15 23 42 / .075), 0 .25rem .5rem rgb(15 23 42 / .045);
}
.oui-card,.oui-panel,.oui-surface,.oui-foundation-card { padding: var(--oui-space-md); }
.oui-shell,.oui-card,.oui-panel,.oui-surface,.oui-doc-card,.oui-doc-callout,.oui-foundation-card { border-color: color-mix(in srgb, var(--oui-border) 82%, var(--oui-border-strong)); box-shadow: var(--oui-shadow-xs); }
.oui-button,.oui-segment,.oui-tab,.oui-menu__item,.oui-pagination__link,.oui-stepper__item,.oui-chip,.oui-pill,.oui-status,.oui-badge,.oui-nav-item,.oui-bottom-nav__item,.oui-view-switcher__button,.oui-button-group,.oui-fab,.oui-icon-button,.oui-close-button,.oui-back-button { min-block-size: var(--oui-size-hit); padding-inline: var(--oui-space-sm); border-radius: var(--oui-radius-md); font-size: var(--oui-font-size-sm); }
.oui-button[data-size="lg"],.oui-chip[data-size="lg"],.oui-pill[data-size="lg"],.oui-back-button[data-size="lg"],.oui-fab[data-size="lg"] { min-block-size: var(--oui-size-control-lg); padding-inline: var(--oui-space-md); font-size: var(--oui-font-size-md); }
.oui-button[data-variant="secondary"],.oui-button-group,.oui-segment,.oui-tab,.oui-pagination__link,.oui-nav-item,.oui-view-switcher__button,.oui-back-button,.oui-close-button,.oui-icon-button,.oui-menu__item,.oui-stepper__item { background: color-mix(in srgb, var(--oui-bg-surface) 94%, var(--oui-bg-muted)); box-shadow: var(--oui-shadow-xs); }
.oui-button[data-variant="primary"],.oui-fab,.oui-back-button[data-variant="primary"] { box-shadow: var(--oui-shadow-sm); }
.oui-button-group { padding: .1875rem; gap: .1875rem; background: color-mix(in srgb, var(--oui-bg-muted) 88%, var(--oui-bg-surface)); }
.oui-input,.oui-select,.oui-select-trigger,.oui-search,.oui-copy-field,.oui-dropdown-row,.oui-readonly-field,.oui-disabled-field { min-block-size: var(--oui-size-control-md); padding-inline: var(--oui-space-sm); }
.oui-control,.oui-input,.oui-textarea,.oui-select,.oui-select-trigger,.oui-copy-field,.oui-tag-input,.oui-upload,.oui-dropzone,.oui-search,.oui-filter-bar,.oui-search-filter-header,.oui-advanced-filter,.oui-quick-edit,.oui-summary-row,.oui-dropdown-row,.oui-readonly-field,.oui-disabled-field { background: color-mix(in srgb, var(--oui-bg-surface) 92%, var(--oui-bg-muted)); border-color: color-mix(in srgb, var(--oui-border) 82%, var(--oui-border-strong)); box-shadow: none; }
.oui-textarea { min-block-size: 5.5rem; }
.oui-textarea,.oui-upload,.oui-dropzone,.oui-search-filter-header,.oui-advanced-filter,.oui-quick-edit,.oui-summary-row { padding: var(--oui-space-sm); }
.oui-alert,.oui-empty,.oui-state,.oui-chart-state,.oui-confirmation,.oui-destructive { padding: var(--oui-space-sm); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-xs); }
.oui-upload,.oui-dropzone,.oui-loading-overlay,.oui-image-placeholder,.oui-chart,.oui-calendar,.oui-resizable-panel,.oui-empty,.oui-chart-state,.oui-attachment-list,.oui-profile-summary { min-block-size: 7.5rem; }
.oui-chart { min-block-size: 10rem; padding: var(--oui-space-md); }
.oui-chart-bars,.oui-sparkline { min-block-size: 5.5rem; }
.oui-data-cards,.oui-stats-cards,.oui-metric-tiles,.oui-dashboard-stats,.oui-kpi-row,.oui-docs__overview { gap: var(--oui-space-sm); }
.oui-stat-card,.oui-metric-tile,.oui-dashboard-stat,.oui-data-card { gap: var(--oui-space-xs); padding: var(--oui-space-md); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-xs); }
.oui-table-wrap,.oui-scroll-area,.oui-horizontal-scroller { border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-xs); }
.oui-table th,.oui-table td { padding: var(--oui-space-sm) var(--oui-space-md); }
.oui-docs { background: radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--oui-brand-100) 68%, transparent), transparent 22rem), radial-gradient(circle at 86% 2%, color-mix(in srgb, var(--oui-neutral-200) 55%, transparent), transparent 24rem), linear-gradient(90deg, rgb(82 111 138 / .035) 1px, transparent 1px), linear-gradient(180deg, rgb(82 111 138 / .035) 1px, transparent 1px), var(--oui-bg-canvas); background-size: auto, auto, 2rem 2rem, 2rem 2rem, auto; }
.oui-docs .oui-container { padding-block: var(--oui-space-lg) !important; }
.oui-docs__layout { grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); gap: var(--oui-space-lg); }
.oui-docs__sidebar { inset-block-start: var(--oui-space-md); gap: var(--oui-space-xs); padding: var(--oui-space-sm); border-radius: var(--oui-radius-xl); background: color-mix(in srgb, var(--oui-bg-surface) 88%, transparent); box-shadow: var(--oui-shadow-sm); backdrop-filter: blur(16px); }
.oui-docs__content,.oui-docs__meta,.oui-doc-card__meta,.oui-doc-foundations,.oui-doc-section,.oui-doc-section__header { gap: var(--oui-space-md); }
.oui-docs__hero { gap: var(--oui-space-md); padding: var(--oui-space-lg); border-radius: var(--oui-radius-xl); background: color-mix(in srgb, var(--oui-bg-surface) 92%, transparent); box-shadow: var(--oui-shadow-sm); backdrop-filter: blur(14px); }
.oui-doc-section__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--oui-space-md); }
.oui-doc-card { position: relative; z-index: 0; gap: var(--oui-space-sm); padding: var(--oui-space-sm); border-radius: var(--oui-radius-xl); background: color-mix(in srgb, var(--oui-bg-surface) 94%, transparent); box-shadow: var(--oui-shadow-sm); backdrop-filter: blur(10px); }
.oui-doc-card:hover { border-color: var(--oui-border-strong); box-shadow: var(--oui-shadow-md); }
.oui-doc-card__header { align-items: start; gap: var(--oui-space-xs); }
.oui-doc-card__header .oui-stack { gap: var(--oui-space-3xs) !important; }
.oui-doc-card__header .oui-text-xs { font-size: var(--oui-font-size-2xs); letter-spacing: .01em; }
.oui-doc-card__header .oui-title-5 { font-size: var(--oui-font-size-md); letter-spacing: -.025em; }
.oui-doc-card__header > :is(.oui-badge,.oui-doc-card__copy) { min-block-size: 1.75rem; padding-inline: var(--oui-space-sm); font-size: var(--oui-font-size-2xs); background: color-mix(in srgb, var(--oui-bg-surface) 86%, var(--oui-bg-muted)); border-color: var(--oui-border); box-shadow: var(--oui-shadow-xs); }
.oui-doc-card__preview { position: relative; min-block-size: 7.25rem; padding: var(--oui-space-sm); align-content: start; border-radius: var(--oui-radius-lg); background: color-mix(in srgb, var(--oui-bg-muted) 72%, transparent); border-color: color-mix(in srgb, var(--oui-border) 82%, var(--oui-border-strong)); box-shadow: none; }
.oui-doc-card__preview > :is(.oui-field,.oui-search,.oui-copy-field,.oui-button-group,.oui-inline,.oui-stack,.oui-grid,.oui-card,.oui-panel,.oui-data-cards,.oui-table-wrap,.oui-alert,.oui-state,.oui-empty,.oui-upload,.oui-dropzone,.oui-chart,.oui-calendar,.oui-image-placeholder,.oui-resizable-panel,.oui-backdrop,.oui-section-header,.oui-page-header,.oui-sticky-bar,.oui-batch-bar,.oui-key-value,.oui-description-list,.oui-list-group,.oui-filter-preset,.oui-record-details,.oui-note-panel,.oui-comment-box,.oui-admin-row,.oui-scroll-area,.oui-horizontal-scroller,.oui-quick-edit,.oui-chart-tooltip-stage,.oui-dropdown-anchor,.oui-popover-anchor,.oui-context-anchor,.oui-tooltip-anchor,.oui-filter-select,.oui-select-shell,.oui-accordion,.oui-collapsible,.oui-tabs,.oui-sidebar,.oui-subnav,.oui-navbar,.oui-bottom-nav,.oui-stepper) { inline-size: 100%; min-inline-size: 0; }
.oui-doc-card__preview > :is(.oui-button-group,.oui-inline,.oui-pagination,.oui-breadcrumb,.oui-avatar-group,.oui-status-pill-set,.oui-view-switcher,.oui-segmented) { inline-size: auto; justify-self: start; min-inline-size: 0; }
.oui-doc-card__preview .oui-inline,.oui-doc-card__preview .oui-cluster { gap: var(--oui-space-xs); }
.oui-doc-card__preview .oui-stack { gap: var(--oui-space-sm); }
.oui-doc-card__preview .oui-dropdown-anchor,
.oui-doc-card__preview .oui-filter-select,
.oui-doc-card__preview .oui-select-shell,
.oui-doc-card__preview .oui-popover-anchor,
.oui-doc-card__preview .oui-context-anchor,
.oui-doc-card__preview .oui-tooltip-anchor {
  display: grid;
  align-content: start;
  gap: var(--oui-space-xs);
  inline-size: 100%;
}
.oui-doc-card__preview .oui-dropdown-anchor > .oui-button,
.oui-doc-card__preview .oui-filter-select__trigger,
.oui-doc-card__preview .oui-select-control { inline-size: 100%; justify-content: space-between; }
.oui-doc-card__preview .oui-loading-overlay:not([hidden]) {
  position: static;
  inset: auto;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: none;
}
.oui-doc-card__preview .oui-command {
  inline-size: 100%;
  max-inline-size: none;
  max-block-size: none;
}
.oui-doc-card__preview :is(.oui-sticky-bar,.oui-batch-bar,.oui-sticky-submit) {
  position: static;
  inset: auto;
}
.oui-doc-card__preview :is(.oui-dropdown,.oui-context-menu,.oui-popover__surface,.oui-select-menu) {
  min-inline-size: min(14rem, calc(100vw - 2rem));
}
.oui-doc-card__preview .oui-filter-select__menu {
  inline-size: min(var(--oui-filter-select-menu-width), 100%);
}
.oui-doc-card__preview .oui-filter-select__menu--custom {
  inline-size: min(var(--oui-filter-select-menu-width), 100%);
}
.oui-doc-card:has(.oui-dropdown:not([hidden]),.oui-context-menu:not([hidden]),.oui-popover__surface:not([hidden]),.oui-select-menu:not([hidden]),.oui-command:not([hidden])) {
  z-index: calc(var(--oui-z-dropdown) + 1);
}
.oui-doc-card__copy { justify-self: end; }
.oui-doc-card__copy > .oui-svg-icon { inline-size: .875rem; block-size: .875rem; }
.oui-doc-card__code { margin: 0; max-block-size: 18rem; overflow: auto; padding: var(--oui-space-sm); border-radius: var(--oui-radius-lg); font-size: var(--oui-font-size-2xs); line-height: 1.55; }
.oui-doc-card.is-code-open .oui-doc-card__copy { color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-subtle) 78%, transparent); border-color: var(--oui-border-strong); }
.oui-calendar-demo { inline-size: min(100%, 14rem); display: grid; gap: var(--oui-space-sm); text-align: left; }
.oui-calendar-demo__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3125rem; font-size: var(--oui-font-size-2xs); color: var(--oui-text-secondary); }
.oui-calendar-demo__grid > span { display: grid; place-items: center; min-block-size: 1.5rem; border-radius: var(--oui-radius-sm); }
.oui-calendar-demo__grid > .is-muted { color: var(--oui-text-muted); opacity: .72; }
.oui-calendar-demo__grid > .is-active { color: var(--oui-primary-foreground); background: var(--oui-brand-600); }
.oui-demo-overlay { inline-size: 100%; min-block-size: 8rem; padding: var(--oui-space-md); border-radius: var(--oui-radius-lg); background: var(--oui-bg-overlay); color: var(--oui-neutral-0); }
.oui-demo-resizable { inline-size: clamp(10rem, 58%, 15rem); resize: horizontal; overflow: auto; }
mark { color: inherit; background: color-mix(in srgb, var(--oui-warning) 24%, transparent); border-radius: .25rem; padding-inline: .125rem; }
html[data-theme="dark"] {
  --oui-bg-canvas: #0d1117;
  --oui-bg-muted: #111821;
  --oui-bg-subtle: #17202a;
  --oui-bg-surface: #10161d;
  --oui-bg-elevated: #141b24;
  --oui-bg-overlay: rgb(6 9 13 / .72);
  --oui-text-primary: #f4f7fb;
  --oui-text-secondary: #d3dce7;
  --oui-text-muted: #a8b4c2;
  --oui-link: #dbe7f3;
  --oui-border: #2a3440;
  --oui-border-strong: #3b4856;
  --oui-border-focus: color-mix(in srgb, var(--oui-brand-300) 66%, white);
  --oui-ring: rgb(159 180 200 / .28);
  --oui-selection: rgb(159 180 200 / .26);
  --oui-success: #8fcca1;
  --oui-success-soft: rgb(232 244 236 / .13);
  --oui-warning: #d6af7b;
  --oui-warning-soft: rgb(247 239 227 / .14);
  --oui-danger: #e28a8a;
  --oui-danger-soft: rgb(250 236 236 / .13);
  --oui-info: #a8c3df;
  --oui-info-soft: rgb(234 241 248 / .13);
  --oui-primary-bg: #f5f8fb;
  --oui-primary-bg-hover: #fff;
  --oui-primary-bg-active: #eaf0f6;
  --oui-primary-border: #dae4ee;
  --oui-primary-foreground: #11161b;
  --oui-shadow-xs: 0 .0625rem .125rem rgb(0 0 0 / .28);
  --oui-shadow-sm: 0 .25rem .75rem rgb(0 0 0 / .3), 0 .0625rem .125rem rgb(0 0 0 / .22);
  --oui-shadow-md: 0 .875rem 1.75rem rgb(0 0 0 / .36), 0 .25rem .625rem rgb(0 0 0 / .24);
  --oui-shadow-inset: inset 0 .0625rem 0 rgb(255 255 255 / .045);
  --oui-control-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .045);
}
.oui-svg-icon { inline-size: 1em; block-size: 1em; flex: none; color: currentColor; stroke-width: 2; }
.oui-button > .oui-svg-icon,.button-primary > .oui-svg-icon,.button-secondary > .oui-svg-icon,.button-danger > .oui-svg-icon,.oui-back-button > .oui-svg-icon { inline-size: var(--oui-size-icon-sm); block-size: var(--oui-size-icon-sm); margin-inline-start: -.125rem; }
.oui-icon-button.has-icon,.oui-close-button.has-icon,.oui-fab.has-icon { font-size: var(--oui-font-size-md); }
.oui-select,.field-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - .6875rem) 50%; background-size: .3125rem .3125rem, .3125rem .3125rem; background-repeat: no-repeat; padding-inline-end: 2.25rem; }
.oui-select option,.field-select option { color: var(--oui-text-primary); background: var(--oui-bg-elevated); }
.oui-select-shell { position: relative; display: block; inline-size: 100%; }
.oui-select-shell > .oui-select-native { position: absolute !important; inset: 0 auto auto 0 !important; inline-size: .0625rem !important; block-size: .0625rem !important; min-block-size: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.oui-select-control { display: flex; align-items: center; justify-content: space-between; gap: var(--oui-space-sm); inline-size: 100%; min-block-size: var(--oui-size-control-md); padding-inline: var(--oui-space-sm); color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-surface) 92%, var(--oui-bg-muted)); border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, var(--oui-border-strong)); border-radius: var(--oui-radius-md); box-shadow: var(--oui-control-shadow); transition: border-color var(--oui-motion-base) var(--oui-ease), box-shadow var(--oui-motion-base) var(--oui-ease), background-color var(--oui-motion-base) var(--oui-ease); }
.oui-select-shell--field .oui-select-control { min-block-size: var(--oui-size-control-lg); padding-inline: var(--oui-space-md); }
.oui-select-control:disabled { opacity: var(--oui-opacity-disabled); cursor: not-allowed; }
.oui-select-control:hover { background: var(--oui-bg-elevated); border-color: var(--oui-border-strong); }
.oui-select-control:focus-visible,.oui-select-control.is-active { border-color: var(--oui-border-focus); box-shadow: var(--oui-control-shadow), 0 0 0 .2rem var(--oui-ring); }
.oui-select-control .oui-svg-icon { inline-size: var(--oui-size-icon-sm); block-size: var(--oui-size-icon-sm); color: var(--oui-text-muted); transition: transform var(--oui-motion-base) var(--oui-ease), color var(--oui-motion-base) var(--oui-ease); }
.oui-select-control.is-active .oui-svg-icon { color: var(--oui-text-primary); transform: rotate(180deg); }
.oui-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oui-select-menu { position: absolute; inset-block-start: calc(100% + var(--oui-space-xs)); inset-inline: 0; z-index: var(--oui-z-dropdown); display: grid; gap: var(--oui-space-3xs); max-block-size: min(16rem, calc(100vh - 4rem)); overflow: auto; padding: var(--oui-space-2xs); color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-elevated) 94%, transparent); border: var(--oui-border-thin) solid var(--oui-border-strong); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-md), var(--oui-shadow-inset); backdrop-filter: blur(16px); transform-origin: top center; animation: oui-dropdown-in var(--oui-motion-fast) var(--oui-ease); }
.oui-select-option { display: flex; align-items: center; justify-content: space-between; gap: var(--oui-space-sm); inline-size: 100%; min-block-size: 2rem; padding-inline: var(--oui-space-sm); color: var(--oui-text-secondary); text-align: start; border-radius: calc(var(--oui-radius-md) - .125rem); transition: background-color var(--oui-motion-fast) var(--oui-ease), color var(--oui-motion-fast) var(--oui-ease); }
.oui-select-option:hover,.oui-select-option:focus-visible { color: var(--oui-text-primary); background: var(--oui-bg-subtle); box-shadow: none; }
.oui-select-option.is-selected { color: var(--oui-brand-700); background: color-mix(in srgb, var(--oui-brand-50) 78%, var(--oui-bg-surface)); }
.oui-select-option .oui-svg-icon { inline-size: var(--oui-size-icon-sm); block-size: var(--oui-size-icon-sm); opacity: 0; }
.oui-select-option.is-selected .oui-svg-icon { opacity: 1; }
.oui-dropdown,.oui-context-menu,.oui-popover__surface { background: color-mix(in srgb, var(--oui-bg-elevated) 94%, transparent); border-color: var(--oui-border-strong); box-shadow: var(--oui-shadow-md), var(--oui-shadow-inset); backdrop-filter: blur(16px); animation: oui-dropdown-in var(--oui-motion-fast) var(--oui-ease); }
.oui-dropdown,.oui-context-menu,.oui-command { gap: var(--oui-space-3xs); padding: var(--oui-space-2xs); }
.oui-menu__item { gap: var(--oui-space-sm); min-block-size: 2rem; color: var(--oui-text-secondary); }
.oui-menu__item:hover,.oui-menu__item:focus-visible { color: var(--oui-text-primary); background: var(--oui-bg-subtle); }
@keyframes oui-dropdown-in { from { opacity: 0; transform: translateY(-.25rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.oui-toast-region { inset-block-start: var(--oui-space-lg); inset-block-end: auto; }
.oui-toast { align-items: center; background: color-mix(in srgb, var(--oui-bg-elevated) 96%, transparent); backdrop-filter: blur(16px); animation-name: oui-toast-in-top; }
.oui-toast__icon { display: inline-grid; flex: none; inline-size: 2rem; block-size: 2rem; place-items: center; border-radius: var(--oui-radius-full); color: var(--oui-info); background: var(--oui-info-soft); }
.oui-toast__icon .oui-svg-icon { inline-size: var(--oui-size-icon-sm); block-size: var(--oui-size-icon-sm); }
.oui-toast[data-tone="success"] .oui-toast__icon { color: var(--oui-success); background: var(--oui-success-soft); }
.oui-toast[data-tone="warning"] .oui-toast__icon { color: var(--oui-warning); background: var(--oui-warning-soft); }
.oui-toast[data-tone="danger"] .oui-toast__icon,.oui-toast[data-tone="error"] .oui-toast__icon { color: var(--oui-danger); background: var(--oui-danger-soft); }
@keyframes oui-toast-in-top { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: translateY(0); } }
html[data-theme="dark"] .oui-chip.is-active,html[data-theme="dark"] .oui-pill.is-active,html[data-theme="dark"] .oui-badge.is-active,html[data-theme="dark"] .oui-status.is-active,html[data-theme="dark"] .oui-segment.is-active,html[data-theme="dark"] .oui-tab[aria-selected="true"],html[data-theme="dark"] .oui-view-switcher__button.is-active,html[data-theme="dark"] .oui-nav-item.is-active,html[data-theme="dark"] .oui-bottom-nav__item.is-active,html[data-theme="dark"] .oui-pagination__link[aria-current="page"],html[data-theme="dark"] .oui-stepper__item.is-active,html[data-theme="dark"] .oui-button.is-active,html[data-theme="dark"] .oui-icon-button.is-active,html[data-theme="dark"] .oui-back-button.is-active,html[data-theme="dark"] .oui-close-button.is-active { color: #dce8f3; background: color-mix(in srgb, var(--oui-brand-500) 20%, var(--oui-bg-surface)); border-color: color-mix(in srgb, var(--oui-brand-400) 44%, var(--oui-border)); }
html[data-theme="dark"] .oui-alert[data-tone="success"],html[data-theme="dark"] .oui-state[data-tone="success"],html[data-theme="dark"] .oui-chart-state[data-tone="success"] { color: var(--oui-success); background: color-mix(in srgb, #e8f4ec 12%, var(--oui-bg-elevated)); border-color: color-mix(in srgb, #e8f4ec 22%, var(--oui-border)); }
html[data-theme="dark"] .oui-alert[data-tone="warning"],html[data-theme="dark"] .oui-state[data-tone="warning"],html[data-theme="dark"] .oui-chart-state[data-tone="warning"] { color: var(--oui-warning); background: color-mix(in srgb, #f7efe3 12%, var(--oui-bg-elevated)); border-color: color-mix(in srgb, #f7efe3 22%, var(--oui-border)); }
html[data-theme="dark"] .oui-alert[data-tone="danger"],html[data-theme="dark"] .oui-state[data-tone="danger"],html[data-theme="dark"] .oui-chart-state[data-tone="danger"],html[data-theme="dark"] .oui-destructive { color: var(--oui-danger); background: color-mix(in srgb, #faecec 12%, var(--oui-bg-elevated)); border-color: color-mix(in srgb, #faecec 22%, var(--oui-border)); }
html[data-theme="dark"] .oui-alert[data-tone="info"],html[data-theme="dark"] .oui-state[data-tone="info"],html[data-theme="dark"] .oui-chart-state[data-tone="info"],html[data-theme="dark"] .oui-confirmation { color: var(--oui-info); background: color-mix(in srgb, #eaf1f8 12%, var(--oui-bg-elevated)); border-color: color-mix(in srgb, #eaf1f8 22%, var(--oui-border)); }
html[data-theme="dark"] .oui-select-option.is-selected { color: #dce8f3; background: color-mix(in srgb, var(--oui-brand-500) 18%, var(--oui-bg-elevated)); }
.oui-chart-card { --chart-grid: color-mix(in srgb, var(--oui-border) 76%, transparent); --chart-grid-strong: color-mix(in srgb, var(--oui-border-strong) 58%, transparent); --chart-muted: color-mix(in srgb, var(--oui-text-muted) 82%, transparent); position: relative; display: grid; gap: var(--oui-space-sm); inline-size: 100%; min-block-size: 10.25rem; padding: var(--oui-space-sm); color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-surface) 92%, var(--oui-bg-muted)); border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 84%, var(--oui-border-strong)); border-radius: var(--oui-radius-lg); box-shadow: var(--oui-shadow-xs); overflow: hidden; }
.oui-doc-card__preview > .oui-chart-card { inline-size: 100%; }
.oui-chart-card.is-compact { justify-items: center; align-content: center; min-block-size: 10rem; }
.oui-chart-card.is-mini { grid-template-columns: minmax(0, .8fr) minmax(7rem, 1.2fr); align-items: center; min-block-size: 5.5rem; }
.oui-chart-card.is-mini strong,.oui-chart-card.is-mini span { display: block; }
.oui-chart-card.is-mini .oui-line-chart__plot { display: grid; align-items: center; min-block-size: 3rem; }
.oui-chart-card.is-mini .oui-chart-point-layer { inset: 0; }
.oui-chart-card__header { display: flex; align-items: start; justify-content: space-between; gap: var(--oui-space-sm); }
.oui-chart-card__header > div { display: grid; gap: var(--oui-space-3xs); }
.oui-chart-card__header strong,.oui-chart-card.is-mini strong { font-size: var(--oui-font-size-sm); line-height: var(--oui-line-tight); }
.oui-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oui-space-sm); color: var(--oui-text-muted); font-size: var(--oui-font-size-sm); line-height: 1.2; }
.oui-chart-legend.is-centered { justify-content: center; }
.oui-chart-legend span { display: inline-flex; align-items: center; gap: var(--oui-space-2xs); }
.oui-chart-legend i,.oui-chart-tooltip__swatch { inline-size: .5rem; block-size: .5rem; flex: none; border-radius: .125rem; background: var(--swatch, var(--oui-chart-1)); }
.oui-chart-note { margin: 0; }
.oui-chart-plot,.oui-chart-scatter,.oui-chart-bubble { position: relative; min-block-size: 8.75rem; background-image: linear-gradient(to bottom, transparent calc(25% - .03125rem), var(--chart-grid) calc(25% - .03125rem), var(--chart-grid) 25%, transparent 25%), linear-gradient(to bottom, transparent calc(50% - .03125rem), var(--chart-grid) calc(50% - .03125rem), var(--chart-grid) 50%, transparent 50%), linear-gradient(to bottom, transparent calc(75% - .03125rem), var(--chart-grid) calc(75% - .03125rem), var(--chart-grid) 75%, transparent 75%); border-block-end: var(--oui-border-thin) solid var(--chart-grid-strong); }
.oui-chart-bars-minimal,.oui-chart-bars-grouped,.oui-chart-bars-stacked { display: flex; align-items: stretch; justify-content: space-between; gap: clamp(.5rem, 3vw, 1.25rem); padding: var(--oui-space-xs) var(--oui-space-xs) 1.5rem; }
.oui-chart-bars-minimal > span,.oui-chart-bars-grouped > span,.oui-chart-bars-stacked > span { position: relative; flex: 1 1 0; min-inline-size: 1.25rem; isolation: isolate; }
.oui-chart-bars-minimal > span::before,.oui-chart-bars-stacked > span::before { content: ""; position: absolute; inset-block-end: 0; inset-inline: 50% auto; inline-size: min(1.625rem, 72%); block-size: var(--value, calc(var(--a, 0%) + var(--b, 0%))); border-radius: var(--oui-radius-xs) var(--oui-radius-xs) .25rem .25rem; background: linear-gradient(180deg, color-mix(in srgb, var(--oui-chart-1) 94%, white), var(--oui-chart-1)); transform: translateX(-50%); box-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .18); }
.oui-chart-bars-stacked > span::before { background: linear-gradient(to top, var(--oui-chart-2) 0 var(--b), var(--oui-chart-1) var(--b) 100%); }
.oui-chart-bars-minimal > span > b,.oui-chart-bars-grouped > span > b,.oui-chart-bars-stacked > span > b { position: absolute; inset-block-end: -1.25rem; inset-inline: 50% auto; color: var(--chart-muted); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-regular); line-height: 1; transform: translateX(-50%); }
.oui-chart-bars-grouped > span { border-radius: var(--oui-radius-xs); }
.oui-chart-bars-grouped > span.is-active { background: color-mix(in srgb, var(--oui-bg-subtle) 72%, transparent); }
.oui-chart-bars-grouped > span::before,.oui-chart-bars-grouped > span::after { content: ""; position: absolute; inset-block-end: 0; inline-size: min(.875rem, 36%); border-radius: var(--oui-radius-xs) var(--oui-radius-xs) .25rem .25rem; box-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .18); }
.oui-chart-bars-grouped > span::before { inset-inline-end: 50%; block-size: var(--desktop); margin-inline-end: .125rem; background: var(--oui-chart-1); }
.oui-chart-bars-grouped > span::after { inset-inline-start: 50%; block-size: var(--mobile); margin-inline-start: .125rem; background: color-mix(in srgb, var(--oui-chart-2) 82%, white); }
.oui-chart-list { display: grid; gap: var(--oui-space-sm); align-content: center; min-block-size: 8rem; }
.oui-chart-list span { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(4rem, 1fr) auto; align-items: center; gap: var(--oui-space-sm); color: var(--oui-text-secondary); font-size: var(--oui-font-size-xs); }
.oui-chart-list b,.oui-chart-list strong { color: var(--oui-text-primary); font-weight: var(--oui-weight-medium); }
.oui-chart-list i { position: relative; block-size: .5rem; overflow: hidden; border-radius: var(--oui-radius-full); background: var(--oui-bg-subtle); }
.oui-chart-list i::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--value); border-radius: inherit; background: var(--oui-chart-1); }
.oui-chart-svg { inline-size: 100%; min-block-size: 8.75rem; overflow: visible; }
.oui-chart-gridline { fill: none; stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.oui-chart-line { fill: none; stroke: var(--oui-chart-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.oui-chart-line.is-secondary { stroke: var(--oui-chart-2); }
.oui-chart-dots circle { fill: var(--oui-bg-surface); stroke: var(--oui-chart-1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.oui-chart-area { fill: color-mix(in srgb, var(--oui-chart-1) 18%, transparent); stroke: none; }
.oui-chart-area.is-secondary { fill: color-mix(in srgb, var(--oui-chart-2) 18%, transparent); }
.oui-area-chart { display: grid; gap: var(--oui-space-xs); }
.oui-area-chart__plot,.oui-line-chart__plot { position: relative; inline-size: 100%; min-block-size: 8.75rem; }
.oui-area-chart__plot > .oui-chart-svg,.oui-line-chart__plot > .oui-chart-svg,.oui-chart-composed > .oui-chart-svg { display: block; inline-size: 100%; block-size: 100%; min-block-size: 100%; }
.oui-chart-point-frame { position: relative; inline-size: 100%; min-block-size: 8rem; }
.oui-chart-point-frame > :not(.oui-chart-point-layer) { display: block; margin-inline: auto; }
.oui-chart-point-layer { position: absolute; inset: 0; }
.oui-chart-card.is-compact .oui-chart-point-frame > .oui-chart-point-layer {
  inset: 50% auto auto 50%;
  inline-size: min(8.5rem, calc(100% - 1rem));
  block-size: min(8.5rem, calc(100% - 1rem));
  transform: translate(-50%, -50%);
}
.oui-chart-point-frame > .oui-chart-radar + .oui-chart-point-layer {
  inset-block: 0;
  inset-inline: 50% auto;
  inline-size: min(100%, 10.5rem);
  transform: translateX(-50%);
}
.oui-chart-point-hit { position: absolute; padding: 0; border: 0; background: transparent; cursor: default; outline: none; }
.oui-chart-point-hit--band { inset-block: 0; }
.oui-chart-point-hit--dot { inline-size: 1rem; block-size: 1rem; border-radius: var(--oui-radius-full); transform: translate(-50%, -50%); }
.oui-chart-point-hit--cell { inline-size: 18%; block-size: 22%; border-radius: var(--oui-radius-sm); transform: translate(-50%, -50%); }
.oui-chart-point-hit--row { inset-inline: 0; block-size: 22%; transform: translateY(-50%); }
.oui-chart-point-hit--arc { inline-size: 30%; block-size: 30%; border-radius: var(--oui-radius-full); transform: translate(-50%, -50%); }
.oui-chart-point-hit:focus-visible { box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-chart-axis-label { fill: var(--chart-muted); font-size: 7px; font-weight: var(--oui-weight-medium); letter-spacing: 0; }
.oui-chart-axis-value { fill: var(--chart-muted); font-size: 8px; font-weight: var(--oui-weight-medium); }
.oui-chart-dot { fill: var(--oui-chart-1); stroke: var(--oui-bg-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.oui-chart-dot.is-secondary { fill: var(--oui-chart-2); }
.oui-chart-composed { position: relative; inline-size: 100%; min-block-size: 9rem; overflow: hidden; border-block-end: var(--oui-border-thin) solid var(--chart-grid-strong); background-image: linear-gradient(to bottom, transparent calc(25% - .03125rem), var(--chart-grid) calc(25% - .03125rem), var(--chart-grid) 25%, transparent 25%), linear-gradient(to bottom, transparent calc(50% - .03125rem), var(--chart-grid) calc(50% - .03125rem), var(--chart-grid) 50%, transparent 50%), linear-gradient(to bottom, transparent calc(75% - .03125rem), var(--chart-grid) calc(75% - .03125rem), var(--chart-grid) 75%, transparent 75%); }
.oui-chart-composed .oui-chart-bars-minimal,.oui-chart-composed .oui-chart-svg { position: absolute; inset: 0; min-block-size: 100%; }
.oui-chart-composed .oui-chart-bars-minimal { padding: var(--oui-space-xs); opacity: .56; }
.oui-chart-composed .oui-chart-bars-minimal > span::before { inline-size: min(1.25rem, 58%); inset-block-end: 0; background: color-mix(in srgb, var(--oui-chart-1) 54%, transparent); }
.oui-chart-pie,.oui-chart-donut,.oui-chart-radial { --chart-circle-size: min(8.5rem, calc(100% - 1rem)); position: relative; display: grid; place-items: center; inline-size: var(--chart-circle-size); block-size: var(--chart-circle-size); max-inline-size: 100%; margin-inline: auto; }
.oui-chart-circle-svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.oui-chart-pie-slice { fill: var(--slice-color, var(--oui-chart-1)); stroke: none; }
.oui-chart-ring-track { fill: none; stroke: color-mix(in srgb, var(--oui-bg-subtle) 92%, transparent); stroke-width: 16; vector-effect: non-scaling-stroke; }
.oui-chart-ring-segment { fill: none; stroke: var(--slice-color, var(--oui-chart-1)); stroke-width: 16; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.oui-chart-ring-segment.is-secondary { stroke: var(--slice-color, var(--oui-chart-2)); }
.oui-chart-ring-segment.is-muted { stroke: color-mix(in srgb, var(--oui-border-strong) 82%, transparent); }
.oui-chart-ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.oui-chart-donut strong,.oui-chart-radial strong { display: block; font-size: var(--oui-font-size-xl); line-height: 1; letter-spacing: -.04em; }
.oui-chart-donut span,.oui-chart-radial span { display: block; margin-block-start: var(--oui-space-2xs); color: var(--oui-text-muted); font-size: var(--oui-font-size-xs); line-height: 1; }
.oui-chart-radar-stage { inline-size: min(100%, 10.5rem); margin-inline: auto; }
.oui-chart-radar { inline-size: 100%; block-size: auto; margin-inline: auto; }
.oui-chart-radar__ring { fill: none; stroke: var(--chart-grid-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.oui-chart-radar__shape { fill: color-mix(in srgb, var(--oui-chart-1) 20%, transparent); stroke: var(--oui-chart-1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.oui-chart-radar-point { fill: var(--oui-chart-1); stroke: var(--oui-bg-surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.oui-chart-radar-hit { fill: transparent; stroke: transparent; cursor: default; }
.oui-chart-scatter,.oui-chart-bubble { min-block-size: 8.5rem; border: var(--oui-border-thin) solid var(--chart-grid); border-radius: var(--oui-radius-md); background-color: color-mix(in srgb, var(--oui-bg-muted) 46%, transparent); background-size: 3rem 3rem; background-image: linear-gradient(var(--chart-grid) .0625rem, transparent .0625rem), linear-gradient(90deg, var(--chart-grid) .0625rem, transparent .0625rem); }
.oui-chart-scatter :is(i,button[data-chart-point]),.oui-chart-bubble :is(i,button[data-chart-point]) { position: absolute; inset-inline-start: var(--x); inset-block-end: var(--y); inline-size: var(--s, .625rem); block-size: var(--s, .625rem); border-radius: var(--oui-radius-full); background: var(--oui-chart-1); transform: translate(-50%, 50%); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--oui-chart-1) 12%, transparent); }
.oui-chart-bubble :is(i,button[data-chart-point]) { background: color-mix(in srgb, var(--oui-chart-2) 72%, transparent); border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-chart-2) 62%, white); }
.oui-chart-heatmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--oui-space-xs); align-content: center; min-block-size: 8rem; }
.oui-chart-heatmap :is(i,button[data-chart-point]) { aspect-ratio: 1; border-radius: var(--oui-radius-sm); background: var(--oui-chart-1); opacity: clamp(.18, var(--level), .95); box-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .24), 0 0 0 .0625rem color-mix(in srgb, var(--oui-chart-1) 28%, transparent); }
.oui-chart-heatmap button[data-chart-point] { border: 0; padding: 0; }
.oui-chart-spark { inline-size: 100%; block-size: 3rem; }
.oui-chart-spark path { fill: none; stroke: var(--oui-chart-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.oui-chart-tooltip { position: absolute; inset-block-start: var(--tooltip-y, 50%); inset-inline-start: var(--tooltip-x, 50%); z-index: 2; display: grid; gap: var(--oui-space-xs); min-inline-size: 9rem; max-inline-size: 13.5rem; padding: var(--oui-space-sm); color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-elevated) 96%, transparent); border: var(--oui-border-thin) solid var(--oui-border-strong); border-radius: var(--oui-radius-md); box-shadow: var(--oui-shadow-md), var(--oui-shadow-inset); transform: translate(-50%, -50%); backdrop-filter: blur(12px); font-size: var(--oui-font-size-xs); line-height: 1.25; }
.oui-chart-tooltip__title { color: var(--oui-text-primary); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-semibold); letter-spacing: -.01em; }
.oui-chart-tooltip__rows { display: grid; gap: var(--oui-space-2xs); }
.oui-chart-tooltip__row { display: grid; grid-template-columns: auto minmax(3rem, 1fr) auto; align-items: center; gap: var(--oui-space-2xs); color: var(--oui-text-secondary); }
.oui-chart-tooltip__label { min-inline-size: 0; }
.oui-chart-tooltip__value { color: var(--oui-text-primary); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-semibold); }
.oui-chart-tooltip.is-static { position: static; transform: none; }
.oui-chart-tooltip-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); place-content: center; align-items: stretch; gap: clamp(var(--oui-space-md), 8vw, var(--oui-space-2xl)); inline-size: 100%; min-inline-size: 0; min-block-size: 9.5rem; border: var(--oui-border-thin) solid var(--chart-grid, color-mix(in srgb, var(--oui-border) 76%, transparent)); border-radius: var(--oui-radius-lg); background: color-mix(in srgb, var(--oui-bg-muted) 52%, transparent); }
.oui-chart-tooltip-stage .oui-chart-tooltip.is-static { inline-size: 100%; min-inline-size: 0; max-inline-size: none; }
.oui-chart-empty { display: grid; place-items: center; gap: var(--oui-space-2xs); min-block-size: 4.5rem; padding: var(--oui-space-md); text-align: center; border: var(--oui-border-thin) dashed var(--oui-border-strong); border-radius: var(--oui-radius-md); background: color-mix(in srgb, var(--oui-bg-muted) 56%, transparent); }
html[data-theme="dark"] .oui-chart-card { --chart-grid: color-mix(in srgb, var(--oui-border-strong) 54%, transparent); --chart-grid-strong: color-mix(in srgb, var(--oui-border-strong) 72%, transparent); background: color-mix(in srgb, var(--oui-bg-surface) 94%, var(--oui-bg-muted)); }
html[data-theme="dark"] .oui-chart-bars-grouped > span.is-active { background: color-mix(in srgb, var(--oui-bg-subtle) 82%, transparent); }
html[data-theme="dark"] .oui-chart-bars-minimal > span::before { background: linear-gradient(180deg, color-mix(in srgb, var(--oui-chart-1) 86%, white), var(--oui-chart-1)); }
html[data-theme="dark"] .oui-chart-bars-grouped > span::after { background: color-mix(in srgb, var(--oui-chart-2) 86%, white); }
html[data-theme="dark"] .oui-chart-dots circle,html[data-theme="dark"] .oui-chart-donut::before,html[data-theme="dark"] .oui-chart-radial::before { fill: var(--oui-bg-surface); background: var(--oui-bg-surface); }
html[data-theme="dark"] .oui-chart-tooltip { background: color-mix(in srgb, var(--oui-bg-elevated) 96%, black); border-color: var(--oui-border-strong); }
@media (max-width: 47.99rem) { .oui-chart-card.is-mini { grid-template-columns: 1fr; } .oui-chart-bars-minimal,.oui-chart-bars-grouped,.oui-chart-bars-stacked { gap: var(--oui-space-xs); } .oui-chart-tooltip-stage { grid-template-columns: 1fr; justify-items: center; } .oui-chart-list span { grid-template-columns: 1fr; gap: var(--oui-space-xs); } }
/* Premium surface pass: shared, quiet outlines and consistent control rhythm. */
:root { --oui-surface-line: color-mix(in srgb, var(--oui-border) 72%, transparent); --oui-surface-line-strong: color-mix(in srgb, var(--oui-border-strong) 74%, transparent); --oui-surface-fill: color-mix(in srgb, var(--oui-bg-surface) 92%, var(--oui-bg-muted)); --oui-surface-fill-hover: color-mix(in srgb, var(--oui-bg-elevated) 90%, var(--oui-bg-muted)); --oui-floating-fill: color-mix(in srgb, var(--oui-bg-elevated) 96%, transparent); --oui-floating-shadow: 0 .75rem 1.5rem rgb(15 23 42 / .08), 0 .125rem .25rem rgb(15 23 42 / .04); }
html[data-theme="dark"] { --oui-bg-canvas: #0c1219; --oui-bg-muted: #101821; --oui-bg-subtle: #151f2a; --oui-bg-surface: #0f171f; --oui-bg-elevated: #121c26; --oui-border: #202b37; --oui-border-strong: #2b3a48; --oui-border-focus: color-mix(in srgb, var(--oui-brand-300) 52%, transparent); --oui-ring: rgb(159 180 200 / .18); --oui-surface-line: rgb(255 255 255 / .07); --oui-surface-line-strong: rgb(255 255 255 / .12); --oui-surface-fill: color-mix(in srgb, var(--oui-bg-surface) 88%, var(--oui-bg-muted)); --oui-surface-fill-hover: color-mix(in srgb, var(--oui-bg-elevated) 82%, var(--oui-bg-muted)); --oui-floating-fill: color-mix(in srgb, var(--oui-bg-elevated) 94%, black); --oui-floating-shadow: 0 1rem 2rem rgb(0 0 0 / .34), 0 .125rem .375rem rgb(0 0 0 / .22); }
.oui-doc-section__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); align-items: start; gap: var(--oui-space-md); }
.oui-doc-card { align-self: start; border-color: var(--oui-surface-line); background: color-mix(in srgb, var(--oui-bg-surface) 95%, transparent); box-shadow: var(--oui-shadow-xs); }
.oui-doc-card:hover { border-color: var(--oui-surface-line-strong); box-shadow: var(--oui-shadow-sm); }
.oui-doc-card__preview { min-block-size: 7.875rem; padding: var(--oui-space-sm); border-color: var(--oui-surface-line); background: color-mix(in srgb, var(--oui-bg-muted) 58%, transparent); }
.oui-doc-card__header > :is(.oui-badge,.oui-doc-card__copy) { border-color: var(--oui-surface-line); background: var(--oui-surface-fill); }
html[data-theme="dark"] :is(.oui-shell,.oui-card,.oui-panel,.oui-surface,.oui-doc-card,.oui-doc-callout,.oui-foundation-card,.oui-docs__hero,.oui-docs__sidebar,.oui-doc-card__preview,.oui-control,.oui-input,.oui-textarea,.oui-select,.oui-select-trigger,.oui-copy-field,.oui-tag-input,.oui-search,.oui-filter-bar,.oui-search-filter-header,.oui-advanced-filter,.oui-quick-edit,.oui-summary-row,.oui-dropdown-row,.oui-readonly-field,.oui-disabled-field,.oui-table-wrap,.oui-scroll-area,.oui-horizontal-scroller,.oui-chart-card) { border-color: var(--oui-surface-line); }
html[data-theme="dark"] :is(.oui-button[data-variant="secondary"],.oui-button-group,.oui-segment,.oui-tab,.oui-pagination__link,.oui-nav-item,.oui-view-switcher__button,.oui-back-button,.oui-close-button,.oui-icon-button,.oui-menu__item,.oui-stepper__item,.oui-chip,.oui-pill,.oui-badge,.oui-status) { border-color: var(--oui-surface-line); background: var(--oui-surface-fill); box-shadow: none; }
html[data-theme="dark"] .oui-doc-card__preview { background: color-mix(in srgb, var(--oui-bg-muted) 54%, transparent); }
html[data-theme="dark"] .oui-doc-card:hover { border-color: var(--oui-surface-line-strong); }
.oui-search { position: relative; min-block-size: var(--oui-size-control-md); padding-inline: var(--oui-space-sm) var(--oui-space-2xs); gap: var(--oui-space-xs); background: var(--oui-surface-fill); border-color: var(--oui-surface-line); border-radius: var(--oui-radius-md); box-shadow: none; }
.oui-search > .oui-input { min-block-size: auto; block-size: auto; border: 0; background: transparent; box-shadow: none; padding-inline: 0; }
.oui-search__clear {
  display: inline-grid;
  place-items: center;
  align-self: center;
  margin-inline-start: auto;
  inline-size: 1.625rem;
  min-inline-size: 1.625rem;
  min-block-size: 1.625rem;
  padding: 0;
  line-height: 1;
  color: var(--oui-text-muted);
  border: var(--oui-border-thin) solid transparent;
  border-radius: calc(var(--oui-radius-md) - .125rem);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  transition: opacity var(--oui-motion-fast) var(--oui-ease), transform var(--oui-motion-fast) var(--oui-ease), background-color var(--oui-motion-fast) var(--oui-ease), color var(--oui-motion-fast) var(--oui-ease);
}
.oui-search__clear .oui-svg-icon { display: block; inline-size: .75rem; block-size: .75rem; }
.oui-search[data-has-value="true"] .oui-search__clear { opacity: 1; transform: scale(1); pointer-events: auto; }
.oui-search__clear:hover,.oui-search__clear:focus-visible { color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-subtle) 76%, transparent); border-color: transparent; }
.oui-upload,.oui-dropzone { position: relative; overflow: hidden; isolation: isolate; align-content: center; justify-items: center; gap: var(--oui-space-xs); min-block-size: 7.875rem; padding: var(--oui-space-md); cursor: pointer; border-style: solid; border-color: var(--oui-surface-line); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--oui-brand-100) 26%, transparent), transparent 60%), var(--oui-surface-fill); color: var(--oui-text-secondary); box-shadow: inset 0 .0625rem 0 color-mix(in srgb, white 42%, transparent); }
.oui-dropzone { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--oui-brand-100) 22%, transparent), transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--oui-bg-muted) 86%, transparent), var(--oui-bg-surface)); }
.oui-upload:hover,.oui-dropzone:hover,.oui-upload:focus-within,.oui-dropzone:focus-within { border-color: var(--oui-surface-line-strong); background: var(--oui-surface-fill-hover); box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-upload strong,.oui-dropzone strong { display: inline-flex; align-items: center; gap: var(--oui-space-xs); color: var(--oui-text-primary); font-size: var(--oui-font-size-sm); line-height: 1.2; }
.oui-upload strong::before,.oui-dropzone strong::before { content: ""; inline-size: 1rem; block-size: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat; }
.oui-dropzone__icon + strong::before { content: none; }
.oui-dropzone__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--oui-radius-full);
  color: var(--oui-brand-700);
  background: color-mix(in srgb, var(--oui-brand-100) 76%, transparent);
  box-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .52);
  transition: transform var(--oui-motion-base) var(--oui-ease), background-color var(--oui-motion-base) var(--oui-ease), color var(--oui-motion-base) var(--oui-ease);
}
.oui-dropzone__icon::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
}
.oui-upload .oui-text-sm,.oui-dropzone .oui-text-sm,.oui-upload__helper { color: var(--oui-text-muted); line-height: 1.35; text-align: center; transition: color var(--oui-motion-base) var(--oui-ease), transform var(--oui-motion-base) var(--oui-ease); }
.oui-upload strong,.oui-dropzone strong,.oui-dropzone__icon { transition: transform var(--oui-motion-base) var(--oui-ease), color var(--oui-motion-base) var(--oui-ease); }
.oui-upload[data-has-files="true"] strong,.oui-dropzone[data-has-files="true"] strong,.oui-upload[data-has-files="true"] .oui-upload__helper,.oui-dropzone[data-has-files="true"] .oui-upload__helper { color: var(--oui-text-primary); }
.oui-upload[data-has-files="true"]::after { content: "Change file"; }
.oui-dropzone[data-has-files="true"]::after { content: "Add more"; }
.oui-dropzone[data-dragging="true"] {
  border-style: dashed;
  border-color: var(--oui-border-focus);
  background: color-mix(in srgb, var(--oui-brand-100) 14%, var(--oui-surface-fill-hover));
  box-shadow: 0 0 0 .1875rem var(--oui-ring);
}
.oui-dropzone[data-dragging="true"] .oui-dropzone__icon {
  color: var(--oui-brand-800);
  background: color-mix(in srgb, var(--oui-brand-200) 82%, white);
  transform: translateY(-.125rem) scale(1.04);
}
.oui-dropzone[data-dragging="true"] strong { transform: translateY(.0625rem); }
.oui-dropzone[data-dragging="true"] .oui-upload__helper { transform: translateY(.0625rem); color: var(--oui-text-primary); }
.oui-dropzone[data-dragging="true"]::after { content: "Drop now"; }
.oui-upload input[type="file"],.oui-dropzone input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.oui-upload::after,.oui-dropzone::after { display: inline-flex; align-items: center; min-block-size: 1.875rem; margin-block-start: var(--oui-space-2xs); padding-inline: var(--oui-space-sm); border-radius: var(--oui-radius-full); color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-elevated) 88%, var(--oui-bg-muted)); border: var(--oui-border-thin) solid var(--oui-surface-line); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-medium); line-height: 1; box-shadow: var(--oui-shadow-xs); content: "Choose file"; }
.oui-dropzone::after { content: "Choose files"; }
html[data-theme="dark"] .oui-upload,html[data-theme="dark"] .oui-dropzone { background: linear-gradient(180deg, color-mix(in srgb, var(--oui-bg-elevated) 74%, transparent), color-mix(in srgb, var(--oui-bg-surface) 96%, black)); box-shadow: inset 0 .0625rem 0 rgb(255 255 255 / .035); }
html[data-theme="dark"] .oui-upload::after,html[data-theme="dark"] .oui-dropzone::after { background: color-mix(in srgb, var(--oui-bg-elevated) 84%, var(--oui-bg-muted)); border-color: var(--oui-surface-line); box-shadow: none; }
.oui-select-control,.oui-advanced-filter,.oui-dropdown,.oui-context-menu,.oui-popover__surface,.oui-command,.oui-select-menu { border-color: var(--oui-surface-line); background: var(--oui-floating-fill); box-shadow: var(--oui-floating-shadow); }
.oui-select-control { min-block-size: var(--oui-size-control-md); background: var(--oui-surface-fill); box-shadow: none; }
.oui-select-control:focus-visible,.oui-select-control.is-active,.oui-select-control:hover { border-color: var(--oui-surface-line-strong); background: var(--oui-surface-fill-hover); box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-select-menu,.oui-dropdown,.oui-context-menu,.oui-command { gap: var(--oui-space-3xs); padding: var(--oui-space-2xs); border-radius: var(--oui-radius-lg); }
.oui-dropdown { min-inline-size: min(14rem, calc(100vw - 2rem)); }
.oui-menu__item,.oui-select-option { justify-content: flex-start; min-block-size: 2rem; padding-inline: var(--oui-space-sm); color: var(--oui-text-secondary); border-color: transparent; background: transparent; box-shadow: none; }
.oui-menu-profile,.oui-action-sheet__option { border-color: transparent; background: transparent; box-shadow: none; }
.oui-menu__item:hover,.oui-menu__item:focus-visible,.oui-select-option:hover,.oui-select-option:focus-visible,.oui-select-option.is-selected { color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-subtle) 82%, transparent); }
.oui-menu-profile:hover,.oui-menu-profile:focus-visible,.oui-action-sheet__option:hover,.oui-action-sheet__option:focus-visible { background: color-mix(in srgb, var(--oui-bg-subtle) 72%, transparent); }
.oui-select-option.is-selected { font-weight: var(--oui-weight-medium); }
.oui-command { gap: var(--oui-space-xs); padding: var(--oui-space-xs); }
.oui-command .oui-search { margin: 0; }
.oui-search-suggestions { gap: var(--oui-space-3xs); }
.oui-search-suggestion { min-block-size: 2rem; padding: var(--oui-space-xs) var(--oui-space-sm); color: var(--oui-text-secondary); border-color: transparent; border-radius: var(--oui-radius-md); background: transparent; box-shadow: none; }
.oui-search-suggestion:hover,.oui-search-suggestion:focus-within { color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-subtle) 82%, transparent); }
.oui-advanced-filter { gap: var(--oui-space-sm); padding: var(--oui-space-sm); box-shadow: var(--oui-shadow-xs); }
html[data-theme="dark"] .oui-select-control,html[data-theme="dark"] .oui-advanced-filter { background: var(--oui-surface-fill); box-shadow: none; }
html[data-theme="dark"] .oui-dropdown,html[data-theme="dark"] .oui-context-menu,html[data-theme="dark"] .oui-popover__surface,html[data-theme="dark"] .oui-command,html[data-theme="dark"] .oui-select-menu { background: var(--oui-floating-fill); border-color: var(--oui-surface-line-strong); box-shadow: var(--oui-floating-shadow); }
html[data-theme="dark"] .oui-menu-divider { background: color-mix(in srgb, var(--oui-surface-line) 88%, transparent); }
.oui-table-wrap { overflow: hidden; padding: var(--oui-space-2xs); border-color: var(--oui-surface-line); background: var(--oui-surface-fill); box-shadow: none; }
.oui-table { inline-size: 100%; min-inline-size: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.oui-table th,.oui-table td { padding: .625rem var(--oui-space-sm); border-block-end: var(--oui-border-thin) solid var(--oui-surface-line); color: var(--oui-text-secondary); font-size: var(--oui-font-size-xs); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oui-table th { color: var(--oui-text-muted); background: transparent; font-weight: var(--oui-weight-medium); }
.oui-table td { color: var(--oui-text-primary); font-weight: var(--oui-weight-medium); }
.oui-table tbody tr:last-child td { border-block-end: 0; }
.oui-table[data-zebra="true"] tbody tr:nth-child(even) { background: transparent; }
.oui-table tbody tr:hover,.oui-table tbody tr:focus-within,.oui-table tbody tr.is-selected { background: color-mix(in srgb, var(--oui-bg-subtle) 68%, transparent); }
.oui-table input[type="checkbox"] { inline-size: .875rem; block-size: .875rem; accent-color: var(--oui-brand-600); }
html[data-theme="dark"] .oui-table-wrap { background: color-mix(in srgb, var(--oui-bg-surface) 90%, var(--oui-bg-muted)); }
html[data-theme="dark"] .oui-table th,html[data-theme="dark"] .oui-table td { border-block-end-color: var(--oui-surface-line); }
.oui-toast-region {
  inset-block-start: var(--oui-space-md);
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
  gap: var(--oui-space-xs);
  inline-size: min(100% - 2rem, 18rem);
}
.oui-toast { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: start; gap: var(--oui-space-2xs) var(--oui-space-sm); padding: var(--oui-space-sm); border-color: var(--oui-surface-line); border-radius: var(--oui-radius-xl); background: var(--oui-floating-fill); box-shadow: var(--oui-floating-shadow); }
.oui-toast__message { min-inline-size: 0; color: var(--oui-text-primary); font-size: var(--oui-font-size-xs); line-height: 1.4; }
.oui-toast__icon { inline-size: 1.75rem; block-size: 1.75rem; margin-block-start: .0625rem; }
.oui-toast .oui-close-button { inline-size: 1.75rem; min-inline-size: 1.75rem; min-block-size: 1.75rem; padding: 0; color: var(--oui-text-muted); border-color: transparent; background: transparent; box-shadow: none; }
.oui-toast .oui-close-button:hover { color: var(--oui-text-primary); background: color-mix(in srgb, var(--oui-bg-subtle) 76%, transparent); }
.oui-toast.is-leaving { opacity: 0; transform: translateY(-.35rem) scale(.985); }
html[data-theme="dark"] .oui-toast { border-color: var(--oui-surface-line-strong); background: var(--oui-floating-fill); box-shadow: var(--oui-floating-shadow); }
html[data-nav-mode='sidebar'] body.is-authenticated .oui-toast-region,
html[data-oui-layout-mode='sidebar'] body.is-authenticated .oui-toast-region {
  inset-inline-start: auto;
  inset-inline-end: var(--oui-space-md);
  transform: none;
}
.oui-color-shell { position: relative; display: inline-grid; inline-size: 100%; }
.oui-color-native { position: absolute !important; inset: 50% auto auto 50% !important; inline-size: .0625rem !important; block-size: .0625rem !important; min-block-size: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; transform: translate(-50%, -50%); pointer-events: none !important; }
.oui-color-control { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--oui-space-xs); inline-size: 100%; min-block-size: var(--oui-size-control-md); padding-inline: var(--oui-space-sm); color: var(--oui-text-primary); background: var(--oui-surface-fill, var(--oui-bg-surface)); border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border)); border-radius: var(--oui-radius-md); box-shadow: none; transition: background-color var(--oui-motion-base) var(--oui-ease), border-color var(--oui-motion-base) var(--oui-ease), box-shadow var(--oui-motion-base) var(--oui-ease); }
.oui-color-control:hover,.oui-color-control:focus-visible { background: var(--oui-surface-fill-hover, var(--oui-bg-elevated)); border-color: var(--oui-surface-line-strong, var(--oui-border-strong)); box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-color-swatch { inline-size: .75rem; block-size: .75rem; flex: none; border-radius: var(--oui-radius-full); background: var(--color-value, #000); box-shadow: 0 0 0 .1875rem color-mix(in srgb, currentColor 9%, transparent), inset 0 0 0 .0625rem rgb(255 255 255 / .56); }
.oui-color-value { color: var(--oui-text-secondary); font-family: var(--oui-font-mono); font-size: var(--oui-font-size-xs); font-weight: var(--oui-weight-medium); letter-spacing: .01em; }
.oui-color-control:hover .oui-color-value,.oui-color-control:focus-visible .oui-color-value { color: var(--oui-text-primary); }
.oui-chart-tooltip.is-live { pointer-events: none; animation: oui-dropdown-in var(--oui-motion-fast) var(--oui-ease); }
.oui-chart-plot [data-chart-point],.oui-chart-card [data-chart-point] { cursor: default; outline: none; }
.oui-chart-plot [data-chart-point]:focus-visible,.oui-chart-card [data-chart-point]:focus-visible { box-shadow: 0 0 0 .1875rem var(--oui-ring); }
.oui-nav-item { position: relative; isolation: isolate; justify-content: flex-start; min-block-size: 2.25rem; padding-inline: calc(var(--oui-space-sm) + .375rem) var(--oui-space-sm); color: var(--oui-text-secondary); border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; font-weight: var(--oui-weight-medium); }
.oui-nav-item::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: .1875rem; inline-size: .1875rem; border-radius: var(--oui-radius-full); background: var(--oui-brand-600); opacity: 0; transform: scaleY(.62); transform-origin: center; transition: opacity var(--oui-motion-fast) var(--oui-ease), transform var(--oui-motion-fast) var(--oui-ease); }
.oui-nav-item:hover,.oui-nav-item:focus-visible { color: var(--oui-text-primary); border-color: transparent; background: transparent; box-shadow: none; text-decoration: none; }
.oui-nav-item:hover::before,.oui-nav-item:focus-visible::before { opacity: .42; transform: scaleY(.82); }
.oui-nav-item.is-active,.oui-nav-item[aria-current="page"] { color: var(--oui-text-primary); border-color: transparent; background: transparent; box-shadow: none; font-weight: var(--oui-weight-semibold); }
.oui-nav-item.is-active::before,.oui-nav-item[aria-current="page"]::before { opacity: 1; transform: scaleY(1); }
html[data-theme="dark"] .oui-nav-item { color: var(--oui-text-secondary); border-color: transparent; background: transparent; box-shadow: none; }
html[data-theme="dark"] .oui-nav-item:hover,html[data-theme="dark"] .oui-nav-item:focus-visible,html[data-theme="dark"] .oui-nav-item.is-active,html[data-theme="dark"] .oui-nav-item[aria-current="page"] { color: var(--oui-text-primary); border-color: transparent; background: transparent; box-shadow: none; }
.oui-menu__item,.oui-select-option { position: relative; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.oui-menu__item:hover,.oui-menu__item:focus-visible,.oui-select-option:hover,.oui-select-option:focus-visible,.oui-select-option.is-selected { color: var(--oui-text-primary); border-color: transparent; background: transparent; box-shadow: none; }
.oui-select-option.is-selected,.oui-menu__item[aria-current="page"] { font-weight: var(--oui-weight-semibold); }
html[data-theme="dark"] .oui-menu__item,html[data-theme="dark"] .oui-select-option { border-color: transparent; background: transparent; box-shadow: none; }
html[data-theme="dark"] .oui-menu__item:hover,html[data-theme="dark"] .oui-menu__item:focus-visible,html[data-theme="dark"] .oui-select-option:hover,html[data-theme="dark"] .oui-select-option:focus-visible,html[data-theme="dark"] .oui-select-option.is-selected { background: transparent; box-shadow: none; }
/* Plain ordnryUI navigation: no boxed text rows. */
:is(.oui-sidebar,.oui-subnav,.oui-navbar,.oui-bottom-nav) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
:is(.oui-nav-item,.oui-bottom-nav__item,.oui-menu__item,.oui-select-option,.oui-search-suggestion,.oui-dropdown-row,.oui-menu-row,.oui-filter-preset) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; }
:is(.oui-nav-item,.oui-bottom-nav__item,.oui-menu__item,.oui-select-option,.oui-search-suggestion,.oui-dropdown-row,.oui-menu-row,.oui-filter-preset):is(:hover,:focus-visible,.is-active,.is-selected,[aria-current="page"]) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
:is(.oui-nav-item,.oui-bottom-nav__item,.oui-menu__item,.oui-select-option,.oui-search-suggestion,.oui-dropdown-row,.oui-menu-row,.oui-filter-preset):is(:hover,:focus-visible) { color: var(--oui-text-primary); text-decoration: none; }
:is(.oui-nav-item,.oui-bottom-nav__item,.oui-menu__item,.oui-select-option):is(.is-active,.is-selected,[aria-current="page"]) { color: var(--oui-text-primary); font-weight: var(--oui-weight-semibold); }
:is(.oui-menu-profile,.oui-action-sheet__option) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0; }
.oui-mobile-only { display: none; }
.oui-full-width { inline-size: 100%; }
.oui-nowrap { white-space: nowrap; }
.oui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oui-wrap { overflow-wrap: anywhere; }
body.oui-is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { :where(button,a,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible { outline: .125rem solid CanvasText; outline-offset: .125rem; box-shadow: none; } }
@media (max-width: 63.99rem) { .oui-docs__layout { grid-template-columns: minmax(0, 1fr); } .oui-docs__sidebar { position: static; max-block-size: none; } }
@media (max-width: 47.99rem) { .oui-mobile-only { display: inline-flex; } .oui-key-value__row,.oui-description-list__row,.oui-kv-list__row { grid-template-columns: 1fr; } .oui-table { min-inline-size: 0; } }
@media print { .oui-docs__sidebar,.oui-toast-region,.oui-loading-overlay,.oui-overlay,.oui-modal-root,.oui-drawer-root { display: none !important; } .oui-docs__layout { grid-template-columns: 1fr; } .oui-doc-card,.oui-foundation-card,.oui-card,.oui-panel { break-inside: avoid; box-shadow: none; } }

/* Perfin app surfaces consolidated into ordnryUI so the app only depends on this file. */
html {
  --perfin-income: #10b981;
  --perfin-expense: #ef4444;
  --perfin-expense-soft: color-mix(in srgb, var(--perfin-expense) 14%, transparent);
  --perfin-app-width: 84rem;
  background: var(--oui-bg-canvas);
}
html[data-theme='dark'] {
  --perfin-income: #34d399;
  --perfin-expense: #f87171;
  --perfin-expense-soft: color-mix(in srgb, var(--perfin-expense) 18%, transparent);
}
body:not(.oui-docs) {
  min-height: 100vh;
  color: var(--oui-text-primary);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--oui-brand-100) 62%, transparent), transparent 24rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--oui-neutral-200) 38%, transparent), transparent 24rem),
    linear-gradient(90deg, color-mix(in srgb, var(--oui-brand-600) 4%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--oui-brand-600) 4%, transparent) 1px, transparent 1px),
    var(--oui-bg-canvas);
  background-size: auto, auto, 2rem 2rem, 2rem 2rem, auto;
}
.app-shell { min-height: 100vh; }
.app-frame { min-width: 0; transition: margin-inline-start var(--oui-motion-base) var(--oui-ease); }
.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: calc(var(--oui-z-sticky) + 1);
  display: none;
  inline-size: 16rem;
  max-block-size: 100vh;
  flex-direction: column;
  gap: var(--oui-space-lg);
  overflow: auto;
  padding: var(--oui-space-sm) var(--oui-space-md);
  border: 0;
  border-inline-end: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: 0;
  background: color-mix(in srgb, var(--oui-bg-canvas) 86%, transparent);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
.app-sidebar > .app-brand { min-block-size: 3.75rem; }
.app-sidebar__nav { display: grid; align-content: start; gap: var(--oui-space-lg); }
.app-sidebar__group { display: grid; gap: var(--oui-space-xs); }
.app-sidebar__label {
  padding-inline: var(--oui-space-sm);
  color: var(--oui-text-muted);
  font-size: var(--oui-font-size-2xs);
  font-weight: var(--oui-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--oui-space-sm);
  inline-size: 100%;
  min-block-size: 2.625rem;
  padding-inline: var(--oui-space-sm);
  border-radius: var(--oui-radius-md) !important;
}
.app-sidebar__link .oui-svg-icon {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--oui-text-muted);
}
.app-sidebar__link:hover,
.app-sidebar__link:focus-visible,
.app-sidebar__link.is-active,
.app-sidebar__link[aria-current='page'] {
  background: color-mix(in srgb, var(--oui-surface-fill-hover, var(--oui-bg-elevated)) 88%, transparent) !important;
}
.app-sidebar__link:hover .oui-svg-icon,
.app-sidebar__link:focus-visible .oui-svg-icon,
.app-sidebar__link.is-active .oui-svg-icon,
.app-sidebar__link[aria-current='page'] .oui-svg-icon {
  color: var(--oui-text-primary);
}
.app-sidebar__footer { position: relative; display: grid; gap: var(--oui-space-sm); margin-block-start: auto; }
.app-install-button { justify-content: flex-start; }
.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--oui-z-sticky);
  border-block-end: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  background: color-mix(in srgb, var(--oui-bg-canvas) 86%, transparent);
  backdrop-filter: blur(18px);
}
.app-nav,
.app-main {
  inline-size: min(100% - 3rem, var(--perfin-app-width));
  margin-inline: auto;
}
.app-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oui-space-md);
  min-block-size: 3.75rem;
  padding-block: var(--oui-space-sm);
}
html[data-nav-mode='sidebar'] body.is-authenticated .app-sidebar { display: flex; }
html[data-nav-mode='sidebar'] body.is-authenticated .app-header { display: none; }
html[data-nav-mode='sidebar'] body.is-authenticated .app-frame { margin-inline-start: 16rem; }
html[data-nav-mode='sidebar'] body.is-authenticated .app-brand--header,
html[data-nav-mode='sidebar'] body.is-authenticated .app-header-nav { display: none; }
html[data-nav-mode='sidebar'] body.is-authenticated .app-nav { justify-content: flex-end; }
html[data-nav-mode='header'] .app-header-nav { display: inline-flex; }
html[data-nav-mode='header'] .app-brand--header { display: inline-flex; }
.app-header-nav { display: none; align-items: center; gap: var(--oui-space-xs); margin-inline-end: auto; }
.app-header-nav__link {
  gap: var(--oui-space-xs);
  min-block-size: var(--oui-size-control-sm);
  border-radius: var(--oui-radius-md) !important;
}
.app-header-nav__link .oui-svg-icon {
  inline-size: 1rem;
  block-size: 1rem;
  color: currentColor;
}
.app-brand__wordmark {
  display: inline;
}
.app-mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--oui-size-control-md);
  min-inline-size: var(--oui-size-control-md);
  min-block-size: var(--oui-size-control-md);
  padding: 0;
  color: var(--oui-text-primary);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-lg);
  background: var(--oui-surface-fill, var(--oui-bg-surface));
  box-shadow: none;
}
.app-mobile-menu-button:hover,
.app-mobile-menu-button.is-active {
  border-color: var(--oui-surface-line-strong, var(--oui-border-strong));
  background: var(--oui-surface-fill-hover, var(--oui-bg-elevated));
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--oui-space-xs);
  color: var(--oui-text-primary);
  font-weight: var(--oui-weight-semibold);
  letter-spacing: -0.03em;
}
.app-brand:hover { text-decoration: none; }
.app-brand__mark {
  display: inline-grid;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  place-items: center;
  color: var(--oui-primary-foreground);
  background: var(--oui-primary-bg);
  border: var(--oui-border-thin) solid var(--oui-primary-border);
  border-radius: var(--oui-radius-md);
  box-shadow: var(--oui-shadow-xs);
}
.app-actions {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--oui-space-xs);
  min-inline-size: 0;
}
.app-account { position: relative; }
.app-account--sidebar { inline-size: 100%; }
.app-account--header .app-avatar-button { min-inline-size: 12rem; justify-content: flex-start; }
.app-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: var(--oui-space-sm);
  min-block-size: 2.75rem;
  padding: var(--oui-space-xs) var(--oui-space-sm);
  color: var(--oui-text-primary);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-lg);
  background: var(--oui-surface-fill, var(--oui-bg-surface));
  box-shadow: var(--oui-shadow-xs);
}
.app-account--sidebar .app-avatar-button {
  inline-size: 100%;
  justify-content: flex-start;
  min-block-size: 3rem;
  padding: var(--oui-space-sm);
}
.app-avatar-button:hover,
.app-avatar-button.is-active {
  border-color: var(--oui-surface-line-strong, var(--oui-border-strong));
  background: var(--oui-surface-fill-hover, var(--oui-bg-elevated));
}
.app-avatar {
  display: inline-grid;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  place-items: center;
  color: var(--oui-primary-foreground);
  border-radius: var(--oui-radius-full);
  background: var(--oui-primary-bg);
  border: var(--oui-border-thin) solid var(--oui-primary-border);
  font-size: var(--oui-font-size-xs);
  font-weight: var(--oui-weight-semibold);
  letter-spacing: 0.02em;
}
.app-account__meta { display: grid; gap: 0.125rem; min-inline-size: 0; text-align: start; }
.app-account__meta strong,
.app-account__meta span {
  overflow: hidden;
  max-inline-size: 10rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-account__meta strong { font-size: var(--oui-font-size-sm); line-height: 1.1; }
.app-account__meta span { color: var(--oui-text-muted); font-size: var(--oui-font-size-2xs); line-height: 1.15; }
.app-avatar-button .oui-trailing { margin-inline-start: auto; }
.app-admin-notifications { position: relative; }
.app-admin-notifications__trigger { position: relative; }
.app-admin-notifications__trigger .oui-badge {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.35rem;
  min-inline-size: 1.1rem;
  min-block-size: 1.1rem;
  padding-inline: 0.2rem;
  font-size: var(--oui-font-size-2xs);
  line-height: 1;
}
.app-admin-notifications__menu {
  inset-inline: auto 0;
  inset-block-start: calc(100% + var(--oui-space-xs));
  inline-size: min(22rem, calc(100vw - 1rem));
  padding: var(--oui-space-sm);
}
.app-admin-notifications__header {
  display: flex;
  align-items: flex-start;
  gap: var(--oui-space-sm);
  margin-block-end: var(--oui-space-sm);
}
.app-admin-notifications__actions {
  justify-content: flex-start;
  margin-block-end: var(--oui-space-sm);
}
.app-admin-notifications__list {
  max-block-size: min(22rem, 60vh);
  overflow: auto;
}
.app-admin-notifications__item {
  display: block;
  white-space: normal;
  padding: var(--oui-space-sm);
  border-radius: var(--oui-radius-md);
  text-decoration: none;
  color: var(--oui-text-primary);
  border: var(--oui-border-thin) solid transparent;
}
.app-admin-notifications__item.is-unread {
  background: color-mix(in srgb, var(--oui-brand-50) 18%, var(--oui-bg-surface));
  border-color: color-mix(in srgb, var(--oui-brand-300) 32%, var(--oui-border));
}
.app-admin-notifications__item:hover {
  text-decoration: none;
  background: var(--oui-bg-subtle);
  border-color: var(--oui-border);
}
.app-admin-notifications__empty {
  min-block-size: auto;
  padding-block: var(--oui-space-md);
}
.app-account-menu { inset-inline: auto 0; inset-block-start: calc(100% + var(--oui-space-xs)); min-inline-size: 12rem; }
.app-account-menu--sidebar {
  inset-block: auto calc(100% + var(--oui-space-xs));
  inset-inline: 0 auto;
  inline-size: 100%;
}
.app-account-menu form,
.app-account-menu .oui-menu__item { inline-size: 100%; }
.app-account-menu .oui-menu-profile__avatar {
  color: var(--oui-primary-foreground);
  background: var(--oui-primary-bg);
  border: var(--oui-border-thin) solid var(--oui-primary-border);
}
.app-account-menu .oui-menu__item { justify-content: flex-start; }
.app-mobile-sidebar-drawer__panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: var(--oui-space-md);
  inline-size: min(18rem, 86vw);
  padding: calc(env(safe-area-inset-top) + var(--oui-space-sm)) var(--oui-space-sm) calc(var(--oui-space-lg) + env(safe-area-inset-bottom));
  border-inline-end: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  background: color-mix(in srgb, var(--oui-bg-canvas) 92%, transparent);
  backdrop-filter: blur(18px);
}
.app-mobile-sidebar-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oui-space-sm);
}
.app-mobile-sidebar-drawer__nav { display: grid; align-content: start; gap: var(--oui-space-md); }
.app-mobile-sidebar-drawer__footer {
  display: grid;
  gap: var(--oui-space-sm);
  margin-block-start: auto;
  padding-block-start: var(--oui-space-sm);
  border-block-start: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
}
.app-mobile-sidebar-drawer__nav .app-sidebar__group { gap: var(--oui-space-xs); }
.app-mobile-sidebar-drawer__nav .app-sidebar__label { padding-inline: var(--oui-space-xs); }
.app-mobile-sidebar-drawer__nav .app-sidebar__link {
  min-block-size: 2.875rem;
  padding-inline: var(--oui-space-sm);
  border-radius: var(--oui-radius-lg) !important;
}
.app-main { display: grid; gap: var(--oui-space-lg); padding-block: var(--oui-space-lg) var(--oui-space-2xl); }
html[data-nav-mode='sidebar'] body.is-authenticated .app-main { padding-block-start: var(--oui-space-sm); }
.app-alert { max-inline-size: 48rem; }
.app-copy { max-inline-size: 42rem; }
.auth-card {
  display: grid;
  gap: var(--oui-space-lg);
  inline-size: min(100%, 34rem);
  margin-inline: auto;
}
.settings-shell,
.settings-content,
.landing-grid,
.budget-dashboard,
.budget-details {
  display: grid;
  gap: var(--oui-space-md);
}
.settings-shell { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); align-items: start; }
.settings-sidebar {
  position: sticky;
  inset-block-start: calc(var(--oui-space-lg) + 4rem);
  display: grid;
  gap: var(--oui-space-md);
  padding: var(--oui-space-sm);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-xl);
  background: color-mix(in srgb, var(--oui-bg-surface) 94%, transparent);
  box-shadow: var(--oui-shadow-xs);
  backdrop-filter: blur(14px);
}
.settings-nav { display: grid; gap: var(--oui-space-2xs); }
.settings-nav .oui-nav-item { justify-content: flex-start; scroll-margin-block-start: 5rem; }
html[data-nav-mode='sidebar'] body.is-authenticated .settings-sidebar { inset-block-start: var(--oui-space-sm); }
.settings-content { gap: var(--oui-space-md); }
.settings-preference-group { display: grid; gap: var(--oui-space-sm); }
.settings-panel { display: grid; gap: var(--oui-space-lg); scroll-margin-block-start: calc(var(--oui-space-lg) + 4rem); }
html[data-nav-mode='sidebar'] body.is-authenticated .settings-panel { scroll-margin-block-start: var(--oui-space-md); }
.appearance-options { display: grid; gap: var(--oui-space-sm); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appearance-options--layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appearance-option {
  display: flex;
  align-items: flex-start;
  gap: var(--oui-space-sm);
  min-block-size: 6rem;
  padding: var(--oui-space-md);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-lg);
  background: var(--oui-surface-fill, var(--oui-bg-surface));
  cursor: pointer;
}
.appearance-option:hover,
.appearance-option:has(input:checked) {
  border-color: var(--oui-surface-line-strong, var(--oui-border-strong));
  background: var(--oui-surface-fill-hover, var(--oui-bg-elevated));
  box-shadow: 0 0 0 0.1875rem var(--oui-ring);
}
.appearance-option input { margin-block-start: 0.2rem; accent-color: var(--oui-brand-600); }
.appearance-option span { display: grid; gap: var(--oui-space-2xs); }
.appearance-option small {
  color: var(--oui-text-muted);
  font-size: var(--oui-font-size-xs);
  line-height: 1.4;
}
.landing-hero,
.landing-preview,
.budget-hero,
.oui-form-card-panel {
  display: grid;
  gap: var(--oui-space-lg);
}
.is-home-page .app-main { padding-block-start: var(--oui-space-lg); }
.landing-shell { display: grid; gap: clamp(var(--oui-space-lg), 3vw, var(--oui-space-2xl)); }
.landing-shell--home { padding-block-end: clamp(var(--oui-space-xl), 4vw, var(--oui-space-3xl)); }
.landing-grid { grid-template-columns: minmax(0, 1.08fr) minmax(min(100%, 31rem), 0.92fr); align-items: start; gap: clamp(var(--oui-space-lg), 3vw, var(--oui-space-xl)); }
.landing-hero { min-block-size: 34rem; align-content: start; padding: clamp(var(--oui-space-lg), 3vw, var(--oui-space-2xl)); }
.landing-hero--welcome {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--oui-brand-100) 26%, transparent), transparent 36%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--oui-info-soft) 58%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--oui-bg-elevated) 94%, transparent), color-mix(in srgb, var(--oui-bg-surface) 88%, transparent)),
    var(--oui-bg-surface);
}
.landing-kicker,
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oui-space-xs); }
.landing-copy { max-inline-size: 36rem; }
.landing-eyebrow { letter-spacing: .01em; text-transform: uppercase; }
.landing-proof,
.landing-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oui-space-sm);
}
.landing-proof__item {
  display: grid;
  gap: .125rem;
  padding: var(--oui-space-sm);
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
  border-radius: var(--oui-radius-md);
  background: color-mix(in srgb, var(--oui-bg-elevated) 92%, transparent);
}
.landing-proof__item strong {
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-sm);
  line-height: 1.2;
}
.landing-value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oui-space-sm);
}
.landing-value-card {
  display: grid;
  gap: var(--oui-space-2xs);
  padding: var(--oui-space-sm);
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
  border-radius: var(--oui-radius-md);
  background: color-mix(in srgb, var(--oui-bg-surface) 88%, var(--oui-bg-elevated));
}
.landing-value-card .oui-text-sm {
  color: var(--oui-text-secondary);
  line-height: 1.45;
}
.landing-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-hero-metrics .finance-metric { min-block-size: 6.25rem; }
.landing-preview-shell { display: grid; gap: var(--oui-space-md); }
.landing-preview { align-content: start; padding: clamp(var(--oui-space-md), 2.2vw, var(--oui-space-lg)); }
.landing-preview__header { display: grid; gap: .25rem; max-inline-size: 18rem; }
.landing-preview__chart {
  display: grid;
  gap: var(--oui-space-sm);
  padding: var(--oui-space-md);
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 84%, transparent);
  border-radius: var(--oui-radius-lg);
  background: color-mix(in srgb, var(--oui-bg-elevated) 90%, transparent);
}
.landing-preview__chart .oui-chart-plot { min-block-size: 11rem; }
.landing-preview__legend { justify-content: flex-start; }
.landing-summary-card { display: grid; gap: var(--oui-space-md); padding: clamp(var(--oui-space-md), 2vw, var(--oui-space-lg)); }
.landing-summary-list { display: grid; gap: var(--oui-space-xs); }
.landing-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oui-space-sm);
  padding-block: var(--oui-space-xs);
}
.landing-summary-item + .landing-summary-item {
  border-block-start: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
}
.landing-summary-item__meta { display: grid; gap: .125rem; min-inline-size: 0; }
.landing-summary-item__meta strong {
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-sm);
  line-height: 1.2;
}
.landing-summary-item__meta span {
  color: var(--oui-text-muted);
  font-size: var(--oui-font-size-xs);
  line-height: 1.3;
}
.landing-feature-card {
  min-block-size: 12rem;
  align-content: start;
  padding: clamp(var(--oui-space-md), 2vw, var(--oui-space-lg));
}
.landing-feature-card .oui-text-sm {
  line-height: 1.5;
}
.landing-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oui-space-sm);
  padding-block-start: var(--oui-space-xs);
  border-block-start: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 78%, transparent);
}
.landing-trust-strip__item {
  display: grid;
  gap: var(--oui-space-2xs);
  padding: var(--oui-space-sm) 0 0;
}
.landing-trust-strip__item .oui-text-sm {
  color: var(--oui-text-secondary);
  line-height: 1.45;
}
.landing-section {
  display: grid;
  gap: clamp(var(--oui-space-lg), 3vw, var(--oui-space-xl));
  padding: clamp(var(--oui-space-lg), 3vw, var(--oui-space-2xl));
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
  border-radius: var(--oui-radius-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oui-bg-surface) 96%, transparent), color-mix(in srgb, var(--oui-bg-elevated) 90%, transparent));
  box-shadow: var(--oui-shadow-sm), var(--oui-shadow-inset);
}
.landing-section--accent {
  grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 26rem), .9fr);
  align-items: start;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--oui-brand-100) 18%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--oui-bg-surface) 94%, transparent), color-mix(in srgb, var(--oui-bg-elevated) 92%, transparent));
}
.landing-section--centered {
  justify-items: center;
  text-align: center;
}
.landing-section__copy,
.landing-section__showcase {
  display: grid;
  gap: var(--oui-space-md);
}
.landing-section__header {
  display: grid;
  gap: var(--oui-space-xs);
  max-inline-size: 42rem;
}
.landing-section__header--centered {
  justify-items: center;
}
.landing-step-list {
  display: grid;
  gap: var(--oui-space-sm);
}
.landing-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--oui-space-sm);
  align-items: start;
  padding: var(--oui-space-sm);
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
  border-radius: var(--oui-radius-lg);
  background: color-mix(in srgb, var(--oui-bg-surface) 86%, var(--oui-bg-elevated));
}
.landing-step-card__kicker {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--oui-radius-full);
  background: color-mix(in srgb, var(--oui-brand-100) 32%, transparent);
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-xs);
  font-weight: var(--oui-weight-semibold);
}
.landing-step-card__copy {
  display: grid;
  gap: var(--oui-space-2xs);
}
.landing-step-card__copy strong {
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-sm);
  line-height: 1.3;
}
.landing-preview--stacked {
  min-block-size: 100%;
}
.landing-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oui-space-lg);
  padding: clamp(var(--oui-space-lg), 3vw, var(--oui-space-2xl));
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 80%, transparent);
  border-radius: var(--oui-radius-xl);
  background:
    radial-gradient(circle at left center, color-mix(in srgb, var(--oui-success-soft) 28%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--oui-bg-elevated) 94%, transparent), color-mix(in srgb, var(--oui-bg-surface) 90%, transparent));
  box-shadow: var(--oui-shadow-sm), var(--oui-shadow-inset);
}
.landing-cta-band__copy {
  display: grid;
  gap: var(--oui-space-xs);
  max-inline-size: 32rem;
}
.finance-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oui-space-sm); }
.finance-metric-grid.is-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-metric { min-block-size: 7rem; align-content: space-between; min-inline-size: 0; }
.finance-value {
  color: var(--oui-text-primary);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.finance-value.is-positive,
.finance-amount.is-positive { color: var(--perfin-income); }
.finance-value.is-warning { color: var(--oui-warning); }
.finance-value.is-negative,
.finance-value.is-expense,
.finance-amount.is-negative,
.finance-amount.is-expense { color: var(--perfin-expense); }
.oui-badge[data-tone="danger"] {
  color: var(--perfin-expense);
  border-color: color-mix(in srgb, var(--perfin-expense) 22%, transparent);
  background: var(--perfin-expense-soft);
}
.budget-dashboard { grid-template-columns: minmax(0, 1.3fr) minmax(min(100%, 28rem), 0.7fr); align-items: start; }
.budget-main { display: grid; gap: var(--oui-space-md); }
.budget-side { display: grid; gap: var(--oui-space-md); }
.budget-hero > .oui-cluster { align-items: start; gap: var(--oui-space-md); }
.budget-hero__title {
  font-size: clamp(1.35rem, 2.6vw, 1.55rem);
  line-height: 1.1;
}
.budget-hero .oui-status { max-inline-size: min(100%, 18rem); overflow-wrap: anywhere; }
.budget-hero .app-copy { max-inline-size: 34rem; }
.oui-mobile-actions { display: none; }
.oui-mobile-sheet { display: none; }
.budget-form,
.oui-form-stack { gap: var(--oui-space-sm); }
.oui-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oui-space-sm);
}
.oui-color-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.25rem, auto);
  gap: var(--oui-space-sm);
  align-items: end;
}
.oui-color-field-grid .oui-color-shell { min-inline-size: 8.25rem; }
.oui-chart-card[data-chart-palette="budget"] {
  --oui-chart-1: var(--perfin-income);
  --oui-chart-2: var(--perfin-expense);
  min-block-size: 10.75rem;
  overflow: visible;
}
.budget-locked-card {
  position: relative;
  display: grid;
  align-items: stretch;
  min-block-size: inherit;
  block-size: 100%;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}
.budget-locked-card > .budget-locked-shell,
.budget-locked-card > .budget-locked-overlay {
  grid-area: 1 / 1;
}
.budget-locked-shell {
  position: relative;
  display: grid;
  gap: var(--oui-space-sm);
  min-block-size: 100%;
  block-size: 100%;
  align-content: start;
  opacity: .68;
  filter: saturate(.86);
  pointer-events: none;
  user-select: none;
}
.budget-locked-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 7 11 / .08), rgb(4 7 11 / .18));
  pointer-events: none;
}
.budget-locked-shell--chart .oui-chart-card,
.budget-locked-shell--table,
.budget-locked-shell--form {
  min-block-size: 100%;
}
.budget-locked-shell--table .budget-table-wrap,
.budget-locked-shell--form .budget-form,
.budget-locked-shell--chart .oui-area-chart {
  align-self: stretch;
}
.budget-locked-shell .oui-chart-gridline,
.budget-locked-shell .oui-chart-axis-label,
.budget-locked-shell .oui-chart-axis-value,
.budget-locked-shell .oui-chart-legend,
.budget-locked-shell .budget-table,
.budget-locked-shell .oui-input,
.budget-locked-shell .oui-color-shell,
.budget-locked-shell .oui-button {
  opacity: .82;
}
.budget-locked-shell .oui-chart-area,
.budget-locked-shell .oui-chart-line {
  opacity: .9;
}
.budget-locked-overlay {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 100%;
  padding: clamp(var(--oui-space-md), 3vw, var(--oui-space-xl));
  z-index: 2;
  background:
      radial-gradient(circle at center, rgb(11 15 20 / .04), rgb(11 15 20 / .1)),
      linear-gradient(180deg, rgb(9 12 17 / .1), rgb(9 12 17 / .18)),
      linear-gradient(135deg, rgb(18 24 31 / .08), rgb(13 17 22 / .16));
  backdrop-filter: blur(2px);
}
.budget-locked-overlay__card {
  display: grid;
  gap: var(--oui-space-xs);
  justify-items: start;
  inline-size: min(100%, 22rem);
  justify-self: center;
  align-self: center;
  padding: clamp(var(--oui-space-md), 2vw, var(--oui-space-lg));
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border-strong) 82%, transparent);
  border-radius: var(--oui-radius-lg);
  background: linear-gradient(180deg, rgb(16 22 29 / .96), rgb(12 17 22 / .98));
  box-shadow: var(--oui-shadow-md), inset 0 1px 0 rgb(255 255 255 / .05);
}
.budget-locked-overlay__card strong {
  font-size: var(--oui-font-size-lg);
  line-height: var(--oui-line-tight);
  letter-spacing: -.03em;
}
.oui-chart-card[data-chart-palette="budget"] > .budget-locked-card,
.oui-form-card-panel > .budget-locked-card,
.oui-surface-section > .budget-locked-card {
  min-block-size: 100%;
}
.oui-surface-section > .oui-cluster > div,
.oui-form-card-panel > .oui-cluster > div,
.oui-sheet-header > div {
  display: grid;
  gap: 0.125rem;
}
.oui-surface-section .oui-heading-5,
.oui-form-card-panel .oui-heading-5,
.oui-sheet-header .oui-heading-5 {
  letter-spacing: -0.03em;
}
.finance-metric .oui-text-xs,
.oui-surface-section .oui-text-xs,
.oui-form-card-panel .oui-text-xs {
  line-height: 1.4;
}
.oui-filter-select {
  position: relative;
  --oui-filter-select-menu-width: max(12rem, 100%);
}
.oui-filter-select__trigger { min-inline-size: 9.5rem; justify-content: space-between; }
.oui-filter-select__menu {
  inset-inline: auto 0;
  min-inline-size: 0;
  inline-size: min(var(--oui-filter-select-menu-width), calc(100vw - 2rem));
}
.oui-dropdown.oui-filter-select__submenu {
  inline-size: min(var(--oui-filter-select-menu-width), calc(100vw - 2rem));
  max-inline-size: min(var(--oui-filter-select-menu-width), calc(100vw - 2rem));
}
.oui-filter-select__custom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--oui-space-sm);
}
.oui-filter-select__submenu .oui-filter-select__custom {
  padding: var(--oui-space-sm);
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}
.oui-filter-select__custom .oui-field { min-inline-size: 0; }
.oui-filter-select__actions { display: flex; justify-content: flex-end; gap: var(--oui-space-xs); }
.budget-table-grid { display: grid; gap: var(--oui-space-md); }
.oui-surface-section { display: grid; gap: var(--oui-space-sm); overflow: visible; }
.budget-table-wrap { position: relative; overflow-x: auto; overflow-y: visible; }
.budget-table { min-inline-size: 44rem; table-layout: auto; }
.budget-table th,
.budget-table td { overflow: hidden; vertical-align: middle; }
.budget-table td.budget-table-cell--with-hint { overflow: visible; }
.budget-table-name { min-inline-size: 0; }
.budget-table-date { min-inline-size: 0; }
.budget-table-note {
  display: block;
  margin-block-start: var(--oui-space-3xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oui-inline-hint { display: inline-flex; align-items: center; }
.oui-inline-hint__trigger {
  min-block-size: 1.375rem;
  inline-size: 1.375rem;
  min-inline-size: 1.375rem;
  padding: 0;
  color: var(--oui-text-muted);
}
.budget-row-hint .oui-inline-hint__trigger {
  color: var(--oui-danger) !important;
  background: color-mix(in srgb, var(--oui-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--oui-danger) 28%, transparent);
}
.budget-row-hint .oui-icon-button[data-variant="ghost"] {
  color: var(--oui-danger) !important;
  background: color-mix(in srgb, var(--oui-danger) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--oui-danger) 28%, transparent) !important;
}
.budget-row-hint .oui-inline-hint__trigger .oui-svg-icon,
.budget-row-hint .oui-inline-hint__trigger .oui-svg-icon * {
  color: var(--oui-danger) !important;
  stroke: currentColor !important;
}
.budget-row-hint .oui-inline-hint__trigger:hover,
.budget-row-hint .oui-inline-hint__trigger:focus-visible {
  background: color-mix(in srgb, var(--oui-danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--oui-danger) 36%, transparent);
}
.budget-row-hint .oui-inline-hint__bubble {
  z-index: calc(var(--oui-z-dropdown) + 6);
}
.budget-row-hint.is-open .oui-inline-hint__bubble {
  display: grid !important;
}
.oui-inline-hint[data-tone="danger"] .oui-inline-hint__trigger,
.oui-inline-hint__trigger[data-tone="danger"] {
  color: var(--oui-danger);
}
.oui-inline-hint__trigger .oui-svg-icon {
  inline-size: .8125rem;
  block-size: .8125rem;
}
.oui-inline-hint__bubble {
  inline-size: min(16rem, calc(100vw - 2rem));
  min-inline-size: 0;
  gap: var(--oui-space-2xs);
  padding: var(--oui-space-sm);
}
.oui-inline-hint__bubble strong {
  display: block;
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-sm);
  line-height: 1.2;
}
.oui-inline-hint[data-tone="danger"] .oui-inline-hint__bubble,
.oui-inline-hint__bubble[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--oui-danger) 28%, var(--oui-border));
  box-shadow: var(--oui-shadow-sm), 0 0 0 .0625rem color-mix(in srgb, var(--oui-danger) 16%, transparent);
}
.budget-row--pending-remove {
  transition: opacity var(--oui-motion-fast) var(--oui-ease), background-color var(--oui-motion-fast) var(--oui-ease);
}
.budget-row--pending-remove .oui-inline-hint {
  order: -1;
}
.budget-row--pending-update {
  transition: opacity var(--oui-motion-fast) var(--oui-ease), background-color var(--oui-motion-fast) var(--oui-ease);
}
.budget-row--pending-update .oui-inline-hint {
  order: -1;
}
.budget-row--pending-remove [data-pending-fade] {
  opacity: .42;
}
.budget-row--pending-update [data-pending-fade] {
  opacity: .56;
}
.budget-row--pending-remove [data-pending-fade] * ,
.budget-row--pending-update [data-pending-fade] * {
  opacity: inherit;
}
.budget-row--pending-remove .budget-row-hint,
.budget-row--pending-remove .budget-row-hint *,
.budget-row--pending-update .budget-row-hint,
.budget-row--pending-update .budget-row-hint * {
  opacity: 1 !important;
}
.budget-row--pending-remove:hover,
.budget-row--pending-remove:focus-within,
.budget-row--pending-update:hover,
.budget-row--pending-update:focus-within {
  background: color-mix(in srgb, var(--oui-danger) 6%, transparent);
}
.budget-row--pending-remove:hover .finance-amount,
.budget-row--pending-remove:focus-within .finance-amount,
.budget-row--pending-remove:hover .oui-badge,
.budget-row--pending-remove:focus-within .oui-badge,
.budget-row--pending-remove:hover .budget-table-note,
.budget-row--pending-remove:focus-within .budget-table-note,
.budget-row--pending-remove:hover .budget-swatch,
.budget-row--pending-remove:focus-within .budget-swatch,
.budget-row--pending-remove:hover .oui-progress,
.budget-row--pending-remove:focus-within .oui-progress,
.budget-row--pending-update:hover .finance-amount,
.budget-row--pending-update:focus-within .finance-amount,
.budget-row--pending-update:hover .oui-badge,
.budget-row--pending-update:focus-within .oui-badge,
.budget-row--pending-update:hover .budget-table-note,
.budget-row--pending-update:focus-within .budget-table-note,
.budget-row--pending-update:hover .budget-swatch,
.budget-row--pending-update:focus-within .budget-swatch,
.budget-row--pending-update:hover .oui-progress,
.budget-row--pending-update:focus-within .oui-progress {
  opacity: .82;
}
.budget-summary[disabled],
.budget-summary[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}
.admin-mobile-payment-fab {
  display: none !important;
}
.admin-mobile-payment-card {
  inline-size: min(100%, 26rem);
  margin: 0;
}
.admin-mobile-payment-surface {
  display: none !important;
}
.admin-mobile-payment-surface[hidden] {
  display: none !important;
}
.budget-row-hint[hidden] {
  display: none !important;
}
.budget-status-note {
  display: block;
  margin-block-start: var(--oui-space-3xs);
  white-space: normal;
  line-height: 1.4;
}
.budget-table-progress { min-inline-size: 7rem; }
.budget-table .finance-amount {
  font-size: clamp(var(--oui-font-size-xs), 1.15vw, var(--oui-font-size-sm));
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.budget-table-actions { position: relative; display: inline-grid; justify-items: end; }
.budget-edit-dialog { display: grid; gap: var(--oui-space-md); inline-size: min(100%, 34rem); }
.budget-create-modal { display: none; }
.budget-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--oui-space-md);
}
.budget-modal-header .oui-close-button { flex: none; }
.budget-pagination nav {
  display: grid;
  gap: var(--oui-space-xs);
  color: var(--oui-text-secondary);
  font-size: var(--oui-font-size-xs);
}
.budget-pagination nav > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oui-space-sm);
}
.budget-pagination__summary { display: inline-flex; align-items: center; min-block-size: var(--oui-size-control-sm); }
.subscription-payment-shell { display: grid; gap: var(--oui-space-sm); }
.subscription-payment-shell__selector { max-inline-size: 18rem; }
.subscription-payment-grid,
.subscription-active-grid,
.subscription-method-panel {
  display: grid;
  gap: var(--oui-space-sm);
}
.subscription-payment-grid,
.subscription-method-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.subscription-active-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subscription-method-panel__media {
  display: grid;
  place-items: center;
  min-block-size: 16rem;
  padding: var(--oui-space-sm);
  border: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 82%, transparent);
  border-radius: var(--oui-radius-lg);
  background: color-mix(in srgb, var(--oui-bg-elevated) 88%, transparent);
}
.subscription-method-panel__image {
  inline-size: min(100%, 15rem);
  block-size: auto;
  object-fit: contain;
  border-radius: var(--oui-radius-md);
  box-shadow: var(--oui-shadow-sm);
}
.subscription-method-panel__body {
  display: grid;
  align-content: start;
  gap: var(--oui-space-sm);
}
.subscription-method-panel__details {
  display: grid;
  gap: var(--oui-space-sm);
}
.subscription-method-panel__details div {
  display: grid;
  gap: .125rem;
  padding-block-end: var(--oui-space-xs);
  border-block-end: var(--oui-border-thin) solid color-mix(in srgb, var(--oui-border) 80%, transparent);
}
.subscription-method-panel__details dt {
  color: var(--oui-text-muted);
  font-size: var(--oui-font-size-xs);
}
.subscription-method-panel__details dd {
  margin: 0;
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-sm);
  font-weight: var(--oui-weight-semibold);
}
@media (min-width: 72rem) {
}
.budget-details { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
.budget-list { display: grid; gap: var(--oui-space-sm); }
.budget-record {
  display: grid;
  gap: var(--oui-space-sm);
  padding: var(--oui-space-md);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-lg);
  background: var(--oui-surface-fill, var(--oui-bg-surface));
  box-shadow: var(--oui-shadow-xs);
}
.budget-record-title {
  margin-block-start: var(--oui-space-sm);
  color: var(--oui-text-primary);
  font-size: var(--oui-font-size-lg);
  line-height: var(--oui-line-tight);
  font-weight: var(--oui-weight-semibold);
  letter-spacing: -0.03em;
}
.budget-note {
  margin-block-start: var(--oui-space-sm);
  color: var(--oui-text-secondary);
  line-height: 1.55;
}
.budget-swatch {
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--oui-radius-full);
  background: var(--swatch, var(--oui-chart-1));
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--swatch, var(--oui-chart-1)) 14%, transparent);
}
.finance-amount {
  color: var(--oui-text-primary);
  font-size: clamp(var(--oui-font-size-lg), 1.8vw, var(--oui-font-size-xl));
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.finance-amount.is-warning { color: var(--oui-warning); }
.budget-details-panel { display: grid; gap: var(--oui-space-sm); }
.budget-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-block-size: var(--oui-size-control-sm);
  padding-inline: var(--oui-space-sm);
  color: var(--oui-text-secondary);
  border: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  border-radius: var(--oui-radius-md);
  background: var(--oui-surface-fill, var(--oui-bg-surface));
  font-size: var(--oui-font-size-sm);
  font-weight: var(--oui-weight-medium);
  line-height: 1;
  cursor: pointer;
}
.budget-summary:hover,
details[open] > .budget-summary {
  color: var(--oui-text-primary);
  border-color: var(--oui-surface-line-strong, var(--oui-border-strong));
  background: var(--oui-surface-fill-hover, var(--oui-bg-elevated));
}
.budget-summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
@media (max-width: 72rem) {
  .budget-hero,
  .oui-form-card-panel { gap: var(--oui-space-md); }
  .budget-hero > .oui-cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .budget-hero .app-copy { max-inline-size: 100%; }
  .budget-hero .oui-status {
    max-inline-size: 100%;
    font-size: var(--oui-font-size-xs);
  }
  .app-account--header .app-account__meta { display: none; }
  .app-main,
  .app-nav { inline-size: min(100% - 1.5rem, var(--perfin-app-width)); }
  .app-main { padding-block-start: var(--oui-space-sm); }
  .settings-shell,
  .landing-grid,
  .budget-dashboard,
  .budget-details { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .finance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-metric { min-block-size: 6.25rem; }
  .finance-metric .oui-text-sm { line-height: 1.4; }
  .finance-value { font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: -0.04em; }
  .landing-proof,
  .landing-value-strip,
  .landing-hero-metrics,
  .landing-feature-strip,
  .landing-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-section--accent { grid-template-columns: 1fr; }
  .budget-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-payment-grid,
  .subscription-method-panel { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .budget-hero__title,
  .budget-hero .oui-heading-1,
  .budget-hero .oui-heading-2 { font-size: clamp(1.25rem, 6vw, 1.45rem); }
  .budget-hero .app-copy,
  .oui-surface-section .oui-text-sm,
  .oui-form-card-panel .oui-text-sm { line-height: 1.45; }
  .finance-metric-grid,
  .finance-metric-grid.is-preview { grid-template-columns: 1fr; }
  .finance-metric {
    min-block-size: 0;
    gap: var(--oui-space-xs);
  }
  .finance-value { font-size: clamp(1.15rem, 5vw, 1.4rem); }
  html[data-nav-mode='sidebar'] body.is-authenticated .app-sidebar { display: none; }
  html[data-nav-mode='sidebar'] body.is-authenticated .app-header { display: block; }
  html[data-nav-mode='sidebar'] body.is-authenticated .app-frame { margin-inline-start: 0; }
  html[data-nav-mode='sidebar'] body.is-authenticated .app-brand--header { display: inline-flex; }
  .app-sidebar__nav { display: grid; flex: none; }
  .app-sidebar__footer,
  .app-account--sidebar { inline-size: 100%; margin-inline-start: 0; }
  .app-nav {
    align-items: center;
    flex-direction: row;
    gap: var(--oui-space-xs);
    min-block-size: 3.75rem;
  }
  .app-actions {
    inline-size: auto;
    margin-inline-start: auto;
    justify-content: flex-end;
    gap: var(--oui-space-xs);
    flex-wrap: nowrap;
  }
  html[data-nav-mode='sidebar'] .app-mobile-menu-button { display: inline-flex; }
  html[data-nav-mode='header'] .app-mobile-menu-button { display: none; }
  html[data-nav-mode='header'] .app-header-nav { display: inline-flex; }
  html[data-nav-mode='sidebar'] .app-header-nav { display: none; }
  .app-header-nav {
    margin-inline-start: 0;
    margin-inline-end: auto;
    gap: var(--oui-space-2xs);
  }
  .app-header-nav__link {
    min-inline-size: var(--oui-size-control-md);
    padding-inline: var(--oui-space-sm);
  }
  .app-header-nav__link span {
    display: none;
  }
  .app-brand__wordmark {
    display: none;
  }
  .app-account--header { inline-size: auto; }
  .app-account--header .app-avatar-button {
    inline-size: auto;
    min-inline-size: 0;
    gap: var(--oui-space-2xs);
    padding: var(--oui-space-2xs) var(--oui-space-xs);
  }
  .app-account--header .app-account__meta { display: none; }
  .app-account--header .oui-trailing {
    display: inline-flex;
    margin-inline-start: 0;
    color: var(--oui-text-muted);
    font-size: var(--oui-font-size-xs);
    line-height: 1;
  }
  .app-admin-notifications__menu {
    inset-inline: auto 0;
    inline-size: min(18rem, calc(100vw - 1.5rem));
    max-inline-size: calc(100vw - 1.5rem);
    padding: var(--oui-space-sm);
  }
  .app-admin-notifications__actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .app-admin-notifications__actions .oui-button {
    inline-size: 100%;
    justify-content: flex-start;
  }
  .app-account-menu {
    inset-inline: auto 0;
    inline-size: min(15rem, calc(100vw - 1.5rem));
    max-inline-size: calc(100vw - 1.5rem);
  }
  .oui-toast-region {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%);
  }
  .finance-metric-grid,
  .finance-metric-grid.is-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-proof,
  .landing-value-strip,
  .landing-hero-metrics,
  .landing-feature-strip,
  .landing-trust-strip { grid-template-columns: 1fr; }
  .landing-summary-item { align-items: flex-start; flex-direction: column; }
  .landing-step-card {
    grid-template-columns: 1fr;
  }
  .landing-cta-band {
    align-items: flex-start;
  }
  .appearance-options { grid-template-columns: 1fr; }
  .oui-color-field-grid { grid-template-columns: 1fr; }
  .oui-form-row { grid-template-columns: 1fr; }
  .oui-filter-select {
    inline-size: auto;
  }
  .oui-filter-select__trigger {
    inline-size: auto;
    min-inline-size: 9.5rem;
  }
  .oui-filter-select__menu {
    position: absolute;
    z-index: calc(var(--oui-z-dropdown) + 4);
    inset-block-start: calc(100% + var(--oui-space-xs));
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: var(--oui-filter-select-menu-width);
    max-inline-size: min(var(--oui-filter-select-menu-width), calc(100vw - 2rem));
  }
  .oui-dropdown.oui-menu__submenu {
    position: absolute;
    z-index: calc(var(--oui-z-dropdown) + 5);
    inset-block-start: calc(100% + var(--oui-space-xs));
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-inline-size: 0;
    inline-size: var(--oui-filter-select-menu-width);
    max-inline-size: min(var(--oui-filter-select-menu-width), calc(100vw - 2rem));
    padding: var(--oui-space-sm);
    transform: translateY(-.125rem);
  }
  .oui-filter-select__submenu .oui-filter-select__custom {
    padding: 0;
  }
  .oui-menu__submenu-anchor::after { display: none; }
  .oui-menu__submenu-anchor:is(:hover,:focus-within) > .oui-menu__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .subscription-payment-grid,
  .subscription-active-grid,
  .subscription-method-panel { grid-template-columns: 1fr; }
  .subscription-payment-shell__selector { max-inline-size: none; }
  .budget-side { display: none; }
  .oui-mobile-actions {
    position: fixed;
    inset-inline-end: max(var(--oui-space-md), env(safe-area-inset-right));
    inset-block-end: max(var(--oui-space-md), env(safe-area-inset-bottom));
    z-index: calc(var(--oui-z-dropdown) + 1);
    display: grid;
    justify-items: end;
  }
  .admin-mobile-payment-fab {
    position: fixed;
    inset-inline-start: max(var(--oui-space-md), env(safe-area-inset-left));
    inset-block-end: max(var(--oui-space-md), env(safe-area-inset-bottom));
    z-index: calc(var(--oui-z-dropdown) + 1);
    display: inline-flex !important;
    inline-size: 3.5rem;
    min-inline-size: 3.5rem;
    min-block-size: 3.5rem;
    border-radius: var(--oui-radius-full);
    box-shadow: var(--oui-shadow-lg);
  }
  .admin-mobile-payment-fab .oui-svg-icon {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }
  .admin-mobile-payment-surface {
    display: grid !important;
    place-items: end start;
    padding:
      var(--oui-space-md)
      max(var(--oui-space-md), env(safe-area-inset-right))
      calc(var(--oui-space-md) + 4.25rem + env(safe-area-inset-bottom))
      max(var(--oui-space-md), env(safe-area-inset-left));
    background: rgb(4 7 12 / .48);
  }
  .admin-mobile-payment-card {
    inline-size: min(calc(100vw - 2rem), 26rem);
    max-block-size: min(75vh, 40rem);
    overflow: auto;
  }
  .oui-mobile-actions__trigger {
    transition: opacity var(--oui-motion-base) var(--oui-ease), transform var(--oui-motion-base) var(--oui-ease);
  }
  .oui-mobile-actions__trigger.is-active {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
    pointer-events: none;
  }
  .oui-mobile-sheet { display: grid; }
  .oui-mobile-sheet[hidden] { display: none; }
  .oui-mobile-sheet__panel {
    display: grid;
    gap: var(--oui-space-sm);
    border-block-start: var(--oui-border-thin) solid var(--oui-surface-line, var(--oui-border));
  }
  .oui-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--oui-space-sm);
  }
  .budget-create-modal { display: grid; padding: var(--oui-space-sm); }
  .budget-create-modal[hidden] { display: none; }
  .budget-create-modal .budget-edit-dialog {
    max-block-size: min(90dvh, 44rem);
    overflow: auto;
  }
  .app-main:has(.oui-mobile-actions) { padding-block-end: calc(var(--oui-space-2xl) + 4.5rem); }
  .budget-modal-header { gap: var(--oui-space-sm); }
  .budget-edit-modal { padding: var(--oui-space-sm); }
}