@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap');

/* Auto-generated by scripts/sync-tw2-from-zapkit.sh */

/* Source: ~/zapkit-components-main/src/tokens/{global,semantic}.css */

/* 
 * Design Tokens - Converted to HSL and REM
 * 
 * Colors: HEX → HSL (Hue, Saturation, Lightness)
 * Spacing: PX → REM (base 16px)
 * 
 * Benefits:
 * - HSL: Better for design systems, easier to modify saturation/lightness
 * - REM: Responsive, accessible, scales with user zoom
 */

/* Global Design Tokens - From Figma */

/* DO NOT EDIT MANUALLY - Generated from Figma Global/Mode 1 tokens */

:root {
  /* =========================================================================
     COLORS - Global Color Palette
     ========================================================================= */
  /* Gray Scale */
  --color-gray-50: hsl(210, 20%, 98%);
  --color-gray-100: hsl(220, 14%, 96%);
  --color-gray-200: hsl(220, 13%, 91%);
  --color-gray-300: hsl(216, 12%, 84%);
  --color-gray-400: hsl(218, 11%, 65%);
  --color-gray-500: hsl(220, 9%, 46%);
  --color-gray-600: hsl(215, 14%, 34%);
  --color-gray-700: hsl(217, 19%, 27%);
  --color-gray-800: hsl(215, 28%, 17%);
  --color-gray-900: hsl(221, 39%, 11%);
  --color-gray-950: hsl(224, 71%, 4%);
  /* Red Scale */
  --color-red-50: hsl(0, 86%, 97%);
  --color-red-100: hsl(0, 93%, 94%);
  --color-red-200: hsl(0, 96%, 89%);
  --color-red-300: hsl(0, 94%, 82%);
  --color-red-400: hsl(0, 91%, 71%);
  --color-red-500: hsl(0, 84%, 60%);
  --color-red-600: hsl(0, 72%, 51%);
  --color-red-700: hsl(0, 74%, 42%);
  --color-red-800: hsl(0, 70%, 35%);
  --color-red-900: hsl(0, 63%, 31%);
  --color-red-950: hsl(0, 75%, 15%);
  /* Green Scale */
  --color-green-50: hsl(138, 76%, 97%);
  --color-green-100: hsl(141, 84%, 93%);
  --color-green-200: hsl(141, 79%, 85%);
  --color-green-300: hsl(142, 77%, 73%);
  --color-green-400: hsl(142, 69%, 58%);
  --color-green-500: hsl(142, 71%, 45%);
  --color-green-600: hsl(142, 76%, 36%);
  --color-green-700: hsl(142, 72%, 29%);
  --color-green-800: hsl(143, 64%, 24%);
  --color-green-900: hsl(144, 61%, 20%);
  --color-green-950: hsl(145, 80%, 10%);
  /* Blue Scale */
  --color-blue-50: hsl(214, 100%, 97%);
  --color-blue-100: hsl(214, 95%, 93%);
  --color-blue-200: hsl(213, 97%, 87%);
  --color-blue-300: hsl(212, 96%, 78%);
  --color-blue-400: hsl(213, 94%, 68%);
  --color-blue-500: hsl(217, 91%, 60%);
  --color-blue-600: hsl(221, 83%, 53%);
  --color-blue-700: hsl(224, 76%, 48%);
  --color-blue-800: hsl(226, 71%, 40%);
  --color-blue-900: hsl(224, 64%, 33%);
  --color-blue-950: hsl(226, 57%, 21%);
  /* Brand Colors */
  --color-brand-50: hsl(90, 70%, 96%);
  --color-brand-100: hsl(87, 69%, 90%);
  --color-brand-200: hsl(87, 65%, 84%);
  --color-brand-300: hsl(88, 67%, 76%);
  --color-brand-400: hsl(87, 66%, 64%);
  --color-brand-500: hsl(88, 65%, 58%);
  --color-brand-600: hsl(88, 66%, 44%);
  --color-brand-700: hsl(88, 66%, 32%);
  --color-brand-800: hsl(87, 67%, 20%);
  --color-brand-900: hsl(88, 67%, 12%);
  --color-brand-950: hsl(87, 67%, 6%);
  /* Brand Secondary */
  --color-brand-secondary-50: hsl(213, 82%, 98%);
  --color-brand-secondary-100: hsl(214, 81%, 94%);
  --color-brand-secondary-200: hsl(219, 88%, 90%);
  --color-brand-secondary-300: hsl(217, 88%, 84%);
  --color-brand-secondary-400: hsl(218, 87%, 75%);
  --color-brand-secondary-500: hsl(218, 87%, 67%);
  --color-brand-secondary-600: hsl(218, 87%, 50%);
  --color-brand-secondary-700: hsl(218, 88%, 35%);
  --color-brand-secondary-800: hsl(218, 87%, 25%);
  --color-brand-secondary-900: hsl(217, 88%, 10%);
  --color-brand-secondary-950: hsl(218, 87%, 6%);
  /* Orange Scale */
  --color-orange-50: hsl(33, 100%, 96%);
  --color-orange-100: hsl(34, 100%, 92%);
  --color-orange-200: hsl(32, 98%, 83%);
  --color-orange-300: hsl(31, 97%, 72%);
  --color-orange-400: hsl(27, 96%, 61%);
  --color-orange-500: hsl(25, 95%, 53%);
  --color-orange-600: hsl(21, 90%, 48%);
  --color-orange-700: hsl(17, 88%, 40%);
  --color-orange-800: hsl(15, 79%, 34%);
  --color-orange-900: hsl(15, 75%, 28%);
  --color-orange-950: hsl(13, 81%, 15%);
  /* Zinc Scale */
  --color-zinc-50: hsl(0, 0%, 98%);
  --color-zinc-100: hsl(240, 5%, 96%);
  --color-zinc-200: hsl(240, 6%, 90%);
  --color-zinc-300: hsl(240, 5%, 84%);
  --color-zinc-400: hsl(240, 5%, 65%);
  --color-zinc-500: hsl(240, 4%, 46%);
  --color-zinc-600: hsl(240, 5%, 34%);
  --color-zinc-700: hsl(240, 5%, 26%);
  --color-zinc-800: hsl(240, 4%, 16%);
  --color-zinc-900: hsl(240, 6%, 10%);
  --color-zinc-950: hsl(240, 10%, 4%);
  /* Neutral Scale */
  --color-neutral-50: hsl(0, 0%, 98%);
  --color-neutral-100: hsl(0, 0%, 96%);
  --color-neutral-200: hsl(0, 0%, 90%);
  --color-neutral-300: hsl(0, 0%, 83%);
  --color-neutral-400: hsl(0, 0%, 64%);
  --color-neutral-500: hsl(0, 0%, 45%);
  --color-neutral-600: hsl(0, 0%, 32%);
  --color-neutral-700: hsl(0, 0%, 25%);
  --color-neutral-800: hsl(0, 0%, 15%);
  --color-neutral-900: hsl(0, 0%, 9%);
  --color-neutral-950: hsl(0, 0%, 4%);
  /* Base Colors */
  --color-black: hsl(0, 0%, 0%);
  --color-white: hsl(0, 0%, 100%);
  /* =========================================================================
     SPACING - Global Spacing Scale
     ========================================================================= */
  --spacing-0: 0rem;
  --spacing-0_5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1_5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2_5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3_5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  /* =========================================================================
     TYPOGRAPHY - Global Typography Scale
     ========================================================================= */
  /* Font Families */
  --font-family-sans: "Mulish", sans-serif;
  --font-family-serif: "Georgia", serif;
  --font-family-mono: "Roboto Mono", monospace;
  /* Font Sizes */
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  /* Line Heights */
  --line-height-1: 1rem;
  --line-height-2: 1.25rem;
  --line-height-3: 1.5rem;
  --line-height-4: 1.75rem;
  --line-height-5: 2rem;
  --line-height-6: 2.25rem;
  --line-height-7: 2.5rem;
  --line-height-8: 3rem;
  --line-height-9: 4rem;
  --line-height-10: 5rem;
  --line-height-11: 6rem;
  --line-height-12: 8rem;
  --line-height-13: 10rem;
  /* =========================================================================
     BORDER RADIUS - Global Border Radius Scale
     ========================================================================= */
  --border-radius-none: 0rem;
  --border-radius-sm: 0.125rem;
  --border-radius-base: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-radius-3xl: 1.5rem;
  --border-radius-full: 62.4375rem;
  /* =========================================================================
     BORDER WIDTH - Global Border Width Scale
     ========================================================================= */
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  /* =========================================================================
     SHADOWS - Global Shadow Scale
     ========================================================================= */
  --shadow-none: 0rem 0rem 0rem 0rem #00000000;
  --shadow-2xs: 0rem 0.0625rem 0rem 0rem #0000000d;
  --shadow-xs: 0rem 0.0625rem 0.125rem 0rem #0000000d;
  --shadow-sm: 0rem 0.0625rem 0.1875rem 0rem #0000001a, 0rem 0.0625rem 0.125rem -0.0625rem #0000001a;
  --shadow-base: 0rem 0.25rem 0.375rem -0.0625rem #0000001a, 0rem 0.125rem 0.375rem -0.125rem #0000001a;
  --shadow-md: 0rem 0.625rem 0.9375rem -0.1875rem #0000001a, 0rem 0.25rem 0.375rem -0.25rem #0000001a;
  --shadow-lg: 0rem 1.25rem 1.5625rem -0.3125rem #0000001a, 0rem 0.5rem 0.625rem -0.375rem #0000001a;
  --shadow-xl: 0rem 1.25rem 1.5625rem -0.3125rem #0000001a, 0rem 0.5rem 0.625rem -0.375rem #0000001a;
  --shadow-2xl: 0rem 1.5625rem 3.125rem -0.75rem #00000040;
  --shadow-inner: 0rem 0.125rem 0.25rem 0rem #0000000d;
  /* =========================================================================
     OPACITY - Global Opacity Scale
     ========================================================================= */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  /* =========================================================================
     BLUR - Global Blur Scale
     ========================================================================= */
  --blur-none: 0px;
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  /* =========================================================================
     BREAKPOINTS - Global Breakpoint Scale
     ========================================================================= */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 1920px;
  /* =========================================================================
     CONTAINER - Global Container Scale
     ========================================================================= */
  --container-xs: 320px;
  --container-sm: 384px;
  --container-md: 448px;
  --container-lg: 512px;
  --container-xl: 576px;
  --container-2xl: 672px;
  --container-3xl: 768px;
  --container-4xl: 896px;
  --container-5xl: 1024px;
  --container-6xl: 1152px;
  --container-7xl: 1280px;
  --container-8xl: 1536px;
}

