/* 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; }

@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-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-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-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-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-fg-success: var(--fx-color-green-700);
  --fx-fg-warning: var(--fx-color-amber-700);
  --fx-fg-error: var(--fx-color-red-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-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-nav-width: 256px;
  --fx-dialog-width: 480px;
  --fx-popover-width: 320px;
  --fx-toast-width: 520px;
}
[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-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-fg-success: var(--fx-color-green-700);
  --fx-fg-warning: var(--fx-color-amber-700);
  --fx-fg-error: var(--fx-color-red-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);
}
@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-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: var(--fx-color-red-900);
    --fx-bg-success-subtle: var(--fx-color-green-900);
    --fx-bg-warning-subtle: var(--fx-color-amber-900);
    --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-fg-success: var(--fx-color-green-300);
    --fx-fg-warning: var(--fx-color-amber-300);
    --fx-fg-error: var(--fx-color-red-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);
  }
}
[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-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: var(--fx-color-red-900);
  --fx-bg-success-subtle: var(--fx-color-green-900);
  --fx-bg-warning-subtle: var(--fx-color-amber-900);
  --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-fg-success: var(--fx-color-green-300);
  --fx-fg-warning: var(--fx-color-amber-300);
  --fx-fg-error: var(--fx-color-red-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);
}
[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-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-border-color-focus: var(--fx-color-neutral-900);
}
[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-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-border-color-focus: var(--fx-color-brand-600);
}
@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);
  }
}
[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);
}
[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-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-border-color-focus: var(--fx-color-brand-600);
}
@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);
  }
}
[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);
}
[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-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-border-color-focus: var(--fx-color-brand-600);
}
@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);
  }
}
[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);
}
[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-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-border-color-focus: var(--fx-color-brand-600);
}
@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);
  }
}
[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);
}
[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-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-border-color-focus: var(--fx-color-brand-600);
}
@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);
  }
}
[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);
}
[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-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-border-color-focus: var(--fx-color-brand-500);
}
@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);
  }
}
[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);
}
[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;
}
:root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density] {
  --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));
}
@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] {
    --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)));
  }
}
}


/* Asos: sahifa foni, matn, harakatni kamaytirish. Komponent emas — fx.base qatlami. */
@layer fx.base {
  :root {
    color-scheme: light;
    font-family: var(--fx-font-family-sans);
    font-size-adjust: var(--fx-font-adjust-sans); /* shrift almashganda oʻlcham saqlanadi (scripts/fonts.mjs) */
    color: var(--fx-text-primary);
    background: var(--fx-bg-page);
  }
  [data-fx-scheme="dark"] { color-scheme: dark; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-fx-scheme="light"]) { color-scheme: dark; }
  }
  [data-fx-scheme] { color: var(--fx-text-primary); background: var(--fx-bg-page); }
  /* WDS Harakat: prefers-reduced-motion doim hurmat qilinadi */
  @media (prefers-reduced-motion: reduce) {
    :root, [data-fx-personality] { --fx-knob-motion: 0; }
  }
}

