/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@layer properties;
:root {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;
  --color-brand-lightBg: #D6DEF6;
  --color-brand-darkBg: #1945C8;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #330761;
  --color-violet: #696cff;
  --color-risk-critical: #FF3E1D;
  --color-risk-criticalBg: rgba(255, 62, 29, 0.1);
  --color-risk-high: #FF7B00;
  --color-risk-highBg: rgba(255, 123, 0, 0.1);
  --color-risk-medium: #EBA109;
  --color-risk-mediumBg: rgba(235, 161, 9, 0.1);
  --color-risk-low: #447C25;
  --color-risk-lowBg: rgba(68, 124, 37, 0.1);
  --color-status-new: #1945C8;
  --color-status-newBg: rgba(25, 69, 200, 0.1);
  --color-status-acknowledged: #EAB308;
  --color-status-acknowledgedBg: rgba(234, 179, 8, 0.1);
  --color-status-investigating: #FF7B00;
  --color-status-investigatingBg: rgba(255, 123, 0, 0.1);
  --color-status-resolved: #22C55E;
  --color-status-resolvedBg: rgba(34, 197, 94, 0.1);
  --color-status-dismissed: #6B7280;
  --color-status-dismissedBg: rgba(107, 114, 128, 0.1);
  --color-custom-link: #696CFF;
  --color-custom-footerText: #22303E;
  --color-custom-white: #ffffff;
  --color-custom-pageBackground: rgba(64, 24, 132, 0.2);
  --color-custom-headerGradientStart: #2E2B32;
  --color-custom-headerGradientEnd: #37343C;
  --color-custom-overlayPurple: #511293;
  --color-custom-overlayPurpleLight: rgba(51, 7, 97, 0.21);
  --color-custom-overlayPurpleDark: rgba(51, 7, 97, 0.7);
  --color-custom-textPrimary: rgba(34, 48, 62, 0.9);
  --color-custom-textSecondary: rgba(34, 48, 62, 0.7);
  --color-custom-violetAlpha32: rgba(105, 108, 255, 0.32);
  --color-custom-navigationActiveBackground: #f2f3f3;
  --color-custom-brandLightBg: #D6DEF6;
  --color-custom-brandDarkBg: #1945C8;
  --color-icon-violet-bg: rgba(105, 108, 255, 0.16);
  --color-icon-violet-fg: #696CFF;
  --color-icon-green-bg: #E8F9DF;
  --color-icon-green-fg: #71DD37;
  --color-icon-cyan-bg: rgba(3, 195, 236, 0.16);
  --color-icon-cyan-fg: #03C3EC;
  --color-icon-orange-bg: #FFF1D6;
  --color-icon-orange-fg: #FFB113;
  --color-icon-gray-bg: rgba(133, 146, 163, 0.16);
  --color-icon-gray-fg: #8592A3;
  --color-chart-cyan: #29D0D8;
  --color-chart-cyanBright: #03C3EC;
  --color-chart-green: #92D050;
  --color-chart-violet: #8068F4;
  --color-chart-lightGray: #E0E0E0;
  --color-chart-purple: #8A4EDF;
  --color-chart-teal: #00C2D9;
  --color-chart-darkGray: #333333;
  --color-chart-red: #E04848;
  --color-chart-gridLine: #eeeeee;
  --color-chart-gridLineDashed: rgba(34, 48, 62, 0.12);
  --color-chart-zeroLine: #c8ccd1;
  --color-chart-borderWhite: #ffffff;
  --color-chart-textDark: #4a4a4a;
  --color-chart-textGray: #888888;
  --color-chart-textLabel: rgba(34, 48, 62, 0.4);
  --color-primary: #3b82f6;
  --color-primaryHover: #2563eb;
  --color-primaryActive: #1d4ed8;
  --color-primary-alpha: rgba(59, 130, 246, 0.1);
  --color-secondary: #6b7280;
  --color-secondaryHover: #4b5563;
  --color-secondaryActive: #374151;
  --color-secondary-alpha: rgba(107, 114, 128, 0.1);
  --color-success: #22c55e;
  --color-successHover: #16a34a;
  --color-success-alpha: rgba(34, 197, 94, 0.1);
  --color-warning: #eab308;
  --color-warningHover: #ca8a04;
  --color-warning-alpha: rgba(234, 179, 8, 0.1);
  --color-danger: #ef4444;
  --color-dangerHover: #dc2626;
  --color-danger-alpha: rgba(239, 68, 68, 0.1);
  --color-violetHover: #5558e6;
  --color-violetActive: #4447cc;
  --color-violet-alpha: rgba(105, 108, 255, 0.1);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-15: rgba(255, 255, 255, 0.15);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-50: rgba(255, 255, 255, 0.5);
  --color-white-alpha-70: rgba(255, 255, 255, 0.7);
  --color-text-primary: #111827;
  --color-text-primary-dark: #f9fafb;
  --color-text-secondary: #4b5563;
  --color-text-secondary-dark: #9ca3af;
  --color-text-tertiary: #9ca3af;
  --color-text-tertiary-dark: #6b7280;
  --color-text-inverse: #f9fafb;
  --color-text-inverse-dark: #111827;
  --color-text-metric-value: rgba(34, 48, 62, 0.9);
  --color-text-metric-label: rgba(34, 48, 62, 0.7);
  --color-text-grid-line: rgba(34, 48, 62, 0.12);
  --color-background-white: #ffffff;
  --color-background-primary: #f9fafb;
  --color-background-primary-dark: #111827;
  --color-background-secondary: #f3f4f6;
  --color-background-secondary-dark: #1f2937;
  --color-background-tertiary: #e5e7eb;
  --color-background-tertiary-dark: #374151;
  --color-background-inverse: #111827;
  --color-background-inverse-dark: #f9fafb;
  --color-background-page: rgba(64, 24, 132, 0.2);
  --color-background-navigationActive: #f2f3f3;
  --color-border-primary: #e5e7eb;
  --color-border-primary-dark: #374151;
  --color-border-secondary: #d1d5db;
  --color-border-secondary-dark: #4b5563;
  --color-border-focus: #3b82f6;
  --color-footer-link: #696CFF;
  --color-footer-text: #22303E;
  --color-header-gradientStart: #2E2B32;
  --color-header-gradientEnd: #37343C;
  --color-overlay-purple: #511293;
  --color-overlay-purpleLight: rgba(51, 7, 97, 0.21);
  --color-overlay-purpleDark: rgba(51, 7, 97, 0.7);
  --color-dropdown-tonal-background: rgba(105, 108, 255, 0.16);
  --color-dropdown-tonal-text: #696CFF;
  --color-dropdown-tonal-divider: rgba(105, 108, 255, 0.32);
  --color-badge-entity-background: #f3f4f6;
  --color-badge-entity-text: #374151;
  --color-badge-entity-border: #e5e7eb;
  --color-badge-severity-critical-background: #FF3E1D;
  --color-badge-severity-critical-text: #ffffff;
  --color-badge-severity-critical-border: #FF3E1D;
  --color-badge-severity-high-background: #FF7B00;
  --color-badge-severity-high-text: #ffffff;
  --color-badge-severity-high-border: #FF7B00;
  --color-badge-severity-medium-background: #eab308;
  --color-badge-severity-medium-text: #111827;
  --color-badge-severity-medium-border: #eab308;
  --color-badge-severity-low-background: #3b82f6;
  --color-badge-severity-low-text: #ffffff;
  --color-badge-severity-low-border: #3b82f6;
  --color-badge-status-new-background: #1945C8;
  --color-badge-status-new-text: #ffffff;
  --color-badge-status-new-border: #1945C8;
  --color-badge-status-acknowledged-background: #EAB308;
  --color-badge-status-acknowledged-text: #111827;
  --color-badge-status-acknowledged-border: #EAB308;
  --color-badge-status-investigating-background: #FF7B00;
  --color-badge-status-investigating-text: #ffffff;
  --color-badge-status-investigating-border: #FF7B00;
  --color-badge-status-resolved-background: #22C55E;
  --color-badge-status-resolved-text: #ffffff;
  --color-badge-status-resolved-border: #22C55E;
  --color-badge-status-dismissed-background: #6B7280;
  --color-badge-status-dismissed-text: #ffffff;
  --color-badge-status-dismissed-border: #6B7280;
  --color-badge-risk-high-background: #ef4444;
  --color-badge-risk-high-text: #ffffff;
  --color-badge-risk-high-border: #ef4444;
  --color-badge-risk-medium-background: #eab308;
  --color-badge-risk-medium-text: #111827;
  --color-badge-risk-medium-border: #eab308;
  --color-badge-risk-low-background: #22c55e;
  --color-badge-risk-low-text: #ffffff;
  --color-badge-risk-low-border: #22c55e;
  --fontSize-3xs: 11px;
  --fontSize-xs: 12px;
  --fontSize-2xs: 13px;
  --fontSize-sm: 14px;
  --fontSize-md: 15px;
  --fontSize-base: 16px;
  --fontSize-lg: 18px;
  --fontSize-xl: 20px;
  --fontSize-2xl: 24px;
  --fontSize-3xl: 30px;
  --fontSize-4xl: 36px;
  --fontSize-5xl: 48px;
  --fontSize-6xl: 60px;
  --fontSize-7xl: 72px;
  --fontSize-8xl: 96px;
  --fontSize-9xl: 128px;
  --fontFamily-sans-0: Manrope;
  --fontFamily-sans-1: -apple-system;
  --fontFamily-sans-2: BlinkMacSystemFont;
  --fontFamily-sans-3: Segoe UI;
  --fontFamily-sans-4: sans-serif;
  --fontFamily-sans: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --fontFamily-serif-0: Georgia;
  --fontFamily-serif-1: Cambria;
  --fontFamily-serif-2: Times New Roman;
  --fontFamily-serif-3: Times;
  --fontFamily-serif-4: serif;
  --fontFamily-serif: Georgia, Cambria, Times New Roman, Times, serif;
  --fontFamily-mono-0: Consolas;
  --fontFamily-mono-1: Monaco;
  --fontFamily-mono-2: Courier New;
  --fontFamily-mono-3: monospace;
  --fontFamily-mono: Consolas, Monaco, Courier New, monospace;
  --fontFamily-display-0: Manrope;
  --fontFamily-display-1: sans-serif;
  --fontFamily-display: Manrope, sans-serif;
  --fontWeight-thin: 100;
  --fontWeight-extralight: 200;
  --fontWeight-light: 300;
  --fontWeight-normal: 400;
  --fontWeight-medium: 500;
  --fontWeight-semibold: 600;
  --fontWeight-bold: 700;
  --fontWeight-extrabold: 800;
  --fontWeight-black: 900;
  --lineHeight-18: 18px;
  --lineHeight-20: 20px;
  --lineHeight-28: 28px;
  --lineHeight-none: 1;
  --lineHeight-tight: 1.25;
  --lineHeight-snug: 1.375;
  --lineHeight-footer: 1.467;
  --lineHeight-normal: 1.5;
  --lineHeight-relaxed: 1.625;
  --lineHeight-loose: 2;
  --letterSpacing-tighter: -0.05em;
  --letterSpacing-tight: -0.025em;
  --letterSpacing-normal: 0em;
  --letterSpacing-wide: 0.025em;
  --letterSpacing-wider: 0.03em;
  --letterSpacing-widest: 0.1em;
  --letterSpacing-chartLabel: 0.4px;
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
  --spacing-none: 0px;
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-base: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;
  --spacing-6xl: 192px;
  --spacing-7xl: 256px;
  --spacing-8xl: 320px;
  --spacing-9xl: 384px;
  --borderRadius-none: 0px;
  --borderRadius-sm: 2px;
  --borderRadius-base: 4px;
  --borderRadius-md: 6px;
  --borderRadius-lg: 8px;
  --borderRadius-lg-plus: 10px;
  --borderRadius-xl: 12px;
  --borderRadius-2xl: 16px;
  --borderRadius-3xl: 24px;
  --borderRadius-full: 9999px;
  --boxShadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --boxShadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --boxShadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --boxShadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --boxShadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --boxShadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --boxShadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --boxShadow-none: 0 0 #0000;
  --boxShadow-header: 0px 6px 8px rgba(67, 64, 71, 0.53);
  --boxShadow-violet: 0px 2px 4px 0px rgba(105, 108, 255, 0.4);
  --boxShadow-violet-hover: 0px 4px 6px 0px rgba(85, 88, 230, 0.4);
  --boxShadow-violet-active: 0px 1px 2px 0px rgba(68, 71, 204, 0.4);
  --boxShadow-overlay: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  --boxShadow-button: 0px 2px 4px 0px rgba(105, 108, 255, 0.4);
  --boxShadow-buttonHover: 0px 4px 6px 0px rgba(85, 88, 230, 0.4);
  --boxShadow-buttonActive: 0px 1px 2px 0px rgba(68, 71, 204, 0.4);
  --boxShadow-modal: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  --boxShadow-drawer: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  --breakpoints-sm: 640px;
  --breakpoints-md: 768px;
  --breakpoints-lg: 1024px;
  --breakpoints-xl: 1280px;
  --breakpoints-2xl: 1536px;
  --layout-containerMaxWidth: 1180px;
  --layout-containerPadding: 2rem;
  --layout-headerHeight: 80px;
  --layout-headerNavGap: 2rem;
  --layout-footerHeight: 64px;
  --layout-footerPaddingX: 25px;
  --typography-fontFamily-body-0: Manrope;
  --typography-fontFamily-body-1: -apple-system;
  --typography-fontFamily-body-2: BlinkMacSystemFont;
  --typography-fontFamily-body-3: Segoe UI;
  --typography-fontFamily-body-4: sans-serif;
  --typography-fontFamily-body: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --typography-fontFamily-heading-0: Manrope;
  --typography-fontFamily-heading-1: sans-serif;
  --typography-fontFamily-heading: Manrope, sans-serif;
  --typography-fontFamily-code-0: Consolas;
  --typography-fontFamily-code-1: Monaco;
  --typography-fontFamily-code-2: Courier New;
  --typography-fontFamily-code-3: monospace;
  --typography-fontFamily-code: Consolas, Monaco, Courier New, monospace;
}
.font-sans {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}
.font-serif {
  font-family: Georgia, Cambria, Times New Roman, Times, serif;
}
.font-mono {
  font-family: Consolas, Monaco, Courier New, monospace;
}
.font-display {
  font-family: Manrope, sans-serif;
}
.text-3xs {
  font-size: 11px;
}
.text-xs {
  font-size: 12px;
}
.text-2xs {
  font-size: 13px;
}
.text-sm {
  font-size: 14px;
}
.text-md {
  font-size: 15px;
}
.text-base {
  font-size: 16px;
}
.text-lg {
  font-size: 18px;
}
.text-xl {
  font-size: 20px;
}
.text-2xl {
  font-size: 24px;
}
.text-3xl {
  font-size: 30px;
}
.text-4xl {
  font-size: 36px;
}
.text-5xl {
  font-size: 48px;
}
.text-6xl {
  font-size: 60px;
}
.text-7xl {
  font-size: 72px;
}
.text-8xl {
  font-size: 96px;
}
.text-9xl {
  font-size: 128px;
}
.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}
.leading-18 {
  line-height: 18px;
}
.leading-20 {
  line-height: 20px;
}
.leading-28 {
  line-height: 28px;
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.leading-snug {
  line-height: 1.375;
}
.leading-footer {
  line-height: 1.467;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-loose {
  line-height: 2;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.03em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.tracking-chartLabel {
  letter-spacing: 0.4px;
}
.typography-display-2xl {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 90px;
  letter-spacing: -0.02em;
}
.typography-display-xl {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  letter-spacing: -0.02em;
}
.typography-display-lg {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -0.02em;
}
.typography-heading-xl {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.01em;
}
.typography-heading-lg {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
}
.typography-heading-md {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.typography-heading-sm {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.typography-heading-xs {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.typography-body-xl {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.typography-body-lg {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.typography-body-md {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.typography-body-sm {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.typography-body-xs {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.typography-code-lg {
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.typography-code-md {
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.typography-code-sm {
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.typography-label-lg {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.typography-label-md {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.typography-label-sm {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.typography-caption {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.01em;
}
.typography-overline {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.box {
  box-sizing: border-box;
}
.flex {
  box-sizing: border-box;
}
.flex > * {
  box-sizing: border-box;
}
.grid {
  box-sizing: border-box;
}
.grid > * {
  box-sizing: border-box;
}
.grid--responsive {
  grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
}
@media (min-width: 768px) {
  .grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-tablet, var(--grid-cols-mobile, 2)), 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-desktop, var(--grid-cols-tablet, var(--grid-cols-mobile, 3))), 1fr);
  }
}
.stack {
  display: flex;
  flex-direction: var(--stack-direction, column);
  align-items: var(--stack-align, stretch);
  justify-content: var(--stack-justify, flex-start);
  gap: var(--stack-gap, 24px);
}
.stack--wrap {
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .stack {
    flex-direction: var(--stack-direction-sm, var(--stack-direction, column));
    align-items: var(--stack-align-sm, var(--stack-align, stretch));
    justify-content: var(--stack-justify-sm, var(--stack-justify, flex-start));
    gap: var(--stack-gap-sm, var(--stack-gap, 24px));
  }
}
@media (min-width: 768px) {
  .stack {
    flex-direction: var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column)));
    align-items: var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch)));
    justify-content: var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start)));
    gap: var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px)));
  }
}
@media (min-width: 1024px) {
  .stack {
    flex-direction: var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column))));
    align-items: var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch))));
    justify-content: var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start))));
    gap: var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px))));
  }
}
@media (min-width: 1280px) {
  .stack {
    flex-direction: var(--stack-direction-xl, var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column)))));
    align-items: var(--stack-align-xl, var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch)))));
    justify-content: var(--stack-justify-xl, var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start)))));
    gap: var(--stack-gap-xl, var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px)))));
  }
}
@media (min-width: 1536px) {
  .stack {
    flex-direction: var(--stack-direction-2xl, var(--stack-direction-xl, var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column))))));
    align-items: var(--stack-align-2xl, var(--stack-align-xl, var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch))))));
    justify-content: var(--stack-justify-2xl, var(--stack-justify-xl, var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start))))));
    gap: var(--stack-gap-2xl, var(--stack-gap-xl, var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px))))));
  }
}
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
.layout--sticky-footer {
  min-height: 100vh;
}
.layout--sticky-footer .layout__content {
  flex: 1 0 auto;
}
.layout--sticky-footer .footer {
  flex-shrink: 0;
}
.layout__content {
  width: 100%;
  box-sizing: border-box;
}
.layout__content-container {
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  padding: var(--layout-padding, var(--layout-containerPadding));
  padding-bottom: calc(var(--layout-padding, var(--layout-containerPadding)) * 0.5);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.layout__content--full-width {
  width: 100%;
  max-width: none;
}
@media (max-width: 768px) {
  .layout__content-container {
    padding: 16px !important;
  }
}
@media (max-width: 480px) {
  .layout__content-container {
    padding: 12px !important;
  }
}
.layout__content--no-padding {
  padding: 0;
}
.layout__content--compact {
  padding: 16px;
}
.layout__content--spacious {
  padding: 32px;
}
.intelation-divider {
  --divider-color: var(--color-border-primary, #e5e7eb);
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}
.intelation-divider--horizontal {
  width: 100%;
  height: 0;
  border-top-style: var(--divider-style, solid);
  border-top-color: var(--divider-color);
}
.intelation-divider--horizontal.intelation-divider--thickness-1 {
  border-top-width: 1px;
}
.intelation-divider--horizontal.intelation-divider--thickness-2 {
  border-top-width: 2px;
}
.intelation-divider--horizontal.intelation-divider--thickness-3 {
  border-top-width: 3px;
}
.intelation-divider--vertical {
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  border-left-style: var(--divider-style, solid);
  border-left-color: var(--divider-color);
}
.intelation-divider--vertical.intelation-divider--thickness-1 {
  border-left-width: 1px;
}
.intelation-divider--vertical.intelation-divider--thickness-2 {
  border-left-width: 2px;
}
.intelation-divider--vertical.intelation-divider--thickness-3 {
  border-left-width: 3px;
}
.intelation-divider--solid {
  --divider-style: solid;
}
.intelation-divider--dashed {
  --divider-style: dashed;
}
.intelation-divider--dotted {
  --divider-style: dotted;
}
.intelation-divider--with-label {
  display: flex;
  align-items: center;
  text-align: center;
  height: auto;
  border: none;
  gap: var(--spacing-3, 0.75rem);
}
.intelation-divider--with-label::before,
.intelation-divider--with-label::after {
  content: '';
  flex: 1;
  border-top-style: var(--divider-style, solid);
  border-top-color: var(--divider-color);
}
.intelation-divider--with-label.intelation-divider--thickness-1::before,
.intelation-divider--with-label.intelation-divider--thickness-1::after {
  border-top-width: 1px;
}
.intelation-divider--with-label.intelation-divider--thickness-2::before,
.intelation-divider--with-label.intelation-divider--thickness-2::after {
  border-top-width: 2px;
}
.intelation-divider--with-label.intelation-divider--thickness-3::before,
.intelation-divider--with-label.intelation-divider--thickness-3::after {
  border-top-width: 3px;
}
.intelation-divider__label {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  padding: 0 var(--spacing-2, 0.5rem);
}
.card {
  background: var(--color-background-white);
  box-shadow: var(--boxShadow-base);
  border-radius: var(--borderRadius-md);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.card--clickable {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--boxShadow-lg);
}
.card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 32px;
}
.card__help-container {
  position: absolute;
  top: 12px;
  right: 12px;
}
.card__help-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--borderRadius-base);
  transition: all 0.2s ease;
  position: relative;
}
.card__help-button:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.card__help-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}
.card__help-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__help-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-text-primary);
  color: var(--color-background-white);
  padding: 8px 12px;
  border-radius: var(--borderRadius-md);
  box-shadow: var(--boxShadow-lg);
  font-size: var(--fontSize-sm);
  line-height: 1.4;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  max-width: 250px;
  min-width: 150px;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
}
.card__help-container:hover .card__help-tooltip {
  opacity: 1;
  visibility: visible;
}
.card__help-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-bottom-color: var(--color-text-primary);
}
.card__menu-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--borderRadius-base);
  transition: all 0.2s ease;
}
.card__menu-button:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.card__menu-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}
.card__menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textPrimary);
  margin: 0;
}
.card__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-20);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textSecondary);
  margin: 0;
}
.card__content {
  display: flex;
  flex-direction: column;
}
.card--sectioned {
  padding: 0;
  gap: 0;
}
.card__content--sectioned {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}
.card--image-overlay {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal;
  height: 180px;
  padding: 16px;
}
.card--image-overlay .card__header,
.card--image-overlay .card__menu-button,
.card--image-overlay .card__content {
  position: relative;
  z-index: 1;
}
.card--image-overlay .card__title {
  color: var(--color-text-inverse);
}
.card--image-overlay .card__description {
  color: var(--color-text-inverse);
}
.card--image-overlay .card__menu-button {
  color: var(--color-text-inverse);
}
.card--image-overlay .card__menu-button:hover {
  background-color: var(--color-primary-alpha);
  color: var(--color-text-inverse);
}
.card--list {
  gap: 12px;
}
.card--list .card__header {
  padding-right: 0;
}
.card--list .card__content--list {
  gap: 0;
  padding: 0;
}
.card--multi-section {
  padding: 0;
  gap: 0;
}
.card--multi-section .card__header {
  padding: 32px 24px 0;
}
.card--multi-section .card__footer {
  padding: 0 24px 24px;
}
.card__footer {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
  color: var(--color-custom-textSecondary);
  text-align: center;
  padding: 16px 24px 0;
}
.card__metric {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.card__metric-value {
  font-family: var(--fontFamily-sans);
  font-style: normal;
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-3xl);
  line-height: var(--lineHeight-tight);
  color: var(--color-text-metric-value);
  margin: 0;
}
.card__metric-label {
  font-family: var(--fontFamily-sans);
  font-style: normal;
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  letter-spacing: var(--letterSpacing-wide);
  color: var(--color-text-metric-label);
  margin: 0;
}
.card-section {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 32px 24px;
}
.card-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.card-section__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textPrimary);
  margin: 0;
}
.card-section__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-20);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textSecondary);
  margin: 0;
}
.card-section__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.card-section__divider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 30px;
  width: 1px;
  background-color: var(--color-chart-gridLineDashed);
  pointer-events: none;
}
.card-section__divider--gap-none {
  top: 0;
  bottom: 0;
}
.card-section__divider--gap-sm {
  top: 0;
  bottom: 16px;
}
.card-section__divider--gap-md {
  top: 0;
  bottom: 30px;
}
.card-section__divider--gap-lg {
  top: 0;
  bottom: 48px;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  transition: background-color 0.15s ease;
  font-family: var(--fontFamily-sans);
}
.list-item:first-child {
  padding-top: 0;
}
.list-item:last-child {
  padding-bottom: 0;
}
.list-item--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 12px;
  margin: 0 -12px;
}
.list-item--clickable:first-child {
  margin-top: -12px;
}
.list-item--clickable:last-child {
  margin-bottom: -12px;
}
.list-item--clickable:hover {
  background-color: var(--color-background-secondary);
}
.list-item--clickable:active {
  background-color: var(--color-background-tertiary);
}
.list-item--clickable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.list-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadius-lg);
  overflow: hidden;
  background-color: var(--color-background-secondary);
  font-size: var(--fontSize-2xl);
}
.list-item__icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-item__icon--violet {
  background: var(--color-icon-violet-bg);
  color: var(--color-icon-violet-fg);
}
.list-item__icon--green {
  background: var(--color-icon-green-bg);
  color: var(--color-icon-green-fg);
}
.list-item__icon--cyan {
  background: var(--color-icon-cyan-bg);
  color: var(--color-icon-cyan-fg);
}
.list-item__icon--orange {
  background: var(--color-icon-orange-bg);
  color: var(--color-icon-orange-fg);
}
.list-item__icon--gray {
  background: var(--color-icon-gray-bg);
  color: var(--color-icon-gray-fg);
}
.list-item__icon--sm {
  width: 32px;
  height: 32px;
  font-size: var(--fontSize-base);
}
.list-item__icon--md {
  width: 40px;
  height: 40px;
  font-size: var(--fontSize-2xl);
}
.list-item__icon--lg {
  width: 48px;
  height: 48px;
  font-size: var(--fontSize-4xl);
}
.list-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list-item--value-right .list-item__content {
  flex-direction: row;
  align-items: center;
}
.list-item__title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item__value {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}
.list-item__value--right {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}
.list-item__value--bottom {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-tertiary);
}
@media (max-width: 640px) {
  .list-item {
    gap: 10px;
  }
  .list-item__icon--sm {
    width: 28px;
    height: 28px;
  }
  .list-item__icon--md {
    width: 36px;
    height: 36px;
  }
  .list-item__icon--lg {
    width: 44px;
    height: 44px;
  }
  .list-item__title {
    font-size: 13px;
  }
  .list-item__value {
    font-size: 13px;
  }
}
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--fontFamily-sans);
  margin: 4px;
}
.stat-card--clickable {
  cursor: pointer;
  border-radius: var(--borderRadius-md);
  padding: 8px;
  margin: -4px;
  transition: background-color 0.15s ease;
}
.stat-card--clickable:hover {
  background-color: var(--color-background-secondary);
}
.stat-card--clickable:active {
  background-color: var(--color-background-tertiary);
}
.stat-card--clickable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-xl);
  margin-top: 2px;
}
.stat-card__icon > * {
  width: 24px;
  height: 24px;
}
.stat-card--icon-violet .stat-card__icon {
  background: var(--color-icon-violet-bg);
  color: var(--color-icon-violet-fg);
}
.stat-card--icon-green .stat-card__icon {
  background: var(--color-icon-green-bg);
  color: var(--color-icon-green-fg);
}
.stat-card--icon-cyan .stat-card__icon {
  background: var(--color-icon-cyan-bg);
  color: var(--color-icon-cyan-fg);
}
.stat-card--icon-orange .stat-card__icon {
  background: var(--color-icon-orange-bg);
  color: var(--color-icon-orange-fg);
}
.stat-card--icon-gray .stat-card__icon {
  background: var(--color-icon-gray-bg);
  color: var(--color-icon-gray-fg);
}
.stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stat-card__label {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  color: var(--color-text-secondary);
}
.stat-card__value {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  color: var(--color-text-primary);
}
.stat-card__trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fontSize-2xs);
  font-weight: var(--fontWeight-medium);
  line-height: var(--lineHeight-snug);
}
.stat-card__trend--up {
  color: var(--color-success);
}
.stat-card__trend--down {
  color: var(--color-danger);
}
.stat-card__trend--neutral {
  color: var(--color-text-secondary);
}
.stat-card__trend-value {
  font-weight: var(--fontWeight-semibold);
}
.stat-card__trend-label {
  color: var(--color-text-tertiary);
  font-weight: var(--fontWeight-normal);
}
.stat-card__comparison {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  color: var(--color-text-secondary);
}
.stat-card__comparison-value {
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
}
.stat-card__comparison-label {
  font-weight: var(--fontWeight-normal);
}
.stat-card--sm .stat-card__icon {
  width: 20px;
  height: 20px;
  padding: 4px;
  font-size: var(--fontSize-sm);
}
.stat-card--sm .stat-card__label {
  font-size: 11px;
  line-height: 16px;
}
.stat-card--sm .stat-card__value {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-tight);
}
.stat-card--md .stat-card__icon {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: var(--fontSize-base);
}
.stat-card--md .stat-card__label {
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
}
.stat-card--md .stat-card__value {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
}
.stat-card--lg .stat-card__icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  font-size: var(--fontSize-lg);
}
.stat-card--lg .stat-card__label {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-normal);
}
.stat-card--lg .stat-card__value {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-relaxed);
}
@media (max-width: 640px) {
  .stat-card {
    gap: 12px;
  }
  .stat-card--md .stat-card__icon {
    width: 22px;
    height: 22px;
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  line-height: 1.5;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
}
.button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.button--sm {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  border-radius: var(--borderRadius-md);
}
.button--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
  border-radius: var(--borderRadius-md);
}
.button--lg {
  padding: 12px 24px;
  font-size: var(--fontSize-lg);
  border-radius: var(--borderRadius-md);
}
.button--full-width {
  width: 100%;
}
.button--solid {
  color: white;
}
.button--solid.button--primary {
  background-color: var(--color-primary);
}
.button--solid.button--primary:hover:not(:disabled) {
  background-color: var(--color-primaryHover);
}
.button--solid.button--primary:active:not(:disabled) {
  background-color: var(--color-primaryActive);
}
.button--solid.button--secondary {
  background-color: var(--color-secondary);
}
.button--solid.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondaryHover);
}
.button--solid.button--secondary:active:not(:disabled) {
  background-color: var(--color-secondaryActive);
}
.button--solid.button--success {
  background-color: var(--color-success);
}
.button--solid.button--success:hover:not(:disabled) {
  background-color: var(--color-successHover);
}
.button--solid.button--warning {
  background-color: var(--color-warning);
  color: var(--color-gray-900);
}
.button--solid.button--warning:hover:not(:disabled) {
  background-color: var(--color-warningHover);
}
.button--solid.button--danger {
  background-color: var(--color-danger);
}
.button--solid.button--danger:hover:not(:disabled) {
  background-color: var(--color-dangerHover);
}
.button--solid.button--violet {
  background-color: var(--color-violet);
  box-shadow: 0px 2px 4px 0px rgba(105, 108, 255, 0.4);
}
.button--solid.button--violet:hover:not(:disabled) {
  background-color: var(--color-violetHover);
}
.button--solid.button--violet:active:not(:disabled) {
  background-color: var(--color-violetActive);
}
.button--outline {
  background-color: transparent;
  border: 1px solid currentColor;
}
.button--outline.button--primary {
  color: var(--color-primary);
}
.button--outline.button--primary:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: white;
}
.button--outline.button--secondary {
  color: var(--color-secondary);
}
.button--outline.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondary);
  color: white;
}
.button--outline.button--success {
  color: var(--color-success);
}
.button--outline.button--success:hover:not(:disabled) {
  background-color: var(--color-success);
  color: white;
}
.button--outline.button--warning {
  color: var(--color-warning);
}
.button--outline.button--warning:hover:not(:disabled) {
  background-color: var(--color-warning);
  color: var(--color-gray-900);
}
.button--outline.button--danger {
  color: var(--color-danger);
}
.button--outline.button--danger:hover:not(:disabled) {
  background-color: var(--color-danger);
  color: white;
}
.button--outline.button--violet {
  color: var(--color-violet);
}
.button--outline.button--violet:hover:not(:disabled) {
  background-color: var(--color-violet);
  color: white;
}
.button--ghost {
  background-color: transparent;
}
.button--ghost.button--primary {
  color: var(--color-primary);
}
.button--ghost.button--primary:hover:not(:disabled) {
  background-color: var(--color-primary-alpha);
}
.button--ghost.button--secondary {
  color: var(--color-secondary);
}
.button--ghost.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-alpha);
}
.button--ghost.button--success {
  color: var(--color-success);
}
.button--ghost.button--success:hover:not(:disabled) {
  background-color: var(--color-success-alpha);
}
.button--ghost.button--warning {
  color: var(--color-warning);
}
.button--ghost.button--warning:hover:not(:disabled) {
  background-color: var(--color-warning-alpha);
}
.button--ghost.button--danger {
  color: var(--color-danger);
}
.button--ghost.button--danger:hover:not(:disabled) {
  background-color: var(--color-danger-alpha);
}
.button--ghost.button--violet {
  color: var(--color-violet);
}
.button--ghost.button--violet:hover:not(:disabled) {
  background-color: var(--color-violet-alpha);
}
.button--link {
  background-color: transparent;
  padding: 0;
  text-decoration: underline;
}
.button--link.button--primary {
  color: var(--color-primary);
}
.button--link.button--primary:hover:not(:disabled) {
  color: var(--color-primaryHover);
}
.button--link.button--secondary {
  color: var(--color-secondary);
}
.button--link.button--secondary:hover:not(:disabled) {
  color: var(--color-secondaryHover);
}
.button--link.button--success {
  color: var(--color-success);
}
.button--link.button--success:hover:not(:disabled) {
  color: var(--color-successHover);
}
.button--link.button--warning {
  color: var(--color-warning);
}
.button--link.button--warning:hover:not(:disabled) {
  color: var(--color-warningHover);
}
.button--link.button--danger {
  color: var(--color-danger);
}
.button--link.button--danger:hover:not(:disabled) {
  color: var(--color-dangerHover);
}
.button--link.button--violet {
  color: var(--color-violet);
}
.button--link.button--violet:hover:not(:disabled) {
  color: var(--color-violetHover);
}
.button--disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.button--loading {
  position: relative;
  color: transparent;
}
.button--loading .button__content,
.button--loading .button__icon {
  visibility: hidden;
}
.button__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button__spinner-icon {
  width: 1em;
  height: 1em;
  animation: spin 0.8s linear infinite;
}
.button--sm .button__spinner-icon {
  width: 0.875em;
  height: 0.875em;
}
.button--lg .button__spinner-icon {
  width: 1.25em;
  height: 1.25em;
}
.button__spinner-track {
  opacity: 0.25;
}
.button__spinner-path {
  opacity: 1;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.button__icon--left {
  margin-right: 8px;
}
.button__icon--right {
  margin-left: 8px;
}
.button__icon svg {
  width: 1em;
  height: 1em;
}
.button__content {
  display: inline-flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .button,
  .button__spinner-icon {
    transition: none;
    animation: none;
  }
}
@media (prefers-contrast: high) {
  .button:focus-visible {
    outline-width: 3px;
  }
}
.input-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.input-container--full-width {
  width: 100%;
}
.input-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
}
.input::placeholder {
  color: var(--color-text-tertiary);
}
.input:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.input--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.input--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.input--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
.input--with-left-icon.input--sm {
  padding-left: 36px;
}
.input--with-left-icon.input--md {
  padding-left: 40px;
}
.input--with-left-icon.input--lg {
  padding-left: 48px;
}
.input--with-right-icon.input--sm {
  padding-right: 36px;
}
.input--with-right-icon.input--md {
  padding-right: 40px;
}
.input--with-right-icon.input--lg {
  padding-right: 48px;
}
.input--error {
  border-color: var(--color-danger);
}
.input--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.input--success {
  border-color: var(--color-success);
}
.input--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.input--full-width {
  width: 100%;
}
.input-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.input-icon--left {
  left: 12px;
}
.input-icon--right {
  right: 12px;
}
.input-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.input-message--error {
  color: var(--color-danger);
}
.input-message--success {
  color: var(--color-success);
}
.input-message--helper {
  color: var(--color-text-secondary);
}
.textarea-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.textarea-container--full-width {
  width: 100%;
}
.textarea-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.textarea {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
  min-height: 80px;
}
.textarea::placeholder {
  color: var(--color-text-tertiary);
}
.textarea:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.textarea--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.textarea--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.textarea--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
.textarea--resize-none {
  resize: none;
}
.textarea--resize-vertical {
  resize: vertical;
}
.textarea--resize-horizontal {
  resize: horizontal;
}
.textarea--resize-both {
  resize: both;
}
.textarea--error {
  border-color: var(--color-danger);
}
.textarea--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.textarea--success {
  border-color: var(--color-success);
}
.textarea--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.textarea--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.textarea--full-width {
  width: 100%;
}
.textarea-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.textarea-message--error {
  color: var(--color-danger);
}
.textarea-message--success {
  color: var(--color-success);
}
.textarea-message--helper {
  color: var(--color-text-secondary);
}
.select-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.select-container--full-width {
  width: 100%;
}
.select-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.select {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
}
.select:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.select--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.select--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.select--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
.select--error {
  border-color: var(--color-danger);
}
.select--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.select--success {
  border-color: var(--color-success);
}
.select--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.select--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.select--full-width {
  width: 100%;
}
.select-icon {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.select-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.select-message--error {
  color: var(--color-danger);
}
.select-message--success {
  color: var(--color-success);
}
.select-message--helper {
  color: var(--color-text-secondary);
}
.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox {
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--color-border-primary);
  border-radius: var(--borderRadius-sm);
  background-color: var(--color-background-primary);
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  margin: 0;
}
.checkbox:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}
.checkbox:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.checkbox:checked::after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 35%;
  height: 60%;
  border: solid white;
  border-width: 0 2px 2px 0;
}
.checkbox--sm {
  width: 16px;
  height: 16px;
}
.checkbox--md {
  width: 20px;
  height: 20px;
}
.checkbox--lg {
  width: 24px;
  height: 24px;
}
.checkbox--error {
  border-color: var(--color-danger);
}
.checkbox--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.checkbox--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.checkbox--disabled:checked {
  background-color: var(--color-text-tertiary);
  border-color: var(--color-text-tertiary);
}
.checkbox-label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.checkbox--disabled + .checkbox-label {
  opacity: 0.6;
  cursor: not-allowed;
}
.checkbox-message {
  font-size: var(--fontSize-sm);
  margin-left: 28px;
}
.checkbox-message--error {
  color: var(--color-danger);
}
.checkbox-message--helper {
  color: var(--color-text-secondary);
}
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.radio-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.radio {
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--color-border-primary);
  border-radius: 50%;
  background-color: var(--color-background-primary);
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  margin: 0;
}
.radio:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.radio:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.radio:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.radio:checked::after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: white;
}
.radio--sm {
  width: 16px;
  height: 16px;
}
.radio--md {
  width: 20px;
  height: 20px;
}
.radio--lg {
  width: 24px;
  height: 24px;
}
.radio--error {
  border-color: var(--color-danger);
}
.radio--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.radio--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.radio--disabled:checked {
  background-color: var(--color-text-tertiary);
  border-color: var(--color-text-tertiary);
}
.radio-label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.radio--disabled + .radio-label {
  opacity: 0.6;
  cursor: not-allowed;
}
.radio-message {
  font-size: var(--fontSize-sm);
  margin-left: 28px;
}
.radio-message--error {
  color: var(--color-danger);
}
.radio-message--helper {
  color: var(--color-text-secondary);
}
.switch-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.switch-container--label-left {
  flex-direction: row-reverse;
}
.switch-container__label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
.switch--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.switch__track {
  position: relative;
  display: block;
  background-color: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
  transition: background-color 0.2s ease;
}
.switch--checked .switch__track {
  background-color: var(--color-primary);
}
.switch--disabled .switch__track {
  background-color: var(--color-gray-200);
}
.switch--checked.switch--disabled .switch__track {
  background-color: var(--color-primary-alpha);
}
.switch__thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-custom-white);
  border-radius: var(--borderRadius-full);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boxShadow-sm);
}
.switch--sm .switch__track {
  width: 32px;
  height: 18px;
}
.switch--sm .switch__thumb {
  width: 14px;
  height: 14px;
  left: 2px;
}
.switch--sm.switch--checked .switch__thumb {
  left: 16px;
}
.switch--md .switch__track {
  width: 44px;
  height: 24px;
}
.switch--md .switch__thumb {
  width: 20px;
  height: 20px;
  left: 2px;
}
.switch--md.switch--checked .switch__thumb {
  left: 22px;
}
.switch--lg .switch__track {
  width: 56px;
  height: 30px;
}
.switch--lg .switch__thumb {
  width: 26px;
  height: 26px;
  left: 2px;
}
.switch--lg.switch--checked .switch__thumb {
  left: 28px;
}
.switch__spinner {
  width: 60%;
  height: 60%;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: var(--borderRadius-full);
  animation: switch-spin 0.6s linear infinite;
}
@keyframes switch-spin {
  to {
    transform: rotate(360deg);
  }
}
.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.switch:not(.switch--disabled):hover .switch__track {
  background-color: var(--color-gray-400);
}
.switch--checked:not(.switch--disabled):hover .switch__track {
  background-color: var(--color-primaryHover);
}
.switch:not(.switch--disabled):active .switch__thumb {
  width: calc(100% - 4px);
  max-width: 24px;
}
.switch--sm:not(.switch--disabled):active .switch__thumb {
  max-width: 16px;
}
.switch--lg:not(.switch--disabled):active .switch__thumb {
  max-width: 30px;
}
.switch--disabled .switch__thumb {
  box-shadow: none;
}
.switch-container:has(.switch--disabled) .switch-container__label {
  opacity: 0.5;
  cursor: not-allowed;
}
.date-picker {
  position: relative;
  width: 100%;
}
.date-picker__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.date-picker__input-wrapper--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.date-picker__input {
  width: 100%;
  padding: 8px 40px 8px 12px;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-picker__input--sm {
  padding: 6px 36px 6px 10px;
  font-size: var(--fontSize-xs);
}
.date-picker__input--md {
  padding: 8px 40px 8px 12px;
  font-size: var(--fontSize-sm);
}
.date-picker__input--lg {
  padding: 10px 44px 10px 14px;
  font-size: var(--fontSize-base);
}
.date-picker__input:hover:not(:disabled) {
  border-color: var(--color-border-secondary);
}
.date-picker__input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.date-picker__input:disabled {
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.date-picker__input::placeholder {
  color: var(--color-text-tertiary);
}
.date-picker__icons {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.date-picker__clear {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: var(--fontSize-sm);
  line-height: 1;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
}
.date-picker__clear:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}
.date-picker__calendar-icon {
  font-size: var(--fontSize-base);
  color: var(--color-text-secondary);
}
.date-picker__calendar {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  box-shadow: var(--boxShadow-lg);
  padding: 16px;
  min-width: 280px;
}
.date-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-primary);
}
.date-picker__preset {
  background: none;
  border: 1px solid var(--color-border-primary);
  padding: 6px 12px;
  font-size: var(--fontSize-xs);
  color: var(--color-text-primary);
  border-radius: var(--borderRadius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-picker__preset:hover {
  background-color: var(--color-background-secondary);
  border-color: var(--color-border-secondary);
}
.date-picker__preset:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.date-picker__month-year {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-primary);
}
.date-picker__nav-button {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-xl);
  line-height: 1;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
}
.date-picker__nav-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}
.date-picker__nav-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.date-picker__weekday {
  text-align: center;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  padding: 4px;
}
.date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.date-picker__day {
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-picker__day:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
}
.date-picker__day--other-month {
  color: var(--color-text-tertiary);
}
.date-picker__day--today {
  font-weight: var(--fontWeight-semibold);
  color: var(--color-primary);
}
.date-picker__day--selected {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  font-weight: var(--fontWeight-semibold);
}
.date-picker__day--selected:hover {
  background-color: var(--color-primaryHover);
}
.date-picker__day--in-range {
  background-color: var(--color-primary-alpha);
  color: var(--color-primary);
}
.date-picker__day--range-start {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  border-radius: var(--borderRadius-sm) 0 0 var(--borderRadius-sm);
}
.date-picker__day--range-start:only-child,
.date-picker__day--range-start.date-picker__day--selected {
  border-radius: var(--borderRadius-sm);
}
.date-picker__day--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.date-picker__day--disabled:hover {
  background-color: transparent;
}
.date-picker__day:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
.date-picker__time-select {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-primary);
}
.date-picker__time-input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-picker__time-input:hover {
  border-color: var(--color-border-secondary);
}
.date-picker__time-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.dropdown {
  position: relative;
  display: inline-block;
  font-family: var(--fontFamily-sans);
}
.dropdown__wrapper {
  position: relative;
}
.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
  text-transform: capitalize;
  outline: none;
}
.dropdown__trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.dropdown__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  width: 22px;
  height: 22px;
}
.dropdown__icon--rotated {
  transform: rotate(180deg);
}
.dropdown--tonal .dropdown__divider {
  width: 1px;
  height: 38px;
  background: var(--color-dropdown-tonal-divider);
  border: none;
  margin: 0;
  flex-shrink: 0;
}
.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  box-shadow: var(--boxShadow-lg);
  overflow: hidden;
  animation: dropdownSlideIn 0.15s ease-out;
  min-width: 160px;
}
@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: var(--color-background-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
}
.dropdown__option:hover:not(.dropdown__option--disabled) {
  background-color: var(--color-background-secondary);
}
.dropdown__option--selected {
  color: var(--color-primary);
  background-color: var(--color-brand-50);
}
.dropdown__option--selected:hover {
  background-color: var(--color-brand-100);
}
.dropdown__option--disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.5;
}
.dropdown__check-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}
.dropdown--tonal .dropdown__trigger {
  background-color: var(--color-dropdown-tonal-background);
  color: var(--color-dropdown-tonal-text);
  border-radius: var(--borderRadius-md);
}
.dropdown--tonal .dropdown__trigger:hover:not(:disabled) {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.9;
}
.dropdown--tonal .dropdown__trigger:active:not(:disabled) {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.8;
}
.dropdown--tonal.dropdown--open .dropdown__trigger {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.9;
}
.dropdown--outlined .dropdown__trigger {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
}
.dropdown--outlined .dropdown__trigger:hover:not(:disabled) {
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-50);
}
.dropdown--outlined.dropdown--open .dropdown__trigger {
  border-color: var(--color-border-focus);
}
.dropdown--filled .dropdown__trigger {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  border-radius: 8px;
}
.dropdown--filled .dropdown__trigger:hover:not(:disabled) {
  background-color: var(--color-background-tertiary);
}
.dropdown--filled.dropdown--open .dropdown__trigger {
  background-color: var(--color-background-tertiary);
}
.dropdown--small .dropdown__trigger {
  padding: 6px 12px;
  font-size: 13px;
}
.dropdown--small .dropdown__option {
  padding: 8px 12px;
  font-size: 13px;
}
.dropdown--medium .dropdown__trigger {
  padding: 0px 10px 0px 20px;
  font-size: var(--fontSize-md);
  line-height: 22px;
}
.dropdown--medium .dropdown__option {
  padding: 10px 16px;
  font-size: 14px;
}
.dropdown--large .dropdown__trigger {
  padding: 12px 20px;
  font-size: 15px;
}
.dropdown--large .dropdown__option {
  padding: 12px 20px;
  font-size: 15px;
}
.dropdown--disabled .dropdown__trigger {
  opacity: 0.5;
  cursor: not-allowed;
}
.dropdown--disabled .dropdown__trigger:hover {
  background-color: inherit;
}
@media (max-width: 640px) {
  .dropdown__menu {
    max-height: 240px;
    overflow-y: auto;
  }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field--label-left {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.form-field--label-floating {
  position: relative;
}
.form-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.form-field--sm {
  gap: 6px;
}
.form-field--sm.form-field--label-left {
  gap: 12px;
}
.form-field--md {
  gap: 8px;
}
.form-field--md.form-field--label-left {
  gap: 16px;
}
.form-field--lg {
  gap: 10px;
}
.form-field--lg.form-field--label-left {
  gap: 20px;
}
.form-field__label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-normal);
  transition: all 0.2s ease;
}
.form-field--label-left .form-field__label {
  min-width: 120px;
  padding-top: 10px;
  flex-shrink: 0;
}
.form-field--label-floating .form-field__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--color-background-white);
  padding: 0 4px;
  z-index: 1;
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
}
.form-field--label-floating .form-field__content:focus-within .form-field__label,
.form-field--label-floating .form-field__content:has(input:not(:placeholder-shown)) .form-field__label,
.form-field--label-floating .form-field__content:has(textarea:not(:placeholder-shown)) .form-field__label,
.form-field--label-floating .form-field__content:has(select:not([value=""])) .form-field__label {
  top: 0;
  font-size: var(--fontSize-xs);
  color: var(--color-primary);
}
.form-field--label-floating.form-field--error .form-field__content:focus-within .form-field__label {
  color: var(--color-danger);
}
.form-field--label-floating.form-field--success .form-field__content:focus-within .form-field__label {
  color: var(--color-success);
}
.form-field--sm .form-field__label {
  font-size: var(--fontSize-xs);
}
.form-field--lg .form-field__label {
  font-size: var(--fontSize-base);
}
.form-field--sm.form-field--label-left .form-field__label {
  min-width: 100px;
  padding-top: 8px;
}
.form-field--lg.form-field--label-left .form-field__label {
  min-width: 140px;
  padding-top: 12px;
}
.form-field__label--required {
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-field__required {
  color: var(--color-danger);
  font-size: var(--fontSize-base);
  line-height: 1;
}
.form-field__content {
  flex: 1;
  min-width: 0;
  position: relative;
}
.form-field--label-left .form-field__content {
  flex: 1;
}
.form-field__message {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  margin-top: 4px;
}
.form-field--sm .form-field__message {
  font-size: var(--fontSize-xs);
}
.form-field--lg .form-field__message {
  font-size: var(--fontSize-base);
}
.form-field__message--helper {
  color: var(--color-text-secondary);
}
.form-field__message--error {
  color: var(--color-danger);
}
.form-field__message--success {
  color: var(--color-success);
}
.form-field--error .form-field__content input,
.form-field--error .form-field__content select,
.form-field--error .form-field__content textarea {
  border-color: var(--color-danger);
}
.form-field--error .form-field__content input:focus,
.form-field--error .form-field__content select:focus,
.form-field--error .form-field__content textarea:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.form-field--success .form-field__content input,
.form-field--success .form-field__content select,
.form-field--success .form-field__content textarea {
  border-color: var(--color-success);
}
.form-field--success .form-field__content input:focus,
.form-field--success .form-field__content select:focus,
.form-field--success .form-field__content textarea:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.form-field--disabled .form-field__label {
  color: var(--color-text-tertiary);
}
.search-box {
  position: relative;
  width: 100%;
}
.search-box__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.search-box__icon {
  position: absolute;
  left: var(--spacing-3);
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 1rem;
}
.search-box__input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-10);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}
.search-box__input::placeholder {
  color: var(--color-text-tertiary);
}
.search-box--sm .search-box__icon {
  left: var(--spacing-2);
  font-size: 0.875rem;
}
.search-box--sm .search-box__input {
  padding: var(--spacing-1-5) var(--spacing-8) var(--spacing-1-5) var(--spacing-8);
  font-size: var(--font-size-sm);
}
.search-box--lg .search-box__icon {
  left: var(--spacing-4);
  font-size: 1.25rem;
}
.search-box--lg .search-box__input {
  padding: var(--spacing-3) var(--spacing-12) var(--spacing-3) var(--spacing-12);
  font-size: var(--font-size-lg);
}
.search-box__loader {
  position: absolute;
  right: var(--spacing-3);
  display: flex;
  align-items: center;
}
.search-box__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-primary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: search-box-spin 0.8s linear infinite;
}
@keyframes search-box-spin {
  to {
    transform: rotate(360deg);
  }
}
.search-box__clear {
  position: absolute;
  right: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.search-box__clear:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.search-box__clear:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}