/* Semantic utilities */

.rounded-dropdown {
  border-radius: var(--radius-dropdown);
}

/* Support Tailwind-style hover:rounded-dropdown utility */

.hover\\:rounded-dropdown:hover {
  border-radius: var(--radius-dropdown);
}

/* 
 * Design Tokens - Converted to HSL and REM
 * 
 * Colors: HEX → HSL (Hue, Saturation, Lightness)
 * Spacing: PX → REM (base 16px)
 * 
 * Benefits:
 * - HSL: Better for design systems, easier to modify saturation/lightness
 * - REM: Responsive, accessible, scales with user zoom
 */

/* Semantic Design Tokens - Component-specific tokens */

/* These tokens reference global tokens and define semantic meanings */

:root {
  /* =========================================================================
     SEMANTIC COLORS - Light Mode
     ========================================================================= */
  /* Text Colors */
  --text-primary: var(--color-gray-950);
  --text-secondary: var(--color-gray-800);
  --text-tertiary: var(--color-gray-500);
  --text-disabled: var(--color-gray-500);
  --text-error: var(--color-red-600);
  --text-brand: var(--color-brand-500);
  --text-invert: var(--color-white);
  /* Background Colors */
  --bg-primary: var(--color-gray-50);
  --bg-secondary: var(--color-white);
  --bg-disabled: var(--color-gray-100);
  /* Button Colors - Primary (Light Mode) */
  --btn-primary-default: var(--color-brand-400);
  --btn-primary-hover: var(--color-brand-500);
  --btn-primary-pressed: var(--color-brand-400);
  --btn-primary-disabled: var(--color-brand-100);
  --btn-primary-focus: var(--color-brand-500);
  --btn-primary-text: var(--color-gray-950);
  --btn-primary-text-disabled: var(--color-gray-400);
  /* Button Colors - Secondary */
  --btn-secondary-default: var(--color-gray-50);
  --btn-secondary-hover: var(--color-gray-100);
  --btn-secondary-pressed: var(--color-gray-200);
  --btn-secondary-focus: var(--color-gray-50);
  --btn-secondary-disabled: var(--color-gray-100);
  --btn-secondary-text: var(--color-gray-950);
  --btn-secondary-text-disabled: var(--color-gray-500);
  --btn-secondary-border-default: var(--color-gray-200);
  --btn-secondary-border-hover: var(--color-gray-300);
  --btn-secondary-border-pressed: var(--color-gray-300);
  --btn-secondary-border-disabled: var(--color-gray-200);
  --btn-secondary-border-focus: var(--color-gray-200);
  /* Button Colors - Danger */
  --btn-danger-default: var(--color-red-700);
  --btn-danger-hover: var(--color-red-600);
  --btn-danger-pressed: var(--color-red-800);
  --btn-danger-disabled: var(--color-red-100);
  --btn-danger-focus: var(--color-red-700);
  --btn-danger-text: var(--color-red-50);
  --btn-danger-text-disabled: var(--color-red-50);
  /* Button Colors - Ghost */
  --btn-ghost-default: transparent;
  --btn-ghost-hover: var(--color-gray-100);
  --btn-ghost-pressed: var(--color-gray-200);
  --btn-ghost-disabled: transparent;
  --btn-ghost-focus: transparent;
  --btn-ghost-text: var(--color-gray-800);
  --btn-ghost-text-disabled: var(--color-gray-500);
  /* Link Colors */
  --link-primary: var(--color-gray-700);
  --link-primary-hover: var(--color-brand-500);
  --link-primary-focus: var(--color-gray-700);
  --link-secondary: var(--color-brand-600);
  --link-secondary-hover: var(--color-brand-700);
  --link-secondary-focus: var(--color-brand-600);
  --link-tertiary: var(--color-gray-500);
  --link-tertiary-hover: var(--color-gray-600);
  --link-tertiary-focus: var(--color-gray-500);
  --link-success: var(--color-green-700);
  --link-success-hover: var(--color-green-900);
  --link-success-focus: var(--color-green-800);
  --link-help: var(--color-orange-700);
  --link-help-hover: var(--color-orange-900);
  --link-help-focus: var(--color-orange-800);
  --link-info: var(--color-blue-700);
  --link-info-hover: var(--color-blue-900);
  --link-info-focus: var(--color-blue-800);
  --link-warning: var(--color-red-700);
  --link-warning-hover: var(--color-red-900);
  --link-warning-focus: var(--color-red-800);
  --link-disabled: var(--color-gray-400);
  /* Link Colors - Inside Alerts (Light Mode) - Links need darker colors for light Alert backgrounds */
  --link-alert-help: var(--color-orange-700);
  --link-alert-help-hover: var(--color-orange-800);
  --link-alert-help-focus: var(--color-orange-700);
  --link-alert-info: var(--color-blue-700);
  --link-alert-info-hover: var(--color-blue-800);
  --link-alert-info-focus: var(--color-blue-700);
  --link-alert-warning: var(--color-red-700);
  --link-alert-warning-hover: var(--color-red-800);
  --link-alert-warning-focus: var(--color-red-700);
  --link-alert-success: var(--color-green-700);
  --link-alert-success-hover: var(--color-green-800);
  --link-alert-success-focus: var(--color-green-700);
  /* Switch Colors - Light Mode */
  --switch-inactive-default: var(--color-gray-200);
  --switch-inactive-hover: var(--color-gray-300);
  --switch-inactive-pressed: var(--color-gray-200);
  --switch-inactive-focus: var(--color-gray-200);
  --switch-active-default: var(--color-blue-500);
  --switch-active-hover: var(--color-blue-600);
  --switch-active-pressed: var(--color-blue-700);
  --switch-active-focus: var(--color-blue-500);
  --switch-disabled: var(--color-gray-100);
  /* Checkbox Colors - Light Mode */
  --checkbox-default: var(--color-gray-50);
  --checkbox-hover: var(--color-gray-100);
  --checkbox-pressed: var(--color-gray-200);
  --checkbox-selected: var(--color-blue-500);
  --checkbox-selected-hover: var(--color-blue-600);
  --checkbox-selected-pressed: var(--color-blue-700);
  --checkbox-disabled: var(--color-gray-50);
  --checkbox-border-default: var(--color-gray-200);
  --checkbox-border-hover: var(--color-gray-300);
  --checkbox-border-pressed: var(--color-gray-300);
  --checkbox-border-selected: var(--color-blue-500);
  --checkbox-border-selected-hover: var(--color-blue-600);
  --checkbox-border-selected-pressed: var(--color-blue-700);
  --checkbox-border-disabled: var(--color-gray-200);
  --checkbox-checkmark: var(--color-white);
  /* Checkbox Spacing - Light Mode */
  --spacing-checkbox-gap: var(--spacing-2);
  /* 8px = 0.5rem */
  /* Radio Colors - Light Mode */
  --radio-default: var(--color-gray-50);
  --radio-hover: var(--color-gray-100);
  --radio-pressed: var(--color-gray-200);
  --radio-selected: var(--color-blue-500);
  --radio-selected-hover: var(--color-blue-600);
  --radio-selected-pressed: var(--color-blue-700);
  --radio-disabled: var(--color-gray-50);
  --radio-border-default: var(--color-gray-200);
  --radio-border-hover: var(--color-gray-300);
  --radio-border-pressed: var(--color-gray-300);
  --radio-border-selected: var(--color-blue-500);
  --radio-border-selected-hover: var(--color-blue-600);
  --radio-border-selected-pressed: var(--color-blue-700);
  --radio-border-disabled: var(--color-gray-200);
  --radio-dot: var(--color-white);
  /* Radio Spacing - Light Mode */
  --spacing-radio-gap: var(--spacing-2);
  /* 8px = 0.5rem */
  /* Modal Colors - Light Mode */
  --modal-overlay: var(--color-gray-800);
  --modal-content: var(--color-white);
  --modal-border: var(--color-gray-200);
  /* Modal Spacing - Light Mode */
  --modal-padding-horizontal: 1.25rem;
  --modal-padding-vertical: 1rem;
  --modal-gap: 1rem;
  /* Modal Sizes - Light Mode */
  --modal-md: 32.5rem;
  --modal-max-height: 60vh;
  /* Updated to match actual usage in Modal component */
  /* Modal Shadows - Light Mode */
  --shadow-modal: var(--shadow-sm);
  /* Modal Typography - Light Mode */
  --type-size-modal-title: var(--font-size-lg);
  --font-weight-modal-title: var(--font-weight-semibold);
  /* Modal Z-Index - Light Mode */
  --z-modal-overlay: 50;
  /* Z-index for modal content */
  --z-modal-overlay-backdrop: 49;
  /* Z-index for overlay backdrop (one level below modal) */
  /* Modal Opacity - Light Mode */
  --opacity-modal-overlay: var(--opacity-70);
  /* Badge Colors */
  --badge-primary-bg: var(--color-gray-600);
  --badge-primary-text: var(--color-gray-100);
  --badge-secondary-bg: var(--color-gray-200);
  --badge-secondary-text: var(--color-gray-700);
  --badge-destructive-bg: var(--color-red-100);
  --badge-destructive-text: var(--color-red-700);
  --badge-success-bg: var(--color-green-100);
  --badge-success-text: var(--color-green-800);
  --badge-on-hold-bg: var(--color-orange-100);
  --badge-on-hold-text: var(--color-orange-700);
  /* Alert Colors */
  --alert-help-bg: var(--color-orange-100);
  --alert-help-text: var(--color-orange-700);
  --alert-info-bg: var(--color-blue-100);
  --alert-info-text: var(--color-blue-700);
  --alert-warning-bg: var(--color-red-100);
  --alert-warning-text: var(--color-red-700);
  --alert-success-bg: var(--color-green-100);
  --alert-success-text: var(--color-green-700);
  /* Input Colors */
  --input-default: var(--color-white);
  --input-hover: var(--color-white);
  --input-pressed: var(--color-white);
  --input-focus: var(--color-white);
  --input-error: var(--color-white);
  --input-error-hover: var(--color-white);
  --input-error-pressed: var(--color-white);
  --input-error-focus: var(--color-white);
  --input-disabled: var(--color-white);
  --input-border-default: var(--color-gray-200);
  --input-border-hover: var(--color-gray-400);
  --input-border-pressed: var(--color-gray-400);
  --input-border-focus: var(--color-brand-300);
  --input-border-error: var(--color-red-600);
  --input-border-error-hover: var(--color-red-700);
  --input-border-error-pressed: var(--color-red-600);
  --input-border-error-focus: var(--color-red-600);
  --input-border-disabled: var(--color-gray-100);
  --input-placeholder: var(--color-gray-400);
  --input-text-disabled: var(--color-gray-300);
  --input-ring-focus: var(--color-gray-300);
  --input-ring-error: var(--color-red-200);
  /* Dropdown Colors */
  --dropdown-default: var(--color-white);
  --dropdown-hover: var(--color-white);
  --dropdown-item-hover: var(--color-gray-100);
  --dropdown-item-danger-hover: var(--color-red-100);
  --dropdown-item-danger-pressed: var(--color-red-200);
  --dropdown-pressed: var(--color-white);
  --dropdown-focus: var(--color-white);
  --dropdown-disabled: var(--color-gray-100);
  --dropdown-border-default: var(--color-gray-200);
  --dropdown-border-hover: var(--color-gray-300);
  --dropdown-border-pressed: var(--color-gray-200);
  --dropdown-border-focus: var(--color-gray-300);
  --dropdown-border-disabled: var(--color-gray-200);
  --dropdown-list-bg: var(--color-white);
  --separator-border: var(--color-gray-200);
  /* Navigation Menu Colors */
  --nav-item-default: transparent;
  --nav-item-hover: var(--color-gray-50);
  --nav-item-pressed: var(--color-gray-100);
  --nav-item-active: var(--color-gray-100);
  --nav-item-focus: transparent;
  --nav-item-disabled: transparent;
  --nav-item-text-default: var(--text-tertiary);
  --nav-item-text-hover: var(--color-gray-800);
  --nav-item-text-pressed: var(--color-gray-800);
  --nav-item-text-active: var(--text-primary);
  --nav-item-text-focus: var(--color-gray-800);
  --nav-item-text-disabled: var(--color-gray-400);
  --nav-item-focus-ring: var(--color-brand-300);
  /* Table Colors */
  --table-bg: var(--color-white);
  --table-border: var(--color-gray-100);
  --table-header-bg: var(--color-white);
  --table-header-text: var(--color-gray-950);
  --table-row-hover: var(--color-gray-50);
  --table-cell-text: var(--color-gray-700);
  /* Close Button Text Colors */
  --close-btn-text: var(--color-gray-500);
  --close-btn-text-hover: var(--color-gray-700);
  /* Close Button Colors */
  --close-btn-help-bg: var(--color-orange-200);
  --close-btn-info-bg: var(--color-blue-200);
  --close-btn-warning-bg: var(--color-red-200);
  --close-btn-success-bg: var(--color-green-200);
  --close-btn-default-bg: var(--color-gray-200);
  --close-btn-modal-bg: var(--color-gray-100);
  /* Avatar Colors */
  --avatar-default: var(--color-gray-500);
  --avatar-hover: var(--color-gray-400);
  --avatar-pressed: var(--color-gray-500);
  --avatar-text: var(--color-white);
  /* Tooltip Colors */
  --tooltip-bg: var(--color-gray-800);
  --tooltip-text: var(--color-white);
  /* =========================================================================
     SEMANTIC SPACING - Component-specific spacing
     ========================================================================= */
  /* Button Spacing */
  --spacing-btn-xs-px: var(--spacing-1);
  --spacing-btn-xs-py: var(--spacing-1);
  --spacing-btn-xs-gap: var(--spacing-0_5);
  --spacing-btn-sm-px: var(--spacing-3);
  --spacing-btn-sm-py: var(--spacing-2);
  --spacing-btn-sm-gap: var(--spacing-1);
  --spacing-btn-md-px: var(--spacing-4);
  --spacing-btn-md-py: var(--spacing-3);
  --spacing-btn-md-gap: var(--spacing-1_5);
  /* Badge Spacing */
  --spacing-badge-px: var(--spacing-1_5);
  --spacing-badge-py: var(--spacing-0_5);
  --spacing-badge-gap: var(--spacing-0_5);
  /* Input Spacing */
  --spacing-input-px: var(--spacing-2);
  --spacing-input-py: var(--spacing-1_5);
  --spacing-input-gap: var(--spacing-1);
  /* Dropdown Spacing */
  --spacing-dropdown-px: var(--spacing-2);
  --spacing-dropdown-py: var(--spacing-1_5);
  --spacing-dropdown-gap: var(--spacing-1);
  --spacing-dropdown-list-px: var(--spacing-1);
  --spacing-dropdown-list-py: var(--spacing-1);
  --spacing-dropdown-list-gap: var(--spacing-0_5);
  --spacing-dropdown-title-px: var(--spacing-1);
  --spacing-dropdown-title-py: var(--spacing-2);
  /* Navigation Menu Spacing */
  --spacing-nav-item-px: var(--spacing-3);
  /* 12px */
  --spacing-nav-item-py: var(--spacing-2);
  /* 8px */
  /* Dropdown Sizing */
  --dropdown-button-width: 11.25rem;
  /* 180px - Standard dropdown button width */
  /* Dropdown Shadow */
  --shadow-dropdown: var(--shadow-sm);
  /* Input Border Width */
  --border-width-input: var(--border-width-1);
  /* Alert Spacing */
  --spacing-alert-p: var(--spacing-4);
  --spacing-alert-gap: var(--spacing-2);
  /* Alert Sizing */
  --alert-min-h: 56px;
  --spacing-breadcrumb-gap: var(--spacing-1);
  /* Switch Spacing */
  --spacing-switch-gap: var(--spacing-2);
  /* Tooltip Spacing */
  --spacing-tooltip-px: var(--spacing-2);
  --spacing-tooltip-py: var(--spacing-1_5);
  /* Table Spacing */
  --spacing-table-cell-px: var(--spacing-3);
  --spacing-table-cell-py: var(--spacing-3);
  --spacing-table-header-px: var(--spacing-3);
  --spacing-table-header-py: var(--spacing-3);
  /* Table Spacing - Small */
  --spacing-table-cell-px-sm: var(--spacing-1_5);
  --spacing-table-cell-py-sm: var(--spacing-1_5);
  --spacing-table-header-px-sm: var(--spacing-1_5);
  --spacing-table-header-py-sm: var(--spacing-1_5);
  /* =========================================================================
     SEMANTIC BORDER RADIUS - Component-specific radius
     ========================================================================= */
  --radius-btn: var(--border-radius-lg);
  --radius-badge: var(--border-radius-md);
  --radius-alert: var(--border-radius-base);
  --radius-input: var(--border-radius-md);
  --radius-dropdown: var(--border-radius-md);
  --radius-switch: var(--border-radius-full);
  --radius-checkbox: var(--border-radius-md);
  --radius-radio: var(--border-radius-full);
  --radius-overlay: var(--border-radius-lg);
  --radius-table: var(--border-radius-md);
  --radius-nav-item: var(--border-radius-md);
  --radius-tooltip: var(--border-radius-lg);
  /* Navigation Menu Border Width */
  --border-width-nav-item-hover: var(--border-width-4);
  /* Line Height - Light Mode */
  /* Note: Line heights are global tokens defined in global.css, not redefined here */
  /* Typography - Light Mode */
  --type-size-2xs: var(--font-size-2xs);
  --type-size-xs: var(--font-size-xs);
  --type-size-sm: var(--font-size-sm);
  --type-size-base: var(--font-size-base);
  --type-size-lg: var(--font-size-lg);
  --type-size-xl: var(--font-size-xl);
  --type-size-2xl: var(--font-size-2xl);
  --type-size-3xl: var(--font-size-3xl);
  --type-size-4xl: var(--font-size-4xl);
  --type-size-5xl: var(--font-size-5xl);
  --type-size-6xl: var(--font-size-6xl);
  --type-size-7xl: var(--font-size-7xl);
  --type-size-8xl: var(--font-size-8xl);
  --type-size-9xl: var(--font-size-9xl);
  --type-weight-normal: var(--font-weight-normal);
  --type-weight-medium: var(--font-weight-medium);
  --type-weight-semibold: var(--font-weight-semibold);
  /* Table Typography */
  --table-header-weight: var(--font-weight-semibold);
  --table-cell-weight: var(--font-weight-normal);
  /* =========================================================================
     SEMANTIC OPACITY - Component-specific opacity
     ========================================================================= */
  /* Tooltip Opacity */
  --opacity-tooltip: var(--opacity-70);
  /* FilterBox */
  --radius-filterbox: var(--spacing-1_5);
  --filterbox-border: var(--color-gray-200);
  --filterbox-bg: var(--color-white);
  --spacing-filterbox: var(--spacing-2);
  /* 8px */
  /* =========================================================================
     SEMANTIC SHADOWS - Component-specific shadows
     ========================================================================= */
  /* Note: All components now use standard global shadows (shadow-xs, shadow-sm, shadow-2xs)
     directly from global.css. No component-specific shadow aliases are needed. */
}

