/* FoxUI tokenlari — avtomatik yaratilgan (scripts/build.mjs). Qo'lda tahrirlamang. */
@layer fx.reset, fx.tokens, fx.base, fx.components, fx.utilities;

@property --fx-knob-pill { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fx-knob-density { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-depth { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-motion { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-blur { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-outline { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-field-fill { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fx-knob-motion-press { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-knob-motion-lift { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fx-knob-motion-stagger { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fx-knob-motion-loop { syntax: "<number>"; inherits: true; initial-value: 1; }

@layer fx.tokens {
:root {
  --fx-color-gray-25: #FCFCFD;
  --fx-color-gray-50: #F9FAFB;
  --fx-color-gray-100: #F2F4F7;
  --fx-color-gray-200: #E4E7EC;
  --fx-color-gray-300: #D0D5DD;
  --fx-color-gray-400: #98A2B3;
  --fx-color-gray-500: #667085;
  --fx-color-gray-600: #475467;
  --fx-color-gray-700: #344054;
  --fx-color-gray-800: #1D2939;
  --fx-color-gray-900: #101828;
  --fx-color-gray-950: #0C111D;
  --fx-color-neutral-25: var(--fx-color-gray-25);
  --fx-color-neutral-50: var(--fx-color-gray-50);
  --fx-color-neutral-100: var(--fx-color-gray-100);
  --fx-color-neutral-200: var(--fx-color-gray-200);
  --fx-color-neutral-300: var(--fx-color-gray-300);
  --fx-color-neutral-400: var(--fx-color-gray-400);
  --fx-color-neutral-500: var(--fx-color-gray-500);
  --fx-color-neutral-600: var(--fx-color-gray-600);
  --fx-color-neutral-700: var(--fx-color-gray-700);
  --fx-color-neutral-800: var(--fx-color-gray-800);
  --fx-color-neutral-900: var(--fx-color-gray-900);
  --fx-color-neutral-950: var(--fx-color-gray-950);
  --fx-color-pastel-yellow: #F5D77E;
  --fx-color-pastel-pink: #F3BBD4;
  --fx-color-pastel-blue: #AECBF2;
  --fx-color-pastel-coral: #F4A688;
  --fx-color-pastel-green: #BEDDB2;
  --fx-color-pastel-purple: #CFC0F3;
  --fx-color-red-50: #FEF3F2;
  --fx-color-red-300: #FDA29B;
  --fx-color-red-600: #D92D20;
  --fx-color-red-700: #B42318;
  --fx-color-red-900: #7A271A;
  --fx-color-green-50: #ECFDF3;
  --fx-color-green-300: #75E0A7;
  --fx-color-green-600: #079455;
  --fx-color-green-700: #067647;
  --fx-color-green-900: #074D31;
  --fx-color-amber-50: #FFFAEB;
  --fx-color-amber-300: #FEC84B;
  --fx-color-amber-600: #DC6803;
  --fx-color-amber-700: #B54708;
  --fx-color-amber-900: #7A2E0E;
  --fx-color-white: #FFFFFF;
  --fx-color-black: #000000;
  --fx-color-brand-50: var(--fx-color-neutral-50);
  --fx-color-brand-100: var(--fx-color-neutral-100);
  --fx-color-brand-200: var(--fx-color-neutral-200);
  --fx-color-brand-300: var(--fx-color-neutral-300);
  --fx-color-brand-400: var(--fx-color-neutral-400);
  --fx-color-brand-500: var(--fx-color-neutral-500);
  --fx-color-brand-600: var(--fx-color-neutral-600);
  --fx-color-brand-700: var(--fx-color-neutral-700);
  --fx-color-brand-800: var(--fx-color-neutral-800);
  --fx-color-brand-900: var(--fx-color-neutral-900);
  --fx-color-brand-950: var(--fx-color-neutral-950);
  --fx-color-blue-50: #EFF8FF;
  --fx-color-blue-300: #84CAFF;
  --fx-color-blue-600: #1570EF;
  --fx-color-blue-700: #175CD3;
  --fx-color-blue-900: #194185;
  --fx-space-1: 4px;
  --fx-space-2: 8px;
  --fx-space-3: 12px;
  --fx-space-4: 16px;
  --fx-space-5: 20px;
  --fx-space-6: 24px;
  --fx-space-8: 32px;
  --fx-space-10: 40px;
  --fx-space-12: 48px;
  --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-display: var(--fx-font-family-sans);
  --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-size-xs: 12px;
  --fx-font-size-sm: 14px;
  --fx-font-size-md: 16px;
  --fx-font-size-lg: 18px;
  --fx-font-size-xl: 20px;
  --fx-font-size-display-sm: 30px;
  --fx-font-size-display-md: 36px;
  --fx-font-weight-regular: 400;
  --fx-font-weight-medium: 500;
  --fx-font-weight-semibold: 600;
  --fx-font-adjust-sans: ex-height 0.52;
  --fx-font-adjust-display: var(--fx-font-adjust-sans);
  --fx-font-adjust-mono: ex-height 0.52;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
  --fx-duration-fast: 120ms;
  --fx-duration-base: 200ms;
  --fx-duration-slow: 360ms;
  --fx-duration-pulse: 1600ms;
  --fx-duration-spin: 800ms;
  --fx-duration-instant: 60ms;
  --fx-duration-slower: 500ms;
  --fx-duration-stagger: 30ms;
  --fx-duration-shimmer: 1400ms;
  --fx-duration-indeterminate: 1600ms;
  --fx-duration-delay-tip: 400ms;
  --fx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fx-ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fx-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --fx-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --fx-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --fx-ease-spring: linear(0, 0.044, 0.149, 0.283, 0.424, 0.558, 0.677, 0.776, 0.856, 0.917, 0.961, 0.992, 1.011, 1.022, 1.027, 1.028, 1.027, 1.023, 1.019, 1.015, 1.012, 1.008, 1.006, 1.004, 1);
  --fx-ease-bounce: linear(0, 0.064, 0.22, 0.42, 0.626, 0.812, 0.961, 1.067, 1.132, 1.16, 1.16, 1.141, 1.111, 1.077, 1.045, 1.017, 0.997, 0.983, 0.975, 0.973, 0.975, 0.979, 0.985, 0.99, 0.995, 0.999, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1);
  --fx-text-primary: var(--fx-color-neutral-900);
  --fx-text-secondary: var(--fx-color-neutral-600);
  --fx-text-tertiary: var(--fx-color-neutral-500);
  --fx-text-disabled: var(--fx-color-neutral-400);
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-error: var(--fx-color-red-600);
  --fx-text-on-category: var(--fx-color-neutral-900);
  --fx-text-brand: var(--fx-color-neutral-900);
  --fx-text-on-error: var(--fx-color-white);
  --fx-text-on-rail: var(--fx-color-neutral-300);
  --fx-text-on-rail-strong: var(--fx-color-neutral-25);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-text-on-rail-current: color-mix(in oklab, var(--fx-bg-rail-selected) 82%, var(--fx-text-on-rail-strong));
  --fx-text-on-static-light: var(--fx-color-neutral-900);
  --fx-bg-page: var(--fx-color-neutral-25);
  --fx-bg-surface: var(--fx-color-white);
  --fx-bg-subtle: var(--fx-color-neutral-50);
  --fx-bg-muted: var(--fx-color-neutral-100);
  --fx-bg-brand-solid: var(--fx-color-neutral-900);
  --fx-bg-brand-solid-hover: var(--fx-color-neutral-700);
  --fx-bg-error-subtle: var(--fx-color-red-50);
  --fx-bg-success-subtle: var(--fx-color-green-50);
  --fx-bg-warning-subtle: var(--fx-color-amber-50);
  --fx-bg-overlay: var(--fx-color-neutral-950);
  --fx-bg-category-yellow: var(--fx-color-pastel-yellow);
  --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page));
  --fx-bg-category-pink: var(--fx-color-pastel-pink);
  --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page));
  --fx-bg-category-blue: var(--fx-color-pastel-blue);
  --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page));
  --fx-bg-category-coral: var(--fx-color-pastel-coral);
  --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page));
  --fx-bg-category-green: var(--fx-color-pastel-green);
  --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page));
  --fx-bg-category-purple: var(--fx-color-pastel-purple);
  --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page));
  --fx-bg-brand-subtle: var(--fx-color-neutral-100);
  --fx-bg-error-solid: var(--fx-color-red-600);
  --fx-bg-info-subtle: var(--fx-color-blue-50);
  --fx-bg-rail: var(--fx-color-neutral-950);
  --fx-bg-rail-selected: var(--fx-color-neutral-25);
  --fx-bg-static-light: var(--fx-color-neutral-25);
  --fx-fg-success: var(--fx-color-green-700);
  --fx-fg-warning: var(--fx-color-amber-700);
  --fx-fg-error: var(--fx-color-red-700);
  --fx-fg-info: var(--fx-color-blue-700);
  --fx-border-color-default: var(--fx-color-neutral-200);
  --fx-border-color-strong: var(--fx-color-neutral-300);
  --fx-border-color-focus: var(--fx-color-neutral-900);
  --fx-border-color-error: var(--fx-color-red-600);
  --fx-border-width-default: 1px;
  --fx-border-width-focus: 2px;
  --fx-shadow-color: var(--fx-color-neutral-900);
  --fx-knob-pill: 0;
  --fx-knob-density: 1;
  --fx-knob-depth: 1;
  --fx-knob-motion: 1;
  --fx-knob-blur: 1;
  --fx-knob-outline: 1;
  --fx-knob-field-fill: 0;
  --fx-knob-motion-press: 1;
  --fx-knob-motion-lift: 0;
  --fx-knob-motion-stagger: 0;
  --fx-knob-motion-loop: 1;
  --fx-radius-control: 8px;
  --fx-radius-nav: 6px;
  --fx-radius-field-multiline: 8px;
  --fx-radius-surface: 12px;
  --fx-radius-overlay: 16px;
  --fx-radius-badge: 6px;
  --fx-radius-circle: 50%;
  --fx-radius-checkbox-ratio: 0.25;
  --fx-radius-avatar-ratio: 0.28;
  --fx-size-control-sm: 36px;
  --fx-size-control-md: 44px;
  --fx-size-control-lg: 52px;
  --fx-size-checkbox: 20px;
  --fx-size-switch-track: 40px;
  --fx-size-min-target: 24px;
  --fx-size-touch-target: 44px;
  --fx-size-avatar-sm: 22px;
  --fx-size-avatar-md: 36px;
  --fx-size-avatar-lg: 56px;
  --fx-size-status-dot: 10px;
  --fx-size-status-dot-sm: 8px;
  --fx-size-icon-sm: 16px;
  --fx-size-icon-md: 20px;
  --fx-size-icon-lg: 24px;
  --fx-size-topbar: 60px;
  --fx-size-rail: 80px;
  --fx-nav-width: 256px;
  --fx-nav-width-collapsed: 60px;
  --fx-nav-item-height: 40px;
  --fx-nav-subitem-height: 34px;
  --fx-dialog-width: 480px;
  --fx-popover-width: 320px;
  --fx-toast-width: 520px;
  --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface));
  --fx-viz-brand: var(--fx-color-neutral-500);
  --fx-viz-accent: var(--fx-color-pastel-yellow);
  --fx-viz-risk: var(--fx-bg-error-solid);
  --fx-viz-context: var(--fx-color-neutral-300);
  --fx-viz-grid: var(--fx-border-color-default);
  --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent);
  --fx-motion-shift-sm: var(--fx-space-1);
  --fx-motion-shift-md: var(--fx-space-2);
  --fx-motion-shift-lg: var(--fx-space-6);
  --fx-motion-scale-enter: 0.96;
  --fx-motion-scale-press: 0.97;
  --fx-motion-lift: -2px;
}
[data-fx-scheme="light"] {
  --fx-text-primary: var(--fx-color-neutral-900);
  --fx-text-secondary: var(--fx-color-neutral-600);
  --fx-text-tertiary: var(--fx-color-neutral-500);
  --fx-text-disabled: var(--fx-color-neutral-400);
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-error: var(--fx-color-red-600);
  --fx-text-on-category: var(--fx-color-neutral-900);
  --fx-text-brand: var(--fx-color-neutral-900);
  --fx-text-on-error: var(--fx-color-white);
  --fx-bg-page: var(--fx-color-neutral-25);
  --fx-bg-surface: var(--fx-color-white);
  --fx-bg-subtle: var(--fx-color-neutral-50);
  --fx-bg-muted: var(--fx-color-neutral-100);
  --fx-bg-brand-solid: var(--fx-color-neutral-900);
  --fx-bg-brand-solid-hover: var(--fx-color-neutral-700);
  --fx-bg-error-subtle: var(--fx-color-red-50);
  --fx-bg-success-subtle: var(--fx-color-green-50);
  --fx-bg-warning-subtle: var(--fx-color-amber-50);
  --fx-bg-overlay: var(--fx-color-neutral-950);
  --fx-bg-category-yellow: var(--fx-color-pastel-yellow);
  --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page));
  --fx-bg-category-pink: var(--fx-color-pastel-pink);
  --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page));
  --fx-bg-category-blue: var(--fx-color-pastel-blue);
  --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page));
  --fx-bg-category-coral: var(--fx-color-pastel-coral);
  --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page));
  --fx-bg-category-green: var(--fx-color-pastel-green);
  --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page));
  --fx-bg-category-purple: var(--fx-color-pastel-purple);
  --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page));
  --fx-bg-brand-subtle: var(--fx-color-neutral-100);
  --fx-bg-error-solid: var(--fx-color-red-600);
  --fx-bg-info-subtle: var(--fx-color-blue-50);
  --fx-fg-success: var(--fx-color-green-700);
  --fx-fg-warning: var(--fx-color-amber-700);
  --fx-fg-error: var(--fx-color-red-700);
  --fx-fg-info: var(--fx-color-blue-700);
  --fx-border-color-default: var(--fx-color-neutral-200);
  --fx-border-color-strong: var(--fx-color-neutral-300);
  --fx-border-color-focus: var(--fx-color-neutral-900);
  --fx-border-color-error: var(--fx-color-red-600);
  --fx-shadow-color: var(--fx-color-neutral-900);
  --fx-viz-brand: var(--fx-color-neutral-500);
  --fx-viz-context: var(--fx-color-neutral-300);
  --fx-viz-accent: var(--fx-color-pastel-yellow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-fx-scheme="light"]) {
    --fx-text-primary: var(--fx-color-neutral-50);
    --fx-text-secondary: var(--fx-color-neutral-300);
    --fx-text-tertiary: var(--fx-color-neutral-400);
    --fx-text-disabled: var(--fx-color-neutral-600);
    --fx-text-on-brand: var(--fx-color-neutral-900);
    --fx-text-error: var(--fx-color-red-300);
    --fx-text-on-category: var(--fx-color-neutral-50);
    --fx-text-brand: var(--fx-color-neutral-50);
    --fx-text-on-error: var(--fx-color-white);
    --fx-bg-page: var(--fx-color-neutral-950);
    --fx-bg-surface: var(--fx-color-neutral-900);
    --fx-bg-subtle: var(--fx-color-neutral-900);
    --fx-bg-muted: var(--fx-color-neutral-800);
    --fx-bg-brand-solid: var(--fx-color-neutral-50);
    --fx-bg-brand-solid-hover: var(--fx-color-neutral-200);
    --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface));
    --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface));
    --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface));
    --fx-bg-overlay: var(--fx-color-black);
    --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page));
    --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page));
    --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page));
    --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page));
    --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page));
    --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950));
    --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page));
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-bg-error-solid: var(--fx-color-red-600);
    --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface));
    --fx-fg-success: var(--fx-color-green-300);
    --fx-fg-warning: var(--fx-color-amber-300);
    --fx-fg-error: var(--fx-color-red-300);
    --fx-fg-info: var(--fx-color-blue-300);
    --fx-border-color-default: var(--fx-color-neutral-800);
    --fx-border-color-strong: var(--fx-color-neutral-700);
    --fx-border-color-focus: var(--fx-color-neutral-50);
    --fx-border-color-error: var(--fx-color-red-300);
    --fx-shadow-color: var(--fx-color-black);
    --fx-viz-brand: var(--fx-color-neutral-400);
    --fx-viz-context: var(--fx-color-neutral-600);
    --fx-viz-accent: var(--fx-color-pastel-yellow);
  }
}
[data-fx-scheme="dark"] {
  --fx-text-primary: var(--fx-color-neutral-50);
  --fx-text-secondary: var(--fx-color-neutral-300);
  --fx-text-tertiary: var(--fx-color-neutral-400);
  --fx-text-disabled: var(--fx-color-neutral-600);
  --fx-text-on-brand: var(--fx-color-neutral-900);
  --fx-text-error: var(--fx-color-red-300);
  --fx-text-on-category: var(--fx-color-neutral-50);
  --fx-text-brand: var(--fx-color-neutral-50);
  --fx-text-on-error: var(--fx-color-white);
  --fx-bg-page: var(--fx-color-neutral-950);
  --fx-bg-surface: var(--fx-color-neutral-900);
  --fx-bg-subtle: var(--fx-color-neutral-900);
  --fx-bg-muted: var(--fx-color-neutral-800);
  --fx-bg-brand-solid: var(--fx-color-neutral-50);
  --fx-bg-brand-solid-hover: var(--fx-color-neutral-200);
  --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface));
  --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface));
  --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface));
  --fx-bg-overlay: var(--fx-color-black);
  --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page));
  --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page));
  --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page));
  --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page));
  --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page));
  --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950));
  --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page));
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-bg-error-solid: var(--fx-color-red-600);
  --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface));
  --fx-fg-success: var(--fx-color-green-300);
  --fx-fg-warning: var(--fx-color-amber-300);
  --fx-fg-error: var(--fx-color-red-300);
  --fx-fg-info: var(--fx-color-blue-300);
  --fx-border-color-default: var(--fx-color-neutral-800);
  --fx-border-color-strong: var(--fx-color-neutral-700);
  --fx-border-color-focus: var(--fx-color-neutral-50);
  --fx-border-color-error: var(--fx-color-red-300);
  --fx-shadow-color: var(--fx-color-black);
  --fx-viz-brand: var(--fx-color-neutral-400);
  --fx-viz-context: var(--fx-color-neutral-600);
  --fx-viz-accent: var(--fx-color-pastel-yellow);
}
[data-fx-theme="graphite"] {
  --fx-color-neutral-25: var(--fx-color-gray-25);
  --fx-color-neutral-50: var(--fx-color-gray-50);
  --fx-color-neutral-100: var(--fx-color-gray-100);
  --fx-color-neutral-200: var(--fx-color-gray-200);
  --fx-color-neutral-300: var(--fx-color-gray-300);
  --fx-color-neutral-400: var(--fx-color-gray-400);
  --fx-color-neutral-500: var(--fx-color-gray-500);
  --fx-color-neutral-600: var(--fx-color-gray-600);
  --fx-color-neutral-700: var(--fx-color-gray-700);
  --fx-color-neutral-800: var(--fx-color-gray-800);
  --fx-color-neutral-900: var(--fx-color-gray-900);
  --fx-color-neutral-950: var(--fx-color-gray-950);
  --fx-color-brand-50: var(--fx-color-neutral-50);
  --fx-color-brand-100: var(--fx-color-neutral-100);
  --fx-color-brand-200: var(--fx-color-neutral-200);
  --fx-color-brand-300: var(--fx-color-neutral-300);
  --fx-color-brand-400: var(--fx-color-neutral-400);
  --fx-color-brand-500: var(--fx-color-neutral-500);
  --fx-color-brand-600: var(--fx-color-neutral-600);
  --fx-color-brand-700: var(--fx-color-neutral-700);
  --fx-color-brand-800: var(--fx-color-neutral-800);
  --fx-color-brand-900: var(--fx-color-neutral-900);
  --fx-color-brand-950: var(--fx-color-neutral-950);
  --fx-color-pastel-yellow: #F5D77E;
  --fx-color-pastel-pink: #F3BBD4;
  --fx-color-pastel-blue: #AECBF2;
  --fx-color-pastel-coral: #F4A688;
  --fx-color-pastel-green: #BEDDB2;
  --fx-color-pastel-purple: #CFC0F3;
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-brand: var(--fx-color-neutral-900);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-neutral-900);
  --fx-bg-brand-solid-hover: var(--fx-color-neutral-700);
  --fx-bg-brand-subtle: var(--fx-color-neutral-100);
  --fx-bg-rail: var(--fx-color-neutral-950);
  --fx-bg-rail-selected: var(--fx-color-neutral-25);
  --fx-border-color-focus: var(--fx-color-neutral-900);
  --fx-viz-brand: var(--fx-color-neutral-500);
}
[data-fx-theme="amber"], [data-fx-theme="amber"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #FDFBF8;
  --fx-color-neutral-50: #F9F6F3;
  --fx-color-neutral-100: #F2F0ED;
  --fx-color-neutral-200: #E7E4E1;
  --fx-color-neutral-300: #D9D3CD;
  --fx-color-neutral-400: #A8A29C;
  --fx-color-neutral-500: #706B65;
  --fx-color-neutral-600: #58534D;
  --fx-color-neutral-700: #45403B;
  --fx-color-neutral-800: #2B2722;
  --fx-color-neutral-900: #1D1914;
  --fx-color-neutral-950: #15110C;
  --fx-color-brand-50: #FFF3E6;
  --fx-color-brand-100: #FFE5C8;
  --fx-color-brand-200: #F8CD9D;
  --fx-color-brand-300: #E8B273;
  --fx-color-brand-400: #D6933C;
  --fx-color-brand-500: #F59E0B;
  --fx-color-brand-600: #A06604;
  --fx-color-brand-700: #865400;
  --fx-color-brand-800: #6C4301;
  --fx-color-brand-900: #533200;
  --fx-color-brand-950: #382000;
  --fx-color-pastel-yellow: #FED2A0;
  --fx-color-pastel-pink: #FFBBD1;
  --fx-color-pastel-blue: #B3D4FE;
  --fx-color-pastel-coral: #FFC0A9;
  --fx-color-pastel-green: #BBDEA4;
  --fx-color-pastel-purple: #D9C6FF;
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-500);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-600);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="amber"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="amber"][data-fx-scheme="dark"], [data-fx-theme="amber"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-theme="amethyst"], [data-fx-theme="amethyst"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #FBFAFE;
  --fx-color-neutral-50: #F7F6FA;
  --fx-color-neutral-100: #F0EFF3;
  --fx-color-neutral-200: #E4E4E8;
  --fx-color-neutral-300: #D4D3DB;
  --fx-color-neutral-400: #A3A2A9;
  --fx-color-neutral-500: #6C6B72;
  --fx-color-neutral-600: #54535A;
  --fx-color-neutral-700: #414047;
  --fx-color-neutral-800: #28272D;
  --fx-color-neutral-900: #19191E;
  --fx-color-neutral-950: #121116;
  --fx-color-brand-50: #F5F3FF;
  --fx-color-brand-100: #EAE6FF;
  --fx-color-brand-200: #D7CEFE;
  --fx-color-brand-300: #C0B0FF;
  --fx-color-brand-400: #A88DFE;
  --fx-color-brand-500: #9466FF;
  --fx-color-brand-600: #7C3AED;
  --fx-color-brand-700: #693DC2;
  --fx-color-brand-800: #54329B;
  --fx-color-brand-900: #402676;
  --fx-color-brand-950: #2A1A4E;
  --fx-color-pastel-yellow: #F5D983;
  --fx-color-pastel-pink: #FABBDE;
  --fx-color-pastel-blue: #B6D3FF;
  --fx-color-pastel-coral: #FEC0AD;
  --fx-color-pastel-green: #B4DFAA;
  --fx-color-pastel-purple: #D2C8FF;
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-600);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-700);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="amethyst"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="amethyst"][data-fx-scheme="dark"], [data-fx-theme="amethyst"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-theme="emerald"], [data-fx-theme="emerald"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #F8FCFA;
  --fx-color-neutral-50: #F4F8F6;
  --fx-color-neutral-100: #EDF1EF;
  --fx-color-neutral-200: #E2E6E3;
  --fx-color-neutral-300: #CED7D2;
  --fx-color-neutral-400: #9DA5A1;
  --fx-color-neutral-500: #666E6A;
  --fx-color-neutral-600: #4F5652;
  --fx-color-neutral-700: #3C433F;
  --fx-color-neutral-800: #232926;
  --fx-color-neutral-900: #151B18;
  --fx-color-neutral-950: #0D1310;
  --fx-color-brand-50: #DFFEEE;
  --fx-color-brand-100: #CFF4E1;
  --fx-color-brand-200: #B2E3CB;
  --fx-color-brand-300: #8ECEAF;
  --fx-color-brand-400: #63B791;
  --fx-color-brand-500: #32A176;
  --fx-color-brand-600: #059669;
  --fx-color-brand-700: #107250;
  --fx-color-brand-800: #105B40;
  --fx-color-brand-900: #0F4530;
  --fx-color-brand-950: #0B2E20;
  --fx-color-pastel-yellow: #EDDC85;
  --fx-color-pastel-pink: #FDBBD9;
  --fx-color-pastel-blue: #B3D4FE;
  --fx-color-pastel-coral: #FEC0AD;
  --fx-color-pastel-green: #9DE3C1;
  --fx-color-pastel-purple: #D9C6FF;
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-600);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-700);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="emerald"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="emerald"][data-fx-scheme="dark"], [data-fx-theme="emerald"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-theme="hilos"], [data-fx-theme="hilos"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #FAF8F4;
  --fx-color-neutral-50: #F4F1EC;
  --fx-color-neutral-100: #EFEAE3;
  --fx-color-neutral-200: #E9E4DC;
  --fx-color-neutral-300: #D9D4CC;
  --fx-color-neutral-400: #A6A099;
  --fx-color-neutral-500: #706B64;
  --fx-color-neutral-600: #57524C;
  --fx-color-neutral-700: #433F39;
  --fx-color-neutral-800: #2B2721;
  --fx-color-neutral-900: #1F1C18;
  --fx-color-neutral-950: #15130F;
}
[data-fx-theme="ocean"], [data-fx-theme="ocean"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #F9FBFF;
  --fx-color-neutral-50: #F5F7FA;
  --fx-color-neutral-100: #EEF0F4;
  --fx-color-neutral-200: #E3E5E8;
  --fx-color-neutral-300: #D0D4DC;
  --fx-color-neutral-400: #9FA3AA;
  --fx-color-neutral-500: #686C72;
  --fx-color-neutral-600: #51545A;
  --fx-color-neutral-700: #3E4147;
  --fx-color-neutral-800: #25282D;
  --fx-color-neutral-900: #171A1F;
  --fx-color-neutral-950: #0F1217;
  --fx-color-brand-50: #F0F5FF;
  --fx-color-brand-100: #DFEAFF;
  --fx-color-brand-200: #C1D7FF;
  --fx-color-brand-300: #9CBEFE;
  --fx-color-brand-400: #71A1FE;
  --fx-color-brand-500: #4783FF;
  --fx-color-brand-600: #2563EB;
  --fx-color-brand-700: #2858BF;
  --fx-color-brand-800: #204799;
  --fx-color-brand-900: #193674;
  --fx-color-brand-950: #10244D;
  --fx-color-pastel-yellow: #F5D983;
  --fx-color-pastel-pink: #F8BBE1;
  --fx-color-pastel-blue: #BAD2FE;
  --fx-color-pastel-coral: #FEC0AD;
  --fx-color-pastel-green: #B4DFAA;
  --fx-color-pastel-purple: #D5C7FE;
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-600);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-700);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="ocean"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="ocean"][data-fx-scheme="dark"], [data-fx-theme="ocean"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-theme="rose"], [data-fx-theme="rose"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #FEFAFA;
  --fx-color-neutral-50: #FAF5F5;
  --fx-color-neutral-100: #F3EFEF;
  --fx-color-neutral-200: #E8E3E3;
  --fx-color-neutral-300: #DBD1D1;
  --fx-color-neutral-400: #AAA0A0;
  --fx-color-neutral-500: #726969;
  --fx-color-neutral-600: #5A5252;
  --fx-color-neutral-700: #473F3F;
  --fx-color-neutral-800: #2D2626;
  --fx-color-neutral-900: #1E1718;
  --fx-color-neutral-950: #161010;
  --fx-color-brand-50: #FEF2F2;
  --fx-color-brand-100: #FFE1E1;
  --fx-color-brand-200: #FFC5C6;
  --fx-color-brand-300: #FE9FA3;
  --fx-color-brand-400: #FC6E7A;
  --fx-color-brand-500: #ED415A;
  --fx-color-brand-600: #E11D48;
  --fx-color-brand-700: #AE1F39;
  --fx-color-brand-800: #8B1B2E;
  --fx-color-brand-900: #6A1623;
  --fx-color-brand-950: #471017;
  --fx-color-pastel-yellow: #FDD583;
  --fx-color-pastel-pink: #FEBAD6;
  --fx-color-pastel-blue: #B3D4FE;
  --fx-color-pastel-coral: #FFBEBF;
  --fx-color-pastel-green: #B4DFAA;
  --fx-color-pastel-purple: #E0C3FD;
  --fx-text-on-brand: var(--fx-color-white);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-600);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-700);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-600);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="rose"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="rose"][data-fx-scheme="dark"], [data-fx-theme="rose"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-theme="sunset"], [data-fx-theme="sunset"] [data-fx-scheme="light"] {
  --fx-color-neutral-25: #FEFAF8;
  --fx-color-neutral-50: #FAF6F4;
  --fx-color-neutral-100: #F3EFED;
  --fx-color-neutral-200: #E8E3E2;
  --fx-color-neutral-300: #DBD2CF;
  --fx-color-neutral-400: #A9A19E;
  --fx-color-neutral-500: #726A67;
  --fx-color-neutral-600: #5A524F;
  --fx-color-neutral-700: #463F3D;
  --fx-color-neutral-800: #2D2624;
  --fx-color-neutral-900: #1E1816;
  --fx-color-neutral-950: #16100E;
  --fx-color-brand-50: #FEF2EE;
  --fx-color-brand-100: #FEE3D9;
  --fx-color-brand-200: #FEC8B3;
  --fx-color-brand-300: #FFA381;
  --fx-color-brand-400: #F07F53;
  --fx-color-brand-500: #EA580C;
  --fx-color-brand-600: #C34601;
  --fx-color-brand-700: #A23901;
  --fx-color-brand-800: #832D01;
  --fx-color-brand-900: #642305;
  --fx-color-brand-950: #421706;
  --fx-color-pastel-yellow: #FAD683;
  --fx-color-pastel-pink: #FFBAD4;
  --fx-color-pastel-blue: #B3D4FE;
  --fx-color-pastel-coral: #FFC0A9;
  --fx-color-pastel-green: #B4DFAA;
  --fx-color-pastel-purple: #D9C6FF;
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-700);
  --fx-text-on-rail-selected: var(--fx-color-neutral-950);
  --fx-bg-brand-solid: var(--fx-color-brand-500);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-600);
  --fx-bg-brand-subtle: var(--fx-color-brand-50);
  --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950));
  --fx-bg-rail-selected: var(--fx-color-brand-500);
  --fx-border-color-focus: var(--fx-color-brand-500);
  --fx-viz-brand: var(--fx-color-brand-700);
}
@media (prefers-color-scheme: dark) {
  [data-fx-theme="sunset"]:not([data-fx-scheme="light"]) {
    --fx-text-on-brand: var(--fx-color-neutral-950);
    --fx-text-brand: var(--fx-color-brand-300);
    --fx-bg-brand-solid: var(--fx-color-brand-400);
    --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
    --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
    --fx-border-color-focus: var(--fx-color-brand-400);
    --fx-viz-brand: var(--fx-color-brand-400);
  }
}
[data-fx-theme="sunset"][data-fx-scheme="dark"], [data-fx-theme="sunset"] [data-fx-scheme="dark"] {
  --fx-text-on-brand: var(--fx-color-neutral-950);
  --fx-text-brand: var(--fx-color-brand-300);
  --fx-bg-brand-solid: var(--fx-color-brand-400);
  --fx-bg-brand-solid-hover: var(--fx-color-brand-300);
  --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface));
  --fx-border-color-focus: var(--fx-color-brand-400);
  --fx-viz-brand: var(--fx-color-brand-400);
}
[data-fx-body="system"] {
  --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.52;
}
[data-fx-body="google-sans"] {
  --fx-font-family-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.520;
}
[data-fx-body="inter"] {
  --fx-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.520;
}
[data-fx-body="onest"] {
  --fx-font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.514;
}
[data-fx-body="public"] {
  --fx-font-family-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.512;
}
[data-fx-body="source"] {
  --fx-font-family-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-adjust-sans: ex-height 0.520;
}
[data-fx-font="system"] {
  --fx-font-family-display: var(--fx-font-family-sans);
  --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: var(--fx-font-adjust-sans);
  --fx-font-adjust-mono: ex-height 0.52;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-font="condensed"] {
  --fx-font-family-display: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: ex-height 0.520;
  --fx-font-adjust-mono: ex-height 0.520;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-font="editorial"] {
  --fx-font-family-display: "Lora", Georgia, "Times New Roman", serif;
  --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fx-font-family-numeric: var(--fx-font-family-mono);
  --fx-font-adjust-display: ex-height 0.506;
  --fx-font-adjust-mono: ex-height 0.520;
  --fx-font-adjust-numeric: var(--fx-font-adjust-mono);
}
[data-fx-font="friendly"] {
  --fx-font-family-display: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: ex-height 0.520;
  --fx-font-adjust-mono: ex-height 0.520;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-font="grotesk"] {
  --fx-font-family-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: ex-height 0.471;
  --fx-font-adjust-mono: ex-height 0.520;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-font="onest"] {
  --fx-font-family-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: ex-height 0.514;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-font="wide"] {
  --fx-font-family-display: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fx-font-family-numeric: var(--fx-font-family-display);
  --fx-font-adjust-display: ex-height 0.448;
  --fx-font-adjust-mono: ex-height 0.520;
  --fx-font-adjust-numeric: var(--fx-font-adjust-display);
}
[data-fx-personality="hard"] {
  --fx-knob-pill: 0;
  --fx-knob-depth: 1.2;
  --fx-knob-blur: 0.5;
  --fx-knob-motion: 0.85;
  --fx-knob-outline: 1;
  --fx-knob-field-fill: 0;
  --fx-radius-control: 4px;
  --fx-radius-nav: 4px;
  --fx-radius-field-multiline: 4px;
  --fx-radius-surface: 4px;
  --fx-radius-overlay: 8px;
  --fx-radius-badge: 4px;
  --fx-radius-checkbox-ratio: 0.15;
  --fx-size-control-sm: 28px;
  --fx-size-control-md: 32px;
  --fx-size-control-lg: 40px;
}
[data-fx-personality="medium"] {
  --fx-knob-pill: 0;
  --fx-knob-depth: 1;
  --fx-knob-blur: 1;
  --fx-knob-motion: 1;
  --fx-knob-outline: 1;
  --fx-knob-field-fill: 0;
  --fx-radius-control: 8px;
  --fx-radius-nav: 6px;
  --fx-radius-field-multiline: 8px;
  --fx-radius-surface: 12px;
  --fx-radius-overlay: 16px;
  --fx-radius-badge: 6px;
  --fx-radius-checkbox-ratio: 0.25;
  --fx-size-control-sm: 36px;
  --fx-size-control-md: 44px;
  --fx-size-control-lg: 52px;
}
[data-fx-personality="soft"] {
  --fx-knob-pill: 0;
  --fx-knob-depth: 0.9;
  --fx-knob-blur: 2;
  --fx-knob-motion: 1.15;
  --fx-knob-outline: 0;
  --fx-knob-field-fill: 1;
  --fx-radius-control: 12px;
  --fx-radius-nav: 8px;
  --fx-radius-field-multiline: 12px;
  --fx-radius-surface: 14px;
  --fx-radius-overlay: 14px;
  --fx-radius-badge: 999px;
  --fx-radius-checkbox-ratio: 0.34;
}
[data-fx-personality="round"] {
  --fx-knob-pill: 1;
  --fx-knob-depth: 0.9;
  --fx-knob-blur: 2;
  --fx-knob-motion: 1.15;
  --fx-knob-outline: 0;
  --fx-knob-field-fill: 1;
  --fx-radius-control: 12px;
  --fx-radius-nav: 8px;
  --fx-radius-field-multiline: 16px;
  --fx-radius-surface: 14px;
  --fx-radius-overlay: 14px;
  --fx-radius-badge: 999px;
  --fx-radius-checkbox-ratio: 0.34;
}
[data-fx-edge="line"], [data-fx-edge="line"] [data-fx-personality] {
  --fx-knob-outline: 1;
  --fx-knob-depth: 0;
  --fx-knob-field-fill: 0;
}
[data-fx-edge="shadow"], [data-fx-edge="shadow"] [data-fx-personality] {
  --fx-knob-outline: 0;
  --fx-knob-depth: 1;
  --fx-knob-field-fill: 1;
}
[data-fx-density="compact"] {
  --fx-knob-density: 0.82;
}
[data-fx-density="default"] {
  --fx-knob-density: 1;
}
[data-fx-density="comfortable"] {
  --fx-knob-density: 1.18;
}
[data-fx-motion="none"], [data-fx-motion="none"] [data-fx-personality] {
  --fx-knob-motion: 0;
  --fx-knob-motion-press: 0;
  --fx-knob-motion-loop: 0;
  --fx-motion-shift-sm: 0px;
  --fx-motion-shift-md: 0px;
  --fx-motion-shift-lg: 0px;
  --fx-motion-scale-enter: 1;
  --fx-motion-scale-press: 1;
}
[data-fx-motion="calm"] {
  --fx-knob-motion-press: 0;
  --fx-ease-spring: cubic-bezier(0.2, 0, 0, 1);
}
[data-fx-motion="expressive"] {
  --fx-knob-motion-lift: 1;
  --fx-knob-motion-stagger: 1;
}
:root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] {
  --fx-control-h-sm: max(var(--fx-size-min-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density)));
  --fx-control-h-md: max(var(--fx-size-min-target), calc(var(--fx-size-control-md) * var(--fx-knob-density)));
  --fx-control-h-lg: max(var(--fx-size-min-target), calc(var(--fx-size-control-lg) * var(--fx-knob-density)));
  --fx-shadow-sm: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent);
  --fx-shadow-md: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent);
  --fx-shadow-lg: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent), 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 12%), transparent);
  --fx-border-color-surface: color-mix(in oklab, var(--fx-border-color-default) calc(var(--fx-knob-outline) * 100%), transparent);
  --fx-bg-field: color-mix(in oklab, var(--fx-bg-muted) calc(var(--fx-knob-field-fill) * 100%), var(--fx-bg-surface));
  --fx-border-color-field: color-mix(in oklab, var(--fx-border-color-default) calc((1 - var(--fx-knob-field-fill)) * 100%), transparent);
  --fx-motion-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion));
  --fx-motion-base: calc(var(--fx-duration-base) * var(--fx-knob-motion));
  --fx-motion-slow: calc(var(--fx-duration-slow) * var(--fx-knob-motion));
  --fx-motion-instant: calc(var(--fx-duration-instant) * var(--fx-knob-motion));
  --fx-motion-slower: calc(var(--fx-duration-slower) * var(--fx-knob-motion));
  --fx-motion-exit-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion) * 0.7);
  --fx-motion-exit-base: calc(var(--fx-duration-base) * var(--fx-knob-motion) * 0.7);
  --fx-motion-exit-slow: calc(var(--fx-duration-slow) * var(--fx-knob-motion) * 0.7);
  --fx-motion-press: calc(1 - (1 - var(--fx-motion-scale-press)) * var(--fx-knob-motion-press));
}
@media (pointer: coarse) {
  :root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] {
    --fx-control-h-sm: max(var(--fx-size-touch-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density)));
    --fx-control-h-md: max(var(--fx-size-touch-target), calc(var(--fx-size-control-md) * var(--fx-knob-density)));
  }
}
}