.search-box__categories {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  padding: var(--spacing-1) 0;
  overflow-x: auto;
}
.search-box__category {
  padding: var(--spacing-1-5) var(--spacing-3);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.search-box__category:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.search-box__category--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.search-box__category:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}
.search-box__dropdown {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
.search-box--open .search-box__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.search-box__loading-text {
  padding: var(--spacing-4);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
}
.search-box__suggestion {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2-5) var(--spacing-3);
  cursor: pointer;
  transition: background-color 0.15s;
}
.search-box__suggestion:hover,
.search-box__suggestion--highlighted {
  background-color: var(--color-background-secondary);
}
.search-box__suggestion:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.search-box__suggestion:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.search-box__history-icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}
.search-box__suggestion-text {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}
.search-box__highlight {
  background-color: var(--color-warning-alpha-20);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  padding: 0 2px;
  border-radius: var(--radius-xs);
}
.search-box__suggestion-category {
  flex-shrink: 0;
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-full);
  background-color: var(--color-background-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.search-box__suggestion--history .search-box__suggestion-text {
  color: var(--color-text-secondary);
}
.header {
  background: linear-gradient(0deg, var(--color-header-gradientStart) 0%, var(--color-header-gradientEnd) 100%);
  box-shadow: var(--boxShadow-header);
  width: 100%;
  height: var(--layout-headerHeight);
  position: relative;
  z-index: 1000;
}
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  margin: 0 auto;
  padding: 0 var(--layout-padding, var(--layout-containerPadding));
  width: 100%;
}
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header__logo-button {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}
.header__logo-button:hover {
  background-color: var(--color-white-alpha-10);
}
.header__logo-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}
.header__navigation {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 2rem;
}
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--layout-headerNavGap, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__nav-item {
  display: flex;
}
.header__nav-link {
  background: none;
  border: none;
  color: var(--color-text-inverse);
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  font-weight: var(--fontWeight-semibold);
  line-height: 18px;
  letter-spacing: var(--letterSpacing-wider);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.header__nav-link:hover {
  background-color: var(--color-white-alpha-10);
  color: var(--color-text-inverse);
}
.header__nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}
.header__nav-link--active {
  background-color: var(--color-white-alpha-15);
  color: var(--color-text-inverse);
  font-weight: var(--fontWeight-semibold);
}
.header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-text-inverse);
  border-radius: 1px;
}
.header__nav-link--active {
  position: relative;
}
.header__nav-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.header__profile {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header__profile-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  color: var(--color-text-inverse);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
  min-width: 0;
}
.header__profile-button:hover {
  background-color: var(--color-white-alpha-10);
}
.header__profile-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}
.header__profile-button--open {
  background-color: var(--color-white-alpha-10);
}
.header__profile-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white-alpha-20);
}
.header__profile-initials {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-white-alpha-15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  border: 2px solid var(--color-white-alpha-20);
}
.header__profile-icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
}
.header__profile-icon-wrapper > * {
  width: 2.5rem;
  height: 2.5rem;
}
.header__profile-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.header__profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.header__profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.header__profile-email {
  font-size: 0.75rem;
  color: var(--color-white-alpha-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.header__profile-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.header__profile-arrow--open {
  transform: rotate(180deg);
}
.header__profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 0.5rem;
  box-shadow: var(--boxShadow-lg);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all 0.2s ease;
  z-index: 1001;
}
.header__profile-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header__profile-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.header__profile-menu-item {
  display: flex;
}
.header__profile-menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.header__profile-menu-link:hover {
  background-color: var(--color-background-secondary);
}
.header__profile-menu-link:focus {
  outline: none;
  background-color: var(--color-background-tertiary);
}
.header__profile-menu-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.header__profile-menu-icon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header__profile-menu-label {
  flex: 1;
  min-width: 0;
}
.header__profile-separator {
  height: 1px;
  background-color: var(--color-border-secondary);
  margin: 0.25rem 0;
}
@media (max-width: 768px) {
  .header__container {
    padding: 0 1rem;
  }
  .header__navigation {
    margin: 0 1rem;
  }
  .header__nav-list {
    gap: 1rem;
  }
  .header__nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  .header__profile-info {
    display: none;
  }
  .header__profile-dropdown {
    min-width: 180px;
  }
}
@media (max-width: 640px) {
  .header__container {
    padding: 0 0.75rem;
  }
  .header__navigation {
    margin: 0 0.5rem;
  }
  .header__nav-list {
    gap: 0.5rem;
  }
  .header__nav-link {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
  .header__profile-button {
    padding: 0.25rem;
  }
}
@media (prefers-contrast: high) {
  .header {
    border-bottom: 2px solid var(--color-text-inverse);
  }
  .header__nav-link {
    border: 1px solid transparent;
  }
  .header__nav-link:focus {
    border-color: var(--color-text-inverse);
    box-shadow: none;
  }
  .header__profile-button:focus {
    border: 2px solid var(--color-text-inverse);
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header__nav-link,
  .header__profile-button,
  .header__profile-arrow,
  .header__profile-dropdown,
  .header__profile-menu-link {
    transition: none;
  }
}
.footer {
  width: 100%;
  height: var(--layout-footerHeight);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.footer__container {
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  padding: 0 calc(var(--layout-footerPaddingX) + var(--layout-padding, var(--layout-containerPadding)));
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
}
.footer__copyright {
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-footer);
  color: var(--color-footer-text);
  white-space: nowrap;
}
.footer__links {
  display: flex;
  align-items: center;
}
.footer__links-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__link-item {
  margin: 0;
  padding: 0;
}
.footer__link {
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-footer);
  color: var(--color-footer-link);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}
.footer__link:hover:not(.footer__link--disabled) {
  color: var(--color-footer-link);
  text-decoration: underline;
}
.footer__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.footer__link--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}
.footer__link--disabled:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .footer__container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer__copyright {
    white-space: normal;
  }
  .footer__links-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}
.navigation-ribbon {
  width: 100%;
}
.navigation-ribbon__container {
  display: flex;
  border-bottom: 2px solid var(--color-border-primary);
}
.navigation-ribbon__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.navigation-ribbon__item:hover:not(.navigation-ribbon__item--disabled) {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}
.navigation-ribbon__item:focus {
  outline: none;
}
.navigation-ribbon__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  border-radius: var(--borderRadius-base);
}
.navigation-ribbon__item--active {
  color: var(--color-violet);
  border-bottom-color: var(--color-violet);
  font-weight: var(--fontWeight-semibold);
}
.navigation-ribbon__item--active:hover {
  color: var(--color-violetHover);
  border-bottom-color: var(--color-violetHover);
}
.navigation-ribbon__item--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.navigation-ribbon__item--disabled:hover {
  color: var(--color-text-tertiary);
  background-color: transparent;
}
.navigation-ribbon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontSize-lg);
}
.navigation-ribbon__label {
  line-height: var(--lineHeight-normal);
}
.navigation-ribbon--vertical .navigation-ribbon__container {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border-primary);
}
.navigation-ribbon--vertical .navigation-ribbon__item {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  justify-content: flex-start;
}
.navigation-ribbon--vertical .navigation-ribbon__item--active {
  border-bottom-color: transparent;
  border-right-color: var(--color-violet);
}
.navigation-ribbon--vertical .navigation-ribbon__item--active:hover {
  border-right-color: var(--color-violetHover);
}
@media (max-width: 640px) {
  .navigation-ribbon__container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navigation-ribbon__item {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--fontSize-xs);
  }
  .navigation-ribbon__icon {
    font-size: var(--fontSize-base);
  }
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  color: var(--color-custom-link);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
  cursor: pointer;
  outline: none;
  border-radius: var(--borderRadius-base);
}
.link--sm {
  font-size: var(--fontSize-sm);
  padding: 4px 8px;
}
.link--md {
  font-size: var(--fontSize-base);
  padding: 6px 12px;
}
.link--lg {
  font-size: var(--fontSize-lg);
  padding: 8px 16px;
}
.link--default {
  padding: 0;
}
.link--default:hover {
  color: var(--color-violet-600);
}
.link--default:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.link--nav {
  color: var(--color-text-secondary);
  padding: 8px 12px;
}
.link--nav:hover {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
}
.link--nav.link--active {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
  font-weight: var(--fontWeight-semibold);
}
.link--nav:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.link--breadcrumb {
  color: var(--color-text-secondary);
  padding: 4px 6px;
}
.link--breadcrumb:hover {
  color: var(--color-custom-link);
}
.link--breadcrumb.link--active {
  color: var(--color-text-primary);
  font-weight: var(--fontWeight-semibold);
  pointer-events: none;
}
.link--breadcrumb:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.link--underline .link__content {
  text-decoration: underline;
}
.link--underline:hover .link__content {
  text-decoration: none;
}
.link--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.link__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.link__icon svg {
  width: 16px;
  height: 16px;
}
.link--sm .link__icon svg {
  width: 14px;
  height: 14px;
}
.link--lg .link__icon svg {
  width: 20px;
  height: 20px;
}
.link__content {
  display: inline-block;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--borderRadius-md);
  transition: color 150ms ease, background-color 150ms ease;
  cursor: pointer;
  outline: none;
  position: relative;
}
.nav-item:hover {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
}
.nav-item--active {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
  font-weight: var(--fontWeight-semibold);
}
.nav-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.nav-item--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.nav-item--collapsed {
  justify-content: center;
  padding: 12px;
}
.nav-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.nav-item__icon svg {
  width: 20px;
  height: 20px;
}
.nav-item__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-custom-white);
  background-color: var(--color-custom-link);
  border-radius: var(--borderRadius-full);
  line-height: 1;
}
.nav-item__badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--color-custom-link);
  border-radius: var(--borderRadius-full);
  border: 2px solid var(--color-background-white);
}
.nav-item--collapsed.nav-item--active {
  position: relative;
}
.nav-item--collapsed.nav-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background-color: var(--color-custom-link);
  border-radius: 0 var(--borderRadius-sm) var(--borderRadius-sm) 0;
}
.menu__trigger {
  display: inline-block;
}
.menu {
  position: fixed;
  z-index: 1000;
  background: var(--color-custom-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.menu--open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.menu__content {
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}
.menu--sm {
  min-width: 160px;
  font-size: 0.875rem;
}
.menu--md {
  min-width: 200px;
  font-size: 0.9375rem;
}
.menu--lg {
  min-width: 240px;
  font-size: 1rem;
}
.menu__item-wrapper {
  position: relative;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-custom-textPrimary);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  outline: none;
}
.menu__item:hover:not(.menu__item--disabled) {
  background-color: var(--color-gray-100);
}
.menu__item:focus-visible {
  background-color: var(--color-gray-100);
  box-shadow: 0 0 0 2px var(--color-brand-500) inset;
}
.menu__item--active:not(.menu__item--disabled) {
  background-color: var(--color-gray-100);
}
.menu__item--disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.5;
}
.menu__item--has-submenu {
  padding-right: 8px;
}
.menu__item--sm {
  padding: 6px 10px;
  gap: 8px;
  font-size: 0.875rem;
}
.menu__item--md {
  padding: 8px 12px;
  gap: 12px;
  font-size: 0.9375rem;
}
.menu__item--lg {
  padding: 10px 14px;
  gap: 14px;
  font-size: 1rem;
}
.menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-600);
}
.menu__item:hover:not(.menu__item--disabled) .menu__item-icon {
  color: var(--color-custom-textPrimary);
}
.menu__item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.menu__item-label {
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__item-description {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__item-shortcut {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.75rem;
  font-family: monospace;
  line-height: 1;
}
.menu__item-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.menu__item-checkbox svg {
  width: 16px;
  height: 16px;
  color: var(--color-custom-white);
}
.menu__item[aria-checked="true"] .menu__item-checkbox {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
}
.menu__item-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}
.menu__item-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-500);
}
.menu__item[aria-checked="true"] .menu__item-radio {
  border-color: var(--color-brand-500);
}
.menu__item--loading {
  pointer-events: none;
}
.menu__item-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.menu__item-spinner {
  width: 16px;
  height: 16px;
  animation: menu-spin 1s linear infinite;
}
@keyframes menu-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.menu__item-submenu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
  margin-left: auto;
}
.menu__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  z-index: 1001;
}
.menu__separator {
  height: 1px;
  margin: 4px 0;
  background-color: var(--color-gray-200);
}
.menu__item-custom {
  padding: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: none;
  }
  .menu__item {
    transition: none;
  }
  .menu__item-spinner {
    animation: none;
  }
}
@media (prefers-color-scheme: dark) {
  .menu {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
  }
  .menu__item {
    color: var(--color-gray-100);
  }
  .menu__item:hover:not(.menu__item--disabled) {
    background-color: var(--color-gray-800);
  }
  .menu__item:focus-visible {
    background-color: var(--color-gray-800);
  }
  .menu__item--active:not(.menu__item--disabled) {
    background-color: var(--color-gray-800);
  }
  .menu__item--disabled {
    color: var(--color-gray-600);
  }
  .menu__item-icon {
    color: var(--color-gray-400);
  }
  .menu__item:hover:not(.menu__item--disabled) .menu__item-icon {
    color: var(--color-gray-100);
  }
  .menu__item-description {
    color: var(--color-gray-500);
  }
  .menu__item-shortcut {
    background-color: var(--color-gray-800);
    color: var(--color-gray-400);
  }
  .menu__separator {
    background-color: var(--color-gray-700);
  }
}
.intelation-breadcrumb {
  display: block;
  width: 100%;
}
.intelation-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.intelation-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.intelation-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.intelation-breadcrumb__link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}
.intelation-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.intelation-breadcrumb__link--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  cursor: default;
  pointer-events: none;
}
.intelation-breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1rem;
}
.intelation-breadcrumb__icon svg {
  width: 100%;
  height: 100%;
}
.intelation-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  user-select: none;
  font-size: var(--font-size-sm);
}
.intelation-breadcrumb__ellipsis-button {
  padding: var(--spacing-1) var(--spacing-3);
  font-weight: var(--font-weight-medium);
}
.intelation-breadcrumb__ellipsis-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}
@media (max-width: 640px) {
  .intelation-breadcrumb__list {
    gap: var(--spacing-1);
  }
  .intelation-breadcrumb__link {
    padding: var(--spacing-1);
  }
  .intelation-breadcrumb__item {
    font-size: var(--font-size-xs);
  }
  .intelation-breadcrumb__separator {
    font-size: var(--font-size-xs);
  }
}
@media (prefers-contrast: high) {
  .intelation-breadcrumb__link {
    text-decoration: underline;
  }
  .intelation-breadcrumb__link--active {
    text-decoration: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intelation-breadcrumb__link {
    transition: none;
  }
}
.tabs {
  display: flex;
  gap: 0;
  width: 100%;
}
.tabs--horizontal {
  flex-direction: column;
}
.tabs--vertical {
  flex-direction: row;
}
.tabs__list {
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs__list::-webkit-scrollbar {
  height: 4px;
}
.tabs__list::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}
.tabs__list::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
}
.tabs__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
.tabs--horizontal .tabs__list {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-primary);
}
.tabs--vertical .tabs__list {
  flex-direction: column;
  border-right: 1px solid var(--color-border-primary);
  min-width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}
.tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: none;
  border: none;
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  outline: none;
  position: relative;
}
.tabs__tab:hover:not(.tabs__tab--disabled) {
  color: var(--color-text-primary);
}
.tabs__tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
  z-index: 1;
}
.tabs__tab--active {
  color: var(--color-brand-600);
}
.tabs__tab--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.tabs__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.tabs__label {
  line-height: 1.5;
}
.tabs--underline .tabs__tab {
  border-bottom: 2px solid transparent;
}
.tabs--underline.tabs--horizontal .tabs__tab {
  margin-bottom: -1px;
}
.tabs--underline.tabs--vertical .tabs__tab {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-right: -1px;
}
.tabs--underline .tabs__tab--active {
  border-color: var(--color-brand-600);
}
.tabs--pills .tabs__tab {
  border-radius: var(--borderRadius-lg);
  margin: 4px;
}
.tabs--pills .tabs__tab--active {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}
.tabs--pills .tabs__tab:hover:not(.tabs__tab--disabled):not(.tabs__tab--active) {
  background-color: var(--color-background-secondary);
}
.tabs--cards .tabs__tab {
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-primary);
  margin: 4px;
  border-radius: var(--borderRadius-lg);
}
.tabs--cards.tabs--horizontal .tabs__tab {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tabs--cards.tabs--vertical .tabs__tab {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tabs--cards .tabs__tab--active {
  background-color: var(--color-background-white);
  border-color: var(--color-brand-600);
  color: var(--color-brand-700);
}
.tabs--cards .tabs__tab:hover:not(.tabs__tab--disabled):not(.tabs__tab--active) {
  background-color: var(--color-background-primary);
}
.tabs--sm .tabs__tab {
  padding: 8px 16px;
  font-size: var(--fontSize-sm);
}
.tabs--sm .tabs__icon {
  width: 16px;
  height: 16px;
}
.tabs--lg .tabs__tab {
  padding: 16px 24px;
  font-size: var(--fontSize-lg);
}
.tabs--lg .tabs__icon {
  width: 24px;
  height: 24px;
}
.tabs__panels {
  flex: 1;
  min-height: 0;
}
.tabs__panel {
  display: none;
  padding: 20px;
  animation: tabs-fade-in 0.2s ease;
}
.tabs__panel--active {
  display: block;
}
@keyframes tabs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tabs__tab,
  .tabs__panel {
    transition: none;
    animation: none;
  }
}
@media (max-width: 640px) {
  .tabs--vertical {
    flex-direction: column;
  }
  .tabs--vertical .tabs__list {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border-primary);
    min-width: auto;
    width: 100%;
  }
  .tabs__tab {
    padding: 10px 16px;
    font-size: var(--fontSize-sm);
  }
  .tabs__panel {
    padding: 16px;
  }
  .tabs--sm .tabs__tab {
    padding: 6px 12px;
    font-size: var(--fontSize-xs);
  }
  .tabs--lg .tabs__tab {
    padding: 12px 20px;
    font-size: var(--fontSize-base);
  }
}
.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination__list-item {
  display: flex;
}
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.pagination__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.pagination--sm .pagination__item {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.pagination--md .pagination__item {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}
.pagination--lg .pagination__item {
  min-width: 3rem;
  height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}
.pagination__item--page {
  gap: 0;
}
.pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.pagination__item--page.pagination__item--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  cursor: default;
}
.pagination__item--nav {
  gap: 0.375rem;
}
.pagination__item--nav:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.pagination__nav-icon {
  flex-shrink: 0;
}
.pagination--sm .pagination__nav-icon {
  width: 1rem;
  height: 1rem;
}
.pagination--md .pagination__nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pagination--lg .pagination__nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.pagination__nav-text {
  display: none;
}
@media (min-width: 640px) {
  .pagination__nav-text {
    display: inline;
  }
}
.pagination__item--first,
.pagination__item--last {
  min-width: auto;
  padding: 0;
}
.pagination--sm .pagination__item--first,
.pagination--sm .pagination__item--last {
  width: 2rem;
}
.pagination--md .pagination__item--first,
.pagination--md .pagination__item--last {
  width: 2.5rem;
}
.pagination--lg .pagination__item--first,
.pagination--lg .pagination__item--last {
  width: 3rem;
}
.pagination__item--ellipsis {
  cursor: default;
  pointer-events: none;
}
.pagination__ellipsis-icon {
  flex-shrink: 0;
}
.pagination--sm .pagination__ellipsis-icon {
  width: 1rem;
  height: 1rem;
}
.pagination--md .pagination__ellipsis-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pagination--lg .pagination__ellipsis-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.pagination__item:disabled,
.pagination--disabled .pagination__item {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination--outlined .pagination__item {
  border-color: var(--color-border-secondary);
}
.pagination--outlined .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--outlined .pagination__item--page.pagination__item--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.pagination--outlined .pagination__item--nav:hover:not(:disabled) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--outlined .pagination__item--ellipsis {
  border-color: transparent;
}
.pagination--rounded .pagination__item {
  border-radius: 9999px;
}
.pagination--rounded .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  background-color: var(--color-background-secondary);
}
.pagination--rounded .pagination__item--page.pagination__item--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.pagination--rounded.pagination--outlined .pagination__item {
  border-color: var(--color-border-secondary);
  border-radius: 9999px;
}
.pagination--rounded.pagination--outlined .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--rounded.pagination--outlined .pagination__item--page.pagination__item--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.pagination--rounded.pagination--outlined .pagination__item--ellipsis {
  border-color: transparent;
}
@media (prefers-contrast: high) {
  .pagination__item--page.pagination__item--active {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pagination__item {
    transition: none;
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fontFamily-base);
  font-weight: var(--fontWeight-medium);
  line-height: 1;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.badge--xs {
  padding: 2px 8px;
  font-size: 10px;
  height: 18px;
  gap: 2px;
}
.badge--compact {
  padding: 2px 8px;
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  gap: 2px;
}
.badge--sm {
  padding: 4px 12px;
  font-size: 11px;
  height: 20px;
  gap: 2px;
}
.badge--md {
  padding: 6px 14px;
  font-size: var(--fontSize-2xs);
  height: 24px;
  gap: 4px;
}
.badge--lg {
  padding: 8px 16px;
  font-size: var(--fontSize-sm);
  height: 28px;
  gap: 6px;
}
.badge--pill {
  border-radius: var(--borderRadius-full);
}
.badge--rectangular {
  border-radius: var(--borderRadius-md);
}
.badge--radius-none {
  border-radius: 0;
}
.badge--radius-sm {
  border-radius: 4px;
}
.badge--radius-md {
  border-radius: 8px;
}
.badge--radius-lg {
  border-radius: 12px;
}
.badge--radius-full {
  border-radius: 9999px;
}
.badge__content {
  display: inline-flex;
  align-items: center;
}
.badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge--sm .badge__icon {
  width: 12px;
  height: 12px;
}
.badge--md .badge__icon {
  width: 14px;
  height: 14px;
}
.badge--lg .badge__icon {
  width: 16px;
  height: 16px;
}
.badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.badge__remove:hover {
  opacity: 1;
}
.badge__remove:focus {
  outline: none;
  opacity: 1;
}
.badge__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--borderRadius-sm);
}
.badge--uppercase {
  text-transform: uppercase;
}
.badge--lowercase {
  text-transform: lowercase;
}
.badge--capitalize {
  text-transform: capitalize;
}
.badge--truncate {
  max-width: var(--badge-max-width, 150px);
  overflow: hidden;
}
.badge--truncate .badge__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge--custom.badge--solid {
  background-color: var(--badge-bg-color, currentColor);
  color: var(--badge-text-color, inherit);
  border-color: var(--badge-border-color, transparent);
}
.badge--custom.badge--outline {
  background-color: transparent;
  color: var(--badge-text-color, currentColor);
  border-color: var(--badge-border-color, currentColor);
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}
.badge__dot--pulse {
  animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.badge--primary.badge--solid {
  background-color: var(--color-primary);
  color: var(--color-background-white);
  border: 1px solid var(--color-primary);
}
.badge--primary.badge--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.badge--secondary.badge--solid {
  background-color: var(--color-text-secondary);
  color: var(--color-background-white);
  border: 1px solid var(--color-text-secondary);
}
.badge--secondary.badge--outline {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}
.badge--success.badge--solid {
  background-color: var(--color-success);
  color: var(--color-background-white);
  border: 1px solid var(--color-success);
}
.badge--success.badge--outline {
  background-color: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.badge--warning.badge--solid {
  background-color: var(--color-warning);
  color: var(--color-text-primary);
  border: 1px solid var(--color-warning);
}
.badge--warning.badge--outline {
  background-color: transparent;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}
.badge--danger.badge--solid {
  background-color: var(--color-danger);
  color: var(--color-background-white);
  border: 1px solid var(--color-danger);
}
.badge--danger.badge--outline {
  background-color: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.badge--entity.badge--solid {
  background-color: var(--color-badge-entity-background);
  color: var(--color-badge-entity-text);
  border: 1px solid var(--color-badge-entity-border);
}
.badge--entity.badge--outline {
  background-color: transparent;
  color: var(--color-badge-entity-text);
  border: 1px solid var(--color-badge-entity-border);
}
.badge--alert.badge--solid {
  background-color: var(--color-badge-severity-critical-background);
  color: var(--color-badge-severity-critical-text);
  border: 1px solid var(--color-badge-severity-critical-border);
  font-weight: var(--fontWeight-semibold);
}
.badge--alert.badge--outline {
  background-color: transparent;
  color: var(--color-badge-severity-critical-background);
  border: 1px solid var(--color-badge-severity-critical-border);
  font-weight: var(--fontWeight-semibold);
}
.badge--inactive.badge--solid {
  background-color: var(--color-badge-status-inactive-background);
  color: var(--color-badge-status-inactive-text);
  border: 1px solid var(--color-badge-status-inactive-border);
}
.badge--inactive.badge--outline {
  background-color: transparent;
  color: var(--color-badge-status-inactive-text);
  border: 1px solid var(--color-badge-status-inactive-border);
}
.badge:has(.badge__remove):hover {
  filter: brightness(0.95);
}
.badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--fontWeight-semibold);
  overflow: hidden;
}
.avatar--circle {
  border-radius: 50%;
}
.avatar--square {
  border-radius: var(--borderRadius-md);
}
.avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--fontSize-xs);
}
.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--fontSize-sm);
}
.avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--fontSize-base);
}
.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--fontSize-lg);
}
.avatar--xl {
  width: 64px;
  height: 64px;
  font-size: var(--fontSize-xl);
}
.avatar--primary {
  background-color: var(--color-primary);
  color: white;
}
.avatar--secondary {
  background-color: var(--color-secondary);
  color: white;
}
.avatar--success {
  background-color: var(--color-success);
  color: white;
}
.avatar--danger {
  background-color: var(--color-danger);
  color: white;
}
.avatar--warning {
  background-color: var(--color-warning);
  color: white;
}
.avatar--gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
}
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initials {
  user-select: none;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}
.logo--clickable {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.25rem;
  border-radius: 0.375rem;
}
.logo--clickable:hover {
  opacity: 0.8;
  transform: scale(1.02);
}
.logo--clickable:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}
.logo--clickable:active {
  transform: scale(0.98);
}
.logo--clickable:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}
.logo--sm {
  gap: 0.375rem;
}
.logo--sm .logo__image {
  height: 1.5rem;
  width: auto;
}
.logo--sm .logo__text {
  font-size: 0.875rem;
  font-weight: 600;
}
.logo--md {
  gap: 0.5rem;
}
.logo--md .logo__image {
  height: 2rem;
  width: auto;
}
.logo--md .logo__text {
  font-size: 1.125rem;
  font-weight: 600;
}
.logo--lg {
  gap: 0.625rem;
}
.logo--lg .logo__image {
  height: 2.5rem;
  width: auto;
}
.logo--lg .logo__text {
  font-size: 1.375rem;
  font-weight: 700;
}
.logo--xl {
  gap: 0.75rem;
}
.logo--xl .logo__image {
  height: 3rem;
  width: auto;
}
.logo--xl .logo__text {
  font-size: 1.625rem;
  font-weight: 700;
}
.logo--icon {
  gap: 0;
}
.logo--icon .logo__text {
  display: none;
}
.logo--text .logo__image {
  display: none;
}
.logo--full {
  display: flex;
}
.logo--default .logo__text {
  color: var(--color-text-primary);
}
.logo--white .logo__text {
  color: var(--color-text-inverse);
}
.logo--dark .logo__text {
  color: var(--color-text-primary);
}
.logo__image {
  display: block;
  object-fit: contain;
  transition: all 0.2s ease;
}
.logo__image--icon {
  aspect-ratio: 1;
}
.logo__text {
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.logo--loading {
  opacity: 0.6;
  pointer-events: none;
}
.logo__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
}
.logo__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border-secondary);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: logo-spin 1s linear infinite;
}
@keyframes logo-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .logo--xl {
    gap: 0.5rem;
  }
  .logo--xl .logo__image {
    height: 2.25rem;
  }
  .logo--xl .logo__text {
    font-size: 1.25rem;
  }
  .logo--lg {
    gap: 0.5rem;
  }
  .logo--lg .logo__image {
    height: 2rem;
  }
  .logo--lg .logo__text {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  .logo--responsive .logo__text {
    display: none;
  }
  .logo--responsive {
    gap: 0;
  }
}
@media (prefers-contrast: high) {
  .logo--clickable:focus {
    box-shadow: 0 0 0 2px currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo,
  .logo__image,
  .logo__text,
  .logo--clickable {
    transition: none;
  }
  .logo--clickable:hover {
    transform: none;
  }
  .logo--clickable:active {
    transform: none;
  }
  .logo__spinner {
    animation: none;
  }
}
.text {
  font-family: var(--fontFamily-sans);
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
}
.text--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}
.text--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}
.text--size-base {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-normal);
}
.text--size-lg {
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
}
.text--size-xl {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-relaxed);
}
.text--weight-normal {
  font-weight: var(--fontWeight-normal);
}
.text--weight-medium {
  font-weight: var(--fontWeight-medium);
}
.text--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}
.text--weight-bold {
  font-weight: var(--fontWeight-bold);
}
.text--color-primary {
  color: var(--color-text-primary);
}
.text--color-secondary {
  color: var(--color-text-secondary);
}
.text--color-tertiary {
  color: var(--color-text-tertiary);
}
.text--color-inverse {
  color: var(--color-text-inverse);
}
.text--color-inherit {
  color: inherit;
}
.text--align-left {
  text-align: left;
}
.text--align-center {
  text-align: center;
}
.text--align-right {
  text-align: right;
}
.text--italic {
  font-style: italic;
}
.text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heading {
  font-family: var(--fontFamily-sans);
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
}
.heading--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}
.heading--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}
.heading--size-md {
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-normal);
}
.heading--size-lg {
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
}
.heading--size-xl {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-28);
}
.heading--size-2xl {
  font-size: var(--fontSize-2xl);
  line-height: var(--lineHeight-tight);
}
.heading--size-3xl {
  font-size: var(--fontSize-3xl);
  line-height: var(--lineHeight-tight);
}
.heading--size-4xl {
  font-size: var(--fontSize-4xl);
  line-height: var(--lineHeight-tight);
}
.heading--size-5xl {
  font-size: var(--fontSize-5xl);
  line-height: var(--lineHeight-none);
}
.heading--size-6xl {
  font-size: var(--fontSize-6xl);
  line-height: var(--lineHeight-none);
}
.heading--weight-normal {
  font-weight: var(--fontWeight-normal);
}
.heading--weight-medium {
  font-weight: var(--fontWeight-medium);
}
.heading--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}
.heading--weight-bold {
  font-weight: var(--fontWeight-bold);
}
.heading--color-primary {
  color: var(--color-text-primary);
}
.heading--color-secondary {
  color: var(--color-text-secondary);
}
.heading--color-tertiary {
  color: var(--color-text-tertiary);
}
.heading--color-inverse {
  color: var(--color-text-inverse);
}
.heading--align-left {
  text-align: left;
}
.heading--align-center {
  text-align: center;
}
.heading--align-right {
  text-align: right;
}
.label {
  font-family: var(--fontFamily-sans);
  display: inline-block;
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
  cursor: pointer;
}
.label--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}
.label--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}
.label--size-base {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-normal);
}
.label--weight-normal {
  font-weight: var(--fontWeight-normal);
}
.label--weight-medium {
  font-weight: var(--fontWeight-medium);
}
.label--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}
.label--weight-bold {
  font-weight: var(--fontWeight-bold);
}
.label--color-primary {
  color: var(--color-text-primary);
}
.label--color-secondary {
  color: var(--color-text-secondary);
}
.label--color-tertiary {
  color: var(--color-text-tertiary);
}
.label__required {
  color: var(--color-error-500);
  margin-left: 4px;
}
.alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--borderRadius-md);
  border-left: 4px solid;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  position: relative;
}
.alert__icon {
  flex-shrink: 0;
  font-size: var(--fontSize-lg);
  font-weight: var(--fontWeight-bold);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert__content {
  flex: 1;
  min-width: 0;
}
.alert__title {
  font-weight: var(--fontWeight-semibold);
  margin-bottom: 4px;
  font-size: var(--fontSize-sm);
}
.alert__message {
  color: inherit;
  opacity: 0.9;
}
.alert__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.2s ease;
  font-size: var(--fontSize-lg);
  line-height: 1;
  opacity: 0.6;
}
.alert__close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.alert__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.alert--info {
  background-color: var(--color-primary-alpha);
  border-left-color: var(--color-primary);
  color: var(--color-text-primary);
}
.alert--info .alert__icon {
  color: var(--color-primary);
}
.alert--success {
  background-color: var(--color-success-alpha);
  border-left-color: var(--color-success);
  color: var(--color-text-primary);
}
.alert--success .alert__icon {
  color: var(--color-success);
}
.alert--warning {
  background-color: var(--color-warning-alpha);
  border-left-color: var(--color-warning);
  color: var(--color-text-primary);
}
.alert--warning .alert__icon {
  color: var(--color-warning);
}
.alert--error {
  background-color: var(--color-danger-alpha);
  border-left-color: var(--color-danger);
  color: var(--color-text-primary);
}
.alert--error .alert__icon {
  color: var(--color-danger);
}
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
}
.alert-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.alert-banner__content {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.alert-banner__action {
  flex-shrink: 0;
}
.alert-banner__close {
  flex-shrink: 0;
  margin-left: var(--spacing-2);
  min-width: auto;
  padding: var(--spacing-1);
}
.alert-banner--info {
  background: var(--color-info-bg, rgba(37, 99, 235, 0.1));
  border-color: var(--color-info-border, rgba(37, 99, 235, 0.2));
  color: var(--color-info-text, var(--color-text-primary));
}
.alert-banner--info .alert-banner__icon {
  color: var(--color-info-500, #2563eb);
}
.alert-banner--warning {
  background: var(--color-warning-bg, rgba(245, 158, 11, 0.1));
  border-color: var(--color-warning-border, rgba(245, 158, 11, 0.2));
  color: var(--color-warning-text, var(--color-text-primary));
}
.alert-banner--warning .alert-banner__icon {
  color: var(--color-warning-500, #f59e0b);
}
.alert-banner--error {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
  border-color: var(--color-danger-border, rgba(239, 68, 68, 0.2));
  color: var(--color-danger-text, var(--color-text-primary));
}
.alert-banner--error .alert-banner__icon {
  color: var(--color-danger-500, #ef4444);
}
.alert-banner--success {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  border-color: var(--color-success-border, rgba(34, 197, 94, 0.2));
  color: var(--color-success-text, var(--color-text-primary));
}
.alert-banner--success .alert-banner__icon {
  color: var(--color-success-500, #22c55e);
}
.alert-card {
  position: relative;
  padding: 0.75rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  background-color: rgba(242, 243, 243, 1);
  box-sizing: border-box;
}
.alert-card__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.alert-card__badge {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  border-radius: 4px;
  height: 19px;
  padding: 2px 15px;
  text-transform: capitalize;
}
.alert-card__title {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: #0F172A;
  margin: 0 0 0.5rem 0;
}
.alert-card__details {
  margin-bottom: 0.75rem;
}
.alert-card__detail {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #64748B;
  margin: 0 0 0.25rem 0;
}
.alert-card__detail:last-child {
  margin-bottom: 0.75rem;
}
.alert-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #E2E8F0;
}
.alert-card__action--secondary {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  color: rgba(34, 48, 62, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 30px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(34, 48, 62, 0.22);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.alert-card__action--secondary:hover:not(:disabled) {
  background-color: rgba(34, 48, 62, 0.05);
}
.alert-card__action--secondary:disabled {
  color: #94A3B8;
  cursor: not-allowed;
  opacity: 0.6;
}
.alert-card__action-icon {
  margin-right: 0.25rem;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.alert-card--read .alert-card__action--secondary {
  color: #94A3B8;
  cursor: not-allowed;
  opacity: 0.6;
}
.toast {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  position: relative;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: toast-slide-in 0.3s ease-out;
  overflow: hidden;
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.toast--exiting {
  animation: toast-slide-out 0.3s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
  .toast--exiting {
    animation: none;
    opacity: 0;
  }
}
.toast__icon {
  flex-shrink: 0;
  font-size: var(--fontSize-xl);
  font-weight: var(--fontWeight-bold);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast__content {
  flex: 1;
  min-width: 0;
}
.toast__title {
  font-weight: var(--fontWeight-semibold);
  margin-bottom: 4px;
  font-size: var(--fontSize-sm);
}
.toast__message {
  color: inherit;
  opacity: 0.9;
  font-size: var(--fontSize-sm);
}
.toast__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toast__action {
  background: none;
  border: none;
  padding: 4px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
  color: inherit;
  text-decoration: underline;
}
.toast__action:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.toast__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.2s ease;
  font-size: var(--fontSize-lg);
  line-height: 1;
  opacity: 0.6;
  color: inherit;
}
.toast__close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.toast__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.toast__progress-bar {
  height: 100%;
  background-color: currentColor;
  transition: width 0.05s linear;
  opacity: 0.7;
}
.toast--info {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-primary);
  color: var(--color-text-primary);
}
.toast--info .toast__icon {
  color: var(--color-primary);
}
.toast--info .toast__progress-bar {
  background-color: var(--color-primary);
}
.toast--success {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-success);
  color: var(--color-text-primary);
}
.toast--success .toast__icon {
  color: var(--color-success);
}
.toast--success .toast__progress-bar {
  background-color: var(--color-success);
}
.toast--warning {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-warning);
  color: var(--color-text-primary);
}
.toast--warning .toast__icon {
  color: var(--color-warning);
}
.toast--warning .toast__progress-bar {
  background-color: var(--color-warning);
}
.toast--error {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-danger);
  color: var(--color-text-primary);
}
.toast--error .toast__icon {
  color: var(--color-danger);
}
.toast--error .toast__progress-bar {
  background-color: var(--color-danger);
}
.toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 500px;
}
.toast-container > * {
  pointer-events: auto;
}
.toast-container--top-left {
  top: 24px;
  left: 24px;
}
.toast-container--top-right {
  top: 24px;
  right: 24px;
}
.toast-container--top-center {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.toast-container--bottom-left {
  bottom: 24px;
  left: 24px;
  flex-direction: column-reverse;
}
.toast-container--bottom-right {
  bottom: 24px;
  right: 24px;
  flex-direction: column-reverse;
}
.toast-container--bottom-center {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}
@media (max-width: 640px) {
  .toast-container {
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100% - 32px);
  }
  .toast-container--top-center,
  .toast-container--bottom-center {
    transform: none;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: modal-overlay-fade-in 0.2s ease-out;
  padding: 16px;
}
@keyframes modal-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal {
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-lg);
  box-shadow: var(--boxShadow-2xl);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  width: 100%;
  animation: modal-scale-in 0.2s ease-out;
  outline: none;
}
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal--sm {
  max-width: 400px;
}
.modal--md {
  max-width: 600px;
}
.modal--lg {
  max-width: 800px;
}
.modal--xl {
  max-width: 1000px;
}
.modal--full {
  max-width: 95vw;
  max-height: 95vh;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}
.modal__title {
  margin: 0;
  font-size: var(--fontSize-xl);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-tight);
}
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--borderRadius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.modal__close:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.modal__close:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.modal__close:active {
  transform: scale(0.95);
}
.modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modal__body::-webkit-scrollbar {
  width: 8px;
}
.modal__body::-webkit-scrollbar-track {
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-full);
}
.modal__body::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
}
.modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: modal-slide-up 0.3s ease-out;
  }
  @keyframes modal-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .modal--sm,
  .modal--md,
  .modal--lg,
  .modal--xl {
    max-width: 100%;
  }
  .modal__header {
    padding: 16px 20px;
  }
  .modal__body {
    padding: 20px;
  }
  .modal__footer {
    padding: 12px 20px;
    flex-direction: column-reverse;
  }
  .modal__footer > * {
    width: 100%;
  }
}
.tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: tooltip-fade-in 0.15s ease-out;
}
@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.tooltip__content {
  padding: 8px 12px;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-sm);
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: var(--boxShadow-lg);
}
.tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
.tooltip--dark .tooltip__content {
  background-color: var(--color-gray-900);
  color: var(--color-background-white);
}
.tooltip--dark .tooltip__arrow {
  background-color: var(--color-gray-900);
}
.tooltip--light .tooltip__content {
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
}
.tooltip--light .tooltip__arrow {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
}
.tooltip--top .tooltip__arrow {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom: none;
  border-right: none;
}
.tooltip--top.tooltip--light .tooltip__arrow {
  border-bottom: none;
  border-right: none;
}
.tooltip--bottom .tooltip__arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tooltip--bottom.tooltip--light .tooltip__arrow {
  border-top: none;
  border-left: none;
}
.tooltip--left .tooltip__arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.tooltip--left.tooltip--light .tooltip__arrow {
  border-top: none;
  border-right: none;
}
.tooltip--right .tooltip__arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
.tooltip--right.tooltip--light .tooltip__arrow {
  border-bottom: none;
  border-left: none;
}
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    animation: none;
  }
}
.progress {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}
.progress--linear {
  flex-direction: column;
  width: 100%;
}
.progress--linear .progress__track {
  width: 100%;
  background-color: var(--color-gray-200);
  border-radius: var(--borderRadius-full);
  overflow: hidden;
  position: relative;
}
.progress--linear .progress__bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--borderRadius-full);
  transition: width 0.3s ease;
}
.progress--linear.progress--sm .progress__track {
  height: 4px;
}
.progress--linear.progress--md .progress__track {
  height: 8px;
}
.progress--linear.progress--lg .progress__track {
  height: 12px;
}
.progress--circular {
  flex-direction: column;
  width: fit-content;
}
.progress__circle {
  display: block;
}
.progress__circle-track {
  stroke: var(--color-gray-200);
}
.progress__circle-bar {
  stroke: var(--color-primary);
  transition: stroke-dashoffset 0.3s ease;
}
.progress--primary .progress__bar,
.progress--primary .progress__circle-bar {
  background-color: var(--color-primary);
  stroke: var(--color-primary);
}
.progress--secondary .progress__bar,
.progress--secondary .progress__circle-bar {
  background-color: var(--color-secondary);
  stroke: var(--color-secondary);
}
.progress--success .progress__bar,
.progress--success .progress__circle-bar {
  background-color: var(--color-success);
  stroke: var(--color-success);
}
.progress__label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fontWeight-medium);
  text-align: center;
  margin-top: 0.25rem;
}
.progress--circular .progress__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0;
  font-size: var(--fontSize-xs);
}
.progress--circular.progress--md .progress__label {
  font-size: var(--fontSize-sm);
}
.progress--circular.progress--lg .progress__label {
  font-size: var(--fontSize-base);
}
.progress--linear.progress--indeterminate .progress__bar {
  width: 40%;
  animation: progress-slide 2s ease-in-out infinite;
}
@keyframes progress-slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(250%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.progress--circular.progress--indeterminate .progress__circle-bar {
  animation: progress-rotate 1.5s linear infinite;
  transform-origin: center;
}
@keyframes progress-rotate {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress__bar,
  .progress__circle-bar {
    transition: none;
  }
  .progress--indeterminate .progress__bar,
  .progress--indeterminate .progress__circle-bar {
    animation: none;
  }
  .progress--indeterminate .progress__bar {
    width: 40%;
    transform: translateX(0);
  }
}
.progress-tracker {
  display: flex;
  width: 100%;
}
.progress-tracker--horizontal {
  flex-direction: row;
  align-items: flex-start;
}
.progress-tracker--horizontal .progress-tracker__step {
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.progress-tracker--horizontal .progress-tracker__connector {
  flex: 1;
  height: 2px;
  margin: 0 var(--spacing-2);
  align-self: flex-start;
  background: var(--color-border-primary);
  position: relative;
  top: 16px;
}
.progress-tracker--horizontal.progress-tracker--sm .progress-tracker__connector {
  top: 12px;
}
.progress-tracker--horizontal.progress-tracker--lg .progress-tracker__connector {
  top: 20px;
}
.progress-tracker--vertical {
  flex-direction: column;
  align-items: flex-start;
}
.progress-tracker--vertical .progress-tracker__step {
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}
.progress-tracker--vertical .progress-tracker__connector {
  width: 2px;
  height: var(--spacing-8);
  margin: var(--spacing-2) 0;
  margin-left: 15px;
  background: var(--color-border-primary);
}
.progress-tracker--vertical.progress-tracker--sm .progress-tracker__connector {
  margin-left: 11px;
  height: var(--spacing-6);
}
.progress-tracker--vertical.progress-tracker--lg .progress-tracker__connector {
  margin-left: 19px;
  height: var(--spacing-10);
}
.progress-tracker__step {
  display: flex;
  gap: var(--spacing-3);
  position: relative;
}
.progress-tracker__step--clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.progress-tracker__step--clickable:hover {
  opacity: 0.8;
}
.progress-tracker__step--clickable:focus {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.progress-tracker__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.progress-tracker--sm .progress-tracker__step-indicator {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
}
.progress-tracker--md .progress-tracker__step-indicator {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}
.progress-tracker--lg .progress-tracker__step-indicator {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-md);
}
.progress-tracker__step--pending .progress-tracker__step-indicator {
  background: var(--color-surface-secondary);
  border: 2px solid var(--color-border-primary);
  color: var(--color-text-tertiary);
}
.progress-tracker__step--current .progress-tracker__step-indicator {
  background: var(--color-brand-500);
  border: 2px solid var(--color-brand-500);
  color: var(--color-white);
  box-shadow: 0 0 0 4px rgba(25, 69, 200, 0.1);
}
.progress-tracker__step--completed .progress-tracker__step-indicator {
  background: var(--color-success-500);
  border: 2px solid var(--color-success-500);
  color: var(--color-white);
}
.progress-tracker__check-icon {
  width: 16px;
  height: 16px;
}
.progress-tracker--sm .progress-tracker__check-icon {
  width: 12px;
  height: 12px;
}
.progress-tracker--lg .progress-tracker__check-icon {
  width: 20px;
  height: 20px;
}
.progress-tracker__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.progress-tracker--horizontal .progress-tracker__step-content {
  margin-top: var(--spacing-2);
}
.progress-tracker--vertical .progress-tracker__step-content {
  padding-top: var(--spacing-1);
}
.progress-tracker__step-label {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  transition: color 0.2s ease;
}
.progress-tracker--sm .progress-tracker__step-label {
  font-size: var(--font-size-sm);
}
.progress-tracker--md .progress-tracker__step-label {
  font-size: var(--font-size-md);
}
.progress-tracker--lg .progress-tracker__step-label {
  font-size: var(--font-size-lg);
}
.progress-tracker__step--pending .progress-tracker__step-label {
  color: var(--color-text-tertiary);
}
.progress-tracker__step--current .progress-tracker__step-label {
  color: var(--color-text-primary);
}
.progress-tracker__step--completed .progress-tracker__step-label {
  color: var(--color-text-secondary);
}
.progress-tracker__step-description {
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}
.progress-tracker--sm .progress-tracker__step-description {
  font-size: var(--font-size-xs);
}
.progress-tracker--md .progress-tracker__step-description {
  font-size: var(--font-size-sm);
}
.progress-tracker--lg .progress-tracker__step-description {
  font-size: var(--font-size-md);
}
.progress-tracker__step--completed ~ .progress-tracker__connector,
.progress-tracker__step--completed + .progress-tracker__connector {
  background: var(--color-success-500);
}
.progress-tracker__step--current + .progress-tracker__connector {
  background: linear-gradient(
    to right,
    var(--color-success-500) 0%,
    var(--color-border-primary) 100%
  );
}
.progress-tracker--vertical .progress-tracker__step--current + .progress-tracker__connector {
  background: linear-gradient(
    to bottom,
    var(--color-success-500) 0%,
    var(--color-border-primary) 100%
  );
}
.skeleton {
  display: inline-block;
  background-color: var(--color-gray-200);
  border-radius: var(--borderRadius-base);
  position: relative;
  overflow: hidden;
}
.skeleton--text {
  border-radius: var(--borderRadius-base);
  transform: scale(1, 0.6);
}
.skeleton--rectangular {
  border-radius: var(--borderRadius-md);
}
.skeleton--circular {
  border-radius: var(--borderRadius-full);
  aspect-ratio: 1 / 1;
}
@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.skeleton--animation-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.skeleton--animation-wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-white-alpha-50),
    transparent
  );
  animation: skeleton-wave 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton--animation-pulse {
    animation: none;
  }
  .skeleton--animation-wave::after {
    animation: none;
  }
}
.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skeleton-lines .skeleton {
  width: 100%;
}
.skeleton {
  pointer-events: none;
  user-select: none;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 24px;
}
.empty-state--sm {
  padding: 32px 16px;
  gap: 16px;
}
.empty-state--md {
  padding: 48px 24px;
  gap: 24px;
}
.empty-state--lg {
  padding: 64px 32px;
  gap: 32px;
}
.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 48px;
  line-height: 1;
}
.empty-state--sm .empty-state__icon {
  font-size: 32px;
}
.empty-state--md .empty-state__icon {
  font-size: 48px;
}
.empty-state--lg .empty-state__icon {
  font-size: 64px;
}
.empty-state__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.empty-state--sm .empty-state__content {
  max-width: 360px;
  gap: 4px;
}
.empty-state--lg .empty-state__content {
  max-width: 600px;
  gap: 12px;
}
.empty-state__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-semibold);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  color: var(--color-text-primary);
  margin: 0;
}
.empty-state--sm .empty-state__title {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-24);
}
.empty-state--lg .empty-state__title {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-32);
}
.empty-state__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-24);
  color: var(--color-text-secondary);
  margin: 0;
}
.empty-state--sm .empty-state__description {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}
.empty-state--lg .empty-state__description {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-28);
}
.empty-state__action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.empty-state--sm .empty-state__action {
  margin-top: 4px;
}
.empty-state--lg .empty-state__action {
  margin-top: 16px;
}
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-lg);
  background-color: var(--color-background-white);
  overflow: hidden;
}
.accordion__item {
  border-bottom: 1px solid var(--color-border-primary);
  transition: background-color 0.2s ease;
}
.accordion__item:last-child {
  border-bottom: none;
}
.accordion__item:hover:not(.accordion__item--disabled) {
  background-color: var(--color-background-secondary);
}
.accordion__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
  outline: none;
}
.accordion__trigger:hover:not(:disabled) {
  color: var(--color-brand-600);
}
.accordion__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
  z-index: 1;
  position: relative;
}
.accordion__trigger:disabled {
  cursor: not-allowed;
}
.accordion__trigger-content {
  flex: 1;
  min-width: 0;
}
.accordion__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-text-secondary);
}
.accordion__item--expanded .accordion__icon {
  transform: rotate(180deg);
  color: var(--color-brand-600);
}
.accordion__item--disabled .accordion__icon {
  color: var(--color-text-tertiary);
}
.accordion__content-wrapper {
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 0;
}
.accordion__content {
  padding: 0 20px 20px;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-relaxed);
}
@media (prefers-reduced-motion: reduce) {
  .accordion__content-wrapper,
  .accordion__icon,
  .accordion__trigger {
    transition: none;
  }
}
@media (max-width: 640px) {
  .accordion__trigger {
    padding: 14px 16px;
    font-size: var(--fontSize-sm);
  }
  .accordion__content {
    padding: 0 16px 16px;
    font-size: var(--fontSize-xs);
  }
  .accordion__icon {
    width: 18px;
    height: 18px;
  }
}
.table-wrapper {
  width: 100%;
  overflow: auto;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-lg);
  box-shadow: var(--boxShadow-base);
}
.table-wrapper--sticky-header {
  position: relative;
}
.table-container {
  width: 100%;
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fontFamily-sans);
}
.table__header {
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border);
}
.table-wrapper--sticky-header .table__header {
  position: sticky;
  top: 0;
  z-index: 10;
}
.table__header-row {
  background: var(--color-background-secondary);
}
.table__header-cell {
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--fontWeight-semibold);
  font-size: var(--fontSize-sm);
  line-height: 1.42857;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}