/* =========================================================================
   DARK MODE SEMANTIC TOKENS
   ========================================================================= */

.dark {
  /* Text Colors - Dark Mode */
  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-200);
  --text-tertiary: var(--color-gray-400);
  --text-disabled: var(--color-gray-500);
  --text-error: var(--color-red-400);
  --text-brand: var(--color-brand-500);
  --text-invert: var(--color-gray-950);
  /* Background Colors - Dark Mode */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-disabled: var(--color-gray-800);
  /* Button Colors - Primary (Dark Mode) */
  --btn-primary-default: var(--color-brand-500);
  --btn-primary-hover: var(--color-brand-600);
  --btn-primary-pressed: var(--color-brand-500);
  --btn-primary-disabled: var(--color-brand-800);
  --btn-primary-focus: var(--color-brand-500);
  --btn-primary-text: var(--color-gray-950);
  --btn-primary-text-disabled: var(--color-gray-400);
  /* Button Colors - Secondary (Dark Mode) */
  --btn-secondary-default: var(--color-gray-50);
  --btn-secondary-hover: var(--color-gray-100);
  --btn-secondary-pressed: var(--color-gray-200);
  --btn-secondary-focus: var(--color-gray-50);
  --btn-secondary-disabled: var(--color-gray-800);
  --btn-secondary-text: var(--color-gray-950);
  --btn-secondary-text-disabled: var(--color-gray-500);
  --btn-secondary-border-default: var(--color-gray-200);
  --btn-secondary-border-hover: var(--color-gray-300);
  --btn-secondary-border-pressed: var(--color-gray-300);
  --btn-secondary-border-disabled: var(--color-gray-700);
  --btn-secondary-border-focus: var(--color-gray-200);
  /* Button Colors - Danger (Dark Mode) */
  --btn-danger-default: var(--color-red-800);
  --btn-danger-hover: var(--color-red-600);
  --btn-danger-pressed: var(--color-red-800);
  --btn-danger-disabled: var(--color-red-800);
  --btn-danger-focus: var(--color-red-700);
  --btn-danger-text: var(--color-red-50);
  --btn-danger-text-disabled: var(--color-red-50);
  /* Button Colors - Ghost (Dark Mode) */
  --btn-ghost-default: transparent;
  --btn-ghost-hover: var(--color-gray-700);
  --btn-ghost-pressed: var(--color-gray-600);
  --btn-ghost-disabled: transparent;
  --btn-ghost-focus: transparent;
  --btn-ghost-text: var(--color-gray-200);
  --btn-ghost-text-disabled: var(--color-gray-500);
  /* Link Colors - Dark Mode */
  --link-primary: var(--color-gray-300);
  --link-primary-hover: var(--color-brand-500);
  --link-primary-focus: var(--color-gray-300);
  --link-secondary: var(--color-brand-600);
  --link-secondary-hover: var(--color-brand-600);
  --link-secondary-focus: var(--color-brand-500);
  --link-tertiary: var(--color-gray-400);
  --link-tertiary-hover: var(--color-gray-500);
  --link-tertiary-focus: var(--color-gray-400);
  --link-success: var(--color-green-500);
  --link-success-hover: var(--color-green-600);
  --link-success-focus: var(--color-green-500);
  --link-help: var(--color-orange-500);
  --link-help-hover: var(--color-orange-500);
  --link-help-focus: var(--color-orange-500);
  --link-info: var(--color-blue-500);
  --link-info-hover: var(--color-blue-600);
  --link-info-focus: var(--color-blue-500);
  --link-warning: var(--color-red-500);
  --link-warning-hover: var(--color-red-600);
  --link-warning-focus: var(--color-red-500);
  --link-disabled: var(--color-gray-400);
  /* Link Colors - Inside Alerts (Dark Mode) - Links need darker colors for light Alert backgrounds */
  --link-alert-help: var(--color-orange-700);
  --link-alert-help-hover: var(--color-orange-800);
  --link-alert-help-focus: var(--color-orange-700);
  --link-alert-info: var(--color-blue-600);
  --link-alert-info-hover: var(--color-blue-700);
  --link-alert-info-focus: var(--color-blue-600);
  --link-alert-warning: var(--color-red-700);
  --link-alert-warning-hover: var(--color-red-800);
  --link-alert-warning-focus: var(--color-red-700);
  --link-alert-success: var(--color-green-700);
  --link-alert-success-hover: var(--color-green-800);
  --link-alert-success-focus: var(--color-green-700);
  /* Switch Colors - Dark Mode */
  --switch-inactive-default: var(--color-gray-700);
  --switch-inactive-hover: var(--color-gray-600);
  --switch-inactive-pressed: var(--color-gray-700);
  --switch-inactive-focus: var(--color-gray-700);
  --switch-active-default: var(--color-blue-500);
  --switch-active-hover: var(--color-blue-600);
  --switch-active-pressed: var(--color-blue-500);
  --switch-active-focus: var(--color-blue-500);
  --switch-disabled: var(--color-gray-700);
  /* Checkbox Colors - Dark Mode */
  --checkbox-default: var(--color-gray-700);
  --checkbox-hover: var(--color-gray-600);
  --checkbox-pressed: var(--color-gray-700);
  --checkbox-selected: var(--color-blue-500);
  --checkbox-selected-hover: var(--color-blue-600);
  --checkbox-selected-pressed: var(--color-blue-500);
  --checkbox-disabled: var(--color-gray-700);
  --checkbox-border-default: var(--color-gray-600);
  --checkbox-border-hover: var(--color-gray-500);
  --checkbox-border-pressed: var(--color-gray-600);
  --checkbox-border-selected: var(--color-blue-500);
  --checkbox-border-selected-hover: var(--color-blue-600);
  --checkbox-border-selected-pressed: var(--color-blue-500);
  --checkbox-border-disabled: var(--color-gray-700);
  --checkbox-checkmark: var(--color-white);
  /* Checkbox Spacing - Dark Mode */
  --spacing-checkbox-gap: var(--spacing-2);
  /* 8px = 0.5rem */
  /* Radio Colors - Dark Mode */
  --radio-default: var(--color-gray-700);
  --radio-hover: var(--color-gray-600);
  --radio-pressed: var(--color-gray-700);
  --radio-selected: var(--color-blue-500);
  --radio-selected-hover: var(--color-blue-600);
  --radio-selected-pressed: var(--color-blue-500);
  --radio-disabled: var(--color-gray-700);
  --radio-border-default: var(--color-gray-600);
  --radio-border-hover: var(--color-gray-500);
  --radio-border-pressed: var(--color-gray-600);
  --radio-border-selected: var(--color-blue-500);
  --radio-border-selected-hover: var(--color-blue-600);
  --radio-border-selected-pressed: var(--color-blue-500);
  --radio-border-disabled: var(--color-gray-700);
  --radio-dot: var(--color-white);
  /* Radio Spacing - Dark Mode */
  --spacing-radio-gap: var(--spacing-2);
  /* 8px = 0.5rem */
  /* Badge Colors - Dark Mode */
  --badge-primary-bg: var(--color-gray-700);
  --badge-primary-text: var(--color-gray-200);
  --badge-secondary-bg: var(--color-gray-300);
  --badge-secondary-text: var(--color-gray-900);
  --badge-destructive-bg: var(--color-red-200);
  --badge-destructive-text: var(--color-red-800);
  --badge-success-bg: var(--color-green-200);
  --badge-success-text: var(--color-green-800);
  --badge-on-hold-bg: var(--color-orange-100);
  --badge-on-hold-text: var(--color-orange-700);
  /* Alert Colors - Dark Mode */
  --alert-help-bg: var(--color-orange-50);
  --alert-help-text: var(--color-orange-700);
  --alert-info-bg: var(--color-blue-50);
  --alert-info-text: var(--color-blue-600);
  --alert-warning-bg: var(--color-red-50);
  --alert-warning-text: var(--color-red-700);
  --alert-success-bg: var(--color-green-50);
  --alert-success-text: var(--color-green-700);
  /* Input Colors - Dark Mode */
  --input-default: var(--color-gray-700);
  --input-hover: var(--color-gray-700);
  --input-pressed: var(--color-gray-700);
  --input-focus: var(--color-gray-700);
  --input-error: var(--color-gray-700);
  --input-error-hover: var(--color-gray-700);
  --input-error-pressed: var(--color-gray-700);
  --input-error-focus: var(--color-gray-700);
  --input-disabled: var(--color-gray-700);
  --input-border-default: var(--color-gray-600);
  --input-border-hover: var(--color-gray-500);
  --input-border-pressed: var(--color-gray-600);
  --input-border-focus: var(--color-gray-600);
  --input-border-error: var(--color-red-500);
  --input-border-error-hover: var(--color-red-400);
  --input-border-error-pressed: var(--color-red-600);
  --input-border-error-focus: var(--color-red-500);
  --input-border-disabled: var(--color-gray-700);
  --input-placeholder: var(--color-gray-400);
  --input-text-disabled: var(--color-gray-500);
  --input-ring-focus: var(--color-gray-600);
  --input-ring-error: var(--color-red-800);
  /* Dropdown Colors - Dark Mode (mirror input) */
  --dropdown-default: var(--color-gray-700);
  --dropdown-hover: var(--color-gray-700);
  --dropdown-item-hover: var(--color-gray-700);
  --dropdown-item-danger-hover: var(--color-red-900);
  --dropdown-item-danger-pressed: var(--color-red-800);
  --dropdown-pressed: var(--color-gray-700);
  --dropdown-focus: var(--color-gray-700);
  --dropdown-disabled: var(--color-gray-700);
  --dropdown-border-default: var(--color-gray-600);
  --dropdown-border-hover: var(--color-gray-500);
  --dropdown-border-pressed: var(--color-gray-500);
  --dropdown-border-focus: var(--color-gray-600);
  --dropdown-border-disabled: var(--color-gray-700);
  --dropdown-list-bg: var(--color-gray-800);
  --separator-border: var(--color-gray-600);
  /* Navigation Menu Colors - Dark Mode */
  --nav-item-default: transparent;
  --nav-item-hover: var(--color-gray-700);
  --nav-item-pressed: var(--color-gray-600);
  --nav-item-active: var(--color-brand-800);
  --nav-item-focus: transparent;
  --nav-item-disabled: transparent;
  --nav-item-text-default: var(--text-tertiary);
  --nav-item-text-hover: var(--color-gray-200);
  --nav-item-text-pressed: var(--color-gray-200);
  --nav-item-text-active: var(--text-primary);
  --nav-item-text-focus: var(--color-gray-200);
  --nav-item-text-disabled: var(--color-gray-500);
  --nav-item-focus-ring: var(--color-brand-400);
  /* Table Colors - Dark Mode */
  --table-bg: var(--color-gray-800);
  --table-border: var(--color-gray-700);
  --table-header-bg: var(--color-gray-800);
  --table-header-text: var(--color-gray-50);
  --table-row-hover: var(--color-gray-700);
  --table-cell-text: var(--color-gray-300);
  /* Close Button Colors - Dark Mode */
  --close-btn-text: var(--color-gray-400);
  --close-btn-text-hover: var(--color-gray-300);
  /* Avatar Colors - Dark Mode */
  --avatar-default: var(--color-gray-500);
  --avatar-hover: var(--color-gray-400);
  --avatar-pressed: var(--color-gray-300);
  --avatar-text: var(--color-white);
  --close-btn-help-bg: var(--color-orange-100);
  --close-btn-info-bg: var(--color-blue-100);
  --close-btn-warning-bg: var(--color-red-100);
  --close-btn-success-bg: var(--color-green-100);
  --close-btn-default-bg: var(--color-gray-100);
  --close-btn-modal-bg: var(--color-gray-800);
  /* Tooltip Colors - Dark Mode */
  --tooltip-bg: var(--color-gray-600);
  --tooltip-text: var(--color-gray-50);
  /* Input Border Radius - Dark Mode */
  --radius-input: var(--border-radius-md);
  /* Typography - Dark Mode */
  /* Note: Typography tokens (font-size, font-weight) are global and don't change between light/dark mode.
     They are defined in :root section above and inherited here. */
  /* Modal Colors - Dark Mode */
  --modal-overlay: var(--color-gray-600);
  --modal-content: var(--color-gray-900);
  --modal-border: var(--color-gray-700);
  --modal-shadow: var(--shadow-lg);
  /* Modal Spacing - Dark Mode */
  --modal-padding: 1rem;
  --modal-padding-horizontal: 1.25rem;
  --modal-padding-vertical: 1rem;
  --modal-gap: 1rem;
  /* Modal Sizes - Dark Mode */
  --modal-sm: 20rem;
  --modal-md: 32.5rem;
  --modal-lg: 40rem;
  --modal-xl: 48rem;
  --modal-max-height: 60vh;
  /* Updated to match actual usage in Modal component */
  /* Modal Shadows - Dark Mode */
  --shadow-modal: var(--shadow-lg);
  /* Modal Typography - Dark Mode */
  --type-size-modal-title: var(--font-size-lg);
  --font-weight-modal-title: var(--font-weight-semibold);
  /* Modal Border Radius - Dark Mode */
  --radius-overlay: var(--border-radius-lg);
  /* Modal Z-Index - Dark Mode */
  --z-modal-overlay: 50;
  /* Z-index for modal content */
  --z-modal-overlay-backdrop: 49;
  /* Z-index for overlay backdrop (one level below modal) */
  /* Modal Opacity - Dark Mode */
  --opacity-modal-overlay: var(--opacity-75);
  /* Tooltip Opacity - Dark Mode */
  --opacity-tooltip: var(--opacity-75);
  /* FilterBox - Dark Mode */
  --filterbox-border: var(--color-gray-600);
  --filterbox-bg: var(--color-gray-700);
  --spacing-filterbox: var(--spacing-2);
  /* 8px */
}