/* avatar */
@layer fx.components {
  /* Kvadrat avatar + holat nuqtasi (FoxOS (avval Fox Workspace) hilos namunasidan, Ustoz tasdigʻi 16.10; WDS «Komponentlar» 08.10 doira qoidasi bekor). */
  .fx-avatar {
    --_s: var(--fx-size-avatar-md);
    --fx-avatar-ring: var(--fx-bg-surface); /* holat nuqtasi halqasi — avatar turgan yuza rangi (hook) */
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: var(--_s);
    block-size: var(--_s);
    border-radius: calc(var(--_s) * var(--fx-radius-avatar-ratio));
    background: var(--fx-bg-category-blue);
    color: var(--fx-text-on-category);
    font-size: var(--fx-font-size-xs);
    font-weight: var(--fx-font-weight-semibold);
    line-height: 1;
    user-select: none;
  }
  .fx-avatar[data-size="sm"] { --_s: var(--fx-size-avatar-sm); font-size: calc(var(--fx-font-size-xs) * 0.75); }
  .fx-avatar[data-size="lg"] { --_s: var(--fx-size-avatar-lg); font-size: var(--fx-font-size-lg); }
  .fx-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
  .fx-avatar[data-color="yellow"] { background: var(--fx-bg-category-yellow); }
  .fx-avatar[data-color="pink"] { background: var(--fx-bg-category-pink); }
  .fx-avatar[data-color="blue"] { background: var(--fx-bg-category-blue); }
  .fx-avatar[data-color="coral"] { background: var(--fx-bg-category-coral); }
  .fx-avatar[data-color="green"] { background: var(--fx-bg-category-green); }
  .fx-avatar[data-color="purple"] { background: var(--fx-bg-category-purple); }
  /* Holat: active — puls, waiting — sariq, stopped — qizil, idle — xira */
  .fx-avatar[data-status]::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(var(--fx-border-width-focus) * -1);
    inset-block-end: calc(var(--fx-border-width-focus) * -1);
    inline-size: var(--fx-size-status-dot);
    block-size: var(--fx-size-status-dot);
    box-sizing: border-box;
    border-radius: var(--fx-radius-circle);
    border: var(--fx-border-width-focus) solid var(--fx-avatar-ring);
    background: var(--fx-border-color-strong);
  }
  .fx-avatar[data-size="sm"][data-status]::after { inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); }
  .fx-avatar[data-status="active"]::after { background: var(--fx-fg-success); animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; }
  .fx-avatar[data-status="waiting"]::after { background: var(--fx-fg-warning); }
  .fx-avatar[data-status="stopped"]::after { background: var(--fx-fg-error); }
  @keyframes fx-pulse { 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .fx-avatar[data-status]::after { animation: none; } }
}

/* badge */
@layer fx.components {
  .fx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fx-space-1);
    padding: var(--fx-space-1) var(--fx-space-2);
    border-radius: var(--fx-radius-badge);
    font-size: var(--fx-font-size-xs);
    font-weight: var(--fx-font-weight-medium);
    line-height: 1;
    background: var(--fx-bg-muted);
    color: var(--fx-text-secondary);
    transition: border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-badge[data-tone="success"] { background: var(--fx-bg-success-subtle); color: var(--fx-fg-success); }
  .fx-badge[data-tone="warning"] { background: var(--fx-bg-warning-subtle); color: var(--fx-fg-warning); }
  .fx-badge[data-tone="error"] { background: var(--fx-bg-error-subtle); color: var(--fx-fg-error); }
}

/* button */
@layer fx.components {
  .fx-btn {
    --_h: var(--fx-control-h-md);
    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;
    cursor: pointer;
    background: var(--fx-bg-surface);
    color: var(--fx-text-primary);
    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);
  }
  .fx-btn:hover { background: var(--fx-bg-subtle); }
  .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[data-variant="primary"] { background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); 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"] { background: var(--fx-fg-error); color: var(--fx-text-on-brand); border-color: transparent; }
  .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); }
  .fx-btn:disabled, .fx-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--fx-bg-muted); color: var(--fx-text-disabled); border-color: transparent; }
}