.table__header-cell--center {
  text-align: center;
}
.table__header-cell--right {
  text-align: right;
}
.table__header-cell--checkbox {
  width: 48px;
  padding: 12px 16px;
}
.table__header-cell--sortable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.table__header-cell--sortable:hover {
  background-color: var(--color-primary-alpha);
}
.table__header-content {
  display: flex;
  align-items: center;
  gap: 6px;
}
.table__header-cell--center .table__header-content {
  justify-content: center;
}
.table__header-cell--right .table__header-content {
  justify-content: flex-end;
}
.table__sort-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}
.table__header-cell--sorted .table__sort-icon {
  color: var(--color-primary);
}
.table__body {
  background: var(--color-background);
}
.table__row {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s ease;
}
.table__row:last-child {
  border-bottom: none;
}
.table__row--clickable {
  cursor: pointer;
}
.table__row--clickable:hover {
  background-color: var(--color-background-secondary);
}
.table__row--selected {
  background-color: var(--color-primary-alpha);
}
.table__row--selected:hover {
  background-color: var(--color-brand-100);
}
.table__row--empty {
  background: transparent;
}
.table__row--empty:hover {
  background: transparent;
}
.table__cell {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  vertical-align: middle;
}
.table__cell--center {
  text-align: center;
}
.table__cell--right {
  text-align: right;
}
.table__cell--checkbox {
  width: 48px;
  padding: 12px 16px;
}
.table__cell--empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 48px 16px;
}
.table__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.table-wrapper--compact .table__header-cell,
.table-wrapper--compact .table__cell {
  padding: 8px 12px;
  font-size: 13px;
}
.table-wrapper--spacious .table__header-cell,
.table-wrapper--spacious .table__cell {
  padding: 16px 20px;
  font-size: 15px;
}
.table-wrapper--striped .table__row:nth-child(even) {
  background-color: var(--color-background-secondary);
}
.table-wrapper--striped .table__row--selected:nth-child(even) {
  background-color: var(--color-primary-alpha);
}
.table-wrapper--bordered .table__cell {
  border-right: 1px solid var(--color-border-primary);
}
.table-wrapper--bordered .table__cell:last-child,
.table-wrapper--bordered .table__header-cell:last-child {
  border-right: none;
}
.table__skeleton {
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--color-border-primary) 25%,
    var(--color-background-tertiary) 50%,
    var(--color-border-primary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.table__skeleton--checkbox {
  width: 16px;
  height: 16px;
}
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 768px) {
  .table-wrapper {
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
  }
  .table__header-cell,
  .table__cell {
    padding: 10px 12px;
    font-size: 13px;
  }
  .table-wrapper--compact .table__header-cell,
  .table-wrapper--compact .table__cell {
    padding: 6px 8px;
    font-size: 12px;
  }
}
.table-wrapper[style*="max-height"] .table-container {
  overflow-y: auto;
}
.table__checkbox:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.table__header-cell--sortable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--borderRadius-lg) var(--borderRadius-lg);
  gap: 16px;
}
.table-pagination__info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.table-pagination__page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-pagination__label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
}
.table-pagination__select {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.table-pagination__select:hover {
  border-color: var(--color-primary);
}
.table-pagination__select:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.table-pagination__text {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.table-pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}
.table-pagination__button:hover:not(:disabled) {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.table-pagination__button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.table-pagination__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.table-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.table-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}
.table-pagination__page:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.table-pagination__page:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.table-pagination__page--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
.table-pagination__page--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
}
.table-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-tertiary);
  user-select: none;
}
@media (max-width: 768px) {
  .table-pagination {
    flex-direction: column;
    gap: 12px;
  }
  .table-pagination__info {
    width: 100%;
    justify-content: space-between;
  }
  .table-pagination__controls {
    width: 100%;
    justify-content: center;
  }
  .table-pagination__pages {
    flex: 1;
    justify-content: center;
  }
}
.table__expand-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}
.table__expand-toggle:hover {
  color: var(--color-text-primary);
}
.table__row--details {
  display: none;
  background: var(--color-background-secondary);
}
.table__row--details-visible {
  display: table-row;
}
.table__cell--details {
  padding: 12px 16px;
  background: var(--color-background-secondary);
}
.table__details-content {
  color: var(--color-text-primary);
  font-size: 14px;
}
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--borderRadius-lg) var(--borderRadius-lg) 0 0;
}
.table-toolbar__button {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}
.table-toolbar__button:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
}
.table-toolbar__button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.table__cell--tree {
  position: relative;
}
.table__tree-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.table__tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.table__tree-toggle:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
  border-radius: var(--borderRadius-sm);
}
.table__tree-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.table__tree-toggle:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--borderRadius-sm);
}
.table__tree-spacer {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  flex-shrink: 0;
}
.table__tree-content {
  flex: 1;
  min-width: 0;
}
.table__tree-loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: tree-loading-spin 0.6s linear infinite;
}
@keyframes tree-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.table__tree-lines {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  gap: 24px;
  pointer-events: none;
}
.table__tree-line {
  position: relative;
  width: 1px;
  background: var(--color-border);
}
.table__tree-line--last {
  height: 50%;
  background: var(--color-border);
}
.table__tree-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--color-border);
}
.table__row--level-0 {
  font-weight: var(--fontWeight-semibold);
}
.table__row--level-1 {
  background: rgba(0, 0, 0, 0.01);
}
.table__row--level-2 {
  background: rgba(0, 0, 0, 0.02);
}
.table__row--level-3 {
  background: rgba(0, 0, 0, 0.03);
}
.table__row--level-4 {
  background: rgba(0, 0, 0, 0.04);
}
.table__row--level-5 {
  background: rgba(0, 0, 0, 0.05);
}
.data-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-lg);
  overflow: hidden;
}
.data-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}
.data-grid__toolbar-left,
.data-grid__toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.data-grid__toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}
.data-grid__toolbar-button:hover {
  background: var(--color-gray-100);
  border-color: var(--color-border-secondary);
  color: var(--color-text-primary);
}
.data-grid__toolbar-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.data-grid__toolbar-button--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.data-grid__toolbar-button--active:hover {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
}
.data-grid__toolbar-button--clear {
  color: var(--color-red-600);
  border-color: var(--color-red-200);
}
.data-grid__toolbar-button--clear:hover {
  background: var(--color-red-50);
  border-color: var(--color-red-300);
}
.data-grid__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: var(--fontWeight-semibold);
  color: white;
  background: var(--color-brand-600);
  border-radius: 9px;
}
.data-grid__filter-row {
  display: flex;
  gap: 0;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}
.data-grid__filter-cell {
  flex-shrink: 0;
  padding-right: 12px;
}
.data-grid__filter-cell:last-child {
  padding-right: 0;
}
.data-grid__filter-input,
.data-grid__filter-select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--fontSize-sm);
  font-family: var(--fontFamily-sans);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.15s ease;
}
.data-grid__filter-input:focus,
.data-grid__filter-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.data-grid__filter-input::placeholder {
  color: var(--color-text-tertiary);
}
.data-grid__filter-select {
  cursor: pointer;
}
.data-grid__table {
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 768px) {
  .data-grid__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .data-grid__toolbar-left,
  .data-grid__toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }
  .data-grid__filter-row {
    flex-direction: column;
    gap: 8px;
  }
  .data-grid__filter-cell {
    width: 100% !important;
    padding-right: 0;
  }
}
.data-grid--loading {
  opacity: 0.6;
  pointer-events: none;
}
.data-grid__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fontSize-sm);
}
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-md);
  overflow: hidden;
}
.list--toolbar {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  width: auto;
  border-bottom: 1px solid var(--color-border-primary);
  background-color: var(--color-surface-secondary);
  border-radius: 0;
  scrollbar-width: thin;
}
.list--toolbar::-webkit-scrollbar {
  height: 0.375rem;
}
.list--toolbar::-webkit-scrollbar-track {
  background: transparent;
}
.list--toolbar::-webkit-scrollbar-thumb {
  background-color: var(--color-border-secondary);
  border-radius: var(--borderRadius-sm);
}
.list--toolbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-tertiary);
}
.list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-primary);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  cursor: default;
  transition: background-color 0.15s ease;
  position: relative;
}
.list--toolbar .list__item {
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 4rem;
  padding: 0.5rem;
  gap: 0.25rem;
  text-align: center;
  border-radius: var(--borderRadius-sm);
}
.list--toolbar .list__item--selectable {
  cursor: pointer;
}
.list--toolbar .list__item--selectable:hover:not(.list__item--disabled) {
  background-color: var(--color-background-primary);
}
.list--toolbar .list__item--selected {
  background-color: var(--color-primary-alpha);
  border-bottom: 2px solid var(--color-primary);
}
.list--toolbar .list__item--selected:hover:not(.list__item--disabled) {
  background-color: var(--color-primary-alpha);
}
.list--toolbar .list__item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.list__item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  z-index: 1;
}
.list__item:focus:not(:focus-visible) {
  outline: none;
}
.list__item--selectable {
  cursor: pointer;
}
.list__item--selectable:hover:not(.list__item--disabled) {
  background-color: var(--color-background-secondary);
}
.list__item--selected {
  background-color: var(--color-primary-alpha);
}
.list__item--selected:hover:not(.list__item--disabled) {
  background-color: var(--color-primary-alpha);
}
.list__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.list__item--nested {
  border-left: 2px solid var(--color-border-secondary);
}
.list__expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.list--toolbar .list__expand-button {
  display: none;
}
.list__expand-button:hover {
  background-color: var(--color-background-secondary);
}
.list__expand-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.list__expand-icon {
  display: inline-block;
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}
.list__expand-icon--expanded {
  transform: rotate(90deg);
}
.list__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list--toolbar .list__checkbox {
  display: none;
}
.list__checkbox input[type='checkbox'],
.list__checkbox input[type='radio'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.list__checkbox input[type='checkbox']:disabled,
.list__checkbox input[type='radio']:disabled {
  cursor: not-allowed;
}
.list__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list--toolbar .list__content {
  flex: none;
  width: 100%;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--fontSize-xs);
}
.list__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.list__action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
  font-size: var(--fontSize-sm);
}
.list__action-button:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.list__action-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.list__action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.list__nested {
  display: flex;
  flex-direction: column;
}
.list__divider {
  height: 1px;
  background-color: var(--color-border-primary);
  margin: 0;
}
.list__group {
  display: flex;
  flex-direction: column;
}
.list__group:not(:last-child) {
  margin-bottom: 0.5rem;
}
.list__group-header {
  padding: 0.5rem 1rem;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-wide);
  background-color: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}
.list__group-items {
  display: flex;
  flex-direction: column;
}
.list:empty::before {
  content: 'No items';
  display: block;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-sm);
}
.list[style*='overflow'] {
  border: 1px solid var(--color-border-primary);
}
.action-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.action-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}
.action-list__item:last-child {
  border-bottom: none;
}
.action-list__item:hover:not(:disabled) {
  background: var(--color-surface-secondary);
}
.action-list__item:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
  z-index: 1;
}
.action-list__item:active:not(:disabled) {
  background: var(--color-surface-tertiary);
}
.action-list__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}
.action-list__label {
  flex: 1;
  font-weight: var(--font-weight-medium);
}
.action-list--compact .action-list__item {
  padding: var(--spacing-2) var(--spacing-3);
  gap: var(--spacing-2);
}
.action-list--comfortable .action-list__item {
  padding: var(--spacing-3) var(--spacing-4);
  gap: var(--spacing-3);
}
.action-list--sm {
  font-size: var(--font-size-sm);
}
.action-list--sm .action-list__icon {
  font-size: 1rem;
}
.action-list--md {
  font-size: var(--font-size-base);
}
.action-list--md .action-list__icon {
  font-size: 1.25rem;
}
.action-list--lg {
  font-size: var(--font-size-lg);
}
.action-list--lg .action-list__icon {
  font-size: 1.5rem;
}
.metric-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-surface-primary);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.metric-card--bordered {
  border: 1px solid var(--color-border-primary);
}
.metric-card--shadow {
  box-shadow: var(--shadow-sm);
}
.metric-card:hover {
  box-shadow: var(--shadow-md);
}
.metric-card--sm {
  padding: var(--spacing-3);
  gap: var(--spacing-2);
}
.metric-card--sm .metric-card__label {
  font-size: var(--font-size-xs);
}
.metric-card--sm .metric-card__value {
  font-size: var(--font-size-lg);
}
.metric-card--sm .metric-card__description {
  font-size: var(--font-size-xs);
}
.metric-card--md {
  padding: var(--spacing-4);
  gap: var(--spacing-3);
}
.metric-card--md .metric-card__label {
  font-size: var(--font-size-sm);
}
.metric-card--md .metric-card__value {
  font-size: var(--font-size-2xl);
}
.metric-card--md .metric-card__description {
  font-size: var(--font-size-sm);
}
.metric-card--lg {
  padding: var(--spacing-6);
  gap: var(--spacing-4);
}
.metric-card--lg .metric-card__label {
  font-size: var(--font-size-md);
}
.metric-card--lg .metric-card__value {
  font-size: var(--font-size-3xl);
}
.metric-card--lg .metric-card__description {
  font-size: var(--font-size-md);
}
.metric-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.metric-card--sm .metric-card__icon {
  width: 32px;
  height: 32px;
}
.metric-card--lg .metric-card__icon {
  width: 48px;
  height: 48px;
}
.metric-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
}
.metric-card__label {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}
.metric-card__value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.metric-card__description {
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}
.metric-card--default .metric-card__icon {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}
.metric-card--success .metric-card__icon {
  background: var(--color-success-50);
  color: var(--color-success-700);
}
.metric-card--success .metric-card__value {
  color: var(--color-success-700);
}
.metric-card--warning .metric-card__icon {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}
.metric-card--warning .metric-card__value {
  color: var(--color-warning-700);
}
.metric-card--danger .metric-card__icon {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}
.metric-card--danger .metric-card__value {
  color: var(--color-danger-700);
}
.metric-card--info .metric-card__icon {
  background: var(--color-info-50);
  color: var(--color-info-700);
}
.metric-card--info .metric-card__value {
  color: var(--color-info-700);
}
.metric-grid {
  display: grid;
  width: 100%;
}
.metric-grid:not([class*='metric-grid--cols-']) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.metric-grid--gap-sm {
  gap: var(--spacing-2);
}
.metric-grid--gap-md {
  gap: var(--spacing-4);
}
.metric-grid--gap-lg {
  gap: var(--spacing-6);
}
.metric-grid--responsive.metric-grid--cols-4,
.metric-grid--responsive.metric-grid--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.metric-grid--responsive.metric-grid--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 640px) {
  .metric-grid--responsive {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .metric-grid--responsive.metric-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-grid--responsive.metric-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1025px) {
  .metric-grid--responsive.metric-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .metric-grid--responsive.metric-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-grid--responsive.metric-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-1 {
  grid-template-columns: 1fr;
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.metric-grid:not(.metric-grid--responsive).metric-grid--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
.metric-box {
  display: block;
  height: 85px;
  padding: var(--spacing-2);
  text-align: left;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--borderRadius-lg);
}
.metric-box__label {
  font-family: var(--fontFamily-sans-0), var(--fontFamily-sans-1), var(--fontFamily-sans-2), var(--fontFamily-sans-3), sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}
.metric-box__value {
  font-family: var(--fontFamily-sans-0), var(--fontFamily-sans-1), var(--fontFamily-sans-2), var(--fontFamily-sans-3), sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0px;
  color: inherit;
}
.metric-box--danger .metric-box__value {
  color: var(--color-red-600);
}
.metric-box--warning .metric-box__value {
  color: var(--color-yellow-600);
}
.metric-box--success .metric-box__value {
  color: var(--color-green-600);
}
.data-card {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.data-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.data-card--active {
  border-left: 4px solid var(--color-success);
}
.data-card--inactive {
  border-left: 4px solid var(--color-gray-400);
}
.data-card--warning {
  border-left: 4px solid var(--color-warning);
}
.data-card--error {
  border-left: 4px solid var(--color-danger);
}
.data-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--color-gray-200);
}
.data-card__header-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.data-card__header-text {
  flex: 1;
  min-width: 0;
}
.data-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.data-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.data-card__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.data-card__status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.data-card__status-indicator--active {
  background-color: var(--color-success);
}
.data-card__status-indicator--inactive {
  background-color: var(--color-gray-400);
}
.data-card__status-indicator--warning {
  background-color: var(--color-warning);
}
.data-card__status-indicator--error {
  background-color: var(--color-danger);
}
.data-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.data-card__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.data-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.data-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.data-card__action--primary {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  border-color: var(--color-primary);
}
.data-card__action--primary:hover:not(:disabled) {
  background-color: var(--color-primaryHover);
  border-color: var(--color-primaryHover);
}
.data-card__action--secondary {
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  border-color: var(--color-gray-300);
}
.data-card__action--secondary:hover:not(:disabled) {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
}
.data-card__action--danger {
  background-color: var(--color-danger);
  color: var(--color-custom-white);
  border-color: var(--color-danger);
}
.data-card__action--danger:hover:not(:disabled) {
  background-color: var(--color-dangerHover);
  border-color: var(--color-dangerHover);
}
.data-card__action--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.data-card__action-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}
.data-card__expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}
.data-card__expand-button:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-text-primary);
}
.data-card__expand-button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.data-card__expand-icon {
  transition: transform 0.2s ease;
}
.data-card__expand-icon--expanded {
  transform: rotate(180deg);
}
.data-card__body {
  padding: 20px;
}
.data-card__fields {
  display: flex;
  flex-direction: column;
}
.data-card__fields--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .data-card__fields--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.data-card__fields--list {
  gap: 12px;
}
.data-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.data-card__field--list {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
}
.data-card__field--list:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.data-card__field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.data-card__field--list .data-card__field-label {
  flex-shrink: 0;
  min-width: 120px;
}
.data-card__field-value {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;
  word-break: break-word;
}
.data-card__field--list .data-card__field-value {
  text-align: right;
  flex: 1;
}
.data-card__field-link {
  color: var(--color-custom-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
.data-card__field-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.data-card__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
}
.comparison-view {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-4);
  width: 100%;
  min-height: 300px;
}
.comparison-view__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.comparison-view__label {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comparison-view__content {
  flex: 1;
  padding: var(--spacing-4);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  overflow: auto;
}
.comparison-view__divider {
  width: 1px;
  background: var(--color-border-primary);
  align-self: stretch;
}
.comparison-view--diff .comparison-view__content {
  position: relative;
}
.comparison-view--diff .comparison-view__panel:first-child .comparison-view__content {
  border-left: 3px solid var(--color-danger-500, #ef4444);
}
.comparison-view--diff .comparison-view__panel:last-child .comparison-view__content {
  border-left: 3px solid var(--color-success-500, #22c55e);
}
@media (max-width: 768px) {
  .comparison-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .comparison-view__divider {
    width: 100%;
    height: 1px;
  }
}
.recommendation-card {
  padding: 1rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  background-color: #f2f3f3;
  border: 1px solid var(--color-gray-300);
  box-sizing: border-box;
}
.recommendation-card--critical {
  border-color: var(--color-red-300);
}
.recommendation-card--high {
  border-color: var(--color-yellow-300);
}
.recommendation-card--medium {
  border-color: var(--color-brand-300);
}
.recommendation-card--low {
  border-color: var(--color-gray-300);
}
.recommendation-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.recommendation-card__title {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: var(--color-text-primary);
  margin: 0;
}
.recommendation-card__badge {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  border-radius: 4px;
  height: 19px;
  padding: 2px 15px;
  text-transform: capitalize;
}
.recommendation-card__description {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fontSize-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 1rem 0;
}
.recommendation-card__footer {
  display: block;
  margin-top: 1rem;
}
.recommendation-card__test-name {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: var(--color-text-primary);
}
.recommendation-card__footer:empty {
  display: none;
  margin: 0;
}
.recommendation-card[style*="cursor: pointer"]:hover {
  opacity: 0.95;
}
.recommendation-card[style*="cursor: pointer"]:active {
  opacity: 0.9;
}
.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}
.page-header__breadcrumbs {
  margin-bottom: var(--spacing-2);
}
.page-header__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-6);
}
.page-header__content {
  flex: 1;
  min-width: 0;
}
.page-header__title {
  margin: 0;
  font-family: var(--fontFamily-display);
  font-weight: var(--fontWeight-bold);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-tight);
}
.page-header__description {
  margin: var(--spacing-2) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--lineHeight-normal);
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
}
.page-header--sm .page-header__title {
  font-size: var(--fontSize-2xl);
}
.page-header--sm .page-header__description {
  font-size: var(--fontSize-sm);
}
.page-header--md .page-header__title {
  font-size: var(--fontSize-3xl);
}
.page-header--md .page-header__description {
  font-size: var(--fontSize-base);
}
.page-header--lg .page-header__title {
  font-size: var(--fontSize-4xl);
}
.page-header--lg .page-header__description {
  font-size: var(--fontSize-lg);
}
@media (max-width: 768px) {
  .page-header__container {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header__actions {
    align-self: flex-start;
  }
  .page-header--lg .page-header__title {
    font-size: var(--fontSize-3xl);
  }
  .page-header--md .page-header__title {
    font-size: var(--fontSize-2xl);
  }
}
.tab-navigation {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
}
.tab-navigation__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-semibold);
  text-align: center;
  text-transform: capitalize;
  border-radius: var(--borderRadius-md);
  white-space: nowrap;
}
.tab-navigation__item:focus-visible {
  outline: 2px solid var(--color-violet);
  outline-offset: 2px;
}
.tab-navigation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-navigation__label {
  display: inline-block;
}
.tab-navigation--sm .tab-navigation__item {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
}
.tab-navigation--md .tab-navigation__item {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
}
.tab-navigation--lg .tab-navigation__item {
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
}
.tab-navigation--contained.tab-navigation--violet .tab-navigation__item--active {
  background: var(--color-violet);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-violet);
}
.tab-navigation--contained.tab-navigation--violet .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-violet);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-violet);
}
.tab-navigation--contained.tab-navigation--primary .tab-navigation__item--active {
  background: var(--color-primary-600);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}
.tab-navigation--contained.tab-navigation--primary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-primary-600);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}
.tab-navigation--contained.tab-navigation--secondary .tab-navigation__item--active {
  background: var(--color-gray-700);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}
.tab-navigation--contained.tab-navigation--secondary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-gray-700);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}
.tab-navigation--light.tab-navigation--violet .tab-navigation__item--active {
  background: var(--color-violet-50);
  color: var(--color-violet);
  border: 1px solid var(--color-violet);
}
.tab-navigation--light.tab-navigation--violet .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-violet-50);
  color: var(--color-violet);
}
.tab-navigation--light.tab-navigation--primary .tab-navigation__item--active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-600);
}
.tab-navigation--light.tab-navigation--primary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.tab-navigation--light.tab-navigation--secondary .tab-navigation__item--active {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-400);
}
.tab-navigation--light.tab-navigation--secondary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}
.tab-navigation__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tab-navigation__item--disabled:hover {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}
.copyable-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.copyable-text__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.copyable-text__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}
.copyable-text__value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
  word-break: break-all;
}
.copyable-text__value--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copyable-text__value code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-surface-secondary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-primary);
}
.copyable-text__button {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.copyable-text:hover .copyable-text__button {
  opacity: 1;
}
.copyable-text--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
}
.copyable-text--inline .copyable-text__label {
  margin-right: var(--spacing-1);
}
.copyable-text--inline .copyable-text__content {
  flex: 1;
}
.copyable-text--block {
  padding: var(--spacing-3);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
}
.copyable-text--block .copyable-text__content {
  margin-top: var(--spacing-1);
}
.copyable-text--code {
  font-family: var(--font-family-mono);
}
.copyable-text--code .copyable-text__content {
  background: var(--color-surface-tertiary);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-primary);
}
.copyable-text--sm {
  font-size: var(--font-size-sm);
}
.copyable-text--sm .copyable-text__label {
  font-size: var(--font-size-xs);
}
.copyable-text--md {
  font-size: var(--font-size-base);
}
.copyable-text--lg {
  font-size: var(--font-size-lg);
}
.copyable-text--lg .copyable-text__label {
  font-size: var(--font-size-base);
}
.copy-button {
  transition: all 0.2s ease;
}
.copy-button--copied {
  animation: copy-success 0.3s ease;
}
@keyframes copy-success {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.file-upload {
  width: 100%;
}
.file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--color-gray-300);
  border-radius: 0.5rem;
  background-color: var(--color-gray-50);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 12rem;
}
.file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) {
  border-color: var(--color-brand-400);
  background-color: var(--color-brand-50);
}
.file-upload__dropzone:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}
.file-upload__dropzone--active {
  border-color: var(--color-brand-500);
  background-color: var(--color-brand-50);
}
.file-upload__dropzone--accept {
  border-color: var(--color-green-500);
  background-color: var(--color-green-50);
}
.file-upload__dropzone--reject {
  border-color: var(--color-red-500);
  background-color: var(--color-red-50);
}
.file-upload__dropzone--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-100);
}
.file-upload__dropzone-icon {
  color: var(--color-gray-400);
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}
.file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) .file-upload__dropzone-icon {
  color: var(--color-brand-500);
}
.file-upload__dropzone--active .file-upload__dropzone-icon {
  color: var(--color-brand-500);
}
.file-upload__dropzone--accept .file-upload__dropzone-icon {
  color: var(--color-green-500);
}
.file-upload__dropzone--reject .file-upload__dropzone-icon {
  color: var(--color-red-500);
}
.file-upload__dropzone-text {
  text-align: center;
}
.file-upload__dropzone-message {
  font-size: 0.875rem;
  color: var(--color-gray-700);
  margin: 0;
}
.file-upload__dropzone-link {
  color: var(--color-brand-600);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.file-upload__dropzone-hint {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin: 0.5rem 0 0 0;
}
.file-upload__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.file-upload__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: var(--color-custom-white);
  transition: all 0.2s ease;
}
.file-upload__item:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.file-upload__item--completed {
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
}
.file-upload__item--error {
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
}
.file-upload__item--uploading {
  border-color: var(--color-brand-200);
  background-color: var(--color-brand-50);
}
.file-upload__item-preview {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-upload__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-upload__item-icon {
  color: var(--color-gray-500);
}
.file-upload__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.file-upload__item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-upload__item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.file-upload__item-size {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}
.file-upload__item-progress {
  margin-top: 0.25rem;
}
.file-upload__item-error {
  font-size: 0.75rem;
  color: var(--color-red-600);
  margin-top: 0.25rem;
}
.file-upload__item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.file-upload__item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
}
.file-upload__item-action:hover:not(:disabled) {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}
.file-upload__item-action:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}
.file-upload__item-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.file-upload__item-action--retry {
  color: var(--color-brand-600);
}
.file-upload__item-action--retry:hover:not(:disabled) {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}
.file-upload__item-action--remove {
  color: var(--color-red-600);
}
.file-upload__item-action--remove:hover:not(:disabled) {
  background-color: var(--color-red-50);
  color: var(--color-red-700);
}
@media (max-width: 640px) {
  .file-upload__dropzone {
    padding: 1.5rem;
    min-height: 10rem;
  }
  .file-upload__item {
    flex-direction: column;
    align-items: stretch;
  }
  .file-upload__item-preview {
    width: 100%;
    height: 8rem;
  }
  .file-upload__item-actions {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .file-upload__dropzone,
  .file-upload__dropzone-icon,
  .file-upload__item,
  .file-upload__item-action {
    transition: none;
  }
}
.file-list {
  width: 100%;
  position: relative;
}
.file-list--list {
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-md);
}
.file-list--grid {
  background-color: transparent;
}
.file-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 0;
}
.file-list__grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: default;
  transition: all 0.15s ease;
}
.file-list__grid-item--selectable {
  cursor: pointer;
}
.file-list__grid-item--selectable:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.file-list__grid-item--selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-alpha);
}
.file-list__grid-item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.file-list__grid-checkbox {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}
.file-list__grid-checkbox input[type='checkbox'],
.file-list__grid-checkbox input[type='radio'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.file-list__grid-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-primary);
}
.file-list__grid-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.file-list__grid-action-button:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.file-list__grid-action-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.file-list__grid-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.file-list__file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.file-list__file--grid {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.file-list__file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
}
.file-list__file--grid .file-list__file-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
}
.file-list__file--grid .file-list__file-icon svg {
  width: 4rem;
  height: 4rem;
}
.file-list__file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.file-list__file--grid .file-list__file-info {
  width: 100%;
}
.file-list__file-name {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-list__file--grid .file-list__file-name {
  font-size: var(--fontSize-base);
}
.file-list__file-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fontSize-xs);
  color: var(--color-text-secondary);
}
.file-list__file--grid .file-list__file-meta {
  justify-content: center;
  flex-wrap: wrap;
}
.file-list__file-separator {
  color: var(--color-text-tertiary);
}
.file-list__file-size,
.file-list__file-date {
  white-space: nowrap;
}
.file-list__file-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-list__file-status {
  margin-left: auto;
  flex-shrink: 0;
}
.file-list__file--grid .file-list__file-status {
  margin-left: 0;
  margin-top: 0.5rem;
}
.file-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}
.file-list__empty-icon {
  margin-bottom: 1rem;
  color: var(--color-text-tertiary);
  opacity: 0.5;
}
.file-list__empty-text {
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fontWeight-medium);
}
@media (max-width: 768px) {
  .file-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
  }
  .file-list__grid-item {
    padding: 0.75rem;
  }
  .file-list__file-icon {
    width: 2rem;
    height: 2rem;
  }
  .file-list__file--grid .file-list__file-icon {
    width: 3rem;
    height: 3rem;
  }
  .file-list__file--grid .file-list__file-icon svg {
    width: 3rem;
    height: 3rem;
  }
  .file-list__file-name {
    font-size: var(--fontSize-xs);
  }
  .file-list__file--grid .file-list__file-name {
    font-size: var(--fontSize-sm);
  }
  .file-list__file-meta {
    font-size: var(--fontSize-2xs);
  }
  .file-list__file-description {
    display: none;
  }
}
@media (min-width: 1024px) {
  .file-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--borderRadius-lg);
  padding: var(--borderRadius-lg) var(--borderRadius-xl);
  background: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-lg);
}
.filter-bar__left {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 1 1 auto;
  min-width: 0;
}
.filter-bar__search {
  flex: 0 1 240px;
  min-width: 180px;
}
.filter-bar__quick-filters {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
  flex-wrap: wrap;
}
.filter-bar__filter-button {
  display: inline-flex;
  align-items: center;
  gap: var(--borderRadius-md);
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  white-space: nowrap;
}
.filter-bar__filter-button:hover {
  background: var(--color-background-secondary);
  border-color: var(--color-border-secondary);
}
.filter-bar__filter-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.filter-bar__filter-button--active {
  color: var(--color-background-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.filter-bar__filter-button--active:hover {
  background: var(--color-primaryHover);
  border-color: var(--color-primaryHover);
}
.filter-bar__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  background: var(--color-white-alpha-20);
  border-radius: var(--borderRadius-full);
}
.filter-bar__filter-button--active .filter-bar__filter-count {
  background: var(--color-white-alpha-20);
}
.filter-bar__filter-button:not(.filter-bar__filter-button--active) .filter-bar__filter-count {
  background: var(--color-secondary-alpha);
  color: var(--color-text-primary);
}
.filter-bar__center {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 1 1 auto;
  min-width: 0;
}
.filter-bar__separator {
  width: 1px;
  height: 24px;
  background: var(--color-border-primary);
  flex-shrink: 0;
}
.filter-bar__active-filters {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.filter-bar__clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-bar__clear-all:hover {
  color: var(--color-danger);
  background: var(--color-danger-alpha);
}
.filter-bar__clear-all:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.filter-bar__clear-icon {
  width: 14px;
  height: 14px;
}
.filter-bar__right {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 0 0 auto;
}
.filter-bar__sort {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
}
.filter-bar__sort-label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.filter-bar__sort-select {
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.filter-bar__sort-select:hover {
  border-color: var(--color-border-secondary);
}
.filter-bar__sort-select:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: var(--color-border-focus);
}
.filter-bar__view-modes {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-md);
}
.filter-bar__view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--borderRadius-base);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.filter-bar__view-button:hover {
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
}
.filter-bar__view-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.filter-bar__view-button--active {
  color: var(--color-primary);
  background: var(--color-background-white);
  box-shadow: var(--boxShadow-sm);
}
.filter-bar__view-button--active:hover {
  color: var(--color-primaryHover);
  background: var(--color-background-white);
}
.filter-bar__view-button svg {
  width: 18px;
  height: 18px;
}
.filter-bar__results {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .filter-bar {
    gap: var(--borderRadius-md);
  }
  .filter-bar__left,
  .filter-bar__center,
  .filter-bar__right {
    gap: var(--borderRadius-md);
  }
  .filter-bar__search {
    flex: 1 1 200px;
  }
}
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--borderRadius-lg);
  }
  .filter-bar__left,
  .filter-bar__center,
  .filter-bar__right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .filter-bar__search {
    flex: 1 1 auto;
    width: 100%;
  }
  .filter-bar__quick-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
  }
  .filter-bar__quick-filters::-webkit-scrollbar {
    height: 4px;
  }
  .filter-bar__quick-filters::-webkit-scrollbar-track {
    background: transparent;
  }
  .filter-bar__quick-filters::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--borderRadius-full);
  }
  .filter-bar__separator {
    width: 100%;
    height: 1px;
  }
  .filter-bar__right {
    flex-direction: row;
    justify-content: space-between;
  }
  .filter-bar__sort,
  .filter-bar__view-modes,
  .filter-bar__results {
    flex: 1 1 auto;
  }
}
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
}
.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border-primary);
}
.filter-panel__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.filter-panel__count {
  margin-left: var(--spacing-2);
}
.filter-panel__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.filter-panel__filter-item {
  display: flex;
  flex-direction: column;
}
.filter-panel__actions {
  display: flex;
  gap: var(--spacing-2);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border-primary);
}
.filter-panel__actions button {
  flex: 1;
}
@media (min-width: 768px) {
  .filter-panel__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
  }
}
.collapse {
  visibility: collapse;
}
.visible {
  visibility: visible;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.container {
  width: 100%;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.list-item {
  display: list-item;
}
.table {
  display: table;
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
body {
  font-family: var(--fontFamily-sans);
  margin: 0;
  padding: 0;
}
@layer components {
  .icon-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadius-lg);
  }
  .icon-wrapper--violet {
    background: var(--color-icon-violet-bg);
    color: var(--color-icon-violet-fg);
  }
  .icon-wrapper--green {
    background: var(--color-icon-green-bg);
    color: var(--color-icon-green-fg);
  }
  .icon-wrapper--cyan {
    background: var(--color-icon-cyan-bg);
    color: var(--color-icon-cyan-fg);
  }
  .icon-wrapper--orange {
    background: var(--color-icon-orange-bg);
    color: var(--color-icon-orange-fg);
  }
  .icon-wrapper--gray {
    background: var(--color-icon-gray-bg);
    color: var(--color-icon-gray-fg);
  }
  .icon-wrapper--sm {
    font-size: var(--fontSize-base);
  }
  .icon-wrapper--md {
    font-size: var(--fontSize-2xl);
  }
  .icon-wrapper--lg {
    font-size: var(--fontSize-4xl);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/* Avatar Base */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--fontWeight-semibold);
  overflow: hidden;
}
/* Avatar Shapes */
.avatar--circle {
  border-radius: 50%;
}
.avatar--square {
  border-radius: var(--borderRadius-md);
}
/* Avatar Sizes */
.avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--fontSize-xs);
}
.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--fontSize-sm);
}
.avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--fontSize-base);
}
.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--fontSize-lg);
}
.avatar--xl {
  width: 64px;
  height: 64px;
  font-size: var(--fontSize-xl);
}
/* Avatar Color Schemes */
.avatar--primary {
  background-color: var(--color-primary);
  color: white;
}
.avatar--secondary {
  background-color: var(--color-secondary);
  color: white;
}
.avatar--success {
  background-color: var(--color-success);
  color: white;
}
.avatar--danger {
  background-color: var(--color-danger);
  color: white;
}
.avatar--warning {
  background-color: var(--color-warning);
  color: white;
}
.avatar--gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
}
/* Avatar Image */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Avatar Initials */
.avatar-initials {
  user-select: none;
}