/*noinspection CssInvalidAtRule*/

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select {
  color: inherit;
}

/*noinspection CssInvalidAtRule*/

/*noinspection CssInvalidAtRule*/

.tw2 .tw2-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tw2 .tw2-pointer-events-none{
  pointer-events: none;
}

.tw2 .tw2-fixed{
  position: fixed;
}

.tw2 .tw2-absolute{
  position: absolute;
}

.tw2 .tw2-relative{
  position: relative;
}

.tw2 .tw2-inset-0{
  inset: var(--spacing-0);
}

.tw2 .tw2-inset-4{
  inset: var(--spacing-4);
}

.tw2 .tw2-inset-x-0{
  left: var(--spacing-0);
  right: var(--spacing-0);
}

.tw2 .tw2-bottom-0{
  bottom: var(--spacing-0);
}

.tw2 .tw2-left-0{
  left: var(--spacing-0);
}

.tw2 .tw2-left-1\/2{
  left: 50%;
}

.tw2 .tw2-left-3{
  left: var(--spacing-3);
}

.tw2 .tw2-right-0{
  right: var(--spacing-0);
}

.tw2 .tw2-top-0{
  top: var(--spacing-0);
}

.tw2 .tw2-top-1\/2{
  top: 50%;
}

.tw2 .tw2-top-full{
  top: 100%;
}