/* card */
@layer fx.components {
  .fx-card {
    display: grid;
    gap: var(--fx-space-4);
    padding: var(--fx-space-5);
    background: var(--fx-bg-surface);
    border: var(--fx-border-width-default) solid var(--fx-border-color-surface);
    border-radius: var(--fx-radius-surface);
    box-shadow: var(--fx-shadow-sm);
    transition: border-radius var(--fx-motion-base) var(--fx-ease-standard), box-shadow var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-card__title { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .fx-card__text { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .fx-card[data-variant="raised"] { box-shadow: var(--fx-shadow-md); }
}

/* check */
@layer fx.components {
  .fx-check { position: relative; display: inline-flex; align-items: center; gap: var(--fx-space-2); min-block-size: var(--fx-size-min-target); cursor: pointer; font-size: var(--fx-font-size-sm); }
  .fx-check > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
  .fx-check__box {
    --_s: var(--fx-size-checkbox);
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--_s);
    block-size: var(--_s);
    box-sizing: border-box;
    border: var(--fx-border-width-default) solid var(--fx-border-color-strong);
    /* Checkbox yoyi o'lchamga nisbatan (WDS r111) — doira bo'lmaydi, radio bilan adashmasin */
    border-radius: calc(var(--_s) * var(--fx-radius-checkbox-ratio));
    background: var(--fx-bg-surface);
    transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-check__box::after {
    content: "";
    inline-size: 60%;
    block-size: 60%;
    background: var(--fx-text-on-brand);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
  }
  .fx-check > input:checked + .fx-check__box { background: var(--fx-bg-brand-solid); border-color: transparent; }
  .fx-check > input:checked + .fx-check__box::after { opacity: 1; }
  .fx-check > input:focus-visible + .fx-check__box { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }

  /* Radio — istisno: doim doira, xarakter tugmasi tegmaydi */
  .fx-check[data-type="radio"] .fx-check__box { border-radius: var(--fx-radius-circle); }
  .fx-check[data-type="radio"] .fx-check__box::after { mask: none; border-radius: var(--fx-radius-circle); inline-size: 40%; block-size: 40%; }

  /* Switch — istisno: trek doim pill */
  .fx-check[data-type="switch"] .fx-check__box {
    inline-size: var(--fx-size-switch-track);
    border-radius: var(--fx-size-checkbox);
    place-items: center start;
    padding-inline: var(--fx-space-1);
    border-color: transparent;
    background: var(--fx-bg-muted);
  }
  .fx-check[data-type="switch"] .fx-check__box::after {
    mask: none;
    inline-size: calc(var(--_s) - var(--fx-space-2));
    block-size: calc(var(--_s) - var(--fx-space-2));
    border-radius: var(--fx-radius-circle);
    background: var(--fx-bg-surface);
    opacity: 1;
    box-shadow: var(--fx-shadow-sm);
    transition: translate var(--fx-motion-base) var(--fx-ease-emphasized);
  }
  .fx-check[data-type="switch"] > input:checked + .fx-check__box::after { translate: calc(var(--fx-size-switch-track) - var(--_s)) 0; background: var(--fx-text-on-brand); }
}

/* dialog */
@layer fx.components {
  /* Native <dialog>: fokus tuzog'i, Esc va yuqori qatlam brauzerning o'zida */
  .fx-dialog {
    inline-size: min(100% - var(--fx-space-8), var(--fx-dialog-width));
    padding: var(--fx-space-6);
    border: var(--fx-border-width-default) solid var(--fx-border-color-surface);
    border-radius: var(--fx-radius-overlay);
    background: var(--fx-bg-surface);
    color: var(--fx-text-primary);
    box-shadow: var(--fx-shadow-lg);
  }
  .fx-dialog::backdrop { background: color-mix(in oklab, var(--fx-bg-overlay) 50%, transparent); }
  .fx-dialog__title { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); }
  .fx-dialog__body { margin-block: var(--fx-space-3) var(--fx-space-6); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
  .fx-dialog__actions { display: flex; justify-content: flex-end; gap: var(--fx-space-3); }
  .fx-dialog[open] { animation: fx-dialog-in var(--fx-motion-base) var(--fx-ease-emphasized); }
  @keyframes fx-dialog-in { from { opacity: 0; translate: 0 var(--fx-space-2); } }
}

/* input */
@layer fx.components {
  .fx-field { display: grid; gap: var(--fx-space-2); }
  .fx-label { font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); color: var(--fx-text-secondary); }
  .fx-hint { font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
  .fx-field[data-invalid] .fx-hint { color: var(--fx-text-error); }
  .fx-input, .fx-textarea {
    --_h: var(--fx-control-h-md);
    inline-size: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--fx-font-size-md);
    color: var(--fx-text-primary);
    background: var(--fx-bg-field);
    border: var(--fx-border-width-default) solid var(--fx-border-color-field); /* uslubga qarab: chegarali yoki toʻldirilgan (knob field-fill) */
    transition: border-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);
  }
  .fx-input {
    block-size: var(--_h);
    padding-inline: var(--fx-space-4);
    border-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control));
  }
  /* Textarea hech qachon pill bo'lmaydi (WDS «Shakl va oraliq») */
  .fx-textarea { min-block-size: calc(var(--_h) * 2); padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-field-multiline); resize: vertical; }
  .fx-input::placeholder, .fx-textarea::placeholder { color: var(--fx-text-tertiary); }
  .fx-input:hover, .fx-textarea:hover { border-color: color-mix(in oklab, var(--fx-border-color-strong) calc((1 - var(--fx-knob-field-fill)) * 100%), transparent); background: color-mix(in oklab, var(--fx-text-primary) calc(var(--fx-knob-field-fill) * 6%), var(--fx-bg-field)); }
  .fx-input:focus-visible, .fx-textarea:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-default) * -1); }
  .fx-field[data-invalid] .fx-input, .fx-field[data-invalid] .fx-textarea { border-color: var(--fx-border-color-error); }
  .fx-input[data-size="sm"] { --_h: var(--fx-control-h-sm); font-size: var(--fx-font-size-sm); }
  .fx-input:disabled, .fx-textarea:disabled { background: var(--fx-bg-muted); color: var(--fx-text-disabled); cursor: not-allowed; }
}