/* Badge Component Styles */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fontFamily-base);
  font-weight: var(--fontWeight-medium);
  line-height: 1;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Sizes */

.badge--xs {
  padding: 2px 8px;
  font-size: 10px;
  height: 18px;
  gap: 2px;
}

.badge--compact {
  padding: 2px 8px;
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  gap: 2px;
}

.badge--sm {
  padding: 4px 12px;
  font-size: 11px;
  height: 20px;
  gap: 2px;
}

.badge--md {
  padding: 6px 14px;
  font-size: var(--fontSize-2xs);
  height: 24px;
  gap: 4px;
}

.badge--lg {
  padding: 8px 16px;
  font-size: var(--fontSize-sm);
  height: 28px;
  gap: 6px;
}

/* Shapes */

.badge--pill {
  border-radius: var(--borderRadius-full);
}

.badge--rectangular {
  border-radius: var(--borderRadius-md);
}

/* Border Radius Options */

.badge--radius-none {
  border-radius: 0;
}

.badge--radius-sm {
  border-radius: 4px;
}

.badge--radius-md {
  border-radius: 8px;
}

.badge--radius-lg {
  border-radius: 12px;
}

.badge--radius-full {
  border-radius: 9999px;
}

/* Base Badge Styles */

.badge__content {
  display: inline-flex;
  align-items: center;
}

.badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge--sm .badge__icon {
  width: 12px;
  height: 12px;
}

.badge--md .badge__icon {
  width: 14px;
  height: 14px;
}

.badge--lg .badge__icon {
  width: 16px;
  height: 16px;
}

/* Remove Button */

.badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.badge__remove:hover {
  opacity: 1;
}

.badge__remove:focus {
  outline: none;
  opacity: 1;
}

.badge__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--borderRadius-sm);
}

/* Text Transform */

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

.badge--lowercase {
  text-transform: lowercase;
}

.badge--capitalize {
  text-transform: capitalize;
}

/* Truncation */

.badge--truncate {
  max-width: var(--badge-max-width, 150px);
  overflow: hidden;
}

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

/* Custom Colors */

.badge--custom.badge--solid {
  background-color: var(--badge-bg-color, currentColor);
  color: var(--badge-text-color, inherit);
  border-color: var(--badge-border-color, transparent);
}

.badge--custom.badge--outline {
  background-color: transparent;
  color: var(--badge-text-color, currentColor);
  border-color: var(--badge-border-color, currentColor);
}

/* Indicators */

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.badge__dot--pulse {
  animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Primary Variant - Solid */

.badge--primary.badge--solid {
  background-color: var(--color-primary);
  color: var(--color-background-white);
  border: 1px solid var(--color-primary);
}

/* Primary Variant - Outline */

.badge--primary.badge--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Secondary Variant - Solid */

.badge--secondary.badge--solid {
  background-color: var(--color-text-secondary);
  color: var(--color-background-white);
  border: 1px solid var(--color-text-secondary);
}

/* Secondary Variant - Outline */

.badge--secondary.badge--outline {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}

/* Success Variant - Solid */

.badge--success.badge--solid {
  background-color: var(--color-success);
  color: var(--color-background-white);
  border: 1px solid var(--color-success);
}

/* Success Variant - Outline */

.badge--success.badge--outline {
  background-color: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

/* Warning Variant - Solid */

.badge--warning.badge--solid {
  background-color: var(--color-warning);
  color: var(--color-text-primary);
  border: 1px solid var(--color-warning);
}

/* Warning Variant - Outline */

.badge--warning.badge--outline {
  background-color: transparent;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

/* Danger Variant - Solid */

.badge--danger.badge--solid {
  background-color: var(--color-danger);
  color: var(--color-background-white);
  border: 1px solid var(--color-danger);
}

/* Danger Variant - Outline */

.badge--danger.badge--outline {
  background-color: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

/* Entity Variant - Solid */

.badge--entity.badge--solid {
  background-color: var(--color-badge-entity-background);
  color: var(--color-badge-entity-text);
  border: 1px solid var(--color-badge-entity-border);
}

/* Entity Variant - Outline */

.badge--entity.badge--outline {
  background-color: transparent;
  color: var(--color-badge-entity-text);
  border: 1px solid var(--color-badge-entity-border);
}

/* Alert Variant - Solid */

.badge--alert.badge--solid {
  background-color: var(--color-badge-severity-critical-background);
  color: var(--color-badge-severity-critical-text);
  border: 1px solid var(--color-badge-severity-critical-border);
  font-weight: var(--fontWeight-semibold);
}

/* Alert Variant - Outline */

.badge--alert.badge--outline {
  background-color: transparent;
  color: var(--color-badge-severity-critical-background);
  border: 1px solid var(--color-badge-severity-critical-border);
  font-weight: var(--fontWeight-semibold);
}

/* Inactive Variant - Solid */

.badge--inactive.badge--solid {
  background-color: var(--color-badge-status-inactive-background);
  color: var(--color-badge-status-inactive-text);
  border: 1px solid var(--color-badge-status-inactive-border);
}

/* Inactive Variant - Outline */

.badge--inactive.badge--outline {
  background-color: transparent;
  color: var(--color-badge-status-inactive-text);
  border: 1px solid var(--color-badge-status-inactive-border);
}

/* Hover States for Removable Badges */

.badge:has(.badge__remove):hover {
  filter: brightness(0.95);
}

/* Focus States */

.badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.box {
  box-sizing: border-box;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  line-height: 1.5;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
}

.button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Sizes */

.button--sm {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  border-radius: var(--borderRadius-md);
}

.button--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
  border-radius: var(--borderRadius-md);
}

.button--lg {
  padding: 12px 24px;
  font-size: var(--fontSize-lg);
  border-radius: var(--borderRadius-md);
}

/* Full Width */

.button--full-width {
  width: 100%;
}

/* Solid Variant */

.button--solid {
  color: white;
}

.button--solid.button--primary {
  background-color: var(--color-primary);
}

.button--solid.button--primary:hover:not(:disabled) {
  background-color: var(--color-primaryHover);
}

.button--solid.button--primary:active:not(:disabled) {
  background-color: var(--color-primaryActive);
}

.button--solid.button--secondary {
  background-color: var(--color-secondary);
}

.button--solid.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondaryHover);
}

.button--solid.button--secondary:active:not(:disabled) {
  background-color: var(--color-secondaryActive);
}

.button--solid.button--success {
  background-color: var(--color-success);
}

.button--solid.button--success:hover:not(:disabled) {
  background-color: var(--color-successHover);
}

.button--solid.button--warning {
  background-color: var(--color-warning);
  color: var(--color-gray-900);
}

.button--solid.button--warning:hover:not(:disabled) {
  background-color: var(--color-warningHover);
}

.button--solid.button--danger {
  background-color: var(--color-danger);
}

.button--solid.button--danger:hover:not(:disabled) {
  background-color: var(--color-dangerHover);
}

.button--solid.button--violet {
  background-color: var(--color-violet);
  box-shadow: 0px 2px 4px 0px rgba(105, 108, 255, 0.4);
}

.button--solid.button--violet:hover:not(:disabled) {
  background-color: var(--color-violetHover);
}

.button--solid.button--violet:active:not(:disabled) {
  background-color: var(--color-violetActive);
}

/* Outline Variant */

.button--outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.button--outline.button--primary {
  color: var(--color-primary);
}

.button--outline.button--primary:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: white;
}

.button--outline.button--secondary {
  color: var(--color-secondary);
}

.button--outline.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondary);
  color: white;
}

.button--outline.button--success {
  color: var(--color-success);
}

.button--outline.button--success:hover:not(:disabled) {
  background-color: var(--color-success);
  color: white;
}

.button--outline.button--warning {
  color: var(--color-warning);
}

.button--outline.button--warning:hover:not(:disabled) {
  background-color: var(--color-warning);
  color: var(--color-gray-900);
}

.button--outline.button--danger {
  color: var(--color-danger);
}

.button--outline.button--danger:hover:not(:disabled) {
  background-color: var(--color-danger);
  color: white;
}

.button--outline.button--violet {
  color: var(--color-violet);
}

.button--outline.button--violet:hover:not(:disabled) {
  background-color: var(--color-violet);
  color: white;
}

/* Ghost Variant */

.button--ghost {
  background-color: transparent;
}

.button--ghost.button--primary {
  color: var(--color-primary);
}

.button--ghost.button--primary:hover:not(:disabled) {
  background-color: var(--color-primary-alpha);
}

.button--ghost.button--secondary {
  color: var(--color-secondary);
}

.button--ghost.button--secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-alpha);
}

.button--ghost.button--success {
  color: var(--color-success);
}

.button--ghost.button--success:hover:not(:disabled) {
  background-color: var(--color-success-alpha);
}

.button--ghost.button--warning {
  color: var(--color-warning);
}

.button--ghost.button--warning:hover:not(:disabled) {
  background-color: var(--color-warning-alpha);
}

.button--ghost.button--danger {
  color: var(--color-danger);
}

.button--ghost.button--danger:hover:not(:disabled) {
  background-color: var(--color-danger-alpha);
}

.button--ghost.button--violet {
  color: var(--color-violet);
}

.button--ghost.button--violet:hover:not(:disabled) {
  background-color: var(--color-violet-alpha);
}

/* Link Variant */

.button--link {
  background-color: transparent;
  padding: 0;
  text-decoration: underline;
}

.button--link.button--primary {
  color: var(--color-primary);
}

.button--link.button--primary:hover:not(:disabled) {
  color: var(--color-primaryHover);
}

.button--link.button--secondary {
  color: var(--color-secondary);
}

.button--link.button--secondary:hover:not(:disabled) {
  color: var(--color-secondaryHover);
}

.button--link.button--success {
  color: var(--color-success);
}

.button--link.button--success:hover:not(:disabled) {
  color: var(--color-successHover);
}

.button--link.button--warning {
  color: var(--color-warning);
}

.button--link.button--warning:hover:not(:disabled) {
  color: var(--color-warningHover);
}

.button--link.button--danger {
  color: var(--color-danger);
}

.button--link.button--danger:hover:not(:disabled) {
  color: var(--color-dangerHover);
}

.button--link.button--violet {
  color: var(--color-violet);
}

.button--link.button--violet:hover:not(:disabled) {
  color: var(--color-violetHover);
}

/* Disabled State */

.button--disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading State */

.button--loading {
  position: relative;
  color: transparent;
}

.button--loading .button__content,
.button--loading .button__icon {
  visibility: hidden;
}

.button__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button__spinner-icon {
  width: 1em;
  height: 1em;
  animation: spin 0.8s linear infinite;
}

.button--sm .button__spinner-icon {
  width: 0.875em;
  height: 0.875em;
}

.button--lg .button__spinner-icon {
  width: 1.25em;
  height: 1.25em;
}

.button__spinner-track {
  opacity: 0.25;
}

.button__spinner-path {
  opacity: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Icons */

.button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.button__icon--left {
  margin-right: 8px;
}

.button__icon--right {
  margin-left: 8px;
}

.button__icon svg {
  width: 1em;
  height: 1em;
}

.button__content {
  display: inline-flex;
  align-items: center;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .button,
  .button__spinner-icon {
    transition: none;
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .button:focus-visible {
    outline-width: 3px;
  }
}

/* Divider Component Styles */

.intelation-divider {
  --divider-color: var(--color-border-primary, #e5e7eb);
  
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* Horizontal Orientation */

.intelation-divider--horizontal {
  width: 100%;
  height: 0;
  border-top-style: var(--divider-style, solid);
  border-top-color: var(--divider-color);
}

.intelation-divider--horizontal.intelation-divider--thickness-1 {
  border-top-width: 1px;
}

.intelation-divider--horizontal.intelation-divider--thickness-2 {
  border-top-width: 2px;
}

.intelation-divider--horizontal.intelation-divider--thickness-3 {
  border-top-width: 3px;
}

/* Vertical Orientation */

.intelation-divider--vertical {
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  border-left-style: var(--divider-style, solid);
  border-left-color: var(--divider-color);
}

.intelation-divider--vertical.intelation-divider--thickness-1 {
  border-left-width: 1px;
}

.intelation-divider--vertical.intelation-divider--thickness-2 {
  border-left-width: 2px;
}

.intelation-divider--vertical.intelation-divider--thickness-3 {
  border-left-width: 3px;
}

/* Line Styles */

.intelation-divider--solid {
  --divider-style: solid;
}

.intelation-divider--dashed {
  --divider-style: dashed;
}

.intelation-divider--dotted {
  --divider-style: dotted;
}

/* With Label (Horizontal only) */

.intelation-divider--with-label {
  display: flex;
  align-items: center;
  text-align: center;
  height: auto;
  border: none;
  gap: var(--spacing-3, 0.75rem);
}

.intelation-divider--with-label::before,
.intelation-divider--with-label::after {
  content: '';
  flex: 1;
  border-top-style: var(--divider-style, solid);
  border-top-color: var(--divider-color);
}

.intelation-divider--with-label.intelation-divider--thickness-1::before,
.intelation-divider--with-label.intelation-divider--thickness-1::after {
  border-top-width: 1px;
}

.intelation-divider--with-label.intelation-divider--thickness-2::before,
.intelation-divider--with-label.intelation-divider--thickness-2::after {
  border-top-width: 2px;
}

.intelation-divider--with-label.intelation-divider--thickness-3::before,
.intelation-divider--with-label.intelation-divider--thickness-3::after {
  border-top-width: 3px;
}

.intelation-divider__label {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  padding: 0 var(--spacing-2, 0.5rem);
}

.flex {
  box-sizing: border-box;
}

.flex > * {
  box-sizing: border-box;
}

.grid {
  box-sizing: border-box;
}

.grid > * {
  box-sizing: border-box;
}

/* Responsive grid using CSS custom properties */

.grid--responsive {
  /* Default to mobile columns */
  grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
}

/* Tablet breakpoint (768px) */

@media (min-width: 768px) {
  .grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-tablet, var(--grid-cols-mobile, 2)), 1fr);
  }
}

/* Desktop breakpoint (1024px) */

@media (min-width: 1024px) {
  .grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-desktop, var(--grid-cols-tablet, var(--grid-cols-mobile, 3))), 1fr);
  }
}

.heading {
  font-family: var(--fontFamily-sans);
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
}

/* Size Variants */

.heading--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}

.heading--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}

.heading--size-md {
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-normal);
}

.heading--size-lg {
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
}

.heading--size-xl {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-28);
}

.heading--size-2xl {
  font-size: var(--fontSize-2xl);
  line-height: var(--lineHeight-tight);
}

.heading--size-3xl {
  font-size: var(--fontSize-3xl);
  line-height: var(--lineHeight-tight);
}

.heading--size-4xl {
  font-size: var(--fontSize-4xl);
  line-height: var(--lineHeight-tight);
}

.heading--size-5xl {
  font-size: var(--fontSize-5xl);
  line-height: var(--lineHeight-none);
}

.heading--size-6xl {
  font-size: var(--fontSize-6xl);
  line-height: var(--lineHeight-none);
}

/* Weight Variants */

.heading--weight-normal {
  font-weight: var(--fontWeight-normal);
}

.heading--weight-medium {
  font-weight: var(--fontWeight-medium);
}

.heading--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}

.heading--weight-bold {
  font-weight: var(--fontWeight-bold);
}

/* Color Variants */

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

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

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

.heading--color-inverse {
  color: var(--color-text-inverse);
}

/* Alignment */

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

.heading--align-center {
  text-align: center;
}

.heading--align-right {
  text-align: right;
}

.label {
  font-family: var(--fontFamily-sans);
  display: inline-block;
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
  cursor: pointer;
}

/* Size Variants */

.label--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}

.label--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}

.label--size-base {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-normal);
}

/* Weight Variants */

.label--weight-normal {
  font-weight: var(--fontWeight-normal);
}

.label--weight-medium {
  font-weight: var(--fontWeight-medium);
}

.label--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}

.label--weight-bold {
  font-weight: var(--fontWeight-bold);
}

/* Color Variants */

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

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

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

/* Required Indicator */

.label__required {
  color: var(--color-error-500);
  margin-left: 4px;
}

/* Link base styles */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  color: var(--color-custom-link);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
  cursor: pointer;
  outline: none;
  border-radius: var(--borderRadius-base);
}
/* Sizes */
.link--sm {
  font-size: var(--fontSize-sm);
  padding: 4px 8px;
}
.link--md {
  font-size: var(--fontSize-base);
  padding: 6px 12px;
}
.link--lg {
  font-size: var(--fontSize-lg);
  padding: 8px 16px;
}
/* Variants */
.link--default {
  padding: 0;
}
.link--default:hover {
  color: var(--color-violet-600);
}
.link--default:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.link--nav {
  color: var(--color-text-secondary);
  padding: 8px 12px;
}
.link--nav:hover {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
}
.link--nav.link--active {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
  font-weight: var(--fontWeight-semibold);
}
.link--nav:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.link--breadcrumb {
  color: var(--color-text-secondary);
  padding: 4px 6px;
}
.link--breadcrumb:hover {
  color: var(--color-custom-link);
}
.link--breadcrumb.link--active {
  color: var(--color-text-primary);
  font-weight: var(--fontWeight-semibold);
  pointer-events: none;
}
.link--breadcrumb:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* Underline styles */
.link--underline .link__content {
  text-decoration: underline;
}
.link--underline:hover .link__content {
  text-decoration: none;
}
/* Disabled state */
.link--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
/* Icon styles */
.link__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.link__icon svg {
  width: 16px;
  height: 16px;
}
.link--sm .link__icon svg {
  width: 14px;
  height: 14px;
}
.link--lg .link__icon svg {
  width: 20px;
  height: 20px;
}
/* Content */
.link__content {
  display: inline-block;
}

/* NavItem base styles */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--borderRadius-md);
  transition: color 150ms ease, background-color 150ms ease;
  cursor: pointer;
  outline: none;
  position: relative;
}
/* Hover state */
.nav-item:hover {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
}
/* Active state */
.nav-item--active {
  color: var(--color-custom-link);
  background-color: var(--color-background-secondary);
  font-weight: var(--fontWeight-semibold);
}
/* Focus state */
.nav-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* Disabled state */
.nav-item--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
/* Collapsed state */
.nav-item--collapsed {
  justify-content: center;
  padding: 12px;
}
/* Icon */
.nav-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.nav-item__icon svg {
  width: 20px;
  height: 20px;
}
/* Label */
.nav-item__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge */
.nav-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-custom-white);
  background-color: var(--color-custom-link);
  border-radius: var(--borderRadius-full);
  line-height: 1;
}
/* Badge dot for collapsed state */
.nav-item__badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--color-custom-link);
  border-radius: var(--borderRadius-full);
  border: 2px solid var(--color-background-white);
}
/* Collapsed with active state */
.nav-item--collapsed.nav-item--active {
  position: relative;
}
.nav-item--collapsed.nav-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background-color: var(--color-custom-link);
  border-radius: 0 var(--borderRadius-sm) var(--borderRadius-sm) 0;
}

/* ==========================================================================
   Skeleton Component Styles
   ========================================================================== */

/* Base skeleton styles */

.skeleton {
  display: inline-block;
  background-color: var(--color-gray-200);
  border-radius: var(--borderRadius-base);
  position: relative;
  overflow: hidden;
}

/* Variant: Text */

.skeleton--text {
  border-radius: var(--borderRadius-base);
  transform: scale(1, 0.6);
}

/* Variant: Rectangular */

.skeleton--rectangular {
  border-radius: var(--borderRadius-md);
}

/* Variant: Circular */

.skeleton--circular {
  border-radius: var(--borderRadius-full);
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Pulse animation */

@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.skeleton--animation-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Wave animation */

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton--animation-wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-white-alpha-50),
    transparent
  );
  animation: skeleton-wave 1.6s linear infinite;
}

/* Respect reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
  .skeleton--animation-pulse {
    animation: none;
  }

  .skeleton--animation-wave::after {
    animation: none;
  }
}

/* ==========================================================================
   Multiple Lines Container
   ========================================================================== */

.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-lines .skeleton {
  width: 100%;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skeleton {
  /* Screen readers should ignore skeleton loaders */
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   Dark Mode Support (Future Enhancement)
   ========================================================================== */

/* 
@media (prefers-color-scheme: dark) {
  .skeleton {
    background-color: var(--color-gray-700);
  }

  .skeleton--animation-wave::after {
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-white-alpha-20),
      transparent
    );
  }
}
*/

/* Stack component styles using CSS custom properties from design tokens */

.stack {
  display: flex;
  flex-direction: var(--stack-direction, column);
  align-items: var(--stack-align, stretch);
  justify-content: var(--stack-justify, flex-start);
  gap: var(--stack-gap, 24px);
}

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

/* Responsive breakpoint styles */

@media (min-width: 640px) {
  .stack {
    flex-direction: var(--stack-direction-sm, var(--stack-direction, column));
    align-items: var(--stack-align-sm, var(--stack-align, stretch));
    justify-content: var(--stack-justify-sm, var(--stack-justify, flex-start));
    gap: var(--stack-gap-sm, var(--stack-gap, 24px));
  }
}

@media (min-width: 768px) {
  .stack {
    flex-direction: var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column)));
    align-items: var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch)));
    justify-content: var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start)));
    gap: var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px)));
  }
}

@media (min-width: 1024px) {
  .stack {
    flex-direction: var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column))));
    align-items: var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch))));
    justify-content: var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start))));
    gap: var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px))));
  }
}

@media (min-width: 1280px) {
  .stack {
    flex-direction: var(--stack-direction-xl, var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column)))));
    align-items: var(--stack-align-xl, var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch)))));
    justify-content: var(--stack-justify-xl, var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start)))));
    gap: var(--stack-gap-xl, var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px)))));
  }
}

@media (min-width: 1536px) {
  .stack {
    flex-direction: var(--stack-direction-2xl, var(--stack-direction-xl, var(--stack-direction-lg, var(--stack-direction-md, var(--stack-direction-sm, var(--stack-direction, column))))));
    align-items: var(--stack-align-2xl, var(--stack-align-xl, var(--stack-align-lg, var(--stack-align-md, var(--stack-align-sm, var(--stack-align, stretch))))));
    justify-content: var(--stack-justify-2xl, var(--stack-justify-xl, var(--stack-justify-lg, var(--stack-justify-md, var(--stack-justify-sm, var(--stack-justify, flex-start))))));
    gap: var(--stack-gap-2xl, var(--stack-gap-xl, var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap-sm, var(--stack-gap, 24px))))));
  }
}
.text {
  font-family: var(--fontFamily-sans);
  margin: 0;
  letter-spacing: var(--letterSpacing-normal);
}

/* Size Variants */

.text--size-xs {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}

.text--size-sm {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-20);
}

.text--size-base {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-normal);
}

.text--size-lg {
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
}

.text--size-xl {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-relaxed);
}

/* Weight Variants */

.text--weight-normal {
  font-weight: var(--fontWeight-normal);
}

.text--weight-medium {
  font-weight: var(--fontWeight-medium);
}

.text--weight-semibold {
  font-weight: var(--fontWeight-semibold);
}

.text--weight-bold {
  font-weight: var(--fontWeight-bold);
}

/* Color Variants */

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

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

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

.text--color-inverse {
  color: var(--color-text-inverse);
}

.text--color-inherit {
  color: inherit;
}

/* Alignment */

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

.text--align-center {
  text-align: center;
}

.text--align-right {
  text-align: right;
}

/* Style Modifiers */

.text--italic {
  font-style: italic;
}

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

/* Checkbox Container */
.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Checkbox Wrapper */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Checkbox Base */
.checkbox {
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--color-border-primary);
  border-radius: var(--borderRadius-sm);
  background-color: var(--color-background-primary);
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  margin: 0;
}
.checkbox:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}
.checkbox:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.checkbox:checked::after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 35%;
  height: 60%;
  border: solid white;
  border-width: 0 2px 2px 0;
}
/* Checkbox Sizes */
.checkbox--sm {
  width: 16px;
  height: 16px;
}
.checkbox--md {
  width: 20px;
  height: 20px;
}
.checkbox--lg {
  width: 24px;
  height: 24px;
}
/* Checkbox States */
.checkbox--error {
  border-color: var(--color-danger);
}
.checkbox--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.checkbox--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.checkbox--disabled:checked {
  background-color: var(--color-text-tertiary);
  border-color: var(--color-text-tertiary);
}
/* Checkbox Label */
.checkbox-label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.checkbox--disabled + .checkbox-label {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Checkbox Messages */
.checkbox-message {
  font-size: var(--fontSize-sm);
  margin-left: 28px;
}
.checkbox-message--error {
  color: var(--color-danger);
}
.checkbox-message--helper {
  color: var(--color-text-secondary);
}

/* DatePicker Component */
.date-picker {
  position: relative;
  width: 100%;
}
/* Input wrapper */
.date-picker__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.date-picker__input-wrapper--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Input */
.date-picker__input {
  width: 100%;
  padding: 8px 40px 8px 12px;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
/* Size variations */
.date-picker__input--sm {
  padding: 6px 36px 6px 10px;
  font-size: var(--fontSize-xs);
}
.date-picker__input--md {
  padding: 8px 40px 8px 12px;
  font-size: var(--fontSize-sm);
}
.date-picker__input--lg {
  padding: 10px 44px 10px 14px;
  font-size: var(--fontSize-base);
}
.date-picker__input:hover:not(:disabled) {
  border-color: var(--color-border-secondary);
}
.date-picker__input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.date-picker__input:disabled {
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.date-picker__input::placeholder {
  color: var(--color-text-tertiary);
}
/* Icons */
.date-picker__icons {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.date-picker__clear {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: var(--fontSize-sm);
  line-height: 1;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
}
.date-picker__clear:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}
.date-picker__calendar-icon {
  font-size: var(--fontSize-base);
  color: var(--color-text-secondary);
}
/* Calendar dropdown */
.date-picker__calendar {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  box-shadow: var(--boxShadow-lg);
  padding: 16px;
  min-width: 280px;
}
/* Presets */
.date-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-primary);
}
.date-picker__preset {
  background: none;
  border: 1px solid var(--color-border-primary);
  padding: 6px 12px;
  font-size: var(--fontSize-xs);
  color: var(--color-text-primary);
  border-radius: var(--borderRadius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-picker__preset:hover {
  background-color: var(--color-background-secondary);
  border-color: var(--color-border-secondary);
}
.date-picker__preset:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* Calendar header */
.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.date-picker__month-year {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-primary);
}
.date-picker__nav-button {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-xl);
  line-height: 1;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
}
.date-picker__nav-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}
.date-picker__nav-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* Weekdays */
.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.date-picker__weekday {
  text-align: center;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  padding: 4px;
}
/* Days grid */
.date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.date-picker__day {
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-picker__day:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
}
.date-picker__day--other-month {
  color: var(--color-text-tertiary);
}
.date-picker__day--today {
  font-weight: var(--fontWeight-semibold);
  color: var(--color-primary);
}
.date-picker__day--selected {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  font-weight: var(--fontWeight-semibold);
}
.date-picker__day--selected:hover {
  background-color: var(--color-primaryHover);
}
.date-picker__day--in-range {
  background-color: var(--color-primary-alpha);
  color: var(--color-primary);
}
.date-picker__day--range-start {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  border-radius: var(--borderRadius-sm) 0 0 var(--borderRadius-sm);
}
.date-picker__day--range-start:only-child,
.date-picker__day--range-start.date-picker__day--selected {
  border-radius: var(--borderRadius-sm);
}
.date-picker__day--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.date-picker__day--disabled:hover {
  background-color: transparent;
}
.date-picker__day:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
/* Time select */
.date-picker__time-select {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-primary);
}
.date-picker__time-input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-picker__time-input:hover {
  border-color: var(--color-border-secondary);
}
.date-picker__time-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

/* Dropdown Component Styles */

.dropdown {
  position: relative;
  display: inline-block;
  font-family: var(--fontFamily-sans);
}

.dropdown__wrapper {
  position: relative;
}

/* Trigger Button */

.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
  text-transform: capitalize;
  outline: none;
}

.dropdown__trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.dropdown__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  width: 22px;
  height: 22px;
}

.dropdown__icon--rotated {
  transform: rotate(180deg);
}

/* Split Button Divider for Tonal Variant */

.dropdown--tonal .dropdown__divider {
  width: 1px;
  height: 38px;
  background: var(--color-dropdown-tonal-divider);
  border: none;
  margin: 0;
  flex-shrink: 0;
}

/* Dropdown Menu */

.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  box-shadow: var(--boxShadow-lg);
  overflow: hidden;
  animation: dropdownSlideIn 0.15s ease-out;
  min-width: 160px;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown Options */

.dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: var(--color-background-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
}

.dropdown__option:hover:not(.dropdown__option--disabled) {
  background-color: var(--color-background-secondary);
}

.dropdown__option--selected {
  color: var(--color-primary);
  background-color: var(--color-brand-50);
}

.dropdown__option--selected:hover {
  background-color: var(--color-brand-100);
}

.dropdown__option--disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.5;
}

.dropdown__check-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Tonal Variant (Default) */

.dropdown--tonal .dropdown__trigger {
  background-color: var(--color-dropdown-tonal-background);
  color: var(--color-dropdown-tonal-text);
  border-radius: var(--borderRadius-md);
}

.dropdown--tonal .dropdown__trigger:hover:not(:disabled) {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.9;
}

.dropdown--tonal .dropdown__trigger:active:not(:disabled) {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.8;
}

.dropdown--tonal.dropdown--open .dropdown__trigger {
  background-color: var(--color-dropdown-tonal-background);
  opacity: 0.9;
}

/* Outlined Variant */

.dropdown--outlined .dropdown__trigger {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
}

.dropdown--outlined .dropdown__trigger:hover:not(:disabled) {
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-50);
}

.dropdown--outlined.dropdown--open .dropdown__trigger {
  border-color: var(--color-border-focus);
}

/* Filled Variant */

.dropdown--filled .dropdown__trigger {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  border-radius: 8px;
}

.dropdown--filled .dropdown__trigger:hover:not(:disabled) {
  background-color: var(--color-background-tertiary);
}

.dropdown--filled.dropdown--open .dropdown__trigger {
  background-color: var(--color-background-tertiary);
}

/* Size Variants */

.dropdown--small .dropdown__trigger {
  padding: 6px 12px;
  font-size: 13px;
}

.dropdown--small .dropdown__option {
  padding: 8px 12px;
  font-size: 13px;
}

.dropdown--medium .dropdown__trigger {
  padding: 0px 10px 0px 20px;
  font-size: var(--fontSize-md);
  line-height: 22px;
}

.dropdown--medium .dropdown__option {
  padding: 10px 16px;
  font-size: 14px;
}

.dropdown--large .dropdown__trigger {
  padding: 12px 20px;
  font-size: 15px;
}

.dropdown--large .dropdown__option {
  padding: 12px 20px;
  font-size: 15px;
}

/* Disabled State */

.dropdown--disabled .dropdown__trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown--disabled .dropdown__trigger:hover {
  background-color: inherit;
}

/* Responsive */

@media (max-width: 640px) {
  .dropdown__menu {
    max-height: 240px;
    overflow-y: auto;
  }
}

/* Input Container */
.input-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.input-container--full-width {
  width: 100%;
}
/* Input Label */
.input-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
/* Input Wrapper */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
/* Input Base */
.input {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
}
.input::placeholder {
  color: var(--color-text-tertiary);
}
.input:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
/* Input Sizes */
.input--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.input--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.input--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
/* Input with Icons */
.input--with-left-icon.input--sm {
  padding-left: 36px;
}
.input--with-left-icon.input--md {
  padding-left: 40px;
}
.input--with-left-icon.input--lg {
  padding-left: 48px;
}
.input--with-right-icon.input--sm {
  padding-right: 36px;
}
.input--with-right-icon.input--md {
  padding-right: 40px;
}
.input--with-right-icon.input--lg {
  padding-right: 48px;
}
/* Input States */
.input--error {
  border-color: var(--color-danger);
}
.input--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.input--success {
  border-color: var(--color-success);
}
.input--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.input--full-width {
  width: 100%;
}
/* Input Icons */
.input-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.input-icon--left {
  left: 12px;
}
.input-icon--right {
  right: 12px;
}
/* Input Messages */
.input-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.input-message--error {
  color: var(--color-danger);
}
.input-message--success {
  color: var(--color-success);
}
.input-message--helper {
  color: var(--color-text-secondary);
}

/* Select Container */
.select-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.select-container--full-width {
  width: 100%;
}
/* Select Label */
.select-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
/* Select Wrapper */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
/* Select Base */
.select {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
}
.select:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
/* Select Sizes */
.select--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.select--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.select--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
/* Select States */
.select--error {
  border-color: var(--color-danger);
}
.select--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.select--success {
  border-color: var(--color-success);
}
.select--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.select--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.select--full-width {
  width: 100%;
}
/* Select Icon */
.select-icon {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
}
/* Select Messages */
.select-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.select-message--error {
  color: var(--color-danger);
}
.select-message--success {
  color: var(--color-success);
}
.select-message--helper {
  color: var(--color-text-secondary);
}

.filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
}

.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border-primary);
}

.filter-panel__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.filter-panel__count {
  margin-left: var(--spacing-2);
}

.filter-panel__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.filter-panel__filter-item {
  display: flex;
  flex-direction: column;
}

.filter-panel__actions {
  display: flex;
  gap: var(--spacing-2);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border-primary);
}

.filter-panel__actions button {
  flex: 1;
}

/* Responsive layout for wider screens */

@media (min-width: 768px) {
  .filter-panel__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
  }
}