.tw2 .tw2-z-0{
  z-index: 0;
}

.tw2 .tw2-z-10{
  z-index: 10;
}

.tw2 .tw2-z-20{
  z-index: 20;
}

.tw2 .tw2-z-50{
  z-index: 50;
}

.tw2 .tw2-z-modal-overlay{
  z-index: var(--z-modal-overlay);
}

.tw2 .tw2-z-modal-overlay-backdrop{
  z-index: var(--z-modal-overlay-backdrop);
}

.tw2 .tw2-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.tw2 .tw2-mb-3{
  margin-bottom: var(--spacing-3);
}

.tw2 .tw2-mt-0\.5{
  margin-top: 0.125rem;
}

.tw2 .tw2-mt-1{
  margin-top: var(--spacing-1);
}

.tw2 .tw2-mt-auto{
  margin-top: auto;
}

.tw2 .tw2-flex{
  display: flex;
}

.tw2 .tw2-inline-flex{
  display: inline-flex;
}

.tw2 .tw2-grid{
  display: grid;
}

.tw2 .tw2-h-10{
  height: var(--spacing-10);
}

.tw2 .tw2-h-12{
  height: var(--spacing-12);
}

.tw2 .tw2-h-2{
  height: var(--spacing-2);
}

.tw2 .tw2-h-4{
  height: var(--spacing-4);
}