/* nav */
@layer fx.components {
  .fx-nav { display: grid; gap: var(--fx-space-1); inline-size: var(--fx-nav-width); padding: var(--fx-space-3); box-sizing: border-box; }
  .fx-nav__item {
    --_h: var(--fx-control-h-sm);
    display: flex;
    align-items: center;
    gap: var(--fx-space-3);
    block-size: var(--_h);
    padding-inline: var(--fx-space-3);
    border-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-nav));
    color: var(--fx-text-secondary);
    font-size: var(--fx-font-size-sm);
    font-weight: var(--fx-font-weight-medium);
    text-decoration: none;
    /* Uzun nom — bitta qator «…» (WDS Karkas va navigatsiya) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-nav__item:hover { background: var(--fx-bg-muted); color: var(--fx-text-primary); }
  .fx-nav__item[aria-current="page"] { background: var(--fx-bg-muted); color: var(--fx-text-primary); }
  .fx-nav__item:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); }
}

/* popover */
@layer fx.components {
  /* Native popover + anchor positioning: yuqori qatlam, Esc va tashqariga bosib yopish brauzerning oʻzida.
     Langar: tugmada popovertarget (yashirin langar) yoki style="anchor-name" + position-anchor. */
  .fx-popover {
    inline-size: max-content;
    max-inline-size: min(100vw - var(--fx-space-8), var(--fx-popover-width));
    margin: 0;
    padding: var(--fx-space-4);
    border: var(--fx-border-width-default) solid var(--fx-border-color-surface);
    border-radius: var(--fx-radius-overlay);
    background: var(--fx-bg-surface);
    color: var(--fx-text-primary);
    box-shadow: var(--fx-shadow-lg);
    font-size: var(--fx-font-size-sm);
  }
  .fx-popover:popover-open { animation: fx-popover-in var(--fx-motion-fast) var(--fx-ease-standard); }
  @supports (position-area: block-end) {
    .fx-popover {
      inset: auto;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block: var(--fx-space-2);
    }
  }
  .fx-popover__title { margin: 0 0 var(--fx-space-2); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); }
  @keyframes fx-popover-in { from { opacity: 0; } }
}