/* FormField Component */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field--label-left {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.form-field--label-floating {
  position: relative;
}
.form-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}
/* Size Variations */
.form-field--sm {
  gap: 6px;
}
.form-field--sm.form-field--label-left {
  gap: 12px;
}
.form-field--md {
  gap: 8px;
}
.form-field--md.form-field--label-left {
  gap: 16px;
}
.form-field--lg {
  gap: 10px;
}
.form-field--lg.form-field--label-left {
  gap: 20px;
}
/* Label */
.form-field__label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-normal);
  transition: all 0.2s ease;
}
.form-field--label-left .form-field__label {
  min-width: 120px;
  padding-top: 10px;
  flex-shrink: 0;
}
/* Floating label styles */
.form-field--label-floating .form-field__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--color-background-white);
  padding: 0 4px;
  z-index: 1;
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
}
.form-field--label-floating .form-field__content:focus-within .form-field__label,
.form-field--label-floating .form-field__content:has(input:not(:placeholder-shown)) .form-field__label,
.form-field--label-floating .form-field__content:has(textarea:not(:placeholder-shown)) .form-field__label,
.form-field--label-floating .form-field__content:has(select:not([value=""])) .form-field__label {
  top: 0;
  font-size: var(--fontSize-xs);
  color: var(--color-primary);
}
.form-field--label-floating.form-field--error .form-field__content:focus-within .form-field__label {
  color: var(--color-danger);
}
.form-field--label-floating.form-field--success .form-field__content:focus-within .form-field__label {
  color: var(--color-success);
}
/* Size-specific label styles */
.form-field--sm .form-field__label {
  font-size: var(--fontSize-xs);
}
.form-field--lg .form-field__label {
  font-size: var(--fontSize-base);
}
.form-field--sm.form-field--label-left .form-field__label {
  min-width: 100px;
  padding-top: 8px;
}
.form-field--lg.form-field--label-left .form-field__label {
  min-width: 140px;
  padding-top: 12px;
}
.form-field__label--required {
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-field__required {
  color: var(--color-danger);
  font-size: var(--fontSize-base);
  line-height: 1;
}
/* Content wrapper */
.form-field__content {
  flex: 1;
  min-width: 0;
  position: relative;
}
.form-field--label-left .form-field__content {
  flex: 1;
}
/* Message (helper text, error, success) */
.form-field__message {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  margin-top: 4px;
}
.form-field--sm .form-field__message {
  font-size: var(--fontSize-xs);
}
.form-field--lg .form-field__message {
  font-size: var(--fontSize-base);
}
.form-field__message--helper {
  color: var(--color-text-secondary);
}
.form-field__message--error {
  color: var(--color-danger);
}
.form-field__message--success {
  color: var(--color-success);
}
/* Error state styling for children */
.form-field--error .form-field__content input,
.form-field--error .form-field__content select,
.form-field--error .form-field__content textarea {
  border-color: var(--color-danger);
}
.form-field--error .form-field__content input:focus,
.form-field--error .form-field__content select:focus,
.form-field--error .form-field__content textarea:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
/* Success state styling for children */
.form-field--success .form-field__content input,
.form-field--success .form-field__content select,
.form-field--success .form-field__content textarea {
  border-color: var(--color-success);
}
.form-field--success .form-field__content input:focus,
.form-field--success .form-field__content select:focus,
.form-field--success .form-field__content textarea:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
/* Disabled state */
.form-field--disabled .form-field__label {
  color: var(--color-text-tertiary);
}

/* Radio Container */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Radio Wrapper */
.radio-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Radio Base */
.radio {
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--color-border-primary);
  border-radius: 50%;
  background-color: var(--color-background-primary);
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  margin: 0;
}
.radio:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.radio:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.radio:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.radio:checked::after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: white;
}
/* Radio Sizes */
.radio--sm {
  width: 16px;
  height: 16px;
}
.radio--md {
  width: 20px;
  height: 20px;
}
.radio--lg {
  width: 24px;
  height: 24px;
}
/* Radio States */
.radio--error {
  border-color: var(--color-danger);
}
.radio--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.radio--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.radio--disabled:checked {
  background-color: var(--color-text-tertiary);
  border-color: var(--color-text-tertiary);
}
/* Radio Label */
.radio-label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.radio--disabled + .radio-label {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Radio Messages */
.radio-message {
  font-size: var(--fontSize-sm);
  margin-left: 28px;
}
.radio-message--error {
  color: var(--color-danger);
}
.radio-message--helper {
  color: var(--color-text-secondary);
}

.search-box {
  position: relative;
  width: 100%;
}

/* Input wrapper */

.search-box__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Search icon */

.search-box__icon {
  position: absolute;
  left: var(--spacing-3);
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 1rem;
}

/* Input */

.search-box__input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-10);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}

.search-box__input::placeholder {
  color: var(--color-text-tertiary);
}

/* Size variants */

.search-box--sm .search-box__icon {
  left: var(--spacing-2);
  font-size: 0.875rem;
}

.search-box--sm .search-box__input {
  padding: var(--spacing-1-5) var(--spacing-8) var(--spacing-1-5) var(--spacing-8);
  font-size: var(--font-size-sm);
}

.search-box--lg .search-box__icon {
  left: var(--spacing-4);
  font-size: 1.25rem;
}

.search-box--lg .search-box__input {
  padding: var(--spacing-3) var(--spacing-12) var(--spacing-3) var(--spacing-12);
  font-size: var(--font-size-lg);
}

/* Loading spinner */

.search-box__loader {
  position: absolute;
  right: var(--spacing-3);
  display: flex;
  align-items: center;
}

.search-box__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-primary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: search-box-spin 0.8s linear infinite;
}

@keyframes search-box-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Clear button */

.search-box__clear {
  position: absolute;
  right: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.search-box__clear:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.search-box__clear:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}

/* Categories */

.search-box__categories {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  padding: var(--spacing-1) 0;
  overflow-x: auto;
}

.search-box__category {
  padding: var(--spacing-1-5) var(--spacing-3);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.search-box__category:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.search-box__category--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.search-box__category:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}

/* Dropdown */

.search-box__dropdown {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.search-box--open .search-box__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Loading text */

.search-box__loading-text {
  padding: var(--spacing-4);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Suggestions */

.search-box__suggestion {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2-5) var(--spacing-3);
  cursor: pointer;
  transition: background-color 0.15s;
}

.search-box__suggestion:hover,
.search-box__suggestion--highlighted {
  background-color: var(--color-background-secondary);
}

.search-box__suggestion:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.search-box__suggestion:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* History icon */

.search-box__history-icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}

/* Suggestion text */

.search-box__suggestion-text {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.search-box__highlight {
  background-color: var(--color-warning-alpha-20);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  padding: 0 2px;
  border-radius: var(--radius-xs);
}

/* Suggestion category badge */

.search-box__suggestion-category {
  flex-shrink: 0;
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-full);
  background-color: var(--color-background-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* History suggestions */

.search-box__suggestion--history .search-box__suggestion-text {
  color: var(--color-text-secondary);
}

/* Switch Component */

/* Container with label */

.switch-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.switch-container--label-left {
  flex-direction: row-reverse;
}

.switch-container__label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

/* Switch wrapper */

.switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.switch--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Hidden checkbox input */

.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Track (background rail) */

.switch__track {
  position: relative;
  display: block;
  background-color: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
  transition: background-color 0.2s ease;
}

.switch--checked .switch__track {
  background-color: var(--color-primary);
}

.switch--disabled .switch__track {
  background-color: var(--color-gray-200);
}

.switch--checked.switch--disabled .switch__track {
  background-color: var(--color-primary-alpha);
}

/* Thumb (sliding circle) */

.switch__thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-custom-white);
  border-radius: var(--borderRadius-full);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boxShadow-sm);
}

/* Size variants */

/* Small */

.switch--sm .switch__track {
  width: 32px;
  height: 18px;
}

.switch--sm .switch__thumb {
  width: 14px;
  height: 14px;
  left: 2px;
}

.switch--sm.switch--checked .switch__thumb {
  left: 16px;
}

/* Medium (default) */

.switch--md .switch__track {
  width: 44px;
  height: 24px;
}

.switch--md .switch__thumb {
  width: 20px;
  height: 20px;
  left: 2px;
}

.switch--md.switch--checked .switch__thumb {
  left: 22px;
}

/* Large */

.switch--lg .switch__track {
  width: 56px;
  height: 30px;
}

.switch--lg .switch__thumb {
  width: 26px;
  height: 26px;
  left: 2px;
}

.switch--lg.switch--checked .switch__thumb {
  left: 28px;
}

/* Loading spinner */

.switch__spinner {
  width: 60%;
  height: 60%;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: var(--borderRadius-full);
  animation: switch-spin 0.6s linear infinite;
}

@keyframes switch-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Focus styles */

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Hover states */

.switch:not(.switch--disabled):hover .switch__track {
  background-color: var(--color-gray-400);
}

.switch--checked:not(.switch--disabled):hover .switch__track {
  background-color: var(--color-primaryHover);
}

/* Active state */

.switch:not(.switch--disabled):active .switch__thumb {
  width: calc(100% - 4px);
  max-width: 24px;
}

.switch--sm:not(.switch--disabled):active .switch__thumb {
  max-width: 16px;
}

.switch--lg:not(.switch--disabled):active .switch__thumb {
  max-width: 30px;
}

/* Disabled state */

.switch--disabled .switch__thumb {
  box-shadow: none;
}

.switch-container:has(.switch--disabled) .switch-container__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea Container */
.textarea-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.textarea-container--full-width {
  width: 100%;
}
/* Textarea Label */
.textarea-label {
  display: block;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
/* Textarea Base */
.textarea {
  width: 100%;
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.2s ease-in-out;
  outline: none;
  min-height: 80px;
}
.textarea::placeholder {
  color: var(--color-text-tertiary);
}
.textarea:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}
.textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
/* Textarea Sizes */
.textarea--sm {
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
}
.textarea--md {
  padding: 10px 16px;
  font-size: var(--fontSize-base);
}
.textarea--lg {
  padding: 12px 20px;
  font-size: var(--fontSize-lg);
}
/* Textarea Resize */
.textarea--resize-none {
  resize: none;
}
.textarea--resize-vertical {
  resize: vertical;
}
.textarea--resize-horizontal {
  resize: horizontal;
}
.textarea--resize-both {
  resize: both;
}
/* Textarea States */
.textarea--error {
  border-color: var(--color-danger);
}
.textarea--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-alpha);
}
.textarea--success {
  border-color: var(--color-success);
}
.textarea--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-alpha);
}
.textarea--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}
.textarea--full-width {
  width: 100%;
}
/* Textarea Messages */
.textarea-message {
  font-size: var(--fontSize-sm);
  margin-top: 4px;
}
.textarea-message--error {
  color: var(--color-danger);
}
.textarea-message--success {
  color: var(--color-success);
}
.textarea-message--helper {
  color: var(--color-text-secondary);
}

/* Breadcrumb Component Styles */

.intelation-breadcrumb {
  display: block;
  width: 100%;
}

.intelation-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Breadcrumb Item */

.intelation-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Breadcrumb Link */

.intelation-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.intelation-breadcrumb__link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}

.intelation-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Active Link */

.intelation-breadcrumb__link--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  cursor: default;
  pointer-events: none;
}

/* Breadcrumb Icon */

.intelation-breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1rem;
}

.intelation-breadcrumb__icon svg {
  width: 100%;
  height: 100%;
}

/* Separator */

.intelation-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  user-select: none;
  font-size: var(--font-size-sm);
}

/* Ellipsis Button */

.intelation-breadcrumb__ellipsis-button {
  padding: var(--spacing-1) var(--spacing-3);
  font-weight: var(--font-weight-medium);
}

.intelation-breadcrumb__ellipsis-button:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}

/* Responsive: Reduce spacing on small screens */

@media (max-width: 640px) {
  .intelation-breadcrumb__list {
    gap: var(--spacing-1);
  }

  .intelation-breadcrumb__link {
    padding: var(--spacing-1);
  }

  .intelation-breadcrumb__item {
    font-size: var(--font-size-xs);
  }

  .intelation-breadcrumb__separator {
    font-size: var(--font-size-xs);
  }
}

/* High Contrast Mode Support */

@media (prefers-contrast: high) {
  .intelation-breadcrumb__link {
    text-decoration: underline;
  }

  .intelation-breadcrumb__link--active {
    text-decoration: none;
  }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .intelation-breadcrumb__link {
    transition: none;
  }
}

/* Footer Component Styles */

.footer {
  /* Layout - Full width always with transparent background */
  width: 100%;
  height: var(--layout-footerHeight);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.footer__container {
  /* Container with max-width constraint */
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  padding: 0 calc(var(--layout-footerPaddingX) + var(--layout-padding, var(--layout-containerPadding)));
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
}

/* Copyright Section */

.footer__copyright {
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-footer);
  color: var(--color-footer-text);
  white-space: nowrap;
}

/* Links Section */

.footer__links {
  display: flex;
  align-items: center;
}

.footer__links-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__link-item {
  margin: 0;
  padding: 0;
}

.footer__link {
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  line-height: var(--lineHeight-footer);
  color: var(--color-footer-link);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.footer__link:hover:not(.footer__link--disabled) {
  color: var(--color-footer-link);
  text-decoration: underline;
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer__link--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}

.footer__link--disabled:hover {
  text-decoration: none;
}

/* Responsive Design */

@media (max-width: 768px) {
  .footer__container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer__copyright {
    white-space: normal;
  }

  .footer__links-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* Header Component Styles */

.header {
  /* Gradient background from Figma design */
  background: linear-gradient(0deg, var(--color-header-gradientStart) 0%, var(--color-header-gradientEnd) 100%);
  
  /* Box shadow from Figma design */
  box-shadow: var(--boxShadow-header);
  
  /* Layout - Full width always */
  width: 100%;
  height: var(--layout-headerHeight);
  position: relative;
  z-index: 1000;
}

.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  margin: 0 auto;
  padding: 0 var(--layout-padding, var(--layout-containerPadding));
  width: 100%;
}

/* Logo Section */

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-button {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}

.header__logo-button:hover {
  background-color: var(--color-white-alpha-10);
}

.header__logo-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}

/* Navigation Section */

.header__navigation {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 2rem;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--layout-headerNavGap, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav-item {
  display: flex;
}

.header__nav-link {
  background: none;
  border: none;
  color: var(--color-text-inverse);
  font-family: var(--fontFamily-sans);
  font-size: var(--fontSize-md);
  font-weight: var(--fontWeight-semibold);
  line-height: 18px;
  letter-spacing: var(--letterSpacing-wider);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.header__nav-link:hover {
  background-color: var(--color-white-alpha-10);
  color: var(--color-text-inverse);
}

.header__nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}

.header__nav-link--active {
  background-color: var(--color-white-alpha-15);
  color: var(--color-text-inverse);
  font-weight: var(--fontWeight-semibold);
}

.header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-text-inverse);
  border-radius: 1px;
}

.header__nav-link--active {
  position: relative;
}

.header__nav-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Profile Section */

.header__profile {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__profile-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  color: var(--color-text-inverse);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
  min-width: 0;
}

.header__profile-button:hover {
  background-color: var(--color-white-alpha-10);
}

.header__profile-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white-alpha-50);
}

.header__profile-button--open {
  background-color: var(--color-white-alpha-10);
}

/* Profile Avatar */

.header__profile-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white-alpha-20);
}

.header__profile-initials {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-white-alpha-15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  border: 2px solid var(--color-white-alpha-20);
}

.header__profile-icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
}

.header__profile-icon-wrapper > * {
  width: 2.5rem;
  height: 2.5rem;
}

.header__profile-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Profile Info */

.header__profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.header__profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.header__profile-email {
  font-size: 0.75rem;
  color: var(--color-white-alpha-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Profile Arrow */

.header__profile-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.header__profile-arrow--open {
  transform: rotate(180deg);
}

/* Profile Dropdown */

.header__profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 0.5rem;
  box-shadow: var(--boxShadow-lg);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all 0.2s ease;
  z-index: 1001;
}

.header__profile-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__profile-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.header__profile-menu-item {
  display: flex;
}

.header__profile-menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header__profile-menu-link:hover {
  background-color: var(--color-background-secondary);
}

.header__profile-menu-link:focus {
  outline: none;
  background-color: var(--color-background-tertiary);
}

.header__profile-menu-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.header__profile-menu-icon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header__profile-menu-label {
  flex: 1;
  min-width: 0;
}

.header__profile-separator {
  height: 1px;
  background-color: var(--color-border-secondary);
  margin: 0.25rem 0;
}

/* Responsive Design */

@media (max-width: 768px) {
  .header__container {
    padding: 0 1rem;
  }
  
  .header__navigation {
    margin: 0 1rem;
  }
  
  .header__nav-list {
    gap: 1rem;
  }
  
  .header__nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .header__profile-info {
    display: none;
  }
  
  .header__profile-dropdown {
    min-width: 180px;
  }
}

@media (max-width: 640px) {
  .header__container {
    padding: 0 0.75rem;
  }
  
  .header__navigation {
    margin: 0 0.5rem;
  }
  
  .header__nav-list {
    gap: 0.5rem;
  }
  
  .header__nav-link {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
  
  .header__profile-button {
    padding: 0.25rem;
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .header {
    border-bottom: 2px solid var(--color-text-inverse);
  }
  
  .header__nav-link {
    border: 1px solid transparent;
  }
  
  .header__nav-link:focus {
    border-color: var(--color-text-inverse);
    box-shadow: none;
  }
  
  .header__profile-button:focus {
    border: 2px solid var(--color-text-inverse);
    box-shadow: none;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .header__nav-link,
  .header__profile-button,
  .header__profile-arrow,
  .header__profile-dropdown,
  .header__profile-menu-link {
    transition: none;
  }
}
/* Layout Component Styles */

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Sticky footer variant - pushes footer to bottom */

.layout--sticky-footer {
  min-height: 100vh;
}

.layout--sticky-footer .layout__content {
  flex: 1 0 auto;
}

.layout--sticky-footer .footer {
  flex-shrink: 0;
}

/* Main Content Area */

.layout__content {
  width: 100%;
  box-sizing: border-box;
}

/* Content Container - Constrained width */

.layout__content-container {
  max-width: var(--layout-max-width, var(--layout-containerMaxWidth));
  padding: var(--layout-padding, var(--layout-containerPadding));
  padding-bottom: calc(var(--layout-padding, var(--layout-containerPadding)) * 0.5);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Full Width Content - No container */

.layout__content--full-width {
  width: 100%;
  max-width: none;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .layout__content-container {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .layout__content-container {
    padding: 12px !important;
  }
}

/* Utility classes for common spacing patterns */

.layout__content--no-padding {
  padding: 0;
}

.layout__content--compact {
  padding: 16px;
}

.layout__content--spacious {
  padding: 32px;
}

/* Logo Component Styles */

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

/* Clickable styles */

.logo--clickable {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.25rem;
  border-radius: 0.375rem;
}

.logo--clickable:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.logo--clickable:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

.logo--clickable:active {
  transform: scale(0.98);
}

.logo--clickable:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* Size variants */

.logo--sm {
  gap: 0.375rem;
}

.logo--sm .logo__image {
  height: 1.5rem;
  width: auto;
}

.logo--sm .logo__text {
  font-size: 0.875rem;
  font-weight: 600;
}

.logo--md {
  gap: 0.5rem;
}

.logo--md .logo__image {
  height: 2rem;
  width: auto;
}

.logo--md .logo__text {
  font-size: 1.125rem;
  font-weight: 600;
}

.logo--lg {
  gap: 0.625rem;
}

.logo--lg .logo__image {
  height: 2.5rem;
  width: auto;
}

.logo--lg .logo__text {
  font-size: 1.375rem;
  font-weight: 700;
}

.logo--xl {
  gap: 0.75rem;
}

.logo--xl .logo__image {
  height: 3rem;
  width: auto;
}

.logo--xl .logo__text {
  font-size: 1.625rem;
  font-weight: 700;
}

/* Type variants */

.logo--icon {
  gap: 0;
}

.logo--icon .logo__text {
  display: none;
}

.logo--text .logo__image {
  display: none;
}

.logo--full {
  /* Default - shows both image and text */
  display: flex;
}

/* Color variants */

.logo--default .logo__text {
  color: var(--color-text-primary);
}

.logo--white .logo__text {
  color: var(--color-text-inverse);
}

.logo--dark .logo__text {
  color: var(--color-text-primary);
}

/* Image styles */

.logo__image {
  display: block;
  object-fit: contain;
  transition: all 0.2s ease;
}

.logo__image--icon {
  /* For icon-only variant, make it square */
  aspect-ratio: 1;
}

/* Text styles */

.logo__text {
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Loading state */

.logo--loading {
  opacity: 0.6;
  pointer-events: none;
}

.logo__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
}

.logo__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border-secondary);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: logo-spin 1s linear infinite;
}

@keyframes logo-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .logo--xl {
    gap: 0.5rem;
  }
  
  .logo--xl .logo__image {
    height: 2.25rem;
  }
  
  .logo--xl .logo__text {
    font-size: 1.25rem;
  }
  
  .logo--lg {
    gap: 0.5rem;
  }
  
  .logo--lg .logo__image {
    height: 2rem;
  }
  
  .logo--lg .logo__text {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  /* On very small screens, consider showing only icon */
  .logo--responsive .logo__text {
    display: none;
  }
  
  .logo--responsive {
    gap: 0;
  }
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .logo--clickable:focus {
    box-shadow: 0 0 0 2px currentColor;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .logo,
  .logo__image,
  .logo__text,
  .logo--clickable {
    transition: none;
  }
  
  .logo--clickable:hover {
    transform: none;
  }
  
  .logo--clickable:active {
    transform: none;
  }
  
  .logo__spinner {
    animation: none;
  }
}
/* Menu Component Styles */

.menu__trigger {
  display: inline-block;
}

.menu {
  position: fixed;
  z-index: 1000;
  background: var(--color-custom-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.menu--open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.menu__content {
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Size Variants */

.menu--sm {
  min-width: 160px;
  font-size: 0.875rem;
}

.menu--md {
  min-width: 200px;
  font-size: 0.9375rem;
}

.menu--lg {
  min-width: 240px;
  font-size: 1rem;
}

/* Menu Item Wrapper */

.menu__item-wrapper {
  position: relative;
}

/* Menu Item Base */

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-custom-textPrimary);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  outline: none;
}

.menu__item:hover:not(.menu__item--disabled) {
  background-color: var(--color-gray-100);
}

.menu__item:focus-visible {
  background-color: var(--color-gray-100);
  box-shadow: 0 0 0 2px var(--color-brand-500) inset;
}

.menu__item--active:not(.menu__item--disabled) {
  background-color: var(--color-gray-100);
}

.menu__item--disabled {
  color: var(--color-gray-400);
  cursor: not-allowed;
  opacity: 0.5;
}

.menu__item--has-submenu {
  padding-right: 8px;
}

/* Menu Item Sizes */

.menu__item--sm {
  padding: 6px 10px;
  gap: 8px;
  font-size: 0.875rem;
}

.menu__item--md {
  padding: 8px 12px;
  gap: 12px;
  font-size: 0.9375rem;
}

.menu__item--lg {
  padding: 10px 14px;
  gap: 14px;
  font-size: 1rem;
}

/* Menu Item Icon */

.menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-600);
}

.menu__item:hover:not(.menu__item--disabled) .menu__item-icon {
  color: var(--color-custom-textPrimary);
}

/* Menu Item Content */

.menu__item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.menu__item-label {
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu__item-description {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menu Item Shortcut */

.menu__item-shortcut {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.75rem;
  font-family: monospace;
  line-height: 1;
}

/* Checkbox Menu Item */

.menu__item-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.menu__item-checkbox svg {
  width: 16px;
  height: 16px;
  color: var(--color-custom-white);
}

.menu__item[aria-checked="true"] .menu__item-checkbox {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
}

/* Radio Menu Item */

.menu__item-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}

.menu__item-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand-500);
}

.menu__item[aria-checked="true"] .menu__item-radio {
  border-color: var(--color-brand-500);
}

/* Loading State */

.menu__item--loading {
  pointer-events: none;
}

.menu__item-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.menu__item-spinner {
  width: 16px;
  height: 16px;
  animation: menu-spin 1s linear infinite;
}

@keyframes menu-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Submenu Arrow */

.menu__item-submenu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
  margin-left: auto;
}

/* Submenu Positioning */

.menu__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  z-index: 1001;
}

/* Separator */

.menu__separator {
  height: 1px;
  margin: 4px 0;
  background-color: var(--color-gray-200);
}

/* Custom Menu Item */

.menu__item-custom {
  padding: 4px;
}

/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: none;
  }

  .menu__item {
    transition: none;
  }

  .menu__item-spinner {
    animation: none;
  }
}

/* Dark Mode Support (if needed in future) */

@media (prefers-color-scheme: dark) {
  .menu {
    background: var(--color-gray-900);
    border-color: var(--color-gray-700);
  }

  .menu__item {
    color: var(--color-gray-100);
  }

  .menu__item:hover:not(.menu__item--disabled) {
    background-color: var(--color-gray-800);
  }

  .menu__item:focus-visible {
    background-color: var(--color-gray-800);
  }

  .menu__item--active:not(.menu__item--disabled) {
    background-color: var(--color-gray-800);
  }

  .menu__item--disabled {
    color: var(--color-gray-600);
  }

  .menu__item-icon {
    color: var(--color-gray-400);
  }

  .menu__item:hover:not(.menu__item--disabled) .menu__item-icon {
    color: var(--color-gray-100);
  }

  .menu__item-description {
    color: var(--color-gray-500);
  }

  .menu__item-shortcut {
    background-color: var(--color-gray-800);
    color: var(--color-gray-400);
  }

  .menu__separator {
    background-color: var(--color-gray-700);
  }
}

/* NavigationRibbon Component Styles */

.navigation-ribbon {
  width: 100%;
}

.navigation-ribbon__container {
  display: flex;
  border-bottom: 2px solid var(--color-border-primary);
}

.navigation-ribbon__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.navigation-ribbon__item:hover:not(.navigation-ribbon__item--disabled) {
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}

.navigation-ribbon__item:focus {
  outline: none;
}

.navigation-ribbon__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  border-radius: var(--borderRadius-base);
}

/* Active state */

.navigation-ribbon__item--active {
  color: var(--color-violet);
  border-bottom-color: var(--color-violet);
  font-weight: var(--fontWeight-semibold);
}

.navigation-ribbon__item--active:hover {
  color: var(--color-violetHover);
  border-bottom-color: var(--color-violetHover);
}

/* Disabled state */

.navigation-ribbon__item--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

.navigation-ribbon__item--disabled:hover {
  color: var(--color-text-tertiary);
  background-color: transparent;
}

/* Icon */

.navigation-ribbon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontSize-lg);
}

/* Label */

.navigation-ribbon__label {
  line-height: var(--lineHeight-normal);
}

/* Vertical variant */

.navigation-ribbon--vertical .navigation-ribbon__container {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border-primary);
}

.navigation-ribbon--vertical .navigation-ribbon__item {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
  justify-content: flex-start;
}

.navigation-ribbon--vertical .navigation-ribbon__item--active {
  border-bottom-color: transparent;
  border-right-color: var(--color-violet);
}

.navigation-ribbon--vertical .navigation-ribbon__item--active:hover {
  border-right-color: var(--color-violetHover);
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .navigation-ribbon__container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navigation-ribbon__item {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--fontSize-xs);
  }

  .navigation-ribbon__icon {
    font-size: var(--fontSize-base);
  }
}

/* PageHeader Component Styles */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

/* Breadcrumbs section */

.page-header__breadcrumbs {
  margin-bottom: var(--spacing-2);
}

/* Main container with title and actions */

.page-header__container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-6);
}

/* Content section (title + description) */

.page-header__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

/* Title */

.page-header__title {
  margin: 0;
  font-family: var(--fontFamily-display);
  font-weight: var(--fontWeight-bold);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-tight);
}

/* Description */

.page-header__description {
  margin: var(--spacing-2) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--lineHeight-normal);
}

/* Actions section */

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

/* Size variants */

.page-header--sm .page-header__title {
  font-size: var(--fontSize-2xl);
}

.page-header--sm .page-header__description {
  font-size: var(--fontSize-sm);
}

.page-header--md .page-header__title {
  font-size: var(--fontSize-3xl);
}

.page-header--md .page-header__description {
  font-size: var(--fontSize-base);
}

.page-header--lg .page-header__title {
  font-size: var(--fontSize-4xl);
}

.page-header--lg .page-header__description {
  font-size: var(--fontSize-lg);
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .page-header__container {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header__actions {
    align-self: flex-start;
  }

  .page-header--lg .page-header__title {
    font-size: var(--fontSize-3xl);
  }

  .page-header--md .page-header__title {
    font-size: var(--fontSize-2xl);
  }
}

/* TabNavigation - Pill-style navigation buttons */

.tab-navigation {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Base item styles */

.tab-navigation__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-semibold);
  text-align: center;
  text-transform: capitalize;
  border-radius: var(--borderRadius-md);
  white-space: nowrap;
}

.tab-navigation__item:focus-visible {
  outline: 2px solid var(--color-violet);
  outline-offset: 2px;
}

.tab-navigation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-navigation__label {
  display: inline-block;
}

/* Size variants */

.tab-navigation--sm .tab-navigation__item {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
}

.tab-navigation--md .tab-navigation__item {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-sm);
}

.tab-navigation--lg .tab-navigation__item {
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-base);
}

/* Contained variant - Violet color scheme */

.tab-navigation--contained.tab-navigation--violet .tab-navigation__item--active {
  background: var(--color-violet);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-violet);
}

.tab-navigation--contained.tab-navigation--violet .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-violet);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-violet);
}

/* Contained variant - Primary color scheme */

.tab-navigation--contained.tab-navigation--primary .tab-navigation__item--active {
  background: var(--color-primary-600);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}

.tab-navigation--contained.tab-navigation--primary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-primary-600);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}

/* Contained variant - Secondary color scheme */

.tab-navigation--contained.tab-navigation--secondary .tab-navigation__item--active {
  background: var(--color-gray-700);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}

.tab-navigation--contained.tab-navigation--secondary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-gray-700);
  color: var(--color-custom-white);
  box-shadow: var(--boxShadow-md);
}

/* Light variant - Violet color scheme */

.tab-navigation--light.tab-navigation--violet .tab-navigation__item--active {
  background: var(--color-violet-50);
  color: var(--color-violet);
  border: 1px solid var(--color-violet);
}

.tab-navigation--light.tab-navigation--violet .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-violet-50);
  color: var(--color-violet);
}

/* Light variant - Primary color scheme */

.tab-navigation--light.tab-navigation--primary .tab-navigation__item--active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-600);
}

.tab-navigation--light.tab-navigation--primary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* Light variant - Secondary color scheme */

.tab-navigation--light.tab-navigation--secondary .tab-navigation__item--active {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-400);
}

.tab-navigation--light.tab-navigation--secondary .tab-navigation__item:hover:not(:disabled):not(.tab-navigation__item--active) {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Disabled state */

.tab-navigation__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-navigation__item--disabled:hover {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}

/* Tabs Container */
.tabs {
  display: flex;
  gap: 0;
  width: 100%;
}
.tabs--horizontal {
  flex-direction: column;
}
.tabs--vertical {
  flex-direction: row;
}
/* Tab List */
.tabs__list {
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs__list::-webkit-scrollbar {
  height: 4px;
}
.tabs__list::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}
.tabs__list::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
}
.tabs__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
.tabs--horizontal .tabs__list {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-primary);
}
.tabs--vertical .tabs__list {
  flex-direction: column;
  border-right: 1px solid var(--color-border-primary);
  min-width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Tab Button Base */
.tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: none;
  border: none;
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  outline: none;
  position: relative;
}
.tabs__tab:hover:not(.tabs__tab--disabled) {
  color: var(--color-text-primary);
}
.tabs__tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
  z-index: 1;
}
.tabs__tab--active {
  color: var(--color-brand-600);
}
.tabs__tab--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
/* Tab Icon */
.tabs__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
/* Tab Label */
.tabs__label {
  line-height: 1.5;
}
/* Underline Variant */
.tabs--underline .tabs__tab {
  border-bottom: 2px solid transparent;
}
.tabs--underline.tabs--horizontal .tabs__tab {
  margin-bottom: -1px;
}
.tabs--underline.tabs--vertical .tabs__tab {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-right: -1px;
}
.tabs--underline .tabs__tab--active {
  border-color: var(--color-brand-600);
}
/* Pills Variant */
.tabs--pills .tabs__tab {
  border-radius: var(--borderRadius-lg);
  margin: 4px;
}
.tabs--pills .tabs__tab--active {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}
.tabs--pills .tabs__tab:hover:not(.tabs__tab--disabled):not(.tabs__tab--active) {
  background-color: var(--color-background-secondary);
}
/* Cards Variant */
.tabs--cards .tabs__tab {
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-primary);
  margin: 4px;
  border-radius: var(--borderRadius-lg);
}
.tabs--cards.tabs--horizontal .tabs__tab {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tabs--cards.tabs--vertical .tabs__tab {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tabs--cards .tabs__tab--active {
  background-color: var(--color-background-white);
  border-color: var(--color-brand-600);
  color: var(--color-brand-700);
}
.tabs--cards .tabs__tab:hover:not(.tabs__tab--disabled):not(.tabs__tab--active) {
  background-color: var(--color-background-primary);
}
/* Size Variations */
.tabs--sm .tabs__tab {
  padding: 8px 16px;
  font-size: var(--fontSize-sm);
}
.tabs--sm .tabs__icon {
  width: 16px;
  height: 16px;
}
.tabs--lg .tabs__tab {
  padding: 16px 24px;
  font-size: var(--fontSize-lg);
}
.tabs--lg .tabs__icon {
  width: 24px;
  height: 24px;
}
/* Tab Panels */
.tabs__panels {
  flex: 1;
  min-height: 0;
}
.tabs__panel {
  display: none;
  padding: 20px;
  animation: tabs-fade-in 0.2s ease;
}
.tabs__panel--active {
  display: block;
}
@keyframes tabs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tabs__tab,
  .tabs__panel {
    transition: none;
    animation: none;
  }
}
/* Responsive Adjustments */
@media (max-width: 640px) {
  .tabs--vertical {
    flex-direction: column;
  }

  .tabs--vertical .tabs__list {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border-primary);
    min-width: auto;
    width: 100%;
  }

  .tabs__tab {
    padding: 10px 16px;
    font-size: var(--fontSize-sm);
  }

  .tabs__panel {
    padding: 16px;
  }

  .tabs--sm .tabs__tab {
    padding: 6px 12px;
    font-size: var(--fontSize-xs);
  }

  .tabs--lg .tabs__tab {
    padding: 12px 20px;
    font-size: var(--fontSize-base);
  }
}

.card {
  background: var(--color-background-white);
  box-shadow: var(--boxShadow-base);
  border-radius: var(--borderRadius-md);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.card--clickable {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--boxShadow-lg);
}