.tw2 .tw2-h-5{
  height: var(--spacing-5);
}

.tw2 .tw2-h-6{
  height: var(--spacing-6);
}

.tw2 .tw2-h-7{
  height: var(--spacing-7);
}

.tw2 .tw2-h-8{
  height: var(--spacing-8);
}

.tw2 .tw2-h-9{
  height: var(--spacing-9);
}

.tw2 .tw2-h-\[10px\]{
  height: 10px;
}

.tw2 .tw2-h-auto{
  height: auto;
}

.tw2 .tw2-h-full{
  height: 100%;
}

.tw2 .tw2-max-h-\[320px\]{
  max-height: 320px;
}

.tw2 .tw2-max-h-\[calc\(100vh-2rem\)\]{
  max-height: calc(100vh - 2rem);
}

.tw2 .tw2-max-h-modal-max-height{
  max-height: var(--modal-max-height);
}

.tw2 .tw2-min-h-0{
  min-height: var(--spacing-0);
}

.tw2 .tw2-min-h-\[148px\]{
  min-height: 148px;
}

.tw2 .tw2-min-h-\[164px\]{
  min-height: 164px;
}

.tw2 .tw2-min-h-\[72px\]{
  min-height: 72px;
}

.tw2 .tw2-min-h-\[92px\]{
  min-height: 92px;
}

.tw2 .tw2-min-h-screen{
  min-height: 100vh;
}

.tw2 .tw2-w-10{
  width: var(--spacing-10);
}

.tw2 .tw2-w-12{
  width: var(--spacing-12);
}

.tw2 .tw2-w-2{
  width: var(--spacing-2);
}

.tw2 .tw2-w-4{
  width: var(--spacing-4);
}

.tw2 .tw2-w-5{
  width: var(--spacing-5);
}

.tw2 .tw2-w-6{
  width: var(--spacing-6);
}

.tw2 .tw2-w-7{
  width: var(--spacing-7);
}

.tw2 .tw2-w-8{
  width: var(--spacing-8);
}

.tw2 .tw2-w-\[10px\]{
  width: 10px;
}

.tw2 .tw2-w-\[320px\]{
  width: 320px;
}

.tw2 .tw2-w-\[800px\]{
  width: 800px;
}

.tw2 .tw2-w-\[80vw\]{
  width: 80vw;
}

.tw2 .tw2-w-auto{
  width: auto;
}

.tw2 .tw2-w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.tw2 .tw2-w-full{
  width: 100%;
}

.tw2 .tw2-min-w-0{
  min-width: var(--spacing-0);
}

.tw2 .tw2-min-w-\[220px\]{
  min-width: 220px;
}

.tw2 .tw2-min-w-\[280px\]{
  min-width: 280px;
}

.tw2 .tw2-min-w-\[560px\]{
  min-width: 560px;
}

.tw2 .tw2-max-w-3xl{
  max-width: 48rem;
}

.tw2 .tw2-max-w-96{
  max-width: var(--spacing-96);
}

.tw2 .tw2-max-w-\[1200px\]{
  max-width: 1200px;
}

.tw2 .tw2-max-w-\[160px\]{
  max-width: 160px;
}

.tw2 .tw2-max-w-\[80vw\]{
  max-width: 80vw;
}

.tw2 .tw2-max-w-\[95vw\]{
  max-width: 95vw;
}

.tw2 .tw2-max-w-\[calc\(100vw-2rem\)\]{
  max-width: calc(100vw - 2rem);
}

.tw2 .tw2-max-w-none{
  max-width: none;
}

.tw2 .tw2-flex-1{
  flex: 1 1 0%;
}

.tw2 .tw2-flex-none{
  flex: none;
}

.tw2 .tw2-flex-shrink-0{
  flex-shrink: 0;
}

.tw2 .tw2-shrink-0{
  flex-shrink: 0;
}

.tw2 .-tw2-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw2 .-tw2-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw2 .tw2-translate-x-0{
  --tw-translate-x: var(--spacing-0);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw2 .tw2-translate-y-0{
  --tw-translate-y: var(--spacing-0);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw2 .tw2-rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tw2 .tw2-cursor-not-allowed{
  cursor: not-allowed;
}

.tw2 .tw2-cursor-pointer{
  cursor: pointer;
}

.tw2 .tw2-appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.tw2 .tw2-grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tw2 .tw2-flex-col{
  flex-direction: column;
}

.tw2 .tw2-flex-wrap{
  flex-wrap: wrap;
}

.tw2 .tw2-items-start{
  align-items: flex-start;
}

.tw2 .tw2-items-end{
  align-items: flex-end;
}

.tw2 .tw2-items-center{
  align-items: center;
}

.tw2 .tw2-justify-center{
  justify-content: center;
}

.tw2 .tw2-justify-between{
  justify-content: space-between;
}

.tw2 .tw2-gap-1{
  gap: var(--spacing-1);
}

.tw2 .tw2-gap-2{
  gap: var(--spacing-2);
}

.tw2 .tw2-gap-3{
  gap: var(--spacing-3);
}

.tw2 .tw2-gap-6{
  gap: var(--spacing-6);
}

.tw2 .tw2-gap-checkbox-gap{
  gap: var(--spacing-checkbox-gap);
}

.tw2 .tw2-gap-modal-gap{
  gap: var(--modal-gap);
}

.tw2 :is(.tw2-space-y-2 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-2) * var(--tw-space-y-reverse));
}