@layer fx.base {
  .fx-assistant [hidden]:not([hidden="until-found"]), .fx-assistant[hidden] { display: none !important; }
  .fx-assistant { font-family: var(--fx-font-family-sans); line-height: 1.5; }
  .fx-assistant *, .fx-assistant *::before, .fx-assistant *::after { box-sizing: border-box; }
  @keyframes fx-pulse { 50% { opacity: 0.35; } }
  @keyframes fx-spin { to { rotate: 1turn; } }
  @keyframes fx-fade-in { from { opacity: 0; } }
  @keyframes fx-shimmer-text { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @keyframes fx-stagger-in { from { opacity: 0; translate: 0 var(--fx-motion-shift-md); } }
  @keyframes fx-glow-spin { to { --fx-glow-angle: 360deg; } }
}
@layer fx.components {
  .fx-btn {
    --_h: var(--fx-control-h-md);
    --_fg: var(--fx-text-primary);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fx-space-2);
    block-size: var(--_h);
    padding-inline: var(--fx-space-4);
    border: var(--fx-border-width-default) solid var(--fx-border-color-strong);
    /* FX-SHAPE-02: pill = balandlik / 2, komponent ichida hisoblanadi */
    border-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control));
    font: inherit;
    font-size: var(--fx-font-size-sm);
    font-weight: var(--fx-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    background: var(--fx-bg-surface);
    color: var(--_fg);
    transition: background-color var(--fx-motion-fast) var(--fx-ease-standard),
      border-radius var(--fx-motion-base) var(--fx-ease-standard),
      block-size var(--fx-motion-base) var(--fx-ease-standard),
      scale var(--fx-motion-instant) var(--fx-ease-standard);
  }
  .fx-btn:hover { background: var(--fx-bg-subtle); }
  .fx-btn:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { scale: var(--fx-motion-press); }
  .fx-btn:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .fx-btn > svg { flex: none; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); }
  .fx-btn[data-variant="primary"] { --_fg: var(--fx-text-on-brand); background: var(--fx-bg-brand-solid); border-color: transparent; }
  .fx-btn[data-variant="primary"]:hover { background: var(--fx-bg-brand-solid-hover); }
  .fx-btn[data-variant="ghost"] { background: transparent; border-color: transparent; }
  .fx-btn[data-variant="ghost"]:hover { background: var(--fx-bg-muted); }
  .fx-btn[data-variant="danger"] { --_fg: var(--fx-text-on-error); background: var(--fx-bg-error-solid); border-color: transparent; }
  .fx-btn[data-variant="danger"]:hover { background: color-mix(in oklab, var(--fx-bg-error-solid) 88%, var(--fx-text-primary)); }
  /* Havola koʻrinishidagi tugma: amal, lekin matn kabi (masalan, «Barchasini koʻrish») */
  .fx-btn[data-variant="link"] { --_h: auto; --_fg: var(--fx-text-brand); padding: 0; border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: var(--fx-space-1); }
  .fx-btn[data-variant="link"]:hover { background: transparent; text-decoration-color: currentColor; }
  .fx-btn[data-size="sm"] { --_h: var(--fx-control-h-sm); padding-inline: var(--fx-space-3); }
  .fx-btn[data-size="lg"] { --_h: var(--fx-control-h-lg); padding-inline: var(--fx-space-5); font-size: var(--fx-font-size-md); }
  /* Faqat ikonka: kvadrat (Aylana uslubida — doira); nomi aria-label’da */
  .fx-btn[data-shape="icon"] { inline-size: var(--_h); padding-inline: 0; }
  .fx-btn[data-width="full"] { inline-size: 100%; }
  /* Bosilgan holat (yoqish tugmasi): aria-pressed */
  .fx-btn[aria-pressed="true"] { background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); border-color: transparent; }
  .fx-btn:disabled, .fx-btn[aria-disabled="true"] { --_fg: var(--fx-text-disabled); cursor: not-allowed; background: var(--fx-bg-muted); border-color: transparent; }
  /* Yuklanmoqda: matn joyida qoladi (tugma eni sakramaydi), ustida aylana; reduced-motion’da faqat pulsatsiya */
  .fx-btn[aria-busy="true"] { color: transparent; cursor: progress; }
  .fx-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--fx-size-icon-sm);
    block-size: var(--fx-size-icon-sm);
    border: var(--fx-border-width-focus) solid var(--_fg);
    border-inline-end-color: transparent;
    border-radius: var(--fx-radius-circle);
    animation: fx-spin var(--fx-duration-spin) linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .fx-btn[aria-busy="true"]::after { animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; }
    .fx-btn:active { scale: none; }
  }
  /* expressive: oxirgi ikonka (strelka) hover’da biroz oldinga turtiladi */
  .fx-btn > svg:last-child:not(:first-child) { transition: translate var(--fx-motion-fast) var(--fx-ease-spring); }
  .fx-btn:hover > svg:last-child:not(:first-child) { translate: calc(var(--fx-space-1) / 2 * var(--fx-knob-motion-lift)) 0; }

  /* --- Kengaytma (2.1–2.14) --- */
  /* xs / xl o‘lchamlar: jadval ichi va hero */
  .fx-btn[data-size="xs"] { --_h: var(--fx-size-min-target); padding-inline: var(--fx-space-2); font-size: var(--fx-font-size-xs); gap: var(--fx-space-1); }
  .fx-btn[data-size="xl"] { --_h: calc(var(--fx-control-h-lg) * 1.2); padding-inline: var(--fx-space-6); font-size: var(--fx-font-size-lg); }
  /* Tonal: brend rangining och foni (primary’dan yengil) */
  .fx-btn[data-variant="tonal"] { --_fg: var(--fx-text-brand); background: var(--fx-bg-brand-subtle); border-color: transparent; }
  .fx-btn[data-variant="tonal"]:hover { background: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); }
  /* Outline: brend chegarali, foni yo‘q */
  .fx-btn[data-variant="outline"] { --_fg: var(--fx-text-brand); background: transparent; border-color: currentColor; }
  .fx-btn[data-variant="outline"]:hover { background: var(--fx-bg-brand-subtle); }
  /* Danger-ghost / danger-outline: jadvaldagi «O‘chirish» — xavfli, lekin baqiroq emas */
  .fx-btn[data-variant="danger-ghost"] { --_fg: var(--fx-fg-error); background: transparent; border-color: transparent; }
  .fx-btn[data-variant="danger-ghost"]:hover { background: var(--fx-bg-error-subtle); }
  .fx-btn[data-variant="danger-outline"] { --_fg: var(--fx-fg-error); background: transparent; border-color: currentColor; }
  .fx-btn[data-variant="danger-outline"]:hover { background: var(--fx-bg-error-subtle); }
  .fx-btn:is([data-variant="tonal"], [data-variant="outline"], [data-variant="danger-ghost"], [data-variant="danger-outline"]):is(:disabled, [aria-disabled="true"]) { --_fg: var(--fx-text-disabled); background: var(--fx-bg-muted); border-color: transparent; }
  /* Menyu tugmasi: ▾ chevron, menyu ochiq bo‘lsa 180° buriladi */
  .fx-btn__chev { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); }
  .fx-btn:hover > svg.fx-btn__chev:last-child:not(:first-child) { translate: none; }
  .fx-btn[aria-expanded="true"] .fx-btn__chev { rotate: 180deg; }
  /* Tugma ichidagi kbd / son: o‘ng chetda */
  .fx-btn > :is(.fx-kbd, .fx-badge) { margin-inline-end: calc(var(--fx-space-1) * -1); }
  .fx-btn > .fx-kbd { background: transparent; color: inherit; opacity: 0.8; }
  /* Ikon almashinuvi: aria-pressed=true bo‘lsa .fx-btn__on ko‘rinadi, .fx-btn__off yashiriladi */
  .fx-btn__on { display: none; }
  .fx-btn[aria-pressed="true"] > .fx-btn__on { display: inline-block; }
  .fx-btn[aria-pressed="true"] > .fx-btn__off { display: none; }
  /* Yuklanish, matn saqlanadi: spinner matn yonida (data-loading="text") */
  .fx-btn[aria-busy="true"][data-loading="text"] { color: var(--_fg); }
  .fx-btn[aria-busy="true"][data-loading="text"]::after { position: static; margin: 0; flex: none; order: -1; }
  /* Havola-tugma: o‘chirilgan bo‘lsa bosilmaydi */
  a.fx-btn[aria-disabled="true"] { pointer-events: none; }
  /* Fokus: ichki halqa (qirqiladigan konteyner, guruh ichida) */
  .fx-btn[data-focus="inset"]:focus-visible { outline-offset: calc(var(--fx-border-width-focus) * -1); }
  /* Kichik tugmada bosish maydoni kengayadi (WCAG 2.5.8): ko‘rinish o‘zgarmaydi */
  .fx-btn:is([data-size="xs"], [data-size="sm"], [data-shape="icon"])::before { content: ""; position: absolute; inset: calc(var(--fx-space-1) * -1); }

  /* Tugmalar guruhi (yopishgan): ichki burchaklar 0, chegaralar birlashadi. data-orientation="vertical", data-fill */
  .fx-btn-group { display: inline-flex; isolation: isolate; }
  .fx-btn-group > .fx-btn { border-radius: 0; }
  .fx-btn-group > .fx-btn:first-child { border-start-start-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); border-end-start-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); }
  .fx-btn-group > .fx-btn:last-child { border-start-end-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); border-end-end-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); }
  .fx-btn-group > .fx-btn + .fx-btn { margin-inline-start: calc(var(--fx-border-width-default) * -1); }
  .fx-btn-group > .fx-btn:is(:hover, :focus-visible, [aria-pressed="true"]) { z-index: 1; }
  /* Split: asosiy amal + ▾; bir xil to‘la rangli qismlar orasida ingichka ajratgich */
  .fx-btn-group > .fx-btn:is([data-variant="primary"], [data-variant="danger"]) + .fx-btn:is([data-variant="primary"], [data-variant="danger"]) { border-inline-start: var(--fx-border-width-default) solid color-mix(in oklab, var(--_fg) 35%, transparent); }
  .fx-btn-group > .fx-btn[data-shape="icon"] { inline-size: auto; padding-inline: var(--fx-space-2); }
  .fx-btn-group[data-orientation="vertical"] { flex-direction: column; }
  .fx-btn-group[data-orientation="vertical"] > .fx-btn:is(:first-child, :last-child) { border-radius: 0; }
  .fx-btn-group[data-orientation="vertical"] > .fx-btn:first-child { border-start-start-radius: var(--fx-radius-control); border-start-end-radius: var(--fx-radius-control); }
  .fx-btn-group[data-orientation="vertical"] > .fx-btn:last-child { border-end-start-radius: var(--fx-radius-control); border-end-end-radius: var(--fx-radius-control); }
  .fx-btn-group[data-orientation="vertical"] > .fx-btn + .fx-btn { margin-inline-start: 0; margin-block-start: calc(var(--fx-border-width-default) * -1); }
  .fx-btn-group[data-fill] { display: flex; }
  .fx-btn-group[data-fill] > .fx-btn { flex: 1; }
}