.card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 32px;
}

/* Help icon container */

.card__help-container {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Help button */

.card__help-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--borderRadius-base);
  transition: all 0.2s ease;
  position: relative;
}

.card__help-button:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.card__help-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

.card__help-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Help tooltip */

.card__help-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-text-primary);
  color: var(--color-background-white);
  padding: 8px 12px;
  border-radius: var(--borderRadius-md);
  box-shadow: var(--boxShadow-lg);
  font-size: var(--fontSize-sm);
  line-height: 1.4;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  max-width: 250px;
  min-width: 150px;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
}

.card__help-container:hover .card__help-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip arrow */

.card__help-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-bottom-color: var(--color-text-primary);
}

/* Legacy support for deprecated showMenu prop */

.card__menu-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--borderRadius-base);
  transition: all 0.2s ease;
}

.card__menu-button:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.card__menu-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

.card__menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textPrimary);
  margin: 0;
}

.card__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-20);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textSecondary);
  margin: 0;
}

.card__content {
  display: flex;
  flex-direction: column;
}

/* Sectioned Card */

.card--sectioned {
  padding: 0;
  gap: 0;
}

/* Sectioned Content */

.card__content--sectioned {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}

/* Image Overlay Variant */

.card--image-overlay {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal;
  height: 180px;
  padding: 16px;
}

.card--image-overlay .card__header,
.card--image-overlay .card__menu-button,
.card--image-overlay .card__content {
  position: relative;
  z-index: 1;
}

.card--image-overlay .card__title {
  color: var(--color-text-inverse);
}

.card--image-overlay .card__description {
  color: var(--color-text-inverse);
}

.card--image-overlay .card__menu-button {
  color: var(--color-text-inverse);
}

.card--image-overlay .card__menu-button:hover {
  background-color: var(--color-primary-alpha);
  color: var(--color-text-inverse);
}

/* List Variant */

.card--list {
  gap: 12px;
}

.card--list .card__header {
  padding-right: 0;
}

.card--list .card__content--list {
  gap: 0;
  padding: 0;
}

/* Multi-Section Variant */

.card--multi-section {
  padding: 0;
  gap: 0;
}

.card--multi-section .card__header {
  padding: 32px 24px 0;
}

.card--multi-section .card__footer {
  padding: 0 24px 24px;
}

/* Card Footer */

.card__footer {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
  color: var(--color-custom-textSecondary);
  text-align: center;
  padding: 16px 24px 0;
}

/* Metric Styles */

.card__metric {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.card__metric-value {
  font-family: var(--fontFamily-sans);
  font-style: normal;
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-3xl);
  line-height: var(--lineHeight-tight);
  color: var(--color-text-metric-value);
  margin: 0;
}

.card__metric-label {
  font-family: var(--fontFamily-sans);
  font-style: normal;
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  letter-spacing: var(--letterSpacing-wide);
  color: var(--color-text-metric-label);
  margin: 0;
}

/* CardSection Component */
.card-section {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 32px 24px;
}
/* Section Header */
.card-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.card-section__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textPrimary);
  margin: 0;
}
.card-section__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-20);
  letter-spacing: var(--letterSpacing-normal);
  color: var(--color-custom-textSecondary);
  margin: 0;
}
/* Section Content */
.card-section__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
/* Divider */
.card-section__divider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 30px;
  width: 1px;
  background-color: var(--color-chart-gridLineDashed);
  pointer-events: none;
}
/* Divider Gap Variants */
.card-section__divider--gap-none {
  top: 0;
  bottom: 0;
}
.card-section__divider--gap-sm {
  top: 0;
  bottom: 16px;
}
.card-section__divider--gap-md {
  top: 0;
  bottom: 30px;
}
.card-section__divider--gap-lg {
  top: 0;
  bottom: 48px;
}

/* ListItem Component Styles */

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  transition: background-color 0.15s ease;
  font-family: var(--fontFamily-sans);
}

.list-item:first-child {
  padding-top: 0;
}

.list-item:last-child {
  padding-bottom: 0;
}

/* Clickable state */

.list-item--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 12px;
  margin: 0 -12px;
}

.list-item--clickable:first-child {
  margin-top: -12px;
}

.list-item--clickable:last-child {
  margin-bottom: -12px;
}

.list-item--clickable:hover {
  background-color: var(--color-background-secondary);
}

.list-item--clickable:active {
  background-color: var(--color-background-tertiary);
}

.list-item--clickable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Icon */

.list-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadius-lg);
  overflow: hidden;
  background-color: var(--color-background-secondary);
  font-size: var(--fontSize-2xl);
}

.list-item__icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon color variants using design tokens */

.list-item__icon--violet {
  background: var(--color-icon-violet-bg);
  color: var(--color-icon-violet-fg);
}

.list-item__icon--green {
  background: var(--color-icon-green-bg);
  color: var(--color-icon-green-fg);
}

.list-item__icon--cyan {
  background: var(--color-icon-cyan-bg);
  color: var(--color-icon-cyan-fg);
}

.list-item__icon--orange {
  background: var(--color-icon-orange-bg);
  color: var(--color-icon-orange-fg);
}

.list-item__icon--gray {
  background: var(--color-icon-gray-bg);
  color: var(--color-icon-gray-fg);
}

/* Icon size variants */

.list-item__icon--sm {
  width: 32px;
  height: 32px;
  font-size: var(--fontSize-base);
}

.list-item__icon--md {
  width: 40px;
  height: 40px;
  font-size: var(--fontSize-2xl);
}

.list-item__icon--lg {
  width: 48px;
  height: 48px;
  font-size: var(--fontSize-4xl);
}

/* Content */

.list-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-item--value-right .list-item__content {
  flex-direction: row;
  align-items: center;
}

.list-item__title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Value */

.list-item__value {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

.list-item__value--right {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}

.list-item__value--bottom {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-tertiary);
}

/* Responsive */

@media (max-width: 640px) {
  .list-item {
    gap: 10px;
  }
  
  .list-item__icon--sm {
    width: 28px;
    height: 28px;
  }
  
  .list-item__icon--md {
    width: 36px;
    height: 36px;
  }
  
  .list-item__icon--lg {
    width: 44px;
    height: 44px;
  }
  
  .list-item__title {
    font-size: 13px;
  }
  
  .list-item__value {
    font-size: 13px;
  }
}

/* StatCard Component Styles */

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--fontFamily-sans);
  margin: 4px;
}

/* Clickable state */

.stat-card--clickable {
  cursor: pointer;
  border-radius: var(--borderRadius-md);
  padding: 8px;
  margin: -4px;
  transition: background-color 0.15s ease;
}

.stat-card--clickable:hover {
  background-color: var(--color-background-secondary);
}

.stat-card--clickable:active {
  background-color: var(--color-background-tertiary);
}

.stat-card--clickable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Icon container */

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-xl);
  margin-top: 2px;
}

.stat-card__icon > * {
  width: 24px;
  height: 24px;
}

/* Icon color variants using design tokens */

.stat-card--icon-violet .stat-card__icon {
  background: var(--color-icon-violet-bg);
  color: var(--color-icon-violet-fg);
}

.stat-card--icon-green .stat-card__icon {
  background: var(--color-icon-green-bg);
  color: var(--color-icon-green-fg);
}

.stat-card--icon-cyan .stat-card__icon {
  background: var(--color-icon-cyan-bg);
  color: var(--color-icon-cyan-fg);
}

.stat-card--icon-orange .stat-card__icon {
  background: var(--color-icon-orange-bg);
  color: var(--color-icon-orange-fg);
}

.stat-card--icon-gray .stat-card__icon {
  background: var(--color-icon-gray-bg);
  color: var(--color-icon-gray-fg);
}

/* Content area */

.stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Label (secondary text) */

.stat-card__label {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  color: var(--color-text-secondary);
}

/* Value (primary text, emphasized) */

.stat-card__value {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-medium);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  color: var(--color-text-primary);
}

/* Trend indicator */

.stat-card__trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fontSize-2xs);
  font-weight: var(--fontWeight-medium);
  line-height: var(--lineHeight-snug);
}

.stat-card__trend--up {
  color: var(--color-success);
}

.stat-card__trend--down {
  color: var(--color-danger);
}

.stat-card__trend--neutral {
  color: var(--color-text-secondary);
}

.stat-card__trend-value {
  font-weight: var(--fontWeight-semibold);
}

.stat-card__trend-label {
  color: var(--color-text-tertiary);
  font-weight: var(--fontWeight-normal);
}

/* Comparison data */

.stat-card__comparison {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
  color: var(--color-text-secondary);
}

.stat-card__comparison-value {
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
}

.stat-card__comparison-label {
  font-weight: var(--fontWeight-normal);
}

/* Size variants */

/* Small size */

.stat-card--sm .stat-card__icon {
  width: 20px;
  height: 20px;
  padding: 4px;
  font-size: var(--fontSize-sm);
}

.stat-card--sm .stat-card__label {
  font-size: 11px;
  line-height: 16px;
}

.stat-card--sm .stat-card__value {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-tight);
}

/* Medium size (default) */

.stat-card--md .stat-card__icon {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: var(--fontSize-base);
}

.stat-card--md .stat-card__label {
  font-size: var(--fontSize-2xs);
  line-height: var(--lineHeight-snug);
}

.stat-card--md .stat-card__value {
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
}

/* Large size */

.stat-card--lg .stat-card__icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  font-size: var(--fontSize-lg);
}

.stat-card--lg .stat-card__label {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-normal);
}

.stat-card--lg .stat-card__value {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-relaxed);
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .stat-card {
    gap: 12px;
  }
  
  .stat-card--md .stat-card__icon {
    width: 22px;
    height: 22px;
  }
}

.comparison-view {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-4);
  width: 100%;
  min-height: 300px;
}

.comparison-view__panel {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Allow flex children to shrink */
  overflow: auto;
}

.comparison-view__label {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-view__content {
  flex: 1;
  padding: var(--spacing-4);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  overflow: auto;
}

.comparison-view__divider {
  width: 1px;
  background: var(--color-border-primary);
  align-self: stretch;
}

/* Diff highlighting mode */

.comparison-view--diff .comparison-view__content {
  position: relative;
}

.comparison-view--diff .comparison-view__panel:first-child .comparison-view__content {
  border-left: 3px solid var(--color-danger-500, #ef4444);
}

.comparison-view--diff .comparison-view__panel:last-child .comparison-view__content {
  border-left: 3px solid var(--color-success-500, #22c55e);
}

/* Responsive design */

@media (max-width: 768px) {
  .comparison-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .comparison-view__divider {
    width: 100%;
    height: 1px;
  }
}

/* DataCard Component Styles */

.data-card {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.data-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Status variants */

.data-card--active {
  border-left: 4px solid var(--color-success);
}

.data-card--inactive {
  border-left: 4px solid var(--color-gray-400);
}

.data-card--warning {
  border-left: 4px solid var(--color-warning);
}

.data-card--error {
  border-left: 4px solid var(--color-danger);
}

/* Header */

.data-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

.data-card__header-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.data-card__header-text {
  flex: 1;
  min-width: 0;
}

.data-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.data-card__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.data-card__status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.data-card__status-indicator--active {
  background-color: var(--color-success);
}

.data-card__status-indicator--inactive {
  background-color: var(--color-gray-400);
}

.data-card__status-indicator--warning {
  background-color: var(--color-warning);
}

.data-card__status-indicator--error {
  background-color: var(--color-danger);
}

/* Avatar */

.data-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Actions */

.data-card__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.data-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.data-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.data-card__action--primary {
  background-color: var(--color-primary);
  color: var(--color-custom-white);
  border-color: var(--color-primary);
}

.data-card__action--primary:hover:not(:disabled) {
  background-color: var(--color-primaryHover);
  border-color: var(--color-primaryHover);
}

.data-card__action--secondary {
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  border-color: var(--color-gray-300);
}

.data-card__action--secondary:hover:not(:disabled) {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.data-card__action--danger {
  background-color: var(--color-danger);
  color: var(--color-custom-white);
  border-color: var(--color-danger);
}

.data-card__action--danger:hover:not(:disabled) {
  background-color: var(--color-dangerHover);
  border-color: var(--color-dangerHover);
}

.data-card__action--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.data-card__action-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

/* Expand button */

.data-card__expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}

.data-card__expand-button:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-text-primary);
}

.data-card__expand-button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.data-card__expand-icon {
  transition: transform 0.2s ease;
}

.data-card__expand-icon--expanded {
  transform: rotate(180deg);
}

/* Body */

.data-card__body {
  padding: 20px;
}

/* Fields */

.data-card__fields {
  display: flex;
  flex-direction: column;
}

.data-card__fields--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .data-card__fields--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.data-card__fields--list {
  gap: 12px;
}

.data-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-card__field--list {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
}

.data-card__field--list:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.data-card__field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.data-card__field--list .data-card__field-label {
  flex-shrink: 0;
  min-width: 120px;
}

.data-card__field-value {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.5;
  word-break: break-word;
}

.data-card__field--list .data-card__field-value {
  text-align: right;
  flex: 1;
}

.data-card__field-link {
  color: var(--color-custom-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.data-card__field-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Footer */

.data-card__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
}

/* Table Component Styles */

.table-wrapper {
  width: 100%;
  overflow: auto;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-lg);
  box-shadow: var(--boxShadow-base);
}

.table-wrapper--sticky-header {
  position: relative;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fontFamily-sans);
}

/* Header */

.table__header {
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border);
}

.table-wrapper--sticky-header .table__header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table__header-row {
  background: var(--color-background-secondary);
}

.table__header-cell {
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--fontWeight-semibold);
  font-size: var(--fontSize-sm);
  line-height: 1.42857;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.table__header-cell--center {
  text-align: center;
}

.table__header-cell--right {
  text-align: right;
}

.table__header-cell--checkbox {
  width: 48px;
  padding: 12px 16px;
}

.table__header-cell--sortable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.table__header-cell--sortable:hover {
  background-color: var(--color-primary-alpha);
}

.table__header-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table__header-cell--center .table__header-content {
  justify-content: center;
}

.table__header-cell--right .table__header-content {
  justify-content: flex-end;
}

.table__sort-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}

.table__header-cell--sorted .table__sort-icon {
  color: var(--color-primary);
}

/* Body */

.table__body {
  background: var(--color-background);
}

.table__row {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s ease;
}

.table__row:last-child {
  border-bottom: none;
}

.table__row--clickable {
  cursor: pointer;
}

.table__row--clickable:hover {
  background-color: var(--color-background-secondary);
}

.table__row--selected {
  background-color: var(--color-primary-alpha);
}

.table__row--selected:hover {
  background-color: var(--color-brand-100);
}

.table__row--empty {
  background: transparent;
}

.table__row--empty:hover {
  background: transparent;
}

/* Cells */

.table__cell {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  vertical-align: middle;
}

.table__cell--center {
  text-align: center;
}

.table__cell--right {
  text-align: right;
}

.table__cell--checkbox {
  width: 48px;
  padding: 12px 16px;
}

.table__cell--empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 48px 16px;
}

/* Checkbox */

.table__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Density Variants */

.table-wrapper--compact .table__header-cell,
.table-wrapper--compact .table__cell {
  padding: 8px 12px;
  font-size: 13px;
}

.table-wrapper--spacious .table__header-cell,
.table-wrapper--spacious .table__cell {
  padding: 16px 20px;
  font-size: 15px;
}

/* Visual Variants */

.table-wrapper--striped .table__row:nth-child(even) {
  background-color: var(--color-background-secondary);
}

.table-wrapper--striped .table__row--selected:nth-child(even) {
  background-color: var(--color-primary-alpha);
}

.table-wrapper--bordered .table__cell {
  border-right: 1px solid var(--color-border-primary);
}

.table-wrapper--bordered .table__cell:last-child,
.table-wrapper--bordered .table__header-cell:last-child {
  border-right: none;
}

/* Loading State */

.table__skeleton {
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--color-border-primary) 25%,
    var(--color-background-tertiary) 50%,
    var(--color-border-primary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.table__skeleton--checkbox {
  width: 16px;
  height: 16px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive */

@media (max-width: 768px) {
  .table-wrapper {
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
  }

  .table__header-cell,
  .table__cell {
    padding: 10px 12px;
    font-size: 13px;
  }

  .table-wrapper--compact .table__header-cell,
  .table-wrapper--compact .table__cell {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* Scrollable container */

.table-wrapper[style*="max-height"] .table-container {
  overflow-y: auto;
}

/* Focus styles for accessibility */

.table__checkbox:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.table__header-cell--sortable:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Pagination */

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--borderRadius-lg) var(--borderRadius-lg);
  gap: 16px;
}

.table-pagination__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.table-pagination__page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-pagination__label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
}

.table-pagination__select {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.table-pagination__select:hover {
  border-color: var(--color-primary);
}

.table-pagination__select:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.table-pagination__text {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.table-pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-pagination__button:hover:not(:disabled) {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.table-pagination__button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.table-pagination__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.table-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-pagination__page:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.table-pagination__page:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.table-pagination__page--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.table-pagination__page--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
}

.table-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  font-size: var(--fontSize-sm);
  color: var(--color-text-tertiary);
  user-select: none;
}

/* Responsive Pagination */

@media (max-width: 768px) {
  .table-pagination {
    flex-direction: column;
    gap: 12px;
  }

  .table-pagination__info {
    width: 100%;
    justify-content: space-between;
  }

  .table-pagination__controls {
    width: 100%;
    justify-content: center;
  }

  .table-pagination__pages {
    flex: 1;
    justify-content: center;
  }
}

/* Expand toggle */

.table__expand-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

.table__expand-toggle:hover {
  color: var(--color-text-primary);
}

/* Details row */

.table__row--details {
  display: none;
  background: var(--color-background-secondary);
}

.table__row--details-visible {
  display: table-row;
}

.table__cell--details {
  padding: 12px 16px;
  background: var(--color-background-secondary);
}

.table__details-content {
  color: var(--color-text-primary);
  font-size: 14px;
}

/* Hierarchical / Tree Styles */

.table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--borderRadius-lg) var(--borderRadius-lg) 0 0;
}

.table-toolbar__button {
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-toolbar__button:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-primary);
}

.table-toolbar__button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.table__cell--tree {
  position: relative;
}

.table__tree-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.table__tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.table__tree-toggle:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
  border-radius: var(--borderRadius-sm);
}

.table__tree-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table__tree-toggle:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--borderRadius-sm);
}

.table__tree-spacer {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  flex-shrink: 0;
}

.table__tree-content {
  flex: 1;
  min-width: 0;
}

.table__tree-loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: tree-loading-spin 0.6s linear infinite;
}

@keyframes tree-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.table__tree-lines {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  gap: 24px;
  pointer-events: none;
}

.table__tree-line {
  position: relative;
  width: 1px;
  background: var(--color-border);
}

.table__tree-line--last {
  height: 50%;
  background: var(--color-border);
}

.table__tree-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--color-border);
}

/* Hierarchical row levels */

.table__row--level-0 {
  font-weight: var(--fontWeight-semibold);
}

.table__row--level-1 {
  background: rgba(0, 0, 0, 0.01);
}

.table__row--level-2 {
  background: rgba(0, 0, 0, 0.02);
}

.table__row--level-3 {
  background: rgba(0, 0, 0, 0.03);
}

.table__row--level-4 {
  background: rgba(0, 0, 0, 0.04);
}

.table__row--level-5 {
  background: rgba(0, 0, 0, 0.05);
}

/* DataGrid Component Styles */

.data-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-lg);
  overflow: hidden;
}

/* Toolbar */

.data-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}

.data-grid__toolbar-left,
.data-grid__toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-grid__toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.data-grid__toolbar-button:hover {
  background: var(--color-gray-100);
  border-color: var(--color-border-secondary);
  color: var(--color-text-primary);
}

.data-grid__toolbar-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.data-grid__toolbar-button--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.data-grid__toolbar-button--active:hover {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.data-grid__toolbar-button--clear {
  color: var(--color-red-600);
  border-color: var(--color-red-200);
}

.data-grid__toolbar-button--clear:hover {
  background: var(--color-red-50);
  border-color: var(--color-red-300);
}

.data-grid__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: var(--fontWeight-semibold);
  color: white;
  background: var(--color-brand-600);
  border-radius: 9px;
}

/* Filter Row */

.data-grid__filter-row {
  display: flex;
  gap: 0;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}

.data-grid__filter-cell {
  flex-shrink: 0;
  padding-right: 12px;
}

.data-grid__filter-cell:last-child {
  padding-right: 0;
}

.data-grid__filter-input,
.data-grid__filter-select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--fontSize-sm);
  font-family: var(--fontFamily-sans);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  transition: all 0.15s ease;
}

.data-grid__filter-input:focus,
.data-grid__filter-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.data-grid__filter-input::placeholder {
  color: var(--color-text-tertiary);
}

.data-grid__filter-select {
  cursor: pointer;
}

/* Table wrapper */

.data-grid__table {
  border-radius: 0;
  box-shadow: none;
}

/* Responsive */

@media (max-width: 768px) {
  .data-grid__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .data-grid__toolbar-left,
  .data-grid__toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .data-grid__filter-row {
    flex-direction: column;
    gap: 8px;
  }

  .data-grid__filter-cell {
    width: 100% !important;
    padding-right: 0;
  }
}

/* Loading state */

.data-grid--loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty state */

.data-grid__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fontSize-sm);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 24px;
}

/* Size Variants */

.empty-state--sm {
  padding: 32px 16px;
  gap: 16px;
}

.empty-state--md {
  padding: 48px 24px;
  gap: 24px;
}

.empty-state--lg {
  padding: 64px 32px;
  gap: 32px;
}

/* Icon Container */

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 48px;
  line-height: 1;
}

.empty-state--sm .empty-state__icon {
  font-size: 32px;
}

.empty-state--md .empty-state__icon {
  font-size: 48px;
}

.empty-state--lg .empty-state__icon {
  font-size: 64px;
}

/* Content Container */

.empty-state__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}

.empty-state--sm .empty-state__content {
  max-width: 360px;
  gap: 4px;
}

.empty-state--lg .empty-state__content {
  max-width: 600px;
  gap: 12px;
}

/* Title */

.empty-state__title {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-semibold);
  font-size: var(--fontSize-lg);
  line-height: var(--lineHeight-28);
  color: var(--color-text-primary);
  margin: 0;
}

.empty-state--sm .empty-state__title {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-24);
}

.empty-state--lg .empty-state__title {
  font-size: var(--fontSize-xl);
  line-height: var(--lineHeight-32);
}

/* Description */

.empty-state__description {
  font-family: var(--fontFamily-sans);
  font-weight: var(--fontWeight-normal);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-24);
  color: var(--color-text-secondary);
  margin: 0;
}

.empty-state--sm .empty-state__description {
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-20);
}

.empty-state--lg .empty-state__description {
  font-size: var(--fontSize-base);
  line-height: var(--lineHeight-28);
}

/* Action Container */

.empty-state__action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.empty-state--sm .empty-state__action {
  margin-top: 4px;
}

.empty-state--lg .empty-state__action {
  margin-top: 16px;
}

/* List Component Styles */

.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-md);
  overflow: hidden;
}

/* Toolbar Variant */

.list--toolbar {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  width: auto;
  border-bottom: 1px solid var(--color-border-primary);
  background-color: var(--color-surface-secondary);
  border-radius: 0;
  scrollbar-width: thin;
}

.list--toolbar::-webkit-scrollbar {
  height: 0.375rem;
}

.list--toolbar::-webkit-scrollbar-track {
  background: transparent;
}

.list--toolbar::-webkit-scrollbar-thumb {
  background-color: var(--color-border-secondary);
  border-radius: var(--borderRadius-sm);
}

.list--toolbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-tertiary);
}

/* List Item */

.list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-primary);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  cursor: default;
  transition: background-color 0.15s ease;
  position: relative;
}

/* Toolbar Item */

.list--toolbar .list__item {
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 4rem;
  padding: 0.5rem;
  gap: 0.25rem;
  text-align: center;
  border-radius: var(--borderRadius-sm);
}

.list--toolbar .list__item--selectable {
  cursor: pointer;
}

.list--toolbar .list__item--selectable:hover:not(.list__item--disabled) {
  background-color: var(--color-background-primary);
}

.list--toolbar .list__item--selected {
  background-color: var(--color-primary-alpha);
  border-bottom: 2px solid var(--color-primary);
}

.list--toolbar .list__item--selected:hover:not(.list__item--disabled) {
  background-color: var(--color-primary-alpha);
}

.list--toolbar .list__item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.list__item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  z-index: 1;
}

.list__item:focus:not(:focus-visible) {
  outline: none;
}

/* Selectable Item */

.list__item--selectable {
  cursor: pointer;
}

.list__item--selectable:hover:not(.list__item--disabled) {
  background-color: var(--color-background-secondary);
}

.list__item--selected {
  background-color: var(--color-primary-alpha);
}

.list__item--selected:hover:not(.list__item--disabled) {
  background-color: var(--color-primary-alpha);
}

/* Disabled Item */

.list__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Nested Item */

.list__item--nested {
  border-left: 2px solid var(--color-border-secondary);
}

/* Expand Button */

.list__expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.list--toolbar .list__expand-button {
  display: none;
}

.list__expand-button:hover {
  background-color: var(--color-background-secondary);
}

.list__expand-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.list__expand-icon {
  display: inline-block;
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}

.list__expand-icon--expanded {
  transform: rotate(90deg);
}

/* Checkbox/Radio */

.list__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list--toolbar .list__checkbox {
  display: none;
}

.list__checkbox input[type='checkbox'],
.list__checkbox input[type='radio'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.list__checkbox input[type='checkbox']:disabled,
.list__checkbox input[type='radio']:disabled {
  cursor: not-allowed;
}

/* Content */

.list__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list--toolbar .list__content {
  flex: none;
  width: 100%;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--fontSize-xs);
}

/* Actions */

.list__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

.list__action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
  font-size: var(--fontSize-sm);
}

.list__action-button:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.list__action-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.list__action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Nested Items Container */

.list__nested {
  display: flex;
  flex-direction: column;
}

/* Divider */

.list__divider {
  height: 1px;
  background-color: var(--color-border-primary);
  margin: 0;
}

/* Group */

.list__group {
  display: flex;
  flex-direction: column;
}

.list__group:not(:last-child) {
  margin-bottom: 0.5rem;
}

.list__group-header {
  padding: 0.5rem 1rem;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-wide);
  background-color: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}

.list__group-items {
  display: flex;
  flex-direction: column;
}

/* Empty State */

.list:empty::before {
  content: 'No items';
  display: block;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-sm);
}

/* Scrollable List */

.list[style*='overflow'] {
  border: 1px solid var(--color-border-primary);
}

/* FileList Component Styles */

.file-list {
  width: 100%;
  position: relative;
}

/* List View (default) */

.file-list--list {
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-md);
}

/* Grid View */

.file-list--grid {
  background-color: transparent;
}

.file-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 0;
}

/* Grid Item */

.file-list__grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: default;
  transition: all 0.15s ease;
}

.file-list__grid-item--selectable {
  cursor: pointer;
}

.file-list__grid-item--selectable:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.file-list__grid-item--selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-alpha);
}

.file-list__grid-item:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Grid Checkbox */

.file-list__grid-checkbox {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

.file-list__grid-checkbox input[type='checkbox'],
.file-list__grid-checkbox input[type='radio'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Grid Actions */

.file-list__grid-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-primary);
}

.file-list__grid-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.file-list__grid-action-button:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.file-list__grid-action-button:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.file-list__grid-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* File Content (shared between list and grid) */

.file-list__file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.file-list__file--grid {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* File Icon */

.file-list__file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
}

.file-list__file--grid .file-list__file-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
}

.file-list__file--grid .file-list__file-icon svg {
  width: 4rem;
  height: 4rem;
}

/* File Info */

.file-list__file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-list__file--grid .file-list__file-info {
  width: 100%;
}

/* File Name */

.file-list__file-name {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list__file--grid .file-list__file-name {
  font-size: var(--fontSize-base);
}

/* File Meta */

.file-list__file-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fontSize-xs);
  color: var(--color-text-secondary);
}

.file-list__file--grid .file-list__file-meta {
  justify-content: center;
  flex-wrap: wrap;
}

.file-list__file-separator {
  color: var(--color-text-tertiary);
}

.file-list__file-size,
.file-list__file-date {
  white-space: nowrap;
}

.file-list__file-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File Status */

.file-list__file-status {
  margin-left: auto;
  flex-shrink: 0;
}

.file-list__file--grid .file-list__file-status {
  margin-left: 0;
  margin-top: 0.5rem;
}

/* Empty State */

.file-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.file-list__empty-icon {
  margin-bottom: 1rem;
  color: var(--color-text-tertiary);
  opacity: 0.5;
}

.file-list__empty-text {
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fontWeight-medium);
}

/* Responsive Design */

@media (max-width: 768px) {
  .file-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
  }
  
  .file-list__grid-item {
    padding: 0.75rem;
  }
  
  .file-list__file-icon {
    width: 2rem;
    height: 2rem;
  }
  
  .file-list__file--grid .file-list__file-icon {
    width: 3rem;
    height: 3rem;
  }
  
  .file-list__file--grid .file-list__file-icon svg {
    width: 3rem;
    height: 3rem;
  }
  
  .file-list__file-name {
    font-size: var(--fontSize-xs);
  }
  
  .file-list__file--grid .file-list__file-name {
    font-size: var(--fontSize-sm);
  }
  
  .file-list__file-meta {
    font-size: var(--fontSize-2xs);
  }
  
  .file-list__file-description {
    display: none;
  }
}

@media (min-width: 1024px) {
  .file-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* FilterBar Component Styles */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--borderRadius-lg);
  padding: var(--borderRadius-lg) var(--borderRadius-xl);
  background: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-lg);
}

/* Left Section: Search + Quick Filters */

.filter-bar__left {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 1 1 auto;
  min-width: 0;
}

.filter-bar__search {
  flex: 0 1 240px;
  min-width: 180px;
}

.filter-bar__quick-filters {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
  flex-wrap: wrap;
}

.filter-bar__filter-button {
  display: inline-flex;
  align-items: center;
  gap: var(--borderRadius-md);
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  white-space: nowrap;
}

.filter-bar__filter-button:hover {
  background: var(--color-background-secondary);
  border-color: var(--color-border-secondary);
}

.filter-bar__filter-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.filter-bar__filter-button--active {
  color: var(--color-background-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-bar__filter-button--active:hover {
  background: var(--color-primaryHover);
  border-color: var(--color-primaryHover);
}

.filter-bar__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: var(--fontSize-xs);
  font-weight: var(--fontWeight-semibold);
  background: var(--color-white-alpha-20);
  border-radius: var(--borderRadius-full);
}

.filter-bar__filter-button--active .filter-bar__filter-count {
  background: var(--color-white-alpha-20);
}

.filter-bar__filter-button:not(.filter-bar__filter-button--active) .filter-bar__filter-count {
  background: var(--color-secondary-alpha);
  color: var(--color-text-primary);
}

/* Center Section: Active Filters */

.filter-bar__center {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 1 1 auto;
  min-width: 0;
}

.filter-bar__separator {
  width: 1px;
  height: 24px;
  background: var(--color-border-primary);
  flex-shrink: 0;
}

.filter-bar__active-filters {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.filter-bar__clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-bar__clear-all:hover {
  color: var(--color-danger);
  background: var(--color-danger-alpha);
}

.filter-bar__clear-all:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.filter-bar__clear-icon {
  width: 14px;
  height: 14px;
}

/* Right Section: Sort, View Modes, Results Count */

.filter-bar__right {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-lg);
  flex: 0 0 auto;
}

.filter-bar__sort {
  display: flex;
  align-items: center;
  gap: var(--borderRadius-md);
}

.filter-bar__sort-label {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.filter-bar__sort-select {
  padding: var(--borderRadius-md) var(--borderRadius-lg);
  font-size: var(--fontSize-sm);
  color: var(--color-text-primary);
  background: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-md);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.filter-bar__sort-select:hover {
  border-color: var(--color-border-secondary);
}

.filter-bar__sort-select:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: var(--color-border-focus);
}

.filter-bar__view-modes {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-md);
}

.filter-bar__view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--borderRadius-base);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.filter-bar__view-button:hover {
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
}

.filter-bar__view-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.filter-bar__view-button--active {
  color: var(--color-primary);
  background: var(--color-background-white);
  box-shadow: var(--boxShadow-sm);
}

.filter-bar__view-button--active:hover {
  color: var(--color-primaryHover);
  background: var(--color-background-white);
}

.filter-bar__view-button svg {
  width: 18px;
  height: 18px;
}

.filter-bar__results {
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Responsive Design */

@media (max-width: 1024px) {
  .filter-bar {
    gap: var(--borderRadius-md);
  }

  .filter-bar__left,
  .filter-bar__center,
  .filter-bar__right {
    gap: var(--borderRadius-md);
  }

  .filter-bar__search {
    flex: 1 1 200px;
  }
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--borderRadius-lg);
  }

  .filter-bar__left,
  .filter-bar__center,
  .filter-bar__right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .filter-bar__search {
    flex: 1 1 auto;
    width: 100%;
  }

  .filter-bar__quick-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
  }

  .filter-bar__quick-filters::-webkit-scrollbar {
    height: 4px;
  }

  .filter-bar__quick-filters::-webkit-scrollbar-track {
    background: transparent;
  }

  .filter-bar__quick-filters::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--borderRadius-full);
  }

  .filter-bar__separator {
    width: 100%;
    height: 1px;
  }

  .filter-bar__right {
    flex-direction: row;
    justify-content: space-between;
  }

  .filter-bar__sort,
  .filter-bar__view-modes,
  .filter-bar__results {
    flex: 1 1 auto;
  }
}

/* MetricBox Component Styles */

.metric-box {
  /* Layout */
  display: block;
  height: 85px;
  padding: var(--spacing-2);
  text-align: left;
  box-sizing: border-box;

  /* Border */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--borderRadius-lg);
}

/* Label */

.metric-box__label {
  /* Typography */
  font-family: var(--fontFamily-sans-0), var(--fontFamily-sans-1), var(--fontFamily-sans-2), var(--fontFamily-sans-3), sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;

  /* Color */
  color: var(--color-text-secondary);

  /* Spacing */
  margin-bottom: var(--spacing-1);
}

/* Value */

.metric-box__value {
  /* Typography */
  font-family: var(--fontFamily-sans-0), var(--fontFamily-sans-1), var(--fontFamily-sans-2), var(--fontFamily-sans-3), sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0px;

  /* Default Color - inherits from parent */
  color: inherit;
}

/* Variant: Danger (Red) */

.metric-box--danger .metric-box__value {
  color: var(--color-red-600);
}

/* Variant: Warning (Orange/Yellow) */

.metric-box--warning .metric-box__value {
  color: var(--color-yellow-600);
}

/* Variant: Success (Green) */

.metric-box--success .metric-box__value {
  color: var(--color-green-600);
}