.tw2 :is(.tw2-space-y-3 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-3) * var(--tw-space-y-reverse));
}

.tw2 :is(.tw2-space-y-8 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-8) * var(--tw-space-y-reverse));
}

.tw2 .tw2-overflow-auto{
  overflow: auto;
}

.tw2 .tw2-overflow-hidden{
  overflow: hidden;
}

.tw2 .tw2-overflow-y-auto{
  overflow-y: auto;
}

.tw2 .tw2-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw2 .tw2-text-ellipsis{
  text-overflow: ellipsis;
}

.tw2 .tw2-whitespace-normal{
  white-space: normal;
}

.tw2 .tw2-whitespace-nowrap{
  white-space: nowrap;
}

.tw2 .tw2-break-words{
  overflow-wrap: break-word;
}

.tw2 .tw2-rounded-3xl{
  border-radius: 1.5rem;
}

.tw2 .tw2-rounded-\[10px\]{
  border-radius: 10px;
}

.tw2 .tw2-rounded-\[16px\]{
  border-radius: 16px;
}

.tw2 .tw2-rounded-\[18px\]{
  border-radius: 18px;
}

.tw2 .tw2-rounded-\[28px\]{
  border-radius: 28px;
}

.tw2 .tw2-rounded-checkbox{
  border-radius: var(--radius-checkbox);
}

.tw2 .tw2-rounded-filterbox{
  border-radius: var(--radius-filterbox);
}

.tw2 .tw2-rounded-full{
  border-radius: 9999px;
}

.tw2 .tw2-rounded-input{
  border-radius: var(--radius-input);
}

.tw2 .tw2-rounded-nav-item{
  border-radius: var(--radius-nav-item);
}

.tw2 .tw2-border{
  border-width: 1px;
}

.tw2 .tw2-border-solid{
  border-style: solid;
}

.tw2 .tw2-border-dashed{
  border-style: dashed;
}

.tw2 .tw2-border-checkbox-border-default{
  border-color: var(--checkbox-border-default);
}

.tw2 .tw2-border-checkbox-border-disabled{
  border-color: var(--checkbox-border-disabled);
}

.tw2 .tw2-border-checkbox-border-selected{
  border-color: var(--checkbox-border-selected);
}

.tw2 .tw2-border-dropdown-border-default{
  border-color: var(--dropdown-border-default);
}

.tw2 .tw2-border-input-border-default{
  border-color: var(--input-border-default);
}

.tw2 .tw2-border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.tw2 .tw2-border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.tw2 .tw2-bg-\[var\(--filterbox-bg\)\]{
  background-color: var(--filterbox-bg);
}

.tw2 .tw2-bg-avatar-default{
  background-color: var(--avatar-default);
}

.tw2 .tw2-bg-avatar-hover{
  background-color: var(--avatar-hover);
}

.tw2 .tw2-bg-avatar-pressed{
  background-color: var(--avatar-pressed);
}

.tw2 .tw2-bg-checkbox-default{
  background-color: var(--checkbox-default);
}

.tw2 .tw2-bg-checkbox-disabled{
  background-color: var(--checkbox-disabled);
}

.tw2 .tw2-bg-checkbox-selected{
  background-color: var(--checkbox-selected);
}

.tw2 .tw2-bg-input-default{
  background-color: var(--input-default);
}

.tw2 .tw2-bg-modal-content{
  background-color: var(--modal-content);
}

.tw2 .tw2-bg-modal-overlay{
  background-color: var(--modal-overlay);
}

.tw2 .tw2-bg-nav-item-active{
  background-color: var(--nav-item-active);
}

.tw2 .tw2-bg-nav-item-default{
  background-color: var(--nav-item-default);
}

.tw2 .tw2-bg-nav-item-disabled{
  background-color: var(--nav-item-disabled);
}

.tw2 .tw2-bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.tw2 .tw2-bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.tw2 .tw2-bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.tw2 .tw2-bg-slate-50\/70{
  background-color: rgb(248 250 252 / 0.7);
}

.tw2 .tw2-bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.tw2 .tw2-object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.tw2 .tw2-p-2{
  padding: var(--spacing-2);
}

.tw2 .tw2-p-3{
  padding: var(--spacing-3);
}

.tw2 .tw2-p-4{
  padding: var(--spacing-4);
}

.tw2 .tw2-p-6{
  padding: var(--spacing-6);
}

.tw2 .tw2-p-8{
  padding: var(--spacing-8);
}

.tw2 .tw2-p-filterbox{
  padding: var(--spacing-filterbox);
}