@layer fx.components {
  /* Chip: filtr (bosiladi, aria-pressed) yoki teg (× bilan olib tashlanadi). Tanlangani — teskari: fon asosiy matn rangi,
     matn sahifa foni (WDS «Rang»: och tus tanlov uchun sezilmaydi). Ichidagi son — alohida xira belgi. */
  .fx-chip {
    --_h: calc(var(--fx-control-h-sm) - var(--fx-space-2));
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: var(--fx-space-1);
    block-size: var(--_h);
    padding-inline: var(--fx-space-3);
    border: var(--fx-border-width-default) solid var(--fx-border-color-default);
    border-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-badge));
    background: var(--fx-bg-surface);
    color: var(--fx-text-secondary);
    font: inherit;
    font-size: var(--fx-font-size-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), color var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-instant) var(--fx-ease-standard);
  }
  .fx-chip:hover { background: var(--fx-bg-subtle); color: var(--fx-text-primary); }
  .fx-chip:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  .fx-chip[aria-pressed="true"] { border-color: transparent; background: var(--fx-text-primary); color: var(--fx-bg-page); }
  .fx-chip__count { padding-inline: var(--fx-space-1); border-radius: var(--fx-radius-badge); background: color-mix(in oklab, currentColor 10%, transparent); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  .fx-chip__remove { display: inline-grid; place-items: center; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-inline-end: calc(var(--fx-space-1) * -1); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; opacity: 0.6; }
  .fx-chip__remove:hover { opacity: 1; background: color-mix(in oklab, currentColor 12%, transparent); }
  .fx-chip[data-type="tag"] { cursor: default; background: var(--fx-bg-muted); border-color: transparent; color: var(--fx-text-primary); }
  button.fx-chip:active:not(:disabled) { scale: var(--fx-motion-press); }
  /* ---- Kengaytma (2.57–2.60, 2.155): avatarli chip, filtr-dropdown chevron, assist/suggestion, chip guruhi, bosish maydoni ---- */
  .fx-chip { position: relative; }
  .fx-chip::before { content: ""; position: absolute; inset-inline: 0; inset-block: min(0px, calc((var(--_h) - var(--fx-size-min-target)) / 2)); }
  .fx-chip > .fx-avatar { --_s: calc(var(--_h) - var(--fx-space-1)); margin-inline-start: calc(var(--fx-space-3) * -0.5); font-size: calc(var(--fx-font-size-xs) * 0.55); }
  .fx-chip > .fx-avatar[data-status]::after { display: none; }
  .fx-chip > svg { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* Filtr chip + dropdown (“Holat ▾”): aria-haspopup boʻlsa chevron, ochiqda 180° */
  .fx-chip[aria-haspopup]::after { content: ""; flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-inline-end: calc(var(--fx-space-1) * -1); background: currentColor; opacity: 0.6; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--fx-motion-base) var(--fx-ease-standard); }
  .fx-chip[aria-haspopup][aria-expanded="true"]::after { rotate: 180deg; }
  /* Assist (amalga yoʻnaltiradi, oldida ikon) va suggestion (tayyor taklif) turlari */
  .fx-chip[data-type="assist"] { background: var(--fx-bg-subtle); color: var(--fx-text-primary); }
  .fx-chip[data-type="assist"] > svg:first-child { color: var(--fx-text-brand); }
  .fx-chip[data-type="suggestion"]:not([aria-pressed="true"]) { border-color: transparent; background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }
  .fx-chip[data-type="suggestion"]:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); }
  /* Guruh: oʻrash (standart), bitta qatorda surish (scroll), eng koʻp koʻrinadigan son + “+N” chip (data-more) */
  .fx-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); min-inline-size: 0; }
  .fx-chip-group[data-overflow="scroll"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .fx-chip-group[data-overflow="scroll"] > .fx-chip { flex: none; scroll-snap-align: start; }
  .fx-chip-group[data-max="3"] > .fx-chip:nth-child(n + 4):not([data-more]),
  .fx-chip-group[data-max="4"] > .fx-chip:nth-child(n + 5):not([data-more]),
  .fx-chip-group[data-max="5"] > .fx-chip:nth-child(n + 6):not([data-more]),
  .fx-chip-group[data-max="6"] > .fx-chip:nth-child(n + 7):not([data-more]) { display: none; }
  .fx-chip[data-more] { border-style: dashed; color: var(--fx-text-tertiary); }
  @media (forced-colors: active) {
    .fx-chip[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
    .fx-chip[data-type="tag"] { border-color: ButtonText; }
  }
}

@layer fx.components {
  /* Suhbat xabari (odam yoki AI agent): avatar, ism va vaqt, matn; foydalanuvchi xabari oʻngda brend tusida.
     «Yozmoqda» — uch nuqta, faqat shaffoflik (WDS «Harakat»). */
  .fx-message { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-1) var(--fx-space-3); align-items: start; max-inline-size: 72ch; }
  .fx-message > .fx-avatar { grid-row: span 2; }
  .fx-message__meta { display: flex; align-items: baseline; gap: var(--fx-space-2); font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
  .fx-message__name { color: var(--fx-text-primary); font-weight: var(--fx-font-weight-semibold); font-size: var(--fx-font-size-sm); }
  .fx-message__body { color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); line-height: 1.6; overflow-wrap: anywhere; }
  .fx-message__body > :first-child { margin-block-start: 0; }
  .fx-message__body > :last-child { margin-block-end: 0; }
  .fx-message[data-role="user"] { grid-template-columns: minmax(0, 1fr); justify-items: end; margin-inline-start: auto; }
  .fx-message[data-role="user"] .fx-message__body { padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-surface); border-end-end-radius: var(--fx-radius-badge); background: var(--fx-bg-brand-subtle); }
  .fx-typing { display: inline-flex; gap: var(--fx-space-1); padding-block: var(--fx-space-2); }
  .fx-typing > i { inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); border-radius: var(--fx-radius-circle); background: var(--fx-text-tertiary); animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; }
  .fx-typing > i:nth-child(2) { animation-delay: calc(var(--fx-duration-pulse) / 6); }
  .fx-typing > i:nth-child(3) { animation-delay: calc(var(--fx-duration-pulse) / 3); }
  @media (prefers-reduced-motion: reduce) { .fx-typing > i { animation: none; } }
  /* AI yorligʻi: kontent AI tomonidan yaratilgani — binafsha toifa tusi (Atlassian «discovery» kabi) */
  .fx-ai-label { display: inline-flex; align-items: center; gap: var(--fx-space-1); padding: calc(var(--fx-space-1) / 2) var(--fx-space-2); border-radius: var(--fx-radius-badge); background: var(--fx-bg-category-purple-subtle); color: var(--fx-text-primary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); }
  .fx-ai-label::before { content: "✦"; color: var(--fx-text-brand); }

  /* ---------- Pufakcha varianti (messenjer; PDP Chat): data-variant="bubble" + data-dir="in|out" + data-group="first|mid|last" ----------
     Kiruvchi — neytral quduq, avatar faqat guruh oxirida; chiquvchi — mavzuning och brend tusi + siyoh matn (oq/yashil emas — kontrast).
     Guruhda yaqin burchaklar kichrayadi, oraliq 2 vs 12. Vaqt va yuborish belgisi pufakcha oxirida, matn oqimida. */
  .fx-message[data-variant="bubble"] { --_r: var(--fx-radius-overlay); --_rs: calc(var(--fx-radius-badge) / 1.5); grid-template-columns: var(--fx-size-avatar-md) minmax(0, max-content); column-gap: var(--fx-space-2); max-inline-size: min(78%, 64ch); margin-block-start: var(--fx-space-3); }
  .fx-message[data-variant="bubble"]:is([data-group="mid"], [data-group="last"]) { margin-block-start: calc(var(--fx-space-1) / 2); }
  .fx-message[data-variant="bubble"] > .fx-avatar { grid-row: 1 / span 3; align-self: end; }
  .fx-message[data-variant="bubble"]:is([data-group="first"], [data-group="mid"]) > .fx-avatar { visibility: hidden; }
  .fx-message[data-variant="bubble"] .fx-message__body { grid-column: 2; padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--_r); background: var(--fx-bg-muted); }
  .fx-message[data-variant="bubble"][data-dir="in"]:is([data-group="first"]) .fx-message__body { border-end-start-radius: var(--_rs); }
  .fx-message[data-variant="bubble"][data-dir="in"][data-group="mid"] .fx-message__body { border-start-start-radius: var(--_rs); border-end-start-radius: var(--_rs); }
  .fx-message[data-variant="bubble"][data-dir="in"][data-group="last"] .fx-message__body { border-start-start-radius: var(--_rs); }
  .fx-message[data-variant="bubble"] .fx-message__name { grid-column: 2; font-size: var(--fx-font-size-xs); }
  .fx-message[data-variant="bubble"][data-dir="out"] { grid-template-columns: minmax(0, max-content); justify-content: end; margin-inline-start: auto; }
  .fx-message[data-variant="bubble"][data-dir="out"] .fx-message__body { grid-column: 1; background: var(--fx-bg-brand-subtle); }
  .fx-message[data-variant="bubble"][data-dir="out"][data-group="first"] .fx-message__body { border-end-end-radius: var(--_rs); }
  .fx-message[data-variant="bubble"][data-dir="out"][data-group="mid"] .fx-message__body { border-start-end-radius: var(--_rs); border-end-end-radius: var(--_rs); }
  .fx-message[data-variant="bubble"][data-dir="out"][data-group="last"] .fx-message__body { border-start-end-radius: var(--_rs); }
  .fx-message__time { float: inline-end; display: inline-flex; align-items: center; gap: calc(var(--fx-space-1) / 2); margin: var(--fx-space-1) 0 0 var(--fx-space-3); color: var(--fx-text-tertiary); font-size: calc(var(--fx-font-size-xs) * 0.92); font-variant-numeric: tabular-nums; line-height: 1; }
  /* yuborish holati: soat → ✓ → ✓✓ → ✓✓ brend; xato — soʻz bilan */
  .fx-message__tick { inline-size: var(--fx-size-icon-sm); block-size: calc(var(--fx-size-icon-sm) * 0.75); background: currentColor; mask: center / contain no-repeat; }
  .fx-message__tick[data-s="sending"] { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Ccircle cx='8' cy='6' r='4.5' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M8 3.8V6l1.4 1' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .fx-message__tick[data-s="sent"] { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M3 6.5 6 9l6-6.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .fx-message__tick:is([data-s="delivered"], [data-s="read"]) { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6.5 4 9l6-6.5M7 8.5l.5.5 6-6.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .fx-message__tick[data-s="read"] { color: var(--fx-text-brand); }
  .fx-message__error { display: flex; align-items: center; gap: var(--fx-space-2); grid-column: 1 / -1; justify-self: end; color: var(--fx-fg-error); font-size: var(--fx-font-size-xs); }
  /* iqtibos, yoʻnaltirilgan, oʻchirilgan, tahrirlangan */
  .fx-message__quote { display: grid; margin-block-end: var(--fx-space-1); padding: var(--fx-space-1) var(--fx-space-2); border-inline-start: calc(var(--fx-border-width-focus) * 1.25) solid var(--fx-text-brand); border-radius: var(--fx-radius-badge); background: color-mix(in oklab, var(--fx-bg-surface) 55%, transparent); font-size: var(--fx-font-size-xs); }
  .fx-message__quote > b { color: var(--fx-text-brand); }
  .fx-message__fwd { margin-block-end: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-style: italic; }
  .fx-message[data-deleted] .fx-message__body { color: var(--fx-text-tertiary); font-style: italic; }
  /* fayl, rasm, ovozli xabar */
  .fx-message__file { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--fx-space-3); padding: var(--fx-space-2); border-radius: var(--fx-radius-control); background: color-mix(in oklab, var(--fx-bg-surface) 60%, transparent); color: inherit; text-decoration: none; }
  .fx-message__file > :first-child { display: grid; place-items: center; inline-size: var(--fx-control-h-md); block-size: var(--fx-control-h-md); grid-row: span 2; border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); }
  .fx-message__file small { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .fx-message__media { display: block; inline-size: min(100%, calc(var(--fx-space-12) * 6)); aspect-ratio: 4 / 3; margin: calc(var(--fx-space-1) * -1) calc(var(--fx-space-2) * -1) var(--fx-space-1); border-radius: calc(var(--fx-radius-overlay) - var(--fx-space-1)); object-fit: cover; background: var(--fx-bg-subtle); }
  .fx-message__voice { display: flex; align-items: center; gap: var(--fx-space-2); min-inline-size: calc(var(--fx-space-12) * 4); }
  .fx-message__voice > button { display: grid; place-items: center; inline-size: var(--fx-control-h-sm); block-size: var(--fx-control-h-sm); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); cursor: pointer; }
  .fx-message__voice > button > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: currentColor; }
  .fx-message__wave { flex: 1; block-size: var(--fx-space-6); background: repeating-linear-gradient(90deg, var(--fx-text-secondary) 0 2px, transparent 2px 5px); mask: linear-gradient(transparent 0 0) , url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12h4V8h4v8h4V4h4v16h4V9h4v6h4V2h4v20h4V7h4v10h4V5h4v14h4V9h4v6h4V3h4v18h4V8h4v8h4V10h4v4h4V6h4v12h4V9h4v6h4' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask-composite: add; opacity: 0.7; }
  /* reaksiyalar: pill (ikon + son), meniki — brend */
  .fx-reactions { display: flex; flex-wrap: wrap; gap: var(--fx-space-1); grid-column: 2; margin-block-start: var(--fx-space-1); }
  .fx-message[data-dir="out"] .fx-reactions { grid-column: 1; justify-content: end; }
  .fx-reaction { display: inline-flex; align-items: center; gap: var(--fx-space-1); min-block-size: var(--fx-space-6); padding: 0 var(--fx-space-2); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-circle); background: var(--fx-bg-surface); color: var(--fx-text-secondary); font: inherit; font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-instant) var(--fx-ease-standard); }
  .fx-reaction:active { scale: var(--fx-motion-press); }
  .fx-reaction[aria-pressed="true"] { border-color: var(--fx-border-color-focus); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); }
  /* ajratgichlar: sana pill, tizim xabari, «Oʻqilmaganlar» chizigʻi */
  .fx-message-divider { display: flex; align-items: center; gap: var(--fx-space-3); margin-block: var(--fx-space-4); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .fx-message-divider[data-type="date"] { justify-content: center; }
  .fx-message-divider[data-type="date"] > span { padding: var(--fx-space-1) var(--fx-space-3); border-radius: var(--fx-radius-circle); background: var(--fx-bg-muted); color: var(--fx-text-secondary); font-weight: var(--fx-font-weight-medium); }
  .fx-message-divider[data-type="system"] { justify-content: center; text-align: center; }
  .fx-message-divider[data-type="unread"] { color: var(--fx-text-brand); font-weight: var(--fx-font-weight-semibold); }
  .fx-message-divider[data-type="unread"]::before, .fx-message-divider[data-type="unread"]::after { content: ""; flex: 1; block-size: var(--fx-border-width-default); background: currentColor; opacity: 0.5; }

  /* ---- Kengaytma (2.149): ketma-ket xabar (avatarsiz), variantlar “2/3”, tahrirlash, xato+qayta urinish, matn ichida kod va jadval ---- */
  .fx-message:not([data-variant="bubble"])[data-group="cont"] { grid-template-columns: minmax(0, 1fr); padding-inline-start: calc(var(--fx-size-avatar-md) + var(--fx-space-3)); margin-block-start: calc(var(--fx-space-2) * -1); }
  .fx-message:not([data-variant="bubble"])[data-group="cont"] > :is(.fx-avatar, .fx-message__meta) { display: none; }
  .fx-message:not([data-variant="bubble"])[data-group="cont"][data-role="user"] { padding-inline-start: 0; }
  /* Variantlar: ‹ 2/3 › */
  .fx-message__variants { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; }
  .fx-message__variants > button { display: grid; place-items: center; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); padding: 0; border: 0; border-radius: var(--fx-radius-badge); background: none; color: inherit; font: inherit; cursor: pointer; }
  .fx-message__variants > button:hover:not(:disabled) { background: var(--fx-bg-muted); color: var(--fx-text-primary); }
  .fx-message__variants > button:disabled { opacity: 0.4; cursor: not-allowed; }
  .fx-message__variants > button:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); }
  /* Tahrirlash rejimi (data-state="editing"): matn maydoniga aylanadi */
  .fx-message[data-state="editing"] .fx-message__body { min-inline-size: calc(var(--fx-space-12) * 5); padding: var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-focus); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); }
  .fx-message[data-state="editing"] .fx-message__body:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); }
  /* Xato + “Qayta urinish” */
  .fx-message[data-state="error"] .fx-message__body { border: var(--fx-border-width-default) solid var(--fx-border-color-error); border-radius: var(--fx-radius-surface); padding: var(--fx-space-2) var(--fx-space-3); }
  .fx-message__retry { padding: 0; border: 0; border-radius: var(--fx-radius-badge); background: none; color: var(--fx-text-brand); font: inherit; font-weight: var(--fx-font-weight-medium); text-decoration: underline; text-underline-offset: calc(var(--fx-space-1) * 0.75); cursor: pointer; }
  .fx-message__retry:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  /* Matn ichida kod bloki, inline kod va jadval */
  .fx-message__body :is(pre, code) { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); }
  .fx-message__body code { padding: calc(var(--fx-space-1) / 2) var(--fx-space-1); border-radius: var(--fx-radius-badge); background: var(--fx-bg-muted); }
  .fx-message__body pre { margin: var(--fx-space-2) 0; padding: var(--fx-space-3) var(--fx-space-4); overflow-x: auto; border-radius: var(--fx-radius-control); background: var(--fx-bg-muted); line-height: 1.5; tab-size: 2; }
  .fx-message__body pre code { padding: 0; background: none; }
  .fx-message__body table { display: block; max-inline-size: 100%; overflow-x: auto; margin: var(--fx-space-2) 0; border-collapse: collapse; font-size: var(--fx-font-size-xs); }
  .fx-message__body :is(th, td) { padding: var(--fx-space-1) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); text-align: start; }
  .fx-message__body th { background: var(--fx-bg-subtle); font-weight: var(--fx-font-weight-semibold); }
  @media (forced-colors: active) { .fx-message[data-variant="bubble"] .fx-message__body { border: var(--fx-border-width-default) solid CanvasText; } }
}