/* MetricCard Component Styles */

.metric-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-surface-primary);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.metric-card--bordered {
  border: 1px solid var(--color-border-primary);
}

.metric-card--shadow {
  box-shadow: var(--shadow-sm);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
}

/* Size Variants */

.metric-card--sm {
  padding: var(--spacing-3);
  gap: var(--spacing-2);
}

.metric-card--sm .metric-card__label {
  font-size: var(--font-size-xs);
}

.metric-card--sm .metric-card__value {
  font-size: var(--font-size-lg);
}

.metric-card--sm .metric-card__description {
  font-size: var(--font-size-xs);
}

.metric-card--md {
  padding: var(--spacing-4);
  gap: var(--spacing-3);
}

.metric-card--md .metric-card__label {
  font-size: var(--font-size-sm);
}

.metric-card--md .metric-card__value {
  font-size: var(--font-size-2xl);
}

.metric-card--md .metric-card__description {
  font-size: var(--font-size-sm);
}

.metric-card--lg {
  padding: var(--spacing-6);
  gap: var(--spacing-4);
}

.metric-card--lg .metric-card__label {
  font-size: var(--font-size-md);
}

.metric-card--lg .metric-card__value {
  font-size: var(--font-size-3xl);
}

.metric-card--lg .metric-card__description {
  font-size: var(--font-size-md);
}

/* Icon */

.metric-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.metric-card--sm .metric-card__icon {
  width: 32px;
  height: 32px;
}

.metric-card--lg .metric-card__icon {
  width: 48px;
  height: 48px;
}

/* Content */

.metric-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
}

.metric-card__label {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.metric-card__value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.metric-card__description {
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}

/* Variant Styles */

.metric-card--default .metric-card__icon {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}

.metric-card--success .metric-card__icon {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.metric-card--success .metric-card__value {
  color: var(--color-success-700);
}

.metric-card--warning .metric-card__icon {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

.metric-card--warning .metric-card__value {
  color: var(--color-warning-700);
}

.metric-card--danger .metric-card__icon {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}

.metric-card--danger .metric-card__value {
  color: var(--color-danger-700);
}

.metric-card--info .metric-card__icon {
  background: var(--color-info-50);
  color: var(--color-info-700);
}

.metric-card--info .metric-card__value {
  color: var(--color-info-700);
}

/* MetricGrid Component Styles */

.metric-grid {
  display: grid;
  width: 100%;
}

/* Auto columns - fill available space with minimum width */

.metric-grid:not([class*='metric-grid--cols-']) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Gap Variants */

.metric-grid--gap-sm {
  gap: var(--spacing-2);
}

.metric-grid--gap-md {
  gap: var(--spacing-4);
}

.metric-grid--gap-lg {
  gap: var(--spacing-6);
}

/* Responsive Behavior */

.metric-grid--responsive.metric-grid--cols-4,
.metric-grid--responsive.metric-grid--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.metric-grid--responsive.metric-grid--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Mobile adjustments */

@media (max-width: 640px) {
  .metric-grid--responsive {
    grid-template-columns: 1fr;
  }
}

/* Tablet adjustments */

@media (min-width: 641px) and (max-width: 1024px) {
  .metric-grid--responsive.metric-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metric-grid--responsive.metric-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop adjustments */

@media (min-width: 1025px) {
  .metric-grid--responsive.metric-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .metric-grid--responsive.metric-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .metric-grid--responsive.metric-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Non-responsive fixed columns */

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-1 {
  grid-template-columns: 1fr;
}

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.metric-grid:not(.metric-grid--responsive).metric-grid--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Pagination Container */
.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination__list-item {
  display: flex;
}
/* Pagination Items (Buttons & Ellipsis) */
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.pagination__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* Size Variants */
.pagination--sm .pagination__item {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.pagination--md .pagination__item {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}
.pagination--lg .pagination__item {
  min-width: 3rem;
  height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}
/* Page Items */
.pagination__item--page {
  gap: 0;
}
.pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.pagination__item--page.pagination__item--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  cursor: default;
}
/* Navigation Items */
.pagination__item--nav {
  gap: 0.375rem;
}
.pagination__item--nav:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.pagination__nav-icon {
  flex-shrink: 0;
}
.pagination--sm .pagination__nav-icon {
  width: 1rem;
  height: 1rem;
}
.pagination--md .pagination__nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pagination--lg .pagination__nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Hide text on smaller viewports for nav buttons */
.pagination__nav-text {
  display: none;
}
@media (min-width: 640px) {
  .pagination__nav-text {
    display: inline;
  }
}
/* First/Last buttons - always icon only */
.pagination__item--first,
.pagination__item--last {
  min-width: auto;
  padding: 0;
}
.pagination--sm .pagination__item--first,
.pagination--sm .pagination__item--last {
  width: 2rem;
}
.pagination--md .pagination__item--first,
.pagination--md .pagination__item--last {
  width: 2.5rem;
}
.pagination--lg .pagination__item--first,
.pagination--lg .pagination__item--last {
  width: 3rem;
}
/* Ellipsis */
.pagination__item--ellipsis {
  cursor: default;
  pointer-events: none;
}
.pagination__ellipsis-icon {
  flex-shrink: 0;
}
.pagination--sm .pagination__ellipsis-icon {
  width: 1rem;
  height: 1rem;
}
.pagination--md .pagination__ellipsis-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pagination--lg .pagination__ellipsis-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Disabled State */
.pagination__item:disabled,
.pagination--disabled .pagination__item {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Outlined Variant */
.pagination--outlined .pagination__item {
  border-color: var(--color-border-secondary);
}
.pagination--outlined .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--outlined .pagination__item--page.pagination__item--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.pagination--outlined .pagination__item--nav:hover:not(:disabled) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--outlined .pagination__item--ellipsis {
  border-color: transparent;
}
/* Rounded Variant */
.pagination--rounded .pagination__item {
  border-radius: 9999px;
}
.pagination--rounded .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  background-color: var(--color-background-secondary);
}
.pagination--rounded .pagination__item--page.pagination__item--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
/* Rounded + Outlined Combination */
.pagination--rounded.pagination--outlined .pagination__item {
  border-color: var(--color-border-secondary);
  border-radius: 9999px;
}
.pagination--rounded.pagination--outlined .pagination__item--page:hover:not(:disabled):not(.pagination__item--active) {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-tertiary);
}
.pagination--rounded.pagination--outlined .pagination__item--page.pagination__item--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.pagination--rounded.pagination--outlined .pagination__item--ellipsis {
  border-color: transparent;
}
/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
  .pagination__item--page.pagination__item--active {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}
/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pagination__item {
    transition: none;
  }
}

/* RecommendationCard.css */

/* Container Base */

.recommendation-card {
  /* Layout */
  padding: 1rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  
  /* Background */
  background-color: #f2f3f3;
  
  /* Border - color varies by priority modifier */
  border: 1px solid var(--color-gray-300);
  
  /* Box Model */
  box-sizing: border-box;
}

/* Priority Modifiers - Border Colors */

.recommendation-card--critical {
  border-color: var(--color-red-300);
}

.recommendation-card--high {
  border-color: var(--color-yellow-300);
}

.recommendation-card--medium {
  border-color: var(--color-brand-300);
}

.recommendation-card--low {
  border-color: var(--color-gray-300);
}

/* Header Section */

.recommendation-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* Title */

.recommendation-card__title {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  
  /* Color */
  color: var(--color-text-primary);
  
  /* Reset margins */
  margin: 0;
}

/* Badge Custom Styles */

.recommendation-card__badge {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  border-radius: 4px;
  height: 19px;
  padding: 2px 15px;
  text-transform: capitalize;
}

/* Description */

.recommendation-card__description {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fontSize-xs);
  line-height: 1.5;
  
  /* Color */
  color: var(--color-text-secondary);
  
  /* Spacing */
  margin: 0 0 1rem 0;
}

/* Footer Section */

.recommendation-card__footer {
  /* Layout */
  display: block;
  margin-top: 1rem;
}

/* Test Name in Footer */

.recommendation-card__test-name {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  
  /* Color */
  color: var(--color-text-primary);
}

/* Empty Footer (when no test name) */

.recommendation-card__footer:empty {
  display: none;
  margin: 0;
}

/* Interactive State */

.recommendation-card[style*="cursor: pointer"]:hover {
  opacity: 0.95;
}

.recommendation-card[style*="cursor: pointer"]:active {
  opacity: 0.9;
}

/* Accordion Container */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--borderRadius-lg);
  background-color: var(--color-background-white);
  overflow: hidden;
}
/* Accordion Item */
.accordion__item {
  border-bottom: 1px solid var(--color-border-primary);
  transition: background-color 0.2s ease;
}
.accordion__item:last-child {
  border-bottom: none;
}
.accordion__item:hover:not(.accordion__item--disabled) {
  background-color: var(--color-background-secondary);
}
.accordion__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Accordion Trigger */
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--fontSize-base);
  font-weight: var(--fontWeight-medium);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
  outline: none;
}
.accordion__trigger:hover:not(:disabled) {
  color: var(--color-brand-600);
}
.accordion__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
  z-index: 1;
  position: relative;
}
.accordion__trigger:disabled {
  cursor: not-allowed;
}
.accordion__trigger-content {
  flex: 1;
  min-width: 0;
}
/* Accordion Icon */
.accordion__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-text-secondary);
}
.accordion__item--expanded .accordion__icon {
  transform: rotate(180deg);
  color: var(--color-brand-600);
}
.accordion__item--disabled .accordion__icon {
  color: var(--color-text-tertiary);
}
/* Accordion Content Wrapper */
.accordion__content-wrapper {
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 0;
}
/* Accordion Content */
.accordion__content {
  padding: 0 20px 20px;
  color: var(--color-text-secondary);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-relaxed);
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .accordion__content-wrapper,
  .accordion__icon,
  .accordion__trigger {
    transition: none;
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .accordion__trigger {
    padding: 14px 16px;
    font-size: var(--fontSize-sm);
  }

  .accordion__content {
    padding: 0 16px 16px;
    font-size: var(--fontSize-xs);
  }

  .accordion__icon {
    width: 18px;
    height: 18px;
  }
}

/* Alert Component */
.alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--borderRadius-md);
  border-left: 4px solid;
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  position: relative;
}
/* Icon */
.alert__icon {
  flex-shrink: 0;
  font-size: var(--fontSize-lg);
  font-weight: var(--fontWeight-bold);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Content */
.alert__content {
  flex: 1;
  min-width: 0;
}
.alert__title {
  font-weight: var(--fontWeight-semibold);
  margin-bottom: 4px;
  font-size: var(--fontSize-sm);
}
.alert__message {
  color: inherit;
  opacity: 0.9;
}
.alert__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Close button */
.alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.2s ease;
  font-size: var(--fontSize-lg);
  line-height: 1;
  opacity: 0.6;
}
.alert__close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.alert__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Info variant */
.alert--info {
  background-color: var(--color-primary-alpha);
  border-left-color: var(--color-primary);
  color: var(--color-text-primary);
}
.alert--info .alert__icon {
  color: var(--color-primary);
}
/* Success variant */
.alert--success {
  background-color: var(--color-success-alpha);
  border-left-color: var(--color-success);
  color: var(--color-text-primary);
}
.alert--success .alert__icon {
  color: var(--color-success);
}
/* Warning variant */
.alert--warning {
  background-color: var(--color-warning-alpha);
  border-left-color: var(--color-warning);
  color: var(--color-text-primary);
}
.alert--warning .alert__icon {
  color: var(--color-warning);
}
/* Error variant */
.alert--error {
  background-color: var(--color-danger-alpha);
  border-left-color: var(--color-danger);
  color: var(--color-text-primary);
}
.alert--error .alert__icon {
  color: var(--color-danger);
}

.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
}

.alert-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.alert-banner__content {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.alert-banner__action {
  flex-shrink: 0;
}

.alert-banner__close {
  flex-shrink: 0;
  margin-left: var(--spacing-2);
  min-width: auto;
  padding: var(--spacing-1);
}

/* Variant: info */

.alert-banner--info {
  background: var(--color-info-bg, rgba(37, 99, 235, 0.1));
  border-color: var(--color-info-border, rgba(37, 99, 235, 0.2));
  color: var(--color-info-text, var(--color-text-primary));
}

.alert-banner--info .alert-banner__icon {
  color: var(--color-info-500, #2563eb);
}

/* Variant: warning */

.alert-banner--warning {
  background: var(--color-warning-bg, rgba(245, 158, 11, 0.1));
  border-color: var(--color-warning-border, rgba(245, 158, 11, 0.2));
  color: var(--color-warning-text, var(--color-text-primary));
}

.alert-banner--warning .alert-banner__icon {
  color: var(--color-warning-500, #f59e0b);
}

/* Variant: error */

.alert-banner--error {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
  border-color: var(--color-danger-border, rgba(239, 68, 68, 0.2));
  color: var(--color-danger-text, var(--color-text-primary));
}

.alert-banner--error .alert-banner__icon {
  color: var(--color-danger-500, #ef4444);
}

/* Variant: success */

.alert-banner--success {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  border-color: var(--color-success-border, rgba(34, 197, 94, 0.2));
  color: var(--color-success-text, var(--color-text-primary));
}

.alert-banner--success .alert-banner__icon {
  color: var(--color-success-500, #22c55e);
}

/* AlertCard.css */

/* Container */

.alert-card {
  /* Layout */
  position: relative;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  
  /* Background */
  background-color: rgba(242, 243, 243, 1); /* #F2F3F3 */
  
  /* Box Model */
  box-sizing: border-box;
}

/* Badges Container */

.alert-card__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* Badge Overrides for AlertCard */

.alert-card__badge {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  border-radius: 4px;
  height: 19px;
  padding: 2px 15px;
  text-transform: capitalize;
}

/* Title */

.alert-card__title {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  
  /* Color */
  color: #0F172A; /* tokens.color.text.primary */
  
  /* Spacing */
  margin: 0 0 0.5rem 0;
}

/* Details Section */

.alert-card__details {
  margin-bottom: 0.75rem;
}

.alert-card__detail {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px; /* tokens.fontSize.xs */
  
  /* Color */
  color: #64748B; /* tokens.color.text.secondary */
  
  /* Spacing */
  margin: 0 0 0.25rem 0;
}

.alert-card__detail:last-child {
  margin-bottom: 0.75rem;
}

/* Actions Container */

.alert-card__actions {
  display: flex;
  gap: 0.5rem; /* 8px */
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #E2E8F0; /* tokens.color.gray[200] */
}

/* Secondary Action Button */

.alert-card__action--secondary {
  /* Typography */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  
  /* Color */
  color: rgba(34, 48, 62, 0.7);
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 30px;
  padding: 0.5rem 1rem; /* 8px 16px */
  
  /* Border */
  border: 1px solid rgba(34, 48, 62, 0.22);
  border-radius: 8px; /* tokens.borderRadius.md */
  
  /* Background */
  background: transparent;
  
  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-card__action--secondary:hover:not(:disabled) {
  background-color: rgba(34, 48, 62, 0.05);
}

.alert-card__action--secondary:disabled {
  color: #94A3B8; /* tokens.color.gray[400] */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Icon spacing within secondary button */

.alert-card__action-icon {
  margin-right: 0.25rem; /* 4px */
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

/* Read State Modifier */

.alert-card--read .alert-card__action--secondary {
  color: #94A3B8; /* tokens.color.gray[400] */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: modal-overlay-fade-in 0.2s ease-out;
  padding: 16px;
}
@keyframes modal-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Modal Container */
.modal {
  background-color: var(--color-background-white);
  border-radius: var(--borderRadius-lg);
  box-shadow: var(--boxShadow-2xl);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  width: 100%;
  animation: modal-scale-in 0.2s ease-out;
  outline: none;
}
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Modal Sizes */
.modal--sm {
  max-width: 400px;
}
.modal--md {
  max-width: 600px;
}
.modal--lg {
  max-width: 800px;
}
.modal--xl {
  max-width: 1000px;
}
.modal--full {
  max-width: 95vw;
  max-height: 95vh;
}
/* Modal Header */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}
.modal__title {
  margin: 0;
  font-size: var(--fontSize-xl);
  font-weight: var(--fontWeight-semibold);
  color: var(--color-text-primary);
  line-height: var(--lineHeight-tight);
}
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--borderRadius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.modal__close:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.modal__close:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.modal__close:active {
  transform: scale(0.95);
}
/* Modal Body */
.modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Custom scrollbar for modal body */
.modal__body::-webkit-scrollbar {
  width: 8px;
}
.modal__body::-webkit-scrollbar-track {
  background: var(--color-background-primary);
  border-radius: var(--borderRadius-full);
}
.modal__body::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--borderRadius-full);
}
.modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}
/* Modal Footer */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: modal-slide-up 0.3s ease-out;
  }

  @keyframes modal-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal--sm,
  .modal--md,
  .modal--lg,
  .modal--xl {
    max-width: 100%;
  }

  .modal__header {
    padding: 16px 20px;
  }

  .modal__body {
    padding: 20px;
  }

  .modal__footer {
    padding: 12px 20px;
    flex-direction: column-reverse;
  }

  .modal__footer > * {
    width: 100%;
  }
}

/* Progress Component Styles */

/* Base */

.progress {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Linear Variant */

.progress--linear {
  flex-direction: column;
  width: 100%;
}

.progress--linear .progress__track {
  width: 100%;
  background-color: var(--color-gray-200);
  border-radius: var(--borderRadius-full);
  overflow: hidden;
  position: relative;
}

.progress--linear .progress__bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--borderRadius-full);
  transition: width 0.3s ease;
}

/* Linear Sizes */

.progress--linear.progress--sm .progress__track {
  height: 4px;
}

.progress--linear.progress--md .progress__track {
  height: 8px;
}

.progress--linear.progress--lg .progress__track {
  height: 12px;
}

/* Circular Variant */

.progress--circular {
  flex-direction: column;
  width: fit-content;
}

.progress__circle {
  display: block;
}

.progress__circle-track {
  stroke: var(--color-gray-200);
}

.progress__circle-bar {
  stroke: var(--color-primary);
  transition: stroke-dashoffset 0.3s ease;
}

/* Color Variants */

.progress--primary .progress__bar,
.progress--primary .progress__circle-bar {
  background-color: var(--color-primary);
  stroke: var(--color-primary);
}

.progress--secondary .progress__bar,
.progress--secondary .progress__circle-bar {
  background-color: var(--color-secondary);
  stroke: var(--color-secondary);
}

.progress--success .progress__bar,
.progress--success .progress__circle-bar {
  background-color: var(--color-success);
  stroke: var(--color-success);
}

/* Label */

.progress__label {
  font-size: var(--fontSize-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fontWeight-medium);
  text-align: center;
  margin-top: 0.25rem;
}

.progress--circular .progress__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0;
  font-size: var(--fontSize-xs);
}

.progress--circular.progress--md .progress__label {
  font-size: var(--fontSize-sm);
}

.progress--circular.progress--lg .progress__label {
  font-size: var(--fontSize-base);
}

/* Indeterminate Animations */

.progress--linear.progress--indeterminate .progress__bar {
  width: 40%;
  animation: progress-slide 2s ease-in-out infinite;
}

@keyframes progress-slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(250%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.progress--circular.progress--indeterminate .progress__circle-bar {
  animation: progress-rotate 1.5s linear infinite;
  transform-origin: center;
}

@keyframes progress-rotate {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

/* Respect reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
  .progress__bar,
  .progress__circle-bar {
    transition: none;
  }
  
  .progress--indeterminate .progress__bar,
  .progress--indeterminate .progress__circle-bar {
    animation: none;
  }
  
  .progress--indeterminate .progress__bar {
    width: 40%;
    transform: translateX(0);
  }
}

/* ProgressTracker Component Styles */

.progress-tracker {
  display: flex;
  width: 100%;
}

/* Horizontal Variant */

.progress-tracker--horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.progress-tracker--horizontal .progress-tracker__step {
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.progress-tracker--horizontal .progress-tracker__connector {
  flex: 1;
  height: 2px;
  margin: 0 var(--spacing-2);
  align-self: flex-start;
  background: var(--color-border-primary);
  position: relative;
  top: 16px;
}

.progress-tracker--horizontal.progress-tracker--sm .progress-tracker__connector {
  top: 12px;
}

.progress-tracker--horizontal.progress-tracker--lg .progress-tracker__connector {
  top: 20px;
}

/* Vertical Variant */

.progress-tracker--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.progress-tracker--vertical .progress-tracker__step {
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

.progress-tracker--vertical .progress-tracker__connector {
  width: 2px;
  height: var(--spacing-8);
  margin: var(--spacing-2) 0;
  margin-left: 15px;
  background: var(--color-border-primary);
}

.progress-tracker--vertical.progress-tracker--sm .progress-tracker__connector {
  margin-left: 11px;
  height: var(--spacing-6);
}

.progress-tracker--vertical.progress-tracker--lg .progress-tracker__connector {
  margin-left: 19px;
  height: var(--spacing-10);
}

/* Step */

.progress-tracker__step {
  display: flex;
  gap: var(--spacing-3);
  position: relative;
}

.progress-tracker__step--clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.progress-tracker__step--clickable:hover {
  opacity: 0.8;
}

.progress-tracker__step--clickable:focus {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Step Indicator */

.progress-tracker__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.progress-tracker--sm .progress-tracker__step-indicator {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
}

.progress-tracker--md .progress-tracker__step-indicator {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.progress-tracker--lg .progress-tracker__step-indicator {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-md);
}

/* Step States */

.progress-tracker__step--pending .progress-tracker__step-indicator {
  background: var(--color-surface-secondary);
  border: 2px solid var(--color-border-primary);
  color: var(--color-text-tertiary);
}

.progress-tracker__step--current .progress-tracker__step-indicator {
  background: var(--color-brand-500);
  border: 2px solid var(--color-brand-500);
  color: var(--color-white);
  box-shadow: 0 0 0 4px rgba(25, 69, 200, 0.1);
}

.progress-tracker__step--completed .progress-tracker__step-indicator {
  background: var(--color-success-500);
  border: 2px solid var(--color-success-500);
  color: var(--color-white);
}

/* Check Icon */

.progress-tracker__check-icon {
  width: 16px;
  height: 16px;
}

.progress-tracker--sm .progress-tracker__check-icon {
  width: 12px;
  height: 12px;
}

.progress-tracker--lg .progress-tracker__check-icon {
  width: 20px;
  height: 20px;
}

/* Step Content */

.progress-tracker__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.progress-tracker--horizontal .progress-tracker__step-content {
  margin-top: var(--spacing-2);
}

.progress-tracker--vertical .progress-tracker__step-content {
  padding-top: var(--spacing-1);
}

/* Step Label */

.progress-tracker__step-label {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  transition: color 0.2s ease;
}

.progress-tracker--sm .progress-tracker__step-label {
  font-size: var(--font-size-sm);
}

.progress-tracker--md .progress-tracker__step-label {
  font-size: var(--font-size-md);
}

.progress-tracker--lg .progress-tracker__step-label {
  font-size: var(--font-size-lg);
}

.progress-tracker__step--pending .progress-tracker__step-label {
  color: var(--color-text-tertiary);
}

.progress-tracker__step--current .progress-tracker__step-label {
  color: var(--color-text-primary);
}

.progress-tracker__step--completed .progress-tracker__step-label {
  color: var(--color-text-secondary);
}

/* Step Description */

.progress-tracker__step-description {
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}

.progress-tracker--sm .progress-tracker__step-description {
  font-size: var(--font-size-xs);
}

.progress-tracker--md .progress-tracker__step-description {
  font-size: var(--font-size-sm);
}

.progress-tracker--lg .progress-tracker__step-description {
  font-size: var(--font-size-md);
}

/* Connector State Colors */

.progress-tracker__step--completed ~ .progress-tracker__connector,
.progress-tracker__step--completed + .progress-tracker__connector {
  background: var(--color-success-500);
}

.progress-tracker__step--current + .progress-tracker__connector {
  background: linear-gradient(
    to right,
    var(--color-success-500) 0%,
    var(--color-border-primary) 100%
  );
}

.progress-tracker--vertical .progress-tracker__step--current + .progress-tracker__connector {
  background: linear-gradient(
    to bottom,
    var(--color-success-500) 0%,
    var(--color-border-primary) 100%
  );
}

/* Toast Component */
.toast {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-sm);
  line-height: var(--lineHeight-normal);
  position: relative;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: toast-slide-in 0.3s ease-out;
  overflow: hidden;
}
/* Animation */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.toast--exiting {
  animation: toast-slide-out 0.3s ease-in;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
  
  .toast--exiting {
    animation: none;
    opacity: 0;
  }
}
/* Icon */
.toast__icon {
  flex-shrink: 0;
  font-size: var(--fontSize-xl);
  font-weight: var(--fontWeight-bold);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Content */
.toast__content {
  flex: 1;
  min-width: 0;
}
.toast__title {
  font-weight: var(--fontWeight-semibold);
  margin-bottom: 4px;
  font-size: var(--fontSize-sm);
}
.toast__message {
  color: inherit;
  opacity: 0.9;
  font-size: var(--fontSize-sm);
}
/* Actions */
.toast__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toast__action {
  background: none;
  border: none;
  padding: 4px 12px;
  font-size: var(--fontSize-sm);
  font-weight: var(--fontWeight-medium);
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: all 0.2s ease;
  color: inherit;
  text-decoration: underline;
}
.toast__action:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.toast__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Close button */
.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--borderRadius-sm);
  transition: background-color 0.2s ease;
  font-size: var(--fontSize-lg);
  line-height: 1;
  opacity: 0.6;
  color: inherit;
}
.toast__close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.toast__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Progress bar */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.toast__progress-bar {
  height: 100%;
  background-color: currentColor;
  transition: width 0.05s linear;
  opacity: 0.7;
}
/* Info variant */
.toast--info {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-primary);
  color: var(--color-text-primary);
}
.toast--info .toast__icon {
  color: var(--color-primary);
}
.toast--info .toast__progress-bar {
  background-color: var(--color-primary);
}
/* Success variant */
.toast--success {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-success);
  color: var(--color-text-primary);
}
.toast--success .toast__icon {
  color: var(--color-success);
}
.toast--success .toast__progress-bar {
  background-color: var(--color-success);
}
/* Warning variant */
.toast--warning {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-warning);
  color: var(--color-text-primary);
}
.toast--warning .toast__icon {
  color: var(--color-warning);
}
.toast--warning .toast__progress-bar {
  background-color: var(--color-warning);
}
/* Error variant */
.toast--error {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-danger);
  color: var(--color-text-primary);
}
.toast--error .toast__icon {
  color: var(--color-danger);
}
.toast--error .toast__progress-bar {
  background-color: var(--color-danger);
}

/* Toast Container */
.toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 500px;
}
.toast-container > * {
  pointer-events: auto;
}
/* Position variants */
.toast-container--top-left {
  top: 24px;
  left: 24px;
}
.toast-container--top-right {
  top: 24px;
  right: 24px;
}
.toast-container--top-center {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.toast-container--bottom-left {
  bottom: 24px;
  left: 24px;
  flex-direction: column-reverse;
}
.toast-container--bottom-right {
  bottom: 24px;
  right: 24px;
  flex-direction: column-reverse;
}
.toast-container--bottom-center {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}
/* Responsive */
@media (max-width: 640px) {
  .toast-container {
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100% - 32px);
  }

  .toast-container--top-center,
  .toast-container--bottom-center {
    transform: none;
  }
}

/* Tooltip Component */

.tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: tooltip-fade-in 0.15s ease-out;
}

@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Tooltip Content */

.tooltip__content {
  padding: 8px 12px;
  border-radius: var(--borderRadius-md);
  font-size: var(--fontSize-sm);
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: var(--boxShadow-lg);
}

/* Tooltip Arrow */

.tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

/* Theme: Dark */

.tooltip--dark .tooltip__content {
  background-color: var(--color-gray-900);
  color: var(--color-background-white);
}

.tooltip--dark .tooltip__arrow {
  background-color: var(--color-gray-900);
}

/* Theme: Light */

.tooltip--light .tooltip__content {
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
}

.tooltip--light .tooltip__arrow {
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-primary);
}

/* Position: Top */

.tooltip--top .tooltip__arrow {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom: none;
  border-right: none;
}

.tooltip--top.tooltip--light .tooltip__arrow {
  border-bottom: none;
  border-right: none;
}

/* Position: Bottom */

.tooltip--bottom .tooltip__arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-top: none;
  border-left: none;
}

.tooltip--bottom.tooltip--light .tooltip__arrow {
  border-top: none;
  border-left: none;
}

/* Position: Left */

.tooltip--left .tooltip__arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-top: none;
  border-right: none;
}

.tooltip--left.tooltip--light .tooltip__arrow {
  border-top: none;
  border-right: none;
}

/* Position: Right */

.tooltip--right .tooltip__arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}

.tooltip--right.tooltip--light .tooltip__arrow {
  border-bottom: none;
  border-left: none;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    animation: none;
  }
}

.action-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.action-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.action-list__item:last-child {
  border-bottom: none;
}

.action-list__item:hover:not(:disabled) {
  background: var(--color-surface-secondary);
}

.action-list__item:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
  z-index: 1;
}

.action-list__item:active:not(:disabled) {
  background: var(--color-surface-tertiary);
}

.action-list__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.action-list__label {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

/* Variant: compact */

.action-list--compact .action-list__item {
  padding: var(--spacing-2) var(--spacing-3);
  gap: var(--spacing-2);
}

/* Variant: comfortable */

.action-list--comfortable .action-list__item {
  padding: var(--spacing-3) var(--spacing-4);
  gap: var(--spacing-3);
}

/* Sizes */

.action-list--sm {
  font-size: var(--font-size-sm);
}

.action-list--sm .action-list__icon {
  font-size: 1rem;
}

.action-list--md {
  font-size: var(--font-size-base);
}

.action-list--md .action-list__icon {
  font-size: 1.25rem;
}

.action-list--lg {
  font-size: var(--font-size-lg);
}

.action-list--lg .action-list__icon {
  font-size: 1.5rem;
}

.copy-button {
  transition: all 0.2s ease;
}

.copy-button--copied {
  animation: copy-success 0.3s ease;
}

@keyframes copy-success {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.copyable-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.copyable-text__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.copyable-text__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0; /* Allow flex children to shrink */
}

.copyable-text__value {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  color: var(--color-text-primary);
  word-break: break-all;
}

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

.copyable-text__value code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-surface-secondary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-primary);
}

.copyable-text__button {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.copyable-text:hover .copyable-text__button {
  opacity: 1;
}

/* Variant: inline */

.copyable-text--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
}

.copyable-text--inline .copyable-text__label {
  margin-right: var(--spacing-1);
}

.copyable-text--inline .copyable-text__content {
  flex: 1;
}

/* Variant: block */

.copyable-text--block {
  padding: var(--spacing-3);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
}

.copyable-text--block .copyable-text__content {
  margin-top: var(--spacing-1);
}

/* Variant: code */

.copyable-text--code {
  font-family: var(--font-family-mono);
}

.copyable-text--code .copyable-text__content {
  background: var(--color-surface-tertiary);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-primary);
}

/* Sizes */

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

.copyable-text--sm .copyable-text__label {
  font-size: var(--font-size-xs);
}

.copyable-text--md {
  font-size: var(--font-size-base);
}

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

.copyable-text--lg .copyable-text__label {
  font-size: var(--font-size-base);
}

/* FileUpload Component Styles */

.file-upload {
  width: 100%;
}

/* Dropzone */

.file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--color-gray-300);
  border-radius: 0.5rem;
  background-color: var(--color-gray-50);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 12rem;
}

.file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) {
  border-color: var(--color-brand-400);
  background-color: var(--color-brand-50);
}

.file-upload__dropzone:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

.file-upload__dropzone--active {
  border-color: var(--color-brand-500);
  background-color: var(--color-brand-50);
}

.file-upload__dropzone--accept {
  border-color: var(--color-green-500);
  background-color: var(--color-green-50);
}

.file-upload__dropzone--reject {
  border-color: var(--color-red-500);
  background-color: var(--color-red-50);
}

.file-upload__dropzone--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-100);
}

/* Dropzone Icon */

.file-upload__dropzone-icon {
  color: var(--color-gray-400);
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

.file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) .file-upload__dropzone-icon {
  color: var(--color-brand-500);
}

.file-upload__dropzone--active .file-upload__dropzone-icon {
  color: var(--color-brand-500);
}

.file-upload__dropzone--accept .file-upload__dropzone-icon {
  color: var(--color-green-500);
}

.file-upload__dropzone--reject .file-upload__dropzone-icon {
  color: var(--color-red-500);
}

/* Dropzone Text */

.file-upload__dropzone-text {
  text-align: center;
}

.file-upload__dropzone-message {
  font-size: 0.875rem;
  color: var(--color-gray-700);
  margin: 0;
}

.file-upload__dropzone-link {
  color: var(--color-brand-600);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.file-upload__dropzone-hint {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin: 0.5rem 0 0 0;
}

/* File List */

.file-upload__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* File Item */

.file-upload__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: var(--color-custom-white);
  transition: all 0.2s ease;
}

.file-upload__item:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.file-upload__item--completed {
  border-color: var(--color-green-200);
  background-color: var(--color-green-50);
}

.file-upload__item--error {
  border-color: var(--color-red-200);
  background-color: var(--color-red-50);
}

.file-upload__item--uploading {
  border-color: var(--color-brand-200);
  background-color: var(--color-brand-50);
}

/* File Preview/Icon */

.file-upload__item-preview {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-upload__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-upload__item-icon {
  color: var(--color-gray-500);
}

/* File Info */

.file-upload__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-upload__item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-upload__item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.file-upload__item-size {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.file-upload__item-progress {
  margin-top: 0.25rem;
}

.file-upload__item-error {
  font-size: 0.75rem;
  color: var(--color-red-600);
  margin-top: 0.25rem;
}

/* File Actions */

.file-upload__item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.file-upload__item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-upload__item-action:hover:not(:disabled) {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.file-upload__item-action:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

.file-upload__item-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.file-upload__item-action--retry {
  color: var(--color-brand-600);
}

.file-upload__item-action--retry:hover:not(:disabled) {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}

.file-upload__item-action--remove {
  color: var(--color-red-600);
}

.file-upload__item-action--remove:hover:not(:disabled) {
  background-color: var(--color-red-50);
  color: var(--color-red-700);
}

/* Responsive Design */

@media (max-width: 640px) {
  .file-upload__dropzone {
    padding: 1.5rem;
    min-height: 10rem;
  }

  .file-upload__item {
    flex-direction: column;
    align-items: stretch;
  }

  .file-upload__item-preview {
    width: 100%;
    height: 8rem;
  }

  .file-upload__item-actions {
    justify-content: flex-end;
  }
}

/* Animation for prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  .file-upload__dropzone,
  .file-upload__dropzone-icon,
  .file-upload__item,
  .file-upload__item-action {
    transition: none;
  }
}