.tw2 .tw2-px-1{
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.tw2 .tw2-px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.tw2 .tw2-px-3{
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.tw2 .tw2-px-4{
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.tw2 .tw2-px-5{
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.tw2 .tw2-px-input-px{
  padding-left: var(--spacing-input-px);
  padding-right: var(--spacing-input-px);
}

.tw2 .tw2-px-modal-padding-horizontal{
  padding-left: var(--modal-padding-horizontal);
  padding-right: var(--modal-padding-horizontal);
}

.tw2 .tw2-px-nav-item-px{
  padding-left: var(--spacing-nav-item-px);
  padding-right: var(--spacing-nav-item-px);
}

.tw2 .tw2-py-1{
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.tw2 .tw2-py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.tw2 .tw2-py-2{
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.tw2 .tw2-py-input-py{
  padding-top: var(--spacing-input-py);
  padding-bottom: var(--spacing-input-py);
}

.tw2 .tw2-py-modal-padding-vertical{
  padding-top: var(--modal-padding-vertical);
  padding-bottom: var(--modal-padding-vertical);
}

.tw2 .tw2-py-nav-item-py{
  padding-top: var(--spacing-nav-item-py);
  padding-bottom: var(--spacing-nav-item-py);
}

.tw2 .tw2-pb-3{
  padding-bottom: var(--spacing-3);
}

.tw2 .tw2-pb-4{
  padding-bottom: var(--spacing-4);
}

.tw2 .tw2-pl-10{
  padding-left: var(--spacing-10);
}

.tw2 .tw2-pr-3{
  padding-right: var(--spacing-3);
}

.tw2 .tw2-pr-4{
  padding-right: var(--spacing-4);
}

.tw2 .tw2-pt-0{
  padding-top: var(--spacing-0);
}

.tw2 .tw2-pt-0\.5{
  padding-top: 0.125rem;
}

.tw2 .tw2-pt-2{
  padding-top: var(--spacing-2);
}

.tw2 .tw2-pt-5{
  padding-top: var(--spacing-5);
}

.tw2 .tw2-text-left{
  text-align: left;
}

.tw2 .tw2-font-sans{
  font-family: var(--font-family-sans);
}

.tw2 .tw2-text-3xl{
  font-size: var(--type-size-3xl);
}

.tw2 .tw2-text-\[10px\]{
  font-size: 10px;
}

.tw2 .tw2-text-\[11px\]{
  font-size: 11px;
}

.tw2 .tw2-text-\[12px\]{
  font-size: 12px;
}

.tw2 .tw2-text-\[15px\]{
  font-size: 15px;
}

.tw2 .tw2-text-\[16px\]{
  font-size: 16px;
}

.tw2 .tw2-text-\[17px\]{
  font-size: 17px;
}

.tw2 .tw2-text-base{
  font-size: var(--type-size-base);
}

.tw2 .tw2-text-lg{
  font-size: var(--type-size-lg);
}

.tw2 .tw2-text-sm{
  font-size: var(--type-size-sm);
}

.tw2 .tw2-text-xs{
  font-size: var(--type-size-xs);
}

.tw2 .tw2-font-medium{
  font-weight: var(--type-weight-medium);
}

.tw2 .tw2-font-normal{
  font-weight: var(--type-weight-normal);
}

.tw2 .tw2-font-semibold{
  font-weight: var(--type-weight-semibold);
}

.tw2 .tw2-uppercase{
  text-transform: uppercase;
}

.tw2 .tw2-leading-2{
  line-height: var(--line-height-2);
}

.tw2 .tw2-leading-4{
  line-height: var(--line-height-4);
}

.tw2 .tw2-leading-none{
  line-height: 1;
}

.tw2 .tw2-tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}

.tw2 .tw2-tracking-\[-0\.03em\]{
  letter-spacing: -0.03em;
}

.tw2 .tw2-tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}

.tw2 .tw2-text-avatar-text{
  color: var(--avatar-text);
}

.tw2 .tw2-text-checkbox-checkmark{
  color: var(--checkbox-checkmark);
}

.tw2 .tw2-text-nav-item-text-active{
  color: var(--nav-item-text-active);
}

.tw2 .tw2-text-nav-item-text-default{
  color: var(--nav-item-text-default);
}

.tw2 .tw2-text-nav-item-text-disabled{
  color: var(--nav-item-text-disabled);
}

.tw2 .tw2-text-primary{
  color: var(--text-primary);
}

.tw2 .tw2-text-secondary{
  color: var(--text-secondary);
}

.tw2 .tw2-text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-slate-950{
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.tw2 .tw2-text-tertiary{
  color: var(--text-tertiary);
}

.tw2 .tw2-opacity-0{
  opacity: 0;
}

.tw2 .tw2-opacity-100{
  opacity: 1;
}

.tw2 .tw2-opacity-50{
  opacity: 0.5;
}

.tw2 .tw2-opacity-modal-overlay{
  opacity: var(--opacity-modal-overlay);
}

.tw2 .tw2-shadow-\[0_16px_36px_rgba\(15\,23\,42\,0\.12\)\]{
  --tw-shadow: 0 16px 36px rgba(15,23,42,0.12);
  --tw-shadow-colored: 0 16px 36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .tw2-shadow-\[0_6px_18px_rgba\(15\,23\,42\,0\.06\)\]{
  --tw-shadow: 0 6px 18px rgba(15,23,42,0.06);
  --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .tw2-shadow-modal{
  --tw-shadow: var(--shadow-modal);
  --tw-shadow-colored: var(--shadow-modal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .tw2-shadow-none{
  --tw-shadow: var(--shadow-none);
  --tw-shadow-colored: var(--shadow-none);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .tw2-shadow-xs{
  --tw-shadow: var(--shadow-xs);
  --tw-shadow-colored: var(--shadow-xs);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .tw2-transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw2 .tw2-transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw2 .tw2-transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw2 .tw2-transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw2 .tw2-transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw2 .tw2-duration-150{
  transition-duration: 150ms;
}

.tw2 .tw2-duration-200{
  transition-duration: 200ms;
}

.tw2 .tw2-ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tw2 .tw2-ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.tw2 .\[clip-path\:rect\(1px_1px\2c _1px\2c _1px\)\]{
  clip-path: rect(1px 1px, 1px, 1px);
}

.tw2 .\[container-type\:inline-size\]{
  container-type: inline-size;
}

/* Keep input/select text inheritance behavior from ZapKit index.css */

.tw2 .placeholder\:tw2-text-input-placeholder::-moz-placeholder{
  color: var(--input-placeholder);
}

.tw2 .placeholder\:tw2-text-input-placeholder::placeholder{
  color: var(--input-placeholder);
}

.tw2 .hover\:tw2-border-checkbox-border-hover:hover{
  border-color: var(--checkbox-border-hover);
}

.tw2 .hover\:tw2-border-checkbox-border-selected-hover:hover{
  border-color: var(--checkbox-border-selected-hover);
}

.tw2 .hover\:tw2-border-input-border-hover:hover{
  border-color: var(--input-border-hover);
}

.tw2 .hover\:tw2-bg-avatar-hover:hover{
  background-color: var(--avatar-hover);
}

.tw2 .hover\:tw2-bg-checkbox-hover:hover{
  background-color: var(--checkbox-hover);
}

.tw2 .hover\:tw2-bg-checkbox-selected-hover:hover{
  background-color: var(--checkbox-selected-hover);
}

.tw2 .hover\:tw2-bg-input-hover:hover{
  background-color: var(--input-hover);
}

.tw2 .hover\:tw2-bg-nav-item-hover:hover{
  background-color: var(--nav-item-hover);
}

.tw2 .hover\:tw2-bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.tw2 .hover\:tw2-bg-slate-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.tw2 .hover\:tw2-text-slate-900:hover{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.tw2 .hover\:tw2-shadow-\[0_12px_24px_rgba\(15\2c 23\2c 42\2c 0\.10\)\]:hover{
  --tw-shadow: 0 12px 24px rgba(15,23,42,0.10);
  --tw-shadow-colored: 0 12px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .hover\:tw2-shadow-sm:hover{
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .focus-visible\:tw2-border-input-border-pressed:focus-visible{
  border-color: var(--input-border-pressed);
}

.tw2 .focus-visible\:tw2-bg-input-focus:focus-visible{
  background-color: var(--input-focus);
}

.tw2 .focus-visible\:tw2-outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.tw2 .focus-visible\:tw2-outline-offset-0:focus-visible{
  outline-offset: 0px;
}

.tw2 .focus-visible\:tw2-ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.tw2 .focus-visible\:tw2-ring-input-ring-focus:focus-visible{
  --tw-ring-color: var(--input-ring-focus);
}

.tw2 .focus-visible\:tw2-ring-nav-item-focus-ring:focus-visible{
  --tw-ring-color: var(--nav-item-focus-ring);
}

.tw2 .focus-visible\:tw2-ring-slate-300:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
}

.tw2 .focus-visible\:tw2-ring-offset-0:focus-visible{
  --tw-ring-offset-width: 0px;
}

.tw2 .active\:tw2-border-checkbox-border-pressed:active{
  border-color: var(--checkbox-border-pressed);
}

.tw2 .active\:tw2-border-checkbox-border-selected-pressed:active{
  border-color: var(--checkbox-border-selected-pressed);
}

.tw2 .active\:tw2-border-input-border-pressed:active{
  border-color: var(--input-border-pressed);
}

.tw2 .active\:tw2-bg-avatar-pressed:active{
  background-color: var(--avatar-pressed);
}

.tw2 .active\:tw2-bg-checkbox-pressed:active{
  background-color: var(--checkbox-pressed);
}

.tw2 .active\:tw2-bg-checkbox-selected-pressed:active{
  background-color: var(--checkbox-selected-pressed);
}

.tw2 .active\:tw2-bg-input-pressed:active{
  background-color: var(--input-pressed);
}

.tw2 .active\:tw2-bg-nav-item-pressed:active{
  background-color: var(--nav-item-pressed);
}

.tw2 .active\:tw2-shadow-xs:active{
  --tw-shadow: var(--shadow-xs);
  --tw-shadow-colored: var(--shadow-xs);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 .disabled\:tw2-pointer-events-none:disabled{
  pointer-events: none;
}

.tw2 .disabled\:tw2-cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.tw2 .disabled\:tw2-border-input-border-disabled:disabled{
  border-color: var(--input-border-disabled);
}

.tw2 .disabled\:tw2-bg-input-disabled:disabled{
  background-color: var(--input-disabled);
}

.tw2 .disabled\:tw2-text-input-text-disabled:disabled{
  color: var(--input-text-disabled);
}

.tw2 .disabled\:tw2-opacity-50:disabled{
  opacity: 0.5;
}

.tw2 .disabled\:tw2-shadow-none:disabled{
  --tw-shadow: var(--shadow-none);
  --tw-shadow-colored: var(--shadow-none);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw2 :is(.tw2-group:hover .group-hover\:tw2-opacity-100){
  opacity: 1;
}

.tw2 :is(.tw2-peer:checked ~ .peer-checked\:tw2-opacity-100){
  opacity: 1;
}

.tw2 :is(.tw2-peer:focus-visible ~ .peer-focus-visible\:tw2-outline-none){
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.tw2 :is(.tw2-peer:focus-visible ~ .peer-focus-visible\:tw2-ring-2){
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.tw2 :is(.tw2-peer:focus-visible ~ .peer-focus-visible\:tw2-ring-checkbox-border-default){
  --tw-ring-color: var(--checkbox-border-default);
}

.tw2 :is(.tw2-peer:focus-visible ~ .peer-focus-visible\:tw2-ring-checkbox-border-selected){
  --tw-ring-color: var(--checkbox-border-selected);
}

.tw2 :is(.tw2-peer:focus-visible ~ .peer-focus-visible\:tw2-ring-offset-2){
  --tw-ring-offset-width: 2px;
}

@media (min-width: var(--breakpoint-xl)){
  .tw2 .xl\:tw2-grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}