/* progress */
@layer fx.components {
  /* Chiziqli progress (WDS «Grafiklar»: foiz — halqa emas, chiziqli oʻlchagich). Qiymat: style="--fx-progress-value: 40%". */
  .fx-progress {
    --fx-progress-value: 0%;
    display: block;
    block-size: var(--fx-space-2);
    border-radius: calc(var(--fx-space-2) / 2);
    background: var(--fx-bg-muted);
    overflow: hidden;
  }
  .fx-progress::before {
    content: "";
    display: block;
    inline-size: clamp(0%, var(--fx-progress-value), 100%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--fx-bg-brand-solid);
    transition: inline-size var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-progress[data-tone="success"]::before { background: var(--fx-fg-success); }
  .fx-progress[data-tone="warning"]::before { background: var(--fx-fg-warning); }
  .fx-progress[data-tone="error"]::before { background: var(--fx-fg-error); }
  .fx-progress[data-color="yellow"]::before { background: var(--fx-bg-category-yellow); }
  .fx-progress[data-color="pink"]::before { background: var(--fx-bg-category-pink); }
  .fx-progress[data-color="blue"]::before { background: var(--fx-bg-category-blue); }
  .fx-progress[data-color="coral"]::before { background: var(--fx-bg-category-coral); }
  .fx-progress[data-color="green"]::before { background: var(--fx-bg-category-green); }
  .fx-progress[data-color="purple"]::before { background: var(--fx-bg-category-purple); }
}

/* stat */
@layer fx.components {
  /* Koʻrsatkich plitkasi: yorliq + katta raqam + izoh. Neytral yoki rangli (toifa rangi) — hilos namunasi, Ustoz tasdigʻi 16.10. */
  .fx-stat {
    display: grid;
    align-content: start;
    gap: var(--fx-space-2);
    padding: var(--fx-space-4) var(--fx-space-5) var(--fx-space-5);
    min-inline-size: 0;
    border-radius: var(--fx-radius-surface);
    border: var(--fx-border-width-default) solid var(--fx-border-color-surface);
    background: var(--fx-bg-surface);
    color: var(--fx-text-primary);
    text-decoration: none;
    transition: box-shadow var(--fx-motion-fast) var(--fx-ease-standard), border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-stat__label { display: flex; justify-content: space-between; align-items: center; gap: var(--fx-space-2); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); color: var(--fx-text-secondary); }
  .fx-stat__value { margin-block-start: var(--fx-space-2); font-family: var(--fx-font-family-numeric); font-size-adjust: var(--fx-font-adjust-numeric); font-size: var(--fx-font-size-display-md); font-weight: var(--fx-font-weight-medium); font-variant-numeric: tabular-nums; line-height: 1; }
  .fx-stat__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
  .fx-stat[data-tone="warning"] .fx-stat__value { color: var(--fx-fg-warning); }
  .fx-stat[data-tone="error"] .fx-stat__value { color: var(--fx-fg-error); }
  a.fx-stat:hover { box-shadow: var(--fx-shadow-md); }
  a.fx-stat:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); }
  /* Rangli plitka: toifa rangi, chiziqsiz; yorliq va izoh — ustidagi matnning xira varianti */
  .fx-stat[data-color] { border-color: transparent; color: var(--fx-text-on-category); }
  .fx-stat[data-color] .fx-stat__label { color: color-mix(in oklab, var(--fx-text-on-category) 80%, transparent); }
  .fx-stat[data-color] .fx-stat__hint { color: color-mix(in oklab, var(--fx-text-on-category) 70%, transparent); }
  .fx-stat[data-color="yellow"] { background: var(--fx-bg-category-yellow); }
  .fx-stat[data-color="pink"] { background: var(--fx-bg-category-pink); }
  .fx-stat[data-color="blue"] { background: var(--fx-bg-category-blue); }
  .fx-stat[data-color="coral"] { background: var(--fx-bg-category-coral); }
  .fx-stat[data-color="green"] { background: var(--fx-bg-category-green); }
  .fx-stat[data-color="purple"] { background: var(--fx-bg-category-purple); }
}

/* table */
@layer fx.components {
  /* Maʼlumot jadvali (WDS «Dashboard»: oʻz hududida aylanadi, sarlavha qotadi, holat/pul/sana — nowrap, oxirgi qatorda chiziq yoʻq) */
  .fx-table-scroll { overflow: auto; max-inline-size: 100%; }
  .fx-table {
    --_py: calc(var(--fx-space-3) * var(--fx-knob-density));
    --fx-table-surface: var(--fx-bg-surface); /* jadval turgan yuza (hook): sahifa ustida boʻlsa var(--fx-bg-page) */
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fx-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--fx-text-primary);
  }
  .fx-table th, .fx-table td {
    padding: var(--_py) var(--fx-space-3);
    text-align: start;
    vertical-align: middle;
    border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default);
  }
  .fx-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--fx-table-surface);
    color: var(--fx-text-tertiary);
    font-size: var(--fx-font-size-xs);
    font-weight: var(--fx-font-weight-medium);
    white-space: nowrap;
  }
  .fx-table tbody tr:last-child > * { border-block-end: 0; }
  .fx-table tbody tr:hover > * { background: var(--fx-bg-subtle); }
  .fx-table tfoot td, .fx-table tfoot th { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-strong); border-block-end: 0; font-weight: var(--fx-font-weight-semibold); }
  /* Ustun turlari: raqam/pul — oʻngda; holat, sana, kod — bir qatorda */
  .fx-table [data-type="num"] { text-align: end; white-space: nowrap; }
  .fx-table [data-type="nowrap"] { white-space: nowrap; }
  .fx-table[data-size="sm"] { --_py: calc(var(--fx-space-2) * var(--fx-knob-density)); }
  .fx-table caption { padding-block-end: var(--fx-space-3); text-align: start; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); }
}