@layer fx.components {
  /* AI yordamchi widget’i («Guli saytda»): oʻng pastda dumaloq tugma (personaj sloti) → suhbat oynasi. Har sayt — sozlama (nom, rang,
     endpoint, til). Holatlar: idle · open · sending · error · handoff (menejerga — Telegram/telefon). Telefonda (< 640 px) — toʻliq ekran.
     Personaj: tinch holatda yengil «nafas», sahifada bir marta qoʻl silkitadi (data-mascot="wave"); harakat kamaytirilsa — yoʻq. */
  .fx-assistant { --_c: var(--fx-bg-brand-solid); --_edge: var(--fx-space-5); position: fixed; inset: auto max(var(--_edge), env(safe-area-inset-right, 0px)) max(var(--_edge), env(safe-area-inset-bottom, 0px)) auto; z-index: 50; display: grid; justify-items: end; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); color: var(--fx-text-primary); }
  /* och doira (data-color="light") — qora konturli personaj ikkala rejimda ham aniq koʻrinsin */
  .fx-assistant[data-color="light"] { --_c: var(--fx-bg-static-light); }
  .fx-assistant[data-color="light"] :is(.fx-assistant__launcher, .fx-assistant__avatar) { color: var(--fx-text-on-static-light); }
  .fx-assistant > .fx-assistant__mascot { display: none; } /* manba — JS nusxa oladi */
  .fx-assistant__launcher {
    position: relative; display: grid; place-items: center; inline-size: calc(var(--fx-space-12) + var(--fx-space-2)); block-size: calc(var(--fx-space-12) + var(--fx-space-2)); padding: 0; border: 0; border-radius: var(--fx-radius-circle);
    background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); box-shadow: var(--fx-shadow-lg); cursor: pointer;
    transition: scale var(--fx-motion-instant) var(--fx-ease-standard), translate var(--fx-motion-base) var(--fx-ease-spring);
  }
  .fx-assistant__launcher:hover { translate: 0 calc(var(--fx-space-1) * -0.5); }
  .fx-assistant__launcher:active { scale: var(--fx-motion-press); }
  .fx-assistant__launcher:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  .fx-assistant__launcher > .fx-assistant__face { position: absolute; inset: var(--fx-space-1); inline-size: calc(100% - var(--fx-space-1) * 2); block-size: calc(100% - var(--fx-space-1) * 2); border-radius: var(--fx-radius-circle); object-fit: cover; }
  .fx-assistant__launcher > .fx-assistant__face:not(img, svg, canvas) { display: grid; place-items: center; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .fx-assistant__icon { display: none; }
  .fx-assistant[data-state="open"] .fx-assistant__launcher > .fx-assistant__face, .fx-assistant[data-state="sending"] .fx-assistant__launcher > .fx-assistant__face { opacity: 0; }
  .fx-assistant:is([data-state="open"], [data-state="sending"]) .fx-assistant__icon { display: grid; }
  .fx-assistant__icon > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); }
  .fx-assistant__glyph > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); }
  .fx-assistant__badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); border-radius: var(--fx-radius-circle); background: var(--fx-bg-error-solid); color: var(--fx-text-on-error); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); line-height: var(--fx-size-icon-md); outline: var(--fx-border-width-focus) solid var(--fx-bg-page); }
  /* personaj harakati: tinch «nafas» (loop knob), bir martalik qoʻl silkitish; tab yashirinsa — pauza */
  .fx-assistant[data-mascot="idle"] .fx-assistant__launcher > .fx-assistant__face { animation: fx-assistant-breath calc(var(--fx-duration-pulse) * 2.5) var(--fx-ease-standard) infinite; }
  .fx-assistant[data-mascot="wave"] .fx-assistant__launcher > .fx-assistant__face { transform-origin: 70% 90%; animation: fx-assistant-wave calc(var(--fx-motion-slow) * 4) var(--fx-ease-standard) 1; }
  .fx-assistant[data-paused] .fx-assistant__launcher > .fx-assistant__face { animation-play-state: paused; }
  /* ichki SVG animatsiyalari ham: tab yashirin yoki oyna ochiq (tugmadagi personaj koʻrinmaydi) — pauza, CPU tejaladi */
  .fx-assistant:is([data-paused], [data-state="open"], [data-state="sending"]) .fx-assistant__launcher > .fx-assistant__face :is(*, *::before, *::after) { animation-play-state: paused !important; }
  .fx-assistant[data-paused] .fx-assistant__avatar :is(*, *::before, *::after) { animation-play-state: paused !important; }
  .fx-assistant[data-mascot="thinking"] .fx-assistant__launcher > .fx-assistant__face { animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; }
  .fx-assistant[data-mascot="talking"] .fx-assistant__launcher > .fx-assistant__face { animation: fx-assistant-breath var(--fx-motion-slow) var(--fx-ease-spring) 2; }
  /* jonli personaj (inline SVG) oʻzi harakatlanadi — tashqi tebranish ikkilanmasin; holatni .salom/.oylayapti/.gapiryapti/.uzatyapti sinflari beradi */
  .fx-assistant:is([data-mascot="idle"], [data-mascot="wave"], [data-mascot="thinking"], [data-mascot="talking"], [data-mascot="handoff"]) .fx-assistant__launcher > svg.fx-assistant__face { animation: none; }
  /* holat nuqtasi: xato — qizil, menejerga oʻtkazildi — ogohlantirish */
  .fx-assistant[data-state="error"] .fx-assistant__who small::before { background: var(--fx-fg-error); }
  .fx-assistant[data-state="handoff"] .fx-assistant__who small::before { background: var(--fx-fg-warning); }
  @keyframes fx-assistant-breath { 50% { scale: 1.04; } }
  @keyframes fx-assistant-wave { 15%, 45% { rotate: -12deg; } 30%, 60% { rotate: 10deg; } 75% { rotate: 0deg; } }
  @media (prefers-reduced-motion: reduce) { .fx-assistant__launcher > .fx-assistant__face { animation: none !important; } }
  /* salom pufakchasi */
  .fx-assistant__greet { display: flex; align-items: center; gap: var(--fx-space-2); max-inline-size: calc(var(--fx-space-12) * 6); padding: var(--fx-space-3) var(--fx-space-2) var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); border-end-end-radius: var(--fx-radius-badge); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); cursor: pointer; animation: fx-stagger-in var(--fx-motion-base) var(--fx-ease-enter); }
  .fx-assistant__x { display: grid; place-items: center; flex: none; inline-size: var(--fx-control-h-sm); block-size: var(--fx-control-h-sm); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: none; color: var(--fx-text-tertiary); cursor: pointer; }
  .fx-assistant__x:hover { background: var(--fx-bg-muted); color: var(--fx-text-primary); }
  .fx-assistant__x > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); }
  /* panel */
  .fx-assistant__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; inline-size: min(calc(100vw - var(--_edge) * 2), calc(var(--fx-space-12) * 8)); block-size: min(calc(100dvh - var(--fx-space-12) * 3), calc(var(--fx-space-12) * 12)); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); overflow: hidden; transform-origin: bottom right; animation: fx-assistant-in var(--fx-motion-base) var(--fx-ease-enter); }
  @keyframes fx-assistant-in { from { opacity: 0; scale: var(--fx-motion-scale-enter); translate: 0 var(--fx-motion-shift-md); } }
  .fx-assistant__head { display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-3) var(--fx-space-3) var(--fx-space-4); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .fx-assistant__avatar { display: grid; place-items: center; flex: none; inline-size: var(--fx-size-avatar-md); block-size: var(--fx-size-avatar-md); border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); overflow: hidden; font-weight: var(--fx-font-weight-semibold); }
  .fx-assistant__avatar > :is(img, svg, canvas) { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .fx-assistant__who { display: grid; flex: 1; min-inline-size: 0; }
  .fx-assistant__who small { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); }
  .fx-assistant__who small::before { content: ""; inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); border-radius: var(--fx-radius-circle); background: var(--fx-fg-success); }
  .fx-assistant__log { display: flex; flex-direction: column; gap: var(--fx-space-2); padding: var(--fx-space-4); overflow-y: auto; overscroll-behavior: contain; }
  .fx-assistant__msg { max-inline-size: 85%; padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-overlay); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; animation: fx-stagger-in var(--fx-motion-fast) var(--fx-ease-enter); }
  .fx-assistant__msg[data-who="bot"] { align-self: start; border-end-start-radius: var(--fx-radius-badge); background: var(--fx-bg-muted); }
  .fx-assistant__msg[data-who="user"] { align-self: end; border-end-end-radius: var(--fx-radius-badge); background: var(--fx-bg-brand-subtle); }
  .fx-assistant__handoff, .fx-assistant__error { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); }
  .fx-assistant__handoff > p { margin: 0; }
  .fx-assistant__error { color: var(--fx-fg-error); justify-items: start; }
  .fx-assistant__chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); padding: 0 var(--fx-space-4); }
  .fx-assistant__chips:not(:empty) { padding-block-end: var(--fx-space-3); }
  .fx-assistant__form { display: flex; align-items: end; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-3); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
  .fx-assistant__form textarea { flex: 1; min-block-size: var(--fx-control-h-md); max-block-size: calc(var(--fx-control-h-md) * 3); padding: var(--fx-space-2) var(--fx-space-3); box-sizing: border-box; border: var(--fx-border-width-default) solid var(--fx-border-color-field); border-radius: var(--fx-radius-control); background: var(--fx-bg-field); color: inherit; font: inherit; resize: none; }
  .fx-assistant__form textarea:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: 0; }
  .fx-assistant__form button { display: grid; place-items: center; inline-size: var(--fx-control-h-md); block-size: var(--fx-control-h-md); padding: 0; border: 0; border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); cursor: pointer; }
  .fx-assistant__form button > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); }
  .fx-assistant[data-state="sending"] .fx-assistant__form button { opacity: 0.5; pointer-events: none; }
  .fx-assistant__note { margin: 0; padding: 0 var(--fx-space-4) var(--fx-space-3); color: var(--fx-text-tertiary); font-size: calc(var(--fx-font-size-xs) * 0.92); text-align: center; }
  /* telefonda: toʻliq ekran varaq */
  @media (max-width: 640px) {
    .fx-assistant__panel { position: fixed; inset: 0; inline-size: auto; block-size: auto; border: 0; border-radius: 0; padding-block-end: env(safe-area-inset-bottom, 0px); }
    .fx-assistant:is([data-state="open"], [data-state="sending"]) .fx-assistant__launcher { display: none; }
  }
}