/* tabs */
@layer fx.components {
  /* Segment tablar: tashqi qobiq va ichki pill — ichma-ich yoy formulasi: ichki = tashqi − ichki chet */
  .fx-tabs {
    --_pad: var(--fx-space-1);
    --_h: var(--fx-control-h-md);
    --_inner-h: calc(var(--_h) - var(--_pad) * 2);
    display: inline-flex;
    gap: var(--fx-space-1);
    padding: var(--_pad);
    background: var(--fx-bg-muted);
    border-radius: calc(var(--fx-knob-pill) * var(--_h) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control));
    transition: border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-tabs__tab {
    block-size: var(--_inner-h);
    padding-inline: var(--fx-space-4);
    border: 0;
    font: inherit;
    font-size: var(--fx-font-size-sm);
    font-weight: var(--fx-font-weight-medium);
    color: var(--fx-text-secondary);
    background: transparent;
    cursor: pointer;
    border-radius: calc(var(--fx-knob-pill) * var(--_inner-h) / 2 + (1 - var(--fx-knob-pill)) * max(0px, var(--fx-radius-control) - var(--_pad)));
    transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-radius var(--fx-motion-base) var(--fx-ease-standard);
  }
  .fx-tabs[data-size="sm"] { --_h: var(--fx-control-h-sm); }
  .fx-tabs__tab:hover { color: var(--fx-text-primary); }
  .fx-tabs__tab[aria-selected="true"] { background: var(--fx-bg-surface); color: var(--fx-text-primary); box-shadow: var(--fx-shadow-sm); }
  .fx-tabs__tab:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); }
}

/* toast */
@layer fx.components {
  /* Toast — teskari yuza (Light — qora, Dark — oq), pastda markazda, faqat soʻnadi (WDS r94, «Harakat»).
     popover="manual" — yuqori qatlam; koʻrsatish/yashirish: el.showPopover() / el.hidePopover(). */
  .fx-toast {
    position: fixed;
    inset: auto 0 var(--fx-space-6);
    inline-size: max-content;
    max-inline-size: min(100vw - var(--fx-space-8), var(--fx-toast-width));
    margin: 0 auto;
    align-items: center;
    gap: var(--fx-space-3);
    padding: var(--fx-space-3) var(--fx-space-4);
    border: 0;
    border-radius: var(--fx-radius-control);
    background: var(--fx-text-primary);
    color: var(--fx-bg-page);
    box-shadow: var(--fx-shadow-lg);
    font-size: var(--fx-font-size-sm);
    line-height: 1.4;
  }
  /* display faqat ochiq holatda: aks holda UA'ning [popover]:not(:popover-open) { display: none } qoidasi bosilib, yopiq toast ko'rinib qoladi */
  .fx-toast:popover-open { display: flex; animation: fx-toast-in var(--fx-motion-base) var(--fx-ease-standard); }
  /* Holat: shakl + soʻz (WDS «Komponentlar») — oldida rangli nuqta, matnda soʻz */
  .fx-toast[data-tone]::before { content: ""; flex: none; inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); border-radius: var(--fx-radius-circle); background: currentColor; }
  .fx-toast[data-tone="success"]::before { background: var(--fx-fg-success); }
  .fx-toast[data-tone="warning"]::before { background: var(--fx-fg-warning); }
  .fx-toast[data-tone="error"]::before { background: var(--fx-fg-error); }
  .fx-toast__action { margin-inline-start: var(--fx-space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fx-font-weight-semibold); text-decoration: underline; cursor: pointer; }
  @keyframes fx-toast-in { from { opacity: 0; } }
}